From 15cd9795d59b01a79ebf42b6447cf6ec6b3b22bd Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 20 Jan 2026 13:01:35 +0800 Subject: [PATCH] style: providers selection, remove fallback form --- src/config/index.ts | 2 +- src/locales/en-US/accesses.ts | 3 +- src/locales/ja-JP/accesses.ts | 3 +- src/locales/ru-RU/accesses.ts | 3 +- src/locales/zh-CN/accesses.ts | 3 +- .../components/provider-models.tsx | 20 +++++-- src/pages/maas-provider/config/index.ts | 43 ++------------ src/pages/maas-provider/config/mock.ts | 14 +++-- src/pages/maas-provider/config/providers.ts | 56 +++++++++++++++++++ src/pages/maas-provider/config/types.ts | 28 ++++++++-- src/pages/maas-provider/forms/basic.tsx | 11 ++-- .../hooks/use-provider-columns.tsx | 37 ++++++------ src/pages/maas-provider/index.tsx | 1 - .../model-access/components/access-points.tsx | 21 ++++--- src/pages/model-access/config/mock.ts | 21 ++++++- src/pages/model-access/config/types.ts | 25 ++++++++- .../model-access/hooks/use-access-columns.tsx | 17 +----- src/pages/model-access/index.tsx | 16 +----- 18 files changed, 200 insertions(+), 124 deletions(-) create mode 100644 src/pages/maas-provider/config/providers.ts diff --git a/src/config/index.ts b/src/config/index.ts index 03e3e5b0..a181297d 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -29,7 +29,7 @@ export const StatusColorMap: Record< }, inactive: { text: `var(--ant-color-text-tertiary)`, - border: `rgba(200,200,200,1)`, + border: `var(--ant-color-border)`, bg: `var(--ant-color-fill)` } }; diff --git a/src/locales/en-US/accesses.ts b/src/locales/en-US/accesses.ts index d3b26978..a5a21787 100644 --- a/src/locales/en-US/accesses.ts +++ b/src/locales/en-US/accesses.ts @@ -2,5 +2,6 @@ export default { 'accesses.title': 'Accesses', 'accesses.button.add': 'Add Access', 'accesses.table.accessPoints': 'Access Points', - 'accesses.table.traffic': 'Traffic Share' + 'accesses.table.traffic': 'Traffic Share', + 'accesses.table.setAsFallback': 'Set as Fallback' }; diff --git a/src/locales/ja-JP/accesses.ts b/src/locales/ja-JP/accesses.ts index d3b26978..a5a21787 100644 --- a/src/locales/ja-JP/accesses.ts +++ b/src/locales/ja-JP/accesses.ts @@ -2,5 +2,6 @@ export default { 'accesses.title': 'Accesses', 'accesses.button.add': 'Add Access', 'accesses.table.accessPoints': 'Access Points', - 'accesses.table.traffic': 'Traffic Share' + 'accesses.table.traffic': 'Traffic Share', + 'accesses.table.setAsFallback': 'Set as Fallback' }; diff --git a/src/locales/ru-RU/accesses.ts b/src/locales/ru-RU/accesses.ts index d3b26978..a5a21787 100644 --- a/src/locales/ru-RU/accesses.ts +++ b/src/locales/ru-RU/accesses.ts @@ -2,5 +2,6 @@ export default { 'accesses.title': 'Accesses', 'accesses.button.add': 'Add Access', 'accesses.table.accessPoints': 'Access Points', - 'accesses.table.traffic': 'Traffic Share' + 'accesses.table.traffic': 'Traffic Share', + 'accesses.table.setAsFallback': 'Set as Fallback' }; diff --git a/src/locales/zh-CN/accesses.ts b/src/locales/zh-CN/accesses.ts index 84e2263f..aad958db 100644 --- a/src/locales/zh-CN/accesses.ts +++ b/src/locales/zh-CN/accesses.ts @@ -2,5 +2,6 @@ export default { 'accesses.title': '接入', 'accesses.button.add': '添加接入', 'accesses.table.accessPoints': '接入点', - 'accesses.table.traffic': '流量' + 'accesses.table.traffic': '流量', + 'accesses.table.setAsFallback': '设为备选' }; diff --git a/src/pages/maas-provider/components/provider-models.tsx b/src/pages/maas-provider/components/provider-models.tsx index cd4246b8..fdc04767 100644 --- a/src/pages/maas-provider/components/provider-models.tsx +++ b/src/pages/maas-provider/components/provider-models.tsx @@ -1,3 +1,4 @@ +import AutoTooltip from '@/components/auto-tooltip'; import { modelCategoriesMap } from '@/pages/llmodels/config'; import { CheckCircleOutlined, @@ -54,17 +55,28 @@ const ProviderModels: React.FC = () => { - {model.name} - - {categoryConfig[model.type]?.icon} + + + {model.name} + + + {categoryConfig[model.type]?.icon} + ))} diff --git a/src/pages/maas-provider/config/index.ts b/src/pages/maas-provider/config/index.ts index 912198cc..357a7484 100644 --- a/src/pages/maas-provider/config/index.ts +++ b/src/pages/maas-provider/config/index.ts @@ -1,47 +1,12 @@ import icons from '@/components/icon-font/icons'; import { StatusMaps } from '@/config'; import { StatusType } from '@/config/types'; +import { ProviderEnum } from './providers'; +export { maasProviderLabelMap, maasProviderOptions } from './providers'; -export type maasProviderType = - | 'doubao' - | 'qwen' - | 'openai' - | 'deepseek' - | 'anthropic'; +export type maasProviderType = ProviderEnum[keyof ProviderEnum]; -export const maasProviderValueMap = { - Doubao: 'doubao', - Qwen: 'qwen', - OpenAI: 'openai', - Deepseek: 'deepseek', - Anthropic: 'anthropic' -}; - -export const maasProviderLabelMap = { - [maasProviderValueMap.Doubao]: 'Doubao', - [maasProviderValueMap.Qwen]: 'Qwen', - [maasProviderValueMap.OpenAI]: 'OpenAI', - [maasProviderValueMap.Deepseek]: 'DeepSeek', - [maasProviderValueMap.Anthropic]: 'Anthropic' -}; - -export const providerIconsMap = { - [maasProviderValueMap.Doubao]: 'icon-doubao', - [maasProviderValueMap.Qwen]: 'icon-qwen', - [maasProviderValueMap.OpenAI]: 'icon-openai', - [maasProviderValueMap.Deepseek]: 'icon-deepseek', - [maasProviderValueMap.Anthropic]: 'icon-anthropic' -}; - -export const maasProviderOptions = Object.entries(maasProviderValueMap).map( - ([key, value]) => ({ - label: maasProviderLabelMap[value], - value: value, - key: value, - locale: false, - icon: providerIconsMap[value] - }) -); +export const maasProviderValueMap = ProviderEnum; export const ProviderStatusValueMap: Record = { Ready: 'ready', diff --git a/src/pages/maas-provider/config/mock.ts b/src/pages/maas-provider/config/mock.ts index 89c26dbe..e66aa503 100644 --- a/src/pages/maas-provider/config/mock.ts +++ b/src/pages/maas-provider/config/mock.ts @@ -9,7 +9,8 @@ export const mockDataList: MaasProviderItem[] = [ models: 5, state_message: '', provider: 'doubao', - proxy_config: {}, + api_tokens: ['token1', 'token2'], + proxy_url: 'http://proxy.example.com', builtIn: false }, { @@ -19,7 +20,8 @@ export const mockDataList: MaasProviderItem[] = [ state: 'inactive', state_message: 'Provider is inactive', provider: 'qwen', - proxy_config: false, + proxy_url: 'http://proxy2.example.com', + builtIn: true }, { @@ -28,7 +30,8 @@ export const mockDataList: MaasProviderItem[] = [ name: 'OpenAI', state: 'ready', state_message: '', - proxy_config: null, + proxy_url: null, + api_tokens: ['tokenA'], provider: 'openai', builtIn: false }, @@ -39,7 +42,8 @@ export const mockDataList: MaasProviderItem[] = [ state: 'ready', state_message: '', provider: 'deepseek', - proxy_config: null, + proxy_url: null, + api_tokens: ['tokenX', 'tokenY'], builtIn: false }, { @@ -49,7 +53,7 @@ export const mockDataList: MaasProviderItem[] = [ state: 'inactive', state_message: 'Provider is inactive', provider: 'anthropic', - proxy_config: {}, + proxy_url: {}, builtIn: true } ]; diff --git a/src/pages/maas-provider/config/providers.ts b/src/pages/maas-provider/config/providers.ts new file mode 100644 index 00000000..f4aa6900 --- /dev/null +++ b/src/pages/maas-provider/config/providers.ts @@ -0,0 +1,56 @@ +export enum ProviderEnum { + AI360 = 'ai360', + AZURE = 'azure', + BAICHUAN = 'baichuan', + BAIDU = 'baidu', + BEDROCK = 'bedrock', + CLAUDE = 'claude', + CLOUDFLARE = 'cloudflare', + COHERE = 'cohere', + COZE = 'coze', + DEEPL = 'deepl', + DEEPSEEK = 'deepseek', + DIFY = 'dify', + DOUBAO = 'doubao', + FIREWORKS = 'fireworks', + GEMINI = 'gemini', + GITHUB = 'github', + GROK = 'grok', + GROQ = 'groq', + HUNYUAN = 'hunyuan', + LONGCAT = 'longcat', + MINIMAX = 'minimax', + MISTRAL = 'mistral', + MOONSHOT = 'moonshot', + OLLAMA = 'ollama', + OPENAI = 'openai', + OPENROUTER = 'openrouter', + QWEN = 'qwen', + SPARK = 'spark', + STEPFUN = 'stepfun', + TOGETHERAI = 'together-ai', + TRITON = 'triton', + YI = 'yi', + ZHIPUAI = 'zhipuai' +} + +// generate provider list: {label: string;value:string}[] +export const maasProviderOptions = Object.entries(ProviderEnum).map( + ([key, value]) => ({ + locale: false, + label: key, + value: value, + key: value + }) +); + +// generate provider value to label map +export const maasProviderLabelMap: Record = Object.entries( + ProviderEnum +).reduce( + (acc, [key, value]) => { + acc[value] = key; + return acc; + }, + {} as Record +); diff --git a/src/pages/maas-provider/config/types.ts b/src/pages/maas-provider/config/types.ts index 24ced421..0e178bf7 100644 --- a/src/pages/maas-provider/config/types.ts +++ b/src/pages/maas-provider/config/types.ts @@ -2,15 +2,31 @@ import { maasProviderType } from '.'; export interface MaasProviderItem { id: number; + created_at: string; + updated_at: string; + deleted_at: string; name: string; - models?: number; - state: string; - state_message: string; - provider: maasProviderType; - proxy_config?: any; - builtIn: boolean; + description: string; + api_tokens: string[]; + timeout: number; + config: { + type: maasProviderType; + [key: string]: any; + }; + support_models: unknown[]; + proxy_url: string; + proxy_timeout: number; + builtin: boolean; + provider_model_count: number; + api_token_count: number; } export interface FormData { name: string; + description: string; + api_tokens: string[]; + config: { + type: maasProviderType; + [key: string]: any; + }; } diff --git a/src/pages/maas-provider/forms/basic.tsx b/src/pages/maas-provider/forms/basic.tsx index 08de2734..38c5c297 100644 --- a/src/pages/maas-provider/forms/basic.tsx +++ b/src/pages/maas-provider/forms/basic.tsx @@ -1,6 +1,8 @@ import SealInput from '@/components/seal-form/seal-input'; +import SealSelect from '@/components/seal-form/seal-select'; import { useIntl } from '@umijs/max'; import { Form } from 'antd'; +import { maasProviderOptions } from '../config/providers'; import { FormData } from '../config/types'; const Basic = () => { @@ -8,7 +10,7 @@ const Basic = () => { const form = Form.useFormInstance(); return ( <> - + name="name" data-field="name"> { })} /> - - + name="description"> {text} - {record.builtIn && ( + {record.builtin && ( BuiltIn @@ -50,10 +46,6 @@ const useProviderColumns = ( span: 4, render: (value: string) => ( <> - {maasProviderLabelMap[value]} @@ -69,19 +61,30 @@ const useProviderColumns = ( }, { title: intl.formatMessage({ id: 'providers.table.proxy' }), - dataIndex: 'proxy_config', + dataIndex: 'proxy_url', span: 3, - render: (value: number) => {value ? 'Configured' : 'None'} + render: (value: number) => ( + + {value ? ( + + ) : ( + '-' + )} + + ) }, { title: 'Token Settings', - dataIndex: 'tokens', + dataIndex: 'api_tokens', span: 3, render: (value: string, record: MaasProviderItem) => ( 0 ? StatusMaps.success : StatusMaps.inactive, + text: value?.length > 0 ? 'Configured' : 'Unconfigured', message: '' }} /> diff --git a/src/pages/maas-provider/index.tsx b/src/pages/maas-provider/index.tsx index a7039162..439a65b7 100644 --- a/src/pages/maas-provider/index.tsx +++ b/src/pages/maas-provider/index.tsx @@ -166,7 +166,6 @@ const MaasProvider: React.FC = () => { <> + label: 'accesses.table.setAsFallback', + icon: }, { key: 'delete', @@ -61,6 +61,11 @@ const AccessItem: React.FC = ({ onSelect, data }) => { }} > qwen3-0.6b-zduxy + {data.is_fallback && ( + + )} @@ -106,11 +111,9 @@ const AccessPoints: React.FC = ({ dataList, onSelect }) => { console.log('AccessPoints dataList:', dataList); return (
- {Array(2) - .fill(1) - .map((item, index) => ( - - ))} + {mockAccessPointList.map((item, index) => ( + + ))}
); }; diff --git a/src/pages/model-access/config/mock.ts b/src/pages/model-access/config/mock.ts index 2b237b3d..5587c103 100644 --- a/src/pages/model-access/config/mock.ts +++ b/src/pages/model-access/config/mock.ts @@ -1,4 +1,4 @@ -import { AccessItem } from './types'; +import { AccessItem, AccessPointItem } from './types'; // mock data for AccessItem 5 items export const mockDataList: AccessItem[] = [ @@ -33,3 +33,22 @@ export const mockDataList: AccessItem[] = [ accessPoints: 4 } ]; + +// mock data for AccessPointItem 2 items +export const mockAccessPointList: AccessPointItem[] = [ + { + id: 1, + name: 'Access Point 1', + type: 'API', + is_fallback: true, + endpoint: 'https://api.example.com/endpoint1', + created_at: '2024-01-01T12:00:00Z' + }, + { + id: 2, + name: 'Access Point 2', + type: 'SDK', + is_fallback: false, + created_at: '2024-02-01T12:00:00Z' + } +]; diff --git a/src/pages/model-access/config/types.ts b/src/pages/model-access/config/types.ts index e752d5b7..53f529e3 100644 --- a/src/pages/model-access/config/types.ts +++ b/src/pages/model-access/config/types.ts @@ -1,8 +1,14 @@ export interface AccessItem { id: number; + created_at: string; + updated_at: string; + deleted_at: string; name: string; - source: string; - accessPoints?: number; + description: string; + categories: string[]; + meta: Record; + created_by_model: boolean; + endpoint_count: number; } export interface FormData { @@ -17,3 +23,18 @@ export interface FormData { provider_id: number; }[]; } + +export interface AccessPointItem { + id: number; + created_at: string; + updated_at: string; + deleted_at: string; + provider_model_name: string; + weight: number; + model_id: number; + provider_id: number; + name: string; + access_id: number; + state: string; + fallback_status_codes: string[]; +} diff --git a/src/pages/model-access/hooks/use-access-columns.tsx b/src/pages/model-access/hooks/use-access-columns.tsx index 1b89113e..abf4d7cd 100644 --- a/src/pages/model-access/hooks/use-access-columns.tsx +++ b/src/pages/model-access/hooks/use-access-columns.tsx @@ -1,18 +1,12 @@ // columns.ts import AutoTooltip from '@/components/auto-tooltip'; import DropdownButtons from '@/components/drop-down-buttons'; -import IconFont from '@/components/icon-font'; import { SealColumnProps } from '@/components/seal-table/types'; import { tableSorter } from '@/config/settings'; import { useIntl } from '@umijs/max'; -import { Tag } from 'antd'; import dayjs from 'dayjs'; import { useMemo } from 'react'; -import { - maasProviderLabelMap, - providerIconsMap, - rowActionList -} from '../config'; +import { maasProviderLabelMap, rowActionList } from '../config'; import { AccessItem } from '../config/types'; const useAccessColumns = ( @@ -33,11 +27,6 @@ const useAccessColumns = ( {text} - {record.builtIn && ( - - BuiltIn - - )} ) }, @@ -47,10 +36,6 @@ const useAccessColumns = ( span: 5, render: (value: string) => ( <> - {maasProviderLabelMap[value]} diff --git a/src/pages/model-access/index.tsx b/src/pages/model-access/index.tsx index c1c39538..1d4556ec 100644 --- a/src/pages/model-access/index.tsx +++ b/src/pages/model-access/index.tsx @@ -26,13 +26,11 @@ import { } from './apis'; import AccessPoints from './components/access-points'; import AddAccessModal from './components/add-access-modal'; -import FallbackModal from './components/fallback-modal'; import { maasProviderOptions } from './config'; import { mockDataList } from './config/mock'; import { FormData, AccessItem as ListItem } from './config/types'; import useAccessColumns from './hooks/use-access-columns'; import useCreateAccess from './hooks/use-create-access'; -import useFallbackSettings from './hooks/use-fallback-settings'; const Accesses: React.FC = () => { const { @@ -62,12 +60,6 @@ const Accesses: React.FC = () => { const { openAccessModalStatus, openAccessModal, closeAccessModal } = useCreateAccess(); - const { - openFallbackSettingsModalStatus, - openFallbackSettingsModal, - closeFallbackSettingsModal - } = useFallbackSettings(); - const handleClickDropdown = () => { openAccessModal( PageAction.CREATE, @@ -147,7 +139,7 @@ const Accesses: React.FC = () => { const onChildSelect = useMemoizedFn((val: any, record: any) => { if (val === 'fallback') { - openFallbackSettingsModal(PageAction.EDIT, 'Fallback Settings', record); + console.log('open fallback settings modal', record); } }); @@ -247,12 +239,6 @@ const Accesses: React.FC = () => { onCancel={handleModalCancel} onOk={handleModalOk} > - );