1.AI聊天页面加入爆内存边界处理

src/layout/components/Aichat/ChatPopup.vue

@@ -18,6 +18,12 @@
         <div class="no-more-text">没有更多历史记录了</div>
       </div>
 
+      <!-- 初始化失败重试按钮 -->
+      <div v-if="initFailed" class="init-failed">
+        <div class="failed-text">聊天初始化失败</div>
+        <button class="retry-button" @click="retryInit">重试</button>
+      </div>
+
       <!-- 消息项 -->
       <div v-for="(message, index) in messages" :key="index" class="message-item">
         <!-- 用户消息 -->
@@ -127,6 +133,7 @@ export default {
       inputMessage: '',
       messages: [],
       sending: false,
+      initFailed: false, // 初始化失败标志
 
       // 用户信息
       user: 'default_user',
@@ -152,7 +159,15 @@ export default {
       md: md,
 
       // 组件销毁标志
-      isDestroyed: false
+      isDestroyed: false,
+
+      // 性能优化和错误边界
+      requestQueue: [],
+      maxRetries: 2,
+      retryCount: 0,
+      performanceMonitor: null,
+      memoryCheckInterval: null,
+      lastMemoryUsage: 0
     }
   },
   computed: {
@@ -180,9 +195,9 @@ export default {
           if (!this.isDestroyed) {
             setTimeout(() => {
               if (!this.isDestroyed) {
-                this.scrollToBottom(false)
-              }
-            }, 100)
+                  this.scrollToBottom(false)
+                }
+              }, 100)
           }
         })
       }
@@ -197,6 +212,12 @@ export default {
     }
     console.log('当前用户学号:', this.user)
 
