frontend: 新增数据集分片上传功能，未启用

Author: chenghh-9609

frontend/package-lock.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@xyflow/react": "^12.8.3",
     "antd": "^5.27.0",
+    "jssha": "^3.3.1",
     "lucide-react": "^0.539.0",
     "react": "^18.1.1",
     "react-dom": "^18.1.1",

frontend/package.json

@@ -31,6 +31,10 @@ const MockAPI = {
   updateTagUsingPost: "/data-management/tags", // 更新数据集标签
   deleteTagUsingPost: "/data-management/tags", // 删除数据集标签
   queryDatasetStatisticsUsingGet: "/data-management/datasets/statistics", // 获取数据集统计信息
+  preUploadFileUsingPost:
+    "/data-management/datasets/:id/upload/pre-upload", // 预上传文件
+  cancelUploadUsingPut: "/data-management/datasets/upload/cancel-upload/:id", // 取消上传
+  uploadFileChunkUsingPost: "/data-management/datasets/:id/upload/chunk", // 上传切片
 
   // 数据清洗接口
   queryCleaningTasksUsingGet: "/cleaning/tasks", // 获取清洗任务列表

frontend/src/mock/mock-apis.cjs

@@ -426,4 +426,19 @@ module.exports = function (router) {
       data: newTag,
     });
   });
+
+  router.post(API.preUploadFileUsingPost, (req, res) => {
+    res.status(201).send(Mock.Random.guid());
+  });
+
+  // 上传
+  router.post(API.uploadFileChunkUsingPost, (req, res) => {
+    res.status(500).send({ message: "Simulated upload failure" });
+    // res.status(201).send({ data: "success" });
+  });
+
+  // 取消上传
+  router.put(API.cancelUploadUsingPut, (req, res) => {
+    res.status(201).send({ data: "success" });
+  });
 };

frontend/src/mock/mock-seed/data-management.cjs

