ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-10-17 16:45:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix tag manage modal scroll (#5193)

Browse Source
This commit is contained in:
heheer
2025-07-10 18:07:57 +08:00
committed by GitHub
parent 286138a454
commit ac493db00f
1 changed files with 45 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
projects/app/src/pageComponents/dataset/detail/CollectionCard/TagManageModal.tsx
View File

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