+    // 添加全局错误处理
+    this.setupErrorHandling()
+
+    // 启动性能监控
+    this.startPerformanceMonitoring()
+
     // 确保DOM完全渲染后再初始化聊天
     this.$nextTick(() => {
       setTimeout(async () => {
@@ -212,14 +233,50 @@ export default {
     // 设置销毁标志
     this.isDestroyed = true
     
+    // 移除全局错误处理器
+    window.removeEventListener('unhandledrejection', this.handleUnhandledRejection)
+    window.removeEventListener('error', this.handleGlobalError)
+    
+    // 停止性能监控
+    this.stopPerformanceMonitoring()
+    
     // 清理定时器
     if (this.loadDebounceTimer) {
       clearTimeout(this.loadDebounceTimer)
+      this.loadDebounceTimer = null
     }
     
     // 取消正在进行的请求
     if (this.currentCancel) {
       this.currentCancel()
+      this.currentCancel = null
+    }
+    
+    // 清理请求队列
+    this.requestQueue = []
+    
+    // 清理消息数据
+    this.messages = []
+    
+    // 清理引用展示状态
+    this.showSingleReference = {}
+    
+    // 重置所有状态
+    this.conversation_id = ''
+    this.earliestMessageId = null
+    this.inputMessage = ''
+    this.sending = false
+    this.isLoadingHistory = false
+    this.hasMoreHistory = false
+    this.initFailed = false
+    
+    // 强制垃圾回收（如果浏览器支持）
+    if (window.gc) {
+      try {
+        window.gc()
+      } catch (e) {
+        // 忽略错误
+      }
     }
   },
   methods: {
@@ -227,13 +284,57 @@ export default {
      * 初始化聊天 - 获取历史记录
      */
     async initChat() {
+      // 防止重复初始化
+      if (this.isLoadingHistory || this.isDestroyed) {
+        return
+      }
+      
       try {
-        const res = await getHistory({
+        this.isLoadingHistory = true
+        this.retryCount = 0
+        
+        // 添加到请求队列
+        const requestId = Date.now()
+        this.requestQueue.push(requestId)
+        
+        // 如果队列中有太多请求，清理旧请求
+        if (this.requestQueue.length > 3) {
+          this.requestQueue = this.requestQueue.slice(-3)
+        }
+        
+        // 添加超时控制，避免卡死
+        const timeoutPromise = new Promise((_, reject) => {
+          setTimeout(() => reject(new Error('请求超时')), 8000) // 减少到8秒
+        })
+        
+        // 创建取消Promise
+        const cancelPromise = new Promise((_, reject) => {
+          const checkCancel = () => {
+            if (this.isDestroyed || !this.requestQueue.includes(requestId)) {
+              reject(new Error('请求已取消'))
+            } else {
+              setTimeout(checkCancel, 100)
+            }
+          }
+          checkCancel()
+        })
+
+        const historyPromise = getHistory({
           user: this.user,
           conversationId: this.conversation_id || '',
           limit: 10
         })
 
+        // 使用Promise.race来实现超时和取消控制
+        const res = await Promise.race([historyPromise, timeoutPromise, cancelPromise])
+        
+        // 从队列中移除当前请求
+        this.requestQueue = this.requestQueue.filter(id => id !== requestId)
+        
+        if (this.isDestroyed) {
+          return
+        }
+
         if (res.code === 200 && res.data && Array.isArray(res.data.data)) {
           const newMessages = []
 
@@ -299,23 +400,58 @@ export default {
           this.hasMoreHistory = false
         }
 
-        // 滚动到底部
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.scrollToBottom(false) // 初始化时直接定位到底部，不使用平滑滚动
-          }, 100) // 减少延迟时间
-        })
-
+        this.initFailed = false
       } catch (error) {
         console.error('初始化聊天失败:', error)
-        this.showToast('加载历史记录失败')
-        // 显示欢迎消息
+        
+        // 如果是取消错误，直接返回
+        if (error.message === '请求已取消' || this.isDestroyed) {
+          return
+        }
+        
+        // 根据错误类型显示不同的提示信息
+        let errorMessage = '加载历史记录失败'
+        if (error.message === '请求超时') {
+          errorMessage = '网络连接超时，请检查网络后重试'
+        } else if (error.message && error.message.includes('Network Error')) {
+          errorMessage = '网络连接异常，请检查网络设置'
+        } else if (error.response && error.response.status === 401) {
+          errorMessage = '登录已过期，请重新登录'
+        } else if (error.response && error.response.status >= 500) {
+          errorMessage = '服务器暂时不可用，请稍后重试'
+        }
+        
+        this.showToast(errorMessage)
+        
+        // 显示欢迎消息作为降级方案
         this.messages = [{
           sender: 'ai',
           avatar: require('@/assets/ai/AI.png'),
-          content: '你好！我是智水AI辅导员，有什么可以帮助你的吗？',
+          content: '你好！我是智水AI辅导员，有什么可以帮助你的吗？\n\n如果遇到网络问题，请稍后重试或联系管理员。',
           messageId: 'welcome-' + Date.now()
         }]
+        
+        // 重置相关状态
+        this.hasMoreHistory = false
+        this.conversation_id = ''
+        this.earliestMessageId = null
+        this.initFailed = true // 标记初始化失败
+      } finally {
+        this.isLoadingHistory = false
+        
+        // 清理请求队列
+        this.requestQueue = []
+        
+        // 滚动到底部
+        if (!this.isDestroyed) {
+          this.$nextTick(() => {
+            setTimeout(() => {
+              if (!this.isDestroyed) {
+                this.scrollToBottom(false) // 初始化时直接定位到底部，不使用平滑滚动
+              }
+            }, 100) // 减少延迟时间
+          })
+        }
       }
     },
 
@@ -336,13 +472,20 @@ export default {
         const firstMessageElement = this.$refs.messageList.querySelector('.message-item')
         const anchorOffset = firstMessageElement ? firstMessageElement.offsetTop : 0
 
-        const res = await getHistory({
+        // 添加超时控制
+        const timeoutPromise = new Promise((_, reject) => {
+          setTimeout(() => reject(new Error('加载历史记录超时')), 8000) // 8秒超时
+        })
+
+        const historyPromise = getHistory({
           user: this.user,
           conversationId: this.conversation_id,
           limit: 10,
           beforeId: this.earliestMessageId
         })
 
+        const res = await Promise.race([historyPromise, timeoutPromise])
+
         if (res.code === 200 && res.data && Array.isArray(res.data.data) && res.data.data.length > 0) {
           const newMessages = []
 
@@ -424,17 +567,69 @@ export default {
         }
       } catch (error) {
         console.error('加载历史记录失败:', error)
-        this.showToast('加载历史记录失败')
+        
+        // 根据错误类型显示不同的提示信息
+        let errorMessage = '加载历史记录失败'
+        if (error.message === '加载历史记录超时') {
+          errorMessage = '加载超时，请检查网络连接'
+        } else if (error.message && error.message.includes('Network Error')) {
+          errorMessage = '网络连接异常'
+        } else if (error.response && error.response.status >= 500) {
+          errorMessage = '服务器繁忙，请稍后重试'
+        }
+        
+        this.showToast(errorMessage)
+        
+        // 如果是超时或网络错误，不改变hasMoreHistory状态，允许用户重试
+        if (!error.message || (!error.message.includes('超时') && !error.message.includes('Network'))) {
+          this.hasMoreHistory = false
+        }
       } finally {
         this.isLoadingHistory = false
       }
     },
 
+    /**
+     * 重试初始化
+     */
+    async retryInit() {
+      // 防止重复重试
+      if (this.isLoadingHistory || this.isDestroyed) {
+        return
+      }
+      
+      // 检查重试次数
+      if (this.retryCount >= this.maxRetries) {
+        this.showToast('重试次数过多，请刷新页面')
+        return
+      }
+      
+      this.initFailed = false
+      this.retryCount++
+      
+      // 清理之前的状态
+      this.messages = []
+      this.requestQueue = []
+      
+      try {
+        await this.initChat()
+      } catch (error) {
+        console.error('重试初始化失败:', error)
+        this.initFailed = true
+      }
+    },
+
     /**
      * 发送消息
      */
     async sendMessage() {
-      if (!this.inputMessage.trim() || this.sending) {
+      if (!this.inputMessage.trim() || this.sending || this.isDestroyed) {
+        return
+      }
+      
+      // 防止频繁发送
+      if (this.requestQueue.length > 2) {
+        this.showToast('请等待当前消息处理完成')
         return
       }
 
@@ -442,6 +637,10 @@ export default {
       this.inputMessage = ''
       this.sending = true
       
+      // 添加到请求队列
+      const requestId = Date.now()
+      this.requestQueue.push(requestId)
+
       // 添加用户消息
       const userMsg = {
         sender: 'user',
@@ -533,6 +732,10 @@ export default {
         this.showToast('发送消息失败')
       } finally {
         this.sending = false
+        
+        // 从请求队列中移除当前请求
+        this.requestQueue = this.requestQueue.filter(id => id !== requestId)
+        
         this.scrollToBottom(true) // 发送完成后使用平滑滚动
       }
     },
@@ -769,6 +972,158 @@ export default {
 
       // 添加到头像容器
       avatar.appendChild(textAvatar)
+    },
+
+    /**
+     * 启动性能监控
+     */
+    startPerformanceMonitoring() {
+      // 监控内存使用情况
+      this.memoryCheckInterval = setInterval(() => {
+        if (performance.memory) {
+          const memoryUsage = performance.memory.usedJSHeapSize / 1024 / 1024 // MB
+          
+          // 如果内存使用超过100MB，进行清理
+          if (memoryUsage > 100) {
+            this.performMemoryCleanup()
+          }
+          
+          this.lastMemoryUsage = memoryUsage
+        }
+      }, 30000) // 每30秒检查一次
+
+      // 监控DOM节点数量
+      this.performanceMonitor = setInterval(() => {
+        const messageCount = this.messages.length
+        
+        // 如果消息数量过多，清理旧消息
+        if (messageCount > 200) {
+          this.cleanupOldMessages()
+        }
+      }, 60000) // 每分钟检查一次
+    },
+
+    /**
+     * 停止性能监控
+     */
+    stopPerformanceMonitoring() {
+      if (this.memoryCheckInterval) {
+        clearInterval(this.memoryCheckInterval)
+        this.memoryCheckInterval = null
+      }
+      
+      if (this.performanceMonitor) {
+        clearInterval(this.performanceMonitor)
+        this.performanceMonitor = null
+      }
+    },
+
+    /**
+     * 执行内存清理
+     */
+    performMemoryCleanup() {
+      try {
+        // 清理引用展示状态
+        this.showSingleReference = {}
+        
+        // 强制垃圾回收（如果浏览器支持）
+        if (window.gc) {
+          window.gc()
+        }
+        
+        console.log('执行内存清理')
+      } catch (error) {
+        console.warn('内存清理失败:', error)
+      }
+    },
+
+    /**
+     * 清理旧消息
+     */
+    cleanupOldMessages() {
+      try {
+        // 保留最近的100条消息
+        if (this.messages.length > 100) {
+          const keepCount = 100
+          const removedCount = this.messages.length - keepCount
+          
+          this.messages = this.messages.slice(-keepCount)
+          
+          // 更新最早消息ID
+          const userMessages = this.messages.filter(msg => msg.sender === 'user')
+          if (userMessages.length > 0) {
+            this.earliestMessageId = userMessages[0].messageId
+          }
+          
+          console.log(`清理了 ${removedCount} 条旧消息`)
+        }
+      } catch (error) {
+        console.warn('清理旧消息失败:', error)
+      }
+    },
+
+    /**
+     * 设置全局错误处理
+     */
+    setupErrorHandling() {
+      // 捕获未处理的Promise错误
+      window.addEventListener('unhandledrejection', this.handleUnhandledRejection)
+      
+      // 捕获全局JavaScript错误
+      window.addEventListener('error', this.handleGlobalError)
+      
+      // Vue错误处理
+      this.$options.errorCaptured = this.handleVueError
+    },
+
+    /**
+     * 处理未处理的Promise拒绝
+     */
+    handleUnhandledRejection(event) {
+      console.error('未处理的Promise错误:', event.reason)
+      
+      // 防止错误冒泡导致页面崩溃
+      event.preventDefault()
+      
+      // 如果是网络错误，显示友好提示
+      if (event.reason && (event.reason.message || '').includes('Network')) {
+        this.showToast('网络连接异常，请检查网络设置', 'error')
+      } else {
+        this.showToast('操作失败，请稍后重试', 'error')
+      }
+    },
+
+    /**
+     * 处理全局JavaScript错误
+     */
+    handleGlobalError(event) {
+      console.error('全局JavaScript错误:', event.error)
+      
+      // 防止错误导致页面白屏
+      event.preventDefault()
+      
+      // 如果是内存相关错误，执行清理
+      if (event.error && event.error.message && 
+          (event.error.message.includes('memory') || event.error.message.includes('Maximum call stack'))) {
+        this.performMemoryCleanup()
+        this.showToast('系统资源不足，已自动清理', 'warning')
+      }
+    },
+
+    /**
+     * 处理Vue组件错误
+     */
+    handleVueError(err, instance, info) {
+      console.error('Vue组件错误:', err, info)
+      
+      // 如果是渲染错误，尝试重置状态
+      if (info && info.includes('render')) {
+        this.$nextTick(() => {
+          this.$forceUpdate()
+        })
+      }
+      
+      return false // 阻止错误继续传播
     }
   }
 }
@@ -919,6 +1274,46 @@ export default {
   animation: spin 1s linear infinite;
 }
 
+/* 初始化失败样式 */
+.init-failed {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  background: rgba(255, 249, 249, 0.95);
+  border-radius: 8px;
+  margin: 16px;
+  border: 1px solid #ffccc7;
+}
+
+.failed-text {
+  color: #ff4d4f;
+  font-size: 14px;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.retry-button {
+  background: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.retry-button:hover {
+  background: #40a9ff;
+  transform: translateY(-1px);
+}
+
+.retry-button:active {
+  transform: translateY(0);
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);