From 1746776226904e9fa1e6d0a142afd03a9184e447 Mon Sep 17 00:00:00 2001
From: WangJing <wangjing4323@163.com>
Date: Mon, 4 Aug 2025 09:59:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF=E4=BD=93=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/chatweb/components/ChatBox.vue  | 398 ++++++++++--------
 1 file changed, 228 insertions(+), 170 deletions(-)

diff --git a/chat-client/src/views/chatweb/components/ChatBox.vue b/chat-client/src/views/chatweb/components/ChatBox.vue
index f2a25cf..69b4df4 100644
--- a/chat-client/src/views/chatweb/components/ChatBox.vue
+++ b/chat-client/src/views/chatweb/components/ChatBox.vue
@@ -4,8 +4,8 @@
     <div class="chat-sidebar" :class="{ 'sidebar-collapsed': isSidebarCollapsed }">
       <div class="sidebar-header">
         <h3 v-show="!isSidebarCollapsed">{{ t('vabI18n.chat.history') }}</h3>
-        <el-button
-          type="primary"
+        <el-button 
+          type="primary" 
           class="new-chat-btn"
           @click="() => createNewChat()"
           v-show="!isSidebarCollapsed"
@@ -17,8 +17,8 @@
         </el-button>
       </div>
       <div class="chat-history" v-show="!isSidebarCollapsed">
-        <div
-          v-for="(chat, index) in chatHistory"
+        <div 
+          v-for="(chat, index) in chatHistory" 
           :key="index"
           class="chat-history-item"
           :class="{ 'active': currentChatIndex === index }"
@@ -40,8 +40,8 @@
     <div class="chat-main" :class="{ 'main-expanded': isSidebarCollapsed }">
       <!-- 聊天消息区域 -->
       <div class="chat-messages" ref="messagesContainer">
-        <div v-for="(msg, index) in messages"
-             :key="index"
+        <div v-for="(msg, index) in messages" 
+             :key="index" 
              class="message-item"
              :class="{ 'user-message': msg.isUser, 'assistant-message': !msg.isUser }"
              @mouseenter="handleMessageHover(index, true)"
@@ -53,7 +53,7 @@
             </svg>
             <img v-else :src="getAssistantAvatar()" :alt="$t('vabI18n.chat.assistant')" class="avatar-icon" />
           </div>
-
+          
           <!-- 消息内容 -->
           <div class="message-content-wrapper" :class="{ 'has-charts': !msg.isUser && msg.echarts && msg.echarts.length > 0 }">
             <div class="message-content">
@@ -75,13 +75,13 @@
                       @keydown.escape="handleCancelEdit"
                     />
                     <div class="edit-actions">
-                      <button
+                      <button 
                         @click="handleCancelEdit"
                         class="edit-btn cancel-btn"
                       >
                         {{ t('vabI18n.chat.cancel') }}
                       </button>
-                      <button
+                      <button 
                         @click="handleSaveEdit"
                         :disabled="!editingMessageText.trim()"
                         class="edit-btn save-btn"
@@ -109,8 +109,8 @@
                     <div v-html="msg.formattedText"></div>
                     <!-- 渲染 ECharts 图表 -->
                     <div v-if="msg.echarts && msg.echarts.length > 0" class="echarts-container">
-                      <div
-                        v-for="chart in msg.echarts"
+                      <div 
+                        v-for="chart in msg.echarts" 
                         :key="chart.id"
                         class="chart-wrapper"
                       >
@@ -130,7 +130,7 @@
                       <span class="dot"></span>
                     </span>
                   </div>
-
+                  
                   <!-- 文件来源信息 -->
                   <div v-if="msg.sources && ((msg.sources.tracePdf && msg.sources.tracePdf.length > 0) || (msg.sources.traceExcel && msg.sources.traceExcel.trim())) && props.chatType === '1'" class="sources-section">
                     <div class="sources-header">
@@ -141,38 +141,38 @@
                     </div>
                     <div class="sources-list">
                       <!-- PDF文件来源 -->
-                      <div
-                        v-for="source in msg.sources.tracePdf"
+                      <div 
+                        v-for="source in msg.sources.tracePdf" 
                         :key="source.fileName"
                         class="source-item"
                         @click="handleSourceClick(source, msg.conversationId, msg.messageId)"
                       >
-                        <img
-                          :src="getFileTypeIcon(getFileExtension(source.fileName))"
+                        <img 
+                          :src="getFileTypeIcon(getFileExtension(source.fileName))" 
                           :alt="getFileExtension(source.fileName)"
                           class="source-icon"
                         />
