frontend: 优化清洗算子编排代码结构

Author: chenghh-9609

frontend/src/pages/DataCleansing/Create/CreateTask.tsx

@@ -3,13 +3,9 @@ import { Card, Steps, Button, message } from "antd";
 import { SaveOutlined } from "@ant-design/icons";
 import { Link, useNavigate } from "react-router";
 import { ArrowLeft } from "lucide-react";
-import OperatorLibrary from "./components/OperatorLibrary";
-import OperatorOrchestration from "./components/OperatorOrchestration";
-import OperatorConfig from "./components/OperatorConfig";
-import { useDragOperators } from "./hooks/useDragOperators";
-import { useOperatorOperations } from "./hooks/useOperatorOperations";
 import { createCleaningTaskUsingPost } from "../cleansing.api";
-import CleansingTaskStepOne from "./components/StepOne";
+import CleansingTaskStepOne from "./components/CreateTaskStepOne";
+import { useCreateStepTwo } from "./hooks/useCreateStepTwo";
 
 export default function CleansingTaskCreate() {
   const navigate = useNavigate();
@@ -26,35 +22,12 @@ export default function CleansingTaskCreate() {
   });
 
   const {
-    operators,
+    renderStepTwo,
     selectedOperators,
     currentStep,
-    templates,
-    currentTemplate,
-    configOperator,
-    setCurrentTemplate,
-    setConfigOperator,
-    setSelectedOperators,
-    handleConfigChange,
-    toggleOperator,
-    removeOperator,
-    handleNext,
     handlePrev,
-  } = useOperatorOperations();
-
-  const {
-    handleDragStart,
-    handleDragEnd,
-    handleContainerDragOver,
-    handleContainerDragLeave,
-    handleItemDragOver,
-    handleItemDragLeave,
-    handleItemDrop,
-    handleDropToContainer,
-  } = useDragOperators({
-    operators: selectedOperators,
-    setOperators: setSelectedOperators,
-  });
+    handleNext,
+  } = useCreateStepTwo();
 
   const handleSave = async () => {
     const task = {
@@ -75,7 +48,7 @@ export default function CleansingTaskCreate() {
           taskConfig.name && taskConfig.datasetId && taskConfig.newDatasetName
         );
       case 2:
-        return operators.length > 0;
+        return selectedOperators.length > 0;
       default:
         return false;
     }
@@ -91,43 +64,7 @@ export default function CleansingTaskCreate() {
           />
         );
       case 2:
-        return (
-          <div className="flex w-full h-full">
-            {/* 左侧算子库 */}
-            <OperatorLibrary
-              selectedOperators={selectedOperators}
-              operatorList={operators}
-              toggleOperator={toggleOperator}
-              handleDragStart={handleDragStart}
-            />
-
-            {/* 中间算子编排区域 */}
-            <OperatorOrchestration
-              selectedOperators={selectedOperators}
-              configOperator={configOperator}
-              templates={templates}
-              currentTemplate={currentTemplate}
-              setSelectedOperators={setSelectedOperators}
-              setConfigOperator={setConfigOperator}
-              setCurrentTemplate={setCurrentTemplate}
-              removeOperator={removeOperator}
-              handleDragStart={handleDragStart}
-              handleContainerDragLeave={handleContainerDragLeave}
-              handleContainerDragOver={handleContainerDragOver}
-              handleItemDragOver={handleItemDragOver}
-              handleItemDragLeave={handleItemDragLeave}
-              handleItemDrop={handleItemDrop}
-              handleDropToContainer={handleDropToContainer}
-              handleDragEnd={handleDragEnd}
-            />
-
-            {/* 右侧参数配置面板 */}
-            <OperatorConfig
-              selectedOp={configOperator}
-              handleConfigChange={handleConfigChange}
-            />
-          </div>
-        );
+        return renderStepTwo;
       default:
         return null;
     }

frontend/src/pages/DataCleansing/Create/CreateTempate.tsx

@@ -1,18 +1,11 @@
 import { useState } from "react";
-import { Card, Button, Input, Steps, Form, Divider } from "antd";
+import { Card, Button, Steps, Form, Divider } from "antd";
 import { Link, useNavigate } from "react-router";
