diff --git a/src/pages/flowEditor/components/nodeContentOther.tsx b/src/pages/flowEditor/components/nodeContentOther.tsx index a593acd..556b863 100644 --- a/src/pages/flowEditor/components/nodeContentOther.tsx +++ b/src/pages/flowEditor/components/nodeContentOther.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import styles from '@/components/FlowEditor/node/style/baseOther.module.less'; import { Handle, Position, useStore } from '@xyflow/react'; import { deserializeValue, formatDataType, isJSON } from '@/utils/common'; @@ -14,6 +14,7 @@ interface NodeContentData { }; showFooter?: boolean; type?: string; + id?: string; [key: string]: any; } @@ -119,10 +120,40 @@ const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, data ); }; +// 获取连接到特定 API 句柄的 edges +const getConnectedEdgesForHandle = (edges: any[], nodeId: string, handleId: string, handleType: 'source' | 'target') => { + return edges.filter(edge => { + if (handleType === 'target') { + return edge.targetHandle === handleId; + } + else { + return edge.sourceHandle === handleId; + } + }); +}; + +// 根据 apiIns 中的 fieldIns/fieldOuts 获取对应的 dataIns/dataOuts +const getDataFieldsForApi = (apiItem: any, dataFields: any[], type: string) => { + if (!apiItem.fieldIns && !apiItem.fieldOuts) return []; + + const fieldNames = type === 'in' ? apiItem.fieldIns : apiItem.fieldOuts; + return fieldNames + .map((fieldName: string) => dataFields.find(df => df.name === fieldName || df.id === fieldName)) + .filter(Boolean); +}; + // 渲染普通节点的句柄 -const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[], apiOuts: any[]) => { +const renderRegularNodeHandles = ( + dataIns: any[], + dataOuts: any[], + apiIns: any[], + apiOuts: any[], + connectedDataIns: any[], + connectedDataOuts: any[] +) => { return ( <> + {/* API 输出连接点 */} {apiOuts.map((_, index) => ( ))} + + {/* API 输入连接点 */} {apiIns.map((_, index) => ( ))} - {/* 输入参数连接端点 */} - {dataIns.map((_, index) => ( + {/* Data 输入参数连接端点 - 只渲染已连接API的data字段 */} + {connectedDataIns.map((dataIn, index) => ( ))} - {/* 输出参数连接端点 */} - {dataOuts.map((_, index) => ( + {/* Data 输出参数连接端点 - 只渲染已连接API的data字段 */} + {connectedDataOuts.map((dataOut, index) => ( ))} @@ -222,18 +255,46 @@ const formatTitle = (text) => { const NodeContent = ({ data }: { data: NodeContentData }) => { const { eventListOld } = useSelector((state) => state.ideContainer); + + // 使用 useStore 获取 edges 信息 + const edges = useStore((state) => state.edges); + const apiIns = data.parameters?.apiIns || []; const apiOuts = data.parameters?.apiOuts || []; const dataIns = data.parameters?.dataIns || []; const dataOuts = data.parameters?.dataOuts || []; const showFooter = formatFooter(data.component) || false; const footerData = (showFooter && data.component) || {}; + const nodeId = data.id; // 判断节点类型 const isStartNode = data.type === 'start'; const isEndNode = data.type === 'end'; const isSpecialNode = isStartNode || isEndNode; + // 获取连接到当前节点 API 句柄的 data 字段 + const connectedDataFields = useMemo(() => { + const connectedIns: any[] = []; + const connectedOuts: any[] = []; + + // 通过api数据获取对应的data输入输出 + apiIns.forEach(apiIn => { + const handleIdIn = apiIn.name || apiIn.id; + const hasConnectionIn = getConnectedEdgesForHandle(edges, nodeId, handleIdIn, 'target').length > 0; + + if (hasConnectionIn) { + const relatedDataIn = getDataFieldsForApi(apiIn, dataIns, 'in'); + connectedIns.push(...relatedDataIn); + + const relatedDataOut = getDataFieldsForApi(apiIn, dataOuts, 'out'); + // console.log("relatedDataOut:",relatedDataOut); + connectedOuts.push(...relatedDataOut); + } + }); + + return { connectedIns, connectedOuts }; + }, [edges, nodeId, apiIns, apiOuts, dataIns, dataOuts]); + return ( <> {/*content栏-api部分*/} @@ -260,36 +321,36 @@ const NodeContent = ({ data }: { data: NodeContentData }) => { )} - {(dataIns.length > 0 || dataOuts.length > 0) && ( + + {/* Data 区域 - 仅当有连接的 API 时显示对应的 data 字段 */} + {(connectedDataFields.connectedIns.length > 0 || connectedDataFields.connectedOuts.length > 0) && ( <> {/*分割*/} -
- -
+
{/*content栏-data部分*/}
-
- {dataIns.map((input, index) => ( -
- {input.id || `输入${index + 1}`} {formatDataType(input.dataType)} - -
- ))} -
- - {dataOuts.length > 0 && !isEndNode && ( + {/* Data 输入 */} + {connectedDataFields.connectedIns.length > 0 && ( +
+ {connectedDataFields.connectedIns.map((input, index) => ( +
+ + {input.name || input.id || `输入${index + 1}`} {formatDataType(input.dataType)} + +
+ ))} +
+ )} + + {/* Data 输出 */} + {connectedDataFields.connectedOuts.length > 0 && !isEndNode && (
- {dataOuts.map((output, index) => ( + {connectedDataFields.connectedOuts.map((output, index) => (
- {formatDataType(output.dataType)} {output.id || `输出${index + 1}`} + + {formatDataType(output.dataType)} {output.name || output.id || `输出${index + 1}`}
))} @@ -310,7 +371,14 @@ const NodeContent = ({ data }: { data: NodeContentData }) => { {/* 根据节点类型渲染不同的句柄 */} {isSpecialNode ? renderSpecialNodeHandles(isStartNode, isEndNode, dataIns, dataOuts, apiIns, apiOuts) - : renderRegularNodeHandles(dataIns, dataOuts, apiIns, apiOuts)} + : renderRegularNodeHandles( + dataIns, + dataOuts, + apiIns, + apiOuts, + connectedDataFields.connectedIns, + connectedDataFields.connectedOuts + )} ); };