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

@@ -39,7 +39,6 @@ const calculateNodePositions = (models: ModelListData[], startY = LAYOUT.NODE_ST
   return models.reduce(
     (acc, model, index) => {
       const y = startY + index * gap
-
       return {
         ...acc,
         [model.id]: {
@@ -95,6 +94,9 @@ const AIFlowChart = () => {
     if (!modelData.length) return
 
     const positions = calculateNodePositions(modelData)
+    const firstSuccessModel = modelData.find((model) => model.status === 'enabled')
+    console.log(firstSuccessModel)
+
     // subtract 5 to make sure the service node is aligned with the top model node
     const serviceY = positions[modelData[0].id].y - 5
     const newNodes = [
@@ -117,7 +119,8 @@ const AIFlowChart = () => {
           status: model.status,
           defaultLlm: model.defaultLlm,
           logo: model.logo,
-          id: model.id
+          id: model.id,
+          alternativeModel: firstSuccessModel
         }
       })),
       ...modelData.map((model) => ({
@@ -135,46 +138,19 @@ const AIFlowChart = () => {
       }))
     ]
 
-    const successModel = modelData.find((model) => model.status !== 'abnormal') as ModelListData
     const newEdges: any = [
-      ...modelData.flatMap((model, modelIndex) => {
-        if (model.status === 'enabled') {
-          return [
-            {
-              id: `service-${model.id}`,
-              source: 'apiService',
-              target: model.id,
-              label: `${model.api_count} apis`,
-              data: {
-                id: model.id,
-                offset: modelIndex * 20 // Add vertical offset based on model index
-              },
-              animated: true,
-              style: { stroke: '#52c41a' }
-            }
-          ]
-        } else {
-          return [
-            {
-              id: `service-${model.id}-failed`,
-              source: 'apiService',
-              target: model.id,
-              label: ``,
-              data: { id: model.id },
-              style: { stroke: '#ff4d4f' }
-            },
-            {
-              id: `service-${model.id}-backup`,
-              source: 'apiService',
-              target: successModel.id,
-              label: `${model.api_count} apis`,
-              data: { id: model.id, isBackup: true },
-              animated: true,
-              style: { stroke: '#52c41a' }
-            }
-          ]
-        }
-      }),
+      ...modelData.map((model) => ({
+        id: `service-${model.id}`,
+        source: 'apiService',
+        target: model.id,
+        label: `${model.api_count} apis`,
+        data: {
+          id: model.id,
+          status: model.status
+        },
+        animated: true,
+        style: { stroke: model.status === 'enabled' ? '#52c41a' : '#ff4d4f' }
+      })),
       ...modelData.map((model) => ({
         id: `${model.id}-keys-edge`,
         source: model.id,

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

@@ -8,10 +8,11 @@ import { AiSettingListItem, ModelDetailData, ModelStatus } from '../types'
 type ModelCardNodeData = ModelDetailData & {
   id: string
   position: { x: number; y: number }
+  alternativeModel?: ModelDetailData
 }
 
 export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) => {
-  const { name, status, defaultLlm, logo } = data
+  const { name, status, defaultLlm, logo, alternativeModel } = data
   const { openConfigModal } = useAiSetting()
 
   const getStatusIcon = (status: ModelStatus) => {
@@ -62,6 +63,11 @@ export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) =
           {$t('默认：')}
           {defaultLlm}
         </div>
+        {status !== 'enabled' && alternativeModel && (
+          <div className="mt-1 text-sm text-gray-500">
+            {$t('关联 API 已转用')} {alternativeModel.name}/{alternativeModel.defaultLlm}
+          </div>
+        )}
       </div>
     </div>
   )