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

refactor: migrate Switch from antd to heroui (#10237)

Browse Source 
* refactor(eslint): reorganize eslint config for better maintainability

Move ignores section and oxlint configs to be grouped with other configurations

* fix(eslint): update antd import restriction to include Switch

Add Switch to restricted imports from antd to enforce using custom components

* feat(ui): add Switch component wrapper and update imports

Add a wrapper for the Switch component from @heroui/react and export it through @cherrystudio/ui. Update eslint rules to prevent direct imports from @heroui/react and update imports in TranslateSettings to use the new wrapper

* refactor(ui): replace antd Switch with custom Switch component

Migrate all instances of antd Switch component to the custom Switch component from @cherrystudio/ui. This includes updating props from `checked` to `isSelected` and `onChange` to `onValueChange` to match the new component's API. Also updates size prop from `small` to `sm` where applicable.

The change ensures consistency across the UI and reduces dependency on antd components. All affected files have been updated to use the new Switch component with proper prop mappings.

* feat(ui): enhance Switch component with loading state

Add loading state support to Switch component by showing a spinner when isLoading is true and disabling interaction during loading. Update all Switch component usages to use the new isLoading prop instead of loading.

* fix(Switch): prevent thumbIcon override when isLoading is true

Implement type constraints to disallow thumbIcon when isLoading is true
Add ref forwarding support and export enhanced props type

* fix(settings): update Switch component props to use consistent naming

Change deprecated 'defaultChecked' and 'disabled' props to 'defaultSelected' and 'isDisabled' respectively to match component library updates

* refactor(Switch): simplify type definition by removing redundant ref prop

* refactor(Switch): simplify props type definition for loading state

Remove complex union type in favor of simpler interface extending SwitchProps

* docs(ui): add jsdoc for CustomizedSwitch component

Add documentation for the CustomizedSwitch component to clarify its purpose and the isLoading prop usage

* fix(eslint): comment out heroui import restriction rule

Temporarily disable the heroui import restriction to allow direct imports while wrapped components are being updated

* style: fix formatting and spacing in settings components
This commit is contained in:
Phantom 2025-09-18 19:16:53 +08:00 committed by GitHub
parent e930d3de43
commit a72feebead
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
46 changed files with 341 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
eslint.config.mjs
View File

@ -48,6 +48,27 @@ export default defineConfig([
'@eslint-react/no-children-to-array': 'off'
}
},
{
ignores: [
'node_modules/**',
'build/**',
'dist/**',
'out/**',
'local/**',
'.yarn/**',
'.gitignore',
'scripts/cloudflare-worker.js',
'src/main/integration/nutstore/sso/lib/**',
'src/main/integration/cherryin/index.js',
'src/main/integration/nutstore/sso/lib/**',
'src/renderer/src/ui/**',
'packages/**/dist'
]
},
// turn off oxlint supported rules.
...oxlint.configs['flat/eslint'],
...oxlint.configs['flat/typescript'],
...oxlint.configs['flat/unicorn'],
{
// LoggerService Custom Rules - only apply to src directory
files: ['src/**/*.{ts,tsx,js,jsx}'],
@ -121,34 +142,18 @@ export default defineConfig([
{
name: 'antd',
// TODO: migrate message again
importNames: ['Flex'],
importNames: ['Flex', 'Switch'],
message:
'❌ Do not import Flex from antd. Use our custom Layout components instead: import { Flex } from "@cherrystudio/ui"'
}
'❌ Do not import this component from antd. Use our custom components instead: import { ... } from "@cherrystudio/ui"'
},
// {
// name: '@heroui/react',
// message:
// '❌ Do not import components from heroui directly. Use our wrapped components instead: import { ... } from "@cherrystudio/ui"'
// }
]
}
]
}
},
{
ignores: [
'node_modules/**',
'build/**',
'dist/**',
'out/**',
'local/**',
'.yarn/**',
'.gitignore',
'scripts/cloudflare-worker.js',
'src/main/integration/nutstore/sso/lib/**',
'src/main/integration/cherryin/index.js',
'src/main/integration/nutstore/sso/lib/**',
'src/renderer/src/ui/**',
'packages/**/dist'
]
},
// turn off oxlint supported rules.
...oxlint.configs['flat/eslint'],
...oxlint.configs['flat/typescript'],
...oxlint.configs['flat/unicorn']
}
])

27
packages/ui/src/components/base/Switch/index.tsx Normal file
View File

@ -0,0 +1,27 @@
import type { SwitchProps } from '@heroui/react'
import { Spinner, Switch } from '@heroui/react'
// Enhanced Switch component with loading state support
interface CustomSwitchProps extends SwitchProps {
isLoading?: boolean
}
/**
* A customized Switch component based on HeroUI Switch
* @see https://www.heroui.com/docs/components/switch#api
* @param isLoading When true, displays a loading spinner in the switch thumb
*/
const CustomizedSwitch = ({ isLoading, children, ref, thumbIcon, ...props }: CustomSwitchProps) => {
const finalThumbIcon = isLoading ? <Spinner size="sm" /> : thumbIcon
return (
<Switch ref={ref} {...props} thumbIcon={finalThumbIcon}>
{children}
</Switch>
)
}
CustomizedSwitch.displayName = 'Switch'
export { CustomizedSwitch as Switch }
export type { CustomSwitchProps as SwitchProps }

1
packages/ui/src/components/index.ts
View File

@ -10,6 +10,7 @@ export { default as IndicatorLight } from './base/IndicatorLight'
export { default as Spinner } from './base/Spinner'
export type { StatusTagProps, StatusType } from './base/StatusTag'
export { ErrorTag, InfoTag, StatusTag, SuccessTag, WarnTag } from './base/StatusTag'
export { Switch } from './base/Switch'
export { default as TextBadge } from './base/TextBadge'
// Display Components

10
packages/ui/src/utils/index.ts
View File

@ -1,9 +1 @@
import { type ClassValue, clsx } from 'clsx'
/**
* 合并CSS类名的工具函数
* 基于clsx，支持条件类名和Tailwind CSS
*/
export function cn(...inputs: ClassValue[]) {
return clsx(inputs)
}
export { cn } from '@heroui/react'

2
src/renderer/src/components/Buttons/ActionIconButton.tsx
View File

@ -1,4 +1,4 @@
import { cn } from '@heroui/react'
import { cn } from '@cherrystudio/ui'
import type { ButtonProps } from 'antd'
import { Button } from 'antd'
import React, { memo } from 'react'

5
src/renderer/src/components/ObsidianExportDialog.tsx
View File

