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
+ )}
>
);
};