✨ Complete the custom editor theme

LICENSE

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

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
+- [ ] Enhanced clipboard - Monitor and manage clipboard history
+- [ ] Data synchronization - Cloud backup for configurations and documents
+- [ ] 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*

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*

build/config.yml

@@ -5,13 +5,13 @@ version: '3'
 
 # This information is used to generate the build assets.
 info:
-  companyName: "My Company" # The name of the company
-  productName: "My Product" # The name of the application
-  productIdentifier: "com.mycompany.myproduct" # The unique product identifier
-  description: "A program that does X" # The application description
-  copyright: "(c) 2024, My Company" # Copyright text
-  comments: "Some Product Comments" # Comments
-  version: "v0.0.1" # The application version
+  companyName: "Voidraft" # The name of the company
+  productName: "Voidraft" # The name of the application
+  productIdentifier: "landaiqing" # The unique product identifier
+  description: "Voidraft" # The application description
+  copyright: "© 2025 Voidraft. All rights reserved." # Copyright text
+  comments: "Voidraft" # Comments
+  version: "0.0.1.0" # The application version
 
 # Dev mode configuration
 dev_mode:

build/darwin/Info.dev.plist

@@ -4,17 +4,17 @@
         <key>CFBundlePackageType</key>
         <string>APPL</string>
         <key>CFBundleName</key>
-        <string>My Product</string>
+        <string>Voidraft</string>
         <key>CFBundleExecutable</key>
-        <string>voidraft.exe</string>
+        <string>Voidraft</string>
         <key>CFBundleIdentifier</key>
-        <string>com.wails.voidraft</string>
+        <string>landaiqing</string>
         <key>CFBundleVersion</key>
-        <string>0.1.0</string>
+        <string>0.0.1.0</string>
         <key>CFBundleGetInfoString</key>
-        <string>This is a comment</string>
+        <string>Voidraft</string>
         <key>CFBundleShortVersionString</key>
-        <string>0.1.0</string>
+        <string>0.0.1.0</string>
         <key>CFBundleIconFile</key>
         <string>icons</string>
         <key>LSMinimumSystemVersion</key>
@@ -22,7 +22,7 @@
         <key>NSHighResolutionCapable</key>
         <string>true</string>
         <key>NSHumanReadableCopyright</key>
-        <string>© now, My Company</string>
+        <string>© 2025 Voidraft. All rights reserved.</string>
         <key>NSAppTransportSecurity</key>
         <dict>
             <key>NSAllowsLocalNetworking</key>

build/darwin/Info.plist

@@ -4,17 +4,17 @@
         <key>CFBundlePackageType</key>
         <string>APPL</string>
         <key>CFBundleName</key>
-        <string>My Product</string>
+        <string>Voidraft</string>
         <key>CFBundleExecutable</key>
-        <string>voidraft.exe</string>
+        <string>Voidraft</string>
         <key>CFBundleIdentifier</key>
-        <string>com.wails.voidraft</string>
+        <string>landaiqing</string>
         <key>CFBundleVersion</key>
-        <string>0.1.0</string>
+        <string>0.0.1.0</string>
         <key>CFBundleGetInfoString</key>
-        <string>This is a comment</string>
+        <string>Voidraft</string>
         <key>CFBundleShortVersionString</key>
-        <string>0.1.0</string>
+        <string>0.0.1.0</string>
         <key>CFBundleIconFile</key>
         <string>icons</string>
         <key>LSMinimumSystemVersion</key>
@@ -22,6 +22,6 @@
         <key>NSHighResolutionCapable</key>
         <string>true</string>
         <key>NSHumanReadableCopyright</key>
-        <string>© now, My Company</string>
+        <string>© 2025 Voidraft. All rights reserved.</string>
     </dict>
 </plist>

build/linux/nfpm/nfpm.yaml

@@ -3,26 +3,26 @@
 #
 # The lines below are called `modelines`. See `:help modeline`
 
-name: "voidraft.exe"
+name: "Voidraft"
 arch: ${GOARCH}
 platform: "linux"
-version: "0.1.0"
+version: "0.0.1.0"
 section: "default"
 priority: "extra"
 maintainer: ${GIT_COMMITTER_NAME} <${GIT_COMMITTER_EMAIL}>
-description: "My Product Description"
-vendor: "My Company"
+description: "Voidraft"
+vendor: "Voidraft"
 homepage: "https://wails.io"
 license: "MIT"
 release: "1"
 
 contents:
-  - src: "./bin/voidraft.exe"
-    dst: "/usr/local/bin/voidraft.exe"
+  - src: "./bin/Voidraft"
+    dst: "/usr/local/bin/Voidraft"
   - src: "./build/appicon.png"
-    dst: "/usr/share/icons/hicolor/128x128/apps/voidraft.exe.png"
-  - src: "./build/linux/voidraft.exe.desktop"
-    dst: "/usr/share/applications/voidraft.exe.desktop"
+    dst: "/usr/share/icons/hicolor/128x128/apps/Voidraft.png"
+  - src: "./build/linux/Voidraft.desktop"
+    dst: "/usr/share/applications/Voidraft.desktop"
 
 depends:
   - gtk3

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

build/windows/Taskfile.yml

@@ -23,7 +23,7 @@ tasks:
       BUILD_FLAGS: '{{if eq .PRODUCTION "true"}}-tags production -trimpath -buildvcs=false -ldflags="-w -s -H windowsgui"{{else}}-buildvcs=false -gcflags=all="-l"{{end}}'
     env:
       GOOS: windows
-      CGO_ENABLED: 0
+      CGO_ENABLED: 1
       GOARCH: '{{.ARCH | default ARCH}}'
       PRODUCTION: '{{.PRODUCTION | default "false"}}'
 

build/windows/info.json

@@ -1,15 +1,15 @@
 {
 	"fixed": {
-		"file_version": "0.1.0"
+		"file_version": "0.0.1.0"
 	},
 	"info": {
 		"0000": {
-			"ProductVersion": "0.1.0",
-			"CompanyName": "My Company",
-			"FileDescription": "My Product Description",
-			"LegalCopyright": "© now, My Company",
-			"ProductName": "My Product",
-			"Comments": "This is a comment"
+			"ProductVersion": "0.0.1.0",
+			"CompanyName": "Voidraft",
+			"FileDescription": "Voidraft",
+			"LegalCopyright": "© 2025 Voidraft. All rights reserved.",
+			"ProductName": "Voidraft",
+			"Comments": "Voidraft"
 		}
 	}
 }

build/windows/nsis/wails_tools.nsh

@@ -5,19 +5,19 @@
 !include "FileFunc.nsh"
 
 !ifndef INFO_PROJECTNAME
-    !define INFO_PROJECTNAME "voidraft"
+    !define INFO_PROJECTNAME "Voidraft"
 !endif
 !ifndef INFO_COMPANYNAME
-    !define INFO_COMPANYNAME "My Company"
+    !define INFO_COMPANYNAME "Voidraft"
 !endif
 !ifndef INFO_PRODUCTNAME
-    !define INFO_PRODUCTNAME "My Product"
+    !define INFO_PRODUCTNAME "Voidraft"
 !endif
 !ifndef INFO_PRODUCTVERSION
-    !define INFO_PRODUCTVERSION "0.1.0"
+    !define INFO_PRODUCTVERSION "0.0.1.0"
 !endif
 !ifndef INFO_COPYRIGHT
-    !define INFO_COPYRIGHT "© now, My Company"
+    !define INFO_COPYRIGHT "© 2025 Voidraft. All rights reserved."
 !endif
 !ifndef PRODUCT_EXECUTABLE
     !define PRODUCT_EXECUTABLE "${INFO_PROJECTNAME}.exe"

build/windows/wails.exe.manifest

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1" xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">
-    <assemblyIdentity type="win32" name="com.wails.voidraft" version="0.1.0" processorArchitecture="*"/>
+    <assemblyIdentity type="win32" name="landaiqing" version="0.0.1.0" processorArchitecture="*"/>
     <dependency>
         <dependentAssembly>
             <assemblyIdentity type="win32" name="Microsoft.Windows.Common-Controls" version="6.0.0.0" processorArchitecture="*" publicKeyToken="6595b64144ccf1df" language="*"/>

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

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

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

@@ -0,0 +1,443 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as slog$0 from "../../../../../../log/slog/models.js";
+
+export class App {
+    /**
+     * Manager pattern for organized API
+     */
+    "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 (!("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;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new App instance from a string or object.
+     */
+    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 ("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"] = $$createField11_0($$parsedSource["Logger"]);
+        }
+        return new App($$parsedSource as Partial<App>);
+    }
+}
+
+/**
+ * BrowserManager manages browser-related operations
+ */
+export class BrowserManager {
+
+    /** Creates a new BrowserManager instance. */
+    constructor($$source: Partial<BrowserManager> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new BrowserManager instance from a string or object.
+     */
+    static createFrom($$source: any = {}): BrowserManager {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        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>);
+    }
+}
+
+export class WebviewWindow {
+
+    /** Creates a new WebviewWindow instance. */
+    constructor($$source: Partial<WebviewWindow> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new WebviewWindow instance from a string or object.
+     */
+    static createFrom($$source: any = {}): WebviewWindow {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new WebviewWindow($$parsedSource as Partial<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 = WindowManager.createFrom;
+const $$createType1 = $Create.Nullable($$createType0);
+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);

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/sqlite/index.ts

@@ -1,7 +1,9 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
-import * as GreetService from "./greetservice.js";
+import * as Service from "./service.js";
 export {
-    GreetService
+    Service
 };
+
+export * from "./models.js";

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

@@ -0,0 +1,51 @@
+// 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";
+
+export class Config {
+    /**
+     * DBSource is the database URI to use.
+     * The string ":memory:" can be used to create an in-memory database.
+     * The sqlite driver can be configured through query parameters.
+     * For more details see https://pkg.go.dev/modernc.org/sqlite#Driver.Open
+     */
+    "DBSource": string;
+
+    /** Creates a new Config instance. */
+    constructor($$source: Partial<Config> = {}) {
+        if (!("DBSource" in $$source)) {
+            this["DBSource"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new Config instance from a string or object.
+     */
+    static createFrom($$source: any = {}): Config {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new Config($$parsedSource as Partial<Config>);
+    }
+}
+
+/**
+ * Row holds a single row in the result of a query.
+ * It is a key-value map where keys are column names.
+ */
+export type Row = { [_: string]: any };
+
+/**
+ * Rows holds the result of a query
+ * as an array of key-value maps where keys are column names.
+ */
+export type Rows = Row[];
+
+/**
+ * Stmt wraps a prepared sql statement pointer.
+ * It provides the same methods as the [sql.Stmt] type.
+ */
+export type Stmt = string;

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/sqlite/service.ts

@@ -0,0 +1,223 @@
+// 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 {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 "../../application/models.js";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as $models from "./models.js";
+
+export {
+    ExecContext as Execute,
+    QueryContext as Query
+};
+
+import { Stmt } from "./stmt.js";
+
+/**
+ * Prepare creates a prepared statement for later queries or executions.
+ * Multiple queries or executions may be run concurrently from the returned statement.
+ *
+ * The caller must call the statement's Close method when it is no longer needed.
+ * Statements are closed automatically
+ * when the connection they are associated with is closed.
+ *
+ * Prepare supports early cancellation.
+ */
+export function Prepare(query: string): Promise<Stmt | null> & { cancel(): void } {
+    const promise = PrepareContext(query);
+    const wrapper: any = (promise.then(function (id) {
+        return id == null ? null : new Stmt(
+            ClosePrepared.bind(null, id),
+            ExecPrepared.bind(null, id),
+            QueryPrepared.bind(null, id));
+    }));
+    wrapper.cancel = promise.cancel;
+    return wrapper;
+}
+
+/**
+ * Close closes the current database connection if one is open, otherwise has no effect.
+ * Additionally, Close closes all open prepared statements associated to the connection.
+ * 
+ * Even when a non-nil error is returned,
+ * the database service is left in a consistent state,
+ * ready for a call to [Service.Open].
+ */
+export function Close(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1888105376) as any;
+    return $resultPromise;
+}
+
+/**
+ * ClosePrepared closes a prepared statement
+ * obtained with [Service.Prepare] or [Service.PrepareContext].
+ * ClosePrepared is idempotent:
+ * it has no effect on prepared statements that are already closed.
+ */
+function ClosePrepared(stmt: $models.Stmt | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2526200629, stmt) as any;
+    return $resultPromise;
+}
+
+/**
+ * Configure changes the database service configuration.
+ * The connection state at call time is preserved.
+ * Consumers will need to call [Service.Open] manually after Configure
+ * in order to reconnect with the new configuration.
+ * 
+ * See [NewWithConfig] for details on configuration.
+ */
+export function Configure(config: $models.Config | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1939578712, config) as any;
+    return $resultPromise;
+}
+
+/**
+ * ExecContext executes a query without returning any rows.
+ * It supports early cancellation.
+ */
+function ExecContext(query: string, ...args: any[]): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(674944556, query, args) as any;
+    return $resultPromise;
+}
+
+/**
+ * ExecPrepared executes a prepared statement
+ * obtained with [Service.Prepare] or [Service.PrepareContext]
+ * without returning any rows.
+ * It supports early cancellation.
+ */
+function ExecPrepared(stmt: $models.Stmt | null, ...args: any[]): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2086877656, stmt, args) as any;
+    return $resultPromise;
+}
+
+/**
+ * Execute executes a query without returning any rows.
+ */
+export function Execute(query: string, ...args: any[]): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3811930203, query, args) as any;
+    return $resultPromise;
+}
+
+/**
+ * Open validates the current configuration,
+ * closes the current connection if one is present,
+ * then opens and validates a new connection.
+ * 
+ * Even when a non-nil error is returned,
+ * the database service is left in a consistent state,
+ * ready for a new call to Open.
+ */
+export function Open(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2012175612) as any;
+    return $resultPromise;
+}
+
+/**
+ * Prepare creates a prepared statement for later queries or executions.
+ * Multiple queries or executions may be run concurrently from the returned statement.
+ * 
+ * The caller should call the statement's Close method when it is no longer needed.
+ * Statements are closed automatically
+ * when the connection they are associated with is closed.
+ */
+export function Prepare(query: string): Promise<$models.Stmt | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1801965143, query) as any;
+    return $resultPromise;
+}
+
+/**
+ * PrepareContext creates a prepared statement for later queries or executions.
+ * Multiple queries or executions may be run concurrently from the returned statement.
+ * 
+ * The caller must call the statement's Close method when it is no longer needed.
+ * Statements are closed automatically
+ * when the connection they are associated with is closed.
+ * 
+ * PrepareContext supports early cancellation.
+ */
+function PrepareContext(query: string): Promise<$models.Stmt | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(570941694, query) as any;
+    return $resultPromise;
+}
+
+/**
+ * Query executes a query and returns a slice of key-value records,
+ * one per row, with column names as keys.
+ */
+export function Query(query: string, ...args: any[]): Promise<$models.Rows> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(860757720, query, args) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * QueryContext executes a query and returns a slice of key-value records,
+ * one per row, with column names as keys.
+ * It supports early cancellation, returning the slice of results fetched so far.
+ */
+function QueryContext(query: string, ...args: any[]): Promise<$models.Rows> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4115542347, query, args) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * QueryPrepared executes a prepared statement
+ * obtained with [Service.Prepare] or [Service.PrepareContext]
+ * and returns a slice of key-value records, one per row, with column names as keys.
+ * It supports early cancellation, returning the slice of results fetched so far.
+ */
+function QueryPrepared(stmt: $models.Stmt | null, ...args: any[]): Promise<$models.Rows> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3885083725, stmt, args) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * ServiceName returns the name of the plugin.
+ * You should use the go module format e.g. github.com/myuser/myplugin
+ */
+export function ServiceName(): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1637123084) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown closes the database connection.
+ * It returns a non-nil error in case of failures.
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3650435925) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup opens the database connection.
+ * It returns a non-nil error in case of failures.
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1113159936, options) as any;
+    return $resultPromise;
+}
+
+// Private type creation functions
+const $$createType0 = $Create.Map($Create.Any, $Create.Any);
+const $$createType1 = $Create.Array($$createType0);

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/sqlite/stmt.js

