切换话题时清空索引，停止音频

src/views/AIPage/aiGenerate/DialogContent.vue

@@ -19,7 +19,9 @@
       </div>
       <!-- 标题 -->
       <div class="title-center">
-        {{ currentSection?.name }}
+        <div class="title-text" :title="currentSection?.name">
+          {{ currentSection?.name }}
+        </div>
       </div>
       <!-- 左右按钮 -->
       <div class="title-right">
@@ -478,15 +480,29 @@ const startPlayback = () => {
 
 // 键盘事件处理，键盘左右箭头控制对话
 const handleKeydown = (event) => {
+  // 如果遮罩层显示，不处理键盘事件
+  if (showMask.value) {
+    return
+  }
+  
   // 如果当前是用户输入对话，不处理键盘事件，让默认行为生效（在输入框中左右移动光标）
   if (currentDialogue.value?.type === 'user') {
     return
   }
   
-  if (event.key === 'ArrowLeft') {
-    playPrevious()
-  } else if (event.key === 'ArrowRight') {
-    playNext()
+  // 处理左右箭头键
+  switch (event.key) {
+    case 'ArrowLeft':
+      playPrevious()
+      event.preventDefault() // 防止默认行为
+      break
+    case 'ArrowRight':
+      playNext()
+      event.preventDefault() // 防止默认行为
+      break
+    default:
+      // 其他按键不做处理
+      break
   }
 }
 
@@ -495,12 +511,30 @@ watch(currentSectionIndex, () => {
   playBackgroundAudio()
 })
 
-// // 监听对话变化
-// watch(currentDialogue, () => {
-//   if (!isPlaying.value) {
-//     playDialogueAudio()
-//   }
-// })
+// 监听 scriptData 变化（侧边栏切换话题时）
+watch(() => props.scriptData, (newVal, oldVal) => {
+  if (newVal && oldVal && newVal !== oldVal) {
+    // 停止所有音频
+    stopAllAudio()
+    // 如果正在进行数字人对话，调用stopStream清理
+    recoverQuestDialogue()
+    stopPlayback(false)
+    if (conversationInProgress.value) {
+      stopStream()
+    }
+    // 清空索引
+    currentSectionIndex.value = 0
+    currentDialogueIndex.value = 0
+    // 重置播放状态
+    isPlaying.value = false
+    // 显示遮罩层
+    showMask.value = true
+    // 清空用户输入
+    userInput.value = ''
+    // 清空对话缓存
+    currentDialogueCache.value = null
+  }
+}, { deep: true })
 
 // 会话ID
 const activeConversationId = ref(null)
@@ -764,8 +798,6 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: rpx(13);
-  font-weight: bold;
   background-image: url('@/assets/dialogue/number-title.png');
   background-size: contain;
   background-repeat: no-repeat;
@@ -773,6 +805,19 @@ onUnmounted(() => {
   height: 100%;
 }
 
+.title-text {
+  height: 100%;
+  font-size: rpx(12);
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+
 .title-right {
   width: 33.33%;
   height: 100%;
@@ -903,16 +948,17 @@ onUnmounted(() => {
   background-repeat: no-repeat;
   opacity: 0;
   z-index: 1;
+  // background-color: #fff;
 }
 
 .character.left {
-  left: rpx(30);
+  left: rpx(17);
   transform: translateX(-100%);
   animation: characterEnterLeft 0.8s ease forwards;
 }
 
 .character.right {
-  right: rpx(30);
+  right: rpx(17);
   transform: translateX(100%) scaleX(-1);
   animation: characterEnterRight 0.8s ease forwards;
 }