feat (core): 支持编辑器显示空格省略配置

Author: qianmoQ

src-tauri/src/config.rs

@@ -18,6 +18,7 @@ pub struct EditorConfig {
     pub font_size: Option<u32>,           // 编辑器字体大小
     pub show_line_numbers: Option<bool>,  // 是否显示行号
     pub show_function_help: Option<bool>, // 是否显示函数帮助
+    pub space_dot_omission: Option<bool>, // 是否显示空格省略
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -45,6 +46,7 @@ impl Default for AppConfig {
                 font_size: Some(14),
                 show_line_numbers: Some(true),
                 show_function_help: Some(false),
+                space_dot_omission: Some(false),
             }),
         }
     }
@@ -103,6 +105,7 @@ impl ConfigManager {
                                 font_size: Some(14),
                                 show_line_numbers: Some(true),
                                 show_function_help: Some(false),
+                                space_dot_omission: Some(false),
                             });
                             println!("读取配置 -> 添加默认 editor 配置");
                         }
@@ -209,6 +212,7 @@ impl ConfigManager {
                 font_size: Some(14),
                 show_line_numbers: Some(true),
                 show_function_help: Some(false),
+                space_dot_omission: Some(false),
             }),
         }
     }

src/components/setting/Editor.vue

@@ -12,6 +12,10 @@
       <Switch v-model="editorConfig.show_function_help"/>
     </Label>
 
+    <Label label="是否显示空格省略">
+      <Switch v-model="editorConfig.space_dot_omission"/>
+    </Label>
+
     <Label label="缩进空格数">
       <Number v-model="editorConfig.tab_size" :min="1" :max="8" placeholder="缩进空格数"/>
     </Label>
@@ -27,8 +31,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useEditorConfig } from '../../composables/useEditorConfig'
+import {onMounted} from 'vue'
+import {useEditorConfig} from '../../composables/useEditorConfig'
 import Select from '../../ui/Select.vue'
 import Switch from '../../ui/Switch.vue'
 import Number from '../../ui/Number.vue'

src/composables/useCodeMirrorEditor.ts

@@ -64,6 +64,7 @@ import {StreamLanguage} from '@codemirror/language'
 import {EditorConfig} from '../types/app.ts'
 import {EditorView} from '@codemirror/view'
 import {useCodeMirrorFunctionHelp} from './useCodeMirrorFunctionHelp'
+import {useCodeMirrorSpaceOmission} from './useCodeMirrorSpaceOmission.ts'
 
 interface Props
 {
@@ -234,6 +235,13 @@ export function useCodeMirrorEditor(props: Props)
             result.push(showFunctionHelpHover)
         }
 
+        const shouldShowSpaceOmission = editorConfig.value?.space_dot_omission ?? false
+        if (shouldShowSpaceOmission) {
+            const {spaceOmissionPlugin, spaceOmissionTheme} = useCodeMirrorSpaceOmission()
+            result.push(spaceOmissionPlugin)
+            result.push(spaceOmissionTheme)
+        }
+
         extensions.value = result
 
         // 如果组件还没准备好，等待下一个 tick 后设置为准备好
@@ -334,6 +342,11 @@ export function useCodeMirrorEditor(props: Props)
         await reRenderEditor()
     })
 
+    watch(() => editorConfig.value?.space_dot_omission, async () => {
+        console.log('是否显示空格省略:', editorConfig.value?.space_dot_omission)
+        await reRenderEditor()
+    })
+
     return {
         // 状态
         isReady,

src/composables/useCodeMirrorSpaceOmission.ts

@@ -0,0 +1,111 @@
+import {EditorView, ViewPlugin, ViewUpdate} from '@codemirror/view'
+
+export function useCodeMirrorSpaceOmission()
+{
+    const spaceOmissionPlugin = ViewPlugin.fromClass(class
+    {
+        private styleElement: HTMLStyleElement | null = null
+
+        constructor(private view: EditorView)
+        {
+            this.updateCSS()
+        }
+
+        update(update: ViewUpdate)
+        {
+            if (update.selectionSet) {
+                this.updateCSS()
+            }
+        }
+
+        updateCSS()
+        {
+            const selection = this.view.state.selection.main
+
+            // 移除之前的样式
+            if (this.styleElement) {
+                this.styleElement.remove()
+                this.styleElement = null
+            }
+
+            if (selection.empty) {
+                return
+            }
+
+            const doc = this.view.state.doc
+            const fromLine = doc.lineAt(selection.from)
+            const toLine = doc.lineAt(selection.to)
+
+            const cssRules: string[] = []
+
+            // 为每个有缩进的选中行生成CSS规则
+            for (let lineNum = fromLine.number; lineNum <= toLine.number; lineNum++) {
+                const line = doc.line(lineNum)
+                const text = line.text
+
+                // 计算空格数
+                let spaceCount = 0
+                for (let i = 0; i < text.length; i++) {
+                    if (text[i] === ' ') {
+                        spaceCount++
+                    }
+                    else {
+                        break
+                    }
+                }
+
+                if (spaceCount > 0) {
+                    // 使用行号作为选择器，添加伪元素
+                    const arrowText = '·'.repeat(spaceCount)
+                    cssRules.push(`
+                        .cm-editor .cm-line:nth-child(${lineNum}) {
+                            position: relative;
+                        }
+                        .cm-editor .cm-line:nth-child(${lineNum})::before {
+                            content: "${arrowText}";
+                            position: absolute;
+                            left: 0.4em;
+                            top: 0;
+                            color: #9ca3af;
+                            font-weight: 500;
+                            pointer-events: none;
+                            z-index: 2;
+                            font-family: monospace;
+                            font-size: inherit;
+                            line-height: inherit;
+                        }
+                        .cm-editor .cm-selectionBackground .cm-line:nth-child(${lineNum})::before,
+                        .cm-editor .cm-line:nth-child(${lineNum}).cm-selectionBackground::before {
+                            background-color: var(--cm-selectionBackground, #b3d4fc);
+                        }
+                    `)
+                }
+            }
+
+            // 插入动态样式
+            if (cssRules.length > 0) {
+                this.styleElement = document.createElement('style')
+                this.styleElement.textContent = cssRules.join('\n')
+                document.head.appendChild(this.styleElement)
+            }
+        }
+
+        destroy()
+        {
+            if (this.styleElement) {
+                this.styleElement.remove()
+            }
+        }
+    })
+
+    const spaceOmissionTheme = EditorView.theme({
+        '.cm-line': {
+            position: 'relative'
+        }
+    })
+
+    return {
+        spaceOmissionPlugin,
+        spaceOmissionTheme
+    }
+}

src/types/app.ts

@@ -53,4 +53,5 @@ export interface EditorConfig
     font_size?: number
     show_line_numbers?: boolean
     show_function_help?: boolean
+    space_dot_omission?: boolean
 }