1

frontend/src/pages/Workflow/NodeDesign/Design.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { PageContainer } from '@ant-design/pro-components';
 import { Row, Col, Menu, Tabs } from 'antd';
+import FormRender, { useForm } from 'form-render';
 import type { NodeDefinitionData } from './types';
 import * as service from './service';
 
@@ -20,6 +21,8 @@ const NodeDesignForm: React.FC = () => {
     const [selectedNode, setSelectedNode] = useState<NodeDefinitionData | null>(null);
     // 当前选中的 tab
     const [activeTab, setActiveTab] = useState<string>('panel');
+    // form 实例
+    const form = useForm();
 
     // 加载节点定义数据
     useEffect(() => {
@@ -62,34 +65,126 @@ const NodeDesignForm: React.FC = () => {
             if (availableTabs.length > 0 && !availableTabs.find(tab => tab.key === activeTab)) {
                 setActiveTab(availableTabs[0].key);
             }
+            // 重置表单
+            form.resetFields();
         }
     };
 
+    // 处理 Tab 切换
+    const handleTabChange = (newTab: string) => {
+        setActiveTab(newTab);
+        // 重置表单
+        form.resetFields();
+    };
+
+    // 处理 schema 的 title
+    const processSchemaTitle = (schema: any) => {
+        if (!schema || typeof schema !== 'object') return schema;
+
+        const newSchema = { ...schema };
+
+        // 如果有 properties，处理每个属性
+        if (newSchema.properties) {
+            newSchema.properties = Object.entries(newSchema.properties).reduce((acc, [key, value]: [string, any]) => {
+                const newValue = { ...value };
+                // 如果有 title，添加 key
+                if (newValue.title) {
+                    newValue.title = `${newValue.title}-${key}`;
+                }
+                // 递归处理嵌套的 properties
+                if (newValue.properties) {
+                    newValue.properties = processSchemaTitle(newValue).properties;
+                }
+                return { ...acc, [key]: newValue };
+            }, {});
+        }
+
+        return newSchema;
+    };
+
+    // 获取表单 schema
+    const getFormSchema = (tabKey: string) => {
+        if (!selectedNode) return null;
+
+        const content = selectedNode[tabKey as keyof NodeDefinitionData];
+        if (!content) return null;
+
+        // 如果内容本身就是 schema 格式，处理 title 后返回
+        if (typeof content === 'object' && 'type' in content && 'properties' in content) {
+            return processSchemaTitle(content);
+        }
+
+        // 否则，构建一个 schema
+        return {
+            type: 'object',
+            properties: Object.entries(content).reduce((acc, [key, value]) => {
+                let fieldSchema: any = {
+                    title: key,
+                };
+
+                // 根据值的类型设置不同的 schema
+                if (typeof value === 'string') {
+                    fieldSchema = {
+                        ...fieldSchema,
+                        type: 'string',
+                        default: value
+                    };
+                } else if (typeof value === 'number') {
+                    fieldSchema = {
+                        ...fieldSchema,
+                        type: 'number',
+                        default: value
+                    };
+                } else if (typeof value === 'boolean') {
+                    fieldSchema = {
+                        ...fieldSchema,
+                        type: 'boolean',
+                        default: value
+                    };
+                } else if (Array.isArray(value)) {
+                    fieldSchema = {
+                        ...fieldSchema,
+                        type: 'array',
+                        items: {
+                            type: typeof value[0] || 'string'
+                        },
+                        default: value
+                    };
+                } else if (typeof value === 'object' && value !== null) {
+                    fieldSchema = {
+                        ...fieldSchema,
+                        type: 'object',
+                        properties: this.getFormSchema(value)?.properties || {},
+                        default: value
+                    };
+                }
+
+                return {
+                    ...acc,
+                    [key]: fieldSchema
+                };
+            }, {})
+        };
+    };
+
     // 渲染 Tab 内容
     const renderTabContent = (tabKey: string) => {
         if (!selectedNode) return null;
 
-        const content = selectedNode[tabKey as keyof NodeDefinitionData];
-        
+        const schema = getFormSchema(tabKey);
+        if (!schema) return null;
+
         return (
-            <div style={{ 
-                padding: '16px',
-                background: '#fafafa',
-                border: '1px solid #f0f0f0',
-                borderRadius: '4px',
-                minHeight: '200px'
-            }}>
-                <pre style={{ 
-                    margin: 0,
-                    padding: '8px',
-                    background: '#fff',
-                    border: '1px solid #f0f0f0',
-                    borderRadius: '2px',
-                    maxHeight: '600px',
-                    overflow: 'auto'
-                }}>
-                    {content ? JSON.stringify(content, null, 2) : '暂无数据'}
-                </pre>
+            <div style={{ padding: '16px' }}>
+                <FormRender
+                    form={form}
+                    schema={schema}
+                    disabled={true}
+                    displayType="column"
+                    column={1}
+                    readOnly={true}
+                    watch={{}}
+                />
             </div>
         );
     };
@@ -139,7 +234,7 @@ const NodeDesignForm: React.FC = () => {
                             {selectedNode && getAvailableTabs(selectedNode).length > 0 ? (
                                 <Tabs
                                     activeKey={activeTab}
-                                    onChange={setActiveTab}
+                                    onChange={handleTabChange}
                                     type="card"
                                     items={getAvailableTabs(selectedNode).map(tab => ({
                                         key: tab.key,