style(ProviderSetting): 优化提供商名称显示样式

将 ProviderName 组件从 span 改为 Typography.Text 以支持文本溢出省略
添加 flex 布局属性确保标题区域正确布局
This commit is contained in:
icarus 2025-08-09 11:21:09 +08:00
parent c76c2a62cf
commit 577477de33

View File

@ -13,7 +13,7 @@ import { isProviderSupportAuth } from '@renderer/services/ProviderService'
import { ApiKeyConnectivity, HealthStatus } from '@renderer/types/healthCheck'
import { formatApiHost, formatApiKeys, getFancyProviderName, isOpenAIProvider } from '@renderer/utils'
import { formatErrorMessage } from '@renderer/utils/error'
import { Button, Divider, Flex, Input, Space, Switch, Tooltip } from 'antd'
import { Button, Divider, Flex, Input, Space, Switch, Tooltip, Typography } from 'antd'
import Link from 'antd/es/typography/Link'
import { debounce, isEmpty } from 'lodash'
import { Check, Settings2, SquareArrowOutUpRight, TriangleAlert } from 'lucide-react'
@ -229,8 +229,8 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
return (
<SettingContainer theme={theme} style={{ background: 'var(--color-background)' }}>
<SettingTitle>
<Flex align="center" gap={5}>
<ProviderName>{fancyProviderName}</ProviderName>
<Flex align="center" gap={5} flex={1} style={{ overflow: 'hidden' }}>
<ProviderName ellipsis>{fancyProviderName}</ProviderName>
{officialWebsite && (
<Link target="_blank" href={providerConfig.websites.official} style={{ display: 'flex' }}>
<Button type="text" size="small" icon={<SquareArrowOutUpRight size={14} />} />
@ -372,7 +372,7 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
)
}
const ProviderName = styled.span`
const ProviderName = styled(Typography.Text)`
font-size: 14px;
font-weight: 500;
margin-right: -2px;