feat(voice): 实现语音输入功能

- 添加 WebSocket 通用工具类
- 集成 recorder-core 库实现音频录制
- 添加音频波形显示和实时文本显示功能
- 实现语音数据实时发送到 WebSocket 服务器
- 优化语音输入界面和交互逻辑

package.json

@@ -42,10 +42,13 @@
     "echarts": "^5.6.0",
     "element-plus": "^2.9.7",
     "marked": "^15.0.8",
+    "pcm": "^1.0.3",
     "pinia": "^3.0.2",
     "pinia-plugin-persistedstate": "^4.2.0",
+    "recorder-core": "^1.3.25011100",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "wav": "^1.0.2"
   },
   "devDependencies": {
     "@types/node": "^20.11.19",

src/components/AudioWaveform.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="audio-waveform">
+    <canvas ref="canvas" width="288" height="48"></canvas>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+const props = defineProps({
+  pcmData: {
+    type: Array,
+    default: () => []
+  }
+})
+const canvas = ref(null)
+const BAR_COUNT = 48 // 波形条数量
+const latestPcm = ref([])
+let animationId = null
+const currentHeights = ref(Array(BAR_COUNT).fill(4)) // 当前每根条的高度（用于平滑动画）
+let targetHeights = Array(BAR_COUNT).fill(4) // 目标高度
+
+const BAR_WIDTH = 3 // 波形条宽度
+const BAR_GAP = 3   // 波形条间距
+const CANVAS_WIDTH = BAR_COUNT * (BAR_WIDTH + BAR_GAP) // 画布宽度
+const CANVAS_HEIGHT = 48 // 画布高度
+const RADIUS = BAR_WIDTH / 2 // 圆角半径
+
+// 计算每根波形条的目标高度（核心算法）
+const calcTargetHeights = (pcm) => {
+  if (!pcm || pcm.length === 0) return Array(BAR_COUNT).fill(4)
+  const step = Math.floor(pcm.length / BAR_COUNT)
+  const maxBarHeight = 22 // 单边最大高度
+  const THRESHOLD = 8 // 门限，低于此值视为静止
+  let maxRms = 1
+  const rmsArr = []
+  // 计算每根条的RMS能量，并找出最大值
+  for (let i = 0; i < BAR_COUNT; i++) {
+    let sum = 0
+    for (let j = 0; j < step; j++) {
+      const idx = i * step + j
+      sum += (pcm[idx] || 0) * (pcm[idx] || 0)
+    }
+    const rms = Math.sqrt(sum / step)
+    rmsArr[i] = rms < THRESHOLD ? 0 : rms - THRESHOLD // 门限抑制底噪
+    maxRms = Math.max(maxRms, rmsArr[i])
+  }
+  const norm = Math.max(32, maxRms) // 归一化因子，防止全静止
+  const arr = []
+  for (let i = 0; i < BAR_COUNT; i++) {
+    // 非线性提升对比度，指数越大，只有大信号才有明显变化
+    const ratio = Math.pow(rmsArr[i] / norm, 1.2)
+    arr[i] = 4 + Math.min(1, ratio) * maxBarHeight // 4为最小高度
+  }
+  return arr
+}
+
+// 绘制波形（每帧调用）
+const drawWave = () => {
+  if (!canvas.value) return
+  const ctx = canvas.value.getContext('2d')
+  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
+  const centerY = canvas.value.height / 2
+  for (let i = 0; i < BAR_COUNT; i++) {
+    // 平滑过渡动画：当前高度逐步靠近目标高度
+    currentHeights.value[i] = currentHeights.value[i] * 0.7 + targetHeights[i] * 0.3
+    const barHeight = currentHeights.value[i]
+    const x = i * (BAR_WIDTH + BAR_GAP) + BAR_GAP / 2
+    ctx.fillStyle = 'rgba(255,255,255,0.6)'
+    // 画中间矩形
+    ctx.fillRect(x, centerY - barHeight + RADIUS, BAR_WIDTH, barHeight * 2 - RADIUS * 2)
+    // 画顶部半圆
+    ctx.beginPath()
+    ctx.arc(x + BAR_WIDTH / 2, centerY - barHeight + RADIUS, RADIUS, Math.PI, 0)
+    ctx.closePath()
+    ctx.fill()
+    // 画底部半圆
+    ctx.beginPath()
+    ctx.arc(x + BAR_WIDTH / 2, centerY + barHeight - RADIUS, RADIUS, 0, Math.PI)
+    ctx.closePath()
+    ctx.fill()
+  }
+}
+
+// 动画主循环，保证高帧率刷新
+const animate = () => {
+  drawWave()
+  animationId = requestAnimationFrame(animate)
+}
+
+// 监听PCM数据变化，更新目标高度
+watch(() => props.pcmData, (val) => {
+  latestPcm.value = val
+  targetHeights = calcTargetHeights(val)
+})
+
+// 组件挂载时启动动画
+onMounted(() => {
+  latestPcm.value = props.pcmData
+  targetHeights = calcTargetHeights(props.pcmData)
+  // 设置canvas宽高
+  if (canvas.value) {
+    canvas.value.width = CANVAS_WIDTH
+    canvas.value.height = CANVAS_HEIGHT
+  }
+  animate()
+})
+
+// 组件卸载时停止动画
+onBeforeUnmount(() => {
+  if (animationId) cancelAnimationFrame(animationId)
+})
+</script>
+
+<style scoped>
+.audio-waveform {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.audio-waveform canvas {
+  width: 288px;
+  height: 48px;
+  display: block;
+  background: transparent;
+}
+</style> 

src/components/chat/HistoryButton.vue

@@ -1,196 +0,0 @@
-<template>
-  <el-dropdown trigger="hover" @command="handleHistorySelect">
-    <el-button 
-      :class="['history-btn', { 'icon-only': iconOnly }]" 
-      :icon="Clock" 
-      text 
-      bg
-    >
-      <span v-if="!iconOnly">历史会话</span>
-    </el-button>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <template v-if="currentModeHistory.length">
-          <el-dropdown-item 
-            v-for="chat in currentModeHistory" 
-            :key="chat.conversationId"
-            :command="chat.conversationId"
-            class="history-item"
-          >
-            <div class="history-content">
-              <span class="history-title">{{ formatChatTitle(chat) }}</span>
-              <el-button
-                class="delete-btn"
-                :icon="Delete"
-                link
-                @click.stop="handleDelete(chat.conversationId)"
-              />
-            </div>
-          </el-dropdown-item>
-        </template>
-        <el-dropdown-item v-else disabled>暂无历史会话</el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { useChatStore } from '@/store/chat'
-import { Clock, Delete } from '@element-plus/icons-vue'
-import { ElMessageBox } from 'element-plus'
-
-const props = defineProps({
-  iconOnly: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const chatStore = useChatStore()
-
-const currentModeHistory = computed(() => {
-  return chatStore.conversations.filter(chat => chat.mode === chatStore.currentMode)
-})
-
-const formatChatTitle = (chat) => {
-  if (chat.messages && chat.messages.length > 0) {
-    const firstMessage = chat.messages[0].question
-    return firstMessage.length > 20 ? firstMessage.substring(0, 20) + '...' : firstMessage
-  }
-  return `会话 ${chat.conversationId.substring(0, 8)}`
-}
-
-const handleHistorySelect = (conversationId) => {
-  chatStore.switchConversation(conversationId)
-}
-
-const handleDelete = async (conversationId) => {
-  try {
-    await ElMessageBox.confirm(
-      '确定要删除这个会话吗？删除后无法恢复。',
-      '删除确认',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-        confirmButtonClass: 'el-button--danger'
-      }
-    )
-    chatStore.deleteConversation(conversationId)
-  } catch {
-    // 用户取消删除
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.history-btn {
-  height: 32px;
-  padding: 4px 12px;
-  color: inherit;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  border: none !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  outline: none !important;
-
-  &.icon-only {
-    width: 32px;
-    padding: 0;
-  }
-
-  &:hover,
-  &:focus {
-    color: var(--el-color-primary) !important;
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    outline: none !important;
-  }
-
-  :deep(.el-icon) {
-    font-size: 16px;
-  }
-}
-
-:deep(.el-dropdown__trigger) {
-  .el-button {
-    border: none !important;
-    background: transparent !important;
-    box-shadow: none !important;
-    outline: none !important;
-
-    &:hover,
-    &:focus {
-      border: none !important;
-      background: transparent !important;
-      box-shadow: none !important;
-      outline: none !important;
-      color: var(--el-color-primary) !important;
-    }
-  }
-}
-
-:deep(.el-dropdown-menu__item) {
-  font-size: 13px;
-  padding: 8px 16px;
-  line-height: 1.4;
-  max-width: 300px;
-  overflow-x: hidden;
-
-  &:hover .delete-btn {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-:deep(.el-dropdown-menu) {
-  min-width: 200px;
-  max-width: 300px;
-}
-
-.history-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  position: relative;
-  min-width: 0;
-}
-
-.history-title {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-right: 24px;
-  min-width: 0;
-}
-
-.delete-btn {
-  position: absolute;
-  right: -8px;
-  opacity: 0;
-  transform: translateX(10px);
-  transition: all 0.3s ease;
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  color: #f56c6c;
-  flex-shrink: 0;
-  
-  &:hover {
-    color: #f56c6c;
-    background-color: rgba(245, 108, 108, 0.1);
-  }
-  
-  :deep(.el-icon) {
-    font-size: 14px;
-  }
-}
-</style> 

src/store/chat.js

@@ -301,9 +301,9 @@ export const useChatStore = defineStore('chat', {
 
     startNewChat() {
       // 如果当前有活跃会话，将其标记为完成
-      if (this.conversationId && this.messages[this.conversationId]) {
+      // if (this.conversationId && this.messages[this.conversationId]) {
-        this.messages[this.conversationId].conversationStatus = 'finished'
+      //   this.messages[this.conversationId].conversationStatus = 'finished'
-      }
+      // }
       
       // 只清除当前会话相关的消息缓存
       if (this.conversationId) {

src/utils/websocket.js

@@ -0,0 +1,128 @@
+/**
+ * WebSocket 通用工具类
+ * @author Lexcubia
+ * @date 2024-04-25
+ */
+
+class WebSocketClient {
+  constructor(config) {
+    this.socket = null;
+    this.msgHandle = config.msgHandle;
+    this.stateHandle = config.stateHandle;
+    this.config = config;
+  }
+
+  /**
+   * 建立 WebSocket 连接
+   * @param {string} url - WebSocket 服务器地址
+   * @returns {boolean} - 连接是否成功
+   */
+  connect(url) {
+    if (!url) {
+      console.error('WebSocket URL 不能为空');
+      return false;
+    }
+
+    if (!url.match(/wss?:\S*/)) {
+      console.error('WebSocket URL 格式不正确');
+      return false;
+    }
+
+    if (!('WebSocket' in window)) {
+      console.error('当前浏览器不支持 WebSocket');
+      return false;
+    }
+
+    try {
+      this.socket = new WebSocket(url);
+      this.socket.onopen = this._onOpen.bind(this);
+      this.socket.onclose = this._onClose.bind(this);
+      this.socket.onmessage = this._onMessage.bind(this);
+      this.socket.onerror = this._onError.bind(this);
+      return true;
+    } catch (error) {
+      console.error('WebSocket 连接失败:', error);
+      return false;
+    }
+  }
+
+  /**
+   * 关闭 WebSocket 连接
+   */
+  disconnect() {
+    if (this.socket) {
+      this.socket.close();
+      this.socket = null;
+    }
+  }
+
+  /**
+   * 发送数据
+   * @param {any} data - 要发送的数据
+   */
+  send(data) {
+    if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
+      console.error('WebSocket 未连接');
+      return;
+    }
+
+    try {
+      if (typeof data === 'object') {
+        data = JSON.stringify(data);
+      }
+      this.socket.send(data);
+    } catch (error) {
+      console.error('发送数据失败:', error);
+    }
+  }
+
+  /**
+   * 连接建立时的回调
+   * @private
+   */
+  _onOpen() {
+    console.log('WebSocket 连接成功');
+    this.stateHandle(0);
+    
+    // 发送初始化配置
+    const initConfig = {
+      chunk_size: [5, 10, 5],
+      wav_name: 'h5',
+      is_speaking: true,
+      chunk_interval: 10,
+      itn: this.config.itn || false,
+      mode: this.config.mode || '2pass',
+      ...this.config.initConfig
+    };
+
+    this.send(initConfig);
+  }
+
+  /**
+   * 连接关闭时的回调
+   * @private
+   */
+  _onClose() {
+    console.log('WebSocket 连接关闭');
+    this.stateHandle(1);
+  }
+
+  /**
+   * 收到消息时的回调
+   * @private
+   */
+  _onMessage(event) {
+    this.msgHandle(event);
+  }
+
+  /**
+   * 发生错误时的回调
+   * @private
+   */
+  _onError(error) {
+    console.error('WebSocket 错误:', error);
+    this.stateHandle(2);
+  }
+}
+
+export default WebSocketClient; 

src/views/chat/ChatInterface.vue

@@ -72,33 +72,26 @@
         <el-tag size="large" type="info" class="end-tag">会话已结束</el-tag>
       </div>
     </div>
-    <div class="input-area">
+    <!-- Input Area Wrapper -->
+    <div class="input-area-wrapper">
       <el-button 
-        class="new-chat-btn" 
+        class="mode-switch-btn" 
-        @click="chatStore.startNewChat" 
+        :icon="isVoiceInputMode ? ChatDotSquare : Microphone" 
-        :disabled="newChatButtonsDisabled"
+        circle 
-      >
+        @click="switchInputMode"
-        新会话
+        :disabled="isInputDisabled" 
-      </el-button>
+      />
-      <el-input
+      <ChatInput 
-        v-model="messageInput"
+        v-if="!isVoiceInputMode"
-        type="textarea"
+        :is-disabled="isInputDisabled"
-        :rows="1"
+        @send="handleSendMessage" 
-        :autosize="{ minRows: 1, maxRows: 6 }"
+        ref="chatInputRef" 
-        placeholder="请输入消息..."
+      />
-        @keyup.enter.exact.prevent="sendMessage"
+      <VoiceInput 
-        resize="none"
+        v-else 
-        ref="messageInputRef"
+        :is-disabled="isInputDisabled" 
-        :disabled="isInputDisabled"
+        @sendText="handleSendMessage"
       />
-      <el-button 
-        class="send-btn" 
-        @click="sendMessage" 
-        :disabled="isInputDisabled || !messageInput.trim()"
-        type="primary"
-      >
-        发送
-      </el-button>
     </div>
     <!-- 总结弹窗 -->
     <div v-if="lastMessageWithDafen" class="summary-panel" :class="{ 'summary-panel-collapsed': isSummaryCollapsed }">
@@ -119,9 +112,11 @@ import { ref, onMounted, onUnmounted, nextTick, watch, computed, defineOptions }
 import { marked } from 'marked'
 import * as echarts from 'echarts'
 import { useChatStore } from '@/store/chat'
-import ChatHeader from '@/views/chat/ChatHeader.vue'
+import ChatHeader from '@/views/chat/components/ChatHeader.vue'
-import { ElTag, ElButton, ElInput, ElAvatar } from 'element-plus'
+import ChatInput from '@/views/chat/components/ChatInput.vue'
-import { Plus, CaretBottom, CaretRight } from '@element-plus/icons-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 userAvatarUrl from '@/assets/user.png';
 import customAvatarUrl from '@/assets/custom.png';
 
@@ -132,6 +127,7 @@ 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
@@ -142,6 +138,7 @@ const lastScrollHeight = ref(0)
 const isSummaryCollapsed = ref(false)
 const showBackgroundDialog = ref(false)
 const showBackground = ref(false)
+const isVoiceInputMode = ref(false)
 
 // 使用计算属性获取当前会话的消息
 const currentMessages = computed(() => {
@@ -153,12 +150,6 @@ const sendButtonsDisabled = computed(() => {
   if (!currentConversation.conversationStatus) return false
   return ['finished', 'typing'].includes(currentConversation.conversationStatus)
 })
-const newChatButtonsDisabled = computed(() => {
-  if (!chatStore.currentConversation) return false
-  const currentConversation = chatStore.currentConversation
-  if (!currentConversation.conversationStatus) return false
-  return ['typing'].includes(currentConversation.conversationStatus)
-})
 
 // 获取最后一条包含dafen字段的消息
 const lastMessageWithDafen = computed(() => {
@@ -253,15 +244,22 @@ watch(() => currentMessages.value?.map(msg => msg.respondingType), (newTypes, ol
   }
 }, { deep: true })
 
-// 发送消息时滚动到底部
+// Unified message sending function
-const sendMessage = () => {
+const handleSendMessage = (message) => {
-  if (!messageInput.value.trim() && !sendButtonsDisabled.value) return
+  if (!message || !message.trim() || isInputDisabled.value) return;
-  chatStore.sendMessage(messageInput.value)
+  console.log("ChatInterface sending message:", message);
-  messageInput.value = ''
+  chatStore.sendMessage(message);
-  messageInputRef.value.style.height = 'auto'
+  shouldAutoScroll.value = true; // 发送消息时恢复自动滚动
-  shouldAutoScroll.value = true // 发送消息时恢复自动滚动
+  scrollToBottom(true);
-  scrollToBottom(true)
+  
-}
+  // If coming from voice input, switch back to text mode and focus
+  if (isVoiceInputMode.value) {
+    isVoiceInputMode.value = false;
+    nextTick(() => {
+      chatInputRef.value?.focus();
+    });
+  }
+};
 
 // 格式化聊天内容
 const formatMarkdown = (text, tagType) => {
@@ -303,6 +301,17 @@ 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();
+    });
+  }
+};
+
 onMounted(() => {
   if (chatContainer.value) {
     chatContainer.value.addEventListener('scroll', handleScroll)
@@ -310,7 +319,6 @@ onMounted(() => {
     scrollToBottom(true)
     shouldAutoScroll.value = true
   }
-
 })
 
 onUnmounted(() => {
@@ -334,7 +342,7 @@ onUnmounted(() => {
 
 // Dark mode override for chat container
 html.dark .chat-container {
-  background-color: var(--el-color-primary-dark-1); // Use the new lighter dark shade
+  background-color: var(--el-color-primary-dark-1);
 }
 
 .chat-background {
@@ -683,270 +691,27 @@ html.dark .background-section .background-content {
   }
 }
 
-.input-area {
+.input-area-wrapper {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
   display: flex;
   align-items: flex-end;
-  gap: 12px;
+  & > :deep(.chat-input-area),
-  padding: 16px;
+  & > :deep(div > .voice-trigger-btn) {
-  background: var(--el-color-primary-light-8);
-  border-top: 1px solid var(--el-border-color-light);
-  z-index: 3;
-  :deep(.el-textarea) {
     flex: 1;
-
+    min-width: 0;
-    .el-textarea__inner {
-      min-height: 40px !important;
-      padding: 8px 12px;
-      font-size: 14px;
-      line-height: 1.5;
-      border-radius: 4px;
-      border-color: var(--el-border-color);
-      background-color: var(--el-bg-color);
-      transition: all 0.3s;
-      resize: none;
-
-      &:hover {
-        border-color: var(--el-border-color-hover);
-      }
-
-      &:focus {
-        border-color: var(--el-color-primary);
-        box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
-      }
-
-      &:disabled {
-        background-color: var(--el-fill-color-light);
-        border-color: var(--el-border-color-lighter);
-        color: var(--el-text-color-placeholder);
-        cursor: not-allowed;
-      }
-
-      &::placeholder {
-        color: var(--el-text-color-placeholder);
-      }
-    }
   }
+  gap: 8px;
+  padding: 16px 20px;
+  border-top: 1px solid var(--el-border-color-light);
+  background-color: var(--el-bg-color);
+  position: relative;
+  z-index: 1;
 }
 
-// Dark mode override for input area
+.mode-switch-btn {
-html.dark .input-area {
+  width: 40px;
-  background: var(--el-color-primary-dark-1); // Dark 1 (Lighter dark)
-  border-top-color: var(--el-border-color-dark); // Use standard dark border
-}
-
-:deep(.el-button) {
   height: 40px;
-  padding: 0 20px;
+  font-size: 20px;
-  font-size: 14px;
+  flex-shrink: 0; // Prevent shrinking
-  border-radius: 4px;
-  font-weight: 500;
-  
-  &.is-disabled {
-    background-color: var(--el-fill-color-light) !important;
-    border-color: var(--el-border-color) !important;
-    color: var(--el-text-color-placeholder) !important;
-    cursor: not-allowed;
-  }
-
-  &.new-chat-btn {
-    --el-button-bg-color: var(--el-fill-color-light);
-    --el-button-border-color: var(--el-border-color);
-    --el-button-text-color: var(--el-text-color-regular);
-    --el-button-hover-bg-color: var(--el-fill-color);
-    --el-button-hover-border-color: var(--el-border-color-hover);
-    --el-button-hover-text-color: var(--el-text-color-primary);
-    --el-button-active-bg-color: var(--el-fill-color);
-    --el-button-active-border-color: var(--el-border-color-hover);
-    --el-button-active-text-color: var(--el-text-color-primary);
-    padding: 0 16px;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    height: 40px;
-    transition: all 0.3s;
-    
-    &:hover {
-      background-color: var(--el-button-hover-bg-color);
-      border-color: var(--el-button-hover-border-color);
-      color: var(--el-button-hover-text-color);
-    }
-    
-    &:active {
-      background-color: var(--el-button-active-bg-color);
-      border-color: var(--el-button-active-border-color);
-      color: var(--el-button-active-text-color);
-    }
-    
-    &.is-disabled {
-      background-color: var(--el-fill-color-light) !important;
-      border-color: var(--el-border-color) !important;
-      color: var(--el-text-color-placeholder) !important;
-      cursor: not-allowed;
-    }
-  }
-}
-
-:deep(.el-button.new-chat-btn > span) {
-  margin-left: 0 !important;
-}
-
-:deep(.el-button--primary) {
-  --el-button-bg-color: var(--el-color-primary);
-  --el-button-border-color: var(--el-color-primary);
-  --el-button-hover-bg-color: var(--el-color-primary-light-3);
-  --el-button-hover-border-color: var(--el-color-primary-light-3);
-  --el-button-active-bg-color: var(--el-color-primary-light-3);
-  --el-button-active-border-color: var(--el-color-primary-light-3);
-}
-
-.new-chat-btn {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  white-space: nowrap;
-}
-
-.send-btn {
-  min-width: 80px;
-}
-
-/* 移动端适配 */
-@media screen and (max-width: 768px) {
-  .input-area {
-    padding: 12px;
-    gap: 8px;
-    
-    .new-chat-btn {
-      padding: 0 12px;
-      min-width: 70px;
-    }
-  }
-
-  :deep(.el-button) {
-    padding: 0 12px;
-
-    &.new-chat-btn {
-      .el-icon {
-        display: none;
-      }
-    }
-  }
-
-  .new-chat-btn {
-    padding: 0 12px;
-  }
-
-  .send-btn {
-    min-width: 60px;
-  }
-}
-
-/* 统一的滚动条样式 */
-.chat-messages,
-.summary-content,
-.evaluation-content,
-.background-content {
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-    display: block;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-    margin: 4px 0;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--el-border-color-darker);
-    border-radius: 4px;
-    border: 2px solid transparent;
-    background-clip: padding-box;
-
-    &:hover {
-      background: var(--el-border-color);
-    }
-  }
-}
-
-/* 添加媒体查询以适应不同屏幕 */
-@media screen and (max-width: 768px) {
-  .message-content {
-    max-width: 85%;
-  }
-  
-  .message .message-wrapper.user {
-    padding-left: 10%;
-  }
-}
-
-@media screen and (max-width: 480px) {
-  .message-content {
-    max-width: 90%;
-  }
-  
-  .message .message-wrapper.user {
-    padding-left: 5%;
-  }
-}
-
-.user {
-  .message-text {
-    border-color: transparent;
-
-    &::before {
-      border-right-color: var(--el-color-primary);
-      right: 100%;
-      transform: scaleX(-1);
-    }
-  }
-}
-
-.assistant {
-  .message-text {
-    background-color: var(--el-bg-color);
-    border-color: var(--el-border-color-lighter);
-
-    &::before {
-      border-right-color: var(--el-bg-color);
-      right: 100%;
-    }
-  }
-}
-
-.typing {
-  &::after {
-    display: none;
-  }
-}
-
-.typing-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  height: 20px;
-  
-  span {
-    width: 4px;
-    height: 4px;
-    background: var(--el-text-color-placeholder);
-    border-radius: 50%;
-    animation: bounce 1.4s infinite ease-in-out;
-    
-    &:nth-child(1) { animation-delay: -0.32s; }
-    &:nth-child(2) { animation-delay: -0.16s; }
-  }
-}
-
-@keyframes bounce {
-  0%, 80%, 100% { transform: scale(0); }
-  40% { transform: scale(1); }
 }
 
 .summary-panel {

src/views/chat/ChatModeSelector.vue

@@ -23,12 +23,19 @@
         :collapse="settingsStore.sidebarCollapsed"
         @select="selectMode"
       >
+        <el-menu-item class="mode-item new-chat-item" @click="handleNewChat">
+          <el-icon><Plus /></el-icon>
+          <span class="mode-name">新建会话</span>
+        </el-menu-item>
+
         <el-menu-item v-for="mode in chatModes" :key="mode.id" :index="mode.id" class="mode-item">
           <el-icon><component :is="mode.icon" /></el-icon>
           <span class="mode-name">{{ mode.name }}</span>
         </el-menu-item>
-      </el-menu>
 
+       
+      </el-menu>
+      <ChatHistoryList />
       <!-- Settings Button Popover -->
       <el-popover
         placement="top-end"
@@ -55,9 +62,10 @@
 import { useChatStore } from '@/store/chat'
 import { useSettingsStore } from '@/store/settings'
 import { computed, ref, onMounted, onUnmounted } from 'vue'
-import { ChatDotRound, ChatLineRound, ChatRound, Service, Setting } from '@element-plus/icons-vue'
+import { ChatDotRound, ChatLineRound, ChatRound, Service, Setting, Clock, Delete, Plus } from '@element-plus/icons-vue'
-import { ElMenu, ElMenuItem, ElIcon, ElPopover } from 'element-plus'
+import { ElMenu, ElMenuItem, ElIcon, ElPopover, ElMessageBox } from 'element-plus'
 import SettingsPanel from '@/components/settings/SettingsPanel.vue'
+import ChatHistoryList from '@/views/chat/components/ChatHistoryList.vue'
 
 const chatStore = useChatStore()
 const settingsStore = useSettingsStore()
@@ -77,8 +85,44 @@ const currentModeHistory = computed(() => {
   return chatStore.conversations.filter(chat => chat.mode === chatStore.currentMode)
 })
 
-const selectMode = (modeId) => {
+const formatChatTitle = (chat) => {
-  chatStore.setCurrentMode(modeId)
+  if (chat.messages && chat.messages.length > 0) {
+    const firstMessage = chat.messages[0].question
+    return firstMessage.length > 20 ? firstMessage.substring(0, 20) + '...' : firstMessage
+  }
+  return `会话 ${chat.conversationId.substring(0, 8)}`
+}
+
+const handleDelete = async (conversationId) => {
+  try {
+    await ElMessageBox.confirm(
+      '确定要删除这个会话吗？删除后无法恢复。',
+      '删除确认',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        confirmButtonClass: 'el-button--danger'
+      }
+    )
+    chatStore.deleteConversation(conversationId)
+  } catch {
+    // 用户取消删除
+  }
+}
+
+const selectMode = (id) => {
+  // 检查是否是会话ID
+  const isConversationId = chatStore.conversations.some(chat => chat.conversationId === id)
+  if (isConversationId) {
+    chatStore.switchConversation(id)
+  } else {
+    chatStore.setCurrentMode(id)
+  }
+}
+
+const handleNewChat = () => {
+  chatStore.startNewChat()
 }
 
 const isMobile = ref(false)
@@ -127,6 +171,7 @@ onUnmounted(() => {
   padding: 0 16px;
   display: flex;
   align-items: center;
+  flex-shrink: 0;
   
   &-title {
     display: flex;
@@ -151,63 +196,155 @@ onUnmounted(() => {
   background-color: transparent;
   border: none;
   padding: 8px;
-  flex-grow: 1;
+  overflow: visible;
-  overflow-y: auto;
+}
+
+.new-chat-item {
+  margin-bottom: 12px !important;
+  border: 1px solid var(--el-border-color-lighter);
+  background-color: var(--el-fill-color-light) !important;
+
+  &:hover {
+    box-shadow: var(--el-box-shadow-light);
+    color: var(--el-color-primary);
+  }
+}
+
+:deep(.mode-item) {
+  height: 44px;
+  line-height: 44px;
+  color: var(--el-text-color-regular);
+  border-radius: 8px;
+  margin-bottom: 4px;
+  padding: 0 12px !important;
+  overflow: hidden;
+
+  .el-icon {
+    margin: 0;
+    font-size: 18px;
+    width: 18px;
+  }
   
-  :deep(.el-menu-item) {
+  &.is-active {
-    height: 44px;
+    background-image: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
-    line-height: 44px;
+    color: var(--el-color-white);
-    color: var(--el-text-color-regular);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    border-radius: 8px;
-    margin-bottom: 4px;
-    padding: 0 12px !important;
-    overflow: hidden;
 
     .el-icon {
-      margin-right: 12px;
-      font-size: 18px;
-      width: 18px;
-    }
-    
-    &.is-active {
-      background-image: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
       color: var(--el-color-white);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-
-      .el-icon {
-        color: var(--el-color-white);
-      }
     }
+  }
+  
+  &:not(.is-active):hover {
+    background-color: var(--el-fill-color-light);
+    color: var(--el-color-primary);
+  }
+  
+  .mode-name {
+    margin-left: 12px;
+    font-size: 14px;
+    white-space: nowrap;
+    opacity: 1;
+    transform: translateX(0);
     
-    &:not(.is-active):hover {
+    body:not(.no-animations) & {
-      background-color: var(--el-color-primary-light-9);
+       transition: opacity 0.3s ease-in-out;
-      color: var(--el-color-primary);
-    }
-    
-    .mode-name {
-      font-size: 14px;
-      margin-left: 12px;
-      white-space: nowrap;
-      opacity: 1;
-      transform: translateX(0);
-      
-      body:not(.no-animations) & {
-         transition: opacity 0.3s ease-in-out;
-      }
     }
   }
 }
 
-.mode-setting-btn {
+.mode-selector.collapsed {
-  position: absolute;
+  .mode-header {
-  right: 8px;
+    padding: 0;
-  top: 50%;
+    display: flex;
-  transform: translateY(-50%);
+    align-items: center;
-  color: var(--el-text-color-secondary);
+    justify-content: center;
+    height: 60px;
+    
+    .mode-header-collapsed-logo {
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+
+    .mode-header-icon.collapsed {
+      height: 32px;
+      filter: drop-shadow(0 0 0.75em rgba(var(--el-color-primary-rgb), 0.6));
+      vertical-align: middle;
+    }
+  }
   
+  .mode-menu {
+    padding: 8px 12px;
+  }
+
+  :deep(.el-menu-item) {
+    width: 40px;
+    height: 40px;
+    padding: 0 !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 4px auto;
+
+    .el-icon {
+      margin-right: 0;
+    }
+
+    .mode-name {
+      display: none;
+    }
+  }
+
+  .settings-button {
+    width: 40px;
+    height: 40px;
+    .mode-name,
+    .button-text {
+      opacity: 0;
+    }
+  }
+}
+
+.sidebar-footer {
+  height: 48px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: auto;
+  flex-shrink: 0;
+}
+
+.settings-button {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  width: 100%;
+  padding: 0 12px;
+  color: var(--el-text-color-regular);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+
+  .el-icon {
+    margin: 0;
+    font-size: 18px;
+    width: 18px;
+  }
+
   &:hover {
+    background-color: var(--el-fill-color-light);
     color: var(--el-color-primary);
   }
+
+  .button-text {
+    margin-left: 12px;
+    font-size: 14px;
+    white-space: nowrap;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+  }
 }
 
 /* 移动端样式 */
@@ -273,7 +410,7 @@ onUnmounted(() => {
     margin: 0 auto 4px auto;
 
     .el-icon {
-      margin-right: 0;
+      margin: 0;
     }
 
     .mode-name {
@@ -291,330 +428,57 @@ onUnmounted(() => {
   }
 }
 
-.sidebar-footer {
+.history-content {
-  height: 48px;
-  padding: 0 12px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
-}
+  gap: 8px;
-
-.settings-button {
-  display: flex;
-  align-items: center;
-  height: 40px;
   width: 100%;
-  padding: 0 12px;
-  color: var(--el-text-color-regular);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-
-  .el-icon {
-    margin-right: 12px;
-    font-size: 18px;
-    width: 18px;
-  }
-
-  &:hover {
-    background-color: var(--el-fill-color-light);
-    color: var(--el-color-primary);
-  }
-
-  .button-text {
-    font-size: 14px;
-    white-space: nowrap;
-    opacity: 1;
-    transition: opacity 0.3s ease-in-out;
-  }
-}
-
-.mode-selector.collapsed {
-  .sidebar-footer {
-    padding: 0;
-  }
-
-  .settings-button {
-    justify-content: center;
-    width: 40px;
-    padding: 0;
-
-    .el-icon {
-      margin-right: 0;
-    }
-
-    .button-text {
-      opacity: 0;
-      pointer-events: none;
-    }
-    
-    &:hover {
-      background-color: var(--el-fill-color-light);
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.settings-popover-popper {
-  min-width: 350px !important;
-  padding: 0 !important;
-  border: none !important;
-  box-shadow: var(--el-box-shadow-light);
-  border-radius: 8px;
-}
-</style>
-
-<style lang="scss" scoped>
-.mode-selector {
-  width: 240px;
-  height: 100%;
-  background-color: var(--el-color-primary-light-7);
-  border-right: 1px solid var(--el-border-color-light);
   position: relative;
-  z-index: 10;
+  min-width: 0;
-  display: flex;
-  flex-direction: column;
-
-  body:not(.no-animations) & {
-    transition: width 0.3s ease-in-out;
-  }
-  
-  &.collapsed {
-    width: 64px;
-  }
 }
 
-.mode-header {
+.history-title {
-  height: 60px;
+  flex: 1;
-  padding: 0 16px;
+  white-space: nowrap;
-  display: flex;
+  overflow: hidden;
-  align-items: center;
+  text-overflow: ellipsis;
-  
+  margin-right: 24px;
-  &-title {
+  min-width: 0;
-    display: flex;
-    align-items: center;
-    
-    .mode-header-icon {
-      height: 32px;
-      will-change: filter;
-      
-      body:not(.no-animations) & {
-        transition: filter 300ms;
-      }
-      
-      &:hover {
-        filter: drop-shadow(0 0 0.75em rgba(var(--el-color-primary-rgb), 0.6)); 
-      }
-    }
-  }
 }
 
-.mode-menu {
+.delete-btn {
-  background-color: transparent;
-  border: none;
-  padding: 8px;
-  flex-grow: 1;
-  overflow-y: auto;
-  
-  :deep(.el-menu-item) {
-    height: 44px;
-    line-height: 44px;
-    color: var(--el-text-color-regular);
-    border-radius: 8px;
-    margin-bottom: 4px;
-    padding: 0 12px !important;
-    overflow: hidden;
-
-    .el-icon {
-      margin-right: 12px;
-      font-size: 18px;
-      width: 18px;
-    }
-    
-    &.is-active {
-      background-image: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
-      color: var(--el-color-white);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-
-      .el-icon {
-        color: var(--el-color-white);
-      }
-    }
-    
-    &:not(.is-active):hover {
-      background-color: var(--el-color-primary-light-9);
-      color: var(--el-color-primary);
-    }
-    
-    .mode-name {
-      font-size: 14px;
-      margin-left: 12px;
-      white-space: nowrap;
-      opacity: 1;
-      transform: translateX(0);
-      
-      body:not(.no-animations) & {
-         transition: opacity 0.3s ease-in-out;
-      }
-    }
-  }
-}
-
-.mode-setting-btn {
   position: absolute;
-  right: 8px;
+  right: -8px;
-  top: 50%;
+  opacity: 0;
-  transform: translateY(-50%);
+  transform: translateX(10px);
-  color: var(--el-text-color-secondary);
+  transition: all 0.3s ease;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  color: #f56c6c;
+  flex-shrink: 0;
   
   &:hover {
-    color: var(--el-color-primary);
+    color: #f56c6c;
-  }
+    background-color: rgba(245, 108, 108, 0.1);
-}
-
-/* 移动端样式 */
-@media screen and (max-width: 768px) {
-  .mode-selector-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--el-overlay-color-lighter);
-    z-index: 9;
-    display: none;
-    
-    &.visible {
-      display: block;
-    }
   }
   
-  .mode-selector {
+  :deep(.el-icon) {
-    position: fixed;
-    left: 0;
-    top: 0;
-    
-    &.collapsed {
-      transform: translateX(-100%);
-    }
-  }
-}
-
-.mode-selector.collapsed {
-  .mode-header {
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 60px;
-    
-    .mode-header-collapsed-logo {
-      display: flex;
-      align-items: center;
-      height: 100%;
-    }
-
-    .mode-header-icon.collapsed {
-        height: 32px;
-        filter: drop-shadow(0 0 0.75em rgba(var(--el-color-primary-rgb), 0.6));
-        vertical-align: middle;
-    }
-  }
-  
-  .mode-menu {
-    padding: 8px 12px;
-  }
-
-  :deep(.el-menu-item) {
-    width: 40px;
-    height: 40px;
-    padding: 0 !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto 4px auto;
-
-    .el-icon {
-      margin-right: 0;
-    }
-
-    .mode-name {
-      display: none;
-    }
-  }
-
-  .settings-button {
-    width: 40px;
-    height: 40px;
-    .mode-name,
-    .button-text {
-      opacity: 0;
-    }
-  }
-}
-
-.sidebar-footer {
-  height: 48px;
-  padding: 0 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.settings-button {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  padding: 0 12px;
-  color: var(--el-text-color-regular);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-
-  .el-icon {
-    margin-right: 12px;
-    font-size: 18px;
-    width: 18px;
-  }
-
-  &:hover {
-    background-color: var(--el-fill-color-light);
-    color: var(--el-color-primary);
-  }
-
-  .button-text {
     font-size: 14px;
-    white-space: nowrap;
-    opacity: 1;
-    transition: opacity 0.3s ease-in-out;
   }
 }
 
-.mode-selector.collapsed {
+.history-item {
-  .sidebar-footer {
+  &:hover .delete-btn {
-    padding: 0;
+    opacity: 1;
+    transform: translateX(0);
   }
+}
 
-  .settings-button {
+.history-empty {
-    justify-content: center;
+  opacity: 0.6;
-    width: 40px;
+  cursor: not-allowed;
-    padding: 0;
-
-    .el-icon {
-      margin-right: 0;
-    }
-
-    .button-text {
-      opacity: 0;
-      pointer-events: none;
-    }
-    
-    &:hover {
-      background-color: var(--el-fill-color-light);
-    }
-  }
 }
 </style>
 

src/views/chat/components/ChatHeader.vue

@@ -19,7 +19,6 @@
         </el-tag>
       </div>
       <div class="actions">
-        <HistoryButton :icon-only="false" class="title-history-btn" />
         <el-tooltip content="删除会话" placement="bottom" v-if="chatStore.conversationId">
           <el-button 
             class="action-btn delete-btn" 
@@ -60,7 +59,6 @@ import { useChatStore } from '@/store/chat'
 import { useSettingsStore } from '@/store/settings'
 import { Delete, Setting, User, Expand } from '@element-plus/icons-vue'
 import { ElMessageBox } from 'element-plus'
-import HistoryButton from '@/components/chat/HistoryButton.vue'
 import CustomerBackground from '@/components/chat/CustomerBackground.vue'
 
 const chatStore = useChatStore()
@@ -218,26 +216,6 @@ onUnmounted(() => {
       font-weight: normal;
       flex-shrink: 0;
     }
-
-    .title-history-btn {
-      :deep(.history-btn) {
-        height: 32px;
-        padding: 0 12px;
-        color: var(--el-text-color-secondary);
-        transition: all 0.3s ease;
-        font-size: 14px;
-        
-        &:hover {
-          color: var(--el-color-primary);
-          background-color: var(--el-color-primary-light-9);
-        }
-
-        :deep(.el-icon) {
-          font-size: 16px;
-          margin-right: 4px;
-        }
-      }
-    }
   }
 
   .actions {

src/views/chat/components/ChatHistoryList.vue

@@ -0,0 +1,291 @@
+<template>
+  <!-- 展开状态 -->
+  <el-menu
+    class="history-menu"
+    :collapse="isCollapsed"
+    :default-active="chatStore.conversationId || ''"
+    @select="handleSelect"
+  >
+    <el-menu-item-group class="history-item-group" v-if="!isCollapsed">
+      <template #title>
+        <el-icon><Clock /></el-icon>
+        <span class="history-title">历史会话</span>
+      </template>
+      <template v-if="currentModeHistory.length">
+        <el-menu-item 
+          v-for="chat in currentModeHistory" 
+          :key="chat.conversationId"
+          :index="chat.conversationId"
+          class="history-item"
+        >
+          <div class="history-item-content">
+            <span class="history-item-title">{{ formatChatTitle(chat) }}</span>
+            <el-button
+              class="delete-btn"
+              :icon="Delete"
+              link
+              @click.stop="handleDelete(chat.conversationId)"
+            />
+          </div>
+        </el-menu-item>
+      </template>
+      <el-menu-item v-else disabled class="history-empty">
+        <span class="mode-name">暂无历史会话</span>
+      </el-menu-item>
+    </el-menu-item-group>
+
+    <!-- 折叠状态 -->
+    <el-sub-menu v-else index="history" class="history-collapsed" popper-class="history-popper">
+      <template #title>
+        <el-icon><Clock /></el-icon>
+      </template>
+      <template v-if="currentModeHistory.length">
+        <el-menu-item 
+          v-for="chat in currentModeHistory" 
+          :key="chat.conversationId"
+          :index="chat.conversationId"
+          class="history-collapsed-item"
+          :title="formatChatTitle(chat)"
+        >
+          <template #title>{{ formatChatTitle(chat) }}</template>
+        </el-menu-item>
+      </template>
+      <el-menu-item v-else disabled class="history-collapsed-empty">
+        <el-icon><InfoFilled /></el-icon>
+        <template #title>暂无历史会话</template>
+      </el-menu-item>
+    </el-sub-menu>
+  </el-menu>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useChatStore } from '@/store/chat'
+import { useSettingsStore } from '@/store/settings'
+import { Clock, Delete, InfoFilled } from '@element-plus/icons-vue'
+import { ElMessageBox } from 'element-plus'
+
+const chatStore = useChatStore()
+const settingsStore = useSettingsStore()
+
+const isCollapsed = computed(() => settingsStore.sidebarCollapsed)
+
+const currentModeHistory = computed(() => {
+  return chatStore.conversations.filter(chat => chat.mode === chatStore.currentMode)
+})
+
+const formatChatTitle = (chat) => {
+  if (chat.messages && chat.messages.length > 0) {
+    const firstMessage = chat.messages[0].question
+    return firstMessage.length > 20 ? firstMessage.substring(0, 20) + '...' : firstMessage
+  }
+  return `会话 ${chat.conversationId.substring(0, 8)}`
+}
+
+const handleSelect = (conversationId) => {
+  if (conversationId !== 'history') {
+    chatStore.switchConversation(conversationId)
+  }
+}
+
+const handleDelete = async (conversationId) => {
+  try {
+    await ElMessageBox.confirm(
+      '确定要删除这个会话吗？删除后无法恢复。',
+      '删除确认',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        confirmButtonClass: 'el-button--danger'
+      }
+    )
+    chatStore.deleteConversation(conversationId)
+  } catch {
+    // 用户取消删除
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.history-menu {
+  background: transparent;
+  border: none;
+  padding: 8px;
+}
+
+.history-item-group {
+  :deep(.el-menu-item-group__title) {
+    padding: 8px 12px !important;
+    font-size: 14px;
+    font-weight: bold;
+    color: var(--el-text-color-regular);
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+    
+    .el-icon {
+      font-size: 18px;
+    }
+  }
+
+  :deep(.el-menu-item-group__content) {
+    padding-left: 12px;
+  }
+  .history-title {
+    margin-left: 12px;
+    font-weight: bold;
+    color: var(--el-text-color-regular);
+  }
+}
+
+.history-item {
+  height: 44px !important;
+  line-height: 44px !important;
+  color: var(--el-text-color-regular);
+  border-radius: 8px;
+  margin-bottom: 4px;
+  margin-left: 12px;
+  padding: 0 12px !important;
+  overflow: hidden;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: var(--el-fill-color-light);
+  }
+
+  &.is-active {
+    background-image: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
+    color: var(--el-color-white);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.history-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  position: relative;
+  min-width: 0;
+}
+
+.history-item-title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 24px;
+  min-width: 0;
+  font-size: 14px;
+}
+
+.delete-btn {
+  position: absolute;
+  right: -8px;
+  opacity: 0;
+  transform: translateX(10px);
+  transition: all 0.3s ease;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  color: var(--el-text-color-regular);
+  flex-shrink: 0;
+  border-radius: 4px;
+  
+  &:hover {
+    color: var(--el-color-danger);
+  }
+  
+  :deep(.el-icon) {
+    font-size: 14px;
+  }
+}
+
+.history-item:hover .delete-btn {
+  opacity: 1;
+  transform: translateX(0);
+  color: var(--el-color-regular);
+  &:hover {
+    color: var(--el-color-danger);
+  }
+}
+
+.history-empty {
+  opacity: 0.6;
+  cursor: not-allowed;
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  padding: 0 12px !important;
+  margin-right: 12px;
+  height: 44px !important;
+  line-height: 44px !important;
+}
+
+// 折叠状态样式
+.history-collapsed {
+  :deep(.el-sub-menu__title) {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 12px !important;
+    
+    .el-icon {
+      font-size: 16px;
+    }
+  }
+}
+.history-popper {
+    border-radius: 8px;
+}
+.history-collapsed-item {
+  height: 40px !important;
+  line-height: 40px !important;
+  padding: 0 12px !important;
+  margin: 8px 12px;
+  border-radius: 8px;
+  color: var(--el-text-color-regular);
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: var(--el-fill-color-light);
+    color: var(--el-color-primary);
+  }
+
+  &.is-active {
+    background-image: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
+    color: var(--el-color-white);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+
+    .el-icon {
+      color: var(--el-color-white);
+    }
+  }
+}
+
+.history-collapsed-empty {
+  @extend .history-collapsed-item;
+  opacity: 0.6;
+  cursor: not-allowed;
+  color: var(--el-text-color-secondary);
+
+  &:hover {
+    background-color: transparent;
+    color: var(--el-text-color-secondary);
+  }
+}
+
+// 暗黑模式适配
+:deep(html.dark) {
+  .history-collapsed-item {
+    &:hover {
+      background-color: var(--el-fill-color-darker);
+    }
+    
+    &.is-active {
+      background-color: var(--el-color-primary-dark-2);
+      color: var(--el-color-white);
+    }
+  }
+}
+</style> 

src/views/chat/components/ChatInput.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="chat-input-area">
+    <el-input
+      v-model="messageInput"
+      type="textarea"
+      :rows="1"
+      :autosize="{ minRows: 1, maxRows: 6 }"
+      placeholder="请输入消息..."
+      @keyup.enter.exact.prevent="handleSend"
+      resize="none"
+      ref="messageInputRef"
+      :disabled="isInputDisabled"
+    />
+    <el-button 
+      class="send-btn" 
+      @click="handleSend" 
+      :disabled="isInputDisabled || !messageInput.trim()"
+      type="primary"
+    >
+      发送
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ElInput, ElButton } from 'element-plus'
+
+const props = defineProps({
+  isInputDisabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['send'])
+
+const messageInput = ref('')
+const messageInputRef = ref(null)
+const maxRows = 6
+
+const handleSend = () => {
+  if (!messageInput.value.trim() || props.isInputDisabled) return
+  emit('send', messageInput.value)
+  messageInput.value = ''
+  messageInputRef.value.style.height = 'auto'
+}
+
+// Expose focus method
+defineExpose({
+  focus: () => messageInputRef.value?.focus()
+})
+
+const adjustTextareaHeight = () => {
+  const textarea = messageInputRef.value?.$el?.querySelector('textarea')
+  textarea.style.height = 'auto'
+  const newHeight = Math.min(textarea.scrollHeight, maxRows * 24)
+  textarea.style.height = newHeight + 'px'
+}
+</script>
+
+<style lang="scss" scoped>
+.chat-input-area {
+  display: flex;
+  flex: 1;
+  align-items: flex-end;
+  gap: 8px;
+  background-color: var(--el-bg-color);
+  position: relative;
+  z-index: 1;
+
+  .el-textarea {
+    flex: 1;
+    
+    :deep(.el-textarea__inner) {
+      border-radius: 8px;
+      resize: none;
+      padding: 8px 12px;
+      min-height: 40px !important;
+      max-height: 120px;
+      line-height: 24px;
+      font-size: 14px;
+      
+      &:disabled {
+        background-color: var(--el-input-disabled-bg);
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .send-btn {
+    height: 40px;
+    padding: 0 20px;
+    border-radius: 8px;
+    font-size: 14px;
+    min-width: 80px;
+    flex-shrink: 0;
+  }
+}
+
+/* Mobile adjustments */
+@media screen and (max-width: 768px) {
+  .send-btn {
+    min-width: 60px;
+    padding: 0 12px;
+  }
+}
+</style> 

src/views/chat/components/VoiceInput.vue

@@ -0,0 +1,555 @@
+<template>
+  <div class="voice-input-container">
+    <!-- Voice Mode Trigger Button -->
+    <el-button 
+      class="voice-trigger-btn"
+      @click="openVoiceModal"
+      v-if="!showVoiceModal" 
+      :disabled="isDisabled"
+    >
+      点击 说话
+    </el-button>
+
+    <!-- Teleport the modal and overlay to the body -->
+    <Teleport to="body">
+      <!-- Voice Input Modal -->
+      <div class="voice-input-modal-overlay" v-if="showVoiceModal">
+        <div class="voice-bubble">
+          <!-- Voice Visualizer -->
+          <AudioWaveform :pcmData="pcmData" />
+          <!-- Timer Display -->
+          <div class="timer" :class="{ 'warning': remainingTime <= 5 }">
+            {{ formatTime(remainingTime) }}
+          </div>
+          <!-- Real-time Text Display -->
+          <div class="real-time-text" v-if="realTimeText">
+            {{ realTimeText }}
+          </div>
+        </div>
+        <div class="voice-modal-controls">
+          <div class="modal-control-item">
+            <span class="modal-btn-label">取消</span>
+            <el-button class="modal-btn cancel-btn" circle @click="cancelVoiceInputFromModal">
+              <el-icon><Close /></el-icon>
+            </el-button>
+          </div>
+          <div class="modal-control-item">
+             <span class="modal-btn-label record-label">{{ isRecording ? '完成' : ' ' }}</span>
+             <el-button 
+                class="modal-btn confirm-btn" 
+                :type="isRecording ? 'danger' : 'primary'" 
+                circle 
+                @click="confirmVoiceInput"
+                :icon="isRecording ? ChatDotSquare : Microphone" 
+              >
+              </el-button>
+          </div>
+          <!-- <div class="modal-control-item">
+            <span class="modal-btn-label">转文字</span>
+            <el-button class="modal-btn text-send-btn" circle @click="sendAsText">
+               <el-icon><ChatDotSquare /></el-icon>
+            </el-button>
+          </div> -->
+        </div>
+        <div class="voice-modal-tip">{{ isRecording ? '正在录音...' : '点击麦克风开始录音' }}</div>
+      </div>
+
+      <!-- Voice-to-Text Conversion Overlay -->
+      <div class="voice-to-text-overlay" v-if="isVoiceToTextConverting">
+        <div class="voice-to-text-content">
+          <div class="converting-indicator"></div>
+          <div class="converting-text">转文字发送</div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<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 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'
+
+// Props definition
+const props = defineProps({
+  isDisabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits definition
+const emit = defineEmits(['sendText', 'sendVoice'])
+
+// Refs related to voice input
+const isRecording = ref(false)
+const isVoiceToTextConverting = ref(false)
+const showVoiceModal = ref(false)
+const realTimeText = ref('')
+const remainingTime = ref(30)
+const pcmData = ref([])
+let recorder = null
+let websocketClient = null
+let timer = null
+let audioChunks = []
+
+// WebSocket configuration
+const wsConfig = {
+  url: 'wss://160.202.224.52:10096/',
+  initConfig: {
+    mode: '2pass',
+    wav_format: 'pcm',
+    chunk_size: [5, 10, 5],
+    itn: true
+  },
+  msgHandle: (event) => {
+    try {
+      const data = JSON.parse(event.data)
+      if (data.text) {
+        realTimeText.value = data.text
+      }
+    } catch (error) {
+      console.error('WebSocket message parse error:', error)
+    }
+  },
+  stateHandle: (state) => {
+    console.log('WebSocket state:', state)
+  }
+}
+
+// --- Voice Input Logic ---
+
+const openVoiceModal = async () => {
+  if (props.isDisabled) return
+  showVoiceModal.value = true
+  isRecording.value = false
+  realTimeText.value = ''
+  remainingTime.value = 30
+  audioChunks = []
+
+  // 自动开始录音
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    startRecording(stream)
+    isRecording.value = true
+    startTimer()
+    connectWebSocket()
+  } catch (err) {
+    ElMessage.error('无法访问麦克风，请检查权限设置')
+    console.error('获取麦克风权限失败:', err)
+    closeVoiceModal()
+  }
+}
+
+const closeVoiceModal = () => {
+  showVoiceModal.value = false
+  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
+  }
+  
+  // 清理音频数据
+  audioChunks = []
+  realTimeText.value = ''
+  remainingTime.value = 30
+}
+
+const cancelVoiceInputFromModal = () => {
+  closeVoiceModal()
+}
+
+const confirmVoiceInput = async () => {
+  if (isRecording.value) {
+    stopRecording()
+    isRecording.value = false
+    clearInterval(timer)
+    
+    if (audioChunks.length === 0) {
+      ElMessage.warning('录音时间太短')
+      closeVoiceModal()
+      return
+    }
+
+    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' })
+    emit('sendVoice', audioBlob)
+    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()
+  }
+}
+
+const startRecording = (stream) => {
+  audioChunks = []
+  recorder = new Recorder({
+    type: 'pcm', // 音频格式
+    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
+        })
+      }
+    }
+  })
+
+  recorder.open(() => {
+    recorder.start()
+  }, (msg, isUserNotAllow) => {
+    ElMessage.error('录音失败: ' + msg)
+    closeVoiceModal()
+  })
+}
+
+const stopRecording = () => {
+  if (recorder) {
+    recorder.stop((blob, duration) => {
+      // Convert PCM to WAV before saving
+      Recorder.pcm2wav({
+        blob: blob,
+        sampleRate: 16000,
+        bitRate: 16
+      }, (wavBlob) => {
+        audioChunks.push(wavBlob)
+        // Send end signal to WebSocket
+        if (websocketClient && websocketClient.socket.readyState === WebSocket.OPEN) {
+          websocketClient.send({
+            is_speaking: false
+          })
+        }
+      }, (msg) => {
+        console.error('PCM转WAV失败:', msg)
+      })
+    }, (msg) => {
+      console.error('录音停止失败:', msg)
+    })
+  }
+}
+
+const startTimer = () => {
+  timer = setInterval(() => {
+    remainingTime.value--
+    if (remainingTime.value <= 0) {
+      stopRecording()
+      isRecording.value = false
+      clearInterval(timer)
+    }
+  }, 1000)
+}
+
+const formatTime = (seconds) => {
+  const mins = Math.floor(seconds / 60)
+  const secs = seconds % 60
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+const connectWebSocket = () => {
+  websocketClient = new WebSocketClient(wsConfig)
+  websocketClient.connect(wsConfig.url)
+}
+
+// --- Lifecycle hooks ---
+onMounted(() => {
+  if (!('MediaRecorder' in window) || !navigator.mediaDevices) {
+    console.warn('浏览器不支持语音录制功能')
+  }
+})
+
+onUnmounted(() => {
+  closeVoiceModal()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.voice-input-container {
+    width: 100%;
+}
+.voice-trigger-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  min-height: 40px;
+  width: 100%;
+  height: 40px;
+  box-sizing: border-box;
+}
+
+// Styles for the Voice Input Modal
+.voice-input-modal-overlay {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0; 
+  background-color: rgba(0, 0, 0, 0.7); 
+  z-index: 3000;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end; 
+  align-items: center;
+  padding-bottom: 30px; 
+}
+
+.voice-bubble {
+  background-color: #4CAF50; 
+  color: white;
+  padding: 15px 25px;
+  border-radius: 15px;
+  margin-bottom: 40px; 
+  min-width: 150px;
+  text-align: center;
+  position: relative; 
+
+  .voice-wave {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px 0;
+    background: transparent;
+  }
+
+  .voice-wave canvas {
+    width: 240px;
+    height: 48px;
+    display: block;
+    background: transparent;
+  }
+
+  .timer {
+    font-size: 14px;
+    color: white;
+    margin: 5px 0;
+    
+    &.warning {
+      color: #ff4d4f;
+      animation: blink 1s infinite;
+    }
+  }
+
+  .real-time-text {
+    font-size: 14px;
+    color: white;
+    margin: 10px 0;
+    min-height: 20px;
+    word-break: break-all;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid #4CAF50;
+  }
+}
+
+.voice-modal-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start; 
+  width: 100%;
+  max-width: 350px; 
+  margin-bottom: 15px; 
+}
+
+.modal-control-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.modal-btn-label {
+  font-size: 12px;
+  color: #b0b0b0; 
+  margin-bottom: 8px; 
+  min-height: 18px; 
+}
+
+.record-label {
+    color: white; 
+}
+
+.modal-btn {
+  width: 60px; 
+  height: 60px;
+  font-size: 24px;
+}
+
+.confirm-btn .el-icon {
+    font-size: 28px; 
+}
+
+.cancel-btn,
+.text-send-btn {
+  background-color: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+}
+
+.voice-modal-tip {
+  color: #a0a0a0;
+  font-size: 13px;
+  min-height: 20px; 
+}
+
+// Styles for Voice-to-Text Conversion Overlay
+.voice-to-text-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2001; // Ensure it's above the voice modal if somehow both appear
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.voice-to-text-content {
+  background-color: white;
+  border-radius: 12px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.converting-indicator {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid var(--el-color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.converting-text {
+  font-size: 16px;
+  color: #333;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  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;
+}
+
+html.dark .record-label {
+    color: #d0d0d0;
+}
+
+html.dark .cancel-btn,
+html.dark .text-send-btn {
+    background-color: rgba(0, 0, 0, 0.3);
+    color: #ccc;
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+}
+
+html.dark .voice-modal-tip {
+    color: #707070;
+}
+
+html.dark .voice-to-text-content {
+  background-color: #333;
+}
+
+html.dark .converting-text {
+  color: #eee;
+}
+
+.timer {
+  font-size: 14px;
+  color: white;
+  margin: 5px 0;
+  
+  &.warning {
+    color: #ff4d4f;
+    animation: blink 1s infinite;
+  }
+}
+
+.real-time-text {
+  font-size: 14px;
+  color: white;
+  margin: 10px 0;
+  min-height: 20px;
+  word-break: break-all;
+}
+
+@keyframes blink {
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
+</style> 

vite.config.js

@@ -58,21 +58,21 @@ export default defineConfig(({ command, mode }) => {
           rewrite: (path) => path.replace(/^\/api/, ''),
           secure: false,
           configure: (proxy, options) => {
-            proxy.on('proxyReq', (proxyReq, req, res) => {
+            // proxy.on('proxyReq', (proxyReq, req, res) => {
-              const targetOrigin = new URL(env.VITE_APP_BASE_API).origin;
+            //   const targetOrigin = new URL(env.VITE_APP_BASE_API).origin;
-              proxyReq.setHeader('Origin', targetOrigin);
+            //   proxyReq.setHeader('Origin', targetOrigin);
               
-              if (req.originalUrl && req.originalUrl.includes('chat-messages')) {
+            //   if (req.originalUrl && req.originalUrl.includes('chat-messages')) {
-                proxyReq.setHeader('Accept', 'text/event-stream');
+            //     proxyReq.setHeader('Accept', 'text/event-stream');
-              }
+            //   }
-            });
+            // });
-            proxy.on('proxyRes', (proxyRes, req, res) => {
+            // proxy.on('proxyRes', (proxyRes, req, res) => {
-              if (req.originalUrl && req.originalUrl.includes('chat-messages')) {
+            //   if (req.originalUrl && req.originalUrl.includes('chat-messages')) {
-                proxyRes.headers['content-type'] = 'text/event-stream';
+            //     proxyRes.headers['content-type'] = 'text/event-stream';
-                proxyRes.headers['Cache-Control'] = 'no-cache';
+            //     proxyRes.headers['Cache-Control'] = 'no-cache';
-                proxyRes.headers['Connection'] = 'keep-alive';
+            //     proxyRes.headers['Connection'] = 'keep-alive';
-              }
+            //   }
-            });
+            // });
           }
         }
       }