From e188d788b9212cd9b5dbff8f8dd6c8ed798fb1b9 Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 23 Jan 2026 10:24:33 +0800 Subject: [PATCH] chore: provider form test --- src/components/seal-form/seal-select.tsx | 3 + src/config/index.ts | 3 +- src/config/types.ts | 2 +- src/locales/en-US/provider.ts | 3 +- src/locales/ja-JP/provider.ts | 3 +- src/locales/ru-RU/provider.ts | 3 +- src/locales/zh-CN/provider.ts | 5 +- src/pages/maas-provider/apis/index.ts | 41 +++++- .../components/add-provider-modal.tsx | 8 +- .../components/provider-models.tsx | 64 ++------- .../maas-provider/config/form-context.ts | 3 +- src/pages/maas-provider/config/mock.ts | 59 -------- src/pages/maas-provider/config/types.ts | 9 +- .../maas-provider/forms/access-token.tsx | 9 +- .../maas-provider/forms/advance-config.tsx | 4 +- src/pages/maas-provider/forms/basic.tsx | 16 ++- src/pages/maas-provider/forms/index.tsx | 28 ++-- src/pages/maas-provider/forms/model-item.tsx | 134 ++++++++++++++++++ .../maas-provider/forms/proxy-config.tsx | 30 ++-- .../maas-provider/forms/supported-models.tsx | 133 ++++++++--------- .../hooks/use-create-provider.ts | 11 +- .../hooks/use-provider-columns.tsx | 9 +- .../hooks/use-query-provider-models.ts | 102 +++++++++++++ src/pages/maas-provider/index.tsx | 29 ++-- src/pages/model-access/apis/index.ts | 6 +- src/pages/model-access/config/index.ts | 41 ------ src/pages/model-access/index.tsx | 7 - 27 files changed, 448 insertions(+), 317 deletions(-) delete mode 100644 src/pages/maas-provider/config/mock.ts create mode 100644 src/pages/maas-provider/forms/model-item.tsx create mode 100644 src/pages/maas-provider/hooks/use-query-provider-models.ts diff --git a/src/components/seal-form/seal-select.tsx b/src/components/seal-form/seal-select.tsx index 7bad9655..cf02c4f3 100644 --- a/src/components/seal-form/seal-select.tsx +++ b/src/components/seal-form/seal-select.tsx @@ -27,6 +27,7 @@ const SealSelect: React.FC< loading, footer, alwaysFocus = false, + styles, ...rest } = props; const intl = useIntl(); @@ -109,6 +110,8 @@ const SealSelect: React.FC< > []>( - `${MAAS_PROVIDERS_API}/${params.id}/models`, + return request<{ data: any[] }>( + `${MAAS_PROVIDERS_API}${GET_PROVIDER_MODELS_API}`, { - method: 'GET', + method: 'post', + data: params.data, cancelToken: options?.token } ); } + +export async function testProviderModel( + params: { + data: { + model_name: string; + api_token: string; + config: { + type: string; + }; + }; + }, + options?: any +) { + return request(`${MAAS_PROVIDERS_API}${TEST_PROVIDER_MODEL_API}`, { + method: 'post', + data: params.data, + cancelToken: options?.token + }); +} diff --git a/src/pages/maas-provider/components/add-provider-modal.tsx b/src/pages/maas-provider/components/add-provider-modal.tsx index 5a56a837..ce768da8 100644 --- a/src/pages/maas-provider/components/add-provider-modal.tsx +++ b/src/pages/maas-provider/components/add-provider-modal.tsx @@ -3,7 +3,6 @@ import FormDrawer from '@/pages/_components/form-drawer'; import React, { useRef } from 'react'; import { FormData, MaasProviderItem as ListItem } from '../config/types'; -import { maasProviderType } from '../config'; import ProviderForm from '../forms'; type AddModalProps = { @@ -11,7 +10,6 @@ type AddModalProps = { action: PageActionType; open: boolean; currentData?: ListItem; // Used when action is EDIT - provider: maasProviderType | null; onOk: (values: FormData) => void; onCancel: () => void; }; @@ -19,7 +17,6 @@ const AddProvider: React.FC = ({ title, action, open, - provider, currentData, onOk, onCancel @@ -30,7 +27,8 @@ const AddProvider: React.FC = ({ form.current?.submit(); }; - const handleOk = async (data: FormData) => { + const handleOnFinish = async (data: FormData) => { + console.log('handleOnFinish', data); onOk({ ...data }); @@ -53,7 +51,7 @@ const AddProvider: React.FC = ({ ref={form} action={action} currentData={currentData} - onFinish={handleOk} + onFinish={handleOnFinish} /> ); diff --git a/src/pages/maas-provider/components/provider-models.tsx b/src/pages/maas-provider/components/provider-models.tsx index e208528a..97ff6612 100644 --- a/src/pages/maas-provider/components/provider-models.tsx +++ b/src/pages/maas-provider/components/provider-models.tsx @@ -1,5 +1,4 @@ import AutoTooltip from '@/components/auto-tooltip'; -import { modelCategoriesMap } from '@/pages/llmodels/config'; import { CheckCircleOutlined, CloseCircleOutlined, @@ -8,56 +7,13 @@ import { import { Flex, Tag } from 'antd'; import React from 'react'; import { categoryConfig } from '../../_components/model-tag'; +import { ProviderModel } from '../config/types'; interface ProviderModelProps { - dataList: any[]; - provider: string; - providerId: number; + dataList: ProviderModel[]; } -const models: { - name: string; - status: 'accessible' | 'inaccessible' | 'none'; - type: string; -}[] = [ - { - name: 'model-1', - status: 'accessible', - type: modelCategoriesMap.llm - }, - { - name: 'model-2', - status: 'inaccessible', - type: modelCategoriesMap.embedding - }, - { - name: 'model-3', - status: 'none', - type: modelCategoriesMap.image - }, - { - name: 'model-4', - status: 'accessible', - type: modelCategoriesMap.llm - }, - { - name: 'model-5', - status: 'inaccessible', - type: modelCategoriesMap.embedding - }, - { - name: 'model-6model-6model-6model-6model-6model-6model-6', - status: 'none', - type: modelCategoriesMap.image - }, - { - name: 'model-7', - status: 'accessible', - type: modelCategoriesMap.llm - } -]; - -const ProviderModels: React.FC = () => { +const ProviderModels: React.FC = ({ dataList }) => { const iconsMap = { accessible: , inaccessible: , @@ -66,10 +22,14 @@ const ProviderModels: React.FC = () => { return (
- {models.map((model) => ( + {dataList.map((model) => ( = () => { } }} color={ - model.status === 'accessible' + model.accessible === true ? 'success' - : model.status === 'inaccessible' + : model.accessible === false ? 'error' : 'warning' } @@ -92,7 +52,7 @@ const ProviderModels: React.FC = () => { {model.name} - {categoryConfig[model.type]?.icon} + {categoryConfig[model.category]?.icon} diff --git a/src/pages/maas-provider/config/form-context.ts b/src/pages/maas-provider/config/form-context.ts index 4e26046b..57f292dc 100644 --- a/src/pages/maas-provider/config/form-context.ts +++ b/src/pages/maas-provider/config/form-context.ts @@ -1,8 +1,9 @@ import { PageActionType } from '@/config/types'; import { createContext, useContext } from 'react'; +import { maasProviderType } from '.'; interface FormContextProps { - providerType?: string; + providerType?: maasProviderType; action?: PageActionType; } diff --git a/src/pages/maas-provider/config/mock.ts b/src/pages/maas-provider/config/mock.ts deleted file mode 100644 index a77323d1..00000000 --- a/src/pages/maas-provider/config/mock.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { MaasProviderItem } from '../config/types'; - -// mock data for MaasProviderItem 5 items -export const mockDataList: MaasProviderItem[] = [ - { - id: 1, - name: 'Doubao', - state: 'Ready', - models: 5, - state_message: '', - provider: 'doubao', - api_tokens: ['token1', 'token2'], - proxy_url: 'http://proxy.example.com', - builtIn: false - }, - { - id: 2, - models: 3, - name: 'Qwen', - state: 'inactive', - state_message: 'Provider is inactive', - provider: 'qwen', - proxy_url: 'http://proxy2.example.com', - - builtIn: true - }, - { - id: 3, - models: 8, - name: 'OpenAI', - state: 'ready', - state_message: '', - proxy_url: null, - api_tokens: ['tokenA'], - provider: 'openai', - builtIn: false - }, - { - id: 4, - models: 2, - name: 'Deepseek', - state: 'ready', - state_message: '', - provider: 'deepseek', - proxy_url: null, - api_tokens: ['tokenX', 'tokenY'], - builtIn: false - }, - { - id: 5, - models: 4, - name: 'Anthropic', - state: 'inactive', - state_message: 'Provider is inactive', - provider: 'claude', - proxy_url: {}, - builtIn: true - } -]; diff --git a/src/pages/maas-provider/config/types.ts b/src/pages/maas-provider/config/types.ts index f8e15dcb..da05eead 100644 --- a/src/pages/maas-provider/config/types.ts +++ b/src/pages/maas-provider/config/types.ts @@ -1,9 +1,14 @@ import { maasProviderType } from '.'; - +export interface ProviderModel { + name: string; + category: string; + accessible: boolean | null; +} export interface FormData { name: string; description: string; api_tokens: string[]; + models: ProviderModel[]; config: { type: maasProviderType; [key: string]: any; @@ -15,7 +20,7 @@ export interface MaasProviderItem extends FormData { updated_at: string; deleted_at: string; timeout: number; - support_models: unknown[]; + models: ProviderModel[]; proxy_url: string; proxy_timeout: number; builtin: boolean; diff --git a/src/pages/maas-provider/forms/access-token.tsx b/src/pages/maas-provider/forms/access-token.tsx index 1884c132..25637e8d 100644 --- a/src/pages/maas-provider/forms/access-token.tsx +++ b/src/pages/maas-provider/forms/access-token.tsx @@ -8,13 +8,16 @@ const AccessToken = () => { const intl = useIntl(); const { getRuleMessage } = useAppUtils(); const form = Form.useFormInstance(); + const tokenList = Form.useWatch('api_tokens', form) || []; - const handleOnChange = (values: string[]) => {}; + const handleOnChange = (values: string[]) => { + form.setFieldValue('api_tokens', values); + }; return ( <> { required={true} btnText={intl.formatMessage({ id: 'providers.form.tokens.add' })} label={intl.formatMessage({ id: 'providers.form.tokens.title' })} - dataList={[]} + dataList={tokenList} onChange={handleOnChange} > diff --git a/src/pages/maas-provider/forms/advance-config.tsx b/src/pages/maas-provider/forms/advance-config.tsx index 4ef86024..3d8c993c 100644 --- a/src/pages/maas-provider/forms/advance-config.tsx +++ b/src/pages/maas-provider/forms/advance-config.tsx @@ -4,14 +4,12 @@ import YamlEditor from '@/pages/_components/yaml-editor'; import { useIntl } from '@umijs/max'; import { Form } from 'antd'; import React, { forwardRef, useImperativeHandle } from 'react'; -import { maasProviderType } from '../config'; import ProxyConfig from './proxy-config'; const AdvanceConfig: React.FC<{ action: PageActionType; - provider?: maasProviderType; ref?: any; -}> = forwardRef(({ action, provider }, ref) => { +}> = forwardRef(({ action }, ref) => { const form = Form.useFormInstance(); const intl = useIntl(); const editorRef = React.useRef(null); diff --git a/src/pages/maas-provider/forms/basic.tsx b/src/pages/maas-provider/forms/basic.tsx index 66d23f65..5480d226 100644 --- a/src/pages/maas-provider/forms/basic.tsx +++ b/src/pages/maas-provider/forms/basic.tsx @@ -1,5 +1,6 @@ import SealInput from '@/components/seal-form/seal-input'; import SealSelect from '@/components/seal-form/seal-select'; +import useAppUtils from '@/hooks/use-app-utils'; import { useIntl } from '@umijs/max'; import { Form } from 'antd'; import ProviderLogo from '../components/provider-logo'; @@ -9,6 +10,7 @@ import { FormData } from '../config/types'; const Basic = () => { const intl = useIntl(); const form = Form.useFormInstance(); + const { getRuleMessage } = useAppUtils(); const optionRender = (option: any) => { return ( @@ -29,9 +31,21 @@ const Basic = () => { })} /> - name={['config', 'type']}> + + name={['config', 'type']} + rules={[ + { + required: true, + message: getRuleMessage( + 'select', + intl.formatMessage({ id: 'providers.table.providerName' }) + ) + } + ]} + > Promise; } @@ -37,7 +35,7 @@ const TABKeysMap = { }; const ProviderForm: React.FC = forwardRef((props, ref) => { - const { action, provider, currentData, onFinish } = props; + const { action, currentData, onFinish } = props; const intl = useIntl(); const [form] = Form.useForm(); const { getScrollElementScrollableHeight } = useWrapperContext(); @@ -83,10 +81,13 @@ const ProviderForm: React.FC = forwardRef((props, ref) => { })); useEffect(() => { - if (action === PageAction.EDIT && currentData) { + if ( + (action === PageAction.EDIT || action === PageAction.COPY) && + currentData + ) { form.setFieldsValue({ ...currentData, - models: currentData.models || [] + proxy_enabled: !!currentData.proxy_url }); } }, [form, currentData, action]); @@ -104,16 +105,14 @@ const ProviderForm: React.FC = forwardRef((props, ref) => { }} getScrollElementScrollableHeight={getScrollElementScrollableHeight} > - +
@@ -133,12 +132,7 @@ const ProviderForm: React.FC = forwardRef((props, ref) => { key: TABKeysMap.ADVANCED, label: intl.formatMessage({ id: 'resources.form.advanced' }), forceRender: true, - children: ( - - ) + children: } ]} > diff --git a/src/pages/maas-provider/forms/model-item.tsx b/src/pages/maas-provider/forms/model-item.tsx new file mode 100644 index 00000000..a6f7449e --- /dev/null +++ b/src/pages/maas-provider/forms/model-item.tsx @@ -0,0 +1,134 @@ +import SealSelect from '@/components/seal-form/seal-select'; +import { categoryOptions } from '@/pages/llmodels/config'; +import { + CheckCircleFilled, + CloseCircleFilled, + LoadingOutlined +} from '@ant-design/icons'; +import { useIntl } from '@umijs/max'; +import { Button, Form, Tooltip } from 'antd'; +import React from 'react'; +import styled from 'styled-components'; +import { FormData, ProviderModel } from '../config/types'; +import { useTestProviderModel } from '../hooks/use-query-provider-models'; + +const SelectWrapper = styled.div` + width: 100%; + display: grid; + grid-template-columns: 265px 160px max-content; + align-items: center; + gap: 8px; + .icon-wrapper { + display: flex; + align-items: center; + height: 100%; + } +`; + +interface ModelItemProps { + onOpenChange: (open: boolean) => void; + onChange: (data: ProviderModel) => void; + providerModelList: ProviderModel[]; + item: ProviderModel; + loading?: boolean; +} + +const ModelItem: React.FC = ({ + onOpenChange, + onChange, + loading, + providerModelList, + item +}) => { + const intl = useIntl(); + const form = Form.useFormInstance(); + const { runTestModel, loading: testLoading } = useTestProviderModel(); + + const handleTestModel = async () => { + const res = await runTestModel({ + data: { + model_name: item.name, + api_token: form.getFieldValue('api_tokens')?.[0] || '', + config: { + type: form.getFieldValue(['config', 'type']) || '' + } + } + }); + onChange({ + ...item, + accessible: res.accessible + }); + }; + + const handleOnChange = (value: string) => { + onChange({ + ...item, + accessible: null, + name: value + }); + }; + + const handleOnCategoryChange = (value: string) => { + onChange({ + ...item, + category: value + }); + }; + + const renderSuffixIcon = () => { + if (testLoading) { + return ; + } + if (item.accessible === true) { + return ( + + ); + } + if (item.accessible === false) { + return ( + + ); + } + return null; + }; + + return ( + + + + + + + + ); +}; + +export default ModelItem; diff --git a/src/pages/maas-provider/forms/proxy-config.tsx b/src/pages/maas-provider/forms/proxy-config.tsx index 0f02e42a..28048a1c 100644 --- a/src/pages/maas-provider/forms/proxy-config.tsx +++ b/src/pages/maas-provider/forms/proxy-config.tsx @@ -12,36 +12,44 @@ const AdvanceConfig = () => { const intl = useIntl(); const { action } = useFormContext(); const proxyConfigRef = React.useRef({}); - const proxyConfigEnabled = Form.useWatch(['proxy_config', 'enabled'], form); + const proxyConfigEnabled = Form.useWatch('proxy_enabled', form); - const handleSpeculativeEnabledChange = (e: any) => { + const handleProxyEnabledChange = (e: any) => { if (e.target.checked) { - form.setFieldValue('speculative_config', { - enabled: true, - url: proxyConfigRef.current?.url || '', - timeout: proxyConfigRef.current?.timeout || 30 + form.setFieldsValue({ + proxy_enabled: true, + proxy_url: proxyConfigRef.current.proxy_url || '', + proxy_timeout: proxyConfigRef.current.proxy_timeout || 30 }); } else { - proxyConfigRef.current = form.getFieldValue('proxy_config'); + proxyConfigRef.current = form.getFieldsValue([ + 'proxy_url', + 'proxy_timeout' + ]); + form.setFieldsValue({ + proxy_enabled: false, + proxy_url: '', + proxy_timeout: 30 + }); } }; return ( <> {proxyConfigEnabled && ( <> { placeholder="http://proxy.example.com:8080" > - + { const intl = useIntl(); + const { providerModelList, loading, fetchProviderModels } = + useQueryProviderModels(); const form = Form.useFormInstance(); + const modelList = Form.useWatch('models', form) || []; - const handleTestModel = (data: any) => { - data.loading = true; - setTimeout(() => { - data.loading = false; - }, 1000); - }; + const handleOpenChange = async (open: boolean) => { + try { + await form.validateFields(['api_tokens', ['config', 'type']]); - const renderModelItem = ( - data: any, - { - onChange, - onBlur - }: { onChange: (value: string) => void; onBlur?: (e: any) => void } - ) => { - return ( - - + if (open && providerModelList.length === 0) { + fetchProviderModels({ + data: { + api_token: form.getFieldValue('api_tokens')?.[0] || '', + config: { + type: form.getFieldValue(['config', 'type']) || '' + } } - alwaysFocus={true} - value={data.value} - onChange={onChange} - onBlur={onBlur} - options={[ - { label: 'Model A', value: 'model_a' }, - { label: 'Model B', value: 'model_b' }, - { label: 'Model C', value: 'model_c' } - ]} - /> - - - ); + }); + } + } catch (error) {} }; - const handleOnChange = (values: string[]) => {}; + const updateModelList = (models: ProviderModel[]) => { + form.setFieldsValue({ + models: models + }); + }; + + const onAdd = () => { + const newList = [...modelList]; + newList.push({ name: '', category: '', accessible: null }); + updateModelList(newList); + }; + + const onDelete = (index: number) => { + const newList = [...modelList]; + newList.splice(index, 1); + updateModelList(newList); + }; + + const onChange = (data: ProviderModel, index: number) => { + const newList = [...modelList]; + newList[index] = { ...data }; + updateModelList(newList); + }; return ( <> - -
- + + onAdd={onAdd} + onDelete={onDelete} + > + {(item, index) => ( + onChange(data, index)} + loading={loading} + providerModelList={providerModelList} + item={item} + > + )} + ); diff --git a/src/pages/maas-provider/hooks/use-create-provider.ts b/src/pages/maas-provider/hooks/use-create-provider.ts index 0277acc6..7c1ffe16 100644 --- a/src/pages/maas-provider/hooks/use-create-provider.ts +++ b/src/pages/maas-provider/hooks/use-create-provider.ts @@ -1,7 +1,6 @@ import { PageAction } from '@/config'; import { PageActionType } from '@/config/types'; import { useState } from 'react'; -import { maasProviderType } from '../config'; import { MaasProviderItem as ListItem } from '../config/types'; const useCreateProvider = (options: { refresh: () => void }) => { @@ -10,13 +9,11 @@ const useCreateProvider = (options: { refresh: () => void }) => { action: PageActionType; currentData?: ListItem; title: string; - provider: maasProviderType | null; }>({ open: false, action: PageAction.CREATE, currentData: undefined, - title: '', - provider: null + title: '' }); const openModal = (action: PageActionType, title: string, row?: ListItem) => { @@ -25,8 +22,7 @@ const useCreateProvider = (options: { refresh: () => void }) => { open: true, title: title, action, - currentData: row, - provider: row ? row.provider : null + currentData: row }); }; @@ -35,8 +31,7 @@ const useCreateProvider = (options: { refresh: () => void }) => { open: false, action: PageAction.CREATE, currentData: undefined, - title: '', - provider: null + title: '' }); }; diff --git a/src/pages/maas-provider/hooks/use-provider-columns.tsx b/src/pages/maas-provider/hooks/use-provider-columns.tsx index aa699d7b..74921880 100644 --- a/src/pages/maas-provider/hooks/use-provider-columns.tsx +++ b/src/pages/maas-provider/hooks/use-provider-columns.tsx @@ -10,7 +10,7 @@ import { useMemo } from 'react'; import ProviderLogo from '../components/provider-logo'; import ProviderModels from '../components/provider-models'; import { maasProviderLabelMap, rowActionList } from '../config'; -import { MaasProviderItem } from '../config/types'; +import { MaasProviderItem, ProviderModel } from '../config/types'; const useProviderColumns = ( handleSelect: (val: string, record: MaasProviderItem) => void, @@ -41,7 +41,7 @@ const useProviderColumns = ( }, { title: intl.formatMessage({ id: 'providers.table.providerName' }), - dataIndex: 'provider', + dataIndex: ['config', 'type'], sorter: tableSorter(2), span: 4, minWidth: 160, @@ -61,8 +61,9 @@ const useProviderColumns = ( dataIndex: 'models', span: 3, minWidth: 200, - sorter: tableSorter(3), - render: (value: number) => + render: (value: ProviderModel[]) => ( + + ) }, { title: intl.formatMessage({ id: 'common.table.createTime' }), diff --git a/src/pages/maas-provider/hooks/use-query-provider-models.ts b/src/pages/maas-provider/hooks/use-query-provider-models.ts new file mode 100644 index 00000000..56196bcd --- /dev/null +++ b/src/pages/maas-provider/hooks/use-query-provider-models.ts @@ -0,0 +1,102 @@ +import { createAxiosToken } from '@/hooks/use-chunk-request'; +import { useRequest } from 'ahooks'; +import { message } from 'antd'; +import { CancelTokenSource } from 'axios'; +import { useEffect, useRef, useState } from 'react'; +import { queryProviderModels, testProviderModel } from '../apis'; + +/** + * + * @returns loading, fetch, dataList + */ +export const useQueryProviderModels = () => { + const axiosTokenRef = useRef(null); + const [providerModelList, setProviderModelList] = useState([]); + + const { + run: fetchProviderModels, + loading, + cancel + } = useRequest( + async (params: { + data: { api_token: string; config: { type: string } }; + }) => { + axiosTokenRef.current?.cancel(); + axiosTokenRef.current = createAxiosToken(); + return await queryProviderModels(params, { + token: axiosTokenRef.current.token + }); + }, + { + manual: true, + onSuccess: (response) => { + setProviderModelList( + response.data?.map((item: any) => ({ + label: item.id, + value: item.id + })) || [] + ); + }, + onError: () => { + setProviderModelList([]); + } + } + ); + + useEffect(() => { + return () => { + cancel(); + axiosTokenRef.current?.cancel(); + }; + }, []); + + return { + loading, + providerModelList, + fetchProviderModels + }; +}; + +export const useTestProviderModel = () => { + const axiosTokenRef = useRef(null); + + const { + runAsync: runTestModel, + loading, + cancel + } = useRequest( + async (params: { + data: { api_token: string; config: { type: string }; model_name: string }; + }) => { + axiosTokenRef.current?.cancel(); + axiosTokenRef.current = createAxiosToken(); + const response = await testProviderModel(params, { + token: axiosTokenRef.current.token + }); + return response; + }, + { + manual: true, + onSuccess: (response) => { + if (!response?.accessible) { + message.error(response?.error_message || 'Test model failed'); + } + }, + onError: (error) => { + message.error(error?.message || 'Test model failed'); + } + } + ); + + useEffect(() => { + return () => { + cancel(); + axiosTokenRef.current?.cancel(); + }; + }, []); + + return { + loading, + runTestModel + }; +}; diff --git a/src/pages/maas-provider/index.tsx b/src/pages/maas-provider/index.tsx index 659d92f1..73916d5c 100644 --- a/src/pages/maas-provider/index.tsx +++ b/src/pages/maas-provider/index.tsx @@ -7,7 +7,6 @@ import { PageAction } from '@/config'; import { TABLE_SORT_DIRECTIONS } from '@/config/settings'; import useExpandedRowKeys from '@/hooks/use-expanded-row-keys'; import useTableFetch from '@/hooks/use-table-fetch'; -import useWatchList from '@/hooks/use-watch-list'; import { useIntl } from '@umijs/max'; import { useMemoizedFn } from 'ahooks'; import { ConfigProvider, message, Table } from 'antd'; @@ -16,16 +15,15 @@ import _ from 'lodash'; import NoResult from '../_components/no-result'; import PageBox from '../_components/page-box'; import { + createProvider, deleteProvider, MAAS_PROVIDERS_API, - PROVIDER_MODELS_API, queryMaasProviders, updateProvider } from './apis'; import AddMaasProvider from './components/add-provider-modal'; import ProviderModels from './components/provider-models'; import { maasProviderOptions } from './config'; -import { mockDataList } from './config/mock'; import { FormData, MaasProviderItem as ListItem, @@ -50,12 +48,10 @@ const MaasProvider: React.FC = () => { } = useTableFetch({ fetchAPI: queryMaasProviders, deleteAPI: deleteProvider, - watch: true, + watch: false, API: MAAS_PROVIDERS_API, contentForDelete: 'menu.models.providers' }); - const { watchDataList: allProviderModels } = - useWatchList(PROVIDER_MODELS_API); const [expandAtom] = useAtom(expandKeysAtom); const { handleExpandChange, handleExpandAll, expandedRowKeys } = useExpandedRowKeys(expandAtom); @@ -83,6 +79,14 @@ const MaasProvider: React.FC = () => { id: openProviderModalStatus.currentData!.id }); } + if ( + openProviderModalStatus.action === PageAction.CREATE || + openProviderModalStatus.action === PageAction.COPY + ) { + await createProvider({ + data: params + }); + } fetchData(); closeProviderModal(); message.success(intl.formatMessage({ id: 'common.message.success' })); @@ -112,7 +116,7 @@ const MaasProvider: React.FC = () => { handleDelete({ ...row, name: row.name }); } if (val === 'copy') { - openProviderModal(PageAction.EDIT, 'Copy Provider', row); + openProviderModal(PageAction.COPY, 'Copy Provider', row); } }); @@ -149,13 +153,7 @@ const MaasProvider: React.FC = () => { list: any, options: { parent?: any; [key: string]: any } ) => { - return ( - - ); + return ; }; const renderEmpty = (type?: string) => { @@ -215,7 +213,7 @@ const MaasProvider: React.FC = () => { renderChildren={renderChildren} onTableSort={handleOnSortChange} showSorterTooltip={false} - dataSource={mockDataList} + dataSource={dataSource.dataList} loading={dataSource.loading} loadend={dataSource.loadend} rowSelection={rowSelection} @@ -235,7 +233,6 @@ const MaasProvider: React.FC = () => { []>( - `${ACCESS_API}/${params.id}/points`, + `${ACCESS_API}/${params.id}/access`, { method: 'GET', cancelToken: options?.token diff --git a/src/pages/model-access/config/index.ts b/src/pages/model-access/config/index.ts index 1a7924a2..24340c8a 100644 --- a/src/pages/model-access/config/index.ts +++ b/src/pages/model-access/config/index.ts @@ -2,47 +2,6 @@ import icons from '@/components/icon-font/icons'; import { StatusMaps } from '@/config'; import { StatusType } from '@/config/types'; -export type maasProviderType = - | 'doubao' - | 'qwen' - | 'openai' - | 'deepseek' - | 'anthropic'; - -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 ProviderStatusValueMap: Record = { Ready: 'Ready', InActive: 'Inactive' diff --git a/src/pages/model-access/index.tsx b/src/pages/model-access/index.tsx index 2d38fc6e..7a3af265 100644 --- a/src/pages/model-access/index.tsx +++ b/src/pages/model-access/index.tsx @@ -27,7 +27,6 @@ import { } from './apis'; import AccessPoints from './components/access-points'; import AddAccessModal from './components/add-access-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'; @@ -186,12 +185,6 @@ const Accesses: React.FC = () => { handleSearch={handleSearch} handleDeleteByBatch={handleDeleteBatch} handleClickPrimary={handleClickDropdown} - actionItems={maasProviderOptions.map((option) => ({ - ...option, - icon: ( - - ) - }))} >