Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-26 11:44:28 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor(styles): adjust border-radius and padding in various components for improved UI consistency; update layout in settings pages

Browse Source
This commit is contained in:
Teo 2025-06-12 17:04:41 +08:00
parent 1124090d87
commit 73fced37b4
8 changed files with 61 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/renderer/src/assets/styles/ant.scss
View File

@ -207,7 +207,7 @@
max-height: 40vh;
overflow-y: auto;
border: 0.5px solid var(--color-border);
border-radius: 16px;
border-radius: 12px;
.ant-dropdown-menu-item {
padding: 5px;
@ -218,7 +218,7 @@
}
.ant-popover-inner {
border: 0.5px solid var(--color-border);
border-radius: 16px;
border-radius: 12px;
.ant-popover-inner-content {
max-height: 70vh;
overflow-y: auto;
@ -229,6 +229,25 @@
border: none;
}
}
.ant-modal {
.ant-modal-content {
border-radius: 12px !important;
border: 0.5px solid var(--color-border) !important;
padding: 0 0 8px 0 !important;
.ant-modal-header {
padding: 16px 16px 0 16px !important;
border-radius: 12px;
}
.ant-modal-body {
max-height: 80vh;
overflow-y: auto;
padding: 0 16px 0 16px;
}
.ant-modal-footer {
padding: 0 16px 8px 16px;
}
}
}
.ant-collapse {
border: 1px solid var(--color-border);
@ -238,7 +257,7 @@
}
.ant-collapse-content {
border-top: 1px solid var(--color-border) !important;
border-top: 0.5px solid var(--color-border) !important;
.ant-color-picker & {
border-top: none !important;
}

9
src/renderer/src/context/AntdProvider.tsx
View File

@ -43,10 +43,15 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
paddingInline: 10
},
Input: {
controlHeight: 30
controlHeight: 30,
colorBorder: 'var(--color-border)'
},
InputNumber: {
colorBorder: 'var(--color-border)'
},
Select: {
controlHeight: 30
controlHeight: 30,
colorBorder: 'var(--color-border)'
},
Collapse: {
headerBg: 'transparent'

22
src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
View File

@ -7,7 +7,7 @@ import { useTheme } from '@renderer/context/ThemeProvider'
import { useDefaultAssistant } from '@renderer/hooks/useAssistant'
import { AssistantSettings as AssistantSettingsType } from '@renderer/types'
import { getLeadingEmoji, modalConfirm } from '@renderer/utils'
import { Button, Col, Input, InputNumber, Modal, Popover, Row, Slider, Switch, Tooltip } from 'antd'
import { Button, Col, Flex, Input, InputNumber, Modal, Popover, Row, Slider, Switch, Tooltip } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { Dispatch, FC, SetStateAction, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -145,7 +145,7 @@ const AssistantSettings: FC = () => {
justifyContent: 'space-between'
}}>
{t('settings.assistant.model_params')}
<Button onClick={onReset} style={{ width: 90 }}>
<Button onClick={onReset} style={{ width: 60 }}>
{t('chat.settings.reset')}
</Button>
</SettingSubtitle>
@ -156,7 +156,7 @@ const AssistantSettings: FC = () => {
</Tooltip>
</Row>
<Row align="middle" style={{ marginBottom: 10 }} gutter={20}>
<Col span={21}>
<Col span={20}>
<Slider
min={0}
max={2}
@ -167,7 +167,7 @@ const AssistantSettings: FC = () => {
step={0.01}
/>
</Col>
<Col span={3}>
<Col span={4}>
<InputNumber
min={0}
max={2}
@ -185,7 +185,7 @@ const AssistantSettings: FC = () => {
</Tooltip>
</Row>
<Row align="middle" style={{ marginBottom: 10 }} gutter={20}>
<Col span={21}>
<Col span={20}>
<Slider
min={0}
max={1}
@ -196,7 +196,7 @@ const AssistantSettings: FC = () => {
step={0.01}
/>
</Col>
<Col span={3}>
<Col span={4}>
<InputNumber min={0} max={1} step={0.01} value={topP} onChange={onTopPChange} style={{ width: '100%' }} />
</Col>
</Row>
@ -207,7 +207,7 @@ const AssistantSettings: FC = () => {
</Tooltip>
</Row>
<Row align="middle" style={{ marginBottom: 10 }} gutter={20}>
<Col span={21}>
<Col span={20}>
<Slider
min={0}
max={20}
@ -218,7 +218,7 @@ const AssistantSettings: FC = () => {
step={1}
/>
</Col>
<Col span={3}>
<Col span={4}>
<InputNumber
min={0}
max={20}
@ -229,7 +229,7 @@ const AssistantSettings: FC = () => {
/>
</Col>
</Row>
<Row align="middle" style={{ marginBottom: 10 }}>
<Flex justify="space-between" align="center" style={{ marginBottom: 10 }}>
<HStack alignItems="center">
<Label>{t('chat.settings.max_tokens')}</Label>
<Tooltip title={t('chat.settings.max_tokens.tip')}>
@ -255,7 +255,7 @@ const AssistantSettings: FC = () => {
onUpdateAssistantSettings({ enableMaxTokens: enabled })
}}
/>
</Row>
</Flex>
{enableMaxTokens && (
<Row align="middle" gutter={20}>
<Col span={24}>
@ -307,7 +307,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
afterClose={onClose}
transitionName="animation-move-down"
centered
width={800}
width={500}
footer={null}>
<AssistantSettings />
</Modal>

7
src/renderer/src/pages/settings/ModelSettings/TopicNamingModalPopup.tsx
View File

@ -2,7 +2,7 @@ import { HStack } from '@renderer/components/Layout'
import { useSettings } from '@renderer/hooks/useSettings'
import { useAppDispatch } from '@renderer/store'
import { setEnableTopicNaming, setTopicNamingPrompt } from '@renderer/store/settings'
import { Button, Divider, Input, Modal, Switch } from 'antd'
import { Button, Input, Modal, Switch } from 'antd'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -45,14 +45,13 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
afterClose={onClose}
transitionName="animation-move-down"
footer={null}
width={500}
centered>
<Divider style={{ margin: '10px 0' }} />
<HStack style={{ gap: 10, marginBottom: 20, marginTop: 20 }} alignItems="center">
<div>{t('settings.models.enable_topic_naming')}</div>
<Switch checked={enableTopicNaming} onChange={(v) => dispatch(setEnableTopicNaming(v))} />
</HStack>
<Divider style={{ margin: '10px 0' }} />
<div style={{ marginBottom: 20 }}>
<div style={{ marginBottom: 8 }}>
<div style={{ marginBottom: 10 }}>{t('settings.models.topic_naming_prompt')}</div>
<Input.TextArea
rows={4}

2
src/renderer/src/pages/settings/ProviderSettings/AddModelPopup.tsx
View File

@ -121,7 +121,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve }) => {
tooltip={t('settings.models.add.group_name.tooltip')}>
<Input placeholder={t('settings.models.add.group_name.placeholder')} spellCheck={false} />
</Form.Item>
<Form.Item style={{ marginBottom: 0, textAlign: 'center' }}>
<Form.Item style={{ marginBottom: 8, textAlign: 'center' }}>
<Flex justify="end" align="center" style={{ position: 'relative' }}>
<Button type="primary" htmlType="submit" size="middle">
{t('settings.models.add.add_model')}

10
src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx
View File

@ -253,10 +253,6 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
afterClose={onClose}
footer={null}
width="800px"
styles={{
content: { padding: 0 },
header: { padding: '16px 22px 30px 22px' }
}}
transitionName="animation-move-down"
centered>
<SearchContainer>
@ -378,8 +374,6 @@ const SearchContainer = styled.div`
display: flex;
flex-direction: column;
gap: 15px;
padding: 0 22px;
margin-top: -10px;
.ant-radio-group {
display: flex;
@ -396,12 +390,10 @@ const TopToolsWrapper = styled.div`
const ListContainer = styled.div`
height: calc(100vh - 300px);
overflow-y: scroll;
padding: 0 6px 16px 6px;
margin-left: 16px;
margin-right: 10px;
display: flex;
flex-direction: column;
gap: 16px;
padding-right: 2px;
`
const FlexColumn = styled.div`

41
src/renderer/src/pages/settings/ProviderSettings/ModelEditContent.tsx
View File

@ -1,4 +1,3 @@
import { DownOutlined, UpOutlined } from '@ant-design/icons'
import CopyIcon from '@renderer/components/Icons/CopyIcon'
import {
isEmbeddingModel,
@ -10,6 +9,7 @@ import {
import { Model, ModelType } from '@renderer/types'
import { getDefaultGroupName } from '@renderer/utils'
import { Button, Checkbox, Divider, Flex, Form, Input, message, Modal } from 'antd'
import { ChevronDown, ChevronUp } from 'lucide-react'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
@ -108,20 +108,25 @@ const ModelEditContent: FC<ModelEditContentProps> = ({ model, onUpdateModel, ope
tooltip={t('settings.models.add.group_name.tooltip')}>
<Input placeholder={t('settings.models.add.group_name.placeholder')} spellCheck={false} />
</Form.Item>
<Form.Item style={{ marginBottom: 15, textAlign: 'center' }}>
<Form.Item style={{ marginBottom: 8, textAlign: 'center' }}>
<Flex justify="space-between" align="center" style={{ position: 'relative' }}>
<MoreSettingsRow onClick={() => setShowModelTypes(!showModelTypes)}>
<Button
color="default"
variant="filled"
icon={showModelTypes ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
iconPosition="end"
onClick={() => setShowModelTypes(!showModelTypes)}
style={{ color: 'var(--color-text-3)' }}>
{t('settings.moresetting')}
<ExpandIcon>{showModelTypes ? <UpOutlined /> : <DownOutlined />}</ExpandIcon>
</MoreSettingsRow>
</Button>
<Button type="primary" htmlType="submit" size="middle">
{t('common.save')}
</Button>
</Flex>
</Form.Item>
{showModelTypes && (
<div>
<Divider style={{ margin: '0 0 15px 0' }} />
<div style={{ marginBottom: 8 }}>
<Divider style={{ margin: '16px 0 16px 0' }} />
<TypeTitle>{t('models.type.select')}:</TypeTitle>
{(() => {
const defaultTypes = [
@ -206,26 +211,4 @@ const TypeTitle = styled.div`
font-weight: 600;
`
const ExpandIcon = styled.div`
font-size: 12px;
color: var(--color-text-3);
`
const MoreSettingsRow = styled.div`
display: flex;
align-items: center;
gap: 8px;
color: var(--color-text-3);
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: var(--color-background-soft);
}
`
export default ModelEditContent

8
src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx
View File

@ -1,5 +1,5 @@
import { TopView } from '@renderer/components/TopView'
import { Button, Form, FormProps, Input, Modal } from 'antd'
import { Button, Flex, Form, FormProps, Input, Modal } from 'antd'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -66,7 +66,7 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
centered>
<Form
form={form}
labelCol={{ flex: '150px' }}
labelCol={{ flex: '110px' }}
labelAlign="right"
colon={false}
style={{ marginTop: 25 }}
@ -89,11 +89,11 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
<Form.Item name="name" label={t('settings.websearch.subscribe_name')}>
<Input placeholder={t('settings.websearch.subscribe_name.placeholder')} spellCheck={false} />
</Form.Item>
<Form.Item label=" ">
<Flex justify="end" style={{ marginBottom: 8 }}>
<Button type="primary" htmlType="submit">
{t('settings.websearch.subscribe_add')}
</Button>
</Form.Item>
</Flex>
</Form>
</Modal>
)