Merge branch 'master' of http://221.216.211.14:3000/GCLS/GCLS_Page_Book_Component_NPC

src/components/Adult/inputModules/VoiceMatrix.vue

@@ -8,7 +8,13 @@
         upload-type="mp3"
       />
 
-      <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].source === 'tts'">
+      <template
+        v-if="
+          curQue.mp3_list &&
+            curQue.mp3_list.length > 0 &&
+            curQue.mp3_list[0].source === 'tts'
+        "
+      >
         <div class="create_mp3_list">
           <span>引擎音频：</span>
           <span class="mp3_file_name">{{ curQue.mp3_list[0].name }}</span>
@@ -24,7 +30,7 @@
           :loading="createdMp3loading"
           size="small"
           type="primary"
-          :style="{'margin': '12px 0'}"
+          :style="{ margin: '12px 0' }"
           @click="createdMp3"
         >生成音频</el-button>
       </template>
@@ -118,7 +124,9 @@
                 设为标题
               </el-checkbox>
             </div>
+            <!-- 单元格 -->
             <div v-for="(column, j) in row" :key="j" class="column">
+              <!-- 单元格类型及lrc -->
               <div class="column-condition">
                 <el-select v-model="column.type" size="small">
                   <el-option
@@ -139,6 +147,7 @@
                   {{ column.lrc_data.text }}
                 </span>
               </div>
+              <!-- 单元格内容 -->
               <div class="column-content">
                 <el-input
                   v-if="column.type === 'text'"
@@ -154,15 +163,30 @@
                 />
 
                 <template v-else-if="column.type === 'PinyinEnglish'">
-                  <span class="pinyin-english-label">拼音</span><el-input
+                  <span class="pinyin-english-label">拼音</span>
+                  <el-input
                     v-model="column.pinyin_english_data.pinyin"
                     size="small"
                   />
-                  <span class="pinyin-english-label">英文</span><el-input
+                  <span class="pinyin-english-label">英文</span>
+                  <el-input
                     v-model="column.pinyin_english_data.english"
                     size="small"
                   />
                 </template>
+
+                <template v-else-if="column.type === 'textBrackets'">
+                  <el-input
+                    v-model="column.text_brackets.brackets_outer"
+                    size="small"
+                  />
+                  <span>&nbsp;[&nbsp;</span>
+                  <el-input
+                    v-model="column.text_brackets.brackets_inner"
+                    size="small"
+                  />
+                  <span>&nbsp;]</span>
+                </template>
               </div>
             </div>
           </div>
@@ -175,10 +199,7 @@
 <script>
 import Upload from "@/components/Adult/common/Upload.vue";
 import SentenceSegwordChs from "@/components/Adult/inputModules/SentenceSegwordChs/index.vue";
