chore:回答问题视口随文字增长一直是贴着最新一句往上走。
This commit is contained in:
@@ -2402,17 +2402,20 @@ _handleStreamError(msg) {
|
|||||||
return m + 'm' + (s < 10 ? '0' + s : s) + 's'
|
return m + 'm' + (s < 10 ? '0' + s : s) + 's'
|
||||||
},
|
},
|
||||||
|
|
||||||
// 滚动到底部 - 统一使用 scroll-into-view
|
// 滚动到底部 - 流式长回答时持续跟随最新文字
|
||||||
|
// 关键: 之前用 scroll-into-view 把最后一条消息滚入视野, 但流式过程中 AI 消息 id 不变,
|
||||||
|
// scroll-into-view 只在 id 变化/重新赋值时触发, 且会把元素"顶到顶部对齐"而非贴底,
|
||||||
|
// 导致长回答越写越长时, 最新文字被挤出可视区、看不到(你反馈的问题)。
|
||||||
|
// 改法: 改用 scroll-top 赋一个不断递增且恒大于内容高度的值, 强制滚动条贴底,
|
||||||
|
// 每个新文字块到达都重设 → 视口随答案增长缓缓上移, 始终显示 AI 最新回复。
|
||||||
scrollToBottom() {
|
scrollToBottom() {
|
||||||
if (this.messages.length === 0) return
|
if (this.messages.length === 0) return
|
||||||
// 取真实最后一条消息(包括空内容的流式消息)
|
// 取消可能冲突的 scroll-into-view (搜索跳转用, 不走这里)
|
||||||
const lastMsg = this.messages[this.messages.length - 1]
|
|
||||||
const lastIndex = this.messages.length - 1
|
|
||||||
const key = lastMsg.id || lastMsg.timestamp || lastIndex
|
|
||||||
// 先清空再设置,确保 scroll-into-view 重新触发
|
|
||||||
this.scrollIntoViewId = ''
|
this.scrollIntoViewId = ''
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.scrollIntoViewId = 'msg-' + key + '-' + lastIndex
|
// 递增超大值: 保证每次调用都触发重新滚动(同值在部分平台不重排), 且恒大于内容高度=贴底
|
||||||
|
this._bottomCounter = (this._bottomCounter || 0) + 100000
|
||||||
|
this.scrollTop = this._bottomCounter
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user