feat: 备用音频录制组件&登录页取消原生form验证

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%;