✨ Add extension management service

frontend/bindings/voidraft/internal/models/models.ts

@@ -334,6 +334,227 @@ export class EditingConfig {
     }
 }
 
+/**
+ * Extension 单个扩展配置
+ */
+export class Extension {
+    /**
+     * 扩展唯一标识
+     */
+    "id": ExtensionID;
+
+    /**
+     * 扩展分类
+     */
+    "category": ExtensionCategory;
+
+    /**
+     * 是否启用
+     */
+    "enabled": boolean;
+
+    /**
+     * 是否为默认扩展
+     */
+    "isDefault": boolean;
+
+    /**
+     * 扩展配置项
+     */
+    "config": ExtensionConfig;
+
+    /** Creates a new Extension instance. */
+    constructor($$source: Partial<Extension> = {}) {
+        if (!("id" in $$source)) {
+            this["id"] = ("" as ExtensionID);
+        }
+        if (!("category" in $$source)) {
+            this["category"] = ("" as ExtensionCategory);
+        }
+        if (!("enabled" in $$source)) {
+            this["enabled"] = false;
+        }
+        if (!("isDefault" in $$source)) {
+            this["isDefault"] = false;
+        }
+        if (!("config" in $$source)) {
+            this["config"] = ({} as ExtensionConfig);
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new Extension instance from a string or object.
+     */
+    static createFrom($$source: any = {}): Extension {
+        const $$createField4_0 = $$createType6;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("config" in $$parsedSource) {
+            $$parsedSource["config"] = $$createField4_0($$parsedSource["config"]);
+        }
+        return new Extension($$parsedSource as Partial<Extension>);
+    }
+}
+
+/**
+ * ExtensionCategory 扩展分类
+ */
+export enum ExtensionCategory {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    /**
+     * 编辑增强
+     */
+    CategoryEditing = "editing",
+
+    /**
+     * 界面增强
+     */
+    CategoryUI = "ui",
+
+    /**
+     * 工具类
+     */
+    CategoryTools = "tools",
+};
+
+/**
+ * ExtensionConfig 扩展配置项（动态配置）
+ */
+export type ExtensionConfig = { [_: string]: any };
+
+/**
+ * ExtensionID 扩展标识符
+ */
+export enum ExtensionID {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    /**
+     * 编辑增强扩展
+     * 彩虹括号
+     */
+    ExtensionRainbowBrackets = "rainbowBrackets",
+
+    /**
+     * 超链接
+     */
+    ExtensionHyperlink = "hyperlink",
+
+    /**
+     * 颜色选择器
+     */
+    ExtensionColorSelector = "colorSelector",
+    ExtensionFold = "fold",
+    ExtensionTextHighlight = "textHighlight",
+
+    /**
+     * UI增强扩展
+     * 小地图
+     */
+    ExtensionMinimap = "minimap",
+
+    /**
+     * 代码爆炸效果
+     */
+    ExtensionCodeBlast = "codeBlast",
+
+    /**
+     * 工具扩展
+     * 搜索功能
+     */
+    ExtensionSearch = "search",
+
+    /**
+     * 代码块
+     */
+    ExtensionCodeBlock = "codeBlock",
+};
+
+/**
+ * ExtensionMetadata 扩展配置元数据
+ */
+export class ExtensionMetadata {
+    /**
+     * 配置版本
+     */
+    "version": string;
+
+    /**
+     * 最后更新时间
+     */
+    "lastUpdated": string;
+
+    /** Creates a new ExtensionMetadata instance. */
+    constructor($$source: Partial<ExtensionMetadata> = {}) {
+        if (!("version" in $$source)) {
+            this["version"] = "";
+        }
+        if (!("lastUpdated" in $$source)) {
+            this["lastUpdated"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new ExtensionMetadata instance from a string or object.
+     */
+    static createFrom($$source: any = {}): ExtensionMetadata {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new ExtensionMetadata($$parsedSource as Partial<ExtensionMetadata>);
+    }
+}
+
+/**
+ * ExtensionSettings 扩展设置配置
+ */
+export class ExtensionSettings {
+    /**
+     * 扩展列表
+     */
+    "extensions": Extension[];
+
+    /**
+     * 配置元数据
+     */
+    "metadata": ExtensionMetadata;
+
+    /** Creates a new ExtensionSettings instance. */
+    constructor($$source: Partial<ExtensionSettings> = {}) {
+        if (!("extensions" in $$source)) {
+            this["extensions"] = [];
+        }
+        if (!("metadata" in $$source)) {
+            this["metadata"] = (new ExtensionMetadata());
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new ExtensionSettings instance from a string or object.
+     */
+    static createFrom($$source: any = {}): ExtensionSettings {
+        const $$createField0_0 = $$createType9;
+        const $$createField1_0 = $$createType10;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("extensions" in $$parsedSource) {
+            $$parsedSource["extensions"] = $$createField0_0($$parsedSource["extensions"]);
+        }
+        if ("metadata" in $$parsedSource) {
+            $$parsedSource["metadata"] = $$createField1_0($$parsedSource["metadata"]);
+        }
+        return new ExtensionSettings($$parsedSource as Partial<ExtensionSettings>);
+    }
+}
+
 /**
  * GeneralConfig 通用设置配置
  */
@@ -397,7 +618,7 @@ export class GeneralConfig {
      * Creates a new GeneralConfig instance from a string or object.
      */
     static createFrom($$source: any = {}): GeneralConfig {
-        const $$createField5_0 = $$createType6;
+        const $$createField5_0 = $$createType11;
         let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
         if ("globalHotkey" in $$parsedSource) {
             $$parsedSource["globalHotkey"] = $$createField5_0($$parsedSource["globalHotkey"]);
@@ -874,8 +1095,8 @@ export class KeyBindingConfig {
      * Creates a new KeyBindingConfig instance from a string or object.
      */
     static createFrom($$source: any = {}): KeyBindingConfig {
-        const $$createField0_0 = $$createType8;
-        const $$createField1_0 = $$createType9;
+        const $$createField0_0 = $$createType13;
+        const $$createField1_0 = $$createType14;
         let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
         if ("keyBindings" in $$parsedSource) {
             $$parsedSource["keyBindings"] = $$createField0_0($$parsedSource["keyBindings"]);
@@ -1029,7 +1250,17 @@ const $$createType2 = AppearanceConfig.createFrom;
 const $$createType3 = UpdatesConfig.createFrom;
 const $$createType4 = ConfigMetadata.createFrom;
 const $$createType5 = DocumentMeta.createFrom;
-const $$createType6 = HotkeyCombo.createFrom;
-const $$createType7 = KeyBinding.createFrom;
-const $$createType8 = $Create.Array($$createType7);
-const $$createType9 = KeyBindingMetadata.createFrom;
+var $$createType6 = (function $$initCreateType6(...args): any {
+    if ($$createType6 === $$initCreateType6) {
+        $$createType6 = $$createType7;
+    }
+    return $$createType6(...args);
+});
+const $$createType7 = $Create.Map($Create.Any, $Create.Any);
+const $$createType8 = Extension.createFrom;
+const $$createType9 = $Create.Array($$createType8);
+const $$createType10 = ExtensionMetadata.createFrom;
+const $$createType11 = HotkeyCombo.createFrom;
+const $$createType12 = KeyBinding.createFrom;
+const $$createType13 = $Create.Array($$createType12);
+const $$createType14 = KeyBindingMetadata.createFrom;

frontend/bindings/voidraft/internal/services/extensionservice.ts

@@ -0,0 +1,93 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * ExtensionService 扩展管理服务
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as models$0 from "../models/models.js";
+
+/**
+ * DisableExtension 禁用扩展
+ */
+export function DisableExtension(id: models$0.ExtensionID): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2040844784, id) as any;
+    return $resultPromise;
+}
+
+/**
+ * EnableExtension 启用扩展
+ */
+export function EnableExtension(id: models$0.ExtensionID): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2926319443, id) as any;
+    return $resultPromise;
+}
+
+/**
+ * GetAllExtensions 获取所有扩展配置
+ */
+export function GetAllExtensions(): Promise<models$0.Extension[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3094292124) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * GetExtensionSettings 获取完整扩展配置
+ */
+export function GetExtensionSettings(): Promise<models$0.ExtensionSettings | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2127854337) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType3($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * ResetAllExtensionsToDefault 重置所有扩展到默认状态
+ */
+export function ResetAllExtensionsToDefault(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(270611949) as any;
+    return $resultPromise;
+}
+
+/**
+ * ResetExtensionToDefault 重置扩展到默认状态
+ */
+export function ResetExtensionToDefault(id: models$0.ExtensionID): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(868308101, id) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown 关闭服务
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4127635746) as any;
+    return $resultPromise;
+}
+
+/**
+ * UpdateExtensionState 更新扩展状态
+ */
+export function UpdateExtensionState(id: models$0.ExtensionID, enabled: boolean, config: models$0.ExtensionConfig): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2917946454, id, enabled, config) as any;
+    return $resultPromise;
+}
+
+// Private type creation functions
+const $$createType0 = models$0.Extension.createFrom;
+const $$createType1 = $Create.Array($$createType0);
+const $$createType2 = models$0.ExtensionSettings.createFrom;
+const $$createType3 = $Create.Nullable($$createType2);

frontend/bindings/voidraft/internal/services/index.ts

@@ -4,6 +4,7 @@
 import * as ConfigService from "./configservice.js";
 import * as DialogService from "./dialogservice.js";
 import * as DocumentService from "./documentservice.js";
+import * as ExtensionService from "./extensionservice.js";
 import * as HotkeyService from "./hotkeyservice.js";
 import * as KeyBindingService from "./keybindingservice.js";
 import * as MigrationService from "./migrationservice.js";
@@ -15,6 +16,7 @@ export {
     ConfigService,
     DialogService,
     DocumentService,
+    ExtensionService,
     HotkeyService,
     KeyBindingService,
     MigrationService,

frontend/src/stores/editorStore.ts

@@ -8,13 +8,16 @@ import {useThemeStore} from './themeStore';
 import {SystemThemeType} from '@/../bindings/voidraft/internal/models/models';
 import {DocumentService} from '@/../bindings/voidraft/internal/services';
 import {ensureSyntaxTree} from "@codemirror/language"
-import {createBasicSetup} from '@/views/editor/extensions/basicSetup';
-import {createThemeExtension, updateEditorTheme} from '@/views/editor/extensions/themeExtension';
-import {getTabExtensions, updateTabConfig} from '@/views/editor/extensions/tabExtension';
-import {createFontExtensionFromBackend, updateFontConfig} from '@/views/editor/extensions/fontExtension';
-import {createStatsUpdateExtension} from '@/views/editor/extensions/statsExtension';
-import {createAutoSavePlugin, createSaveShortcutPlugin} from '@/views/editor/extensions/autoSaveExtension';
-import {createDynamicKeymapExtension} from '@/views/editor/extensions/keymap';
+import {createBasicSetup} from '@/views/editor/basic/basicSetup';
+import {createThemeExtension, updateEditorTheme} from '@/views/editor/basic/themeExtension';
+import {getTabExtensions, updateTabConfig} from '@/views/editor/basic/tabExtension';
+import {createFontExtensionFromBackend, updateFontConfig} from '@/views/editor/basic/fontExtension';
+import {createStatsUpdateExtension} from '@/views/editor/basic/statsExtension';
+import {createAutoSavePlugin, createSaveShortcutPlugin} from '@/views/editor/basic/autoSaveExtension';
+import {createDynamicKeymapExtension} from '@/views/editor/keymap';
+import { createDynamicExtensions, setExtensionManagerView, getExtensionManager } from '@/views/editor/manager';
+import { useExtensionStore } from './extensionStore';
+import { ExtensionService } from '@/../bindings/voidraft/internal/services';
 
 export interface DocumentStats {
     lines: number;
@@ -27,6 +30,7 @@ export const useEditorStore = defineStore('editor', () => {
     const configStore = useConfigStore();
     const documentStore = useDocumentStore();
     const themeStore = useThemeStore();
+    const extensionStore = useExtensionStore();
 
     // 状态
     const documentStats = ref<DocumentStats>({
@@ -130,14 +134,14 @@ export const useEditorStore = defineStore('editor', () => {
         );
 
         // 创建保存快捷键插件
-        const saveShortcutPlugin = createSaveShortcutPlugin(() => {
+        const saveShortcutExtension = createSaveShortcutPlugin(() => {
             if (editorView.value) {
                 handleManualSave();
             }
         });
 
         // 创建自动保存插件
-        const autoSavePlugin = createAutoSavePlugin({
+        const autoSaveExtension = createAutoSavePlugin({
             debounceDelay: 300, // 300毫秒的输入防抖
             onSave: (success) => {
                 if (success) {
@@ -148,6 +152,9 @@ export const useEditorStore = defineStore('editor', () => {
 
         // 创建动态快捷键扩展
         const keymapExtension = await createDynamicKeymapExtension();
+        
+        // 创建动态扩展
+        const dynamicExtensions = await createDynamicExtensions();
 
         // 组合所有扩展
         const extensions: Extension[] = [
@@ -157,8 +164,9 @@ export const useEditorStore = defineStore('editor', () => {
             ...tabExtensions,
             fontExtension,
             statsExtension,
-            saveShortcutPlugin,
-            autoSavePlugin
+            saveShortcutExtension,
+            autoSaveExtension,
+            ...dynamicExtensions
         ];
 
         // 创建编辑器状态
@@ -175,6 +183,9 @@ export const useEditorStore = defineStore('editor', () => {
 
         // 将编辑器实例保存到store
         setEditorView(view);
+        
+        // 设置编辑器视图到扩展管理器
+        setExtensionManagerView(view);
 
         isEditorInitialized.value = true;
 
@@ -257,6 +268,23 @@ export const useEditorStore = defineStore('editor', () => {
         }
     });
 
+    // 扩展管理方法
+    const updateExtension = async (id: any, enabled: boolean, config?: any) => {
+        try {
+            // 更新后端配置
+            await ExtensionService.UpdateExtensionState(id, enabled, config || {})
+            
+            // 更新前端编辑器
+            const manager = getExtensionManager()
+            manager.updateExtension(id, enabled, config || {})
+            
+            // 重新加载扩展配置
+            await extensionStore.loadExtensions()
+        } catch (error) {
+            console.error('Failed to update extension:', error)
+        }
+    }
+
     return {
         // 状态
         documentStats,
@@ -272,5 +300,6 @@ export const useEditorStore = defineStore('editor', () => {
         handleManualSave,
         destroyEditor,
         scrollEditorToBottom,
+        updateExtension
     };
 });

frontend/src/stores/extensionStore.ts

@@ -0,0 +1,76 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { Extension, ExtensionID, ExtensionCategory, ExtensionSettings } from '@/../bindings/voidraft/internal/models/models'
+import { ExtensionService } from '@/../bindings/voidraft/internal/services'
+
+export const useExtensionStore = defineStore('extension', () => {
+    // 扩展配置数据
+    const extensions = ref<Extension[]>([])
+    const settings = ref<ExtensionSettings | null>(null)
+
+    // 获取启用的扩展
+    const enabledExtensions = computed(() =>
+        extensions.value.filter(ext => ext.enabled)
+    )
+
+    // 根据分类获取扩展
+    const getExtensionsByCategory = computed(() =>
+        (category: ExtensionCategory) =>
+            extensions.value.filter(ext => ext.category === category)
+    )
+
+    // 获取启用的扩展按分类分组
+    const enabledExtensionsByCategory = computed(() => {
+        const grouped = new Map<ExtensionCategory, Extension[]>()
+        enabledExtensions.value.forEach(ext => {
+            if (!grouped.has(ext.category)) {
+                grouped.set(ext.category, [])
+            }
+            grouped.get(ext.category)!.push(ext)
+        })
+        return grouped
+    })
+
+    /**
+     * 从后端加载扩展配置
+     */
+    const loadExtensions = async (): Promise<void> => {
+        try {
+            extensions.value = await ExtensionService.GetAllExtensions()
+        } catch (err) {
+            console.error('Failed to load extensions:', err)
+        }
+    }
+
+    /**
+     * 检查扩展是否启用
+     */
+    const isExtensionEnabled = (id: ExtensionID): boolean => {
+        const extension = extensions.value.find(ext => ext.id === id)
+        return extension?.enabled ?? false
+    }
+
+    /**
+     * 获取扩展配置
+     */
+    const getExtensionConfig = (id: ExtensionID): any => {
+        const extension = extensions.value.find(ext => ext.id === id)
+        return extension?.config ?? {}
+    }
+
+    return {
+        // 状态
+        extensions,
+        settings,
+        enabledExtensions,
+
+        // 计算属性
+        getExtensionsByCategory,
+        enabledExtensionsByCategory,
+
+        // 方法
+        loadExtensions,
+        isExtensionEnabled,
+        getExtensionConfig
+    }
+}) 

frontend/src/stores/systemStore.ts

@@ -3,98 +3,64 @@ import {computed, ref} from 'vue';
 import * as runtime from '@wailsio/runtime';
 
 export interface SystemEnvironment {
-  OS: string;
-  Arch: string;
-  Debug: boolean;
-  OSInfo: {
-    Name: string;
-    Branding: string;
-    Version: string;
-    ID: string;
-  };
-  PlatformInfo?: Record<string, string>;
+    OS: string;
+    Arch: string;
+    Debug: boolean;
+    OSInfo: {
+        Name: string;
+        Branding: string;
+        Version: string;
+        ID: string;
+    };
+    PlatformInfo?: Record<string, string>;
 }
 
 export const useSystemStore = defineStore('system', () => {
-  // 状态
-  const environment = ref<SystemEnvironment | null>(null);
-  const isLoading = ref(false);
-  const error = ref<string | null>(null);
-
-  // 计算属性
-  const isWindows = computed(() => environment.value?.OS === 'windows');
-  const isMacOS = computed(() => environment.value?.OS === 'darwin');
-  const isLinux = computed(() => environment.value?.OS === 'linux');
-  
-  // 获取操作系统名称
-  const osName = computed(() => {
-    if (!environment.value) return 'Unknown';
-    return environment.value.OSInfo?.Name || environment.value.OS || 'Unknown';
-  });
-
-  // 获取架构信息
-  const architecture = computed(() => environment.value?.Arch || 'Unknown');
-
-  // 获取标题栏高度
-  const titleBarHeight = computed(() => {
-    if (isWindows.value) return '32px';
-    if (isMacOS.value) return '28px';
-    return '34px'; // Linux 默认
-  });
-
-  // 初始化系统信息
-  const initializeSystemInfo = async (): Promise<void> => {
-    if (isLoading.value) return;
-
-    isLoading.value = true;
-    error.value = null;
-
-    try {
-        environment.value = await runtime.System.Environment();
-    } catch (err) {
-      error.value = 'Failed to get system environment';
-      environment.value = null;
-    } finally {
-      isLoading.value = false;
-    }
-  };
-
-  // 获取平台特定信息
-  const getPlatformInfo = () => {
-    return environment.value?.PlatformInfo || {};
-  };
-
-  // 检查是否支持某项功能（基于操作系统）
-  const supportsFeature = (feature: string): boolean => {
-    switch (feature) {
-      case 'systemTray':
-        return true; // 所有平台都支持
-      case 'globalHotkeys':
-        return !isLinux.value; // Linux 支持可能有限
-      case 'transparency':
-        return isWindows.value || isMacOS.value;
-      default:
-        return false;
-    }
-  };
-
-  return {
     // 状态
-    environment,
-    isLoading,
-    error,
+    const environment = ref<SystemEnvironment | null>(null);
+    const isLoading = ref(false);
+
 
     // 计算属性
-    isWindows,
-    isMacOS,
-    isLinux,
-    osName,
-    architecture,
-    titleBarHeight,
+    const isWindows = computed(() => environment.value?.OS === 'windows');
+    const isMacOS = computed(() => environment.value?.OS === 'darwin');
+    const isLinux = computed(() => environment.value?.OS === 'linux');
 
-    // 方法
-    initializeSystemInfo,
-    getPlatformInfo,
-    supportsFeature
-  };
+
+    // 获取标题栏高度
+    const titleBarHeight = computed(() => {
+        if (isWindows.value) return '32px';
+        if (isMacOS.value) return '28px';
+        return '34px'; // Linux 默认
+    });
+
+    // 初始化系统信息
+    const initializeSystemInfo = async (): Promise<void> => {
+        if (isLoading.value) return;
+
+        isLoading.value = true;
+
+        try {
+            environment.value = await runtime.System.Environment();
+        } catch (err) {
+            environment.value = null;
+        } finally {
+            isLoading.value = false;
+        }
+    };
+
+    return {
+        // 状态
+        environment,
+        isLoading,
+
+        // 计算属性
+        isWindows,
+        isMacOS,
+        isLinux,
+        titleBarHeight,
+
+        // 方法
+        initializeSystemInfo,
+    };
 }); 

frontend/src/views/editor/Editor.vue

@@ -2,7 +2,7 @@
 import {onBeforeUnmount, onMounted, ref} from 'vue';
 import {useEditorStore} from '@/stores/editorStore';
 import {useConfigStore} from '@/stores/configStore';
-import {createWheelZoomHandler} from './extensions';
+import {createWheelZoomHandler} from './basic/wheelZoomExtension';
 import Toolbar from '@/components/toolbar/Toolbar.vue';
 
 const editorStore = useEditorStore();

frontend/src/views/editor/basic/autoSaveExtension.ts

@@ -1,5 +1,5 @@
 import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
-import { DocumentService } from '../../../../bindings/voidraft/internal/services';
+import { DocumentService } from '@/../bindings/voidraft/internal/services';
 import { useDebounceFn } from '@vueuse/core';
 
 // 定义自动保存配置选项

frontend/src/views/editor/basic/basicSetup.ts

@@ -21,16 +21,6 @@ import {
 import {history} from '@codemirror/commands';
 import {highlightSelectionMatches} from '@codemirror/search';
 import {autocompletion, closeBrackets, closeBracketsKeymap} from '@codemirror/autocomplete';
-import {searchVisibilityField, vscodeSearch} from './vscodeSearch';
-
-import {hyperLink} from './hyperlink';
-import {color} from './colorSelector';
-import {createTextHighlighter} from './textHighlightExtension';
-import {minimap} from './minimap';
-import {createCodeBlockExtension} from './codeblock/index';
-import {foldingOnIndent} from './foldExtension'
-import rainbowBrackets from "./rainbowBrackets";
-import {createCodeBlastExtension} from './codeblast';
 // 基本编辑器设置
 export const createBasicSetup = (): Extension[] => {
     return [
@@ -63,30 +53,6 @@ export const createBasicSetup = (): Extension[] => {
         // 自动完成
         autocompletion(),
 
-        vscodeSearch,
-        searchVisibilityField,
-        foldingOnIndent,
-        rainbowBrackets(),
-        createCodeBlastExtension({
-            effect: 1,
-            shake: true,
-            maxParticles: 300,
-            shakeIntensity: 3
-        }),
-        hyperLink,
-        color,
-        ...createTextHighlighter('hl'),
-        minimap({
-            displayText: 'characters',
-            showOverlay: 'always',
-            autohide: false,
-        }),
-
-        createCodeBlockExtension({
-            showBackground: true,
-            enableAutoDetection: true,
-        }),
-
         // 键盘映射
         keymap.of([
             ...closeBracketsKeymap,

frontend/src/views/editor/basic/fontExtension.ts

@@ -81,14 +81,6 @@ export function createFontExtension(config: Partial<FontConfig> = {}): Extension
   return EditorView.theme(styles);
 }
 
-// 创建响应式字体大小扩展
-export function createResponsiveFontExtension(baseFontSize: number = 14): Extension {
-  return fontCompartment.of(createFontExtension({
-    fontSize: baseFontSize,
-    lineHeight: 1.5
-  }));
-}
-
 // 从后端配置创建字体扩展
 export function createFontExtensionFromBackend(backendConfig: {
   fontFamily?: string;

frontend/src/views/editor/extensions/index.ts

@@ -1,10 +0,0 @@
-// 统一导出所有扩展
-export * from './tabExtension';
-export * from './wheelZoomExtension';
-export * from './statsExtension'; 
-export * from './autoSaveExtension'; 
-export * from './fontExtension';
-export * from './themeExtension';
-export * from './codeblast';
-export * from './codeblock';
-export * from './keymap'; 

frontend/src/views/editor/extensions/rainbowBracket/rainbowBracketsExtension.ts

@@ -70,7 +70,7 @@ const rainbowBracketsPlugin = ViewPlugin.fromClass(RainbowBracketsView, {
     decorations: (v) => v.decorations,
 });
 
-export default function rainbowBrackets() {
+export default function rainbowBracketsExtension() {
     return [
         rainbowBracketsPlugin,
         EditorView.baseTheme({

frontend/src/views/editor/keymap/commandRegistry.ts

@@ -7,7 +7,7 @@ import {
     searchToggleRegex,
     searchToggleWholeWord,
     showSearchVisibilityCommand
-} from '../vscodeSearch/commands'
+} from '../extensions/vscodeSearch/commands'
 import {
     addNewBlockAfterCurrent,
     addNewBlockAfterLast,
@@ -20,14 +20,39 @@ import {
     moveCurrentBlockUp,
     selectNextBlock,
     selectPreviousBlock
-} from '../codeblock/commands'
-import { selectAll } from '../codeblock/selectAll'
-import { deleteLineCommand } from '../codeblock/deleteLine'
-import { moveLineUp, moveLineDown } from '../codeblock/moveLines'
-import { transposeChars } from '@/views/editor/extensions'
-import { copyCommand, cutCommand, pasteCommand } from '../codeblock/copyPaste'
-import { undo, redo, undoSelection, redoSelection, cursorSyntaxLeft, cursorSyntaxRight, selectSyntaxLeft, selectSyntaxRight, copyLineUp, copyLineDown, insertBlankLine, selectLine, selectParentSyntax, indentLess, indentMore, indentSelection, cursorMatchingBracket, toggleComment, toggleBlockComment, insertNewlineAndIndent, deleteCharBackward, deleteCharForward, deleteGroupBackward, deleteGroupForward } from '@codemirror/commands'
-import { foldCode, unfoldCode, foldAll, unfoldAll } from '@codemirror/language'
+} from '../extensions/codeblock/commands'
+import {selectAll} from '../extensions/codeblock/selectAll'
+import {deleteLineCommand} from '../extensions/codeblock/deleteLine'
+import {moveLineDown, moveLineUp} from '../extensions/codeblock/moveLines'
+import {transposeChars} from '../extensions/codeblock'
+import {copyCommand, cutCommand, pasteCommand} from '../extensions/codeblock/copyPaste'
+import {
+    copyLineDown,
+    copyLineUp,
+    cursorMatchingBracket,
+    cursorSyntaxLeft,
+    cursorSyntaxRight,
+    deleteCharBackward,
+    deleteCharForward,
+    deleteGroupBackward,
+    deleteGroupForward,
+    indentLess,
+    indentMore,
+    indentSelection,
+    insertBlankLine,
+    insertNewlineAndIndent,
+    redo,
+    redoSelection,
+    selectLine,
+    selectParentSyntax,
+    selectSyntaxLeft,
+    selectSyntaxRight,
+    toggleBlockComment,
+    toggleComment,
+    undo,
+    undoSelection
+} from '@codemirror/commands'
+import {foldAll, foldCode, unfoldAll, unfoldCode} from '@codemirror/language'
 import i18n from '@/i18n'
 
 // 默认编辑器选项

frontend/src/views/editor/manager/ExtensionManager.ts

@@ -0,0 +1,264 @@
+import { Compartment, Extension, StateEffect } from '@codemirror/state'
+import { EditorView } from '@codemirror/view'
+import { ExtensionID, Extension as ExtensionConfig } from '@/../bindings/voidraft/internal/models/models'
+
+/**
+ * 扩展工厂接口
+ * 每个扩展需要实现此接口来创建和配置扩展
+ */
+export interface ExtensionFactory {
+    /**
+     * 创建扩展实例
+     * @param config 扩展配置
+     * @returns CodeMirror扩展
+     */
+    create(config: any): Extension
+
+    /**
+     * 获取默认配置
+     * @returns 默认配置对象
+     */
+    getDefaultConfig(): any
+
+    /**
+     * 验证配置
+     * @param config 配置对象
+     * @returns 是否有效
+     */
+    validateConfig?(config: any): boolean
+}
+
+/**
+ * 扩展区间信息
+ */
+interface ExtensionCompartment {
+    id: ExtensionID
+    compartment: Compartment
+    factory: ExtensionFactory
+    currentConfig?: any
+    enabled: boolean
+}
+
+/**
+ * 扩展管理器
+ * 负责管理所有动态扩展的注册、启用、禁用和配置更新
+ */
+export class ExtensionManager {
+    private view: EditorView | null = null
+    private compartments = new Map<ExtensionID, ExtensionCompartment>()
+    private extensionFactories = new Map<ExtensionID, ExtensionFactory>()
+
+    /**
+     * 注册扩展工厂
+     * @param id 扩展ID
+     * @param factory 扩展工厂
+     */
+    registerExtension(id: ExtensionID, factory: ExtensionFactory): void {
+        this.extensionFactories.set(id, factory)
+        this.compartments.set(id, {
+            id,
+            compartment: new Compartment(),
+            factory,
+            currentConfig: factory.getDefaultConfig(),
+            enabled: false
+        })
+    }
+
+    /**
+     * 获取所有注册的扩展ID列表
+     */
+    getRegisteredExtensions(): ExtensionID[] {
+        return Array.from(this.extensionFactories.keys())
+    }
+
+    /**
+     * 检查扩展是否已注册
+     * @param id 扩展ID
+     */
+    isExtensionRegistered(id: ExtensionID): boolean {
+        return this.extensionFactories.has(id)
+    }
+
+    /**
+     * 根据后端配置获取初始扩展数组
+     * @param extensionConfigs 后端扩展配置列表
+     * @returns CodeMirror扩展数组
+     */
+    getInitialExtensions(extensionConfigs: ExtensionConfig[]): Extension[] {
+        const extensions: Extension[] = []
+
+        for (const config of extensionConfigs) {
+            const compartmentInfo = this.compartments.get(config.id)
+            if (!compartmentInfo) {
+                console.warn(`Extension ${config.id} is not registered`)
+                continue
+            }
+
+            // 验证配置
+            if (compartmentInfo.factory.validateConfig && 
+                !compartmentInfo.factory.validateConfig(config.config)) {
+                console.warn(`Invalid config for extension ${config.id}`)
+                continue
+            }
+
+            try {
+                const extension = config.enabled 
+                    ? compartmentInfo.factory.create(config.config)
+                    : [] // 空扩展表示禁用
+
+                extensions.push(compartmentInfo.compartment.of(extension))
+                
+                // 更新状态
+                compartmentInfo.currentConfig = config.config
+                compartmentInfo.enabled = config.enabled
+            } catch (error) {
+                console.error(`Failed to create extension ${config.id}:`, error)
+            }
+        }
+
+        return extensions
+    }
+
+    /**
+     * 设置编辑器视图
+     * @param view 编辑器视图实例
+     */
+    setView(view: EditorView): void {
+        this.view = view
+    }
+
+    /**
+     * 动态更新单个扩展
+     * @param id 扩展ID
+     * @param enabled 是否启用
+     * @param config 扩展配置
+     */
+    updateExtension(id: ExtensionID, enabled: boolean, config: any = {}): void {
+        if (!this.view) {
+            console.warn('Editor view not set')
+            return
+        }
+
+        const compartmentInfo = this.compartments.get(id)
+        if (!compartmentInfo) {
+            console.warn(`Extension ${id} is not registered`)
+            return
+        }
+
+        try {
+            // 验证配置
+            if (compartmentInfo.factory.validateConfig && 
+                !compartmentInfo.factory.validateConfig(config)) {
+                console.warn(`Invalid config for extension ${id}`)
+                return
+            }
+
+            const extension = enabled 
+                ? compartmentInfo.factory.create(config)
+                : []
+
+            this.view.dispatch({
+                effects: compartmentInfo.compartment.reconfigure(extension)
+            })
+
+            // 更新状态
+            compartmentInfo.currentConfig = config
+            compartmentInfo.enabled = enabled
+        } catch (error) {
+            console.error(`Failed to update extension ${id}:`, error)
+        }
+    }
+
+    /**
+     * 批量更新扩展
+     * @param updates 更新配置数组
+     */
+    updateExtensions(updates: Array<{
+        id: ExtensionID
+        enabled: boolean
+        config: any
+    }>): void {
+        if (!this.view) {
+            console.warn('Editor view not set')
+            return
+        }
+
+        const effects: StateEffect<any>[] = []
+
+        for (const update of updates) {
+            const compartmentInfo = this.compartments.get(update.id)
+            if (!compartmentInfo) {
+                console.warn(`Extension ${update.id} is not registered`)
+                continue
+            }
+
+            try {
+                // 验证配置
+                if (compartmentInfo.factory.validateConfig && 
+                    !compartmentInfo.factory.validateConfig(update.config)) {
+                    console.warn(`Invalid config for extension ${update.id}`)
+                    continue
+                }
+
+                const extension = update.enabled 
+                    ? compartmentInfo.factory.create(update.config)
+                    : []
+
+                effects.push(compartmentInfo.compartment.reconfigure(extension))
+
+                // 更新状态
+                compartmentInfo.currentConfig = update.config
+                compartmentInfo.enabled = update.enabled
+            } catch (error) {
+                console.error(`Failed to update extension ${update.id}:`, error)
+            }
+        }
+
+        if (effects.length > 0) {
+            this.view.dispatch({ effects })
+        }
+    }
+
+    /**
+     * 获取扩展当前状态
+     * @param id 扩展ID
+     */
+    getExtensionState(id: ExtensionID): {
+        enabled: boolean
+        config: any
+    } | null {
+        const compartmentInfo = this.compartments.get(id)
+        if (!compartmentInfo) {
+            return null
+        }
+
+        return {
+            enabled: compartmentInfo.enabled,
+            config: compartmentInfo.currentConfig
+        }
+    }
+
+    /**
+     * 重置扩展到默认配置
+     * @param id 扩展ID
+     */
+    resetExtensionToDefault(id: ExtensionID): void {
+        const compartmentInfo = this.compartments.get(id)
+        if (!compartmentInfo) {
+            console.warn(`Extension ${id} is not registered`)
+            return
+        }
+
+        const defaultConfig = compartmentInfo.factory.getDefaultConfig()
+        this.updateExtension(id, true, defaultConfig)
+    }
+
+    /**
+     * 销毁管理器
+     */
+    destroy(): void {
+        this.view = null
+        this.compartments.clear()
+        this.extensionFactories.clear()
+    }
+} 

frontend/src/views/editor/manager/factories.ts

@@ -0,0 +1,296 @@
+import {ExtensionFactory, ExtensionManager} from './ExtensionManager'
+import {ExtensionID} from '@/../bindings/voidraft/internal/models/models'
+
+// 导入现有扩展的创建函数
+import rainbowBracketsExtension from '../extensions/rainbowBracket/rainbowBracketsExtension'
+import {createTextHighlighter} from '../extensions/textHighlight/textHighlightExtension'
+import {createCodeBlastExtension} from '../extensions/codeblast'
+import {color} from '../extensions/colorSelector'
+import {hyperLink} from '../extensions/hyperlink'
+import {minimap} from '../extensions/minimap'
+import {vscodeSearch} from '../extensions/vscodeSearch'
+import {createCodeBlockExtension} from '../extensions/codeblock'
+import {foldingOnIndent} from '../extensions/fold/foldExtension'
+
+/**
+ * 彩虹括号扩展工厂
+ */
+export const rainbowBracketsFactory: ExtensionFactory = {
+    create(config: any) {
+        return rainbowBracketsExtension()
+    },
+    getDefaultConfig() {
+        return {}
+    },
+    validateConfig(config: any) {
+        return typeof config === 'object'
+    }
+}
+
+/**
+ * 文本高亮扩展工厂
+ */
+export const textHighlightFactory: ExtensionFactory = {
+    create(config: any) {
+        return createTextHighlighter('default')
+    },
+    getDefaultConfig() {
+        return {
+            highlightClass: 'hl'
+        }
+    },
+    validateConfig(config: any) {
+        return typeof config === 'object' &&
+            (!config.highlightClass || typeof config.highlightClass === 'string')
+    }
+}
+
+/**
+ * 小地图扩展工厂
+ */
+export const minimapFactory: ExtensionFactory = {
+    create(config: any) {
+        const options = {
+            displayText: config.displayText || 'characters',
+            showOverlay: config.showOverlay || 'always',
+            autohide: config.autohide || false
+        }
+        return minimap(options)
+    },
+    getDefaultConfig() {
+        return {
+            displayText: 'characters',
+            showOverlay: 'always',
+            autohide: false
+        }
+    },
+    validateConfig(config: any) {
+        return typeof config === 'object' &&
+            (!config.displayText || typeof config.displayText === 'string') &&
+            (!config.showOverlay || typeof config.showOverlay === 'string') &&
+            (!config.autohide || typeof config.autohide === 'boolean')
+    }
+}
+
+/**
+ * 代码爆炸效果扩展工厂
+ */
+export const codeBlastFactory: ExtensionFactory = {
+    create(config: any) {
+        const options = {
+            effect: config.effect || 1,
+            shake: config.shake !== false,
+            maxParticles: config.maxParticles || 300,
+            shakeIntensity: config.shakeIntensity || 3
+        }
+        return createCodeBlastExtension(options)
+    },
+    getDefaultConfig() {
+        return {
+            effect: 1,
+            shake: true,
+            maxParticles: 300,
+            shakeIntensity: 3
+        }
+    },
+    validateConfig(config: any) {
+        return typeof config === 'object' &&
+            (!config.effect || [1, 2].includes(config.effect)) &&
+            (!config.shake || typeof config.shake === 'boolean') &&
+            (!config.maxParticles || typeof config.maxParticles === 'number') &&
+            (!config.shakeIntensity || typeof config.shakeIntensity === 'number')
+    }
+}
+
+/**
+ * 超链接扩展工厂
+ */
+export const hyperlinkFactory: ExtensionFactory = {
+    create(config: any) {
+        return hyperLink
+    },
+    getDefaultConfig() {
+        return {}
+    },
+    validateConfig(config: any) {
+        return typeof config === 'object'
+    }
+}
+
+/**
+ * 颜色选择器扩展工厂
+ */
+export const colorSelectorFactory: ExtensionFactory = {
+    create(config: any) {
+        return color
+    },
+    getDefaultConfig() {
+        return {}
+    },
+    validateConfig(config: any) {
+        return typeof config === 'object'
+    }
+}
+
+/**
+ * 搜索扩展工厂
+ */
+export const searchFactory: ExtensionFactory = {
+    create(config: any) {
+        return vscodeSearch
+    },
+    getDefaultConfig() {
+        return {}
+    },
+    validateConfig(config: any) {
+        return typeof config === 'object'
+    }
+}
+
+/**
+ * 代码块扩展工厂
+ */
+export const codeBlockFactory: ExtensionFactory = {
+    create(config: any) {
+        const options = {
+            showBackground: config.showBackground !== false,
+            enableAutoDetection: config.enableAutoDetection !== false
+        }
+        return createCodeBlockExtension(options)
+    },
+    getDefaultConfig() {
+        return {
+            showBackground: true,
+            enableAutoDetection: true
+        }
+    },
+    validateConfig(config: any) {
+        return typeof config === 'object' &&
+            (!config.showBackground || typeof config.showBackground === 'boolean') &&
+            (!config.enableAutoDetection || typeof config.enableAutoDetection === 'boolean')
+    }
+}
+
+export const foldFactory: ExtensionFactory = {
+    create(config: any) {
+        return foldingOnIndent;
+    },
+    getDefaultConfig(): any {
+        return {}
+    },
+    validateConfig(config: any): boolean {
+        return typeof config === 'object'
+    }
+}
+
+/**
+ * 所有扩展的统一配置
+ * 排除$zero值以避免TypeScript类型错误
+ */
+const EXTENSION_CONFIGS = {
+
+    // 编辑增强扩展
+    [ExtensionID.ExtensionRainbowBrackets]: {
+        factory: rainbowBracketsFactory,
+        displayName: '彩虹括号',
+        description: '用不同颜色显示嵌套括号'
+    },
+    [ExtensionID.ExtensionHyperlink]: {
+        factory: hyperlinkFactory,
+        displayName: '超链接',
+        description: '识别并可点击超链接'
+    },
+    [ExtensionID.ExtensionColorSelector]: {
+        factory: colorSelectorFactory,
+        displayName: '颜色选择器',
+        description: '颜色值的可视化和选择'
+    },
+
+    // UI增强扩展
+    [ExtensionID.ExtensionMinimap]: {
+        factory: minimapFactory,
+        displayName: '小地图',
+        description: '显示小地图视图'
+    },
+    [ExtensionID.ExtensionCodeBlast]: {
+        factory: codeBlastFactory,
+        displayName: '爆炸效果',
+        description: '编写时的动画效果'
+    },
+
+    // 工具扩展
+    [ExtensionID.ExtensionSearch]: {
+        factory: searchFactory,
+        displayName: '搜索功能',
+        description: '文本搜索和替换功能'
+    },
+    [ExtensionID.ExtensionCodeBlock]: {
+        factory: codeBlockFactory,
+        displayName: '代码块',
+        description: '代码块语法高亮和格式化'
+    },
+    [ExtensionID.ExtensionFold]: {
+        factory: foldFactory,
+        displayName: '折叠',
+        description: '折叠'
+    },
+    [ExtensionID.ExtensionTextHighlight]:{
+        factory: textHighlightFactory,
+        displayName: '文本高亮',
+        description: '文本高亮'
+    }
+}
+
+/**
+ * 注册所有扩展工厂到管理器
+ * @param manager 扩展管理器实例
+ */
+export function registerAllExtensions(manager: ExtensionManager): void {
+    Object.entries(EXTENSION_CONFIGS).forEach(([id, config]) => {
+        manager.registerExtension(id as ExtensionID, config.factory)
+    })
+}
+
+/**
+ * 获取扩展工厂的显示名称
+ * @param id 扩展ID
+ * @returns 显示名称
+ */
+export function getExtensionDisplayName(id: ExtensionID): string {
+    if (id === ExtensionID.$zero) return ''
+    return EXTENSION_CONFIGS[id as Exclude<ExtensionID, ExtensionID.$zero>]?.displayName || id
+}
+
+/**
+ * 获取扩展工厂的描述
+ * @param id 扩展ID
+ * @returns 描述
+ */
+export function getExtensionDescription(id: ExtensionID): string {
+    if (id === ExtensionID.$zero) return ''
+    return EXTENSION_CONFIGS[id as Exclude<ExtensionID, ExtensionID.$zero>]?.description || '未知扩展'
+}
+
+/**
+ * 获取扩展的完整信息
+ * @param id 扩展ID
+ * @returns 扩展信息对象
+ */
+export function getExtensionInfo(id: ExtensionID): { displayName: string; description: string } | null {
+    if (id === ExtensionID.$zero) return null
+    const config = EXTENSION_CONFIGS[id as Exclude<ExtensionID, ExtensionID.$zero>]
+    if (!config) return null
+
+    return {
+        displayName: config.displayName,
+        description: config.description
+    }
+}
+
+/**
+ * 获取所有可用扩展的ID列表
+ * @returns 扩展ID数组
+ */
+export function getAllExtensionIds(): ExtensionID[] {
+    return Object.keys(EXTENSION_CONFIGS) as ExtensionID[]
+} 

frontend/src/views/editor/manager/index.ts

@@ -0,0 +1,51 @@
+import {Extension} from '@codemirror/state'
+import {useExtensionStore} from '@/stores/extensionStore'
+import {ExtensionManager} from './ExtensionManager'
+import {registerAllExtensions} from './factories'
+
+/**
+ * 全局扩展管理器实例
+ */
+const extensionManager = new ExtensionManager()
+
+/**
+ * 异步创建动态扩展
+ * 确保扩展配置已加载
+ */
+export const createDynamicExtensions = async (): Promise<Extension[]> => {
+    const extensionStore = useExtensionStore()
+
+    // 注册所有扩展工厂
+    registerAllExtensions(extensionManager)
+
+    // 确保扩展配置已加载
+    if (extensionStore.extensions.length === 0) {
+        await extensionStore.loadExtensions()
+    }
+
+    // 获取启用的扩展配置
+    const enabledExtensions = extensionStore.enabledExtensions
+
+    return extensionManager.getInitialExtensions(enabledExtensions)
+}
+
+/**
+ * 获取扩展管理器实例
+ * @returns 扩展管理器
+ */
+export const getExtensionManager = (): ExtensionManager => {
+    return extensionManager
+}
+
+/**
+ * 设置编辑器视图到扩展管理器
+ * @param view 编辑器视图
+ */
+export const setExtensionManagerView = (view: any): void => {
+    extensionManager.setView(view)
+}
+
+// 导出相关模块
+export {ExtensionManager} from './ExtensionManager'
+export {registerAllExtensions, getExtensionDisplayName, getExtensionDescription} from './factories'
+export type {ExtensionFactory} from './ExtensionManager'

frontend/src/views/settings/pages/KeyBindingsPage.vue

@@ -4,7 +4,7 @@ import { onMounted, computed } from 'vue';
 import SettingSection from '../components/SettingSection.vue';
 import { useKeybindingStore } from '@/stores/keybindingStore';
 import { useSystemStore } from '@/stores/systemStore';
-import { getCommandDescription } from '@/views/editor/extensions/keymap/commandRegistry';
+import { getCommandDescription } from '@/views/editor/keymap/commandRegistry';
 import {KeyBindingCommand} from "@/../bindings/voidraft/internal/models";
 
 const { t } = useI18n();