From acf5de942d518370350900e799d3af75f288657e Mon Sep 17 00:00:00 2001
From: zhangyh <zhangyahui@haier.com>
Date: Mon, 20 Oct 2025 17:01:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=87=E7=94=A8=E9=9F=B3=E9=A2=91?=
 =?UTF-8?q?=E5=BD=95=E5=88=B6=E7=BB=84=E4=BB=B6&=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E9=A1=B5=E5=8F=96=E6=B6=88=E5=8E=9F=E7=94=9Fform=E9=AA=8C?=
 =?UTF-8?q?=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/modules/userInfo.ts                |  60 +-
 src/utils/audioUtils.ts                       | 231 ++++++++
 .../asistant/components/AudioRecorder.vue     | 557 ++++++++++++++++++
 src/views/asistant/components/InputArea.vue   |  83 ++-
 src/views/login/LoginPage.vue                 |  52 +-
 5 files changed, 907 insertions(+), 76 deletions(-)
 create mode 100644 src/utils/audioUtils.ts
 create mode 100644 src/views/asistant/components/AudioRecorder.vue

diff --git a/src/stores/modules/userInfo.ts b/src/stores/modules/userInfo.ts
index b8d3198..9af438d 100644
--- a/src/stores/modules/userInfo.ts
+++ b/src/stores/modules/userInfo.ts
@@ -1,26 +1,42 @@
 // 每一个存储的模块，命名规则use开头，store结尾
 import { defineStore } from 'pinia'
