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 { useAlignmentGuidelines } from '@/hooks/useAlignmentGuidelines';
import LocalNode from '@/components/FlowEditor/node/localNode/LocalNode'; import LocalNode from '@/components/FlowEditor/node/localNode/LocalNode';
import LoopNode from '@/components/FlowEditor/node/loopNode/LoopNode'; 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 { import {
validateAllNodes, validateAllNodes,
showValidationErrors, showValidationErrors,
@ -148,6 +155,30 @@ export const useFlowCallbacks = (
// 创建带有事件信息的连接 // 创建带有事件信息的连接
const edgeParams = { ...params, type: 'custom' }; 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) => const sourceApi = (sourceParams.apiOuts || []).find((api: any) =>
api.name === params.sourceHandle || api.id === params.sourceHandle); api.name === params.sourceHandle || api.id === params.sourceHandle);
@ -159,6 +190,7 @@ export const useFlowCallbacks = (
// 如果目标节点的topic是**empty**或没有topic则使用源节点的事件信息 // 如果目标节点的topic是**empty**或没有topic则使用源节点的事件信息
if (!targetApi || !targetApi.topic || targetApi.topic.includes('**empty**')) { if (!targetApi || !targetApi.topic || targetApi.topic.includes('**empty**')) {
edgeParams.data = { edgeParams.data = {
...edgeParams.data,
displayData: { displayData: {
name: sourceApi.name, name: sourceApi.name,
eventId: sourceApi.eventId, eventId: sourceApi.eventId,
@ -171,6 +203,7 @@ export const useFlowCallbacks = (
!sourceApi.topic.includes('**empty**') && !sourceApi.topic.includes('**empty**') &&
!targetApi.topic.includes('**empty**')) { !targetApi.topic.includes('**empty**')) {
edgeParams.data = { edgeParams.data = {
...edgeParams.data,
displayData: { displayData: {
name: sourceApi.name, name: sourceApi.name,
eventId: sourceApi.eventId, eventId: sourceApi.eventId,
@ -182,6 +215,7 @@ export const useFlowCallbacks = (
// 如果源节点没有事件信息,但目标节点有 // 如果源节点没有事件信息,但目标节点有
else if (targetApi && targetApi.topic && !targetApi.topic.includes('**empty**')) { else if (targetApi && targetApi.topic && !targetApi.topic.includes('**empty**')) {
edgeParams.data = { edgeParams.data = {
...edgeParams.data,
displayData: { displayData: {
name: targetApi.name, name: targetApi.name,
eventId: targetApi.eventId, eventId: targetApi.eventId,
@ -564,7 +598,7 @@ export const useFlowCallbacks = (
console.warn('在应用编排模式下不允许删除节点'); console.warn('在应用编排模式下不允许删除节点');
return; return;
} }
// 开始和结束节点不允许删除 // 开始和结束节点不允许删除
if (node.type === 'start' || node.type === 'end') { if (node.type === 'start' || node.type === 'end') {
console.warn('开始和结束节点不允许删除'); console.warn('开始和结束节点不允许删除');
@ -660,7 +694,7 @@ export const useFlowCallbacks = (
console.warn('在应用编排模式下不允许删除边'); console.warn('在应用编排模式下不允许删除边');
return; return;
} }
setEdges((eds: Edge[]) => eds.filter((e) => e.id !== edge.id)); setEdges((eds: Edge[]) => eds.filter((e) => e.id !== edge.id));
// 删除边后记录历史 // 删除边后记录历史
@ -1256,7 +1290,7 @@ export const useFlowCallbacks = (
eventId: Array.from(new Set(item.eventId)) eventId: Array.from(new Set(item.eventId))
})); }));
try { try {
updateAppFlowData(appFlowParams); updateAppFlowData(appEventParams);
if (appEventParams.length > 0) { if (appEventParams.length > 0) {
for (const item of appEventParams) { for (const item of appEventParams) {
await sleep(500); await sleep(500);
@ -1313,7 +1347,7 @@ export const useFlowCallbacks = (
animationProgress: 0 animationProgress: 0
} }
}))); })));
// 清空当前应用的运行日志 // 清空当前应用的运行日志
dispatch(clearRuntimeLogs({ appId: currentAppData.id })); dispatch(clearRuntimeLogs({ appId: currentAppData.id }));
} }

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

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

Loading…
Cancel
Save