@@ -0,0 +1,79 @@
+//@ts-check
+
+//@ts-ignore: Unused imports
+import * as $models from "./models.js";
+
+const execSymbol = Symbol("exec"),
+      querySymbol = Symbol("query"),
+      closeSymbol = Symbol("close");
+
+/**
+ * Stmt represents a prepared statement for later queries or executions.
+ * Multiple queries or executions may be run concurrently on the same statement.
+ *
+ * The caller must call the statement's Close method when it is no longer needed.
+ * Statements are closed automatically
+ * when the connection they are associated with is closed.
+ */
+export class Stmt {
+    /**
+     * Constructs a new prepared statement instance.
+     * @param {(...args: any[]) => Promise<void>} close
+     * @param {(...args: any[]) => Promise<void> & { cancel(): void }} exec
+     * @param {(...args: any[]) => Promise<$models.Rows> & { cancel(): void }} query
+     */
+    constructor(close, exec, query) {
+        /**
+         * @member
+         * @private
+         * @type {typeof close}
+         */
+        this[closeSymbol] = close;
+
+        /**
+         * @member
+         * @private
+         * @type {typeof exec}
+         */
+        this[execSymbol] = exec;
+
+        /**
+         * @member
+         * @private
+         * @type {typeof query}
+         */
+        this[querySymbol] = query;
+    }
+
+    /**
+     * Closes the prepared statement.
+     * It has no effect when the statement is already closed.
+     * @returns {Promise<void>}
+     */
+    Close() {
+        return this[closeSymbol]();
+    }
+
+    /**
+     * Executes the prepared statement without returning any rows.
+     * It supports early cancellation.
+     *
+     * @param {any[]} args
+     * @returns {Promise<void> & { cancel(): void }}
+     */
+    Exec(...args) {
+        return this[execSymbol](...args);
+    }
+
+    /**
+     * Executes the prepared statement
+     * and returns a slice of key-value records, one per row, with column names as keys.
+     * It supports early cancellation, returning the array of results fetched so far.
+     *
+     * @param {any[]} args
+     * @returns {Promise<$models.Rows> & { cancel(): void }}
+     */
+    Query(...args) {
+        return this[querySymbol](...args);
+    }
+}

frontend/bindings/log/slog/index.ts

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

frontend/bindings/log/slog/models.ts

@@ -0,0 +1,31 @@
+// 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";
+
+/**
+ * A Logger records structured information about each call to its
+ * Log, Debug, Info, Warn, and Error methods.
+ * For each call, it creates a [Record] and passes it to a [Handler].
+ * 
+ * To create a new Logger, call [New] or a Logger method
+ * that begins "With".
+ */
+export class Logger {
+
+    /** Creates a new Logger instance. */
+    constructor($$source: Partial<Logger> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new Logger instance from a string or object.
+     */
+    static createFrom($$source: any = {}): Logger {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new Logger($$parsedSource as Partial<Logger>);
+    }
+}

frontend/bindings/time/index.ts

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

frontend/bindings/time/models.ts

@@ -0,0 +1,51 @@
+// 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";
+
+/**
+ * A Time represents an instant in time with nanosecond precision.
+ * 
+ * Programs using times should typically store and pass them as values,
+ * not pointers. That is, time variables and struct fields should be of
+ * type [time.Time], not *time.Time.
+ * 
+ * A Time value can be used by multiple goroutines simultaneously except
+ * that the methods [Time.GobDecode], [Time.UnmarshalBinary], [Time.UnmarshalJSON] and
+ * [Time.UnmarshalText] are not concurrency-safe.
+ * 
+ * Time instants can be compared using the [Time.Before], [Time.After], and [Time.Equal] methods.
+ * The [Time.Sub] method subtracts two instants, producing a [Duration].
+ * The [Time.Add] method adds a Time and a Duration, producing a Time.
+ * 
+ * The zero value of type Time is January 1, year 1, 00:00:00.000000000 UTC.
+ * As this time is unlikely to come up in practice, the [Time.IsZero] method gives
+ * a simple way of detecting a time that has not been initialized explicitly.
+ * 
+ * Each time has an associated [Location]. The methods [Time.Local], [Time.UTC], and Time.In return a
+ * Time with a specific Location. Changing the Location of a Time value with
+ * these methods does not change the actual instant it represents, only the time
+ * zone in which to interpret it.
+ * 
+ * Representations of a Time value saved by the [Time.GobEncode], [Time.MarshalBinary], [Time.AppendBinary],
+ * [Time.MarshalJSON], [Time.MarshalText] and [Time.AppendText] methods store the [Time.Location]'s offset,
+ * but not the location name. They therefore lose information about Daylight Saving Time.
+ * 
+ * In addition to the required “wall clock” reading, a Time may contain an optional
+ * reading of the current process's monotonic clock, to provide additional precision
+ * for comparison or subtraction.
+ * See the “Monotonic Clocks” section in the package documentation for details.
+ * 
+ * Note that the Go == operator compares not just the time instant but also the
+ * Location and the monotonic clock reading. Therefore, Time values should not
+ * be used as map or database keys without first guaranteeing that the
+ * identical Location has been set for all values, which can be achieved
+ * through use of the UTC or Local method, and that the monotonic clock reading
+ * has been stripped by setting t = t.Round(0). In general, prefer t.Equal(u)
+ * to t == u, since t.Equal uses the most accurate comparison available and
+ * correctly handles the case when only one of its arguments has a monotonic
+ * clock reading.
+ */
+export type Time = any;

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";

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",
+};

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

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

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

@@ -0,0 +1,79 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * ConfigService 应用配置服务
+ * @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";
+
+/**
+ * Get 获取配置项
+ */
+export function Get(key: string): Promise<any> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(807201772, key) as any;
+    return $resultPromise;
+}
+
+/**
+ * GetConfig 获取完整应用配置
+ */
+export function GetConfig(): Promise<models$0.AppConfig | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1013336538) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * ResetConfig 强制重置所有配置为默认值
+ */
+export function ResetConfig(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3593047389) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown 关闭服务
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3963562361) as any;
+    return $resultPromise;
+}
+
+/**
+ * Set 设置配置项
+ */
+export function Set(key: string, value: any): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2921955968, key, value) as any;
+    return $resultPromise;
+}
+
+/**
+ * SetDataPathChangeCallback 设置数据路径配置变更回调
+ */
+export function SetDataPathChangeCallback(callback: any): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(393017412, callback) as any;
+    return $resultPromise;
+}
+
+/**
+ * SetHotkeyChangeCallback 设置热键配置变更回调
+ */
+export function SetHotkeyChangeCallback(callback: any): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(283872321, callback) as any;
+    return $resultPromise;
+}
+
+// Private type creation functions
+const $$createType0 = models$0.AppConfig.createFrom;
+const $$createType1 = $Create.Nullable($$createType0);

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

@@ -0,0 +1,39 @@
+// 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;
+}
+
+/**
+ * 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;
+}

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

@@ -0,0 +1,31 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * DialogService 对话框服务，处理文件选择等对话框操作
+ * @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";
+
+/**
+ * SelectDirectory 打开目录选择对话框
+ */
+export function SelectDirectory(): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2249533621) as any;
+    return $resultPromise;
+}
+
+/**
+ * SetWindow 设置绑定的窗口
+ */
+export function SetWindow(window: application$0.WebviewWindow | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(968177170, window) as any;
+    return $resultPromise;
+}

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

@@ -0,0 +1,119 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * DocumentService provides document management 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";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as models$0 from "../models/models.js";
+
+/**
+ * CreateDocument creates a new document and returns the created document with ID
+ */
+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;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * DeleteDocument marks a document as deleted (default document with ID=1 cannot be deleted)
+ */
+export function DeleteDocument(id: number): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(412287269, id) as any;
+    return $resultPromise;
+}
+
+/**
+ * GetDocumentByID gets a document by ID
+ */
+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;
+}
+
+/**
+ * ListAllDocumentsMeta lists all active (non-deleted) document metadata
+ */
+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;
+}
+
+/**
+ * RestoreDocument restores a deleted document
+ */
+export function RestoreDocument(id: number): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(784200778, id) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup initializes the service when the application starts
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1474135487, options) 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);

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);

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

@@ -0,0 +1,82 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * HotkeyService Windows全局热键服务
+ * @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";
+
+/**
+ * GetCurrentHotkey 获取当前热键
+ */
+export function GetCurrentHotkey(): Promise<models$0.HotkeyCombo | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2572811187) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * Initialize 初始化热键服务
+ */
+export function Initialize(app: application$0.App | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3671360458, app) as any;
+    return $resultPromise;
+}
+
+/**
+ * IsRegistered 检查是否已注册
+ */
+export function IsRegistered(): Promise<boolean> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(106954156) as any;
+    return $resultPromise;
+}
+
+/**
+ * RegisterHotkey 注册全局热键
+ */
+export function RegisterHotkey(hotkey: models$0.HotkeyCombo | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1103945691, hotkey) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown 关闭服务
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(157291181) as any;
+    return $resultPromise;
+}
+
+/**
+ * UnregisterHotkey 取消注册全局热键
+ */
+export function UnregisterHotkey(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3544283732) as any;
+    return $resultPromise;
+}
+
+/**
+ * UpdateHotkey 更新热键配置
+ */
+export function UpdateHotkey(enable: boolean, hotkey: models$0.HotkeyCombo | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(823285555, enable, hotkey) as any;
+    return $resultPromise;
+}
+
+// Private type creation functions
+const $$createType0 = models$0.HotkeyCombo.createFrom;
+const $$createType1 = $Create.Nullable($$createType0);

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

@@ -0,0 +1,35 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+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 {
+    ConfigService,
+    DatabaseService,
+    DialogService,
+    DocumentService,
+    ExtensionService,
+    HotkeyService,
+    KeyBindingService,
+    MigrationService,
+    SelfUpdateService,
+    StartupService,
+    SystemService,
+    TranslationService,
+    TrayService,
+    WindowService
+};
+
+export * from "./models.js";

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

@@ -0,0 +1,42 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * KeyBindingService 快捷键管理服务
+ * @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";
+
+/**
+ * GetAllKeyBindings 获取所有快捷键配置
+ */
+export function GetAllKeyBindings(): Promise<models$0.KeyBinding[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1633502882) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * ServiceStartup 启动时调用
+ */
+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);

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

@@ -0,0 +1,54 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * MigrationService 迁移服务
+ * @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";
+
+/**
+ * CancelMigration 取消迁移
+ */
+export function CancelMigration(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1813274502) as any;
+    return $resultPromise;
+}
+
+/**
+ * GetProgress 获取当前进度
+ */
+export function GetProgress(): Promise<$models.MigrationProgress> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3413264131) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType0($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * MigrateDirectory 迁移目录
+ */
+export function MigrateDirectory(srcPath: string, dstPath: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(311970580, srcPath, dstPath) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown 服务关闭
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3472042605) as any;
+    return $resultPromise;
+}
+
+// Private type creation functions
+const $$createType0 = $models.MigrationProgress.createFrom;

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

