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

style(antd): Optimize antd components through patch method (#7683)

Browse Source 
* fix(dependencies): update antd to patch version 5.24.7 and apply custom patch

* refactor(AddAgentPopup): remove unused ChevronDown import

* feat(AntdProvider): add paddingXS to Dropdown component for improved layout
This commit is contained in:
Teo 2025-06-30 20:40:32 +08:00 committed by GitHub
parent 8c657b57f7
commit ad0b10c517
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 145 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
.yarn/patches/antd-npm-5.24.7-356a553ae5.patch vendored Normal file
View File

@ -0,0 +1,69 @@
diff --git a/es/dropdown/dropdown.js b/es/dropdown/dropdown.js
index 986877a762b9ad0aca596a8552732cd12d2eaabb..1f18aa2ea745e68950e4cee16d4d655f5c835fd5 100644
--- a/es/dropdown/dropdown.js
+++ b/es/dropdown/dropdown.js
@@ -2,7 +2,7 @@
import * as React from 'react';
import LeftOutlined from "@ant-design/icons/es/icons/LeftOutlined";
-import RightOutlined from "@ant-design/icons/es/icons/RightOutlined";
+import { ChevronRight } from 'lucide-react';
import classNames from 'classnames';
import RcDropdown from 'rc-dropdown';
import useEvent from "rc-util/es/hooks/useEvent";
@@ -158,8 +158,10 @@ const Dropdown = props => {
className: `${prefixCls}-menu-submenu-arrow`
}, direction === 'rtl' ? (/*#__PURE__*/React.createElement(LeftOutlined, {
className: `${prefixCls}-menu-submenu-arrow-icon`
- })) : (/*#__PURE__*/React.createElement(RightOutlined, {
- className: `${prefixCls}-menu-submenu-arrow-icon`
+ })) : (/*#__PURE__*/React.createElement(ChevronRight, {
+ size: 16,
+ strokeWidth: 1.8,
+ className: `${prefixCls}-menu-submenu-arrow-icon lucide-custom`
}))),
mode: "vertical",
selectable: false,
diff --git a/es/dropdown/style/index.js b/es/dropdown/style/index.js
index 768c01783002c6901c85a73061ff6b3e776a60ce..39b1b95a56cdc9fb586a193c3adad5141f5cf213 100644
--- a/es/dropdown/style/index.js
+++ b/es/dropdown/style/index.js
@@ -240,7 +240,8 @@ const genBaseStyle = token => {
marginInlineEnd: '0 !important',
color: token.colorTextDescription,
fontSize: fontSizeIcon,
- fontStyle: 'normal'
+ fontStyle: 'normal',
+ marginTop: 3,
}
}
}),
diff --git a/es/select/useIcons.js b/es/select/useIcons.js
index 959115be936ef8901548af2658c5dcfdc5852723..c812edd52123eb0faf4638b1154fcfa1b05b513b 100644
--- a/es/select/useIcons.js
+++ b/es/select/useIcons.js
@@ -4,10 +4,10 @@ import * as React from 'react';
import CheckOutlined from "@ant-design/icons/es/icons/CheckOutlined";
import CloseCircleFilled from "@ant-design/icons/es/icons/CloseCircleFilled";
import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
-import DownOutlined from "@ant-design/icons/es/icons/DownOutlined";
import LoadingOutlined from "@ant-design/icons/es/icons/LoadingOutlined";
import SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined";
import { devUseWarning } from '../_util/warning';
+import { ChevronDown } from 'lucide-react';
export default function useIcons(_ref) {
let {
suffixIcon,
@@ -56,8 +56,10 @@ export default function useIcons(_ref) {
className: iconCls
}));
}
- return getSuffixIconNode(/*#__PURE__*/React.createElement(DownOutlined, {
- className: iconCls
+ return getSuffixIconNode(/*#__PURE__*/React.createElement(ChevronDown, {
+ size: 16,
+ strokeWidth: 1.8,
+ className: `${iconCls} lucide-custom`
}));
};
}

2
package.json
View File

@ -135,7 +135,7 @@
"@vitest/ui": "^3.1.4",
"@vitest/web-worker": "^3.1.4",
"@xyflow/react": "^12.4.4",
"antd": "^5.22.5",
"antd": "patch:antd@npm%3A5.24.7#~/.yarn/patches/antd-npm-5.24.7-356a553ae5.patch",
"archiver": "^7.0.1",
"async-mutex": "^0.5.0",
"axios": "^1.7.3",

2
src/renderer/src/assets/styles/index.scss
View File

@ -170,7 +170,7 @@ ul {
}
}
.lucide {
.lucide:not(.lucide-custom) {
color: var(--color-icon);
}

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

@ -79,7 +79,8 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
Dropdown: {
controlPaddingHorizontal: 8,
borderRadiusLG: 10,
borderRadiusSM: 8
borderRadiusSM: 8,
paddingXS: 4
},
Popover: {
borderRadiusLG: 10

2
src/renderer/src/pages/agents/components/AddAgentPopup.tsx
View File

@ -14,7 +14,6 @@ import { Agent, KnowledgeBase } from '@renderer/types'
import { getLeadingEmoji, uuid } from '@renderer/utils'
import { Button, Form, FormInstance, Input, Modal, Popover, Select, SelectProps } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { ChevronDown } from 'lucide-react'
import { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import stringWidth from 'string-width'
@ -213,7 +212,6 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
.toLowerCase()
.includes(input.toLowerCase())
}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
</Form.Item>
)}

