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