@@ -1,4 +1,4 @@
-import { get, post, put, del, download } from "@/utils/request";
+import { get, post, put, del, download, upload } from "@/utils/request";
 
 // 数据集统计接口
 export function getDatasetStatisticsUsingGet() {
@@ -104,7 +104,7 @@ export function updateDatasetTagByIdUsingPut(id: string | number, data: any) {
 // 删除数据集标签
 export function deleteDatasetTagByIdUsingDelete(tag) {
   console.log(tag);
-  
+
   return del(`/api/data-management/tags/${tag.id}`);
 }
 
@@ -168,3 +168,34 @@ export function deleteDatasetVersionUsingDelete(
 ) {
   return del(`/api/data-management/datasets/${id}/versions/${versionId}`);
 }
+
+/**
+ * 文件上传相关接口
+ */
+
+export function preUploadUsingPost(id: string | number, data: any) {
+  console.log('pre upload');
+  
+  return post(`/api/data-management/datasets/${id}/upload/pre-upload`, data);
+}
+
+export function cancelUploadUsingPut(id) {
+  return put(
+    `/api/data-management/datasets/upload/cancel-upload/${id}`,
+    {},
+    { showLoading: false }
+  );
+}
+
+export function uploadFileChunkUsingPost(id: string | number, params, config) {
+  console.log('upload chunk');
+  return upload(`/api/data-management/datasets/${id}/upload/chunk`, params, {
+    headers: {
+      accept: "*/*",
+      "Content-Type": "multipart/form-data;charset=UTF-8",
+    },
+    showLoading: false,
+    isUploading: true,
+    ...config,
+  });
+}

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

@@ -105,3 +105,13 @@ export interface DatasetTask {
   lastExecution?: string;
   executionHistory?: { time: string; status: string }[];
 }
+
+export interface TaskItem {
+  key: string;
+  title: string;
+  percent: number;
+  reqId: number;
+  isCancel?: boolean;
+  controller: AbortController;
+  cancelFn?: () => void;
+}

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

@@ -3,19 +3,74 @@ import { Button, Menu } from "antd";
 import {
   CloseOutlined,
   MenuOutlined,
-  OrderedListOutlined,
   SettingOutlined,
 } from "@ant-design/icons";
-import { Sparkles, X, Menu as MenuIcon } from "lucide-react";
+import { ClipboardList, Sparkles } from "lucide-react";
 import { antMenuItems, antMenuItems as items } from "@/pages/Layout/menu";
-import TaskPopover from "../../components/TaskPopover";
 import { NavLink, useLocation, useNavigate } from "react-router";
+import TaskUpload from "./TaskUpload";
+
+const TaskUploadPopover = ({ sidebarOpen, toggleShowTaskPopover }) => {
+  const arrowStyle = sidebarOpen ? {} : { top: "calc(100% - 68px)" };
+  const popoverStyle = sidebarOpen
+    ? {
+        bottom: "48px",
+        left: "0px",
+      }
+    : {
+        bottom: "-48px",
+        left: "68px",
+      };
+
+  return (
+    <div
+      id="header-task-popover"
+      className={`absolute left-full w-md transition-all duration-300 ease-in-out z-50 opacity-0 invisible transform -translate-x-4`}
+      style={popoverStyle}
+    >
+      {/* 箭头 - 指向按钮中心 */}
+      {/* <div
+        className="absolute -left-2 w-0 h-0 transform -translate-y-1/2"
+        style={{
+          borderTop: "8px solid transparent",
+          borderBottom: "8px solid transparent",
+          borderRight: "8px solid #e5e7eb",
+          ...arrowStyle,
+        }}
+      />
+      <div
+        className="absolute -left-1.5 top-1/2 w-0 h-0 transform -translate-y-1/2"
+        style={{
+          borderTop: "8px solid transparent",
+          borderBottom: "8px solid transparent",
+          borderRight: "8px solid white",
+          ...arrowStyle,
+        }}
+      /> */}
+      <div className="bg-white rounded-lg shadow-lg border border-gray-200 min-w-80">
+        <div className="flex justify-between items-center p-3 border-b border-gray-100">
+          <span className="text-sm font-medium text-gray-900">任务中心</span>
+          <Button
+            type="text"
+            size="small"
+            icon={<CloseOutlined />}
+            onClick={() => toggleShowTaskPopover(false)}
+          />
+        </div>
+        <div className="p-0 h-[250px] overflow-y-auto">
+          <TaskUpload />
+        </div>
+      </div>
+    </div>
+  );
+};
 
 const AsiderAndHeaderLayout = () => {
   const { pathname } = useLocation();
   const navigate = useNavigate();
   const [activeItem, setActiveItem] = useState<string>("management");
   const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [taskCenterVisible, setTaskCenterVisible] = useState(false);
 
   // Initialize active item based on current pathname
   const initActiveItem = () => {
@@ -39,11 +94,22 @@ 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");
+    }
+  };
+
   return (
     <div
       className={`${
         sidebarOpen ? "w-64" : "w-20"
-      } bg-white border-r border-gray-200 transition-all duration-300 flex flex-col`}
+      } bg-white border-r border-gray-200 transition-all duration-300 flex flex-col relative`}
     >
       {/* Header */}
       <div className="flex items-center justify-between p-4 border-b border-gray-200">
@@ -55,12 +121,11 @@ const AsiderAndHeaderLayout = () => {
             <span className="text-lg font-bold text-gray-900">ModelEngine</span>
           </NavLink>
         )}
-        <span className="cursor-pointer hover:text-blue-500" onClick={() => setSidebarOpen(!sidebarOpen)}>
-          {sidebarOpen ? (
-            <CloseOutlined />
-          ) : (
-            <MenuOutlined className="ml-4" />
-          )}
+        <span
+          className="cursor-pointer hover:text-blue-500"
+          onClick={() => setSidebarOpen(!sidebarOpen)}
+        >
+          {sidebarOpen ? <CloseOutlined /> : <MenuOutlined className="ml-4" />}
         </span>
       </div>
 
@@ -84,22 +149,51 @@ const AsiderAndHeaderLayout = () => {
       <div className="p-4 border-t border-gray-200">
         {sidebarOpen ? (
           <div className="space-y-2">
-            {/* <TaskPopover /> */}
+            <div className="relative">
+              <Button block onClick={() => toggleShowTaskPopover(true)}>
+                任务中心
+              </Button>
+              <TaskUploadPopover
+                sidebarOpen={sidebarOpen}
+                toggleShowTaskPopover={toggleShowTaskPopover}
+              />
+            </div>
             <Button block onClick={() => navigate("/data/settings")}>
               设置
             </Button>
           </div>
         ) : (
           <div className="space-y-2">
-            <Button block>
-              <OrderedListOutlined />
-            </Button>
+            <div className="relative">
+              <Button
+                block
+                onClick={() => toggleShowTaskPopover(true)}
+                icon={<ClipboardList className="w-4 h-4" />}
+              ></Button>
+              <TaskUploadPopover
+                sidebarOpen={sidebarOpen}
+                toggleShowTaskPopover={toggleShowTaskPopover}
+              />
+            </div>
             <Button block onClick={() => navigate("/data/settings")}>
               <SettingOutlined />
             </Button>
           </div>
         )}
       </div>
+
+      {/* 添加遮罩层，点击外部区域时关闭 */}
+      {taskCenterVisible && (
+        <div
+          className="fixed inset-0 z-40"
+          onClick={() => {
+            console.log('clicked outside');
+            
+            setTaskCenterVisible(false);
+            toggleShowTaskPopover(false);
+          }}
+        />
+      )}
     </div>
   );
 };