Merge remote-tracking branch 'origin/develop_930' into develop_930

Author: hhhhsc701

frontend/src/components/CardView.tsx

@@ -32,12 +32,14 @@ interface CardViewProps<T> {
     pageSize: number;
     total: number;
   };
-  operations: {
-    key: string;
-    label: string;
-    icon?: React.JSX.Element;
-    onClick?: (item: T) => void;
-  }[];
+  operations:
+    | {
+        key: string;
+        label: string;
+        icon?: React.JSX.Element;
+        onClick?: (item: T) => void;
+      }[]
+    | ((item: T) => ItemType[]);
   onView: (item: T) => void;
   onFavorite?: (item: T) => void;
   isFavorite?: (item: T) => boolean;
@@ -55,6 +57,9 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
     );
   }
 
+  const ops = (item) =>
+    typeof operations === "function" ? operations(item) : operations;
+
   return (
     <div className="flex-1 overflow-auto">
       <div className="grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
@@ -133,9 +138,9 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
                 <Dropdown
                   trigger={["click"]}
                   menu={{
-                    items: operations as ItemType[],
+                    items: ops(item),
                     onClick: ({ key }) => {
-                      const operation = operations.find((op) => op.key === key);
+                      const operation = ops(item).find((op) => op.key === key);
                       if (operation?.onClick) {
                         operation.onClick(item);
                       }

frontend/src/mock/mock-apis.cjs

@@ -32,20 +32,20 @@ const MockAPI = {
   // 数据清洗接口
   queryCleaningRulesUsingGet: "/v1/cleaning/rules", // 获取清洗规则列表
   createCleaningRuleUsingPost: "/v1/cleaning/rules", //创建清洗规则
-  queryCleaningRuleByIdUsingGet: "/v1/cleaning/rules/{ruleId}", // 根据ID获取清洗规则详情
-  updateCleaningRuleByIdUsingPut: "/v1/cleaning/rules/{ruleId}", // 更新清洗规则
-  deleteCleaningRuleByIdUsingDelete: "/v1/cleaning/rules/{ruleId}", // 删除清洗规则
+  queryCleaningRuleByIdUsingGet: "/v1/cleaning/rules/:ruleId", // 根据ID获取清洗规则详情
+  updateCleaningRuleByIdUsingPut: "/v1/cleaning/rules/:ruleId", // 更新清洗规则
+  deleteCleaningRuleByIdUsingDelete: "/v1/cleaning/rules/:ruleId", // 删除清洗规则
   queryCleaningJobsUsingPost: "/v1/cleaning/jobs", // 获取清洗任务列表
   createCleaningJobUsingPost: "/v1/cleaning/jobs/create", // 创建清洗任务
-  queryCleaningJobByIdUsingGet: "/v1/cleaning/jobs/{jobId}", // 根据ID获取清洗任务详情
-  deleteCleaningJobByIdUsingDelete: "/v1/cleaning/jobs/{jobId}", // 删除清洗任务
-  executeCleaningJobUsingPost: "/v1/cleaning/jobs/{jobId}/execute", // 执行清洗任务
-  stopCleaningJobUsingPost: "/v1/cleaning/jobs/{jobId}/stop", // 停止清洗任务
+  queryCleaningJobByIdUsingGet: "/v1/cleaning/jobs/:jobId", // 根据ID获取清洗任务详情
+  deleteCleaningJobByIdUsingDelete: "/v1/cleaning/jobs/:jobId", // 删除清洗任务
+  executeCleaningJobUsingPost: "/v1/cleaning/jobs/:jobId/execute", // 执行清洗任务
+  stopCleaningJobUsingPost: "/v1/cleaning/jobs/:jobId/stop", // 停止清洗任务
   queryCleaningTemplatesUsingPost: "/v1/cleaning/templates", // 获取清洗模板列表
   createCleaningTemplateUsingPost: "/v1/cleaning/templates/create", // 创建清洗模板
-  queryCleaningTemplateByIdUsingGet: "/v1/cleaning/templates/{templateId}", // 根据ID获取清洗模板详情
+  queryCleaningTemplateByIdUsingGet: "/v1/cleaning/templates/:templateId", // 根据ID获取清洗模板详情
   deleteCleaningTemplateByIdUsingDelete:
-    "/v1/cleaning/templates/{templateId}", // 删除清洗模板
+    "/v1/cleaning/templates/:templateId", // 删除清洗模板
 };
 
 module.exports = addMockPrefix("/api", MockAPI);

…d/src/pages/DataCleansing/CreateTask.tsx …ages/DataCleansing/Create/CreateTask.tsxfrontend/src/pages/DataCleansing/CreateTask.tsx renamed to frontend/src/pages/DataCleansing/Create/CreateTask.tsx frontend/src/pages/DataCleansing/CreateTask.tsx renamed to frontend/src/pages/DataCleansing/Create/CreateTask.tsx

@@ -12,7 +12,7 @@ import { templateTypes, OPERATOR_CATEGORIES } from "@/mock/cleansing";
 import {
   createCleaningTemplateUsingPost,
   queryCleaningTemplatesUsingPost,
-} from "./cleansing-apis";
+} from "../cleansing-apis";
 
 const { TextArea } = Input;
 

…rc/pages/DataCleansing/CreateTempate.tsx …s/DataCleansing/Create/CreateTempate.tsxfrontend/src/pages/DataCleansing/CreateTempate.tsx renamed to frontend/src/pages/DataCleansing/Create/CreateTempate.tsx frontend/src/pages/DataCleansing/CreateTempate.tsx renamed to frontend/src/pages/DataCleansing/Create/CreateTempate.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useState } from "react";
+import { Card, Breadcrumb, App } from "antd";
+import {
+  Play,
+  Pause,
+  Clock,
+  CheckCircle,
+  AlertCircle,
+  Database,
+  Trash2,
+  Download,
+  Activity,
+} from "lucide-react";
+import DetailHeader from "@/components/DetailHeader";
+import { Link, useNavigate, useParams } from "react-router";
+import { deleteCleaningJobByIdUsingDelete, executeCleaningJobUsingPost, queryCleaningJobByIdUsingGet, stopCleaningJobUsingPost } from "../cleansing-apis";
+import { TaskStatusMap } from "../cleansing-model";
+import { JobStatus } from "@/types/cleansing";
+import BasicInfo from "./components/BasicInfo";
+import OperatorTable from "./components/OperatorTable";
+import FileTable from "./components/FileTable";
+import LogsTable from "./components/LogsTable";
+
+// 任务详情页面组件
+export default function CleansingTaskDetail() {
+  const { id } = useParams(); // 获取动态路由参数
+  const { message } = App.useApp();
+  const navigate = useNavigate();
+
+  const fetchTaskDetail = async () => {
+    if (!id) return;
+    try {
+      const { data } = await queryCleaningJobByIdUsingGet(id);
+      setTask(data);
+    } catch (error) {
+      message.error("获取任务详情失败");
+      navigate("/data/cleansing");
+    }
+  };
+
+  const pauseTask = async () => {
+    await stopCleaningJobUsingPost(id);
+    message.success("任务已暂停");
+    fetchTaskDetail();
+  };
+
+  const startTask = async () => {
+    await executeCleaningJobUsingPost(id);
+    message.success("任务已启动");
+    fetchTaskDetail();
+  };
+
+  const deleteTask = async () => {
+    await deleteCleaningJobByIdUsingDelete(id);
+    message.success("任务已删除");
+    navigate("/data/cleansing");
+  };
+
+  useEffect(() => {
+    fetchTaskDetail();
+  }, [id]);
+
+  const [task, setTask] = useState(null);
+  const [activeTab, setActiveTab] = useState("basic");
+
+  const headerData = {
+    ...task,
+    icon: <Database className="w-8 h-8" />,
+    status: TaskStatusMap[task?.status],
+    createdAt: task?.startTime,
+    lastUpdated: task?.updatedAt,
+  };
+
+  const statistics = [
+    {
+      icon: <Clock className="w-4 h-4 text-blue-500" />,
+      label: "总耗时",
+      value: task?.duration || "--",
+    },
+    {
+      icon: <CheckCircle className="w-4 h-4 text-green-500" />,
+      label: "成功文件",
+      value: task?.successFiles || "--",
+    },
+    {
+      icon: <AlertCircle className="w-4 h-4 text-red-500" />,
+      label: "失败文件",
+      value: task?.failedFiles || "--",
+    },
+    {
+      icon: <Activity className="w-4 h-4 text-purple-500" />,
+      label: "成功率",
+      value: `${task?.progress}%`,
+    },
+  ];
+
+  const operations = [
+    ...(task?.status === JobStatus.RUNNING
+      ? [
+          {
+            key: "pause",
+            label: "暂停任务",
+            icon: <Pause className="w-4 h-4" />,
+            onClick: pauseTask,
+          },
+        ]
+      : []),
+    ...(task?.status === JobStatus.PENDING
+      ? [
+          {
+            key: "start",
+            label: "执行任务",
+            icon: <Play className="w-4 h-4" />,
+            onClick: startTask,
+          },
+        ]
+      : []),
+    {
+      key: "delete",
+      label: "删除任务",
+      icon: <Trash2 className="w-4 h-4" />,
+      danger: true,
+      onClick: deleteTask,
+    },
+  ];
+
+  const tabList = [
+    {
+      key: "basic",
+      tab: "基本信息",
+      children: <BasicInfo task={task} />,
+    },
+    {
+      key: "operators",
+      tab: "处理算子",
+      children: <OperatorTable task={task} />,
+    },
+    {
+      key: "files",
+      tab: "处理文件",
+      children: <FileTable task={task} />,
+    },
+    { key: "logs", tab: "运行日志", children: <LogsTable task={task} /> },
+  ];
+
+  const breadItems = [
+    {
+      title: <Link to="/data/cleansing">数据清洗</Link>,
+    },
+    {
+      title: "清洗任务详情",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen">
+      <Breadcrumb items={breadItems} />
+      <div className="mb-4 mt-4">
+        <DetailHeader
+          data={headerData}
+          statistics={statistics}
+          operations={operations}
+        />
+      </div>
+      <Card
+        tabList={tabList}
+        activeTabKey={activeTab}
+        onTabChange={setActiveTab}
+      ></Card>
+    </div>
+  );
+}