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>

web/src/app/infra/api/api-types/index.ts

@@ -57,9 +57,6 @@ export interface ApiRespPipelines {
   pipelines: Pipeline[];
 }
 
-export interface ApiRespPipeline {
-  pipeline: Pipeline;
-}
 
 export interface Pipeline {
   uuid: string;
@@ -215,3 +212,94 @@ export interface MarketPluginResponse {
   plugins: MarketPlugin[];
   total: number;
 }
+
+
+interface GetPipelineConfig {
+  ai: {
+    "dashscope-app-api": {
+      "api-key": string;
+      "app-id": string;
+      "app-type": "agent" | "workflow";
+      "references-quote"?: string;
+    };
+    "dify-service-api": {
+      "api-key": string;
+      "app-type": "chat" | "agent" | "workflow";
+      "base-url": string;
+      "thinking-convert": "plain" | "original" | "remove";
+      timeout?: number;
+    };
+    "local-agent": {
+      "max-round": number;
+      model: string;
+      prompt: Array<{
+        content: string;
+        role: string;
+      }>;
+    };
+    runner: {
+      runner: "local-agent" | "dify-service-api" | "dashscope-app-api";
+    };
+  };
+  output: {
+    "force-delay": {
+      max: number;
+      min: number;
+    };
+    "long-text-processing": {
+      "font-path": string;
+      strategy: "forward" | "image";
+      threshold: number;
+    };
+    misc: {
+      "at-sender": boolean;
+      "hide-exception": boolean;
+      "quote-origin": boolean;
+      "track-function-calls": boolean;
+    };
+  };
+  safety: {
+    "content-filter": {
+      "check-sensitive-words": boolean;
+      scope: "all" | "income-msg" | "output-msg";
+    };
+    "rate-limit": {
+      limitation: number;
+      strategy: "drop" | "wait";
+      "window-length": number;
+    };
+  };
+  trigger: {
+    "access-control": {
+      blacklist: string[];
+      mode: "blacklist" | "whitelist";
+      whitelist: string[];
+    };
+    "group-respond-rules": {
+      at: boolean;
+      prefix: string[];
+      random: number;
+      regexp: string[];
+    };
+    "ignore-rules": {
+      prefix: string[];
+      regexp: string[];
+    };
+  };
+}
+
+interface GetPipeline {
+  config: GetPipelineConfig;
+  created_at: string;
+  description: string;
+  for_version: string;
+  is_default: boolean;
+  name: string;
+  stages: string[];
+  updated_at: string;
+  uuid: string;
+}
+
+export interface GetPipelineResponseData {
+  pipeline: GetPipeline;
+}

web/src/app/infra/http/HttpClient.ts

@@ -27,7 +27,7 @@ import {
   ApiRespAsyncTasks,
   ApiRespAsyncTask,
   ApiRespUserToken,
-  MarketPluginResponse
+  MarketPluginResponse, GetPipelineResponseData
 } from "../api/api-types";
 import { notification } from "antd";
 
@@ -258,7 +258,7 @@ class HttpClient {
     return this.get("/api/v1/pipelines");
   }
 
-  public getPipeline(uuid: string): Promise<ApiRespPipeline> {
+  public getPipeline(uuid: string): Promise<GetPipelineResponseData> {
     return this.get(`/api/v1/pipelines/${uuid}`);
   }