package.json

@@ -42,13 +42,10 @@
     "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

@@ -1,128 +0,0 @@
-<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

@@ -0,0 +1,196 @@
+<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

@@ -1,128 +0,0 @@
-/**
- * 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/ChatHeader.vue

@@ -19,6 +19,7 @@
         </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" 
@@ -59,6 +60,7 @@ 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()
@@ -216,6 +218,26 @@ 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/ChatInterface.vue

@@ -72,26 +72,33 @@
         <el-tag size="large" type="info" class="end-tag">会话已结束</el-tag>
       </div>
     </div>
-    <!-- Input Area Wrapper -->
+    <div class="input-area">
-    <div class="input-area-wrapper">
       <el-button 
-        class="mode-switch-btn" 
+        class="new-chat-btn" 
-        :icon="isVoiceInputMode ? ChatDotSquare : Microphone" 
+        @click="chatStore.startNewChat" 
-        circle 
+        :disabled="newChatButtonsDisabled"
-        @click="switchInputMode"
+      >
-        :disabled="isInputDisabled" 
+        新会话
-      />
+      </el-button>
-      <ChatInput 
+      <el-input
-        v-if="!isVoiceInputMode"
+        v-model="messageInput"
-        :is-disabled="isInputDisabled"
+        type="textarea"
-        @send="handleSendMessage" 
+        :rows="1"
-        ref="chatInputRef" 
+        :autosize="{ minRows: 1, maxRows: 6 }"
-      />
+        placeholder="请输入消息..."
-      <VoiceInput 
+        @keyup.enter.exact.prevent="sendMessage"
-        v-else 
+        resize="none"
-        :is-disabled="isInputDisabled" 
+        ref="messageInputRef"
-        @sendText="handleSendMessage"
+        :disabled="isInputDisabled"
       />
+      <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 }">
@@ -112,11 +119,9 @@ 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/components/ChatHeader.vue'
+import ChatHeader from '@/views/chat/ChatHeader.vue'
-import ChatInput from '@/views/chat/components/ChatInput.vue'
+import { ElTag, ElButton, ElInput, ElAvatar } from 'element-plus'
-import VoiceInput from '@/views/chat/components/VoiceInput.vue'
+import { Plus, CaretBottom, CaretRight } from '@element-plus/icons-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';
 
@@ -127,7 +132,6 @@ 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
@@ -138,7 +142,6 @@ const lastScrollHeight = ref(0)
 const isSummaryCollapsed = ref(false)
 const showBackgroundDialog = ref(false)
 const showBackground = ref(false)
-const isVoiceInputMode = ref(false)
 
 // 使用计算属性获取当前会话的消息
 const currentMessages = computed(() => {
@@ -150,6 +153,12 @@ 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(() => {
@@ -244,22 +253,15 @@ watch(() => currentMessages.value?.map(msg => msg.respondingType), (newTypes, ol
   }
 }, { deep: true })
 
-// Unified message sending function
+// 发送消息时滚动到底部
-const handleSendMessage = (message) => {
+const sendMessage = () => {
-  if (!message || !message.trim() || isInputDisabled.value) return;
+  if (!messageInput.value.trim() && !sendButtonsDisabled.value) return
-  console.log("ChatInterface sending message:", message);
+  chatStore.sendMessage(messageInput.value)
-  chatStore.sendMessage(message);
+  messageInput.value = ''
-  shouldAutoScroll.value = true; // 发送消息时恢复自动滚动
+  messageInputRef.value.style.height = 'auto'
-  scrollToBottom(true);
+  shouldAutoScroll.value = 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) => {
@@ -301,17 +303,6 @@ 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)
@@ -319,6 +310,7 @@ onMounted(() => {
     scrollToBottom(true)
     shouldAutoScroll.value = true
   }
+
 })
 
 onUnmounted(() => {
@@ -342,7 +334,7 @@ onUnmounted(() => {
 
 // Dark mode override for chat container
 html.dark .chat-container {
-  background-color: var(--el-color-primary-dark-1);
+  background-color: var(--el-color-primary-dark-1); // Use the new lighter dark shade
 }
 
 .chat-background {
@@ -691,27 +683,270 @@ html.dark .background-section .background-content {
   }
 }
 
-.input-area-wrapper {
+.input-area {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   display: flex;
   align-items: flex-end;
-  & > :deep(.chat-input-area),
+  gap: 12px;
-  & > :deep(div > .voice-trigger-btn) {
+  padding: 16px;
-    flex: 1;
+  background: var(--el-color-primary-light-8);
-    min-width: 0;
-  }
-  gap: 8px;
-  padding: 16px 20px;
   border-top: 1px solid var(--el-border-color-light);
-  background-color: var(--el-bg-color);
+  z-index: 3;
-  position: relative;
+  :deep(.el-textarea) {
-  z-index: 1;
+    flex: 1;
+
+    .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);
+      }
+    }
+  }
 }
 
-.mode-switch-btn {
+// Dark mode override for input area
-  width: 40px;
+html.dark .input-area {
+  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;
-  font-size: 20px;
+  padding: 0 20px;
-  flex-shrink: 0; // Prevent shrinking
+  font-size: 14px;
+  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,19 +23,12 @@
         :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>
-      <ChatHistoryList />
+
       <!-- Settings Button Popover -->
       <el-popover
         placement="top-end"
@@ -62,10 +55,9 @@
 import { useChatStore } from '@/store/chat'
 import { useSettingsStore } from '@/store/settings'
 import { computed, ref, onMounted, onUnmounted } from 'vue'
-import { ChatDotRound, ChatLineRound, ChatRound, Service, Setting, Clock, Delete, Plus } from '@element-plus/icons-vue'
+import { ChatDotRound, ChatLineRound, ChatRound, Service, Setting } from '@element-plus/icons-vue'
-import { ElMenu, ElMenuItem, ElIcon, ElPopover, ElMessageBox } from 'element-plus'
+import { ElMenu, ElMenuItem, ElIcon, ElPopover } from 'element-plus'
 import SettingsPanel from '@/components/settings/SettingsPanel.vue'
-import ChatHistoryList from '@/views/chat/components/ChatHistoryList.vue'
 
 const chatStore = useChatStore()
 const settingsStore = useSettingsStore()
@@ -85,44 +77,8 @@ const currentModeHistory = computed(() => {
   return chatStore.conversations.filter(chat => chat.mode === chatStore.currentMode)
 })
 
-const formatChatTitle = (chat) => {
+const selectMode = (modeId) => {
-  if (chat.messages && chat.messages.length > 0) {
+  chatStore.setCurrentMode(modeId)
-    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)
@@ -171,7 +127,6 @@ onUnmounted(() => {
   padding: 0 16px;
   display: flex;
   align-items: center;
-  flex-shrink: 0;
   
   &-title {
     display: flex;
@@ -196,155 +151,63 @@ onUnmounted(() => {
   background-color: transparent;
   border: none;
   padding: 8px;
-  overflow: visible;
+  flex-grow: 1;
-}
+  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;
-  }
   
-  &.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);
-    
-    body:not(.no-animations) & {
-       transition: opacity 0.3s ease-in-out;
-    }
-  }
-}
-
-.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: 44px;
-    height: 40px;
+    line-height: 44px;
-    padding: 0 !important;
+    color: var(--el-text-color-regular);
-    display: flex;
+    border-radius: 8px;
-    align-items: center;
+    margin-bottom: 4px;
-    justify-content: center;
+    padding: 0 12px !important;
-    margin: 0 auto 4px auto;
+    overflow: hidden;
 
     .el-icon {
-      margin-right: 0;
+      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 {
-      display: none;
+      font-size: 14px;
-    }
+      margin-left: 12px;
-  }
+      white-space: nowrap;
-
+      opacity: 1;
-  .settings-button {
+      transform: translateX(0);
-    width: 40px;
+      
-    height: 40px;
+      body:not(.no-animations) & {
-    .mode-name,
+         transition: opacity 0.3s ease-in-out;
-    .button-text {
+      }
-      opacity: 0;
     }
   }
 }
 
-.sidebar-footer {
+.mode-setting-btn {
-  height: 48px;
+  position: absolute;
-  padding: 0 12px;
+  right: 8px;
-  display: flex;
+  top: 50%;
-  align-items: center;
+  transform: translateY(-50%);
-  justify-content: center;
+  color: var(--el-text-color-secondary);
-  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;
-  }
 }
 
 /* 移动端样式 */
