feat(flow): 区分API连接和数据连接类型

- 在连接数据中添加lineType字段,用于标识连接类型(api或data)
- 禁止在数据类型连接线上添加节点- 数据类型连接线增加数据类型一致性校验
- 更新应用间连接的默认lineType为api
-优化连接线按钮显示逻辑,仅在非数据连接时显示
-修复updateAppFlowData参数使用错误的问题
master
钟良源 3 months ago
parent 6c471271db
commit fec2dd2af9

@ -15,7 +15,14 @@ import { localNodeData } from '@/pages/flowEditor/sideBar/config/localNodeData';
import { useAlignmentGuidelines } from '@/hooks/useAlignmentGuidelines';
import LocalNode from '@/components/FlowEditor/node/localNode/LocalNode';
import LoopNode from '@/components/FlowEditor/node/loopNode/LoopNode';
import { updateCanvasDataMap, resetNodeStatus, updateIsRunning, updateEventListOld, addRuntimeLog, clearRuntimeLogs } from '@/store/ideContainer';
import {
updateCanvasDataMap,
resetNodeStatus,
updateIsRunning,
updateEventListOld,
addRuntimeLog,
clearRuntimeLogs
} from '@/store/ideContainer';
import {
validateAllNodes,
showValidationErrors,
@ -148,6 +155,30 @@ export const useFlowCallbacks = (
// 创建带有事件信息的连接
const edgeParams = { ...params, type: 'custom' };
// 添加lineType字段用于区分API连接和数据连接
edgeParams.data = {
...edgeParams.data,
lineType: sourceHandleType // 'api' 或 'data'
};
// 对于数据类型的边需要额外验证dataIns和dataOuts中的数据类型是否一致
if (sourceHandleType === 'data') {
// 查找源节点的dataOuts中对应的数据
const sourceDataOut = (sourceParams.dataOuts || []).find((dataOut: any) =>
dataOut.name === params.sourceHandle || dataOut.id === params.sourceHandle);
// 查找目标节点的dataIns中对应的数据
const targetDataIn = (targetParams.dataIns || []).find((dataIn: any) =>
dataIn.name === params.targetHandle || dataIn.id === params.targetHandle);
// 验证数据类型是否一致
if (sourceDataOut && targetDataIn && sourceDataOut.dataType !== targetDataIn.dataType) {
console.warn('数据类型不匹配,源节点数据类型:', sourceDataOut.dataType, '目标节点数据类型:', targetDataIn.dataType);
Message.warning(`数据类型不匹配,源节点数据类型: ${sourceDataOut.dataType},目标节点数据类型: ${targetDataIn.dataType}`);
return edgesSnapshot; // 不创建连接
}
}
// 检查源节点和目标节点是否都有事件信息
const sourceApi = (sourceParams.apiOuts || []).find((api: any) =>
api.name === params.sourceHandle || api.id === params.sourceHandle);
@ -159,6 +190,7 @@ export const useFlowCallbacks = (
// 如果目标节点的topic是**empty**或没有topic则使用源节点的事件信息
if (!targetApi || !targetApi.topic || targetApi.topic.includes('**empty**')) {
edgeParams.data = {
...edgeParams.data,
displayData: {
name: sourceApi.name,
eventId: sourceApi.eventId,
@ -171,6 +203,7 @@ export const useFlowCallbacks = (
!sourceApi.topic.includes('**empty**') &&
!targetApi.topic.includes('**empty**')) {
edgeParams.data = {
...edgeParams.data,
displayData: {
name: sourceApi.name,
eventId: sourceApi.eventId,
@ -182,6 +215,7 @@ export const useFlowCallbacks = (
// 如果源节点没有事件信息,但目标节点有
else if (targetApi && targetApi.topic && !targetApi.topic.includes('**empty**')) {
edgeParams.data = {
...edgeParams.data,
displayData: {
name: targetApi.name,
eventId: targetApi.eventId,
@ -1256,7 +1290,7 @@ export const useFlowCallbacks = (
eventId: Array.from(new Set(item.eventId))
}));
try {
updateAppFlowData(appFlowParams);
updateAppFlowData(appEventParams);
if (appEventParams.length > 0) {
for (const item of appEventParams) {
await sleep(500);

@ -11,6 +11,7 @@ type DataDisplayEdgeData = {
name?: string;
topic?: string;
eventId?: string;
lineType?: string; // 添加lineType属性
};
const DataDisplayEdge: React.FC<EdgeProps> = ({
@ -46,11 +47,21 @@ const DataDisplayEdge: React.FC<EdgeProps> = ({
// 从数据中获取要显示的信息
const displayData: DataDisplayEdgeData = data?.displayData || {};
// 获取lineType
const lineType = data?.lineType || 'data'; // 默认为data类型
// 使用useReactFlow钩子获取setEdges方法
const { setEdges } = useReactFlow();
// 边点击处理函数
const handleEdgeAddNode = (e) => {
// 如果是数据类型边线,不允许添加节点
if (lineType === 'data') {
console.warn('数据类型边线上不允许添加节点');
Message.warning('数据类型连接线上不允许添加节点');
return;
}
// 更新边的数据,触发边上添加节点的流程
setEdges(eds => eds.map(edge => {
if (edge.id === id) {
@ -190,7 +201,7 @@ const DataDisplayEdge: React.FC<EdgeProps> = ({
</div>
)}
{hovered && Object.keys(displayData).length === 0 && Object.keys(displayData).length === 0 && (
{hovered && Object.keys(displayData).length === 0 && lineType !== 'data' && (
<EdgeAddNodeButton
onClick={(e) => handleEdgeAddNode(e)}
/>

@ -120,6 +120,7 @@ export const convertAppFlowData = (appFlowData: any[]) => {
targetHandle: targetEvent.eventId,
type: 'custom',
data: {
lineType: 'api', // 应用间连接始终是API类型
displayData: {
name: sourceEvent.eventName,
eventId: sourceEvent.eventId,

Loading…
Cancel
Save