gitea/FastGPT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: Dataset new ui (#2555)

Browse Source 
* perf: dataset detail ui

* fix: collection tag modal

* perf: data card support markdown

* fix :ts
This commit is contained in:
Archer
2024-08-28 12:48:55 +08:00
committed by GitHub
parent aba50e958e
commit b9a6b71fe9
16 changed files with 355 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,14 @@
import React, { useCallback, useRef } from 'react';
import { Box, Flex, MenuButton, Button, Link, useTheme, useDisclosure } from '@chakra-ui/react';
import {
Box,
Flex,
MenuButton,
Button,
Link,
useTheme,
useDisclosure,
HStack
} from '@chakra-ui/react';
import {
getDatasetCollectionPathById,
postDatasetCollection,
@@ -114,55 +123,55 @@ const Header = ({}: {}) => {
const isWebSite = datasetDetail?.type === DatasetTypeEnum.websiteDataset;
return (
<Flex px={[2, 6]} alignItems={'flex-start'} h={'35px'}>
<Box flex={1} fontWeight={'500'} color={'myGray.900'} h={'100%'}>
<ParentPath
paths={paths.map((path, i) => ({
parentId: path.parentId,
parentName: i === paths.length - 1 ? `${path.parentName}` : path.parentName
}))}
FirstPathDom={
<Flex
flexDir={'column'}
justify={'center'}
h={'100%'}
fontSize={isWebSite ? 'sm' : 'md'}
fontWeight={'500'}
color={'myGray.600'}
>
<Flex align={'center'}>
{!isWebSite && <MyIcon name="common/list" mr={2} w={'20px'} color={'black'} />}
{t(DatasetTypeMap[datasetDetail?.type]?.collectionLabel as any)}({total})
</Flex>
{datasetDetail?.websiteConfig?.url && (
<Flex fontSize={'mini'}>
{t('common:core.dataset.website.Base Url')}:
<Link
href={datasetDetail.websiteConfig.url}
target="_blank"
mr={2}
color={'blue.700'}
>
{datasetDetail.websiteConfig.url}
</Link>
<Box display={['block', 'flex']} alignItems={'center'} gap={2}>
<HStack flex={1}>
<Box flex={1} fontWeight={'500'} color={'myGray.900'}>
<ParentPath
paths={paths.map((path, i) => ({
parentId: path.parentId,
parentName: i === paths.length - 1 ? `${path.parentName}` : path.parentName
}))}
FirstPathDom={
<Flex
flexDir={'column'}
justify={'center'}
h={'100%'}
fontSize={isWebSite ? 'sm' : 'md'}
fontWeight={'500'}
color={'myGray.600'}
>
<Flex align={'center'}>
{!isWebSite && <MyIcon name="common/list" mr={2} w={'20px'} color={'black'} />}
{t(DatasetTypeMap[datasetDetail?.type]?.collectionLabel as any)}({total})
</Flex>
)}
</Flex>
}
onClick={(e) => {
router.replace({
query: {
...router.query,
parentId: e
}
});
}}
/>
</Box>
{datasetDetail?.websiteConfig?.url && (
<Flex fontSize={'mini'}>
{t('common:core.dataset.website.Base Url')}:
<Link
href={datasetDetail.websiteConfig.url}
target="_blank"
mr={2}
color={'blue.700'}
>
{datasetDetail.websiteConfig.url}
</Link>
</Flex>
)}
</Flex>
}
onClick={(e) => {
router.replace({
query: {
...router.query,
parentId: e
}
});
}}
/>
</Box>
{/* search input */}
{isPc && (
<Flex alignItems={'center'} mr={4}>
{/* search input */}
{isPc && (
<MyInput
w={['100%', '250px']}
size={'sm'}
@@ -192,14 +201,15 @@ const Header = ({}: {}) => {
}
}}
/>
</Flex>
)}
)}
{/* Tag */}
{datasetDetail.permission.hasWritePer && feConfigs?.isPlus && <HeaderTagPopOver />}
</HStack>
{/* diff collection button */}
{datasetDetail.permission.hasWritePer && (
<Flex gap={3}>
{feConfigs?.isPlus && <HeaderTagPopOver />}
<Box textAlign={'end'} mt={[3, 0]}>
{datasetDetail?.type === DatasetTypeEnum.dataset && (
<MyMenu
offset={[0, 5]}
@@ -396,7 +406,7 @@ const Header = ({}: {}) => {
]}
/>
)}
</Flex>
</Box>
)}
{/* modal */}
@@ -427,7 +437,7 @@ const Header = ({}: {}) => {
)}
<EditCreateVirtualFileModal iconSrc={'modal/manualDataset'} closeBtnText={''} />
{isOpenFileSourceSelector && <FileSourceSelector onClose={onCloseFileSourceSelector} />}
</Flex>
</Box>
);
};

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

