landaiqing/voidraft
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

✨ Add extension management page

Browse Source
This commit is contained in:
landaiqing
2025-06-24 19:18:30 +08:00
parent f3bcb87828
commit 8e91e3cf7c
13 changed files with 331 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/bindings/voidraft/internal/models/models.ts
View File

@@ -477,84 +477,6 @@ export enum ExtensionID {
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 通用设置配置
*/
@@ -618,7 +540,7 @@ export class GeneralConfig {
* Creates a new GeneralConfig instance from a string or object.
*/
static createFrom($$source: any = {}): GeneralConfig {
const $$createField5_0 = $$createType11;
const $$createField5_0 = $$createType8;
let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
if ("globalHotkey" in $$parsedSource) {
$$parsedSource["globalHotkey"] = $$createField5_0($$parsedSource["globalHotkey"]);
@@ -1095,8 +1017,8 @@ export class KeyBindingConfig {
* Creates a new KeyBindingConfig instance from a string or object.
*/
static createFrom($$source: any = {}): KeyBindingConfig {
const $$createField0_0 = $$createType13;
const $$createField1_0 = $$createType14;
const $$createField0_0 = $$createType10;
const $$createField1_0 = $$createType11;
let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
if ("keyBindings" in $$parsedSource) {
$$parsedSource["keyBindings"] = $$createField0_0($$parsedSource["keyBindings"]);
@@ -1257,10 +1179,7 @@ var $$createType6 = (function $$initCreateType6(...args): any {
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;
const $$createType8 = HotkeyCombo.createFrom;
const $$createType9 = KeyBinding.createFrom;
const $$createType10 = $Create.Array($$createType9);
const $$createType11 = KeyBindingMetadata.createFrom;

38
frontend/bindings/voidraft/internal/services/extensionservice.ts
View File

@@ -14,22 +14,6 @@ import {Call as $Call, Create as $Create} from "@wailsio/runtime";
// @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 获取所有扩展配置
*/
@@ -42,18 +26,6 @@ export function GetAllExtensions(): Promise<models$0.Extension[]> & { cancel():
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 重置所有扩展到默认状态
*/
@@ -78,6 +50,14 @@ export function ServiceShutdown(): Promise<void> & { cancel(): void } {
return $resultPromise;
}
/**
* UpdateExtensionEnabled 更新扩展启用状态
*/
export function UpdateExtensionEnabled(id: models$0.ExtensionID, enabled: boolean): Promise<void> & { cancel(): void } {
let $resultPromise = $Call.ByID(1067300094, id, enabled) as any;
return $resultPromise;
}
/**
* UpdateExtensionState 更新扩展状态
*/
@@ -89,5 +69,3 @@ export function UpdateExtensionState(id: models$0.ExtensionID, enabled: boolean,
// 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);

71
frontend/src/i18n/locales/en-US.ts
View File

@@ -148,6 +148,75 @@ export default {
upToDate: 'You are using the latest version',
viewUpdate: 'View Update',
releaseNotes: 'Release Notes',
networkError: 'Network connection error, please check your network settings'
networkError: 'Network connection error, please check your network settings',
extensions: 'Extensions',
extensionsPage: {
loading: 'Loading',
categoryEditing: 'Editing Enhancement',
categoryUI: 'UI Enhancement',
categoryTools: 'Tools',
configuration: 'Configuration',
resetToDefault: 'Reset to Default Configuration',
minimap: {
displayText: 'Display Text',
displayTextCharacters: 'Characters',
displayTextBlocks: 'Blocks',
showOverlay: 'Show Overlay',
showOverlayAlways: 'Always',
showOverlayHover: 'On Hover',
showOverlayNever: 'Never',
autohide: 'Auto Hide'
},
codeBlast: {
effect: 'Effect Type',
effectParticles: 'Particle Effect',
effectExplosion: 'Explosion Effect',
shake: 'Shake Effect',
maxParticles: 'Max Particles',
shakeIntensity: 'Shake Intensity'
},
codeBlock: {
showBackground: 'Show Background',
enableAutoDetection: 'Enable Auto Detection'
}
}
},
extensions: {
rainbowBrackets: {
name: 'Rainbow Brackets',
description: 'Display nested brackets in different colors'
},
hyperlink: {
name: 'Hyperlink',
description: 'Recognize and make hyperlinks clickable'
},
colorSelector: {
name: 'Color Selector',
description: 'Visual color picker and color value display'
},
minimap: {
name: 'Minimap',
description: 'Display minimap overview of the document'
},
codeBlast: {
name: 'Code Blast',
description: 'Animated effects while typing'
},
search: {
name: 'Search',
description: 'Text search and replace functionality'
},
codeBlock: {
name: 'Code Block',
description: 'Code block syntax highlighting and formatting'
},
fold: {
name: 'Code Folding',
description: 'Collapse and expand code sections for better readability'
},
textHighlight: {
name: 'Text Highlight',
description: 'Highlight text selections and search matches'
}
}
};

71
frontend/src/i18n/locales/zh-CN.ts
View File

@@ -98,6 +98,7 @@ export default {
general: '常规',
editing: '编辑器',
appearance: '外观',
extensions: '扩展',
keyBindings: '快捷键',
updates: '更新',
reset: '重置',
@@ -148,6 +149,74 @@ export default {
upToDate: '您正在使用最新版本',
viewUpdate: '查看更新',
releaseNotes: '更新内容',
networkError: '网络连接错误，请检查网络设置'
networkError: '网络连接错误，请检查网络设置',
extensionsPage: {
loading: '加载中',
categoryEditing: '编辑增强',
categoryUI: '界面增强',
categoryTools: '工具扩展',
configuration: '配置',
resetToDefault: '重置为默认配置',
minimap: {
displayText: '显示文本',
displayTextCharacters: '字符',
displayTextBlocks: '块',
showOverlay: '显示覆盖层',
showOverlayAlways: '始终',
showOverlayHover: '悬停时',
showOverlayNever: '从不',
autohide: '自动隐藏'
},
codeBlast: {
effect: '效果类型',
effectParticles: '粒子效果',
effectExplosion: '爆炸效果',
shake: '震动效果',
maxParticles: '最大粒子数',
shakeIntensity: '震动强度'
},
codeBlock: {
showBackground: '显示背景',
enableAutoDetection: '启用自动检测'
}
}
},
extensions: {
rainbowBrackets: {
name: '彩虹括号',
description: '用不同颜色显示嵌套括号'
},
hyperlink: {
name: '超链接',
description: '识别并可点击超链接'
},
colorSelector: {
name: '颜色选择器',
description: '颜色值的可视化和选择'
},
minimap: {
name: '小地图',
description: '显示小地图视图'
},
codeBlast: {
name: '爆炸效果',
description: '编写时的动画效果'
},
search: {
name: '搜索功能',
description: '文本搜索和替换功能'
},
codeBlock: {
name: '代码块',
description: '代码块语法高亮和格式化'
},
fold: {
name: '代码折叠',
description: '折叠和展开代码段以提高代码可读性'
},
textHighlight: {
name: '文本高亮',
description: '高亮显示文本选择和搜索匹配项'
}
}
};

6
frontend/src/router/index.ts
View File

@@ -6,6 +6,7 @@ import EditingPage from '@/views/settings/pages/EditingPage.vue';
import AppearancePage from '@/views/settings/pages/AppearancePage.vue';
import KeyBindingsPage from '@/views/settings/pages/KeyBindingsPage.vue';
import UpdatesPage from '@/views/settings/pages/UpdatesPage.vue';
import ExtensionsPage from '@/views/settings/pages/ExtensionsPage.vue';
const routes: RouteRecordRaw[] = [
{
@@ -34,6 +35,11 @@ const routes: RouteRecordRaw[] = [
name: 'SettingsAppearance',
component: AppearancePage
},
{
path: 'extensions',
name: 'SettingsExtensions',
component: ExtensionsPage
},
{
path: 'key-bindings',
name: 'SettingsKeyBindings',

40
frontend/src/stores/editorStore.ts
View File

@@ -6,7 +6,7 @@ import {useConfigStore} from './configStore';
import {useDocumentStore} from './documentStore';
import {useThemeStore} from './themeStore';
import {SystemThemeType} from '@/../bindings/voidraft/internal/models/models';
import {DocumentService} from '@/../bindings/voidraft/internal/services';
import {DocumentService, ExtensionService} from '@/../bindings/voidraft/internal/services';
import {ensureSyntaxTree} from "@codemirror/language"
import {createBasicSetup} from '@/views/editor/basic/basicSetup';
import {createThemeExtension, updateEditorTheme} from '@/views/editor/basic/themeExtension';
@@ -15,9 +15,8 @@ import {createFontExtensionFromBackend, updateFontConfig} from '@/views/editor/b
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';
import {createDynamicExtensions, getExtensionManager, setExtensionManagerView} from '@/views/editor/manager';
import {useExtensionStore} from './extensionStore';
export interface DocumentStats {
lines: number;
@@ -57,7 +56,7 @@ export const useEditorStore = defineStore('editor', () => {
if (editorView.value && container && editorView.value.dom.parentElement !== container) {
container.appendChild(editorView.value.dom);
// 重新挂载后立即滚动到底部
scrollEditorToBottom();
scrollToBottom(editorView.value as EditorView);
}
}
@@ -90,13 +89,6 @@ export const useEditorStore = defineStore('editor', () => {
}
};
// 滚动到底部的公共方法
const scrollEditorToBottom = () => {
if (editorView.value) {
scrollToBottom(editorView.value as any);
}
};
// 创建编辑器
const createEditor = async (initialDoc: string = '') => {
if (isEditorInitialized.value || !editorContainer.value) return;
@@ -152,7 +144,7 @@ export const useEditorStore = defineStore('editor', () => {
// 创建动态快捷键扩展
const keymapExtension = await createDynamicKeymapExtension();
// 创建动态扩展
const dynamicExtensions = await createDynamicExtensions();
@@ -183,7 +175,7 @@ export const useEditorStore = defineStore('editor', () => {
// 将编辑器实例保存到store
setEditorView(view);
// 设置编辑器视图到扩展管理器
setExtensionManagerView(view);
@@ -271,17 +263,22 @@ export const useEditorStore = defineStore('editor', () => {
// 扩展管理方法
const updateExtension = async (id: any, enabled: boolean, config?: any) => {
try {
// 更新后端配置
await ExtensionService.UpdateExtensionState(id, enabled, config || {})
// 如果只是更新启用状态
if (config === undefined) {
await ExtensionService.UpdateExtensionEnabled(id, enabled)
} else {
// 如果需要更新配置
await ExtensionService.UpdateExtensionState(id, enabled, config)
}
// 更新前端编辑器
const manager = getExtensionManager()
manager.updateExtension(id, enabled, config || {})
// 重新加载扩展配置
if (manager) {
manager.updateExtension(id, enabled, config || {})
}
await extensionStore.loadExtensions()
} catch (error) {
console.error('Failed to update extension:', error)
throw error
}
}
@@ -299,7 +296,6 @@ export const useEditorStore = defineStore('editor', () => {
reconfigureFontSettings,
handleManualSave,
destroyEditor,
scrollEditorToBottom,
updateExtension
};
});

35
frontend/src/stores/extensionStore.ts
View File

@@ -1,36 +1,17 @@
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import { Extension, ExtensionID, ExtensionCategory, ExtensionSettings } from '@/../bindings/voidraft/internal/models/models'
import { Extension, ExtensionID } 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
})
/**
* 从后端加载扩展配置
*/
@@ -42,14 +23,6 @@ export const useExtensionStore = defineStore('extension', () => {
}
}
/**
* 检查扩展是否启用
*/
const isExtensionEnabled = (id: ExtensionID): boolean => {
const extension = extensions.value.find(ext => ext.id === id)
return extension?.enabled ?? false
}
/**
* 获取扩展配置
*/
@@ -61,16 +34,10 @@ export const useExtensionStore = defineStore('extension', () => {
return {
// 状态
extensions,
settings,
enabledExtensions,
// 计算属性
getExtensionsByCategory,
enabledExtensionsByCategory,
// 方法
loadExtensions,
isExtensionEnabled,
getExtensionConfig
}
})

34
frontend/src/views/editor/manager/ExtensionManager.ts
View File

@@ -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
}

63
frontend/src/views/editor/manager/factories.ts
View File

@@ -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) : ''
}
/**

1
frontend/src/views/settings/Settings.vue
View File

@@ -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' }
];

107
frontend/src/views/settings/pages/ExtensionsPage.vue Normal file
View File

@@ -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>