feat: 修复图片展示组件

src/pages/flowEditor/sideBar/config/localNodeData.ts

@@ -84,6 +84,7 @@ const imageParameters = {
     defaultValue: ''
   }],
   dataIns: [{
+    id: 'in',
     name: 'in',
     desc: 'url',
     dataType: 'STRING',

src/utils/convertFlowData.ts

@@ -4,6 +4,28 @@ import LoopNode from '@/components/FlowEditor/node/loopNode/LoopNode';
 import { updateEventNodeList } from '@/store/ideContainer';
 import { resolveNodeComponent } from '@/utils/flow/nodeRegistry';
 
+const runtimeToEditorNodeTypeMap: Record<string, string> = {
+  SHOW_IMAGE: 'IMAGE',
+  SHOW_RESULT: 'RESULT',
+  JSON_CONVERT: 'JSONCONVERT',
+};
+
+const editorToRuntimeNodeTypeMap: Record<string, string> = {
+  IMAGE: 'SHOW_IMAGE',
+  RESULT: 'SHOW_RESULT',
+  JSONCONVERT: 'JSON_CONVERT',
+};
+
+export const toEditorNodeType = (type?: string) => {
+  if (!type) return type;
+  return runtimeToEditorNodeTypeMap[type] || type;
+};
+
+export const toRuntimeComponentType = (type?: string) => {
+  if (!type) return type;
+  return editorToRuntimeNodeTypeMap[type] || type;
+};
+
 /**
  * 将提供的数据结构转换为适用于 flow editor 的 nodes 和 edges
  * @param flowData - 原始数据结构
@@ -117,17 +139,18 @@ export const convertFlowData = (flowData: any, useDefault = true) => {
 
     // 确定节点类型
     let nodeType = 'BASIC';
+    const componentType = toEditorNodeType(nodeConfig.component?.type);
     if (nodeId.includes('start')) {
       nodeType = 'start';
     } else if (nodeId.includes('end')) {
       nodeType = 'end';
     } else if (
-      nodeConfig.component?.type === 'LOOP_START' ||
+      componentType === 'LOOP_START' ||
-      nodeConfig.component?.type === 'LOOP_END'
+      componentType === 'LOOP_END'
     ) {
       nodeType = 'LOOP';
     } else {
-      nodeType = nodeConfig.component?.type || 'BASIC';
+      nodeType = componentType || 'BASIC';
     }
     // 解析位置信息
     const position = nodeConfig.position || { x: 0, y: 0 };
@@ -145,13 +168,13 @@ export const convertFlowData = (flowData: any, useDefault = true) => {
           dataIns: getNodeDataIns(nodeConfig),
           dataOuts: nodeConfig.dataOuts || [],
         },
-        type: nodeConfig.component?.type || nodeType,
+        type: componentType || nodeType,
       },
     };
 
     // 添加组件标识信息
     if (nodeConfig.component) {
-      node.data.component = { ...nodeConfig.component };
+      node.data.component = { ...nodeConfig.component, type: componentType };
       node.data.compId = nodeConfig.component.compId;
     }
 
@@ -470,7 +493,7 @@ export const revertFlowData = (nodes: any[], edges: any[]) => {
       // 处理 component 信息
       if (node.data?.component) {
         nodeConfig.component = {
-          type: nodeType,
+          type: toRuntimeComponentType(nodeType),
           compIdentifier: node.data.component.compIdentifier || '',
           compInstanceIdentifier:
             node.data.component.compInstanceIdentifier || '',
@@ -481,7 +504,7 @@ export const revertFlowData = (nodes: any[], edges: any[]) => {
       } else if (nodeType !== 'start' && nodeType !== 'end') {
         // 对于非 start/end 节点，添加基本的 component 信息
         nodeConfig.component = {
-          type: nodeType,
+          type: toRuntimeComponentType(nodeType),
         };
       }
       if (['BASIC', 'SUB'].includes(nodeType))
@@ -624,10 +647,13 @@ export const reverseConvertFlowData = (
           }),
         };
       } else if (node.data?.component) {
-        nodeConfig.component = { ...node.data.component };
+        nodeConfig.component = {
+          ...node.data.component,
+          type: toRuntimeComponentType(node.data.component.type || node.type),
+        };
       } else {
         nodeConfig.component = {
-          type: node.type,
+          type: toRuntimeComponentType(node.type),
         };
       }