Merge branch 'lhd'

src/views/book/courseware/create/components/question/character/Character.vue

@@ -22,10 +22,37 @@
               @blur="handleMindMap"
             />
             <el-button @click="identify(item, index)">识别</el-button>
-            <SoundRecord v-if="item.audio_file_id" :wav-blob.sync="item.audio_file_id" />
-            <el-button v-else @click="handleMatic(item.content, index)">生成音频</el-button>
+            <!-- <SoundRecord v-if="item.audio_file_id" :wav-blob.sync="item.audio_file_id" />
+            <el-button v-else @click="handleMatic(item.content, index)">生成音频</el-button> -->
             <el-button @click="handleDelete(index)">删除此条</el-button>
           </div>
+          <template v-if="data.property.is_enable_voice === 'true'">
+            <div v-if="item.audio_file_id" style="margin-top: 8px">
+              <SoundRecord :wav-blob.sync="item.audio_file_id" />
+            </div>
+            <template v-else>
+              <div :class="['upload-audio-play']">
+                <UploadAudio
+                  v-if="data.property.audio_generation_method === 'upload'"
+                  :file-id="item.audio_file_id"
+                  :show-upload="!item.audio_file_id"
+                  @upload="uploads"
+                  @deleteFile="deleteFiles"
+                  :itemIndex="index"
+                />
+                <div
+                  v-else-if="data.property.audio_generation_method === 'auto'"
+                  class="auto-matic"
+                  @click="handleMatic(item.content, index)"
+                >
+                  <SvgIcon icon-class="voiceprint-line" class="record" />
+                  <span class="auto-btn">{{ item.audio_file_id ? '已生成' : '生成音频' }}</span
+                  >{{ item.audio_file_id ? '成功' : '' }}
+                </div>
+                <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
+              </div>
+            </template>
+          </template>
           <div class="option-item">
             <template v-if="data.property.model === 'miao'">
               <span>显示本体：</span>
@@ -108,10 +135,11 @@ import { GetStaticResources, TextToAudioFile } from '@/api/app';
 import cnchar from 'cnchar';
 import UploadFile from '../../base/common/UploadFile.vue';
 import SoundRecord from '@/views/book/courseware/create/components/question/fill/components/SoundRecord.vue';
+import UploadAudio from '@/views/book/courseware/create/components/question/fill/components/UploadAudio.vue';
 
 export default {
   name: 'CharacterPage',
-  components: { UploadFile, SoundRecord },
+  components: { UploadFile, SoundRecord, UploadAudio },
   mixins: [ModuleMixin],
   data() {
     return {
@@ -292,13 +320,22 @@ export default {
             });
           })
           .catch(() => {});
-        if (str) {
-          this.handleMatic(str, index);
-        }
+        // if (str) {
+        //   this.handleMatic(str, index);
+        // }
       } else {
         this.$message.warning('请先输入内容');
       }
     },
+    uploads(file_id, index, file_url) {
+      this.data.option_list[index].audio_file_id = {
+        file_url,
+        file_id,
+      };
+    },
+    deleteFiles(index) {
+      this.data.option_list[index].audio_file_id = '';
+    },
   },
 };
 </script>
@@ -443,4 +480,50 @@ export default {
     }
   }
 }
+
+.auto-matic,
+.upload-audio-play {
+  margin-top: 8px;
+
+  :deep .upload-wrapper {
+    margin-top: 0;
+  }
+
+  .audio-wrapper {
+    :deep .audio-play {
+      width: 16px;
+      height: 16px;
+      color: #000;
+      background-color: initial;
+    }
+
+    :deep .audio-play.not-url {
+      color: #a1a1a1;
+    }
+
+    :deep .voice-play {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.auto-matic {
+  display: flex;
+  flex-shrink: 0;
+  column-gap: 12px;
+  align-items: center;
+  width: 200px;
+  padding: 5px 12px;
+  background-color: $fill-color;
+  border-radius: 2px;
+
+  .auto-btn {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    color: #1d2129;
+    cursor: pointer;
+  }
+}
 </style>

src/views/book/courseware/create/components/question/character/CharacterSetting.vue

@@ -64,7 +64,13 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <template v-if="property.is_enable_voice === 'true'">
+
+      <el-form-item label="读音" v-if="property.is_enable_voice === 'true'">
+        <el-select v-model="property.audio_generation_method" placeholder="请选择">
+          <el-option v-for="{ value, label } in audioGenerationMethodList" :key="value" :label="label" :value="value" />
+        </el-select>
+      </el-form-item>
+      <template v-if="property.audio_generation_method === 'auto'">
         <el-form-item label="音色">
           <el-select v-model="property.voice_type" placeholder="请选择">
             <el-option
@@ -108,6 +114,7 @@ import {
   showList,
   isEnable,
   frameList,
+  audioGenerationMethodList,
 } from '@/views/book/courseware/data/character';
 import { GetTextToAudioConfParamList } from '@/api/app';
 import { speedRatioList } from '@/views/book/courseware/data/common';
@@ -117,6 +124,7 @@ export default {
   mixins: [SettingMixin],
   data() {
     return {
+      audioGenerationMethodList,
       property: getCharacterProperty(),
       switchOption,
       isEnable,

src/views/book/courseware/data/character.js

@@ -50,6 +50,23 @@ export const frameList = [
     label: '无',
   },
 ];
+
+// 读音生成方式
+export const audioGenerationMethodList = [
+  {
+    value: 'upload',
+    label: '上传',
+  },
+  {
+    value: 'auto',
+    label: '自动生成',
+  },
+  {
+    value: 'record',
+    label: '录音',
+  },
+];
+
 export function getOption() {
   return {
     content: '',
@@ -91,6 +108,7 @@ export function getCharacterProperty() {
     speed_ratio: '', // 语速
     ...commonComponentProperty,
     is_enable_voice_answer: switchOption[1].value,
+    audio_generation_method: audioGenerationMethodList[0].value,
   };
 }
 

src/views/book/courseware/preview/components/character/CharacterPreview.vue

@@ -188,7 +188,13 @@
               <div class="words-left" :style="{}">
                 <AudioPlay
                   v-if="isEnable(data.property.is_enable_voice)"
-                  :file-id="item.audio_file_id ? item.audio_file_id.file_url : ''"
+                  :file-id="
+                    item.audio_file_id
+                      ? item.audio_file_id.file_url
+                        ? item.audio_file_id.file_url
+                        : item.audio_file_id
+                      : ''
+                  "
                   :theme-color="
                     data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
                   "