语音输入追加问题

src/views/AIPage/aiGenerate/DialogContent.vue

@@ -67,7 +67,8 @@
         </div>
         <div class="dialogue-content">
           <textarea
-            v-model="userInput"
+            :value="isVoiceRecording ? userInput + (userInput ? ' ' : '') + voiceRecognizedText : userInput"
+            @input="e => { if (!isVoiceRecording) userInput = e.target.value }"
             class="user-input-textarea"
             placeholder="请输入内容..."
             @keyup.enter.exact="submitUserInput"
@@ -136,6 +137,8 @@ const isInputCardVisible = ref(false)
 const userInput = ref('')
 // 语音录音状态
 const isVoiceRecording = ref(false)
+// 实时语音识别结果
+const voiceRecognizedText = ref("")
 
 // 音频对象
 // 背景音频
@@ -171,28 +174,59 @@ const md = new MarkdownIt({
 // 方法
 const handleVoiceRecognized = (text) => {
   console.log('语音识别结果:', text)
-  // 获取输入框元素
-  const textarea = document.querySelector('.user-input-textarea')
-  if (textarea) {
-    // 获取光标位置
-    const startPos = textarea.selectionStart
-    const endPos = textarea.selectionEnd
-    // 在光标位置插入文本
-    userInput.value = userInput.value.substring(0, startPos) + text + userInput.value.substring(endPos)
-    // 重新设置光标位置到插入文本的末尾
-    setTimeout(() => {
-      textarea.selectionStart = textarea.selectionEnd = startPos + text.length
-    }, 0)
+  if (isVoiceRecording.value) {
+    // 在同一次录音过程中，只更新临时变量，不修改userInput.value
+    voiceRecognizedText.value = text
   } else {
-    // 如果没有找到输入框，直接替换整个内容
-    userInput.value = text
+    // 在录音结束时，将最终的语音内容追加到userInput.value
+    const textarea = document.querySelector('.user-input-textarea')
+    if (textarea) {
+      // 获取光标位置
+      const startPos = textarea.selectionStart
+      const endPos = textarea.selectionEnd
+      // 在光标位置插入文本
+      userInput.value = userInput.value.substring(0, startPos) + text + userInput.value.substring(endPos)
+      // 重新设置光标位置到插入文本的末尾
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = startPos + text.length
+      }, 0)
+    } else {
+      // 如果没有找到输入框，直接替换整个内容
+      userInput.value = text
+    }
+    // 清空临时变量
+    voiceRecognizedText.value = ""
   }
 }
 
 // 处理录音状态变化
 const handleRecordingStatusChanged = (isRecording) => {
   console.log('录音状态:', isRecording)
+  const wasRecording = isVoiceRecording.value
   isVoiceRecording.value = isRecording
+
+  // 如果是从录音状态切换到非录音状态，需要将临时的语音识别结果追加到userInput.value
+  if (wasRecording && !isRecording) {
+    if (voiceRecognizedText.value) {
+      const textarea = document.querySelector('.user-input-textarea')
+      if (textarea) {
+        // 获取光标位置
+        const startPos = textarea.selectionStart
+        const endPos = textarea.selectionEnd
+        // 在光标位置插入文本
+        userInput.value = userInput.value.substring(0, startPos) + voiceRecognizedText.value + userInput.value.substring(endPos)
+        // 重新设置光标位置到插入文本的末尾
+        setTimeout(() => {
+          textarea.selectionStart = textarea.selectionEnd = startPos + voiceRecognizedText.value.length
+        }, 0)
+      } else {
+        // 如果没有找到输入框，直接替换整个内容
+        userInput.value = voiceRecognizedText.value
+      }
+      // 清空临时变量
+      voiceRecognizedText.value = ""
+    }
+  }
 }
 
 // 提交用户输入