语音矩阵全屏功能修改

src/components/Adult/inputModules/VoiceMatrix.vue

@@ -231,6 +231,7 @@ export default {
           type: "PinyinEnglish",
           name: "拼音 + 英文"
         },
+        // 解决拼音中括号的兼容性问题
         {
           type: "textBrackets",
           name: "文本中有括号"

src/components/Adult/preview/VoiceMatrix.vue

@@ -195,28 +195,20 @@
                 }"
                 @click="matrixCellClick(i, j)"
               >
-                <template v-for="(word, w) in column.sentence_data.wordsList">
+                <template v-for="({pinyin, chs}, w) in column.sentence_data.wordsList">
                   <span
-                    v-if="column.sentence_data.pyPosition === 'top'"
-                    :key="`pinyin-${w}`"
-                    class="pinyin"
+                    :key="`${column.sentence_data.pyPosition === 'top' ? 'pinyin' : 'chs'}-${w}`"
+                    :class="column.sentence_data.pyPosition === 'top' ? 'pinyin' : 'chs'"
                   >
-                    {{ word.pinyin }}
-                  </span>
-                  <span v-else :key="`chs-${w}`" class="chs">
-                    {{ word.chs }}
+                    {{ column.sentence_data.pyPosition === 'top' ? pinyin : chs }}
                   </span>
                 </template>
-                <template v-for="(word, w) in column.sentence_data.wordsList">
+                <template v-for="({pinyin, chs}, w) in column.sentence_data.wordsList">
                   <span
-                    v-if="column.sentence_data.pyPosition === 'top'"
-                    :key="`chs-${w}`"
-                    class="chs"
+                    :key="`${column.sentence_data.pyPosition === 'top' ? 'chs' : 'pinyin'}-${w}`"
+                    :class="column.sentence_data.pyPosition === 'top' ? 'chs' : 'pinyin'"
                   >
-                    {{ word.chs }}
-                  </span>
-                  <span v-else :key="`pinyin-${w}`" class="pinyin">
-                    {{ word.pinyin }}
+                    {{ column.sentence_data.pyPosition === 'top' ? chs : pinyin }}
                   </span>
                 </template>
               </div>

src/components/Adult/preview/VoiceMatrixFullscreen.vue

@@ -28,7 +28,7 @@
               <span
                 :class="[
                   'font-jian-black',
-                  bgIndex === 1 ? 'font-jian-yellow' : '',
+                  bgIndex === 1 ? 'font-jian-yellow' : ''
                 ]"
                 @click="setFontSize('-')"
               />
@@ -39,21 +39,21 @@
                   'font-jian-black',
                   bgIndex === 1
                     ? 'font-jian-yellow-disabled'
-                    : 'font-jian-white-disabled',
+                    : 'font-jian-white-disabled'
                 ]"
               />
             </template>
             <span
               :class="[
                 'font-img-black',
-                bgIndex === 1 ? 'font-img-yellow' : '',
+                bgIndex === 1 ? 'font-img-yellow' : ''
               ]"
             />
             <template v-if="hzSize <= 76">
               <span
                 :class="[
                   'font-jia-black',
-                  bgIndex === 1 ? 'font-jia-yellow' : '',
+                  bgIndex === 1 ? 'font-jia-yellow' : ''
                 ]"
                 @click="setFontSize('+')"
               />
@@ -64,7 +64,7 @@
                   'font-jia-black',
                   bgIndex === 1
                     ? 'font-jia-yellow-disabled'
-                    : 'font-jia-white-disabled',
+                    : 'font-jia-white-disabled'
                 ]"
               />
             </template>
@@ -77,7 +77,7 @@
               :class="[
                 'keyboard-icon',
                 !isKeyboard ? 'disabled' : '',
-                isKeyboard && bgIndex === 1 ? 'keyboard-icon-yellow' : '',
+                isKeyboard && bgIndex === 1 ? 'keyboard-icon-yellow' : ''
               ]"
             />
           </div>
@@ -107,7 +107,31 @@
                 !isRepeat && !isAuto ? 'disabled' : '',
                 isRepeat && !isAuto ? 'auto-icon' : '',
                 !isRepeat && bgIndex === 1 ? 'repeat-icon-yellow' : '',
