feat (core): 支持编辑器设置文字大小

Author: qianmoQ

src-tauri/src/config.rs

@@ -15,6 +15,7 @@ pub struct EditorConfig {
     pub indent_with_tab: Option<bool>, // 是否使用 tab 缩进
     pub tab_size: Option<u32>,         // tab 缩进, 空格数，默认为 2
     pub theme: Option<String>,         // 编辑器主题
+    pub font_size: Option<u32>,        // 编辑器字体大小
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -39,6 +40,7 @@ impl Default for AppConfig {
                 indent_with_tab: Some(true),
                 tab_size: Some(2),
                 theme: Some("githubLight".to_string()),
+                font_size: Some(14),
             }),
         }
     }
@@ -94,6 +96,7 @@ impl ConfigManager {
                                 indent_with_tab: Some(true),
                                 tab_size: Some(2),
                                 theme: Some("githubLight".to_string()),
+                                font_size: Some(14),
                             });
                             println!("读取配置 -> 添加默认 editor 配置");
                         }
@@ -197,6 +200,7 @@ impl ConfigManager {
                 indent_with_tab: Some(true),
                 tab_size: Some(2),
                 theme: Some("githubLight".to_string()),
+                font_size: Some(14),
             }),
         }
     }

src-tauri/src/setup/menus/app.rs

@@ -1,4 +1,6 @@
 use log::info;
+#[allow(unused_imports)]
+use tauri::Manager;
 use tauri::{
     AppHandle, Emitter,
     menu::{MenuItemBuilder, Submenu, SubmenuBuilder},

src/components/CodeEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex bg-white h-full relative">
     <Codemirror v-if="isReady"
-                style="width: 100%; height: 100%"
+                :style="{ width: '100%', height: '100%', fontSize: editorConfig?.font_size ? `${editorConfig.font_size}px` : undefined }"
                 :model-value="modelValue"
                 :extensions="extensions"
                 :indent-with-tab="editorConfig?.indent_with_tab"

src/components/setting/Editor.vue

@@ -18,6 +18,15 @@
       </div>
     </div>
 
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        字体大小
+      </label>
+      <div class="flex gap-2">
+        <Number v-model="editorConfig.font_size" :min="1" :max="30" placeholder="字体大小"/>
+      </div>
+    </div>
+
     <div>
       <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
         编辑器主题

src/composables/useCodeMirrorEditor.ts

@@ -66,6 +66,7 @@ interface EditorConfig
     theme?: string
     indent_with_tab?: boolean
     tab_size?: number
+    font_size?: number
 }
 
 interface Props
@@ -221,7 +222,8 @@ export function useCodeMirrorEditor(props: Props)
                 editorConfig.value = {
                     theme: 'githubLight',
                     indent_with_tab: true,
-                    tab_size: 2
+                    tab_size: 2,
+                    font_size: 14
                 }
                 await updateExtensions()
             }
@@ -234,7 +236,8 @@ export function useCodeMirrorEditor(props: Props)
             editorConfig.value = {
                 theme: 'githubLight',
                 indent_with_tab: true,
-                tab_size: 2
+                tab_size: 2,
+                font_size: 14
             }
             await updateExtensions()
         }

src/composables/useEditorConfig.ts

@@ -8,6 +8,7 @@ interface EditorConfig
     tab_size?: number
     theme?: string
     indent_with_tab?: boolean
+    font_size?: number
 }
 
 interface ThemeOption
@@ -149,7 +150,8 @@ export function useEditorConfig(emit?: any)
         editorConfig.value = {
             indent_with_tab: true,
             tab_size: 2,
-            theme: 'githubLight'
+            theme: 'githubLight',
+            font_size: 14
         }
     }