✨ Add extension management page

2025-06-24 19:18:30 +08:00
parent f3bcb87828
commit 8e91e3cf7c
13 changed files with 331 additions and 276 deletions
--- a/frontend/src/views/editor/manager/ExtensionManager.ts
+++ b/frontend/src/views/editor/manager/ExtensionManager.ts
@@ -1,6 +1,6 @@
-import { Compartment, Extension, StateEffect } from '@codemirror/state'
-import { EditorView } from '@codemirror/view'
-import { ExtensionID, Extension as ExtensionConfig } from '@/../bindings/voidraft/internal/models/models'
+import {Compartment, Extension, StateEffect} from '@codemirror/state'
+import {EditorView} from '@codemirror/view'
+import {Extension as ExtensionConfig, ExtensionID} from '@/../bindings/voidraft/internal/models/models'

 /**
 * 扩展工厂接口
@@ -90,24 +90,22 @@ export class ExtensionManager {
        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 && 
+            if (compartmentInfo.factory.validateConfig &&
                !compartmentInfo.factory.validateConfig(config.config)) {
-                console.warn(`Invalid config for extension ${config.id}`)
                continue
            }

            try {
-                const extension = config.enabled 
+                const extension = config.enabled
                    ? compartmentInfo.factory.create(config.config)
                    : [] // 空扩展表示禁用

                extensions.push(compartmentInfo.compartment.of(extension))
-                
+
                // 更新状态
                compartmentInfo.currentConfig = config.config
                compartmentInfo.enabled = config.enabled
@@ -134,26 +132,24 @@ export class ExtensionManager {
     * @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 && 
+            if (compartmentInfo.factory.validateConfig &&
                !compartmentInfo.factory.validateConfig(config)) {
-                console.warn(`Invalid config for extension ${id}`)
                return
            }

-            const extension = enabled 
+            const extension = enabled
                ? compartmentInfo.factory.create(config)
                : []

@@ -164,8 +160,9 @@ export class ExtensionManager {
            // 更新状态
            compartmentInfo.currentConfig = config
            compartmentInfo.enabled = enabled
+
        } catch (error) {
-            console.error(`Failed to update extension ${id}:`, error)
+            console.error(`[ExtensionManager] Failed to update extension ${id}:`, error)
        }
    }

@@ -188,19 +185,17 @@ export class ExtensionManager {
        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 && 
+                if (compartmentInfo.factory.validateConfig &&
                    !compartmentInfo.factory.validateConfig(update.config)) {
-                    console.warn(`Invalid config for extension ${update.id}`)
                    continue
                }

-                const extension = update.enabled 
+                const extension = update.enabled
                    ? compartmentInfo.factory.create(update.config)
                    : []

@@ -215,7 +210,7 @@ export class ExtensionManager {
        }

        if (effects.length > 0) {
-            this.view.dispatch({ effects })
+            this.view.dispatch({effects})
        }
    }

@@ -245,7 +240,6 @@ export class ExtensionManager {
    resetExtensionToDefault(id: ExtensionID): void {
        const compartmentInfo = this.compartments.get(id)
        if (!compartmentInfo) {
-            console.warn(`Extension ${id} is not registered`)
            return
        }

--- a/frontend/src/views/editor/manager/factories.ts
+++ b/frontend/src/views/editor/manager/factories.ts
@@ -1,5 +1,6 @@
 import {ExtensionFactory, ExtensionManager} from './ExtensionManager'
 import {ExtensionID} from '@/../bindings/voidraft/internal/models/models'
+import i18n from '@/i18n'

 // 导入现有扩展的创建函数
 import rainbowBracketsExtension from '../extensions/rainbowBracket/rainbowBracketsExtension'
@@ -192,52 +193,52 @@ const EXTENSION_CONFIGS = {
    // 编辑增强扩展
    [ExtensionID.ExtensionRainbowBrackets]: {
        factory: rainbowBracketsFactory,
-        displayName: '彩虹括号',
-        description: '用不同颜色显示嵌套括号'
+        displayNameKey: 'extensions.rainbowBrackets.name',
+        descriptionKey: 'extensions.rainbowBrackets.description'
    },
    [ExtensionID.ExtensionHyperlink]: {
        factory: hyperlinkFactory,
-        displayName: '超链接',
-        description: '识别并可点击超链接'
+        displayNameKey: 'extensions.hyperlink.name',
+        descriptionKey: 'extensions.hyperlink.description'
    },
    [ExtensionID.ExtensionColorSelector]: {
        factory: colorSelectorFactory,
-        displayName: '颜色选择器',
-        description: '颜色值的可视化和选择'
+        displayNameKey: 'extensions.colorSelector.name',
+        descriptionKey: 'extensions.colorSelector.description'
    },

    // UI增强扩展
    [ExtensionID.ExtensionMinimap]: {
        factory: minimapFactory,
-        displayName: '小地图',
-        description: '显示小地图视图'
+        displayNameKey: 'extensions.minimap.name',
+        descriptionKey: 'extensions.minimap.description'
    },
    [ExtensionID.ExtensionCodeBlast]: {
        factory: codeBlastFactory,
-        displayName: '爆炸效果',
-        description: '编写时的动画效果'
+        displayNameKey: 'extensions.codeBlast.name',
+        descriptionKey: 'extensions.codeBlast.description'
    },

    // 工具扩展
    [ExtensionID.ExtensionSearch]: {
        factory: searchFactory,
-        displayName: '搜索功能',
-        description: '文本搜索和替换功能'
+        displayNameKey: 'extensions.search.name',
+        descriptionKey: 'extensions.search.description'
    },
    [ExtensionID.ExtensionCodeBlock]: {
        factory: codeBlockFactory,
-        displayName: '代码块',
-        description: '代码块语法高亮和格式化'
+        displayNameKey: 'extensions.codeBlock.name',
+        descriptionKey: 'extensions.codeBlock.description'
    },
    [ExtensionID.ExtensionFold]: {
        factory: foldFactory,
-        displayName: '折叠',
-        description: '折叠'
+        displayNameKey: 'extensions.fold.name',
+        descriptionKey: 'extensions.fold.description'
    },
-    [ExtensionID.ExtensionTextHighlight]:{
+    [ExtensionID.ExtensionTextHighlight]: {
        factory: textHighlightFactory,
-        displayName: '文本高亮',
-        description: '文本高亮'
+        displayNameKey: 'extensions.textHighlight.name',
+        descriptionKey: 'extensions.textHighlight.description'
    }
 }

@@ -257,8 +258,8 @@ export function registerAllExtensions(manager: ExtensionManager): void {
 * @returns 显示名称
 */
 export function getExtensionDisplayName(id: ExtensionID): string {
-    if (id === ExtensionID.$zero) return ''
-    return EXTENSION_CONFIGS[id as Exclude<ExtensionID, ExtensionID.$zero>]?.displayName || id
+    const config = EXTENSION_CONFIGS[id as ExtensionID]
+    return config?.displayNameKey ? i18n.global.t(config.displayNameKey) : id
 }

 /**
@@ -267,24 +268,8 @@ export function getExtensionDisplayName(id: ExtensionID): string {
 * @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
-    }
+    const config = EXTENSION_CONFIGS[id as ExtensionID]
+    return config?.descriptionKey ? i18n.global.t(config.descriptionKey) : ''
 }

 /**
--- a/frontend/src/views/settings/Settings.vue
+++ b/frontend/src/views/settings/Settings.vue
@@ -13,6 +13,7 @@ const navItems = [
  { id: 'general', icon: '⚙️', route: '/settings/general' },
  { id: 'editing', icon: '✏️', route: '/settings/editing' },
  { id: 'appearance', icon: '🎨', route: '/settings/appearance' },
+  { id: 'extensions', icon: '🧩', route: '/settings/extensions' },
  { id: 'keyBindings', icon: '⌨️', route: '/settings/key-bindings' },
  { id: 'updates', icon: '🔄', route: '/settings/updates' }
 ];
--- a/frontend/src/views/settings/pages/ExtensionsPage.vue
+++ b/frontend/src/views/settings/pages/ExtensionsPage.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import {computed} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useEditorStore} from '@/stores/editorStore'
+import {useExtensionStore} from '@/stores/extensionStore'
+import {ExtensionService} from '@/../bindings/voidraft/internal/services'
+import {ExtensionID} from '@/../bindings/voidraft/internal/models/models'
+import {getAllExtensionIds, getExtensionDescription, getExtensionDisplayName} from '@/views/editor/manager/factories'
+import SettingSection from '../components/SettingSection.vue'
+import SettingItem from '../components/SettingItem.vue'
+import ToggleSwitch from '../components/ToggleSwitch.vue'
+
+const {t} = useI18n()
+const editorStore = useEditorStore()
+const extensionStore = useExtensionStore()
+
+// 获取所有可用的扩展
+const availableExtensions = computed(() => {
+  return getAllExtensionIds().map(id => {
+    const extension = extensionStore.extensions.find(ext => ext.id === id)
+    return {
+      id,
+      displayName: getExtensionDisplayName(id),
+      description: getExtensionDescription(id),
+      enabled: extension?.enabled || false,
+      isDefault: extension?.isDefault || false
+    }
+  })
+})
+
+// 更新扩展状态
+const updateExtension = async (extensionId: ExtensionID, enabled: boolean) => {
+  await editorStore.updateExtension(extensionId, enabled)
+}
+
+// 重置扩展到默认配置
+const resetExtension = async (extensionId: ExtensionID) => {
+
+  await ExtensionService.ResetExtensionToDefault(extensionId)
+
+  // 重新加载扩展状态
+  await extensionStore.loadExtensions()
+
+  // 获取重置后的状态，通知编辑器更新
+  const extension = extensionStore.extensions.find(ext => ext.id === extensionId)
+  if (extension) {
+    await editorStore.updateExtension(extensionId, extension.enabled, extension.config)
+  }
+
+}
+</script>
+
+<template>
+  <div class="settings-page">
+    <SettingSection :title="t('settings.extensions')">
+      <SettingItem
+          v-for="extension in availableExtensions"
+          :key="extension.id"
+          :title="extension.displayName"
+          :description="extension.description"
+      >
+        <div class="extension-controls">
+          <ToggleSwitch
+              :model-value="extension.enabled"
+              @update:model-value="updateExtension(extension.id, $event)"
+          />
+          <button
+              v-if="!extension.isDefault"
+              class="reset-button"
+              @click="resetExtension(extension.id)"
+              :title="t('settings.extensionsPage.resetToDefault')"
+          >
+            {{ t('settings.reset') }}
+          </button>
+        </div>
+      </SettingItem>
+    </SettingSection>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.settings-page {
+  max-width: 1000px;
+}
+
+.extension-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.reset-button {
+  padding: 4px 8px;
+  font-size: 11px;
+  border: 1px solid var(--settings-input-border);
+  border-radius: 3px;
+  background-color: var(--settings-input-bg);
+  color: var(--settings-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--settings-hover);
+    color: var(--settings-text);
+  }
+}
+</style>