-                isRepeat && !isAuto && bgIndex === 1 ? 'auto-icon-yellow' : '',
+                isRepeat && !isAuto && bgIndex === 1 ? 'auto-icon-yellow' : ''
+              ]"
+            />
+          </div>
+          <div
+            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
+            @click="changePinyin"
+          >
+            <span
+              :class="[
+                'pinyin-icon',
+                !isShowPY || !isHasPY ? 'disabled' : '',
+                isShowPY && isHasPY && bgIndex === 1 ? 'pinyin-icon-yellow' : ''
+              ]"
+            />
+          </div>
+          <div
+            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
+            @click="changeEN"
+          >
+            <span
+              :class="[
+                'en-icon',
+                !isShowEN || !isHasEN ? 'disabled' : '',
+                isShowEN && bgIndex === 1 && isHasEN ? 'en-icon-yellow' : ''
               ]"
             />
           </div>
@@ -128,8 +152,8 @@
         v-if="curQue.voiceMatrix.matrix.length > 0"
         class="matrix"
         :style="{
-          'grid-template': `96px repeat(${curQue.voiceMatrix.matrix.length}, auto) minmax(1.5em, 1fr) / 112px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) minmax(1.5em, 1fr)`,
-          'font-size': `${hzSize}px`,
+          'grid-template': `96px repeat(${curQue.voiceMatrix.matrix.length}, auto) minmax(1.5em, 1fr) / 112px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) minmax(124px, 1fr)`,
+          'font-size': `${hzSize}px`
         }"
         @mouseleave="clearSelectCell"
       >
@@ -153,7 +177,7 @@
                 `matrix-checkbox-row-${themeColor}`,
                 selectedLine.type === 'column' && selectedLine.index === i
                   ? 'active'
-                  : '',
+                  : ''
               ]"
               @click="selectRowOrColumn(i, 'column')"
             />
@@ -177,7 +201,7 @@
                 `matrix-checkbox-column-${themeColor}`,
                 selectedLine.type === 'row' && selectedLine.index === i
                   ? 'active'
-                  : '',
+                  : ''
               ]"
               @click="selectRowOrColumn(i, 'row')"
             />
@@ -191,7 +215,7 @@
                 (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
                   (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
-                  : '',
+                  : ''
               ]"
               @mouseenter="matrixCellMouseenter(i, j, column.type)"
             >
@@ -213,7 +237,7 @@
                       column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -227,7 +251,7 @@
                   'connection',
                   i === 0 && curQue.voiceMatrix.firstLineHighlight
                     ? `highlight-bc-${themeColor}`
-                    : '',
+                    : ''
                 ]"
               />
               <!-- 分词 -->
@@ -248,35 +272,33 @@
                       column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 :style="{
-                  'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`,
+                  'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`
                 }"
                 @click="matrixCellClick(i, j)"
               >
-                <template v-for="(word, w) in column.sentence_data.wordsList">
+                <template
+                  v-for="({ chs, pinyin }, w) in column.sentence_data.wordsList"
+                >
                   <span
-                    v-if="column.sentence_data.pyPosition === 'top'"
-                    :key="`pinyin-${w}`"
-                    class="pinyin"
+                    :key="`${column.sentence_data.pyPosition === 'top' ? 'pinyin' : 'chs'}-${w}`"
+                    :style="{visibility: column.sentence_data.pyPosition === 'top' && isShowPY ? 'visible' : 'hidden'}"
+                    :class="column.sentence_data.pyPosition === 'top' ? 'pinyin' : 'chs'"
                   >
-                    {{ word.pinyin }}
-                  </span>
-                  <span v-else :key="`chs-${w}`" class="chs">
-                    {{ word.chs }}
+                    {{ column.sentence_data.pyPosition === 'top' ? pinyin : chs }}
                   </span>
                 </template>
-                <template v-for="(word, w) in column.sentence_data.wordsList">
+                <template
+                  v-for="({ chs, pinyin }, w) in column.sentence_data.wordsList"
+                >
                   <span
-                    v-if="column.sentence_data.pyPosition === 'top'"
-                    :key="`chs-${w}`"
-                    class="chs"
+                    :key="`${column.sentence_data.pyPosition === 'top' ? 'chs' : 'pinyin'}-${w}`"
+                    :style="{visibility: column.sentence_data.pyPosition !== 'top' && isShowPY ? 'hidden' : 'visible'}"
+                    :class="column.sentence_data.pyPosition === 'top' ? 'chs' : 'pinyin'"
                   >
