From 1113ced19c32c1b9b65571c48491d9435dbaf085 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期日, 19 一月 2025 12:16:49 +0800
Subject: [PATCH] 图层控制
---
src/components/chat/hooks/useScrollLoad.ts | 94 +++++++++++++----------------------------------
1 files changed, 26 insertions(+), 68 deletions(-)
diff --git a/src/components/chat/hooks/useScrollLoad.ts b/src/components/chat/hooks/useScrollLoad.ts
index 457bfc1..656f211 100644
--- a/src/components/chat/hooks/useScrollLoad.ts
+++ b/src/components/chat/hooks/useScrollLoad.ts
@@ -1,13 +1,15 @@
-import { Ref, ShallowRef, nextTick, onBeforeUnmount, ref, unref } from 'vue';
+import moment from 'moment';
+import type { Ref, ShallowRef } from 'vue';
+import { nextTick, onBeforeUnmount, ref, unref } from 'vue';
import { LOAD_CHAT_LIMIT } from '../constants';
-import { AnswerType, ChatContent, ChatMessage, RoleEnum } from '../model/types';
-import { GetHistoryAnswer, QueryHistoryDetail } from '/@/api/ai/chat';
-
+import type { ChatMessage } from '../model/types';
+import { useLoadData } from './useLoadData';
+import { QueryHistoryDetail } from '/@/api/ai/chat';
type UseScrollLoadOption = {
container: ShallowRef<HTMLDivElement>;
historyGroupId: string | Ref<string>;
messageList: Ref<ChatMessage[]>;
- parseAnswerContent: (res: any) => ChatContent;
+ loadReplyData: (res: any) => Promise<ChatMessage[]>;
};
/**
@@ -15,69 +17,26 @@
* @returns
*/
export const useScrollLoad = (option: UseScrollLoadOption) => {
- const { container, historyGroupId, messageList, parseAnswerContent } = option;
+ const { container, historyGroupId, messageList, loadReplyData } = option;
const moreIsLoading = ref(false);
/** @description 涓嬫闇�瑕佸姞杞界殑鐢ㄦ埛缁撴潫绱㈠紩锛堝�掔潃鏁帮級 */
- const nextUserMsgEndIndex = ref(0);
+ let nextUserMsgEndIndex = 0;
// 鏄惁娌℃湁鏇村鏁版嵁浜�
let isNoMore = false;
- const getAnswerById = async (historyId: string) => {
- return await GetHistoryAnswer({
- history_id: historyId,
- });
- };
/**
- * 鑾峰彇鐢ㄦ埛鍥炲鏁版嵁锛屽苟鎻掑叆鍒板璇濆綋涓幓
+ * 鏇存柊鍔犺浇绱㈠紩
*/
- const loadReplyData = async (userMsg: any[]) => {
- const sectionAIdMap = new Map();
- const tmpMessageList: ChatMessage[] = userMsg.map((item) => {
- return {
- historyId: item.history_id,
- role: RoleEnum.user,
- content: {
- type: AnswerType.Text,
- values: item.question,
- },
- } as ChatMessage;
- });
- const resList = await Promise.all(
- (userMsg ?? []).map((item) => {
- sectionAIdMap.set(item.history_id, item.section_a_id);
- return getAnswerById(item.history_id);
- })
- );
- let i = 0;
- resList.map((item, index) => {
- const insertIndex = index + 1 + i;
- const currentUserMsg = tmpMessageList[insertIndex - 1];
- currentUserMsg.content.values = item?.answer?.question ?? currentUserMsg.content.values;
- tmpMessageList.splice(
- insertIndex,
- 0,
- item.answer === null
- ? null
- : {
- historyId: item.answer?.history_id,
- role: RoleEnum.assistant,
- content: parseAnswerContent(item.answer),
- state: item.answer_state,
- sectionAId: sectionAIdMap.get(item.answer.history_id),
- }
- );
- i++;
- });
-
- messageList.value.unshift(...tmpMessageList);
+ const updateLoadIndex = (addCount = 1) => {
+ nextUserMsgEndIndex += addCount;
};
/**
* 鍔犺浇婊氬姩鑼冨洿鏁版嵁
*/
- const loadRangeData = async (lastEnd = nextUserMsgEndIndex.value) => {
+ const loadRangeData = async (lastEnd = nextUserMsgEndIndex) => {
const res = await QueryHistoryDetail({
history_group_id: unref(historyGroupId),
last_end: lastEnd,
@@ -85,8 +44,9 @@
});
const result: ChatMessage[] = res.details ?? [];
if (result.length) {
- nextUserMsgEndIndex.value += result.length;
- await loadReplyData(res.details);
+ nextUserMsgEndIndex += result.length;
+ const rangeMsgList = await loadReplyData(res.details);
+ messageList.value.unshift(...rangeMsgList);
} else {
isNoMore = true;
}
@@ -97,7 +57,6 @@
//婊氬姩鐩戝惉
async function onChatListScroll() {
if (container.value.scrollTop == 0) {
-
// 鏇村鏁版嵁姝ｅ湪鍔犺浇鏃�
if (moreIsLoading.value) {
return;
@@ -107,26 +66,25 @@
return;
}
- let h1 = container.value.scrollHeight;
+ const h1 = container.value.scrollHeight;
moreIsLoading.value = true;
- await loadRangeData(nextUserMsgEndIndex.value).finally(() => {
+ await loadRangeData(nextUserMsgEndIndex).finally(() => {
moreIsLoading.value = false;
});
//鏇存柊鍚庯紝绛夊緟椤甸潰娓叉煋瀹屾瘯鍐嶅幓鎷縮crollHeight,鍚﹀垯鎷垮埌鐨勬槸涔嬪墠鐨�
- nextTick(()=>{
- nextTick(()=>{
- nextTick(()=>{
- let h2 = container.value.scrollHeight;
+ nextTick(() => {
+ nextTick(() => {
+ nextTick(() => {
+ const h2 = container.value.scrollHeight;
container.value.scrollTo({
//椤堕儴鍦ㄥ師鍏堝熀纭�涓婂線涓嬫粴鍔�50px锛岄湶鍑烘柊鍔犺浇鏁版嵁鐨勪竴鐐�
// top: h2 - h1 - 50,
top: h2 - h1,
behavior: 'instant', //auto-鑷姩婊氬姩 instant-鐬棿婊氬姩 smooth-骞虫粦婊氬姩
});
- })
- })
- })
-
+ });
+ });
+ });
}
}
@@ -135,9 +93,9 @@
});
return {
- nextUserMsgEndIndex,
loadRangeData,
onChatListScroll,
moreIsLoading,
+ updateLoadIndex,
};
};
--
Gitblit v1.9.3