xgxt_sd/zhxg_pc
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.修复AI卡顿问题

Browse Source
This commit is contained in:
馅饼
2025-08-18 22:10:21 +08:00
parent 73b43d609f
commit a2f6d5573b
3 changed files with 319 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/api/aiChat/ai_index.js
View File

@@ -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 = ({
conversationId,
user,
limit = 20,
beforeId
}) => {
export const getHistory = ({ 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',
method: 'get',
params
})
}
url: "/aitutor/aichat/getMessagesToUser",
method: "get",
params,
});
};
/**
* 发送反馈（点赞/点踩）
@@ -41,21 +36,17 @@ export const getHistory = ({
* @param {string} params.user 用户ID
* @returns {Promise} 包含操作结果的Promise
*/
export const sendFeedback = ({
messageId,
action,
user
}) => {
export const sendFeedback = ({ messageId, action, user }) => {
return request({
url: '/aitutor/aichat/feedback',
method: 'post',
url: "/aitutor/aichat/feedback",
method: "post",
data: {
message_id: messageId,
rating: action === 1 ? 'like' : 'dislike',
user
}
})
}
rating: action === 1 ? "like" : "dislike",
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',
method: 'post',
url: "/aitutor/aichat/files/upload",
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',
method: 'post',
url: "/aitutor/aichat/conversation/create",
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',
method: 'post',
url: "/aitutor/aichat/conversation/delete",
method: "post",
data: {
conversation_id: conversationId,
user
}
})
}
user,
},
});
};

201
src/layout/components/Aichat/ChatPopup.vue
View File

@@ -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"
class="reference-group">
<div
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 {

3
src/utils/ai_request.js
View File

@@ -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",