From 9e6fe50aed1b38cdd5cdd23b138089b2ff054c8b Mon Sep 17 00:00:00 2001
From: scarqin <scarqin@gmail.com>
Date: Thu, 2 Jan 2025 09:32:19 +0800
Subject: [PATCH] fix: provider tips

---
 .../src/components/AIProviderSelect/index.tsx | 16 +++++++---------
 .../packages/core/src/pages/aiApis/index.tsx  | 19 ++++++++++++-------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/frontend/packages/core/src/components/AIProviderSelect/index.tsx b/frontend/packages/core/src/components/AIProviderSelect/index.tsx
index cd28fc64..273d9117 100644
--- a/frontend/packages/core/src/components/AIProviderSelect/index.tsx
+++ b/frontend/packages/core/src/components/AIProviderSelect/index.tsx
@@ -42,16 +42,14 @@ const AIProviderSelect: React.FC<AIProviderSelectProps> = ({ value, onChange, st
         const response = await fetchData<AIProviderResponse>(endpoint, { method: 'GET' })
         const { code, data, msg } = response
         if (code === STATUS_CODE.SUCCESS) {
-          isMounted &&
-            setProviders(
-              data.providers.map((val) => ({
-                ...val,
-                backupName: data.backup?.name,
-                backupModel: data.backup?.model?.name
-              }))
-            )
+          const providers = data.providers.map((val) => ({
+            ...val,
+            backupName: data.backup?.name,
+            backupModel: data.backup?.model?.name
+          }))
+          isMounted && setProviders(providers)
           if (!data.providers?.length) return
-          const selectedProvider: AIProvider = value ? data.providers.find((p) => p.id === value) : data.providers[0]
+          const selectedProvider: AIProvider = value ? providers.find((p) => p.id === value) : providers[0]
           onChange?.(selectedProvider.id, selectedProvider)
         } else {
           message.error(msg || t('Failed to fetch AI providers'))
diff --git a/frontend/packages/core/src/pages/aiApis/index.tsx b/frontend/packages/core/src/pages/aiApis/index.tsx
index e4573c10..0a12ec3c 100644
--- a/frontend/packages/core/src/pages/aiApis/index.tsx
+++ b/frontend/packages/core/src/pages/aiApis/index.tsx
@@ -11,7 +11,7 @@ import { getTime } from '@dashboard/utils/dashboard'
 import { Alert, App, Button, Typography } from 'antd'
 import dayjs from 'dayjs'
 import React, { useEffect, useRef, useState } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { APIKey } from './types'
 
 const ApiSettings: React.FC = () => {
@@ -24,6 +24,7 @@ const ApiSettings: React.FC = () => {
   const [searchWord, setSearchWord] = useState<string>('')
   const [total, setTotal] = useState<number>(0)
   const [timeButton, setTimeButton] = useState<TimeRangeButton>('day')
+  const navigate = useNavigate()
   const [timeRange, setTimeRange] = useState<{ start: number | null; end: number | null }>({
     start: null,
     end: null
@@ -163,19 +164,23 @@ const ApiSettings: React.FC = () => {
   }
 
   const renderProviderBanner = () => {
+    if (!provider) return null
+
     console.log(provider)
-    if (provider?.status === 'disabled') {
+    if (provider.status === 'disabled' || provider.status === 'abnormal') {
+      const message =
+        provider.status === 'disabled'
+          ? $t(`当前供应商异常，以下API均临时调用 ${provider.backupName} 下的 ${provider.backupModel} 模型能力。`)
+          : $t(`当前供应商异常，以下API均临时调用 ${provider.backupName} 下的 ${provider.backupModel} 模型能力。`)
+
       return (
         <Alert
-          message={$t(
-            `当前供应商已停用，以下 API 均临时调用 ${provider.backupName} 下的 ${provider.backupModel} 模型能力。`
-          )}
+          message={message}
           type="warning"
           className="my-4"
           showIcon
-          size="small"
           action={
-            <Button size="small" type="link" onClick={() => window.open('/details')}>
+            <Button size="small" type="link" onClick={() => navigate('/aisetting')}>
               {$t('查看详情')}
             </Button>
           }