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