音频样式统一

src/icons/svg/voiceprint-line.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="voiceprint-line">
+<path id="Vector" d="M3.33366 4.66536H4.66699V11.332H3.33366V4.66536ZM0.666992 6.66536H2.00033V9.33203H0.666992V6.66536ZM6.00033 1.33203H7.33366V13.332H6.00033V1.33203ZM8.66699 2.66536H10.0003V14.6654H8.66699V2.66536ZM11.3337 4.66536H12.667V11.332H11.3337V4.66536ZM14.0003 6.66536H15.3337V9.33203H14.0003V6.66536Z" fill="currentColor"/>
+</g>
+</svg>

src/views/exercise_questions/create/components/common/SoundRecord.vue

@@ -1,28 +1,28 @@
 <template>
   <div class="sound-record-wrapper">
-    <SvgIcon
-      v-if="audio.paused"
-      icon-class="audio"
-      :class="['audio-play-btn', wavBlob ? '' : 'not-url']"
-      @click="playMicrophone"
-    />
-    <img
-      v-else
-      :src="require('../../../../../assets/voice-play-gray.png')"
-      class="voice-play"
-      @click="playMicrophone"
-    />
-    <span :class="['record-time', microphoneStatus ? 'record-ing' : '']"
-      >{{ audio.paused ? '' : '-' }}{{ secondFormatConversion(recordTimes) }}</span
-    >
-    <img
-      v-if="microphoneStatus"
-      :src="require('../../../../../assets/record-ing.png')"
-      class="voice-play"
-      @click="microphone"
-    />
-    <SvgIcon v-else icon-class="mic-line" class="record" @click="microphone" />
-    <SvgIcon icon-class="delete-back-line" :class="['delete-btn', wavBlob ? '' : 'not-url']" @click="deleteWav" />
+    <template v-if="wavBlob">
+      <SvgIcon
+        v-if="audio.paused"
+        icon-class="audio"
+        :class="['audio-play-btn', wavBlob ? '' : 'not-url']"
+        @click="playMicrophone"
+      />
+      <img
+        v-else
+        :src="require('../../../../../assets/voice-play-gray.png')"
+        class="voice-play"
+        @click="playMicrophone"
+      />
+      <span :class="['record-time', microphoneStatus ? 'record-ing' : '']"
+        >{{ audio.paused ? '' : '-' }}{{ secondFormatConversion(recordTimes) }}</span
+      >
+      <SvgIcon icon-class="delete-back-line" :class="['delete-btn', wavBlob ? '' : 'not-url']" @click="deleteWav" />
+    </template>
+    <div v-else @click="microphone" class="sound-microphone">
+      <img v-if="microphoneStatus" :src="require('../../../../../assets/record-ing.png')" class="voice-play" />
+      <SvgIcon v-else icon-class="mic-line" class="record" />
+      <span class="auto-btn">录制音频</span>
+    </div>
 
     <audio ref="audio" :src="file_url" preload="metadata"></audio>
   </div>
