From d4fd8ffdcc6a8213a0939b15ca76d7398f2bebb4 Mon Sep 17 00:00:00 2001 From: MyPrototypeWhat Date: Fri, 19 Sep 2025 12:10:28 +0800 Subject: [PATCH] refactor(SettingsTab): update Selector component usage for consistency - Simplified Selector component usage in SettingsTab by removing deprecated props and updating to the new API. - Added size and label props to enhance accessibility and user experience. - Ensured consistent handling of selected keys and selection change events across multiple instances of Selector. --- .../components/interactive/Selector/index.tsx | 6 +- .../src/pages/home/Tabs/SettingsTab.tsx | 74 +++++++++++-------- 2 files changed, 44 insertions(+), 36 deletions(-) diff --git a/packages/ui/src/components/interactive/Selector/index.tsx b/packages/ui/src/components/interactive/Selector/index.tsx index 7c441df1ba..eeb7ab7759 100644 --- a/packages/ui/src/components/interactive/Selector/index.tsx +++ b/packages/ui/src/components/interactive/Selector/index.tsx @@ -37,11 +37,7 @@ const Selector = ({ items, onSelectionChange, ...rest } return ( - {({ value, label, ...restItem }: SelectorItem) => ( {label} diff --git a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx index e405e79f9d..4ab2d06eb8 100644 --- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx +++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx @@ -1,9 +1,7 @@ -import { RowFlex } from '@cherrystudio/ui' -import { Switch } from '@cherrystudio/ui' +import { RowFlex, Selector, Switch } from '@cherrystudio/ui' import { useMultiplePreferences, usePreference } from '@data/hooks/usePreference' import EditableNumber from '@renderer/components/EditableNumber' import Scrollbar from '@renderer/components/Scrollbar' -import Selector from '@renderer/components/Selector' import { HelpTooltip } from '@renderer/components/TooltipIcons' import { DEFAULT_CONTEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant' import { isOpenAIModel } from '@renderer/config/models' @@ -329,11 +327,13 @@ const SettingsTab: FC = (props) => { - {t('message.message.style.label')} + {/* {t('message.message.style.label')} */} setMessageStyle(value as 'plain' | 'bubble')} - options={[ + size="sm" + label={t('message.message.style.label')} + selectedKeys={[messageStyle]} + onSelectionChange={(value) => setMessageStyle(value[0] as 'plain' | 'bubble')} + items={[ { value: 'plain', label: t('message.message.style.plain') }, { value: 'bubble', label: t('message.message.style.bubble') } ]} @@ -341,11 +341,13 @@ const SettingsTab: FC = (props) => { - {t('message.message.multi_model_style.label')} + {/* {t('message.message.multi_model_style.label')} */} setMultiModelMessageStyle(value)} - options={[ + size="sm" + label={t('message.message.multi_model_style.label')} + selectedKeys={[multiModelMessageStyle]} + onSelectionChange={(value) => setMultiModelMessageStyle(value[0])} + items={[ { value: 'fold', label: t('message.message.multi_model_style.fold.label') }, { value: 'vertical', label: t('message.message.multi_model_style.vertical') }, { value: 'horizontal', label: t('message.message.multi_model_style.horizontal') }, @@ -355,11 +357,13 @@ const SettingsTab: FC = (props) => { - {t('settings.messages.navigation.label')} + {/* {t('settings.messages.navigation.label')} */} setMessageNavigation(value as 'none' | 'buttons' | 'anchor')} - options={[ + size="sm" + label={t('settings.messages.navigation.label')} + selectedKeys={[messageNavigation]} + onSelectionChange={(value) => setMessageNavigation(value[0] as 'none' | 'buttons' | 'anchor')} + items={[ { value: 'none', label: t('settings.messages.navigation.none') }, { value: 'buttons', label: t('settings.messages.navigation.buttons') }, { value: 'anchor', label: t('settings.messages.navigation.anchor') } @@ -393,11 +397,13 @@ const SettingsTab: FC = (props) => { - {t('settings.math.engine.label')} + {/* {t('settings.math.engine.label')} */} setMathEngine(value as MathEngine)} - options={[ + size="sm" + label={t('settings.math.engine.label')} + selectedKeys={[mathEngine]} + onSelectionChange={(value) => setMathEngine(value[0] as MathEngine)} + items={[ { value: 'KaTeX', label: 'KaTeX' }, { value: 'MathJax', label: 'MathJax' }, { value: 'none', label: t('settings.math.engine.none') } @@ -418,11 +424,13 @@ const SettingsTab: FC = (props) => { - {t('message.message.code_style')} + {/* {t('message.message.code_style')} */} onCodeStyleChange(value as CodeStyleVarious)} - options={themeNames.map((theme) => ({ + size="sm" + label={t('message.message.code_style')} + selectedKeys={[codeStyle]} + onSelectionChange={(value) => onCodeStyleChange(value[0] as CodeStyleVarious)} + items={themeNames.map((theme) => ({ value: theme, label: theme }))} @@ -611,23 +619,27 @@ const SettingsTab: FC = (props) => { - {t('settings.input.target_language.label')} + {/* {t('settings.input.target_language.label')} */} setTargetLanguage(value)} + size="sm" + label={t('settings.input.target_language.label')} + selectedKeys={[targetLanguage]} + onSelectionChange={(value) => setTargetLanguage(value[0])} placeholder={UNKNOWN.emoji + ' ' + UNKNOWN.label()} - options={translateLanguages.map((item) => { + items={translateLanguages.map((item) => { return { value: item.langCode, label: item.emoji + ' ' + item.label() } })} /> - {t('settings.messages.input.send_shortcuts')} + {/* {} */} setSendMessageShortcut(value as SendMessageShortcut)} - options={[ + size="sm" + label={t('settings.messages.input.send_shortcuts')} + selectedKeys={[sendMessageShortcut]} + onSelectionChange={(value) => setSendMessageShortcut(value[0] as SendMessageShortcut)} + items={[ { value: 'Enter', label: getSendMessageShortcutLabel('Enter') }, { value: 'Ctrl+Enter', label: getSendMessageShortcutLabel('Ctrl+Enter') }, { value: 'Alt+Enter', label: getSendMessageShortcutLabel('Alt+Enter') },