Merge remote-tracking branch 'origin/wanzi'

src/views/AIPage/aiGenerate/DialogContent.vue

@@ -23,17 +23,11 @@
           {{ currentSection?.name }}
         </div>
       </div>
-      <!-- 左右按钮 -->
+      <!-- 自动按钮 -->
       <div class="title-right">
-        <div class="arrow-icon-circle" @click="playPrevious" :class="{ 'disabled': currentSectionIndex === 0 && currentDialogueIndex === 0 }">
-          <el-icon class="arrow-icon"><CaretLeft /></el-icon>
-        </div>
-        <div class="arrow-icon-circle" @click="togglePlay">
+        <div class="box-icon" @click="togglePlay">
           <span class="play-text">{{ isPlaying ? '暂停' : '自动' }}</span>
         </div>
-        <div class="arrow-icon-circle" @click="playNext" :class="{ 'disabled': currentSectionIndex === scriptData.sections.length - 1 && currentDialogueIndex === currentSection.dialogues.length - 1 }">
-          <el-icon class="arrow-icon"><CaretRight /></el-icon>
-        </div>
       </div>
     </div>
 
@@ -91,14 +85,24 @@
       </div>
 
       <!-- 输入按钮区域 -->
-      <div class="input-buttons-container" v-if="currentDialogue.type === 'user'">
+      <div class="input-buttons-container" >
+        <!-- 上一个对话按钮 -->
+        <div class="arrow-icon-circle" @click="playPrevious" :class="{ 'disabled': currentSectionIndex === 0 && currentDialogueIndex === 0 }">
+          <el-icon class="arrow-icon"><CaretLeft /></el-icon>
+        </div>
         <!-- 语音输入按钮 -->
-        <div class="voice-input-outer" :class="{ 'recording': isVoiceRecording }">
+        <div class="voice-input-outer" v-if="currentDialogue.type === 'user'" :class="{ 'recording': isVoiceRecording }">
           <VoiceInput 
             @voiceRecognized="handleVoiceRecognized" 
             @recordingStatusChanged="handleRecordingStatusChanged"
           />
         </div>
+        <!-- 语音输入按钮占位符 -->
+        <div class="voice-input-outer placeholder" v-else></div>
+        <!-- 下一个对话按钮 -->
+        <div class="arrow-icon-circle" @click="playNext" :class="{ 'disabled': currentSectionIndex === scriptData.sections.length - 1 && currentDialogueIndex === currentSection.dialogues.length - 1 }">
+          <el-icon class="arrow-icon"><CaretRight /></el-icon>
+        </div>
       </div>
     </div>
 
