聊天项增加 key

wujingjing

2024-10-11 43521ebfcdd69b6e6efec4dae84959c3d793ab0a

 src/components/chat/hooks/useScrollLoad.ts

@@ -1,11 +1,11 @@
import { Ref, ShallowRef, nextTick, onBeforeUnmount, ref } from 'vue';
import { Ref, ShallowRef, 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';

type UseScrollLoadOption = {
   container: ShallowRef<HTMLDivElement>;
   historyGroupId: string;
   historyGroupId: string | Ref<string>;
   messageList: Ref<ChatMessage[]>;
   parseAnswerContent: (res: any) => ChatContent;
};
@@ -79,7 +79,7 @@
    */
   const loadRangeData = async (lastEnd = nextUserMsgEndIndex.value) => {
      const res = await QueryHistoryDetail({
         history_group_id: historyGroupId,
         history_group_id: unref(historyGroupId),,
         last_end: lastEnd,
         last_count: LOAD_CHAT_LIMIT,
      });
@@ -97,7 +97,6 @@
   //滚动监听
   async function onChatListScroll() {
      if (container.value.scrollTop == 0) {
         console.log('滚动到顶部了');

         // 更多数据正在加载时
         if (moreIsLoading.value) {
@@ -114,15 +113,20 @@
            moreIsLoading.value = false;
         });
         //更新后，等待页面渲染完毕再去拿scrollHeight,否则拿到的是之前的
         nextTick(() => {
            let h2 = container.value.scrollHeight;
         nextTick(()=>{
            nextTick(()=>{
               nextTick(()=>{
                  let h2 = container.value.scrollHeight;
                  container.value.scrollTo({
                     //顶部在原先基础上往下滚动50px，露出新加载数据的一点
                     // top: h2 - h1 - 50,
                     top: h2 - h1,
                     behavior: 'instant', //auto-自动滚动 instant-瞬间滚动 smooth-平滑滚动
                  });
               })
            })
         })

            //顶部在原先基础上往下滚动50px，露出新加载数据的一点
            container.value.scrollTo({
               top: h2 - h1 - 50,
               behavior: 'instant', //auto-自动滚动 instant-瞬间滚动 smooth-平滑滚动
            });
         });
      }
   }