-                    {{ word.chs }}
-                  </span>
-                  <span v-else :key="`pinyin-${w}`" class="pinyin">
-                    {{ word.pinyin }}
+                    {{ column.sentence_data.pyPosition === 'top' ? chs : pinyin }}
                   </span>
                 </template>
               </div>
@@ -298,15 +320,17 @@
                       column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 @click="matrixCellClick(i, j)"
               >
                 <div class="inside-wrapper">
-                  <div class="pinyin">
+                  <div
+                    class="pinyin"
+                  >
                     {{ column.pinyin_english_data.pinyin }}
                   </div>
-                  <div class="english">
+                  <div class="english" :style="{visibility: isShowEN ? 'visible' : 'hidden'}">
                     {{ column.pinyin_english_data.english }}
                   </div>
                 </div>
@@ -329,7 +353,7 @@
                       column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -413,7 +437,7 @@ export default {
     VoiceMatrixFullscreenAudio,
     Soundrecorddiff,
     AudioCompare,
-    Wordcard,
+    Wordcard
   },
   props: ["mp3", "curQue", "themeColor"],
   data() {
@@ -445,12 +469,12 @@ export default {
       // 行、列选中
       selectedLine: {
         type: "",
-        index: 0,
+        index: 0
       },
       // 点击选中
       selectCell: {
         row: -1,
-        column: -1,
+        column: -1
       },
       isRepeat: false,
       // 跟读所需属性
@@ -460,9 +484,28 @@ export default {
       unWatch: null,
       lrcArray: [],
       cellTimer: null,
+      // 拼音、英文显隐判断
+      isShowPY: true,
+      isShowEN: true
     };
   },
   computed: {
+    isHasPY() {
+      let matrix = this.curQue.voiceMatrix.matrix;
+      for (let i = 0; i < matrix.length; i++) {
+        if (matrix[i].some(({ type }) => type === "SentenceSegwordChs")) {
+          return true;
+        }
+      }
+      return false;
+    },
+    isHasEN() {
+      let matrix = this.curQue.voiceMatrix.matrix;
+      for (let i = 0; i < matrix.length; i++) {
+        if (matrix[i].some(({ type }) => type === "PinyinEnglish")) return true;
+      }
+      return false;
+    },
     hasSelectedCell() {
       let { type, index } = this.selectedLine;
       let { row, column } = this.selectCell;
@@ -475,7 +518,7 @@ export default {
         type: type.length > 0 && index >= 0 ? type : "cell",
         index,
         row,
-        column,
+        column
       };
     },
     // 矩阵的行、列数从 0 开始
@@ -483,9 +526,9 @@ export default {
       const matrixArr = this.curQue.voiceMatrix.matrix;
       return {
         rows: matrixArr.length - 1,
-        columns: matrixArr.length > 0 ? matrixArr[0].length - 1 : -1,
+        columns: matrixArr.length > 0 ? matrixArr[0].length - 1 : -1
       };
-    },
+    }
   },
   watch: {
     isRecording(newVal) {
@@ -509,7 +552,7 @@ export default {
           }
         }, 50);
       }
