Merge branch 'master' into dev

Bumps [golang.org/x/crypto](https://github.com/golang/crypto) from 0.44.0 to 0.45.0.
- [Commits](https://github.com/golang/crypto/compare/v0.44.0...v0.45.0)

---
updated-dependencies:
- dependency-name: golang.org/x/crypto
  dependency-version: 0.45.0
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

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

@@ -1170,7 +1170,7 @@ export class Theme {
             this["type"] = ("" as ThemeType);
         }
         if (!("colors" in $$source)) {
-            this["colors"] = (new ThemeColorConfig());
+            this["colors"] = ({} as ThemeColorConfig);
         }
         if (!("isDefault" in $$source)) {
             this["isDefault"] = false;
@@ -1199,303 +1199,9 @@ export class Theme {
 }
 
 /**
- * ThemeColorConfig 主题颜色配置（与前端 ThemeColors 接口保持一致）
+ * ThemeColorConfig 使用与前端 ThemeColors 相同的结构，存储任意主题键值
  */
-export class ThemeColorConfig {
-    /**
-     * 主题基本信息
-     * 主题名称
-     */
-    "name": string;
-
-    /**
-     * 是否为深色主题
-     */
-    "dark": boolean;
-
-    /**
-     * 基础色调
-     * 主背景色
-     */
-    "background": string;
-
-    /**
-     * 次要背景色（用于代码块交替背景）
-     */
-    "backgroundSecondary": string;
-
-    /**
-     * 面板背景
-     */
-    "surface": string;
-
-    /**
-     * 下拉菜单背景
-     */
-    "dropdownBackground": string;
-
-    /**
-     * 下拉菜单边框
-     */
-    "dropdownBorder": string;
-
-    /**
-     * 文本颜色
-     * 主文本色
-     */
-    "foreground": string;
-
-    /**
-     * 次要文本色
-     */
-    "foregroundSecondary": string;
-
-    /**
-     * 注释色
-     */
-    "comment": string;
-
-    /**
-     * 语法高亮色 - 核心
-     * 关键字
-     */
-    "keyword": string;
-
-    /**
-     * 字符串
-     */
-    "string": string;
-
-    /**
-     * 函数名
-     */
-    "function": string;
-
-    /**
-     * 数字
-     */
-    "number": string;
-
-    /**
-     * 操作符
-     */
-    "operator": string;
-
-    /**
-     * 变量
-     */
-    "variable": string;
-
-    /**
-     * 类型
-     */
-    "type": string;
-
-    /**
-     * 语法高亮色 - 扩展
-     * 常量
-     */
-    "constant": string;
-
-    /**
-     * 存储类型（如 static, const）
-     */
-    "storage": string;
-
-    /**
-     * 参数
-     */
-    "parameter": string;
-
-    /**
-     * 类名
-     */
-    "class": string;
-
-    /**
-     * 标题（Markdown等）
-     */
-    "heading": string;
-
-    /**
-     * 无效内容/错误
-     */
-    "invalid": string;
-
-    /**
-     * 正则表达式
-     */
-    "regexp": string;
-
-    /**
-     * 界面元素
-     * 光标
-     */
-    "cursor": string;
-
-    /**
-     * 选中背景
-     */
-    "selection": string;
-
-    /**
-     * 失焦选中背景
-     */
-    "selectionBlur": string;
-
-    /**
-     * 当前行高亮
-     */
-    "activeLine": string;
-
-    /**
-     * 行号
-     */
-    "lineNumber": string;
-
-    /**
-     * 活动行号颜色
-     */
-    "activeLineNumber": string;
-
-    /**
-     * 边框和分割线
-     * 边框色
-     */
-    "borderColor": string;
-
-    /**
-     * 浅色边框
-     */
-    "borderLight": string;
-
-    /**
-     * 搜索和匹配
-     * 搜索匹配
-     */
-    "searchMatch": string;
-
-    /**
-     * 匹配括号
-     */
-    "matchingBracket": string;
-
-    /** Creates a new ThemeColorConfig instance. */
-    constructor($$source: Partial<ThemeColorConfig> = {}) {
-        if (!("name" in $$source)) {
-            this["name"] = "";
-        }
-        if (!("dark" in $$source)) {
-            this["dark"] = false;
-        }
-        if (!("background" in $$source)) {
-            this["background"] = "";
-        }
-        if (!("backgroundSecondary" in $$source)) {
-            this["backgroundSecondary"] = "";
-        }
-        if (!("surface" in $$source)) {
-            this["surface"] = "";
-        }
-        if (!("dropdownBackground" in $$source)) {
-            this["dropdownBackground"] = "";
-        }
-        if (!("dropdownBorder" in $$source)) {
-            this["dropdownBorder"] = "";
-        }
-        if (!("foreground" in $$source)) {
-            this["foreground"] = "";
-        }
-        if (!("foregroundSecondary" in $$source)) {
-            this["foregroundSecondary"] = "";
-        }
-        if (!("comment" in $$source)) {
-            this["comment"] = "";
-        }
-        if (!("keyword" in $$source)) {
-            this["keyword"] = "";
-        }
-        if (!("string" in $$source)) {
-            this["string"] = "";
-        }
-        if (!("function" in $$source)) {
-            this["function"] = "";
-        }
-        if (!("number" in $$source)) {
-            this["number"] = "";
-        }
-        if (!("operator" in $$source)) {
-            this["operator"] = "";
-        }
-        if (!("variable" in $$source)) {
-            this["variable"] = "";
-        }
-        if (!("type" in $$source)) {
-            this["type"] = "";
-        }
-        if (!("constant" in $$source)) {
-            this["constant"] = "";
-        }
-        if (!("storage" in $$source)) {
-            this["storage"] = "";
-        }
-        if (!("parameter" in $$source)) {
-            this["parameter"] = "";
-        }
-        if (!("class" in $$source)) {
-            this["class"] = "";
-        }
-        if (!("heading" in $$source)) {
-            this["heading"] = "";
-        }
-        if (!("invalid" in $$source)) {
-            this["invalid"] = "";
-        }
-        if (!("regexp" in $$source)) {
-            this["regexp"] = "";
-        }
-        if (!("cursor" in $$source)) {
-            this["cursor"] = "";
-        }
-        if (!("selection" in $$source)) {
-            this["selection"] = "";
-        }
-        if (!("selectionBlur" in $$source)) {
-            this["selectionBlur"] = "";
-        }
-        if (!("activeLine" in $$source)) {
-            this["activeLine"] = "";
-        }
-        if (!("lineNumber" in $$source)) {
-            this["lineNumber"] = "";
-        }
-        if (!("activeLineNumber" in $$source)) {
-            this["activeLineNumber"] = "";
-        }
-        if (!("borderColor" in $$source)) {
-            this["borderColor"] = "";
-        }
-        if (!("borderLight" in $$source)) {
-            this["borderLight"] = "";
-        }
-        if (!("searchMatch" in $$source)) {
-            this["searchMatch"] = "";
-        }
-        if (!("matchingBracket" in $$source)) {
-            this["matchingBracket"] = "";
-        }
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new ThemeColorConfig instance from a string or object.
-     */
-    static createFrom($$source: any = {}): ThemeColorConfig {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new ThemeColorConfig($$parsedSource as Partial<ThemeColorConfig>);
-    }
-}
+export type ThemeColorConfig = { [_: string]: any };
 
 /**
  * ThemeType 主题类型枚举
@@ -1636,6 +1342,11 @@ var $$createType6 = (function $$initCreateType6(...args): any {
 });
 const $$createType7 = $Create.Map($Create.Any, $Create.Any);
 const $$createType8 = HotkeyCombo.createFrom;
-const $$createType9 = ThemeColorConfig.createFrom;
+var $$createType9 = (function $$initCreateType9(...args): any {
+    if ($$createType9 === $$initCreateType9) {
+        $$createType9 = $$createType7;
+    }
+    return $$createType9(...args);
+});
 const $$createType10 = GithubConfig.createFrom;
 const $$createType11 = GiteaConfig.createFrom;

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

@@ -18,23 +18,10 @@ import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/applic
 import * as models$0 from "../models/models.js";
 
 /**
- * GetAllThemes 获取所有主题
+ * GetThemeByName 通过名称获取主题覆盖，若不存在则返回 nil
  */
-export function GetAllThemes(): Promise<(models$0.Theme | null)[]> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2425053076) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType2($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
-/**
- * GetThemeByID 根据ID或名称获取主题
- * 如果 id > 0，按ID查询；如果 id = 0，按名称查询
- */
-export function GetThemeByIdOrName(id: number, ...name: string[]): Promise<models$0.Theme | null> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(127385338, id, name) as any;
+export function GetThemeByName(name: string): Promise<models$0.Theme | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1938954770, name) as any;
     let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType1($result);
     }) as any;
@@ -43,10 +30,10 @@ export function GetThemeByIdOrName(id: number, ...name: string[]): Promise<model
 }
 
 /**
- * ResetTheme 重置主题为预设配置
+ * ResetTheme 删除指定主题的覆盖配置
  */
-export function ResetTheme(id: number, ...name: string[]): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1806334457, id, name) as any;
+export function ResetTheme(name: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1806334457, name) as any;
     return $resultPromise;
 }
 
@@ -59,7 +46,7 @@ export function ServiceShutdown(): Promise<void> & { cancel(): void } {
 }
 
 /**
- * ServiceStartup 服务启动时初始化
+ * ServiceStartup 服务启动
  */
 export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(2915959937, options) as any;
@@ -67,14 +54,13 @@ export function ServiceStartup(options: application$0.ServiceOptions): Promise<v
 }
 
 /**
- * UpdateTheme 更新主题
+ * UpdateTheme 保存或更新主题覆盖
  */
-export function UpdateTheme(id: number, colors: models$0.ThemeColorConfig): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(70189749, id, colors) as any;
+export function UpdateTheme(name: string, colors: models$0.ThemeColorConfig): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(70189749, name, colors) as any;
     return $resultPromise;
 }
 
 // Private type creation functions
 const $$createType0 = models$0.Theme.createFrom;
 const $$createType1 = $Create.Nullable($$createType0);
-const $$createType2 = $Create.Array($$createType1);

frontend/docs/.vitepress/config.ts

@@ -93,32 +93,13 @@ export default defineConfig({
                             items: [
                                 {text: '简介', link: '/zh/guide/introduction'},
                                 {text: '安装', link: '/zh/guide/installation'},
-                                {text: '快速开始', link: '/zh/guide/getting-started'},
-                                {text: '界面总览', link: '/zh/guide/ui-overview'},
-                                {text: '块语法与结构', link: '/zh/guide/block-syntax'}
+                                {text: '快速开始', link: '/zh/guide/getting-started'}
                             ]
                         },
                         {
-                            text: '编辑与效率',
+                            text: '功能特性',
                             items: [
-                                {text: '键盘快捷键', link: '/zh/guide/keyboard-shortcuts'},
-                                {text: '多窗口与标签页', link: '/zh/guide/multiwindow-tabs'},
-                                {text: '扩展与插件', link: '/zh/guide/extensions'},
-                                {text: 'HTTP 客户端', link: '/zh/guide/http-client'}
-                            ]
-                        },
-                        {
-                            text: '个性化与数据',
-                            items: [
-                                {text: '设置与配置', link: '/zh/guide/settings'},
-                                {text: '主题与外观', link: '/zh/guide/themes'},
-                                {text: '备份与更新', link: '/zh/guide/backup-update'}
-                            ]
-                        },
-                        {
-                            text: '问题处理',
-                            items: [
-                                {text: '常见问题与故障排查', link: '/zh/guide/troubleshooting'}
+                                {text: '功能概览', link: '/zh/guide/features'}
                             ]
                         }
                     ]

frontend/docs/src/zh/guide/backup-update.md

@@ -1,60 +0,0 @@
-# 备份与更新
-
-![备份更新占位](/img/placeholder-backup.png)
-> 替换为备份设置、推送状态、更新提示的截图。
-
-## Git 备份
-`BackupService` 将 `dataPath` 转化为 Git 仓库，并提供自动/手动推送。
-
-### 初始化
-1. 在设置 > 备份中开启「启用备份」。
-2. 填写远程仓库 URL（HTTPS 或 SSH）。
-3. 选择认证方式：
-   - **Token**：适用于 GitHub/Gitea https 仓库。
-   - **SSH Key**：指定私钥路径和 passphrase。
-   - **用户名/密码**：适合自建 HTTP 仓库。
-4. 点击“测试连接”（按钮在计划中，可先在终端测试）。
-
-### 自动备份
-- 勾选 “自动备份” + 设置 `BackupInterval`（分钟）。
-- 服务会创建 ticker 定时 `git add -> commit -> push`。
-- Commit 消息形如 `Auto backup <timestamp>`，包含 `voidraft.db`, `extensions.json`, `config.json`, `voidraft_data.bin`。
-
-### 手动推送
-- 打开工具栏消息中心或设置页点击“立即推送”。
-- `backupStore.pushToRemote` 会显示状态气泡（成功/失败提示 3~5 秒）。
-
-### 常见问题
-| 提示 | 解决 |
-| --- | --- |
-| `repository not found` | 检查 Repo URL 与权限，必要时创建空仓库 |
-| `authentication required` | 选择正确认证方式，确认 token scope（需 repo 权限） |
-| `auto backup stopped` | 查看日志，可能是网络不通或凭据失效；修改配置后服务会自动重启 |
-
-## 自动更新
-`SelfUpdateService` 负责检测、下载、应用新版。
-
-### 检查更新
-- 启动时若勾选 “自动更新” 会自动检查。
-- 也可在设置 > 更新点击 “检查更新” 或在工具栏更新图标处触发。
-- 服务优先访问 `primarySource`，失败时回退 `backupSource`。
-
-### 下载与应用
-1. 检测到更新后，界面提示版本号与变更信息（从 Release Notes 获取）。
-2. 点击 “下载并安装” 后，后台执行下载，完成后提示“准备重启”。
-3. 选择 “立即重启” 将调用 `RestartApplication`，自动重新打开上次的文档。
-4. 若启用了 “更新前备份”，在下载前会触发一次 Git push。
-
-### 失败处理
-| 场景 | 建议 |
-| --- | --- |
-| 下载失败 | 检查网络/代理，切换至备用源 |
-| 校验失败 | 删除 `%LOCALAPPDATA%/voidraft/update-cache` 再重试 |
-| 应用后无法启动 | 从 Git 备份回滚数据，下载旧版本安装包覆盖 |
-
-## 发布渠道
-- 官方 GitHub Releases：`https://github.com/landaiqing/voidraft/releases`
-- 自建 Gitea：`https://git.landaiqing.cn/landaiqing/voidraft`
-- 可在设置中替换 Owner/Repo/BaseURL，以指向企业私有镜像。
-
-> 建议将备份仓库设为私有，并在更新前后验证数据完整性。若要接入 S3/OSS 等备份方式，可关注 roadmap 或自行扩展。

frontend/docs/src/zh/guide/block-syntax.md

@@ -1,78 +0,0 @@
-# 块语法与结构
-
-![块语法占位](/img/placeholder-block-flow.png)
-> 替换为展示分隔符（`∞∞∞language`）、块内容、语言标签的截图。
-
-## 结构定义
-每个块都由 **分隔符 + 内容** 组成：
-
-```
-∞∞∞language[-a]\n
-<内容>
-```
-
-- `language`：`lang-parser/languages.ts` 中的 token，例如 `text`、`javascript`、`python`、`md`、`http`、`math`、`sql`。
-- `-a`：可选自动检测后缀，表示忽略显式语言，由 `lang-detect/autodetect.ts` 根据内容猜测。
-- 内容允许空行；块之间无需额外空格。
-
-`parser.ts` 会将块解析为：
-```ts
-{
-  language: { name: "javascript", auto: false },
-  delimiter: { from, to },
-  content: { from, to },
-  range: { from, to }
-}
-```
-这些字段供格式化、HTTP 运行、块操作等扩展示例使用。
-
-## 快捷命令
-| 命令 | 默认快捷键 | 说明 |
-| --- | --- | --- |
-| blockAddAfterCurrent | `Ctrl+Enter` | 插入新块（下方） |
-| blockAddBeforeCurrent | `Ctrl+Shift+Enter` | 插入新块（上方） |
-| blockGotoPrevious/Next | `Alt+↑ / Alt+↓` | 在块之间跳转 |
-| blockSelectAll | `Ctrl+Shift+A` | 选中当前块（含分隔符） |
-| blockDelete | `Alt+Delete` | 删除整个块 |
-| blockMoveUp/Down | `Ctrl+Shift+↑ / Ctrl+Shift+↓` | 重排块顺序 |
-| blockFormat | `Ctrl+Shift+F` | 针对当前块执行 Prettier |
-
-## 语言与能力矩阵
-| 语言 | 适配特性 |
-| --- | --- |
-| `text`/`note` | 基础文本，没有特殊扩展 |
-| `md` | Markdown 预览、checkbox、高亮 |
-| `javascript`/`typescript`/`json` | Prettier 格式化、彩虹括号、折叠、颜色选择 |
-| `go`/`rust`/`python`/`java` | 高亮、折叠、自动缩进、语法跳转 |
-| `http` | HTTP DSL、变量、响应插入（详见 [HTTP 客户端](/zh/guide/http-client)）|
-| `math` | `mathBlock` 运行器，支持 `prev` 引用上一次结果 |
-| `sql`/`yaml`/`toml` | 语法高亮、格式化（由 Prettier/插件支持） |
-
-> 若需要不在列表中的语言，可先使用 `text` 块输入，再在工具栏搜索语言名；也可以在 `lang-parser/languages.ts` 中添加条目。
-
-## 自动检测策略
-- 当分隔符以 `∞∞∞text-a` 写成时，`AUTO_DETECT_SUFFIX` 生效，`lang-detect` 会基于内容统计 + Levenshtein 距离预测语言。
-- 自动结果会写入块状态，但不会覆盖分隔符原文，因此可通过工具栏明确指定。
-
-## 特殊块
-### HTTP 块
-- 语法位于 `extensions/httpclient/language`，支持 `@var/@json/@form/@multipart` 等指令。
-- 运行器会在块尾生成 `### Response`，包含状态码、耗时、headers、body。
-
-### 数学块
-- 语言设为 `math`，逐行计算。
-- `prev` 变量表示上一行结果，可完成链式运算。
-- 结果挂件可点击复制，或显示格式化/定点值。
-
-### Markdown 块
-- 工具栏中的 Preview 按钮会调用 `toggleMarkdownPreview`，右侧打开面板。
-- 预览状态按文档隔离，不会影响其他文档。
-
-## 分隔符校验
-- `parser.ts` 暴露 `isValidDelimiter` 方法，格式错误时分隔符会以红色底纹标记。
-- 复制/剪切操作会自动扩选到整个块，确保分隔符完整。
-
-## 维护建议
-- 保持每个逻辑主题占用一个块，并用 `md` 块写标题。
-- 大量多语言内容时，可用 `text` + 自动检测，待语言确定后再改分隔符。
-- 若文档出现“无法解析块”提示，可运行 `格式化文档` 或在命令面板触发“重建语法树”。

frontend/docs/src/zh/guide/extensions.md

@@ -1,42 +0,0 @@
-# 扩展与插件
-
-![扩展占位](/img/placeholder-extensions.png)
-> 替换为展示扩展设置面板或功能合集（小地图、搜索、翻译）的截图。
-
-voidraft 的扩展系统由 `internal/models/extensions.go` + 前端 `ExtensionManager` 驱动。扩展配置存储在 `%USERPROFILE%/.voidraft/data/extensions.json`，可在设置页面勾选启用或调整参数。
-
-## 核心扩展
-| 扩展 ID | 功能 | 关键文件 |
-| --- | --- | --- |
-| `editor` | 基础 CodeMirror 行为、光标保护、滚轮缩放 | `frontend/src/views/editor/basic/*` |
-| `codeblock` | 块解析、拖拽、复制、格式化、数学、HTTP DSL | `extensions/codeblock` |
-| `vscodeSearch` | VSCode 风格搜索替换面板 | `extensions/vscodeSearch` |
-| `markdownPreview` | Markdown 实时预览 | `extensions/markdownPreview` |
-
-## 编辑增强
-- **Rainbow Brackets (`rainbowBrackets`)**：彩虹色括号匹配。
-- **Fold (`fold`)**：代码折叠/展开，支持 `Ctrl+Alt+[`/`]`。
-- **Hyperlink (`hyperlink`)**：识别 URL/邮箱，`Ctrl+Click` 打开。
-- **Color Selector (`colorSelector`)**：悬浮配色器，支持 HEX/RGB/HSL。
-- **Checkbox (`checkbox`)**：Markdown 任务列表交互式勾选。
-- **Text Highlight (`textHighlight`)**：`Mod+Shift+H` 快速标记重点，可自定义颜色/透明度。
-
-## 工具扩展
-- **Translator (`translator`)**：选区翻译；配置项包括默认翻译器、最短/最长字符数。后端集成 Bing/Google/Youdao/DeepL/TartuNLP。
-- **Minimap (`minimap`)**：右侧迷你地图，支持悬浮/常驻、显示字符/块，突出当前选区。
-- **Search (`search`)**：补充 VSCode 风格搜索，暴露命令给快捷键系统。
-- **HTTP Client (`httpclient`)**：DSL + 运行器，详见 [HTTP 客户端](/zh/guide/http-client)。
-
-## 未来扩展（欢迎参与）
-- Vim / Emacs 键位层（正在计划）。
-- 自定义命令面板（Command Palette）。
-- 代码片段/模板库扩展。
-- AI 助手（文生代码/注释）。
-
-## 开发者指南概述
-1. **注册扩展**：在 `extensionManager.registerFactory` 中添加自定义扩展工厂。
-2. **配置项**：在 `extensions.json` 中声明默认配置，并在设置面板暴露 UI（Vue 组件）。
-3. **热更新**：调用 `manager.updateExtensionImmediate(id, enabled, config)` 实时切换，无需刷新窗口。
-4. **后端交互**：通过 `ExtensionService.UpdateExtensionState` 将配置写入 SQLite。
-
-> 如果需要编写自用扩展，可 fork 项目在 `frontend/src/views/editor/extensions` 中添加文件，再通过 PR 贡献给社区。

frontend/docs/src/zh/guide/features.md

@@ -1,86 +1,163 @@
 # 功能特性
 
-![扩展能力占位](/img/placeholder-extensions.png)
-> 替换为展示彩虹括号、小地图、搜索工具条等扩展组合的截图。
+探索 voidraft 的强大功能，让它成为开发者的优秀工具。
 
-## 1. 编辑体验
-### 块状编辑全流程
-- `∞∞∞language[-a]` 语法由 `codeblock/lang-parser` 解析，支持自动检测、分隔符校验、块范围缓存。
-- `blockState` 暴露 API（`getActiveBlock/getFirstBlock/getLastBlock`），供格式化、重排、复制、HTTP 执行等插件共享。
-- `mathBlock` 可在块尾展示计算结果，点击可复制；`CURRENCIES_LOADED` 注解在汇率更新时刷新缓存。
+## 块状编辑
 
-### 语言支持
-- 内建 30+ 语言模版（`lang-parser/languages.ts`），覆盖 JS/TS/HTML/CSS/Go/Rust/Python/SQL/YAML/HTTP/Markdown/Plain/Text/Math。
-- 语言切换下拉实时更新分隔符；支持自定义别名（例如 `∞∞∞shell`）。
+voidraft 的核心功能是其块状编辑系统：
 
-### 语法高亮与主题
-- `rainbowBracket`、`fold`、`hyperlink`、`colorSelector` 等扩展组合提供接近 VSCode 的体验。
-- `ThemeService` 预置 12+ 暗/亮主题，可在设置中克隆、修改 JSON 色板，并立即生效。
+- 每个块可以有不同的编程语言
+- 块之间由分隔符分隔（`∞∞∞语言`）
+- 快速在块之间导航
+- 独立格式化每个块
 
-### 文本统计与滚轮缩放
-- `statsExtension` 实时统计行数、字符数和选区，展示在状态栏。
-- `wheelZoomExtension` 让 `Ctrl + 鼠标滚轮` 调整字体大小，同时同步 `configStore`。
+## 语法高亮
 
-## 2. 高效工具箱
-### VSCode 式搜索替换
-- `extensions/vscodeSearch` 提供悬浮面板，支持大小写/整词/正则、向上/向下跳转、批量替换。
-- 对应快捷键：`Ctrl+F`、`Ctrl+H`、`Alt+Enter`（替换全部）。
+支持 30+ 种语言的专业语法高亮：
 
-### Markdown 预览
-- `panelStore` 为每个文档维护预览状态，保证不同文档互不影响。
-- 选中 Markdown 块后点击工具栏预览按钮即可在右侧展开实时渲染面板。
+- 自动语言检测
+- 可自定义配色方案
+- 支持嵌套语言
+- 代码折叠支持
 
-### HTTP 客户端
-- Request DSL + 运行器在 [专章](/zh/guide/http-client) 详细说明。
-- 支持变量、响应插入、多种请求体、定制 header、复制 cURL。
+## HTTP 客户端
 
-### 翻译助手
-- `translator` 扩展监听选区，符合长度阈值后显示按钮；由 `TranslationService` 调用 Bing/Google/Youdao/DeepL/TartuNLP。
-- 支持语种缓存、复制译文、切换译文方向。
+用于 API 测试的内置 HTTP 客户端：
 
-### 颜色与高亮
-- `colorSelector` 识别 `#fff/rgba/hsl`、打开取色器；`textHighlight` 用 `Mod+Shift+H` 标记重要行。
+### 请求类型
+- GET、POST、PUT、DELETE、PATCH
+- 自定义请求头
+- 多种请求体格式：JSON、FormData、URL 编码、XML、文本
 
-## 3. 复杂布局能力
-### 多窗口
-- `WindowService` 允许为任意文档创建独立 WebView，URL 自动携带 `?documentId=`。
-- `WindowSnapService` 根据主窗口位置吸附子窗口（上下左右+四角），并缓存尺寸、位置。
-- 支持全局热键（默认 `Alt+X`）一键显示或隐藏所有窗口。
+### 请求变量
+定义和重用变量：
 
-### 标签页
-- `tabStore` 通过 `enableTabs` 控制；支持拖拽排序、关闭其他/左侧/右侧标签。
-- 与多窗口互斥：当文档被新窗口接管后会从标签栏移除，避免重复。
+```http
+@var {
+  baseUrl: "https://api.example.com",
+  token: "your-api-token"
+}
 
-### 系统托盘与置顶
-- `TrayService` 控制关闭时隐藏到托盘或直接退出。
-- 工具栏提供图钉按钮，可即时切换 `AlwaysOnTop`（支持临时置顶和永久置顶）。
+GET "{{baseUrl}}/users" {
+  authorization: "Bearer {{token}}"
+}
+```
 
-## 4. 数据守护
-### SQLite + 自动迁移
-- `DatabaseService` 启动时执行 PRAGMA + 表结构校验，缺失字段自动 `ALTER TABLE`。
-- 默认生成 `documents/extensions/key_bindings/themes` 等表，支持软删除与锁定。
+### 响应处理
+- 查看格式化的 JSON 响应
+- 查看响应时间和大小
+- 检查响应头
+- 保存响应以供日后使用
 
-### Git 备份
-- `BackupService` 将 `dataPath` 初始化为 Git 仓库，支持 Token/SSHKey/用户名密码三种方式。
-- 自动任务按分钟运行（`BackupInterval`），包括 add/commit/push；也可从 UI 触发一次性 push。
+## 代码格式化
 
-### 配置快照
-- 所有设置存于 `config.json`，包含 `metadata.version/lastUpdated`，方便手工回滚。
-- `ConfigService.Watch` 为窗口吸附、托盘、热键等服务提供实时响应。
+集成 Prettier 支持：
 
-### 自动更新
-- `SelfUpdateService` 先检查主源（Gitea），失败再回退到 GitHub；下载完成后可一键「重启并更新」。
-- 更新前可选自动触发 Git 备份（`backupBeforeUpdate`）。
+- 保存时格式化（可选）
+- 格式化选区或整个块
+- 支持 JavaScript、TypeScript、CSS、HTML、JSON 等
+- 可自定义格式化规则
 
-## 5. 自动化与集成
-- **启动时动作**：可开启开机自启（`StartupService`）、默认最小化至托盘。
-- **HTTP 运行挂钩**：`response-inserter` 可在响应块尾部插入 `// @timestamp` 等自定义标记。
-- **Math/汇率**：`mathBlock` 可引用上一次结果 (`prev`)，配合 `CURRENCIES_LOADED` 注解支撑货币换算。
-- **系统信息**：`SystemService` 暴露内存、GC、Goroutine 数量，可在调试面板查看。
+## 编辑器扩展
 
-## 6. 可配置的快捷键
-- 详见 [键盘快捷键](/zh/guide/keyboard-shortcuts)。默认绑定定义在 `internal/models/key_bindings.go`，前端设置页可逐项修改、禁用。
+### VSCode 风格搜索
+- 查找和替换，支持正则表达式
+- 区分大小写和全字匹配选项
+- 跨所有块搜索
+
+### 小地图
+- 文档的鸟瞰图
+- 快速导航
+- 可自定义大小和位置
+
+### 彩虹括号
+- 彩色括号配对
+- 更容易匹配括号
+- 可自定义颜色
+
+### 颜色选择器
+- 可视化颜色选择
+- 支持 hex、RGB、HSL
+- 实时预览
+
+### 翻译工具
+- 翻译选定的文本
+- 支持多种语言
+- 快速键盘访问
+
+### 文本高亮
+- 高亮重要文本
+- 多种高亮颜色
+- 持久化高亮
+
+## 多窗口支持
+
+高效使用多个窗口：
+
+- 每个窗口都是独立的
+- 独立的文档
+- 同步的设置
+- 窗口状态持久化
+
+## 主题自定义
+
+完全控制编辑器外观：
+
+### 内置主题
+- 深色模式
+- 浅色模式
+- 根据系统自动切换
+
+### 自定义主题
+- 创建你自己的主题
+- 自定义每种颜色
+- 保存和分享主题
+- 导入社区主题
+
+## 自动更新系统
+
+通过自动更新保持最新：
+
+- 后台更新检查
+- 新版本通知
+- 一键更新
+- 更新历史
+- 支持多个更新源（GitHub、Gitea）
+
+## 数据备份
+
+使用基于 Git 的备份保护你的数据：
+
+- 自动备份
+- 手动触发备份
+- 支持 GitHub 和 Gitea
+- 多种认证方式（SSH、Token、密码）
+- 可配置备份间隔
+
+## 键盘快捷键
+
+广泛的键盘支持：
+
+- 可自定义快捷键
+- Vim/Emacs 按键绑定（计划中）
+- 快速命令面板
+- 上下文感知快捷键
+
+## 性能
+
+专为速度而构建：
+
+- 快速启动时间
+- 流畅滚动
+- 高效内存使用
+- 支持大文件
+
+## 隐私与安全
+
+你的数据是安全的：
+
+- 本地优先存储
+- 可选云备份
+- 无遥测或跟踪
+- 开源代码库
 
-## 7. 文档 & 帮助
-- 文档站以 VitePress 构建（`frontend/docs`），内置中英双语导航，可一键部署到 GitHub Pages。
-- `README` 与本文档同步介绍核心功能；建议将常用工作流截图补充到每个「图片占位」中。

frontend/docs/src/zh/guide/getting-started.md

@@ -1,82 +1,107 @@
 # 快速开始
 
-![块结构流程占位](/img/placeholder-block-flow.png)
-> 替换为展示块分隔符、语言标签、内容的截图，帮助读者直观理解 `∞∞∞language` 结构。
+学习使用 voidraft 的基础知识并创建你的第一个文档。
 
-## 5 分钟上手流程
-1. **启动应用**：等待加载动画结束，默认会打开 `default` 文档。
-2. **新建文档**：点击工具栏的文档列表按钮，输入标题后创建；也可在设置里开启标签页，以便同时挂载多个文档。
-3. **创建首个块**：
-   - 在空白处输入 `∞∞∞javascript` 并回车。
-   - 输入代码或文本，`CodeBlockExtension` 会自动匹配语法高亮。
-4. **格式化与预览**：
-   - 选中块后点击工具栏的「Format」或使用 `Ctrl+Shift+F`。
-   - 如果块语言是 `md`，可点击「Preview」按钮开启 Markdown 侧栏。
-5. **运行 HTTP 请求**：创建 `∞∞∞http` 块，填写请求，再点击行号旁的 Run 按钮即可获取响应。
-6. **打开第二窗口**：在文档列表中右键文档 -> “在新窗口中打开”。`WindowService` 会创建无边框窗口并自动贴靠主窗口。
+## 编辑器界面
 
-## 界面导览
-- **主编辑区**：CodeMirror 视图，支持鼠标滚轮 + `Ctrl` 缩放（`wheelZoomExtension`）。
-- **右侧小地图**：`extensions/minimap` 提供鸟瞰和选区同步。
-- **底部状态**：`editorStore.documentStats` 实时展示行数/字符/选区。
-- **工具栏**（`Toolbar.vue`）：包含文档切换、块语言下拉、窗口置顶、格式化、Markdown 预览、更新提示、进入设置等。
+当你打开 voidraft 时，你将看到：
 
-## 块的基本操作
-| 操作 | 快捷键 | 说明 |
-| --- | --- | --- |
-| 新建块（下方） | `Ctrl+Enter` | 在当前块后插入 `∞∞∞text-a` 分隔符 |
-| 新建块（上方） | `Ctrl+Shift+Enter` | 在当前块前插入 |
-| 跳到上/下一个块 | `Alt+Up / Alt+Down` | 通过 `blockGotoPrevious/Next` 命令 |
-| 删除块 | `Alt+Delete` | 仅删除块内容，不影响其他块 |
-| 块排序 | `Ctrl+Shift+↑/↓` | `moveLines` 结合块范围移动 |
-| 复制块 | `Ctrl+C`（光标在块上即可） | `copyPaste.ts` 自动扩展选区至整个块 |
+- **主编辑器**：编写和编辑的中心区域
+- **工具栏**：快速访问常用操作
+- **状态栏**：显示当前块的语言和其他信息
 
-## 自动语言与格式化
-- 当分隔符写成 `∞∞∞text-a` 时，会触发语言自动检测（`lang-detect/autodetect.ts`），常用于粘贴未知代码。
-- `formatCode.ts` 调用 Prettier，自动选择 parser；若语言不支持，会提示不可格式化。
-- 块语言可在工具栏下拉中修改，列表由 `lang-parser/languages.ts` 提供。
+## 创建代码块
 
-## Markdown / 待办
-1. 使用 `∞∞∞md` 分隔符。
-2. 在块内写 Markdown，点击工具栏预览按钮。
-3. 勾选/取消 Checkbox（`extensions/checkbox`）即可同步更新文本。
+voidraft 使用基于块的编辑系统。每个块可以有不同的语言：
 
-## 翻译与文本标注
-- 选中文本后会浮现翻译入口（`translator` 扩展），点击即可在块内查看结果、复制、切换目标语言。
-- `textHighlight` 扩展提供 `Mod+Shift+H` 高亮当前选区，颜色可在扩展设置中调整。
+1. 按 `Ctrl+Enter` 创建新块
+2. 输入 `∞∞∞` 后跟语言名称（例如 `∞∞∞javascript`）
+3. 在该块中开始编码
+
+### 支持的语言
+
+voidraft 支持 30+ 种编程语言，包括：
+- JavaScript、TypeScript
+- Python、Go、Rust
+- HTML、CSS、Sass
+- SQL、YAML、JSON
+- 以及更多...
+
+## 基本操作
+
+### 导航
+
+- `Ctrl+Up/Down`：在块之间移动
+- `Ctrl+Home/End`：跳转到第一个/最后一个块
+- `Ctrl+F`：在文档中搜索
+
+### 编辑
+
+- `Ctrl+D`：复制当前行
+- `Ctrl+/`：切换注释
+- `Alt+Up/Down`：向上/向下移动行
+- `Ctrl+Shift+F`：格式化代码（如果语言支持 Prettier）
+
+### 块管理
+
+- `Ctrl+Enter`：创建新块
+- `Ctrl+Shift+Enter`：在上方创建块
+- `Alt+Delete`：删除当前块
+
+## 使用 HTTP 客户端
+
+voidraft 包含用于测试 API 的内置 HTTP 客户端：
+
+1. 创建一个 HTTP 语言的块
+2. 编写你的 HTTP 请求：
 
-## HTTP 客户端概览
 ```http
-∞∞∞http
-@var {
-  baseUrl: "https://api.example.com",
-  token: "{{secrets.token}}"
-}
-
-POST "{{baseUrl}}/users" {
-  authorization: "Bearer {{token}}"
+POST "https://api.example.com/users" {
   content-type: "application/json"
-
+  
   @json {
-    name: "voidraft",
-    role: "developer"
+    name: "张三",
+    email: "zhangsan@example.com"
   }
 }
 ```
-- `parser/request-parser.ts` 会将变量与请求体解析为结构化对象。
-- 点击 gutter Run 获取响应，`response-inserter.ts` 会将结果写入 `### Response` 区块。
 
-## 自动保存与版本安全
-- `editorStore` 为每个文档维护 `autoSaveTimer`，默认 2000 ms，可在设置 > 编辑 调整。
-- `documentStates` 记录每个文档的光标位置，切换文档或重启应用都会恢复。
-- 若开启 Git 备份，可在工具栏或设置中查看最近一次 `push` 是否成功。
+3. 点击运行按钮执行请求
+4. 内联查看响应
 
-## 最佳实践
-- 使用 Markdown 块为每组代码加标题/注释，便于导航。
-- 重要文档启用“锁定”以避免被删除（文档右键菜单）。
-- 多窗口 + 吸附用于常驻参考资料，标签页用于在一个窗口内快速切换。
-- 善用「窗口置顶」图钉，让 voidraft 叠放在 VSCode/浏览器之上。
+## 多窗口支持
+
+同时处理多个文档：
+
+1. 转到 `文件 > 新建窗口`（或 `Ctrl+Shift+N`）
+2. 每个窗口都是独立的
+3. 更改会自动保存
+
+## 自定义主题
+
+个性化你的编辑器：
+
+1. 打开设置（`Ctrl+,`）
+2. 转到外观
+3. 选择主题或创建自己的主题
+4. 根据你的偏好自定义颜色
+
+## 键盘快捷键
+
+学习基本快捷键：
+
+| 操作 | 快捷键 |
+|-----|--------|
+| 新建窗口 | `Ctrl+Shift+N` |
+| 搜索 | `Ctrl+F` |
+| 替换 | `Ctrl+H` |
+| 格式化代码 | `Ctrl+Shift+F` |
+| 切换主题 | `Ctrl+Shift+T` |
+| 命令面板 | `Ctrl+Shift+P` |
+
+## 下一步
+
+现在你已经了解了基础知识：
+
+- 详细探索[功能特性](/zh/guide/features)
 
-接下来：
-- [界面总览](/zh/guide/ui-overview)
-- [块语法与结构](/zh/guide/block-syntax)

frontend/docs/src/zh/guide/http-client.md

@@ -1,72 +0,0 @@
-# HTTP 客户端
-
-![HTTP 客户端占位](/img/placeholder-http.png)
-> 替换为 HTTP 块 + 响应卡片的截图。
-
-voidraft 将 HTTP 测试写成块（`∞∞∞http`），语法与 JetBrains Http Client 类似。解析与执行由 `frontend/src/views/editor/extensions/httpclient` 完成。
-
-## 基本语法
-```http
-∞∞∞http
-GET "https://api.example.com/users" {
-  accept: "application/json"
-}
-```
-- 方法 + URL 必须用双引号包裹。
-- Header 以 `key: "value"` 格式编写。
-- 请求体使用内联指令（见下文）。
-
-## 变量与环境
-```http
-@var {
-  baseUrl: "https://api.example.com",
-  token: "{{secrets.token}}"
-}
-
-GET "{{baseUrl}}/users" {
-  authorization: "Bearer {{token}}"
-}
-```
-- `@var` 块使用 JSON 语法。
-- 变量在任意请求中以 `{{name}}` 引用。
-- `variable-resolver.ts` 支持嵌套、默认值、外部 secrets 映射。
-
-## 请求体助手
-| 指令 | 示例 | 说明 |
-| --- | --- | --- |
-| `@json` | `@json { "name": "voidraft" }` | 自动 `content-type: application/json` 并格式化 |
-| `@form` | `@form { username: "demo" }` | 转为 `application/x-www-form-urlencoded` |
-| `@multipart` | `@multipart { file: @"C:\tmp\a.txt" }` | 读取文件、多段表单 |
-| `@text` | `@text <raw body>` | 自由文本 |
-
-## 运行与响应
-1. 将光标置于 HTTP 块内。
-2. 点击行号左侧的 Run（三角形图标），或按下自定义快捷键。
-3. 运行结果会插入到块尾的 `### Response` 中，包含：
-   - 状态行 + 响应时间 + 体积。
-   - Headers（可折叠）。
-   - 响应体（自动格式化 JSON / XML / HTML / Text）。
-   - 复制、另存为、再次发送等快捷按钮。
-
-## 多请求文档
-- 每个 `∞∞∞http` 块被视为独立请求。
-- `request-parser.ts` 会解析同一块内的多个请求（以 `###` 分隔）。
-- 使用 Markdown 块写注释或分组标题。
-
-## 变量注入顺序
-1. 块内 `@var`。
-2. 文档级变量（计划中）。
-3. 环境变量（`EnvironmentService` 预留）。
-
-## 调试技巧
-- 运行器会在控制台打印完整请求信息，可通过 `wails3 dev` 查看。
-- 如果响应过大，可右键响应块选择“折叠正文”或“导出到文件”。
-- 网络错误会在响应卡片顶部以红条展示，内容来自 `HttpClientService`。
-- 需要代理时确保系统代理已设置，voidraft 会自动继承。
-
-## 与其他功能配合
-- 运行结果可直接与 Markdown/代码块混排，形成 API 使用手册。
-- 配合 Git 备份可版本化 API 调试记录。
-- 可将响应复制到其他块（例如 JSON → Prettier 之后用于 mock）。
-
-> 欢迎在 Issue 中提交你希望支持的额外 DSL 指令（例如 GraphQL、WebSocket、gRPC）。

frontend/docs/src/zh/guide/installation.md

@@ -1,77 +1,63 @@
 # 安装
 
-![安装流程占位](/img/placeholder-settings.png)
-> 替换为安装向导或设置页截图，展示关键开关（置顶、数据目录、自动更新等）。
+本指南将帮助你在系统上安装 voidraft。
 
-## 系统要求（2025.11）
-| 项目 | 最低配置 | 推荐配置 |
-| --- | --- | --- |
-| 操作系统 | Windows 10 19045 / Windows 11 21H2 | Windows 11 23H2（macOS/Linux 版本开发中） |
-| CPU | x86_64 双核 | 4 核以上 |
-| 内存 | 4 GB | ≥ 8 GB |
-| 磁盘空间 | 200 MB（含 SQLite 数据） | 1 GB 以上以保存附件/备份 |
-| 运行环境 | Go 1.21+, Node.js 18+（仅开发者编译时需要） | 同左 + pnpm 8 用于前端 |
+## 系统要求
 
-## 获取发行版
-1. 打开 [GitHub Releases](https://github.com/landaiqing/voidraft/releases) 或自建 Gitea 镜像。
-2. 下载 `voidraft-windows-amd64-installer.exe`（安装版）或 `voidraft-portable.zip`（绿色版）。
-3. （可选）验证 SHA256：
-   ```powershell
-   Get-FileHash .\voidraft-windows-amd64-installer.exe -Algorithm SHA256
-   ```
-4. 双击安装包，按向导完成安装；或解压绿色版至任意目录并创建快捷方式。
+- **操作系统**：Windows 10 或更高版本（macOS 和 Linux 支持计划中）
+- **内存**：最低 4GB，推荐 8GB
+- **磁盘空间**：200MB 可用空间
 
-## 首次启动流程
-1. 启动后将创建数据目录：`%USERPROFILE%\.voidraft\data`（含 `voidraft.db`、`config.json`、`extensions.json`）。
-2. 默认会生成 `default` 文档和一段示例块 `∞∞∞text-a`。
-3. 若检测到旧版本数据，`ConfigMigrationService` 会自动迁移字段；`DataMigrationService` 确保表结构一致。
-4. 首次运行建议立刻打开「设置 > 备份」配置远程 Git 仓库。
+## 下载
 
-## 开发者手动构建
-```bash
-# 克隆项目
- git clone https://github.com/landaiqing/voidraft.git
- cd voidraft
+访问[发布页面](https://github.com/landaiqing/voidraft/releases)并下载适合你平台的最新版本：
 
-# 安装前端依赖
- cd frontend
- npm install
- npm run build
- cd ..
+- **Windows**：`voidraft-windows-amd64-installer.exe`
 
-# 构建/运行桌面应用
- wails3 dev        # 启动调试
- wails3 package    # 生成安装包（输出位于 bin/）
-```
-> 若遇到 `wails3` 未找到，请先执行 `go install github.com/wailsapp/wails/v3/cmd/wails3@latest`。
+## 安装步骤
 
-## 数据目录与可执行文件
-| 类型 | 默认位置 | 说明 |
-| --- | --- | --- |
-| 安装目录 | `C:\Program Files\voidraft` | 包含主程序与嵌入式前端资源 |
-| 数据目录 | `C:\Users\<you>\.voidraft\data` | 可在设置 > 通用修改 `dataPath`，修改后需重启 |
-| 备份仓库 | `dataPath/.git` | `BackupService` 初始化或使用现有仓库 |
-| 日志 | `%LOCALAPPDATA%/voidraft/logs/*.log` | 通过 Wails `application.Log` 输出 |
+### Windows
 
-## 常用 CLI 检查
-```powershell
-# 查看版本
-& "C:\Program Files\voidraft\voidraft.exe" --version
+1. 从发布页面下载安装程序
+2. 运行 `voidraft-windows-amd64-installer.exe` 文件
+3. 按照安装向导操作
+4. 从开始菜单或桌面快捷方式启动 voidraft
 
-# 清理缓存（若前端异常）
-Remove-Item "$env:APPDATA\voidraft\Cache" -Recurse -Force
-```
+## 首次启动
 
-## 防火墙与代理
-- voidraft 仅在使用 HTTP 客户端、更新检测、REST 翻译器时发起网络请求。
-- 若处于企业代理，请在系统代理中放行 `voidraft.exe` 或设置环境变量 `HTTP(S)_PROXY`，HTTP 客户端会继承系统代理。
+首次启动 voidraft 时：
 
-## 常见安装问题
-| 症状 | 处理方案 |
-| --- | --- |
-| 安装向导被安全策略阻止 | 使用签名哈希进行白名单设置或改用便携版 |
-| 启动后白屏 | 删除 `%APPDATA%/voidraft/Cache`，确保显卡驱动支持 WebView2 |
-| `wails3 dev` 报错缺少 WebView2 | 安装 [WebView2 Runtime](https://developer.microsoft.com/en-us/microsoft-edge/webview2/) |
-| 便携版无法写入 | 检查解压目录是否具有写权限，或在设置内切换 `dataPath` 至可写分区 |
+1. 应用程序将创建一个数据目录来存储你的文档
+2. 你将看到带有欢迎块的主编辑器界面
+3. 开始输入或创建你的第一个代码块！
+
+## 配置
+
+voidraft 将其配置和数据存储在：
+
+- **Windows**：`%APPDATA%/voidraft/`
+
+你可以自定义各种设置，包括：
+- 编辑器主题（深色/浅色模式）
+- 代码格式化偏好
+- 备份设置
+- 键盘快捷键
+
+## 更新
+
+voidraft 包含自动更新功能，会在有新版本时通知你。你可以：
+
+- 从设置中手动检查更新
+- 启用自动更新
+- 选择首选的更新源
+
+## 故障排除
+
+如果在安装过程中遇到任何问题：
+
+1. 确保你有管理员权限
+2. 检查杀毒软件是否阻止了安装
+3. 访问我们的 [GitHub issues](https://github.com/landaiqing/voidraft/issues) 页面寻求帮助
+
+下一步：[快速开始 →](/zh/guide/getting-started)
 
-> 继续阅读：[快速开始](/zh/guide/getting-started)

frontend/docs/src/zh/guide/introduction.md

@@ -1,73 +1,50 @@
 # 简介
 
-> voidraft 是一款面向开发者的「块式工作台」，用 CodeMirror 6 打造 Heynote 风格的体验，并结合 Wails3 + Go 后端提供系统托盘、全局热键、自动备份等桌面级能力。
+欢迎使用 voidraft —— 一个专为开发者设计的优雅文本片段记录工具。
 
-![主界面总览占位](/img/placeholder-main-ui.png)
-> 将 `/img/placeholder-main-ui.png` 替换为真实的应用主界面截图，演示数据面板、工具栏和右侧小地图。
+## 什么是 voidraft？
 
-## 产品定位
-- **核心诉求**：在一处快速记录代码/配置/API 响应/待办清单，并能随时重排、格式化、运行或搜索。
-- **目标用户**：需要跨项目管理零碎文本的开发者、DevOps、测试或产品技术写作者。
-- **设计理念**：所有内容都拆成可重排的块（`∞∞∞language`）；每个块拥有独立语言、格式化器与扩展；多窗口/多标签保证同一份数据的不同视角。
+voidraft 是一个现代化的桌面应用程序，帮助开发者管理文本片段、代码块、API 响应、会议笔记和日常待办事项。它为开发工作流程提供了流畅而优雅的编辑体验和强大的功能。
 
-## 面向场景
-1. **临时代码/脚本草稿**：支持 30+ 语言高亮、Prettier 格式化、彩虹括号、文本高亮。
-2. **API 调试台**：HTTP 块内置运行器、变量解析、响应插入；请求和响应始终和文档共存。
-3. **会议 & 需求记录**：Markdown 块 + Checkbox 扩展 + 颜色标注快速整理想法。
-4. **翻译与研究**：选中文本即可调 Bing/Google/DeepL/TartuNLP/有道翻译，结果内联呈现。
-5. **多窗口资料墙**：重要文档可弹出独立无边框窗口，依附（Snap）在主窗口侧边。
+## 核心特性
 
-## 核心概念
-### 块式编辑器
-- 解析器位于 `frontend/src/views/editor/extensions/codeblock`，依赖自研 Lezer 语法树确保 `∞∞∞` 分隔符稳定。
-- 块结构（语言、是否自动检测、正文范围）存入 `blockState`，供格式化、移动、复制、HTTP 执行等扩展复用。
-- `math` 块使用 `math.js` 运行器，`http` 块调用 request parser + gutter run widget。
+### 块状编辑模式
 
-### 扩展驱动
-- 后端通过 `internal/models/extensions.go` 定义扩展 ID/配置，`ExtensionService` 负责持久化。
-- 前端 `ExtensionManager` 根据扩展配置动态拼装 CodeMirror Extension pipeline（小地图、VSCode Search、Translator、Color Picker 等）。
-- 所有扩展都可在设置页热切换，立即同步到当前与所有已打开的编辑器实例。
+voidraft 使用受 Heynote 启发的独特块状编辑系统。你可以将内容分割为独立的代码块，每个块具有：
+- 不同的编程语言设置
+- 语法高亮
+- 独立格式化
+- 轻松在块之间导航
 
-### 数据与安全
-- SQLite 数据保存在 `%USERPROFILE%/.voidraft/data/voidraft.db`（可在设置中自定义 dataPath）。
-- `DatabaseService` 自动迁移表结构，`DocumentService` 提供软删除/锁定机制避免误删默认草稿。
-- `BackupService` 基于 go-git（SSH/Token/用户名密码）把 dataPath git 化，可按分钟全量提交、推送到 GitHub/Gitea 等。
-- `SelfUpdateService` 同时轮询 GitHub/Gitea Release，支持自动下载 + 一键重启。
+### 开发者工具
 
-## 系统架构概览
-| 层级 | 说明 | 关键路径 |
-| --- | --- | --- |
-| 桌面容器 | Wails3 + Go 1.21，负责窗口、托盘、热键、服务注入 | `main.go`, `internal/services` |
-| 后端服务 | Config/Document/Extension/Theme/Backup/Window/Hotkey/Translation 等 | `internal/services/*.go` |
-| 数据模型 | Document、Theme、KeyBinding、GitBackup、Config | `internal/models` |
-| 前端应用 | Vue 3 + Vite + Pinia + vue-router | `frontend/src` |
-| 编辑器内核 | CodeMirror 6 扩展及自研块解析、HTTP DSL、Markdown 预览 | `frontend/src/views/editor` |
-| 文档站点 | VitePress，多语言导航 | `frontend/docs` |
+- **HTTP 客户端**：直接在编辑器中测试 API
+- **代码格式化**：内置 Prettier 支持多种语言
+- **语法高亮**：支持 30+ 种编程语言
+- **自动语言检测**：自动识别代码块语言类型
 
-## 模块速览
-- **文档存储**：`DocumentService` 支持创建/重命名/软删除/恢复、多窗口并发打开同一文档。
-- **编辑器实例管理**：`editorStore` 使用 LRU 缓存 + 自动保存计时器，确保在多文档切换时保留光标位置、未保存内容。
-- **HTTP 客户端**：`extensions/httpclient` 包括 Lezer 语法、变量解析、响应插入与运行 gutter；支持 JSON/FormData/GraphQL 等多体格式。
-- **Markdown 预览**：`panelStore` 管理逐文档的预览状态，可随块实时刷新。
-- **多窗口/吸附**：`WindowService` + `WindowSnapService` 根据主窗口位置智能吸附子窗口、自动记忆尺寸。
-- **全局热键**：`HotkeyService` 监听系统级组合键，切换窗口显隐（默认 Alt+X，可配置）。
-- **系统托盘**：`systray.SetupSystemTray` 注入显示/隐藏、退出、开机启动等操作。
-- **翻译生态**：`TranslationService` 聚合 Bing/Google/Youdao/DeepL/TartuNLP，前端 `translator` 扩展提供 Tooltip + 复制。
-- **主题与外观**：`ThemeService` 预置 12+ 主题，可重置/克隆；前端 `createThemeExtension` 即时应用。
+### 自定义
 
-## 数据流（从键盘到持久化）
-1. 用户按键 -> CodeMirror extensions 更新文档。
-2. `contentChangeExtension` 记录脏状态并刷新 `documentStats`（行数、字符数、选区字符数）。
-3. 触发自动保存计时器（默认 2s） -> `DocumentService.UpdateDocumentContent` 写入 SQLite。
-4. 若开启 Git 自动备份，每次 Commit 会序列化数据库 + 附带 `voidraft_data.bin`。
-5. 配置变更（Pinia store）通过 `ConfigService.Set` 传回 Go，并触发观察者（如 WindowSnap/Hotkey/Backup）。
+- **自定义主题**：创建并保存你自己的编辑器主题
+- **扩展功能**：丰富的编辑器扩展，包括小地图、彩虹括号、颜色选择器等
+- **多窗口**：同时处理多个文档
 
-## 版本节奏与路线图
-- ✅ 当前实现：多窗口、标签页、HTTP 客户端、Markdown Preview、数学块、彩虹括号、翻译、Git 备份、自动更新。
-- 🚧 进行中：自定义扩展导入、键位模版、Linux/macOS 原生打包。
-- 🗺️ 规划中：剪贴板历史、团队同步、云端模板市场。
+### 数据管理
+
+- **Git 备份**：使用 Git 仓库自动备份
+- **云同步**：跨设备同步你的数据
+- **自动更新**：及时获取最新功能
+
+## 为什么选择 voidraft？
+
+- **专注开发者**：考虑开发者需求而构建
+- **现代技术栈**：使用前沿技术（Wails3、Vue 3、CodeMirror 6）
+- **跨平台**：支持 Windows（macOS 和 Linux 支持计划中）
+- **开源**：MIT 许可证，社区驱动开发
+
+## 开始使用
+
+准备好开始了吗？从我们的[发布页面](https://github.com/landaiqing/voidraft/releases)下载最新版本，或继续阅读文档了解更多。
+
+下一步：[安装 →](/zh/guide/installation)
 
-## 下一步
-- [安装 voidraft](/zh/guide/installation)
-- [界面总览](/zh/guide/ui-overview)
-- [快速开始](/zh/guide/getting-started)

frontend/docs/src/zh/guide/keyboard-shortcuts.md

@@ -1,74 +0,0 @@
-# 键盘快捷键
-
-![快捷键占位](/img/placeholder-shortcuts.png)
-> 替换为展示快捷键设置界面或常用快捷键速查表的截图。
-
-快捷键定义源自 `internal/models/key_bindings.go`，在设置 > 键位 中可以启用/禁用或改写。下表列出常用组合：
-
-## 块管理
-| 功能 | 默认快捷键 | 备注 |
-| --- | --- | --- |
-| 新建块（下方） | `Ctrl+Enter` | `blockAddAfterCurrent` |
-| 新建块（上方） | `Ctrl+Shift+Enter` | `blockAddBeforeCurrent` |
-| 跳到上/下一个块 | `Alt+↑ / Alt+↓` | `blockGotoPrevious/Next` |
-| 选择当前块 | `Ctrl+Shift+A` | `blockSelectAll` |
-| 删除块 | `Alt+Delete` | `blockDelete` |
-| 块上移/下移 | `Ctrl+Shift+↑ / Ctrl+Shift+↓` | `blockMoveUp/Down` |
-| 复制块 | `Ctrl+C`（块获得焦点） | `blockCopy` |
-| 剪切块 | `Ctrl+X` | `blockCut` |
-| 粘贴块 | `Ctrl+V` | `blockPaste` |
-
-## 行与文本编辑
-| 功能 | 快捷键 |
-| --- | --- |
-| 行复制（上/下） | `Shift+Alt+↑ / Shift+Alt+↓` |
-| 行移动（上/下） | `Alt+↑ / Alt+↓`（在块内部） |
-| 插入空行 | `Ctrl+Enter`（块尾后仍可插入） |
-| 选择整行 | `Alt+L` |
-| 语法级跳转 | `Ctrl+Alt+Left / Ctrl+Alt+Right` |
-| 匹配括号 | `Shift+Ctrl+\` |
-| 注释/块注释 | `Ctrl+/` / `Shift+Alt+A` |
-| Tab 缩进/反向缩进 | `Ctrl+]` / `Ctrl+[` |
-| 删除单词（向前/向后） | `Ctrl+Backspace` / `Ctrl+Delete` |
-
-## 搜索与替换
-| 功能 | 快捷键 | 描述 |
-| --- | --- | --- |
-| 打开搜索 | `Ctrl+F` | `showSearch` |
-| 打开替换 | `Ctrl+H` | `searchShowReplace` |
-| 切换大小写/整词/正则 | `Alt+C / Alt+W / Alt+R` | `searchToggleCase/Word/Regex` |
-| 替换全部 | `Alt+Enter` | `searchReplaceAll` |
-
-## Markdown/预览/格式化
-| 功能 | 快捷键 |
-| --- | --- |
-| 格式化块 | `Ctrl+Shift+F` |
-| 打开 Markdown 预览 | 工具栏按钮（建议映射到 `Ctrl+Shift+M`） |
-| 高亮文本 | `Mod+Shift+H` |
-
-## 窗口与系统
-| 功能 | 快捷键 |
-| --- | --- |
-| 新建窗口 | `Ctrl+Shift+N`（命令面板） |
-| 全局显示/隐藏所有窗口 | 默认 `Alt+X`（可在设置 > 通用 > 全局热键中修改） |
-| 打开设置 | `Ctrl+,` |
-| 切换主题 | `Ctrl+Shift+T`（可自定义） |
-
-## HTTP 客户端
-| 功能 | 快捷键 |
-| --- | --- |
-| 运行请求 | 点击行号旁 Run 或自定义 `Ctrl+Alt+R` |
-| 复制响应正文 | `Ctrl+Alt+C`（响应块聚焦时） |
-
-## 翻译工具
-| 功能 | 快捷键 |
-| --- | --- |
-| 显示翻译浮层 | 选中 ≥ `minSelectionLength` 的文本后按 `Ctrl+'`（可自定义） |
-| 复制译文 | 在浮层中按 `Ctrl+C` |
-
-## 自定义与导出
-1. 打开设置 > 键位，列表会加载来自 `ExtensionService.GetAllKeyBindings()` 的数据。
-2. 可单独禁用某个绑定或录入新组合；存储在 `%USERPROFILE%/.voidraft/data/key_bindings.json`。
-3. 需要与系统级快捷键冲突时，可勾选“忽略系统修饰键”。
-
-> 建议将以上表格打印贴在工作区，或在文档中保留常用组合，方便新同事查阅。

frontend/docs/src/zh/guide/multiwindow-tabs.md

@@ -1,67 +0,0 @@
-# 多窗口与标签页
-
-![多窗口占位](/img/placeholder-multiwindow.png)
-> 替换为展示主窗口 + 侧边浮窗（子窗口）或标签页齐开的截图。
-
-## 多窗口工作流
-- `WindowService.OpenDocumentWindow` 会根据文档 ID 创建新 WebView 窗口，URL 自动附加 `?documentId=<id>`。
-- `windowStore` 通过查询字符串判断当前是否为子窗口（非主窗口）。
-- 子窗口具备：
-  - 独立的 CodeMirror 实例与扩展栈。
-  - 与主窗口共享的 Document/Config Store，因此编辑内容实时同步（SQLite 数据库为唯一来源）。
-  - `WindowSnapService` 提供吸附：拖动靠近主窗口边缘时自动贴靠；支持上下左右以及四个角。
-  - 关闭时自动注销吸附状态，避免悬挂引用。
-
-### 操作步骤
-1. 打开文档列表（工具栏图标或 `Ctrl+Shift+O`）。
-2. 右键目标文档 → 选择 “在新窗口中打开”。
-3. 若文档已在标签页打开，会自动从标签栏移除，防止重复。
-4. 关闭窗口：
-   - 点击自定义标题栏关闭按钮。
-   - 系统托盘菜单选择退出。
-
-### 使用建议
-- 将参考资料或检查清单放在子窗口中，配合“窗口置顶”保持常驻。
-- 通过 Windows Snap + voidraft Snap 组合，可快速排版 2-4 个窗口。
-- 若想在多窗口之间同步滚动，可尝试启用“共享视图状态”扩展（计划中）。
-
-## 标签页模式
-- 在设置 > 通用中开启“启用标签页”（`config.general.enableTabs`）。
-- `tabStore` 维护 `tabsMap` + `tabOrder`，支持：
-  - 拖拽排序（拖动标签即可）。
-  - 关闭单个/其他/左侧/右侧标签。
-  - 检测当前文档是否已存在标签。
-- 标签栏位于主窗口顶部，紧贴工具栏下方。
-
-### 常用操作
-| 操作 | 方法 |
-| --- | --- |
-| 关闭标签 | 点击标签上的叉号或中键 |
-| 关闭其他 | 右键标签 → “关闭其他标签” |
-| 关闭右侧/左侧 | 右键标签 → 选择对应菜单 |
-| 固定标签（计划中） | 将在后续版本中提供 pin 功能 |
-
-### Tabs vs 窗口
-| 项目 | 标签页 | 新窗口 |
-| --- | --- | --- |
-| UI 占用 | 集成在一个窗口中 | 独立操作系统窗口 |
-| 跨屏 | 不方便 | 可拖到其他显示器 |
-| 独立置顶 | 不可单独置顶 | 每个窗口可单独置顶 |
-| 推荐场景 | 同一背景的多个文档 | 跨项目/跨显示器对比 |
-
-## 系统托盘与热键
-- 勾选 “启用系统托盘” 后，关闭窗口默认隐藏至托盘。
-- 全局热键（默认 `Alt+X`）由 `HotkeyService` 控制：
-  - 若 main window 可见 → 隐藏所有 voidraft 窗口。
-  - 若 main window 隐藏 → Show + Restore + Focus。
-- `TrayService` 还提供“最小化到托盘”“显示主窗口”等菜单项。
-
-## 常见问题
-| 问题 | 原因 | 解决 |
-| --- | --- | --- |
-| 新窗口无法打开 | 文档 ID 不存在或被锁定 | 在文档列表确认状态，必要时解锁 |
-| 子窗口未吸附 | WindowSnap 未启用 | 设置 > 通用 → 勾选“窗口吸附” |
-| 关闭窗口直接退出应用 | 未启用托盘模式 | 设置 > 通用 → 启用系统托盘 |
-| 标签页切换慢 | 同时开启标签 + 多窗口导致资源占用 | 关闭暂不需要的窗口或减少标签 |
-
-> 如果需要更复杂的布局（如平铺窗口、快捷布局），欢迎在 Issue 中提出建议。

frontend/docs/src/zh/guide/settings.md

@@ -1,71 +0,0 @@
-# 设置与配置
-
-![设置占位](/img/placeholder-settings.png)
-> 替换为设置页截图，突出通用/编辑/外观/更新/备份等分栏。
-
-所有设置都映射到 `internal/models/config.go`，持久化文件位于 `%USERPROFILE%/.voidraft/data/config.json`。前端 `configStore` 负责与后端 `ConfigService` 同步。
-
-## 通用（General）
-| 选项 | 说明 | 后端键 |
-| --- | --- | --- |
-| 窗口置顶 (`alwaysOnTop`) | 永久置顶主窗口 | `general.alwaysOnTop` |
-| 数据目录 (`dataPath`) | SQLite + 备份所在目录，修改后需重启 | `general.dataPath` |
-| 系统托盘 (`enableSystemTray`) | 关闭窗口后隐藏到托盘而非退出 | `general.enableSystemTray` |
-| 开机自启 (`startAtLogin`) | 调用 `StartupService` 注册 | `general.startAtLogin` |
-| 窗口吸附 (`enableWindowSnap`) | `WindowSnapService` 是否启用 | `general.enableWindowSnap` |
-| 全局热键 (`enableGlobalHotkey` + `globalHotkey`) | 默认 Alt+X，控制显隐 | `general.globalHotkey` |
-| 标签页 (`enableTabs`) | 启用多标签界面 | `general.enableTabs` |
-| 加载动画 (`enableLoadingAnimation`) | 切换文档时显示动画 | `general.enableLoadingAnimation` |
-
-## 编辑（Editing）
-| 选项 | 说明 |
-| --- | --- |
-| Font Size/Family/Weight/Line Height | 立即作用于所有编辑器实例 |
-| Tab Size/Tab Type/Enable Tab Indent | 映射 `tabExtension` 行为 |
-| Auto Save Delay | ms，影响 `editorStore` 自动保存周期 |
-
-## 外观（Appearance）
-| 选项 | 说明 |
-| --- | --- |
-| Language | UI 语言（`zh-CN`/`en-US`） |
-| System Theme | 深色/浅色/跟随系统 |
-| Current Theme | 选择预设或自定义主题（详见 [主题与外观](/zh/guide/themes)） |
-
-## 更新（Updates）
-| 选项 | 说明 |
-| --- | --- |
-| Auto Update | 启动时自动检查更新 |
-| Primary/Backup Source | `github` 或 `gitea`，对应 `UpdatesConfig` |
-| Backup Before Update | 下载更新前执行 Git 备份 |
-| Update Timeout | HTTP 请求超时 |
-| GitHub/Gitea 仓库 | owner/repo/baseURL，可指向自建镜像 |
-
-## 备份（Backup）
-| 选项 | 说明 |
-| --- | --- |
-| Enabled | 开关 Git 备份 |
-| Repo URL | 远程仓库地址（HTTPS 或 SSH） |
-| Auth Method | `token` / `ssh_key` / `user_pass` |
-| Username/Password/Token/SSH Key Path | 根据认证方式填写 |
-| Backup Interval | 自动备份间隔（分钟） |
-| Auto Backup | 是否按间隔自动推送 |
-
-## 键位（Key Bindings）
-- 列表由 `ExtensionService.GetAllKeyBindings()` 提供。可搜索命令 ID 或组合。
-- 允许将命令禁用（关闭开关）或录入新组合。
-- 更改立即影响所有编辑器实例。
-
-## 扩展（Extensions）
-- 显示 `ExtensionSettings` 中的所有扩展。
-- 每项可开关并展示 JSON 配置（背景色、最小选区、最小化提示等）。
-- 修改后调用 `ExtensionService.UpdateExtensionState` 并通知 `ExtensionManager` 热更新。
-
-## 配置文件备份
-- 每次修改配置都会更新 `metadata.lastUpdated`，可用 Git 备份追踪历史。
-- 若出现配置损坏，可删除 `config.json`，应用会写入 `NewDefaultAppConfig`。
-
-## 导入/导出（建议）
-- 目前可手动复制 `config.json`/`extensions.json`/`key_bindings.json`。
-- 计划提供 UI 层面的导入导出按钮，便于跨设备同步。
-
-> 修改高级选项（如 dataPath）后建议重启，以确保后台服务（数据库、备份、窗口吸附等）读取到最新配置。

frontend/docs/src/zh/guide/themes.md

@@ -1,44 +0,0 @@
-# 主题与外观
-
-![主题占位](/img/placeholder-themes.png)
-> 替换为主题切换界面或自定义主题编辑器的截图。
-
-voidraft 的主题由后端 `ThemeService` 管理，存储在 `themes` 表。前端通过 `themeStore` + `createThemeExtension` 应用色板。
-
-## 预设主题
-| 名称 | 类型 | 说明 |
-| --- | --- | --- |
-| default-dark | Dark | 默认暗色，适合低光环境 |
-| default-light | Light | 默认亮色 |
-| dracula | Dark | 高对比度紫色系 |
-| aura | Dark | 柔和霓虹风 |
-| github-dark / github-light | Dark/Light | 与 GitHub 主题接近 |
-| material-dark / light | Dark/Light | Material Design 色板 |
-| one-dark | Dark | VSCode 经典主题 |
-| solarized-dark / light | Dark/Light | Solarized 配色 |
-| tokyo-night / storm / day | Dark/Light | Tokyo Night 三件套 |
-
-## 自定义主题
-1. 打开设置 > 外观，选择「创建主题」。
-2. 颜色字段对应 `ThemeColorConfig`，包含 `editor.background`, `editor.foreground`, `gutter`, `selection`, `bracket`, `keyword`, `string`, `comment`, `accent` 等。
-3. 保存后立即写入数据库，可通过 `Reset` 按钮恢复为预设值。
-4. 前端 `themeExtension` 会向 CodeMirror 注入新的 `EditorView.theme`。
-
-## 动态切换
-- 切换主题会立即影响所有已打开的编辑器实例；`updateEditorTheme` 逐个更新 `EditorView`。
-- `SystemTheme` 设为 `auto` 时，voidraft 会监听操作系统深浅模式并自动切换到 `default-dark` 或 `default-light`。
-
-## 字体与行高
-- 字体配置来自设置 > 编辑，`createFontExtensionFromBackend` 会同步 `fontFamily/fontSize/fontWeight/lineHeight`。
-- 可在通用设置中的“滚轮缩放”手势下临时调整字号。
-
-## 小地图/装饰色
-- `minimap` 扩展读取主题中的 `accent` 颜色，用于高亮当前视区。
-- `textHighlight` 扩展的默认背景色可在扩展设置中配置。
-
-## 截图建议
-- 展示暗/亮主题对比。
-- 展示主题编辑对话框，标出关键字段。
-- 展示自定义主题应用后的编辑器界面。
-
-> 如果希望导入 VSCode `.json` 主题，可将颜色映射到 `ThemeColorConfig` 后写入数据库，或等待官方导入工具上线。

frontend/docs/src/zh/guide/troubleshooting.md

@@ -1,53 +0,0 @@
-# 常见问题与故障排查
-
-![故障排查占位](/img/placeholder-troubleshooting.png)
-> 替换为错误提示或日志查看界面的截图。
-
-## 安装与启动
-| 问题 | 可能原因 | 解决步骤 |
-| --- | --- | --- |
-| 启动白屏 | WebView2 缺失或缓存损坏 | 安装 WebView2 Runtime；删除 `%APPDATA%/voidraft/Cache` 后重启 |
-| 双击无反应 | 被安全策略拦截 | 以管理员运行或使用便携版；验证 SHA256 后加入白名单 |
-| `wails3 dev` 报错 | Go/Node 版本不符或缺少 WebView2 | 确保 Go 1.21+、Node 18+，安装 WebView2 |
-
-## 编辑器
-| 问题 | 原因 | 解决 |
-| --- | --- | --- |
-| 格式化按钮灰色 | 当前块语言无对应 Prettier parser | 更换语言或安装支持的语言扩展（未来版本） |
-| 块解析错误 | 分隔符格式不正确 | 确认 `∞∞∞language` 后跟换行；可用自动重建语法树命令 |
-| 翻译浮层不出现 | 选区过短或超过最大长度 | 在设置 > 扩展 > translator 中调整阈值 |
-| 小地图不同步 | 编辑器实例未刷新 | 切换文档或重开应用，检查扩展是否被禁用 |
-
-## 窗口与多实例
-| 问题 | 原因 | 解决 |
-| --- | --- | --- |
-| 子窗口未吸附 | WindowSnap 未启用 | 设置 > 通用 → 勾选“窗口吸附” |
-| 全局热键无效 | 与系统/其他软件冲突 | 在设置 > 通用改用非系统占用组合，比如 `Ctrl+Alt+Space` |
-| 关闭窗口直接退出 | 未启用托盘模式 | 设置 > 通用 → 启用系统托盘 |
-
-## HTTP 客户端
-| 问题 | 可能原因 | 解决 |
-| --- | --- | --- |
-| 发送失败，提示 `proxy` | 系统代理配置异常 | 在系统代理或环境变量中设置 HTTP(S)_PROXY，或关闭代理再试 |
-| 响应乱码 | 服务器未声明编码 | 手动在请求头中加 `accept-charset: utf-8`，或在响应视图切换编码（计划） |
-| 变量未替换 | 变量名拼写或作用域错误 | 确认 `@var` 定义位置，使用 `{{name}}` 语法 |
-
-## 数据与备份
-| 问题 | 可能原因 | 解决 |
-| --- | --- | --- |
-| 自动备份停在 “未初始化” | Repo URL/认证缺失 | 补全备份配置或关闭自动备份 |
-| Push 失败 | Token 权限不足或网络问题 | 为 Token 开启 `repo` scope；检查代理；稍后再试 |
-| 数据目录迁移后文件缺失 | 未重启或权限不足 | 修改 `dataPath` 后重启应用；确保目标目录可写 |
-
-## 更新
-| 问题 | 原因 | 解决 |
-| --- | --- | --- |
-| 检查更新超时 | 主源不可达 | 切换到备用源或关闭代理重试 |
-| 下载完成但未重启 | 权限或文件被占用 | 以管理员运行，关闭杀毒软件后重试 |
-
-## 收集日志
-- Wails 日志：`%LOCALAPPDATA%/voidraft/logs/*.log`。
-- 终端调试：运行 `wails3 dev` 并观察控制台输出。
-- 若提交 Issue，请附上：系统版本、voidraft 版本、日志片段、复现步骤。
-
-> 仍未解决？请到 GitHub Issues 提交反馈，并尽可能附上截图和日志。

frontend/docs/src/zh/guide/ui-overview.md

@@ -1,46 +0,0 @@
-# 界面总览
-
-![界面截图占位](/img/placeholder-main-ui.png)
-> 替换为包含顶部工具栏、块区域、右侧小地图、底部状态栏的完整截图。
-
-voidraft 的主窗口由四个区域组成：
-
-| 区域 | 位置 | 作用 | 相关代码 |
-| --- | --- | --- | --- |
-| 工具栏 | 顶部浮层 | 文档切换、块语言选择、格式化、Markdown 预览、窗口置顶、更新提示、进入设置 | `frontend/src/components/toolbar/Toolbar.vue` |
-| 编辑器主体 | 中央 | CodeMirror 6 视图，承载块编辑、HTTP 运行器、翻译按钮等 | `frontend/src/views/editor/Editor.vue` + `extensions` |
-| 导航辅助 | 右侧 | 小地图、滚动条、块徽标、HTTP 运行按钮 | `extensions/minimap`, `codeblock/decorations.ts` |
-| 底部状态 | 左下角 | 行数、字符数、选区统计、文档脏状态 | `editorStore.documentStats` |
-
-## 工具栏详解
-| 项 | 说明 | 快捷入口 |
-| --- | --- | --- |
-| 文档切换器 | 展开后列出全部文档，支持搜索、创建、在新窗口打开 | 同步 `DocumentService.ListAllDocumentsMeta` |
-| 块语言下拉 | 当前块语言，列表取自 `lang-parser/languages.ts`，支持搜索 | 鼠标选择或输入语言 token |
-| Pin（窗口置顶） | 临时 / 永久置顶切换，调用 `SystemService.SetWindowOnTop` 与 `config.general.alwaysOnTop` | Alt+Space（自定义） |
-| Format / Preview | 对当前块执行 Prettier 或打开 Markdown 预览 | `Ctrl+Shift+F` / 工具栏按钮 |
-| 更新提示 | 轮询 `SelfUpdateService`，有更新时显示小点，可直接“检查/下载/重启” | 设置 > 更新 |
-| 设置入口 | 跳转到 Vue Router 的 `/settings` 页面 | `Ctrl+,` |
-
-## 多文档视图
-- **标签页（可选）**：在设置 > 通用中启用“标签页模式”，`tabStore` 将当前文档加入 tab bar，支持拖拽、批量关闭。
-- **多窗口**：以文档列表右键「在新窗口中打开」或命令面板为入口。`WindowService` 会根据文档 ID 命名窗口，`WindowSnapService` 自动吸附。
-- **系统托盘**：关闭窗口时默认最小化到托盘，可在托盘图标中重新唤醒或彻底退出。
-
-## 面板与浮层
-- **Markdown 预览**：针对选中的 Markdown 块，面板会贴在右侧，支持实时滚动同步、关闭动画。
-- **HTTP 响应**：运行后在块底部自动插入 `### Response`，可展开查看头部/体/耗时。
-- **翻译浮层**：选中文本后自动出现按钮，点击后显示结果卡片，附带复制、语种切换。
-
-## 快捷状态
-- **底部统计**：
-  - `Ln`：当前块内行号。
-  - `Ch`：字符数。
-  - `Sel`：选区字符数。
-- **右上角加载动画**：当编辑器实例加载或切换文档时显示，遵循 `enableLoadingAnimation` 设置。
-
-## 建议截图
-1. 默认深色主题 + 多块示例。
-2. 打开 Markdown 预览 + 小地图。
-3. 展示 HTTP 块运行按钮与响应卡片。
-4. 展示标签页或多窗口。

frontend/src/assets/styles/index.css

@@ -1,8 +1,9 @@
 /* 导入所有CSS文件 */
 @import 'normalize.css';
-@import 'variables.css';
-@import 'scrollbar.css';
 @import "harmony_fonts.css";
 @import 'hack_fonts.css';
 @import 'opensans_fonts.css';
-@import "monocraft_fonts.css";
+@import "monocraft_fonts.css";
+@import 'variables.css';
+@import 'scrollbar.css';
+@import 'styles.css';

frontend/src/assets/styles/styles.css

@@ -0,0 +1,3 @@
+body {
+    background-color: var(--bg-primary);
+}

frontend/src/assets/styles/variables.css

@@ -1,255 +1,148 @@
 :root {
-  /* 编辑器区域 */
-  --text-primary: #9BB586; /* 内容区域字体颜色 */
-  
-  /* 深色主题颜色变量 */
-  --dark-toolbar-bg: #2d2d2d;
-  --dark-toolbar-border: #404040;
-  --dark-toolbar-text: #ffffff;
-  --dark-toolbar-text-secondary: #cccccc;
-  --dark-toolbar-button-hover: #404040;
-  --dark-tab-active-line: linear-gradient(90deg, #007acc 0%, #0099ff 100%);
-  --dark-bg-secondary: #0E1217;
-  --dark-text-secondary: #a0aec0;
-  --dark-text-muted: #666;
-  --dark-border-color: #2d3748;
-  --dark-settings-bg: #2a2a2a;
-  --dark-settings-card-bg: #333333;
-  --dark-settings-text: #ffffff;
-  --dark-settings-text-secondary: #cccccc;
-  --dark-settings-border: #444444;
-  --dark-settings-input-bg: #3a3a3a;
-  --dark-settings-input-border: #555555;
-  --dark-settings-hover: #404040;
-  --dark-scrollbar-track: #2a2a2a;
-  --dark-scrollbar-thumb: #555555;
-  --dark-scrollbar-thumb-hover: #666666;
-  --dark-selection-bg: rgba(181, 206, 168, 0.1);
-  --dark-selection-text: #b5cea8;
-  --dark-danger-color: #ff6b6b;
-  --dark-bg-primary: #1a1a1a;
-  --dark-bg-hover: #2a2a2a;
-  --dark-loading-bg-gradient: radial-gradient(#222922, #000500);
-  --dark-loading-color: #fff;
-  --dark-loading-glow: 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5);
-  --dark-loading-done-color: #6f6;
-  --dark-loading-overlay: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
-  
-  /* 浅色主题颜色变量 */
-  --light-toolbar-bg: #f8f9fa;
-  --light-toolbar-border: #e9ecef;
-  --light-toolbar-text: #212529;
-  --light-toolbar-text-secondary: #495057;
-  --light-toolbar-button-hover: #e9ecef;
-  --light-tab-active-line: linear-gradient(90deg, #0066cc 0%, #0088ff 100%);
-  --light-bg-secondary: #f7fef7;
-  --light-text-secondary: #374151;
-  --light-text-muted: #6b7280;
-  --light-border-color: #e5e7eb;
-  --light-settings-bg: #ffffff;
-  --light-settings-card-bg: #f8f9fa;
-  --light-settings-text: #212529;
-  --light-settings-text-secondary: #6c757d;
-  --light-settings-border: #dee2e6;
-  --light-settings-input-bg: #ffffff;
-  --light-settings-input-border: #ced4da;
-  --light-settings-hover: #e9ecef;
-  --light-scrollbar-track: #f1f3f4;
-  --light-scrollbar-thumb: #c1c1c1;
-  --light-scrollbar-thumb-hover: #a8a8a8;
-  --light-selection-bg: rgba(59, 130, 246, 0.15);
-  --light-selection-text: #2563eb;
-  --light-danger-color: #dc3545;
-  --light-bg-primary: #ffffff;
-  --light-bg-hover: #f1f3f4;
-  --light-loading-bg-gradient: radial-gradient(#f0f6f0, #e5efe5);
-  --light-loading-color: #1a3c1a;
-  --light-loading-glow: 0 0 10px rgba(0, 160, 0, 0.3), 0 0 5px rgba(0, 120, 0, 0.2);
-  --light-loading-done-color: #008800;
-  --light-loading-overlay: linear-gradient(transparent 0%, rgba(220, 240, 220, 0.5) 50%);
-  
-  /* 默认使用深色主题 */
-  --toolbar-bg: var(--dark-toolbar-bg);
-  --toolbar-border: var(--dark-toolbar-border);
-  --toolbar-text: var(--dark-toolbar-text);
-  --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
-  --toolbar-button-hover: var(--dark-toolbar-button-hover);
-  --toolbar-separator: var(--dark-toolbar-button-hover);
-  --tab-active-line: var(--dark-tab-active-line);
-  --bg-secondary: var(--dark-bg-secondary);
-  --text-secondary: var(--dark-text-secondary);
-  --text-muted: var(--dark-text-muted);
-  --border-color: var(--dark-border-color);
-  --settings-bg: var(--dark-settings-bg);
-  --settings-card-bg: var(--dark-settings-card-bg);
-  --settings-text: var(--dark-settings-text);
-  --settings-text-secondary: var(--dark-settings-text-secondary);
-  --settings-border: var(--dark-settings-border);
-  --settings-input-bg: var(--dark-settings-input-bg);
-  --settings-input-border: var(--dark-settings-input-border);
-  --settings-hover: var(--dark-settings-hover);
-  --scrollbar-track: var(--dark-scrollbar-track);
-  --scrollbar-thumb: var(--dark-scrollbar-thumb);
-  --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
-  --selection-bg: var(--dark-selection-bg);
-  --selection-text: var(--dark-selection-text);
-  --text-danger: var(--dark-danger-color);
-  --bg-primary: var(--dark-bg-primary);
-  --bg-hover: var(--dark-bg-hover);
-  --voidraft-bg-gradient: var(--dark-loading-bg-gradient);
-  --voidraft-loading-color: var(--dark-loading-color);
-  --voidraft-loading-glow: var(--dark-loading-glow);
-  --voidraft-loading-done-color: var(--dark-loading-done-color);
-  --voidraft-loading-overlay: var(--dark-loading-overlay);
-  --voidraft-mono-font: "HarmonyOS Sans Mono", monospace;
-  
-  color-scheme: light dark;
+  --voidraft-font-mono: "HarmonyOS", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
 }
 
-/* 监听系统深色主题 */
-@media (prefers-color-scheme: dark) {
-  :root[data-theme="auto"] {
-    --toolbar-bg: var(--dark-toolbar-bg);
-    --toolbar-border: var(--dark-toolbar-border);
-    --toolbar-text: var(--dark-toolbar-text);
-    --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
-    --toolbar-button-hover: var(--dark-toolbar-button-hover);
-    --toolbar-separator: var(--dark-toolbar-button-hover);
-    --tab-active-line: var(--dark-tab-active-line);
-    --bg-secondary: var(--dark-bg-secondary);
-    --text-secondary: var(--dark-text-secondary);
-    --text-muted: var(--dark-text-muted);
-    --border-color: var(--dark-border-color);
-    --settings-bg: var(--dark-settings-bg);
-    --settings-card-bg: var(--dark-settings-card-bg);
-    --settings-text: var(--dark-settings-text);
-    --settings-text-secondary: var(--dark-settings-text-secondary);
-    --settings-border: var(--dark-settings-border);
-    --settings-input-bg: var(--dark-settings-input-bg);
-    --settings-input-border: var(--dark-settings-input-border);
-    --settings-hover: var(--dark-settings-hover);
-    --scrollbar-track: var(--dark-scrollbar-track);
-    --scrollbar-thumb: var(--dark-scrollbar-thumb);
-    --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
-    --selection-bg: var(--dark-selection-bg);
-    --selection-text: var(--dark-selection-text);
-    --text-danger: var(--dark-danger-color);
-    --bg-primary: var(--dark-bg-primary);
-    --bg-hover: var(--dark-bg-hover);
-    --voidraft-bg-gradient: var(--dark-loading-bg-gradient);
-    --voidraft-loading-color: var(--dark-loading-color);
-    --voidraft-loading-glow: var(--dark-loading-glow);
-    --voidraft-loading-done-color: var(--dark-loading-done-color);
-    --voidraft-loading-overlay: var(--dark-loading-overlay);
-  }
+/* 默认/暗色主题 */
+:root,
+:root[data-theme="dark"],
+:root[data-theme="auto"] {
+  color-scheme: dark;
+
+  --text-primary: #ffffff;
+
+  --toolbar-bg: #2d2d2d;
+  --toolbar-border: #404040;
+  --toolbar-text: #ffffff;
+  --toolbar-text-secondary: #cccccc;
+  --toolbar-button-hover: #404040;
+  --toolbar-separator: #404040;
+
+  --tab-active-line: linear-gradient(90deg, #007acc 0%, #0099ff 100%);
+  --bg-secondary: #0e1217;
+  --bg-primary: #1a1a1a;
+  --bg-hover: #2a2a2a;
+
+  --text-secondary: #a0aec0;
+  --text-muted: #666666;
+  --text-danger: #ff6b6b;
+
+  --border-color: #2d3748;
+
+  --settings-bg: #2a2a2a;
+  --settings-card-bg: #333333;
+  --settings-text: #ffffff;
+  --settings-text-secondary: #cccccc;
+  --settings-border: #444444;
+  --settings-input-bg: #3a3a3a;
+  --settings-input-border: #555555;
+  --settings-hover: #404040;
+
+  --scrollbar-track: #2a2a2a;
+  --scrollbar-thumb: #555555;
+  --scrollbar-thumb-hover: #666666;
+
+  --selection-bg: rgba(181, 206, 168, 0.1);
+  --selection-text: #b5cea8;
+
+  --voidraft-bg-gradient: radial-gradient(#222922, #000500);
+  --voidraft-loading-color: #ffffff;
+  --voidraft-loading-glow: 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5);
+  --voidraft-loading-done-color: #66ff66;
+  --voidraft-loading-overlay: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
 }
 
-/* 监听系统浅色主题 */
+/* 亮色主题 */
+:root[data-theme="light"] {
+  color-scheme: light;
+
+  --text-primary: #000000;
+
+  --toolbar-bg: #f8f9fa;
+  --toolbar-border: #e9ecef;
+  --toolbar-text: #212529;
+  --toolbar-text-secondary: #495057;
+  --toolbar-button-hover: #e9ecef;
+  --toolbar-separator: #e9ecef;
+
+  --tab-active-line: linear-gradient(90deg, #0066cc 0%, #0088ff 100%);
+  --bg-secondary: #f7fef7;
+  --bg-primary: #ffffff;
+  --bg-hover: #f1f3f4;
+
+  --text-secondary: #374151;
+  --text-muted: #6b7280;
+  --text-danger: #dc3545;
+
+  --border-color: #e5e7eb;
+
+  --settings-bg: #ffffff;
+  --settings-card-bg: #f8f9fa;
+  --settings-text: #212529;
+  --settings-text-secondary: #6c757d;
+  --settings-border: #dee2e6;
+  --settings-input-bg: #ffffff;
+  --settings-input-border: #ced4da;
+  --settings-hover: #e9ecef;
+
+  --scrollbar-track: #f1f3f4;
+  --scrollbar-thumb: #c1c1c1;
+  --scrollbar-thumb-hover: #a8a8a8;
+
+  --selection-bg: rgba(59, 130, 246, 0.15);
+  --selection-text: #2563eb;
+
+  --voidraft-bg-gradient: radial-gradient(#f0f6f0, #e5efe5);
+  --voidraft-loading-color: #1a3c1a;
+  --voidraft-loading-glow: 0 0 10px rgba(0, 160, 0, 0.3), 0 0 5px rgba(0, 120, 0, 0.2);
+  --voidraft-loading-done-color: #008800;
+  --voidraft-loading-overlay: linear-gradient(transparent 0%, rgba(220, 240, 220, 0.5) 50%);
+}
+
+/* 跟随系统的浅色偏好 */
 @media (prefers-color-scheme: light) {
   :root[data-theme="auto"] {
-    --toolbar-bg: var(--light-toolbar-bg);
-    --toolbar-border: var(--light-toolbar-border);
-    --toolbar-text: var(--light-toolbar-text);
-    --toolbar-text-secondary: var(--light-toolbar-text-secondary);
-    --toolbar-button-hover: var(--light-toolbar-button-hover);
-    --toolbar-separator: var(--light-toolbar-button-hover);
-    --tab-active-line: var(--light-tab-active-line);
-    --bg-secondary: var(--light-bg-secondary);
-    --text-secondary: var(--light-text-secondary);
-    --text-muted: var(--light-text-muted);
-    --border-color: var(--light-border-color);
-    --settings-bg: var(--light-settings-bg);
-    --settings-card-bg: var(--light-settings-card-bg);
-    --settings-text: var(--light-settings-text);
-    --settings-text-secondary: var(--light-settings-text-secondary);
-    --settings-border: var(--light-settings-border);
-    --settings-input-bg: var(--light-settings-input-bg);
-    --settings-input-border: var(--light-settings-input-border);
-    --settings-hover: var(--light-settings-hover);
-    --scrollbar-track: var(--light-scrollbar-track);
-    --scrollbar-thumb: var(--light-scrollbar-thumb);
-    --scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
-    --selection-bg: var(--light-selection-bg);
-    --selection-text: var(--light-selection-text);
-    --text-danger: var(--light-danger-color);
-    --bg-primary: var(--light-bg-primary);
-    --bg-hover: var(--light-bg-hover);
-    --voidraft-bg-gradient: var(--light-loading-bg-gradient);
-    --voidraft-loading-color: var(--light-loading-color);
-    --voidraft-loading-glow: var(--light-loading-glow);
-    --voidraft-loading-done-color: var(--light-loading-done-color);
-    --voidraft-loading-overlay: var(--light-loading-overlay);
+    color-scheme: light;
+
+    --text-primary: #000000;
+
+    --toolbar-bg: #f8f9fa;
+    --toolbar-border: #e9ecef;
+    --toolbar-text: #212529;
+    --toolbar-text-secondary: #495057;
+    --toolbar-button-hover: #e9ecef;
+    --toolbar-separator: #e9ecef;
+
+    --tab-active-line: linear-gradient(90deg, #0066cc 0%, #0088ff 100%);
+    --bg-secondary: #f7fef7;
+    --bg-primary: #ffffff;
+    --bg-hover: #f1f3f4;
+
+    --text-secondary: #374151;
+    --text-muted: #6b7280;
+    --text-danger: #dc3545;
+
+    --border-color: #e5e7eb;
+
+    --settings-bg: #ffffff;
+    --settings-card-bg: #f8f9fa;
+    --settings-text: #212529;
+    --settings-text-secondary: #6c757d;
+    --settings-border: #dee2e6;
+    --settings-input-bg: #ffffff;
+    --settings-input-border: #ced4da;
+    --settings-hover: #e9ecef;
+
+    --scrollbar-track: #f1f3f4;
+    --scrollbar-thumb: #c1c1c1;
+    --scrollbar-thumb-hover: #a8a8a8;
+
+    --selection-bg: rgba(59, 130, 246, 0.15);
+    --selection-text: #2563eb;
+
+    --voidraft-bg-gradient: radial-gradient(#f0f6f0, #e5efe5);
+    --voidraft-loading-color: #1a3c1a;
+    --voidraft-loading-glow: 0 0 10px rgba(0, 160, 0, 0.3), 0 0 5px rgba(0, 120, 0, 0.2);
+    --voidraft-loading-done-color: #008800;
+    --voidraft-loading-overlay: linear-gradient(transparent 0%, rgba(220, 240, 220, 0.5) 50%);
   }
 }
-
-/* 手动选择浅色主题 */
-:root[data-theme="light"] {
-  --toolbar-bg: var(--light-toolbar-bg);
-  --toolbar-border: var(--light-toolbar-border);
-  --toolbar-text: var(--light-toolbar-text);
-  --toolbar-text-secondary: var(--light-toolbar-text-secondary);
-  --toolbar-button-hover: var(--light-toolbar-button-hover);
-  --toolbar-separator: var(--light-toolbar-button-hover);
-  --tab-active-line: var(--light-tab-active-line);
-  --bg-secondary: var(--light-bg-secondary);
-  --text-secondary: var(--light-text-secondary);
-  --text-muted: var(--light-text-muted);
-  --border-color: var(--light-border-color);
-  --settings-bg: var(--light-settings-bg);
-  --settings-card-bg: var(--light-settings-card-bg);
-  --settings-text: var(--light-settings-text);
-  --settings-text-secondary: var(--light-settings-text-secondary);
-  --settings-border: var(--light-settings-border);
-  --settings-input-bg: var(--light-settings-input-bg);
-  --settings-input-border: var(--light-settings-input-border);
-  --settings-hover: var(--light-settings-hover);
-  --scrollbar-track: var(--light-scrollbar-track);
-  --scrollbar-thumb: var(--light-scrollbar-thumb);
-  --scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
-  --selection-bg: var(--light-selection-bg);
-  --selection-text: var(--light-selection-text);
-  --text-danger: var(--light-danger-color);
-  --bg-primary: var(--light-bg-primary);
-  --bg-hover: var(--light-bg-hover);
-  --voidraft-bg-gradient: var(--light-loading-bg-gradient);
-  --voidraft-loading-color: var(--light-loading-color);
-  --voidraft-loading-glow: var(--light-loading-glow);
-  --voidraft-loading-done-color: var(--light-loading-done-color);
-  --voidraft-loading-overlay: var(--light-loading-overlay);
-}
-
-/* 手动选择深色主题 */
-:root[data-theme="dark"] {
-  --toolbar-bg: var(--dark-toolbar-bg);
-  --toolbar-border: var(--dark-toolbar-border);
-  --toolbar-text: var(--dark-toolbar-text);
-  --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
-  --toolbar-button-hover: var(--dark-toolbar-button-hover);
-  --toolbar-separator: var(--dark-toolbar-button-hover);
-  --tab-active-line: var(--dark-tab-active-line);
-  --bg-secondary: var(--dark-bg-secondary);
-  --text-secondary: var(--dark-text-secondary);
-  --text-muted: var(--dark-text-muted);
-  --border-color: var(--dark-border-color);
-  --settings-bg: var(--dark-settings-bg);
-  --settings-card-bg: var(--dark-settings-card-bg);
-  --settings-text: var(--dark-settings-text);
-  --settings-text-secondary: var(--dark-settings-text-secondary);
-  --settings-border: var(--dark-settings-border);
-  --settings-input-bg: var(--dark-settings-input-bg);
-  --settings-input-border: var(--dark-settings-input-border);
-  --settings-hover: var(--dark-settings-hover);
-  --scrollbar-track: var(--dark-scrollbar-track);
-  --scrollbar-thumb: var(--dark-scrollbar-thumb);
-  --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
-  --selection-bg: var(--dark-selection-bg);
-  --selection-text: var(--dark-selection-text);
-  --text-danger: var(--dark-danger-color);
-  --bg-primary: var(--dark-bg-primary);
-  --bg-hover: var(--dark-bg-hover);
-  --voidraft-bg-gradient: var(--dark-loading-bg-gradient);
-  --voidraft-loading-color: var(--dark-loading-color);
-  --voidraft-loading-glow: var(--dark-loading-glow);
-  --voidraft-loading-done-color: var(--dark-loading-done-color);
-  --voidraft-loading-overlay: var(--dark-loading-overlay);
-}

frontend/src/components/loading/LoadingScreen.vue

@@ -142,7 +142,7 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--voidraft-mono-font, monospace),serif;
+  font-family: var(--voidraft-font-mono),serif;
 }
 
 .loading-word {
@@ -175,4 +175,4 @@ onBeforeUnmount(() => {
   top: 0;
   pointer-events: none;
 }
-</style> 
+</style> 

frontend/src/components/tabs/TabContextMenu.vue

@@ -147,7 +147,7 @@ onUnmounted(() => {
   padding: 8px 12px;
   cursor: pointer;
   font-size: 12px;
-  color: var(--text-muted);
+  color: var(--text-primary);
   transition: all 0.15s ease;
   gap: 8px;
   
@@ -165,7 +165,7 @@ onUnmounted(() => {
   flex-shrink: 0;
   width: 12px;
   height: 12px;
-  color: var(--text-muted);
+  color: var(--text-primary);
   transition: color 0.15s ease;
   
   .menu-item:hover & {

frontend/src/i18n/locales/en-US.ts

@@ -161,53 +161,6 @@ export default {
     customThemeColors: 'Custom Theme Colors',
     resetToDefault: 'Reset to Default',
     colorValue: 'Color Value',
-    themeColors: {
-      basic: 'Basic Colors',
-      text: 'Text Colors',
-      syntax: 'Syntax Highlighting',
-      interface: 'Interface Elements',
-      border: 'Borders & Dividers',
-      search: 'Search & Matching',
-      // Base Colors
-      background: 'Main Background',
-      backgroundSecondary: 'Secondary Background',
-      surface: 'Panel Background',
-      dropdownBackground: 'Dropdown Background',
-      dropdownBorder: 'Dropdown Border',
-      // Text Colors
-      foreground: 'Primary Text',
-      foregroundSecondary: 'Secondary Text',
-      comment: 'Comments',
-      // Syntax Highlighting - Core
-      keyword: 'Keywords',
-      string: 'Strings',
-      function: 'Functions',
-      number: 'Numbers',
-      operator: 'Operators',
-      variable: 'Variables',
-      type: 'Types',
-      // Syntax Highlighting - Extended
-      constant: 'Constants',
-      storage: 'Storage Type',
-      parameter: 'Parameters',
-      class: 'Class Names',
-      heading: 'Headings',
-      invalid: 'Invalid/Error',
-      regexp: 'Regular Expressions',
-      // Interface Elements
-      cursor: 'Cursor',
-      selection: 'Selection Background',
-      selectionBlur: 'Unfocused Selection',
-      activeLine: 'Active Line Highlight',
-      lineNumber: 'Line Numbers',
-      activeLineNumber: 'Active Line Number',
-      // Borders & Dividers
-      borderColor: 'Border Color',
-      borderLight: 'Light Border',
-      // Search & Matching
-      searchMatch: 'Search Match',
-      matchingBracket: 'Matching Bracket'
-    },
     lineHeight: 'Line Height',
     tabSettings: 'Tab Settings',
     tabSize: 'Tab Size',
@@ -341,4 +294,4 @@ export default {
     memory: 'Memory',
     clickToClean: 'Click to clean memory'
   }
-};
+};

frontend/src/i18n/locales/zh-CN.ts

@@ -202,54 +202,6 @@ export default {
     customThemeColors: '自定义主题颜色',
     resetToDefault: '重置为默认',
     colorValue: '颜色值',
-    themeColors: {
-      basic: '基础色调',
-      text: '文本颜色',
-      syntax: '语法高亮',
-      interface: '界面元素',
-      border: '边框分割线',
-      search: '搜索匹配',
-      // 基础色调
-      background: '主背景色',
-      backgroundSecondary: '次要背景色',
-      surface: '面板背景',
-      dropdownBackground: '下拉菜单背景',
-      dropdownBorder: '下拉菜单边框',
-      // 文本颜色
-      foreground: '主文本色',
-      foregroundSecondary: '次要文本色',
-      comment: '注释色',
-      // 语法高亮 - 核心
-      keyword: '关键字',
-      string: '字符串',
-      function: '函数名',
-      number: '数字',
-      operator: '操作符',
-      variable: '变量',
-      type: '类型',
-      // 语法高亮 - 扩展
-      constant: '常量',
-      storage: '存储类型',
-      parameter: '参数',
-      class: '类名',
-      heading: '标题',
-      invalid: '无效内容',
-      regexp: '正则表达式',
-      // 界面元素
-      cursor: '光标',
-      selection: '选中背景',
-      selectionBlur: '失焦选中背景',
-      activeLine: '当前行高亮',
-      lineNumber: '行号',
-      activeLineNumber: '活动行号',
-      // 边框和分割线
-      borderColor: '边框色',
-      borderLight: '浅色边框',
-      // 搜索和匹配
-      searchMatch: '搜索匹配',
-      matchingBracket: '匹配括号'
-    },
-
     hotkeyPreview: '预览：',
     none: '无',
     backup: {
@@ -344,4 +296,4 @@ export default {
     memory: '内存',
     clickToClean: '点击清理内存'
   }
-};
+};

frontend/src/stores/editorStore.ts

@@ -14,6 +14,7 @@ import {getTabExtensions, updateTabConfig} from '@/views/editor/basic/tabExtensi
 import {createFontExtensionFromBackend, updateFontConfig} from '@/views/editor/basic/fontExtension';
 import {createStatsUpdateExtension} from '@/views/editor/basic/statsExtension';
 import {createContentChangePlugin} from '@/views/editor/basic/contentChangeExtension';
+import {createWheelZoomExtension} from '@/views/editor/basic/wheelZoomExtension';
 import {createDynamicKeymapExtension, updateKeymapExtension} from '@/views/editor/keymap';
 import {
     createDynamicExtensions,
@@ -29,7 +30,7 @@ import {generateContentHash} from "@/common/utils/hashUtils";
 import {createTimerManager, type TimerManager} from '@/common/utils/timerUtils';
 import {EDITOR_CONFIG} from '@/common/constant/editor';
 import {createHttpClientExtension} from "@/views/editor/extensions/httpclient";
-import {markdownPreviewExtension} from "@/views/editor/extensions/markdownPreview";
+import {markdownPreviewExtension, updateMarkdownPreviewTheme} from "@/views/editor/extensions/markdownPreview";
 import {createDebounce} from '@/common/utils/debounce';
 
 export interface DocumentStats {
@@ -242,6 +243,11 @@ export const useEditorStore = defineStore('editor', () => {
             fontWeight: configStore.config.editing.fontWeight
         });
 
+        const wheelZoomExtension = createWheelZoomExtension(
+            () => configStore.increaseFontSize(),
+            () => configStore.decreaseFontSize()
+        );
+
         // 统计扩展
         const statsExtension = createStatsUpdateExtension(updateDocumentStats);
 
@@ -287,6 +293,7 @@ export const useEditorStore = defineStore('editor', () => {
             themeExtension,
             ...tabExtensions,
             fontExtension,
+            wheelZoomExtension,
             statsExtension,
             contentChangeExtension,
             codeBlockExtension,
@@ -635,6 +642,13 @@ export const useEditorStore = defineStore('editor', () => {
         });
     };
 
+    // 应用 Markdown 预览主题
+    const applyPreviewThemeSettings = () => {
+        editorCache.values().forEach(instance => {
+            updateMarkdownPreviewTheme(instance.view);
+        });
+    };
+
     // 应用Tab设置
     const applyTabSettings = () => {
         editorCache.values().forEach(instance => {
@@ -707,12 +721,15 @@ export const useEditorStore = defineStore('editor', () => {
         // 更新前端编辑器扩展 - 应用于所有实例
         const manager = getExtensionManager();
         if (manager) {
-            // 使用立即更新模式，跳过防抖
-            manager.updateExtensionImmediate(id, enabled, config || {});
+            // 直接更新前端扩展至所有视图
+            manager.updateExtension(id, enabled, config);
         }
 
         // 重新加载扩展配置
         await extensionStore.loadExtensions();
+        if (manager) {
+            manager.initExtensions(extensionStore.extensions);
+        }
 
         await applyKeymapSettings();
     };
@@ -773,6 +790,7 @@ export const useEditorStore = defineStore('editor', () => {
         // 配置更新方法
         applyFontSettings,
         applyThemeSettings,
+        applyPreviewThemeSettings,
         applyTabSettings,
         applyKeymapSettings,
 
@@ -781,4 +799,4 @@ export const useEditorStore = defineStore('editor', () => {
 
         editorView: currentEditor,
     };
-});
+});

frontend/src/stores/themeStore.ts

@@ -1,195 +1,161 @@
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
-import {SystemThemeType, ThemeType, Theme, ThemeColorConfig} from '@/../bindings/voidraft/internal/models/models';
+import { SystemThemeType, ThemeType, ThemeColorConfig } from '@/../bindings/voidraft/internal/models/models';
 import { ThemeService } from '@/../bindings/voidraft/internal/services';
 import { useConfigStore } from './configStore';
 import { useEditorStore } from './editorStore';
 import type { ThemeColors } from '@/views/editor/theme/types';
+import { cloneThemeColors, FALLBACK_THEME_NAME, themePresetList, themePresetMap } from '@/views/editor/theme/presets';
+
+type ThemeOption = { name: string; type: ThemeType };
+
+const resolveThemeName = (name?: string) =>
+  name && themePresetMap[name] ? name : FALLBACK_THEME_NAME;
+
+const createThemeOptions = (type: ThemeType): ThemeOption[] =>
+  themePresetList
+    .filter(preset => preset.type === type)
+    .map(preset => ({ name: preset.name, type: preset.type }));
+
+const darkThemeOptions = createThemeOptions(ThemeType.ThemeTypeDark);
+const lightThemeOptions = createThemeOptions(ThemeType.ThemeTypeLight);
+
+const cloneColors = (colors: ThemeColorConfig): ThemeColors =>
+  JSON.parse(JSON.stringify(colors)) as ThemeColors;
+
+const getPresetColors = (name: string): ThemeColors => {
+  const preset = themePresetMap[name] ?? themePresetMap[FALLBACK_THEME_NAME];
+  const colors = cloneThemeColors(preset.colors);
+  colors.themeName = name;
+  return colors;
+};
+
+const fetchThemeColors = async (themeName: string): Promise<ThemeColors> => {
+  const safeName = resolveThemeName(themeName);
+  try {
+    const theme = await ThemeService.GetThemeByName(safeName);
+    if (theme?.colors) {
+      const colors = cloneColors(theme.colors);
+      colors.themeName = safeName;
+      return colors;
+    }
+  } catch (error) {
+    console.error('Failed to load theme override:', error);
+  }
+  return getPresetColors(safeName);
+};
 
-/**
- * 主题管理 Store
- * 职责：管理主题状态、颜色配置和预设主题列表
- */
 export const useThemeStore = defineStore('theme', () => {
   const configStore = useConfigStore();
-  
-  // 所有主题列表
-  const allThemes = ref<Theme[]>([]);
-  
-  // 当前主题的颜色配置
   const currentColors = ref<ThemeColors | null>(null);
-  
-  // 计算属性：当前系统主题模式
-  const currentTheme = computed(() => 
-    configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto
+
+  const currentTheme = computed(
+    () => configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto
   );
 
-  // 计算属性：当前是否为深色模式
-  const isDarkMode = computed(() => 
-    currentTheme.value === SystemThemeType.SystemThemeDark || 
-    (currentTheme.value === SystemThemeType.SystemThemeAuto && 
-     window.matchMedia('(prefers-color-scheme: dark)').matches)
+  const isDarkMode = computed(
+    () =>
+      currentTheme.value === SystemThemeType.SystemThemeDark ||
+      (currentTheme.value === SystemThemeType.SystemThemeAuto &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
   );
 
-  // 计算属性：根据类型获取主题列表
-  const darkThemes = computed(() => 
-    allThemes.value.filter(t => t.type === ThemeType.ThemeTypeDark)
-  );
-  
-  const lightThemes = computed(() => 
-    allThemes.value.filter(t => t.type === ThemeType.ThemeTypeLight)
-  );
-  
-  // 计算属性：当前可用的主题列表
-  const availableThemes = computed(() => 
-    isDarkMode.value ? darkThemes.value : lightThemes.value
+  const availableThemes = computed<ThemeOption[]>(() =>
+    isDarkMode.value ? darkThemeOptions : lightThemeOptions
   );
 
-  // 应用主题到 DOM
   const applyThemeToDOM = (theme: SystemThemeType) => {
     const themeMap = {
       [SystemThemeType.SystemThemeAuto]: 'auto',
       [SystemThemeType.SystemThemeDark]: 'dark',
-      [SystemThemeType.SystemThemeLight]: 'light'
+      [SystemThemeType.SystemThemeLight]: 'light',
     };
     document.documentElement.setAttribute('data-theme', themeMap[theme]);
   };
 
-  // 从数据库加载所有主题
-  const loadAllThemes = async () => {
-    try {
-      const themes = await ThemeService.GetAllThemes();
-      allThemes.value = (themes || []).filter((t): t is Theme => t !== null);
-      return allThemes.value;
-    } catch (error) {
-      console.error('Failed to load themes from database:', error);
-      allThemes.value = [];
-      return [];
-    }
+  const loadThemeColors = async (themeName?: string) => {
+    const targetName = resolveThemeName(
+      themeName || configStore.config?.appearance?.currentTheme
+    );
+    currentColors.value = await fetchThemeColors(targetName);
   };
 
-  // 初始化主题颜色
-  const initializeThemeColors = async () => {
-    // 加载所有主题
-    await loadAllThemes();
-    
-    // 从配置获取当前主题名称并加载
-    const currentThemeName = configStore.config?.appearance?.currentTheme || 'default-dark';
-    
-    const theme = allThemes.value.find(t => t.name === currentThemeName);
-
-    if (!theme) {
-      console.error(`Theme not found: ${currentThemeName}`);
-      return;
-    }
-
-    // 直接设置当前主题颜色
-    currentColors.value = theme.colors as ThemeColors;
-  };
-
-  // 初始化主题
   const initializeTheme = async () => {
-    const theme = currentTheme.value;
-    applyThemeToDOM(theme);
-    await initializeThemeColors();
+    applyThemeToDOM(currentTheme.value);
+    await loadThemeColors();
   };
 
-  // 设置系统主题模式（深色/浅色/自动）
   const setTheme = async (theme: SystemThemeType) => {
     await configStore.setSystemTheme(theme);
     applyThemeToDOM(theme);
     refreshEditorTheme();
   };
-  
-  // 切换到指定的预设主题
+
   const switchToTheme = async (themeName: string) => {
-    const theme = allThemes.value.find(t => t.name === themeName);
-    if (!theme) {
+    if (!themePresetMap[themeName]) {
       console.error('Theme not found:', themeName);
       return false;
     }
 
-    // 直接设置当前主题颜色
-    currentColors.value = theme.colors as ThemeColors;
-    
-    // 持久化到配置
+    await loadThemeColors(themeName);
     await configStore.setCurrentTheme(themeName);
-    
-    // 刷新编辑器
     refreshEditorTheme();
     return true;
   };
-  
-  // 更新当前主题的颜色配置
+
   const updateCurrentColors = (colors: Partial<ThemeColors>) => {
     if (!currentColors.value) return;
     Object.assign(currentColors.value, colors);
   };
-  
-  // 保存当前主题颜色到数据库
+
   const saveCurrentTheme = async () => {
     if (!currentColors.value) {
       throw new Error('No theme selected');
     }
 
-    const theme = allThemes.value.find(t => t.name === currentColors.value!.name);
-    if (!theme) {
-      throw new Error('Theme not found');
-    }
-    
-    await ThemeService.UpdateTheme(theme.id, currentColors.value as ThemeColorConfig);
+    const themeName = resolveThemeName(currentColors.value.themeName);
+    currentColors.value.themeName = themeName;
+
+    await ThemeService.UpdateTheme(themeName, currentColors.value as unknown as ThemeColorConfig);
+
+    await loadThemeColors(themeName);
+    refreshEditorTheme();
     return true;
   };
-  
-  // 重置当前主题为预设配置
+
   const resetCurrentTheme = async () => {
     if (!currentColors.value) {
       throw new Error('No theme selected');
     }
-    
-    // 调用后端重置
-    await ThemeService.ResetTheme(0, currentColors.value.name);
-    
-    // 重新加载所有主题
-    await loadAllThemes();
 
-    const updatedTheme = allThemes.value.find(t => t.name === currentColors.value!.name);
-    
-    if (updatedTheme) {
-      currentColors.value = updatedTheme.colors as ThemeColors;
-    }
-    
+    const themeName = resolveThemeName(currentColors.value.themeName);
+    await ThemeService.ResetTheme(themeName);
+
+    await loadThemeColors(themeName);
     refreshEditorTheme();
     return true;
   };
-  
-  // 刷新编辑器主题
+
   const refreshEditorTheme = () => {
     applyThemeToDOM(currentTheme.value);
-    
+
     const editorStore = useEditorStore();
     editorStore?.applyThemeSettings();
+    editorStore?.applyPreviewThemeSettings();
   };
 
   return {
-    // 状态
-    allThemes,
-    darkThemes,
-    lightThemes,
     availableThemes,
     currentTheme,
     currentColors,
     isDarkMode,
-    
-    // 方法
     setTheme,
     switchToTheme,
     initializeTheme,
-    loadAllThemes,
     updateCurrentColors,
     saveCurrentTheme,
     resetCurrentTheme,
     refreshEditorTheme,
     applyThemeToDOM,
   };
-});
+});

frontend/src/views/editor/Editor.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, ref} from 'vue';
-import {useEditorStore} from '@/stores/editorStore';
-import {useDocumentStore} from '@/stores/documentStore';
-import {useConfigStore} from '@/stores/configStore';
-import {createWheelZoomHandler} from './basic/wheelZoomExtension';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useEditorStore } from '@/stores/editorStore';
+import { useDocumentStore } from '@/stores/documentStore';
+import { useConfigStore } from '@/stores/configStore';
 import Toolbar from '@/components/toolbar/Toolbar.vue';
-import {useWindowStore} from "@/stores/windowStore";
+import { useWindowStore } from '@/stores/windowStore';
 import LoadingScreen from '@/components/loading/LoadingScreen.vue';
-import {useTabStore} from "@/stores/tabStore";
+import { useTabStore } from '@/stores/tabStore';
+import ContextMenu from './contextMenu/ContextMenu.vue';
+import { contextMenuManager } from './contextMenu/manager';
 
 const editorStore = useEditorStore();
 const documentStore = useDocumentStore();
@@ -19,47 +20,31 @@ const editorElement = ref<HTMLElement | null>(null);
 
 const enableLoadingAnimation = computed(() => configStore.config.general.enableLoadingAnimation);
 
-// 创建滚轮缩放处理器
-const wheelHandler = createWheelZoomHandler(
-    configStore.increaseFontSize,
-    configStore.decreaseFontSize
-);
-
 onMounted(async () => {
   if (!editorElement.value) return;
 
-  // 从URL查询参数中获取documentId
   const urlDocumentId = windowStore.currentDocumentId ? parseInt(windowStore.currentDocumentId) : undefined;
 
-  // 初始化文档存储，优先使用URL参数中的文档ID
   await documentStore.initialize(urlDocumentId);
 
-  // 设置编辑器容器
   editorStore.setEditorContainer(editorElement.value);
 
   await tabStore.initializeTab();
-
-  // 添加滚轮事件监听
-  editorElement.value.addEventListener('wheel', wheelHandler, {passive: false});
 });
 
 onBeforeUnmount(() => {
-  // 移除滚轮事件监听
-  if (editorElement.value) {
-    editorElement.value.removeEventListener('wheel', wheelHandler);
-  }
-  editorStore.clearAllEditors();
-
+  contextMenuManager.destroy();
 });
 </script>
 
 <template>
   <div class="editor-container">
-    <div ref="editorElement" class="editor"></div>
-    <Toolbar/>
     <transition name="loading-fade">
-      <LoadingScreen v-if="editorStore.isLoading && enableLoadingAnimation" text="VOIDRAFT"/>
+      <LoadingScreen v-if="editorStore.isLoading && enableLoadingAnimation" text="VOIDRAFT" />
     </transition>
+    <div ref="editorElement" class="editor"></div>
+    <Toolbar />
+    <ContextMenu :portal-target="editorElement" />
   </div>
 </template>
 
@@ -76,6 +61,7 @@ onBeforeUnmount(() => {
     width: 100%;
     flex: 1;
     overflow: hidden;
+    position: relative;
   }
 }
 
@@ -88,7 +74,6 @@ onBeforeUnmount(() => {
   overflow: auto;
 }
 
-// 加载动画过渡效果
 .loading-fade-enter-active,
 .loading-fade-leave-active {
   transition: opacity 0.3s ease;
@@ -98,4 +83,4 @@ onBeforeUnmount(() => {
 .loading-fade-leave-to {
   opacity: 0;
 }
-</style>
+</style>

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

@@ -1,34 +1,48 @@
-import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
-import { useEditorStore } from '@/stores/editorStore';
+import {EditorView, ViewPlugin, ViewUpdate} from '@codemirror/view';
+import type {Text} from '@codemirror/state';
+import {useEditorStore} from '@/stores/editorStore';
 
 /**
- * 内容变化监听插件 - 集成文档和编辑器管理
  */
 export function createContentChangePlugin() {
   return ViewPlugin.fromClass(
     class ContentChangePlugin {
-      private editorStore = useEditorStore();
-      private lastContent = '';
+      private readonly editorStore = useEditorStore();
+      private lastDoc: Text;
+      private rafId: number | null = null;
+      private pendingNotification = false;
 
       constructor(private view: EditorView) {
-        this.lastContent = view.state.doc.toString();
+        this.lastDoc = view.state.doc;
       }
 
       update(update: ViewUpdate) {
-        if (!update.docChanged) return;
+        if (!update.docChanged || update.state.doc === this.lastDoc) {
+          return;
+        }
 
-        const newContent = this.view.state.doc.toString();
-        if (newContent === this.lastContent) return;
-
-        this.lastContent = newContent;
-        
-        this.editorStore.onContentChange();
-        
+        this.lastDoc = update.state.doc;
+        this.scheduleNotification();
       }
 
       destroy() {
+        if (this.rafId !== null) {
+          cancelAnimationFrame(this.rafId);
+          this.rafId = null;
+        }
+        this.pendingNotification = false;
+      }
 
+      private scheduleNotification() {
+        if (this.pendingNotification) return;
+
+        this.pendingNotification = true;
+        this.rafId = requestAnimationFrame(() => {
+          this.pendingNotification = false;
+          this.rafId = null;
+          this.editorStore.onContentChange();
+        });
       }
     }
   );
-} 
+}

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

@@ -1,22 +1,40 @@
-// 处理滚轮缩放字体的事件处理函数
-export const createWheelZoomHandler = (
-  increaseFontSize: () => void,
-  decreaseFontSize: () => void
-) => {
-  return (event: WheelEvent) => {
-    // 检查是否按住了Ctrl键
-    if (event.ctrlKey) {
-      // 阻止默认行为（防止页面缩放）
-      event.preventDefault();
-      
-      // 根据滚轮方向增大或减小字体
-      if (event.deltaY < 0) {
-        // 向上滚动，增大字体
-        increaseFontSize();
-      } else {
-        // 向下滚动，减小字体
-        decreaseFontSize();
-      }
+import {EditorView} from '@codemirror/view';
+import type {Extension} from '@codemirror/state';
+
+type FontAdjuster = () => Promise<void> | void;
+
+const runAdjuster = (adjuster: FontAdjuster) => {
+  try {
+    const result = adjuster();
+    if (result && typeof (result as Promise<void>).then === 'function') {
+      (result as Promise<void>).catch((error) => {
+        console.error('Failed to adjust font size:', error);
+      });
     }
-  };
-}; 
+  } catch (error) {
+    console.error('Failed to adjust font size:', error);
+  }
+};
+
+export const createWheelZoomExtension = (
+  increaseFontSize: FontAdjuster,
+  decreaseFontSize: FontAdjuster
+): Extension => {
+  return EditorView.domEventHandlers({
+    wheel(event) {
+      if (!event.ctrlKey) {
+        return false;
+      }
+
+      event.preventDefault();
+
+      if (event.deltaY < 0) {
+        runAdjuster(increaseFontSize);
+      } else if (event.deltaY > 0) {
+        runAdjuster(decreaseFontSize);
+      }
+
+      return true;
+    }
+  });
+};

frontend/src/views/editor/contextMenu/ContextMenu.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import { contextMenuManager } from './manager';
+import type { RenderMenuItem } from './menuSchema';
+
+const props = defineProps<{
+  portalTarget?: HTMLElement | null;
+}>();
+
+const menuState = contextMenuManager.useState();
+const menuRef = ref<HTMLDivElement | null>(null);
+const adjustedPosition = ref({ x: 0, y: 0 });
+
+const isVisible = computed(() => menuState.value.visible);
+const items = computed(() => menuState.value.items);
+const position = computed(() => menuState.value.position);
+const teleportTarget = computed<HTMLElement | string>(() => props.portalTarget ?? 'body');
+
+watch(
+  position,
+  (newPosition) => {
+    adjustedPosition.value = { ...newPosition };
+    if (isVisible.value) {
+      nextTick(adjustMenuWithinViewport);
+    }
+  },
+  { deep: true }
+);
+
+watch(isVisible, (visible) => {
+  if (visible) {
+    nextTick(adjustMenuWithinViewport);
+  }
+});
+
+const menuStyle = computed(() => ({
+  left: `${adjustedPosition.value.x}px`,
+  top: `${adjustedPosition.value.y}px`
+}));
+
+async function adjustMenuWithinViewport() {
+  await nextTick();
+  const menuEl = menuRef.value;
+  if (!menuEl) return;
+
+  const rect = menuEl.getBoundingClientRect();
+  let nextX = adjustedPosition.value.x;
+  let nextY = adjustedPosition.value.y;
+
+  if (rect.right > window.innerWidth) {
+    nextX = Math.max(0, window.innerWidth - rect.width - 8);
+  }
+
+  if (rect.bottom > window.innerHeight) {
+    nextY = Math.max(0, window.innerHeight - rect.height - 8);
+  }
+
+  adjustedPosition.value = { x: nextX, y: nextY };
+}
+
+function handleItemClick(item: RenderMenuItem) {
+  if (item.type !== "action" || item.disabled) {
+    return;
+  }
+  contextMenuManager.runCommand(item);
+}
+
+function handleOverlayMouseDown() {
+  contextMenuManager.hide();
+}
+
+function stopPropagation(event: MouseEvent) {
+  event.stopPropagation();
+}
+</script>
+
+<template>
+  <Teleport :to="teleportTarget">
+    <template v-if="isVisible">
+      <div class="cm-context-overlay" @mousedown="handleOverlayMouseDown" />
+      <div
+        ref="menuRef"
+        class="cm-context-menu show"
+        :style="menuStyle"
+        role="menu"
+        @contextmenu.prevent
+        @mousedown="stopPropagation"
+      >
+        <template v-for="item in items" :key="item.id">
+          <div v-if="item.type === 'separator'" class="cm-context-menu-divider" />
+          <div
+            v-else
+            class="cm-context-menu-item"
+            :class="{ 'is-disabled': item.disabled }"
+            role="menuitem"
+            :aria-disabled="item.disabled ? 'true' : 'false'"
+            @click="handleItemClick(item)"
+          >
+            <div class="cm-context-menu-item-label">
+              <span>{{ item.label }}</span>
+            </div>
+            <span v-if="item.shortcut" class="cm-context-menu-item-shortcut">
+              {{ item.shortcut }}
+            </span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+.cm-context-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 9000;
+  background: transparent;
+}
+
+.cm-context-menu {
+  position: fixed;
+  min-width: 180px;
+  max-width: 320px;
+  padding: 4px 0;
+  border-radius: 3px;
+  background-color: var(--settings-card-bg, #1c1c1e);
+  color: var(--settings-text, #f6f6f6);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  z-index: 10000;
+  opacity: 0;
+  transform: scale(0.96);
+  transform-origin: top left;
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+.cm-context-menu.show {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.cm-context-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  white-space: nowrap;
+}
+
+.cm-context-menu-item:hover {
+  background-color: var(--toolbar-button-hover);
+  color: var(--toolbar-text, #ffffff);
+}
+
+.cm-context-menu-item.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cm-context-menu-item-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cm-context-menu-item-shortcut {
+  font-size: 12px;
+  opacity: 0.65;
+}
+
+.cm-context-menu-divider {
+  height: 1px;
+  margin: 4px 0;
+  border: none;
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+</style>

frontend/src/views/editor/contextMenu/contextMenu.css

@@ -1,156 +0,0 @@
-/**
- * 编辑器上下文菜单样式
- * 支持系统主题自动适配
- */
-
-.cm-context-menu {
-  position: fixed;
-  background-color: var(--settings-card-bg);
-  color: var(--settings-text);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  padding: 4px 0;
-  /* 优化阴影效果，只在右下角显示自然的阴影 */
-  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
-  min-width: 200px;
-  max-width: 320px;
-  z-index: 9999;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  opacity: 0;
-  transform: scale(0.95);
-  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
-  overflow: visible; /* 确保子菜单可以显示在外部 */
-}
-
-.cm-context-menu-item {
-  padding: 8px 12px;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 14px;
-  transition: all 0.1s ease;
-  position: relative;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.cm-context-menu-item:hover {
-  background-color: var(--toolbar-button-hover);
-  color: var(--toolbar-text);
-}
-
-.cm-context-menu-item-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.cm-context-menu-item-shortcut {
-  opacity: 0.7;
-  font-size: 12px;
-  padding: 2px 4px;
-  border-radius: 4px;
-  background-color: var(--settings-input-bg);
-  color: var(--settings-text-secondary);
-  margin-left: 16px;
-}
-
-.cm-context-menu-item-ripple {
-  position: absolute;
-  border-radius: 50%;
-  background-color: var(--selection-bg);
-  width: 100px;
-  height: 100px;
-  opacity: 0.5;
-  transform: scale(0);
-  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
-}
-
-/* 菜单分组标题样式 */
-.cm-context-menu-group-title {
-  padding: 6px 12px;
-  font-size: 12px;
-  color: var(--text-secondary);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  user-select: none;
-}
-
-/* 菜单分隔线样式 */
-.cm-context-menu-divider {
-  height: 1px;
-  background-color: var(--border-color);
-  margin: 4px 0;
-}
-
-/* 子菜单样式 */
-.cm-context-submenu-container {
-  position: relative;
-}
-
-.cm-context-menu-item-with-submenu {
-  position: relative;
-}
-
-.cm-context-menu-item-with-submenu::after {
-  content: "›";
-  position: absolute;
-  right: 12px;
-  font-size: 16px;
-  opacity: 0.7;
-}
-
-.cm-context-submenu {
-  position: fixed; /* 改为fixed定位，避免受父元素影响 */
-  min-width: 180px;
-  opacity: 0;
-  pointer-events: none;
-  transform: translateX(10px);
-  transition: opacity 0.2s ease, transform 0.2s ease;
-  z-index: 10000;
-  border-radius: 6px;
-  background-color: var(--settings-card-bg);
-  color: var(--settings-text);
-  border: 1px solid var(--border-color);
-  padding: 4px 0;
-  /* 子菜单也使用相同的阴影效果 */
-  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-}
-
-.cm-context-menu-item-with-submenu:hover .cm-context-submenu {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateX(0);
-}
-
-/* 深色主题下的特殊样式 */
-:root[data-theme="dark"] .cm-context-menu {
-  /* 深色主题下阴影更深，但仍然只在右下角 */
-  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
-}
-
-:root[data-theme="dark"] .cm-context-submenu {
-  /* 深色主题下子菜单阴影 */
-  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
-}
-
-:root[data-theme="dark"] .cm-context-menu-divider {
-  background-color: var(--dark-border-color);
-  opacity: 0.6;
-}
-
-/* 动画相关类 */
-.cm-context-menu.show {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.cm-context-menu.hide {
-  opacity: 0;
-} 

frontend/src/views/editor/contextMenu/contextMenuView.ts

@@ -1,585 +0,0 @@
-/**
- * 上下文菜单视图实现
- */
-
-import { EditorView } from "@codemirror/view";
-import { MenuItem } from "../contextMenu";
-import "./contextMenu.css";
-
-// 为Window对象添加cmSubmenus属性
-declare global {
-  interface Window {
-    cmSubmenus?: Map<string, HTMLElement>;
-  }
-}
-
-/**
- * 菜单项元素池，用于复用DOM元素
- */
-class MenuItemPool {
-  private pool: HTMLElement[] = [];
-  private maxPoolSize = 50; // 最大池大小
-
-  /**
-   * 获取或创建菜单项元素
-   */
-  get(): HTMLElement {
-    if (this.pool.length > 0) {
-      return this.pool.pop()!;
-    }
-    
-    const menuItem = document.createElement("div");
-    menuItem.className = "cm-context-menu-item";
-    return menuItem;
-  }
-
-  /**
-   * 回收菜单项元素
-   */
-  release(element: HTMLElement): void {
-    if (this.pool.length < this.maxPoolSize) {
-      // 清理元素状态
-      element.className = "cm-context-menu-item";
-      element.innerHTML = "";
-      element.style.cssText = "";
-      
-      // 移除所有事件监听器（通过克隆节点）
-      const cleanElement = element.cloneNode(false) as HTMLElement;
-      this.pool.push(cleanElement);
-    }
-  }
-
-  /**
-   * 清空池
-   */
-  clear(): void {
-    this.pool.length = 0;
-  }
-}
-
-/**
- * 上下文菜单管理器
- */
-class ContextMenuManager {
-  private static instance: ContextMenuManager;
-  
-  private menuElement: HTMLElement | null = null;
-  private submenuPool: Map<string, HTMLElement> = new Map();
-  private menuItemPool = new MenuItemPool();
-  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;
-  private keyDownHandler: ((e: KeyboardEvent) => void) | null = null;
-  private currentView: EditorView | null = null;
-  private activeSubmenus: Set<HTMLElement> = new Set();
-  private ripplePool: HTMLElement[] = [];
-  
-  // 事件委托处理器
-  private menuClickHandler: ((e: MouseEvent) => void) | null = null;
-  private menuMouseHandler: ((e: MouseEvent) => void) | null = null;
-
-  private constructor() {
-    this.initializeEventHandlers();
-  }
-
-  /**
-   * 获取单例实例
-   */
-  static getInstance(): ContextMenuManager {
-    if (!ContextMenuManager.instance) {
-      ContextMenuManager.instance = new ContextMenuManager();
-    }
-    return ContextMenuManager.instance;
-  }
-
-  /**
-   * 初始化事件处理器
-   */
-  private initializeEventHandlers(): void {
-    // 点击事件委托
-    this.menuClickHandler = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      const menuItem = target.closest('.cm-context-menu-item') as HTMLElement;
-      
-      if (menuItem && menuItem.dataset.command) {
-        e.preventDefault();
-        e.stopPropagation();
-        
-        // 添加点击动画
-        this.addRippleEffect(menuItem, e);
-        
-        // 执行命令
-        const commandName = menuItem.dataset.command;
-        const command = this.getCommandByName(commandName);
-        if (command && this.currentView) {
-          command(this.currentView);
-        }
-        
-        // 隐藏菜单
-        this.hide();
-      }
-    };
-
-    // 鼠标事件委托
-    this.menuMouseHandler = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      const menuItem = target.closest('.cm-context-menu-item') as HTMLElement;
-      
-      if (!menuItem) return;
-
-      if (e.type === 'mouseenter') {
-        this.handleMenuItemMouseEnter(menuItem);
-      } else if (e.type === 'mouseleave') {
-        this.handleMenuItemMouseLeave(menuItem, e);
-      }
-    };
-
-    // 键盘事件处理器
-    this.keyDownHandler = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        this.hide();
-      }
-    };
-
-    // 点击外部关闭处理器
-    this.clickOutsideHandler = (e: MouseEvent) => {
-      if (this.menuElement && !this.isClickInsideMenu(e.target as Node)) {
-        this.hide();
-      }
-    };
-  }
-
-  /**
-   * 获取或创建主菜单元素
-   */
-  private getOrCreateMenuElement(): HTMLElement {
-    if (!this.menuElement) {
-      this.menuElement = document.createElement("div");
-      this.menuElement.className = "cm-context-menu";
-      this.menuElement.style.display = "none";
-      document.body.appendChild(this.menuElement);
-      
-      // 阻止菜单内右键点击冒泡
-      this.menuElement.addEventListener('contextmenu', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-      });
-
-      // 添加事件委托
-      this.menuElement.addEventListener('click', this.menuClickHandler!);
-      this.menuElement.addEventListener('mouseenter', this.menuMouseHandler!, true);
-      this.menuElement.addEventListener('mouseleave', this.menuMouseHandler!, true);
-    }
-    return this.menuElement;
-  }
-
-  /**
-   * 创建或获取子菜单元素
-   */
-  private getOrCreateSubmenu(id: string): HTMLElement {
-    if (!this.submenuPool.has(id)) {
-      const submenu = document.createElement("div");
-      submenu.className = "cm-context-menu cm-context-submenu";
-      submenu.style.display = "none";
-      document.body.appendChild(submenu);
-      this.submenuPool.set(id, submenu);
-      
-      // 阻止子菜单点击事件冒泡
-      submenu.addEventListener('click', (e) => {
-        e.stopPropagation();
-      });
-
-      // 添加事件委托
-      submenu.addEventListener('click', this.menuClickHandler!);
-      submenu.addEventListener('mouseenter', this.menuMouseHandler!, true);
-      submenu.addEventListener('mouseleave', this.menuMouseHandler!, true);
-    }
-    return this.submenuPool.get(id)!;
-  }
-
-  /**
-   * 创建菜单项DOM元素
-   */
-  private createMenuItemElement(item: MenuItem): HTMLElement {
-    const menuItem = this.menuItemPool.get();
-    
-    // 如果有子菜单，添加相应类
-    if (item.submenu && item.submenu.length > 0) {
-      menuItem.classList.add("cm-context-menu-item-with-submenu");
-    }
-    
-    // 创建内容容器
-    const contentContainer = document.createElement("div");
-    contentContainer.className = "cm-context-menu-item-label";
-    
-    // 标签文本
-    const label = document.createElement("span");
-    label.textContent = item.label;
-    contentContainer.appendChild(label);
-    menuItem.appendChild(contentContainer);
-    
-    // 快捷键提示（如果有）
-    if (item.shortcut) {
-      const shortcut = document.createElement("span");
-      shortcut.className = "cm-context-menu-item-shortcut";
-      shortcut.textContent = item.shortcut;
-      menuItem.appendChild(shortcut);
-    }
-    
-    // 存储命令信息用于事件委托
-    if (item.command) {
-      menuItem.dataset.command = this.registerCommand(item.command);
-    }
-    
-    // 处理子菜单
-    if (item.submenu && item.submenu.length > 0) {
-      const submenuId = `submenu-${item.label.replace(/\s+/g, '-').toLowerCase()}`;
-      menuItem.dataset.submenuId = submenuId;
-      
-      const submenu = this.getOrCreateSubmenu(submenuId);
-      this.populateSubmenu(submenu, item.submenu);
-      
-      // 记录子菜单
-      if (!window.cmSubmenus) {
-        window.cmSubmenus = new Map();
-      }
-      window.cmSubmenus.set(submenuId, submenu);
-    }
-    
-    return menuItem;
-  }
-
-  /**
-   * 填充子菜单内容
-   */
-  private populateSubmenu(submenu: HTMLElement, items: MenuItem[]): void {
-    // 清空现有内容
-    while (submenu.firstChild) {
-      submenu.removeChild(submenu.firstChild);
-    }
-    
-    // 添加子菜单项
-    items.forEach(item => {
-      const subMenuItemElement = this.createMenuItemElement(item);
-      submenu.appendChild(subMenuItemElement);
-    });
-    
-    // 初始状态设置为隐藏
-    submenu.style.opacity = '0';
-    submenu.style.pointerEvents = 'none';
-    submenu.style.visibility = 'hidden';
-    submenu.style.display = 'block';
-  }
-
-  /**
-   * 命令注册和管理
-   */
-  private commands: Map<string, (view: EditorView) => void> = new Map();
-  private commandCounter = 0;
-
-  private registerCommand(command: (view: EditorView) => void): string {
-    const commandId = `cmd_${this.commandCounter++}`;
-    this.commands.set(commandId, command);
-    return commandId;
-  }
-
-  private getCommandByName(commandId: string): ((view: EditorView) => void) | undefined {
-    return this.commands.get(commandId);
-  }
-
-  /**
-   * 处理菜单项鼠标进入事件
-   */
-  private handleMenuItemMouseEnter(menuItem: HTMLElement): void {
-    const submenuId = menuItem.dataset.submenuId;
-    if (!submenuId) return;
-
-    const submenu = this.submenuPool.get(submenuId);
-    if (!submenu) return;
-
-    const rect = menuItem.getBoundingClientRect();
-    
-    // 计算子菜单位置
-    submenu.style.left = `${rect.right}px`;
-    submenu.style.top = `${rect.top}px`;
-    
-    // 检查子菜单是否会超出屏幕
-    requestAnimationFrame(() => {
-      const submenuRect = submenu.getBoundingClientRect();
-      if (submenuRect.right > window.innerWidth) {
-        submenu.style.left = `${rect.left - submenuRect.width}px`;
-      }
-      
-      if (submenuRect.bottom > window.innerHeight) {
-        const newTop = rect.top - (submenuRect.bottom - window.innerHeight);
-        submenu.style.top = `${Math.max(0, newTop)}px`;
-      }
-    });
-    
-    // 显示子菜单
-    submenu.style.opacity = '1';
-    submenu.style.pointerEvents = 'auto';
-    submenu.style.visibility = 'visible';
-    submenu.style.transform = 'translateX(0)';
-    
-    this.activeSubmenus.add(submenu);
-  }
-
-  /**
-   * 处理菜单项鼠标离开事件
-   */
-  private handleMenuItemMouseLeave(menuItem: HTMLElement, e: MouseEvent): void {
-    const submenuId = menuItem.dataset.submenuId;
-    if (!submenuId) return;
-
-    const submenu = this.submenuPool.get(submenuId);
-    if (!submenu) return;
-
-    // 检查是否移动到子菜单上
-    const toElement = e.relatedTarget as HTMLElement;
-    if (submenu.contains(toElement)) {
-      return;
-    }
-    
-    this.hideSubmenu(submenu);
-  }
-
-  /**
-   * 隐藏子菜单
-   */
-  private hideSubmenu(submenu: HTMLElement): void {
-    submenu.style.opacity = '0';
-    submenu.style.pointerEvents = 'none';
-    submenu.style.transform = 'translateX(10px)';
-    
-    setTimeout(() => {
-      if (submenu.style.opacity === '0') {
-        submenu.style.visibility = 'hidden';
-      }
-    }, 200);
-    
-    this.activeSubmenus.delete(submenu);
-  }
-
-  /**
-   * 添加点击波纹效果
-   */
-  private addRippleEffect(menuItem: HTMLElement, e: MouseEvent): void {
-    let ripple: HTMLElement;
-    
-    if (this.ripplePool.length > 0) {
-      ripple = this.ripplePool.pop()!;
-    } else {
-      ripple = document.createElement("div");
-      ripple.className = "cm-context-menu-item-ripple";
-    }
-    
-    // 计算相对位置
-    const rect = menuItem.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    
-    ripple.style.left = (x - 50) + "px";
-    ripple.style.top = (y - 50) + "px";
-    ripple.style.transform = "scale(0)";
-    ripple.style.opacity = "1";
-    
-    menuItem.appendChild(ripple);
-    
-    // 执行动画
-    requestAnimationFrame(() => {
-      ripple.style.transform = "scale(1)";
-      ripple.style.opacity = "0";
-      
-      setTimeout(() => {
-        if (ripple.parentNode === menuItem) {
-          menuItem.removeChild(ripple);
-          this.ripplePool.push(ripple);
-        }
-      }, 300);
-    });
-  }
-
-  /**
-   * 检查点击是否在菜单内
-   */
-  private isClickInsideMenu(target: Node): boolean {
-    if (this.menuElement && this.menuElement.contains(target)) {
-      return true;
-    }
-    
-    // 检查是否在子菜单内
-    for (const submenu of this.activeSubmenus) {
-      if (submenu.contains(target)) {
-        return true;
-      }
-    }
-    
-    return false;
-  }
-
-  /**
-   * 定位菜单元素
-   */
-  private positionMenu(menu: HTMLElement, clientX: number, clientY: number): void {
-    const windowWidth = window.innerWidth;
-    const windowHeight = window.innerHeight;
-    
-    let left = clientX;
-    let top = clientY;
-
-    requestAnimationFrame(() => {
-      const menuWidth = menu.offsetWidth;
-      const menuHeight = menu.offsetHeight;
-      
-      if (left + menuWidth > windowWidth) {
-        left = windowWidth - menuWidth - 5;
-      }
-      
-      if (top + menuHeight > windowHeight) {
-        top = windowHeight - menuHeight - 5;
-      }
-      
-      menu.style.left = `${left}px`;
-      menu.style.top = `${top}px`;
-    });
-  }
-
-  /**
-   * 显示上下文菜单
-   */
-  show(view: EditorView, clientX: number, clientY: number, items: MenuItem[]): void {
-    this.currentView = view;
-    
-    // 获取或创建菜单元素
-    const menu = this.getOrCreateMenuElement();
-    
-    // 隐藏所有子菜单
-    this.hideAllSubmenus();
-    
-    // 清空现有菜单项并回收到池中
-    while (menu.firstChild) {
-      const child = menu.firstChild as HTMLElement;
-      if (child.classList.contains('cm-context-menu-item')) {
-        this.menuItemPool.release(child);
-      }
-      menu.removeChild(child);
-    }
-    
-    // 清空命令注册
-    this.commands.clear();
-    this.commandCounter = 0;
-    
-    // 添加主菜单项
-    items.forEach(item => {
-      const menuItemElement = this.createMenuItemElement(item);
-      menu.appendChild(menuItemElement);
-    });
-    
-    // 显示菜单
-    menu.style.display = "block";
-    
-    // 定位菜单
-    this.positionMenu(menu, clientX, clientY);
-    
-    // 添加全局事件监听器
-    document.addEventListener("click", this.clickOutsideHandler!, true);
-    document.addEventListener("keydown", this.keyDownHandler!);
-    
-    // 触发显示动画
-    requestAnimationFrame(() => {
-      if (menu) {
-        menu.classList.add("show");
-      }
-    });
-  }
-
-  /**
-   * 隐藏所有子菜单
-   */
-  private hideAllSubmenus(): void {
-    this.activeSubmenus.forEach(submenu => {
-      this.hideSubmenu(submenu);
-    });
-    this.activeSubmenus.clear();
-    
-    if (window.cmSubmenus) {
-      window.cmSubmenus.forEach((submenu) => {
-        submenu.style.opacity = '0';
-        submenu.style.pointerEvents = 'none';
-        submenu.style.visibility = 'hidden';
-        submenu.style.transform = 'translateX(10px)';
-      });
-    }
-  }
-
-  /**
-   * 隐藏上下文菜单
-   */
-  hide(): void {
-    // 隐藏所有子菜单
-    this.hideAllSubmenus();
-
-    if (this.menuElement) {
-      // 添加淡出动画
-      this.menuElement.classList.remove("show");
-      this.menuElement.classList.add("hide");
-      
-      // 等待动画完成后隐藏
-      setTimeout(() => {
-        if (this.menuElement) {
-          this.menuElement.style.display = "none";
-          this.menuElement.classList.remove("hide");
-        }
-      }, 150);
-    }
-    
-    // 移除全局事件监听器
-    if (this.clickOutsideHandler) {
-      document.removeEventListener("click", this.clickOutsideHandler, true);
-    }
-    
-    if (this.keyDownHandler) {
-      document.removeEventListener("keydown", this.keyDownHandler);
-    }
-    
-    this.currentView = null;
-  }
-
-  /**
-   * 销毁管理器
-   */
-  destroy(): void {
-    this.hide();
-    
-    if (this.menuElement) {
-      document.body.removeChild(this.menuElement);
-      this.menuElement = null;
-    }
-    
-    this.submenuPool.forEach(submenu => {
-      if (submenu.parentNode) {
-        document.body.removeChild(submenu);
-      }
-    });
-    this.submenuPool.clear();
-    
-    this.menuItemPool.clear();
-    this.commands.clear();
-    this.activeSubmenus.clear();
-    this.ripplePool.length = 0;
-    
-    if (window.cmSubmenus) {
-      window.cmSubmenus.clear();
-    }
-  }
-}
-
-// 获取单例实例
-const contextMenuManager = ContextMenuManager.getInstance();
-
-/**
- * 显示上下文菜单
- */
-export function showContextMenu(view: EditorView, clientX: number, clientY: number, items: MenuItem[]): void {
-  contextMenuManager.show(view, clientX, clientY, items);
-}

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

@@ -1,174 +1,141 @@
-/**
- * 编辑器上下文菜单实现
- * 提供基本的复制、剪切、粘贴等操作，支持动态快捷键显示
- */
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+import { copyCommand, cutCommand, pasteCommand } from '../extensions/codeblock/copyPaste';
+import { KeyBindingCommand } from '@/../bindings/voidraft/internal/models/models';
+import { useKeybindingStore } from '@/stores/keybindingStore';
+import { undo, redo } from '@codemirror/commands';
+import i18n from '@/i18n';
+import { useSystemStore } from '@/stores/systemStore';
+import { showContextMenu } from './manager';
+import {
+  buildRegisteredMenu,
+  createMenuContext,
+  registerMenuNodes
+} from './menuSchema';
+import type { MenuSchemaNode } from './menuSchema';
 
-import { EditorView } from "@codemirror/view";
-import { Extension } from "@codemirror/state";
-import { copyCommand, cutCommand, pasteCommand } from "../extensions/codeblock/copyPaste";
-import { KeyBindingCommand } from "@/../bindings/voidraft/internal/models/models";
-import { useKeybindingStore } from "@/stores/keybindingStore";
-import { 
-  undo, redo
-} from "@codemirror/commands";
-import i18n from "@/i18n";
-import {useSystemStore} from "@/stores/systemStore";
 
-/**
- * 菜单项类型定义
- */
-export interface MenuItem {
-  /** 菜单项显示文本 */
-  label: string;
-  
-  /** 点击时执行的命令 (如果有子菜单，可以为null) */
-  command?: (view: EditorView) => boolean;
-  
-  /** 快捷键提示文本 (可选) */
-  shortcut?: string;
-  
-  /** 子菜单项 (可选) */
-  submenu?: MenuItem[];
-}
-
-// 导入相关功能
-import { showContextMenu } from "./contextMenuView";
-
-/**
- * 获取翻译文本
- * @param key 翻译键
- * @returns 翻译后的文本
- */
 function t(key: string): string {
   return i18n.global.t(key);
 }
 
-/**
- * 获取快捷键显示文本
- * @param command 命令ID
- * @returns 快捷键显示文本
- */
-function getShortcutText(command: KeyBindingCommand): string {
+
+function formatKeyBinding(keyBinding: string): string {
+  const systemStore = useSystemStore();
+  const isMac = systemStore.isMacOS;
+
+  return keyBinding
+    .replace("Mod", isMac ? "Cmd" : "Ctrl")
+    .replace("Shift", "Shift")
+    .replace("Alt", isMac ? "Option" : "Alt")
+    .replace("Ctrl", isMac ? "Ctrl" : "Ctrl")
+    .replace(/-/g, " + ");
+}
+
+const shortcutCache = new Map<KeyBindingCommand, string>();
+
+
+function getShortcutText(command?: KeyBindingCommand): string {
+  if (command === undefined) {
+    return "";
+  }
+
+  const cached = shortcutCache.get(command);
+  if (cached !== undefined) {
+    return cached;
+  }
+
   try {
     const keybindingStore = useKeybindingStore();
-    
-    // 如果找到该命令的快捷键配置
-    const binding = keybindingStore.keyBindings.find(kb => 
-      kb.command === command && kb.enabled
+    const binding = keybindingStore.keyBindings.find(
+      (kb) => kb.command === command && kb.enabled
     );
-    
-    if (binding && binding.key) {
-      // 格式化快捷键显示
-      return formatKeyBinding(binding.key);
+
+    if (binding?.key) {
+      const formatted = formatKeyBinding(binding.key);
+      shortcutCache.set(command, formatted);
+      return formatted;
     }
   } catch (error) {
     console.warn("An error occurred while getting the shortcut:", error);
   }
-  
+
+  shortcutCache.set(command, "");
   return "";
 }
 
-/**
- * 格式化快捷键显示
- * @param keyBinding 快捷键字符串
- * @returns 格式化后的显示文本
- */
-function formatKeyBinding(keyBinding: string): string {
-  // 获取系统信息
-  const systemStore = useSystemStore();
-  const isMac = systemStore.isMacOS;
-  
-  // 替换修饰键名称为更友好的显示
-  return keyBinding
-    .replace("Mod", isMac ? "⌘" : "Ctrl")
-    .replace("Shift", isMac ? "⇧" : "Shift")
-    .replace("Alt", isMac ? "⌥" : "Alt")
-    .replace("Ctrl", isMac ? "⌃" : "Ctrl")
-    .replace(/-/g, " + ");
-}
 
-
-/**
- * 创建编辑菜单项
- */
-function createEditItems(): MenuItem[] {
+function getBuiltinMenuNodes(): MenuSchemaNode[] {
   return [
     {
-      label: t("keybindings.commands.blockCopy"),
+      id: "copy",
+      labelKey: "keybindings.commands.blockCopy",
       command: copyCommand,
-      shortcut: getShortcutText(KeyBindingCommand.BlockCopyCommand)
+      shortcutCommand: KeyBindingCommand.BlockCopyCommand,
+      enabled: (context) => context.hasSelection
     },
     {
-      label: t("keybindings.commands.blockCut"),
+      id: "cut",
+      labelKey: "keybindings.commands.blockCut",
       command: cutCommand,
-      shortcut: getShortcutText(KeyBindingCommand.BlockCutCommand)
+      shortcutCommand: KeyBindingCommand.BlockCutCommand,
+      visible: (context) => context.isEditable,
+      enabled: (context) => context.hasSelection && context.isEditable
     },
     {
-      label: t("keybindings.commands.blockPaste"),
+      id: "paste",
+      labelKey: "keybindings.commands.blockPaste",
       command: pasteCommand,
-      shortcut: getShortcutText(KeyBindingCommand.BlockPasteCommand)
-    }
-  ];
-}
-
-/**
- * 创建历史操作菜单项
- */
-function createHistoryItems(): MenuItem[] {
-  return [
-    {
-      label: t("keybindings.commands.historyUndo"),
-      command: undo,
-      shortcut: getShortcutText(KeyBindingCommand.HistoryUndoCommand)
+      shortcutCommand: KeyBindingCommand.BlockPasteCommand,
+      visible: (context) => context.isEditable
     },
     {
-      label: t("keybindings.commands.historyRedo"),
+      id: "undo",
+      labelKey: "keybindings.commands.historyUndo",
+      command: undo,
+      shortcutCommand: KeyBindingCommand.HistoryUndoCommand,
+      visible: (context) => context.isEditable
+    },
+    {
+      id: "redo",
+      labelKey: "keybindings.commands.historyRedo",
       command: redo,
-      shortcut: getShortcutText(KeyBindingCommand.HistoryRedoCommand)
+      shortcutCommand: KeyBindingCommand.HistoryRedoCommand,
+      visible: (context) => context.isEditable
     }
   ];
 }
 
+let builtinMenuRegistered = false;
 
-/**
- * 创建主菜单项
- */
-function createMainMenuItems(): MenuItem[] {
-  // 基本编辑操作放在主菜单
-  const basicItems = createEditItems();
-  
-  // 历史操作放在主菜单
-  const historyItems = createHistoryItems();
-  
-  // 构建主菜单
-  return [
-    ...basicItems,
-    ...historyItems
-  ];
+function ensureBuiltinMenuRegistered(): void {
+  if (builtinMenuRegistered) return;
+  registerMenuNodes(getBuiltinMenuNodes());
+  builtinMenuRegistered = true;
 }
 
-/**
- * 创建编辑器上下文菜单
- */
+
 export function createEditorContextMenu(): Extension {
-  // 为编辑器添加右键事件处理
+  ensureBuiltinMenuRegistered();
+
   return EditorView.domEventHandlers({
     contextmenu: (event, view) => {
-      // 阻止默认右键菜单
       event.preventDefault();
-      
-      // 获取菜单项
-      const menuItems = createMainMenuItems();
-      
-      // 显示上下文菜单
+
+      const context = createMenuContext(view, event as MouseEvent);
+      const menuItems = buildRegisteredMenu(context, {
+        translate: t,
+        formatShortcut: getShortcutText
+      });
+
+      if (menuItems.length === 0) {
+        return false;
+      }
+
       showContextMenu(view, event.clientX, event.clientY, menuItems);
-      
       return true;
     }
   });
 }
 
-/**
- * 默认导出
- */
-export default createEditorContextMenu; 
+export default createEditorContextMenu;

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

@@ -0,0 +1,88 @@
+import type { EditorView } from '@codemirror/view';
+import { readonly, shallowRef, type ShallowRef } from 'vue';
+import type { RenderMenuItem } from './menuSchema';
+
+interface MenuPosition {
+  x: number;
+  y: number;
+}
+
+interface ContextMenuState {
+  visible: boolean;
+  position: MenuPosition;
+  items: RenderMenuItem[];
+  view: EditorView | null;
+}
+
+class ContextMenuManager {
+  private state: ShallowRef<ContextMenuState> = shallowRef({
+    visible: false,
+    position: { x: 0, y: 0 },
+    items: [] as RenderMenuItem[],
+    view: null as EditorView | null
+  });
+
+  useState() {
+    return readonly(this.state);
+  }
+
+  show(view: EditorView, clientX: number, clientY: number, items: RenderMenuItem[]): void {
+    this.state.value = {
+      visible: true,
+      position: { x: clientX, y: clientY },
+      items,
+      view
+    };
+  }
+
+  hide(): void {
+    if (!this.state.value.visible) {
+      return;
+    }
+
+    const previousPosition = this.state.value.position;
+    const view = this.state.value.view;
+    this.state.value = {
+      visible: false,
+      position: previousPosition,
+      items: [],
+      view: null
+    };
+
+    if (view) {
+      view.focus();
+    }
+  }
+
+  runCommand(item: RenderMenuItem): void {
+    if (item.type !== "action" || item.disabled) {
+      return;
+    }
+
+    const { view } = this.state.value;
+    if (item.command && view) {
+      item.command(view);
+    }
+    this.hide();
+  }
+
+  destroy(): void {
+    this.state.value = {
+      visible: false,
+      position: { x: 0, y: 0 },
+      items: [],
+      view: null
+    };
+  }
+}
+
+export const contextMenuManager = new ContextMenuManager();
+
+export function showContextMenu(
+  view: EditorView,
+  clientX: number,
+  clientY: number,
+  items: RenderMenuItem[]
+): void {
+  contextMenuManager.show(view, clientX, clientY, items);
+}

frontend/src/views/editor/contextMenu/menuSchema.ts

@@ -0,0 +1,102 @@
+import type { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import type { KeyBindingCommand } from '@/../bindings/voidraft/internal/models/models';
+
+export interface MenuContext {
+  view: EditorView;
+  event: MouseEvent;
+  hasSelection: boolean;
+  selectionText: string;
+  isEditable: boolean;
+}
+
+export type MenuSchemaNode =
+  | {
+      id: string;
+      type?: "action";
+      labelKey: string;
+      command?: (view: EditorView) => boolean;
+      shortcutCommand?: KeyBindingCommand;
+      visible?: (context: MenuContext) => boolean;
+      enabled?: (context: MenuContext) => boolean;
+    }
+  | {
+      id: string;
+      type: "separator";
+      visible?: (context: MenuContext) => boolean;
+    };
+
+export interface RenderMenuItem {
+  id: string;
+  type: "action" | "separator";
+  label?: string;
+  shortcut?: string;
+  disabled?: boolean;
+  command?: (view: EditorView) => boolean;
+}
+
+interface MenuBuildOptions {
+  translate: (key: string) => string;
+  formatShortcut: (command?: KeyBindingCommand) => string;
+}
+
+const menuRegistry: MenuSchemaNode[] = [];
+
+export function createMenuContext(view: EditorView, event: MouseEvent): MenuContext {
+  const { state } = view;
+  const hasSelection = state.selection.ranges.some((range) => !range.empty);
+  const selectionText = hasSelection
+    ? state.sliceDoc(state.selection.main.from, state.selection.main.to)
+    : "";
+  const isEditable = !state.facet(EditorState.readOnly);
+
+  return {
+    view,
+    event,
+    hasSelection,
+    selectionText,
+    isEditable
+  };
+}
+
+export function registerMenuNodes(nodes: MenuSchemaNode[]): void {
+  menuRegistry.push(...nodes);
+}
+
+export function buildRegisteredMenu(
+  context: MenuContext,
+  options: MenuBuildOptions
+): RenderMenuItem[] {
+  return menuRegistry
+    .map((node) => convertNode(node, context, options))
+    .filter((item): item is RenderMenuItem => Boolean(item));
+}
+
+function convertNode(
+  node: MenuSchemaNode,
+  context: MenuContext,
+  options: MenuBuildOptions
+): RenderMenuItem | null {
+  if (node.visible && !node.visible(context)) {
+    return null;
+  }
+
+  if (node.type === "separator") {
+    return {
+      id: node.id,
+      type: "separator"
+    };
+  }
+
+  const disabled = node.enabled ? !node.enabled(context) : false;
+  const shortcut = options.formatShortcut(node.shortcutCommand);
+
+  return {
+    id: node.id,
+    type: "action",
+    label: options.translate(node.labelKey),
+    shortcut: shortcut || undefined,
+    disabled,
+    command: node.command
+  };
+}

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

@@ -9,9 +9,8 @@ import {
 } from '@codemirror/view';
 import { Extension, Range } from '@codemirror/state';
 import * as runtime from "@wailsio/runtime";
-import { getNoteBlockFromPos } from '../codeblock/state';
 const pathStr = `<svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor"><path d="M607.934444 417.856853c-6.179746-6.1777-12.766768-11.746532-19.554358-16.910135l-0.01228 0.011256c-6.986111-6.719028-16.47216-10.857279-26.930349-10.857279-21.464871 0-38.864146 17.400299-38.864146 38.864146 0 9.497305 3.411703 18.196431 9.071609 24.947182l-0.001023 0c0.001023 0.001023 0.00307 0.00307 0.005117 0.004093 2.718925 3.242857 5.953595 6.03853 9.585309 8.251941 3.664459 3.021823 7.261381 5.997598 10.624988 9.361205l3.203972 3.204995c40.279379 40.229237 28.254507 109.539812-12.024871 149.820214L371.157763 796.383956c-40.278355 40.229237-105.761766 40.229237-146.042167 0l-3.229554-3.231601c-40.281425-40.278355-40.281425-105.809861 0-145.991002l75.93546-75.909877c9.742898-7.733125 15.997346-19.668968 15.997346-33.072233 0-23.312962-18.898419-42.211381-42.211381-42.211381-8.797363 0-16.963347 2.693342-23.725354 7.297197-0.021489-0.045025-0.044002-0.088004-0.066515-0.134053l-0.809435 0.757247c-2.989077 2.148943-5.691629 4.669346-8.025791 7.510044l-78.913281 73.841775c-74.178443 74.229608-74.178443 195.632609 0 269.758863l3.203972 3.202948c74.178443 74.127278 195.529255 74.127278 269.707698 0l171.829484-171.880649c74.076112-74.17435 80.357166-191.184297 6.282077-265.311575L607.934444 417.856853z"></path><path d="M855.61957 165.804257l-3.203972-3.203972c-74.17742-74.178443-195.528232-74.178443-269.706675 0L410.87944 334.479911c-74.178443 74.178443-78.263481 181.296089-4.085038 255.522628l3.152806 3.104711c3.368724 3.367701 6.865361 6.54302 10.434653 9.588379 2.583848 2.885723 5.618974 5.355985 8.992815 7.309476 0.025583 0.020466 0.052189 0.041956 0.077771 0.062422l0.011256-0.010233c5.377474 3.092431 11.608386 4.870938 18.257829 4.870938 20.263509 0 36.68962-16.428158 36.68962-36.68962 0-5.719258-1.309832-11.132548-3.645017-15.95846l0 0c-4.850471-10.891048-13.930267-17.521049-20.210297-23.802102l-3.15383-3.102664c-40.278355-40.278355-24.982998-98.79612 15.295358-139.074476l171.930791-171.830507c40.179095-40.280402 105.685018-40.280402 145.965419 0l3.206018 3.152806c40.279379 40.281425 40.279379 105.838513 0 146.06775l-75.686796 75.737962c-10.296507 7.628748-16.97358 19.865443-16.97358 33.662681 0 23.12365 18.745946 41.87062 41.87062 41.87062 8.048303 0 15.563464-2.275833 21.944801-6.211469 0.048095 0.081864 0.093121 0.157589 0.141216 0.240477l1.173732-1.083681c3.616364-2.421142 6.828522-5.393847 9.529027-8.792247l79.766718-73.603345C929.798013 361.334535 929.798013 239.981676 855.61957 165.804257z"></path></svg>`;
-const defaultRegexp = /\b((?:https?|ftp):\/\/[^\s/$.?#].[^\s]*)\b/gi;
+const defaultRegexp = /\b(([a-zA-Z][\w+\-.]*):\/\/[^\s/$.?#].[^\s]*)\b/gi;
 
 export interface HyperLinkState {
     at: number;
@@ -54,18 +53,8 @@ function hyperLinkDecorations(view: EditorView, anchor?: HyperLinkExtensionOptio
         const from = match.index;
         const to = from + match[0].length;
         
-        // 检查当前位置是否在 HTTP 代码块中
-        const block = getNoteBlockFromPos(view.state, from);
-        if (block && block.language.name === 'http') {
-            // 如果在 HTTP 代码块中，跳过超链接装饰
-            continue;
-        }
-        
         const linkMark = Decoration.mark({ 
-            class: 'cm-hyper-link-text',
-            attributes: {
-                'data-url': match[0]
-            }
+            class: 'cm-hyper-link-text'
         });
         widgets.push(linkMark.range(from, to));
         
@@ -91,14 +80,7 @@ const linkDecorator = (
 ) =>
     new MatchDecorator({
         regexp: regexp || defaultRegexp,
-        decorate: (add, from, to, match, view) => {
-            // 检查当前位置是否在 HTTP 代码块中
-            const block = getNoteBlockFromPos(view.state, from);
-            if (block && block.language.name === 'http') {
-                // 如果在 HTTP 代码块中，跳过超链接装饰
-                return;
-            }
-            
+        decorate: (add, from, to, match, _view) => {
             const url = match[0];
             let urlStr = matchFn && typeof matchFn === 'function' ? matchFn(url, match.input, from, to) : url;
             if (matchData && matchData[url]) {
@@ -109,10 +91,7 @@ const linkDecorator = (
             const linkIcon = new HyperLinkIcon({ at: start, url: urlStr, anchor });
             
             add(from, to, Decoration.mark({ 
-                class: 'cm-hyper-link-text cm-hyper-link-underline',
-                attributes: {
-                    'data-url': urlStr
-                }
+                class: 'cm-hyper-link-text cm-hyper-link-underline'
             }));
             add(start, end, Decoration.widget({ widget: linkIcon, side: 1 }));
         },
@@ -158,7 +137,7 @@ export function hyperLinkExtension({ regexp, match, handle, anchor, showIcon = t
 export const hyperLinkStyle = EditorView.baseTheme({
     '.cm-hyper-link-text': {
         color: '#0969da',
-        cursor: 'pointer',
+        cursor: 'text',
         transition: 'color 0.2s ease',
         textDecoration: 'underline',
         textDecorationColor: '#0969da',
@@ -216,24 +195,19 @@ export const hyperLinkStyle = EditorView.baseTheme({
 });
 
 export const hyperLinkClickHandler = EditorView.domEventHandlers({
-    click: (event, view) => {
-        const target = event.target as HTMLElement;
-        let urlElement = target;
-        
-        while (urlElement && !urlElement.hasAttribute('data-url')) {
-            urlElement = urlElement.parentElement as HTMLElement;
-            if (!urlElement || urlElement === document.body) break;
-        }
-        
-        if (urlElement && urlElement.hasAttribute('data-url')) {
-            const url = urlElement.getAttribute('data-url');
+    click: (event) => {
+        const target = event.target as HTMLElement | null;
+        const iconElement = target?.closest?.('.cm-hyper-link-icon') as (HTMLElement | null);
+
+        if (iconElement && iconElement.hasAttribute('data-url')) {
+            const url = iconElement.getAttribute('data-url');
             if (url) {
                 runtime.Browser.OpenURL(url);
                 event.preventDefault();
                 return true;
             }
         }
-        
+
         return false;
     }
 });
@@ -242,4 +216,4 @@ export const hyperLink: Extension = [
     hyperLinkExtension(), 
     hyperLinkStyle,
     hyperLinkClickHandler
-];
+];

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

@@ -2,6 +2,7 @@
  * Markdown 预览扩展主入口
  */
 import { EditorView } from "@codemirror/view";
+import { Compartment } from "@codemirror/state";
 import { useThemeStore } from "@/stores/themeStore";
 import { usePanelStore } from "@/stores/panelStore";
 import { useDocumentStore } from "@/stores/documentStore";
@@ -52,11 +53,30 @@ export function toggleMarkdownPreview(view: EditorView): boolean {
 /**
  * 导出 Markdown 预览扩展
  */
-export function markdownPreviewExtension() {
+const previewThemeCompartment = new Compartment();
+
+const buildPreviewTheme = () => {
   const themeStore = useThemeStore();
   const colors = themeStore.currentColors;
-  
-  const theme = colors ? createMarkdownPreviewTheme(colors) : EditorView.baseTheme({});
-  
-  return [previewPanelState, previewPanelPlugin, theme];
+  return colors ? createMarkdownPreviewTheme(colors) : EditorView.baseTheme({});
+};
+
+export function markdownPreviewExtension() {
+  return [
+    previewPanelState,
+    previewPanelPlugin,
+    previewThemeCompartment.of(buildPreviewTheme())
+  ];
+}
+
+export function updateMarkdownPreviewTheme(view: EditorView): void {
+  if (!view?.dispatch) return;
+
+  try {
+    view.dispatch({
+      effects: previewThemeCompartment.reconfigure(buildPreviewTheme())
+    });
+  } catch (error) {
+    console.error("Failed to update markdown preview theme", error);
+  }
 }

frontend/src/views/editor/extensions/markdownPreview/panel.ts

@@ -22,7 +22,7 @@ export class MarkdownPreviewPanel {
   private readonly resizeHandle: HTMLDivElement;
   private readonly content: HTMLDivElement;
   private view: EditorView;
-  private themeUnwatch?: () => void;
+  private themeUnwatchers: Array<() => void> = [];
   private lastRenderedContent: string = "";
   private readonly debouncedUpdate: ReturnType<typeof createDebounce>;
   private isDestroyed: boolean = false; // 标记面板是否已销毁
@@ -38,11 +38,22 @@ export class MarkdownPreviewPanel {
 
     // 监听主题变化
     const themeStore = useThemeStore();
-    this.themeUnwatch = watch(() => themeStore.isDarkMode, (isDark) => {
-      const newTheme = isDark ? "dark" : "default";
-      updateMermaidTheme(newTheme);
-      this.lastRenderedContent = ""; // 清空缓存，强制重新渲染
-    });
+    this.themeUnwatchers.push(
+      watch(() => themeStore.isDarkMode, (isDark) => {
+        const newTheme = isDark ? "dark" : "default";
+        updateMermaidTheme(newTheme);
+        this.resetPreviewContent();
+      })
+    );
+    this.themeUnwatchers.push(
+      watch(
+        () => themeStore.currentColors,
+        () => {
+          this.resetPreviewContent();
+        },
+        { deep: true }
+      )
+    );
 
     // 创建 DOM 结构
     this.dom = document.createElement("div");
@@ -315,6 +326,16 @@ export class MarkdownPreviewPanel {
     });
   }
 
+  private resetPreviewContent(): void {
+    if (this.isDestroyed) {
+      return;
+    }
+
+    this.md = createMarkdownRenderer();
+    this.lastRenderedContent = "";
+    this.updateContentInternal();
+  }
+
   /**
    * 响应编辑器更新
    */
@@ -339,9 +360,14 @@ export class MarkdownPreviewPanel {
     if (this.debouncedUpdate) {
       this.debouncedUpdate.cancel();
     }
-    
+
     // 清空缓存
     this.lastRenderedContent = "";
+
+    if (this.themeUnwatchers.length) {
+      this.themeUnwatchers.forEach(unwatch => unwatch());
+      this.themeUnwatchers = [];
+    }
   }
 
   /**

frontend/src/views/editor/extensions/markdownPreview/styles.ts

@@ -78,6 +78,34 @@ export function createMarkdownPreviewTheme(colors: ThemeColors) {
       }
     },
 
+      // 面板动画效果
+      '.cm-panels.cm-panels-top': {
+          borderBottom: '2px solid black'
+      },
+      '.cm-panels.cm-panels-bottom': {
+          animation: 'panelSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
+      },
+      '@keyframes panelSlideUp': {
+          from: {
+              transform: 'translateY(100%)',
+              opacity: '0'
+          },
+          to: {
+              transform: 'translateY(0)',
+              opacity: '1'
+          }
+      },
+      '@keyframes panelSlideDown': {
+          from: {
+              transform: 'translateY(0)',
+              opacity: '1'
+          },
+          to: {
+              transform: 'translateY(100%)',
+              opacity: '0'
+          }
+      },
+
     // 内容区域
     ".cm-preview-content": {
       flex: 1,

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

@@ -1,7 +1,7 @@
 import { Extension } from '@codemirror/state';
 import { useKeybindingStore } from '@/stores/keybindingStore';
 import { useExtensionStore } from '@/stores/extensionStore';
-import { KeymapManager } from './keymapManager';
+import { Manager } from './manager';
 
 /**
  * 异步创建快捷键扩展
@@ -23,7 +23,7 @@ export const createDynamicKeymapExtension = async (): Promise<Extension> => {
   // 获取启用的扩展ID列表
   const enabledExtensionIds = extensionStore.enabledExtensions.map(ext => ext.id);
   
-  return KeymapManager.createKeymapExtension(keybindingStore.keyBindings, enabledExtensionIds);
+  return Manager.createKeymapExtension(keybindingStore.keyBindings, enabledExtensionIds);
 };
 
 /**
@@ -37,10 +37,10 @@ export const updateKeymapExtension = (view: any): void => {
   // 获取启用的扩展ID列表
   const enabledExtensionIds = extensionStore.enabledExtensions.map(ext => ext.id);
   
-  KeymapManager.updateKeymap(view, keybindingStore.keyBindings, enabledExtensionIds);
+  Manager.updateKeymap(view, keybindingStore.keyBindings, enabledExtensionIds);
 };
 
 // 导出相关模块
-export { KeymapManager } from './keymapManager';
+export { Manager } from './manager';
 export { commands, getCommandHandler, getCommandDescription, isCommandRegistered, getRegisteredCommands } from './commands';
 export type { KeyBinding, CommandHandler, CommandDefinition, KeymapResult } from './types';

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

@@ -8,7 +8,7 @@ import {getCommandHandler, isCommandRegistered} from './commands';
  * 快捷键管理器
  * 负责将后端配置转换为CodeMirror快捷键扩展
  */
-export class KeymapManager {
+export class Manager {
     private static compartment = new Compartment();
     
     /**

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

@@ -1,299 +0,0 @@
-import {Compartment, Extension} from '@codemirror/state';
-import {EditorView} from '@codemirror/view';
-import {Extension as ExtensionConfig, ExtensionID} from '@/../bindings/voidraft/internal/models/models';
-import {ExtensionState, EditorViewInfo, ExtensionFactory} from './types'
-import {createDebounce} from '@/common/utils/debounce';
-
-
-
-/**
- * 扩展管理器
- * 负责管理所有动态扩展的注册、启用、禁用和配置更新
- * 采用统一配置，多视图同步的设计模式
- */
-export class ExtensionManager {
-    // 统一的扩展状态存储
-    private extensionStates = new Map<ExtensionID, ExtensionState>();
-    
-    // 编辑器视图管理
-    private viewsMap = new Map<number, EditorViewInfo>();
-    private activeViewId: number | null = null;
-    
-    // 注册的扩展工厂
-    private extensionFactories = new Map<ExtensionID, ExtensionFactory>();
-    
-    // 防抖处理
-    private debouncedUpdateFunctions = new Map<ExtensionID, {
-        debouncedFn: (enabled: boolean, config: any) => void;
-        cancel: () => void;
-        flush: () => void;
-    }>();
-    
-    /**
-     * 注册扩展工厂
-     * @param id 扩展ID
-     * @param factory 扩展工厂
-     */
-    registerExtension(id: ExtensionID, factory: ExtensionFactory): void {
-        this.extensionFactories.set(id, factory);
-        
-        // 创建初始状态
-        if (!this.extensionStates.has(id)) {
-            const compartment = new Compartment();
-            const defaultConfig = factory.getDefaultConfig();
-            
-            this.extensionStates.set(id, {
-                id,
-                factory,
-                config: defaultConfig,
-                enabled: false,
-                compartment,
-                extension: []  // 默认为空扩展（禁用状态）
-            });
-        }
-
-        // 为每个扩展创建防抖函数
-        if (!this.debouncedUpdateFunctions.has(id)) {
-            const { debouncedFn, cancel, flush } = createDebounce(
-                (enabled: boolean, config: any) => {
-                    this.updateExtensionImmediate(id, enabled, config);
-                },
-                { delay: 300 }
-            );
-            
-            this.debouncedUpdateFunctions.set(id, {
-                debouncedFn,
-                cancel,
-                flush
-            });
-        }
-    }
-
-    /**
-     * 获取所有注册的扩展ID列表
-     */
-    getRegisteredExtensions(): ExtensionID[] {
-        return Array.from(this.extensionFactories.keys());
-    }
-
-    /**
-     * 检查扩展是否已注册
-     * @param id 扩展ID
-     */
-    isExtensionRegistered(id: ExtensionID): boolean {
-        return this.extensionFactories.has(id);
-    }
-
-    /**
-     * 从后端配置初始化扩展状态
-     * @param extensionConfigs 后端扩展配置列表
-     */
-    initializeExtensionsFromConfig(extensionConfigs: ExtensionConfig[]): void {
-        for (const config of extensionConfigs) {
-            const factory = this.extensionFactories.get(config.id);
-            if (!factory) continue;
-            
-            // 验证配置
-            if (factory.validateConfig && !factory.validateConfig(config.config)) {
-                continue;
-            }
-            
-            try {
-                // 创建扩展实例
-                const extension = config.enabled ? factory.create(config.config) : [];
-                
-                // 如果状态已存在则更新，否则创建新状态
-                if (this.extensionStates.has(config.id)) {
-                    const state = this.extensionStates.get(config.id)!;
-                    state.config = config.config;
-                    state.enabled = config.enabled;
-                    state.extension = extension;
-                } else {
-                    const compartment = new Compartment();
-                    this.extensionStates.set(config.id, {
-                        id: config.id,
-                        factory,
-                        config: config.config,
-                        enabled: config.enabled,
-                        compartment,
-                        extension
-                    });
-                }
-            } catch (error) {
-                console.error(`Failed to initialize extension ${config.id}:`, error);
-            }
-        }
-    }
-
-    /**
-     * 获取初始扩展配置数组（用于创建编辑器）
-     * @returns CodeMirror扩展数组
-     */
-    getInitialExtensions(): Extension[] {
-        const extensions: Extension[] = [];
-        
-        // 为每个注册的扩展添加compartment
-        for (const state of this.extensionStates.values()) {
-            extensions.push(state.compartment.of(state.extension));
-        }
-        
-        return extensions;
-    }
-
-    /**
-     * 设置编辑器视图
-     * @param view 编辑器视图实例
-     * @param documentId 文档ID
-     */
-    setView(view: EditorView, documentId: number): void {
-        // 保存视图信息
-        this.viewsMap.set(documentId, {
-            view,
-            documentId,
-            registered: true
-        });
-        
-        // 设置当前活动视图
-        this.activeViewId = documentId;
-    }
-
-    /**
-     * 获取当前活动视图
-     */
-    private getActiveView(): EditorView | null {
-        if (this.activeViewId === null) return null;
-        const viewInfo = this.viewsMap.get(this.activeViewId);
-        return viewInfo ? viewInfo.view : null;
-    }
-
-    /**
-     * 更新单个扩展配置并应用到所有视图（带防抖功能）
-     * @param id 扩展ID
-     * @param enabled 是否启用
-     * @param config 扩展配置
-     */
-    updateExtension(id: ExtensionID, enabled: boolean, config: any = {}): void {
-        const debouncedUpdate = this.debouncedUpdateFunctions.get(id);
-        if (debouncedUpdate) {
-            debouncedUpdate.debouncedFn(enabled, config);
-        } else {
-            // 如果没有防抖函数，直接执行
-            this.updateExtensionImmediate(id, enabled, config);
-        }
-    }
-
-    /**
-     * 立即更新扩展（无防抖）
-     * @param id 扩展ID
-     * @param enabled 是否启用
-     * @param config 扩展配置
-     */
-    updateExtensionImmediate(id: ExtensionID, enabled: boolean, config: any = {}): void {
-        // 获取扩展状态
-        const state = this.extensionStates.get(id);
-        if (!state) return;
-        
-        // 获取工厂
-        const factory = state.factory;
-        
-        // 验证配置
-        if (factory.validateConfig && !factory.validateConfig(config)) {
-            return;
-        }
-        
-        try {
-            // 创建新的扩展实例
-            const extension = enabled ? factory.create(config) : [];
-            
-            // 更新内部状态
-            state.config = config;
-            state.enabled = enabled;
-            state.extension = extension;
-            
-            // 应用到所有视图
-            this.applyExtensionToAllViews(id);
-        } catch (error) {
-            console.error(`Failed to update extension ${id}:`, error);
-        }
-    }
-
-    /**
-     * 将指定扩展的当前状态应用到所有视图
-     * @param id 扩展ID
-     */
-    private applyExtensionToAllViews(id: ExtensionID): void {
-        const state = this.extensionStates.get(id);
-        if (!state) return;
-        
-        // 遍历所有视图并应用更改
-        for (const viewInfo of this.viewsMap.values()) {
-            try {
-                if (!viewInfo.registered) continue;
-                
-                viewInfo.view.dispatch({
-                    effects: state.compartment.reconfigure(state.extension)
-                });
-            } catch (error) {
-                console.error(`Failed to apply extension ${id} to document ${viewInfo.documentId}:`, error);
-            }
-        }
-    }
-
-
-    /**
-     * 获取扩展当前状态
-     * @param id 扩展ID
-     */
-    getExtensionState(id: ExtensionID): {
-        enabled: boolean
-        config: any
-    } | null {
-        const state = this.extensionStates.get(id);
-        if (!state) return null;
-        
-        return {
-            enabled: state.enabled,
-            config: state.config
-        };
-    }
-
-    /**
-     * 重置扩展到默认配置
-     * @param id 扩展ID
-     */
-    resetExtensionToDefault(id: ExtensionID): void {
-        const state = this.extensionStates.get(id);
-        if (!state) return;
-        
-        const defaultConfig = state.factory.getDefaultConfig();
-        this.updateExtension(id, true, defaultConfig);
-    }
-
-    /**
-     * 从管理器中移除视图
-     * @param documentId 文档ID
-     */
-    removeView(documentId: number): void {
-        if (this.activeViewId === documentId) {
-            this.activeViewId = null;
-        }
-        
-        this.viewsMap.delete(documentId);
-    }
-
-    /**
-     * 销毁管理器
-     */
-    destroy(): void {
-        // 清除所有防抖函数
-        for (const { cancel } of this.debouncedUpdateFunctions.values()) {
-            cancel();
-        }
-        this.debouncedUpdateFunctions.clear();
-        
-        this.viewsMap.clear();
-        this.activeViewId = null;
-        this.extensionFactories.clear();
-        this.extensionStates.clear();
-    }
-}

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

@@ -1,301 +1,152 @@
-import {ExtensionManager} from './extensionManager';
+import {Manager} from './manager';
 import {ExtensionID} from '@/../bindings/voidraft/internal/models/models';
 import i18n from '@/i18n';
-import {ExtensionFactory} from './types'
+import {ExtensionDefinition} from './types';
 
-// 导入现有扩展的创建函数
 import rainbowBracketsExtension from '../extensions/rainbowBracket/rainbowBracketsExtension';
 import {createTextHighlighter} from '../extensions/textHighlight/textHighlightExtension';
-
 import {color} from '../extensions/colorSelector';
 import {hyperLink} from '../extensions/hyperlink';
 import {minimap} from '../extensions/minimap';
 import {vscodeSearch} from '../extensions/vscodeSearch';
 import {createCheckboxExtension} from '../extensions/checkbox';
 import {createTranslatorExtension} from '../extensions/translator';
-
 import {foldingOnIndent} from '../extensions/fold/foldExtension';
 
-/**
- * 彩虹括号扩展工厂
- */
-export const rainbowBracketsFactory: ExtensionFactory = {
-    create(_config: any) {
-        return rainbowBracketsExtension();
-    },
-    getDefaultConfig() {
-        return {};
-    },
-    validateConfig(config: any) {
-        return typeof config === 'object';
-    }
+type ExtensionEntry = {
+    definition: ExtensionDefinition
+    displayNameKey: string
+    descriptionKey: string
 };
 
-/**
- * 文本高亮扩展工厂
- */
-export const textHighlightFactory: ExtensionFactory = {
-    create(config: any) {
-        return createTextHighlighter({
-            backgroundColor: config.backgroundColor || '#FFD700',
-            opacity: config.opacity || 0.3
-        });
-    },
-    getDefaultConfig() {
-        return {
-            backgroundColor: '#FFD700', // 金黄色
-            opacity: 0.3 // 透明度
-        };
-    },
-    validateConfig(config: any) {
-        return typeof config === 'object' &&
-            (!config.backgroundColor || typeof config.backgroundColor === 'string') &&
-            (!config.opacity || (typeof config.opacity === 'number' && config.opacity >= 0 && config.opacity <= 1));
-    }
-};
+type RegisteredExtensionID = Exclude<ExtensionID, ExtensionID.$zero | ExtensionID.ExtensionEditor>;
 
-/**
- * 小地图扩展工厂
- */
-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');
-    }
-};
+const defineExtension = (create: (config: any) => any, defaultConfig: Record<string, any> = {}): ExtensionDefinition => ({
+    create,
+    defaultConfig
+});
 
-/**
- * 超链接扩展工厂
- */
-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 foldFactory: ExtensionFactory = {
-    create(_config: any) {
-        return foldingOnIndent;
-    },
-    getDefaultConfig(): any {
-        return {};
-    },
-    validateConfig(config: any): boolean {
-        return typeof config === 'object';
-    }
-};
-
-/**
- * 选择框扩展工厂
- */
-export const checkboxFactory: ExtensionFactory = {
-    create(_config: any) {
-        return createCheckboxExtension();
-    },
-    getDefaultConfig() {
-        return {};
-    },
-    validateConfig(config: any) {
-        return typeof config === 'object';
-    }
-};
-
-/**
- * 翻译扩展工厂
- */
-export const translatorFactory: ExtensionFactory = {
-    create(config: any) {
-        return createTranslatorExtension({
-            minSelectionLength: config.minSelectionLength || 2,
-            maxTranslationLength: config.maxTranslationLength || 5000,
-        });
-    },
-    getDefaultConfig() {
-        return {
-            minSelectionLength: 2,
-            maxTranslationLength: 5000,
-        };
-    },
-    validateConfig(config: any) {
-        return typeof config === 'object';
-    }
-};
-
-/**
- * 所有扩展的统一配置
- * 排除$zero值以避免TypeScript类型错误
- */
-const EXTENSION_CONFIGS = {
-
-    // 编辑增强扩展
+const EXTENSION_REGISTRY: Record<RegisteredExtensionID, ExtensionEntry> = {
     [ExtensionID.ExtensionRainbowBrackets]: {
-        factory: rainbowBracketsFactory,
+        definition: defineExtension(() => rainbowBracketsExtension()),
         displayNameKey: 'extensions.rainbowBrackets.name',
         descriptionKey: 'extensions.rainbowBrackets.description'
     },
     [ExtensionID.ExtensionHyperlink]: {
-        factory: hyperlinkFactory,
+        definition: defineExtension(() => hyperLink),
         displayNameKey: 'extensions.hyperlink.name',
         descriptionKey: 'extensions.hyperlink.description'
     },
     [ExtensionID.ExtensionColorSelector]: {
-        factory: colorSelectorFactory,
+        definition: defineExtension(() => color),
         displayNameKey: 'extensions.colorSelector.name',
         descriptionKey: 'extensions.colorSelector.description'
     },
     [ExtensionID.ExtensionTranslator]: {
-        factory: translatorFactory,
+        definition: defineExtension((config: any) => createTranslatorExtension({
+            minSelectionLength: config?.minSelectionLength ?? 2,
+            maxTranslationLength: config?.maxTranslationLength ?? 5000
+        }), {
+            minSelectionLength: 2,
+            maxTranslationLength: 5000
+        }),
         displayNameKey: 'extensions.translator.name',
         descriptionKey: 'extensions.translator.description'
     },
-
-    // UI增强扩展
     [ExtensionID.ExtensionMinimap]: {
-        factory: minimapFactory,
+        definition: defineExtension((config: any) => minimap({
+            displayText: config?.displayText ?? 'characters',
+            showOverlay: config?.showOverlay ?? 'always',
+            autohide: config?.autohide ?? false
+        }), {
+            displayText: 'characters',
+            showOverlay: 'always',
+            autohide: false
+        }),
         displayNameKey: 'extensions.minimap.name',
         descriptionKey: 'extensions.minimap.description'
     },
-
-    // 工具扩展
     [ExtensionID.ExtensionSearch]: {
-        factory: searchFactory,
+        definition: defineExtension(() => vscodeSearch),
         displayNameKey: 'extensions.search.name',
         descriptionKey: 'extensions.search.description'
     },
-
     [ExtensionID.ExtensionFold]: {
-        factory: foldFactory,
+        definition: defineExtension(() => foldingOnIndent),
         displayNameKey: 'extensions.fold.name',
         descriptionKey: 'extensions.fold.description'
     },
     [ExtensionID.ExtensionTextHighlight]: {
-        factory: textHighlightFactory,
+        definition: defineExtension((config: any) => createTextHighlighter({
+            backgroundColor: config?.backgroundColor ?? '#FFD700',
+            opacity: config?.opacity ?? 0.3
+        }), {
+            backgroundColor: '#FFD700',
+            opacity: 0.3
+        }),
         displayNameKey: 'extensions.textHighlight.name',
         descriptionKey: 'extensions.textHighlight.description'
     },
     [ExtensionID.ExtensionCheckbox]: {
-        factory: checkboxFactory,
+        definition: defineExtension(() => createCheckboxExtension()),
         displayNameKey: 'extensions.checkbox.name',
         descriptionKey: 'extensions.checkbox.description'
     }
+} as const;
+
+const isRegisteredExtension = (id: ExtensionID): id is RegisteredExtensionID =>
+    Object.prototype.hasOwnProperty.call(EXTENSION_REGISTRY, id);
+
+const getRegistryEntry = (id: ExtensionID): ExtensionEntry | undefined => {
+    if (!isRegisteredExtension(id)) {
+        return undefined;
+    }
+    return EXTENSION_REGISTRY[id];
 };
 
-/**
- * 注册所有扩展工厂到管理器
- * @param manager 扩展管理器实例
- */
-export function registerAllExtensions(manager: ExtensionManager): void {
-    Object.entries(EXTENSION_CONFIGS).forEach(([id, config]) => {
-        manager.registerExtension(id as ExtensionID, config.factory);
+export function registerAllExtensions(manager: Manager): void {
+    (Object.entries(EXTENSION_REGISTRY) as [RegisteredExtensionID, ExtensionEntry][]).forEach(([id, entry]) => {
+        manager.registerExtension(id, entry.definition);
     });
 }
 
-/**
- * 获取扩展工厂的显示名称
- * @param id 扩展ID
- * @returns 显示名称
- */
 export function getExtensionDisplayName(id: ExtensionID): string {
-    const config = EXTENSION_CONFIGS[id as ExtensionID];
-    return config?.displayNameKey ? i18n.global.t(config.displayNameKey) : id;
+    const entry = getRegistryEntry(id);
+    return entry?.displayNameKey ? i18n.global.t(entry.displayNameKey) : id;
 }
 
-/**
- * 获取扩展工厂的描述
- * @param id 扩展ID
- * @returns 描述
- */
 export function getExtensionDescription(id: ExtensionID): string {
-    const config = EXTENSION_CONFIGS[id as ExtensionID];
-    return config?.descriptionKey ? i18n.global.t(config.descriptionKey) : '';
+    const entry = getRegistryEntry(id);
+    return entry?.descriptionKey ? i18n.global.t(entry.descriptionKey) : '';
 }
 
-/**
- * 获取扩展工厂实例
- * @param id 扩展ID
- * @returns 扩展工厂实例
- */
-export function getExtensionFactory(id: ExtensionID): ExtensionFactory | undefined {
-    return EXTENSION_CONFIGS[id as ExtensionID]?.factory;
+function getExtensionDefinition(id: ExtensionID): ExtensionDefinition | undefined {
+    return getRegistryEntry(id)?.definition;
 }
 
-/**
- * 获取扩展的默认配置
- * @param id 扩展ID
- * @returns 默认配置对象
- */
 export function getExtensionDefaultConfig(id: ExtensionID): any {
-    const factory = getExtensionFactory(id);
-    return factory?.getDefaultConfig() || {};
+    const definition = getExtensionDefinition(id);
+    if (!definition) return {};
+    return cloneConfig(definition.defaultConfig);
 }
 
-/**
- * 检查扩展是否有配置项
- * @param id 扩展ID
- * @returns 是否有配置项
- */
 export function hasExtensionConfig(id: ExtensionID): boolean {
-    const defaultConfig = getExtensionDefaultConfig(id);
-    return Object.keys(defaultConfig).length > 0;
+    return Object.keys(getExtensionDefaultConfig(id)).length > 0;
 }
 
-/**
- * 获取所有可用扩展的ID列表
- * @returns 扩展ID数组
- */
 export function getAllExtensionIds(): ExtensionID[] {
-    return Object.keys(EXTENSION_CONFIGS) as ExtensionID[];
-} 
+    return Object.keys(EXTENSION_REGISTRY) as RegisteredExtensionID[];
+}
+
+const cloneConfig = (config: any) => {
+    if (Array.isArray(config)) {
+        return config.map(cloneConfig);
+    }
+    if (config && typeof config === 'object') {
+        return Object.keys(config).reduce((acc, key) => {
+            acc[key] = cloneConfig(config[key]);
+            return acc;
+        }, {} as Record<string, any>);
+    }
+    return config;
+};

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

@@ -1,13 +1,13 @@
 import {Extension} from '@codemirror/state';
 import {EditorView} from '@codemirror/view';
 import {useExtensionStore} from '@/stores/extensionStore';
-import {ExtensionManager} from './extensionManager';
+import {Manager} from './manager';
 import {registerAllExtensions} from './extensions';
 
 /**
  * 全局扩展管理器实例
  */
-const extensionManager = new ExtensionManager();
+const extensionManager = new Manager();
 
 /**
  * 异步创建动态扩展
@@ -26,7 +26,7 @@ export const createDynamicExtensions = async (_documentId?: number): Promise<Ext
     }
 
     // 初始化扩展管理器配置
-    extensionManager.initializeExtensionsFromConfig(extensionStore.extensions);
+    extensionManager.initExtensions(extensionStore.extensions);
 
     // 获取初始扩展配置
     return extensionManager.getInitialExtensions();
@@ -36,7 +36,7 @@ export const createDynamicExtensions = async (_documentId?: number): Promise<Ext
  * 获取扩展管理器实例
  * @returns 扩展管理器
  */
-export const getExtensionManager = (): ExtensionManager => {
+export const getExtensionManager = (): Manager => {
     return extensionManager;
 };
 
@@ -58,5 +58,5 @@ export const removeExtensionManagerView = (documentId: number): void => {
 };
 
 // 导出相关模块
-export {ExtensionManager} from './extensionManager';
+export {Manager} from './manager';
 export {registerAllExtensions, getExtensionDisplayName, getExtensionDescription} from './extensions';

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

@@ -0,0 +1,135 @@
+import {Compartment, Extension} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {Extension as ExtensionConfig, ExtensionID} from '@/../bindings/voidraft/internal/models/models';
+import {ExtensionDefinition, ExtensionState} from './types';
+
+/**
+ * 扩展管理器
+ * 负责注册、初始化与同步所有动态扩展
+ */
+export class Manager {
+    private extensionStates = new Map<ExtensionID, ExtensionState>();
+    private views = new Map<number, EditorView>();
+
+    registerExtension(id: ExtensionID, definition: ExtensionDefinition): void {
+        const existingState = this.extensionStates.get(id);
+        if (existingState) {
+            existingState.definition = definition;
+            if (existingState.config === undefined) {
+                existingState.config = this.cloneConfig(definition.defaultConfig ?? {});
+            }
+        } else {
+            const compartment = new Compartment();
+            const defaultConfig = this.cloneConfig(definition.defaultConfig ?? {});
+            this.extensionStates.set(id, {
+                id,
+                definition,
+                config: defaultConfig,
+                enabled: false,
+                compartment,
+                extension: []
+            });
+        }
+    }
+
+    initExtensions(extensionConfigs: ExtensionConfig[]): void {
+        for (const config of extensionConfigs) {
+            const state = this.extensionStates.get(config.id);
+            if (!state) continue;
+            const resolvedConfig = this.cloneConfig(config.config ?? state.definition.defaultConfig ?? {});
+            this.commitExtensionState(state, config.enabled, resolvedConfig);
+        }
+    }
+
+    getInitialExtensions(): Extension[] {
+        const extensions: Extension[] = [];
+        for (const state of this.extensionStates.values()) {
+            extensions.push(state.compartment.of(state.extension));
+        }
+        return extensions;
+    }
+
+    setView(view: EditorView, documentId: number): void {
+        this.views.set(documentId, view);
+        this.applyAllExtensionsToView(view);
+    }
+
+    updateExtension(id: ExtensionID, enabled: boolean, config?: any): void {
+        const state = this.extensionStates.get(id);
+        if (!state) return;
+
+        const resolvedConfig = this.resolveConfig(state, config);
+        this.commitExtensionState(state, enabled, resolvedConfig);
+    }
+
+    removeView(documentId: number): void {
+        this.views.delete(documentId);
+    }
+
+    destroy(): void {
+        this.views.clear();
+        this.extensionStates.clear();
+    }
+
+    private resolveConfig(state: ExtensionState, config?: any): any {
+        if (config !== undefined) {
+            return this.cloneConfig(config);
+        }
+        if (state.config !== undefined) {
+            return this.cloneConfig(state.config);
+        }
+        return this.cloneConfig(state.definition.defaultConfig ?? {});
+    }
+
+    private commitExtensionState(state: ExtensionState, enabled: boolean, config: any): void {
+        try {
+            const runtimeExtension = enabled ? state.definition.create(config) : [];
+            state.enabled = enabled;
+            state.config = config;
+            state.extension = runtimeExtension;
+            this.applyExtensionToAllViews(state.id);
+        } catch (error) {
+            console.error(`Failed to update extension ${state.id}:`, error);
+        }
+    }
+
+    private applyExtensionToAllViews(id: ExtensionID): void {
+        const state = this.extensionStates.get(id);
+        if (!state) return;
+
+        for (const [documentId, view] of this.views.entries()) {
+            try {
+                view.dispatch({effects: state.compartment.reconfigure(state.extension)});
+            } catch (error) {
+                console.error(`Failed to apply extension ${id} to document ${documentId}:`, error);
+            }
+        }
+    }
+
+    private applyAllExtensionsToView(view: EditorView): void {
+        const effects: any[] = [];
+        for (const state of this.extensionStates.values()) {
+            effects.push(state.compartment.reconfigure(state.extension));
+        }
+        if (effects.length === 0) return;
+
+        try {
+            view.dispatch({effects});
+        } catch (error) {
+            console.error('Failed to register extensions on view:', error);
+        }
+    }
+
+    private cloneConfig<T>(config: T): T {
+        if (Array.isArray(config)) {
+            return config.map(item => this.cloneConfig(item)) as unknown as T;
+        }
+        if (config && typeof config === 'object') {
+            return Object.keys(config as Record<string, any>).reduce((acc, key) => {
+                (acc as any)[key] = this.cloneConfig((config as Record<string, any>)[key]);
+                return acc;
+            }, {} as Record<string, any>) as T;
+        }
+        return config;
+    }
+}

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

@@ -1,49 +1 @@
-import {Compartment, Extension} from '@codemirror/state';
-import {EditorView} from '@codemirror/view';
-import {ExtensionID} 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
-}
-
-/**
- * 扩展状态
- */
-export interface ExtensionState {
-    id: ExtensionID
-    factory: ExtensionFactory
-    config: any
-    enabled: boolean
-    compartment: Compartment
-    extension: Extension
-}
-
-/**
- * 视图信息
- */
-export interface EditorViewInfo {
-    view: EditorView
-    documentId: number
-    registered: boolean
-}
+import {Compartment, Extension} from '@codemirror/state';

frontend/src/views/editor/theme/base.ts

@@ -4,6 +4,8 @@ import {tags} from '@lezer/highlight';
 import {Extension} from '@codemirror/state';
 import type {ThemeColors} from './types';
 
+const MONO_FONT_FALLBACK = 'var(--voidraft-font-mono, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace)';
+
 /**
  * 创建通用主题
  * @param colors 主题颜色配置
@@ -12,28 +14,15 @@ import type {ThemeColors} from './types';
 export function createBaseTheme(colors: ThemeColors): Extension {
     // 编辑器主题样式
     const theme = EditorView.theme({
+
         '&': {
-            color: colors.foreground,
             backgroundColor: colors.background,
         },
 
-        // 确保编辑器容器背景一致
         '.cm-editor': {
             backgroundColor: colors.background,
         },
 
-        // 确保滚动区域背景一致
-        '.cm-scroller': {
-            backgroundColor: colors.background,
-            transition: 'height 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        },
-
-        // 编辑器内容
-        '.cm-content': {
-            caretColor: colors.cursor,
-            paddingTop: '4px',
-        },
-
         // 光标
         '.cm-cursor, .cm-dropCursor': {
             borderLeftColor: colors.cursor,
@@ -42,19 +31,11 @@ export function createBaseTheme(colors: ThemeColors): Extension {
             marginTop: '-2px',
         },
 
-        // 选择
-        '.cm-selectionBackground': {
-            backgroundColor: colors.selectionBlur,
-        },
+        // 选择背景
         '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
             backgroundColor: colors.selection,
         },
-        '.cm-content ::selection': {
-            backgroundColor: colors.selection,
-        },
-        '.cm-activeLine.code-empty-block-selected': {
-            backgroundColor: colors.selection,
-        },
+
 
         // 当前行高亮
         '.cm-activeLine': {
@@ -66,7 +47,6 @@ export function createBaseTheme(colors: ThemeColors): Extension {
             backgroundColor: colors.dark ? 'rgba(0,0,0, 0.1)' : 'rgba(0,0,0, 0.04)',
             color: colors.lineNumber,
             border: 'none',
-            borderRight: colors.dark ? 'none' : `1px solid ${colors.borderLight}`,
             padding: '0 2px 0 4px',
             userSelect: 'none',
         },
@@ -75,105 +55,11 @@ export function createBaseTheme(colors: ThemeColors): Extension {
             color: colors.activeLineNumber,
         },
 
-        // 折叠功能
-        '.cm-foldGutter': {
-            marginLeft: '0px',
-        },
-        '.cm-foldGutter .cm-gutterElement': {
-            opacity: 0,
-            transition: 'opacity 400ms',
-        },
-        '.cm-gutters:hover .cm-gutterElement': {
-            opacity: 1,
-        },
-        '.cm-foldPlaceholder': {
-            backgroundColor: 'transparent',
-            border: 'none',
-            color: colors.comment,
-        },
 
-        // 面板
-        '.cm-panels': {
-            // backgroundColor: colors.dropdownBackground,
-            // color: colors.foreground
-        },
-        '.cm-panels.cm-panels-top': {
-            borderBottom: '2px solid black'
-        },
-        '.cm-panels.cm-panels-bottom': {
-            animation: 'panelSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
-        },
-        '@keyframes panelSlideUp': {
-            from: {
-                transform: 'translateY(100%)',
-                opacity: '0'
-            },
-            to: {
-                transform: 'translateY(0)',
-                opacity: '1'
-            }
-        },
-        '@keyframes panelSlideDown': {
-            from: {
-                transform: 'translateY(0)',
-                opacity: '1'
-            },
-            to: {
-                transform: 'translateY(100%)',
-                opacity: '0'
-            }
-        },
-
-        // 搜索匹配
-        '.cm-searchMatch': {
-            backgroundColor: 'transparent',
-            outline: `1px solid ${colors.searchMatch}`,
-        },
-        '.cm-searchMatch.cm-searchMatch-selected': {
-            backgroundColor: colors.searchMatch,
-            color: colors.background,
-        },
-        '.cm-selectionMatch': {
-            backgroundColor: colors.dark ? '#50606D' : '#e6f3ff',
-        },
 
         // 括号匹配
         '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
-            outline: `0.5px solid ${colors.searchMatch}`,
-        },
-        '&.cm-focused .cm-matchingBracket': {
-            backgroundColor: colors.matchingBracket,
-            color: 'inherit',
-        },
-        '&.cm-focused .cm-nonmatchingBracket': {
-            outline: colors.dark ? '0.5px solid #bc8f8f' : '0.5px solid #d73a49',
-        },
-
-        // 编辑器焦点
-        '&.cm-editor.cm-focused': {
-            outline: 'none',
-        },
-
-        // 工具提示
-        '.cm-tooltip': {
-            border: colors.dark ? 'none' : `1px solid ${colors.dropdownBorder}`,
-            backgroundColor: colors.surface,
-            color: colors.foreground,
-            boxShadow: colors.dark ? 'none' : '0 2px 8px rgba(0,0,0,0.1)',
-        },
-        '.cm-tooltip .cm-tooltip-arrow:before': {
-            borderTopColor: 'transparent',
-            borderBottomColor: 'transparent',
-        },
-        '.cm-tooltip .cm-tooltip-arrow:after': {
-            borderTopColor: colors.surface,
-            borderBottomColor: colors.surface,
-        },
-        '.cm-tooltip-autocomplete': {
-            '& > ul > li[aria-selected]': {
-                backgroundColor: colors.activeLine,
-                color: colors.foreground,
-            },
+            outline: `0.5px solid ${colors.matchingBracket}`,
         },
 
         // 代码块层（自定义）
@@ -195,8 +81,19 @@ export function createBaseTheme(colors: ThemeColors): Extension {
             background: colors.backgroundSecondary,
             borderTop: `1px solid ${colors.borderColor}`,
         },
+        '.code-block-empty-selected': {
+            backgroundColor: colors.selection,
+        },
+        // 代码块开始标记
+        '.code-block-start': {
+            height: '12px',
+            position: 'relative',
+        },
+        '.code-block-start.first': {
+            height: '0px',
+        },
 
-        // 数学计算结果（自定义）
+        // 数学计算结果
         '.code-blocks-math-result': {
             paddingLeft: "12px",
             position: "relative",
@@ -223,91 +120,116 @@ export function createBaseTheme(colors: ThemeColors): Extension {
         '.code-blocks-math-result-copied.fade-out': {
             opacity: 0,
         },
-
-        // 代码块开始标记（自定义）
-        '.code-block-start': {
-            height: '12px',
-            position: 'relative',
-        },
-        '.code-block-start.first': {
-            height: '0px',
-        },
     }, {dark: colors.dark});
 
-    // 语法高亮样式
     const highlightStyle = HighlightStyle.define([
-        // 关键字
+        {tag: tags.comment, color: colors.comment, fontStyle: 'italic'},
+        {tag: tags.lineComment, color: colors.lineComment, fontStyle: 'italic'},
+        {tag: tags.blockComment, color: colors.blockComment, fontStyle: 'italic'},
+        {tag: tags.docComment, color: colors.docComment, fontStyle: 'italic'},
+
+        {tag: tags.name, color: colors.name},
+        {tag: tags.variableName, color: colors.variableName},
+        {tag: tags.typeName, color: colors.typeName},
+        {tag: tags.tagName, color: colors.tagName},
+        {tag: tags.propertyName, color: colors.propertyName},
+        {tag: tags.attributeName, color: colors.attributeName},
+        {tag: tags.className, color: colors.className},
+        {tag: tags.labelName, color: colors.labelName},
+        {tag: tags.namespace, color: colors.namespace},
+        {tag: tags.macroName, color: colors.macroName},
+
+        {tag: tags.literal, color: colors.literal},
+        {tag: tags.string, color: colors.string},
+        {tag: tags.docString, color: colors.docString},
+        {tag: tags.character, color: colors.character},
+        {tag: tags.attributeValue, color: colors.attributeValue},
+        {tag: tags.number, color: colors.number},
+        {tag: tags.integer, color: colors.integer},
+        {tag: tags.float, color: colors.float},
+        {tag: tags.bool, color: colors.bool},
+        {tag: tags.regexp, color: colors.regexp},
+        {tag: tags.escape, color: colors.escape},
+        {tag: tags.color, color: colors.color},
+        {tag: tags.url, color: colors.url},
+
         {tag: tags.keyword, color: colors.keyword},
+        {tag: tags.self, color: colors.self},
+        {tag: tags.null, color: colors.null},
+        {tag: tags.atom, color: colors.atom},
+        {tag: tags.unit, color: colors.unit},
+        {tag: tags.modifier, color: colors.modifier},
+        {tag: tags.operatorKeyword, color: colors.operatorKeyword},
+        {tag: tags.controlKeyword, color: colors.controlKeyword},
+        {tag: tags.definitionKeyword, color: colors.definitionKeyword},
+        {tag: tags.moduleKeyword, color: colors.moduleKeyword},
 
-        // 操作符
-        {tag: [tags.operator, tags.operatorKeyword], color: colors.operator},
+        {tag: tags.operator, color: colors.operator},
+        {tag: tags.derefOperator, color: colors.derefOperator},
+        {tag: tags.arithmeticOperator, color: colors.arithmeticOperator},
+        {tag: tags.logicOperator, color: colors.logicOperator},
+        {tag: tags.bitwiseOperator, color: colors.bitwiseOperator},
+        {tag: tags.compareOperator, color: colors.compareOperator},
+        {tag: tags.updateOperator, color: colors.updateOperator},
+        {tag: tags.definitionOperator, color: colors.definitionOperator},
+        {tag: tags.typeOperator, color: colors.typeOperator},
+        {tag: tags.controlOperator, color: colors.controlOperator},
 
-        // 名称、变量
-        {tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: colors.variable},
-        {tag: [tags.variableName], color: colors.variable},
-        {tag: [tags.labelName], color: colors.operator},
-        {tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: colors.variable},
+        {tag: tags.punctuation, color: colors.punctuation},
+        {tag: tags.separator, color: colors.separator},
+        {tag: tags.bracket, color: colors.bracket},
+        {tag: tags.angleBracket, color: colors.angleBracket},
+        {tag: tags.squareBracket, color: colors.squareBracket},
+        {tag: tags.paren, color: colors.paren},
+        {tag: tags.brace, color: colors.brace},
 
-        // 函数
-        {tag: [tags.function(tags.variableName)], color: colors.function},
-        {tag: [tags.propertyName], color: colors.function},
+        {tag: tags.content, color: colors.content},
+        {tag: tags.heading, color: colors.heading, fontWeight: 'bold'},
+        {tag: tags.heading1, color: colors.heading1, fontWeight: 'bold', fontSize: '1.4em'},
+        {tag: tags.heading2, color: colors.heading2, fontWeight: 'bold', fontSize: '1.3em'},
+        {tag: tags.heading3, color: colors.heading3, fontWeight: 'bold', fontSize: '1.2em'},
+        {tag: tags.heading4, color: colors.heading4, fontWeight: 'bold', fontSize: '1.1em'},
+        {tag: tags.heading5, color: colors.heading5, fontWeight: 'bold'},
+        {tag: tags.heading6, color: colors.heading6, fontWeight: 'bold'},
+        {tag: tags.contentSeparator, color: colors.contentSeparator},
+        {tag: tags.list, color: colors.list},
+        {tag: tags.quote, color: colors.quote, fontStyle: 'italic'},
+        {tag: tags.emphasis, color: colors.emphasis, fontStyle: 'italic'},
+        {tag: tags.strong, color: colors.strong, fontWeight: 'bold'},
+        {tag: tags.link, color: colors.link, textDecoration: 'underline'},
+        {tag: tags.monospace, color: colors.monospace, fontFamily: MONO_FONT_FALLBACK},
+        {tag: tags.strikethrough, color: colors.strikethrough, textDecoration: 'line-through'},
 
-        // 类型、类
-        {tag: [tags.typeName], color: colors.type},
-        {tag: [tags.className], color: colors.class},
+        {tag: tags.inserted, color: colors.inserted},
+        {tag: tags.deleted, color: colors.deleted},
+        {tag: tags.changed, color: colors.changed},
 
-        // 常量
-        {tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: colors.constant},
+        {tag: tags.meta, color: colors.meta, fontStyle: 'italic'},
+        {tag: tags.documentMeta, color: colors.documentMeta},
+        {tag: tags.annotation, color: colors.annotation},
+        {tag: tags.processingInstruction, color: colors.processingInstruction},
 
-        // 字符串
-        {tag: [tags.processingInstruction, tags.string, tags.inserted], color: colors.string},
-        {tag: [tags.special(tags.string)], color: colors.string},
-        {tag: [tags.quote], color: colors.comment},
+        {tag: tags.definition(tags.variableName), color: colors.definition},
+        {tag: tags.definition(tags.propertyName), color: colors.definition},
+        {tag: tags.definition(tags.name), color: colors.definition},
+        {tag: tags.constant(tags.variableName), color: colors.constant},
+        {tag: tags.constant(tags.propertyName), color: colors.constant},
+        {tag: tags.constant(tags.name), color: colors.constant},
+        {tag: tags.function(tags.variableName), color: colors.function},
+        {tag: tags.function(tags.propertyName), color: colors.function},
+        {tag: tags.function(tags.name), color: colors.function},
+        {tag: tags.standard(tags.variableName), color: colors.standard},
+        {tag: tags.standard(tags.name), color: colors.standard},
+        {tag: tags.local(tags.variableName), color: colors.local},
+        {tag: tags.local(tags.name), color: colors.local},
+        {tag: tags.special(tags.variableName), color: colors.special},
+        {tag: tags.special(tags.name), color: colors.special},
+        {tag: tags.special(tags.string), color: colors.special},
 
-        // 数字
-        {
-            tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
-            color: colors.number
-        },
-
-        // 正则表达式
-        {tag: [tags.url, tags.escape, tags.regexp, tags.link], color: colors.regexp},
-
-        // 注释
-        {tag: [tags.meta, tags.comment], color: colors.comment, fontStyle: 'italic'},
-
-        // 分隔符、括号
-        {tag: [tags.definition(tags.name), tags.separator], color: colors.variable},
-        {tag: [tags.brace], color: colors.variable},
-        {tag: [tags.squareBracket], color: colors.dark ? '#bf616a' : colors.keyword},
-        {tag: [tags.angleBracket], color: colors.dark ? '#d08770' : colors.operator},
-        {tag: [tags.attributeName], color: colors.variable},
-
-        // 标签
-        {tag: [tags.tagName], color: colors.number},
-
-        // 注解
-        {tag: [tags.annotation], color: colors.invalid},
-
-        // 特殊样式
-        {tag: tags.strong, fontWeight: 'bold'},
-        {tag: tags.emphasis, fontStyle: 'italic'},
-        {tag: tags.strikethrough, textDecoration: 'line-through'},
-        {tag: tags.link, color: colors.variable, textDecoration: 'underline'},
-
-        // 标题
-        {tag: tags.heading, fontWeight: 'bold', color: colors.heading},
-        {tag: [tags.heading1, tags.heading2], fontSize: '1.4em'},
-        {tag: [tags.heading3, tags.heading4], fontSize: '1.2em'},
-        {tag: [tags.heading5, tags.heading6], fontSize: '1.1em'},
-
-        // 无效内容
         {tag: tags.invalid, color: colors.invalid},
     ]);
-
     return [
         theme,
         syntaxHighlighting(highlightStyle),
     ];
 }
-

frontend/src/views/editor/theme/dark/aura.ts

@@ -1,57 +1,110 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'aura',
+  themeName: 'aura',
   dark: true,
-  
-  // 基础色调
+
   background: '#21202e',
-  backgroundSecondary: '#2B2A3BFF',
-  surface: '#21202e',
-  dropdownBackground: '#21202e',
-  dropdownBorder: '#3b334b',
-  
-  // 文本颜色
+  backgroundSecondary: '#2b2a3b',
+
   foreground: '#edecee',
-  foregroundSecondary: '#edecee',
-  comment: '#6d6d6d',
-  
-  // 语法高亮色 - 核心
-  keyword: '#a277ff',
-  string: '#61ffca',
-  function: '#ffca85',
-  number: '#61ffca',
-  operator: '#a277ff',
-  variable: '#edecee',
-  type: '#82e2ff',
-  
-  // 语法高亮色 - 扩展
-  constant: '#61ffca',
-  storage: '#a277ff',
-  parameter: '#edecee',
-  class: '#82e2ff',
-  heading: '#a277ff',
-  invalid: '#ff6767',
-  regexp: '#61ffca',
-  
-  // 界面元素
   cursor: '#a277ff',
   selection: '#3d375e7f',
-  selectionBlur: '#3d375e7f',
   activeLine: '#4d4b6622',
   lineNumber: '#a394f033',
   activeLineNumber: '#cdccce',
-  
-  // 边框和分割线
+  diffInserted: '#61ffca',
+  diffDeleted: '#ff6767',
+  diffChanged: '#ffca85',
   borderColor: '#3b334b',
-  borderLight: '#edecee19',
-  
-  // 搜索和匹配
-  searchMatch: '#61ffca',
   matchingBracket: '#a394f033',
-}
 
-// 使用通用主题工厂函数创建 Aura 主题
-export const aura: Extension = createBaseTheme(config)
+  comment: '#6d6d6d',
+  lineComment: '#5c5c5c',
+  blockComment: '#5a5a5a',
+  docComment: '#747474',
+  name: '#edecee',
+  variableName: '#edecee',
+  typeName: '#82e2ff',
+  tagName: '#7cd4ff',
+  propertyName: '#d2d1f9',
+  attributeName: '#f6d1ff',
+  className: '#95dbff',
+  labelName: '#ffc285',
+  namespace: '#6fd0ff',
+  macroName: '#ffca85',
+  literal: '#82e2ff',
+  string: '#61ffca',
+  docString: '#61ffca',
+  character: '#73ffd7',
+  attributeValue: '#ffe3c4',
+  number: '#82e2ff',
+  integer: '#82e2ff',
+  float: '#82e2ff',
+  bool: '#ffd18b',
+  regexp: '#61ffca',
+  escape: '#4ff7c6',
+  color: '#ffc57c',
+  url: '#7cd4ff',
+  keyword: '#a277ff',
+  self: '#c89eff',
+  null: '#f69aff',
+  atom: '#61ffca',
+  unit: '#61ffca',
+  modifier: '#c094ff',
+  operatorKeyword: '#b98dff',
+  controlKeyword: '#c17aff',
+  definitionKeyword: '#bd8eff',
+  moduleKeyword: '#cfa2ff',
+  operator: '#a277ff',
+  derefOperator: '#c59bff',
+  arithmeticOperator: '#c78df5',
+  logicOperator: '#c088ff',
+  bitwiseOperator: '#ce8cff',
+  compareOperator: '#c786ff',
+  updateOperator: '#bb7cff',
+  definitionOperator: '#b070ff',
+  typeOperator: '#b98aff',
+  controlOperator: '#a867ff',
+  punctuation: '#d1a6ff',
+  separator: '#ceb1ff',
+  bracket: '#adabff',
+  angleBracket: '#ffc3ff',
+  squareBracket: '#ff9ddd',
+  paren: '#f39ddf',
+  brace: '#f589d6',
+  content: '#edecee',
+  heading: '#a277ff',
+  heading1: '#caa0ff',
+  heading2: '#c192ff',
+  heading3: '#b684ff',
+  heading4: '#aa76ff',
+  heading5: '#9f68ff',
+  heading6: '#955aff',
+  contentSeparator: '#a277ff',
+  list: '#c0c0c0',
+  quote: '#9280a3',
+  emphasis: '#edecee',
+  strong: '#f4f3f5',
+  link: '#79d3ff',
+  monospace: '#d5d0d8',
+  strikethrough: '#b9b3c0',
+  inserted: '#61ffca',
+  deleted: '#ff6767',
+  changed: '#ffca85',
+  invalid: '#ff6767',
+  meta: '#807d8c',
+  documentMeta: '#7b7886',
+  annotation: '#7df5d9',
+  processingInstruction: '#7b7490',
+  definition: '#d0cfe4',
+  constant: '#61ffca',
+  function: '#ffca85',
+  standard: '#c1c0cf',
+  local: '#c9c8d7',
+  special: '#ffd9a8',
+};
+
+export const aura: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/dark/default-dark.ts

@@ -1,63 +1,114 @@
 import {createBaseTheme} from '../base';
 import type {ThemeColors} from '../types';
 
-// 默认深色主题颜色
 export const defaultDarkColors: ThemeColors = {
-  // 主题信息
-  name: 'default-dark',
+  themeName: 'default-dark',
   dark: true,
 
   // 基础色调
-  background: '#252B37',        // 主背景色
-  backgroundSecondary: '#213644', // 次要背景色
-  surface: '#474747',           // 面板背景
-  dropdownBackground: '#252B37', // 下拉菜单背景
-  dropdownBorder: '#ffffff19',  // 下拉菜单边框
+  background: '#252B37',
+  backgroundSecondary: '#213644',
 
-  // 文本颜色
-  foreground: '#9BB586',        // 主文本色
-  foregroundSecondary: '#9c9c9c', // 次要文本色
-  comment: '#6272a4',           // 注释色
+  // 文本与界面色
+  foreground: '#ffffff',
+  cursor: '#ffffff',
+  selection: '#0865a9',
+  activeLine: '#ffffff0a',
+  lineNumber: '#ffffff26',
+  activeLineNumber: '#ffffff99',
+  diffInserted: '#64d189',
+  diffDeleted: '#ff6b6b',
+  diffChanged: '#ffb86c',
+  borderColor: '#1e222a',
+  matchingBracket: '#ffffff19',
 
-  // 语法高亮色 - 核心
-  keyword: '#ff79c6',           // 关键字
-  string: '#f1fa8c',            // 字符串
-  function: '#50fa7b',          // 函数名
-  number: '#bd93f9',            // 数字
-  operator: '#ff79c6',          // 操作符
-  variable: '#8fbcbb',          // 变量
-  type: '#8be9fd',             // 类型
-
-  // 语法高亮色 - 扩展
-  constant: '#bd93f9',          // 常量
-  storage: '#ff79c6',           // 存储类型
-  parameter: '#8fbcbb',         // 参数
-  class: '#8be9fd',             // 类名
-  heading: '#ff79c6',           // 标题
-  invalid: '#d30102',           // 无效内容
-  regexp: '#f1fa8c',            // 正则表达式
-
-  // 界面元素
-  cursor: '#ffffff',            // 光标
-  selection: '#0865a9',         // 选中背景
-  selectionBlur: '#225377',     // 失焦选中背景
-  activeLine: '#ffffff0a',      // 当前行高亮
-  lineNumber: '#ffffff26',      // 行号
-  activeLineNumber: '#ffffff99', // 活动行号
-
-  // 边框和分割线
-  borderColor: '#1e222a',       // 边框色
-  borderLight: '#ffffff19',     // 浅色边框
-
-  // 搜索和匹配
-  searchMatch: '#8fbcbb',       // 搜索匹配
-  matchingBracket: '#ffffff19', // 匹配括号
+  // 语法标签色值
+  comment: '#6272a4',
+  lineComment: '#5c6b99',
+  blockComment: '#596492',
+  docComment: '#6e7bb5',
+  name: '#dfe8ce',
+  variableName: '#8fbcbb',
+  typeName: '#8be9fd',
+  tagName: '#77d7f4',
+  propertyName: '#c9e3b0',
+  attributeName: '#e1c8ff',
+  className: '#a5e0ff',
+  labelName: '#f7b267',
+  namespace: '#5cd1ff',
+  macroName: '#ffcf8b',
+  literal: '#c3b5ff',
+  string: '#f1fa8c',
+  docString: '#e9f28a',
+  character: '#ffd684',
+  attributeValue: '#ffe099',
+  number: '#bd93f9',
+  integer: '#c6a5ff',
+  float: '#b68afd',
+  bool: '#7dd4cc',
+  regexp: '#9cf0f1',
+  escape: '#85dedd',
+  color: '#ffd38d',
+  url: '#8de0ff',
+  keyword: '#ff79c6',
+  self: '#ff94d6',
+  null: '#ff9fe2',
+  atom: '#cba6ff',
+  unit: '#a8dbd2',
+  modifier: '#f78cc8',
+  operatorKeyword: '#ff84cf',
+  controlKeyword: '#ff6fb6',
+  definitionKeyword: '#ff92d6',
+  moduleKeyword: '#ff8aca',
+  operator: '#ff79c6',
+  derefOperator: '#ff9bd6',
+  arithmeticOperator: '#ff7fc4',
+  logicOperator: '#ff9fcf',
+  bitwiseOperator: '#ff6fb8',
+  compareOperator: '#ff85c7',
+  updateOperator: '#ff76bd',
+  definitionOperator: '#ff6db7',
+  typeOperator: '#ff9bdd',
+  controlOperator: '#ff69ad',
+  punctuation: '#f5a6d9',
+  separator: '#f0a3d7',
+  bracket: '#cda0ff',
+  angleBracket: '#ffc0f1',
+  squareBracket: '#ff8db5',
+  paren: '#ff9ec8',
+  brace: '#fe7ab1',
+  content: '#dfeed0',
+  heading: '#ff9b6b',
+  heading1: '#ffb75f',
+  heading2: '#ffad57',
+  heading3: '#ffa14e',
+  heading4: '#ff9447',
+  heading5: '#ff8842',
+  heading6: '#ff7b3c',
+  contentSeparator: '#ff79c6',
+  list: '#acd1a2',
+  quote: '#7c8fb5',
+  emphasis: '#d9f7c1',
+  strong: '#fdf1c1',
+  link: '#6ac8ff',
+  monospace: '#d1dbc0',
+  strikethrough: '#b7c3a5',
+  inserted: '#64d189',
+  deleted: '#ff6b6b',
+  changed: '#ffb86c',
+  invalid: '#d30102',
+  meta: '#7285bb',
+  documentMeta: '#6a7caa',
+  annotation: '#9bf0ff',
+  processingInstruction: '#7685bd',
+  definition: '#9ec9c3',
+  constant: '#bd93f9',
+  function: '#50fa7b',
+  standard: '#8ab0a8',
+  local: '#92c7bb',
+  special: '#f4d67a',
 };
 
-// 创建深色主题
 export function createDarkTheme(colors: ThemeColors = defaultDarkColors) {
   return createBaseTheme({...colors, dark: true});
 }
-
-// 默认深色主题
-export const defaultDark = createDarkTheme(defaultDarkColors);

frontend/src/views/editor/theme/dark/dracula.ts

@@ -1,57 +1,110 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'dracula',
+  themeName: 'dracula',
   dark: true,
-  
-  // 基础色调
-  background: '#282A36',
-  backgroundSecondary: '#323543FF',
-  surface: '#282A36',
-  dropdownBackground: '#282A36',
-  dropdownBorder: '#191A21',
-  
-  // 文本颜色
-  foreground: '#F8F8F2',
-  foregroundSecondary: '#F8F8F2',
-  comment: '#6272A4',
-  
-  // 语法高亮色 - 核心
-  keyword: '#FF79C6',
-  string: '#F1FA8C',
-  function: '#50FA7B',
-  number: '#BD93F9',
-  operator: '#FF79C6',
-  variable: '#F8F8F2',
-  type: '#8BE9FD',
-  
-  // 语法高亮色 - 扩展
-  constant: '#BD93F9',
-  storage: '#FF79C6',
-  parameter: '#F8F8F2',
-  class: '#8BE9FD',
-  heading: '#BD93F9',
-  invalid: '#FF5555',
-  regexp: '#F1FA8C',
-  
-  // 界面元素
-  cursor: '#F8F8F2',
-  selection: '#44475A',
-  selectionBlur: '#44475A',
-  activeLine: '#53576c22',
-  lineNumber: '#6272A4',
-  activeLineNumber: '#F8F8F2',
-  
-  // 边框和分割线
-  borderColor: '#191A21',
-  borderLight: '#F8F8F219',
-  
-  // 搜索和匹配
-  searchMatch: '#50FA7B',
-  matchingBracket: '#44475A',
-}
 
-// 使用通用主题工厂函数创建 Dracula 主题
-export const dracula: Extension = createBaseTheme(config)
+  background: '#282a36',
+  backgroundSecondary: '#323543',
+
+  foreground: '#f8f8f2',
+  cursor: '#f8f8f2',
+  selection: '#44475a',
+  activeLine: '#53576c22',
+  lineNumber: '#6272a4',
+  activeLineNumber: '#f8f8f2',
+  diffInserted: '#50fa7b',
+  diffDeleted: '#ff5555',
+  diffChanged: '#f1fa8c',
+  borderColor: '#191a21',
+  matchingBracket: '#44475a',
+
+  comment: '#6272a4',
+  lineComment: '#55608c',
+  blockComment: '#4f597f',
+  docComment: '#7c89bd',
+  name: '#f8f8f2',
+  variableName: '#f8f8f2',
+  typeName: '#8be9fd',
+  tagName: '#7de5ff',
+  propertyName: '#dcdce5',
+  attributeName: '#fcb5ff',
+  className: '#9cecff',
+  labelName: '#ffb86c',
+  namespace: '#6deeff',
+  macroName: '#50fa7b',
+  literal: '#bd93f9',
+  string: '#f1fa8c',
+  docString: '#f5ffa9',
+  character: '#ffec99',
+  attributeValue: '#ffcf99',
+  number: '#bd93f9',
+  integer: '#cfa6ff',
+  float: '#b48cff',
+  bool: '#ffb38b',
+  regexp: '#f1fa8c',
+  escape: '#f7ffae',
+  color: '#ffcf99',
+  url: '#8ae8ff',
+  keyword: '#ff79c6',
+  self: '#ff9dd7',
+  null: '#ff8fb0',
+  atom: '#bd93f9',
+  unit: '#bd93f9',
+  modifier: '#ff90d4',
+  operatorKeyword: '#ff8bd2',
+  controlKeyword: '#ff7dc1',
+  definitionKeyword: '#ff91d1',
+  moduleKeyword: '#ffacd9',
+  operator: '#ff79c6',
+  derefOperator: '#ff91d1',
+  arithmeticOperator: '#ff88c5',
+  logicOperator: '#ff8bcf',
+  bitwiseOperator: '#ff74ba',
+  compareOperator: '#ff86c6',
+  updateOperator: '#ff7cbf',
+  definitionOperator: '#ff6aae',
+  typeOperator: '#ff98d9',
+  controlOperator: '#ff6aa6',
+  punctuation: '#f4ade4',
+  separator: '#f3a6dc',
+  bracket: '#cfaefc',
+  angleBracket: '#ffcff1',
+  squareBracket: '#ff9fcc',
+  paren: '#ffb1d8',
+  brace: '#ff90c1',
+  content: '#f8f8f2',
+  heading: '#bd93f9',
+  heading1: '#d2b3ff',
+  heading2: '#c7a8ff',
+  heading3: '#bb9dff',
+  heading4: '#af92ff',
+  heading5: '#a387ff',
+  heading6: '#977cff',
+  contentSeparator: '#ff79c6',
+  list: '#c8cbd1',
+  quote: '#7b86a7',
+  emphasis: '#f8f8f2',
+  strong: '#ffffff',
+  link: '#8be9fd',
+  monospace: '#dadfde',
+  strikethrough: '#c2c8d1',
+  inserted: '#50fa7b',
+  deleted: '#ff5555',
+  changed: '#f1fa8c',
+  invalid: '#ff5555',
+  meta: '#8791bb',
+  documentMeta: '#7b84aa',
+  annotation: '#a7f7d4',
+  processingInstruction: '#6c7699',
+  definition: '#d6d9f2',
+  constant: '#bd93f9',
+  function: '#50fa7b',
+  standard: '#bac4d8',
+  local: '#c3c8da',
+  special: '#ffd6a5',
+};
+
+export const dracula: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/dark/github-dark.ts

@@ -1,57 +1,110 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'github-dark',
+  themeName: 'github-dark',
   dark: true,
-  
-  // 基础色调
+
   background: '#24292e',
-  backgroundSecondary: '#2E343BFF',
-  surface: '#24292e',
-  dropdownBackground: '#24292e',
-  dropdownBorder: '#1b1f23',
-  
-  // 文本颜色
+  backgroundSecondary: '#2e343b',
+
   foreground: '#d1d5da',
-  foregroundSecondary: '#d1d5da',
-  comment: '#6a737d',
-  
-  // 语法高亮色 - 核心
-  keyword: '#f97583',
-  string: '#9ecbff',
-  function: '#79b8ff',
-  number: '#79b8ff',
-  operator: '#f97583',
-  variable: '#ffab70',
-  type: '#79b8ff',
-  
-  // 语法高亮色 - 扩展
-  constant: '#79b8ff',
-  storage: '#f97583',
-  parameter: '#e1e4e8',
-  class: '#b392f0',
-  heading: '#79b8ff',
-  invalid: '#f97583',
-  regexp: '#9ecbff',
-  
-  // 界面元素
   cursor: '#c8e1ff',
-  selection: '#3392FF44',
-  selectionBlur: '#3392FF44',
+  selection: '#3392ff44',
   activeLine: '#4d566022',
   lineNumber: '#444d56',
   activeLineNumber: '#e1e4e8',
-  
-  // 边框和分割线
+  diffInserted: '#2ea043',
+  diffDeleted: '#d73a49',
+  diffChanged: '#c69026',
   borderColor: '#1b1f23',
-  borderLight: '#d1d5da19',
-  
-  // 搜索和匹配
-  searchMatch: '#79b8ff',
-  matchingBracket: '#17E5E650',
-}
+  matchingBracket: '#17e5e650',
 
-// 使用通用主题工厂函数创建 GitHub Dark 主题
-export const githubDark: Extension = createBaseTheme(config)
+  comment: '#6a737d',
+  lineComment: '#596068',
+  blockComment: '#4f555c',
+  docComment: '#7c858f',
+  name: '#d1d5da',
+  variableName: '#ffab70',
+  typeName: '#79b8ff',
+  tagName: '#8dd1ff',
+  propertyName: '#d9dee5',
+  attributeName: '#c0a7ff',
+  className: '#b392f0',
+  labelName: '#ffab70',
+  namespace: '#84c5ff',
+  macroName: '#79b8ff',
+  literal: '#79b8ff',
+  string: '#9ecbff',
+  docString: '#aed3ff',
+  character: '#ffe4b2',
+  attributeValue: '#ffcf9a',
+  number: '#79b8ff',
+  integer: '#6fb1ff',
+  float: '#62a7ff',
+  bool: '#ffa657',
+  regexp: '#9ecbff',
+  escape: '#8bc2ff',
+  color: '#ffc27c',
+  url: '#68b7ff',
+  keyword: '#f97583',
+  self: '#ffa5b1',
+  null: '#ff8b76',
+  atom: '#79b8ff',
+  unit: '#79b8ff',
+  modifier: '#ff9a8c',
+  operatorKeyword: '#ff8c80',
+  controlKeyword: '#ff7f73',
+  definitionKeyword: '#ff9aa1',
+  moduleKeyword: '#ffb1ae',
+  operator: '#f97583',
+  derefOperator: '#ff8a7d',
+  arithmeticOperator: '#ff7c6a',
+  logicOperator: '#ff8172',
+  bitwiseOperator: '#ff6958',
+  compareOperator: '#ff7c6c',
+  updateOperator: '#ff6d5e',
+  definitionOperator: '#ff5d54',
+  typeOperator: '#ff8ca5',
+  controlOperator: '#ff5b4f',
+  punctuation: '#d6a3c5',
+  separator: '#d2a9c9',
+  bracket: '#98a6c8',
+  angleBracket: '#c3d5ff',
+  squareBracket: '#b6c4e4',
+  paren: '#b0bace',
+  brace: '#a1aabf',
+  content: '#d1d5da',
+  heading: '#79b8ff',
+  heading1: '#9ac7ff',
+  heading2: '#8fbfff',
+  heading3: '#85b7ff',
+  heading4: '#7bafff',
+  heading5: '#70a7ff',
+  heading6: '#669eff',
+  contentSeparator: '#f97583',
+  list: '#b8bfc7',
+  quote: '#7d848c',
+  emphasis: '#d1d5da',
+  strong: '#f5f7f9',
+  link: '#79b8ff',
+  monospace: '#cfd6df',
+  strikethrough: '#acb4bd',
+  inserted: '#2ea043',
+  deleted: '#d73a49',
+  changed: '#c69026',
+  invalid: '#f97583',
+  meta: '#8591a1',
+  documentMeta: '#7b8593',
+  annotation: '#90d6ff',
+  processingInstruction: '#6a7380',
+  definition: '#cdd4de',
+  constant: '#79b8ff',
+  function: '#79b8ff',
+  standard: '#bac4d1',
+  local: '#c5ccd7',
+  special: '#ffd9a6',
+};
+
+export const githubDark: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/dark/material-dark.ts

@@ -1,57 +1,110 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'material-dark',
+  themeName: 'material-dark',
   dark: true,
-  
-  // 基础色调
-  background: '#263238',
-  backgroundSecondary: '#2D3E46FF',
-  surface: '#263238',
-  dropdownBackground: '#263238',
-  dropdownBorder: '#FFFFFF10',
-  
-  // 文本颜色
-  foreground: '#EEFFFF',
-  foregroundSecondary: '#EEFFFF',
-  comment: '#546E7A',
-  
-  // 语法高亮色 - 核心
-  keyword: '#C792EA',
-  string: '#C3E88D',
-  function: '#82AAFF',
-  number: '#F78C6C',
-  operator: '#C792EA',
-  variable: '#EEFFFF',
-  type: '#B2CCD6',
-  
-  // 语法高亮色 - 扩展
-  constant: '#F78C6C',
-  storage: '#C792EA',
-  parameter: '#EEFFFF',
-  class: '#FFCB6B',
-  heading: '#C3E88D',
-  invalid: '#FF5370',
-  regexp: '#89DDFF',
-  
-  // 界面元素
-  cursor: '#FFCC00',
-  selection: '#80CBC420',
-  selectionBlur: '#80CBC420',
-  activeLine: '#4c616c22',
-  lineNumber: '#37474F',
-  activeLineNumber: '#607a86',
-  
-  // 边框和分割线
-  borderColor: '#FFFFFF10',
-  borderLight: '#EEFFFF19',
-  
-  // 搜索和匹配
-  searchMatch: '#82AAFF',
-  matchingBracket: '#263238',
-}
 
-// 使用通用主题工厂函数创建 Material Dark 主题
-export const materialDark: Extension = createBaseTheme(config)
+  background: '#263238',
+  backgroundSecondary: '#2d3e46',
+
+  foreground: '#eeffff',
+  cursor: '#ffcc00',
+  selection: '#80cbc420',
+  activeLine: '#4c616c22',
+  lineNumber: '#37474f',
+  activeLineNumber: '#607a86',
+  diffInserted: '#c3e88d',
+  diffDeleted: '#ff5370',
+  diffChanged: '#ffcb6b',
+  borderColor: '#ffffff10',
+  matchingBracket: '#263238',
+
+  comment: '#546e7a',
+  lineComment: '#4b606a',
+  blockComment: '#455962',
+  docComment: '#6c8795',
+  name: '#eeffff',
+  variableName: '#eeffff',
+  typeName: '#b2ccd6',
+  tagName: '#9ad4f5',
+  propertyName: '#e0f2ff',
+  attributeName: '#ffdcdc',
+  className: '#ffcb6b',
+  labelName: '#ffd17a',
+  namespace: '#8ad2e7',
+  macroName: '#82aaff',
+  literal: '#f78c6c',
+  string: '#c3e88d',
+  docString: '#d3f8a8',
+  character: '#ffe8c0',
+  attributeValue: '#ffd99f',
+  number: '#f78c6c',
+  integer: '#ff996e',
+  float: '#ffad80',
+  bool: '#ffd37d',
+  regexp: '#89ddff',
+  escape: '#66d9ff',
+  color: '#ffd492',
+  url: '#72d1ff',
+  keyword: '#c792ea',
+  self: '#d29ef2',
+  null: '#ff8aad',
+  atom: '#f78c6c',
+  unit: '#f78c6c',
+  modifier: '#dca8f0',
+  operatorKeyword: '#ca8de3',
+  controlKeyword: '#c280e1',
+  definitionKeyword: '#ce95ea',
+  moduleKeyword: '#d8a8f0',
+  operator: '#c792ea',
+  derefOperator: '#d79ef4',
+  arithmeticOperator: '#d28aec',
+  logicOperator: '#cd84e3',
+  bitwiseOperator: '#c77cdf',
+  compareOperator: '#cc8fe5',
+  updateOperator: '#c47ad9',
+  definitionOperator: '#bb6fd0',
+  typeOperator: '#cfa2ed',
+  controlOperator: '#b767cf',
+  punctuation: '#d9b4ff',
+  separator: '#d5aef6',
+  bracket: '#9fb6c5',
+  angleBracket: '#c4ddff',
+  squareBracket: '#a7c5dd',
+  paren: '#adc3d4',
+  brace: '#92aabd',
+  content: '#eeffff',
+  heading: '#c3e88d',
+  heading1: '#aeea9c',
+  heading2: '#a0dd92',
+  heading3: '#92d087',
+  heading4: '#85c37d',
+  heading5: '#78b673',
+  heading6: '#6aa969',
+  contentSeparator: '#c792ea',
+  list: '#b7cad4',
+  quote: '#758892',
+  emphasis: '#eeffff',
+  strong: '#f8ffff',
+  link: '#89ddff',
+  monospace: '#d7e4ec',
+  strikethrough: '#b4c4cc',
+  inserted: '#c3e88d',
+  deleted: '#ff5370',
+  changed: '#ffcb6b',
+  invalid: '#ff5370',
+  meta: '#6d8795',
+  documentMeta: '#648292',
+  annotation: '#73e0ff',
+  processingInstruction: '#617480',
+  definition: '#d0dae4',
+  constant: '#f78c6c',
+  function: '#82aaff',
+  standard: '#bacdd8',
+  local: '#c3d3dc',
+  special: '#ffd8a6',
+};
+
+export const materialDark: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/dark/one-dark.ts

@@ -1,76 +1,123 @@
-import {Extension} from "@codemirror/state"
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
-// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
-
-const chalky = "#e5c07b",
-    coral = "#e06c75",
-    cyan = "#56b6c2",
-    invalid = "#ffffff",
-    ivory = "#abb2bf",
-    stone = "#7d8799", // Brightened compared to original to increase contrast
-    malibu = "#61afef",
-    sage = "#98c379",
-    whiskey = "#d19a66",
-    violet = "#c678dd",
-    darkBackground = "#21252b",
-    highlightBackground = "#313949FF",
-    background = "#282c34",
-    tooltipBackground = "#353a42",
-    selection = "#3E4451",
-    cursor = "#528bff"
+const chalky = '#e5c07b';
+const coral = '#e06c75';
+const cyan = '#56b6c2';
+const ivory = '#abb2bf';
+const stone = '#7d8799';
+const malibu = '#61afef';
+const sage = '#98c379';
+const whiskey = '#d19a66';
+const violet = '#c678dd';
+const darkBackground = '#21252b';
+const highlightBackground = '#313949ff';
+const background = '#282c34';
+const selection = '#3e4451';
 
 export const config: ThemeColors = {
-  name: 'one-dark',
+  themeName: 'one-dark',
   dark: true,
-  
-  // 基础色调
-  background: background,
+
+  background,
   backgroundSecondary: highlightBackground,
-  surface: tooltipBackground,
-  dropdownBackground: darkBackground,
-  dropdownBorder: stone,
-  
-  // 文本颜色
   foreground: ivory,
-  foregroundSecondary: stone,
-  comment: stone,
-  
-  // 语法高亮色 - 核心
-  keyword: violet,
-  string: sage,
-  function: malibu,
-  number: chalky,
-  operator: cyan,
-  variable: coral,
-  type: chalky,
-  
-  // 语法高亮色 - 扩展
-  constant: whiskey,
-  storage: violet,
-  parameter: coral,
-  class: chalky,
-  heading: coral,
-  invalid: invalid,
-  regexp: cyan,
-  
-  // 界面元素
-  cursor: cursor,
-  selection: selection,
-  selectionBlur: selection,
+  cursor: '#528bff',
+  selection,
   activeLine: '#6699ff0b',
   lineNumber: stone,
   activeLineNumber: ivory,
-  
-  // 边框和分割线
+  diffInserted: sage,
+  diffDeleted: coral,
+  diffChanged: whiskey,
   borderColor: darkBackground,
-  borderLight: ivory + '19',
-  
-  // 搜索和匹配
-  searchMatch: malibu,
   matchingBracket: '#bad0f847',
-}
 
-// 使用通用主题工厂函数创建 One Dark 主题
-export const oneDark: Extension = createBaseTheme(config)
+  comment: stone,
+  lineComment: '#6c7484',
+  blockComment: '#606775',
+  docComment: '#8b92a0',
+  name: ivory,
+  variableName: coral,
+  typeName: chalky,
+  tagName: '#e4c78f',
+  propertyName: '#d7dee8',
+  attributeName: '#efb8c2',
+  className: chalky,
+  labelName: '#f7b267',
+  namespace: '#88c0ff',
+  macroName: malibu,
+  literal: chalky,
+  string: sage,
+  docString: '#b3d899',
+  character: '#d9f59c',
+  attributeValue: '#f0c390',
+  number: chalky,
+  integer: '#f2c78d',
+  float: '#f1ba6a',
+  bool: '#f28f6a',
+  regexp: cyan,
+  escape: '#7fd5e9',
+  color: whiskey,
+  url: '#7dc7ff',
+  keyword: violet,
+  self: '#d98ae8',
+  null: '#ef8fa8',
+  atom: whiskey,
+  unit: '#fbd38a',
+  modifier: '#d391f2',
+  operatorKeyword: '#78c3d6',
+  controlKeyword: '#bf6edb',
+  definitionKeyword: '#d383e6',
+  moduleKeyword: '#a6c1ff',
+  operator: cyan,
+  derefOperator: '#72c1d3',
+  arithmeticOperator: '#6ab4ce',
+  logicOperator: '#6ccad7',
+  bitwiseOperator: '#4fa8c2',
+  compareOperator: '#64b9cc',
+  updateOperator: '#4299b8',
+  definitionOperator: '#398daf',
+  typeOperator: '#3fc4e2',
+  controlOperator: '#3f96b0',
+  punctuation: '#8eaac2',
+  separator: '#7a96b1',
+  bracket: '#b3bcc7',
+  angleBracket: '#cfd5dd',
+  squareBracket: '#96a2ae',
+  paren: '#7f8c97',
+  brace: '#9aa5af',
+  content: ivory,
+  heading: coral,
+  heading1: '#ffb19d',
+  heading2: '#ffa188',
+  heading3: '#ff9173',
+  heading4: '#ff825e',
+  heading5: '#ff7249',
+  heading6: '#ff6234',
+  contentSeparator: cyan,
+  list: '#9da7b4',
+  quote: '#8b94a4',
+  emphasis: ivory,
+  strong: '#f4f6f8',
+  link: malibu,
+  monospace: '#c2cad1',
+  strikethrough: '#9ea5b1',
+  inserted: sage,
+  deleted: coral,
+  changed: whiskey,
+  invalid: '#ffffff',
+  meta: '#96a1b4',
+  documentMeta: '#8a95a6',
+  annotation: '#84d0ff',
+  processingInstruction: '#7c889c',
+  definition: '#c9cfd8',
+  constant: whiskey,
+  function: malibu,
+  standard: '#aeb7c5',
+  local: '#b9c2ce',
+  special: '#f4d67a',
+};
+
+export const oneDark: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/dark/solarized-dark.ts

@@ -1,57 +1,110 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'solarized-dark',
+  themeName: 'solarized-dark',
   dark: true,
-  
-  // 基础色调
-  background: '#002B36',
-  backgroundSecondary: '#003643FF',
-  surface: '#002B36',
-  dropdownBackground: '#002B36',
-  dropdownBorder: '#2AA19899',
-  
-  // 文本颜色
-  foreground: '#93A1A1',
-  foregroundSecondary: '#93A1A1',
-  comment: '#586E75',
-  
-  // 语法高亮色 - 核心
-  keyword: '#859900',
-  string: '#2AA198',
-  function: '#268BD2',
-  number: '#D33682',
-  operator: '#859900',
-  variable: '#268BD2',
-  type: '#CB4B16',
-  
-  // 语法高亮色 - 扩展
-  constant: '#CB4B16',
-  storage: '#93A1A1',
-  parameter: '#268BD2',
-  class: '#CB4B16',
-  heading: '#268BD2',
-  invalid: '#DC322F',
-  regexp: '#DC322F',
-  
-  // 界面元素
-  cursor: '#D30102',
-  selection: '#274642',
-  selectionBlur: '#274642',
-  activeLine: '#005b7022',
-  lineNumber: '#93A1A1',
-  activeLineNumber: '#949494',
-  
-  // 边框和分割线
-  borderColor: '#073642',
-  borderLight: '#93A1A119',
-  
-  // 搜索和匹配
-  searchMatch: '#2AA198',
-  matchingBracket: '#073642',
-}
 
-// 使用通用主题工厂函数创建 Solarized Dark 主题
-export const solarizedDark: Extension = createBaseTheme(config)
+  background: '#002b36',
+  backgroundSecondary: '#003643',
+
+  foreground: '#fdf6e3',
+  cursor: '#d30102',
+  selection: '#274642',
+  activeLine: '#005b7022',
+  lineNumber: '#93a1a1',
+  activeLineNumber: '#949494',
+  diffInserted: '#859900',
+  diffDeleted: '#dc322f',
+  diffChanged: '#b58900',
+  borderColor: '#073642',
+  matchingBracket: '#073642',
+
+  comment: '#586e75',
+  lineComment: '#4f646a',
+  blockComment: '#46595e',
+  docComment: '#7c8f94',
+  name: '#fdf6e3',
+  variableName: '#b58900',
+  typeName: '#2aa198',
+  tagName: '#2ab7a5',
+  propertyName: '#d7c8a1',
+  attributeName: '#f1c795',
+  className: '#b58900',
+  labelName: '#d7991f',
+  namespace: '#3ca8a0',
+  macroName: '#268bd2',
+  literal: '#d33682',
+  string: '#859900',
+  docString: '#9cc200',
+  character: '#b3dd00',
+  attributeValue: '#e1c272',
+  number: '#d33682',
+  integer: '#c0478a',
+  float: '#b03a79',
+  bool: '#ffcc4d',
+  regexp: '#2aa198',
+  escape: '#35bcb1',
+  color: '#d19100',
+  url: '#268bd2',
+  keyword: '#cb4b16',
+  self: '#e2572f',
+  null: '#ff6845',
+  atom: '#d33682',
+  unit: '#ad8100',
+  modifier: '#d96d22',
+  operatorKeyword: '#bc5822',
+  controlKeyword: '#c14a17',
+  definitionKeyword: '#de5c29',
+  moduleKeyword: '#d4975b',
+  operator: '#6c71c4',
+  derefOperator: '#8a78d8',
+  arithmeticOperator: '#7d6fd0',
+  logicOperator: '#8376d5',
+  bitwiseOperator: '#6a5dc3',
+  compareOperator: '#8171cd',
+  updateOperator: '#5d54b4',
+  definitionOperator: '#5f56b8',
+  typeOperator: '#379e9d',
+  controlOperator: '#5950a7',
+  punctuation: '#b1a6d2',
+  separator: '#a090c1',
+  bracket: '#cac5dc',
+  angleBracket: '#e4e1ee',
+  squareBracket: '#bdb6cf',
+  paren: '#aba5c0',
+  brace: '#c2bcd5',
+  content: '#fdf6e3',
+  heading: '#cb4b16',
+  heading1: '#e06c2c',
+  heading2: '#d95d1b',
+  heading3: '#c1500f',
+  heading4: '#b3450a',
+  heading5: '#a33805',
+  heading6: '#932c00',
+  contentSeparator: '#6c71c4',
+  list: '#c3b79f',
+  quote: '#8b968f',
+  emphasis: '#fdf6e3',
+  strong: '#fefaf0',
+  link: '#268bd2',
+  monospace: '#d6cfbd',
+  strikethrough: '#c4bba5',
+  inserted: '#859900',
+  deleted: '#dc322f',
+  changed: '#b58900',
+  invalid: '#dc322f',
+  meta: '#687b84',
+  documentMeta: '#5f7179',
+  annotation: '#2bb0cf',
+  processingInstruction: '#5a6b71',
+  definition: '#dacfb9',
+  constant: '#d33682',
+  function: '#268bd2',
+  standard: '#9bb1b0',
+  local: '#b4c3bb',
+  special: '#b58900',
+};
+
+export const solarizedDark: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/dark/tokyo-night-storm.ts

@@ -1,57 +1,110 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'tokyo-night-storm',
+  themeName: 'tokyo-night-storm',
   dark: true,
-  
-  // 基础色调
+
   background: '#24283b',
-  backgroundSecondary: '#2B3151FF',
-  surface: '#24283b',
-  dropdownBackground: '#24283b',
-  dropdownBorder: '#7982a9',
-  
-  // 文本颜色
-  foreground: '#7982a9',
-  foregroundSecondary: '#7982a9',
-  comment: '#565f89',
-  
-  // 语法高亮色 - 核心
-  keyword: '#bb9af7',
-  string: '#9ece6a',
-  function: '#7aa2f7',
-  number: '#ff9e64',
-  operator: '#bb9af7',
-  variable: '#c0caf5',
-  type: '#2ac3de',
-  
-  // 语法高亮色 - 扩展
-  constant: '#bb9af7',
-  storage: '#bb9af7',
-  parameter: '#c0caf5',
-  class: '#c0caf5',
-  heading: '#89ddff',
-  invalid: '#ff5370',
-  regexp: '#b4f9f8',
-  
-  // 界面元素
+  backgroundSecondary: '#2b3151',
+
+  foreground: '#c0caf5',
   cursor: '#c0caf5',
   selection: '#6f7bb630',
-  selectionBlur: '#6f7bb630',
   activeLine: '#4d547722',
   lineNumber: '#3b4261',
   activeLineNumber: '#737aa2',
-  
-  // 边框和分割线
+  diffInserted: '#9ece6a',
+  diffDeleted: '#f7768e',
+  diffChanged: '#ff9e64',
   borderColor: '#1f2335',
-  borderLight: '#7982a919',
-  
-  // 搜索和匹配
-  searchMatch: '#7aa2f7',
   matchingBracket: '#1f2335',
-}
 
-// 使用通用主题工厂函数创建 Tokyo Night Storm 主题
-export const tokyoNightStorm: Extension = createBaseTheme(config)
+  comment: '#565f89',
+  lineComment: '#4d567b',
+  blockComment: '#454e6f',
+  docComment: '#6f789b',
+  name: '#c0caf5',
+  variableName: '#c0caf5',
+  typeName: '#2ac3de',
+  tagName: '#5ad4e9',
+  propertyName: '#cfd4ed',
+  attributeName: '#f2bde1',
+  className: '#8fb7ff',
+  labelName: '#ffc28b',
+  namespace: '#3cd4e9',
+  macroName: '#7aa2f7',
+  literal: '#ff9e64',
+  string: '#9ece6a',
+  docString: '#abd88a',
+  character: '#cff7a8',
+  attributeValue: '#f8cda5',
+  number: '#ff9e64',
+  integer: '#ffae7d',
+  float: '#ffa467',
+  bool: '#ffbf75',
+  regexp: '#b4f9f8',
+  escape: '#91f1ff',
+  color: '#ffb782',
+  url: '#7aa2f7',
+  keyword: '#bb9af7',
+  self: '#d8a2ff',
+  null: '#ff96be',
+  atom: '#ff9e64',
+  unit: '#f7d38a',
+  modifier: '#dab5ff',
+  operatorKeyword: '#d0b2ff',
+  controlKeyword: '#ce9cff',
+  definitionKeyword: '#dcbaff',
+  moduleKeyword: '#aab8ff',
+  operator: '#bb9af7',
+  derefOperator: '#d2a7ff',
+  arithmeticOperator: '#cda0ff',
+  logicOperator: '#b78fff',
+  bitwiseOperator: '#a179f0',
+  compareOperator: '#b984ff',
+  updateOperator: '#a071f1',
+  definitionOperator: '#9366e3',
+  typeOperator: '#3ed2f2',
+  controlOperator: '#8a61f6',
+  punctuation: '#9da7cd',
+  separator: '#8f9abc',
+  bracket: '#afb6cb',
+  angleBracket: '#cad1e3',
+  squareBracket: '#959bb3',
+  paren: '#828aa4',
+  brace: '#96a0b8',
+  content: '#c0caf5',
+  heading: '#89ddff',
+  heading1: '#9fe2ff',
+  heading2: '#8bd9ff',
+  heading3: '#77d0ff',
+  heading4: '#63c7ff',
+  heading5: '#4fbeff',
+  heading6: '#3bb5ff',
+  contentSeparator: '#bb9af7',
+  list: '#858caa',
+  quote: '#5f6583',
+  emphasis: '#c0caf5',
+  strong: '#e7ebff',
+  link: '#7aa2f7',
+  monospace: '#a8aac1',
+  strikethrough: '#7f85a5',
+  inserted: '#9ece6a',
+  deleted: '#f7768e',
+  changed: '#ff9e64',
+  invalid: '#ff5370',
+  meta: '#656c90',
+  documentMeta: '#5c6381',
+  annotation: '#8df1ff',
+  processingInstruction: '#545975',
+  definition: '#bcc3df',
+  constant: '#ff9e64',
+  function: '#7aa2f7',
+  standard: '#8e9ac0',
+  local: '#98a2c8',
+  special: '#ffc68a',
+};
+
+export const tokyoNightStorm: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/dark/tokyo-night.ts

@@ -1,57 +1,110 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'tokyo-night',
+  themeName: 'tokyo-night',
   dark: true,
-  
-  // 基础色调
+
   background: '#1a1b26',
-  backgroundSecondary: '#272839FF',
-  surface: '#1a1b26',
-  dropdownBackground: '#1a1b26',
-  dropdownBorder: '#787c99',
-  
-  // 文本颜色
-  foreground: '#787c99',
-  foregroundSecondary: '#787c99',
-  comment: '#444b6a',
-  
-  // 语法高亮色 - 核心
-  keyword: '#bb9af7',
-  string: '#9ece6a',
-  function: '#7aa2f7',
-  number: '#ff9e64',
-  operator: '#bb9af7',
-  variable: '#c0caf5',
-  type: '#0db9d7',
-  
-  // 语法高亮色 - 扩展
-  constant: '#bb9af7',
-  storage: '#bb9af7',
-  parameter: '#c0caf5',
-  class: '#c0caf5',
-  heading: '#89ddff',
-  invalid: '#ff5370',
-  regexp: '#b4f9f8',
-  
-  // 界面元素
+  backgroundSecondary: '#272839',
+
+  foreground: '#c0caf5',
   cursor: '#c0caf5',
   selection: '#515c7e40',
-  selectionBlur: '#515c7e40',
   activeLine: '#43455c22',
   lineNumber: '#363b54',
   activeLineNumber: '#737aa2',
-  
-  // 边框和分割线
+  diffInserted: '#9ece6a',
+  diffDeleted: '#f7768e',
+  diffChanged: '#ff9e64',
   borderColor: '#16161e',
-  borderLight: '#787c9919',
-  
-  // 搜索和匹配
-  searchMatch: '#7aa2f7',
   matchingBracket: '#16161e',
-}
 
-// 使用通用主题工厂函数创建 Tokyo Night 主题
-export const tokyoNight: Extension = createBaseTheme(config)
+  comment: '#444b6a',
+  lineComment: '#3d4360',
+  blockComment: '#373d55',
+  docComment: '#5a6084',
+  name: '#c0caf5',
+  variableName: '#c0caf5',
+  typeName: '#0db9d7',
+  tagName: '#68dce9',
+  propertyName: '#d0d5f0',
+  attributeName: '#f0b7d7',
+  className: '#7aa2f7',
+  labelName: '#ffbd82',
+  namespace: '#38c5d9',
+  macroName: '#7aa2f7',
+  literal: '#ff9e64',
+  string: '#9ece6a',
+  docString: '#adda7d',
+  character: '#d7f5a2',
+  attributeValue: '#f6c299',
+  number: '#ff9e64',
+  integer: '#ffae7d',
+  float: '#ffa467',
+  bool: '#ffb86c',
+  regexp: '#b4f9f8',
+  escape: '#8df0f0',
+  color: '#ff9e64',
+  url: '#7aa2f7',
+  keyword: '#bb9af7',
+  self: '#d0a0ff',
+  null: '#ff90b2',
+  atom: '#ff9e64',
+  unit: '#fbd38a',
+  modifier: '#d6b4ff',
+  operatorKeyword: '#ccabff',
+  controlKeyword: '#c89cff',
+  definitionKeyword: '#d6baff',
+  moduleKeyword: '#9fb3ff',
+  operator: '#bb9af7',
+  derefOperator: '#c7a3ff',
+  arithmeticOperator: '#c39aff',
+  logicOperator: '#b08eff',
+  bitwiseOperator: '#9b78f0',
+  compareOperator: '#ae9bf5',
+  updateOperator: '#9a82e7',
+  definitionOperator: '#8b75d7',
+  typeOperator: '#3fc4e2',
+  controlOperator: '#9266f2',
+  punctuation: '#98a1c3',
+  separator: '#8b93b4',
+  bracket: '#a4acc6',
+  angleBracket: '#c1c8df',
+  squareBracket: '#8e96b5',
+  paren: '#7a83a3',
+  brace: '#8f98b5',
+  content: '#c0caf5',
+  heading: '#89ddff',
+  heading1: '#9ce9ff',
+  heading2: '#88dfff',
+  heading3: '#74d5ff',
+  heading4: '#60cbff',
+  heading5: '#4cc1ff',
+  heading6: '#38b7ff',
+  contentSeparator: '#bb9af7',
+  list: '#7d849f',
+  quote: '#5d6382',
+  emphasis: '#c0caf5',
+  strong: '#e6e9ff',
+  link: '#7aa2f7',
+  monospace: '#a9aac0',
+  strikethrough: '#7f8399',
+  inserted: '#9ece6a',
+  deleted: '#f7768e',
+  changed: '#ff9e64',
+  invalid: '#ff5370',
+  meta: '#61678b',
+  documentMeta: '#585d7c',
+  annotation: '#8cf5ff',
+  processingInstruction: '#525670',
+  definition: '#bfc6e4',
+  constant: '#ff9e64',
+  function: '#7aa2f7',
+  standard: '#8490b3',
+  local: '#909abf',
+  special: '#ffb347',
+};
+
+export const tokyoNight: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/light/default-light.ts

@@ -1,63 +1,111 @@
 import {createBaseTheme} from '../base';
 import type {ThemeColors} from '../types';
 
-// 默认浅色主题颜色
 export const defaultLightColors: ThemeColors = {
-    // 主题信息
-    name: 'default-light',
+    themeName: 'default-light',
     dark: false,
 
-    // 基础色调
-    background: '#ffffff',        // 主背景色
-    backgroundSecondary: '#f1faf1', // 次要背景色
-    surface: '#f5f5f5',           // 面板背景
-    dropdownBackground: '#ffffff', // 下拉菜单背景
-    dropdownBorder: '#e1e4e8',    // 下拉菜单边框
+    background: '#ffffff',
+    backgroundSecondary: '#f4f7fb',
 
-    // 文本颜色
-    foreground: '#444d56',        // 主文本色
-    foregroundSecondary: '#6a737d', // 次要文本色
-    comment: '#6a737d',           // 注释色
+    foreground: '#24292e',
+    cursor: '#000000',
+    selection: '#77baff',
+    activeLine: '#0000000a',
+    lineNumber: '#00000040',
+    activeLineNumber: '#000000aa',
+    diffInserted: '#2da44e',
+    diffDeleted: '#d73a49',
+    diffChanged: '#c69026',
+    borderColor: '#d8dee4',
+    matchingBracket: '#00000019',
 
-    // 语法高亮色 - 核心
-    keyword: '#d73a49',           // 关键字
-    string: '#032f62',            // 字符串
-    function: '#005cc5',          // 函数名
-    number: '#005cc5',            // 数字
-    operator: '#d73a49',          // 操作符
-    variable: '#24292e',          // 变量
-    type: '#6f42c1',             // 类型
-
-    // 语法高亮色 - 扩展
-    constant: '#005cc5',          // 常量
-    storage: '#d73a49',           // 存储类型
-    parameter: '#24292e',         // 参数
-    class: '#6f42c1',             // 类名
-    heading: '#d73a49',           // 标题
-    invalid: '#cb2431',           // 无效内容
-    regexp: '#032f62',            // 正则表达式
-
-    // 界面元素
-    cursor: '#000000',            // 光标
-    selection: '#77baff',         // 选中背景
-    selectionBlur: '#b2c2ca',     // 失焦选中背景
-    activeLine: '#0000000a',      // 当前行高亮
-    lineNumber: '#00000040',      // 行号
-    activeLineNumber: '#000000aa', // 活动行号
-
-    // 边框和分割线
-    borderColor: '#dfdfdf',       // 边框色
-    borderLight: '#0000000c',     // 浅色边框
-
-    // 搜索和匹配
-    searchMatch: '#005cc5',       // 搜索匹配
-    matchingBracket: '#00000019', // 匹配括号
+    comment: '#6a737d',
+    lineComment: '#808a95',
+    blockComment: '#5c646f',
+    docComment: '#909ba8',
+    name: '#1f2329',
+    variableName: '#27313c',
+    typeName: '#5b32c2',
+    tagName: '#3d60c9',
+    propertyName: '#384252',
+    attributeName: '#7c3aed',
+    className: '#4c3ad7',
+    labelName: '#975400',
+    namespace: '#2f6f9f',
+    macroName: '#ae5f00',
+    literal: '#0b5cc5',
+    string: '#032f62',
+    docString: '#0a477f',
+    character: '#174f92',
+    attributeValue: '#8c4f00',
+    number: '#0f65c9',
+    integer: '#0075d6',
+    float: '#0086e6',
+    bool: '#b7410e',
+    regexp: '#2362a1',
+    escape: '#3383c5',
+    color: '#db6e00',
+    url: '#005cc5',
+    keyword: '#d73a49',
+    self: '#b92548',
+    null: '#be1347',
+    atom: '#8241c1',
+    unit: '#a75500',
+    modifier: '#c9245d',
+    operatorKeyword: '#c23143',
+    controlKeyword: '#bf213a',
+    definitionKeyword: '#d45563',
+    moduleKeyword: '#c2476a',
+    operator: '#c93a56',
+    derefOperator: '#cf4c67',
+    arithmeticOperator: '#c82a57',
+    logicOperator: '#c23a5e',
+    bitwiseOperator: '#c23f4d',
+    compareOperator: '#c9455b',
+    updateOperator: '#c2304d',
+    definitionOperator: '#ca3c6b',
+    typeOperator: '#a642d9',
+    controlOperator: '#bd3552',
+    punctuation: '#a37a00',
+    separator: '#a87700',
+    bracket: '#7c8ba1',
+    angleBracket: '#7a9fbd',
+    squareBracket: '#99a7c3',
+    paren: '#5c6e90',
+    brace: '#8d96a8',
+    content: '#1f2329',
+    heading: '#b35900',
+    heading1: '#b04a00',
+    heading2: '#b55e00',
+    heading3: '#b96f00',
+    heading4: '#bb7c00',
+    heading5: '#be8900',
+    heading6: '#c29500',
+    contentSeparator: '#c4b200',
+    list: '#566266',
+    quote: '#7c858f',
+    emphasis: '#1f2329',
+    strong: '#111217',
+    link: '#0a58ca',
+    monospace: '#3a434f',
+    strikethrough: '#5d6469',
+    inserted: '#2da44e',
+    deleted: '#d73a49',
+    changed: '#c69026',
+    invalid: '#cb2431',
+    meta: '#4c5a6b',
+    documentMeta: '#5e6977',
+    annotation: '#7f4cd6',
+    processingInstruction: '#4f5b63',
+    definition: '#30404d',
+    constant: '#0b5cc5',
+    function: '#005cc5',
+    standard: '#40566b',
+    local: '#2f3944',
+    special: '#a44500',
 };
 
-// 创建浅色主题
 export function createLightTheme(colors: ThemeColors = defaultLightColors) {
     return createBaseTheme({...colors, dark: false});
 }
-
-// 默认浅色主题
-export const defaultLight = createLightTheme(defaultLightColors);

frontend/src/views/editor/theme/light/github-light.ts

@@ -1,57 +1,110 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'github-light',
+  themeName: 'github-light',
   dark: false,
-  
-  // 基础色调
-  background: '#fff',
+
+  background: '#ffffff',
   backgroundSecondary: '#f1faf1',
-  surface: '#fff',
-  dropdownBackground: '#fff',
-  dropdownBorder: '#e1e4e8',
-  
-  // 文本颜色
+
   foreground: '#444d56',
-  foregroundSecondary: '#444d56',
-  comment: '#6a737d',
-  
-  // 语法高亮色 - 核心
-  keyword: '#d73a49',
-  string: '#032f62',
-  function: '#005cc5',
-  number: '#005cc5',
-  operator: '#d73a49',
-  variable: '#e36209',
-  type: '#005cc5',
-  
-  // 语法高亮色 - 扩展
-  constant: '#005cc5',
-  storage: '#d73a49',
-  parameter: '#24292e',
-  class: '#6f42c1',
-  heading: '#005cc5',
-  invalid: '#cb2431',
-  regexp: '#032f62',
-  
-  // 界面元素
   cursor: '#044289',
   selection: '#0366d625',
-  selectionBlur: '#0366d625',
   activeLine: '#c6c6c622',
   lineNumber: '#1b1f234d',
   activeLineNumber: '#24292e',
-  
-  // 边框和分割线
+  diffInserted: '#2ea043',
+  diffDeleted: '#cb2431',
+  diffChanged: '#f2cc60',
   borderColor: '#e1e4e8',
-  borderLight: '#444d5619',
-  
-  // 搜索和匹配
-  searchMatch: '#005cc5',
   matchingBracket: '#34d05840',
-}
 
-// 使用通用主题工厂函数创建 GitHub Light 主题
-export const githubLight: Extension = createBaseTheme(config)
+  comment: '#6a737d',
+  lineComment: '#5e6873',
+  blockComment: '#4f5864',
+  docComment: '#7a828c',
+  name: '#444d56',
+  variableName: '#e36209',
+  typeName: '#005cc5',
+  tagName: '#0b5cbf',
+  propertyName: '#5c6670',
+  attributeName: '#a34f8b',
+  className: '#6f42c1',
+  labelName: '#e36209',
+  namespace: '#1667c1',
+  macroName: '#005cc5',
+  literal: '#005cc5',
+  string: '#032f62',
+  docString: '#1a4a7d',
+  character: '#205893',
+  attributeValue: '#ad6f2c',
+  number: '#005cc5',
+  integer: '#0a4cb0',
+  float: '#0c58c6',
+  bool: '#b08800',
+  regexp: '#032f62',
+  escape: '#0a7dd6',
+  color: '#bf7a0f',
+  url: '#005cc5',
+  keyword: '#d73a49',
+  self: '#f14e6f',
+  null: '#d73a49',
+  atom: '#005cc5',
+  unit: '#a07400',
+  modifier: '#e36209',
+  operatorKeyword: '#cc3745',
+  controlKeyword: '#c2303d',
+  definitionKeyword: '#de4f5d',
+  moduleKeyword: '#9c4fd8',
+  operator: '#d73a49',
+  derefOperator: '#c02c3a',
+  arithmeticOperator: '#b02834',
+  logicOperator: '#b83341',
+  bitwiseOperator: '#9a2334',
+  compareOperator: '#c1343f',
+  updateOperator: '#a8282f',
+  definitionOperator: '#99212c',
+  typeOperator: '#1c8198',
+  controlOperator: '#882033',
+  punctuation: '#c3a5d5',
+  separator: '#bf9fcf',
+  bracket: '#97a3bf',
+  angleBracket: '#bcc7dd',
+  squareBracket: '#9aa6bf',
+  paren: '#7d889f',
+  brace: '#a8b2c6',
+  content: '#444d56',
+  heading: '#005cc5',
+  heading1: '#2a72c7',
+  heading2: '#2665b5',
+  heading3: '#2158a3',
+  heading4: '#1c4b91',
+  heading5: '#173e7f',
+  heading6: '#12316d',
+  contentSeparator: '#d73a49',
+  list: '#9aa2ad',
+  quote: '#7a828c',
+  emphasis: '#444d56',
+  strong: '#1b1f23',
+  link: '#005cc5',
+  monospace: '#6a737d',
+  strikethrough: '#737b84',
+  inserted: '#2ea043',
+  deleted: '#cb2431',
+  changed: '#f2cc60',
+  invalid: '#cb2431',
+  meta: '#5f6a74',
+  documentMeta: '#57606a',
+  annotation: '#0b7bbd',
+  processingInstruction: '#4d5860',
+  definition: '#7a848f',
+  constant: '#005cc5',
+  function: '#005cc5',
+  standard: '#5a646d',
+  local: '#6c757f',
+  special: '#b08800',
+};
+
+export const githubLight: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/light/material-light.ts

@@ -1,57 +1,110 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'material-light',
+  themeName: 'material-light',
   dark: false,
-  
-  // 基础色调
-  background: '#FAFAFA',
-  backgroundSecondary: '#f1faf1',
-  surface: '#FAFAFA',
-  dropdownBackground: '#FAFAFA',
-  dropdownBorder: '#00000010',
-  
-  // 文本颜色
-  foreground: '#90A4AE',
-  foregroundSecondary: '#90A4AE',
-  comment: '#90A4AE',
-  
-  // 语法高亮色 - 核心
-  keyword: '#7C4DFF',
-  string: '#91B859',
-  function: '#6182B8',
-  number: '#F76D47',
-  operator: '#7C4DFF',
-  variable: '#90A4AE',
-  type: '#8796B0',
-  
-  // 语法高亮色 - 扩展
-  constant: '#F76D47',
-  storage: '#7C4DFF',
-  parameter: '#90A4AE',
-  class: '#FFB62C',
-  heading: '#91B859',
-  invalid: '#E53935',
-  regexp: '#39ADB5',
-  
-  // 界面元素
-  cursor: '#272727',
-  selection: '#80CBC440',
-  selectionBlur: '#80CBC440',
-  activeLine: '#c2c2c222',
-  lineNumber: '#CFD8DC',
-  activeLineNumber: '#7E939E',
-  
-  // 边框和分割线
-  borderColor: '#00000010',
-  borderLight: '#90A4AE19',
-  
-  // 搜索和匹配
-  searchMatch: '#6182B8',
-  matchingBracket: '#FAFAFA',
-}
 
-// 使用通用主题工厂函数创建 Material Light 主题
-export const materialLight: Extension = createBaseTheme(config)
+  background: '#fafafa',
+  backgroundSecondary: '#f1faf1',
+
+  foreground: '#90a4ae',
+  cursor: '#272727',
+  selection: '#80cbc440',
+  activeLine: '#c2c2c222',
+  lineNumber: '#cfd8dc',
+  activeLineNumber: '#7e939e',
+  diffInserted: '#91b859',
+  diffDeleted: '#e53935',
+  diffChanged: '#ffcb6b',
+  borderColor: '#00000010',
+  matchingBracket: '#fafafa',
+
+  comment: '#90a4ae',
+  lineComment: '#8598a3',
+  blockComment: '#788b97',
+  docComment: '#a3b6c1',
+  name: '#90a4ae',
+  variableName: '#90a4ae',
+  typeName: '#8796b0',
+  tagName: '#8ab0c7',
+  propertyName: '#bcccd5',
+  attributeName: '#ffb7c5',
+  className: '#ffb62c',
+  labelName: '#f78c6c',
+  namespace: '#61bcd2',
+  macroName: '#6182b8',
+  literal: '#f76d47',
+  string: '#91b859',
+  docString: '#a2cf6e',
+  character: '#cbe58f',
+  attributeValue: '#f7c493',
+  number: '#f76d47',
+  integer: '#f88760',
+  float: '#ff9a73',
+  bool: '#caa840',
+  regexp: '#39adb5',
+  escape: '#5ed1ce',
+  color: '#f4a35d',
+  url: '#4c91d6',
+  keyword: '#7c4dff',
+  self: '#9f77ff',
+  null: '#c9495f',
+  atom: '#f76d47',
+  unit: '#cf7a44',
+  modifier: '#a07ffe',
+  operatorKeyword: '#9c7bff',
+  controlKeyword: '#8a66ff',
+  definitionKeyword: '#a782ff',
+  moduleKeyword: '#6c89ff',
+  operator: '#7c4dff',
+  derefOperator: '#a07cfe',
+  arithmeticOperator: '#916dff',
+  logicOperator: '#9c74ff',
+  bitwiseOperator: '#7a5bdd',
+  compareOperator: '#8b64ef',
+  updateOperator: '#6f4ecf',
+  definitionOperator: '#6a4bc7',
+  typeOperator: '#5bbbd2',
+  controlOperator: '#6244b5',
+  punctuation: '#a2b3c0',
+  separator: '#94a3b0',
+  bracket: '#c2cad0',
+  angleBracket: '#dee5eb',
+  squareBracket: '#b8c1c7',
+  paren: '#a5aebb',
+  brace: '#bcc4ce',
+  content: '#90a4ae',
+  heading: '#91b859',
+  heading1: '#a5cf6c',
+  heading2: '#9bc261',
+  heading3: '#92b656',
+  heading4: '#89a94c',
+  heading5: '#809d41',
+  heading6: '#779136',
+  contentSeparator: '#7c4dff',
+  list: '#a6b4bb',
+  quote: '#7c8a91',
+  emphasis: '#90a4ae',
+  strong: '#3e4a52',
+  link: '#6182b8',
+  monospace: '#b7c4cc',
+  strikethrough: '#98a5ad',
+  inserted: '#91b859',
+  deleted: '#e53935',
+  changed: '#ffcb6b',
+  invalid: '#e53935',
+  meta: '#8ca0a9',
+  documentMeta: '#7e9099',
+  annotation: '#58d3e6',
+  processingInstruction: '#6d7e87',
+  definition: '#c7d2d6',
+  constant: '#f76d47',
+  function: '#6182b8',
+  standard: '#a5b2b8',
+  local: '#b3c0c7',
+  special: '#ffb62c',
+};
+
+export const materialLight: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/light/solarized-light.ts

@@ -1,57 +1,110 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'solarized-light',
+  themeName: 'solarized-light',
   dark: false,
-  
-  // 基础色调
-  background: '#FDF6E3',
-  backgroundSecondary: '#FFEEBCD4',
-  surface: '#FDF6E3',
-  dropdownBackground: '#FDF6E3',
-  dropdownBorder: '#D3AF86',
-  
-  // 文本颜色
-  foreground: '#586E75',
-  foregroundSecondary: '#586E75',
-  comment: '#93A1A1',
-  
-  // 语法高亮色 - 核心
-  keyword: '#859900',
-  string: '#2AA198',
-  function: '#268BD2',
-  number: '#D33682',
-  operator: '#859900',
-  variable: '#268BD2',
-  type: '#CB4B16',
-  
-  // 语法高亮色 - 扩展
-  constant: '#CB4B16',
-  storage: '#586E75',
-  parameter: '#268BD2',
-  class: '#CB4B16',
-  heading: '#268BD2',
-  invalid: '#DC322F',
-  regexp: '#DC322F',
-  
-  // 界面元素
-  cursor: '#657B83',
-  selection: '#EEE8D5',
-  selectionBlur: '#EEE8D5',
-  activeLine: '#d5bd5c22',
-  lineNumber: '#586E75',
-  activeLineNumber: '#567983',
-  
-  // 边框和分割线
-  borderColor: '#EEE8D5',
-  borderLight: '#586E7519',
-  
-  // 搜索和匹配
-  searchMatch: '#268BD2',
-  matchingBracket: '#EEE8D5',
-}
 
-// 使用通用主题工厂函数创建 Solarized Light 主题
-export const solarizedLight: Extension = createBaseTheme(config)
+  background: '#fdf6e3',
+  backgroundSecondary: '#ffeeccd4',
+
+  foreground: '#586e75',
+  cursor: '#657b83',
+  selection: '#eee8d5',
+  activeLine: '#d5bd5c22',
+  lineNumber: '#586e75',
+  activeLineNumber: '#567983',
+  diffInserted: '#2aa198',
+  diffDeleted: '#dc322f',
+  diffChanged: '#b58900',
+  borderColor: '#eee8d5',
+  matchingBracket: '#eee8d5',
+
+  comment: '#93a1a1',
+  lineComment: '#82939d',
+  blockComment: '#7a8b95',
+  docComment: '#a5b6be',
+  name: '#586e75',
+  variableName: '#268bd2',
+  typeName: '#cb4b16',
+  tagName: '#2cbeb1',
+  propertyName: '#b3baba',
+  attributeName: '#d4835a',
+  className: '#cb4b16',
+  labelName: '#c98c0d',
+  namespace: '#3bb3ae',
+  macroName: '#268bd2',
+  literal: '#d33682',
+  string: '#2aa198',
+  docString: '#23b1a2',
+  character: '#4bd2c7',
+  attributeValue: '#c09a53',
+  number: '#d33682',
+  integer: '#c74a78',
+  float: '#b93d6b',
+  bool: '#b58900',
+  regexp: '#2aa198',
+  escape: '#3ad1c5',
+  color: '#cb4b16',
+  url: '#268bd2',
+  keyword: '#859900',
+  self: '#97aa06',
+  null: '#bf5f00',
+  atom: '#cb4b16',
+  unit: '#a57300',
+  modifier: '#a1871e',
+  operatorKeyword: '#76860a',
+  controlKeyword: '#7d9509',
+  definitionKeyword: '#7ba600',
+  moduleKeyword: '#5e9d76',
+  operator: '#859900',
+  derefOperator: '#9daa22',
+  arithmeticOperator: '#8c9b19',
+  logicOperator: '#85a612',
+  bitwiseOperator: '#6a7e0a',
+  compareOperator: '#7da811',
+  updateOperator: '#63740a',
+  definitionOperator: '#5f6c08',
+  typeOperator: '#2aa198',
+  controlOperator: '#586e0b',
+  punctuation: '#9db3ae',
+  separator: '#8c9f96',
+  bracket: '#cad2c9',
+  angleBracket: '#e3e8e0',
+  squareBracket: '#b7bfb7',
+  paren: '#939c93',
+  brace: '#c2c9c1',
+  content: '#586e75',
+  heading: '#268bd2',
+  heading1: '#3fb7d4',
+  heading2: '#36abc8',
+  heading3: '#2d9fbc',
+  heading4: '#2493b0',
+  heading5: '#1b87a4',
+  heading6: '#127b98',
+  contentSeparator: '#859900',
+  list: '#a7a591',
+  quote: '#8f9b8e',
+  emphasis: '#586e75',
+  strong: '#657b83',
+  link: '#268bd2',
+  monospace: '#c8c2b4',
+  strikethrough: '#bab29d',
+  inserted: '#2aa198',
+  deleted: '#dc322f',
+  changed: '#b58900',
+  invalid: '#dc322f',
+  meta: '#7d8b8f',
+  documentMeta: '#758288',
+  annotation: '#3ab4c3',
+  processingInstruction: '#6a7377',
+  definition: '#bcc7c0',
+  constant: '#cb4b16',
+  function: '#268bd2',
+  standard: '#8da1a0',
+  local: '#9eb1ac',
+  special: '#b58900',
+};
+
+export const solarizedLight: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/light/tokyo-night-day.ts

@@ -1,57 +1,110 @@
-import {Extension} from '@codemirror/state'
-import {createBaseTheme} from '../base'
-import type {ThemeColors} from '../types'
+import {Extension} from '@codemirror/state';
+import {createBaseTheme} from '../base';
+import type {ThemeColors} from '../types';
 
 export const config: ThemeColors = {
-  name: 'tokyo-night-day',
+  themeName: 'tokyo-night-day',
   dark: false,
-  
-  // 基础色调
+
   background: '#e1e2e7',
-  backgroundSecondary: '#D2D8EFFF',
-  surface: '#e1e2e7',
-  dropdownBackground: '#e1e2e7',
-  dropdownBorder: '#6a6f8e',
-  
-  // 文本颜色
+  backgroundSecondary: '#d2d8ef',
+
   foreground: '#6a6f8e',
-  foregroundSecondary: '#6a6f8e',
-  comment: '#9da3c2',
-  
-  // 语法高亮色 - 核心
-  keyword: '#9854f1',
-  string: '#587539',
-  function: '#2e7de9',
-  number: '#b15c00',
-  operator: '#9854f1',
-  variable: '#3760bf',
-  type: '#07879d',
-  
-  // 语法高亮色 - 扩展
-  constant: '#9854f1',
-  storage: '#9854f1',
-  parameter: '#3760bf',
-  class: '#3760bf',
-  heading: '#006a83',
-  invalid: '#ff3e64',
-  regexp: '#2e5857',
-  
-  // 界面元素
   cursor: '#3760bf',
   selection: '#8591b840',
-  selectionBlur: '#8591b840',
   activeLine: '#a7aaba22',
   lineNumber: '#b3b6cd',
   activeLineNumber: '#68709a',
-  
-  // 边框和分割线
+  diffInserted: '#587539',
+  diffDeleted: '#ff3e64',
+  diffChanged: '#b15c00',
   borderColor: '#e9e9ec',
-  borderLight: '#6a6f8e19',
-  
-  // 搜索和匹配
-  searchMatch: '#2e7de9',
   matchingBracket: '#e9e9ec',
-}
 
-// 使用通用主题工厂函数创建 Tokyo Night Day 主题
-export const tokyoNightDay: Extension = createBaseTheme(config)
+  comment: '#9da3c2',
+  lineComment: '#8b90a8',
+  blockComment: '#7e849d',
+  docComment: '#aeb3cb',
+  name: '#6a6f8e',
+  variableName: '#3760bf',
+  typeName: '#07879d',
+  tagName: '#4d8cff',
+  propertyName: '#8fa3d2',
+  attributeName: '#df8fb0',
+  className: '#4a71d6',
+  labelName: '#c37300',
+  namespace: '#3c99c0',
+  macroName: '#2e7de9',
+  literal: '#b15c00',
+  string: '#587539',
+  docString: '#4f8646',
+  character: '#79a058',
+  attributeValue: '#d28e43',
+  number: '#b15c00',
+  integer: '#d77500',
+  float: '#c36800',
+  bool: '#c79200',
+  regexp: '#2e5857',
+  escape: '#2c6f68',
+  color: '#c06f0f',
+  url: '#2e7de9',
+  keyword: '#9854f1',
+  self: '#c277ff',
+  null: '#ff5c7f',
+  atom: '#9854f1',
+  unit: '#ba6a00',
+  modifier: '#b16fff',
+  operatorKeyword: '#b67bff',
+  controlKeyword: '#ad68ff',
+  definitionKeyword: '#be84ff',
+  moduleKeyword: '#8f7dff',
+  operator: '#9854f1',
+  derefOperator: '#bb7fff',
+  arithmeticOperator: '#b173ff',
+  logicOperator: '#a369ff',
+  bitwiseOperator: '#8d59f0',
+  compareOperator: '#a673ff',
+  updateOperator: '#8c57dd',
+  definitionOperator: '#8150d3',
+  typeOperator: '#0aa5b5',
+  controlOperator: '#7741ca',
+  punctuation: '#9aa3c9',
+  separator: '#8f98be',
+  bracket: '#b5bdd6',
+  angleBracket: '#d8def0',
+  squareBracket: '#adb5cb',
+  paren: '#939ab7',
+  brace: '#b1b7cb',
+  content: '#6a6f8e',
+  heading: '#006a83',
+  heading1: '#0083a3',
+  heading2: '#007796',
+  heading3: '#006a89',
+  heading4: '#005e7c',
+  heading5: '#00516f',
+  heading6: '#004562',
+  contentSeparator: '#9854f1',
+  list: '#9ca1b8',
+  quote: '#8087a4',
+  emphasis: '#6a6f8e',
+  strong: '#404868',
+  link: '#2e7de9',
+  monospace: '#9ca0be',
+  strikethrough: '#7d819b',
+  inserted: '#587539',
+  deleted: '#ff3e64',
+  changed: '#b15c00',
+  invalid: '#ff3e64',
+  meta: '#8189a3',
+  documentMeta: '#737a92',
+  annotation: '#4ab2c9',
+  processingInstruction: '#6d7389',
+  definition: '#bdc2de',
+  constant: '#9854f1',
+  function: '#2e7de9',
+  standard: '#7a83a4',
+  local: '#8d95b3',
+  special: '#c17800',
+};
+
+export const tokyoNightDay: Extension = createBaseTheme(config);

frontend/src/views/editor/theme/presets.ts

@@ -0,0 +1,52 @@
+import type {ThemeColors} from './types';
+import {ThemeType} from '@/../bindings/voidraft/internal/models/models';
+import {defaultDarkColors} from './dark/default-dark';
+import {defaultLightColors} from './light/default-light';
+import {config as draculaColors} from './dark/dracula';
+import {config as auraColors} from './dark/aura';
+import {config as githubDarkColors} from './dark/github-dark';
+import {config as materialDarkColors} from './dark/material-dark';
+import {config as oneDarkColors} from './dark/one-dark';
+import {config as solarizedDarkColors} from './dark/solarized-dark';
+import {config as tokyoNightColors} from './dark/tokyo-night';
+import {config as tokyoNightStormColors} from './dark/tokyo-night-storm';
+import {config as githubLightColors} from './light/github-light';
+import {config as materialLightColors} from './light/material-light';
+import {config as solarizedLightColors} from './light/solarized-light';
+import {config as tokyoNightDayColors} from './light/tokyo-night-day';
+
+export interface ThemePreset {
+    name: string;
+    type: ThemeType;
+    colors: ThemeColors;
+}
+
+export const FALLBACK_THEME_NAME = defaultDarkColors.themeName;
+
+export const themePresetList: ThemePreset[] = [
+    {name: defaultDarkColors.themeName, type: ThemeType.ThemeTypeDark, colors: defaultDarkColors},
+    {name: draculaColors.themeName, type: ThemeType.ThemeTypeDark, colors: draculaColors},
+    {name: auraColors.themeName, type: ThemeType.ThemeTypeDark, colors: auraColors},
+    {name: githubDarkColors.themeName, type: ThemeType.ThemeTypeDark, colors: githubDarkColors},
+    {name: materialDarkColors.themeName, type: ThemeType.ThemeTypeDark, colors: materialDarkColors},
+    {name: oneDarkColors.themeName, type: ThemeType.ThemeTypeDark, colors: oneDarkColors},
+    {name: solarizedDarkColors.themeName, type: ThemeType.ThemeTypeDark, colors: solarizedDarkColors},
+    {name: tokyoNightColors.themeName, type: ThemeType.ThemeTypeDark, colors: tokyoNightColors},
+    {name: tokyoNightStormColors.themeName, type: ThemeType.ThemeTypeDark, colors: tokyoNightStormColors},
+    {name: defaultLightColors.themeName, type: ThemeType.ThemeTypeLight, colors: defaultLightColors},
+    {name: githubLightColors.themeName, type: ThemeType.ThemeTypeLight, colors: githubLightColors},
+    {name: materialLightColors.themeName, type: ThemeType.ThemeTypeLight, colors: materialLightColors},
+    {name: solarizedLightColors.themeName, type: ThemeType.ThemeTypeLight, colors: solarizedLightColors},
+    {name: tokyoNightDayColors.themeName, type: ThemeType.ThemeTypeLight, colors: tokyoNightDayColors},
+];
+
+export const themePresetMap: Record<string, ThemePreset> = themePresetList.reduce(
+    (map, preset) => {
+        map[preset.name] = preset;
+        return map;
+    },
+    {} as Record<string, ThemePreset>
+);
+
+export const cloneThemeColors = (colors: ThemeColors): ThemeColors =>
+    JSON.parse(JSON.stringify(colors)) as ThemeColors;

frontend/src/views/editor/theme/types.ts

@@ -1,52 +1,196 @@
-export interface ThemeColors {
-  // 主题基本信息
-  name: string;                     // 主题名称
-  dark: boolean;                    // 是否为深色主题标识
+export type SyntaxTag =
+  | 'comment'
+  | 'lineComment'
+  | 'blockComment'
+  | 'docComment'
+  | 'name'
+  | 'variableName'
+  | 'typeName'
+  | 'tagName'
+  | 'propertyName'
+  | 'attributeName'
+  | 'className'
+  | 'labelName'
+  | 'namespace'
+  | 'macroName'
+  | 'literal'
+  | 'string'
+  | 'docString'
+  | 'character'
+  | 'attributeValue'
+  | 'number'
+  | 'integer'
+  | 'float'
+  | 'bool'
+  | 'regexp'
+  | 'escape'
+  | 'color'
+  | 'url'
+  | 'keyword'
+  | 'self'
+  | 'null'
+  | 'atom'
+  | 'unit'
+  | 'modifier'
+  | 'operatorKeyword'
+  | 'controlKeyword'
+  | 'definitionKeyword'
+  | 'moduleKeyword'
+  | 'operator'
+  | 'derefOperator'
+  | 'arithmeticOperator'
+  | 'logicOperator'
+  | 'bitwiseOperator'
+  | 'compareOperator'
+  | 'updateOperator'
+  | 'definitionOperator'
+  | 'typeOperator'
+  | 'controlOperator'
+  | 'punctuation'
+  | 'separator'
+  | 'bracket'
+  | 'angleBracket'
+  | 'squareBracket'
+  | 'paren'
+  | 'brace'
+  | 'content'
+  | 'heading'
+  | 'heading1'
+  | 'heading2'
+  | 'heading3'
+  | 'heading4'
+  | 'heading5'
+  | 'heading6'
+  | 'contentSeparator'
+  | 'list'
+  | 'quote'
+  | 'emphasis'
+  | 'strong'
+  | 'link'
+  | 'monospace'
+  | 'strikethrough'
+  | 'inserted'
+  | 'deleted'
+  | 'changed'
+  | 'invalid'
+  | 'meta'
+  | 'documentMeta'
+  | 'annotation'
+  | 'processingInstruction'
+  | 'definition'
+  | 'constant'
+  | 'function'
+  | 'standard'
+  | 'local'
+  | 'special';
 
-  // 基础色调
-  background: string;               // 主背景色
-  backgroundSecondary: string;      // 次要背景色（用于代码块交替背景）
-  surface: string;                  // 面板背景
-  dropdownBackground: string;       // 下拉菜单背景
-  dropdownBorder: string;           // 下拉菜单边框
-
-  // 文本颜色
-  foreground: string;               // 主文本色
-  foregroundSecondary: string;      // 次要文本色
-  comment: string;                  // 注释色
-
-  // 语法高亮色 - 核心
-  keyword: string;                  // 关键字
-  string: string;                   // 字符串
-  function: string;                 // 函数名
-  number: string;                   // 数字
-  operator: string;                 // 操作符
-  variable: string;                 // 变量
-  type: string;                     // 类型
-
-  // 语法高亮色 - 扩展
-  constant: string;                 // 常量
-  storage: string;                  // 存储类型（如 static, const）
-  parameter: string;                // 参数
-  class: string;                    // 类名
-  heading: string;                  // 标题（Markdown等）
-  invalid: string;                  // 无效内容/错误
-  regexp: string;                   // 正则表达式
-
-  // 界面元素
-  cursor: string;                   // 光标
-  selection: string;                // 选中背景
-  selectionBlur: string;            // 失焦选中背景
-  activeLine: string;               // 当前行高亮
-  lineNumber: string;               // 行号
-  activeLineNumber: string;         // 活动行号颜色
-
-  // 边框和分割线
-  borderColor: string;              // 边框色
-  borderLight: string;              // 浅色边框
-
-  // 搜索和匹配
-  searchMatch: string;              // 搜索匹配
-  matchingBracket: string;          // 匹配括号
+export interface ThemeTagColors {
+  comment: string;
+  lineComment: string;
+  blockComment: string;
+  docComment: string;
+  name: string;
+  variableName: string;
+  typeName: string;
+  tagName: string;
+  propertyName: string;
+  attributeName: string;
+  className: string;
+  labelName: string;
+  namespace: string;
+  macroName: string;
+  literal: string;
+  string: string;
+  docString: string;
+  character: string;
+  attributeValue: string;
+  number: string;
+  integer: string;
+  float: string;
+  bool: string;
+  regexp: string;
+  escape: string;
+  color: string;
+  url: string;
+  keyword: string;
+  self: string;
+  null: string;
+  atom: string;
+  unit: string;
+  modifier: string;
+  operatorKeyword: string;
+  controlKeyword: string;
+  definitionKeyword: string;
+  moduleKeyword: string;
+  operator: string;
+  derefOperator: string;
+  arithmeticOperator: string;
+  logicOperator: string;
+  bitwiseOperator: string;
+  compareOperator: string;
+  updateOperator: string;
+  definitionOperator: string;
+  typeOperator: string;
+  controlOperator: string;
+  punctuation: string;
+  separator: string;
+  bracket: string;
+  angleBracket: string;
+  squareBracket: string;
+  paren: string;
+  brace: string;
+  content: string;
+  heading: string;
+  heading1: string;
+  heading2: string;
+  heading3: string;
+  heading4: string;
+  heading5: string;
+  heading6: string;
+  contentSeparator: string;
+  list: string;
+  quote: string;
+  emphasis: string;
+  strong: string;
+  link: string;
+  monospace: string;
+  strikethrough: string;
+  inserted: string;
+  deleted: string;
+  changed: string;
+  invalid: string;
+  meta: string;
+  documentMeta: string;
+  annotation: string;
+  processingInstruction: string;
+  definition: string;
+  constant: string;
+  function: string;
+  standard: string;
+  local: string;
+  special: string;
+}
+
+export interface ThemeColors extends ThemeTagColors {
+  themeName: string;
+  dark: boolean;
+
+  background: string;  // 背景
+  backgroundSecondary: string; // 第二背景块
+
+  foreground: string;  // 背景文字颜色
+
+  cursor: string; // 光标颜色
+  selection: string;  // 选中文字颜色
+  activeLine: string;  // 当前行颜色
+  lineNumber: string;  // 行号颜色
+  activeLineNumber: string;  // 当前行号颜色
+
+  diffInserted?: string;  // 插入颜色
+  diffDeleted?: string;  // 删除颜色
+  diffChanged?: string;  // 变更颜色
+
+  borderColor: string;  // 边框颜色
+  matchingBracket: string;  // 匹配括号颜色
 }
 

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

@@ -2,7 +2,7 @@
 import { useConfigStore } from '@/stores/configStore';
 import { useThemeStore } from '@/stores/themeStore';
 import { useI18n } from 'vue-i18n';
-import { computed, watch, onMounted, ref } from 'vue';
+import { computed, watch, onMounted, ref, nextTick } from 'vue';
 import SettingSection from '../components/SettingSection.vue';
 import SettingItem from '../components/SettingItem.vue';
 import { SystemThemeType, LanguageType } from '@/../bindings/voidraft/internal/models/models';
@@ -50,7 +50,10 @@ const resetButtonState = ref({
 
 // 当前选中的主题名称
 const currentThemeName = computed({
-  get: () => themeStore.currentColors?.name || '',
+  get: () =>
+    themeStore.currentColors?.themeName ||
+    configStore.config.appearance.currentTheme ||
+    '',
   set: async (themeName: string) => {
     await themeStore.switchToTheme(themeName);
     syncTempColors();
@@ -89,21 +92,39 @@ onMounted(() => {
 // 从 ThemeColors 接口自动提取所有颜色字段
 const colorKeys = computed(() => {
   if (!tempColors.value) return [];
-  
-  // 获取所有字段，排除 name 和 dark（这两个是元数据）
-  return Object.keys(tempColors.value).filter(key => 
-    key !== 'name' && key !== 'dark'
-  );
+
+  return Object.keys(tempColors.value)
+    .filter(key => key !== 'themeName' && key !== 'dark')
+    .sort((a, b) => a.localeCompare(b));
 });
 
-// 颜色配置列表
-const colorList = computed(() => 
+const colorList = computed(() =>
   colorKeys.value.map(colorKey => ({
     key: colorKey,
-    label: t(`settings.themeColors.${colorKey}`)
+    label: colorKey
   }))
 );
 
+const colorSearch = ref('');
+const showSearch = ref(false);
+const searchInputRef = ref<HTMLInputElement | null>(null);
+
+const filteredColorList = computed(() => {
+  const keyword = colorSearch.value.trim().toLowerCase();
+  if (!keyword) return colorList.value;
+  return colorList.value.filter(color => color.key.toLowerCase().includes(keyword));
+});
+
+const toggleSearch = async () => {
+  showSearch.value = !showSearch.value;
+  if (showSearch.value) {
+    await nextTick();
+    searchInputRef.value?.focus();
+  } else {
+    colorSearch.value = '';
+  }
+};
+
 // 处理重置按钮点击
 const handleResetClick = () => {
   if (resetButtonState.value.confirming) {
@@ -193,7 +214,7 @@ const updateSystemTheme = async (event: Event) => {
   await themeStore.setTheme(selectedSystemTheme);
   
   const availableThemes = themeStore.availableThemes;
-  const currentThemeName = currentColors.value?.name;
+  const currentThemeName = currentColors.value?.themeName;
   const isCurrentThemeAvailable = availableThemes.some(t => t.name === currentThemeName);
   
   if (!isCurrentThemeAvailable && availableThemes.length > 0) {
@@ -242,7 +263,7 @@ const handlePickerClose = () => {
       <!-- 预设主题选择 -->
       <SettingItem :title="t('settings.presetTheme')">
         <select class="select-input" v-model="currentThemeName" :disabled="hasUnsavedChanges">
-          <option v-for="theme in themeStore.availableThemes" :key="theme.id" :value="theme.name">
+          <option v-for="theme in themeStore.availableThemes" :key="theme.name" :value="theme.name">
             {{ theme.name }}
           </option>
         </select>
@@ -251,14 +272,27 @@ const handlePickerClose = () => {
 
     <!-- 自定义主题颜色配置 -->
     <SettingSection :title="t('settings.customThemeColors')">
-      <template #title>
-        <div class="theme-section-title">
-          <span class="section-title-text">{{ t('settings.customThemeColors') }}</span>
-          <span v-if="currentColors.name" class="current-theme-name">{{ currentColors.name }}</span>
-        </div>
-      </template>
       <template #title-right>
         <div class="theme-controls">
+          <div :class="['theme-search-wrapper', showSearch ? 'active' : '']">
+            <input
+              ref="searchInputRef"
+              class="theme-search-input"
+              type="text"
+              v-model="colorSearch"
+              placeholder="Search..."
+            />
+          </div>
+          <button class="search-toggle-button" @click="toggleSearch" :title="showSearch ? '关闭搜索' : '搜索颜色'">
+            <svg v-if="!showSearch" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"></circle>
+              <path d="m21 21-4.35-4.35"></path>
+            </svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
           <button 
             v-if="!hasUnsavedChanges" 
             :class="['reset-button', resetButtonState.confirming ? 'reset-button-confirming' : '']" 
@@ -280,7 +314,7 @@ const handlePickerClose = () => {
       <!-- 颜色列表 -->
       <div class="color-list">
         <SettingItem 
-          v-for="color in colorList" 
+          v-for="color in filteredColorList" 
           :key="color.key" 
           :title="color.label"
           class="color-setting-item"
@@ -318,10 +352,6 @@ const handlePickerClose = () => {
 </template>
 
 <style scoped lang="scss">
-.settings-page {
-  //max-width: 1000px;
-}
-
 .select-input {
   min-width: 140px;
   padding: 6px 10px;
@@ -349,27 +379,6 @@ const handlePickerClose = () => {
   }
 }
 
-// 主题部分标题
-.theme-section-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.section-title-text {
-  font-weight: 500;
-}
-
-.current-theme-name {
-  font-size: 13px;
-  color: var(--settings-text-secondary);
-  font-weight: normal;
-  padding: 2px 8px;
-  background-color: var(--settings-input-bg);
-  border: 1px solid var(--settings-input-border);
-  border-radius: 4px;
-}
-
 // 主题控制区域
 .theme-controls {
   display: flex;
@@ -441,6 +450,78 @@ const handlePickerClose = () => {
   margin-top: 12px;
 }
 
+.theme-search-wrapper {
+  width: 0;
+  overflow: hidden;
+  transition: width 0.3s ease;
+  opacity: 0;
+}
+
+.theme-search-wrapper.active {
+  width: 150px;
+  margin-right: 8px;
+  opacity: 1;
+}
+
+.theme-search-input {
+  width: 100%;
+  padding: 6px 12px;
+  border: 1px solid var(--settings-input-border);
+  border-radius: 20px;
+  background-color: var(--settings-input-bg);
+  color: var(--settings-text);
+  font-size: 12px;
+  transition: all 0.2s ease;
+  height: 25px;
+  box-sizing: border-box;
+  
+  &:focus {
+    outline: none;
+    border-color: #4a9eff;
+    background-color: var(--settings-card-bg);
+    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
+  }
+  
+  &::placeholder {
+    color: var(--settings-text-secondary);
+    opacity: 0.6;
+  }
+}
+
+.search-toggle-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  margin-right: 8px;
+  padding: 0;
+  border: 1px solid var(--settings-input-border);
+  border-radius: 50%;
+  background-color: var(--settings-button-bg);
+  color: var(--settings-button-text);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  svg {
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #4a9eff;
+    background-color: var(--settings-button-hover-bg);
+    transform: scale(1.05);
+    
+    svg {
+      transform: scale(1.1);
+    }
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
 .color-setting-item {
   :deep(.setting-item-content) {
     align-items: center;
@@ -495,4 +576,4 @@ const handlePickerClose = () => {
     color: var(--settings-text-secondary);
   }
 }
-</style>
+</style>

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

@@ -19,16 +19,17 @@ onMounted(async () => {
 
 // 字体选择选项
 const fontFamilyOptions = computed(() => configStore.fontOptions);
-const currentFontFamily = computed(() => configStore.config.editing.fontFamily);
-
-// 字体选择
-const handleFontFamilyChange = async (event: Event) => {
-  const target = event.target as HTMLSelectElement;
-  const fontFamily = target.value;
-  if (fontFamily) {
-    await configStore.setFontFamily(fontFamily);
+const fontFamilyModel = computed({
+  get: () =>
+    configStore.config.editing.fontFamily ||
+    fontFamilyOptions.value[0]?.value ||
+    '',
+  set: async (fontFamily: string) => {
+    if (fontFamily) {
+      await configStore.setFontFamily(fontFamily);
+    }
   }
-};
+});
 
 // 字体粗细选项
 const fontWeightOptions = [
@@ -44,10 +45,14 @@ const fontWeightOptions = [
 ];
 
 // 字体粗细选择
-const handleFontWeightChange = async (event: Event) => {
-  const target = event.target as HTMLSelectElement;
-  await configStore.setFontWeight(target.value);
-};
+const fontWeightModel = computed({
+  get: () => configStore.config.editing.fontWeight || fontWeightOptions[0].value,
+  set: async (value: string) => {
+    if (value) {
+      await configStore.setFontWeight(value);
+    }
+  }
+});
 
 // 行高控制
 const increaseLineHeight = async () => {
@@ -118,8 +123,7 @@ const handleAutoSaveDelayChange = async (event: Event) => {
       >
         <select 
           class="font-family-select" 
-          :value="currentFontFamily"
-          @change="handleFontFamilyChange"
+          v-model="fontFamilyModel"
         >
           <option 
             v-for="option in fontFamilyOptions" 
@@ -146,8 +150,7 @@ const handleAutoSaveDelayChange = async (event: Event) => {
       >
         <select 
           class="font-weight-select" 
-          :value="configStore.config.editing.fontWeight"
-          @change="handleFontWeightChange"
+          v-model="fontWeightModel"
         >
           <option 
             v-for="option in fontWeightOptions" 
@@ -385,4 +388,4 @@ const handleAutoSaveDelayChange = async (event: Event) => {
     transform: none;
   }
 }
-</style>
+</style>

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

@@ -66,10 +66,12 @@ const updateExtensionConfig = async (extensionId: ExtensionID, configKey: string
     if (!extension) return;
 
     // 更新配置
-    const updatedConfig = {...extension.config, [configKey]: value};
-
-    console.log(`[ExtensionsPage] 更新扩展 ${extensionId} 配置, ${configKey}=${value}`);
-    
+    const updatedConfig = {...extension.config};
+    if (value === undefined) {
+      delete updatedConfig[configKey];
+    } else {
+      updatedConfig[configKey] = value;
+    }
     // 使用editorStore的updateExtension方法更新，确保应用到所有编辑器实例
     await editorStore.updateExtension(extensionId, extension.enabled, updatedConfig);
 
@@ -81,7 +83,7 @@ const updateExtensionConfig = async (extensionId: ExtensionID, configKey: string
 // 重置扩展到默认配置
 const resetExtension = async (extensionId: ExtensionID) => {
   try {
-    // 重置到默认配置（后端）
+    // 重置到默认配置
     await ExtensionService.ResetExtensionToDefault(extensionId);
 
     // 重新加载扩展状态以获取最新配置
@@ -92,63 +94,65 @@ const resetExtension = async (extensionId: ExtensionID) => {
     if (extension) {
       // 通过editorStore更新，确保所有视图都能同步
       await editorStore.updateExtension(extensionId, extension.enabled, extension.config);
-      console.log(`[ExtensionsPage] 重置扩展 ${extensionId} 配置，同步应用到所有编辑器实例`);
     }
   } catch (error) {
     console.error('Failed to reset extension:', error);
   }
 };
 
-// 配置项类型定义
-type ConfigItemType = 'toggle' | 'number' | 'text' | 'select'
-
-interface SelectOption {
-  value: any
-  label: string
-}
-
-interface ConfigItemMeta {
-  type: ConfigItemType
-  options?: SelectOption[]
-}
-
-// 只保留 select 类型的配置项元数据
-const extensionConfigMeta: Partial<Record<ExtensionID, Record<string, ConfigItemMeta>>> = {
-  [ExtensionID.ExtensionMinimap]: {
-    displayText: {
-      type: 'select',
-      options: [
-        {value: 'characters', label: 'Characters'},
-        {value: 'blocks', label: 'Blocks'}
-      ]
-    },
-    showOverlay: {
-      type: 'select',
-      options: [
-        {value: 'always', label: 'Always'},
-        {value: 'mouse-over', label: 'Mouse Over'}
-      ]
-    }
+const getConfigValue = (
+    config: Record<string, any> | undefined,
+    configKey: string,
+    defaultValue: any
+) => {
+  if (config && Object.prototype.hasOwnProperty.call(config, configKey)) {
+    return config[configKey];
   }
+  return defaultValue;
+
 };
 
-// 获取配置项类型
-const getConfigItemType = (extensionId: ExtensionID, configKey: string, defaultValue: any): string => {
-  const meta = extensionConfigMeta[extensionId]?.[configKey];
-  if (meta?.type) {
-    return meta.type;
+
+const formatConfigValue = (value: any): string => {
+  if (value === undefined) return '';
+  try {
+    const serialized = JSON.stringify(value);
+    return serialized ?? '';
+  } catch (error) {
+    console.warn('Failed to stringify config value', error);
+    return '';
   }
 
-  // 根据默认值类型自动推断
-  if (typeof defaultValue === 'boolean') return 'toggle';
-  if (typeof defaultValue === 'number') return 'number';
-  return 'text';
 };
 
-// 获取选择框的选项列表
-const getSelectOptions = (extensionId: ExtensionID, configKey: string): SelectOption[] => {
-  return extensionConfigMeta[extensionId]?.[configKey]?.options || [];
+
+const handleConfigInput = async (
+    extensionId: ExtensionID,
+    configKey: string,
+    defaultValue: any,
+    event: Event
+) => {
+  const target = event.target as HTMLInputElement | null;
+  if (!target) return;
+  const rawValue = target.value;
+  const trimmedValue = rawValue.trim();
+  if (!trimmedValue.length) {
+    await updateExtensionConfig(extensionId, configKey, undefined);
+    return;
+  }
+
+  try {
+    const parsedValue = JSON.parse(trimmedValue);
+    await updateExtensionConfig(extensionId, configKey, parsedValue);
+  } catch (_error) {
+    const extension = extensionStore.extensions.find(ext => ext.id === extensionId);
+    const fallbackValue = getConfigValue(extension?.config, configKey, defaultValue);
+    target.value = formatConfigValue(fallbackValue);
+
+  }
+
 };
+
 </script>
 
 <template>
@@ -204,58 +208,28 @@ const getSelectOptions = (extensionId: ExtensionID, configKey: string): SelectOp
             </button>
           </div>
 
-          <div
-              v-for="[configKey, configValue] in Object.entries(extension.defaultConfig)"
-              :key="configKey"
-              class="config-item"
-          >
-            <SettingItem
-                :title="configKey"
-            >
-              <!-- 布尔值切换开关 -->
-              <ToggleSwitch
-                  v-if="getConfigItemType(extension.id, configKey, configValue) === 'toggle'"
-                  :model-value="extension.config[configKey] ?? configValue"
-                  @update:model-value="updateExtensionConfig(extension.id, configKey, $event)"
-              />
-
-              <!-- 数字输入框 -->
-              <input
-                  v-else-if="getConfigItemType(extension.id, configKey, configValue) === 'number'"
-                  type="number"
-                  class="config-input"
-                  :value="extension.config[configKey] ?? configValue"
-                  :min="configKey === 'opacity' ? 0 : undefined"
-                  :max="configKey === 'opacity' ? 1 : undefined"
-                  :step="configKey === 'opacity' ? 0.1 : 1"
-                  @input="updateExtensionConfig(extension.id, configKey, parseFloat(($event.target as HTMLInputElement).value))"
-              />
-
-              <!-- 选择框 -->
-              <select
-                  v-else-if="getConfigItemType(extension.id, configKey, configValue) === 'select'"
-                  class="config-select"
-                  :value="extension.config[configKey] ?? configValue"
-                  @change="updateExtensionConfig(extension.id, configKey, ($event.target as HTMLSelectElement).value)"
+          <div class="config-table-wrapper">
+            <table class="config-table">
+              <tbody>
+              <tr
+                  v-for="[configKey, configValue] in Object.entries(extension.defaultConfig)"
+                  :key="configKey"
               >
-                <option
-                    v-for="option in getSelectOptions(extension.id, configKey)"
-                    :key="option.value"
-                    :value="option.value"
-                >
-                  {{ option.label }}
-                </option>
-              </select>
-
-              <!-- 文本输入框 -->
-              <input
-                  v-else
-                  type="text"
-                  class="config-input"
-                  :value="extension.config[configKey] ?? configValue"
-                  @input="updateExtensionConfig(extension.id, configKey, ($event.target as HTMLInputElement).value)"
-              />
-            </SettingItem>
+                <th scope="row" class="config-table-key">
+                  {{ configKey }}
+                </th>
+                <td class="config-table-value">
+                  <input
+                      class="config-value-input"
+                      type="text"
+                      :value="formatConfigValue(getConfigValue(extension.config, configKey, configValue))"
+                      @change="handleConfigInput(extension.id, configKey, configValue, $event)"
+                      @keyup.enter.prevent="handleConfigInput(extension.id, configKey, configValue, $event)"
+                  />
+                </td>
+              </tr>
+              </tbody>
+            </table>
           </div>
         </div>
       </div>
@@ -361,37 +335,65 @@ const getSelectOptions = (extensionId: ExtensionID, configKey: string): SelectOp
   }
 }
 
-.config-item {
-  &:not(:last-child) {
-    margin-bottom: 12px;
-  }
-
-  /* 配置项标题和描述字体大小 */
-  :deep(.setting-item-title) {
-    font-size: 12px;
-  }
-
-  :deep(.setting-item-description) {
-    font-size: 11px;
-  }
-}
-
-.config-input, .config-select {
-  min-width: 120px;
-  padding: 4px 8px;
+.config-table-wrapper {
   border: 1px solid var(--settings-input-border);
-  border-radius: 3px;
+  border-radius: 6px;
+  margin-top: 8px;
+  overflow: hidden;
+  background-color: var(--settings-panel, var(--settings-input-bg));
+}
+
+.config-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.config-table tr + tr {
+  border-top: 1px solid var(--settings-input-border);
+}
+
+.config-table th,
+.config-table td {
+  padding: 10px 12px;
+  vertical-align: middle;
+}
+
+.config-table-key {
+  width: 36%;
+  text-align: left;
+  font-weight: 600;
+  color: var(--settings-text-secondary);
+  border-right: 1px solid var(--settings-input-border);
   background-color: var(--settings-input-bg);
+}
+
+.config-table-value {
+  padding: 6px;
+}
+
+.config-value-input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
   color: var(--settings-text);
-  font-size: 11px;
-
-  &:focus {
-    outline: none;
-    border-color: var(--settings-accent);
-  }
+  font-size: 12px;
+  line-height: 1.4;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
 }
 
-.config-select {
-  cursor: pointer;
+.config-value-input:hover {
+  border-color: var(--settings-hover-border, var(--settings-input-border));
+  background-color: var(--settings-hover);
 }
-</style> 
+
+.config-value-input:focus {
+  outline: none;
+  border-color: var(--settings-accent);
+  background-color: var(--settings-input-bg);
+}
+</style> 
+

go.mod

@@ -77,7 +77,7 @@ require (
 	github.com/wailsapp/mimetype v1.4.1 // indirect
 	github.com/xanzy/go-gitlab v0.115.0 // indirect
 	github.com/xanzy/ssh-agent v0.3.3 // indirect
-	golang.org/x/crypto v0.44.0 // indirect
+	golang.org/x/crypto v0.45.0 // indirect
 	golang.org/x/exp v0.0.0-20251023183803-a4bb9ffd2546 // indirect
 	golang.org/x/image v0.33.0 // indirect
 	golang.org/x/oauth2 v0.33.0 // indirect

go.sum

@@ -176,8 +176,8 @@ golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACk
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20210513164829-c07d793c2f9a/go.mod h1:P+XmwS30IXTQdn5tA2iutPOUgjI07+tq3H3K9MVA1s8=
 golang.org/x/crypto v0.0.0-20220622213112-05595931fe9d/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
-golang.org/x/crypto v0.44.0 h1:A97SsFvM3AIwEEmTBiaxPPTYpDC47w720rdiiUvgoAU=
-golang.org/x/crypto v0.44.0/go.mod h1:013i+Nw79BMiQiMsOPcVCB5ZIJbYkerPrGnOa00tvmc=
+golang.org/x/crypto v0.45.0 h1:jMBrvKuj23MTlT0bQEOBcAE0mjg8mK9RXFhRH6nyF3Q=
+golang.org/x/crypto v0.45.0/go.mod h1:XTGrrkGJve7CYK7J8PEww4aY7gM3qMCElcJQ8n8JdX4=
 golang.org/x/exp v0.0.0-20251023183803-a4bb9ffd2546 h1:mgKeJMpvi0yx/sU5GsxQ7p6s2wtOnGAHZWCHUM4KGzY=
 golang.org/x/exp v0.0.0-20251023183803-a4bb9ffd2546/go.mod h1:j/pmGrbnkbPtQfxEe5D0VQhZC6qKbfKifgD0oM7sR70=
 golang.org/x/image v0.33.0 h1:LXRZRnv1+zGd5XBUVRFmYEphyyKJjQjCRiOuAP3sZfQ=

internal/common/helper/window_helper.go

@@ -1,4 +1,4 @@
-package services
+package helper
 
 import (
 	"strconv"

internal/models/theme.go

@@ -14,67 +14,21 @@ const (
 	ThemeTypeLight ThemeType = "light"
 )
 
-// ThemeColorConfig 主题颜色配置（与前端 ThemeColors 接口保持一致）
-type ThemeColorConfig struct {
-	// 主题基本信息
-	Name string `json:"name"` // 主题名称
-	Dark bool   `json:"dark"` // 是否为深色主题
-
-	// 基础色调
-	Background          string `json:"background"`          // 主背景色
-	BackgroundSecondary string `json:"backgroundSecondary"` // 次要背景色（用于代码块交替背景）
-	Surface             string `json:"surface"`             // 面板背景
-	DropdownBackground  string `json:"dropdownBackground"`  // 下拉菜单背景
-	DropdownBorder      string `json:"dropdownBorder"`      // 下拉菜单边框
-
-	// 文本颜色
-	Foreground          string `json:"foreground"`          // 主文本色
-	ForegroundSecondary string `json:"foregroundSecondary"` // 次要文本色
-	Comment             string `json:"comment"`             // 注释色
-
-	// 语法高亮色 - 核心
-	Keyword  string `json:"keyword"`  // 关键字
-	String   string `json:"string"`   // 字符串
-	Function string `json:"function"` // 函数名
-	Number   string `json:"number"`   // 数字
-	Operator string `json:"operator"` // 操作符
-	Variable string `json:"variable"` // 变量
-	Type     string `json:"type"`     // 类型
-
-	// 语法高亮色 - 扩展
-	Constant  string `json:"constant"`  // 常量
-	Storage   string `json:"storage"`   // 存储类型（如 static, const）
-	Parameter string `json:"parameter"` // 参数
-	Class     string `json:"class"`     // 类名
-	Heading   string `json:"heading"`   // 标题（Markdown等）
-	Invalid   string `json:"invalid"`   // 无效内容/错误
-	Regexp    string `json:"regexp"`    // 正则表达式
-
-	// 界面元素
-	Cursor           string `json:"cursor"`           // 光标
-	Selection        string `json:"selection"`        // 选中背景
-	SelectionBlur    string `json:"selectionBlur"`    // 失焦选中背景
-	ActiveLine       string `json:"activeLine"`       // 当前行高亮
-	LineNumber       string `json:"lineNumber"`       // 行号
-	ActiveLineNumber string `json:"activeLineNumber"` // 活动行号颜色
-
-	// 边框和分割线
-	BorderColor string `json:"borderColor"` // 边框色
-	BorderLight string `json:"borderLight"` // 浅色边框
-
-	// 搜索和匹配
-	SearchMatch     string `json:"searchMatch"`     // 搜索匹配
-	MatchingBracket string `json:"matchingBracket"` // 匹配括号
-}
+// ThemeColorConfig 使用与前端 ThemeColors 相同的结构，存储任意主题键值
+type ThemeColorConfig map[string]interface{}
 
 // Value 实现 driver.Valuer 接口，用于将 ThemeColorConfig 存储到数据库
 func (tc ThemeColorConfig) Value() (driver.Value, error) {
+	if tc == nil {
+		return json.Marshal(map[string]interface{}{})
+	}
 	return json.Marshal(tc)
 }
 
 // Scan 实现 sql.Scanner 接口，用于从数据库读取 ThemeColorConfig
 func (tc *ThemeColorConfig) Scan(value interface{}) error {
 	if value == nil {
+		*tc = ThemeColorConfig{}
 		return nil
 	}
 
@@ -88,7 +42,13 @@ func (tc *ThemeColorConfig) Scan(value interface{}) error {
 		return fmt.Errorf("cannot scan %T into ThemeColorConfig", value)
 	}
 
-	return json.Unmarshal(bytes, tc)
+	var data map[string]interface{}
+	if err := json.Unmarshal(bytes, &data); err != nil {
+		return err
+	}
+
+	*tc = data
+	return nil
 }
 
 // Theme 主题数据库模型
@@ -101,679 +61,3 @@ type Theme struct {
 	CreatedAt string           `db:"created_at" json:"createdAt"`
 	UpdatedAt string           `db:"updated_at" json:"updatedAt"`
 }
-
-// NewDefaultDarkTheme 创建默认深色主题配置（与前端 defaultDarkColors 完全一致）
-func NewDefaultDarkTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		// 主题信息
-		Name: "default-dark",
-		Dark: true,
-
-		// 基础色调
-		Background:          "#252B37",
-		BackgroundSecondary: "#213644",
-		Surface:             "#474747",
-		DropdownBackground:  "#252B37",
-		DropdownBorder:      "#ffffff19",
-
-		// 文本颜色
-		Foreground:          "#9BB586",
-		ForegroundSecondary: "#9c9c9c",
-		Comment:             "#6272a4",
-
-		// 语法高亮色 - 核心
-		Keyword:  "#ff79c6",
-		String:   "#f1fa8c",
-		Function: "#50fa7b",
-		Number:   "#bd93f9",
-		Operator: "#ff79c6",
-		Variable: "#8fbcbb",
-		Type:     "#8be9fd",
-
-		// 语法高亮色 - 扩展
-		Constant:  "#bd93f9",
-		Storage:   "#ff79c6",
-		Parameter: "#8fbcbb",
-		Class:     "#8be9fd",
-		Heading:   "#ff79c6",
-		Invalid:   "#d30102",
-		Regexp:    "#f1fa8c",
-
-		// 界面元素
-		Cursor:           "#ffffff",
-		Selection:        "#0865a9",
-		SelectionBlur:    "#225377",
-		ActiveLine:       "#ffffff0a",
-		LineNumber:       "#ffffff26",
-		ActiveLineNumber: "#ffffff99",
-
-		// 边框和分割线
-		BorderColor: "#1e222a",
-		BorderLight: "#ffffff19",
-
-		// 搜索和匹配
-		SearchMatch:     "#8fbcbb",
-		MatchingBracket: "#ffffff19",
-	}
-}
-
-// NewDefaultLightTheme 创建默认浅色主题配置（与前端 defaultLightColors 完全一致）
-func NewDefaultLightTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		// 主题信息
-		Name: "default-light",
-		Dark: false,
-
-		// 基础色调
-		Background:          "#ffffff",
-		BackgroundSecondary: "#f1faf1",
-		Surface:             "#f5f5f5",
-		DropdownBackground:  "#ffffff",
-		DropdownBorder:      "#e1e4e8",
-
-		// 文本颜色
-		Foreground:          "#444d56",
-		ForegroundSecondary: "#6a737d",
-		Comment:             "#6a737d",
-
-		// 语法高亮色 - 核心
-		Keyword:  "#d73a49",
-		String:   "#032f62",
-		Function: "#005cc5",
-		Number:   "#005cc5",
-		Operator: "#d73a49",
-		Variable: "#24292e",
-		Type:     "#6f42c1",
-
-		// 语法高亮色 - 扩展
-		Constant:  "#005cc5",
-		Storage:   "#d73a49",
-		Parameter: "#24292e",
-		Class:     "#6f42c1",
-		Heading:   "#d73a49",
-		Invalid:   "#cb2431",
-		Regexp:    "#032f62",
-
-		// 界面元素
-		Cursor:           "#000000",
-		Selection:        "#77baff",
-		SelectionBlur:    "#b2c2ca",
-		ActiveLine:       "#0000000a",
-		LineNumber:       "#00000040",
-		ActiveLineNumber: "#000000aa",
-
-		// 边框和分割线
-		BorderColor: "#dfdfdf",
-		BorderLight: "#0000000c",
-
-		// 搜索和匹配
-		SearchMatch:     "#005cc5",
-		MatchingBracket: "#00000019",
-	}
-}
-
-// NewDraculaTheme 创建 Dracula 深色主题配置
-func NewDraculaTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "dracula",
-		Dark: true,
-
-		Background:          "#282A36",
-		BackgroundSecondary: "#323543FF",
-		Surface:             "#282A36",
-		DropdownBackground:  "#282A36",
-		DropdownBorder:      "#191A21",
-
-		Foreground:          "#F8F8F2",
-		ForegroundSecondary: "#F8F8F2",
-		Comment:             "#6272A4",
-
-		Keyword:  "#FF79C6",
-		String:   "#F1FA8C",
-		Function: "#50FA7B",
-		Number:   "#BD93F9",
-		Operator: "#FF79C6",
-		Variable: "#F8F8F2",
-		Type:     "#8BE9FD",
-
-		Constant:  "#BD93F9",
-		Storage:   "#FF79C6",
-		Parameter: "#F8F8F2",
-		Class:     "#8BE9FD",
-		Heading:   "#BD93F9",
-		Invalid:   "#FF5555",
-		Regexp:    "#F1FA8C",
-
-		Cursor:           "#F8F8F2",
-		Selection:        "#44475A",
-		SelectionBlur:    "#44475A",
-		ActiveLine:       "#53576c22",
-		LineNumber:       "#6272A4",
-		ActiveLineNumber: "#F8F8F2",
-
-		BorderColor: "#191A21",
-		BorderLight: "#F8F8F219",
-
-		SearchMatch:     "#50FA7B",
-		MatchingBracket: "#44475A",
-	}
-}
-
-// NewAuraTheme 创建 Aura 深色主题配置
-func NewAuraTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "aura",
-		Dark: true,
-
-		Background:          "#21202e",
-		BackgroundSecondary: "#2B2A3BFF",
-		Surface:             "#21202e",
-		DropdownBackground:  "#21202e",
-		DropdownBorder:      "#3b334b",
-
-		Foreground:          "#edecee",
-		ForegroundSecondary: "#edecee",
-		Comment:             "#6d6d6d",
-
-		Keyword:  "#a277ff",
-		String:   "#61ffca",
-		Function: "#ffca85",
-		Number:   "#61ffca",
-		Operator: "#a277ff",
-		Variable: "#edecee",
-		Type:     "#82e2ff",
-
-		Constant:  "#61ffca",
-		Storage:   "#a277ff",
-		Parameter: "#edecee",
-		Class:     "#82e2ff",
-		Heading:   "#a277ff",
-		Invalid:   "#ff6767",
-		Regexp:    "#61ffca",
-
-		Cursor:           "#a277ff",
-		Selection:        "#3d375e7f",
-		SelectionBlur:    "#3d375e7f",
-		ActiveLine:       "#4d4b6622",
-		LineNumber:       "#a394f033",
-		ActiveLineNumber: "#cdccce",
-
-		BorderColor: "#3b334b",
-		BorderLight: "#edecee19",
-
-		SearchMatch:     "#61ffca",
-		MatchingBracket: "#a394f033",
-	}
-}
-
-// NewGitHubDarkTheme 创建 GitHub Dark 主题配置
-func NewGitHubDarkTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "github-dark",
-		Dark: true,
-
-		Background:          "#24292e",
-		BackgroundSecondary: "#2E343BFF",
-		Surface:             "#24292e",
-		DropdownBackground:  "#24292e",
-		DropdownBorder:      "#1b1f23",
-
-		Foreground:          "#d1d5da",
-		ForegroundSecondary: "#d1d5da",
-		Comment:             "#6a737d",
-
-		Keyword:  "#f97583",
-		String:   "#9ecbff",
-		Function: "#79b8ff",
-		Number:   "#79b8ff",
-		Operator: "#f97583",
-		Variable: "#ffab70",
-		Type:     "#79b8ff",
-
-		Constant:  "#79b8ff",
-		Storage:   "#f97583",
-		Parameter: "#e1e4e8",
-		Class:     "#b392f0",
-		Heading:   "#79b8ff",
-		Invalid:   "#f97583",
-		Regexp:    "#9ecbff",
-
-		Cursor:           "#c8e1ff",
-		Selection:        "#3392FF44",
-		SelectionBlur:    "#3392FF44",
-		ActiveLine:       "#4d566022",
-		LineNumber:       "#444d56",
-		ActiveLineNumber: "#e1e4e8",
-
-		BorderColor: "#1b1f23",
-		BorderLight: "#d1d5da19",
-
-		SearchMatch:     "#79b8ff",
-		MatchingBracket: "#17E5E650",
-	}
-}
-
-// NewMaterialDarkTheme 创建 Material Dark 主题配置
-func NewMaterialDarkTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "material-dark",
-		Dark: true,
-
-		Background:          "#263238",
-		BackgroundSecondary: "#2D3E46FF",
-		Surface:             "#263238",
-		DropdownBackground:  "#263238",
-		DropdownBorder:      "#FFFFFF10",
-
-		Foreground:          "#EEFFFF",
-		ForegroundSecondary: "#EEFFFF",
-		Comment:             "#546E7A",
-
-		Keyword:  "#C792EA",
-		String:   "#C3E88D",
-		Function: "#82AAFF",
-		Number:   "#F78C6C",
-		Operator: "#C792EA",
-		Variable: "#EEFFFF",
-		Type:     "#B2CCD6",
-
-		Constant:  "#F78C6C",
-		Storage:   "#C792EA",
-		Parameter: "#EEFFFF",
-		Class:     "#FFCB6B",
-		Heading:   "#C3E88D",
-		Invalid:   "#FF5370",
-		Regexp:    "#89DDFF",
-
-		Cursor:           "#FFCC00",
-		Selection:        "#80CBC420",
-		SelectionBlur:    "#80CBC420",
-		ActiveLine:       "#4c616c22",
-		LineNumber:       "#37474F",
-		ActiveLineNumber: "#607a86",
-
-		BorderColor: "#FFFFFF10",
-		BorderLight: "#EEFFFF19",
-
-		SearchMatch:     "#82AAFF",
-		MatchingBracket: "#263238",
-	}
-}
-
-// NewOneDarkTheme 创建 One Dark 主题配置
-func NewOneDarkTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "one-dark",
-		Dark: true,
-
-		Background:          "#282c34",
-		BackgroundSecondary: "#313949FF",
-		Surface:             "#353a42",
-		DropdownBackground:  "#21252b",
-		DropdownBorder:      "#7d8799",
-
-		Foreground:          "#abb2bf",
-		ForegroundSecondary: "#7d8799",
-		Comment:             "#7d8799",
-
-		Keyword:  "#c678dd",
-		String:   "#98c379",
-		Function: "#61afef",
-		Number:   "#e5c07b",
-		Operator: "#56b6c2",
-		Variable: "#e06c75",
-		Type:     "#e5c07b",
-
-		Constant:  "#d19a66",
-		Storage:   "#c678dd",
-		Parameter: "#e06c75",
-		Class:     "#e5c07b",
-		Heading:   "#e06c75",
-		Invalid:   "#ffffff",
-		Regexp:    "#56b6c2",
-
-		Cursor:           "#528bff",
-		Selection:        "#3E4451",
-		SelectionBlur:    "#3E4451",
-		ActiveLine:       "#6699ff0b",
-		LineNumber:       "#7d8799",
-		ActiveLineNumber: "#abb2bf",
-
-		BorderColor: "#21252b",
-		BorderLight: "#abb2bf19",
-
-		SearchMatch:     "#61afef",
-		MatchingBracket: "#bad0f847",
-	}
-}
-
-// NewSolarizedDarkTheme 创建 Solarized Dark 主题配置
-func NewSolarizedDarkTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "solarized-dark",
-		Dark: true,
-
-		Background:          "#002B36",
-		BackgroundSecondary: "#003643FF",
-		Surface:             "#002B36",
-		DropdownBackground:  "#002B36",
-		DropdownBorder:      "#2AA19899",
-
-		Foreground:          "#93A1A1",
-		ForegroundSecondary: "#93A1A1",
-		Comment:             "#586E75",
-
-		Keyword:  "#859900",
-		String:   "#2AA198",
-		Function: "#268BD2",
-		Number:   "#D33682",
-		Operator: "#859900",
-		Variable: "#268BD2",
-		Type:     "#CB4B16",
-
-		Constant:  "#CB4B16",
-		Storage:   "#93A1A1",
-		Parameter: "#268BD2",
-		Class:     "#CB4B16",
-		Heading:   "#268BD2",
-		Invalid:   "#DC322F",
-		Regexp:    "#DC322F",
-
-		Cursor:           "#D30102",
-		Selection:        "#274642",
-		SelectionBlur:    "#274642",
-		ActiveLine:       "#005b7022",
-		LineNumber:       "#93A1A1",
-		ActiveLineNumber: "#949494",
-
-		BorderColor: "#073642",
-		BorderLight: "#93A1A119",
-
-		SearchMatch:     "#2AA198",
-		MatchingBracket: "#073642",
-	}
-}
-
-// NewTokyoNightTheme 创建 Tokyo Night 主题配置
-func NewTokyoNightTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "tokyo-night",
-		Dark: true,
-
-		Background:          "#1a1b26",
-		BackgroundSecondary: "#272839FF",
-		Surface:             "#1a1b26",
-		DropdownBackground:  "#1a1b26",
-		DropdownBorder:      "#787c99",
-
-		Foreground:          "#787c99",
-		ForegroundSecondary: "#787c99",
-		Comment:             "#444b6a",
-
-		Keyword:  "#bb9af7",
-		String:   "#9ece6a",
-		Function: "#7aa2f7",
-		Number:   "#ff9e64",
-		Operator: "#bb9af7",
-		Variable: "#c0caf5",
-		Type:     "#0db9d7",
-
-		Constant:  "#bb9af7",
-		Storage:   "#bb9af7",
-		Parameter: "#c0caf5",
-		Class:     "#c0caf5",
-		Heading:   "#89ddff",
-		Invalid:   "#ff5370",
-		Regexp:    "#b4f9f8",
-
-		Cursor:           "#c0caf5",
-		Selection:        "#515c7e40",
-		SelectionBlur:    "#515c7e40",
-		ActiveLine:       "#43455c22",
-		LineNumber:       "#363b54",
-		ActiveLineNumber: "#737aa2",
-
-		BorderColor: "#16161e",
-		BorderLight: "#787c9919",
-
-		SearchMatch:     "#7aa2f7",
-		MatchingBracket: "#16161e",
-	}
-}
-
-// NewTokyoNightStormTheme 创建 Tokyo Night Storm 主题配置
-func NewTokyoNightStormTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "tokyo-night-storm",
-		Dark: true,
-
-		Background:          "#24283b",
-		BackgroundSecondary: "#2B3151FF",
-		Surface:             "#24283b",
-		DropdownBackground:  "#24283b",
-		DropdownBorder:      "#7982a9",
-
-		Foreground:          "#7982a9",
-		ForegroundSecondary: "#7982a9",
-		Comment:             "#565f89",
-
-		Keyword:  "#bb9af7",
-		String:   "#9ece6a",
-		Function: "#7aa2f7",
-		Number:   "#ff9e64",
-		Operator: "#bb9af7",
-		Variable: "#c0caf5",
-		Type:     "#2ac3de",
-
-		Constant:  "#bb9af7",
-		Storage:   "#bb9af7",
-		Parameter: "#c0caf5",
-		Class:     "#c0caf5",
-		Heading:   "#89ddff",
-		Invalid:   "#ff5370",
-		Regexp:    "#b4f9f8",
-
-		Cursor:           "#c0caf5",
-		Selection:        "#6f7bb630",
-		SelectionBlur:    "#6f7bb630",
-		ActiveLine:       "#4d547722",
-		LineNumber:       "#3b4261",
-		ActiveLineNumber: "#737aa2",
-
-		BorderColor: "#1f2335",
-		BorderLight: "#7982a919",
-
-		SearchMatch:     "#7aa2f7",
-		MatchingBracket: "#1f2335",
-	}
-}
-
-// 浅色主题预设配置
-
-// NewGitHubLightTheme 创建 GitHub Light 主题配置
-func NewGitHubLightTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "github-light",
-		Dark: false,
-
-		Background:          "#fff",
-		BackgroundSecondary: "#f1faf1",
-		Surface:             "#fff",
-		DropdownBackground:  "#fff",
-		DropdownBorder:      "#e1e4e8",
-
-		Foreground:          "#444d56",
-		ForegroundSecondary: "#444d56",
-		Comment:             "#6a737d",
-
-		Keyword:  "#d73a49",
-		String:   "#032f62",
-		Function: "#005cc5",
-		Number:   "#005cc5",
-		Operator: "#d73a49",
-		Variable: "#e36209",
-		Type:     "#005cc5",
-
-		Constant:  "#005cc5",
-		Storage:   "#d73a49",
-		Parameter: "#24292e",
-		Class:     "#6f42c1",
-		Heading:   "#005cc5",
-		Invalid:   "#cb2431",
-		Regexp:    "#032f62",
-
-		Cursor:           "#044289",
-		Selection:        "#0366d625",
-		SelectionBlur:    "#0366d625",
-		ActiveLine:       "#c6c6c622",
-		LineNumber:       "#1b1f234d",
-		ActiveLineNumber: "#24292e",
-
-		BorderColor: "#e1e4e8",
-		BorderLight: "#444d5619",
-
-		SearchMatch:     "#005cc5",
-		MatchingBracket: "#34d05840",
-	}
-}
-
-// NewMaterialLightTheme 创建 Material Light 主题配置
-func NewMaterialLightTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "material-light",
-		Dark: false,
-
-		Background:          "#FAFAFA",
-		BackgroundSecondary: "#f1faf1",
-		Surface:             "#FAFAFA",
-		DropdownBackground:  "#FAFAFA",
-		DropdownBorder:      "#00000010",
-
-		Foreground:          "#90A4AE",
-		ForegroundSecondary: "#90A4AE",
-		Comment:             "#90A4AE",
-
-		Keyword:  "#7C4DFF",
-		String:   "#91B859",
-		Function: "#6182B8",
-		Number:   "#F76D47",
-		Operator: "#7C4DFF",
-		Variable: "#90A4AE",
-		Type:     "#8796B0",
-
-		Constant:  "#F76D47",
-		Storage:   "#7C4DFF",
-		Parameter: "#90A4AE",
-		Class:     "#FFB62C",
-		Heading:   "#91B859",
-		Invalid:   "#E53935",
-		Regexp:    "#39ADB5",
-
-		Cursor:           "#272727",
-		Selection:        "#80CBC440",
-		SelectionBlur:    "#80CBC440",
-		ActiveLine:       "#c2c2c222",
-		LineNumber:       "#CFD8DC",
-		ActiveLineNumber: "#7E939E",
-
-		BorderColor: "#00000010",
-		BorderLight: "#90A4AE19",
-
-		SearchMatch:     "#6182B8",
-		MatchingBracket: "#FAFAFA",
-	}
-}
-
-// NewSolarizedLightTheme 创建 Solarized Light 主题配置
-func NewSolarizedLightTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "solarized-light",
-		Dark: false,
-
-		Background:          "#FDF6E3",
-		BackgroundSecondary: "#FFEEBCD4",
-		Surface:             "#FDF6E3",
-		DropdownBackground:  "#FDF6E3",
-		DropdownBorder:      "#D3AF86",
-
-		Foreground:          "#586E75",
-		ForegroundSecondary: "#586E75",
-		Comment:             "#93A1A1",
-
-		Keyword:  "#859900",
-		String:   "#2AA198",
-		Function: "#268BD2",
-		Number:   "#D33682",
-		Operator: "#859900",
-		Variable: "#268BD2",
-		Type:     "#CB4B16",
-
-		Constant:  "#CB4B16",
-		Storage:   "#586E75",
-		Parameter: "#268BD2",
-		Class:     "#CB4B16",
-		Heading:   "#268BD2",
-		Invalid:   "#DC322F",
-		Regexp:    "#DC322F",
-
-		Cursor:           "#657B83",
-		Selection:        "#EEE8D5",
-		SelectionBlur:    "#EEE8D5",
-		ActiveLine:       "#d5bd5c22",
-		LineNumber:       "#586E75",
-		ActiveLineNumber: "#567983",
-
-		BorderColor: "#EEE8D5",
-		BorderLight: "#586E7519",
-
-		SearchMatch:     "#268BD2",
-		MatchingBracket: "#EEE8D5",
-	}
-}
-
-// NewTokyoNightDayTheme 创建 Tokyo Night Day 主题配置
-func NewTokyoNightDayTheme() *ThemeColorConfig {
-	return &ThemeColorConfig{
-		Name: "tokyo-night-day",
-		Dark: false,
-
-		Background:          "#e1e2e7",
-		BackgroundSecondary: "#D2D8EFFF",
-		Surface:             "#e1e2e7",
-		DropdownBackground:  "#e1e2e7",
-		DropdownBorder:      "#6a6f8e",
-
-		Foreground:          "#6a6f8e",
-		ForegroundSecondary: "#6a6f8e",
-		Comment:             "#9da3c2",
-
-		Keyword:  "#9854f1",
-		String:   "#587539",
-		Function: "#2e7de9",
-		Number:   "#b15c00",
-		Operator: "#9854f1",
-		Variable: "#3760bf",
-		Type:     "#07879d",
-
-		Constant:  "#9854f1",
-		Storage:   "#9854f1",
-		Parameter: "#3760bf",
-		Class:     "#3760bf",
-		Heading:   "#006a83",
-		Invalid:   "#ff3e64",
-		Regexp:    "#2e5857",
-
-		Cursor:           "#3760bf",
-		Selection:        "#8591b840",
-		SelectionBlur:    "#8591b840",
-		ActiveLine:       "#a7aaba22",
-		LineNumber:       "#b3b6cd",
-		ActiveLineNumber: "#68709a",
-
-		BorderColor: "#e9e9ec",
-		BorderLight: "#6a6f8e19",
-
-		SearchMatch:     "#2e7de9",
-		MatchingBracket: "#e9e9ec",
-	}
-}

internal/services/dialog_service.go

@@ -3,12 +3,13 @@ package services
 import (
 	"github.com/wailsapp/wails/v3/pkg/application"
 	"github.com/wailsapp/wails/v3/pkg/services/log"
+	"voidraft/internal/common/helper"
 )
 
 // DialogService 对话框服务，处理文件选择等对话框操作
 type DialogService struct {
 	logger       *log.LogService
-	windowHelper *WindowHelper
+	windowHelper *helper.WindowHelper
 }
 
 // NewDialogService 创建新的对话框服务实例
@@ -19,7 +20,7 @@ func NewDialogService(logger *log.LogService) *DialogService {
 
 	return &DialogService{
 		logger:       logger,
-		windowHelper: NewWindowHelper(),
+		windowHelper: helper.NewWindowHelper(),
 	}
 }
 

internal/services/hotkey_service.go

@@ -7,6 +7,7 @@ import (
 	"sync"
 	"sync/atomic"
 	"time"
+	"voidraft/internal/common/helper"
 	"voidraft/internal/common/hotkey"
 	"voidraft/internal/models"
 
@@ -18,7 +19,7 @@ import (
 type HotkeyService struct {
 	logger        *log.LogService
 	configService *ConfigService
-	windowHelper  *WindowHelper
+	windowHelper  *helper.WindowHelper
 
 	mu            sync.RWMutex
 	currentHotkey *models.HotkeyCombo
@@ -45,7 +46,7 @@ func NewHotkeyService(configService *ConfigService, logger *log.LogService) *Hot
 	return &HotkeyService{
 		logger:        logger,
 		configService: configService,
-		windowHelper:  NewWindowHelper(),
+		windowHelper:  helper.NewWindowHelper(),
 		ctx:           ctx,
 		cancel:        cancel,
 	}

internal/services/theme_service.go

@@ -5,6 +5,7 @@ import (
 	"database/sql"
 	"errors"
 	"fmt"
+	"strings"
 	"time"
 	"voidraft/internal/models"
 
@@ -31,12 +32,10 @@ func NewThemeService(databaseService *DatabaseService, logger *log.LogService) *
 	}
 }
 
-// ServiceStartup 服务启动时初始化
+// ServiceStartup 服务启动
 func (ts *ThemeService) ServiceStartup(ctx context.Context, options application.ServiceOptions) error {
 	ts.ctx = ctx
-
-	// 初始化默认主题
-	return ts.initializeDefaultThemes()
+	return nil
 }
 
 // getDB 获取数据库连接
@@ -44,141 +43,27 @@ func (ts *ThemeService) getDB() *sql.DB {
 	return ts.databaseService.db
 }
 
-// initializeDefaultThemes 初始化所有预设主题
-func (ts *ThemeService) initializeDefaultThemes() error {
+// GetThemeByName 通过名称获取主题覆盖，若不存在则返回 nil
+func (ts *ThemeService) GetThemeByName(name string) (*models.Theme, error) {
 	db := ts.getDB()
 	if db == nil {
-		return fmt.Errorf("database not available")
+		return nil, fmt.Errorf("database not available")
 	}
 
-	// 获取所有已存在的主题名称
-	existingThemes := make(map[string]bool)
-	rows, err := db.Query("SELECT name FROM themes")
-	if err != nil {
-		return fmt.Errorf("failed to query existing themes: %w", err)
-	}
-	defer rows.Close()
-
-	for rows.Next() {
-		var name string
-		if err := rows.Scan(&name); err != nil {
-			return fmt.Errorf("failed to scan theme name: %w", err)
-		}
-		existingThemes[name] = true
+	trimmed := strings.TrimSpace(name)
+	if trimmed == "" {
+		return nil, fmt.Errorf("theme name cannot be empty")
 	}
 
-	// 定义所有预设主题配置
-	now := time.Now().Format("2006-01-02 15:04:05")
-	presetThemes := []struct {
-		config    *models.ThemeColorConfig
-		themeType models.ThemeType
-		isDefault bool
-	}{
-		// 默认主题
-		{models.NewDefaultDarkTheme(), models.ThemeTypeDark, true},
-		{models.NewDefaultLightTheme(), models.ThemeTypeLight, true},
-
-		// 深色主题预设
-		{models.NewDraculaTheme(), models.ThemeTypeDark, false},
-		{models.NewAuraTheme(), models.ThemeTypeDark, false},
-		{models.NewGitHubDarkTheme(), models.ThemeTypeDark, false},
-		{models.NewMaterialDarkTheme(), models.ThemeTypeDark, false},
-		{models.NewOneDarkTheme(), models.ThemeTypeDark, false},
-		{models.NewSolarizedDarkTheme(), models.ThemeTypeDark, false},
-		{models.NewTokyoNightTheme(), models.ThemeTypeDark, false},
-		{models.NewTokyoNightStormTheme(), models.ThemeTypeDark, false},
-
-		// 浅色主题预设
-		{models.NewGitHubLightTheme(), models.ThemeTypeLight, false},
-		{models.NewMaterialLightTheme(), models.ThemeTypeLight, false},
-		{models.NewSolarizedLightTheme(), models.ThemeTypeLight, false},
-		{models.NewTokyoNightDayTheme(), models.ThemeTypeLight, false},
-	}
-
-	// 筛选出需要创建的主题
-	var themesToCreate []*models.Theme
-	for _, preset := range presetThemes {
-		if !existingThemes[preset.config.Name] {
-			themesToCreate = append(themesToCreate, &models.Theme{
-				Name:      preset.config.Name,
-				Type:      preset.themeType,
-				Colors:    *preset.config,
-				IsDefault: preset.isDefault,
-				CreatedAt: now,
-				UpdatedAt: now,
-			})
-		}
-	}
-
-	if len(themesToCreate) == 0 {
-		return nil
-	}
-
-	// 批量插入主题
-	tx, err := db.Begin()
-	if err != nil {
-		return fmt.Errorf("failed to begin transaction: %w", err)
-	}
-	defer tx.Rollback()
-
-	stmt, err := tx.Prepare(`
-		INSERT INTO themes (name, type, colors, is_default, created_at, updated_at)
-		VALUES (?, ?, ?, ?, ?, ?)
-	`)
-	if err != nil {
-		return fmt.Errorf("failed to prepare statement: %w", err)
-	}
-	defer stmt.Close()
-
-	for _, theme := range themesToCreate {
-		_, err := stmt.Exec(
-			theme.Name,
-			theme.Type,
-			theme.Colors,
-			theme.IsDefault,
-			theme.CreatedAt,
-			theme.UpdatedAt,
-		)
-		if err != nil {
-			return fmt.Errorf("failed to insert theme %s: %w", theme.Name, err)
-		}
-	}
-
-	if err := tx.Commit(); err != nil {
-		return fmt.Errorf("failed to commit transaction: %w", err)
-	}
-	return nil
-}
-
-// GetThemeByID 根据ID或名称获取主题
-// 如果 id > 0，按ID查询；如果 id = 0，按名称查询
-func (ts *ThemeService) GetThemeByIdOrName(id int, name ...string) (*models.Theme, error) {
-	var query string
-	var args []interface{}
-
-	if id > 0 {
-		query = `
-			SELECT id, name, type, colors, is_default, created_at, updated_at 
-			FROM themes 
-			WHERE id = ?
-			LIMIT 1
-		`
-		args = []interface{}{id}
-	} else if len(name) > 0 && name[0] != "" {
-		query = `
-			SELECT id, name, type, colors, is_default, created_at, updated_at 
-			FROM themes 
-			WHERE name = ?
-			LIMIT 1
-		`
-		args = []interface{}{name[0]}
-	} else {
-		return nil, fmt.Errorf("either id or name must be provided")
-	}
+	query := `
+		SELECT id, name, type, colors, is_default, created_at, updated_at 
+		FROM themes 
+		WHERE name = ?
+		LIMIT 1
+	`
 
 	theme := &models.Theme{}
-	db := ts.getDB()
-	err := db.QueryRow(query, args...).Scan(
+	err := db.QueryRow(query, trimmed).Scan(
 		&theme.ID,
 		&theme.Name,
 		&theme.Type,
@@ -190,133 +75,89 @@ func (ts *ThemeService) GetThemeByIdOrName(id int, name ...string) (*models.Them
 
 	if err != nil {
 		if errors.Is(err, sql.ErrNoRows) {
-			if id > 0 {
-				return nil, fmt.Errorf("theme not found with id: %d", id)
-			}
-			return nil, fmt.Errorf("theme not found with name: %s", name[0])
+			return nil, nil
 		}
-		return nil, fmt.Errorf("failed to get theme: %w", err)
+		return nil, fmt.Errorf("failed to query theme: %w", err)
 	}
 
 	return theme, nil
 }
 
-// UpdateTheme 更新主题
-func (ts *ThemeService) UpdateTheme(id int, colors models.ThemeColorConfig) error {
-	query := `
-		UPDATE themes 
-		SET colors = ?, updated_at = ?
-		WHERE id = ?
-	`
-
+// UpdateTheme 保存或更新主题覆盖
+func (ts *ThemeService) UpdateTheme(name string, colors models.ThemeColorConfig) error {
 	db := ts.getDB()
-	result, err := db.Exec(query, colors, time.Now().Format("2006-01-02 15:04:05"), id)
+	if db == nil {
+		return fmt.Errorf("database not available")
+	}
+
+	trimmed := strings.TrimSpace(name)
+	if trimmed == "" {
+		return fmt.Errorf("theme name cannot be empty")
+	}
+
+	if colors == nil {
+		colors = models.ThemeColorConfig{}
+	}
+	colors["themeName"] = trimmed
+
+	themeType := models.ThemeTypeDark
+	if raw, ok := colors["dark"].(bool); ok && !raw {
+		themeType = models.ThemeTypeLight
+	}
+
+	now := time.Now().Format("2006-01-02 15:04:05")
+
+	existing, err := ts.GetThemeByName(trimmed)
+	if err != nil {
+		return err
+	}
+
+	if existing == nil {
+		_, err = db.Exec(
+			`INSERT INTO themes (name, type, colors, is_default, created_at, updated_at) VALUES (?, ?, ?, 0, ?, ?)`,
+			trimmed,
+			themeType,
+			colors,
+			now,
+			now,
+		)
+		if err != nil {
+			return fmt.Errorf("failed to insert theme: %w", err)
+		}
+		return nil
+	}
+
+	_, err = db.Exec(
+		`UPDATE themes SET type = ?, colors = ?, updated_at = ? WHERE name = ?`,
+		themeType,
+		colors,
+		now,
+		trimmed,
+	)
 	if err != nil {
 		return fmt.Errorf("failed to update theme: %w", err)
 	}
 
-	rowsAffected, err := result.RowsAffected()
-	if err != nil {
-		return fmt.Errorf("failed to get rows affected: %w", err)
-	}
-
-	if rowsAffected == 0 {
-		return fmt.Errorf("theme not found with id: %d", id)
-	}
-
 	return nil
 }
 
-// ResetTheme 重置主题为预设配置
-func (ts *ThemeService) ResetTheme(id int, name ...string) error {
-	// 先获取主题信息
-	theme, err := ts.GetThemeByIdOrName(id, name...)
-	if err != nil {
-		return err
-	}
-
-	// 根据主题名称获取预设配置
-	var presetConfig *models.ThemeColorConfig
-	switch theme.Name {
-	// 默认主题
-	case "default-dark":
-		presetConfig = models.NewDefaultDarkTheme()
-	case "default-light":
-		presetConfig = models.NewDefaultLightTheme()
-
-	// 深色主题预设
-	case "dracula":
-		presetConfig = models.NewDraculaTheme()
-	case "aura":
-		presetConfig = models.NewAuraTheme()
-	case "github-dark":
-		presetConfig = models.NewGitHubDarkTheme()
-	case "material-dark":
-		presetConfig = models.NewMaterialDarkTheme()
-	case "one-dark":
-		presetConfig = models.NewOneDarkTheme()
-	case "solarized-dark":
-		presetConfig = models.NewSolarizedDarkTheme()
-	case "tokyo-night":
-		presetConfig = models.NewTokyoNightTheme()
-	case "tokyo-night-storm":
-		presetConfig = models.NewTokyoNightStormTheme()
-
-	// 浅色主题预设
-	case "github-light":
-		presetConfig = models.NewGitHubLightTheme()
-	case "material-light":
-		presetConfig = models.NewMaterialLightTheme()
-	case "solarized-light":
-		presetConfig = models.NewSolarizedLightTheme()
-	case "tokyo-night-day":
-		presetConfig = models.NewTokyoNightDayTheme()
-
-	default:
-		return fmt.Errorf("no preset configuration found for theme: %s", theme.Name)
-	}
-
-	return ts.UpdateTheme(id, *presetConfig)
-}
-
-// GetAllThemes 获取所有主题
-func (ts *ThemeService) GetAllThemes() ([]*models.Theme, error) {
-	query := `
-		SELECT id, name, type, colors, is_default, created_at, updated_at 
-		FROM themes 
-		ORDER BY is_default DESC, type DESC, name ASC
-	`
-
+// ResetTheme 删除指定主题的覆盖配置
+func (ts *ThemeService) ResetTheme(name string) error {
 	db := ts.getDB()
-	rows, err := db.Query(query)
-	if err != nil {
-		return nil, fmt.Errorf("failed to query themes: %w", err)
-	}
-	defer rows.Close()
-
-	var themes []*models.Theme
-	for rows.Next() {
-		theme := &models.Theme{}
-		err := rows.Scan(
-			&theme.ID,
-			&theme.Name,
-			&theme.Type,
-			&theme.Colors,
-			&theme.IsDefault,
-			&theme.CreatedAt,
-			&theme.UpdatedAt,
-		)
-		if err != nil {
-			return nil, fmt.Errorf("failed to scan theme: %w", err)
-		}
-		themes = append(themes, theme)
+	if db == nil {
+		return fmt.Errorf("database not available")
 	}
 
-	if err := rows.Err(); err != nil {
-		return nil, fmt.Errorf("failed to iterate themes: %w", err)
+	trimmed := strings.TrimSpace(name)
+	if trimmed == "" {
+		return fmt.Errorf("theme name cannot be empty")
 	}
 
-	return themes, nil
+	if _, err := db.Exec(`DELETE FROM themes WHERE name = ?`, trimmed); err != nil {
+		return fmt.Errorf("failed to reset theme: %w", err)
+	}
+
+	return nil
 }
 
 // ServiceShutdown 服务关闭

internal/services/tray_service.go

@@ -3,13 +3,14 @@ package services
 import (
 	"github.com/wailsapp/wails/v3/pkg/application"
 	"github.com/wailsapp/wails/v3/pkg/services/log"
+	"voidraft/internal/common/helper"
 )
 
 // TrayService 系统托盘服务
 type TrayService struct {
 	logger        *log.LogService
 	configService *ConfigService
-	windowHelper  *WindowHelper
+	windowHelper  *helper.WindowHelper
 }
 
 // NewTrayService 创建新的系统托盘服务实例
@@ -17,7 +18,7 @@ func NewTrayService(logger *log.LogService, configService *ConfigService) *TrayS
 	return &TrayService{
 		logger:        logger,
 		configService: configService,
-		windowHelper:  NewWindowHelper(),
+		windowHelper:  helper.NewWindowHelper(),
 	}
 }
 

internal/services/window_snap_service.go

@@ -4,6 +4,7 @@ import (
 	"math"
 	"sync"
 	"time"
+	"voidraft/internal/common/helper"
 	"voidraft/internal/models"
 
 	"github.com/wailsapp/wails/v3/pkg/application"
@@ -25,7 +26,7 @@ const (
 type WindowSnapService struct {
 	logger        *log.LogService
 	configService *ConfigService
-	windowHelper  *WindowHelper
+	windowHelper  *helper.WindowHelper
 	mu            sync.RWMutex
 
 	// 吸附配置
@@ -75,7 +76,7 @@ func NewWindowSnapService(logger *log.LogService, configService *ConfigService)
 	wss := &WindowSnapService{
 		logger:             logger,
 		configService:      configService,
-		windowHelper:       NewWindowHelper(),
+		windowHelper:       helper.NewWindowHelper(),
 		snapEnabled:        snapEnabled,
 		baseThresholdRatio: 0.025, // 2.5%的主窗口宽度作为基础阈值
 		minThreshold:       8,     // 最小8像素（小屏幕保底）

internal/services/window_snap_service_test.go

@@ -4,6 +4,7 @@ import (
 	"sync"
 	"testing"
 	"time"
+	"voidraft/internal/common/helper"
 	"voidraft/internal/models"
 
 	"github.com/wailsapp/wails/v3/pkg/application"
@@ -42,7 +43,7 @@ func createTestService() *WindowSnapService {
 	service := &WindowSnapService{
 		logger:             logger,
 		configService:      nil, // 测试中不需要实际的配置服务
-		windowHelper:       NewWindowHelper(),
+		windowHelper:       helper.NewWindowHelper(),
 		snapEnabled:        true,
 		baseThresholdRatio: 0.025,
 		minThreshold:       8,