frontend: 数据集上传使用切片

Author: chenghh-9609

frontend/src/components/CardView.tsx

@@ -170,7 +170,7 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
 
   return (
     <div className="flex-1 flex flex-col overflow-auto">
-      <div className="flex-1 overflow-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
+      <div className="overflow-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
         {data.map((item) => (
           <div
             key={item.id}

frontend/src/pages/DataCleansing/Home/components/TaskList.tsx

@@ -70,8 +70,11 @@ export default function TaskList() {
 
   const taskOperations = (record) => {
     const isRunning = record.status?.value === TaskStatus.RUNNING;
-    const isPending = record.status?.value === TaskStatus.PENDING;
-
+    const showStart = [
+      TaskStatus.PENDING,
+      TaskStatus.FAILED,
+      TaskStatus.STOPPED,
+    ].includes(record.status?.value);
     const pauseBtn = {
       key: "pause",
       label: "暂停",
@@ -87,7 +90,7 @@ export default function TaskList() {
     };
     return [
       isRunning && pauseBtn,
-      isPending && startBtn,
+      showStart && startBtn,
       {
         key: "delete",
         label: "删除",

frontend/src/pages/DataManagement/Create/CreateDataset.tsx

@@ -156,7 +156,7 @@ export default function DatasetCreate() {
           message.error("请上传文件");
           return;
         }
-        handleUpload(message, dataset);
+        handleUpload(dataset);
       }
       if (importConfig.source === DataSource.NAS) {
         message.error("请填写NAS地址和共享路径");

frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx

@@ -81,6 +81,18 @@ export default function DatasetDetail() {
     message.success("文件下载成功");
   };
 
+  useEffect(() => {
+    const refreshDataset = () => {
+      fetchDataset();
+    }
+    window.addEventListener("update:dataset", handleRefresh);
+    window.addEventListener("update:dataset-status", refreshDataset);
+    return () => {
+      window.removeEventListener("update:dataset", handleRefresh);
+      window.removeEventListener("update:dataset-status", refreshDataset);
+    };
+  }, []);
+
   // 基本信息描述项
   const statistics = [
     {
@@ -189,7 +201,7 @@ export default function DatasetDetail() {
         open={showUploadDialog}
         onCancel={() => setShowUploadDialog(false)}
         onOk={async () => {
-          await handleUpload(message, dataset);
+          await handleUpload(dataset);
           setShowUploadDialog(false);
           filesOperation.fetchFiles();
         }}

frontend/src/pages/DataManagement/dataset.api.ts

@@ -172,9 +172,10 @@ export function deleteDatasetVersionUsingDelete(
  */
 
 export function preUploadUsingPost(id: string | number, data: any) {
-  console.log('pre upload');
-  
-  return post(`/api/data-management/datasets/${id}/upload/pre-upload`, data);
+  return post(
+    `/api/data-management/datasets/${id}/files/upload/pre-upload`,
+    data
+  );
 }
 
 export function cancelUploadUsingPut(id) {
@@ -186,13 +187,12 @@ export function cancelUploadUsingPut(id) {
 }
 
 export function uploadFileChunkUsingPost(id: string | number, params, config) {
-  return upload(`/api/data-management/datasets/${id}/files/upload/chunk`, params, {
-    headers: {
-      accept: "*/*",
-      "Content-Type": "multipart/form-data;charset=UTF-8",
-    },
-    showLoading: false,
-    isUploading: true,
-    ...config,
-  });
+  return post(
+    `/api/data-management/datasets/${id}/files/upload/chunk`,
+    params,
+    {
+      showLoading: false,
+      ...config,
+    }
+  );
 }

frontend/src/pages/DataManagement/hooks/useImportFile.tsx

@@ -1,52 +1,63 @@
 import { Upload, type UploadFile } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import type { Dataset } from "@/pages/DataManagement/dataset.model";
-import { uploadDatasetFileUsingPost } from "../dataset.api";
+import { sliceFile } from "@/utils/file.util";
 
 const { Dragger } = Upload;
 
 export const useImportFile = () => {
   const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const fileSliceList = useMemo(() => {
+    const sliceList = fileList.map((file) => {
+      const slices = sliceFile(file);
+      return { originFile: file, slices, name: file.name, size: file.size };
+    });
+    return sliceList;
+  }, [fileList]);
 
   const resetFiles = () => {
     setFileList([]);
   };
 
-  const handleUpload = async (message: any, dataset: Dataset) => {
+  const handleUpload = async (dataset: Dataset) => {
     const formData = new FormData();
     fileList.forEach((file) => {
-      console.log(file);
       formData.append("file", file);
     });
-    await uploadDatasetFileUsingPost(dataset?.id, formData);
+    window.dispatchEvent(
+      new CustomEvent("upload:dataset", {
+        detail: { dataset, files: fileSliceList },
+      })
+    );
     resetFiles();
-    message.success("文件上传成功");
+  };
+
+  const handleBeforeUpload = (file: UploadFile) => {
+    setFileList([...fileList, file]);
+    return false;
+  };
+
+  const handleRemoveFile = (file: UploadFile) => {
+    const index = fileList.indexOf(file);
+    const newFileList = fileList.slice();
+    newFileList.splice(index, 1);
+    setFileList(newFileList);
   };
 
   const importFileRender = () => (
     <Dragger
       className="w-full"
       fileList={fileList}
-      onRemove={(file) => {
-        const index = fileList.indexOf(file);
-        const newFileList = fileList.slice();
-        newFileList.splice(index, 1);
-        setFileList(newFileList);
-      }}
-      beforeUpload={(file) => {
-        setFileList([...fileList, file]);
-
-        return false;
-      }}
+      onRemove={handleRemoveFile}
+      beforeUpload={handleBeforeUpload}
+      multiple
     >
       <p className="ant-upload-drag-icon">
         <InboxOutlined />
       </p>
       <p className="ant-upload-text">本地文件上传</p>
-      <p className="ant-upload-hint">
-        拖拽文件到此处或点击选择文件,支持 JPG, PNG, TXT, JSON 等格式
-      </p>
+      <p className="ant-upload-hint">拖拽文件到此处或点击选择文件</p>
     </Dragger>
   );
 

frontend/src/pages/Layout/Sidebar.tsx

@@ -39,16 +39,24 @@ const AsiderAndHeaderLayout = () => {
     initActiveItem();
   }, [pathname]);
 
-  const toggleShowTaskPopover = (show: boolean = true) => {
-    const taskEl = document.getElementById("header-task-popover");
-    if (show && !taskEl?.classList.contains("show-task-popover")) {
-      taskEl?.classList?.add("show-task-popover");
-      return;
-    }
-    if (!show && taskEl?.classList.contains("show-task-popover")) {
-      taskEl?.classList?.remove("show-task-popover");
-    }
-  };
+  useEffect(() => {
+    const handleShowTaskPopover = (event: CustomEvent) => {
+      const { show } = event.detail;
+      setTaskCenterVisible(show);
+    };
+
+    window.addEventListener(
+      "show:task-popover",
+      handleShowTaskPopover as EventListener
+    );
+
+    return () => {
+      window.removeEventListener(
+        "show:task-popover",
+        handleShowTaskPopover as EventListener
+      );
+    };
+  }, []);
 
   return (
     <div
@@ -99,6 +107,7 @@ const AsiderAndHeaderLayout = () => {
         {sidebarOpen ? (
           <div className="space-y-2">
             <Popover
+              forceRender
               title={
                 <div className="flex items-center justify-between gap-2 border-b border-gray-200 pb-2 mb-2">
                   <h4 className="font-bold">任务中心</h4>
@@ -111,6 +120,7 @@ const AsiderAndHeaderLayout = () => {
               open={taskCenterVisible}
               content={<TaskUpload />}
               trigger="click"
+              destroyOnHidden={false}
             >
               <Button block onClick={() => setTaskCenterVisible(true)}>
                 任务中心
@@ -124,10 +134,12 @@ const AsiderAndHeaderLayout = () => {
           <div className="space-y-2">
             <div className="relative">
               <Popover
+                forceRender
                 title="任务中心"
                 open={taskCenterVisible}
                 content={<TaskUpload />}
                 trigger="click"
+                destroyOnHidden={false}
               >
                 <Button
                   block