-import RadioCard from "@/components/RadioCard";
 
 import { ArrowLeft } from "lucide-react";
-import OperatorLibrary from "./components/OperatorLibrary";
-import OperatorOrchestration from "./components/OperatorOrchestration";
-import OperatorConfig from "./components/OperatorConfig";
-import { templateTypes, OPERATOR_CATEGORIES } from "@/mock/cleansing";
 import { createCleaningTemplateUsingPost } from "../cleansing.api";
-import { useDragOperators } from "./hooks/useDragOperators";
-import { useOperatorOperations } from "./hooks/useOperatorOperations";
-
-const { TextArea } = Input;
+import CleansingTemplateStepOne from "./components/CreateTemplateStepOne";
+import { useCreateStepTwo } from "./hooks/useCreateStepTwo";
 
 export default function CleansingTemplateCreate() {
   const navigate = useNavigate();
@@ -28,7 +21,7 @@ export default function CleansingTemplateCreate() {
     const template = {
       ...values,
       ...templateConfig,
-      operators,
+      operators: selectedOperators,
       createdAt: new Date().toISOString(),
     };
     console.log("保存模板数据:", template);
@@ -41,117 +34,38 @@ export default function CleansingTemplateCreate() {
   };
 
   const {
-    templates,
-    operators,
-    currentTemplate,
+    renderStepTwo,
+    selectedOperators,
     currentStep,
-    setCurrentTemplate,
-    setOperators,
-    selectedOperator,
-    setSelectedOperator,
-    toggleOperator,
-    removeOperator,
-    handleNext,
     handlePrev,
-  } = useOperatorOperations();
+    handleNext,
+  } = useCreateStepTwo();
 
   const canProceed = () => {
     const values = form.getFieldsValue();
     switch (currentStep) {
       case 1:
         return values.name && values.type;
       case 2:
-        return operators.length > 0;
+        return selectedOperators.length > 0;
       default:
         return false;
     }
   };
 
-  const {
-    handleDragStart,
-    handleDragEnd,
-    handleContainerDragOver,
-    handleContainerDragLeave,
-    handleItemDragOver,
-    handleItemDragLeave,
-    handleItemDrop,
-    handleDropToContainer,
-  } = useDragOperators({ operators, setOperators });
-
   const renderStepContent = () => {
     switch (currentStep) {
       case 1:
         return (
-          <Form
+          <CleansingTemplateStepOne
             form={form}
-            layout="vertical"
-            initialValues={templateConfig}
-            onValuesChange={handleValuesChange}
-          >
-            <Form.Item
-              label="模板名称"
-              name="name"
-              rules={[{ required: true, message: "请输入模板名称" }]}
-            >
-              <Input placeholder="输入模板名称" />
-            </Form.Item>
-            <Form.Item label="模板描述" name="description">
-              <TextArea placeholder="描述模板的用途和特点" rows={4} />
-            </Form.Item>
-            <Form.Item
-              label="模板类型"
-              name="type"
-              rules={[{ required: true, message: "请选择模板类型" }]}
-            >
-              <RadioCard
-                options={templateTypes}
-                value={templateConfig.type}
-                onChange={(type) =>
-                  setTemplateConfig({ ...templateConfig, type })
-                }
-              />
-            </Form.Item>
-          </Form>
+            handleValuesChange={handleValuesChange}
+            templateConfig={templateConfig}
+            setTemplateConfig={setTemplateConfig}
+          />
         );
       case 2:
-        return (
-          <div className="flex w-full h-full">
-            {/* 左侧算子库 */}
-            <OperatorLibrary
-              operators={operators}
-              operatorList={currentTemplate?.instance || []}
-              OPERATOR_CATEGORIES={OPERATOR_CATEGORIES}
-              toggleOperator={toggleOperator}
-              handleDragStart={handleDragStart}
-            />
-
-            {/* 中间算子编排区域 */}
-            <OperatorOrchestration
-              templates={templates}
-              currentTemplate={currentTemplate}
-              setCurrentTemplate={setCurrentTemplate}
-              operators={operators}
-              setOperators={setOperators}
-              OPERATOR_CATEGORIES={OPERATOR_CATEGORIES}
-              selectedOperator={selectedOperator}
-              setSelectedOperator={setSelectedOperator}
-              removeOperator={removeOperator}
-              handleDragStart={handleDragStart}
-              handleContainerDragLeave={handleContainerDragLeave}
-              handleContainerDragOver={handleContainerDragOver}
-              handleItemDragOver={handleItemDragOver}
-              handleItemDragLeave={handleItemDragLeave}
-              handleItemDrop={handleItemDrop}
-              handleDropToContainer={handleDropToContainer}
-              handleDragEnd={handleDragEnd}
-            />
-
-            {/* 右侧参数配置面板 */}
-            <OperatorConfig
-              selectedOp={operators.find((op) => op.id === selectedOperator)}
-            />
-          </div>
-        );
+        return renderStepTwo;
       default:
         return null;
     }

…aCleansing/Create/components/StepOne.tsx …/Create/components/CreateTaskStepOne.tsxfrontend/src/pages/DataCleansing/Create/components/StepOne.tsx renamed to frontend/src/pages/DataCleansing/Create/components/CreateTaskStepOne.tsx frontend/src/pages/DataCleansing/Create/components/StepOne.tsx renamed to frontend/src/pages/DataCleansing/Create/components/CreateTaskStepOne.tsx

@@ -5,7 +5,7 @@ import TextArea from "antd/es/input/TextArea";
 import { Database } from "lucide-react";
 import { useEffect, useState } from "react";
 
-export default function CleansingTaskStepOne({ taskConfig, setTaskConfig }) {
+export default function CreateTaskStepOne({ taskConfig, setTaskConfig }) {
   const [datasets, setDatasets] = useState<any[]>([]);
   const fetchDatasets = async () => {
     const { data } = await queryDatasetsUsingGet({ page: 0, size: 1000 });

frontend/src/pages/DataCleansing/Create/components/CreateTemplateStepOne.tsx

@@ -0,0 +1,43 @@
+import RadioCard from "@/components/RadioCard";
+import { templateTypes } from "@/mock/cleansing";
+import { Input, Form } from "antd";
+
+const { TextArea } = Input;
+
+export default function CreateTemplateStepOne({
+  form,
+  templateConfig,
+  setTemplateConfig,
+  handleValuesChange,
+}) {
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      initialValues={templateConfig}
+      onValuesChange={handleValuesChange}
+    >
+      <Form.Item
+        label="模板名称"
+        name="name"
+        rules={[{ required: true, message: "请输入模板名称" }]}
+      >
+        <Input placeholder="输入模板名称" />
+      </Form.Item>
+      <Form.Item label="模板描述" name="description">
+        <TextArea placeholder="描述模板的用途和特点" rows={4} />
+      </Form.Item>
+      <Form.Item
+        label="模板类型"
+        name="type"
+        rules={[{ required: true, message: "请选择模板类型" }]}
+      >
+        <RadioCard
+          options={templateTypes}
+          value={templateConfig.type}
+          onChange={(type) => setTemplateConfig({ ...templateConfig, type })}
+        />
+      </Form.Item>
+    </Form>
+  );
+}

frontend/src/pages/DataCleansing/Create/components/FileComparison.tsx

@@ -2,12 +2,13 @@ import React from "react";
 import { Tag, Divider, Form } from "antd";
 import { SettingOutlined } from "@ant-design/icons";
 import ParamConfig from "./ParamConfig";
+import { OperatorI } from "../../cleansing.model";
 
 // OperatorConfig/OperatorTemplate 类型需根据主文件实际导入
 interface OperatorConfigProps {
-  selectedOp: any; // OperatorConfig
+  selectedOp: OperatorI;
   renderParamConfig?: (
-    operator: any,
+    operator: OperatorI,
     paramKey: string,
     param: any
   ) => React.ReactNode;

frontend/src/pages/DataCleansing/Create/components/OperatorConfig.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { Input, Select, Radio, Checkbox, Form, InputNumber, Slider } from "antd";
+import { OperatorI } from "../../cleansing.model";
 
 interface ParamConfigProps {
-  operator: any;
+  operator: OperatorI;
   paramKey: string;
   param: any;
   onParamChange?: (operatorId: string, paramKey: string, value: any) => void;