feat: add font size customization to settings and apply it in the main app layout

Author: experdot

src/renderer/src/App.tsx

@@ -3,17 +3,34 @@ import { ConfigProvider, theme, App as AntdApp } from 'antd'
 import zhCN from 'antd/locale/zh_CN'
 import Layout from './components/layout/Layout'
 import { ZustandAppProvider } from './stores/ZustandAppContext'
+import { useSettingsStore } from './stores/settingsStore'
 import './App.css'
 import UpdateNotification from './components/common/UpdateNotification'
 
 function AppContent(): React.JSX.Element {
+  const { settings } = useSettingsStore()
+
+  // 根据字体大小设置获取基础字号
+  const getFontSize = () => {
+    switch (settings.fontSize) {
+      case 'small':
+        return 12
+      case 'large':
+        return 16
+      case 'medium':
+      default:
+        return 14
+    }
+  }
+
   return (
     <ConfigProvider
       locale={zhCN}
       theme={{
         algorithm: theme.defaultAlgorithm,
         token: {
-          colorPrimary: '#1890ff'
+          colorPrimary: '#1890ff',
+          fontSize: getFontSize()
         }
       }}
     >

src/renderer/src/components/settings/AppearanceSettings.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Form, Select, Card } from 'antd'
 import { FormInstance } from 'antd/lib/form'
+import { useSettingsStore } from '../../stores/settingsStore'
 
 const { Option } = Select
 
@@ -9,10 +10,16 @@ interface AppearanceSettingsProps {
 }
 
 export default function AppearanceSettings({ form }: AppearanceSettingsProps) {
+  const { setFontSize } = useSettingsStore()
+
+  const handleFontSizeChange = (value: 'small' | 'medium' | 'large') => {
+    setFontSize(value)
+  }
+
   return (
     <Card size="small" title="外观设置">
       <Form.Item name="fontSize" label="字体大小">
-        <Select>
+        <Select onChange={handleFontSizeChange}>
           <Option value="small">小</Option>
           <Option value="medium">中</Option>
           <Option value="large">大</Option>