perf: 输入问题后滚到底部
This commit is contained in:
@ -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('停止生成后可发送');
|
||||||
@ -43,7 +51,7 @@ export default {
|
|||||||
conversationList.value.push({
|
conversationList.value.push({
|
||||||
role: QUESTION_ROLE,
|
role: QUESTION_ROLE,
|
||||||
content: message,
|
content: message,
|
||||||
});
|
});
|
||||||
|
|
||||||
initSse({ message });
|
initSse({ message });
|
||||||
};
|
};
|
||||||
@ -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);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user