diff --git a/dashboard/src/components/MessageBubble.vue b/dashboard/src/components/MessageBubble.vue index 42096df..1990f5d 100644 --- a/dashboard/src/components/MessageBubble.vue +++ b/dashboard/src/components/MessageBubble.vue @@ -134,11 +134,7 @@ const regenerateIcon = `{{ error }} -
+
加载中...

点击「开始」启动多 Agent 对话

diff --git a/dashboard/src/views/ConversationView.vue b/dashboard/src/views/ConversationView.vue index 63dd082..36daa37 100644 --- a/dashboard/src/views/ConversationView.vue +++ b/dashboard/src/views/ConversationView.vue @@ -62,7 +62,7 @@

选择一个会话查看

-
+
加载中... @@ -191,6 +191,7 @@ const { updateConvTitle, deleteMessage, regenerateMessage, + setOnInitialScroll, init, cleanup } = useConversations() @@ -202,6 +203,7 @@ const form = ref({ title: '', provider_id: null, model: '' }) const newMessage = ref('') const messagesContainer = ref(null) const activeMessageId = ref(null) +const isNearBottom = ref(true) // 是否接近底部 const editConv = ref(null) @@ -210,7 +212,7 @@ const handleSend = async () => { if (!newMessage.value.trim()) return const message = newMessage.value.trim() newMessage.value = '' // 先清空输入框,再发送 - scrollToBottom() + forceScrollToBottom() // 发送消息时强制滚动到底部 await sendMessage(message) } @@ -278,8 +280,17 @@ const onProviderChange = () => { if (p) form.value.model = p.default_model || '' } -// 自动滚动到底部 +// 检测是否接近底部(距离底部 100px 以内) +const checkNearBottom = () => { + if (!messagesContainer.value) return + const { scrollTop, scrollHeight, clientHeight } = messagesContainer.value + const distanceFromBottom = scrollHeight - scrollTop - clientHeight + isNearBottom.value = distanceFromBottom <= 100 +} + +// 智能滚动到底部 - 只有在接近底部时才自动滚动 const scrollToBottom = () => { + if (!isNearBottom.value) return nextTick(() => { if (messagesContainer.value) { messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight @@ -287,6 +298,24 @@ const scrollToBottom = () => { }) } +// 强制滚动到底部(发送消息时使用) +const forceScrollToBottom = () => { + nextTick(() => { + if (messagesContainer.value) { + messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight + isNearBottom.value = true + } + }) +} + +// 设置初始滚动回调(加载历史消息后强制滚动) +setOnInitialScroll(forceScrollToBottom) + +// 滚动事件处理 +const handleScroll = () => { + checkNearBottom() +} + watch(convMessages, () => { scrollToBottom() }, { deep: true })