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

feat(ProviderSetting.tsx): add remove icon for models to allow deletion

Browse Source
This commit is contained in:
kangfenmao 2024-07-26 10:40:53 +08:00
parent 8c80cc00b3
commit c0e51c3992
1 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/renderer/src/pages/settings/components/ProviderSetting.tsx
View File

@ -6,7 +6,14 @@ import { useProvider } from '@renderer/hooks/useProvider'
import { groupBy } from 'lodash' import { groupBy } from 'lodash'
import { SettingContainer, SettingSubtitle, SettingTitle } from '.' import { SettingContainer, SettingSubtitle, SettingTitle } from '.'
import { getModelLogo } from '@renderer/config/provider' import { getModelLogo } from '@renderer/config/provider'
import { CheckOutlined, EditOutlined, ExportOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons' import {
CheckOutlined,
EditOutlined,
ExportOutlined,
LoadingOutlined,
MinusCircleOutlined,
PlusOutlined
} from '@ant-design/icons'
import AddModelPopup from './AddModelPopup' import AddModelPopup from './AddModelPopup'
import EditModelsPopup from './EditModelsPopup' import EditModelsPopup from './EditModelsPopup'
import Link from 'antd/es/typography/Link' import Link from 'antd/es/typography/Link'
@ -24,7 +31,7 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
const [apiHost, setApiHost] = useState(provider.apiHost) const [apiHost, setApiHost] = useState(provider.apiHost)
const [apiValid, setApiValid] = useState(false) const [apiValid, setApiValid] = useState(false)
const [apiChecking, setApiChecking] = useState(false) const [apiChecking, setApiChecking] = useState(false)
const { updateProvider, models } = useProvider(provider.id) const { updateProvider, models, removeModel } = useProvider(provider.id)
const { t } = useTranslation() const { t } = useTranslation()
const modelGroups = groupBy(models, 'group') const modelGroups = groupBy(models, 'group')
@ -116,10 +123,13 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
<Card key={group} type="inner" title={group} style={{ marginBottom: '10px' }} size="small"> <Card key={group} type="inner" title={group} style={{ marginBottom: '10px' }} size="small">
{modelGroups[group].map((model) => ( {modelGroups[group].map((model) => (
<ModelListItem key={model.id}> <ModelListItem key={model.id}>
<ModelListHeader>
<Avatar src={getModelLogo(model.id)} size={22} style={{ marginRight: '8px' }}> <Avatar src={getModelLogo(model.id)} size={22} style={{ marginRight: '8px' }}>
{model.name[0].toUpperCase()} {model.name[0].toUpperCase()}
</Avatar> </Avatar>
{model.name} {model.name}
</ModelListHeader>
<RemoveIcon onClick={() => removeModel(model)} />
</ModelListItem> </ModelListItem>
))} ))}
</Card> </Card>
@ -154,10 +164,16 @@ const ModelListItem = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: space-between;
padding: 5px 0; padding: 5px 0;
` `
const ModelListHeader = styled.div`
display: flex;
flex-direction: row;
align-items: center;
`
const HelpTextRow = styled.div` const HelpTextRow = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -175,4 +191,15 @@ const HelpLink = styled(Link)`
padding: 0 5px; padding: 0 5px;
` `
const RemoveIcon = styled(MinusCircleOutlined)`
margin-left: 10px;
color: var(--color-error);
cursor: pointer;
transition: all 0.2s ease-in-out;
opacity: 0.75;
&:hover {
opacity: 1;
}
`
export default ProviderSetting export default ProviderSetting