perf: dynamic and pipeline config ui

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