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);