diff --git a/src/pages/flowEditor/components/nodeContent.tsx b/src/pages/flowEditor/components/nodeContent.tsx index 93a2ac1..6e237bd 100644 --- a/src/pages/flowEditor/components/nodeContent.tsx +++ b/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部分*/} +
+ {apiIns.length > 0 && ( +
+ {apiIns.map((input, index) => ( +
+ {input.desc} +
+ ))} +
+ )} + + {apiOuts.length > 0 && ( +
+ {apiOuts.map((output, index) => ( +
+ {output.desc} +
+ ))} +
+ )} +
+ + {/*content栏-data部分*/}
{dataIns.length > 0 && !isStartNode && (
diff --git a/src/pages/flowEditor/node/style/base.module.less b/src/pages/flowEditor/node/style/base.module.less index 2a94b4c..967d9b7 100644 --- a/src/pages/flowEditor/node/style/base.module.less +++ b/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; diff --git a/src/pages/flowEditor/sideBar/config/localNodeData.ts b/src/pages/flowEditor/sideBar/config/localNodeData.ts index ed62eb6..add0cbb 100644 --- a/src/pages/flowEditor/sideBar/config/localNodeData.ts +++ b/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 } + } + }; +});