1.修复AI卡顿问题

src/api/aiChat/ai_index.js

@@ -1,4 +1,4 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 /**
  * 获取聊天历史记录
@@ -9,29 +9,24 @@ import request from '@/utils/request'
  * @param {string} [params.beforeId] 获取此ID之前的记录
  * @returns {Promise} 包含历史记录的Promise
  */
-export const getHistory = ({
+export const getHistory = ({ conversationId, user, limit = 20, beforeId }) => {
-    conversationId,
-    user,
-    limit = 20,
-    beforeId
-}) => {
   const params = {
     conversationId,
     user,
-        limit
+    limit,
-    }
+  };
 
   // 如果有beforeId参数，添加到请求中（后端参数名为firstId）
   if (beforeId) {
-        params.firstId = beforeId
+    params.firstId = beforeId;
   }
 
   return request({
-        url: '/aitutor/aichat/getMessagesToUser',
+    url: "/aitutor/aichat/getMessagesToUser",
-        method: 'get',
+    method: "get",
-        params
+    params,
-    })
+  });
-}
+};
 
 /**
  * 发送反馈（点赞/点踩）
@@ -41,21 +36,17 @@ export const getHistory = ({
  * @param {string} params.user 用户ID
  * @returns {Promise} 包含操作结果的Promise
  */
-export const sendFeedback = ({
+export const sendFeedback = ({ messageId, action, user }) => {
-    messageId,
-    action,
-    user
-}) => {
   return request({
-        url: '/aitutor/aichat/feedback',
+    url: "/aitutor/aichat/feedback",
-        method: 'post',
+    method: "post",
     data: {
       message_id: messageId,
-            rating: action === 1 ? 'like' : 'dislike',
+      rating: action === 1 ? "like" : "dislike",
-            user
+      user,
-        }
+    },
-    })
+  });
-}
+};
 
 /**
  * 上传文件
@@ -64,16 +55,16 @@ export const sendFeedback = ({
  * @returns {Promise} 包含文件URL的Promise
  */
 export const uploadFile = (formData, user) => {
-    formData.append('user', user)
+  formData.append("user", user);
   return request({
-        url: '/aitutor/aichat/files/upload',
+    url: "/aitutor/aichat/files/upload",
-        method: 'post',
+    method: "post",
     data: formData,
     headers: {
-            'Content-Type': 'multipart/form-data'
+      "Content-Type": "multipart/form-data",
-        }
+    },
-    })
+  });
-}
+};
 
 /**
  * 创建新会话
@@ -83,14 +74,14 @@ export const uploadFile = (formData, user) => {
  */
 export const createConversation = (user, title) => {
   return request({
-        url: '/aitutor/aichat/conversation/create',
+    url: "/aitutor/aichat/conversation/create",
-        method: 'post',
+    method: "post",
     data: {
       user,
-            title
+      title,
-        }
+    },
-    })
+  });
-}
+};
 
 /**
  * 删除会话
@@ -100,11 +91,11 @@ export const createConversation = (user, title) => {
  */
 export const deleteConversation = (conversationId, user) => {
   return request({
-        url: '/aitutor/aichat/conversation/delete',
+    url: "/aitutor/aichat/conversation/delete",
-        method: 'post',
+    method: "post",
     data: {
       conversation_id: conversationId,
-            user
+      user,
-        }
+    },
-    })
+  });
-}
+};

src/layout/components/Aichat/ChatPopup.vue

@@ -24,8 +24,14 @@
         <button class="retry-button" @click="retryInit">重试</button>
       </div>
 
+      <!-- 消息过多提示 -->
+      <div v-if="messages.length > maxVisibleMessages" class="message-limit-notice">
+        <div class="notice-text">为了保证页面性能，仅显示最新的 {{ maxVisibleMessages }} 条消息</div>
+        <div class="notice-subtext">共 {{ messages.length }} 条消息</div>
+      </div>
+
       <!-- 消息项 -->
