perf: 优化工作流的节点UI和交互

easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useRefOptions.svelte.ts

@@ -1,6 +1,7 @@
 import {type Edge, type Node, useNodesData, useStore} from '@xyflow/svelte';
 import type {Parameter} from '#types';
-import {getCurrentNodeId} from '#components/utils/NodeUtils';
+import {getCurrentNodeId, getOptions} from '#components/utils/NodeUtils';
+import {nodeIcons} from '../../consts';
 
 const fillRefNodeIds = (refNodeIds: string[], currentNodeId: string, edges: Edge[]) => {
     for (const edge of edges) {
@@ -11,51 +12,82 @@ const fillRefNodeIds = (refNodeIds: string[], currentNodeId: string, edges: Edge
     }
 };
 
-const getChildren = (params: any, parentId: string, nodeIsChildren: boolean) => {
+const getChildren = (params: any, parentId: string, nodeIsChildren: boolean, nodeType: string) => {
     if (!params || params.length === 0) return [];
-    return params.map((param: any) => ({
-        label:
-            param.name +
-            (nodeIsChildren
-                ? ` (Array<${param.dataType || 'String'}>)`
-                : ` (${param.dataType || 'String'})`),
-        value: parentId + '.' + param.name,
-        children: getChildren(param.children, parentId + '.' + param.name, nodeIsChildren)
-    }));
+    return params.map((param: any) => {
+        const dataType = nodeIsChildren
+            ? `Array<${param.dataType || 'String'}>`
+            : (param.dataType || 'String');
+        return {
+            label: param.name,
+            dataType: dataType,
+            value: parentId + '.' + param.name,
+            selectable: true,
+            nodeType: nodeType,
+            children: getChildren(param.children, parentId + '.' + param.name, nodeIsChildren, nodeType)
+        };
+    });
 };
 
 const nodeToOptions = (node: Node, nodeIsChildren: boolean, currentNode: Node) => {
+    const options = getOptions();
+    let icon = nodeIcons[node.type];
+    if (!icon && options?.customNodes && options.customNodes[node.type]) {
+        icon = options.customNodes[node.type].icon;
+    }
+    
+    // 如果仍然获取不到，尝试使用 data.icon (作为回退)
+    if (!icon && node.data && node.data.icon) {
+        icon = node.data.icon as string;
+    }
+
+    const title = node.data.title;
+
     if (node.type === 'startNode') {
         const parameters = node.data.parameters as Array<Parameter>;
         const children = [];
         if (parameters)
             for (const parameter of parameters) {
+                const dataType = nodeIsChildren
+                    ? `Array<${parameter.dataType || 'String'}>`
+                    : (parameter.dataType || 'String');
                 children.push({
-                    label:
-                        parameter.name +
-                        (nodeIsChildren
-                            ? ` (Array<${parameter.dataType || 'String'}>)`
-                            : ` (${parameter.dataType || 'String'})`),
-                    value: node.id + '.' + parameter.name
+                    label: parameter.name,
+                    dataType: dataType,
+                    value: node.id + '.' + parameter.name,
+                    selectable: true,
+                    nodeType: node.type
                 });
             }
         return {
-            label: node.data.title,
+            label: title,
+            icon: icon,
             value: node.id,
+            selectable: false,
+            nodeType: node.type,
             children
         };
     } else if (node.type === 'loopNode' && currentNode.parentId) {
         return {
-            label: node.data.title,
+            label: title,
+            icon: icon,
             value: node.id,
+            selectable: false,
+            nodeType: node.type,
             children: [
                 {
                     label: 'loopItem',
-                    value: node.id + '.loopItem'
+                    dataType: 'Any',
+                    value: node.id + '.loopItem',
+                    selectable: true,
+                    nodeType: node.type
                 },
                 {
-                    label: 'index (Number)',
-                    value: node.id + '.index'
+                    label: 'index',
+                    dataType: 'Number',
+                    value: node.id + '.index',
+                    selectable: true,
+                    nodeType: node.type
                 }
             ]
         };
@@ -63,9 +95,12 @@ const nodeToOptions = (node: Node, nodeIsChildren: boolean, currentNode: Node) =
         const outputDefs = node.data.outputDefs;
         if (outputDefs) {
             return {
-                label: node.data.title,
+                label: title,
+                icon: icon,
                 value: node.id,
-                children: getChildren(outputDefs, node.id, nodeIsChildren)
+                selectable: false,
+                nodeType: node.type,
+                children: getChildren(outputDefs, node.id, nodeIsChildren, node.type)
             };
         }
     }