fix(flow): 更新事件句柄标识符以使用 eventId

src/hooks/useFlowCallbacks.ts

@@ -1105,6 +1105,7 @@ export const useFlowCallbacks = (
     if (params.eventListenes.length > 0 || params.eventSends.length > 0) {
       return params;
     }
+    else return null;
   };
   const upDatePublish = async (revertedData) => {
     const { currentAppData } = store.getState().ideContainer;
@@ -1208,8 +1209,8 @@ export const useFlowCallbacks = (
       const eventMap = new Map();
       edges.forEach((edge: any) => {
         // 应用组件的桩点id就是事件id
-        const sourceId = edge.source;
+        const sourceId = edge.sourceHandle;
-        const targetId = edge.target;
+        const targetId = edge.targetHandle;
         const topic = edge.data.displayData.topic;
 
         if (eventMap.has(topic)) {
@@ -1231,8 +1232,6 @@ export const useFlowCallbacks = (
         eventId: Array.from(new Set(item.eventId))
       }));
 
-      console.log('appEventParams:', appEventParams);
-
       updateAppFlowData(appFlowParams);
       if (appEventParams.length > 0) {
         for (const item of appEventParams) {

src/pages/flowEditor/components/nodeContentApp.tsx

@@ -43,82 +43,6 @@ const handleStyles = {
   }
 };
 
-// 渲染特殊节点（开始/结束节点）的句柄
-const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, dataIns: any[], dataOuts: any[], apiIns: any[], apiOuts: any[]) => {
-  const renderStartNodeHandles = () => {
-    if (!isStartNode) return null;
-
-    return (
-      <>
-        {apiOuts.map((_, index) => (
-          <Handle
-            key={`start-output-handle-${index}`}
-            type="source"
-            position={Position.Right}
-            id={apiOuts[index].name || `start-output-${index}`}
-            style={{
-              ...handleStyles.mainSource,
-              top: `${35 + index * 20}px`
-            }}
-          />
-        ))}
-        {dataOuts.length > 0 && dataOuts.map((_, index) => (
-          <Handle
-            key={`output-handle-${index}`}
-            type="source"
-            position={Position.Right}
-            id={dataOuts[index].name || `output-${index}`}
-            style={{
-              ...handleStyles.data,
-              top: `${70 + apiOuts.length * 20 + index * 20}px`
-            }}
-          />
-        ))}
-      </>
-    );
-  };
-
-  const renderEndNodeHandles = () => {
-    if (!isEndNode) return null;
-
-    return (
-      <>
-        {apiIns.map((_, index) => (
-          <Handle
-            key={`end-input-handle-${index}`}
-            type="target"
-            position={Position.Left}
-            id={apiIns[index].name || `end-input-${index}`}
-            style={{
-              ...handleStyles.mainTarget,
-              top: `${35 + index * 20}px`
-            }}
-          />
-        ))}
-        {dataIns.length > 0 && dataIns.map((_, index) => (
-          <Handle
-            key={`input-handle-${index}`}
-            type="target"
-            position={Position.Left}
-            id={dataIns[index].name || `input-${index}`}
-            style={{
-              ...handleStyles.data,
-              top: `${70 + apiIns.length * 20 + index * 20}px`
-            }}
-          />
-        ))}
-      </>
-    );
-  };
-
-  return (
-    <>
-      {renderStartNodeHandles()}
-      {renderEndNodeHandles()}
-    </>
-  );
-};
-
 // 渲染普通节点的句柄
 const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[], apiOuts: any[]) => {
   return (
@@ -128,7 +52,7 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[]
           key={`api-output-handle-${index}`}
           type="source"
           position={Position.Right}
-          id={apiOuts[index].name || apiOuts[index].id || `output-${index}`}
+          id={apiOuts[index].eventId || `output-${index}`}
           style={{
             ...handleStyles.mainSource,
             top: `${35 + index * 20}px`
@@ -140,7 +64,7 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[]
           key={`api-input-handle-${index}`}
           type="target"
           position={Position.Left}
-          id={apiIns[index].name || apiIns[index].id || `input-${index}`}
+          id={apiIns[index].eventId || `input-${index}`}
           style={{
             ...handleStyles.mainTarget,
             top: `${35 + index * 20}px`
@@ -294,11 +218,6 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
   // 获取事件分组信息
   const eventGroups = useEventGroups(data.component);
 
-  // 判断节点类型
-  const isStartNode = data.type === 'start';
-  const isEndNode = data.type === 'end';
-  const isSpecialNode = isStartNode || isEndNode;
-
   return (
     <>
       {/*content栏-api部分*/}
@@ -312,7 +231,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
                 const group = findApiGroupByTopic(input, eventGroups);
                 return (
                   <div
-                    key={input.id || `input-${index}`}
+                    key={input.eventId || `input-${index}`}
                     className={styles['node-input-label']}
                     style={{
                       color: group ? group.color : '#000'
@@ -332,7 +251,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
                 const group = findApiGroupByTopic(output, eventGroups);
                 return (
                   <div
-                    key={output.id || `output-${index}`}
+                    key={output.eventId || `output-${index}`}
                     className={styles['node-input-label']}
                     style={{
                       color: group ? group.color : '#000'
@@ -354,7 +273,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
           {/*content栏-data部分*/}
           <div className={styles['node-data-box']}>
             <div className={styles['node-content']}>
-              {dataIns.length > 0 && !isStartNode && (
+              {dataIns.length > 0 && (
                 <div className={styles['node-inputs']}>
                   {dataIns.map((input, index) => {
                     // 查找关联的事件分组
@@ -374,7 +293,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
                 </div>
               )}
 
-              {dataOuts.length > 0 && !isEndNode && (
+              {dataOuts.length > 0 && (
                 <div className={styles['node-outputs']}>
                   {dataOuts.map((output, index) => {
                     // 查找关联的事件分组
@@ -407,9 +326,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
       {/*)}*/}
 
       {/* 根据节点类型渲染不同的句柄 */}
-      {isSpecialNode
+      {renderRegularNodeHandles(dataIns, dataOuts, apiIns, apiOuts)}
-        ? renderSpecialNodeHandles(isStartNode, isEndNode, dataIns, dataOuts, apiIns, apiOuts)
-        : renderRegularNodeHandles(dataIns, dataOuts, apiIns, apiOuts)}
     </>
   );
 };

src/utils/convertAppFlowData.ts

@@ -114,8 +114,8 @@ export const convertAppFlowData = (appFlowData: any[]) => {
                 id: `e-${sourceNode.id}-${targetNode.id}-${outIndex}-${inIndex}`,
                 source: sourceNode.id,
                 target: targetNode.id,
-                sourceHandle: sourceEvent.eventName,
+                sourceHandle: sourceEvent.eventId,
-                targetHandle: targetEvent.eventName,
+                targetHandle: targetEvent.eventId,
                 type: 'custom',
                 data: {
                   displayData: {