Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-09 23:10:20 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
将 ProviderName 组件从 span 改为 Typography.Text 以支持文本溢出省略
添加 flex 布局属性确保标题区域正确布局
This commit is contained in:
icarus 2025-08-09 11:21:09 +08:00
parent c76c2a62cf
commit 577477de33
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
View File

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