feat (core): 支持编辑器多个配置

README.md

@@ -43,8 +43,10 @@ CodeForge 是一款轻量级、高性能的桌面代码执行器，专为开发
 ## 安装
 
 **系统要求：**
+
 - Node.js 18+
 - Rust 1.8+
+- Tauri 2.x
 
 **构建步骤：**
 

src-tauri/Cargo.toml

@@ -30,3 +30,4 @@ dirs = "6.0.0"
 regex = "1.11.1"
 reqwest = { version = "0.11", features = ["json", "stream"] }
 futures-util = "0.3"
+rfd = "0.15"

src-tauri/src/config.rs

@@ -16,8 +16,10 @@ pub struct EditorConfig {
     pub tab_size: Option<u32>,            // tab 缩进, 空格数，默认为 2
     pub theme: Option<String>,            // 编辑器主题
     pub font_size: Option<u32>,           // 编辑器字体大小
+    pub font_family: Option<String>,      // 编辑器字体
     pub show_line_numbers: Option<bool>,  // 是否显示行号
     pub show_function_help: Option<bool>, // 是否显示函数帮助
+    pub space_dot_omission: Option<bool>, // 是否显示空格省略
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -43,8 +45,10 @@ impl Default for AppConfig {
                 tab_size: Some(2),
                 theme: Some("githubLight".to_string()),
                 font_size: Some(14),
+                font_family: Some("monospace".to_string()),
                 show_line_numbers: Some(true),
                 show_function_help: Some(false),
+                space_dot_omission: Some(false),
             }),
         }
     }
@@ -101,8 +105,10 @@ impl ConfigManager {
                                 tab_size: Some(2),
                                 theme: Some("githubLight".to_string()),
                                 font_size: Some(14),
+                                font_family: Some("monospace".to_string()),
                                 show_line_numbers: Some(true),
                                 show_function_help: Some(false),
+                                space_dot_omission: Some(false),
                             });
                             println!("读取配置 -> 添加默认 editor 配置");
                         }
@@ -207,8 +213,10 @@ impl ConfigManager {
                 tab_size: Some(2),
                 theme: Some("githubLight".to_string()),
                 font_size: Some(14),
+                font_family: Some("monospace".to_string()),
                 show_line_numbers: Some(true),
                 show_function_help: Some(false),
+                space_dot_omission: Some(false),
             }),
         }
     }

src-tauri/src/font.rs

@@ -0,0 +1,30 @@
+use log::info;
+use tauri::AppHandle;
+
+#[tauri::command]
+pub async fn open_font_picker(_app_handle: AppHandle) -> Result<Option<String>, String> {
+    info!("编辑器设置 -> 打开字体选择器");
+
+    let file_handle = rfd::FileDialog::new()
+        .add_filter("字体文件", &["ttf", "otf", "woff", "woff2"])
+        .set_title("选择字体文件")
+        .pick_file();
+
+    match file_handle {
+        Some(path) => {
+            let font_name = path
+                .file_stem() // 只取不带扩展名的文件名
+                .ok_or_else(|| "无法获取字体名".to_string())?
+                .to_str()
+                .ok_or_else(|| "字体名包含无效字符".to_string())?
+                .to_string();
+
+            info!("编辑器设置 -> 用户选择了字体: {}", font_name);
+            Ok(Some(font_name))
+        }
+        None => {
+            info!("编辑器设置 -> 用户取消了字体选择");
+            Ok(None)
+        }
+    }
+}

src-tauri/src/main.rs

@@ -6,6 +6,7 @@
 mod config;
 mod example;
 mod execution;
+mod font;
 mod logger;
 mod plugin;
 mod plugins;
@@ -24,6 +25,7 @@ use crate::utils::logger::{
 };
 use config::{get_app_config, get_config_path, init_config, update_app_config};
 use example::load_example;
+use font::open_font_picker;
 use log::info;
 use plugins::PluginManager;
 use update::{check_for_updates, start_update};
@@ -79,6 +81,7 @@ fn main() {
             check_for_updates,
             start_update,
             load_example,
+            open_font_picker
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src/components/setting/Editor.vue

@@ -12,10 +12,21 @@
       <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>
 
+    <Label label="编辑器字体">
+      <div class="flex items-center space-x-2">
+        <Input v-model="editorConfig.font_family" class="w-1/3" disabled placeholder="编辑器字体"/>
+        <Button :icon="ALargeSmall" icon-only @click="selectFont"></Button>
+      </div>
+    </Label>
+
     <Label label="字体大小">
       <Number v-model="editorConfig.font_size" :min="1" :max="30" placeholder="字体大小"/>
     </Label>
@@ -27,12 +38,15 @@
 </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'
 import Label from '../../ui/Label.vue'
+import Input from "../../ui/Input.vue";
+import Button from "../../ui/Button.vue";
+import {ALargeSmall} from "lucide-vue-next";
 
 const emit = defineEmits<{
   'settings-changed': [config: any]
@@ -42,7 +56,8 @@ const emit = defineEmits<{
 const {
   editorConfig,
   themeOptions,
-  loadConfig
+  loadConfig,
+  selectFont
 } = useEditorConfig(emit)
 
 onMounted(async () => {

src/composables/useCodeMirrorEditor.ts

@@ -62,8 +62,10 @@ import {invoke} from '@tauri-apps/api/core'
 import {useToast} from '../plugins/toast'
 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'
+import {EditorView} from "@codemirror/view";
+import {useCodeMirrorFontFamily} from "./useCodeMirrorFontFamily.ts";
 
 interface Props
 {
@@ -85,6 +87,7 @@ export function useCodeMirrorEditor(props: Props)
         indent_with_tab: true,
         tab_size: 2,
         font_size: 14,
+        font_family: 'monospace',
         show_line_numbers: false,
         show_function_help: false
     }
@@ -214,6 +217,12 @@ export function useCodeMirrorEditor(props: Props)
         // 添加函数帮助主题
         result.push(functionHelpTheme)
 
+        // 设置字体
+        const {fontFamilyTheme} = useCodeMirrorFontFamily(
+            editorConfig.value?.font_family
+        )
+        result.push(fontFamilyTheme)
+
         // 添加语言扩展
         if (props.language) {
             const langExtension = getLanguageExtension(props.language)
@@ -234,6 +243,13 @@ export function useCodeMirrorEditor(props: Props)
             result.push(showFunctionHelpHover)
         }
 
+        const shouldShowSpaceOmission = editorConfig.value?.space_dot_omission ?? false
+        if (shouldShowSpaceOmission) {
+            const {spaceOmissionPlugin, spaceOmissionTheme} = useCodeMirrorSpaceOmission(editorConfig.value?.font_family)
+            result.push(spaceOmissionPlugin)
+            result.push(spaceOmissionTheme)
+        }
+
         extensions.value = result
 
         // 如果组件还没准备好，等待下一个 tick 后设置为准备好
@@ -334,6 +350,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/useCodeMirrorFontFamily.ts

@@ -0,0 +1,22 @@
+import {EditorView} from '@codemirror/view'
+
+export function useCodeMirrorFontFamily(fontFamily?: string)
+{
+    const defaultFont = "monospace"
+
+    const fontFamilyTheme = EditorView.theme({
+        '&': {
+            fontFamily: fontFamily || defaultFont
+        },
+        '.cm-content': {
+            fontFamily: fontFamily || defaultFont
+        },
+        '.cm-scroller': {
+            fontFamily: fontFamily || defaultFont
+        }
+    })
+
+    return {
+        fontFamilyTheme
+    }
+}