perf scroll components (#2676)

* perf: add scroll list && virtualist (#2665)

* perf: chatHistorySlider add virtualList

* perf: dataCard add scroll

* fix: ts

* perf: scroll list components

* perf: hook refresh

---------

Co-authored-by: papapatrick <109422393+Patrickill@users.noreply.github.com>

projects/app/src/pages/dataset/detail/components/DataCard.tsx

@@ -29,11 +29,10 @@ import TagsPopOver from './CollectionCard/TagsPopOver';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import MyDivider from '@fastgpt/web/components/common/MyDivider';
 import Markdown from '@/components/Markdown';
+import { DatasetDataListItemType } from '@/global/core/dataset/type';
 
 const DataCard = () => {
-  const BoxRef = useRef<HTMLDivElement>(null);
   const theme = useTheme();
-  const lastSearch = useRef('');
   const router = useRouter();
   const { isPc } = useSystem();
   const { collectionId = '', datasetId } = router.query as {
@@ -51,44 +50,30 @@ const DataCard = () => {
     type: 'delete'
   });
 
-  const {
-    data: datasetDataList,
-    Pagination,
-    total,
-    getData,
-    pageNum,
-    pageSize,
-    isLoading: isRequesting
-  } = usePagination({
-    api: getDatasetDataList,
-    pageSize: 24,
-    defaultRequest: false,
-    params: {
+  const scrollParams = useMemo(
+    () => ({
       collectionId,
       searchText
-    },
-    onChange() {
-      if (BoxRef.current) {
-        BoxRef.current.scrollTop = 0;
-      }
-    }
+    }),
+    [collectionId, searchText]
+  );
+  const {
+    data: datasetDataList,
+    ScrollData,
+    total,
+    isLoading,
+    refresh,
+    setData: setDatasetDataList
+  } = usePagination<DatasetDataListItemType>({
+    api: getDatasetDataList,
+    pageSize: 10,
+    type: 'scroll',
+    params: scrollParams,
+    refreshDeps: [searchText, collectionId]
   });
 
   const [editDataId, setEditDataId] = useState<string>();
 
-  // get first page data
-  useRequest2(
-    async () => {
-      getData(1);
-      lastSearch.current = searchText;
-    },
-    {
-      manual: false,
-      debounceWait: 300,
-      refreshDeps: [searchText]
-    }
-  );
-
   // get file info
   const { data: collection } = useQuery(
     ['getDatasetCollectionById', collectionId],
@@ -106,17 +91,9 @@ const DataCard = () => {
 
   const canWrite = useMemo(() => datasetDetail.permission.hasWritePer, [datasetDetail]);
 
-  const { loading } = useRequest2(putDatasetDataById, {
-    onSuccess() {
-      getData(pageNum);
-    }
-  });
-
-  const isLoading = isRequesting || loading;
-
   return (
-    <MyBox isLoading={isLoading} position={'relative'} py={[1, 0]} h={'100%'}>
-      <Flex ref={BoxRef} flexDirection={'column'} h={'100%'}>
+    <MyBox position={'relative'} py={[1, 0]} h={'100%'}>
+      <Flex flexDirection={'column'} h={'100%'}>
         {/* Header */}
         <Flex alignItems={'center'} px={6}>
           <Flex className="textEllipsis" flex={'1 0 0'} mr={[3, 5]} alignItems={'center'}>
@@ -185,7 +162,7 @@ const DataCard = () => {
           />
         </Flex>
         {/* data */}
-        <Box flex={'1 0 0'} overflow={'auto'} px={5} pb={5}>
+        <ScrollData flex={'1 0 0'} px={5} pb={5}>
           <Flex flexDir={'column'} gap={2}>
             {datasetDataList.map((item, index) => (
               <Card
@@ -203,7 +180,6 @@ const DataCard = () => {
                   boxShadow: 'lg',
                   '& .header': { visibility: 'visible' },
                   '& .footer': { visibility: 'visible' },
-                  '& .forbid-switch': { display: 'flex' },
                   bg: index % 2 === 1 ? 'myGray.200' : 'blue.100'
                 }}
                 onClick={(e) => {
@@ -298,13 +274,18 @@ const DataCard = () => {
                       icon={<MyIcon name={'common/trash'} w={'14px'} color={'myGray.600'} />}
                       variant={'whiteDanger'}
                       size={'xsSquare'}
-                      aria-label={'delete'}
                       onClick={(e) => {
                         e.stopPropagation();
                         openConfirm(async () => {
                           try {
                             await delOneDatasetDataById(item._id);
-                            getData(pageNum);
+                            setDatasetDataList((prev) => {
+                              return prev.filter((data) => data._id !== item._id);
+                            });
+                            toast({
+                              title: t('common:common.Delete Success'),
+                              status: 'success'
+                            });
                           } catch (error) {
                             toast({
                               title: getErrText(error),
@@ -313,19 +294,17 @@ const DataCard = () => {
                           }
                         })();
                       }}
+                      aria-label={''}
                     />
                   )}
                 </Flex>
               </Card>
             ))}
           </Flex>
-          {total > pageSize && (
-            <Flex mt={2} justifyContent={'center'}>
-              <Pagination />
-            </Flex>
-          )}
-          {total === 0 && <EmptyTip text={t('common:core.dataset.data.Empty Tip')}></EmptyTip>}
-        </Box>
+        </ScrollData>
+        {total === 0 && !isLoading && (
+          <EmptyTip text={t('common:core.dataset.data.Empty Tip')}></EmptyTip>
+        )}
       </Flex>
 
       {editDataId !== undefined && collection && (
@@ -333,7 +312,23 @@ const DataCard = () => {
           collectionId={collection._id}
           dataId={editDataId}
           onClose={() => setEditDataId(undefined)}
-          onSuccess={() => getData(pageNum)}
+          onSuccess={(data) => {
+            if (editDataId === '') {
+              refresh();
+              return;
+            }
+            setDatasetDataList((prev) => {
+              return prev.map((item) => {
+                if (item._id === editDataId) {
+                  return {
+                    ...item,
+                    ...data
+                  };
+                }
+                return item;
+              });
+            });
+          }}
         />
       )}
       <ConfirmModal />