feat(flowEditor): 新增 JSON与 STR 互转节点并优化节点样式

- 新增 JSON2STR 和 STR2JSON 节点类型
- 为不同节点类型添加自定义参数配置
- 调整节点内容布局，区分 API 和数据部分
-优化节点输入输出端口的样式和位置

src/pages/flowEditor/components/nodeContent.tsx

@@ -57,7 +57,7 @@ const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, data
             id={apiOuts[index].name || `start-output-${index}`}
             style={{
               ...handleStyles.mainSource,
-              top: `${40 + index * 20}px`
+              top: `${45 + index * 20}px`
             }}
           />
         ))}
@@ -69,7 +69,7 @@ const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, data
             id={dataOuts[index].name || `output-${index}`}
             style={{
               ...handleStyles.data,
-              top: `${60 + index * 20}px`
+              top: `${65 + index * 20}px`
             }}
           />
         ))}
@@ -90,7 +90,7 @@ const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, data
             id={apiIns[index].name || `end-input-${index}`}
             style={{
               ...handleStyles.mainTarget,
-              top: `${40 + index * 20}px`
+              top: `${45 + index * 20}px`
             }}
           />
         ))}
@@ -102,7 +102,7 @@ const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, data
             id={dataIns[index].name || `input-${index}`}
             style={{
               ...handleStyles.data,
-              top: `${60 + index * 20}px`
+              top: `${65 + index * 20}px`
             }}
           />
         ))}
@@ -130,7 +130,7 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[]
           id={apiOuts[index].name || `output-${index}`}
           style={{
             ...handleStyles.mainSource,
-            top: `${40 + index * 20}px`
+            top: `${45 + index * 20}px`
           }}
         />
       ))}
@@ -142,7 +142,7 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[]
           id={apiIns[index].name || `input-${index}`}
           style={{
             ...handleStyles.mainTarget,
-            top: `${40 + index * 20}px`
+            top: `${45 + index * 20}px`
           }}
         />
       ))}
@@ -156,7 +156,7 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[]
           id={dataIns[index].name || `input-${index}`}
           style={{
             ...handleStyles.data,
-            top: `${40 + (index + 1) * 20}px`
+            top: `${45 + (index + 1) * 20}px`
           }}
         />
       ))}
@@ -170,7 +170,7 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[]
           id={dataOuts[index].name || `output-${index}`}
           style={{
             ...handleStyles.data,
-            top: `${40 + (index + 1) * 20}px`
+            top: `${45 + (index + 1) * 20}px`
           }}
         />
       ))}
@@ -206,6 +206,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
   const dataOuts = data.parameters?.dataOuts || [];
   const showFooter = data?.component?.customDef || false;
   const footerData = (showFooter && data.component) || {};
+  console.log('apiIns,apiOuts:', apiIns, apiOuts);
 
   // 判断节点类型
   const isStartNode = data.type === 'start';
@@ -214,7 +215,30 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
 
   return (
     <>
-      {/*content栏*/}
+      {/*content栏-api部分*/}
+      <div className={styles['node-content-api']}>
+        {apiIns.length > 0 && (
+          <div className={styles['node-inputs']}>
+            {apiIns.map((input, index) => (
+              <div key={`input-${index}`} className={styles['node-input-label']}>
+                {input.desc}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {apiOuts.length > 0 && (
+          <div className={styles['node-outputs-api']}>
+            {apiOuts.map((output, index) => (
+              <div key={`output-${index}`} className={styles['node-input-label']}>
+                {output.desc}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/*content栏-data部分*/}
       <div className={styles['node-content']}>
         {dataIns.length > 0 && !isStartNode && (
           <div className={styles['node-inputs']}>

src/pages/flowEditor/node/style/base.module.less

@@ -17,12 +17,13 @@
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   }
 
-  .node-content {
+  .node-content,
+  .node-content-api {
     display: flex;
     background-color: #ffffff;
     color: #000000;
-    padding: 15px 5px;
-    min-height: 10px;
+    padding: 0 5px;
+
 
     .node-inputs,
     .node-outputs {
@@ -44,6 +45,11 @@
     }
   }
 
+  .node-content {
+    padding: 15px 5px;
+    min-height: 10px;
+  }
+
   .node-footer {
     background-color: #ffffff;
     color: #000000;

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

@@ -14,6 +14,38 @@ const defaultParameters = {
   dataIns: [],
   dataOuts: []
 };
+const json2strParameters = {
+  apiIns: [{
+    name: 'start',
+    desc: 'JSON',
+    dataType: 'JSON',
+    defaultValue: ''
+  }],
+  apiOuts: [{
+    name: 'done',
+    desc: 'STR',
+    dataType: 'STR',
+    defaultValue: ''
+  }],
+  dataIns: [],
+  dataOuts: []
+};
+const str2jsonParameters = {
+  apiIns: [{
+    name: 'start',
+    desc: 'STR',
+    dataType: 'STR',
+    defaultValue: ''
+  }],
+  apiOuts: [{
+    name: 'done',
+    desc: 'JSON',
+    dataType: 'JSON',
+    defaultValue: ''
+  }],
+  dataIns: [],
+  dataOuts: []
+};
 
 // 定义节点基本信息
 const nodeDefinitions = [
@@ -31,16 +63,28 @@ const nodeDefinitions = [
   { nodeName: '结果展示', nodeType: 'RESULT', nodeGroup: 'common', icon: 'IconInteraction' },
   { nodeName: '图片展示', nodeType: 'IMAGE', nodeGroup: 'common', icon: 'IconImage' },
   { nodeName: '代码编辑器', nodeType: 'CODE', nodeGroup: 'common', icon: 'IconCode' },
-  { nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common', icon: 'IconCloudDownload' },
+  { nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common', icon: 'IconCloudDownload' }
 ];
 
 // 通过映射生成完整的节点数据数组
-export const localNodeData = nodeDefinitions.map(({ nodeName, nodeType, nodeGroup, icon }) => ({
-  nodeName,
-  nodeType,
-  nodeGroup,
-  icon,
-  data: {
-    parameters: { ...defaultParameters }
+export const localNodeData = nodeDefinitions.map(({ nodeName, nodeType, nodeGroup, icon }) => {
+  let parameters = defaultParameters;
+
+  // 为特定节点类型使用特殊的参数配置
+  if (nodeType === 'JSON2STR') {
+    parameters = json2strParameters;
+  }
+  else if (nodeType === 'STR2JSON') {
+    parameters = str2jsonParameters;
   }
-}));
+
+  return {
+    nodeName,
+    nodeType,
+    nodeGroup,
+    icon,
+    data: {
+      parameters: { ...parameters }
+    }
+  };
+});