调整课文按钮 生成音频增加句子停顿参数

src/views/book/courseware/create/components/common/SelectUpload.vue

@@ -16,8 +16,12 @@
       >
         <el-button>{{ showText }}</el-button>
       </el-upload>
-      <el-button size="small" class="upload-button" type="primary" @click="selectAndUpload">本地上传</el-button>
-      <el-button v-if="isShowResource" size="small" type="primary" @click="useResource">使用资源</el-button>
+      <el-button size="small" class="upload-button" :type="isNormal ? '' : 'primary'" @click="selectAndUpload"
+        >本地上传</el-button
+      >
+      <el-button v-if="isShowResource" size="small" :type="isNormal ? '' : 'primary'" @click="useResource"
+        >使用资源</el-button
+      >
     </div>
     <SelectResource
       :visible.sync="visibleResource"
@@ -64,6 +68,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    isNormal: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

src/views/book/courseware/create/components/question/article/Article.vue

@@ -68,31 +68,74 @@
           </span>
         </div>
         <el-input v-model="data.content" placeholder="输入" type="textarea" />
-        <div class="btn-box">
-          <SelectUpload label="课文音频" type="audio" @uploadSuccess="uploadAudioSuccess" />
-          <el-button :loading="autoLoading" @click="handleAutoAudio">自动生成音频</el-button>
-        </div>
-        <div v-if="data.mp3_list.length > 0" class="upload-file">
-          <div class="file-name">
-            <span>
-              <SvgIcon icon-class="note" size="12" />
-              <span>{{ data.mp3_list[0].name }}</span>
-            </span>
+
+        <span class="tips">输入课文文本后，请先点击生成分词</span>
+        <el-button type="primary" @click="handleChangeContent">生成分词</el-button>
+        <template v-if="data.detail.length > 0">
+          <div class="new-btn-box">
+            <p>文本内容</p>
+            <div>
+              <a @click="checkArticle">分词和拼音</a>
+              <a @click="editWordsFlag = !editWordsFlag">生词和气泡</a>
+              <a @click="handleMultilingual">多语种翻译</a>
+              <MultilingualFill
+                :visible.sync="multilingualVisible"
+                :text="multilingualText"
+                :translations="data.multilingual"
+                @SubmitTranslation="handleMultilingualTranslation"
+              />
+            </div>
           </div>
-          <SvgIcon icon-class="delete-black" size="12" @click="removeFile" />
-          <ResourcesOperate :data="data.mp3_list[0]" />
-        </div>
-        <span v-if="data.content" class="tips">说明：需先点击“生成分词”按钮后，再进行文章校对或生成字幕节点</span>
-        <div v-if="data.content" class="btn-box">
+          <div class="new-btn-box">
+            <p>音频内容</p>
+            <div>
+              <SelectUpload label="" type="audio" :isNormal="true" @uploadSuccess="uploadAudioSuccess" />
+              <el-button :loading="autoLoading" @click="handleAutoAudio">生成音频</el-button>
+              <template v-if="data.mp3_list.length === 0">
+                <el-tooltip class="item" effect="dark" content="请先设置音频" placement="top">
+                  <el-button disabled style="margin-left: 0">校对字幕</el-button>
+                </el-tooltip>
+              </template>
+              <template v-else>
+                <template v-if="data.wordTime && data.wordTime.length > 0">
+                  <a type="text" @click="againWordTime">重新生成字幕</a>
+                  <a size="medium" @click="openCheckSubtitles('句子')">句子字幕</a>
+                  <a size="medium" @click="compareTime('文字')">文字字幕</a>
+                </template>
+                <template v-else>
+                  <a v-if="!isWordTime" size="medium" @click="createWordTimes">自动生成字幕节点</a>
+                  <p v-else>字幕节点生成中...请等待</p>
+                </template>
+              </template>
+            </div>
+          </div>
+          <div v-if="data.mp3_list.length > 0" class="upload-file">
+            <div class="file-name">
+              <span>
+                <SvgIcon icon-class="note" size="12" />
+                <span>{{ data.mp3_list[0].name }}</span>
+              </span>
+            </div>
+            <SvgIcon icon-class="delete-black" size="12" @click="removeFile" />
+            <ResourcesOperate :data="data.mp3_list[0]" />
+          </div>
+          <div class="new-btn-box">
+            <p>多媒体内容</p>
+            <div>
+              <a @click="picArticle">上传图片</a>
+              <a @click="picArticle">上传视频</a>
+            </div>
+          </div>
+        </template>
+
+        <!-- <div v-if="data.content" class="btn-box">
           <a @click="handleChangeContent">生成分词</a>
           <a @click="checkArticle">文章校对</a>
           <a @click="picArticle">添加图片</a>
           <a @click="editWordsFlag = !editWordsFlag">编辑生词短语气泡</a>
           <template v-if="data.wordTime && data.wordTime.length > 0">
