whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor(ModelList): replace FileItem with ListItem and HStack for improved layout and styling

Browse Source
This commit is contained in:
kangfenmao 2025-04-09 20:42:36 +08:00
parent 3462be2a2a
commit 5c44f71684
1 changed files with 52 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/renderer/src/pages/settings/ProviderSettings/ModelList.tsx
View File

@ -10,12 +10,12 @@ import {
SettingOutlined
} from '@ant-design/icons'
import CustomCollapse from '@renderer/components/CustomCollapse'
import { HStack } from '@renderer/components/Layout'
import ModelTagsWithLabel from '@renderer/components/ModelTagsWithLabel'
import { getModelLogo } from '@renderer/config/models'
import { PROVIDER_CONFIG } from '@renderer/config/providers'
import { useAssistants, useDefaultModel } from '@renderer/hooks/useAssistant'
import { useProvider } from '@renderer/hooks/useProvider'
import FileItem from '@renderer/pages/files/FileItem'
import { ModelCheckStatus } from '@renderer/services/HealthCheckService'
import { useAppDispatch } from '@renderer/store'
import { setModel } from '@renderer/store/assistants'
@ -270,11 +270,11 @@ const ModelList: React.FC<ModelListProps> = ({ providerId, modelStatuses = [], s
const isChecking = modelStatus?.checking === true
return (
<FileItem
key={model.id}
fileInfo={{
icon: <Avatar src={getModelLogo(model.id)}>{model?.name?.[0]?.toUpperCase()}</Avatar>,
name: (
<ListItem key={model.id}>
<HStack alignItems="center" gap={10} style={{ flex: 1 }}>
<Avatar src={getModelLogo(model.id)} style={{ width: 30, height: 30 }}>
{model?.name?.[0]?.toUpperCase()}
</Avatar>
<ListItemName>
<Tooltip
styles={{
@ -294,9 +294,7 @@ const ModelList: React.FC<ModelListProps> = ({ providerId, modelStatuses = [], s
</Tooltip>
<ModelTagsWithLabel model={model} size={11} />
</ListItemName>
),
ext: '.model',
actions: (
</HStack>
<Flex gap={4} align="center">
{renderLatencyText(modelStatus)}
{renderStatusIndicator(modelStatus)}
@ -313,9 +311,7 @@ const ModelList: React.FC<ModelListProps> = ({ providerId, modelStatuses = [], s
icon={<MinusOutlined />}
/>
</Flex>
)
}}
/>
</ListItem>
)
})}
</Flex>
@ -357,6 +353,16 @@ const ModelList: React.FC<ModelListProps> = ({ providerId, modelStatuses = [], s
)
}
const ListItem = styled.div`
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
color: var(--color-text);
font-size: 14px;
line-height: 1;
`
const ListItemName = styled.div`
display: flex;
flex-direction: row;