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

98
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,52 +270,48 @@ 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={{
root: { root: {
width: 'auto', width: 'auto',
maxWidth: '500px' maxWidth: '500px'
}
}}
destroyTooltipOnHide
title={
<Typography.Text style={{ color: 'white' }} copyable={{ text: model.id }}>
{model.id}
</Typography.Text>
} }
placement="top"> }}
<span>{model.name}</span> destroyTooltipOnHide
</Tooltip> title={
<ModelTagsWithLabel model={model} size={11} /> <Typography.Text style={{ color: 'white' }} copyable={{ text: model.id }}>
</ListItemName> {model.id}
), </Typography.Text>
ext: '.model', }
actions: ( placement="top">
<Flex gap={4} align="center"> <span>{model.name}</span>
{renderLatencyText(modelStatus)} </Tooltip>
{renderStatusIndicator(modelStatus)} <ModelTagsWithLabel model={model} size={11} />
<Button </ListItemName>
type="text" </HStack>
onClick={() => !isChecking && onEditModel(model)} <Flex gap={4} align="center">
disabled={isChecking} {renderLatencyText(modelStatus)}
icon={<SettingOutlined />} {renderStatusIndicator(modelStatus)}
/> <Button
<Button type="text"
type="text" onClick={() => !isChecking && onEditModel(model)}
onClick={() => !isChecking && removeModel(model)} disabled={isChecking}
disabled={isChecking} icon={<SettingOutlined />}
icon={<MinusOutlined />} />
/> <Button
</Flex> type="text"
) onClick={() => !isChecking && removeModel(model)}
}} disabled={isChecking}
/> icon={<MinusOutlined />}
/>
</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;