diff --git a/src/pages/flowEditor/components/nodeContent.tsx b/src/pages/flowEditor/components/nodeContent.tsx index 9dbe978..edecb8e 100644 --- a/src/pages/flowEditor/components/nodeContent.tsx +++ b/src/pages/flowEditor/components/nodeContent.tsx @@ -15,84 +15,103 @@ interface NodeContentData { [key: string]: any; } +// 定义通用的句柄样式 +const handleStyles = { + mainSource: { + background: '#2290f6', + width: '8px', + height: '8px', + border: '2px solid #fff', + boxShadow: '0 0 4px rgba(0,0,0,0.2)' + }, + mainTarget: { + background: '#2290f6', + width: '8px', + height: '8px', + border: '2px solid #fff', + boxShadow: '0 0 4px rgba(0,0,0,0.2)' + }, + data: { + background: '#555', + width: '6px', + height: '6px', + border: '1px solid #fff', + boxShadow: '0 0 2px rgba(0,0,0,0.2)' + } +}; + // 渲染特殊节点(开始/结束节点)的句柄 const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, dataIns: any[], dataOuts: any[], apiIns: any[], apiOuts: any[]) => { - return ( - <> - {isStartNode ? - apiOuts.map((_, index) => ( + const renderStartNodeHandles = () => { + if (!isStartNode) return null; + + return ( + <> + {apiOuts.map((_, index) => ( + ))} + {dataOuts.map((_, index) => ( + - )) - : - apiIns.map((_, index) => ( + ))} + + ); + }; + + const renderEndNodeHandles = () => { + if (!isEndNode) return null; + + return ( + <> + {apiIns.map((_, index) => ( - )) - } - - {/* 为特殊节点的参数也添加句柄 */} - {isStartNode && dataOuts.map((_, index) => ( - - ))} + ))} + {dataIns.map((_, index) => ( + + ))} + + ); + }; - {isEndNode && dataIns.map((_, index) => ( - - ))} + return ( + <> + {renderStartNodeHandles()} + {renderEndNodeHandles()} ); }; @@ -103,74 +122,54 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[] <> {apiOuts.map((_, index) => ( ))} {apiIns.map((_, index) => ( ))} {/* 输入参数连接端点 */} {dataIns.map((_, index) => ( ))} {/* 输出参数连接端点 */} {dataOuts.map((_, index) => ( ))} @@ -206,7 +205,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => { {dataOuts.length > 0 && !isEndNode && (
{dataOuts.map((output, index) => ( -
+
{output.name || `输出${index + 1}`}
))} @@ -229,4 +228,4 @@ const NodeContent = ({ data }: { data: NodeContentData }) => { ); }; -export default NodeContent; \ No newline at end of file +export default NodeContent;