From a5e58d9e107d4f5a90015a547a3e11a087f1a2e8 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Mon, 30 Dec 2024 17:04:36 +0800
Subject: [PATCH] 1

---
 .../Design/components/NodeConfigModal.tsx     | 127 ++++++++++++++----
 frontend/src/utils/jsonSchemaUtils.ts         |  15 ++-
 2 files changed, 112 insertions(+), 30 deletions(-)

diff --git a/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx b/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx
index 4af583b9..002f412f 100644
--- a/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx
+++ b/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx
@@ -12,6 +12,16 @@ import {
 import {Button} from "@/components/ui/button";
 import {Input} from "@/components/ui/input";
 import {Label} from "@/components/ui/label";
+import { convertJsonSchemaToColumns } from '@/utils/jsonSchemaUtils';
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
 
 interface NodeConfigDrawerProps {
     visible: boolean;
@@ -35,33 +45,44 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
     const [panelValues, setPanelValues] = React.useState<Variables>({});
     const [localValues, setLocalValues] = React.useState<Variables>({});
 
-    // 初始化表单值，包括默认值
-    const initializeFormValues = (schema: any) => {
-        if (!schema?.properties) return {};
-        
-        const initialValues: Variables = {};
-        Object.entries(schema.properties).forEach(([key, property]: [string, any]) => {
-            if (property.default !== undefined) {
-                initialValues[key] = property.default;
-            }
-        });
-        return initialValues;
-    };
-
     useEffect(() => {
         if (nodeDefinition) {
-            // 合并默认值和已有值
-            const panelDefaults = initializeFormValues(nodeDefinition.panelVariablesSchema);
-            const localDefaults = initializeFormValues(nodeDefinition.localVariablesSchema);
-            
+            // 使用 convertJsonSchemaToColumns 获取字段配置
+            const panelColumns = convertJsonSchemaToColumns(nodeDefinition.panelVariablesSchema || { type: 'object', properties: {} });
+            const localColumns = convertJsonSchemaToColumns(nodeDefinition.localVariablesSchema || { type: 'object', properties: {} });
+
+            // 初始化表单值，包括默认值
+            const initialPanelValues = panelColumns.reduce((acc, column) => {
+                if (column.initialValue !== undefined) {
+                    acc[column.dataIndex] = column.initialValue;
+                }
+                return acc;
+            }, {} as Variables);
+
+            const initialLocalValues = localColumns.reduce((acc, column) => {
+                if (column.initialValue !== undefined) {
+                    acc[column.dataIndex] = column.initialValue;
+                }
+                return acc;
+            }, {} as Variables);
+
+            // 设置初始值
             setPanelValues({
-                ...panelDefaults,
+                ...initialPanelValues,
                 ...(nodeDefinition.panelVariables || {})
             });
             setLocalValues({
-                ...localDefaults,
+                ...initialLocalValues,
                 ...(nodeDefinition.localVariables || {})
             });
+
+            // 打印调试信息
+            console.log('Panel Columns:', panelColumns);
+            console.log('Local Columns:', localColumns);
+            console.log('Initial Panel Values:', initialPanelValues);
+            console.log('Initial Local Values:', initialLocalValues);
+            console.log('Node Definition Panel Variables:', nodeDefinition.panelVariables);
+            console.log('Node Definition Local Variables:', nodeDefinition.localVariables);
         }
     }, [nodeDefinition]);
 
@@ -74,19 +95,67 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
         onOk(updatedNodeDefinition);
     };
 
+    const renderFormField = (column: any, value: any, onChange: (value: any) => void) => {
+        const isReadOnly = column.readonly || column.fieldProps?.disabled;
+        const props = {
+            value: value || '',
+            onChange: (e: any) => onChange(e.target?.value ?? e),
+            placeholder: column.fieldProps?.placeholder,
+            readOnly: isReadOnly,
+            className: isReadOnly ? "bg-muted" : "",
+        };
+
+        switch (column.valueType) {
+            case 'select':
+                return (
+                    <Select
+                        value={value}
+                        onValueChange={onChange}
+                        disabled={isReadOnly}
+                    >
+                        <SelectTrigger>
+                            <SelectValue placeholder={column.fieldProps?.placeholder} />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {column.fieldProps?.options?.map((option: any) => (
+                                <SelectItem key={option.value} value={option.value}>
+                                    {option.label}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                );
+            case 'switch':
+                return (
+                    <Switch
+                        checked={value}
+                        onCheckedChange={onChange}
+                        disabled={isReadOnly}
+                    />
+                );
+            case 'textarea':
+            case 'code':
+                return <Textarea {...props} />;
+            case 'digit':
+                return <Input {...props} type="number" />;
+            default:
+                return <Input {...props} />;
+        }
+    };
+
     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]) => (
-            <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" : ""}
-                />
+        const columns = convertJsonSchemaToColumns(schema);
+        
+        return columns.map(column => (
+            <div key={column.dataIndex} className="space-y-2">
+                <Label>{column.title}</Label>
+                {renderFormField(
+                    column,
+                    values[column.dataIndex],
+                    (value) => onChange(column.dataIndex, value)
+                )}
             </div>
         ));
     };
diff --git a/frontend/src/utils/jsonSchemaUtils.ts b/frontend/src/utils/jsonSchemaUtils.ts
index 55edeb49..7fa5a593 100644
--- a/frontend/src/utils/jsonSchemaUtils.ts
+++ b/frontend/src/utils/jsonSchemaUtils.ts
@@ -31,6 +31,7 @@ interface JsonSchemaProperty {
     minLength?: number;
     maxLength?: number;
     pattern?: string;
+    readOnly?: boolean;
 }
 
 interface JsonSchema {
@@ -50,6 +51,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
                 required: schema.required?.includes(key),
             },
             initialValue: value.default,
+            readonly: value.readOnly,
         };
 
         // 根据类型处理不同的表单项
@@ -66,6 +68,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
                                 value: item,
                             })),
                             placeholder: `请选择${value.title || key}`,
