From d56ee78dc354318e9fd8355f78a0901907fa9f8e Mon Sep 17 00:00:00 2001
From: Lexcubia <lexcubia@gmail.com>
Date: Sun, 27 Apr 2025 15:28:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(vioce):=20=E6=B7=BB=E5=8A=A0=E8=AF=AD?=
 =?UTF-8?q?=E9=9F=B3=E8=BE=93=E5=85=A5=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=9B=B8=E5=85=B3=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 VoiceInputSettings 组件用于语音输入设置
- 在 SettingsPanel 中集成语音输入设置选项
- 修改 ChatInterface 以支持语音输入功能
- 优化 WebSocketClient 发送数据逻辑
- 更新相关组件以适应新的语音输入功能
---
 .cursor/rules/cusorrules.mdc                  |  77 ++++++++++++
 src/components/settings/SettingsPanel.vue     |   3 +
 .../settings/VoiceInputSettings.vue           |  44 +++++++
 src/store/chat.js                             |   4 +-
 src/store/settings.js                         |  24 +++-
 src/utils/websocket.js                        |  21 +++-
 src/views/chat/ChatInterface.vue              | 107 ++++++++++++-----
 src/views/chat/components/ChatInput.vue       |  24 ++--
 src/views/chat/components/VoiceInput.vue      | 110 ++++++++++--------
 src/views/settings/SettingsPanel.vue          |  60 ++++++++++
 yarn.lock                                     |  93 +++++++++++++++
 11 files changed, 479 insertions(+), 88 deletions(-)
 create mode 100644 .cursor/rules/cusorrules.mdc
 create mode 100644 src/components/settings/VoiceInputSettings.vue
 create mode 100644 src/views/settings/SettingsPanel.vue

diff --git a/.cursor/rules/cusorrules.mdc b/.cursor/rules/cusorrules.mdc
new file mode 100644
index 0000000..cece049
--- /dev/null
+++ b/.cursor/rules/cusorrules.mdc
@@ -0,0 +1,77 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+### 技术栈
+- Javascript
+- Vue3
+- vite
+- axios
+- element
+- pinia
+- mockjs
+- sass
+
+### 文件目录
+
+- src/
+  - assets/          # 静态资源文件
+  - components/      # 公共组件
+  - views/          # 页面视图组件
+  - router/         # 路由配置
+  - store/          # Pinia状态管理
+  - api/            # API接口封装
+  - utils/          # 工具函数
+  - styles/         # 全局样式
+  - mock/           # Mock数据
+  - App.vue         # 根组件
+  - main.js         # 入口文件
+
+### 开发规范
+
+1. 命名规范
+   - 组件名：大驼峰命名法，如 `UserProfile.vue`
+   - 变量名：小驼峰命名法，如 `userInfo`
+   - 常量名：全大写，下划线分隔，如 `API_BASE_URL`
+   - 文件夹名：小写，中划线分隔，如 `user-center`
+
+2. 代码风格
+   - 使用 ESLint + Prettier 进行代码格式化
+   - 组件内使用 `<script setup>` 语法
+   - 使用 TypeScript 进行类型检查
+   - 遵循 Vue3 组合式 API 规范
+
+3. 组件开发
+   - 组件必须包含 name 属性
+   - Props 必须定义类型和默认值
+   - 使用 defineEmits 定义事件
+   - 复杂组件需要添加注释说明
+
+4. 状态管理
+   - 使用 Pinia 进行状态管理
+   - Store 按功能模块划分
+   - 避免在组件中直接修改 store 状态
+
+5. 路由规范
+   - 路由配置统一在 router 目录下管理
+   - 使用路由懒加载
+   - 路由命名遵循小驼峰命名法
+
+6. API 规范
+   - API 请求统一在 api 目录下管理
+   - 使用 axios 进行请求封装
+   - 统一错误处理
+   - 请求参数和响应数据需要定义类型
+
+7. 样式规范
+   - 使用 SCSS 预处理器
+   - 遵循 BEM 命名规范
+   - 全局样式统一在 styles 目录下管理
+   - 组件样式使用 scoped
+
+8. 提交规范
+   - 遵循 Conventional Commits 规范
+   - 提交信息必须清晰描述改动内容
+
+   - 禁止提交大文件 
\ No newline at end of file
diff --git a/src/components/settings/SettingsPanel.vue b/src/components/settings/SettingsPanel.vue
index bee7994..ddaa176 100644
--- a/src/components/settings/SettingsPanel.vue
+++ b/src/components/settings/SettingsPanel.vue
@@ -5,6 +5,8 @@
     <ThemeSettings />
     <el-divider />
     <InterfaceSettings />
+    <el-divider />
+    <VoiceInputSettings />
   </div>
 </template>
 
