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

- 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

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

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