1

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

@@ -344,6 +344,32 @@ const NodeDesignForm: React.FC = () => {
             delete uiValues['base.category'];
             delete uiValues['base.description'];
 
+            // 处理颜色值转换为十六进制
+            const processColorValue = (value: any): any => {
+                if (!value || typeof value !== 'object') return value;
+                
+                // 如果是 ColorPicker 的值，转换为十六进制
+                if (value.metaColor) {
+                    const { r, g, b } = value.metaColor;
+                    const toHex = (n: number): string => {
+                        const hex = n.toString(16);
+                        return hex.length === 1 ? '0' + hex : hex;
+                    };
+                    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+                }
+                
+                // 如果是普通对象，递归处理
+                if (typeof value === 'object') {
+                    const result: any = {};
+                    Object.keys(value).forEach(key => {
+                        result[key] = processColorValue(value[key]);
+                    });
+                    return result;
+                }
+                
+                return value;
+            };
+
             // 将扁平的键值对转换为嵌套对象
             const convertToNestedObject = (flatObj: any) => {
                 const result: any = {};
@@ -357,7 +383,9 @@ const NodeDesignForm: React.FC = () => {
                         current = current[parts[i]];
                     }
                     
-                    current[parts[parts.length - 1]] = flatObj[key];
+                    // 处理颜色值
+                    const value = processColorValue(flatObj[key]);
+                    current[parts[parts.length - 1]] = value;
                 });
                 
                 return result;
@@ -392,6 +420,25 @@ const NodeDesignForm: React.FC = () => {
         // 如果是编辑模式且有保存的数据，合并到 schema
         if (isEdit && editData?.uiVariables) {
             console.log('开始合并 UI 配置数据');
+
+            // 处理颜色值
+            const processColorValue = (value: any): string => {
+                if (!value || typeof value !== 'object') return value;
+                
+                // 如果是颜色对象结构
+                if (value.metaColor) {
+                    const { r, g, b } = value.metaColor;
+                    // 转换为十六进制
+                    const toHex = (n: number): string => {
+                        const hex = n.toString(16);
+                        return hex.length === 1 ? '0' + hex : hex;
+                    };
+                    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+                }
+                
+                return value;
+            };
+
             const mergeUiVariables = (schemaObj: any, uiData: any, parentPath = ''): any => {
                 if (!schemaObj || typeof schemaObj !== 'object') return schemaObj;
                 console.log('正在处理 schema:', schemaObj);
@@ -400,6 +447,17 @@ const NodeDesignForm: React.FC = () => {
                 
                 const result = {...schemaObj};
 
+                // 颜色字段路径列表
+                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 (result.properties) {
                     Object.keys(result.properties).forEach(key => {
                         const currentPath = parentPath ? `${parentPath}.${key}` : key;
@@ -418,7 +476,12 @@ const NodeDesignForm: React.FC = () => {
                             const value = currentPath.split('.').reduce((obj, key) => obj?.[key], uiData);
                             console.log('属性值:', value);
                             if (value !== undefined) {
-                                result.properties[key].default = value;
+                                // 如果是颜色字段，处理颜色值
+                                if (colorFields.some(field => currentPath.endsWith(field))) {
+                                    result.properties[key].default = processColorValue(value);
+                                } else {
+                                    result.properties[key].default = value;
+                                }
                             }
                         }