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

chore: dataset fe adjusting (#1833)

Browse Source
This commit is contained in:
Finley Ge 2024-06-24 19:04:42 +08:00 committed by GitHub
parent 4a33e04a08
commit 9d29b471bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 490 additions and 433 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
projects/app/src/pages/api/core/dataset/list.ts
View File

@ -11,11 +11,12 @@ import {
ReadPermissionVal ReadPermissionVal
} from '@fastgpt/global/support/permission/constant'; } from '@fastgpt/global/support/permission/constant';
import { MongoResourcePermission } from '@fastgpt/service/support/permission/schema'; import { MongoResourcePermission } from '@fastgpt/service/support/permission/schema';
import { parseParentIdInMongo } from '@fastgpt/global/common/parentFolder/utils';
import { DatasetDefaultPermission } from '@fastgpt/global/support/permission/dataset/constant'; import { DatasetDefaultPermission } from '@fastgpt/global/support/permission/dataset/constant';
import { ParentIdType } from '@fastgpt/global/common/parentFolder/type';
import { parseParentIdInMongo } from '@fastgpt/global/common/parentFolder/utils';
async function handler(req: NextApiRequest) { async function handler(req: NextApiRequest) {
const { parentId, type } = req.query as { parentId?: string; type?: DatasetTypeEnum }; const { parentId, type } = req.body as { parentId: ParentIdType; type?: DatasetTypeEnum };
// 凭证校验 // 凭证校验
const { const {
teamId, teamId,
@ -27,6 +28,18 @@ async function handler(req: NextApiRequest) {
authApiKey: true, authApiKey: true,
per: ReadPermissionVal per: ReadPermissionVal
}); });
console.log(
'parentId',
parentId,
'type',
type,
'teamId',
teamId,
'tmbId',
tmbId,
'tmbPer',
tmbPer
);
const [myDatasets, rpList] = await Promise.all([ const [myDatasets, rpList] = await Promise.all([
MongoDataset.find({ MongoDataset.find({

602
projects/app/src/pages/dataset/list/component/List.tsx
View File

@ -1,16 +1,7 @@
import React, { useMemo, useRef, useState } from 'react'; import React, { useMemo, useRef, useState } from 'react';
import { import { putDatasetById } from '@/web/core/dataset/api';
delDatasetById,
getDatasetById,
putDatasetById,
postCreateDataset
} from '@/web/core/dataset/api';
import { EditFolderFormType } from '@fastgpt/web/components/common/MyModal/EditFolderModal';
import { FolderImgUrl } from '@fastgpt/global/common/file/image/constants';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useDatasetStore } from '@/web/core/dataset/store/dataset'; import { useDatasetStore } from '@/web/core/dataset/store/dataset';
import { FolderIcon } from '@fastgpt/global/common/file/image/constants'; import { Box, Flex, Grid } from '@chakra-ui/react';
import { Box, Flex, Grid, Button, Image, useDisclosure } from '@chakra-ui/react';
import { DatasetTypeEnum, DatasetTypeMap } from '@fastgpt/global/core/dataset/constants'; import { DatasetTypeEnum, DatasetTypeMap } from '@fastgpt/global/core/dataset/constants';
import MyMenu from '@fastgpt/web/components/common/MyMenu'; import MyMenu from '@fastgpt/web/components/common/MyMenu';
import MyIcon from '@fastgpt/web/components/common/Icon'; import MyIcon from '@fastgpt/web/components/common/Icon';
@ -19,7 +10,7 @@ import PermissionIconText from '@/components/support/permission/IconText';
import DatasetTypeTag from '@/components/core/dataset/DatasetTypeTag'; import DatasetTypeTag from '@/components/core/dataset/DatasetTypeTag';
import Avatar from '@/components/Avatar'; import Avatar from '@/components/Avatar';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm'; import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest'; import { useRequest } from '@fastgpt/web/hooks/useRequest';
import { DatasetItemType } from '@fastgpt/global/core/dataset/type'; import { DatasetItemType } from '@fastgpt/global/core/dataset/type';
import { useSystemStore } from '@/web/common/system/useSystemStore'; import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useToast } from '@fastgpt/web/hooks/useToast'; import { useToast } from '@fastgpt/web/hooks/useToast';
@ -27,7 +18,6 @@ import { checkTeamExportDatasetLimit } from '@/web/support/user/team/api';
import { downloadFetch } from '@/web/common/system/utils'; import { downloadFetch } from '@/web/common/system/utils';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip'; import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { EditResourceInfoFormType } from '@/components/common/Modal/EditResourceModal';
import { useContextSelector } from 'use-context-selector'; import { useContextSelector } from 'use-context-selector';
import { DatasetContext } from '../context'; import { DatasetContext } from '../context';
import { import {
@ -40,37 +30,28 @@ import {
getCollaboratorList, getCollaboratorList,
postUpdateDatasetCollaborators postUpdateDatasetCollaborators
} from '@/web/core/dataset/api/collaborator'; } from '@/web/core/dataset/api/collaborator';
import FolderSlideCard from '@/components/common/folder/SlideCard';
import EmptyTip from '@fastgpt/web/components/common/EmptyTip'; import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
import { useFolderDrag } from '@/components/common/folder/useFolderDrag'; import { useFolderDrag } from '@/components/common/folder/useFolderDrag';
import MyBox from '@fastgpt/web/components/common/MyBox'; import MyBox from '@fastgpt/web/components/common/MyBox';
import { useI18n } from '@/web/context/I18n'; import { useI18n } from '@/web/context/I18n';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { AddIcon } from '@chakra-ui/icons';
const CreateModal = dynamic(() => import('./CreateModal'));
const EditFolderModal = dynamic(
() => import('@fastgpt/web/components/common/MyModal/EditFolderModal')
);
function List() { function List() {
const { setLoading, isPc } = useSystemStore(); const { setLoading } = useSystemStore();
const { toast } = useToast(); const { toast } = useToast();
const { t } = useTranslation(); const { t } = useTranslation();
const { commonT } = useI18n(); const { commonT } = useI18n();
const { refetchDatasets, setMoveDatasetId, refetchPaths } = useContextSelector(
DatasetContext,
(v) => v
);
const [editPerDatasetIndex, setEditPerDatasetIndex] = useState<number>();
const { myDatasets, loadMyDatasets, setMyDatasets } = useDatasetStore();
const { userInfo } = useUserStore();
const { const {
isOpen: isOpenCreateModal, refetchDatasets,
onOpen: onOpenCreateModal, setMoveDatasetId,
onClose: onCloseCreateModal refetchPaths,
} = useDisclosure(); refetchFolderDetail,
editedDataset,
setEditedDataset,
onDelDataset
} = useContextSelector(DatasetContext, (v) => v);
const [editPerDatasetIndex, setEditPerDatasetIndex] = useState<number>();
const { myDatasets, loadMyDatasets } = useDatasetStore();
const { getBoxProps } = useFolderDrag({ const { getBoxProps } = useFolderDrag({
activeStyles: { activeStyles: {
@ -98,14 +79,6 @@ function List() {
const { parentId = null } = router.query as { parentId?: string | null }; const { parentId = null } = router.query as { parentId?: string | null };
const { data: folderDetail, runAsync: refetchFolderDetail } = useRequest2(
() => (parentId ? getDatasetById(parentId) : Promise.resolve(undefined)),
{
manual: false,
refreshDeps: [parentId, myDatasets]
}
);
const { mutate: exportDataset } = useRequest({ const { mutate: exportDataset } = useRequest({
mutationFn: async (dataset: DatasetItemType) => { mutationFn: async (dataset: DatasetItemType) => {
setLoading(true); setLoading(true);
@ -128,25 +101,7 @@ function List() {
errorToast: t('dataset.Export Dataset Limit Error') errorToast: t('dataset.Export Dataset Limit Error')
}); });
const { mutate: onDelDataset } = useRequest({
mutationFn: async (id: string) => {
setLoading(true);
await delDatasetById(id);
return id;
},
onSuccess(id: string) {
setMyDatasets(myDatasets.filter((item) => item._id !== id));
router.push('/dataset/list');
},
onSettled() {
setLoading(false);
},
successToast: t('common.Delete Success'),
errorToast: t('dataset.Delete Dataset Error')
});
const EditResourceModal = dynamic(() => import('@/components/common/Modal/EditResourceModal')); const EditResourceModal = dynamic(() => import('@/components/common/Modal/EditResourceModal'));
const [editedDataset, setEditedDataset] = useState<EditResourceInfoFormType>();
const DeleteTipsMap = useRef({ const DeleteTipsMap = useRef({
[DatasetTypeEnum.folder]: t('dataset.deleteFolderTips'), [DatasetTypeEnum.folder]: t('dataset.deleteFolderTips'),
@ -173,322 +128,212 @@ function List() {
const onClickDeleteDataset = (id: string) => { const onClickDeleteDataset = (id: string) => {
openConfirm( openConfirm(
() => onDelDataset(id), () =>
onDelDataset(id).then(() => {
refetchPaths();
refetchDatasets();
}),
undefined, undefined,
DeleteTipsMap.current[DatasetTypeEnum.dataset] DeleteTipsMap.current[DatasetTypeEnum.dataset]
)(); )();
}; };
const [editFolderData, setEditFolderData] = useState<EditFolderFormType>();
return ( return (
<> <>
<Flex {formatDatasets.length > 0 && (
{...(parentId <Grid
? { flexGrow={1}
px: '8' py={5}
} gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']}
: {})} gridGap={5}
> userSelect={'none'}
{formatDatasets.length > 0 && ( >
<Grid {formatDatasets.map((dataset, index) => (
flexGrow={1} <MyTooltip
py={5} key={dataset._id}
gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']} label={
gridGap={5} <Flex flexDirection={'column'} alignItems={'center'}>
userSelect={'none'} <Box fontSize={'xs'} color={'myGray.500'}>
> {dataset.type === DatasetTypeEnum.folder ? '打开文件夹' : '打开知识库'}
{formatDatasets.map((dataset, index) => ( </Box>
<MyTooltip </Flex>
key={dataset._id} }
label={ >
<Flex flexDirection={'column'} alignItems={'center'}> <MyBox
<Box fontSize={'xs'} color={'myGray.500'}> display={'flex'}
{dataset.type === DatasetTypeEnum.folder ? '打开文件夹' : '打开知识库'} flexDirection={'column'}
</Box> py={3}
</Flex> px={5}
} cursor={'pointer'}
borderWidth={1.5}
bg={'white'}
borderRadius={'md'}
minH={'130px'}
position={'relative'}
{...getBoxProps({
dataId: dataset._id,
isFolder: dataset.type === DatasetTypeEnum.folder
})}
_hover={{
borderColor: 'primary.300',
boxShadow: '1.5',
'& .delete': {
display: 'block'
},
'& .more': {
display: 'flex'
}
}}
onClick={() => {
if (dataset.type === DatasetTypeEnum.folder) {
router.push({
pathname: '/dataset/list',
query: {
parentId: dataset._id
}
});
} else {
router.push({
pathname: '/dataset/detail',
query: {
datasetId: dataset._id
}
});
}
}}
> >
<MyBox {dataset.permission.hasWritePer && (
display={'flex'} <Box
flexDirection={'column'} className="more"
py={3} display={['', 'none']}
px={5} position={'absolute'}
cursor={'pointer'} top={3.5}
borderWidth={1.5} right={4}
bg={'white'} borderRadius={'md'}
borderRadius={'md'} _hover={{
minH={'130px'} color: 'primary.500',
position={'relative'} '& .icon': {
{...getBoxProps({ bg: 'myGray.100'
dataId: dataset._id, }
isFolder: dataset.type === DatasetTypeEnum.folder }}
})} onClick={(e) => {
_hover={{ e.stopPropagation();
borderColor: 'primary.300', }}
boxShadow: '1.5', >
'& .delete': { <MyMenu
display: 'block' Button={
}, <Box w={'22px'} h={'22px'}>
'& .more': { <MyIcon
display: 'flex' className="icon"
} name={'more'}
}} h={'16px'}
onClick={() => { w={'16px'}
if (dataset.type === DatasetTypeEnum.folder) { px={1}
router.push({ py={1}
pathname: '/dataset/list', borderRadius={'md'}
query: { cursor={'pointer'}
parentId: dataset._id />
} </Box>
}); }
} else { menuList={[
router.push({ {
pathname: '/dataset/detail', children: [
query: { {
datasetId: dataset._id icon: 'edit',
} label: commonT('dataset.Edit Info'),
}); onClick: () =>
} setEditedDataset({
}} id: dataset._id,
> name: dataset.name,
{dataset.permission.hasWritePer && ( intro: dataset.intro,
<Box avatar: dataset.avatar
className="more" })
display={['', 'none']} },
position={'absolute'} {
top={3.5} icon: 'common/file/move',
right={4} label: t('Move'),
borderRadius={'md'} onClick: () => setMoveDatasetId(dataset._id)
_hover={{ },
color: 'primary.500',
'& .icon': {
bg: 'myGray.100'
}
}}
onClick={(e) => {
e.stopPropagation();
}}
>
<MyMenu
Button={
<Box w={'22px'} h={'22px'}>
<MyIcon
className="icon"
name={'more'}
h={'16px'}
w={'16px'}
px={1}
py={1}
borderRadius={'md'}
cursor={'pointer'}
/>
</Box>
}
menuList={[
{
children: [
{
icon: 'edit',
label: '编辑信息',
onClick: () =>
setEditedDataset({
id: dataset._id,
name: dataset.name,
intro: dataset.intro,
avatar: dataset.avatar
})
},
{
icon: 'common/file/move',
label: t('Move'),
onClick: () => setMoveDatasetId(dataset._id)
},
...(dataset.type !== DatasetTypeEnum.folder ...(dataset.type != DatasetTypeEnum.folder
? [ ? [
{ {
icon: 'export', icon: 'export',
label: t('Export'), label: t('Export'),
onClick: () => { onClick: () => {
exportDataset(dataset); exportDataset(dataset);
}
} }
] }
: []), ]
...(dataset.permission.hasManagePer : []),
? [ ...(dataset.permission.hasManagePer
{ ? [
icon: 'support/team/key', {
label: t('permission.Permission'), icon: 'support/team/key',
onClick: () => setEditPerDatasetIndex(index) label: t('permission.Permission'),
} onClick: () => setEditPerDatasetIndex(index)
] }
: []) ]
] : [])
}, ]
{ },
children: [ ...(dataset.permission.hasManagePer
? [
{ {
icon: 'export', children: [
label: t('Export'), {
onClick: () => { icon: 'delete',
exportDataset(dataset); label: t('common.Delete'),
} type: 'danger' as 'danger',
onClick: () => onClickDeleteDataset(dataset._id)
}
]
} }
] ]
}, : [])
...(dataset.permission.hasManagePer ]}
? [ />
{ </Box>
children: [ )}
{
icon: 'delete', <Flex alignItems={'center'} h={'38px'}>
label: t('common.Delete'), <Avatar src={dataset.avatar} borderRadius={'md'} w={'28px'} />
type: 'danger' as 'danger', <Box mx={3} className="textEllipsis3">
onClick: () => onClickDeleteDataset(dataset._id) {dataset.name}
}
]
}
]
: [])
]}
/>
</Box>
)}
<Flex alignItems={'center'} h={'38px'}>
<Avatar src={dataset.avatar} borderRadius={'md'} w={'28px'} />
<Box mx={3} className="textEllipsis3">
{dataset.name}
</Box>
</Flex>
<Box
flex={1}
className={'textEllipsis3'}
py={1}
wordBreak={'break-all'}
fontSize={'xs'}
color={'myGray.500'}
>
{dataset.intro ||
(dataset.type === DatasetTypeEnum.folder
? t('core.dataset.Folder placeholder')
: t('core.dataset.Intro Placeholder'))}
</Box> </Box>
<Flex alignItems={'center'} fontSize={'sm'}>
<Box flex={1}>
<PermissionIconText
defaultPermission={dataset.defaultPermission}
color={'myGray.600'}
/>
</Box>
{dataset.type !== DatasetTypeEnum.folder && (
<DatasetTypeTag type={dataset.type} py={1} px={2} />
)}
</Flex>
</MyBox>
</MyTooltip>
))}
</Grid>
)}
{myDatasets.length === 0 && (
<EmptyTip pt={'35vh'} text={t('core.dataset.Empty Dataset Tips')} flexGrow="1"></EmptyTip>
)}
{userInfo?.team?.permission.hasWritePer && (
<MyMenu
offset={[-30, 5]}
width={120}
Button={
<Button variant={'primaryOutline'} px={0}>
<Flex alignItems={'center'} px={'20px'}>
<AddIcon mr={2} />
<Box>{t('common.Create New')}</Box>
</Flex> </Flex>
</Button> <Box
} flex={1}
menuList={[ className={'textEllipsis3'}
{ py={1}
children: [ wordBreak={'break-all'}
{ fontSize={'xs'}
label: ( color={'myGray.500'}
<Flex> >
<MyIcon name={FolderIcon} w={'20px'} mr={1} /> {dataset.intro ||
{t('Folder')} (dataset.type === DatasetTypeEnum.folder
</Flex> ? t('core.dataset.Folder placeholder')
), : t('core.dataset.Intro Placeholder'))}
onClick: () => setEditFolderData({}) </Box>
}, <Flex alignItems={'center'} fontSize={'sm'}>
{ <Box flex={1}>
label: ( <PermissionIconText
<Flex> defaultPermission={dataset.defaultPermission}
<Image src={'/imgs/workflow/db.png'} alt={''} w={'20px'} mr={1} /> color={'myGray.600'}
{t('core.dataset.Dataset')} />
</Flex> </Box>
), {dataset.type !== DatasetTypeEnum.folder && (
onClick: onOpenCreateModal <DatasetTypeTag type={dataset.type} py={1} px={2} />
} )}
] </Flex>
} </MyBox>
]} </MyTooltip>
/> ))}
)} </Grid>
)}
{!!folderDetail && isPc && ( {myDatasets.length === 0 && (
<Box pt={[4, 6]} ml={[4, 6]}> <EmptyTip pt={'35vh'} text={t('core.dataset.Empty Dataset Tips')} flexGrow="1"></EmptyTip>
<FolderSlideCard )}
refreshDeps={[folderDetail._id]}
name={folderDetail.name}
intro={folderDetail.intro}
onEdit={() => {
setEditedDataset({
id: folderDetail._id,
name: folderDetail.name,
intro: folderDetail.intro
});
}}
onMove={() => setMoveDatasetId(folderDetail._id)}
deleteTip={t('dataset.deleteFolderTips')}
onDelete={() => onDelDataset(folderDetail._id)}
defaultPer={{
value: folderDetail.defaultPermission,
defaultValue: DatasetDefaultPermission,
onChange: (e) => {
return putDatasetById({
id: folderDetail._id,
defaultPermission: e
});
}
}}
managePer={{
permission: folderDetail.permission,
onGetCollaboratorList: () => getCollaboratorList(folderDetail._id),
permissionList: DatasetPermissionList,
onUpdateCollaborators: ({
tmbIds,
permission
}: {
tmbIds: string[];
permission: number;
}) => {
return postUpdateDatasetCollaborators({
tmbIds,
permission,
datasetId: folderDetail._id
});
},
onDelOneCollaborator: (tmbId: string) =>
deleteDatasetCollaborators({
datasetId: folderDetail._id,
tmbId
})
}}
/>
</Box>
)}
</Flex>
<ConfirmModal />
{editedDataset && ( {editedDataset && (
<EditResourceModal <EditResourceModal
@ -551,42 +396,7 @@ function List() {
onClose={() => setEditPerDatasetIndex(undefined)} onClose={() => setEditPerDatasetIndex(undefined)}
/> />
)} )}
{!!editFolderData && ( <ConfirmModal />
<EditFolderModal
onClose={() => setEditFolderData(undefined)}
onCreate={async ({ name }) => {
try {
await postCreateDataset({
parentId: parentId || undefined,
name,
type: DatasetTypeEnum.folder,
avatar: FolderImgUrl,
intro: ''
});
refetchDatasets();
refetchPaths();
} catch (error) {
return Promise.reject(error);
}
}}
onEdit={async ({ name, intro, id }) => {
try {
await putDatasetById({
id,
name,
intro
});
refetchDatasets();
refetchPaths();
} catch (error) {
return Promise.reject(error);
}
}}
/>
)}
{isOpenCreateModal && (
<CreateModal onClose={onCloseCreateModal} parentId={parentId || undefined} />
)}
</> </>
); );
} }

67
projects/app/src/pages/dataset/list/context.tsx
View File

@ -1,4 +1,10 @@
import { getDatasetPaths, putDatasetById } from '@/web/core/dataset/api'; import {
getDatasetPaths,
putDatasetById,
getDatasets,
getDatasetById,
delDatasetById
} from '@/web/core/dataset/api';
import { useDatasetStore } from '@/web/core/dataset/store/dataset'; import { useDatasetStore } from '@/web/core/dataset/store/dataset';
import { import {
GetResourceFolderListProps, GetResourceFolderListProps,
@ -9,18 +15,28 @@ import { useRouter } from 'next/router';
import React, { useCallback, useState } from 'react'; import React, { useCallback, useState } from 'react';
import { createContext } from 'use-context-selector'; import { createContext } from 'use-context-selector';
import { useI18n } from '@/web/context/I18n'; import { useI18n } from '@/web/context/I18n';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest'; import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { DatasetUpdateBody } from '@fastgpt/global/core/dataset/api'; import { DatasetUpdateBody } from '@fastgpt/global/core/dataset/api';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
import { DatasetItemType } from '@fastgpt/global/core/dataset/type';
import { EditResourceInfoFormType } from '@/components/common/Modal/EditResourceModal';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useTranslation } from 'react-i18next';
const MoveModal = dynamic(() => import('@/components/common/folder/MoveModal')); const MoveModal = dynamic(() => import('@/components/common/folder/MoveModal'));
export type DatasetContextType = { export type DatasetContextType = {
refetchDatasets: () => void; refetchDatasets: () => void;
refetchPaths: () => void; refetchPaths: () => void;
refetchFolderDetail: () => void;
isFetchingDatasets: boolean; isFetchingDatasets: boolean;
setMoveDatasetId: (id: string) => void; setMoveDatasetId: (id: string) => void;
paths: ParentTreePathItemType[]; paths: ParentTreePathItemType[];
folderDetail?: DatasetItemType;
editedDataset?: EditResourceInfoFormType;
setEditedDataset: (data?: EditResourceInfoFormType) => void;
onDelDataset: (id: string) => Promise<void>;
}; };
export const DatasetContext = createContext<DatasetContextType>({ export const DatasetContext = createContext<DatasetContextType>({
@ -28,22 +44,39 @@ export const DatasetContext = createContext<DatasetContextType>({
isFetchingDatasets: false, isFetchingDatasets: false,
setMoveDatasetId: () => {}, setMoveDatasetId: () => {},
refetchPaths: () => {}, refetchPaths: () => {},
paths: [] paths: [],
refetchFolderDetail: () => {},
folderDetail: {} as any,
editedDataset: {} as any,
setEditedDataset: () => {},
onDelDataset: () => Promise.resolve()
}); });
function DatasetContextProvider({ children }: { children: React.ReactNode }) { function DatasetContextProvider({ children }: { children: React.ReactNode }) {
const router = useRouter(); const router = useRouter();
const { commonT } = useI18n(); const { commonT } = useI18n();
const { t } = useTranslation();
const { parentId = null } = router.query as { parentId?: string | null }; const { parentId = null } = router.query as { parentId?: string | null };
const { loadMyDatasets } = useDatasetStore(); const { myDatasets, loadMyDatasets } = useDatasetStore();
const getDatasetFolderList = useCallback(async ({ parentId }: GetResourceFolderListProps) => { const { data: folderDetail, runAsync: refetchFolderDetail } = useRequest2(
const res = await getDatasetPaths(parentId); () => (parentId ? getDatasetById(parentId) : Promise.resolve(undefined)),
return res.map((item) => ({ {
id: item.parentId, manual: false,
name: item.parentName refreshDeps: [parentId, myDatasets]
})); }
);
const getDatasetFolderList = useCallback(({ parentId }: GetResourceFolderListProps) => {
return getDatasets({
parentId,
type: DatasetTypeEnum.folder
}).then((res) => {
return res.map((item) => ({
id: item._id,
name: item.name
}));
});
}, []); }, []);
const { data: paths = [], runAsync: refetchPaths } = useRequest2( const { data: paths = [], runAsync: refetchPaths } = useRequest2(
@ -82,12 +115,24 @@ function DatasetContextProvider({ children }: { children: React.ReactNode }) {
[moveDatasetId, onUpdateDataset] [moveDatasetId, onUpdateDataset]
); );
const [editedDataset, setEditedDataset] = useState<EditResourceInfoFormType>();
const { runAsync: onDelDataset } = useRequest2(delDatasetById, {
successToast: t('common.Delete Success'),
errorToast: t('dataset.Delete Dataset Error')
});
const contextValue = { const contextValue = {
refetchDatasets, refetchDatasets,
isFetchingDatasets, isFetchingDatasets,
setMoveDatasetId, setMoveDatasetId,
paths, paths,
refetchPaths refetchPaths,
refetchFolderDetail,
folderDetail,
editedDataset,
setEditedDataset,
onDelDataset
}; };
return ( return (

233
projects/app/src/pages/dataset/list/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React, { useState } from 'react';
import { Box, Flex, Image } from '@chakra-ui/react'; import { Box, Flex, Image, Button, useDisclosure } from '@chakra-ui/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import PageContainer from '@/components/PageContainer'; import PageContainer from '@/components/PageContainer';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
@ -10,41 +10,230 @@ import List from './component/List';
import { DatasetContext } from './context'; import { DatasetContext } from './context';
import DatasetContextProvider from './context'; import DatasetContextProvider from './context';
import { useContextSelector } from 'use-context-selector'; import { useContextSelector } from 'use-context-selector';
import MyMenu from '@fastgpt/web/components/common/MyMenu';
import { AddIcon } from '@chakra-ui/icons';
import { useUserStore } from '@/web/support/user/useUserStore';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { FolderIcon, FolderImgUrl } from '@fastgpt/global/common/file/image/constants';
import { EditFolderFormType } from '@fastgpt/web/components/common/MyModal/EditFolderModal';
import dynamic from 'next/dynamic';
import { postCreateDataset, putDatasetById } from '@/web/core/dataset/api';
import { DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
import FolderSlideCard from '@/components/common/folder/SlideCard';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import {
DatasetDefaultPermission,
DatasetPermissionList
} from '@fastgpt/global/support/permission/dataset/constant';
import {
postUpdateDatasetCollaborators,
deleteDatasetCollaborators,
getCollaboratorList
} from '@/web/core/dataset/api/collaborator';
const EditFolderModal = dynamic(
() => import('@fastgpt/web/components/common/MyModal/EditFolderModal')
);
const CreateModal = dynamic(() => import('./component/CreateModal'));
const Dataset = () => { const Dataset = () => {
const { isPc } = useSystemStore();
const { t } = useTranslation(); const { t } = useTranslation();
const router = useRouter(); const router = useRouter();
const { parentId } = router.query as { parentId: string };
const { myDatasets } = useDatasetStore(); const { myDatasets } = useDatasetStore();
const { paths, isFetchingDatasets } = useContextSelector(DatasetContext, (v) => v); const {
paths,
isFetchingDatasets,
refetchPaths,
refetchDatasets,
folderDetail,
setEditedDataset,
setMoveDatasetId,
onDelDataset
} = useContextSelector(DatasetContext, (v) => v);
const { userInfo } = useUserStore();
const [editFolderData, setEditFolderData] = useState<EditFolderFormType>();
const {
isOpen: isOpenCreateModal,
onOpen: onOpenCreateModal,
onClose: onCloseCreateModal
} = useDisclosure();
return ( return (
<PageContainer <PageContainer
isLoading={myDatasets.length === 0 && isFetchingDatasets} isLoading={myDatasets.length === 0 && isFetchingDatasets}
insertProps={{ px: [5, '48px'] }} insertProps={{ px: [5, '48px'] }}
> >
<Flex pt={[4, '30px']} alignItems={'center'} justifyContent={'space-between'}> <Flex pt={[8, 10]} pr={folderDetail ? [4, 6] : [4, 10]}>
{/* url path */} <Flex flexGrow={1} flexDirection="column">
<ParentPaths <Flex alignItems={'center'} justifyContent={'space-between'}>
paths={paths} <ParentPaths
FirstPathDom={ paths={paths}
<Flex flex={1} alignItems={'center'}> FirstPathDom={
<Image src={'/imgs/workflow/db.png'} alt={''} mr={2} h={'24px'} /> <Flex flex={1} alignItems={'center'}>
<Box className="textlg" letterSpacing={1} fontSize={'24px'} fontWeight={'bold'}> <Image src={'/imgs/workflow/db.png'} alt={''} mr={2} h={'24px'} />
{t('core.dataset.My Dataset')} <Box className="textlg" letterSpacing={1} fontSize={'24px'} fontWeight={'bold'}>
</Box> {t('core.dataset.My Dataset')}
</Flex> </Box>
} </Flex>
onClick={(e) => {
router.push({
query: {
parentId: e
} }
}); onClick={(e) => {
router.push({
query: {
parentId: e
}
});
}}
/>
{userInfo?.team?.permission.hasWritePer && (
<MyMenu
offset={[-30, 5]}
width={120}
Button={
<Button variant={'primary'} px="0">
<Flex alignItems={'center'} px={'20px'}>
<AddIcon mr={2} />
<Box>{t('common.Create New')}</Box>
</Flex>
</Button>
}
menuList={[
{
children: [
{
label: (
<Flex>
<MyIcon name={FolderIcon} w={'20px'} mr={1} />
{t('Folder')}
</Flex>
),
onClick: () => setEditFolderData({})
},
{
label: (
<Flex>
<Image src={'/imgs/workflow/db.png'} alt={''} w={'20px'} mr={1} />
{t('core.dataset.Dataset')}
</Flex>
),
onClick: onOpenCreateModal
}
]
}
]}
/>
)}
</Flex>
<Box flexGrow={1}>
<List />
</Box>
</Flex>
{!!folderDetail && isPc && (
<Box ml="6">
<FolderSlideCard
refreshDeps={[folderDetail._id]}
name={folderDetail.name}
intro={folderDetail.intro}
onEdit={() => {
setEditedDataset({
id: folderDetail._id,
name: folderDetail.name,
intro: folderDetail.intro
});
}}
onMove={() => setMoveDatasetId(folderDetail._id)}
deleteTip={t('dataset.deleteFolderTips')}
onDelete={() =>
onDelDataset(folderDetail._id).then(() => {
router.replace({
query: {
...router.query,
parentId: folderDetail.parentId
}
});
})
}
defaultPer={{
value: folderDetail.defaultPermission,
defaultValue: DatasetDefaultPermission,
onChange: (e) => {
return putDatasetById({
id: folderDetail._id,
defaultPermission: e
});
}
}}
managePer={{
permission: folderDetail.permission,
onGetCollaboratorList: () => getCollaboratorList(folderDetail._id),
permissionList: DatasetPermissionList,
onUpdateCollaborators: ({
tmbIds,
permission
}: {
tmbIds: string[];
permission: number;
}) => {
return postUpdateDatasetCollaborators({
tmbIds,
permission,
datasetId: folderDetail._id
});
},
onDelOneCollaborator: (tmbId: string) =>
deleteDatasetCollaborators({
datasetId: folderDetail._id,
tmbId
})
}}
/>
</Box>
)}
</Flex>
{!!editFolderData && (
<EditFolderModal
onClose={() => setEditFolderData(undefined)}
onCreate={async ({ name }) => {
try {
await postCreateDataset({
parentId: parentId || undefined,
name,
type: DatasetTypeEnum.folder,
avatar: FolderImgUrl,
intro: ''
});
refetchDatasets();
refetchPaths();
} catch (error) {
return Promise.reject(error);
}
}}
onEdit={async ({ name, intro, id }) => {
try {
await putDatasetById({
id,
name,
intro
});
refetchDatasets();
refetchPaths();
} catch (error) {
return Promise.reject(error);
}
}} }}
/> />
</Flex> )}
<List /> {isOpenCreateModal && (
<CreateModal onClose={onCloseCreateModal} parentId={parentId || undefined} />
)}
</PageContainer> </PageContainer>
); );
}; };

4
projects/app/src/web/core/dataset/api.ts
View File

@ -51,8 +51,8 @@ import type {
import type { readCollectionSourceResponse } from '@/pages/api/core/dataset/collection/read'; import type { readCollectionSourceResponse } from '@/pages/api/core/dataset/collection/read';
/* ======================== dataset ======================= */ /* ======================== dataset ======================= */
export const getDatasets = (data: { parentId?: string; type?: DatasetTypeEnum }) => export const getDatasets = (data: { parentId?: ParentIdType; type?: DatasetTypeEnum }) =>
GET<DatasetListItemType[]>(`/core/dataset/list`, data); POST<DatasetListItemType[]>(`/core/dataset/list`, data);
/** /**
* get type=dataset list * get type=dataset list