@@ -13,6 +15,7 @@ import { ElDivider } from 'element-plus';
 import DisplayModeSettings from './DisplayModeSettings.vue';
 import ThemeSettings from './ThemeSettings.vue';
 import InterfaceSettings from './InterfaceSettings.vue';
+import VoiceInputSettings from './VoiceInputSettings.vue';
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/settings/VoiceInputSettings.vue b/src/components/settings/VoiceInputSettings.vue
new file mode 100644
index 0000000..50b4292
--- /dev/null
+++ b/src/components/settings/VoiceInputSettings.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="voice-input-settings">
+    <h4>语音输入设置</h4>
+    <div class="settings-item">
+      <span class="settings-label">语音转文字后直接发送</span>
+      <el-switch
+        v-model="voiceInputSettings.sendDirectly"
+        @change="updateSettings"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useSettingsStore } from '@/store/settings'
+
+const settingsStore = useSettingsStore()
+
+const voiceInputSettings = computed({
+  get: () => settingsStore.voiceInputSettings,
+  set: (value) => settingsStore.updateVoiceInputSettings(value)
+})
+
+const updateSettings = () => {
+  settingsStore.updateVoiceInputSettings(voiceInputSettings.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.voice-input-settings {
+  .settings-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    
+    .settings-label {
+      font-size: 14px;
+      color: var(--el-text-color-regular);
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/store/chat.js b/src/store/chat.js
index b4ac1fb..7442e9b 100644
--- a/src/store/chat.js
+++ b/src/store/chat.js
@@ -31,7 +31,7 @@ const chatModes = {
 **车牌号**: 闽C12345
 **车辆信息**：拥有一辆行驶4年的大众途观L，购买价格约25万，主要用于商务出行及家庭使用。
 **投保信息**：在其他保司购买交强险及商业险（三者险、车损险），还有1个月到期。有过一次轻微追尾事故，已通过保司处理。王先生对成本控制非常敏感，但也能意识到保险的重要性。他希望得到保障全面、价格合理的产品和优质的服务。`,
-    chatBackground: '现在你将扮演坐席专员，与系统扮演的客户针对报价中的各类异议开展对练，着重训练处理“报价中异议”的能力。按照“保全保足”原则给出险种推荐方案。',
+    chatBackground: '现在你将扮演坐席专员，与系统扮演的客户针对报价中的各类异议开展对练，着重训练处理"报价中异议"的能力。按照"保全保足"原则给出险种推荐方案。',
   },
   post_quote_objection: { 
     name: '报价后异议', 
@@ -45,7 +45,7 @@ const chatModes = {
 **车牌号**: 粤B56789
 **车辆信息**：拥有一辆行驶4年多的本田思域，1.5T，CVT燃动版，购买价格约15万，用于日常通勤及周末短途出行。
 **投保信息**：在其他保司购买交强险及商业险（三者险、车损险、不计免赔险、车上人员责任险），还有2个月到期。无事故记录，仅有两次违章停车记录。张女士注重性价比和服务质量，希望保险的保障全面、价格合理、服务贴心。`,
-    chatBackground: '现在你将扮演坐席专员，与系统扮演的客户针对报价后的各类异议开展对练，着重训练处理“报价后异议”的能力。按照“保全保足”原则给出险种推荐方案。',
+    chatBackground: '现在你将扮演坐席专员，与系统扮演的客户针对报价后的各类异议开展对练，着重训练处理"报价后异议"的能力。按照"保全保足"原则给出险种推荐方案。',
   }
 }
 // 返回示例
diff --git a/src/store/settings.js b/src/store/settings.js
index 282719a..b0440d8 100644
--- a/src/store/settings.js
+++ b/src/store/settings.js
@@ -29,12 +29,20 @@ export const useSettingsStore = defineStore('settings', {
     theme: 'default',
     // 动画效果开关
     animationsEnabled: true,
+    // 语音输入设置
+    voiceInputSettings: {
+      sendDirectly: true, // 语音转文字后直接发送
+    },
   }),
 
   persist: {
-    key: 'settings',
-    // Persist displayMode and theme
-    paths: ['sidebarCollapsed', 'displayMode', 'theme', 'animationsEnabled']
+    enabled: true,
+    strategies: [
+      {
+        key: 'settings',
+        storage: localStorage,
+      },
+    ],
   },
 
   actions: {
@@ -109,7 +117,15 @@ export const useSettingsStore = defineStore('settings', {
         applyDisplayMode(this.displayMode);
         this.toggleAnimations(this.animationsEnabled); // Fallback
       }
-    }
+    },
+
+    // 更新语音输入设置
+    updateVoiceInputSettings(settings) {
+      this.voiceInputSettings = {
+        ...this.voiceInputSettings,
+        ...settings
+      }
+    },
   }
 })
 
