feat: finish update pipline but left some bugs

web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx

@@ -13,10 +13,20 @@ import styles from "./pipelineFormStyle.module.css";
 import { httpClient } from "@/app/infra/http/HttpClient";
 import { LLMModel, Pipeline } from "@/app/infra/api/api-types";
 import { UUID } from "uuidjs";
+import {PipelineFormEntity} from "@/app/home/pipelines/components/pipeline-form/PipelineFormEntity";
 
 export default function PipelineFormComponent({
-  onFinish
+  initValues,
+  onFinish,
+  isEditMode,
+  pipelineId,
+  disableForm,
 }: {
+  pipelineId?: string;
+  isEditMode: boolean;
+  disableForm: boolean;
+  // 这里的写法很不安全不规范，未来流水线需要重新整理
+  initValues?: PipelineFormEntity;
   onFinish: () => void;
 }) {
   const [nowFormIndex, setNowFormIndex] = useState<number>(0);
@@ -40,6 +50,18 @@ export default function PipelineFormComponent({
     getLLMModelList();
   }, []);
 
+  useEffect(() => {
+    console.log("initValues change: ", initValues);
+    if (initValues) {
+      basicForm.setFieldsValue(initValues.basic);
+      aiForm.setFieldsValue(initValues.ai);
+      triggerForm.setFieldsValue(initValues.trigger);
+      safetyForm.setFieldsValue(initValues.safety);
+      outputForm.setFieldsValue(initValues.output);
+    }
+  }, [initValues]);
+
+
   function getLLMModelList() {
     httpClient
       .getProviderLLMModels()
@@ -91,6 +113,14 @@ export default function PipelineFormComponent({
   }
 
   function handleCommit() {
+    if (isEditMode) {
+      handleModify()
+    } else {
+      handleCreate()
+    }
+  }
+
+  function handleCreate() {
     Promise.all([
       basicForm.validateFields(),
       aiForm.validateFields(),
@@ -98,13 +128,30 @@ export default function PipelineFormComponent({
       safetyForm.validateFields(),
       outputForm.validateFields()
     ])
-      .then(() => {
-        const pipeline = assembleForm();
-        httpClient.createPipeline(pipeline).then(() => onFinish());
-      })
-      .catch((e) => {
-        console.error(e);
-      });
+        .then(() => {
+          const pipeline = assembleForm();
+          httpClient.createPipeline(pipeline).then(() => onFinish());
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+  }
+
+  function handleModify() {
+    Promise.all([
+      basicForm.validateFields(),
+      aiForm.validateFields(),
+      triggerForm.validateFields(),
+      safetyForm.validateFields(),
+      outputForm.validateFields()
+    ])
+        .then(() => {
+          const pipeline = assembleForm();
+          httpClient.updatePipeline(pipelineId || '', pipeline).then(() => onFinish());
+        })
+        .catch((e) => {
+          console.error(e);
+        });
   }
 
   // TODO 类型混乱，需要优化
@@ -142,6 +189,7 @@ export default function PipelineFormComponent({
           display: getNowFormLabel().name === "basic" ? "block" : "none"
         }}
         form={basicForm}
+        disabled={disableForm}
       >
         <Form.Item
           label="流水线名称"
@@ -172,6 +220,7 @@ export default function PipelineFormComponent({
         layout={"vertical"}
         style={{ display: getNowFormLabel().name === "ai" ? "block" : "none" }}
         form={aiForm}
+        disabled={disableForm}
       >
         {/* Runner 配置区块 */}
         <div className={`${styles.formItemSubtitle}`}>运行器</div>
@@ -331,6 +380,7 @@ export default function PipelineFormComponent({
           display: getNowFormLabel().name === "trigger" ? "block" : "none"
         }}
         form={triggerForm}
+        disabled={disableForm}
       >
         {/* 群响应规则块 */}
         <div className={`${styles.formItemSubtitle}`}> 群响应规则</div>
@@ -423,6 +473,7 @@ export default function PipelineFormComponent({
           display: getNowFormLabel().name === "safety" ? "block" : "none"
         }}
         form={safetyForm}
+        disabled={disableForm}
       >
         {/* 内容过滤块 content-filter */}
         <div className={`${styles.formItemSubtitle}`}> 内容过滤 </div>
@@ -488,6 +539,7 @@ export default function PipelineFormComponent({
           display: getNowFormLabel().name === "output" ? "block" : "none"
         }}
         form={outputForm}
+        disabled={disableForm}
       >
         {/* 长文本处理区块 */}
         <div className={`${styles.formItemSubtitle}`}> 长文本处理 </div>

web/src/app/home/pipelines/components/pipeline-form/PipelineFormEntity.ts

@@ -0,0 +1,7 @@
+export interface PipelineFormEntity {
+    basic: object,
+    ai: object,
+    trigger: object,
+    safety: object,
+    output: object,
+}

web/src/app/home/pipelines/page.tsx

@@ -6,11 +6,21 @@ import PipelineFormComponent from "./components/pipeline-form/PipelineFormCompon
 import { httpClient } from "@/app/infra/http/HttpClient";
 import { PipelineCardVO } from "@/app/home/pipelines/components/pipeline-card/PipelineCardVO";
 import PipelineCardComponent from "@/app/home/pipelines/components/pipeline-card/PipelineCardComponent";
+import {PipelineFormEntity} from "@/app/home/pipelines/components/pipeline-form/PipelineFormEntity";
 
 export default function PluginConfigPage() {
   const [modalOpen, setModalOpen] = useState<boolean>(false);
-  const [isEditForm] = useState(false);
+  const [isEditForm, setIsEditForm] = useState(false);
   const [pipelineList, setPipelineList] = useState<PipelineCardVO[]>([]);
+  const [selectedPipelineId, setSelectedPipelineId] = useState("")
+  const [selectedPipelineFormValue, setSelectedPipelineFormValue] = useState<PipelineFormEntity>({
+      basic: {},
+      ai: {},
+      trigger: {},
+      safety: {},
+      output: {},
+  })
+  const [disableForm, setDisableForm] = useState(false)
 
   useEffect(() => {
     getPipelines();
@@ -37,12 +47,29 @@ export default function PluginConfigPage() {
       });
   }
 
+  function getSelectedPipelineForm(id?: string) {
+      httpClient.getPipeline(id ?? selectedPipelineId).then((value) => {
+          setSelectedPipelineFormValue({
+              ai: value.pipeline.config.ai,
+              basic: {
+                  description: value.pipeline.description,
+                  name: value.pipeline.name,
+              },
+              output: value.pipeline.config.output,
+              safety: value.pipeline.config.safety,
+              trigger: value.pipeline.config.trigger,
+          })
+          setDisableForm(false)
+      })
+  }
+
   return (
     <div className={``}>
       <Modal
         title={isEditForm ? "编辑流水线" : "创建流水线"}
         centered
         open={modalOpen}
+        destroyOnClose={true}
         onOk={() => setModalOpen(false)}
         onCancel={() => setModalOpen(false)}
         width={700}
@@ -53,6 +80,10 @@ export default function PluginConfigPage() {
             getPipelines();
             setModalOpen(false);
           }}
+          isEditMode={isEditForm}
+          pipelineId={selectedPipelineId}
+          disableForm={disableForm}
+          initValues={selectedPipelineFormValue}
         />
       </Modal>
 
@@ -60,7 +91,18 @@ export default function PluginConfigPage() {
         <div className={``}>
           {pipelineList.map((pipeline) => {
             return (
-              <PipelineCardComponent key={pipeline.id} cardVO={pipeline} />
+              <div
+                key={pipeline.id}
+                onClick={() => {
+                    setDisableForm(true)
+                    setIsEditForm(true);
+                    setModalOpen(true);
+                    setSelectedPipelineId(pipeline.id)
+                    getSelectedPipelineForm(pipeline.id);
+                }}
+              >
+                <PipelineCardComponent cardVO={pipeline} />
+              </div>
             );
           })}
         </div>