fix: 加载更多逻辑变更

src/pages/chat-messages/index.tsx

@@ -67,7 +67,7 @@ export default () => {
 
   return (
     <PageCustom>
-      <NavBarNormal backText="返回" scrollFadeIn></NavBarNormal>
+      <NavBarNormal scrollFadeIn>对话列表</NavBarNormal>
       {visitor ? <VisitorSummary data={visitor} /> : <></>}
       <View className="flex-1 overflow-hidden w-full mb-100">
         <View className="flex flex-col gap-16 px-16 w-full">

src/pages/contact/index.tsx

@@ -7,11 +7,10 @@ import style from "./index.module.less";
 import { useEffect, useState } from "react";
 import ContactCard from "./components/contact-card/index";
 import { getContactList, setContactToTop } from "@/service/contact";
-import { useLoadMore } from "@/utils/loadMore";
+import { useLoadMoreInfinite, type TResponseData } from "@/utils/loadMoreInfinite";
 import PageCustom from "@/components/page-custom/index";
 import { TContactItem } from "@/types/contact";
 import { isSuccess } from "@/utils";
-import useSWRInfinite from "swr/infinite";
 
 export default function Index() {
   const [searchValue, setSearchValue] = useState("");
@@ -31,30 +30,20 @@ export default function Index() {
     if (pageIndex === 0)
       return [
         "/my/contacts",
-        { nextId: undefined, pageSize: 2, keyword: "" },
+        { nextId: undefined, pageSize: 10},
         searchValue,
       ];
     if (previousPageData && previousPageData.nextId) {
       return [
         "/my/contacts",
-        { pageSize: 2, nextId: previousPageData.nextId },
+        { pageSize: 10, nextId: previousPageData.nextId },
         searchValue,
       ];
     }
-
     return null;
   };
-  const { data, setSize } = useSWRInfinite(getKey, fetcher, {
-    revalidateIfStale: false,
-    onErrorRetry(err, key, config, revalidate, revalidateOpts) {
-      if(err.status === 404) return 
-      if(err.status === 401) return
-      if(revalidateOpts.retryCount >=3 )return
-    },
-  });
+  const {list, setSize} = useLoadMoreInfinite<TContactItem>(getKey, fetcher)
 
-  const list = data?.flatMap((page) => page?.data || []) || [];
-  
 
   const resetFetchList = () => {
     setSize(1);

src/pages/dashboard-dislike-messages/index.tsx

@@ -13,53 +13,51 @@ import CardEditable from "@/components/card/card-editable/index";
 import Taro, { useRouter, useDidShow } from "@tarojs/taro";
 import {
   deleteVisitorDislikeAnswer,
-  getVisitorDislikeMessages
+  getVisitorDislikeMessages,
 } from "@/service/visitor";
 import { TVisitorChat } from "@/types/visitor";
 
-import { useLoadMore } from "@/utils/loadMore";
 import { useModalStore } from "@/store/modalStore";
 import { isSuccess } from "@/utils";
-import { TQAListItem } from "@/types/knowledge";
+import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
 
 export default function Index() {
-  const router = useRouter()
-  const {showModal} = useModalStore()
-  const {agentId} = router.params as {agentId:string}
-  const [scrollTop, setScrollTop] = useState(0)
-  const [list, setList] = useState<TVisitorChat[]>([]);
+  const router = useRouter();
+  const { showModal } = useModalStore();
+  const { agentId } = router.params as { agentId: string };
+  const [scrollTop, setScrollTop] = useState(0);
 
-  const fetcher = async ([_url, nextId, page, pageSize]) => {
-    const res = await getVisitorDislikeMessages({agentId, startId: nextId, pageSize });
+  const fetcher = async ([_url, { nextId, pageSize }]) => {
+    const res = await getVisitorDislikeMessages({
+      agentId,
+      startId: nextId,
+      pageSize,
+    });
     return res.data;
   };
-  const { data, loadMore, page, refetch } = useLoadMore<TVisitorChat[]>({
-    url: `getVisitorDislikeMessages${agentId}`,
-    fetcher,
-  });
-    
+  const { list, loadMore } = useLoadMoreInfinite<TVisitorChat>(
+    createKey(`getVisitorDislikeMessages${agentId}`),
+    fetcher
+  );
 
   const handleEdit = (item: TVisitorChat) => {
     Taro.navigateTo({
       url: `/pages/dashboard-visitor-message-editor/index?msgId=${item.msgId}&visitorId=${item.visitorId}&agentId=${item.agentId}`,
     });
   };
-  
-  
-  
+
   // 删除问答项
   const handleDeleteItem = async (item: TVisitorChat) => {
     showModal({
       content: "确定删除该问答项吗？",
       onConfirm: async () => {
-        
         const { status } = await deleteVisitorDislikeAnswer({
           visitorId: item.visitorId,
-          msgId: item.msgId
-        })
+          msgId: item.msgId,
+        });
         if (isSuccess(status)) {
           Taro.showToast({ title: "删除成功", icon: "success" });
-          refetch()
+          // todo
         }
       },
     });
@@ -74,38 +72,17 @@ export default function Index() {
     loadMore();
   };
 
-  
-  useEffect(() => {
-    if (data?.data) {
-      const r = data.data.filter((item)=> item.role === 'assistant')
-      if(page === 1){
-        setList(r);  
-      }else{
-        setList([...list, ...r]);
-      }
-      setScrollTop(prev => prev + 1)
-    }
-  }, [data]);
-
-  
-  useDidShow(()=> {
-    setList([])
-    refetch()
-  })
-
   const createCardOptions = (item: TVisitorChat) => {
     return [
-      <View onClick={() => handleDeleteItem(item)}>
-        删除
-      </View>,
+      <View onClick={() => handleDeleteItem(item)}>删除</View>,
       <View onClick={() => handleView(item)}>查看对话</View>,
       <View onClick={() => handleEdit(item)}>编辑</View>,
-    ]
-  }
+    ];
+  };
 
   return (
     <PageCustom fullPage>
-      <NavBarNormal backText="待处理差评" scrollFadeIn></NavBarNormal>
+      <NavBarNormal scrollFadeIn>待处理差评</NavBarNormal>
       <View className="w-full flex flex-col overflow-hidden h-full pt-2">
         <View className="rounded-container-header"></View>
         {/* <View className="text-14 font-medium leading-22 px-16 pb-16">
@@ -121,12 +98,11 @@ export default function Index() {
             height: "100%", // 高度自适应
           }}
         >
-          {list.map((item) => {
+          <View className="pb-80">
+            {list.map((item) => {
               return (
                 <View className="flex flex-col gap-16 px-16 mb-16">
-                  <CardEditable
-                    buttons={createCardOptions(item)}
-                  >
+                  <CardEditable buttons={createCardOptions(item)}>
                     <View className="flex items-start mb-8 gap-8">
                       <View className="flex-center h-28">
                         <IconQ />
@@ -141,7 +117,9 @@ export default function Index() {
                         <IconA />
                       </View>
                       <View className="flex-1 text-12 leading-20 text-gray-45 truncate">
-                        <View className="truncate">{item.correctionAnswer}</View>
+                        <View className="truncate">
+                          {item.correctionAnswer}
+                        </View>
 
                         {!!item.correctionLinks?.length && (
                           <View className="pb-12">
@@ -175,10 +153,8 @@ export default function Index() {
                 </View>
               );
             })}
+          </View>
         </ScrollView>
-
-        
-        
       </View>
     </PageCustom>
   );

src/pages/dashboard-visited-detail/index.tsx

@@ -14,7 +14,7 @@ import VisitorSummary from "./components/VisitorSummary";
 import { getVisitorSessions } from "@/service/visitor";
 
 import style from "./index.module.less";
-import { useLoadMore } from "@/utils/loadMore";
+import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
 
 export default () => {
   const router = useRouter();
@@ -24,7 +24,7 @@ export default () => {
   }
 
   const [visitor, setVisitor] = useState<TVisitorAgent>();
-  const [list, setList] = useState<TSessionItem[]>([]);
+  
   const [totalCount, setTotalCount] = useState(1);
 
   const fetchData = async () => {
@@ -36,10 +36,10 @@ export default () => {
     }
   };
 
-  const fetcher = async ([_url, nextId, page, pageSize]) => {
+  const fetcher = async ([_url, {nextId, pageSize}]) => {
     const res = await getVisitorSessions({
       startId: nextId,
-      pageSize: 5,
+      pageSize,
       visitorId,
     });
     const _totalCount = res.data.totalCount;
@@ -48,27 +48,24 @@ export default () => {
       setTotalCount(_totalCount);
       const data = res.data;
       data.data = data.data.map((item: TSessionItem) => {
-        return { ...item, visitTimes: _totalCount - page };
+        return { ...item, visitTimes: _totalCount - pageIndex };
       });
       return data;
     }
 
     const data = res.data;
     data.data = data.data.map((item: TSessionItem) => {
-      return { ...item, visitTimes: totalCount - page };
+      return { ...item, visitTimes: totalCount - pageIndex };
     });
 
     return data;
   };
 
-  const { data, loadMore } = useLoadMore<{
-    data?: TSessionItem[];
-    nextId?: string;
-    totalCount?: number;
-  }>({
-    url: `api/v1/my/visitor/sessions${visitorId}`,
-    fetcher,
-  });
+
+
+  const { list, pageIndex, loadMore } = useLoadMoreInfinite<TSessionItem>(
+    createKey(`api/v1/my/visitor/sessions${visitorId}`, 5),
+    fetcher);
 
   const onScrollToLower = () => {
     loadMore();
@@ -78,18 +75,12 @@ export default () => {
     fetchData();
   }, []);
 
-  useEffect(() => {
-    if (data?.data) {
-      //@ts-ignore
-      setList([...list, ...data.data]);
-    }
-  }, [data]);
 
   
 
   return (
     <PageCustom fullPage style={{ overflow: "hidden" }}>
-      <NavBarNormal backText="数据"></NavBarNormal>
+      <NavBarNormal scrollFadeIn>访问详情</NavBarNormal>
       {visitor ? <VisitorSummary data={visitor} /> : <></>}
       <View className="rounded-container-header"></View>
       <View className="flex-1 overflow-hidden w-full">

src/pages/dashboard/components/VisitorList/index.tsx

@@ -1,47 +1,29 @@
 import { View, Text } from "@tarojs/components";
 import Taro, { useReachBottom } from "@tarojs/taro";
 import VisitorCard from "../VisitorCard/index";
-import { useEffect, useState } from "react";
 
 import { TVisitorAgent } from "@/types/visitor";
-import { useLoadMore } from "@/utils/loadMore";
 import { getVisitorList } from "@/service/visitor";
-
+import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
 interface IProps {
   agentId?: string | number;
 }
 
 export default ({ agentId }: IProps) => {
-  const [list, setList] = useState<TVisitorAgent[]>([]);
 
-  const fetcher = async ([_url, nextId, page, pageSize, agentId]) => {
+  const fetcher = async ([_url, {nextId, pageSize}, [agentId]]) => {
     const res = await getVisitorList({ startId: nextId, pageSize, agentId });
     return res.data;
   };
-  const { data, loadMore, refetch } = useLoadMore<{
-    data?: TVisitorAgent[];
-    nextId?: string;
-    totalCount?: number;
-  }>({
-    url: `getVisitorList${agentId}`,
-    fetcher,
-    params: [agentId],
-  });
+  const { list, loadMore } = useLoadMoreInfinite<TVisitorAgent>(
+    createKey(`getVisitorList${agentId}`, 10, [agentId]),
+    fetcher);
 
   useReachBottom(() => {
     loadMore();
   });
 
-  useEffect(() => {
-    if (data?.data) {
-      setList([...list, ...data.data]);
-    }
-  }, [data]);
-
-  useEffect(() => {
-    setList([]);
-    refetch();
-  }, [agentId]);
+  
 
   if (!list.length) {
     <View></View>;

src/pages/knowledge/components/CompanyTab/components/ScrollList.tsx

@@ -13,7 +13,8 @@ import {
   getEntKnowledgeList,
 } from "@/service/knowledge";
 import type { TKnowledgeItem } from "@/types/knowledge";
-import { useLoadMore } from "@/utils/loadMore";
+
+import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
 export interface Iprops {
   entId: string|number
 }
@@ -21,17 +22,13 @@ const Index = ({entId}:Iprops) => {
   
 
   const [scrollTop, setScrollTop] = useState(9999)
-  const [list, setList] = useState<TKnowledgeItem[]>([]);
 
-  const fetcher = async ([_url, nextId, page, pageSize, entId]) => {
+  const fetcher = async ([_url, {nextId, pageSize},  [entId]]) => {
     const res = await getEntKnowledgeList({ startId: nextId, pageSize, entId });
     return res.data;
   };
-  const { data, loadMore, refetch, page } = useLoadMore<TKnowledgeItem[]>({
-    url: `getEntKnowledgeList ${entId}`,
-    fetcher,
-    params: [entId]
-  });
+  const { list, loadMore, pageIndex } = useLoadMoreInfinite<TKnowledgeItem[]>(createKey(`getEntKnowledgeList ${entId}`, 10, [entId]),
+    fetcher);
 
   const onScrollToUpper = async () => {
     console.log('toUpper')
@@ -41,17 +38,10 @@ const Index = ({entId}:Iprops) => {
     loadMore()
   })
   useEffect(() => {
-    if (data?.data) {
-      const result = page === 1 ? data.data : [...list, ...data.data]
-      setList(result);
+    if(pageIndex === 1){
       setScrollTop(prev => prev + 1)
     }
-  }, [data]);
-
-  useEffect(() => {
-    loadMore();
-    refetch
-  }, [entId]);
+  }, [pageIndex]);
   
 
   const handleEdit = (item: TKnowledgeItem)=> {

src/pages/knowledge/components/CorrectionList/index.tsx

@@ -22,18 +22,18 @@ const Index = () => {
   // const [checked, setChecked] = useState(false);
   // const [showPopup, setShowPopup] = useState(false);
   const [listStyle, setListStyle] = useState<TListStyle>("card");
-  // const [current, setCurrent] = useState<TEntItem | string>("");
   const [ent, setEnt] = useState<TEntItem|null>(null)
-  const [list, setList] = useState<TCorrectionItem[]>([]);
+  const [list, setList] = useState<TCorrectionItem[]>();
 
   const extraEnt: TEntItem[] = [{
     entName: '个人知识库',
-    entId: -1,
+    entId: undefined,
     expireTime: '0',
     isExpired: false,
     knowledgeCnt: 0
   }]
 
+
   // 渲染数据内容
   const renderScrollContent = () => {
     if (listStyle === "card") {
@@ -45,19 +45,19 @@ const Index = () => {
         />
       );
     }
-    return (
-      <ViewStyleListCorrection
-        setData={setList}
-        entId={ent?.entId}
-        viewStyle="list"
-      />
-    );
+    // return (
+    //   <ViewStyleListCorrection
+    //     setData={setList}
+    //     entId={ent?.entId}
+    //     viewStyle="list"
+    //   />
+    // );
   };
-  console.log(list,1112)
+  console.log('渲染纠错模块')
   // 渲染主体
   const renderEmpty = () => {
     // 空数据
-    if (!list.length) {
+    if (list && !list.length) {
       return (
         <View className="flex-center pt-40">
           <EmptyData type={3}>

src/pages/knowledge/components/PersonalTab/components/ScrollList.tsx

@@ -20,7 +20,7 @@ import {
   getKnowledgeList,
 } from "@/service/knowledge";
 
-import { useLoadMore } from "@/utils/loadMore";
+import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
 
 export interface IProps {
   types?: EKnowlegeTypes[]
@@ -28,29 +28,18 @@ export interface IProps {
 const Index = ({types}: IProps) => {
   
   const [scrollTop, setScrollTop] = useState(9999)
-  const [list, setList] = useState<TKnowledgeItem[]>([]);
 
-  const fetcher = async ([_url, nextId, page, pageSize, types]) => {
+  const fetcher = async ([_url, {nextId, pageSize}, [types]]) => {
     const res = await getKnowledgeList({ startId: nextId, pageSize, types });
     return res.data;
   };
-  const { data, loadMore, page } = useLoadMore<TKnowledgeItem[]>({
-    url: `getKnowledgeList${types}`,
-    fetcher,
-    params: [types]
-  });
+  const { list, loadMore } = useLoadMoreInfinite<TKnowledgeItem>( createKey('getKnowledgeList', 2, [types]), fetcher,);
 
   const onScrollToUpper = async () => {
     console.log('toUpper')
     loadMore()
   }
 
-  useEffect(() => {
-    if (data?.data) {
-      setList([...list, ...data.data]);
-      setScrollTop(prev => prev + 1)
-    }
-  }, [data]);
 
   useEffect(() => {
     loadMore();

src/pages/knowledge/components/view-style/ViewStyleListCorrection.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 
 import { TCorrectionItem } from "@/types/correction";
 import { getCorrectionList } from "@/service/correction";
-import { useLoadMore } from "@/utils/loadMore";
+import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
 
 import IconA from "@/components/icon/IconA";
 import IconQ from "@/components/icon/IconQ";
@@ -20,45 +20,29 @@ export interface Iprops {
 }
 const Index = ({viewStyle, entId, setData}:Iprops) => {
   
-  const [list, setList] = useState<TCorrectionItem[]>([]);
   const { showModal } = useModalStore();
 
-  const fetcher = async ([_url, nextId, page, pageSize, _entId]) => {
-    if(_entId === -1){
-      _entId = undefined
-    }
+  const fetcher = async ([_url, {nextId, pageSize}, [_entId]]) => {
     const res = await getCorrectionList({ startId: nextId, pageSize, entId: _entId});
     return res.data;
   };
+
   
-  const { data, loadMore, refetch, page } = useLoadMore<TCorrectionItem[]>({
-    url: `api/v1/my/correction/list${entId}`,
-    fetcher,
-    params: [entId],
-    
-  });  
+  const { list, loadMore, pageIndex } = useLoadMoreInfinite<TCorrectionItem>(
+    createKey(`api/v1/my/correction/list${entId}`, 10, [entId]),
+    fetcher);  
 
   const onScrollToUpper = async () => {
     console.log('toUpper')
     loadMore()
   }
-  
-  useEffect(()=> {
-    setList([])
-    setData([]);
-    refetch();
-  }, [entId])
-
+  console.log('pageIndex', pageIndex, list)
   useEffect(() => {
-    if (data?.data?.length) {
-      // 如果是切换 entId，list 已经被 setList([]) 清空
-      // 如果 list 为空，说明是第一页，直接覆盖
-      // 如果 list 不为空，说明是加载更多，追加
-      const result = page === 1 ? data.data : [...list, ...data.data];
-      setList(result);
-      setData(result);
+    if(pageIndex === 1){
+      console.log('setData', entId)
+      setData(list);
     }
-  }, [data]);
+  }, [entId]);
 
 
   const handleEdit = (qaId: number | string) => {

src/utils/loadMoreInfinite.ts

@@ -0,0 +1,54 @@
+import useSWRInfinite from "swr/infinite";
+
+export type TResponseData<D> = {
+  data:D
+  nextId?: string
+  totalCount?: null|number
+  pageIndex?: number
+  pageSize?: number
+}
+
+export const createKey = (query: string, pageSize:number = 10, extra: Record<string,any> = [])=> {
+    return (pageIndex:number, previousPageData) => {
+      if (pageIndex === 0)
+        return [
+          query,
+          { nextId: undefined, pageSize},
+          extra,
+        ];
+      if (previousPageData && previousPageData.nextId) {
+        return [
+          query,
+          { pageSize, nextId: previousPageData.nextId },
+          extra,
+        ];
+      }
+      return null;
+    };
+  }
+export const useLoadMoreInfinite = <T>(getKey, fetcher, params = {}) => {
+  const { data, setSize, size } = useSWRInfinite<TResponseData<T>>(getKey, fetcher, {
+    ...params,
+    revalidateIfStale: false,
+    onErrorRetry(err, key, config, revalidate, revalidateOpts) {
+      if(err.status === 404) return 
+      if(err.status === 401) return
+      if(revalidateOpts.retryCount >=3 )return
+    },
+  });
+
+  const list = data?.flatMap((page) => page?.data || []) || [];
+  const pages = data
+  const pageIndex = size
+
+  const loadMore = () => {
+    setSize((size) => size + 1);
+  }
+  return {
+    list,
+    pageIndex,
+    pages,
+    setSize,
+    loadMore
+  }
+}