perf: 输入问题后滚到底部

This commit is contained in:
renxiaodong
2025-08-28 23:20:44 +08:00
parent 2c71424acc
commit 4c86a8f614

View File

@ -1,15 +1,14 @@
<script lang="tsx"> <script lang="tsx">
import { message as antdMessage, Tooltip } from 'ant-design-vue'; import { message as antdMessage } from 'ant-design-vue';
import { BubbleList } from '@/components/xt-chat/xt-bubble'; import { BubbleList } from '@/components/xt-chat/xt-bubble';
import SenderInput from './components/sender-input/index.vue'; import SenderInput from './components/sender-input/index.vue';
import RightView from './components/right-view/index.vue'; import RightView from './components/right-view/index.vue';
import { useRoute } from 'vue-router';
import { useChatStore } from '@/stores/modules/chat'; import { useChatStore } from '@/stores/modules/chat';
import { getConversationList } from '@/api/all/chat'; import { getConversationList } from '@/api/all/chat';
import querySSE from '@/utils/querySSE'; import querySSE from '@/utils/querySSE';
import useChatHandler from './useChatHandler'; import useChatHandler from './useChatHandler';
import { QUESTION_ROLE, LOADING_ROLE, REMOTE_ROLE } from './constants'; import { QUESTION_ROLE, LOADING_ROLE } from './constants';
export default { export default {
props: { props: {
@ -32,6 +31,15 @@ export default {
const sseController = ref<any>(null); const sseController = ref<any>(null);
const searchValue = ref<string>(''); const searchValue = ref<string>('');
// 强制滚动到底部:用户主动发送消息时,无视是否在底部
const forceScrollToBottom = () => {
requestAnimationFrame(() => {
try {
bubbleListRef.value?.scrollTo?.({ top: Number.MAX_SAFE_INTEGER, behavior: 'smooth' });
} catch {}
});
};
const handleSubmit = (message: string) => { const handleSubmit = (message: string) => {
if (generateLoading.value) { if (generateLoading.value) {
antdMessage.warning('停止生成后可发送'); antdMessage.warning('停止生成后可发送');
@ -85,6 +93,10 @@ export default {
agent_id: chatStore.agentInfo.agent_id, agent_id: chatStore.agentInfo.agent_id,
}), }),
}); });
nextTick(() => {
forceScrollToBottom();
});
} catch (error) { } catch (error) {
console.error('Failed to initialize SSE:', error); console.error('Failed to initialize SSE:', error);
antdMessage.error('初始化连接失败'); antdMessage.error('初始化连接失败');
@ -128,6 +140,7 @@ export default {
role: QUESTION_ROLE, role: QUESTION_ROLE,
content: message, content: message,
}); });
initSse(newVal); initSse(newVal);
} }
}, },