💄 Updated extended management interface style and keybinding management interface style

♻️ Refactor cursor position cache

.github/workflows/build-release.yml

@@ -28,6 +28,7 @@ env:
 jobs:
   # 准备构建配置
   prepare:
+    permissions: {}
     runs-on: ubuntu-latest
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
@@ -84,6 +85,8 @@ jobs:
           fi
 
   build:
+    permissions:
+      contents: read
     needs: prepare
     if: ${{ fromJson(needs.prepare.outputs.matrix).include[0] != null }}
     strategy:

.github/workflows/codeql.yml

@@ -0,0 +1,109 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+  schedule:
+    - cron: '29 8 * * 3'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: actions
+          build-mode: none
+        - language: c-cpp
+          build-mode: none
+        - language: go
+          build-mode: autobuild
+        - language: javascript-typescript
+          build-mode: none
+        - language: python
+          build-mode: none
+        - language: rust
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Add any setup steps before running the `github/codeql-action/init` action.
+    # This includes steps like installing compilers or runtimes (`actions/setup-node`
+    # or others). This is typically only required for manual builds.
+    # - name: Setup runtime (example)
+    #   uses: actions/setup-example@v1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v4
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - name: Run manual build steps
+      if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v4
+      with:
+        category: "/language:${{matrix.language}}"

frontend/bindings/github.com/wailsapp/wails/v3/pkg/application/models.ts

@@ -61,5 +61,3 @@ export class ServiceOptions {
         return new ServiceOptions($$parsedSource as Partial<ServiceOptions>);
     }
 }
-
-export type Window = any;

frontend/bindings/voidraft/internal/common/helper/index.ts

@@ -0,0 +1,4 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+export * from "./models.js";

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

@@ -0,0 +1,17 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Create as $Create} from "@wailsio/runtime";
+
+/**
+ * CancelFunc 取消订阅函数
+ * 调用此函数可以取消对配置的监听
+ */
+export type CancelFunc = any;
+
+/**
+ * ObserverCallback 观察者回调函数
+ */
+export type ObserverCallback = any;

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

@@ -0,0 +1,4 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+export * from "./models.js";

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

@@ -0,0 +1,370 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as theme$0 from "./theme/models.js";
+
+/**
+ * Document is the model entity for the Document schema.
+ */
+export class Document {
+    /**
+     * ID of the ent.
+     */
+    "id"?: number;
+
+    /**
+     * UUID for cross-device sync (UUIDv7)
+     */
+    "uuid": string;
+
+    /**
+     * creation time
+     */
+    "created_at": string;
+
+    /**
+     * update time
+     */
+    "updated_at": string;
+
+    /**
+     * deleted at
+     */
+    "deleted_at"?: string | null;
+
+    /**
+     * document title
+     */
+    "title": string;
+
+    /**
+     * document content
+     */
+    "content": string;
+
+    /**
+     * document locked status
+     */
+    "locked": boolean;
+
+    /** Creates a new Document instance. */
+    constructor($$source: Partial<Document> = {}) {
+        if (!("uuid" in $$source)) {
+            this["uuid"] = "";
+        }
+        if (!("created_at" in $$source)) {
+            this["created_at"] = "";
+        }
+        if (!("updated_at" in $$source)) {
+            this["updated_at"] = "";
+        }
+        if (!("title" in $$source)) {
+            this["title"] = "";
+        }
+        if (!("content" in $$source)) {
+            this["content"] = "";
+        }
+        if (!("locked" in $$source)) {
+            this["locked"] = false;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new Document instance from a string or object.
+     */
+    static createFrom($$source: any = {}): Document {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new Document($$parsedSource as Partial<Document>);
+    }
+}
+
+/**
+ * Extension is the model entity for the Extension schema.
+ */
+export class Extension {
+    /**
+     * ID of the ent.
+     */
+    "id"?: number;
+
+    /**
+     * UUID for cross-device sync (UUIDv7)
+     */
+    "uuid": string;
+
+    /**
+     * creation time
+     */
+    "created_at": string;
+
+    /**
+     * update time
+     */
+    "updated_at": string;
+
+    /**
+     * deleted at
+     */
+    "deleted_at"?: string | null;
+
+    /**
+     * extension name
+     */
+    "name": string;
+
+    /**
+     * extension enabled or not
+     */
+    "enabled": boolean;
+
+    /**
+     * extension config
+     */
+    "config": { [_: string]: any };
+
+    /** Creates a new Extension instance. */
+    constructor($$source: Partial<Extension> = {}) {
+        if (!("uuid" in $$source)) {
+            this["uuid"] = "";
+        }
+        if (!("created_at" in $$source)) {
+            this["created_at"] = "";
+        }
+        if (!("updated_at" in $$source)) {
+            this["updated_at"] = "";
+        }
+        if (!("name" in $$source)) {
+            this["name"] = "";
+        }
+        if (!("enabled" in $$source)) {
+            this["enabled"] = false;
+        }
+        if (!("config" in $$source)) {
+            this["config"] = {};
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new Extension instance from a string or object.
+     */
+    static createFrom($$source: any = {}): Extension {
+        const $$createField7_0 = $$createType0;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("config" in $$parsedSource) {
+            $$parsedSource["config"] = $$createField7_0($$parsedSource["config"]);
+        }
+        return new Extension($$parsedSource as Partial<Extension>);
+    }
+}
+
+/**
+ * KeyBinding is the model entity for the KeyBinding schema.
+ */
+export class KeyBinding {
+    /**
+     * ID of the ent.
+     */
+    "id"?: number;
+
+    /**
+     * UUID for cross-device sync (UUIDv7)
+     */
+    "uuid": string;
+
+    /**
+     * creation time
+     */
+    "created_at": string;
+
+    /**
+     * update time
+     */
+    "updated_at": string;
+
+    /**
+     * deleted at
+     */
+    "deleted_at"?: string | null;
+
+    /**
+     * command identifier
+     */
+    "name": string;
+
+    /**
+     * keybinding type: standard or emacs
+     */
+    "type": string;
+
+    /**
+     * universal keybinding (cross-platform)
+     */
+    "key"?: string;
+
+    /**
+     * macOS specific keybinding
+     */
+    "macos"?: string;
+
+    /**
+     * Windows specific keybinding
+     */
+    "windows"?: string;
+
+    /**
+     * Linux specific keybinding
+     */
+    "linux"?: string;
+
+    /**
+     * extension name (functional category)
+     */
+    "extension": string;
+
+    /**
+     * whether this keybinding is enabled
+     */
+    "enabled": boolean;
+
+    /**
+     * prevent browser default behavior
+     */
+    "preventDefault": boolean;
+
+    /**
+     * keybinding scope (default: editor)
+     */
+    "scope"?: string;
+
+    /** Creates a new KeyBinding instance. */
+    constructor($$source: Partial<KeyBinding> = {}) {
+        if (!("uuid" in $$source)) {
+            this["uuid"] = "";
+        }
+        if (!("created_at" in $$source)) {
+            this["created_at"] = "";
+        }
+        if (!("updated_at" in $$source)) {
+            this["updated_at"] = "";
+        }
+        if (!("name" in $$source)) {
+            this["name"] = "";
+        }
+        if (!("type" in $$source)) {
+            this["type"] = "";
+        }
+        if (!("extension" in $$source)) {
+            this["extension"] = "";
+        }
+        if (!("enabled" in $$source)) {
+            this["enabled"] = false;
+        }
+        if (!("preventDefault" in $$source)) {
+            this["preventDefault"] = false;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new KeyBinding instance from a string or object.
+     */
+    static createFrom($$source: any = {}): KeyBinding {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new KeyBinding($$parsedSource as Partial<KeyBinding>);
+    }
+}
+
+/**
+ * Theme is the model entity for the Theme schema.
+ */
+export class Theme {
+    /**
+     * ID of the ent.
+     */
+    "id"?: number;
+
+    /**
+     * UUID for cross-device sync (UUIDv7)
+     */
+    "uuid": string;
+
+    /**
+     * creation time
+     */
+    "created_at": string;
+
+    /**
+     * update time
+     */
+    "updated_at": string;
+
+    /**
+     * deleted at
+     */
+    "deleted_at"?: string | null;
+
+    /**
+     * theme name
+     */
+    "name": string;
+
+    /**
+     * theme type
+     */
+    "type": theme$0.Type;
+
+    /**
+     * theme colors
+     */
+    "colors": { [_: string]: any };
+
+    /** Creates a new Theme instance. */
+    constructor($$source: Partial<Theme> = {}) {
+        if (!("uuid" in $$source)) {
+            this["uuid"] = "";
+        }
+        if (!("created_at" in $$source)) {
+            this["created_at"] = "";
+        }
+        if (!("updated_at" in $$source)) {
+            this["updated_at"] = "";
+        }
+        if (!("name" in $$source)) {
+            this["name"] = "";
+        }
+        if (!("type" in $$source)) {
+            this["type"] = ("" as theme$0.Type);
+        }
+        if (!("colors" in $$source)) {
+            this["colors"] = {};
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new Theme instance from a string or object.
+     */
+    static createFrom($$source: any = {}): Theme {
+        const $$createField7_0 = $$createType0;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("colors" in $$parsedSource) {
+            $$parsedSource["colors"] = $$createField7_0($$parsedSource["colors"]);
+        }
+        return new Theme($$parsedSource as Partial<Theme>);
+    }
+}
+
+// Private type creation functions
+const $$createType0 = $Create.Map($Create.Any, $Create.Any);

frontend/bindings/voidraft/internal/models/ent/theme/index.ts

@@ -0,0 +1,4 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+export * from "./models.js";

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

@@ -0,0 +1,22 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Create as $Create} from "@wailsio/runtime";
+
+/**
+ * Type defines the type for the "type" enum field.
+ */
+export enum Type {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    /**
+     * Type values.
+     */
+    TypeDark = "dark",
+    TypeLight = "light",
+};

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

@@ -193,58 +193,6 @@ export class ConfigMetadata {
     }
 }
 
-/**
- * Document represents a document in the system
- */
-export class Document {
-    "id": number;
-    "title": string;
-    "content": string;
-    "createdAt": string;
-    "updatedAt": string;
-    "is_deleted": boolean;
-
-    /**
-     * 锁定标志，锁定的文档无法被删除
-     */
-    "is_locked": boolean;
-
-    /** Creates a new Document instance. */
-    constructor($$source: Partial<Document> = {}) {
-        if (!("id" in $$source)) {
-            this["id"] = 0;
-        }
-        if (!("title" in $$source)) {
-            this["title"] = "";
-        }
-        if (!("content" in $$source)) {
-            this["content"] = "";
-        }
-        if (!("createdAt" in $$source)) {
-            this["createdAt"] = "";
-        }
-        if (!("updatedAt" in $$source)) {
-            this["updatedAt"] = "";
-        }
-        if (!("is_deleted" in $$source)) {
-            this["is_deleted"] = false;
-        }
-        if (!("is_locked" in $$source)) {
-            this["is_locked"] = false;
-        }
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new Document instance from a string or object.
-     */
-    static createFrom($$source: any = {}): Document {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new Document($$parsedSource as Partial<Document>);
-    }
-}
-
 /**
  * EditingConfig 编辑设置配置
  */
@@ -286,6 +234,12 @@ export class EditingConfig {
      */
     "tabType": TabType;
 
+    /**
+     * 快捷键模式
+     * 快捷键模式（standard 或 emacs）
+     */
+    "keymapMode": KeyBindingType;
+
     /**
      * 保存选项
      * 自动保存延迟（毫秒）
@@ -315,6 +269,9 @@ export class EditingConfig {
         if (!("tabType" in $$source)) {
             this["tabType"] = ("" as TabType);
         }
+        if (!("keymapMode" in $$source)) {
+            this["keymapMode"] = ("" as KeyBindingType);
+        }
         if (!("autoSaveDelay" in $$source)) {
             this["autoSaveDelay"] = 0;
         }
@@ -332,40 +289,21 @@ export class EditingConfig {
 }
 
 /**
- * Extension 单个扩展配置
+ * Extension 扩展配置
  */
 export class Extension {
-    /**
-     * 扩展唯一标识
-     */
-    "id": ExtensionID;
-
-    /**
-     * 是否启用
-     */
+    "key": ExtensionName;
     "enabled": boolean;
-
-    /**
-     * 是否为默认扩展
-     */
-    "isDefault": boolean;
-
-    /**
-     * 扩展配置项
-     */
     "config": ExtensionConfig;
 
     /** Creates a new Extension instance. */
     constructor($$source: Partial<Extension> = {}) {
-        if (!("id" in $$source)) {
-            this["id"] = ("" as ExtensionID);
+        if (!("key" in $$source)) {
+            this["key"] = ("" as ExtensionName);
         }
         if (!("enabled" in $$source)) {
             this["enabled"] = false;
         }
-        if (!("isDefault" in $$source)) {
-            this["isDefault"] = false;
-        }
         if (!("config" in $$source)) {
             this["config"] = ({} as ExtensionConfig);
         }
@@ -377,10 +315,10 @@ export class Extension {
      * Creates a new Extension instance from a string or object.
      */
     static createFrom($$source: any = {}): Extension {
-        const $$createField3_0 = $$createType6;
+        const $$createField2_0 = $$createType6;
         let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
         if ("config" in $$parsedSource) {
-            $$parsedSource["config"] = $$createField3_0($$parsedSource["config"]);
+            $$parsedSource["config"] = $$createField2_0($$parsedSource["config"]);
         }
         return new Extension($$parsedSource as Partial<Extension>);
     }
@@ -392,82 +330,83 @@ export class Extension {
 export type ExtensionConfig = { [_: string]: any };
 
 /**
- * ExtensionID 扩展标识符
+ * ExtensionName 扩展标识符
  */
-export enum ExtensionID {
+export enum ExtensionName {
     /**
      * The Go zero value for the underlying type of the enum.
      */
     $zero = "",
 
     /**
-     * 编辑增强扩展
      * 彩虹括号
      */
-    ExtensionRainbowBrackets = "rainbowBrackets",
+    RainbowBrackets = "rainbowBrackets",
 
     /**
      * 超链接
      */
-    ExtensionHyperlink = "hyperlink",
+    Hyperlink = "hyperlink",
 
     /**
      * 颜色选择器
      */
-    ExtensionColorSelector = "colorSelector",
+    ColorSelector = "colorSelector",
 
     /**
      * 代码折叠
      */
-    ExtensionFold = "fold",
+    Fold = "fold",
 
     /**
      * 划词翻译
      */
-    ExtensionTranslator = "translator",
+    Translator = "translator",
 
     /**
      * Markdown渲染
      */
-    ExtensionMarkdown = "markdown",
+    Markdown = "markdown",
 
     /**
      * 显示空白字符
      */
-    ExtensionHighlightWhitespace = "highlightWhitespace",
+    HighlightWhitespace = "highlightWhitespace",
 
     /**
      * 高亮行尾空白
      */
-    ExtensionHighlightTrailingWhitespace = "highlightTrailingWhitespace",
+    HighlightTrailingWhitespace = "highlightTrailingWhitespace",
 
     /**
-     * UI增强扩展
      * 小地图
      */
-    ExtensionMinimap = "minimap",
+    Minimap = "minimap",
 
     /**
      * 行号显示
      */
-    ExtensionLineNumbers = "lineNumbers",
+    LineNumbers = "lineNumbers",
 
     /**
      * 上下文菜单
      */
-    ExtensionContextMenu = "contextMenu",
+    ContextMenu = "contextMenu",
 
     /**
-     * 工具扩展
      * 搜索功能
      */
-    ExtensionSearch = "search",
+    Search = "search",
 
     /**
-     * 核心扩展
-     * 编辑器核心功能
+     * HTTP 客户端
      */
-    ExtensionEditor = "editor",
+    HttpClient = "httpClient",
+
+    /**
+     * 代码块导出图片
+     */
+    BlockImage = "blockImage",
 };
 
 /**
@@ -522,6 +461,11 @@ export class GeneralConfig {
      */
     "enableTabs": boolean;
 
+    /**
+     * 是否启用内存监视器
+     */
+    "enableMemoryMonitor": boolean;
+
     /** Creates a new GeneralConfig instance. */
     constructor($$source: Partial<GeneralConfig> = {}) {
         if (!("alwaysOnTop" in $$source)) {
@@ -551,6 +495,9 @@ export class GeneralConfig {
         if (!("enableTabs" in $$source)) {
             this["enableTabs"] = false;
         }
+        if (!("enableMemoryMonitor" in $$source)) {
+            this["enableMemoryMonitor"] = false;
+        }
 
         Object.assign(this, $$source);
     }
@@ -759,19 +706,39 @@ export class HotkeyCombo {
  */
 export class KeyBinding {
     /**
-     * 快捷键动作
+     * 命令唯一标识符
      */
-    "command": KeyBindingCommand;
+    "name": KeyBindingName;
+
+    /**
+     * 快捷键类型（standard 或 "emacs"）
+     */
+    "type": KeyBindingType;
+
+    /**
+     * 通用快捷键（跨平台）
+     */
+    "key"?: string;
+
+    /**
+     * macOS 专用快捷键
+     */
+    "macos"?: string;
+
+    /**
+     * windows 专用快捷键
+     */
+    "win"?: string;
+
+    /**
+     * Linux 专用快捷键
+     */
+    "linux"?: string;
 
     /**
      * 所属扩展
      */
-    "extension": ExtensionID;
-
-    /**
-     * 快捷键组合（如 "Mod-f", "Ctrl-Shift-p"）
-     */
-    "key": string;
+    "extension": ExtensionName;
 
     /**
      * 是否启用
@@ -779,26 +746,31 @@ export class KeyBinding {
     "enabled": boolean;
 
     /**
-     * 是否为默认快捷键
+     * 阻止浏览器默认行为
      */
-    "isDefault": boolean;
+    "preventDefault": boolean;
+
+    /**
+     * 作用域（默认 "editor"）
+     */
+    "scope"?: string;
 
     /** Creates a new KeyBinding instance. */
     constructor($$source: Partial<KeyBinding> = {}) {
-        if (!("command" in $$source)) {
-            this["command"] = ("" as KeyBindingCommand);
+        if (!("name" in $$source)) {
+            this["name"] = ("" as KeyBindingName);
+        }
+        if (!("type" in $$source)) {
+            this["type"] = ("" as KeyBindingType);
         }
         if (!("extension" in $$source)) {
-            this["extension"] = ("" as ExtensionID);
-        }
-        if (!("key" in $$source)) {
-            this["key"] = "";
+            this["extension"] = ("" as ExtensionName);
         }
         if (!("enabled" in $$source)) {
             this["enabled"] = false;
         }
-        if (!("isDefault" in $$source)) {
-            this["isDefault"] = false;
+        if (!("preventDefault" in $$source)) {
+            this["preventDefault"] = false;
         }
 
         Object.assign(this, $$source);
@@ -814,263 +786,425 @@ export class KeyBinding {
 }
 
 /**
- * KeyBindingCommand 快捷键命令
+ * KeyBindingName 快捷键命令标识符
  */
-export enum KeyBindingCommand {
+export enum KeyBindingName {
     /**
      * The Go zero value for the underlying type of the enum.
      */
     $zero = "",
 
     /**
-     * 搜索扩展相关
      * 显示搜索
      */
-    ShowSearchCommand = "showSearch",
+    ShowSearch = "showSearch",
 
     /**
      * 隐藏搜索
      */
-    HideSearchCommand = "hideSearch",
+    HideSearch = "hideSearch",
 
     /**
-     * 代码块扩展相关
      * 块内选择全部
      */
-    BlockSelectAllCommand = "blockSelectAll",
+    BlockSelectAll = "blockSelectAll",
 
     /**
      * 在当前块后添加新块
      */
-    BlockAddAfterCurrentCommand = "blockAddAfterCurrent",
+    BlockAddAfterCurrent = "blockAddAfterCurrent",
 
     /**
      * 在最后添加新块
      */
-    BlockAddAfterLastCommand = "blockAddAfterLast",
+    BlockAddAfterLast = "blockAddAfterLast",
 
     /**
      * 在当前块前添加新块
      */
-    BlockAddBeforeCurrentCommand = "blockAddBeforeCurrent",
+    BlockAddBeforeCurrent = "blockAddBeforeCurrent",
 
     /**
      * 跳转到上一个块
      */
-    BlockGotoPreviousCommand = "blockGotoPrevious",
+    BlockGotoPrevious = "blockGotoPrevious",
 
     /**
      * 跳转到下一个块
      */
-    BlockGotoNextCommand = "blockGotoNext",
+    BlockGotoNext = "blockGotoNext",
 
     /**
      * 选择上一个块
      */
-    BlockSelectPreviousCommand = "blockSelectPrevious",
+    BlockSelectPrevious = "blockSelectPrevious",
 
     /**
      * 选择下一个块
      */
-    BlockSelectNextCommand = "blockSelectNext",
+    BlockSelectNext = "blockSelectNext",
 
     /**
      * 删除当前块
      */
-    BlockDeleteCommand = "blockDelete",
+    BlockDelete = "blockDelete",
 
     /**
      * 向上移动当前块
      */
-    BlockMoveUpCommand = "blockMoveUp",
+    BlockMoveUp = "blockMoveUp",
 
     /**
      * 向下移动当前块
      */
-    BlockMoveDownCommand = "blockMoveDown",
+    BlockMoveDown = "blockMoveDown",
 
     /**
      * 删除行
      */
-    BlockDeleteLineCommand = "blockDeleteLine",
+    BlockDeleteLine = "blockDeleteLine",
 
     /**
      * 向上移动行
      */
-    BlockMoveLineUpCommand = "blockMoveLineUp",
+    BlockMoveLineUp = "blockMoveLineUp",
 
     /**
      * 向下移动行
      */
-    BlockMoveLineDownCommand = "blockMoveLineDown",
+    BlockMoveLineDown = "blockMoveLineDown",
 
     /**
      * 字符转置
      */
-    BlockTransposeCharsCommand = "blockTransposeChars",
+    BlockTransposeChars = "blockTransposeChars",
 
     /**
      * 格式化代码块
      */
-    BlockFormatCommand = "blockFormat",
+    BlockFormat = "blockFormat",
 
     /**
      * 复制
      */
-    BlockCopyCommand = "blockCopy",
+    BlockCopy = "blockCopy",
 
     /**
      * 剪切
      */
-    BlockCutCommand = "blockCut",
+    BlockCut = "blockCut",
 
     /**
      * 粘贴
      */
-    BlockPasteCommand = "blockPaste",
+    BlockPaste = "blockPaste",
 
     /**
-     * 代码折叠扩展相关
      * 折叠代码
      */
-    FoldCodeCommand = "foldCode",
+    FoldCode = "foldCode",
 
     /**
      * 展开代码
      */
-    UnfoldCodeCommand = "unfoldCode",
+    UnfoldCode = "unfoldCode",
 
     /**
      * 折叠全部
      */
-    FoldAllCommand = "foldAll",
+    FoldAll = "foldAll",
 
     /**
      * 展开全部
      */
-    UnfoldAllCommand = "unfoldAll",
+    UnfoldAll = "unfoldAll",
 
     /**
-     * 通用编辑扩展相关
      * 光标按语法左移
      */
-    CursorSyntaxLeftCommand = "cursorSyntaxLeft",
+    CursorSyntaxLeft = "cursorSyntaxLeft",
 
     /**
      * 光标按语法右移
      */
-    CursorSyntaxRightCommand = "cursorSyntaxRight",
+    CursorSyntaxRight = "cursorSyntaxRight",
 
     /**
      * 按语法选择左侧
      */
-    SelectSyntaxLeftCommand = "selectSyntaxLeft",
+    SelectSyntaxLeft = "selectSyntaxLeft",
 
     /**
      * 按语法选择右侧
      */
-    SelectSyntaxRightCommand = "selectSyntaxRight",
+    SelectSyntaxRight = "selectSyntaxRight",
 
     /**
      * 向上复制行
      */
-    CopyLineUpCommand = "copyLineUp",
+    CopyLineUp = "copyLineUp",
 
     /**
      * 向下复制行
      */
-    CopyLineDownCommand = "copyLineDown",
+    CopyLineDown = "copyLineDown",
 
     /**
      * 插入空行
      */
-    InsertBlankLineCommand = "insertBlankLine",
+    InsertBlankLine = "insertBlankLine",
 
     /**
      * 选择行
      */
-    SelectLineCommand = "selectLine",
+    SelectLine = "selectLine",
 
     /**
      * 选择父级语法
      */
-    SelectParentSyntaxCommand = "selectParentSyntax",
+    SelectParentSyntax = "selectParentSyntax",
+
+    /**
+     * 简化选择
+     */
+    SimplifySelection = "simplifySelection",
+
+    /**
+     * 在上方添加光标
+     */
+    AddCursorAbove = "addCursorAbove",
+
+    /**
+     * 在下方添加光标
+     */
+    AddCursorBelow = "addCursorBelow",
+
+    /**
+     * 光标按单词左移
+     */
+    CursorGroupLeft = "cursorGroupLeft",
+
+    /**
+     * 光标按单词右移
+     */
+    CursorGroupRight = "cursorGroupRight",
+
+    /**
+     * 按单词选择左侧
+     */
+    SelectGroupLeft = "selectGroupLeft",
+
+    /**
+     * 按单词选择右侧
+     */
+    SelectGroupRight = "selectGroupRight",
+
+    /**
+     * 删除到行尾
+     */
+    DeleteToLineEnd = "deleteToLineEnd",
+
+    /**
+     * 删除到行首
+     */
+    DeleteToLineStart = "deleteToLineStart",
+
+    /**
+     * 移动到行首
+     */
+    CursorLineStart = "cursorLineStart",
+
+    /**
+     * 移动到行尾
+     */
+    CursorLineEnd = "cursorLineEnd",
+
+    /**
+     * 选择到行首
+     */
+    SelectLineStart = "selectLineStart",
+
+    /**
+     * 选择到行尾
+     */
+    SelectLineEnd = "selectLineEnd",
+
+    /**
+     * 跳转到文档开头
+     */
+    CursorDocStart = "cursorDocStart",
+
+    /**
+     * 跳转到文档结尾
+     */
+    CursorDocEnd = "cursorDocEnd",
+
+    /**
+     * 选择到文档开头
+     */
+    SelectDocStart = "selectDocStart",
+
+    /**
+     * 选择到文档结尾
+     */
+    SelectDocEnd = "selectDocEnd",
+
+    /**
+     * 选择到匹配括号
+     */
+    SelectMatchingBracket = "selectMatchingBracket",
+
+    /**
+     * 分割行
+     */
+    SplitLine = "splitLine",
+
+    /**
+     * 光标左移一个字符
+     */
+    CursorCharLeft = "cursorCharLeft",
+
+    /**
+     * 光标右移一个字符
+     */
+    CursorCharRight = "cursorCharRight",
+
+    /**
+     * 光标上移一行
+     */
+    CursorLineUp = "cursorLineUp",
+
+    /**
+     * 光标下移一行
+     */
+    CursorLineDown = "cursorLineDown",
+
+    /**
+     * 向上翻页
+     */
+    CursorPageUp = "cursorPageUp",
+
+    /**
+     * 向下翻页
+     */
+    CursorPageDown = "cursorPageDown",
+
+    /**
+     * 选择左移一个字符
+     */
+    SelectCharLeft = "selectCharLeft",
+
+    /**
+     * 选择右移一个字符
+     */
+    SelectCharRight = "selectCharRight",
+
+    /**
+     * 选择上移一行
+     */
+    SelectLineUp = "selectLineUp",
+
+    /**
+     * 选择下移一行
+     */
+    SelectLineDown = "selectLineDown",
 
     /**
      * 减少缩进
      */
-    IndentLessCommand = "indentLess",
+    IndentLess = "indentLess",
 
     /**
      * 增加缩进
      */
-    IndentMoreCommand = "indentMore",
+    IndentMore = "indentMore",
 
     /**
      * 缩进选择
      */
-    IndentSelectionCommand = "indentSelection",
+    IndentSelection = "indentSelection",
 
     /**
      * 光标到匹配括号
      */
-    CursorMatchingBracketCommand = "cursorMatchingBracket",
+    CursorMatchingBracket = "cursorMatchingBracket",
 
     /**
      * 切换注释
      */
-    ToggleCommentCommand = "toggleComment",
+    ToggleComment = "toggleComment",
 
     /**
      * 切换块注释
      */
-    ToggleBlockCommentCommand = "toggleBlockComment",
+    ToggleBlockComment = "toggleBlockComment",
 
     /**
      * 插入新行并缩进
      */
-    InsertNewlineAndIndentCommand = "insertNewlineAndIndent",
+    InsertNewlineAndIndent = "insertNewlineAndIndent",
 
     /**
      * 向后删除字符
      */
-    DeleteCharBackwardCommand = "deleteCharBackward",
+    DeleteCharBackward = "deleteCharBackward",
 
     /**
      * 向前删除字符
      */
-    DeleteCharForwardCommand = "deleteCharForward",
+    DeleteCharForward = "deleteCharForward",
 
     /**
      * 向后删除组
      */
-    DeleteGroupBackwardCommand = "deleteGroupBackward",
+    DeleteGroupBackward = "deleteGroupBackward",
 
     /**
      * 向前删除组
      */
-    DeleteGroupForwardCommand = "deleteGroupForward",
+    DeleteGroupForward = "deleteGroupForward",
 
     /**
-     * 历史记录扩展相关
      * 撤销
      */
-    HistoryUndoCommand = "historyUndo",
+    HistoryUndo = "historyUndo",
 
     /**
      * 重做
      */
-    HistoryRedoCommand = "historyRedo",
+    HistoryRedo = "historyRedo",
 
     /**
      * 撤销选择
      */
-    HistoryUndoSelectionCommand = "historyUndoSelection",
+    HistoryUndoSelection = "historyUndoSelection",
 
     /**
      * 重做选择
      */
-    HistoryRedoSelectionCommand = "historyRedoSelection",
+    HistoryRedoSelection = "historyRedoSelection",
+
+    /**
+     * 复制块为图片
+     */
+    CopyBlockImage = "copyBlockImage",
+};
+
+export enum KeyBindingType {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    /**
+     * standard 标准快捷键
+     */
+    Standard = "standard",
+
+    /**
+     * emacs 快捷键
+     */
+    Emacs = "emacs",
 };
 
 /**
@@ -1138,76 +1272,6 @@ export enum TabType {
     TabTypeTab = "tab",
 };
 
-/**
- * Theme 主题数据库模型
- */
-export class Theme {
-    "id": number;
-    "name": string;
-    "type": ThemeType;
-    "colors": ThemeColorConfig;
-    "isDefault": boolean;
-    "createdAt": string;
-    "updatedAt": string;
-
-    /** Creates a new Theme instance. */
-    constructor($$source: Partial<Theme> = {}) {
-        if (!("id" in $$source)) {
-            this["id"] = 0;
-        }
-        if (!("name" in $$source)) {
-            this["name"] = "";
-        }
-        if (!("type" in $$source)) {
-            this["type"] = ("" as ThemeType);
-        }
-        if (!("colors" in $$source)) {
-            this["colors"] = ({} as ThemeColorConfig);
-        }
-        if (!("isDefault" in $$source)) {
-            this["isDefault"] = false;
-        }
-        if (!("createdAt" in $$source)) {
-            this["createdAt"] = "";
-        }
-        if (!("updatedAt" in $$source)) {
-            this["updatedAt"] = "";
-        }
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new Theme instance from a string or object.
-     */
-    static createFrom($$source: any = {}): Theme {
-        const $$createField3_0 = $$createType9;
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        if ("colors" in $$parsedSource) {
-            $$parsedSource["colors"] = $$createField3_0($$parsedSource["colors"]);
-        }
-        return new Theme($$parsedSource as Partial<Theme>);
-    }
-}
-
-/**
- * ThemeColorConfig 使用与前端 ThemeColors 相同的结构，存储任意主题键值
- */
-export type ThemeColorConfig = { [_: string]: any };
-
-/**
- * ThemeType 主题类型枚举
- */
-export enum ThemeType {
-    /**
-     * The Go zero value for the underlying type of the enum.
-     */
-    $zero = "",
-
-    ThemeTypeDark = "dark",
-    ThemeTypeLight = "light",
-};
-
 /**
  * UpdateSourceType 更新源类型
  */
@@ -1306,8 +1370,8 @@ export class UpdatesConfig {
      * Creates a new UpdatesConfig instance from a string or object.
      */
     static createFrom($$source: any = {}): UpdatesConfig {
-        const $$createField6_0 = $$createType10;
-        const $$createField7_0 = $$createType11;
+        const $$createField6_0 = $$createType9;
+        const $$createField7_0 = $$createType10;
         let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
         if ("github" in $$parsedSource) {
             $$parsedSource["github"] = $$createField6_0($$parsedSource["github"]);
@@ -1334,11 +1398,5 @@ var $$createType6 = (function $$initCreateType6(...args): any {
 });
 const $$createType7 = $Create.Map($Create.Any, $Create.Any);
 const $$createType8 = HotkeyCombo.createFrom;
-var $$createType9 = (function $$initCreateType9(...args): any {
-    if ($$createType9 === $$initCreateType9) {
-        $$createType9 = $$createType7;
-    }
-    return $$createType9(...args);
-});
-const $$createType10 = GithubConfig.createFrom;
-const $$createType11 = GiteaConfig.createFrom;
+const $$createType9 = GithubConfig.createFrom;
+const $$createType10 = GiteaConfig.createFrom;

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

@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT
 
 /**
- * BackupService 提供基于Git的备份功能
+ * BackupService 提供基于Git的备份同步功能
  * @module
  */
 
@@ -18,7 +18,7 @@ import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/applic
 import * as models$0 from "../models/models.js";
 
 /**
- * HandleConfigChange 处理备份配置变更
+ * HandleConfigChange 处理配置变更
  */
 export function HandleConfigChange(config: models$0.GitBackupConfig | null): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(395287784, config) as any;
@@ -34,15 +34,7 @@ export function Initialize(): Promise<void> & { cancel(): void } {
 }
 
 /**
- * PushToRemote 推送本地更改到远程仓库
- */
-export function PushToRemote(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(262644139) as any;
-    return $resultPromise;
-}
-
-/**
- * Reinitialize 重新初始化备份服务，用于响应配置变更
+ * Reinitialize 重新初始化
  */
 export function Reinitialize(): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(301562543) as any;
@@ -50,7 +42,7 @@ export function Reinitialize(): Promise<void> & { cancel(): void } {
 }
 
 /**
- * ServiceShutdown 服务关闭时的清理工作
+ * ServiceShutdown 服务关闭
  */
 export function ServiceShutdown(): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(422131801) as any;
@@ -63,7 +55,7 @@ export function ServiceStartup(options: application$0.ServiceOptions): Promise<v
 }
 
 /**
- * StartAutoBackup 启动自动备份定时器
+ * StartAutoBackup 启动自动备份
  */
 export function StartAutoBackup(): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(3035755449) as any;
@@ -77,3 +69,11 @@ export function StopAutoBackup(): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(2641894021) as any;
     return $resultPromise;
 }
+
+/**
+ * Sync 执行完整的同步流程：导出 -> commit -> pull -> 解决冲突 -> push -> 导入
+ */
+export function Sync(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3420383211) as any;
+    return $resultPromise;
+}

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

@@ -15,11 +15,10 @@ import {Call as $Call, Create as $Create} from "@wailsio/runtime";
 import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: Unused imports
-import * as models$0 from "../models/models.js";
-
+import * as helper$0 from "../common/helper/models.js";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: Unused imports
-import * as $models from "./models.js";
+import * as models$0 from "../models/models.js";
 
 /**
  * Get 获取配置项
@@ -50,7 +49,7 @@ export function MigrateConfig(): Promise<void> & { cancel(): void } {
 }
 
 /**
- * ResetConfig 强制重置所有配置为默认值
+ * ResetConfig 重置所有配置为默认值
  */
 export function ResetConfig(): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(3593047389) as any;
@@ -66,7 +65,7 @@ export function ServiceShutdown(): Promise<void> & { cancel(): void } {
 }
 
 /**
- * ServiceStartup initializes the service when the application starts
+ * ServiceStartup 服务启动时初始化
  */
 export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(3311949428, options) as any;
@@ -84,7 +83,7 @@ export function Set(key: string, value: any): Promise<void> & { cancel(): void }
 /**
  * Watch 注册配置变更监听器
  */
-export function Watch(path: string, callback: $models.ObserverCallback): Promise<$models.CancelFunc> & { cancel(): void } {
+export function Watch(path: string, callback: helper$0.ObserverCallback): Promise<helper$0.CancelFunc> & { cancel(): void } {
     let $resultPromise = $Call.ByID(1143583035, path, callback) as any;
     return $resultPromise;
 }
@@ -92,7 +91,7 @@ export function Watch(path: string, callback: $models.ObserverCallback): Promise
 /**
  * WatchWithContext 使用 Context 注册监听器
  */
-export function WatchWithContext(path: string, callback: $models.ObserverCallback): Promise<void> & { cancel(): void } {
+export function WatchWithContext(path: string, callback: helper$0.ObserverCallback): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(1454973098, path, callback) as any;
     return $resultPromise;
 }

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

@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT
 
 /**
- * DatabaseService provides shared database functionality
+ * DatabaseService 数据库服务
  * @module
  */
 
@@ -15,15 +15,7 @@ import {Call as $Call, Create as $Create} from "@wailsio/runtime";
 import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
 
 /**
- * RegisterModel 注册模型与表的映射关系
- */
-export function RegisterModel(tableName: string, model: any): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(175397515, tableName, model) as any;
-    return $resultPromise;
-}
-
-/**
- * ServiceShutdown shuts down the service when the application closes
+ * ServiceShutdown 服务关闭
  */
 export function ServiceShutdown(): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(3907893632) as any;
@@ -31,7 +23,7 @@ export function ServiceShutdown(): Promise<void> & { cancel(): void } {
 }
 
 /**
- * ServiceStartup initializes the service when the application starts
+ * ServiceStartup 服务启动
  */
 export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(2067840771, options) as any;

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

@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT
 
 /**
- * DocumentService provides document management functionality
+ * DocumentService 文档服务
  * @module
  */
 
@@ -15,12 +15,12 @@ import {Call as $Call, Create as $Create} from "@wailsio/runtime";
 import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: Unused imports
-import * as models$0 from "../models/models.js";
+import * as ent$0 from "../models/ent/models.js";
 
 /**
- * CreateDocument creates a new document and returns the created document with ID
+ * CreateDocument 创建文档
  */
-export function CreateDocument(title: string): Promise<models$0.Document | null> & { cancel(): void } {
+export function CreateDocument(title: string): Promise<ent$0.Document | null> & { cancel(): void } {
     let $resultPromise = $Call.ByID(3360680842, title) as any;
     let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType1($result);
@@ -30,7 +30,7 @@ export function CreateDocument(title: string): Promise<models$0.Document | null>
 }
 
 /**
- * DeleteDocument marks a document as deleted (default document with ID=1 cannot be deleted)
+ * DeleteDocument 删除文档
  */
 export function DeleteDocument(id: number): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(412287269, id) as any;
@@ -38,9 +38,9 @@ export function DeleteDocument(id: number): Promise<void> & { cancel(): void } {
 }
 
 /**
- * GetDocumentByID gets a document by ID
+ * GetDocumentByID 根据ID获取文档
  */
-export function GetDocumentByID(id: number): Promise<models$0.Document | null> & { cancel(): void } {
+export function GetDocumentByID(id: number): Promise<ent$0.Document | null> & { cancel(): void } {
     let $resultPromise = $Call.ByID(3468193232, id) as any;
     let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType1($result);
@@ -50,9 +50,9 @@ export function GetDocumentByID(id: number): Promise<models$0.Document | null> &
 }
 
 /**
- * ListAllDocumentsMeta lists all active (non-deleted) document metadata
+ * ListAllDocumentsMeta 列出所有文档
  */
-export function ListAllDocumentsMeta(): Promise<(models$0.Document | null)[]> & { cancel(): void } {
+export function ListAllDocumentsMeta(): Promise<(ent$0.Document | null)[]> & { cancel(): void } {
     let $resultPromise = $Call.ByID(3073950297) as any;
     let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType2($result);
@@ -62,19 +62,7 @@ export function ListAllDocumentsMeta(): Promise<(models$0.Document | null)[]> &
 }
 
 /**
- * ListDeletedDocumentsMeta lists all deleted document metadata
- */
-export function ListDeletedDocumentsMeta(): Promise<(models$0.Document | null)[]> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(490143787) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType2($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
-/**
- * LockDocument 锁定文档，防止删除
+ * LockDocument 锁定文档
  */
 export function LockDocument(id: number): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(1889494473, id) as any;
@@ -82,15 +70,7 @@ export function LockDocument(id: number): Promise<void> & { cancel(): void } {
 }
 
 /**
- * RestoreDocument restores a deleted document
- */
-export function RestoreDocument(id: number): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(784200778, id) as any;
-    return $resultPromise;
-}
-
-/**
- * ServiceStartup initializes the service when the application starts
+ * ServiceStartup 服务启动
  */
 export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(1474135487, options) as any;
@@ -106,7 +86,7 @@ export function UnlockDocument(id: number): Promise<void> & { cancel(): void } {
 }
 
 /**
- * UpdateDocumentContent updates the content of a document
+ * UpdateDocumentContent 更新文档内容
  */
 export function UpdateDocumentContent(id: number, content: string): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(3251897116, id, content) as any;
@@ -114,7 +94,7 @@ export function UpdateDocumentContent(id: number, content: string): Promise<void
 }
 
 /**
- * UpdateDocumentTitle updates the title of a document
+ * UpdateDocumentTitle 更新文档标题
  */
 export function UpdateDocumentTitle(id: number, title: string): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(2045530459, id, title) as any;
@@ -122,6 +102,6 @@ export function UpdateDocumentTitle(id: number, title: string): Promise<void> &
 }
 
 // Private type creation functions
-const $$createType0 = models$0.Document.createFrom;
+const $$createType0 = ent$0.Document.createFrom;
 const $$createType1 = $Create.Nullable($$createType0);
 const $$createType2 = $Create.Array($$createType1);

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

@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT
 
 /**
- * ExtensionService 扩展管理服务
+ * ExtensionService 扩展服务
  * @module
  */
 
@@ -16,12 +16,15 @@ import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/applic
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: Unused imports
 import * as models$0 from "../models/models.js";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as ent$0 from "../models/ent/models.js";
 
 /**
- * GetAllExtensions 获取所有扩展配置
+ * GetDefaultExtensions 获取默认扩展配置（用于前端绑定生成）
  */
-export function GetAllExtensions(): Promise<models$0.Extension[]> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(3094292124) as any;
+export function GetDefaultExtensions(): Promise<models$0.Extension[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4036328166) as any;
     let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType1($result);
     }) as any;
@@ -30,23 +33,51 @@ export function GetAllExtensions(): Promise<models$0.Extension[]> & { cancel():
 }
 
 /**
- * ResetAllExtensionsToDefault 重置所有扩展到默认状态
+ * GetExtensionByID 根据ID获取扩展
  */
-export function ResetAllExtensionsToDefault(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(270611949) as any;
+export function GetExtensionByID(id: number): Promise<ent$0.Extension | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1521424252, id) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType3($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * GetExtensionConfig 获取扩展配置
+ */
+export function GetExtensionConfig(id: number): Promise<{ [_: string]: any }> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1629559882, id) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType4($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * GetExtensions 获取所有扩展
+ */
+export function GetExtensions(): Promise<(ent$0.Extension | null)[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3179289021) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType5($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * ResetExtensionConfig 重置单个扩展到默认状态
+ */
+export function ResetExtensionConfig(id: number): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3990780299, id) as any;
     return $resultPromise;
 }
 
 /**
- * ResetExtensionToDefault 重置扩展到默认状态
- */
-export function ResetExtensionToDefault(id: models$0.ExtensionID): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(868308101, id) as any;
-    return $resultPromise;
-}
-
-/**
- * ServiceStartup 启动时调用
+ * ServiceStartup 服务启动
  */
 export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(40324057, options) as any;
@@ -54,21 +85,33 @@ export function ServiceStartup(options: application$0.ServiceOptions): Promise<v
 }
 
 /**
- * UpdateExtensionEnabled 更新扩展启用状态
+ * SyncExtensions 同步扩展配置
  */
-export function UpdateExtensionEnabled(id: models$0.ExtensionID, enabled: boolean): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1067300094, id, enabled) as any;
+export function SyncExtensions(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(167560004) as any;
     return $resultPromise;
 }
 
 /**
- * UpdateExtensionState 更新扩展状态
+ * UpdateExtensionConfig 更新扩展配置
  */
-export function UpdateExtensionState(id: models$0.ExtensionID, enabled: boolean, config: models$0.ExtensionConfig): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2917946454, id, enabled, config) as any;
+export function UpdateExtensionConfig(id: number, config: { [_: string]: any }): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3184142503, id, config) as any;
+    return $resultPromise;
+}
+
+/**
+ * UpdateExtensionEnabled 更新扩展启用状态
+ */
+export function UpdateExtensionEnabled(id: number, enabled: boolean): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1067300094, id, enabled) as any;
     return $resultPromise;
 }
 
 // Private type creation functions
 const $$createType0 = models$0.Extension.createFrom;
 const $$createType1 = $Create.Array($$createType0);
+const $$createType2 = ent$0.Extension.createFrom;
+const $$createType3 = $Create.Nullable($$createType2);
+const $$createType4 = $Create.Map($Create.Any, $Create.Any);
+const $$createType5 = $Create.Array($$createType3);

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

@@ -18,12 +18,12 @@ import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/applic
 import * as models$0 from "../models/models.js";
 
 /**
- * GetCurrentHotkey 获取当前热键
+ * GetSupportedKeys 返回系统支持的快捷键列表
  */
-export function GetCurrentHotkey(): Promise<models$0.HotkeyCombo | null> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2572811187) as any;
+export function GetSupportedKeys(): Promise<string[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1511528650) as any;
     let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType1($result);
+        return $$createType0($result);
     }) as any;
     $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
     return $typingPromise;
@@ -86,5 +86,4 @@ export function UpdateHotkey(enable: boolean, combo: models$0.HotkeyCombo | null
 }
 
 // Private type creation functions
-const $$createType0 = models$0.HotkeyCombo.createFrom;
-const $$createType1 = $Create.Nullable($$createType0);
+const $$createType0 = $Create.Array($Create.Any);

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

@@ -17,7 +17,6 @@ import * as SystemService from "./systemservice.js";
 import * as TestService from "./testservice.js";
 import * as ThemeService from "./themeservice.js";
 import * as TranslationService from "./translationservice.js";
-import * as TrayService from "./trayservice.js";
 import * as WindowService from "./windowservice.js";
 export {
     BackupService,
@@ -36,7 +35,6 @@ export {
     TestService,
     ThemeService,
     TranslationService,
-    TrayService,
     WindowService
 };
 

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

@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT
 
 /**
- * KeyBindingService 快捷键管理服务
+ * KeyBindingService 快捷键服务
  * @module
  */
 
@@ -16,12 +16,15 @@ import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/applic
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: Unused imports
 import * as models$0 from "../models/models.js";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as ent$0 from "../models/ent/models.js";
 
 /**
- * GetAllKeyBindings 获取所有快捷键配置
+ * GetDefaultKeyBindings 获取默认快捷键配置
  */
-export function GetAllKeyBindings(): Promise<models$0.KeyBinding[]> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1633502882) as any;
+export function GetDefaultKeyBindings(): Promise<models$0.KeyBinding[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3843471588) as any;
     let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType1($result);
     }) as any;
@@ -30,13 +33,80 @@ export function GetAllKeyBindings(): Promise<models$0.KeyBinding[]> & { cancel()
 }
 
 /**
- * ServiceStartup 启动时调用
+ * GetKeyBindingByID 根据ID获取快捷键
+ */
+export function GetKeyBindingByID(id: number): Promise<ent$0.KeyBinding | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1578192526, id) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType3($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * GetKeyBindings 根据类型获取快捷键
+ */
+export function GetKeyBindings(kbType: models$0.KeyBindingType): Promise<(ent$0.KeyBinding | null)[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4253885163, kbType) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType4($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * ResetKeyBindings 重置所有快捷键到默认值
+ */
+export function ResetKeyBindings(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4251626010) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup 服务启动
  */
 export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
     let $resultPromise = $Call.ByID(2057121990, options) as any;
     return $resultPromise;
 }
 
+/**
+ * SyncKeyBindings 同步快捷键配置
+ */
+export function SyncKeyBindings(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1522202638) as any;
+    return $resultPromise;
+}
+
+/**
+ * UpdateKeyBindingEnabled 更新快捷键启用状态
+ */
+export function UpdateKeyBindingEnabled(id: number, enabled: boolean): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(843626124, id, enabled) as any;
+    return $resultPromise;
+}
+
+/**
+ * UpdateKeyBindingKeys 更新快捷键绑定
+ */
+export function UpdateKeyBindingKeys(id: number, key: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3432755175, id, key) as any;
+    return $resultPromise;
+}
+
+/**
+ * UpdateKeyBindingPreventDefault 更新快捷键 PreventDefault 状态
+ */
+export function UpdateKeyBindingPreventDefault(id: number, preventDefault: boolean): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(202386744, id, preventDefault) as any;
+    return $resultPromise;
+}
+
 // Private type creation functions
 const $$createType0 = models$0.KeyBinding.createFrom;
 const $$createType1 = $Create.Array($$createType0);
+const $$createType2 = ent$0.KeyBinding.createFrom;
+const $$createType3 = $Create.Nullable($$createType2);
+const $$createType4 = $Create.Array($$createType3);

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

@@ -12,12 +12,6 @@ import * as http$0 from "../../../net/http/models.js";
 // @ts-ignore: Unused imports
 import * as time$0 from "../../../time/models.js";
 
-/**
- * CancelFunc 取消订阅函数
- * 调用此函数可以取消对配置的监听
- */
-export type CancelFunc = any;
-
 /**
  * HttpRequest HTTP请求结构
  */
@@ -191,15 +185,14 @@ export class MemoryStats {
  * MigrationProgress 迁移进度信息
  */
 export class MigrationProgress {
-    "status": MigrationStatus;
+    /**
+     * 0-100
+     */
     "progress": number;
     "error"?: string;
 
     /** Creates a new MigrationProgress instance. */
     constructor($$source: Partial<MigrationProgress> = {}) {
-        if (!("status" in $$source)) {
-            this["status"] = ("" as MigrationStatus);
-        }
         if (!("progress" in $$source)) {
             this["progress"] = 0;
         }
@@ -216,20 +209,6 @@ export class MigrationProgress {
     }
 }
 
-/**
- * MigrationStatus 迁移状态
- */
-export enum MigrationStatus {
-    /**
-     * The Go zero value for the underlying type of the enum.
-     */
-    $zero = "",
-
-    MigrationStatusMigrating = "migrating",
-    MigrationStatusCompleted = "completed",
-    MigrationStatusFailed = "failed",
-};
-
 /**
  * OSInfo 操作系统信息
  */
@@ -266,11 +245,6 @@ export class OSInfo {
     }
 }
 
-/**
- * ObserverCallback 观察者回调函数
- */
-export type ObserverCallback = any;
-
 /**
  * SelfUpdateResult 自我更新结果
  */

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

@@ -15,12 +15,12 @@ import {Call as $Call, Create as $Create} from "@wailsio/runtime";
 import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: Unused imports
-import * as models$0 from "../models/models.js";
+import * as ent$0 from "../models/ent/models.js";
 
 /**
- * GetThemeByName 通过名称获取主题覆盖，若不存在则返回 nil
+ * GetThemeByName 根据Key获取主题
  */
-export function GetThemeByName(name: string): Promise<models$0.Theme | null> & { cancel(): void } {
+export function GetThemeByName(name: string): Promise<ent$0.Theme | null> & { cancel(): void } {
     let $resultPromise = $Call.ByID(1938954770, name) as any;
     let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType1($result);
@@ -30,18 +30,10 @@ export function GetThemeByName(name: string): Promise<models$0.Theme | null> & {
 }
 
 /**
- * ResetTheme 删除指定主题的覆盖配置
+ * ResetTheme 删除主题
  */
-export function ResetTheme(name: string): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1806334457, name) as any;
-    return $resultPromise;
-}
-
-/**
- * ServiceShutdown 服务关闭
- */
-export function ServiceShutdown(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1676749034) as any;
+export function ResetTheme(key: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1806334457, key) as any;
     return $resultPromise;
 }
 
@@ -54,13 +46,13 @@ export function ServiceStartup(options: application$0.ServiceOptions): Promise<v
 }
 
 /**
- * UpdateTheme 保存或更新主题覆盖
+ * UpdateTheme 保存或更新主题
  */
-export function UpdateTheme(name: string, colors: models$0.ThemeColorConfig): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(70189749, name, colors) as any;
+export function UpdateTheme(key: string, colors: { [_: string]: any }): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(70189749, key, colors) as any;
     return $resultPromise;
 }
 
 // Private type creation functions
-const $$createType0 = models$0.Theme.createFrom;
+const $$createType0 = ent$0.Theme.createFrom;
 const $$createType1 = $Create.Nullable($$createType0);

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

@@ -1,59 +0,0 @@
-// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
-// This file is automatically generated. DO NOT EDIT
-
-/**
- * TrayService 系统托盘服务
- * @module
- */
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: Unused imports
-import {Call as $Call, Create as $Create} from "@wailsio/runtime";
-
-/**
- * AutoShowHide 自动显示/隐藏主窗口
- */
-export function AutoShowHide(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(4044219428) as any;
-    return $resultPromise;
-}
-
-/**
- * HandleWindowClose 处理窗口关闭事件
- */
-export function HandleWindowClose(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1824247204) as any;
-    return $resultPromise;
-}
-
-/**
- * HandleWindowMinimize 处理窗口最小化事件
- */
-export function HandleWindowMinimize(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(178686624) as any;
-    return $resultPromise;
-}
-
-/**
- * MinimizeButtonClicked 处理标题栏最小化按钮点击
- */
-export function MinimizeButtonClicked(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2477618539) as any;
-    return $resultPromise;
-}
-
-/**
- * ShouldMinimizeToTray 检查是否应该最小化到托盘
- */
-export function ShouldMinimizeToTray(): Promise<boolean> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(3403884012) as any;
-    return $resultPromise;
-}
-
-/**
- * ShowWindow 显示主窗口
- */
-export function ShowWindow(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1315913255) as any;
-    return $resultPromise;
-}

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

@@ -14,18 +14,6 @@ import {Call as $Call, Create as $Create} from "@wailsio/runtime";
 // @ts-ignore: Unused imports
 import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
 
-/**
- * GetOpenWindows 获取所有打开的文档窗口
- */
-export function GetOpenWindows(): Promise<application$0.Window[]> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1464997251) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType0($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
 /**
  * IsDocumentWindowOpen 检查指定文档的窗口是否已打开
  */
@@ -57,6 +45,3 @@ export function ServiceStartup(options: application$0.ServiceOptions): Promise<v
     let $resultPromise = $Call.ByID(2432987694, options) as any;
     return $resultPromise;
 }
-
-// Private type creation functions
-const $$createType0 = $Create.Array($Create.Any);

frontend/components.d.ts

@@ -11,6 +11,8 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AccordionContainer: typeof import('./src/components/accordion/AccordionContainer.vue')['default']
+    AccordionItem: typeof import('./src/components/accordion/AccordionItem.vue')['default']
     BlockLanguageSelector: typeof import('./src/components/toolbar/BlockLanguageSelector.vue')['default']
     DocumentSelector: typeof import('./src/components/toolbar/DocumentSelector.vue')['default']
     LinuxTitleBar: typeof import('./src/components/titlebar/LinuxTitleBar.vue')['default']
@@ -22,6 +24,8 @@ declare module 'vue' {
     TabContainer: typeof import('./src/components/tabs/TabContainer.vue')['default']
     TabContextMenu: typeof import('./src/components/tabs/TabContextMenu.vue')['default']
     TabItem: typeof import('./src/components/tabs/TabItem.vue')['default']
+    Toast: typeof import('./src/components/toast/Toast.vue')['default']
+    ToastContainer: typeof import('./src/components/toast/ToastContainer.vue')['default']
     Toolbar: typeof import('./src/components/toolbar/Toolbar.vue')['default']
     WindowsTitleBar: typeof import('./src/components/titlebar/WindowsTitleBar.vue')['default']
     WindowTitleBar: typeof import('./src/components/titlebar/WindowTitleBar.vue')['default']

frontend/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.0",
-    "@codemirror/commands": "^6.10.0",
+    "@codemirror/commands": "^6.10.1",
     "@codemirror/lang-angular": "^0.1.4",
     "@codemirror/lang-cpp": "^6.0.3",
     "@codemirror/lang-css": "^6.3.1",
@@ -34,7 +34,7 @@
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-less": "^6.0.2",
     "@codemirror/lang-lezer": "^6.0.2",
-    "@codemirror/lang-liquid": "^6.3.0",
+    "@codemirror/lang-liquid": "^6.3.1",
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/lang-php": "^6.0.2",
     "@codemirror/lang-python": "^6.2.1",
@@ -44,62 +44,62 @@
     "@codemirror/lang-vue": "^0.1.3",
     "@codemirror/lang-wast": "^6.0.2",
     "@codemirror/lang-yaml": "^6.1.2",
-    "@codemirror/language": "^6.11.3",
+    "@codemirror/language": "^6.12.1",
     "@codemirror/language-data": "^6.5.2",
     "@codemirror/legacy-modes": "^6.5.2",
     "@codemirror/lint": "^6.9.2",
     "@codemirror/search": "^6.5.11",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.8",
+    "@codemirror/state": "^6.5.3",
+    "@codemirror/view": "^6.39.8",
     "@cospaia/prettier-plugin-clojure": "^0.0.2",
     "@lezer/highlight": "^1.2.3",
-    "@lezer/lr": "^1.4.4",
+    "@lezer/lr": "^1.4.5",
     "@prettier/plugin-xml": "^3.4.2",
     "@replit/codemirror-lang-svelte": "^6.0.0",
     "@toml-tools/lexer": "^1.0.0",
     "@toml-tools/parser": "^1.0.0",
     "@types/katex": "^0.16.7",
+    "@zumer/snapdom": "^2.0.1",
     "codemirror": "^6.0.2",
     "codemirror-lang-elixir": "^4.0.0",
-    "colors-named": "^1.0.2",
-    "colors-named-hex": "^1.0.2",
+    "colors-named": "^1.0.4",
+    "colors-named-hex": "^1.0.3",
     "groovy-beautify": "^0.0.17",
     "hsl-matcher": "^1.2.4",
     "java-parser": "^3.0.1",
-    "katex": "^0.16.25",
-    "linguist-languages": "^9.1.0",
+    "katex": "^0.16.27",
+    "linguist-languages": "^9.1.11",
     "marked": "^17.0.1",
-    "mermaid": "^11.12.1",
+    "mermaid": "^11.12.2",
     "php-parser": "^3.2.5",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
-    "prettier": "^3.7.2",
-    "sass": "^1.94.2",
-    "vue": "^3.5.25",
-    "vue-i18n": "^11.2.2",
+    "prettier": "^3.7.4",
+    "sass": "^1.97.1",
+    "vue": "^3.5.26",
+    "vue-i18n": "^11.2.8",
     "vue-pick-colors": "^1.8.0",
-    "vue-router": "^4.6.3"
+    "vue-router": "^4.6.4"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@lezer/generator": "^1.8.0",
-    "@types/node": "^24.10.1",
-    "@vitejs/plugin-vue": "^6.0.2",
-    "@wailsio/runtime": "latest",
+    "@types/node": "^25.0.3",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@wailsio/runtime": "^3.0.0-alpha.77",
     "cross-env": "^10.1.0",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-vue": "^10.6.2",
     "globals": "^16.5.0",
-    "happy-dom": "^20.0.11",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0",
+    "typescript-eslint": "^8.51.0",
     "unplugin-vue-components": "^30.0.0",
     "vite": "npm:rolldown-vite@latest",
     "vite-plugin-node-polyfills": "^0.24.0",
     "vitepress": "^2.0.0-alpha.12",
-    "vitest": "^4.0.14",
+    "vitest": "^4.0.16",
     "vue-eslint-parser": "^10.2.0",
-    "vue-tsc": "^3.1.5"
+    "vue-tsc": "^3.2.1"
   },
   "overrides": {
     "vite": "npm:rolldown-vite@latest"

frontend/public/images/blockImage.svg

@@ -0,0 +1 @@
+<svg t="1767366893329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="106998" width="200" height="200"><path d="M344.064 36.571429v95.085714H155.428571a23.771429 23.771429 0 0 0-23.259428 19.017143l-0.512 4.754285-0.073143 509.952L306.176 505.417143a95.085714 95.085714 0 0 1 121.270857-5.997714l4.827429 3.876571 152.137143 130.413714 102.546285-102.4a95.085714 95.085714 0 0 1 119.003429-12.507428l5.266286 3.657143 81.042285 60.781714 0.073143-118.784 0.512-7.021714a47.542857 47.542857 0 0 1 94.061714 0l0.512 7.021714v404.114286c0 62.171429-47.762286 113.225143-108.617142 118.418285l-10.24 0.438857h-713.142858l-10.24-0.438857a118.857143 118.857143 0 0 1-108.105142-107.52L36.571429 868.498286v-713.142857l0.438857-10.24A118.857143 118.857143 0 0 1 155.428571 36.571429h188.708572z m26.331429 538.916571L131.657143 794.404571l0.073143 74.166858c0 11.483429 8.118857 21.065143 19.017143 23.259428l4.754285 0.512h713.142857a23.771429 23.771429 0 0 0 23.259429-19.017143l0.512-4.754285-0.073143-166.473143-138.093714-103.570286-97.353143 97.28 76.288 65.316571a47.542857 47.542857 0 0 1-58.002286 75.190858l-3.876571-2.925715-300.836572-257.901714zM649.069714 60.269714a47.542857 47.542857 0 0 1 3.291429 63.634286l-3.291429 3.657143-61.44 61.44 61.44 61.44a47.542857 47.542857 0 0 1 3.291429 63.634286l-3.291429 3.657142a47.542857 47.542857 0 0 1-63.634285 3.218286l-3.584-3.291428-95.085715-95.085715a47.542857 47.542857 0 0 1-3.291428-63.634285l3.291428-3.584 95.085715-95.085715a47.542857 47.542857 0 0 1 67.291428 0zM855.259429 57.051429l3.584 3.218285 95.085714 95.085715a47.542857 47.542857 0 0 1 3.291428 63.634285l-3.291428 3.657143-95.085714 95.085714a47.542857 47.542857 0 0 1-70.509715-63.634285l3.291429-3.657143 61.44-61.44-61.44-61.44a47.542857 47.542857 0 0 1-3.291429-63.634286l3.291429-3.657143a47.542857 47.542857 0 0 1 63.634286-3.218285zM344.210286 36.571429a47.542857 47.542857 0 0 1 7.021714 94.573714l-7.021714 0.512V36.571429z" p-id="106999" fill="#e0620d"></path></svg>

frontend/public/images/colorSelector.svg

@@ -0,0 +1 @@
+<svg t="1767367606621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15611" width="200" height="200"><path d="M511.966509 0.066982c96.036384 0 185.886507 26.451603 262.724147 72.443261L767.949763 68.670494l-127.948963 221.638835A254.788666 254.788666 0 0 0 511.966509 256.050237V0.066982z" fill="#E70212" p-id="15612"></path><path d="M767.949763 68.670494a509.577332 509.577332 0 0 1 191.304819 194.120635L955.329506 256.050237l-221.638835 127.991627a257.263171 257.263171 0 0 0-93.689871-93.689871L767.949763 68.670494z" fill="#EA6101" p-id="15613"></path><path d="M955.329506 256.050237A509.577332 509.577332 0 0 1 1023.933018 519.798317V512.033491h-255.983255a254.788666 254.788666 0 0 0-34.259092-127.991627l221.638835-127.991627z" fill="#F39801" p-id="15614"></path><path d="M1023.933018 512.033491c0 90.020778-23.251812 174.665907-64.038478 248.175765l-4.565034 7.80749-221.638835-127.948964c21.758577-37.672202 34.259092-81.402675 34.259092-128.034291v-0.042664L1023.933018 512.033491z" fill="#FCC902" p-id="15615"></path><path d="M733.690671 640.025118l221.638835 127.991628a509.66266 509.66266 0 0 1-179.52959 182.900035l-7.850153 4.479707-127.991627-221.638835A257.263171 257.263171 0 0 0 733.690671 640.025118z" fill="#FEF200" p-id="15616"></path><path d="M640.0008 733.757653L767.949763 955.396488A509.66266 509.66266 0 0 1 521.011251 1024H511.966509v-255.983254a254.788666 254.788666 0 0 0 128.034291-34.259093z" fill="#90C320" p-id="15617"></path><path d="M511.966509 768.016746v255.983254c-90.020778 0-174.665907-23.251812-248.175765-64.038477L255.983254 955.396488l127.991628-221.638835c37.672202 21.758577 81.402675 34.259092 128.034291 34.259093z" fill="#019A44" p-id="15618"></path><path d="M383.974882 733.757653l-127.991628 221.638835a509.66266 509.66266 0 0 1-182.900035-179.529589L68.603512 768.016746l221.638835-127.991628A257.263171 257.263171 0 0 0 383.974882 733.757653z" fill="#019E97" p-id="15619"></path><path d="M255.983254 512.033491c0 46.631616 12.457852 90.362089 34.259093 128.034291L68.603512 768.016746A509.66266 509.66266 0 0 1 0 521.078233V512.033491h255.983254z" fill="#0169B8" p-id="15620"></path><path d="M68.603512 256.050237l221.638835 127.991627A254.788666 254.788666 0 0 0 255.983254 512.033491H0c0-90.020778 23.251812-174.665907 64.038477-248.175765L68.603512 256.050237z" fill="#1C2089" p-id="15621"></path><path d="M262.681483 64.745418L255.983254 68.670494l127.991628 221.638835A257.263171 257.263171 0 0 0 290.242347 384.041864L68.603512 256.050237a509.577332 509.577332 0 0 1 194.120635-191.304819z" fill="#621988" p-id="15622"></path><path d="M519.731334 0.066982H511.966509v255.983255a254.788666 254.788666 0 0 0-128.034291 34.259092L255.983254 68.670494A509.577332 509.577332 0 0 1 519.731334 0.066982z" fill="#910783" p-id="15623"></path></svg>

frontend/public/images/contextMenu.svg

@@ -0,0 +1 @@
+<svg t="1767366808037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="103196" width="200" height="200"><path d="M878.921143 96c27.099429 0 49.078857 21.942857 49.078857 49.078857v349.842286c0 27.099429-21.942857 49.078857-49.078857 49.078857h-221.842286c-27.099429 0-49.078857-21.942857-49.078857-49.078857V145.078857c0-27.099429 21.942857-49.078857 49.078857-49.078857z m-14.921143 320h-192v64h192v-64z m0-128h-192v64h192v-64z m0-128h-192v64h192v-64zM384 309.321143A202.678857 202.678857 0 0 1 586.678857 512v213.321143a202.678857 202.678857 0 0 1-202.678857 202.678857H298.678857a202.678857 202.678857 0 0 1-202.678857-202.678857V512a202.678857 202.678857 0 0 1 202.678857-202.678857z m138.642286 298.642286H160v117.394285a138.678857 138.678857 0 0 0 131.547429 138.459429l7.131428 0.182857H384a138.678857 138.678857 0 0 0 138.678857-138.678857l-0.036571-117.357714z m-213.321143-234.642286h-10.642286A138.678857 138.678857 0 0 0 160 512v31.963429h149.321143v-170.642286z" p-id="103197" fill="#8992c8"></path></svg>

frontend/public/images/fold.svg

@@ -0,0 +1 @@
+<svg t="1767366707029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="100833" width="200" height="200"><path d="M533.333 54c16.138 0 29.75 12.016 31.753 28.03l17.828 142.569L896 224.6c17.496 0 31.713 14.042 31.996 31.47l0.004 0.53V939c0 17.673-14.327 32-32 32H469.735a31.94 31.94 0 0 1-3.051-0.102l-0.09-0.009c-10.834-0.868-19.434-6.86-24.45-14.999a31.766 31.766 0 0 1-3.374-7.39 32.348 32.348 0 0 1-1.405-7.246L419.752 800.4H128c-17.496 0-31.713-14.042-31.996-31.47L96 768.4V86c0-17.673 14.327-32 32-32zM864 288.599H590.917l13.33 106.6L704 395.2c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.996l-0.53 0.004-91.75-0.001 13.331 106.6L704 565.8c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.996l-0.53 0.004-70.416-0.001 16.548 132.332 0.287 2.298c0.024 0.188 0.046 0.376 0.066 0.565 0.986 9.171-2.002 17.793-7.523 24.232l-0.217 0.25L539.872 907H864v-618.4zM548.127 800.4H484.25l7.985 63.851 55.892-63.851zM505.085 118H160v618.4h287.598c0.302-0.004 0.603-0.004 0.904 0h133.913l-0.001-0.004L569.01 629.21l-3.386-27.076c-0.03-0.225-0.058-0.45-0.084-0.676l-21.256-169.977c-0.03-0.219-0.056-0.438-0.081-0.659L505.085 118zM448 565.8c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.47 31.996l-0.53 0.004H256c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.996l0.53-0.004h192z m-21.333-170.6c17.673 0 32 14.327 32 32 0 17.496-14.042 31.713-31.471 31.996l-0.53 0.004H256c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.996l0.53-0.004h170.667z m-21.334-170.6c17.673 0 32 14.327 32 32 0 17.496-14.041 31.713-31.47 31.996l-0.53 0.004H256c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.996l0.53-0.004h149.333z" p-id="100834" fill="#1aaba8"></path></svg>

frontend/public/images/highlightTrailingWhitespace.svg

@@ -0,0 +1 @@
+<svg t="1767367226608" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5585" width="200" height="200"><path d="M416 64H768v64h-64v704h64v64H448v-64h64V512H416a224 224 0 1 1 0-448zM576 832h64V128H576v704zM416 128H512v320H416a160 160 0 0 1 0-320z" fill="#a4579d" p-id="5586"></path></svg>

frontend/public/images/highlightWhitespace.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767366207284" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="95138" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M753.5 130.4v763.3h70.1v66.4H477v-66.4h70.1V547.1H443.9c-44.2 0-84.8-11.1-121.7-33.2-36.9-22.1-66.4-51.6-88.5-88.5s-33.2-76.8-33.2-119.8 11.1-83.6 33.2-121.7c22.1-38.1 51.6-67.6 88.5-88.5s77.4-31.3 121.7-31.3h379.8v66.4h-70.1z m-206.5 0H443.8c-49.2 0-90.3 17.2-123.5 51.6-33.2 34.4-49.8 75.6-49.8 123.5s16.6 88.5 49.8 121.7c33.2 33.2 74.4 49.8 123.5 49.8H547V130.4z m140.1 0H617v763.3h70.1V130.4z" p-id="95139"></path></svg>

frontend/public/images/httpClient.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767365935803" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="81379" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 64a64 64 0 0 1 64 64v613.952l-121.28-95.68a83.2 83.2 0 0 0-110.848 7.04l-6.016 6.784-5.312 7.616a83.2 83.2 0 0 0-12.032 34.56l-0.064 1.728H595.2A83.2 83.2 0 0 0 512 787.2v44.8H128a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h768z" fill="#B5E3CC" p-id="81380"></path><path d="M640 256a32 32 0 1 1 0 64h-32v224a32 32 0 0 1-64 0V320h-64v224a32 32 0 0 1-64 0V320H384a32 32 0 0 1 0-64h256z m160 0a96 96 0 0 1 0 192H768v96a32 32 0 0 1-26.24 31.488L736 576a32 32 0 0 1-32-32v-256a32 32 0 0 1 32-32h64zM768 384h32a32 32 0 1 0 0-64H768v64zM288 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V448H192v96a32 32 0 0 1-64 0v-256a32 32 0 0 1 64 0V384h64V288a32 32 0 0 1 32-32zM772.096 699.712a19.2 19.2 0 0 0-4.096 11.904v56.32L595.2 768a19.2 19.2 0 0 0-19.2 19.2v89.6a19.2 19.2 0 0 0 19.2 19.2H768v56.384a19.2 19.2 0 0 0 31.104 15.104l152.576-120.384a19.2 19.2 0 0 0 0-30.208l-152.576-120.32a19.2 19.2 0 0 0-27.008 3.136z" fill="#129250" p-id="81381"></path></svg>

frontend/public/images/hyperlink.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767365120766" class="icon" viewBox="0 0 1160 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12589" xmlns:xlink="http://www.w3.org/1999/xlink" width="226.5625" height="200"><path d="M398.5408 736.142222l435.768889-384.568889a44.009244 44.009244 0 0 0 0-67.675022 59.483022 59.483022 0 0 0-76.731733 0l-435.768889 384.568889a43.872711 43.872711 0 0 0 0 67.675022 59.164444 59.164444 0 0 0 76.731733 0z m143.7696-66.582755a39.867733 39.867733 0 0 1 9.102222 25.031111 38.866489 38.866489 0 0 1-13.653333 30.128355L308.929422 926.151111a52.8384 52.8384 0 0 1-68.266666 0L111.047111 811.781689a39.139556 39.139556 0 0 1 0-60.302222l228.192711-201.9328a50.335289 50.335289 0 0 1 34.178845-11.969423 53.748622 53.748622 0 0 1 22.755555 4.551112l69.632-60.848356c-57.617067-41.824711-141.7216-38.365867-194.696533 7.964444L42.052267 690.631111c-56.069689 50.3808-56.069689 131.117511 0 181.4528l130.207289 114.323911a158.651733 158.651733 0 0 0 204.8 0L605.297778 785.066667c54.613333-48.196267 57.025422-125.474133 5.779911-176.355556zM1117.980444 151.916089L988.410311 37.546667c-56.797867-50.062222-148.821333-50.062222-205.664711 0L554.552889 238.933333c-52.519822 46.739911-56.388267 120.968533-9.102222 171.804445L614.4 349.889422a41.688178 41.688178 0 0 1-5.142756-20.48 38.866489 38.866489 0 0 1 13.653334-30.128355l228.875378-201.386667a50.335289 50.335289 0 0 1 34.178844-12.515556 52.383289 52.383289 0 0 1 34.178844 12.515556l129.570134 114.323911a39.139556 39.139556 0 0 1 0 60.302222l-228.192711 201.9328a50.335289 50.335289 0 0 1-34.178845 11.969423 57.7536 57.7536 0 0 1-28.353422-7.418312l-68.266667 60.302223c57.389511 45.101511 144.543289 43.099022 199.202134-4.551111l228.192711-201.9328a117.418667 117.418667 0 0 0 0-180.906667z" fill="#1A97F0" p-id="12590"></path></svg>

frontend/public/images/lineNumbers.svg

@@ -0,0 +1 @@
+<svg t="1767366749042" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="102155" width="200" height="200"><path d="M426.7008 256c0-23.552 19.0976-42.6496 42.6496-42.6496h384a42.6496 42.6496 0 1 1 0 85.2992h-384A42.6496 42.6496 0 0 1 426.7008 256zM426.7008 512c0-23.552 19.0976-42.6496 42.6496-42.6496h384a42.6496 42.6496 0 1 1 0 85.2992h-384A42.6496 42.6496 0 0 1 426.7008 512zM469.2992 768c0-23.552 19.1488-42.6496 42.7008-42.6496h341.2992a42.6496 42.6496 0 0 1 0 85.2992H512A42.6496 42.6496 0 0 1 469.2992 768zM256 640a42.6496 42.6496 0 0 0-42.6496 42.6496 42.6496 42.6496 0 0 1-85.3504 0 128 128 0 1 1 256 0c0 25.856-11.264 45.6192-22.4256 59.8528-8.0384 10.1888-18.5856 20.48-26.8288 28.5184l-5.888 5.8368a42.4448 42.4448 0 0 1-2.8672 2.56l-37.4784 31.232h52.8384a42.6496 42.6496 0 1 1 0 85.3504H170.6496a42.6496 42.6496 0 0 1-27.2896-75.4688l126.5152-105.472 6.5024-6.3488 0.4096-0.4096 7.2704-7.168c4.608-4.608 7.936-8.192 10.3936-11.3664a28.672 28.672 0 0 0 3.9424-6.0928c0.3072-0.7168 0.256-0.9728 0.256-1.024A42.6496 42.6496 0 0 0 256 640zM272.3328 131.2256a42.6496 42.6496 0 0 1 26.3168 39.424v256a42.6496 42.6496 0 0 1-85.2992 0V273.664l-12.4928 12.4928a42.6496 42.6496 0 1 1-60.3648-60.3136l85.3504-85.3504a42.6496 42.6496 0 0 1 46.4896-9.216z" p-id="102156" fill="#87c38f"></path></svg>

frontend/public/images/markdown.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767365625477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="51837" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M98.649225 16.619164h734.636904v990.162784h-734.636904z" fill="#FF8A90" p-id="51838"></path><path d="M881.197231 128.411736h-31.940735V32.589531c0-17.642265-14.29847-31.940735-31.940735-31.940735H114.619592c-17.642265 0-31.940735 14.29847-31.940735 31.940735v958.222049c0 17.642265 14.29847 31.940735 31.940735 31.940735h702.696169c17.642265 0 31.940735-14.29847 31.940735-31.940735V415.878351h31.940735c17.642265 0 31.940735-14.29847 31.940735-31.940735V160.352471c0-17.642265-14.29847-31.940735-31.940735-31.940735z m-63.88147 0h-383.288819c-17.642265 0-31.940735 14.29847-31.940735 31.940735V383.937616c0 17.642265 14.29847 31.940735 31.940735 31.940735h383.288819v574.933229H114.619592v-958.222049h702.696169v95.822205z" fill="#2B3139" p-id="51839"></path><path d="M434.026942 160.352471h447.170289V383.937616h-447.170289z" fill="#FFFFFF" p-id="51840"></path><path d="M544.808889 215.175748h49.969783l16.294765 67.025636h0.311922l16.294765-67.025636h49.957306v113.963544h-33.18842v-73.101861h-0.336875l-19.80076 73.101861h-26.176431l-19.788283-73.101861h-0.336875v73.101861h-33.200897zM698.947889 215.175748h57.618092c37.992007 0 51.392143 28.097865 51.392143 56.819573 0 34.947656-18.490691 57.143971-58.241934 57.143971h-50.768301v-113.963544z" fill="#2B3139" p-id="51841"></path><path d="M726.584111 299.918511h13.712058c21.85944 0 25.065991-17.717126 25.065991-28.409787 0-7.174189-2.233356-27.112194-27.611269-27.112194h-11.154303v55.521981z" fill="#FFFFFF" p-id="51842"></path><path d="M630.512369 785.841895l-94.998733-129.709328h57.318647V544.888976h76.445658v111.243591h57.30617L630.487415 785.841895z" fill="#1EB9B0" p-id="51843"></path><path d="M508.139428 785.754557l-76.445657 0.087338v-120.439029l-57.331124 77.194268-57.343601-77.194268v120.439029H240.573389V544.976313h76.445657l57.343601 80.288528 57.331124-80.288528 76.445657-0.087337z" fill="#1EB9B0" p-id="51844"></path></svg>

frontend/public/images/minimap.svg

@@ -0,0 +1 @@
+<svg t="1767367796950" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18541" width="200" height="200"><path d="M880.489336 512H993.882278v455.107765A56.786824 56.786824 0 0 1 937.185807 1024h-56.681412V512z" fill="#4AC3BB" fill-opacity=".603" p-id="18542"></path><path d="M143.510513 1024a113.182118 113.182118 0 0 1-80.188235-33.325176A113.980235 113.980235 0 0 1 30.117572 910.215529V113.784471C30.117572 83.606588 42.059219 54.663529 63.322278 33.325176A113.182118 113.182118 0 0 1 143.510513 0h510.238118C778.977807 0 880.489336 101.872941 880.489336 227.553882v739.553883A56.786824 56.786824 0 0 0 937.185807 1024H143.510513z" fill="#4AC3BB" p-id="18543"></path><path d="M575.653572 335.329882c64.331294 65.024 66.529882 169.758118 4.954353 237.477647l-4.954353 5.240471-98.063059 122.473412a28.175059 28.175059 0 0 1-21.985882 10.586353 28.175059 28.175059 0 0 1-21.985883-10.586353l-98.078117-122.473412-4.412236-4.638118c-63.503059-68.487529-60.777412-175.841882 6.098824-240.941176a168.478118 168.478118 0 0 1 238.426353 2.861176z m-120.048941 64.150589a56.470588 56.470588 0 0 0-49.016471 28.611764 57.735529 57.735529 0 0 0 0 57.193412 56.470588 56.470588 0 0 0 49.016471 28.611765c31.247059-0.015059 56.576-25.630118 56.576-57.22353 0-31.578353-25.328941-57.193412-56.576-57.193411z" fill="#FFFFFF" fill-opacity=".95" p-id="18544"></path></svg>

frontend/public/images/rainbowBrackets.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767364585914" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8006" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 128c0-35.36-28.704-64.224-63.936-61.728A896.48 896.48 0 0 0 326.4 326.4a896.48 896.48 0 0 0-260.128 569.664C63.776 931.296 92.64 960 128 960c0 0 19.52 0.576 32 0 64-272 84.48-383.68 234.24-533.76C544.32 276.16 752 192 960 160V128z" fill="#F8312F" p-id="8007"></path><path d="M960 256V160a800 800 0 0 0-565.76 234.24A801.344 801.344 0 0 0 160 960h96c32-128 106.24-333.76 238.08-465.92C625.92 362.24 752 304 960 256z" fill="#FFB02E" p-id="8008"></path><path d="M960 256v96c-160 16-284.16 96-398.08 209.92C448 676.16 384 800 352 960H256c0-186.56 74.24-365.76 206.08-497.92A704.32 704.32 0 0 1 960 256z" fill="#FFF478" p-id="8009"></path><path d="M630.08 630.08C534.08 726.08 480 832 448 960h-96c0-161.28 64-315.84 177.92-430.08C643.84 416 798.72 352 960 352v96c-144 32-233.92 86.08-329.92 182.08z" fill="#00D26A" p-id="8010"></path><path d="M960 544v-96c-135.68 0-265.92 54.08-361.92 150.08-96 96-150.08 226.24-150.08 361.92h96c0-110.4 43.84-216.32 121.92-294.08C744 587.84 849.92 544 960 544z" fill="#3F5FFF" p-id="8011"></path><path d="M960 576c0 35.36-28.928 63.36-63.584 70.336a320.384 320.384 0 0 0-250.112 250.08C639.36 931.04 611.392 960 576 960h-32c0-110.4 43.84-216.32 121.92-294.08C744 587.84 849.92 544 960 544v32z" fill="#8D65C5" p-id="8012"></path></svg>

frontend/public/images/search.svg

@@ -0,0 +1 @@
+<svg t="1767366992790" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="111373" width="200" height="200"><path d="M581.973333 846.933333a380.8 380.8 0 1 1 380.8-380.8A381.226667 381.226667 0 0 1 581.973333 846.933333z m0-688a307.2 307.2 0 1 0 307.2 307.2 307.413333 307.413333 0 0 0-307.2-307.2z" fill="#FA6302" p-id="111374"></path><path d="M146.56 938.666667a36.906667 36.906667 0 0 1-26.026667-64l192-190.933334a36.906667 36.906667 0 0 1 52.053334 52.266667l-192 192a37.333333 37.333333 0 0 1-26.026667 10.666667z" fill="#43D7B4" p-id="111375"></path><path d="M470.826667 274.773333m-49.066667 0a49.066667 49.066667 0 1 0 98.133333 0 49.066667 49.066667 0 1 0-98.133333 0Z" fill="#43D7B4" p-id="111376"></path><path d="M312.106667 684.8l-23.68 23.466667A388.693333 388.693333 0 0 0 341.333333 760.32l23.466667-23.253333a36.906667 36.906667 0 0 0-52.053333-52.266667z" fill="#425300" p-id="111377"></path></svg>

frontend/src/App.vue

@@ -6,7 +6,10 @@ import {useKeybindingStore} from '@/stores/keybindingStore';
 import {useThemeStore} from '@/stores/themeStore';
 import {useUpdateStore} from '@/stores/updateStore';
 import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';
+import ToastContainer from '@/components/toast/ToastContainer.vue';
 import {useTranslationStore} from "@/stores/translationStore";
+import {useI18n} from "vue-i18n";
+import {LanguageType} from "../bindings/voidraft/internal/models";
 
 const configStore = useConfigStore();
 const systemStore = useSystemStore();
@@ -14,18 +17,18 @@ const keybindingStore = useKeybindingStore();
 const themeStore = useThemeStore();
 const updateStore = useUpdateStore();
 const translationStore = useTranslationStore();
+const {locale} = useI18n();
 
 onBeforeMount(async () => {
   // 并行初始化配置、系统信息和快捷键配置
   await Promise.all([
     configStore.initConfig(),
-    systemStore.initializeSystemInfo(),
+    systemStore.initSystemInfo(),
     keybindingStore.loadKeyBindings(),
   ]);
-  
-  // 初始化语言和主题
-  await configStore.initializeLanguage();
-  await themeStore.initializeTheme();
+
+  locale.value = configStore.config.appearance.language || LanguageType.LangEnUS;
+  await themeStore.initTheme();
   await translationStore.loadTranslators();
 
   // 启动时检查更新
@@ -39,6 +42,7 @@ onBeforeMount(async () => {
     <div class="app-content">
       <router-view/>
     </div>
+    <ToastContainer/>
   </div>
 </template>
 

frontend/src/common/constant/config.ts

@@ -1,6 +1,7 @@
 import {
     AppConfig,
     AuthMethod,
+    KeyBindingType,
     LanguageType,
     SystemThemeType,
     TabType,
@@ -23,6 +24,7 @@ export const CONFIG_KEY_MAP = {
     enableWindowSnap: 'general.enableWindowSnap',
     enableLoadingAnimation: 'general.enableLoadingAnimation',
     enableTabs: 'general.enableTabs',
+    enableMemoryMonitor: 'general.enableMemoryMonitor',
     // editing
     fontSize: 'editing.fontSize',
     fontFamily: 'editing.fontFamily',
@@ -31,6 +33,7 @@ export const CONFIG_KEY_MAP = {
     enableTabIndent: 'editing.enableTabIndent',
     tabSize: 'editing.tabSize',
     tabType: 'editing.tabType',
+    keymapMode: 'editing.keymapMode',
     autoSaveDelay: 'editing.autoSaveDelay',
     // appearance
     language: 'appearance.language',
@@ -86,6 +89,7 @@ export const DEFAULT_CONFIG: AppConfig = {
         enableWindowSnap: true,
         enableLoadingAnimation: true,
         enableTabs: false,
+        enableMemoryMonitor: true,
     },
     editing: {
         fontSize: CONFIG_LIMITS.fontSize.default,
@@ -95,11 +99,12 @@ export const DEFAULT_CONFIG: AppConfig = {
         enableTabIndent: true,
         tabSize: CONFIG_LIMITS.tabSize.default,
         tabType: CONFIG_LIMITS.tabType.default,
+        keymapMode: KeyBindingType.Standard,
         autoSaveDelay: 5000
     },
     appearance: {
         language: LanguageType.LangZhCN,
-        systemTheme: SystemThemeType.SystemThemeAuto,
+        systemTheme: SystemThemeType.SystemThemeDark,
         currentTheme: 'default-dark'
     },
     updates: {

frontend/src/common/constant/editor.ts

@@ -5,7 +5,7 @@
 // 编辑器实例管理
 export const EDITOR_CONFIG = {
   /** 最多缓存的编辑器实例数量 */
-  MAX_INSTANCES: 5,
+  MAX_INSTANCES: 10,
   /** 语法树缓存过期时间（毫秒） */
   SYNTAX_TREE_CACHE_TIMEOUT: 30000,
   /** 加载状态延迟时间（毫秒） */

frontend/src/common/constant/translation.ts

@@ -1,7 +0,0 @@
-/**
- * 翻译图标SVG
- */
-export const TRANSLATION_ICON_SVG = `
-<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-  <path d="M599.68 485.056h-8l30.592 164.672c20.352-7.04 38.72-17.344 54.912-31.104a271.36 271.36 0 0 1-40.704-64.64l32.256-4.032c8.896 17.664 19.072 33.28 30.592 46.72 23.872-27.968 42.24-65.152 55.04-111.744l-154.688 0.128z m121.92 133.76c18.368 15.36 39.36 26.56 62.848 33.472l14.784 4.416-8.64 30.336-14.72-4.352a205.696 205.696 0 0 1-76.48-41.728c-20.672 17.92-44.928 31.552-71.232 40.064l20.736 110.912H519.424l-9.984 72.512h385.152c18.112 0 32.704-14.144 32.704-31.616V295.424a32.128 32.128 0 0 0-32.704-31.552H550.528l35.2 189.696h79.424v-31.552h61.44v31.552h102.4v31.616h-42.688c-14.272 55.488-35.712 100.096-64.64 133.568zM479.36 791.68H193.472c-36.224 0-65.472-28.288-65.472-63.168V191.168C128 156.16 157.312 128 193.472 128h327.68l20.544 104.32h352.832c36.224 0 65.472 28.224 65.472 63.104v537.408c0 34.944-29.312 63.168-65.472 63.168H468.608l10.688-104.32zM337.472 548.352v-33.28H272.768v-48.896h60.16V433.28h-60.16v-41.728h64.704v-32.896h-102.4v189.632h102.4z m158.272 0V453.76c0-17.216-4.032-30.272-12.16-39.488-8.192-9.152-20.288-13.696-36.032-13.696a55.04 55.04 0 0 0-24.768 5.376 39.04 39.04 0 0 0-17.088 15.936h-1.984l-5.056-18.56h-28.352V548.48h37.12V480c0-17.088 2.304-29.376 6.912-36.736 4.608-7.424 12.16-11.072 22.528-11.072 7.616 0 13.248 2.56 16.64 7.872 3.52 5.248 5.312 13.056 5.312 23.488v84.736h36.928z" fill="currentColor"></path>
-</svg>`;

frontend/src/common/utils/asyncManager.ts

@@ -1,265 +0,0 @@
-/**
- * 操作信息接口
- */
-interface OperationInfo {
-  controller: AbortController;
-  createdAt: number;
-  timeout?: number;
-  timeoutId?: NodeJS.Timeout;
-}
-
-/**
- * 异步操作管理器
- * 用于管理异步操作的竞态条件，确保只有最新的操作有效
- * 支持操作超时和自动清理机制
- * 
- * @template T 操作上下文的类型
- */
-export class AsyncManager<T = any> {
-  private operationSequence = 0;
-  private pendingOperations = new Map<number, OperationInfo>();
-  private currentContext: T | null = null;
-  private defaultTimeout: number;
-
-  /**
-   * 创建异步操作管理器
-   * 
-   * @param defaultTimeout 默认超时时间（毫秒），0表示不设置超时
-   */
-  constructor(defaultTimeout: number = 0) {
-    this.defaultTimeout = defaultTimeout;
-  }
-
-  /**
-   * 生成新的操作ID
-   * 
-   * @returns 新的操作ID
-   */
-  getNextOperationId(): number {
-    return ++this.operationSequence;
-  }
-
-  /**
-   * 开始新的操作
-   * 
-   * @param context 操作上下文
-   * @param options 操作选项
-   * @returns 操作ID和AbortController
-   */
-  startOperation(
-    context: T, 
-    options?: { 
-      excludeId?: number; 
-      timeout?: number; 
-    }
-  ): { operationId: number; abortController: AbortController } {
-    const operationId = this.getNextOperationId();
-    const abortController = new AbortController();
-    const timeout = options?.timeout ?? this.defaultTimeout;
-
-    // 取消之前的操作
-    this.cancelPreviousOperations(options?.excludeId);
-
-    // 创建操作信息
-    const operationInfo: OperationInfo = {
-      controller: abortController,
-      createdAt: Date.now(),
-      timeout: timeout > 0 ? timeout : undefined
-    };
-
-    // 设置超时处理
-    if (timeout > 0) {
-      operationInfo.timeoutId = setTimeout(() => {
-        this.cancelOperation(operationId, 'timeout');
-      }, timeout);
-    }
-
-    // 设置当前上下文和操作
-    this.currentContext = context;
-    this.pendingOperations.set(operationId, operationInfo);
-
-    return { operationId, abortController };
-  }
-
-  /**
-   * 检查操作是否仍然有效
-   * 
-   * @param operationId 操作ID
-   * @param context 操作上下文
-   * @returns 操作是否有效
-   */
-  isOperationValid(operationId: number, context?: T): boolean {
-    const operationInfo = this.pendingOperations.get(operationId);
-    const contextValid = context === undefined || this.currentContext === context;
-    
-    return (
-      operationInfo !== undefined &&
-      !operationInfo.controller.signal.aborted &&
-      contextValid
-    );
-  }
-
-  /**
-   * 完成操作
-   * 
-   * @param operationId 操作ID
-   */
-  completeOperation(operationId: number): void {
-    const operationInfo = this.pendingOperations.get(operationId);
-    if (operationInfo) {
-      // 清理超时定时器
-      if (operationInfo.timeoutId) {
-        clearTimeout(operationInfo.timeoutId);
-      }
-      this.pendingOperations.delete(operationId);
-    }
-  }
-
-  /**
-   * 取消指定操作
-   * 
-   * @param operationId 操作ID
-   * @param reason 取消原因
-   */
-  cancelOperation(operationId: number, reason?: string): void {
-    const operationInfo = this.pendingOperations.get(operationId);
-    if (operationInfo) {
-      // 清理超时定时器
-      if (operationInfo.timeoutId) {
-        clearTimeout(operationInfo.timeoutId);
-      }
-      // 取消操作
-      operationInfo.controller.abort(reason);
-      this.pendingOperations.delete(operationId);
-    }
-  }
-
-  /**
-   * 取消之前的操作（修复并发bug）
-   * 
-   * @param excludeId 要排除的操作ID（不取消该操作）
-   */
-  cancelPreviousOperations(excludeId?: number): void {
-    // 创建要取消的操作ID数组，避免在遍历时修改Map
-    const operationIdsToCancel: number[] = [];
-    
-    for (const [operationId] of this.pendingOperations) {
-      if (excludeId === undefined || operationId !== excludeId) {
-        operationIdsToCancel.push(operationId);
-      }
-    }
-    
-    // 批量取消操作
-    for (const operationId of operationIdsToCancel) {
-      this.cancelOperation(operationId, 'superseded');
-    }
-  }
-
-  /**
-   * 取消所有操作
-   */
-  cancelAllOperations(): void {
-    // 创建要取消的操作ID数组，避免在遍历时修改Map
-    const operationIdsToCancel = Array.from(this.pendingOperations.keys());
-    
-    // 批量取消操作
-    for (const operationId of operationIdsToCancel) {
-      this.cancelOperation(operationId, 'cancelled');
-    }
-    this.currentContext = null;
-  }
-
-  /**
-   * 清理过期操作（手动清理超时操作）
-   * 
-   * @param maxAge 最大存活时间（毫秒）
-   * @returns 清理的操作数量
-   */
-  cleanupExpiredOperations(maxAge: number): number {
-    const now = Date.now();
-    const expiredOperationIds: number[] = [];
-    
-    for (const [operationId, operationInfo] of this.pendingOperations) {
-      if (now - operationInfo.createdAt > maxAge) {
-        expiredOperationIds.push(operationId);
-      }
-    }
-    
-    // 批量取消过期操作
-    for (const operationId of expiredOperationIds) {
-      this.cancelOperation(operationId, 'expired');
-    }
-    
-    return expiredOperationIds.length;
-  }
-
-  /**
-   * 获取操作统计信息
-   * 
-   * @returns 操作统计信息
-   */
-  getOperationStats(): {
-    total: number;
-    withTimeout: number;
-    averageAge: number;
-    oldestAge: number;
-  } {
-    const now = Date.now();
-    let withTimeout = 0;
-    let totalAge = 0;
-    let oldestAge = 0;
-    
-    for (const operationInfo of this.pendingOperations.values()) {
-      const age = now - operationInfo.createdAt;
-      totalAge += age;
-      oldestAge = Math.max(oldestAge, age);
-      
-      if (operationInfo.timeout) {
-        withTimeout++;
-      }
-    }
-    
-    return {
-      total: this.pendingOperations.size,
-      withTimeout,
-      averageAge: this.pendingOperations.size > 0 ? totalAge / this.pendingOperations.size : 0,
-      oldestAge
-    };
-  }
-
-  /**
-   * 获取当前上下文
-   * 
-   * @returns 当前上下文
-   */
-  getCurrentContext(): T | null {
-    return this.currentContext;
-  }
-
-  /**
-   * 设置当前上下文
-   * 
-   * @param context 新的上下文
-   */
-  setCurrentContext(context: T | null): void {
-    this.currentContext = context;
-  }
-
-  /**
-   * 获取待处理操作数量
-   * 
-   * @returns 待处理操作数量
-   */
-  get pendingCount(): number {
-    return this.pendingOperations.size;
-  }
-
-  /**
-   * 检查是否有待处理的操作
-   * 
-   * @returns 是否有待处理的操作
-   */
-  hasPendingOperations(): boolean {
-    return this.pendingOperations.size > 0;
-  }
-}

frontend/src/common/utils/configUtils.ts

@@ -1,42 +1,13 @@
-import { LanguageType } from '@/../bindings/voidraft/internal/models/models';
-import type { SupportedLocaleType } from '@/common/constant/locales';
-
 /**
  * 配置工具类
  */
 export class ConfigUtils {
-  /**
-   * 将后端语言类型转换为前端语言代码
-   */
-  static backendLanguageToFrontend(language: LanguageType): SupportedLocaleType {
-    return language === LanguageType.LangZhCN ? 'zh-CN' : 'en-US';
-  }
 
-  /**
-   * 将前端语言代码转换为后端语言类型
-   */
-  static frontendLanguageToBackend(locale: SupportedLocaleType): LanguageType {
-    return locale === 'zh-CN' ? LanguageType.LangZhCN : LanguageType.LangEnUS;
-  }
+    /**
+     * 验证数值是否在指定范围内
+     */
+    static clamp(value: number, min: number, max: number): number {
+        return Math.max(min, Math.min(max, value));
+    }
 
-  /**
-   * 验证数值是否在指定范围内
-   */
-  static clamp(value: number, min: number, max: number): number {
-    return Math.max(min, Math.min(max, value));
-  }
-
-  /**
-   * 验证配置值是否有效
-   */
-  static isValidConfigValue<T>(value: T, validValues: readonly T[]): boolean {
-    return validValues.includes(value);
-  }
-
-  /**
-   * 获取配置的默认值
-   */
-  static getDefaultValue<T>(key: string, defaults: Record<string, { default: T }>): T {
-    return defaults[key]?.default;
-  }
 } 

frontend/src/common/utils/domDiff.test.ts

@@ -1,329 +0,0 @@
-/**
- * DOM Diff 算法单元测试
- */
-import { describe, test, expect, beforeEach, afterEach } from 'vitest';
-import { morphNode, morphHTML, morphWithKeys } from './domDiff';
-
-describe('DOM Diff Algorithm', () => {
-  let container: HTMLElement;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  describe('morphNode - 基础功能', () => {
-    test('应该更新文本节点内容', () => {
-      const fromNode = document.createTextNode('Hello');
-      const toNode = document.createTextNode('World');
-      container.appendChild(fromNode);
-
-      morphNode(fromNode, toNode);
-
-      expect(fromNode.nodeValue).toBe('World');
-    });
-
-    test('应该保持相同的文本节点不变', () => {
-      const fromNode = document.createTextNode('Hello');
-      const toNode = document.createTextNode('Hello');
-      container.appendChild(fromNode);
-
-      const originalNode = fromNode;
-      morphNode(fromNode, toNode);
-
-      expect(fromNode).toBe(originalNode);
-      expect(fromNode.nodeValue).toBe('Hello');
-    });
-
-    test('应该替换不同类型的节点', () => {
-      const fromNode = document.createElement('span');
-      fromNode.textContent = 'Hello';
-      const toNode = document.createElement('div');
-      toNode.textContent = 'World';
-      container.appendChild(fromNode);
-
-      morphNode(fromNode, toNode);
-
-      expect(container.firstChild?.nodeName).toBe('DIV');
-      expect(container.firstChild?.textContent).toBe('World');
-    });
-  });
-
-  describe('morphNode - 属性更新', () => {
-    test('应该添加新属性', () => {
-      const fromEl = document.createElement('div');
-      const toEl = document.createElement('div');
-      toEl.setAttribute('class', 'test');
-      toEl.setAttribute('id', 'myid');
-      container.appendChild(fromEl);
-
-      morphNode(fromEl, toEl);
-
-      expect(fromEl.getAttribute('class')).toBe('test');
-      expect(fromEl.getAttribute('id')).toBe('myid');
-    });
-
-    test('应该更新已存在的属性', () => {
-      const fromEl = document.createElement('div');
-      fromEl.setAttribute('class', 'old');
-      const toEl = document.createElement('div');
-      toEl.setAttribute('class', 'new');
-      container.appendChild(fromEl);
-
-      morphNode(fromEl, toEl);
-
-      expect(fromEl.getAttribute('class')).toBe('new');
-    });
-
-    test('应该删除不存在的属性', () => {
-      const fromEl = document.createElement('div');
-      fromEl.setAttribute('class', 'test');
-      fromEl.setAttribute('id', 'myid');
-      const toEl = document.createElement('div');
-      toEl.setAttribute('class', 'test');
-      container.appendChild(fromEl);
-
-      morphNode(fromEl, toEl);
-
-      expect(fromEl.getAttribute('class')).toBe('test');
-      expect(fromEl.hasAttribute('id')).toBe(false);
-    });
-  });
-
-  describe('morphNode - 子节点更新', () => {
-    test('应该添加新子节点', () => {
-      const fromEl = document.createElement('ul');
-      fromEl.innerHTML = '<li>1</li><li>2</li>';
-      const toEl = document.createElement('ul');
-      toEl.innerHTML = '<li>1</li><li>2</li><li>3</li>';
-      container.appendChild(fromEl);
-
-      morphNode(fromEl, toEl);
-
-      expect(fromEl.children.length).toBe(3);
-      expect(fromEl.children[2].textContent).toBe('3');
-    });
-
-    test('应该删除多余的子节点', () => {
-      const fromEl = document.createElement('ul');
-      fromEl.innerHTML = '<li>1</li><li>2</li><li>3</li>';
-      const toEl = document.createElement('ul');
-      toEl.innerHTML = '<li>1</li><li>2</li>';
-      container.appendChild(fromEl);
-
-      morphNode(fromEl, toEl);
-
-      expect(fromEl.children.length).toBe(2);
-      expect(fromEl.textContent).toBe('12');
-    });
-
-    test('应该更新子节点内容', () => {
-      const fromEl = document.createElement('div');
-      fromEl.innerHTML = '<p>Old</p>';
-      const toEl = document.createElement('div');
-      toEl.innerHTML = '<p>New</p>';
-      container.appendChild(fromEl);
-
-      const originalP = fromEl.querySelector('p');
-      morphNode(fromEl, toEl);
-
-      // 应该保持同一个 p 元素，只更新内容
-      expect(fromEl.querySelector('p')).toBe(originalP);
-      expect(fromEl.querySelector('p')?.textContent).toBe('New');
-    });
-  });
-
-  describe('morphHTML - HTML 字符串更新', () => {
-    test('应该从 HTML 字符串更新元素', () => {
-      const element = document.createElement('div');
-      element.innerHTML = '<p>Old</p>';
-      container.appendChild(element);
-
-      morphHTML(element, '<p>New</p>');
-
-      expect(element.innerHTML).toBe('<p>New</p>');
-    });
-
-    test('应该处理复杂的 HTML 结构', () => {
-      const element = document.createElement('div');
-      element.innerHTML = '<h1>Title</h1><p>Paragraph</p>';
-      container.appendChild(element);
-
-      morphHTML(element, '<h1>New Title</h1><p>New Paragraph</p><span>Extra</span>');
-
-      expect(element.children.length).toBe(3);
-      expect(element.querySelector('h1')?.textContent).toBe('New Title');
-      expect(element.querySelector('p')?.textContent).toBe('New Paragraph');
-      expect(element.querySelector('span')?.textContent).toBe('Extra');
-    });
-  });
-
-  describe('morphWithKeys - 基于 key 的智能 diff', () => {
-    test('应该保持相同 key 的节点', () => {
-      const fromEl = document.createElement('ul');
-      fromEl.innerHTML = `
-        <li data-key="a">A</li>
-        <li data-key="b">B</li>
-        <li data-key="c">C</li>
-      `;
-      const toEl = document.createElement('ul');
-      toEl.innerHTML = `
-        <li data-key="a">A Updated</li>
-        <li data-key="b">B</li>
-        <li data-key="c">C</li>
-      `;
-      container.appendChild(fromEl);
-
-      const originalA = fromEl.querySelector('[data-key="a"]');
-      morphWithKeys(fromEl, toEl);
-
-      expect(fromEl.querySelector('[data-key="a"]')).toBe(originalA);
-      expect(originalA?.textContent).toBe('A Updated');
-    });
-
-    test('应该重新排序节点', () => {
-      const fromEl = document.createElement('ul');
-      fromEl.innerHTML = `
-        <li data-key="a">A</li>
-        <li data-key="b">B</li>
-        <li data-key="c">C</li>
-      `;
-      const toEl = document.createElement('ul');
-      toEl.innerHTML = `
-        <li data-key="c">C</li>
-        <li data-key="a">A</li>
-        <li data-key="b">B</li>
-      `;
-      container.appendChild(fromEl);
-
-      morphWithKeys(fromEl, toEl);
-
-      const keys = Array.from(fromEl.children).map(child => child.getAttribute('data-key'));
-      expect(keys).toEqual(['c', 'a', 'b']);
-    });
-
-    test('应该添加新的 key 节点', () => {
-      const fromEl = document.createElement('ul');
-      fromEl.innerHTML = `
-        <li data-key="a">A</li>
-        <li data-key="b">B</li>
-      `;
-      const toEl = document.createElement('ul');
-      toEl.innerHTML = `
-        <li data-key="a">A</li>
-        <li data-key="b">B</li>
-        <li data-key="c">C</li>
-      `;
-      container.appendChild(fromEl);
-
-      morphWithKeys(fromEl, toEl);
-
-      expect(fromEl.children.length).toBe(3);
-      expect(fromEl.querySelector('[data-key="c"]')?.textContent).toBe('C');
-    });
-
-    test('应该删除不存在的 key 节点', () => {
-      const fromEl = document.createElement('ul');
-      fromEl.innerHTML = `
-        <li data-key="a">A</li>
-        <li data-key="b">B</li>
-        <li data-key="c">C</li>
-      `;
-      const toEl = document.createElement('ul');
-      toEl.innerHTML = `
-        <li data-key="a">A</li>
-        <li data-key="c">C</li>
-      `;
-      container.appendChild(fromEl);
-
-      morphWithKeys(fromEl, toEl);
-
-      expect(fromEl.children.length).toBe(2);
-      expect(fromEl.querySelector('[data-key="b"]')).toBeNull();
-    });
-  });
-
-  describe('性能测试', () => {
-    test('应该高效处理大量节点', () => {
-      const fromEl = document.createElement('ul');
-      for (let i = 0; i < 1000; i++) {
-        const li = document.createElement('li');
-        li.textContent = `Item ${i}`;
-        fromEl.appendChild(li);
-      }
-
-      const toEl = document.createElement('ul');
-      for (let i = 0; i < 1000; i++) {
-        const li = document.createElement('li');
-        li.textContent = `Updated Item ${i}`;
-        toEl.appendChild(li);
-      }
-
-      container.appendChild(fromEl);
-
-      const startTime = performance.now();
-      morphNode(fromEl, toEl);
-      const endTime = performance.now();
-
-      expect(endTime - startTime).toBeLessThan(100); // 应该在 100ms 内完成
-      expect(fromEl.children.length).toBe(1000);
-      expect(fromEl.children[0].textContent).toBe('Updated Item 0');
-    });
-  });
-
-  describe('边界情况', () => {
-    test('应该处理空节点', () => {
-      const fromEl = document.createElement('div');
-      const toEl = document.createElement('div');
-      container.appendChild(fromEl);
-
-      expect(() => morphNode(fromEl, toEl)).not.toThrow();
-    });
-
-    test('应该处理只有文本的节点', () => {
-      const fromEl = document.createElement('div');
-      fromEl.textContent = 'Hello';
-      const toEl = document.createElement('div');
-      toEl.textContent = 'World';
-      container.appendChild(fromEl);
-
-      morphNode(fromEl, toEl);
-
-      expect(fromEl.textContent).toBe('World');
-    });
-
-    test('应该处理嵌套的复杂结构', () => {
-      const fromEl = document.createElement('div');
-      fromEl.innerHTML = `
-        <div class="outer">
-          <div class="inner">
-            <span>Text</span>
-          </div>
-        </div>
-      `;
-
-      const toEl = document.createElement('div');
-      toEl.innerHTML = `
-        <div class="outer modified">
-          <div class="inner">
-            <span>Updated Text</span>
-            <strong>New</strong>
-          </div>
-        </div>
-      `;
-
-      container.appendChild(fromEl);
-
-      morphNode(fromEl, toEl);
-
-      expect(fromEl.querySelector('.outer')?.classList.contains('modified')).toBe(true);
-      expect(fromEl.querySelector('span')?.textContent).toBe('Updated Text');
-      expect(fromEl.querySelector('strong')?.textContent).toBe('New');
-    });
-  });
-});
-

frontend/src/common/utils/domDiff.ts

@@ -1,180 +0,0 @@
-/**
- * 轻量级 DOM Diff 算法实现
- * 基于 morphdom 思路，只更新变化的节点，保持未变化的节点不动
- */
-
-/**
- * 比较并更新两个 DOM 节点
- * @param fromNode 原节点
- * @param toNode 目标节点
- */
-export function morphNode(fromNode: Node, toNode: Node): void {
-  // 节点类型不同，直接替换
-  if (fromNode.nodeType !== toNode.nodeType || fromNode.nodeName !== toNode.nodeName) {
-    fromNode.parentNode?.replaceChild(toNode.cloneNode(true), fromNode);
-    return;
-  }
-
-  // 文本节点：比较内容
-  if (fromNode.nodeType === Node.TEXT_NODE) {
-    if (fromNode.nodeValue !== toNode.nodeValue) {
-      fromNode.nodeValue = toNode.nodeValue;
-    }
-    return;
-  }
-
-  // 元素节点：更新属性和子节点
-  if (fromNode.nodeType === Node.ELEMENT_NODE) {
-    const fromEl = fromNode as Element;
-    const toEl = toNode as Element;
-
-    // 更新属性
-    morphAttributes(fromEl, toEl);
-
-    // 更新子节点
-    morphChildren(fromEl, toEl);
-  }
-}
-
-/**
- * 更新元素属性
- */
-function morphAttributes(fromEl: Element, toEl: Element): void {
-  // 移除旧属性
-  const fromAttrs = fromEl.attributes;
-  for (let i = fromAttrs.length - 1; i >= 0; i--) {
-    const attr = fromAttrs[i];
-    if (!toEl.hasAttribute(attr.name)) {
-      fromEl.removeAttribute(attr.name);
-    }
-  }
-
-  // 添加/更新新属性
-  const toAttrs = toEl.attributes;
-  for (let i = 0; i < toAttrs.length; i++) {
-    const attr = toAttrs[i];
-    const fromValue = fromEl.getAttribute(attr.name);
-    if (fromValue !== attr.value) {
-      fromEl.setAttribute(attr.name, attr.value);
-    }
-  }
-}
-
-/**
- * 更新子节点（核心 diff 算法）
- */
-function morphChildren(fromEl: Element, toEl: Element): void {
-  const fromChildren = Array.from(fromEl.childNodes);
-  const toChildren = Array.from(toEl.childNodes);
-
-  const fromLen = fromChildren.length;
-  const toLen = toChildren.length;
-  const minLen = Math.min(fromLen, toLen);
-
-  // 1. 更新公共部分
-  for (let i = 0; i < minLen; i++) {
-    morphNode(fromChildren[i], toChildren[i]);
-  }
-
-  // 2. 移除多余的旧节点
-  if (fromLen > toLen) {
-    for (let i = fromLen - 1; i >= toLen; i--) {
-      fromEl.removeChild(fromChildren[i]);
-    }
-  }
-
-  // 3. 添加新节点
-  if (toLen > fromLen) {
-    for (let i = fromLen; i < toLen; i++) {
-      fromEl.appendChild(toChildren[i].cloneNode(true));
-    }
-  }
-}
-
-/**
- * 优化版：使用 key 进行更智能的 diff（可选）
- * 适用于有 data-key 属性的元素
- */
-export function morphWithKeys(fromEl: Element, toEl: Element): void {
-  const toChildren = Array.from(toEl.children) as Element[];
-
-  // 构建 from 的 key 映射
-  const fromKeyMap = new Map<string, Element>();
-  Array.from(fromEl.children).forEach((child) => {
-    const key = child.getAttribute('data-key');
-    if (key) {
-      fromKeyMap.set(key, child);
-    }
-  });
-
-  const processedKeys = new Set<string>();
-
-  // 按照 toChildren 的顺序处理
-  toChildren.forEach((toChild, toIndex) => {
-    const key = toChild.getAttribute('data-key');
-    if (!key) return;
-
-    processedKeys.add(key);
-    const fromChild = fromKeyMap.get(key);
-
-    if (fromChild) {
-      // 找到对应节点，更新内容
-      morphNode(fromChild, toChild);
-
-      // 确保节点在正确的位置
-      const currentNode = fromEl.children[toIndex];
-      if (currentNode !== fromChild) {
-        // 将 fromChild 移动到正确位置
-        fromEl.insertBefore(fromChild, currentNode);
-      }
-    } else {
-      // 新节点，插入到正确位置
-      const currentNode = fromEl.children[toIndex];
-      fromEl.insertBefore(toChild.cloneNode(true), currentNode || null);
-    }
-  });
-
-  // 删除不再存在的节点（从后往前删除，避免索引问题）
-  const childrenToRemove: Element[] = [];
-  fromKeyMap.forEach((child, key) => {
-    if (!processedKeys.has(key)) {
-      childrenToRemove.push(child);
-    }
-  });
-  childrenToRemove.forEach(child => {
-    fromEl.removeChild(child);
-  });
-}
-
-/**
- * 高级 API：直接从 HTML 字符串更新元素
- */
-export function morphHTML(element: Element, htmlString: string): void {
-  const tempContainer = document.createElement('div');
-  tempContainer.innerHTML = htmlString;
-
-  // 更新元素的子节点列表
-  morphChildren(element, tempContainer);
-}
-
-/**
- * 批量更新（使用 DocumentFragment）
- */
-export function batchMorph(element: Element, htmlString: string): void {
-  const tempContainer = document.createElement('div');
-  tempContainer.innerHTML = htmlString;
-
-  const fragment = document.createDocumentFragment();
-  Array.from(tempContainer.childNodes).forEach(node => {
-    fragment.appendChild(node);
-  });
-
-  // 清空原内容
-  while (element.firstChild) {
-    element.removeChild(element.firstChild);
-  }
-
-  // 批量插入
-  element.appendChild(fragment);
-}
-

frontend/src/common/utils/formatter.ts

@@ -0,0 +1,65 @@
+/**
+ * Formatter utility functions
+ */
+
+export interface DateTimeFormatOptions {
+  locale?: string;
+  includeTime?: boolean;
+  hour12?: boolean;
+}
+
+/**
+ * Format date time string to localized format
+ * @param dateString - ISO date string or null
+ * @param options - Formatting options
+ * @returns Formatted date string or error message
+ */
+export const formatDateTime = (
+  dateString: string | null,
+  options: DateTimeFormatOptions = {}
+): string => {
+  const {
+    locale = 'en-US',
+    includeTime = true,
+    hour12 = false
+  } = options;
+
+  if (!dateString) {
+    return 'Unknown time';
+  }
+
+  try {
+    const date = new Date(dateString);
+    
+    if (isNaN(date.getTime())) {
+      return 'Invalid date';
+    }
+
+    const formatOptions: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    };
+
+    if (includeTime) {
+      formatOptions.hour = '2-digit';
+      formatOptions.minute = '2-digit';
+      formatOptions.hour12 = hour12;
+    }
+
+    return date.toLocaleString(locale, formatOptions);
+  } catch {
+    return 'Time error';
+  }
+};
+
+/**
+ * Truncate string with ellipsis
+ * @param str - String to truncate
+ * @param maxLength - Maximum length before truncation
+ * @returns Truncated string with ellipsis if needed
+ */
+export const truncateString = (str: string, maxLength: number): string => {
+  if (!str) return '';
+  return str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
+};

frontend/src/common/utils/validation.ts

@@ -0,0 +1,42 @@
+/**
+ * Validation utility functions
+ */
+
+/**
+ * Validate document title
+ * @param title - The title to validate
+ * @param maxLength - Maximum allowed length (default: 50)
+ * @returns Error message if invalid, null if valid
+ */
+export const validateDocumentTitle = (title: string, maxLength: number = 50): string | null => {
+  const trimmed = title.trim();
+  
+  if (!trimmed) {
+    return 'Document name cannot be empty';
+  }
+  
+  if (trimmed.length > maxLength) {
+    return `Document name cannot exceed ${maxLength} characters`;
+  }
+  
+  return null;
+};
+
+/**
+ * Check if a string is empty or whitespace only
+ * @param value - The string to check
+ * @returns true if empty or whitespace only
+ */
+export const isEmpty = (value: string | null | undefined): boolean => {
+  return !value || value.trim().length === 0;
+};
+
+/**
+ * Check if a string exceeds max length
+ * @param value - The string to check
+ * @param maxLength - Maximum allowed length
+ * @returns true if exceeds max length
+ */
+export const exceedsMaxLength = (value: string, maxLength: number): boolean => {
+  return value.trim().length > maxLength;
+};

frontend/src/components/accordion/AccordionContainer.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+
+interface Props {
+  /**
+   * 是否允许多个面板同时展开
+   * @default false - 单选模式（手风琴效果）
+   */
+  multiple?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  multiple: false,
+});
+
+// 当前展开的项（单选模式）或展开项列表（多选模式）
+const expandedItems = ref<Set<string | number>>(new Set());
+
+/**
+ * 切换展开状态
+ */
+const toggleItem = (id: string | number) => {
+  if (props.multiple) {
+    // 多选模式：切换单个项
+    if (expandedItems.value.has(id)) {
+      expandedItems.value.delete(id);
+    } else {
+      expandedItems.value.add(id);
+    }
+  } else {
+    // 单选模式：只能展开一个
+    if (expandedItems.value.has(id)) {
+      expandedItems.value.clear();
+    } else {
+      expandedItems.value.clear();
+      expandedItems.value.add(id);
+    }
+  }
+  // 触发响应式更新
+  expandedItems.value = new Set(expandedItems.value);
+};
+
+/**
+ * 检查项是否展开
+ */
+const isExpanded = (id: string | number): boolean => {
+  return expandedItems.value.has(id);
+};
+
+/**
+ * 展开指定项
+ */
+const expand = (id: string | number) => {
+  if (!props.multiple) {
+    expandedItems.value.clear();
+  }
+  expandedItems.value.add(id);
+  expandedItems.value = new Set(expandedItems.value);
+};
+
+/**
+ * 收起指定项
+ */
+const collapse = (id: string | number) => {
+  expandedItems.value.delete(id);
+  expandedItems.value = new Set(expandedItems.value);
+};
+
+/**
+ * 收起所有项
+ */
+const collapseAll = () => {
+  expandedItems.value.clear();
+  expandedItems.value = new Set(expandedItems.value);
+};
+
+// 通过 provide 向子组件提供状态和方法
+provide('accordion', {
+  toggleItem,
+  isExpanded,
+  expand,
+  collapse,
+});
+
+// 暴露方法供父组件使用
+defineExpose({
+  expand,
+  collapse,
+  collapseAll,
+});
+</script>
+
+<template>
+  <div class="accordion-container">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.accordion-container {
+  display: flex;
+  flex-direction: column;
+}
+</style>
+

frontend/src/components/accordion/AccordionItem.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { inject, computed, ref } from 'vue';
+
+interface Props {
+  /**
+   * 唯一标识符
+   */
+  id: string | number;
+  /**
+   * 标题
+   */
+  title?: string;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const accordion = inject<{
+  toggleItem: (id: string | number) => void;
+  isExpanded: (id: string | number) => boolean;
+}>('accordion');
+
+if (!accordion) {
+  throw new Error('AccordionItem must be used within AccordionContainer');
+}
+
+const isExpanded = computed(() => accordion.isExpanded(props.id));
+
+const toggle = () => {
+  if (!props.disabled) {
+    accordion.toggleItem(props.id);
+  }
+};
+
+// 内容容器的引用，用于计算高度
+const contentRef = ref<HTMLElement>();
+const contentHeight = computed(() => {
+  if (!contentRef.value) return '0px';
+  return isExpanded.value ? `${contentRef.value.scrollHeight}px` : '0px';
+});
+</script>
+
+<template>
+  <div 
+    class="accordion-item"
+    :class="{ 
+      'is-expanded': isExpanded, 
+      'is-disabled': disabled 
+    }"
+  >
+    <!-- 标题栏 -->
+    <div 
+      class="accordion-header"
+      @click="toggle"
+      :aria-expanded="isExpanded"
+      :aria-disabled="disabled"
+      role="button"
+      tabindex="0"
+      @keydown.enter="toggle"
+      @keydown.space.prevent="toggle"
+    >
+      <div class="accordion-title">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <div class="accordion-icon">
+        <svg 
+          width="12" 
+          height="12" 
+          viewBox="0 0 12 12" 
+          fill="none" 
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path 
+            d="M3 4.5L6 7.5L9 4.5" 
+            stroke="currentColor" 
+            stroke-width="1.5" 
+            stroke-linecap="round" 
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <!-- 内容区域 -->
+    <div 
+      class="accordion-content-wrapper"
+      :style="{ height: contentHeight }"
+    >
+      <div 
+        ref="contentRef"
+        class="accordion-content"
+      >
+        <div class="accordion-content-inner">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.accordion-item {
+  border-bottom: 1px solid var(--settings-border);
+  transition: background-color 0.2s ease;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.is-expanded {
+    background-color: var(--settings-hover);
+  }
+
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .accordion-header {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease;
+
+  &:hover:not([aria-disabled="true"]) {
+    background-color: var(--settings-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #4a9eff;
+    outline-offset: -2px;
+  }
+}
+
+.accordion-title {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--settings-text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.accordion-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--text-muted);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  .is-expanded & {
+    transform: rotate(180deg);
+  }
+}
+
+.accordion-content-wrapper {
+  overflow: hidden;
+  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.accordion-content {
+  // 用于测量实际内容高度
+}
+
+.accordion-content-inner {
+  padding: 0 16px 12px 16px;
+  color: var(--settings-text);
+  font-size: 13px;
+}
+</style>
+

frontend/src/components/accordion/index.ts

@@ -0,0 +1,3 @@
+export { default as AccordionContainer } from './AccordionContainer.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+

frontend/src/components/loading/LoadingScreen.vue

@@ -142,7 +142,7 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--voidraft-font-mono),serif;
+  font-family: Menlo, monospace,serif;
 }
 
 .loading-word {

frontend/src/components/tabs/TabContainer.vue

@@ -7,7 +7,7 @@
             v-for="tab in tabStore.tabs"
             :key="tab.documentId"
             :tab="tab"
-            :isActive="tab.documentId === tabStore.currentDocumentId"
+            :isActive="tab.documentId === documentStore.currentDocumentId"
             :canClose="tabStore.canCloseTab"
             @click="switchToTab"
             @close="closeTab"
@@ -35,8 +35,14 @@ import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import TabItem from './TabItem.vue';
 import TabContextMenu from './TabContextMenu.vue';
 import { useTabStore } from '@/stores/tabStore';
+import { useDocumentStore } from '@/stores/documentStore';
+import { useEditorStore } from '@/stores/editorStore';
+import { useEditorStateStore } from '@/stores/editorStateStore';
 
 const tabStore = useTabStore();
+const documentStore = useDocumentStore();
+const editorStore = useEditorStore();
+const editorStateStore = useEditorStateStore();
 
 // DOM 引用
 const tabBarRef = ref<HTMLElement>();
@@ -50,8 +56,36 @@ const contextMenuTargetId = ref<number | null>(null);
 
 
 // 标签页操作
-const switchToTab = (documentId: number) => {
-  tabStore.switchToTabAndDocument(documentId);
+const switchToTab = async (documentId: number) => {
+
+  // 保存旧文档的光标位置
+  const oldDocId = documentStore.currentDocumentId;
+  if (oldDocId) {
+    const cursorPos = editorStore.getCurrentCursorPosition();
+    editorStateStore.saveCursorPosition(oldDocId, cursorPos);
+  }
+
+  // 如果旧文档有未保存修改，保存它
+  if (oldDocId && editorStore.hasUnsavedChanges(oldDocId)) {
+    try {
+      const content = editorStore.getCurrentContent();
+      await documentStore.saveDocument(oldDocId, content);
+      editorStore.syncAfterSave(oldDocId);
+    } catch (error) {
+      console.error('save document error:', error);
+    }
+  }
+
+  // 切换文档
+  await tabStore.switchToTabAndDocument(documentId);
+  
+  // 切换到新编辑器
+  await editorStore.switchToEditor(documentId);
+  
+  // 更新标签页
+  if (documentStore.currentDocument && tabStore.isTabsEnabled) {
+    tabStore.addOrActivateTab(documentStore.currentDocument);
+  }
 };
 
 const closeTab = (documentId: number) => {
@@ -150,7 +184,7 @@ onUnmounted(() => {
 });
 
 // 监听当前活跃标签页的变化
-watch(() => tabStore.currentDocumentId, () => {
+watch(() => documentStore.currentDocumentId, () => {
   scrollToActiveTab();
 });
 

frontend/src/components/tabs/TabContextMenu.vue

@@ -1,35 +1,40 @@
 <template>
   <div
-    v-if="visible && canClose"
-    class="tab-context-menu"
-    :style="{
-      left: position.x + 'px',
-      top: position.y + 'px'
-    }"
-    @click.stop
+      v-if="visible && canClose"
+      v-click-outside="handleClose"
+      class="tab-context-menu"
+      :style="{
+        left: position.x + 'px',
+        top: position.y + 'px'
+      }"
+      @click.stop
   >
     <div v-if="canClose" class="menu-item" @click="handleMenuClick('close')">
-      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M18 6L6 18M6 6l12 12"/>
       </svg>
       <span class="menu-text">{{ t('tabs.contextMenu.closeTab') }}</span>
     </div>
     <div v-if="hasOtherTabs" class="menu-item" @click="handleMenuClick('closeOthers')">
-      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
         <path d="M9 9l6 6M15 9l-6 6"/>
       </svg>
       <span class="menu-text">{{ t('tabs.contextMenu.closeOthers') }}</span>
     </div>
     <div v-if="hasTabsToLeft" class="menu-item" @click="handleMenuClick('closeLeft')">
-      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M15 18l-6-6 6-6"/>
         <path d="M9 18l-6-6 6-6"/>
       </svg>
       <span class="menu-text">{{ t('tabs.contextMenu.closeLeft') }}</span>
     </div>
     <div v-if="hasTabsToRight" class="menu-item" @click="handleMenuClick('closeRight')">
-      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M9 18l6-6-6-6"/>
         <path d="M15 18l6-6-6-6"/>
       </svg>
@@ -39,9 +44,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useTabStore } from '@/stores/tabStore';
+import {computed, onMounted, onUnmounted} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {useTabStore} from '@/stores/tabStore';
 
 interface Props {
   visible: boolean;
@@ -54,7 +59,7 @@ const emit = defineEmits<{
   close: [];
 }>();
 
-const { t } = useI18n();
+const {t} = useI18n();
 const tabStore = useTabStore();
 
 // 计算属性
@@ -79,6 +84,9 @@ const hasTabsToLeft = computed(() => {
   return index > 0;
 });
 
+const handleClose = () => {
+  emit('close');
+};
 // 处理菜单项点击
 const handleMenuClick = (action: string) => {
   if (!props.targetDocumentId) return;
@@ -97,34 +105,9 @@ const handleMenuClick = (action: string) => {
       tabStore.closeTabsToRight(props.targetDocumentId);
       break;
   }
-  
-  emit('close');
+
+  handleClose();
 };
-
-// 处理外部点击
-const handleClickOutside = (_event: MouseEvent) => {
-  if (props.visible) {
-    emit('close');
-  }
-};
-
-// 处理ESC键
-const handleEscapeKey = (event: KeyboardEvent) => {
-  if (event.key === 'Escape' && props.visible) {
-    emit('close');
-  }
-};
-
-// 生命周期
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-  document.addEventListener('keydown', handleEscapeKey);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-  document.removeEventListener('keydown', handleEscapeKey);
-});
 </script>
 
 <style scoped lang="scss">
@@ -150,12 +133,12 @@ onUnmounted(() => {
   color: var(--text-primary);
   transition: all 0.15s ease;
   gap: 8px;
-  
+
   &:hover {
     background-color: var(--toolbar-button-hover);
     color: var(--text-primary);
   }
-  
+
   &:active {
     background-color: var(--border-color);
   }
@@ -167,7 +150,7 @@ onUnmounted(() => {
   height: 12px;
   color: var(--text-primary);
   transition: color 0.15s ease;
-  
+
   .menu-item:hover & {
     color: var(--text-primary);
   }
@@ -178,4 +161,4 @@ onUnmounted(() => {
   font-weight: 400;
   flex: 1;
 }
-</style>
+</style>

frontend/src/components/titlebar/LinuxTitleBar.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="linux-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
-    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
+    <div class="titlebar-content" @dblclick="handleToggleMaximize" @contextmenu.prevent>
       <div class="titlebar-icon">
         <img src="/appicon.png" alt="voidraft"/>
       </div>
-      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
+      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">
+        {{ titleText }}
+      </div>
       <!-- 标签页容器区域 -->
       <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
-        <TabContainer />
+        <TabContainer/>
       </div>
       <!-- 设置页面标题 -->
       <div v-if="isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
@@ -26,7 +28,7 @@
 
       <button
           class="titlebar-button maximize-button"
-          @click="toggleMaximize"
+          @click="handleToggleMaximize"
           :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
       >
         <svg width="16" height="16" viewBox="0 0 16 16" v-if="!isMaximized">
@@ -55,81 +57,43 @@
 import {computed, onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
 import {useRoute} from 'vue-router';
-import * as runtime from '@wailsio/runtime';
 import {useDocumentStore} from '@/stores/documentStore';
+import {useTabStore} from '@/stores/tabStore';
 import TabContainer from '@/components/tabs/TabContainer.vue';
-import {useTabStore} from "@/stores/tabStore";
+import {
+  minimizeWindow,
+  toggleMaximize,
+  closeWindow,
+  getMaximizedState,
+  generateTitleText,
+  generateFullTitleText
+} from './index';
 
-const tabStore = useTabStore();
 const {t} = useI18n();
 const route = useRoute();
-const isMaximized = ref(false);
+const tabStore = useTabStore();
 const documentStore = useDocumentStore();
 
-// 判断是否在设置页面
+const isMaximized = ref(false);
 const isInSettings = computed(() => route.path.startsWith('/settings'));
 
-// 计算标题文本
 const titleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  if (currentDoc) {
-    // 限制文档标题长度，避免标题栏换行
-    const maxTitleLength = 30;
-    const truncatedTitle = currentDoc.title.length > maxTitleLength 
-      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
-      : currentDoc.title;
-    return `voidraft - ${truncatedTitle}`;
-  }
-  return 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateTitleText(documentStore.currentDocument?.title);
 });
 
-// 计算完整标题文本（用于tooltip）
 const fullTitleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateFullTitleText(documentStore.currentDocument?.title);
 });
 
-const minimizeWindow = async () => {
-  try {
-    await runtime.Window.Minimise();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const toggleMaximize = async () => {
-  try {
-    await runtime.Window.ToggleMaximise();
-    await checkMaximizedState();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const closeWindow = async () => {
-  try {
-    await runtime.Window.Close();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const checkMaximizedState = async () => {
-  try {
-    isMaximized.value = await runtime.Window.IsMaximised();
-  } catch (error) {
-    console.error(error);
-  }
+const handleToggleMaximize = async () => {
+  await toggleMaximize();
+  isMaximized.value = await getMaximizedState();
 };
 
 onMounted(async () => {
-  await checkMaximizedState();
+  isMaximized.value = await getMaximizedState();
 });
 </script>
 
@@ -160,7 +124,7 @@ onMounted(async () => {
   font-size: 13px;
   font-weight: 500;
   cursor: default;
-  min-width: 0; /* 允许内容收缩 */
+  min-width: 0;
 
   -webkit-context-menu: none;
   -moz-context-menu: none;
@@ -310,4 +274,4 @@ onMounted(async () => {
     }
   }
 }
-</style>
+</style>

frontend/src/components/titlebar/MacOSTitleBar.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="macos-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
     <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
-      <button 
-        class="titlebar-button close-button" 
-        @click="closeWindow"
-        :title="t('titlebar.close')"
+      <button
+          class="titlebar-button close-button"
+          @click="closeWindow"
+          :title="t('titlebar.close')"
       >
         <div class="button-icon">
           <svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons">
@@ -12,11 +12,11 @@
           </svg>
         </div>
       </button>
-      
-      <button 
-        class="titlebar-button minimize-button" 
-        @click="minimizeWindow"
-        :title="t('titlebar.minimize')"
+
+      <button
+          class="titlebar-button minimize-button"
+          @click="minimizeWindow"
+          :title="t('titlebar.minimize')"
       >
         <div class="button-icon">
           <svg width="8" height="1" viewBox="0 0 8 1" v-show="showControlIcons">
@@ -24,11 +24,11 @@
           </svg>
         </div>
       </button>
-      
-      <button 
-        class="titlebar-button maximize-button" 
-        @click="toggleMaximize"
-        :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
+
+      <button
+          class="titlebar-button maximize-button"
+          @click="handleToggleMaximize"
+          :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
       >
         <div class="button-icon">
           <svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons && !isMaximized">
@@ -42,98 +42,61 @@
         </div>
       </button>
     </div>
-    
+
     <!-- 标签页容器区域 -->
     <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
-      <TabContainer />
+      <TabContainer/>
     </div>
-    
-    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent v-if="!tabStore.isTabsEnabled || isInSettings">
+
+    <div class="titlebar-content" @dblclick="handleToggleMaximize" @contextmenu.prevent
+         v-if="!tabStore.isTabsEnabled || isInSettings">
       <div class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import * as runtime from '@wailsio/runtime';
-import { useDocumentStore } from '@/stores/documentStore';
+import {computed, onMounted, ref} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {useRoute} from 'vue-router';
+import {useDocumentStore} from '@/stores/documentStore';
+import {useTabStore} from '@/stores/tabStore';
 import TabContainer from '@/components/tabs/TabContainer.vue';
-import { useTabStore } from "@/stores/tabStore";
+import {
+  minimizeWindow,
+  toggleMaximize,
+  closeWindow,
+  getMaximizedState,
+  generateTitleText,
+  generateFullTitleText
+} from './index';
 
-const tabStore = useTabStore();
-const { t } = useI18n();
+const {t} = useI18n();
 const route = useRoute();
-const isMaximized = ref(false);
-const showControlIcons = ref(false);
+const tabStore = useTabStore();
 const documentStore = useDocumentStore();
 
-// 判断是否在设置页面
+const isMaximized = ref(false);
+const showControlIcons = ref(false);
 const isInSettings = computed(() => route.path.startsWith('/settings'));
 
-const minimizeWindow = async () => {
-  try {
-    await runtime.Window.Minimise();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const toggleMaximize = async () => {
-  try {
-    await runtime.Window.ToggleMaximise();
-    await checkMaximizedState();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const closeWindow = async () => {
-  try {
-    await runtime.Window.Close();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const checkMaximizedState = async () => {
-  try {
-    isMaximized.value = await runtime.Window.IsMaximised();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-// 计算标题文本
 const titleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  if (currentDoc) {
-    // 限制文档标题长度，避免标题栏换行
-    const maxTitleLength = 30;
-    const truncatedTitle = currentDoc.title.length > maxTitleLength 
-      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
-      : currentDoc.title;
-    return `voidraft - ${truncatedTitle}`;
-  }
-  return 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateTitleText(documentStore.currentDocument?.title);
 });
 
-// 计算完整标题文本（用于tooltip）
 const fullTitleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateFullTitleText(documentStore.currentDocument?.title);
 });
 
+const handleToggleMaximize = async () => {
+  await toggleMaximize();
+  isMaximized.value = await getMaximizedState();
+};
+
 onMounted(async () => {
-  await checkMaximizedState();
+  isMaximized.value = await getMaximizedState();
 });
 </script>
 
@@ -147,11 +110,11 @@ onMounted(async () => {
   -webkit-user-select: none;
   width: 100%;
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
-  
+
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
-  
+
   &:hover {
     .titlebar-button {
       .button-icon {
@@ -168,7 +131,7 @@ onMounted(async () => {
   padding-left: 8px;
   gap: 8px;
   flex-shrink: 0;
-  
+
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
@@ -187,7 +150,7 @@ onMounted(async () => {
   padding: 0;
   margin: 0;
   position: relative;
-  
+
   .button-icon {
     opacity: 0;
     transition: opacity 0.2s ease;
@@ -198,7 +161,7 @@ onMounted(async () => {
     height: 100%;
     color: rgba(0, 0, 0, 0.7);
   }
-  
+
   &:hover .button-icon {
     opacity: 1;
   }
@@ -206,11 +169,11 @@ onMounted(async () => {
 
 .close-button {
   background: #ff5f57;
-  
+
   &:hover {
     background: #ff453a;
   }
-  
+
   &:active {
     background: #d7463f;
   }
@@ -218,11 +181,11 @@ onMounted(async () => {
 
 .minimize-button {
   background: #ffbd2e;
-  
+
   &:hover {
     background: #ffb524;
   }
-  
+
   &:active {
     background: #e6a220;
   }
@@ -230,11 +193,11 @@ onMounted(async () => {
 
 .maximize-button {
   background: #28ca42;
-  
+
   &:hover {
     background: #1ebe36;
   }
-  
+
   &:active {
     background: #1ba932;
   }
@@ -247,7 +210,7 @@ onMounted(async () => {
   flex: 1;
   cursor: default;
   min-width: 0;
-  
+
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
@@ -261,34 +224,32 @@ onMounted(async () => {
   margin-left: 8px;
   margin-right: 8px;
   min-width: 0;
-  overflow: visible; /* 允许TabContainer内部处理滚动 */
-  
-  /* 确保TabContainer能够正确处理滚动 */
+  overflow: visible;
+
   :deep(.tab-container) {
     width: 100%;
     height: 100%;
   }
-  
+
   :deep(.tab-bar) {
     width: 100%;
     height: 100%;
   }
-  
+
   :deep(.tab-scroll-wrapper) {
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    
+
     &::-webkit-scrollbar {
       display: none;
     }
   }
-  
-  /* 确保底部线条能够正确显示 */
+
   :deep(.tab-item) {
     position: relative;
-    
+
     &::after {
       content: '';
       position: absolute;
@@ -319,13 +280,13 @@ onMounted(async () => {
     background: var(--toolbar-bg, #2d2d2d);
     border-bottom-color: var(--toolbar-border, rgba(255, 255, 255, 0.1));
   }
-  
+
   .titlebar-title {
     color: var(--toolbar-text, #fff);
   }
-  
+
   .titlebar-button .button-icon {
     color: rgba(255, 255, 255, 0.8);
   }
 }
-</style>
+</style>

frontend/src/components/titlebar/WindowsTitleBar.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="windows-titlebar" style="--wails-draggable:drag">
-    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
+    <div class="titlebar-content" @dblclick="handleToggleMaximize" @contextmenu.prevent>
       <div class="titlebar-icon">
         <img src="/appicon.png" alt="voidraft"/>
       </div>
-      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
+      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">
+        {{ titleText }}
+      </div>
       <!-- 标签页容器区域 -->
       <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
-        <TabContainer />
+        <TabContainer/>
       </div>
       <!-- 设置页面标题 -->
       <div v-if="isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
@@ -24,7 +26,7 @@
 
       <button
           class="titlebar-button maximize-button"
-          @click="toggleMaximize"
+          @click="handleToggleMaximize"
           :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
       >
         <span class="titlebar-icon" v-html="maximizeIcon"></span>
@@ -45,84 +47,44 @@
 import {computed, onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
 import {useRoute} from 'vue-router';
-import * as runtime from '@wailsio/runtime';
 import {useDocumentStore} from '@/stores/documentStore';
+import {useTabStore} from '@/stores/tabStore';
 import TabContainer from '@/components/tabs/TabContainer.vue';
-import {useTabStore} from "@/stores/tabStore";
+import {
+  minimizeWindow,
+  toggleMaximize,
+  closeWindow,
+  getMaximizedState,
+  generateTitleText,
+  generateFullTitleText
+} from './index';
 
-const tabStore = useTabStore();
 const {t} = useI18n();
 const route = useRoute();
-const isMaximized = ref(false);
+const tabStore = useTabStore();
 const documentStore = useDocumentStore();
 
-// 计算属性用于图标，减少重复渲染
+const isMaximized = ref(false);
 const maximizeIcon = computed(() => isMaximized.value ? '&#xE923;' : '&#xE922;');
-
-// 判断是否在设置页面
 const isInSettings = computed(() => route.path.startsWith('/settings'));
 
-// 计算标题文本
 const titleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  if (currentDoc) {
-    // 限制文档标题长度，避免标题栏换行
-    const maxTitleLength = 30;
-    const truncatedTitle = currentDoc.title.length > maxTitleLength 
-      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
-      : currentDoc.title;
-    return `voidraft - ${truncatedTitle}`;
-  }
-  return 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateTitleText(documentStore.currentDocument?.title);
 });
 
-// 计算完整标题文本（用于tooltip）
 const fullTitleText = computed(() => {
-  if (isInSettings.value) {
-    return `voidraft - ` + t('settings.title');
-  }
-  const currentDoc = documentStore.currentDocument;
-  return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
+  if (isInSettings.value) return `voidraft - ${t('settings.title')}`;
+  return generateFullTitleText(documentStore.currentDocument?.title);
 });
 
-const minimizeWindow = async () => {
-  try {
-    await runtime.Window.Minimise();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const toggleMaximize = async () => {
-  try {
-    await runtime.Window.ToggleMaximise();
-    await checkMaximizedState();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const closeWindow = async () => {
-  try {
-    await runtime.Window.Close();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const checkMaximizedState = async () => {
-  try {
-    isMaximized.value = await runtime.Window.IsMaximised();
-  } catch (error) {
-    console.error(error);
-  }
+const handleToggleMaximize = async () => {
+  await toggleMaximize();
+  isMaximized.value = await getMaximizedState();
 };
 
 onMounted(async () => {
-  await checkMaximizedState();
+  isMaximized.value = await getMaximizedState();
 });
 </script>
 
@@ -152,7 +114,7 @@ onMounted(async () => {
   font-size: 12px;
   font-weight: 400;
   cursor: default;
-  min-width: 0; /* 允许内容收缩 */
+  min-width: 0;
 
   -webkit-context-menu: none;
   -moz-context-menu: none;
@@ -178,7 +140,6 @@ onMounted(async () => {
   overflow: hidden;
   margin-left: 8px;
   min-width: 0;
-  //margin-right: 8px;
 }
 
 .titlebar-controls {
@@ -254,4 +215,4 @@ onMounted(async () => {
     opacity: 1;
   }
 }
-</style>
+</style>

frontend/src/components/titlebar/index.ts

@@ -0,0 +1,60 @@
+import * as runtime from '@wailsio/runtime';
+
+/**
+ * Titlebar utility functions
+ */
+
+// Window control functions
+export const minimizeWindow = async () => {
+  try {
+    await runtime.Window.Minimise();
+  } catch (error) {
+    console.error('Failed to minimize window:', error);
+  }
+};
+
+export const toggleMaximize = async () => {
+  try {
+    await runtime.Window.ToggleMaximise();
+  } catch (error) {
+    console.error('Failed to toggle maximize:', error);
+  }
+};
+
+export const closeWindow = async () => {
+  try {
+    await runtime.Window.Close();
+  } catch (error) {
+    console.error('Failed to close window:', error);
+  }
+};
+
+export const getMaximizedState = async (): Promise<boolean> => {
+  try {
+    return await runtime.Window.IsMaximised();
+  } catch (error) {
+    console.error('Failed to check maximized state:', error);
+    return false;
+  }
+};
+
+/**
+ * Generate title text with optional truncation
+ */
+export const generateTitleText = (
+  title: string | undefined,
+  maxLength: number = 30
+): string => {
+  if (!title) return 'voidraft';
+  const truncated = title.length > maxLength
+    ? title.substring(0, maxLength) + '...'
+    : title;
+  return `voidraft - ${truncated}`;
+};
+
+/**
+ * Generate full title text (no truncation)
+ */
+export const generateFullTitleText = (title: string | undefined): string => {
+  return title ? `voidraft - ${title}` : 'voidraft';
+};

frontend/src/components/toast/Toast.vue

@@ -0,0 +1,292 @@
+<template>
+  <div 
+    :class="['toast-item', `toast-${type}`]"
+    @mouseenter="pauseTimer"
+    @mouseleave="resumeTimer"
+  >
+    <!-- 图标 -->
+    <div class="toast-icon">
+      <svg v-if="type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm-2 15l-5-5 1.41-1.41L8 12.17l7.59-7.59L17 6l-9 9z" fill="currentColor"/>
+      </svg>
+      <svg v-else-if="type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z" fill="currentColor"/>
+      </svg>
+      <svg v-else-if="type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M1 19h18L10 1 1 19zm10-3H9v-2h2v2zm0-4H9v-4h2v4z" fill="currentColor"/>
+      </svg>
+      <svg v-else-if="type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z" fill="currentColor"/>
+      </svg>
+    </div>
+
+    <!-- 内容 -->
+    <div class="toast-content">
+      <div v-if="title" class="toast-title">{{ title }}</div>
+      <div class="toast-message">{{ message }}</div>
+    </div>
+
+    <!-- 关闭按钮 -->
+    <button 
+      v-if="closable"
+      class="toast-close"
+      @click="close"
+      aria-label="Close"
+    >
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import type { Toast } from './types';
+
+const props = withDefaults(
+  defineProps<{
+    toast: Toast;
+  }>(),
+  {}
+);
+
+const emit = defineEmits<{
+  close: [id: string];
+}>();
+
+const timer = ref<number | null>(null);
+const remainingTime = ref(props.toast.duration);
+const pausedAt = ref<number | null>(null);
+
+const { id, message, title, type, duration, closable } = props.toast;
+
+const close = () => {
+  emit('close', id);
+};
+
+const startTimer = () => {
+  if (duration > 0) {
+    timer.value = window.setTimeout(() => {
+      close();
+    }, remainingTime.value);
+  }
+};
+
+const clearTimer = () => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+    timer.value = null;
+  }
+};
+
+const pauseTimer = () => {
+  if (timer.value && duration > 0) {
+    clearTimer();
+    pausedAt.value = Date.now();
+  }
+};
+
+const resumeTimer = () => {
+  if (pausedAt.value && duration > 0) {
+    const elapsed = Date.now() - pausedAt.value;
+    remainingTime.value = Math.max(0, remainingTime.value - elapsed);
+    pausedAt.value = null;
+    startTimer();
+  }
+};
+
+onMounted(() => {
+  startTimer();
+});
+
+onUnmounted(() => {
+  clearTimer();
+});
+</script>
+
+<style scoped lang="scss">
+.toast-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 300px;
+  max-width: 420px;
+  padding: 16px 18px;
+  margin-bottom: 12px;
+  
+  transform-origin: center center;
+  
+  // 毛玻璃效果
+  // 亮色主题
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  
+  box-shadow: 
+    0 4px 12px rgba(0, 0, 0, 0.08),
+    0 1px 3px rgba(0, 0, 0, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  
+  cursor: default;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 
+      0 6px 16px rgba(0, 0, 0, 0.1),
+      0 2px 6px rgba(0, 0, 0, 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  }
+}
+
+// 深色主题适配 - 使用应用的 data-theme 属性
+:root[data-theme="dark"] .toast-item,
+:root[data-theme="auto"] .toast-item {
+  background: rgba(45, 45, 45, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 
+    0 4px 12px rgba(0, 0, 0, 0.3),
+    0 1px 3px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  
+  &:hover {
+    box-shadow: 
+      0 6px 16px rgba(0, 0, 0, 0.4),
+      0 2px 6px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+}
+
+// 跟随系统主题时的浅色偏好
+@media (prefers-color-scheme: light) {
+  :root[data-theme="auto"] .toast-item {
+    background: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    box-shadow: 
+      0 4px 12px rgba(0, 0, 0, 0.08),
+      0 1px 3px rgba(0, 0, 0, 0.06),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    
+    &:hover {
+      box-shadow: 
+        0 6px 16px rgba(0, 0, 0, 0.1),
+        0 2px 6px rgba(0, 0, 0, 0.08),
+        inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    }
+  }
+}
+
+.toast-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+  }
+}
+
+// 有标题时，图标与标题对齐（不需要 margin-top）
+.toast-item:has(.toast-title) .toast-icon {
+  margin-top: 0;
+}
+
+.toast-success .toast-icon {
+  color: #16a34a;
+}
+
+.toast-error .toast-icon {
+  color: #dc2626;
+}
+
+.toast-warning .toast-icon {
+  color: #f59e0b;
+}
+
+.toast-info .toast-icon {
+  color: #3b82f6;
+}
+
+.toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--settings-text);
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+.toast-message {
+  font-size: 12px;
+  color: var(--settings-text-secondary);
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.toast-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  margin-top: 0px;
+  background: rgba(0, 0, 0, 0.05);
+  border: none;
+  border-radius: 6px;
+  color: var(--settings-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+  
+  &:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: var(--settings-text);
+    transform: rotate(90deg);
+  }
+  
+  &:active {
+    transform: rotate(90deg) scale(0.9);
+  }
+}
+
+:root[data-theme="dark"] .toast-close,
+:root[data-theme="auto"] .toast-close {
+  background: rgba(255, 255, 255, 0.08);
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root[data-theme="auto"] .toast-close {
+    background: rgba(0, 0, 0, 0.05);
+    
+    &:hover {
+      background: rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+</style>
+

frontend/src/components/toast/ToastContainer.vue

@@ -0,0 +1,168 @@
+<template>
+  <Teleport to="body">
+    <TransitionGroup 
+      v-for="position in positions" 
+      :key="position"
+      :class="['toast-container', `toast-container-${position}`]"
+      name="toast-list"
+      tag="div"
+    >
+      <ToastItem
+        v-for="toast in getToastsByPosition(position)"
+        :key="toast.id"
+        :toast="toast"
+        @close="removeToast"
+      />
+    </TransitionGroup>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import ToastItem from './Toast.vue';
+import { useToastStore } from './toastStore';
+import type { ToastPosition } from './types';
+
+const toastStore = useToastStore();
+
+const positions: ToastPosition[] = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right',
+];
+
+const getToastsByPosition = (position: ToastPosition) => {
+  return toastStore.toasts.filter(toast => toast.position === position);
+};
+
+const removeToast = (id: string) => {
+  toastStore.remove(id);
+};
+</script>
+
+<style scoped lang="scss">
+.toast-container {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  
+  > * {
+    pointer-events: auto;
+  }
+}
+
+// 顶部位置 - 增加间距避免覆盖标题栏
+.toast-container-top-left {
+  top: 35px;
+  left: 20px;
+  align-items: flex-start;
+}
+
+.toast-container-top-center {
+  top: 35px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.toast-container-top-right {
+  top: 35px;
+  right: 20px;
+  align-items: flex-end;
+}
+
+// 底部位置
+.toast-container-bottom-left {
+  bottom: 20px;
+  left: 20px;
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.toast-container-bottom-center {
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  flex-direction: column-reverse;
+}
+
+.toast-container-bottom-right {
+  bottom: 20px;
+  right: 20px;
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+
+// TransitionGroup 列表动画 - 从哪来回哪去，收缩滑出
+.toast-list-move {
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.toast-list-enter-active {
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.toast-list-leave-active {
+  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 0.4);
+  position: absolute !important;
+}
+
+// 右侧位置：从右滑入，收缩向右滑出
+.toast-container-top-right,
+.toast-container-bottom-right {
+  .toast-list-enter-from {
+    opacity: 0;
+    transform: translateX(100%) scale(0.8);
+  }
+  
+  .toast-list-leave-to {
+    opacity: 0;
+    transform: translateX(100%) scale(0.8);
+  }
+}
+
+// 左侧位置：从左滑入，收缩向左滑出
+.toast-container-top-left,
+.toast-container-bottom-left {
+  .toast-list-enter-from {
+    opacity: 0;
+    transform: translateX(-100%) scale(0.8);
+  }
+  
+  .toast-list-leave-to {
+    opacity: 0;
+    transform: translateX(-100%) scale(0.8);
+  }
+}
+
+// 居中位置：从上/下滑入，收缩向上/下滑出
+.toast-container-top-center {
+  .toast-list-enter-from {
+    opacity: 0;
+    transform: translateY(-100%) scale(0.8);
+  }
+  
+  .toast-list-leave-to {
+    opacity: 0;
+    transform: translateY(-100%) scale(0.8);
+  }
+}
+
+.toast-container-bottom-center {
+  .toast-list-enter-from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.8);
+  }
+  
+  .toast-list-leave-to {
+    opacity: 0;
+    transform: translateY(100%) scale(0.8);
+  }
+}
+</style>
+

frontend/src/components/toast/index.ts

@@ -0,0 +1,80 @@
+import { useToastStore } from './toastStore';
+import type { ToastOptions } from './types';
+
+class ToastService {
+  private getStore() {
+    return useToastStore();
+  }
+
+  /**
+   * 显示一个通知
+   */
+  show(options: ToastOptions): string {
+    return this.getStore().add(options);
+  }
+
+  /**
+   * 显示成功通知
+   */
+  success(message: string, title?: string, options?: Partial<ToastOptions>): string {
+    return this.show({
+      message,
+      title,
+      type: 'success',
+      ...options,
+    });
+  }
+
+  /**
+   * 显示错误通知
+   */
+  error(message: string, title?: string, options?: Partial<ToastOptions>): string {
+    return this.show({
+      message,
+      title,
+      type: 'error',
+      ...options,
+    });
+  }
+
+  /**
+   * 显示警告通知
+   */
+  warning(message: string, title?: string, options?: Partial<ToastOptions>): string {
+    return this.show({
+      message,
+      title,
+      type: 'warning',
+      ...options,
+    });
+  }
+
+  /**
+   * 显示信息通知
+   */
+  info(message: string, title?: string, options?: Partial<ToastOptions>): string {
+    return this.show({
+      message,
+      title,
+      type: 'info',
+      ...options,
+    });
+  }
+
+  /**
+   * 关闭指定的通知
+   */
+  close(id: string): void {
+    this.getStore().remove(id);
+  }
+
+  /**
+   * 清空所有通知
+   */
+  clear(): void {
+    this.getStore().clear();
+  }
+}
+export const toast = new ToastService();
+export default toast;
+

frontend/src/components/toast/toastStore.ts

@@ -0,0 +1,55 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import type { Toast, ToastOptions } from './types';
+
+export const useToastStore = defineStore('toast', () => {
+  const toasts = ref<Toast[]>([]);
+  let idCounter = 0;
+
+  /**
+   * 添加一个 Toast
+   */
+  const add = (options: ToastOptions): string => {
+    const id = `toast-${Date.now()}-${idCounter++}`;
+    
+    const toast: Toast = {
+      id,
+      message: options.message,
+      type: options.type || 'info',
+      title: options.title,
+      duration: options.duration ?? 4000,
+      position: options.position || 'top-right',
+      closable: options.closable ?? true,
+      createdAt: Date.now(),
+    };
+
+    toasts.value.push(toast);
+    
+    return id;
+  };
+
+  /**
+   * 移除指定 Toast
+   */
+  const remove = (id: string) => {
+    const index = toasts.value.findIndex(t => t.id === id);
+    if (index > -1) {
+      toasts.value.splice(index, 1);
+    }
+  };
+
+  /**
+   * 清空所有 Toast
+   */
+  const clear = () => {
+    toasts.value = [];
+  };
+
+  return {
+    toasts,
+    add,
+    remove,
+    clear,
+  };
+});
+

frontend/src/components/toast/types.ts

@@ -0,0 +1,52 @@
+/**
+ * Toast 通知类型定义
+ */
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+export type ToastPosition = 
+  | 'top-right' 
+  | 'top-left' 
+  | 'bottom-right' 
+  | 'bottom-left'
+  | 'top-center'
+  | 'bottom-center';
+
+export interface ToastOptions {
+  /**
+   * Toast 消息内容
+   */
+  message: string;
+  
+  /**
+   * Toast 类型
+   */
+  type?: ToastType;
+  
+  /**
+   * 标题（可选）
+   */
+  title?: string;
+  
+  /**
+   * 持续时间（毫秒），0 表示不自动关闭
+   */
+  duration?: number;
+  
+  /**
+   * 显示位置
+   */
+  position?: ToastPosition;
+  
+  /**
+   * 是否可关闭
+   */
+  closable?: boolean;
+}
+
+export interface Toast extends Required<Omit<ToastOptions, 'title'>> {
+  id: string;
+  title?: string;
+  createdAt: number;
+}
+

frontend/src/components/toolbar/BlockLanguageSelector.vue

@@ -51,13 +51,13 @@ let editorScope: ReturnType<typeof effectScope> | null = null;
 
 // 更新当前块语言信息
 const updateCurrentBlockLanguage = () => {
-  if (!editorStore.editorView) {
+  if (!editorStore.currentEditor) {
     currentBlockLanguage.value = { name: 'text', auto: false };
     return;
   }
 
   try {
-    const state = editorStore.editorView.state;
+    const state = editorStore.currentEditor.state;
     const activeBlock = getActiveNoteBlock(state as any);
     if (activeBlock) {
       const newLanguage = {
@@ -128,7 +128,7 @@ const setupEventListeners = (view: any) => {
 
 // 监听编辑器状态变化
 watch(
-  () => editorStore.editorView,
+  () => editorStore.currentEditor,
   (newView) => {
     if (newView) {
       setupEventListeners(newView);
@@ -175,13 +175,13 @@ const closeLanguageMenu = () => {
 
 // 选择语言 - 优化性能
 const selectLanguage = (languageId: SupportedLanguage) => {
-  if (!editorStore.editorView) {
+  if (!editorStore.currentEditor) {
     closeLanguageMenu();
     return;
   }
 
   try {
-    const view = editorStore.editorView;
+    const view = editorStore.currentEditor;
     const state = view.state;
     const dispatch = view.dispatch;
 
@@ -294,9 +294,11 @@ const scrollToCurrentLanguage = () => {
       <span class="arrow" :class="{ 'open': showLanguageMenu }">▲</span>
     </button>
     
-    <div class="language-menu" v-if="showLanguageMenu">
-      <!-- 搜索框 -->
-      <div class="search-container">
+    <!-- 菜单 -->
+    <Transition name="slide-up">
+      <div class="language-menu" v-if="showLanguageMenu">
+        <!-- 搜索框 -->
+        <div class="search-container">
         <input 
           ref="searchInputRef"
           v-model="searchQuery"
@@ -330,11 +332,23 @@ const scrollToCurrentLanguage = () => {
           {{ t('toolbar.noLanguageFound') }}
         </div>
       </div>
-    </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <style scoped lang="scss">
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
 .block-language-selector {
   position: relative;
   
@@ -386,15 +400,17 @@ const scrollToCurrentLanguage = () => {
     border: 1px solid var(--border-color);
     border-radius: 3px;
     margin-bottom: 4px;
-    width: 220px;
-    max-height: 280px;
+    width: 280px;
+    max-height: 400px;
     z-index: 1000;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
     
           .search-container {
         position: relative;
-        padding: 8px;
+        padding: 10px;
         border-bottom: 1px solid var(--border-color);
         
         .search-input {
@@ -403,11 +419,11 @@ const scrollToCurrentLanguage = () => {
           background-color: var(--bg-primary);
           border: 1px solid var(--border-color);
           border-radius: 2px;
-          padding: 5px 8px 5px 26px;
-          font-size: 11px;
+          padding: 6px 10px 6px 30px;
+          font-size: 12px;
           color: var(--text-primary);
           outline: none;
-          line-height: 1.2;
+          line-height: 1.4;
           
           &:focus {
             border-color: var(--text-muted);
@@ -420,7 +436,7 @@ const scrollToCurrentLanguage = () => {
         
         .search-icon {
           position: absolute;
-          left: 14px;
+          left: 16px;
           top: 50%;
           transform: translateY(-50%);
           color: var(--text-muted);
@@ -429,20 +445,21 @@ const scrollToCurrentLanguage = () => {
       }
     
           .language-list {
-        max-height: 200px;
+        max-height: 320px;
         overflow-y: auto;
+        flex: 1;
         
         .language-option {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          padding: 6px 8px;
+          padding: 8px 10px;
           cursor: pointer;
-          font-size: 11px;
+          font-size: 12px;
+          border-bottom: 1px solid var(--border-color);
           
           &:hover {
-            background-color: var(--border-color);
-            opacity: 0.8;
+            background-color: var(--bg-hover);
           }
           
           &.active {
@@ -460,17 +477,17 @@ const scrollToCurrentLanguage = () => {
           }
           
           .language-alias {
-            font-size: 10px;
+            font-size: 11px;
             color: var(--text-muted);
             opacity: 0.6;
           }
         }
         
         .no-results {
-          padding: 12px 8px;
+          padding: 14px 10px;
           text-align: center;
           color: var(--text-muted);
-          font-size: 11px;
+          font-size: 12px;
         }
       }
   }
@@ -478,7 +495,7 @@ const scrollToCurrentLanguage = () => {
 
 /* 自定义滚动条 */
 .language-list::-webkit-scrollbar {
-  width: 4px;
+  width: 6px;
 }
 
 .language-list::-webkit-scrollbar-track {
@@ -487,7 +504,7 @@ const scrollToCurrentLanguage = () => {
 
 .language-list::-webkit-scrollbar-thumb {
   background-color: var(--border-color);
-  border-radius: 2px;
+  border-radius: 3px;
   
   &:hover {
     background-color: var(--text-muted);

frontend/src/components/toolbar/DocumentSelector.vue

@@ -1,49 +1,69 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
-import { useDocumentStore } from '@/stores/documentStore';
-import { useTabStore } from '@/stores/tabStore';
-import { useWindowStore } from '@/stores/windowStore';
-import { useI18n } from 'vue-i18n';
-import type { Document } from '@/../bindings/voidraft/internal/models/models';
+import {computed, nextTick, reactive, ref, watch} from 'vue';
+import {useDocumentStore} from '@/stores/documentStore';
+import {useTabStore} from '@/stores/tabStore';
+import {useEditorStore} from '@/stores/editorStore';
+import {useEditorStateStore} from '@/stores/editorStateStore';
+import {useWindowStore} from '@/stores/windowStore';
+import {useI18n} from 'vue-i18n';
+import {useConfirm} from '@/composables';
+import {validateDocumentTitle} from '@/common/utils/validation';
+import {formatDateTime, truncateString} from '@/common/utils/formatter';
+import {Document} from '@/../bindings/voidraft/internal/models/ent/models';
+import toast from '@/components/toast';
+
+// 类型定义
+interface DocumentItem extends Document {
+  isCreateOption?: boolean;
+}
 
 const documentStore = useDocumentStore();
 const tabStore = useTabStore();
+const editorStore = useEditorStore();
+const editorStateStore = useEditorStateStore();
 const windowStore = useWindowStore();
-const { t } = useI18n();
+const {t} = useI18n();
+
+// DOM 引用
+const inputRef = ref<HTMLInputElement>();
+const editInputRef = ref<HTMLInputElement>();
 
 // 组件状态
-const inputValue = ref('');
-const inputRef = ref<HTMLInputElement>();
-const editingId = ref<number | null>(null);
-const editingTitle = ref('');
-const editInputRef = ref<HTMLInputElement>();
-const deleteConfirmId = ref<number | null>(null);
+const state = reactive({
+  isLoaded: false,
+  searchQuery: '',
+  documentList: [] as Document[],  // 缓存文档列表
+  editing: {
+    id: null as number | null,
+    title: ''
+  }
+});
 
 // 常量
 const MAX_TITLE_LENGTH = 50;
+const DELETE_CONFIRM_TIMEOUT = 3000;
 
 // 计算属性
 const currentDocName = computed(() => {
   if (!documentStore.currentDocument) return t('toolbar.selectDocument');
-  const title = documentStore.currentDocument.title;
-  return title.length > 12 ? title.substring(0, 12) + '...' : title;
+  return truncateString(documentStore.currentDocument.title || '', 12);
 });
 
-const filteredItems = computed(() => {
-  const docs = documentStore.documentList;
-  const query = inputValue.value.trim();
+const filteredItems = computed<DocumentItem[]>(() => {
+  const docs = state.documentList;
+  const query = state.searchQuery.trim();
 
   if (!query) return docs;
 
   const filtered = docs.filter(doc =>
-    doc.title.toLowerCase().includes(query.toLowerCase())
+      (doc.title || '').toLowerCase().includes(query.toLowerCase())
   );
 
   // 如果输入的不是已存在文档的完整标题，添加创建选项
-  const exactMatch = docs.some(doc => doc.title.toLowerCase() === query.toLowerCase());
+  const exactMatch = docs.some(doc => (doc.title || '').toLowerCase() === query.toLowerCase());
   if (!exactMatch && query.length > 0) {
     return [
-      { id: -1, title: t('toolbar.createDocument') + ` "${query}"`, isCreateOption: true } as any,
+      {id: -1, title: t('toolbar.createDocument') + ` "${query}"`, isCreateOption: true} as DocumentItem,
       ...filtered
     ];
   }
@@ -51,54 +71,33 @@ const filteredItems = computed(() => {
   return filtered;
 });
 
-// 工具函数
-const validateTitle = (title: string): string | null => {
-  if (!title.trim()) return t('toolbar.documentNameRequired');
-  if (title.trim().length > MAX_TITLE_LENGTH) {
-    return t('toolbar.documentNameTooLong', { max: MAX_TITLE_LENGTH });
-  }
-  return null;
-};
-
-const formatTime = (dateString: string | null) => {
-  if (!dateString) return t('toolbar.unknownTime');
-
-  try {
-    const date = new Date(dateString);
-    if (isNaN(date.getTime())) return t('toolbar.invalidDate');
-
-    const locale = t('locale') === 'zh-CN' ? 'zh-CN' : 'en-US';
-    return date.toLocaleString(locale, {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    });
-  } catch {
-    return t('toolbar.timeError');
-  }
-};
-
 // 核心操作
 const openMenu = async () => {
+  state.documentList = await documentStore.getDocumentList();
   documentStore.openDocumentSelector();
-  await documentStore.getDocumentMetaList();
+  state.isLoaded = true;
   await nextTick();
   inputRef.value?.focus();
 };
 
+// 删除确认
+const {isConfirming: isDeleting, startConfirm: startDeleteConfirm, reset: resetDeleteConfirm} = useConfirm({
+  timeout: DELETE_CONFIRM_TIMEOUT
+});
+
 const closeMenu = () => {
+  state.isLoaded = false;
   documentStore.closeDocumentSelector();
-  inputValue.value = '';
-  editingId.value = null;
-  editingTitle.value = '';
-  deleteConfirmId.value = null;
+  state.searchQuery = '';
+  state.editing.id = null;
+  state.editing.title = '';
+  resetDeleteConfirm();
 };
 
-const selectDoc = async (doc: Document) => {
-  // 如果选择的就是当前文档，直接关闭菜单
+const selectDoc = async (doc: DocumentItem) => {
+  if (doc.id === undefined) return;
+
+  // 如果选择的就是当前文档,直接关闭菜单
   if (documentStore.currentDocument?.id === doc.id) {
     closeMenu();
     return;
@@ -106,46 +105,79 @@ const selectDoc = async (doc: Document) => {
 
   const hasOpen = await windowStore.isDocumentWindowOpen(doc.id);
   if (hasOpen) {
-    documentStore.setError(doc.id, t('toolbar.alreadyOpenInNewWindow'));
+    toast.warning(t('toolbar.alreadyOpenInNewWindow'));
     return;
   }
 
-  const success = await documentStore.openDocument(doc.id);
-  if (success) {
-    if (tabStore.isTabsEnabled) {
-      tabStore.addOrActivateTab(doc);
-    }
-    closeMenu();
+
+  // 保存旧文档的光标位置
+  const oldDocId = documentStore.currentDocumentId;
+  if (oldDocId) {
+    const cursorPos = editorStore.getCurrentCursorPosition();
+    editorStateStore.saveCursorPosition(oldDocId, cursorPos);
   }
+
+  // 如果旧文档有未保存修改,保存它
+  if (oldDocId && editorStore.hasUnsavedChanges(oldDocId)) {
+
+    const content = editorStore.getCurrentContent();
+    await documentStore.saveDocument(oldDocId, content);
+    editorStore.syncAfterSave(oldDocId);
+
+  }
+
+  // 打开新文档
+  const success = await documentStore.openDocument(doc.id);
+  if (!success) return;
+
+  // 切换到新编辑器
+  await editorStore.switchToEditor(doc.id);
+
+  // 更新标签页
+  if (documentStore.currentDocument && tabStore.isTabsEnabled) {
+    tabStore.addOrActivateTab(documentStore.currentDocument);
+  }
+
+  closeMenu();
 };
 
 const createDoc = async (title: string) => {
   const trimmedTitle = title.trim();
-  const error = validateTitle(trimmedTitle);
+  const error = validateDocumentTitle(trimmedTitle, MAX_TITLE_LENGTH);
   if (error) return;
 
   try {
     const newDoc = await documentStore.createNewDocument(trimmedTitle);
-    if (newDoc) await selectDoc(newDoc);
+    if (newDoc && newDoc.id) {
+      await selectDoc(newDoc);
+    }
   } catch (error) {
     console.error('Failed to create document:', error);
   }
 };
 
-const selectItem = async (item: any) => {
+const selectDocItem = async (item: any) => {
   if (item.isCreateOption) {
-    await createDoc(inputValue.value.trim());
+    await createDoc(state.searchQuery.trim());
   } else {
     await selectDoc(item);
   }
 };
 
+// 搜索框回车处理
+const handleSearchEnter = () => {
+  const query = state.searchQuery.trim();
+  if (query && filteredItems.value.length > 0) {
+    selectDocItem(filteredItems.value[0]);
+  }
+};
+
 // 编辑操作
-const startRename = (doc: Document, event: Event) => {
+const renameDoc = (doc: DocumentItem, event: Event) => {
   event.stopPropagation();
-  editingId.value = doc.id;
-  editingTitle.value = doc.title;
-  deleteConfirmId.value = null;
+  state.editing.id = doc.id ?? null;
+  state.editing.title = doc.title || '';
+  resetDeleteConfirm();
   nextTick(() => {
     editInputRef.value?.focus();
     editInputRef.value?.select();
@@ -153,285 +185,245 @@ const startRename = (doc: Document, event: Event) => {
 };
 
 const saveEdit = async () => {
-  if (!editingId.value || !editingTitle.value.trim()) {
-    editingId.value = null;
-    editingTitle.value = '';
+  if (!state.editing.id || !state.editing.title.trim()) {
+    state.editing.id = null;
+    state.editing.title = '';
     return;
   }
 
-  const trimmedTitle = editingTitle.value.trim();
-  const error = validateTitle(trimmedTitle);
+  const trimmedTitle = state.editing.title.trim();
+  const error = validateDocumentTitle(trimmedTitle, MAX_TITLE_LENGTH);
   if (error) return;
 
   try {
-    await documentStore.updateDocumentMetadata(editingId.value, trimmedTitle);
-    await documentStore.getDocumentMetaList();
-    
+    await documentStore.updateDocumentTitle(state.editing.id, trimmedTitle);
+    state.documentList = await documentStore.getDocumentList();
+
     // 如果tabs功能开启且该文档有标签页，更新标签页标题
-    if (tabStore.isTabsEnabled && tabStore.hasTab(editingId.value)) {
-      tabStore.updateTabTitle(editingId.value, trimmedTitle);
+    if (tabStore.isTabsEnabled && tabStore.hasTab(state.editing.id)) {
+      tabStore.updateTabTitle(state.editing.id, trimmedTitle);
     }
   } catch (error) {
     console.error('Failed to update document:', error);
   } finally {
-    editingId.value = null;
-    editingTitle.value = '';
+    state.editing.id = null;
+    state.editing.title = '';
   }
 };
 
+const cancelEdit = () => {
+  state.editing.id = null;
+  state.editing.title = '';
+};
+
 // 其他操作
-const openInNewWindow = async (doc: Document, event: Event) => {
+const openInNewWindow = async (doc: DocumentItem, event: Event) => {
   event.stopPropagation();
+  if (doc.id === undefined) return;
   try {
+    // 在打开新窗口前，如果启用了标签且该文档有标签，先关闭标签
+    if (tabStore.isTabsEnabled && tabStore.hasTab(doc.id)) {
+      await tabStore.closeTab(doc.id);
+    }
     await documentStore.openDocumentInNewWindow(doc.id);
   } catch (error) {
     console.error('Failed to open document in new window:', error);
   }
 };
 
-const handleDelete = async (doc: Document, event: Event) => {
+const handleDelete = async (doc: DocumentItem, event: Event) => {
   event.stopPropagation();
+  if (doc.id === undefined) return;
 
-  if (deleteConfirmId.value === doc.id) {
+  if (isDeleting(doc.id)) {
     // 确认删除前检查文档是否在其他窗口打开
     const hasOpen = await windowStore.isDocumentWindowOpen(doc.id);
     if (hasOpen) {
-      documentStore.setError(doc.id, t('toolbar.alreadyOpenInNewWindow'));
-      deleteConfirmId.value = null;
+      toast.warning(t('toolbar.alreadyOpenInNewWindow'));
+      resetDeleteConfirm();
       return;
     }
 
     const deleteSuccess = await documentStore.deleteDocument(doc.id);
     if (deleteSuccess) {
-      await documentStore.getDocumentMetaList();
-      // 如果删除的是当前文档，切换到第一个文档
-      if (documentStore.currentDocument?.id === doc.id && documentStore.documentList.length > 0) {
-        const firstDoc = documentStore.documentList[0];
+      state.documentList = await documentStore.getDocumentList();
+      // 如果删除的是当前文档,切换到第一个文档
+      if (documentStore.currentDocument?.id === doc.id && state.documentList.length > 0) {
+        const firstDoc = state.documentList[0];
         if (firstDoc) await selectDoc(firstDoc);
       }
     }
-    deleteConfirmId.value = null;
+    resetDeleteConfirm();
   } else {
     // 进入确认状态
-    deleteConfirmId.value = doc.id;
-    editingId.value = null;
-
-    // 3秒后自动取消确认状态
-    setTimeout(() => {
-      if (deleteConfirmId.value === doc.id) {
-        deleteConfirmId.value = null;
-      }
-    }, 3000);
+    startDeleteConfirm(doc.id);
+    state.editing.id = null;
   }
 };
 
-// 键盘事件处理
-const createKeyHandler = (handlers: Record<string, () => void>) => (event: KeyboardEvent) => {
-  const handler = handlers[event.key];
-  if (handler) {
-    event.preventDefault();
-    event.stopPropagation();
-    handler();
-  }
-};
-
-const handleGlobalKeydown = createKeyHandler({
-  Escape: () => {
-    if (editingId.value) {
-      editingId.value = null;
-      editingTitle.value = '';
-    } else if (deleteConfirmId.value) {
-      deleteConfirmId.value = null;
-    } else {
-      closeMenu();
-    }
-  }
-});
-
-const handleInputKeydown = createKeyHandler({
-  Enter: () => {
-    const query = inputValue.value.trim();
-    if (query && filteredItems.value.length > 0) {
-      selectItem(filteredItems.value[0]);
-    }
-  },
-  Escape: closeMenu
-});
-
-const handleEditKeydown = createKeyHandler({
-  Enter: saveEdit,
-  Escape: () => {
-    editingId.value = null;
-    editingTitle.value = '';
-  }
-});
-
-// 点击外部关闭
-const handleClickOutside = (event: Event) => {
-  const target = event.target as HTMLElement;
-  if (!target.closest('.document-selector')) {
+// 切换菜单
+const toggleMenu = () => {
+  if (documentStore.showDocumentSelector) {
     closeMenu();
+  } else {
+    openMenu();
   }
 };
 
-// 生命周期
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-  document.addEventListener('keydown', handleGlobalKeydown);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-  document.removeEventListener('keydown', handleGlobalKeydown);
-});
-
 // 监听菜单状态变化
 watch(() => documentStore.showDocumentSelector, (isOpen) => {
-  if (isOpen) {
+  if (isOpen && !state.isLoaded) {
     openMenu();
   }
 });
 </script>
 
 <template>
-  <div class="document-selector">
+  <div class="document-selector" v-click-outside="closeMenu">
     <!-- 选择器按钮 -->
-    <button class="doc-btn" @click="documentStore.toggleDocumentSelector">
+    <button class="doc-btn" @click="toggleMenu">
       <span class="doc-icon">
-        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
           <polyline points="14,2 14,8 20,8"></polyline>
         </svg>
       </span>
       <span class="doc-name">{{ currentDocName }}</span>
-      <span class="arrow" :class="{ open: documentStore.showDocumentSelector }">▲</span>
+      <span class="arrow" :class="{ open: state.isLoaded }">▲</span>
     </button>
 
     <!-- 菜单 -->
-    <div v-if="documentStore.showDocumentSelector" class="doc-menu">
-      <!-- 输入框 -->
-      <div class="input-box">
-        <input
-          ref="inputRef"
-          v-model="inputValue"
-          type="text"
-          class="main-input"
-          :placeholder="t('toolbar.searchOrCreateDocument')"
-          :maxlength="MAX_TITLE_LENGTH"
-          @keydown="handleInputKeydown"
-        />
-        <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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>
-      </div>
+    <Transition name="slide-up">
+      <div v-if="state.isLoaded" class="doc-menu">
+        <!-- 输入框 -->
+        <div class="input-box">
+          <input
+              ref="inputRef"
+              v-model="state.searchQuery"
+              type="text"
+              class="main-input"
+              :placeholder="t('toolbar.searchOrCreateDocument')"
+              :maxlength="MAX_TITLE_LENGTH"
+              @keydown.enter="handleSearchEnter"
+              @keydown.esc="closeMenu"
+          />
+          <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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>
+        </div>
 
-      <!-- 项目列表 -->
-      <div class="item-list">
-        <div
-          v-for="item in filteredItems"
-          :key="item.id"
-          class="list-item"
-          :class="{
-            'active': !item.isCreateOption && documentStore.currentDocument?.id === item.id,
-            'create-item': item.isCreateOption
-          }"
-          @click="selectItem(item)"
-        >
-          <!-- 创建选项 -->
-          <div v-if="item.isCreateOption" class="create-option">
-            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
-                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M5 12h14"></path>
-              <path d="M12 5v14"></path>
-            </svg>
-            <span>{{ item.title }}</span>
-          </div>
-
-          <!-- 文档项 -->
-          <div v-else class="doc-item-content">
-            <!-- 普通显示 -->
-            <div v-if="editingId !== item.id" class="doc-info">
-              <div class="doc-title">{{ item.title }}</div>
-              <!-- 根据状态显示错误信息或时间 -->
-               <div v-if="documentStore.selectorError?.docId === item.id" class="doc-error">
-                 {{ documentStore.selectorError?.message }}
-               </div>
-              <div v-else class="doc-date">{{ formatTime(item.updatedAt) }}</div>
+        <!-- 项目列表 -->
+        <div class="item-list">
+          <div
+              v-for="item in filteredItems"
+              :key="item.id"
+              class="list-item"
+              :class="{
+              'active': !item.isCreateOption && documentStore.currentDocument?.id === item.id,
+              'create-item': item.isCreateOption
+            }"
+              @click="selectDocItem(item)"
+          >
+            <!-- 创建选项 -->
+            <div v-if="item.isCreateOption" class="create-option">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
+                   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M5 12h14"></path>
+                <path d="M12 5v14"></path>
+              </svg>
+              <span>{{ item.title }}</span>
             </div>
 
-            <!-- 编辑状态 -->
-            <div v-else class="doc-edit">
-              <input
-                :ref="el => editInputRef = el as HTMLInputElement"
-                v-model="editingTitle"
-                type="text"
-                class="edit-input"
-                :maxlength="MAX_TITLE_LENGTH"
-                @keydown="handleEditKeydown"
-                @blur="saveEdit"
-                @click.stop
-              />
-            </div>
+            <!-- 文档项 -->
+            <div v-else class="doc-item-content">
+              <!-- 普通显示 -->
+              <div v-if="state.editing.id !== item.id" class="doc-info">
+                <div class="doc-title">{{ item.title }}</div>
+                <div class="doc-date">{{ formatDateTime(item.updated_at) }}</div>
+              </div>
 
-            <!-- 操作按钮 -->
-            <div v-if="editingId !== item.id" class="doc-actions">
-              <!-- 只有非当前文档才显示在新窗口打开按钮 -->
-              <button
-                v-if="documentStore.currentDocument?.id !== item.id"
-                class="action-btn"
-                @click="openInNewWindow(item, $event)"
-                :title="t('toolbar.openInNewWindow')"
-              >
-                <svg width="12" height="12" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-                     fill="currentColor">
-                  <path
-                    d="M172.8 1017.6c-89.6 0-166.4-70.4-166.4-166.4V441.6c0-89.6 70.4-166.4 166.4-166.4h416c89.6 0 166.4 70.4 166.4 166.4v416c0 89.6-70.4 166.4-166.4 166.4l-416-6.4z m0-659.2c-51.2 0-89.6 38.4-89.6 89.6v416c0 51.2 38.4 89.6 89.6 89.6h416c51.2 0 89.6-38.4 89.6-89.6V441.6c0-51.2-38.4-89.6-89.6-89.6H172.8z"></path>
-                  <path
-                    d="M851.2 19.2H435.2C339.2 19.2 268.8 96 268.8 185.6v25.6h70.4v-25.6c0-51.2 38.4-89.6 89.6-89.6h409.6c51.2 0 89.6 38.4 89.6 89.6v409.6c0 51.2-38.4 89.6-89.6 89.6h-38.4V768h51.2c96 0 166.4-76.8 166.4-166.4V185.6c0-96-76.8-166.4-166.4-166.4z"></path>
-                </svg>
-              </button>
-              <button class="action-btn" @click="startRename(item, $event)" :title="t('toolbar.rename')">
-                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
-                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path>
-                </svg>
-              </button>
-              <button
-                v-if="documentStore.documentList.length > 1 && item.id !== 1"
-                class="action-btn delete-btn"
-                :class="{ 'delete-confirm': deleteConfirmId === item.id }"
-                @click="handleDelete(item, $event)"
-                :title="deleteConfirmId === item.id ? t('toolbar.confirmDelete') : t('toolbar.delete')"
-              >
-                <svg v-if="deleteConfirmId !== item.id" xmlns="http://www.w3.org/2000/svg" width="12" height="12"
-                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                     stroke-linejoin="round">
-                  <polyline points="3,6 5,6 21,6"></polyline>
-                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                </svg>
-                <span v-else class="confirm-text">{{ t('toolbar.confirm') }}</span>
-              </button>
+              <!-- 编辑状态 -->
+              <div v-else class="doc-edit">
+                <input
+                    :ref="el => editInputRef = el as HTMLInputElement"
+                    v-model="state.editing.title"
+                    type="text"
+                    class="edit-input"
+                    :maxlength="MAX_TITLE_LENGTH"
+                    @keydown.enter="saveEdit"
+                    @keydown.esc="cancelEdit"
+                    @blur="saveEdit"
+                    @click.stop
+                />
+              </div>
+
+              <!-- 操作按钮 -->
+              <div v-if="state.editing.id !== item.id" class="doc-actions">
+                <!-- 只有非当前文档才显示在新窗口打开按钮 -->
+                <button
+                    v-if="documentStore.currentDocument?.id !== item.id"
+                    class="action-btn"
+                    @click="openInNewWindow(item, $event)"
+                    :title="t('toolbar.openInNewWindow')"
+                >
+                  <svg width="12" height="12" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                       fill="currentColor">
+                    <path
+                        d="M172.8 1017.6c-89.6 0-166.4-70.4-166.4-166.4V441.6c0-89.6 70.4-166.4 166.4-166.4h416c89.6 0 166.4 70.4 166.4 166.4v416c0 89.6-70.4 166.4-166.4 166.4l-416-6.4z m0-659.2c-51.2 0-89.6 38.4-89.6 89.6v416c0 51.2 38.4 89.6 89.6 89.6h416c51.2 0 89.6-38.4 89.6-89.6V441.6c0-51.2-38.4-89.6-89.6-89.6H172.8z"></path>
+                    <path
+                        d="M851.2 19.2H435.2C339.2 19.2 268.8 96 268.8 185.6v25.6h70.4v-25.6c0-51.2 38.4-89.6 89.6-89.6h409.6c51.2 0 89.6 38.4 89.6 89.6v409.6c0 51.2-38.4 89.6-89.6 89.6h-38.4V768h51.2c96 0 166.4-76.8 166.4-166.4V185.6c0-96-76.8-166.4-166.4-166.4z"></path>
+                  </svg>
+                </button>
+                <button class="action-btn" @click="renameDoc(item, $event)" :title="t('toolbar.rename')">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
+                       stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path>
+                  </svg>
+                </button>
+                <button
+                    v-if="state.documentList.length > 1"
+                    class="action-btn delete-btn"
+                    :class="{ 'delete-confirm': isDeleting(item.id!) }"
+                    @click="handleDelete(item, $event)"
+                    :title="isDeleting(item.id!) ? t('toolbar.confirmDelete') : t('toolbar.delete')"
+                >
+                  <svg v-if="!isDeleting(item.id!)" xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+                       viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                       stroke-linejoin="round">
+                    <polyline points="3,6 5,6 21,6"></polyline>
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                  </svg>
+                  <span v-else class="confirm-text">{{ t('toolbar.confirm') }}</span>
+                </button>
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- 空状态 -->
-        <div v-if="filteredItems.length === 0" class="empty">
-          {{ t('toolbar.noDocumentFound') }}
-        </div>
-
-        <!-- 加载状态 -->
-        <div v-if="documentStore.isLoading" class="loading">
-          {{ t('toolbar.loading') }}
+          <!-- 空状态 -->
+          <div v-if="filteredItems.length === 0" class="empty">
+            {{ t('toolbar.noDocumentFound') }}
+          </div>
         </div>
       </div>
-    </div>
+    </Transition>
   </div>
 </template>
 
 <style scoped lang="scss">
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
 .document-selector {
   position: relative;
 
@@ -483,8 +475,8 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
     border: 1px solid var(--border-color);
     border-radius: 3px;
     margin-bottom: 4px;
-    width: 260px;
-    max-height: calc(100vh - 40px); // 限制最大高度，留出titlebar空间(32px)和一些边距
+    width: 340px;
+    max-height: calc(100vh - 40px);
     z-index: 1000;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     overflow: hidden;
@@ -493,7 +485,7 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
 
     .input-box {
       position: relative;
-      padding: 8px;
+      padding: 10px;
       border-bottom: 1px solid var(--border-color);
 
       .main-input {
@@ -502,8 +494,8 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
         background-color: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 2px;
-        padding: 5px 8px 5px 26px;
-        font-size: 11px;
+        padding: 6px 10px 6px 30px;
+        font-size: 12px;
         color: var(--text-primary);
         outline: none;
 
@@ -518,7 +510,7 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
 
       .input-icon {
         position: absolute;
-        left: 14px;
+        left: 16px;
         top: 50%;
         transform: translateY(-50%);
         color: var(--text-muted);
@@ -527,7 +519,7 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
     }
 
     .item-list {
-      max-height: calc(100vh - 100px); // 为输入框和边距预留空间
+      max-height: calc(100vh - 100px);
       overflow-y: auto;
       flex: 1;
 
@@ -539,7 +531,7 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
           background-color: var(--bg-hover);
         }
 
-        &.active {
+          &.active {
           background-color: var(--selection-bg);
 
           .doc-item-content .doc-info {
@@ -547,7 +539,7 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
               color: var(--selection-text);
             }
 
-            .doc-date, .doc-error {
+            .doc-date {
               color: var(--selection-text);
               opacity: 0.7;
             }
@@ -559,8 +551,8 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
             display: flex;
             align-items: center;
             gap: 8px;
-            padding: 8px 8px;
-            font-size: 11px;
+            padding: 10px 10px;
+            font-size: 12px;
             font-weight: normal;
 
             svg {
@@ -574,15 +566,15 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          padding: 8px 8px;
+          padding: 10px 10px;
 
           .doc-info {
             flex: 1;
             min-width: 0;
 
             .doc-title {
-              font-size: 12px;
-              margin-bottom: 2px;
+              font-size: 13px;
+              margin-bottom: 3px;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
@@ -590,17 +582,10 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
             }
 
             .doc-date {
-              font-size: 10px;
+              font-size: 11px;
               color: var(--text-muted);
               opacity: 0.6;
             }
-            
-            .doc-error {
-              font-size: 10px;
-              color: var(--text-danger);
-              font-weight: 500;
-              animation: fadeInOut 3s forwards;
-            }
           }
 
           .doc-edit {
@@ -612,8 +597,8 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
               background-color: var(--bg-primary);
               border: 1px solid var(--border-color);
               border-radius: 2px;
-              padding: 4px 6px;
-              font-size: 11px;
+              padding: 5px 8px;
+              font-size: 12px;
               color: var(--text-primary);
               outline: none;
 
@@ -625,7 +610,7 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
 
           .doc-actions {
             display: flex;
-            gap: 6px;
+            gap: 8px;
             opacity: 0;
             transition: opacity 0.2s ease;
 
@@ -634,7 +619,7 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
               border: none;
               color: var(--text-muted);
               cursor: pointer;
-              padding: 4px;
+              padding: 5px;
               border-radius: 2px;
               display: flex;
               align-items: center;
@@ -655,7 +640,7 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
                   color: white;
 
                   .confirm-text {
-                    font-size: 9px;
+                    font-size: 10px;
                     font-weight: 500;
                   }
                 }
@@ -669,20 +654,13 @@ watch(() => documentStore.showDocumentSelector, (isOpen) => {
         }
       }
 
-      .empty, .loading {
-        padding: 16px 8px;
+      .empty {
+        padding: 18px 10px;
         text-align: center;
-        font-size: 11px;
+        font-size: 12px;
         color: var(--text-muted);
       }
     }
   }
 }
-
-@keyframes fadeInOut {
-  0% { opacity: 0; }
-  10% { opacity: 1; }
-  90% { opacity: 1; }
-  100% { opacity: 0; }
-}
-</style>
+</style>

frontend/src/components/toolbar/Toolbar.vue

@@ -3,6 +3,7 @@ import {useI18n} from 'vue-i18n';
 import {computed, onMounted, onUnmounted, ref, watch, shallowRef, readonly, toRefs, effectScope, onScopeDispose} from 'vue';
 import {useConfigStore} from '@/stores/configStore';
 import {useEditorStore} from '@/stores/editorStore';
+import {useEditorStateStore} from '@/stores/editorStateStore';
 import {useUpdateStore} from '@/stores/updateStore';
 import {useWindowStore} from '@/stores/windowStore';
 import {useSystemStore} from '@/stores/systemStore';
@@ -15,6 +16,7 @@ import {formatBlockContent} from '@/views/editor/extensions/codeblock/formatCode
 import {createDebounce} from '@/common/utils/debounce';
 
 const editorStore = useEditorStore();
+const editorStateStore = useEditorStateStore();
 const configStore = useConfigStore();
 const updateStore = useUpdateStore();
 const windowStore = useWindowStore();
@@ -25,7 +27,6 @@ const router = useRouter();
 const canFormatCurrentBlock = ref(false);
 const isLoaded = shallowRef(false);
 
-const { documentStats } = toRefs(editorStore);
 const { config } = toRefs(configStore);
 
 // 窗口置顶状态
@@ -57,14 +58,14 @@ const goToSettings = () => {
 
 // 执行格式化
 const formatCurrentBlock = () => {
-  if (!canFormatCurrentBlock.value || !editorStore.editorView) return;
-  formatBlockContent(editorStore.editorView);
+  if (!canFormatCurrentBlock.value || !editorStore.currentEditor) return;
+  formatBlockContent(editorStore.currentEditor);
 };
 
 
 // 统一更新按钮状态
 const updateButtonStates = () => {
-  const view: any = editorStore.editorView;
+  const view: any = editorStore.currentEditor;
   if (!view) {
     canFormatCurrentBlock.value = false;
     return;
@@ -125,7 +126,7 @@ const setupEditorListeners = (view: any) => {
 
 // 监听编辑器视图变化
 watch(
-    () => editorStore.editorView,
+    () => editorStore.currentEditor,
     (newView) => {
       // 在 scope 中管理副作用
       editorScope.run(() => {
@@ -191,11 +192,13 @@ const updateButtonTitle = computed(() => {
 });
 
 // 统计数据的计算属性
-const statsData = computed(() => ({
-  lines: documentStats.value.lines,
-  characters: documentStats.value.characters,
-  selectedCharacters: documentStats.value.selectedCharacters
-}));
+const statsData = computed(() => {
+  const docId = editorStore.currentEditorId;
+  if (!docId) {
+    return { lines: 0, characters: 0, selectedCharacters: 0 };
+  }
+  return editorStateStore.getDocumentStats(docId);
+});
 </script>
 
 <template>

frontend/src/composables/index.ts

@@ -0,0 +1,5 @@
+export { useConfirm } from './useConfirm';
+export type { UseConfirmOptions } from './useConfirm';
+
+export { usePolling } from './usePolling';
+export type { UsePollingOptions, UsePollingReturn } from './usePolling';

frontend/src/composables/useConfirm.ts

@@ -0,0 +1,174 @@
+import { ref, readonly, onUnmounted, type Ref, type DeepReadonly } from 'vue';
+
+export interface UseConfirmOptions<T extends string | number = string | number> {
+  /** Auto cancel timeout in ms (default: 3000, set 0 to disable) */
+  timeout?: number;
+  /** Callback when confirmed */
+  onConfirm?: (id: T) => void | Promise<void>;
+  /** Callback when cancelled (timeout or manual) */
+  onCancel?: (id: T) => void;
+}
+
+export interface UseConfirmReturn<T extends string | number = string | number> {
+  /** Current confirming id (readonly) */
+  confirmId: DeepReadonly<Ref<T | null>>;
+  /** Whether confirm action is executing */
+  isPending: DeepReadonly<Ref<boolean>>;
+  /** Check if a specific id is in confirming state */
+  isConfirming: (id: T) => boolean;
+  /** Start confirming state (with auto timeout) */
+  startConfirm: (id: T) => void;
+  /** Request confirmation (toggle between request and execute) */
+  requestConfirm: (id: T) => Promise<boolean>;
+  /** Manually confirm current id */
+  confirm: () => Promise<void>;
+  /** Cancel confirmation */
+  cancel: () => void;
+  /** Reset without triggering callbacks */
+  reset: () => void;
+}
+
+/**
+ * Composable for handling confirm actions (e.g., delete confirmation)
+ * 
+ * @example
+ * ```ts
+ * // Basic usage
+ * const { isConfirming, requestConfirm } = useConfirm({
+ *   timeout: 3000,
+ *   onConfirm: async (id) => { await deleteItem(id) }
+ * })
+ * 
+ * // In template
+ * <button @click="requestConfirm('delete')">
+ *   {{ isConfirming('delete') ? 'Confirm?' : 'Delete' }}
+ * </button>
+ * 
+ * // With loading state
+ * const { isPending, requestConfirm } = useConfirm({ ... })
+ * <button :disabled="isPending" @click="requestConfirm('id')">
+ *   {{ isPending ? 'Processing...' : 'Delete' }}
+ * </button>
+ * ```
+ */
+export function useConfirm<T extends string | number = string | number>(
+  options: UseConfirmOptions<T> = {}
+): UseConfirmReturn<T> {
+  const { timeout = 3000, onConfirm, onCancel } = options;
+
+  const confirmId = ref<T | null>(null) as Ref<T | null>;
+  const isPending = ref(false);
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  const clearTimer = (): void => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+
+  /**
+   * Check if a specific id is in confirming state
+   */
+  const isConfirming = (id: T): boolean => {
+    return confirmId.value === id;
+  };
+
+  /**
+   * Start confirming state for an id (with auto timeout)
+   */
+  const startConfirm = (id: T): void => {
+    clearTimer();
+    confirmId.value = id;
+
+    // Auto cancel after timeout (0 = disabled)
+    if (timeout > 0) {
+      timeoutId = setTimeout(() => {
+        if (confirmId.value === id) {
+          confirmId.value = null;
+          onCancel?.(id);
+        }
+      }, timeout);
+    }
+  };
+
+  /**
+   * Request confirmation for an id
+   * - First click: enter confirming state
+   * - Second click: execute confirm action
+   * @returns true if confirmed, false if entered confirming state
+   */
+  const requestConfirm = async (id: T): Promise<boolean> => {
+    // Prevent action while pending
+    if (isPending.value) return false;
+
+    if (confirmId.value === id) {
+      // Already confirming, execute action
+      clearTimer();
+      isPending.value = true;
+      try {
+        await onConfirm?.(id);
+        return true;
+      } finally {
+        confirmId.value = null;
+        isPending.value = false;
+      }
+    } else {
+      // Enter confirming state
+      startConfirm(id);
+      return false;
+    }
+  };
+
+  /**
+   * Manually confirm the current id
+   */
+  const confirm = async (): Promise<void> => {
+    if (confirmId.value === null || isPending.value) return;
+    
+    clearTimer();
+    const id = confirmId.value;
+    isPending.value = true;
+    try {
+      await onConfirm?.(id);
+    } finally {
+      confirmId.value = null;
+      isPending.value = false;
+    }
+  };
+
+  /**
+   * Cancel the confirming state
+   */
+  const cancel = (): void => {
+    if (confirmId.value === null) return;
+    
+    const id = confirmId.value;
+    clearTimer();
+    confirmId.value = null;
+    onCancel?.(id);
+  };
+
+  /**
+   * Reset state without triggering callbacks
+   */
+  const reset = (): void => {
+    clearTimer();
+    confirmId.value = null;
+    isPending.value = false;
+  };
+
+  // Cleanup on unmount
+  onUnmounted(clearTimer);
+
+  return {
+    confirmId: readonly(confirmId),
+    isPending: readonly(isPending),
+    isConfirming,
+    startConfirm,
+    requestConfirm,
+    confirm,
+    cancel,
+    reset
+  };
+}

frontend/src/composables/usePolling.ts

@@ -0,0 +1,147 @@
+import { ref, readonly, onUnmounted, type Ref, type DeepReadonly } from 'vue';
+
+export interface UsePollingOptions<T> {
+  /** Polling interval in ms (default: 500) */
+  interval?: number;
+  /** Execute immediately when started (default: true) */
+  immediate?: boolean;
+  /** Auto-stop condition, return true to stop polling */
+  shouldStop?: (data: T) => boolean;
+  /** Callback on each successful poll */
+  onSuccess?: (data: T) => void;
+  /** Callback when error occurs */
+  onError?: (error: unknown) => void;
+  /** Callback when polling stops (either manual or auto) */
+  onStop?: () => void;
+}
+
+export interface UsePollingReturn<T> {
+  /** Latest fetched data (readonly) */
+  data: DeepReadonly<Ref<T | null>>;
+  /** Error message if any (readonly) */
+  error: DeepReadonly<Ref<string>>;
+  /** Whether polling is active (readonly) */
+  isActive: DeepReadonly<Ref<boolean>>;
+  /** Start polling */
+  start: () => void;
+  /** Stop polling */
+  stop: () => void;
+  /** Reset all state (also stops polling) */
+  reset: () => void;
+}
+
+/**
+ * Composable for polling async operations with auto-stop support
+ * 
+ * @example
+ * ```ts
+ * // Basic usage
+ * const { data, isActive, start, stop } = usePolling(
+ *   () => api.getProgress(),
+ *   {
+ *     interval: 200,
+ *     shouldStop: (d) => d.progress >= 100 || !!d.error,
+ *     onSuccess: (d) => console.log('Progress:', d.progress)
+ *   }
+ * )
+ * 
+ * // Start polling
+ * start()
+ * 
+ * // With reactive data binding
+ * <div>{{ isActive ? `${data?.progress}%` : 'Idle' }}</div>
+ * ```
+ */
+export function usePolling<T>(
+  fetcher: () => Promise<T>,
+  options: UsePollingOptions<T> = {}
+): UsePollingReturn<T> {
+  const {
+    interval = 500,
+    immediate = true,
+    shouldStop,
+    onSuccess,
+    onError,
+    onStop
+  } = options;
+
+  const data = ref<T | null>(null) as Ref<T | null>;
+  const error = ref('');
+  const isActive = ref(false);
+  let timerId = 0;
+
+  const clearTimer = (): void => {
+    if (timerId) {
+      clearInterval(timerId);
+      timerId = 0;
+    }
+  };
+
+  const poll = async (): Promise<void> => {
+    try {
+      const result = await fetcher();
+      data.value = result;
+      error.value = '';
+      onSuccess?.(result);
+
+      // Check auto-stop condition
+      if (shouldStop?.(result)) {
+        stop();
+      }
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : String(e);
+      onError?.(e);
+      stop();
+    }
+  };
+
+  /**
+   * Start polling
+   */
+  const start = (): void => {
+    if (isActive.value) return;
+
+    isActive.value = true;
+    error.value = '';
+
+    // Execute immediately if configured
+    if (immediate) {
+      poll();
+    }
+
+    timerId = window.setInterval(poll, interval);
+  };
+
+  /**
+   * Stop polling
+   */
+  const stop = (): void => {
+    if (!isActive.value) return;
+
+    clearTimer();
+    isActive.value = false;
+    onStop?.();
+  };
+
+  /**
+   * Reset all state to initial values
+   */
+  const reset = (): void => {
+    clearTimer();
+    data.value = null;
+    error.value = '';
+    isActive.value = false;
+  };
+
+  // Cleanup on unmount
+  onUnmounted(clearTimer);
+
+  return {
+    data: readonly(data),
+    error: readonly(error),
+    isActive: readonly(isActive),
+    start,
+    stop,
+    reset
+  };
+}

frontend/src/directives/clickOutside.ts

@@ -0,0 +1,37 @@
+import type { Directive, DirectiveBinding } from 'vue';
+
+type ClickOutsideHandler = (event: MouseEvent) => void;
+
+interface ClickOutsideElement extends HTMLElement {
+  _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+
+/**
+ * v-click-outside directive
+ * Triggers a callback when clicking outside the element
+ *
+ * Usage:
+ * <div v-click-outside="handleClickOutside">...</div>
+ */
+export const clickOutside: Directive<ClickOutsideElement, ClickOutsideHandler> = {
+  mounted(el: ClickOutsideElement, binding: DirectiveBinding<ClickOutsideHandler>) {
+    const handler = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (el && !el.contains(target)) {
+        binding.value(event);
+      }
+    };
+
+    el._clickOutsideHandler = handler;
+    document.addEventListener('click', handler);
+  },
+
+  unmounted(el: ClickOutsideElement) {
+    if (el._clickOutsideHandler) {
+      document.removeEventListener('click', el._clickOutsideHandler);
+      delete el._clickOutsideHandler;
+    }
+  }
+};
+
+export default clickOutside;

frontend/src/directives/index.ts

@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+import { clickOutside } from './clickOutside';
+
+export { clickOutside };
+
+/**
+ * Register all custom directives
+ */
+export function registerDirectives(app: App) {
+  app.directive('click-outside', clickOutside);
+}
+
+export default registerDirectives;

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

@@ -1,5 +1,14 @@
 export default {
   locale: 'en-US',
+  common: {
+    ok: 'OK',
+    cancel: 'Cancel',
+    edit: 'Edit',
+    delete: 'Delete',
+    confirm: 'Confirm',
+    save: 'Save',
+    reset: 'Reset'
+  },
   titlebar: {
     minimize: 'Minimize',
     maximize: 'Maximize',
@@ -33,13 +42,6 @@ export default {
     confirmDelete: 'Click again to confirm delete',
     openInNewWindow: 'Open in New Window',
     alreadyOpenInNewWindow: 'Already open in another window',
-    documentNameTooLong: 'Document name cannot exceed {max} characters',
-    documentNameRequired: 'Document name cannot be empty',
-    cannotDeleteLastDocument: 'Cannot delete the last document',
-    cannotDeleteDefaultDocument: 'Cannot delete the default document',
-    unknownTime: 'Unknown time',
-    invalidDate: 'Invalid date',
-    timeError: 'Time error',
   },
   languages: {
     'zh-CN': 'Chinese',
@@ -51,11 +53,31 @@ export default {
     auto: 'Follow System'
   },
   keybindings: {
+    keymapMode: 'Keymap Mode',
+    modes: {
+      standard: 'Standard Mode',
+      emacs: 'Emacs Mode'
+    },
     headers: {
       shortcut: 'Shortcut',
-      category: 'Category',
+      extension: 'Extension',
       description: 'Description'
     },
+    resetToDefault: 'Reset to Default',
+    confirmReset: 'Confirm Reset?',
+    noKeybinding: 'Not Set',
+    waitingForKey: 'Waiting...',
+    clickToSet: 'Click to set keybinding',
+    editKeybinding: 'Edit keybinding',
+    config: {
+      enabled: 'Enabled',
+      preventDefault: 'Prevent Default',
+      keybinding: 'Keybinding'
+    },
+    keyPlaceholder: 'Enter key, press Enter to add',
+    invalidFormat: 'Invalid format',
+    conflict: 'Conflict: {command}',
+    maxKeysReached: 'Maximum 4 keys allowed',
     commands: {
       showSearch: 'Show search panel',
       hideSearch: 'Hide search panel',
@@ -83,6 +105,7 @@ export default {
       blockCopy: 'Copy',
       blockCut: 'Cut',
       blockPaste: 'Paste',
+      copyBlockImage: 'Copy block image',
       historyUndo: 'Undo',
       historyRedo: 'Redo',
       historyUndoSelection: 'Undo selection',
@@ -100,6 +123,25 @@ export default {
       insertBlankLine: 'Insert blank line',
       selectLine: 'Select line',
       selectParentSyntax: 'Select parent syntax',
+      simplifySelection: 'Simplify selection',
+      addCursorAbove: 'Add cursor above',
+      addCursorBelow: 'Add cursor below',
+      cursorGroupLeft: 'Cursor word left',
+      cursorGroupRight: 'Cursor word right',
+      selectGroupLeft: 'Select word left',
+      selectGroupRight: 'Select word right',
+      deleteToLineEnd: 'Delete to line end',
+      deleteToLineStart: 'Delete to line start',
+      cursorLineStart: 'Cursor to line start',
+      cursorLineEnd: 'Cursor to line end',
+      selectLineStart: 'Select to line start',
+      selectLineEnd: 'Select to line end',
+      cursorDocStart: 'Cursor to document start',
+      cursorDocEnd: 'Cursor to document end',
+      selectDocStart: 'Select to document start',
+      selectDocEnd: 'Select to document end',
+      selectMatchingBracket: 'Select to matching bracket',
+      splitLine: 'Split line',
       indentLess: 'Indent less',
       indentMore: 'Indent more',
       indentSelection: 'Indent selection',
@@ -111,6 +153,18 @@ export default {
       deleteCharForward: 'Delete character forward',
       deleteGroupBackward: 'Delete group backward',
       deleteGroupForward: 'Delete group forward',
+
+      // Emacs mode additional basic navigation commands
+      cursorCharLeft: 'Cursor left one character',
+      cursorCharRight: 'Cursor right one character',
+      cursorLineUp: 'Cursor up one line',
+      cursorLineDown: 'Cursor down one line',
+      cursorPageUp: 'Page up',
+      cursorPageDown: 'Page down',
+      selectCharLeft: 'Select left one character',
+      selectCharRight: 'Select right one character',
+      selectLineUp: 'Select up one line',
+      selectLineDown: 'Select down one line',
     }
   },
   tabs: {
@@ -146,6 +200,7 @@ export default {
     enableWindowSnap: 'Enable Window Snapping',
     enableLoadingAnimation: 'Enable Loading Animation',
     enableTabs: 'Enable Tabs',
+    enableMemoryMonitor: 'Enable Memory Monitor',
     startup: 'Startup Settings',
     startAtLogin: 'Start at Login',
     dataStorage: 'Data Storage',
@@ -191,6 +246,7 @@ export default {
       categoryEditing: 'Editing Enhancement',
       categoryUI: 'UI Enhancement',
       categoryTools: 'Tools',
+      enabled: 'Enabled',
       configuration: 'Configuration',
       resetToDefault: 'Reset to Default Configuration',
     },
@@ -234,14 +290,10 @@ export default {
       sshKeyPassphrase: 'SSH Key Passphrase',
       sshKeyPassphrasePlaceholder: 'Enter SSH key passphrase',
       backupOperations: 'Backup Operations',
-      pushToRemote: 'Push to Remote',
-      pushing: 'Pushing...',
+      syncToRemote: 'Sync to Remote',
+      syncing: 'Syncing...',
       actions: {
-        push: 'Push',
-      },
-      status: {
-        success: 'Success',
-        failed: 'Failed'
+        sync: 'Sync',
       }
     },
   },
@@ -297,6 +349,15 @@ export default {
     highlightTrailingWhitespace: {
       name: 'Highlight Trailing Whitespace',
       description: 'Highlight trailing whitespace at the end of lines'
+    },
+    httpClient: {
+      name: 'HTTP Client',
+      description: 'Send HTTP requests directly in the editor and view responses'
+    },
+    blockImage: {
+      name: 'Block Image Export',
+      description: 'Render the current code block to an image and copy it to the clipboard',
+      copyMenu: 'Copy block as image'
     }
   },
   monitor: {

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

@@ -1,5 +1,14 @@
 export default {
   locale: 'zh-CN',
+  common: {
+    ok: '确定',
+    cancel: '取消',
+    edit: '编辑',
+    delete: '删除',
+    confirm: '确认',
+    save: '保存',
+    reset: '重置'
+  },
   titlebar: {
     minimize: '最小化',
     maximize: '最大化',
@@ -33,13 +42,6 @@ export default {
     confirmDelete: '再次点击确认删除',
     openInNewWindow: '在新窗口中打开',
     alreadyOpenInNewWindow: '已在新窗口中打开',
-    documentNameTooLong: '文档名称不能超过{max}个字符',
-    documentNameRequired: '文档名称不能为空',
-    cannotDeleteLastDocument: '无法删除最后一个文档',
-    cannotDeleteDefaultDocument: '无法删除默认文档',
-    unknownTime: '未知时间',
-    invalidDate: '无效日期',
-    timeError: '时间错误',
   },
   languages: {
     'zh-CN': '简体中文',
@@ -51,11 +53,31 @@ export default {
     auto: '跟随系统'
   },
   keybindings: {
+    keymapMode: '快捷键模式',
+    modes: {
+      standard: '标准模式',
+      emacs: 'Emacs 模式'
+    },
     headers: {
       shortcut: '快捷键',
-      category: '分类',
+      extension: '扩展',
       description: '描述'
     },
+    resetToDefault: '重置为默认',
+    confirmReset: '确认重置？',
+    noKeybinding: '未设置',
+    waitingForKey: '等待输入...',
+    clickToSet: '点击设置快捷键',
+    editKeybinding: '编辑快捷键',
+    config: {
+      enabled: '启用',
+      preventDefault: '阻止默认',
+      keybinding: '快捷键'
+    },
+    keyPlaceholder: '输入键名, 回车添加',
+    invalidFormat: '格式错误',
+    conflict: '冲突: {command}',
+    maxKeysReached: '最多只能添加4个键',
     commands: {
       showSearch: '显示搜索面板',
       hideSearch: '隐藏搜索面板',
@@ -83,6 +105,7 @@ export default {
       blockCopy: '复制',
       blockCut: '剪切',
       blockPaste: '粘贴',
+      copyBlockImage: '复制块图片',
       historyUndo: '撤销',
       historyRedo: '重做',
       historyUndoSelection: '撤销选择',
@@ -100,6 +123,25 @@ export default {
       insertBlankLine: '插入空行',
       selectLine: '选择行',
       selectParentSyntax: '选择父级语法',
+      simplifySelection: '简化选择',
+      addCursorAbove: '在上方添加光标',
+      addCursorBelow: '在下方添加光标',
+      cursorGroupLeft: '光标按单词左移',
+      cursorGroupRight: '光标按单词右移',
+      selectGroupLeft: '按单词选择左侧',
+      selectGroupRight: '按单词选择右侧',
+      deleteToLineEnd: '删除到行尾',
+      deleteToLineStart: '删除到行首',
+      cursorLineStart: '移动到行首',
+      cursorLineEnd: '移动到行尾',
+      selectLineStart: '选择到行首',
+      selectLineEnd: '选择到行尾',
+      cursorDocStart: '跳转到文档开头',
+      cursorDocEnd: '跳转到文档结尾',
+      selectDocStart: '选择到文档开头',
+      selectDocEnd: '选择到文档结尾',
+      selectMatchingBracket: '选择到匹配括号',
+      splitLine: '分割行',
       indentLess: '减少缩进',
       indentMore: '增加缩进',
       indentSelection: '缩进选择',
@@ -111,6 +153,18 @@ export default {
       deleteCharForward: '向前删除字符',
       deleteGroupBackward: '向后删除组',
       deleteGroupForward: '向前删除组',
+
+      // Emacs 模式额外的基础导航命令
+      cursorCharLeft: '光标左移一个字符',
+      cursorCharRight: '光标右移一个字符',
+      cursorLineUp: '光标上移一行',
+      cursorLineDown: '光标下移一行',
+      cursorPageUp: '向上翻页',
+      cursorPageDown: '向下翻页',
+      selectCharLeft: '选择左移一个字符',
+      selectCharRight: '选择右移一个字符',
+      selectLineUp: '选择上移一行',
+      selectLineDown: '选择下移一行',
     }
   },
   tabs: {
@@ -147,6 +201,7 @@ export default {
     enableWindowSnap: '启用窗口吸附',
     enableLoadingAnimation: '启用加载动画',
     enableTabs: '启用标签页',
+    enableMemoryMonitor: '启用内存监视器',
     startup: '启动设置',
     startAtLogin: '开机自启动',
     dataStorage: '数据存储',
@@ -194,6 +249,7 @@ export default {
       categoryEditing: '编辑增强',
       categoryUI: '界面增强',
       categoryTools: '工具扩展',
+      enabled: '启用',
       configuration: '配置',
       resetToDefault: '重置为默认配置',
     },
@@ -236,14 +292,10 @@ export default {
       sshKeyPassphrase: 'SSH密钥密码',
       sshKeyPassphrasePlaceholder: '请输入SSH密钥密码',
       backupOperations: '备份操作',
-      pushToRemote: '推送到远程',
-      pushing: '推送中...',
+      syncToRemote: '同步到远程',
+      syncing: '同步中...',
       actions: {
-        push: '推送',
-      },
-      status: {
-        success: '成功',
-        failed: '失败'
+        sync: '同步',
       }
     },
   },
@@ -299,6 +351,15 @@ export default {
     highlightTrailingWhitespace: {
       name: '高亮行尾空白',
       description: '高亮显示行尾的多余空白字符'
+    },
+    httpClient: {
+      name: 'HTTP 客户端',
+      description: '在编辑器中直接发送 HTTP 请求并查看响应'
+    },
+    blockImage: {
+      name: '代码块导出图片',
+      description: '将当前代码块渲染为图片并复制到剪贴板',
+      copyMenu: '复制块为图片'
     }
   },
   monitor: {

frontend/src/main.ts

@@ -1,15 +1,21 @@
-import {createApp} from 'vue';
+import { createApp } from 'vue';
 import App from './App.vue';
 import '@/assets/styles/index.css';
-import {createPinia} from 'pinia';
+import { createPinia } from 'pinia';
 import i18n from './i18n';
 import router from './router';
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import { registerDirectives } from './directives';
+import {EditorView} from "@codemirror/view";
+
+(EditorView as any).EDIT_CONTEXT = false;
+
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
-const pinia = createPinia()
-pinia.use(piniaPluginPersistedstate)
 const app = createApp(App);
-app.use(pinia)
+app.use(pinia);
 app.use(i18n);
 app.use(router);
+registerDirectives(app);
 app.mount('#app');

frontend/src/stores/backupStore.ts

@@ -1,49 +1,28 @@
 import { defineStore } from 'pinia';
-import { ref, onScopeDispose } from 'vue';
+import { ref } from 'vue';
 import { BackupService } from '@/../bindings/voidraft/internal/services';
-import { useConfigStore } from '@/stores/configStore';
-import { createTimerManager } from '@/common/utils/timerUtils';
 
 export const useBackupStore = defineStore('backup', () => {
-  const isPushing = ref(false);
-  const message = ref<string | null>(null);
-  const isError = ref(false);
-  
-  const timer = createTimerManager();
-  const configStore = useConfigStore();
+  const isSyncing = ref(false);
 
-  onScopeDispose(() => timer.clear());
-
-  const pushToRemote = async () => {
-    const isConfigured = Boolean(configStore.config.backup.repo_url?.trim());
-    
-    if (isPushing.value || !isConfigured) {
+  const sync = async (): Promise<void> => {
+    if (isSyncing.value) {
       return;
     }
 
+    isSyncing.value = true;
+
     try {
-      isPushing.value = true;
-      message.value = null;
-      timer.clear();
-      
-      await BackupService.PushToRemote();
-      
-      isError.value = false;
-      message.value = 'push successful';
-      timer.set(() => { message.value = null; }, 3000);
-    } catch (error) {
-      isError.value = true;
-      message.value = error instanceof Error ? error.message : 'backup operation failed';
-      timer.set(() => { message.value = null; }, 5000);
+      await BackupService.Sync();
+    } catch (e) {
+      throw e;
     } finally {
-      isPushing.value = false;
+      isSyncing.value = false;
     }
   };
 
   return {
-    isPushing,
-    message,
-    isError,
-    pushToRemote
+    isSyncing,
+    sync
   };
 });

frontend/src/stores/configStore.ts

@@ -1,18 +1,10 @@
 import {defineStore} from 'pinia';
 import {computed, reactive} from 'vue';
 import {ConfigService, StartupService} from '@/../bindings/voidraft/internal/services';
-import {
-    AppConfig,
-    AuthMethod,
-    EditingConfig,
-    LanguageType,
-    SystemThemeType,
-    TabType
-} from '@/../bindings/voidraft/internal/models/models';
+import {AppConfig, AuthMethod, LanguageType, SystemThemeType, TabType} from '@/../bindings/voidraft/internal/models/models';
 import {useI18n} from 'vue-i18n';
 import {ConfigUtils} from '@/common/utils/configUtils';
 import {FONT_OPTIONS} from '@/common/constant/fonts';
-import {SUPPORTED_LOCALES} from '@/common/constant/locales';
 import {
     CONFIG_KEY_MAP,
     CONFIG_LIMITS,
@@ -36,12 +28,6 @@ export const useConfigStore = defineStore('config', () => {
     // Font options (no longer localized)
     const fontOptions = computed(() => FONT_OPTIONS);
 
-    // 计算属性
-    const createLimitComputed = (key: NumberConfigKey) => computed(() => CONFIG_LIMITS[key]);
-    const limits = Object.fromEntries(
-        (['fontSize', 'tabSize', 'lineHeight'] as const).map(key => [key, createLimitComputed(key)])
-    ) as Record<NumberConfigKey, ReturnType<typeof createLimitComputed>>;
-
     // 统一配置更新方法
     const updateConfig = async <K extends ConfigKey>(key: K, value: any): Promise<void> => {
         if (!state.configLoaded && !state.isLoading) {
@@ -99,39 +85,12 @@ export const useConfigStore = defineStore('config', () => {
         }
     };
 
-    // 通用数值调整器工厂
-    const createAdjuster = <T extends NumberConfigKey>(key: T) => {
-        const limit = CONFIG_LIMITS[key];
-        const clamp = (value: number) => ConfigUtils.clamp(value, limit.min, limit.max);
-
-        return {
-            increase: async () => await updateConfig(key, clamp(state.config.editing[key] + 1)),
-            decrease: async () => await updateConfig(key, clamp(state.config.editing[key] - 1)),
-            set: async (value: number) => await updateConfig(key, clamp(value)),
-            reset: async () => await updateConfig(key, limit.default),
-            increaseLocal: () => updateConfigLocal(key, clamp(state.config.editing[key] + 1)),
-            decreaseLocal: () => updateConfigLocal(key, clamp(state.config.editing[key] - 1))
-        };
-    };
-
-    const createEditingToggler = <T extends keyof EditingConfig>(key: T) =>
-        async () => await updateConfig(key as ConfigKey, !state.config.editing[key] as EditingConfig[T]);
-
-    // 枚举值切换器
-    const createEnumToggler = <T extends TabType>(key: 'tabType', values: readonly T[]) =>
-        async () => {
-            const currentIndex = values.indexOf(state.config.editing[key] as T);
-            const nextIndex = (currentIndex + 1) % values.length;
-            return await updateConfig(key, values[nextIndex]);
-        };
-
     // 重置配置
     const resetConfig = async (): Promise<void> => {
         if (state.isLoading) return;
 
         state.isLoading = true;
         try {
-
             await ConfigService.ResetConfig();
             const appConfig = await ConfigService.GetConfig();
             if (appConfig) {
@@ -142,57 +101,25 @@ export const useConfigStore = defineStore('config', () => {
         }
     };
 
-    // 语言设置方法
-    const setLanguage = async (language: LanguageType): Promise<void> => {
-        await updateConfig('language', language);
-        const frontendLocale = ConfigUtils.backendLanguageToFrontend(language);
-        locale.value = frontendLocale as any;
+    // 辅助函数：限制数值范围
+    const clampValue = (value: number, key: NumberConfigKey): number => {
+        const limit = CONFIG_LIMITS[key];
+        return ConfigUtils.clamp(value, limit.min, limit.max);
     };
 
-    // 系统主题设置方法
-    const setSystemTheme = async (systemTheme: SystemThemeType): Promise<void> => {
-        await updateConfig('systemTheme', systemTheme);
-    };
+    // 计算属性
+    const fontConfig = computed(() => ({
+        fontSize: state.config.editing.fontSize,
+        fontFamily: state.config.editing.fontFamily,
+        lineHeight: state.config.editing.lineHeight,
+        fontWeight: state.config.editing.fontWeight
+    }));
 
-    // 当前主题设置方法
-    const setCurrentTheme = async (themeName: string): Promise<void> => {
-        await updateConfig('currentTheme', themeName);
-    };
-
-
-    // 初始化语言设置
-    const initializeLanguage = async (): Promise<void> => {
-        try {
-            // 如果配置未加载，先加载配置
-            if (!state.configLoaded) {
-                await initConfig();
-            }
-
-            // 同步前端语言设置
-            const frontendLocale = ConfigUtils.backendLanguageToFrontend(state.config.appearance.language);
-            locale.value = frontendLocale as any;
-        } catch (_error) {
-            const browserLang = SUPPORTED_LOCALES[0].code;
-            locale.value = browserLang as any;
-        }
-    };
-
-    // 创建数值调整器实例
-    const adjusters = {
-        fontSize: createAdjuster('fontSize'),
-        tabSize: createAdjuster('tabSize'),
-        lineHeight: createAdjuster('lineHeight')
-    };
-
-    // 创建切换器实例
-    const togglers = {
-        tabIndent: createEditingToggler('enableTabIndent'),
-        alwaysOnTop: async () => {
-            await updateConfig('alwaysOnTop', !state.config.general.alwaysOnTop);
-            await runtime.Window.SetAlwaysOnTop(state.config.general.alwaysOnTop);
-        },
-        tabType: createEnumToggler('tabType', CONFIG_LIMITS.tabType.values)
-    };
+    const tabConfig = computed(() => ({
+        tabSize: state.config.editing.tabSize,
+        enableTabIndent: state.config.editing.enableTabIndent,
+        tabType: state.config.editing.tabType
+    }));
 
     return {
         // 状态
@@ -200,55 +127,86 @@ export const useConfigStore = defineStore('config', () => {
         configLoaded: computed(() => state.configLoaded),
         isLoading: computed(() => state.isLoading),
         fontOptions,
-
-        // 限制常量
-        ...limits,
+        fontConfig,
+        tabConfig,
 
         // 核心方法
         initConfig,
         resetConfig,
 
         // 语言相关方法
-        setLanguage,
-        initializeLanguage,
+        setLanguage: (value: LanguageType) => {
+            updateConfig('language', value);
+            locale.value = value as any;
+        },
 
         // 主题相关方法
-        setSystemTheme,
-        setCurrentTheme,
+        setSystemTheme: (value: SystemThemeType) => updateConfig('systemTheme', value),
+        setCurrentTheme: (value: string) => updateConfig('currentTheme', value),
 
         // 字体大小操作
-        ...adjusters.fontSize,
-        increaseFontSize: adjusters.fontSize.increase,
-        decreaseFontSize: adjusters.fontSize.decrease,
-        resetFontSize: adjusters.fontSize.reset,
-        setFontSize: adjusters.fontSize.set,
-        // 字体大小操作
-        increaseFontSizeLocal: adjusters.fontSize.increaseLocal,
-        decreaseFontSizeLocal: adjusters.fontSize.decreaseLocal,
-        saveFontSize: () => saveConfig('fontSize'),
-
-        // Tab操作
-        toggleTabIndent: togglers.tabIndent,
-        setEnableTabIndent: (value: boolean) => updateConfig('enableTabIndent', value),
-        ...adjusters.tabSize,
-        increaseTabSize: adjusters.tabSize.increase,
-        decreaseTabSize: adjusters.tabSize.decrease,
-        setTabSize: adjusters.tabSize.set,
-        toggleTabType: togglers.tabType,
-
-        // 行高操作
-        setLineHeight: adjusters.lineHeight.set,
-
-        // 窗口操作
-        toggleAlwaysOnTop: togglers.alwaysOnTop,
-        setAlwaysOnTop: (value: boolean) => updateConfig('alwaysOnTop', value),
+        setFontSize: async (value: number) => {
+            await updateConfig('fontSize', clampValue(value, 'fontSize'));
+        },
+        increaseFontSize: async () => {
+            const newValue = state.config.editing.fontSize + 1;
+            await updateConfig('fontSize', clampValue(newValue, 'fontSize'));
+        },
+        decreaseFontSize: async () => {
+            const newValue = state.config.editing.fontSize - 1;
+            await updateConfig('fontSize', clampValue(newValue, 'fontSize'));
+        },
+        resetFontSize: async () => {
+            await updateConfig('fontSize', CONFIG_LIMITS.fontSize.default);
+        },
+        increaseFontSizeLocal: () => {
+            updateConfigLocal('fontSize', clampValue(state.config.editing.fontSize + 1, 'fontSize'));
+        },
+        decreaseFontSizeLocal: () => {
+            updateConfigLocal('fontSize', clampValue(state.config.editing.fontSize - 1, 'fontSize'));
+        },
+        saveFontSize: async () => {
+            await saveConfig('fontSize');
+        },
 
         // 字体操作
         setFontFamily: (value: string) => updateConfig('fontFamily', value),
         setFontWeight: (value: string) => updateConfig('fontWeight', value),
 
+        // 行高操作
+        setLineHeight: async (value: number) => {
+            await updateConfig('lineHeight', clampValue(value, 'lineHeight'));
+        },
+
+        // Tab操作
+        setEnableTabIndent: (value: boolean) => updateConfig('enableTabIndent', value),
+        setTabSize: async (value: number) => {
+            await updateConfig('tabSize', clampValue(value, 'tabSize'));
+        },
+        increaseTabSize: async () => {
+            const newValue = state.config.editing.tabSize + 1;
+            await updateConfig('tabSize', clampValue(newValue, 'tabSize'));
+        },
+        decreaseTabSize: async () => {
+            const newValue = state.config.editing.tabSize - 1;
+            await updateConfig('tabSize', clampValue(newValue, 'tabSize'));
+        },
+        toggleTabType: async () => {
+            const values = CONFIG_LIMITS.tabType.values;
+            const currentIndex = values.indexOf(state.config.editing.tabType as typeof values[number]);
+            const nextIndex = (currentIndex + 1) % values.length;
+            await updateConfig('tabType', values[nextIndex]);
+        },
+
+        // 窗口操作
+        toggleAlwaysOnTop: async () => {
+            await updateConfig('alwaysOnTop', !state.config.general.alwaysOnTop);
+            await runtime.Window.SetAlwaysOnTop(state.config.general.alwaysOnTop);
+        },
+        setAlwaysOnTop: (value: boolean) => updateConfig('alwaysOnTop', value),
+
         // 路径操作
-        setDataPath: (value: string) => updateConfig('dataPath', value),
+        setDataPath: (value: string) => updateConfigLocal('dataPath', value),
 
         // 保存配置相关方法
         setAutoSaveDelay: (value: number) => updateConfig('autoSaveDelay', value),
@@ -275,6 +233,12 @@ export const useConfigStore = defineStore('config', () => {
         // 标签页配置相关方法
         setEnableTabs: (value: boolean) => updateConfig('enableTabs', value),
 
+        // 内存监视器配置相关方法
+        setEnableMemoryMonitor: (value: boolean) => updateConfig('enableMemoryMonitor', value),
+
+        // 快捷键模式配置相关方法
+        setKeymapMode: (value: any) => updateConfig('keymapMode', value),
+
         // 更新配置相关方法
         setAutoUpdate: (value: boolean) => updateConfig('autoUpdate', value),
 

frontend/src/stores/documentStore.ts

@@ -1,88 +1,71 @@
 import {defineStore} from 'pinia';
-import {computed, ref} from 'vue';
+import {ref} from 'vue';
 import {DocumentService} from '@/../bindings/voidraft/internal/services';
 import {OpenDocumentWindow} from '@/../bindings/voidraft/internal/services/windowservice';
-import {Document} from '@/../bindings/voidraft/internal/models/models';
-import {useTabStore} from "@/stores/tabStore";
-import type {EditorViewState} from '@/stores/editorStore';
+import {Document} from '@/../bindings/voidraft/internal/models/ent/models';
+import type {TimerManager} from '@/common/utils/timerUtils';
+import {createTimerManager} from '@/common/utils/timerUtils';
 
 export const useDocumentStore = defineStore('document', () => {
-    const DEFAULT_DOCUMENT_ID = ref<number>(1); // 默认草稿文档ID
 
-    // === 核心状态 ===
-    const documents = ref<Record<number, Document>>({});
     const currentDocumentId = ref<number | null>(null);
     const currentDocument = ref<Document | null>(null);
-
-    // === 编辑器状态持久化 ===
-    // 修复：使用统一的 EditorViewState 类型定义
-    const documentStates = ref<Record<number, EditorViewState>>({});
+    
+    // 自动保存定时器
+    const autoSaveTimers = ref<Map<number, TimerManager>>(new Map());
 
     // === UI状态 ===
     const showDocumentSelector = ref(false);
-    const selectorError = ref<{ docId: number; message: string } | null>(null);
     const isLoading = ref(false);
 
-    // === 计算属性 ===
-    const documentList = computed(() =>
-        Object.values(documents.value).sort((a, b) => {
-            return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
-        })
-    );
-
-    // === 私有方法 ===
-    const setDocuments = (docs: Document[]) => {
-        documents.value = {};
-        docs.forEach(doc => {
-            documents.value[doc.id] = doc;
-        });
-    };
-
-    // === 错误处理 ===
-    const setError = (docId: number, message: string) => {
-        selectorError.value = {docId, message};
-        // 3秒后自动清除错误状态
-        setTimeout(() => {
-            if (selectorError.value?.docId === docId) {
-                selectorError.value = null;
-            }
-        }, 3000);
-    };
-
-    const clearError = () => {
-        selectorError.value = null;
-    };
-
     // === UI控制方法 ===
     const openDocumentSelector = () => {
         showDocumentSelector.value = true;
-        clearError();
     };
 
     const closeDocumentSelector = () => {
         showDocumentSelector.value = false;
-        clearError();
     };
 
-    const toggleDocumentSelector = () => {
-        if (showDocumentSelector.value) {
-            closeDocumentSelector();
-        } else {
-            openDocumentSelector();
+
+    // 获取文档列表
+    const getDocumentList = async (): Promise<Document[]> => {
+        try {
+            isLoading.value = true;
+            const docs = await DocumentService.ListAllDocumentsMeta();
+            return docs?.filter((doc): doc is Document => doc !== null) || [];
+        } catch (_error) {
+            return [];
+        } finally {
+            isLoading.value = false;
+        }
+    };
+    
+    // 获取单个文档
+    const getDocument = async (docId: number): Promise<Document | null> => {
+        try {
+            return await DocumentService.GetDocumentByID(docId);
+        } catch (error) {
+            console.error('Failed to get document:', error);
+            return null;
+        }
+    };
+    
+    // 保存文档内容
+    const saveDocument = async (docId: number, content: string): Promise<Document | null> => {
+        try {
+            await DocumentService.UpdateDocumentContent(docId, content);
+            return await DocumentService.GetDocumentByID(docId);
+        } catch (error) {
+            console.error('Failed to save document:', error);
+            throw error;
         }
     };
-
-    // === 文档操作方法 ===
 
     // 在新窗口中打开文档
     const openDocumentInNewWindow = async (docId: number): Promise<boolean> => {
         try {
             await OpenDocumentWindow(docId);
-            const tabStore = useTabStore();
-            if (tabStore.isTabsEnabled && tabStore.hasTab(docId)) {
-                tabStore.closeTab(docId);
-            }
-            
             return true;
         } catch (error) {
             console.error('Failed to open document in new window:', error);
@@ -94,38 +77,16 @@ export const useDocumentStore = defineStore('document', () => {
     const createNewDocument = async (title: string): Promise<Document | null> => {
         try {
             const doc = await DocumentService.CreateDocument(title);
-            if (doc) {
-                documents.value[doc.id] = doc;
-                return doc;
-            }
-            return null;
+            return doc || null;
         } catch (error) {
             console.error('Failed to create document:', error);
             return null;
         }
     };
 
-    // 获取文档列表
-    const getDocumentMetaList = async () => {
-        try {
-            isLoading.value = true;
-            const docs = await DocumentService.ListAllDocumentsMeta();
-            if (docs) {
-                setDocuments(docs.filter((doc): doc is Document => doc !== null));
-            }
-        } catch (error) {
-            console.error('Failed to update documents:', error);
-        } finally {
-            isLoading.value = false;
-        }
-    };
-
     // 打开文档
     const openDocument = async (docId: number): Promise<boolean> => {
         try {
-            closeDocumentSelector();
-
-            // 获取完整文档数据
             const doc = await DocumentService.GetDocumentByID(docId);
             if (!doc) {
                 throw new Error(`Document ${docId} not found`);
@@ -133,7 +94,6 @@ export const useDocumentStore = defineStore('document', () => {
 
             currentDocumentId.value = docId;
             currentDocument.value = doc;
-
             return true;
         } catch (error) {
             console.error('Failed to open document:', error);
@@ -141,26 +101,20 @@ export const useDocumentStore = defineStore('document', () => {
         }
     };
 
-    // 更新文档元数据
-    const updateDocumentMetadata = async (docId: number, title: string): Promise<boolean> => {
+    // 更新文档标题
+    const updateDocumentTitle = async (docId: number, title: string): Promise<boolean> => {
         try {
             await DocumentService.UpdateDocumentTitle(docId, title);
 
-            // 更新本地状态
-            const doc = documents.value[docId];
-            if (doc) {
-                doc.title = title;
-                doc.updatedAt = new Date().toISOString();
-            }
-
+            // 更新当前文档状态
             if (currentDocument.value?.id === docId) {
                 currentDocument.value.title = title;
-                currentDocument.value.updatedAt = new Date().toISOString();
+                currentDocument.value.updated_at = new Date().toISOString();
             }
 
             return true;
         } catch (error) {
-            console.error('Failed to update document metadata:', error);
+            console.error('Failed to update document title:', error);
             return false;
         }
     };
@@ -168,21 +122,20 @@ export const useDocumentStore = defineStore('document', () => {
     // 删除文档
     const deleteDocument = async (docId: number): Promise<boolean> => {
         try {
-            // 检查是否是默认文档（使用ID判断）
-            if (docId === DEFAULT_DOCUMENT_ID.value) {
-                return false;
-            }
-
             await DocumentService.DeleteDocument(docId);
 
-            // 更新本地状态
-            delete documents.value[docId];
+            // 清理定时器
+            const timer = autoSaveTimers.value.get(docId);
+            if (timer) {
+                timer.clear();
+                autoSaveTimers.value.delete(docId);
+            }
 
             // 如果删除的是当前文档，切换到第一个可用文档
             if (currentDocumentId.value === docId) {
-                const availableDocs = Object.values(documents.value);
-                if (availableDocs.length > 0) {
-                    await openDocument(availableDocs[0].id);
+                const docs = await getDocumentList();
+                if (docs.length > 0 && docs[0].id !== undefined) {
+                    await openDocument(docs[0].id);
                 } else {
                     currentDocumentId.value = null;
                     currentDocument.value = null;
@@ -195,21 +148,46 @@ export const useDocumentStore = defineStore('document', () => {
             return false;
         }
     };
+    
+    // 调度自动保存
+    const scheduleAutoSave = (docId: number, saveCallback: () => Promise<void>, delay: number = 2000) => {
+        let timer = autoSaveTimers.value.get(docId);
+        if (!timer) {
+            timer = createTimerManager();
+            autoSaveTimers.value.set(docId, timer);
+        }
+        
+        timer.set(async () => {
+            try {
+                await saveCallback();
+            } catch (error) {
+                console.error(`auto save for document ${docId} failed:`, error);
+            }
+        }, delay);
+    };
+    
+    // 取消自动保存
+    const cancelAutoSave = (docId: number) => {
+        const timer = autoSaveTimers.value.get(docId);
+        if (timer) {
+            timer.clear();
+        }
+    };
 
-    // === 初始化 ===
-    const initialize = async (urlDocumentId?: number): Promise<void> => {
+    // 初始化文档
+    const initDocument = async (urlDocumentId?: number): Promise<void> => {
         try {
-            await getDocumentMetaList();
+            const docs = await getDocumentList();
 
             // 优先使用URL参数中的文档ID
-            if (urlDocumentId && documents.value[urlDocumentId]) {
+            if (urlDocumentId) {
                 await openDocument(urlDocumentId);
-            } else if (currentDocumentId.value && documents.value[currentDocumentId.value]) {
-                // 如果URL中没有指定文档ID，则使用持久化的文档ID
+            } else if (currentDocumentId.value) {
+                // 使用持久化的文档ID
                 await openDocument(currentDocumentId.value);
-            } else {
-                // 否则打开默认文档
-                await openDocument(DEFAULT_DOCUMENT_ID.value);
+            } else if (docs.length > 0 && docs[0].id !== undefined) {
+                // 打开第一个文档
+                await openDocument(docs[0].id);
             }
         } catch (error) {
             console.error('Failed to initialize document store:', error);
@@ -217,35 +195,36 @@ export const useDocumentStore = defineStore('document', () => {
     };
 
     return {
-        DEFAULT_DOCUMENT_ID,
         // 状态
-        documents,
-        documentList,
         currentDocumentId,
         currentDocument,
-        documentStates,
         showDocumentSelector,
-        selectorError,
         isLoading,
 
-        // 方法
-        getDocumentMetaList,
+        getDocumentList,
+        getDocument,
+        saveDocument,
+        createNewDocument,
+        updateDocumentTitle,
+        deleteDocument,
         openDocument,
         openDocumentInNewWindow,
-        createNewDocument,
-        updateDocumentMetadata,
-        deleteDocument,
+        
+        // 自动保存
+        scheduleAutoSave,
+        cancelAutoSave,
+        
+        // UI 控制
         openDocumentSelector,
         closeDocumentSelector,
-        toggleDocumentSelector,
-        setError,
-        clearError,
-        initialize,
+        
+        // 初始化
+        initDocument,
     };
 }, {
     persist: {
         key: 'voidraft-document',
         storage: localStorage,
-        pick: ['currentDocumentId', 'documents', 'documentStates']
+        pick: ['currentDocumentId']
     }
 });

frontend/src/stores/editorStateStore.ts

@@ -0,0 +1,70 @@
+import {defineStore} from 'pinia';
+import {ref} from 'vue';
+
+export interface DocumentStats {
+    lines: number;
+    characters: number;
+    selectedCharacters: number;
+}
+
+export const useEditorStateStore = defineStore('editorState', () => {
+    // 光标位置存储 Record<docId, cursorPosition>
+    const cursorPositions = ref<Record<number, number>>({});
+
+    // 文档统计数据存储 Record<docId, DocumentStats>
+    const documentStats = ref<Record<number, DocumentStats>>({});
+
+    // 保存光标位置
+    const saveCursorPosition = (docId: number, position: number) => {
+        cursorPositions.value[docId] = position;
+    };
+
+    // 获取光标位置
+    const getCursorPosition = (docId: number): number | undefined => {
+        return cursorPositions.value[docId];
+    };
+
+    // 保存文档统计数据
+    const saveDocumentStats = (docId: number, stats: DocumentStats) => {
+        documentStats.value[docId] = stats;
+    };
+
+    // 获取文档统计数据
+    const getDocumentStats = (docId: number): DocumentStats => {
+        return documentStats.value[docId] || {
+            lines: 0,
+            characters: 0,
+            selectedCharacters: 0
+        };
+    };
+
+    // 清除文档状态
+    const clearDocumentState = (docId: number) => {
+        delete cursorPositions.value[docId];
+        delete documentStats.value[docId];
+    };
+
+    // 清除所有状态
+    const clearAllStates = () => {
+        cursorPositions.value = {};
+        documentStats.value = {};
+    };
+
+    return {
+        cursorPositions,
+        documentStats,
+        saveCursorPosition,
+        getCursorPosition,
+        saveDocumentStats,
+        getDocumentStats,
+        clearDocumentState,
+        clearAllStates
+    };
+}, {
+    persist: {
+        key: 'voidraft-editor-state',
+        storage: localStorage,
+        pick: ['cursorPositions']
+    }
+});
+

frontend/src/stores/extensionStore.ts

@@ -1,28 +1,19 @@
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
-import { Extension, ExtensionID } from '@/../bindings/voidraft/internal/models/models';
+import { Extension } from '@/../bindings/voidraft/internal/models/ent/models';
 import { ExtensionService } from '@/../bindings/voidraft/internal/services';
 
 export const useExtensionStore = defineStore('extension', () => {
     // 扩展配置数据
     const extensions = ref<Extension[]>([]);
 
-    // 获取启用的扩展
-    const enabledExtensions = computed(() =>
-        extensions.value.filter(ext => ext.enabled)
-    );
-
-    // 获取启用的扩展ID列表
-    const enabledExtensionIds = computed(() =>
-        enabledExtensions.value.map(ext => ext.id)
-    );
-
     /**
      * 从后端加载扩展配置
      */
     const loadExtensions = async (): Promise<void> => {
         try {
-            extensions.value = await ExtensionService.GetAllExtensions();
+            const result = await ExtensionService.GetExtensions();
+            extensions.value = result.filter((ext): ext is Extension => ext !== null);
         } catch (err) {
             console.error('[ExtensionStore] Failed to load extensions:', err);
         }
@@ -31,17 +22,19 @@ export const useExtensionStore = defineStore('extension', () => {
     /**
      * 获取扩展配置
      */
-    const getExtensionConfig = (id: ExtensionID): any => {
-        const extension = extensions.value.find(ext => ext.id === id);
-        return extension?.config ?? {};
+    const getExtensionConfig = async (id: number): Promise<any> => {
+        try {
+            const config = await ExtensionService.GetExtensionConfig(id);
+            return config ?? {};
+        } catch (err) {
+            console.error('[ExtensionStore] Failed to get extension config:', err);
+            return {};
+        }
     };
 
     return {
         // 状态
         extensions,
-        enabledExtensions,
-        enabledExtensionIds,
-
         // 方法
         loadExtensions,
         getExtensionConfig,

frontend/src/stores/keybindingStore.ts

@@ -1,82 +1,38 @@
 import {defineStore} from 'pinia';
 import {computed, ref} from 'vue';
-import {ExtensionID, KeyBinding, KeyBindingCommand} from '@/../bindings/voidraft/internal/models/models';
-import {GetAllKeyBindings} from '@/../bindings/voidraft/internal/services/keybindingservice';
+import {KeyBinding} from '@/../bindings/voidraft/internal/models/ent/models';
+import {KeyBindingService} from '@/../bindings/voidraft/internal/services';
+import {KeyBindingType} from '@/../bindings/voidraft/internal/models/models';
+import {useConfigStore} from './configStore';
 
 export const useKeybindingStore = defineStore('keybinding', () => {
+    const configStore = useConfigStore();
+
     // 快捷键配置数据
     const keyBindings = ref<KeyBinding[]>([]);
 
-    // 获取启用的快捷键
-    const enabledKeyBindings = computed(() =>
-        keyBindings.value.filter(kb => kb.enabled)
-    );
-
-    // 按扩展分组的快捷键
-    const keyBindingsByExtension = computed(() => {
-        const groups = new Map<ExtensionID, KeyBinding[]>();
-
-        for (const binding of keyBindings.value) {
-            if (!groups.has(binding.extension)) {
-                groups.set(binding.extension, []);
-            }
-            groups.get(binding.extension)!.push(binding);
-        }
-
-        return groups;
-    });
-
-    // 获取指定扩展的快捷键
-    const getKeyBindingsByExtension = computed(() =>
-        (extension: ExtensionID) =>
-            keyBindings.value.filter(kb => kb.extension === extension)
-    );
-
-    // 按命令获取快捷键
-    const getKeyBindingByCommand = computed(() =>
-        (command: KeyBindingCommand) =>
-            keyBindings.value.find(kb => kb.command === command)
-    );
-
     /**
-     * 从后端加载快捷键配置
+     * 从后端加载快捷键配置（根据当前配置的模式）
      */
     const loadKeyBindings = async (): Promise<void> => {
-        keyBindings.value = await GetAllKeyBindings();
+        const keymapMode = configStore.config.editing.keymapMode || KeyBindingType.Standard;
+        const result = await KeyBindingService.GetKeyBindings(keymapMode);
+        keyBindings.value = result.filter((kb): kb is KeyBinding => kb !== null);
     };
 
     /**
-     * 检查是否存在指定命令的快捷键
+     * 更新快捷键绑定
      */
-    const hasCommand = (command: KeyBindingCommand): boolean => {
-        return keyBindings.value.some(kb => kb.command === command && kb.enabled);
+    const updateKeyBinding = async (id: number, key: string): Promise<void> => {
+        await KeyBindingService.UpdateKeyBindingKeys(id, key);
+        await loadKeyBindings();
     };
 
-
-    /**
-     * 获取扩展相关的所有扩展ID
-     */
-    const getAllExtensionIds = computed(() => {
-        const extensionIds = new Set<ExtensionID>();
-        for (const binding of keyBindings.value) {
-            extensionIds.add(binding.extension);
-        }
-        return Array.from(extensionIds);
-    });
-
     return {
         // 状态
         keyBindings,
-        enabledKeyBindings,
-        keyBindingsByExtension,
-        getAllExtensionIds,
-
-        // 计算属性
-        getKeyBindingByCommand,
-        getKeyBindingsByExtension,
-
         // 方法
         loadKeyBindings,
-        hasCommand,
+        updateKeyBinding,
     };
 }); 

frontend/src/stores/systemStore.ts

@@ -38,7 +38,7 @@ export const useSystemStore = defineStore('system', () => {
     });
 
     // 初始化系统信息
-    const initializeSystemInfo = async (): Promise<void> => {
+    const initSystemInfo = async (): Promise<void> => {
         if (isLoading.value) return;
 
         isLoading.value = true;
@@ -102,7 +102,7 @@ export const useSystemStore = defineStore('system', () => {
         titleBarHeight,
 
         // 方法
-        initializeSystemInfo,
+        initSystemInfo,
         setWindowOnTop,
         toggleWindowOnTop,
         resetWindowOnTop,

frontend/src/stores/tabStore.ts

@@ -2,7 +2,7 @@ import {defineStore} from 'pinia';
 import {computed, readonly, ref} from 'vue';
 import {useConfigStore} from './configStore';
 import {useDocumentStore} from './documentStore';
-import type {Document} from '@/../bindings/voidraft/internal/models/models';
+import type {Document} from '@/../bindings/voidraft/internal/models/ent/models';
 
 export interface Tab {
     documentId: number;  // 直接使用文档ID作为唯一标识
@@ -15,34 +15,31 @@ export const useTabStore = defineStore('tab', () => {
     const documentStore = useDocumentStore();
 
     // === 核心状态 ===
-    const tabsMap = ref<Map<number, Tab>>(new Map());
+    const tabsMap = ref<Record<number, Tab>>({});
     const tabOrder = ref<number[]>([]);  // 维护标签页顺序
     const draggedTabId = ref<number | null>(null);
-
-    // === 计算属性 ===
-
+    
     const isTabsEnabled = computed(() => configStore.config.general.enableTabs);
     const canCloseTab = computed(() => tabOrder.value.length > 1);
-    const currentDocumentId = computed(() => documentStore.currentDocumentId);
 
     // 按顺序返回标签页数组（用于UI渲染）
     const tabs = computed(() => {
         return tabOrder.value
-            .map(documentId => tabsMap.value.get(documentId))
+            .map(documentId => tabsMap.value[documentId])
             .filter(tab => tab !== undefined) as Tab[];
     });
 
     // === 私有方法 ===
     const hasTab = (documentId: number): boolean => {
-        return tabsMap.value.has(documentId);
+        return documentId in tabsMap.value;
     };
 
     const getTab = (documentId: number): Tab | undefined => {
-        return tabsMap.value.get(documentId);
+        return tabsMap.value[documentId];
     };
 
     const updateTabTitle = (documentId: number, title: string) => {
-        const tab = tabsMap.value.get(documentId);
+        const tab = tabsMap.value[documentId];
         if (tab) {
             tab.title = title;
         }
@@ -55,6 +52,7 @@ export const useTabStore = defineStore('tab', () => {
      */
     const addOrActivateTab = (document: Document) => {
         const documentId = document.id;
+        if (documentId === undefined) return;
 
         if (hasTab(documentId)) {
             // 标签页已存在，无需重复添加
@@ -64,24 +62,24 @@ export const useTabStore = defineStore('tab', () => {
         // 创建新标签页
         const newTab: Tab = {
             documentId,
-            title: document.title
+            title: document.title || ''
         };
 
-        tabsMap.value.set(documentId, newTab);
+        tabsMap.value[documentId] = newTab;
         tabOrder.value.push(documentId);
     };
 
     /**
      * 关闭标签页
      */
-    const closeTab = (documentId: number) => {
+    const closeTab = async (documentId: number) => {
         if (!hasTab(documentId)) return;
 
         const tabIndex = tabOrder.value.indexOf(documentId);
         if (tabIndex === -1) return;
 
         // 从映射和顺序数组中移除
-        tabsMap.value.delete(documentId);
+        delete tabsMap.value[documentId];
         tabOrder.value.splice(tabIndex, 1);
 
         // 如果关闭的是当前文档，需要切换到其他文档
@@ -94,7 +92,7 @@ export const useTabStore = defineStore('tab', () => {
 
             if (nextIndex >= 0 && tabOrder.value[nextIndex]) {
                 const nextDocumentId = tabOrder.value[nextIndex];
-                switchToTabAndDocument(nextDocumentId);
+                await switchToTabAndDocument(nextDocumentId);
             }
         }
     };
@@ -111,7 +109,7 @@ export const useTabStore = defineStore('tab', () => {
             if (tabIndex === -1) return;
 
             // 从映射和顺序数组中移除
-            tabsMap.value.delete(documentId);
+            delete tabsMap.value[documentId];
             tabOrder.value.splice(tabIndex, 1);
         });
     };
@@ -119,15 +117,15 @@ export const useTabStore = defineStore('tab', () => {
     /**
      * 切换到指定标签页并打开对应文档
      */
-    const switchToTabAndDocument = (documentId: number) => {
+    const switchToTabAndDocument = async (documentId: number) => {
         if (!hasTab(documentId)) return;
         
         // 如果点击的是当前已激活的文档，不需要重复请求
         if (documentStore.currentDocumentId === documentId) {
             return;
         }
-        
-        documentStore.openDocument(documentId);
+
+        await documentStore.openDocument(documentId);
     };
 
     /**
@@ -150,10 +148,32 @@ export const useTabStore = defineStore('tab', () => {
         return tabOrder.value.indexOf(documentId);
     };
 
+    /**
+     * 验证并清理无效的标签页
+     */
+    const validateTabs = async () => {
+        const docs = await documentStore.getDocumentList();
+        const validDocIds = docs.map(doc => doc.id).filter((id): id is number => id !== undefined);
+
+        // 找出无效的标签页（文档已被删除）
+        const invalidTabIds = tabOrder.value.filter(docId => !validDocIds.includes(docId));
+
+        if (invalidTabIds.length > 0) {
+            // 批量清理无效标签页
+            invalidTabIds.forEach(docId => {
+                delete tabsMap.value[docId];
+            });
+            tabOrder.value = tabOrder.value.filter(docId => validDocIds.includes(docId));
+        }
+    };
+
     /**
      * 初始化标签页（当前文档）
      */
-    const initializeTab = () => {
+    const initTab = async () => {
+        // 先验证并清理无效的标签页
+        await validateTabs();
+
         if (isTabsEnabled.value) {
             const currentDoc = documentStore.currentDocument;
             if (currentDoc) {
@@ -167,56 +187,56 @@ export const useTabStore = defineStore('tab', () => {
     /**
      * 关闭其他标签页（除了指定的标签页）
      */
-    const closeOtherTabs = (keepDocumentId: number) => {
+    const closeOtherTabs = async (keepDocumentId: number) => {
         if (!hasTab(keepDocumentId)) return;
-        
+
         // 获取所有其他标签页的ID
         const otherTabIds = tabOrder.value.filter(id => id !== keepDocumentId);
-        
+
         // 批量关闭其他标签页
         closeTabs(otherTabIds);
-        
+
         // 如果当前打开的文档在被关闭的标签中，需要切换到保留的文档
         if (otherTabIds.includes(documentStore.currentDocumentId!)) {
-            switchToTabAndDocument(keepDocumentId);
+            await switchToTabAndDocument(keepDocumentId);
         }
     };
 
     /**
      * 关闭指定标签页右侧的所有标签页
      */
-    const closeTabsToRight = (documentId: number) => {
+    const closeTabsToRight = async (documentId: number) => {
         const index = getTabIndex(documentId);
         if (index === -1) return;
-        
+
         // 获取右侧所有标签页的ID
         const rightTabIds = tabOrder.value.slice(index + 1);
-        
+
         // 批量关闭右侧标签页
         closeTabs(rightTabIds);
-        
+
         // 如果当前打开的文档在被关闭的右侧标签中，需要切换到指定的文档
         if (rightTabIds.includes(documentStore.currentDocumentId!)) {
-            switchToTabAndDocument(documentId);
+            await switchToTabAndDocument(documentId);
         }
     };
 
     /**
      * 关闭指定标签页左侧的所有标签页
      */
-    const closeTabsToLeft = (documentId: number) => {
+    const closeTabsToLeft = async (documentId: number) => {
         const index = getTabIndex(documentId);
         if (index <= 0) return;
-        
+
         // 获取左侧所有标签页的ID
         const leftTabIds = tabOrder.value.slice(0, index);
-        
+
         // 批量关闭左侧标签页
         closeTabs(leftTabIds);
-        
+
         // 如果当前打开的文档在被关闭的左侧标签中，需要切换到指定的文档
         if (leftTabIds.includes(documentStore.currentDocumentId!)) {
-            switchToTabAndDocument(documentId);
+            await switchToTabAndDocument(documentId);
         }
     };
 
@@ -224,12 +244,15 @@ export const useTabStore = defineStore('tab', () => {
      * 清空所有标签页
      */
     const clearAllTabs = () => {
-        tabsMap.value.clear();
+        tabsMap.value = {};
         tabOrder.value = [];
     };
 
     // === 公共API ===
     return {
+        tabsMap,
+        tabOrder,
+
         // 状态
         tabs: readonly(tabs),
         draggedTabId,
@@ -237,7 +260,6 @@ export const useTabStore = defineStore('tab', () => {
         // 计算属性
         isTabsEnabled,
         canCloseTab,
-        currentDocumentId,
 
         // 方法
         addOrActivateTab,
@@ -248,12 +270,15 @@ export const useTabStore = defineStore('tab', () => {
         switchToTabAndDocument,
         moveTab,
         getTabIndex,
-        initializeTab,
+        initTab,
         clearAllTabs,
         updateTabTitle,
+        validateTabs,
 
         // 工具方法
         hasTab,
         getTab
     };
-});
+}, {
+    persist: false,
+});

frontend/src/stores/themeStore.ts

@@ -1,159 +1,176 @@
-import { defineStore } from 'pinia';
-import { computed, ref } from 'vue';
-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';
+import {defineStore} from 'pinia';
+import {computed, ref} from 'vue';
+import {SystemThemeType} from '@/../bindings/voidraft/internal/models/models';
+import {Type as ThemeType} from '@/../bindings/voidraft/internal/models/ent/theme/models';
+import {ThemeService} from '@/../bindings/voidraft/internal/services';
+import {useConfigStore} from './configStore';
+import type {ThemeColors} from '@/views/editor/theme/types';
+import {cloneThemeColors, FALLBACK_THEME_NAME, themePresetList, themePresetMap} from '@/views/editor/theme/presets';
+import {useEditorStore} from "@/stores/editorStore";
 
+// 类型定义
 type ThemeOption = { name: string; type: ThemeType };
 
-const resolveThemeName = (name?: string) =>
-  name && themePresetMap[name] ? name : FALLBACK_THEME_NAME;
+// 解析主题名称，确保返回有效的主题
+const resolveThemeName = (name?: string): 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);
-};
+    themePresetList
+        .filter(preset => preset.type === type)
+        .map(preset => ({name: preset.name, type: preset.type}));
 
 export const useThemeStore = defineStore('theme', () => {
-  const configStore = useConfigStore();
-  const currentColors = ref<ThemeColors | null>(null);
+    const configStore = useConfigStore();
+    const currentColors = ref<ThemeColors | null>(null);
 
-  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 availableThemes = computed<ThemeOption[]>(() =>
-    isDarkMode.value ? darkThemeOptions : lightThemeOptions
-  );
-
-  const applyThemeToDOM = (theme: SystemThemeType) => {
-    const themeMap = {
-      [SystemThemeType.SystemThemeAuto]: 'auto',
-      [SystemThemeType.SystemThemeDark]: 'dark',
-      [SystemThemeType.SystemThemeLight]: 'light',
-    };
-    document.documentElement.setAttribute('data-theme', themeMap[theme]);
-  };
-
-  const loadThemeColors = async (themeName?: string) => {
-    const targetName = resolveThemeName(
-      themeName || configStore.config?.appearance?.currentTheme
+    const currentTheme = computed(
+        () => configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto
     );
-    currentColors.value = await fetchThemeColors(targetName);
-  };
 
-  const initializeTheme = async () => {
-    applyThemeToDOM(currentTheme.value);
-    await loadThemeColors();
-  };
+    const isDarkMode = computed(
+        () =>
+            currentTheme.value === SystemThemeType.SystemThemeDark ||
+            (currentTheme.value === SystemThemeType.SystemThemeAuto &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches)
+    );
 
-  const setTheme = async (theme: SystemThemeType) => {
-    await configStore.setSystemTheme(theme);
-    applyThemeToDOM(theme);
-    refreshEditorTheme();
-  };
+    // 根据当前模式动态计算可用主题列表
+    const availableThemes = computed<ThemeOption[]>(() =>
+        createThemeOptions(isDarkMode.value ? ThemeType.TypeDark : ThemeType.TypeLight)
+    );
 
-  const switchToTheme = async (themeName: string) => {
-    if (!themePresetMap[themeName]) {
-      console.error('Theme not found:', themeName);
-      return false;
-    }
+    // 应用主题到 DOM
+    const applyThemeToDOM = (theme: SystemThemeType) => {
+        const themeMap = {
+            [SystemThemeType.SystemThemeAuto]: 'auto',
+            [SystemThemeType.SystemThemeDark]: 'dark',
+            [SystemThemeType.SystemThemeLight]: 'light',
+        };
+        document.documentElement.setAttribute('data-theme', themeMap[theme]);
+    };
 
-    await loadThemeColors(themeName);
-    await configStore.setCurrentTheme(themeName);
-    refreshEditorTheme();
-    return true;
-  };
+    // 获取预设主题颜色
+    const getPresetColors = (name: string): ThemeColors => {
+        const preset = themePresetMap[name] ?? themePresetMap[FALLBACK_THEME_NAME];
+        const colors = cloneThemeColors(preset.colors);
+        colors.themeName = name;
+        return colors;
+    };
 
-  const updateCurrentColors = (colors: Partial<ThemeColors>) => {
-    if (!currentColors.value) return;
-    Object.assign(currentColors.value, colors);
-  };
+    // 从服务器获取主题颜色
+    const fetchThemeColors = async (themeName: string): Promise<ThemeColors> => {
+        const safeName = resolveThemeName(themeName);
+        const theme = await ThemeService.GetThemeByName(safeName);
+        if (theme?.colors) {
+            const colors = cloneThemeColors(theme.colors as ThemeColors);
+            colors.themeName = safeName;
+            return colors;
+        }
+        return getPresetColors(safeName);
+    };
 
-  const saveCurrentTheme = async () => {
-    if (!currentColors.value) {
-      throw new Error('No theme selected');
-    }
+    // 加载主题颜色
+    const loadThemeColors = async (themeName?: string) => {
+        const targetName = resolveThemeName(
+            themeName || configStore.config?.appearance?.currentTheme
+        );
+        currentColors.value = getPresetColors(targetName);
+        currentColors.value = await fetchThemeColors(targetName);
 
-    const themeName = resolveThemeName(currentColors.value.themeName);
-    currentColors.value.themeName = themeName;
+    };
 
-    await ThemeService.UpdateTheme(themeName, currentColors.value as unknown as ThemeColorConfig);
+    // 获取可用的主题颜色
+    const getEffectiveColors = (): ThemeColors => {
+        const targetName = resolveThemeName(
+            currentColors.value?.themeName || configStore.config?.appearance?.currentTheme
+        );
+        return currentColors.value ?? getPresetColors(targetName);
+    };
 
-    await loadThemeColors(themeName);
-    refreshEditorTheme();
-    return true;
-  };
+    // 同步应用到 DOM 与编辑器
+    const applyAllThemes = () => {
+        applyThemeToDOM(currentTheme.value);
+        const editorStore = useEditorStore();
+        editorStore.applyThemeSettings();
+    };
 
-  const resetCurrentTheme = async () => {
-    if (!currentColors.value) {
-      throw new Error('No theme selected');
-    }
+    // 初始化主题
+    const initTheme = async () => {
+        await loadThemeColors();
+        applyAllThemes();
+    };
 
-    const themeName = resolveThemeName(currentColors.value.themeName);
-    await ThemeService.ResetTheme(themeName);
+    // 设置系统主题
+    const setTheme = async (theme: SystemThemeType) => {
+        await configStore.setSystemTheme(theme);
+        applyAllThemes();
+    };
 
-    await loadThemeColors(themeName);
-    refreshEditorTheme();
-    return true;
-  };
+    // 切换到指定主题
+    const switchToTheme = async (themeName: string) => {
+        if (!themePresetMap[themeName]) {
+            console.error('Theme not found:', themeName);
+            return false;
+        }
 
-  const refreshEditorTheme = () => {
-    applyThemeToDOM(currentTheme.value);
-    const editorStore = useEditorStore();
-    editorStore?.applyThemeSettings();
-  };
+        await loadThemeColors(themeName);
+        await configStore.setCurrentTheme(themeName);
+        applyAllThemes();
+        return true;
+    };
 
-  return {
-    availableThemes,
-    currentTheme,
-    currentColors,
-    isDarkMode,
-    setTheme,
-    switchToTheme,
-    initializeTheme,
-    updateCurrentColors,
-    saveCurrentTheme,
-    resetCurrentTheme,
-    refreshEditorTheme,
-    applyThemeToDOM,
-  };
+    // 更新当前主题颜色
+    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 themeName = resolveThemeName(currentColors.value.themeName);
+        currentColors.value.themeName = themeName;
+
+        await ThemeService.UpdateTheme(themeName, currentColors.value);
+
+        await loadThemeColors(themeName);
+        applyAllThemes();
+        return true;
+    };
+
+    // 重置当前主题到默认值
+    const resetCurrentTheme = async () => {
+        if (!currentColors.value) {
+            throw new Error('No theme selected');
+        }
+
+        const themeName = resolveThemeName(currentColors.value.themeName);
+        await ThemeService.ResetTheme(themeName);
+
+        await loadThemeColors(themeName);
+        applyAllThemes();
+        return true;
+    };
+
+
+    return {
+        availableThemes,
+        currentTheme,
+        currentColors,
+        isDarkMode,
+        setTheme,
+        switchToTheme,
+        initTheme,
+        updateCurrentColors,
+        saveCurrentTheme,
+        resetCurrentTheme,
+        applyThemeToDOM,
+        applyAllThemes,
+        getEffectiveColors,
+    };
 });

frontend/src/views/editor/Editor.vue

@@ -28,11 +28,16 @@ onMounted(async () => {
 
   const urlDocumentId = windowStore.currentDocumentId ? parseInt(windowStore.currentDocumentId) : undefined;
 
-  await documentStore.initialize(urlDocumentId);
+  await documentStore.initDocument(urlDocumentId);
 
   editorStore.setEditorContainer(editorElement.value);
 
-  await tabStore.initializeTab();
+  const currentDocId = documentStore.currentDocumentId;
+  if (currentDocId) {
+    await editorStore.switchToEditor(currentDocId);
+  }
+
+  await tabStore.initTab();
 });
 
 onBeforeUnmount(() => {

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

@@ -1,13 +1,13 @@
 import {EditorView, ViewPlugin, ViewUpdate} from '@codemirror/view';
 import type {Text} from '@codemirror/state';
-import {useEditorStore} from '@/stores/editorStore';
 
 /**
+ * 内容变化监听扩展
+ * 通过回调函数解耦，不直接依赖 Store
  */
-export function createContentChangePlugin() {
+export function createContentChangePlugin(onContentChange: () => void) {
   return ViewPlugin.fromClass(
     class ContentChangePlugin {
-      private readonly editorStore = useEditorStore();
       private lastDoc: Text;
       private rafId: number | null = null;
       private pendingNotification = false;
@@ -40,7 +40,7 @@ export function createContentChangePlugin() {
         this.rafId = requestAnimationFrame(() => {
           this.pendingNotification = false;
           this.rafId = null;
-          this.editorStore.onContentChange();
+          onContentChange();  // 调用注入的回调
         });
       }
     }

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

@@ -0,0 +1,64 @@
+import {EditorView, ViewPlugin, ViewUpdate} from '@codemirror/view';
+import {useEditorStateStore} from '@/stores/editorStateStore';
+import {createDebounce} from '@/common/utils/debounce';
+
+/**
+ * 光标位置持久化扩展
+ * 实时监听光标位置变化并持久化到 editorStateStore
+ */
+export function createCursorPositionExtension(documentId: number) {
+    return ViewPlugin.fromClass(
+        class CursorPositionPlugin {
+            private readonly editorStateStore = useEditorStateStore();
+            private readonly debouncedSave;
+
+            constructor(private view: EditorView) {
+                const {debouncedFn, flush} = createDebounce(
+                    () => this.saveCursorPosition(),
+                    {delay: 1000}
+                );
+                this.debouncedSave = {fn: debouncedFn, flush};
+
+                // 初始化时保存一次光标位置
+                this.saveCursorPosition();
+            }
+
+            update(update: ViewUpdate) {
+                // 只在选择变化时触发
+                if (!update.selectionSet) {
+                    return;
+                }
+
+                // 防抖保存光标位置
+                this.debouncedSave.fn();
+            }
+
+            destroy() {
+                // 销毁时立即执行待保存的操作
+                this.debouncedSave.flush();
+                // 再保存一次确保最新状态
+                this.saveCursorPosition();
+            }
+
+            private saveCursorPosition() {
+                const cursorPos = this.view.state.selection.main.head;
+                this.editorStateStore.saveCursorPosition(documentId, cursorPos);
+            }
+        }
+    );
+}
+
+/**
+ * 滚动到当前光标位置（视口中心）
+ * @param view 编辑器视图
+ */
+export function scrollToCursor(view: EditorView) {
+    const cursorPos = view.state.selection.main.head;
+    view.dispatch({
+        effects: EditorView.scrollIntoView(cursorPos, {
+            y: 'center',
+            x: 'center'
+        })
+    });
+}
+

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

@@ -1,6 +1,6 @@
 import {Extension} from '@codemirror/state';
 import {EditorView} from '@codemirror/view';
-import {DocumentStats} from '@/stores/editorStore';
+import {DocumentStats} from '@/stores/editorStateStore';
 import {getActiveNoteBlock} from '@/views/editor/extensions/codeblock/state';
 
 // 更新编辑器文档统计信息

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

@@ -9,15 +9,11 @@ export const themeCompartment = new Compartment();
 /**
  * 根据主题类型获取主题扩展
  */
-const getThemeExtension = (): Extension | null => {
+const getThemeExtension = (): Extension => {
   const themeStore = useThemeStore();
   
-  // 直接获取当前主题颜色配置
-  const colors = themeStore.currentColors;
-  
-  if (!colors) {
-    return null;
-  }
+  // 获取有效主题颜色
+  const colors = themeStore.getEffectiveColors();
 
   // 使用颜色配置创建主题
   return createThemeByColors(colors);
@@ -28,12 +24,6 @@ const getThemeExtension = (): Extension | null => {
  */
 export const createThemeExtension = (): Extension => {
   const extension = getThemeExtension();
-  
-  // 如果主题未加载，返回空扩展
-  if (!extension) {
-    return themeCompartment.of([]);
-  }
-  
   return themeCompartment.of(extension);
 };
 
@@ -48,11 +38,6 @@ export const updateEditorTheme = (view: EditorView): void => {
   try {
     const extension = getThemeExtension();
     
-    // 如果主题未加载，不更新
-    if (!extension) {
-      return;
-    }
-    
     view.dispatch({
       effects: themeCompartment.reconfigure(extension)
     });
@@ -60,4 +45,3 @@ export const updateEditorTheme = (view: EditorView): void => {
     console.error('Failed to update editor theme:', error);
   }
 };
-

frontend/src/views/editor/extensions/blockImage/contextMenu.ts

@@ -0,0 +1,19 @@
+import type {MenuSchemaNode} from '../contextMenu/menuSchema';
+import {getActiveNoteBlock} from '../codeblock/state';
+import {blockImageEnabledFacet, copyBlockImageCommand} from './index';
+
+
+export const blockImageMenuNodes: MenuSchemaNode[] = [
+  {
+    id: 'copy-block-image',
+    labelKey: 'extensions.blockImage.copyMenu',
+    command: copyBlockImageCommand,
+    visible: context =>
+      context.view.state.facet(blockImageEnabledFacet) &&
+      Boolean(getActiveNoteBlock(context.view.state)),
+    enabled: context =>
+      context.view.state.facet(blockImageEnabledFacet) &&
+      Boolean(getActiveNoteBlock(context.view.state)),
+  },
+];
+

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

@@ -0,0 +1,319 @@
+import {snapdom} from '@zumer/snapdom';
+import {syntaxTree, highlightingFor} from '@codemirror/language';
+import {Highlighter, highlightTree} from '@lezer/highlight';
+import {Facet, type Extension} from '@codemirror/state';
+import {EditorView, Command} from '@codemirror/view';
+import type {Block} from '../codeblock/types';
+import {blockState, getActiveNoteBlock} from '../codeblock/state';
+
+/**
+ * 高亮片段信息
+ */
+interface HighlightSpan {
+  from: number;
+  to: number;
+  cssClass: string;
+}
+
+/**
+ * 从语法树获取指定范围的高亮信息
+ */
+function getHighlights(view: EditorView, from: number, to: number): HighlightSpan[] {
+  const tree = syntaxTree(view.state);
+  const highlights: HighlightSpan[] = [];
+
+  if (tree.length === 0) {
+    return highlights;
+  }
+
+  const highlighter: Highlighter = {
+    style: tags => highlightingFor(view.state, tags),
+  };
+
+  highlightTree(
+    tree,
+    highlighter,
+    (hlFrom, hlTo, cssClass) => {
+      if (hlFrom < to && hlTo > from) {
+        highlights.push({
+          from: Math.max(hlFrom, from),
+          to: Math.min(hlTo, to),
+          cssClass: cssClass || '',
+        });
+      }
+    },
+    from,
+    to,
+  );
+
+  return highlights;
+}
+
+/**
+ * 构建带高亮的单行元素
+ */
+function createHighlightedLine(
+  lineText: string,
+  lineFrom: number,
+  lineTo: number,
+  highlights: HighlightSpan[],
+): HTMLElement {
+  const lineElement = document.createElement('div');
+  lineElement.className = 'cm-line';
+  lineElement.style.whiteSpace = 'pre';
+
+  if (highlights.length === 0 || lineText.length === 0) {
+    lineElement.textContent = lineText || ' ';
+    return lineElement;
+  }
+
+  const spans: Array<{text: string; cssClass: string}> = [];
+  let pos = lineFrom;
+
+  const lineHighlights = highlights
+    .filter(h => h.from < lineTo && h.to > lineFrom)
+    .sort((a, b) => a.from - b.from);
+
+  for (const hl of lineHighlights) {
+    if (hl.from > pos) {
+      spans.push({
+        text: lineText.slice(pos - lineFrom, hl.from - lineFrom),
+        cssClass: '',
+      });
+    }
+
+    const hlStart = Math.max(hl.from, lineFrom);
+    const hlEnd = Math.min(hl.to, lineTo);
+    spans.push({
+      text: lineText.slice(hlStart - lineFrom, hlEnd - lineFrom),
+      cssClass: hl.cssClass,
+    });
+
+    pos = hlEnd;
+  }
+
+  if (pos < lineTo) {
+    spans.push({
+      text: lineText.slice(pos - lineFrom),
+      cssClass: '',
+    });
+  }
+
+  for (const span of spans) {
+    if (span.cssClass) {
+      const spanElement = document.createElement('span');
+      spanElement.className = span.cssClass;
+      spanElement.textContent = span.text;
+      lineElement.appendChild(spanElement);
+    } else {
+      lineElement.appendChild(document.createTextNode(span.text));
+    }
+  }
+
+  return lineElement;
+}
+
+/**
+ * 构建用于截图的块 DOM
+ */
+function inlineStyle(style: CSSStyleDeclaration, props: string[]): string {
+  return props
+    .map(prop => {
+      const val = style.getPropertyValue(prop);
+      return val ? `${prop}:${val};` : '';
+    })
+    .join('');
+}
+
+function getBlockDomElement(view: EditorView, block: Block): HTMLElement | null {
+  try {
+    const blocks = view.state.field(blockState, false);
+    if (!blocks) return null;
+
+    const blockIndex = blocks.indexOf(block);
+    const isEvenBlock = blockIndex % 2 === 0;
+
+    const blockLayerElem = view.dom.querySelector(
+      `.code-blocks-layer .${isEvenBlock ? 'block-even' : 'block-odd'}`,
+    ) as HTMLElement | null;
+    const backgroundColor =
+      blockLayerElem?.ownerDocument
+        ? getComputedStyle(blockLayerElem).backgroundColor
+        : isEvenBlock
+          ? '#252B37'
+          : '#213644';
+
+    const contentDom = view.dom.querySelector('.cm-content') as HTMLElement | null;
+    const sourceStyle = contentDom ? getComputedStyle(contentDom) : getComputedStyle(view.dom);
+
+    const container = document.createElement('div');
+    container.className = 'cm-editor cm-focused block-export-wrapper';
+    container.style.cssText = `
+      padding: 18px 22px;
+      background-color: ${backgroundColor};
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
+      display: inline-block;
+      min-width: 360px;
+      max-width: 960px;
+      color: ${sourceStyle.color};
+      font-family: ${sourceStyle.fontFamily};
+      font-size: ${sourceStyle.fontSize};
+      line-height: ${sourceStyle.lineHeight};
+      position: relative;
+    `;
+
+    const contentWrapper = document.createElement('div');
+    contentWrapper.className = 'cm-content';
+    contentWrapper.style.whiteSpace = 'pre';
+    contentWrapper.style.cssText += inlineStyle(sourceStyle, [
+      'color',
+      'font-family',
+      'font-size',
+      'font-weight',
+      'font-style',
+      'line-height',
+      'letter-spacing',
+      'tab-size',
+      'text-rendering',
+      'background',
+      'background-color',
+      'text-shadow',
+    ]);
+
+    const highlights = getHighlights(view, block.content.from, block.content.to);
+    const fromLine = view.state.doc.lineAt(block.content.from);
+    const toLine = view.state.doc.lineAt(block.content.to);
+    for (let lineNum = fromLine.number; lineNum <= toLine.number; lineNum++) {
+      const line = view.state.doc.line(lineNum);
+      const lineElement = createHighlightedLine(line.text, line.from, line.to, highlights);
+      contentWrapper.appendChild(lineElement);
+    }
+
+    if (block.language.name && block.language.name !== 'text') {
+      const langLabel = document.createElement('div');
+      langLabel.className = 'block-language-label';
+      langLabel.textContent = block.language.name;
+      langLabel.style.cssText = `
+        position: absolute;
+        top: 6px;
+        right: 10px;
+        padding: 3px 8px;
+        background-color: rgba(0, 0, 0, 0.35);
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 11px;
+        font-family: system-ui, -apple-system, sans-serif;
+        font-weight: 600;
+        border-radius: 4px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        pointer-events: none;
+      `;
+      container.appendChild(langLabel);
+    }
+
+    container.appendChild(contentWrapper);
+    return container;
+  } catch (error) {
+    console.error('[blockImage] Failed to build block DOM:', error);
+    return null;
+  }
+}
+
+/**
+ * 将 Canvas 转换为 PNG Blob
+ */
+function canvasToPngBlob(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(blob => {
+      if (blob) {
+        resolve(blob);
+      } else {
+        reject(new Error('Canvas toBlob returned null'));
+      }
+    }, 'image/png');
+  });
+}
+
+/**
+ * 写入剪贴板（PNG）
+ */
+async function writeImageToClipboard(blob: Blob): Promise<void> {
+  const ClipboardItemCtor = (window as any).ClipboardItem;
+  if (ClipboardItemCtor && navigator.clipboard?.write) {
+    const item = new ClipboardItemCtor({'image/png': blob});
+    await navigator.clipboard.write([item]);
+    return;
+  }
+}
+
+/**
+ * 将当前活动块导出为图片并复制到剪贴板
+ */
+async function copyActiveBlockAsImage(view: EditorView): Promise<boolean> {
+  const activeBlock = getActiveNoteBlock(view.state);
+  if (!activeBlock) {
+    console.warn('[blockImage] No active block found');
+    return false;
+  }
+
+  const targetDom = view.scrollDOM || document.body;
+  const prevCursor = (targetDom as HTMLElement).style.cursor;
+  (targetDom as HTMLElement).style.cursor = 'progress';
+
+  const blockDom = getBlockDomElement(view, activeBlock);
+  if (!blockDom) {
+    console.warn('[blockImage] Cannot create block DOM');
+    (targetDom as HTMLElement).style.cursor = prevCursor;
+    return false;
+  }
+
+  // 将节点挂到文档外层，确保样式可用
+  const mount = document.createElement('div');
+  mount.style.cssText = 'position: fixed; left: -10000px; top: -10000px; pointer-events: none; z-index: -1;';
+  mount.appendChild(blockDom);
+  document.body.appendChild(mount);
+
+  try {
+    const canvas = await snapdom.toCanvas(blockDom, {
+      scale: 2,
+      dpr: window.devicePixelRatio || 1,
+      cache: 'auto',
+      backgroundColor: getComputedStyle(blockDom).backgroundColor,
+      outerShadows: false,
+    });
+
+    const blob = await canvasToPngBlob(canvas);
+    await writeImageToClipboard(blob);
+    return true;
+  } catch (error) {
+    console.error('[blockImage] Failed to copy block image:', error);
+    return false;
+  } finally {
+    mount.remove();
+    (targetDom as HTMLElement).style.cursor = prevCursor;
+  }
+}
+
+/**
+ * 命令：复制当前块为图片
+ */
+export const copyBlockImageCommand: Command = view => {
+  void copyActiveBlockAsImage(view);
+  return true;
+};
+
+export const blockImageEnabledFacet = Facet.define<boolean, boolean>({
+  combine: values => values.some(Boolean),
+});
+
+/**
+ * BlockImage 扩展入口
+ */
+export function createBlockImageExtension(): Extension {
+  return [
+    blockImageEnabledFacet.of(true),
+  ];
+}
+
+export default createBlockImageExtension;

frontend/src/views/editor/extensions/codeblock/decorations.ts

@@ -7,6 +7,9 @@ import { StateField, RangeSetBuilder, EditorState, Transaction } from "@codemirr
 import { blockState } from "./state";
 import { codeBlockEvent, USER_EVENTS } from "./annotation";
 
+// IME 输入状态
+let isComposing = false;
+
 /**
  * 块开始装饰组件
  */
@@ -150,15 +153,19 @@ const blockLayer = layer({
       // 转换为视口坐标进行后续计算
       const fromCoordsTop = fromLineBlock.top + view.documentTop;
       let toCoordsBottom = toLineBlock.bottom + view.documentTop;
-      
-      // 对最后一个块进行特殊处理，让它直接延伸到底部
+
       if (idx === blocks.length - 1) {
-        const editorHeight = view.dom.clientHeight;
-        const contentBottom = toCoordsBottom - view.documentTop + view.documentPadding.top;
+        // 计算需要添加到最后一个块的额外高度，以覆盖 scrollPastEnd 添加的额外滚动空间
+        // scrollPastEnd 会在文档底部添加相当于 scrollDOM.clientHeight 的额外空间
+        // 当滚动到最底部时，顶部仍会显示一行（defaultLineHeight），需要减去这部分
+        const editorHeight = view.scrollDOM.clientHeight;
+        const extraHeight = editorHeight - (
+          view.defaultLineHeight + // 当滚动到最底部时，顶部仍显示一行
+          view.documentPadding.top +
+          8 // 额外的边距调整
+        );
         
-        // 让最后一个块直接延伸到编辑器底部
-        if (contentBottom < editorHeight) {
-          const extraHeight = editorHeight - contentBottom - 10;
+        if (extraHeight > 0) {
           toCoordsBottom += extraHeight;
         }
       }
@@ -218,9 +225,10 @@ const preventFirstBlockFromBeingDeleted = EditorState.changeFilter.of((tr: any)
 
 /**
  * 防止选择在第一个块之前
- * 使用 transactionFilter 来确保选择不会在第一个块之前
  */
 const preventSelectionBeforeFirstBlock = EditorState.transactionFilter.of((tr: any) => {
+  if (isComposing) return tr;
+  
   if (tr.annotation(codeBlockEvent)) {
     return tr;
   }
@@ -252,6 +260,24 @@ const preventSelectionBeforeFirstBlock = EditorState.transactionFilter.of((tr: a
   return tr;
 });
 
+// IME 状态同步
+const imeStateSynchronizer = ViewPlugin.fromClass(
+  class {
+    constructor(view: EditorView) {
+      isComposing = view.composing || view.compositionStarted;
+    }
+
+    update(update: any) {
+      const view = update.view as EditorView;
+      isComposing = view.composing || view.compositionStarted;
+    }
+
+    destroy() {
+      isComposing = false;
+    }
+  }
+);
+
 /**
  * 获取块装饰扩展 - 简化选项
  */
@@ -267,6 +293,7 @@ export function getBlockDecorationExtensions(options: {
     atomicNoteBlock,
     preventFirstBlockFromBeingDeleted,
     preventSelectionBeforeFirstBlock,
+    imeStateSynchronizer,
   ];
 
   if (showBackground) {

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

@@ -39,6 +39,9 @@ export interface CodeBlockOptions {
 
     /** 新建块时的默认语言 */
     defaultLanguage?: SupportedLanguage;
+
+    /** 分隔符高度（像素） */
+    separatorHeight?: number;
 }
 
 /**
@@ -86,6 +89,7 @@ export function createCodeBlockExtension(options: CodeBlockOptions = {}): Extens
         showBackground = true,
         enableAutoDetection = true,
         defaultLanguage = 'text',
+        separatorHeight = 12,
     } = options;
 
     return [
@@ -104,7 +108,8 @@ export function createCodeBlockExtension(options: CodeBlockOptions = {}): Extens
 
         // 视觉装饰系统
         ...getBlockDecorationExtensions({
-            showBackground
+            showBackground,
+            separatorHeight
         }),
 
         // 光标保护（防止方向键移动到分隔符上）

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

@@ -1,141 +1,137 @@
-import { EditorView } from '@codemirror/view';
-import { Extension } from '@codemirror/state';
-import { copyCommand, cutCommand, pasteCommand } from '../codeblock/copyPaste';
-import { KeyBindingCommand } from '../../../../../bindings/voidraft/internal/models/models';
-import { useKeybindingStore } from '@/stores/keybindingStore';
-import { undo, redo } from '@codemirror/commands';
+import {EditorView} from '@codemirror/view';
+import {Extension} from '@codemirror/state';
+import {copyCommand, cutCommand, pasteCommand} from '../codeblock/copyPaste';
+import {KeyBindingName} from '@/../bindings/voidraft/internal/models/models';
+import {useKeybindingStore} from '@/stores/keybindingStore';
+import {redo, undo} 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 {useSystemStore} from '@/stores/systemStore';
+import {showContextMenu} from './manager';
+import type {MenuSchemaNode} from './menuSchema';
+import {buildRegisteredMenu, createMenuContext, registerMenuNodes} from './menuSchema';
+import {blockImageMenuNodes} from '../blockImage/contextMenu';
 
 
 function t(key: string): string {
-  return i18n.global.t(key);
+    return i18n.global.t(key);
 }
 
 
 function formatKeyBinding(keyBinding: string): string {
-  const systemStore = useSystemStore();
-  const isMac = systemStore.isMacOS;
+    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, " + ");
+    return keyBinding
+        .replace("Mod", isMac ? "Cmd" : "Ctrl")
+        .replace("Alt", isMac ? "Option" : "Alt")
+        .replace(/-/g, " + ");
 }
 
-const shortcutCache = new Map<KeyBindingCommand, string>();
+const shortcutCache = new Map<KeyBindingName, string>();
 
 
-function getShortcutText(command?: KeyBindingCommand): string {
-  if (command === undefined) {
+function getShortcutText(keyBindingKey?: KeyBindingName): string {
+    if (keyBindingKey === undefined) {
+        return "";
+    }
+
+    const cached = shortcutCache.get(keyBindingKey);
+    if (cached !== undefined) {
+        return cached;
+    }
+
+    try {
+        const keybindingStore = useKeybindingStore();
+        // binding.key 是命令标识符，binding.command 是快捷键组合
+        const binding = keybindingStore.keyBindings.find(
+            (kb) => kb.key === keyBindingKey && kb.enabled
+        );
+
+        if (binding?.key) {
+            const formatted = formatKeyBinding(binding.key);
+            shortcutCache.set(keyBindingKey, formatted);
+            return formatted;
+        }
+    } catch (error) {
+        console.warn("An error occurred while getting the shortcut:", error);
+    }
+
+    shortcutCache.set(keyBindingKey, "");
     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
-    );
-
-    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 "";
 }
 
 
-function getBuiltinMenuNodes(): MenuSchemaNode[] {
-  return [
-    {
-      id: "copy",
-      labelKey: "keybindings.commands.blockCopy",
-      command: copyCommand,
-      shortcutCommand: KeyBindingCommand.BlockCopyCommand,
-      enabled: (context) => context.hasSelection
-    },
-    {
-      id: "cut",
-      labelKey: "keybindings.commands.blockCut",
-      command: cutCommand,
-      shortcutCommand: KeyBindingCommand.BlockCutCommand,
-      visible: (context) => context.isEditable,
-      enabled: (context) => context.hasSelection && context.isEditable
-    },
-    {
-      id: "paste",
-      labelKey: "keybindings.commands.blockPaste",
-      command: pasteCommand,
-      shortcutCommand: KeyBindingCommand.BlockPasteCommand,
-      visible: (context) => context.isEditable
-    },
-    {
-      id: "undo",
-      labelKey: "keybindings.commands.historyUndo",
-      command: undo,
-      shortcutCommand: KeyBindingCommand.HistoryUndoCommand,
-      visible: (context) => context.isEditable
-    },
-    {
-      id: "redo",
-      labelKey: "keybindings.commands.historyRedo",
-      command: redo,
-      shortcutCommand: KeyBindingCommand.HistoryRedoCommand,
-      visible: (context) => context.isEditable
-    }
-  ];
+function builtinMenuNodes(): MenuSchemaNode[] {
+    return [
+        {
+            id: "copy",
+            labelKey: "keybindings.commands.blockCopy",
+            command: copyCommand,
+            keyBindingName: KeyBindingName.BlockCopy,
+            enabled: (context) => context.hasSelection
+        },
+        {
+            id: "cut",
+            labelKey: "keybindings.commands.blockCut",
+            command: cutCommand,
+            keyBindingName: KeyBindingName.BlockCut,
+            visible: (context) => context.isEditable,
+            enabled: (context) => context.hasSelection && context.isEditable
+        },
+        {
+            id: "paste",
+            labelKey: "keybindings.commands.blockPaste",
+            command: pasteCommand,
+            keyBindingName: KeyBindingName.BlockPaste,
+            visible: (context) => context.isEditable
+        },
+        {
+            id: "undo",
+            labelKey: "keybindings.commands.historyUndo",
+            command: undo,
+            keyBindingName: KeyBindingName.HistoryUndo,
+            visible: (context) => context.isEditable
+        },
+        {
+            id: "redo",
+            labelKey: "keybindings.commands.historyRedo",
+            command: redo,
+            keyBindingName: KeyBindingName.HistoryRedo,
+            visible: (context) => context.isEditable
+        }
+    ];
 }
 
 let builtinMenuRegistered = false;
 
 function ensureBuiltinMenuRegistered(): void {
-  if (builtinMenuRegistered) return;
-  registerMenuNodes(getBuiltinMenuNodes());
-  builtinMenuRegistered = true;
+    if (builtinMenuRegistered) return;
+    registerMenuNodes([...builtinMenuNodes(), ...blockImageMenuNodes]);
+    builtinMenuRegistered = true;
 }
 
 
 export function createEditorContextMenu(): Extension {
-  ensureBuiltinMenuRegistered();
+    ensureBuiltinMenuRegistered();
 
-  return EditorView.domEventHandlers({
-    contextmenu: (event, view) => {
-      event.preventDefault();
+    return EditorView.domEventHandlers({
+        contextmenu: (event, view) => {
+            event.preventDefault();
 
-      const context = createMenuContext(view, event as MouseEvent);
-      const menuItems = buildRegisteredMenu(context, {
-        translate: t,
-        formatShortcut: getShortcutText
-      });
+            const context = createMenuContext(view, event as MouseEvent);
+            const menuItems = buildRegisteredMenu(context, {
+                translate: t,
+                formatShortcut: getShortcutText
+            });
 
-      if (menuItems.length === 0) {
-        return false;
-      }
+            if (menuItems.length === 0) {
+                return false;
+            }
 
-      showContextMenu(view, event.clientX, event.clientY, menuItems);
-      return true;
-    }
-  });
+            showContextMenu(view, event.clientX, event.clientY, menuItems);
+            return true;
+        }
+    });
 }
 
 export default createEditorContextMenu;

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

@@ -1,6 +1,6 @@
 import type { EditorView } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
-import type { KeyBindingCommand } from '../../../../../bindings/voidraft/internal/models/models';
+import { KeyBindingName } from '@/../bindings/voidraft/internal/models/models';
 
 export interface MenuContext {
   view: EditorView;
@@ -16,7 +16,7 @@ export type MenuSchemaNode =
       type?: "action";
       labelKey: string;
       command?: (view: EditorView) => boolean;
-      shortcutCommand?: KeyBindingCommand;
+      keyBindingName?: KeyBindingName;
       visible?: (context: MenuContext) => boolean;
       enabled?: (context: MenuContext) => boolean;
     }
@@ -37,7 +37,7 @@ export interface RenderMenuItem {
 
 interface MenuBuildOptions {
   translate: (key: string) => string;
-  formatShortcut: (command?: KeyBindingCommand) => string;
+  formatShortcut: (keyBindingKey?: KeyBindingName) => string;
 }
 
 const menuRegistry: MenuSchemaNode[] = [];
@@ -89,7 +89,7 @@ function convertNode(
   }
 
   const disabled = node.enabled ? !node.enabled(context) : false;
-  const shortcut = options.formatShortcut(node.shortcutCommand);
+  const shortcut = options.formatShortcut(node.keyBindingName);
 
   return {
     id: node.id,

frontend/src/views/editor/extensions/markdown/plugins/code-block.ts

@@ -65,9 +65,15 @@ export function handleCodeBlock(
 	if (ctx.seen.has(nf)) return;
 	ctx.seen.add(nf);
 	ranges.push([nf, nt]);
+	
+	// When cursor/selection is in this code block, don't add any decorations
+	// This allows the selection background to be visible
+	if (inCursor) return;
 
 	const startLine = ctx.view.state.doc.lineAt(nf);
 	const endLine = ctx.view.state.doc.lineAt(nt);
+	
+	// Add background decorations for each line
 	for (let num = startLine.number; num <= endLine.number; num++) {
 		const line = ctx.view.state.doc.line(num);
 		let deco = DECO_CODEBLOCK_LINE;
@@ -76,14 +82,14 @@ export function handleCodeBlock(
 		else if (num === endLine.number) deco = DECO_CODEBLOCK_END;
 		ctx.items.push({ from: line.from, to: line.from, deco });
 	}
-	if (!inCursor) {
-		const codeInfo = node.getChild('CodeInfo');
-		const codeMarks = node.getChildren('CodeMark');
-		const language = codeInfo ? ctx.view.state.doc.sliceString(codeInfo.from, codeInfo.to).trim() : null;
-		ctx.items.push({ from: startLine.to, to: startLine.to, deco: Decoration.widget({ widget: new CodeBlockInfoWidget(nf, nt, language), side: 1 }), priority: 1 });
-		if (codeInfo) ctx.items.push({ from: codeInfo.from, to: codeInfo.to, deco: invisibleDecoration });
-		for (const mark of codeMarks) ctx.items.push({ from: mark.from, to: mark.to, deco: invisibleDecoration });
-	}
+	
+	// Add language info widget and hide code marks
+	const codeInfo = node.getChild('CodeInfo');
+	const codeMarks = node.getChildren('CodeMark');
+	const language = codeInfo ? ctx.view.state.doc.sliceString(codeInfo.from, codeInfo.to).trim() : null;
+	ctx.items.push({ from: startLine.to, to: startLine.to, deco: Decoration.widget({ widget: new CodeBlockInfoWidget(nf, nt, language), side: 1 }), priority: 1 });
+	if (codeInfo) ctx.items.push({ from: codeInfo.from, to: codeInfo.to, deco: invisibleDecoration });
+	for (const mark of codeMarks) ctx.items.push({ from: mark.from, to: mark.to, deco: invisibleDecoration });
 }
 
 /**

frontend/src/views/editor/extensions/minimap/blockManager.ts

@@ -0,0 +1,572 @@
+import { EditorView } from '@codemirror/view';
+import { EditorState, ChangeSet } from '@codemirror/state';
+import { syntaxTree, highlightingFor } from '@codemirror/language';
+import { Highlighter, highlightTree } from '@lezer/highlight';
+import { Scale } from './config';
+import { LinesState, getLinesSnapshot } from './linesState';
+import {
+  ToWorkerMessage,
+  ToMainMessage,
+  BlockRequest,
+  Highlight,
+  LineSpan,
+  FontInfo,
+  UpdateFontInfoRequest,
+} from './worker/protocol';
+import crelt from 'crelt';
+
+const BLOCK_LINES = 50;
+const MAX_BLOCKS = 20;
+
+interface Block {
+  index: number;
+  startLine: number;
+  endLine: number;
+  bitmap: ImageBitmap | null;
+  dirty: boolean;
+  rendering: boolean;
+  requestId: number;
+  lastUsed: number; // LRU 时间戳
+  // 高亮缓存
+  cachedHighlights: Highlight[] | null;
+  cachedLines: LineSpan[][] | null;
+  cachedTextSlice: string | null;
+  cachedTextOffset: number;
+}
+
+export class BlockManager {
+  private worker: Worker | null = null;
+  private blocks = new Map<number, Block>();
+  private fontInfoMap = new Map<string, FontInfo>();
+  private fontDirty = true;
+  private fontVersion = 0;
+  private sentFontTags = new Set<string>(); // 已发送给 Worker 的字体标签
+  private measureCache: { charWidth: number; lineHeight: number; version: number } | null = null;
+  private displayText: 'blocks' | 'characters' = 'characters';
+  private themeClasses: Set<string>;
+  private requestId = 0;
+  private onBlockReady: (() => void) | null = null;
+  
+  // 批量处理块完成事件
+  private pendingBlockReadyHandle: ReturnType<typeof setTimeout> | null = null;
+  private renderingCount = 0;
+
+  constructor(private view: EditorView) {
+    this.themeClasses = new Set(Array.from(view.dom.classList));
+    this.initWorker();
+  }
+
+  private initWorker(): void {
+    this.worker = new Worker(
+      new URL('./worker/block.worker.ts', import.meta.url),
+      { type: 'module' }
+    );
+
+    this.worker.onmessage = (e: MessageEvent<ToMainMessage>) => {
+      this.handleWorkerMessage(e.data);
+    };
+
+    this.worker.onerror = (e) => {
+      console.error('[BlockManager] Worker error:', e);
+    };
+
+    this.worker.postMessage({ type: 'init' } as ToWorkerMessage);
+  }
+
+  private handleWorkerMessage(msg: ToMainMessage): void {
+    switch (msg.type) {
+      case 'ready':
+        break;
+      case 'blockComplete': {
+        const block = this.blocks.get(msg.blockIndex);
+        if (block && block.requestId === msg.blockId) {
+          block.bitmap = msg.bitmap;
+          block.dirty = false;
+          block.rendering = false;
+          this.renderingCount = Math.max(0, this.renderingCount - 1);
+          this.scheduleBlockReady();
+        }
+        break;
+      }
+      case 'error':
+        console.error('[BlockManager] Worker error:', msg.message);
+        break;
+    }
+  }
+
+  // 批量触发块就绪回调
+  // 策略：等 30ms，让多个块完成事件合并
+  private scheduleBlockReady(): void {
+    if (this.pendingBlockReadyHandle !== null) {
+      clearTimeout(this.pendingBlockReadyHandle);
+    }
+    
+    this.pendingBlockReadyHandle = setTimeout(() => {
+      this.pendingBlockReadyHandle = null;
+      if (this.renderingCount === 0) {
+        this.onBlockReady?.();
+      }
+    }, 30);
+  }
+
+  setOnBlockReady(callback: () => void): void {
+    this.onBlockReady = callback;
+  }
+
+  setDisplayText(mode: 'blocks' | 'characters'): void {
+    if (this.displayText !== mode) {
+      this.displayText = mode;
+      this.markAllDirty();
+    }
+  }
+
+  checkThemeChange(): boolean {
+    const nowClasses = Array.from(this.view.dom.classList);
+    const now = new Set(nowClasses);
+    const prev = this.themeClasses;
+    this.themeClasses = now;
+
+    if (!prev) {
+      this.fontDirty = true;
+      this.markAllDirty();
+      return true;
+    }
+
+    const prevSet = new Set(prev);
+    const nowSet = new Set(now);
+    prevSet.delete('cm-focused');
+    nowSet.delete('cm-focused');
+
+    if (prevSet.size !== nowSet.size) {
+      this.fontDirty = true;
+      this.markAllDirty();
+      return true;
+    }
+
+    for (const cls of prevSet) {
+      if (!nowSet.has(cls)) {
+        this.fontDirty = true;
+        this.markAllDirty();
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  markAllDirty(): void {
+    for (const block of this.blocks.values()) {
+      block.dirty = true;
+      // 清除缓存，强制重新收集数据
+      block.cachedHighlights = null;
+      block.cachedLines = null;
+      block.cachedTextSlice = null;
+    }
+  }
+
+  handleDocChange(state: EditorState, changes: ChangeSet, oldLineCount: number): void {
+    const totalLines = state.doc.lines;
+    const maxIndex = Math.ceil(totalLines / BLOCK_LINES) - 1;
+
+    // 找出变化影响的块
+    const affectedBlocks = new Set<number>();
+    
+    // 正确检测行数变化：比较新旧文档总行数
+    const hasLineCountChange = totalLines !== oldLineCount;
+
+    changes.iterChanges((fromA, toA, fromB, toB) => {
+      // 找出新文档中受影响的行范围
+      const startLine = state.doc.lineAt(fromB).number;
+      const endLine = state.doc.lineAt(Math.min(toB, state.doc.length)).number;
+      
+      const startBlock = Math.floor((startLine - 1) / BLOCK_LINES);
+      const endBlock = Math.floor((endLine - 1) / BLOCK_LINES);
+      
+      for (let i = startBlock; i <= endBlock; i++) {
+        affectedBlocks.add(i);
+      }
+    });
+
+    // 如果行数变化，后续所有块都需要标记为 dirty
+    let markRest = false;
+
+    for (const [index, block] of this.blocks) {
+      if (index > maxIndex) {
+        block.bitmap?.close();
+        this.blocks.delete(index);
+      } else if (affectedBlocks.has(index)) {
+        block.dirty = true;
+        // 清除缓存
+        block.cachedHighlights = null;
+        block.cachedLines = null;
+        block.cachedTextSlice = null;
+        if (hasLineCountChange) {
+          markRest = true; // 从这个块开始，后续块都需要更新
+        }
+      } else if (markRest) {
+        block.dirty = true;
+        // 清除缓存
+        block.cachedHighlights = null;
+        block.cachedLines = null;
+        block.cachedTextSlice = null;
+      }
+    }
+
+  }
+
+  /**
+   * 计算可见范围（提取公共计算逻辑）
+   */
+  private getVisibleRange(
+    canvasHeight: number,
+    lineHeight: number,
+    scrollInfo: { scrollTop: number; clientHeight: number; scrollHeight: number }
+  ): {
+    valid: boolean;
+    totalLines: number;
+    scaledPTop: number;
+    canvasTop: number;
+    startBlock: number;
+    endBlock: number;
+  } | null {
+    const totalLines = this.view.state.field(LinesState).length;
+    if (totalLines === 0 || canvasHeight <= 0) {
+      return null;
+    }
+
+    const { top: pTop, bottom: pBottom } = this.view.documentPadding;
+    const scaledPTop = pTop / Scale.SizeRatio;
+    const scaledPBottom = pBottom / Scale.SizeRatio;
+    const totalHeight = scaledPTop + scaledPBottom + totalLines * lineHeight;
+
+    const { scrollTop, clientHeight, scrollHeight } = scrollInfo;
+    const scrollPercent = Math.max(0, Math.min(1, scrollTop / (scrollHeight - clientHeight))) || 0;
+    const canvasTop = Math.max(0, scrollPercent * (totalHeight - canvasHeight));
+
+    const visibleStart = Math.max(1, Math.floor((canvasTop - scaledPTop) / lineHeight) + 1);
+    const visibleEnd = Math.min(totalLines, Math.ceil((canvasTop + canvasHeight - scaledPTop) / lineHeight));
+
+    if (visibleEnd < visibleStart) {
+      return null;
+    }
+
+    return {
+      valid: true,
+      totalLines,
+      scaledPTop,
+      canvasTop,
+      startBlock: Math.floor((visibleStart - 1) / BLOCK_LINES),
+      endBlock: Math.floor((visibleEnd - 1) / BLOCK_LINES),
+    };
+  }
+
+  render(
+    canvas: HTMLCanvasElement,
+    ctx: CanvasRenderingContext2D,
+    scrollInfo: { scrollTop: number; clientHeight: number; scrollHeight: number }
+  ): void {
+    if (this.fontDirty) {
+      this.refreshFontCache();
+    }
+
+    const { charWidth, lineHeight } = this.measure(ctx);
+    const range = this.getVisibleRange(canvas.height, lineHeight, scrollInfo);
+    if (!range) return;
+
+    const { totalLines, scaledPTop, canvasTop, startBlock, endBlock } = range;
+    const state = this.view.state;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (let i = startBlock; i <= endBlock; i++) {
+      const block = this.getOrCreateBlock(i, state, totalLines);
+      if (!block) continue;
+
+      if (block.dirty && !block.rendering) {
+        this.requestBlockRender(block, state, charWidth, lineHeight);
+      }
+
+      if (block.bitmap) {
+        const blockY = scaledPTop + (block.startLine - 1) * lineHeight - canvasTop;
+        ctx.drawImage(block.bitmap, 0, blockY);
+      }
+    }
+
+    this.fontDirty = false;
+    this.evictOldBlocks();
+  }
+
+  /**
+   * 只绘制缓存的块，不请求新渲染（用于 overlay-only 更新）
+   */
+  drawCachedBlocks(
+    canvas: HTMLCanvasElement,
+    ctx: CanvasRenderingContext2D,
+    scrollInfo: { scrollTop: number; clientHeight: number; scrollHeight: number }
+  ): void {
+    const { lineHeight } = this.measure(ctx);
+    const range = this.getVisibleRange(canvas.height, lineHeight, scrollInfo);
+    if (!range) return;
+
+    const { scaledPTop, canvasTop, startBlock, endBlock } = range;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (let i = startBlock; i <= endBlock; i++) {
+      const block = this.blocks.get(i);
+      if (block?.bitmap) {
+        const blockY = scaledPTop + (block.startLine - 1) * lineHeight - canvasTop;
+        ctx.drawImage(block.bitmap, 0, blockY);
+      }
+    }
+  }
+
+  private getOrCreateBlock(index: number, state: EditorState, totalLines: number): Block | null {
+    const startLine = index * BLOCK_LINES + 1;
+    if (startLine > totalLines) return null;
+
+    const endLine = Math.min((index + 1) * BLOCK_LINES, totalLines);
+    const now = performance.now();
+
+    let block = this.blocks.get(index);
+    if (!block) {
+      block = {
+        index,
+        startLine,
+        endLine,
+        bitmap: null,
+        dirty: true,
+        rendering: false,
+        requestId: 0,
+        lastUsed: now,
+        cachedHighlights: null,
+        cachedLines: null,
+        cachedTextSlice: null,
+        cachedTextOffset: 0,
+      };
+      this.blocks.set(index, block);
+    } else {
+      block.startLine = startLine;
+      block.endLine = endLine;
+      block.lastUsed = now; // 更新 LRU 时间戳
+    }
+
+    return block;
+  }
+
+  private requestBlockRender(
+    block: Block,
+    state: EditorState,
+    charWidth: number,
+    lineHeight: number
+  ): void {
+    if (!this.worker) return;
+
+    block.rendering = true;
+    block.requestId = ++this.requestId;
+    this.renderingCount++;
+
+    const { startLine, endLine } = block;
+
+    let highlights: Highlight[];
+    let lines: LineSpan[][];
+    let textSlice: string;
+    let textOffset: number;
+
+    // 只有当块是 dirty 时才重新收集数据，否则使用缓存
+    if (block.dirty || !block.cachedHighlights) {
+      const linesSnapshot = getLinesSnapshot(state);
+      const tree = syntaxTree(state);
+
+      // Collect highlights
+      highlights = [];
+      if (tree.length > 0 && startLine <= state.doc.lines) {
+        const highlighter: Highlighter = {
+          style: (tags) => highlightingFor(state, tags),
+        };
+        const startPos = state.doc.line(startLine).from;
+        const endPos = state.doc.line(Math.min(endLine, state.doc.lines)).to;
+
+        highlightTree(tree, highlighter, (from, to, tags) => {
+          highlights.push({ from, to, tags });
+        }, startPos, endPos);
+      }
+
+      // Extract relevant lines
+      const startIdx = startLine - 1;
+      const endIdx = Math.min(endLine, linesSnapshot.length);
+      lines = linesSnapshot.slice(startIdx, endIdx).map(line =>
+        line.map(span => ({ from: span.from, to: span.to, folded: span.folded }))
+      );
+
+      // Get text slice
+      textOffset = 0;
+      let textEnd = 0;
+      if (lines.length > 0 && lines[0].length > 0) {
+        textOffset = lines[0][0].from;
+        const lastLine = lines[lines.length - 1];
+        if (lastLine.length > 0) {
+          textEnd = lastLine[lastLine.length - 1].to;
+        }
+      }
+      textSlice = state.doc.sliceString(textOffset, textEnd);
+
+      // 缓存数据
+      block.cachedHighlights = highlights;
+      block.cachedLines = lines;
+      block.cachedTextSlice = textSlice;
+      block.cachedTextOffset = textOffset;
+    } else {
+      // 使用缓存的数据
+      highlights = block.cachedHighlights;
+      lines = block.cachedLines!;
+      textSlice = block.cachedTextSlice!;
+      textOffset = block.cachedTextOffset;
+    }
+
+    // 确保字体信息已发送给 Worker
+    this.ensureFontInfoSent(highlights);
+
+    const blockLines = endLine - startLine + 1;
+    const request: BlockRequest = {
+      type: 'renderBlock',
+      blockId: block.requestId,
+      blockIndex: block.index,
+      startLine,
+      endLine,
+      width: Math.ceil(Scale.MaxWidth * Scale.PixelMultiplier),
+      height: Math.ceil(blockLines * lineHeight),
+      highlights,
+      lines,
+      textSlice,
+      textOffset,
+      displayText: this.displayText,
+      charWidth,
+      lineHeight,
+      gutterOffset: 0,
+    };
+
+    this.worker.postMessage(request);
+  }
+
+  /**
+   * 确保字体信息已发送给 Worker
+   * 增量发送：只发送新的标签
+   */
+  private ensureFontInfoSent(highlights: Highlight[]): void {
+    if (!this.worker) return;
+
+    // 收集新的标签
+    const newTags: string[] = [];
+    for (const hl of highlights) {
+      if (!this.sentFontTags.has(hl.tags)) {
+        newTags.push(hl.tags);
+      }
+    }
+    // 默认字体标签
+    if (!this.sentFontTags.has('')) {
+      newTags.push('');
+    }
+
+    // 如果没有新标签，不需要发送
+    if (newTags.length === 0) return;
+
+    // 构建新标签的字体信息
+    const fontInfoMap: Record<string, FontInfo> = {};
+    for (const tag of newTags) {
+      fontInfoMap[tag] = this.getFontInfo(tag);
+      this.sentFontTags.add(tag);
+    }
+
+    const updateRequest: UpdateFontInfoRequest = {
+      type: 'updateFontInfo',
+      fontInfoMap,
+      defaultFont: this.getFontInfo(''),
+    };
+    this.worker.postMessage(updateRequest);
+  }
+
+  private evictOldBlocks(): void {
+    if (this.blocks.size <= MAX_BLOCKS) return;
+
+    // LRU 驱逐：按 lastUsed 升序排序，驱逐最久未使用的块
+    const sorted = Array.from(this.blocks.entries())
+      .filter(([, b]) => !b.rendering)
+      .sort((a, b) => a[1].lastUsed - b[1].lastUsed);
+
+    const toRemove = sorted.slice(0, this.blocks.size - MAX_BLOCKS);
+    for (const [index, block] of toRemove) {
+      block.bitmap?.close();
+      this.blocks.delete(index);
+    }
+  }
+
+  private refreshFontCache(): void {
+    this.fontInfoMap.clear();
+    this.measureCache = null;
+    this.sentFontTags.clear(); // 需要重新发送字体信息给 Worker
+    // 注意：fontDirty 在成功渲染块后才设为 false
+    this.fontVersion++;
+    this.markAllDirty();
+  }
+
+  measure(ctx: CanvasRenderingContext2D): { charWidth: number; lineHeight: number } {
+    const info = this.getFontInfo('');
+    ctx.textBaseline = 'ideographic';
+    ctx.fillStyle = info.color;
+    ctx.font = info.font;
+
+    if (this.measureCache?.version === this.fontVersion) {
+      return { charWidth: this.measureCache.charWidth, lineHeight: this.measureCache.lineHeight };
+    }
+
+    const charWidth = ctx.measureText('_').width;
+    this.measureCache = { charWidth, lineHeight: info.lineHeight, version: this.fontVersion };
+    return { charWidth, lineHeight: info.lineHeight };
+  }
+
+  private getFontInfo(tags: string): FontInfo {
+    const cached = this.fontInfoMap.get(tags);
+    if (cached) return cached;
+
+    const mockToken = crelt('span', { class: tags });
+    const mockLine = crelt('div', { class: 'cm-line', style: 'display: none' }, mockToken);
+    this.view.contentDOM.appendChild(mockLine);
+
+    const style = window.getComputedStyle(mockToken);
+    
+    // 获取字体大小（用于渲染字符）
+    const fontSize = parseFloat(style.fontSize) || this.view.defaultLineHeight;
+    const scaledFontSize = Math.max(1, fontSize / Scale.SizeRatio);
+    
+    // 获取行高（用于行间距）
+    const rawLineHeight = parseFloat(style.lineHeight);
+    const resolvedLineHeight = Number.isFinite(rawLineHeight) && rawLineHeight > 0 ? rawLineHeight : fontSize;
+    const lineHeight = Math.max(1, resolvedLineHeight / Scale.SizeRatio);
+
+    const result: FontInfo = {
+      color: style.color,
+      font: `${style.fontStyle} ${style.fontWeight} ${scaledFontSize}px ${style.fontFamily}`,
+      lineHeight,
+    };
+
+    this.view.contentDOM.removeChild(mockLine);
+    this.fontInfoMap.set(tags, result);
+    return result;
+  }
+
+  destroy(): void {
+    if (this.pendingBlockReadyHandle !== null) {
+      clearTimeout(this.pendingBlockReadyHandle);
+    }
+    for (const block of this.blocks.values()) {
+      block.bitmap?.close();
+    }
+    this.blocks.clear();
+    this.worker?.postMessage({ type: 'destroy' } as ToWorkerMessage);
+    this.worker?.terminate();
+    this.worker = null;
+  }
+}
+
+

frontend/src/views/editor/extensions/minimap/diagnostics.ts

@@ -8,12 +8,21 @@ import {
 
 import { LineBasedState } from "./linebasedstate";
 import { DrawContext } from "./types";
-import { Lines, LinesState, foldsChanged } from "./linesState";
-import { Config } from "./config";
+import { LinesState, foldsChanged } from "./linesState";
+import { Config, Scale } from "./config";
+import { lineLength, lineNumberAt, offsetWithinLine } from "./lineGeometry";
 
 type Severity = Diagnostic["severity"];
+type DiagnosticRange = { from: number; to: number };
+type LineDiagnostics = {
+  severity: Severity;
+  ranges: Array<DiagnosticRange>;
+};
+const MIN_PIXEL_WIDTH = 1 / Scale.PixelMultiplier;
+const snapToDevice = (value: number) =>
+  Math.round(value * Scale.PixelMultiplier) / Scale.PixelMultiplier;
 
-export class DiagnosticState extends LineBasedState<Severity> {
+export class DiagnosticState extends LineBasedState<LineDiagnostics> {
   private count: number | undefined = undefined;
 
   public constructor(view: EditorView) {
@@ -63,70 +72,74 @@ export class DiagnosticState extends LineBasedState<Severity> {
     this.count = diagnosticCount(update.state);
 
     forEachDiagnostic(update.state, (diagnostic, from, to) => {
-      // Find the start and end lines for the diagnostic
-      const lineStart = this.findLine(from, lines);
-      const lineEnd = this.findLine(to, lines);
+      const lineStart = lineNumberAt(lines, from);
+      const lineEnd = lineNumberAt(lines, to);
+      if (lineStart <= 0 || lineEnd <= 0) {
+        return;
+      }
 
-      // Populate each line in the range with the highest severity diagnostic
-      let severity = diagnostic.severity;
-      for (let i = lineStart; i <= lineEnd; i++) {
-        const previous = this.get(i);
-        if (previous) {
-          severity = [severity, previous]
-            .sort(this.sort.bind(this))
-            .slice(0, 1)[0];
+      for (let lineNumber = lineStart; lineNumber <= lineEnd; lineNumber++) {
+        const spans = lines[lineNumber - 1];
+        if (!spans || spans.length === 0) {
+          continue;
         }
-        this.set(i, severity);
+
+        const length = lineLength(spans);
+
+        const startOffset =
+          lineNumber === lineStart
+            ? offsetWithinLine(from, spans)
+            : 0;
+        const endOffset =
+          lineNumber === lineEnd ? offsetWithinLine(to, spans) : length;
+
+        const fromOffset = Math.max(0, Math.min(length, startOffset));
+        let toOffset = Math.max(fromOffset, Math.min(length, endOffset));
+        if (toOffset === fromOffset) {
+          toOffset = Math.min(length, fromOffset + 1);
+        }
+
+        this.pushRange(lineNumber, diagnostic.severity, {
+          from: fromOffset,
+          to: toOffset,
+        });
       }
     });
+
+    this.mergeRanges();
   }
 
   public drawLine(ctx: DrawContext, lineNumber: number) {
-    const { context, lineHeight, offsetX, offsetY } = ctx;
-    const severity = this.get(lineNumber);
-    if (!severity) {
+    const diagnostics = this.get(lineNumber);
+    if (!diagnostics) {
       return;
     }
 
-    // Draw the full line width rectangle in the background
-    context.globalAlpha = 0.65;
-    context.beginPath();
-    context.rect(
-      offsetX,
-      offsetY /* TODO Scaling causes anti-aliasing in rectangles */,
-      context.canvas.width - offsetX,
-      lineHeight
-    );
-    context.fillStyle = this.color(severity);
-    context.fill();
+    const { context, lineHeight, charWidth, offsetX, offsetY } = ctx;
+    const color = this.color(diagnostics.severity);
+    const snappedY = snapToDevice(offsetY);
+    const snappedHeight =
+      Math.max(MIN_PIXEL_WIDTH, snapToDevice(offsetY + lineHeight) - snappedY) ||
+      MIN_PIXEL_WIDTH;
 
-    // Draw diagnostic range rectangle in the foreground
-    // TODO: We need to update the state to have specific ranges
-    // context.globalAlpha = 1;
-    // context.beginPath();
-    // context.rect(offsetX, offsetY, textWidth, lineHeight);
-    // context.fillStyle = this.color(severity);
-    // context.fill();
-  }
+    context.fillStyle = color;
+    for (const range of diagnostics.ranges) {
+      const startX = offsetX + range.from * charWidth;
+      const width = Math.max(
+        MIN_PIXEL_WIDTH,
+        (range.to - range.from) * charWidth
+      );
+      const snappedX = snapToDevice(startX);
+      const snappedWidth =
+        Math.max(MIN_PIXEL_WIDTH, snapToDevice(startX + width) - snappedX) ||
+        MIN_PIXEL_WIDTH;
 
-  /**
-   * Given a position and a set of line ranges, return
-   * the line number the position falls within
-   */
-  private findLine(pos: number, lines: Lines) {
-    const index = lines.findIndex((spans) => {
-      const start = spans.slice(0, 1)[0];
-      const end = spans.slice(-1)[0];
-
-      if (!start || !end) {
-        return false;
-      }
-
-      return start.from <= pos && pos <= end.to;
-    });
-
-    // Line numbers begin at 1
-    return index + 1;
+      context.globalAlpha = 0.65;
+      context.beginPath();
+      context.rect(snappedX, snappedY, snappedWidth, snappedHeight);
+      context.fill();
+    }
+    context.globalAlpha = 1;
   }
 
   /**
@@ -141,12 +154,6 @@ export class DiagnosticState extends LineBasedState<Severity> {
       : "#999";
   }
 
-  /** Sorts severity from most to least severe */
-  private sort(a: Severity, b: Severity) {
-    return this.score(b) - this.score(a);
-  }
-
-  /** Assigns a score to severity, with most severe being the highest */
   private score(s: Severity) {
     switch (s) {
       case "error": {
@@ -160,6 +167,47 @@ export class DiagnosticState extends LineBasedState<Severity> {
       }
     }
   }
+
+  private pushRange(
+    lineNumber: number,
+    severity: Severity,
+    range: DiagnosticRange
+  ) {
+    let entry = this.get(lineNumber);
+    if (!entry) {
+      entry = { severity, ranges: [range] };
+      this.set(lineNumber, entry);
+      return;
+    }
+
+    if (this.score(severity) > this.score(entry.severity)) {
+      entry.severity = severity;
+    }
+
+    entry.ranges.push(range);
+  }
+
+  private mergeRanges() {
+    for (const entry of this.map.values()) {
+      if (entry.ranges.length <= 1) {
+        continue;
+      }
+
+      entry.ranges.sort((a, b) => a.from - b.from);
+      const merged: Array<DiagnosticRange> = [];
+
+      for (const range of entry.ranges) {
+        const last = merged[merged.length - 1];
+        if (last && range.from <= last.to) {
+          last.to = Math.max(last.to, range.to);
+        } else {
+          merged.push({ ...range });
+        }
+      }
+
+      entry.ranges = merged;
+    }
+  }
 }
 
 export function diagnostics(view: EditorView): DiagnosticState {