图层控制

wujingjing

2025-01-19 1113ced19c32c1b9b65571c48491d9435dbaf085

 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;
         });
         //更新后，等待页面渲染完毕再去拿scrollHeight,否则拿到的是之前的
         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,
   };
};