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

src/views/asistant/components/AudioVisualizer.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="audio-visualizer" ref="containerRef">
+    <div class="visualizer-container" ref="visualizerRef">
+      <div v-for="(line, index) in lines" :key="index" :class="['line', `line-${line.type}`]"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+
+// 定义线条类型
+interface Line {
+  type: 1 | 2 | 3
+}
+
+const containerRef = ref<HTMLElement>()
+const visualizerRef = ref<HTMLElement>()
+const lines = ref<Line[]>([])
+
+// 计算需要的线条数量
+const calculateLines = (): Line[] => {
+  if (!visualizerRef.value) return []
+
+  const containerWidth = visualizerRef.value.offsetWidth
+  const lineWidth = 0.96 // 每条线的宽度 (rem)
+  const gap = 0.96 // 线条之间的间距 (rem)
+
+  const remToPx = 10
+  const lineWidthPx = lineWidth * remToPx
+  const gapPx = gap * remToPx
+
+  // 计算能容纳多少条线
+  const availableWidth = containerWidth
+  const lineWithGap = lineWidthPx + gapPx
+  const maxLines = Math.floor(availableWidth / lineWithGap)
+
+  const generatedLines: Line[] = []
+
+  // 基础模式：3条1号线 → 1条2号线 → 1条3号线 → 1条2号线 → 4条1号线
+  const basePattern: Line[] = [
+    { type: 1 },
+    { type: 1 },
+    { type: 1 }, // 3条1号线
+    { type: 2 }, // 1条2号线
+    { type: 3 }, // 1条3号线
+    { type: 2 }, // 1条2号线
+    { type: 1 },
+    { type: 1 },
+    { type: 1 },
+    { type: 1 } // 4条1号线
+  ]
+
+  // 重复模式：1条2号线 → 1条3号线 → 1条2号线 → 4条1号线
+  const repeatPattern: Line[] = [
+    { type: 2 }, // 1条2号线
+    { type: 3 }, // 1条3号线
+    { type: 2 }, // 1条2号线
+    { type: 1 },
+    { type: 1 },
+    { type: 1 },
+    { type: 1 } // 4条1号线
+  ]
+
+  // 先添加基础模式
+  generatedLines.push(...basePattern)
+
+  // 然后重复添加模式直到填满容器
+  let currentIndex = basePattern.length
+  while (currentIndex < maxLines) {
+    const remainingSpace = maxLines - currentIndex
+    if (remainingSpace >= repeatPattern.length) {
+      generatedLines.push(...repeatPattern)
+      currentIndex += repeatPattern.length
+    } else {
+      // 如果剩余空间不够一个完整模式，就用1号线填充
+      for (let i = 0; i < remainingSpace; i++) {
+        generatedLines.push({ type: 1 })
+      }
+      break
+    }
+  }
+
+  return generatedLines
+}
+
+// 更新线条
+const updateLines = () => {
+  lines.value = calculateLines()
+}
+
+// 监听窗口大小变化
+const handleResize = () => {
+  updateLines()
+}
+
+onMounted(async () => {
+  await nextTick()
+  updateLines()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+.audio-visualizer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  min-height: 200px;
+  border-radius: 10px;
+}
+
+.visualizer-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.96rem;
+  height: 120px;
+  flex-wrap: nowrap;
+}
+
+.line {
+  background: linear-gradient(0deg, #b5b5b5, #b5b5b5),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
+  border-radius: 20px;
+}
+
+/* 1号线 - 最短 */
+.line-1 {
+  width: 0.96rem;
+  height: 2.42rem;
+}
+
+/* 2号线 - 稍长 */
+.line-2 {
+  width: 0.96rem;
+  height: 3.87rem;
+}
+
+/* 3号线 - 最长 */
+.line-3 {
+  width: 0.96rem;
+  height: 6.29rem;
+}
+</style>

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>