fix: alert api list tips

frontend/packages/core/src/App.tsx

@@ -1,47 +1,45 @@
-
+import { StyleProvider } from '@ant-design/cssinjs'
+import { BreadcrumbProvider } from '@common/contexts/BreadcrumbContext.tsx'
+import { GlobalProvider } from '@common/contexts/GlobalStateContext'
+import { useLocaleContext } from '@common/contexts/LocaleContext'
+import { PluginEventHubProvider } from '@common/contexts/PluginEventHubContext'
+import { PluginSlotHubProvider } from '@common/contexts/PluginSlotHubContext'
+import useInitializeMonaco from '@common/hooks/useInitializeMonaco'
+import { $t } from '@common/locales'
+import RenderRoutes from '@core/components/aoplatform/RenderRoutes'
+import { App as AppAntd, ConfigProvider } from 'antd'
+import { useMemo } from 'react'
 import './App.css'
-import { ConfigProvider, App as AppAntd } from 'antd';
-import RenderRoutes from '@core/components/aoplatform/RenderRoutes';
-import {BreadcrumbProvider} from "@common/contexts/BreadcrumbContext.tsx";
-import useInitializeMonaco from "@common/hooks/useInitializeMonaco";
-import { useMemo } from 'react';
-import { GlobalProvider } from '@common/contexts/GlobalStateContext';
-import { $t } from '@common/locales';
-import { PluginEventHubProvider } from '@common/contexts/PluginEventHubContext';
-import { PluginSlotHubProvider } from '@common/contexts/PluginSlotHubContext';
-import { useLocaleContext } from '@common/contexts/LocaleContext';
-import { StyleProvider } from '@ant-design/cssinjs';
-
 
 const antdComponentThemeToken = {
   token: {
     // Seed Token，影响范围大
     colorPrimary: '#3D46F2',
-    colorLink:'#3D46F2',
-    colorBorder:'#ededed',
-    colorText:'#333',
+    colorLink: '#3D46F2',
+    colorBorder: '#ededed',
+    colorText: '#333',
     borderRadius: 4,
     // 派生变量，影响范围小
     colorBgContainer: '#fff',
-    colorPrimaryBg:'#EBEEF2',
-    colorTextQuaternary:'#BBB',
-    colorTextTertiary:'#999'
+    colorPrimaryBg: '#EBEEF2',
+    colorTextQuaternary: '#BBB',
+    colorTextTertiary: '#999'
   },
-  components:{
+  components: {
     // 派生变量，影响范围小
-    Input:{
-      activeShadow:'none'
+    Input: {
+      activeShadow: 'none'
     },
-    Select:{
-      activeShadow:'none'
+    Select: {
+      activeShadow: 'none'
     },
-    Checkbox:{
-      activeShadow:'none'
+    Checkbox: {
+      activeShadow: 'none'
     },
-    Cascader:{
-      activeShadow:'none',
-      optionSelectedBg:'#EBEEF2',
-      optionHoverBg:'#EBEEF2'
+    Cascader: {
+      activeShadow: 'none',
+      optionSelectedBg: '#EBEEF2',
+      optionHoverBg: '#EBEEF2'
     },
     Layout: {
       bodyBg: '#fff',
@@ -50,122 +48,122 @@ const antdComponentThemeToken = {
       headerHeight: 50,
       headerPadding: '10 20px',
       lightSiderBg: '#fff',
-      siderBg: '#fff',
+      siderBg: '#fff'
     },
-    Breadcrumb:{
-      itemColor:'#666',
-      linkColor:'#666',
-      lastItemColor:'#333',
+    Breadcrumb: {
+      itemColor: '#666',
+      linkColor: '#666',
+      lastItemColor: '#333'
     },
-    Table:{
-        headerBorderRadius:0,
-        headerSplitColor:'#ededed',
-        borderColor:'#ededed',
-        cellPaddingBlockMD:'15px',
-        cellPaddingInlineMD:'12px',
-        cellPaddingBlockSM:'8px',
-        cellPaddingInlineSM:'12px',
-        headerFilterHoverBg:'#EBEEF2',
-        headerSortActiveBg:'#F7F8FA',
-        headerSortHoverBg:'#F7F8FA',
-        fixedHeaderSortActiveBg:'#F7F8FA',
-        headerBg:'#FAFAFA',
-        rowHoverBg:'#EBEEF2'
-      
+    Table: {
+      headerBorderRadius: 0,
+      headerSplitColor: '#ededed',
+      borderColor: '#ededed',
+      cellPaddingBlockMD: '15px',
+      cellPaddingInlineMD: '12px',
+      cellPaddingBlockSM: '8px',
+      cellPaddingInlineSM: '12px',
+      headerFilterHoverBg: '#EBEEF2',
+      headerSortActiveBg: '#F7F8FA',
+      headerSortHoverBg: '#F7F8FA',
+      fixedHeaderSortActiveBg: '#F7F8FA',
+      headerBg: '#FAFAFA',
+      rowHoverBg: '#EBEEF2'
     },
-    Segmented:{
-        itemColor:'#333',
-        itemSelectedColor:'#333',
-        trackBg:'#f7f8fa',
-        trackPadding:0,
-        // itemHoverColor:'#EBEEF2',
-        itemActiveBg:'#EBEEF2',
-        itemHoverBg:'#EBEEF2',
-        itemSelectedBg:'#EBEEF2',
+    Segmented: {
+      itemColor: '#333',
+      itemSelectedColor: '#333',
+      trackBg: '#f7f8fa',
+      trackPadding: 0,
+      // itemHoverColor:'#EBEEF2',
+      itemActiveBg: '#EBEEF2',
+      itemHoverBg: '#EBEEF2',
+      itemSelectedBg: '#EBEEF2'
     },
-      Tree:{
-        // titleHeight:30,
-        // fontSize:12,
-        directoryNodeSelectedBg:'#EBEEF2',
-        directoryNodeSelectedColor:'#333',
-        nodeSelectedBg:'#EBEEF2',
-        nodeHoverBg:'#EBEEF2'
-      },
-      Collapse:{
-          headerBg:'#f7f8fa',
-          headerPadding:"12px",
-          contentPadding:"0 10px 12px 10px"
-      },
-      Button:{
-        // paddingInline:8,
-        dangerShadow:'none',
-        defaultShadow:'none',
-        primaryShadow:'none'
-      },
-      Tabs:{
-        cardBg:'#EBEEF2',
-        cardHeight:42,
-        horizontalItemGutter:8,
-        horizontalItemPaddingSM:'12px 8px 8px 8px',
-        horizontalItemPadding:'12px 8px 8px 8px',
-      },
-      Menu:{
-        // itemBg:'#F7F8FA',
-        // subMenuItemBg:'#F7F8FA',
-        // itemMarginBlock:0,
-        // activeBarBorderWidth:0,
-        // itemSelectedColor:'#333',
-        // itemSelectedBg:'#EBEEF2',
-        // itemHoverBg:'#EBEEF2'
-      },
-      List:{
-        itemPadding:'8px 0'
-      },
-      Form:{
-        itemMarginBottom:10,
-        
-      },
-      Alert:{
-        defaultPadding:'12px 16px'
-      },
-      Tag:{
-        defaultBg:"#f7f8fa"
-      },
+    Tree: {
+      // titleHeight:30,
+      // fontSize:12,
+      directoryNodeSelectedBg: '#EBEEF2',
+      directoryNodeSelectedColor: '#333',
+      nodeSelectedBg: '#EBEEF2',
+      nodeHoverBg: '#EBEEF2'
+    },
+    Collapse: {
+      headerBg: '#f7f8fa',
+      headerPadding: '12px',
+      contentPadding: '0 10px 12px 10px'
+    },
+    Button: {
+      // paddingInline:8,
+      dangerShadow: 'none',
+      defaultShadow: 'none',
+      primaryShadow: 'none'
+    },
+    Tabs: {
+      cardBg: '#EBEEF2',
+      cardHeight: 42,
+      horizontalItemGutter: 8,
+      horizontalItemPaddingSM: '12px 8px 8px 8px',
+      horizontalItemPadding: '12px 8px 8px 8px'
+    },
+    Menu: {
+      // itemBg:'#F7F8FA',
+      // subMenuItemBg:'#F7F8FA',
+      // itemMarginBlock:0,
+      // activeBarBorderWidth:0,
+      // itemSelectedColor:'#333',
+      // itemSelectedBg:'#EBEEF2',
+      // itemHoverBg:'#EBEEF2'
+    },
+    List: {
+      itemPadding: '8px 0'
+    },
+    Form: {
+      itemMarginBottom: 10
+    },
+    Alert: {
+      defaultPadding: '8px 12px'
+    },
+    Tag: {
+      defaultBg: '#f7f8fa'
+    }
   }
 }
 
-
 function App() {
-  const { locale } = useLocaleContext();
+  const { locale } = useLocaleContext()
   useInitializeMonaco()
-  
-  
-  const validateMessages = useMemo(()=>({
-    required: $t('必填项'),
-    email:$t('不是有效邮箱地址')}
-  ),[locale])
-  
+
+  const validateMessages = useMemo(
+    () => ({
+      required: $t('必填项'),
+      email: $t('不是有效邮箱地址')
+    }),
+    [locale]
+  )
+
   return (
-    <StyleProvider hashPriority={"high"}>
-      <ConfigProvider 
+    <StyleProvider hashPriority={'high'}>
+      <ConfigProvider
         locale={locale}
-        wave={{disabled:true}}
+        wave={{ disabled: true }}
         theme={antdComponentThemeToken}
-        form={{validateMessages }}>
-          <PluginEventHubProvider>
-            <AppAntd className="h-full" message={{ maxCount: 1 }}>
-              <PluginSlotHubProvider>
-                <GlobalProvider>
-                  <BreadcrumbProvider>
-                      <RenderRoutes />
-                  </BreadcrumbProvider>
-                  </GlobalProvider>
-              </PluginSlotHubProvider>
+        form={{ validateMessages }}
+      >
+        <PluginEventHubProvider>
+          <AppAntd className="h-full" message={{ maxCount: 1 }}>
+            <PluginSlotHubProvider>
+              <GlobalProvider>
+                <BreadcrumbProvider>
+                  <RenderRoutes />
+                </BreadcrumbProvider>
+              </GlobalProvider>
+            </PluginSlotHubProvider>
           </AppAntd>
         </PluginEventHubProvider>
       </ConfigProvider>
     </StyleProvider>
-  );
+  )
 }
 
 export default App

frontend/packages/core/src/components/AIProviderSelect/index.tsx

@@ -1,17 +1,14 @@
 import { STATUS_CODE } from '@common/const/const'
 import { useFetch } from '@common/hooks/http'
+import { ModelDetailData } from '@core/pages/aiSetting/types'
 import { Select, Space, message } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-export interface AIProvider {
-  id: string
-  name: string
-  logo: string
-  configured: boolean
-  getApikeyUrl: string
-  status: string
+export interface AIProvider extends ModelDetailData {
   default_config: string
+  backupName: string
+  backupModel: string
 }
 
 interface AIProviderResponse {
@@ -41,10 +38,18 @@ const AIProviderSelect: React.FC<AIProviderSelectProps> = ({ value, onChange, st
     const fetchProviders = async () => {
       if (isMounted) setLoading(true)
       try {
-        const response = await fetchData<AIProviderResponse>('simple/ai/providers/configured', { method: 'GET' })
+        const endpoint = 'simple/ai/providers/configured'
+        const response = await fetchData<AIProviderResponse>(endpoint, { method: 'GET' })
         const { code, data, msg } = response
         if (code === STATUS_CODE.SUCCESS) {
-          isMounted && setProviders(data.providers)
+          isMounted &&
+            setProviders(
+              data.providers.map((val) => ({
+                ...val,
+                backupName: data.backup?.name,
+                backupModel: data.backup?.model?.name
+              }))
+            )
           if (!data.providers?.length) return
           const selectedProvider: AIProvider = value ? data.providers.find((p) => p.id === value) : data.providers[0]
           onChange?.(selectedProvider.id, selectedProvider)

frontend/packages/core/src/pages/aiApis/index.tsx

@@ -163,13 +163,17 @@ const ApiSettings: React.FC = () => {
   }
 
   const renderProviderBanner = () => {
-    if (provider?.disabled) {
+    console.log(provider)
+    if (provider?.status === 'disabled') {
       return (
         <Alert
-          message={$t('当前供应商已停用，以下 API 均临时调用 Google Gemini 下的 Gemini Pro 模型能力。')}
+          message={$t(
+            `当前供应商已停用，以下 API 均临时调用 ${provider.backupName} 下的 ${provider.backupModel} 模型能力。`
+          )}
           type="warning"
+          className="my-4"
           showIcon
-          style={{ marginBottom: 16 }}
+          size="small"
           action={
             <Button size="small" type="link" onClick={() => window.open('/details')}>
               {$t('查看详情')}