fix: When the current supplier is abnormal, there should be a line on the model pointing to the next model, which means that the APIs on this link are associated with the next valid supplier.

frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx

@@ -167,7 +167,7 @@ const AIFlowChart = () => {
               id: `service-${model.id}-backup`,
               source: 'apiService',
               target: successModel.id,
-              label: 'backup',
+              label: `${model.api_count} apis`,
               data: { id: model.id, isBackup: true },
               animated: true,
               style: { stroke: '#52c41a' }

frontend/packages/core/src/pages/aiSetting/components/CustomEdge.tsx

@@ -1,4 +1,4 @@
-import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath } from '@xyflow/react'
+import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, useStore } from '@xyflow/react'
 
 export default function CustomEdge({
   id,
@@ -11,14 +11,26 @@ export default function CustomEdge({
   style = {},
   markerEnd,
   label,
-  data
+  data,
+  source,
+  target
 }: EdgeProps) {
-  const [edgePath, labelX, labelY] = getSmoothStepPath({
+  // Get all edges to check for duplicates
+  const edges = useStore((state) => state.edges)
+
+  // Find duplicate edges between the same source and target
+  const duplicateEdges = edges.filter((edge) => edge.source === source && edge.target === target)
+  const edgeIndex = duplicateEdges.findIndex((edge) => edge.id === id)
+
+  // Adjust the path if this is a duplicate edge
+  const offset = edgeIndex * 20 // 20px offset for each duplicate edge
+
+  const [edgePath] = getSmoothStepPath({
     sourceX,
-    sourceY,
+    sourceY: sourceY,
     sourcePosition,
     targetX,
-    targetY,
+    targetY: targetY + offset,
     targetPosition,
     borderRadius: 16
   })
@@ -42,7 +54,7 @@ export default function CustomEdge({
             target="_blank"
             style={{
               position: 'absolute',
-              transform: `translate(${targetX - 80}px,${targetY - 20}px)`,
+              transform: `translate(${targetX - 80}px,${targetY - 20 + offset}px)`,
               borderRadius: '4px',
               fontSize: 12,
               fontWeight: 500,
@@ -50,7 +62,6 @@ export default function CustomEdge({
               pointerEvents: 'all',
               textDecoration: 'none'
             }}
-            className="nodrag nopan"
           >
             {label}
           </a>