chore: providers logo

This commit is contained in:
jialin
2026-02-03 18:21:08 +08:00
parent eb65cee280
commit 2211009cce
41 changed files with 317 additions and 4 deletions
@@ -0,0 +1,86 @@
import ai360 from '@/assets/providers-logo/ai360.svg';
import azure from '@/assets/providers-logo/azureai.svg';
import baichuan from '@/assets/providers-logo/baichuan.svg';
import baiduCloud from '@/assets/providers-logo/baiducloud.svg';
import bedrock from '@/assets/providers-logo/bedrock.svg';
import claude from '@/assets/providers-logo/claude.svg';
import cloudflare from '@/assets/providers-logo/cloudflare.svg';
import cohere from '@/assets/providers-logo/cohere.svg';
import coze from '@/assets/providers-logo/coze.svg';
import deepl from '@/assets/providers-logo/deepl.svg';
import deepseek from '@/assets/providers-logo/deepseek.svg';
import dify from '@/assets/providers-logo/dify.svg';
import doubao from '@/assets/providers-logo/doubao.svg';
import fireworks from '@/assets/providers-logo/fireworks.svg';
import gemini from '@/assets/providers-logo/gemini.svg';
import github from '@/assets/providers-logo/github.svg';
import grok from '@/assets/providers-logo/grok.svg';
import groq from '@/assets/providers-logo/groq.svg';
import hunyuan from '@/assets/providers-logo/hunyuan.svg';
import longcat from '@/assets/providers-logo/longcat.svg';
import minimax from '@/assets/providers-logo/minimax.svg';
import mistral from '@/assets/providers-logo/mistral.svg';
import moonshot from '@/assets/providers-logo/moonshot.svg';
import triton from '@/assets/providers-logo/nvidia.svg';
import ollama from '@/assets/providers-logo/ollama.svg';
import openai from '@/assets/providers-logo/openai.svg';
import openrouter from '@/assets/providers-logo/openrouter.svg';
import qwen from '@/assets/providers-logo/qwen.svg';
import spark from '@/assets/providers-logo/spark.svg';
import stepfun from '@/assets/providers-logo/stepfun.svg';
import togetherai from '@/assets/providers-logo/together.svg';
import yi from '@/assets/providers-logo/yi.svg';
import zhipuai from '@/assets/providers-logo/zhipu.svg';
import { ProviderEnum } from '../config/providers';
const ProviderLogoMap: Record<string, string> = {
[ProviderEnum.BAIDU]: baiduCloud,
[ProviderEnum.FIREWORKS]: fireworks,
[ProviderEnum.GEMINI]: gemini,
[ProviderEnum.YI]: yi,
[ProviderEnum.AI360]: ai360,
[ProviderEnum.AZURE]: azure,
[ProviderEnum.BAICHUAN]: baichuan,
[ProviderEnum.BEDROCK]: bedrock,
[ProviderEnum.CLAUDE]: claude,
[ProviderEnum.CLOUDFLARE]: cloudflare,
[ProviderEnum.COHERE]: cohere,
[ProviderEnum.COZE]: coze,
[ProviderEnum.DEEPL]: deepl,
[ProviderEnum.DEEPSEEK]: deepseek,
[ProviderEnum.DIFY]: dify,
[ProviderEnum.DOUBAO]: doubao,
[ProviderEnum.GROK]: grok,
[ProviderEnum.GROQ]: groq,
[ProviderEnum.HUNYUAN]: hunyuan,
[ProviderEnum.LONGCAT]: longcat,
[ProviderEnum.MINIMAX]: minimax,
[ProviderEnum.MISTRAL]: mistral,
[ProviderEnum.MOONSHOT]: moonshot,
[ProviderEnum.OLLAMA]: ollama,
[ProviderEnum.OPENAI]: openai,
[ProviderEnum.OPENROUTER]: openrouter,
[ProviderEnum.QWEN]: qwen,
[ProviderEnum.SPARK]: spark,
[ProviderEnum.STEPFUN]: stepfun,
[ProviderEnum.TOGETHERAI]: togetherai,
[ProviderEnum.ZHIPUAI]: zhipuai,
[ProviderEnum.GITHUB]: github,
[ProviderEnum.TRITON]: triton
};
const ProviderLogo: React.FC<{
provider: string;
style?: React.CSSProperties;
}> = ({ provider, style }) => {
const logoSrc = ProviderLogoMap[provider] || '';
return (
<img
src={logoSrc}
alt={`${provider} logo`}
style={{ width: 16, height: 16, ...style }}
/>
);
};
export default ProviderLogo;
+39 -3
View File
@@ -34,11 +34,47 @@ export enum ProviderEnum {
ZHIPUAI = 'zhipuai'
}
export const ProviderI18nKeyMap: Record<ProviderEnum, string> = {
[ProviderEnum.AI360]: 'ai.provider.ai360',
[ProviderEnum.AZURE]: 'ai.provider.azure',
[ProviderEnum.BAICHUAN]: 'ai.provider.baichuan',
[ProviderEnum.BAIDU]: 'ai.provider.baidu',
[ProviderEnum.BEDROCK]: 'ai.provider.bedrock',
[ProviderEnum.CLAUDE]: 'ai.provider.claude',
[ProviderEnum.CLOUDFLARE]: 'ai.provider.cloudflare',
[ProviderEnum.COHERE]: 'ai.provider.cohere',
[ProviderEnum.COZE]: 'ai.provider.coze',
[ProviderEnum.DEEPL]: 'ai.provider.deepl',
[ProviderEnum.DEEPSEEK]: 'ai.provider.deepseek',
[ProviderEnum.DIFY]: 'ai.provider.dify',
[ProviderEnum.DOUBAO]: 'ai.provider.doubao',
[ProviderEnum.FIREWORKS]: 'ai.provider.fireworks',
[ProviderEnum.GEMINI]: 'ai.provider.gemini',
[ProviderEnum.GITHUB]: 'ai.provider.github',
[ProviderEnum.GROK]: 'ai.provider.grok',
[ProviderEnum.GROQ]: 'ai.provider.groq',
[ProviderEnum.HUNYUAN]: 'ai.provider.hunyuan',
[ProviderEnum.LONGCAT]: 'ai.provider.longcat',
[ProviderEnum.MINIMAX]: 'ai.provider.minimax',
[ProviderEnum.MISTRAL]: 'ai.provider.mistral',
[ProviderEnum.MOONSHOT]: 'ai.provider.moonshot',
[ProviderEnum.OLLAMA]: 'ai.provider.ollama',
[ProviderEnum.OPENAI]: 'ai.provider.openai',
[ProviderEnum.OPENROUTER]: 'ai.provider.openrouter',
[ProviderEnum.QWEN]: 'ai.provider.qwen',
[ProviderEnum.SPARK]: 'ai.provider.spark',
[ProviderEnum.STEPFUN]: 'ai.provider.stepfun',
[ProviderEnum.TOGETHERAI]: 'ai.provider.together-ai',
[ProviderEnum.TRITON]: 'ai.provider.triton',
[ProviderEnum.YI]: 'ai.provider.yi',
[ProviderEnum.ZHIPUAI]: 'ai.provider.zhipuai'
};
// generate provider list: {label: string;value:string}[]
export const maasProviderOptions = Object.entries(ProviderEnum).map(
([key, value]) => ({
locale: false,
label: key,
locale: true,
label: ProviderI18nKeyMap[value],
value: value,
key: value
})
@@ -49,7 +85,7 @@ export const maasProviderLabelMap: Record<string, string> = Object.entries(
ProviderEnum
).reduce(
(acc, [key, value]) => {
acc[value] = key;
acc[value] = ProviderI18nKeyMap[value];
return acc;
},
{} as Record<string, string>
+14
View File
@@ -2,12 +2,23 @@ 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 ProviderLogo from '../components/provider-logo';
import { maasProviderOptions } from '../config/providers';
import { FormData } from '../config/types';
const Basic = () => {
const intl = useIntl();
const form = Form.useFormInstance<FormData>();
const optionRender = (option: any) => {
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<ProviderLogo provider={option.value} />
<span style={{ marginLeft: 8 }}>{option.label}</span>
</div>
);
};
return (
<>
<Form.Item<FormData> name="name" data-field="name">
@@ -20,7 +31,10 @@ const Basic = () => {
</Form.Item>
<Form.Item<FormData> name={['config', 'type']}>
<SealSelect
showSearch
options={maasProviderOptions}
optionRender={optionRender}
labelRender={optionRender}
label={intl.formatMessage({
id: 'providers.table.providerName'
})}
@@ -10,6 +10,7 @@ import { useIntl } from '@umijs/max';
import { Tag } from 'antd';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import ProviderLogo from '../components/provider-logo';
import { maasProviderLabelMap, rowActionList } from '../config';
import { MaasProviderItem } from '../config/types';
@@ -46,8 +47,11 @@ const useProviderColumns = (
span: 4,
render: (value: string) => (
<>
<ProviderLogo provider={value} style={{ marginRight: 8 }} />
<AutoTooltip ghost minWidth={20}>
{maasProviderLabelMap[value]}
{maasProviderLabelMap[value]
? intl.formatMessage({ id: maasProviderLabelMap[value] })
: value}
</AutoTooltip>
</>
)