-                        <el-tooltip
-                          :content="source.fileName"
-                          placement="top"
+                        <el-tooltip 
+                          :content="source.fileName" 
+                          placement="top" 
                           :disabled="source.fileName.length <= 25"
                         >
                           <span class="source-name">{{ source.fileName }}</span>
                         </el-tooltip>
                       </div>
                       <!-- Excel文件来源 -->
-                      <div
+                      <div 
                         v-if="msg.sources.traceExcel && msg.sources.traceExcel.trim()"
                         class="source-item excel-item"
                         @click="handleExcelClick(msg.sources.traceExcel)"
                       >
-                        <img
-                          :src="getFileTypeIcon('excel')"
+                        <img 
+                          :src="getFileTypeIcon('excel')" 
                           alt="excel"
                           class="source-icon"
                         />
-                        <el-tooltip
-                          :content="generateExcelFileName()"
+                        <el-tooltip 
+                          :content="generateExcelFileName()" 
                           placement="top"
                         >
                           <span class="source-name">{{ generateExcelFileName() }}</span>
@@ -180,7 +180,7 @@
                       </div>
                     </div>
                   </div>
-
+                  
                   <!-- 推荐问题按钮 -->
                   <div v-if="msg.isOpenRemark && props.recommendQuestions && props.recommendQuestions.length > 0" class="recommend-questions-section">
                     <div class="recommend-questions-header">
@@ -190,14 +190,14 @@
                       <!-- 推荐问题 -->
                     </div>
                     <div class="recommend-questions-list">
-                      <el-tooltip
-                        v-for="(question, qIndex) in props.recommendQuestions"
+                      <el-tooltip 
+                        v-for="(question, qIndex) in props.recommendQuestions" 
                         :key="qIndex"
-                        :content="question"
-                        placement="top"
+                        :content="question" 
+                        placement="top" 
                         :disabled="question.length <= 30"
                       >
-                        <button
+                        <button 
                           class="recommend-question-btn"
                           @click="handleRecommendQuestionClick(question)"
                           :disabled="isLoading"
@@ -223,8 +223,8 @@
             </span>
 
             <!-- 消息操作按钮 -->
-            <div
-              v-show="hoveredMessageIndex === index && !msg.isLoading && editingMessageIndex !== index"
+            <div 
+              v-show="hoveredMessageIndex === index && !msg.isLoading && editingMessageIndex !== index" 
               class="message-actions"
               :class="{ 'user-actions': msg.isUser, 'assistant-actions': !msg.isUser }"
             >
@@ -281,6 +281,8 @@
           </div>
           </div>
         </div>
+        <div ref="bottomAnchor"></div>
+        
       </div>
 
       <!-- 输入区域 -->
@@ -288,7 +290,7 @@
         <!-- 中止按钮 -->
         <div v-if="showStopButton" class="stop-button-container">
           <el-tooltip :content="$t('vabI18n.chat.stopGenerating')" placement="top">
-            <button
+            <button 
               class="stop-button"
               @click="handleStopStream"
             >
@@ -309,10 +311,10 @@
             :autosize="{ minRows: 1, maxRows: 4 }"
           >
           </el-input>
-          <el-button
-            type="primary"
+          <el-button 
+            type="primary" 
             class="send-button"
-            @click="sendMessage"
+            @click="sendMessage" 
             :disabled="!inputMessage.trim() || isLoading"
           >
             <template v-if="isLoading">
@@ -359,7 +361,7 @@
       center
     >
       <div v-loading="excelPreviewLoading" class="excel-preview-content">
-        <div
+        <div 
           v-if="excelPreviewContent"
           v-html="excelPreviewContent"
           class="excel-table-content"