@@ -0,0 +1,243 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
+
+/**
+ * MemoryStats 内存统计信息
+ */
+export class MemoryStats {
+    /**
+     * 当前堆内存使用量（字节）
+     */
+    "heapInUse": number;
+
+    /**
+     * 堆内存分配总量（字节）
+     */
+    "heapAlloc": number;
+
+    /**
+     * 系统内存使用量（字节）
+     */
+    "sys": number;
+
+    /**
+     * GC 次数
+     */
+    "numGC": number;
+
+    /**
+     * GC 暂停时间（纳秒）
+     */
+    "pauseTotalNs": number;
+
+    /**
+     * Goroutine 数量
+     */
+    "numGoroutine": number;
+
+    /** Creates a new MemoryStats instance. */
+    constructor($$source: Partial<MemoryStats> = {}) {
+        if (!("heapInUse" in $$source)) {
+            this["heapInUse"] = 0;
+        }
+        if (!("heapAlloc" in $$source)) {
+            this["heapAlloc"] = 0;
+        }
+        if (!("sys" in $$source)) {
+            this["sys"] = 0;
+        }
+        if (!("numGC" in $$source)) {
+            this["numGC"] = 0;
+        }
+        if (!("pauseTotalNs" in $$source)) {
+            this["pauseTotalNs"] = 0;
+        }
+        if (!("numGoroutine" in $$source)) {
+            this["numGoroutine"] = 0;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new MemoryStats instance from a string or object.
+     */
+    static createFrom($$source: any = {}): MemoryStats {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new MemoryStats($$parsedSource as Partial<MemoryStats>);
+    }
+}
+
+/**
+ * MigrationProgress 迁移进度信息
+ */
+export class MigrationProgress {
+    "status": MigrationStatus;
+    "progress": number;
+    "error"?: string;
+
+    /** Creates a new MigrationProgress instance. */
+    constructor($$source: Partial<MigrationProgress> = {}) {
+        if (!("status" in $$source)) {
+            this["status"] = ("" as MigrationStatus);
+        }
+        if (!("progress" in $$source)) {
+            this["progress"] = 0;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new MigrationProgress instance from a string or object.
+     */
+    static createFrom($$source: any = {}): MigrationProgress {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new MigrationProgress($$parsedSource as Partial<MigrationProgress>);
+    }
+}
+
+/**
+ * MigrationStatus 迁移状态
+ */
+export enum MigrationStatus {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $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);

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);

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

@@ -1,11 +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";
 
-export function Greet(name: string): Promise<string> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1411160069, name) as any;
+/**
+ * SetEnabled 设置开机启动状态
+ */
+export function SetEnabled(enabled: boolean): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2911601468, enabled) as any;
     return $resultPromise;
 }

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

@@ -0,0 +1,46 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * SystemService 系统监控服务
+ * @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";
+
+/**
+ * FormatBytes 格式化字节数为人类可读的格式
+ */
+export function FormatBytes(bytes: number): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1368998019, bytes) as any;
+    return $resultPromise;
+}
+
+/**
+ * GetMemoryStats 获取当前内存统计信息
+ */
+export function GetMemoryStats(): Promise<$models.MemoryStats> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1678201009) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType0($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * TriggerGC 手动触发垃圾回收
+ */
+export function TriggerGC(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(741882899) as any;
+    return $resultPromise;
+}
+
+// Private type creation functions
+const $$createType0 = $models.MemoryStats.createFrom;

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);

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

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

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

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

frontend/components.d.ts

@@ -8,8 +8,16 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    BlockLanguageSelector: typeof import('./src/components/toolbar/BlockLanguageSelector.vue')['default']
+    DocumentSelector: typeof import('./src/components/toolbar/DocumentSelector.vue')['default']
+    LinuxTitleBar: typeof import('./src/components/titlebar/LinuxTitleBar.vue')['default']
+    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']
     RouterView: typeof import('vue-router')['RouterView']
+    Toolbar: typeof import('./src/components/toolbar/Toolbar.vue')['default']
+    WindowsTitleBar: typeof import('./src/components/titlebar/WindowsTitleBar.vue')['default']
+    WindowTitleBar: typeof import('./src/components/titlebar/WindowTitleBar.vue')['default']
   }
 }

frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/appicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wails + Vue + TS</title>
+    <title>voidraft</title>
   </head>
   <body>
     <div id="app"></div>

frontend/package.json

@@ -12,28 +12,71 @@
     "lint:fix": "eslint --fix"
   },
   "dependencies": {
-    "@primeuix/themes": "^1.0.3",
-    "pinia": "^3.0.2",
-    "primevue": "^4.3.3",
-    "sass": "^1.87.0",
-    "vue": "^3.5.13",
-    "vue-i18n": "^11.1.3",
-    "vue-router": "^4.5.0"
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-angular": "^0.1.4",
+    "@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.2",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-less": "^6.0.2",
+    "@codemirror/lang-lezer": "^6.0.2",
+    "@codemirror/lang-liquid": "^6.2.3",
+    "@codemirror/lang-markdown": "^6.3.3",
+    "@codemirror/lang-php": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.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.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.38.0",
+    "@lezer/highlight": "^1.2.1",
+    "@lezer/lr": "^1.4.2",
+    "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",
+    "pinia-plugin-persistedstate": "^4.4.1",
+    "prettier": "^3.6.2",
+    "remarkable": "^2.0.1",
+    "sass": "^1.89.2",
+    "vue": "^3.5.17",
+    "vue-i18n": "^11.1.9",
+    "vue-pick-colors": "^1.8.0",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.25.1",
-    "@primevue/auto-import-resolver": "^4.3.3",
-    "@types/node": "^22.14.1",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@eslint/js": "^9.30.1",
+    "@lezer/generator": "^1.8.0",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^24.0.12",
+    "@types/remarkable": "^2.0.8",
+    "@vitejs/plugin-vue": "^6.0.0",
     "@wailsio/runtime": "latest",
-    "eslint": "^9.25.1",
-    "eslint-plugin-vue": "^10.0.0",
-    "globals": "^16.0.0",
+    "eslint": "^9.30.1",
+    "eslint-plugin-vue": "^10.3.0",
+    "globals": "^16.3.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.31.0",
-    "unplugin-vue-components": "^28.5.0",
-    "vite": "^6.3.2",
-    "vue-eslint-parser": "^10.1.3",
-    "vue-tsc": "^2.2.8"
+    "typescript-eslint": "^8.36.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^7.0.3",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.0.1"
   }
 }

frontend/public/langdetect-worker.js

@@ -0,0 +1,48 @@
+importScripts("guesslang.min.js")
+
+const LANGUAGES = ["json", "py", "html", "sql", "md", "java", "php", "css", "xml", "cpp", "rs", "cs", "rb", "sh", "yaml", "toml", "go", "clj", "ex", "erl", "js", "ts", "swift", "kt", "groovy", "ps1", "dart", "scala"]
+
+const guessLang = new self.GuessLang()
+
+function sendResult(language, confidence, idx) {
+    postMessage({language, confidence, idx})
+}
+
+onmessage = (event) => {
+    const {content, idx} = event.data
+
+    // JSON 快速检测
+    const trimmed = content.trim()
+    if ((trimmed.startsWith("{") && trimmed.endsWith("}")) ||
+        (trimmed.startsWith("[") && trimmed.endsWith("]"))) {
+        try {
+            if (typeof JSON.parse(trimmed) === "object") {
+                sendResult("json", 1.0, idx)
+                return
+            }
+        } catch (e) {
+
+        }
+    }
+
+    guessLang.runModel(content).then((result) => {
+        if (result.length > 0) {
+            const lang = result[0]
+            if (LANGUAGES.includes(lang.languageId) && lang.confidence > 0.15) {
+                sendResult(lang.languageId, lang.confidence, idx)
+                return
+            }
+        }
+
+        for (let lang of result) {
+            if (LANGUAGES.includes(lang.languageId) && lang.confidence > 0.5) {
+                sendResult(lang.languageId, lang.confidence, idx)
+                return
+            }
+        }
+
+        sendResult("text", 0.0, idx)
+    }).catch(() => {
+        sendResult("text", 0.0, idx)
+    })
+}

frontend/src/App.vue

@@ -1,31 +1,58 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue';
+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 WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';
+
+const configStore = useConfigStore();
+const systemStore = useSystemStore();
+const keybindingStore = useKeybindingStore();
+const themeStore = useThemeStore();
+const updateStore = useUpdateStore();
+
+// 应用启动时加载配置和初始化系统信息
+onMounted(async () => {
+  // 并行初始化配置、系统信息和快捷键配置
+  await Promise.all([
+    configStore.initConfig(),
+    systemStore.initializeSystemInfo(),
+    keybindingStore.loadKeyBindings(),
+  ]);
+  
+  // 初始化语言和主题
+  await configStore.initializeLanguage();
+  themeStore.initializeTheme();
+  
+  // 启动时检查更新
+  await updateStore.checkOnStartup();
+});
 </script>
 
 <template>
-  <div class="container">
-    <div>
-      <a wml-openURL="https://wails.io">
-        <img src="/appicon.png" class="logo" alt="Wails logo"/>
-      </a>
-      <a wml-openURL="https://vuejs.org/">
-        <img src="/appicon.png" class="logo vue" alt="Vue logo"/>
-      </a>
+  <div class="app-container">
+    <WindowTitleBar />
+    <div class="app-content">
+      <router-view/>
     </div>
-    <HelloWorld msg="Wails + Vue" />
   </div>
 </template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
+<style scoped lang="scss">
+.app-container {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #e80000aa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+
+.app-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
 }
 </style>

frontend/src/assets/styles/fonts.css

