feat: 页面跳转逻辑&语音输入界面

src/views/asistant/components/InputArea.vue

@@ -19,19 +19,25 @@
       <!-- 分隔线 -->
       <div class="divider"></div>
 
-      <!-- 输入框 -->
+      <!-- 正常状态：显示输入框 -->
       <div class="input-wrapper">
         <input
+          v-show="!isRecording"
           v-model="inputValue"
           type="text"
           placeholder="Ask anything about your desired outfit"
           class="text-input"
           @keyup.enter="handleSend"
         />
+        <div v-show="isRecording" class="recording-wrapper">
+          <!-- <div class="recording-animation"> -->
+          <AudioVisualizer />
+          <!-- </div> -->
+        </div>
       </div>
 
       <!-- 语音图标 -->
-      <div class="icon-wrapper">
+      <div class="icon-wrapper" v-show="!isRecording" @click="handleClickAudio">
         <SvgIcon name="audio" size="52" />
       </div>
 
@@ -44,14 +50,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import SvgIcon from '@/components/SvgIcon/index.vue'
+import { ref, onUnmounted } from 'vue'
+import AudioVisualizer from './AudioVisualizer.vue'
 
-interface InputAreaEmits {
-  'send-message': [message: string]
-}
+const emit = defineEmits(['send-message'])
 
 const inputValue = ref<string>('')
+const isRecording = ref<boolean>(false)
 const shortcutList: string[] = [
   'Suggest shoe styles',
   'Recommend evening bags',
@@ -61,8 +66,6 @@ const shortcutList: string[] = [
   'Suggest style combinations'
 ]
 
-const emit = defineEmits<InputAreaEmits>()
-
 const handleSend = (): void => {
   if (inputValue.value.trim()) {
     console.log('input发送消息:', inputValue.value)
@@ -72,9 +75,112 @@ const handleSend = (): void => {
 }
 
 const handleShortcut = (item: string): void => {
-  console.log('handleShortcut', item)
   inputValue.value = item
 }
+
+// 语音识别相关变量
+let speechRecognition = null
+let lastTranscript = '' // 用于防重复
+
+onUnmounted(() => {
+  if (speechRecognition) {
+    speechRecognition = null
+  }
+})
+
+const handleClickAudio = (): void => {
+  isRecording.value = !isRecording.value
+
+  if (isRecording.value) {
+    startRecording()
+  } else {
+    stopRecording()
+  }
+}
+
+// 开始语音识别
+const startRecording = () => {
+  if (!speechRecognition) {
+    // 检查浏览器支持
+    if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
+      alert('您的浏览器不支持语音识别功能')
+      return
+    }
+
+    // 创建语音识别对象
+    const SpeechRecognition =
+      (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
+    speechRecognition = new SpeechRecognition()
+
+    // 配置参数
+    speechRecognition.continuous = true
+    speechRecognition.interimResults = true
+    speechRecognition.lang = 'zh-CN' // 设置为中文
+  }
+
+  // 识别开始
+  speechRecognition.onstart = () => {
+    console.log('开始语音识别')
+    isRecording.value = true
+  }
+
+  // 识别结果
+  speechRecognition.onresult = (event) => {
+    let finalTranscript = ''
+    let interimTranscript = ''
+
+    // 处理所有识别结果
+    for (let i = event.resultIndex; i < event.results.length; i++) {
+      const transcript = event.results[i][0].transcript
+      if (event.results[i].isFinal) {
+        finalTranscript += transcript
+      } else {
+        interimTranscript += transcript
+      }
+    }
+
+    // 只处理最终结果，避免重复
+    if (finalTranscript && finalTranscript !== lastTranscript) {
+      console.log('最终识别结果:', finalTranscript)
+      lastTranscript = finalTranscript
+
+      // 将识别结果填入输入框并发送
+      inputValue.value = finalTranscript
+      // emit('send-message', finalTranscript)
+    }
+
+    // 显示临时结果（可选）
+    if (interimTranscript) {
+      console.log('临时识别结果:', interimTranscript)
+    }
+  }
+
+  // 识别结束
+  speechRecognition.onend = () => {
+    console.log('语音识别结束')
+    isRecording.value = false
+    // 清空防重复变量
+    lastTranscript = ''
+  }
+
+  // 识别错误
+  speechRecognition.onerror = (event) => {
+    console.error('语音识别错误:', event.error)
+    isRecording.value = false
+    alert('语音识别失败，请重试')
+  }
+
+  // 开始识别
+  speechRecognition.start()
+}
+
+// 停止语音识别
+const stopRecording = () => {
+  if (speechRecognition && isRecording.value) {
+    speechRecognition.stop()
+    isRecording.value = false
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -167,4 +273,28 @@ const handleShortcut = (item: string): void => {
     fill: #6d6868;
   }
 }
+
+// 录制状态样式
+.recording-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.recording-animation {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.recording-text {
+  font-family: 'robotoBold';
+  font-size: 2.8rem;
+  color: #6d6868;
+  letter-spacing: 0.02em;
+}
 </style>