语音矩阵 -> 文本中有括号类型 -> 加文本类型单选

src/components/Adult/inputModules/VoiceMatrix.vue

@@ -201,6 +201,9 @@
                     maxlength="200"
                     show-word-limit
                   />
+                  <el-radio v-model="column.text_brackets.brackets_outer_type" label="chs">中文</el-radio>
+                  <el-radio v-model="column.text_brackets.brackets_outer_type" label="english">英文</el-radio>
+                  <el-radio v-model="column.text_brackets.brackets_outer_type" label="pinyin">拼音</el-radio>
                   <span>&nbsp;[&nbsp;</span>
                   <el-input
                     v-model="column.text_brackets.brackets_inner"
@@ -335,8 +338,9 @@ export default {
             },
             text_brackets: {
               brackets_inner: "",
+              brackets_inner_type: 'english',
               brackets_outer: "",
-              brackets_inner_type: 'english'
+              brackets_outer_type: 'chs'
             }
           };
         }

src/components/Adult/preview/VoiceMatrix.vue

@@ -17,7 +17,7 @@
           class="audio-simple-image"
           :src="playing ? voicePlaySrc : voicePauseSrc"
           @click="playAudio"
-        />
+        >
         <span
           :class="[
             'Repeat-16',
@@ -57,8 +57,8 @@
             :class="[
               'matrix-top',
               curQue.voiceMatrix.columnSelection &&
