chore:H5的智能客服聊天正常

This commit is contained in:
2026-04-15 09:08:10 +08:00
parent 8010ac45a6
commit 3162d6a9f2

View File

@@ -496,13 +496,13 @@ export default {
}, },
watch: { watch: {
messages: { messages: {
handler() { handler(newVal, oldVal) {
this.$nextTick(() => { // 仅在新增消息时触发滚动,流式响应时由手动控制
// 仅当不是加载历史时,执行滚底 if (!this.isLoadingHistory && !this.isStreaming && newVal.length !== oldVal.length) {
if (!this.isLoadingHistory) { this.$nextTick(() => {
this.scrollToBottom() this.scrollToBottom()
} })
}) }
}, },
deep: true deep: true
} }
@@ -902,16 +902,19 @@ async loadChatHistoryIfExist() {
this.shouldScrollToBottom = true; this.shouldScrollToBottom = true;
this.messages.push(streamMessage); this.messages.push(streamMessage);
// 添加消息后立即滚动一次
this.$nextTick(() => {
this.scrollToBottom();
});
try { try {
// #ifdef H5 // #ifdef H5
// ===== H5: 使用 POST + 流式 (fetch readable stream) ===== // ===== H5: 使用 POST + 流式 (fetch readable stream) =====
await aiService.sendHttpStream( await aiService.sendHttpStream(
userMessage, userMessage,
(chunk) => { (chunk) => {
// 实时更新内容 // 实时更新内容(不频繁滚动)
streamMessage.content += chunk; streamMessage.content += chunk;
this.$forceUpdate(); // 强制更新视图
this.scrollToBottom(); // 滚动到底部
}, },
(completeResult) => { (completeResult) => {
// 流结束回调 // 流结束回调
@@ -930,8 +933,6 @@ async loadChatHistoryIfExist() {
return; return;
} }
// 保存会话 ID // 保存会话 ID
if (convId) { if (convId) {
this.currentConversationId = convId; this.currentConversationId = convId;
@@ -939,6 +940,11 @@ async loadChatHistoryIfExist() {
this.saveConversationIdToLocal(convId); this.saveConversationIdToLocal(convId);
} }
// 流结束后再滚动到底部
this.$nextTick(() => {
this.scrollToBottom();
});
// 触发事件 // 触发事件
this.$emit('ai-response', streamMessage); this.$emit('ai-response', streamMessage);
} }
@@ -950,10 +956,8 @@ async loadChatHistoryIfExist() {
await aiService.sendStreamMessage( await aiService.sendStreamMessage(
userMessage, userMessage,
(chunk) => { (chunk) => {
// 实时更新内容 // 实时更新内容(不频繁滚动)
streamMessage.content += chunk; streamMessage.content += chunk;
this.$forceUpdate();
this.scrollToBottom(); // 滚动到底部
}, },
(completeResult) => { (completeResult) => {
// 流结束回调 // 流结束回调
@@ -968,8 +972,6 @@ async loadChatHistoryIfExist() {
return; return;
} }
// 保存会话 ID // 保存会话 ID
if (convId) { if (convId) {
this.currentConversationId = convId; this.currentConversationId = convId;
@@ -977,6 +979,11 @@ async loadChatHistoryIfExist() {
this.saveConversationIdToLocal(convId); this.saveConversationIdToLocal(convId);
} }
// 流结束后再滚动到底部
this.$nextTick(() => {
this.scrollToBottom();
});
// 触发事件 // 触发事件
this.$emit('ai-response', streamMessage); this.$emit('ai-response', streamMessage);
} }
@@ -1080,23 +1087,18 @@ async loadChatHistoryIfExist() {
const lastMessage = filteredMessages[filteredMessages.length - 1]; const lastMessage = filteredMessages[filteredMessages.length - 1];
const lastIndex = this.messages.indexOf(lastMessage); const lastIndex = this.messages.indexOf(lastMessage);
this.scrollIntoViewId = `msg-${lastMessage.id || lastMessage.timestamp}-${lastIndex}`; this.scrollIntoViewId = `msg-${lastMessage.id || lastMessage.timestamp}-${lastIndex}`;
this.$nextTick(() => { // 保持 scrollIntoViewId 不清除,避免频繁切换
setTimeout(() => {
this.scrollIntoViewId = null;
}, 100);
});
} }
} }
// #endif // #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// 先重置为0,再设置大值,确保视图更新 // 直接设置大值滚动到底部,不要重置为0
this.scrollTop = 0;
this.$nextTick(() => { this.$nextTick(() => {
this.scrollTop = 9999999; this.scrollTop = 9999999;
}); });
// #endif // #endif
}, 50); }, 100);
}, },
// 加载更多历史消息 // 加载更多历史消息