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

* 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

eslint.config.mjs

@@ -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']
 ])

packages/ui/src/components/base/Switch/index.tsx

@@ -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 }

packages/ui/src/components/index.ts

@@ -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

packages/ui/src/utils/index.ts

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

src/renderer/src/components/Buttons/ActionIconButton.tsx

@@ -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'

src/renderer/src/components/ObsidianExportDialog.tsx

@@ -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>

src/renderer/src/context/HeroUIProvider.tsx

@@ -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 (

src/renderer/src/hero.ts

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

src/renderer/src/pages/home/Tabs/SettingsTab.tsx

@@ -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"
+              size="sm"
-              style={{ marginLeft: 'auto' }}
+              className="ml-auto"
-              checked={enableTemperature}
+              isSelected={enableTemperature}
-              onChange={(enabled) => {
+              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"
+              size="sm"
-              checked={streamOutput}
+              isSelected={streamOutput}
-              onChange={(checked) => {
+              onValueChange={(checked) => {
                 setStreamOutput(checked)
                 onUpdateAssistantSettings({ streamOutput: checked })
               }}
@@ -252,9 +253,9 @@ const SettingsTab: FC<Props> = (props) => {
               </SettingRowTitleSmall>
             </Row>
             <Switch
-              size="small"
+              size="sm"
-              checked={enableMaxTokens}
+              isSelected={enableMaxTokens}
-              onChange={async (enabled) => {
+              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"
+              size="sm"
-              checked={messageFont === 'serif'}
+              isSelected={messageFont === 'serif'}
-              onChange={(checked) => setMessageFont(checked ? 'serif' : 'system')}
+              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
+            <Switch size="sm" isSelected={thoughtAutoCollapse} onValueChange={setThoughtAutoCollapse} />
-              size="small"
-              checked={thoughtAutoCollapse}
-              onChange={(checked) => setThoughtAutoCollapse(checked)}
-            />
           </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
+            <Switch size="sm" isSelected={mathEnableSingleDollar} onValueChange={setMathEnableSingleDollar} />
-              size="small"
-              checked={mathEnableSingleDollar}
-              onChange={(checked) => setMathEnableSingleDollar(checked)}
-            />
           </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"
+              size="sm"
-              checked={codeExecution.enabled}
+              isSelected={codeExecution.enabled}
-              onChange={(checked) => setCodeExecution({ enabled: checked })}
+              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"
+              size="sm"
-              checked={codeEditor.enabled}
+              isSelected={codeEditor.enabled}
-              onChange={(checked) => setCodeEditor({ enabled: checked })}
+              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"
+                  size="sm"
-                  checked={codeEditor.highlightActiveLine}
+                  isSelected={codeEditor.highlightActiveLine}
-                  onChange={(checked) => setCodeEditor({ highlightActiveLine: checked })}
+                  onValueChange={(checked) => setCodeEditor({ highlightActiveLine: checked })}
                 />
               </SettingRow>
               <SettingDivider />
               <SettingRow style={{ paddingLeft: 8 }}>
                 <SettingRowTitleSmall>{t('chat.settings.code_editor.fold_gutter')}</SettingRowTitleSmall>
                 <Switch
-                  size="small"
+                  size="sm"
-                  checked={codeEditor.foldGutter}
+                  isSelected={codeEditor.foldGutter}
-                  onChange={(checked) => setCodeEditor({ foldGutter: checked })}
+                  onValueChange={(checked) => setCodeEditor({ foldGutter: checked })}
                 />
               </SettingRow>
               <SettingDivider />
               <SettingRow style={{ paddingLeft: 8 }}>
                 <SettingRowTitleSmall>{t('chat.settings.code_editor.autocompletion')}</SettingRowTitleSmall>
                 <Switch
-                  size="small"
+                  size="sm"
-                  checked={codeEditor.autocompletion}
+                  isSelected={codeEditor.autocompletion}
-                  onChange={(checked) => setCodeEditor({ autocompletion: checked })}
+                  onValueChange={(checked) => setCodeEditor({ autocompletion: checked })}
                 />
               </SettingRow>
               <SettingDivider />
               <SettingRow style={{ paddingLeft: 8 }}>
                 <SettingRowTitleSmall>{t('chat.settings.code_editor.keymap')}</SettingRowTitleSmall>
                 <Switch
-                  size="small"
+                  size="sm"
-                  checked={codeEditor.keymap}
+                  isSelected={codeEditor.keymap}
-                  onChange={(checked) => setCodeEditor({ keymap: checked })}
+                  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
+            <Switch size="sm" isSelected={codeShowLineNumbers} onValueChange={setCodeShowLineNumbers} />
-              size="small"
-              checked={codeShowLineNumbers}
-              onChange={(checked) => setCodeShowLineNumbers(checked)}
-            />
           </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
+            <Switch size="sm" isSelected={showInputEstimatedTokens} onValueChange={setShowInputEstimatedTokens} />
-              size="small"
-              checked={showInputEstimatedTokens}
-              onChange={(checked) => setShowInputEstimatedTokens(checked)}
-            />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.input.paste_long_text_as_file')}</SettingRowTitleSmall>
-            <Switch
+            <Switch size="sm" isSelected={pasteLongTextAsFile} onValueChange={setPasteLongTextAsFile} />
-              size="small"
-              checked={pasteLongTextAsFile}
-              onChange={(checked) => setPasteLongTextAsFile(checked)}
-            />
           </SettingRow>
           {pasteLongTextAsFile && (
             <>
@@ -594,9 +575,9 @@ const SettingsTab: FC<Props> = (props) => {
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.markdown_rendering_input_message')}</SettingRowTitleSmall>
             <Switch
-              size="small"
+              size="sm"
-              checked={renderInputMessageAsMarkdown}
+              isSelected={renderInputMessageAsMarkdown}
-              onChange={(checked) => setRenderInputMessageAsMarkdown(checked)}
+              onValueChange={setRenderInputMessageAsMarkdown}
             />
           </SettingRow>
           <SettingDivider />
@@ -604,49 +585,29 @@ const SettingsTab: FC<Props> = (props) => {
             <>
               <SettingRow>
                 <SettingRowTitleSmall>{t('settings.input.auto_translate_with_space')}</SettingRowTitleSmall>
-                <Switch
+                <Switch size="sm" isSelected={autoTranslateWithSpace} onValueChange={setAutoTranslateWithSpace} />
-                  size="small"
-                  checked={autoTranslateWithSpace}
-                  onChange={(checked) => setAutoTranslateWithSpace(checked)}
-                />
               </SettingRow>
               <SettingDivider />
             </>
           )}
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.input.show_translate_confirm')}</SettingRowTitleSmall>
-            <Switch
+            <Switch size="sm" isSelected={showTranslateConfirm} onValueChange={setShowTranslateConfirm} />
-              size="small"
-              checked={showTranslateConfirm}
-              onChange={(checked) => setShowTranslateConfirm(checked)}
-            />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.input.enable_quick_triggers')}</SettingRowTitleSmall>
-            <Switch
+            <Switch size="sm" isSelected={enableQuickPanelTriggers} onValueChange={setEnableQuickPanelTriggers} />
-              size="small"
-              checked={enableQuickPanelTriggers}
-              onChange={(checked) => setEnableQuickPanelTriggers(checked)}
-            />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.input.confirm_delete_message')}</SettingRowTitleSmall>
-            <Switch
+            <Switch size="sm" isSelected={confirmDeleteMessage} onValueChange={setConfirmDeleteMessage} />
-              size="small"
-              checked={confirmDeleteMessage}
-              onChange={(checked) => setConfirmDeleteMessage(checked)}
-            />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.input.confirm_regenerate_message')}</SettingRowTitleSmall>
-            <Switch
+            <Switch size="sm" isSelected={confirmRegenerateMessage} onValueChange={setConfirmRegenerateMessage} />
-              size="small"
-              checked={confirmRegenerateMessage}
-              onChange={(checked) => setConfirmRegenerateMessage(checked)}
-            />
           </SettingRow>
           <SettingDivider />
           <SettingRow>

src/renderer/src/pages/minapps/MiniappSettings/MiniAppSettings.tsx

@@ -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>
   )

src/renderer/src/pages/paintings/AihubmixPage.tsx

@@ -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}
+              isSelected={(painting[item.key!] || item.initialValue) as boolean}
-              onChange={(checked) => updatePaintingState({ [item.key!]: checked })}
+              onValueChange={(checked) => updatePaintingState({ [item.key!]: checked })}
             />
           </RowFlex>
         )

src/renderer/src/pages/paintings/DmxapiPage.tsx

@@ -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>

src/renderer/src/pages/paintings/SiliconPage.tsx

@@ -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}
+              isSelected={painting.promptEnhancement}
-              onChange={(checked) => updatePaintingState({ promptEnhancement: checked })}
+              onValueChange={(checked) => updatePaintingState({ promptEnhancement: checked })}
             />
           </RowFlex>
         </LeftContainer>

src/renderer/src/pages/paintings/components/DynamicFormRender.tsx

@@ -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}
+        isSelected={value !== undefined ? value : defaultValue}
-        onChange={(checked) => onChange(propertyName, checked)}
+        onValueChange={(checked) => onChange(propertyName, checked)}
         style={{ width: '2px' }}
       />
     )

src/renderer/src/pages/settings/AboutSettings.tsx

@@ -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 && (

src/renderer/src/pages/settings/AssistantSettings/AssistantMCPSettings.tsx

@@ -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)}
+                    onValueChange={() => handleServerToggle(server.id)}
-                    size="small"
+                    size="sm"
                   />
                 </Tooltip>
               </ServerItem>

src/renderer/src/pages/settings/AssistantSettings/AssistantMemorySettings.tsx

@@ -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}
+              isSelected={assistant.enableMemory || false}
-              onChange={handleMemoryToggle}
+              onValueChange={handleMemoryToggle}
               disabled={!isMemoryEnabled}
             />
           </Tooltip>

src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx

@@ -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}
+          isSelected={enableTemperature}
-          onChange={(enabled) => {
+          onValueChange={(enabled) => {
             setEnableTemperature(enabled)
             updateAssistantSettings({ enableTemperature: enabled })
           }}
@@ -298,8 +299,8 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
           </Tooltip>
         </RowFlex>
         <Switch
-          checked={enableTopP}
+          isSelected={enableTopP}
-          onChange={(enabled) => {
+          onValueChange={(enabled) => {
             setEnableTopP(enabled)
             updateAssistantSettings({ enableTopP: enabled })
           }}
@@ -387,8 +388,8 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
           </Tooltip>
         </RowFlex>
         <Switch
-          checked={enableMaxTokens}
+          isSelected={enableMaxTokens}
-          onChange={async (enabled) => {
+          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}
+          isSelected={streamOutput}
-          onChange={(checked) => {
+          onValueChange={(checked) => {
             setStreamOutput(checked)
             updateAssistantSettings({ streamOutput: checked })
           }}

src/renderer/src/pages/settings/DataSettings/DataSettings.tsx

@@ -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}
+            defaultSelected={shouldCopyData}
-            onChange={(checked) => {
+            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>

src/renderer/src/pages/settings/DataSettings/ExportMenuSettings.tsx

@@ -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}
+          isSelected={exportMenuOptions.markdown_reason}
-          onChange={(checked) => handleToggleOption('markdown_reason', checked)}
+          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}
+          isSelected={exportMenuOptions.plain_text}
-          onChange={(checked) => handleToggleOption('plain_text', checked)}
+          onValueChange={(checked) => handleToggleOption('plain_text', checked)}
         />
       </SettingRow>
     </SettingGroup>

src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx

@@ -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>

src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx

@@ -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>

src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx

@@ -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>

src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx

@@ -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>

src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx

@@ -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>

src/renderer/src/pages/settings/DataSettings/S3Settings.tsx

@@ -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>

src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx

@@ -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>

src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx

@@ -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}
+                isSelected={clickAssistantToShowTopic}
-                onChange={(checked) => setClickAssistantToShowTopic(checked)}
+                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}>

src/renderer/src/pages/settings/GeneralSettings.tsx

@@ -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}
+            isSelected={enableDataCollection}
-            onChange={(v) => {
+            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>

src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx

@@ -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}
+              isLoading={isLoading}
-              onChange={onToggle}
+              onValueChange={onToggle}
-              size="small"
+              size="sm"
               data-no-dnd
             />
             <Button

src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx

@@ -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}
+              isLoading={loadingServer === server.id}
-              onChange={onToggleActive}
+              onValueChange={onToggleActive}
             />
             <Button
               type="primary"

src/renderer/src/pages/settings/MCPSettings/McpTool.tsx

@@ -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)}
+            isSelected={isToolAutoApproved(tool, server)}
-            disabled={!isToolEnabled(tool)}
+            isDisabled={!isToolEnabled(tool)}
-            onChange={(checked) => handleAutoApproveToggle(tool, checked)}
+            onValueChange={(checked) => handleAutoApproveToggle(tool, checked)}
-            size="small"
+            size="sm"
           />
         </Tooltip>
       )

src/renderer/src/pages/settings/MemorySettings/MemorySettings.tsx

@@ -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>

src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx

@@ -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}
+          isSelected={enableTemperature}
-          onChange={(enabled) => {
+          onValueChange={(enabled) => {
             setEnableTemperature(enabled)
             onUpdateAssistantSettings({ enableTemperature: enabled })
           }}
@@ -212,8 +213,8 @@ const AssistantSettings: FC = () => {
         </RowFlex>
         <Switch
           style={{ marginLeft: 10 }}
-          checked={enableTopP}
+          isSelected={enableTopP}
-          onChange={(enabled) => {
+          onValueChange={(enabled) => {
             setEnableTopP(enabled)
             onUpdateAssistantSettings({ enableTopP: enabled })
           }}
@@ -275,8 +276,8 @@ const AssistantSettings: FC = () => {
         </RowFlex>
         <Switch
           style={{ marginLeft: 10 }}
-          checked={enableMaxTokens}
+          isSelected={enableMaxTokens}
-          onChange={async (enabled) => {
+          onValueChange={async (enabled) => {
             if (enabled) {
               const confirmed = await modalConfirm({
                 title: t('chat.settings.max_tokens.confirm'),

src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx

@@ -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>

src/renderer/src/pages/settings/NotesSettings.tsx

@@ -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}
+            isSelected={settings.showTableOfContents}
-            onChange={(checked) => updateSettings({ showTableOfContents: checked })}
+            onValueChange={(checked) => updateSettings({ showTableOfContents: checked })}
           />
         </SettingRow>
         <SettingHelpText>{t('notes.settings.display.show_table_of_contents_description')}</SettingHelpText>

src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx

@@ -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>

src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx

@@ -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}
+                isSelected={supportedTextDelta}
-                style={{ marginLeft: 'auto' }}
+                className="ml-auto"
-                size="small"
+                size="sm"
-                onChange={(checked) => {
+                onValueChange={(checked) => {
                   setSupportedTextDelta(checked)
                   // 直接传递新值给autoSave
                   autoSave({ supported_text_delta: checked })

src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx

@@ -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)

src/renderer/src/pages/settings/QuickAssistantSettings.tsx

@@ -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>
           </>
         )}

src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx

@@ -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}
+            isSelected={isSupportedOS && selectionEnabled}
-            onChange={(checked) => handleEnableCheckboxChange(checked)}
+            onValueChange={handleEnableCheckboxChange}
-            disabled={!isSupportedOS}
+            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>

src/renderer/src/pages/settings/ShortcutSettings.tsx

@@ -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))} />
       )
     }
   ]

src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx

@@ -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 }}>

src/renderer/src/pages/settings/index.tsx

@@ -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'

src/renderer/src/pages/translate/TranslateSettings.tsx

@@ -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'

src/renderer/src/windows/dataRefactorTest/components/PreferenceBasicTests.tsx

@@ -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
+              <Switch isSelected={value === true} onValueChange={(checked) => setValue(checked)} />
-                checked={value === true}
-                onChange={(checked) => setValue(checked)}
-                checkedChildren="启用"
-                unCheckedChildren="禁用"
-              />
             )}
 
             {/* Language Switch */}