feat: 数据集合管理

src/pages/data/list.tsx

@@ -11,14 +11,17 @@ import {
   Th,
   Td,
   TableContainer,
-  useDisclosure
+  useDisclosure,
+  Input
 } from '@chakra-ui/react';
-import { getDataList } from '@/api/data';
+import { getDataList, updateDataName, delData } from '@/api/data';
 import { usePaging } from '@/hooks/usePaging';
 import type { DataListItem } from '@/types/data';
 import ScrollData from '@/components/ScrollData';
 import dayjs from 'dayjs';
 import dynamic from 'next/dynamic';
+import { useConfirm } from '@/hooks/useConfirm';
+import { useRequest } from '@/hooks/useRequest';
 
 const CreateDataModal = dynamic(() => import('./components/CreateDataModal'));
 const ImportDataModal = dynamic(() => import('./components/ImportDataModal'));
@@ -34,6 +37,9 @@ const DataList = () => {
     pageSize: 20
   });
   const [ImportDataId, setImportDataId] = useState<string>();
+  const { openConfirm, ConfirmChild } = useConfirm({
+    content: '删除数据集，将删除里面的所有内容，请确认！'
+  });
 
   const {
     isOpen: isOpenCreateDataModal,
@@ -41,6 +47,15 @@ const DataList = () => {
     onClose: onCloseCreateDataModal
   } = useDisclosure();
 
+  const { mutate: handleDelData, isLoading: isDeleting } = useRequest({
+    mutationFn: (dataId: string) => delData(dataId),
+    successToast: '删除数据集成功',
+    errorToast: '删除数据集异常',
+    onSuccess() {
+      getData(1, true);
+    }
+  });
+
   return (
     <Box display={['block', 'flex']} flexDirection={'column'} h={'100%'}>
       <Card px={6} py={4}>
@@ -74,12 +89,31 @@ const DataList = () => {
               <Tbody>
                 {dataList.map((item, i) => (
                   <Tr key={item._id}>
-                    <Td>{item.name}</Td>
+                    <Td>
+                      <Input
+                        placeholder="请输入数据集名称"
+                        defaultValue={item.name}
+                        size={'sm'}
+                        onBlur={(e) => {
+                          if (!e.target.value) return;
+                          updateDataName(item._id, e.target.value);
+                        }}
+                      />
+                    </Td>
                     <Td>{dayjs(item.createTime).format('YYYY/MM/DD HH:mm')}</Td>
                     <Td>
                       {item.trainingData} / {item.totalData}
                     </Td>
                     <Td>
+                      <Button
+                        size={'sm'}
+                        variant={'outline'}
+                        colorScheme={'gray'}
+                        mr={2}
+                        onClick={() => setImportDataId(item._id)}
+                      >
+                        详细
+                      </Button>
                       <Button
                         size={'sm'}
                         variant={'outline'}
@@ -88,7 +122,17 @@ const DataList = () => {
                       >
                         导入
                       </Button>
-                      <Button size={'sm'}>导出</Button>
+                      <Button mr={2} size={'sm'}>
+                        导出
+                      </Button>
+                      <Button
+                        size={'sm'}
+                        colorScheme={'red'}
+                        isLoading={isDeleting}
+                        onClick={openConfirm(() => handleDelData(item._id))}
+                      >
+                        删除
+                      </Button>
                     </Td>
                   </Tr>
                 ))}
@@ -104,6 +148,7 @@ const DataList = () => {
       {isOpenCreateDataModal && (
         <CreateDataModal onClose={onCloseCreateDataModal} onSuccess={() => getData(1, true)} />
       )}
+      <ConfirmChild />
     </Box>
   );
 };