-export const useUserInfoStore = defineStore({
-  id: 'userInfo', // 必须指明唯一的pinia仓库的id
-  state: () => {
-    return {
-      num: 0,
-      name: '张三',
-      token: ''
-    }
-  },
-  getters: {
-    doubleCount: (state) => state.num * 2
-  },
-  actions: {
-    changeNum() {
-      this.num++
-    },
-    loginOut() {
-      // 处理退出登录的一些逻辑
-      return new Promise((rez) => {
-        rez('111')
-      })
-    }
+import { ref, computed } from 'vue'
+
+export const useUserInfoStore = defineStore('userInfo', () => {
+  // state
+  const num = ref(0)
+  const name = ref('张三')
+  const token = ref('')
+
+  // getters
+  const getUserInfo = computed(() => ({
+    num: num.value,
+    name: name.value,
+    token: token.value
+  }))
+
+  // actions
+  const setUserInfo = (data: any) => {
+    name.value = data.name
+    token.value = data.token
+  }
+
+  const loginOut = () => {
+    // 处理退出登录的一些逻辑
+    return new Promise((rez) => {
+      rez('111')
+    })
+  }
+
+  return {
+    // state
+    num,
+    name,
+    token,
+    // getters
+    getUserInfo,
+    // actions
+    setUserInfo,
+    loginOut
   }
 })
diff --git a/src/utils/audioUtils.ts b/src/utils/audioUtils.ts
new file mode 100644
index 0000000..2028469
--- /dev/null
+++ b/src/utils/audioUtils.ts
@@ -0,0 +1,231 @@
+/**
+ * 音频处理工具函数
+ * 为后续集成第三方TTS方案做准备
+ */
+
+// 音频文件类型定义
+export interface AudioFile {
+  blob: Blob
+  name: string
+  size: number
+  type: string
+  duration?: number
+}
+
+// 音频格式转换选项
+export interface AudioConvertOptions {
+  format: 'webm' | 'mp3' | 'wav' | 'ogg'
+  quality?: number
+  bitrate?: number
+}
+
+/**
+ * 将Blob转换为指定格式的音频文件
+ * @param audioBlob 原始音频Blob
+ * @param options 转换选项
+ * @returns Promise<Blob> 转换后的音频Blob
+ */
+export const convertAudioFormat = async (
+  audioBlob: Blob,
+  options: AudioConvertOptions
+): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    try {
+      const audio = new Audio()
+      const url = URL.createObjectURL(audioBlob)
+      
+      audio.onloadedmetadata = () => {
+        // 这里可以添加格式转换逻辑
+        // 目前直接返回原始Blob，实际项目中可以使用Web Audio API或第三方库
+        URL.revokeObjectURL(url)
+        resolve(audioBlob)
+      }
+      
+      audio.onerror = () => {
+        URL.revokeObjectURL(url)
+        reject(new Error('音频加载失败'))
+      }
+      
+      audio.src = url
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+/**
+ * 获取音频文件信息
+ * @param audioBlob 音频Blob
+ * @returns Promise<AudioFile> 音频文件信息
+ */
+export const getAudioFileInfo = async (audioBlob: Blob): Promise<AudioFile> => {
+  return new Promise((resolve, reject) => {
+    const audio = new Audio()
+    const url = URL.createObjectURL(audioBlob)
+    
+    audio.onloadedmetadata = () => {
+      const audioFile: AudioFile = {
+        blob: audioBlob,
+        name: `audio-${Date.now()}.webm`,
+        size: audioBlob.size,
+        type: audioBlob.type,
+        duration: audio.duration
+      }
+      
+      URL.revokeObjectURL(url)
+      resolve(audioFile)
+    }
+    
+    audio.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error('无法获取音频信息'))
+    }
+    
+    audio.src = url
+  })
+}
+
+/**
+ * 压缩音频文件
+ * @param audioBlob 原始音频Blob
+ * @param quality 压缩质量 (0-1)
+ * @returns Promise<Blob> 压缩后的音频Blob
+ */
+export const compressAudio = async (
+  audioBlob: Blob,
+  quality: number = 0.8
+): Promise<Blob> => {
+  // 这里可以实现音频压缩逻辑
+  // 目前直接返回原始Blob，实际项目中可以使用Web Audio API
+  return audioBlob
+}
+
+/**
+ * 上传音频文件到服务器
+ * @param audioFile 音频文件
+ * @param uploadUrl 上传地址
+ * @returns Promise<string> 服务器返回的文件ID或URL
+ */
+export const uploadAudioFile = async (
+  audioFile: AudioFile,
+  uploadUrl: string
+): Promise<string> => {
+  const formData = new FormData()
+  formData.append('audio', audioFile.blob, audioFile.name)
+  formData.append('duration', audioFile.duration?.toString() || '0')
+  
+  try {
+    const response = await fetch(uploadUrl, {
+      method: 'POST',
+      body: formData
+    })
+    
+    if (!response.ok) {
+      throw new Error(`上传失败: ${response.statusText}`)
+    }
+    
+    const result = await response.json()
+    return result.fileId || result.url
+  } catch (error) {
+    console.error('音频上传失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 为第三方TTS服务准备音频数据
+ * @param audioBlob 音频Blob
+ * @param serviceType TTS服务类型
+ * @returns Promise<any> 准备好的音频数据
+ */
+export const prepareAudioForTTS = async (
+  audioBlob: Blob,
+  serviceType: 'openai' | 'azure' | 'aws' | 'google'
+): Promise<any> => {
+  const audioFile = await getAudioFileInfo(audioBlob)
+  
+  switch (serviceType) {
+    case 'openai':
+      return {
+        file: audioFile.blob,
+        model: 'whisper-1',
+        language: 'zh',
+        response_format: 'json'
+      }
+    
+    case 'azure':
+      return {
+        audio: audioFile.blob,
+        language: 'zh-CN',
+        format: 'json'
+      }
+    
+    case 'aws':
+      return {
+        Audio: audioFile.blob,
+        LanguageCode: 'zh-CN',
+        MediaFormat: 'webm'
+      }
+    
+    case 'google':
+      return {
+        audio: {
+          content: await blobToBase64(audioFile.blob)
+        },
+        config: {
+          encoding: 'WEBM_OPUS',
+          languageCode: 'zh-CN',
+          sampleRateHertz: 16000
+        }
+      }
+    
+    default:
+      throw new Error(`不支持的TTS服务类型: ${serviceType}`)
+  }
+}
+
+/**
+ * 将Blob转换为Base64字符串
+ * @param blob Blob对象
+ * @returns Promise<string> Base64字符串
+ */
+export const blobToBase64 = (blob: Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsDataURL(blob)
+  })
+}
+
+/**
+ * 验证音频文件格式
+ * @param blob 音频Blob
+ * @returns boolean 是否为有效的音频格式
+ */
+export const validateAudioFormat = (blob: Blob): boolean => {
+  const validTypes = [
+    'audio/webm',
+    'audio/mp3',
+    'audio/wav',
+    'audio/ogg',
+    'audio/mpeg'
+  ]
+  
+  return validTypes.includes(blob.type)
+}
+
+/**
+ * 获取音频录制权限
+ * @returns Promise<boolean> 是否获得权限
+ */
+export const requestAudioPermission = async (): Promise<boolean> => {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    stream.getTracks().forEach(track => track.stop())
+    return true
+  } catch (error) {
+    console.error('获取音频权限失败:', error)
+    return false
+  }
+}
diff --git a/src/views/asistant/components/AudioRecorder.vue b/src/views/asistant/components/AudioRecorder.vue
new file mode 100644
index 0000000..02f15ae
--- /dev/null
+++ b/src/views/asistant/components/AudioRecorder.vue
@@ -0,0 +1,557 @@
+<template>
+  <div class="audio-recorder">
+    <!-- 录制状态显示 -->
+    <div class="recorder-status" v-if="isRecording || hasRecording">
+      <div class="status-info">
+        <div class="status-icon">
+          <div v-if="isRecording" class="recording-dot"></div>
+          <div v-else-if="hasRecording" class="playback-icon">▶</div>
+        </div>
+        <div class="status-text">
+          <span v-if="isRecording">正在录制...</span>
+          <span v-else-if="hasRecording">录制完成</span>
+        </div>
+        <div class="recording-time" v-if="isRecording || hasRecording">
+          {{ formatTime(recordingTime) }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 音频可视化 -->
+    <div class="audio-visualizer" v-if="isRecording || hasRecording">
+      <div class="visualizer-container">
+        <div
+          v-for="(bar, index) in audioBars"
+          :key="index"
+          class="audio-bar"
+          :style="{ height: bar.height + 'px' }"
+        ></div>
+      </div>
+    </div>
+
+    <!-- 控制按钮 -->
+    <div class="recorder-controls">
+      <button
+        v-if="!isRecording && !hasRecording"
+        @click="startRecording"
+        class="record-btn start-btn"
+        :disabled="!isSupported"
+      >
+        <div class="btn-icon">🎤</div>
+        <span>开始录制</span>
+      </button>
+
+      <button
+        v-if="isRecording"
+        @click="stopRecording"
+        class="record-btn stop-btn"
+      >
+        <div class="btn-icon">⏹</div>
+        <span>停止录制</span>
+      </button>
+
+      <div v-if="hasRecording" class="playback-controls">
+        <button @click="playRecording" class="control-btn play-btn" :disabled="isPlaying">
+          <div class="btn-icon">{{ isPlaying ? '⏸' : '▶' }}</div>
+        </button>
+        
+        <button @click="pauseRecording" class="control-btn pause-btn" :disabled="!isPlaying">
+          <div class="btn-icon">⏸</div>
+        </button>
+        
+        <button @click="downloadRecording" class="control-btn download-btn">
+          <div class="btn-icon">💾</div>
+        </button>
+        
+        <button @click="deleteRecording" class="control-btn delete-btn">
+          <div class="btn-icon">🗑</div>
+        </button>
+      </div>
+    </div>
+
+    <!-- 音频播放器 -->
+    <audio
+      ref="audioPlayer"
+      @ended="onPlaybackEnded"
+      @timeupdate="onTimeUpdate"
+      style="display: none"
+    ></audio>
+
+    <!-- 错误提示 -->
+    <div v-if="error" class="error-message">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+
+// 定义事件
+const emit = defineEmits<{
+  'recording-started': []
+  'recording-stopped': [audioBlob: Blob]
+  'recording-deleted': []
+}>()
+
+// 响应式数据
+const isRecording = ref(false)
+const hasRecording = ref(false)
+const isPlaying = ref(false)
+const recordingTime = ref(0)
+const error = ref('')
+const isSupported = ref(false)
+
+// 音频相关
+let mediaRecorder: MediaRecorder | null = null
+let audioChunks: Blob[] = []
+let audioBlob: Blob | null = null
+let recordingStartTime = 0
+let recordingTimer: number | null = null
+
+// 音频可视化
+const audioBars = ref<Array<{ height: number }>>([])
+let animationFrame: number | null = null
+let audioContext: AudioContext | null = null
+let analyser: AnalyserNode | null = null
+let microphone: MediaStreamAudioSourceNode | null = null
+let dataArray: Uint8Array | null = null
+
+// DOM 引用
+const audioPlayer = ref<HTMLAudioElement>()
+
+// 计算属性
+const formatTime = (seconds: number): string => {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+// 检查浏览器支持
+const checkSupport = () => {
+  isSupported.value = !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
+  if (!isSupported.value) {
+    error.value = '您的浏览器不支持音频录制功能'
+  }
+}
+
+// 初始化音频可视化
+const initAudioVisualizer = async () => {
+  if (!isRecording.value) return
+
+  try {
+    audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+    analyser = audioContext.createAnalyser()
+    analyser.fftSize = 256
+
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    microphone = audioContext.createMediaStreamSource(stream)
+    microphone.connect(analyser)
+
+    dataArray = new Uint8Array(analyser.frequencyBinCount)
+    updateVisualizer()
+  } catch (err) {
+    console.error('初始化音频可视化失败:', err)
+  }
+}
+
+// 更新音频可视化
+const updateVisualizer = () => {
+  if (!analyser || !dataArray || !isRecording.value) return
+
+  analyser.getByteFrequencyData(dataArray)
+  
+  // 创建音频条
+  const barCount = 20
+  const newBars: Array<{ height: number }> = []
+  
+  for (let i = 0; i < barCount; i++) {
+    const dataIndex = Math.floor((i / barCount) * dataArray.length)
+    const value = dataArray[dataIndex]
+    const height = Math.max(4, (value / 255) * 60) // 最小高度4px，最大60px
+    newBars.push({ height })
+  }
+  
+  audioBars.value = newBars
+  animationFrame = requestAnimationFrame(updateVisualizer)
+}
+
+// 停止音频可视化
+const stopAudioVisualizer = () => {
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame)
+    animationFrame = null
+  }
+  
+  if (microphone) {
+    microphone.disconnect()
+    microphone = null
+  }
+  
+  if (audioContext) {
+    audioContext.close()
+    audioContext = null
+  }
+  
+  audioBars.value = []
+}
+
+// 开始录制
+const startRecording = async () => {
+  try {
+    error.value = ''
+    
+    const stream = await navigator.mediaDevices.getUserMedia({ 
+      audio: {
+        echoCancellation: true,
+        noiseSuppression: true,
+        autoGainControl: true
+      } 
+    })
+    
+    mediaRecorder = new MediaRecorder(stream, {
+      mimeType: 'audio/webm;codecs=opus'
+    })
+    
+    audioChunks = []
+    
+    mediaRecorder.ondataavailable = (event) => {
+      if (event.data.size > 0) {
+        audioChunks.push(event.data)
+      }
+    }
+    
+    mediaRecorder.onstop = () => {
+      audioBlob = new Blob(audioChunks, { type: 'audio/webm' })
+      hasRecording.value = true
+      emit('recording-stopped', audioBlob)
+      
+      // 停止所有音频流
+      stream.getTracks().forEach(track => track.stop())
+    }
+    
+    mediaRecorder.start(100) // 每100ms收集一次数据
+    isRecording.value = true
+    recordingStartTime = Date.now()
+    recordingTime.value = 0
+    
+    // 开始计时
+    recordingTimer = window.setInterval(() => {
+      recordingTime.value = Math.floor((Date.now() - recordingStartTime) / 1000)
+    }, 1000)
+    
+    // 初始化音频可视化
+    await initAudioVisualizer()
+    
+    emit('recording-started')
+  } catch (err) {
+    console.error('开始录制失败:', err)
+    error.value = '无法访问麦克风，请检查权限设置'
+  }
+}
+
+// 停止录制
+const stopRecording = () => {
+  if (mediaRecorder && isRecording.value) {
+    mediaRecorder.stop()
+    isRecording.value = false
+    
+    if (recordingTimer) {
+      clearInterval(recordingTimer)
+      recordingTimer = null
+    }
+    
+    stopAudioVisualizer()
+  }
+}
+
+// 播放录制
+const playRecording = () => {
+  if (audioBlob && audioPlayer.value) {
+    const audioUrl = URL.createObjectURL(audioBlob)
+    audioPlayer.value.src = audioUrl
+    audioPlayer.value.play()
+    isPlaying.value = true
+  }
+}
+
+// 暂停播放
+const pauseRecording = () => {
+  if (audioPlayer.value) {
+    audioPlayer.value.pause()
+    isPlaying.value = false
+  }
+}
+
+// 播放结束
+const onPlaybackEnded = () => {
+  isPlaying.value = false
+}
+
+// 时间更新
+const onTimeUpdate = () => {
+  // 可以在这里添加播放进度更新逻辑
+}
+
+// 下载录制
+const downloadRecording = () => {
+  if (audioBlob) {
+    const url = URL.createObjectURL(audioBlob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `recording-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.webm`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+}
+
+// 删除录制
+const deleteRecording = () => {
+  hasRecording.value = false
+  audioBlob = null
+  isPlaying.value = false
+  
+  if (audioPlayer.value) {
+    audioPlayer.value.src = ''
+  }
+  
+  emit('recording-deleted')
+}
+
+// 组件挂载
+onMounted(() => {
+  checkSupport()
+})
+
+// 组件卸载
+onUnmounted(() => {
+  if (isRecording.value) {
+    stopRecording()
+  }
+  stopAudioVisualizer()
+  
+  if (recordingTimer) {
+    clearInterval(recordingTimer)
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  startRecording,
+  stopRecording,
+  playRecording,
+  pauseRecording,
+  downloadRecording,
+  deleteRecording,
+  hasRecording: computed(() => hasRecording.value),
+  isRecording: computed(() => isRecording.value),
+  audioBlob: computed(() => audioBlob)
+})
+</script>
+
+<style scoped>
+.audio-recorder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 12px;
+  border: 1px solid #e9ecef;
+}
+
+.recorder-status {
+  width: 100%;
+  max-width: 300px;
+}
+
+.status-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.status-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.recording-dot {
+  width: 12px;
+  height: 12px;
+  background: #ff4757;
+  border-radius: 50%;
+  animation: pulse 1s infinite;
+}
+
+.playback-icon {
+  color: #2ed573;
+  font-size: 16px;
+}
+
+.status-text {
+  flex: 1;
+  font-weight: 500;
+  color: #2c3e50;
+}
+
+.recording-time {
+  font-family: 'Courier New', monospace;
+  font-weight: 600;
+  color: #7f8c8d;
+  background: #ecf0f1;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.audio-visualizer {
+  width: 100%;
+  max-width: 300px;
+  height: 80px;
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.visualizer-container {
+  display: flex;
+  align-items: end;
+  justify-content: center;
+  gap: 2px;
+  height: 100%;
+}
+
+.audio-bar {
+  width: 8px;
+  background: linear-gradient(to top, #ff6b6b, #ffa726);
+  border-radius: 4px;
+  transition: height 0.1s ease;
+  min-height: 4px;
+}
+
+.recorder-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+}
+
+.record-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 140px;
+  justify-content: center;
+}
+
+.start-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.start-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.stop-btn {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
+  color: white;
+}
+
+.stop-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
+}
+
+.record-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.playback-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.control-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.play-btn {
+  background: linear-gradient(135deg, #2ed573 0%, #1e90ff 100%);
+  color: white;
+}
+
+.pause-btn {
+  background: linear-gradient(135deg, #ffa726 0%, #ff6b6b 100%);
+  color: white;
+}
+
+.download-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.delete-btn {
+  background: linear-gradient(135deg, #ff4757 0%, #c44569 100%);
+  color: white;
+}
+
+.control-btn:hover:not(:disabled) {
+  transform: scale(1.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.control-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.btn-icon {
+  font-size: 16px;
+}
+
+.error-message {
+  color: #e74c3c;
+  background: #fdf2f2;
+  border: 1px solid #fecaca;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  text-align: center;
+  max-width: 300px;
+}
+</style>
diff --git a/src/views/asistant/components/InputArea.vue b/src/views/asistant/components/InputArea.vue
index 331045d..19fbdd0 100644
--- a/src/views/asistant/components/InputArea.vue
+++ b/src/views/asistant/components/InputArea.vue
@@ -11,16 +11,13 @@
       </div>
     </div>
     <div class="input-container">
-      <!-- 加号图标 -->
       <div class="icon-wrapper">
         <SvgIcon v-if="!isRecording" name="plus" size="40" />
         <SvgIcon v-else name="pause" size="60" @click="stopRecording" />
       </div>
 
-      <!-- 分隔线 -->
       <div class="divider"></div>
 
-      <!-- 正常状态：显示输入框 -->
       <div class="input-wrapper">
         <textarea
           id="textarea"
@@ -34,18 +31,28 @@
           ref="textareaRef"
         ></textarea>
         <div v-show="isRecording" class="recording-wrapper">
-          <!-- <div class="recording-animation"> -->
           <AudioVisualizer ref="audioVisualizerRef" />
-          <!-- </div> -->
+        </div>
+
+        <div v-show="showAudioRecorder" class="audio-recorder-wrapper">
+          <AudioRecorder
+            ref="audioRecorderRef"
+            @recording-started="onRecordingStarted"
+            @recording-stopped="onRecordingStopped"
+            @recording-deleted="onRecordingDeleted"
+          />
         </div>
       </div>
 
-      <!-- 语音图标 -->
       <div class="icon-wrapper" v-show="!isRecording" @click="handleClickAudio">
         <SvgIcon name="audio" size="52" />
       </div>
 
-      <!-- 发送图标 -->
+      <!-- 音频录制图标 -->
+      <!-- <div class="icon-wrapper" v-show="!isRecording" @click="toggleAudioRecorder">
+        <SvgIcon name="download" size="52" />
+      </div> -->
+
       <div class="icon-wrapper send-icon" @click="handleSend">
         <SvgIcon name="send" size="46" />
       </div>
@@ -56,13 +63,17 @@
 <script setup lang="ts">
 import { ref, onUnmounted, nextTick } from 'vue'
 import AudioVisualizer from './AudioVisualizer.vue'
+import AudioRecorder from './AudioRecorder.vue'
 import { showToast } from 'vant'
+import { getAudioFileInfo, uploadAudioFile, prepareAudioForTTS } from '@/utils/audioUtils'
 
 const emit = defineEmits(['send-message'])
 
 const inputValue = ref<string>('')
 const isRecording = ref<boolean>(false)
+const showAudioRecorder = ref<boolean>(false)
 const audioVisualizerRef = ref<InstanceType<typeof AudioVisualizer> | null>(null)
+const audioRecorderRef = ref<InstanceType<typeof AudioRecorder> | null>(null)
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
 const shortcutList: string[] = [
   'Suggest shoe styles',
@@ -97,14 +108,7 @@ const handleKeyDown = (event: KeyboardEvent): void => {
 const handleInput = (): void => {
   if (textareaRef.value) {
     textareaRef.value.style.height = 'auto'
-
-    // const lineHeight = 4.8
-    // const maxLines = 3
-    // const maxHeight = lineHeight * maxLines
-
     const scrollHeight = textareaRef.value.scrollHeight
-    // const newHeight = Math.min(scrollHeight, maxHeight * 10)
-
     textareaRef.value.style.height = `${scrollHeight}px`
   }
 }
@@ -145,6 +149,48 @@ const handleClickAudio = async (): Promise<void> => {
   }
 }
 
+// 切换音频录制器显示
+const toggleAudioRecorder = () => {
+  showAudioRecorder.value = !showAudioRecorder.value
+  if (showAudioRecorder.value) {
+    showToast('音频录制功能已启用')
+  }
+}
+
+// 音频录制事件处理
+const onRecordingStarted = () => {
+  console.log('音频录制开始')
+  showToast('开始录制音频')
+}
+
+const onRecordingStopped = async (audioBlob: Blob) => {
+  console.log('音频录制结束', audioBlob)
+  showToast('音频录制完成')
+
+  try {
+    // 获取音频文件信息
+    const audioFile = await getAudioFileInfo(audioBlob)
+    console.log('音频文件信息:', audioFile)
+
+    // 为第三方TTS服务准备数据（示例）
+    const ttsData = await prepareAudioForTTS(audioBlob, 'openai')
+    console.log('TTS服务数据:', ttsData)
+
+    // 这里可以将音频文件发送到服务器或进行其他处理
+    // 例如：await uploadAudioFile(audioFile, '/api/upload-audio')
+
+    showToast(`音频文件大小: ${(audioFile.size / 1024).toFixed(2)}KB`)
+  } catch (error) {
+    console.error('处理音频文件失败:', error)
+    showToast('处理音频文件失败')
+  }
+}
+
+const onRecordingDeleted = () => {
+  console.log('音频录制已删除')
+  showToast('音频录制已删除')
+}
+
 // 开始语音识别
 const startRecording = () => {
   if (!speechRecognition) {
@@ -336,6 +382,15 @@ const stopRecording = () => {
   min-height: 4.8rem;
 }
 
+// 音频录制器样式
+.audio-recorder-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-height: 4.8rem;
+  padding: 10px 0;
+}
+
 .recording-animation {
   width: 100%;
   height: 100%;
diff --git a/src/views/login/LoginPage.vue b/src/views/login/LoginPage.vue
index 588ea80..fde2ca5 100644
--- a/src/views/login/LoginPage.vue
+++ b/src/views/login/LoginPage.vue
@@ -15,14 +15,13 @@
       </div>
 
       <div class="login-container">
-        <form @submit.prevent="handleLogin" class="login-form">
+        <form @submit.prevent="handleLogin" class="login-form" novalidate>
           <div class="input-group">
             <input
               type="email"
               v-model="formData.email"
               placeholder="Email"
               class="input-field"
-              required
             />
           </div>
           <div class="input-group pwd">
@@ -31,7 +30,6 @@
               v-model="formData.password"
               placeholder="Your Password"
               class="input-field"
-              required
             />
           </div>
 
@@ -69,11 +67,7 @@ const formData = reactive<Record<string, string>>({
   password: ''
 })
 
-// 表单验证状态
-const formErrors = reactive<Record<string, string>>({
-  email: '',
-  password: ''
-})
+// 移除表单错误状态管理，改用 toast 提示
 
 // 加载状态
 const isLoading = ref(false)
@@ -90,31 +84,25 @@ const validatePassword = (password: string) => {
 
 // 验证表单
 const validateForm = () => {
-  let isValid = true
-
-  // 重置错误信息
-  formErrors.email = ''
-  formErrors.password = ''
-
   // 验证邮箱
   if (!formData.email) {
-    formErrors.email = '请输入邮箱地址'
-    isValid = false
+    showToast('请输入邮箱地址')
+    return false
   } else if (!validateEmail(formData.email)) {
-    formErrors.email = '请输入有效的邮箱地址'
-    isValid = false
+    showToast('请输入有效的邮箱地址')
+    return false
   }
 
   // 验证密码
   if (!formData.password) {
-    formErrors.password = '请输入密码'
-    isValid = false
+    showToast('请输入密码')
+    return false
   } else if (!validatePassword(formData.password)) {
-    formErrors.password = '密码至少需要6位字符'
-    isValid = false
+    showToast('密码至少需要6位字符')
+    return false
   }
 
-  return isValid
+  return true
 }
 
 // 返回上一页
@@ -125,7 +113,6 @@ const goBack = () => {
 // 处理登录
 const handleLogin = async () => {
   if (!validateForm()) {
-    showToast('请检查输入信息')
     return
   }
 
@@ -179,22 +166,7 @@ const handleSignup = () => {
   router.push('/signup')
 }
 
-// 实时验证输入
-const handleEmailInput = () => {
-  if (formData.email && !validateEmail(formData.email)) {
-    formErrors.email = '请输入有效的邮箱地址'
-  } else {
-    formErrors.email = ''
-  }
-}
-
-const handlePasswordInput = () => {
-  if (formData.password && !validatePassword(formData.password)) {
-    formErrors.password = '密码至少需要6位字符'
-  } else {
-    formErrors.password = ''
-  }
-}
+// 移除实时验证输入的错误显示逻辑，改用表单提交时统一验证
 </script>
 
 <style scoped lang="less">