+                            disabled: value.readOnly,
                         },
                     };
                 }
@@ -93,6 +96,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
                                 formatOnType: true,
                                 suggestOnTriggerCharacters: editorConfig.autoComplete ?? true,
                                 renderWhitespace: 'boundary',
+                                readOnly: value.readOnly,
                             }
                         }
                     };
@@ -103,6 +107,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
                     valueType: 'text',
                     fieldProps: {
                         placeholder: `请输入${value.title || key}`,
+                        disabled: value.readOnly,
                     },
                 };
 
@@ -115,7 +120,8 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
                         min: value.minimum,
                         max: value.maximum,
                         placeholder: `请输入${value.title || key}`,
-                        style: { width: '100%' }
+                        style: { width: '100%' },
+                        disabled: value.readOnly,
                     },
                 };
 
@@ -123,6 +129,9 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
                 return {
                     ...baseConfig,
                     valueType: 'switch',
+                    fieldProps: {
+                        disabled: value.readOnly,
+                    },
                 };
 
             case 'array':
@@ -142,6 +151,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
                                 value: item,
                             })),
                             placeholder: `请选择${value.title || key}`,
+                            disabled: value.readOnly,
                         },
                     };
                 }
@@ -152,6 +162,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
                     fieldProps: {
                         mode: 'tags',
                         placeholder: `请输入${value.title || key}`,
+                        disabled: value.readOnly,
                     },
                 };
 
@@ -161,6 +172,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
                     valueType: 'jsonCode',
                     fieldProps: {
                         placeholder: `请输入${value.title || key}`,
+                        disabled: value.readOnly,
                     },
                 };
 
@@ -170,6 +182,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
                     valueType: 'text',
                     fieldProps: {
                         placeholder: `请输入${value.title || key}`,
+                        disabled: value.readOnly,
                     },
                 };
         }