feature: 增加算子详情页；优化算子上传更新逻辑 (#64)

* feature: 增加算子详情页；优化算子上传更新逻辑

frontend/src/pages/OperatorMarket/Create/OperatorPluginCreate.tsx

@@ -65,7 +65,15 @@ export default function OperatorPluginCreate() {
       setParsedInfo({ ...parsedInfo, percent: 100 }); // 上传完成，进度100%
       // 解析文件过程
       const res = await uploadOperatorUsingPost({ fileName });
-      setParsedInfo({ ...parsedInfo, ...res.data, fileName });
+      const configs = res.data.settings && typeof res.data.settings === "string"
+        ? JSON.parse(res.data.settings)
+        : {};
+      const defaultParams: Record<string, string> = {};
+      Object.keys(configs).forEach((key) => {
+        const { value } = configs[key];
+        defaultParams[key] = value;
+      });
+      setParsedInfo({ ...res.data, fileName, configs, defaultParams});
       setUploadStep("parsing");
     } catch (err) {
       setParseError("文件解析失败，" + err.data.message);
@@ -91,7 +99,15 @@ export default function OperatorPluginCreate() {
   const onFetchOperator = async (operatorId: string) => {
     // 编辑模式，加载已有算子信息逻辑待实现
     const { data } = await queryOperatorByIdUsingGet(operatorId);
-    setParsedInfo(data);
+    const configs = data.settings && typeof data.settings === "string"
+      ? JSON.parse(data.settings)
+      : {};
+    const defaultParams: Record<string, string> = {};
+    Object.keys(configs).forEach((key) => {
+      const { value } = configs[key];
+      defaultParams[key] = value;
+    });
+    setParsedInfo({ ...data, configs, defaultParams});
     setUploadStep("configure");
   };
 
@@ -127,7 +143,7 @@ export default function OperatorPluginCreate() {
                 icon: <Settings />,
               },
               {
-                title: "配置标签",
+                title: "配置信息",
                 icon: <TagIcon />,
               },
               {

frontend/src/pages/OperatorMarket/Create/components/ConfigureStep.tsx

@@ -1,6 +1,7 @@
-import { Alert, Input, Form } from "antd";
+import {Alert, Input, Form} from "antd";
 import TextArea from "antd/es/input/TextArea";
-import { useEffect } from "react";
+import React, {useEffect} from "react";
+import ParamConfig from "@/pages/DataCleansing/Create/components/ParamConfig.tsx";
 
 export default function ConfigureStep({
   parsedInfo,
@@ -13,6 +14,24 @@ export default function ConfigureStep({
     form.setFieldsValue(parsedInfo);
   }, [parsedInfo]);
 
+  const handleConfigChange = (
+    operatorId: string,
+    paramKey: string,
+    value: any
+  ) => {
+    setParsedInfo((op) =>
+      op.id === operatorId
+        ? {
+          ...op,
+          overrides: {
+            ...(op?.overrides || op?.defaultParams),
+            [paramKey]: value,
+          },
+        }
+        : op
+    )
+  };
+
   return (
     <>
       {/* 解析结果 */}
@@ -33,50 +52,54 @@ export default function ConfigureStep({
           layout="vertical"
           initialValues={parsedInfo}
           onValuesChange={(_, allValues) => {
-            setParsedInfo({ ...parsedInfo, ...allValues });
+            setParsedInfo({...parsedInfo, ...allValues});
           }}
         >
           {/* 基本信息 */}
           <h3 className="text-lg font-semibold text-gray-900">基本信息</h3>
-          <Form.Item label="ID" name="id" rules={[{ required: true }]}>
-            <Input value={parsedInfo.id} readOnly />
+          <Form.Item label="ID" name="id" rules={[{required: true}]}>
+            <Input value={parsedInfo.id} readOnly/>
           </Form.Item>
-          <Form.Item label="名称" name="name" rules={[{ required: true }]}>
-            <Input value={parsedInfo.name} />
+          <Form.Item label="名称" name="name" rules={[{required: true}]}>
+            <Input value={parsedInfo.name}/>
           </Form.Item>
-          <Form.Item label="版本" name="version" rules={[{ required: true }]}>
-            <Input value={parsedInfo.version} />
+          <Form.Item label="版本" name="version" rules={[{required: true}]}>
+            <Input value={parsedInfo.version}/>
           </Form.Item>
           <Form.Item
             label="描述"
             name="description"
-            rules={[{ required: false }]}
+            rules={[{required: false}]}
           >
-            <TextArea value={parsedInfo.description} />
+            <TextArea value={parsedInfo.description}/>
+          </Form.Item>
+          <Form.Item label="输入类型" name="inputs" rules={[{required: true}]}>
+            <Input value={parsedInfo.inputs}/>
+          </Form.Item>
+          <Form.Item label="输出类型" name="outputs" rules={[{required: true}]}>
+            <Input value={parsedInfo.outputs}/>
           </Form.Item>
 
-          <h3 className="text-lg font-semibold text-gray-900 mt-10 mb-2">
-            应用示例
-          </h3>
-          <div className="border p-4 rounded-lg flex items-center justify-between gap-4">
-            <div className="flex-1">
-              <span className="bg-[#2196f3] border-radius px-4 py-1 rounded-tl-lg rounded-br-lg text-white">
-                输入
-              </span>
-              <pre className="p-4 text-sm overflow-auto">
-                {parsedInfo.inputs}
-              </pre>
-            </div>
-            <h1 className="text-3xl">VS</h1>
-            <div className="flex-1">
-              <span className="bg-[#4caf50] border-radius px-4 py-1 rounded-tl-lg rounded-br-lg text-white">
-                输出
-              </span>
-              <pre className=" p-4 text-sm overflow-auto">
-                {parsedInfo.outputs}
-              </pre>
-            </div>
-          </div>
+          {parsedInfo.configs && (
+            <>
+              <h3 className="text-lg font-semibold text-gray-900 mt-10 mb-2">
+                高级配置
+              </h3>
+              <div className="border p-4 rounded-lg grid grid-cols-2 gap-4">
+                <Form layout="vertical">
+                  {Object.entries(parsedInfo?.configs).map(([key, param]) =>
+                    <ParamConfig
+                      key={key}
+                      operator={parsedInfo}
+                      paramKey={key}
+                      param={param}
+                      onParamChange={handleConfigChange}
+                    />
+                  )}
+                </Form>
+              </div>
+            </>
+          )}
 
           {/* <h3 className="text-lg font-semibold text-gray-900 mt-8">高级配置</h3> */}
         </Form>

frontend/src/pages/OperatorMarket/Create/components/UploadStep.tsx

@@ -3,14 +3,8 @@ import { Upload, FileText } from "lucide-react";
 
 export default function UploadStep({ isUploading, onUpload }) {
   const supportedFormats = [
-    { ext: ".py", desc: "Python 脚本文件" },
     { ext: ".zip", desc: "压缩包文件" },
-    { ext: ".tar.gz", desc: "压缩包文件" },
     { ext: ".tar", desc: "压缩包文件" },
-    { ext: ".whl", desc: "Python Wheel 包" },
-    { ext: ".yaml", desc: "配置文件" },
-    { ext: ".yml", desc: "配置文件" },
-    { ext: ".json", desc: "JSON 配置文件" },
   ];
 
   return (
@@ -28,9 +22,9 @@ export default function UploadStep({ isUploading, onUpload }) {
         <h3 className="text-lg font-semibold text-gray-900 mb-4">
           支持的文件格式
         </h3>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="flex gap-4">
           {supportedFormats.map((format, index) => (
-            <div key={index} className="p-3 border border-gray-200 rounded-lg">
+            <div key={index} className="p-3 border border-gray-200 rounded-lg flex-1">
               <div className="font-medium text-gray-900">{format.ext}</div>
               <div className="text-sm text-gray-500">{format.desc}</div>
             </div>
@@ -52,7 +46,7 @@ export default function UploadStep({ isUploading, onUpload }) {
         onClick={() => {
           const input = document.createElement("input");
           input.type = "file";
-          input.multiple = true;
+          input.multiple = false;
           input.accept = supportedFormats.map((f) => f.ext).join(",");
           input.onchange = (e) => {
             const files = (e.target as HTMLInputElement).files;
@@ -75,7 +69,7 @@ export default function UploadStep({ isUploading, onUpload }) {
               拖拽文件到此处或点击选择文件
             </p>
             <p className="text-sm text-gray-500">
-              支持单个文件或多个文件同时上传
+              仅支持单个文件上传
             </p>
           </div>
         )}