From 5c9d412ec380f56ae00aa45cd71af7dc56c2834c Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期二, 15 四月 2025 18:44:25 +0800
Subject: [PATCH] bottom
---
src/components/chat/Chat.vue | 10 +++++-----
src/components/chat/components/ChatContainer.vue | 6 +++++-
src/components/chat/hooks/useScroll.ts | 28 ++++++++++++++++++++++++++--
3 files changed, 36 insertions(+), 8 deletions(-)
diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index 8c7e10d..722a922 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -3,6 +3,7 @@
:loading="chatListLoading"
:more-is-loading="moreIsLoading"
:is-share-page="isSharePage"
+ :isTalking="isTalking"
ref="containerRef"
@autoSendMessage="autoSendMessage"
>
@@ -408,7 +409,6 @@
}
// 寮哄埗瑙﹀彂鏇存柊
-
scrollToBottom();
},
{
@@ -554,10 +554,10 @@
) => {
updateLoadIndex();
updateInfo(userItem, assistantItem, resMsgContent, other);
- setTimeout(() => {
- // 鏀跺埌鍥炲锛岀户缁粴
- scrollToBottom();
- }, 300);
+ // setTimeout(() => {
+ // // 鏀跺埌鍥炲锛岀户缁粴
+ // scrollToBottom();
+ // }, 300);
};
const sendChatMessage = async (content: ChatContent = messageContent.value, lifecycleCall?: QuestionLifecycle) => {
if (!checkCanSend(content)) {
diff --git a/src/components/chat/components/ChatContainer.vue b/src/components/chat/components/ChatContainer.vue
index 404af42..bd4af00 100644
--- a/src/components/chat/components/ChatContainer.vue
+++ b/src/components/chat/components/ChatContainer.vue
@@ -66,7 +66,7 @@
</template>
<script setup lang="ts">
-import { onActivated, onDeactivated, ref } from 'vue';
+import { onActivated, onDeactivated, ref, toRef, toRefs } from 'vue';
import { useChatWidth } from '../hooks/useChatWidth';
import { useScroll } from '../hooks/useScroll';
import type { QuestionLifecycle } from '../types';
@@ -76,11 +76,14 @@
loading?: boolean;
moreIsLoading?: boolean;
isSharePage?: boolean;
+ isTalking?: boolean;
}>();
const emit = defineEmits<{
autoSendMessage: [string, QuestionLifecycle];
}>();
+
+const { isTalking } = toRefs(props);
const chatListDom = ref<HTMLDivElement>();
const { openDigitalHuman, isHumanTalking, humanIsLoading, digitalHumanIsShow, closeDigitalHuman, digitalHumanWidth } = useDigitalHuman(
@@ -93,6 +96,7 @@
);
const { scrollToBottom, isBottom } = useScroll({
chatListDom,
+ isTalking: isTalking,
});
const fileContentIsShow = ref(false);
diff --git a/src/components/chat/hooks/useScroll.ts b/src/components/chat/hooks/useScroll.ts
index 8e55dfc..30ac395 100644
--- a/src/components/chat/hooks/useScroll.ts
+++ b/src/components/chat/hooks/useScroll.ts
@@ -3,20 +3,25 @@
import type { ChatMessage } from '../model/types';
import emitter from '/@/utils/mitt';
import { debounce } from '/@/utils/util';
+import { useEventListener } from '@vueuse/core';
export type UseScrollOption = {
chatListDom: Ref<HTMLDivElement>;
+ isTalking: Ref<boolean>;
};
export const useScroll = (option: UseScrollOption) => {
- const { chatListDom } = option;
+ const { chatListDom, isTalking } = option;
const scrollStepToBottom = () => {
const allStepList = document.querySelectorAll('.step-list');
const lastStepList = allStepList[allStepList.length - 1];
if (!lastStepList) return;
lastStepList.scrollTop = lastStepList.scrollHeight - lastStepList.clientHeight;
};
+
+ let isScroll = false;
const scrollToBottom = () => {
+ if (isScroll) return;
nextTick(() => {
if (chatListDom.value.scrollHeight > chatListDom.value.clientHeight) {
chatListDom.value.scrollTop = chatListDom.value.scrollHeight - chatListDom.value.clientHeight;
@@ -27,6 +32,21 @@
});
};
+ useEventListener(chatListDom, 'scroll', () => {
+ if (!isTalking.value) return;
+ if (isScroll) return;
+ isScroll = true;
+ });
+
+ watch(
+ () => isTalking.value,
+ (val) => {
+ if (!val) {
+ isScroll = false;
+ }
+ }
+ );
+
const scrollToTop = () => {
nextTick(() => {
chatListDom.value.scrollTop = 0;
@@ -34,8 +54,12 @@
};
const checkIsBottom = () => {
+ const bottom = Math.abs(chatListDom.value.scrollTop + chatListDom.value.clientHeight - chatListDom.value.scrollHeight) < 2;
+ if (bottom) {
+ isScroll = false;
+ }
// 璇樊 2鍍忕礌
- isBottom.value = Math.abs(chatListDom.value.scrollTop + chatListDom.value.clientHeight - chatListDom.value.scrollHeight) < 2;
+ isBottom.value = bottom;
};
const isBottom = ref(true);
onMounted(() => {
--
Gitblit v1.9.3