-            <!-- <span>已有字幕时间节点</span> -->
             <a type="text" @click="againWordTime">重新生成字幕时间</a>
             <a size="medium" @click="openCheckSubtitles('句子')">校对句子字幕时间</a>
-            <!-- <a size="medium" @click="compareTime('句子')">校对句子字幕时间</a> -->
             <a size="medium" @click="compareTime('文字')">校对文字字幕时间</a>
           </template>
           <template v-else>
@@ -106,7 +149,7 @@
             :translations="data.multilingual"
             @SubmitTranslation="handleMultilingualTranslation"
           />
-        </div>
+        </div> -->
       </div>
       <template v-if="data.detail.length > 0">
         <el-divider content-position="left"
@@ -1061,6 +1104,7 @@ export default {
         voice_type: this.data.property.voice_type,
         emotion: this.data.property.emotion,
         speed_ratio: this.data.property.speed_ratio,
+        sentence_interval: 1000,
       })
         .then(({ status, file_id, file_url }) => {
           this.autoLoading = false;
@@ -1443,7 +1487,6 @@ export default {
   display: flex;
   column-gap: 12px;
   align-items: center;
-  margin: 8px 0;
 
   .file-name {
     display: flex;
@@ -1488,6 +1531,58 @@ export default {
   }
 }
 
+.new-btn-box {
+  p {
+    margin: 0 0 10px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #333;
+  }
+
+  > div {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  a {
+    display: block;
+    padding: 6px 14px;
+    font-size: 13px;
+    color: #000;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+
+    &:hover {
+      color: #1890ff;
+      border-color: #1890ff;
+    }
+  }
+
+  :deep .el-button {
+    padding: 6px 14px;
+    font-size: 13px;
+    line-height: 1.5;
+    color: #000;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+
+    &:hover {
+      color: #1890ff;
+      border-color: #1890ff;
+    }
+
+    &.is-disabled {
+      color: #ccc;
+      border-color: #e8e8e8;
+    }
+  }
+}
+
 .tips {
   margin: 0;
   font-size: 12px;

src/views/book/courseware/create/components/question/dialogue_article/Article.vue

@@ -235,30 +235,65 @@
           <el-input v-model="noticeInput" placeholder="输入语境" style="width: 500px" />
           <el-button type="primary" size="small" @click="handleNotice">插入语境</el-button>
         </div>
-        <div class="btn-box">
-          <SelectUpload label="课文音频" type="audio" @uploadSuccess="uploadAudioSuccess" />
-          <el-button :loading="autoLoading" @click="handleAutoAudio">自动生成音频</el-button>
-        </div>
-        <div v-if="data.mp3_list.length > 0" class="upload-file">
-          <div class="file-name">
-            <span>
-              <SvgIcon icon-class="note" size="12" />
-              <span>{{ data.mp3_list[0].name }}</span>
-            </span>
+        <span class="tips">输入课文文本后，请先点击生成分词</span>
+        <el-button type="primary" @click="handleChangeContent">生成分词</el-button>
+        <template v-if="data.isFenci">
+          <div class="new-btn-box">
+            <p>文本内容</p>
+            <div>
+              <a @click="checkArticle">分词和拼音</a>
+              <a @click="editWordsFlag = !editWordsFlag">生词和气泡</a>
+              <a @click="handleMultilingual">多语种翻译</a>
+              <MultilingualFill
+                :visible.sync="multilingualVisible"
+                :text="multilingualText"
+                :translations="data.multilingual"
+                @SubmitTranslation="handleMultilingualTranslation"
+              />
+            </div>
           </div>
-          <SvgIcon icon-class="delete-black" size="12" @click="removeFile" />
-          <ResourcesOperate :data="data.mp3_list[0]" />
-        </div>
-        <span class="tips">说明：需先点击“生成分词”按钮后，再进行文章校对或生成字幕节点</span>
-        <div v-if="data.detail.length > 0" class="btn-box">
+          <div class="new-btn-box">
+            <p>音频内容</p>
+            <div>
+              <SelectUpload label="" type="audio" :isNormal="true" @uploadSuccess="uploadAudioSuccess" />
+              <el-button :loading="autoLoading" @click="handleAutoAudio">生成音频</el-button>
+              <template v-if="data.mp3_list.length === 0">
+                <el-tooltip class="item" effect="dark" content="请先设置音频" placement="top">
+                  <el-button disabled style="margin-left: 0">校对字幕</el-button>
+                </el-tooltip>
+              </template>
+              <template v-else>
+                <template v-if="data.wordTime && data.wordTime.length > 0">
+                  <a type="text" @click="againWordTime">重新生成字幕</a>
+                  <a size="medium" @click="openCheckSubtitles('句子')">句子字幕</a>
+                  <a size="medium" @click="compareTime('文字')">文字字幕</a>
+                </template>
+                <template v-else>
+                  <a v-if="!isWordTime" size="medium" @click="createWordTimes">自动生成字幕节点</a>
+                  <p v-else>字幕节点生成中...请等待</p>
+                </template>
+              </template>
+            </div>
+          </div>
+          <div v-if="data.mp3_list.length > 0" class="upload-file">
+            <div class="file-name">
+              <span>
+                <SvgIcon icon-class="note" size="12" />
+                <span>{{ data.mp3_list[0].name }}</span>
+              </span>
+            </div>
+            <SvgIcon icon-class="delete-black" size="12" @click="removeFile" />
+            <ResourcesOperate :data="data.mp3_list[0]" />
+          </div>
+        </template>
+
+        <!-- <div v-if="data.detail.length > 0" class="btn-box">
           <a @click="handleChangeContent">生成分词</a>
           <a @click="checkArticle">文章校对</a>
           <a @click="editWordsFlag = !editWordsFlag">编辑生词短语气泡</a>
           <template v-if="data.wordTime && data.wordTime.length > 0">
-            <!-- <span>已有字幕时间节点</span> -->
             <a type="text" @click="againWordTime">重新生成字幕时间</a>
             <a size="medium" @click="openCheckSubtitles('句子')">校对句子字幕时间</a>
-            <!-- <a size="medium" @click="compareTime('句子')">校对句子字幕时间</a> -->
             <a size="medium" @click="compareTime('文字')">校对文字字幕时间</a>
           </template>
           <template v-else>
@@ -272,7 +307,7 @@
             :translations="data.multilingual"
             @SubmitTranslation="handleMultilingualTranslation"
           />
-        </div>
+        </div> -->
       </div>
       <el-dialog
         v-if="dialogFlag"
@@ -918,6 +953,7 @@ export default {
     // 解析输入内容
     handleChangeContent() {
       let flag = false;
+      this.data.isFenci = true;
       this.data.detail.forEach((item, index) => {
         if (item.type === 'text') {
           if (item.wordsList.length !== 0) {
@@ -1527,6 +1563,7 @@ export default {
         voice_type: this.data.property.voice_type,
         emotion: this.data.property.emotion,
         speed_ratio: this.data.property.speed_ratio,
+        sentence_interval: 2000,
       })
         .then(({ status, file_id, file_url }) => {
           this.autoLoading = false;
@@ -2093,6 +2130,58 @@ export default {
   }
 }
 
+.new-btn-box {
+  p {
+    margin: 0 0 10px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #333;
+  }
+
+  > div {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  a {
+    display: block;
+    padding: 6px 14px;
+    font-size: 13px;
+    color: #000;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+
+    &:hover {
+      color: #1890ff;
+      border-color: #1890ff;
+    }
+  }
+
+  :deep .el-button {
+    padding: 6px 14px;
+    font-size: 13px;
+    line-height: 1.5;
+    color: #000;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+
+    &:hover {
+      color: #1890ff;
+      border-color: #1890ff;
+    }
+
+    &.is-disabled {
+      color: #ccc;
+      border-color: #e8e8e8;
+    }
+  }
+}
+
 .tabs-box {
   display: flex;
   column-gap: 12px;

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

@@ -279,5 +279,6 @@ export function getArticleData() {
       oldBorder: '',
       oldAlign: '',
     }, // 文章其他一些整体样式设置
+    isFenci: false, // 是否点过分词按钮
   };
 }