@@ -0,0 +1,146 @@
+/* HarmonyOS Sans 字体定义 */
+
+/* HarmonyOS Sans Regular */
+@font-face {
+  font-family: 'HarmonyOS Sans';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_Sans/HarmonyOS_Sans_Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans Light */
+@font-face {
+  font-family: 'HarmonyOS Sans';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_Sans/HarmonyOS_Sans_Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans Medium */
+@font-face {
+  font-family: 'HarmonyOS Sans';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_Sans/HarmonyOS_Sans_Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans Semibold */
+@font-face {
+  font-family: 'HarmonyOS Sans';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_Sans/HarmonyOS_Sans_Semibold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans Bold */
+@font-face {
+  font-family: 'HarmonyOS Sans';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_Sans/HarmonyOS_Sans_Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans Black */
+@font-face {
+  font-family: 'HarmonyOS Sans';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_Sans/HarmonyOS_Sans_Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans Thin */
+@font-face {
+  font-family: 'HarmonyOS Sans';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_Sans/HarmonyOS_Sans_Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans SC 简体中文字体 */
+
+/* HarmonyOS Sans SC Regular */
+@font-face {
+  font-family: 'HarmonyOS Sans SC';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_SansSC/HarmonyOS_SansSC_Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans SC Light */
+@font-face {
+  font-family: 'HarmonyOS Sans SC';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_SansSC/HarmonyOS_SansSC_Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans SC Medium */
+@font-face {
+  font-family: 'HarmonyOS Sans SC';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_SansSC/HarmonyOS_SansSC_Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans SC Semibold */
+@font-face {
+  font-family: 'HarmonyOS Sans SC';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_SansSC/HarmonyOS_SansSC_Semibold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans SC Bold */
+@font-face {
+  font-family: 'HarmonyOS Sans SC';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_SansSC/HarmonyOS_SansSC_Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans SC Black */
+@font-face {
+  font-family: 'HarmonyOS Sans SC';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_SansSC/HarmonyOS_SansSC_Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* HarmonyOS Sans SC Thin */
+@font-face {
+  font-family: 'HarmonyOS Sans SC';
+  src: url('../fonts/HarmonyOS Sans/HarmonyOS_SansSC/HarmonyOS_SansSC_Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* 字体加载优化 */
+.font-loading {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.font-loaded {
+  font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* CodeMirror 专用字体类 */
+.cm-harmonyos-font {
+  font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
+  font-feature-settings: 'liga' 1, 'calt' 1;
+  font-variant-ligatures: contextual;
+  text-rendering: optimizeLegibility;
+} 

frontend/src/assets/styles/index.css

@@ -0,0 +1,5 @@
+/* 导入所有CSS文件 */
+@import 'normalize.css';
+@import 'variables.css';
+@import "fonts.css";
+@import 'scrollbar.css';

frontend/src/assets/styles/normalize.css

@@ -346,3 +346,18 @@ template {
 [hidden] {
     display: none;
 }
+
+/* 添加全局样式，确保编辑器可以全屏显示 */
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* 确保所有容器都能继承高度 */
+#app {
+  width: 100%;
+  height: 100%;
+}

frontend/src/assets/styles/scrollbar.css

@@ -0,0 +1,108 @@
+/* 滚动条样式 - 支持主题切换 */
+
+/* Webkit 浏览器滚动条样式 */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 6px;
+  border: 2px solid var(--scrollbar-track);
+  transition: background-color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: var(--scrollbar-thumb-hover);
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--scrollbar-track);
+}
+
+/* 细滚动条变体（用于特定区域） */
+.thin-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.thin-scrollbar::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 4px;
+}
+
+.thin-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 4px;
+  border: 1px solid var(--scrollbar-track);
+}
+
+.thin-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* Firefox 滚动条样式 */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* 细滚动条的Firefox样式 */
+.thin-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* 隐藏滚动条但保持功能的工具类 */
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* 自定义悬浮显示滚动条 */
+.hover-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.hover-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.hover-scrollbar:hover {
+  scrollbar-width: auto;
+}
+
+.hover-scrollbar:hover::-webkit-scrollbar {
+  display: block;
+  width: 8px;
+  height: 8px;
+}
+
+.hover-scrollbar:hover::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 4px;
+}
+
+.hover-scrollbar:hover::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 4px;
+}
+
+.hover-scrollbar:hover::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+} 

frontend/src/assets/styles/style.css

@@ -1,26 +0,0 @@
-html {
-    background-color: rgba(27, 38, 54, 1);
-    text-align: center;
-    color: white;
-}
-
-body {
-    margin: 0;
-    color: white;
-    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-}
-
-@font-face {
-    font-family: "Nunito";
-    font-style: normal;
-    font-weight: 400;
-    src: local(""),
-    url("../fonts/nunito-v16-latin-regular.woff2") format("woff2");
-}
-
-#app {
-    height: 100vh;
-    text-align: center;
-}

frontend/src/assets/styles/variables.css

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

frontend/src/components/HelloWorld.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import {GreetService} from "../../bindings/voidraft";
-import {Events} from "@wailsio/runtime";
-
-defineProps<{ msg: string }>();
-
-const name = ref('');
-const result = ref('Please enter your name below 👇');
-const time = ref('Listening for Time event...');
-
-const doGreet = () => {
-  let localName = name.value;
-  if (!localName) {
-    localName = 'anonymous';
-  }
-  GreetService.Greet(localName).then((resultValue: string) => {
-    result.value = resultValue;
-  }).catch((err: Error) => {
-    console.log(err);
-  });
-};
-
-onMounted(() => {
-  Events.On('time', (timeValue: { data: string }) => {
-    time.value = timeValue.data;
-  });
-});
-
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="result">{{ result }}</div>
-  <div class="card">
-    <div class="input-box">
-      <input class="input" v-model="name" type="text" autocomplete="off"/>
-      <button class="btn" @click="doGreet">Greet</button>
-    </div>
-  </div>
-
-  <div class="footer">
-    <div><p>Click on the Wails logo to learn more</p></div>
-    <div><p>{{ time }}</p></div>
-  </div>
-</template>

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> 

frontend/src/components/monitor/MemoryMonitor.vue

@@ -0,0 +1,410 @@
+<script setup lang="ts">
+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个数据点)
+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>,
+  fallback?: T
+): Promise<T | undefined> => {
+  try {
+    return await operation();
+  } catch (error) {
+    // 静默处理错误，不输出到控制台
+    return fallback;
+  }
+};
+
+// 获取内存统计信息
+const fetchMemoryStats = async () => {
+  const stats = await withSilentErrorHandling(() => SystemService.GetMemoryStats());
+  
+  if (!stats) {
+    isLoading.value = false;
+    return;
+  }
+  
+    memoryStats.value = stats;
+    
+    // 格式化内存显示 - 主要显示堆内存使用量
+    const heapMB = (stats.heapInUse / 1024 / 1024);
+    if (heapMB < 1) {
+      formattedMemory.value = `${(heapMB * 1024).toFixed(0)}K`;
+    } else if (heapMB < 100) {
+      formattedMemory.value = `${heapMB.toFixed(1)}M`;
+    } else {
+      formattedMemory.value = `${heapMB.toFixed(0)}M`;
+    }
+    
+    // 自动调整最大内存值，确保图表能够显示更大范围
+    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);
+    
+    // 保持最大数据点数量
+    if (historyData.value.length > maxDataPoints) {
+      historyData.value.shift();
+    }
+    
+    // 更新图表
+    drawChart();
+    
+    isLoading.value = false;
+};
+
+// 绘制实时曲线图 - 简化版
+const drawChart = () => {
+  if (!canvasRef.value || historyData.value.length === 0) return;
+  
+  const canvas = canvasRef.value;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  
+  // 设置canvas尺寸
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width * window.devicePixelRatio;
+  canvas.height = rect.height * window.devicePixelRatio;
+  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+  
+  const width = rect.width;
+  const height = rect.height;
+  
+  // 清除画布
+  ctx.clearRect(0, 0, width, height);
+  
+  // 根据主题选择合适的颜色 - 更柔和的颜色
+  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);
+    ctx.lineTo(width, y);
+    ctx.stroke();
+  }
+  
+  // 垂直网格线
+  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);
+    ctx.lineTo(x, height);
+    ctx.stroke();
+  }
+  
+  if (historyData.value.length < 2) return;
+  
+  // 计算数据点位置
+  const dataLength = historyData.value.length;
+  const stepX = width / (maxDataPoints - 1);
+  const startX = width - (dataLength - 1) * stepX;
+  
+  // 绘制填充区域 - 更柔和的填充
+  ctx.beginPath();
+  ctx.moveTo(startX, height);
+  
+  // 移动到第一个数据点
+  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 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);
+    }
+  }
+  
+  // 完成填充路径
+  const lastX = startX + (dataLength - 1) * stepX;
+  ctx.lineTo(lastX, height);
+  ctx.closePath();
+  ctx.fillStyle = fillColor;
+  ctx.fill();
+  
+  // 绘制主曲线 - 平滑连续的曲线
+  ctx.beginPath();
+  ctx.moveTo(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 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);
+    }
+  }
+  
+  ctx.strokeStyle = lineColor;
+  ctx.lineWidth = 1.5;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.stroke();
+  
+  // 绘制当前值的高亮点
+  const lastY = height - (historyData.value[dataLength - 1] / 100) * height;
+  
+  // 外圈
+  ctx.fillStyle = pointColor;
+  ctx.globalAlpha = 0.4;
+  ctx.beginPath();
+  ctx.arc(lastX, lastY, 3, 0, Math.PI * 2);
+  ctx.fill();
+  
+  // 内圈
+  ctx.globalAlpha = 1;
+  ctx.beginPath();
+  ctx.arc(lastX, lastY, 1.5, 0, Math.PI * 2);
+  ctx.fill();
+};
+
+// 手动触发GC
+const triggerGC = async () => {
+  const success = await withSilentErrorHandling(() => SystemService.TriggerGC());
+  
+  if (success) {
+    // 延迟一下再获取新的统计信息
+    setTimeout(fetchMemoryStats, 100);
+  }
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+  if (historyData.value.length > 0) {
+    nextTick(() => drawChart());
+  }
+};
+
+// 仅监听系统主题变化
+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();
+  // 每1秒更新一次内存信息
+  intervalId = setInterval(fetchMemoryStats, 3000);
+  
+  // 监听窗口大小变化
+  window.addEventListener('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="`${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>{{ t('monitor.memory') }}</span>
+      </div>
+      <div class="memory-value" v-if="!isLoading">{{ formattedMemory }}</div>
+      <div class="memory-loading" v-else>--</div>
+    </div>
+    <div class="chart-area">
+      <canvas 
+        ref="canvasRef" 
+        class="memory-chart"
+        :class="{ 'loading': isLoading }"
+      ></canvas>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.memory-monitor {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+  
+  &:hover {
+    .monitor-info {
+      .memory-label {
+        color: var(--selection-text);
+      }
+      
+      .memory-value {
+        color: var(--toolbar-text);
+      }
+    }
+    
+    .chart-area .memory-chart {
+      opacity: 1;
+    }
+  }
+  
+  .monitor-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    .memory-label {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--text-secondary);
+      font-size: 10px;
+      font-weight: 500;
+      transition: color 0.2s ease;
+      
+      svg {
+        width: 10px;
+        height: 10px;
+        opacity: 0.8;
+      }
+      
+      span {
+        user-select: none;
+      }
+    }
+    
+    .memory-value, .memory-loading {
+      color: var(--toolbar-text-secondary);
+      font-family: 'JetBrains Mono', 'Courier New', monospace;
+      font-size: 9px;
+      font-weight: 600;
+      transition: color 0.2s ease;
+    }
+    
+    .memory-loading {
+      opacity: 0.5;
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+  }
+  
+  .chart-area {
+    height: 48px;
+    position: relative;
+    overflow: hidden;
+    border-radius: 3px;
+    
+    .memory-chart {
+      width: 100%;
+      height: 100%;
+      display: block;
+      opacity: 0.9;
+      transition: opacity 0.2s ease;
+      
+      &.loading {
+        opacity: 0.3;
+      }
+    }
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+</style> 

frontend/src/components/titlebar/LinuxTitleBar.vue

@@ -0,0 +1,297 @@
+<template>
+  <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">{{ titleText }}</div>
+    </div>
+    
+    <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
+      <button 
+        class="titlebar-button minimize-button" 
+        @click="minimizeWindow"
+        :title="t('titlebar.minimize')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </button>
+      
+      <button 
+        class="titlebar-button maximize-button" 
+        @click="toggleMaximize"
+        :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" v-if="!isMaximized">
+          <rect x="4" y="4" width="8" height="8" fill="none" stroke="currentColor" stroke-width="2"/>
+        </svg>
+        <svg width="16" height="16" viewBox="0 0 16 16" v-else>
+          <rect x="3" y="5" width="6" height="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
+          <rect x="7" y="3" width="6" height="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
+        </svg>
+      </button>
+      
+      <button 
+        class="titlebar-button close-button" 
+        @click="closeWindow"
+        :title="t('titlebar.close')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path d="M4 4l8 8m0-8L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 {
+    await runtime.Window.Minimise();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const toggleMaximize = async () => {
+  try {
+    const newState = !isMaximized.value;
+    isMaximized.value = newState;
+    
+    if (newState) {
+      await runtime.Window.Maximise();
+    } else {
+      await runtime.Window.UnMaximise();
+    }
+    
+    setTimeout(async () => {
+      await checkMaximizedState();
+    }, 100);
+  } catch (error) {
+    isMaximized.value = !isMaximized.value;
+  }
+};
+
+const closeWindow = async () => {
+  try {
+    await runtime.Window.Close();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const checkMaximizedState = async () => {
+  try {
+    isMaximized.value = await runtime.Window.IsMaximised();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+// 计算标题文本
+const titleText = computed(() => {
+  const currentDoc = documentStore.currentDocument;
+  return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
+});
+
+onMounted(async () => {
+  await checkMaximizedState();
+  
+  runtime.Events.On('window:maximised', () => {
+    isMaximized.value = true;
+  });
+  
+  runtime.Events.On('window:unmaximised', () => {
+    isMaximized.value = false;
+  });
+
+  runtime.Events.On('window:focus', async () => {
+    await checkMaximizedState();
+  });
+
+});
+onUnmounted(() => {
+  runtime.Events.Off('window:maximised');
+  runtime.Events.Off('window:unmaximised');
+  runtime.Events.Off('window:focus');
+});
+</script>
+
+<style scoped lang="scss">
+.linux-titlebar {
+  display: flex;
+  height: 34px;
+  background: var(--toolbar-bg, linear-gradient(to bottom, #f6f6f6, #e8e8e8));
+  border-bottom: 1px solid var(--toolbar-border, #d0d0d0);
+  user-select: none;
+  -webkit-user-select: none;
+  width: 100%;
+  font-family: 'Ubuntu', 'Cantarell', 'DejaVu Sans', system-ui, sans-serif;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding-left: 12px;
+  gap: 8px;
+  color: var(--toolbar-text, #333);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: default;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-content .titlebar-icon {
+  width: 16px;
+  height: 16px;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.titlebar-title {
+  font-size: 13px;
+  color: var(--toolbar-text, #333);
+  font-weight: 500;
+}
+
+.titlebar-controls {
+  display: flex;
+  height: 100%;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-button {
+  width: 36px;
+  height: 34px;
+  border: none;
+  background: transparent;
+  color: var(--toolbar-text, #555);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    opacity: 0.8;
+    transition: opacity 0.15s ease;
+  }
+  
+  &:hover {
+    background: var(--toolbar-button-hover, rgba(0, 0, 0, 0.1));
+    
+    svg {
+      opacity: 1;
+    }
+  }
+  
+  &:active {
+    background: var(--toolbar-button-active, rgba(0, 0, 0, 0.15));
+  }
+}
+
+.close-button {
+  &:hover {
+    background: #e74c3c;
+    color: #ffffff;
+    
+    svg {
+      opacity: 1;
+    }
+  }
+  
+  &:active {
+    background: #c0392b;
+  }
+}
+
+// Dark theme support
+@media (prefers-color-scheme: dark) {
+  .linux-titlebar {
+    background: var(--toolbar-bg, linear-gradient(to bottom, #3c3c3c, #2e2e2e));
+    border-bottom-color: var(--toolbar-border, #1e1e1e);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  
+  .titlebar-content,
+  .titlebar-title {
+    color: var(--toolbar-text, #f0f0f0);
+  }
+  
+  .titlebar-button {
+    color: var(--toolbar-text, #ccc);
+    
+    &:hover {
+      background: var(--toolbar-button-hover, rgba(255, 255, 255, 0.1));
+    }
+    
+    &:active {
+      background: var(--toolbar-button-active, rgba(255, 255, 255, 0.15));
+    }
+  }
+}
+
+// GNOME-like styling variant
+.linux-titlebar.gnome-style {
+  height: 38px;
+  border-radius: 12px 12px 0 0;
+  
+  .titlebar-button {
+    height: 38px;
+    width: 32px;
+    border-radius: 6px;
+    margin: 3px 2px;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+// KDE-like styling variant
+.linux-titlebar.kde-style {
+  background: var(--toolbar-bg, #eff0f1);
+  border-bottom: 1px solid var(--toolbar-border, #bdc3c7);
+  
+  .titlebar-button {
+    border-radius: 4px;
+    margin: 2px 1px;
+    
+    &:hover {
+      background: rgba(61, 174, 233, 0.2);
+    }
+  }
+}
+</style>

frontend/src/components/titlebar/MacOSTitleBar.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="macos-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
+    <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
+      <button 
+        class="titlebar-button close-button" 
+        @click="closeWindow"
+        :title="t('titlebar.close')"
+      >
+        <div class="button-icon">
+          <svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons">
+            <path d="M1 1l4 4m0-4L1 5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </button>
+      
+      <button 
+        class="titlebar-button minimize-button" 
+        @click="minimizeWindow"
+        :title="t('titlebar.minimize')"
+      >
+        <div class="button-icon">
+          <svg width="8" height="1" viewBox="0 0 8 1" v-show="showControlIcons">
+            <path d="M0 0h8" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </button>
+      
+      <button 
+        class="titlebar-button maximize-button" 
+        @click="toggleMaximize"
+        :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
+      >
+        <div class="button-icon">
+          <svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons && !isMaximized">
+            <path d="M1 1l4 0 0 4-4 0z" fill="none" stroke="currentColor" stroke-width="1"/>
+            <path d="M2 2l2 0 0 2" fill="none" stroke="currentColor" stroke-width="1"/>
+          </svg>
+          <svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons && isMaximized">
+            <path d="M1 2l4 0 0 3-4 0z" fill="none" stroke="currentColor" stroke-width="1"/>
+            <path d="M2 1l3 0 0 3" fill="none" stroke="currentColor" stroke-width="1"/>
+          </svg>
+        </div>
+      </button>
+    </div>
+    
+    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
+      <div class="titlebar-title">{{ titleText }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 {
+    await runtime.Window.Minimise();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const toggleMaximize = async () => {
+  try {
+    const newState = !isMaximized.value;
+    isMaximized.value = newState;
+    
+    if (newState) {
+      await runtime.Window.Maximise();
+    } else {
+      await runtime.Window.UnMaximise();
+    }
+    
+    setTimeout(async () => {
+      await checkMaximizedState();
+    }, 100);
+  } catch (error) {
+    isMaximized.value = !isMaximized.value;
+  }
+};
+
+const closeWindow = async () => {
+  try {
+    await runtime.Window.Close();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const checkMaximizedState = async () => {
+  try {
+    isMaximized.value = await runtime.Window.IsMaximised();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+// 计算标题文本
+const titleText = computed(() => {
+  const currentDoc = documentStore.currentDocument;
+  return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
+});
+
+onMounted(async () => {
+  await checkMaximizedState();
+  
+  runtime.Events.On('window:maximised', () => {
+    isMaximized.value = true;
+  });
+  
+  runtime.Events.On('window:unmaximised', () => {
+    isMaximized.value = false;
+  });
+
+  runtime.Events.On('window:focus', async () => {
+    await checkMaximizedState();
+  });
+
+});
+onUnmounted(() => {
+  runtime.Events.Off('window:maximised');
+  runtime.Events.Off('window:unmaximised');
+  runtime.Events.Off('window:focus');
+});
+</script>
+
+<style scoped lang="scss">
+.macos-titlebar {
+  display: flex;
+  height: 28px;
+  background: var(--toolbar-bg, #ececec);
+  border-bottom: 1px solid var(--toolbar-border, rgba(0, 0, 0, 0.1));
+  user-select: none;
+  -webkit-user-select: none;
+  width: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+  
+  &:hover {
+    .titlebar-button {
+      .button-icon {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.titlebar-controls {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-left: 8px;
+  gap: 8px;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-button {
+  width: 12px;
+  height: 12px;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  
+  .button-icon {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: rgba(0, 0, 0, 0.7);
+  }
+  
+  &:hover .button-icon {
+    opacity: 1;
+  }
+}
+
+.close-button {
+  background: #ff5f57;
+  
+  &:hover {
+    background: #ff453a;
+  }
+  
+  &:active {
+    background: #d7463f;
+  }
+}
+
+.minimize-button {
+  background: #ffbd2e;
+  
+  &:hover {
+    background: #ffb524;
+  }
+  
+  &:active {
+    background: #e6a220;
+  }
+}
+
+.maximize-button {
+  background: #28ca42;
+  
+  &:hover {
+    background: #1ebe36;
+  }
+  
+  &:active {
+    background: #1ba932;
+  }
+}
+
+.titlebar-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  cursor: default;
+  
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--toolbar-text, #333);
+  text-align: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  .macos-titlebar {
+    background: var(--toolbar-bg, #2d2d2d);
+    border-bottom-color: var(--toolbar-border, rgba(255, 255, 255, 0.1));
+  }
+  
+  .titlebar-title {
+    color: var(--toolbar-text, #fff);
+  }
+  
+  .titlebar-button .button-icon {
+    color: rgba(255, 255, 255, 0.8);
+  }
+}
+</style>

frontend/src/components/titlebar/WindowTitleBar.vue

@@ -0,0 +1,17 @@
+<template>
+  <WindowsTitleBar v-if="systemStore.isWindows" />
+  <MacOSTitleBar v-else-if="systemStore.isMacOS" />
+  <LinuxTitleBar v-else />
+</template>
+
+<script setup lang="ts">
+import { useSystemStore } from '@/stores/systemStore';
+import WindowsTitleBar from './WindowsTitleBar.vue';
+import MacOSTitleBar from './MacOSTitleBar.vue';
+import LinuxTitleBar from './LinuxTitleBar.vue';
+
+const systemStore = useSystemStore();
+</script>
+
+<style scoped lang="scss">
+</style> 

frontend/src/components/titlebar/WindowsTitleBar.vue

@@ -0,0 +1,250 @@
+<template>
+  <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">{{ titleText }}</div>
+    </div>
+
+    <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
+      <button
+          class="titlebar-button minimize-button"
+          @click="minimizeWindow"
+          :title="t('titlebar.minimize')"
+      >
+        <span class="titlebar-icon">&#xE921;</span>
+      </button>
+
+      <button
+          class="titlebar-button maximize-button"
+          @click="toggleMaximize"
+          :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
+      >
+        <span class="titlebar-icon" v-html="maximizeIcon"></span>
+      </button>
+
+      <button
+          class="titlebar-button close-button"
+          @click="closeWindow"
+          :title="t('titlebar.close')"
+      >
+        <span class="titlebar-icon">&#xE8BB;</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const toggleMaximize = async () => {
+  try {
+    // 立即更新UI状态，提供即时反馈
+    const newState = !isMaximized.value;
+    isMaximized.value = newState;
+
+    // 然后执行实际操作
+    if (newState) {
+      await runtime.Window.Maximise();
+    } else {
+      await runtime.Window.UnMaximise();
+    }
+
+    // 操作完成后再次确认状态（防止操作失败时状态不一致）
+    setTimeout(async () => {
+      await checkMaximizedState();
+    }, 100);
+  } catch (error) {
+    // 如果操作失败，恢复原状态
+    isMaximized.value = !isMaximized.value;
+  }
+};
+
+const closeWindow = async () => {
+  try {
+    await runtime.Window.Close();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+const checkMaximizedState = async () => {
+  try {
+    isMaximized.value = await runtime.Window.IsMaximised();
+  } catch (error) {
+    // Error handling
+  }
+};
+
+onMounted(async () => {
+  await checkMaximizedState();
+
+  runtime.Events.On('window:maximised', () => {
+    isMaximized.value = true;
+  });
+
+  runtime.Events.On('window:unmaximised', () => {
+    isMaximized.value = false;
+  });
+
+  runtime.Events.On('window:focus', async () => {
+    await checkMaximizedState();
+  });
+
+});
+
+onUnmounted(() => {
+  runtime.Events.Off('window:maximised');
+  runtime.Events.Off('window:unmaximised');
+  runtime.Events.Off('window:focus');
+});
+</script>
+
+<style scoped lang="scss">
+.windows-titlebar {
+  display: flex;
+  height: 32px;
+  background: var(--toolbar-bg);
+  border-bottom: 1px solid var(--toolbar-border);
+  user-select: none;
+  -webkit-user-select: none;
+  width: 100%;
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding-left: 8px;
+  gap: 8px;
+  color: var(--toolbar-text);
+  font-size: 12px;
+  font-weight: 400;
+  cursor: default;
+
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-content .titlebar-icon {
+  width: 16px;
+  height: 16px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.titlebar-title {
+  font-size: 12px;
+  color: var(--toolbar-text);
+}
+
+.titlebar-controls {
+  display: flex;
+  height: 100%;
+
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-button {
+  width: 46px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: var(--toolbar-text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.1s ease;
+  padding: 0;
+  margin: 0;
+
+  &:hover {
+    background: var(--toolbar-button-hover);
+  }
+
+  &:active {
+    background: var(--toolbar-button-hover);
+    opacity: 0.8;
+  }
+}
+
+.titlebar-button .titlebar-icon {
+  font-family: 'Segoe MDL2 Assets', 'Segoe UI Symbol', 'Segoe UI', system-ui;
+  font-size: 9px;
+  line-height: 1;
+  display: inline-block;
+  opacity: 0.9;
+  transition: opacity 0.1s ease;
+
+  .titlebar-button:hover & {
+    opacity: 1;
+  }
+}
+
+.minimize-button:hover,
+.maximize-button:hover {
+  background: var(--toolbar-button-hover);
+}
+
+.minimize-button:active,
+.maximize-button:active {
+  background: var(--toolbar-button-hover);
+  opacity: 0.8;
+}
+
+.close-button:hover {
+  background: #c42b1c;
+  color: #ffffff;
+
+  .titlebar-icon {
+    opacity: 1;
+  }
+}
+
+.close-button:active {
+  background: #a93226;
+
+  .titlebar-icon {
+    opacity: 1;
+  }
+}
+</style>

frontend/src/components/toolbar/BlockLanguageSelector.vue

@@ -0,0 +1,555 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useEditorStore } from '@/stores/editorStore';
+import { SUPPORTED_LANGUAGES, type SupportedLanguage } from '@/views/editor/extensions/codeblock/types';
+import { getActiveNoteBlock } from '@/views/editor/extensions/codeblock/state';
+import { changeCurrentBlockLanguage } from '@/views/editor/extensions/codeblock/commands';
+
+const { t } = useI18n();
+const editorStore = useEditorStore();
+
+// 组件状态
+const showLanguageMenu = ref(false);
+const searchQuery = ref('');
+const searchInputRef = ref<HTMLInputElement>();
+
+// 语言别名映射
+const LANGUAGE_ALIASES: Record<SupportedLanguage, string> = {
+  auto: 'auto',
+  text: 'txt',
+  json: 'JSON',
+  py: 'python',
+  html: 'HTML',
+  sql: 'SQL',
+  md: 'markdown',
+  java: 'Java',
+  php: 'PHP',
+  css: 'CSS',
+  xml: 'XML',
+  cpp: 'c++',
+  rs: 'rust',
+  cs: 'c#',
+  rb: 'ruby',
+  sh: 'shell',
+  yaml: 'yml',
+  toml: 'TOML',
+  go: 'Go',
+  clj: 'clojure',
+  ex: 'elixir',
+  erl: 'erlang',
+  js: 'javascript',
+  ts: 'typescript',
+  swift: 'Swift',
+  kt: 'kotlin',
+  groovy: 'Groovy',
+  ps1: 'powershell',
+  dart: 'Dart',
+  scala: 'Scala'
+};
+
+// 语言显示名称映射
+const LANGUAGE_NAMES: Record<SupportedLanguage, string> = {
+  auto: 'Auto',
+  text: 'Plain Text',
+  json: 'JSON',
+  py: 'Python',
+  html: 'HTML',
+  sql: 'SQL',
+  md: 'Markdown',
+  java: 'Java',
+  php: 'PHP',
+  css: 'CSS',
+  xml: 'XML',
+  cpp: 'C++',
+  rs: 'Rust',
+  cs: 'C#',
+  rb: 'Ruby',
+  sh: 'Shell',
+  yaml: 'YAML',
+  toml: 'TOML',
+  go: 'Go',
+  clj: 'Clojure',
+  ex: 'Elixir',
+  erl: 'Erlang',
+  js: 'JavaScript',
+  ts: 'TypeScript',
+  swift: 'Swift',
+  kt: 'Kotlin',
+  groovy: 'Groovy',
+  ps1: 'PowerShell',
+  dart: 'Dart',
+  scala: 'Scala'
+};
+
+// 当前活动块的语言信息
+const currentBlockLanguage = ref<{ name: SupportedLanguage; auto: boolean }>({
+  name: 'text',
+  auto: false
+});
+
+// 事件监听器引用
+const eventListeners = ref<{
+  updateListener?: () => void;
+  selectionUpdateListener?: () => void;
+}>({});
+
+// 更新当前块语言信息
+const updateCurrentBlockLanguage = () => {
+  if (!editorStore.editorView) {
+    currentBlockLanguage.value = { name: 'text', auto: false };
+    return;
+  }
+
+  try {
+    const state = editorStore.editorView.state;
+    const activeBlock = getActiveNoteBlock(state as any);
+    if (activeBlock) {
+      const newLanguage = {
+        name: activeBlock.language.name as SupportedLanguage,
+        auto: activeBlock.language.auto
+      };
+      
+      // 只有当语言信息实际发生变化时才更新
+      if (currentBlockLanguage.value.name !== newLanguage.name || 
+          currentBlockLanguage.value.auto !== newLanguage.auto) {
+        currentBlockLanguage.value = newLanguage;
+      }
+    } else {
+      if (currentBlockLanguage.value.name !== 'text' || currentBlockLanguage.value.auto !== false) {
+        currentBlockLanguage.value = { name: 'text', auto: false };
+      }
+    }
+  } catch (error) {
+    console.warn('Failed to get active block language:', error);
+    currentBlockLanguage.value = { name: 'text', auto: false };
+  }
+};
+
+// 清理事件监听器
+const cleanupEventListeners = () => {
+  if (editorStore.editorView?.dom && eventListeners.value.updateListener) {
+    const dom = editorStore.editorView.dom;
+    dom.removeEventListener('click', eventListeners.value.updateListener);
+    dom.removeEventListener('keyup', eventListeners.value.updateListener);
+    dom.removeEventListener('keydown', eventListeners.value.updateListener);
+    dom.removeEventListener('focus', eventListeners.value.updateListener);
+    dom.removeEventListener('mouseup', eventListeners.value.updateListener);
+    
+    if (eventListeners.value.selectionUpdateListener) {
+      dom.removeEventListener('selectionchange', eventListeners.value.selectionUpdateListener);
+    }
+  }
+  eventListeners.value = {};
+};
+
+// 设置事件监听器
+const setupEventListeners = (view: any) => {
+  cleanupEventListeners();
+  
+  // 监听编辑器状态更新
+  const updateListener = () => {
+    // 使用 requestAnimationFrame 确保在下一帧更新，性能更好
+    requestAnimationFrame(() => {
+      updateCurrentBlockLanguage();
+    });
+  };
+  
+  // 监听选择变化
+  const selectionUpdateListener = () => {
+    requestAnimationFrame(() => {
+      updateCurrentBlockLanguage();
+    });
+  };
+  
+  // 保存监听器引用
+  eventListeners.value = { updateListener, selectionUpdateListener };
+  
+  // 监听关键事件：光标位置变化、文档变化、焦点变化
+  view.dom.addEventListener('click', updateListener);
+  view.dom.addEventListener('keyup', updateListener);
+  view.dom.addEventListener('keydown', updateListener);
+  view.dom.addEventListener('focus', updateListener);
+  view.dom.addEventListener('mouseup', updateListener); // 鼠标选择结束
+  
+  // 监听编辑器的选择变化事件
+  if (view.dom.addEventListener) {
+    view.dom.addEventListener('selectionchange', selectionUpdateListener);
+  }
+  
+  // 立即更新一次当前状态
+  updateCurrentBlockLanguage();
+};
+
+// 监听编辑器状态变化
+watch(
+  () => editorStore.editorView,
+  (newView) => {
+    if (newView) {
+      setupEventListeners(newView);
+    } else {
+      cleanupEventListeners();
+    }
+  },
+  { immediate: true }
+);
+
+// 过滤后的语言列表
+const filteredLanguages = computed(() => {
+  if (!searchQuery.value) {
+    return SUPPORTED_LANGUAGES;
+  }
+  
+  const query = searchQuery.value.toLowerCase();
+  return SUPPORTED_LANGUAGES.filter(langId => {
+    const name = LANGUAGE_NAMES[langId];
+    const alias = LANGUAGE_ALIASES[langId];
+    return langId.toLowerCase().includes(query) ||
+           (name && name.toLowerCase().includes(query)) ||
+           (alias && alias.toLowerCase().includes(query));
+  });
+});
+
+// 切换语言选择器显示状态
+const toggleLanguageMenu = () => {
+  showLanguageMenu.value = !showLanguageMenu.value;
+  
+  // 如果菜单打开，滚动到当前语言
+  if (showLanguageMenu.value) {
+    scrollToCurrentLanguage();
+  }
+};
+
+// 关闭语言选择器
+const closeLanguageMenu = () => {
+  showLanguageMenu.value = false;
+  searchQuery.value = '';
+};
+
+// 选择语言
+const selectLanguage = (languageId: SupportedLanguage) => {
+  if (!editorStore.editorView) {
+    closeLanguageMenu();
+    return;
+  }
+
+  try {
+    const view = editorStore.editorView;
+    const state = view.state;
+    const dispatch = view.dispatch;
+
+    let targetLanguage: string;
+    let autoDetect: boolean;
+
+    if (languageId === 'auto') {
+      // 设置为自动检测
+      targetLanguage = 'text';
+      autoDetect = true;
+    } else {
+      // 设置为指定语言，关闭自动检测
+      targetLanguage = languageId;
+      autoDetect = false;
+    }
+
+    // 使用修复后的函数来更改语言
+    const success = changeCurrentBlockLanguage(state as any, dispatch, targetLanguage, autoDetect);
+    
+    if (success) {
+      // 立即更新当前语言状态
+      updateCurrentBlockLanguage();
+    }
+
+  } catch (error) {
+    console.warn('Failed to change block language:', error);
+  }
+
+  closeLanguageMenu();
+};
+
+// 点击外部关闭
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement;
+  if (!target.closest('.block-language-selector')) {
+    closeLanguageMenu();
+  }
+};
+
+// 键盘事件处理
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    closeLanguageMenu();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+  document.addEventListener('keydown', handleKeydown);
+  
+  // 立即更新一次当前语言状态
+  updateCurrentBlockLanguage();
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+  document.removeEventListener('keydown', handleKeydown);
+  cleanupEventListeners();
+});
+
+// 获取当前语言的显示名称
+const getCurrentLanguageName = computed(() => {
+  const lang = currentBlockLanguage.value;
+  if (lang.auto) {
+    return `${lang.name} (auto)`;
+  }
+  return lang.name;
+});
+
+// 获取当前显示的语言选项
+const getCurrentDisplayLanguage = computed(() => {
+  const lang = currentBlockLanguage.value;
+  if (lang.auto) {
+    return 'auto';
+  }
+  return lang.name;
+});
+
+// 滚动到当前选择的语言
+const scrollToCurrentLanguage = () => {
+  nextTick(() => {
+      const currentLang = getCurrentDisplayLanguage.value;
+      const selectorElement = document.querySelector('.block-language-selector');
+      
+      if (!selectorElement) return;
+      
+      const languageList = selectorElement.querySelector('.language-list') as HTMLElement;
+      const activeOption = selectorElement.querySelector(`.language-option[data-language="${currentLang}"]`) as HTMLElement;
+      
+      if (languageList && activeOption) {
+        // 使用 scrollIntoView 进行平滑滚动
+        activeOption.scrollIntoView({
+          behavior: 'auto',
+          block: 'nearest',
+          inline: 'nearest'
+        });
+      }
+  });
+};
+</script>
+
+<template>
+  <div class="block-language-selector">
+    <button 
+      class="language-btn" 
+      :title="t('toolbar.blockLanguage')"
+      @click="toggleLanguageMenu"
+    >
+      <span class="language-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="16 18 22 12 16 6"></polyline>
+          <polyline points="8 6 2 12 8 18"></polyline>
+        </svg>
+      </span>
+      <span class="language-name">{{ getCurrentLanguageName }}</span>
+      <span class="arrow" :class="{ 'open': showLanguageMenu }">▲</span>
+    </button>
+    
+    <div class="language-menu" v-if="showLanguageMenu">
+      <!-- 搜索框 -->
+      <div class="search-container">
+        <input 
+          ref="searchInputRef"
+          v-model="searchQuery"
+          type="text" 
+          class="search-input"
+          :placeholder="t('toolbar.searchLanguage')"
+          @keydown.stop
+        />
+        <svg class="search-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="language-list">
+        <div 
+          v-for="language in filteredLanguages" 
+          :key="language"
+          class="language-option"
+          :class="{ 'active': getCurrentDisplayLanguage === language }"
+          :data-language="language"
+          @click="selectLanguage(language)"
+        >
+          <span class="language-name">{{ LANGUAGE_NAMES[language] || language }}</span>
+          <span class="language-alias">{{ language }}</span>
+        </div>
+        
+        <!-- 无结果提示 -->
+        <div v-if="filteredLanguages.length === 0" class="no-results">
+          {{ t('toolbar.noLanguageFound') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.block-language-selector {
+  position: relative;
+  
+      .language-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;
+      }
+      
+      .language-icon {
+        display: flex;
+        align-items: center;
+      }
+      
+      .language-name {
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      
+      .arrow {
+        font-size: 8px;
+        margin-left: 2px;
+        transition: transform 0.2s ease;
+        
+        &.open {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  
+  .language-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: 220px;
+    max-height: 280px;
+    z-index: 1000;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    
+          .search-container {
+        position: relative;
+        padding: 8px;
+        border-bottom: 1px solid var(--border-color);
+        
+        .search-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;
+          line-height: 1.2;
+          
+          &:focus {
+            border-color: var(--text-muted);
+          }
+          
+          &::placeholder {
+            color: var(--text-muted);
+          }
+        }
+        
+        .search-icon {
+          position: absolute;
+          left: 14px;
+          top: 50%;
+          transform: translateY(-50%);
+          color: var(--text-muted);
+          pointer-events: none;
+        }
+      }
+    
+          .language-list {
+        max-height: 200px;
+        overflow-y: auto;
+        
+        .language-option {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 6px 8px;
+          cursor: pointer;
+          font-size: 11px;
+          
+          &:hover {
+            background-color: var(--border-color);
+            opacity: 0.8;
+          }
+          
+          &.active {
+            background-color: var(--selection-bg);
+            color: var(--selection-text);
+            
+            .language-alias {
+              color: var(--selection-text);
+              opacity: 0.7;
+            }
+          }
+          
+          .language-name {
+            font-weight: normal;
+          }
+          
+          .language-alias {
+            font-size: 10px;
+            color: var(--text-muted);
+            opacity: 0.6;
+          }
+        }
+        
+        .no-results {
+          padding: 12px 8px;
+          text-align: center;
+          color: var(--text-muted);
+          font-size: 11px;
+        }
+      }
+  }
+}
+
+/* 自定义滚动条 */
+.language-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.language-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.language-list::-webkit-scrollbar-thumb {
+  background-color: var(--border-color);
+  border-radius: 2px;
+  
+  &:hover {
+    background-color: var(--text-muted);
+  }
+}
+</style> 

frontend/src/components/toolbar/DocumentSelector.vue

@@ -0,0 +1,753 @@
+<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 {
+      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>

frontend/src/components/toolbar/Toolbar.vue

@@ -0,0 +1,497 @@
+<script setup lang="ts">
+import {useI18n} from 'vue-i18n';
+import {onMounted, onUnmounted, ref, watch, computed} from 'vue';
+import {useConfigStore} from '@/stores/configStore';
+import {useEditorStore} from '@/stores/editorStore';
+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 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 runtime.Window.SetAlwaysOnTop(isTop);
+};
+
+const toggleAlwaysOnTop = async () => {
+  isCurrentWindowOnTop.value = !isCurrentWindowOnTop.value;
+  await runtime.Window.SetAlwaysOnTop(isCurrentWindowOnTop.value);
+};
+
+// 跳转到设置页面
+const goToSettings = () => {
+  router.push('/settings');
+};
+
+// 执行格式化
+const formatCurrentBlock = () => {
+  if (!canFormatCurrentBlock.value || !editorStore.editorView) return;
+  formatBlockContent(editorStore.editorView);
+};
+
+// 格式化按钮状态更新
+const updateFormatButtonState = () => {
+  // 安全检查
+  const view = editorStore.editorView;
+  if (!view) {
+    canFormatCurrentBlock.value = false;
+    return;
+  }
+
+  try {
+    // 获取活动块和语言信息
+    const state = view.state;
+    const activeBlock = getActiveNoteBlock(state as any);
+    
+    // 检查块和语言格式化支持
+    canFormatCurrentBlock.value = !!(
+      activeBlock && 
+      getLanguage(activeBlock.language.name as any)?.prettier
+    );
+  } catch (error) {
+    console.warn('Error checking format capability:', error);
+    canFormatCurrentBlock.value = false;
+  }
+};
+
+// 创建带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) => {
+    // 清理旧监听器
+    cleanupListeners.forEach(cleanup => cleanup());
+    cleanupListeners = [];
+    
+    if (newView) {
+      // 初始更新状态
+      updateFormatButtonState();
+      // 设置新监听器
+      cleanupListeners = setupEditorListeners(newView);
+    } else {
+      canFormatCurrentBlock.value = false;
+    }
+  },
+  { immediate: true }
+);
+
+// 组件生命周期
+const isLoaded = ref(false);
+
+onMounted(() => {
+  isLoaded.value = true;
+  // 首次更新格式化状态
+  updateFormatButtonState();
+});
+
+onUnmounted(() => {
+  // 清理所有事件监听器
+  cleanupListeners.forEach(cleanup => cleanup());
+  cleanupListeners = [];
+});
+
+// 组件加载后初始化置顶状态
+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>
+  <div class="toolbar-container">
+    <div class="statistics">
+      <span class="stat-item" :title="t('toolbar.editor.lines')">{{ t('toolbar.editor.lines') }}: <span
+          class="stat-value">{{
+          editorStore.documentStats.lines
+        }}</span></span>
+      <span class="stat-item" :title="t('toolbar.editor.characters')">{{ t('toolbar.editor.characters') }}: <span
+          class="stat-value">{{
+          editorStore.documentStats.characters
+        }}</span></span>
+      <span class="stat-item" :title="t('toolbar.editor.selected')"
+            v-if="editorStore.documentStats.selectedCharacters > 0">
+        {{ t('toolbar.editor.selected') }}: <span class="stat-value">{{
+          editorStore.documentStats.selectedCharacters
+        }}</span>
+      </span>
+    </div>
+    <div class="actions">
+      <span class="font-size" :title="t('toolbar.fontSizeTooltip')" @click="() => configStore.resetFontSize()">
+        {{ 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">
+          <path
+              d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
+          <path d="M5 3v4"/>
+          <path d="M19 17v4"/>
+          <path d="M3 5h4"/>
+          <path d="M17 19h4"/>
+        </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': isCurrentWindowOnTop }"
+          :title="t('toolbar.alwaysOnTop')"
+          @click="toggleAlwaysOnTop"
+      >
+        <svg class="pin-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+          <path
+              d="M557.44 104.96l361.6 361.6-60.16 64-26.88-33.92-181.12 181.12L617.6 832l-60.16 60.16-181.12-184.32-211.2 211.2-60.16-60.16 211.2-211.2-181.12-181.12 60.16-60.16 151.04-30.08 181.12-181.12-30.72-30.08 64-60.16zM587.52 256L387.84 455.04l-120.32 23.68 277.76 277.76 23.68-120.32L768 436.48z"/>
+        </svg>
+      </div>
+
+
+      <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>
+          <path
+              d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.toolbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
+  padding: 0 12px;
+  height: 28px;
+  font-size: 12px;
+  border-top: 1px solid var(--border-color);
+  user-select: none;
+
+  .statistics {
+    display: flex;
+    gap: 12px;
+
+    .stat-item {
+      color: var(--text-muted);
+
+      .stat-value {
+        color: var(--text-secondary);
+        font-weight: 500;
+      }
+    }
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .font-size {
+      color: var(--text-muted);
+      font-size: 11px;
+      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 {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      padding: 2px;
+      border-radius: 3px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background-color: var(--border-color);
+        opacity: 0.8;
+      }
+
+      &.active {
+        background-color: rgba(181, 206, 168, 0.2);
+
+        .pin-icon {
+          fill: #b5cea8;
+        }
+      }
+
+      .pin-icon {
+        width: 14px;
+        height: 14px;
+        fill: var(--text-muted);
+        transition: fill 0.2s ease;
+      }
+    }
+
+
+    .format-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;
+
+      &:hover {
+        background-color: var(--border-color);
+        opacity: 0.8;
+      }
+
+      svg {
+        width: 14px;
+        height: 14px;
+        stroke: var(--text-muted);
+        transition: stroke 0.2s ease;
+      }
+
+      &:hover svg {
+        stroke: var(--text-secondary);
+      }
+    }
+
+    .settings-btn {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px;
+
+      &:hover {
+        color: var(--text-secondary);
+      }
+    }
+  }
+}
+</style>

frontend/src/i18n/index.ts

@@ -0,0 +1,18 @@
+import {createI18n} from 'vue-i18n';
+import messages from './locales';
+
+// 创建i18n实例
+const i18n = createI18n({
+    legacy: false,
+    compositionOnly: true,
+    globalInjection: true,
+    silentTranslationWarn: true,
+    locale: 'zh-CN',
+    fallbackLocale: 'zh-CN',
+    silentFallbackWarn: true,
+    missingWarn: true,
+    fallbackWarn: false,
+    messages
+});
+
+export default i18n; 

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

@@ -0,0 +1,294 @@
+export default {
+  locale: 'en-US',
+  titlebar: {
+    minimize: 'Minimize',
+    maximize: 'Maximize',
+    restore: 'Restore Down',
+    close: 'Close'
+  },
+  toolbar: {
+    editor: {
+      lines: 'Ln',
+      characters: 'Ch',
+      selected: 'Sel'
+    },
+    fontSizeTooltip: 'Font Size (Ctrl+wheel to adjust)',
+    settings: 'Settings',
+    alwaysOnTop: 'Always on Top',
+    blockLanguage: 'Block Language',
+    searchLanguage: 'Search language...',
+    noLanguageFound: 'No language found',
+    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': 'Chinese',
+    'en-US': 'English'
+  },
+  systemTheme: {
+    dark: 'Dark',
+    light: 'Light',
+    auto: 'Follow System'
+  },
+  keybindings: {
+    headers: {
+      shortcut: 'Shortcut',
+      category: 'Category',
+      description: 'Description'
+    },
+    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',
+    backToEditor: 'Back to Editor',
+    systemInfo: 'System Info',
+    general: 'General',
+    editing: 'Editor',
+    appearance: 'Appearance',
+    keyBindings: 'Key Bindings',
+    updates: 'Updates',
+    reset: 'Reset',
+    apply: 'Apply',
+    cancel: 'Cancel',
+    dangerZone: 'Danger Zone',
+    resetAllSettings: 'Reset All Settings',
+    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',
+    fontSize: 'Font Size',
+    fontSizeDescription: 'Editor font size',
+    fontSettings: 'Font Settings',
+    fontFamily: 'Font Family',
+    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',
+    tabSize: 'Tab Size',
+    tabType: 'Tab Type',
+    spaces: 'Spaces',
+    tabs: 'Tabs',
+    enableTabIndent: 'Enable Tab Indent',
+    language: 'Interface Language',
+    systemTheme: 'System Theme',
+    saveOptions: 'Save Options',
+    autoSaveDelay: 'Auto Save Delay (ms)',
+    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',
+  },
+  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'
+  }
+};

frontend/src/i18n/locales/index.ts

@@ -0,0 +1,7 @@
+import zhCN from './zh-CN';
+import enUS from './en-US';
+ 
+export default {
+  'zh-CN': zhCN,
+  'en-US': enUS
+}; 

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

@@ -0,0 +1,295 @@
+export default {
+  locale: 'zh-CN',
+  titlebar: {
+    minimize: '最小化',
+    maximize: '最大化',
+    restore: '向下还原',
+    close: '关闭'
+  },
+  toolbar: {
+    editor: {
+      lines: 'Ln',
+      characters: 'Ch',
+      selected: 'Sel'
+    },
+    fontSizeTooltip: '字体大小 (Ctrl+滚轮调整)',
+    settings: '设置',
+    alwaysOnTop: '窗口置顶',
+    blockLanguage: '块语言',
+    searchLanguage: '搜索语言...',
+    noLanguageFound: '未找到匹配的语言',
+    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': '简体中文',
+    'en-US': 'English'
+  },
+  systemTheme: {
+    dark: '深色',
+    light: '浅色',
+    auto: '跟随系统'
+  },
+  keybindings: {
+    headers: {
+      shortcut: '快捷键',
+      category: '分类',
+      description: '描述'
+    },
+    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: '设置',
+    backToEditor: '返回编辑器',
+    systemInfo: '系统信息',
+    general: '常规',
+    editing: '编辑器',
+    appearance: '外观',
+    extensions: '扩展',
+    keyBindings: '快捷键',
+    updates: '更新',
+    reset: '重置',
+    apply: '应用',
+    cancel: '取消',
+    dangerZone: '危险操作',
+    resetAllSettings: '重置所有设置',
+    confirmReset: '确认重置?',
+    globalHotkey: '全局键盘快捷键',
+    enableGlobalHotkey: '启用全局热键',
+    window: '窗口/应用程序',
+    showInSystemTray: '在系统托盘中显示',
+    enableSystemTray: '启用系统托盘',
+    alwaysOnTop: '窗口始终置顶',
+    startup: '启动设置',
+    startAtLogin: '开机自启动',
+    dataStorage: '数据存储',
+    dataPath: '数据存储路径',
+    clickToSelectPath: '点击选择路径',
+    resetDefault: '恢复默认',
+    resetToDefaultPath: '恢复为默认路径',
+    fontSize: '字体大小',
+    fontSizeDescription: '编辑器字体大小',
+    fontSettings: '字体设置',
+    fontFamily: '字体',
+    fontFamilyDescription: '选择编辑器字体',
+    fontWeight: '字体粗细',
+    fontWeightDescription: '设置字体的粗细程度',
+    lineHeight: '行高',
+    lineHeightDescription: '设置文本行之间的间距',
+    tabSettings: 'Tab 设置',
+    tabSize: 'Tab 大小',
+    tabType: 'Tab 类型',
+    spaces: '空格',
+    tabs: '制表符',
+    enableTabIndent: '启用 Tab 缩进',
+    language: '界面语言',
+    systemTheme: '系统主题',
+    saveOptions: '保存选项',
+    autoSaveDelay: '自动保存延迟(毫秒)',
+    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: '无',
+  },
+  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: '点击清理内存'
+  }
+};

frontend/src/main.ts

@@ -1,14 +1,15 @@
-import { createApp } from 'vue';
+import {createApp} from 'vue';
 import App from './App.vue';
-import '@/assets/styles/style.css';
-import '@/assets/styles/normalize.css';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
+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.mount('#app');
-app.use(PrimeVue, {
-    theme: {
-        preset: Aura
-    }
-});
+app.use(pinia)
+app.use(i18n);
+app.use(router);
+app.mount('#app');

frontend/src/router/index.ts

@@ -0,0 +1,62 @@
+import {createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw} from 'vue-router';
+import Editor from '@/views/editor/Editor.vue';
+import Settings from '@/views/settings/Settings.vue';
+import GeneralPage from '@/views/settings/pages/GeneralPage.vue';
+import EditingPage from '@/views/settings/pages/EditingPage.vue';
+import AppearancePage from '@/views/settings/pages/AppearancePage.vue';
+import KeyBindingsPage from '@/views/settings/pages/KeyBindingsPage.vue';
+import UpdatesPage from '@/views/settings/pages/UpdatesPage.vue';
+import ExtensionsPage from '@/views/settings/pages/ExtensionsPage.vue';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Editor',
+    component: Editor
+  },
+  {
+    path: '/settings',
+    name: 'Settings',
+    redirect: '/settings/general',
+    component: Settings,
+    children: [
+      {
+        path: 'general',
+        name: 'SettingsGeneral',
+        component: GeneralPage
+      },
+      {
+        path: 'editing',
+        name: 'SettingsEditing',
+        component: EditingPage
+      },
+      {
+        path: 'appearance',
+        name: 'SettingsAppearance',
+        component: AppearancePage
+      },
+      {
+        path: 'extensions',
+        name: 'SettingsExtensions',
+        component: ExtensionsPage
+      },
+      {
+        path: 'key-bindings',
+        name: 'SettingsKeyBindings',
+        component: KeyBindingsPage
+      },
+      {
+        path: 'updates',
+        name: 'SettingsUpdates',
+        component: UpdatesPage
+      }
+    ]
+  }
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: routes
+});
+
+export default router; 

frontend/src/stores/configStore.ts

@@ -0,0 +1,599 @@
+import {defineStore} from 'pinia';
+import {computed, reactive} from 'vue';
+import {ConfigService, StartupService} from '@/../bindings/voidraft/internal/services';
+import {
+    AppConfig,
+    AppearanceConfig,
+    EditingConfig,
+    GeneralConfig,
+    LanguageType,
+    SystemThemeType,
+    TabType,
+    UpdatesConfig,
+    UpdateSourceType,
+} from '@/../bindings/voidraft/internal/models/models';
+import {useI18n} from 'vue-i18n';
+import {ConfigUtils} from '@/utils/configUtils';
+import {WindowController} from '@/utils/windowController';
+import * as runtime from '@wailsio/runtime';
+// 国际化相关导入
+export type SupportedLocaleType = 'zh-CN' | 'en-US';
+
+// 支持的语言列表
+export const SUPPORTED_LOCALES = [
+    {
+        code: 'zh-CN' as SupportedLocaleType,
+        name: '简体中文'
+    },
+    {
+        code: 'en-US' as SupportedLocaleType,
+        name: 'English'
+    }
+] as const;
+
+// 配置键映射和限制的类型定义
+type GeneralConfigKeyMap = {
+    readonly [K in keyof GeneralConfig]: string;
+};
+
+type EditingConfigKeyMap = {
+    readonly [K in keyof EditingConfig]: string;
+};
+
+type AppearanceConfigKeyMap = {
+    readonly [K in keyof AppearanceConfig]: string;
+};
+
+type UpdatesConfigKeyMap = {
+    readonly [K in keyof UpdatesConfig]: string;
+};
+
+type NumberConfigKey = 'fontSize' | 'tabSize' | 'lineHeight';
+
+// 配置键映射
+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;
+
+const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {
+    fontSize: 'editing.fontSize',
+    fontFamily: 'editing.fontFamily',
+    fontWeight: 'editing.fontWeight',
+    lineHeight: 'editing.lineHeight',
+    enableTabIndent: 'editing.enableTabIndent',
+    tabSize: 'editing.tabSize',
+    tabType: 'editing.tabType',
+    autoSaveDelay: 'editing.autoSaveDelay'
+} as const;
+
+const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = {
+    language: 'appearance.language',
+    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 CONFIG_LIMITS = {
+    fontSize: {min: 12, max: 28, default: 13},
+    tabSize: {min: 2, max: 8, default: 4},
+    lineHeight: {min: 1.0, max: 3.0, default: 1.5},
+    tabType: {values: [TabType.TabTypeSpaces, TabType.TabTypeTab], default: TabType.TabTypeSpaces}
+} as const;
+
+// 创建获取翻译的函数
+export const createFontOptions = (t: (key: string) => string) => [
+    {
+        label: t('settings.fontFamilies.harmonyOS'),
+        value: '"HarmonyOS Sans SC", "HarmonyOS Sans", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif'
+    },
+    {
+        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: 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'
+    }
+];
+
+// 常用字体选项
+export const FONT_OPTIONS = createFontOptions((key) => key);
+
+// 获取浏览器的默认语言
+const getBrowserLanguage = (): SupportedLocaleType => {
+    const browserLang = navigator.language;
+    const langCode = browserLang.split('-')[0];
+
+    // 检查是否支持此语言
+    const supportedLang = SUPPORTED_LOCALES.find(locale =>
+        locale.code.startsWith(langCode) || locale.code.split('-')[0] === langCode
+    );
+
+    return supportedLang?.code || 'zh-CN';
+};
+
+// 默认配置
+const DEFAULT_CONFIG: AppConfig = {
+    general: {
+        alwaysOnTop: false,
+        dataPath: '',
+        enableSystemTray: true,
+        startAtLogin: false,
+        enableGlobalHotkey: false,
+        globalHotkey: {
+            ctrl: false,
+            shift: false,
+            alt: true,
+            win: false,
+            key: 'X'
+        }
+    },
+    editing: {
+        fontSize: CONFIG_LIMITS.fontSize.default,
+        fontFamily: FONT_OPTIONS[0].value,
+        fontWeight: 'normal',
+        lineHeight: CONFIG_LIMITS.lineHeight.default,
+        enableTabIndent: true,
+        tabSize: CONFIG_LIMITS.tabSize.default,
+        tabType: CONFIG_LIMITS.tabType.default,
+        autoSaveDelay: 5000
+    },
+    appearance: {
+        language: LanguageType.LangZhCN,
+        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",
+        }
+    },
+    metadata: {
+        version: '1.0.0',
+        lastUpdated: new Date().toString(),
+    }
+};
+
+
+export const useConfigStore = defineStore('config', () => {
+    const {locale, t} = useI18n();
+
+    // 响应式状态
+    const state = reactive({
+        config: {...DEFAULT_CONFIG} as AppConfig,
+        isLoading: false,
+        configLoaded: false
+    });
+    
+    // 初始化FONT_OPTIONS国际化版本
+    const localizedFontOptions = computed(() => createFontOptions(t));
+
+    // 计算属性 - 使用工厂函数简化
+    const createLimitComputed = (key: NumberConfigKey) => computed(() => CONFIG_LIMITS[key]);
+    const limits = Object.fromEntries(
+        (['fontSize', 'tabSize', 'lineHeight'] as const).map(key => [key, createLimitComputed(key)])
+    ) as Record<NumberConfigKey, ReturnType<typeof createLimitComputed>>;
+
+    // 通用配置更新方法
+    const updateGeneralConfig = async <K extends keyof GeneralConfig>(key: K, value: GeneralConfig[K]): Promise<void> => {
+        // 确保配置已加载
+        if (!state.configLoaded && !state.isLoading) {
+            await initConfig();
+        }
+
+        const backendKey = GENERAL_CONFIG_KEY_MAP[key];
+        if (!backendKey) {
+            throw new Error(`No backend key mapping found for general.${key.toString()}`);
+        }
+
+        await ConfigService.Set(backendKey, value);
+        state.config.general[key] = value;
+    };
+
+    const updateEditingConfig = async <K extends keyof EditingConfig>(key: K, value: EditingConfig[K]): Promise<void> => {
+        // 确保配置已加载
+        if (!state.configLoaded && !state.isLoading) {
+            await initConfig();
+        }
+
+        const backendKey = EDITING_CONFIG_KEY_MAP[key];
+        if (!backendKey) {
+            throw new Error(`No backend key mapping found for editing.${key.toString()}`);
+        }
+
+        await ConfigService.Set(backendKey, value);
+        state.config.editing[key] = value;
+    };
+
+    const updateAppearanceConfig = async <K extends keyof AppearanceConfig>(key: K, value: AppearanceConfig[K]): Promise<void> => {
+        // 确保配置已加载
+        if (!state.configLoaded && !state.isLoading) {
+            await initConfig();
+        }
+
+        const backendKey = APPEARANCE_CONFIG_KEY_MAP[key];
+        if (!backendKey) {
+            throw new Error(`No backend key mapping found for appearance.${key.toString()}`);
+        }
+
+        await ConfigService.Set(backendKey, value);
+        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 initConfig = async (): Promise<void> => {
+        if (state.isLoading) return;
+
+        state.isLoading = true;
+        try {
+            const appConfig = await ConfigService.GetConfig();
+
+            if (appConfig) {
+                // 合并配置
+                if (appConfig.general) Object.assign(state.config.general, appConfig.general);
+                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.metadata) Object.assign(state.config.metadata, appConfig.metadata);
+            }
+
+            state.configLoaded = true;
+
+            // 初始化热键监听器
+            const windowController = WindowController.getInstance();
+            await windowController.initializeHotkeyListener();
+        } finally {
+            state.isLoading = false;
+        }
+    };
+
+    // 通用数值调整器工厂
+    const createAdjuster = <T extends NumberConfigKey>(key: T) => {
+        const limit = CONFIG_LIMITS[key];
+        const clamp = (value: number) => ConfigUtils.clamp(value, limit.min, limit.max);
+
+        return {
+            increase: async () => await 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) =>
+        async () => await updateGeneralConfig(key, !state.config.general[key] as GeneralConfig[T]);
+
+    const createEditingToggler = <T extends keyof EditingConfig>(key: T) =>
+        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 await updateEditingConfig(key, values[nextIndex]);
+        };
+
+    // 重置配置
+    const resetConfig = async (): Promise<void> => {
+        if (state.isLoading) return;
+
+        state.isLoading = true;
+        try {
+
+            await ConfigService.ResetConfig()
+            const appConfig = await ConfigService.GetConfig();
+            if (appConfig) {
+                state.config = JSON.parse(JSON.stringify(appConfig)) as AppConfig;
+            }
+        } finally {
+            state.isLoading = false;
+        }
+    };
+
+    // 语言设置方法
+    const setLanguage = async (language: LanguageType): Promise<void> => {
+        await updateAppearanceConfig('language', language);
+
+        // 同步更新前端语言
+        const frontendLocale = ConfigUtils.backendLanguageToFrontend(language);
+        locale.value = frontendLocale as any;
+    };
+
+    // 系统主题设置方法
+    const setSystemTheme = async (systemTheme: SystemThemeType): Promise<void> => {
+        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;
+        }
+    };
+
+    // 初始化语言设置
+    const initializeLanguage = async (): Promise<void> => {
+        try {
+            // 如果配置未加载，先加载配置
+            if (!state.configLoaded) {
+                await initConfig();
+            }
+
+            // 同步前端语言设置
+            const frontendLocale = ConfigUtils.backendLanguageToFrontend(state.config.appearance.language);
+            locale.value = frontendLocale as any;
+        } catch (error) {
+            const browserLang = getBrowserLanguage();
+            locale.value = browserLang as any;
+        }
+    };
+
+    // 创建数值调整器实例
+    const adjusters = {
+        fontSize: createAdjuster('fontSize'),
+        tabSize: createAdjuster('tabSize'),
+        lineHeight: createAdjuster('lineHeight')
+    };
+
+    // 创建切换器实例
+    const togglers = {
+        tabIndent: createEditingToggler('enableTabIndent'),
+        alwaysOnTop: async () => {
+            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: 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 {
+        // 状态
+        config: computed(() => state.config),
+        configLoaded: computed(() => state.configLoaded),
+        isLoading: computed(() => state.isLoading),
+        localizedFontOptions,
+        
+        // 限制常量
+        ...limits,
+
+        // 核心方法
+        initConfig,
+        resetConfig,
+
+        // 语言相关方法
+        setLanguage,
+        initializeLanguage,
+
+        // 主题相关方法
+        setSystemTheme,
+        updateCustomTheme,
+        setCustomTheme,
+
+        // 字体大小操作
+        ...adjusters.fontSize,
+        increaseFontSize: adjusters.fontSize.increase,
+        decreaseFontSize: adjusters.fontSize.decrease,
+        resetFontSize: adjusters.fontSize.reset,
+        setFontSize: adjusters.fontSize.set,
+
+        // Tab操作
+        toggleTabIndent: togglers.tabIndent,
+        setEnableTabIndent: (value: boolean) => updateEditingConfig('enableTabIndent', value),
+        ...adjusters.tabSize,
+        increaseTabSize: adjusters.tabSize.increase,
+        decreaseTabSize: adjusters.tabSize.decrease,
+        setTabSize: adjusters.tabSize.set,
+        toggleTabType: togglers.tabType,
+
+        // 行高操作
+        setLineHeight: adjusters.lineHeight.set,
+
+        // 窗口操作
+        toggleAlwaysOnTop: togglers.alwaysOnTop,
+        setAlwaysOnTop: (value: boolean) => updateGeneralConfig('alwaysOnTop', value),
+
+        // 字体操作
+        setFontFamily: setters.fontFamily,
+        setFontWeight: setters.fontWeight,
+
+        // 路径操作
+        setDataPath: setters.dataPath,
+
+        // 保存配置相关方法
+        setAutoSaveDelay: setters.autoSaveDelay,
+
+        // 热键配置相关方法
+        setEnableGlobalHotkey: (value: boolean) => updateGeneralConfig('enableGlobalHotkey', value),
+        setGlobalHotkey: (hotkey: any) => updateGeneralConfig('globalHotkey', hotkey),
+
+        // 系统托盘配置相关方法
+        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)
+    };
+});

frontend/src/stores/documentStore.ts

@@ -0,0 +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';
+
+const SCRATCH_DOCUMENT_ID = 1; // 默认草稿文档ID
+
+export const useDocumentStore = defineStore('document', () => {
+    // === 核心状态 ===
+    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);
+
+    // === UI状态 ===
+    const showDocumentSelector = ref(false);
+    const isLoading = ref(false);
+
+    // === 计算属性 ===
+    const documentList = computed(() =>
+        Object.values(documents.value).sort((a, b) => {
+            const aIndex = recentDocumentIds.value.indexOf(a.id);
+            const bIndex = recentDocumentIds.value.indexOf(b.id);
+
+            // 按最近使用排序
+            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']
+    }
+});

frontend/src/stores/editorStore.ts

@@ -0,0 +1,717 @@
+import {defineStore} from 'pinia';
+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 {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 ===
+    const configStore = useConfigStore();
+    const documentStore = useDocumentStore();
+    const themeStore = useThemeStore();
+    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 isLoading = ref(false);
+
+    // 异步操作竞态条件控制
+    const operationSequence = ref(0);
+    const pendingOperations = ref(new Map<number, AbortController>());
+    const currentLoadingDocumentId = ref<number | null>(null);
+
+    // 自动保存设置 - 从配置动态获取
+    const getAutoSaveDelay = () => configStore.config.editing.autoSaveDelay;
+
+    // 生成新的操作序列号
+    const getNextOperationId = () => ++operationSequence.value;
+
+    // 取消之前的操作
+    const cancelPreviousOperations = (excludeId?: number) => {
+        pendingOperations.value.forEach((controller, id) => {
+            if (id !== excludeId) {
+                controller.abort();
+                pendingOperations.value.delete(id);
+            }
+        });
+    };
+
+    // 检查操作是否仍然有效
+    const isOperationValid = (operationId: number, documentId: number) => {
+        return (
+            pendingOperations.value.has(operationId) &&
+            !pendingOperations.value.get(operationId)?.signal.aborted &&
+            currentLoadingDocumentId.value === documentId
+        );
+    };
+
+    // === 私有方法 ===
+
+    // 生成内容哈希
+    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();
+
+        // 检查是否需要重新构建语法树
+        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 createEditorInstance = async (
+        content: string, 
+        operationId: number, 
+        documentId: number
+    ): Promise<EditorView> => {
+        if (!editorCache.value.containerElement) {
+            throw new Error('Editor container not set');
+        }
+
+        // 检查操作是否仍然有效
+        if (!isOperationValid(operationId, documentId)) {
+            throw new Error('Operation cancelled');
+        }
+
+        // 获取基本扩展
+        const basicExtensions = createBasicSetup();
+
+        // 获取主题扩展
+        const themeExtension = createThemeExtension(
+            configStore.config.appearance.systemTheme || SystemThemeType.SystemThemeAuto
+        );
+
+        // 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,
+            lineHeight: configStore.config.editing.lineHeight,
+            fontWeight: configStore.config.editing.fontWeight
+        });
+
+        // 统计扩展
+        const statsExtension = createStatsUpdateExtension(updateDocumentStats);
+
+        // 内容变化扩展
+        const contentChangeExtension = createContentChangePlugin();
+
+        // 代码块扩展
+        const codeBlockExtension = createCodeBlockExtension({
+            showBackground: true,
+            enableAutoDetection: true
+        });
+
+        // 再次检查操作有效性
+        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[] = [
+            keymapExtension,
+            ...basicExtensions,
+            themeExtension,
+            ...tabExtensions,
+            fontExtension,
+            statsExtension,
+            contentChangeExtension,
+            codeBlockExtension,
+            ...dynamicExtensions
+        ];
+
+        // 创建编辑器状态
+        const state = EditorState.create({
+            doc: content,
+            extensions
+        });
+
+        // 创建编辑器视图
+        const view = new EditorView({
+            state
+        });
+
+        // 将光标定位到文档末尾并滚动到该位置
+        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];
+            }
+        }
+
+        // 添加新的编辑器实例
+        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;
+
+        try {
+            const content = instance.view.state.doc.toString();
+            const lastModified = instance.lastModified;
+            
+            await DocumentService.UpdateDocumentContent(documentId, content);
+
+            // 检查在保存期间内容是否又被修改了
+            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();
+        });
+
+        editorCache.value.instances = {};
+        editorCache.value.lru = [];
+        currentEditor.value = null;
+    };
+
+    // 更新扩展
+    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,
+    };
+});

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,
+    }
+}) 

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,
+    }
+}) 

frontend/src/stores/systemStore.ts

@@ -0,0 +1,66 @@
+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>;
+}
+
+export const useSystemStore = defineStore('system', () => {
+    // 状态
+    const environment = ref<SystemEnvironment | null>(null);
+    const isLoading = ref(false);
+
+
+    // 计算属性
+    const isWindows = computed(() => environment.value?.OS === 'windows');
+    const isMacOS = computed(() => environment.value?.OS === 'darwin');
+    const isLinux = computed(() => environment.value?.OS === 'linux');
+
+
+    // 获取标题栏高度
+    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,
+    };
+}); 

frontend/src/stores/themeStore.ts

@@ -0,0 +1,145 @@
+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) => {
+    document.documentElement.setAttribute('data-theme', 
+      theme === SystemThemeType.SystemThemeAuto ? 'auto' :
+      theme === SystemThemeType.SystemThemeDark ? 'dark' : 'light'
+    );
+  };
+
+  // 初始化主题
+  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
+  };
+});

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

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
+    }
+}) 

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
+    };
+});

frontend/src/utils/configUtils.ts

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