feat (core): 增加编辑器配置

Author: qianmoQ

src-tauri/src/config.rs

@@ -3,20 +3,29 @@ use crate::plugin::PluginManagerState;
 use crate::plugins::PluginConfig;
 use log::{info, warn};
 use serde::{Deserialize, Serialize};
+use serde_json::Value::Bool;
 use std::fs;
 use std::path::PathBuf;
 use std::sync::Mutex;
 use tauri::{AppHandle, Manager, command};
 
 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>,         // 编辑器主题
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct AppConfig {
     pub log_directory: Option<String>,
     pub auto_clear_logs: Option<bool>,
     pub keep_log_days: Option<u32>,
     pub theme: Option<String>,
     pub plugins: Option<Vec<PluginConfig>>,
+    pub editor: Option<EditorConfig>,
 }
 
 impl Default for AppConfig {
@@ -27,6 +36,11 @@ impl Default for AppConfig {
             keep_log_days: Some(30),
             theme: Some("system".to_string()),
             plugins: Some(vec![]),
+            editor: Some(EditorConfig {
+                indent_with_tab: Some(true),
+                tab_size: Some(2),
+                theme: Some("githubLight".to_string()),
+            }),
         }
     }
 }
@@ -75,6 +89,16 @@ impl ConfigManager {
                         // 合并插件配置（现有配置 + 默认配置中缺失的插件）
                         config.plugins = Self::merge_plugins_config(config.plugins, app_handle);
 
+                        // 检查并设置 editor 默认配置
+                        if config.editor.is_none() {
+                            config.editor = Some(EditorConfig {
+                                indent_with_tab: Some(true),
+                                tab_size: Some(2),
+                                theme: Some("githubLight".to_string()),
+                            });
+                            println!("读取配置 -> 添加默认 editor 配置");
+                        }
+
                         Ok(config)
                     }
                     Err(e) => {
@@ -170,6 +194,11 @@ impl ConfigManager {
             keep_log_days: Some(30),
             theme: Some("system".to_string()),
             plugins: Self::get_default_plugins_config(app_handle),
+            editor: Some(EditorConfig {
+                indent_with_tab: Some(true),
+                tab_size: Some(2),
+                theme: Some("githubLight".to_string()),
+            }),
         }
     }
 

src/components/CodeEditor.vue

@@ -4,17 +4,16 @@
                 style="width: 100%; height: 100%"
                 :model-value="modelValue"
                 :extensions="extensions"
+                :indent-with-tab="editorConfig?.indent_with_tab"
+                :tab-size="editorConfig?.tab_size"
                 @change="handleInput"/>
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { onMounted } from 'vue'
 import { Codemirror } from 'vue-codemirror'
-import { python } from '@codemirror/lang-python'
-import { javascript } from '@codemirror/lang-javascript'
-import { go } from '@codemirror/lang-go'
-import { githubLight } from '@uiw/codemirror-themes-all'
+import { useCodeMirrorEditor } from '../composables/useCodeMirrorEditor'
 
 const props = defineProps<{
   modelValue: string
@@ -25,57 +24,18 @@ const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
 
+const {
+  isReady,
+  extensions,
+  editorConfig,
+  initializeEditor
+} = useCodeMirrorEditor(props, emit)
+
 const handleInput = (value: string) => {
   emit('update:modelValue', value)
 }
 
-const isReady = ref(false)
-const extensions = ref<[]>([])
-
-// 获取语言扩展
-const getLanguageExtension = (language: string): any | null => {
-  switch (language) {
-    case 'python2':
-    case 'python3':
-      return python()
-    case 'nodejs':
-      return javascript()
-    case 'go':
-      return go()
-    default:
-      return null
-  }
-}
-
-// 更新扩展的函数
-const updateExtensions = async () => {
-  const result = [githubLight]
-
-  if (props.language) {
-    const langExtension = getLanguageExtension(props.language)
-    if (langExtension) {
-      result.push(langExtension)
-    }
-  }
-
-  extensions.value = result as any
-
-  // 如果组件还没准备好，等待下一个 tick 后设置为准备好
-  if (!isReady.value) {
-    await nextTick()
-    isReady.value = true
-  }
-}
-
-// 监听语言变化
-watch(() => props.language, async () => {
-  isReady.value = false
-  await nextTick()
-  await updateExtensions()
-}, { immediate: false })
-
-// 组件挂载时初始化
 onMounted(async () => {
-  await updateExtensions()
+  await initializeEditor()
 })
 </script>

src/components/Settings.vue

@@ -11,6 +11,11 @@
         <General/>
       </template>
 
+      <!-- 编辑器配置 -->
+      <template #editor>
+        <Editor v-if="activeTab === 'editor'"/>
+      </template>
+
       <!-- 语言配置 -->
       <template #language>
         <Language v-if="activeTab === 'language'"/>
@@ -21,16 +26,18 @@
 
 <script setup lang="ts">
 import { nextTick, onMounted, ref } from 'vue'
-import { BracesIcon, ShieldIcon } from 'lucide-vue-next'
+import { BracesIcon, CodeIcon, ShieldIcon } from 'lucide-vue-next'
 import Modal from '../ui/Modal.vue'
 import Tabs from '../ui/Tabs.vue'
 import General from './setting/General.vue'
 import Language from './setting/Language.vue'
+import Editor from './setting/Editor.vue'
 
 const isVisible = ref(false)
 const activeTab = ref('general')
 const tabsData = [
   { key: 'general', label: '通用', icon: ShieldIcon },
+  { key: 'editor', label: '编辑器', icon: CodeIcon },
   { key: 'language', label: '语言', icon: BracesIcon }
 ]
 

src/components/setting/Editor.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="editorConfig" class="space-y-2">
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        是否使用 tab 缩进
+      </label>
+      <div class="flex gap-2">
+        <input v-model="editorConfig.indent_with_tab"
+               type="checkbox"
+               placeholder="超时时间(秒)，默认 30 秒"
+               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm"/>
+      </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">
+        <input v-model="editorConfig.tab_size"
+               type="number"
+               :disabled="!editorConfig.indent_with_tab"
+               placeholder="缩进空格数，默认 2 秒"
+               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm"
+               :class="[!editorConfig.indent_with_tab ? 'opacity-50 cursor-not-allowed' : '']"/>
+      </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">
+        <Select v-model="editorConfig.theme"
+                class="w-1/4"
+                placeholder="选择编辑器主题"
+                :options="themeOptions"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import Select from '../../ui/Select.vue'
+import { useEditorConfig } from '../../composables/useEditorConfig'
+
+const emit = defineEmits<{
+  'settings-changed': [config: any]
+  'error': [message: string]
+}>()
+
+const {
+  editorConfig,
+  themeOptions,
+  loadConfig
+} = useEditorConfig(emit)
+
+onMounted(async () => {
+  await loadConfig()
+})
+</script>