-import {
-  getContentFile,
-  textCreadMp3
-} from "@/api/ajax";
+import { getContentFile, textCreadMp3 } from "@/api/ajax";
 
 export default {
   components: {
@@ -209,6 +230,10 @@ export default {
         {
           type: "PinyinEnglish",
           name: "拼音 + 英文"
+        },
+        {
+          type: "textBrackets",
+          name: "文本中有括号"
         }
       ],
       matchTypeList: [
@@ -282,6 +307,10 @@ export default {
             pinyin_english_data: {
               pinyin: "",
               english: ""
+            },
+            text_brackets: {
+              brackets_inner: "",
+              brackets_outer: ""
             }
           };
         }
@@ -375,15 +404,15 @@ export default {
       if (this.curQue.mp3_list.length > 0) {
         return this.$message.warning("已有音频，请勿重复生成");
       }
-      let article = '';
+      let article = "";
       this.curQue.voiceMatrix.matrix.forEach(item => {
         item.forEach(({ type, text, sentence_data: { sentence }}) => {
-          if (type === 'text' && text.length > 0) {
-            article += '\n' + text;
+          if (type === "text" && text.length > 0) {
+            article += "\n" + text;
             return;
           }
-          if (type === 'SentenceSegwordChs') {
-            article += '\n' + sentence;
+          if (type === "SentenceSegwordChs") {
+            article += "\n" + sentence;
           }
         });
       });

src/components/Adult/preview/VoiceMatrix.vue

@@ -243,6 +243,39 @@
                   </div>
                 </div>
               </div>
+              <!-- 文本中有括号 -->
+              <div
+                v-else-if="column.type === 'textBrackets'"
+                :key="`column-${i}-${j}`"
+                :class="[
+                  `textBrackets-${themeColor}`,
+                  (selectCell.row === i && selectCell.column === j) ||
+                    (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)
+                    ? 'playing'
+                    : '',
+                  column.isTitle ? 'title' : ''
+                ]"
+                @click="matrixCellClick(i, j)"
+              >
+                <span>
+                  <span class="brackets-text">{{
+                    column.text_brackets.brackets_outer
+                  }}</span>
+                  <span class="brackets">&nbsp;[&nbsp;</span>
+                  <span class="brackets-text">{{
+                    column.text_brackets.brackets_inner
+                  }}</span>
+                  <span class="brackets">&nbsp;]</span>
+                </span>
+              </div>
             </div>
           </template>
 
@@ -447,11 +480,15 @@ export default {
         type,
         text,
         sentence_data,
-        pinyin_english_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;
+      if (type === "textBrackets") {
+        this.fileName = `${text_brackets.brackets_outer}[${text_brackets.brackets_inner}]`;
+      }
     },
 
     checkboxMouseenter(isSelected, type) {
@@ -494,22 +531,9 @@ export default {
       let { type, index } = this.selectedLine;
       if (type.length > 0 && index >= 0 && type === "row") {
         this.curQue.voiceMatrix.matrix[index].forEach(
-          ({ type, text, lrc_data }) => {
-            if (
-              type === "SentenceSegwordChs" ||
-              type === "PinyinEnglish" ||
-              (type === "text" && text.length > 0)
-            ) {
-              if (lrc_data.end_time === -1) {
-                this.lrcArray.push({
-                  begin_time: lrc_data.begin_time,
-                  end_time: this.mp3Duration,
-                  text: lrc_data.text
-                });
-                return;
-              }
-              this.lrcArray.push(lrc_data);
-            }
+          item => {
+            let data = this.getLrcData(item);
+            if (data) this.lrcArray.push(data);
           }
         );
         if (this.lrcArray.length > 0) this.lrcPlay(this.lrcArray[0], 0);
@@ -518,22 +542,8 @@ export default {
 
       if (type.length > 0 && index >= 0 && type === "column") {
         this.curQue.voiceMatrix.matrix.forEach(item => {
-          let { type, text, lrc_data } = item[index];
-          if (
-            type === "SentenceSegwordChs" ||
-            type === "PinyinEnglish" ||
-            (type === "text" && text.length > 0)
-          ) {
-            if (lrc_data.end_time === -1) {
-              this.lrcArray.push({
-                begin_time: lrc_data.begin_time,
-                end_time: this.mp3Duration,
-                text: lrc_data.text
-              });
-              return;
-            }
-            this.lrcArray.push(lrc_data);
-          }
+          let data = this.getLrcData(item[index]);
+          if (data) this.lrcArray.push(data);
         });
         if (this.lrcArray.length > 0) this.lrcPlay(this.lrcArray[0], 0);
         return;
@@ -597,26 +607,13 @@ export default {
     },
 
     getSelectData({ type, index, row, column }) {
-      if (type === '') return;
+      if (type === "") return;
       let arr = [];
       if (type.length > 0 && index >= 0 && type === "row") {
         this.curQue.voiceMatrix.matrix[index].forEach(
-          ({ type, text, lrc_data }) => {
-            if (
-              type === "SentenceSegwordChs" ||
-              type === "PinyinEnglish" ||
-              (type === "text" && text.length > 0)
-            ) {
-              if (lrc_data.end_time === -1) {
-                arr.push({
-                  begin_time: lrc_data.begin_time,
-                  end_time: this.mp3Duration,
-                  text: lrc_data.text
-                });
-                return;
-              }
-              arr.push(lrc_data);
-            }
+          item => {
+            let data = this.getLrcData(item);
+            if (data) arr.push(data);
           }
         );
         this.matrixSelectLrc = arr;
@@ -625,22 +622,8 @@ export default {
 
       if (type.length > 0 && index >= 0 && type === "column") {
         this.curQue.voiceMatrix.matrix.forEach(item => {
-          let { type, text, lrc_data } = item[index];
-          if (
-            type === "SentenceSegwordChs" ||
-            type === "PinyinEnglish" ||
-            (type === "text" && text.length > 0)
-          ) {
-            if (lrc_data.end_time === -1) {
-              arr.push({
-                begin_time: lrc_data.begin_time,
-                end_time: this.mp3Duration,
-                text: lrc_data.text
-              });
-              return;
-            }
-            arr.push(lrc_data);
-          }
+          let data = this.getLrcData(item[index]);
+          if (data) arr.push(data);
         });
         this.matrixSelectLrc = arr;
         return;
@@ -653,6 +636,25 @@ export default {
       }
     },
 
+    getLrcData({ type, text, lrc_data }) {
+      if (
+        type === "SentenceSegwordChs" ||
+        type === "PinyinEnglish" ||
+        type === "textBrackets" ||
+        (type === "text" && text.length > 0)
+      ) {
+        if (lrc_data.end_time === -1) {
+          return {
+            begin_time: lrc_data.begin_time,
+            end_time: this.mp3Duration,
+            text: lrc_data.text
+          };
+        }
+        return lrc_data;
+      }
+      return false;
+    },
+
     sentPause(isRecord) {
       this.isRecord = isRecord;
     },
@@ -1090,6 +1092,47 @@ $select-color-brown-active: #a37557;
             background-color: $select-color-brown-hover;
           }
         }
+
+        %textBrackets,
+        .textBrackets-,
+        .textBrackets-red {
+          @extend %column;
+
+          .brackets-text {
+            font-family: "GB-PINYINOK-B";
+          }
+
+          .brackets {
+            font-size: 16px;
+            font-family: "FZJCGFKTK";
+          }
+        }
+
+        .textBrackets-green {
+          @extend %textBrackets;
+
+          &.selected {
+            color: $select-color-green;
+            border-color: $select-color-green;
+          }
+
+          &.playing {
+            background-color: $select-color-green-hover;
+          }
+        }
+
+        .textBrackets-brown {
+          @extend %textBrackets;
+
+          &.selected {
+            color: $select-color-brown;
+            border-color: $select-color-brown;
+          }
+
+          &.playing {
+            background-color: $select-color-brown-hover;
+          }
+        }
       }
     }