chore:用户提问和客服回答可以看见了

This commit is contained in:
2026-04-13 09:30:08 +08:00
parent b1953a020d
commit ec1903519d

View File

@@ -1,12 +1,23 @@
<template>
<view class="ai-chat-container">
<!-- 聊天消息列表 -->
<!-- #ifdef H5 -->
<scroll-view
class="chat-messages"
scroll-y
:scroll-into-view="scrollIntoViewId"
:scroll-with-animation="true"
@scroll="onScroll">
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<scroll-view
class="chat-messages"
scroll-y
:scroll-top="scrollTop"
@scroll="onScroll"
:scroll-with-animation="false">
:scroll-with-animation="true"
@scroll="onScroll">
<!-- #endif -->
<!-- 加载更多历史消息 -->
<view class="load-more" v-if="hasMoreHistory">
@@ -17,6 +28,7 @@
<view
v-for="(message, index) in messages.filter(msg => msg.content && msg.content.trim() !== '')"
:key="`msg-${message.id || message.timestamp}-${index}`"
:id="`msg-${message.id || message.timestamp}-${index}`"
class="message-item"
:class="[message.role, { 'first-message': index === 0 }]">
@@ -166,7 +178,13 @@
</view>
</view>
</view>
<!-- #ifdef H5 -->
</scroll-view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
</scroll-view>
<!-- #endif -->
<!-- 输入区域 -->
<view class="input-area">
@@ -380,6 +398,7 @@ export default {
messages: [],
inputText: '',
scrollTop: 0,
scrollIntoViewId: null,
hasMoreHistory: false,
loadingText: '加载更多历史消息',
voiceInputing: false,
@@ -466,11 +485,9 @@ export default {
messages: {
handler() {
this.$nextTick(() => {
// 仅当不是加载历史、且需要滚底时,才执行滚底
if (!this.isLoadingHistory && this.shouldScrollToBottom) {
// 仅当不是加载历史时,执行滚底
if (!this.isLoadingHistory) {
this.scrollToBottom()
// 滚底后重置状态,避免重复触发
this.shouldScrollToBottom = false
}
})
},
@@ -878,10 +895,11 @@ async loadChatHistoryIfExist() {
await aiService.sendHttpStream(
userMessage,
(chunk) => {
// 实时更新内容
streamMessage.content += chunk;
this.$forceUpdate(); // 强制更新视图
},
// 实时更新内容
streamMessage.content += chunk;
this.$forceUpdate(); // 强制更新视图
this.scrollToBottom(); // 滚动到底部
},
(completeResult) => {
// 流结束回调
let convId = '';
@@ -923,10 +941,11 @@ async loadChatHistoryIfExist() {
await aiService.sendStreamMessage(
userMessage,
(chunk) => {
// 实时更新内容
streamMessage.content += chunk;
this.$forceUpdate();
},
// 实时更新内容
streamMessage.content += chunk;
this.$forceUpdate();
this.scrollToBottom(); // 滚动到底部
},
(completeResult) => {
// 流结束回调
let convId = completeResult?.conversation_id || '';
@@ -1045,9 +1064,34 @@ async loadChatHistoryIfExist() {
// 滚动到底部
scrollToBottom() {
setTimeout(() => {
this.scrollTop = 999999
}, 100)
if (this.scrollTimer) {
clearTimeout(this.scrollTimer);
}
this.scrollTimer = setTimeout(() => {
// #ifdef H5
if (this.messages.length > 0) {
const filteredMessages = this.messages.filter(msg => msg.content && msg.content.trim() !== '');
if (filteredMessages.length > 0) {
const lastMessage = filteredMessages[filteredMessages.length - 1];
const lastIndex = this.messages.indexOf(lastMessage);
this.scrollIntoViewId = `msg-${lastMessage.id || lastMessage.timestamp}-${lastIndex}`;
this.$nextTick(() => {
setTimeout(() => {
this.scrollIntoViewId = null;
}, 100);
});
}
}
// #endif
// #ifdef MP-WEIXIN
// 先重置为0,再设置大值,确保视图更新
this.scrollTop = 0;
this.$nextTick(() => {
this.scrollTop = 9999999;
});
// #endif
}, 50);
},
// 加载更多历史消息