15
src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx
View File

@ -13,7 +13,6 @@ import { KnowledgeBase, Model } from '@renderer/types'
import { getErrorMessage } from '@renderer/utils/error'
import { Flex, Form, Input, InputNumber, Modal, Select, Slider, Switch } from 'antd'
import { find, sortBy } from 'lodash'
import { ChevronDown } from 'lucide-react'
import { nanoid } from 'nanoid'
import { useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -183,12 +182,7 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
label={t('models.embedding_model')}
tooltip={{ title: t('models.embedding_model_tooltip'), placement: 'right' }}
rules={[{ required: true, message: t('message.error.enter.model') }]}>
<Select
style={{ width: '100%' }}
options={embeddingSelectOptions}
placeholder={t('settings.models.empty')}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
<Select style={{ width: '100%' }} options={embeddingSelectOptions} placeholder={t('settings.models.empty')} />
</Form.Item>
<Form.Item
@ -196,12 +190,7 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
label={t('models.rerank_model')}
tooltip={{ title: t('models.rerank_model_tooltip'), placement: 'right' }}
rules={[{ required: false, message: t('message.error.enter.model') }]}>
<Select
style={{ width: '100%' }}
options={rerankSelectOptions}
placeholder={t('settings.models.empty')}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
<Select style={{ width: '100%' }} options={rerankSelectOptions} placeholder={t('settings.models.empty')} />
</Form.Item>
<SettingHelpText style={{ marginTop: -15, marginBottom: 20 }}>
{t('models.rerank_model_not_support_provider', {

9
src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx
View File

@ -140,13 +140,7 @@ const PopupContainer: React.FC<Props> = ({ base: _base, resolve }) => {
initialValue={getModelUniqId(base.model)}
tooltip={{ title: t('models.embedding_model_tooltip'), placement: 'right' }}
rules={[{ required: true, message: t('message.error.enter.model') }]}>
<Select
style={{ width: '100%' }}
options={selectOptions}
placeholder={t('settings.models.empty')}
disabled
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
<Select style={{ width: '100%' }} options={selectOptions} placeholder={t('settings.models.empty')} disabled />
</Form.Item>
<Form.Item
@ -160,7 +154,6 @@ const PopupContainer: React.FC<Props> = ({ base: _base, resolve }) => {
options={rerankSelectOptions}
placeholder={t('settings.models.empty')}
allowClear
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
</Form.Item>
<SettingHelpText style={{ marginTop: -15, marginBottom: 20 }}>

3
src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
View File

@ -3,7 +3,7 @@ import { Box } from '@renderer/components/Layout'
import { useAppSelector } from '@renderer/store'
import { Assistant, AssistantSettings } from '@renderer/types'
import { Row, Segmented, Select, SelectProps, Tooltip } from 'antd'
import { ChevronDown, CircleHelp } from 'lucide-react'
import { CircleHelp } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
@ -46,7 +46,6 @@ const AssistantKnowledgeBaseSettings: React.FC<Props> = ({ assistant, updateAssi
.toLowerCase()
.includes(input.toLowerCase())
}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
<Row align="middle" style={{ marginTop: 10 }}>
<Label>{t('assistants.settings.knowledge_base.recognition')}</Label>

5
src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
View File

@ -10,7 +10,6 @@ import { Assistant, AssistantSettingCustomParameters, AssistantSettings } from '
import { modalConfirm } from '@renderer/utils'
import { Button, Col, Divider, Input, InputNumber, Row, Select, Slider, Switch, Tooltip } from 'antd'
import { isNull } from 'lodash'
import { ChevronDown } from 'lucide-react'
import { FC, useCallback, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
@ -118,7 +117,6 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
{ label: 'true', value: true },
{ label: 'false', value: false }
]}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
)
case 'json':
@ -437,8 +435,7 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
<Select
value={param.type}
onChange={(value) => onUpdateCustomParameter(index, 'type', value)}
style={{ width: '100%' }}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}>
style={{ width: '100%' }}>
<Select.Option value="string">{t('models.parameter_type.string')}</Select.Option>
<Select.Option value="number">{t('models.parameter_type.number')}</Select.Option>
<Select.Option value="boolean">{t('models.parameter_type.boolean')}</Select.Option>

8
src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
View File

@ -16,7 +16,7 @@ import { setTranslateModelPrompt } from '@renderer/store/settings'
import { Model } from '@renderer/types'
import { Button, Select, Tooltip } from 'antd'
import { find, sortBy } from 'lodash'
import { ChevronDown, CircleHelp, FolderPen, Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
import { CircleHelp, FolderPen, Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
import { FC, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
@ -104,7 +104,6 @@ const ModelSettings: FC = () => {
options={selectOptions}
showSearch
placeholder={t('settings.models.empty')}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
<Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={DefaultAssistantSettings.show} />
</HStack>
@ -126,7 +125,6 @@ const ModelSettings: FC = () => {
options={selectOptions}
showSearch
placeholder={t('settings.models.empty')}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
<Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={TopicNamingModalPopup.show} />
</HStack>
@ -148,7 +146,6 @@ const ModelSettings: FC = () => {
options={selectOptions}
showSearch
placeholder={t('settings.models.empty')}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
<Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={onUpdateTranslateModel} />
{translateModelPrompt !== TRANSLATE_PROMPT && (
@ -194,8 +191,7 @@ const ModelSettings: FC = () => {
value={quickAssistantId || defaultAssistant.id}
style={{ width: 360 }}
onChange={(value) => dispatch(setQuickAssistantId(value))}
placeholder={t('settings.models.quick_assistant_selection')}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}>
placeholder={t('settings.models.quick_assistant_selection')}>
<Select.Option key={defaultAssistant.id} value={defaultAssistant.id}>
<AssistantItem>
<ModelAvatar model={defaultAssistant.model || defaultModel} size={18} />

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

@ -238,7 +238,6 @@ const ModelEditContent: FC<ModelEditContentProps> = ({ model, onUpdateModel, ope
}
}}
dropdownMatchSelectWidth={false}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
</Form.Item>

3
src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/CutoffSettings.tsx
View File

@ -1,7 +1,7 @@
import { useWebSearchSettings } from '@renderer/hooks/useWebSearchProviders'
import { SettingRow, SettingRowTitle } from '@renderer/pages/settings'
import { Input, Select, Space, Tooltip } from 'antd'
import { ChevronDown, Info } from 'lucide-react'
import { Info } from 'lucide-react'
import { useTranslation } from 'react-i18next'
const INPUT_BOX_WIDTH = '200px'
@ -50,7 +50,6 @@ const CutoffSettings = () => {
style={{ minWidth: '40%' }}
onChange={handleCutoffUnitChange}
options={unitOptions}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
</Space.Compact>
</SettingRow>

4
src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/RagSettings.tsx
View File

@ -10,7 +10,7 @@ import { getModelUniqId } from '@renderer/services/ModelService'
import { Model } from '@renderer/types'
import { Button, InputNumber, Select, Slider, Tooltip } from 'antd'
import { find, sortBy } from 'lodash'
import { ChevronDown, Info, RefreshCw } from 'lucide-react'
import { Info, RefreshCw } from 'lucide-react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -131,7 +131,6 @@ const RagSettings = () => {
onChange={handleEmbeddingModelChange}
allowClear={false}
showSearch
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
</SettingRow>
<SettingDivider />
@ -173,7 +172,6 @@ const RagSettings = () => {
onChange={handleRerankModelChange}
allowClear
showSearch
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
</SettingRow>
<SettingDivider />

2
src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/index.tsx
View File

@ -1,7 +1,6 @@
import { useWebSearchSettings } from '@renderer/hooks/useWebSearchProviders'
import { SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '@renderer/pages/settings'
import { Select } from 'antd'
import { ChevronDown } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import CutoffSettings from './CutoffSettings'
@ -33,7 +32,6 @@ const CompressionSettings = () => {
style={{ width: '200px' }}
onChange={handleCompressionMethodChange}
options={compressionMethodOptions}
suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
/>
</SettingRow>
<SettingDivider />

7
src/renderer/src/pages/translate/TranslatePage.tsx
View File

@ -23,7 +23,7 @@ import TextArea, { TextAreaRef } from 'antd/es/input/TextArea'
import dayjs from 'dayjs'
import { useLiveQuery } from 'dexie-react-hooks'
import { find, isEmpty, sortBy } from 'lodash'
import { ChevronDown, HelpCircle, Settings2, TriangleAlert } from 'lucide-react'
import { HelpCircle, Settings2, TriangleAlert } from 'lucide-react'
import { FC, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ReactMarkdown from 'react-markdown'
@ -126,7 +126,6 @@ const TranslateSettings: FC<{
}}
options={selectOptions}
showSearch
suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
/>
</HStack>
{!translateModel && (
@ -188,7 +187,6 @@ const TranslateSettings: FC<{
</Space.Compact>
)
}))}
suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
/>
<span>⇆</span>
<Select
@ -206,7 +204,6 @@ const TranslateSettings: FC<{
</Space.Compact>
)
}))}
suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
/>
</Flex>
)}
@ -455,7 +452,6 @@ const TranslatePage: FC = () => {
</Space.Compact>
)
}))}
suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
/>
)
}
@ -555,7 +551,6 @@ const TranslatePage: FC = () => {
)
}))
]}
suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
/>
<Button
type="text"