@@ -29,7 +29,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
const datasetDetail = useContextSelector(DatasetPageContext, (v) => v.datasetDetail);
const loadDatasetTags = useContextSelector(DatasetPageContext, (v) => v.loadDatasetTags);
const loadAllDatasetTags = useContextSelector(DatasetPageContext, (v) => v.loadAllDatasetTags);
const { getData, collections } = useContextSelector(CollectionPageContext, (v) => v);
const { getData, pageNum, collections } = useContextSelector(CollectionPageContext, (v) => v);
const tagInputRef = useRef<HTMLInputElement>(null);
const editInputRef = useRef<HTMLInputElement>(null);
@@ -73,42 +73,43 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
errorToast: t('common:common.Create Failed')
});
const { mutate: onDeleteCollectionTag, isLoading: isDeleteCollectionTagLoading } = useRequest({
mutationFn: async (tag: string) => {
const id = await delDatasetCollectionTag({
const { runAsync: onDeleteCollectionTag, loading: isDeleteCollectionTagLoading } = useRequest2(
(tag: string) => {
return delDatasetCollectionTag({
datasetId: datasetDetail._id,
id: tag
});
return id;
},
{
onSuccess() {
fetchData(1);
loadDatasetTags({ id: datasetDetail._id, searchKey: '' });
loadAllDatasetTags({ id: datasetDetail._id });
},
successToast: t('common:common.Delete Success'),
errorToast: t('common:common.Delete Failed')
}
);
onSuccess() {
fetchData(1);
loadDatasetTags({ id: datasetDetail._id, searchKey: '' });
loadAllDatasetTags({ id: datasetDetail._id });
},
successToast: t('common:common.Delete Success'),
errorToast: t('common:common.Delete Failed')
});
const { mutate: onUpdateCollectionTag, isLoading: isUpdateCollectionTagLoading } = useRequest({
mutationFn: async (tag: DatasetTagType) => {
const id = await updateDatasetCollectionTag({
const { runAsync: onUpdateCollectionTag, loading: isUpdateCollectionTagLoading } = useRequest2(
async (tag: DatasetTagType) => {
return updateDatasetCollectionTag({
datasetId: datasetDetail._id,
tagId: tag._id,
tag: tag.tag
});
return id;
},
onSuccess() {
fetchData(1);
loadDatasetTags({ id: datasetDetail._id, searchKey: '' });
loadAllDatasetTags({ id: datasetDetail._id });
{
onSuccess() {
fetchData(1);
loadDatasetTags({ id: datasetDetail._id, searchKey: '' });
loadAllDatasetTags({ id: datasetDetail._id });
}
}
});
);
const { mutate: onSaveCollectionTag, isLoading: isSaveCollectionTagLoading } = useRequest({
mutationFn: async ({
const { runAsync: onSaveCollectionTag, loading: isSaveCollectionTagLoading } = useRequest2(
async ({
tag,
originCollectionIds,
collectionIds
@@ -117,22 +118,21 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
originCollectionIds: string[];
collectionIds: string[];
}) => {
try {
await postAddTagsToCollections({
tag,
originCollectionIds,
collectionIds,
datasetId: datasetDetail._id
});
} catch (error) {}
return postAddTagsToCollections({
tag,
originCollectionIds,
collectionIds,
datasetId: datasetDetail._id
});
},
onSuccess() {
getData(1);
},
successToast: t('common:common.Save Success'),
errorToast: t('common:common.Save Failed')
});
{
onFinally() {
getData(pageNum);
},
successToast: t('common:common.Save Success'),
errorToast: t('common:common.Save Failed')
}
);
const {
list,
@@ -379,11 +379,9 @@ const AddTagToCollections = ({
const { t } = useTranslation();
const datasetDetail = useContextSelector(DatasetPageContext, (v) => v.datasetDetail);
const [selectedCollections, setSelectedCollections] = useState<string[]>([]);
useEffect(() => {
setSelectedCollections(currentAddTag.collections);
}, []);
const [selectedCollections, setSelectedCollections] = useState<string[]>(
currentAddTag.collections
);
const [searchText, setSearchText] = useState('');

51
projects/app/src/pages/dataset/detail/components/CollectionCard/index.tsx
View File

@@ -21,7 +21,7 @@ import { useQuery } from '@tanstack/react-query';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import { useTranslation } from 'next-i18next';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { useRouter } from 'next/router';
import MyMenu from '@fastgpt/web/components/common/MyMenu';
import { useEditTitle } from '@/web/common/hooks/useEditTitle';
@@ -119,23 +119,22 @@ const CollectionCard = () => {
successToast: t('common:common.Update Success')
}
);
const { mutate: onDelCollection, isLoading: isDeleting } = useRequest({
mutationFn: (collectionId: string) => {
const { runAsync: onDelCollection, loading: isDeleting } = useRequest2(
(collectionId: string) => {
return delDatasetCollectionById({
id: collectionId
});
},
onSuccess() {
getData(pageNum);
},
successToast: t('common:common.Delete Success'),
errorToast: t('common:common.Delete Failed')
});
{
onSuccess() {
getData(pageNum);
},
successToast: t('common:common.Delete Success'),
errorToast: t('common:common.Delete Failed')
}
);
const { mutate: onclickStartSync, isLoading: isSyncing } = useRequest({
mutationFn: (collectionId: string) => {
return postLinkCollectionSync(collectionId);
},
const { runAsync: onclickStartSync, loading: isSyncing } = useRequest2(postLinkCollectionSync, {
onSuccess(res: DatasetCollectionSyncResultEnum) {
getData(pageNum);
toast({
@@ -186,12 +185,12 @@ const CollectionCard = () => {
return (
<MyBox isLoading={isLoading} h={'100%'} py={[2, 4]}>
<Flex ref={BoxRef} flexDirection={'column'} py={[1, 0]} h={'100%'}>
<Flex ref={BoxRef} flexDirection={'column'} py={[1, 0]} h={'100%'} px={[2, 6]}>
{/* header */}
<Header />
{/* collection table */}
<TableContainer px={[2, 6]} mt={[0, 3]} overflowY={'auto'} fontSize={'sm'}>
<TableContainer mt={3} overflowY={'auto'} fontSize={'sm'}>
<Table variant={'simple'} draggable={false}>
<Thead draggable={false}>
<Tr>
@@ -237,7 +236,7 @@ const CollectionCard = () => {
>
<Td minW={'150px'} maxW={['200px', '300px']} draggable py={2}>
<Flex alignItems={'center'}>
<MyIcon name={collection.icon as any} w={'18px'} mr={2} />
<MyIcon name={collection.icon as any} w={'1.25rem'} mr={2} />
<MyTooltip
label={t('common:common.folder.Drag Tip')}
shouldWrapChildren={false}
@@ -287,8 +286,8 @@ const CollectionCard = () => {
offset={[-70, 5]}
Button={
<MenuButton
w={'22px'}
h={'22px'}
w={'1.5rem'}
h={'1.5rem'}
borderRadius={'md'}
_hover={{
color: 'primary.500',
@@ -300,8 +299,8 @@ const CollectionCard = () => {
<MyIcon
className="icon"
name={'more'}
h={'16px'}
w={'16px'}
h={'1rem'}
w={'1rem'}
px={1}
py={1}
borderRadius={'md'}
@@ -317,7 +316,11 @@ const CollectionCard = () => {
{
label: (
<Flex alignItems={'center'}>
<MyIcon name={'common/refreshLight'} w={'14px'} mr={2} />
<MyIcon
name={'common/refreshLight'}
w={'0.9rem'}
mr={2}
/>
{t('common:core.dataset.collection.Sync')}
</Flex>
),
@@ -331,7 +334,7 @@ const CollectionCard = () => {
{
label: (
<Flex alignItems={'center'}>
<MyIcon name={'common/file/move'} w={'14px'} mr={2} />
<MyIcon name={'common/file/move'} w={'0.9rem'} mr={2} />
{t('common:Move')}
</Flex>
),
@@ -341,7 +344,7 @@ const CollectionCard = () => {
{
label: (
<Flex alignItems={'center'}>
<MyIcon name={'edit'} w={'14px'} mr={2} />
<MyIcon name={'edit'} w={'0.9rem'} mr={2} />
{t('common:Rename')}
</Flex>
),
@@ -365,7 +368,7 @@ const CollectionCard = () => {
<MyIcon
mr={1}
name={'delete'}
w={'14px'}
w={'0.9rem'}
_hover={{ color: 'red.600' }}
/>
<Box>{t('common:common.Delete')}</Box>