diff --git a/src/utils/websocket.js b/src/utils/websocket.js
index a751ca9..2d82c49 100644
--- a/src/utils/websocket.js
+++ b/src/utils/websocket.js
@@ -67,10 +67,27 @@ class WebSocketClient {
     }
 
     try {
-      if (typeof data === 'object') {
+      // 如果是ArrayBuffer或TypedArray，直接发送二进制
+      if (data instanceof ArrayBuffer) {
+        this.socket.send(data);
+      } else if (
+        data instanceof Int8Array ||
+        data instanceof Uint8Array ||
+        data instanceof Int16Array ||
+        data instanceof Uint16Array ||
+        data instanceof Int32Array ||
+        data instanceof Uint32Array ||
+        data instanceof Float32Array ||
+        data instanceof Float64Array
+      ) {
+        this.socket.send(data.buffer);
+      } else if (typeof data === 'object') {
+        // 仅普通对象才转JSON
         data = JSON.stringify(data);
+        this.socket.send(data);
+      } else {
+        this.socket.send(data);
       }
-      this.socket.send(data);
     } catch (error) {
       console.error('发送数据失败:', error);
     }
diff --git a/src/views/chat/ChatInterface.vue b/src/views/chat/ChatInterface.vue
index ad9fadc..26edad9 100644
--- a/src/views/chat/ChatInterface.vue
+++ b/src/views/chat/ChatInterface.vue
@@ -58,9 +58,11 @@
                 <!-- <div v-if="message.createdAt" class="message-timestamp">
                   {{ formatTimestamp(message.createdAtTimestamp) }}
                 </div> -->
-                <div class="message-text" v-html="message.kehu"></div>
-                <div v-if="message.respondingType === 'kehu'" class="typing-indicator">
-                  <span></span><span></span><span></span>
+                <div class="message-text">
+                  <span v-html="message.kehu"></span>
+                  <span v-if="message.respondingType === 'kehu'" class="typing-indicator">
+                    <span></span><span></span><span></span>
+                  </span>
                 </div>
               </div>
             </div>
@@ -90,7 +92,8 @@
       <VoiceInput 
         v-else 
         :is-disabled="isInputDisabled" 
-        @sendText="handleSendMessage"
+        @sendText="handleVoiceSendText"
+        @fillInput="handleVoiceFillInput"
       />
     </div>
     <!-- 总结弹窗 -->
@@ -110,13 +113,12 @@
 <script setup>
 import { ref, onMounted, onUnmounted, nextTick, watch, computed, defineOptions } from 'vue'
 import { marked } from 'marked'
-import * as echarts from 'echarts'
 import { useChatStore } from '@/store/chat'
 import ChatHeader from '@/views/chat/components/ChatHeader.vue'
 import ChatInput from '@/views/chat/components/ChatInput.vue'
 import VoiceInput from '@/views/chat/components/VoiceInput.vue'
-import { ElTag, ElButton, ElInput, ElAvatar, ElIcon } from 'element-plus'
-import { Plus, CaretBottom, CaretRight, Microphone, ChatDotSquare } from '@element-plus/icons-vue'
+import { ElTag, ElButton, ElAvatar, ElIcon } from 'element-plus'
+import { CaretBottom, CaretRight, Microphone, ChatDotSquare } from '@element-plus/icons-vue'
 import userAvatarUrl from '@/assets/user.png';
 import customAvatarUrl from '@/assets/custom.png';
 
@@ -125,25 +127,24 @@ defineOptions({
 })
 
 const chatStore = useChatStore()
-const messageInput = ref('')
 const messageInputRef = ref(null)
 const chatInputRef = ref(null)
 const chatContainer = ref(null)
-const scoreChart = ref(null)
 const maxRows = 6
 const isUserScrolling = ref(false)
 const shouldAutoScroll = ref(true)
 const lastScrollTop = ref(0)
 const lastScrollHeight = ref(0)
 const isSummaryCollapsed = ref(false)
-const showBackgroundDialog = ref(false)
 const showBackground = ref(false)
 const isVoiceInputMode = ref(false)
 
-// 使用计算属性获取当前会话的消息
+// 计算属性：获取当前会话消息
 const currentMessages = computed(() => {
   return chatStore.currentMessages
 })
+
+// 计算属性：判断发送按钮是否禁用
 const sendButtonsDisabled = computed(() => {
   if (!chatStore.currentConversation) return false
   const currentConversation = chatStore.currentConversation
@@ -151,10 +152,10 @@ const sendButtonsDisabled = computed(() => {
   return ['finished', 'typing'].includes(currentConversation.conversationStatus)
 })
 
-// 获取最后一条包含dafen字段的消息
+// 计算属性：获取最后一条包含评分字段的消息
 const lastMessageWithDafen = computed(() => {
   if (!chatStore.currentMessages.length) return null
-  // 从后往前查找第一条包含dafen字段的消息
+  // 从后往前查找第一条包含评分字段的消息
   for (let i = chatStore.currentMessages.length - 1; i >= 0; i--) {
     if (chatStore.currentMessages[i].dafen) {
       return chatStore.currentMessages[i]
@@ -179,15 +180,15 @@ const isNearBottom = (threshold = 100) => {
   return container.scrollHeight - container.scrollTop - container.clientHeight < threshold
 }
 
-// 监听滚动事件
+// 处理滚动事件
 const handleScroll = () => {
   const container = chatContainer.value
   if (!container) return
 
-  // 检测是否是用户主动滚动
+  // 检测用户是否主动滚动
   if (Math.abs(container.scrollTop - lastScrollTop.value) > 10) {
     isUserScrolling.value = true
-    // 根据是否接近底部来决定是否恢复自动滚动
+    // 根据是否接近底部决定是否恢复自动滚动
     shouldAutoScroll.value = isNearBottom(50)
   }
 
@@ -195,16 +196,16 @@ const handleScroll = () => {
   lastScrollHeight.value = container.scrollHeight
 }
 
-// 滚动到底部的方法
+// 滚动到底部
 const scrollToBottom = (force = false) => {
   nextTick(() => {
     const container = chatContainer.value
     if (!container) return
 
-    // 在以下情况下滚动到底部：
+    // 在以下情况滚动到底部：
     // 1. 强制滚动
     // 2. 允许自动滚动且没有用户滚动操作
-    // 3. 用户已经接近底部
+    // 3. 用户已接近底部
     if (force || (shouldAutoScroll.value && !isUserScrolling.value) || isNearBottom(50)) {
       container.scrollTop = container.scrollHeight
       lastScrollTop.value = container.scrollTop
@@ -221,21 +222,21 @@ watch(() => chatStore.messageCache, (newCache, oldCache) => {
   }
 }, { deep: true })
 
-// 监听当前会话的消息
+// 监听当前会话消息
 watch(() => currentMessages.value, (newMessages, oldMessages) => {
   if (!oldMessages || newMessages.length > oldMessages.length) {
     scrollToBottom(shouldAutoScroll.value)
     return
   }
 
-  // 检查最后一条消息的respondingType
+  // 检查最后一条消息的类型
   const lastMessage = newMessages[newMessages.length - 1]
   if (lastMessage && ['kehu', 'pingfen', 'zongjie'].includes(lastMessage.respondingType)) {
     scrollToBottom(true) // 特定类型消息强制滚动
   }
 }, { deep: true })
 
-// 监听消息的respondingType变化
+// 监听消息类型变化
 watch(() => currentMessages.value?.map(msg => msg.respondingType), (newTypes, oldTypes) => {
   if (!newTypes || !oldTypes) return
   const lastType = newTypes[newTypes.length - 1]
@@ -244,7 +245,7 @@ watch(() => currentMessages.value?.map(msg => msg.respondingType), (newTypes, ol
   }
 }, { deep: true })
 
-// Unified message sending function
+// 统一消息发送函数
 const handleSendMessage = (message) => {
   if (!message || !message.trim() || isInputDisabled.value) return;
   console.log("ChatInterface sending message:", message);
@@ -252,7 +253,7 @@ const handleSendMessage = (message) => {
   shouldAutoScroll.value = true; // 发送消息时恢复自动滚动
   scrollToBottom(true);
   
-  // If coming from voice input, switch back to text mode and focus
+  // 从语音输入切换回文本模式并聚焦
   if (isVoiceInputMode.value) {
     isVoiceInputMode.value = false;
     nextTick(() => {
@@ -261,12 +262,40 @@ const handleSendMessage = (message) => {
   }
 };
 
+// 处理语音直接发送
+function handleVoiceSendText(text) {
+  if (!text || !text.trim() || isInputDisabled.value) return;
+  chatStore.sendMessage(text);
+  shouldAutoScroll.value = true;
+  scrollToBottom(true);
+}
+
+// 处理语音转文字填入输入框
+function handleVoiceFillInput(text) {
+  if (!text || !text.trim()) return;
+  isVoiceInputMode.value = false; // 切换到文本输入
+  nextTick(() => {
+    if (chatInputRef.value) {
+      // 确保输入框存在并设置值
+      chatInputRef.value.setValue?.(text) || (chatInputRef.value.value = text);
+      // 聚焦输入框
+      chatInputRef.value.focus?.();
+      // 触发输入事件以确保值更新
+      const input = chatInputRef.value.$el?.querySelector('textarea');
+      if (input) {
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    }
+  });
+}
+
 // 格式化聊天内容
 const formatMarkdown = (text, tagType) => {
   if (!text) return ''
   return marked.parse(text)
 }
 
+// 调整文本区域高度
 const adjustTextareaHeight = () => {
   const textarea = messageInputRef.value
   textarea.style.height = 'auto'
@@ -274,10 +303,12 @@ const adjustTextareaHeight = () => {
   textarea.style.height = newHeight + 'px'
 }
 
+// 切换总结面板
 const toggleSummary = () => {
   isSummaryCollapsed.value = !isSummaryCollapsed.value
 }
 
+// 格式化时间戳
 const formatTimestamp = (timestamp) => {
   console.log('%c timestamp:', 'color: #2196F3; font-weight: bold', timestamp)
   if (!timestamp) return ''
@@ -293,18 +324,22 @@ const formatTimestamp = (timestamp) => {
   })
 }
 
+// 计算属性：判断输入框是否禁用
 const isInputDisabled = computed(() => {
-  return chatStore.currentConversation?.conversationStatus === 'finished'
+  // 会话结束 或 正在回复/生成时禁用输入
+  const status = chatStore.currentConversation?.conversationStatus
+  return status !== 'active'
 })
 
+// 切换背景显示
 const toggleBackground = () => {
   showBackground.value = !showBackground.value
 }
 
-// Method to switch input mode
+// 切换输入模式
 const switchInputMode = () => {
   isVoiceInputMode.value = !isVoiceInputMode.value;
-  // Focus the text input when switching back
+  // 切换回文本模式时聚焦输入框
   if (!isVoiceInputMode.value) {
     nextTick(() => {
       chatInputRef.value?.focus();
@@ -570,6 +605,7 @@ html.dark .background-section .background-content {
       border: 1px solid var(--el-border-color-lighter);
       display: inline-block;
       max-width: 100%;
+      min-height: 24px;
 
       &::before {
         content: '';
@@ -850,6 +886,7 @@ html.dark .background-section .background-content {
     border: 1px solid var(--el-border-color-lighter);
     display: inline-block;
     max-width: 100%;
+    min-height: 40px;
 
     &::before {
       content: '';
@@ -876,4 +913,20 @@ html.dark .background-section .background-content {
     color: var(--el-text-color-secondary);
   }
 }
+
+.typing-indicator span {
+  width: 4px;
+  height: 4px;
+  background: var(--el-color-primary);
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 1px;
+  animation: bounce 1.4s infinite ease-in-out;
+}
+.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0.8); }
+  40% { transform: scale(1.2); }
+}
 </style> 
\ No newline at end of file
diff --git a/src/views/chat/components/ChatInput.vue b/src/views/chat/components/ChatInput.vue
index 24eafe3..85dafd7 100644
--- a/src/views/chat/components/ChatInput.vue
+++ b/src/views/chat/components/ChatInput.vue
@@ -9,12 +9,12 @@
       @keyup.enter.exact.prevent="handleSend"
       resize="none"
       ref="messageInputRef"
-      :disabled="isInputDisabled"
+      :disabled="isDisabled"
     />
     <el-button 
       class="send-btn" 
       @click="handleSend" 
-      :disabled="isInputDisabled || !messageInput.trim()"
+      :disabled="isDisabled || !messageInput.trim()"
       type="primary"
     >
       发送
@@ -27,7 +27,7 @@ import { ref } from 'vue'
 import { ElInput, ElButton } from 'element-plus'
 
 const props = defineProps({
-  isInputDisabled: {
+  isDisabled: {
     type: Boolean,
     default: false
   }
@@ -40,15 +40,25 @@ const messageInputRef = ref(null)
 const maxRows = 6
 
 const handleSend = () => {
-  if (!messageInput.value.trim() || props.isInputDisabled) return
+  if (!messageInput.value.trim() || props.isDisabled) return
   emit('send', messageInput.value)
   messageInput.value = ''
-  messageInputRef.value.style.height = 'auto'
+//   messageInputRef.value.style.height = 'auto'
 }
 
-// Expose focus method
+// Expose methods
 defineExpose({
-  focus: () => messageInputRef.value?.focus()
+  focus: () => messageInputRef.value?.focus(),
+  setValue: (value) => {
+    if (messageInputRef.value) {
+      messageInput.value = value;
+      // 触发输入事件以确保值更新
+      const input = messageInputRef.value.$el?.querySelector('textarea');
+      if (input) {
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    }
+  }
 })
 
 const adjustTextareaHeight = () => {
diff --git a/src/views/chat/components/VoiceInput.vue b/src/views/chat/components/VoiceInput.vue
index c3589f1..d176842 100644
--- a/src/views/chat/components/VoiceInput.vue
+++ b/src/views/chat/components/VoiceInput.vue
@@ -37,10 +37,10 @@
              <span class="modal-btn-label record-label">{{ isRecording ? '完成' : ' ' }}</span>
              <el-button 
                 class="modal-btn confirm-btn" 
-                :type="isRecording ? 'danger' : 'primary'" 
+                type="primary" 
                 circle 
                 @click="confirmVoiceInput"
-                :icon="isRecording ? ChatDotSquare : Microphone" 
+                :icon="isRecording ? Check : Microphone" 
               >
               </el-button>
           </div>
@@ -68,12 +68,13 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { ElButton, ElMessage, ElIcon } from 'element-plus'
-import { Microphone, ChatDotSquare, Close } from '@element-plus/icons-vue'
+import { Microphone, Check, Close } from '@element-plus/icons-vue'
 import Recorder from 'recorder-core'
 import 'recorder-core/src/engine/pcm'
 import 'recorder-core/src/engine/wav'
 import WebSocketClient from '@/utils/websocket'
 import AudioWaveform from '@/components/AudioWaveform.vue'
+import { useSettingsStore } from '@/store/settings'
 
 // Props definition
 const props = defineProps({
@@ -84,7 +85,10 @@ const props = defineProps({
 })
 
 // Emits definition
-const emit = defineEmits(['sendText', 'sendVoice'])
+const emit = defineEmits(['sendText', 'fillInput'])
+
+// 获取设置
+const settingsStore = useSettingsStore()
 
 // Refs related to voice input
 const isRecording = ref(false)
@@ -97,10 +101,12 @@ let recorder = null
 let websocketClient = null
 let timer = null
 let audioChunks = []
+let sampleBuf = new Int16Array(0)
+const chunk_size = 960 // 16kHz下60ms一帧
 
 // WebSocket configuration
 const wsConfig = {
-  url: 'wss://160.202.224.52:10096/',
+  url: 'wss://fire.lexcubia.com:31003/ws',
   initConfig: {
     mode: '2pass',
     wav_format: 'pcm',
@@ -147,34 +153,42 @@ const openVoiceModal = async () => {
 }
 
 const closeVoiceModal = () => {
-  showVoiceModal.value = false
+  // 1. 关闭WebSocket连接
+  if (websocketClient) {
+    websocketClient.disconnect()
+    websocketClient = null
+  }
+
+  // 2. 停止录音并释放资源
   if (isRecording.value) {
     stopRecording()
     isRecording.value = false
   }
-  clearInterval(timer)
   
-  // 释放麦克风资源
   if (recorder) {
     recorder.close(() => {
-      // 确保所有音频轨道都被停止
       if (recorder.stream) {
         recorder.stream.getTracks().forEach(track => track.stop())
       }
       recorder = null
     })
   }
-  
-  // 关闭WebSocket连接
-  if (websocketClient) {
-    websocketClient.disconnect()
-    websocketClient = null
+
+  // 3. 清理定时器
+  if (timer) {
+    clearInterval(timer)
+    timer = null
   }
-  
-  // 清理音频数据
+
+  // 4. 清理数据
   audioChunks = []
   realTimeText.value = ''
   remainingTime.value = 30
+  sampleBuf = new Int16Array(0)
+  pcmData.value = []
+
+  // 5. 最后关闭弹窗
+  showVoiceModal.value = false
 }
 
 const cancelVoiceInputFromModal = () => {
@@ -185,35 +199,32 @@ const confirmVoiceInput = async () => {
   if (isRecording.value) {
     stopRecording()
     isRecording.value = false
-    clearInterval(timer)
     
-    if (audioChunks.length === 0) {
-      ElMessage.warning('录音时间太短')
-      closeVoiceModal()
-      return
+    if (realTimeText.value) {
+      if (settingsStore.voiceInputSettings.sendDirectly) {
+        emit('sendText', realTimeText.value)
+      } else {
+        emit('fillInput', realTimeText.value)
+      }
+    } else {
+      ElMessage.warning('没有识别到文字')
     }
-
-    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' })
-    emit('sendVoice', audioBlob)
-    closeVoiceModal()
   }
+  closeVoiceModal()
 }
 
 const sendAsText = () => {
   if (isRecording.value) {
     stopRecording()
     isRecording.value = false
-    clearInterval(timer)
     
     if (realTimeText.value) {
       emit('sendText', realTimeText.value)
     } else {
       ElMessage.warning('没有识别到文字')
     }
-    closeVoiceModal()
-  } else {
-    closeVoiceModal()
   }
+  closeVoiceModal()
 }
 
 const startRecording = (stream) => {
@@ -223,17 +234,26 @@ const startRecording = (stream) => {
     sampleRate: 16000, // 采样率
     bitRate: 16, // 比特率
     onProcess: (buffers, powerLevel, duration, sampleRate) => {
-      const pcm = buffers[buffers.length - 1]
-      if (pcm && pcm.length > 0) {
-        pcmData.value = Array.from(pcm)
-      }
-      // WebSocket 发送逻辑保留
-      if (websocketClient && websocketClient.socket.readyState === WebSocket.OPEN) {
-        const pcmDataSend = buffers[buffers.length - 1]
-        websocketClient.send({
-          is_speaking: true,
-          audio_data: pcmDataSend
-        })
+      const pcm48k = buffers[buffers.length - 1]
+      if (pcm48k && pcm48k.length > 0) {
+        // 1. 重采样为16kHz
+        const array_48k = [pcm48k]
+        const data_16k = Recorder.SampleData(array_48k, sampleRate, 16000).data
+        // 2. 拼接到sampleBuf
+        const merged = new Int16Array(sampleBuf.length + data_16k.length)
+        merged.set(sampleBuf)
+        merged.set(data_16k, sampleBuf.length)
+        sampleBuf = merged
+        // 3. 分片发送
+        while(sampleBuf.length >= chunk_size) {
+          const sendBuf = sampleBuf.slice(0, chunk_size)
+          sampleBuf = sampleBuf.slice(chunk_size)
+          if (websocketClient && websocketClient.socket.readyState === WebSocket.OPEN) {
+            websocketClient.send(sendBuf.buffer)
+          }
+        }
+        // 4. 波形显示
+        pcmData.value = Array.from(data_16k)
       }
     }
   })
@@ -249,7 +269,10 @@ const startRecording = (stream) => {
 const stopRecording = () => {
   if (recorder) {
     recorder.stop((blob, duration) => {
-      // Convert PCM to WAV before saving
+      if (duration < 500) { // 小于0.5秒
+        ElMessage.warning('录音时间太短')
+        return
+      }
       Recorder.pcm2wav({
         blob: blob,
         sampleRate: 16000,
@@ -494,11 +517,6 @@ onUnmounted(() => {
   100% { transform: rotate(360deg); }
 }
 
-// Dark mode styles for VoiceInput elements
-html.dark .voice-bubble {
-    // Adjust bubble color for dark mode if needed
-}
-
 html.dark .modal-btn-label {
     color: #707070;
 }
diff --git a/src/views/settings/SettingsPanel.vue b/src/views/settings/SettingsPanel.vue
new file mode 100644
index 0000000..21aeeb5
--- /dev/null
+++ b/src/views/settings/SettingsPanel.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="settings-panel">
+    <!-- 其他设置项 -->
+    
+    <!-- 语音输入设置 -->
+    <div class="settings-section">
+      <h3 class="section-title">语音输入设置</h3>
+      <div class="settings-item">
+        <span class="settings-label">语音转文字后直接发送</span>
+        <el-switch
+          v-model="voiceInputSettings.sendDirectly"
+          @change="updateVoiceInputSettings"
+        />
+      </div>
+    </div>
+    
+    <!-- 其他设置项 -->
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useSettingsStore } from '@/store/settings'
+
+const settingsStore = useSettingsStore()
+
+// 语音输入设置
+const voiceInputSettings = computed({
+  get: () => settingsStore.voiceInputSettings,
+  set: (value) => settingsStore.updateVoiceInputSettings(value)
+})
+
+// ... 其他代码 ...
+</script>
+
+<style lang="scss" scoped>
+.settings-section {
+  margin-bottom: 24px;
+  
+  .section-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: var(--el-text-color-primary);
+  }
+  
+  .settings-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--el-border-color-light);
+    
+    .settings-label {
+      font-size: 14px;
+      color: var(--el-text-color-regular);
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 7ffd8c3..10a2a08 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1342,11 +1342,34 @@ browserslist@^4.23.1, browserslist@^4.24.0, browserslist@^4.24.4:
     node-releases "^2.0.19"
     update-browserslist-db "^1.1.1"
 
+buffer-alloc-unsafe@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
+
+buffer-alloc@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
+  dependencies:
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
+
 buffer-builder@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmmirror.com/buffer-builder/-/buffer-builder-0.2.0.tgz#3322cd307d8296dab1f604618593b261a3fade8f"
   integrity sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==
 
+buffer-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+  integrity sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ==
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
 bundle-name@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmmirror.com/bundle-name/-/bundle-name-4.1.0.tgz#f3b96b34160d6431a19d7688135af7cfb8797889"
@@ -1448,6 +1471,11 @@ copy-anything@^3.0.2:
   dependencies:
     is-what "^4.1.8"
 
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
 cross-spawn@^7.0.3:
   version "7.0.6"
   resolved "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
@@ -1503,6 +1531,13 @@ de-indent@^1.0.2:
   resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
+debug@2, debug@^2.2.0:
+  version "2.6.9"
+  resolved "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
 debug@^4.1.0, debug@^4.3.1, debug@^4.3.7, debug@^4.4.0:
   version "4.4.0"
   resolved "https://registry.npmmirror.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
@@ -1930,6 +1965,11 @@ immutable@^5.0.2:
   resolved "https://registry.npmmirror.com/immutable/-/immutable-5.1.1.tgz#d4cb552686f34b076b3dcf23c4384c04424d8354"
   integrity sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==
 
+inherits@~2.0.1:
+  version "2.0.4"
+  resolved "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
 is-core-module@^2.16.0:
   version "2.16.1"
   resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
@@ -1993,6 +2033,11 @@ is-wsl@^3.1.0:
   dependencies:
     is-inside-container "^1.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmmirror.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -2159,6 +2204,11 @@ mrmime@^2.0.0:
   resolved "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.1.tgz#bc3e87f7987853a54c9850eeb1f1078cd44adddc"
   integrity sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==
 
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
 ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
@@ -2273,6 +2323,11 @@ pathe@^2.0.1, pathe@^2.0.2, pathe@^2.0.3:
   resolved "https://registry.npmmirror.com/pathe/-/pathe-2.0.3.tgz#3ecbec55421685b70a9da872b2cff3e1cbed1716"
   integrity sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==
 
+pcm@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/pcm/-/pcm-1.0.3.tgz#8e9508ab321f93ca61cd4ab44cc846530a185f24"
+  integrity sha512-N/qULxlCd++KuA4gAi9+wG9HpPmSOHowYj6KumrGsaoDVrcswut6K/GomqoFcbVXSnAnAf2SevVn1ehTQgFdHA==
+
 perfect-debounce@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz#9c2e8bc30b169cc984a58b7d5b28049839591d2a"
@@ -2658,11 +2713,26 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
+readable-stream@^1.1.14:
+  version "1.1.14"
+  resolved "https://registry.npmmirror.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  integrity sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 readdirp@^4.0.1:
   version "4.1.2"
   resolved "https://registry.npmmirror.com/readdirp/-/readdirp-4.1.2.tgz#eb85801435fbf2a7ee58f19e0921b068fc69948d"
   integrity sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==
 
+recorder-core@^1.3.25011100:
+  version "1.3.25011100"
+  resolved "https://registry.npmmirror.com/recorder-core/-/recorder-core-1.3.25011100.tgz#128ee11f2d24547b82605a5383274226b3a20a65"
+  integrity sha512-trXsCH0zurhoizT4Z22C0OsM0SDOW+2OvtgRxeLQFwxoFeqFjDjYZsbZEZUiKMJLhBvamI4K7Ic+qZ2LBo74TA==
+
 resolve@^1.1.7:
   version "1.22.10"
   resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
@@ -2937,6 +3007,18 @@ std-env@^3.8.1:
   resolved "https://registry.npmmirror.com/std-env/-/std-env-3.9.0.tgz#1a6f7243b339dca4c9fd55e1c7504c77ef23e8f1"
   integrity sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==
 
+stream-parser@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.npmmirror.com/stream-parser/-/stream-parser-0.3.1.tgz#1618548694420021a1182ff0af1911c129761773"
+  integrity sha512-bJ/HgKq41nlKvlhccD5kaCr/P+Hu0wPNKPJOH7en+YrJu/9EgqUF+88w5Jb6KNcjOFMhfX4B2asfeAtIGuHObQ==
+  dependencies:
+    debug "2"
+
+string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.npmmirror.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==
+
 strip-final-newline@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-4.0.0.tgz#35a369ec2ac43df356e3edd5dcebb6429aa1fa5c"
@@ -3224,6 +3306,17 @@ vue@^3.5.13:
     "@vue/server-renderer" "3.5.13"
     "@vue/shared" "3.5.13"
 
+wav@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/wav/-/wav-1.0.2.tgz#bdbf3fa0d9b4519e9dfd2f603299ead0a2f22060"
+  integrity sha512-viHtz3cDd/Tcr/HbNqzQCofKdF6kWUymH9LGDdskfWFoIy/HJ+RTihgjEcHfnsy1PO4e9B+y4HwgTwMrByquhg==
+  dependencies:
+    buffer-alloc "^1.1.0"
+    buffer-from "^1.0.0"
+    debug "^2.2.0"
+    readable-stream "^1.1.14"
+    stream-parser "^0.3.1"
+
 webpack-virtual-modules@^0.6.2:
   version "0.6.2"
   resolved "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"