refactor: Update TTS settings and improve localization

- Changed the title in the Chinese localization from "语音合成设置" to "语音设置" for clarity.
- Adjusted the layout of the TTSSettings component, including margin and flex properties for better alignment.
- Enhanced the help text section to improve readability and structure.
- Updated comments in settings.ts for better understanding of default values.

src/renderer/src/i18n/locales/zh-cn.json

@@ -1336,7 +1336,7 @@
         "enable_privacy_mode": "匿名发送错误报告和数据统计"
       },
       "tts": {
-        "title": "语音合成设置",
+        "title": "语音设置",
         "enable": "启用语音合成",
         "enable.help": "启用后可以将文本转换为语音",
         "reset": "重置",

src/renderer/src/pages/settings/TTSSettings/TTSSettings.tsx

@@ -34,7 +34,6 @@ import {
 } from '..'
 
 const CustomVoiceInput = styled.div`
-  margin-top: 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -66,6 +65,10 @@ const FlexContainer = styled.div`
 
 const FilterOptionItem = styled.div`
   margin-bottom: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
 `
 
 const LengthLabel = styled.span`
@@ -378,9 +381,7 @@ const TTSSettings: FC = () => {
           {t('settings.tts.title')}
         </Space>
       </SettingTitle>
-
       <SettingDivider />
-
       <SettingGroup>
         <SettingRow>
           <SettingRowTitle>{t('settings.tts.enable')}</SettingRowTitle>
@@ -406,12 +407,9 @@ const TTSSettings: FC = () => {
         </SettingRow>
         <SettingHelpText>{t('settings.tts.reset_help')}</SettingHelpText>
       </SettingGroup>
-
-      <SettingDivider />
-
       <SettingGroup>
         <SettingRowTitle>{t('settings.tts.api_settings')}</SettingRowTitle>
-        <Form layout="vertical" style={{ width: '100%' }}>
+        <Form layout="vertical" style={{ width: '100%', marginTop: 16 }}>
           {/* TTS服务类型选择 */}
           <Form.Item label={t('settings.tts.service_type')} style={{ marginBottom: 16 }}>
             <FlexContainer>
@@ -711,12 +709,8 @@ const TTSSettings: FC = () => {
           </Form.Item>
         </Form>
       </SettingGroup>
-
+      <SettingHelpText style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 5 }}>
-      <SettingDivider />
+        <span>{t('settings.tts.help')}</span>
-
-      <SettingHelpText>
-        {t('settings.tts.help')}
-        <br />
         <a href="https://platform.openai.com/docs/guides/text-to-speech" target="_blank" rel="noopener noreferrer">
           {t('settings.tts.learn_more')}
         </a>

src/renderer/src/store/settings.ts

@@ -232,7 +232,7 @@ export const initialState: SettingsState = {
   enableDataCollection: false,
   // TTS配置
   ttsEnabled: false,
-  ttsServiceType: 'openai', // 默认使用OpenAI TTS
+  ttsServiceType: 'openai', // 默认使用 OpenAI TTS
   ttsApiKey: '',
   ttsApiUrl: 'https://api.openai.com/v1/audio/speech',
   ttsVoice: '',