diff --git a/package.json b/package.json
index 419766bc..b94bdb21 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,23 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@babel/runtime": "^7.28.2",
+    "@codemirror/lang-go": "^6.0.1",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.1",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2.3.2",
     "@tauri-apps/plugin-opener": "^2",
     "@tauri-apps/plugin-shell": "^2.3.0",
+    "@uiw/codemirror-themes-all": "^4.24.2",
     "@vueuse/core": "^13.6.0",
+    "codemirror": "^6.0.2",
     "lodash-es": "^4.17.21",
     "lucide-vue-next": "^0.539.0",
     "vue": "^3.5.13",
+    "vue-codemirror": "^6.1.1",
     "vue3-markdown-it": "^1.0.10"
   },
   "devDependencies": {
diff --git a/src-tauri/src/config.rs b/src-tauri/src/config.rs
index 9fc1e39b..15c3d117 100644
--- a/src-tauri/src/config.rs
+++ b/src-tauri/src/config.rs
@@ -10,6 +10,13 @@ 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>,
@@ -17,6 +24,7 @@ pub struct AppConfig {
     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 +35,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 +88,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 +193,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()),
+            }),
         }
     }
 
diff --git a/src/components/CodeEditor.vue b/src/components/CodeEditor.vue
index 286ca252..25851c0a 100644
--- a/src/components/CodeEditor.vue
+++ b/src/components/CodeEditor.vue
@@ -1,40 +1,19 @@
 <template>
-  <div class="flex bg-white h-full relative overflow-hidden">
-    <!-- 行号 -->
-    <div ref="lineNumbersRef"
-         class="bg-gray-50 text-gray-400 text-sm font-mono px-3 pb-4 select-none border-r border-gray-200 overflow-hidden flex-shrink-0 z-10"
-         style="padding-top: 0;">
-      <div v-for="(num, index) in lineNumbers" :key="index" class="h-6 leading-6 text-right">
-        {{ num }}
-      </div>
-    </div>
-
-    <!-- 语法高亮容器 -->
-    <div class="flex-1 relative overflow-hidden">
-      <!-- 高亮显示层 -->
-      <pre ref="highlightRef"
-           class="absolute inset-0 px-4 pb-4 font-mono text-sm leading-6 bg-transparent pointer-events-none overflow-auto whitespace-pre-wrap z-0"
-           style="margin: 0; border: 0; padding-top: 0; word-break: break-word; white-space: pre-wrap;"
-           v-html="highlightedCode"></pre>
-
-      <!-- 代码输入框 -->
-      <textarea ref="textareaRef"
-                :value="modelValue"
-                @input="handleInput"
-                @keydown="handleKeyDown"
-                @scroll="handleScroll"
-                class="absolute inset-0 px-4 pb-4 font-mono text-sm leading-6 resize-none outline-none bg-transparent z-10 overflow-auto"
-                style="color: transparent; caret-color: #374151; margin: 0; border: 0; padding-top: 0; word-break: break-word; white-space: pre-wrap;"
-                placeholder="在此输入代码..."
-                spellcheck="false">
-      </textarea>
-    </div>
+  <div class="flex bg-white h-full relative">
+    <Codemirror v-if="isReady"
+                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 { computed, nextTick, ref } from 'vue'
-import { highlightCode } from '../utils/highlighter'
+import { onMounted } from 'vue'
+import { Codemirror } from 'vue-codemirror'
+import { useCodeMirrorEditor } from '../composables/useCodeMirrorEditor'
 
 const props = defineProps<{
   modelValue: string
@@ -45,46 +24,18 @@ const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
 
-const textareaRef = ref<HTMLTextAreaElement>()
-const lineNumbersRef = ref<HTMLElement>()
-const highlightRef = ref<HTMLPreElement>()
-
-const lineNumbers = computed(() => {
-  const lines = props.modelValue.split('\n')
-  return lines.map((_, index) => String(index + 1))
-})
-
-const highlightedCode = computed(() => {
-  return highlightCode(props.modelValue, props.language || 'python3')
-})
+const {
+  isReady,
+  extensions,
+  editorConfig,
+  initializeEditor
+} = useCodeMirrorEditor(props, emit)
 
-const handleInput = (e: Event) => {
-  const target = e.target as HTMLTextAreaElement
-  emit('update:modelValue', target.value)
+const handleInput = (value: string) => {
+  emit('update:modelValue', value)
 }
 
-const handleKeyDown = async (e: KeyboardEvent) => {
-  if (e.key === 'Tab') {
-    e.preventDefault()
-    const target = e.target as HTMLTextAreaElement
-    const start = target.selectionStart
-    const end = target.selectionEnd
-    const newValue = props.modelValue.substring(0, start) + '    ' + props.modelValue.substring(end)
-    emit('update:modelValue', newValue)
-
-    await nextTick()
-    target.selectionStart = target.selectionEnd = start + 4
-  }
-}
-
-const handleScroll = (e: Event) => {
-  const target = e.target as HTMLTextAreaElement
-  if (lineNumbersRef.value) {
-    lineNumbersRef.value.scrollTop = target.scrollTop
-  }
-  if (highlightRef.value) {
-    highlightRef.value.scrollTop = target.scrollTop
-    highlightRef.value.scrollLeft = target.scrollLeft
-  }
-}
-</script>
\ No newline at end of file
+onMounted(async () => {
+  await initializeEditor()
+})
+</script>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index eedc6a89..341634cc 100644
--- a/src/components/Settings.vue
+++ b/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 }
 ]
 
