init datamate

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

@@ -0,0 +1,81 @@
+import React from "react";
+import { Tag, Divider, Form } from "antd";
+import ParamConfig from "./ParamConfig";
+import { Settings } from "lucide-react";
+import { OperatorI } from "@/pages/OperatorMarket/operator.model";
+
+// OperatorConfig/OperatorTemplate 类型需根据主文件实际导入
+interface OperatorConfigProps {
+  selectedOp: OperatorI;
+  renderParamConfig?: (
+    operator: OperatorI,
+    paramKey: string,
+    param: any
+  ) => React.ReactNode;
+  handleConfigChange?: (
+    operatorId: string,
+    paramKey: string,
+    value: any
+  ) => void;
+}
+
+const OperatorConfig: React.FC<OperatorConfigProps> = ({
+  selectedOp,
+  renderParamConfig,
+  handleConfigChange,
+}) => {
+  return (
+    <div className="w-1/4 min-w-3xs flex flex-col h-full">
+      <div className="px-4 pb-4 border-b border-gray-200">
+        <span className="font-semibold text-base flex items-center gap-2">
+          <Settings />
+          参数配置
+        </span>
+      </div>
+      <div className="flex-1 overflow-auto p-4">
+        {selectedOp ? (
+          <div>
+            <div className="mb-4">
+              <div className="flex items-center gap-2 mb-1">
+                <span className="font-medium">{selectedOp.name}</span>
+              </div>
+              <div className="text-sm text-gray-500">
+                {selectedOp.description}
+              </div>
+              <div className="flex flex-wrap gap-1 mt-2">
+                {selectedOp?.tags?.map((tag: string) => (
+                  <Tag key={tag} color="default">
+                    {tag}
+                  </Tag>
+                ))}
+              </div>
+            </div>
+            <Divider />
+            <Form layout="vertical">
+              {Object.entries(selectedOp.configs).map(([key, param]) =>
+                renderParamConfig ? (
+                  renderParamConfig(selectedOp, key, param)
+                ) : (
+                  <ParamConfig
+                    key={key}
+                    operator={selectedOp}
+                    paramKey={key}
+                    param={param}
+                    onParamChange={handleConfigChange}
+                  />
+                )
+              )}
+            </Form>
+          </div>
+        ) : (
+          <div className="text-center py-12 text-gray-400">
+            <Settings className="w-full w-10 h-10 mb-4 opacity-50" />
+            <div>请选择一个算子进行参数配置</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default OperatorConfig;