-      <div v-for="(message, index) in messages" :key="index" class="message-item">
+      <div v-for="(message, index) in visibleMessages" :key="index" class="message-item">
         <!-- 用户消息 -->
         <div v-if="message.sender === 'user'" class="user-message">
           <div class="message-content">
@@ -53,8 +59,9 @@
             <!-- 引用来源 -->
             <div v-if="message.retrieverResources && message.retrieverResources.length > 0" class="reference-sources">
               <div class="reference-title">引用来源：</div>
-              <div v-for="(group, groupIndex) in getGroupedReferences(message.retrieverResources)" :key="groupIndex"
+              <div
-                class="reference-group">
+                v-for="(group, groupIndex) in (message.groupedReferences || getGroupedReferences(message.retrieverResources))"
+                :key="groupIndex" class="reference-group">
                 <div class="reference-doc"
                   :class="{ expanded: showSingleReference[`${message.messageId}-${group.docName}`] }"
                   @click="toggleSingleReference(message.messageId, group.docName)">
@@ -172,7 +179,19 @@ export default {
       // 请求监控
       activeRequests: new Map(), // 存储活跃请求的信息
       requestMonitorInterval: null,
-      maxRequestDuration: 60000 // 最大请求持续时间60秒
+      maxRequestDuration: 60000, // 最大请求持续时间60秒
+
+      // Markdown渲染缓存
+      markdownCache: new Map(), // 缓存已渲染的Markdown内容
+      maxCacheSize: 100, // 最大缓存条目数
+
+      // 引用资源分组缓存
+      referencesCache: new Map(), // 缓存引用资源分组结果
+      maxReferencesCacheSize: 50, // 最大引用缓存条目数
+
+      // 消息显示优化
+      maxVisibleMessages: 50, // 最大可见消息数量
+      messageRenderBatch: 20, // 每批渲染的消息数量
     }
   },
   computed: {
@@ -189,6 +208,14 @@ export default {
     // 获取用户名
     userName() {
       return this.name || localStorage.getItem('userName') || '用户'
+    },
+    // 获取可见消息列表（性能优化）
+    visibleMessages() {
+      if (this.messages.length <= this.maxVisibleMessages) {
+        return this.messages
+      }
+      // 只显示最新的消息，保持对话连续性
+      return this.messages.slice(-this.maxVisibleMessages)
     }
   },
   watch: {
@@ -272,6 +299,12 @@ export default {
     // 清理引用展示状态
     this.showSingleReference = {}
 
+    // 清理markdown缓存
+    this.markdownCache.clear()
+
+    // 清理引用资源分组缓存
+    this.referencesCache.clear()
+
     // 重置所有状态
     this.conversation_id = ''
     this.earliestMessageId = null
@@ -341,19 +374,21 @@ export default {
 
         // 从队列中移除当前请求
         this.requestQueue = this.requestQueue.filter(id => id !== requestId)
-        
+        // console.log('历史记录响应:', res);
         if (this.isDestroyed) {
           return
         }
 
         if (res.code === 200 && res.data && Array.isArray(res.data.data)) {
           const newMessages = []
+          // console.log('历史记录:', res.data.data)
 
-          // 处理历史消息
+          // 批量处理历史消息，减少DOM操作
+          const messagesBatch = []
           res.data.data.forEach(msg => {
             // 用户消息
             if (msg.query) {
-              newMessages.push({
+              messagesBatch.push({
                 sender: 'user',
                 avatar: require('@/assets/ai/yonghu.png'),
                 content: msg.query,
@@ -363,9 +398,10 @@ export default {
               })
             }
 
-            // AI消息
+            // AI消息 - 延迟计算groupedReferences
             if (msg.answer) {
-              newMessages.push({
+              const retrieverResources = msg.retriever_resources || []
+              const aiMessage = {
                 sender: 'ai',
                 avatar: require('@/assets/ai/AI.png'),
                 content: msg.answer,
@@ -373,18 +409,32 @@ export default {
                 conversationId: msg.conversation_id,
                 created_at: msg.created_at,
                 feedback: msg.feedback || null,
-                retrieverResources: msg.retriever_resources || [],
+                retrieverResources: retrieverResources,
                 streamCompleted: true // 历史消息的流输出已完成
+              }
+
+              // 只有在有引用资源时才预计算分组
+              if (retrieverResources && retrieverResources.length > 0) {
+                // 使用异步方式计算，避免阻塞主线程
+                this.$nextTick(() => {
+                  aiMessage.groupedReferences = this.getGroupedReferences(retrieverResources)
                 })
               }
+
+              messagesBatch.push(aiMessage)
+            }
           })
 
           // 按时间排序（从旧到新）
-          newMessages.sort((a, b) => {
+          messagesBatch.sort((a, b) => {
             return a.created_at - b.created_at
           })
 
-          this.messages = newMessages
+          newMessages.push(...messagesBatch)
+          // console.log('处理后的历史记录:', newMessages)
+
+          // 分批渲染消息，避免一次性渲染过多消息导致卡死
+          this.renderMessagesInBatches(newMessages)
 
           if (newMessages.length > 0) {
             this.conversation_id = newMessages[0].conversationId
@@ -398,16 +448,18 @@ export default {
               this.earliestMessageId = newMessages[0].messageId.replace('ai-', '')
             }
           }
-
+          // console.log('历史记录:', newMessages)
           this.hasMoreHistory = res.data.has_more || false
         } else {
+          // console.log('没有历史记录')
           // 没有历史记录，显示欢迎消息
-          this.messages = [{
+          const welcomeMessages = [{
             sender: 'ai',
             avatar: require('@/assets/ai/AI.png'),
             content: '你好！我是智水AI辅导员，有什么可以帮助你的吗？',
             messageId: 'welcome-' + Date.now()
           }]
+          this.renderMessagesInBatches(welcomeMessages)
           this.hasMoreHistory = false
         }
 
@@ -435,12 +487,13 @@ export default {
         this.showToast(errorMessage)
 
         // 显示欢迎消息作为降级方案
-        this.messages = [{
+        const fallbackMessages = [{
           sender: 'ai',
           avatar: require('@/assets/ai/AI.png'),
           content: '你好！我是智水AI辅导员，有什么可以帮助你的吗？\n\n如果遇到网络问题，请稍后重试或联系管理员。',
           messageId: 'welcome-' + Date.now()
         }]
+        this.renderMessagesInBatches(fallbackMessages)
 
         // 重置相关状态
         this.hasMoreHistory = false
@@ -516,6 +569,7 @@ export default {
 
             // AI消息
             if (msg.answer) {
+              const retrieverResources = msg.retriever_resources || []
               newMessages.push({
                 sender: 'ai',
                 avatar: require('@/assets/ai/AI.png'),
@@ -524,7 +578,8 @@ export default {
                 conversationId: msg.conversation_id,
                 created_at: msg.created_at,
                 feedback: msg.feedback || null,
-                retrieverResources: msg.retriever_resources || []
+                retrieverResources: retrieverResources,
+                groupedReferences: this.getGroupedReferences(retrieverResources) // 预计算分组引用
               })
             }
           })
@@ -772,6 +827,7 @@ export default {
                 }
                 if (data.retriever_resources) {
                   aiMsg.retrieverResources = data.retriever_resources
+                  aiMsg.groupedReferences = this.getGroupedReferences(data.retriever_resources) // 预计算分组引用
                 }
                 // 标记流输出完成
                 aiMsg.streamCompleted = true
@@ -833,6 +889,49 @@ export default {
       }
     },
 
+    /**
+     * 分批渲染消息，避免一次性渲染过多消息导致卡死
+     */
+    renderMessagesInBatches(newMessages) {
+      if (!newMessages || newMessages.length === 0) {
+        this.messages = []
+        return
+      }
+
+      // 如果消息数量较少，直接渲染
+      if (newMessages.length <= this.messageRenderBatch) {
+        this.messages = newMessages
+        return
+      }
+
+      // 分批渲染
+      this.messages = []
+      let currentIndex = 0
+
+      const renderNextBatch = () => {
+        if (this.isDestroyed || currentIndex >= newMessages.length) {
+          return
+        }
+
+        const endIndex = Math.min(currentIndex + this.messageRenderBatch, newMessages.length)
+        const batch = newMessages.slice(currentIndex, endIndex)
+
+        // 添加当前批次的消息
+        this.messages.push(...batch)
+        currentIndex = endIndex
+
+        // 如果还有更多消息，继续渲染下一批
+        if (currentIndex < newMessages.length) {
+          this.$nextTick(() => {
+            setTimeout(renderNextBatch, 10) // 10ms延迟，让浏览器有时间处理当前批次
+          })
+        }
+      }
+
+      // 开始渲染第一批
+      renderNextBatch()
+    },
+
     /**
      * 滚动到底部
      */
@@ -911,12 +1010,30 @@ export default {
     },
 
     /**
-     * 渲染Markdown内容
+     * 渲染Markdown内容（带缓存优化）
      */
     renderMarkdown(text) {
       if (!text) return ''
+
+      // 检查缓存
+      if (this.markdownCache.has(text)) {
+        return this.markdownCache.get(text)
+      }
+
+      // 渲染markdown
       const html = this.md.render(text)
-      return DOMPurify.sanitize(html)
+      const sanitizedHtml = DOMPurify.sanitize(html)
+
+      // 缓存管理：如果缓存超过最大大小，删除最旧的条目
+      if (this.markdownCache.size >= this.maxCacheSize) {
+        const firstKey = this.markdownCache.keys().next().value
+        this.markdownCache.delete(firstKey)
+      }
+
+      // 添加到缓存
+      this.markdownCache.set(text, sanitizedHtml)
+
+      return sanitizedHtml
     },
 
     /**
@@ -1000,13 +1117,25 @@ export default {
     },
 
     /**
-     * 获取分组的引用来源
+     * 获取分组的引用来源（带缓存优化）
      */
     getGroupedReferences(resources) {
       if (!resources || !Array.isArray(resources)) {
         return []
       }
 
+      // 生成缓存键
+      const cacheKey = JSON.stringify(resources.map(r => ({
+        document_name: r.document_name,
+        id: r.id || r.chunk_id
+      })))
+
+      // 检查缓存
+      if (this.referencesCache.has(cacheKey)) {
+        return this.referencesCache.get(cacheKey)
+      }
+
+      // 计算分组
       const grouped = {}
       resources.forEach(resource => {
         const docName = resource.document_name || '未知文档'
@@ -1016,10 +1145,20 @@ export default {
         grouped[docName].push(resource)
       })
 
-      return Object.entries(grouped).map(([docName, items]) => ({
+      const result = Object.entries(grouped).map(([docName, items]) => ({
         docName,
         items
       }))
+
+      // 缓存结果
+      if (this.referencesCache.size >= this.maxReferencesCacheSize) {
+        // 删除最旧的缓存条目
+        const firstKey = this.referencesCache.keys().next().value
+        this.referencesCache.delete(firstKey)
+      }
+      this.referencesCache.set(cacheKey, result)
+
+      return result
     },
 
     /**
@@ -1972,6 +2111,28 @@ export default {
   color: #722ed1 !important;
 }
 
+/* 消息限制提示样式 */
+.message-limit-notice {
+  background: #f6f8fa;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  padding: 12px 16px;
+  margin: 16px 0;
+  text-align: center;
+}
+
+.notice-text {
+  color: #586069;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.notice-subtext {
+  color: #959da5;
+  font-size: 12px;
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .chat-popup {

src/utils/ai_request.js

@@ -5,7 +5,8 @@ import { showToast } from "@/utils/toast"; // 请替换为你的Toast组件
 
 // 创建axios实例
 const service = axios.create({
-  baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8088',
+  // baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8088',
+  baseURL: process.env.VUE_APP_BASE_API,
   timeout: 15000,
   headers: {
     "Content-Type": "application/json",