@@ -410,7 +273,7 @@ onUnmounted(() => {
     margin: 0 auto 4px auto;
 
     .el-icon {
-      margin: 0;
+      margin-right: 0;
     }
 
     .mode-name {
@@ -428,57 +291,330 @@ onUnmounted(() => {
   }
 }
 
-.history-content {
+.sidebar-footer {
+  height: 48px;
+  padding: 0 12px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
-  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;
-  min-width: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+
+  body:not(.no-animations) & {
+    transition: width 0.3s ease-in-out;
+  }
+  
+  &.collapsed {
+    width: 64px;
+  }
 }
 
-.history-title {
+.mode-header {
-  flex: 1;
+  height: 60px;
-  white-space: nowrap;
+  padding: 0 16px;
-  overflow: hidden;
+  display: flex;
-  text-overflow: ellipsis;
+  align-items: center;
-  margin-right: 24px;
+  
-  min-width: 0;
+  &-title {
+    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)); 
+      }
+    }
+  }
 }
 
-.delete-btn {
+.mode-menu {
+  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;
-  opacity: 0;
+  top: 50%;
-  transform: translateX(10px);
+  transform: translateY(-50%);
-  transition: all 0.3s ease;
+  color: var(--el-text-color-secondary);
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  color: #f56c6c;
-  flex-shrink: 0;
   
   &:hover {
-    color: #f56c6c;
+    color: var(--el-color-primary);
-    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;
+    }
   }
   
-  :deep(.el-icon) {
+  .mode-selector {
+    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;
-}
-
-.history-item {
-  &:hover .delete-btn {
     opacity: 1;
-    transform: translateX(0);
+    transition: opacity 0.3s ease-in-out;
   }
 }
 
-.history-empty {
+.mode-selector.collapsed {
-  opacity: 0.6;
+  .sidebar-footer {
-  cursor: not-allowed;
+    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>
 

src/views/chat/components/ChatHistoryList.vue

@@ -1,291 +0,0 @@
-<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

@@ -1,108 +0,0 @@
-<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

@@ -1,555 +0,0 @@
-<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';
-            //   }
+              }
-            // });
+            });
           }
         }
       }