@@ -170,7 +170,9 @@ export default {
 <style lang="scss" scoped>
 .sound-record-wrapper {
   display: flex;
+  column-gap: 12px;
   align-items: center;
+  width: 200px;
   padding: 5px 12px;
   background: #f2f3f5;
   border-radius: 2px;
@@ -185,8 +187,8 @@ export default {
   }
 
   .record-time {
+    flex: 1;
     min-width: 52px;
-    margin: 0 12px;
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
@@ -216,5 +218,20 @@ export default {
       cursor: not-allowed;
     }
   }
+
+  .auto-btn {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    color: #1d2129;
+    cursor: pointer;
+  }
+
+  .sound-microphone {
+    display: flex;
+    column-gap: 12px;
+    align-items: center;
+    width: 100%;
+  }
 }
 </style>

src/views/exercise_questions/create/components/exercises/ChineseQuestion.vue

@@ -28,35 +28,32 @@
               @blur="handleSplitPy(item)"
               @change="changePinyin(item)"
             />
-            <div
-              v-if="data.other.audio_generation_method === 'upload'"
-              :class="[{ 'upload-audio-play': item.audio_file_id }]"
-            >
-              <div v-if="item.audio_file_id" class="upload-play">
-                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
-                <SvgIcon icon-class="delete-back-line" @click="deleteAudio(i)" />
-              </div>
-              <UploadAudio
-                v-else
-                :key="item.audio_file_id || i"
-                :file-id="item.audio_file_id"
-                :item-index="i"
-                :show-upload="!item.audio_file_id"
-                @upload="uploads"
-                @deleteFile="deleteFiles"
-              />
-            </div>
-            <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
-              <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
-              <span
-                v-loading="loading_list[i] ? loading_list[i].loading : false"
-                class="auto-btn"
-                @click="handleMatically(item, i)"
-                >{{ item.audio_file_id ? '已生成' : '生成音频' }}</span
-              >
-              <SvgIcon v-if="item.audio_file_id" icon-class="delete-back-line" @click="deleteAudio(i)" />
+            <div v-if="item.audio_file_id">
+              <SoundRecord :wav-blob.sync="item.audio_file_id" />
             </div>
-            <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
+            <template v-else>
+              <div :class="['upload-audio-play']">
+                <UploadAudio
+                  :key="item.audio_file_id || i"
+                  :file-id="item.audio_file_id"
+                  :item-index="i"
+                  :show-upload="!item.audio_file_id"
+                  @upload="uploads"
+                  @deleteFile="deleteFiles"
+                  v-if="data.other.audio_generation_method === 'upload'"
+                />
+                <div
+                  v-else-if="data.other.audio_generation_method === 'auto'"
+                  class="auto-matically"
+                  @click="handleMatically(item, i)"
+                  v-loading="loading_list[i] ? loading_list[i].loading : false"
+                >
+                  <SvgIcon icon-class="voiceprint-line" class="record" />
+                  <span class="auto-btn">{{ item.audio_file_id ? '已生成' : '生成音频' }}</span>
+                </div>
+                <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
+              </div>
+            </template>
             <el-input v-model="item.definition" placeholder="输入释义" />
             <el-input v-model="item.collocation" placeholder="输入搭配" />
             <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
@@ -403,11 +400,13 @@ export default {
 
   .content-item {
     .upload-wrapper {
+      width: 200px;
       margin-top: 0;
+      overflow: hidden;
     }
 
     :deep .upload-audio {
-      width: 160px;
+      width: 200px;
     }
 
     :deep .file-name {
@@ -442,8 +441,9 @@ export default {
 
     .upload-audio-play {
       display: flex;
+      flex-shrink: 0;
       align-items: center;
-      padding: 8px 12px;
+      width: 200px;
       background-color: $fill-color;
       border-radius: 2px;
 
@@ -461,15 +461,15 @@ export default {
     .auto-matically {
       display: flex;
       flex-shrink: 0;
+      column-gap: 12px;
       align-items: center;
-      justify-content: space-between;
-      width: 233px;
+      width: 200px;
       padding: 5px 12px;
       background-color: $fill-color;
       border-radius: 2px;
 
       .auto-btn {
-        font-size: 14px;
+        font-size: 16px;
         font-weight: 400;
         line-height: 22px;
         color: #1d2129;

src/views/exercise_questions/create/components/exercises/ChooseToneQuestion.vue

@@ -34,36 +34,33 @@
               :readonly="true"
               style="width: 200px"
             />
-
-            <div
-              v-if="data.other.audio_generation_method === 'upload'"
-              :class="[{ 'upload-audio-play': item.audio_file_id }]"
-            >
-              <div v-if="item.audio_file_id" class="upload-play">
-                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
-                <SvgIcon icon-class="delete-back-line" @click="deleteAudio(i)" />
-              </div>
-              <UploadAudio
-                v-else
-                :key="item.audio_file_id || i"
-                :file-id="item.audio_file_id"
-                :item-index="i"
-                :show-upload="!item.audio_file_id"
-                @upload="uploads"
-                @deleteFile="deleteFiles"
-              />
+            <div v-if="item.audio_file_id">
+              <SoundRecord :wav-blob.sync="item.audio_file_id" />
             </div>
-            <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
-              <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
-              <span
-                v-loading="loading_list[i] ? loading_list[i].loading : false"
-                class="auto-btn"
-                @click="handleMatically(item, i)"
-                >{{ item.audio_file_id ? '已生成' : '生成音频' }}</span
-              >
-              <SvgIcon v-if="item.audio_file_id" icon-class="delete-back-line" @click="deleteAudio(i)" />
-            </div>
-            <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
+            <template v-else>
+              <div :class="['upload-audio-play']">
+                <UploadAudio
+                  :key="item.audio_file_id || i"
+                  :file-id="item.audio_file_id"
+                  :item-index="i"
+                  :show-upload="!item.audio_file_id"
+                  @upload="uploads"
+                  @deleteFile="deleteFiles"
+                  v-if="data.other.audio_generation_method === 'upload'"
+                />
+                <div
+                  v-else-if="data.other.audio_generation_method === 'auto'"
+                  class="auto-matically"
+                  @click="handleMatically(item, i)"
+                  v-loading="loading_list[i] ? loading_list[i].loading : false"
+                >
+                  <SvgIcon icon-class="voiceprint-line" class="record" />
+                  <span class="auto-btn">{{ item.audio_file_id ? '已生成' : '生成音频' }}</span>
+                </div>
+                <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
+              </div>
+            </template>
+
             <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
           </li>
         </ul>
@@ -394,7 +391,9 @@ export default {
 
   .content-item {
     .upload-wrapper {
+      width: 200px;
       margin-top: 0;
+      overflow: hidden;
     }
 
     :deep .file-name {
@@ -429,8 +428,9 @@ export default {
 
     .upload-audio-play {
       display: flex;
+      flex-shrink: 0;
       align-items: center;
-      padding: 8px 12px;
+      width: 200px;
       background-color: $fill-color;
       border-radius: 2px;
 
@@ -447,15 +447,16 @@ export default {
 
     .auto-matically {
       display: flex;
+      flex-shrink: 0;
+      column-gap: 12px;
       align-items: center;
-      justify-content: space-between;
-      width: 233px;
+      width: 200px;
       padding: 5px 12px;
       background-color: $fill-color;
       border-radius: 2px;
 
       .auto-btn {
-        font-size: 14px;
+        font-size: 16px;
         font-weight: 400;
         line-height: 22px;
         color: #1d2129;

src/views/exercise_questions/create/components/exercises/RepeatQuestion.vue

@@ -28,35 +28,32 @@
                 @handleRichTextBlur="handleRichTextBlur"
               />
             </div>
-            <div
-              v-if="data.other.audio_generation_method === 'upload'"
-              :class="[{ 'upload-audio-play': item.audio_file_id }]"
-            >
-              <div v-if="item.audio_file_id" class="upload-play">
-                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
-                <SvgIcon icon-class="delete-back-line" @click="deleteAudio(i)" />
-              </div>
-              <UploadAudio
-                v-else
-                :key="item.audio_file_id || i"
-                :file-id="item.audio_file_id"
-                :item-index="i"
-                :show-upload="!item.audio_file_id"
-                @upload="uploads"
-                @deleteFile="deleteFiles"
-              />
-            </div>
-            <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
-              <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
-              <span
-                v-loading="loading_list[i] ? loading_list[i].loading : false"
-                class="auto-btn"
-                @click="handleMatically(item, i)"
-                >{{ item.audio_file_id ? '已生成' : '生成音频' }}</span
-              >
-              <SvgIcon v-if="item.audio_file_id" icon-class="delete-back-line" @click="deleteAudio(i)" />
+            <div v-if="item.audio_file_id">
+              <SoundRecord :wav-blob.sync="item.audio_file_id" />
             </div>
-            <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
+            <template v-else>
+              <div :class="['upload-audio-play']">
+                <UploadAudio
+                  :key="item.audio_file_id || i"
+                  :file-id="item.audio_file_id"
+                  :item-index="i"
+                  :show-upload="!item.audio_file_id"
+                  @upload="uploads"
+                  @deleteFile="deleteFiles"
+                  v-if="data.other.audio_generation_method === 'upload'"
+                />
+                <div
+                  v-else-if="data.other.audio_generation_method === 'auto'"
+                  class="auto-matically"
+                  @click="handleMatically(item, i)"
+                  v-loading="loading_list[i] ? loading_list[i].loading : false"
+                >
+                  <SvgIcon icon-class="voiceprint-line" class="record" />
+                  <span class="auto-btn">{{ item.audio_file_id ? '已生成' : '生成音频' }}</span>
+                </div>
+                <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
+              </div>
+            </template>
             <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
           </li>
         </ul>
@@ -318,7 +315,9 @@ export default {
 <style lang="scss" scoped>
 .repeat-option {
   :deep .upload-wrapper {
+    width: 200px;
     margin-top: 0;
+    overflow: hidden;
   }
 
   :deep .file-name {
@@ -353,8 +352,9 @@ export default {
 
   .upload-audio-play {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
-    padding: 8px 12px;
+    width: 200px;
     background-color: $fill-color;
     border-radius: 2px;
 
@@ -372,15 +372,15 @@ export default {
   .auto-matically {
     display: flex;
     flex-shrink: 0;
+    column-gap: 12px;
     align-items: center;
-    justify-content: space-between;
-    width: 233px;
+    width: 200px;
     padding: 5px 12px;
     background-color: $fill-color;
     border-radius: 2px;
 
     .auto-btn {
-      font-size: 14px;
+      font-size: 16px;
       font-weight: 400;
       line-height: 22px;
       color: #1d2129;

src/views/exercise_questions/create/components/exercises/WordCardQuestion.vue

@@ -39,35 +39,32 @@
                   :placeholder="'拼音间用空格隔开，如: ni3 hao3'"
                   @change="changePinyin(item)"
                 />
-                <div
-                  v-if="data.other.audio_generation_method === 'upload'"
-                  :class="[{ 'upload-audio-play': item.audio_file_id }]"
-                >
-                  <div v-if="item.audio_file_id" class="upload-play">
-                    <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
-                    <SvgIcon icon-class="delete-back-line" @click="deleteAudio(i)" />
-                  </div>
-                  <UploadAudio
-                    v-else
-                    :key="item.audio_file_id || i"
-                    :file-id="item.audio_file_id"
-                    :item-index="i"
-                    :show-upload="!item.audio_file_id"
-                    @upload="uploads"
-                    @deleteFile="deleteFiles"
-                  />
-                </div>
-                <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
-                  <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
-                  <span
-                    v-loading="loading_list[i] ? loading_list[i].loading : false"
-                    class="auto-btn"
-                    @click="handleMatically(item, i)"
-                    >{{ item.audio_file_id ? '已生成' : '生成音频' }}</span
-                  >
-                  <SvgIcon v-if="item.audio_file_id" icon-class="delete-back-line" @click="deleteAudio(i)" />
+                <div v-if="item.audio_file_id">
+                  <SoundRecord :wav-blob.sync="item.audio_file_id" />
                 </div>
-                <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
+                <template v-else>
+                  <div :class="['upload-audio-play']">
+                    <UploadAudio
+                      :key="item.audio_file_id || i"
+                      :file-id="item.audio_file_id"
+                      :item-index="i"
+                      :show-upload="!item.audio_file_id"
+                      @upload="uploads"
+                      @deleteFile="deleteFiles"
+                      v-if="data.other.audio_generation_method === 'upload'"
+                    />
+                    <div
+                      v-else-if="data.other.audio_generation_method === 'auto'"
+                      class="auto-matically"
+                      @click="handleMatically(item, i)"
+                      v-loading="loading_list[i] ? loading_list[i].loading : false"
+                    >
+                      <SvgIcon icon-class="voiceprint-line" class="record" />
+                      <span class="auto-btn">{{ item.audio_file_id ? '已生成' : '生成音频' }}</span>
+                    </div>
+                    <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
+                  </div>
+                </template>
                 <el-input v-model="item.definition" placeholder="输入释义" type="textarea" :rows="1" />
                 <el-input v-model="item.collocation" placeholder="输入搭配" />
               </div>
@@ -533,6 +530,7 @@ export default {
 
     .upload-wrapper {
       margin-top: 0;
+      overflow: hidden;
     }
 
     :deep .file-name {
@@ -567,8 +565,9 @@ export default {
 
     .upload-audio-play {
       display: flex;
+      flex-shrink: 0;
       align-items: center;
-      padding: 8px 12px;
+      width: 200px;
       background-color: $fill-color;
       border-radius: 2px;
 
@@ -586,15 +585,15 @@ export default {
     .auto-matically {
       display: flex;
       flex-shrink: 0;
+      column-gap: 12px;
       align-items: center;
-      justify-content: space-between;
-      width: 233px;
+      width: 200px;
       padding: 5px 12px;
       background-color: $fill-color;
       border-radius: 2px;
 
       .auto-btn {
-        font-size: 14px;
+        font-size: 16px;
         font-weight: 400;
         line-height: 22px;
         color: #1d2129;

src/views/exercise_questions/create/components/exercises/WordDictationQuestion.vue

@@ -25,35 +25,32 @@
               @blur="handleSplitPy(item)"
               @change="changePinyin(item)"
             />
-            <div
-              v-if="data.other.audio_generation_method === 'upload'"
-              :class="[{ 'upload-audio-play': item.audio_file_id }]"
-            >
-              <div v-if="item.audio_file_id" class="upload-play">
-                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
-                <SvgIcon icon-class="delete-back-line" @click="deleteAudio(i)" />
-              </div>
-              <UploadAudio
-                v-else
-                :key="item.audio_file_id || i"
-                :file-id="item.audio_file_id"
-                :item-index="i"
-                :show-upload="!item.audio_file_id"
-                @upload="uploads"
-                @deleteFile="deleteFiles"
-              />
-            </div>
-            <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
-              <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
-              <span
-                v-loading="loading_list[i] ? loading_list[i].loading : false"
-                class="auto-btn"
-                @click="handleMatically(item, i)"
-                >{{ item.audio_file_id ? '已生成' : '生成音频' }}</span
-              >
-              <SvgIcon v-if="item.audio_file_id" icon-class="delete-back-line" @click="deleteAudio(i)" />
+            <div v-if="item.audio_file_id">
+              <SoundRecord :wav-blob.sync="item.audio_file_id" />
             </div>
-            <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
+            <template v-else>
+              <div :class="['upload-audio-play']">
+                <UploadAudio
+                  :key="item.audio_file_id || i"
+                  :file-id="item.audio_file_id"
+                  :item-index="i"
+                  :show-upload="!item.audio_file_id"
+                  @upload="uploads"
+                  @deleteFile="deleteFiles"
+                  v-if="data.other.audio_generation_method === 'upload'"
+                />
+                <div
+                  v-else-if="data.other.audio_generation_method === 'auto'"
+                  class="auto-matically"
+                  @click="handleMatically(item, i)"
+                  v-loading="loading_list[i] ? loading_list[i].loading : false"
+                >
+                  <SvgIcon icon-class="voiceprint-line" class="record" />
+                  <span class="auto-btn">{{ item.audio_file_id ? '已生成' : '生成音频' }}</span>
+                </div>
+                <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
+              </div>
+            </template>
             <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
           </li>
         </ul>
@@ -352,7 +349,9 @@ export default {
 
   .content-item {
     .upload-wrapper {
+      width: 200px;
       margin-top: 0;
+      overflow: hidden;
     }
 
     :deep .file-name {
@@ -387,8 +386,9 @@ export default {
 
     .upload-audio-play {
       display: flex;
+      flex-shrink: 0;
       align-items: center;
-      padding: 8px 12px;
+      width: 200px;
       background-color: $fill-color;
       border-radius: 2px;
 
@@ -406,15 +406,15 @@ export default {
     .auto-matically {
       display: flex;
       flex-shrink: 0;
+      column-gap: 12px;
       align-items: center;
-      justify-content: space-between;
-      width: 233px;
+      width: 200px;
       padding: 5px 12px;
       background-color: $fill-color;
       border-radius: 2px;
 
       .auto-btn {
-        font-size: 14px;
+        font-size: 16px;
         font-weight: 400;
         line-height: 22px;
         color: #1d2129;