From ba70b06488b106376f55341b76e286cae80bcc2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A6=85=E9=A5=BC?= <2815246336@qq.com> Date: Sun, 17 Aug 2025 20:32:25 +0800 Subject: [PATCH] =?UTF-8?q?1.AI=E8=81=8A=E5=A4=A9=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=8A=A0=E5=85=A5=E7=88=86=E5=86=85=E5=AD=98=E8=BE=B9=E7=95=8C?= =?UTF-8?q?=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/components/Aichat/ChatPopup.vue | 435 ++++++++++++++++++++- 1 file changed, 415 insertions(+), 20 deletions(-) diff --git a/src/layout/components/Aichat/ChatPopup.vue b/src/layout/components/Aichat/ChatPopup.vue index 4618bf9..004a5b9 100644 --- a/src/layout/components/Aichat/ChatPopup.vue +++ b/src/layout/components/Aichat/ChatPopup.vue @@ -18,6 +18,12 @@
没有更多历史记录了
+ +
+
聊天初始化失败
+ +
+
@@ -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 () => { @@ -211,15 +232,51 @@ export default { beforeDestroy() { // 设置销毁标志 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,23 +567,79 @@ 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 } const userMessage = this.inputMessage.trim() this.inputMessage = '' this.sending = true + + // 添加到请求队列 + const requestId = Date.now() + this.requestQueue.push(requestId) // 添加用户消息 const userMsg = { @@ -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);