fix tag manage modal scroll (#5193)

ac493db0 · heheer · GitHub · 286138a4 · ac493db0
Commit ac493db0 authored Jul 10, 2025 by heheer Committed by GitHub Jul 10, 2025
Show whitespace changes
Inline Side-by-side

Showing with 41 additions and 70 deletions

projects/app/src/pageComponents/dataset/detail/CollectionCard/TagManageModal.tsx
+41 -70

No files found.
--- a/projects/app/src/pageComponents/dataset/detail/CollectionCard/TagManageModal.tsx
+++ b/projects/app/src/pageComponents/dataset/detail/CollectionCard/TagManageModal.tsx
@@ -18,10 +18,7 @@ import {
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import MyInput from '@/components/MyInput';
 import { type DatasetTagType } from '@fastgpt/global/core/dataset/type';
-import {
+import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
-  type ScrollListType,
-  useVirtualScrollPagination
-} from '@fastgpt/web/hooks/useScrollPagination';
 import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
 import { type DatasetCollectionsListItemType } from '@/global/core/dataset/type';
@@ -70,7 +67,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
      }),
    {
      onSuccess() {
-        fetchData(1);
+        refreshList();
        setSearchTagKey('');
        loadAllDatasetTags();
      },
@@ -89,7 +86,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
    },
    {
      onSuccess() {
-        fetchData(1);
+        refreshList();
        setSearchTagKey('');
        loadAllDatasetTags();
      }
@@ -124,59 +121,40 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
  // Tags list
  const {
-    scrollDataList: renderTags,
+    data: collectionTags,
-    totalData: collectionTags,
+    ScrollData,
-    ScrollList,
+    refreshList,
-    isLoading: isRequesting,
-    fetchData,
    total: tagsTotal
-  } = useVirtualScrollPagination(getDatasetCollectionTags, {
+  } = useScrollPagination(getDatasetCollectionTags, {
-    refreshDeps: [''],
-    // debounceWait: 300,
-    itemHeight: 56,
-    overscan: 10,
    pageSize: 10,
-    defaultParams: {
+    params: {
      datasetId: datasetDetail._id,
-      searchText: ''
+      searchText
-    }
+    },
+    refreshDeps: [searchText],
+    EmptyTip: <EmptyTip text={t('dataset:dataset.no_tags')} />
  });
  // Collections list
-  const {
+  const { data: collectionsList, ScrollData: ScrollDataCollections } = useScrollPagination(
-    scrollDataList: collectionsList,
+    getDatasetCollections,
-    ScrollList: ScrollListCollections,
+    {
-    isLoading: collectionsListLoading
-  } = useVirtualScrollPagination(getDatasetCollections, {
-    refreshDeps: [searchText],
-    // debounceWait: 300,
-    itemHeight: 37,
-    overscan: 10,
      pageSize: 30,
-    defaultParams: {
+      params: {
        datasetId: datasetDetail._id,
        simple: true,
        searchText
+      },
+      refreshDeps: [searchText],
+      EmptyTip: <EmptyTip text={t('dataset:dataset.no_collections')} />
    }
-  });
+  );
  const { data: tagUsages } = useRequest2(() => getTagUsage(datasetDetail._id), {
    manual: false,
    refreshDeps: [collections]
  });
-  const isLoading =
-    isRequesting ||
-    isCreateCollectionTagLoading ||
-    isDeleteCollectionTagLoading ||
-    isUpdateCollectionTagLoading ||
-    isSaveCollectionTagLoading ||
-    collectionsListLoading;
  return (
    <MyModal
      isOpen
@@ -187,7 +165,6 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
      w={'580px'}
      h={'600px'}
      closeOnOverlayClick={false}
-      isLoading={isLoading}
    >
      {currentAddTag === undefined ? (
        <>
@@ -205,6 +182,15 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
                total: tagsTotal
              })}
            </Box>
+            <MyInput
+              placeholder={t('common:Search')}
+              w={'160px'}
+              h={8}
+              mr={2}
+              onChange={(e) => {
+                setSearchText(e.target.value);
+              }}
+            />
            <Button
              size={'sm'}
              leftIcon={<MyIcon name="common/addLight" w={4} />}
@@ -229,7 +215,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
                  onBlur={async () => {
                    if (newTag && !collectionTags.map((item) => item.tag).includes(newTag)) {
                      await onCreateCollectionTag(newTag);
-                      fetchData(1);
+                      refreshList();
                    }
                    setNewTag(undefined);
                  }}
@@ -237,14 +223,8 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
              </Flex>
            )}
          </Flex>
-          <ScrollList
+          <ScrollData px={8} flex={'1 0 0'} fontSize={'sm'} pb={2}>
-            px={8}
+            {collectionTags.map((item) => {
-            flex={'1 0 0'}
-            fontSize={'sm'}
-            EmptyChildren={<EmptyTip text={t('dataset:dataset.no_tags')} />}
-          >
-            {renderTags.map((listItem) => {
-              const item = listItem.data;
              const tagUsage = tagUsages?.find((tagUsage) => tagUsage.tagId === item._id);
              const collections = tagUsage?.collections || [];
              const usage = collections.length;
@@ -324,6 +304,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
                      borderRadius={'sm'}
                      onClick={() => {
                        setCurrentAddTag({ ...item, collections });
+                        setSearchText('');
                      }}
                      cursor={'pointer'}
                    >
@@ -366,7 +347,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
                </Flex>
              );
            })}
-          </ScrollList>
+          </ScrollData>
        </>
      ) : (
        <AddTagToCollections
@@ -375,7 +356,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
          onSaveCollectionTag={onSaveCollectionTag}
          setSearchText={setSearchText}
          collectionsList={collectionsList}
-          ScrollListCollections={ScrollListCollections}
+          ScrollDataCollections={ScrollDataCollections}
        />
      )}
    </MyModal>
@@ -390,7 +371,7 @@ const AddTagToCollections = ({
  onSaveCollectionTag,
  setSearchText,
  collectionsList,
-  ScrollListCollections
+  ScrollDataCollections
 }: {
  currentAddTag: DatasetTagType & { collections: string[] };
  setCurrentAddTag: (tag: (DatasetTagType & { collections: string[] }) | undefined) => void;
@@ -404,11 +385,8 @@ const AddTagToCollections = ({
    collectionIds: string[];
  }) => void;
  setSearchText: (text: string) => void;
-  collectionsList: {
+  collectionsList: DatasetCollectionsListItemType[];
-    index: number;
+  ScrollDataCollections: ReturnType<typeof useScrollPagination>['ScrollData'];
-    data: DatasetCollectionsListItemType;
-  }[];
-  ScrollListCollections: ScrollListType;
 }) => {
  const { t } = useTranslation();
@@ -419,8 +397,7 @@ const AddTagToCollections = ({
  const formatCollections = useMemo(
    () =>
-      collectionsList.map((item) => {
+      collectionsList.map((collection) => {
-        const collection = item.data;
        const icon = getCollectionIcon({ type: collection.type, name: collection.name });
        return {
          id: collection._id,
@@ -488,13 +465,7 @@ const AddTagToCollections = ({
          {t('common:Save')}
        </Button>
      </Flex>
-      <ScrollListCollections
+      <ScrollDataCollections px={8} mt={2} flex={'1 0 0'} fontSize={'sm'}>
-        px={8}
-        mt={2}
-        flex={'1 0 0'}
-        fontSize={'sm'}
-        EmptyChildren={<EmptyTip text={t('dataset:dataset.no_collections')} />}
-      >
        {formatCollections.map((collection) => {
          return (
            <Flex
@@ -544,7 +515,7 @@ const AddTagToCollections = ({
            </Flex>
          );
        })}
-      </ScrollListCollections>
+      </ScrollDataCollections>
    </>
  );
 };