64
yarn.lock
View File

@ -5710,7 +5710,7 @@ __metadata:
"@vitest/ui": "npm:^3.1.4"
"@vitest/web-worker": "npm:^3.1.4"
"@xyflow/react": "npm:^12.4.4"
antd: "npm:^5.22.5"
antd: "patch:antd@npm%3A5.24.7#~/.yarn/patches/antd-npm-5.24.7-356a553ae5.patch"
archiver: "npm:^7.0.1"
async-mutex: "npm:^0.5.0"
axios: "npm:^1.7.3"
@ -6001,7 +6001,7 @@ __metadata:
languageName: node
linkType: hard
"antd@npm:^5.22.5":
"antd@npm:5.24.7":
version: 5.24.7
resolution: "antd@npm:5.24.7"
dependencies:
@ -6061,6 +6061,66 @@ __metadata:
languageName: node
linkType: hard
"antd@patch:antd@npm%3A5.24.7#~/.yarn/patches/antd-npm-5.24.7-356a553ae5.patch":
version: 5.24.7
resolution: "antd@patch:antd@npm%3A5.24.7#~/.yarn/patches/antd-npm-5.24.7-356a553ae5.patch::version=5.24.7&hash=ff9154"
dependencies:
"@ant-design/colors": "npm:^7.2.0"
"@ant-design/cssinjs": "npm:^1.23.0"
"@ant-design/cssinjs-utils": "npm:^1.1.3"
"@ant-design/fast-color": "npm:^2.0.6"
"@ant-design/icons": "npm:^5.6.1"
"@ant-design/react-slick": "npm:~1.1.2"
"@babel/runtime": "npm:^7.26.0"
"@rc-component/color-picker": "npm:~2.0.1"
"@rc-component/mutate-observer": "npm:^1.1.0"
"@rc-component/qrcode": "npm:~1.0.0"
"@rc-component/tour": "npm:~1.15.1"
"@rc-component/trigger": "npm:^2.2.6"
classnames: "npm:^2.5.1"
copy-to-clipboard: "npm:^3.3.3"
dayjs: "npm:^1.11.11"
rc-cascader: "npm:~3.33.1"
rc-checkbox: "npm:~3.5.0"
rc-collapse: "npm:~3.9.0"
rc-dialog: "npm:~9.6.0"
rc-drawer: "npm:~7.2.0"
rc-dropdown: "npm:~4.2.1"
rc-field-form: "npm:~2.7.0"
rc-image: "npm:~7.11.1"
rc-input: "npm:~1.8.0"
rc-input-number: "npm:~9.5.0"
rc-mentions: "npm:~2.20.0"
rc-menu: "npm:~9.16.1"
rc-motion: "npm:^2.9.5"
rc-notification: "npm:~5.6.3"
rc-pagination: "npm:~5.1.0"
rc-picker: "npm:~4.11.3"
rc-progress: "npm:~4.0.0"
rc-rate: "npm:~2.13.1"
rc-resize-observer: "npm:^1.4.3"
rc-segmented: "npm:~2.7.0"
rc-select: "npm:~14.16.6"
rc-slider: "npm:~11.1.8"
rc-steps: "npm:~6.0.1"
rc-switch: "npm:~4.1.0"
rc-table: "npm:~7.50.4"
rc-tabs: "npm:~15.5.2"
rc-textarea: "npm:~1.10.0"
rc-tooltip: "npm:~6.4.0"
rc-tree: "npm:~5.13.1"
rc-tree-select: "npm:~5.27.0"
rc-upload: "npm:~4.8.1"
rc-util: "npm:^5.44.4"
scroll-into-view-if-needed: "npm:^3.1.0"
throttle-debounce: "npm:^5.0.2"
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
checksum: 10c0/e46e36f151ba0f2eef1190aaf772cbe2ab947de7d832aef2d872f6a28203a134e4ee71aa6f7a7c4c57979bf1955f1b4adfae733aca06f0e740a6b54a59d45a19
languageName: node
linkType: hard
"app-builder-bin@npm:5.0.0-alpha.12":
version: 5.0.0-alpha.12
resolution: "app-builder-bin@npm:5.0.0-alpha.12"