@@ -382,10 +384,12 @@ import { ref, reactive, nextTick, watch, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import VueOfficePdf from '@vue-office/pdf'
 import VabChart from '@/plugins/VabChart/index.vue'
-
-import { sendChatMessage, type ChatMessageResponse, type ChatMessageSendRequest, stopMessagesStream, getFilePathList, type TraceFile, type TraceData } from '@/api/chat'
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/solid'
+import { sendChatMessage, type ChatMessageResponse, type ChatMessageSendRequest, stopMessagesStream, getFilePathList, type TraceFile, type TraceData } from '@/api/chat' 
 import { useI18n } from 'vue-i18n'
+import { throttle } from 'lodash'
 
+const expanded = ref(false)
 const { t, locale } = useI18n()
 // Props 定义
 interface Props {
@@ -440,11 +444,12 @@ interface Message {
   isOpenRemark?: boolean  // 是否为开场白消息
 }
 
-
+// 消息体底部锚点
+const bottomAnchor = ref<HTMLElement | null>(null)
 
 const messages = ref<Message[]>([])
 const inputMessage = ref('')
-const messagesContainer = ref<HTMLElement>()
+const messagesContainer = ref<HTMLElement | null>(null)
 const isLoading = ref(false)
 const currentTaskId = ref('')
 const showStopButton = ref(false)
@@ -529,10 +534,10 @@ const createNewChat = async () => {
     }
     saveChatHistory()
   }
-
+  
   // 创建新会话初始消息
   let initialMessages = [...props.initialMessages]
-
+  
   // 如果有开场白，添加助手消息
   if (props.openRemark && props.openRemark.trim()) {
     const formatted = await formatAnswer(props.openRemark)
@@ -545,7 +550,7 @@ const createNewChat = async () => {
     }
     initialMessages.push(openRemarkMessage)
   }
-
+  
   // 创建新会话
   const newSession: ChatSession = {
     messages: initialMessages,
@@ -556,19 +561,19 @@ const createNewChat = async () => {
   currentChatIndex.value = chatHistory.value.length - 1
   messages.value = initialMessages
   saveChatHistory()
-
+  
   // 发射会话创建事件
   emit('chatCreated', currentChatIndex.value)
-
+  
   // 滚动到底部显示新消息
   await nextTick()
-  await scrollToBottom()
+  throttledScrollToBottom()
 }
 
 // 切换会话
 const switchChat = (index: number) => {
   if (index === currentChatIndex.value) return
-
+  
   // 保存当前会话
   if (messages.value.length > 0 && chatHistory.value[currentChatIndex.value]) {
     chatHistory.value[currentChatIndex.value] = {
@@ -580,11 +585,11 @@ const switchChat = (index: number) => {
     }
     saveChatHistory()
   }
-
+  
   // 切换到选中的会话
   currentChatIndex.value = index
   messages.value = [...chatHistory.value[index].messages]
-
+  
   // 发射会话切换事件
   emit('chatSwitched', index)
 }
@@ -612,7 +617,7 @@ const generateExcelFileName = (timestamp: number = Date.now()) => {
   const day = date.getDate().toString().padStart(2, '0')
   const hour = date.getHours().toString().padStart(2, '0')
   const minute = date.getMinutes().toString().padStart(2, '0')
-
+  
   return `${year}${month}${day}${hour}${minute}.excel`
 }
 
@@ -631,6 +636,10 @@ watch(messages, (newMessages) => {
   }
 }, { deep: true })
 
+
+// 用户是否正在拖动滚动条
+let isUserScrolling = false
+
 // 初始化时加载会话历史
 onMounted(async () => {
   loadChatHistory()
@@ -638,6 +647,15 @@ onMounted(async () => {
   if (chatHistory.value.length === 0) {
     await createNewChat()
   }
+
+    //监听用户是否拖动滚动条
+  messagesContainer.value?.addEventListener('scroll', () => {
+    const el = messagesContainer.value
+    if (!el) return
+    const threshold = 100
+    isUserScrolling = el.scrollHeight - el.scrollTop - el.clientHeight > threshold
+  })
+
 })
 
 // 解析ECharts代码块
@@ -652,9 +670,9 @@ const parseECharts = (text: string): { processedText: string; echarts: EChartDat
       const echartsJson = match[1].trim()
       const option = JSON.parse(echartsJson)
       const id = `echart_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
-
+      
       echarts.push({ id, option })
-
+      
       // 将echarts代码块替换为占位符
       processedText = processedText.replace(match[0], `<div class="echart-placeholder" data-chart-id="${id}"></div>`)
     } catch (error) {
@@ -671,8 +689,8 @@ const formatAnswer = async (text: string) => {
   try {
     // 先解析ECharts代码块
     const { processedText, echarts } = parseECharts(text)
-
-    // 配置marked以更好地支持表格
+    
+    // 配置marked以更好地支持表格  
     const html = await marked.parse(processedText, {
       gfm: true,
       breaks: true,
@@ -681,11 +699,16 @@ const formatAnswer = async (text: string) => {
 
     // 为表格添加容器包装和强制样式属性
     const wrappedHtml = html.replace(
-      /<table>/g,
-      '<div class="table-container"><table class="excel-table" border="1" width="auto" cellspacing="0" cellpadding="0">'
+      /<table>/g, 
+      `<details class="table-wrapper" open>
+      <summary>
+          Expand / Collapse table
+      </summary>
+      <div class="table-container"><table class="excel-table" border="1" width="auto" cellspacing="0" cellpadding="0">`
     ).replace(
-      /<\/table>/g,
-      '</table></div>'
+    /<\/table>/g,
+    '</table></div></details>'
+
     ).replace(
       /<th>/g,
       '<th style="border: 1px solid #cbd5e1; padding: 12px; background: #f1f5f9;">'
@@ -696,12 +719,12 @@ const formatAnswer = async (text: string) => {
 
     const sanitizedHtml = DOMPurify.sanitize(wrappedHtml, {
       ALLOWED_TAGS: [
-        'strong', 'em', 'code', 'pre', 'a', 'br', 'p',
+        'strong', 'em', 'code', 'pre', 'a', 'br', 'p', 
         'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'span',
         'blockquote', 'hr', 'table', 'thead', 'tbody',
-        'tr', 'th', 'td', 'div'
+        'tr', 'th', 'td', 'div', 'details', 'summary'
       ],
-      ALLOWED_ATTR: ['href', 'target', 'class', 'style', 'data-chart-id', 'border', 'cellspacing', 'cellpadding']
+      ALLOWED_ATTR: ['href', 'target', 'class', 'style', 'data-chart-id', 'border', 'cellspacing', 'cellpadding', 'open']
     }) as string
 
     console.log('Markdown输入:', processedText)
@@ -728,7 +751,7 @@ const sendMessage = async () => {
       isUser: true,
     }
     messages.value.push(userMessage)
-
+    
     // 发射消息接收事件
     emit('messageReceived', userMessage)
 
@@ -778,7 +801,7 @@ const sendMessage = async () => {
         if (!eventData) continue
 
         const jsonData = eventData.replace(/^data:\s*/, '')
-
+        
         try {
           const data = JSON.parse(jsonData) as ChatMessageResponse
           if (data.answer) {
@@ -786,7 +809,7 @@ const sendMessage = async () => {
             const formatted = await formatAnswer(parseThink(botMessage.text).answer)
             botMessage.formattedText = formatted.html
             botMessage.echarts = formatted.echarts
-
+            
             // 更新会话ID和消息ID
             if (data.conversationId) {
               newConversationId = data.conversationId
@@ -794,14 +817,13 @@ const sendMessage = async () => {
             if (data.messageId) {
               newMessageId = data.messageId
             }
-
+            
             // 获取并存储taskId
             if (data.taskId) {
               currentTaskId.value = data.taskId
             }
-
-            messages.value = [...messages.value]
-            await scrollToBottom()
+            
+            throttledScrollToBottom()
           }
         } catch (e) {
           console.error('解析错误:', e)
@@ -821,8 +843,7 @@ const sendMessage = async () => {
             const formatted = await formatAnswer(parseThink(botMessage.text).answer)
             botMessage.formattedText = formatted.html
             botMessage.echarts = formatted.echarts
-            messages.value = [...messages.value]
-
+            
             if (data.conversationId) {
               newConversationId = data.conversationId
             }
@@ -849,7 +870,6 @@ const sendMessage = async () => {
           botMessage.sources = data
           botMessage.conversationId = newConversationId
           botMessage.messageId = newMessageId
-          messages.value = [...messages.value]
         }
       } catch (error) {
         console.log('获取文件来源失败:', error)
@@ -882,17 +902,36 @@ const sendMessage = async () => {
     if (messages.value[messages.value.length - 1]?.isLoading) {
       messages.value[messages.value.length - 1].isLoading = false
     }
-    await scrollToBottom()
+    scrollToBottomForce()
   }
 }
 
-const scrollToBottom = async () => {
+const scrollToBottomForce = async () => {
   await nextTick()
   if (messagesContainer.value) {
     messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
   }
 }
 
+//将锚点滚动到最底部
+const scrollToBottom = async () => {
+  await nextTick()
+  setTimeout(() => {
+  requestAnimationFrame(() => {
+    if (messagesContainer.value && !isUserScrolling) {
+      bottomAnchor.value.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        })
+    }
+  })
+  },60)
+}
+
+const throttledScrollToBottom = throttle(() => {
+    scrollToBottom()
+}, 300,{ leading: true, trailing: true })
+
 // 解析方法
 const parseThink = (text: string) => {
   const thinkRegex = /<think>(.*?)<\/think>/s
@@ -962,11 +1001,11 @@ const handleSourceClick = async (source: TraceFile, conversationId?: string, mes
   try {
     previewLoading.value = true
     filePreviewVisible.value = true
-
+    
     // 构造完整的PDF预览URL
     const baseUrl = window.location.protocol + '//' + window.location.host
     previewFileUrl.value = baseUrl + source.filePath
-
+    
     console.log('预览文件:', source)
     console.log('预览URL:', previewFileUrl.value)
     // 发射文件来源点击事件，让父组件处理
@@ -985,10 +1024,10 @@ const handleExcelClick = async (excelContent: string) => {
   try {
     excelPreviewLoading.value = true
     excelPreviewVisible.value = true
-
+    
     // 将 \n 字符串转换为真正的换行符
     const processedContent = excelContent.replace(/\\n/g, '\n')
-
+    
     // 如果marked转换失败，尝试手动解析markdown表格
     let htmlContent = ''
     try {
@@ -998,15 +1037,15 @@ const handleExcelClick = async (excelContent: string) => {
       console.warn('marked解析失败，尝试手动解析:', error)
       htmlContent = parseMarkdownTable(processedContent)
     }
-
+    
     // 如果HTML中没有table标签，尝试手动解析
     if (!htmlContent.includes('<table')) {
       console.warn('未检测到表格，手动解析markdown')
       htmlContent = parseMarkdownTable(processedContent)
     }
-
+    
     excelPreviewContent.value = htmlContent
-
+    
     console.log('原始Excel数据:', excelContent)
     console.log('处理后的Excel数据:', processedContent)
     console.log('最终HTML:', htmlContent)
@@ -1023,24 +1062,24 @@ const handleExcelClick = async (excelContent: string) => {
 const parseMarkdownTable = (markdown: string): string => {
   const lines = markdown.trim().split('\n')
   if (lines.length < 3) return markdown // 至少需要表头、分隔线、数据行
-
+  
   const headerLine = lines[0]
   const separatorLine = lines[1]
   const dataLines = lines.slice(2)
-
+  
   // 检查是否是有效的markdown表格
   if (!headerLine.includes('|') || !separatorLine.includes('---')) {
     return markdown
   }
-
+  
   // 解析表头
   const headers = headerLine.split('|').map(h => h.trim()).filter(h => h)
-
+  
   // 解析数据行
-  const rows = dataLines.map(line =>
+  const rows = dataLines.map(line => 
     line.split('|').map(cell => cell.trim()).filter(cell => cell)
   ).filter(row => row.length > 0)
-
+  
   // 生成HTML表格
   let html = `
     <div class="table-container">
@@ -1048,35 +1087,35 @@ const parseMarkdownTable = (markdown: string): string => {
         <thead>
           <tr>
   `
-
+  
   headers.forEach(header => {
     html += `<th style="border: 1px solid #cbd5e1; padding: 12px; background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); font-weight: 600; text-align: left; position: sticky; top: 0; z-index: 2; white-space: nowrap;">${header}</th>`
     //html += `<th style="border: 1px solid #cbd5e1; padding: 12px; background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); font-weight: 600; text-align: left;">${header}</th>`
   })
-
+  
   html += `
           </tr>
         </thead>
         <tbody>
   `
-
+  
   rows.forEach((row, rowIndex) => {
     html += '<tr>'
     row.forEach((cell, cellIndex) => {
-      const cellStyle = rowIndex % 2 === 0
+      const cellStyle = rowIndex % 2 === 0 
         ? 'border: 1px solid #cbd5e1; padding: 12px; background: white;'
         : 'border: 1px solid #cbd5e1; padding: 12px; background: #f8fafc;'
       html += `<td style="${cellStyle}">${cell}</td>`
     })
     html += '</tr>'
   })
-
+  
   html += `
         </tbody>
       </table>
     </div>
   `
-
+  
   return html
 }
 
@@ -1090,17 +1129,17 @@ const handleStopStream = async () => {
   if (currentTaskId.value) {
     try {
       await stopMessagesStream(Number(props.chatType), currentTaskId.value, props.userId)
-
-
+      
+      
 
       // 隐藏中止按钮
       showStopButton.value = false
-
+      
 
 
       // 停止加载状态
       isLoading.value = false
-
+      
       // 移除当前消息的加载状态
       if (messages.value.length > 0) {
         const lastMessage = messages.value[messages.value.length - 1]
@@ -1111,10 +1150,10 @@ const handleStopStream = async () => {
           }
         }
       }
-
+      
       // 清除taskId
       currentTaskId.value = ''
-
+      
       ElMessage.success('已停止生成')
     } catch (error) {
       console.error('停止流式回答失败:', error)
@@ -1131,7 +1170,7 @@ const handleMessageHover = (index: number, isHovered: boolean) => {
 // 复制消息内容
 const handleCopyMessage = async (message: Message) => {
   const textToCopy = message.text
-
+  
   try {
     // 优先使用现代的 Clipboard API
     if (navigator.clipboard && window.isSecureContext) {
@@ -1139,7 +1178,7 @@ const handleCopyMessage = async (message: Message) => {
       ElMessage.success('已复制到剪贴板')
       return
     }
-
+    
     // 回退到传统方法
     const textArea = document.createElement('textarea')
     textArea.value = textToCopy
@@ -1149,10 +1188,10 @@ const handleCopyMessage = async (message: Message) => {
     document.body.appendChild(textArea)
     textArea.focus()
     textArea.select()
-
+    
     const successful = document.execCommand('copy')
     document.body.removeChild(textArea)
-
+    
     if (successful) {
       ElMessage.success('已复制到剪贴板')
     } else {
@@ -1180,13 +1219,13 @@ const handleCancelEdit = () => {
 // 保存编辑
 const handleSaveEdit = async () => {
   if (!editingMessageText.value.trim()) return
-
+  
   const newText = editingMessageText.value.trim()
-
+  
   // 重置编辑状态
   editingMessageIndex.value = -1
   editingMessageText.value = ''
-
+  
   // 将编辑后的文本作为新的用户问题发送
   inputMessage.value = newText
   await sendMessage()
@@ -1195,14 +1234,14 @@ const handleSaveEdit = async () => {
 // 重新生成回答
 const handleRegenerateMessage = async (index: number) => {
   if (index === 0) return
-
+  
   // 获取前一条用户消息
   const userMessage = messages.value[index - 1]
   if (!userMessage || !userMessage.isUser) return
-
+  
   // 删除当前助手消息及之后的消息
   messages.value = messages.value.slice(0, index)
-
+  
   // 直接重新生成，不创建新的用户消息
   await regenerateResponse(userMessage.text)
 }
@@ -1220,7 +1259,7 @@ const regenerateResponse = async (userQuery: string) => {
       formattedText: ''
     })
     messages.value.push(botMessage)
-    await scrollToBottom()
+    throttledScrollToBottom()
 
     // 获取当前会话的会话ID
     const currentSession = chatHistory.value[currentChatIndex.value]
@@ -1258,7 +1297,7 @@ const regenerateResponse = async (userQuery: string) => {
         if (!eventData) continue
 
         const jsonData = eventData.replace(/^data:\s*/, '')
-
+        
         try {
           const data = JSON.parse(jsonData) as ChatMessageResponse
           if (data.answer) {
@@ -1266,7 +1305,7 @@ const regenerateResponse = async (userQuery: string) => {
             const formatted = await formatAnswer(parseThink(botMessage.text).answer)
             botMessage.formattedText = formatted.html
             botMessage.echarts = formatted.echarts
-
+            
             // 更新会话ID和消息ID
             if (data.conversationId) {
               newConversationId = data.conversationId
@@ -1274,14 +1313,13 @@ const regenerateResponse = async (userQuery: string) => {
             if (data.messageId) {
               newMessageId = data.messageId
             }
-
+            
             // 获取并存储taskId
             if (data.taskId) {
               currentTaskId.value = data.taskId
             }
-
-            messages.value = [...messages.value]
-            await scrollToBottom()
+            
+            throttledScrollToBottom()
           }
         } catch (e) {
           console.error('解析错误:', e)
@@ -1301,8 +1339,7 @@ const regenerateResponse = async (userQuery: string) => {
             const formatted = await formatAnswer(parseThink(botMessage.text).answer)
             botMessage.formattedText = formatted.html
             botMessage.echarts = formatted.echarts
-            messages.value = [...messages.value]
-
+            
             if (data.conversationId) {
               newConversationId = data.conversationId
             }
@@ -1329,7 +1366,6 @@ const regenerateResponse = async (userQuery: string) => {
           botMessage.sources = data
           botMessage.conversationId = newConversationId
           botMessage.messageId = newMessageId
-          messages.value = [...messages.value]
         }
       } catch (error) {
         console.log('获取文件来源失败:', error)
@@ -1362,7 +1398,7 @@ const regenerateResponse = async (userQuery: string) => {
     if (messages.value[messages.value.length - 1]?.isLoading) {
       messages.value[messages.value.length - 1].isLoading = false
     }
-    await scrollToBottom()
+    scrollToBottomForce()
   }
 }
 
@@ -1381,10 +1417,10 @@ const handleDislikeMessage = (index: number) => {
 // 处理推荐问题点击事件
 const handleRecommendQuestionClick = (question: string) => {
   if (!question.trim() || isLoading.value) return
-
+  
   // 将问题内容填入输入框
   inputMessage.value = question
-
+  
   // 发送问题
   sendMessage()
 }
@@ -1392,7 +1428,7 @@ const handleRecommendQuestionClick = (question: string) => {
 
 <style scoped>
 .chat-container {
-  height: 90%;
+  height: 100%;
   display: flex;
   background: #ffffff;
   position: relative;
@@ -2108,7 +2144,7 @@ const handleRecommendQuestionClick = (question: string) => {
 
 /* 表格样式优化 */
 .answer-content :deep(table) {
-  width: auto;
+  width: auto; 
   min-width: 1000px;
   max-width: 2500px;
   margin: 1.5rem 0;
@@ -2123,6 +2159,20 @@ const handleRecommendQuestionClick = (question: string) => {
 
 }
 
+::v-deep .table-wrapper summary {
+  cursor: pointer;
+  display: list-item;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  padding: 6px 8px;
+  background: #f8fafc;
+  /* border: 1px solid #e2e8f0; */
+  /* border-radius: 6px; */
+  font-size: 14px;
+}
+
+
 /* .excel-table th,
 .excel-table td {
   white-space: nowrap;
@@ -2216,14 +2266,14 @@ const handleRecommendQuestionClick = (question: string) => {
     margin: 1rem 0;
     border: 1px solid #e5e7eb;
   }
-
+  
   .answer-content :deep(th),
   .answer-content :deep(td) {
     padding: 0.5rem 0.75rem;
     max-width: 150px;
     border: 1px solid #e5e7eb;
   }
-
+  
   .answer-content :deep(th) {
     font-size: 0.75rem;
     border-bottom: 2px solid #e5e7eb;
@@ -2502,7 +2552,7 @@ const handleRecommendQuestionClick = (question: string) => {
   .chat-messages {
     padding-bottom: 100px;
   }
-
+  
   .send-button {
     right: 0.5rem;
     height: 2.25rem;
@@ -2545,12 +2595,12 @@ const handleRecommendQuestionClick = (question: string) => {
   .stop-button-container {
     top: -2rem;
   }
-
+  
   .stop-button {
     width: 32px;
     height: 32px;
   }
-
+  
   .stop-icon {
     width: 14px;
     height: 14px;
@@ -2632,7 +2682,7 @@ const handleRecommendQuestionClick = (question: string) => {
     border-radius: 12px;
     overflow: hidden;
   }
-
+  
   .el-dialog__header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
@@ -2640,26 +2690,26 @@ const handleRecommendQuestionClick = (question: string) => {
     margin: 0;
     padding: 20px 24px;
   }
-
+  
   .el-dialog__title {
     color: white;
     font-weight: 600;
     font-size: 18px;
   }
-
+  
   .el-dialog__headerbtn {
     .el-dialog__close {
       color: white;
       font-size: 20px;
       transition: all 0.2s ease;
-
+      
       &:hover {
         color: rgba(255, 255, 255, 0.8);
         transform: scale(1.1);
       }
     }
   }
-
+  
   .el-dialog__body {
     padding: 0;
     background: #f5f7fa;
@@ -2673,7 +2723,7 @@ const handleRecommendQuestionClick = (question: string) => {
   justify-content: center;
   background: #f5f7fa;
   border-radius: 0 0 12px 12px;
-
+  
   .pdf-preview {
     width: 100%;
     height: 600px;
@@ -2698,6 +2748,14 @@ const handleRecommendQuestionClick = (question: string) => {
   position: relative;
 }
 
+::v-deep .icon-chevron {
+  width: 20px;
+  height: 20px;
+  transition: transform 0.3s ease;
+  color: #333; /* 让箭头颜色和文字颜色一致 */
+}
+
+
 .chart-wrapper {
   margin-bottom: 1.5rem;
   background: #ffffff;
@@ -2726,22 +2784,22 @@ const handleRecommendQuestionClick = (question: string) => {
     max-width: 100%;
     min-width: 280px; /* 移动端最小宽度 */
   }
-
+  
   .chart-wrapper {
     padding: 1rem;
     margin-bottom: 1rem;
   }
-
+  
   .message-chart {
     height: 400px;
     min-height: 400px;
   }
-
+  
   /* 移动端消息内容区域调整 */
   .message-content-wrapper {
     max-width: 92%;
   }
-
+  
   /* 移动端包含图表的消息气泡宽度 */
   .assistant-message .message-content-wrapper.has-charts {
     max-width: 96%;
@@ -2758,19 +2816,19 @@ const handleRecommendQuestionClick = (question: string) => {
       max-height: 95vh;
       overflow: hidden;
     }
-
+    
     .el-dialog__header {
       padding: 16px 20px;
     }
-
+    
     .el-dialog__title {
       font-size: 16px;
     }
   }
-
+  
   .preview-content {
     min-height: 500px;
-
+    
     .pdf-preview {
       height: 500px;
     }
@@ -2783,7 +2841,7 @@ const handleRecommendQuestionClick = (question: string) => {
     border-radius: 12px;
     overflow: hidden;
   }
-
+  
   .el-dialog__header {
     background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
     color: white;
@@ -2791,26 +2849,26 @@ const handleRecommendQuestionClick = (question: string) => {
     margin: 0;
     padding: 20px 24px;
   }
-
+  
   .el-dialog__title {
     color: white;
     font-weight: 600;
     font-size: 18px;
   }
-
+  
   .el-dialog__headerbtn {
     .el-dialog__close {
       color: white;
       font-size: 20px;
       transition: all 0.2s ease;
-
+      
       &:hover {
         color: rgba(255, 255, 255, 0.8);
         transform: scale(1.1);
       }
     }
   }
-
+  
   .el-dialog__body {
     padding: 0;
     background: #f5f7fa;
@@ -2827,7 +2885,7 @@ const handleRecommendQuestionClick = (question: string) => {
   background: #f5f7fa;
   border-radius: 0 0 12px 12px;
   padding: 20px;
-
+  
   .excel-table-content {
     width: 100%;
     background: white;
@@ -2835,7 +2893,7 @@ const handleRecommendQuestionClick = (question: string) => {
     padding: 20px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     overflow-x: auto;
-
+    
     /* 表格样式优化 - 加强边框显示，使用更高优先级 */
     :deep(table),
     :deep(.answer-content table),
@@ -2851,7 +2909,7 @@ const handleRecommendQuestionClick = (question: string) => {
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
       max-width: none !important;
     }
-
+    
     :deep(th),
     :deep(td),
     :deep(.answer-content th),
@@ -2866,7 +2924,7 @@ const handleRecommendQuestionClick = (question: string) => {
       position: relative !important;
       max-width: none !important;
     }
-
+    
     :deep(th),
     :deep(.answer-content th),
     :deep(.table-container th) {
@@ -2882,7 +2940,7 @@ const handleRecommendQuestionClick = (question: string) => {
       text-transform: uppercase !important;
       letter-spacing: 0.025em !important;
     }
-
+    
     :deep(td),
     :deep(.answer-content td),
     :deep(.table-container td) {
@@ -2891,20 +2949,20 @@ const handleRecommendQuestionClick = (question: string) => {
       border-bottom: 1px solid #cbd5e1 !important;
       transition: all 0.2s ease !important;
     }
-
+    
     :deep(tr:nth-child(even) td),
     :deep(.answer-content tr:nth-child(even) td),
     :deep(.table-container tr:nth-child(even) td) {
       background: #f8fafc !important;
     }
-
+    
     :deep(tr:hover td),
     :deep(.answer-content tr:hover td),
     :deep(.table-container tr:hover td) {
       background: #e0f2fe !important;
       transform: scale(1.002) !important;
     }
-
+    
     /* 第一列样式加强 */
     :deep(th:first-child),
     :deep(td:first-child),
@@ -2915,7 +2973,7 @@ const handleRecommendQuestionClick = (question: string) => {
       border-left: 2px solid #cbd5e1 !important;
       font-weight: 500 !important;
     }
-
+    
     /* 最后一列右边框加强 */
     :deep(th:last-child),
     :deep(td:last-child),
@@ -2925,7 +2983,7 @@ const handleRecommendQuestionClick = (question: string) => {
     :deep(.table-container td:last-child) {
       border-right: 2px solid #cbd5e1 !important;
     }
-
+    
     /* 最后一行底边框加强 */
     :deep(tr:last-child td),
     :deep(.answer-content tr:last-child td),
@@ -2968,14 +3026,14 @@ const handleRecommendQuestionClick = (question: string) => {
       width: 95% !important;
       margin: 2.5vh auto;
     }
-
+    
     .excel-table-content {
       padding: 12px;
-
+      
       :deep(table) {
         font-size: 12px;
       }
-
+      
       :deep(th),
       :deep(td) {
         padding: 8px 12px;
@@ -2988,14 +3046,14 @@ const handleRecommendQuestionClick = (question: string) => {
 .excel-item {
   border: 1px solid #22c55e !important;
   background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
-
+  
   &:hover {
     background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
     border-color: #16a34a !important;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
   }
-
+  
   .source-name {
     color: #15803d;
     font-weight: 600;
@@ -3131,35 +3189,35 @@ const handleRecommendQuestionClick = (question: string) => {
     padding: 0.5rem;
     margin-top: 0.75rem;
   }
-
+  
   .recommend-questions-list {
     gap: 0.375rem;
   }
-
+  
   .recommend-question-btn {
     padding: 0.375rem 0.5rem;
     font-size: 0.75rem;
     max-width: 200px;
     border-radius: 16px;
   }
-
+  
   .question-text {
     font-size: 0.75rem;
   }
-
+  
   .question-icon {
     width: 14px;
     height: 14px;
   }
-
+  
   .recommend-questions-header {
     font-size: 0.75rem;
     margin-bottom: 0.375rem;
   }
-
+  
   .recommend-icon {
     width: 12px;
     height: 12px;
   }
 }
-</style>
+</style>
\ No newline at end of file