diff --git a/src/components/setting/Editor.vue b/src/components/setting/Editor.vue
new file mode 100644
index 00000000..63a1f951
--- /dev/null
+++ b/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>
diff --git a/src/composables/useCodeMirrorEditor.ts b/src/composables/useCodeMirrorEditor.ts
new file mode 100644
index 00000000..6e645912
--- /dev/null
+++ b/src/composables/useCodeMirrorEditor.ts
@@ -0,0 +1,294 @@
+import { nextTick, ref, watch } from 'vue'
+import { python } from '@codemirror/lang-python'
+import { javascript } from '@codemirror/lang-javascript'
+import { go } from '@codemirror/lang-go'
+import {
+    abcdef,
+    abyss,
+    androidstudio,
+    andromeda,
+    atomone,
+    aura,
+    basicDark,
+    basicLight,
+    bbedit,
+    bespin,
+    consoleDark,
+    consoleLight,
+    copilot,
+    darcula,
+    dracula,
+    duotoneDark,
+    duotoneLight,
+    eclipse,
+    githubDark,
+    githubLight,
+    gruvboxDark,
+    gruvboxLight,
+    kimbie,
+    material,
+    materialDark,
+    materialLight,
+    monokai,
+    monokaiDimmed,
+    noctisLilac,
+    nord,
+    okaidia,
+    quietlight,
+    red,
+    solarizedDark,
+    solarizedLight,
+    sublime,
+    tokyoNight,
+    tokyoNightDay,
+    tokyoNightStorm,
+    tomorrowNightBlue,
+    vscodeDark,
+    vscodeLight,
+    whiteDark,
+    whiteLight,
+    xcodeDark,
+    xcodeLight
+} from '@uiw/codemirror-themes-all'
+import { invoke } from '@tauri-apps/api/core'
+import { useToast } from '../plugins/toast'
+
+interface EditorConfig
+{
+    theme?: string
+    indent_with_tab?: boolean
+    tab_size?: number
+}
+
+interface Props
+{
+    modelValue: string
+    language?: string
+}
+
+interface Emit
+{
+    (event: 'update:modelValue', value: string): void
+}
+
+export function useCodeMirrorEditor(props: Props, _emit: Emit)
+{
+    const toast = useToast()
+
+    // 状态管理
+    const isReady = ref(false)
+    const extensions = ref<any[]>([])
+    const editorConfig = ref<EditorConfig>({})
+
+    // 主题映射
+    const themeMap: Record<string, any> = {
+        abcdef,
+        abyss,
+        androidstudio,
+        andromeda,
+        atomone,
+        aura,
+        basicLight,
+        basicDark,
+        bbedit,
+        bespin,
+        consoleLight,
+        consoleDark,
+        copilot,
+        darcula,
+        dracula,
+        duotoneLight,
+        duotoneDark,
+        eclipse,
+        githubLight,
+        githubDark,
+        gruvboxLight,
+        gruvboxDark,
+        kimbie,
+        material,
+        materialLight,
+        materialDark,
+        monokai,
+        monokaiDimmed,
+        noctisLilac,
+        nord,
+        okaidia,
+        quietlight,
+        red,
+        solarizedLight,
+        solarizedDark,
+        sublime,
+        tokyoNight,
+        tokyoNightStorm,
+        tokyoNightDay,
+        tomorrowNightBlue,
+        vscodeLight,
+        vscodeDark,
+        whiteLight,
+        whiteDark,
+        xcodeLight,
+        xcodeDark
+    }
+
+    // 获取主题扩展
+    const getThemeExtension = (themeName?: string) => {
+        if (!themeName) {
+            return githubLight // 默认主题
+        }
+
+        const theme = themeMap[themeName]
+        if (theme) {
+            return theme
+        }
+
+        console.warn(`主题 "${ themeName }" 未找到，使用默认主题`)
+        return githubLight
+    }
+
+    // 获取语言扩展
+    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 = []
+
+        // 添加主题扩展
+        const themeExtension = getThemeExtension(editorConfig.value?.theme)
+        result.push(themeExtension)
+
+        // 添加语言扩展
+        if (props.language) {
+            const langExtension = getLanguageExtension(props.language)
+            if (langExtension) {
+                result.push(langExtension)
+            }
+        }
+
+        extensions.value = result
+
+        // 如果组件还没准备好，等待下一个 tick 后设置为准备好
+        if (!isReady.value) {
+            await nextTick()
+            isReady.value = true
+        }
+    }
+
+    // 加载编辑器配置
+    const loadEditorConfig = async () => {
+        try {
+            const globalConfig = await invoke<any>('get_app_config')
+
+            if (globalConfig && globalConfig.editor) {
+                editorConfig.value = globalConfig.editor
+                console.log('加载编辑器配置:', editorConfig.value)
+
+                // 配置加载后重新更新扩展
+                await updateExtensions()
+            }
+            else {
+                // 如果没有配置，使用默认配置
+                editorConfig.value = {
+                    theme: 'githubLight',
+                    indent_with_tab: true,
+                    tab_size: 2
+                }
+                await updateExtensions()
+            }
+        }
+        catch (error) {
+            console.error('获取配置失败:', error)
+            toast.error('获取配置失败 - 错误信息: ' + error)
+
+            // 失败时使用默认配置
+            editorConfig.value = {
+                theme: 'githubLight',
+                indent_with_tab: true,
+                tab_size: 2
+            }
+            await updateExtensions()
+        }
+    }
+
+    // 重新渲染编辑器
+    const reRenderEditor = async () => {
+        isReady.value = false
+        await nextTick()
+        await updateExtensions()
+    }
+
+    // 设置主题
+    const setTheme = async (themeName: string) => {
+        if (themeMap[themeName]) {
+            editorConfig.value.theme = themeName
+            await reRenderEditor()
+        }
+        else {
+            console.warn(`主题 "${ themeName }" 不存在`)
+        }
+    }
+
+    // 获取可用主题列表
+    const getAvailableThemes = () => {
+        return Object.keys(themeMap)
+    }
+
+    // 获取当前主题
+    const getCurrentTheme = () => {
+        return editorConfig.value?.theme || 'githubLight'
+    }
+
+    // 初始化编辑器
+    const initializeEditor = async () => {
+        await loadEditorConfig()
+    }
+
+    // 监听语言变化
+    watch(() => props.language, async () => {
+        console.log('语言变化:', props.language)
+        await reRenderEditor()
+    }, { immediate: false })
+
+    // 监听编辑器配置变化
+    watch(() => editorConfig.value?.theme, async (newTheme, oldTheme) => {
+        if (newTheme && newTheme !== oldTheme) {
+            console.log('主题变化:', oldTheme, '->', newTheme)
+            await reRenderEditor()
+        }
+    }, { immediate: false })
+
+    // 监听缩进配置变化
+    watch(() => [editorConfig.value?.indent_with_tab, editorConfig.value?.tab_size], async () => {
+        // 缩进配置变化时重新渲染
+        await reRenderEditor()
+    }, { immediate: false })
+
+    return {
+        // 状态
+        isReady,
+        extensions,
+        editorConfig,
+
+        // 方法
+        initializeEditor,
+        loadEditorConfig,
+        updateExtensions,
+        reRenderEditor,
+        setTheme,
+        getAvailableThemes,
+        getCurrentTheme,
+        getThemeExtension,
+        getLanguageExtension
+    }
+}
diff --git a/src/composables/useEditorConfig.ts b/src/composables/useEditorConfig.ts
new file mode 100644
index 00000000..ae097994
--- /dev/null
+++ b/src/composables/useEditorConfig.ts
@@ -0,0 +1,190 @@
+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
+}
+
+interface ThemeOption
+{
+    label: string
+    value: string
+}
+
+export function useEditorConfig(emit?: any)
+{
+    const toast = useToast()
+
+    // 状态管理
+    const globalConfig = ref<any>(null)
+    const editorConfig = ref<EditorConfig | null>(null)
+
+    // 主题选项
+    const themeOptions = ref<ThemeOption[]>([
+        { label: 'abcdef', value: 'abcdef' },
+        { label: 'abyss', value: 'abyss' },
+        { label: 'androidstudio', value: 'androidstudio' },
+        { label: 'andromeda', value: 'andromeda' },
+        { label: 'atomone', value: 'atomone' },
+        { label: 'aura', value: 'aura' },
+        { label: 'basicDark', value: 'basicDark' },
+        { label: 'basicLight', value: 'basicLight' },
+        { label: 'bbedit', value: 'bbedit' },
+        { label: 'bespin', value: 'bespin' },
+        { label: 'consoleDark', value: 'consoleDark' },
+        { label: 'consoleLight', value: 'consoleLight' },
+        { label: 'copilot', value: 'copilot' },
+        { label: 'darcula', value: 'darcula' },
+        { label: 'dracula', value: 'dracula' },
+        { label: 'duotoneDark', value: 'duotoneDark' },
+        { label: 'duotoneLight', value: 'duotoneLight' },
+        { label: 'eclipse', value: 'eclipse' },
+        { label: 'githubDark', value: 'githubDark' },
+        { label: 'githubLight', value: 'githubLight' },
+        { label: 'gruvboxDark', value: 'gruvboxDark' },
+        { label: 'gruvboxLight', value: 'gruvboxLight' },
+        { label: 'kimbie', value: 'kimbie' },
+        { label: 'material', value: 'material' },
+        { label: 'materialDark', value: 'materialDark' },
+        { label: 'materialLight', value: 'materialLight' },
+        { label: 'monokai', value: 'monokai' },
+        { label: 'monokaiDimmed', value: 'monokaiDimmed' },
+        { label: 'noctisLilac', value: 'noctisLilac' },
+        { label: 'nord', value: 'nord' },
+        { label: 'okaidia', value: 'okaidia' },
+        { label: 'quietlight', value: 'quietlight' },
+        { label: 'red', value: 'red' },
+        { label: 'solarizedDark', value: 'solarizedDark' },
+        { label: 'solarizedLight', value: 'solarizedLight' },
+        { label: 'sublime', value: 'sublime' },
+        { label: 'tokyoNight', value: 'tokyoNight' },
+        { label: 'tokyoNightDay', value: 'tokyoNightDay' },
+        { label: 'tokyoNightStorm', value: 'tokyoNightStorm' },
+        { label: 'tomorrowNightBlue', value: 'tomorrowNightBlue' },
+        { label: 'vscodeDark', value: 'vscodeDark' },
+        { label: 'vscodeLight', value: 'vscodeLight' },
+        { label: 'whiteDark', value: 'whiteDark' },
+        { label: 'whiteLight', value: 'whiteLight' },
+        { label: 'xcodeDark', value: 'xcodeDark' },
+        { label: 'xcodeLight', value: 'xcodeLight' }
+    ])
+
+    // 加载配置
+    const loadConfig = async () => {
+        try {
+            globalConfig.value = await invoke<any>('get_app_config')
+            editorConfig.value = globalConfig.value.editor
+            console.log('加载编辑器配置成功:', editorConfig.value)
+        }
+        catch (error) {
+            console.error('加载编辑器配置失败:', error)
+            toast.error('获取编辑器配置失败 - 错误信息: ' + error)
+            throw error
+        }
+    }
+
+    // 更新配置
+    const updateConfig = async (updatedEditor: EditorConfig) => {
+        console.log('更新编辑器配置:', updatedEditor)
+        try {
+            if (!globalConfig.value) {
+                throw new Error('全局配置未加载')
+            }
+
+            globalConfig.value.editor = { ...updatedEditor }
+            await invoke('update_app_config', { config: globalConfig.value })
+
+            toast.success('编辑器配置已保存')
+
+            // 发送事件（如果提供了 emit）
+            if (emit) {
+                emit('settings-changed', updatedEditor)
+            }
+
+            console.log('编辑器配置保存成功')
+        }
+        catch (error) {
+            console.error('保存编辑器配置失败:', error)
+            toast.error('保存编辑器配置失败 - 错误信息: ' + error)
+
+            if (emit) {
+                emit('error', '保存编辑器配置失败')
+            }
+
+            throw error
+        }
+    }
+
+    // 防抖更新
+    const debouncedUpdate = debounce((config: EditorConfig) => {
+        updateConfig(config)
+    }, 1000)
+
+    // 监听配置变化
+    watch(editorConfig, (newConfig, oldConfig) => {
+        // 只有在非初始加载时才触发更新
+        if (oldConfig && newConfig) {
+            console.log('编辑器配置变化:', oldConfig, '->', newConfig)
+            debouncedUpdate(newConfig)
+        }
+    }, {
+        deep: true,
+        flush: 'post'
+    })
+
+    // 手动保存配置（不防抖）
+    const saveConfig = async () => {
+        if (editorConfig.value) {
+            await updateConfig(editorConfig.value)
+        }
+    }
+
+    // 重置为默认配置
+    const resetToDefault = () => {
+        editorConfig.value = {
+            indent_with_tab: true,
+            tab_size: 2,
+            theme: 'githubLight'
+        }
+    }
+
+    // 获取特定主题的配置
+    const getThemeByValue = (value: string) => {
+        return themeOptions.value.find(theme => theme.value === value)
+    }
+
+    // 验证配置
+    const validateConfig = (config: EditorConfig): boolean => {
+        if (config.tab_size && (config.tab_size < 1 || config.tab_size > 8)) {
+            toast.error('缩进空格数必须在 1-8 之间')
+            return false
+        }
+
+        if (config.theme && !getThemeByValue(config.theme)) {
+            toast.error('选择的主题不存在')
+            return false
+        }
+
+        return true
+    }
+
+    return {
+        // 状态
+        globalConfig,
+        editorConfig,
+        themeOptions,
+
+        // 方法
+        loadConfig,
+        updateConfig,
+        saveConfig,
+        resetToDefault,
+        getThemeByValue,
+        validateConfig
+    }
+}
diff --git a/src/utils/highlighter/index.ts b/src/utils/highlighter/index.ts
deleted file mode 100644
index de2c1730..00000000
--- a/src/utils/highlighter/index.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-export * from './types'
-export * from './manager'
-export { Python2Highlighter } from './languages/python2'
-export { Python3Highlighter } from './languages/python3'
-
-// 导入并重新导出管理器实例
-import { HighlightManager } from './manager'
-
-// 创建单例实例
-export const highlightManager = new HighlightManager()
-
-/**
- * 高亮代码的便捷函数
- * @param code 源代码
- * @param language 语言名称
- * @returns 高亮后的 HTML
- */
-export function highlightCode(code: string, language: string): string
-{
-    return highlightManager.highlight(code, language)
-}
-
-/**
- * 获取支持的语言列表
- */
-export function getSupportedLanguages()
-{
-    return highlightManager.getSupportedLanguages()
-}
-
-/**
- * 注册自定义高亮器
- */
-export function registerHighlighter(highlighter: import('./types').LanguageHighlighter)
-{
-    highlightManager.register(highlighter)
-}
\ No newline at end of file
diff --git a/src/utils/highlighter/languages/go.ts b/src/utils/highlighter/languages/go.ts
deleted file mode 100644
index c1ebb6b6..00000000
--- a/src/utils/highlighter/languages/go.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import type { HighlightRule, LanguageHighlighter } from '../types'
-
-export class GoHighlighter
-    implements LanguageHighlighter
-{
-    getLanguageName(): string
-    {
-        return 'go'
-    }
-
-    getDisplayName(): string
-    {
-        return 'Go'
-    }
-
-    getOrder(): number
-    {
-        return 4
-    }
-
-    getRules(): HighlightRule[]
-    {
-        return [
-            // 1. 注释 (最高优先级)
-            {
-                pattern: /\/\/.*$/gm,
-                className: 'text-gray-500 italic',
-                priority: 1
-            },
-            {
-                pattern: /\/\*[\s\S]*?\*\//g,
-                className: 'text-gray-500 italic',
-                priority: 1
-            },
-
-            // 2. 字符串 (高优先级)
-            {
-                pattern: /`(?:[^`\\]|\\.)*`/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-            {
-                pattern: /"(?:[^"\\]|\\.)*"/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-            {
-                pattern: /'(?:[^'\\]|\\.)*'/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-
-            // 3. Go 关键字
-            {
-                pattern: /\b(package|import|func|var|const|type|struct|interface|map|chan|select|go|defer|return|break|continue|fallthrough|if|else|switch|case|default|for|range|goto|true|false|nil|iota)\b/g,
-                className: 'text-purple-600 font-semibold',
-                priority: 3
-            },
-
-            // 4. Go 内置类型
-            {
-                pattern: /\b(bool|byte|complex64|complex128|error|float32|float64|int|int8|int16|int32|int64|rune|string|uint|uint8|uint16|uint32|uint64|uintptr)\b/g,
-                className: 'text-blue-600 font-semibold',
-                priority: 4
-            },
-
-            // 5. 数字
-            {
-                pattern: /\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?[fFlL]?\b/g,
-                className: 'text-blue-600',
-                priority: 5
-            },
-
-            // 6. 十六进制、八进制、二进制数字
-            {
-                pattern: /\b0[xX][0-9a-fA-F]+\b|\b0[0-7]+\b|\b0[bB][01]+\b/g,
-                className: 'text-blue-600',
-                priority: 5
-            },
-
-            // 7. 函数定义
-            {
-                pattern: /\bfunc\s+([a-zA-Z_]\w*)/g,
-                className: 'text-orange-600 font-semibold',
-                priority: 6
-            },
-
-            // 8. 函数调用
-            {
-                pattern: /\b([a-zA-Z_]\w*)(?=\s*\()/g,
-                className: 'text-orange-600',
-                priority: 7
-            },
-
-            // 9. 类型定义
-            {
-                pattern: /\btype\s+([A-Z]\w*)/g,
-                className: 'text-yellow-600 font-semibold',
-                priority: 8
-            },
-
-            // 10. 结构体字段
-            {
-                pattern: /\b([a-zA-Z_]\w*)\s*:/g,
-                className: 'text-cyan-600',
-                priority: 9
-            },
-
-            // 11. 包名
-            {
-                pattern: /\bpackage\s+([a-zA-Z_]\w*)/g,
-                className: 'text-indigo-600 font-semibold',
-                priority: 10
-            },
-
-            // 12. import 语句
-            {
-                pattern: /\bimport\s*\(\s*[\s\S]*?\)/g,
-                className: 'text-emerald-600',
-                priority: 11
-            },
-            {
-                pattern: /\bimport\s+"[^"]+"/g,
-                className: 'text-emerald-600',
-                priority: 11
-            },
-
-            // 13. 常见的 Go 内置函数
-            {
-                pattern: /\b(make|new|len|cap|append|copy|delete|close|panic|recover|print|println)\b/g,
-                className: 'text-pink-600 font-medium',
-                priority: 12
-            },
-
-            // 14. 指针操作符
-            {
-                pattern: /[*&]/g,
-                className: 'text-red-600 font-bold',
-                priority: 13
-            },
-
-            // 15. 通道操作符
-            {
-                pattern: /<-/g,
-                className: 'text-violet-600 font-bold',
-                priority: 14
-            },
-
-            // 16. 结构体标签
-            {
-                pattern: /`[^`]*`/g,
-                className: 'text-teal-600 bg-gray-100',
-                priority: 15
-            },
-
-            // 17. 大写开头的导出标识符
-            {
-                pattern: /\b[A-Z]\w*/g,
-                className: 'text-amber-600',
-                priority: 16
-            }
-        ]
-    }
-
-    preProcess(code: string): string
-    {
-        // Go 特定的预处理
-        return code
-    }
-
-    postProcess(highlighted: string): string
-    {
-        // Go 特定的后处理
-        return highlighted
-    }
-}
diff --git a/src/utils/highlighter/languages/nodejs.ts b/src/utils/highlighter/languages/nodejs.ts
deleted file mode 100644
index 22850696..00000000
--- a/src/utils/highlighter/languages/nodejs.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import type { HighlightRule, LanguageHighlighter } from '../types'
-
-export class NodeJSHighlighter
-    implements LanguageHighlighter
-{
-    getLanguageName(): string
-    {
-        return 'nodejs'
-    }
-
-    getDisplayName(): string
-    {
-        return 'Node.js'
-    }
-
-    getOrder(): number
-    {
-        return 3
-    }
-
-    getRules(): HighlightRule[]
-    {
-        return [
-            // 1. 注释 (最高优先级)
-            {
-                pattern: /\/\/.*$/gm,
-                className: 'text-gray-500 italic',
-                priority: 1
-            },
-            {
-                pattern: /\/\*[\s\S]*?\*\//g,
-                className: 'text-gray-500 italic',
-                priority: 1
-            },
-
-            // 2. 字符串 (高优先级)
-            {
-                pattern: /`(?:[^`\\]|\\.)*`/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-            {
-                pattern: /"(?:[^"\\]|\\.)*"/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-            {
-                pattern: /'(?:[^'\\]|\\.)*'/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-
-            // 3. JavaScript/Node.js 关键字
-            {
-                pattern: /\b(const|let|var|function|class|if|else|for|while|do|switch|case|default|break|continue|return|try|catch|finally|throw|new|this|super|extends|import|export|from|as|async|await|yield|typeof|instanceof|in|of|delete|void|null|undefined|true|false)\b/g,
-                className: 'text-purple-600 font-semibold',
-                priority: 3
-            },
-
-            // 4. Node.js 特定关键字和全局对象
-            {
-                pattern: /\b(require|module|exports|process|global|__dirname|__filename|Buffer|console|setTimeout|setInterval|clearTimeout|clearInterval)\b/g,
-                className: 'text-indigo-600 font-semibold',
-                priority: 3
-            },
-
-            // 5. 数字
-            {
-                pattern: /\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/g,
-                className: 'text-blue-600',
-                priority: 4
-            },
-
-            // 6. 函数调用
-            {
-                pattern: /\b([a-zA-Z_$]\w*)(?=\s*\()/g,
-                className: 'text-orange-600',
-                priority: 5
-            },
-
-            // 7. 类名定义
-            {
-                pattern: /\bclass\s+([A-Z]\w*)/g,
-                className: 'text-yellow-600 font-semibold',
-                priority: 6
-            },
-
-            // 8. 对象属性
-            {
-                pattern: /\b([a-zA-Z_$]\w*)\s*:/g,
-                className: 'text-cyan-600',
-                priority: 7
-            },
-
-            // 9. 箭头函数
-            {
-                pattern: /=>/g,
-                className: 'text-pink-600 font-bold',
-                priority: 8
-            },
-
-            // 10. 模板字符串插值
-            {
-                pattern: /\$\{[^}]*\}/g,
-                className: 'text-red-600 bg-yellow-100',
-                priority: 9
-            },
-
-            // 11. require 路径
-            {
-                pattern: /require\s*\(\s*(['"`])([^'"`]+)\1\s*\)/g,
-                className: 'text-emerald-600',
-                priority: 10
-            },
-
-            // 12. 常见的 Node.js 模块名
-            {
-                pattern: /\b(fs|path|http|https|url|crypto|util|events|stream|os|cluster|child_process|readline|querystring|zlib|assert|buffer|domain|punycode|string_decoder|tls|tty|dgram|dns|net|vm|repl)\b/g,
-                className: 'text-teal-600 font-medium',
-                priority: 11
-            },
-
-            // 13. 正则表达式
-            {
-                pattern: /\/(?:[^\/\\\r\n]|\\.)+\/[gimuy]*/g,
-                className: 'text-rose-600',
-                priority: 12
-            },
-
-            // 14. 装饰器 (如果使用 TypeScript)
-            {
-                pattern: /@[a-zA-Z_$]\w*/g,
-                className: 'text-violet-600',
-                priority: 13
-            }
-        ]
-    }
-
-    preProcess(code: string): string
-    {
-        // Node.js 特定的预处理
-        // 可以在这里处理一些特殊的语法转换
-        return code
-    }
-
-    postProcess(highlighted: string): string
-    {
-        // Node.js 特定的后处理
-        // 可以在这里添加一些额外的样式处理
-        return highlighted
-    }
-}
diff --git a/src/utils/highlighter/languages/python2.ts b/src/utils/highlighter/languages/python2.ts
deleted file mode 100644
index a1cbf2ef..00000000
--- a/src/utils/highlighter/languages/python2.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { HighlightRule, LanguageHighlighter } from '../types'
-
-export class Python2Highlighter
-    implements LanguageHighlighter
-{
-    getLanguageName(): string
-    {
-        return 'python2'
-    }
-
-    getDisplayName(): string
-    {
-        return 'Python 2'
-    }
-
-    getOrder(): number
-    {
-        return 2
-    }
-
-    getRules(): HighlightRule[]
-    {
-        return [
-            // 1. 注释 (最高优先级)
-            {
-                pattern: /#.*$/gm,
-                className: 'text-gray-500 italic',
-                priority: 1
-            },
-
-            // 2. 字符串 (高优先级)
-            {
-                pattern: /"""[\s\S]*?"""/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-            {
-                pattern: /'''[\s\S]*?'''/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-            {
-                pattern: /"(?:[^"\\]|\\.)*"/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-            {
-                pattern: /'(?:[^'\\]|\\.)*'/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-
-            // 3. Python 2 关键字
-            {
-                pattern: /\b(def|class|if|elif|else|for|while|try|except|finally|with|as|import|from|return|yield|break|continue|pass|lambda|and|or|not|in|is|True|False|None|print|exec|raw_input)\b/g,
-                className: 'text-purple-600 font-semibold',
-                priority: 3
-            },
-
-            // 4. 数字
-            {
-                pattern: /\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/g,
-                className: 'text-blue-600',
-                priority: 4
-            },
-
-            // 5. 函数调用
-            {
-                pattern: /\b([a-zA-Z_]\w*)(?=\s*\()/g,
-                className: 'text-orange-600',
-                priority: 5
-            },
-
-            // 6. 类名定义
-            {
-                pattern: /\bclass\s+([A-Z]\w*)/g,
-                className: 'text-yellow-600 font-semibold',
-                priority: 6
-            }
-        ]
-    }
-
-    preProcess(code: string): string
-    {
-        // Python 2 特定的预处理
-        return code
-    }
-
-    postProcess(highlighted: string): string
-    {
-        // Python 2 特定的后处理
-        return highlighted
-    }
-}
\ No newline at end of file
diff --git a/src/utils/highlighter/languages/python3.ts b/src/utils/highlighter/languages/python3.ts
deleted file mode 100644
index d6f83edb..00000000
--- a/src/utils/highlighter/languages/python3.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import type { HighlightRule, LanguageHighlighter } from '../types'
-
-export class Python3Highlighter
-    implements LanguageHighlighter
-{
-    getLanguageName(): string
-    {
-        return 'python3'
-    }
-
-    getDisplayName(): string
-    {
-        return 'Python 3'
-    }
-
-    getOrder(): number
-    {
-        return 1
-    }
-
-    getRules(): HighlightRule[]
-    {
-        return [
-            // 1. 注释 (最高优先级)
-            {
-                pattern: /#.*$/gm,
-                className: 'text-gray-500 italic',
-                priority: 1
-            },
-
-            // 2. 字符串 (高优先级)
-            {
-                pattern: /"""[\s\S]*?"""/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-            {
-                pattern: /'''[\s\S]*?'''/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-            {
-                pattern: /f"(?:[^"\\]|\\.)*"/g,
-                className: 'text-emerald-600',
-                priority: 2
-            }, // f-strings
-            {
-                pattern: /f'(?:[^'\\]|\\.)*'/g,
-                className: 'text-emerald-600',
-                priority: 2
-            }, // f-strings
-            {
-                pattern: /"(?:[^"\\]|\\.)*"/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-            {
-                pattern: /'(?:[^'\\]|\\.)*'/g,
-                className: 'text-green-600',
-                priority: 2
-            },
-
-            // 3. Python 3 关键字
-            {
-                pattern: /\b(def|class|if|elif|else|for|while|try|except|finally|with|as|import|from|return|yield|break|continue|pass|lambda|and|or|not|in|is|True|False|None|async|await|nonlocal)\b/g,
-                className: 'text-purple-600 font-semibold',
-                priority: 3
-            },
-
-            // 4. 数字
-            {
-                pattern: /\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/g,
-                className: 'text-blue-600',
-                priority: 4
-            },
-
-            // 5. 函数调用
-            {
-                pattern: /\b([a-zA-Z_]\w*)(?=\s*\()/g,
-                className: 'text-orange-600',
-                priority: 5
-            },
-
-            // 6. 装饰器
-            {
-                pattern: /@[a-zA-Z_]\w*/g,
-                className: 'text-yellow-600',
-                priority: 6
-            },
-
-            // 7. 类名定义
-            {
-                pattern: /\bclass\s+([A-Z]\w*)/g,
-                className: 'text-yellow-600 font-semibold',
-                priority: 7
-            }
-        ]
-    }
-
-    preProcess(code: string): string
-    {
-        // Python 3 特定的预处理
-        return code
-    }
-
-    postProcess(highlighted: string): string
-    {
-        // Python 3 特定的后处理
-        return highlighted
-    }
-}
\ No newline at end of file
diff --git a/src/utils/highlighter/manager.ts b/src/utils/highlighter/manager.ts
deleted file mode 100644
index 7a5a4589..00000000
--- a/src/utils/highlighter/manager.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import type { HighlightMatch, LanguageHighlighter } from './types'
-import { Python2Highlighter } from './languages/python2'
-import { Python3Highlighter } from './languages/python3'
-import { NodeJSHighlighter } from './languages/nodejs.ts'
-import { GoHighlighter } from './languages/go.ts'
-
-export class HighlightManager
-{
-    private highlighters = new Map<string, LanguageHighlighter>()
-
-    constructor()
-    {
-        this.registerDefaultHighlighters()
-    }
-
-    /**
-     * 注册默认高亮器
-     */
-    private registerDefaultHighlighters(): void
-    {
-        this.register(new Python2Highlighter())
-        this.register(new Python3Highlighter())
-        this.register(new NodeJSHighlighter())
-        this.register(new GoHighlighter())
-    }
-
-    /**
-     * 注册高亮器
-     */
-    register(highlighter: LanguageHighlighter): void
-    {
-        this.highlighters.set(highlighter.getLanguageName(), highlighter)
-    }
-
-    /**
-     * 注销高亮器
-     */
-    unregister(languageName: string): boolean
-    {
-        return this.highlighters.delete(languageName)
-    }
-
-    /**
-     * 获取高亮器
-     */
-    getHighlighter(languageName: string): LanguageHighlighter | undefined
-    {
-        return this.highlighters.get(languageName)
-    }
-
-    /**
-     * 获取支持的语言列表
-     */
-    getSupportedLanguages(): Array<{ name: string; displayName: string; order: number }>
-    {
-        const languages = Array.from(this.highlighters.values())
-                               .map(highlighter => ({
-                                   name: highlighter.getLanguageName(),
-                                   displayName: highlighter.getDisplayName(),
-                                   order: highlighter.getOrder()
-                               }))
-
-        // 按 order 排序
-        return languages.sort((a, b) => a.order - b.order)
-    }
-
-    /**
-     * 检查是否支持某种语言
-     */
-    isSupported(languageName: string): boolean
-    {
-        return this.highlighters.has(languageName)
-    }
-
-    /**
-     * 对代码进行语法高亮
-     */
-    highlight(code: string, languageName: string): string
-    {
-        if (!code) {
-            return ''
-        }
-
-        const highlighter = this.getHighlighter(languageName)
-        if (!highlighter) {
-            // 如果不支持该语言，返回转义后的原始代码
-            return this.escapeHtml(code)
-        }
-
-        // 预处理
-        let processedCode = highlighter.preProcess ? highlighter.preProcess(code) : code
-
-        // HTML 转义
-        processedCode = this.escapeHtml(processedCode)
-
-        // 应用高亮规则
-        const highlighted = this.applyHighlightRules(processedCode, highlighter.getRules())
-
-        // 后处理
-        return highlighter.postProcess ? highlighter.postProcess(highlighted) : highlighted
-    }
-
-    /**
-     * 应用高亮规则
-     */
-    private applyHighlightRules(code: string, rules: Array<{ pattern: RegExp; className: string; priority?: number }>): string
-    {
-        // 收集所有匹配
-        const matches: HighlightMatch[] = []
-
-        for (const rule of rules) {
-            const regex = new RegExp(rule.pattern.source, rule.pattern.flags)
-            let match
-
-            while ((match = regex.exec(code)) !== null) {
-                matches.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: rule.className,
-                    priority: rule.priority || 999
-                })
-
-                // 防止无限循环
-                if (!rule.pattern.global) {
-                    break
-                }
-            }
-        }
-
-        // 按优先级排序，优先级高的（数字小的）在前
-        matches.sort((a, b) => a.priority - b.priority || a.start - b.start)
-
-        // 移除重叠的匹配（保留高优先级的）
-        const filteredMatches = this.removeOverlappingMatches(matches)
-
-        // 按开始位置倒序排序，从后往前插入标签
-        filteredMatches.sort((a, b) => b.start - a.start)
-
-        // 插入高亮标签
-        let highlighted = code
-        for (const match of filteredMatches) {
-            const before = highlighted.substring(0, match.start)
-            const content = highlighted.substring(match.start, match.end)
-            const after = highlighted.substring(match.end)
-
-            highlighted = before + `<span class="${ match.className }">${ content }</span>` + after
-        }
-
-        return highlighted
-    }
-
-    /**
-     * 移除重叠的匹配
-     */
-    private removeOverlappingMatches(matches: HighlightMatch[]): HighlightMatch[]
-    {
-        const filteredMatches: HighlightMatch[] = []
-
-        for (const match of matches) {
-            const hasOverlap = filteredMatches.some(existing =>
-                (match.start < existing.end && match.end > existing.start)
-            )
-
-            if (!hasOverlap) {
-                filteredMatches.push(match)
-            }
-        }
-
-        return filteredMatches
-    }
-
-    /**
-     * HTML 转义
-     */
-    private escapeHtml(text: string): string
-    {
-        return text
-            // .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-        // .replace(/"/g, '&quot;')
-        // .replace(/'/g, '&#39;')
-    }
-}
diff --git a/src/utils/highlighter/types.ts b/src/utils/highlighter/types.ts
deleted file mode 100644
index 41fe98d9..00000000
--- a/src/utils/highlighter/types.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// 语法高亮规则接口
-export interface HighlightRule
-{
-    pattern: RegExp
-    className: string
-    priority?: number
-}
-
-// 匹配结果接口
-export interface HighlightMatch
-{
-    start: number
-    end: number
-    className: string
-    priority: number
-}
-
-// 语言高亮插件接口
-export interface LanguageHighlighter
-{
-    /**
-     * 获取语言名称
-     */
-    getLanguageName(): string
-
-    /**
-     * 获取显示名称
-     */
-    getDisplayName(): string
-
-    /**
-     * 获取高亮规则
-     */
-    getRules(): HighlightRule[]
-
-    /**
-     * 获取排序权重（数字越小越靠前）
-     */
-    getOrder(): number
-
-    /**
-     * 预处理代码（可选）
-     */
-    preProcess?(code: string): string
-
-    /**
-     * 后处理高亮结果（可选）
-     */
-    postProcess?(highlighted: string): string
-}
\ No newline at end of file