🐛 Adjusted error message and icon clearing logic

✨ Added the backup feature
🎨 Optimize storage logic
2025-07-17 11:03:42 +08:00 · 2025-07-17 00:12:00 +08:00 · 2025-07-13 22:32:58 +08:00 · 2025-07-13 11:58:53 +08:00 · 2025-07-12 23:56:43 +08:00 · 2025-07-12 23:56:04 +08:00
177 changed files with 23478 additions and 7359 deletions
--- a/83
+++ b/83
@@ -1,73 +1,18 @@
-Apache License
-Version 2.0, January 2004
-http://www.apache.org/licenses/
+MIT License

-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+Copyright (c) 2025 landaiqing

-1. Definitions.
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 
+associated documentation files (the "Software"), to deal in the Software without restriction, including 
+without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
+copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the 
+following conditions:

-"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+The above copyright notice and this permission notice shall be included in all copies or substantial 
+portions of the Software.

-"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
-
-"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
-
-"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
-
-"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
-
-"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
-
-"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
-
-"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
-
-"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
-
-"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
-
-     (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and
-
-     (b) You must cause any modified files to carry prominent notices stating that You changed the files; and
-
-     (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
-
-     (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
-
-     You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!)  The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.
-
-Copyright 2025 landaiqing
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 
+LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO 
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE 
+USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -1,59 +1,163 @@
-# Welcome to Your New Wails3 Project!
+# <img src="./frontend/public/appicon.png" alt="VoidRaft Logo" width="32" height="32" style="vertical-align: middle;"> VoidRaft

-Congratulations on generating your Wails3 application! This README will guide you through the next steps to get your project up and running.
+[中文](README_ZH.md) | **English**

-## Getting Started
+> *An elegant text snippet recording tool designed for developers.*

-1. Navigate to your project directory in the terminal.
+VoidRaft is a modern developer-focused text editor that allows you to record, organize, and manage various text snippets anytime, anywhere. Whether it's temporary code snippets, API responses, meeting notes, or daily to-do lists, VoidRaft provides a smooth and elegant editing experience.

-2. To run your application in development mode, use the following command:
+## Core Features

-   ```
-   wails3 dev
-   ```
+### Developer-Friendly

-   This will start your application and enable hot-reloading for both frontend and backend changes.
+- Multi-language code block support - Syntax highlighting for 30+ programming languages
+- Smart language detection - Automatically recognizes code block language types
+- Code formatting - Built-in Prettier support for one-click code beautification
+- Block editing mode - Split content into independent code blocks, each with different language settings
+- Multi-window support - edit multiple documents at the same time
+- Support for custom themes - Custom editor themes

-3. To build your application for production, use:
+### Modern Interface

-   ```
-   wails3 build
-   ```
+- Clean and elegant design - Simple yet sophisticated user interface
+- Dark/Light themes - Adapts to different usage scenarios
+- Multi-language support - Built-in internationalization with multiple language switching

-   This will create a production-ready executable in the `build` directory.
+### Extension System

-## Exploring Wails3 Features
+- Modular architecture - Extensible editor based on CodeMirror 6
+- Rich extensions - Includes various practical editor extensions
+  - Rainbow bracket matching
+  - VSCode-style search and replace
+  - Color picker
+  - Built-in translation tool
+  - Text highlighting
+  - Code folding
+  - Hyperlink support
+  - Checkbox support
+  - Minimap

-Now that you have your project set up, it's time to explore the features that Wails3 offers:
+## Quick Start

-1. **Check out the examples**: The best way to learn is by example. Visit the `examples` directory in the `v3/examples` directory to see various sample applications.
+### Download and Use

-2. **Run an example**: To run any of the examples, navigate to the example's directory and use:
+1. Visit the releases page: https://github.com/landaiqing/voidraft/releases
+2. Select and download the appropriate version
+3. Run the installer and start using

-   ```
-   go run .
-   ```
+### Development Environment

-   Note: Some examples may be under development during the alpha phase.
+```bash
+# Clone the project
+git clone https://github.com/landaiqing/voidraft
+cd voidraft

-3. **Explore the documentation**: Visit the [Wails3 documentation](https://v3alpha.wails.io/) for in-depth guides and API references.
+# Install frontend dependencies
+cd frontend
+npm install
+npm run build
+cd ..

-4. **Join the community**: Have questions or want to share your progress? Join the [Wails Discord](https://discord.gg/JDdSxwjhGf) or visit the [Wails discussions on GitHub](https://github.com/wailsapp/wails/discussions).
+# Start development server
+wails3 dev
+```
+
+### Production Build
+
+```bash
+# Build application
+wails3 package
+```
+
+After building, the executable will be generated in the `bin` directory.
+
+## Technical Architecture
+
+### Core Technologies
+
+| Layer | Technology Stack |
+|-------|------------------|
+| Desktop Framework | Wails3 |
+| Backend Language | Go 1.21+ |
+| Frontend Framework | Vue 3 + TypeScript |
+| Editor Core | CodeMirror 6 |
+| Build Tool | Vite |
+| Data Storage | SQLite |

 ## Project Structure

-Take a moment to familiarize yourself with your project structure:
+```
+Voidraft/
+├── frontend/              # Vue 3 frontend application
+│   ├── src/
+│   │   ├── views/editor/  # Editor core views
+│   │   │   ├── extensions/ # Editor extension system
+│   │   │   │   ├── codeblock/    # Code block support
+│   │   │   │   ├── translator/   # Translation tool
+│   │   │   │   ├── minimap/     # Code minimap
+│   │   │   │   ├── vscodeSearch/ # VSCode-style search
+│   │   │   │   └── ...           # More extensions
+│   │   │   └── ...
+│   │   ├── components/    # Reusable components
+│   │   ├── stores/       # Pinia state management
+│   │   └── utils/         # Utility functions
+│   └── public/            # Static assets
+├── internal/             # Go backend core
+│   ├── services/          # Core business services
+│   ├── models/            # Data model definitions
+│   └── events/            # Event handling mechanisms
+└── main.go               # Application entry point
+```

- `frontend/`: Contains your frontend code (HTML, CSS, JavaScript/TypeScript)
- `main.go`: The entry point of your Go backend
- `app.go`: Define your application structure and methods here
- `wails.json`: Configuration file for your Wails project
+## Development Roadmap

-## Next Steps
+### Platform Extension Plans

-1. Modify the frontend in the `frontend/` directory to create your desired UI.
-2. Add backend functionality in `main.go`.
-3. Use `wails3 dev` to see your changes in real-time.
-4. When ready, build your application with `wails3 build`.
+| Platform | Status | Expected Time |
+|----------|--------|---------------|
+| macOS | Planned | Future versions |
+| Linux | Planned | Future versions |

-Happy coding with Wails3! If you encounter any issues or have questions, don't hesitate to consult the documentation or reach out to the Wails community.
+### Planned Features
+- ✅ Custom themes - Customize editor themes
+- ✅ Multi-window support - Support editing multiple documents simultaneously
+- ✅ Data synchronization - Cloud backup for documents
+- [ ] Enhanced clipboard - Monitor and manage clipboard history
+- [ ] Extension system - Support for custom plugins
+
+## Acknowledgments
+
+> Standing on the shoulders of giants, paying tribute to the open source spirit
+
+The birth of VoidRaft is inseparable from the following excellent open source projects:
+
+### Special Thanks
+
+- **[Heynote](https://github.com/heyman/heynote/)** - VoidRaft is a feature-enhanced version based on Heynote's concept
+  - Inherits Heynote's elegant block editing philosophy
+  - Adds more practical features on the original foundation
+  - Rebuilt with modern technology stack
+  - Provides richer extension system and customization options
+  - Thanks to the Heynote team for bringing innovative ideas to the developer community
+
+### Core Technology Stack
+
+| Technology | Purpose | Link |
+|------------|---------|------|
+| Wails3 | Cross-platform desktop application framework | [wails.io](https://v3alpha.wails.io/) |
+| Vue.js | Progressive frontend framework | [vuejs.org](https://vuejs.org/) |
+| CodeMirror 6 | Modern code editor | [codemirror.net](https://codemirror.net/) |
+| Prettier | Code formatting tool | [prettier.io](https://prettier.io/) |
+| TypeScript | Type-safe JavaScript | [typescriptlang.org](https://www.typescriptlang.org/) |
+
+## License
+
+This project is open source under the [MIT License](LICENSE).
+
+Welcome to Fork, Star, and contribute code.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![GitHub stars](https://img.shields.io/github/stars/landaiqing/Voidraft.svg?style=social&label=Star)](https://github.com/yourusername/Voidraft)
+[![GitHub forks](https://img.shields.io/github/forks/landaiqing/Voidraft.svg?style=social&label=Fork)](https://github.com/yourusername/Voidraft)
+
+*Made with ❤️ by landaiqing*
--- a/README_ZH.md
+++ b/README_ZH.md
@@ -0,0 +1,165 @@
+# <img src="./frontend/public/appicon.png" alt="Voidraft Logo" width="32" height="32" style="vertical-align: middle;"> Voidraft
+
+**中文** | [English](README.md)
+
+> *一个专为开发者打造的优雅文本片段记录工具。*
+
+Voidraft 是一个现代化的开发者专用文本编辑器，让你能够随时随地记录、整理和管理各种文本片段。无论是临时的代码片段、API 响应、会议笔记，还是日常的待办事项，Voidraft 都能为你提供流畅而优雅的编辑体验。
+
+## 核心特性
+
+### 开发者友好
+
+- 多语言代码块支持 - 支持 30+ 种编程语言的语法高亮
+- 智能语言检测 - 自动识别代码块语言类型
+- 代码格式化 - 内置 Prettier 支持，一键美化代码
+- 块状编辑模式 - 将内容分割为独立的代码块，每个块可设置不同语言
+- 支持多窗口 - 同时编辑多个文档
+- 支持自定义主题 - 自定义编辑器主题
+
+### 现代化界面
+
+- 清新脱俗的设计 - 简洁而不失优雅的用户界面
+- 深色/浅色主题 - 适应不同使用场景
+- 多语言支持 - 内置国际化功能，支持多种语言切换
+
+### 扩展系统
+
+- 模块化架构 - 基于 CodeMirror 6 的可扩展编辑器
+- 丰富的扩展 - 包含多种实用编辑器扩展
+  - 彩虹括号匹配
+  - VSCode 风格搜索替换
+  - 颜色选择器
+  - 内置翻译工具
+  - 文本高亮
+  - 代码折叠
+  - 超链接支持
+  - 复选框支持
+  - 小地图
+
+
+## 快速开始
+
+### 下载使用
+
+1. 访问发布页面：https://github.com/landaiqing/voidraft/releases
+2. 选择适合的版本下载
+3. 运行安装程序，开始使用
+
+### 开发环境
+
+```bash
+# 克隆项目
+git clone https://github.com/landaiqing/voidraft
+cd voidraft
+
+# 安装前端依赖
+cd frontend
+npm install
+npm run build
+cd ..
+
+# 启动开发服务器
+wails3 dev
+```
+
+### 生产构建
+
+```bash
+# 构建应用
+wails3 package
+```
+
+构建完成后，可执行文件将生成在 `bin` 目录中。
+
+## 技术架构
+
+### 核心技术
+
+| 层级 | 技术栈 |
+|------|--------|
+| 桌面框架 | Wails3 |
+| 后端语言 | Go 1.21+ |
+| 前端框架 | Vue 3 + TypeScript |
+| 编辑器核心 | CodeMirror 6 |
+| 构建工具 | Vite |
+| 数据存储 | SQLite |
+
+## 项目结构
+
+```
+Voidraft/
+├── frontend/              # Vue 3 前端应用
+│   ├── src/
+│   │   ├── views/editor/  # 编辑器核心视图
+│   │   │   ├── extensions/ # 编辑器扩展系统
+│   │   │   │   ├── codeblock/    # 代码块支持
+│   │   │   │   ├── translator/   # 翻译工具
+│   │   │   │   ├── minimap/     # 代码小地图
+│   │   │   │   ├── vscodeSearch/ # VSCode风格搜索
+│   │   │   │   └── ...           # 更多扩展
+│   │   │   └── ...
+│   │   ├── components/    # 可复用组件
+│   │   ├── stores/       # Pinia 状态管理
+│   │   └── utils/         # 工具函数库
+│   └── public/            # 静态资源文件
+├── internal/             # Go 后端核心
+│   ├── services/          # 核心业务服务
+│   ├── models/            # 数据模型定义
+│   └── events/            # 事件处理机制
+└── main.go               # 应用程序入口
+```
+
+## 开发路线图
+
+### 平台扩展计划
+
+| 平台 | 状态 | 预期时间 |
+|------|------|----------|
+| macOS | 计划中 | 后续版本 |
+| Linux | 计划中 | 后续版本 |
+
+### 计划添加的功能
+- ✅ 自定义主题 - 自定义编辑器主题
+- ✅ 多窗口支持 - 支持同时编辑多个文档
+- ✅ 数据同步 - 文档云端备份
+- [ ] 剪切板增强 - 监听和管理剪切板历史
+- [ ] 扩展系统 - 支持自定义插件
+
+
+## 致谢
+
+> 站在巨人的肩膀上，致敬开源精神
+
+Voidraft 的诞生离不开以下优秀的开源项目：
+
+### 特别感谢
+
+- **[Heynote](https://github.com/heyman/heynote/)** - Voidraft 是基于 Heynote 概念的功能增强版本
+  - 继承了 Heynote 优雅的块状编辑理念
+  - 在原有基础上增加了更多实用功能
+  - 采用现代化技术栈重新构建
+  - 提供更丰富的扩展系统和自定义选项
+  - 感谢 Heynote 团队为开发者社区带来的创新思路
+
+### 核心技术栈
+
+| 技术 | 用途 | 链接                                                   |
+|------|------|------------------------------------------------------|
+| Wails3 | 跨平台桌面应用框架 | [wails.io](https://v3alpha.wails.io/)                |
+| Vue.js | 渐进式前端框架 | [vuejs.org](https://vuejs.org/)                      |
+| CodeMirror 6 | 现代化代码编辑器 | [codemirror.net](https://codemirror.net/)            |
+| Prettier | 代码格式化工具 | [prettier.io](https://prettier.io/)                  |
+| TypeScript | 类型安全的 JavaScript | [typescriptlang.org](https://www.typescriptlang.org/) |
+
+## 许可证
+
+本项目采用 [MIT 许可证](LICENSE) 开源。
+
+欢迎 Fork、Star 和贡献代码。
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![GitHub stars](https://img.shields.io/github/stars/landaiqing/Voidraft.svg?style=social&label=Star)](https://github.com/yourusername/Voidraft)
+[![GitHub forks](https://img.shields.io/github/forks/landaiqing/Voidraft.svg?style=social&label=Fork)](https://github.com/yourusername/Voidraft)
+
+*Made with ❤️ by landaiqing*
--- a/build/config.yml
+++ b/build/config.yml
@@ -8,9 +8,9 @@ info:
  companyName: "Voidraft" # The name of the company
  productName: "Voidraft" # The name of the application
  productIdentifier: "landaiqing" # The unique product identifier
-  description: "Your Inspiration Catcher - Instant thought-capturing tool with minimalist design" # The application description
+  description: "Voidraft" # The application description
  copyright: "© 2025 Voidraft. All rights reserved." # Copyright text
-  comments: "Effortlessly capture and organize fleeting ideas with minimal design" # Comments
+  comments: "Voidraft" # Comments
  version: "0.0.1.0" # The application version

 # Dev mode configuration
--- a/build/darwin/Info.dev.plist
+++ b/build/darwin/Info.dev.plist
@@ -6,13 +6,13 @@
        <key>CFBundleName</key>
        <string>Voidraft</string>
        <key>CFBundleExecutable</key>
-        <string>voidraft</string>
+        <string>Voidraft</string>
        <key>CFBundleIdentifier</key>
        <string>landaiqing</string>
        <key>CFBundleVersion</key>
        <string>0.0.1.0</string>
        <key>CFBundleGetInfoString</key>
-        <string>Effortlessly capture and organize fleeting ideas with minimal design</string>
+        <string>Voidraft</string>
        <key>CFBundleShortVersionString</key>
        <string>0.0.1.0</string>
        <key>CFBundleIconFile</key>
--- a/build/darwin/Info.plist
+++ b/build/darwin/Info.plist
@@ -6,13 +6,13 @@
        <key>CFBundleName</key>
        <string>Voidraft</string>
        <key>CFBundleExecutable</key>
-        <string>voidraft</string>
+        <string>Voidraft</string>
        <key>CFBundleIdentifier</key>
        <string>landaiqing</string>
        <key>CFBundleVersion</key>
        <string>0.0.1.0</string>
        <key>CFBundleGetInfoString</key>
-        <string>Effortlessly capture and organize fleeting ideas with minimal design</string>
+        <string>Voidraft</string>
        <key>CFBundleShortVersionString</key>
        <string>0.0.1.0</string>
        <key>CFBundleIconFile</key>
--- a/build/linux/appimage/appicon.png
+++ b/build/linux/appimage/appicon.png
--- a/build/linux/nfpm/nfpm.yaml
+++ b/build/linux/nfpm/nfpm.yaml
@@ -3,26 +3,26 @@
 #
 # The lines below are called `modelines`. See `:help modeline`

-name: "voidraft"
+name: "Voidraft"
 arch: ${GOARCH}
 platform: "linux"
 version: "0.0.1.0"
 section: "default"
 priority: "extra"
 maintainer: ${GIT_COMMITTER_NAME} <${GIT_COMMITTER_EMAIL}>
-description: "Your Inspiration Catcher - Instant thought-capturing tool with minimalist design"
+description: "Voidraft"
 vendor: "Voidraft"
 homepage: "https://wails.io"
 license: "MIT"
 release: "1"

 contents:
-  - src: "./bin/voidraft"
-    dst: "/usr/local/bin/voidraft"
+  - src: "./bin/Voidraft"
+    dst: "/usr/local/bin/Voidraft"
  - src: "./build/appicon.png"
-    dst: "/usr/share/icons/hicolor/128x128/apps/voidraft.png"
-  - src: "./build/linux/voidraft.desktop"
-    dst: "/usr/share/applications/voidraft.desktop"
+    dst: "/usr/share/icons/hicolor/128x128/apps/Voidraft.png"
+  - src: "./build/linux/Voidraft.desktop"
+    dst: "/usr/share/applications/Voidraft.desktop"

 depends:
  - gtk3
--- a/build/linux/voidraft.desktop
+++ b/build/linux/voidraft.desktop
@@ -0,0 +1,10 @@
+[Desktop Entry]
+Type=Application
+Name=voidraft
+Exec=voidraft
+Icon=appicon
+Categories=Development;
+Terminal=false
+Keywords=wails
+Version=1.0
+StartupNotify=false
--- a/build/windows/info.json
+++ b/build/windows/info.json
@@ -6,10 +6,10 @@
 		"0000": {
 			"ProductVersion": "0.0.1.0",
 			"CompanyName": "Voidraft",
-			"FileDescription": "Your Inspiration Catcher - Instant thought-capturing tool with minimalist design",
+			"FileDescription": "Voidraft",
 			"LegalCopyright": "© 2025 Voidraft. All rights reserved.",
 			"ProductName": "Voidraft",
-			"Comments": "Effortlessly capture and organize fleeting ideas with minimal design"
+			"Comments": "Voidraft"
 		}
 	}
 }
--- a/build/windows/nsis/wails_tools.nsh
+++ b/build/windows/nsis/wails_tools.nsh
@@ -5,7 +5,7 @@
 !include "FileFunc.nsh"

 !ifndef INFO_PROJECTNAME
-    !define INFO_PROJECTNAME "voidraft"
+    !define INFO_PROJECTNAME "Voidraft"
 !endif
 !ifndef INFO_COMPANYNAME
    !define INFO_COMPANYNAME "Voidraft"
--- a/docs/CNAME
+++ b/docs/CNAME
@@ -0,0 +1 @@
+voidraft.landaiqing.cn
--- a/docs/changelog.html
+++ b/docs/changelog.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VoidRaft - Changelog</title>
+  <link rel="stylesheet" href="css/styles.css">
+  <link rel="stylesheet" href="css/changelog.css">
+  <link rel="icon" href="img/favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body class="theme-dark">
+  <div class="container">
+    <!-- 主卡片 -->
+    <div class="card">
+      <div class="card-header">
+        <h1 class="card-title" data-en="VoidRaft Changelog" data-zh="VoidRaft 更新日志">VoidRaft Changelog</h1>
+        <div class="card-controls">
+          <button id="theme-toggle" class="btn btn-secondary" title="切换主题">
+            <i class="fas fa-sun"></i> <span data-en="Theme" data-zh="主题">Theme</span>
+          </button>
+          <button id="lang-toggle" class="btn btn-secondary">
+            <i class="fas fa-language"></i> 中/EN
+          </button>
+        </div>
+      </div>
+      
+      <div class="card-content">
+        <!-- 导航区域 -->
+        <div class="nav-links">
+          <a href="index.html" class="btn btn-secondary">
+            <i class="fas fa-home"></i> <span data-en="Home" data-zh="首页">Home</span>
+          </a>
+          <a href="https://github.com/landaiqing/voidraft" class="btn btn-secondary">
+            <i class="fab fa-github"></i> <span data-en="Source Code" data-zh="源代码">Source Code</span>
+          </a>
+        </div>
+
+        <!-- 加载中提示 -->
+        <div id="loading" class="loading-container">
+          <div class="loading-spinner"></div>
+          <p data-en="Loading releases..." data-zh="正在加载版本信息...">Loading releases...</p>
+        </div>
+        
+        <!-- 更新日志内容 -->
+        <div id="changelog" class="changelog-container">
+          <!-- 通过JavaScript动态填充内容 -->
+        </div>
+        
+        <!-- 错误信息 -->
+        <div id="error-message" class="error-container" style="display: none;">
+          <i class="fas fa-exclamation-triangle"></i>
+          <p data-en="Failed to load release information. Please try again later." 
+             data-zh="加载版本信息失败，请稍后再试。">Failed to load release information. Please try again later.</p>
+        </div>
+      </div>
+      
+      <!-- 页脚 -->
+      <footer class="footer">
+        <p class="footer-text" data-en="© 2025 VoidRaft - An elegant text snippet recording tool designed for developers" data-zh="© 2025 VoidRaft - 专为开发者打造的优雅文本片段记录工具">© 2023-2024 VoidRaft - An elegant text snippet recording tool designed for developers</p>
+        <div class="footer-links">
+          <a href="https://github.com/landaiqing/voidraft" target="_blank" class="footer-link">GitHub</a>
+          <a href="https://github.com/landaiqing/voidraft/issues" target="_blank" class="footer-link" data-en="Issues" data-zh="问题反馈">Issues</a>
+          <a href="https://github.com/landaiqing/voidraft/releases" target="_blank" class="footer-link" data-en="Releases" data-zh="版本发布">Releases</a>
+        </div>
+      </footer>
+    </div>
+  </div>
+
+  <script src="js/script.js"></script>
+  <script src="js/changelog.js"></script>
+</body>
+</html> 
--- a/docs/css/changelog.css
+++ b/docs/css/changelog.css
@@ -0,0 +1,347 @@
+/* 更新日志页面样式 */
+.nav-links {
+  margin-bottom: 30px;
+  display: flex;
+  gap: 15px;
+}
+
+.loading-container {
+  text-align: center;
+  padding: 40px 0;
+  background-color: transparent;
+}
+
+.loading-spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: var(--primary-color);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 20px;
+}
+
+.theme-dark .loading-spinner {
+  border-color: rgba(255, 255, 255, 0.1);
+  border-left-color: var(--primary-color);
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.error-container {
+  text-align: center;
+  color: var(--error-color);
+  padding: 20px;
+  border: 2px dashed var(--error-color);
+  margin: 20px 0;
+  border-radius: 4px;
+  background-color: rgba(var(--card-bg-rgb), 0.7);
+}
+
+.error-container i {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+/* 更新日志容器 */
+.changelog-container {
+  display: none;
+  position: relative;
+  z-index: 1;
+}
+
+.release {
+  margin-bottom: 40px;
+  border-left: 4px solid var(--primary-color);
+  padding-left: 20px;
+  background-color: rgba(var(--card-bg-rgb), 0.5);
+  padding: 15px 20px;
+  border-radius: 4px;
+}
+
+.release-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.release-version {
+  font-size: 24px;
+  font-weight: bold;
+  color: var(--primary-color);
+}
+
+.release-date {
+  color: var(--text-color);
+  opacity: 0.7;
+  font-size: 14px;
+}
+
+.release-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  margin-left: 10px;
+  background-color: var(--primary-color);
+  color: #000;
+}
+
+.release-badge.pre-release {
+  background-color: var(--warning-color);
+}
+
+.release-description {
+  margin-bottom: 20px;
+  line-height: 1.6;
+}
+
+.release-assets {
+  background-color: rgba(var(--light-bg-rgb), 0.7);
+  padding: 15px;
+  border-radius: 4px;
+  margin-top: 15px;
+}
+
+.release-assets-title {
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.asset-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.asset-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+}
+
+.asset-item:last-child {
+  border-bottom: none;
+}
+
+.asset-icon {
+  margin-right: 10px;
+  color: var(--accent-color);
+}
+
+.asset-name {
+  flex-grow: 1;
+}
+
+.asset-size {
+  font-size: 12px;
+  color: var(--text-color);
+  opacity: 0.7;
+}
+
+/* 资源下载按钮 */
+.download-btn {
+  margin-left: 10px;
+  padding: 3px 10px;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 12px;
+  transition: all 0.2s ease;
+  display: inline-block;
+  text-align: center;
+}
+
+.download-btn:hover {
+  background-color: var(--secondary-color);
+}
+
+.markdown-content {
+  line-height: 1.8;
+  overflow-wrap: break-word;
+  background-color: transparent;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  padding-left: 20px;
+  margin: 10px 0;
+}
+
+.markdown-content li {
+  margin-bottom: 8px;
+}
+
+.markdown-content li:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-content hr {
+  border: none;
+  border-top: 2px dashed var(--border-color);
+  margin: 20px 0;
+}
+
+.markdown-content br {
+  display: block;
+  content: "";
+  margin-top: 10px;
+}
+
+.markdown-content code {
+  font-family: 'IBM Plex Mono', monospace;
+  background-color: rgba(128, 128, 128, 0.1);
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-size: 90%;
+}
+
+.markdown-content pre {
+  background-color: rgba(128, 128, 128, 0.1);
+  padding: 15px;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 15px 0;
+}
+
+.markdown-content pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+.markdown-content a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+.markdown-content a:hover {
+  text-decoration: underline;
+}
+
+.data-source {
+  padding: 10px 15px;
+  margin-bottom: 20px;
+  background-color: rgba(var(--light-bg-rgb), 0.7);
+  border-radius: 4px;
+  font-size: 14px;
+  text-align: right;
+  opacity: 0.7;
+}
+
+.data-source a {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.data-source a:hover {
+  text-decoration: underline;
+} 
+
+/* Markdown内容样式增强 */
+.markdown-content blockquote {
+  border-left: 4px solid var(--primary-color);
+  padding: 10px 15px;
+  margin: 15px 0;
+  background-color: rgba(var(--light-bg-rgb), 0.5);
+  border-radius: 0 4px 4px 0;
+}
+
+.markdown-content ul, 
+.markdown-content ol {
+  padding-left: 20px;
+  margin: 10px 0;
+}
+
+/* 移动设备响应式优化 */
+@media (max-width: 768px) {
+  .release-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  
+  .release-assets {
+    padding: 12px 8px;
+  }
+  
+  .asset-item {
+    flex-wrap: wrap;
+    padding: 12px 0;
+    position: relative;
+  }
+  
+  .asset-name {
+    width: 100%;
+    margin-bottom: 8px;
+    word-break: break-all;
+  }
+  
+  .asset-size {
+    margin-left: 25px;
+  }
+  
+  .download-btn {
+    margin-left: 10px;
+    padding: 5px 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .release {
+    padding-left: 12px;
+  }
+  
+  .asset-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .asset-icon {
+    margin-bottom: 5px;
+  }
+  
+  .asset-size {
+    margin-left: 0;
+    margin-top: 5px;
+  }
+  
+  .download-btn {
+    margin-left: 0;
+    margin-top: 10px;
+    width: 100%;
+    text-align: center;
+    padding: 8px;
+  }
+  
+  .markdown-content pre {
+    padding: 10px;
+    margin: 10px 0;
+  }
+} 
+
+/* 确保日志页面页脚样式一致 */
+.footer {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.footer-text {
+  margin: 0 0 15px 0;
+} 
--- a/docs/css/ibm-plex-mono-font.css
+++ b/docs/css/ibm-plex-mono-font.css
@@ -0,0 +1,45 @@
+/* cyrillic-ext */
+@font-face {
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iIq129k.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1isq129k.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iAq129k.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
--- a/docs/css/space-mono-font.css
+++ b/docs/css/space-mono-font.css
@@ -0,0 +1,27 @@
+/* vietnamese */
+@font-face {
+    font-family: 'Space Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/space-mono/i7dPIFZifjKcF5UAWdDRYE58RWq7.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Space Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/space-mono/i7dPIFZifjKcF5UAWdDRYE98RWq7.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Space Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/space-mono/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -0,0 +1,717 @@
+@import url('./space-mono-font.css');
+@import url('./ibm-plex-mono-font.css');
+
+/* 浅色主题 */
+:root {
+  --bg-color: #fefefe;
+  --text-color: #000000;
+  --primary-color: #F08080;
+  --primary-color-rgb: 240, 128, 128;
+  --secondary-color: #ff006e;
+  --accent-color: #073B4C;
+  --card-bg: #ffffff;
+  --card-bg-rgb: 255, 255, 255;
+  --border-color: #000000;
+  --light-bg: #f0f0f0;
+  --light-bg-rgb: 240, 240, 240;
+  --shadow-color: rgba(240, 128, 128, 0.5);
+  --success-color: #27c93f;
+  --warning-color: #FFD166;
+  --error-color: #ff006e;
+  --info-color: #118ab2;
+  --code-bg: #ffffff;
+  --code-bg-rgb: 255, 255, 255;
+  --preview-header-bg: #f0f0f0;
+  --preview-header-bg-rgb: 240, 240, 240;
+  --grid-color-1: rgba(0, 0, 0, 0.08);
+  --grid-color-2: rgba(0, 0, 0, 0.05);
+  --header-title-color: #000000;
+}
+
+/* 暗色主题变量 */
+.theme-dark {
+  --bg-color: #121212;
+  --text-color: #ffffff;
+  --primary-color: #F08080;
+  --primary-color-rgb: 240, 128, 128;
+  --secondary-color: #ff006e;
+  --accent-color: #118ab2;
+  --card-bg: #1e1e1e;
+  --card-bg-rgb: 30, 30, 30;
+  --border-color: #ffffff;
+  --light-bg: #2a2a2a;
+  --light-bg-rgb: 42, 42, 42;
+  --shadow-color: rgba(240, 128, 128, 0.5);
+  --success-color: #27c93f;
+  --warning-color: #FFD166;
+  --error-color: #ff006e;
+  --info-color: #118ab2;
+  --code-bg: #1e1e1e;
+  --code-bg-rgb: 30, 30, 30;
+  --preview-header-bg: #252526;
+  --preview-header-bg-rgb: 37, 37, 38;
+  --grid-color-1: rgba(255, 255, 255, 0.08);
+  --grid-color-2: rgba(255, 255, 255, 0.05);
+  --header-title-color: #000000;
+}
+
+/* 主题切换和语言切换的过渡效果 */
+.theme-transition,
+.theme-transition *,
+.lang-transition,
+.lang-transition * {
+  transition: all 0.3s ease !important;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@keyframes gridMove {
+  0% {
+    background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
+  }
+  100% {
+    background-position: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
+  }
+}
+
+body {
+  background-color: var(--bg-color);
+  background-image: 
+    linear-gradient(var(--grid-color-1) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-color-1) 1px, transparent 1px),
+    linear-gradient(var(--grid-color-2) 0.5px, transparent 0.5px),
+    linear-gradient(90deg, var(--grid-color-2) 0.5px, transparent 0.5px);
+  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
+  background-position: center;
+  animation: gridMove 40s linear infinite;
+  font-family: 'Space Mono', monospace;
+  color: var(--text-color);
+  line-height: 1.6;
+  padding: 20px;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* 卡片容器 */
+.card {
+  background-color: var(--card-bg);
+  background-image: 
+    linear-gradient(var(--grid-color-1) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-color-1) 1px, transparent 1px),
+    linear-gradient(var(--grid-color-2) 0.5px, transparent 0.5px),
+    linear-gradient(90deg, var(--grid-color-2) 0.5px, transparent 0.5px);
+  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
+  background-position: center;
+  border: 4px solid var(--border-color);
+  box-shadow: 12px 12px 0 var(--shadow-color);
+  margin-bottom: 40px;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  z-index: 10;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 16px 16px 0 var(--shadow-color);
+}
+
+/* 卡片头部 */
+.card-header {
+  background-color: rgba(var(--primary-color-rgb), 0.9);
+  border-bottom: 4px solid var(--border-color);
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+
+.card-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin: 0;
+  color: var(--header-title-color);
+}
+
+.card-controls {
+  display: flex;
+  gap: 10px;
+}
+
+.btn {
+  display: inline-block;
+  padding: 10px 20px;
+  background: var(--secondary-color);
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  border: 3px solid var(--border-color);
+  box-shadow: 4px 4px 0 var(--shadow-color);
+  transition: all 0.2s ease;
+  cursor: pointer;
+  font-family: 'Space Mono', monospace;
+  font-size: 14px;
+}
+
+.btn:hover {
+  background: var(--card-bg);
+  color: var(--primary-color);
+  border: 3px solid var(--primary-color);
+  box-shadow: none;
+}
+
+.btn-secondary {
+  background: var(--light-bg);
+  color: var(--text-color);
+}
+
+.btn-secondary:hover {
+  background: var(--card-bg);
+  color: var(--primary-color);
+  border: 3px solid var(--primary-color);
+}
+
+/* 卡片内容 */
+.card-content {
+  padding: 30px;
+  position: relative;
+  z-index: 1;
+  background-color: rgba(var(--card-bg-rgb), 0.5);
+}
+
+/* Logo区域 */
+.logo-container {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.logo-frame {
+  width: 150px;
+  height: 150px;
+  background: var(--card-bg);
+  border: 4px solid var(--border-color);
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.logo-image {
+  width: 130px;
+  height: 130px;
+  object-fit: contain;
+  border: 2px solid var(--border-color);
+}
+
+.logo-text {
+  font-size: 32px;
+  font-weight: bold;
+  margin: 0;
+}
+
+.tagline {
+  font-size: 16px;
+  margin: 10px 0 0;
+  color: var(--accent-color);
+}
+
+/* 介绍区域 */
+.intro-box {
+  border: 2px dashed var(--border-color);
+  padding: 20px;
+  background-color: rgba(var(--light-bg-rgb), 0.7);
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.intro-text {
+  font-size: 16px;
+  margin-bottom: 0;
+}
+
+/* 按钮组 */
+.button-group {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin: 30px 0;
+}
+
+/* 特性网格 */
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 30px;
+  margin: 40px 0;
+}
+
+/* 特性卡片 */
+.feature-card {
+  background-color: rgba(var(--card-bg-rgb), 0.8);
+  border: 3px solid var(--border-color);
+  box-shadow: 5px 5px 0 var(--shadow-color);
+  padding: 20px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 7px 7px 0 var(--shadow-color);
+}
+
+.feature-icon {
+  font-size: 24px;
+  margin-bottom: 15px;
+  color: var(--secondary-color);
+}
+
+.feature-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.feature-desc {
+  font-size: 14px;
+}
+
+/* 预览区域 */
+.preview-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin: 30px 0;
+}
+
+@media (max-width: 768px) {
+  .preview-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 预览窗口 */
+.preview-window {
+  border: 3px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 10px;
+  flex: 1;
+  min-width: 300px;
+  background-color: rgba(var(--card-bg-rgb), 0.7);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 5px 5px 0 var(--shadow-color);
+}
+
+/* 预览头部 */
+.preview-header {
+  background-color: rgba(var(--preview-header-bg-rgb), 0.9);
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid var(--border-color);
+}
+
+.preview-controls {
+  display: flex;
+  gap: 6px;
+  margin-right: 15px;
+}
+
+.preview-btn {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 0.5px solid rgba(0, 0, 0, 0.1);
+}
+
+.preview-btn:nth-child(1) {
+  background-color: #ff5f56;
+}
+
+.preview-btn:nth-child(2) {
+  background-color: #ffbd2e;
+}
+
+.preview-btn:nth-child(3) {
+  background-color: #27c93f;
+}
+
+.preview-title {
+  font-size: 13px;
+  opacity: 0.8;
+  color: var(--text-color);
+  font-weight: normal;
+}
+
+/* 预览内容 */
+.preview-content {
+  padding: 15px;
+  flex-grow: 1;
+  overflow: auto;
+  background-color: rgba(var(--code-bg-rgb), 0.5);
+}
+
+/* 代码块容器 */
+.code-block-wrapper {
+  background-color: rgba(var(--code-bg-rgb), 0.8);
+  border: 2px solid var(--border-color);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+/* 块头部 */
+.block-header {
+  background-color: rgba(var(--light-bg-rgb), 0.8);
+  padding: 8px 12px;
+  border-bottom: 2px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.block-language {
+  color: rgba(128, 128, 128, 0.8);
+  font-family: 'IBM Plex Mono', monospace;
+  display: flex;
+  align-items: center;
+}
+
+.block-language::before {
+  content: '';
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-right: 5px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M9.7,16.7L5.3,12.3C4.9,11.9 4.9,11.1 5.3,10.7C5.7,10.3 6.3,10.3 6.7,10.7L10.5,14.5L17.3,7.7C17.7,7.3 18.3,7.3 18.7,7.7C19.1,8.1 19.1,8.7 18.7,9.1L11.3,16.7C10.9,17.1 10.1,17.1 9.7,16.7Z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.code-block {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  margin: 0;
+  white-space: pre;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  padding: 10px;
+}
+
+.theme-dark .code-block-wrapper {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.theme-dark .block-header {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.theme-dark .block-language {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.theme-dark .block-language::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23aaa'%3E%3Cpath d='M9.7,16.7L5.3,12.3C4.9,11.9 4.9,11.1 5.3,10.7C5.7,10.3 6.3,10.3 6.7,10.7L10.5,14.5L17.3,7.7C17.7,7.3 18.3,7.3 18.7,7.7C19.1,8.1 19.1,8.7 18.7,9.1L11.3,16.7C10.9,17.1 10.1,17.1 9.7,16.7Z'/%3E%3C/svg%3E");
+}
+
+.theme-dark .code-block {
+  color: #d4d4d4;
+}
+
+/* 代码高亮 */
+.theme-dark .keyword { color: #c586c0; }
+.theme-dark .function { color: #dcdcaa; }
+.theme-dark .variable { color: #9cdcfe; }
+.theme-dark .string { color: #ce9178; }
+.theme-dark .comment { color: #6a9955; }
+.theme-dark .class { color: #4ec9b0; }
+.theme-dark .parameter { color: #9cdcfe; }
+.theme-dark .built-in { color: #4ec9b0; }
+
+/* 浅色主题代码高亮 */
+.keyword { color: #af00db; }
+.function { color: #795e26; }
+.variable { color: #001080; }
+.string { color: #a31515; }
+.comment { color: #008000; }
+.class { color: #267f99; }
+.parameter { color: #001080; }
+.built-in { color: #267f99; }
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border: none;
+  transition: opacity 0.3s ease;
+}
+
+.theme-dark .light-theme-img {
+  display: none !important;
+}
+
+.theme-dark .dark-theme-img {
+  display: block;
+}
+
+body:not(.theme-dark) .dark-theme-img {
+  display: none !important;
+}
+
+body:not(.theme-dark) .light-theme-img {
+  display: block !important;
+}
+
+/* 技术栈列表 */
+.tech-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* 技术栈列表 */
+.tech-item {
+  padding: 15px;
+  margin-bottom: 15px;
+  border: 2px solid var(--border-color);
+  background-color: rgba(var(--light-bg-rgb), 0.7);
+  display: flex;
+  align-items: center;
+}
+
+.tech-icon {
+  margin-right: 15px;
+  color: var(--secondary-color);
+  font-size: 20px;
+  width: 30px;
+  text-align: center;
+}
+
+.tech-name {
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.tech-desc {
+  font-size: 14px;
+  color: var(--accent-color);
+}
+
+/* 页脚 */
+.footer {
+  border-top: 2px solid var(--border-color);
+  padding: 20px 0;
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: transparent;
+  position: relative;
+  z-index: 1;
+}
+
+.footer-text {
+  margin: 0 0 15px 0;
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.footer-links {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+}
+
+.footer-link {
+  color: var(--secondary-color);
+  text-decoration: none;
+  font-size: 14px;
+  transition: color 0.3s;
+}
+
+.footer-link:hover {
+  color: var(--primary-color);
+  text-decoration: underline;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .button-group {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .btn {
+    width: 100%;
+    text-align: center;
+  }
+  
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .card-controls {
+    width: 100%;
+  }
+  
+  .logo-frame {
+    width: 120px;
+    height: 120px;
+  }
+  
+  .logo-image {
+    width: 100px;
+    height: 100px;
+  }
+} 
+
+/* 针对移动设备的响应式优化 */
+@media (max-width: 768px) {
+  body {
+    padding: 10px;
+  }
+  
+  .container {
+    padding: 10px;
+  }
+  
+  .card {
+    margin-bottom: 30px;
+  }
+  
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+    text-align: center;
+  }
+  
+  .card-controls {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .button-group {
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+  
+  /* 预览区域优化 */
+  .preview-content {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+  
+  .code-block {
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+  
+  .block-header {
+    padding: 6px 10px;
+  }
+  
+  /* 日志界面导航链接优化 */
+  .nav-links {
+    flex-direction: column;
+    gap: 10px;
+    align-items: stretch;
+  }
+  
+  .nav-links .btn {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+@media (max-width: 480px) {  
+  /* 特性卡片优化 */
+  .features-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  
+  /* 预览窗口优化 */
+  .preview-container {
+    flex-direction: column;
+  }
+  
+  .preview-window {
+    margin-bottom: 20px;
+    width: 100%;
+  }
+  
+  /* 技术栈列表小屏幕优化 */
+  .tech-item {
+    flex-wrap: wrap;
+  }
+  
+  .tech-desc {
+    width: 100%;
+    padding-left: 40px; /* 图标宽度+右边距 */
+    margin-top: 5px;
+  }
+  
+  /* 日志界面资源列表项优化 */
+  .asset-item {
+    flex-wrap: wrap;
+    padding: 15px 0;
+  }
+  
+  .asset-name {
+    width: 100%;
+    word-break: break-all;
+    margin-bottom: 10px;
+  }
+  
+  .asset-size {
+    order: 2;
+    margin-top: 10px;
+  }
+  
+  .download-btn {
+    order: 3;
+    margin-left: 0;
+    margin-top: 10px;
+    width: 100%;
+    text-align: center;
+    padding: 8px;
+  }
+  
+  /* 页脚链接优化 */
+  .footer {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .footer-links {
+    margin-top: 15px;
+    justify-content: center;
+  }
+} 
--- a/docs/font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2
+++ b/docs/font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2
--- a/docs/font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iAq129k.woff2
+++ b/docs/font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iAq129k.woff2
--- a/docs/font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2
+++ b/docs/font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2
--- a/docs/font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iIq129k.woff2
+++ b/docs/font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iIq129k.woff2
--- a/docs/font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1isq129k.woff2
+++ b/docs/font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1isq129k.woff2
--- a/docs/font/space-mono/i7dPIFZifjKcF5UAWdDRYE58RWq7.woff2
+++ b/docs/font/space-mono/i7dPIFZifjKcF5UAWdDRYE58RWq7.woff2
--- a/docs/font/space-mono/i7dPIFZifjKcF5UAWdDRYE98RWq7.woff2
+++ b/docs/font/space-mono/i7dPIFZifjKcF5UAWdDRYE98RWq7.woff2
--- a/docs/font/space-mono/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2
+++ b/docs/font/space-mono/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2
--- a/docs/img/favicon.ico
+++ b/docs/img/favicon.ico
--- a/docs/img/logo.png
+++ b/docs/img/logo.png
--- a/docs/img/screenshot-dark.png
+++ b/docs/img/screenshot-dark.png
--- a/docs/img/screenshot-light.png
+++ b/docs/img/screenshot-light.png
--- a/docs/index.html
+++ b/docs/index.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VoidRaft - An elegant text snippet recording tool designed for developers.</title>
+  <meta name="description" content="VoidRaft is an elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.">
+  <meta name="keywords" content="text editor, code snippets, developer tools, syntax highlighting, code formatting, multi-language, VoidRaft">
+  <meta name="author" content="VoidRaft Team">
+  <meta name="robots" content="index, follow">
+  <link rel="canonical" href="https://landaiqing.github.io/voidraft/">
+  
+  <!-- Internationalization / hreflang -->
+  <link rel="alternate" hreflang="en" href="https://landaiqing.github.io/voidraft/">
+  <link rel="alternate" hreflang="zh" href="https://landaiqing.github.io/voidraft/?lang=zh">
+  <link rel="alternate" hreflang="x-default" href="https://landaiqing.github.io/voidraft/">
+  
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://landaiqing.github.io/voidraft/">
+  <meta property="og:title" content="VoidRaft - An elegant text snippet recording tool designed for developers">
+  <meta property="og:description" content="VoidRaft is an elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.">
+  <meta property="og:image" content="https://landaiqing.github.io/voidraft/img/screenshot-dark.png">
+  <meta property="og:site_name" content="VoidRaft">
+  
+  <!-- Twitter -->
+  <meta property="twitter:card" content="summary_large_image">
+  <meta property="twitter:url" content="https://landaiqing.github.io/voidraft/">
+  <meta property="twitter:title" content="VoidRaft - An elegant text snippet recording tool designed for developers">
+  <meta property="twitter:description" content="VoidRaft is an elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.">
+  <meta property="twitter:image" content="https://landaiqing.github.io/voidraft/img/screenshot-dark.png">
+  
+  <link rel="stylesheet" href="./css/styles.css">
+  <link rel="icon" href="./img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  
+  <!-- Structured Data -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "SoftwareApplication",
+    "name": "VoidRaft",
+    "description": "An elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.",
+    "url": "https://landaiqing.github.io/voidraft/",
+    "downloadUrl": "https://github.com/landaiqing/voidraft/releases",
+    "author": {
+      "@type": "Organization",
+      "name": "VoidRaft"
+    },
+    "operatingSystem": ["Windows", "macOS", "Linux"],
+    "applicationCategory": "DeveloperApplication",
+    "offers": {
+      "@type": "Offer",
+      "price": "0",
+      "priceCurrency": "USD"
+    },
+    "screenshot": "https://landaiqing.github.io/voidraft/img/screenshot-dark.png",
+    "softwareVersion": "Latest",
+    "programmingLanguage": ["Go", "TypeScript", "Vue.js"],
+    "codeRepository": "https://github.com/landaiqing/voidraft"
+  }
+  </script>
+</head>
+<body class="theme-dark">
+  <div class="container">
+    <!-- 主卡片 -->
+    <div class="card">
+      <div class="card-header">
+        <h1 class="card-title">VoidRaft</h1>
+        <div class="card-controls">
+          <button id="theme-toggle" class="btn btn-secondary" title="切换主题">
+            <i class="fas fa-sun"></i> <span data-en="Theme" data-zh="主题">Theme</span>
+          </button>
+          <button id="lang-toggle" class="btn btn-secondary">
+            <i class="fas fa-language"></i> 中/EN
+          </button>
+        </div>
+      </div>
+      
+      <div class="card-content">
+        <!-- Logo和介绍 -->
+        <div class="logo-container">
+          <div class="logo-frame">
+            <img src="img/logo.png" alt="VoidRaft Logo" class="logo-image">
+          </div>
+          <h2 class="logo-text" data-en="VoidRaft" data-zh="VoidRaft">VoidRaft</h2>
+          <p class="tagline" data-en="An elegant text snippet recording tool" data-zh="优雅的文本片段记录工具">An elegant text snippet recording tool</p>
+        </div>
+        
+        <div class="intro-box">
+          <p class="intro-text" data-en="Designed for developers to record, organize, and manage various text snippets anytime, anywhere." data-zh="专为开发者打造，随时随地记录、整理和管理各种文本片段。">Designed for developers to record, organize, and manage various text snippets anytime, anywhere.</p>
+        </div>
+        
+        <div class="button-group">
+          <a href="https://github.com/landaiqing/voidraft/releases" class="btn" data-en="Download" data-zh="下载">
+            <i class="fas fa-download"></i> Download
+          </a>
+          <a href="https://github.com/landaiqing/voidraft" class="btn btn-secondary" data-en="Source Code" data-zh="源代码">
+            <i class="fab fa-github"></i> Source Code
+          </a>
+          <a href="changelog.html" class="btn btn-secondary" data-en="Changelog" data-zh="更新日志">
+            <i class="fas fa-history"></i> Changelog
+          </a>
+        </div>
+        
+        <!-- 特性部分 -->
+        <h2 data-en="Core Features" data-zh="核心特性">Core Features</h2>
+        
+        <div class="features-grid">
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-code"></i>
+            </div>
+            <h3 class="feature-title" data-en="Developer-Friendly" data-zh="开发者友好">Developer-Friendly</h3>
+            <p class="feature-desc" data-en="Multi-language code blocks with syntax highlighting for 30+ programming languages" data-zh="多语言代码块支持，为30+种编程语言提供语法高亮">Multi-language code blocks with syntax highlighting for 30+ programming languages</p>
+          </div>
+          
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-magic"></i>
+            </div>
+            <h3 class="feature-title" data-en="Code Formatting" data-zh="代码格式化">Code Formatting</h3>
+            <p class="feature-desc" data-en="Built-in Prettier support for one-click code beautification" data-zh="内置Prettier支持，一键美化代码">Built-in Prettier support for one-click code beautification</p>
+          </div>
+          
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-palette"></i>
+            </div>
+            <h3 class="feature-title" data-en="Custom Themes" data-zh="自定义主题">Custom Themes</h3>
+            <p class="feature-desc" data-en="Dark/Light themes with full customization options" data-zh="深色/浅色主题，支持完全自定义">Dark/Light themes with full customization options</p>
+          </div>
+          
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-clone"></i>
+            </div>
+            <h3 class="feature-title" data-en="Multi-Window" data-zh="多窗口支持">Multi-Window</h3>
+            <p class="feature-desc" data-en="Edit multiple documents simultaneously" data-zh="同时编辑多个文档">Edit multiple documents simultaneously</p>
+          </div>
+          
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-layer-group"></i>
+            </div>
+            <h3 class="feature-title" data-en="Block Editing" data-zh="块状编辑">Block Editing</h3>
+            <p class="feature-desc" data-en="Split content into independent code blocks with different language settings" data-zh="将内容分割为独立的代码块，每个块可设置不同语言">Split content into independent code blocks with different language settings</p>
+          </div>
+          
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-puzzle-piece"></i>
+            </div>
+            <h3 class="feature-title" data-en="Extensions" data-zh="丰富扩展">Extensions</h3>
+            <p class="feature-desc" data-en="Rainbow brackets, VSCode-style search, color picker, translation tool, and more" data-zh="彩虹括号、VSCode风格搜索、颜色选择器、翻译工具等多种扩展">Rainbow brackets, VSCode-style search, color picker, translation tool, and more</p>
+          </div>
+        </div>
+        
+        <!-- 预览部分 -->
+        <h2 data-en="Preview" data-zh="预览">Preview</h2>
+        
+        <div class="preview-container">
+          <div class="preview-window">
+            <div class="preview-header">
+              <div class="preview-controls">
+                <span class="preview-btn"></span>
+                <span class="preview-btn"></span>
+                <span class="preview-btn"></span>
+              </div>
+              <div class="preview-title">voidraft</div>
+            </div>
+            <div class="preview-content">
+              <div class="code-block-wrapper">
+                <div class="block-header">
+                  <div class="block-language">javascript</div>
+                </div>
+                <pre class="code-block">
+<span class="keyword">function</span> <span class="function">createDocument</span>() {
+  <span class="keyword">const</span> <span class="variable">doc</span> = <span class="keyword">new</span> <span class="class">Document</span>();
+  
+  <span class="variable">doc</span>.<span class="function">addCodeBlock</span>(<span class="string">'javascript'</span>, <span class="string">`
+  <span class="keyword">function</span> <span class="function">greeting</span>(<span class="parameter">name</span>) {
+    <span class="keyword">return</span> <span class="string">`Hello, </span>${<span class="parameter">name</span>}<span class="string">!`</span>;
+  }
+  
+  <span class="built-in">console</span>.<span class="function">log</span>(<span class="function">greeting</span>(<span class="string">'World'</span>));
+  `</span>);
+  
+  <span class="keyword">return</span> <span class="variable">doc</span>;
+}</pre>
+              </div>
+              
+              <div class="code-block-wrapper" style="margin-top: 10px;">
+                <div class="block-header">
+                  <div class="block-language">text</div>
+                </div>
+                <pre class="code-block">
+<span class="comment">// VoidRaft - An elegant text snippet recording tool</span>
+<span class="comment">// Multi-language support | Code formatting | Custom themes</span>
+<span class="comment">// A modern text editor designed for developers</span></pre>
+              </div>
+            </div>
+          </div>
+          <div class="preview-window">
+            <img src="img/screenshot-dark.png" alt="VoidRaft 界面预览" class="preview-image dark-theme-img">
+            <img src="img/screenshot-light.png" alt="VoidRaft 界面预览" class="preview-image light-theme-img" style="display: none;">
+          </div>
+        </div>
+        
+        <!-- 技术栈部分 -->
+        <h2 data-en="Technical Stack" data-zh="技术栈">Technical Stack</h2>
+        
+        <ul class="tech-list">
+          <li class="tech-item">
+            <div class="tech-icon"><i class="fas fa-desktop"></i></div>
+            <span class="tech-name">Wails3</span>
+            <span class="tech-desc" data-en="Cross-platform desktop application framework" data-zh="跨平台桌面应用框架">Cross-platform desktop application framework</span>
+          </li>
+          <li class="tech-item">
+            <div class="tech-icon"><i class="fas fa-cogs"></i></div>
+            <span class="tech-name">Go 1.21+</span>
+            <span class="tech-desc" data-en="Fast and efficient backend language" data-zh="快速高效的后端语言">Fast and efficient backend language</span>
+          </li>
+          <li class="tech-item">
+            <div class="tech-icon"><i class="fab fa-vuejs"></i></div>
+            <span class="tech-name">Vue 3 + TypeScript</span>
+            <span class="tech-desc" data-en="Modern frontend framework" data-zh="现代化前端框架">Modern frontend framework</span>
+          </li>
+          <li class="tech-item">
+            <div class="tech-icon"><i class="fas fa-edit"></i></div>
+            <span class="tech-name">CodeMirror 6</span>
+            <span class="tech-desc" data-en="Modern code editor with extension support" data-zh="支持扩展的现代化代码编辑器">Modern code editor with extension support</span>
+          </li>
+          <li class="tech-item">
+            <div class="tech-icon"><i class="fas fa-database"></i></div>
+            <span class="tech-name">SQLite</span>
+            <span class="tech-desc" data-en="Lightweight database for document storage" data-zh="轻量级文档存储数据库">Lightweight database for document storage</span>
+          </li>
+        </ul>
+      </div>
+      
+      <!-- 页脚 -->
+      <footer class="footer">
+        <p class="footer-text" data-en="© 2025 VoidRaft - An elegant text snippet recording tool designed for developers" data-zh="© 2025 VoidRaft - 专为开发者打造的优雅文本片段记录工具">© 2025 VoidRaft - An elegant text snippet recording tool designed for developers</p>
+        <div class="footer-links">
+          <a href="https://github.com/landaiqing/voidraft" target="_blank" class="footer-link">GitHub</a>
+          <a href="https://github.com/landaiqing/voidraft/issues" target="_blank" class="footer-link" data-en="Issues" data-zh="问题反馈">Issues</a>
+          <a href="https://github.com/landaiqing/voidraft/releases" target="_blank" class="footer-link" data-en="Releases" data-zh="版本发布">Releases</a>
+        </div>
+      </footer>
+    </div>
+  </div>
+
+  <script src="js/script.js"></script>
+</body>
+</html>
--- a/docs/js/changelog.js
+++ b/docs/js/changelog.js
@@ -0,0 +1,705 @@
+/**
+ * VoidRaft - Changelog Script
+ * 从GitHub API获取发布信息，支持Gitea备用源
+ */
+
+/**
+ * 仓库配置类
+ */
+class RepositoryConfig {
+  constructor() {
+    this.repos = {
+      github: {
+        owner: 'landaiqing',
+        name: 'voidraft',
+        apiUrl: 'https://api.github.com/repos/landaiqing/voidraft/releases',
+        releasesUrl: 'https://github.com/landaiqing/voidraft/releases'
+      },
+      gitea: {
+        owner: 'landaiqing',
+        name: 'voidraft',
+        domain: 'git.landaiqing.cn',
+        apiUrl: 'https://git.landaiqing.cn/api/v1/repos/landaiqing/voidraft/releases',
+        releasesUrl: 'https://git.landaiqing.cn/landaiqing/voidraft/releases'
+      }
+    };
+  }
+
+  /**
+   * 获取仓库配置
+   * @param {string} source - 'github' 或 'gitea'
+   */
+  getRepo(source) {
+    return this.repos[source];
+  }
+
+  /**
+   * 获取所有仓库配置
+   */
+  getAllRepos() {
+    return this.repos;
+  }
+}
+
+/**
+ * 国际化消息管理类
+ */
+class I18nMessages {
+  constructor() {
+    this.messages = {
+      loading: {
+        en: 'Loading releases...',
+        zh: '正在加载版本信息...'
+      },
+      noReleases: {
+        en: 'No release information found',
+        zh: '没有找到版本发布信息'
+      },
+      fetchError: {
+        en: 'Failed to load release information. Please try again later.',
+        zh: '无法获取版本信息，请稍后再试'
+      },
+      githubApiError: {
+        en: 'GitHub API returned an error status: ',
+        zh: 'GitHub API返回错误状态: '
+      },
+      giteaApiError: {
+        en: 'Gitea API returned an error status: ',
+        zh: 'Gitea API返回错误状态: '
+      },
+      dataSource: {
+        en: 'Data source: ',
+        zh: '数据来源: '
+      },
+      downloads: {
+        en: 'Downloads',
+        zh: '下载资源'
+      },
+      download: {
+        en: 'Download',
+        zh: '下载'
+      },
+      preRelease: {
+        en: 'Pre-release',
+        zh: '预发布'
+      }
+    };
+  }
+
+  /**
+   * 获取消息
+   * @param {string} key - 消息键
+   * @param {string} lang - 语言代码
+   */
+  getMessage(key, lang = 'en') {
+    return this.messages[key] && this.messages[key][lang] || this.messages[key]['en'] || '';
+  }
+
+  /**
+   * 获取当前语言
+   */
+  getCurrentLang() {
+    return window.currentLang || 'en';
+  }
+}
+
+/**
+ * API客户端类
+ */
+class APIClient {
+  constructor(repositoryConfig, i18nMessages) {
+    this.repositoryConfig = repositoryConfig;
+    this.i18nMessages = i18nMessages;
+  }
+
+  /**
+   * 从指定源获取发布信息
+   * @param {string} source - 'github' 或 'gitea'
+   */
+  async fetchReleases(source) {
+    const repo = this.repositoryConfig.getRepo(source);
+    const errorMessageKey = source === 'github' ? 'githubApiError' : 'giteaApiError';
+    
+    const options = {
+      headers: { 'Accept': 'application/json' }
+    };
+    
+    if (source === 'github') {
+      return this.fetchFromGitHub(repo, options, errorMessageKey);
+    } else {
+      return this.fetchFromGitea(repo, options, errorMessageKey);
+    }
+  }
+
+  /**
+   * 从GitHub获取数据
+   * @param {Object} repo - 仓库配置
+   * @param {Object} options - 请求选项
+   * @param {string} errorMessageKey - 错误消息键
+   */
+  async fetchFromGitHub(repo, options, errorMessageKey) {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000);
+    
+    options.signal = controller.signal;
+    options.headers['Accept'] = 'application/vnd.github.v3+json';
+    
+    try {
+      const response = await fetch(repo.apiUrl, options);
+      clearTimeout(timeoutId);
+      
+      if (!response.ok) {
+        throw new Error(`${this.i18nMessages.getMessage(errorMessageKey, this.i18nMessages.getCurrentLang())}${response.status}`);
+      }
+      
+      const releases = await response.json();
+      
+      if (!releases || releases.length === 0) {
+        throw new Error(this.i18nMessages.getMessage('noReleases', this.i18nMessages.getCurrentLang()));
+      }
+      
+      return releases;
+    } catch (error) {
+      clearTimeout(timeoutId);
+      throw error;
+    }
+  }
+
+  /**
+   * 从Gitea获取数据
+   * @param {Object} repo - 仓库配置
+   * @param {Object} options - 请求选项
+   * @param {string} errorMessageKey - 错误消息键
+   */
+  async fetchFromGitea(repo, options, errorMessageKey) {
+    const response = await fetch(repo.apiUrl, options);
+    
+    if (!response.ok) {
+      throw new Error(`${this.i18nMessages.getMessage(errorMessageKey, this.i18nMessages.getCurrentLang())}${response.status}`);
+    }
+    
+    const releases = await response.json();
+    
+    if (!releases || releases.length === 0) {
+      throw new Error(this.i18nMessages.getMessage('noReleases', this.i18nMessages.getCurrentLang()));
+    }
+    
+    return releases;
+  }
+}
+  
+/**
+ * UI管理类
+ */
+class UIManager {
+   constructor(i18nMessages) {
+     this.i18nMessages = i18nMessages;
+     this.elements = {
+       loading: document.getElementById('loading'),
+       changelog: document.getElementById('changelog'),
+       error: document.getElementById('error-message')
+     };
+   }
+
+  /**
+   * 显示加载状态
+   */
+  showLoading() {
+    this.elements.loading.style.display = 'block';
+    this.elements.error.style.display = 'none';
+    this.elements.changelog.innerHTML = '';
+  }
+
+  /**
+   * 隐藏加载状态
+   */
+  hideLoading() {
+    this.elements.loading.style.display = 'none';
+  }
+
+  /**
+   * 显示错误消息
+   * @param {string} message - 错误消息
+   */
+  showError(message) {
+    const errorMessageElement = this.elements.error.querySelector('p');
+    if (errorMessageElement) {
+      errorMessageElement.textContent = message;
+    } else {
+      this.elements.error.textContent = message;
+    }
+    this.elements.error.style.display = 'block';
+    this.hideLoading();
+  }
+
+  /**
+   * 显示发布信息
+   * @param {Array} releases - 发布信息数组
+   * @param {string} source - 数据源
+   */
+  displayReleases(releases, source) {
+    this.hideLoading();
+    
+    // 清除现有内容
+    this.elements.changelog.innerHTML = '';
+    
+    // 创建数据源元素
+    const sourceElement = this.createSourceElement(source);
+    this.elements.changelog.appendChild(sourceElement);
+    
+    // 创建发布信息元素
+    releases.forEach(release => {
+      const releaseElement = this.createReleaseElement(release, source);
+      this.elements.changelog.appendChild(releaseElement);
+    });
+    
+    this.elements.changelog.style.display = 'block';
+  }
+
+  /**
+   * 创建数据源元素
+   * @param {string} source - 数据源
+   */
+  createSourceElement(source) {
+    const sourceElement = document.createElement('div');
+    sourceElement.className = 'data-source';
+    
+    // 创建带有国际化支持的源标签
+    const sourceLabel = document.createElement('span');
+    sourceLabel.setAttribute('data-en', this.i18nMessages.getMessage('dataSource', 'en'));
+    sourceLabel.setAttribute('data-zh', this.i18nMessages.getMessage('dataSource', 'zh'));
+    sourceLabel.textContent = this.i18nMessages.getMessage('dataSource', this.i18nMessages.getCurrentLang());
+    
+    // 创建链接
+     const sourceLink = document.createElement('a');
+     const repositoryConfig = new RepositoryConfig();
+     sourceLink.href = repositoryConfig.getRepo(source).releasesUrl;
+     sourceLink.textContent = source === 'github' ? 'GitHub' : 'Gitea';
+     sourceLink.target = '_blank';
+    
+    // 组装元素
+    sourceElement.appendChild(sourceLabel);
+    sourceElement.appendChild(sourceLink);
+    
+    return sourceElement;
+  }
+  
+  /**
+   * 创建发布信息元素
+   * @param {Object} release - 发布信息对象
+   * @param {string} source - 数据源
+   */
+  createReleaseElement(release, source) {
+    const releaseElement = document.createElement('div');
+    releaseElement.className = 'release';
+    
+    // 格式化发布日期
+    const releaseDate = new Date(release.published_at || release.created_at);
+    const formattedDate = DateFormatter.formatDate(releaseDate);
+    
+    // 创建头部
+    const headerElement = this.createReleaseHeader(release, formattedDate);
+    releaseElement.appendChild(headerElement);
+    
+    // 添加发布说明
+    if (release.body) {
+      const descriptionElement = document.createElement('div');
+      descriptionElement.className = 'release-description markdown-content';
+      descriptionElement.innerHTML = MarkdownParser.parseMarkdown(release.body);
+      releaseElement.appendChild(descriptionElement);
+    }
+    
+    // 添加下载资源
+    const assets = AssetManager.getAssetsFromRelease(release, source);
+    if (assets && assets.length > 0) {
+      const assetsElement = this.createAssetsElement(assets);
+      releaseElement.appendChild(assetsElement);
+    }
+    
+    return releaseElement;
+  }
+  
+  /**
+   * 创建发布信息头部
+   */
+  createReleaseHeader(release, formattedDate) {
+    const headerElement = document.createElement('div');
+    headerElement.className = 'release-header';
+    
+    // 版本元素
+    const versionElement = document.createElement('div');
+    versionElement.className = 'release-version';
+    
+    // 版本文本
+    const versionText = document.createElement('span');
+    versionText.textContent = release.name || release.tag_name;
+    versionElement.appendChild(versionText);
+    
+    // 预发布标记
+    if (release.prerelease) {
+      const preReleaseTag = document.createElement('span');
+      preReleaseTag.className = 'release-badge pre-release';
+      preReleaseTag.setAttribute('data-en', this.i18nMessages.getMessage('preRelease', 'en'));
+      preReleaseTag.setAttribute('data-zh', this.i18nMessages.getMessage('preRelease', 'zh'));
+      preReleaseTag.textContent = this.i18nMessages.getMessage('preRelease', this.i18nMessages.getCurrentLang());
+      versionElement.appendChild(preReleaseTag);
+    }
+    
+    // 日期元素
+    const dateElement = document.createElement('div');
+    dateElement.className = 'release-date';
+    dateElement.textContent = formattedDate;
+    
+    headerElement.appendChild(versionElement);
+    headerElement.appendChild(dateElement);
+    
+    return headerElement;
+  }
+  
+  /**
+   * 创建资源文件元素
+   * @param {Array} assets - 资源文件数组
+   */
+  createAssetsElement(assets) {
+    const assetsElement = document.createElement('div');
+    assetsElement.className = 'release-assets';
+    
+    // 资源标题
+    const assetsTitle = document.createElement('div');
+    assetsTitle.className = 'release-assets-title';
+    assetsTitle.setAttribute('data-en', this.i18nMessages.getMessage('downloads', 'en'));
+    assetsTitle.setAttribute('data-zh', this.i18nMessages.getMessage('downloads', 'zh'));
+    assetsTitle.textContent = this.i18nMessages.getMessage('downloads', this.i18nMessages.getCurrentLang());
+    
+    // 资源列表
+    const assetList = document.createElement('ul');
+    assetList.className = 'asset-list';
+    
+    // 添加每个资源
+    assets.forEach(asset => {
+      const assetItem = this.createAssetItem(asset);
+      assetList.appendChild(assetItem);
+    });
+    
+    assetsElement.appendChild(assetsTitle);
+    assetsElement.appendChild(assetList);
+    
+    return assetsElement;
+  }
+  
+  /**
+   * 创建资源文件项
+   * @param {Object} asset - 资源文件对象
+   */
+  createAssetItem(asset) {
+    const assetItem = document.createElement('li');
+    assetItem.className = 'asset-item';
+    
+    // 文件图标
+    const iconElement = document.createElement('i');
+    iconElement.className = `asset-icon fas fa-${FileIconHelper.getFileIcon(asset.name)}`;
+    
+    // 文件名
+    const nameElement = document.createElement('span');
+    nameElement.className = 'asset-name';
+    nameElement.textContent = asset.name;
+    
+    // 文件大小
+    const sizeElement = document.createElement('span');
+    sizeElement.className = 'asset-size';
+    sizeElement.textContent = FileSizeFormatter.formatFileSize(asset.size);
+    
+    // 下载链接
+    const downloadLink = document.createElement('a');
+    downloadLink.className = 'download-btn';
+    downloadLink.href = asset.browser_download_url;
+    downloadLink.target = '_blank';
+    downloadLink.setAttribute('data-en', this.i18nMessages.getMessage('download', 'en'));
+    downloadLink.setAttribute('data-zh', this.i18nMessages.getMessage('download', 'zh'));
+    downloadLink.textContent = this.i18nMessages.getMessage('download', this.i18nMessages.getCurrentLang());
+    
+    // 组装资源项
+    assetItem.appendChild(iconElement);
+    assetItem.appendChild(nameElement);
+    assetItem.appendChild(sizeElement);
+    assetItem.appendChild(downloadLink);
+    
+    return assetItem;
+  }
+}
+  
+/**
+ * 资源管理器类
+ */
+class AssetManager {
+  /**
+   * 从发布信息中获取资源文件
+   * @param {Object} release - 发布信息对象
+   * @param {string} source - 数据源
+   */
+  static getAssetsFromRelease(release, source) {
+    let assets = [];
+    
+    if (source === 'github') {
+      assets = release.assets || [];
+    } else { // Gitea
+      assets = release.assets || [];
+      // 检查Gitea特定的资源结构
+      if (!assets.length && release.attachments) {
+        assets = release.attachments.map(attachment => ({
+          name: attachment.name,
+          size: attachment.size,
+          browser_download_url: attachment.browser_download_url
+        }));
+      }
+    }
+    
+    return assets;
+  }
+}
+
+/**
+ * 文件图标助手类
+ */
+class FileIconHelper {
+  /**
+   * 根据文件扩展名获取图标
+   * @param {string} filename - 文件名
+   */
+  static getFileIcon(filename) {
+    const extension = filename.split('.').pop().toLowerCase();
+    
+    const iconMap = {
+      'exe': 'download',
+      'msi': 'download',
+      'dmg': 'download',
+      'pkg': 'download',
+      'deb': 'download',
+      'rpm': 'download',
+      'tar': 'file-archive',
+      'gz': 'file-archive',
+      'zip': 'file-archive',
+      '7z': 'file-archive',
+      'rar': 'file-archive',
+      'pdf': 'file-pdf',
+      'txt': 'file-alt',
+      'md': 'file-alt',
+      'json': 'file-code',
+      'xml': 'file-code',
+      'yml': 'file-code',
+      'yaml': 'file-code'
+    };
+    
+    return iconMap[extension] || 'file';
+  }
+}
+
+/**
+ * 文件大小格式化器类
+ */
+class FileSizeFormatter {
+  /**
+   * 格式化文件大小
+   * @param {number} bytes - 字节数
+   */
+  static formatFileSize(bytes) {
+    if (!bytes) return '';
+    
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    
+    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
+  }
+}
+
+/**
+ * 日期格式化器类
+ */
+class DateFormatter {
+  /**
+   * 格式化日期
+   * @param {Date} date - 日期对象
+   */
+  static formatDate(date) {
+    const options = {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    };
+    
+    const lang = window.currentLang || 'en';
+    const locale = lang === 'zh' ? 'zh-CN' : 'en-US';
+    
+    return date.toLocaleDateString(locale, options);
+  }
+}
+
+/**
+ * Markdown解析器类
+ */
+class MarkdownParser {
+  /**
+   * 简单的Markdown解析
+   * @param {string} markdown - Markdown文本
+   */
+  static parseMarkdown(markdown) {
+    if (!markdown) return '';
+    
+    // 预处理：保留原始换行符，用特殊标记替换
+    const preservedLineBreaks = '___LINE_BREAK___';
+    markdown = markdown.replace(/\n/g, preservedLineBreaks);
+    
+    // 引用块 - > text
+    markdown = markdown.replace(/&gt;\s*(.*?)(?=&gt;|$)/g, '<blockquote>$1</blockquote>');
+    markdown = markdown.replace(/>\s*(.*?)(?=>|$)/g, '<blockquote>$1</blockquote>');
+    
+    // 链接 - [text](url)
+    markdown = markdown.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+    
+    // 标题 - # Heading
+    markdown = markdown.replace(/^### (.*?)(?=___LINE_BREAK___|$)/gm, '<h3>$1</h3>');
+    markdown = markdown.replace(/^## (.*?)(?=___LINE_BREAK___|$)/gm, '<h2>$1</h2>');
+    markdown = markdown.replace(/^# (.*?)(?=___LINE_BREAK___|$)/gm, '<h1>$1</h1>');
+    
+    // 粗体 - **text**
+    markdown = markdown.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    
+    // 斜体 - *text*
+    markdown = markdown.replace(/\*(.*?)\*/g, '<em>$1</em>');
+    
+    // 代码块 - ```code```
+    markdown = markdown.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
+    
+    // 行内代码 - `code`
+    markdown = markdown.replace(/`([^`]+)`/g, '<code>$1</code>');
+    
+    // 处理列表项
+    // 先将每个列表项转换为HTML
+    markdown = markdown.replace(/- (.*?)(?=___LINE_BREAK___- |___LINE_BREAK___$|$)/g, '<li>$1</li>');
+    markdown = markdown.replace(/\* (.*?)(?=___LINE_BREAK___\* |___LINE_BREAK___$|$)/g, '<li>$1</li>');
+    markdown = markdown.replace(/\d+\. (.*?)(?=___LINE_BREAK___\d+\. |___LINE_BREAK___$|$)/g, '<li>$1</li>');
+    
+    // 然后将连续的列表项包装在ul或ol中
+    const listItemRegex = /<li>.*?<\/li>/g;
+    const listItems = markdown.match(listItemRegex) || [];
+    
+    if (listItems.length > 0) {
+      // 将连续的列表项组合在一起
+      let lastIndex = 0;
+      let result = '';
+      let inList = false;
+      
+      listItems.forEach(item => {
+        const itemIndex = markdown.indexOf(item, lastIndex);
+        
+        // 添加列表项之前的内容
+        if (itemIndex > lastIndex) {
+          result += markdown.substring(lastIndex, itemIndex);
+        }
+        
+        // 如果不在列表中，开始一个新列表
+        if (!inList) {
+          result += '<ul>';
+          inList = true;
+        }
+        
+        // 添加列表项
+        result += item;
+        
+        // 更新lastIndex
+        lastIndex = itemIndex + item.length;
+        
+        // 检查下一个内容是否是列表项
+        const nextItemIndex = markdown.indexOf('<li>', lastIndex);
+        if (nextItemIndex === -1 || nextItemIndex > lastIndex + 20) { // 如果下一个列表项不紧邻
+          result += '</ul>';
+          inList = false;
+        }
+      });
+      
+      // 添加剩余内容
+      if (lastIndex < markdown.length) {
+        result += markdown.substring(lastIndex);
+      }
+      
+      markdown = result;
+    }
+    
+    // 处理水平分隔线
+    markdown = markdown.replace(/---/g, '<hr>');
+    
+    // 恢复换行符
+    markdown = markdown.replace(/___LINE_BREAK___/g, '<br>');
+    
+    // 处理段落
+    markdown = markdown.replace(/<br><br>/g, '</p><p>');
+    
+    // 包装在段落标签中
+    if (!markdown.startsWith('<p>')) {
+      markdown = `<p>${markdown}</p>`;
+    }
+    
+    return markdown;
+  }
+}
+
+/**
+ * 更新日志主应用类
+ */
+class ChangelogApp {
+  constructor() {
+    this.repositoryConfig = new RepositoryConfig();
+    this.i18nMessages = new I18nMessages();
+    this.apiClient = new APIClient(this.repositoryConfig, this.i18nMessages);
+    this.uiManager = new UIManager(this.i18nMessages);
+    
+    this.init();
+  }
+
+  /**
+   * 初始化应用
+   */
+  init() {
+    this.uiManager.showLoading();
+    
+    // 首先尝试GitHub API
+    this.apiClient.fetchReleases('github')
+      .then(releases => {
+        this.uiManager.displayReleases(releases, 'github');
+      })
+      .catch(() => {
+        // GitHub失败时尝试Gitea
+        return this.apiClient.fetchReleases('gitea')
+          .then(releases => {
+            this.uiManager.displayReleases(releases, 'gitea');
+          });
+      })
+      .catch(error => {
+        console.error('获取发布信息失败:', error);
+        this.uiManager.showError(this.i18nMessages.getMessage('fetchError', this.i18nMessages.getCurrentLang()));
+      });
+    
+    // 监听语言变化事件
+    document.addEventListener('languageChanged', () => this.updateUI());
+  }
+
+  /**
+   * 更新UI元素（当语言变化时）
+   */
+  updateUI() {
+    const elementsToUpdate = document.querySelectorAll('[data-en][data-zh]');
+    const currentLang = this.i18nMessages.getCurrentLang();
+    
+    elementsToUpdate.forEach(element => {
+      const text = element.getAttribute(`data-${currentLang}`);
+      if (text) {
+        element.textContent = text;
+      }
+    });
+  }
+}
+
+// 当DOM加载完成时初始化应用
+document.addEventListener('DOMContentLoaded', () => {
+  new ChangelogApp();
+});
--- a/docs/js/script.js
+++ b/docs/js/script.js
@@ -0,0 +1,443 @@
+/**
+ * VoidRaft - Website Script
+ */
+
+/**
+ * 主题管理类
+ */
+class ThemeManager {
+  constructor() {
+    this.themeToggle = document.getElementById('theme-toggle');
+    this.currentTheme = this.getInitialTheme();
+    this.init();
+  }
+
+  /**
+   * 获取初始主题
+   */
+  getInitialTheme() {
+    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+    const savedTheme = localStorage.getItem('theme');
+    return savedTheme || (prefersDarkScheme.matches ? 'dark' : 'light');
+  }
+
+  /**
+   * 初始化主题管理器
+   */
+  init() {
+    if (!this.themeToggle) return;
+    
+    this.setTheme(this.currentTheme);
+    this.bindEvents();
+  }
+
+  /**
+   * 绑定事件
+   */
+  bindEvents() {
+    this.themeToggle.addEventListener('click', () => {
+      this.toggleTheme();
+    });
+  }
+
+  /**
+   * 切换主题
+   */
+  toggleTheme() {
+    document.body.classList.add('theme-transition');
+    
+    const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
+    this.setTheme(newTheme);
+    this.saveTheme(newTheme);
+    
+    setTimeout(() => document.body.classList.remove('theme-transition'), 300);
+  }
+
+  /**
+   * 设置主题
+   * @param {string} theme - 'dark' 或 'light'
+   */
+  setTheme(theme) {
+    this.currentTheme = theme;
+    const isDark = theme === 'dark';
+    
+    document.body.classList.toggle('theme-dark', isDark);
+    document.body.classList.toggle('theme-light', !isDark);
+    
+    this.updateToggleIcon(isDark);
+  }
+
+  /**
+   * 更新切换按钮图标
+   * @param {boolean} isDark - 是否为暗色主题
+   */
+  updateToggleIcon(isDark) {
+    if (this.themeToggle) {
+      const icon = this.themeToggle.querySelector('i');
+      if (icon) {
+        icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
+      }
+    }
+  }
+
+  /**
+   * 保存主题到本地存储
+   * @param {string} theme - 主题名称
+   */
+  saveTheme(theme) {
+    localStorage.setItem('theme', theme);
+  }
+}
+
+/**
+ * 语言管理类
+ */
+class LanguageManager {
+  constructor() {
+    this.langToggle = document.getElementById('lang-toggle');
+    this.currentLang = this.getInitialLanguage();
+    this.init();
+  }
+
+  /**
+   * 获取初始语言
+   */
+  getInitialLanguage() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const urlLang = urlParams.get('lang');
+    const savedLang = localStorage.getItem('lang');
+    const browserLang = navigator.language.startsWith('zh') ? 'zh' : 'en';
+    return urlLang || savedLang || browserLang;
+  }
+
+  /**
+   * 初始化语言管理器
+   */
+  init() {
+    if (!this.langToggle) return;
+    
+    window.currentLang = this.currentLang;
+    this.setLanguage(this.currentLang);
+    this.bindEvents();
+  }
+
+  /**
+   * 绑定事件
+   */
+  bindEvents() {
+    this.langToggle.addEventListener('click', () => {
+      this.toggleLanguage();
+    });
+  }
+
+  /**
+   * 切换语言
+   */
+  toggleLanguage() {
+    document.body.classList.add('lang-transition');
+    
+    const newLang = this.currentLang === 'zh' ? 'en' : 'zh';
+    this.setLanguage(newLang);
+    this.saveLanguage(newLang);
+    this.updateURL(newLang);
+    this.notifyLanguageChange(newLang);
+    
+    setTimeout(() => document.body.classList.remove('lang-transition'), 300);
+  }
+
+  /**
+   * 设置页面语言
+   * @param {string} lang - 'zh' 或 'en'
+   */
+  setLanguage(lang) {
+    this.currentLang = lang;
+    window.currentLang = lang;
+    
+    this.updatePageElements(lang);
+    this.updateHTMLLang(lang);
+    this.updateToggleButton(lang);
+  }
+
+  /**
+   * 更新页面元素文本
+   * @param {string} lang - 语言代码
+   */
+  updatePageElements(lang) {
+    document.querySelectorAll('[data-zh][data-en]').forEach(el => {
+      el.textContent = el.getAttribute(`data-${lang}`);
+    });
+  }
+
+  /**
+   * 更新HTML语言属性
+   * @param {string} lang - 语言代码
+   */
+  updateHTMLLang(lang) {
+    document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en';
+  }
+
+  /**
+   * 更新切换按钮文本
+   * @param {string} lang - 语言代码
+   */
+  updateToggleButton(lang) {
+    if (this.langToggle) {
+      const text = lang === 'zh' ? 'EN/中' : '中/EN';
+      this.langToggle.innerHTML = `<i class="fas fa-language"></i> ${text}`;
+    }
+  }
+
+  /**
+   * 保存语言到本地存储
+   * @param {string} lang - 语言代码
+   */
+  saveLanguage(lang) {
+    localStorage.setItem('lang', lang);
+  }
+
+  /**
+   * 更新URL参数
+   * @param {string} lang - 语言代码
+   */
+  updateURL(lang) {
+    const newUrl = new URL(window.location);
+    if (lang === 'zh') {
+      newUrl.searchParams.set('lang', 'zh');
+    } else {
+      newUrl.searchParams.delete('lang');
+    }
+    window.history.replaceState({}, '', newUrl);
+  }
+
+  /**
+   * 通知语言变更
+   * @param {string} lang - 语言代码
+   */
+  notifyLanguageChange(lang) {
+    window.dispatchEvent(new CustomEvent('languageChanged', { detail: { lang } }));
+  }
+
+  /**
+   * 获取当前语言
+   */
+  getCurrentLanguage() {
+    return this.currentLang;
+  }
+}
+
+/**
+ * SEO管理类
+ */
+class SEOManager {
+  constructor(languageManager) {
+    this.languageManager = languageManager;
+    this.metaTexts = {
+      en: {
+        description: 'VoidRaft is an elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.',
+        title: 'VoidRaft - An elegant text snippet recording tool designed for developers.',
+        ogTitle: 'VoidRaft - An elegant text snippet recording tool designed for developers'
+      },
+      zh: {
+        description: 'VoidRaft 是专为开发者打造的优雅文本片段记录工具。支持多语言代码块、语法高亮、代码格式化、自定义主题等功能。',
+        title: 'VoidRaft - 专为开发者打造的优雅文本片段记录工具',
+        ogTitle: 'VoidRaft - 专为开发者打造的优雅文本片段记录工具'
+      }
+    };
+    this.init();
+  }
+
+  /**
+   * 初始化SEO管理器
+   */
+  init() {
+    this.bindEvents();
+    this.updateMetaTags(this.languageManager.getCurrentLanguage());
+  }
+
+  /**
+   * 绑定事件
+   */
+  bindEvents() {
+    window.addEventListener('languageChanged', (event) => {
+      this.updateMetaTags(event.detail.lang);
+    });
+  }
+
+  /**
+   * 更新SEO元标签
+   * @param {string} lang - 当前语言
+   */
+  updateMetaTags(lang) {
+    const texts = this.metaTexts[lang];
+    
+    this.updateMetaDescription(texts.description);
+    this.updateOpenGraphTags(texts.ogTitle, texts.description);
+    this.updateTwitterCardTags(texts.ogTitle, texts.description);
+    this.updatePageTitle(texts.title);
+  }
+
+  /**
+   * 更新meta描述
+   * @param {string} description - 描述文本
+   */
+  updateMetaDescription(description) {
+    const metaDesc = document.querySelector('meta[name="description"]');
+    if (metaDesc) {
+      metaDesc.content = description;
+    }
+  }
+
+  /**
+   * 更新Open Graph标签
+   * @param {string} title - 标题
+   * @param {string} description - 描述
+   */
+  updateOpenGraphTags(title, description) {
+    const ogTitle = document.querySelector('meta[property="og:title"]');
+    const ogDesc = document.querySelector('meta[property="og:description"]');
+    
+    if (ogTitle) ogTitle.content = title;
+    if (ogDesc) ogDesc.content = description;
+  }
+
+  /**
+   * 更新Twitter Card标签
+   * @param {string} title - 标题
+   * @param {string} description - 描述
+   */
+  updateTwitterCardTags(title, description) {
+    const twitterTitle = document.querySelector('meta[property="twitter:title"]');
+    const twitterDesc = document.querySelector('meta[property="twitter:description"]');
+    
+    if (twitterTitle) twitterTitle.content = title;
+    if (twitterDesc) twitterDesc.content = description;
+  }
+
+  /**
+   * 更新页面标题
+   * @param {string} title - 标题
+   */
+  updatePageTitle(title) {
+    document.title = title;
+  }
+}
+
+/**
+ * UI效果管理类
+ */
+class UIEffects {
+  constructor() {
+    this.init();
+  }
+
+  /**
+   * 初始化UI效果
+   */
+  init() {
+    this.initCardEffects();
+  }
+
+  /**
+   * 初始化卡片悬停效果
+   */
+  initCardEffects() {
+    const cards = document.querySelectorAll('.feature-card');
+    
+    cards.forEach(card => {
+      card.addEventListener('mouseenter', () => {
+        this.animateCardHover(card, true);
+      });
+      
+      card.addEventListener('mouseleave', () => {
+        this.animateCardHover(card, false);
+      });
+    });
+  }
+
+  /**
+   * 卡片悬停动画
+   * @param {Element} card - 卡片元素
+   * @param {boolean} isHover - 是否悬停
+   */
+  animateCardHover(card, isHover) {
+    if (isHover) {
+      card.style.transform = 'translateY(-8px)';
+      card.style.boxShadow = '7px 7px 0 var(--shadow-color)';
+    } else {
+      card.style.transform = 'translateY(0)';
+      card.style.boxShadow = '5px 5px 0 var(--shadow-color)';
+    }
+  }
+}
+
+/**
+ * VoidRaft主应用类
+ */
+class VoidRaftApp {
+  constructor() {
+    this.themeManager = null;
+    this.languageManager = null;
+    this.seoManager = null;
+    this.uiEffects = null;
+    this.init();
+  }
+
+  /**
+   * 初始化应用
+   */
+  init() {
+    this.initializeManagers();
+    this.showConsoleBranding();
+  }
+
+  /**
+   * 初始化各个管理器
+   */
+  initializeManagers() {
+    this.themeManager = new ThemeManager();
+    this.languageManager = new LanguageManager();
+    this.seoManager = new SEOManager(this.languageManager);
+    this.uiEffects = new UIEffects();
+  }
+
+  /**
+   * 显示控制台品牌信息
+   */
+  showConsoleBranding() {
+    console.log('%c VoidRaft', 'color: #ff006e; font-size: 20px; font-family: "Space Mono", monospace;');
+    console.log('%c An elegant text snippet recording tool designed for developers.', 'color: #073B4C; font-family: "Space Mono", monospace;');
+  }
+
+  /**
+   * 获取主题管理器
+   */
+  getThemeManager() {
+    return this.themeManager;
+  }
+
+  /**
+   * 获取语言管理器
+   */
+  getLanguageManager() {
+    return this.languageManager;
+  }
+
+  /**
+   * 获取SEO管理器
+   */
+  getSEOManager() {
+    return this.seoManager;
+  }
+
+  /**
+   * 获取UI效果管理器
+   */
+  getUIEffects() {
+    return this.uiEffects;
+  }
+}
+
+// 当DOM加载完成时初始化应用
+document.addEventListener('DOMContentLoaded', () => {
+  window.voidRaftApp = new VoidRaftApp();
+});
--- a/frontend/bindings/github.com/wailsapp/wails/v3/pkg/application/models.ts
+++ b/frontend/bindings/github.com/wailsapp/wails/v3/pkg/application/models.ts
@@ -11,15 +11,55 @@ import * as slog$0 from "../../../../../../log/slog/models.js";

 export class App {
    /**
-     * The main application menu
+     * Manager pattern for organized API
     */
-    "ApplicationMenu": Menu | null;
+    "Window": WindowManager | null;
+    "ContextMenu": ContextMenuManager | null;
+    "KeyBinding": KeyBindingManager | null;
+    "Browser": BrowserManager | null;
+    "Env": EnvironmentManager | null;
+    "Dialog": DialogManager | null;
+    "Event": EventManager | null;
+    "Menu": MenuManager | null;
+    "Screen": ScreenManager | null;
+    "Clipboard": ClipboardManager | null;
+    "SystemTray": SystemTrayManager | null;
    "Logger": slog$0.Logger | null;

    /** Creates a new App instance. */
    constructor($$source: Partial<App> = {}) {
-        if (!("ApplicationMenu" in $$source)) {
-            this["ApplicationMenu"] = null;
+        if (!("Window" in $$source)) {
+            this["Window"] = null;
+        }
+        if (!("ContextMenu" in $$source)) {
+            this["ContextMenu"] = null;
+        }
+        if (!("KeyBinding" in $$source)) {
+            this["KeyBinding"] = null;
+        }
+        if (!("Browser" in $$source)) {
+            this["Browser"] = null;
+        }
+        if (!("Env" in $$source)) {
+            this["Env"] = null;
+        }
+        if (!("Dialog" in $$source)) {
+            this["Dialog"] = null;
+        }
+        if (!("Event" in $$source)) {
+            this["Event"] = null;
+        }
+        if (!("Menu" in $$source)) {
+            this["Menu"] = null;
+        }
+        if (!("Screen" in $$source)) {
+            this["Screen"] = null;
+        }
+        if (!("Clipboard" in $$source)) {
+            this["Clipboard"] = null;
+        }
+        if (!("SystemTray" in $$source)) {
+            this["SystemTray"] = null;
        }
        if (!("Logger" in $$source)) {
            this["Logger"] = null;
@@ -34,31 +74,308 @@ export class App {
    static createFrom($$source: any = {}): App {
        const $$createField0_0 = $$createType1;
        const $$createField1_0 = $$createType3;
+        const $$createField2_0 = $$createType5;
+        const $$createField3_0 = $$createType7;
+        const $$createField4_0 = $$createType9;
+        const $$createField5_0 = $$createType11;
+        const $$createField6_0 = $$createType13;
+        const $$createField7_0 = $$createType15;
+        const $$createField8_0 = $$createType17;
+        const $$createField9_0 = $$createType19;
+        const $$createField10_0 = $$createType21;
+        const $$createField11_0 = $$createType23;
        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        if ("ApplicationMenu" in $$parsedSource) {
-            $$parsedSource["ApplicationMenu"] = $$createField0_0($$parsedSource["ApplicationMenu"]);
+        if ("Window" in $$parsedSource) {
+            $$parsedSource["Window"] = $$createField0_0($$parsedSource["Window"]);
+        }
+        if ("ContextMenu" in $$parsedSource) {
+            $$parsedSource["ContextMenu"] = $$createField1_0($$parsedSource["ContextMenu"]);
+        }
+        if ("KeyBinding" in $$parsedSource) {
+            $$parsedSource["KeyBinding"] = $$createField2_0($$parsedSource["KeyBinding"]);
+        }
+        if ("Browser" in $$parsedSource) {
+            $$parsedSource["Browser"] = $$createField3_0($$parsedSource["Browser"]);
+        }
+        if ("Env" in $$parsedSource) {
+            $$parsedSource["Env"] = $$createField4_0($$parsedSource["Env"]);
+        }
+        if ("Dialog" in $$parsedSource) {
+            $$parsedSource["Dialog"] = $$createField5_0($$parsedSource["Dialog"]);
+        }
+        if ("Event" in $$parsedSource) {
+            $$parsedSource["Event"] = $$createField6_0($$parsedSource["Event"]);
+        }
+        if ("Menu" in $$parsedSource) {
+            $$parsedSource["Menu"] = $$createField7_0($$parsedSource["Menu"]);
+        }
+        if ("Screen" in $$parsedSource) {
+            $$parsedSource["Screen"] = $$createField8_0($$parsedSource["Screen"]);
+        }
+        if ("Clipboard" in $$parsedSource) {
+            $$parsedSource["Clipboard"] = $$createField9_0($$parsedSource["Clipboard"]);
+        }
+        if ("SystemTray" in $$parsedSource) {
+            $$parsedSource["SystemTray"] = $$createField10_0($$parsedSource["SystemTray"]);
        }
        if ("Logger" in $$parsedSource) {
-            $$parsedSource["Logger"] = $$createField1_0($$parsedSource["Logger"]);
+            $$parsedSource["Logger"] = $$createField11_0($$parsedSource["Logger"]);
        }
        return new App($$parsedSource as Partial<App>);
    }
 }

-export class Menu {
+/**
+ * BrowserManager manages browser-related operations
+ */
+export class BrowserManager {

-    /** Creates a new Menu instance. */
-    constructor($$source: Partial<Menu> = {}) {
+    /** Creates a new BrowserManager instance. */
+    constructor($$source: Partial<BrowserManager> = {}) {

        Object.assign(this, $$source);
    }

    /**
-     * Creates a new Menu instance from a string or object.
+     * Creates a new BrowserManager instance from a string or object.
     */
-    static createFrom($$source: any = {}): Menu {
+    static createFrom($$source: any = {}): BrowserManager {
        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new Menu($$parsedSource as Partial<Menu>);
+        return new BrowserManager($$parsedSource as Partial<BrowserManager>);
+    }
+}
+
+/**
+ * ClipboardManager manages clipboard operations
+ */
+export class ClipboardManager {
+
+    /** Creates a new ClipboardManager instance. */
+    constructor($$source: Partial<ClipboardManager> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new ClipboardManager instance from a string or object.
+     */
+    static createFrom($$source: any = {}): ClipboardManager {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new ClipboardManager($$parsedSource as Partial<ClipboardManager>);
+    }
+}
+
+/**
+ * ContextMenuManager manages all context menu operations
+ */
+export class ContextMenuManager {
+
+    /** Creates a new ContextMenuManager instance. */
+    constructor($$source: Partial<ContextMenuManager> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new ContextMenuManager instance from a string or object.
+     */
+    static createFrom($$source: any = {}): ContextMenuManager {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new ContextMenuManager($$parsedSource as Partial<ContextMenuManager>);
+    }
+}
+
+/**
+ * DialogManager manages dialog-related operations
+ */
+export class DialogManager {
+
+    /** Creates a new DialogManager instance. */
+    constructor($$source: Partial<DialogManager> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new DialogManager instance from a string or object.
+     */
+    static createFrom($$source: any = {}): DialogManager {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new DialogManager($$parsedSource as Partial<DialogManager>);
+    }
+}
+
+/**
+ * EnvironmentManager manages environment-related operations
+ */
+export class EnvironmentManager {
+
+    /** Creates a new EnvironmentManager instance. */
+    constructor($$source: Partial<EnvironmentManager> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new EnvironmentManager instance from a string or object.
+     */
+    static createFrom($$source: any = {}): EnvironmentManager {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new EnvironmentManager($$parsedSource as Partial<EnvironmentManager>);
+    }
+}
+
+/**
+ * EventManager manages event-related operations
+ */
+export class EventManager {
+
+    /** Creates a new EventManager instance. */
+    constructor($$source: Partial<EventManager> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new EventManager instance from a string or object.
+     */
+    static createFrom($$source: any = {}): EventManager {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new EventManager($$parsedSource as Partial<EventManager>);
+    }
+}
+
+/**
+ * KeyBindingManager manages all key binding operations
+ */
+export class KeyBindingManager {
+
+    /** Creates a new KeyBindingManager instance. */
+    constructor($$source: Partial<KeyBindingManager> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new KeyBindingManager instance from a string or object.
+     */
+    static createFrom($$source: any = {}): KeyBindingManager {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new KeyBindingManager($$parsedSource as Partial<KeyBindingManager>);
+    }
+}
+
+/**
+ * MenuManager manages menu-related operations
+ */
+export class MenuManager {
+
+    /** Creates a new MenuManager instance. */
+    constructor($$source: Partial<MenuManager> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new MenuManager instance from a string or object.
+     */
+    static createFrom($$source: any = {}): MenuManager {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new MenuManager($$parsedSource as Partial<MenuManager>);
+    }
+}
+
+export class ScreenManager {
+
+    /** Creates a new ScreenManager instance. */
+    constructor($$source: Partial<ScreenManager> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new ScreenManager instance from a string or object.
+     */
+    static createFrom($$source: any = {}): ScreenManager {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new ScreenManager($$parsedSource as Partial<ScreenManager>);
+    }
+}
+
+/**
+ * ServiceOptions provides optional parameters for calls to [NewService].
+ */
+export class ServiceOptions {
+    /**
+     * Name can be set to override the name of the service
+     * for logging and debugging purposes.
+     * 
+     * If empty, it will default
+     * either to the value obtained through the [ServiceName] interface,
+     * or to the type name.
+     */
+    "Name": string;
+
+    /**
+     * If the service instance implements [http.Handler],
+     * it will be mounted on the internal asset server
+     * at the prefix specified by Route.
+     */
+    "Route": string;
+
+    /**
+     * MarshalError will be called if non-nil
+     * to marshal to JSON the error values returned by this service's methods.
+     * 
+     * MarshalError is not allowed to fail,
+     * but it may return a nil slice to fall back
+     * to the globally configured error handler.
+     * 
+     * If the returned slice is not nil, it must contain valid JSON.
+     */
+    "MarshalError": any;
+
+    /** Creates a new ServiceOptions instance. */
+    constructor($$source: Partial<ServiceOptions> = {}) {
+        if (!("Name" in $$source)) {
+            this["Name"] = "";
+        }
+        if (!("Route" in $$source)) {
+            this["Route"] = "";
+        }
+        if (!("MarshalError" in $$source)) {
+            this["MarshalError"] = null;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new ServiceOptions instance from a string or object.
+     */
+    static createFrom($$source: any = {}): ServiceOptions {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new ServiceOptions($$parsedSource as Partial<ServiceOptions>);
+    }
+}
+
+/**
+ * SystemTrayManager manages system tray-related operations
+ */
+export class SystemTrayManager {
+
+    /** Creates a new SystemTrayManager instance. */
+    constructor($$source: Partial<SystemTrayManager> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new SystemTrayManager instance from a string or object.
+     */
+    static createFrom($$source: any = {}): SystemTrayManager {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new SystemTrayManager($$parsedSource as Partial<SystemTrayManager>);
    }
 }

@@ -79,8 +396,48 @@ export class WebviewWindow {
    }
 }

+/**
+ * WindowManager manages all window-related operations
+ */
+export class WindowManager {
+
+    /** Creates a new WindowManager instance. */
+    constructor($$source: Partial<WindowManager> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new WindowManager instance from a string or object.
+     */
+    static createFrom($$source: any = {}): WindowManager {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new WindowManager($$parsedSource as Partial<WindowManager>);
+    }
+}
+
 // Private type creation functions
-const $$createType0 = Menu.createFrom;
+const $$createType0 = WindowManager.createFrom;
 const $$createType1 = $Create.Nullable($$createType0);
-const $$createType2 = slog$0.Logger.createFrom;
+const $$createType2 = ContextMenuManager.createFrom;
 const $$createType3 = $Create.Nullable($$createType2);
+const $$createType4 = KeyBindingManager.createFrom;
+const $$createType5 = $Create.Nullable($$createType4);
+const $$createType6 = BrowserManager.createFrom;
+const $$createType7 = $Create.Nullable($$createType6);
+const $$createType8 = EnvironmentManager.createFrom;
+const $$createType9 = $Create.Nullable($$createType8);
+const $$createType10 = DialogManager.createFrom;
+const $$createType11 = $Create.Nullable($$createType10);
+const $$createType12 = EventManager.createFrom;
+const $$createType13 = $Create.Nullable($$createType12);
+const $$createType14 = MenuManager.createFrom;
+const $$createType15 = $Create.Nullable($$createType14);
+const $$createType16 = ScreenManager.createFrom;
+const $$createType17 = $Create.Nullable($$createType16);
+const $$createType18 = ClipboardManager.createFrom;
+const $$createType19 = $Create.Nullable($$createType18);
+const $$createType20 = SystemTrayManager.createFrom;
+const $$createType21 = $Create.Nullable($$createType20);
+const $$createType22 = slog$0.Logger.createFrom;
+const $$createType23 = $Create.Nullable($$createType22);
--- a/frontend/bindings/voidraft/internal/common/translator/index.ts
+++ b/frontend/bindings/voidraft/internal/common/translator/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";
--- a/frontend/bindings/voidraft/internal/common/translator/models.ts
+++ b/frontend/bindings/voidraft/internal/common/translator/models.ts
@@ -0,0 +1,71 @@
+// 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";
+
+/**
+ * LanguageInfo 语言信息结构体
+ */
+export class LanguageInfo {
+    /**
+     * 语言代码
+     */
+    "Code": string;
+
+    /**
+     * 语言名称
+     */
+    "Name": string;
+
+    /** Creates a new LanguageInfo instance. */
+    constructor($$source: Partial<LanguageInfo> = {}) {
+        if (!("Code" in $$source)) {
+            this["Code"] = "";
+        }
+        if (!("Name" in $$source)) {
+            this["Name"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new LanguageInfo instance from a string or object.
+     */
+    static createFrom($$source: any = {}): LanguageInfo {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new LanguageInfo($$parsedSource as Partial<LanguageInfo>);
+    }
+}
+
+/**
+ * TranslatorType 翻译器类型
+ */
+export enum TranslatorType {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    /**
+     * GoogleTranslatorType 谷歌翻译器
+     */
+    GoogleTranslatorType = "google",
+
+    /**
+     * BingTranslatorType 必应翻译器
+     */
+    BingTranslatorType = "bing",
+
+    /**
+     * YoudaoTranslatorType 有道翻译器
+     */
+    YoudaoTranslatorType = "youdao",
+
+    /**
+     * DeeplTranslatorType DeepL翻译器
+     */
+    DeeplTranslatorType = "deepl",
+};
--- a/frontend/bindings/voidraft/internal/models/models.ts
+++ b/frontend/bindings/voidraft/internal/models/models.ts
--- a/frontend/bindings/voidraft/internal/services/backupservice.ts
+++ b/frontend/bindings/voidraft/internal/services/backupservice.ts
@@ -0,0 +1,71 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * BackupService 提供基于Git的备份功能
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as models$0 from "../models/models.js";
+
+/**
+ * HandleConfigChange 处理备份配置变更
+ */
+export function HandleConfigChange(config: models$0.GitBackupConfig | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(395287784, config) as any;
+    return $resultPromise;
+}
+
+/**
+ * Initialize 初始化备份服务
+ */
+export function Initialize(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1052437974) as any;
+    return $resultPromise;
+}
+
+/**
+ * PushToRemote 推送本地更改到远程仓库
+ */
+export function PushToRemote(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(262644139) as any;
+    return $resultPromise;
+}
+
+/**
+ * Reinitialize 重新初始化备份服务，用于响应配置变更
+ */
+export function Reinitialize(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(301562543) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown 服务关闭时的清理工作
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(422131801) as any;
+    return $resultPromise;
+}
+
+/**
+ * StartAutoBackup 启动自动备份定时器
+ */
+export function StartAutoBackup(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3035755449) as any;
+    return $resultPromise;
+}
+
+/**
+ * StopAutoBackup 停止自动备份
+ */
+export function StopAutoBackup(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2641894021) as any;
+    return $resultPromise;
+}
--- a/frontend/bindings/voidraft/internal/services/configservice.ts
+++ b/frontend/bindings/voidraft/internal/services/configservice.ts
@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT

 /**
- * ConfigService 提供基于 Viper 的配置管理功能
+ * ConfigService 应用配置服务
 * @module
 */

@@ -42,6 +42,14 @@ export function ResetConfig(): Promise<void> & { cancel(): void } {
    return $resultPromise;
 }

+/**
+ * ServiceShutdown 关闭服务
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3963562361) as any;
+    return $resultPromise;
+}
+
 /**
 * Set 设置配置项
 */
@@ -50,6 +58,14 @@ export function Set(key: string, value: any): Promise<void> & { cancel(): void }
    return $resultPromise;
 }

+/**
+ * SetBackupConfigChangeCallback 设置备份配置变更回调
+ */
+export function SetBackupConfigChangeCallback(callback: any): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3264871659, callback) as any;
+    return $resultPromise;
+}
+
 /**
 * SetDataPathChangeCallback 设置数据路径配置变更回调
 */
--- a/frontend/bindings/voidraft/internal/services/databaseservice.ts
+++ b/frontend/bindings/voidraft/internal/services/databaseservice.ts
@@ -0,0 +1,47 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * DatabaseService provides shared database functionality
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
+
+/**
+ * OnDataPathChanged handles data path changes
+ */
+export function OnDataPathChanged(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3652863491) as any;
+    return $resultPromise;
+}
+
+/**
+ * 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
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3907893632) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup initializes the service when the application starts
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2067840771, options) as any;
+    return $resultPromise;
+}
--- a/frontend/bindings/voidraft/internal/services/dialogservice.ts
+++ b/frontend/bindings/voidraft/internal/services/dialogservice.ts
@@ -22,6 +22,14 @@ export function SelectDirectory(): Promise<string> & { cancel(): void } {
    return $resultPromise;
 }

+/**
+ * SelectFile 打开文件选择对话框
+ */
+export function SelectFile(): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(37302920) as any;
+    return $resultPromise;
+}
+
 /**
 * SetWindow 设置绑定的窗口
 */
--- a/frontend/bindings/voidraft/internal/services/documentservice.ts
+++ b/frontend/bindings/voidraft/internal/services/documentservice.ts
@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT

 /**
- * DocumentService 提供文档管理功能
+ * DocumentService provides document management functionality
 * @module
 */

@@ -10,23 +10,18 @@
 // @ts-ignore: Unused imports
 import {Call as $Call, Create as $Create} from "@wailsio/runtime";

+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as 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";

 /**
- * ForceSave 强制保存
+ * CreateDocument creates a new document and returns the created document with ID
 */
-export function ForceSave(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2767091023) as any;
-    return $resultPromise;
-}
-
-/**
- * GetActiveDocument 获取活动文档
- */
-export function GetActiveDocument(): Promise<models$0.Document | null> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1785823398) as any;
+export function CreateDocument(title: string): Promise<models$0.Document | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3360680842, title) as any;
    let $typingPromise = $resultPromise.then(($result: any) => {
        return $$createType1($result);
    }) as any;
@@ -35,45 +30,106 @@ export function GetActiveDocument(): Promise<models$0.Document | null> & { cance
 }

 /**
- * Initialize 初始化服务
+ * DeleteDocument marks a document as deleted (default document with ID=1 cannot be deleted)
 */
-export function Initialize(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(3418008221) as any;
+export function DeleteDocument(id: number): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(412287269, id) as any;
    return $resultPromise;
 }

 /**
- * OnDataPathChanged 处理数据路径变更
+ * GetDocumentByID gets a document by ID
 */
-export function OnDataPathChanged(oldPath: string, newPath: string): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(269349439, oldPath, newPath) as any;
+export function GetDocumentByID(id: number): Promise<models$0.Document | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3468193232, id) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * GetFirstDocumentID gets the first active document's ID for frontend initialization
+ */
+export function GetFirstDocumentID(): Promise<number> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2970773833) as any;
    return $resultPromise;
 }

 /**
- * ReloadDocument 重新加载文档
+ * ListAllDocumentsMeta lists all active (non-deleted) document metadata
 */
-export function ReloadDocument(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(3093415283) as any;
+export function ListAllDocumentsMeta(): Promise<(models$0.Document | null)[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3073950297) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType2($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * 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 锁定文档，防止删除
+ */
+export function LockDocument(id: number): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1889494473, id) as any;
    return $resultPromise;
 }

 /**
- * ServiceShutdown 关闭服务
+ * RestoreDocument restores a deleted document
 */
-export function ServiceShutdown(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(638578044) as any;
+export function RestoreDocument(id: number): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(784200778, id) as any;
    return $resultPromise;
 }

 /**
- * UpdateActiveDocumentContent 更新文档内容
+ * ServiceStartup initializes the service when the application starts
 */
-export function UpdateActiveDocumentContent(content: string): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1486276638, content) as any;
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1474135487, options) as any;
+    return $resultPromise;
+}
+
+/**
+ * UnlockDocument 解锁文档
+ */
+export function UnlockDocument(id: number): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(222307930, id) as any;
+    return $resultPromise;
+}
+
+/**
+ * UpdateDocumentContent updates the content of a document
+ */
+export function UpdateDocumentContent(id: number, content: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3251897116, id, content) as any;
+    return $resultPromise;
+}
+
+/**
+ * UpdateDocumentTitle updates the title of a document
+ */
+export function UpdateDocumentTitle(id: number, title: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2045530459, id, title) as any;
    return $resultPromise;
 }

 // Private type creation functions
 const $$createType0 = models$0.Document.createFrom;
 const $$createType1 = $Create.Nullable($$createType0);
+const $$createType2 = $Create.Array($$createType1);
--- a/frontend/bindings/voidraft/internal/services/extensionservice.ts
+++ b/frontend/bindings/voidraft/internal/services/extensionservice.ts
@@ -0,0 +1,74 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * ExtensionService 扩展管理服务
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as 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";
+
+/**
+ * GetAllExtensions 获取所有扩展配置
+ */
+export function GetAllExtensions(): Promise<models$0.Extension[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3094292124) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * ResetAllExtensionsToDefault 重置所有扩展到默认状态
+ */
+export function ResetAllExtensionsToDefault(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(270611949) as any;
+    return $resultPromise;
+}
+
+/**
+ * ResetExtensionToDefault 重置扩展到默认状态
+ */
+export function ResetExtensionToDefault(id: models$0.ExtensionID): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(868308101, id) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup 启动时调用
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(40324057, options) as any;
+    return $resultPromise;
+}
+
+/**
+ * UpdateExtensionEnabled 更新扩展启用状态
+ */
+export function UpdateExtensionEnabled(id: models$0.ExtensionID, enabled: boolean): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1067300094, id, enabled) as any;
+    return $resultPromise;
+}
+
+/**
+ * UpdateExtensionState 更新扩展状态
+ */
+export function UpdateExtensionState(id: models$0.ExtensionID, enabled: boolean, config: models$0.ExtensionConfig): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2917946454, id, enabled, config) as any;
+    return $resultPromise;
+}
+
+// Private type creation functions
+const $$createType0 = models$0.Extension.createFrom;
+const $$createType1 = $Create.Array($$createType0);
--- a/frontend/bindings/voidraft/internal/services/hotkeyservice.ts
+++ b/frontend/bindings/voidraft/internal/services/hotkeyservice.ts
@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT

 /**
- * HotkeyService 全局热键服务
+ * HotkeyService Windows全局热键服务
 * @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";

 /**
- * GetCurrentHotkey 获取当前注册的热键
+ * GetCurrentHotkey 获取当前热键
 */
 export function GetCurrentHotkey(): Promise<models$0.HotkeyCombo | null> & { cancel(): void } {
    let $resultPromise = $Call.ByID(2572811187) as any;
@@ -38,7 +38,7 @@ export function Initialize(app: application$0.App | null): Promise<void> & { can
 }

 /**
- * IsRegistered 检查是否已注册热键
+ * IsRegistered 检查是否已注册
 */
 export function IsRegistered(): Promise<boolean> & { cancel(): void } {
    let $resultPromise = $Call.ByID(106954156) as any;
@@ -54,21 +54,13 @@ export function RegisterHotkey(hotkey: models$0.HotkeyCombo | null): Promise<voi
 }

 /**
- * ServiceShutdown  关闭热键服务
+ * ServiceShutdown 关闭服务
 */
 export function ServiceShutdown(): Promise<void> & { cancel(): void } {
    let $resultPromise = $Call.ByID(157291181) as any;
    return $resultPromise;
 }

-/**
- * ToggleWindow 切换窗口显示/隐藏 - 通过事件通知前端处理
- */
-export function ToggleWindow(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1318185132) as any;
-    return $resultPromise;
-}
-
 /**
 * UnregisterHotkey 取消注册全局热键
 */
--- a/frontend/bindings/voidraft/internal/services/index.ts
+++ b/frontend/bindings/voidraft/internal/services/index.ts
@@ -1,23 +1,37 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT

+import * as BackupService from "./backupservice.js";
 import * as ConfigService from "./configservice.js";
+import * as DatabaseService from "./databaseservice.js";
 import * as DialogService from "./dialogservice.js";
 import * as DocumentService from "./documentservice.js";
+import * as ExtensionService from "./extensionservice.js";
 import * as HotkeyService from "./hotkeyservice.js";
 import * as KeyBindingService from "./keybindingservice.js";
 import * as MigrationService from "./migrationservice.js";
+import * as SelfUpdateService from "./selfupdateservice.js";
+import * as StartupService from "./startupservice.js";
 import * as SystemService from "./systemservice.js";
+import * as TranslationService from "./translationservice.js";
 import * as TrayService from "./trayservice.js";
+import * as WindowService from "./windowservice.js";
 export {
+    BackupService,
    ConfigService,
+    DatabaseService,
    DialogService,
    DocumentService,
+    ExtensionService,
    HotkeyService,
    KeyBindingService,
    MigrationService,
+    SelfUpdateService,
+    StartupService,
    SystemService,
-    TrayService
+    TranslationService,
+    TrayService,
+    WindowService
 };

 export * from "./models.js";
--- a/frontend/bindings/voidraft/internal/services/keybindingservice.ts
+++ b/frontend/bindings/voidraft/internal/services/keybindingservice.ts
@@ -10,38 +10,13 @@
 // @ts-ignore: Unused imports
 import {Call as $Call, Create as $Create} from "@wailsio/runtime";

+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as 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";

-/**
- * DisableKeyBinding 禁用快捷键
- */
-export function DisableKeyBinding(id: string): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1594003006, id) as any;
-    return $resultPromise;
-}
-
-/**
- * EnableKeyBinding 启用快捷键
- */
-export function EnableKeyBinding(id: string): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1462644129, id) as any;
-    return $resultPromise;
-}
-
-/**
- * ExportKeyBindings 导出快捷键配置
- */
-export function ExportKeyBindings(): Promise<models$0.KeyBinding[]> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(4089030977) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType1($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
 /**
 * GetAllKeyBindings 获取所有快捷键配置
 */
@@ -55,126 +30,13 @@ export function GetAllKeyBindings(): Promise<models$0.KeyBinding[]> & { cancel()
 }

 /**
- * GetKeyBindingByAction 根据动作获取快捷键
+ * ServiceStartup 启动时调用
 */
-export function GetKeyBindingByAction(action: models$0.KeyBindingAction): Promise<models$0.KeyBinding | null> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(752637777, action) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType2($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
-/**
- * GetKeyBindingByID 根据ID获取快捷键
- */
-export function GetKeyBindingByID(id: string): Promise<models$0.KeyBinding | null> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1578192526, id) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType2($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
-/**
- * GetKeyBindingCategories 获取所有快捷键分类
- */
-export function GetKeyBindingCategories(): Promise<models$0.KeyBindingCategory[]> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(3141399810) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType3($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
-/**
- * GetKeyBindingConfig 获取完整快捷键配置
- */
-export function GetKeyBindingConfig(): Promise<models$0.KeyBindingConfig | null> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(3804318356) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType5($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
-/**
- * GetKeyBindingScopes 获取所有快捷键作用域
- */
-export function GetKeyBindingScopes(): Promise<models$0.KeyBindingScope[]> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2984736455) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType6($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
-/**
- * GetKeyBindingsByCategory 根据分类获取快捷键
- */
-export function GetKeyBindingsByCategory(category: models$0.KeyBindingCategory): Promise<models$0.KeyBinding[]> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1686146606, category) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType1($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
-/**
- * GetKeyBindingsByScope 根据作用域获取快捷键
- */
-export function GetKeyBindingsByScope(scope: models$0.KeyBindingScope): Promise<models$0.KeyBinding[]> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1179712594, scope) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType1($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
-/**
- * ImportKeyBindings 导入快捷键配置
- */
-export function ImportKeyBindings(keyBindings: models$0.KeyBinding[]): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(642201520, keyBindings) as any;
-    return $resultPromise;
-}
-
-/**
- * ResetAllKeyBindings 重置所有快捷键到默认值
- */
-export function ResetAllKeyBindings(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2771372645) as any;
-    return $resultPromise;
-}
-
-/**
- * ResetKeyBinding 重置快捷键到默认值
- */
-export function ResetKeyBinding(id: string): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(3466323405, id) as any;
-    return $resultPromise;
-}
-
-/**
- * UpdateKeyBinding 更新快捷键
- */
-export function UpdateKeyBinding(id: string, newKey: string): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1469368983, id, newKey) as any;
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2057121990, options) as any;
    return $resultPromise;
 }

 // Private type creation functions
 const $$createType0 = models$0.KeyBinding.createFrom;
 const $$createType1 = $Create.Array($$createType0);
-const $$createType2 = $Create.Nullable($$createType0);
-const $$createType3 = $Create.Array($Create.Any);
-const $$createType4 = models$0.KeyBindingConfig.createFrom;
-const $$createType5 = $Create.Nullable($$createType4);
-const $$createType6 = $Create.Array($Create.Any);
--- a/frontend/bindings/voidraft/internal/services/models.ts
+++ b/frontend/bindings/voidraft/internal/services/models.ts
@@ -5,6 +5,10 @@
 // @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 application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
+
 /**
 * MemoryStats 内存统计信息
 */
@@ -76,19 +80,8 @@ export class MemoryStats {
 * MigrationProgress 迁移进度信息
 */
 export class MigrationProgress {
-    /**
-     * 迁移状态
-     */
    "status": MigrationStatus;
-
-    /**
-     * 进度百分比 (0-100)
-     */
    "progress": number;
-
-    /**
-     * 错误信息
-     */
    "error"?: string;

    /** Creates a new MigrationProgress instance. */
@@ -121,18 +114,130 @@ export enum MigrationStatus {
     */
    $zero = "",

-    /**
-     * 迁移中
-     */
    MigrationStatusMigrating = "migrating",
-
-    /**
-     * 完成
-     */
    MigrationStatusCompleted = "completed",
-
-    /**
-     * 失败
-     */
    MigrationStatusFailed = "failed",
 };
+
+/**
+ * SelfUpdateResult 自我更新结果
+ */
+export class SelfUpdateResult {
+    /**
+     * 是否有更新
+     */
+    "hasUpdate": boolean;
+
+    /**
+     * 当前版本
+     */
+    "currentVersion": string;
+
+    /**
+     * 最新版本
+     */
+    "latestVersion": string;
+
+    /**
+     * 是否已应用更新
+     */
+    "updateApplied": boolean;
+
+    /**
+     * 下载链接
+     */
+    "assetURL": string;
+
+    /**
+     * 发布说明
+     */
+    "releaseNotes": string;
+
+    /**
+     * 错误信息
+     */
+    "error": string;
+
+    /**
+     * 更新源（github/gitea）
+     */
+    "source": string;
+
+    /** Creates a new SelfUpdateResult instance. */
+    constructor($$source: Partial<SelfUpdateResult> = {}) {
+        if (!("hasUpdate" in $$source)) {
+            this["hasUpdate"] = false;
+        }
+        if (!("currentVersion" in $$source)) {
+            this["currentVersion"] = "";
+        }
+        if (!("latestVersion" in $$source)) {
+            this["latestVersion"] = "";
+        }
+        if (!("updateApplied" in $$source)) {
+            this["updateApplied"] = false;
+        }
+        if (!("assetURL" in $$source)) {
+            this["assetURL"] = "";
+        }
+        if (!("releaseNotes" in $$source)) {
+            this["releaseNotes"] = "";
+        }
+        if (!("error" in $$source)) {
+            this["error"] = "";
+        }
+        if (!("source" in $$source)) {
+            this["source"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new SelfUpdateResult instance from a string or object.
+     */
+    static createFrom($$source: any = {}): SelfUpdateResult {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new SelfUpdateResult($$parsedSource as Partial<SelfUpdateResult>);
+    }
+}
+
+/**
+ * WindowInfo 窗口信息
+ */
+export class WindowInfo {
+    "Window": application$0.WebviewWindow | null;
+    "DocumentID": number;
+    "Title": string;
+
+    /** Creates a new WindowInfo instance. */
+    constructor($$source: Partial<WindowInfo> = {}) {
+        if (!("Window" in $$source)) {
+            this["Window"] = null;
+        }
+        if (!("DocumentID" in $$source)) {
+            this["DocumentID"] = 0;
+        }
+        if (!("Title" in $$source)) {
+            this["Title"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new WindowInfo instance from a string or object.
+     */
+    static createFrom($$source: any = {}): WindowInfo {
+        const $$createField0_0 = $$createType1;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("Window" in $$parsedSource) {
+            $$parsedSource["Window"] = $$createField0_0($$parsedSource["Window"]);
+        }
+        return new WindowInfo($$parsedSource as Partial<WindowInfo>);
+    }
+}
+
+// Private type creation functions
+const $$createType0 = application$0.WebviewWindow.createFrom;
+const $$createType1 = $Create.Nullable($$createType0);
--- a/frontend/bindings/voidraft/internal/services/selfupdateservice.ts
+++ b/frontend/bindings/voidraft/internal/services/selfupdateservice.ts
@@ -0,0 +1,51 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * SelfUpdateService 自我更新服务
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as $models from "./models.js";
+
+/**
+ * ApplyUpdate 应用更新
+ */
+export function ApplyUpdate(): Promise<$models.SelfUpdateResult | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2009328394) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * CheckForUpdates 检查更新
+ */
+export function CheckForUpdates(): Promise<$models.SelfUpdateResult | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(438757208) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * RestartApplication 重启应用程序
+ */
+export function RestartApplication(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3341481538) as any;
+    return $resultPromise;
+}
+
+// Private type creation functions
+const $$createType0 = $models.SelfUpdateResult.createFrom;
+const $$createType1 = $Create.Nullable($$createType0);
--- a/frontend/bindings/voidraft/internal/services/startupservice.ts
+++ b/frontend/bindings/voidraft/internal/services/startupservice.ts
@@ -0,0 +1,19 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * StartupService 开机启动服务
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+/**
+ * SetEnabled 设置开机启动状态
+ */
+export function SetEnabled(enabled: boolean): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2911601468, enabled) as any;
+    return $resultPromise;
+}
--- a/frontend/bindings/voidraft/internal/services/translationservice.ts
+++ b/frontend/bindings/voidraft/internal/services/translationservice.ts
@@ -0,0 +1,78 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * TranslationService 翻译服务
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as translator$0 from "../common/translator/models.js";
+
+/**
+ * GetAvailableTranslators 获取所有可用翻译器类型
+ * @returns {[]string} 翻译器类型列表
+ */
+export function GetAvailableTranslators(): Promise<string[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1186597995) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType0($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * GetStandardLanguageCode 获取标准化的语言代码
+ */
+export function GetStandardLanguageCode(translatorType: translator$0.TranslatorType, languageCode: string): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1158131995, translatorType, languageCode) as any;
+    return $resultPromise;
+}
+
+/**
+ * GetTranslatorLanguages 获取翻译器的语言列表
+ * @param {string} translatorType - 翻译器类型 ("google", "bing", "youdao", "deepl")
+ * @returns {map[string]string} 语言代码到名称的映射
+ * @returns {error} 可能的错误
+ */
+export function GetTranslatorLanguages(translatorType: translator$0.TranslatorType): Promise<{ [_: string]: translator$0.LanguageInfo }> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3976114458, translatorType) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType2($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * IsLanguageSupported 检查指定的语言代码是否受支持
+ */
+export function IsLanguageSupported(translatorType: translator$0.TranslatorType, languageCode: string): Promise<boolean> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2819945417, translatorType, languageCode) as any;
+    return $resultPromise;
+}
+
+/**
+ * TranslateWith 使用指定翻译器进行翻译
+ * @param {string} text - 待翻译文本
+ * @param {string} from - 源语言代码 (如 "en", "zh", "auto")
+ * @param {string} to - 目标语言代码 (如 "en", "zh")
+ * @param {string} translatorType - 翻译器类型 ("google", "bing", "youdao", "deepl")
+ * @returns {string} 翻译后的文本
+ * @returns {error} 可能的错误
+ */
+export function TranslateWith(text: string, $from: string, to: string, translatorType: string): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3577923623, text, $from, to, translatorType) as any;
+    return $resultPromise;
+}
+
+// Private type creation functions
+const $$createType0 = $Create.Array($Create.Any);
+const $$createType1 = translator$0.LanguageInfo.createFrom;
+const $$createType2 = $Create.Map($Create.Any, $$createType1);
--- a/frontend/bindings/voidraft/internal/services/windowservice.ts
+++ b/frontend/bindings/voidraft/internal/services/windowservice.ts
@@ -0,0 +1,59 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * WindowService 窗口管理服务
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as 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 from "./models.js";
+
+/**
+ * GetOpenWindows 获取所有打开的窗口信息
+ */
+export function GetOpenWindows(): Promise<$models.WindowInfo[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1464997251) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * IsDocumentWindowOpen 检查指定文档的窗口是否已打开
+ */
+export function IsDocumentWindowOpen(documentID: number): Promise<boolean> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1735611839, documentID) as any;
+    return $resultPromise;
+}
+
+/**
+ * OpenDocumentWindow 为指定文档ID打开新窗口
+ */
+export function OpenDocumentWindow(documentID: number): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(494716471, documentID) as any;
+    return $resultPromise;
+}
+
+/**
+ * SetAppReferences 设置应用和主窗口引用
+ */
+export function SetAppReferences(app: application$0.App | null, mainWindow: application$0.WebviewWindow | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1120840759, app, mainWindow) as any;
+    return $resultPromise;
+}
+
+// Private type creation functions
+const $$createType0 = $models.WindowInfo.createFrom;
+const $$createType1 = $Create.Array($$createType0);
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -9,7 +9,9 @@ export {}
 declare module 'vue' {
  export interface GlobalComponents {
    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']
+    LoadingScreen: typeof import('./src/components/loading/LoadingScreen.vue')['default']
    MacOSTitleBar: typeof import('./src/components/titlebar/MacOSTitleBar.vue')['default']
    MemoryMonitor: typeof import('./src/components/monitor/MemoryMonitor.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,65 +15,67 @@
    "@codemirror/autocomplete": "^6.18.6",
    "@codemirror/commands": "^6.8.1",
    "@codemirror/lang-angular": "^0.1.4",
-    "@codemirror/lang-cpp": "^6.0.2",
+    "@codemirror/lang-cpp": "^6.0.3",
    "@codemirror/lang-css": "^6.3.1",
    "@codemirror/lang-go": "^6.0.1",
    "@codemirror/lang-html": "^6.4.9",
-    "@codemirror/lang-java": "^6.0.1",
+    "@codemirror/lang-java": "^6.0.2",
    "@codemirror/lang-javascript": "^6.2.4",
-    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-json": "^6.0.2",
    "@codemirror/lang-less": "^6.0.2",
-    "@codemirror/lang-lezer": "^6.0.1",
+    "@codemirror/lang-lezer": "^6.0.2",
    "@codemirror/lang-liquid": "^6.2.3",
    "@codemirror/lang-markdown": "^6.3.3",
-    "@codemirror/lang-php": "^6.0.1",
+    "@codemirror/lang-php": "^6.0.2",
    "@codemirror/lang-python": "^6.2.1",
-    "@codemirror/lang-rust": "^6.0.1",
+    "@codemirror/lang-rust": "^6.0.2",
    "@codemirror/lang-sass": "^6.0.2",
    "@codemirror/lang-sql": "^6.9.0",
    "@codemirror/lang-vue": "^0.1.3",
    "@codemirror/lang-wast": "^6.0.2",
    "@codemirror/lang-xml": "^6.1.0",
    "@codemirror/lang-yaml": "^6.1.2",
-    "@codemirror/language": "^6.11.1",
+    "@codemirror/language": "^6.11.2",
    "@codemirror/language-data": "^6.5.1",
    "@codemirror/legacy-modes": "^6.5.1",
    "@codemirror/lint": "^6.8.5",
    "@codemirror/search": "^6.5.11",
    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.37.2",
+    "@codemirror/view": "^6.38.1",
    "@lezer/highlight": "^1.2.1",
    "@lezer/lr": "^1.4.2",
-    "@types/uuid": "^10.0.0",
-    "@vueuse/core": "^13.3.0",
-    "codemirror": "^6.0.1",
+    "codemirror": "^6.0.2",
    "codemirror-lang-elixir": "^4.0.0",
    "colors-named": "^1.0.2",
    "colors-named-hex": "^1.0.2",
+    "franc-min": "^6.2.0",
    "hsl-matcher": "^1.2.4",
    "lezer": "^0.13.5",
    "pinia": "^3.0.3",
-    "prettier": "^3.5.3",
+    "pinia-plugin-persistedstate": "^4.4.1",
+    "prettier": "^3.6.2",
+    "remarkable": "^2.0.1",
    "sass": "^1.89.2",
-    "uuid": "^11.1.0",
    "vue": "^3.5.17",
-    "vue-i18n": "^11.1.6",
+    "vue-i18n": "^11.1.10",
+    "vue-pick-colors": "^1.8.0",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
-    "@eslint/js": "^9.29.0",
-    "@lezer/generator": "^1.7.3",
-    "@types/node": "^24.0.3",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@eslint/js": "^9.31.0",
+    "@lezer/generator": "^1.8.0",
+    "@types/node": "^24.0.14",
+    "@types/remarkable": "^2.0.8",
+    "@vitejs/plugin-vue": "^6.0.0",
    "@wailsio/runtime": "latest",
-    "eslint": "^9.29.0",
-    "eslint-plugin-vue": "^10.2.0",
-    "globals": "^16.2.0",
+    "eslint": "^9.31.0",
+    "eslint-plugin-vue": "^10.3.0",
+    "globals": "^16.3.0",
    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.34.1",
-    "unplugin-vue-components": "^28.7.0",
-    "vite": "^6.3.5",
-    "vue-eslint-parser": "^10.1.3",
-    "vue-tsc": "^2.2.10"
+    "typescript-eslint": "^8.37.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^7.0.4",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.0.1"
  }
 }
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,27 +1,44 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import { useConfigStore } from '@/stores/configStore';
-import { useSystemStore } from '@/stores/systemStore';
+import {onMounted} from 'vue';
+import {useConfigStore} from '@/stores/configStore';
+import {useSystemStore} from '@/stores/systemStore';
+import {useKeybindingStore} from '@/stores/keybindingStore';
+import {useThemeStore} from '@/stores/themeStore';
+import {useUpdateStore} from '@/stores/updateStore';
+import {useBackupStore} from '@/stores/backupStore';
 import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';

 const configStore = useConfigStore();
 const systemStore = useSystemStore();
+const keybindingStore = useKeybindingStore();
+const themeStore = useThemeStore();
+const updateStore = useUpdateStore();
+const backupStore = useBackupStore();

 // 应用启动时加载配置和初始化系统信息
 onMounted(async () => {
-  // 并行初始化配置和系统信息
+  // 并行初始化配置、系统信息和快捷键配置
  await Promise.all([
    configStore.initConfig(),
    systemStore.initializeSystemInfo(),
+    keybindingStore.loadKeyBindings(),
  ]);
  
+  // 初始化语言和主题
  await configStore.initializeLanguage();
+  themeStore.initializeTheme();
+  
+  // 初始化备份服务
+  await backupStore.initialize();
+  
+  // 启动时检查更新
+  await updateStore.checkOnStartup();
 });
 </script>

 <template>
  <div class="app-container">
-    <WindowTitleBar />
+    <WindowTitleBar/>
    <div class="app-content">
      <router-view/>
    </div>
--- a/frontend/src/assets/styles/variables.css
+++ b/frontend/src/assets/styles/variables.css
@@ -23,6 +23,16 @@
  --dark-scrollbar-track: #2a2a2a;
  --dark-scrollbar-thumb: #555555;
  --dark-scrollbar-thumb-hover: #666666;
+  --dark-selection-bg: rgba(181, 206, 168, 0.1);
+  --dark-selection-text: #b5cea8;
+  --dark-danger-color: #ff6b6b;
+  --dark-bg-primary: #1a1a1a;
+  --dark-bg-hover: #2a2a2a;
+  --dark-loading-bg-gradient: radial-gradient(#222922, #000500);
+  --dark-loading-color: #fff;
+  --dark-loading-glow: 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5);
+  --dark-loading-done-color: #6f6;
+  --dark-loading-overlay: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
  
  /* 浅色主题颜色变量 */
  --light-toolbar-bg: #f8f9fa;
@@ -45,6 +55,16 @@
  --light-scrollbar-track: #f1f3f4;
  --light-scrollbar-thumb: #c1c1c1;
  --light-scrollbar-thumb-hover: #a8a8a8;
+  --light-selection-bg: rgba(59, 130, 246, 0.15);
+  --light-selection-text: #2563eb;
+  --light-danger-color: #dc3545;
+  --light-bg-primary: #ffffff;
+  --light-bg-hover: #f1f3f4;
+  --light-loading-bg-gradient: radial-gradient(#f0f6f0, #e5efe5);
+  --light-loading-color: #1a3c1a;
+  --light-loading-glow: 0 0 10px rgba(0, 160, 0, 0.3), 0 0 5px rgba(0, 120, 0, 0.2);
+  --light-loading-done-color: #008800;
+  --light-loading-overlay: linear-gradient(transparent 0%, rgba(220, 240, 220, 0.5) 50%);
  
  /* 默认使用深色主题 */
  --toolbar-bg: var(--dark-toolbar-bg);
@@ -68,6 +88,17 @@
  --scrollbar-track: var(--dark-scrollbar-track);
  --scrollbar-thumb: var(--dark-scrollbar-thumb);
  --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
+  --selection-bg: var(--dark-selection-bg);
+  --selection-text: var(--dark-selection-text);
+  --text-danger: var(--dark-danger-color);
+  --bg-primary: var(--dark-bg-primary);
+  --bg-hover: var(--dark-bg-hover);
+  --voidraft-bg-gradient: var(--dark-loading-bg-gradient);
+  --voidraft-loading-color: var(--dark-loading-color);
+  --voidraft-loading-glow: var(--dark-loading-glow);
+  --voidraft-loading-done-color: var(--dark-loading-done-color);
+  --voidraft-loading-overlay: var(--dark-loading-overlay);
+  --voidraft-mono-font: "HarmonyOS Sans Mono", monospace;
  
  color-scheme: light dark;
 }
@@ -96,6 +127,16 @@
    --scrollbar-track: var(--dark-scrollbar-track);
    --scrollbar-thumb: var(--dark-scrollbar-thumb);
    --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
+    --selection-bg: var(--dark-selection-bg);
+    --selection-text: var(--dark-selection-text);
+    --text-danger: var(--dark-danger-color);
+    --bg-primary: var(--dark-bg-primary);
+    --bg-hover: var(--dark-bg-hover);
+    --voidraft-bg-gradient: var(--dark-loading-bg-gradient);
+    --voidraft-loading-color: var(--dark-loading-color);
+    --voidraft-loading-glow: var(--dark-loading-glow);
+    --voidraft-loading-done-color: var(--dark-loading-done-color);
+    --voidraft-loading-overlay: var(--dark-loading-overlay);
  }
 }

@@ -123,6 +164,16 @@
    --scrollbar-track: var(--light-scrollbar-track);
    --scrollbar-thumb: var(--light-scrollbar-thumb);
    --scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
+    --selection-bg: var(--light-selection-bg);
+    --selection-text: var(--light-selection-text);
+    --text-danger: var(--light-danger-color);
+    --bg-primary: var(--light-bg-primary);
+    --bg-hover: var(--light-bg-hover);
+    --voidraft-bg-gradient: var(--light-loading-bg-gradient);
+    --voidraft-loading-color: var(--light-loading-color);
+    --voidraft-loading-glow: var(--light-loading-glow);
+    --voidraft-loading-done-color: var(--light-loading-done-color);
+    --voidraft-loading-overlay: var(--light-loading-overlay);
  }
 }

@@ -149,6 +200,16 @@
  --scrollbar-track: var(--light-scrollbar-track);
  --scrollbar-thumb: var(--light-scrollbar-thumb);
  --scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
+  --selection-bg: var(--light-selection-bg);
+  --selection-text: var(--light-selection-text);
+  --text-danger: var(--light-danger-color);
+  --bg-primary: var(--light-bg-primary);
+  --bg-hover: var(--light-bg-hover);
+  --voidraft-bg-gradient: var(--light-loading-bg-gradient);
+  --voidraft-loading-color: var(--light-loading-color);
+  --voidraft-loading-glow: var(--light-loading-glow);
+  --voidraft-loading-done-color: var(--light-loading-done-color);
+  --voidraft-loading-overlay: var(--light-loading-overlay);
 }

 /* 手动选择深色主题 */
@@ -174,4 +235,14 @@
  --scrollbar-track: var(--dark-scrollbar-track);
  --scrollbar-thumb: var(--dark-scrollbar-thumb);
  --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
+  --selection-bg: var(--dark-selection-bg);
+  --selection-text: var(--dark-selection-text);
+  --text-danger: var(--dark-danger-color);
+  --bg-primary: var(--dark-bg-primary);
+  --bg-hover: var(--dark-bg-hover);
+  --voidraft-bg-gradient: var(--dark-loading-bg-gradient);
+  --voidraft-loading-color: var(--dark-loading-color);
+  --voidraft-loading-glow: var(--dark-loading-glow);
+  --voidraft-loading-done-color: var(--dark-loading-done-color);
+  --voidraft-loading-overlay: var(--dark-loading-overlay);
 }
--- a/frontend/src/components/loading/LoadingScreen.vue
+++ b/frontend/src/components/loading/LoadingScreen.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: 'LOADING'
+  }
+});
+
+const characters = ref<HTMLSpanElement[]>([]);
+const isDone = ref(false);
+const cycleCount = 5;
+const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-_=+{}|[]\\;\':"<>?,./`~'.split('');
+let animationFrameId: number | null = null;
+let resetTimeoutId: number | null = null;
+
+// 将字符串拆分为单个字符的span
+function letterize() {
+  const container = document.querySelector('.loading-word');
+  if (!container) return;
+  
+  // 清除现有内容
+  container.innerHTML = '';
+  
+  // 为每个字符创建span
+  for (let i = 0; i < props.text.length; i++) {
+    const span = document.createElement('span');
+    span.setAttribute('data-orig', props.text[i]);
+    span.textContent = '-';
+    span.className = `char${i+1}`;
+    container.appendChild(span);
+  }
+  
+  // 获取所有span元素
+  characters.value = Array.from(container.querySelectorAll('span'));
+}
+
+// 获取随机字符
+function getRandomChar() {
+  return chars[Math.floor(Math.random() * chars.length)];
+}
+
+// 动画循环
+function animationLoop() {
+  let currentCycle = 0;
+  let currentLetterIndex = 0;
+  let isAnimationDone = false;
+  
+  function loop() {
+    // 为未完成的字符设置随机字符和不透明度
+    for (let i = currentLetterIndex; i < characters.value.length; i++) {
+      const char = characters.value[i];
+      if (!char.classList.contains('done')) {
+        char.textContent = getRandomChar();
+        char.style.opacity = Math.random().toString();
+      }
+    }
+    
+    if (currentCycle < cycleCount) {
+      // 继续当前周期
+      currentCycle++;
+    } else if (currentLetterIndex < characters.value.length) {
+      // 当前周期结束，显示下一个字符的原始值
+      const currentChar = characters.value[currentLetterIndex];
+      currentChar.textContent = currentChar.getAttribute('data-orig') || '';
+      currentChar.style.opacity = '1';
+      currentChar.classList.add('done');
+      currentLetterIndex++;
+      currentCycle = 0;
+    } else {
+      // 所有字符都已显示
+      isAnimationDone = true;
+      isDone.value = true;
+    }
+    
+    if (!isAnimationDone) {
+      animationFrameId = requestAnimationFrame(loop);
+    } else {
+      // 等待一段时间后重置动画
+      resetTimeoutId = window.setTimeout(() => {
+        reset();
+      }, 750);
+    }
+  }
+  
+  loop();
+}
+
+// 重置动画
+function reset() {
+  isDone.value = false;
+  
+  for (const char of characters.value) {
+    char.textContent = char.getAttribute('data-orig') || '';
+    char.classList.remove('done');
+  }
+  
+  animationLoop();
+}
+
+// 清理所有定时器
+function cleanup() {
+  if (animationFrameId !== null) {
+    cancelAnimationFrame(animationFrameId);
+    animationFrameId = null;
+  }
+  
+  if (resetTimeoutId !== null) {
+    clearTimeout(resetTimeoutId);
+    resetTimeoutId = null;
+  }
+}
+
+onMounted(() => {
+  letterize();
+  animationLoop();
+});
+
+onBeforeUnmount(() => {
+  cleanup();
+});
+</script>
+
+<template>
+  <div class="loading-screen">
+    <div class="loading-word"></div>
+    <div class="overlay"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.loading-screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--voidraft-bg-gradient, radial-gradient(#222922, #000500));
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--voidraft-mono-font, monospace),serif;
+}
+
+.loading-word {
+  color: var(--voidraft-loading-color, #fff);
+  font-size: 2.5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  text-align: center;
+  text-shadow: var(--voidraft-loading-glow, 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5));
+}
+
+.loading-word span {
+  display: inline-block;
+  transform: translateX(100%) scale(0.9);
+  transition: transform 500ms;
+}
+
+.loading-word .done {
+  color: var(--voidraft-loading-done-color, #6f6);
+  transform: translateX(0) scale(1);
+}
+
+.overlay {
+  background-image: var(--voidraft-loading-overlay, linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%));
+  background-size: 1000px 2px;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+}
+</style> 
--- a/frontend/src/components/monitor/MemoryMonitor.vue
+++ b/frontend/src/components/monitor/MemoryMonitor.vue
@@ -1,18 +1,40 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
 import { SystemService } from '@/../bindings/voidraft/internal/services';
 import type { MemoryStats } from '@/../bindings/voidraft/internal/services';
+import { useI18n } from 'vue-i18n';
+import { useThemeStore } from '@/stores/themeStore';
+import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models';

+const { t } = useI18n();
+const themeStore = useThemeStore();
 const memoryStats = ref<MemoryStats | null>(null);
 const formattedMemory = ref('');
 const isLoading = ref(true);
 const canvasRef = ref<HTMLCanvasElement | null>(null);
 let intervalId: ReturnType<typeof setInterval> | null = null;

-// 存储历史数据点 (最近60个数据点，每3秒一个点，总共3分钟历史)
+// 存储历史数据点 (最近60个数据点)
 const historyData = ref<number[]>([]);
 const maxDataPoints = 60;

+// 动态最大内存值（MB），初始为200MB，会根据实际使用动态调整
+const maxMemoryMB = ref(200);
+
+// 使用themeStore获取当前主题
+const isDarkTheme = computed(() => {
+  const theme = themeStore.currentTheme;
+  if (theme === SystemThemeType.SystemThemeAuto) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+  return theme === SystemThemeType.SystemThemeDark;
+});
+
+// 监听主题变化，重新绘制图表
+watch(() => themeStore.currentTheme, () => {
+  nextTick(() => drawChart());
+});
+
 // 静默错误处理包装器
 const withSilentErrorHandling = async <T>(
  operation: () => Promise<T>,
@@ -47,8 +69,14 @@ const fetchMemoryStats = async () => {
      formattedMemory.value = `${heapMB.toFixed(0)}M`;
    }
    
-    // 添加新数据点到历史记录
-    const memoryUsagePercent = Math.min((stats.heapInUse / (100 * 1024 * 1024)) * 100, 100);
+    // 自动调整最大内存值，确保图表能够显示更大范围
+    if (heapMB > maxMemoryMB.value * 0.8) {
+      // 如果内存使用超过当前最大值的80%，则将最大值调整为当前使用值的2倍
+      maxMemoryMB.value = Math.ceil(heapMB * 2);
+    }
+    
+    // 添加新数据点到历史记录 - 使用动态最大值计算百分比
+    const memoryUsagePercent = Math.min((heapMB / maxMemoryMB.value) * 100, 100);
    historyData.value.push(memoryUsagePercent);
    
    // 保持最大数据点数量
@@ -62,7 +90,7 @@ const fetchMemoryStats = async () => {
    isLoading.value = false;
 };

-// 绘制实时曲线图
+// 绘制实时曲线图 - 简化版
 const drawChart = () => {
  if (!canvasRef.value || historyData.value.length === 0) return;
  
@@ -82,11 +110,16 @@ const drawChart = () => {
  // 清除画布
  ctx.clearRect(0, 0, width, height);
  
-  // 绘制背景网格 - 朦胧的网格，从上到下逐渐清晰
-  for (let i = 0; i <= 6; i++) {
-    const y = (height / 6) * i;
-    const opacity = 0.01 + (i / 6) * 0.03; // 从上到下逐渐清晰
-    ctx.strokeStyle = `rgba(255, 255, 255, ${opacity})`;
+  // 根据主题选择合适的颜色 - 更柔和的颜色
+  const gridColor = isDarkTheme.value ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.07)';
+  const lineColor = isDarkTheme.value ? 'rgba(74, 158, 255, 0.6)' : 'rgba(37, 99, 235, 0.6)';
+  const fillColor = isDarkTheme.value ? 'rgba(74, 158, 255, 0.05)' : 'rgba(37, 99, 235, 0.05)';
+  const pointColor = isDarkTheme.value ? 'rgba(74, 158, 255, 0.8)' : 'rgba(37, 99, 235, 0.8)';
+  
+  // 绘制背景网格 - 更加柔和
+  for (let i = 0; i <= 4; i++) {
+    const y = (height / 4) * i;
+    ctx.strokeStyle = gridColor;
    ctx.lineWidth = 0.5;
    ctx.beginPath();
    ctx.moveTo(0, y);
@@ -95,9 +128,9 @@ const drawChart = () => {
  }
  
  // 垂直网格线
-  for (let i = 0; i <= 8; i++) {
-    const x = (width / 8) * i;
-    ctx.strokeStyle = 'rgba(255, 255, 255, 0.02)';
+  for (let i = 0; i <= 6; i++) {
+    const x = (width / 6) * i;
+    ctx.strokeStyle = gridColor;
    ctx.lineWidth = 0.5;
    ctx.beginPath();
    ctx.moveTo(x, 0);
@@ -112,13 +145,7 @@ const drawChart = () => {
  const stepX = width / (maxDataPoints - 1);
  const startX = width - (dataLength - 1) * stepX;
  
-  // 绘制填充区域 - 从上朦胧到下清晰的渐变
-  const gradient = ctx.createLinearGradient(0, 0, 0, height);
-  gradient.addColorStop(0, 'rgba(74, 158, 255, 0.1)'); // 顶部很淡
-  gradient.addColorStop(0.3, 'rgba(74, 158, 255, 0.15)');
-  gradient.addColorStop(0.7, 'rgba(74, 158, 255, 0.25)');
-  gradient.addColorStop(1, 'rgba(74, 158, 255, 0.4)'); // 底部较浓
-  
+  // 绘制填充区域 - 更柔和的填充
  ctx.beginPath();
  ctx.moveTo(startX, height);
  
@@ -126,17 +153,23 @@ const drawChart = () => {
  const firstY = height - (historyData.value[0] / 100) * height;
  ctx.lineTo(startX, firstY);
  
-  // 使用二次贝塞尔曲线平滑曲线
+  // 绘制数据点路径 - 使用曲线连接点，确保连续性
  for (let i = 1; i < dataLength; i++) {
    const x = startX + i * stepX;
    const y = height - (historyData.value[i] / 100) * height;
    
+    // 使用贝塞尔曲线平滑连接
    if (i < dataLength - 1) {
      const nextX = startX + (i + 1) * stepX;
      const nextY = height - (historyData.value[i + 1] / 100) * height;
-      const controlX = x + stepX / 2;
-      const controlY = y;
-      ctx.quadraticCurveTo(controlX, controlY, (x + nextX) / 2, (y + nextY) / 2);
+      const cpX1 = x - stepX / 4;
+      const cpY1 = y;
+      const cpX2 = x + stepX / 4;
+      const cpY2 = nextY;
+      
+      // 使用三次贝塞尔曲线平滑连接点
+      ctx.bezierCurveTo(cpX1, cpY1, cpX2, cpY2, nextX, nextY);
+      i++; // 跳过下一个点，因为已经在曲线中处理了
    } else {
      ctx.lineTo(x, y);
    }
@@ -146,68 +179,55 @@ const drawChart = () => {
  const lastX = startX + (dataLength - 1) * stepX;
  ctx.lineTo(lastX, height);
  ctx.closePath();
-  ctx.fillStyle = gradient;
+  ctx.fillStyle = fillColor;
  ctx.fill();
  
-  // 绘制主曲线 - 从上到下逐渐清晰
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
+  // 绘制主曲线 - 平滑连续的曲线
+  ctx.beginPath();
+  ctx.moveTo(startX, firstY);
  
-  // 分段绘制曲线，每段有不同的透明度
-  const segments = 10;
-  for (let seg = 0; seg < segments; seg++) {
-    const segmentStart = seg / segments;
-    const segmentEnd = (seg + 1) / segments;
-    const opacity = 0.3 + (seg / segments) * 0.7; // 从上0.3到下1.0
+  // 重新绘制曲线路径，但这次只绘制线条
+  for (let i = 1; i < dataLength; i++) {
+    const x = startX + i * stepX;
+    const y = height - (historyData.value[i] / 100) * height;
    
-    ctx.strokeStyle = `rgba(74, 158, 255, ${opacity})`;
-    ctx.lineWidth = 1.5 + (seg / segments) * 0.8; // 线条也从细到粗
-    
-    ctx.beginPath();
-    let segmentStarted = false;
-    
-    for (let i = 0; i < dataLength; i++) {
-      const x = startX + i * stepX;
-      const y = height - (historyData.value[i] / 100) * height;
-      const yPercent = 1 - (y / height);
+    // 使用贝塞尔曲线平滑连接
+    if (i < dataLength - 1) {
+      const nextX = startX + (i + 1) * stepX;
+      const nextY = height - (historyData.value[i + 1] / 100) * height;
+      const cpX1 = x - stepX / 4;
+      const cpY1 = y;
+      const cpX2 = x + stepX / 4;
+      const cpY2 = nextY;
      
-      if (yPercent >= segmentStart && yPercent <= segmentEnd) {
-        if (!segmentStarted) {
-          ctx.moveTo(x, y);
-          segmentStarted = true;
-        } else {
-          if (i < dataLength - 1) {
-            const nextX = startX + (i + 1) * stepX;
-            const nextY = height - (historyData.value[i + 1] / 100) * height;
-            const controlX = x + stepX / 2;
-            const controlY = y;
-            ctx.quadraticCurveTo(controlX, controlY, (x + nextX) / 2, (y + nextY) / 2);
-          } else {
-            ctx.lineTo(x, y);
-          }
-        }
-      }
-    }
-    
-    if (segmentStarted) {
-      ctx.stroke();
+      // 使用三次贝塞尔曲线平滑连接点
+      ctx.bezierCurveTo(cpX1, cpY1, cpX2, cpY2, nextX, nextY);
+      i++; // 跳过下一个点，因为已经在曲线中处理了
+    } else {
+      ctx.lineTo(x, y);
    }
  }
  
-  // 绘制当前值的高亮点 - 根据位置调整透明度
+  ctx.strokeStyle = lineColor;
+  ctx.lineWidth = 1.5;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.stroke();
+  
+  // 绘制当前值的高亮点
  const lastY = height - (historyData.value[dataLength - 1] / 100) * height;
-  const pointOpacity = 0.4 + (1 - lastY / height) * 0.6;
  
  // 外圈
-  ctx.fillStyle = `rgba(74, 158, 255, ${pointOpacity * 0.3})`;
+  ctx.fillStyle = pointColor;
+  ctx.globalAlpha = 0.4;
  ctx.beginPath();
-  ctx.arc(lastX, lastY, 4, 0, Math.PI * 2);
+  ctx.arc(lastX, lastY, 3, 0, Math.PI * 2);
  ctx.fill();
  
  // 内圈
-  ctx.fillStyle = `rgba(74, 158, 255, ${pointOpacity})`;
+  ctx.globalAlpha = 1;
  ctx.beginPath();
-  ctx.arc(lastX, lastY, 2, 0, Math.PI * 2);
+  ctx.arc(lastX, lastY, 1.5, 0, Math.PI * 2);
  ctx.fill();
 };

@@ -228,31 +248,59 @@ const handleResize = () => {
  }
 };

+// 仅监听系统主题变化
+const setupSystemThemeListener = () => {
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  const handleSystemThemeChange = () => {
+    // 仅当设置为auto时才响应系统主题变化
+    if (themeStore.currentTheme === SystemThemeType.SystemThemeAuto) {
+      nextTick(() => drawChart());
+    }
+  };
+
+  // 添加监听器
+  if (mediaQuery.addEventListener) {
+    mediaQuery.addEventListener('change', handleSystemThemeChange);
+  }
+
+  // 返回清理函数
+  return () => {
+    if (mediaQuery.removeEventListener) {
+      mediaQuery.removeEventListener('change', handleSystemThemeChange);
+    }
+  };
+};
+
 onMounted(() => {
  fetchMemoryStats();
-  // 每3秒更新一次内存信息
+  // 每1秒更新一次内存信息
  intervalId = setInterval(fetchMemoryStats, 3000);
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
-});
-
-onUnmounted(() => {
-  if (intervalId) {
-    clearInterval(intervalId);
-  }
-  window.removeEventListener('resize', handleResize);
+  
+  // 设置系统主题监听器（仅用于auto模式）
+  const cleanupThemeListener = setupSystemThemeListener();
+  
+  // 在卸载时清理
+  onUnmounted(() => {
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
+    window.removeEventListener('resize', handleResize);
+    cleanupThemeListener();
+  });
 });
 </script>

 <template>
-  <div class="memory-monitor" @click="triggerGC" :title="`内存: ${formattedMemory} | 点击清理内存`">
+  <div class="memory-monitor" @click="triggerGC" :title="`${t('monitor.memory')}: ${formattedMemory} | ${t('monitor.clickToClean')}`">
    <div class="monitor-info">
      <div class="memory-label">
        <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="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
        </svg>
-        <span>内存</span>
+        <span>{{ t('monitor.memory') }}</span>
      </div>
      <div class="memory-value" v-if="!isLoading">{{ formattedMemory }}</div>
      <div class="memory-loading" v-else>--</div>
@@ -279,11 +327,11 @@ onUnmounted(() => {
  &:hover {
    .monitor-info {
      .memory-label {
-        color: #4a9eff;
+        color: var(--selection-text);
      }
      
      .memory-value {
-        color: #ffffff;
+        color: var(--toolbar-text);
      }
    }
    
@@ -301,7 +349,7 @@ onUnmounted(() => {
      display: flex;
      align-items: center;
      gap: 4px;
-      color: #a0a0a0;
+      color: var(--text-secondary);
      font-size: 10px;
      font-weight: 500;
      transition: color 0.2s ease;
@@ -318,7 +366,7 @@ onUnmounted(() => {
    }
    
    .memory-value, .memory-loading {
-      color: #e0e0e0;
+      color: var(--toolbar-text-secondary);
      font-family: 'JetBrains Mono', 'Courier New', monospace;
      font-size: 9px;
      font-weight: 600;
--- a/frontend/src/components/titlebar/LinuxTitleBar.vue
+++ b/frontend/src/components/titlebar/LinuxTitleBar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="linux-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState" @mouseup="checkMaximizedState">
+  <div class="linux-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
      <div class="titlebar-icon">
        <img src="/appicon.png" alt="voidraft" />
      </div>
-      <div class="titlebar-title">voidraft</div>
+      <div class="titlebar-title">{{ titleText }}</div>
    </div>
    
    <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
@@ -46,12 +46,15 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import * as runtime from '@wailsio/runtime';
+import { useWindowStore } from '@/stores/windowStore';
+import { useDocumentStore } from '@/stores/documentStore';

 const { t } = useI18n();
 const isMaximized = ref(false);
+const documentStore = useDocumentStore();

 const minimizeWindow = async () => {
  try {
@@ -96,6 +99,12 @@ const checkMaximizedState = async () => {
  }
 };

+// 计算标题文本
+const titleText = computed(() => {
+  const currentDoc = documentStore.currentDocument;
+  return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
+});
+
 onMounted(async () => {
  await checkMaximizedState();
  
@@ -285,4 +294,4 @@ onUnmounted(() => {
    }
  }
 }
-</style> 
+</style>
--- a/frontend/src/components/titlebar/MacOSTitleBar.vue
+++ b/frontend/src/components/titlebar/MacOSTitleBar.vue
@@ -44,19 +44,22 @@
    </div>
    
    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
-      <div class="titlebar-title">voidraft</div>
+      <div class="titlebar-title">{{ titleText }}</div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import * as runtime from '@wailsio/runtime';
+import { useWindowStore } from '@/stores/windowStore';
+import { useDocumentStore } from '@/stores/documentStore';

 const { t } = useI18n();
 const isMaximized = ref(false);
 const showControlIcons = ref(false);
+const documentStore = useDocumentStore();

 const minimizeWindow = async () => {
  try {
@@ -101,6 +104,12 @@ const checkMaximizedState = async () => {
  }
 };

+// 计算标题文本
+const titleText = computed(() => {
+  const currentDoc = documentStore.currentDocument;
+  return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
+});
+
 onMounted(async () => {
  await checkMaximizedState();
  
@@ -259,4 +268,4 @@ onUnmounted(() => {
    color: rgba(255, 255, 255, 0.8);
  }
 }
-</style> 
+</style>
--- a/frontend/src/components/titlebar/WindowsTitleBar.vue
+++ b/frontend/src/components/titlebar/WindowsTitleBar.vue
@@ -1,11 +1,10 @@
 <template>
-  <div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState"
-       @mouseup="checkMaximizedState">
+  <div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
      <div class="titlebar-icon">
        <img src="/appicon.png" alt="voidraft"/>
      </div>
-      <div class="titlebar-title">voidraft</div>
+      <div class="titlebar-title">{{ titleText }}</div>
    </div>

    <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
@@ -40,13 +39,22 @@
 import {computed, onMounted, onUnmounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
 import * as runtime from '@wailsio/runtime';
+import { useWindowStore } from '@/stores/windowStore';
+import { useDocumentStore } from '@/stores/documentStore';

 const {t} = useI18n();
 const isMaximized = ref(false);
+const documentStore = useDocumentStore();

 // 计算属性用于图标，减少重复渲染
 const maximizeIcon = computed(() => isMaximized.value ? '&#xE923;' : '&#xE922;');

+// 计算标题文本
+const titleText = computed(() => {
+  const currentDoc = documentStore.currentDocument;
+  return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
+});
+
 const minimizeWindow = async () => {
  try {
    await runtime.Window.Minimise();
@@ -239,4 +247,4 @@ onUnmounted(() => {
    opacity: 1;
  }
 }
-</style> 
+</style>
--- a/frontend/src/components/toolbar/BlockLanguageSelector.vue
+++ b/frontend/src/components/toolbar/BlockLanguageSelector.vue
@@ -505,11 +505,12 @@ const scrollToCurrentLanguage = () => {
          }
          
          &.active {
-            background-color: rgba(181, 206, 168, 0.1);
-            color: #b5cea8;
+            background-color: var(--selection-bg);
+            color: var(--selection-text);
            
            .language-alias {
-              color: rgba(181, 206, 168, 0.7);
+              color: var(--selection-text);
+              opacity: 0.7;
            }
          }
          
--- a/frontend/src/components/toolbar/DocumentSelector.vue
+++ b/frontend/src/components/toolbar/DocumentSelector.vue
@@ -0,0 +1,774 @@
+<script setup lang="ts">
+import {computed, nextTick, onMounted, onUnmounted, ref} from 'vue';
+import {useDocumentStore} from '@/stores/documentStore';
+import {useI18n} from 'vue-i18n';
+import type {Document} from '@/../bindings/voidraft/internal/models/models';
+import {useWindowStore} from "@/stores/windowStore";
+
+const documentStore = useDocumentStore();
+const windowStore = useWindowStore();
+const {t} = useI18n();
+
+// 组件状态
+const showMenu = ref(false);
+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 alreadyOpenDocId = ref<number | null>(null);
+const errorMessageTimer = ref<number | null>(null);
+
+// 过滤后的文档列表 + 创建选项
+const filteredItems = computed(() => {
+  const docs = documentStore.documentList;
+  const query = inputValue.value.trim();
+
+  if (!query) {
+    return docs;
+  }
+
+  // 过滤匹配的文档
+  const filtered = docs.filter(doc =>
+      doc.title.toLowerCase().includes(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,
+      ...filtered
+    ];
+  }
+
+  return filtered;
+});
+
+// 当前文档显示名称
+const currentDocName = computed(() => {
+  if (!documentStore.currentDocument) return t('toolbar.selectDocument');
+  const title = documentStore.currentDocument.title;
+  return title.length > 12 ? title.substring(0, 12) + '...' : title;
+});
+
+// 打开菜单
+const openMenu = async () => {
+  showMenu.value = true;
+  await documentStore.updateDocuments();
+  nextTick(() => {
+    inputRef.value?.focus();
+  });
+};
+
+// 关闭菜单
+const closeMenu = () => {
+  showMenu.value = false;
+  inputValue.value = '';
+  editingId.value = null;
+  editingTitle.value = '';
+  deleteConfirmId.value = null;
+  
+  // 清除错误状态和定时器
+  clearErrorMessage();
+};
+
+// 清除错误提示和定时器
+const clearErrorMessage = () => {
+  if (errorMessageTimer.value) {
+    clearTimeout(errorMessageTimer.value);
+    errorMessageTimer.value = null;
+  }
+  alreadyOpenDocId.value = null;
+};
+
+// 切换菜单
+const toggleMenu = () => {
+  if (showMenu.value) {
+    closeMenu();
+  } else {
+    openMenu();
+  }
+};
+
+// 选择文档或创建文档
+const selectItem = async (item: any) => {
+  if (item.isCreateOption) {
+    // 创建新文档
+    await createDoc(inputValue.value.trim());
+  } else {
+    // 选择现有文档
+    await selectDoc(item);
+  }
+};
+
+// 选择文档
+const selectDoc = async (doc: Document) => {
+  try {
+    const hasOpen = await windowStore.isDocumentWindowOpen(doc.id);
+    if (hasOpen) {
+      // 设置错误状态并启动定时器
+      alreadyOpenDocId.value = doc.id;
+      
+      // 清除之前的定时器（如果存在）
+      if (errorMessageTimer.value) {
+        clearTimeout(errorMessageTimer.value);
+      }
+      
+      // 设置新的定时器，3秒后清除错误信息
+      errorMessageTimer.value = window.setTimeout(() => {
+        alreadyOpenDocId.value = null;
+        errorMessageTimer.value = null;
+      }, 3000);
+      return;
+    }
+    const success = await documentStore.openDocument(doc.id);
+    if (success) {
+      closeMenu();
+    }
+  } catch (error) {
+    console.error('Failed to switch documents:', error);
+  }
+};
+
+// 文档名称长度限制
+const MAX_TITLE_LENGTH = 50;
+
+// 验证文档名称
+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 createDoc = async (title: string) => {
+  const trimmedTitle = title.trim();
+  const error = validateTitle(trimmedTitle);
+  if (error) {
+    return;
+  }
+
+  try {
+    const newDoc = await documentStore.createNewDocument(trimmedTitle);
+    if (newDoc) {
+      await selectDoc(newDoc);
+    }
+  } catch (error) {
+    console.error('Failed to create document:', error);
+  }
+};
+
+// 开始重命名
+const startRename = (doc: Document, event: Event) => {
+  event.stopPropagation();
+  editingId.value = doc.id;
+  editingTitle.value = doc.title;
+  deleteConfirmId.value = null; // 清除删除确认状态
+  nextTick(() => {
+    editInputRef.value?.focus();
+    editInputRef.value?.select();
+  });
+};
+
+// 保存编辑
+const saveEdit = async () => {
+  if (editingId.value && editingTitle.value.trim()) {
+    const trimmedTitle = editingTitle.value.trim();
+    const error = validateTitle(trimmedTitle);
+    if (error) {
+
+      return;
+    }
+
+    try {
+      await documentStore.updateDocumentMetadata(editingId.value, trimmedTitle);
+      await documentStore.updateDocuments();
+    } catch (error) {
+      return;
+    }
+  }
+  editingId.value = null;
+  editingTitle.value = '';
+};
+
+// 在新窗口打开文档
+const openInNewWindow = async (doc: Document, event: Event) => {
+  event.stopPropagation();
+  try {
+    await documentStore.openDocumentInNewWindow(doc.id);
+  } catch (error) {
+    console.error('Failed to open document in new window:', error);
+  }
+};
+
+// 处理删除 - 简化确认机制
+const handleDelete = async (doc: Document, event: Event) => {
+  event.stopPropagation();
+
+  if (deleteConfirmId.value === doc.id) {
+    // 确认删除前检查文档是否在其他窗口打开
+    try {
+      const hasOpen = await windowStore.isDocumentWindowOpen(doc.id);
+      if (hasOpen) {
+        // 设置错误状态并启动定时器
+        alreadyOpenDocId.value = doc.id;
+        
+        // 清除之前的定时器（如果存在）
+        if (errorMessageTimer.value) {
+          clearTimeout(errorMessageTimer.value);
+        }
+        
+        // 设置新的定时器，3秒后清除错误信息
+        errorMessageTimer.value = window.setTimeout(() => {
+          alreadyOpenDocId.value = null;
+          errorMessageTimer.value = null;
+        }, 3000);
+        
+        // 取消删除确认状态
+        deleteConfirmId.value = null;
+        return;
+      }
+      
+      await documentStore.deleteDocument(doc.id);
+      await documentStore.updateDocuments();
+
+      // 如果删除的是当前文档，切换到第一个文档
+      if (documentStore.currentDocument?.id === doc.id && documentStore.documentList.length > 0) {
+        const firstDoc = documentStore.documentList[0];
+        if (firstDoc) {
+          await selectDoc(firstDoc);
+        }
+      }
+    } catch (error) {
+      console.error('deleted failed:', error);
+    }
+    deleteConfirmId.value = null;
+  } else {
+    // 进入确认状态
+    deleteConfirmId.value = doc.id;
+    editingId.value = null; // 清除编辑状态
+
+    // 3秒后自动取消确认状态
+    setTimeout(() => {
+      if (deleteConfirmId.value === doc.id) {
+        deleteConfirmId.value = null;
+      }
+    }, 3000);
+  }
+};
+
+// 格式化时间
+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 (error) {
+    return t('toolbar.timeError');
+  }
+};
+
+// 键盘事件
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    if (editingId.value) {
+      editingId.value = null;
+      editingTitle.value = '';
+    } else if (deleteConfirmId.value) {
+      deleteConfirmId.value = null;
+    } else {
+      closeMenu();
+    }
+  }
+};
+
+// 输入框键盘事件
+const handleInputKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    const query = inputValue.value.trim();
+    if (query) {
+      // 如果有匹配的项目，选择第一个
+      if (filteredItems.value.length > 0) {
+        selectItem(filteredItems.value[0]);
+      }
+    }
+  } else if (event.key === 'Escape') {
+    event.preventDefault();
+    closeMenu();
+  }
+  event.stopPropagation();
+};
+
+// 编辑键盘事件
+const handleEditKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    saveEdit();
+  } else if (event.key === 'Escape') {
+    event.preventDefault();
+    editingId.value = null;
+    editingTitle.value = '';
+  }
+  event.stopPropagation();
+};
+
+// 点击外部关闭
+const handleClickOutside = (event: Event) => {
+  const target = event.target as HTMLElement;
+  if (!target.closest('.document-selector')) {
+    closeMenu();
+  }
+};
+
+// 生命周期
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+  document.addEventListener('keydown', handleKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+  document.removeEventListener('keydown', handleKeydown);
+  // 清理定时器
+  if (errorMessageTimer.value) {
+    clearTimeout(errorMessageTimer.value);
+  }
+});
+</script>
+
+<template>
+  <div class="document-selector">
+    <!-- 选择器按钮 -->
+    <button class="doc-btn" @click="toggleMenu">
+      <span class="doc-name">{{ currentDocName }}</span>
+      <span class="arrow" :class="{ open: showMenu }">▲</span>
+    </button>
+
+    <!-- 菜单 -->
+    <div v-if="showMenu" 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>
+
+      <!-- 项目列表 -->
+      <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="alreadyOpenDocId === item.id" class="doc-error">
+                {{ t('toolbar.alreadyOpenInNewWindow') }}
+              </div>
+              <div v-else class="doc-date">{{ formatTime(item.updatedAt) }}</div>
+            </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-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>
+          </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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.document-selector {
+  position: relative;
+
+  .doc-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 11px;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    padding: 2px 4px;
+    border-radius: 3px;
+
+    &:hover {
+      background-color: var(--border-color);
+      opacity: 0.8;
+    }
+
+    .doc-name {
+      max-width: 80px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .arrow {
+      font-size: 8px;
+      margin-left: 2px;
+      transition: transform 0.2s ease;
+
+      &.open {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .doc-menu {
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 3px;
+    margin-bottom: 4px;
+    width: 260px;
+    max-height: 320px;
+    z-index: 1000;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+
+    .input-box {
+      position: relative;
+      padding: 8px;
+      border-bottom: 1px solid var(--border-color);
+
+      .main-input {
+        width: 100%;
+        box-sizing: border-box;
+        background-color: var(--bg-primary);
+        border: 1px solid var(--border-color);
+        border-radius: 2px;
+        padding: 5px 8px 5px 26px;
+        font-size: 11px;
+        color: var(--text-primary);
+        outline: none;
+
+        &:focus {
+          border-color: var(--text-muted);
+        }
+
+        &::placeholder {
+          color: var(--text-muted);
+        }
+      }
+
+      .input-icon {
+        position: absolute;
+        left: 14px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--text-muted);
+        pointer-events: none;
+      }
+    }
+
+    .item-list {
+      max-height: 240px;
+      overflow-y: auto;
+
+      .list-item {
+        cursor: pointer;
+        border-bottom: 1px solid var(--border-color);
+
+        &:hover {
+          background-color: var(--bg-hover);
+        }
+
+        &.active {
+          background-color: var(--selection-bg);
+
+          .doc-item-content .doc-info {
+            .doc-title {
+              color: var(--selection-text);
+            }
+
+            .doc-date, .doc-error {
+              color: var(--selection-text);
+              opacity: 0.7;
+            }
+          }
+        }
+
+        &.create-item {
+          .create-option {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 8px;
+            font-size: 11px;
+            font-weight: normal;
+
+            svg {
+              flex-shrink: 0;
+              color: var(--text-muted);
+            }
+          }
+        }
+
+        .doc-item-content {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 8px 8px;
+
+          .doc-info {
+            flex: 1;
+            min-width: 0;
+
+            .doc-title {
+              font-size: 12px;
+              margin-bottom: 2px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              font-weight: normal;
+            }
+
+            .doc-date {
+              font-size: 10px;
+              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 {
+            flex: 1;
+
+            .edit-input {
+              width: 100%;
+              box-sizing: border-box;
+              background-color: var(--bg-primary);
+              border: 1px solid var(--border-color);
+              border-radius: 2px;
+              padding: 4px 6px;
+              font-size: 11px;
+              color: var(--text-primary);
+              outline: none;
+
+              &:focus {
+                border-color: var(--text-muted);
+              }
+            }
+          }
+
+          .doc-actions {
+            display: flex;
+            gap: 6px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+
+            .action-btn {
+              background: none;
+              border: none;
+              color: var(--text-muted);
+              cursor: pointer;
+              padding: 4px;
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              min-width: 20px;
+              min-height: 20px;
+
+              svg {
+                width: 12px;
+                height: 12px;
+              }
+
+              &:hover {
+                background-color: var(--border-color);
+                color: var(--text-primary);
+              }
+
+              &.delete-btn:hover {
+                color: var(--text-danger);
+              }
+
+              &.delete-confirm {
+                background-color: var(--text-danger);
+                color: white;
+
+                .confirm-text {
+                  font-size: 10px;
+                  padding: 0 4px;
+                  font-weight: normal;
+                }
+
+                &:hover {
+                  background-color: var(--text-danger);
+                  color: white !important; // 确保确认状态下文字始终为白色
+                  opacity: 0.8;
+                }
+              }
+            }
+          }
+        }
+
+        &:hover .doc-actions {
+          opacity: 1;
+        }
+      }
+
+      .empty, .loading {
+        padding: 12px 8px;
+        text-align: center;
+        font-size: 11px;
+        color: var(--text-muted);
+      }
+    }
+  }
+
+  // 自定义滚动条
+  .item-list {
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--border-color);
+      border-radius: 2px;
+
+      &:hover {
+        background-color: var(--text-muted);
+      }
+    }
+  }
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>
--- a/frontend/src/components/toolbar/Toolbar.vue
+++ b/frontend/src/components/toolbar/Toolbar.vue
@@ -1,36 +1,38 @@
 <script setup lang="ts">
 import {useI18n} from 'vue-i18n';
-import {onMounted, onUnmounted, ref, watch} from 'vue';
+import {onMounted, onUnmounted, ref, watch, computed} from 'vue';
 import {useConfigStore} from '@/stores/configStore';
 import {useEditorStore} from '@/stores/editorStore';
-import {useErrorHandler} from '@/utils/errorHandler';
+import {useUpdateStore} from '@/stores/updateStore';
+import {useWindowStore} from '@/stores/windowStore';
 import * as runtime from '@wailsio/runtime';
 import {useRouter} from 'vue-router';
 import BlockLanguageSelector from './BlockLanguageSelector.vue';
+import DocumentSelector from './DocumentSelector.vue';
 import {getActiveNoteBlock} from '@/views/editor/extensions/codeblock/state';
 import {getLanguage} from '@/views/editor/extensions/codeblock/lang-parser/languages';
+import {formatBlockContent} from '@/views/editor/extensions/codeblock/formatCode';

 const editorStore = useEditorStore();
 const configStore = useConfigStore();
-const {safeCall} = useErrorHandler();
+const updateStore = useUpdateStore();
+const windowStore = useWindowStore();
 const {t} = useI18n();
 const router = useRouter();

+// 当前块是否支持格式化的响应式状态
+const canFormatCurrentBlock = ref(false);
+
+// 窗口置顶状态管理（仅当前窗口，不同步到配置文件）
+const isCurrentWindowOnTop = ref(false);

-// 设置窗口置顶
 const setWindowAlwaysOnTop = async (isTop: boolean) => {
-  await safeCall(async () => {
-    await runtime.Window.SetAlwaysOnTop(isTop);
-  }, 'window.setTopFailed');
+  await runtime.Window.SetAlwaysOnTop(isTop);
 };

-// 切换窗口置顶
 const toggleAlwaysOnTop = async () => {
-  await safeCall(async () => {
-    await configStore.toggleAlwaysOnTop();
-    // 使用Window.SetAlwaysOnTop方法设置窗口置顶状态
-    await runtime.Window.SetAlwaysOnTop(configStore.config.general.alwaysOnTop);
-  }, 'config.alwaysOnTopFailed');
+  isCurrentWindowOnTop.value = !isCurrentWindowOnTop.value;
+  await runtime.Window.SetAlwaysOnTop(isCurrentWindowOnTop.value);
 };

 // 跳转到设置页面
@@ -38,105 +40,133 @@ const goToSettings = () => {
  router.push('/settings');
 };

+// 执行格式化
+const formatCurrentBlock = () => {
+  if (!canFormatCurrentBlock.value || !editorStore.editorView) return;
+  formatBlockContent(editorStore.editorView);
+};

-// 当前块是否支持格式化的响应式状态
-const canFormatCurrentBlock = ref(false);
-
-// 更新格式化按钮状态
+// 格式化按钮状态更新
 const updateFormatButtonState = () => {
-  if (!editorStore.editorView) {
+  // 安全检查
+  const view = editorStore.editorView;
+  if (!view) {
    canFormatCurrentBlock.value = false;
    return;
  }

  try {
-    const state = editorStore.editorView.state;
+    // 获取活动块和语言信息
+    const state = view.state;
    const activeBlock = getActiveNoteBlock(state as any);
-    if (!activeBlock) {
-      canFormatCurrentBlock.value = false;
-      return;
-    }
-
-    const language = getLanguage(activeBlock.language.name as any);
-    canFormatCurrentBlock.value = !!(language && language.prettier);
+    
+    // 检查块和语言格式化支持
+    canFormatCurrentBlock.value = !!(
+      activeBlock && 
+      getLanguage(activeBlock.language.name as any)?.prettier
+    );
  } catch (error) {
+    console.warn('Error checking format capability:', error);
    canFormatCurrentBlock.value = false;
  }
 };

-// 编辑器事件监听器引用，用于清理
-let editorEventListeners: (() => void)[] = [];
+// 创建带300ms防抖的更新函数
+const debouncedUpdateFormatButton = (() => {
+  let timeout: number | null = null;
+  
+  return () => {
+    if (timeout) clearTimeout(timeout);
+    timeout = window.setTimeout(() => {
+      updateFormatButtonState();
+      timeout = null;
+    }, 300);
+  };
+})();
+
+// 编辑器事件管理
+const setupEditorListeners = (view: any) => {
+  if (!view?.dom) return [];
+  
+  const events = [
+    { type: 'click', handler: updateFormatButtonState },
+    { type: 'keyup', handler: debouncedUpdateFormatButton },
+    { type: 'focus', handler: updateFormatButtonState }
+  ];
+  
+  // 注册所有事件
+  events.forEach(event => view.dom.addEventListener(event.type, event.handler));
+  
+  // 返回清理函数数组
+  return events.map(event => 
+    () => view.dom.removeEventListener(event.type, event.handler)
+  );
+};
+
+// 监听编辑器视图变化
+let cleanupListeners: (() => void)[] = [];

-// 监听编辑器初始化
 watch(
-    () => editorStore.editorView,
-    (newView, oldView) => {
-      // 清理旧的监听器
-      editorEventListeners.forEach(cleanup => cleanup());
-      editorEventListeners = [];
-      
-      if (newView) {
-        updateFormatButtonState();
-        
-        // 添加点击监听器（用于检测光标位置变化）
-        const clickListener = () => {
-          setTimeout(updateFormatButtonState, 0);
-        };
-        newView.dom.addEventListener('click', clickListener);
-        editorEventListeners.push(() => newView.dom.removeEventListener('click', clickListener));
-        
-        // 添加键盘监听器（用于检测内容和光标变化）
-        const keyupListener = () => {
-          setTimeout(updateFormatButtonState, 0);
-        };
-        newView.dom.addEventListener('keyup', keyupListener);
-        editorEventListeners.push(() => newView.dom.removeEventListener('keyup', keyupListener));
-        
-      } else {
-        canFormatCurrentBlock.value = false;
-      }
-    },
-    {immediate: true}
+  () => editorStore.editorView,
+  (newView) => {
+    // 清理旧监听器
+    cleanupListeners.forEach(cleanup => cleanup());
+    cleanupListeners = [];
+    
+    if (newView) {
+      // 初始更新状态
+      updateFormatButtonState();
+      // 设置新监听器
+      cleanupListeners = setupEditorListeners(newView);
+    } else {
+      canFormatCurrentBlock.value = false;
+    }
+  },
+  { immediate: true }
 );

-// 定期更新格式化按钮状态（作为备用机制）
-let formatButtonUpdateTimer: number | null = null;
-
+// 组件生命周期
 const isLoaded = ref(false);

 onMounted(() => {
  isLoaded.value = true;
-  // 降低定时器频率，主要作为备用机制
-  formatButtonUpdateTimer = setInterval(updateFormatButtonState, 2000) as any;
+  // 首次更新格式化状态
+  updateFormatButtonState();
 });

 onUnmounted(() => {
-  // 清理定时器
-  if (formatButtonUpdateTimer) {
-    clearInterval(formatButtonUpdateTimer);
-    formatButtonUpdateTimer = null;
-  }
-  
-  // 清理编辑器事件监听器
-  editorEventListeners.forEach(cleanup => cleanup());
-  editorEventListeners = [];
+  // 清理所有事件监听器
+  cleanupListeners.forEach(cleanup => cleanup());
+  cleanupListeners = [];
 });

-// 监听置顶设置变化
-watch(
-    () => configStore.config.general.alwaysOnTop,
-    async (newValue) => {
-      if (!isLoaded.value) return;
-      await runtime.Window.SetAlwaysOnTop(newValue);
-    }
-);
-
-// 在组件加载完成后应用置顶设置
-watch(isLoaded, async (newLoaded) => {
-  if (newLoaded && configStore.config.general.alwaysOnTop) {
-    await setWindowAlwaysOnTop(true);
+// 组件加载后初始化置顶状态
+watch(isLoaded, async (loaded) => {
+  if (loaded) {
+    // 初始化时从配置文件读取置顶状态
+    isCurrentWindowOnTop.value = configStore.config.general.alwaysOnTop;
+    await setWindowAlwaysOnTop(isCurrentWindowOnTop.value);
  }
 });
+
+const handleUpdateButtonClick = async () => {
+  if (updateStore.hasUpdate && !updateStore.isUpdating && !updateStore.updateSuccess) {
+    // 开始下载更新
+    await updateStore.applyUpdate();
+  } else if (updateStore.updateSuccess) {
+    // 更新成功后，点击重启
+    await updateStore.restartApplication();
+  }
+};
+
+// 更新按钮标题计算属性
+const updateButtonTitle = computed(() => {
+  if (updateStore.isChecking) return t('settings.checking');
+  if (updateStore.isUpdating) return t('settings.updating');
+  if (updateStore.updateSuccess) return t('settings.updateSuccessRestartRequired');
+  if (updateStore.hasUpdate) return `${t('settings.newVersionAvailable')}: ${updateStore.updateResult?.latestVersion || ''}`;
+  return '';
+});
 </script>

 <template>
@@ -162,14 +192,18 @@ watch(isLoaded, async (newLoaded) => {
        {{ configStore.config.editing.fontSize }}px
      </span>

+      <!-- 文档选择器 -->
+      <DocumentSelector v-if="windowStore.isMainWindow"/>
+
      <!-- 块语言选择器 -->
      <BlockLanguageSelector/>

-      <!-- 格式化提示按钮 - 只在支持的语言块中显示，不可点击 -->
+      <!-- 格式化按钮 - 支持点击操作 -->
      <div
          v-if="canFormatCurrentBlock"
          class="format-button"
          :title="t('toolbar.formatHint')"
+          @click="formatCurrentBlock"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -182,10 +216,52 @@ watch(isLoaded, async (newLoaded) => {
        </svg>
      </div>

+      <!-- 更新按钮 - 根据状态显示不同图标 -->
+      <div
+          v-if="updateStore.hasUpdate || updateStore.isChecking || updateStore.isUpdating || updateStore.updateSuccess"
+          class="update-button"
+          :class="{
+            'checking': updateStore.isChecking,
+            'updating': updateStore.isUpdating,
+            'success': updateStore.updateSuccess,
+            'available': updateStore.hasUpdate && !updateStore.isUpdating && !updateStore.updateSuccess
+          }"
+          :title="updateButtonTitle"
+          @click="handleUpdateButtonClick"
+      >
+        <!-- 检查更新中 -->
+        <svg v-if="updateStore.isChecking" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="rotating">
+          <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+        </svg>
+        
+        <!-- 下载更新中 -->
+        <svg v-else-if="updateStore.isUpdating" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="rotating">
+          <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
+          <path d="M12 2a10 10 0 1 0 10 10"></path>
+        </svg>
+        
+        <!-- 更新成功，等待重启 -->
+        <svg v-else-if="updateStore.updateSuccess" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pulsing">
+          <path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path>
+          <line x1="12" y1="2" x2="12" y2="12"></line>
+        </svg>
+        
+        <!-- 有更新可用 -->
+        <svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
+          <polyline points="7.5,10.5 12,15 16.5,10.5"/>
+          <polyline points="12,15 12,3"/>
+        </svg>
+      </div>
+
      <!-- 窗口置顶图标按钮 -->
      <div
          class="pin-button"
-          :class="{ 'active': configStore.config.general.alwaysOnTop }"
+          :class="{ 'active': isCurrentWindowOnTop }"
          :title="t('toolbar.alwaysOnTop')"
          @click="toggleAlwaysOnTop"
      >
@@ -196,7 +272,7 @@ watch(isLoaded, async (newLoaded) => {
      </div>


-      <button class="settings-btn" :title="t('toolbar.settings')" @click="goToSettings">
+      <button v-if="windowStore.isMainWindow" class="settings-btn" :title="t('toolbar.settings')" @click="goToSettings">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="3"></circle>
@@ -246,6 +322,99 @@ watch(isLoaded, async (newLoaded) => {
      cursor: help;
    }

+    /* 更新按钮样式 */
+    .update-button {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      padding: 2px;
+      border-radius: 3px;
+      transition: all 0.2s ease;
+
+      /* 有更新可用状态 */
+      &.available {
+        background-color: rgba(76, 175, 80, 0.1);
+        animation: pulse 2s infinite;
+        
+        svg {
+          stroke: #4caf50;
+        }
+        
+        &:hover {
+          background-color: rgba(76, 175, 80, 0.2);
+          transform: scale(1.05);
+        }
+      }
+      
+      /* 检查更新中状态 */
+      &.checking {
+        background-color: rgba(255, 193, 7, 0.1);
+        
+        svg {
+          stroke: #ffc107;
+        }
+      }
+      
+      /* 更新下载中状态 */
+      &.updating {
+        background-color: rgba(33, 150, 243, 0.1);
+        
+        svg {
+          stroke: #2196f3;
+        }
+      }
+      
+      /* 更新成功状态 */
+      &.success {
+        background-color: rgba(156, 39, 176, 0.1);
+        
+        svg {
+          stroke: #9c27b0;
+        }
+      }
+
+      /* 旋转动画 */
+      .rotating {
+        animation: rotate 1.5s linear infinite;
+      }
+      
+      /* 脉冲动画 */
+      .pulsing {
+        animation: pulse-strong 1.2s ease-in-out infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.7;
+        }
+      }
+      
+      @keyframes pulse-strong {
+        0%, 100% {
+          transform: scale(1);
+          opacity: 1;
+        }
+        50% {
+          transform: scale(1.1);
+          opacity: 0.8;
+        }
+      }
+      
+      @keyframes rotate {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    }

    /* 窗口置顶图标按钮样式 */
    .pin-button {
@@ -282,6 +451,7 @@ watch(isLoaded, async (newLoaded) => {


    .format-button {
+      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
@@ -291,20 +461,10 @@ watch(isLoaded, async (newLoaded) => {
      border-radius: 3px;
      transition: all 0.2s ease;

-      //&:not(.disabled) {
-      //  cursor: pointer;
-      //
-      //  &:hover {
-      //    background-color: var(--border-color);
-      //    opacity: 0.8;
-      //  }
-      //}
-      //
-      //&.disabled {
-      //  cursor: not-allowed;
-      //  opacity: 0.5;
-      //  background-color: rgba(128, 128, 128, 0.1);
-      //}
+      &:hover {
+        background-color: var(--border-color);
+        opacity: 0.8;
+      }

      svg {
        width: 14px;
--- a/frontend/src/i18n/locales/en-US.ts
+++ b/frontend/src/i18n/locales/en-US.ts
@@ -1,4 +1,5 @@
 export default {
+  locale: 'en-US',
  titlebar: {
    minimize: 'Minimize',
    maximize: 'Maximize',
@@ -11,43 +12,35 @@ export default {
      characters: 'Ch',
      selected: 'Sel'
    },
-    fontSize: 'Font Size',
    fontSizeTooltip: 'Font Size (Ctrl+wheel to adjust)',
-    tabLabel: 'Tab',
-    tabType: {
-      spaces: 'Spaces',
-      tab: 'Tab'
-    },
-    encoding: 'UTF-8',
    settings: 'Settings',
    alwaysOnTop: 'Always on Top',
    blockLanguage: 'Block Language',
    searchLanguage: 'Search language...',
    noLanguageFound: 'No language found',
-    autoDetected: 'Auto-detected',
-    formatHint: 'Current block supports formatting, use Ctrl+Shift+F shortcut for formatting',
-  },
-  config: {
-    loadSuccess: 'Configuration loaded successfully',
-    loadFailed: 'Failed to load configuration',
-    saveSuccess: 'Configuration saved',
-    saveFailed: 'Failed to save configuration',
-    resetSuccess: 'Configuration reset to defaults',
-    resetFailed: 'Failed to reset configuration',
-    fontSizeFixed: 'Font size ({value}) has been corrected to {fixed}',
-    tabSizeFixed: 'Tab size ({value}) has been corrected to {fixed}',
-    tabTypeFixed: 'Tab type ({value}) is invalid, corrected to spaces',
-    alwaysOnTopFailed: 'Failed to set window always on top',
-    alwaysOnTopSuccess: 'Window always on top status updated',
-    languageChanged: 'Language setting updated',
-    languageChangeFailed: 'Failed to update language setting',
-    themeChanged: 'Theme setting updated',
-    themeChangeFailed: 'Failed to update theme setting',
-    systemThemeChanged: 'System theme setting updated',
-    systemThemeChangeFailed: 'Failed to update system theme setting'
+    formatHint: 'Click Format Block (Ctrl+Shift+F)',
+    // Document selector
+    selectDocument: 'Select Document',
+    searchOrCreateDocument: 'Search or enter new document name...',
+    createDocument: 'Create',
+    noDocumentFound: 'No document found',
+    loading: 'Loading...',
+    rename: 'Rename',
+    delete: 'Delete',
+    confirm: 'Confirm',
+    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': '简体中文',
+    'zh-CN': 'Chinese',
    'en-US': 'English'
  },
  systemTheme: {
@@ -55,23 +48,69 @@ export default {
    light: 'Light',
    auto: 'Follow System'
  },
-  document: {
-    loadSuccess: 'Document loaded successfully',
-    loadFailed: 'Failed to load document',
-    saveSuccess: 'Document saved successfully',
-    saveFailed: 'Failed to save document',
-    manualSaveSuccess: 'Manually saved successfully',
-    settings: {
-      loadFailed: 'Failed to load save settings',
-      saveSuccess: 'Save settings updated',
-      saveFailed: 'Failed to update save settings'
+  keybindings: {
+    headers: {
+      shortcut: 'Shortcut',
+      category: 'Category',
+      description: 'Description'
    },
-  },
-  migration: {
-    started: 'Starting data migration',
-    migrating: 'Migrating',
-    completed: 'Migration Completed',
-    failed: 'Migration Failed'
+    commands: {
+      showSearch: 'Show search panel',
+      hideSearch: 'Hide search panel',
+      searchToggleCase: 'Toggle case-sensitive matching',
+      searchToggleWord: 'Toggle whole word matching',
+      searchToggleRegex: 'Toggle regular expression matching',
+      searchShowReplace: 'Show replace functionality',
+      searchReplaceAll: 'Replace all matches',
+      blockSelectAll: 'Select all in block',
+      blockAddAfterCurrent: 'Add new block after current',
+      blockAddAfterLast: 'Add new block at end',
+      blockAddBeforeCurrent: 'Add new block before current',
+      blockGotoPrevious: 'Go to previous block',
+      blockGotoNext: 'Go to next block',
+      blockSelectPrevious: 'Select previous block',
+      blockSelectNext: 'Select next block',
+      blockDelete: 'Delete current block',
+      blockMoveUp: 'Move current block up',
+      blockMoveDown: 'Move current block down',
+      blockDeleteLine: 'Delete line',
+      blockMoveLineUp: 'Move line up',
+      blockMoveLineDown: 'Move line down',
+      blockTransposeChars: 'Transpose characters',
+      blockFormat: 'Format code block',
+      blockCopy: 'Copy',
+      blockCut: 'Cut',
+      blockPaste: 'Paste',
+      historyUndo: 'Undo',
+      historyRedo: 'Redo',
+      historyUndoSelection: 'Undo selection',
+      historyRedoSelection: 'Redo selection',
+      foldCode: 'Fold code',
+      unfoldCode: 'Unfold code',
+      foldAll: 'Fold all',
+      unfoldAll: 'Unfold all',
+      cursorSyntaxLeft: 'Cursor syntax left',
+      cursorSyntaxRight: 'Cursor syntax right',
+      selectSyntaxLeft: 'Select syntax left',
+      selectSyntaxRight: 'Select syntax right',
+      copyLineUp: 'Copy line up',
+      copyLineDown: 'Copy line down',
+      insertBlankLine: 'Insert blank line',
+      selectLine: 'Select line',
+      selectParentSyntax: 'Select parent syntax',
+      indentLess: 'Indent less',
+      indentMore: 'Indent more',
+      indentSelection: 'Indent selection',
+      cursorMatchingBracket: 'Cursor matching bracket',
+      toggleComment: 'Toggle comment',
+      toggleBlockComment: 'Toggle block comment',
+      insertNewlineAndIndent: 'Insert newline and indent',
+      deleteCharBackward: 'Delete character backward',
+      deleteCharForward: 'Delete character forward',
+      deleteGroupBackward: 'Delete group backward',
+      deleteGroupForward: 'Delete group forward',
+      textHighlightToggle: 'Toggle text highlight',
+    }
  },
  settings: {
    title: 'Settings',
@@ -80,27 +119,28 @@ export default {
    general: 'General',
    editing: 'Editor',
    appearance: 'Appearance',
+    backupPage: 'Backup',
    keyBindings: 'Key Bindings',
    updates: 'Updates',
-    comingSoon: 'Coming Soon...',
-    save: 'Save',
    reset: 'Reset',
+    apply: 'Apply',
    cancel: 'Cancel',
    dangerZone: 'Danger Zone',
    resetAllSettings: 'Reset All Settings',
-    confirmReset: 'Click again to confirm reset',
+    confirmReset: 'Confirm the reset?',
    globalHotkey: 'Global Keyboard Shortcuts',
    enableGlobalHotkey: 'Enable Global Hotkeys',
    window: 'Window/Application',
    showInSystemTray: 'Show in System Tray',
    enableSystemTray: 'Enable System Tray',
    alwaysOnTop: 'Always on Top',
+    startup: 'Startup Settings',
+    startAtLogin: 'Start at Login',
    dataStorage: 'Data Storage',
    dataPath: 'Data Storage Path',
    clickToSelectPath: 'Click to select path',
    resetDefault: 'Reset Default',
    resetToDefaultPath: 'Reset to default path',
-    restartRequiredForDataPath: 'Restart required',
    fontSize: 'Font Size',
    fontSizeDescription: 'Editor font size',
    fontSettings: 'Font Settings',
@@ -108,6 +148,60 @@ export default {
    fontFamilyDescription: 'Choose editor font family',
    fontWeight: 'Font Weight',
    fontWeightDescription: 'Set the thickness of the font',
+    fontWeights: {
+      '100': 'Thin (100)',
+      '200': 'Extra Light (200)',
+      '300': 'Light (300)',
+      'normal': 'Regular (400)',
+      '500': 'Medium (500)',
+      '600': 'Semi Bold (600)',
+      'bold': 'Bold (700)',
+      '800': 'Extra Bold (800)',
+      '900': 'Black (900)'
+    },
+    customThemeColors: 'Custom Theme Colors',
+    resetToDefault: 'Reset to Default',
+    colorValue: 'Color Value',
+    themeColors: {
+      basic: 'Basic Colors',
+      text: 'Text Colors',
+      syntax: 'Syntax Highlighting',
+      interface: 'Interface Elements',
+      border: 'Borders & Dividers',
+      search: 'Search & Matching',
+      background: 'Main Background',
+      backgroundSecondary: 'Secondary Background',
+      surface: 'Panel Background',
+      foreground: 'Primary Text',
+      foregroundSecondary: 'Secondary Text',
+      comment: 'Comments',
+      keyword: 'Keywords',
+      string: 'Strings',
+      function: 'Functions',
+      number: 'Numbers',
+      operator: 'Operators',
+      variable: 'Variables',
+      type: 'Types',
+      cursor: 'Cursor',
+      selection: 'Selection Background',
+      selectionBlur: 'Unfocused Selection',
+      activeLine: 'Active Line Highlight',
+      lineNumber: 'Line Numbers',
+      activeLineNumber: 'Active Line Number',
+      borderColor: 'Border Color',
+      borderLight: 'Light Border',
+      searchMatch: 'Search Match',
+      matchingBracket: 'Matching Bracket'
+    },
+    fontFamilies: {
+      harmonyOS: 'HarmonyOS Sans',
+      microsoftYahei: 'Microsoft YaHei',
+      pingfang: 'PingFang SC',
+      jetbrainsMono: 'JetBrains Mono',
+      firaCode: 'Fira Code',
+      sourceCodePro: 'Source Code Pro',
+      cascadiaCode: 'Cascadia Code'
+    },
    lineHeight: 'Line Height',
    lineHeightDescription: 'Set the spacing between text lines',
    tabSettings: 'Tab Settings',
@@ -118,15 +212,127 @@ export default {
    enableTabIndent: 'Enable Tab Indent',
    language: 'Interface Language',
    systemTheme: 'System Theme',
-    theme: 'Editor Theme',
-    themeDescription: 'Choose editor theme',
-    restartRequired: '(Restart required)',
    saveOptions: 'Save Options',
    autoSaveDelay: 'Auto Save Delay (ms)',
-    selectDirectoryFailed: 'Failed to select directory',
-    validation: {
-      customPathRequired: 'A valid directory must be selected when enabling custom path',
-      customPathAutoDisabled: 'Custom data path has been automatically disabled due to no valid directory selected'
+    updateSettings: 'Update Settings',
+    autoCheckUpdates: 'Automatically Check Updates',
+    autoCheckUpdatesDescription: 'Check for updates when application starts',
+    manualCheck: 'Manual Update',
+    currentVersion: 'Current Version',
+    checkForUpdates: 'Check for Updates',
+    checking: 'Checking...',
+    checkFailed: 'Check Failed',
+    newVersionAvailable: 'New Version Available',
+    upToDate: 'Up to Date',
+    viewUpdate: 'View Update',
+    releaseNotes: 'Release Notes',
+    networkError: 'Network connection error, please check your network settings',
+    extensions: 'Extensions',
+    extensionsPage: {
+      loading: 'Loading',
+      categoryEditing: 'Editing Enhancement',
+      categoryUI: 'UI Enhancement',
+      categoryTools: 'Tools',
+      configuration: 'Configuration',
+      resetToDefault: 'Reset to Default Configuration',
+    },
+    updateNow: 'Update Now',
+    updating: 'Updating...',
+    updateSuccess: 'Update Success',
+    updateSuccessRestartRequired: 'Update has been successfully applied. Please restart the application.',
+    restartNow: 'Restart Now',
+    hotkeyPreview: 'Preview:',
+    none: 'None',
+    backup: {
+      basicSettings: 'Basic Settings',
+      enableBackup: 'Enable Git Backup',
+      autoBackup: 'Auto Backup',
+      backupInterval: 'Backup Interval',
+      intervals: {
+        '5min': '5 minutes',
+        '10min': '10 minutes',
+        '15min': '15 minutes',
+        '30min': '30 minutes',
+        '1hour': '1 hour'
+      },
+      repositoryConfig: 'Repository Configuration',
+      repoUrl: 'Repository URL',
+      repoUrlPlaceholder: 'Enter Git repository URL',
+      authConfig: 'Authentication Configuration',
+      authMethod: 'Authentication Method',
+      authMethods: {
+        token: 'Access Token',
+        sshKey: 'SSH Key',
+        userPass: 'Username/Password'
+      },
+      username: 'Username',
+      usernamePlaceholder: 'Enter username',
+      password: 'Password',
+      passwordPlaceholder: 'Enter password',
+      token: 'Access Token',
+      tokenPlaceholder: 'Enter access token',
+      sshKeyPath: 'SSH Key Path',
+      sshKeyPathPlaceholder: 'Select SSH key file',
+      sshKeyPassphrase: 'SSH Key Passphrase',
+      sshKeyPassphrasePlaceholder: 'Enter SSH key passphrase',
+      backupOperations: 'Backup Operations',
+      pushToRemote: 'Push to Remote',
+      pushing: 'Pushing...',
+      actions: {
+        push: 'Push',
+      },
+      status: {
+        success: 'Success',
+        failed: 'Failed'
+      }
+    },
+  },
+  extensions: {
+    rainbowBrackets: {
+      name: 'Rainbow Brackets',
+      description: 'Display nested brackets in different colors'
+    },
+    hyperlink: {
+      name: 'Hyperlink',
+      description: 'Recognize and make hyperlinks clickable'
+    },
+    colorSelector: {
+      name: 'Color Selector',
+      description: 'Visual color picker and color value display'
+    },
+    translator: {
+      name: 'Text Translator',
+      description: 'Translate selected text with multiple translation services'
+    },
+    minimap: {
+      name: 'Minimap',
+      description: 'Display minimap overview of the document'
+    },
+    search: {
+      name: 'Search',
+      description: 'Text search and replace functionality'
+    },
+    fold: {
+      name: 'Code Folding',
+      description: 'Collapse and expand code sections for better readability'
+    },
+    textHighlight: {
+      name: 'Text Highlight',
+      description: 'Highlight selected text content (Ctrl+Shift+H to toggle highlight)',
+      backgroundColor: 'Background Color',
+      opacity: 'Opacity'
+    },
+    checkbox: {
+      name: 'Checkbox',
+      description: 'Render [x] and [ ] as interactive checkboxes'
+    },
+    codeblock: {
+      name: 'Code Block',
+      description: 'Code block related functionality'
    }
+  },
+  monitor: {
+    memory: 'Memory',
+    clickToClean: 'Click to clean memory'
  }
-}; 
+};
--- a/frontend/src/i18n/locales/zh-CN.ts
+++ b/frontend/src/i18n/locales/zh-CN.ts
@@ -1,4 +1,5 @@
 export default {
+  locale: 'zh-CN',
  titlebar: {
    minimize: '最小化',
    maximize: '最大化',
@@ -11,40 +12,32 @@ export default {
      characters: 'Ch',
      selected: 'Sel'
    },
-    fontSize: '字体大小',
    fontSizeTooltip: '字体大小 (Ctrl+滚轮调整)',
-    tabLabel: 'Tab',
-    tabType: {
-      spaces: '空格',
-      tab: '制表符'
-    },
-    encoding: 'UTF-8',
    settings: '设置',
    alwaysOnTop: '窗口置顶',
    blockLanguage: '块语言',
    searchLanguage: '搜索语言...',
    noLanguageFound: '未找到匹配的语言',
-    autoDetected: '自动检测',
-    formatHint: '当前区块支持格式化，使用 Ctrl+Shift+F 进行格式化',
-  },
-  config: {
-    loadSuccess: '配置加载成功',
-    loadFailed: '配置加载失败',
-    saveSuccess: '配置已保存',
-    saveFailed: '配置保存失败',
-    resetSuccess: '配置已重置为默认值',
-    resetFailed: '重置配置失败',
-    fontSizeFixed: '字体大小值({value})已被修正为{fixed}',
-    tabSizeFixed: 'Tab大小值({value})已被修正为{fixed}',
-    tabTypeFixed: 'Tab类型({value})不合法，已修正为空格',
-    alwaysOnTopFailed: '无法设置窗口置顶状态',
-    alwaysOnTopSuccess: '窗口置顶状态已更新',
-    languageChanged: '语言设置已更新',
-    languageChangeFailed: '语言设置更新失败',
-    themeChanged: '主题设置已更新',
-    themeChangeFailed: '主题设置更新失败',
-    systemThemeChanged: '系统主题设置已更新',
-    systemThemeChangeFailed: '系统主题设置更新失败'
+    formatHint: '点击格式化区块（Ctrl+Shift+F）',
+    // 文档选择器
+    selectDocument: '选择文档',
+    searchOrCreateDocument: '搜索或输入新文档名...',
+    createDocument: '创建',
+    noDocumentFound: '没有找到文档',
+    loading: '加载中...',
+    rename: '重命名',
+    delete: '删除',
+    confirm: '确认',
+    confirmDelete: '再次点击确认删除',
+    openInNewWindow: '在新窗口中打开',
+    alreadyOpenInNewWindow: '已在新窗口中打开',
+    documentNameTooLong: '文档名称不能超过{max}个字符',
+    documentNameRequired: '文档名称不能为空',
+    cannotDeleteLastDocument: '无法删除最后一个文档',
+    cannotDeleteDefaultDocument: '无法删除默认文档',
+    unknownTime: '未知时间',
+    invalidDate: '无效日期',
+    timeError: '时间错误',
  },
  languages: {
    'zh-CN': '简体中文',
@@ -55,23 +48,69 @@ export default {
    light: '浅色',
    auto: '跟随系统'
  },
-  document: {
-    loadSuccess: '文档加载成功',
-    loadFailed: '文档加载失败',
-    saveSuccess: '文档保存成功',
-    saveFailed: '文档保存失败',
-    manualSaveSuccess: '手动保存成功',
-    settings: {
-      loadFailed: '加载保存设置失败',
-      saveSuccess: '保存设置已更新',
-      saveFailed: '保存设置更新失败'
+  keybindings: {
+    headers: {
+      shortcut: '快捷键',
+      category: '分类',
+      description: '描述'
    },
-  },
-  migration: {
-    started: '开始迁移数据',
-    migrating: '迁移中',
-    completed: '迁移已完成',
-    failed: '迁移失败'
+    commands: {
+      showSearch: '显示搜索面板',
+      hideSearch: '隐藏搜索面板',
+      searchToggleCase: '切换大小写敏感匹配',
+      searchToggleWord: '切换整词匹配',
+      searchToggleRegex: '切换正则表达式匹配',
+      searchShowReplace: '显示替换功能',
+      searchReplaceAll: '替换全部匹配项',
+      blockSelectAll: '块内选择全部',
+      blockAddAfterCurrent: '在当前块后添加新块',
+      blockAddAfterLast: '在最后添加新块',
+      blockAddBeforeCurrent: '在当前块前添加新块',
+      blockGotoPrevious: '跳转到上一个块',
+      blockGotoNext: '跳转到下一个块',
+      blockSelectPrevious: '选择上一个块',
+      blockSelectNext: '选择下一个块',
+      blockDelete: '删除当前块',
+      blockMoveUp: '向上移动当前块',
+      blockMoveDown: '向下移动当前块',
+      blockDeleteLine: '删除行',
+      blockMoveLineUp: '向上移动行',
+      blockMoveLineDown: '向下移动行',
+      blockTransposeChars: '字符转置',
+      blockFormat: '格式化代码块',
+      blockCopy: '复制',
+      blockCut: '剪切',
+      blockPaste: '粘贴',
+      historyUndo: '撤销',
+      historyRedo: '重做',
+      historyUndoSelection: '撤销选择',
+      historyRedoSelection: '重做选择',
+      foldCode: '折叠代码',
+      unfoldCode: '展开代码',
+      foldAll: '折叠全部',
+      unfoldAll: '展开全部',
+      cursorSyntaxLeft: '光标按语法左移',
+      cursorSyntaxRight: '光标按语法右移',
+      selectSyntaxLeft: '按语法选择左侧',
+      selectSyntaxRight: '按语法选择右侧',
+      copyLineUp: '向上复制行',
+      copyLineDown: '向下复制行',
+      insertBlankLine: '插入空行',
+      selectLine: '选择行',
+      selectParentSyntax: '选择父级语法',
+      indentLess: '减少缩进',
+      indentMore: '增加缩进',
+      indentSelection: '缩进选择',
+      cursorMatchingBracket: '光标到匹配括号',
+      toggleComment: '切换注释',
+      toggleBlockComment: '切换块注释',
+      insertNewlineAndIndent: '插入新行并缩进',
+      deleteCharBackward: '向后删除字符',
+      deleteCharForward: '向前删除字符',
+      deleteGroupBackward: '向后删除组',
+      deleteGroupForward: '向前删除组',
+    textHighlightToggle: '切换文本高亮',
+    }
  },
  settings: {
    title: '设置',
@@ -80,27 +119,29 @@ export default {
    general: '常规',
    editing: '编辑器',
    appearance: '外观',
+    backupPage: '备份',
+    extensions: '扩展',
    keyBindings: '快捷键',
    updates: '更新',
-    comingSoon: '即将推出...',
-    save: '保存',
    reset: '重置',
+    apply: '应用',
    cancel: '取消',
    dangerZone: '危险操作',
    resetAllSettings: '重置所有设置',
-    confirmReset: '再次点击确认重置',
+    confirmReset: '确认重置?',
    globalHotkey: '全局键盘快捷键',
    enableGlobalHotkey: '启用全局热键',
    window: '窗口/应用程序',
    showInSystemTray: '在系统托盘中显示',
    enableSystemTray: '启用系统托盘',
    alwaysOnTop: '窗口始终置顶',
+    startup: '启动设置',
+    startAtLogin: '开机自启动',
    dataStorage: '数据存储',
    dataPath: '数据存储路径',
    clickToSelectPath: '点击选择路径',
    resetDefault: '恢复默认',
    resetToDefaultPath: '恢复为默认路径',
-    restartRequiredForDataPath: '需要重启应用程序',
    fontSize: '字体大小',
    fontSizeDescription: '编辑器字体大小',
    fontSettings: '字体设置',
@@ -118,15 +159,181 @@ export default {
    enableTabIndent: '启用 Tab 缩进',
    language: '界面语言',
    systemTheme: '系统主题',
-    theme: '编辑器主题',
-    themeDescription: '选择编辑器主题',
-    restartRequired: '(需要重启)',
    saveOptions: '保存选项',
    autoSaveDelay: '自动保存延迟(毫秒)',
-    selectDirectoryFailed: '选择目录失败',
-    validation: {
-      customPathRequired: '启用自定义路径时必须选择一个有效的目录',
-      customPathAutoDisabled: '由于未选择有效目录，自定义数据路径已自动关闭'
+    updateSettings: '更新设置',
+    autoCheckUpdates: '自动检查更新',
+    autoCheckUpdatesDescription: '应用启动时自动检查更新',
+    manualCheck: '手动更新',
+    currentVersion: '当前版本',
+    checkForUpdates: '检查更新',
+    checking: '正在检查...',
+    checkFailed: '检查失败',
+    newVersionAvailable: '发现新版本',
+    upToDate: '已是最新版本',
+    viewUpdate: '查看更新',
+    releaseNotes: '更新日志',
+    networkError: '网络连接错误，请检查网络设置',
+    updateNow: '立即更新',
+    updating: '正在更新...',
+    updateSuccess: '更新成功',
+    updateSuccessRestartRequired: '更新已成功应用，请重启应用以生效',
+    updateSuccessNoRestart: '更新已完成，无需重启',
+    restartNow: '立即重启',
+    extensionsPage: {
+      loading: '加载中',
+      categoryEditing: '编辑增强',
+      categoryUI: '界面增强',
+      categoryTools: '工具扩展',
+      configuration: '配置',
+      resetToDefault: '重置为默认配置',
+    },
+    fontWeights: {
+      '100': '极细 (100)',
+      '200': '超细 (200)',
+      '300': '细 (300)',
+      'normal': '正常 (400)',
+      '500': '中等 (500)',
+      '600': '半粗 (600)',
+      'bold': '粗体 (700)',
+      '800': '超粗 (800)',
+      '900': '极粗 (900)'
+    },
+    customThemeColors: '自定义主题颜色',
+    resetToDefault: '重置为默认',
+    colorValue: '颜色值',
+    themeColors: {
+      basic: '基础色调',
+      text: '文本颜色',
+      syntax: '语法高亮',
+      interface: '界面元素',
+      border: '边框分割线',
+      search: '搜索匹配',
+      background: '主背景色',
+      backgroundSecondary: '次要背景色',
+      surface: '面板背景',
+      foreground: '主文本色',
+      foregroundSecondary: '次要文本色',
+      comment: '注释色',
+      keyword: '关键字',
+      string: '字符串',
+      function: '函数名',
+      number: '数字',
+      operator: '操作符',
+      variable: '变量',
+      type: '类型',
+      cursor: '光标',
+      selection: '选中背景',
+      selectionBlur: '失焦选中背景',
+      activeLine: '当前行高亮',
+      lineNumber: '行号',
+      activeLineNumber: '活动行号',
+      borderColor: '边框色',
+      borderLight: '浅色边框',
+      searchMatch: '搜索匹配',
+      matchingBracket: '匹配括号'
+    },
+    fontFamilies: {
+      harmonyOS: '鸿蒙字体',
+      microsoftYahei: '微软雅黑',
+      pingfang: '苹方字体',
+      jetbrainsMono: 'JetBrains Mono',
+      firaCode: 'Fira Code',
+      sourceCodePro: 'Source Code Pro',
+      cascadiaCode: 'Cascadia Code'
+    },
+    hotkeyPreview: '预览：',
+    none: '无',
+    backup: {
+      basicSettings: '基本设置',
+      enableBackup: '启用备份',
+      autoBackup: '自动备份',
+      backupInterval: '备份间隔',
+      intervals: {
+        '5min': '5分钟',
+        '10min': '10分钟',
+        '15min': '15分钟',
+        '30min': '30分钟',
+        '1hour': '1小时'
+      },
+      repositoryConfig: '仓库配置',
+      repoUrl: '仓库地址',
+      repoUrlPlaceholder: '请输入Git仓库地址',
+      authConfig: '认证配置',
+      authMethod: '认证方式',
+      authMethods: {
+        token: '访问令牌',
+        sshKey: 'SSH密钥',
+        userPass: '用户名密码'
+      },
+      username: '用户名',
+      usernamePlaceholder: '请输入用户名',
+      password: '密码',
+      passwordPlaceholder: '请输入密码',
+      token: '访问令牌',
+      tokenPlaceholder: '请输入访问令牌',
+      sshKeyPath: 'SSH密钥路径',
+      sshKeyPathPlaceholder: '请选择SSH密钥文件',
+      sshKeyPassphrase: 'SSH密钥密码',
+      sshKeyPassphrasePlaceholder: '请输入SSH密钥密码',
+      backupOperations: '备份操作',
+      pushToRemote: '推送到远程',
+      pushing: '推送中...',
+      actions: {
+        push: '推送',
+      },
+      status: {
+        success: '成功',
+        failed: '失败'
+      }
+    },
+  },
+  extensions: {
+    rainbowBrackets: {
+      name: '彩虹括号',
+      description: '用不同颜色显示嵌套括号'
+    },
+    hyperlink: {
+      name: '超链接',
+      description: '识别并可点击超链接'
+    },
+    colorSelector: {
+      name: '颜色选择器',
+      description: '颜色值的可视化和选择'
+    },
+    translator: {
+      name: '划词翻译',
+      description: '选择文本后显示翻译按钮，支持多种翻译服务'
+    },
+    minimap: {
+      name: '小地图',
+      description: '显示小地图视图'
+    },
+    search: {
+      name: '搜索功能',
+      description: '文本搜索和替换功能'
+    },
+    fold: {
+      name: '代码折叠',
+      description: '折叠和展开代码段以提高代码可读性'
+    },
+    textHighlight: {
+      name: '文本高亮',
+      description: '高亮选中的文本内容 (Ctrl+Shift+H 切换高亮)',
+      backgroundColor: '背景颜色',
+      opacity: '透明度'
+    },
+    checkbox: {
+      name: '选择框',
+      description: '将 [x] 和 [ ] 渲染为可交互的选择框'
+    },
+    codeblock: {
+      name: '代码块',
+      description: '代码块相关功能'
    }
+  },
+  monitor: {
+    memory: '内存',
+    clickToClean: '点击清理内存'
  }
-}; 
+};
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -4,7 +4,10 @@ import '@/assets/styles/index.css';
 import {createPinia} from 'pinia';
 import i18n from './i18n';
 import router from './router';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
 const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
 const app = createApp(App);
 app.use(pinia)
 app.use(i18n);
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -6,6 +6,8 @@ import EditingPage from '@/views/settings/pages/EditingPage.vue';
 import AppearancePage from '@/views/settings/pages/AppearancePage.vue';
 import KeyBindingsPage from '@/views/settings/pages/KeyBindingsPage.vue';
 import UpdatesPage from '@/views/settings/pages/UpdatesPage.vue';
+import ExtensionsPage from '@/views/settings/pages/ExtensionsPage.vue';
+import BackupPage from '@/views/settings/pages/BackupPage.vue';

 const routes: RouteRecordRaw[] = [
  {
@@ -34,6 +36,11 @@ const routes: RouteRecordRaw[] = [
        name: 'SettingsAppearance',
        component: AppearancePage
      },
+      {
+        path: 'extensions',
+        name: 'SettingsExtensions',
+        component: ExtensionsPage
+      },
      {
        path: 'key-bindings',
        name: 'SettingsKeyBindings',
@@ -43,6 +50,11 @@ const routes: RouteRecordRaw[] = [
        path: 'updates',
        name: 'SettingsUpdates',
        component: UpdatesPage
+      },
+      {
+        path: 'backup',
+        name: 'SettingsBackup',
+        component: BackupPage
      }
    ]
  }
@@ -53,4 +65,4 @@ const router = createRouter({
  routes: routes
 });

-export default router; 
+export default router;
--- a/frontend/src/stores/backupStore.ts
+++ b/frontend/src/stores/backupStore.ts
@@ -0,0 +1,123 @@
+import {defineStore} from 'pinia'
+import {computed, readonly, ref} from 'vue'
+import type {GitBackupConfig} from '@/../bindings/voidraft/internal/models'
+import {BackupService} from '@/../bindings/voidraft/internal/services'
+import {useConfigStore} from '@/stores/configStore'
+
+/**
+ * Minimalist Backup Store
+ */
+export const useBackupStore = defineStore('backup', () => {
+    // Core state
+    const config = ref<GitBackupConfig | null>(null)
+    const isPushing = ref(false)
+    const error = ref<string | null>(null)
+    const isInitialized = ref(false)
+    
+    // Backup result states
+    const pushSuccess = ref(false)
+    const pushError = ref(false)
+    
+    // Timers for auto-hiding status icons and error messages
+    let pushStatusTimer: number | null = null
+    let errorTimer: number | null = null
+
+    // 获取configStore
+    const configStore = useConfigStore()
+
+    // Computed properties
+    const isEnabled = computed(() => configStore.config.backup.enabled)
+    const isConfigured = computed(() => configStore.config.backup.repo_url)
+
+    // 清除状态显示
+    const clearPushStatus = () => {
+        if (pushStatusTimer !== null) {
+            window.clearTimeout(pushStatusTimer)
+            pushStatusTimer = null
+        }
+        pushSuccess.value = false
+        pushError.value = false
+    }
+
+    // 清除错误信息和错误图标
+    const clearError = () => {
+        if (errorTimer !== null) {
+            window.clearTimeout(errorTimer)
+            errorTimer = null
+        }
+        error.value = null
+        pushError.value = false
+    }
+
+    // 设置错误信息和错误图标并自动清除
+    const setErrorWithAutoHide = (errorMessage: string, hideAfter: number = 3000) => {
+        clearError()
+        clearPushStatus()
+        error.value = errorMessage
+        pushError.value = true
+        errorTimer = window.setTimeout(() => {
+            error.value = null
+            pushError.value = false
+            errorTimer = null
+        }, hideAfter)
+    }
+
+    // Push to remote repository
+    const pushToRemote = async () => {
+        if (isPushing.value || !isConfigured.value) return
+
+        isPushing.value = true
+        clearError() // 清除之前的错误信息
+        clearPushStatus()
+
+        try {
+            await BackupService.PushToRemote()
+            // 显示成功状态，并设置3秒后自动消失
+            pushSuccess.value = true
+            pushStatusTimer = window.setTimeout(() => {
+                pushSuccess.value = false
+                pushStatusTimer = null
+            }, 3000)
+        } catch (err: any) {
+            setErrorWithAutoHide(err?.message || 'Backup operation failed')
+        } finally {
+            isPushing.value = false
+        }
+    }
+
+    // 初始化备份服务
+    const initialize = async () => {
+        if (!isEnabled.value) return
+        
+        // 避免重复初始化
+        if (isInitialized.value) return
+        
+        clearError() // 清除之前的错误信息
+        try {
+            await BackupService.Initialize()
+            isInitialized.value = true
+        } catch (err: any) {
+            setErrorWithAutoHide(err?.message || 'Failed to initialize backup service')
+        }
+    }
+
+
+    return {
+        // State
+        config: readonly(config),
+        isPushing: readonly(isPushing),
+        error: readonly(error),
+        isInitialized: readonly(isInitialized),
+        pushSuccess: readonly(pushSuccess),
+        pushError: readonly(pushError),
+
+        // Computed
+        isEnabled,
+        isConfigured,
+
+        // Methods
+        pushToRemote,
+        initialize,
+        clearError
+    }
+})
--- a/frontend/src/stores/configStore.ts
+++ b/frontend/src/stores/configStore.ts
@@ -1,6 +1,6 @@
 import {defineStore} from 'pinia';
 import {computed, reactive} from 'vue';
-import {ConfigService} from '../../bindings/voidraft/internal/services';
+import {ConfigService, StartupService} from '@/../bindings/voidraft/internal/services';
 import {
    AppConfig,
    AppearanceConfig,
@@ -9,12 +9,16 @@ import {
    LanguageType,
    SystemThemeType,
    TabType,
+    UpdatesConfig,
+    UpdateSourceType,
+    GitBackupConfig,
+    AuthMethod
 } from '@/../bindings/voidraft/internal/models/models';
 import {useI18n} from 'vue-i18n';
-import {useErrorHandler} from '@/utils/errorHandler';
 import {ConfigUtils} from '@/utils/configUtils';
 import {WindowController} from '@/utils/windowController';
 import * as runtime from '@wailsio/runtime';
+import {useBackupStore} from '@/stores/backupStore';
 // 国际化相关导入
 export type SupportedLocaleType = 'zh-CN' | 'en-US';

@@ -43,6 +47,14 @@ type AppearanceConfigKeyMap = {
    readonly [K in keyof AppearanceConfig]: string;
 };

+type UpdatesConfigKeyMap = {
+    readonly [K in keyof UpdatesConfig]: string;
+};
+
+type BackupConfigKeyMap = {
+    readonly [K in keyof GitBackupConfig]: string;
+};
+
 type NumberConfigKey = 'fontSize' | 'tabSize' | 'lineHeight';

 // 配置键映射
@@ -50,6 +62,7 @@ const GENERAL_CONFIG_KEY_MAP: GeneralConfigKeyMap = {
    alwaysOnTop: 'general.alwaysOnTop',
    dataPath: 'general.dataPath',
    enableSystemTray: 'general.enableSystemTray',
+    startAtLogin: 'general.startAtLogin',
    enableGlobalHotkey: 'general.enableGlobalHotkey',
    globalHotkey: 'general.globalHotkey'
 } as const;
@@ -67,7 +80,33 @@ const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {

 const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = {
    language: 'appearance.language',
-    systemTheme: 'appearance.systemTheme'
+    systemTheme: 'appearance.systemTheme',
+    customTheme: 'appearance.customTheme'
+} as const;
+
+const UPDATES_CONFIG_KEY_MAP: UpdatesConfigKeyMap = {
+    version: 'updates.version',
+    autoUpdate: 'updates.autoUpdate',
+    primarySource: 'updates.primarySource',
+    backupSource: 'updates.backupSource',
+    backupBeforeUpdate: 'updates.backupBeforeUpdate',
+    updateTimeout: 'updates.updateTimeout',
+    github: 'updates.github',
+    gitea: 'updates.gitea'
+} as const;
+
+const BACKUP_CONFIG_KEY_MAP: BackupConfigKeyMap = {
+    enabled: 'backup.enabled',
+    repo_url: 'backup.repo_url',
+    auth_method: 'backup.auth_method',
+    username: 'backup.username',
+    password: 'backup.password',
+    token: 'backup.token',
+    ssh_key_path: 'backup.ssh_key_path',
+    ssh_key_passphrase: 'backup.ssh_key_passphrase',
+    backup_interval: 'backup.backup_interval',
+    auto_backup: 'backup.auto_backup',
+
 } as const;

 // 配置限制
@@ -78,26 +117,40 @@ const CONFIG_LIMITS = {
    tabType: {values: [TabType.TabTypeSpaces, TabType.TabTypeTab], default: TabType.TabTypeSpaces}
 } as const;

-// 常用字体选项
-export const FONT_OPTIONS = [
+// 创建获取翻译的函数
+export const createFontOptions = (t: (key: string) => string) => [
    {
-        label: '鸿蒙字体',
+        label: t('settings.fontFamilies.harmonyOS'),
        value: '"HarmonyOS Sans SC", "HarmonyOS Sans", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif'
    },
-    {label: '微软雅黑', value: '"Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif'},
-    {label: '苹方字体', value: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif'},
    {
-        label: 'JetBrains Mono',
+        label: t('settings.fontFamilies.microsoftYahei'),
+        value: '"Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif'
+    },
+    {
+        label: t('settings.fontFamilies.pingfang'),
+        value: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif'
+    },
+    {
+        label: t('settings.fontFamilies.jetbrainsMono'),
        value: '"JetBrains Mono", "Fira Code", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace'
    },
-    {label: 'Fira Code', value: '"Fira Code", "JetBrains Mono", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace'},
-    {label: 'Source Code Pro', value: '"Source Code Pro", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace'},
-    {label: 'Cascadia Code', value: '"Cascadia Code", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace'},
    {
-        label: '系统等宽字体',
-        value: '"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace'
+        label: t('settings.fontFamilies.firaCode'),
+        value: '"Fira Code", "JetBrains Mono", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace'
+    },
+    {
+        label: t('settings.fontFamilies.sourceCodePro'),
+        value: '"Source Code Pro", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace'
+    },
+    {
+        label: t('settings.fontFamilies.cascadiaCode'),
+        value: '"Cascadia Code", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace'
    }
-] as const;
+];
+
+// 常用字体选项
+export const FONT_OPTIONS = createFontOptions((key) => key);

 // 获取浏览器的默认语言
 const getBrowserLanguage = (): SupportedLocaleType => {
@@ -118,6 +171,7 @@ const DEFAULT_CONFIG: AppConfig = {
        alwaysOnTop: false,
        dataPath: '',
        enableSystemTray: true,
+        startAtLogin: false,
        enableGlobalHotkey: false,
        globalHotkey: {
            ctrl: false,
@@ -139,18 +193,116 @@ const DEFAULT_CONFIG: AppConfig = {
    },
    appearance: {
        language: LanguageType.LangZhCN,
-        systemTheme: SystemThemeType.SystemThemeDark
+        systemTheme: SystemThemeType.SystemThemeAuto,
+        customTheme: {
+            darkTheme: {
+                // 基础色调
+                background: '#252B37',
+                backgroundSecondary: '#213644',
+                surface: '#474747',
+                foreground: '#9BB586',
+                foregroundSecondary: '#9c9c9c',
+                
+                // 语法高亮
+                comment: '#6272a4',
+                keyword: '#ff79c6',
+                string: '#f1fa8c',
+                function: '#50fa7b',
+                number: '#bd93f9',
+                operator: '#ff79c6',
+                variable: '#8fbcbb',
+                type: '#8be9fd',
+                
+                // 界面元素
+                cursor: '#fff',
+                selection: '#0865a9aa',
+                selectionBlur: '#225377aa',
+                activeLine: 'rgba(255,255,255,0.04)',
+                lineNumber: 'rgba(255,255,255, 0.15)',
+                activeLineNumber: 'rgba(255,255,255, 0.6)',
+                
+                // 边框分割线
+                borderColor: '#1e222a',
+                borderLight: 'rgba(255,255,255, 0.1)',
+                
+                // 搜索匹配
+                searchMatch: '#8fbcbb',
+                matchingBracket: 'rgba(255,255,255,0.1)'
+            },
+            lightTheme: {
+                // 基础色调
+                background: '#ffffff',
+                backgroundSecondary: '#f1faf1',
+                surface: '#f5f5f5',
+                foreground: '#444d56',
+                foregroundSecondary: '#6a737d',
+                
+                // 语法高亮
+                comment: '#6a737d',
+                keyword: '#d73a49',
+                string: '#032f62',
+                function: '#005cc5',
+                number: '#005cc5',
+                operator: '#d73a49',
+                variable: '#24292e',
+                type: '#6f42c1',
+                
+                // 界面元素
+                cursor: '#000',
+                selection: '#77baff8c',
+                selectionBlur: '#b2c2ca85',
+                activeLine: '#000000',
+                lineNumber: '#000000',
+                activeLineNumber: '#000000',
+                
+                // 边框分割线
+                borderColor: '#dfdfdf',
+                borderLight: '#0000000C',
+                
+                // 搜索匹配
+                searchMatch: '#005cc5',
+                matchingBracket: 'rgba(0,0,0,0.1)'
+            }
+        }
+    },
+    updates: {
+        version: "1.0.0",
+        autoUpdate: true,
+        primarySource: UpdateSourceType.UpdateSourceGithub,
+        backupSource: UpdateSourceType.UpdateSourceGitea,
+        backupBeforeUpdate: true,
+        updateTimeout: 30,
+        github: {
+            owner: "landaiqing",
+            repo: "voidraft",
+        },
+        gitea: {
+            baseURL: "https://git.landaiqing.cn",
+            owner: "landaiqing",
+            repo: "voidraft",
+        }
+    },
+    backup: {
+        enabled: false,
+        repo_url: "",
+        auth_method: AuthMethod.UserPass,
+        username: "",
+        password: "",
+        token: "",
+        ssh_key_path: "",
+        ssh_key_passphrase: "",
+        backup_interval: 60,
+        auto_backup: true,
    },
-    updates: {},
    metadata: {
-        lastUpdated: new Date().toString()
+        version: '1.0.0',
+        lastUpdated: new Date().toString(),
    }
 };


 export const useConfigStore = defineStore('config', () => {
-    const {locale} = useI18n();
-    const {safeCall} = useErrorHandler();
+    const {locale, t} = useI18n();

    // 响应式状态
    const state = reactive({
@@ -158,6 +310,9 @@ export const useConfigStore = defineStore('config', () => {
        isLoading: false,
        configLoaded: false
    });
+    
+    // 初始化FONT_OPTIONS国际化版本
+    const localizedFontOptions = computed(() => createFontOptions(t));

    // 计算属性 - 使用工厂函数简化
    const createLimitComputed = (key: NumberConfigKey) => computed(() => CONFIG_LIMITS[key]);
@@ -211,6 +366,36 @@ export const useConfigStore = defineStore('config', () => {
        state.config.appearance[key] = value;
    };

+    const updateUpdatesConfig = async <K extends keyof UpdatesConfig>(key: K, value: UpdatesConfig[K]): Promise<void> => {
+        // 确保配置已加载
+        if (!state.configLoaded && !state.isLoading) {
+            await initConfig();
+        }
+
+        const backendKey = UPDATES_CONFIG_KEY_MAP[key];
+        if (!backendKey) {
+            throw new Error(`No backend key mapping found for updates.${key.toString()}`);
+        }
+
+        await ConfigService.Set(backendKey, value);
+        state.config.updates[key] = value;
+    };
+
+    const updateBackupConfig = async <K extends keyof GitBackupConfig>(key: K, value: GitBackupConfig[K]): Promise<void> => {
+        // 确保配置已加载
+        if (!state.configLoaded && !state.isLoading) {
+            await initConfig();
+        }
+
+        const backendKey = BACKUP_CONFIG_KEY_MAP[key];
+        if (!backendKey) {
+            throw new Error(`No backend key mapping found for backup.${key.toString()}`);
+        }
+
+        await ConfigService.Set(backendKey, value);
+        state.config.backup[key] = value;
+    };
+
    // 加载配置
    const initConfig = async (): Promise<void> => {
        if (state.isLoading) return;
@@ -225,6 +410,7 @@ export const useConfigStore = defineStore('config', () => {
                if (appConfig.editing) Object.assign(state.config.editing, appConfig.editing);
                if (appConfig.appearance) Object.assign(state.config.appearance, appConfig.appearance);
                if (appConfig.updates) Object.assign(state.config.updates, appConfig.updates);
+                if (appConfig.backup) Object.assign(state.config.backup, appConfig.backup);
                if (appConfig.metadata) Object.assign(state.config.metadata, appConfig.metadata);
            }

@@ -244,26 +430,26 @@ export const useConfigStore = defineStore('config', () => {
        const clamp = (value: number) => ConfigUtils.clamp(value, limit.min, limit.max);

        return {
-            increase: () => safeCall(() => updateEditingConfig(key, clamp(state.config.editing[key] + 1)), 'config.saveFailed', 'config.saveSuccess'),
-            decrease: () => safeCall(() => updateEditingConfig(key, clamp(state.config.editing[key] - 1)), 'config.saveFailed', 'config.saveSuccess'),
-            set: (value: number) => safeCall(() => updateEditingConfig(key, clamp(value)), 'config.saveFailed', 'config.saveSuccess'),
-            reset: () => safeCall(() => updateEditingConfig(key, limit.default), 'config.saveFailed', 'config.saveSuccess')
+            increase: async () => await updateEditingConfig(key, clamp(state.config.editing[key] + 1)),
+            decrease: async () => await updateEditingConfig(key, clamp(state.config.editing[key] - 1)),
+            set: async (value: number) => await updateEditingConfig(key, clamp(value)),
+            reset: async () => await updateEditingConfig(key, limit.default)
        };
    };

    // 通用布尔值切换器
    const createGeneralToggler = <T extends keyof GeneralConfig>(key: T) =>
-        () => safeCall(() => updateGeneralConfig(key, !state.config.general[key] as GeneralConfig[T]), 'config.saveFailed', 'config.saveSuccess');
+        async () => await updateGeneralConfig(key, !state.config.general[key] as GeneralConfig[T]);

    const createEditingToggler = <T extends keyof EditingConfig>(key: T) =>
-        () => safeCall(() => updateEditingConfig(key, !state.config.editing[key] as EditingConfig[T]), 'config.saveFailed', 'config.saveSuccess');
+        async () => await updateEditingConfig(key, !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 safeCall(() => updateEditingConfig(key, values[nextIndex]), 'config.saveFailed', 'config.saveSuccess');
+            return await updateEditingConfig(key, values[nextIndex]);
        };

    // 重置配置
@@ -272,16 +458,12 @@ export const useConfigStore = defineStore('config', () => {

        state.isLoading = true;
        try {
-            // 调用后端重置配置
-            await safeCall(() => ConfigService.ResetConfig(), 'config.resetFailed', 'config.resetSuccess');
-            
-            // 立即重新加载后端配置以确保前端状态同步
-            await safeCall(async () => {
-                const appConfig = await ConfigService.GetConfig();
-                if (appConfig) {
-                    state.config = JSON.parse(JSON.stringify(appConfig)) as AppConfig;
-                }
-            }, 'config.loadFailed', 'config.loadSuccess');
+
+            await ConfigService.ResetConfig()
+            const appConfig = await ConfigService.GetConfig();
+            if (appConfig) {
+                state.config = JSON.parse(JSON.stringify(appConfig)) as AppConfig;
+            }
        } finally {
            state.isLoading = false;
        }
@@ -289,20 +471,61 @@ export const useConfigStore = defineStore('config', () => {

    // 语言设置方法
    const setLanguage = async (language: LanguageType): Promise<void> => {
-        await safeCall(async () => {
-            await updateAppearanceConfig('language', language);
+        await updateAppearanceConfig('language', language);

-            // 同步更新前端语言
-            const frontendLocale = ConfigUtils.backendLanguageToFrontend(language);
-            locale.value = frontendLocale as any;
-        }, 'config.languageChangeFailed', 'config.languageChanged');
+        // 同步更新前端语言
+        const frontendLocale = ConfigUtils.backendLanguageToFrontend(language);
+        locale.value = frontendLocale as any;
    };

    // 系统主题设置方法
    const setSystemTheme = async (systemTheme: SystemThemeType): Promise<void> => {
-        await safeCall(async () => {
-            await updateAppearanceConfig('systemTheme', systemTheme);
-        }, 'config.systemThemeChangeFailed', 'config.systemThemeChanged');
+        await updateAppearanceConfig('systemTheme', systemTheme);
+    };
+
+    // 更新自定义主题方法
+    const updateCustomTheme = async (themeType: 'darkTheme' | 'lightTheme', colorKey: string, colorValue: string): Promise<void> => {
+        // 确保配置已加载
+        if (!state.configLoaded && !state.isLoading) {
+            await initConfig();
+        }
+
+        try {
+            // 深拷贝当前配置
+            const customTheme = JSON.parse(JSON.stringify(state.config.appearance.customTheme));
+            
+            // 更新对应主题的颜色值
+            customTheme[themeType][colorKey] = colorValue;
+            
+            // 更新整个自定义主题配置到后端
+            await ConfigService.Set(APPEARANCE_CONFIG_KEY_MAP.customTheme, customTheme);
+            
+            // 更新前端状态
+            state.config.appearance.customTheme = customTheme;
+        } catch (error) {
+            throw error;
+        }
+    };
+
+    // 设置整个自定义主题配置
+    const setCustomTheme = async (customTheme: any): Promise<void> => {
+        // 确保配置已加载
+        if (!state.configLoaded && !state.isLoading) {
+            await initConfig();
+        }
+
+        try {
+            // 更新整个自定义主题配置到后端
+            await ConfigService.Set(APPEARANCE_CONFIG_KEY_MAP.customTheme, customTheme);
+            
+            // 更新前端状态
+            state.config.appearance.customTheme = customTheme;
+            
+            // 确保Vue能检测到变化
+            state.config.appearance = { ...state.config.appearance };
+        } catch (error) {
+            throw error;
+        }
    };

    // 初始化语言设置
@@ -333,21 +556,19 @@ export const useConfigStore = defineStore('config', () => {
    const togglers = {
        tabIndent: createEditingToggler('enableTabIndent'),
        alwaysOnTop: async () => {
-            await safeCall(async () => {
-                await updateGeneralConfig('alwaysOnTop', !state.config.general.alwaysOnTop);
-                // 立即应用窗口置顶状态
-                await runtime.Window.SetAlwaysOnTop(state.config.general.alwaysOnTop);
-            }, 'config.alwaysOnTopFailed', 'config.alwaysOnTopSuccess');
+            await updateGeneralConfig('alwaysOnTop', !state.config.general.alwaysOnTop);
+            // 立即应用窗口置顶状态
+            await runtime.Window.SetAlwaysOnTop(state.config.general.alwaysOnTop);
        },
        tabType: createEnumToggler('tabType', CONFIG_LIMITS.tabType.values)
    };

    // 字符串配置设置器
    const setters = {
-        fontFamily: (value: string) => safeCall(() => updateEditingConfig('fontFamily', value), 'config.saveFailed', 'config.saveSuccess'),
-        fontWeight: (value: string) => safeCall(() => updateEditingConfig('fontWeight', value), 'config.saveFailed', 'config.saveSuccess'),
-        dataPath: (value: string) => safeCall(() => updateGeneralConfig('dataPath', value), 'config.saveFailed', 'config.saveSuccess'),
-        autoSaveDelay: (value: number) => safeCall(() => updateEditingConfig('autoSaveDelay', value), 'config.saveFailed', 'config.saveSuccess')
+        fontFamily: async (value: string) => await updateEditingConfig('fontFamily', value),
+        fontWeight: async (value: string) => await updateEditingConfig('fontWeight', value),
+        dataPath: async (value: string) => await updateGeneralConfig('dataPath', value),
+        autoSaveDelay: async (value: number) => await updateEditingConfig('autoSaveDelay', value)
    };

    return {
@@ -355,12 +576,13 @@ export const useConfigStore = defineStore('config', () => {
        config: computed(() => state.config),
        configLoaded: computed(() => state.configLoaded),
        isLoading: computed(() => state.isLoading),
-
+        localizedFontOptions,
+        
        // 限制常量
        ...limits,

        // 核心方法
-        initConfig: () => safeCall(() => initConfig(), 'config.loadFailed', 'config.loadSuccess'),
+        initConfig,
        resetConfig,

        // 语言相关方法
@@ -369,6 +591,8 @@ export const useConfigStore = defineStore('config', () => {

        // 主题相关方法
        setSystemTheme,
+        updateCustomTheme,
+        setCustomTheme,

        // 字体大小操作
        ...adjusters.fontSize,
@@ -379,7 +603,7 @@ export const useConfigStore = defineStore('config', () => {

        // Tab操作
        toggleTabIndent: togglers.tabIndent,
-        setEnableTabIndent: (value: boolean) => safeCall(() => updateEditingConfig('enableTabIndent', value), 'config.saveFailed', 'config.saveSuccess'),
+        setEnableTabIndent: (value: boolean) => updateEditingConfig('enableTabIndent', value),
        ...adjusters.tabSize,
        increaseTabSize: adjusters.tabSize.increase,
        decreaseTabSize: adjusters.tabSize.decrease,
@@ -391,7 +615,7 @@ export const useConfigStore = defineStore('config', () => {

        // 窗口操作
        toggleAlwaysOnTop: togglers.alwaysOnTop,
-        setAlwaysOnTop: (value: boolean) => safeCall(() => updateGeneralConfig('alwaysOnTop', value), 'config.saveFailed', 'config.saveSuccess'),
+        setAlwaysOnTop: (value: boolean) => updateGeneralConfig('alwaysOnTop', value),

        // 字体操作
        setFontFamily: setters.fontFamily,
@@ -404,10 +628,33 @@ export const useConfigStore = defineStore('config', () => {
        setAutoSaveDelay: setters.autoSaveDelay,

        // 热键配置相关方法
-        setEnableGlobalHotkey: (value: boolean) => safeCall(() => updateGeneralConfig('enableGlobalHotkey', value), 'config.saveFailed', 'config.saveSuccess'),
-        setGlobalHotkey: (hotkey: any) => safeCall(() => updateGeneralConfig('globalHotkey', hotkey), 'config.saveFailed', 'config.saveSuccess'),
+        setEnableGlobalHotkey: (value: boolean) => updateGeneralConfig('enableGlobalHotkey', value),
+        setGlobalHotkey: (hotkey: any) => updateGeneralConfig('globalHotkey', hotkey),

        // 系统托盘配置相关方法
-        setEnableSystemTray: (value: boolean) => safeCall(() => updateGeneralConfig('enableSystemTray', value), 'config.saveFailed', 'config.saveSuccess')
+        setEnableSystemTray: (value: boolean) => updateGeneralConfig('enableSystemTray', value),
+
+        // 开机启动配置相关方法
+        setStartAtLogin: async (value: boolean) => {
+            // 先更新配置文件
+            await updateGeneralConfig('startAtLogin', value);
+            // 再调用系统设置API
+            await StartupService.SetEnabled(value);
+        },
+
+        // 更新配置相关方法
+        setAutoUpdate: async (value: boolean) => await updateUpdatesConfig('autoUpdate', value),
+
+        // 备份配置相关方法
+        setEnableBackup: async (value: boolean) => {await updateBackupConfig('enabled', value);},
+        setAutoBackup: async (value: boolean) => {await updateBackupConfig('auto_backup', value);},
+        setRepoUrl: async (value: string) => await updateBackupConfig('repo_url', value),
+        setAuthMethod: async (value: AuthMethod) => await updateBackupConfig('auth_method', value),
+        setUsername: async (value: string) => await updateBackupConfig('username', value),
+        setPassword: async (value: string) => await updateBackupConfig('password', value),
+        setToken: async (value: string) => await updateBackupConfig('token', value),
+        setSshKeyPath: async (value: string) => await updateBackupConfig('ssh_key_path', value),
+        setSshKeyPassphrase: async (value: string) => await updateBackupConfig('ssh_key_passphrase', value),
+        setBackupInterval: async (value: number) => await updateBackupConfig('backup_interval', value),
    };
 });
--- a/frontend/src/stores/documentStore.ts
+++ b/frontend/src/stores/documentStore.ts
@@ -1,124 +1,251 @@
 import {defineStore} from 'pinia';
 import {computed, 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 {useErrorHandler} from '@/utils/errorHandler';
+
+const SCRATCH_DOCUMENT_ID = 1; // 默认草稿文档ID

 export const useDocumentStore = defineStore('document', () => {
-  const {safeCall} = useErrorHandler();
+    // === 核心状态 ===
+    const documents = ref<Record<number, Document>>({});
+    const recentDocumentIds = ref<number[]>([SCRATCH_DOCUMENT_ID]);
+    const currentDocumentId = ref<number | null>(null);
+    const currentDocument = ref<Document | null>(null);

-  // 状态
-  const activeDocument = ref<Document | null>(null);
-  const isLoading = ref(false);
-  const isSaving = ref(false);
-  const lastSaved = ref<Date | null>(null);
+    // === UI状态 ===
+    const showDocumentSelector = ref(false);
+    const isLoading = ref(false);

-  // 计算属性
-  const documentContent = computed(() => activeDocument.value?.content ?? '');
-  const documentTitle = computed(() => activeDocument.value?.meta?.title ?? '');
-  const hasActiveDocument = computed(() => !!activeDocument.value);
-  const isSaveInProgress = computed(() => isSaving.value);
-  const lastSavedTime = computed(() => lastSaved.value);
+    // === 计算属性 ===
+    const documentList = computed(() =>
+        Object.values(documents.value).sort((a, b) => {
+            const aIndex = recentDocumentIds.value.indexOf(a.id);
+            const bIndex = recentDocumentIds.value.indexOf(b.id);

-  // 状态管理包装器
-  const withStateGuard = async <T>(
-    operation: () => Promise<T>,
-    stateRef: typeof isLoading | typeof isSaving,
-    errorMessageKey: string,
-    successMessageKey?: string
-  ): Promise<T | null> => {
-    if (stateRef.value) return null;
-    
-    stateRef.value = true;
-    try {
-      return await safeCall(operation, errorMessageKey, successMessageKey);
-    } finally {
-      stateRef.value = false;
+            // 按最近使用排序
+            if (aIndex !== -1 && bIndex !== -1) {
+                return aIndex - bIndex;
+            }
+            if (aIndex !== -1) return -1;
+            if (bIndex !== -1) return 1;
+
+            // 然后按更新时间排序
+            return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+        })
+    );
+
+    // === 私有方法 ===
+    const addRecentDocument = (docId: number) => {
+        const recent = recentDocumentIds.value.filter(id => id !== docId);
+        recent.unshift(docId);
+        recentDocumentIds.value = recent.slice(0, 100); // 保留最近100个
+    };
+
+    const setDocuments = (docs: Document[]) => {
+        documents.value = {};
+        docs.forEach(doc => {
+            documents.value[doc.id] = doc;
+        });
+    };
+
+    // === 公共API ===
+
+    // 在新窗口中打开文档
+    const openDocumentInNewWindow = async (docId: number): Promise<boolean> => {
+        try {
+            await OpenDocumentWindow(docId);
+            return true;
+        } catch (error) {
+            console.error('Failed to open document in new window:', error);
+            return false;
+        }
+    };
+
+    // 更新文档列表
+    const updateDocuments = async () => {
+        try {
+            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);
+        }
+    };
+
+    // 打开文档
+    const openDocument = async (docId: number): Promise<boolean> => {
+        try {
+            closeDialog();
+
+            // 获取完整文档数据
+            const doc = await DocumentService.GetDocumentByID(docId);
+            if (!doc) {
+                throw new Error(`Document ${docId} not found`);
+            }
+
+            currentDocumentId.value = docId;
+            currentDocument.value = doc;
+            addRecentDocument(docId);
+
+            return true;
+        } catch (error) {
+            console.error('Failed to open document:', error);
+            return false;
+        }
+    };
+
+    // 创建新文档
+    const createNewDocument = async (title: string): Promise<Document | null> => {
+        try {
+            const newDoc = await DocumentService.CreateDocument(title);
+            if (!newDoc) {
+                throw new Error('Failed to create document');
+            }
+
+            // 更新文档列表
+            documents.value[newDoc.id] = newDoc;
+
+            return newDoc;
+        } catch (error) {
+            console.error('Failed to create document:', error);
+            return null;
+        }
+    };
+
+    // 保存新文档
+    const saveNewDocument = async (title: string, content: string): Promise<boolean> => {
+        try {
+            const newDoc = await createNewDocument(title);
+            if (!newDoc) return false;
+
+            // 更新内容
+            await DocumentService.UpdateDocumentContent(newDoc.id, content);
+            newDoc.content = content;
+
+            return true;
+        } catch (error) {
+            console.error('Failed to save new document:', error);
+            return false;
+        }
+    };
+
+    // 更新文档元数据
+    const updateDocumentMetadata = async (docId: number, title: string, newPath?: string): Promise<boolean> => {
+        try {
+            await DocumentService.UpdateDocumentTitle(docId, title);
+
+            // 更新本地状态
+            const doc = documents.value[docId];
+            if (doc) {
+                doc.title = title;
+                doc.updatedAt = new Date();
+            }
+
+            if (currentDocument.value?.id === docId) {
+                currentDocument.value.title = title;
+                currentDocument.value.updatedAt = new Date();
+            }
+
+            return true;
+        } catch (error) {
+            console.error('Failed to update document metadata:', error);
+            return false;
+        }
+    };
+
+    // 删除文档
+    const deleteDocument = async (docId: number): Promise<boolean> => {
+        try {
+            // 检查是否是默认文档（使用ID判断）
+            if (docId === SCRATCH_DOCUMENT_ID) {
+                return false;
+            }
+
+            await DocumentService.DeleteDocument(docId);
+
+            // 更新本地状态
+            delete documents.value[docId];
+            recentDocumentIds.value = recentDocumentIds.value.filter(id => id !== docId);
+
+            // 如果删除的是当前文档，切换到第一个可用文档
+            if (currentDocumentId.value === docId) {
+                const availableDocs = Object.values(documents.value);
+                if (availableDocs.length > 0) {
+                    await openDocument(availableDocs[0].id);
+                } else {
+                    currentDocumentId.value = null;
+                    currentDocument.value = null;
+                }
+            }
+
+            return true;
+        } catch (error) {
+            console.error('Failed to delete document:', error);
+            return false;
+        }
+    };
+
+    // === UI控制 ===
+    const openDocumentSelector = () => {
+        closeDialog();
+        showDocumentSelector.value = true;
+    };
+
+    const closeDialog = () => {
+        showDocumentSelector.value = false;
+    };
+
+    // === 初始化 ===
+    const initialize = async (urlDocumentId?: number): Promise<void> => {
+        try {
+            await updateDocuments();
+
+            // 优先使用URL参数中的文档ID
+            if (urlDocumentId && documents.value[urlDocumentId]) {
+                await openDocument(urlDocumentId);
+            } else if (currentDocumentId.value && documents.value[currentDocumentId.value]) {
+                // 如果URL中没有指定文档ID，则使用持久化的文档ID
+                await openDocument(currentDocumentId.value);
+            } else {
+                // 否则获取第一个文档ID并打开
+                const firstDocId = await DocumentService.GetFirstDocumentID();
+                if (firstDocId && documents.value[firstDocId]) {
+                    await openDocument(firstDocId);
+                }
+            }
+        } catch (error) {
+            console.error('Failed to initialize document store:', error);
+        }
+    };
+
+    return {
+        // 状态
+        documents,
+        documentList,
+        recentDocumentIds,
+        currentDocumentId,
+        currentDocument,
+        showDocumentSelector,
+        isLoading,
+
+        // 方法
+        updateDocuments,
+        openDocument,
+        openDocumentInNewWindow,
+        createNewDocument,
+        saveNewDocument,
+        updateDocumentMetadata,
+        deleteDocument,
+        openDocumentSelector,
+        closeDialog,
+        initialize,
+    };
+}, {
+    persist: {
+        key: 'voidraft-document',
+        storage: localStorage,
+        pick: ['currentDocumentId']
    }
-  };
-
-  // 加载文档
-  const loadDocument = () => withStateGuard(
-    async () => {
-      const doc = await DocumentService.GetActiveDocument();
-      activeDocument.value = doc;
-      return doc;
-    },
-    isLoading,
-    'document.loadFailed',
-    'document.loadSuccess'
-  );
-
-  // 保存文档
-  const saveDocument = async (content: string): Promise<boolean> => {
-    const result = await withStateGuard(
-      async () => {
-        await DocumentService.UpdateActiveDocumentContent(content);
-        lastSaved.value = new Date();
-        
-        // 使用可选链更新本地副本
-        if (activeDocument.value) {
-          activeDocument.value.content = content;
-          activeDocument.value.meta.lastUpdated = lastSaved.value;
-        }
-        
-        return true;
-      },
-      isSaving,
-      'document.saveFailed',
-      'document.saveSuccess'
-    );
-    
-    return result ?? false;
-  };
-
-  // 强制保存文档到磁盘
-  const forceSaveDocument = async (): Promise<boolean> => {
-    const result = await withStateGuard(
-      async () => {
-        // 直接调用强制保存API
-        await DocumentService.ForceSave();
-        
-        lastSaved.value = new Date();
-        
-        // 使用可选链更新时间戳
-        if (activeDocument.value) {
-          activeDocument.value.meta.lastUpdated = lastSaved.value;
-        }
-        
-        return true;
-      },
-      isSaving,
-      'document.saveFailed',
-      'document.manualSaveSuccess'
-    );
-    
-    return result ?? false;
-  };
-
-  // 初始化
-  const initialize = async () => {
-    await loadDocument();
-  };
-
-  return {
-    // 状态
-    activeDocument,
-    isLoading,
-    isSaving,
-    lastSaved,
-    
-    // 计算属性
-    documentContent,
-    documentTitle,
-    hasActiveDocument,
-    isSaveInProgress,
-    lastSavedTime,
-    
-    // 方法
-    loadDocument,
-    saveDocument,
-    forceSaveDocument,
-    initialize
-  };
-}); 
+});
--- a/frontend/src/stores/editorStore.ts
+++ b/frontend/src/stores/editorStore.ts
@@ -1,145 +1,181 @@
 import {defineStore} from 'pinia';
-import {ref, watch} from 'vue';
+import {nextTick, ref, watch} from 'vue';
 import {EditorView} from '@codemirror/view';
 import {EditorState, Extension} from '@codemirror/state';
 import {useConfigStore} from './configStore';
 import {useDocumentStore} from './documentStore';
-import {useLogStore} from './logStore';
-import {createBasicSetup} from '@/views/editor/extensions/basicSetup';
-import {
-  createStatsUpdateExtension,
-  getTabExtensions,
-  updateStats,
-  updateTabConfig,
-  createAutoSavePlugin,
-  createSaveShortcutPlugin,
-  createFontExtensionFromBackend,
-  updateFontConfig,
-} from '@/views/editor/extensions';
-import { createThemeExtension, updateEditorTheme } from '@/views/editor/extensions/themeExtension';
-import { useThemeStore } from './themeStore';
-import { useI18n } from 'vue-i18n';
-import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models';
-import { DocumentService } from '@/../bindings/voidraft/internal/services';
+import {useThemeStore} from './themeStore';
+import {ExtensionID, SystemThemeType} from '@/../bindings/voidraft/internal/models/models';
+import {DocumentService, ExtensionService} from '@/../bindings/voidraft/internal/services';
+import {ensureSyntaxTree} from "@codemirror/language";
+import {createBasicSetup} from '@/views/editor/basic/basicSetup';
+import {createThemeExtension, updateEditorTheme} from '@/views/editor/basic/themeExtension';
+import {getTabExtensions, updateTabConfig} from '@/views/editor/basic/tabExtension';
+import {createFontExtensionFromBackend, updateFontConfig} from '@/views/editor/basic/fontExtension';
+import {createStatsUpdateExtension} from '@/views/editor/basic/statsExtension';
+import {createContentChangePlugin} from '@/views/editor/basic/contentChangeExtension';
+import {createDynamicKeymapExtension, updateKeymapExtension} from '@/views/editor/keymap';
+import {createDynamicExtensions, getExtensionManager, setExtensionManagerView, removeExtensionManagerView} from '@/views/editor/manager';
+import {useExtensionStore} from './extensionStore';
+import createCodeBlockExtension from "@/views/editor/extensions/codeblock";
+
+const NUM_EDITOR_INSTANCES = 5; // 最多缓存5个编辑器实例

 export interface DocumentStats {
    lines: number;
    characters: number;
    selectedCharacters: number;
 }
+
+interface EditorInstance {
+    view: EditorView;
+    documentId: number;
+    content: string;
+    isDirty: boolean;
+    lastModified: Date;
+    autoSaveTimer: number | null;
+    syntaxTreeCache: {
+        lastDocLength: number;
+        lastContentHash: string;
+        lastParsed: Date;
+    } | null;
+}
+
 export const useEditorStore = defineStore('editor', () => {
-    // 引用配置store
+    // === 依赖store ===
    const configStore = useConfigStore();
    const documentStore = useDocumentStore();
-    const logStore = useLogStore();
    const themeStore = useThemeStore();
-    const { t } = useI18n();
+    const extensionStore = useExtensionStore();

-    // 状态
+    // === 核心状态 ===
+    const editorCache = ref<{
+        lru: number[];
+        instances: Record<number, EditorInstance>;
+        containerElement: HTMLElement | null;
+    }>({
+        lru: [],
+        instances: {},
+        containerElement: null
+    });
+
+    const currentEditor = ref<EditorView | null>(null);
    const documentStats = ref<DocumentStats>({
        lines: 0,
        characters: 0,
        selectedCharacters: 0
    });
-    // 编辑器视图
-    const editorView = ref<EditorView | null>(null);
-    // 编辑器是否已初始化
-    const isEditorInitialized = ref(false);
-    // 编辑器容器元素
-    const editorContainer = ref<HTMLElement | null>(null);
+    
+    // 编辑器加载状态
+    const isLoading = ref(false);

-    // 方法
-    function setEditorView(view: EditorView | null) {
-        editorView.value = view;
-    }
+    // 异步操作竞态条件控制
+    const operationSequence = ref(0);
+    const pendingOperations = ref(new Map<number, AbortController>());
+    const currentLoadingDocumentId = ref<number | null>(null);

-    // 设置编辑器容器
-    function setEditorContainer(container: HTMLElement | null) {
-        editorContainer.value = container;
-        // 如果编辑器已经创建但容器改变了，需要重新挂载
-        if (editorView.value && container && editorView.value.dom.parentElement !== container) {
-            container.appendChild(editorView.value.dom);
-            // 重新挂载后立即滚动到底部
-            scrollEditorToBottom();
-        }
-    }
+    // 自动保存设置 - 从配置动态获取
+    const getAutoSaveDelay = () => configStore.config.editing.autoSaveDelay;

-    // 更新文档统计信息
-    function updateDocumentStats(stats: DocumentStats) {
-        documentStats.value = stats;
-    }
+    // 生成新的操作序列号
+    const getNextOperationId = () => ++operationSequence.value;

-    // 应用字体大小
-    function applyFontSize() {
-        if (!editorView.value) return;
-        // 更新编辑器的字体大小
-        const editorDOM = editorView.value.dom;
-        if (editorDOM) {
-            editorDOM.style.fontSize = `${configStore.config.editing.fontSize}px`;
-            editorView.value?.requestMeasure();
-        }
-    }
-
-    // 滚动到文档底部的辅助函数
-    const scrollToBottom = (view: EditorView) => {
-        if (!view) return;
-
-        const lines = view.state.doc.lines;
-        if (lines > 0) {
-            const lastLinePos = view.state.doc.line(lines).to;
-            view.dispatch({
-                effects: EditorView.scrollIntoView(lastLinePos)
-            });
-        }
+    // 取消之前的操作
+    const cancelPreviousOperations = (excludeId?: number) => {
+        pendingOperations.value.forEach((controller, id) => {
+            if (id !== excludeId) {
+                controller.abort();
+                pendingOperations.value.delete(id);
+            }
+        });
    };

-    // 滚动到底部的公共方法
-    const scrollEditorToBottom = () => {
-        if (editorView.value) {
-            scrollToBottom(editorView.value as any);
-        }
+    // 检查操作是否仍然有效
+    const isOperationValid = (operationId: number, documentId: number) => {
+        return (
+            pendingOperations.value.has(operationId) &&
+            !pendingOperations.value.get(operationId)?.signal.aborted &&
+            currentLoadingDocumentId.value === documentId
+        );
    };

-    // 手动保存文档
-    const handleManualSave = async () => {
-        if (!editorView.value) return;
+    // === 私有方法 ===

-        const view = editorView.value as EditorView;
+    // 生成内容哈希
+    const generateContentHash = (content: string): string => {
+        let hash = 0;
+        for (let i = 0; i < content.length; i++) {
+            const char = content.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash; // Convert to 32bit integer
+        }
+        return hash.toString();
+    };
+
+    // 缓存化的语法树确保方法
+    const ensureSyntaxTreeCached = (view: EditorView, documentId: number): void => {
+        const instance = editorCache.value.instances[documentId];
+        if (!instance) return;
+
+        const docLength = view.state.doc.length;
        const content = view.state.doc.toString();
+        const contentHash = generateContentHash(content);
+        const now = new Date();

-        // 先更新内容
-        await DocumentService.UpdateActiveDocumentContent(content);
-        // 然后调用强制保存方法
-        const success = await documentStore.forceSaveDocument();
-        if (success) {
-            logStore.info(t('document.manualSaveSuccess'));
+        // 检查是否需要重新构建语法树
+        const cache = instance.syntaxTreeCache;
+        const shouldRebuild = !cache || 
+            cache.lastDocLength !== docLength || 
+            cache.lastContentHash !== contentHash ||
+            (now.getTime() - cache.lastParsed.getTime()) > 30000; // 30秒过期
+
+        if (shouldRebuild) {
+            try {
+                ensureSyntaxTree(view.state, docLength, 5000);
+                
+                // 更新缓存
+                instance.syntaxTreeCache = {
+                    lastDocLength: docLength,
+                    lastContentHash: contentHash,
+                    lastParsed: now
+                };
+            } catch (error) {
+                console.warn('Failed to ensure syntax tree:', error);
+            }
        }
    };

-    // 创建编辑器
-    const createEditor = async (initialDoc: string = '') => {
-        if (isEditorInitialized.value || !editorContainer.value) return;
+    // 创建编辑器实例
+    const createEditorInstance = async (
+        content: string, 
+        operationId: number, 
+        documentId: number
+    ): Promise<EditorView> => {
+        if (!editorCache.value.containerElement) {
+            throw new Error('Editor container not set');
+        }

-        // 加载文档内容
-        await documentStore.initialize();
-        const docContent = documentStore.documentContent || initialDoc;
+        // 检查操作是否仍然有效
+        if (!isOperationValid(operationId, documentId)) {
+            throw new Error('Operation cancelled');
+        }

        // 获取基本扩展
        const basicExtensions = createBasicSetup();

        // 获取主题扩展
        const themeExtension = createThemeExtension(
-            configStore.config.appearance.systemTheme || SystemThemeType.SystemThemeDark
+            configStore.config.appearance.systemTheme || SystemThemeType.SystemThemeAuto
        );

-        // 获取Tab相关扩展
+        // Tab相关扩展
        const tabExtensions = getTabExtensions(
            configStore.config.editing.tabSize,
            configStore.config.editing.enableTabIndent,
            configStore.config.editing.tabType
        );

-        // 创建字体扩展
+        // 字体扩展
        const fontExtension = createFontExtensionFromBackend({
            fontFamily: configStore.config.editing.fontFamily,
            fontSize: configStore.config.editing.fontSize,
@@ -147,141 +183,535 @@ export const useEditorStore = defineStore('editor', () => {
            fontWeight: configStore.config.editing.fontWeight
        });

-        // 创建统计信息更新扩展
-        const statsExtension = createStatsUpdateExtension(
-            updateDocumentStats
-        );
+        // 统计扩展
+        const statsExtension = createStatsUpdateExtension(updateDocumentStats);

-        // 创建保存快捷键插件
-        const saveShortcutPlugin = createSaveShortcutPlugin(() => {
-            if (editorView.value) {
-                handleManualSave();
-            }
+        // 内容变化扩展
+        const contentChangeExtension = createContentChangePlugin();
+
+        // 代码块扩展
+        const codeBlockExtension = createCodeBlockExtension({
+            showBackground: true,
+            enableAutoDetection: true
        });

-        // 创建自动保存插件
-        const autoSavePlugin = createAutoSavePlugin({
-            debounceDelay: 300, // 300毫秒的输入防抖
-            onSave: (success) => {
-                if (success) {
-                    documentStore.lastSaved = new Date();
-                }
-            }
-        });
+        // 再次检查操作有效性
+        if (!isOperationValid(operationId, documentId)) {
+            throw new Error('Operation cancelled');
+        }
+
+        // 快捷键扩展
+        const keymapExtension = await createDynamicKeymapExtension();
+
+        // 检查操作有效性
+        if (!isOperationValid(operationId, documentId)) {
+            throw new Error('Operation cancelled');
+        }
+
+        // 动态扩展，传递文档ID以便扩展管理器可以预初始化
+        const dynamicExtensions = await createDynamicExtensions(documentId);
+
+        // 最终检查操作有效性
+        if (!isOperationValid(operationId, documentId)) {
+            throw new Error('Operation cancelled');
+        }

        // 组合所有扩展
        const extensions: Extension[] = [
-            themeExtension,
+            keymapExtension,
            ...basicExtensions,
+            themeExtension,
            ...tabExtensions,
            fontExtension,
            statsExtension,
-            saveShortcutPlugin,
-            autoSavePlugin
+            contentChangeExtension,
+            codeBlockExtension,
+            ...dynamicExtensions
        ];

        // 创建编辑器状态
        const state = EditorState.create({
-            doc: docContent,
+            doc: content,
            extensions
        });

        // 创建编辑器视图
        const view = new EditorView({
-            state,
-            parent: editorContainer.value
+            state
        });

-        // 将编辑器实例保存到store
-        setEditorView(view);
-        isEditorInitialized.value = true;
-
-        // 确保编辑器已渲染后再滚动到底部
-        scrollToBottom(view);
-        // 应用初始字体大小
-        applyFontSize();
-
-        // 立即更新统计信息
-        updateStats(view, updateDocumentStats);
-    };
-
-    // 重新配置编辑器
-    const reconfigureTabSettings = () => {
-        if (!editorView.value) return;
-        updateTabConfig(
-            editorView.value as EditorView,
-            configStore.config.editing.tabSize,
-            configStore.config.editing.enableTabIndent,
-            configStore.config.editing.tabType
-        );
-    };
-
-    // 重新配置字体设置
-    const reconfigureFontSettings = () => {
-        if (!editorView.value) return;
-        updateFontConfig(editorView.value as EditorView, {
-            fontFamily: configStore.config.editing.fontFamily,
-            fontSize: configStore.config.editing.fontSize,
-            lineHeight: configStore.config.editing.lineHeight,
-            fontWeight: configStore.config.editing.fontWeight
+        // 将光标定位到文档末尾并滚动到该位置
+        const docLength = view.state.doc.length;
+        view.dispatch({
+            selection: {anchor: docLength, head: docLength},
+            scrollIntoView: true
        });
+
+        return view;
    };

+    // 添加编辑器到缓存
+    const addEditorToCache = (documentId: number, view: EditorView, content: string) => {
+        // 如果缓存已满，移除最少使用的编辑器
+        if (editorCache.value.lru.length >= NUM_EDITOR_INSTANCES) {
+            const oldestId = editorCache.value.lru.shift();
+            if (oldestId && editorCache.value.instances[oldestId]) {
+                const oldInstance = editorCache.value.instances[oldestId];
+                // 清除自动保存定时器
+                if (oldInstance.autoSaveTimer) {
+                    clearTimeout(oldInstance.autoSaveTimer);
+                }
+                // 移除DOM元素
+                if (oldInstance.view.dom.parentElement) {
+                    oldInstance.view.dom.remove();
+                }
+                oldInstance.view.destroy();
+                delete editorCache.value.instances[oldestId];
+            }
+        }

-    // 销毁编辑器
-    const destroyEditor = () => {
-        if (editorView.value) {
-            editorView.value.destroy();
-            editorView.value = null;
-            isEditorInitialized.value = false;
+        // 添加新的编辑器实例
+        editorCache.value.instances[documentId] = {
+            view,
+            documentId,
+            content,
+            isDirty: false,
+            lastModified: new Date(),
+            autoSaveTimer: null,
+            syntaxTreeCache: null
+        };
+
+        // 添加到LRU列表
+        editorCache.value.lru.push(documentId);
+
+        // 初始化语法树缓存
+        ensureSyntaxTreeCached(view, documentId);
+    };
+
+    // 更新LRU
+    const updateLRU = (documentId: number) => {
+        const lru = editorCache.value.lru;
+        const index = lru.indexOf(documentId);
+        if (index > -1) {
+            lru.splice(index, 1);
+        }
+        lru.push(documentId);
+    };
+
+    // 获取或创建编辑器
+    const getOrCreateEditor = async (
+        documentId: number, 
+        content: string, 
+        operationId: number
+    ): Promise<EditorView> => {
+        // 检查缓存
+        const cached = editorCache.value.instances[documentId];
+        if (cached) {
+            updateLRU(documentId);
+            return cached.view;
+        }
+
+        // 检查操作是否仍然有效
+        if (!isOperationValid(operationId, documentId)) {
+            throw new Error('Operation cancelled');
+        }
+
+        // 创建新的编辑器实例
+        const view = await createEditorInstance(content, operationId, documentId);
+        
+        // 最终检查操作有效性
+        if (!isOperationValid(operationId, documentId)) {
+            // 如果操作已取消，清理创建的实例
+            view.destroy();
+            throw new Error('Operation cancelled');
+        }
+
+        addEditorToCache(documentId, view, content);
+
+        return view;
+    };
+
+    // 显示编辑器
+    const showEditor = (documentId: number) => {
+        const instance = editorCache.value.instances[documentId];
+        if (!instance || !editorCache.value.containerElement) return;
+
+        try {
+            // 移除当前编辑器DOM
+            if (currentEditor.value && currentEditor.value.dom && currentEditor.value.dom.parentElement) {
+                currentEditor.value.dom.remove();
+            }
+
+            // 确保容器为空
+            editorCache.value.containerElement.innerHTML = '';
+
+            // 将目标编辑器DOM添加到容器
+            editorCache.value.containerElement.appendChild(instance.view.dom);
+            currentEditor.value = instance.view;
+
+            // 设置扩展管理器视图
+            setExtensionManagerView(instance.view, documentId);
+
+            // 更新LRU
+            updateLRU(documentId);
+
+            // 重新测量和聚焦编辑器
+            nextTick(() => {
+                // 将光标定位到文档末尾并滚动到该位置
+                const docLength = instance.view.state.doc.length;
+                instance.view.dispatch({
+                    selection: {anchor: docLength, head: docLength},
+                    scrollIntoView: true
+                });
+                
+                // 滚动到文档底部（将光标位置滚动到可见区域）
+                instance.view.focus();
+                
+                // 使用缓存的语法树确保方法
+                ensureSyntaxTreeCached(instance.view, documentId);
+            });
+        } catch (error) {
+            console.error('Error showing editor:', error);
        }
    };

+    // 保存编辑器内容
+    const saveEditorContent = async (documentId: number): Promise<boolean> => {
+        const instance = editorCache.value.instances[documentId];
+        if (!instance || !instance.isDirty) return true;

-        // 监听Tab设置变化
-        watch([
-            () => configStore.config.editing.tabSize,
-            () => configStore.config.editing.enableTabIndent,
-            () => configStore.config.editing.tabType,
-        ], () => {
-            reconfigureTabSettings();
-        });
+        try {
+            const content = instance.view.state.doc.toString();
+            const lastModified = instance.lastModified;
+            
+            await DocumentService.UpdateDocumentContent(documentId, content);

-        // 监听字体大小变化
-        watch([
-            () => configStore.config.editing.fontFamily,
-            () => configStore.config.editing.fontSize,
-            () => configStore.config.editing.lineHeight,
-            () => configStore.config.editing.fontWeight,
-        ], () => {
-            reconfigureFontSettings();
-            applyFontSize();
-        });
-
-        // 监听主题变化
-        watch(() => themeStore.currentTheme, (newTheme) => {
-            if (editorView.value && newTheme) {
-                updateEditorTheme(editorView.value as EditorView, newTheme);
+            // 检查在保存期间内容是否又被修改了
+            if (instance.lastModified === lastModified) {
+                instance.content = content;
+                instance.isDirty = false;
+                instance.lastModified = new Date();
            }
+            // 如果内容在保存期间被修改了，保持 isDirty 状态
+
+            return true;
+        } catch (error) {
+            console.error('Failed to save editor content:', error);
+            return false;
+        }
+    };
+
+    // 内容变化处理
+    const onContentChange = (documentId: number) => {
+        const instance = editorCache.value.instances[documentId];
+        if (!instance) return;
+
+        instance.isDirty = true;
+        instance.lastModified = new Date();
+        
+        // 清理语法树缓存，下次访问时重新构建
+        instance.syntaxTreeCache = null;
+
+        // 清除之前的定时器
+        if (instance.autoSaveTimer) {
+            clearTimeout(instance.autoSaveTimer);
+        }
+
+        // 设置新的自动保存定时器
+        instance.autoSaveTimer = window.setTimeout(() => {
+            saveEditorContent(documentId);
+        }, getAutoSaveDelay());
+    };
+
+    // === 公共API ===
+
+    // 设置编辑器容器
+    const setEditorContainer = (container: HTMLElement | null) => {
+        editorCache.value.containerElement = container;
+
+        // 如果设置容器时已有当前文档，立即加载编辑器
+        if (container && documentStore.currentDocument) {
+            loadEditor(documentStore.currentDocument.id, documentStore.currentDocument.content);
+        }
+    };
+
+    // 加载编辑器
+    const loadEditor = async (documentId: number, content: string) => {
+        // 设置加载状态
+        isLoading.value = true;
+        // 生成新的操作ID
+        const operationId = getNextOperationId();
+        const abortController = new AbortController();
+
+        try {
+            // 验证参数
+            if (!documentId) {
+                throw new Error('Invalid parameters for loadEditor');
+            }
+
+            // 取消之前的操作并设置当前操作
+            cancelPreviousOperations();
+            currentLoadingDocumentId.value = documentId;
+            pendingOperations.value.set(operationId, abortController);
+
+            // 保存当前编辑器内容
+            if (currentEditor.value) {
+                const currentDocId = documentStore.currentDocumentId;
+                if (currentDocId && currentDocId !== documentId) {
+                    await saveEditorContent(currentDocId);
+                    
+                    // 检查操作是否仍然有效
+                    if (!isOperationValid(operationId, documentId)) {
+                        return;
+                    }
+                }
+            }
+
+            // 获取或创建编辑器
+            const view = await getOrCreateEditor(documentId, content, operationId);
+
+            // 检查操作是否仍然有效
+            if (!isOperationValid(operationId, documentId)) {
+                return;
+            }
+
+            // 更新内容（如果需要）
+            const instance = editorCache.value.instances[documentId];
+            if (instance && instance.content !== content) {
+                // 确保编辑器视图有效
+                if (view && view.state && view.dispatch) {
+                    view.dispatch({
+                        changes: {
+                            from: 0,
+                            to: view.state.doc.length,
+                            insert: content
+                        }
+                    });
+                    instance.content = content;
+                    instance.isDirty = false;
+                    // 清理语法树缓存，因为内容已更新
+                    instance.syntaxTreeCache = null;
+                }
+            }
+
+            // 最终检查操作有效性
+            if (!isOperationValid(operationId, documentId)) {
+                return;
+            }
+
+            // 显示编辑器
+            showEditor(documentId);
+
+        } catch (error) {
+            if (error instanceof Error && error.message === 'Operation cancelled') {
+                console.log(`Editor loading cancelled for document ${documentId}`);
+            } else {
+                console.error('Failed to load editor:', error);
+            }
+        } finally {
+            // 清理操作记录
+            pendingOperations.value.delete(operationId);
+            if (currentLoadingDocumentId.value === documentId) {
+                currentLoadingDocumentId.value = null;
+            }
+            
+            // 延迟一段时间后再取消加载状态
+            setTimeout(() => {
+                isLoading.value = false;
+            }, 800);
+        }
+    };
+
+    // 移除编辑器
+    const removeEditor = (documentId: number) => {
+        const instance = editorCache.value.instances[documentId];
+        if (instance) {
+            try {
+                // 如果正在加载这个文档，取消操作
+                if (currentLoadingDocumentId.value === documentId) {
+                    cancelPreviousOperations();
+                    currentLoadingDocumentId.value = null;
+                }
+
+                // 清除自动保存定时器
+                if (instance.autoSaveTimer) {
+                    clearTimeout(instance.autoSaveTimer);
+                    instance.autoSaveTimer = null;
+                }
+
+                // 从扩展管理器中移除视图
+                removeExtensionManagerView(documentId);
+
+                // 移除DOM元素
+                if (instance.view && instance.view.dom && instance.view.dom.parentElement) {
+                    instance.view.dom.remove();
+                }
+
+                // 销毁编辑器
+                if (instance.view && instance.view.destroy) {
+                    instance.view.destroy();
+                }
+
+                // 清理引用
+                if (currentEditor.value === instance.view) {
+                    currentEditor.value = null;
+                }
+
+                delete editorCache.value.instances[documentId];
+
+                const lruIndex = editorCache.value.lru.indexOf(documentId);
+                if (lruIndex > -1) {
+                    editorCache.value.lru.splice(lruIndex, 1);
+                }
+            } catch (error) {
+                console.error('Error removing editor:', error);
+            }
+        }
+    };
+
+    // 更新文档统计
+    const updateDocumentStats = (stats: DocumentStats) => {
+        documentStats.value = stats;
+    };
+
+    // 应用字体设置
+    const applyFontSettings = () => {
+        Object.values(editorCache.value.instances).forEach(instance => {
+            updateFontConfig(instance.view, {
+                fontFamily: configStore.config.editing.fontFamily,
+                fontSize: configStore.config.editing.fontSize,
+                lineHeight: configStore.config.editing.lineHeight,
+                fontWeight: configStore.config.editing.fontWeight
+            });
+        });
+    };
+
+    // 应用主题设置
+    const applyThemeSettings = () => {
+        Object.values(editorCache.value.instances).forEach(instance => {
+            updateEditorTheme(instance.view,
+                themeStore.currentTheme || SystemThemeType.SystemThemeAuto
+            );
+        });
+    };
+
+    // 应用Tab设置
+    const applyTabSettings = () => {
+        Object.values(editorCache.value.instances).forEach(instance => {
+            updateTabConfig(
+                instance.view,
+                configStore.config.editing.tabSize,
+                configStore.config.editing.enableTabIndent,
+                configStore.config.editing.tabType
+            );
+        });
+    };
+
+    // 应用快捷键设置
+    const applyKeymapSettings = async () => {
+        // 确保所有编辑器实例的快捷键都更新
+        await Promise.all(
+            Object.values(editorCache.value.instances).map(instance =>
+                updateKeymapExtension(instance.view)
+            )
+        );
+    };
+
+    // 清空所有编辑器
+    const clearAllEditors = () => {
+        // 取消所有挂起的操作
+        cancelPreviousOperations();
+        currentLoadingDocumentId.value = null;
+        
+        Object.values(editorCache.value.instances).forEach(instance => {
+            // 清除自动保存定时器
+            if (instance.autoSaveTimer) {
+                clearTimeout(instance.autoSaveTimer);
+            }
+            
+            // 从扩展管理器移除
+            removeExtensionManagerView(instance.documentId);
+            
+            // 移除DOM元素
+            if (instance.view.dom.parentElement) {
+                instance.view.dom.remove();
+            }
+            // 销毁编辑器
+            instance.view.destroy();
        });

-            return {
-            // 状态
-            documentStats,
-            editorView,
-            isEditorInitialized,
-            editorContainer,
+        editorCache.value.instances = {};
+        editorCache.value.lru = [];
+        currentEditor.value = null;
+    };

-            // 方法
-            setEditorView,
-            setEditorContainer,
-            updateDocumentStats,
-            applyFontSize,
-            createEditor,
-            reconfigureTabSettings,
-            reconfigureFontSettings,
-            handleManualSave,
-            destroyEditor,
-            scrollEditorToBottom,
-        };
+    // 更新扩展
+    const updateExtension = async (id: ExtensionID, enabled: boolean, config?: any) => {
+        // 如果只是更新启用状态
+        if (config === undefined) {
+            await ExtensionService.UpdateExtensionEnabled(id, enabled);
+        } else {
+            // 如果需要更新配置
+            await ExtensionService.UpdateExtensionState(id, enabled, config);
+        }
+
+        // 更新前端编辑器扩展 - 应用于所有实例
+        const manager = getExtensionManager();
+        if (manager) {
+            // 使用立即更新模式，跳过防抖
+            manager.updateExtensionImmediate(id, enabled, config || {});
+        }
+
+        // 重新加载扩展配置
+        await extensionStore.loadExtensions();
+
+        // 不再需要单独更新当前编辑器的快捷键映射，因为扩展管理器会更新所有实例
+        // 但我们仍需要确保快捷键配置在所有编辑器上更新
+        await applyKeymapSettings();
+    };
+
+    // 监听文档切换
+    watch(() => documentStore.currentDocument, (newDoc) => {
+        if (newDoc && editorCache.value.containerElement) {
+            // 使用 nextTick 确保DOM更新完成后再加载编辑器
+            nextTick(() => {
+                loadEditor(newDoc.id, newDoc.content);
+            });
+        }
+    });
+
+    // 监听配置变化
+    watch(() => configStore.config.editing.fontSize, applyFontSettings);
+    watch(() => configStore.config.editing.fontFamily, applyFontSettings);
+    watch(() => configStore.config.editing.lineHeight, applyFontSettings);
+    watch(() => configStore.config.editing.fontWeight, applyFontSettings);
+    watch(() => configStore.config.editing.tabSize, applyTabSettings);
+    watch(() => configStore.config.editing.enableTabIndent, applyTabSettings);
+    watch(() => configStore.config.editing.tabType, applyTabSettings);
+    watch(() => themeStore.currentTheme, applyThemeSettings);
+
+    return {
+        // 状态
+        currentEditor,
+        documentStats,
+        isLoading,
+
+        // 方法
+        setEditorContainer,
+        loadEditor,
+        removeEditor,
+        clearAllEditors,
+        onContentChange,
+
+        // 配置更新方法
+        applyFontSettings,
+        applyThemeSettings,
+        applyTabSettings,
+        applyKeymapSettings,
+
+        // 扩展管理方法
+        updateExtension,
+
+        editorView: currentEditor,
+    };
 });
--- a/frontend/src/stores/extensionStore.ts
+++ b/frontend/src/stores/extensionStore.ts
@@ -0,0 +1,49 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { Extension, ExtensionID } from '@/../bindings/voidraft/internal/models/models'
+import { ExtensionService } from '@/../bindings/voidraft/internal/services'
+
+export const useExtensionStore = defineStore('extension', () => {
+    // 扩展配置数据
+    const extensions = ref<Extension[]>([])
+
+    // 获取启用的扩展
+    const 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()
+        } catch (err) {
+            console.error('[ExtensionStore] Failed to load extensions:', err)
+        }
+    }
+
+    /**
+     * 获取扩展配置
+     */
+    const getExtensionConfig = (id: ExtensionID): any => {
+        const extension = extensions.value.find(ext => ext.id === id)
+        return extension?.config ?? {}
+    }
+
+    return {
+        // 状态
+        extensions,
+        enabledExtensions,
+        enabledExtensionIds,
+
+        // 方法
+        loadExtensions,
+        getExtensionConfig,
+    }
+}) 
--- a/frontend/src/stores/keybindingStore.ts
+++ b/frontend/src/stores/keybindingStore.ts
@@ -0,0 +1,86 @@
+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'
+
+export const useKeybindingStore = defineStore('keybinding', () => {
+    // 快捷键配置数据
+    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> => {
+        try {
+            keyBindings.value = await GetAllKeyBindings()
+        } catch (err) {
+            throw err
+        }
+    }
+
+    /**
+     * 检查是否存在指定命令的快捷键
+     */
+    const hasCommand = (command: KeyBindingCommand): boolean => {
+        return keyBindings.value.some(kb => kb.command === command && kb.enabled)
+    }
+
+
+    /**
+     * 获取扩展相关的所有扩展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,
+    }
+}) 
--- a/frontend/src/stores/logStore.ts
+++ b/frontend/src/stores/logStore.ts
@@ -1,166 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-
-// 日志级别定义
-export enum LogLevel {
-  INFO = 'info',
-  WARNING = 'warning',
-  ERROR = 'error'
-}
-
-// 日志项结构
-export interface LogItem {
-  id: number;
-  level: LogLevel;
-  message: string;
-  timestamp: Date;
-  shown: boolean; // 是否已显示过
-}
-
-export const useLogStore = defineStore('log', () => {
-  // 日志列表
-  const logs = ref<LogItem[]>([]);
-  
-  // 显示队列 - 存储待显示的日志
-  const displayQueue = ref<LogItem[]>([]);
-  
-  // 当前显示的日志
-  const currentLog = ref<LogItem | null>(null);
-  
-  // 最近一条日志，用于在工具栏显示
-  const latestLog = ref<LogItem | null>(null);
-  
-  // 是否显示日志
-  const showLog = ref(false);
-  
-  // 自动隐藏计时器
-  let hideTimer: number | null = null;
-
-  // 根据日志级别获取显示时间
-  function getDisplayTimeByLevel(level: LogLevel): number {
-    switch(level) {
-      case LogLevel.ERROR:
-        return 8000; // 错误显示更长时间
-      case LogLevel.WARNING:
-        return 6000; // 警告显示中等时间
-      case LogLevel.INFO:
-      default:
-        return 4000; // 信息显示较短时间
-    }
-  }
-  
-  // 显示下一条日志
-  function showNextLog() {
-    if (hideTimer) {
-      window.clearTimeout(hideTimer);
-      hideTimer = null;
-    }
-
-    // 如果队列为空，则不显示
-    if (displayQueue.value.length === 0) {
-      showLog.value = false;
-      currentLog.value = null;
-      return;
-    }
-
-    // 取出队列中第一条日志显示
-    const nextLog = displayQueue.value.shift()!;
-    currentLog.value = nextLog;
-    showLog.value = true;
-
-    // 设置自动隐藏和切换到下一条
-    const displayTime = getDisplayTimeByLevel(nextLog.level);
-    hideTimer = window.setTimeout(() => {
-      showNextLog();
-    }, displayTime);
-  }
-  
-  // 添加日志
-  function addLog(level: LogLevel, message: string, autoHideDelay = 0) {
-    const id = Date.now();
-    const logItem: LogItem = {
-      id,
-      level,
-      message,
-      timestamp: new Date(),
-      shown: false
-    };
-    
-    // 添加到日志列表
-    logs.value.push(logItem);
-    
-    // 保持日志列表在合理大小
-    if (logs.value.length > 100) {
-      logs.value = logs.value.slice(-100);
-    }
-    
-    // 设置最新日志
-    latestLog.value = logItem;
-    
-    // 添加到显示队列
-    displayQueue.value.push(logItem);
-    
-    // 如果当前没有显示日志，则开始显示
-    if (!currentLog.value && !hideTimer) {
-      showNextLog();
-    }
-    
-    return id;
-  }
-  
-  // 添加不同级别的日志的便捷方法
-  function info(message: string) {
-    return addLog(LogLevel.INFO, message);
-  }
-  
-  function warning(message: string) {
-    return addLog(LogLevel.WARNING, message);
-  }
-  
-  function error(message: string) {
-    return addLog(LogLevel.ERROR, message);
-  }
-  
-  // 清除日志
-  function clearLogs() {
-    logs.value = [];
-    displayQueue.value = [];
-    latestLog.value = null;
-    currentLog.value = null;
-    showLog.value = false;
-    
-    if (hideTimer) {
-      window.clearTimeout(hideTimer);
-      hideTimer = null;
-    }
-  }
-  
-  // 手动隐藏当前日志
-  function hideCurrentLog() {
-    if (hideTimer) {
-      window.clearTimeout(hideTimer);
-      hideTimer = null;
-    }
-    showLog.value = false;
-    currentLog.value = null;
-    displayQueue.value = []; // 清空队列
-  }
-  
-  return {
-    // 状态
-    logs,
-    latestLog,
-    currentLog,
-    showLog,
-    displayQueue,
-    
-    // 方法
-    addLog,
-    info,
-    warning,
-    error,
-    clearLogs,
-    hideCurrentLog,
-    showNextLog
-  };
-}); 
--- a/frontend/src/stores/systemStore.ts
+++ b/frontend/src/stores/systemStore.ts
@@ -1,101 +1,66 @@
-import { defineStore } from 'pinia';
-import { ref, computed } from 'vue';
+import {defineStore} from 'pinia';
+import {computed, ref} from 'vue';
 import * as runtime from '@wailsio/runtime';

 export interface SystemEnvironment {
-  OS: string;
-  Arch: string;
-  Debug: boolean;
-  OSInfo: {
-    Name: string;
-    Branding: string;
-    Version: string;
-    ID: string;
-  };
-  PlatformInfo?: Record<string, string>;
+    OS: string;
+    Arch: string;
+    Debug: boolean;
+    OSInfo: {
+        Name: string;
+        Branding: string;
+        Version: string;
+        ID: string;
+    };
+    PlatformInfo?: Record<string, string>;
 }

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

    // 计算属性
-    isWindows,
-    isMacOS,
-    isLinux,
-    osName,
-    architecture,
-    titleBarHeight,
+    const isWindows = computed(() => environment.value?.OS === 'windows');
+    const isMacOS = computed(() => environment.value?.OS === 'darwin');
+    const isLinux = computed(() => environment.value?.OS === 'linux');

-    // 方法
-    initializeSystemInfo,
-    getPlatformInfo,
-    supportsFeature
-  };
+
+    // 获取标题栏高度
+    const titleBarHeight = computed(() => {
+        if (isWindows.value) return '32px';
+        if (isMacOS.value) return '28px';
+        return '34px'; // Linux 默认
+    });
+
+    // 初始化系统信息
+    const initializeSystemInfo = async (): Promise<void> => {
+        if (isLoading.value) return;
+
+        isLoading.value = true;
+
+        try {
+            environment.value = await runtime.System.Environment();
+        } catch (err) {
+            environment.value = null;
+        } finally {
+            isLoading.value = false;
+        }
+    };
+
+    return {
+        // 状态
+        environment,
+        isLoading,
+
+        // 计算属性
+        isWindows,
+        isMacOS,
+        isLinux,
+        titleBarHeight,
+
+        // 方法
+        initializeSystemInfo,
+    };
 }); 
--- a/frontend/src/stores/themeStore.ts
+++ b/frontend/src/stores/themeStore.ts
@@ -1,19 +1,41 @@
-import { defineStore } from 'pinia';
-import { computed } from 'vue';
-import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models';
-import { useConfigStore } from './configStore';
+import {defineStore} from 'pinia';
+import {computed, reactive} from 'vue';
+import {SystemThemeType} from '@/../bindings/voidraft/internal/models/models';
+import {useConfigStore} from './configStore';
+import {useEditorStore} from './editorStore';
+import {defaultDarkColors} from '@/views/editor/theme/dark';
+import {defaultLightColors} from '@/views/editor/theme/light';

 /**
 * 主题管理 Store
- * 职责：
+ * 职责：管理主题状态和颜色配置
 */
 export const useThemeStore = defineStore('theme', () => {
  const configStore = useConfigStore();
  
+  // 响应式状态 - 存储当前使用的主题颜色
+  const themeColors = reactive({
+    darkTheme: { ...defaultDarkColors },
+    lightTheme: { ...defaultLightColors }
+  });
+  
+  // 计算属性 - 当前选择的主题类型
  const currentTheme = computed(() => 
    configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto
  );

+  // 初始化主题颜色 - 从配置加载
+  const initializeThemeColors = () => {
+    const customTheme = configStore.config?.appearance?.customTheme;
+    if (customTheme) {
+      if (customTheme.darkTheme) {
+        Object.assign(themeColors.darkTheme, customTheme.darkTheme);
+      }
+      if (customTheme.lightTheme) {
+        Object.assign(themeColors.lightTheme, customTheme.lightTheme);
+      }
+    }
+  };

  // 应用主题到 DOM
  const applyThemeToDOM = (theme: SystemThemeType) => {
@@ -23,14 +45,101 @@ export const useThemeStore = defineStore('theme', () => {
    );
  };

+  // 初始化主题
+  const initializeTheme = () => {
+    const theme = configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto;
+    applyThemeToDOM(theme);
+    initializeThemeColors();
+  };
+
  // 设置主题
  const setTheme = async (theme: SystemThemeType) => {
    await configStore.setSystemTheme(theme);
    applyThemeToDOM(theme);
+    refreshEditorTheme();
+  };
+  
+  // 更新主题颜色
+  const updateThemeColors = (darkColors: any = null, lightColors: any = null): boolean => {
+    let hasChanges = false;
+    
+    if (darkColors) {
+      Object.entries(darkColors).forEach(([key, value]) => {
+        if (value !== undefined && themeColors.darkTheme[key] !== value) {
+          themeColors.darkTheme[key] = value;
+          hasChanges = true;
+        }
+      });
+    }
+    
+    if (lightColors) {
+      Object.entries(lightColors).forEach(([key, value]) => {
+        if (value !== undefined && themeColors.lightTheme[key] !== value) {
+          themeColors.lightTheme[key] = value;
+          hasChanges = true;
+        }
+      });
+    }
+    
+    return hasChanges;
+  };
+  
+  // 保存主题颜色到配置
+  const saveThemeColors = async () => {
+    const customTheme = {
+      darkTheme: { ...themeColors.darkTheme },
+      lightTheme: { ...themeColors.lightTheme }
+    };
+    
+    await configStore.setCustomTheme(customTheme);
+  };
+  
+  // 重置主题颜色
+  const resetThemeColors = async (themeType: 'darkTheme' | 'lightTheme') => {
+    try {
+      // 1. 更新内存中的颜色状态
+      if (themeType === 'darkTheme') {
+        Object.assign(themeColors.darkTheme, defaultDarkColors);
+      }
+      
+      if (themeType === 'lightTheme') {
+        Object.assign(themeColors.lightTheme, defaultLightColors);
+      }
+      
+      // 2. 保存到配置
+      await saveThemeColors();
+      
+      // 3. 刷新编辑器主题
+      refreshEditorTheme();
+      
+      return true;
+    } catch (error) {
+      console.error('Failed to reset theme colors:', error);
+      return false;
+    }
+  };
+  
+  // 刷新编辑器主题（在主题颜色更改后调用）
+  const refreshEditorTheme = () => {
+    // 使用当前主题重新应用DOM主题
+    const theme = currentTheme.value;
+    applyThemeToDOM(theme);
+    
+    const editorStore = useEditorStore();
+    if (editorStore) {
+      editorStore.applyThemeSettings();
+    }
  };

  return {
    currentTheme,
+    themeColors,
    setTheme,
+    initializeTheme,
+    applyThemeToDOM,
+    updateThemeColors,
+    saveThemeColors,
+    resetThemeColors,
+    refreshEditorTheme
  };
-}); 
+});
--- a/frontend/src/stores/translationStore.ts
+++ b/frontend/src/stores/translationStore.ts
@@ -0,0 +1,594 @@
+import {defineStore} from 'pinia';
+import {computed, ref, watch} from 'vue';
+import {TranslationService} from '@/../bindings/voidraft/internal/services';
+import {franc} from 'franc-min';
+
+export interface TranslationResult {
+    sourceText: string;
+    translatedText: string;
+    sourceLang: string;
+    targetLang: string;
+    translatorType: string;
+    error?: string;
+}
+
+/**
+ * ISO 639-3 到 ISO 639-1/2 语言代码的映射
+ * franc-min 返回的是 ISO 639-3 代码，需要转换为翻译API常用的 ISO 639-1/2 代码
+ */
+const ISO_LANGUAGE_MAP: Record<string, string> = {
+    // 常见语言
+    'cmn': 'zh',    // 中文 (Mandarin Chinese)
+    'eng': 'en',    // 英文 (English)
+    'jpn': 'ja',    // 日语 (Japanese)
+    'kor': 'ko',    // 韩语 (Korean)
+    'fra': 'fr',    // 法语 (French)
+    'deu': 'de',    // 德语 (German)
+    'spa': 'es',    // 西班牙语 (Spanish)
+    'rus': 'ru',    // 俄语 (Russian)
+    'ita': 'it',    // 意大利语 (Italian)
+    'nld': 'nl',    // 荷兰语 (Dutch)
+    'por': 'pt',    // 葡萄牙语 (Portuguese)
+    'vie': 'vi',    // 越南语 (Vietnamese)
+    'arb': 'ar',    // 阿拉伯语 (Arabic)
+    'hin': 'hi',    // 印地语 (Hindi)
+    'ben': 'bn',    // 孟加拉语 (Bengali)
+    'tha': 'th',    // 泰语 (Thai)
+    'tur': 'tr',    // 土耳其语 (Turkish)
+    'heb': 'he',    // 希伯来语 (Hebrew)
+    'pol': 'pl',    // 波兰语 (Polish)
+    'swe': 'sv',    // 瑞典语 (Swedish)
+    'fin': 'fi',    // 芬兰语 (Finnish)
+    'dan': 'da',    // 丹麦语 (Danish)
+    'ron': 'ro',    // 罗马尼亚语 (Romanian)
+    'hun': 'hu',    // 匈牙利语 (Hungarian)
+    'ces': 'cs',    // 捷克语 (Czech)
+    'ell': 'el',    // 希腊语 (Greek)
+    'bul': 'bg',    // 保加利亚语 (Bulgarian)
+    'cat': 'ca',    // 加泰罗尼亚语 (Catalan)
+    'ukr': 'uk',    // 乌克兰语 (Ukrainian)
+    'hrv': 'hr',    // 克罗地亚语 (Croatian)
+    'ind': 'id',    // 印尼语 (Indonesian)
+    'mal': 'ms',    // 马来语 (Malay)
+    'nob': 'no',    // 挪威语 (Norwegian)
+    'lat': 'la',    // 拉丁语 (Latin)
+    'lit': 'lt',    // 立陶宛语 (Lithuanian)
+    'slk': 'sk',    // 斯洛伐克语 (Slovak)
+    'slv': 'sl',    // 斯洛文尼亚语 (Slovenian)
+    'srp': 'sr',    // 塞尔维亚语 (Serbian)
+    'est': 'et',    // 爱沙尼亚语 (Estonian)
+    'lav': 'lv',    // 拉脱维亚语 (Latvian)
+    'fil': 'tl',    // 菲律宾语/他加禄语 (Filipino/Tagalog)
+
+    // 未知/不确定
+    'und': 'auto'   // 未知语言
+};
+
+// 语言代码的通用映射关系，适用于大部分翻译器
+const COMMON_LANGUAGE_ALIASES: Record<string, string[]> = {
+    'zh': ['zh-CN', 'zh-TW', 'zh-Hans', 'zh-Hant', 'chinese', 'zhong'],
+    'en': ['en-US', 'en-GB', 'english', 'eng'],
+    'ja': ['jp', 'jpn', 'japanese'],
+    'ko': ['kr', 'kor', 'korean'],
+    'fr': ['fra', 'french'],
+    'de': ['deu', 'german', 'ger'],
+    'es': ['spa', 'spanish', 'esp'],
+    'ru': ['rus', 'russian'],
+    'pt': ['por', 'portuguese'],
+    'it': ['ita', 'italian'],
+    'nl': ['nld', 'dutch'],
+    'ar': ['ara', 'arabic'],
+    'hi': ['hin', 'hindi'],
+    'th': ['tha', 'thai'],
+    'tr': ['tur', 'turkish'],
+    'vi': ['vie', 'vietnamese'],
+    'id': ['ind', 'indonesian'],
+    'ms': ['mal', 'malay'],
+    'fi': ['fin', 'finnish'],
+};
+
+/**
+ * 翻译存储
+ */
+export const useTranslationStore = defineStore('translation', () => {
+    // 状态
+    const availableTranslators = ref<string[]>([]);
+    const isTranslating = ref(false);
+    const lastResult = ref<TranslationResult | null>(null);
+    const error = ref<string | null>(null);
+    // 语言列表 - 将类型设置为any以避免类型错误
+    const languageMaps = ref<Record<string, Record<string, any>>>({});
+    
+    // 语言使用频率计数 - 使用pinia持久化
+    const languageUsageCount = ref<Record<string, number>>({});
+    // 最近使用的翻译语言 - 最多记录10个
+    const recentLanguages = ref<string[]>([]);
+
+    // 默认配置
+    // 注意：确保默认值在初始化和持久化后正确设置
+    const defaultTargetLang = ref('zh');
+    const defaultTranslator = ref('bing');
+    // 检测到的源语言，初始为空字符串表示尚未检测
+    const detectedSourceLang = ref('');
+
+    // 计算属性
+    const hasTranslators = computed(() => availableTranslators.value.length > 0);
+    const currentLanguageMap = computed(() => {
+        return languageMaps.value[defaultTranslator.value] || {};
+    });
+    
+    // 监听默认语言变更，确保目标语言在当前翻译器支持的范围内
+    watch([defaultTranslator], () => {
+        // 当切换翻译器时，验证默认目标语言是否支持
+        if (Object.keys(languageMaps.value).length > 0) {
+            const validatedLang = validateLanguage(defaultTargetLang.value, defaultTranslator.value);
+            if (validatedLang !== defaultTargetLang.value) {
+                console.log(`目标语言 ${defaultTargetLang.value} 不受支持，已切换到 ${validatedLang}`);
+                defaultTargetLang.value = validatedLang;
+            }
+        }
+    });
+
+    /**
+     * 加载可用翻译器
+     */
+    const loadAvailableTranslators = async (): Promise<void> => {
+        try {
+            const translators = await TranslationService.GetAvailableTranslators();
+            availableTranslators.value = translators;
+            
+            // 如果默认翻译器不在可用列表中，则使用第一个可用的翻译器
+            if (translators.length > 0 && !translators.includes(defaultTranslator.value)) {
+                defaultTranslator.value = translators[0];
+            }
+            
+            // 加载所有翻译器的语言列表
+            await Promise.all(translators.map(loadTranslatorLanguages));
+            
+            // 在加载完所有语言列表后，确保默认目标语言有效
+            if (defaultTargetLang.value) {
+                const validatedLang = validateLanguage(defaultTargetLang.value, defaultTranslator.value);
+                if (validatedLang !== defaultTargetLang.value) {
+                    console.log(`目标语言 ${defaultTargetLang.value} 不受支持，已切换到 ${validatedLang}`);
+                    defaultTargetLang.value = validatedLang;
+                }
+            }
+        } catch (err) {
+            error.value = 'no available translators';
+        }
+    };
+
+    /**
+     * 加载指定翻译器的语言列表
+     * @param translatorType 翻译器类型
+     */
+    const loadTranslatorLanguages = async (translatorType: string): Promise<void> => {
+        try {
+            const languages = await TranslationService.GetTranslatorLanguages(translatorType as any);
+            
+            if (languages) {
+                languageMaps.value[translatorType] = languages;
+            }
+        } catch (err) {
+            console.error(`Failed to load languages for ${translatorType}:`, err);
+        }
+    };
+
+    /**
+     * 检测文本语言
+     * @param text 待检测的文本
+     * @returns 检测到的语言代码，如未检测到则返回空字符串
+     */
+    const detectLanguage = (text: string): string => {
+        if (!text || text.trim().length < 10) {
+            return '';
+        }
+        
+        try {
+            // franc返回ISO 639-3代码
+            const detectedIso639_3 = franc(text);
+            
+            // 如果是未知语言，返回空字符串
+            if (detectedIso639_3 === 'und') {
+                return '';
+            }
+            
+            // 转换为常用语言代码
+            return ISO_LANGUAGE_MAP[detectedIso639_3] || '';
+        } catch (err) {
+            console.error('语言检测失败:', err);
+            return '';
+        }
+    };
+
+    /**
+     * 在翻译器语言列表中查找相似的语言代码
+     * @param langCode 待查找的语言代码
+     * @param translatorType 翻译器类型
+     * @returns 找到的语言代码或空字符串
+     */
+    const findSimilarLanguage = (langCode: string, translatorType: string): string => {
+        if (!langCode) return '';
+        
+        const languageMap = languageMaps.value[translatorType] || {};
+        const langCodeLower = langCode.toLowerCase();
+        
+        // 1. 尝试精确匹配
+        if (languageMap[langCode]) {
+            return langCode;
+        }
+        
+        // 2. 检查通用别名映射
+        const possibleAliases = Object.entries(COMMON_LANGUAGE_ALIASES).find(
+            ([code, aliases]) => code === langCodeLower || aliases.includes(langCodeLower)
+        );
+        
+        if (possibleAliases) {
+            // 检查主代码是否可用
+            const [mainCode, aliases] = possibleAliases;
+            if (languageMap[mainCode]) {
+                return mainCode;
+            }
+            
+            // 检查别名是否可用
+            for (const alias of aliases) {
+                if (languageMap[alias]) {
+                    return alias;
+                }
+            }
+        }
+        
+        // 3. 尝试正则表达式匹配
+        // 创建一个基于语言代码的正则表达式：例如 'en' 会匹配 'en-US', 'en_GB' 等
+        const codePattern = new RegExp(`^${langCodeLower}[-_]?`, 'i');
+        
+        // 在语言列表中查找匹配的语言代码
+        const availableCodes = Object.keys(languageMap);
+        const matchedCode = availableCodes.find(code => 
+            codePattern.test(code.toLowerCase())
+        );
+        
+        if (matchedCode) {
+            return matchedCode;
+        }
+        
+        // 4. 反向匹配，例如 'zh-CN' 应该能匹配到 'zh'
+        if (langCodeLower.includes('-') || langCodeLower.includes('_')) {
+            const baseCode = langCodeLower.split(/[-_]/)[0];
+            if (languageMap[baseCode]) {
+                return baseCode;
+            }
+            
+            // 通过基础代码查找别名
+            const baseCodeAliases = Object.entries(COMMON_LANGUAGE_ALIASES).find(
+                ([code, aliases]) => code === baseCode || aliases.includes(baseCode)
+            );
+            
+            if (baseCodeAliases) {
+                const [mainCode, aliases] = baseCodeAliases;
+                if (languageMap[mainCode]) {
+                    return mainCode;
+                }
+                
+                for (const alias of aliases) {
+                    if (languageMap[alias]) {
+                        return alias;
+                    }
+                }
+            }
+        }
+        
+        // 5. 最后尝试查找与部分代码匹配的任何语言
+        const partialMatch = availableCodes.find(code => 
+            code.toLowerCase().includes(langCodeLower) || 
+            langCodeLower.includes(code.toLowerCase())
+        );
+        
+        if (partialMatch) {
+            return partialMatch;
+        }
+        
+        // 如果所有匹配都失败，返回英语作为默认值
+        return 'en';
+    };
+
+    /**
+     * 验证语言代码是否受当前翻译器支持
+     * @param langCode 语言代码
+     * @param translatorType 翻译器类型（可选，默认使用当前翻译器）
+     * @returns 验证后的语言代码
+     */
+    const validateLanguage = (langCode: string, translatorType?: string): string => {
+        // 如果语言代码为空，返回auto作为API调用的默认值
+        if (!langCode) return 'auto';
+        
+        const currentType = translatorType || defaultTranslator.value;
+        
+        // 尝试在指定翻译器的语言列表中查找相似的语言代码
+        return findSimilarLanguage(langCode, currentType) || 'auto';
+    };
+
+    /**
+     * 增加语言使用次数并添加到最近使用列表
+     * @param langCode 语言代码
+     * @param weight 权重，默认为1
+     */
+    const incrementLanguageUsage = (langCode: string, weight: number = 1): void => {
+        if (!langCode || langCode === 'auto') return;
+        
+        // 转换为小写，确保一致性
+        const normalizedCode = langCode.toLowerCase();
+        
+        // 更新使用次数，乘以权重
+        const currentCount = languageUsageCount.value[normalizedCode] || 0;
+        languageUsageCount.value[normalizedCode] = currentCount + weight;
+        
+        // 更新最近使用的语言列表
+        updateRecentLanguages(normalizedCode);
+    };
+    
+    /**
+     * 更新最近使用的语言列表
+     * @param langCode 语言代码
+     */
+    const updateRecentLanguages = (langCode: string): void => {
+        if (!langCode) return;
+        
+        // 如果已经在列表中，先移除它
+        const index = recentLanguages.value.indexOf(langCode);
+        if (index !== -1) {
+            recentLanguages.value.splice(index, 1);
+        }
+        
+        // 添加到列表开头
+        recentLanguages.value.unshift(langCode);
+        
+        // 保持列表最多10个元素
+        if (recentLanguages.value.length > 10) {
+            recentLanguages.value = recentLanguages.value.slice(0, 10);
+        }
+    };
+    
+    /**
+     * 获取按使用频率排序的语言列表
+     * @param translatorType 翻译器类型
+     * @param grouped 是否分组返回（常用/其他）
+     * @returns 排序后的语言列表或分组后的语言列表
+     */
+    const getSortedLanguages = (translatorType: string, grouped: boolean = false): [string, any][] | {frequent: [string, any][], others: [string, any][]} => {
+        const languageMap = languageMaps.value[translatorType] || {};
+        
+        // 获取语言列表
+        const languages = Object.entries(languageMap);
+        
+        // 按使用频率排序
+        const sortedLanguages = languages.sort(([codeA, infoA], [codeB, infoB]) => {
+            // 获取使用次数，默认为0
+            const countA = languageUsageCount.value[codeA.toLowerCase()] || 0;
+            const countB = languageUsageCount.value[codeB.toLowerCase()] || 0;
+            
+            // 首先按使用频率降序排序
+            if (countB !== countA) {
+                return countB - countA;
+            }
+            
+            // 其次按最近使用情况排序
+            const recentIndexA = recentLanguages.value.indexOf(codeA.toLowerCase());
+            const recentIndexB = recentLanguages.value.indexOf(codeB.toLowerCase());
+            
+            if (recentIndexA !== -1 && recentIndexB !== -1) {
+                return recentIndexA - recentIndexB;
+            } else if (recentIndexA !== -1) {
+                return -1;
+            } else if (recentIndexB !== -1) {
+                return 1;
+            }
+            
+            // 如果使用频率和最近使用情况都相同，按名称排序
+            const nameA = infoA.Name || infoA.name || codeA;
+            const nameB = infoB.Name || infoB.name || codeB;
+            
+            return nameA.localeCompare(nameB);
+        });
+        
+        // 如果不需要分组，直接返回排序后的列表
+        if (!grouped) {
+            return sortedLanguages;
+        }
+        
+        // 分组：将有使用记录的语言归为常用组，其他归为其他组
+        const frequentLanguages: [string, any][] = [];
+        const otherLanguages: [string, any][] = [];
+        
+        sortedLanguages.forEach(lang => {
+            const [code] = lang;
+            const usageCount = languageUsageCount.value[code.toLowerCase()] || 0;
+            const isInRecent = recentLanguages.value.includes(code.toLowerCase());
+            
+            if (usageCount > 0 || isInRecent) {
+                frequentLanguages.push(lang);
+            } else {
+                otherLanguages.push(lang);
+            }
+        });
+        
+        return {
+            frequent: frequentLanguages,
+            others: otherLanguages
+        };
+    };
+
+    /**
+     * 翻译文本
+     * @param text 待翻译文本
+     * @param to 目标语言代码
+     * @param translatorType 翻译器类型
+     * @returns 翻译结果
+     */
+    const translateText = async (
+        text: string, 
+        to?: string,
+        translatorType?: string
+    ): Promise<TranslationResult> => {
+        // 使用提供的参数或默认值
+        const targetLang = to || defaultTargetLang.value;
+        const translator = translatorType || defaultTranslator.value;
+        
+        // 处理空文本
+        if (!text) {
+            return {
+                sourceText: '',
+                translatedText: '',
+                sourceLang: '',
+                targetLang: targetLang,
+                translatorType: translator,
+                error: 'no text to translate'
+            };
+        }
+
+        // 检测源语言
+        const detected = detectLanguage(text);
+        if (detected) {
+            detectedSourceLang.value = detected;
+        }
+        
+        // 使用检测到的语言或回退到auto
+        let actualSourceLang = detectedSourceLang.value || 'auto';
+
+        // 确认语言代码有效并针对当前翻译器进行匹配
+        actualSourceLang = validateLanguage(actualSourceLang, translator);
+        const actualTargetLang = validateLanguage(targetLang, translator);
+        
+        // 如果源语言和目标语言相同，则直接返回原文
+        if (actualSourceLang !== 'auto' && actualSourceLang === actualTargetLang) {
+            return {
+                sourceText: text,
+                translatedText: text,
+                sourceLang: actualSourceLang,
+                targetLang: actualTargetLang,
+                translatorType: translator
+            };
+        }
+
+        isTranslating.value = true;
+        error.value = null;
+        
+        try {
+            console.log(`翻译文本: 从 ${actualSourceLang} 到 ${actualTargetLang} 使用 ${translator} 翻译器`);
+            
+            // 调用翻译服务
+            const translatedText = await TranslationService.TranslateWith(
+                text, 
+                actualSourceLang, 
+                actualTargetLang, 
+                translator
+            );
+            
+            // 增加目标语言的使用频率，使用较大的权重
+            incrementLanguageUsage(actualTargetLang, 3);
+            
+            // 如果源语言不是auto，也记录其使用情况，但权重较小
+            if (actualSourceLang !== 'auto') {
+                incrementLanguageUsage(actualSourceLang, 1);
+            }
+            
+            // 构建结果
+            const result: TranslationResult = {
+                sourceText: text,
+                translatedText,
+                sourceLang: actualSourceLang,
+                targetLang: actualTargetLang,
+                translatorType: translator
+            };
+            
+            lastResult.value = result;
+            return result;
+        } catch (err) {
+            // 处理错误
+            const errorMessage = err instanceof Error ? err.message : 'translation failed';
+
+            error.value = errorMessage;
+
+            const result: TranslationResult = {
+                sourceText: text,
+                translatedText: '',
+                sourceLang: actualSourceLang,
+                targetLang: actualTargetLang,
+                translatorType: translator,
+                error: errorMessage
+            };
+            
+            lastResult.value = result;
+            return result;
+        } finally {
+            isTranslating.value = false;
+        }
+    };
+
+    /**
+     * 设置默认翻译配置
+     * @param config 配置对象
+     */
+    const setDefaultConfig = (config: {
+        targetLang?: string;
+        translatorType?: string;
+    }): void => {
+        let changed = false;
+        
+        if (config.translatorType && config.translatorType !== defaultTranslator.value) {
+            defaultTranslator.value = config.translatorType;
+            // 切换翻译器时清空检测到的源语言，以便重新检测
+            detectedSourceLang.value = '';
+            changed = true;
+        }
+        
+        if (config.targetLang) {
+            // 验证目标语言是否支持
+            const validLang = validateLanguage(config.targetLang, defaultTranslator.value);
+            defaultTargetLang.value = validLang;
+            changed = true;
+        }
+        
+        if (changed) {
+            console.log(`已更新默认翻译配置：翻译器=${defaultTranslator.value}，目标语言=${defaultTargetLang.value}`);
+        }
+    };
+
+    // 初始化时加载可用翻译器
+    loadAvailableTranslators();
+
+    return {
+        // 状态
+        availableTranslators,
+        isTranslating,
+        lastResult,
+        error,
+        detectedSourceLang,
+        defaultTargetLang,
+        defaultTranslator,
+        languageMaps,
+        languageUsageCount,
+        recentLanguages,
+        
+        // 计算属性
+        hasTranslators,
+        currentLanguageMap,
+        
+        // 方法
+        loadAvailableTranslators,
+        loadTranslatorLanguages,
+        translateText,
+        setDefaultConfig,
+        detectLanguage,
+        validateLanguage,
+        findSimilarLanguage,
+        getSortedLanguages,
+        incrementLanguageUsage
+    };
+}, {
+    persist: {
+        key: 'voidraft-translation',
+        storage: localStorage,
+        pick: ['languageUsageCount', 'defaultTargetLang', 'defaultTranslator', 'recentLanguages']
+    }
+}); 
--- a/frontend/src/stores/updateStore.ts
+++ b/frontend/src/stores/updateStore.ts
@@ -0,0 +1,135 @@
+import {defineStore} from 'pinia'
+import {computed, ref} from 'vue'
+import {CheckForUpdates, ApplyUpdate, RestartApplication} from '@/../bindings/voidraft/internal/services/selfupdateservice'
+import {SelfUpdateResult} from '@/../bindings/voidraft/internal/services/models'
+import {useConfigStore} from './configStore'
+import * as runtime from "@wailsio/runtime"
+
+export const useUpdateStore = defineStore('update', () => {
+    // 状态
+    const isChecking = ref(false)
+    const isUpdating = ref(false)
+    const updateResult = ref<SelfUpdateResult | null>(null)
+    const hasCheckedOnStartup = ref(false)
+    const updateSuccess = ref(false)
+    const errorMessage = ref('')
+
+    // 计算属性
+    const hasUpdate = computed(() => updateResult.value?.hasUpdate || false)
+
+    // 检查更新
+    const checkForUpdates = async (): Promise<boolean> => {
+        if (isChecking.value) return false
+
+        // 重置错误信息
+        errorMessage.value = ''
+        isChecking.value = true
+        try {
+            const result = await CheckForUpdates()
+            if (result) {
+                updateResult.value = result
+                if (result.error) {
+                    errorMessage.value = result.error
+                    return false
+                }
+                return true
+            }
+            return false
+        } catch (error) {
+            errorMessage.value = error instanceof Error ? error.message : 'Network error'
+            return false
+        } finally {
+            isChecking.value = false
+        }
+    }
+
+    // 应用更新
+    const applyUpdate = async (): Promise<boolean> => {
+        if (isUpdating.value) return false
+
+        // 重置错误信息
+        errorMessage.value = ''
+        isUpdating.value = true
+        try {
+            const result = await ApplyUpdate()
+            if (result) {
+                updateResult.value = result
+                
+                if (result.error) {
+                    errorMessage.value = result.error
+                    return false
+                }
+                
+                if (result.updateApplied) {
+                    updateSuccess.value = true
+                    return true
+                }
+            }
+            return false
+        } catch (error) {
+            errorMessage.value = error instanceof Error ? error.message : 'Update failed'
+            return false
+        } finally {
+            isUpdating.value = false
+        }
+    }
+
+    // 重启应用
+    const restartApplication = async (): Promise<boolean> => {
+        try {
+            await RestartApplication()
+            return true
+        } catch (error) {
+            errorMessage.value = error instanceof Error ? error.message : 'Restart failed'
+            return false
+        }
+    }
+
+    // 启动时检查更新
+    const checkOnStartup = async () => {
+        if (hasCheckedOnStartup.value) return
+        const configStore = useConfigStore()
+
+        if (configStore.config.updates.autoUpdate) {
+            await checkForUpdates()
+        }
+        hasCheckedOnStartup.value = true
+    }
+
+    // 打开发布页面
+    const openReleaseURL = async () => {
+        if (updateResult.value?.assetURL) {
+            await runtime.Browser.OpenURL(updateResult.value.assetURL)
+        }
+    }
+
+    // 重置状态
+    const reset = () => {
+        updateResult.value = null
+        isChecking.value = false
+        isUpdating.value = false
+        updateSuccess.value = false
+        errorMessage.value = ''
+    }
+
+    return {
+        // 状态
+        isChecking,
+        isUpdating,
+        updateResult,
+        hasCheckedOnStartup,
+        updateSuccess,
+        errorMessage,
+
+        // 计算属性
+        hasUpdate,
+
+        // 方法
+        checkForUpdates,
+        applyUpdate,
+        restartApplication,
+        checkOnStartup,
+        openReleaseURL,
+        reset
+    }
+}) 
--- a/frontend/src/stores/windowStore.ts
+++ b/frontend/src/stores/windowStore.ts
@@ -0,0 +1,31 @@
+import {computed} from 'vue';
+import {defineStore} from 'pinia';
+import {IsDocumentWindowOpen} from "@/../bindings/voidraft/internal/services/windowservice";
+
+
+export const useWindowStore = defineStore('window', () => {
+    // 判断是否为主窗口
+    const isMainWindow = computed(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        return !urlParams.has('documentId');
+    });
+
+    // 获取当前窗口的documentId
+    const currentDocumentId = computed(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get('documentId');
+    });
+    /**
+     * 判断文档窗口是否打开
+     * @param documentId 文档ID
+     */
+    async function isDocumentWindowOpen(documentId: number) {
+        return IsDocumentWindowOpen(documentId);
+    }
+
+    return {
+        isMainWindow,
+        currentDocumentId,
+        isDocumentWindowOpen
+    };
+});
--- a/frontend/src/utils/errorHandler.ts
+++ b/frontend/src/utils/errorHandler.ts
@@ -1,97 +0,0 @@
-import { useLogStore } from '@/stores/logStore';
-import { useI18n } from 'vue-i18n';
-
-/**
- * 创建组合式函数，用于在组件中使用错误处理
- */
-export function useErrorHandler() {
-  const logStore = useLogStore();
-  const { t } = useI18n();
-
-  const handleError = (error: unknown, messageKey: string) => {
-    logStore.error(t(messageKey));
-  };
-
-  const safeCall = async <T>(
-    operation: () => Promise<T>,
-    errorMessageKey: string,
-    successMessageKey?: string
-  ): Promise<T | null> => {
-    try {
-      const result = await operation();
-      if (successMessageKey) {
-        logStore.info(t(successMessageKey));
-      }
-      return result;
-    } catch (error) {
-      logStore.error(t(errorMessageKey));
-      return null;
-    }
-  };
-
-  /**
-   * 静默处理错误，不显示用户提示
-   */
-  const silentCall = async <T>(
-    operation: () => Promise<T>
-  ): Promise<T | null> => {
-    try {
-      return await operation();
-    } catch (error) {
-      // 静默忽略错误
-      return null;
-    }
-  };
-
-  /**
-   * 创建带错误处理的数值调整器
-   */
-  const createSafeAdjuster = (
-    adjustFn: () => Promise<void>,
-    errorMessageKey: string
-  ) => () => safeCall(adjustFn, errorMessageKey);
-
-  return {
-    handleError,
-    safeCall,
-    silentCall,
-    createSafeAdjuster
-  };
-}
-
-/**
- * 错误处理工具函数集合（不依赖Vue上下文）
- */
-export const ErrorUtils = {
-  /**
-   * 静默处理错误
-   */
-  silent: async <T>(operation: () => Promise<T>): Promise<T | null> => {
-    try {
-      return await operation();
-    } catch (error) {
-      return null;
-    }
-  },
-
-  /**
-   * 带重试的错误处理
-   */
-  withRetry: async <T>(
-    operation: () => Promise<T>,
-    maxRetries: number = 3,
-    delay: number = 1000
-  ): Promise<T | null> => {
-    for (let i = 0; i < maxRetries; i++) {
-      try {
-        return await operation();
-      } catch (error) {
-        if (i === maxRetries - 1) {
-          return null;
-        }
-        await new Promise(resolve => setTimeout(resolve, delay));
-      }
-    }
-    return null;
-  }
-}; 
--- a/frontend/src/views/editor/Editor.vue
+++ b/frontend/src/views/editor/Editor.vue
@@ -1,39 +1,38 @@
 <script setup lang="ts">
 import {onBeforeUnmount, onMounted, ref} from 'vue';
 import {useEditorStore} from '@/stores/editorStore';
+import {useDocumentStore} from '@/stores/documentStore';
 import {useConfigStore} from '@/stores/configStore';
-import {createWheelZoomHandler} from './extensions';
+import {createWheelZoomHandler} from './basic/wheelZoomExtension';
 import Toolbar from '@/components/toolbar/Toolbar.vue';
+import {useWindowStore} from "@/stores/windowStore";
+import LoadingScreen from '@/components/loading/LoadingScreen.vue';

 const editorStore = useEditorStore();
+const documentStore = useDocumentStore();
 const configStore = useConfigStore();
-
-const props = defineProps({
-  initialDoc: {
-    type: String,
-    default: ''
-  }
-});
+const windowStore = useWindowStore();

 const editorElement = ref<HTMLElement | null>(null);

 // 创建滚轮缩放处理器
 const wheelHandler = createWheelZoomHandler(
-  configStore.increaseFontSize,
-  configStore.decreaseFontSize
+    configStore.increaseFontSize,
+    configStore.decreaseFontSize
 );

 onMounted(async () => {
  if (!editorElement.value) return;

+  // 从URL查询参数中获取documentId
+  const urlDocumentId = windowStore.currentDocumentId ? parseInt(windowStore.currentDocumentId) : undefined;
+  
+  // 初始化文档存储，优先使用URL参数中的文档ID
+  await documentStore.initialize(urlDocumentId);
+  
  // 设置编辑器容器
  editorStore.setEditorContainer(editorElement.value);

-  // 如果编辑器还没有初始化，创建编辑器
-  if (!editorStore.isEditorInitialized) {
-    await editorStore.createEditor(props.initialDoc);
-  }
-
  // 添加滚轮事件监听
  editorElement.value.addEventListener('wheel', wheelHandler, {passive: false});
 });
@@ -48,8 +47,9 @@ onBeforeUnmount(() => {

 <template>
  <div class="editor-container">
+    <LoadingScreen v-if="editorStore.isLoading" text="VOIDRAFT" />
    <div ref="editorElement" class="editor"></div>
-    <Toolbar />
+    <Toolbar/>
  </div>
 </template>

@@ -60,6 +60,7 @@ onBeforeUnmount(() => {
  overflow: hidden;
  display: flex;
  flex-direction: column;
+  position: relative;

  .editor {
    width: 100%;
@@ -76,4 +77,4 @@ onBeforeUnmount(() => {
 :deep(.cm-scroller) {
  overflow: auto;
 }
-</style> 
+</style>
--- a/frontend/src/views/editor/basic/basicSetup.ts
+++ b/frontend/src/views/editor/basic/basicSetup.ts
@@ -0,0 +1,66 @@
+import {Extension} from '@codemirror/state';
+import {
+    crosshairCursor,
+    drawSelection,
+    dropCursor,
+    EditorView,
+    highlightActiveLine,
+    highlightActiveLineGutter,
+    highlightSpecialChars,
+    keymap,
+    lineNumbers,
+    rectangularSelection,
+} from '@codemirror/view';
+import {
+    bracketMatching,
+    defaultHighlightStyle,
+    foldGutter,
+    indentOnInput,
+    syntaxHighlighting,
+} from '@codemirror/language';
+import {history} from '@codemirror/commands';
+import {highlightSelectionMatches} from '@codemirror/search';
+import {autocompletion, closeBrackets, closeBracketsKeymap} from '@codemirror/autocomplete';
+import createEditorContextMenu from '../contextMenu';
+
+// 基本编辑器设置
+export const createBasicSetup = (): Extension[] => {
+    return [
+        // 基础UI
+        lineNumbers(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        dropCursor(),
+        EditorView.lineWrapping,
+
+        // 历史记录
+        history(),
+
+        // 代码折叠
+        foldGutter(),
+
+        // 选择与高亮
+        drawSelection(),
+        highlightActiveLine(),
+        highlightSelectionMatches(),
+        rectangularSelection(),
+        crosshairCursor(),
+
+        // 缩进和编辑辅助
+        indentOnInput(),
+        syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
+        bracketMatching(),
+        closeBrackets(),
+
+        // 自动完成
+        autocompletion(),
+
+        // 上下文菜单
+        createEditorContextMenu(),
+
+        // 键盘映射
+        keymap.of([
+            ...closeBracketsKeymap,
+        ]),
+    ];
+};
--- a/frontend/src/views/editor/basic/contentChangeExtension.ts
+++ b/frontend/src/views/editor/basic/contentChangeExtension.ts
@@ -0,0 +1,39 @@
+import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
+import { useDocumentStore } from '@/stores/documentStore';
+import { useEditorStore } from '@/stores/editorStore';
+
+/**
+ * 内容变化监听插件 - 集成文档和编辑器管理
+ */
+export function createContentChangePlugin() {
+  return ViewPlugin.fromClass(
+    class ContentChangePlugin {
+      private documentStore = useDocumentStore();
+      private editorStore = useEditorStore();
+      private lastContent = '';
+
+      constructor(private view: EditorView) {
+        this.lastContent = view.state.doc.toString();
+      }
+
+      update(update: ViewUpdate) {
+        if (!update.docChanged) return;
+
+        const newContent = this.view.state.doc.toString();
+        if (newContent === this.lastContent) return;
+
+        this.lastContent = newContent;
+        
+        // 通知编辑器管理器内容已变化
+        const currentDocId = this.documentStore.currentDocumentId;
+        if (currentDocId) {
+          this.editorStore.onContentChange(currentDocId);
+        }
+      }
+
+      destroy() {
+
+      }
+    }
+  );
+} 
--- a/frontend/src/views/editor/extensions/fontExtension.ts
+++ b/frontend/src/views/editor/extensions/fontExtension.ts
@@ -81,14 +81,6 @@ export function createFontExtension(config: Partial<FontConfig> = {}): Extension
  return EditorView.theme(styles);
 }

-// 创建响应式字体大小扩展
-export function createResponsiveFontExtension(baseFontSize: number = 14): Extension {
-  return fontCompartment.of(createFontExtension({
-    fontSize: baseFontSize,
-    lineHeight: 1.5
-  }));
-}
-
 // 从后端配置创建字体扩展
 export function createFontExtensionFromBackend(backendConfig: {
  fontFamily?: string;
--- a/frontend/src/views/editor/basic/statsExtension.ts
+++ b/frontend/src/views/editor/basic/statsExtension.ts
@@ -0,0 +1,65 @@
+import {Extension} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {DocumentStats} from '@/stores/editorStore';
+import {getActiveNoteBlock} from '@/views/editor/extensions/codeblock/state';
+
+// 更新编辑器文档统计信息
+export const updateStats = (
+  view: EditorView, 
+  updateDocumentStats: (stats: DocumentStats) => void
+) => {
+  if (!view) return;
+  
+  const state = view.state;
+  
+  // 获取当前光标所在的代码块
+  const activeBlock = getActiveNoteBlock(state as any);
+  
+  if (!activeBlock) {
+    // 如果没有活动块，显示空统计
+    updateDocumentStats({
+      lines: 0,
+      characters: 0,
+      selectedCharacters: 0
+    });
+    return;
+  }
+  
+  // 获取当前块的内容范围
+  const blockContent = state.doc.sliceString(activeBlock.content.from, activeBlock.content.to);
+  
+  // 计算块内容的行数
+  const blockLines = blockContent.split('\n').length;
+  
+  // 计算选中的字符数（只统计在当前块内的选中内容）
+  let selectedChars = 0;
+  const selections = state.selection;
+  if (selections) {
+    for (let i = 0; i < selections.ranges.length; i++) {
+      const range = selections.ranges[i];
+      // 计算选中范围与当前块内容范围的交集
+      const selectionStart = Math.max(range.from, activeBlock.content.from);
+      const selectionEnd = Math.min(range.to, activeBlock.content.to);
+      if (selectionStart < selectionEnd) {
+        selectedChars += selectionEnd - selectionStart;
+      }
+    }
+  }
+  
+  updateDocumentStats({
+    lines: blockLines,
+    characters: blockContent.length,
+    selectedCharacters: selectedChars
+  });
+};
+
+// 创建统计信息更新监听器扩展
+export const createStatsUpdateExtension = (
+  updateDocumentStats: (stats: DocumentStats) => void
+): Extension => {
+  return EditorView.updateListener.of(update => {
+    if (update.docChanged || update.selectionSet) {
+      updateStats(update.view, updateDocumentStats);
+    }
+  });
+}; 
--- a/frontend/src/views/editor/extensions/tabExtension.ts
+++ b/frontend/src/views/editor/extensions/tabExtension.ts
--- a/frontend/src/views/editor/extensions/themeExtension.ts
+++ b/frontend/src/views/editor/extensions/themeExtension.ts
@@ -1,8 +1,9 @@
 import { Extension, Compartment } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models';
-import { dark } from '@/views/editor/theme/dark';
-import { light } from '@/views/editor/theme/light';
+import { createDarkTheme } from '@/views/editor/theme/dark';
+import { createLightTheme } from '@/views/editor/theme/light';
+import { useThemeStore } from '@/stores/themeStore';

 // 主题区间 - 用于动态切换主题
 export const themeCompartment = new Compartment();
@@ -11,6 +12,8 @@ export const themeCompartment = new Compartment();
 * 根据主题类型获取主题扩展
 */
 const getThemeExtension = (themeType: SystemThemeType): Extension => {
+  const themeStore = useThemeStore();
+  
  // 处理 auto 主题类型
  let actualTheme: SystemThemeType = themeType;
  if (themeType === SystemThemeType.SystemThemeAuto) {
@@ -19,13 +22,11 @@ const getThemeExtension = (themeType: SystemThemeType): Extension => {
      : SystemThemeType.SystemThemeLight;
  }

-  // 直接返回对应的主题扩展
-  switch (actualTheme) {
-    case SystemThemeType.SystemThemeLight:
-      return light;
-    case SystemThemeType.SystemThemeDark:
-    default:
-      return dark;
+  // 根据主题类型创建主题
+  if (actualTheme === SystemThemeType.SystemThemeLight) {
+    return createLightTheme(themeStore.themeColors.lightTheme);
+  } else {
+    return createDarkTheme(themeStore.themeColors.darkTheme);
  }
 };

@@ -45,9 +46,13 @@ export const updateEditorTheme = (view: EditorView, themeType: SystemThemeType):
    return;
  }

-  const extension = getThemeExtension(themeType);
-  view.dispatch({
-    effects: themeCompartment.reconfigure(extension)
-  });
+  try {
+    const extension = getThemeExtension(themeType);
+    view.dispatch({
+      effects: themeCompartment.reconfigure(extension)
+    });
+  } catch (error) {
+    console.error('Failed to update editor theme:', error);
+  }
 };

--- a/frontend/src/views/editor/extensions/wheelZoomExtension.ts
+++ b/frontend/src/views/editor/extensions/wheelZoomExtension.ts
--- a/frontend/src/views/editor/contextMenu/contextMenu.css
+++ b/frontend/src/views/editor/contextMenu/contextMenu.css
@@ -0,0 +1,156 @@
+/**
+ * 编辑器上下文菜单样式
+ * 支持系统主题自动适配
+ */
+
+.cm-context-menu {
+  position: fixed;
+  background-color: var(--settings-card-bg);
+  color: var(--settings-text);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 4px 0;
+  /* 优化阴影效果，只在右下角显示自然的阴影 */
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
+  min-width: 200px;
+  max-width: 320px;
+  z-index: 9999;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  overflow: visible; /* 确保子菜单可以显示在外部 */
+}
+
+.cm-context-menu-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  transition: all 0.1s ease;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cm-context-menu-item:hover {
+  background-color: var(--toolbar-button-hover);
+  color: var(--toolbar-text);
+}
+
+.cm-context-menu-item-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cm-context-menu-item-shortcut {
+  opacity: 0.7;
+  font-size: 12px;
+  padding: 2px 4px;
+  border-radius: 4px;
+  background-color: var(--settings-input-bg);
+  color: var(--settings-text-secondary);
+  margin-left: 16px;
+}
+
+.cm-context-menu-item-ripple {
+  position: absolute;
+  border-radius: 50%;
+  background-color: var(--selection-bg);
+  width: 100px;
+  height: 100px;
+  opacity: 0.5;
+  transform: scale(0);
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+}
+
+/* 菜单分组标题样式 */
+.cm-context-menu-group-title {
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  user-select: none;
+}
+
+/* 菜单分隔线样式 */
+.cm-context-menu-divider {
+  height: 1px;
+  background-color: var(--border-color);
+  margin: 4px 0;
+}
+
+/* 子菜单样式 */
+.cm-context-submenu-container {
+  position: relative;
+}
+
+.cm-context-menu-item-with-submenu {
+  position: relative;
+}
+
+.cm-context-menu-item-with-submenu::after {
+  content: "›";
+  position: absolute;
+  right: 12px;
+  font-size: 16px;
+  opacity: 0.7;
+}
+
+.cm-context-submenu {
+  position: fixed; /* 改为fixed定位，避免受父元素影响 */
+  min-width: 180px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(10px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  z-index: 10000;
+  border-radius: 6px;
+  background-color: var(--settings-card-bg);
+  color: var(--settings-text);
+  border: 1px solid var(--border-color);
+  padding: 4px 0;
+  /* 子菜单也使用相同的阴影效果 */
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.cm-context-menu-item-with-submenu:hover .cm-context-submenu {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+
+/* 深色主题下的特殊样式 */
+:root[data-theme="dark"] .cm-context-menu {
+  /* 深色主题下阴影更深，但仍然只在右下角 */
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
+}
+
+:root[data-theme="dark"] .cm-context-submenu {
+  /* 深色主题下子菜单阴影 */
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
+}
+
+:root[data-theme="dark"] .cm-context-menu-divider {
+  background-color: var(--dark-border-color);
+  opacity: 0.6;
+}
+
+/* 动画相关类 */
+.cm-context-menu.show {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.cm-context-menu.hide {
+  opacity: 0;
+} 
--- a/frontend/src/views/editor/contextMenu/contextMenuView.ts
+++ b/frontend/src/views/editor/contextMenu/contextMenuView.ts
@@ -0,0 +1,426 @@
+/**
+ * 上下文菜单视图实现
+ * 处理菜单的创建、定位和事件绑定
+ * 优化为单例模式，避免频繁创建和销毁DOM元素
+ */
+
+import { EditorView } from "@codemirror/view";
+import { MenuItem } from "../contextMenu";
+import "./contextMenu.css";
+
+// 为Window对象添加cmSubmenus属性
+declare global {
+  interface Window {
+    cmSubmenus?: Map<string, HTMLElement>;
+  }
+}
+
+// 菜单DOM元素缓存
+let menuElement: HTMLElement | null = null;
+let clickOutsideHandler: ((e: MouseEvent) => void) | null = null;
+// 子菜单缓存池
+let submenuPool: Map<string, HTMLElement> = new Map();
+
+/**
+ * 获取或创建菜单DOM元素
+ */
+function getOrCreateMenuElement(): HTMLElement {
+  if (!menuElement) {
+    menuElement = document.createElement("div");
+    menuElement.className = "cm-context-menu";
+    menuElement.style.display = "none";
+    document.body.appendChild(menuElement);
+    
+    // 阻止菜单内右键点击冒泡
+    menuElement.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    });
+  }
+  return menuElement;
+}
+
+/**
+ * 创建或获取子菜单元素
+ * @param id 子菜单唯一标识
+ */
+function getOrCreateSubmenu(id: string): HTMLElement {
+  if (!submenuPool.has(id)) {
+    const submenu = document.createElement("div");
+    submenu.className = "cm-context-menu cm-context-submenu";
+    submenu.style.display = "none";
+    document.body.appendChild(submenu);
+    submenuPool.set(id, submenu);
+    
+    // 阻止子菜单点击事件冒泡
+    submenu.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+  }
+  return submenuPool.get(id)!;
+}
+
+/**
+ * 创建菜单项DOM元素
+ */
+function createMenuItemElement(item: MenuItem, view: EditorView): HTMLElement {
+  // 创建菜单项容器
+  const menuItem = document.createElement("div");
+  menuItem.className = "cm-context-menu-item";
+  
+  // 如果有子菜单，添加相应类
+  if (item.submenu && item.submenu.length > 0) {
+    menuItem.classList.add("cm-context-menu-item-with-submenu");
+  }
+  
+  // 创建内容容器
+  const contentContainer = document.createElement("div");
+  contentContainer.className = "cm-context-menu-item-label";
+  
+  // 标签文本
+  const label = document.createElement("span");
+  label.textContent = item.label;
+  contentContainer.appendChild(label);
+  menuItem.appendChild(contentContainer);
+  
+  // 快捷键提示（如果有）
+  if (item.shortcut) {
+    const shortcut = document.createElement("span");
+    shortcut.className = "cm-context-menu-item-shortcut";
+    shortcut.textContent = item.shortcut;
+    menuItem.appendChild(shortcut);
+  }
+  
+  // 如果有子菜单，创建或获取子菜单
+  if (item.submenu && item.submenu.length > 0) {
+    // 使用菜单项标签作为子菜单ID
+    const submenuId = `submenu-${item.label.replace(/\s+/g, '-').toLowerCase()}`;
+    const submenu = getOrCreateSubmenu(submenuId);
+    
+    // 清空现有子菜单内容
+    while (submenu.firstChild) {
+      submenu.removeChild(submenu.firstChild);
+    }
+    
+    // 添加子菜单项
+    item.submenu.forEach(subItem => {
+      const subMenuItemElement = createMenuItemElement(subItem, view);
+      submenu.appendChild(subMenuItemElement);
+    });
+    
+    // 初始状态设置为隐藏
+    submenu.style.opacity = '0';
+    submenu.style.pointerEvents = 'none';
+    submenu.style.visibility = 'hidden';
+    submenu.style.display = 'block';
+    
+    // 当鼠标悬停在菜单项上时，显示子菜单
+    menuItem.addEventListener('mouseenter', () => {
+      const rect = menuItem.getBoundingClientRect();
+      
+      // 计算子菜单位置
+      submenu.style.left = `${rect.right}px`;
+      submenu.style.top = `${rect.top}px`;
+      
+      // 检查子菜单是否会超出屏幕右侧
+      setTimeout(() => {
+        const submenuRect = submenu.getBoundingClientRect();
+        if (submenuRect.right > window.innerWidth) {
+          // 如果会超出右侧，则显示在左侧
+          submenu.style.left = `${rect.left - submenuRect.width}px`;
+        }
+        
+        // 检查子菜单是否会超出屏幕底部
+        if (submenuRect.bottom > window.innerHeight) {
+          // 如果会超出底部，则向上调整
+          const newTop = rect.top - (submenuRect.bottom - window.innerHeight);
+          submenu.style.top = `${Math.max(0, newTop)}px`;
+        }
+      }, 0);
+      
+      // 显示子菜单
+      submenu.style.opacity = '1';
+      submenu.style.pointerEvents = 'auto';
+      submenu.style.visibility = 'visible';
+      submenu.style.transform = 'translateX(0)';
+    });
+    
+    // 当鼠标离开菜单项时，隐藏子菜单
+    menuItem.addEventListener('mouseleave', (e) => {
+      // 检查是否移动到子菜单上
+      const toElement = e.relatedTarget as HTMLElement;
+      if (submenu.contains(toElement)) {
+        return; // 如果移动到子菜单上，不隐藏
+      }
+      
+      // 隐藏子菜单
+      submenu.style.opacity = '0';
+      submenu.style.pointerEvents = 'none';
+      submenu.style.transform = 'translateX(10px)';
+      
+      // 延迟设置visibility，以便过渡动画能够完成
+      setTimeout(() => {
+        if (submenu.style.opacity === '0') {
+          submenu.style.visibility = 'hidden';
+        }
+      }, 200);
+    });
+    
+    // 当鼠标离开子菜单时，隐藏它
+    submenu.addEventListener('mouseleave', (e) => {
+      // 检查是否移动回父菜单项
+      const toElement = e.relatedTarget as HTMLElement;
+      if (menuItem.contains(toElement)) {
+        return; // 如果移动回父菜单项，不隐藏
+      }
+      
+      // 隐藏子菜单
+      submenu.style.opacity = '0';
+      submenu.style.pointerEvents = 'none';
+      submenu.style.transform = 'translateX(10px)';
+      
+      // 延迟设置visibility，以便过渡动画能够完成
+      setTimeout(() => {
+        if (submenu.style.opacity === '0') {
+          submenu.style.visibility = 'hidden';
+        }
+      }, 200);
+    });
+    
+    // 记录子菜单
+    if (!window.cmSubmenus) {
+      window.cmSubmenus = new Map();
+    }
+    window.cmSubmenus.set(submenuId, submenu);
+  }
+  
+  // 点击事件（仅当有command时添加）
+  if (item.command) {
+    menuItem.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      // 添加点击动画效果
+      const ripple = document.createElement("div");
+      ripple.className = "cm-context-menu-item-ripple";
+      
+      // 计算相对位置
+      const rect = menuItem.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      
+      ripple.style.left = (x - 50) + "px";
+      ripple.style.top = (y - 50) + "px";
+      
+      menuItem.appendChild(ripple);
+      
+      // 执行点击动画
+      setTimeout(() => {
+        ripple.style.transform = "scale(1)";
+        ripple.style.opacity = "0";
+        
+        // 动画完成后移除ripple元素
+        setTimeout(() => {
+          if (ripple.parentNode === menuItem) {
+            menuItem.removeChild(ripple);
+          }
+        }, 300);
+      }, 10);
+      
+      // 执行命令
+      item.command!(view);
+      
+      // 隐藏菜单
+      hideContextMenu();
+    });
+  }
+  
+  return menuItem;
+}
+
+/**
+ * 创建分隔线
+ */
+function createDivider(): HTMLElement {
+  const divider = document.createElement("div");
+  divider.className = "cm-context-menu-divider";
+  return divider;
+}
+
+/**
+ * 添加菜单组
+ * @param menuElement 菜单元素
+ * @param title 菜单组标题
+ * @param items 菜单项
+ * @param view 编辑器视图
+ */
+function addMenuGroup(menuElement: HTMLElement, title: string | null, items: MenuItem[], view: EditorView): void {
+  // 如果有标题，添加组标题
+  if (title) {
+    const groupTitle = document.createElement("div");
+    groupTitle.className = "cm-context-menu-group-title";
+    groupTitle.textContent = title;
+    menuElement.appendChild(groupTitle);
+  }
+  
+  // 添加菜单项
+  items.forEach(item => {
+    const menuItemElement = createMenuItemElement(item, view);
+    menuElement.appendChild(menuItemElement);
+  });
+}
+
+/**
+ * 显示上下文菜单
+ */
+export function showContextMenu(view: EditorView, clientX: number, clientY: number, items: MenuItem[]): void {
+  // 获取或创建菜单元素
+  const menu = getOrCreateMenuElement();
+  
+  // 如果已经有菜单显示，先隐藏所有子菜单
+  hideAllSubmenus();
+  
+  // 清空现有菜单项
+  while (menu.firstChild) {
+    menu.removeChild(menu.firstChild);
+  }
+  
+  // 添加主菜单项
+  items.forEach(item => {
+    const menuItemElement = createMenuItemElement(item, view);
+    menu.appendChild(menuItemElement);
+  });
+  
+  // 显示菜单
+  menu.style.display = "block";
+  
+  // 定位菜单
+  positionMenu(menu, clientX, clientY);
+
+  
+  // 添加点击外部关闭事件
+  if (clickOutsideHandler) {
+    document.removeEventListener("click", clickOutsideHandler, true);
+  }
+  
+  clickOutsideHandler = (e: MouseEvent) => {
+    // 检查点击是否在菜单外
+    if (menu && !menu.contains(e.target as Node)) {
+      let isInSubmenu = false;
+      
+      // 检查是否点击在子菜单内
+      if (window.cmSubmenus) {
+        window.cmSubmenus.forEach((submenu) => {
+          if (submenu.contains(e.target as Node)) {
+            isInSubmenu = true;
+          }
+        });
+      }
+      
+      if (!isInSubmenu) {
+        hideContextMenu();
+      }
+    }
+  };
+  
+  // 使用捕获阶段确保事件被处理
+  document.addEventListener("click", clickOutsideHandler, true);
+  
+  // ESC键关闭
+  document.addEventListener("keydown", handleKeyDown);
+  
+  // 触发显示动画
+  setTimeout(() => {
+    if (menu) {
+      menu.classList.add("show");
+    }
+  }, 10);
+}
+
+/**
+ * 隐藏所有子菜单
+ */
+function hideAllSubmenus(): void {
+  if (window.cmSubmenus) {
+    window.cmSubmenus.forEach((submenu) => {
+      submenu.style.opacity = '0';
+      submenu.style.pointerEvents = 'none';
+      submenu.style.visibility = 'hidden';
+      submenu.style.transform = 'translateX(10px)';
+    });
+  }
+}
+
+/**
+ * 处理键盘事件
+ */
+function handleKeyDown(e: KeyboardEvent): void {
+  if (e.key === "Escape") {
+    hideContextMenu();
+    document.removeEventListener("keydown", handleKeyDown);
+  }
+}
+
+/**
+ * 隐藏上下文菜单
+ */
+export function hideContextMenu(): void {
+  // 隐藏所有子菜单
+  hideAllSubmenus();
+
+  if (menuElement) {
+    // 添加淡出动画
+    menuElement.classList.remove("show");
+    menuElement.classList.add("hide");
+    
+    // 等待动画完成后隐藏（不移除DOM元素）
+    setTimeout(() => {
+      if (menuElement) {
+        menuElement.style.display = "none";
+        menuElement.classList.remove("hide");
+      }
+    }, 150);
+  }
+  
+  if (clickOutsideHandler) {
+    document.removeEventListener("click", clickOutsideHandler, true);
+    clickOutsideHandler = null;
+  }
+  
+  document.removeEventListener("keydown", handleKeyDown);
+}
+
+/**
+ * 定位菜单元素
+ */
+function positionMenu(menu: HTMLElement, clientX: number, clientY: number): void {
+  // 获取窗口尺寸
+  const windowWidth = window.innerWidth;
+  const windowHeight = window.innerHeight;
+  
+  // 初始位置设置
+  let left = clientX;
+  let top = clientY;
+  
+  // 确保菜单在视窗内
+  setTimeout(() => {
+    // 计算菜单尺寸
+    const menuWidth = menu.offsetWidth;
+    const menuHeight = menu.offsetHeight;
+    
+    // 确保菜单不会超出右侧边界
+    if (left + menuWidth > windowWidth) {
+      left = windowWidth - menuWidth - 5;
+    }
+    
+    // 确保菜单不会超出底部边界
+    if (top + menuHeight > windowHeight) {
+      top = windowHeight - menuHeight - 5;
+    }
+    
+    // 应用位置
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+  }, 0);
+} 
--- a/frontend/src/views/editor/contextMenu/index.ts
+++ b/frontend/src/views/editor/contextMenu/index.ts
@@ -0,0 +1,229 @@
+/**
+ * 编辑器上下文菜单实现
+ * 提供基本的复制、剪切、粘贴等操作，支持动态快捷键显示
+ */
+
+import { EditorView } from "@codemirror/view";
+import { Extension } from "@codemirror/state";
+import { copyCommand, cutCommand, pasteCommand } from "../extensions/codeblock/copyPaste";
+import { KeyBindingCommand } from "@/../bindings/voidraft/internal/models/models";
+import { useKeybindingStore } from "@/stores/keybindingStore";
+import { 
+  undo, redo
+} from "@codemirror/commands";
+import { 
+  deleteBlock, formatCurrentBlock, 
+  addNewBlockAfterCurrent, addNewBlockAfterLast, addNewBlockBeforeCurrent
+} from "../extensions/codeblock/commands";
+import { commandRegistry } from "@/views/editor/keymap";
+import i18n from "@/i18n";
+import {useSystemStore} from "@/stores/systemStore";
+
+/**
+ * 菜单项类型定义
+ */
+export interface MenuItem {
+  /** 菜单项显示文本 */
+  label: string;
+  
+  /** 点击时执行的命令 (如果有子菜单，可以为null) */
+  command?: (view: EditorView) => boolean;
+  
+  /** 快捷键提示文本 (可选) */
+  shortcut?: string;
+  
+  /** 子菜单项 (可选) */
+  submenu?: MenuItem[];
+}
+
+// 导入相关功能
+import { showContextMenu } from "./contextMenuView";
+
+/**
+ * 获取翻译文本
+ * @param key 翻译键
+ * @returns 翻译后的文本
+ */
+function t(key: string): string {
+  return i18n.global.t(key);
+}
+
+/**
+ * 获取快捷键显示文本
+ * @param command 命令ID
+ * @returns 快捷键显示文本
+ */
+function getShortcutText(command: KeyBindingCommand): string {
+  try {
+    const keybindingStore = useKeybindingStore();
+    
+    // 如果找到该命令的快捷键配置
+    const binding = keybindingStore.keyBindings.find(kb => 
+      kb.command === command && kb.enabled
+    );
+    
+    if (binding && binding.key) {
+      // 格式化快捷键显示
+      return formatKeyBinding(binding.key);
+    }
+  } catch (error) {
+    console.warn("An error occurred while getting the shortcut:", error);
+  }
+  
+  return "";
+}
+
+/**
+ * 格式化快捷键显示
+ * @param keyBinding 快捷键字符串
+ * @returns 格式化后的显示文本
+ */
+function formatKeyBinding(keyBinding: string): string {
+  // 获取系统信息
+  const systemStore = useSystemStore();
+  const isMac = systemStore.isMacOS;
+  
+  // 替换修饰键名称为更友好的显示
+  return keyBinding
+    .replace("Mod", isMac ? "⌘" : "Ctrl")
+    .replace("Shift", isMac ? "⇧" : "Shift")
+    .replace("Alt", isMac ? "⌥" : "Alt")
+    .replace("Ctrl", isMac ? "⌃" : "Ctrl")
+    .replace(/-/g, " + ");
+}
+
+/**
+ * 从命令注册表获取命令处理程序和翻译键
+ * @param command 命令ID
+ * @returns 命令处理程序和翻译键
+ */
+function getCommandInfo(command: KeyBindingCommand): { handler: (view: EditorView) => boolean, descriptionKey: string } | undefined {
+  return commandRegistry[command];
+}
+
+/**
+ * 创建编辑菜单项
+ */
+function createEditItems(): MenuItem[] {
+  return [
+    {
+      label: t("keybindings.commands.blockCopy"),
+      command: copyCommand,
+      shortcut: getShortcutText(KeyBindingCommand.BlockCopyCommand)
+    },
+    {
+      label: t("keybindings.commands.blockCut"),
+      command: cutCommand,
+      shortcut: getShortcutText(KeyBindingCommand.BlockCutCommand)
+    },
+    {
+      label: t("keybindings.commands.blockPaste"),
+      command: pasteCommand,
+      shortcut: getShortcutText(KeyBindingCommand.BlockPasteCommand)
+    }
+  ];
+}
+
+/**
+ * 创建历史操作菜单项
+ */
+function createHistoryItems(): MenuItem[] {
+  return [
+    {
+      label: t("keybindings.commands.historyUndo"),
+      command: undo,
+      shortcut: getShortcutText(KeyBindingCommand.HistoryUndoCommand)
+    },
+    {
+      label: t("keybindings.commands.historyRedo"),
+      command: redo,
+      shortcut: getShortcutText(KeyBindingCommand.HistoryRedoCommand)
+    }
+  ];
+}
+
+/**
+ * 创建代码块相关菜单项
+ */
+function createCodeBlockItems(): MenuItem[] {
+  const defaultOptions = { defaultBlockToken: 'text', defaultBlockAutoDetect: true };
+  return [
+    // 格式化
+    {
+      label: t("keybindings.commands.blockFormat"),
+      command: formatCurrentBlock,
+      shortcut: getShortcutText(KeyBindingCommand.BlockFormatCommand)
+    },
+    // 删除
+    {
+      label: t("keybindings.commands.blockDelete"),
+      command: deleteBlock(defaultOptions),
+      shortcut: getShortcutText(KeyBindingCommand.BlockDeleteCommand)
+    },
+    // 在当前块后添加新块
+    {
+      label: t("keybindings.commands.blockAddAfterCurrent"),
+      command: addNewBlockAfterCurrent(defaultOptions),
+      shortcut: getShortcutText(KeyBindingCommand.BlockAddAfterCurrentCommand)
+    },
+    // 在当前块前添加新块
+    {
+      label: t("keybindings.commands.blockAddBeforeCurrent"),
+      command: addNewBlockBeforeCurrent(defaultOptions),
+      shortcut: getShortcutText(KeyBindingCommand.BlockAddBeforeCurrentCommand)
+    },
+    // 在最后添加新块
+    {
+      label: t("keybindings.commands.blockAddAfterLast"),
+      command: addNewBlockAfterLast(defaultOptions),
+      shortcut: getShortcutText(KeyBindingCommand.BlockAddAfterLastCommand)
+    }
+  ];
+}
+
+/**
+ * 创建主菜单项
+ */
+function createMainMenuItems(): MenuItem[] {
+  // 基本编辑操作放在主菜单
+  const basicItems = createEditItems();
+  
+  // 历史操作放在主菜单
+  const historyItems = createHistoryItems();
+  
+  // 构建主菜单
+  return [
+    ...basicItems,
+    ...historyItems,
+    {
+      label: t("extensions.codeblock.name"),
+      submenu: createCodeBlockItems()
+    }
+  ];
+}
+
+/**
+ * 创建编辑器上下文菜单
+ */
+export function createEditorContextMenu(): Extension {
+  // 为编辑器添加右键事件处理
+  return EditorView.domEventHandlers({
+    contextmenu: (event, view) => {
+      // 阻止默认右键菜单
+      event.preventDefault();
+      
+      // 获取菜单项
+      const menuItems = createMainMenuItems();
+      
+      // 显示上下文菜单
+      showContextMenu(view, event.clientX, event.clientY, menuItems);
+      
+      return true;
+    }
+  });
+}
+
+/**
+ * 默认导出
+ */
+export default createEditorContextMenu; 
--- a/frontend/src/views/editor/extensions/autoSaveExtension.ts
+++ b/frontend/src/views/editor/extensions/autoSaveExtension.ts
@@ -1,98 +0,0 @@
-import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
-import { DocumentService } from '../../../../bindings/voidraft/internal/services';
-import { useDebounceFn } from '@vueuse/core';
-
-// 定义自动保存配置选项
-export interface AutoSaveOptions {
-  // 保存回调
-  onSave?: (success: boolean) => void;
-  // 内容变更延迟传递（毫秒）- 输入时不会立即发送，有一个小延迟，避免频繁调用后端
-  debounceDelay?: number;
-}
-
-/**
- * 创建自动保存插件
- * 
- * @param options 配置选项
- * @returns EditorView.Plugin
- */
-export function createAutoSavePlugin(options: AutoSaveOptions = {}) {
-  const { 
-    onSave = () => {},
-    debounceDelay = 2000
-  } = options;
-
-  return ViewPlugin.fromClass(
-    class {
-      private isActive: boolean = true;
-      private isSaving: boolean = false;
-      private readonly contentUpdateFn: (view: EditorView) => void;
-
-      constructor(private view: EditorView) {
-        // 创建内容更新函数，简单传递内容给后端
-        this.contentUpdateFn = this.createDebouncedUpdateFn(debounceDelay);
-      }
-
-      /**
-       * 创建防抖的内容更新函数
-       */
-      private createDebouncedUpdateFn(delay: number): (view: EditorView) => void {
-        // 使用VueUse的防抖函数创建一个新函数
-        return useDebounceFn(async (view: EditorView) => {
-          // 如果插件已不活跃或正在保存中，不发送
-          if (!this.isActive || this.isSaving) return;
-          
-          this.isSaving = true;
-          const content = view.state.doc.toString();
-          
-          try {
-            // 简单将内容传递给后端，让后端处理保存策略
-            await DocumentService.UpdateActiveDocumentContent(content);
-            onSave(true);
-          } catch (err) {
-            // 静默处理错误，不在控制台打印
-            onSave(false);
-          } finally {
-            this.isSaving = false;
-          }
-        }, delay);
-      }
-
-      update(update: ViewUpdate) {
-        // 如果内容没有变化，直接返回
-        if (!update.docChanged) return;
-
-        // 调用防抖函数
-        this.contentUpdateFn(this.view);
-      }
-
-      destroy() {
-        // 标记插件不再活跃
-        this.isActive = false;
-        
-        // 静默发送最终内容，忽略错误
-        const content = this.view.state.doc.toString();
-        DocumentService.UpdateActiveDocumentContent(content).then();
-      }
-    }
-  );
-}
-
-/**
- * 创建处理保存快捷键的插件
- * @param onSave 保存回调
- * @returns EditorView.Plugin
- */
-export function createSaveShortcutPlugin(onSave: () => void) {
-  return EditorView.domEventHandlers({
-    keydown: (event) => {
-      // Ctrl+S / Cmd+S
-      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
-        event.preventDefault();
-        onSave();
-        return true;
-      }
-      return false;
-    }
-  });
-}
--- a/frontend/src/views/editor/extensions/basicSetup.ts
+++ b/frontend/src/views/editor/extensions/basicSetup.ts
@@ -1,103 +0,0 @@
-import {Extension} from '@codemirror/state';
-import {
-    crosshairCursor,
-    drawSelection,
-    dropCursor,
-    EditorView,
-    highlightActiveLine,
-    highlightActiveLineGutter,
-    highlightSpecialChars,
-    keymap,
-    lineNumbers,
-    rectangularSelection,
-} from '@codemirror/view';
-import {
-    bracketMatching,
-    defaultHighlightStyle,
-    foldGutter,
-    foldKeymap,
-    indentOnInput,
-    syntaxHighlighting,
-} from '@codemirror/language';
-import {defaultKeymap, history, historyKeymap,} from '@codemirror/commands';
-import {highlightSelectionMatches} from '@codemirror/search';
-import {autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap} from '@codemirror/autocomplete';
-import {lintKeymap} from '@codemirror/lint';
-import {customSearchKeymap, searchVisibilityField, vscodeSearch} from './vscodeSearch';
-
-import {hyperLink} from './hyperlink';
-import {color} from './colorSelector';
-import {createTextHighlighter} from './textHighlightExtension';
-import {minimap} from './minimap';
-import {createCodeBlockExtension} from './codeblock/index';
-import {foldingOnIndent} from './foldExtension'
-import rainbowBrackets from "./rainbowBrackets";
-import {createCodeBlastExtension} from './codeblast';
-// 基本编辑器设置
-export const createBasicSetup = (): Extension[] => {
-    return [
-        // 基础UI
-        lineNumbers(),
-        highlightActiveLineGutter(),
-        highlightSpecialChars(),
-        dropCursor(),
-        EditorView.lineWrapping,
-
-        // 历史记录
-        history(),
-
-        // 代码折叠
-        foldGutter(),
-
-        // 选择与高亮
-        drawSelection(),
-        highlightActiveLine(),
-        highlightSelectionMatches(),
-        rectangularSelection(),
-        crosshairCursor(),
-
-        // 缩进和编辑辅助
-        indentOnInput(),
-        syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
-        bracketMatching(),
-        closeBrackets(),
-
-        // 自动完成
-        autocompletion(),
-
-        vscodeSearch,
-        searchVisibilityField,
-        foldingOnIndent,
-        rainbowBrackets(),
-        createCodeBlastExtension({
-            effect: 1,
-            shake: true,
-            maxParticles: 300,
-            shakeIntensity: 3
-        }),
-        hyperLink,
-        color,
-        ...createTextHighlighter('hl'),
-        minimap({
-            displayText: 'characters',
-            showOverlay: 'always',
-            autohide: false,
-        }),
-
-        createCodeBlockExtension({
-            showBackground: true,
-            enableAutoDetection: true,
-        }),
-
-        // 键盘映射
-        keymap.of([
-            ...customSearchKeymap,
-            ...closeBracketsKeymap,
-            ...defaultKeymap,
-            ...historyKeymap,
-            ...foldKeymap,
-            ...completionKeymap,
-            ...lintKeymap
-        ]),
-    ];
-};
--- a/frontend/src/views/editor/extensions/checkbox/index.ts
+++ b/frontend/src/views/editor/extensions/checkbox/index.ts
@@ -0,0 +1,186 @@
+import { EditorView, Decoration } from "@codemirror/view"
+import { WidgetType } from "@codemirror/view"
+import { ViewUpdate, ViewPlugin, DecorationSet } from "@codemirror/view"
+import { Extension, Compartment, StateEffect } from "@codemirror/state"
+
+// 创建字体变化效果
+const fontChangeEffect = StateEffect.define<void>()
+
+/**
+ * 复选框小部件类
+ */
+class CheckboxWidget extends WidgetType {
+    constructor(readonly checked: boolean) { 
+        super() 
+    }
+
+    eq(other: CheckboxWidget) { 
+        return other.checked == this.checked 
+    }
+
+    toDOM() {
+        let wrap = document.createElement("span")
+        wrap.setAttribute("aria-hidden", "true")
+        wrap.className = "cm-checkbox-toggle"
+        
+        let box = document.createElement("input")
+        box.type = "checkbox"
+        box.checked = this.checked
+        box.tabIndex = -1
+        box.style.margin = "0"
+        box.style.padding = "0"
+        box.style.cursor = "pointer"
+        box.style.position = "relative"
+        box.style.top = "0.1em"
+        box.style.marginRight = "0.5em"
+        // 设置相对单位，让复选框跟随字体大小变化
+        box.style.width = "1em"
+        box.style.height = "1em"
+        
+        wrap.appendChild(box)
+        return wrap
+    }
+
+    ignoreEvent() { 
+        return false 
+    }
+}
+
+/**
+ * 查找并创建复选框装饰
+ */
+function findCheckboxes(view: EditorView) {
+    let widgets: any = []
+    const doc = view.state.doc
+    
+    for (let { from, to } of view.visibleRanges) {
+        // 使用正则表达式查找 [x] 或 [ ] 模式
+        const text = doc.sliceString(from, to)
+        const checkboxRegex = /\[([ x])\]/gi
+        let match
+        
+        while ((match = checkboxRegex.exec(text)) !== null) {
+            const matchPos = from + match.index
+            const matchEnd = matchPos + match[0].length
+            
+            // 检查前后是否有合适的空格或行首
+            const beforeChar = matchPos > 0 ? doc.sliceString(matchPos - 1, matchPos) : ""
+            const afterChar = matchEnd < doc.length ? doc.sliceString(matchEnd, matchEnd + 1) : ""
+            
+            // 只在行首或空格后，且后面跟空格或行尾时才渲染
+            if ((beforeChar === "" || beforeChar === " " || beforeChar === "\t" || beforeChar === "\n") &&
+                (afterChar === "" || afterChar === " " || afterChar === "\t" || afterChar === "\n")) {
+                
+                const isChecked = match[1].toLowerCase() === "x"
+                let deco = Decoration.replace({
+                    widget: new CheckboxWidget(isChecked),
+                    inclusive: false,
+                })
+                widgets.push(deco.range(matchPos, matchEnd))
+            }
+        }
+    }
+    
+    return Decoration.set(widgets)
+}
+
+/**
+ * 切换复选框状态
+ */
+function toggleCheckbox(view: EditorView, pos: number) {
+    const doc = view.state.doc
+    
+    // 查找当前位置附近的复选框模式
+    for (let offset = -3; offset <= 0; offset++) {
+        const checkPos = pos + offset
+        if (checkPos >= 0 && checkPos + 3 <= doc.length) {
+            const text = doc.sliceString(checkPos, checkPos + 3).toLowerCase()
+            let change
+            
+            if (text === "[x]") {
+                change = { from: checkPos, to: checkPos + 3, insert: "[ ]" }
+            } else if (text === "[ ]") {
+                change = { from: checkPos, to: checkPos + 3, insert: "[x]" }
+            }
+            
+            if (change) {
+                view.dispatch({ changes: change })
+                return true
+            }
+        }
+    }
+    return false
+}
+
+// 创建字体变化效果的便捷函数
+export const triggerFontChange = (view: EditorView) => {
+    view.dispatch({
+        effects: fontChangeEffect.of(undefined)
+    })
+}
+
+/**
+ * 创建复选框扩展
+ */
+export function createCheckboxExtension(): Extension {
+    return [
+        // 主要的复选框插件
+        ViewPlugin.fromClass(class {
+            decorations: DecorationSet
+
+            constructor(view: EditorView) {
+                this.decorations = findCheckboxes(view)
+            }
+
+            update(update: ViewUpdate) {
+                // 检查是否需要重新渲染复选框
+                const shouldUpdate = update.docChanged || 
+                                   update.viewportChanged || 
+                                   update.geometryChanged ||
+                                   update.transactions.some(tr => tr.effects.some(e => e.is(fontChangeEffect)))
+                
+                if (shouldUpdate) {
+                    this.decorations = findCheckboxes(update.view)
+                }
+            }
+        }, {
+            decorations: v => v.decorations,
+
+            eventHandlers: {
+                mousedown: (e, view) => {
+                    let target = e.target as HTMLElement
+                    if (target.nodeName == "INPUT" && target.parentElement!.classList.contains("cm-checkbox-toggle")) {
+                        const pos = view.posAtDOM(target)
+                        return toggleCheckbox(view, pos)
+                    }
+                }
+            }
+        }),
+
+        // 复选框样式
+        EditorView.theme({
+            ".cm-checkbox-toggle": {
+                display: "inline-block",
+                verticalAlign: "baseline",
+            },
+            ".cm-checkbox-toggle input[type=checkbox]": {
+                margin: "0",
+                padding: "0",
+                verticalAlign: "baseline",
+                cursor: "pointer",
+                // 确保复选框大小跟随字体
+                fontSize: "inherit",
+            }
+        })
+    ]
+}
+
+// 默认导出
+export const checkboxExtension = createCheckboxExtension()
+
+// 导出类型和工具函数
+export {
+    CheckboxWidget,
+    toggleCheckbox,
+    findCheckboxes
+} 
--- a/frontend/src/views/editor/extensions/codeblast/index.ts
+++ b/frontend/src/views/editor/extensions/codeblast/index.ts
@@ -1,368 +0,0 @@
-import { Extension } from '@codemirror/state';
-import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
-import './styles.css';
-
-// 粒子接口定义
-interface Particle {
-  x: number;
-  y: number;
-  vx: number;
-  vy: number;
-  alpha: number;
-  size: number;
-  color: number[];
-  theta?: number;
-  drag?: number;
-  wander?: number;
-}
-
-// 配置接口
-interface CodeBlastConfig {
-  effect?: 1 | 2; //  effect 1: 随机粒子， effect 2: 追逐粒子
-  shake?: boolean;  // 启用震动效果
-  maxParticles?: number;  // 最大粒子数
-  particleRange?: { min: number; max: number };  // 粒子大小范围
-  shakeIntensity?: number;  // 震动强度
-  gravity?: number;  // 重力加速度 (仅 effect: 1)
-  alphaFadeout?: number; // 粒子透明度衰减
-  velocityRange?: { // 粒子速度范围
-    x: [number, number]; // x轴方向速度范围
-    y: [number, number];  // y轴方向速度范围
-  };
-}
-
-class CodeBlastEffect {
-  private canvas: HTMLCanvasElement | null = null;
-  private ctx: CanvasRenderingContext2D | null = null;
-  private particles: Particle[] = [];
-  private particlePointer = 0;
-  private isActive = false;
-  private lastTime = 0;
-  private shakeTime = 0;
-  private shakeTimeMax = 0;
-  private animationId: number | null = null;
-
-  // 配置参数
-  private config: Required<CodeBlastConfig> = {
-    effect: 2,
-    shake: true,
-    maxParticles: 500,
-    particleRange: { min: 5, max: 10 },
-    shakeIntensity: 5,
-    gravity: 0.08,
-    alphaFadeout: 0.96,
-    velocityRange: {
-      x: [-1, 1],
-      y: [-3.5, -1.5]
-    }
-  };
-
-  constructor(config?: CodeBlastConfig) {
-    if (config) {
-      this.config = { ...this.config, ...config };
-    }
-    this.particles = new Array(this.config.maxParticles);
-  }
-
-  private getRGBComponents(element: Element): number[] {
-    try {
-      const style = getComputedStyle(element);
-      const color = style.color;
-      if (color) {
-        const match = color.match(/(\d+),\s*(\d+),\s*(\d+)/);
-        if (match) {
-          return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
-        }
-      }
-    } catch (e) {
-      console.warn('Failed to get RGB components:', e);
-    }
-    return [255, 255, 255]; // 默认白色
-  }
-
-  private random(min: number, max?: number): number {
-    if (max === undefined) {
-      max = min;
-      min = 0;
-    }
-    return min + Math.floor(Math.random() * (max - min + 1));
-  }
-
-  private createParticle(x: number, y: number, color: number[]): Particle {
-    const particle: Particle = {
-      x,
-      y: y + 10,
-      alpha: 1,
-      color,
-      vx: 0,
-      vy: 0,
-      size: 0
-    };
-
-    if (this.config.effect === 1) {
-      particle.size = this.random(2, 4);
-      particle.vx = this.config.velocityRange.x[0] + 
-        Math.random() * (this.config.velocityRange.x[1] - this.config.velocityRange.x[0]);
-      particle.vy = this.config.velocityRange.y[0] + 
-        Math.random() * (this.config.velocityRange.y[1] - this.config.velocityRange.y[0]);
-    } else if (this.config.effect === 2) {
-      particle.size = this.random(2, 8);
-      particle.drag = 0.92;
-      particle.vx = this.random(-3, 3);
-      particle.vy = this.random(-3, 3);
-      particle.wander = 0.15;
-      particle.theta = this.random(0, 360) * Math.PI / 180;
-    }
-
-    return particle;
-  }
-
-  private spawnParticles(view: EditorView): void {
-    if (!this.ctx) return;
-
-    try {
-      // 获取光标位置
-      const selection = view.state.selection.main;
-      const coords = view.coordsAtPos(selection.head);
-      if (!coords) return;
-
-    // 获取光标处的元素来确定颜色
-    const element = document.elementFromPoint(coords.left, coords.top);
-    const color = element ? this.getRGBComponents(element) : [255, 255, 255];
-
-    const numParticles = this.random(
-      this.config.particleRange.min, 
-      this.config.particleRange.max
-    );
-
-    for (let i = 0; i < numParticles; i++) {
-      this.particles[this.particlePointer] = this.createParticle(
-        coords.left + 10, 
-        coords.top, 
-        color
-      );
-      this.particlePointer = (this.particlePointer + 1) % this.config.maxParticles;
-    }
-    } catch (error) {
-      // 如果在更新期间无法读取坐标，静默忽略
-      console.warn('Failed to spawn particles:', error);
-    }
-  }
-
-  private effect1(particle: Particle): void {
-    if (!this.ctx) return;
-
-    particle.vy += this.config.gravity;
-    particle.x += particle.vx;
-    particle.y += particle.vy;
-    particle.alpha *= this.config.alphaFadeout;
-
-    this.ctx.fillStyle = `rgba(${particle.color[0]}, ${particle.color[1]}, ${particle.color[2]}, ${particle.alpha})`;
-    this.ctx.fillRect(
-      Math.round(particle.x - 1), 
-      Math.round(particle.y - 1), 
-      particle.size, 
-      particle.size
-    );
-  }
-
-  private effect2(particle: Particle): void {
-    if (!this.ctx || particle.theta === undefined || particle.drag === undefined) return;
-
-    particle.x += particle.vx;
-    particle.y += particle.vy;
-    particle.vx *= particle.drag;
-    particle.vy *= particle.drag;
-    particle.theta += this.random(-0.5, 0.5);
-    particle.vx += Math.sin(particle.theta) * 0.1;
-    particle.vy += Math.cos(particle.theta) * 0.1;
-    particle.size *= 0.96;
-
-    this.ctx.fillStyle = `rgba(${particle.color[0]}, ${particle.color[1]}, ${particle.color[2]}, ${particle.alpha})`;
-    this.ctx.beginPath();
-    this.ctx.arc(
-      Math.round(particle.x - 1), 
-      Math.round(particle.y - 1), 
-      particle.size, 
-      0, 
-      2 * Math.PI
-    );
-    this.ctx.fill();
-  }
-
-  private drawParticles(): void {
-    if (!this.ctx) return;
-
-    for (let i = 0; i < this.particles.length; i++) {
-      const particle = this.particles[i];
-      if (!particle || particle.alpha < 0.01 || particle.size <= 0.5) {
-        continue;
-      }
-
-      if (this.config.effect === 1) {
-        this.effect1(particle);
-      } else if (this.config.effect === 2) {
-        this.effect2(particle);
-      }
-    }
-  }
-
-  private shake(view: EditorView, duration: number): void {
-    if (!this.config.shake) return;
-
-    this.shakeTime = this.shakeTimeMax = duration;
-    const editorElement = view.dom;
-    
-    const shakeAnimation = () => {
-      if (this.shakeTime <= 0) {
-        editorElement.style.transform = '';
-        return;
-      }
-
-      const magnitude = (this.shakeTime / this.shakeTimeMax) * this.config.shakeIntensity;
-      const shakeX = this.random(-magnitude, magnitude);
-      const shakeY = this.random(-magnitude, magnitude);
-      editorElement.style.transform = `translate(${shakeX}px, ${shakeY}px)`;
-      
-      this.shakeTime -= 0.016; // ~60fps
-      requestAnimationFrame(shakeAnimation);
-    };
-
-    requestAnimationFrame(shakeAnimation);
-  }
-
-  private loop = (): void => {
-    if (!this.isActive || !this.ctx || !this.canvas) return;
-
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    this.drawParticles();
-    this.animationId = requestAnimationFrame(this.loop);
-  };
-
-  public init(view: EditorView): void {
-    if (this.isActive) return;
-
-    this.isActive = true;
-
-    if (!this.canvas) {
-      this.canvas = document.createElement('canvas');
-      this.ctx = this.canvas.getContext('2d');
-      
-      if (!this.ctx) {
-        console.error('Failed to get canvas context');
-        return;
-      }
-
-      this.canvas.id = 'code-blast-canvas';
-      this.canvas.style.position = 'absolute';
-      this.canvas.style.top = '0';
-      this.canvas.style.left = '0';
-      this.canvas.style.zIndex = '1';
-      this.canvas.style.pointerEvents = 'none';
-      this.canvas.width = window.innerWidth;
-      this.canvas.height = window.innerHeight;
-
-      document.body.appendChild(this.canvas);
-      this.loop();
-    }
-  }
-
-  public destroy(): void {
-    this.isActive = false;
-    
-    if (this.animationId) {
-      cancelAnimationFrame(this.animationId);
-      this.animationId = null;
-    }
-
-    if (this.canvas) {
-      this.canvas.remove();
-      this.canvas = null;
-      this.ctx = null;
-    }
-  }
-
-  public onDocumentChange(view: EditorView): void {
-    if (this.config.shake) {
-      this.shake(view, 0.3);
-    }
-    // 使用 requestIdleCallback 或 setTimeout 延迟执行粒子生成
-    // 确保在 DOM 更新完成后再读取坐标
-    if (window.requestIdleCallback) {
-      window.requestIdleCallback(() => {
-        this.spawnParticles(view);
-      });
-    } else {
-      setTimeout(() => {
-        this.spawnParticles(view);
-      }, 16); // ~60fps
-    }
-  }
-
-  public updateCanvasSize(): void {
-    if (this.canvas) {
-      this.canvas.width = window.innerWidth;
-      this.canvas.height = window.innerHeight;
-    }
-  }
-}
-
-// 节流函数
-function throttle<T extends (...args: any[]) => void>(
-  func: T, 
-  limit: number
-): (...args: Parameters<T>) => void {
-  let inThrottle: boolean;
-  return function(this: any, ...args: Parameters<T>) {
-    if (!inThrottle) {
-      func.apply(this, args);
-      inThrottle = true;
-      setTimeout(() => inThrottle = false, limit);
-    }
-  };
-}
-
-// 创建 CodeBlast 扩展
-export function createCodeBlastExtension(config?: CodeBlastConfig): Extension {
-  let effect: CodeBlastEffect | null = null;
-
-  const plugin = ViewPlugin.fromClass(class {
-    private throttledOnChange: (view: EditorView) => void;
-
-    constructor(private view: EditorView) {
-      effect = new CodeBlastEffect(config);
-      effect.init(view);
-      
-      this.throttledOnChange = throttle((view: EditorView) => {
-        effect?.onDocumentChange(view);
-      }, 100);
-
-      // 监听窗口大小变化
-      window.addEventListener('resize', this.handleResize);
-    }
-
-    update(update: ViewUpdate) {
-      if (update.docChanged) {
-        // 延迟执行，确保更新完成后再触发效果
-        setTimeout(() => {
-          this.throttledOnChange(this.view);
-        }, 0);
-      }
-    }
-
-    destroy() {
-      effect?.destroy();
-      effect = null;
-      window.removeEventListener('resize', this.handleResize);
-    }
-
-    private handleResize = () => {
-      effect?.updateCanvasSize();
-    };
-  });
-
-  return plugin;
-}
-
-// 默认导出
-export const codeBlast = createCodeBlastExtension(); 
--- a/frontend/src/views/editor/extensions/codeblast/styles.css
+++ b/frontend/src/views/editor/extensions/codeblast/styles.css
@@ -1,52 +0,0 @@
-#code-blast-canvas {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1000;
-  pointer-events: none;
-  background: transparent;
-}
-
-/* 确保编辑器在震动时不会影响布局 */
-.cm-editor {
-  transition: transform 0.1s ease-out;
-}
-
-/* 打字机效果的粒子样式 */
-.code-blast-particle {
-  position: absolute;
-  pointer-events: none;
-  border-radius: 50%;
-  animation: particle-fade 2s ease-out forwards;
-}
-
-@keyframes particle-fade {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-}
-
-/* 震动效果的缓动 */
-.code-blast-shake {
-  animation: shake 0.3s ease-out;
-}
-
-@keyframes shake {
-  0%, 100% { transform: translate(0, 0); }
-  10% { transform: translate(-2px, -1px); }
-  20% { transform: translate(2px, 1px); }
-  30% { transform: translate(-1px, 2px); }
-  40% { transform: translate(1px, -2px); }
-  50% { transform: translate(-2px, 1px); }
-  60% { transform: translate(2px, -1px); }
-  70% { transform: translate(-1px, -2px); }
-  80% { transform: translate(1px, 2px); }
-  90% { transform: translate(-2px, -1px); }
-} 
--- a/frontend/src/views/editor/extensions/codeblock/commands.ts
+++ b/frontend/src/views/editor/extensions/codeblock/commands.ts
@@ -282,12 +282,21 @@ export const deleteBlock = (options: EditorOptions): Command => ({ state, dispat
    
    if (blockIndex === blocks.length - 1) {
        // 如果是最后一个块，将光标移到前一个块的末尾
-        newCursorPos = blocks[blockIndex - 1].content.to;
+        // 需要计算删除后的位置
+        const prevBlock = blocks[blockIndex - 1];
+        newCursorPos = prevBlock.content.to;
    } else {
        // 否则移到下一个块的开始
-        newCursorPos = blocks[blockIndex + 1].content.from;
+        // 需要计算删除后的位置，下一个块会向前移动
+        const nextBlock = blocks[blockIndex + 1];
+        const blockLength = block.range.to - block.range.from;
+        newCursorPos = nextBlock.content.from - blockLength;
    }
    
+    // 确保光标位置在有效范围内
+    const docLengthAfterDelete = state.doc.length - (block.range.to - block.range.from);
+    newCursorPos = Math.max(0, Math.min(newCursorPos, docLengthAfterDelete));
+    
    dispatch(state.update({
        changes: {
            from: block.range.from,
--- a/frontend/src/views/editor/extensions/codeblock/copyPaste.ts
+++ b/frontend/src/views/editor/extensions/codeblock/copyPaste.ts
@@ -208,27 +208,4 @@ export function getCopyPasteExtensions() {
  return [
    codeBlockCopyCut,
  ];
-}
-
-/**
- * 获取复制粘贴键盘映射
- */
-export function getCopyPasteKeymap() {
-  return [
-    {
-      key: 'Mod-c',
-      run: copyCommand,
-      preventDefault: true
-    },
-    {
-      key: 'Mod-x',
-      run: cutCommand,
-      preventDefault: true
-    },
-    {
-      key: 'Mod-v',
-      run: pasteCommand,
-      preventDefault: true
-    }
-  ];
-} 
+}
--- a/frontend/src/views/editor/extensions/codeblock/formatCode.ts
+++ b/frontend/src/views/editor/extensions/codeblock/formatCode.ts
@@ -6,65 +6,63 @@ import { getLanguage } from "./lang-parser/languages"
 import { SupportedLanguage } from "./types"

 export const formatBlockContent = (view) => {
-    const state = view.state
-    if (state.readOnly)
+    if (!view || view.state.readOnly)
        return false
-    const block = getActiveNoteBlock(state)
+        
+    // 获取初始信息，但不缓存state对象
+    const initialState = view.state
+    const block = getActiveNoteBlock(initialState)

    if (!block) {
        return false
    }

-    const language = getLanguage(block.language.name as SupportedLanguage)
+    const blockFrom = block.content.from
+    const blockTo = block.content.to
+    const blockLanguageName = block.language.name as SupportedLanguage
+    
+    const language = getLanguage(blockLanguageName)
    if (!language || !language.prettier) {
        return false
    }
    
-    // get current cursor position
-    const cursorPos = state.selection.asSingle().ranges[0].head
-    // get block content
-    const content = state.sliceDoc(block.content.from, block.content.to)
+    // 获取初始需要的信息
+    const cursorPos = initialState.selection.asSingle().ranges[0].head
+    const content = initialState.sliceDoc(blockFrom, blockTo)
+    const tabSize = initialState.tabSize

-    let useFormat = false
-    if (cursorPos == block.content.from || cursorPos == block.content.to) {
-        useFormat = true
-    }
+    // 检查光标是否在块的开始或结束
+    const cursorAtEdge = cursorPos == blockFrom || cursorPos == blockTo

-    // 执行异步格式化，但在回调中获取最新状态
+    // 执行异步格式化
    const performFormat = async () => {
        let formattedContent
        try {
-            if (useFormat) {
-                formattedContent = {
-                    formatted: await prettier.format(content, {
-                        parser: language.prettier!.parser,
-                        plugins: language.prettier!.plugins,
-                        tabWidth: state.tabSize,
-                    }),
-                }
-                formattedContent.cursorOffset = cursorPos == block.content.from ? 0 : formattedContent.formatted.length
-            } else {
-                // formatWithCursor 有性能问题，改用简单格式化 + 光标位置计算
-                const formatted = await prettier.format(content, {
-                    parser: language.prettier!.parser,
-                    plugins: language.prettier!.plugins,
-                    tabWidth: state.tabSize,
-                })
-                formattedContent = {
-                    formatted: formatted,
-                    cursorOffset: Math.min(cursorPos - block.content.from, formatted.length)
-                }
+            // 格式化代码
+            const formatted = await prettier.format(content, {
+                parser: language.prettier!.parser,
+                plugins: language.prettier!.plugins,
+                tabWidth: tabSize,
+            })
+            
+            // 计算新光标位置
+            const cursorOffset = cursorAtEdge 
+                ? (cursorPos == blockFrom ? 0 : formatted.length)
+                : Math.min(cursorPos - blockFrom, formatted.length)
+            
+            formattedContent = {
+                formatted,
+                cursorOffset
            }
        } catch (e) {
-            const hyphens = "----------------------------------------------------------------------------"
-            const errorMessage = (e as Error).message;
-            console.log(`Error when trying to format block:\n${hyphens}\n${errorMessage}\n${hyphens}`)
            return false
        }
        
        try {
-            // 重新获取当前状态和块信息，确保状态一致
+            // 格式化完成后再次获取最新状态
            const currentState = view.state
+            
+            // 重新获取当前块的位置
            const currentBlock = getActiveNoteBlock(currentState)
            
            if (!currentBlock) {
@@ -72,17 +70,22 @@ export const formatBlockContent = (view) => {
                return false
            }
            
-            view.dispatch(currentState.update({
+            // 使用当前块的实际位置
+            const currentBlockFrom = currentBlock.content.from
+            const currentBlockTo = currentBlock.content.to
+            
+            // 基于最新状态创建更新
+            view.dispatch({
                changes: {
-                    from: currentBlock.content.from,
-                    to: currentBlock.content.to,
+                    from: currentBlockFrom,
+                    to: currentBlockTo,
                    insert: formattedContent.formatted,
                },
-                selection: EditorSelection.cursor(currentBlock.content.from + Math.min(formattedContent.cursorOffset, formattedContent.formatted.length)),
-            }, {
-                userEvent: "input",
+                selection: EditorSelection.cursor(currentBlockFrom + Math.min(formattedContent.cursorOffset, formattedContent.formatted.length)),
                scrollIntoView: true,
-            }))
+                userEvent: "input"
+            })
+            
            return true;
        } catch (error) {
            console.error('Failed to apply formatting changes:', error);
--- a/frontend/src/views/editor/extensions/codeblock/index.ts
+++ b/frontend/src/views/editor/extensions/codeblock/index.ts
@@ -13,17 +13,14 @@
 */

 import {Extension} from '@codemirror/state';
-import {keymap, lineNumbers} from '@codemirror/view';
+import {lineNumbers} from '@codemirror/view';

 // 导入核心模块
 import {blockState} from './state';
 import {getBlockDecorationExtensions} from './decorations';
-import * as commands from './commands';
-import {getBlockSelectExtensions, selectAll} from './selectAll';
-import {getCopyPasteExtensions, getCopyPasteKeymap} from './copyPaste';
-import {deleteLineCommand} from './deleteLine';
+import {getBlockSelectExtensions} from './selectAll';
+import {getCopyPasteExtensions} from './copyPaste';
 import {moveLineDown, moveLineUp} from './moveLines';
-import {transposeChars} from './transposeChars';
 import {getCodeBlockLanguageExtension} from './lang-parser';
 import {createLanguageDetection} from './language-detection';
 import {EditorOptions, SupportedLanguage} from './types';
@@ -92,13 +89,7 @@ export function createCodeBlockExtension(options: CodeBlockOptions = {}): Extens
        defaultAutoDetect = true,
    } = options;

-    // 将简化的配置转换为内部使用的EditorOptions
-    const editorOptions: EditorOptions = {
-        defaultBlockToken: defaultLanguage,
-        defaultBlockAutoDetect: defaultAutoDetect,
-    };
-
-    const extensions: Extension[] = [
+    return [
        // 核心状态管理
        blockState,

@@ -126,105 +117,7 @@ export function createCodeBlockExtension(options: CodeBlockOptions = {}): Extens
        // 复制粘贴功能
        ...getCopyPasteExtensions(),

-        // 键盘映射
-        keymap.of([
-            // 复制粘贴命令
-            ...getCopyPasteKeymap(),
-
-            // 块隔离选择命令
-            {
-                key: 'Mod-a',
-                run: selectAll,
-                preventDefault: true
-            },
-            // 块创建命令
-            {
-                key: 'Mod-Enter',
-                run: commands.addNewBlockAfterCurrent(editorOptions),
-                preventDefault: true
-            },
-            {
-                key: 'Mod-Shift-Enter',
-                run: commands.addNewBlockAfterLast(editorOptions),
-                preventDefault: true
-            },
-            {
-                key: 'Alt-Enter',
-                run: commands.addNewBlockBeforeCurrent(editorOptions),
-                preventDefault: true
-            },
-
-            // 块导航命令
-            {
-                key: 'Mod-ArrowUp',
-                run: commands.gotoPreviousBlock,
-                preventDefault: true
-            },
-            {
-                key: 'Mod-ArrowDown',
-                run: commands.gotoNextBlock,
-                preventDefault: true
-            },
-            {
-                key: 'Mod-Shift-ArrowUp',
-                run: commands.selectPreviousBlock,
-                preventDefault: true
-            },
-            {
-                key: 'Mod-Shift-ArrowDown',
-                run: commands.selectNextBlock,
-                preventDefault: true
-            },
-
-            // 块编辑命令
-            {
-                key: 'Mod-Shift-d',
-                run: commands.deleteBlock(editorOptions),
-                preventDefault: true
-            },
-            {
-                key: 'Alt-Mod-ArrowUp',
-                run: commands.moveCurrentBlockUp,
-                preventDefault: true
-            },
-            {
-                key: 'Alt-Mod-ArrowDown',
-                run: commands.moveCurrentBlockDown,
-                preventDefault: true
-            },
-
-            // 行编辑命令
-            {
-                key: 'Mod-Shift-k',  // 删除行
-                run: deleteLineCommand,
-                preventDefault: true
-            },
-            {
-                key: 'Alt-ArrowUp',  // 向上移动行
-                run: moveLineUp,
-                preventDefault: true
-            },
-            {
-                key: 'Alt-ArrowDown',  // 向下移动行
-                run: moveLineDown,
-                preventDefault: true
-            },
-            {
-                key: 'Ctrl-t',  // 字符转置
-                run: transposeChars,
-                preventDefault: true
-            },
-            
-            // 代码格式化命令
-            {
-                key: 'Mod-Shift-f',  // 格式化代码
-                run: commands.formatCurrentBlock,
-                preventDefault: true
-            },
-        ])
    ];
-
-    return extensions;
 }


@@ -271,7 +164,6 @@ export {
    cutCommand,
    pasteCommand,
    getCopyPasteExtensions,
-    getCopyPasteKeymap
 } from './copyPaste';

 // 删除行功能
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
landaiqing	f37c659c89	🐛 Adjusted error message and icon clearing logic	2025-07-17 11:03:42 +08:00
landaiqing	9fff7bcfca	✨ Added the backup feature	2025-07-17 00:12:00 +08:00
landaiqing	b4b0ad9bba	🎨 Optimize storage logic	2025-07-13 22:32:58 +08:00
landaiqing	6d8fdf62f1	💡 Update docs	2025-07-13 11:58:53 +08:00
landaiqing	9f53d7421d	Merge remote-tracking branch 'github/master'	2025-07-12 23:56:43 +08:00
landaiqing	80c8ecb4cf	💡 Update docs	2025-07-12 23:56:04 +08:00
landaiqing	d10059a82d	Create CNAME	2025-07-12 22:25:19 +08:00
landaiqing	737f83cd5f	💡 Add docs	2025-07-12 22:14:35 +08:00
landaiqing	a720a4cfb8	✨ Complete the custom editor theme	2025-07-11 23:03:28 +08:00
landaiqing	b5510d605c	✨ Add multi-window document functionality	2025-07-10 18:45:51 +08:00
landaiqing	4d62da912a	⬆️ Upgrade wails v3 from Alpha 9 to Alpha 10	2025-07-10 10:01:52 +08:00
landaiqing	b52e067d50	🍎 Fix build issues	2025-07-08 17:36:45 +08:00
landaiqing	8dce06c30e	🐛 Fixed the reboot issue on different platforms	2025-07-08 12:41:30 +08:00
landaiqing	b404434b5b	🎨 Updated	2025-07-07 16:09:09 +08:00
landaiqing	685897e828	🎨 Updated	2025-07-07 15:55:48 +08:00
landaiqing	4f1d70135e	📝 README.md	2025-07-07 15:41:46 +08:00
landaiqing	4dc424781b	📄 Change the license	2025-07-07 13:39:54 +08:00
landaiqing	7fcfc5e992	🎨 Refactoring the extension service and the keybinding service	2025-07-07 13:19:59 +08:00
landaiqing	7c2318a13f	✨ Add translation features	2025-07-06 23:41:15 +08:00
landaiqing	a2a332e735	✨ Added context menu	2025-07-04 14:37:35 +08:00
landaiqing	ebee33ea7c	✨ Add self-updating service	2025-07-03 15:21:01 +08:00
landaiqing	81eb2c94ac	🐛 Fixed some issues	2025-07-02 12:10:46 +08:00
landaiqing	25e1a98932	🐛 Fixed block formatting issue	2025-07-01 23:55:15 +08:00
landaiqing	1ccee779ae	🐛 Fixed extension management issues	2025-07-01 23:25:24 +08:00
landaiqing	3e45e6aa9b	⚡ Performance optimization	2025-07-01 20:11:27 +08:00
landaiqing	1604564e63	✨ Complete multi-document mode	2025-07-01 18:16:05 +08:00
landaiqing	70d88dabba	✨ Use SQLite instead of JSON storage	2025-06-29 23:42:06 +08:00
landaiqing	6f8775472d	✨ Add selection box extension	2025-06-25 23:50:57 +08:00
landaiqing	a9b967aba4	🐛 Fixed the issue of text highlighting expansion	2025-06-25 22:53:00 +08:00
landaiqing	69957a16cf	🎨 binding keymap and extension	2025-06-25 21:09:21 +08:00
landaiqing	650884cb85	✨ Improve extension management	2025-06-25 17:50:50 +08:00
landaiqing	8e91e3cf7c	✨ Add extension management page	2025-06-24 19:18:30 +08:00
landaiqing	f3bcb87828	✨ Add extension management service	2025-06-24 14:16:53 +08:00
landaiqing	ea025e3f5d	✨ Add update service	2025-06-23 19:42:48 +08:00
landaiqing	4f8272e290	✨ Add configuration merge service	2025-06-23 12:03:56 +08:00
landaiqing	d6dd34db87	♻️ Refactor and clean up the code	2025-06-22 21:30:45 +08:00
landaiqing	eb9b037f8e	🎨 Optimize code	2025-06-22 15:08:38 +08:00
landaiqing	35c89e086e	🎨 Updated	2025-06-22 12:08:50 +08:00
landaiqing	77287bccfa	🎨 Updated	2025-06-21 19:05:08 +08:00
landaiqing	a92e5486b2	🐛 Fixed theme and packaging issues	2025-06-21 15:33:50 +08:00
landaiqing	1153c0a652	🐛 Fixed bug	2025-06-21 15:04:04 +08:00
landaiqing	145b868a44	🐛 Fixed the issue of deleting blocks	2025-06-21 00:34:22 +08:00
landaiqing	6acab678d0	✨ Unified management of keymap	2025-06-21 00:28:35 +08:00
landaiqing	cb3d369aef	🎨 Updated	2025-06-20 13:46:13 +08:00