-              (selectColumn === i ||
-                (selectedLine.type === 'column' && selectedLine.index === i))
+                (selectColumn === i ||
+                  (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
                 : '',
             ]"
@@ -70,7 +70,7 @@
               "
               v-show="
                 selectColumn === i ||
-                (selectedLine.type === 'column' && selectedLine.index === i)
+                  (selectedLine.type === 'column' && selectedLine.index === i)
               "
               :class="[
                 `matrix-checkbox-row-${themeColor}`,
@@ -90,8 +90,8 @@
             :class="[
               'column-wrapper',
               curQue.voiceMatrix.rowSelection &&
-              (selectRow === i ||
-                (selectedLine.type === 'row' && selectedLine.index === i))
+                (selectRow === i ||
+                  (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
                 : '',
             ]"
@@ -101,7 +101,7 @@
               v-if="curQue.voiceMatrix.rowSelection"
               v-show="
                 selectRow === i ||
-                (selectedLine.type === 'row' && selectedLine.index === i)
+                  (selectedLine.type === 'row' && selectedLine.index === i)
               "
               :class="[
                 `matrix-checkbox-column-${themeColor}`,
@@ -119,17 +119,17 @@
               :class="[
                 'column-wrapper',
                 (curQue.voiceMatrix.rowSelection && selectRow === i) ||
-                (curQue.voiceMatrix.columnSelection && selectColumn === j) ||
-                (curQue.voiceMatrix.columnSelection &&
-                  selectedLine.type === 'column' &&
-                  selectedLine.index === j) ||
-                (curQue.voiceMatrix.rowSelection &&
-                  selectedLine.type === 'row' &&
-                  selectedLine.index === i)
+                  (curQue.voiceMatrix.columnSelection && selectColumn === j) ||
+                  (curQue.voiceMatrix.columnSelection &&
+                    selectedLine.type === 'column' &&
+                    selectedLine.index === j) ||
+                  (curQue.voiceMatrix.rowSelection &&
+                    selectedLine.type === 'row' &&
+                    selectedLine.index === i)
                   ? 'read'
                   : '',
                 (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
-                (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
+                  (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
                   : '',
               ]"
@@ -142,15 +142,15 @@
                 :class="[
                   column.text.length === 0 ? 'space' : `column-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                  (selectedLine.type === 'column' &&
-                    selectedLine.index === j) ||
-                  (selectedLine.type === 'row' && selectedLine.index === i)
+                    (selectedLine.type === 'column' &&
+                      selectedLine.index === j) ||
+                    (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                  column.lrc_data.begin_time / 1000 <= curTime &&
-                  (curTime < column.lrc_data.end_time / 1000 ||
-                    column.lrc_data.end_time === -1)
+                    column.lrc_data.begin_time / 1000 <= curTime &&
+                    (curTime < column.lrc_data.end_time / 1000 ||
+                      column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
                   column.isTitle ? 'title' : '',
@@ -177,15 +177,15 @@
                 :class="[
                   `sentence-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                  (selectedLine.type === 'column' &&
-                    selectedLine.index === j) ||
-                  (selectedLine.type === 'row' && selectedLine.index === i)
+                    (selectedLine.type === 'column' &&
+                      selectedLine.index === j) ||
+                    (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                  column.lrc_data.begin_time / 1000 <= curTime &&
-                  (curTime < column.lrc_data.end_time / 1000 ||
-                    column.lrc_data.end_time === -1)
+                    column.lrc_data.begin_time / 1000 <= curTime &&
+                    (curTime < column.lrc_data.end_time / 1000 ||
+                      column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
                   column.isTitle ? 'title' : '',
@@ -243,15 +243,15 @@
                 :class="[
                   `pinyinEnglish-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                  (selectedLine.type === 'column' &&
-                    selectedLine.index === j) ||
-                  (selectedLine.type === 'row' && selectedLine.index === i)
+                    (selectedLine.type === 'column' &&
+                      selectedLine.index === j) ||
+                    (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                  column.lrc_data.begin_time / 1000 <= curTime &&
-                  (curTime < column.lrc_data.end_time / 1000 ||
-                    column.lrc_data.end_time === -1)
+                    column.lrc_data.begin_time / 1000 <= curTime &&
+                    (curTime < column.lrc_data.end_time / 1000 ||
+                      column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
                   column.isTitle ? 'title' : '',
@@ -274,15 +274,15 @@
                 :class="[
                   `textBrackets-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                  (selectedLine.type === 'column' &&
-                    selectedLine.index === j) ||
-                  (selectedLine.type === 'row' && selectedLine.index === i)
+                    (selectedLine.type === 'column' &&
+                      selectedLine.index === j) ||
+                    (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                  column.lrc_data.begin_time / 1000 <= curTime &&
-                  (curTime < column.lrc_data.end_time / 1000 ||
-                    column.lrc_data.end_time === -1)
+                    column.lrc_data.begin_time / 1000 <= curTime &&
+                    (curTime < column.lrc_data.end_time / 1000 ||
+                      column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
                   column.isTitle ? 'title' : '',
@@ -290,7 +290,7 @@
                 @click="matrixCellClick(i, j)"
               >
                 <span>
-                  <span class="chs">
+                  <span :class="[getBracketsOuterTypeClass(column.text_brackets.brackets_outer_type)]">
                     {{ column.text_brackets.brackets_outer }}
                   </span>
                   <span class="brackets">&nbsp;[&nbsp;</span>
@@ -307,8 +307,8 @@
             :key="`end-${i}`"
             :class="[
               curQue.voiceMatrix.rowSelection &&
-              (selectRow === i ||
-                (selectedLine.type === 'row' && selectedLine.index === i))
+                (selectRow === i ||
+                  (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
                 : '',
             ]"
@@ -323,8 +323,8 @@
             :class="[
               'matrix-bottom',
               curQue.voiceMatrix.columnSelection &&
-              (selectColumn === i ||
-                (selectedLine.type === 'column' && selectedLine.index === i))
+                (selectColumn === i ||
+                  (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
                 : '',
             ]"
@@ -337,6 +337,7 @@
     <!-- 录音 -->
     <div class="voice-luyin">
       <soundrecord
+        v-if="refresh"
         ref="luyin"
         type="promax"
         class="luyin-box"
@@ -349,7 +350,6 @@
         @handleParentPlay="pauseOtherAudio"
         @sentPause="sentPause"
         @handleWav="handleWav"
-        v-if="refresh"
       />
       <audio-compare
         :style="{ flex: 1 }"
@@ -494,7 +494,7 @@ export default {
       this.handleParentPlay();
     },
     isFull: {
-      handler: function (newVal, oldVal) {
+      handler (newVal, oldVal) {
         let _this = this;
         _this.refresh = false;
         if (!newVal) {
@@ -509,7 +509,7 @@ export default {
   },
   created() {
     let _this = this;
-    Bus.$on("audioPause", (id) => {
+    Bus.$on("audioPause", id => {
       if (_this.cid === id) return;
       _this.$nextTick(() => {
         console.log(_this.$refs.luyin);
@@ -602,10 +602,10 @@ export default {
         "luyin-box",
       ];
 
-      let operable = event.path.some((item) => {
+      let operable = event.path.some(item => {
         let className = item.className;
         if (!className) return false;
-        return whitePath.some((path) => className.includes(path));
+        return whitePath.some(path => className.includes(path));
       });
       if (!operable) {
         this.selectedLine = { type: "", index: -1 };
@@ -645,6 +645,13 @@ export default {
       this.fileName = `第 ${number + 1} ${type === "row" ? "行" : "列"}`;
     },
 
+    getBracketsOuterTypeClass(type) {
+      if (type === 'pinyin') return 'pinyin';
+      if (type === 'chs') return 'chs';
+      if (type === 'english') return 'english';
+      return 'chs';
+    },
+
     playAudio() {
       if (!this.hasSelectedCell) return;
       if (this.playing) return this.handleParentPlay();
@@ -654,7 +661,7 @@ export default {
       this.lrcArray = [];
       let { type, index } = this.selectedLine;
       if (type.length > 0 && index >= 0 && type === "row") {
-        this.curQue.voiceMatrix.matrix[index].forEach((item) => {
+        this.curQue.voiceMatrix.matrix[index].forEach(item => {
           let data = this.getLrcData(item);
           if (data) this.lrcArray.push(data);
         });
@@ -663,7 +670,7 @@ export default {
       }
 
       if (type.length > 0 && index >= 0 && type === "column") {
-        this.curQue.voiceMatrix.matrix.forEach((item) => {
+        this.curQue.voiceMatrix.matrix.forEach(item => {
           let data = this.getLrcData(item[index]);
           if (data) this.lrcArray.push(data);
         });
@@ -686,7 +693,7 @@ export default {
         this.$refs.audioLine.PlayAudio();
         if (end_time === -1) return;
         let end = end_time / 1000 - 0.01;
-        this.unWatch = this.$watch("curTime", (val) => {
+        this.unWatch = this.$watch("curTime", val => {
           if (val >= end) {
             if (!this.hasSelectedCell) return this.unWatch();
             this.handleParentPlay();
@@ -741,7 +748,7 @@ export default {
       }
       let arr = [];
       if (type.length > 0 && index >= 0 && type === "row") {
-        this.curQue.voiceMatrix.matrix[index].forEach((item) => {
+        this.curQue.voiceMatrix.matrix[index].forEach(item => {
           let data = this.getLrcData(item);
           if (data) arr.push(data);
         });
@@ -750,7 +757,7 @@ export default {
       }
 
       if (type.length > 0 && index >= 0 && type === "column") {
-        this.curQue.voiceMatrix.matrix.forEach((item) => {
+        this.curQue.voiceMatrix.matrix.forEach(item => {
           let data = this.getLrcData(item[index]);
           if (data) arr.push(data);
         });
@@ -790,7 +797,7 @@ export default {
 
     pauseAudio() {
       let audio = document.getElementsByTagName("audio");
-      audio.forEach((item) => {
+      audio.forEach(item => {
         item.pause();
       });
     },
@@ -840,7 +847,7 @@ export default {
         // 监听是否已到结束时间，为了选中效果 - 0.01
         if (end_time === -1) return;
         let end = end_time / 1000 - 0.01;
-        this.unWatch = this.$watch("curTime", (val) => {
+        this.unWatch = this.$watch("curTime", val => {
           if (val >= end) {
             this.handleParentPlay();
             this.$refs.audioLine.onTimeupdateTime(end);
@@ -1269,6 +1276,7 @@ $select-color-brown-active: #a37557;
           }
         }
 
+        // 文本中有括号
         %textBrackets,
         .textBrackets-,
         .textBrackets-red {