✨ Added php prettier plugin

Bumps [github.com/ulikunitz/xz](https://github.com/ulikunitz/xz) from 0.5.12 to 0.5.14.
- [Commits](https://github.com/ulikunitz/xz/compare/v0.5.12...v0.5.14)

---
updated-dependencies:
- dependency-name: github.com/ulikunitz/xz
  dependency-version: 0.5.14
  dependency-type: indirect
...

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

README.md

@@ -1,10 +1,10 @@
-# <img src="./frontend/public/appicon.png" alt="VoidRaft Logo" width="32" height="32" style="vertical-align: middle;"> VoidRaft
+# <img src="./frontend/public/appicon.png" alt="voidraft Logo" width="32" height="32" style="vertical-align: middle;"> voidraft
 
 [中文](README_ZH.md) | **English**
 
 > *An elegant text snippet recording tool designed for developers.*
 
-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.
+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.
 
 ## Core Features
 
@@ -15,6 +15,7 @@ VoidRaft is a modern developer-focused text editor that allows you to record, or
 - 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
 
 ### Modern Interface
 
@@ -86,7 +87,7 @@ After building, the executable will be generated in the `bin` directory.
 ## Project Structure
 
 ```
-Voidraft/
+voidraft/
 ├── frontend/              # Vue 3 frontend application
 │   ├── src/
 │   │   ├── views/editor/  # Editor core views
@@ -118,21 +119,21 @@ Voidraft/
 | Linux | Planned | Future versions |
 
 ### Planned Features
-- [ ] Custom themes - Customize editor themes
+- ✅ Custom themes - Customize editor themes
 - ✅ Multi-window support - Support editing multiple documents simultaneously
+- ✅ Data synchronization - Cloud backup for documents
 - [ ] Enhanced clipboard - Monitor and manage clipboard history
-- [ ] 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:
+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
+- **[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
@@ -156,7 +157,7 @@ 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)
+[![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

@@ -1,10 +1,10 @@
-# <img src="./frontend/public/appicon.png" alt="Voidraft Logo" width="32" height="32" style="vertical-align: middle;"> Voidraft
+# <img src="./frontend/public/appicon.png" alt="voidraft Logo" width="32" height="32" style="vertical-align: middle;"> voidraft
 
 **中文** | [English](README.md)
 
 > *一个专为开发者打造的优雅文本片段记录工具。*
 
-Voidraft 是一个现代化的开发者专用文本编辑器，让你能够随时随地记录、整理和管理各种文本片段。无论是临时的代码片段、API 响应、会议笔记，还是日常的待办事项，Voidraft 都能为你提供流畅而优雅的编辑体验。
+voidraft 是一个现代化的开发者专用文本编辑器，让你能够随时随地记录、整理和管理各种文本片段。无论是临时的代码片段、API 响应、会议笔记，还是日常的待办事项，voidraft 都能为你提供流畅而优雅的编辑体验。
 
 ## 核心特性
 
@@ -15,6 +15,7 @@ Voidraft 是一个现代化的开发者专用文本编辑器，让你能够随
 - 代码格式化 - 内置 Prettier 支持，一键美化代码
 - 块状编辑模式 - 将内容分割为独立的代码块，每个块可设置不同语言
 - 支持多窗口 - 同时编辑多个文档
+- 支持自定义主题 - 自定义编辑器主题
 
 ### 现代化界面
 
@@ -87,7 +88,7 @@ wails3 package
 ## 项目结构
 
 ```
-Voidraft/
+voidraft/
 ├── frontend/              # Vue 3 前端应用
 │   ├── src/
 │   │   ├── views/editor/  # 编辑器核心视图
@@ -119,10 +120,10 @@ Voidraft/
 | Linux | 计划中 | 后续版本 |
 
 ### 计划添加的功能
-- [ ] 自定义主题 - 自定义编辑器主题
+- ✅ 自定义主题 - 自定义编辑器主题
 - ✅ 多窗口支持 - 支持同时编辑多个文档
+- ✅ 数据同步 - 文档云端备份
 - [ ] 剪切板增强 - 监听和管理剪切板历史
-- [ ] 数据同步 - 配置和文档云端备份
 - [ ] 扩展系统 - 支持自定义插件
 
 
@@ -130,11 +131,11 @@ Voidraft/
 
 > 站在巨人的肩膀上，致敬开源精神
 
-Voidraft 的诞生离不开以下优秀的开源项目：
+voidraft 的诞生离不开以下优秀的开源项目：
 
 ### 特别感谢
 
-- **[Heynote](https://github.com/heyman/heynote/)** - Voidraft 是基于 Heynote 概念的功能增强版本
+- **[Heynote](https://github.com/heyman/heynote/)** - voidraft 是基于 Heynote 概念的功能增强版本
   - 继承了 Heynote 优雅的块状编辑理念
   - 在原有基础上增加了更多实用功能
   - 采用现代化技术栈重新构建
@@ -158,7 +159,7 @@ Voidraft 的诞生离不开以下优秀的开源项目：
 欢迎 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)
+[![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*

Taskfile.yml

@@ -12,13 +12,25 @@ vars:
   VITE_PORT: '{{.WAILS_VITE_PORT | default 9245}}'
 
 tasks:
+  version:
+    summary: Generate version information
+    cmds:
+      - '{{if eq OS "windows"}}cmd /c ".\scripts\version.bat"{{else}}bash ./scripts/version.sh{{end}}'
+    sources:
+      - scripts/version.bat
+      - scripts/version.sh
+    generates:
+      - version.txt
+
   build:
     summary: Builds the application
+    deps: [version]
     cmds:
       - task: "{{OS}}:build"
 
   package:
     summary: Packages a production build of the application
+    deps: [version]
     cmds:
       - task: "{{OS}}:package"
 

build/config.yml

@@ -5,12 +5,12 @@ version: '3'
 
 # This information is used to generate the build assets.
 info:
-  companyName: "Voidraft" # The name of the company
-  productName: "Voidraft" # The name of the application
+  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
+  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

build/darwin/Info.dev.plist

@@ -4,15 +4,15 @@
         <key>CFBundlePackageType</key>
         <string>APPL</string>
         <key>CFBundleName</key>
-        <string>Voidraft</string>
+        <string>voidraft</string>
         <key>CFBundleExecutable</key>
-        <string>Voidraft</string>
+        <string>voidraft</string>
         <key>CFBundleIdentifier</key>
         <string>landaiqing</string>
         <key>CFBundleVersion</key>
         <string>0.0.1.0</string>
         <key>CFBundleGetInfoString</key>
-        <string>Voidraft</string>
+        <string>voidraft</string>
         <key>CFBundleShortVersionString</key>
         <string>0.0.1.0</string>
         <key>CFBundleIconFile</key>
@@ -22,7 +22,7 @@
         <key>NSHighResolutionCapable</key>
         <string>true</string>
         <key>NSHumanReadableCopyright</key>
-        <string>© 2025 Voidraft. All rights reserved.</string>
+        <string>© 2025 voidraft. All rights reserved.</string>
         <key>NSAppTransportSecurity</key>
         <dict>
             <key>NSAllowsLocalNetworking</key>

build/darwin/Info.plist

@@ -4,15 +4,15 @@
         <key>CFBundlePackageType</key>
         <string>APPL</string>
         <key>CFBundleName</key>
-        <string>Voidraft</string>
+        <string>voidraft</string>
         <key>CFBundleExecutable</key>
-        <string>Voidraft</string>
+        <string>voidraft</string>
         <key>CFBundleIdentifier</key>
         <string>landaiqing</string>
         <key>CFBundleVersion</key>
         <string>0.0.1.0</string>
         <key>CFBundleGetInfoString</key>
-        <string>Voidraft</string>
+        <string>voidraft</string>
         <key>CFBundleShortVersionString</key>
         <string>0.0.1.0</string>
         <key>CFBundleIconFile</key>
@@ -22,6 +22,6 @@
         <key>NSHighResolutionCapable</key>
         <string>true</string>
         <key>NSHumanReadableCopyright</key>
-        <string>© 2025 Voidraft. All rights reserved.</string>
+        <string>© 2025 voidraft. All rights reserved.</string>
     </dict>
 </plist>

build/darwin/Taskfile.yml

@@ -11,9 +11,12 @@ tasks:
       - task: common:build:frontend
       - task: common:generate:icons
     cmds:
-      - go build {{.BUILD_FLAGS}} -o {{.OUTPUT}}
+      - go build {{.BUILD_FLAGS}} -ldflags="{{.LDFLAGS}} {{.VERSION_FLAGS}}" -o {{.OUTPUT}}
     vars:
-      BUILD_FLAGS: '{{if eq .PRODUCTION "true"}}-tags production -trimpath -buildvcs=false -ldflags="-w -s"{{else}}-buildvcs=false -gcflags=all="-l"{{end}}'
+      BUILD_FLAGS: '{{if eq .PRODUCTION "true"}}-tags production -trimpath -buildvcs=false{{else}}-buildvcs=false -gcflags=all="-l"{{end}}'
+      LDFLAGS: '{{if eq .PRODUCTION "true"}}-w -s{{else}}{{end}}'
+      VERSION_FLAGS:
+        sh: 'grep "VERSION=" version.txt | cut -d"=" -f2 | xargs -I {} echo "-X voidraft/internal/version.Version={}"'
       DEFAULT_OUTPUT: '{{.BIN_DIR}}/{{.APP_NAME}}'
       OUTPUT: '{{ .OUTPUT | default .DEFAULT_OUTPUT }}'
     env:

build/linux/Taskfile.yml

@@ -11,9 +11,12 @@ tasks:
       - task: common:build:frontend
       - task: common:generate:icons
     cmds:
-      - go build {{.BUILD_FLAGS}} -o {{.BIN_DIR}}/{{.APP_NAME}}
+      - go build {{.BUILD_FLAGS}} -ldflags="{{.LDFLAGS}} {{.VERSION_FLAGS}}" -o {{.BIN_DIR}}/{{.APP_NAME}}
     vars:
-      BUILD_FLAGS: '{{if eq .PRODUCTION "true"}}-tags production -trimpath -buildvcs=false -ldflags="-w -s"{{else}}-buildvcs=false -gcflags=all="-l"{{end}}'
+      BUILD_FLAGS: '{{if eq .PRODUCTION "true"}}-tags production -trimpath -buildvcs=false{{else}}-buildvcs=false -gcflags=all="-l"{{end}}'
+      LDFLAGS: '{{if eq .PRODUCTION "true"}}-w -s{{else}}{{end}}'
+      VERSION_FLAGS:
+        sh: 'grep "VERSION=" version.txt | cut -d"=" -f2 | xargs -I {} echo "-X voidraft/internal/version.Version={}"'
     env:
       GOOS: linux
       CGO_ENABLED: 1

build/linux/nfpm/nfpm.yaml

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

build/windows/Taskfile.yml

@@ -14,13 +14,16 @@ tasks:
       - task: common:generate:icons
     cmds:
       - task: generate:syso
-      - go build {{.BUILD_FLAGS}} -o {{.BIN_DIR}}/{{.APP_NAME}}.exe
+      - go build {{.BUILD_FLAGS}} -ldflags="{{.LDFLAGS}} {{.VERSION_FLAGS}}" -o {{.BIN_DIR}}/{{.APP_NAME}}.exe
       - cmd: powershell Remove-item *.syso
         platforms: [windows]
       - cmd: rm -f *.syso
         platforms: [linux, darwin]
     vars:
-      BUILD_FLAGS: '{{if eq .PRODUCTION "true"}}-tags production -trimpath -buildvcs=false -ldflags="-w -s -H windowsgui"{{else}}-buildvcs=false -gcflags=all="-l"{{end}}'
+      BUILD_FLAGS: '{{if eq .PRODUCTION "true"}}-tags production -trimpath -buildvcs=false{{else}}-buildvcs=false -gcflags=all="-l"{{end}}'
+      LDFLAGS: '{{if eq .PRODUCTION "true"}}-w -s -H windowsgui{{else}}{{end}}'
+      VERSION_FLAGS:
+        sh: 'powershell -Command "(Get-Content version.txt) -replace ''VERSION='', ''-X voidraft/internal/version.Version=''"'
     env:
       GOOS: windows
       CGO_ENABLED: 1

build/windows/info.json

@@ -5,11 +5,11 @@
 	"info": {
 		"0000": {
 			"ProductVersion": "0.0.1.0",
-			"CompanyName": "Voidraft",
-			"FileDescription": "Voidraft",
-			"LegalCopyright": "© 2025 Voidraft. All rights reserved.",
-			"ProductName": "Voidraft",
-			"Comments": "Voidraft"
+			"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 "Voidraft"
+    !define INFO_COMPANYNAME "voidraft"
 !endif
 !ifndef INFO_PRODUCTNAME
-    !define INFO_PRODUCTNAME "Voidraft"
+    !define INFO_PRODUCTNAME "voidraft"
 !endif
 !ifndef INFO_PRODUCTVERSION
     !define INFO_PRODUCTVERSION "0.0.1.0"
 !endif
 !ifndef INFO_COPYRIGHT
-    !define INFO_COPYRIGHT "© 2025 Voidraft. All rights reserved."
+    !define INFO_COPYRIGHT "© 2025 voidraft. All rights reserved."
 !endif
 !ifndef PRODUCT_EXECUTABLE
     !define PRODUCT_EXECUTABLE "${INFO_PROJECTNAME}.exe"

docs/CNAME

@@ -0,0 +1 @@
+voidraft.landaiqing.cn

docs/changelog.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>voidraft - Changelog</title>
+  <link rel="stylesheet" href="css/styles.css">
+  <link rel="stylesheet" href="css/changelog.css">
+  <link rel="icon" href="img/favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body class="theme-dark">
+  <div class="container">
+    <!-- 主卡片 -->
+    <div class="card">
+      <div class="card-header">
+        <h1 class="card-title" data-en="voidraft Changelog" data-zh="voidraft 更新日志">voidraft Changelog</h1>
+        <div class="card-controls">
+          <button id="theme-toggle" class="btn btn-secondary" title="切换主题">
+            <i class="fas fa-sun"></i> <span data-en="Theme" data-zh="主题">Theme</span>
+          </button>
+          <button id="lang-toggle" class="btn btn-secondary">
+            <i class="fas fa-language"></i> 中/EN
+          </button>
+        </div>
+      </div>
+      
+      <div class="card-content">
+        <!-- 导航区域 -->
+        <div class="nav-links">
+          <a href="index.html" class="btn btn-secondary">
+            <i class="fas fa-home"></i> <span data-en="Home" data-zh="首页">Home</span>
+          </a>
+          <a href="https://github.com/landaiqing/voidraft" class="btn btn-secondary">
+            <i class="fab fa-github"></i> <span data-en="Source Code" data-zh="源代码">Source Code</span>
+          </a>
+        </div>
+
+        <!-- 加载中提示 -->
+        <div id="loading" class="loading-container">
+          <div class="loading-spinner"></div>
+          <p data-en="Loading releases..." data-zh="正在加载版本信息...">Loading releases...</p>
+        </div>
+        
+        <!-- 更新日志内容 -->
+        <div id="changelog" class="changelog-container">
+          <!-- 通过JavaScript动态填充内容 -->
+        </div>
+        
+        <!-- 错误信息 -->
+        <div id="error-message" class="error-container" style="display: none;">
+          <i class="fas fa-exclamation-triangle"></i>
+          <p data-en="Failed to load release information. Please try again later." 
+             data-zh="加载版本信息失败，请稍后再试。">Failed to load release information. Please try again later.</p>
+        </div>
+      </div>
+      
+      <!-- 页脚 -->
+      <footer class="footer">
+        <p class="footer-text" data-en="© 2025 voidraft - An elegant text snippet recording tool designed for developers" data-zh="© 2025 voidraft - 专为开发者打造的优雅文本片段记录工具">© 2023-2024 voidraft - An elegant text snippet recording tool designed for developers</p>
+        <div class="footer-links">
+          <a href="https://github.com/landaiqing/voidraft" target="_blank" class="footer-link">GitHub</a>
+          <a href="https://github.com/landaiqing/voidraft/issues" target="_blank" class="footer-link" data-en="Issues" data-zh="问题反馈">Issues</a>
+          <a href="https://github.com/landaiqing/voidraft/releases" target="_blank" class="footer-link" data-en="Releases" data-zh="版本发布">Releases</a>
+        </div>
+      </footer>
+    </div>
+  </div>
+
+  <script src="js/script.js"></script>
+  <script src="js/changelog.js"></script>
+</body>
+</html> 

docs/css/changelog.css

@@ -0,0 +1,347 @@
+/* 更新日志页面样式 */
+.nav-links {
+  margin-bottom: 30px;
+  display: flex;
+  gap: 15px;
+}
+
+.loading-container {
+  text-align: center;
+  padding: 40px 0;
+  background-color: transparent;
+}
+
+.loading-spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: var(--primary-color);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 20px;
+}
+
+.theme-dark .loading-spinner {
+  border-color: rgba(255, 255, 255, 0.1);
+  border-left-color: var(--primary-color);
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.error-container {
+  text-align: center;
+  color: var(--error-color);
+  padding: 20px;
+  border: 2px dashed var(--error-color);
+  margin: 20px 0;
+  border-radius: 4px;
+  background-color: rgba(var(--card-bg-rgb), 0.7);
+}
+
+.error-container i {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+/* 更新日志容器 */
+.changelog-container {
+  display: none;
+  position: relative;
+  z-index: 1;
+}
+
+.release {
+  margin-bottom: 40px;
+  border-left: 4px solid var(--primary-color);
+  padding-left: 20px;
+  background-color: rgba(var(--card-bg-rgb), 0.5);
+  padding: 15px 20px;
+  border-radius: 4px;
+}
+
+.release-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.release-version {
+  font-size: 24px;
+  font-weight: bold;
+  color: var(--primary-color);
+}
+
+.release-date {
+  color: var(--text-color);
+  opacity: 0.7;
+  font-size: 14px;
+}
+
+.release-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  margin-left: 10px;
+  background-color: var(--primary-color);
+  color: #000;
+}
+
+.release-badge.pre-release {
+  background-color: var(--warning-color);
+}
+
+.release-description {
+  margin-bottom: 20px;
+  line-height: 1.6;
+}
+
+.release-assets {
+  background-color: rgba(var(--light-bg-rgb), 0.7);
+  padding: 15px;
+  border-radius: 4px;
+  margin-top: 15px;
+}
+
+.release-assets-title {
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.asset-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.asset-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+}
+
+.asset-item:last-child {
+  border-bottom: none;
+}
+
+.asset-icon {
+  margin-right: 10px;
+  color: var(--accent-color);
+}
+
+.asset-name {
+  flex-grow: 1;
+}
+
+.asset-size {
+  font-size: 12px;
+  color: var(--text-color);
+  opacity: 0.7;
+}
+
+/* 资源下载按钮 */
+.download-btn {
+  margin-left: 10px;
+  padding: 3px 10px;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 12px;
+  transition: all 0.2s ease;
+  display: inline-block;
+  text-align: center;
+}
+
+.download-btn:hover {
+  background-color: var(--secondary-color);
+}
+
+.markdown-content {
+  line-height: 1.8;
+  overflow-wrap: break-word;
+  background-color: transparent;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  padding-left: 20px;
+  margin: 10px 0;
+}
+
+.markdown-content li {
+  margin-bottom: 8px;
+}
+
+.markdown-content li:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-content hr {
+  border: none;
+  border-top: 2px dashed var(--border-color);
+  margin: 20px 0;
+}
+
+.markdown-content br {
+  display: block;
+  content: "";
+  margin-top: 10px;
+}
+
+.markdown-content code {
+  font-family: 'IBM Plex Mono', monospace;
+  background-color: rgba(128, 128, 128, 0.1);
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-size: 90%;
+}
+
+.markdown-content pre {
+  background-color: rgba(128, 128, 128, 0.1);
+  padding: 15px;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 15px 0;
+}
+
+.markdown-content pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+.markdown-content a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+.markdown-content a:hover {
+  text-decoration: underline;
+}
+
+.data-source {
+  padding: 10px 15px;
+  margin-bottom: 20px;
+  background-color: rgba(var(--light-bg-rgb), 0.7);
+  border-radius: 4px;
+  font-size: 14px;
+  text-align: right;
+  opacity: 0.7;
+}
+
+.data-source a {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.data-source a:hover {
+  text-decoration: underline;
+} 
+
+/* Markdown内容样式增强 */
+.markdown-content blockquote {
+  border-left: 4px solid var(--primary-color);
+  padding: 10px 15px;
+  margin: 15px 0;
+  background-color: rgba(var(--light-bg-rgb), 0.5);
+  border-radius: 0 4px 4px 0;
+}
+
+.markdown-content ul, 
+.markdown-content ol {
+  padding-left: 20px;
+  margin: 10px 0;
+}
+
+/* 移动设备响应式优化 */
+@media (max-width: 768px) {
+  .release-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  
+  .release-assets {
+    padding: 12px 8px;
+  }
+  
+  .asset-item {
+    flex-wrap: wrap;
+    padding: 12px 0;
+    position: relative;
+  }
+  
+  .asset-name {
+    width: 100%;
+    margin-bottom: 8px;
+    word-break: break-all;
+  }
+  
+  .asset-size {
+    margin-left: 25px;
+  }
+  
+  .download-btn {
+    margin-left: 10px;
+    padding: 5px 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .release {
+    padding-left: 12px;
+  }
+  
+  .asset-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .asset-icon {
+    margin-bottom: 5px;
+  }
+  
+  .asset-size {
+    margin-left: 0;
+    margin-top: 5px;
+  }
+  
+  .download-btn {
+    margin-left: 0;
+    margin-top: 10px;
+    width: 100%;
+    text-align: center;
+    padding: 8px;
+  }
+  
+  .markdown-content pre {
+    padding: 10px;
+    margin: 10px 0;
+  }
+} 
+
+/* 确保日志页面页脚样式一致 */
+.footer {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.footer-text {
+  margin: 0 0 15px 0;
+} 

docs/css/ibm-plex-mono-font.css

@@ -0,0 +1,45 @@
+/* cyrillic-ext */
+@font-face {
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iIq129k.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1isq129k.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iAq129k.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'IBM Plex Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

docs/css/space-mono-font.css

@@ -0,0 +1,27 @@
+/* vietnamese */
+@font-face {
+    font-family: 'Space Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/space-mono/i7dPIFZifjKcF5UAWdDRYE58RWq7.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Space Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/space-mono/i7dPIFZifjKcF5UAWdDRYE98RWq7.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Space Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../font/space-mono/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

docs/css/styles.css

@@ -0,0 +1,717 @@
+@import url('./space-mono-font.css');
+@import url('./ibm-plex-mono-font.css');
+
+/* 浅色主题 */
+:root {
+  --bg-color: #fefefe;
+  --text-color: #000000;
+  --primary-color: #F08080;
+  --primary-color-rgb: 240, 128, 128;
+  --secondary-color: #ff006e;
+  --accent-color: #073B4C;
+  --card-bg: #ffffff;
+  --card-bg-rgb: 255, 255, 255;
+  --border-color: #000000;
+  --light-bg: #f0f0f0;
+  --light-bg-rgb: 240, 240, 240;
+  --shadow-color: rgba(240, 128, 128, 0.5);
+  --success-color: #27c93f;
+  --warning-color: #FFD166;
+  --error-color: #ff006e;
+  --info-color: #118ab2;
+  --code-bg: #ffffff;
+  --code-bg-rgb: 255, 255, 255;
+  --preview-header-bg: #f0f0f0;
+  --preview-header-bg-rgb: 240, 240, 240;
+  --grid-color-1: rgba(0, 0, 0, 0.08);
+  --grid-color-2: rgba(0, 0, 0, 0.05);
+  --header-title-color: #000000;
+}
+
+/* 暗色主题变量 */
+.theme-dark {
+  --bg-color: #121212;
+  --text-color: #ffffff;
+  --primary-color: #F08080;
+  --primary-color-rgb: 240, 128, 128;
+  --secondary-color: #ff006e;
+  --accent-color: #118ab2;
+  --card-bg: #1e1e1e;
+  --card-bg-rgb: 30, 30, 30;
+  --border-color: #ffffff;
+  --light-bg: #2a2a2a;
+  --light-bg-rgb: 42, 42, 42;
+  --shadow-color: rgba(240, 128, 128, 0.5);
+  --success-color: #27c93f;
+  --warning-color: #FFD166;
+  --error-color: #ff006e;
+  --info-color: #118ab2;
+  --code-bg: #1e1e1e;
+  --code-bg-rgb: 30, 30, 30;
+  --preview-header-bg: #252526;
+  --preview-header-bg-rgb: 37, 37, 38;
+  --grid-color-1: rgba(255, 255, 255, 0.08);
+  --grid-color-2: rgba(255, 255, 255, 0.05);
+  --header-title-color: #000000;
+}
+
+/* 主题切换和语言切换的过渡效果 */
+.theme-transition,
+.theme-transition *,
+.lang-transition,
+.lang-transition * {
+  transition: all 0.3s ease !important;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@keyframes gridMove {
+  0% {
+    background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
+  }
+  100% {
+    background-position: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
+  }
+}
+
+body {
+  background-color: var(--bg-color);
+  background-image: 
+    linear-gradient(var(--grid-color-1) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-color-1) 1px, transparent 1px),
+    linear-gradient(var(--grid-color-2) 0.5px, transparent 0.5px),
+    linear-gradient(90deg, var(--grid-color-2) 0.5px, transparent 0.5px);
+  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
+  background-position: center;
+  animation: gridMove 40s linear infinite;
+  font-family: 'Space Mono', monospace;
+  color: var(--text-color);
+  line-height: 1.6;
+  padding: 20px;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* 卡片容器 */
+.card {
+  background-color: var(--card-bg);
+  background-image: 
+    linear-gradient(var(--grid-color-1) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-color-1) 1px, transparent 1px),
+    linear-gradient(var(--grid-color-2) 0.5px, transparent 0.5px),
+    linear-gradient(90deg, var(--grid-color-2) 0.5px, transparent 0.5px);
+  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
+  background-position: center;
+  border: 4px solid var(--border-color);
+  box-shadow: 12px 12px 0 var(--shadow-color);
+  margin-bottom: 40px;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  z-index: 10;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 16px 16px 0 var(--shadow-color);
+}
+
+/* 卡片头部 */
+.card-header {
+  background-color: rgba(var(--primary-color-rgb), 0.9);
+  border-bottom: 4px solid var(--border-color);
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+
+.card-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin: 0;
+  color: var(--header-title-color);
+}
+
+.card-controls {
+  display: flex;
+  gap: 10px;
+}
+
+.btn {
+  display: inline-block;
+  padding: 10px 20px;
+  background: var(--secondary-color);
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  border: 3px solid var(--border-color);
+  box-shadow: 4px 4px 0 var(--shadow-color);
+  transition: all 0.2s ease;
+  cursor: pointer;
+  font-family: 'Space Mono', monospace;
+  font-size: 14px;
+}
+
+.btn:hover {
+  background: var(--card-bg);
+  color: var(--primary-color);
+  border: 3px solid var(--primary-color);
+  box-shadow: none;
+}
+
+.btn-secondary {
+  background: var(--light-bg);
+  color: var(--text-color);
+}
+
+.btn-secondary:hover {
+  background: var(--card-bg);
+  color: var(--primary-color);
+  border: 3px solid var(--primary-color);
+}
+
+/* 卡片内容 */
+.card-content {
+  padding: 30px;
+  position: relative;
+  z-index: 1;
+  background-color: rgba(var(--card-bg-rgb), 0.5);
+}
+
+/* Logo区域 */
+.logo-container {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.logo-frame {
+  width: 150px;
+  height: 150px;
+  background: var(--card-bg);
+  border: 4px solid var(--border-color);
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.logo-image {
+  width: 130px;
+  height: 130px;
+  object-fit: contain;
+  border: 2px solid var(--border-color);
+}
+
+.logo-text {
+  font-size: 32px;
+  font-weight: bold;
+  margin: 0;
+}
+
+.tagline {
+  font-size: 16px;
+  margin: 10px 0 0;
+  color: var(--accent-color);
+}
+
+/* 介绍区域 */
+.intro-box {
+  border: 2px dashed var(--border-color);
+  padding: 20px;
+  background-color: rgba(var(--light-bg-rgb), 0.7);
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.intro-text {
+  font-size: 16px;
+  margin-bottom: 0;
+}
+
+/* 按钮组 */
+.button-group {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin: 30px 0;
+}
+
+/* 特性网格 */
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 30px;
+  margin: 40px 0;
+}
+
+/* 特性卡片 */
+.feature-card {
+  background-color: rgba(var(--card-bg-rgb), 0.8);
+  border: 3px solid var(--border-color);
+  box-shadow: 5px 5px 0 var(--shadow-color);
+  padding: 20px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 7px 7px 0 var(--shadow-color);
+}
+
+.feature-icon {
+  font-size: 24px;
+  margin-bottom: 15px;
+  color: var(--secondary-color);
+}
+
+.feature-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.feature-desc {
+  font-size: 14px;
+}
+
+/* 预览区域 */
+.preview-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin: 30px 0;
+}
+
+@media (max-width: 768px) {
+  .preview-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 预览窗口 */
+.preview-window {
+  border: 3px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 10px;
+  flex: 1;
+  min-width: 300px;
+  background-color: rgba(var(--card-bg-rgb), 0.7);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 5px 5px 0 var(--shadow-color);
+}
+
+/* 预览头部 */
+.preview-header {
+  background-color: rgba(var(--preview-header-bg-rgb), 0.9);
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid var(--border-color);
+}
+
+.preview-controls {
+  display: flex;
+  gap: 6px;
+  margin-right: 15px;
+}
+
+.preview-btn {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 0.5px solid rgba(0, 0, 0, 0.1);
+}
+
+.preview-btn:nth-child(1) {
+  background-color: #ff5f56;
+}
+
+.preview-btn:nth-child(2) {
+  background-color: #ffbd2e;
+}
+
+.preview-btn:nth-child(3) {
+  background-color: #27c93f;
+}
+
+.preview-title {
+  font-size: 13px;
+  opacity: 0.8;
+  color: var(--text-color);
+  font-weight: normal;
+}
+
+/* 预览内容 */
+.preview-content {
+  padding: 15px;
+  flex-grow: 1;
+  overflow: auto;
+  background-color: rgba(var(--code-bg-rgb), 0.5);
+}
+
+/* 代码块容器 */
+.code-block-wrapper {
+  background-color: rgba(var(--code-bg-rgb), 0.8);
+  border: 2px solid var(--border-color);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+/* 块头部 */
+.block-header {
+  background-color: rgba(var(--light-bg-rgb), 0.8);
+  padding: 8px 12px;
+  border-bottom: 2px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.block-language {
+  color: rgba(128, 128, 128, 0.8);
+  font-family: 'IBM Plex Mono', monospace;
+  display: flex;
+  align-items: center;
+}
+
+.block-language::before {
+  content: '';
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-right: 5px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M9.7,16.7L5.3,12.3C4.9,11.9 4.9,11.1 5.3,10.7C5.7,10.3 6.3,10.3 6.7,10.7L10.5,14.5L17.3,7.7C17.7,7.3 18.3,7.3 18.7,7.7C19.1,8.1 19.1,8.7 18.7,9.1L11.3,16.7C10.9,17.1 10.1,17.1 9.7,16.7Z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.code-block {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  margin: 0;
+  white-space: pre;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  padding: 10px;
+}
+
+.theme-dark .code-block-wrapper {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.theme-dark .block-header {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.theme-dark .block-language {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.theme-dark .block-language::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23aaa'%3E%3Cpath d='M9.7,16.7L5.3,12.3C4.9,11.9 4.9,11.1 5.3,10.7C5.7,10.3 6.3,10.3 6.7,10.7L10.5,14.5L17.3,7.7C17.7,7.3 18.3,7.3 18.7,7.7C19.1,8.1 19.1,8.7 18.7,9.1L11.3,16.7C10.9,17.1 10.1,17.1 9.7,16.7Z'/%3E%3C/svg%3E");
+}
+
+.theme-dark .code-block {
+  color: #d4d4d4;
+}
+
+/* 代码高亮 */
+.theme-dark .keyword { color: #c586c0; }
+.theme-dark .function { color: #dcdcaa; }
+.theme-dark .variable { color: #9cdcfe; }
+.theme-dark .string { color: #ce9178; }
+.theme-dark .comment { color: #6a9955; }
+.theme-dark .class { color: #4ec9b0; }
+.theme-dark .parameter { color: #9cdcfe; }
+.theme-dark .built-in { color: #4ec9b0; }
+
+/* 浅色主题代码高亮 */
+.keyword { color: #af00db; }
+.function { color: #795e26; }
+.variable { color: #001080; }
+.string { color: #a31515; }
+.comment { color: #008000; }
+.class { color: #267f99; }
+.parameter { color: #001080; }
+.built-in { color: #267f99; }
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border: none;
+  transition: opacity 0.3s ease;
+}
+
+.theme-dark .light-theme-img {
+  display: none !important;
+}
+
+.theme-dark .dark-theme-img {
+  display: block;
+}
+
+body:not(.theme-dark) .dark-theme-img {
+  display: none !important;
+}
+
+body:not(.theme-dark) .light-theme-img {
+  display: block !important;
+}
+
+/* 技术栈列表 */
+.tech-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* 技术栈列表 */
+.tech-item {
+  padding: 15px;
+  margin-bottom: 15px;
+  border: 2px solid var(--border-color);
+  background-color: rgba(var(--light-bg-rgb), 0.7);
+  display: flex;
+  align-items: center;
+}
+
+.tech-icon {
+  margin-right: 15px;
+  color: var(--secondary-color);
+  font-size: 20px;
+  width: 30px;
+  text-align: center;
+}
+
+.tech-name {
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.tech-desc {
+  font-size: 14px;
+  color: var(--accent-color);
+}
+
+/* 页脚 */
+.footer {
+  border-top: 2px solid var(--border-color);
+  padding: 20px 0;
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: transparent;
+  position: relative;
+  z-index: 1;
+}
+
+.footer-text {
+  margin: 0 0 15px 0;
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.footer-links {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+}
+
+.footer-link {
+  color: var(--secondary-color);
+  text-decoration: none;
+  font-size: 14px;
+  transition: color 0.3s;
+}
+
+.footer-link:hover {
+  color: var(--primary-color);
+  text-decoration: underline;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .button-group {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .btn {
+    width: 100%;
+    text-align: center;
+  }
+  
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .card-controls {
+    width: 100%;
+  }
+  
+  .logo-frame {
+    width: 120px;
+    height: 120px;
+  }
+  
+  .logo-image {
+    width: 100px;
+    height: 100px;
+  }
+} 
+
+/* 针对移动设备的响应式优化 */
+@media (max-width: 768px) {
+  body {
+    padding: 10px;
+  }
+  
+  .container {
+    padding: 10px;
+  }
+  
+  .card {
+    margin-bottom: 30px;
+  }
+  
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+    text-align: center;
+  }
+  
+  .card-controls {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .button-group {
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+  
+  /* 预览区域优化 */
+  .preview-content {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+  
+  .code-block {
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+  
+  .block-header {
+    padding: 6px 10px;
+  }
+  
+  /* 日志界面导航链接优化 */
+  .nav-links {
+    flex-direction: column;
+    gap: 10px;
+    align-items: stretch;
+  }
+  
+  .nav-links .btn {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+@media (max-width: 480px) {  
+  /* 特性卡片优化 */
+  .features-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  
+  /* 预览窗口优化 */
+  .preview-container {
+    flex-direction: column;
+  }
+  
+  .preview-window {
+    margin-bottom: 20px;
+    width: 100%;
+  }
+  
+  /* 技术栈列表小屏幕优化 */
+  .tech-item {
+    flex-wrap: wrap;
+  }
+  
+  .tech-desc {
+    width: 100%;
+    padding-left: 40px; /* 图标宽度+右边距 */
+    margin-top: 5px;
+  }
+  
+  /* 日志界面资源列表项优化 */
+  .asset-item {
+    flex-wrap: wrap;
+    padding: 15px 0;
+  }
+  
+  .asset-name {
+    width: 100%;
+    word-break: break-all;
+    margin-bottom: 10px;
+  }
+  
+  .asset-size {
+    order: 2;
+    margin-top: 10px;
+  }
+  
+  .download-btn {
+    order: 3;
+    margin-left: 0;
+    margin-top: 10px;
+    width: 100%;
+    text-align: center;
+    padding: 8px;
+  }
+  
+  /* 页脚链接优化 */
+  .footer {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .footer-links {
+    margin-top: 15px;
+    justify-content: center;
+  }
+} 

docs/index.html

@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>voidraft - An elegant text snippet recording tool designed for developers.</title>
+  <meta name="description" content="voidraft is an elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.">
+  <meta name="keywords" content="text editor, code snippets, developer tools, syntax highlighting, code formatting, multi-language, voidraft">
+  <meta name="author" content="voidraft Team">
+  <meta name="robots" content="index, follow">
+  <link rel="canonical" href="https://landaiqing.github.io/voidraft/">
+  
+  <!-- Internationalization / hreflang -->
+  <link rel="alternate" hreflang="en" href="https://landaiqing.github.io/voidraft/">
+  <link rel="alternate" hreflang="zh" href="https://landaiqing.github.io/voidraft/?lang=zh">
+  <link rel="alternate" hreflang="x-default" href="https://landaiqing.github.io/voidraft/">
+  
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://landaiqing.github.io/voidraft/">
+  <meta property="og:title" content="voidraft - An elegant text snippet recording tool designed for developers">
+  <meta property="og:description" content="voidraft is an elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.">
+  <meta property="og:image" content="https://landaiqing.github.io/voidraft/img/screenshot-dark.png">
+  <meta property="og:site_name" content="voidraft">
+  
+  <!-- Twitter -->
+  <meta property="twitter:card" content="summary_large_image">
+  <meta property="twitter:url" content="https://landaiqing.github.io/voidraft/">
+  <meta property="twitter:title" content="voidraft - An elegant text snippet recording tool designed for developers">
+  <meta property="twitter:description" content="voidraft is an elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.">
+  <meta property="twitter:image" content="https://landaiqing.github.io/voidraft/img/screenshot-dark.png">
+  
+  <link rel="stylesheet" href="./css/styles.css">
+  <link rel="icon" href="./img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  
+  <!-- Structured Data -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "SoftwareApplication",
+    "name": "voidraft",
+    "description": "An elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.",
+    "url": "https://landaiqing.github.io/voidraft/",
+    "downloadUrl": "https://github.com/landaiqing/voidraft/releases",
+    "author": {
+      "@type": "Organization",
+      "name": "voidraft"
+    },
+    "operatingSystem": ["Windows", "macOS", "Linux"],
+    "applicationCategory": "DeveloperApplication",
+    "offers": {
+      "@type": "Offer",
+      "price": "0",
+      "priceCurrency": "USD"
+    },
+    "screenshot": "https://landaiqing.github.io/voidraft/img/screenshot-dark.png",
+    "softwareVersion": "Latest",
+    "programmingLanguage": ["Go", "TypeScript", "Vue.js"],
+    "codeRepository": "https://github.com/landaiqing/voidraft"
+  }
+  </script>
+</head>
+<body class="theme-dark">
+  <div class="container">
+    <!-- 主卡片 -->
+    <div class="card">
+      <div class="card-header">
+        <h1 class="card-title">voidraft</h1>
+        <div class="card-controls">
+          <button id="theme-toggle" class="btn btn-secondary" title="切换主题">
+            <i class="fas fa-sun"></i> <span data-en="Theme" data-zh="主题">Theme</span>
+          </button>
+          <button id="lang-toggle" class="btn btn-secondary">
+            <i class="fas fa-language"></i> 中/EN
+          </button>
+        </div>
+      </div>
+      
+      <div class="card-content">
+        <!-- Logo和介绍 -->
+        <div class="logo-container">
+          <div class="logo-frame">
+            <img src="img/logo.png" alt="voidraft Logo" class="logo-image">
+          </div>
+          <h2 class="logo-text" data-en="voidraft" data-zh="voidraft">voidraft</h2>
+          <p class="tagline" data-en="An elegant text snippet recording tool" data-zh="优雅的文本片段记录工具">An elegant text snippet recording tool</p>
+        </div>
+        
+        <div class="intro-box">
+          <p class="intro-text" data-en="Designed for developers to record, organize, and manage various text snippets anytime, anywhere." data-zh="专为开发者打造，随时随地记录、整理和管理各种文本片段。">Designed for developers to record, organize, and manage various text snippets anytime, anywhere.</p>
+        </div>
+        
+        <div class="button-group">
+          <a href="https://github.com/landaiqing/voidraft/releases" class="btn" data-en="Download" data-zh="下载">
+            <i class="fas fa-download"></i> Download
+          </a>
+          <a href="https://github.com/landaiqing/voidraft" class="btn btn-secondary" data-en="Source Code" data-zh="源代码">
+            <i class="fab fa-github"></i> Source Code
+          </a>
+          <a href="changelog.html" class="btn btn-secondary" data-en="Changelog" data-zh="更新日志">
+            <i class="fas fa-history"></i> Changelog
+          </a>
+        </div>
+        
+        <!-- 特性部分 -->
+        <h2 data-en="Core Features" data-zh="核心特性">Core Features</h2>
+        
+        <div class="features-grid">
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-code"></i>
+            </div>
+            <h3 class="feature-title" data-en="Developer-Friendly" data-zh="开发者友好">Developer-Friendly</h3>
+            <p class="feature-desc" data-en="Multi-language code blocks with syntax highlighting for 30+ programming languages" data-zh="多语言代码块支持，为30+种编程语言提供语法高亮">Multi-language code blocks with syntax highlighting for 30+ programming languages</p>
+          </div>
+          
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-magic"></i>
+            </div>
+            <h3 class="feature-title" data-en="Code Formatting" data-zh="代码格式化">Code Formatting</h3>
+            <p class="feature-desc" data-en="Built-in Prettier support for one-click code beautification" data-zh="内置Prettier支持，一键美化代码">Built-in Prettier support for one-click code beautification</p>
+          </div>
+          
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-palette"></i>
+            </div>
+            <h3 class="feature-title" data-en="Custom Themes" data-zh="自定义主题">Custom Themes</h3>
+            <p class="feature-desc" data-en="Dark/Light themes with full customization options" data-zh="深色/浅色主题，支持完全自定义">Dark/Light themes with full customization options</p>
+          </div>
+          
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-clone"></i>
+            </div>
+            <h3 class="feature-title" data-en="Multi-Window" data-zh="多窗口支持">Multi-Window</h3>
+            <p class="feature-desc" data-en="Edit multiple documents simultaneously" data-zh="同时编辑多个文档">Edit multiple documents simultaneously</p>
+          </div>
+          
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-layer-group"></i>
+            </div>
+            <h3 class="feature-title" data-en="Block Editing" data-zh="块状编辑">Block Editing</h3>
+            <p class="feature-desc" data-en="Split content into independent code blocks with different language settings" data-zh="将内容分割为独立的代码块，每个块可设置不同语言">Split content into independent code blocks with different language settings</p>
+          </div>
+          
+          <div class="feature-card">
+            <div class="feature-icon">
+              <i class="fas fa-puzzle-piece"></i>
+            </div>
+            <h3 class="feature-title" data-en="Extensions" data-zh="丰富扩展">Extensions</h3>
+            <p class="feature-desc" data-en="Rainbow brackets, VSCode-style search, color picker, translation tool, and more" data-zh="彩虹括号、VSCode风格搜索、颜色选择器、翻译工具等多种扩展">Rainbow brackets, VSCode-style search, color picker, translation tool, and more</p>
+          </div>
+        </div>
+        
+        <!-- 预览部分 -->
+        <h2 data-en="Preview" data-zh="预览">Preview</h2>
+        
+        <div class="preview-container">
+          <div class="preview-window">
+            <div class="preview-header">
+              <div class="preview-controls">
+                <span class="preview-btn"></span>
+                <span class="preview-btn"></span>
+                <span class="preview-btn"></span>
+              </div>
+              <div class="preview-title">voidraft</div>
+            </div>
+            <div class="preview-content">
+              <div class="code-block-wrapper">
+                <div class="block-header">
+                  <div class="block-language">javascript</div>
+                </div>
+                <pre class="code-block">
+<span class="keyword">function</span> <span class="function">createDocument</span>() {
+  <span class="keyword">const</span> <span class="variable">doc</span> = <span class="keyword">new</span> <span class="class">Document</span>();
+  
+  <span class="variable">doc</span>.<span class="function">addCodeBlock</span>(<span class="string">'javascript'</span>, <span class="string">`
+  <span class="keyword">function</span> <span class="function">greeting</span>(<span class="parameter">name</span>) {
+    <span class="keyword">return</span> <span class="string">`Hello, </span>${<span class="parameter">name</span>}<span class="string">!`</span>;
+  }
+  
+  <span class="built-in">console</span>.<span class="function">log</span>(<span class="function">greeting</span>(<span class="string">'World'</span>));
+  `</span>);
+  
+  <span class="keyword">return</span> <span class="variable">doc</span>;
+}</pre>
+              </div>
+              
+              <div class="code-block-wrapper" style="margin-top: 10px;">
+                <div class="block-header">
+                  <div class="block-language">text</div>
+                </div>
+                <pre class="code-block">
+<span class="comment">// voidraft - An elegant text snippet recording tool</span>
+<span class="comment">// Multi-language support | Code formatting | Custom themes</span>
+<span class="comment">// A modern text editor designed for developers</span></pre>
+              </div>
+            </div>
+          </div>
+          <div class="preview-window">
+            <img src="img/screenshot-dark.png" alt="voidraft 界面预览" class="preview-image dark-theme-img">
+            <img src="img/screenshot-light.png" alt="voidraft 界面预览" class="preview-image light-theme-img" style="display: none;">
+          </div>
+        </div>
+        
+        <!-- 技术栈部分 -->
+        <h2 data-en="Technical Stack" data-zh="技术栈">Technical Stack</h2>
+        
+        <ul class="tech-list">
+          <li class="tech-item">
+            <div class="tech-icon"><i class="fas fa-desktop"></i></div>
+            <span class="tech-name">Wails3</span>
+            <span class="tech-desc" data-en="Cross-platform desktop application framework" data-zh="跨平台桌面应用框架">Cross-platform desktop application framework</span>
+          </li>
+          <li class="tech-item">
+            <div class="tech-icon"><i class="fas fa-cogs"></i></div>
+            <span class="tech-name">Go 1.21+</span>
+            <span class="tech-desc" data-en="Fast and efficient backend language" data-zh="快速高效的后端语言">Fast and efficient backend language</span>
+          </li>
+          <li class="tech-item">
+            <div class="tech-icon"><i class="fab fa-vuejs"></i></div>
+            <span class="tech-name">Vue 3 + TypeScript</span>
+            <span class="tech-desc" data-en="Modern frontend framework" data-zh="现代化前端框架">Modern frontend framework</span>
+          </li>
+          <li class="tech-item">
+            <div class="tech-icon"><i class="fas fa-edit"></i></div>
+            <span class="tech-name">CodeMirror 6</span>
+            <span class="tech-desc" data-en="Modern code editor with extension support" data-zh="支持扩展的现代化代码编辑器">Modern code editor with extension support</span>
+          </li>
+          <li class="tech-item">
+            <div class="tech-icon"><i class="fas fa-database"></i></div>
+            <span class="tech-name">SQLite</span>
+            <span class="tech-desc" data-en="Lightweight database for document storage" data-zh="轻量级文档存储数据库">Lightweight database for document storage</span>
+          </li>
+        </ul>
+      </div>
+      
+      <!-- 页脚 -->
+      <footer class="footer">
+        <p class="footer-text" data-en="© 2025 voidraft - An elegant text snippet recording tool designed for developers" data-zh="© 2025 voidraft - 专为开发者打造的优雅文本片段记录工具">© 2025 voidraft - An elegant text snippet recording tool designed for developers</p>
+        <div class="footer-links">
+          <a href="https://github.com/landaiqing/voidraft" target="_blank" class="footer-link">GitHub</a>
+          <a href="https://github.com/landaiqing/voidraft/issues" target="_blank" class="footer-link" data-en="Issues" data-zh="问题反馈">Issues</a>
+          <a href="https://github.com/landaiqing/voidraft/releases" target="_blank" class="footer-link" data-en="Releases" data-zh="版本发布">Releases</a>
+        </div>
+      </footer>
+    </div>
+  </div>
+
+  <script src="js/script.js"></script>
+</body>
+</html>

docs/js/changelog.js

@@ -0,0 +1,705 @@
+/**
+ * voidraft - Changelog Script
+ * 从GitHub API获取发布信息，支持Gitea备用源
+ */
+
+/**
+ * 仓库配置类
+ */
+class RepositoryConfig {
+  constructor() {
+    this.repos = {
+      github: {
+        owner: 'landaiqing',
+        name: 'voidraft',
+        apiUrl: 'https://api.github.com/repos/landaiqing/voidraft/releases',
+        releasesUrl: 'https://github.com/landaiqing/voidraft/releases'
+      },
+      gitea: {
+        owner: 'landaiqing',
+        name: 'voidraft',
+        domain: 'git.landaiqing.cn',
+        apiUrl: 'https://git.landaiqing.cn/api/v1/repos/landaiqing/voidraft/releases',
+        releasesUrl: 'https://git.landaiqing.cn/landaiqing/voidraft/releases'
+      }
+    };
+  }
+
+  /**
+   * 获取仓库配置
+   * @param {string} source - 'github' 或 'gitea'
+   */
+  getRepo(source) {
+    return this.repos[source];
+  }
+
+  /**
+   * 获取所有仓库配置
+   */
+  getAllRepos() {
+    return this.repos;
+  }
+}
+
+/**
+ * 国际化消息管理类
+ */
+class I18nMessages {
+  constructor() {
+    this.messages = {
+      loading: {
+        en: 'Loading releases...',
+        zh: '正在加载版本信息...'
+      },
+      noReleases: {
+        en: 'No release information found',
+        zh: '没有找到版本发布信息'
+      },
+      fetchError: {
+        en: 'Failed to load release information. Please try again later.',
+        zh: '无法获取版本信息，请稍后再试'
+      },
+      githubApiError: {
+        en: 'GitHub API returned an error status: ',
+        zh: 'GitHub API返回错误状态: '
+      },
+      giteaApiError: {
+        en: 'Gitea API returned an error status: ',
+        zh: 'Gitea API返回错误状态: '
+      },
+      dataSource: {
+        en: 'Data source: ',
+        zh: '数据来源: '
+      },
+      downloads: {
+        en: 'Downloads',
+        zh: '下载资源'
+      },
+      download: {
+        en: 'Download',
+        zh: '下载'
+      },
+      preRelease: {
+        en: 'Pre-release',
+        zh: '预发布'
+      }
+    };
+  }
+
+  /**
+   * 获取消息
+   * @param {string} key - 消息键
+   * @param {string} lang - 语言代码
+   */
+  getMessage(key, lang = 'en') {
+    return this.messages[key] && this.messages[key][lang] || this.messages[key]['en'] || '';
+  }
+
+  /**
+   * 获取当前语言
+   */
+  getCurrentLang() {
+    return window.currentLang || 'en';
+  }
+}
+
+/**
+ * API客户端类
+ */
+class APIClient {
+  constructor(repositoryConfig, i18nMessages) {
+    this.repositoryConfig = repositoryConfig;
+    this.i18nMessages = i18nMessages;
+  }
+
+  /**
+   * 从指定源获取发布信息
+   * @param {string} source - 'github' 或 'gitea'
+   */
+  async fetchReleases(source) {
+    const repo = this.repositoryConfig.getRepo(source);
+    const errorMessageKey = source === 'github' ? 'githubApiError' : 'giteaApiError';
+    
+    const options = {
+      headers: { 'Accept': 'application/json' }
+    };
+    
+    if (source === 'github') {
+      return this.fetchFromGitHub(repo, options, errorMessageKey);
+    } else {
+      return this.fetchFromGitea(repo, options, errorMessageKey);
+    }
+  }
+
+  /**
+   * 从GitHub获取数据
+   * @param {Object} repo - 仓库配置
+   * @param {Object} options - 请求选项
+   * @param {string} errorMessageKey - 错误消息键
+   */
+  async fetchFromGitHub(repo, options, errorMessageKey) {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000);
+    
+    options.signal = controller.signal;
+    options.headers['Accept'] = 'application/vnd.github.v3+json';
+    
+    try {
+      const response = await fetch(repo.apiUrl, options);
+      clearTimeout(timeoutId);
+      
+      if (!response.ok) {
+        throw new Error(`${this.i18nMessages.getMessage(errorMessageKey, this.i18nMessages.getCurrentLang())}${response.status}`);
+      }
+      
+      const releases = await response.json();
+      
+      if (!releases || releases.length === 0) {
+        throw new Error(this.i18nMessages.getMessage('noReleases', this.i18nMessages.getCurrentLang()));
+      }
+      
+      return releases;
+    } catch (error) {
+      clearTimeout(timeoutId);
+      throw error;
+    }
+  }
+
+  /**
+   * 从Gitea获取数据
+   * @param {Object} repo - 仓库配置
+   * @param {Object} options - 请求选项
+   * @param {string} errorMessageKey - 错误消息键
+   */
+  async fetchFromGitea(repo, options, errorMessageKey) {
+    const response = await fetch(repo.apiUrl, options);
+    
+    if (!response.ok) {
+      throw new Error(`${this.i18nMessages.getMessage(errorMessageKey, this.i18nMessages.getCurrentLang())}${response.status}`);
+    }
+    
+    const releases = await response.json();
+    
+    if (!releases || releases.length === 0) {
+      throw new Error(this.i18nMessages.getMessage('noReleases', this.i18nMessages.getCurrentLang()));
+    }
+    
+    return releases;
+  }
+}
+  
+/**
+ * UI管理类
+ */
+class UIManager {
+   constructor(i18nMessages) {
+     this.i18nMessages = i18nMessages;
+     this.elements = {
+       loading: document.getElementById('loading'),
+       changelog: document.getElementById('changelog'),
+       error: document.getElementById('error-message')
+     };
+   }
+
+  /**
+   * 显示加载状态
+   */
+  showLoading() {
+    this.elements.loading.style.display = 'block';
+    this.elements.error.style.display = 'none';
+    this.elements.changelog.innerHTML = '';
+  }
+
+  /**
+   * 隐藏加载状态
+   */
+  hideLoading() {
+    this.elements.loading.style.display = 'none';
+  }
+
+  /**
+   * 显示错误消息
+   * @param {string} message - 错误消息
+   */
+  showError(message) {
+    const errorMessageElement = this.elements.error.querySelector('p');
+    if (errorMessageElement) {
+      errorMessageElement.textContent = message;
+    } else {
+      this.elements.error.textContent = message;
+    }
+    this.elements.error.style.display = 'block';
+    this.hideLoading();
+  }
+
+  /**
+   * 显示发布信息
+   * @param {Array} releases - 发布信息数组
+   * @param {string} source - 数据源
+   */
+  displayReleases(releases, source) {
+    this.hideLoading();
+    
+    // 清除现有内容
+    this.elements.changelog.innerHTML = '';
+    
+    // 创建数据源元素
+    const sourceElement = this.createSourceElement(source);
+    this.elements.changelog.appendChild(sourceElement);
+    
+    // 创建发布信息元素
+    releases.forEach(release => {
+      const releaseElement = this.createReleaseElement(release, source);
+      this.elements.changelog.appendChild(releaseElement);
+    });
+    
+    this.elements.changelog.style.display = 'block';
+  }
+
+  /**
+   * 创建数据源元素
+   * @param {string} source - 数据源
+   */
+  createSourceElement(source) {
+    const sourceElement = document.createElement('div');
+    sourceElement.className = 'data-source';
+    
+    // 创建带有国际化支持的源标签
+    const sourceLabel = document.createElement('span');
+    sourceLabel.setAttribute('data-en', this.i18nMessages.getMessage('dataSource', 'en'));
+    sourceLabel.setAttribute('data-zh', this.i18nMessages.getMessage('dataSource', 'zh'));
+    sourceLabel.textContent = this.i18nMessages.getMessage('dataSource', this.i18nMessages.getCurrentLang());
+    
+    // 创建链接
+     const sourceLink = document.createElement('a');
+     const repositoryConfig = new RepositoryConfig();
+     sourceLink.href = repositoryConfig.getRepo(source).releasesUrl;
+     sourceLink.textContent = source === 'github' ? 'GitHub' : 'Gitea';
+     sourceLink.target = '_blank';
+    
+    // 组装元素
+    sourceElement.appendChild(sourceLabel);
+    sourceElement.appendChild(sourceLink);
+    
+    return sourceElement;
+  }
+  
+  /**
+   * 创建发布信息元素
+   * @param {Object} release - 发布信息对象
+   * @param {string} source - 数据源
+   */
+  createReleaseElement(release, source) {
+    const releaseElement = document.createElement('div');
+    releaseElement.className = 'release';
+    
+    // 格式化发布日期
+    const releaseDate = new Date(release.published_at || release.created_at);
+    const formattedDate = DateFormatter.formatDate(releaseDate);
+    
+    // 创建头部
+    const headerElement = this.createReleaseHeader(release, formattedDate);
+    releaseElement.appendChild(headerElement);
+    
+    // 添加发布说明
+    if (release.body) {
+      const descriptionElement = document.createElement('div');
+      descriptionElement.className = 'release-description markdown-content';
+      descriptionElement.innerHTML = MarkdownParser.parseMarkdown(release.body);
+      releaseElement.appendChild(descriptionElement);
+    }
+    
+    // 添加下载资源
+    const assets = AssetManager.getAssetsFromRelease(release, source);
+    if (assets && assets.length > 0) {
+      const assetsElement = this.createAssetsElement(assets);
+      releaseElement.appendChild(assetsElement);
+    }
+    
+    return releaseElement;
+  }
+  
+  /**
+   * 创建发布信息头部
+   */
+  createReleaseHeader(release, formattedDate) {
+    const headerElement = document.createElement('div');
+    headerElement.className = 'release-header';
+    
+    // 版本元素
+    const versionElement = document.createElement('div');
+    versionElement.className = 'release-version';
+    
+    // 版本文本
+    const versionText = document.createElement('span');
+    versionText.textContent = release.name || release.tag_name;
+    versionElement.appendChild(versionText);
+    
+    // 预发布标记
+    if (release.prerelease) {
+      const preReleaseTag = document.createElement('span');
+      preReleaseTag.className = 'release-badge pre-release';
+      preReleaseTag.setAttribute('data-en', this.i18nMessages.getMessage('preRelease', 'en'));
+      preReleaseTag.setAttribute('data-zh', this.i18nMessages.getMessage('preRelease', 'zh'));
+      preReleaseTag.textContent = this.i18nMessages.getMessage('preRelease', this.i18nMessages.getCurrentLang());
+      versionElement.appendChild(preReleaseTag);
+    }
+    
+    // 日期元素
+    const dateElement = document.createElement('div');
+    dateElement.className = 'release-date';
+    dateElement.textContent = formattedDate;
+    
+    headerElement.appendChild(versionElement);
+    headerElement.appendChild(dateElement);
+    
+    return headerElement;
+  }
+  
+  /**
+   * 创建资源文件元素
+   * @param {Array} assets - 资源文件数组
+   */
+  createAssetsElement(assets) {
+    const assetsElement = document.createElement('div');
+    assetsElement.className = 'release-assets';
+    
+    // 资源标题
+    const assetsTitle = document.createElement('div');
+    assetsTitle.className = 'release-assets-title';
+    assetsTitle.setAttribute('data-en', this.i18nMessages.getMessage('downloads', 'en'));
+    assetsTitle.setAttribute('data-zh', this.i18nMessages.getMessage('downloads', 'zh'));
+    assetsTitle.textContent = this.i18nMessages.getMessage('downloads', this.i18nMessages.getCurrentLang());
+    
+    // 资源列表
+    const assetList = document.createElement('ul');
+    assetList.className = 'asset-list';
+    
+    // 添加每个资源
+    assets.forEach(asset => {
+      const assetItem = this.createAssetItem(asset);
+      assetList.appendChild(assetItem);
+    });
+    
+    assetsElement.appendChild(assetsTitle);
+    assetsElement.appendChild(assetList);
+    
+    return assetsElement;
+  }
+  
+  /**
+   * 创建资源文件项
+   * @param {Object} asset - 资源文件对象
+   */
+  createAssetItem(asset) {
+    const assetItem = document.createElement('li');
+    assetItem.className = 'asset-item';
+    
+    // 文件图标
+    const iconElement = document.createElement('i');
+    iconElement.className = `asset-icon fas fa-${FileIconHelper.getFileIcon(asset.name)}`;
+    
+    // 文件名
+    const nameElement = document.createElement('span');
+    nameElement.className = 'asset-name';
+    nameElement.textContent = asset.name;
+    
+    // 文件大小
+    const sizeElement = document.createElement('span');
+    sizeElement.className = 'asset-size';
+    sizeElement.textContent = FileSizeFormatter.formatFileSize(asset.size);
+    
+    // 下载链接
+    const downloadLink = document.createElement('a');
+    downloadLink.className = 'download-btn';
+    downloadLink.href = asset.browser_download_url;
+    downloadLink.target = '_blank';
+    downloadLink.setAttribute('data-en', this.i18nMessages.getMessage('download', 'en'));
+    downloadLink.setAttribute('data-zh', this.i18nMessages.getMessage('download', 'zh'));
+    downloadLink.textContent = this.i18nMessages.getMessage('download', this.i18nMessages.getCurrentLang());
+    
+    // 组装资源项
+    assetItem.appendChild(iconElement);
+    assetItem.appendChild(nameElement);
+    assetItem.appendChild(sizeElement);
+    assetItem.appendChild(downloadLink);
+    
+    return assetItem;
+  }
+}
+  
+/**
+ * 资源管理器类
+ */
+class AssetManager {
+  /**
+   * 从发布信息中获取资源文件
+   * @param {Object} release - 发布信息对象
+   * @param {string} source - 数据源
+   */
+  static getAssetsFromRelease(release, source) {
+    let assets = [];
+    
+    if (source === 'github') {
+      assets = release.assets || [];
+    } else { // Gitea
+      assets = release.assets || [];
+      // 检查Gitea特定的资源结构
+      if (!assets.length && release.attachments) {
+        assets = release.attachments.map(attachment => ({
+          name: attachment.name,
+          size: attachment.size,
+          browser_download_url: attachment.browser_download_url
+        }));
+      }
+    }
+    
+    return assets;
+  }
+}
+
+/**
+ * 文件图标助手类
+ */
+class FileIconHelper {
+  /**
+   * 根据文件扩展名获取图标
+   * @param {string} filename - 文件名
+   */
+  static getFileIcon(filename) {
+    const extension = filename.split('.').pop().toLowerCase();
+    
+    const iconMap = {
+      'exe': 'download',
+      'msi': 'download',
+      'dmg': 'download',
+      'pkg': 'download',
+      'deb': 'download',
+      'rpm': 'download',
+      'tar': 'file-archive',
+      'gz': 'file-archive',
+      'zip': 'file-archive',
+      '7z': 'file-archive',
+      'rar': 'file-archive',
+      'pdf': 'file-pdf',
+      'txt': 'file-alt',
+      'md': 'file-alt',
+      'json': 'file-code',
+      'xml': 'file-code',
+      'yml': 'file-code',
+      'yaml': 'file-code'
+    };
+    
+    return iconMap[extension] || 'file';
+  }
+}
+
+/**
+ * 文件大小格式化器类
+ */
+class FileSizeFormatter {
+  /**
+   * 格式化文件大小
+   * @param {number} bytes - 字节数
+   */
+  static formatFileSize(bytes) {
+    if (!bytes) return '';
+    
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    
+    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
+  }
+}
+
+/**
+ * 日期格式化器类
+ */
+class DateFormatter {
+  /**
+   * 格式化日期
+   * @param {Date} date - 日期对象
+   */
+  static formatDate(date) {
+    const options = {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    };
+    
+    const lang = window.currentLang || 'en';
+    const locale = lang === 'zh' ? 'zh-CN' : 'en-US';
+    
+    return date.toLocaleDateString(locale, options);
+  }
+}
+
+/**
+ * Markdown解析器类
+ */
+class MarkdownParser {
+  /**
+   * 简单的Markdown解析
+   * @param {string} markdown - Markdown文本
+   */
+  static parseMarkdown(markdown) {
+    if (!markdown) return '';
+    
+    // 预处理：保留原始换行符，用特殊标记替换
+    const preservedLineBreaks = '___LINE_BREAK___';
+    markdown = markdown.replace(/\n/g, preservedLineBreaks);
+    
+    // 引用块 - > text
+    markdown = markdown.replace(/&gt;\s*(.*?)(?=&gt;|$)/g, '<blockquote>$1</blockquote>');
+    markdown = markdown.replace(/>\s*(.*?)(?=>|$)/g, '<blockquote>$1</blockquote>');
+    
+    // 链接 - [text](url)
+    markdown = markdown.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+    
+    // 标题 - # Heading
+    markdown = markdown.replace(/^### (.*?)(?=___LINE_BREAK___|$)/gm, '<h3>$1</h3>');
+    markdown = markdown.replace(/^## (.*?)(?=___LINE_BREAK___|$)/gm, '<h2>$1</h2>');
+    markdown = markdown.replace(/^# (.*?)(?=___LINE_BREAK___|$)/gm, '<h1>$1</h1>');
+    
+    // 粗体 - **text**
+    markdown = markdown.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    
+    // 斜体 - *text*
+    markdown = markdown.replace(/\*(.*?)\*/g, '<em>$1</em>');
+    
+    // 代码块 - ```code```
+    markdown = markdown.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
+    
+    // 行内代码 - `code`
+    markdown = markdown.replace(/`([^`]+)`/g, '<code>$1</code>');
+    
+    // 处理列表项
+    // 先将每个列表项转换为HTML
+    markdown = markdown.replace(/- (.*?)(?=___LINE_BREAK___- |___LINE_BREAK___$|$)/g, '<li>$1</li>');
+    markdown = markdown.replace(/\* (.*?)(?=___LINE_BREAK___\* |___LINE_BREAK___$|$)/g, '<li>$1</li>');
+    markdown = markdown.replace(/\d+\. (.*?)(?=___LINE_BREAK___\d+\. |___LINE_BREAK___$|$)/g, '<li>$1</li>');
+    
+    // 然后将连续的列表项包装在ul或ol中
+    const listItemRegex = /<li>.*?<\/li>/g;
+    const listItems = markdown.match(listItemRegex) || [];
+    
+    if (listItems.length > 0) {
+      // 将连续的列表项组合在一起
+      let lastIndex = 0;
+      let result = '';
+      let inList = false;
+      
+      listItems.forEach(item => {
+        const itemIndex = markdown.indexOf(item, lastIndex);
+        
+        // 添加列表项之前的内容
+        if (itemIndex > lastIndex) {
+          result += markdown.substring(lastIndex, itemIndex);
+        }
+        
+        // 如果不在列表中，开始一个新列表
+        if (!inList) {
+          result += '<ul>';
+          inList = true;
+        }
+        
+        // 添加列表项
+        result += item;
+        
+        // 更新lastIndex
+        lastIndex = itemIndex + item.length;
+        
+        // 检查下一个内容是否是列表项
+        const nextItemIndex = markdown.indexOf('<li>', lastIndex);
+        if (nextItemIndex === -1 || nextItemIndex > lastIndex + 20) { // 如果下一个列表项不紧邻
+          result += '</ul>';
+          inList = false;
+        }
+      });
+      
+      // 添加剩余内容
+      if (lastIndex < markdown.length) {
+        result += markdown.substring(lastIndex);
+      }
+      
+      markdown = result;
+    }
+    
+    // 处理水平分隔线
+    markdown = markdown.replace(/---/g, '<hr>');
+    
+    // 恢复换行符
+    markdown = markdown.replace(/___LINE_BREAK___/g, '<br>');
+    
+    // 处理段落
+    markdown = markdown.replace(/<br><br>/g, '</p><p>');
+    
+    // 包装在段落标签中
+    if (!markdown.startsWith('<p>')) {
+      markdown = `<p>${markdown}</p>`;
+    }
+    
+    return markdown;
+  }
+}
+
+/**
+ * 更新日志主应用类
+ */
+class ChangelogApp {
+  constructor() {
+    this.repositoryConfig = new RepositoryConfig();
+    this.i18nMessages = new I18nMessages();
+    this.apiClient = new APIClient(this.repositoryConfig, this.i18nMessages);
+    this.uiManager = new UIManager(this.i18nMessages);
+    
+    this.init();
+  }
+
+  /**
+   * 初始化应用
+   */
+  init() {
+    this.uiManager.showLoading();
+    
+    // 首先尝试GitHub API
+    this.apiClient.fetchReleases('github')
+      .then(releases => {
+        this.uiManager.displayReleases(releases, 'github');
+      })
+      .catch(() => {
+        // GitHub失败时尝试Gitea
+        return this.apiClient.fetchReleases('gitea')
+          .then(releases => {
+            this.uiManager.displayReleases(releases, 'gitea');
+          });
+      })
+      .catch(error => {
+        console.error('获取发布信息失败:', error);
+        this.uiManager.showError(this.i18nMessages.getMessage('fetchError', this.i18nMessages.getCurrentLang()));
+      });
+    
+    // 监听语言变化事件
+    document.addEventListener('languageChanged', () => this.updateUI());
+  }
+
+  /**
+   * 更新UI元素（当语言变化时）
+   */
+  updateUI() {
+    const elementsToUpdate = document.querySelectorAll('[data-en][data-zh]');
+    const currentLang = this.i18nMessages.getCurrentLang();
+    
+    elementsToUpdate.forEach(element => {
+      const text = element.getAttribute(`data-${currentLang}`);
+      if (text) {
+        element.textContent = text;
+      }
+    });
+  }
+}
+
+// 当DOM加载完成时初始化应用
+document.addEventListener('DOMContentLoaded', () => {
+  new ChangelogApp();
+});

docs/js/script.js

@@ -0,0 +1,443 @@
+/**
+ * voidraft - Website Script
+ */
+
+/**
+ * 主题管理类
+ */
+class ThemeManager {
+  constructor() {
+    this.themeToggle = document.getElementById('theme-toggle');
+    this.currentTheme = this.getInitialTheme();
+    this.init();
+  }
+
+  /**
+   * 获取初始主题
+   */
+  getInitialTheme() {
+    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+    const savedTheme = localStorage.getItem('theme');
+    return savedTheme || (prefersDarkScheme.matches ? 'dark' : 'light');
+  }
+
+  /**
+   * 初始化主题管理器
+   */
+  init() {
+    if (!this.themeToggle) return;
+    
+    this.setTheme(this.currentTheme);
+    this.bindEvents();
+  }
+
+  /**
+   * 绑定事件
+   */
+  bindEvents() {
+    this.themeToggle.addEventListener('click', () => {
+      this.toggleTheme();
+    });
+  }
+
+  /**
+   * 切换主题
+   */
+  toggleTheme() {
+    document.body.classList.add('theme-transition');
+    
+    const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
+    this.setTheme(newTheme);
+    this.saveTheme(newTheme);
+    
+    setTimeout(() => document.body.classList.remove('theme-transition'), 300);
+  }
+
+  /**
+   * 设置主题
+   * @param {string} theme - 'dark' 或 'light'
+   */
+  setTheme(theme) {
+    this.currentTheme = theme;
+    const isDark = theme === 'dark';
+    
+    document.body.classList.toggle('theme-dark', isDark);
+    document.body.classList.toggle('theme-light', !isDark);
+    
+    this.updateToggleIcon(isDark);
+  }
+
+  /**
+   * 更新切换按钮图标
+   * @param {boolean} isDark - 是否为暗色主题
+   */
+  updateToggleIcon(isDark) {
+    if (this.themeToggle) {
+      const icon = this.themeToggle.querySelector('i');
+      if (icon) {
+        icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
+      }
+    }
+  }
+
+  /**
+   * 保存主题到本地存储
+   * @param {string} theme - 主题名称
+   */
+  saveTheme(theme) {
+    localStorage.setItem('theme', theme);
+  }
+}
+
+/**
+ * 语言管理类
+ */
+class LanguageManager {
+  constructor() {
+    this.langToggle = document.getElementById('lang-toggle');
+    this.currentLang = this.getInitialLanguage();
+    this.init();
+  }
+
+  /**
+   * 获取初始语言
+   */
+  getInitialLanguage() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const urlLang = urlParams.get('lang');
+    const savedLang = localStorage.getItem('lang');
+    const browserLang = navigator.language.startsWith('zh') ? 'zh' : 'en';
+    return urlLang || savedLang || browserLang;
+  }
+
+  /**
+   * 初始化语言管理器
+   */
+  init() {
+    if (!this.langToggle) return;
+    
+    window.currentLang = this.currentLang;
+    this.setLanguage(this.currentLang);
+    this.bindEvents();
+  }
+
+  /**
+   * 绑定事件
+   */
+  bindEvents() {
+    this.langToggle.addEventListener('click', () => {
+      this.toggleLanguage();
+    });
+  }
+
+  /**
+   * 切换语言
+   */
+  toggleLanguage() {
+    document.body.classList.add('lang-transition');
+    
+    const newLang = this.currentLang === 'zh' ? 'en' : 'zh';
+    this.setLanguage(newLang);
+    this.saveLanguage(newLang);
+    this.updateURL(newLang);
+    this.notifyLanguageChange(newLang);
+    
+    setTimeout(() => document.body.classList.remove('lang-transition'), 300);
+  }
+
+  /**
+   * 设置页面语言
+   * @param {string} lang - 'zh' 或 'en'
+   */
+  setLanguage(lang) {
+    this.currentLang = lang;
+    window.currentLang = lang;
+    
+    this.updatePageElements(lang);
+    this.updateHTMLLang(lang);
+    this.updateToggleButton(lang);
+  }
+
+  /**
+   * 更新页面元素文本
+   * @param {string} lang - 语言代码
+   */
+  updatePageElements(lang) {
+    document.querySelectorAll('[data-zh][data-en]').forEach(el => {
+      el.textContent = el.getAttribute(`data-${lang}`);
+    });
+  }
+
+  /**
+   * 更新HTML语言属性
+   * @param {string} lang - 语言代码
+   */
+  updateHTMLLang(lang) {
+    document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en';
+  }
+
+  /**
+   * 更新切换按钮文本
+   * @param {string} lang - 语言代码
+   */
+  updateToggleButton(lang) {
+    if (this.langToggle) {
+      const text = lang === 'zh' ? 'EN/中' : '中/EN';
+      this.langToggle.innerHTML = `<i class="fas fa-language"></i> ${text}`;
+    }
+  }
+
+  /**
+   * 保存语言到本地存储
+   * @param {string} lang - 语言代码
+   */
+  saveLanguage(lang) {
+    localStorage.setItem('lang', lang);
+  }
+
+  /**
+   * 更新URL参数
+   * @param {string} lang - 语言代码
+   */
+  updateURL(lang) {
+    const newUrl = new URL(window.location);
+    if (lang === 'zh') {
+      newUrl.searchParams.set('lang', 'zh');
+    } else {
+      newUrl.searchParams.delete('lang');
+    }
+    window.history.replaceState({}, '', newUrl);
+  }
+
+  /**
+   * 通知语言变更
+   * @param {string} lang - 语言代码
+   */
+  notifyLanguageChange(lang) {
+    window.dispatchEvent(new CustomEvent('languageChanged', { detail: { lang } }));
+  }
+
+  /**
+   * 获取当前语言
+   */
+  getCurrentLanguage() {
+    return this.currentLang;
+  }
+}
+
+/**
+ * SEO管理类
+ */
+class SEOManager {
+  constructor(languageManager) {
+    this.languageManager = languageManager;
+    this.metaTexts = {
+      en: {
+        description: 'voidraft is an elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.',
+        title: 'voidraft - An elegant text snippet recording tool designed for developers.',
+        ogTitle: 'voidraft - An elegant text snippet recording tool designed for developers'
+      },
+      zh: {
+        description: 'voidraft 是专为开发者打造的优雅文本片段记录工具。支持多语言代码块、语法高亮、代码格式化、自定义主题等功能。',
+        title: 'voidraft - 专为开发者打造的优雅文本片段记录工具',
+        ogTitle: 'voidraft - 专为开发者打造的优雅文本片段记录工具'
+      }
+    };
+    this.init();
+  }
+
+  /**
+   * 初始化SEO管理器
+   */
+  init() {
+    this.bindEvents();
+    this.updateMetaTags(this.languageManager.getCurrentLanguage());
+  }
+
+  /**
+   * 绑定事件
+   */
+  bindEvents() {
+    window.addEventListener('languageChanged', (event) => {
+      this.updateMetaTags(event.detail.lang);
+    });
+  }
+
+  /**
+   * 更新SEO元标签
+   * @param {string} lang - 当前语言
+   */
+  updateMetaTags(lang) {
+    const texts = this.metaTexts[lang];
+    
+    this.updateMetaDescription(texts.description);
+    this.updateOpenGraphTags(texts.ogTitle, texts.description);
+    this.updateTwitterCardTags(texts.ogTitle, texts.description);
+    this.updatePageTitle(texts.title);
+  }
+
+  /**
+   * 更新meta描述
+   * @param {string} description - 描述文本
+   */
+  updateMetaDescription(description) {
+    const metaDesc = document.querySelector('meta[name="description"]');
+    if (metaDesc) {
+      metaDesc.content = description;
+    }
+  }
+
+  /**
+   * 更新Open Graph标签
+   * @param {string} title - 标题
+   * @param {string} description - 描述
+   */
+  updateOpenGraphTags(title, description) {
+    const ogTitle = document.querySelector('meta[property="og:title"]');
+    const ogDesc = document.querySelector('meta[property="og:description"]');
+    
+    if (ogTitle) ogTitle.content = title;
+    if (ogDesc) ogDesc.content = description;
+  }
+
+  /**
+   * 更新Twitter Card标签
+   * @param {string} title - 标题
+   * @param {string} description - 描述
+   */
+  updateTwitterCardTags(title, description) {
+    const twitterTitle = document.querySelector('meta[property="twitter:title"]');
+    const twitterDesc = document.querySelector('meta[property="twitter:description"]');
+    
+    if (twitterTitle) twitterTitle.content = title;
+    if (twitterDesc) twitterDesc.content = description;
+  }
+
+  /**
+   * 更新页面标题
+   * @param {string} title - 标题
+   */
+  updatePageTitle(title) {
+    document.title = title;
+  }
+}
+
+/**
+ * UI效果管理类
+ */
+class UIEffects {
+  constructor() {
+    this.init();
+  }
+
+  /**
+   * 初始化UI效果
+   */
+  init() {
+    this.initCardEffects();
+  }
+
+  /**
+   * 初始化卡片悬停效果
+   */
+  initCardEffects() {
+    const cards = document.querySelectorAll('.feature-card');
+    
+    cards.forEach(card => {
+      card.addEventListener('mouseenter', () => {
+        this.animateCardHover(card, true);
+      });
+      
+      card.addEventListener('mouseleave', () => {
+        this.animateCardHover(card, false);
+      });
+    });
+  }
+
+  /**
+   * 卡片悬停动画
+   * @param {Element} card - 卡片元素
+   * @param {boolean} isHover - 是否悬停
+   */
+  animateCardHover(card, isHover) {
+    if (isHover) {
+      card.style.transform = 'translateY(-8px)';
+      card.style.boxShadow = '7px 7px 0 var(--shadow-color)';
+    } else {
+      card.style.transform = 'translateY(0)';
+      card.style.boxShadow = '5px 5px 0 var(--shadow-color)';
+    }
+  }
+}
+
+/**
+ * voidraft主应用类
+ */
+class voidraftApp {
+  constructor() {
+    this.themeManager = null;
+    this.languageManager = null;
+    this.seoManager = null;
+    this.uiEffects = null;
+    this.init();
+  }
+
+  /**
+   * 初始化应用
+   */
+  init() {
+    this.initializeManagers();
+    this.showConsoleBranding();
+  }
+
+  /**
+   * 初始化各个管理器
+   */
+  initializeManagers() {
+    this.themeManager = new ThemeManager();
+    this.languageManager = new LanguageManager();
+    this.seoManager = new SEOManager(this.languageManager);
+    this.uiEffects = new UIEffects();
+  }
+
+  /**
+   * 显示控制台品牌信息
+   */
+  showConsoleBranding() {
+    console.log('%c voidraft', 'color: #ff006e; font-size: 20px; font-family: "Space Mono", monospace;');
+    console.log('%c An elegant text snippet recording tool designed for developers.', 'color: #073B4C; font-family: "Space Mono", monospace;');
+  }
+
+  /**
+   * 获取主题管理器
+   */
+  getThemeManager() {
+    return this.themeManager;
+  }
+
+  /**
+   * 获取语言管理器
+   */
+  getLanguageManager() {
+    return this.languageManager;
+  }
+
+  /**
+   * 获取SEO管理器
+   */
+  getSEOManager() {
+    return this.seoManager;
+  }
+
+  /**
+   * 获取UI效果管理器
+   */
+  getUIEffects() {
+    return this.uiEffects;
+  }
+}
+
+// 当DOM加载完成时初始化应用
+document.addEventListener('DOMContentLoaded', () => {
+  window.voidRaftApp = new voidraftApp();
+});

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/badge/badgeservice.ts

@@ -0,0 +1,64 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * Service represents the notifications service
+ * @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 "../../application/models.js";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as $models from "./models.js";
+
+/**
+ * RemoveBadge removes the badge label from the application icon.
+ */
+export function RemoveBadge(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2374916939) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceName returns the name of the service.
+ */
+export function ServiceName(): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2428202016) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown is called when the service is unloaded.
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3893755233) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup is called when the service is loaded.
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4078800764, options) as any;
+    return $resultPromise;
+}
+
+/**
+ * SetBadge sets the badge label on the application icon.
+ */
+export function SetBadge(label: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(784276339, label) as any;
+    return $resultPromise;
+}
+
+export function SetCustomBadge(label: string, options: $models.Options): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3058653106, label, options) as any;
+    return $resultPromise;
+}

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

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

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

@@ -0,0 +1,58 @@
+// 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 color$0 from "../../../../../../../image/color/models.js";
+
+export class Options {
+    "TextColour": color$0.RGBA;
+    "BackgroundColour": color$0.RGBA;
+    "FontName": string;
+    "FontSize": number;
+    "SmallFontSize": number;
+
+    /** Creates a new Options instance. */
+    constructor($$source: Partial<Options> = {}) {
+        if (!("TextColour" in $$source)) {
+            this["TextColour"] = (new color$0.RGBA());
+        }
+        if (!("BackgroundColour" in $$source)) {
+            this["BackgroundColour"] = (new color$0.RGBA());
+        }
+        if (!("FontName" in $$source)) {
+            this["FontName"] = "";
+        }
+        if (!("FontSize" in $$source)) {
+            this["FontSize"] = 0;
+        }
+        if (!("SmallFontSize" in $$source)) {
+            this["SmallFontSize"] = 0;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new Options instance from a string or object.
+     */
+    static createFrom($$source: any = {}): Options {
+        const $$createField0_0 = $$createType0;
+        const $$createField1_0 = $$createType0;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("TextColour" in $$parsedSource) {
+            $$parsedSource["TextColour"] = $$createField0_0($$parsedSource["TextColour"]);
+        }
+        if ("BackgroundColour" in $$parsedSource) {
+            $$parsedSource["BackgroundColour"] = $$createField1_0($$parsedSource["BackgroundColour"]);
+        }
+        return new Options($$parsedSource as Partial<Options>);
+    }
+}
+
+// Private type creation functions
+const $$createType0 = color$0.RGBA.createFrom;

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

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

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

@@ -0,0 +1,107 @@
+// 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";
+
+/**
+ * NotificationAction represents an action button for a notification.
+ */
+export class NotificationAction {
+    "id"?: string;
+    "title"?: string;
+
+    /**
+     * (macOS-specific)
+     */
+    "destructive"?: boolean;
+
+    /** Creates a new NotificationAction instance. */
+    constructor($$source: Partial<NotificationAction> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new NotificationAction instance from a string or object.
+     */
+    static createFrom($$source: any = {}): NotificationAction {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new NotificationAction($$parsedSource as Partial<NotificationAction>);
+    }
+}
+
+/**
+ * NotificationCategory groups actions for notifications.
+ */
+export class NotificationCategory {
+    "id"?: string;
+    "actions"?: NotificationAction[];
+    "hasReplyField"?: boolean;
+    "replyPlaceholder"?: string;
+    "replyButtonTitle"?: string;
+
+    /** Creates a new NotificationCategory instance. */
+    constructor($$source: Partial<NotificationCategory> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new NotificationCategory instance from a string or object.
+     */
+    static createFrom($$source: any = {}): NotificationCategory {
+        const $$createField1_0 = $$createType1;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("actions" in $$parsedSource) {
+            $$parsedSource["actions"] = $$createField1_0($$parsedSource["actions"]);
+        }
+        return new NotificationCategory($$parsedSource as Partial<NotificationCategory>);
+    }
+}
+
+/**
+ * NotificationOptions contains configuration for a notification
+ */
+export class NotificationOptions {
+    "id": string;
+    "title": string;
+
+    /**
+     * (macOS and Linux only)
+     */
+    "subtitle"?: string;
+    "body"?: string;
+    "categoryId"?: string;
+    "data"?: { [_: string]: any };
+
+    /** Creates a new NotificationOptions instance. */
+    constructor($$source: Partial<NotificationOptions> = {}) {
+        if (!("id" in $$source)) {
+            this["id"] = "";
+        }
+        if (!("title" in $$source)) {
+            this["title"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new NotificationOptions instance from a string or object.
+     */
+    static createFrom($$source: any = {}): NotificationOptions {
+        const $$createField5_0 = $$createType2;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("data" in $$parsedSource) {
+            $$parsedSource["data"] = $$createField5_0($$parsedSource["data"]);
+        }
+        return new NotificationOptions($$parsedSource as Partial<NotificationOptions>);
+    }
+}
+
+// Private type creation functions
+const $$createType0 = NotificationAction.createFrom;
+const $$createType1 = $Create.Array($$createType0);
+const $$createType2 = $Create.Map($Create.Any, $Create.Any);

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/notifications/notificationservice.ts

@@ -0,0 +1,110 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * Service represents the notifications service
+ * @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 "../../application/models.js";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as $models from "./models.js";
+
+export function CheckNotificationAuthorization(): Promise<boolean> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2216952893) as any;
+    return $resultPromise;
+}
+
+/**
+ * OnNotificationResponse registers a callback function that will be called when
+ * a notification response is received from the user.
+ */
+export function OnNotificationResponse(callback: any): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1642697808, callback) as any;
+    return $resultPromise;
+}
+
+export function RegisterNotificationCategory(category: $models.NotificationCategory): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2917562919, category) as any;
+    return $resultPromise;
+}
+
+export function RemoveAllDeliveredNotifications(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3956282340) as any;
+    return $resultPromise;
+}
+
+export function RemoveAllPendingNotifications(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(108821341) as any;
+    return $resultPromise;
+}
+
+export function RemoveDeliveredNotification(identifier: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(975691940, identifier) as any;
+    return $resultPromise;
+}
+
+export function RemoveNotification(identifier: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3966653866, identifier) as any;
+    return $resultPromise;
+}
+
+export function RemoveNotificationCategory(categoryID: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2032615554, categoryID) as any;
+    return $resultPromise;
+}
+
+export function RemovePendingNotification(identifier: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3729049703, identifier) as any;
+    return $resultPromise;
+}
+
+/**
+ * Public methods that delegate to the implementation.
+ */
+export function RequestNotificationAuthorization(): Promise<boolean> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3933442950) as any;
+    return $resultPromise;
+}
+
+export function SendNotification(options: $models.NotificationOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3968228732, options) as any;
+    return $resultPromise;
+}
+
+export function SendNotificationWithActions(options: $models.NotificationOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1886542847, options) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceName returns the name of the service.
+ */
+export function ServiceName(): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2704532675) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown is called when the service is unloaded.
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2550195434) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup is called when the service is loaded.
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4047820929, options) as any;
+    return $resultPromise;
+}

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

@@ -1,51 +0,0 @@
-// 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

@@ -1,223 +0,0 @@
-// 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

@@ -1,79 +0,0 @@
-//@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/image/color/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/image/color/models.ts

@@ -0,0 +1,46 @@
+// 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";
+
+/**
+ * RGBA represents a traditional 32-bit alpha-premultiplied color, having 8
+ * bits for each of red, green, blue and alpha.
+ * 
+ * An alpha-premultiplied color component C has been scaled by alpha (A), so
+ * has valid values 0 <= C <= A.
+ */
+export class RGBA {
+    "R": number;
+    "G": number;
+    "B": number;
+    "A": number;
+
+    /** Creates a new RGBA instance. */
+    constructor($$source: Partial<RGBA> = {}) {
+        if (!("R" in $$source)) {
+            this["R"] = 0;
+        }
+        if (!("G" in $$source)) {
+            this["G"] = 0;
+        }
+        if (!("B" in $$source)) {
+            this["B"] = 0;
+        }
+        if (!("A" in $$source)) {
+            this["A"] = 0;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new RGBA instance from a string or object.
+     */
+    static createFrom($$source: any = {}): RGBA {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new RGBA($$parsedSource as Partial<RGBA>);
+    }
+}

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

@@ -33,6 +33,11 @@ export class AppConfig {
      */
     "updates": UpdatesConfig;
 
+    /**
+     * Git备份设置
+     */
+    "backup": GitBackupConfig;
+
     /**
      * 配置元数据
      */
@@ -52,6 +57,9 @@ export class AppConfig {
         if (!("updates" in $$source)) {
             this["updates"] = (new UpdatesConfig());
         }
+        if (!("backup" in $$source)) {
+            this["backup"] = (new GitBackupConfig());
+        }
         if (!("metadata" in $$source)) {
             this["metadata"] = (new ConfigMetadata());
         }
@@ -68,6 +76,7 @@ export class AppConfig {
         const $$createField2_0 = $$createType2;
         const $$createField3_0 = $$createType3;
         const $$createField4_0 = $$createType4;
+        const $$createField5_0 = $$createType5;
         let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
         if ("general" in $$parsedSource) {
             $$parsedSource["general"] = $$createField0_0($$parsedSource["general"]);
@@ -81,8 +90,11 @@ export class AppConfig {
         if ("updates" in $$parsedSource) {
             $$parsedSource["updates"] = $$createField3_0($$parsedSource["updates"]);
         }
+        if ("backup" in $$parsedSource) {
+            $$parsedSource["backup"] = $$createField4_0($$parsedSource["backup"]);
+        }
         if ("metadata" in $$parsedSource) {
-            $$parsedSource["metadata"] = $$createField4_0($$parsedSource["metadata"]);
+            $$parsedSource["metadata"] = $$createField5_0($$parsedSource["metadata"]);
         }
         return new AppConfig($$parsedSource as Partial<AppConfig>);
     }
@@ -123,6 +135,25 @@ export class AppearanceConfig {
     }
 }
 
+/**
+ * Git备份相关类型定义
+ *
+ * AuthMethod 定义Git认证方式
+ */
+export enum AuthMethod {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    /**
+     * 认证方式
+     */
+    Token = "token",
+    SSHKey = "ssh_key",
+    UserPass = "user_pass",
+};
+
 /**
  * ConfigMetadata 配置元数据
  */
@@ -169,6 +200,11 @@ export class Document {
     "updatedAt": time$0.Time;
     "is_deleted": boolean;
 
+    /**
+     * 锁定标志，锁定的文档无法被删除
+     */
+    "is_locked": boolean;
+
     /** Creates a new Document instance. */
     constructor($$source: Partial<Document> = {}) {
         if (!("id" in $$source)) {
@@ -189,6 +225,9 @@ export class Document {
         if (!("is_deleted" in $$source)) {
             this["is_deleted"] = false;
         }
+        if (!("is_locked" in $$source)) {
+            this["is_locked"] = false;
+        }
 
         Object.assign(this, $$source);
     }
@@ -334,7 +373,7 @@ export class Extension {
      * Creates a new Extension instance from a string or object.
      */
     static createFrom($$source: any = {}): Extension {
-        const $$createField3_0 = $$createType5;
+        const $$createField3_0 = $$createType6;
         let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
         if ("config" in $$parsedSource) {
             $$parsedSource["config"] = $$createField3_0($$parsedSource["config"]);
@@ -428,6 +467,12 @@ export class GeneralConfig {
      */
     "startAtLogin": boolean;
 
+    /**
+     * 窗口吸附设置
+     * 是否启用窗口吸附功能（阈值现在是自适应的）
+     */
+    "enableWindowSnap": boolean;
+
     /**
      * 全局热键设置
      * 是否启用全局热键
@@ -453,6 +498,9 @@ export class GeneralConfig {
         if (!("startAtLogin" in $$source)) {
             this["startAtLogin"] = false;
         }
+        if (!("enableWindowSnap" in $$source)) {
+            this["enableWindowSnap"] = false;
+        }
         if (!("enableGlobalHotkey" in $$source)) {
             this["enableGlobalHotkey"] = false;
         }
@@ -467,15 +515,64 @@ export class GeneralConfig {
      * Creates a new GeneralConfig instance from a string or object.
      */
     static createFrom($$source: any = {}): GeneralConfig {
-        const $$createField5_0 = $$createType7;
+        const $$createField6_0 = $$createType8;
         let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
         if ("globalHotkey" in $$parsedSource) {
-            $$parsedSource["globalHotkey"] = $$createField5_0($$parsedSource["globalHotkey"]);
+            $$parsedSource["globalHotkey"] = $$createField6_0($$parsedSource["globalHotkey"]);
         }
         return new GeneralConfig($$parsedSource as Partial<GeneralConfig>);
     }
 }
 
+/**
+ * GitBackupConfig Git备份配置
+ */
+export class GitBackupConfig {
+    "enabled": boolean;
+    "repo_url": string;
+    "auth_method": AuthMethod;
+    "username"?: string;
+    "password"?: string;
+    "token"?: string;
+    "ssh_key_path"?: string;
+    "ssh_key_passphrase"?: string;
+
+    /**
+     * 分钟
+     */
+    "backup_interval": number;
+    "auto_backup": boolean;
+
+    /** Creates a new GitBackupConfig instance. */
+    constructor($$source: Partial<GitBackupConfig> = {}) {
+        if (!("enabled" in $$source)) {
+            this["enabled"] = false;
+        }
+        if (!("repo_url" in $$source)) {
+            this["repo_url"] = "";
+        }
+        if (!("auth_method" in $$source)) {
+            this["auth_method"] = ("" as AuthMethod);
+        }
+        if (!("backup_interval" in $$source)) {
+            this["backup_interval"] = 0;
+        }
+        if (!("auto_backup" in $$source)) {
+            this["auto_backup"] = false;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new GitBackupConfig instance from a string or object.
+     */
+    static createFrom($$source: any = {}): GitBackupConfig {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new GitBackupConfig($$parsedSource as Partial<GitBackupConfig>);
+    }
+}
+
 /**
  * GiteaConfig Gitea配置
  */
@@ -1028,6 +1125,279 @@ export enum TabType {
     TabTypeTab = "tab",
 };
 
+/**
+ * Theme 主题数据库模型
+ */
+export class Theme {
+    "id": number;
+    "name": string;
+    "type": ThemeType;
+    "colors": ThemeColorConfig;
+    "isDefault": boolean;
+    "createdAt": time$0.Time;
+    "updatedAt": time$0.Time;
+
+    /** Creates a new Theme instance. */
+    constructor($$source: Partial<Theme> = {}) {
+        if (!("id" in $$source)) {
+            this["id"] = 0;
+        }
+        if (!("name" in $$source)) {
+            this["name"] = "";
+        }
+        if (!("type" in $$source)) {
+            this["type"] = ("" as ThemeType);
+        }
+        if (!("colors" in $$source)) {
+            this["colors"] = (new ThemeColorConfig());
+        }
+        if (!("isDefault" in $$source)) {
+            this["isDefault"] = false;
+        }
+        if (!("createdAt" in $$source)) {
+            this["createdAt"] = null;
+        }
+        if (!("updatedAt" in $$source)) {
+            this["updatedAt"] = null;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new Theme instance from a string or object.
+     */
+    static createFrom($$source: any = {}): Theme {
+        const $$createField3_0 = $$createType9;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("colors" in $$parsedSource) {
+            $$parsedSource["colors"] = $$createField3_0($$parsedSource["colors"]);
+        }
+        return new Theme($$parsedSource as Partial<Theme>);
+    }
+}
+
+/**
+ * ThemeColorConfig 主题颜色配置
+ */
+export class ThemeColorConfig {
+    /**
+     * 基础色调
+     * 主背景色
+     */
+    "background": string;
+
+    /**
+     * 次要背景色
+     */
+    "backgroundSecondary": string;
+
+    /**
+     * 面板背景
+     */
+    "surface": string;
+
+    /**
+     * 主文本色
+     */
+    "foreground": string;
+
+    /**
+     * 次要文本色
+     */
+    "foregroundSecondary": string;
+
+    /**
+     * 语法高亮
+     * 注释色
+     */
+    "comment": string;
+
+    /**
+     * 关键字
+     */
+    "keyword": string;
+
+    /**
+     * 字符串
+     */
+    "string": string;
+
+    /**
+     * 函数名
+     */
+    "function": string;
+
+    /**
+     * 数字
+     */
+    "number": string;
+
+    /**
+     * 操作符
+     */
+    "operator": string;
+
+    /**
+     * 变量
+     */
+    "variable": string;
+
+    /**
+     * 类型
+     */
+    "type": string;
+
+    /**
+     * 界面元素
+     * 光标
+     */
+    "cursor": string;
+
+    /**
+     * 选中背景
+     */
+    "selection": string;
+
+    /**
+     * 失焦选中背景
+     */
+    "selectionBlur": string;
+
+    /**
+     * 当前行高亮
+     */
+    "activeLine": string;
+
+    /**
+     * 行号
+     */
+    "lineNumber": string;
+
+    /**
+     * 活动行号
+     */
+    "activeLineNumber": string;
+
+    /**
+     * 边框分割线
+     * 边框色
+     */
+    "borderColor": string;
+
+    /**
+     * 浅色边框
+     */
+    "borderLight": string;
+
+    /**
+     * 搜索匹配
+     * 搜索匹配
+     */
+    "searchMatch": string;
+
+    /**
+     * 匹配括号
+     */
+    "matchingBracket": string;
+
+    /** Creates a new ThemeColorConfig instance. */
+    constructor($$source: Partial<ThemeColorConfig> = {}) {
+        if (!("background" in $$source)) {
+            this["background"] = "";
+        }
+        if (!("backgroundSecondary" in $$source)) {
+            this["backgroundSecondary"] = "";
+        }
+        if (!("surface" in $$source)) {
+            this["surface"] = "";
+        }
+        if (!("foreground" in $$source)) {
+            this["foreground"] = "";
+        }
+        if (!("foregroundSecondary" in $$source)) {
+            this["foregroundSecondary"] = "";
+        }
+        if (!("comment" in $$source)) {
+            this["comment"] = "";
+        }
+        if (!("keyword" in $$source)) {
+            this["keyword"] = "";
+        }
+        if (!("string" in $$source)) {
+            this["string"] = "";
+        }
+        if (!("function" in $$source)) {
+            this["function"] = "";
+        }
+        if (!("number" in $$source)) {
+            this["number"] = "";
+        }
+        if (!("operator" in $$source)) {
+            this["operator"] = "";
+        }
+        if (!("variable" in $$source)) {
+            this["variable"] = "";
+        }
+        if (!("type" in $$source)) {
+            this["type"] = "";
+        }
+        if (!("cursor" in $$source)) {
+            this["cursor"] = "";
+        }
+        if (!("selection" in $$source)) {
+            this["selection"] = "";
+        }
+        if (!("selectionBlur" in $$source)) {
+            this["selectionBlur"] = "";
+        }
+        if (!("activeLine" in $$source)) {
+            this["activeLine"] = "";
+        }
+        if (!("lineNumber" in $$source)) {
+            this["lineNumber"] = "";
+        }
+        if (!("activeLineNumber" in $$source)) {
+            this["activeLineNumber"] = "";
+        }
+        if (!("borderColor" in $$source)) {
+            this["borderColor"] = "";
+        }
+        if (!("borderLight" in $$source)) {
+            this["borderLight"] = "";
+        }
+        if (!("searchMatch" in $$source)) {
+            this["searchMatch"] = "";
+        }
+        if (!("matchingBracket" in $$source)) {
+            this["matchingBracket"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new ThemeColorConfig instance from a string or object.
+     */
+    static createFrom($$source: any = {}): ThemeColorConfig {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new ThemeColorConfig($$parsedSource as Partial<ThemeColorConfig>);
+    }
+}
+
+/**
+ * ThemeType 主题类型枚举
+ */
+export enum ThemeType {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    ThemeTypeDark = "dark",
+    ThemeTypeLight = "light",
+};
+
 /**
  * UpdateSourceType 更新源类型
  */
@@ -1126,8 +1496,8 @@ export class UpdatesConfig {
      * Creates a new UpdatesConfig instance from a string or object.
      */
     static createFrom($$source: any = {}): UpdatesConfig {
-        const $$createField6_0 = $$createType8;
-        const $$createField7_0 = $$createType9;
+        const $$createField6_0 = $$createType10;
+        const $$createField7_0 = $$createType11;
         let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
         if ("github" in $$parsedSource) {
             $$parsedSource["github"] = $$createField6_0($$parsedSource["github"]);
@@ -1144,14 +1514,16 @@ const $$createType0 = GeneralConfig.createFrom;
 const $$createType1 = EditingConfig.createFrom;
 const $$createType2 = AppearanceConfig.createFrom;
 const $$createType3 = UpdatesConfig.createFrom;
-const $$createType4 = ConfigMetadata.createFrom;
-var $$createType5 = (function $$initCreateType5(...args): any {
-    if ($$createType5 === $$initCreateType5) {
-        $$createType5 = $$createType6;
+const $$createType4 = GitBackupConfig.createFrom;
+const $$createType5 = ConfigMetadata.createFrom;
+var $$createType6 = (function $$initCreateType6(...args): any {
+    if ($$createType6 === $$initCreateType6) {
+        $$createType6 = $$createType7;
     }
-    return $$createType5(...args);
+    return $$createType6(...args);
 });
-const $$createType6 = $Create.Map($Create.Any, $Create.Any);
-const $$createType7 = HotkeyCombo.createFrom;
-const $$createType8 = GithubConfig.createFrom;
-const $$createType9 = GiteaConfig.createFrom;
+const $$createType7 = $Create.Map($Create.Any, $Create.Any);
+const $$createType8 = HotkeyCombo.createFrom;
+const $$createType9 = ThemeColorConfig.createFrom;
+const $$createType10 = GithubConfig.createFrom;
+const $$createType11 = GiteaConfig.createFrom;

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

@@ -0,0 +1,71 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * BackupService 提供基于Git的备份功能
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as models$0 from "../models/models.js";
+
+/**
+ * HandleConfigChange 处理备份配置变更
+ */
+export function HandleConfigChange(config: models$0.GitBackupConfig | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(395287784, config) as any;
+    return $resultPromise;
+}
+
+/**
+ * Initialize 初始化备份服务
+ */
+export function Initialize(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1052437974) as any;
+    return $resultPromise;
+}
+
+/**
+ * PushToRemote 推送本地更改到远程仓库
+ */
+export function PushToRemote(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(262644139) as any;
+    return $resultPromise;
+}
+
+/**
+ * Reinitialize 重新初始化备份服务，用于响应配置变更
+ */
+export function Reinitialize(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(301562543) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown 服务关闭时的清理工作
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(422131801) as any;
+    return $resultPromise;
+}
+
+/**
+ * StartAutoBackup 启动自动备份定时器
+ */
+export function StartAutoBackup(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3035755449) as any;
+    return $resultPromise;
+}
+
+/**
+ * StopAutoBackup 停止自动备份
+ */
+export function StopAutoBackup(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2641894021) as any;
+    return $resultPromise;
+}

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

@@ -34,6 +34,30 @@ export function GetConfig(): Promise<models$0.AppConfig | null> & { cancel(): vo
     return $typingPromise;
 }
 
+/**
+ * GetConfigDir 获取配置目录
+ */
+export function GetConfigDir(): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2275626561) as any;
+    return $resultPromise;
+}
+
+/**
+ * GetSettingsPath 获取设置文件路径
+ */
+export function GetSettingsPath(): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2175583370) as any;
+    return $resultPromise;
+}
+
+/**
+ * MigrateConfig 执行配置迁移
+ */
+export function MigrateConfig(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(434292783) as any;
+    return $resultPromise;
+}
+
 /**
  * ResetConfig 强制重置所有配置为默认值
  */
@@ -58,6 +82,14 @@ export function Set(key: string, value: any): Promise<void> & { cancel(): void }
     return $resultPromise;
 }
 
+/**
+ * SetBackupConfigChangeCallback 设置备份配置变更回调
+ */
+export function SetBackupConfigChangeCallback(callback: any): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3264871659, callback) as any;
+    return $resultPromise;
+}
+
 /**
  * SetDataPathChangeCallback 设置数据路径配置变更回调
  */
@@ -74,6 +106,14 @@ export function SetHotkeyChangeCallback(callback: any): Promise<void> & { cancel
     return $resultPromise;
 }
 
+/**
+ * SetWindowSnapConfigChangeCallback 设置窗口吸附配置变更回调
+ */
+export function SetWindowSnapConfigChangeCallback(callback: any): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2324961653, 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

@@ -22,6 +22,14 @@ export function OnDataPathChanged(): Promise<void> & { cancel(): void } {
     return $resultPromise;
 }
 
+/**
+ * RegisterModel 注册模型与表的映射关系
+ */
+export function RegisterModel(tableName: string, model: any): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(175397515, tableName, model) as any;
+    return $resultPromise;
+}
+
 /**
  * ServiceShutdown shuts down the service when the application closes
  */

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

@@ -22,6 +22,14 @@ export function SelectDirectory(): Promise<string> & { cancel(): void } {
     return $resultPromise;
 }
 
+/**
+ * SelectFile 打开文件选择对话框
+ */
+export function SelectFile(): Promise<string> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(37302920) as any;
+    return $resultPromise;
+}
+
 /**
  * SetWindow 设置绑定的窗口
  */

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

@@ -81,6 +81,14 @@ export function ListDeletedDocumentsMeta(): Promise<(models$0.Document | null)[]
     return $typingPromise;
 }
 
+/**
+ * LockDocument 锁定文档，防止删除
+ */
+export function LockDocument(id: number): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1889494473, id) as any;
+    return $resultPromise;
+}
+
 /**
  * RestoreDocument restores a deleted document
  */
@@ -97,6 +105,14 @@ export function ServiceStartup(options: application$0.ServiceOptions): Promise<v
     return $resultPromise;
 }
 
+/**
+ * UnlockDocument 解锁文档
+ */
+export function UnlockDocument(id: number): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(222307930, id) as any;
+    return $resultPromise;
+}
+
 /**
  * UpdateDocumentContent updates the content of a document
  */

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

@@ -32,8 +32,8 @@ export function GetCurrentHotkey(): Promise<models$0.HotkeyCombo | null> & { can
 /**
  * Initialize 初始化热键服务
  */
-export function Initialize(app: application$0.App | null): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(3671360458, app) as any;
+export function Initialize(app: application$0.App | null, mainWindow: application$0.WebviewWindow | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3671360458, app, mainWindow) as any;
     return $resultPromise;
 }
 

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

@@ -1,6 +1,7 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+import * as BackupService from "./backupservice.js";
 import * as ConfigService from "./configservice.js";
 import * as DatabaseService from "./databaseservice.js";
 import * as DialogService from "./dialogservice.js";
@@ -12,10 +13,14 @@ 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 TestService from "./testservice.js";
+import * as ThemeService from "./themeservice.js";
 import * as TranslationService from "./translationservice.js";
 import * as TrayService from "./trayservice.js";
 import * as WindowService from "./windowservice.js";
+import * as WindowSnapService from "./windowsnapservice.js";
 export {
+    BackupService,
     ConfigService,
     DatabaseService,
     DialogService,
@@ -27,9 +32,12 @@ export {
     SelfUpdateService,
     StartupService,
     SystemService,
+    TestService,
+    ThemeService,
     TranslationService,
     TrayService,
-    WindowService
+    WindowService,
+    WindowSnapService
 };
 
 export * from "./models.js";

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

@@ -203,7 +203,7 @@ export class SelfUpdateResult {
 }
 
 /**
- * WindowInfo 窗口信息
+ * WindowInfo 窗口信息（简化版）
  */
 export class WindowInfo {
     "Window": application$0.WebviewWindow | null;
@@ -238,6 +238,26 @@ export class WindowInfo {
     }
 }
 
+/**
+ * WindowSnapService 窗口吸附服务
+ */
+export class WindowSnapService {
+
+    /** Creates a new WindowSnapService instance. */
+    constructor($$source: Partial<WindowSnapService> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new WindowSnapService instance from a string or object.
+     */
+    static createFrom($$source: any = {}): WindowSnapService {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new WindowSnapService($$parsedSource as Partial<WindowSnapService>);
+    }
+}
+
 // Private type creation functions
 const $$createType0 = application$0.WebviewWindow.createFrom;
 const $$createType1 = $Create.Nullable($$createType0);

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

@@ -0,0 +1,55 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * TestService 测试服务 - 仅在开发环境使用
+ * @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";
+
+/**
+ * ClearAll 清除所有测试状态
+ */
+export function ClearAll(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2179720854) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup 服务启动时调用
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(617408198, options) as any;
+    return $resultPromise;
+}
+
+/**
+ * TestBadge 测试Badge功能
+ */
+export function TestBadge(text: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4242952145, text) as any;
+    return $resultPromise;
+}
+
+/**
+ * TestNotification 测试通知功能
+ */
+export function TestNotification(title: string, subtitle: string, body: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1697553289, title, subtitle, body) as any;
+    return $resultPromise;
+}
+
+/**
+ * TestUpdateNotification 测试更新通知
+ */
+export function TestUpdateNotification(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3091730060) as any;
+    return $resultPromise;
+}

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

@@ -0,0 +1,104 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * ThemeService 主题服务
+ * @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";
+
+/**
+ * CreateTheme 创建新主题
+ */
+export function CreateTheme(theme: models$0.Theme | null): Promise<models$0.Theme | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3274757686, theme) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * GetAllThemes 获取所有主题
+ */
+export function GetAllThemes(): Promise<(models$0.Theme | null)[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2425053076) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType2($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * GetDefaultThemes 获取默认主题
+ */
+export function GetDefaultThemes(): Promise<{ [_: string]: models$0.Theme | null }> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3801788118) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType3($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * GetThemeByType 根据类型获取默认主题
+ */
+export function GetThemeByType(themeType: models$0.ThemeType): Promise<models$0.Theme | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1680465265, themeType) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * ResetThemeColors 重置主题颜色为默认值
+ */
+export function ResetThemeColors(themeType: models$0.ThemeType): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(342461245, themeType) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown 服务关闭
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1676749034) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceStartup 服务启动时初始化
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2915959937, options) as any;
+    return $resultPromise;
+}
+
+/**
+ * UpdateThemeColors 更新主题颜色
+ */
+export function UpdateThemeColors(themeType: models$0.ThemeType, colors: models$0.ThemeColorConfig): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2750902529, themeType, colors) as any;
+    return $resultPromise;
+}
+
+// Private type creation functions
+const $$createType0 = models$0.Theme.createFrom;
+const $$createType1 = $Create.Nullable($$createType0);
+const $$createType2 = $Create.Array($$createType1);
+const $$createType3 = $Create.Map($Create.Any, $$createType1);

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

@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT
 
 /**
- * WindowService 窗口管理服务
+ * WindowService 窗口管理服务（专注于窗口生命周期管理）
  * @module
  */
 
@@ -46,6 +46,14 @@ export function OpenDocumentWindow(documentID: number): Promise<void> & { cancel
     return $resultPromise;
 }
 
+/**
+ * ServiceShutdown 实现服务关闭接口
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(202192783) as any;
+    return $resultPromise;
+}
+
 /**
  * SetAppReferences 设置应用和主窗口引用
  */
@@ -54,6 +62,14 @@ export function SetAppReferences(app: application$0.App | null, mainWindow: appl
     return $resultPromise;
 }
 
+/**
+ * SetWindowSnapService 设置窗口吸附服务引用
+ */
+export function SetWindowSnapService(snapService: $models.WindowSnapService | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1105193745, snapService) as any;
+    return $resultPromise;
+}
+
 // Private type creation functions
 const $$createType0 = $models.WindowInfo.createFrom;
 const $$createType1 = $Create.Array($$createType0);

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

@@ -0,0 +1,79 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * WindowSnapService 窗口吸附服务
+ * @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";
+
+/**
+ * Cleanup 清理资源
+ */
+export function Cleanup(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2155505498) as any;
+    return $resultPromise;
+}
+
+/**
+ * GetCurrentThreshold 获取当前自适应阈值（用于调试或显示）
+ */
+export function GetCurrentThreshold(): Promise<number> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3176419026) as any;
+    return $resultPromise;
+}
+
+/**
+ * OnWindowSnapConfigChanged 处理窗口吸附配置变更
+ */
+export function OnWindowSnapConfigChanged(enabled: boolean): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3794787039, enabled) as any;
+    return $resultPromise;
+}
+
+/**
+ * RegisterWindow 注册需要吸附管理的窗口
+ */
+export function RegisterWindow(documentID: number, window: application$0.WebviewWindow | null, title: string): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1000222723, documentID, window, title) as any;
+    return $resultPromise;
+}
+
+/**
+ * ServiceShutdown 实现服务关闭接口
+ */
+export function ServiceShutdown(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1172710495) 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(1782093351, app, mainWindow) as any;
+    return $resultPromise;
+}
+
+/**
+ * SetSnapEnabled 设置是否启用窗口吸附
+ */
+export function SetSnapEnabled(enabled: boolean): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2280126835, enabled) as any;
+    return $resultPromise;
+}
+
+/**
+ * UnregisterWindow 取消注册窗口
+ */
+export function UnregisterWindow(documentID: number): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2844230768, documentID) as any;
+    return $resultPromise;
+}

frontend/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     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']

frontend/package.json

@@ -12,36 +12,35 @@
     "lint:fix": "eslint --fix"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/autocomplete": "^6.18.7",
     "@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-html": "^6.4.10",
     "@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-liquid": "^6.3.0",
+    "@codemirror/lang-markdown": "^6.3.4",
     "@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-sql": "^6.9.1",
     "@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": "^6.11.3",
     "@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",
+    "@codemirror/view": "^6.38.2",
     "@lezer/highlight": "^1.2.1",
     "@lezer/lr": "^1.4.2",
     "codemirror": "^6.0.2",
@@ -50,32 +49,38 @@
     "colors-named-hex": "^1.0.2",
     "franc-min": "^6.2.0",
     "hsl-matcher": "^1.2.4",
+    "jsox": "^1.2.123",
     "lezer": "^0.13.5",
+    "linguist-languages": "^9.0.0",
+    "node-sql-parser": "^5.3.12",
+    "php-parser": "^3.2.5",
     "pinia": "^3.0.3",
-    "pinia-plugin-persistedstate": "^4.4.1",
+    "pinia-plugin-persistedstate": "^4.5.0",
     "prettier": "^3.6.2",
     "remarkable": "^2.0.1",
-    "sass": "^1.89.2",
-    "vue": "^3.5.17",
-    "vue-i18n": "^11.1.9",
+    "sass": "^1.92.1",
+    "sql-formatter": "^15.6.9",
+    "vue": "^3.5.21",
+    "vue-i18n": "^11.1.12",
+    "vue-pick-colors": "^1.8.0",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.1",
+    "@eslint/js": "^9.35.0",
     "@lezer/generator": "^1.8.0",
-    "@types/lodash": "^4.17.20",
-    "@types/node": "^24.0.12",
+    "@types/node": "^24.3.1",
     "@types/remarkable": "^2.0.8",
-    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
     "@wailsio/runtime": "latest",
-    "eslint": "^9.30.1",
-    "eslint-plugin-vue": "^10.3.0",
-    "globals": "^16.3.0",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.36.0",
-    "unplugin-vue-components": "^28.8.0",
-    "vite": "^7.0.3",
+    "eslint": "^9.35.0",
+    "eslint-plugin-vue": "^10.4.0",
+    "globals": "^16.4.0",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.43.0",
+    "unplugin-vue-components": "^29.0.0",
+    "vite": "^7.1.5",
+    "vite-plugin-node-polyfills": "^0.24.0",
     "vue-eslint-parser": "^10.2.0",
-    "vue-tsc": "^3.0.1"
+    "vue-tsc": "^3.0.6"
   }
 }

frontend/public/wasm_exec.js

@@ -0,0 +1,561 @@
+// Copyright 2018 The Go Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+"use strict";
+
+(() => {
+	const enosys = () => {
+		const err = new Error("not implemented");
+		err.code = "ENOSYS";
+		return err;
+	};
+
+	if (!globalThis.fs) {
+		let outputBuf = "";
+		globalThis.fs = {
+			constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1 }, // unused
+			writeSync(fd, buf) {
+				outputBuf += decoder.decode(buf);
+				const nl = outputBuf.lastIndexOf("\n");
+				if (nl != -1) {
+					console.log(outputBuf.substring(0, nl));
+					outputBuf = outputBuf.substring(nl + 1);
+				}
+				return buf.length;
+			},
+			write(fd, buf, offset, length, position, callback) {
+				if (offset !== 0 || length !== buf.length || position !== null) {
+					callback(enosys());
+					return;
+				}
+				const n = this.writeSync(fd, buf);
+				callback(null, n);
+			},
+			chmod(path, mode, callback) { callback(enosys()); },
+			chown(path, uid, gid, callback) { callback(enosys()); },
+			close(fd, callback) { callback(enosys()); },
+			fchmod(fd, mode, callback) { callback(enosys()); },
+			fchown(fd, uid, gid, callback) { callback(enosys()); },
+			fstat(fd, callback) { callback(enosys()); },
+			fsync(fd, callback) { callback(null); },
+			ftruncate(fd, length, callback) { callback(enosys()); },
+			lchown(path, uid, gid, callback) { callback(enosys()); },
+			link(path, link, callback) { callback(enosys()); },
+			lstat(path, callback) { callback(enosys()); },
+			mkdir(path, perm, callback) { callback(enosys()); },
+			open(path, flags, mode, callback) { callback(enosys()); },
+			read(fd, buffer, offset, length, position, callback) { callback(enosys()); },
+			readdir(path, callback) { callback(enosys()); },
+			readlink(path, callback) { callback(enosys()); },
+			rename(from, to, callback) { callback(enosys()); },
+			rmdir(path, callback) { callback(enosys()); },
+			stat(path, callback) { callback(enosys()); },
+			symlink(path, link, callback) { callback(enosys()); },
+			truncate(path, length, callback) { callback(enosys()); },
+			unlink(path, callback) { callback(enosys()); },
+			utimes(path, atime, mtime, callback) { callback(enosys()); },
+		};
+	}
+
+	if (!globalThis.process) {
+		globalThis.process = {
+			getuid() { return -1; },
+			getgid() { return -1; },
+			geteuid() { return -1; },
+			getegid() { return -1; },
+			getgroups() { throw enosys(); },
+			pid: -1,
+			ppid: -1,
+			umask() { throw enosys(); },
+			cwd() { throw enosys(); },
+			chdir() { throw enosys(); },
+		}
+	}
+
+	if (!globalThis.crypto) {
+		throw new Error("globalThis.crypto is not available, polyfill required (crypto.getRandomValues only)");
+	}
+
+	if (!globalThis.performance) {
+		throw new Error("globalThis.performance is not available, polyfill required (performance.now only)");
+	}
+
+	if (!globalThis.TextEncoder) {
+		throw new Error("globalThis.TextEncoder is not available, polyfill required");
+	}
+
+	if (!globalThis.TextDecoder) {
+		throw new Error("globalThis.TextDecoder is not available, polyfill required");
+	}
+
+	const encoder = new TextEncoder("utf-8");
+	const decoder = new TextDecoder("utf-8");
+
+	globalThis.Go = class {
+		constructor() {
+			this.argv = ["js"];
+			this.env = {};
+			this.exit = (code) => {
+				if (code !== 0) {
+					console.warn("exit code:", code);
+				}
+			};
+			this._exitPromise = new Promise((resolve) => {
+				this._resolveExitPromise = resolve;
+			});
+			this._pendingEvent = null;
+			this._scheduledTimeouts = new Map();
+			this._nextCallbackTimeoutID = 1;
+
+			const setInt64 = (addr, v) => {
+				this.mem.setUint32(addr + 0, v, true);
+				this.mem.setUint32(addr + 4, Math.floor(v / 4294967296), true);
+			}
+
+			const setInt32 = (addr, v) => {
+				this.mem.setUint32(addr + 0, v, true);
+			}
+
+			const getInt64 = (addr) => {
+				const low = this.mem.getUint32(addr + 0, true);
+				const high = this.mem.getInt32(addr + 4, true);
+				return low + high * 4294967296;
+			}
+
+			const loadValue = (addr) => {
+				const f = this.mem.getFloat64(addr, true);
+				if (f === 0) {
+					return undefined;
+				}
+				if (!isNaN(f)) {
+					return f;
+				}
+
+				const id = this.mem.getUint32(addr, true);
+				return this._values[id];
+			}
+
+			const storeValue = (addr, v) => {
+				const nanHead = 0x7FF80000;
+
+				if (typeof v === "number" && v !== 0) {
+					if (isNaN(v)) {
+						this.mem.setUint32(addr + 4, nanHead, true);
+						this.mem.setUint32(addr, 0, true);
+						return;
+					}
+					this.mem.setFloat64(addr, v, true);
+					return;
+				}
+
+				if (v === undefined) {
+					this.mem.setFloat64(addr, 0, true);
+					return;
+				}
+
+				let id = this._ids.get(v);
+				if (id === undefined) {
+					id = this._idPool.pop();
+					if (id === undefined) {
+						id = this._values.length;
+					}
+					this._values[id] = v;
+					this._goRefCounts[id] = 0;
+					this._ids.set(v, id);
+				}
+				this._goRefCounts[id]++;
+				let typeFlag = 0;
+				switch (typeof v) {
+					case "object":
+						if (v !== null) {
+							typeFlag = 1;
+						}
+						break;
+					case "string":
+						typeFlag = 2;
+						break;
+					case "symbol":
+						typeFlag = 3;
+						break;
+					case "function":
+						typeFlag = 4;
+						break;
+				}
+				this.mem.setUint32(addr + 4, nanHead | typeFlag, true);
+				this.mem.setUint32(addr, id, true);
+			}
+
+			const loadSlice = (addr) => {
+				const array = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				return new Uint8Array(this._inst.exports.mem.buffer, array, len);
+			}
+
+			const loadSliceOfValues = (addr) => {
+				const array = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				const a = new Array(len);
+				for (let i = 0; i < len; i++) {
+					a[i] = loadValue(array + i * 8);
+				}
+				return a;
+			}
+
+			const loadString = (addr) => {
+				const saddr = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				return decoder.decode(new DataView(this._inst.exports.mem.buffer, saddr, len));
+			}
+
+			const timeOrigin = Date.now() - performance.now();
+			this.importObject = {
+				_gotest: {
+					add: (a, b) => a + b,
+				},
+				gojs: {
+					// Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters)
+					// may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported
+					// function. A goroutine can switch to a new stack if the current stack is too small (see morestack function).
+					// This changes the SP, thus we have to update the SP used by the imported function.
+
+					// func wasmExit(code int32)
+					"runtime.wasmExit": (sp) => {
+						sp >>>= 0;
+						const code = this.mem.getInt32(sp + 8, true);
+						this.exited = true;
+						delete this._inst;
+						delete this._values;
+						delete this._goRefCounts;
+						delete this._ids;
+						delete this._idPool;
+						this.exit(code);
+					},
+
+					// func wasmWrite(fd uintptr, p unsafe.Pointer, n int32)
+					"runtime.wasmWrite": (sp) => {
+						sp >>>= 0;
+						const fd = getInt64(sp + 8);
+						const p = getInt64(sp + 16);
+						const n = this.mem.getInt32(sp + 24, true);
+						fs.writeSync(fd, new Uint8Array(this._inst.exports.mem.buffer, p, n));
+					},
+
+					// func resetMemoryDataView()
+					"runtime.resetMemoryDataView": (sp) => {
+						sp >>>= 0;
+						this.mem = new DataView(this._inst.exports.mem.buffer);
+					},
+
+					// func nanotime1() int64
+					"runtime.nanotime1": (sp) => {
+						sp >>>= 0;
+						setInt64(sp + 8, (timeOrigin + performance.now()) * 1000000);
+					},
+
+					// func walltime() (sec int64, nsec int32)
+					"runtime.walltime": (sp) => {
+						sp >>>= 0;
+						const msec = (new Date).getTime();
+						setInt64(sp + 8, msec / 1000);
+						this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true);
+					},
+
+					// func scheduleTimeoutEvent(delay int64) int32
+					"runtime.scheduleTimeoutEvent": (sp) => {
+						sp >>>= 0;
+						const id = this._nextCallbackTimeoutID;
+						this._nextCallbackTimeoutID++;
+						this._scheduledTimeouts.set(id, setTimeout(
+							() => {
+								this._resume();
+								while (this._scheduledTimeouts.has(id)) {
+									// for some reason Go failed to register the timeout event, log and try again
+									// (temporary workaround for https://github.com/golang/go/issues/28975)
+									console.warn("scheduleTimeoutEvent: missed timeout event");
+									this._resume();
+								}
+							},
+							getInt64(sp + 8),
+						));
+						this.mem.setInt32(sp + 16, id, true);
+					},
+
+					// func clearTimeoutEvent(id int32)
+					"runtime.clearTimeoutEvent": (sp) => {
+						sp >>>= 0;
+						const id = this.mem.getInt32(sp + 8, true);
+						clearTimeout(this._scheduledTimeouts.get(id));
+						this._scheduledTimeouts.delete(id);
+					},
+
+					// func getRandomData(r []byte)
+					"runtime.getRandomData": (sp) => {
+						sp >>>= 0;
+						crypto.getRandomValues(loadSlice(sp + 8));
+					},
+
+					// func finalizeRef(v ref)
+					"syscall/js.finalizeRef": (sp) => {
+						sp >>>= 0;
+						const id = this.mem.getUint32(sp + 8, true);
+						this._goRefCounts[id]--;
+						if (this._goRefCounts[id] === 0) {
+							const v = this._values[id];
+							this._values[id] = null;
+							this._ids.delete(v);
+							this._idPool.push(id);
+						}
+					},
+
+					// func stringVal(value string) ref
+					"syscall/js.stringVal": (sp) => {
+						sp >>>= 0;
+						storeValue(sp + 24, loadString(sp + 8));
+					},
+
+					// func valueGet(v ref, p string) ref
+					"syscall/js.valueGet": (sp) => {
+						sp >>>= 0;
+						const result = Reflect.get(loadValue(sp + 8), loadString(sp + 16));
+						sp = this._inst.exports.getsp() >>> 0; // see comment above
+						storeValue(sp + 32, result);
+					},
+
+					// func valueSet(v ref, p string, x ref)
+					"syscall/js.valueSet": (sp) => {
+						sp >>>= 0;
+						Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32));
+					},
+
+					// func valueDelete(v ref, p string)
+					"syscall/js.valueDelete": (sp) => {
+						sp >>>= 0;
+						Reflect.deleteProperty(loadValue(sp + 8), loadString(sp + 16));
+					},
+
+					// func valueIndex(v ref, i int) ref
+					"syscall/js.valueIndex": (sp) => {
+						sp >>>= 0;
+						storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16)));
+					},
+
+					// valueSetIndex(v ref, i int, x ref)
+					"syscall/js.valueSetIndex": (sp) => {
+						sp >>>= 0;
+						Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24));
+					},
+
+					// func valueCall(v ref, m string, args []ref) (ref, bool)
+					"syscall/js.valueCall": (sp) => {
+						sp >>>= 0;
+						try {
+							const v = loadValue(sp + 8);
+							const m = Reflect.get(v, loadString(sp + 16));
+							const args = loadSliceOfValues(sp + 32);
+							const result = Reflect.apply(m, v, args);
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 56, result);
+							this.mem.setUint8(sp + 64, 1);
+						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 56, err);
+							this.mem.setUint8(sp + 64, 0);
+						}
+					},
+
+					// func valueInvoke(v ref, args []ref) (ref, bool)
+					"syscall/js.valueInvoke": (sp) => {
+						sp >>>= 0;
+						try {
+							const v = loadValue(sp + 8);
+							const args = loadSliceOfValues(sp + 16);
+							const result = Reflect.apply(v, undefined, args);
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, result);
+							this.mem.setUint8(sp + 48, 1);
+						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, err);
+							this.mem.setUint8(sp + 48, 0);
+						}
+					},
+
+					// func valueNew(v ref, args []ref) (ref, bool)
+					"syscall/js.valueNew": (sp) => {
+						sp >>>= 0;
+						try {
+							const v = loadValue(sp + 8);
+							const args = loadSliceOfValues(sp + 16);
+							const result = Reflect.construct(v, args);
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, result);
+							this.mem.setUint8(sp + 48, 1);
+						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, err);
+							this.mem.setUint8(sp + 48, 0);
+						}
+					},
+
+					// func valueLength(v ref) int
+					"syscall/js.valueLength": (sp) => {
+						sp >>>= 0;
+						setInt64(sp + 16, parseInt(loadValue(sp + 8).length));
+					},
+
+					// valuePrepareString(v ref) (ref, int)
+					"syscall/js.valuePrepareString": (sp) => {
+						sp >>>= 0;
+						const str = encoder.encode(String(loadValue(sp + 8)));
+						storeValue(sp + 16, str);
+						setInt64(sp + 24, str.length);
+					},
+
+					// valueLoadString(v ref, b []byte)
+					"syscall/js.valueLoadString": (sp) => {
+						sp >>>= 0;
+						const str = loadValue(sp + 8);
+						loadSlice(sp + 16).set(str);
+					},
+
+					// func valueInstanceOf(v ref, t ref) bool
+					"syscall/js.valueInstanceOf": (sp) => {
+						sp >>>= 0;
+						this.mem.setUint8(sp + 24, (loadValue(sp + 8) instanceof loadValue(sp + 16)) ? 1 : 0);
+					},
+
+					// func copyBytesToGo(dst []byte, src ref) (int, bool)
+					"syscall/js.copyBytesToGo": (sp) => {
+						sp >>>= 0;
+						const dst = loadSlice(sp + 8);
+						const src = loadValue(sp + 32);
+						if (!(src instanceof Uint8Array || src instanceof Uint8ClampedArray)) {
+							this.mem.setUint8(sp + 48, 0);
+							return;
+						}
+						const toCopy = src.subarray(0, dst.length);
+						dst.set(toCopy);
+						setInt64(sp + 40, toCopy.length);
+						this.mem.setUint8(sp + 48, 1);
+					},
+
+					// func copyBytesToJS(dst ref, src []byte) (int, bool)
+					"syscall/js.copyBytesToJS": (sp) => {
+						sp >>>= 0;
+						const dst = loadValue(sp + 8);
+						const src = loadSlice(sp + 16);
+						if (!(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)) {
+							this.mem.setUint8(sp + 48, 0);
+							return;
+						}
+						const toCopy = src.subarray(0, dst.length);
+						dst.set(toCopy);
+						setInt64(sp + 40, toCopy.length);
+						this.mem.setUint8(sp + 48, 1);
+					},
+
+					"debug": (value) => {
+						console.log(value);
+					},
+				}
+			};
+		}
+
+		async run(instance) {
+			if (!(instance instanceof WebAssembly.Instance)) {
+				throw new Error("Go.run: WebAssembly.Instance expected");
+			}
+			this._inst = instance;
+			this.mem = new DataView(this._inst.exports.mem.buffer);
+			this._values = [ // JS values that Go currently has references to, indexed by reference id
+				NaN,
+				0,
+				null,
+				true,
+				false,
+				globalThis,
+				this,
+			];
+			this._goRefCounts = new Array(this._values.length).fill(Infinity); // number of references that Go has to a JS value, indexed by reference id
+			this._ids = new Map([ // mapping from JS values to reference ids
+				[0, 1],
+				[null, 2],
+				[true, 3],
+				[false, 4],
+				[globalThis, 5],
+				[this, 6],
+			]);
+			this._idPool = [];   // unused ids that have been garbage collected
+			this.exited = false; // whether the Go program has exited
+
+			// Pass command line arguments and environment variables to WebAssembly by writing them to the linear memory.
+			let offset = 4096;
+
+			const strPtr = (str) => {
+				const ptr = offset;
+				const bytes = encoder.encode(str + "\0");
+				new Uint8Array(this.mem.buffer, offset, bytes.length).set(bytes);
+				offset += bytes.length;
+				if (offset % 8 !== 0) {
+					offset += 8 - (offset % 8);
+				}
+				return ptr;
+			};
+
+			const argc = this.argv.length;
+
+			const argvPtrs = [];
+			this.argv.forEach((arg) => {
+				argvPtrs.push(strPtr(arg));
+			});
+			argvPtrs.push(0);
+
+			const keys = Object.keys(this.env).sort();
+			keys.forEach((key) => {
+				argvPtrs.push(strPtr(`${key}=${this.env[key]}`));
+			});
+			argvPtrs.push(0);
+
+			const argv = offset;
+			argvPtrs.forEach((ptr) => {
+				this.mem.setUint32(offset, ptr, true);
+				this.mem.setUint32(offset + 4, 0, true);
+				offset += 8;
+			});
+
+			// The linker guarantees global data starts from at least wasmMinDataAddr.
+			// Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr.
+			const wasmMinDataAddr = 4096 + 8192;
+			if (offset >= wasmMinDataAddr) {
+				throw new Error("total length of command line and environment variables exceeds limit");
+			}
+
+			this._inst.exports.run(argc, argv);
+			if (this.exited) {
+				this._resolveExitPromise();
+			}
+			await this._exitPromise;
+		}
+
+		_resume() {
+			if (this.exited) {
+				throw new Error("Go program has already exited");
+			}
+			this._inst.exports.resume();
+			if (this.exited) {
+				this._resolveExitPromise();
+			}
+		}
+
+		_makeFuncWrapper(id) {
+			const go = this;
+			return function () {
+				const event = { id: id, this: this, args: arguments };
+				go._pendingEvent = event;
+				go._resume();
+				return event.result;
+			};
+		}
+	}
+})();

frontend/src/App.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-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 {onMounted} from 'vue';
+import {useConfigStore} from '@/stores/configStore';
+import {useSystemStore} from '@/stores/systemStore';
+import {useKeybindingStore} from '@/stores/keybindingStore';
+import {useThemeStore} from '@/stores/themeStore';
+import {useUpdateStore} from '@/stores/updateStore';
+import {useBackupStore} from '@/stores/backupStore';
 import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';
 
 const configStore = useConfigStore();
@@ -12,6 +13,7 @@ const systemStore = useSystemStore();
 const keybindingStore = useKeybindingStore();
 const themeStore = useThemeStore();
 const updateStore = useUpdateStore();
+const backupStore = useBackupStore();
 
 // 应用启动时加载配置和初始化系统信息
 onMounted(async () => {
@@ -26,6 +28,9 @@ onMounted(async () => {
   await configStore.initializeLanguage();
   themeStore.initializeTheme();
   
+  // 初始化备份服务
+  await backupStore.initialize();
+  
   // 启动时检查更新
   await updateStore.checkOnStartup();
 });
@@ -33,7 +38,7 @@ onMounted(async () => {
 
 <template>
   <div class="app-container">
-    <WindowTitleBar />
+    <WindowTitleBar/>
     <div class="app-content">
       <router-view/>
     </div>

frontend/src/assets/styles/variables.css

@@ -28,6 +28,11 @@
   --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;
@@ -55,6 +60,11 @@
   --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);
@@ -83,6 +93,12 @@
   --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;
 }
@@ -116,6 +132,11 @@
     --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);
   }
 }
 
@@ -148,6 +169,11 @@
     --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);
   }
 }
 
@@ -179,6 +205,11 @@
   --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);
 }
 
 /* 手动选择深色主题 */
@@ -207,4 +238,11 @@
   --selection-bg: var(--dark-selection-bg);
   --selection-text: var(--dark-selection-text);
   --text-danger: var(--dark-danger-color);
+  --bg-primary: var(--dark-bg-primary);
+  --bg-hover: var(--dark-bg-hover);
+  --voidraft-bg-gradient: var(--dark-loading-bg-gradient);
+  --voidraft-loading-color: var(--dark-loading-color);
+  --voidraft-loading-glow: var(--dark-loading-glow);
+  --voidraft-loading-done-color: var(--dark-loading-done-color);
+  --voidraft-loading-overlay: var(--dark-loading-overlay);
 }

frontend/src/components/loading/LoadingScreen.vue

@@ -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/titlebar/LinuxTitleBar.vue

@@ -1,27 +1,27 @@
 <template>
-  <div class="linux-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState" @mouseup="checkMaximizedState">
+  <div class="linux-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
     <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
       <div class="titlebar-icon">
-        <img src="/appicon.png" alt="voidraft" />
+        <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')"
+      <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')"
+
+      <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"/>
@@ -31,11 +31,11 @@
           <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')"
+
+      <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"/>
@@ -46,85 +46,56 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import {computed, onMounted, ref} from 'vue';
+import {useI18n} from 'vue-i18n';
 import * as runtime from '@wailsio/runtime';
-import { useWindowStore } from '@/stores/windowStore';
-import { useDocumentStore } from '@/stores/documentStore';
+import {useDocumentStore} from '@/stores/documentStore';
 
-const { t } = useI18n();
+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';
 });
 
+const minimizeWindow = async () => {
+  try {
+    await runtime.Window.Minimise();
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const toggleMaximize = async () => {
+  try {
+    await runtime.Window.ToggleMaximise();
+    await checkMaximizedState();
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const closeWindow = async () => {
+  try {
+    await runtime.Window.Close();
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const checkMaximizedState = async () => {
+  try {
+    isMaximized.value = await runtime.Window.IsMaximised();
+  } catch (error) {
+    console.error(error);
+  }
+};
+
 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>
 
@@ -139,7 +110,7 @@ onUnmounted(() => {
   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;
@@ -155,7 +126,7 @@ onUnmounted(() => {
   font-size: 13px;
   font-weight: 500;
   cursor: default;
-  
+
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
@@ -164,7 +135,7 @@ onUnmounted(() => {
 .titlebar-content .titlebar-icon {
   width: 16px;
   height: 16px;
-  
+
   img {
     width: 100%;
     height: 100%;
@@ -181,7 +152,7 @@ onUnmounted(() => {
 .titlebar-controls {
   display: flex;
   height: 100%;
-  
+
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
@@ -201,22 +172,22 @@ onUnmounted(() => {
   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));
   }
@@ -226,12 +197,12 @@ onUnmounted(() => {
   &:hover {
     background: #e74c3c;
     color: #ffffff;
-    
+
     svg {
       opacity: 1;
     }
   }
-  
+
   &:active {
     background: #c0392b;
   }
@@ -244,19 +215,19 @@ onUnmounted(() => {
     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));
     }
@@ -267,13 +238,13 @@ onUnmounted(() => {
 .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);
     }
@@ -284,11 +255,11 @@ onUnmounted(() => {
 .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);
     }

frontend/src/components/titlebar/MacOSTitleBar.vue

@@ -53,7 +53,6 @@
 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();
@@ -65,26 +64,16 @@ const minimizeWindow = async () => {
   try {
     await runtime.Window.Minimise();
   } catch (error) {
-    // Error handling
+    console.error(error)
   }
 };
 
 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);
+    await runtime.Window.ToggleMaximise();
+    await checkMaximizedState();
   } catch (error) {
-    isMaximized.value = !isMaximized.value;
+    console.error(error)
   }
 };
 
@@ -92,7 +81,7 @@ const closeWindow = async () => {
   try {
     await runtime.Window.Close();
   } catch (error) {
-    // Error handling
+    console.error(error)
   }
 };
 
@@ -100,7 +89,7 @@ const checkMaximizedState = async () => {
   try {
     isMaximized.value = await runtime.Window.IsMaximised();
   } catch (error) {
-    // Error handling
+    console.error(error)
   }
 };
 
@@ -112,24 +101,6 @@ const titleText = computed(() => {
 
 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>
 

frontend/src/components/titlebar/WindowsTitleBar.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState"
-       @mouseup="checkMaximizedState">
+  <div class="windows-titlebar" style="--wails-draggable:drag">
     <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
       <div class="titlebar-icon">
         <img src="/appicon.png" alt="voidraft"/>
@@ -37,11 +36,10 @@
 </template>
 
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, ref} from 'vue';
+import {computed, onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
 import * as runtime from '@wailsio/runtime';
-import { useWindowStore } from '@/stores/windowStore';
-import { useDocumentStore } from '@/stores/documentStore';
+import {useDocumentStore} from '@/stores/documentStore';
 
 const {t} = useI18n();
 const isMaximized = ref(false);
@@ -60,30 +58,16 @@ const minimizeWindow = async () => {
   try {
     await runtime.Window.Minimise();
   } catch (error) {
-    // Error handling
+    console.error(error);
   }
 };
 
 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);
+    await runtime.Window.ToggleMaximise();
+    await checkMaximizedState();
   } catch (error) {
-    // 如果操作失败，恢复原状态
-    isMaximized.value = !isMaximized.value;
+    console.error(error);
   }
 };
 
@@ -91,7 +75,7 @@ const closeWindow = async () => {
   try {
     await runtime.Window.Close();
   } catch (error) {
-    // Error handling
+    console.error(error);
   }
 };
 
@@ -99,31 +83,12 @@ const checkMaximizedState = async () => {
   try {
     isMaximized.value = await runtime.Window.IsMaximised();
   } catch (error) {
-    // Error handling
+    console.error(error);
   }
 };
 
 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>
 

frontend/src/components/toolbar/DocumentSelector.vue

@@ -107,6 +107,12 @@ const selectItem = async (item: any) => {
 // 选择文档
 const selectDoc = async (doc: Document) => {
   try {
+    // 如果选择的就是当前文档，直接关闭菜单
+    if (documentStore.currentDocument?.id === doc.id) {
+      closeMenu();
+      return;
+    }
+
     const hasOpen = await windowStore.isDocumentWindowOpen(doc.id);
     if (hasOpen) {
       // 设置错误状态并启动定时器
@@ -208,16 +214,41 @@ const openInNewWindow = async (doc: Document, event: Event) => {
   }
 };
 
-// 处理删除 - 简化确认机制
+// 处理删除
 const handleDelete = async (doc: Document, event: Event) => {
   event.stopPropagation();
 
   if (deleteConfirmId.value === doc.id) {
-    // 确认删除
+    // 确认删除前检查文档是否在其他窗口打开
     try {
-      await documentStore.deleteDocument(doc.id);
-      await documentStore.updateDocuments();
+      const hasOpen = await windowStore.isDocumentWindowOpen(doc.id);
+      if (hasOpen) {
+        // 设置错误状态并启动定时器
+        alreadyOpenDocId.value = doc.id;
+        
+        // 清除之前的定时器（如果存在）
+        if (errorMessageTimer.value) {
+          clearTimeout(errorMessageTimer.value);
+        }
+        
+        // 设置新的定时器，3秒后清除错误信息
+        errorMessageTimer.value = window.setTimeout(() => {
+          alreadyOpenDocId.value = null;
+          errorMessageTimer.value = null;
+        }, 3000);
+        
+        // 取消删除确认状态
+        deleteConfirmId.value = null;
+        return;
+      }
+      
+      const deleteSuccess = await documentStore.deleteDocument(doc.id);
 
+      if (!deleteSuccess) {
+        return;
+      }
+      
+      await documentStore.updateDocuments();
       // 如果删除的是当前文档，切换到第一个文档
       if (documentStore.currentDocument?.id === doc.id && documentStore.documentList.length > 0) {
         const firstDoc = documentStore.documentList[0];

frontend/src/components/toolbar/Toolbar.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import {useI18n} from 'vue-i18n';
-import {onMounted, onUnmounted, ref, watch, computed} from 'vue';
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
 import {useConfigStore} from '@/stores/configStore';
 import {useEditorStore} from '@/stores/editorStore';
 import {useUpdateStore} from '@/stores/updateStore';
 import {useWindowStore} from '@/stores/windowStore';
+import {useSystemStore} from '@/stores/systemStore';
 import * as runtime from '@wailsio/runtime';
 import {useRouter} from 'vue-router';
 import BlockLanguageSelector from './BlockLanguageSelector.vue';
@@ -17,22 +18,32 @@ const editorStore = useEditorStore();
 const configStore = useConfigStore();
 const updateStore = useUpdateStore();
 const windowStore = useWindowStore();
+const systemStore = useSystemStore();
 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 isCurrentWindowOnTop = computed(() => {
+  return configStore.config.general.alwaysOnTop || systemStore.isWindowOnTop;
+});
 
+// 切换窗口置顶状态
 const toggleAlwaysOnTop = async () => {
-  isCurrentWindowOnTop.value = !isCurrentWindowOnTop.value;
-  await runtime.Window.SetAlwaysOnTop(isCurrentWindowOnTop.value);
+  const currentlyOnTop = isCurrentWindowOnTop.value;
+  
+  if (currentlyOnTop) {
+    // 如果当前是置顶状态，彻底关闭所有置顶
+    if (configStore.config.general.alwaysOnTop) {
+      await configStore.setAlwaysOnTop(false);
+    }
+    await systemStore.setWindowOnTop(false);
+  } else {
+    // 如果当前不是置顶状态，开启临时置顶
+    await systemStore.setWindowOnTop(true);
+  }
 };
 
 // 跳转到设置页面
@@ -59,11 +70,11 @@ const updateFormatButtonState = () => {
     // 获取活动块和语言信息
     const state = view.state;
     const activeBlock = getActiveNoteBlock(state as any);
-    
+
     // 检查块和语言格式化支持
     canFormatCurrentBlock.value = !!(
-      activeBlock && 
-      getLanguage(activeBlock.language.name as any)?.prettier
+        activeBlock &&
+        getLanguage(activeBlock.language.name as any)?.prettier
     );
   } catch (error) {
     console.warn('Error checking format capability:', error);
@@ -74,32 +85,32 @@ const updateFormatButtonState = () => {
 // 创建带300ms防抖的更新函数
 const debouncedUpdateFormatButton = (() => {
   let timeout: number | null = null;
-  
+
   return () => {
     if (timeout) clearTimeout(timeout);
     timeout = window.setTimeout(() => {
       updateFormatButtonState();
       timeout = null;
-    }, 300);
+    }, 1000);
   };
 })();
 
 // 编辑器事件管理
 const setupEditorListeners = (view: any) => {
   if (!view?.dom) return [];
-  
+
   const events = [
-    { type: 'click', handler: updateFormatButtonState },
-    { type: 'keyup', handler: debouncedUpdateFormatButton },
-    { type: 'focus', handler: updateFormatButtonState }
+    {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)
+  return events.map(event =>
+      () => view.dom.removeEventListener(event.type, event.handler)
   );
 };
 
@@ -107,22 +118,22 @@ const setupEditorListeners = (view: any) => {
 let cleanupListeners: (() => void)[] = [];
 
 watch(
-  () => editorStore.editorView,
-  (newView) => {
-    // 清理旧监听器
-    cleanupListeners.forEach(cleanup => cleanup());
-    cleanupListeners = [];
-    
-    if (newView) {
-      // 初始更新状态
-      updateFormatButtonState();
-      // 设置新监听器
-      cleanupListeners = setupEditorListeners(newView);
-    } else {
-      canFormatCurrentBlock.value = false;
-    }
-  },
-  { immediate: true }
+    () => editorStore.editorView,
+    (newView) => {
+      // 清理旧监听器
+      cleanupListeners.forEach(cleanup => cleanup());
+      cleanupListeners = [];
+
+      if (newView) {
+        // 初始更新状态
+        updateFormatButtonState();
+        // 设置新监听器
+        cleanupListeners = setupEditorListeners(newView);
+      } else {
+        canFormatCurrentBlock.value = false;
+      }
+    },
+    {immediate: true}
 );
 
 // 组件生命周期
@@ -143,12 +154,28 @@ onUnmounted(() => {
 // 组件加载后初始化置顶状态
 watch(isLoaded, async (loaded) => {
   if (loaded) {
-    // 初始化时从配置文件读取置顶状态
-    isCurrentWindowOnTop.value = configStore.config.general.alwaysOnTop;
-    await setWindowAlwaysOnTop(isCurrentWindowOnTop.value);
+    // 应用合并后的置顶状态
+    const shouldBeOnTop = configStore.config.general.alwaysOnTop || systemStore.isWindowOnTop;
+    try {
+      await runtime.Window.SetAlwaysOnTop(shouldBeOnTop);
+    } catch (error) {
+      console.error('Failed to apply window pin state:', error);
+    }
   }
 });
 
+// 监听配置变化，同步窗口状态
+watch(
+  () => isCurrentWindowOnTop.value,
+  async (shouldBeOnTop) => {
+    try {
+      await runtime.Window.SetAlwaysOnTop(shouldBeOnTop);
+    } catch (error) {
+      console.error('Failed to sync window pin state:', error);
+    }
+  }
+);
+
 const handleUpdateButtonClick = async () => {
   if (updateStore.hasUpdate && !updateStore.isUpdating && !updateStore.updateSuccess) {
     // 开始下载更新
@@ -230,29 +257,33 @@ const updateButtonTitle = computed(() => {
           @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"
+        <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"
+        <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"
+        <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"/>
+          <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>
@@ -338,39 +369,39 @@ const updateButtonTitle = computed(() => {
       &.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;
         }
@@ -380,7 +411,7 @@ const updateButtonTitle = computed(() => {
       .rotating {
         animation: rotate 1.5s linear infinite;
       }
-      
+
       /* 脉冲动画 */
       .pulsing {
         animation: pulse-strong 1.2s ease-in-out infinite;
@@ -394,7 +425,7 @@ const updateButtonTitle = computed(() => {
           opacity: 0.7;
         }
       }
-      
+
       @keyframes pulse-strong {
         0%, 100% {
           transform: scale(1);
@@ -405,7 +436,7 @@ const updateButtonTitle = computed(() => {
           opacity: 0.8;
         }
       }
-      
+
       @keyframes rotate {
         0% {
           transform: rotate(0deg);

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

@@ -119,18 +119,22 @@ export default {
     general: 'General',
     editing: 'Editor',
     appearance: 'Appearance',
+    backupPage: 'Backup',
     keyBindings: 'Key Bindings',
     updates: 'Updates',
     reset: 'Reset',
+    apply: 'Apply',
+    cancel: 'Cancel',
     dangerZone: 'Danger Zone',
     resetAllSettings: 'Reset All Settings',
-    confirmReset: 'Click again to confirm reset',
+    confirmReset: 'Confirm the reset?',
     globalHotkey: 'Global Keyboard Shortcuts',
     enableGlobalHotkey: 'Enable Global Hotkeys',
     window: 'Window/Application',
     showInSystemTray: 'Show in System Tray',
     enableSystemTray: 'Enable System Tray',
     alwaysOnTop: 'Always on Top',
+    enableWindowSnap: 'Enable Window Snapping',
     startup: 'Startup Settings',
     startAtLogin: 'Start at Login',
     dataStorage: 'Data Storage',
@@ -156,6 +160,40 @@ export default {
       '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',
@@ -206,6 +244,49 @@ export default {
     restartNow: 'Restart Now',
     hotkeyPreview: 'Preview:',
     none: 'None',
+    backup: {
+      basicSettings: 'Basic Settings',
+      enableBackup: 'Enable Git Backup',
+      autoBackup: 'Auto Backup',
+      backupInterval: 'Backup Interval',
+      intervals: {
+        '5min': '5 minutes',
+        '10min': '10 minutes',
+        '15min': '15 minutes',
+        '30min': '30 minutes',
+        '1hour': '1 hour'
+      },
+      repositoryConfig: 'Repository Configuration',
+      repoUrl: 'Repository URL',
+      repoUrlPlaceholder: 'Enter Git repository URL',
+      authConfig: 'Authentication Configuration',
+      authMethod: 'Authentication Method',
+      authMethods: {
+        token: 'Access Token',
+        sshKey: 'SSH Key',
+        userPass: 'Username/Password'
+      },
+      username: 'Username',
+      usernamePlaceholder: 'Enter username',
+      password: 'Password',
+      passwordPlaceholder: 'Enter password',
+      token: 'Access Token',
+      tokenPlaceholder: 'Enter access token',
+      sshKeyPath: 'SSH Key Path',
+      sshKeyPathPlaceholder: 'Select SSH key file',
+      sshKeyPassphrase: 'SSH Key Passphrase',
+      sshKeyPassphrasePlaceholder: 'Enter SSH key passphrase',
+      backupOperations: 'Backup Operations',
+      pushToRemote: 'Push to Remote',
+      pushing: 'Pushing...',
+      actions: {
+        push: 'Push',
+      },
+      status: {
+        success: 'Success',
+        failed: 'Failed'
+      }
+    },
   },
   extensions: {
     rainbowBrackets: {

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

@@ -119,19 +119,23 @@ export default {
     general: '常规',
     editing: '编辑器',
     appearance: '外观',
+    backupPage: '备份',
     extensions: '扩展',
     keyBindings: '快捷键',
     updates: '更新',
     reset: '重置',
+    apply: '应用',
+    cancel: '取消',
     dangerZone: '危险操作',
     resetAllSettings: '重置所有设置',
-    confirmReset: '再次点击确认重置',
+    confirmReset: '确认重置?',
     globalHotkey: '全局键盘快捷键',
     enableGlobalHotkey: '启用全局热键',
     window: '窗口/应用程序',
     showInSystemTray: '在系统托盘中显示',
     enableSystemTray: '启用系统托盘',
     alwaysOnTop: '窗口始终置顶',
+    enableWindowSnap: '启用窗口吸附',
     startup: '启动设置',
     startAtLogin: '开机自启动',
     dataStorage: '数据存储',
@@ -196,6 +200,40 @@ export default {
       '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: '微软雅黑',
@@ -207,6 +245,49 @@ export default {
     },
     hotkeyPreview: '预览：',
     none: '无',
+    backup: {
+      basicSettings: '基本设置',
+      enableBackup: '启用备份',
+      autoBackup: '自动备份',
+      backupInterval: '备份间隔',
+      intervals: {
+        '5min': '5分钟',
+        '10min': '10分钟',
+        '15min': '15分钟',
+        '30min': '30分钟',
+        '1hour': '1小时'
+      },
+      repositoryConfig: '仓库配置',
+      repoUrl: '仓库地址',
+      repoUrlPlaceholder: '请输入Git仓库地址',
+      authConfig: '认证配置',
+      authMethod: '认证方式',
+      authMethods: {
+        token: '访问令牌',
+        sshKey: 'SSH密钥',
+        userPass: '用户名密码'
+      },
+      username: '用户名',
+      usernamePlaceholder: '请输入用户名',
+      password: '密码',
+      passwordPlaceholder: '请输入密码',
+      token: '访问令牌',
+      tokenPlaceholder: '请输入访问令牌',
+      sshKeyPath: 'SSH密钥路径',
+      sshKeyPathPlaceholder: '请选择SSH密钥文件',
+      sshKeyPassphrase: 'SSH密钥密码',
+      sshKeyPassphrasePlaceholder: '请输入SSH密钥密码',
+      backupOperations: '备份操作',
+      pushToRemote: '推送到远程',
+      pushing: '推送中...',
+      actions: {
+        push: '推送',
+      },
+      status: {
+        success: '成功',
+        failed: '失败'
+      }
+    },
   },
   extensions: {
     rainbowBrackets: {

frontend/src/router/index.ts

@@ -7,6 +7,57 @@ import AppearancePage from '@/views/settings/pages/AppearancePage.vue';
 import KeyBindingsPage from '@/views/settings/pages/KeyBindingsPage.vue';
 import UpdatesPage from '@/views/settings/pages/UpdatesPage.vue';
 import ExtensionsPage from '@/views/settings/pages/ExtensionsPage.vue';
+import BackupPage from '@/views/settings/pages/BackupPage.vue';
+// 测试页面
+import TestPage from '@/views/settings/pages/TestPage.vue';
+
+// 基础设置子路由
+const settingsChildren: RouteRecordRaw[] = [
+  {
+    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
+  },
+  {
+    path: 'backup',
+    name: 'SettingsBackup',
+    component: BackupPage
+  }
+];
+
+// 仅在开发环境添加测试页面路由
+if (import.meta.env.DEV) {
+  settingsChildren.push({
+    path: 'test',
+    name: 'SettingsTest',
+    component: TestPage
+  });
+}
 
 const routes: RouteRecordRaw[] = [
   {
@@ -19,38 +70,7 @@ const routes: RouteRecordRaw[] = [
     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
-      }
-    ]
+    children: settingsChildren
   }
 ];
 
@@ -59,4 +79,4 @@ const router = createRouter({
   routes: routes
 });
 
-export default router; 
+export default router;

frontend/src/stores/backupStore.ts

@@ -0,0 +1,123 @@
+import {defineStore} from 'pinia'
+import {computed, readonly, ref} from 'vue'
+import type {GitBackupConfig} from '@/../bindings/voidraft/internal/models'
+import {BackupService} from '@/../bindings/voidraft/internal/services'
+import {useConfigStore} from '@/stores/configStore'
+
+/**
+ * Minimalist Backup Store
+ */
+export const useBackupStore = defineStore('backup', () => {
+    // Core state
+    const config = ref<GitBackupConfig | null>(null)
+    const isPushing = ref(false)
+    const error = ref<string | null>(null)
+    const isInitialized = ref(false)
+    
+    // Backup result states
+    const pushSuccess = ref(false)
+    const pushError = ref(false)
+    
+    // Timers for auto-hiding status icons and error messages
+    let pushStatusTimer: number | null = null
+    let errorTimer: number | null = null
+
+    // 获取configStore
+    const configStore = useConfigStore()
+
+    // Computed properties
+    const isEnabled = computed(() => configStore.config.backup.enabled)
+    const isConfigured = computed(() => configStore.config.backup.repo_url)
+
+    // 清除状态显示
+    const clearPushStatus = () => {
+        if (pushStatusTimer !== null) {
+            window.clearTimeout(pushStatusTimer)
+            pushStatusTimer = null
+        }
+        pushSuccess.value = false
+        pushError.value = false
+    }
+
+    // 清除错误信息和错误图标
+    const clearError = () => {
+        if (errorTimer !== null) {
+            window.clearTimeout(errorTimer)
+            errorTimer = null
+        }
+        error.value = null
+        pushError.value = false
+    }
+
+    // 设置错误信息和错误图标并自动清除
+    const setErrorWithAutoHide = (errorMessage: string, hideAfter: number = 3000) => {
+        clearError()
+        clearPushStatus()
+        error.value = errorMessage
+        pushError.value = true
+        errorTimer = window.setTimeout(() => {
+            error.value = null
+            pushError.value = false
+            errorTimer = null
+        }, hideAfter)
+    }
+
+    // Push to remote repository
+    const pushToRemote = async () => {
+        if (isPushing.value || !isConfigured.value) return
+
+        isPushing.value = true
+        clearError() // 清除之前的错误信息
+        clearPushStatus()
+
+        try {
+            await BackupService.PushToRemote()
+            // 显示成功状态，并设置3秒后自动消失
+            pushSuccess.value = true
+            pushStatusTimer = window.setTimeout(() => {
+                pushSuccess.value = false
+                pushStatusTimer = null
+            }, 3000)
+        } catch (err: any) {
+            setErrorWithAutoHide(err?.message || 'Backup operation failed')
+        } finally {
+            isPushing.value = false
+        }
+    }
+
+    // 初始化备份服务
+    const initialize = async () => {
+        if (!isEnabled.value) return
+        
+        // 避免重复初始化
+        if (isInitialized.value) return
+        
+        clearError() // 清除之前的错误信息
+        try {
+            await BackupService.Initialize()
+            isInitialized.value = true
+        } catch (err: any) {
+            setErrorWithAutoHide(err?.message || 'Failed to initialize backup service')
+        }
+    }
+
+
+    return {
+        // State
+        config: readonly(config),
+        isPushing: readonly(isPushing),
+        error: readonly(error),
+        isInitialized: readonly(isInitialized),
+        pushSuccess: readonly(pushSuccess),
+        pushError: readonly(pushError),
+
+        // Computed
+        isEnabled,
+        isConfigured,
+
+        // Methods
+        pushToRemote,
+        initialize,
+        clearError
+    }
+})

frontend/src/stores/configStore.ts

@@ -11,10 +11,11 @@ import {
     TabType,
     UpdatesConfig,
     UpdateSourceType,
+    GitBackupConfig,
+    AuthMethod
 } 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';
@@ -48,6 +49,10 @@ type UpdatesConfigKeyMap = {
     readonly [K in keyof UpdatesConfig]: string;
 };
 
+type BackupConfigKeyMap = {
+    readonly [K in keyof GitBackupConfig]: string;
+};
+
 type NumberConfigKey = 'fontSize' | 'tabSize' | 'lineHeight';
 
 // 配置键映射
@@ -57,7 +62,8 @@ const GENERAL_CONFIG_KEY_MAP: GeneralConfigKeyMap = {
     enableSystemTray: 'general.enableSystemTray',
     startAtLogin: 'general.startAtLogin',
     enableGlobalHotkey: 'general.enableGlobalHotkey',
-    globalHotkey: 'general.globalHotkey'
+    globalHotkey: 'general.globalHotkey',
+    enableWindowSnap: 'general.enableWindowSnap',
 } as const;
 
 const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {
@@ -87,6 +93,20 @@ const UPDATES_CONFIG_KEY_MAP: UpdatesConfigKeyMap = {
     gitea: 'updates.gitea'
 } as const;
 
+const BACKUP_CONFIG_KEY_MAP: BackupConfigKeyMap = {
+    enabled: 'backup.enabled',
+    repo_url: 'backup.repo_url',
+    auth_method: 'backup.auth_method',
+    username: 'backup.username',
+    password: 'backup.password',
+    token: 'backup.token',
+    ssh_key_path: 'backup.ssh_key_path',
+    ssh_key_passphrase: 'backup.ssh_key_passphrase',
+    backup_interval: 'backup.backup_interval',
+    auto_backup: 'backup.auto_backup',
+
+} as const;
+
 // 配置限制
 const CONFIG_LIMITS = {
     fontSize: {min: 12, max: 28, default: 13},
@@ -157,7 +177,8 @@ const DEFAULT_CONFIG: AppConfig = {
             alt: true,
             win: false,
             key: 'X'
-        }
+        },
+        enableWindowSnap: true,
     },
     editing: {
         fontSize: CONFIG_LIMITS.fontSize.default,
@@ -169,10 +190,10 @@ const DEFAULT_CONFIG: AppConfig = {
         tabType: CONFIG_LIMITS.tabType.default,
         autoSaveDelay: 5000
     },
-    appearance: {
-        language: LanguageType.LangZhCN,
-        systemTheme: SystemThemeType.SystemThemeAuto
-    },
+            appearance: {
+            language: LanguageType.LangZhCN,
+            systemTheme: SystemThemeType.SystemThemeAuto
+        },
     updates: {
         version: "1.0.0",
         autoUpdate: true,
@@ -190,6 +211,18 @@ const DEFAULT_CONFIG: AppConfig = {
             repo: "voidraft",
         }
     },
+    backup: {
+        enabled: false,
+        repo_url: "",
+        auth_method: AuthMethod.UserPass,
+        username: "",
+        password: "",
+        token: "",
+        ssh_key_path: "",
+        ssh_key_passphrase: "",
+        backup_interval: 60,
+        auto_backup: true,
+    },
     metadata: {
         version: '1.0.0',
         lastUpdated: new Date().toString(),
@@ -277,6 +310,21 @@ export const useConfigStore = defineStore('config', () => {
         state.config.updates[key] = value;
     };
 
+    const updateBackupConfig = async <K extends keyof GitBackupConfig>(key: K, value: GitBackupConfig[K]): Promise<void> => {
+        // 确保配置已加载
+        if (!state.configLoaded && !state.isLoading) {
+            await initConfig();
+        }
+
+        const backendKey = BACKUP_CONFIG_KEY_MAP[key];
+        if (!backendKey) {
+            throw new Error(`No backend key mapping found for backup.${key.toString()}`);
+        }
+
+        await ConfigService.Set(backendKey, value);
+        state.config.backup[key] = value;
+    };
+
     // 加载配置
     const initConfig = async (): Promise<void> => {
         if (state.isLoading) return;
@@ -291,14 +339,12 @@ export const useConfigStore = defineStore('config', () => {
                 if (appConfig.editing) Object.assign(state.config.editing, appConfig.editing);
                 if (appConfig.appearance) Object.assign(state.config.appearance, appConfig.appearance);
                 if (appConfig.updates) Object.assign(state.config.updates, appConfig.updates);
+                if (appConfig.backup) Object.assign(state.config.backup, appConfig.backup);
                 if (appConfig.metadata) Object.assign(state.config.metadata, appConfig.metadata);
             }
 
             state.configLoaded = true;
 
-            // 初始化热键监听器
-            const windowController = WindowController.getInstance();
-            await windowController.initializeHotkeyListener();
         } finally {
             state.isLoading = false;
         }
@@ -363,6 +409,8 @@ export const useConfigStore = defineStore('config', () => {
         await updateAppearanceConfig('systemTheme', systemTheme);
     };
 
+
+
     // 初始化语言设置
     const initializeLanguage = async (): Promise<void> => {
         try {
@@ -474,8 +522,23 @@ export const useConfigStore = defineStore('config', () => {
             // 再调用系统设置API
             await StartupService.SetEnabled(value);
         },
+        
+        // 窗口吸附配置相关方法
+        setEnableWindowSnap: async (value: boolean) => await updateGeneralConfig('enableWindowSnap', value),
 
         // 更新配置相关方法
-        setAutoUpdate: async (value: boolean) => await updateUpdatesConfig('autoUpdate', value)
+        setAutoUpdate: async (value: boolean) => await updateUpdatesConfig('autoUpdate', value),
+
+        // 备份配置相关方法
+        setEnableBackup: async (value: boolean) => {await updateBackupConfig('enabled', value);},
+        setAutoBackup: async (value: boolean) => {await updateBackupConfig('auto_backup', value);},
+        setRepoUrl: async (value: string) => await updateBackupConfig('repo_url', value),
+        setAuthMethod: async (value: AuthMethod) => await updateBackupConfig('auth_method', value),
+        setUsername: async (value: string) => await updateBackupConfig('username', value),
+        setPassword: async (value: string) => await updateBackupConfig('password', value),
+        setToken: async (value: string) => await updateBackupConfig('token', value),
+        setSshKeyPath: async (value: string) => await updateBackupConfig('ssh_key_path', value),
+        setSshKeyPassphrase: async (value: string) => await updateBackupConfig('ssh_key_passphrase', value),
+        setBackupInterval: async (value: number) => await updateBackupConfig('backup_interval', value),
     };
 });

frontend/src/stores/documentStore.ts

@@ -3,13 +3,15 @@ import {computed, ref} from 'vue';
 import {DocumentService} from '@/../bindings/voidraft/internal/services';
 import {OpenDocumentWindow} from '@/../bindings/voidraft/internal/services/windowservice';
 import {Document} from '@/../bindings/voidraft/internal/models/models';
+import {useSystemStore} from './systemStore';
 
-const SCRATCH_DOCUMENT_ID = 1; // 默认草稿文档ID
 
 export const useDocumentStore = defineStore('document', () => {
+
+    const DEFAULT_DOCUMENT_ID = ref<number>(1); // 默认草稿文档ID
     // === 核心状态 ===
     const documents = ref<Record<number, Document>>({});
-    const recentDocumentIds = ref<number[]>([SCRATCH_DOCUMENT_ID]);
+    const recentDocumentIds = ref<number[]>([DEFAULT_DOCUMENT_ID.value]);
     const currentDocumentId = ref<number | null>(null);
     const currentDocument = ref<Document | null>(null);
 
@@ -159,7 +161,7 @@ export const useDocumentStore = defineStore('document', () => {
     const deleteDocument = async (docId: number): Promise<boolean> => {
         try {
             // 检查是否是默认文档（使用ID判断）
-            if (docId === SCRATCH_DOCUMENT_ID) {
+            if (docId === DEFAULT_DOCUMENT_ID.value) {
                 return false;
             }
 
@@ -221,6 +223,7 @@ export const useDocumentStore = defineStore('document', () => {
     };
 
     return {
+        DEFAULT_DOCUMENT_ID,
         // 状态
         documents,
         documentList,

frontend/src/stores/editorStore.ts

@@ -65,6 +65,9 @@ export const useEditorStore = defineStore('editor', () => {
         characters: 0,
         selectedCharacters: 0
     });
+    
+    // 编辑器加载状态
+    const isLoading = ref(false);
 
     // 异步操作竞态条件控制
     const operationSequence = ref(0);
@@ -434,10 +437,12 @@ export const useEditorStore = defineStore('editor', () => {
 
     // 加载编辑器
     const loadEditor = async (documentId: number, content: string) => {
+        // 设置加载状态
+        isLoading.value = true;
         // 生成新的操作ID
         const operationId = getNextOperationId();
         const abortController = new AbortController();
-        
+
         try {
             // 验证参数
             if (!documentId) {
@@ -500,15 +505,20 @@ export const useEditorStore = defineStore('editor', () => {
         } catch (error) {
             if (error instanceof Error && error.message === 'Operation cancelled') {
                 console.log(`Editor loading cancelled for document ${documentId}`);
-                return;
+            } else {
+                console.error('Failed to load editor:', error);
             }
-            console.error('Failed to load editor:', error);
         } finally {
             // 清理操作记录
             pendingOperations.value.delete(operationId);
             if (currentLoadingDocumentId.value === documentId) {
                 currentLoadingDocumentId.value = null;
             }
+            
+            // 延迟一段时间后再取消加载状态
+            setTimeout(() => {
+                isLoading.value = false;
+            }, 800);
         }
     };
 
@@ -684,6 +694,7 @@ export const useEditorStore = defineStore('editor', () => {
         // 状态
         currentEditor,
         documentStats,
+        isLoading,
 
         // 方法
         setEditorContainer,

frontend/src/stores/systemStore.ts

@@ -19,14 +19,15 @@ export const useSystemStore = defineStore('system', () => {
     // 状态
     const environment = ref<SystemEnvironment | null>(null);
     const isLoading = ref(false);
-
+    
+    // 窗口置顶状态管理
+    const isWindowOnTop = ref<boolean>(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';
@@ -49,10 +50,31 @@ export const useSystemStore = defineStore('system', () => {
         }
     };
 
+    // 设置窗口置顶状态
+    const setWindowOnTop = async (isPinned: boolean): Promise<void> => {
+        isWindowOnTop.value = isPinned;
+        try {
+            await runtime.Window.SetAlwaysOnTop(isPinned);
+        } catch (error) {
+            console.error('Failed to set window always on top:', error);
+        }
+    };
+
+    // 切换窗口置顶状态
+    const toggleWindowOnTop = async (): Promise<void> => {
+        await setWindowOnTop(!isWindowOnTop.value);
+    };
+
+    // 重置临时置顶状态（不调用系统API）
+    const resetWindowOnTop = (): void => {
+        isWindowOnTop.value = false;
+    };
+
     return {
         // 状态
         environment,
         isLoading,
+        isWindowOnTop,
 
         // 计算属性
         isWindows,
@@ -62,5 +84,14 @@ export const useSystemStore = defineStore('system', () => {
 
         // 方法
         initializeSystemInfo,
+        setWindowOnTop,
+        toggleWindowOnTop,
+        resetWindowOnTop,
     };
+}, {
+    persist: {
+        key: 'voidraft-system',
+        storage: localStorage,
+        pick: ['isWindowOnTop']
+    }
 }); 

frontend/src/stores/themeStore.ts

@@ -1,19 +1,47 @@
-import { defineStore } from 'pinia';
-import { computed } from 'vue';
-import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models';
-import { useConfigStore } from './configStore';
+import {defineStore} from 'pinia';
+import {computed, reactive} from 'vue';
+import {SystemThemeType, ThemeType, ThemeColorConfig} from '@/../bindings/voidraft/internal/models/models';
+import {ThemeService} from '@/../bindings/voidraft/internal/services';
+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 = async () => {
+    try {
+      const themes = await ThemeService.GetDefaultThemes();
+      if (themes.dark) {
+        Object.assign(themeColors.darkTheme, themes.dark.colors);
+      }
+      if (themes.light) {
+        Object.assign(themeColors.lightTheme, themes.light.colors);
+      }
+    } catch (error) {
+      console.warn('Failed to load themes from database, using defaults:', error);
+      // 如果数据库加载失败，使用默认主题
+      Object.assign(themeColors.darkTheme, defaultDarkColors);
+      Object.assign(themeColors.lightTheme, defaultLightColors);
+    }
+  };
 
   // 应用主题到 DOM
   const applyThemeToDOM = (theme: SystemThemeType) => {
@@ -24,21 +52,104 @@ export const useThemeStore = defineStore('theme', () => {
   };
 
   // 初始化主题
-  const initializeTheme = () => {
+  const initializeTheme = async () => {
     const theme = configStore.config?.appearance?.systemTheme || SystemThemeType.SystemThemeAuto;
     applyThemeToDOM(theme);
+    await 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 () => {
+    try {
+      const darkColors = ThemeColorConfig.createFrom(themeColors.darkTheme);
+      const lightColors = ThemeColorConfig.createFrom(themeColors.lightTheme);
+      
+      await ThemeService.UpdateThemeColors(ThemeType.ThemeTypeDark, darkColors);
+      await ThemeService.UpdateThemeColors(ThemeType.ThemeTypeLight, lightColors);
+    } catch (error) {
+      console.error('Failed to save theme colors:', error);
+      throw error;
+    }
+  };
+  
+  // 重置主题颜色
+  const resetThemeColors = async (themeType: 'darkTheme' | 'lightTheme') => {
+    try {
+      const dbThemeType = themeType === 'darkTheme' ? ThemeType.ThemeTypeDark : ThemeType.ThemeTypeLight;
+      
+      // 1. 调用后端重置服务
+      await ThemeService.ResetThemeColors(dbThemeType);
+      
+      // 2. 更新内存中的颜色状态
+      if (themeType === 'darkTheme') {
+        Object.assign(themeColors.darkTheme, defaultDarkColors);
+      } else {
+        Object.assign(themeColors.lightTheme, defaultLightColors);
+      }
+      
+      // 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/utils/prettier/plugins/go/build.bat

@@ -0,0 +1,32 @@
+@echo off
+rem Build script for Go Prettier Plugin WASM
+rem This script compiles the Go code to WebAssembly
+
+echo 🔨 Building Go Prettier Plugin WASM...
+
+rem Set WASM build environment
+set GOOS=js
+set GOARCH=wasm
+
+rem Build the WASM file
+echo Compiling main.go to go.wasm...
+go build -o go.wasm main.go
+
+if %ERRORLEVEL% EQU 0 (
+    echo ✅ Build successful!
+    
+    rem Show file size (Windows version)
+    for %%A in (go.wasm) do echo 📊 WASM file size: %%~zA bytes
+    
+    rem Copy to public directory for browser access
+    if exist "..\..\..\..\..\public" (
+        copy go.wasm ..\..\..\..\..\public\go.wasm > nul
+        echo 📋 Copied to public directory
+    )
+    
+    echo 🎉 Go Prettier Plugin WASM is ready!
+) else (
+    echo ❌ Build failed!
+    pause
+    exit /b 1
+)

frontend/src/utils/prettier/plugins/go/build.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+
+# Build script for Go Prettier Plugin WASM
+# This script compiles the Go code to WebAssembly
+
+echo "🔨 Building Go Prettier Plugin WASM..."
+
+# Set WASM build environment
+export GOOS=js
+export GOARCH=wasm
+
+# Build the WASM file
+echo "Compiling main.go to go.wasm..."
+go build -o go.wasm main.go
+
+if [ $? -eq 0 ]; then
+    echo "✅ Build successful!"
+    echo "📊 WASM file size: $(du -h go.wasm | cut -f1)"
+    
+    # Copy to public directory for browser access
+    if [ -d "../../../../../public" ]; then
+        cp go.wasm ../../../../../public/go.wasm
+        echo "📋 Copied to public directory"
+    fi
+    
+    echo "🎉 Go Prettier Plugin WASM is ready!"
+else
+    echo "❌ Build failed!"
+    exit 1
+fi

frontend/src/utils/prettier/plugins/go/go.d.ts

@@ -0,0 +1,10 @@
+import { Parser, Plugin } from "prettier";
+
+export declare const languages: Plugin["languages"];
+export declare const parsers: {
+  go: Parser;
+};
+export declare const printers: Plugin["printers"];
+
+declare const plugin: Plugin;
+export default plugin;

frontend/src/utils/prettier/plugins/go/go.mjs

@@ -0,0 +1,116 @@
+/**
+ * Go Prettier Plugin for Vite + Vue3 Environment
+ * WebAssembly-based Go code formatter for Prettier
+ */
+
+let initializePromise = null;
+
+// Load WASM file from public directory
+const loadWasm = async () => {
+    try {
+        const response = await fetch('/go.wasm');
+        if (!response.ok) {
+            throw new Error(`Failed to load WASM file: ${response.status} ${response.statusText}`);
+        }
+        return await response.arrayBuffer();
+    } catch (error) {
+        console.error('WASM loading failed:', error);
+        throw error;
+    }
+};
+
+// Initialize Go runtime
+const initGoRuntime = async () => {
+    if (globalThis.Go) return;
+
+    // Auto-load wasm_exec.js if not available
+    try {
+
+        const script = document.createElement('script');
+        script.src = '/wasm_exec.js';
+        document.head.appendChild(script);
+
+        await new Promise((resolve, reject) => {
+            script.onload = resolve;
+            script.onerror = () => reject(new Error('Failed to load wasm_exec.js'));
+            setTimeout(() => reject(new Error('wasm_exec.js loading timeout')), 5000);
+        });
+        if (!globalThis.Go) {
+            throw new Error('Go WASM runtime is not available after loading wasm_exec.js');
+        }
+    } catch (error) {
+        console.error('Failed to load wasm_exec.js:', error);
+        throw error;
+    }
+};
+
+const initialize = async () => {
+    if (initializePromise) return initializePromise;
+
+    initializePromise = (async () => {
+        await initGoRuntime();
+
+        const go = new globalThis.Go();
+        const wasmBuffer = await loadWasm();
+        const {instance} = await WebAssembly.instantiate(wasmBuffer, go.importObject);
+
+        // Run Go program
+        go.run(instance).catch(err => {
+            console.error('Go WASM program exit error:', err);
+        });
+
+        // Wait for initialization to complete
+        await new Promise(resolve => setTimeout(resolve, 200));
+
+        // Check if formatGo function is available
+        if (typeof globalThis.formatGo !== 'function') {
+            throw new Error('Go WASM module not properly initialized - formatGo function not available');
+        }
+    })();
+
+    return initializePromise;
+};
+
+export const languages = [
+    {
+        name: "Go",
+        parsers: ["go"],
+        extensions: [".go"],
+        vscodeLanguageIds: ["go"],
+    },
+];
+
+export const parsers = {
+    go: {
+        parse: (text) => text,
+        astFormat: "go-format",
+        locStart: (node) => 0,
+        locEnd: (node) => node.length,
+    },
+};
+
+export const printers = {
+    "go-format": {
+        print: async (path) => {
+            await initialize();
+            const text = path.getValue();
+
+            if (typeof globalThis.formatGo !== 'function') {
+                throw new Error('Go WASM module not properly initialized - formatGo function missing');
+            }
+
+            try {
+                return globalThis.formatGo(text);
+            } catch (error) {
+                throw new Error(`Go formatting failed: ${error.message}`);
+            }
+        },
+    },
+};
+
+// Default export for Prettier plugin compatibility
+export default {
+    languages,
+    parsers,
+    printers
+};

frontend/src/utils/prettier/plugins/go/main.go

@@ -0,0 +1,255 @@
+//go:build js && wasm
+
+// Package main implements a WebAssembly module that provides Go code formatting
+// functionality for the Prettier plugin. This package exposes the formatGo function
+// to JavaScript, enabling web-based Go code formatting with better error tolerance.
+package main
+
+import (
+	"bytes"
+	"fmt"
+	"go/format"
+	"go/parser"
+	"go/token"
+	"strings"
+	"syscall/js"
+)
+
+// formatGoCode attempts to format Go source code with better error tolerance
+func formatGoCode(src string) (string, error) {
+	// Trim input but preserve leading/trailing newlines structure
+	trimmed := strings.TrimSpace(src)
+	if trimmed == "" {
+		return src, nil
+	}
+
+	// First try the standard format.Source for complete, valid code
+	if formatted, err := format.Source([]byte(src)); err == nil {
+		return string(formatted), nil
+	}
+
+	// Create a new file set for parsing
+	fset := token.NewFileSet()
+
+	// Strategy 1: Try as complete Go file
+	if parsed, err := parser.ParseFile(fset, "", src, parser.ParseComments); err == nil {
+		return formatASTNode(fset, parsed)
+	}
+
+	// Strategy 2: Try wrapping as package-level declarations
+	packageWrapped := fmt.Sprintf("package main\n\n%s", trimmed)
+	if parsed, err := parser.ParseFile(fset, "", packageWrapped, parser.ParseComments); err == nil {
+		if formatted, err := formatASTNode(fset, parsed); err == nil {
+			return extractPackageContent(formatted), nil
+		}
+	}
+
+	// Strategy 3: Try wrapping in main function
+	funcWrapped := fmt.Sprintf("package main\n\nfunc main() {\n%s\n}", indentLines(trimmed, "\t"))
+	if parsed, err := parser.ParseFile(fset, "", funcWrapped, parser.ParseComments); err == nil {
+		if formatted, err := formatASTNode(fset, parsed); err == nil {
+			return extractFunctionBody(formatted), nil
+		}
+	}
+
+	// Strategy 4: Try wrapping in anonymous function
+	anonWrapped := fmt.Sprintf("package main\n\nvar _ = func() {\n%s\n}", indentLines(trimmed, "\t"))
+	if parsed, err := parser.ParseFile(fset, "", anonWrapped, parser.ParseComments); err == nil {
+		if formatted, err := formatASTNode(fset, parsed); err == nil {
+			return extractFunctionBody(formatted), nil
+		}
+	}
+
+	// Strategy 5: Try line-by-line formatting for complex cases
+	return formatLineByLine(trimmed, fset)
+}
+
+// formatASTNode formats an AST node using the standard formatter
+func formatASTNode(fset *token.FileSet, node interface{}) (string, error) {
+	var buf bytes.Buffer
+	if err := format.Node(&buf, fset, node); err != nil {
+		return "", err
+	}
+	return buf.String(), nil
+}
+
+// extractPackageContent extracts content after package declaration
+func extractPackageContent(formatted string) string {
+	lines := strings.Split(formatted, "\n")
+	var contentLines []string
+	skipNext := false
+
+	for _, line := range lines {
+		if strings.HasPrefix(line, "package ") {
+			skipNext = true
+			continue
+		}
+		if skipNext && strings.TrimSpace(line) == "" {
+			skipNext = false
+			continue
+		}
+		if !skipNext {
+			contentLines = append(contentLines, line)
+		}
+	}
+
+	return strings.Join(contentLines, "\n")
+}
+
+// extractFunctionBody extracts content from within a function body
+func extractFunctionBody(formatted string) string {
+	lines := strings.Split(formatted, "\n")
+	var bodyLines []string
+	inFunction := false
+	braceCount := 0
+
+	for _, line := range lines {
+		if strings.Contains(line, "func ") && strings.Contains(line, "{") {
+			inFunction = true
+			braceCount = 1
+			continue
+		}
+
+		if inFunction {
+			// Count braces to know when function ends
+			braceCount += strings.Count(line, "{")
+			braceCount -= strings.Count(line, "}")
+
+			if braceCount == 0 {
+				break
+			}
+
+			// Remove one level of indentation and add the line
+			if strings.HasPrefix(line, "\t") {
+				bodyLines = append(bodyLines, line[1:])
+			} else {
+				bodyLines = append(bodyLines, line)
+			}
+		}
+	}
+
+	// Remove empty lines from start and end
+	for len(bodyLines) > 0 && strings.TrimSpace(bodyLines[0]) == "" {
+		bodyLines = bodyLines[1:]
+	}
+	for len(bodyLines) > 0 && strings.TrimSpace(bodyLines[len(bodyLines)-1]) == "" {
+		bodyLines = bodyLines[:len(bodyLines)-1]
+	}
+
+	return strings.Join(bodyLines, "\n")
+}
+
+// indentLines adds indentation to each non-empty line
+func indentLines(text, indent string) string {
+	lines := strings.Split(text, "\n")
+	var indentedLines []string
+
+	for _, line := range lines {
+		if strings.TrimSpace(line) == "" {
+			indentedLines = append(indentedLines, "")
+		} else {
+			indentedLines = append(indentedLines, indent+line)
+		}
+	}
+
+	return strings.Join(indentedLines, "\n")
+}
+
+// formatLineByLine attempts to format each statement individually
+func formatLineByLine(src string, fset *token.FileSet) (string, error) {
+	lines := strings.Split(src, "\n")
+	var formattedLines []string
+
+	for _, line := range lines {
+		trimmedLine := strings.TrimSpace(line)
+		if trimmedLine == "" {
+			formattedLines = append(formattedLines, "")
+			continue
+		}
+
+		// Try different wrapping strategies for individual lines
+		attempts := []string{
+			fmt.Sprintf("package main\n\nfunc main() {\n\t%s\n}", trimmedLine),
+			fmt.Sprintf("package main\n\n%s", trimmedLine),
+			fmt.Sprintf("package main\n\nvar _ = %s", trimmedLine),
+		}
+
+		formatted := trimmedLine // fallback
+		for _, attempt := range attempts {
+			if parsed, err := parser.ParseFile(fset, "", attempt, parser.ParseComments); err == nil {
+				if result, err := formatASTNode(fset, parsed); err == nil {
+					if extracted := extractSingleStatement(result, trimmedLine); extracted != "" {
+						formatted = extracted
+						break
+					}
+				}
+			}
+		}
+
+		formattedLines = append(formattedLines, formatted)
+	}
+
+	return strings.Join(formattedLines, "\n"), nil
+}
+
+// extractSingleStatement tries to extract a single formatted statement
+func extractSingleStatement(formatted, original string) string {
+	lines := strings.Split(formatted, "\n")
+
+	for _, line := range lines {
+		trimmed := strings.TrimSpace(line)
+		if trimmed != "" && !strings.HasPrefix(trimmed, "package ") &&
+			!strings.HasPrefix(trimmed, "func ") && !strings.HasPrefix(trimmed, "var _ =") &&
+			trimmed != "{" && trimmed != "}" {
+			// Remove leading tabs/spaces to normalize indentation
+			return strings.TrimLeft(line, " \t")
+		}
+	}
+
+	return original
+}
+
+// formatGo is a JavaScript-callable function that formats Go source code.
+// It attempts multiple strategies to format code, including handling incomplete
+// or syntactically invalid code fragments.
+//
+// Parameters:
+//   - this: The JavaScript 'this' context (unused)
+//   - i: JavaScript arguments array where i[0] should contain the Go source code as a string
+//
+// Returns:
+//   - js.Value: The formatted Go source code as a JavaScript string value
+//   - If formatting fails completely, returns the original code unchanged
+//   - If no arguments are provided, returns js.Null() and logs an error
+func formatGo(this js.Value, i []js.Value) interface{} {
+	if len(i) == 0 {
+		js.Global().Get("console").Call("error", "formatGo: missing code argument")
+		return js.Null()
+	}
+
+	code := i[0].String()
+	if strings.TrimSpace(code) == "" {
+		return js.ValueOf(code)
+	}
+
+	formatted, err := formatGoCode(code)
+	if err != nil {
+		js.Global().Get("console").Call("warn", "Go formatting had issues:", err.Error())
+		return js.ValueOf(code) // Return original code if all attempts fail
+	}
+
+	return js.ValueOf(formatted)
+}
+
+// main initializes the WebAssembly module and exposes the formatGo function
+// to the JavaScript global scope.
+func main() {
+	// Create a channel to keep the Go program running
+	c := make(chan struct{}, 0)
+
+	// Expose the formatGo function to the JavaScript global scope
+	js.Global().Set("formatGo", js.FuncOf(formatGo))
+
+	// Block forever
+	<-c
+}

frontend/src/utils/prettier/plugins/php/index.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from "prettier";
+
+declare const plugin: Plugin;
+export default plugin;

frontend/src/utils/prettier/plugins/php/index.mjs

@@ -0,0 +1,19 @@
+export {
+  languages, 
+  printers, 
+  parsers, 
+  options, 
+  defaultOptions 
+} from './src/index.mjs';
+
+import { languages, printers, parsers, options, defaultOptions } from './src/index.mjs';
+
+const phpPlugin = {
+  languages,
+  printers, 
+  parsers,
+  options,
+  defaultOptions
+};
+
+export default phpPlugin;

frontend/src/utils/prettier/plugins/php/src/clean.mjs

@@ -0,0 +1,111 @@
+import { printNumber, normalizeMagicMethodName } from "./util.mjs";
+
+const ignoredProperties = new Set([
+  "loc",
+  "range",
+  "raw",
+  "comments",
+  "leadingComments",
+  "trailingComments",
+  "parenthesizedExpression",
+  "parent",
+  "prev",
+  "start",
+  "end",
+  "tokens",
+  "errors",
+  "extra",
+]);
+
+/**
+ * This function takes the existing ast node and a copy, by reference
+ * We use it for testing, so that we can compare pre-post versions of the AST,
+ * excluding things we don't care about (like node location, case that will be
+ * changed by the printer, etc.)
+ */
+function clean(node, newObj) {
+  if (node.kind === "string") {
+    // TODO if options are available in this method, replace with
+    // newObj.isDoubleQuote = !useSingleQuote(node, options);
+    delete newObj.isDoubleQuote;
+  }
+
+  if (["array", "list"].includes(node.kind)) {
+    // TODO if options are available in this method, assign instead of delete
+    delete newObj.shortForm;
+  }
+
+  if (node.kind === "inline") {
+    if (node.value.includes("___PSEUDO_INLINE_PLACEHOLDER___")) {
+      return null;
+    }
+
+    newObj.value = newObj.value.replace(/\n/g, "");
+  }
+
+  // continue ((2)); -> continue 2;
+  // continue 1; -> continue;
+  if ((node.kind === "continue" || node.kind === "break") && node.level) {
+    const { level } = newObj;
+
+    if (level.kind === "number") {
+      newObj.level = level.value === "1" ? null : level;
+    }
+  }
+
+  // if () {{ }} -> if () {}
+  if (node.kind === "block") {
+    if (node.children.length === 1 && node.children[0].kind === "block") {
+      while (newObj.children[0].kind === "block") {
+        newObj.children = newObj.children[0].children;
+      }
+    }
+  }
+
+  // Normalize numbers
+  if (node.kind === "number") {
+    newObj.value = printNumber(node.value);
+  }
+
+  const statements = ["foreach", "for", "if", "while", "do"];
+
+  if (statements.includes(node.kind)) {
+    if (node.body && node.body.kind !== "block") {
+      newObj.body = {
+        kind: "block",
+        children: [newObj.body],
+      };
+    } else {
+      newObj.body = newObj.body ? newObj.body : null;
+    }
+
+    if (node.alternate && node.alternate.kind !== "block") {
+      newObj.alternate = {
+        kind: "block",
+        children: [newObj.alternate],
+      };
+    } else {
+      newObj.alternate = newObj.alternate ? newObj.alternate : null;
+    }
+  }
+
+  if (node.kind === "usegroup" && typeof node.name === "string") {
+    newObj.name = newObj.name.replace(/^\\/, "");
+  }
+
+  if (node.kind === "useitem") {
+    newObj.name = newObj.name.replace(/^\\/, "");
+  }
+
+  if (node.kind === "method" && node.name.kind === "identifier") {
+    newObj.name.name = normalizeMagicMethodName(newObj.name.name);
+  }
+
+  if (node.kind === "noop") {
+    return null;
+  }
+}
+
+clean.ignoredProperties = ignoredProperties;
+
+export default clean;

frontend/src/utils/prettier/plugins/php/src/index.mjs

@@ -0,0 +1,173 @@
+import { doc } from "prettier";
+import LINGUIST_LANGUAGES_PHP from "linguist-languages/data/PHP";
+import LINGUIST_LANGUAGES_HTML_PHP from "linguist-languages/data/HTML_2b_PHP";
+import parse from "./parser.mjs";
+import print from "./printer.mjs";
+import clean from "./clean.mjs";
+import options from "./options.mjs";
+import {
+  handleOwnLineComment,
+  handleEndOfLineComment,
+  handleRemainingComment,
+  getCommentChildNodes,
+  canAttachComment,
+  isBlockComment,
+} from "./comments.mjs";
+import { hasPragma, insertPragma } from "./pragma.mjs";
+import { locStart, locEnd } from "./loc.mjs";
+
+const { join, hardline } = doc.builders;
+
+function createLanguage(linguistData, { extend, override }) {
+  const language = {};
+
+  for (const key in linguistData) {
+    const newKey = key === "languageId" ? "linguistLanguageId" : key;
+    language[newKey] = linguistData[key];
+  }
+
+  if (extend) {
+    for (const key in extend) {
+      language[key] = (language[key] || []).concat(extend[key]);
+    }
+  }
+
+  for (const key in override) {
+    language[key] = override[key];
+  }
+
+  return language;
+}
+
+const languages = [
+  createLanguage(LINGUIST_LANGUAGES_PHP, {
+    override: {
+      parsers: ["php"],
+      vscodeLanguageIds: ["php"],
+    },
+  }),
+  createLanguage(LINGUIST_LANGUAGES_HTML_PHP, {
+    override: {
+      parsers: ["php"],
+      vscodeLanguageIds: ["php"],
+    },
+  }),
+];
+
+const parsers = {
+  php: {
+    parse,
+    astFormat: "php",
+    locStart,
+    locEnd,
+    hasPragma,
+  },
+};
+
+const ignoredKeys = new Set([
+  "kind",
+  "loc",
+  "errors",
+  "extra",
+  "comments",
+  "leadingComments",
+  "enclosingNode",
+  "precedingNode",
+  "followingNode",
+]);
+function getVisitorKeys(node, nonTraversableKeys) {
+  return Object.keys(node).filter(
+    (key) => !nonTraversableKeys.has(key) && !ignoredKeys.has(key)
+  );
+}
+
+const printers = {
+  php: {
+    print,
+    getVisitorKeys,
+    insertPragma,
+    massageAstNode: clean,
+    getCommentChildNodes,
+    canAttachComment,
+    isBlockComment,
+    handleComments: {
+      ownLine: handleOwnLineComment,
+      endOfLine: handleEndOfLineComment,
+      remaining: handleRemainingComment,
+    },
+    willPrintOwnComments(path) {
+      const { node } = path;
+
+      return node && node.kind === "noop";
+    },
+    printComment(path) {
+      const comment = path.node;
+
+      switch (comment.kind) {
+        case "commentblock": {
+          // for now, don't touch single line block comments
+          if (!comment.value.includes("\n")) {
+            return comment.value;
+          }
+
+          const lines = comment.value.split("\n");
+          // if this is a block comment, handle indentation
+          if (
+            lines
+              .slice(1, lines.length - 1)
+              .every((line) => line.trim()[0] === "*")
+          ) {
+            return join(
+              hardline,
+              lines.map(
+                (line, index) =>
+                  (index > 0 ? " " : "") +
+                  (index < lines.length - 1 ? line.trim() : line.trimLeft())
+              )
+            );
+          }
+
+          // otherwise we can't be sure about indentation, so just print as is
+          return comment.value;
+        }
+        case "commentline": {
+          return comment.value.trimRight();
+        }
+        /* c8 ignore next 2 */
+        default:
+          throw new Error(`Not a comment: ${JSON.stringify(comment)}`);
+      }
+    },
+    hasPrettierIgnore(path) {
+      const isSimpleIgnore = (comment) =>
+        comment.value.includes("prettier-ignore") &&
+        !comment.value.includes("prettier-ignore-start") &&
+        !comment.value.includes("prettier-ignore-end");
+
+      const { node, parent: parentNode } = path;
+
+      return (
+        (node &&
+          node.kind !== "classconstant" &&
+          node.comments &&
+          node.comments.length > 0 &&
+          node.comments.some(isSimpleIgnore)) ||
+        // For proper formatting, the classconstant ignore formatting should
+        // run on the "constant" child
+        (node &&
+          node.kind === "constant" &&
+          parentNode &&
+          parentNode.kind === "classconstant" &&
+          parentNode.comments &&
+          parentNode.comments.length > 0 &&
+          parentNode.comments.some(isSimpleIgnore))
+      );
+    },
+  },
+};
+
+const defaultOptions = {
+  tabWidth: 4,
+};
+
+export { languages, printers, parsers, options, defaultOptions };

frontend/src/utils/prettier/plugins/php/src/loc.mjs

@@ -0,0 +1,4 @@
+const loc = (prop) => (node) => node.loc?.[prop]?.offset;
+
+export const locStart = loc("start");
+export const locEnd = loc("end");

frontend/src/utils/prettier/plugins/php/src/needs-parens.mjs

@@ -0,0 +1,250 @@
+import { getPrecedence, shouldFlatten, isBitwiseOperator } from "./util.mjs";
+
+function needsParens(path, options) {
+  const { parent } = path;
+
+  if (!parent) {
+    return false;
+  }
+
+  const { key, node } = path;
+
+  if (
+    [
+      //  No need parens for top level children of this nodes
+      "program",
+      "expressionstatement",
+      "namespace",
+      "declare",
+      "block",
+
+      // No need parens
+      "include",
+      "print",
+      "return",
+      "echo",
+    ].includes(parent.kind)
+  ) {
+    return false;
+  }
+
+  switch (node.kind) {
+    case "pre":
+    case "post":
+      if (parent.kind === "unary") {
+        return (
+          node.kind === "pre" &&
+          ((node.type === "+" && parent.type === "+") ||
+            (node.type === "-" && parent.type === "-"))
+        );
+      }
+    // else fallthrough
+    case "unary":
+      switch (parent.kind) {
+        case "unary":
+          return (
+            node.type === parent.type &&
+            (node.type === "+" || node.type === "-")
+          );
+        case "propertylookup":
+        case "nullsafepropertylookup":
+        case "staticlookup":
+        case "offsetlookup":
+        case "call":
+          return key === "what";
+        case "bin":
+          return parent.type === "**" && key === "left";
+        default:
+          return false;
+      }
+    case "bin": {
+      switch (parent.kind) {
+        case "assign":
+        case "retif":
+          return ["and", "xor", "or"].includes(node.type);
+        case "silent":
+        case "cast":
+          // TODO: bug https://github.com/glayzzle/php-parser/issues/172
+          return node.parenthesizedExpression;
+        case "pre":
+        case "post":
+        case "unary":
+          return true;
+        case "call":
+        case "propertylookup":
+        case "nullsafepropertylookup":
+        case "staticlookup":
+        case "offsetlookup":
+          return key === "what";
+        case "bin": {
+          const po = parent.type;
+          const pp = getPrecedence(po);
+          const no = node.type;
+          const np = getPrecedence(no);
+
+          if (pp > np) {
+            return true;
+          }
+
+          if (po === "||" && no === "&&") {
+            return true;
+          }
+
+          if (pp === np && key === "right") {
+            return true;
+          }
+
+          if (pp === np && !shouldFlatten(po, no)) {
+            return true;
+          }
+
+          if (pp < np && no === "%") {
+            return po === "+" || po === "-";
+          }
+
+          // Add parenthesis when working with bitwise operators
+          // It's not stricly needed but helps with code understanding
+          if (isBitwiseOperator(po)) {
+            return true;
+          }
+
+          return false;
+        }
+
+        default:
+          return false;
+      }
+    }
+    case "propertylookup":
+    case "nullsafepropertylookup":
+    case "staticlookup": {
+      switch (parent.kind) {
+        case "call":
+          return key === "what" && node.parenthesizedExpression;
+
+        default:
+          return false;
+      }
+    }
+    case "clone":
+    case "new": {
+      const requiresParens =
+        node.kind === "clone" ||
+        (node.kind === "new" && options.phpVersion < 8.4);
+      switch (parent.kind) {
+        case "propertylookup":
+        case "nullsafepropertylookup":
+        case "staticlookup":
+        case "offsetlookup":
+        case "call":
+          return key === "what" && requiresParens;
+        default:
+          return false;
+      }
+    }
+    case "yield": {
+      switch (parent.kind) {
+        case "propertylookup":
+        case "nullsafepropertylookup":
+        case "staticlookup":
+        case "offsetlookup":
+        case "call":
+          return key === "what";
+
+        case "retif":
+          return key === "test";
+
+        default:
+          return !!(node.key || node.value);
+      }
+    }
+    case "assign": {
+      if (
+        parent.kind === "for" &&
+        (parent.init.includes(node) || parent.increment.includes(node))
+      ) {
+        return false;
+      } else if (parent.kind === "assign") {
+        return false;
+      } else if (parent.kind === "static") {
+        return false;
+      } else if (
+        ["if", "do", "while", "foreach", "switch"].includes(parent.kind)
+      ) {
+        return false;
+      } else if (parent.kind === "silent") {
+        return false;
+      } else if (parent.kind === "call") {
+        return false;
+      }
+
+      return true;
+    }
+    case "retif":
+      switch (parent.kind) {
+        case "cast":
+          return true;
+        case "unary":
+        case "bin":
+        case "retif":
+          if (key === "test" && !parent.trueExpr) {
+            return false;
+          }
+
+          return true;
+        case "propertylookup":
+        case "nullsafepropertylookup":
+        case "staticlookup":
+        case "offsetlookup":
+        case "call":
+          return key === "what";
+
+        default:
+          return false;
+      }
+    case "closure":
+      switch (parent.kind) {
+        case "call":
+          return key === "what";
+
+        // https://github.com/prettier/plugin-php/issues/1675
+        case "propertylookup":
+        case "nullsafepropertylookup":
+          return true;
+
+        default:
+          return false;
+      }
+    case "silence":
+    case "cast":
+      // TODO: bug https://github.com/glayzzle/php-parser/issues/172
+      return node.parenthesizedExpression;
+    // else fallthrough
+    case "string":
+    case "array":
+      switch (parent.kind) {
+        case "propertylookup":
+        case "nullsafepropertylookup":
+        case "staticlookup":
+        case "offsetlookup":
+        case "call":
+          if (
+            ["string", "array"].includes(node.kind) &&
+            parent.kind === "offsetlookup"
+          ) {
+            return false;
+          }
+
+          return key === "what";
+        default:
+          return false;
+      }
+    case "print":
+    case "include":
+      return parent.kind === "bin";
+  }
+
+  return false;
+}
+
+export default needsParens;

frontend/src/utils/prettier/plugins/php/src/options.mjs

@@ -0,0 +1,69 @@
+const CATEGORY_PHP = "PHP";
+
+// prettier-ignore
+const SUPPORTED_PHP_VERSIONS = [
+  5.0, 5.1, 5.2, 5.3, 5.4, 5.5, 5.6,
+  7.0, 7.1, 7.2, 7.3, 7.4,
+  8.0, 8.1, 8.2, 8.3, 8.4,
+];
+
+export const LATEST_SUPPORTED_PHP_VERSION = Math.max(...SUPPORTED_PHP_VERSIONS);
+
+/**
+ * Resolve the PHP version to a number based on the provided options.
+ */
+export function resolvePhpVersion(options) {
+  if (!options) {
+    return;
+  }
+  
+  if (options.phpVersion === "auto" || options.phpVersion === "composer") {
+    options.phpVersion = LATEST_SUPPORTED_PHP_VERSION;
+  } else {
+    options.phpVersion = parseFloat(options.phpVersion);
+  }
+}
+
+export default {
+  phpVersion: {
+    since: "0.13.0",
+    category: CATEGORY_PHP,
+    type: "choice",
+    default: "auto",
+    description: "Minimum target PHP version.",
+    choices: [
+      ...SUPPORTED_PHP_VERSIONS.map((v) => ({ value: v.toFixed(1) })),
+      {
+        value: "auto",
+        description: `Use latest PHP Version (${LATEST_SUPPORTED_PHP_VERSION})`,
+      },
+    ],
+  },
+  trailingCommaPHP: {
+    since: "0.0.0",
+    category: CATEGORY_PHP,
+    type: "boolean",
+    default: true,
+    description: "Print trailing commas wherever possible when multi-line.",
+  },
+  braceStyle: {
+    since: "0.10.0",
+    category: CATEGORY_PHP,
+    type: "choice",
+    default: "per-cs",
+    description:
+      "Print one space or newline for code blocks (classes and functions).",
+    choices: [
+      { value: "psr-2", description: "(deprecated) Use per-cs" },
+      { value: "per-cs", description: "Use the PER Coding Style brace style." },
+      { value: "1tbs", description: "Use 1tbs brace style." },
+    ],
+  },
+  singleQuote: {
+    since: "0.0.0",
+    category: CATEGORY_PHP,
+    type: "boolean",
+    default: false,
+    description: "Use single quotes instead of double quotes.",
+  },
+};

frontend/src/utils/prettier/plugins/php/src/parser.mjs

@@ -0,0 +1,67 @@
+import engine from "php-parser";
+import { LATEST_SUPPORTED_PHP_VERSION } from "./options.mjs";
+import { resolvePhpVersion } from "./options.mjs";
+
+function parse(text, opts) {
+  const inMarkdown = opts && opts.parentParser === "markdown";
+
+  if (!text && inMarkdown) {
+    return "";
+  }
+  resolvePhpVersion(opts);
+
+  // Todo https://github.com/glayzzle/php-parser/issues/170
+  text = text.replace(/\?>\n<\?/g, "?>\n___PSEUDO_INLINE_PLACEHOLDER___<?");
+
+  // initialize a new parser instance
+  const parser = new engine({
+    parser: {
+      extractDoc: true,
+      version: `${LATEST_SUPPORTED_PHP_VERSION}`,
+    },
+    ast: {
+      withPositions: true,
+      withSource: true,
+    },
+  });
+
+  const hasOpenPHPTag = text.indexOf("<?php") !== -1;
+  const parseAsEval = inMarkdown && !hasOpenPHPTag;
+
+  let ast;
+  try {
+    ast = parseAsEval ? parser.parseEval(text) : parser.parseCode(text);
+  } catch (err) {
+    if (err instanceof SyntaxError && "lineNumber" in err) {
+      err.loc = {
+        start: {
+          line: err.lineNumber,
+          column: err.columnNumber,
+        },
+      };
+
+      delete err.lineNumber;
+      delete err.columnNumber;
+    }
+
+    throw err;
+  }
+
+  ast.extra = {
+    parseAsEval,
+  };
+
+  // https://github.com/glayzzle/php-parser/issues/155
+  // currently inline comments include the line break at the end, we need to
+  // strip those out and update the end location for each comment manually
+  ast.comments.forEach((comment) => {
+    if (comment.value[comment.value.length - 1] === "\n") {
+      comment.value = comment.value.slice(0, -1);
+      comment.loc.end.offset = comment.loc.end.offset - 1;
+    }
+  });
+
+  return ast;
+}
+
+export default parse;

frontend/src/utils/prettier/plugins/php/src/pragma.mjs

@@ -0,0 +1,92 @@
+import { memoize } from "./util.mjs";
+import parse from "./parser.mjs";
+
+const reHasPragma = /@prettier|@format/;
+
+const getPageLevelDocBlock = memoize((text) => {
+  const parsed = parse(text);
+
+  const [firstChild] = parsed.children;
+  const [firstDocBlock] = parsed.comments.filter(
+    (el) => el.kind === "commentblock"
+  );
+
+  if (
+    firstChild &&
+    firstDocBlock &&
+    firstDocBlock.loc.start.line < firstChild.loc.start.line
+  ) {
+    return firstDocBlock;
+  }
+});
+
+function hasPragma(text) {
+  // fast path optimization - check if the pragma shows up in the file at all
+  if (!reHasPragma.test(text)) {
+    return false;
+  }
+
+  const pageLevelDocBlock = getPageLevelDocBlock(text);
+
+  if (pageLevelDocBlock) {
+    const { value } = pageLevelDocBlock;
+
+    return reHasPragma.test(value);
+  }
+
+  return false;
+}
+
+function injectPragma(docblock) {
+  let lines = docblock.split("\n");
+
+  if (lines.length === 1) {
+    // normalize to multiline for simplicity
+    const [, line] = /\/*\*\*(.*)\*\//.exec(lines[0]);
+
+    lines = ["/**", ` * ${line.trim()}`, " */"];
+  }
+
+  // find the first @pragma
+  // if there happens to be one on the opening line, just put it on the next line.
+  const pragmaIndex = lines.findIndex((line) => /@\S/.test(line)) || 1;
+
+  // not found => index == -1, which conveniently will splice 1 from the end.
+  lines.splice(pragmaIndex, 0, " * @format");
+
+  return lines.join("\n");
+}
+
+function insertPragma(text) {
+  const pageLevelDocBlock = getPageLevelDocBlock(text);
+
+  if (pageLevelDocBlock) {
+    const {
+      start: { offset: startOffset },
+      end: { offset: endOffset },
+    } = pageLevelDocBlock.loc;
+    const before = text.substring(0, startOffset);
+    const after = text.substring(endOffset);
+
+    return `${before}${injectPragma(pageLevelDocBlock.value, text)}${after}`;
+  }
+
+  const openTag = "<?php";
+
+  if (!text.startsWith(openTag)) {
+    // bail out
+    return text;
+  }
+
+  const splitAt = openTag.length;
+  const phpTag = text.substring(0, splitAt);
+  const after = text.substring(splitAt);
+
+  return `${phpTag}
+/** 
+ * @format 
+ */
+${after}`;
+}
+
+export { hasPragma, insertPragma };

frontend/src/utils/prettier/plugins/php/src/util.mjs

@@ -0,0 +1,743 @@
+import { util as prettierUtil } from "prettier";
+import { locStart } from "./loc.mjs";
+
+const { hasNewline, skipEverythingButNewLine, skipNewline } = prettierUtil;
+
+function printNumber(rawNumber) {
+  return (
+    rawNumber
+      .toLowerCase()
+      // Remove unnecessary plus and zeroes from scientific notation.
+      .replace(/^([+-]?[\d.]+e)(?:\+|(-))?0*(\d)/, "$1$2$3")
+      // Remove unnecessary scientific notation (1e0).
+      .replace(/^([+-]?[\d.]+)e[+-]?0+$/, "$1")
+      // Make sure numbers always start with a digit.
+      .replace(/^([+-])?\./, "$10.")
+      // Remove extraneous trailing decimal zeroes.
+      .replace(/(\.\d+?)0+(?=e|$)/, "$1")
+      // Remove unnecessary .e notation
+      .replace(/\.(?=e)/, "")
+  );
+}
+
+// http://php.net/manual/en/language.operators.precedence.php
+const PRECEDENCE = new Map(
+  [
+    ["or"],
+    ["xor"],
+    ["and"],
+    [
+      "=",
+      "+=",
+      "-=",
+      "*=",
+      "**=",
+      "/=",
+      ".=",
+      "%=",
+      "&=",
+      "|=",
+      "^=",
+      "<<=",
+      ">>=",
+    ],
+    ["??"],
+    ["||"],
+    ["&&"],
+    ["|"],
+    ["^"],
+    ["&"],
+    ["==", "===", "!=", "!==", "<>", "<=>"],
+    ["<", ">", "<=", ">="],
+    [">>", "<<"],
+    ["+", "-", "."],
+    ["*", "/", "%"],
+    ["!"],
+    ["instanceof"],
+    ["++", "--", "~"],
+    ["**"],
+  ].flatMap((operators, index) =>
+    operators.map((operator) => [operator, index])
+  )
+);
+function getPrecedence(operator) {
+  return PRECEDENCE.get(operator);
+}
+
+const equalityOperators = ["==", "!=", "===", "!==", "<>", "<=>"];
+const multiplicativeOperators = ["*", "/", "%"];
+const bitshiftOperators = [">>", "<<"];
+
+function isBitwiseOperator(operator) {
+  return (
+    !!bitshiftOperators[operator] ||
+    operator === "|" ||
+    operator === "^" ||
+    operator === "&"
+  );
+}
+
+function shouldFlatten(parentOp, nodeOp) {
+  if (getPrecedence(nodeOp) !== getPrecedence(parentOp)) {
+    return false;
+  }
+
+  // ** is right-associative
+  // x ** y ** z --> x ** (y ** z)
+  if (parentOp === "**") {
+    return false;
+  }
+
+  // x == y == z --> (x == y) == z
+  if (
+    equalityOperators.includes(parentOp) &&
+    equalityOperators.includes(nodeOp)
+  ) {
+    return false;
+  }
+
+  // x * y % z --> (x * y) % z
+  if (
+    (nodeOp === "%" && multiplicativeOperators.includes(parentOp)) ||
+    (parentOp === "%" && multiplicativeOperators.includes(nodeOp))
+  ) {
+    return false;
+  }
+
+  // x * y / z --> (x * y) / z
+  // x / y * z --> (x / y) * z
+  if (
+    nodeOp !== parentOp &&
+    multiplicativeOperators.includes(nodeOp) &&
+    multiplicativeOperators.includes(parentOp)
+  ) {
+    return false;
+  }
+
+  // x << y << z --> (x << y) << z
+  if (
+    bitshiftOperators.includes(parentOp) &&
+    bitshiftOperators.includes(nodeOp)
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+function nodeHasStatement(node) {
+  return [
+    "block",
+    "program",
+    "namespace",
+    "class",
+    "enum",
+    "interface",
+    "trait",
+    "traituse",
+    "declare",
+  ].includes(node.kind);
+}
+
+function getBodyFirstChild({ body }) {
+  if (!body) {
+    return null;
+  }
+  if (body.kind === "block") {
+    body = body.children;
+  }
+  return body[0];
+}
+
+function getNodeListProperty(node) {
+  const body = node.children || node.body || node.adaptations;
+  return Array.isArray(body) ? body : null;
+}
+
+function getLast(arr) {
+  if (arr.length > 0) {
+    return arr[arr.length - 1];
+  }
+  return null;
+}
+
+function getPenultimate(arr) {
+  if (arr.length > 1) {
+    return arr[arr.length - 2];
+  }
+  return null;
+}
+
+function isFirstChildrenInlineNode(path) {
+  const { node } = path;
+
+  if (node.kind === "program") {
+    const children = getNodeListProperty(node);
+
+    if (!children || children.length === 0) {
+      return false;
+    }
+
+    return children[0].kind === "inline";
+  }
+
+  if (node.kind === "switch") {
+    if (!node.body) {
+      return false;
+    }
+
+    const children = getNodeListProperty(node.body);
+
+    if (children.length === 0) {
+      return false;
+    }
+
+    const [firstCase] = children;
+
+    if (!firstCase.body) {
+      return false;
+    }
+
+    const firstCaseChildren = getNodeListProperty(firstCase.body);
+
+    if (firstCaseChildren.length === 0) {
+      return false;
+    }
+
+    return firstCaseChildren[0].kind === "inline";
+  }
+
+  const firstChild = getBodyFirstChild(node);
+
+  if (!firstChild) {
+    return false;
+  }
+
+  return firstChild.kind === "inline";
+}
+
+function isDocNode(node) {
+  return (
+    node.kind === "nowdoc" ||
+    (node.kind === "encapsed" && node.type === "heredoc")
+  );
+}
+
+/**
+ * Heredoc/Nowdoc nodes need a trailing linebreak if they
+ * appear as function arguments or array elements
+ */
+function docShouldHaveTrailingNewline(path, recurse = 0) {
+  const node = path.getNode(recurse);
+  const parent = path.getNode(recurse + 1);
+  const parentParent = path.getNode(recurse + 2);
+
+  if (!parent) {
+    return false;
+  }
+
+  if (
+    (parentParent &&
+      ["call", "new", "echo"].includes(parentParent.kind) &&
+      !["call", "array"].includes(parent.kind)) ||
+    parent.kind === "parameter"
+  ) {
+    const lastIndex = parentParent.arguments.length - 1;
+    const index = parentParent.arguments.indexOf(parent);
+
+    return index !== lastIndex;
+  }
+
+  if (parentParent && parentParent.kind === "for") {
+    const initIndex = parentParent.init.indexOf(parent);
+
+    if (initIndex !== -1) {
+      return initIndex !== parentParent.init.length - 1;
+    }
+
+    const testIndex = parentParent.test.indexOf(parent);
+
+    if (testIndex !== -1) {
+      return testIndex !== parentParent.test.length - 1;
+    }
+
+    const incrementIndex = parentParent.increment.indexOf(parent);
+
+    if (incrementIndex !== -1) {
+      return incrementIndex !== parentParent.increment.length - 1;
+    }
+  }
+
+  if (parent.kind === "bin") {
+    return (
+      parent.left === node || docShouldHaveTrailingNewline(path, recurse + 1)
+    );
+  }
+
+  if (parent.kind === "case" && parent.test === node) {
+    return true;
+  }
+
+  if (parent.kind === "staticvariable") {
+    const lastIndex = parentParent.variables.length - 1;
+    const index = parentParent.variables.indexOf(parent);
+
+    return index !== lastIndex;
+  }
+
+  if (parent.kind === "entry") {
+    if (parent.key === node) {
+      return true;
+    }
+
+    const lastIndex = parentParent.items.length - 1;
+    const index = parentParent.items.indexOf(parent);
+
+    return index !== lastIndex;
+  }
+
+  if (["call", "new"].includes(parent.kind)) {
+    const lastIndex = parent.arguments.length - 1;
+    const index = parent.arguments.indexOf(node);
+
+    return index !== lastIndex;
+  }
+
+  if (parent.kind === "echo") {
+    const lastIndex = parent.expressions.length - 1;
+    const index = parent.expressions.indexOf(node);
+
+    return index !== lastIndex;
+  }
+
+  if (parent.kind === "array") {
+    const lastIndex = parent.items.length - 1;
+    const index = parent.items.indexOf(node);
+
+    return index !== lastIndex;
+  }
+
+  if (parent.kind === "retif") {
+    return docShouldHaveTrailingNewline(path, recurse + 1);
+  }
+
+  return false;
+}
+
+function lineShouldEndWithSemicolon(path) {
+  const { node, parent: parentNode } = path;
+  if (!parentNode) {
+    return false;
+  }
+  // for single line control structures written in a shortform (ie without a block),
+  // we need to make sure the single body node gets a semicolon
+  if (
+    ["for", "foreach", "while", "do", "if", "switch"].includes(
+      parentNode.kind
+    ) &&
+    node.kind !== "block" &&
+    node.kind !== "if" &&
+    (parentNode.body === node || parentNode.alternate === node)
+  ) {
+    return true;
+  }
+  if (!nodeHasStatement(parentNode)) {
+    return false;
+  }
+  if (node.kind === "echo" && node.shortForm) {
+    return false;
+  }
+  if (node.kind === "traituse") {
+    return !node.adaptations;
+  }
+  if (node.kind === "method" && node.isAbstract) {
+    return true;
+  }
+  if (node.kind === "method") {
+    const { parent } = path;
+    if (parent && parent.kind === "interface") {
+      return true;
+    }
+  }
+  return [
+    "expressionstatement",
+    "do",
+    "usegroup",
+    "classconstant",
+    "propertystatement",
+    "traitprecedence",
+    "traitalias",
+    "goto",
+    "constantstatement",
+    "enumcase",
+    "global",
+    "static",
+    "echo",
+    "unset",
+    "return",
+    "break",
+    "continue",
+    "throw",
+  ].includes(node.kind);
+}
+
+function fileShouldEndWithHardline(path) {
+  const { node } = path;
+  const isProgramNode = node.kind === "program";
+  const lastNode = node.children && getLast(node.children);
+
+  if (!isProgramNode) {
+    return false;
+  }
+
+  if (lastNode && ["halt", "inline"].includes(lastNode.kind)) {
+    return false;
+  }
+
+  if (
+    lastNode &&
+    (lastNode.kind === "declare" || lastNode.kind === "namespace")
+  ) {
+    const lastNestedNode =
+      lastNode.children.length > 0 && getLast(lastNode.children);
+
+    if (lastNestedNode && ["halt", "inline"].includes(lastNestedNode.kind)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function maybeStripLeadingSlashFromUse(name) {
+  const nameWithoutLeadingSlash = name.replace(/^\\/, "");
+  if (nameWithoutLeadingSlash.indexOf("\\") !== -1) {
+    return nameWithoutLeadingSlash;
+  }
+  return name;
+}
+
+function hasDanglingComments(node) {
+  return (
+    node.comments &&
+    node.comments.some((comment) => !comment.leading && !comment.trailing)
+  );
+}
+
+function isLookupNode(node) {
+  return (
+    node.kind === "propertylookup" ||
+    node.kind === "nullsafepropertylookup" ||
+    node.kind === "staticlookup" ||
+    node.kind === "offsetlookup"
+  );
+}
+
+function shouldPrintHardLineAfterStartInControlStructure(path) {
+  const { node } = path;
+
+  if (["try", "catch"].includes(node.kind)) {
+    return false;
+  }
+
+  return isFirstChildrenInlineNode(path);
+}
+
+function shouldPrintHardLineBeforeEndInControlStructure(path) {
+  const { node } = path;
+
+  if (["try", "catch"].includes(node.kind)) {
+    return true;
+  }
+
+  if (node.kind === "switch") {
+    const children = getNodeListProperty(node.body);
+
+    if (children.length === 0) {
+      return true;
+    }
+
+    const lastCase = getLast(children);
+
+    if (!lastCase.body) {
+      return true;
+    }
+
+    const childrenInCase = getNodeListProperty(lastCase.body);
+
+    if (childrenInCase.length === 0) {
+      return true;
+    }
+
+    return childrenInCase[0].kind !== "inline";
+  }
+
+  return !isFirstChildrenInlineNode(path);
+}
+
+function getAlignment(text) {
+  const lines = text.split("\n");
+  const lastLine = lines.pop();
+
+  return lastLine.length - lastLine.trimLeft().length + 1;
+}
+
+function isProgramLikeNode(node) {
+  return ["program", "declare", "namespace"].includes(node.kind);
+}
+
+function isReferenceLikeNode(node) {
+  return [
+    "name",
+    "parentreference",
+    "selfreference",
+    "staticreference",
+  ].includes(node.kind);
+}
+
+// Return `logical` value for `bin` node containing `||` or `&&` type otherwise return kind of node.
+// Require for grouping logical and binary nodes in right way.
+function getNodeKindIncludingLogical(node) {
+  if (node.kind === "bin" && ["||", "&&"].includes(node.type)) {
+    return "logical";
+  }
+
+  return node.kind;
+}
+
+/**
+ * Check if string can safely be converted from double to single quotes and vice-versa, i.e.
+ *
+ * - no embedded variables ("foo $bar")
+ * - no linebreaks
+ * - no special characters like \n, \t, ...
+ * - no octal/hex/unicode characters
+ *
+ * See https://php.net/manual/en/language.types.string.php#language.types.string.syntax.double
+ */
+function useDoubleQuote(node, options) {
+  if (node.isDoubleQuote === options.singleQuote) {
+    // We have a double quote and the user passed singleQuote:true, or the other way around.
+    const rawValue = node.raw.slice(node.raw[0] === "b" ? 2 : 1, -1);
+    const isComplex = rawValue.match(
+      /\\([$nrtfve]|[xX][0-9a-fA-F]{1,2}|[0-7]{1,3}|u{([0-9a-fA-F]+)})|\r?\n|'|"|\$/
+    );
+    return node.isDoubleQuote ? isComplex : !isComplex;
+  }
+  return node.isDoubleQuote;
+}
+
+function hasEmptyBody(path, name = "body") {
+  const { node } = path;
+
+  return (
+    node[name] &&
+    node[name].children &&
+    node[name].children.length === 0 &&
+    (!node[name].comments || node[name].comments.length === 0)
+  );
+}
+
+function isNextLineEmptyAfterNamespace(text, node) {
+  let idx = locStart(node);
+  idx = skipEverythingButNewLine(text, idx);
+  idx = skipNewline(text, idx);
+  return hasNewline(text, idx);
+}
+
+function shouldPrintHardlineBeforeTrailingComma(lastElem) {
+  if (
+    lastElem.kind === "nowdoc" ||
+    (lastElem.kind === "encapsed" && lastElem.type === "heredoc")
+  ) {
+    return true;
+  }
+
+  if (
+    lastElem.kind === "entry" &&
+    (lastElem.value.kind === "nowdoc" ||
+      (lastElem.value.kind === "encapsed" && lastElem.value.type === "heredoc"))
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+function getAncestorCounter(path, typeOrTypes) {
+  const types = [].concat(typeOrTypes);
+  let counter = -1;
+  let ancestorNode;
+  while ((ancestorNode = path.getParentNode(++counter))) {
+    if (types.indexOf(ancestorNode.kind) !== -1) {
+      return counter;
+    }
+  }
+  return -1;
+}
+
+function getAncestorNode(path, typeOrTypes) {
+  const counter = getAncestorCounter(path, typeOrTypes);
+  return counter === -1 ? null : path.getParentNode(counter);
+}
+
+const magicMethods = [
+  "__construct",
+  "__destruct",
+  "__call",
+  "__callStatic",
+  "__get",
+  "__set",
+  "__isset",
+  "__unset",
+  "__sleep",
+  "__wakeup",
+  "__toString",
+  "__invoke",
+  "__set_state",
+  "__clone",
+  "__debugInfo",
+];
+const magicMethodsMap = new Map(
+  magicMethods.map((name) => [name.toLowerCase(), name])
+);
+
+function normalizeMagicMethodName(name) {
+  const loweredName = name.toLowerCase();
+
+  if (magicMethodsMap.has(loweredName)) {
+    return magicMethodsMap.get(loweredName);
+  }
+
+  return name;
+}
+
+/**
+ * @param {string[]} kindsArray
+ * @returns {(node: Node | Comment) => Boolean}
+ */
+function createTypeCheckFunction(kindsArray) {
+  const kinds = new Set(kindsArray);
+  return (node) => kinds.has(node?.kind);
+}
+
+const isSingleWordType = createTypeCheckFunction([
+  "variadicplaceholder",
+  "namedargument",
+  "nullkeyword",
+  "identifier",
+  "parameter",
+  "variable",
+  "variadic",
+  "boolean",
+  "literal",
+  "number",
+  "string",
+  "clone",
+  "cast",
+]);
+
+const isArrayExpression = createTypeCheckFunction(["array"]);
+const isCallLikeExpression = createTypeCheckFunction([
+  "nullsafepropertylookup",
+  "propertylookup",
+  "staticlookup",
+  "offsetlookup",
+  "call",
+  "new",
+]);
+const isArrowFuncExpression = createTypeCheckFunction(["arrowfunc"]);
+
+function getChainParts(node, prev = []) {
+  const parts = prev;
+  if (isCallLikeExpression(node)) {
+    parts.push(node);
+  }
+
+  if (!node.what) {
+    return parts;
+  }
+
+  return getChainParts(node.what, parts);
+}
+
+function isSimpleCallArgument(node, depth = 2) {
+  if (depth <= 0) {
+    return false;
+  }
+
+  const isChildSimple = (child) => isSimpleCallArgument(child, depth - 1);
+
+  if (isSingleWordType(node)) {
+    return true;
+  }
+
+  if (isArrayExpression(node)) {
+    return node.items.every((x) => x === null || isChildSimple(x));
+  }
+
+  if (isCallLikeExpression(node)) {
+    const parts = getChainParts(node);
+    parts.unshift();
+
+    return (
+      parts.length <= depth &&
+      parts.every((node) =>
+        isLookupNode(node)
+          ? isChildSimple(node.offset)
+          : node.arguments.every(isChildSimple)
+      )
+    );
+  }
+
+  if (isArrowFuncExpression(node)) {
+    return (
+      node.arguments.length <= depth && node.arguments.every(isChildSimple)
+    );
+  }
+
+  return false;
+}
+
+function memoize(fn) {
+  const cache = new Map();
+  return (key) => {
+    if (!cache.has(key)) {
+      cache.set(key, fn(key));
+    }
+    return cache.get(key);
+  };
+}
+
+export {
+  printNumber,
+  getPrecedence,
+  isBitwiseOperator,
+  shouldFlatten,
+  nodeHasStatement,
+  getLast,
+  getPenultimate,
+  getBodyFirstChild,
+  lineShouldEndWithSemicolon,
+  fileShouldEndWithHardline,
+  maybeStripLeadingSlashFromUse,
+  hasDanglingComments,
+  docShouldHaveTrailingNewline,
+  isLookupNode,
+  isFirstChildrenInlineNode,
+  shouldPrintHardLineAfterStartInControlStructure,
+  shouldPrintHardLineBeforeEndInControlStructure,
+  getAlignment,
+  isProgramLikeNode,
+  isReferenceLikeNode,
+  getNodeKindIncludingLogical,
+  useDoubleQuote,
+  hasEmptyBody,
+  isNextLineEmptyAfterNamespace,
+  shouldPrintHardlineBeforeTrailingComma,
+  isDocNode,
+  getAncestorNode,
+  normalizeMagicMethodName,
+  isSimpleCallArgument,
+  memoize,
+};

frontend/src/utils/prettier/plugins/sql/languages.js

@@ -0,0 +1,30 @@
+// SQL语言定义
+export const languages = [
+  {
+    name: "SQL",
+    parsers: ["sql"],
+    extensions: [
+      ".sql", 
+      ".ddl", 
+      ".dml", 
+      ".hql", 
+      ".psql", 
+      ".plsql",
+      ".mysql",
+      ".mssql",
+      ".pgsql",
+      ".sqlite",
+      ".bigquery",
+      ".snowflake",
+      ".redshift",
+      ".db2",
+      ".n1ql",
+      ".cql"
+    ],
+    filenames: [
+      "*.sql",
+      "*.ddl", 
+      "*.dml"
+    ]
+  }
+];

frontend/src/utils/prettier/plugins/sql/sql.d.ts

@@ -0,0 +1,40 @@
+import { AST, Option } from 'node-sql-parser';
+import { Options, ParserOptions, Plugin } from 'prettier';
+import {
+  FormatOptions,
+  FormatOptionsWithLanguage,
+} from 'sql-formatter';
+
+export type SqlBaseOptions = Option &
+  Partial<
+    | (FormatOptions & { dialect: string })
+    | (FormatOptionsWithLanguage & { dialect?: never })
+  > & {
+    formatter?: 'sql-formatter' | 'node-sql-parser' | 'sql-cst';
+    params?: string;
+    paramTypes?: string;
+    autoDetectDialect?: boolean;
+  };
+
+export type SqlOptions = ParserOptions<AST> & SqlBaseOptions;
+export type SqlFormatOptions = Options & SqlBaseOptions;
+export declare const languages: Plugin["languages"];
+
+export declare const parsers: {
+  sql: {
+    parse(text: string, options?: SqlOptions): AST | string;
+    astFormat: 'sql';
+    locStart(): number;
+    locEnd(): number;
+  };
+};
+
+export declare const printers: Plugin["printers"];
+
+export declare const options: Plugin["options"];
+
+export declare function detectDialect(sql: string): string;
+
+declare const SqlPlugin: Plugin<AST | string>;
+
+export default SqlPlugin;

frontend/src/utils/prettier/plugins/sql/sql.mjs

@@ -0,0 +1,459 @@
+import { JSOX } from 'jsox';
+import nodeSqlParser from 'node-sql-parser';
+import {
+  format,
+  formatDialect,
+} from 'sql-formatter';
+import { detectDialect } from './detect.mjs';
+import { languages } from './languages.js';
+
+const parser = new nodeSqlParser.Parser();
+
+const SQL_FORMATTER = 'sql-formatter';
+const NODE_SQL_PARSER = 'node-sql-parser';
+
+// Parsers
+export const parsers = {
+    sql: {
+    parse(text, options = {}) {
+      const { formatter, type, database } = options;
+      
+      return formatter === SQL_FORMATTER
+        ? text
+        : parser.astify(text, { type, database });
+    },
+    astFormat: 'sql',
+    locStart: () => -1,
+    locEnd: () => -1,
+  },
+};
+
+// Printers
+export const printers = {
+  sql: {
+    print(path, options = {}) {
+      const value = path.node;
+      const {
+        formatter = SQL_FORMATTER,
+        type,
+        database,
+        dialect,
+        language,
+        params,
+        paramTypes,
+        autoDetectDialect = true,
+        ...formatOptions
+      } = options;
+
+      let formatted;
+
+      if (typeof value === 'string') {
+        // 准备sql-formatter选项
+        const sqlFormatterOptions = {
+          ...formatOptions,
+          params:
+            params == null
+              ? undefined
+              : JSOX.parse(params),
+          paramTypes:
+            paramTypes == null
+              ? undefined
+              : JSOX.parse(paramTypes),
+        };
+
+        let finalLanguage = language;
+        let finalDialect = dialect;
+        
+        if (autoDetectDialect && !language && !dialect) {
+          const detectedDialect = detectDialect(value);
+          finalLanguage = detectedDialect;
+        }
+
+        // 使用适当的格式化方法
+        if (finalDialect != null) {
+          // 使用formatDialect方法
+          formatted = formatDialect(value, {
+            ...sqlFormatterOptions,
+            dialect: JSOX.parse(finalDialect),
+          });
+        } else {
+          // 使用format方法
+          formatted = format(value, {
+            ...sqlFormatterOptions,
+            language: finalLanguage,
+          });
+        }
+      } else {
+        // 使用node-sql-parser进行格式化
+        formatted = parser.sqlify(value, { type, database });
+      }
+
+      return formatted + '\n';
+    },
+  },
+};
+
+// 插件选项
+export const options = {
+  formatter: {
+    category: 'Config',
+    type: 'choice',
+    default: SQL_FORMATTER,
+    description: 'Choose which formatter to be used',
+    choices: [
+      {
+        value: SQL_FORMATTER,
+        description: 'use `sql-formatter` as formatter',
+      },
+      {
+        value: NODE_SQL_PARSER,
+        description: 'use `node-sql-parser` as formatter',
+      },
+    ],
+  },
+  autoDetectDialect: {
+    category: 'Config',
+    type: 'boolean',
+    default: true,
+    description: 'Automatically detect SQL dialect if language/dialect is not specified',
+  },
+  dialect: {
+    category: 'Config',
+    type: 'string',
+    description: 'SQL dialect for `sql-formatter` formatDialect()',
+  },
+  language: {
+    category: 'Config',
+    type: 'choice',
+    default: 'sql',
+    description: 'SQL dialect for `sql-formatter` format()',
+    choices: [
+      {
+        value: 'sql',
+        description: 'Standard SQL: https://en.wikipedia.org/wiki/SQL:2011',
+      },
+      {
+        value: 'bigquery',
+        description:
+          'Google Standard SQL (Bigquery): https://cloud.google.com/bigquery',
+      },
+      {
+        value: 'db2',
+        description: 'IBM DB2: https://www.ibm.com/products/db2',
+      },
+      {
+        value: 'db2i',
+        description:
+          'IBM DB2i (experimental): https://www.ibm.com/docs/en/i/7.5?topic=overview-db2-i',
+      },
+      {
+        value: 'hive',
+        description: 'Apache Hive: https://hive.apache.org',
+      },
+      {
+        value: 'mariadb',
+        description: 'MariaDB: https://mariadb.com',
+      },
+      {
+        value: 'mysql',
+        description: 'MySQL: https://www.mysql.com',
+      },
+      {
+        value: 'n1ql',
+        description:
+          'Couchbase N1QL: https://www.couchbase.com/products/n1ql',
+      },
+      {
+        value: 'plsql',
+        description:
+          'Oracle PL/SQL: https://www.oracle.com/database/technologies/appdev/plsql.html',
+      },
+      {
+        value: 'postgresql',
+        description: 'PostgreSQL: https://www.postgresql.org',
+      },
+      {
+        value: 'redshift',
+        description:
+          'Amazon Redshift: https://docs.aws.amazon.com/redshift/latest/dg/cm_chap_SQLCommandRef.html',
+      },
+      {
+        value: 'singlestoredb',
+        description:
+          'SingleStoreDB: https://docs.singlestore.com/db/v7.8/en/introduction/singlestore-documentation.html',
+      },
+      {
+        value: 'snowflake',
+        description: 'Snowflake: https://docs.snowflake.com',
+      },
+      {
+        value: 'spark',
+        description: 'Spark: https://spark.apache.org',
+      },
+      {
+        value: 'sqlite',
+        description: 'SQLite: https://www.sqlite.org',
+      },
+      {
+        value: 'transactsql',
+        description:
+          'SQL Server Transact-SQL: https://docs.microsoft.com/en-us/sql/sql-server/',
+      },
+      {
+        value: 'tsql',
+        description:
+          'SQL Server Transact-SQL: https://docs.microsoft.com/en-us/sql/sql-server/',
+      },
+      {
+        value: 'trino',
+        description: 'Trino: https://trino.io',
+      },
+    ],
+  },
+  keywordCase: {
+    category: 'Output',
+    type: 'choice',
+    default: 'preserve',
+    description:
+      'Converts reserved keywords to upper- or lowercase for `sql-formatter`',
+    choices: [
+      {
+        value: 'preserve',
+        description: 'preserves the original case of reserved keywords',
+      },
+      {
+        value: 'upper',
+        description: 'converts reserved keywords to uppercase',
+      },
+      {
+        value: 'lower',
+        description: 'converts reserved keywords to lowercase',
+      },
+    ],
+  },
+  dataTypeCase: {
+    category: 'Output',
+    type: 'choice',
+    default: 'preserve',
+    description:
+      'Converts data types to upper- or lowercase for `sql-formatter`',
+    choices: [
+      {
+        value: 'preserve',
+        description: 'preserves the original case of data types',
+      },
+      {
+        value: 'upper',
+        description: 'converts data types to uppercase',
+      },
+      {
+        value: 'lower',
+        description: 'converts data types to lowercase',
+      },
+    ],
+  },
+  functionCase: {
+    category: 'Output',
+    type: 'choice',
+    default: 'preserve',
+    description:
+      'Converts functions to upper- or lowercase for `sql-formatter`',
+    choices: [
+      {
+        value: 'preserve',
+        description: 'preserves the original case of functions',
+      },
+      {
+        value: 'upper',
+        description: 'converts functions to uppercase',
+      },
+      {
+        value: 'lower',
+        description: 'converts functions to lowercase',
+      },
+    ],
+  },
+  identifierCase: {
+    category: 'Output',
+    type: 'choice',
+    default: 'preserve',
+    description:
+      'Converts identifiers to upper- or lowercase for `sql-formatter`. Only unquoted identifiers are converted. (experimental)',
+    choices: [
+      {
+        value: 'preserve',
+        description: 'preserves the original case of identifiers',
+      },
+      {
+        value: 'upper',
+        description: 'converts identifiers to uppercase',
+      },
+      {
+        value: 'lower',
+        description: 'converts identifiers to lowercase',
+      },
+    ],
+  },
+  uppercase: {
+    category: 'Output',
+    type: 'boolean',
+    deprecated: '0.7.0',
+    description: 'Use `keywordCase` option instead',
+  },
+  indentStyle: {
+    category: 'Format',
+    type: 'choice',
+    default: 'standard',
+    description: `Switches between different indentation styles for \`sql-formatter\`.
+
+    Caveats of using \`"tabularLeft"\` and \`"tabularRight"\`:
+
+    - \`tabWidth\` option is ignored. Indentation will always be 10 spaces, regardless of what is specified by \`tabWidth\``,
+    choices: [
+      {
+        value: 'standard',
+        description:
+          'indents code by the amount specified by `tabWidth` option',
+      },
+      {
+        value: 'tabularLeft',
+        description:
+          'indents in tabular style with 10 spaces, aligning keywords to left',
+      },
+      {
+        value: 'tabularRight',
+        description:
+          'indents in tabular style with 10 spaces, aligning keywords to right',
+      },
+    ],
+  },
+  logicalOperatorNewline: {
+    category: 'Format',
+    type: 'choice',
+    default: 'before',
+    description:
+      'Decides newline placement before or after logical operators (AND, OR, XOR)',
+    choices: [
+      {
+        value: 'before',
+        description: 'adds newline before the operator',
+      },
+      {
+        value: 'after',
+        description: 'adds newline after the operator',
+      },
+    ],
+  },
+  expressionWidth: {
+    category: 'Format',
+    type: 'int',
+    default: 50,
+    description:
+      'Determines maximum length of parenthesized expressions for `sql-formatter`',
+  },
+  linesBetweenQueries: {
+    category: 'Format',
+    type: 'int',
+    default: 1,
+    description:
+      'Decides how many empty lines to leave between SQL statements for `sql-formatter`',
+  },
+  denseOperators: {
+    category: 'Format',
+    type: 'boolean',
+    default: false,
+    description:
+      'Decides whitespace around operators for `sql-formatter`. Does not apply to logical operators (AND, OR, XOR).',
+  },
+  newlineBeforeSemicolon: {
+    category: 'Format',
+    type: 'boolean',
+    default: false,
+    description:
+      'Whether to place query separator (`;`) on a separate line for `sql-formatter`',
+  },
+  params: {
+    category: 'Format',
+    type: 'string',
+    description:
+      'Specifies `JSOX` **stringified** parameter values to fill in for placeholders inside SQL for `sql-formatter`. This option is designed to be used through API (though nothing really prevents usage from command line).',
+  },
+  paramTypes: {
+    category: 'Config',
+    type: 'string',
+    description:
+      'Specifies `JSOX` **stringified** parameter types to support when parsing SQL prepared statements for `sql-formatter`.',
+  },
+  type: {
+    category: 'Config',
+    type: 'choice',
+    default: 'table',
+    description: 'Check the SQL with Authority List for `node-sql-parser`',
+    choices: [
+      {
+        value: 'table',
+        description: '`table` mode',
+      },
+      {
+        value: 'column',
+        description: '`column` mode',
+      },
+    ],
+  },
+  database: {
+    category: 'Config',
+    type: 'choice',
+    default: 'mysql',
+    description: 'SQL dialect for `node-sql-parser`',
+    choices: [
+      {
+        value: 'bigquery',
+        description: 'BigQuery: https://cloud.google.com/bigquery',
+      },
+      {
+        value: 'db2',
+        description: 'IBM DB2: https://www.ibm.com/analytics/db2',
+      },
+      {
+        value: 'hive',
+        description: 'Hive: https://hive.apache.org',
+      },
+      {
+        value: 'mariadb',
+        description: 'MariaDB: https://mariadb.com',
+      },
+      {
+        value: 'mysql',
+        description: 'MySQL: https://www.mysql.com',
+      },
+      {
+        value: 'postgresql',
+        description: 'PostgreSQL: https://www.postgresql.org',
+      },
+      {
+        value: 'transactsql',
+        description:
+          'TransactSQL: https://docs.microsoft.com/en-us/sql/t-sql',
+      },
+      {
+        value: 'flinksql',
+        description:
+          'FlinkSQL: https://ci.apache.org/projects/flink/flink-docs-stable',
+      },
+      {
+        value: 'snowflake',
+        description: 'Snowflake (alpha): https://docs.snowflake.com',
+      },
+    ],
+  },
+};
+
+const SqlPlugin = {
+    languages,
+    parsers,
+  printers,
+  options,
+};
+
+export { languages };
+export default SqlPlugin;