feat (ui): 支持编辑器行号配置

Author: qianmoQ

src-tauri/src/config.rs

@@ -12,10 +12,11 @@ static CONFIG_MANAGER: Mutex<Option<ConfigManager>> = Mutex::new(None);
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
 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>,        // 编辑器字体大小
+    pub indent_with_tab: Option<bool>,   // 是否使用 tab 缩进
+    pub tab_size: Option<u32>,           // tab 缩进, 空格数，默认为 2
+    pub theme: Option<String>,           // 编辑器主题
+    pub font_size: Option<u32>,          // 编辑器字体大小
+    pub show_line_numbers: Option<bool>, // 是否显示行号
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -41,6 +42,7 @@ impl Default for AppConfig {
                 tab_size: Some(2),
                 theme: Some("githubLight".to_string()),
                 font_size: Some(14),
+                show_line_numbers: Some(true),
             }),
         }
     }
@@ -97,6 +99,7 @@ impl ConfigManager {
                                 tab_size: Some(2),
                                 theme: Some("githubLight".to_string()),
                                 font_size: Some(14),
+                                show_line_numbers: Some(true),
                             });
                             println!("读取配置 -> 添加默认 editor 配置");
                         }
@@ -201,6 +204,7 @@ impl ConfigManager {
                 tab_size: Some(2),
                 theme: Some("githubLight".to_string()),
                 font_size: Some(14),
+                show_line_numbers: Some(true),
             }),
         }
     }

src/components/setting/Editor.vue

@@ -4,6 +4,10 @@
       <Switch v-model="editorConfig.indent_with_tab"/>
     </Label>
 
+    <Label label="是否显示行号">
+      <Switch v-model="editorConfig.show_line_numbers"/>
+    </Label>
+
     <Label label="缩进空格数">
       <Number v-model="editorConfig.tab_size" :min="1" :max="8" placeholder="缩进空格数"/>
     </Label>

src/composables/useCodeMirrorEditor.ts

@@ -60,14 +60,8 @@ import {
 import { invoke } from '@tauri-apps/api/core'
 import { useToast } from '../plugins/toast'
 import { StreamLanguage } from '@codemirror/language'
-
-interface EditorConfig
-{
-    theme?: string
-    indent_with_tab?: boolean
-    tab_size?: number
-    font_size?: number
-}
+import { EditorConfig } from '../types/app.ts'
+import { EditorView } from '@codemirror/view'
 
 interface Props
 {
@@ -83,6 +77,13 @@ export function useCodeMirrorEditor(props: Props)
     const isReady = ref(false)
     const extensions = ref<any[]>([])
     const editorConfig = ref<EditorConfig>({})
+    const defaultConfig = {
+        theme: 'githubLight',
+        indent_with_tab: true,
+        tab_size: 2,
+        font_size: 14,
+        show_line_numbers: false
+    }
 
     // 主题映射
     const themeMap: Record<string, any> = {
@@ -180,8 +181,18 @@ export function useCodeMirrorEditor(props: Props)
         }
     }
 
+    // 隐藏行号的主题扩展
+    const hideLineNumbersTheme = EditorView.theme({
+        '.cm-lineNumbers': {
+            display: 'none !important'
+        },
+        '.cm-gutters': {
+            display: 'none !important'
+        }
+    })
+
     // 更新扩展的函数
-    const updateExtensions = async () => {
+    const updateExtensions = async (showLineNumbers?: boolean) => {
         const result = []
 
         // 添加主题扩展
@@ -196,6 +207,14 @@ export function useCodeMirrorEditor(props: Props)
             }
         }
 
+        // 处理行号显示逻辑
+        const shouldShowLineNumbers = showLineNumbers ?? editorConfig.value?.show_line_numbers ?? false
+
+        // 如果配置为不显示行号，则添加隐藏行号的扩展
+        if (!shouldShowLineNumbers) {
+            result.push(hideLineNumbersTheme)
+        }
+
         extensions.value = result
 
         // 如果组件还没准备好，等待下一个 tick 后设置为准备好
@@ -219,26 +238,14 @@ export function useCodeMirrorEditor(props: Props)
             }
             else {
                 // 如果没有配置，使用默认配置
-                editorConfig.value = {
-                    theme: 'githubLight',
-                    indent_with_tab: true,
-                    tab_size: 2,
-                    font_size: 14
-                }
+                editorConfig.value = defaultConfig
                 await updateExtensions()
             }
         }
         catch (error) {
             console.error('获取配置失败:', error)
             toast.error('获取配置失败 - 错误信息: ' + error)
-
-            // 失败时使用默认配置
-            editorConfig.value = {
-                theme: 'githubLight',
-                indent_with_tab: true,
-                tab_size: 2,
-                font_size: 14
-            }
+            editorConfig.value = defaultConfig
             await updateExtensions()
         }
     }
@@ -296,6 +303,12 @@ export function useCodeMirrorEditor(props: Props)
         await reRenderEditor()
     }, { immediate: false })
 
+    // 监听行号显示配置变化
+    watch(() => editorConfig.value?.show_line_numbers, async () => {
+        console.log('行号显示配置变化:', editorConfig.value?.show_line_numbers)
+        await reRenderEditor()
+    }, { immediate: false })
+
     return {
         // 状态
         isReady,
@@ -313,4 +326,4 @@ export function useCodeMirrorEditor(props: Props)
         getThemeExtension,
         getLanguageExtension
     }
-}
+}

src/composables/useEditorConfig.ts

@@ -2,14 +2,7 @@ import { ref, watch } from 'vue'
 import { debounce } from 'lodash-es'
 import { invoke } from '@tauri-apps/api/core'
 import { useToast } from '../plugins/toast'
-
-interface EditorConfig
-{
-    tab_size?: number
-    theme?: string
-    indent_with_tab?: boolean
-    font_size?: number
-}
+import { EditorConfig } from '../types/app.ts'
 
 interface ThemeOption
 {

src/types/app.ts

@@ -44,3 +44,12 @@ export interface AppInfo
     platform: string
     arch: string
 }
+
+export interface EditorConfig
+{
+    theme?: string
+    indent_with_tab?: boolean
+    tab_size?: number
+    font_size?: number
+    show_line_numbers?: boolean
+}