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/CollectionCard/Context.tsx

@@ -120,11 +120,9 @@ const CollectionPageContextProvider = ({ children }: { children: ReactNode }) =>
       searchText,
       filterTags
     },
-    defaultRequest: false
+    // defaultRequest: false,
+    refreshDeps: [parentId, searchText, filterTags]
   });
-  useEffect(() => {
-    getData(1);
-  }, [parentId]);
 
   const contextValue: CollectionPageContextType = {
     openWebSyncConfirm: openWebSyncConfirm(onUpdateDatasetWebsiteConfig),

projects/app/src/pages/dataset/detail/components/CollectionCard/Header.tsx

@@ -60,15 +60,6 @@ const Header = ({}: {}) => {
   const { searchText, setSearchText, total, getData, pageNum, onOpenWebsiteModal } =
     useContextSelector(CollectionPageContext, (v) => v);
 
-  // change search
-  const debounceRefetch = useCallback(
-    debounce(() => {
-      getData(1);
-      lastSearch.current = searchText;
-    }, 300),
-    []
-  );
-
   const { data: paths = [] } = useQuery(['getDatasetCollectionPathById', parentId], () =>
     getDatasetCollectionPathById(parentId)
   );
@@ -189,17 +180,6 @@ const Header = ({}: {}) => {
             }
             onChange={(e) => {
               setSearchText(e.target.value);
-              debounceRefetch();
-            }}
-            onBlur={() => {
-              if (searchText === lastSearch.current) return;
-              getData(1);
-            }}
-            onKeyDown={(e) => {
-              if (searchText === lastSearch.current) return;
-              if (e.key === 'Enter') {
-                getData(1);
-              }
             }}
           />
         )}

projects/app/src/pages/dataset/detail/components/CollectionCard/HeaderTagPopOver.tsx

@@ -5,15 +5,13 @@ import MyBox from '@fastgpt/web/components/common/MyBox';
 import { useContextSelector } from 'use-context-selector';
 import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
 import { useTranslation } from 'next-i18next';
-import { useCallback, useState } from 'react';
 import { CollectionPageContext } from './Context';
-import { debounce, isEqual } from 'lodash';
+import { isEqual } from 'lodash';
 import TagManageModal from './TagManageModal';
 import { DatasetTagType } from '@fastgpt/global/core/dataset/type';
 
 const HeaderTagPopOver = () => {
   const { t } = useTranslation();
-  const [checkedTags, setCheckedTags] = useState<string[]>([]);
 
   const {
     searchDatasetTagsResult,
@@ -29,12 +27,8 @@ const HeaderTagPopOver = () => {
     CollectionPageContext,
     (v) => v
   );
-  const debounceRefetch = useCallback(
-    debounce(() => {
-      getData(1);
-    }, 300),
-    []
-  );
+
+  const checkedTags = filterTags;
 
   const {
     isOpen: isTagManageModalOpen,
@@ -46,16 +40,13 @@ const HeaderTagPopOver = () => {
     let currentCheckedTags = [];
     if (checkedTags.includes(tag._id)) {
       currentCheckedTags = checkedTags.filter((t) => t !== tag._id);
-      setCheckedTags(currentCheckedTags);
       setCheckedDatasetTag(checkedDatasetTag.filter((t) => t._id !== tag._id));
     } else {
       currentCheckedTags = [...checkedTags, tag._id];
-      setCheckedTags([...checkedTags, tag._id]);
       setCheckedDatasetTag([...checkedDatasetTag, tag]);
     }
     if (isEqual(currentCheckedTags, filterTags)) return;
     setFilterTags(currentCheckedTags);
-    debounceRefetch();
   };
 
   return (
@@ -181,9 +172,7 @@ const HeaderTagPopOver = () => {
                 variant={'unstyled'}
                 onClick={() => {
                   setSearchTagKey('');
-                  setCheckedTags([]);
                   setFilterTags([]);
-                  debounceRefetch();
                   onClose();
                 }}
               >
@@ -211,7 +200,7 @@ const HeaderTagPopOver = () => {
         <TagManageModal
           onClose={() => {
             onCloseTagManageModal();
-            debounceRefetch();
+            getData(1);
           }}
         />
       )}

projects/app/src/pages/dataset/detail/components/CollectionCard/TagManageModal.tsx

@@ -121,14 +121,15 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
 
   // Tags list
   const {
-    list,
+    scrollDataList: renderTags,
+    totalData: collectionTags,
     ScrollList,
     isLoading: isRequesting,
     fetchData,
     total: tagsTotal
   } = useScrollPagination(getDatasetCollectionTags, {
     refreshDeps: [''],
-    debounceWait: 300,
+    // debounceWait: 300,
 
     itemHeight: 56,
     overscan: 10,
@@ -142,12 +143,12 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
 
   // Collections list
   const {
-    list: collectionsList,
+    scrollDataList: collectionsList,
     ScrollList: ScrollListCollections,
     isLoading: collectionsListLoading
   } = useScrollPagination(getScrollCollectionList, {
     refreshDeps: [searchText],
-    debounceWait: 300,
+    // debounceWait: 300,
 
     itemHeight: 37,
     overscan: 10,
@@ -221,7 +222,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
                   ref={tagInputRef}
                   w={'200px'}
                   onBlur={() => {
-                    if (newTag && !list.map((item) => item.data.tag).includes(newTag)) {
+                    if (newTag && !collectionTags.map((item) => item.tag).includes(newTag)) {
                       onCreateCollectionTag(newTag);
                     }
                     setNewTag(undefined);
@@ -236,7 +237,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
             fontSize={'sm'}
             EmptyChildren={<EmptyTip text={t('dataset:dataset.no_tags')} />}
           >
-            {list.map((listItem) => {
+            {renderTags.map((listItem) => {
               const item = listItem.data;
               const tagUsage = tagUsages?.find((tagUsage) => tagUsage.tagId === item._id);
               const collections = tagUsage?.collections || [];
@@ -292,7 +293,9 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
                           onBlur={() => {
                             if (
                               currentEditTagContent &&
-                              !list.map((item) => item.data.tag).includes(currentEditTagContent)
+                              !collectionTags
+                                .map((item) => item.tag)
+                                .includes(currentEditTagContent)
                             ) {
                               onUpdateCollectionTag({
                                 tag: currentEditTagContent,