@ -1,3 +1,4 @@
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import { loggerService } from '@logger'
import i18n from '@renderer/i18n'
@ -10,7 +11,7 @@ import {
messageToMarkdownWithReasoning,
topicToMarkdown
} from '@renderer/utils/export'
import { Alert, Empty, Form, Input, Modal, Select, Spin, Switch, TreeSelect } from 'antd'
import { Alert, Empty, Form, Input, Modal, Select, Spin, TreeSelect } from 'antd'
import React, { useEffect, useState } from 'react'
const logger = loggerService.withContext('ObsidianExportDialog')
@ -410,7 +411,7 @@ const PopupContainer: React.FC<PopupContainerProps> = ({
</Select>
</Form.Item>
<Form.Item label={i18n.t('chat.topics.export.obsidian_reasoning')}>
<Switch checked={exportReasoning} onChange={setExportReasoning} />
<Switch isSelected={exportReasoning} onValueChange={setExportReasoning} />
</Form.Item>
</Form>
</Modal>

1
src/renderer/src/context/HeroUIProvider.tsx
View File

@ -1,6 +1,7 @@
import { HeroUIProvider } from '@heroui/react'
import { useSettings } from '@renderer/hooks/useSettings'
// TODO: migrate to ui package
const AppHeroUIProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { language } = useSettings()
return (

5
src/renderer/src/hero.ts
View File

@ -1,2 +1,5 @@
import { heroui } from '@heroui/react'
export default heroui()
const hero: ReturnType<typeof heroui> = heroui()
export default hero

143
src/renderer/src/pages/home/Tabs/SettingsTab.tsx
View File

@ -1,4 +1,5 @@
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { useMultiplePreferences, usePreference } from '@data/hooks/usePreference'
import EditableNumber from '@renderer/components/EditableNumber'
import Scrollbar from '@renderer/components/Scrollbar'
@ -21,7 +22,7 @@ import { modalConfirm } from '@renderer/utils'
import { getSendMessageShortcutLabel } from '@renderer/utils/input'
import type { SendMessageShortcut } from '@shared/data/preference/preferenceTypes'
import { ThemeMode } from '@shared/data/preference/preferenceTypes'
import { Button, Col, InputNumber, Row, Slider, Switch } from 'antd'
import { Button, Col, InputNumber, Row, Slider } from 'antd'
import { Settings2 } from 'lucide-react'
import type { FC } from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
@ -188,10 +189,10 @@ const SettingsTab: FC<Props> = (props) => {
<HelpTooltip title={t('chat.settings.temperature.tip')} />
</SettingRowTitleSmall>
<Switch
size="small"
style={{ marginLeft: 'auto' }}
checked={enableTemperature}
onChange={(enabled) => {
size="sm"
className="ml-auto"
isSelected={enableTemperature}
onValueChange={(enabled) => {
setEnableTemperature(enabled)
onUpdateAssistantSettings({ enableTemperature: enabled })
}}
@ -235,9 +236,9 @@ const SettingsTab: FC<Props> = (props) => {
<SettingRow>
<SettingRowTitleSmall>{t('models.stream_output')}</SettingRowTitleSmall>
<Switch
size="small"
checked={streamOutput}
onChange={(checked) => {
size="sm"
isSelected={streamOutput}
onValueChange={(checked) => {
setStreamOutput(checked)
onUpdateAssistantSettings({ streamOutput: checked })
}}
@ -252,9 +253,9 @@ const SettingsTab: FC<Props> = (props) => {
</SettingRowTitleSmall>
</Row>
<Switch
size="small"
checked={enableMaxTokens}
onChange={async (enabled) => {
size="sm"
isSelected={enableMaxTokens}
onValueChange={async (enabled) => {
if (enabled) {
const confirmed = await modalConfirm({
title: t('chat.settings.max_tokens.confirm'),
@ -302,15 +303,15 @@ const SettingsTab: FC<Props> = (props) => {
<SettingGroup>
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.prompt')}</SettingRowTitleSmall>
<Switch size="small" checked={showPrompt} onChange={(checked) => setShowPrompt(checked)} />
<Switch size="sm" isSelected={showPrompt} onValueChange={setShowPrompt} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall>
<Switch
size="small"
checked={messageFont === 'serif'}
onChange={(checked) => setMessageFont(checked ? 'serif' : 'system')}
size="sm"
isSelected={messageFont === 'serif'}
onValueChange={(checked) => setMessageFont(checked ? 'serif' : 'system')}
/>
</SettingRow>
<SettingDivider />
@ -319,16 +320,12 @@ const SettingsTab: FC<Props> = (props) => {
{t('chat.settings.thought_auto_collapse.label')}
<HelpTooltip title={t('chat.settings.thought_auto_collapse.tip')} />
</SettingRowTitleSmall>
<Switch
size="small"
checked={thoughtAutoCollapse}
onChange={(checked) => setThoughtAutoCollapse(checked)}
/>
<Switch size="sm" isSelected={thoughtAutoCollapse} onValueChange={setThoughtAutoCollapse} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.show_message_outline')}</SettingRowTitleSmall>
<Switch size="small" checked={showMessageOutline} onChange={(checked) => setShowMessageOutline(checked)} />
<Switch size="sm" isSelected={showMessageOutline} onValueChange={setShowMessageOutline} />
</SettingRow>
<SettingDivider />
<SettingRow>
@ -413,11 +410,7 @@ const SettingsTab: FC<Props> = (props) => {
{t('settings.math.single_dollar.label')}
<HelpTooltip title={t('settings.math.single_dollar.tip')} />
</SettingRowTitleSmall>
<Switch
size="small"
checked={mathEnableSingleDollar}
onChange={(checked) => setMathEnableSingleDollar(checked)}
/>
<Switch size="sm" isSelected={mathEnableSingleDollar} onValueChange={setMathEnableSingleDollar} />
</SettingRow>
<SettingDivider />
</SettingGroup>
@ -441,7 +434,7 @@ const SettingsTab: FC<Props> = (props) => {
{t('chat.settings.code_fancy_block.label')}
<HelpTooltip title={t('chat.settings.code_fancy_block.tip')} />
</SettingRowTitleSmall>
<Switch size="small" checked={codeFancyBlock} onChange={(checked) => setCodeFancyBlock(checked)} />
<Switch size="sm" isSelected={codeFancyBlock} onValueChange={setCodeFancyBlock} />
</SettingRow>
<SettingDivider />
<SettingRow>
@ -450,9 +443,9 @@ const SettingsTab: FC<Props> = (props) => {
<HelpTooltip title={t('chat.settings.code_execution.tip')} />
</SettingRowTitleSmall>
<Switch
size="small"
checked={codeExecution.enabled}
onChange={(checked) => setCodeExecution({ enabled: checked })}
size="sm"
isSelected={codeExecution.enabled}
onValueChange={(checked) => setCodeExecution({ enabled: checked })}
/>
</SettingRow>
{codeExecution.enabled && (
@ -479,9 +472,9 @@ const SettingsTab: FC<Props> = (props) => {
<SettingRow>
<SettingRowTitleSmall>{t('chat.settings.code_editor.title')}</SettingRowTitleSmall>
<Switch
size="small"
checked={codeEditor.enabled}
onChange={(checked) => setCodeEditor({ enabled: checked })}
size="sm"
isSelected={codeEditor.enabled}
onValueChange={(checked) => setCodeEditor({ enabled: checked })}
/>
</SettingRow>
{codeEditor.enabled && (
@ -490,36 +483,36 @@ const SettingsTab: FC<Props> = (props) => {
<SettingRow style={{ paddingLeft: 8 }}>
<SettingRowTitleSmall>{t('chat.settings.code_editor.highlight_active_line')}</SettingRowTitleSmall>
<Switch
size="small"
checked={codeEditor.highlightActiveLine}
onChange={(checked) => setCodeEditor({ highlightActiveLine: checked })}
size="sm"
isSelected={codeEditor.highlightActiveLine}
onValueChange={(checked) => setCodeEditor({ highlightActiveLine: checked })}
/>
</SettingRow>
<SettingDivider />
<SettingRow style={{ paddingLeft: 8 }}>
<SettingRowTitleSmall>{t('chat.settings.code_editor.fold_gutter')}</SettingRowTitleSmall>
<Switch
size="small"
checked={codeEditor.foldGutter}
onChange={(checked) => setCodeEditor({ foldGutter: checked })}
size="sm"
isSelected={codeEditor.foldGutter}
onValueChange={(checked) => setCodeEditor({ foldGutter: checked })}
/>
</SettingRow>
<SettingDivider />
<SettingRow style={{ paddingLeft: 8 }}>
<SettingRowTitleSmall>{t('chat.settings.code_editor.autocompletion')}</SettingRowTitleSmall>
<Switch
size="small"
checked={codeEditor.autocompletion}
onChange={(checked) => setCodeEditor({ autocompletion: checked })}
size="sm"
isSelected={codeEditor.autocompletion}
onValueChange={(checked) => setCodeEditor({ autocompletion: checked })}
/>
</SettingRow>
<SettingDivider />
<SettingRow style={{ paddingLeft: 8 }}>
<SettingRowTitleSmall>{t('chat.settings.code_editor.keymap')}</SettingRowTitleSmall>
<Switch
size="small"
checked={codeEditor.keymap}
onChange={(checked) => setCodeEditor({ keymap: checked })}
size="sm"
isSelected={codeEditor.keymap}
onValueChange={(checked) => setCodeEditor({ keymap: checked })}
/>
</SettingRow>
</>
@ -527,21 +520,17 @@ const SettingsTab: FC<Props> = (props) => {
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('chat.settings.show_line_numbers')}</SettingRowTitleSmall>
<Switch
size="small"
checked={codeShowLineNumbers}
onChange={(checked) => setCodeShowLineNumbers(checked)}
/>
<Switch size="sm" isSelected={codeShowLineNumbers} onValueChange={setCodeShowLineNumbers} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('chat.settings.code_collapsible')}</SettingRowTitleSmall>
<Switch size="small" checked={codeCollapsible} onChange={(checked) => setCodeCollapsible(checked)} />
<Switch size="sm" isSelected={codeCollapsible} onValueChange={setCodeCollapsible} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('chat.settings.code_wrappable')}</SettingRowTitleSmall>
<Switch size="small" checked={codeWrappable} onChange={(checked) => setCodeWrappable(checked)} />
<Switch size="sm" isSelected={codeWrappable} onValueChange={setCodeWrappable} />
</SettingRow>
<SettingDivider />
<SettingRow>
@ -549,7 +538,7 @@ const SettingsTab: FC<Props> = (props) => {
{t('chat.settings.code_image_tools.label')}
<HelpTooltip title={t('chat.settings.code_image_tools.tip')} />
</SettingRowTitleSmall>
<Switch size="small" checked={codeImageTools} onChange={(checked) => setCodeImageTools(checked)} />
<Switch size="sm" isSelected={codeImageTools} onValueChange={setCodeImageTools} />
</SettingRow>
</SettingGroup>
<SettingDivider />
@ -558,20 +547,12 @@ const SettingsTab: FC<Props> = (props) => {
<SettingGroup>
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
<Switch
size="small"
checked={showInputEstimatedTokens}
onChange={(checked) => setShowInputEstimatedTokens(checked)}
/>
<Switch size="sm" isSelected={showInputEstimatedTokens} onValueChange={setShowInputEstimatedTokens} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.paste_long_text_as_file')}</SettingRowTitleSmall>
<Switch
size="small"
checked={pasteLongTextAsFile}
onChange={(checked) => setPasteLongTextAsFile(checked)}
/>
<Switch size="sm" isSelected={pasteLongTextAsFile} onValueChange={setPasteLongTextAsFile} />
</SettingRow>
{pasteLongTextAsFile && (
<>
@ -594,9 +575,9 @@ const SettingsTab: FC<Props> = (props) => {
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.markdown_rendering_input_message')}</SettingRowTitleSmall>
<Switch
size="small"
checked={renderInputMessageAsMarkdown}
onChange={(checked) => setRenderInputMessageAsMarkdown(checked)}
size="sm"
isSelected={renderInputMessageAsMarkdown}
onValueChange={setRenderInputMessageAsMarkdown}
/>
</SettingRow>
<SettingDivider />
@ -604,49 +585,29 @@ const SettingsTab: FC<Props> = (props) => {
<>
<SettingRow>
<SettingRowTitleSmall>{t('settings.input.auto_translate_with_space')}</SettingRowTitleSmall>
<Switch
size="small"
checked={autoTranslateWithSpace}
onChange={(checked) => setAutoTranslateWithSpace(checked)}
/>
<Switch size="sm" isSelected={autoTranslateWithSpace} onValueChange={setAutoTranslateWithSpace} />
</SettingRow>
<SettingDivider />
</>
)}
<SettingRow>
<SettingRowTitleSmall>{t('settings.input.show_translate_confirm')}</SettingRowTitleSmall>
<Switch
size="small"
checked={showTranslateConfirm}
onChange={(checked) => setShowTranslateConfirm(checked)}
/>
<Switch size="sm" isSelected={showTranslateConfirm} onValueChange={setShowTranslateConfirm} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.enable_quick_triggers')}</SettingRowTitleSmall>
<Switch
size="small"
checked={enableQuickPanelTriggers}
onChange={(checked) => setEnableQuickPanelTriggers(checked)}
/>
<Switch size="sm" isSelected={enableQuickPanelTriggers} onValueChange={setEnableQuickPanelTriggers} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.confirm_delete_message')}</SettingRowTitleSmall>
<Switch
size="small"
checked={confirmDeleteMessage}
onChange={(checked) => setConfirmDeleteMessage(checked)}
/>
<Switch size="sm" isSelected={confirmDeleteMessage} onValueChange={setConfirmDeleteMessage} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.confirm_regenerate_message')}</SettingRowTitleSmall>
<Switch
size="small"
checked={confirmRegenerateMessage}
onChange={(checked) => setConfirmRegenerateMessage(checked)}
/>
<Switch size="sm" isSelected={confirmRegenerateMessage} onValueChange={setConfirmRegenerateMessage} />
</SettingRow>
<SettingDivider />
<SettingRow>

10
src/renderer/src/pages/minapps/MiniappSettings/MiniAppSettings.tsx
View File

@ -1,9 +1,10 @@
import { UndoOutlined } from '@ant-design/icons' // 导入重置图标
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import { DEFAULT_MIN_APPS } from '@renderer/config/minapps'
import { useMinapps } from '@renderer/hooks/useMinapps'
import { SettingDescription, SettingDivider, SettingRowTitle, SettingTitle } from '@renderer/pages/settings'
import { Button, message, Slider, Switch, Tooltip } from 'antd'
import { Button, message, Slider, Tooltip } from 'antd'
import type { FC } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -97,7 +98,7 @@ const MiniAppSettings: FC = () => {
<SettingLabelGroup>
<SettingRowTitle>{t('settings.miniapps.open_link_external.title')}</SettingRowTitle>
</SettingLabelGroup>
<Switch checked={minappsOpenLinkExternal} onChange={(checked) => setMinappsOpenLinkExternal(checked)} />
<Switch isSelected={minappsOpenLinkExternal} onValueChange={(checked) => setMinappsOpenLinkExternal(checked)} />
</SettingRow>
<SettingDivider />
{/* 缓存小程序数量设置 */}
@ -134,7 +135,10 @@ const MiniAppSettings: FC = () => {
<SettingRowTitle>{t('settings.miniapps.sidebar_title')}</SettingRowTitle>
<SettingDescription>{t('settings.miniapps.sidebar_description')}</SettingDescription>
</SettingLabelGroup>
<Switch checked={showOpenedMinappsInSidebar} onChange={(checked) => setShowOpenedMinappsInSidebar(checked)} />
<Switch
isSelected={showOpenedMinappsInSidebar}
onValueChange={(checked) => setShowOpenedMinappsInSidebar(checked)}
/>
</SettingRow>
</Container>
)

7
src/renderer/src/pages/paintings/AihubmixPage.tsx
View File

@ -1,5 +1,6 @@
import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { useCache } from '@data/hooks/useCache'
import { usePreference } from '@data/hooks/usePreference'
import { loggerService } from '@logger'
@ -20,7 +21,7 @@ import { translateText } from '@renderer/services/TranslateService'
import type { FileMetadata } from '@renderer/types'
import type { PaintingAction, PaintingsState } from '@renderer/types'
import { getErrorMessage, uuid } from '@renderer/utils'
import { Avatar, Button, Input, InputNumber, Radio, Segmented, Select, Slider, Switch, Tooltip, Upload } from 'antd'
import { Avatar, Button, Input, InputNumber, Radio, Segmented, Select, Slider, Tooltip, Upload } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { Info } from 'lucide-react'
import type { FC } from 'react'
@ -747,8 +748,8 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
return (
<RowFlex>
<Switch
checked={(painting[item.key!] || item.initialValue) as boolean}
onChange={(checked) => updatePaintingState({ [item.key!]: checked })}
isSelected={(painting[item.key!] || item.initialValue) as boolean}
onValueChange={(checked) => updatePaintingState({ [item.key!]: checked })}
/>
</RowFlex>
)

5
src/renderer/src/pages/paintings/DmxapiPage.tsx
View File

@ -1,5 +1,6 @@
import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { useCache } from '@data/hooks/useCache'
import DMXAPIToImg from '@renderer/assets/images/providers/DMXAPI-to-img.webp'
import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
@ -13,7 +14,7 @@ import FileManager from '@renderer/services/FileManager'
import type { FileMetadata } from '@renderer/types'
import { convertToBase64, uuid } from '@renderer/utils'
import type { DmxapiPainting } from '@types'
import { Avatar, Button, Input, InputNumber, Segmented, Select, Switch, Tooltip } from 'antd'
import { Avatar, Button, Input, InputNumber, Segmented, Select, Tooltip } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { Info } from 'lucide-react'
import type { FC } from 'react'
@ -960,7 +961,7 @@ const DmxapiPage: FC<{ Options: string[] }> = ({ Options }) => {
</Tooltip>
</SettingTitle>
<RowFlex>
<Switch checked={painting.autoCreate} onChange={(checked) => onChangeAutoCreate(checked)} />
<Switch isSelected={painting.autoCreate} onValueChange={(checked) => onChangeAutoCreate(checked)} />
</RowFlex>
</LeftContainer>
<MainContainer>

7
src/renderer/src/pages/paintings/SiliconPage.tsx
View File

@ -1,5 +1,6 @@
import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
import { ColFlex, RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { useCache } from '@data/hooks/useCache'
import { usePreference } from '@data/hooks/usePreference'
import { loggerService } from '@logger'
@ -24,7 +25,7 @@ import FileManager from '@renderer/services/FileManager'
import { translateText } from '@renderer/services/TranslateService'
import type { FileMetadata, Painting } from '@renderer/types'
import { getErrorMessage, uuid } from '@renderer/utils'
import { Button, Input, InputNumber, Radio, Select, Slider, Switch, Tooltip } from 'antd'
import { Button, Input, InputNumber, Radio, Select, Slider, Tooltip } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { Info } from 'lucide-react'
import type { FC } from 'react'
@ -485,8 +486,8 @@ const SiliconPage: FC<{ Options: string[] }> = ({ Options }) => {
</SettingTitle>
<RowFlex>
<Switch
checked={painting.promptEnhancement}
onChange={(checked) => updatePaintingState({ promptEnhancement: checked })}
isSelected={painting.promptEnhancement}
onValueChange={(checked) => updatePaintingState({ promptEnhancement: checked })}
/>
</RowFlex>
</LeftContainer>

7
src/renderer/src/pages/paintings/components/DynamicFormRender.tsx
View File

@ -1,7 +1,8 @@
import { CloseOutlined, LinkOutlined, RedoOutlined, UploadOutlined } from '@ant-design/icons'
import { Switch } from '@cherrystudio/ui'
import { loggerService } from '@logger'
import { convertToBase64 } from '@renderer/utils'
import { Button, Input, InputNumber, Select, Switch, Upload } from 'antd'
import { Button, Input, InputNumber, Select, Upload } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { useCallback } from 'react'
@ -205,8 +206,8 @@ export const DynamicFormRender: React.FC<DynamicFormRenderProps> = ({
if (type === 'boolean') {
return (
<Switch
checked={value !== undefined ? value : defaultValue}
onChange={(checked) => onChange(propertyName, checked)}
isSelected={value !== undefined ? value : defaultValue}
onValueChange={(checked) => onChange(propertyName, checked)}
style={{ width: '2px' }}
/>
)

7
src/renderer/src/pages/settings/AboutSettings.tsx
View File

@ -1,5 +1,6 @@
import { GithubOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import IndicatorLight from '@renderer/components/IndicatorLight'
import { APP_NAME, AppLogo } from '@renderer/config/env'
@ -13,7 +14,7 @@ import { handleSaveData } from '@renderer/store'
import { runAsyncFunction } from '@renderer/utils'
import { UpgradeChannel } from '@shared/data/preference/preferenceTypes'
import { ThemeMode } from '@shared/data/preference/preferenceTypes'
import { Avatar, Button, Progress, Radio, Row, Switch, Tag, Tooltip } from 'antd'
import { Avatar, Button, Progress, Radio, Row, Tag, Tooltip } from 'antd'
import { debounce } from 'lodash'
import { Bug, FileCheck, Github, Globe, Mail, Rss } from 'lucide-react'
import { BadgeQuestionMark } from 'lucide-react'
@ -237,13 +238,13 @@ const AboutSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.general.auto_check_update.title')}</SettingRowTitle>
<Switch value={autoCheckUpdate} onChange={(v) => setAutoCheckUpdate(v)} />
<Switch isSelected={autoCheckUpdate} onValueChange={(v) => setAutoCheckUpdate(v)} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.general.test_plan.title')}</SettingRowTitle>
<Tooltip title={t('settings.general.test_plan.tooltip')} trigger={['hover', 'focus']}>
<Switch value={testPlan} onChange={(v) => handleSetTestPlan(v)} />
<Switch isSelected={testPlan} onValueChange={(v) => handleSetTestPlan(v)} />
</Tooltip>
</SettingRow>
{testPlan && (

9
src/renderer/src/pages/settings/AssistantSettings/AssistantMCPSettings.tsx
View File

@ -1,8 +1,9 @@
import { InfoCircleOutlined } from '@ant-design/icons'
import { Box } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { useMCPServers } from '@renderer/hooks/useMCPServers'
import type { Assistant, AssistantSettings } from '@renderer/types'
import { Empty, Switch, Tooltip } from 'antd'
import { Empty, Tooltip } from 'antd'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
@ -84,10 +85,10 @@ const AssistantMCPSettings: React.FC<Props> = ({ assistant, updateAssistant }) =
: undefined
}>
<Switch
checked={isEnabled}
isSelected={isEnabled}
disabled={!server.isActive}
onChange={() => handleServerToggle(server.id)}
size="small"
onValueChange={() => handleServerToggle(server.id)}
size="sm"
/>
</Tooltip>
</ServerItem>

7
src/renderer/src/pages/settings/AssistantSettings/AssistantMemorySettings.tsx
View File

@ -1,11 +1,12 @@
import { InfoCircleOutlined } from '@ant-design/icons'
import { Box } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { loggerService } from '@logger'
import MemoriesSettingsModal from '@renderer/pages/memory/settings-modal'
import MemoryService from '@renderer/services/MemoryService'
import { selectGlobalMemoryEnabled, selectMemoryConfig } from '@renderer/store/memory'
import type { Assistant, AssistantSettings } from '@renderer/types'
import { Alert, Button, Card, Space, Switch, Tooltip, Typography } from 'antd'
import { Alert, Button, Card, Space, Tooltip, Typography } from 'antd'
import { useForm } from 'antd/es/form/Form'
import { Settings2 } from 'lucide-react'
import { useCallback, useEffect, useState } from 'react'
@ -91,8 +92,8 @@ const AssistantMemorySettings: React.FC<Props> = ({ assistant, updateAssistant,
: ''
}>
<Switch
checked={assistant.enableMemory || false}
onChange={handleMemoryToggle}
isSelected={assistant.enableMemory || false}
onValueChange={handleMemoryToggle}
disabled={!isMemoryEnabled}
/>
</Tooltip>

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

@ -1,5 +1,6 @@
import { QuestionCircleOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
import EditableNumber from '@renderer/components/EditableNumber'
import { DeleteIcon, ResetIcon } from '@renderer/components/Icons'
@ -11,7 +12,7 @@ import { useTimer } from '@renderer/hooks/useTimer'
import { SettingRow } from '@renderer/pages/settings'
import type { Assistant, AssistantSettingCustomParameters, AssistantSettings, Model } from '@renderer/types'
import { modalConfirm } from '@renderer/utils'
import { Button, Col, Divider, Input, InputNumber, Row, Select, Slider, Switch, Tooltip } from 'antd'
import { Button, Col, Divider, Input, InputNumber, Row, Select, Slider, Tooltip } from 'antd'
import { isNull } from 'lodash'
import { PlusIcon } from 'lucide-react'
import type { FC } from 'react'
@ -250,8 +251,8 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
</Label>
</RowFlex>
<Switch
checked={enableTemperature}
onChange={(enabled) => {
isSelected={enableTemperature}
onValueChange={(enabled) => {
setEnableTemperature(enabled)
updateAssistantSettings({ enableTemperature: enabled })
}}
@ -298,8 +299,8 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
</Tooltip>
</RowFlex>
<Switch
checked={enableTopP}
onChange={(enabled) => {
isSelected={enableTopP}
onValueChange={(enabled) => {
setEnableTopP(enabled)
updateAssistantSettings({ enableTopP: enabled })
}}
@ -387,8 +388,8 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
</Tooltip>
</RowFlex>
<Switch
checked={enableMaxTokens}
onChange={async (enabled) => {
isSelected={enableMaxTokens}
onValueChange={async (enabled) => {
if (enabled) {
const confirmed = await modalConfirm({
title: t('chat.settings.max_tokens.confirm'),
@ -430,8 +431,8 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
<SettingRow style={{ minHeight: 30 }}>
<Label>{t('models.stream_output')}</Label>
<Switch
checked={streamOutput}
onChange={(checked) => {
isSelected={streamOutput}
onValueChange={(checked) => {
setStreamOutput(checked)
updateAssistantSettings({ streamOutput: checked })
}}

11
src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
View File

@ -6,6 +6,7 @@ import {
YuqueOutlined
} from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import DividerWithText from '@renderer/components/DividerWithText'
import { NutstoreIcon } from '@renderer/components/Icons/NutstoreIcons'
@ -19,7 +20,7 @@ import { reset } from '@renderer/services/BackupService'
import type { AppInfo } from '@renderer/types'
import { formatFileSize } from '@renderer/utils'
import { occupiedDirs } from '@shared/config/constant'
import { Button, Progress, Switch, Typography } from 'antd'
import { Button, Progress, Typography } from 'antd'
import { FileText, FolderCog, FolderInput, FolderOpen, SaveIcon, Sparkle } from 'lucide-react'
import type { FC } from 'react'
import { useEffect, useState } from 'react'
@ -287,11 +288,11 @@ const DataSettings: FC = () => {
<div>
<MigrationPathRow style={{ marginTop: '20px', flexDirection: 'row', alignItems: 'center' }}>
<Switch
defaultChecked={shouldCopyData}
onChange={(checked) => {
defaultSelected={shouldCopyData}
onValueChange={(checked) => {
shouldCopyData = checked
}}
style={{ marginRight: '8px' }}
className="mr-2"
/>
<MigrationPathLabel style={{ fontWeight: 'normal', fontSize: '14px' }}>
{t('settings.data.app_data.copy_data_option')}
@ -612,7 +613,7 @@ const DataSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.backup.skip_file_data_title')}</SettingRowTitle>
<Switch checked={skipBackupFile} onChange={onSkipBackupFilesChange} />
<Switch isSelected={skipBackupFile} onValueChange={onSkipBackupFilesChange} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.backup.skip_file_data_help')}</SettingHelpText>

47
src/renderer/src/pages/settings/DataSettings/ExportMenuSettings.tsx
View File

@ -1,6 +1,6 @@
import { Switch } from '@cherrystudio/ui'
import { useMultiplePreferences } from '@data/hooks/usePreference'
import { useTheme } from '@renderer/context/ThemeProvider'
import { Switch } from 'antd'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
@ -35,66 +35,87 @@ const ExportMenuOptions: FC = () => {
<SettingRow>
<SettingRowTitle>{t('settings.data.export_menu.image')}</SettingRowTitle>
<Switch checked={exportMenuOptions.image} onChange={(checked) => handleToggleOption('image', checked)} />
<Switch
isSelected={exportMenuOptions.image}
onValueChange={(checked) => handleToggleOption('image', checked)}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.export_menu.markdown')}</SettingRowTitle>
<Switch checked={exportMenuOptions.markdown} onChange={(checked) => handleToggleOption('markdown', checked)} />
<Switch
isSelected={exportMenuOptions.markdown}
onValueChange={(checked) => handleToggleOption('markdown', checked)}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.export_menu.markdown_reason')}</SettingRowTitle>
<Switch
checked={exportMenuOptions.markdown_reason}
onChange={(checked) => handleToggleOption('markdown_reason', checked)}
isSelected={exportMenuOptions.markdown_reason}
onValueChange={(checked) => handleToggleOption('markdown_reason', checked)}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.export_menu.notion')}</SettingRowTitle>
<Switch checked={exportMenuOptions.notion} onChange={(checked) => handleToggleOption('notion', checked)} />
<Switch
isSelected={exportMenuOptions.notion}
onValueChange={(checked) => handleToggleOption('notion', checked)}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.export_menu.yuque')}</SettingRowTitle>
<Switch checked={exportMenuOptions.yuque} onChange={(checked) => handleToggleOption('yuque', checked)} />
<Switch
isSelected={exportMenuOptions.yuque}
onValueChange={(checked) => handleToggleOption('yuque', checked)}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.export_menu.joplin')}</SettingRowTitle>
<Switch checked={exportMenuOptions.joplin} onChange={(checked) => handleToggleOption('joplin', checked)} />
<Switch
isSelected={exportMenuOptions.joplin}
onValueChange={(checked) => handleToggleOption('joplin', checked)}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.export_menu.obsidian')}</SettingRowTitle>
<Switch checked={exportMenuOptions.obsidian} onChange={(checked) => handleToggleOption('obsidian', checked)} />
<Switch
isSelected={exportMenuOptions.obsidian}
onValueChange={(checked) => handleToggleOption('obsidian', checked)}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.export_menu.siyuan')}</SettingRowTitle>
<Switch checked={exportMenuOptions.siyuan} onChange={(checked) => handleToggleOption('siyuan', checked)} />
<Switch
isSelected={exportMenuOptions.siyuan}
onValueChange={(checked) => handleToggleOption('siyuan', checked)}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.export_menu.docx')}</SettingRowTitle>
<Switch checked={exportMenuOptions.docx} onChange={(checked) => handleToggleOption('docx', checked)} />
<Switch isSelected={exportMenuOptions.docx} onValueChange={(checked) => handleToggleOption('docx', checked)} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.export_menu.plain_text')}</SettingRowTitle>
<Switch
checked={exportMenuOptions.plain_text}
onChange={(checked) => handleToggleOption('plain_text', checked)}
isSelected={exportMenuOptions.plain_text}
onValueChange={(checked) => handleToggleOption('plain_text', checked)}
/>
</SettingRow>
</SettingGroup>

5
src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
View File

@ -1,9 +1,10 @@
import { InfoCircleOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import { useTheme } from '@renderer/context/ThemeProvider'
import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
import { Button, Space, Switch, Tooltip } from 'antd'
import { Button, Space, Tooltip } from 'antd'
import { Input } from 'antd'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
@ -118,7 +119,7 @@ const JoplinSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.joplin.export_reasoning.title')}</SettingRowTitle>
<Switch checked={joplinExportReasoning} onChange={handleToggleJoplinExportReasoning} />
<Switch isSelected={joplinExportReasoning} onValueChange={handleToggleJoplinExportReasoning} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.joplin.export_reasoning.help')}</SettingHelpText>

5
src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
View File

@ -1,5 +1,6 @@
import { DeleteOutlined, FolderOpenOutlined, SaveOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import { loggerService } from '@logger'
import { LocalBackupManager } from '@renderer/components/LocalBackupManager'
@ -9,7 +10,7 @@ import { useTheme } from '@renderer/context/ThemeProvider'
import { startAutoSync, stopAutoSync } from '@renderer/services/BackupService'
import { useAppSelector } from '@renderer/store'
import type { AppInfo } from '@renderer/types'
import { Button, Input, Switch, Tooltip } from 'antd'
import { Button, Input, Tooltip } from 'antd'
import dayjs from 'dayjs'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -256,7 +257,7 @@ const LocalBackupSettings: React.FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.backup.skip_file_data_title')}</SettingRowTitle>
<Switch checked={localBackupSkipBackupFile} onChange={onSkipBackupFilesChange} />
<Switch isSelected={localBackupSkipBackupFile} onValueChange={onSkipBackupFilesChange} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.backup.skip_file_data_help')}</SettingHelpText>

15
src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx
View File

@ -1,8 +1,9 @@
import { DeleteOutlined, FolderOpenOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import { useTheme } from '@renderer/context/ThemeProvider'
import { Button, Switch } from 'antd'
import { Button } from 'antd'
import Input from 'antd/es/input/Input'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
@ -96,7 +97,7 @@ const MarkdownExportSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.markdown_export.force_dollar_math.title')}</SettingRowTitle>
<Switch checked={forceDollarMathInMarkdown} onChange={handleToggleForceDollarMath} />
<Switch isSelected={forceDollarMathInMarkdown} onValueChange={handleToggleForceDollarMath} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.markdown_export.force_dollar_math.help')}</SettingHelpText>
@ -104,7 +105,7 @@ const MarkdownExportSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.message_title.use_topic_naming.title')}</SettingRowTitle>
<Switch checked={useTopicNamingForMessageTitle} onChange={handleToggleTopicNaming} />
<Switch isSelected={useTopicNamingForMessageTitle} onValueChange={handleToggleTopicNaming} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.message_title.use_topic_naming.help')}</SettingHelpText>
@ -112,7 +113,7 @@ const MarkdownExportSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.markdown_export.show_model_name.title')}</SettingRowTitle>
<Switch checked={showModelNameInExport} onChange={handleToggleShowModelName} />
<Switch isSelected={showModelNameInExport} onValueChange={handleToggleShowModelName} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.markdown_export.show_model_name.help')}</SettingHelpText>
@ -120,7 +121,7 @@ const MarkdownExportSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.markdown_export.show_model_provider.title')}</SettingRowTitle>
<Switch checked={showModelProviderInMarkdown} onChange={handleToggleShowModelProvider} />
<Switch isSelected={showModelProviderInMarkdown} onValueChange={handleToggleShowModelProvider} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.markdown_export.show_model_provider.help')}</SettingHelpText>
@ -128,7 +129,7 @@ const MarkdownExportSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.markdown_export.exclude_citations.title')}</SettingRowTitle>
<Switch checked={excludeCitationsInExport} onChange={handleToggleExcludeCitations} />
<Switch isSelected={excludeCitationsInExport} onValueChange={handleToggleExcludeCitations} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.markdown_export.exclude_citations.help')}</SettingHelpText>
@ -136,7 +137,7 @@ const MarkdownExportSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.markdown_export.standardize_citations.title')}</SettingRowTitle>
<Switch checked={standardizeCitationsInExport} onChange={handleToggleStandardizeCitations} />
<Switch isSelected={standardizeCitationsInExport} onValueChange={handleToggleStandardizeCitations} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.markdown_export.standardize_citations.help')}</SettingHelpText>

5
src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
View File

@ -1,10 +1,11 @@
import { InfoCircleOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import { Client } from '@notionhq/client'
import { useTheme } from '@renderer/context/ThemeProvider'
import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
import { Button, Space, Switch, Tooltip } from 'antd'
import { Button, Space, Tooltip } from 'antd'
import { Input } from 'antd'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
@ -126,7 +127,7 @@ const NotionSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.notion.export_reasoning.title')}</SettingRowTitle>
<Switch checked={notionExportReasoning} onChange={handleNotionExportReasoningChange} />
<Switch isSelected={notionExportReasoning} onValueChange={handleNotionExportReasoningChange} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.notion.export_reasoning.help')}</SettingHelpText>

5
src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx
View File

@ -1,5 +1,6 @@
import { CheckOutlined, FolderOutlined, LoadingOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import NutstorePathPopup from '@renderer/components/Popups/NutsorePathPopup'
import Selector from '@renderer/components/Selector'
@ -19,7 +20,7 @@ import {
import { useAppSelector } from '@renderer/store'
import { modalConfirm } from '@renderer/utils'
import { NUTSTORE_HOST } from '@shared/config/nutstore'
import { Button, Input, Switch, Tooltip, Typography } from 'antd'
import { Button, Input, Tooltip, Typography } from 'antd'
import dayjs from 'dayjs'
import type { FC } from 'react'
import { useCallback, useEffect, useState } from 'react'
@ -319,7 +320,7 @@ const NutstoreSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.backup.skip_file_data_title')}</SettingRowTitle>
<Switch checked={nutstoreSkipBackupFile} onChange={onSkipBackupFilesChange} />
<Switch isSelected={nutstoreSkipBackupFile} onValueChange={onSkipBackupFilesChange} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.backup.skip_file_data_help')}</SettingHelpText>

5
src/renderer/src/pages/settings/DataSettings/S3Settings.tsx
View File

@ -1,5 +1,6 @@
import { FolderOpenOutlined, InfoCircleOutlined, SaveOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import { S3BackupManager } from '@renderer/components/S3BackupManager'
import { S3BackupModal, useS3BackupModal } from '@renderer/components/S3Modals'
@ -8,7 +9,7 @@ import { useTheme } from '@renderer/context/ThemeProvider'
import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
import { startAutoSync, stopAutoSync } from '@renderer/services/BackupService'
import { useAppSelector } from '@renderer/store'
import { Button, Input, Switch, Tooltip } from 'antd'
import { Button, Input, Tooltip } from 'antd'
import dayjs from 'dayjs'
import type { FC } from 'react'
import { useState } from 'react'
@ -237,7 +238,7 @@ const S3Settings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.s3.skipBackupFile.label')}</SettingRowTitle>
<Switch checked={s3SkipBackupFile} onChange={onSkipBackupFilesChange} />
<Switch isSelected={s3SkipBackupFile} onValueChange={onSkipBackupFilesChange} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.s3.skipBackupFile.help')}</SettingHelpText>

7
src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
View File

@ -1,5 +1,6 @@
import { FolderOpenOutlined, SaveOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import Selector from '@renderer/components/Selector'
import { WebdavBackupManager } from '@renderer/components/WebdavBackupManager'
@ -7,7 +8,7 @@ import { useWebdavBackupModal, WebdavBackupModal } from '@renderer/components/We
import { useTheme } from '@renderer/context/ThemeProvider'
import { startAutoSync, stopAutoSync } from '@renderer/services/BackupService'
import { useAppSelector } from '@renderer/store'
import { Button, Input, Switch, Tooltip } from 'antd'
import { Button, Input, Tooltip } from 'antd'
import dayjs from 'dayjs'
import type { FC } from 'react'
import { useState } from 'react'
@ -198,7 +199,7 @@ const WebDavSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.backup.skip_file_data_title')}</SettingRowTitle>
<Switch checked={webdavSkipBackupFile} onChange={onSkipBackupFilesChange} />
<Switch isSelected={webdavSkipBackupFile} onValueChange={onSkipBackupFilesChange} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.backup.skip_file_data_help')}</SettingHelpText>
@ -206,7 +207,7 @@ const WebDavSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.data.webdav.disableStream.title')}</SettingRowTitle>
<Switch checked={webdavDisableStream} onChange={onDisableStreamChange} />
<Switch isSelected={webdavDisableStream} onValueChange={onDisableStreamChange} />
</SettingRow>
<SettingRow>
<SettingHelpText>{t('settings.data.webdav.disableStream.help')}</SettingHelpText>

13
src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
View File

@ -1,5 +1,6 @@
import { RowFlex } from '@cherrystudio/ui'
import { CodeEditor } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import { ResetIcon } from '@renderer/components/Icons'
import TextBadge from '@renderer/components/TextBadge'
@ -11,7 +12,7 @@ import useUserTheme from '@renderer/hooks/useUserTheme'
import { DefaultPreferences } from '@shared/data/preference/preferenceSchemas'
import type { AssistantIconType } from '@shared/data/preference/preferenceTypes'
import { ThemeMode } from '@shared/data/preference/preferenceTypes'
import { Button, ColorPicker, Segmented, Select, Switch } from 'antd'
import { Button, ColorPicker, Segmented, Select } from 'antd'
import { Minus, Monitor, Moon, Plus, Sun } from 'lucide-react'
import type { FC } from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
@ -229,7 +230,7 @@ const DisplaySettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.theme.window.style.transparent')}</SettingRowTitle>
<Switch checked={windowStyle === 'transparent'} onChange={handleWindowStyleChange} />
<Switch isSelected={windowStyle === 'transparent'} onValueChange={handleWindowStyleChange} />
</SettingRow>
</>
)}
@ -361,8 +362,8 @@ const DisplaySettings: FC = () => {
<SettingRow>
<SettingRowTitle>{t('settings.advanced.auto_switch_to_topics')}</SettingRowTitle>
<Switch
checked={clickAssistantToShowTopic}
onChange={(checked) => setClickAssistantToShowTopic(checked)}
isSelected={clickAssistantToShowTopic}
onValueChange={(checked) => setClickAssistantToShowTopic(checked)}
/>
</SettingRow>
<SettingDivider />
@ -370,12 +371,12 @@ const DisplaySettings: FC = () => {
)}
<SettingRow>
<SettingRowTitle>{t('settings.topic.show.time')}</SettingRowTitle>
<Switch checked={showTopicTime} onChange={(checked) => setShowTopicTime(checked)} />
<Switch isSelected={showTopicTime} onValueChange={(checked) => setShowTopicTime(checked)} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.topic.pin_to_top')}</SettingRowTitle>
<Switch checked={pinTopicsToTop} onChange={(checked) => setPinTopicsToTop(checked)} />
<Switch isSelected={pinTopicsToTop} onValueChange={(checked) => setPinTopicsToTop(checked)} />
</SettingRow>
</SettingGroup>
<SettingGroup theme={theme}>

36
src/renderer/src/pages/settings/GeneralSettings.tsx
View File

@ -1,6 +1,7 @@
import { InfoCircleOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Flex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { useMultiplePreferences, usePreference } from '@data/hooks/usePreference'
import Selector from '@renderer/components/Selector'
import { InfoTooltip } from '@renderer/components/TooltipIcons'
@ -12,7 +13,7 @@ import { isValidProxyUrl } from '@renderer/utils'
import { formatErrorMessage } from '@renderer/utils/error'
import { defaultByPassRules, defaultLanguage } from '@shared/config/constant'
import type { LanguageVarious } from '@shared/data/preference/preferenceTypes'
import { Input, Switch, Tooltip } from 'antd'
import { Input, Tooltip } from 'antd'
import type { FC } from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -260,12 +261,12 @@ const GeneralSettings: FC = () => {
/>
)}
</RowFlex>
<Switch checked={enableSpellCheck} onChange={handleSpellCheckChange} />
<Switch isSelected={enableSpellCheck} onValueChange={handleSpellCheckChange} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.hardware_acceleration.title')}</SettingRowTitle>
<Switch checked={disableHardwareAcceleration} onChange={handleHardwareAccelerationChange} />
<Switch isSelected={disableHardwareAcceleration} onValueChange={handleHardwareAccelerationChange} />
</SettingRow>
</SettingGroup>
<SettingGroup theme={theme}>
@ -278,17 +279,26 @@ const GeneralSettings: FC = () => {
<InfoCircleOutlined style={{ cursor: 'pointer' }} />
</Tooltip>
</SettingRowTitle>
<Switch checked={notificationSettings.assistant} onChange={(v) => handleNotificationChange('assistant', v)} />
<Switch
isSelected={notificationSettings.assistant}
onValueChange={(v) => handleNotificationChange('assistant', v)}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.notification.backup')}</SettingRowTitle>
<Switch checked={notificationSettings.backup} onChange={(v) => handleNotificationChange('backup', v)} />
<Switch
isSelected={notificationSettings.backup}
onValueChange={(v) => handleNotificationChange('backup', v)}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.notification.knowledge_embed')}</SettingRowTitle>
<Switch checked={notificationSettings.knowledge} onChange={(v) => handleNotificationChange('knowledge', v)} />
<Switch
isSelected={notificationSettings.knowledge}
onValueChange={(v) => handleNotificationChange('knowledge', v)}
/>
</SettingRow>
</SettingGroup>
<SettingGroup theme={theme}>
@ -296,12 +306,12 @@ const GeneralSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.launch.onboot')}</SettingRowTitle>
<Switch checked={launchOnBoot} onChange={(checked) => updateLaunchOnBoot(checked)} />
<Switch isSelected={launchOnBoot} onValueChange={(checked) => updateLaunchOnBoot(checked)} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.launch.totray')}</SettingRowTitle>
<Switch checked={launchToTray} onChange={(checked) => updateLaunchToTray(checked)} />
<Switch isSelected={launchToTray} onValueChange={(checked) => updateLaunchToTray(checked)} />
</SettingRow>
</SettingGroup>
<SettingGroup theme={theme}>
@ -309,12 +319,12 @@ const GeneralSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.tray.show')}</SettingRowTitle>
<Switch checked={tray} onChange={(checked) => updateTray(checked)} />
<Switch isSelected={tray} onValueChange={(checked) => updateTray(checked)} />
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.tray.onclose')}</SettingRowTitle>
<Switch checked={trayOnClose} onChange={(checked) => updateTrayOnClose(checked)} />
<Switch isSelected={trayOnClose} onValueChange={(checked) => updateTrayOnClose(checked)} />
</SettingRow>
</SettingGroup>
<SettingGroup theme={theme}>
@ -323,8 +333,8 @@ const GeneralSettings: FC = () => {
<SettingRow>
<SettingRowTitle>{t('settings.privacy.enable_privacy_mode')}</SettingRowTitle>
<Switch
value={enableDataCollection}
onChange={(v) => {
isSelected={enableDataCollection}
onValueChange={(v) => {
setEnableDataCollection(v)
window.api.config.set('enableDataCollection', v)
}}
@ -339,7 +349,7 @@ const GeneralSettings: FC = () => {
<SettingRowTitle>{t('settings.developer.enable_developer_mode')}</SettingRowTitle>
<InfoTooltip title={t('settings.developer.help')} />
</Flex>
<Switch checked={enableDeveloperMode} onChange={setEnableDeveloperMode} />
<Switch isSelected={enableDeveloperMode} onValueChange={setEnableDeveloperMode} />
</SettingRow>
</SettingGroup>
</SettingContainer>

11
src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
View File

@ -1,3 +1,4 @@
import { Switch } from '@cherrystudio/ui'
import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
import { DeleteIcon } from '@renderer/components/Icons'
import GeneralPopup from '@renderer/components/Popups/GeneralPopup'
@ -5,7 +6,7 @@ import Scrollbar from '@renderer/components/Scrollbar'
import { getMcpTypeLabel } from '@renderer/i18n/label'
import type { MCPServer } from '@renderer/types'
import { formatErrorMessage } from '@renderer/utils/error'
import { Alert, Button, Space, Switch, Tag, Tooltip, Typography } from 'antd'
import { Alert, Button, Space, Tag, Tooltip, Typography } from 'antd'
import { CircleXIcon, Settings2, SquareArrowOutUpRight } from 'lucide-react'
import type { FC } from 'react'
import { useCallback } from 'react'
@ -132,11 +133,11 @@ const McpServerCard: FC<McpServerCardProps> = ({
</ServerNameWrapper>
<ToolbarWrapper onClick={(e) => e.stopPropagation()}>
<Switch
value={server.isActive}
isSelected={server.isActive}
key={server.id}
loading={isLoading}
onChange={onToggle}
size="small"
isLoading={isLoading}
onValueChange={onToggle}
size="sm"
data-no-dnd
/>
<Button

12
src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
View File

@ -1,4 +1,4 @@
import { Flex } from '@cherrystudio/ui'
import { Flex, Switch } from '@cherrystudio/ui'
import { loggerService } from '@logger'
import type { McpError } from '@modelcontextprotocol/sdk/types.js'
import { DeleteIcon } from '@renderer/components/Icons'
@ -8,7 +8,7 @@ import MCPDescription from '@renderer/pages/settings/MCPSettings/McpDescription'
import type { MCPPrompt, MCPResource, MCPServer, MCPTool } from '@renderer/types'
import { formatMcpError } from '@renderer/utils/error'
import type { TabsProps } from 'antd'
import { Badge, Button, Form, Input, Radio, Select, Switch, Tabs } from 'antd'
import { Badge, Button, Form, Input, Radio, Select, Tabs } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { ChevronDown, SaveIcon } from 'lucide-react'
import React, { useCallback, useEffect, useState } from 'react'
@ -639,7 +639,7 @@ const McpSettings: React.FC = () => {
tooltip={t('settings.mcp.longRunningTooltip')}
layout="horizontal"
valuePropName="checked">
<Switch size="small" style={{ marginLeft: 10 }} />
<Switch size="sm" className="ml-2.5" />
</Form.Item>
<Form.Item
name="timeout"
@ -746,10 +746,10 @@ const McpSettings: React.FC = () => {
</Flex>
<Flex className="items-center gap-4">
<Switch
value={server.isActive}
isSelected={server.isActive}
key={server.id}
loading={loadingServer === server.id}
onChange={onToggleActive}
isLoading={loadingServer === server.id}
onValueChange={onToggleActive}
/>
<Button
type="primary"

13
src/renderer/src/pages/settings/MCPSettings/McpTool.tsx
View File

@ -1,7 +1,8 @@
import { ColFlex, Flex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import type { MCPServer, MCPTool } from '@renderer/types'
import { isToolAutoApproved } from '@renderer/utils/mcp-tools'
import { Badge, Descriptions, Empty, Switch, Table, Tag, Tooltip, Typography } from 'antd'
import { Badge, Descriptions, Empty, Table, Tag, Tooltip, Typography } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { Hammer, Info, Zap } from 'lucide-react'
import { useTranslation } from 'react-i18next'
@ -145,7 +146,7 @@ const MCPToolsSection = ({ tools, server, onToggleTool, onToggleAutoApprove }: M
width: 150, // Fixed width might be good for alignment
align: 'center',
render: (_, tool) => (
<Switch checked={isToolEnabled(tool)} onChange={(checked) => handleToggle(tool, checked)} size="small" />
<Switch isSelected={isToolEnabled(tool)} onValueChange={(checked) => handleToggle(tool, checked)} size="sm" />
)
},
{
@ -169,10 +170,10 @@ const MCPToolsSection = ({ tools, server, onToggleTool, onToggleAutoApprove }: M
}
placement="top">
<Switch
checked={isToolAutoApproved(tool, server)}
disabled={!isToolEnabled(tool)}
onChange={(checked) => handleAutoApproveToggle(tool, checked)}
size="small"
isSelected={isToolAutoApproved(tool, server)}
isDisabled={!isToolEnabled(tool)}
onValueChange={(checked) => handleAutoApproveToggle(tool, checked)}
size="sm"
/>
</Tooltip>
)

5
src/renderer/src/pages/settings/MemorySettings/MemorySettings.tsx
View File

@ -1,6 +1,7 @@
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Flex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { loggerService } from '@logger'
import { DeleteIcon, EditIcon, LoadingIcon, RefreshIcon } from '@renderer/components/Icons'
import TextBadge from '@renderer/components/TextBadge'
@ -16,7 +17,7 @@ import {
setGlobalMemoryEnabled
} from '@renderer/store/memory'
import type { MemoryItem } from '@types'
import { Badge, Button, Dropdown, Empty, Form, Input, Modal, Pagination, Space, Spin, Switch } from 'antd'
import { Badge, Button, Dropdown, Empty, Form, Input, Modal, Pagination, Space, Spin } from 'antd'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { Brain, Calendar, MenuIcon, PlusIcon, Settings2, UserRound, UserRoundMinus, UserRoundPlus } from 'lucide-react'
@ -588,7 +589,7 @@ const MemorySettings = () => {
<TextBadge text="Beta" />
</RowFlex>
<RowFlex className="items-center gap-2.5">
<Switch checked={globalMemoryEnabled} onChange={handleGlobalMemoryToggle} />
<Switch isSelected={globalMemoryEnabled} onValueChange={handleGlobalMemoryToggle} />
<Button type="text" icon={<Settings2 size={16} />} onClick={() => setSettingsModalVisible(true)} />
</RowFlex>
</RowFlex>

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

@ -1,6 +1,7 @@
import { CloseCircleFilled, QuestionCircleOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Flex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import EmojiPicker from '@renderer/components/EmojiPicker'
import { ResetIcon } from '@renderer/components/Icons'
import { TopView } from '@renderer/components/TopView'
@ -9,7 +10,7 @@ import { useTheme } from '@renderer/context/ThemeProvider'
import { useDefaultAssistant } from '@renderer/hooks/useAssistant'
import type { 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, Input, InputNumber, Modal, Popover, Row, Slider, Tooltip } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import type { Dispatch, FC, SetStateAction } from 'react'
import { useState } from 'react'
@ -171,8 +172,8 @@ const AssistantSettings: FC = () => {
</RowFlex>
<Switch
style={{ marginLeft: 10 }}
checked={enableTemperature}
onChange={(enabled) => {
isSelected={enableTemperature}
onValueChange={(enabled) => {
setEnableTemperature(enabled)
onUpdateAssistantSettings({ enableTemperature: enabled })
}}
@ -212,8 +213,8 @@ const AssistantSettings: FC = () => {
</RowFlex>
<Switch
style={{ marginLeft: 10 }}
checked={enableTopP}
onChange={(enabled) => {
isSelected={enableTopP}
onValueChange={(enabled) => {
setEnableTopP(enabled)
onUpdateAssistantSettings({ enableTopP: enabled })
}}
@ -275,8 +276,8 @@ const AssistantSettings: FC = () => {
</RowFlex>
<Switch
style={{ marginLeft: 10 }}
checked={enableMaxTokens}
onChange={async (enabled) => {
isSelected={enableMaxTokens}
onValueChange={async (enabled) => {
if (enabled) {
const confirmed = await modalConfirm({
title: t('chat.settings.max_tokens.confirm'),

5
src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx
View File

@ -1,8 +1,9 @@
import { QuestionCircleOutlined } from '@ant-design/icons'
import { ColFlex, Flex, RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import { ResetIcon } from '@renderer/components/Icons'
import { Button, Divider, Input, Modal, Popover, Switch } from 'antd'
import { Button, Divider, Input, Modal, Popover } from 'antd'
import { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -57,7 +58,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
<ColFlex className="items-stretch gap-2">
<RowFlex className="items-center gap-4">
<div>{t('settings.models.topic_naming.auto')}</div>
<Switch checked={enableTopicNaming} onChange={(v) => setEnableTopicNaming(v)} />
<Switch isSelected={enableTopicNaming} onValueChange={setEnableTopicNaming} />
</RowFlex>
<Divider style={{ margin: 0 }} />
<div>

12
src/renderer/src/pages/settings/NotesSettings.tsx
View File

@ -1,10 +1,11 @@
import { Switch } from '@cherrystudio/ui'
import { loggerService } from '@logger'
import Selector from '@renderer/components/Selector'
import { useTheme } from '@renderer/context/ThemeProvider'
import { useNotesSettings } from '@renderer/hooks/useNotesSettings'
import { initWorkSpace } from '@renderer/services/NotesService'
import type { EditorView } from '@renderer/types'
import { Button, Input, message, Slider, Switch } from 'antd'
import { Button, Input, message, Slider } from 'antd'
import { FolderOpen } from 'lucide-react'
import type { FC } from 'react'
import { useEffect, useState } from 'react'
@ -168,7 +169,10 @@ const NotesSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('notes.settings.display.compress_content')}</SettingRowTitle>
<Switch checked={!settings.isFullWidth} onChange={(checked) => updateSettings({ isFullWidth: !checked })} />
<Switch
isSelected={!settings.isFullWidth}
onValueChange={(checked) => updateSettings({ isFullWidth: !checked })}
/>
</SettingRow>
<SettingHelpText>{t('notes.settings.display.compress_content_description')}</SettingHelpText>
<SettingDivider />
@ -190,8 +194,8 @@ const NotesSettings: FC = () => {
<SettingRow>
<SettingRowTitle>{t('notes.settings.display.show_table_of_contents')}</SettingRowTitle>
<Switch
checked={settings.showTableOfContents}
onChange={(checked) => updateSettings({ showTableOfContents: checked })}
isSelected={settings.showTableOfContents}
onValueChange={(checked) => updateSettings({ showTableOfContents: checked })}
/>
</SettingRow>
<SettingHelpText>{t('notes.settings.display.show_table_of_contents_description')}</SettingHelpText>

4
src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx
View File

@ -1,8 +1,8 @@
import { ColFlex, RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { InfoTooltip } from '@renderer/components/TooltipIcons'
import { useProvider } from '@renderer/hooks/useProvider'
import type { Provider } from '@renderer/types'
import { Switch } from 'antd'
import { startTransition, useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
@ -113,7 +113,7 @@ const ApiOptionsSettings = ({ providerId }: Props) => {
</label>
<InfoTooltip title={item.tip}></InfoTooltip>
</RowFlex>
<Switch id={item.key} checked={item.checked} onChange={item.onChange} />
<Switch id={item.key} isSelected={item.checked} onValueChange={item.onChange} />
</RowFlex>
))}
</ColFlex>

11
src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx
View File

@ -1,4 +1,5 @@
import { Flex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import CopyIcon from '@renderer/components/Icons/CopyIcon'
import {
EmbeddingTag,
@ -22,7 +23,7 @@ import { useDynamicLabelWidth } from '@renderer/hooks/useDynamicLabelWidth'
import type { Model, ModelCapability, ModelType, Provider } from '@renderer/types'
import { getDefaultGroupName, getDifference, getUnion, uniqueObjectArray } from '@renderer/utils'
import type { ModalProps } from 'antd'
import { Button, Divider, Form, Input, InputNumber, message, Modal, Select, Switch, Tooltip } from 'antd'
import { Button, Divider, Form, Input, InputNumber, message, Modal, Select, Tooltip } from 'antd'
import { cloneDeep } from 'lodash'
import { ChevronDown, ChevronUp, RotateCcw, SaveIcon } from 'lucide-react'
import type { FC } from 'react'
@ -342,10 +343,10 @@ const ModelEditContent: FC<ModelEditContentProps & ModalProps> = ({ provider, mo
label={t('settings.models.add.supported_text_delta.label')}
tooltip={t('settings.models.add.supported_text_delta.tooltip')}>
<Switch
checked={supportedTextDelta}
style={{ marginLeft: 'auto' }}
size="small"
onChange={(checked) => {
isSelected={supportedTextDelta}
className="ml-auto"
size="sm"
onValueChange={(checked) => {
setSupportedTextDelta(checked)
// 直接传递新值给autoSave
autoSave({ supported_text_delta: checked })

7
src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
View File

@ -1,5 +1,6 @@
import { RowFlex } from '@cherrystudio/ui'
import { Flex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import OpenAIAlert from '@renderer/components/Alert/OpenAIAlert'
import { LoadingIcon } from '@renderer/components/Icons'
import { ApiKeyListPopup } from '@renderer/components/Popups/ApiKeyListPopup'
@ -26,7 +27,7 @@ import {
isOpenAIProvider
} from '@renderer/utils'
import { formatErrorMessage } from '@renderer/utils/error'
import { Button, Divider, Input, Select, Space, Switch, Tooltip } from 'antd'
import { Button, Divider, Input, Select, Space, Tooltip } from 'antd'
import Link from 'antd/es/typography/Link'
import { debounce, isEmpty } from 'lodash'
import { Bolt, Check, Settings2, SquareArrowOutUpRight, TriangleAlert } from 'lucide-react'
@ -272,9 +273,9 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
)}
</Flex>
<Switch
value={provider.enabled}
isSelected={provider.enabled}
key={provider.id}
onChange={(enabled) => {
onValueChange={(enabled) => {
updateProvider({ apiHost, enabled })
if (enabled) {
moveProviderToTop(provider.id)

9
src/renderer/src/pages/settings/QuickAssistantSettings.tsx
View File

@ -1,5 +1,6 @@
import { InfoCircleOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
import { useTheme } from '@renderer/context/ThemeProvider'
@ -7,7 +8,7 @@ import { useAssistants, useDefaultAssistant, useDefaultModel } from '@renderer/h
import { useAppDispatch, useAppSelector } from '@renderer/store'
import { setQuickAssistantId } from '@renderer/store/llm'
import HomeWindow from '@renderer/windows/mini/home/HomeWindow'
import { Button, Select, Switch, Tooltip } from 'antd'
import { Button, Select, Tooltip } from 'antd'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
@ -72,14 +73,14 @@ const QuickAssistantSettings: FC = () => {
<InfoCircleOutlined style={{ cursor: 'pointer' }} />
</Tooltip>
</SettingRowTitle>
<Switch checked={enableQuickAssistant} onChange={handleEnableQuickAssistant} />
<Switch isSelected={enableQuickAssistant} onValueChange={handleEnableQuickAssistant} />
</SettingRow>
{enableQuickAssistant && (
<>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.quickAssistant.click_tray_to_show')}</SettingRowTitle>
<Switch checked={clickTrayToShowQuickAssistant} onChange={handleClickTrayToShowQuickAssistant} />
<Switch isSelected={clickTrayToShowQuickAssistant} onValueChange={handleClickTrayToShowQuickAssistant} />
</SettingRow>
</>
)}
@ -88,7 +89,7 @@ const QuickAssistantSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.quickAssistant.read_clipboard_at_startup')}</SettingRowTitle>
<Switch checked={readClipboardAtStartup} onChange={handleClickReadClipboardAtStartup} />
<Switch isSelected={readClipboardAtStartup} onValueChange={handleClickReadClipboardAtStartup} />
</SettingRow>
</>
)}

19
src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx
View File

@ -1,10 +1,11 @@
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import { isMac, isWin } from '@renderer/config/constant'
import { useTheme } from '@renderer/context/ThemeProvider'
import { getSelectionDescriptionLabel } from '@renderer/i18n/label'
import SelectionToolbar from '@renderer/windows/selection/toolbar/SelectionToolbar'
import type { SelectionFilterMode, SelectionTriggerMode } from '@shared/data/preference/preferenceTypes'
import { Button, Radio, Row, Slider, Switch, Tooltip } from 'antd'
import { Button, Radio, Row, Slider, Tooltip } from 'antd'
import { CircleHelp, Edit2 } from 'lucide-react'
import type { FC } from 'react'
import { useEffect, useState } from 'react'
@ -99,9 +100,9 @@ const SelectionAssistantSettings: FC = () => {
{!isSupportedOS && <SettingDescription>{t('selection.settings.enable.description')}</SettingDescription>}
</SettingLabel>
<Switch
checked={isSupportedOS && selectionEnabled}
onChange={(checked) => handleEnableCheckboxChange(checked)}
disabled={!isSupportedOS}
isSelected={isSupportedOS && selectionEnabled}
onValueChange={handleEnableCheckboxChange}
isDisabled={!isSupportedOS}
/>
</SettingRow>
@ -160,7 +161,7 @@ const SelectionAssistantSettings: FC = () => {
<SettingRowTitle>{t('selection.settings.toolbar.compact_mode.title')}</SettingRowTitle>
<SettingDescription>{t('selection.settings.toolbar.compact_mode.description')}</SettingDescription>
</SettingLabel>
<Switch checked={isCompact} onChange={(checked) => setIsCompact(checked)} />
<Switch isSelected={isCompact} onValueChange={setIsCompact} />
</SettingRow>
</SettingGroup>
@ -172,7 +173,7 @@ const SelectionAssistantSettings: FC = () => {
<SettingRowTitle>{t('selection.settings.window.follow_toolbar.title')}</SettingRowTitle>
<SettingDescription>{t('selection.settings.window.follow_toolbar.description')}</SettingDescription>
</SettingLabel>
<Switch checked={isFollowToolbar} onChange={(checked) => setIsFollowToolbar(checked)} />
<Switch isSelected={isFollowToolbar} onValueChange={setIsFollowToolbar} />
</SettingRow>
<SettingDivider />
<SettingRow>
@ -180,7 +181,7 @@ const SelectionAssistantSettings: FC = () => {
<SettingRowTitle>{t('selection.settings.window.remember_size.title')}</SettingRowTitle>
<SettingDescription>{t('selection.settings.window.remember_size.description')}</SettingDescription>
</SettingLabel>
<Switch checked={isRemeberWinSize} onChange={(checked) => setIsRemeberWinSize(checked)} />
<Switch isSelected={isRemeberWinSize} onValueChange={setIsRemeberWinSize} />
</SettingRow>
<SettingDivider />
<SettingRow>
@ -188,7 +189,7 @@ const SelectionAssistantSettings: FC = () => {
<SettingRowTitle>{t('selection.settings.window.auto_close.title')}</SettingRowTitle>
<SettingDescription>{t('selection.settings.window.auto_close.description')}</SettingDescription>
</SettingLabel>
<Switch checked={isAutoClose} onChange={(checked) => setIsAutoClose(checked)} />
<Switch isSelected={isAutoClose} onValueChange={setIsAutoClose} />
</SettingRow>
<SettingDivider />
<SettingRow>
@ -196,7 +197,7 @@ const SelectionAssistantSettings: FC = () => {
<SettingRowTitle>{t('selection.settings.window.auto_pin.title')}</SettingRowTitle>
<SettingDescription>{t('selection.settings.window.auto_pin.description')}</SettingDescription>
</SettingLabel>
<Switch checked={isAutoPin} onChange={(checked) => setIsAutoPin(checked)} />
<Switch isSelected={isAutoPin} onValueChange={setIsAutoPin} />
</SettingRow>
<SettingDivider />
<SettingRow>

5
src/renderer/src/pages/settings/ShortcutSettings.tsx
View File

@ -1,5 +1,6 @@
import { ClearOutlined, UndoOutlined } from '@ant-design/icons'
import { RowFlex } from '@cherrystudio/ui'
import { Switch } from '@cherrystudio/ui'
import { isMac, isWin } from '@renderer/config/constant'
import { useTheme } from '@renderer/context/ThemeProvider'
import { useShortcuts } from '@renderer/hooks/useShortcuts'
@ -9,7 +10,7 @@ import { useAppDispatch } from '@renderer/store'
import { initialState, resetShortcuts, toggleShortcut, updateShortcut } from '@renderer/store/shortcuts'
import type { Shortcut } from '@renderer/types'
import type { InputRef } from 'antd'
import { Button, Input, Switch, Table as AntTable, Tooltip } from 'antd'
import { Button, Input, Table as AntTable, Tooltip } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import type { FC } from 'react'
import React, { useRef, useState } from 'react'
@ -397,7 +398,7 @@ const ShortcutSettings: FC = () => {
align: 'right',
width: '50px',
render: (record: Shortcut) => (
<Switch size="small" checked={record.enabled} onChange={() => dispatch(toggleShortcut(record.key))} />
<Switch size="sm" isSelected={record.enabled} onValueChange={() => dispatch(toggleShortcut(record.key))} />
)
}
]

5
src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx
View File

@ -1,8 +1,9 @@
import { Switch } from '@cherrystudio/ui'
import { useTheme } from '@renderer/context/ThemeProvider'
import { useWebSearchSettings } from '@renderer/hooks/useWebSearchProviders'
import { useAppDispatch } from '@renderer/store'
import { setMaxResult, setSearchWithTime } from '@renderer/store/websearch'
import { Slider, Switch, Tooltip } from 'antd'
import { Slider, Tooltip } from 'antd'
import { t } from 'i18next'
import { Info } from 'lucide-react'
import type { FC } from 'react'
@ -22,7 +23,7 @@ const BasicSettings: FC = () => {
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.tool.websearch.search_with_time')}</SettingRowTitle>
<Switch checked={searchWithTime} onChange={(checked) => dispatch(setSearchWithTime(checked))} />
<Switch isSelected={searchWithTime} onValueChange={(checked) => dispatch(setSearchWithTime(checked))} />
</SettingRow>
<SettingDivider style={{ marginTop: 15, marginBottom: 10 }} />
<SettingRow style={{ height: 40 }}>

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

@ -1,4 +1,4 @@
import { cn } from '@heroui/react'
import { cn } from '@cherrystudio/ui'
import type { ThemeMode } from '@shared/data/preference/preferenceTypes'
import { Divider } from 'antd'
import Link from 'antd/es/typography/Link'

3
src/renderer/src/pages/translate/TranslateSettings.tsx
View File

@ -1,6 +1,5 @@
import { ColFlex, RowFlex } from '@cherrystudio/ui'
import { ColFlex, RowFlex, Switch } from '@cherrystudio/ui'
import { Flex } from '@cherrystudio/ui'
import { Switch } from '@heroui/react'
import LanguageSelect from '@renderer/components/LanguageSelect'
import db from '@renderer/databases'
import useTranslate from '@renderer/hooks/useTranslate'

10
src/renderer/src/windows/dataRefactorTest/components/PreferenceBasicTests.tsx
View File

@ -1,6 +1,7 @@
import { Switch } from '@cherrystudio/ui'
import { usePreference } from '@renderer/data/hooks/usePreference'
import { type PreferenceKeyType, ThemeMode } from '@shared/data/preference/preferenceTypes'
import { Button, Input, message, Select, Slider, Space, Switch, Typography } from 'antd'
import { Button, Input, message, Select, Slider, Space, Typography } from 'antd'
import React, { useState } from 'react'
import styled from 'styled-components'
@ -144,12 +145,7 @@ const PreferenceBasicTests: React.FC = () => {
{/* Boolean Toggle */}
{selectedKey === 'app.spell_check.enabled' && (
<Switch
checked={value === true}
onChange={(checked) => setValue(checked)}
checkedChildren="启用"
unCheckedChildren="禁用"
/>
<Switch isSelected={value === true} onValueChange={(checked) => setValue(checked)} />
)}
{/* Language Switch */}