whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Enhance SettingsTab UI with styled select components and type safety

Browse Source 
- Replace default Select components with StyledSelect for improved visual design
- Add explicit type casting for various select onChange handlers
- Improve type safety for message style, multi-model style, code style, and other settings
- Introduce StyledSelect with custom styling for consistent UI appearance
This commit is contained in:
kangfenmao 2025-03-08 20:58:34 +08:00
parent 85bf4498c0
commit 37ee092398
1 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ import { useSettings } from '@renderer/hooks/useSettings'
import { SettingDivider, SettingRow, SettingRowTitle, SettingSubtitle } from '@renderer/pages/settings'
import { useAppDispatch } from '@renderer/store'
import {
SendMessageShortcut,
setAutoTranslateWithSpace,
setCodeCollapsible,
setCodeShowLineNumbers,
@ -32,7 +33,7 @@ import {
setShowMessageDivider,
setThoughtAutoCollapse
} from '@renderer/store/settings'
import { Assistant, AssistantSettings, ThemeMode, TranslateLanguageVarious } from '@renderer/types'
import { Assistant, AssistantSettings, CodeStyleVarious, ThemeMode, TranslateLanguageVarious } from '@renderer/types'
import { modalConfirm } from '@renderer/utils'
import { Col, InputNumber, Row, Segmented, Select, Slider, Switch, Tooltip } from 'antd'
import { FC, useEffect, useState } from 'react'
@ -334,35 +335,37 @@ const SettingsTab: FC<Props> = (props) => {
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('message.message.style')}</SettingRowTitleSmall>
<Select
<StyledSelect
value={messageStyle}
onChange={(value) => dispatch(setMessageStyle(value))}
onChange={(value) => dispatch(setMessageStyle(value as 'plain' | 'bubble'))}
style={{ width: 135 }}
size="small">
<Select.Option value="plain">{t('message.message.style.plain')}</Select.Option>
<Select.Option value="bubble">{t('message.message.style.bubble')}</Select.Option>
</Select>
</StyledSelect>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('message.message.multi_model_style')}</SettingRowTitleSmall>
<Select
<StyledSelect
size="small"
value={multiModelMessageStyle}
onChange={(value) => dispatch(setMultiModelMessageStyle(value))}
onChange={(value) =>
dispatch(setMultiModelMessageStyle(value as 'fold' | 'vertical' | 'horizontal' | 'grid'))
}
style={{ width: 135 }}>
<Select.Option value="fold">{t('message.message.multi_model_style.fold')}</Select.Option>
<Select.Option value="vertical">{t('message.message.multi_model_style.vertical')}</Select.Option>
<Select.Option value="horizontal">{t('message.message.multi_model_style.horizontal')}</Select.Option>
<Select.Option value="grid">{t('message.message.multi_model_style.grid')}</Select.Option>
</Select>
</StyledSelect>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('message.message.code_style')}</SettingRowTitleSmall>
<Select
<StyledSelect
value={codeStyle}
onChange={(value) => dispatch(setCodeStyle(value))}
onChange={(value) => dispatch(setCodeStyle(value as CodeStyleVarious))}
style={{ width: 135 }}
size="small">
{codeThemes.map((theme) => (
@ -370,19 +373,19 @@ const SettingsTab: FC<Props> = (props) => {
{theme}
</Select.Option>
))}
</Select>
</StyledSelect>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.math_engine')}</SettingRowTitleSmall>
<Select
<StyledSelect
value={mathEngine}
onChange={(value) => dispatch(setMathEngine(value))}
onChange={(value) => dispatch(setMathEngine(value as 'MathJax' | 'KaTeX'))}
style={{ width: 135 }}
size="small">
<Select.Option value="KaTeX">KaTeX</Select.Option>
<Select.Option value="MathJax">MathJax</Select.Option>
</Select>
</StyledSelect>
</SettingRow>
<SettingDivider />
<SettingRow>
@ -468,7 +471,7 @@ const SettingsTab: FC<Props> = (props) => {
)}
<SettingRow>
<SettingRowTitleSmall>{t('settings.input.target_language')}</SettingRowTitleSmall>
<Select
<StyledSelect
defaultValue={'english' as TranslateLanguageVarious}
size="small"
value={targetLanguage}
@ -480,14 +483,14 @@ const SettingsTab: FC<Props> = (props) => {
{ value: 'japanese', label: t('settings.input.target_language.japanese') },
{ value: 'russian', label: t('settings.input.target_language.russian') }
]}
onChange={(value) => setTargetLanguage(value)}
onChange={(value) => setTargetLanguage(value as TranslateLanguageVarious)}
style={{ width: 135 }}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.send_shortcuts')}</SettingRowTitleSmall>
<Select
<StyledSelect
size="small"
value={sendMessageShortcut}
menuItemSelectedIcon={<CheckOutlined />}
@ -497,7 +500,7 @@ const SettingsTab: FC<Props> = (props) => {
{ value: 'Ctrl+Enter', label: 'Ctrl + Enter' },
{ value: 'Command+Enter', label: `${isMac ? '⌘' : isWindows ? 'Win' : 'Super'} + Enter` }
]}
onChange={(value) => setSendMessageShortcut(value)}
onChange={(value) => setSendMessageShortcut(value as SendMessageShortcut)}
style={{ width: 135 }}
/>
</SettingRow>
@ -561,4 +564,12 @@ const SegmentedContainer = styled.div`
}
`
const StyledSelect = styled(Select)`
.ant-select-selector {
border-radius: 15px !important;
padding: 4px 10px !important;
height: 26px !important;
}
`
export default SettingsTab