feature: 清洗任务详情页 (#73)

* feature: 清洗任务详情 * fix: 取消构建镜像，改为直接拉取 * fix: 增加清洗任务详情页 * fix: 增加清洗任务详情页 * fix: 算子列表可点击 * fix: 模板详情和更新
2025-11-12 18:00:19 +08:00
parent 442e561817
commit 6bbde0ec56
46 changed files with 1065 additions and 795 deletions
--- a/frontend/src/pages/DataCleansing/Create/CreateTemplate.tsx
+++ b/frontend/src/pages/DataCleansing/Create/CreateTemplate.tsx
@@ -0,0 +1,140 @@
+import {useEffect, useState} from "react";
+import {Button, Steps, Form, message} from "antd";
+import {Link, useNavigate, useParams} from "react-router";
+
+import { ArrowLeft } from "lucide-react";
+import {
+  createCleaningTemplateUsingPost,
+  queryCleaningTemplateByIdUsingGet,
+  updateCleaningTemplateByIdUsingPut
+} from "../cleansing.api";
+import CleansingTemplateStepOne from "./components/CreateTemplateStepOne";
+import { useCreateStepTwo } from "./hooks/useCreateStepTwo";
+
+export default function CleansingTemplateCreate() {
+  const { id = "" } = useParams()
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+  const [templateConfig, setTemplateConfig] = useState({
+    name: "",
+    description: "",
+  });
+
+  const fetchTemplateDetail = async () => {
+    if (!id) return;
+    try {
+      const { data } = await queryCleaningTemplateByIdUsingGet(id);
+      setTemplateConfig(data);
+    } catch (error) {
+      message.error("获取任务详情失败");
+      navigate("/data/cleansing");
+    }
+  };
+
+  useEffect(() => {
+    fetchTemplateDetail()
+  }, [id]);
+
+  const handleSave = async () => {
+    const template = {
+      ...templateConfig,
+      instance: selectedOperators.map((item) => ({
+        id: item.id,
+        overrides: {
+          ...item.defaultParams,
+          ...item.overrides,
+        },
+      })),
+    };
+
+    !id && await createCleaningTemplateUsingPost(template) && message.success("模板创建成功");
+    id && await updateCleaningTemplateByIdUsingPut(id, template) && message.success("模板更新成功");
+    navigate("/data/cleansing?view=template");
+  };
+
+  const {
+    renderStepTwo,
+    selectedOperators,
+    currentStep,
+    handlePrev,
+    handleNext,
+  } = useCreateStepTwo();
+
+  const canProceed = () => {
+    const values = form.getFieldsValue();
+
+    switch (currentStep) {
+      case 1:
+        return values.name;
+      case 2:
+        return selectedOperators.length > 0;
+      default:
+        return false;
+    }
+  };
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 1:
+        return (
+          <CleansingTemplateStepOne
+            form={form}
+            templateConfig={templateConfig}
+            setTemplateConfig={setTemplateConfig}
+          />
+        );
+      case 2:
+        return renderStepTwo;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center">
+          <Link to="/data/cleansing">
+            <Button type="text">
+              <ArrowLeft className="w-4 h-4 mr-1" />
+            </Button>
+          </Link>
+          <h1 className="text-xl font-bold">{id ? '更新清洗模板' : '创建清洗模板'}</h1>
+        </div>
+        <div className="w-1/2">
+          <Steps
+            size="small"
+            current={currentStep}
+            items={[{ title: "基本信息" }, { title: "算子编排" }]}
+          />
+        </div>
+      </div>
+
+      <div className="flex-overflow-auto border-card">
+        <div className="flex-1 overflow-auto m-6">{renderStepContent()}</div>
+        <div className="flex justify-end p-6 gap-3 border-top">
+          <Button onClick={() => navigate("/data/cleansing")}>取消</Button>
+          {currentStep > 1 && <Button onClick={handlePrev}>上一步</Button>}
+          {currentStep === 2 ? (
+            <Button
+              type="primary"
+              onClick={handleSave}
+              disabled={!canProceed()}
+            >
+              {id ? '更新模板' : '创建模板'}
+            </Button>
+          ) : (
+            <Button
+              type="primary"
+              onClick={handleNext}
+              disabled={!canProceed()}
+            >
+              下一步
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}