@@ -807,73 +811,69 @@ onUnmounted(() => {
 }
 
 .title-center {
-  width: 33.33%;
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
   background-image: url('@/assets/dialogue/number-title.png');
-  background-size: contain;
+  background-size: 100% 85%;
   background-repeat: no-repeat;
   background-position: center;
-  height: 100%;
+  width: fit-content;
+  padding: 0 rpx(100);
+  min-width: rpx(100);
 }
 
 .title-text {
   height: 100%;
-  font-size: rpx(12);
+  font-size: rpx(11);
   font-weight: bold;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 50%;
   display: flex;
   align-items: center;
-  justify-content: left;
+  justify-content: center;
+  white-space: nowrap;
+  // background-color: rgba(255, 255, 255, 90%);
 }
 
 .title-right {
-  width: 33.33%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: rpx(10);
-  .arrow-icon-circle {
-    width: rpx(20);
-    height: rpx(20);
-    border-radius: 50%;
-    border: rpx(1) solid rgba(0, 100, 192);
-    background: linear-gradient(135deg, #A0DCF0, #50BEF0);
+    width: 33.33%;
+    height: 100%;
     display: flex;
     align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.3s ease;
-  }
-  .arrow-icon-circle:hover:not(.disabled) {
-    transform: scale(1.1);
-    box-shadow: 0 rpx(1) rpx(6) rgba(0, 0, 0, 0.3);
-  }
-  .arrow-icon-circle:active:not(.disabled) {
-    transform: scale(0.95);
-  }
-  .arrow-icon-circle.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    border-color: rgba(0, 100, 192, 0.3);
-    background: linear-gradient(135deg, rgba(160, 220, 240, 0.5), rgba(80, 190, 240, 0.5));
-  }
-  .arrow-icon {
-    font-size: rpx(15);
-    color: #0064BE;
-  }
-  
-  .play-text {
-    font-size: rpx(7);
-    color: #0064BE;
-    font-weight: 500;
+    justify-content: flex-end;
+    gap: rpx(10);
+    .box-icon {
+      display: flex;
+      align-items: center;
+      color: #0064BE;
+      gap: rpx(5);
+      padding: rpx(5) rpx(10);
+      background: linear-gradient(135deg, #A0DCF0, #50BEF0);
+      border: rpx(1) solid rgba(0, 100, 192);
+      border-radius: rpx(30);
+      backdrop-filter: blur(10px);
+      cursor: pointer;
+      transition: all 0.3s ease;
+      font-size: rpx(9);
+      font-weight: 500;
+      width: fit-content;
+    }
+    
+    .box-icon:hover {
+      background-color: rgba(255, 255, 255, 90%);
+      transform: translateX(-3px);
+    }
+    
+    .left-icon {
+      font-size: rpx(12);
+    }
+    
+    .play-text {
+      font-size: rpx(9);
+      color: #0064BE;
+      font-weight: 500;
+    }
   }
-}
 
 .background-image {
   width: 100%;
@@ -947,7 +947,7 @@ onUnmounted(() => {
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  padding-bottom: rpx(10);
+  padding-bottom: rpx(0);
   z-index: 10;
 }
 
@@ -1010,8 +1010,8 @@ onUnmounted(() => {
   background: rgba(255, 255, 255, 0.9);
   border-radius: rpx(6);
   padding: rpx(8);
-  max-width: 20%;
-  min-width: rpx(150);
+  max-width: 35%;
+  min-width: rpx(200);
   box-shadow: 0 rpx(3.5) rpx(10) rgba(0, 0, 0, 0.15);
   position: absolute;
   bottom: rpx(50);
@@ -1117,7 +1117,7 @@ onUnmounted(() => {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: rpx(70);
+  bottom: rpx(50);
   right: auto;
   animation: dialogueEnterCenter 0.6s ease forwards;
 }
@@ -1277,6 +1277,41 @@ onUnmounted(() => {
   z-index: 10;
   transition: all 0.3s ease;
   transform: scale(0.9);
+  gap: rpx(10);
+  
+  .arrow-icon-circle {
+    width: rpx(20);
+    height: rpx(20);
+    border-radius: 50%;
+    border: rpx(1) solid rgba(0, 100, 192);
+    background: linear-gradient(135deg, #A0DCF0, #50BEF0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    
+    &:hover:not(.disabled) {
+      transform: scale(1.1);
+      box-shadow: 0 rpx(1) rpx(6) rgba(0, 0, 0, 0.3);
+    }
+    
+    &:active:not(.disabled) {
+      transform: scale(0.95);
+    }
+    
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      border-color: rgba(0, 100, 192, 0.3);
+      background: linear-gradient(135deg, rgba(160, 220, 240, 0.5), rgba(80, 190, 240, 0.5));
+    }
+    
+    .arrow-icon {
+      font-size: rpx(15);
+      color: #0064BE;
+    }
+  }
 }
 
 .voice-input-outer,
@@ -1325,6 +1360,11 @@ onUnmounted(() => {
     }
   }
 
+  // 占位符样式
+  &.placeholder {
+    visibility: hidden;
+  }
+
   :deep(.voice-input-container) {
     position: relative;
     z-index: 10;