From a0056eb14cfaa6c128e2d76bc01aa7be8bf7d606 Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Thu, 8 May 2025 18:23:08 +0800
Subject: [PATCH] perf: dynamic and pipeline config ui

---
 .../dynamic-form/DynamicFormItemComponent.tsx | 18 +++++++------
 .../pipeline-form/PipelineChildFormEntity.ts  | 19 --------------
 .../pipeline-form/PipelineFormEntity.ts       |  0
 web/src/app/home/pipelines/page.tsx           | 25 ++-----------------
 4 files changed, 13 insertions(+), 49 deletions(-)
 delete mode 100644 web/src/app/home/pipelines/components/pipeline-form/PipelineChildFormEntity.ts
 delete mode 100644 web/src/app/home/pipelines/components/pipeline-form/PipelineFormEntity.ts

diff --git a/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx b/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
index be745a2f..0a20df0d 100644
--- a/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
+++ b/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
@@ -4,7 +4,7 @@ import {
 } from '@/app/infra/entities/form/dynamic';
 import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Checkbox } from "@/components/ui/checkbox"
+import { Switch } from "@/components/ui/switch"
 import { ControllerRenderProps } from "react-hook-form";
 import { Button } from "@/components/ui/button";
 
@@ -31,7 +31,7 @@ export default function DynamicFormItemComponent({
 
     case DynamicFormItemType.BOOLEAN:
       return (
-        <Checkbox
+        <Switch
           checked={field.value}
           onCheckedChange={field.onChange}
         />
@@ -41,8 +41,9 @@ export default function DynamicFormItemComponent({
       return (
         <div className="space-y-2">
           {field.value.map((item: string, index: number) => (
-            <div key={index} className="flex gap-2">
+            <div key={index} className="flex gap-2 items-center">
               <Input
+                className="w-[200px]"
                 value={item}
                 onChange={(e) => {
                   const newValue = [...field.value];
@@ -50,15 +51,18 @@ export default function DynamicFormItemComponent({
                   field.onChange(newValue);
                 }}
               />
-              <Button
-                variant="destructive"
+              <button 
+                type="button"
+                className="p-2 hover:bg-gray-100 rounded"
                 onClick={() => {
                   const newValue = field.value.filter((_: string, i: number) => i !== index);
                   field.onChange(newValue);
                 }}
               >
-                删除
-              </Button>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5 text-red-500">
+                  <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
+                </svg>
+              </button>
             </div>
           ))}
           <Button
diff --git a/web/src/app/home/pipelines/components/pipeline-form/PipelineChildFormEntity.ts b/web/src/app/home/pipelines/components/pipeline-form/PipelineChildFormEntity.ts
deleted file mode 100644
index 08296a7f..00000000
--- a/web/src/app/home/pipelines/components/pipeline-form/PipelineChildFormEntity.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DynamicFormItemConfig } from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
-
-export interface IPipelineChildFormEntity {
-  name: string;
-  label: string;
-  formItems: DynamicFormItemConfig[];
-}
-
-export class PipelineChildFormEntity implements IPipelineChildFormEntity {
-  formItems: DynamicFormItemConfig[];
-  label: string;
-  name: string;
-
-  constructor(props: IPipelineChildFormEntity) {
-    this.label = props.label;
-    this.name = props.name;
-    this.formItems = props.formItems;
-  }
-}
diff --git a/web/src/app/home/pipelines/components/pipeline-form/PipelineFormEntity.ts b/web/src/app/home/pipelines/components/pipeline-form/PipelineFormEntity.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/web/src/app/home/pipelines/page.tsx b/web/src/app/home/pipelines/page.tsx
index f7ab0483..794a4a88 100644
--- a/web/src/app/home/pipelines/page.tsx
+++ b/web/src/app/home/pipelines/page.tsx
@@ -5,7 +5,7 @@ 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 PipelineCard from '@/app/home/pipelines/components/pipeline-card/PipelineCard';
-import { PipelineFormEntity } from '@/app/home/pipelines/components/pipeline-form/PipelineFormEntity';
+import { PipelineFormEntity } from '@/app/infra/entities/pipeline';
 import styles from './pipelineConfig.module.css';
 import {
   Dialog,
@@ -80,28 +80,7 @@ export default function PluginConfigPage() {
 
   return (
     <div className={styles.configPageContainer}>
-      
-      {/* <Modal
-        title={isEditForm ? '编辑流水线' : '创建流水线'}
-        centered
-        open={modalOpen}
-        destroyOnClose={true}
-        onOk={() => setModalOpen(false)}
-        onCancel={() => setModalOpen(false)}
-        width={700}
-        footer={null}
-      >
-        <PipelineFormComponent
-          onFinish={() => {
-            getPipelines();
-            setModalOpen(false);
-          }}
-          isEditMode={isEditForm}
-          pipelineId={selectedPipelineId}
-          disableForm={disableForm}
-          initValues={selectedPipelineFormValue}
-        />
-      </Modal> */}
+
       <Dialog open={modalOpen} onOpenChange={setModalOpen}>
         <DialogContent>
           <DialogHeader>