From 678f6a180974caa6e9148d676a28ca34dfc7ca31 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Mon, 30 Dec 2024 16:17:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=A3=B0=E9=81=93=E6=92=92=E6=97=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Design/components/NodeConfigModal.tsx     | 170 ++++++++----------
 1 file changed, 77 insertions(+), 93 deletions(-)

diff --git a/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx b/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx
index 9b156500..4af583b9 100644
--- a/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx
+++ b/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {Tabs, TabsProps} from 'antd';
 import {Cell} from '@antv/x6';
 import {NodeDefinitionResponse} from "@/pages/Workflow/NodeDesign/types";
@@ -10,18 +10,8 @@ import {
     SheetFooter,
 } from "@/components/ui/sheet";
 import {Button} from "@/components/ui/button";
-import {
-    Form,
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-} from "@/components/ui/form";
 import {Input} from "@/components/ui/input";
-import {useForm} from "react-hook-form";
-import {zodResolver} from "@hookform/resolvers/zod";
-import * as z from "zod";
+import {Label} from "@/components/ui/label";
 
 interface NodeConfigDrawerProps {
     visible: boolean;
@@ -42,100 +32,90 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
     onOk,
     onCancel,
 }) => {
-    // 创建动态的 schema
-    const createFormSchema = (schema: any) => {
-        if (!schema?.properties) return z.object({});
+    const [panelValues, setPanelValues] = React.useState<Variables>({});
+    const [localValues, setLocalValues] = React.useState<Variables>({});
+
+    // 初始化表单值，包括默认值
+    const initializeFormValues = (schema: any) => {
+        if (!schema?.properties) return {};
         
-        const schemaFields: Record<string, any> = {};
+        const initialValues: Variables = {};
         Object.entries(schema.properties).forEach(([key, property]: [string, any]) => {
-            switch (property.type) {
-                case 'string':
-                    schemaFields[key] = property.required ? z.string() : z.string().optional();
-                    break;
-                case 'number':
-                    schemaFields[key] = property.required ? z.number() : z.number().optional();
-                    break;
-                case 'boolean':
-                    schemaFields[key] = property.required ? z.boolean() : z.boolean().optional();
-                    break;
-                default:
-                    schemaFields[key] = z.any();
+            if (property.default !== undefined) {
+                initialValues[key] = property.default;
             }
         });
-        return z.object(schemaFields);
+        return initialValues;
     };
 
-    const panelFormSchema = createFormSchema(nodeDefinition?.panelVariablesSchema);
-    const localFormSchema = createFormSchema(nodeDefinition?.localVariablesSchema);
-
-    const panelForm = useForm<z.infer<typeof panelFormSchema>>({
-        resolver: zodResolver(panelFormSchema),
-        defaultValues: nodeDefinition?.panelVariables || {},
-    });
-
-    const localForm = useForm<z.infer<typeof localFormSchema>>({
-        resolver: zodResolver(localFormSchema),
-        defaultValues: nodeDefinition?.localVariables || {},
-    });
-
-    const handleSubmit = async () => {
-        try {
-            const panelValues = await panelForm.handleSubmit((data) => data)();
-            const localValues = await localForm.handleSubmit((data) => data)();
-
-            const updatedNodeDefinition = {
-                ...nodeDefinition,
-                panelVariables: panelValues,
-                localVariables: localValues
-            };
-            onOk(updatedNodeDefinition);
-        } catch (error) {
-            console.error('Validation failed:', error);
+    useEffect(() => {
+        if (nodeDefinition) {
+            // 合并默认值和已有值
+            const panelDefaults = initializeFormValues(nodeDefinition.panelVariablesSchema);
+            const localDefaults = initializeFormValues(nodeDefinition.localVariablesSchema);
+            
+            setPanelValues({
+                ...panelDefaults,
+                ...(nodeDefinition.panelVariables || {})
+            });
+            setLocalValues({
+                ...localDefaults,
+                ...(nodeDefinition.localVariables || {})
+            });
         }
+    }, [nodeDefinition]);
+
+    const handleSubmit = () => {
+        const updatedNodeDefinition = {
+            ...nodeDefinition,
+            panelVariables: panelValues,
+            localVariables: localValues
+        };
+        onOk(updatedNodeDefinition);
     };
 
-    const renderFormFields = (schema: any, form: any) => {
+    const renderFormFields = (schema: any, values: Variables, onChange: (key: string, value: any) => void) => {
         if (!schema?.properties) return null;
 
         return Object.entries(schema.properties).map(([key, property]: [string, any]) => (
-            <FormField
-                key={key}
-                control={form.control}
-                name={key}
-                render={({field}) => (
-                    <FormItem>
-                        <FormLabel>{property.title || key}</FormLabel>
-                        <FormControl>
-                            <Input {...field} placeholder={property.description} />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                )}
-            />
+            <div key={key} className="space-y-2">
+                <Label>{property.title || key}</Label>
+                <Input
+                    value={values[key] || ''}
+                    placeholder={property.description}
+                    onChange={(e) => onChange(key, e.target.value)}
+                    readOnly={property.readOnly}
+                    className={property.readOnly ? "bg-muted" : ""}
+                />
+            </div>
         ));
     };
 
+    const handlePanelChange = (key: string, value: any) => {
+        setPanelValues(prev => ({...prev, [key]: value}));
+    };
+
+    const handleLocalChange = (key: string, value: any) => {
+        setLocalValues(prev => ({...prev, [key]: value}));
+    };
+
     const items: TabsProps['items'] = [
         nodeDefinition?.panelVariablesSchema && {
             key: 'panel',
             label: '面板变量',
             children: (
-                <Form {...panelForm}>
-                    <form className="space-y-4">
-                        {renderFormFields(nodeDefinition.panelVariablesSchema, panelForm)}
-                    </form>
-                </Form>
+                <div className="space-y-4">
+                    {renderFormFields(nodeDefinition.panelVariablesSchema, panelValues, handlePanelChange)}
+                </div>
             )
         },
         nodeDefinition?.localVariablesSchema && {
             key: 'local',
             label: '环境变量',
             children: (
-                <Form {...localForm}>
-                    <form className="space-y-4">
-                        {renderFormFields(nodeDefinition.localVariablesSchema, localForm)}
-                    </form>
-                </Form>
+                <div className="space-y-4">
+                    {renderFormFields(nodeDefinition.localVariablesSchema, localValues, handleLocalChange)}
+                </div>
             )
         }
     ].filter(Boolean) as TabsProps['items'];
@@ -143,20 +123,24 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
     return (
         <Sheet open={visible} onOpenChange={(open) => !open && onCancel()}>
             <SheetContent side="right" className="w-[480px] sm:w-[480px]">
-                <SheetHeader>
-                    <SheetTitle>编辑节点 - {nodeDefinition?.nodeName || ''}</SheetTitle>
-                </SheetHeader>
-                <div className="flex-1 overflow-y-auto py-6">
-                    <Tabs items={items}/>
+                <div className="flex flex-col h-full">
+                    <SheetHeader>
+                        <SheetTitle>编辑节点 - {nodeDefinition?.nodeName || ''}</SheetTitle>
+                    </SheetHeader>
+                    <div className="flex-1 overflow-y-auto py-6">
+                        <Tabs items={items} className="border-none"/>
+                    </div>
+                    <div className="shrink-0 border-t bg-background p-4">
+                        <div className="flex justify-end gap-2">
+                            <Button variant="outline" onClick={onCancel}>
+                                取消
+                            </Button>
+                            <Button onClick={handleSubmit}>
+                                确定
+                            </Button>
+                        </div>
+                    </div>
                 </div>
-                <SheetFooter>
-                    <Button variant="outline" onClick={onCancel}>
-                        取消
-                    </Button>
-                    <Button onClick={handleSubmit}>
-                        确定
-                    </Button>
-                </SheetFooter>
             </SheetContent>
         </Sheet>
     );