-    },
+    }
   },
   created() {
     document.addEventListener("keyup", this.handleKeyup);
@@ -518,7 +561,7 @@ export default {
       "fullscreenchange",
       "mozfullscreenchange",
       "webkitfullscreenchange",
-      "msfullscreenchange",
+      "msfullscreenchange"
     ].forEach(event => {
       document.addEventListener(event, this.handleFullscreen);
     });
@@ -529,7 +572,7 @@ export default {
       "fullscreenchange",
       "mozfullscreenchange",
       "webkitfullscreenchange",
-      "msfullscreenchange",
+      "msfullscreenchange"
     ].forEach(event => {
       document.removeEventListener(event, this.handleFullscreen);
     });
@@ -573,8 +616,13 @@ export default {
     },
 
     setRecordingFileName(row, column) {
-      let { type, text, sentence_data, pinyin_english_data, text_brackets } =
-        this.curQue.voiceMatrix.matrix[row][column];
+      let {
+        type,
+        text,
+        sentence_data,
+        pinyin_english_data,
+        text_brackets
+      } = this.curQue.voiceMatrix.matrix[row][column];
       if (type === "text") this.fileName = text;
       if (type === "SentenceSegwordChs") this.fileName = sentence_data.sentence;
       if (type === "PinyinEnglish") this.fileName = pinyin_english_data.pinyin;
@@ -741,7 +789,7 @@ export default {
           return {
             begin_time: lrc_data.begin_time,
             end_time: this.mp3Duration,
-            text: lrc_data.text,
+            text: lrc_data.text
           };
         }
         return lrc_data;
@@ -889,9 +937,19 @@ export default {
     getCurWordTime(curTime) {
       this.curWordTime = curTime * 1000;
     },
+
+    changePinyin() {
+      if (!this.isHasPY) return;
+      this.isShowPY = !this.isShowPY;
+    },
+    changeEN() {
+      if (!this.isHasEN) return;
+      this.isShowEN = !this.isShowEN;
+    },
     changeBg(bgIndex) {
       this.bgIndex = bgIndex;
     },
+
     pauseAudio() {
       let audio = document.getElementsByTagName("audio");
       audio.forEach(item => {
@@ -905,8 +963,8 @@ export default {
     changeFullScreen() {
       this.pauseAudio();
       this.$emit("changeIsFull");
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -939,8 +997,7 @@ $dark-color-play: #fff2c6;
     color: #062211;
 
     .playing {
-      background: url("../../../assets/NPC/pink-pencil.png") no-repeat left top /
-        100% 100%;
+      color: $select-color !important;
     }
   }
 
@@ -982,6 +1039,15 @@ $dark-color-play: #fff2c6;
           }
         }
       }
+
+      .connection {
+        &.highlight-bc-,
+        &.highlight-bc-red,
+        &.highlight-bc-brown,
+        &.highlight-bc-green {
+          background-color: $dark-color !important;
+        }
+      }
     }
 
     .matrix-top {
@@ -1247,6 +1313,36 @@ $dark-color-play: #fff2c6;
       }
     }
   }
+  .pinyin-icon {
+    background: url("../../../assets/icon/pinyin-24-normal-red.png") no-repeat
+      left top;
+    background-size: 100% 100%;
+    &.disabled {
+      background: url("../../../assets/icon/pinyin-24-disable-Black.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+    &-yellow {
+      background: url("../../../assets/icon/pinyin-24-normal-yellow.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+  }
+  .en-icon {
+    background: url("../../../assets/icon/EN-24-normal-Red.png") no-repeat left
+      top;
+    background-size: 100% 100%;
+    &.disabled {
+      background: url("../../../assets/icon/EN-24-disable-Black.png") no-repeat
+        left top;
+      background-size: 100% 100%;
+    }
+    &-yellow {
+      background: url("../../../assets/icon/EN-24-normal-yellow.png") no-repeat
+        left top;
+      background-size: 100% 100%;
+    }
+  }
   .keyboard-icon {
     background: url("../../../assets/icon/enter-24-keyboard-red.png") no-repeat
       left top;
@@ -1268,19 +1364,19 @@ $dark-color-play: #fff2c6;
     width: 100%;
     display: flex;
     align-items: center;
+    justify-content: center;
 
     // 语音矩阵
 
     .matrix {
       display: inline-grid;
       gap: 20px 48px;
-      width: 100%;
       height: 100%;
       word-break: break-word;
 
       %matrix-checkbox {
         position: relative;
-        top: calc(50% - 5px);
+        top: calc(50% - 0.25em);
         display: block;
         width: 0.5em;
         height: 0.5em;
@@ -1344,7 +1440,7 @@ $dark-color-play: #fff2c6;
       .matrix-checkbox-column-red {
         @extend %matrix-checkbox;
 
-        top: calc(50% - 7px);
+        top: calc(50% - 0.25em);
         right: -48px;
       }
 
@@ -1650,6 +1746,16 @@ $dark-color-play: #fff2c6;
         no-repeat left top;
       background-size: 100% 100%;
     }
+    .pinyin-icon {
+      background: url("../../../assets/icon/pinyin-24-normal-green.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+    .en-icon {
+      background: url("../../../assets/icon/EN-24-normal-Green.png") no-repeat
+        left top;
+      background-size: 100% 100%;
+    }
   }
 }
 
@@ -1660,6 +1766,16 @@ $dark-color-play: #fff2c6;
         no-repeat left top;
       background-size: 100% 100%;
     }
+    .en-icon {
+      background: url("../../../assets/icon/EN-24-normal-Brown.png") no-repeat
+        left top;
+      background-size: 100% 100%;
+    }
+    .coll-icon {
+      background: url("../../../assets/icon/bookmarkfill-24-normal-brown.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
   }
 }
 </style>