1

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

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import {PageContainer} from '@ant-design/pro-layout';
-import {Button, Card, Form, Input, InputNumber, Select, Switch, Space, Menu, Tabs, Row, Col, message} from 'antd';
+import {Button, Card, Form, Input, InputNumber, Select, Switch, Space, Menu, Tabs, Row, Col, message, ColorPicker} from 'antd';
 import type {NodeDesignData} from './types';
 import * as service from './service';
 
@@ -13,11 +13,27 @@ const TAB_CONFIG = [
 ];
 
 // 渲染具体的表单控件
-const renderField = (schema: any) => {
+const renderField = (schema: any, fieldPath: string) => {
     const commonProps = {
         placeholder: `请输入${schema.title}`,
     };
 
+    // 颜色字段路径列表
+    const colorFields = [
+        'ports.groups.in.attrs.circle.fill',
+        'ports.groups.in.attrs.circle.stroke',
+        'ports.groups.out.attrs.circle.fill',
+        'ports.groups.out.attrs.circle.stroke',
+        'style.fill',
+        'style.stroke',
+        'style.iconColor'
+    ];
+
+    // 检查是否是颜色字段
+    if (colorFields.some(path => fieldPath.endsWith(path))) {
+        return <ColorPicker showText/>;
+    }
+
     if (schema.enum) {
         return (
             <Select
@@ -72,7 +88,7 @@ const FormRenderer: React.FC<{
                     {readOnly ? (
                         <span style={{color: '#666'}}>{position.default || '-'}</span>
                     ) : (
-                        renderField(position)
+                        renderField(position, `${portPath}.position`)
                     )}
                 </Form.Item>
 
@@ -197,7 +213,7 @@ const FormRenderer: React.FC<{
                         {readOnly ? (
                             <span style={{color: '#666'}}>{value.default || '-'}</span>
                         ) : (
-                            renderField(value)
+                            renderField(value, fieldPath)
                         )}
                     </Form.Item>
                 );
@@ -259,25 +275,58 @@ const NodeDesignForm: React.FC = () => {
     // 处理 Tab 切换
     const handleTabChange = (key: string) => {
         setActiveTab(key);
-        form.resetFields();
+        // 不需要重置表单
     };
 
     // 处理保存
     const handleSave = async () => {
         try {
             const values = await form.validateFields();
-            const { base, ...otherValues } = values;
+            console.log('Form values:', values);
+            
+            // 提取基本信息字段
+            const baseFields = {
+                nodeType: values['base.nodeType'],
+                nodeCode: values['base.nodeCode'],
+                nodeName: values['base.nodeName'],
+                category: values['base.category'],
+                description: values['base.description']
+            };
+
+            // 移除基本信息字段，处理 UI 配置
+            const uiValues = {...values};
+            delete uiValues['base.nodeType'];
+            delete uiValues['base.nodeCode'];
+            delete uiValues['base.nodeName'];
+            delete uiValues['base.category'];
+            delete uiValues['base.description'];
+
+            // 将扁平的键值对转换为嵌套对象
+            const convertToNestedObject = (flatObj: any) => {
+                const result: any = {};
+                
+                Object.keys(flatObj).forEach(key => {
+                    const parts = key.split('.');
+                    let current = result;
+                    
+                    for (let i = 0; i < parts.length - 1; i++) {
+                        current[parts[i]] = current[parts[i]] || {};
+                        current = current[parts[i]];
+                    }
+                    
+                    current[parts[parts.length - 1]] = flatObj[key];
+                });
+                
+                return result;
+            };
             
             const saveData = {
                 ...selectedNode,
-                nodeType: base.nodeType,
+                ...baseFields,
-                nodeCode: base.nodeCode,
+                uiVariables: convertToNestedObject(uiValues)
-                nodeName: base.nodeName,
-                category: base.category,
-                description: base.description,
-                uiVariables: otherValues  // 其他表单数据
             };
             
+            console.log('Save data:', saveData);
             await service.saveNodeDefinition(saveData);
             message.success('保存成功');
         } catch (error) {