🚀 Add build and release workflows

⬆️ Bump vite from 7.1.10 to 7.1.11 in /frontend

.github/workflows/build-release.yml

@@ -0,0 +1,286 @@
+name: Build and Release Voidraft
+
+on:
+  # 推送标签时触发（用于正式发布）
+  push:
+    tags:
+      - 'v*'  # 触发条件：推送 v 开头的标签，如 v1.0.0
+    branches:
+      - main  # 仅当标签在 main 分支时触发
+  
+  # 手动触发（用于测试）
+  workflow_dispatch:
+    inputs:
+      release:
+        description: '是否创建 Release（测试时选 false）'
+        required: true
+        type: boolean
+        default: false
+      platforms:
+        description: '要构建的平台（用逗号分隔：windows,linux,macos-intel,macos-arm）'
+        required: true
+        type: string
+        default: 'windows,linux'
+
+env:
+  NODE_OPTIONS: "--max-old-space-size=4096"  # 防止 Node.js 内存溢出
+
+jobs:
+  # 准备构建配置
+  prepare:
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
+      should_release: ${{ steps.check-release.outputs.should_release }}
+    steps:
+      - name: 确定构建平台
+        id: set-matrix
+        run: |
+          # 如果是手动触发，根据输入决定平台
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            PLATFORMS="${{ github.event.inputs.platforms }}"
+          else
+            # 标签触发，构建所有平台
+            PLATFORMS="windows,linux,macos-intel,macos-arm"
+          fi
+          
+          echo "构建平台: $PLATFORMS"
+          
+          # 构建矩阵 JSON
+          MATRIX='{"include":[]}'
+          
+          if [[ "$PLATFORMS" == *"windows"* ]]; then
+            MATRIX=$(echo $MATRIX | jq '.include += [{"platform":"windows-latest","os":"windows","arch":"amd64","output_name":"voidraft-windows-amd64.exe","id":"windows"}]')
+          fi
+          
+          if [[ "$PLATFORMS" == *"linux"* ]]; then
+            MATRIX=$(echo $MATRIX | jq '.include += [{"platform":"ubuntu-22.04","os":"linux","arch":"amd64","output_name":"voidraft-linux-amd64","id":"linux"}]')
+          fi
+          
+          if [[ "$PLATFORMS" == *"macos-intel"* ]]; then
+            MATRIX=$(echo $MATRIX | jq '.include += [{"platform":"macos-latest","os":"darwin","arch":"amd64","output_name":"voidraft-darwin-amd64","id":"macos-intel"}]')
+          fi
+          
+          if [[ "$PLATFORMS" == *"macos-arm"* ]]; then
+            MATRIX=$(echo $MATRIX | jq '.include += [{"platform":"macos-latest","os":"darwin","arch":"arm64","output_name":"voidraft-darwin-arm64","id":"macos-arm"}]')
+          fi
+          
+          echo "matrix=$MATRIX" >> $GITHUB_OUTPUT
+          echo "生成的矩阵:"
+          echo $MATRIX | jq .
+      
+      - name: 检查是否创建 Release
+        id: check-release
+        run: |
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            # 手动触发，根据输入决定
+            echo "should_release=${{ github.event.inputs.release }}" >> $GITHUB_OUTPUT
+          else
+            # 标签触发，自动创建 Release
+            echo "should_release=true" >> $GITHUB_OUTPUT
+          fi
+
+  build:
+    needs: prepare
+    if: ${{ fromJson(needs.prepare.outputs.matrix).include[0] != null }}
+    strategy:
+      fail-fast: false
+      matrix: ${{ fromJson(needs.prepare.outputs.matrix) }}
+
+    runs-on: ${{ matrix.platform }}
+    
+    steps:
+      - name: 检出代码
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: 设置 Go 环境
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.21'
+          cache: true
+
+      - name: 设置 Node.js 环境
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+
+      # Linux 平台依赖
+      - name: 安装 Linux 依赖
+        if: matrix.os == 'linux'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            build-essential \
+            libgtk-3-dev \
+            libwebkit2gtk-4.0-dev \
+            pkg-config
+
+      # Windows 平台依赖（GitHub Actions 的 Windows runner 已包含 MinGW）
+      - name: 设置 Windows 构建环境
+        if: matrix.os == 'windows'
+        run: |
+          echo "Windows runner 已包含构建工具"
+        shell: bash
+
+      # macOS 平台依赖
+      - name: 设置 macOS 构建环境
+        if: matrix.os == 'darwin'
+        run: |
+          # Xcode 命令行工具通常已安装
+          xcode-select --install 2>/dev/null || true
+
+      # 安装 Wails CLI
+      - name: 安装 Wails CLI
+        run: go install github.com/wailsapp/wails/v3/cmd/wails3@latest
+
+      # 安装前端依赖
+      - name: 安装前端依赖
+        working-directory: frontend
+        run: npm ci
+
+      # 构建前端
+      - name: 构建前端
+        working-directory: frontend
+        run: npm run build
+
+      # 构建 Wails 应用
+      - name: 构建 Wails 应用
+        run: |
+          wails3 build -platform ${{ matrix.os }}/${{ matrix.arch }}
+        shell: bash
+
+      # 查找构建产物
+      - name: 查找构建产物
+        id: find_binary
+        shell: bash
+        run: |
+          if [ "${{ matrix.os }}" = "windows" ]; then
+            BINARY=$(find build/bin -name "*.exe" -type f | head -n 1)
+          elif [ "${{ matrix.os }}" = "darwin" ]; then
+            # macOS 可能生成 .app 包或二进制文件
+            BINARY=$(find build/bin -type f \( -name "*.app" -o ! -name ".*" \) | head -n 1)
+          else
+            BINARY=$(find build/bin -type f ! -name ".*" | head -n 1)
+          fi
+          echo "binary_path=$BINARY" >> $GITHUB_OUTPUT
+          echo "找到的二进制文件: $BINARY"
+
+      # 重命名构建产物
+      - name: 重命名构建产物
+        shell: bash
+        run: |
+          BINARY_PATH="${{ steps.find_binary.outputs.binary_path }}"
+          if [ -n "$BINARY_PATH" ]; then
+            # 对于 macOS .app 包，打包为 zip
+            if [[ "$BINARY_PATH" == *.app ]]; then
+              cd "$(dirname "$BINARY_PATH")"
+              zip -r "${{ matrix.output_name }}.zip" "$(basename "$BINARY_PATH")"
+              echo "ARTIFACT_PATH=$(pwd)/${{ matrix.output_name }}.zip" >> $GITHUB_ENV
+            else
+              cp "$BINARY_PATH" "${{ matrix.output_name }}"
+              echo "ARTIFACT_PATH=$(pwd)/${{ matrix.output_name }}" >> $GITHUB_ENV
+            fi
+          fi
+
+      # 上传构建产物到 Artifacts
+      - name: 上传构建产物
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.output_name }}
+          path: ${{ env.ARTIFACT_PATH }}
+          if-no-files-found: error
+
+  # 创建 GitHub Release 并上传所有构建产物
+  release:
+    needs: [prepare, build]
+    if: ${{ needs.prepare.outputs.should_release == 'true' }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    
+    steps:
+      - name: 检出代码
+        uses: actions/checkout@v4
+
+      - name: 下载所有构建产物
+        uses: actions/download-artifact@v4
+        with:
+          path: artifacts
+
+      - name: 显示下载的文件
+        run: |
+          echo "下载的构建产物："
+          ls -R artifacts/
+
+      - name: 准备 Release 文件
+        run: |
+          mkdir -p release
+          find artifacts -type f -exec cp {} release/ \;
+          ls -lh release/
+
+      - name: 生成 Release 说明
+        id: release_notes
+        run: |
+          # 获取版本号
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            VERSION="${{ github.sha }}"
+            VERSION_NAME="测试构建 ${VERSION:0:7}"
+          else
+            VERSION="${{ github.ref_name }}"
+            VERSION_NAME="${VERSION}"
+          fi
+          
+          cat > release_notes.md << EOF
+          ## Voidraft ${VERSION_NAME}
+          
+          ### 📦 下载
+          
+          根据你的操作系统选择对应的版本：
+          
+          - **Windows (64位)**: \`voidraft-windows-amd64.exe\`
+          - **Linux (64位)**: \`voidraft-linux-amd64\`
+          - **macOS (Intel)**: \`voidraft-darwin-amd64.zip\`
+          - **macOS (Apple Silicon)**: \`voidraft-darwin-arm64.zip\`
+          
+          ### 📝 更新内容
+          
+          请查看 [提交历史](../../commits/${{ github.ref_name }}) 了解本次更新的详细内容。
+          
+          ### 💡 使用说明
+          
+          #### Windows
+          1. 下载 `voidraft-windows-amd64.exe`
+          2. 直接运行即可
+          
+          #### Linux
+          1. 下载 `voidraft-linux-amd64`
+          2. 添加执行权限：`chmod +x voidraft-linux-amd64`
+          3. 运行：`./voidraft-linux-amd64`
+          
+          #### macOS
+          1. 下载对应架构的 zip 文件
+          2. 解压后运行
+          3. 如果提示无法打开，请在 系统偏好设置 > 安全性与隐私 中允许运行
+          
+          ---
+          
+          构建时间: $(date -u +"%Y-%m-%d %H:%M:%S UTC")
+          EOF
+
+      - name: 创建 GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: release/*
+          body_path: release_notes.md
+          draft: false
+          prerelease: ${{ github.event_name == 'workflow_dispatch' }}
+          tag_name: ${{ github.event_name == 'workflow_dispatch' && format('test-{0}', github.sha) || github.ref_name }}
+          name: ${{ github.event_name == 'workflow_dispatch' && format('测试构建 {0}', github.sha) || github.ref_name }}
+          generate_release_notes: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+

.github/workflows/deploy.yml

@@ -0,0 +1,67 @@
+# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
+#
+name: Deploy VitePress site to Pages
+
+on:
+  # 在针对 `main` 分支的推送上运行。如果你
+  # 使用 `master` 分支作为默认分支，请将其更改为 `master`
+  push:
+    branches: [master]
+
+  # 允许你从 Actions 选项卡手动运行此工作流程
+  workflow_dispatch:
+
+# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
+# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # 构建工作
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
+      # - uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消此区域注释
+      #   with:
+      #     version: 9
+      # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: cd frontend && npm ci
+      - name: Build with VitePress
+        run: cd frontend && npm run docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: frontend/docs/.vitepress/dist
+
+  # 部署工作
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -5,3 +5,5 @@ frontend/node_modules
 build/linux/appimage/build
 build/windows/nsis/MicrosoftEdgeWebview2Setup.exe
 .idea
+frontend/docs/.vitepress/cache/
+frontend/docs/.vitepress/dist/

docs/CNAME

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

docs/changelog.html

@@ -1,75 +0,0 @@
-<!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

@@ -1,347 +0,0 @@
-/* 更新日志页面样式 */
-.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

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

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

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

@@ -1,256 +0,0 @@
-<!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

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

@@ -1,443 +0,0 @@
-/**
- * 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/application/models.ts

@@ -5,303 +5,6 @@
 // @ts-ignore: Unused imports
 import {Create as $Create} from "@wailsio/runtime";
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: Unused imports
-import * as slog$0 from "../../../../../../log/slog/models.js";
-
-export class App {
-    /**
-     * Manager pattern for organized API
-     */
-    "Window": WindowManager | null;
-    "ContextMenu": ContextMenuManager | null;
-    "KeyBinding": KeyBindingManager | null;
-    "Browser": BrowserManager | null;
-    "Env": EnvironmentManager | null;
-    "Dialog": DialogManager | null;
-    "Event": EventManager | null;
-    "Menu": MenuManager | null;
-    "Screen": ScreenManager | null;
-    "Clipboard": ClipboardManager | null;
-    "SystemTray": SystemTrayManager | null;
-    "Logger": slog$0.Logger | null;
-
-    /** Creates a new App instance. */
-    constructor($$source: Partial<App> = {}) {
-        if (!("Window" in $$source)) {
-            this["Window"] = null;
-        }
-        if (!("ContextMenu" in $$source)) {
-            this["ContextMenu"] = null;
-        }
-        if (!("KeyBinding" in $$source)) {
-            this["KeyBinding"] = null;
-        }
-        if (!("Browser" in $$source)) {
-            this["Browser"] = null;
-        }
-        if (!("Env" in $$source)) {
-            this["Env"] = null;
-        }
-        if (!("Dialog" in $$source)) {
-            this["Dialog"] = null;
-        }
-        if (!("Event" in $$source)) {
-            this["Event"] = null;
-        }
-        if (!("Menu" in $$source)) {
-            this["Menu"] = null;
-        }
-        if (!("Screen" in $$source)) {
-            this["Screen"] = null;
-        }
-        if (!("Clipboard" in $$source)) {
-            this["Clipboard"] = null;
-        }
-        if (!("SystemTray" in $$source)) {
-            this["SystemTray"] = null;
-        }
-        if (!("Logger" in $$source)) {
-            this["Logger"] = null;
-        }
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new App instance from a string or object.
-     */
-    static createFrom($$source: any = {}): App {
-        const $$createField0_0 = $$createType1;
-        const $$createField1_0 = $$createType3;
-        const $$createField2_0 = $$createType5;
-        const $$createField3_0 = $$createType7;
-        const $$createField4_0 = $$createType9;
-        const $$createField5_0 = $$createType11;
-        const $$createField6_0 = $$createType13;
-        const $$createField7_0 = $$createType15;
-        const $$createField8_0 = $$createType17;
-        const $$createField9_0 = $$createType19;
-        const $$createField10_0 = $$createType21;
-        const $$createField11_0 = $$createType23;
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        if ("Window" in $$parsedSource) {
-            $$parsedSource["Window"] = $$createField0_0($$parsedSource["Window"]);
-        }
-        if ("ContextMenu" in $$parsedSource) {
-            $$parsedSource["ContextMenu"] = $$createField1_0($$parsedSource["ContextMenu"]);
-        }
-        if ("KeyBinding" in $$parsedSource) {
-            $$parsedSource["KeyBinding"] = $$createField2_0($$parsedSource["KeyBinding"]);
-        }
-        if ("Browser" in $$parsedSource) {
-            $$parsedSource["Browser"] = $$createField3_0($$parsedSource["Browser"]);
-        }
-        if ("Env" in $$parsedSource) {
-            $$parsedSource["Env"] = $$createField4_0($$parsedSource["Env"]);
-        }
-        if ("Dialog" in $$parsedSource) {
-            $$parsedSource["Dialog"] = $$createField5_0($$parsedSource["Dialog"]);
-        }
-        if ("Event" in $$parsedSource) {
-            $$parsedSource["Event"] = $$createField6_0($$parsedSource["Event"]);
-        }
-        if ("Menu" in $$parsedSource) {
-            $$parsedSource["Menu"] = $$createField7_0($$parsedSource["Menu"]);
-        }
-        if ("Screen" in $$parsedSource) {
-            $$parsedSource["Screen"] = $$createField8_0($$parsedSource["Screen"]);
-        }
-        if ("Clipboard" in $$parsedSource) {
-            $$parsedSource["Clipboard"] = $$createField9_0($$parsedSource["Clipboard"]);
-        }
-        if ("SystemTray" in $$parsedSource) {
-            $$parsedSource["SystemTray"] = $$createField10_0($$parsedSource["SystemTray"]);
-        }
-        if ("Logger" in $$parsedSource) {
-            $$parsedSource["Logger"] = $$createField11_0($$parsedSource["Logger"]);
-        }
-        return new App($$parsedSource as Partial<App>);
-    }
-}
-
-/**
- * BrowserManager manages browser-related operations
- */
-export class BrowserManager {
-
-    /** Creates a new BrowserManager instance. */
-    constructor($$source: Partial<BrowserManager> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new BrowserManager instance from a string or object.
-     */
-    static createFrom($$source: any = {}): BrowserManager {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new BrowserManager($$parsedSource as Partial<BrowserManager>);
-    }
-}
-
-/**
- * ClipboardManager manages clipboard operations
- */
-export class ClipboardManager {
-
-    /** Creates a new ClipboardManager instance. */
-    constructor($$source: Partial<ClipboardManager> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new ClipboardManager instance from a string or object.
-     */
-    static createFrom($$source: any = {}): ClipboardManager {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new ClipboardManager($$parsedSource as Partial<ClipboardManager>);
-    }
-}
-
-/**
- * ContextMenuManager manages all context menu operations
- */
-export class ContextMenuManager {
-
-    /** Creates a new ContextMenuManager instance. */
-    constructor($$source: Partial<ContextMenuManager> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new ContextMenuManager instance from a string or object.
-     */
-    static createFrom($$source: any = {}): ContextMenuManager {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new ContextMenuManager($$parsedSource as Partial<ContextMenuManager>);
-    }
-}
-
-/**
- * DialogManager manages dialog-related operations
- */
-export class DialogManager {
-
-    /** Creates a new DialogManager instance. */
-    constructor($$source: Partial<DialogManager> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new DialogManager instance from a string or object.
-     */
-    static createFrom($$source: any = {}): DialogManager {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new DialogManager($$parsedSource as Partial<DialogManager>);
-    }
-}
-
-/**
- * EnvironmentManager manages environment-related operations
- */
-export class EnvironmentManager {
-
-    /** Creates a new EnvironmentManager instance. */
-    constructor($$source: Partial<EnvironmentManager> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new EnvironmentManager instance from a string or object.
-     */
-    static createFrom($$source: any = {}): EnvironmentManager {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new EnvironmentManager($$parsedSource as Partial<EnvironmentManager>);
-    }
-}
-
-/**
- * EventManager manages event-related operations
- */
-export class EventManager {
-
-    /** Creates a new EventManager instance. */
-    constructor($$source: Partial<EventManager> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new EventManager instance from a string or object.
-     */
-    static createFrom($$source: any = {}): EventManager {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new EventManager($$parsedSource as Partial<EventManager>);
-    }
-}
-
-/**
- * KeyBindingManager manages all key binding operations
- */
-export class KeyBindingManager {
-
-    /** Creates a new KeyBindingManager instance. */
-    constructor($$source: Partial<KeyBindingManager> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new KeyBindingManager instance from a string or object.
-     */
-    static createFrom($$source: any = {}): KeyBindingManager {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new KeyBindingManager($$parsedSource as Partial<KeyBindingManager>);
-    }
-}
-
-/**
- * MenuManager manages menu-related operations
- */
-export class MenuManager {
-
-    /** Creates a new MenuManager instance. */
-    constructor($$source: Partial<MenuManager> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new MenuManager instance from a string or object.
-     */
-    static createFrom($$source: any = {}): MenuManager {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new MenuManager($$parsedSource as Partial<MenuManager>);
-    }
-}
-
-export class ScreenManager {
-
-    /** Creates a new ScreenManager instance. */
-    constructor($$source: Partial<ScreenManager> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new ScreenManager instance from a string or object.
-     */
-    static createFrom($$source: any = {}): ScreenManager {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new ScreenManager($$parsedSource as Partial<ScreenManager>);
-    }
-}
-
 /**
  * ServiceOptions provides optional parameters for calls to [NewService].
  */
@@ -359,85 +62,4 @@ export class ServiceOptions {
     }
 }
 
-/**
- * SystemTrayManager manages system tray-related operations
- */
-export class SystemTrayManager {
-
-    /** Creates a new SystemTrayManager instance. */
-    constructor($$source: Partial<SystemTrayManager> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new SystemTrayManager instance from a string or object.
-     */
-    static createFrom($$source: any = {}): SystemTrayManager {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new SystemTrayManager($$parsedSource as Partial<SystemTrayManager>);
-    }
-}
-
-export class WebviewWindow {
-
-    /** Creates a new WebviewWindow instance. */
-    constructor($$source: Partial<WebviewWindow> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new WebviewWindow instance from a string or object.
-     */
-    static createFrom($$source: any = {}): WebviewWindow {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new WebviewWindow($$parsedSource as Partial<WebviewWindow>);
-    }
-}
-
-/**
- * WindowManager manages all window-related operations
- */
-export class WindowManager {
-
-    /** Creates a new WindowManager instance. */
-    constructor($$source: Partial<WindowManager> = {}) {
-
-        Object.assign(this, $$source);
-    }
-
-    /**
-     * Creates a new WindowManager instance from a string or object.
-     */
-    static createFrom($$source: any = {}): WindowManager {
-        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        return new WindowManager($$parsedSource as Partial<WindowManager>);
-    }
-}
-
-// Private type creation functions
-const $$createType0 = WindowManager.createFrom;
-const $$createType1 = $Create.Nullable($$createType0);
-const $$createType2 = ContextMenuManager.createFrom;
-const $$createType3 = $Create.Nullable($$createType2);
-const $$createType4 = KeyBindingManager.createFrom;
-const $$createType5 = $Create.Nullable($$createType4);
-const $$createType6 = BrowserManager.createFrom;
-const $$createType7 = $Create.Nullable($$createType6);
-const $$createType8 = EnvironmentManager.createFrom;
-const $$createType9 = $Create.Nullable($$createType8);
-const $$createType10 = DialogManager.createFrom;
-const $$createType11 = $Create.Nullable($$createType10);
-const $$createType12 = EventManager.createFrom;
-const $$createType13 = $Create.Nullable($$createType12);
-const $$createType14 = MenuManager.createFrom;
-const $$createType15 = $Create.Nullable($$createType14);
-const $$createType16 = ScreenManager.createFrom;
-const $$createType17 = $Create.Nullable($$createType16);
-const $$createType18 = ClipboardManager.createFrom;
-const $$createType19 = $Create.Nullable($$createType18);
-const $$createType20 = SystemTrayManager.createFrom;
-const $$createType21 = $Create.Nullable($$createType20);
-const $$createType22 = slog$0.Logger.createFrom;
-const $$createType23 = $Create.Nullable($$createType22);
+export type Window = any;

frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/dock/dockservice.ts

@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT
 
 /**
- * Service represents the notifications service
+ * Service represents the dock service
  * @module
  */
 
@@ -18,11 +18,19 @@ import * as application$0 from "../../application/models.js";
 // @ts-ignore: Unused imports
 import * as $models from "./models.js";
 
+/**
+ * HideAppIcon hides the app icon in the dock/taskbar.
+ */
+export function HideAppIcon(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3413658144) as any;
+    return $resultPromise;
+}
+
 /**
  * RemoveBadge removes the badge label from the application icon.
  */
 export function RemoveBadge(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2374916939) as any;
+    let $resultPromise = $Call.ByID(2752757297) as any;
     return $resultPromise;
 }
 
@@ -30,7 +38,7 @@ export function RemoveBadge(): Promise<void> & { cancel(): void } {
  * ServiceName returns the name of the service.
  */
 export function ServiceName(): Promise<string> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2428202016) as any;
+    let $resultPromise = $Call.ByID(2949906614) as any;
     return $resultPromise;
 }
 
@@ -38,7 +46,7 @@ export function ServiceName(): Promise<string> & { cancel(): void } {
  * ServiceShutdown is called when the service is unloaded.
  */
 export function ServiceShutdown(): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(3893755233) as any;
+    let $resultPromise = $Call.ByID(307064411) as any;
     return $resultPromise;
 }
 
@@ -46,7 +54,7 @@ export function ServiceShutdown(): Promise<void> & { cancel(): void } {
  * 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;
+    let $resultPromise = $Call.ByID(1350118426, options) as any;
     return $resultPromise;
 }
 
@@ -54,11 +62,22 @@ export function ServiceStartup(options: application$0.ServiceOptions): Promise<v
  * 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;
+    let $resultPromise = $Call.ByID(1717705661, 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;
+/**
+ * SetCustomBadge sets the badge label on the application icon with custom options.
+ */
+export function SetCustomBadge(label: string, options: $models.BadgeOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2730169760, label, options) as any;
+    return $resultPromise;
+}
+
+/**
+ * ShowAppIcon shows the app icon in the dock/taskbar.
+ */
+export function ShowAppIcon(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3409697379) as any;
     return $resultPromise;
 }

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

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

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

@@ -9,15 +9,18 @@ import {Create as $Create} from "@wailsio/runtime";
 // @ts-ignore: Unused imports
 import * as color$0 from "../../../../../../../image/color/models.js";
 
-export class Options {
+/**
+ * BadgeOptions represents options for customizing badge appearance
+ */
+export class BadgeOptions {
     "TextColour": color$0.RGBA;
     "BackgroundColour": color$0.RGBA;
     "FontName": string;
     "FontSize": number;
     "SmallFontSize": number;
 
-    /** Creates a new Options instance. */
-    constructor($$source: Partial<Options> = {}) {
+    /** Creates a new BadgeOptions instance. */
+    constructor($$source: Partial<BadgeOptions> = {}) {
         if (!("TextColour" in $$source)) {
             this["TextColour"] = (new color$0.RGBA());
         }
@@ -38,9 +41,9 @@ export class Options {
     }
 
     /**
-     * Creates a new Options instance from a string or object.
+     * Creates a new BadgeOptions instance from a string or object.
      */
-    static createFrom($$source: any = {}): Options {
+    static createFrom($$source: any = {}): BadgeOptions {
         const $$createField0_0 = $$createType0;
         const $$createField1_0 = $$createType0;
         let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
@@ -50,7 +53,7 @@ export class Options {
         if ("BackgroundColour" in $$parsedSource) {
             $$parsedSource["BackgroundColour"] = $$createField1_0($$parsedSource["BackgroundColour"]);
         }
-        return new Options($$parsedSource as Partial<Options>);
+        return new BadgeOptions($$parsedSource as Partial<BadgeOptions>);
     }
 }
 

frontend/bindings/log/slog/models.ts

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

frontend/bindings/net/http/models.ts

@@ -0,0 +1,14 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Create as $Create} from "@wailsio/runtime";
+
+/**
+ * A Header represents the key-value pairs in an HTTP header.
+ * 
+ * The keys should be in canonical form, as returned by
+ * [CanonicalHeaderKey].
+ */
+export type Header = { [_: string]: string[] };

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

@@ -68,4 +68,9 @@ export enum TranslatorType {
      * DeeplTranslatorType DeepL翻译器
      */
     DeeplTranslatorType = "deepl",
+
+    /**
+     * TartuNLPTranslatorType TartuNLP翻译器
+     */
+    TartuNLPTranslatorType = "tartunlp",
 };

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

@@ -5,10 +5,6 @@
 // @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 time$0 from "../../../time/models.js";
-
 /**
  * AppConfig 应用配置 - 按照前端设置页面分类组织
  */
@@ -114,6 +110,11 @@ export class AppearanceConfig {
      */
     "systemTheme": SystemThemeType;
 
+    /**
+     * 当前选择的预设主题名称
+     */
+    "currentTheme": string;
+
     /** Creates a new AppearanceConfig instance. */
     constructor($$source: Partial<AppearanceConfig> = {}) {
         if (!("language" in $$source)) {
@@ -122,6 +123,9 @@ export class AppearanceConfig {
         if (!("systemTheme" in $$source)) {
             this["systemTheme"] = ("" as SystemThemeType);
         }
+        if (!("currentTheme" in $$source)) {
+            this["currentTheme"] = "";
+        }
 
         Object.assign(this, $$source);
     }
@@ -196,8 +200,8 @@ export class Document {
     "id": number;
     "title": string;
     "content": string;
-    "createdAt": time$0.Time;
-    "updatedAt": time$0.Time;
+    "createdAt": string;
+    "updatedAt": string;
     "is_deleted": boolean;
 
     /**
@@ -217,10 +221,10 @@ export class Document {
             this["content"] = "";
         }
         if (!("createdAt" in $$source)) {
-            this["createdAt"] = null;
+            this["createdAt"] = "";
         }
         if (!("updatedAt" in $$source)) {
-            this["updatedAt"] = null;
+            this["updatedAt"] = "";
         }
         if (!("is_deleted" in $$source)) {
             this["is_deleted"] = false;
@@ -490,6 +494,11 @@ export class GeneralConfig {
      */
     "enableLoadingAnimation": boolean;
 
+    /**
+     * 是否启用标签页模式
+     */
+    "enableTabs": boolean;
+
     /** Creates a new GeneralConfig instance. */
     constructor($$source: Partial<GeneralConfig> = {}) {
         if (!("alwaysOnTop" in $$source)) {
@@ -516,6 +525,9 @@ export class GeneralConfig {
         if (!("enableLoadingAnimation" in $$source)) {
             this["enableLoadingAnimation"] = false;
         }
+        if (!("enableTabs" in $$source)) {
+            this["enableTabs"] = false;
+        }
 
         Object.assign(this, $$source);
     }
@@ -1143,8 +1155,8 @@ export class Theme {
     "type": ThemeType;
     "colors": ThemeColorConfig;
     "isDefault": boolean;
-    "createdAt": time$0.Time;
-    "updatedAt": time$0.Time;
+    "createdAt": string;
+    "updatedAt": string;
 
     /** Creates a new Theme instance. */
     constructor($$source: Partial<Theme> = {}) {
@@ -1164,10 +1176,10 @@ export class Theme {
             this["isDefault"] = false;
         }
         if (!("createdAt" in $$source)) {
-            this["createdAt"] = null;
+            this["createdAt"] = "";
         }
         if (!("updatedAt" in $$source)) {
-            this["updatedAt"] = null;
+            this["updatedAt"] = "";
         }
 
         Object.assign(this, $$source);
@@ -1187,9 +1199,20 @@ export class Theme {
 }
 
 /**
- * ThemeColorConfig 主题颜色配置
+ * ThemeColorConfig 主题颜色配置（与前端 ThemeColors 接口保持一致）
  */
 export class ThemeColorConfig {
+    /**
+     * 主题基本信息
+     * 主题名称
+     */
+    "name": string;
+
+    /**
+     * 是否为深色主题
+     */
+    "dark": boolean;
+
     /**
      * 基础色调
      * 主背景色
@@ -1197,7 +1220,7 @@ export class ThemeColorConfig {
     "background": string;
 
     /**
-     * 次要背景色
+     * 次要背景色（用于代码块交替背景）
      */
     "backgroundSecondary": string;
 
@@ -1207,6 +1230,17 @@ export class ThemeColorConfig {
     "surface": string;
 
     /**
+     * 下拉菜单背景
+     */
+    "dropdownBackground": string;
+
+    /**
+     * 下拉菜单边框
+     */
+    "dropdownBorder": string;
+
+    /**
+     * 文本颜色
      * 主文本色
      */
     "foreground": string;
@@ -1217,12 +1251,12 @@ export class ThemeColorConfig {
     "foregroundSecondary": string;
 
     /**
-     * 语法高亮
      * 注释色
      */
     "comment": string;
 
     /**
+     * 语法高亮色 - 核心
      * 关键字
      */
     "keyword": string;
@@ -1257,6 +1291,42 @@ export class ThemeColorConfig {
      */
     "type": string;
 
+    /**
+     * 语法高亮色 - 扩展
+     * 常量
+     */
+    "constant": string;
+
+    /**
+     * 存储类型（如 static, const）
+     */
+    "storage": string;
+
+    /**
+     * 参数
+     */
+    "parameter": string;
+
+    /**
+     * 类名
+     */
+    "class": string;
+
+    /**
+     * 标题（Markdown等）
+     */
+    "heading": string;
+
+    /**
+     * 无效内容/错误
+     */
+    "invalid": string;
+
+    /**
+     * 正则表达式
+     */
+    "regexp": string;
+
     /**
      * 界面元素
      * 光标
@@ -1284,12 +1354,12 @@ export class ThemeColorConfig {
     "lineNumber": string;
 
     /**
-     * 活动行号
+     * 活动行号颜色
      */
     "activeLineNumber": string;
 
     /**
-     * 边框分割线
+     * 边框和分割线
      * 边框色
      */
     "borderColor": string;
@@ -1300,7 +1370,7 @@ export class ThemeColorConfig {
     "borderLight": string;
 
     /**
-     * 搜索匹配
+     * 搜索和匹配
      * 搜索匹配
      */
     "searchMatch": string;
@@ -1312,6 +1382,12 @@ export class ThemeColorConfig {
 
     /** Creates a new ThemeColorConfig instance. */
     constructor($$source: Partial<ThemeColorConfig> = {}) {
+        if (!("name" in $$source)) {
+            this["name"] = "";
+        }
+        if (!("dark" in $$source)) {
+            this["dark"] = false;
+        }
         if (!("background" in $$source)) {
             this["background"] = "";
         }
@@ -1321,6 +1397,12 @@ export class ThemeColorConfig {
         if (!("surface" in $$source)) {
             this["surface"] = "";
         }
+        if (!("dropdownBackground" in $$source)) {
+            this["dropdownBackground"] = "";
+        }
+        if (!("dropdownBorder" in $$source)) {
+            this["dropdownBorder"] = "";
+        }
         if (!("foreground" in $$source)) {
             this["foreground"] = "";
         }
@@ -1351,6 +1433,27 @@ export class ThemeColorConfig {
         if (!("type" in $$source)) {
             this["type"] = "";
         }
+        if (!("constant" in $$source)) {
+            this["constant"] = "";
+        }
+        if (!("storage" in $$source)) {
+            this["storage"] = "";
+        }
+        if (!("parameter" in $$source)) {
+            this["parameter"] = "";
+        }
+        if (!("class" in $$source)) {
+            this["class"] = "";
+        }
+        if (!("heading" in $$source)) {
+            this["heading"] = "";
+        }
+        if (!("invalid" in $$source)) {
+            this["invalid"] = "";
+        }
+        if (!("regexp" in $$source)) {
+            this["regexp"] = "";
+        }
         if (!("cursor" in $$source)) {
             this["cursor"] = "";
         }

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

@@ -10,6 +10,9 @@
 // @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";
@@ -54,6 +57,11 @@ export function ServiceShutdown(): Promise<void> & { cancel(): void } {
     return $resultPromise;
 }
 
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2900331732, options) as any;
+    return $resultPromise;
+}
+
 /**
  * StartAutoBackup 启动自动备份定时器
  */

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

@@ -10,10 +10,17 @@
 // @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";
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as $models from "./models.js";
+
 /**
  * Get 获取配置项
  */
@@ -34,22 +41,6 @@ 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 执行配置迁移
  */
@@ -74,6 +65,14 @@ export function ServiceShutdown(): Promise<void> & { cancel(): void } {
     return $resultPromise;
 }
 
+/**
+ * ServiceStartup initializes the service when the application starts
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3311949428, options) as any;
+    return $resultPromise;
+}
+
 /**
  * Set 设置配置项
  */
@@ -83,34 +82,18 @@ export function Set(key: string, value: any): Promise<void> & { cancel(): void }
 }
 
 /**
- * SetBackupConfigChangeCallback 设置备份配置变更回调
+ * Watch 注册配置变更监听器
  */
-export function SetBackupConfigChangeCallback(callback: any): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(3264871659, callback) as any;
+export function Watch(path: string, callback: $models.ObserverCallback): Promise<$models.CancelFunc> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1143583035, path, callback) as any;
     return $resultPromise;
 }
 
 /**
- * SetDataPathChangeCallback 设置数据路径配置变更回调
+ * WatchWithContext 使用 Context 注册监听器
  */
-export function SetDataPathChangeCallback(callback: any): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(393017412, callback) as any;
-    return $resultPromise;
-}
-
-/**
- * SetHotkeyChangeCallback 设置热键配置变更回调
- */
-export function SetHotkeyChangeCallback(callback: any): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(283872321, callback) as any;
-    return $resultPromise;
-}
-
-/**
- * SetWindowSnapConfigChangeCallback 设置窗口吸附配置变更回调
- */
-export function SetWindowSnapConfigChangeCallback(callback: any): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2324961653, callback) as any;
+export function WatchWithContext(path: string, callback: $models.ObserverCallback): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1454973098, path, callback) as any;
     return $resultPromise;
 }
 

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

@@ -10,10 +10,6 @@
 // @ts-ignore: Unused imports
 import {Call as $Call, Create as $Create} from "@wailsio/runtime";
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: Unused imports
-import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
-
 /**
  * SelectDirectory 打开目录选择对话框
  */
@@ -29,11 +25,3 @@ export function SelectFile(): Promise<string> & { cancel(): void } {
     let $resultPromise = $Call.ByID(37302920) as any;
     return $resultPromise;
 }
-
-/**
- * SetWindow 设置绑定的窗口
- */
-export function SetWindow(window: application$0.WebviewWindow | null): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(968177170, window) as any;
-    return $resultPromise;
-}

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

@@ -49,14 +49,6 @@ export function GetDocumentByID(id: number): Promise<models$0.Document | null> &
     return $typingPromise;
 }
 
-/**
- * GetFirstDocumentID gets the first active document's ID for frontend initialization
- */
-export function GetFirstDocumentID(): Promise<number> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2970773833) as any;
-    return $resultPromise;
-}
-
 /**
  * ListAllDocumentsMeta lists all active (non-deleted) document metadata
  */

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

@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT
 
 /**
- * HotkeyService Windows全局热键服务
+ * HotkeyService 全局热键服务
  * @module
  */
 
@@ -32,8 +32,8 @@ export function GetCurrentHotkey(): Promise<models$0.HotkeyCombo | null> & { can
 /**
  * Initialize 初始化热键服务
  */
-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;
+export function Initialize(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3671360458) as any;
     return $resultPromise;
 }
 
@@ -48,8 +48,8 @@ export function IsRegistered(): Promise<boolean> & { cancel(): void } {
 /**
  * RegisterHotkey 注册全局热键
  */
-export function RegisterHotkey(hotkey: models$0.HotkeyCombo | null): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1103945691, hotkey) as any;
+export function RegisterHotkey(combo: models$0.HotkeyCombo | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1103945691, combo) as any;
     return $resultPromise;
 }
 
@@ -61,6 +61,14 @@ export function ServiceShutdown(): Promise<void> & { cancel(): void } {
     return $resultPromise;
 }
 
+/**
+ * ServiceStartup 服务启动时初始化
+ */
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3079990808, options) as any;
+    return $resultPromise;
+}
+
 /**
  * UnregisterHotkey 取消注册全局热键
  */
@@ -72,8 +80,8 @@ export function UnregisterHotkey(): Promise<void> & { cancel(): void } {
 /**
  * UpdateHotkey 更新热键配置
  */
-export function UpdateHotkey(enable: boolean, hotkey: models$0.HotkeyCombo | null): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(823285555, enable, hotkey) as any;
+export function UpdateHotkey(enable: boolean, combo: models$0.HotkeyCombo | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(823285555, enable, combo) as any;
     return $resultPromise;
 }
 

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

@@ -0,0 +1,31 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * HttpClientService HTTP客户端服务
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as $models from "./models.js";
+
+/**
+ * ExecuteRequest 执行HTTP请求
+ */
+export function ExecuteRequest(request: $models.HttpRequest | null): Promise<$models.HttpResponse | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3143343977, request) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+// Private type creation functions
+const $$createType0 = $models.HttpResponse.createFrom;
+const $$createType1 = $Create.Nullable($$createType0);

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

@@ -8,6 +8,7 @@ import * as DialogService from "./dialogservice.js";
 import * as DocumentService from "./documentservice.js";
 import * as ExtensionService from "./extensionservice.js";
 import * as HotkeyService from "./hotkeyservice.js";
+import * as HttpClientService from "./httpclientservice.js";
 import * as KeyBindingService from "./keybindingservice.js";
 import * as MigrationService from "./migrationservice.js";
 import * as SelfUpdateService from "./selfupdateservice.js";
@@ -26,6 +27,7 @@ export {
     DocumentService,
     ExtensionService,
     HotkeyService,
+    HttpClientService,
     KeyBindingService,
     MigrationService,
     SelfUpdateService,

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

@@ -7,7 +7,118 @@ import {Create as $Create} from "@wailsio/runtime";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: Unused imports
-import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
+import * as http$0 from "../../../net/http/models.js";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as time$0 from "../../../time/models.js";
+
+/**
+ * CancelFunc 取消订阅函数
+ * 调用此函数可以取消对配置的监听
+ */
+export type CancelFunc = any;
+
+/**
+ * HttpRequest HTTP请求结构
+ */
+export class HttpRequest {
+    "method": string;
+    "url": string;
+    "headers": { [_: string]: string };
+
+    /**
+     * json, formdata, urlencoded, text, params, xml, html, javascript, binary
+     */
+    "bodyType"?: string;
+    "body"?: any;
+
+    /** Creates a new HttpRequest instance. */
+    constructor($$source: Partial<HttpRequest> = {}) {
+        if (!("method" in $$source)) {
+            this["method"] = "";
+        }
+        if (!("url" in $$source)) {
+            this["url"] = "";
+        }
+        if (!("headers" in $$source)) {
+            this["headers"] = {};
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new HttpRequest instance from a string or object.
+     */
+    static createFrom($$source: any = {}): HttpRequest {
+        const $$createField2_0 = $$createType0;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("headers" in $$parsedSource) {
+            $$parsedSource["headers"] = $$createField2_0($$parsedSource["headers"]);
+        }
+        return new HttpRequest($$parsedSource as Partial<HttpRequest>);
+    }
+}
+
+/**
+ * HttpResponse HTTP响应结构
+ */
+export class HttpResponse {
+    /**
+     * 使用resp.Status()返回完整状态如"200 OK"
+     */
+    "status": string;
+
+    /**
+     * 响应时间（毫秒）
+     */
+    "time": number;
+
+    /**
+     * 请求大小
+     */
+    "requestSize": string;
+    "body": any;
+    "headers": http$0.Header;
+    "timestamp": time$0.Time;
+    "error"?: any;
+
+    /** Creates a new HttpResponse instance. */
+    constructor($$source: Partial<HttpResponse> = {}) {
+        if (!("status" in $$source)) {
+            this["status"] = "";
+        }
+        if (!("time" in $$source)) {
+            this["time"] = 0;
+        }
+        if (!("requestSize" in $$source)) {
+            this["requestSize"] = "";
+        }
+        if (!("body" in $$source)) {
+            this["body"] = null;
+        }
+        if (!("headers" in $$source)) {
+            this["headers"] = ({} as http$0.Header);
+        }
+        if (!("timestamp" in $$source)) {
+            this["timestamp"] = null;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new HttpResponse instance from a string or object.
+     */
+    static createFrom($$source: any = {}): HttpResponse {
+        const $$createField4_0 = $$createType1;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("headers" in $$parsedSource) {
+            $$parsedSource["headers"] = $$createField4_0($$parsedSource["headers"]);
+        }
+        return new HttpResponse($$parsedSource as Partial<HttpResponse>);
+    }
+}
 
 /**
  * MemoryStats 内存统计信息
@@ -119,6 +230,47 @@ export enum MigrationStatus {
     MigrationStatusFailed = "failed",
 };
 
+/**
+ * OSInfo 操作系统信息
+ */
+export class OSInfo {
+    "id": string;
+    "name": string;
+    "version": string;
+    "branding": string;
+
+    /** Creates a new OSInfo instance. */
+    constructor($$source: Partial<OSInfo> = {}) {
+        if (!("id" in $$source)) {
+            this["id"] = "";
+        }
+        if (!("name" in $$source)) {
+            this["name"] = "";
+        }
+        if (!("version" in $$source)) {
+            this["version"] = "";
+        }
+        if (!("branding" in $$source)) {
+            this["branding"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new OSInfo instance from a string or object.
+     */
+    static createFrom($$source: any = {}): OSInfo {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new OSInfo($$parsedSource as Partial<OSInfo>);
+    }
+}
+
+/**
+ * ObserverCallback 观察者回调函数
+ */
+export type ObserverCallback = any;
+
 /**
  * SelfUpdateResult 自我更新结果
  */
@@ -203,61 +355,63 @@ export class SelfUpdateResult {
 }
 
 /**
- * WindowInfo 窗口信息（简化版）
+ * SystemInfo 系统信息
  */
-export class WindowInfo {
-    "Window": application$0.WebviewWindow | null;
-    "DocumentID": number;
-    "Title": string;
+export class SystemInfo {
+    "os": string;
+    "arch": string;
+    "debug": boolean;
+    "osInfo": OSInfo | null;
+    "platformInfo": { [_: string]: any };
 
-    /** Creates a new WindowInfo instance. */
-    constructor($$source: Partial<WindowInfo> = {}) {
-        if (!("Window" in $$source)) {
-            this["Window"] = null;
+    /** Creates a new SystemInfo instance. */
+    constructor($$source: Partial<SystemInfo> = {}) {
+        if (!("os" in $$source)) {
+            this["os"] = "";
         }
-        if (!("DocumentID" in $$source)) {
-            this["DocumentID"] = 0;
+        if (!("arch" in $$source)) {
+            this["arch"] = "";
         }
-        if (!("Title" in $$source)) {
-            this["Title"] = "";
+        if (!("debug" in $$source)) {
+            this["debug"] = false;
+        }
+        if (!("osInfo" in $$source)) {
+            this["osInfo"] = null;
+        }
+        if (!("platformInfo" in $$source)) {
+            this["platformInfo"] = {};
         }
 
         Object.assign(this, $$source);
     }
 
     /**
-     * Creates a new WindowInfo instance from a string or object.
+     * Creates a new SystemInfo instance from a string or object.
      */
-    static createFrom($$source: any = {}): WindowInfo {
-        const $$createField0_0 = $$createType1;
+    static createFrom($$source: any = {}): SystemInfo {
+        const $$createField3_0 = $$createType5;
+        const $$createField4_0 = $$createType6;
         let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
-        if ("Window" in $$parsedSource) {
-            $$parsedSource["Window"] = $$createField0_0($$parsedSource["Window"]);
+        if ("osInfo" in $$parsedSource) {
+            $$parsedSource["osInfo"] = $$createField3_0($$parsedSource["osInfo"]);
         }
-        return new WindowInfo($$parsedSource as Partial<WindowInfo>);
+        if ("platformInfo" in $$parsedSource) {
+            $$parsedSource["platformInfo"] = $$createField4_0($$parsedSource["platformInfo"]);
         }
-}
-
-/**
- * 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>);
+        return new SystemInfo($$parsedSource as Partial<SystemInfo>);
     }
 }
 
 // Private type creation functions
-const $$createType0 = application$0.WebviewWindow.createFrom;
-const $$createType1 = $Create.Nullable($$createType0);
+const $$createType0 = $Create.Map($Create.Any, $Create.Any);
+var $$createType1 = (function $$initCreateType1(...args): any {
+    if ($$createType1 === $$initCreateType1) {
+        $$createType1 = $$createType3;
+    }
+    return $$createType1(...args);
+});
+const $$createType2 = $Create.Array($Create.Any);
+const $$createType3 = $Create.Map($Create.Any, $$createType2);
+const $$createType4 = OSInfo.createFrom;
+const $$createType5 = $Create.Nullable($$createType4);
+const $$createType6 = $Create.Map($Create.Any, $Create.Any);

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

@@ -34,6 +34,18 @@ export function GetMemoryStats(): Promise<$models.MemoryStats> & { cancel(): voi
     return $typingPromise;
 }
 
+/**
+ * GetSystemInfo 获取系统环境信息
+ */
+export function GetSystemInfo(): Promise<$models.SystemInfo | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2629436820) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType2($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
 /**
  * TriggerGC 手动触发垃圾回收
  */
@@ -44,3 +56,5 @@ export function TriggerGC(): Promise<void> & { cancel(): void } {
 
 // Private type creation functions
 const $$createType0 = $models.MemoryStats.createFrom;
+const $$createType1 = $models.SystemInfo.createFrom;
+const $$createType2 = $Create.Nullable($$createType1);

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

@@ -17,18 +17,6 @@ import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/applic
 // @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 获取所有主题
  */
@@ -42,22 +30,11 @@ export function GetAllThemes(): Promise<(models$0.Theme | null)[]> & { cancel():
 }
 
 /**
- * GetDefaultThemes 获取默认主题
+ * GetThemeByID 根据ID或名称获取主题
+ * 如果 id > 0，按ID查询；如果 id = 0，按名称查询
  */
-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;
+export function GetThemeByIdOrName(id: number, ...name: string[]): Promise<models$0.Theme | null> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(127385338, id, name) as any;
     let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType1($result);
     }) as any;
@@ -66,10 +43,10 @@ export function GetThemeByType(themeType: models$0.ThemeType): Promise<models$0.
 }
 
 /**
- * ResetThemeColors 重置主题颜色为默认值
+ * ResetTheme 重置主题为预设配置
  */
-export function ResetThemeColors(themeType: models$0.ThemeType): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(342461245, themeType) as any;
+export function ResetTheme(id: number, ...name: string[]): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1806334457, id, name) as any;
     return $resultPromise;
 }
 
@@ -90,10 +67,10 @@ export function ServiceStartup(options: application$0.ServiceOptions): Promise<v
 }
 
 /**
- * UpdateThemeColors 更新主题颜色
+ * UpdateTheme 更新主题
  */
-export function UpdateThemeColors(themeType: models$0.ThemeType, colors: models$0.ThemeColorConfig): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(2750902529, themeType, colors) as any;
+export function UpdateTheme(id: number, colors: models$0.ThemeColorConfig): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(70189749, id, colors) as any;
     return $resultPromise;
 }
 
@@ -101,4 +78,3 @@ export function UpdateThemeColors(themeType: models$0.ThemeType, colors: models$
 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/translationservice.ts

@@ -14,27 +14,6 @@ import {Call as $Call, Create as $Create} from "@wailsio/runtime";
 // @ts-ignore: Unused imports
 import * as translator$0 from "../common/translator/models.js";
 
-/**
- * GetAvailableTranslators 获取所有可用翻译器类型
- * @returns {[]string} 翻译器类型列表
- */
-export function GetAvailableTranslators(): Promise<string[]> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1186597995) as any;
-    let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType0($result);
-    }) as any;
-    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
-    return $typingPromise;
-}
-
-/**
- * GetStandardLanguageCode 获取标准化的语言代码
- */
-export function GetStandardLanguageCode(translatorType: translator$0.TranslatorType, languageCode: string): Promise<string> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1158131995, translatorType, languageCode) as any;
-    return $resultPromise;
-}
-
 /**
  * GetTranslatorLanguages 获取翻译器的语言列表
  * @param {string} translatorType - 翻译器类型 ("google", "bing", "youdao", "deepl")
@@ -43,6 +22,19 @@ export function GetStandardLanguageCode(translatorType: translator$0.TranslatorT
  */
 export function GetTranslatorLanguages(translatorType: translator$0.TranslatorType): Promise<{ [_: string]: translator$0.LanguageInfo }> & { cancel(): void } {
     let $resultPromise = $Call.ByID(3976114458, translatorType) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType1($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+/**
+ * GetTranslators 获取所有可用翻译器类型
+ * @returns {[]string} 翻译器类型列表
+ */
+export function GetTranslators(): Promise<string[]> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3720069432) as any;
     let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType2($result);
     }) as any;
@@ -73,6 +65,6 @@ export function TranslateWith(text: string, $from: string, to: string, translato
 }
 
 // Private type creation functions
-const $$createType0 = $Create.Array($Create.Any);
-const $$createType1 = translator$0.LanguageInfo.createFrom;
-const $$createType2 = $Create.Map($Create.Any, $$createType1);
+const $$createType0 = translator$0.LanguageInfo.createFrom;
+const $$createType1 = $Create.Map($Create.Any, $$createType0);
+const $$createType2 = $Create.Array($Create.Any);

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

@@ -10,9 +10,13 @@
 // @ts-ignore: Unused imports
 import {Call as $Call, Create as $Create} from "@wailsio/runtime";
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: Unused imports
-import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
+/**
+ * AutoShowHide 自动显示/隐藏主窗口
+ */
+export function AutoShowHide(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(4044219428) as any;
+    return $resultPromise;
+}
 
 /**
  * HandleWindowClose 处理窗口关闭事件
@@ -38,14 +42,6 @@ export function MinimizeButtonClicked(): Promise<void> & { cancel(): void } {
     return $resultPromise;
 }
 
-/**
- * SetAppReferences 设置应用引用
- */
-export function SetAppReferences(app: application$0.App | null, mainWindow: application$0.WebviewWindow | null): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(3544515719, app, mainWindow) as any;
-    return $resultPromise;
-}
-
 /**
  * ShouldMinimizeToTray 检查是否应该最小化到托盘
  */

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

@@ -2,7 +2,7 @@
 // This file is automatically generated. DO NOT EDIT
 
 /**
- * WindowService 窗口管理服务（专注于窗口生命周期管理）
+ * WindowService 窗口管理服务
  * @module
  */
 
@@ -14,17 +14,13 @@ import {Call as $Call, Create as $Create} from "@wailsio/runtime";
 // @ts-ignore: Unused imports
 import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: Unused imports
-import * as $models from "./models.js";
-
 /**
- * GetOpenWindows 获取所有打开的窗口信息
+ * GetOpenWindows 获取所有打开的文档窗口
  */
-export function GetOpenWindows(): Promise<$models.WindowInfo[]> & { cancel(): void } {
+export function GetOpenWindows(): Promise<application$0.Window[]> & { cancel(): void } {
     let $resultPromise = $Call.ByID(1464997251) as any;
     let $typingPromise = $resultPromise.then(($result: any) => {
-        return $$createType1($result);
+        return $$createType0($result);
     }) as any;
     $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
     return $typingPromise;
@@ -55,21 +51,12 @@ export function ServiceShutdown(): Promise<void> & { cancel(): void } {
 }
 
 /**
- * SetAppReferences 设置应用和主窗口引用
+ * ServiceStartup 服务启动时初始化
  */
-export function SetAppReferences(app: application$0.App | null, mainWindow: application$0.WebviewWindow | null): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1120840759, app, mainWindow) as any;
-    return $resultPromise;
-}
-
-/**
- * SetWindowSnapService 设置窗口吸附服务引用
- */
-export function SetWindowSnapService(snapService: $models.WindowSnapService | null): Promise<void> & { cancel(): void } {
-    let $resultPromise = $Call.ByID(1105193745, snapService) as any;
+export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2432987694, options) as any;
     return $resultPromise;
 }
 
 // Private type creation functions
-const $$createType0 = $models.WindowInfo.createFrom;
-const $$createType1 = $Create.Array($$createType0);
+const $$createType0 = $Create.Array($Create.Any);

frontend/components.d.ts

@@ -1,8 +1,11 @@
 /* eslint-disable */
 // @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
+
 export {}
 
 /* prettier-ignore */
@@ -16,6 +19,9 @@ declare module 'vue' {
     MemoryMonitor: typeof import('./src/components/monitor/MemoryMonitor.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TabContainer: typeof import('./src/components/tabs/TabContainer.vue')['default']
+    TabContextMenu: typeof import('./src/components/tabs/TabContextMenu.vue')['default']
+    TabItem: typeof import('./src/components/tabs/TabItem.vue')['default']
     Toolbar: typeof import('./src/components/toolbar/Toolbar.vue')['default']
     WindowsTitleBar: typeof import('./src/components/titlebar/WindowsTitleBar.vue')['default']
     WindowTitleBar: typeof import('./src/components/titlebar/WindowTitleBar.vue')['default']

frontend/docs/.vitepress/config.ts

@@ -0,0 +1,130 @@
+import {defineConfig} from 'vitepress'
+const base = '/'
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    base: base,
+    title: "voidraft",
+    description: "An elegant text snippet recording tool designed for developers.",
+    srcDir: 'src',
+    assetsDir: 'assets',
+    cacheDir: './.vitepress/cache',
+    outDir: './.vitepress/dist',
+    srcExclude: [],
+    ignoreDeadLinks: false,
+    head: [
+        ["link", {rel: "icon", type: "image/png", href: "/icon/favicon-96x96.png", sizes: "96x96"}],
+        ["link", {rel: "icon", type: "image/svg+xml", href: "/icon/favicon.svg"}],
+        ["link", {rel: "shortcut icon", href: "/icon/favicon.ico"}],
+        ["link", {rel: "apple-touch-icon", sizes: "180x180", href: "/icon/apple-touch-icon.png"}],
+        ["meta", {name: "apple-mobile-web-app-title", content: "voidraft"}],
+        ["link", {rel: "manifest", href: "/icon/site.webmanifest"}],
+        ['meta', {name: 'viewport', content: 'width=device-width,initial-scale=1'}]
+    ],
+
+    // 国际化配置
+    locales: {
+        root: {
+            label: 'English',
+            lang: 'en-US',
+            description: 'An elegant text snippet recording tool designed for developers.',
+            themeConfig: {
+                logo: '/icon/logo.png',
+                siteTitle: 'voidraft',
+                nav: [
+                    {text: 'Home', link: '/'},
+                    {text: 'Guide', link: '/guide/introduction'}
+                ],
+                sidebar: {
+                    '/guide/': [
+                        {
+                            text: 'Getting Started',
+                            items: [
+                                {text: 'Introduction', link: '/guide/introduction'},
+                                {text: 'Installation', link: '/guide/installation'},
+                                {text: 'Quick Start', link: '/guide/getting-started'}
+                            ]
+                        },
+                        {
+                            text: 'Features',
+                            items: [
+                                {text: 'Overview', link: '/guide/features'}
+                            ]
+                        }
+                    ]
+                },
+                socialLinks: [
+                    {icon: 'github', link: 'https://github.com/landaiqing/voidraft'}
+                ],
+                outline: {
+                    label: 'On this page'
+                },
+                lastUpdated: {
+                    text: 'Last updated'
+                },
+                docFooter: {
+                    prev: 'Previous',
+                    next: 'Next'
+                },
+                darkModeSwitchLabel: 'Appearance',
+                sidebarMenuLabel: 'Menu',
+                returnToTopLabel: 'Return to top',
+                footer: {
+                    message: 'Released under the MIT License.',
+                    copyright: 'Copyright © 2025-present landaiqing'
+                }
+            }
+        },
+        zh: {
+            label: '简体中文',
+            lang: 'zh-CN',
+            link: '/zh/',
+            description: '一个为开发者设计的优雅文本片段记录工具',
+            themeConfig: {
+                logo: '/icon/logo.png',
+                siteTitle: 'voidraft',
+                nav: [
+                    {text: '首页', link: '/zh/'},
+                    {text: '指南', link: '/zh/guide/introduction'}
+                ],
+                sidebar: {
+                    '/zh/guide/': [
+                        {
+                            text: '开始使用',
+                            items: [
+                                {text: '简介', link: '/zh/guide/introduction'},
+                                {text: '安装', link: '/zh/guide/installation'},
+                                {text: '快速开始', link: '/zh/guide/getting-started'}
+                            ]
+                        },
+                        {
+                            text: '功能特性',
+                            items: [
+                                {text: '功能概览', link: '/zh/guide/features'}
+                            ]
+                        }
+                    ]
+                },
+                socialLinks: [
+                    {icon: 'github', link: 'https://github.com/landaiqing/voidraft'}
+                ],
+                outline: {
+                    label: '本页目录'
+                },
+                lastUpdated: {
+                    text: '最后更新'
+                },
+                docFooter: {
+                    prev: '上一页',
+                    next: '下一页'
+                },
+                darkModeSwitchLabel: '外观',
+                sidebarMenuLabel: '菜单',
+                returnToTopLabel: '返回顶部',
+                footer: {
+                    message: 'Released under the MIT License.',
+                    copyright: 'Copyright © 2025-present landaiqing'
+                }
+            }
+        }
+    }
+})

frontend/docs/.vitepress/theme/index.css

@@ -0,0 +1,6 @@
+@import "style/var.css";
+@import "style/blur.css";
+@import "style/badge.css";
+@import "style/grid.css";
+
+

frontend/docs/.vitepress/theme/index.ts

@@ -0,0 +1,17 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import './index.css'
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    })
+  },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  }
+} satisfies Theme

frontend/docs/.vitepress/theme/style/badge.css

@@ -0,0 +1,21 @@
+/* 提示框背景颜色 */
+:root {
+    --vp-custom-block-tip-bg: var(--vp-c-green-soft);
+}
+
+/* 提示框 */
+.custom-block.tip {
+    border-color: var(--vp-c-green-2);
+}
+
+/* 警告框 */
+.custom-block.warning {
+    /* border-color: #d97706; */
+    border-color: var(--vp-c-yellow-2);
+}
+
+/* 危险框 */
+.custom-block.danger {
+    /* border-color: #f43f5e; */
+    border-color: var(--vp-c-red-2);
+}

frontend/docs/.vitepress/theme/style/blur.css

@@ -0,0 +1,73 @@
+/* .vitepress/theme/style/blur.css */
+:root {
+    /* 首页导航 */
+    .VPNavBar {
+        background-color: rgba(255, 255, 255, 0);
+        backdrop-filter: blur(10px);
+    }
+
+    /* 文档页导航两侧 */
+    .VPNavBar:not(.home) {
+        background-color: rgba(255, 255, 255, 0);
+        backdrop-filter: blur(10px);
+    }
+
+    @media (min-width: 960px) {
+        /* 文档页导航两侧 */
+        .VPNavBar:not(.home) {
+            background-color: rgba(255, 255, 255, 0);
+            backdrop-filter: blur(10px);
+        }
+
+        /* 首页下滑后导航两侧 */
+        .VPNavBar:not(.has-sidebar):not(.home.top) {
+            background-color: rgba(255, 255, 255, 0);
+            backdrop-filter: blur(10px);
+        }
+    }
+
+    @media (min-width: 960px) {
+        /* 文档页导航中间 */
+        .VPNavBar:not(.home.top) .content-body {
+            background-color: rgba(255, 255, 255, 0);
+            backdrop-filter: blur(10px);
+        }
+
+        /* 首页下滑后导航中间 */
+        .VPNavBar:not(.has-sidebar):not(.home.top) .content-body {
+            background-color: rgba(255, 255, 255, 0);
+            backdrop-filter: blur(10px);
+        }
+    }
+
+    /* 分割线 */
+
+    @media (min-width: 960px) {
+        /* 文档页分割线 */
+        .VPNavBar:not(.home.top) .divider-line {
+            background-color: rgba(255, 255, 255, 0);
+            backdrop-filter: blur(10px);
+        }
+
+        /* 首页分割线 */
+        .VPNavBar:not(.has-sidebar):not(.home.top) .divider {
+            background-color: rgba(255, 255, 255, 0);
+            backdrop-filter: blur(10px);
+        }
+    }
+
+    /* 搜索框 VPNavBarSearchButton.vue */
+    .DocSearch-Button {
+        background-color: rgba(255, 255, 255, 0);
+        backdrop-filter: blur(10px);
+    }
+
+    /* 移动端大纲栏 */
+    .VPLocalNav {
+        background-color: rgba(255, 255, 255, 0);
+        backdrop-filter: blur(10px);
+        /* 隐藏分割线 */
+        /* border-bottom: 5px solid var(--vp-c-gutter); */
+        border-bottom: 0px;
+    }
+}

frontend/docs/.vitepress/theme/style/grid.css

@@ -0,0 +1,40 @@
+/**
+ * Grid Background
+ * 网格背景样式 - 为文档页面添加简约的网格背景
+ * -------------------------------------------------------------------------- */
+
+.VPDoc,
+.VPHome {
+    position: relative;
+}
+
+.VPDoc::before,
+.VPHome::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+}
+
+/* 亮色模式网格 */
+:root:not(.dark) .VPDoc::before,
+:root:not(.dark) .VPHome::before {
+    background-image: 
+        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+    background-size: 60px 60px;
+}
+
+/* 暗色模式网格 */
+.dark .VPDoc::before,
+.dark .VPHome::before {
+    background-image: 
+        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+    background-size: 60px 60px;
+}
+

frontend/docs/.vitepress/theme/style/var.css

@@ -0,0 +1,137 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create an accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+:root {
+    --vp-c-default-1: var(--vp-c-gray-1);
+    --vp-c-default-2: var(--vp-c-gray-2);
+    --vp-c-default-3: var(--vp-c-gray-3);
+    --vp-c-default-soft: var(--vp-c-gray-soft);
+
+    --vp-c-brand-1: var(--vp-c-indigo-1);
+    --vp-c-brand-2: var(--vp-c-indigo-2);
+    --vp-c-brand-3: var(--vp-c-indigo-3);
+    --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+    --vp-c-tip-1: var(--vp-c-brand-1);
+    --vp-c-tip-2: var(--vp-c-brand-2);
+    --vp-c-tip-3: var(--vp-c-brand-3);
+    --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+    --vp-c-warning-1: var(--vp-c-yellow-1);
+    --vp-c-warning-2: var(--vp-c-yellow-2);
+    --vp-c-warning-3: var(--vp-c-yellow-3);
+    --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+    --vp-c-danger-1: var(--vp-c-red-1);
+    --vp-c-danger-2: var(--vp-c-red-2);
+    --vp-c-danger-3: var(--vp-c-red-3);
+    --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-button-brand-border: transparent;
+    --vp-button-brand-text: var(--vp-c-white);
+    --vp-button-brand-bg: var(--vp-c-brand-3);
+    --vp-button-brand-hover-border: transparent;
+    --vp-button-brand-hover-text: var(--vp-c-white);
+    --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+    --vp-button-brand-active-border: transparent;
+    --vp-button-brand-active-text: var(--vp-c-white);
+    --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background: -webkit-linear-gradient(
+            120deg,
+            #bd34fe 30%,
+            #41d1ff
+    );
+
+    --vp-home-hero-image-background-image: linear-gradient(
+            -45deg,
+            #bd34fe 50%,
+            #47caff 50%
+    );
+    --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+    :root {
+        --vp-home-hero-image-filter: blur(56px);
+    }
+}
+
+@media (min-width: 960px) {
+    :root {
+        --vp-home-hero-image-filter: blur(68px);
+    }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-custom-block-tip-border: transparent;
+    --vp-custom-block-tip-text: var(--vp-c-text-1);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+    --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+    --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}

frontend/docs/src/guide/features.md

@@ -0,0 +1,163 @@
+# Features
+
+Explore the powerful features that make voidraft a great tool for developers.
+
+## Block-Based Editing
+
+voidraft's core feature is its block-based editing system:
+
+- Each block can have a different programming language
+- Blocks are separated by delimiters (`∞∞∞language`)
+- Navigate quickly between blocks
+- Format each block independently
+
+## Syntax Highlighting
+
+Professional syntax highlighting for 30+ languages:
+
+- Automatic language detection
+- Customizable color schemes
+- Support for nested languages
+- Code folding support
+
+## HTTP Client
+
+Built-in HTTP client for API testing:
+
+### Request Types
+- GET, POST, PUT, DELETE, PATCH
+- Custom headers
+- Multiple body formats: JSON, FormData, URL-encoded, XML, Text
+
+### Request Variables
+Define and reuse variables:
+
+```http
+@var {
+  baseUrl: "https://api.example.com",
+  token: "your-api-token"
+}
+
+GET "{{baseUrl}}/users" {
+  authorization: "Bearer {{token}}"
+}
+```
+
+### Response Handling
+- View formatted JSON responses
+- See response time and size
+- Inspect headers
+- Save responses for later
+
+## Code Formatting
+
+Integrated Prettier support:
+
+- Format on save (optional)
+- Format selection or entire block
+- Supports JavaScript, TypeScript, CSS, HTML, JSON, and more
+- Customizable formatting rules
+
+## Editor Extensions
+
+### VSCode-Style Search
+- Find and replace with regex support
+- Case-sensitive and whole word options
+- Search across all blocks
+
+### Minimap
+- Bird's-eye view of your document
+- Quick navigation
+- Customizable size and position
+
+### Rainbow Brackets
+- Color-coded bracket pairs
+- Easier to match brackets
+- Customizable colors
+
+### Color Picker
+- Visual color selection
+- Supports hex, RGB, HSL
+- Live preview
+
+### Translation Tool
+- Translate selected text
+- Multiple language support
+- Quick keyboard access
+
+### Text Highlighting
+- Highlight important text
+- Multiple highlight colors
+- Persistent highlights
+
+## Multi-Window Support
+
+Work efficiently with multiple windows:
+
+- Each window is independent
+- Separate documents
+- Synchronized settings
+- Window state persistence
+
+## Theme Customization
+
+Full control over editor appearance:
+
+### Built-in Themes
+- Dark mode
+- Light mode
+- Auto-switch based on system
+
+### Custom Themes
+- Create your own themes
+- Customize every color
+- Save and share themes
+- Import community themes
+
+## Auto-Update System
+
+Stay current with automatic updates:
+
+- Background update checks
+- Notification of new versions
+- One-click update
+- Update history
+- Support for multiple update sources (GitHub, Gitea)
+
+## Data Backup
+
+Secure your data with Git-based backup:
+
+- Automatic backups
+- Manual backup triggers
+- Support for GitHub and Gitea
+- Multiple authentication methods (SSH, Token, Password)
+- Configurable backup intervals
+
+## Keyboard Shortcuts
+
+Extensive keyboard support:
+
+- Customizable shortcuts
+- Vim/Emacs keybindings (planned)
+- Quick command palette
+- Context-aware shortcuts
+
+## Performance
+
+Built for speed:
+
+- Fast startup time
+- Smooth scrolling
+- Efficient memory usage
+- Large file support
+
+## Privacy & Security
+
+Your data is safe:
+
+- Local-first storage
+- Optional cloud backup
+- No telemetry or tracking
+- Open source codebase
+

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

@@ -0,0 +1,107 @@
+# Getting Started
+
+Learn the basics of using voidraft and create your first document.
+
+## The Editor Interface
+
+When you open voidraft, you'll see:
+
+- **Main Editor**: The central area where you write and edit
+- **Toolbar**: Quick access to common actions
+- **Status Bar**: Shows current block language and other info
+
+## Creating Code Blocks
+
+voidraft uses a block-based editing system. Each block can have a different language:
+
+1. Press `Ctrl+Enter` to create a new block
+2. Type `∞∞∞` followed by a language name (e.g., `∞∞∞javascript`)
+3. Start coding in that block
+
+### Supported Languages
+
+voidraft supports 30+ programming languages including:
+- JavaScript, TypeScript
+- Python, Go, Rust
+- HTML, CSS, Sass
+- SQL, YAML, JSON
+- And many more...
+
+## Basic Operations
+
+### Navigation
+
+- `Ctrl+Up/Down`: Move between blocks
+- `Ctrl+Home/End`: Jump to first/last block
+- `Ctrl+F`: Search within document
+
+### Editing
+
+- `Ctrl+D`: Duplicate current line
+- `Ctrl+/`: Toggle comment
+- `Alt+Up/Down`: Move line up/down
+- `Ctrl+Shift+F`: Format code (if language supports Prettier)
+
+### Block Management
+
+- `Ctrl+Enter`: Create new block
+- `Ctrl+Shift+Enter`: Create block above
+- `Alt+Delete`: Delete current block
+
+## Using the HTTP Client
+
+voidraft includes a built-in HTTP client for testing APIs:
+
+1. Create a block with HTTP language
+2. Write your HTTP request:
+
+```http
+POST "https://api.example.com/users" {
+  content-type: "application/json"
+  
+  @json {
+    name: "John Doe",
+    email: "john@example.com"
+  }
+}
+```
+
+3. Click the run button to execute the request
+4. View the response inline
+
+## Multi-Window Support
+
+Work on multiple documents simultaneously:
+
+1. Go to `File > New Window` (or `Ctrl+Shift+N`)
+2. Each window is independent
+3. Changes are saved automatically
+
+## Customizing Themes
+
+Personalize your editor:
+
+1. Open Settings (`Ctrl+,`)
+2. Go to Appearance
+3. Choose a theme or create your own
+4. Customize colors to your preference
+
+## Keyboard Shortcuts
+
+Learn essential shortcuts:
+
+| Action | Shortcut |
+|--------|----------|
+| New Window | `Ctrl+Shift+N` |
+| Search | `Ctrl+F` |
+| Replace | `Ctrl+H` |
+| Format Code | `Ctrl+Shift+F` |
+| Toggle Theme | `Ctrl+Shift+T` |
+| Command Palette | `Ctrl+Shift+P` |
+
+## Next Steps
+
+Now that you know the basics:
+
+- Explore [Features](/guide/features) in detail
+

frontend/docs/src/guide/installation.md

@@ -0,0 +1,63 @@
+# Installation
+
+This guide will help you install voidraft on your system.
+
+## System Requirements
+
+- **Operating System**: Windows 10 or later (macOS and Linux support planned)
+- **RAM**: 4GB minimum, 8GB recommended
+- **Disk Space**: 200MB free space
+
+## Download
+
+Visit the [releases page](https://github.com/landaiqing/voidraft/releases) and download the latest version for your platform:
+
+- **Windows**: `voidraft-windows-amd64-installer.exe`
+
+## Installation Steps
+
+### Windows
+
+1. Download the installer from the releases page
+2. Run the `voidraft-windows-amd64-installer.exe` file
+3. Follow the installation wizard
+4. Launch voidraft from the Start menu or desktop shortcut
+
+## First Launch
+
+When you first launch voidraft:
+
+1. The application will create a data directory to store your documents
+2. You'll see the main editor interface with a welcome block
+3. Start typing or create your first code block!
+
+## Configuration
+
+voidraft stores its configuration and data in:
+
+- **Windows**: `%APPDATA%/voidraft/`
+
+You can customize various settings including:
+- Editor theme (dark/light mode)
+- Code formatting preferences
+- Backup settings
+- Keyboard shortcuts
+
+## Updating
+
+voidraft includes an auto-update feature that will notify you when new versions are available. You can:
+
+- Check for updates manually from the settings
+- Enable automatic updates
+- Choose your preferred update source
+
+## Troubleshooting
+
+If you encounter any issues during installation:
+
+1. Make sure you have administrator privileges
+2. Check that your antivirus isn't blocking the installation
+3. Visit our [GitHub issues](https://github.com/landaiqing/voidraft/issues) page for help
+
+Next: [Getting Started →](/guide/getting-started)
+

frontend/docs/src/guide/introduction.md

@@ -0,0 +1,50 @@
+# Introduction
+
+Welcome to voidraft - an elegant text snippet recording tool designed specifically for developers.
+
+## What is voidraft?
+
+voidraft is a modern desktop application that helps developers manage text snippets, code blocks, API responses, meeting notes, and daily to-do lists. It provides a smooth and elegant editing experience with powerful features tailored for development workflows.
+
+## Key Features
+
+### Block-Based Editing
+
+voidraft uses a unique block-based editing system inspired by Heynote. You can split your content into independent code blocks, each with:
+- Different programming language settings
+- Syntax highlighting
+- Independent formatting
+- Easy navigation between blocks
+
+### Developer Tools
+
+- **HTTP Client**: Test APIs directly within the editor
+- **Code Formatting**: Built-in Prettier support for multiple languages
+- **Syntax Highlighting**: Support for 30+ programming languages
+- **Auto Language Detection**: Automatically recognizes code block language types
+
+### Customization
+
+- **Custom Themes**: Create and save your own editor themes
+- **Extensions**: Rich set of editor extensions including minimap, rainbow brackets, color picker, and more
+- **Multi-Window**: Work on multiple documents simultaneously
+
+### Data Management
+
+- **Git-Based Backup**: Automatic backup using Git repositories
+- **Cloud Sync**: Sync your data across devices
+- **Auto-Update**: Stay up-to-date with the latest features
+
+## Why voidraft?
+
+- **Developer-Focused**: Built with developers' needs in mind
+- **Modern Stack**: Uses cutting-edge technologies (Wails3, Vue 3, CodeMirror 6)
+- **Cross-Platform**: Works on Windows (macOS and Linux support planned)
+- **Open Source**: MIT licensed, community-driven development
+
+## Getting Started
+
+Ready to start? Download the latest version from our [releases page](https://github.com/landaiqing/voidraft/releases) or continue reading the documentation to learn more.
+
+Next: [Installation →](/guide/installation)
+

frontend/docs/src/index.md

@@ -0,0 +1,56 @@
+---
+layout: home
+
+hero:
+  name: "voidraft"
+  text: "An elegant text snippet recording tool"
+  tagline: Designed for developers, built with modern technology
+  image: 
+    src: /img/hero.png
+    alt: "voidraft"
+  actions:
+    - theme: brand
+      text: Get Started
+      link: https://github.com/landaiqing/voidraft/releases
+    - theme: alt
+      text: Documentation
+      link: /guide/introduction
+
+features:
+  - icon: 📝
+    title: Block-Based Editing
+    details: Split your content into independent code blocks, each with different language settings. Inspired by Heynote's innovative design philosophy.
+  
+  - icon: 🎨
+    title: Syntax Highlighting
+    details: Built-in support for 30+ programming languages with automatic language detection and Prettier integration for code formatting.
+  
+  - icon: 🌐
+    title: HTTP Client
+    details: Integrated HTTP client with support for multiple request formats including JSON, FormData, XML, and more. Test APIs directly within the editor.
+  
+  - icon: 🎯
+    title: Multi-Window Support
+    details: Work on multiple documents simultaneously with independent windows. Each window maintains its own state and configuration.
+  
+  - icon: 🎭
+    title: Customizable Themes
+    details: Full theme customization support with dark/light modes. Create and save your own editor themes to match your preferences.
+  
+  - icon: 🔧
+    title: Rich Extensions
+    details: VSCode-style search and replace, rainbow brackets, minimap, color picker, translation tool, text highlighting, and more.
+  
+  - icon: 🔄
+    title: Auto-Update System
+    details: Built-in self-update mechanism with support for multiple update sources. Stay up-to-date with the latest features and improvements.
+  
+  - icon: ☁️
+    title: Git-Based Backup
+    details: Automatic data backup using Git repositories. Supports GitHub, Gitea, with multiple authentication methods including SSH and tokens.
+  
+  - icon: ⚡
+    title: Modern Architecture
+    details: Built with Wails3, Vue 3, and CodeMirror 6. Cross-platform desktop application with native performance and modern UI.
+
+---

frontend/docs/src/public/icon/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "voidraft",
+  "short_name": "voidraft",
+  "icons": [
+    {
+      "src": "/img/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/img/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

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

@@ -0,0 +1,163 @@
+# 功能特性
+
+探索 voidraft 的强大功能，让它成为开发者的优秀工具。
+
+## 块状编辑
+
+voidraft 的核心功能是其块状编辑系统：
+
+- 每个块可以有不同的编程语言
+- 块之间由分隔符分隔（`∞∞∞语言`）
+- 快速在块之间导航
+- 独立格式化每个块
+
+## 语法高亮
+
+支持 30+ 种语言的专业语法高亮：
+
+- 自动语言检测
+- 可自定义配色方案
+- 支持嵌套语言
+- 代码折叠支持
+
+## HTTP 客户端
+
+用于 API 测试的内置 HTTP 客户端：
+
+### 请求类型
+- GET、POST、PUT、DELETE、PATCH
+- 自定义请求头
+- 多种请求体格式：JSON、FormData、URL 编码、XML、文本
+
+### 请求变量
+定义和重用变量：
+
+```http
+@var {
+  baseUrl: "https://api.example.com",
+  token: "your-api-token"
+}
+
+GET "{{baseUrl}}/users" {
+  authorization: "Bearer {{token}}"
+}
+```
+
+### 响应处理
+- 查看格式化的 JSON 响应
+- 查看响应时间和大小
+- 检查响应头
+- 保存响应以供日后使用
+
+## 代码格式化
+
+集成 Prettier 支持：
+
+- 保存时格式化（可选）
+- 格式化选区或整个块
+- 支持 JavaScript、TypeScript、CSS、HTML、JSON 等
+- 可自定义格式化规则
+
+## 编辑器扩展
+
+### VSCode 风格搜索
+- 查找和替换，支持正则表达式
+- 区分大小写和全字匹配选项
+- 跨所有块搜索
+
+### 小地图
+- 文档的鸟瞰图
+- 快速导航
+- 可自定义大小和位置
+
+### 彩虹括号
+- 彩色括号配对
+- 更容易匹配括号
+- 可自定义颜色
+
+### 颜色选择器
+- 可视化颜色选择
+- 支持 hex、RGB、HSL
+- 实时预览
+
+### 翻译工具
+- 翻译选定的文本
+- 支持多种语言
+- 快速键盘访问
+
+### 文本高亮
+- 高亮重要文本
+- 多种高亮颜色
+- 持久化高亮
+
+## 多窗口支持
+
+高效使用多个窗口：
+
+- 每个窗口都是独立的
+- 独立的文档
+- 同步的设置
+- 窗口状态持久化
+
+## 主题自定义
+
+完全控制编辑器外观：
+
+### 内置主题
+- 深色模式
+- 浅色模式
+- 根据系统自动切换
+
+### 自定义主题
+- 创建你自己的主题
+- 自定义每种颜色
+- 保存和分享主题
+- 导入社区主题
+
+## 自动更新系统
+
+通过自动更新保持最新：
+
+- 后台更新检查
+- 新版本通知
+- 一键更新
+- 更新历史
+- 支持多个更新源（GitHub、Gitea）
+
+## 数据备份
+
+使用基于 Git 的备份保护你的数据：
+
+- 自动备份
+- 手动触发备份
+- 支持 GitHub 和 Gitea
+- 多种认证方式（SSH、Token、密码）
+- 可配置备份间隔
+
+## 键盘快捷键
+
+广泛的键盘支持：
+
+- 可自定义快捷键
+- Vim/Emacs 按键绑定（计划中）
+- 快速命令面板
+- 上下文感知快捷键
+
+## 性能
+
+专为速度而构建：
+
+- 快速启动时间
+- 流畅滚动
+- 高效内存使用
+- 支持大文件
+
+## 隐私与安全
+
+你的数据是安全的：
+
+- 本地优先存储
+- 可选云备份
+- 无遥测或跟踪
+- 开源代码库
+

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

@@ -0,0 +1,107 @@
+# 快速开始
+
+学习使用 voidraft 的基础知识并创建你的第一个文档。
+
+## 编辑器界面
+
+当你打开 voidraft 时，你将看到：
+
+- **主编辑器**：编写和编辑的中心区域
+- **工具栏**：快速访问常用操作
+- **状态栏**：显示当前块的语言和其他信息
+
+## 创建代码块
+
+voidraft 使用基于块的编辑系统。每个块可以有不同的语言：
+
+1. 按 `Ctrl+Enter` 创建新块
+2. 输入 `∞∞∞` 后跟语言名称（例如 `∞∞∞javascript`）
+3. 在该块中开始编码
+
+### 支持的语言
+
+voidraft 支持 30+ 种编程语言，包括：
+- JavaScript、TypeScript
+- Python、Go、Rust
+- HTML、CSS、Sass
+- SQL、YAML、JSON
+- 以及更多...
+
+## 基本操作
+
+### 导航
+
+- `Ctrl+Up/Down`：在块之间移动
+- `Ctrl+Home/End`：跳转到第一个/最后一个块
+- `Ctrl+F`：在文档中搜索
+
+### 编辑
+
+- `Ctrl+D`：复制当前行
+- `Ctrl+/`：切换注释
+- `Alt+Up/Down`：向上/向下移动行
+- `Ctrl+Shift+F`：格式化代码（如果语言支持 Prettier）
+
+### 块管理
+
+- `Ctrl+Enter`：创建新块
+- `Ctrl+Shift+Enter`：在上方创建块
+- `Alt+Delete`：删除当前块
+
+## 使用 HTTP 客户端
+
+voidraft 包含用于测试 API 的内置 HTTP 客户端：
+
+1. 创建一个 HTTP 语言的块
+2. 编写你的 HTTP 请求：
+
+```http
+POST "https://api.example.com/users" {
+  content-type: "application/json"
+  
+  @json {
+    name: "张三",
+    email: "zhangsan@example.com"
+  }
+}
+```
+
+3. 点击运行按钮执行请求
+4. 内联查看响应
+
+## 多窗口支持
+
+同时处理多个文档：
+
+1. 转到 `文件 > 新建窗口`（或 `Ctrl+Shift+N`）
+2. 每个窗口都是独立的
+3. 更改会自动保存
+
+## 自定义主题
+
+个性化你的编辑器：
+
+1. 打开设置（`Ctrl+,`）
+2. 转到外观
+3. 选择主题或创建自己的主题
+4. 根据你的偏好自定义颜色
+
+## 键盘快捷键
+
+学习基本快捷键：
+
+| 操作 | 快捷键 |
+|-----|--------|
+| 新建窗口 | `Ctrl+Shift+N` |
+| 搜索 | `Ctrl+F` |
+| 替换 | `Ctrl+H` |
+| 格式化代码 | `Ctrl+Shift+F` |
+| 切换主题 | `Ctrl+Shift+T` |
+| 命令面板 | `Ctrl+Shift+P` |
+
+## 下一步
+
+现在你已经了解了基础知识：
+
+- 详细探索[功能特性](/zh/guide/features)
+

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

@@ -0,0 +1,63 @@
+# 安装
+
+本指南将帮助你在系统上安装 voidraft。
+
+## 系统要求
+
+- **操作系统**：Windows 10 或更高版本（macOS 和 Linux 支持计划中）
+- **内存**：最低 4GB，推荐 8GB
+- **磁盘空间**：200MB 可用空间
+
+## 下载
+
+访问[发布页面](https://github.com/landaiqing/voidraft/releases)并下载适合你平台的最新版本：
+
+- **Windows**：`voidraft-windows-amd64-installer.exe`
+
+## 安装步骤
+
+### Windows
+
+1. 从发布页面下载安装程序
+2. 运行 `voidraft-windows-amd64-installer.exe` 文件
+3. 按照安装向导操作
+4. 从开始菜单或桌面快捷方式启动 voidraft
+
+## 首次启动
+
+首次启动 voidraft 时：
+
+1. 应用程序将创建一个数据目录来存储你的文档
+2. 你将看到带有欢迎块的主编辑器界面
+3. 开始输入或创建你的第一个代码块！
+
+## 配置
+
+voidraft 将其配置和数据存储在：
+
+- **Windows**：`%APPDATA%/voidraft/`
+
+你可以自定义各种设置，包括：
+- 编辑器主题（深色/浅色模式）
+- 代码格式化偏好
+- 备份设置
+- 键盘快捷键
+
+## 更新
+
+voidraft 包含自动更新功能，会在有新版本时通知你。你可以：
+
+- 从设置中手动检查更新
+- 启用自动更新
+- 选择首选的更新源
+
+## 故障排除
+
+如果在安装过程中遇到任何问题：
+
+1. 确保你有管理员权限
+2. 检查杀毒软件是否阻止了安装
+3. 访问我们的 [GitHub issues](https://github.com/landaiqing/voidraft/issues) 页面寻求帮助
+
+下一步：[快速开始 →](/zh/guide/getting-started)
+

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

@@ -0,0 +1,50 @@
+# 简介
+
+欢迎使用 voidraft —— 一个专为开发者设计的优雅文本片段记录工具。
+
+## 什么是 voidraft？
+
+voidraft 是一个现代化的桌面应用程序，帮助开发者管理文本片段、代码块、API 响应、会议笔记和日常待办事项。它为开发工作流程提供了流畅而优雅的编辑体验和强大的功能。
+
+## 核心特性
+
+### 块状编辑模式
+
+voidraft 使用受 Heynote 启发的独特块状编辑系统。你可以将内容分割为独立的代码块，每个块具有：
+- 不同的编程语言设置
+- 语法高亮
+- 独立格式化
+- 轻松在块之间导航
+
+### 开发者工具
+
+- **HTTP 客户端**：直接在编辑器中测试 API
+- **代码格式化**：内置 Prettier 支持多种语言
+- **语法高亮**：支持 30+ 种编程语言
+- **自动语言检测**：自动识别代码块语言类型
+
+### 自定义
+
+- **自定义主题**：创建并保存你自己的编辑器主题
+- **扩展功能**：丰富的编辑器扩展，包括小地图、彩虹括号、颜色选择器等
+- **多窗口**：同时处理多个文档
+
+### 数据管理
+
+- **Git 备份**：使用 Git 仓库自动备份
+- **云同步**：跨设备同步你的数据
+- **自动更新**：及时获取最新功能
+
+## 为什么选择 voidraft？
+
+- **专注开发者**：考虑开发者需求而构建
+- **现代技术栈**：使用前沿技术（Wails3、Vue 3、CodeMirror 6）
+- **跨平台**：支持 Windows（macOS 和 Linux 支持计划中）
+- **开源**：MIT 许可证，社区驱动开发
+
+## 开始使用
+
+准备好开始了吗？从我们的[发布页面](https://github.com/landaiqing/voidraft/releases)下载最新版本，或继续阅读文档了解更多。
+
+下一步：[安装 →](/zh/guide/installation)
+

frontend/docs/src/zh/index.md

@@ -0,0 +1,56 @@
+---
+layout: home
+
+hero:
+  name: "voidraft"
+  text: "优雅的文本片段记录工具"
+  tagline: 为开发者设计，用现代技术打造
+  image: 
+    src: /img/hero.png
+    alt: "voidraft"
+  actions:
+    - theme: brand
+      text: 开始使用
+      link: https://github.com/landaiqing/voidraft/releases
+    - theme: alt
+      text: 使用文档
+      link: /zh/guide/introduction
+
+features:
+  - icon: 📝
+    title: 块状编辑模式
+    details: 将内容分割为独立的代码块，每个块可设置不同语言。继承了 Heynote 优雅的块状编辑理念。
+  
+  - icon: 🎨
+    title: 语法高亮
+    details: 内置支持 30+ 种编程语言的语法高亮，自动语言检测，集成 Prettier 代码格式化工具。
+  
+  - icon: 🌐
+    title: HTTP 客户端
+    details: 集成 HTTP 客户端，支持 JSON、FormData、XML 等多种请求格式。直接在编辑器中测试 API。
+  
+  - icon: 🎯
+    title: 多窗口支持
+    details: 同时编辑多个文档，每个窗口独立维护自己的状态和配置。
+  
+  - icon: 🎭
+    title: 主题自定义
+    details: 完整的主题自定义支持，支持深色/浅色模式。创建并保存你自己的编辑器主题。
+  
+  - icon: 🔧
+    title: 丰富的扩展
+    details: VSCode 风格搜索替换、彩虹括号、小地图、颜色选择器、翻译工具、文本高亮等实用扩展。
+  
+  - icon: 🔄
+    title: 自动更新系统
+    details: 内置自我更新机制，支持多个更新源。及时获取最新功能和改进。
+  
+  - icon: ☁️
+    title: Git 备份
+    details: 基于 Git 的自动数据备份。支持 GitHub、Gitea，提供 SSH、Token 等多种认证方式。
+  
+  - icon: ⚡
+    title: 现代化架构
+    details: 采用 Wails3、Vue 3 和 CodeMirror 6 构建。跨平台桌面应用，原生性能，现代化界面。
+
+---

frontend/package.json

@@ -9,82 +9,94 @@
     "build": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" vue-tsc && cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" vite build --mode production",
     "preview": "vite preview",
     "lint": "eslint",
-    "lint:fix": "eslint --fix"
+    "lint:fix": "eslint --fix",
+    "build:lang-parser": "node src/views/editor/extensions/codeblock/lang-parser/build-parser.js",
+    "build:mermaid-parser": "node src/views/editor/language/mermaid/build-parsers.js",
+    "test": "vitest",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "app:dev": "cd .. &&wails3 dev",
+    "app:build": "cd .. && wails3 task build",
+    "app:package": "cd .. && wails3 package",
+    "app:generate": "cd .. && wails3 generate bindings -ts"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.7",
-    "@codemirror/commands": "^6.8.1",
+    "@codemirror/autocomplete": "^6.19.1",
+    "@codemirror/commands": "^6.10.0",
     "@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.10",
+    "@codemirror/lang-html": "^6.4.11",
     "@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.3.0",
-    "@codemirror/lang-markdown": "^6.3.4",
+    "@codemirror/lang-markdown": "^6.5.0",
     "@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.1",
+    "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/lang-vue": "^0.1.3",
     "@codemirror/lang-wast": "^6.0.2",
     "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.11.3",
-    "@codemirror/language-data": "^6.5.1",
-    "@codemirror/legacy-modes": "^6.5.1",
-    "@codemirror/lint": "^6.8.5",
+    "@codemirror/language-data": "^6.5.2",
+    "@codemirror/legacy-modes": "^6.5.2",
+    "@codemirror/lint": "^6.9.1",
     "@codemirror/search": "^6.5.11",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.2",
+    "@codemirror/view": "^6.38.6",
     "@cospaia/prettier-plugin-clojure": "^0.0.2",
-    "@lezer/highlight": "^1.2.1",
+    "@lezer/highlight": "^1.2.3",
     "@lezer/lr": "^1.4.2",
     "@prettier/plugin-xml": "^3.4.2",
+    "@replit/codemirror-lang-svelte": "^6.0.0",
     "@toml-tools/lexer": "^1.0.0",
     "@toml-tools/parser": "^1.0.0",
     "codemirror": "^6.0.2",
     "codemirror-lang-elixir": "^4.0.0",
     "colors-named": "^1.0.2",
     "colors-named-hex": "^1.0.2",
-    "franc-min": "^6.2.0",
     "groovy-beautify": "^0.0.17",
     "hsl-matcher": "^1.2.4",
     "java-parser": "^3.0.1",
     "jsox": "^1.2.123",
-    "linguist-languages": "^9.0.0",
+    "linguist-languages": "^9.1.0",
     "php-parser": "^3.2.5",
     "pinia": "^3.0.3",
-    "pinia-plugin-persistedstate": "^4.5.0",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "prettier": "^3.6.2",
     "remarkable": "^2.0.1",
-    "sass": "^1.92.1",
-    "vue": "^3.5.21",
+    "sass": "^1.93.3",
+    "vue": "^3.5.22",
     "vue-i18n": "^11.1.12",
     "vue-pick-colors": "^1.8.0",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.6.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.35.0",
+    "@eslint/js": "^9.39.0",
     "@lezer/generator": "^1.8.0",
-    "@types/node": "^24.3.1",
+    "@types/node": "^24.9.2",
     "@types/remarkable": "^2.0.8",
     "@vitejs/plugin-vue": "^6.0.1",
     "@wailsio/runtime": "latest",
-    "cross-env": "^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",
+    "cross-env": "^10.1.0",
+    "eslint": "^9.39.0",
+    "eslint-plugin-vue": "^10.5.1",
+    "globals": "^16.5.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.2",
+    "unplugin-vue-components": "^30.0.0",
+    "vite": "^7.1.12",
     "vite-plugin-node-polyfills": "^0.24.0",
+    "vitepress": "^2.0.0-alpha.12",
+    "vitest": "^4.0.6",
     "vue-eslint-parser": "^10.2.0",
-    "vue-tsc": "^3.0.6"
+    "vue-tsc": "^3.1.2"
   }
 }

frontend/src/App.vue

@@ -1,22 +1,21 @@
 <script setup lang="ts">
-import {onMounted} from 'vue';
+import {onBeforeMount} 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';
+import {useTranslationStore} from "@/stores/translationStore";
 
 const configStore = useConfigStore();
 const systemStore = useSystemStore();
 const keybindingStore = useKeybindingStore();
 const themeStore = useThemeStore();
 const updateStore = useUpdateStore();
-const backupStore = useBackupStore();
+const translationStore = useTranslationStore();
 
-// 应用启动时加载配置和初始化系统信息
-onMounted(async () => {
+onBeforeMount(async () => {
   // 并行初始化配置、系统信息和快捷键配置
   await Promise.all([
     configStore.initConfig(),
@@ -26,10 +25,8 @@ onMounted(async () => {
   
   // 初始化语言和主题
   await configStore.initializeLanguage();
-  themeStore.initializeTheme();
-  
-  // 初始化备份服务
-  await backupStore.initialize();
+  await themeStore.initializeTheme();
+  await translationStore.loadTranslators();
 
   // 启动时检查更新
   await updateStore.checkOnStartup();

frontend/src/assets/styles/variables.css

@@ -8,6 +8,7 @@
   --dark-toolbar-text: #ffffff;
   --dark-toolbar-text-secondary: #cccccc;
   --dark-toolbar-button-hover: #404040;
+  --dark-tab-active-line: linear-gradient(90deg, #007acc 0%, #0099ff 100%);
   --dark-bg-secondary: #0E1217;
   --dark-text-secondary: #a0aec0;
   --dark-text-muted: #666;
@@ -40,6 +41,7 @@
   --light-toolbar-text: #212529;
   --light-toolbar-text-secondary: #495057;
   --light-toolbar-button-hover: #e9ecef;
+  --light-tab-active-line: linear-gradient(90deg, #0066cc 0%, #0088ff 100%);
   --light-bg-secondary: #f7fef7;
   --light-text-secondary: #374151;
   --light-text-muted: #6b7280;
@@ -73,6 +75,7 @@
   --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
   --toolbar-button-hover: var(--dark-toolbar-button-hover);
   --toolbar-separator: var(--dark-toolbar-button-hover);
+  --tab-active-line: var(--dark-tab-active-line);
   --bg-secondary: var(--dark-bg-secondary);
   --text-secondary: var(--dark-text-secondary);
   --text-muted: var(--dark-text-muted);
@@ -112,6 +115,7 @@
     --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
     --toolbar-button-hover: var(--dark-toolbar-button-hover);
     --toolbar-separator: var(--dark-toolbar-button-hover);
+    --tab-active-line: var(--dark-tab-active-line);
     --bg-secondary: var(--dark-bg-secondary);
     --text-secondary: var(--dark-text-secondary);
     --text-muted: var(--dark-text-muted);
@@ -149,6 +153,7 @@
     --toolbar-text-secondary: var(--light-toolbar-text-secondary);
     --toolbar-button-hover: var(--light-toolbar-button-hover);
     --toolbar-separator: var(--light-toolbar-button-hover);
+    --tab-active-line: var(--light-tab-active-line);
     --bg-secondary: var(--light-bg-secondary);
     --text-secondary: var(--light-text-secondary);
     --text-muted: var(--light-text-muted);
@@ -185,6 +190,7 @@
   --toolbar-text-secondary: var(--light-toolbar-text-secondary);
   --toolbar-button-hover: var(--light-toolbar-button-hover);
   --toolbar-separator: var(--light-toolbar-button-hover);
+  --tab-active-line: var(--light-tab-active-line);
   --bg-secondary: var(--light-bg-secondary);
   --text-secondary: var(--light-text-secondary);
   --text-muted: var(--light-text-muted);
@@ -220,6 +226,7 @@
   --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
   --toolbar-button-hover: var(--dark-toolbar-button-hover);
   --toolbar-separator: var(--dark-toolbar-button-hover);
+  --tab-active-line: var(--dark-tab-active-line);
   --bg-secondary: var(--dark-bg-secondary);
   --text-secondary: var(--dark-text-secondary);
   --text-muted: var(--dark-text-muted);

frontend/src/common/constant/config.ts

@@ -46,6 +46,7 @@ export const GENERAL_CONFIG_KEY_MAP: GeneralConfigKeyMap = {
     globalHotkey: 'general.globalHotkey',
     enableWindowSnap: 'general.enableWindowSnap',
     enableLoadingAnimation: 'general.enableLoadingAnimation',
+    enableTabs: 'general.enableTabs',
 } as const;
 
 export const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {
@@ -61,7 +62,8 @@ export const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {
 
 export const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = {
     language: 'appearance.language',
-    systemTheme: 'appearance.systemTheme'
+    systemTheme: 'appearance.systemTheme',
+    currentTheme: 'appearance.currentTheme'
 } as const;
 
 export const UPDATES_CONFIG_KEY_MAP: UpdatesConfigKeyMap = {
@@ -113,11 +115,12 @@ export const DEFAULT_CONFIG: AppConfig = {
         },
         enableWindowSnap: true,
         enableLoadingAnimation: true,
+        enableTabs: false,
     },
     editing: {
         fontSize: CONFIG_LIMITS.fontSize.default,
         fontFamily: FONT_OPTIONS[0].value,
-        fontWeight: 'normal',
+        fontWeight: '400',
         lineHeight: CONFIG_LIMITS.lineHeight.default,
         enableTabIndent: true,
         tabSize: CONFIG_LIMITS.tabSize.default,
@@ -126,7 +129,8 @@ export const DEFAULT_CONFIG: AppConfig = {
     },
     appearance: {
         language: LanguageType.LangZhCN,
-        systemTheme: SystemThemeType.SystemThemeAuto
+        systemTheme: SystemThemeType.SystemThemeAuto,
+        currentTheme: 'default-dark'
     },
     updates: {
         version: "1.0.0",

frontend/src/common/constant/editor.ts

@@ -0,0 +1,13 @@
+/**
+ * 编辑器相关常量配置
+ */
+
+// 编辑器实例管理
+export const EDITOR_CONFIG = {
+  /** 最多缓存的编辑器实例数量 */
+  MAX_INSTANCES: 5,
+  /** 语法树缓存过期时间（毫秒） */
+  SYNTAX_TREE_CACHE_TIMEOUT: 30000,
+  /** 加载状态延迟时间（毫秒） */
+  LOADING_DELAY: 500,
+} as const;

frontend/src/common/constant/locales.ts

@@ -2,12 +2,12 @@ export type SupportedLocaleType = 'zh-CN' | 'en-US';
 
 // 支持的语言列表
 export const SUPPORTED_LOCALES = [
-    {
-        code: 'zh-CN' as SupportedLocaleType,
-        name: '简体中文'
-    },
     {
         code: 'en-US' as SupportedLocaleType,
         name: 'English'
+    },
+    {
+        code: 'zh-CN' as SupportedLocaleType,
+        name: '简体中文'
     }
 ] as const;

frontend/src/common/constant/translation.ts

@@ -0,0 +1,49 @@
+/**
+ * 默认翻译配置
+ */
+export const DEFAULT_TRANSLATION_CONFIG = {
+  minSelectionLength: 2,
+  maxTranslationLength: 5000,
+} as const;
+
+/**
+ * 翻译相关的错误消息
+ */
+export const TRANSLATION_ERRORS = {
+  NO_TEXT: 'no text to translate',
+  TRANSLATION_FAILED: 'translation failed',
+} as const;
+
+/**
+ * 翻译结果接口
+ */
+export interface TranslationResult {
+  translatedText: string;
+  error?: string;
+}
+
+/**
+ * 语言信息接口
+ */
+export interface LanguageInfo {
+  Code: string; // 语言代码
+  Name: string; // 语言名称
+}
+
+/**
+ * 翻译器扩展配置
+ */
+export interface TranslatorConfig {
+  /** 最小选择字符数才显示翻译按钮 */
+  minSelectionLength: number;
+  /** 最大翻译字符数 */
+  maxTranslationLength: number;
+}
+
+/**
+ * 翻译图标SVG
+ */
+export const TRANSLATION_ICON_SVG = `
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+  <path d="M599.68 485.056h-8l30.592 164.672c20.352-7.04 38.72-17.344 54.912-31.104a271.36 271.36 0 0 1-40.704-64.64l32.256-4.032c8.896 17.664 19.072 33.28 30.592 46.72 23.872-27.968 42.24-65.152 55.04-111.744l-154.688 0.128z m121.92 133.76c18.368 15.36 39.36 26.56 62.848 33.472l14.784 4.416-8.64 30.336-14.72-4.352a205.696 205.696 0 0 1-76.48-41.728c-20.672 17.92-44.928 31.552-71.232 40.064l20.736 110.912H519.424l-9.984 72.512h385.152c18.112 0 32.704-14.144 32.704-31.616V295.424a32.128 32.128 0 0 0-32.704-31.552H550.528l35.2 189.696h79.424v-31.552h61.44v31.552h102.4v31.616h-42.688c-14.272 55.488-35.712 100.096-64.64 133.568zM479.36 791.68H193.472c-36.224 0-65.472-28.288-65.472-63.168V191.168C128 156.16 157.312 128 193.472 128h327.68l20.544 104.32h352.832c36.224 0 65.472 28.224 65.472 63.104v537.408c0 34.944-29.312 63.168-65.472 63.168H468.608l10.688-104.32zM337.472 548.352v-33.28H272.768v-48.896h60.16V433.28h-60.16v-41.728h64.704v-32.896h-102.4v189.632h102.4z m158.272 0V453.76c0-17.216-4.032-30.272-12.16-39.488-8.192-9.152-20.288-13.696-36.032-13.696a55.04 55.04 0 0 0-24.768 5.376 39.04 39.04 0 0 0-17.088 15.936h-1.984l-5.056-18.56h-28.352V548.48h37.12V480c0-17.088 2.304-29.376 6.912-36.736 4.608-7.424 12.16-11.072 22.528-11.072 7.616 0 13.248 2.56 16.64 7.872 3.52 5.248 5.312 13.056 5.312 23.488v84.736h36.928z" fill="currentColor"></path>
+</svg>`;

frontend/src/common/prettier/plugins/docker/format.go

@@ -43,7 +43,10 @@ func Format(this js.Value, args []js.Value) any {
 		SpaceRedirects:  spaceRedirects,
 	}
 
-	result := lib.FormatFileLines(originalLines, c)
+	result, err := lib.FormatFileLines(originalLines, c)
+	if err != nil {
+		return []any{true, err.Error()}
+	}
 
 	return []any{false, result}
 }

frontend/src/common/prettier/plugins/docker/lib/format.go

@@ -121,11 +121,11 @@ func FormatOnBuild(n *ExtendedNode, c *Config) string {
 	return n.OriginalMultiline
 }
 
-func FormatFileLines(fileLines []string, c *Config) string {
+func FormatFileLines(fileLines []string, c *Config) (string, error) {
 	result, err := parser.Parse(strings.NewReader(strings.Join(fileLines, "")))
 	if err != nil {
 		log.Printf("%s\n", strings.Join(fileLines, ""))
-		log.Fatalf("Error parsing file: %v", err)
+		return "", fmt.Errorf("Error parsing file: %v", err)
 	}
 
 	parseState := &ParseState{
@@ -148,7 +148,7 @@ func FormatFileLines(fileLines []string, c *Config) string {
 	if c.TrailingNewline {
 		parseState.Output += "\n"
 	}
-	return parseState.Output
+	return parseState.Output, nil
 }
 
 func BuildExtendedNode(n *parser.Node, fileLines []string) *ExtendedNode {
@@ -572,9 +572,12 @@ func getCmd(n *ExtendedNode, shouldSplitNode bool) []string {
 		if shouldSplitNode {
 			parts, err := shlex.Split(rawValue)
 			if err != nil {
-				log.Fatalf("Error splitting: %s\n", node.Node.Value)
-			}
+				// Fallback: if splitting fails, use raw value as a single token to avoid exiting
+				log.Printf("Error splitting: %s: %v\n", node.Node.Value, err)
+				cmd = append(cmd, rawValue)
+			} else {
 				cmd = append(cmd, parts...)
+			}
 		} else {
 			cmd = append(cmd, rawValue)
 		}
@@ -587,7 +590,11 @@ func shouldRunInShell(node string) bool {
 	// https://docs.docker.com/reference/dockerfile/#entrypoint
 	parts, err := shlex.Split(node)
 	if err != nil {
-		log.Fatalf("Error splitting: %s\n", node)
+		// If we cannot reliably split, heuristically decide based on common shell operators
+		if strings.Contains(node, "&&") || strings.Contains(node, ";") || strings.Contains(node, "||") {
+			return true
+		}
+		return false
 	}
 
 	needsShell := false
@@ -785,8 +792,8 @@ func formatBash(s string, c *Config) string {
 	r := strings.NewReader(s)
 	f, err := syntax.NewParser(syntax.KeepComments(true)).Parse(r, "")
 	if err != nil {
-		fmt.Printf("Error parsing: %s\n", s)
-		panic(err)
+		// On parse failure, return original input to avoid crashing the WASM runtime
+		return s
 	}
 	buf := new(bytes.Buffer)
 	syntax.NewPrinter(

frontend/src/common/utils/asyncManager.ts

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

frontend/src/common/utils/debounce.ts

@@ -0,0 +1,111 @@
+/**
+ * 防抖函数工具类
+ * 用于限制函数的执行频率，在指定时间内只执行最后一次调用
+ */
+
+export interface DebounceOptions {
+  /** 延迟时间（毫秒），默认 300ms */
+  delay?: number;
+  /** 是否立即执行第一次调用，默认 false */
+  immediate?: boolean;
+}
+
+/**
+ * 创建防抖函数
+ * @param fn 要防抖的函数
+ * @param options 防抖选项
+ * @returns 返回防抖后的函数和清理函数
+ */
+export function createDebounce<T extends (...args: any[]) => any>(
+  fn: T,
+  options: DebounceOptions = {}
+): {
+  debouncedFn: T;
+  cancel: () => void;
+  flush: () => void;
+} {
+  const { delay = 300, immediate = false } = options;
+  let timeoutId: number | null = null;
+  let lastArgs: Parameters<T> | null = null;
+  let lastThis: any = null;
+
+  const debouncedFn = function (this: any, ...args: Parameters<T>) {
+    lastArgs = args;
+    lastThis = this;
+
+    const callNow = immediate && !timeoutId;
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = window.setTimeout(() => {
+      timeoutId = null;
+      if (!immediate && lastArgs) {
+        fn.apply(lastThis, lastArgs);
+      }
+    }, delay);
+
+    if (callNow) {
+      return fn.apply(this, args);
+    }
+  } as T;
+
+  const cancel = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    lastArgs = null;
+    lastThis = null;
+  };
+
+  const flush = () => {
+    if (timeoutId && lastArgs) {
+      clearTimeout(timeoutId);
+      fn.apply(lastThis, lastArgs);
+      timeoutId = null;
+      lastArgs = null;
+      lastThis = null;
+    }
+  };
+
+  return {
+    debouncedFn,
+    cancel,
+    flush
+  };
+}
+
+
+/**
+ * 节流函数
+ * 在指定时间内最多执行一次函数
+ * @param fn 要节流的函数
+ * @param delay 节流时间间隔（毫秒）
+ * @returns 节流后的函数
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  fn: T,
+  delay: number = 300
+): T {
+  let lastExecTime = 0;
+  let timeoutId: number | null = null;
+
+  return ((...args: Parameters<T>) => {
+    const now = Date.now();
+
+    if (now - lastExecTime >= delay) {
+      lastExecTime = now;
+      fn(...args);
+    } else {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = window.setTimeout(() => {
+        lastExecTime = Date.now();
+        fn(...args);
+      }, delay - (now - lastExecTime));
+    }
+  }) as T;
+}

frontend/src/common/utils/doublyLinkedList.ts

@@ -0,0 +1,280 @@
+/**
+ * 双向链表节点
+ * 
+ * @template T 节点数据的类型
+ */
+export class DoublyLinkedListNode<T> {
+  public data: T;
+  public prev: DoublyLinkedListNode<T> | null = null;
+  public next: DoublyLinkedListNode<T> | null = null;
+
+  constructor(data: T) {
+    this.data = data;
+  }
+}
+
+/**
+ * 双向链表实现
+ * 提供 O(1) 时间复杂度的插入、删除和移动操作
+ * 
+ * @template T 链表数据的类型
+ */
+export class DoublyLinkedList<T> {
+  private head: DoublyLinkedListNode<T> | null = null;
+  private tail: DoublyLinkedListNode<T> | null = null;
+  private _size = 0;
+
+  /**
+   * 获取链表大小
+   * 
+   * @returns 链表中节点的数量
+   */
+  get size(): number {
+    return this._size;
+  }
+
+  /**
+   * 检查链表是否为空
+   * 
+   * @returns 链表是否为空
+   */
+  get isEmpty(): boolean {
+    return this._size === 0;
+  }
+
+  /**
+   * 获取头节点
+   * 
+   * @returns 头节点，如果链表为空则返回null
+   */
+  get first(): DoublyLinkedListNode<T> | null {
+    return this.head;
+  }
+
+  /**
+   * 获取尾节点
+   * 
+   * @returns 尾节点，如果链表为空则返回null
+   */
+  get last(): DoublyLinkedListNode<T> | null {
+    return this.tail;
+  }
+
+  /**
+   * 在链表头部添加节点
+   * 
+   * @param data 要添加的数据
+   * @returns 新创建的节点
+   */
+  addFirst(data: T): DoublyLinkedListNode<T> {
+    const newNode = new DoublyLinkedListNode(data);
+    
+    if (this.head === null) {
+      this.head = this.tail = newNode;
+    } else {
+      newNode.next = this.head;
+      this.head.prev = newNode;
+      this.head = newNode;
+    }
+    
+    this._size++;
+    return newNode;
+  }
+
+  /**
+   * 在链表尾部添加节点
+   * 
+   * @param data 要添加的数据
+   * @returns 新创建的节点
+   */
+  addLast(data: T): DoublyLinkedListNode<T> {
+    const newNode = new DoublyLinkedListNode(data);
+    
+    if (this.tail === null) {
+      this.head = this.tail = newNode;
+    } else {
+      newNode.prev = this.tail;
+      this.tail.next = newNode;
+      this.tail = newNode;
+    }
+    
+    this._size++;
+    return newNode;
+  }
+
+  /**
+   * 删除指定节点
+   * 
+   * @param node 要删除的节点
+   * @returns 被删除节点的数据
+   */
+  remove(node: DoublyLinkedListNode<T>): T {
+    if (node.prev) {
+      node.prev.next = node.next;
+    } else {
+      this.head = node.next;
+    }
+
+    if (node.next) {
+      node.next.prev = node.prev;
+    } else {
+      this.tail = node.prev;
+    }
+
+    // 清理节点引用，防止内存泄漏
+    const data = node.data;
+    node.prev = null;
+    node.next = null;
+    
+    this._size--;
+    return data;
+  }
+
+  /**
+   * 删除头节点
+   * 
+   * @returns 被删除节点的数据，如果链表为空则返回undefined
+   */
+  removeFirst(): T | undefined {
+    if (this.head === null) {
+      return undefined;
+    }
+    return this.remove(this.head);
+  }
+
+  /**
+   * 删除尾节点
+   * 
+   * @returns 被删除节点的数据，如果链表为空则返回undefined
+   */
+  removeLast(): T | undefined {
+    if (this.tail === null) {
+      return undefined;
+    }
+    return this.remove(this.tail);
+  }
+
+  /**
+   * 将节点移动到链表头部
+   * 
+   * @param node 要移动的节点
+   */
+  moveToFirst(node: DoublyLinkedListNode<T>): void {
+    if (node === this.head) {
+      return; // 已经在头部
+    }
+
+    // 从当前位置移除
+    if (node.prev) {
+      node.prev.next = node.next;
+    }
+    if (node.next) {
+      node.next.prev = node.prev;
+    } else {
+      this.tail = node.prev;
+    }
+
+    // 移动到头部
+    node.prev = null;
+    node.next = this.head;
+    if (this.head) {
+      this.head.prev = node;
+    }
+    this.head = node;
+
+    // 如果链表之前为空，更新尾节点
+    if (this.tail === null) {
+      this.tail = node;
+    }
+  }
+
+  /**
+   * 将节点移动到链表尾部
+   * 
+   * @param node 要移动的节点
+   */
+  moveToLast(node: DoublyLinkedListNode<T>): void {
+    if (node === this.tail) {
+      return; // 已经在尾部
+    }
+
+    // 从当前位置移除
+    if (node.prev) {
+      node.prev.next = node.next;
+    } else {
+      this.head = node.next;
+    }
+    if (node.next) {
+      node.next.prev = node.prev;
+    }
+
+    // 移动到尾部
+    node.next = null;
+    node.prev = this.tail;
+    if (this.tail) {
+      this.tail.next = node;
+    }
+    this.tail = node;
+
+    // 如果链表之前为空，更新头节点
+    if (this.head === null) {
+      this.head = node;
+    }
+  }
+
+  /**
+   * 清空链表
+   * 
+   * @param onClear 清空时对每个节点数据的回调函数
+   */
+  clear(onClear?: (data: T) => void): void {
+    let current = this.head;
+    while (current) {
+      const next = current.next;
+      
+      if (onClear) {
+        onClear(current.data);
+      }
+      
+      // 清理节点引用，防止内存泄漏
+      current.prev = null;
+      current.next = null;
+      
+      current = next;
+    }
+    
+    this.head = null;
+    this.tail = null;
+    this._size = 0;
+  }
+
+  /**
+   * 将链表转换为数组
+   * 
+   * @returns 包含所有节点数据的数组，按从头到尾的顺序
+   */
+  toArray(): T[] {
+    const result: T[] = [];
+    let current = this.head;
+    while (current) {
+      result.push(current.data);
+      current = current.next;
+    }
+    return result;
+  }
+
+  /**
+   * 遍历链表
+   * 
+   * @param callback 对每个节点数据执行的回调函数
+   */
+  forEach(callback: (data: T, index: number) => void): void {
+    let current = this.head;
+    let index = 0;
+    while (current) {
+      callback(current.data, index);
+      current = current.next;
+      index++;
+    }
+  }
+}

frontend/src/common/utils/hashUtils.ts

@@ -0,0 +1,92 @@
+/**
+ * 高效哈希算法实现
+ * 针对大量文本内容优化的哈希函数集合
+ */
+
+/**
+ * 使用优化的 xxHash32 算法生成字符串哈希值
+ * 专为大量文本内容设计，性能优异
+ * 
+ * xxHash32 特点：
+ * - 极快的处理速度
+ * - 优秀的分布质量，冲突率极低
+ * - 对长文本友好，性能不会随长度线性下降
+ * - 被广泛应用于数据库、压缩工具等
+ * 
+ * @param content 要哈希的字符串内容
+ * @returns 32位哈希值的字符串表示
+ */
+export const generateContentHash = (content: string): string => {
+  return (generateContentHashInternal(content) >>> 0).toString(36);
+};
+
+/**
+ * 从字符串中提取 32 位整数（模拟小端序）
+ */
+function getUint32(str: string, index: number): number {
+  return (
+    (str.charCodeAt(index) & 0xff) |
+    ((str.charCodeAt(index + 1) & 0xff) << 8) |
+    ((str.charCodeAt(index + 2) & 0xff) << 16) |
+    ((str.charCodeAt(index + 3) & 0xff) << 24)
+  );
+}
+
+/**
+ * 32 位左旋转
+ */
+function rotateLeft(value: number, shift: number): number {
+  return (value << shift) | (value >>> (32 - shift));
+}
+
+
+/**
+ * 内部哈希计算函数，返回数值
+ */
+function generateContentHashInternal(content: string): number {
+  const PRIME1 = 0x9e3779b1;
+  const PRIME2 = 0x85ebca77;
+  const PRIME3 = 0xc2b2ae3d;
+  const PRIME4 = 0x27d4eb2f;
+  const PRIME5 = 0x165667b1;
+  
+  const len = content.length;
+  let hash: number;
+  let i = 0;
+  
+  if (len >= 16) {
+    let acc1 = PRIME1 + PRIME2;
+    let acc2 = PRIME2;
+    let acc3 = 0;
+    let acc4 = -PRIME1;
+    
+    for (; i <= len - 16; i += 16) {
+      acc1 = Math.imul(rotateLeft(acc1 + Math.imul(getUint32(content, i), PRIME2), 13), PRIME1);
+      acc2 = Math.imul(rotateLeft(acc2 + Math.imul(getUint32(content, i + 4), PRIME2), 13), PRIME1);
+      acc3 = Math.imul(rotateLeft(acc3 + Math.imul(getUint32(content, i + 8), PRIME2), 13), PRIME1);
+      acc4 = Math.imul(rotateLeft(acc4 + Math.imul(getUint32(content, i + 12), PRIME2), 13), PRIME1);
+    }
+    
+    hash = rotateLeft(acc1, 1) + rotateLeft(acc2, 7) + rotateLeft(acc3, 12) + rotateLeft(acc4, 18);
+  } else {
+    hash = PRIME5;
+  }
+  
+  hash += len;
+  
+  for (; i <= len - 4; i += 4) {
+    hash = Math.imul(rotateLeft(hash + Math.imul(getUint32(content, i), PRIME3), 17), PRIME4);
+  }
+  
+  for (; i < len; i++) {
+    hash = Math.imul(rotateLeft(hash + Math.imul(content.charCodeAt(i), PRIME5), 11), PRIME1);
+  }
+  
+  hash ^= hash >>> 15;
+  hash = Math.imul(hash, PRIME2);
+  hash ^= hash >>> 13;
+  hash = Math.imul(hash, PRIME3);
+  hash ^= hash >>> 16;
+  
+  return hash;
+}

frontend/src/common/utils/lruCache.ts

@@ -0,0 +1,157 @@
+import { DoublyLinkedList, DoublyLinkedListNode } from './doublyLinkedList';
+
+/**
+ * LRU缓存项
+ * 
+ * @template K 键的类型
+ * @template V 值的类型
+ */
+interface LruCacheItem<K, V> {
+  key: K;
+  value: V;
+}
+
+/**
+ * LRU (Least Recently Used) 缓存实现
+ * 使用双向链表 + Map 实现 O(1) 时间复杂度的所有操作
+ * 
+ * @template K 键的类型
+ * @template V 值的类型
+ */
+export class LruCache<K, V> {
+  private readonly maxSize: number;
+  private readonly cache = new Map<K, DoublyLinkedListNode<LruCacheItem<K, V>>>();
+  private readonly lru = new DoublyLinkedList<LruCacheItem<K, V>>();
+
+  /**
+   * 创建LRU缓存实例
+   * 
+   * @param maxSize 最大缓存大小
+   */
+  constructor(maxSize: number) {
+    if (maxSize <= 0) {
+      throw new Error('Max size must be greater than 0');
+    }
+    this.maxSize = maxSize;
+  }
+
+  /**
+   * 获取缓存值
+   * 
+   * @param key 键
+   * @returns 缓存的值，如果不存在则返回undefined
+   */
+  get(key: K): V | undefined {
+    const node = this.cache.get(key);
+    if (node) {
+      // 将访问的节点移动到链表尾部（最近使用）
+      this.lru.moveToLast(node);
+      return node.data.value;
+    }
+    return undefined;
+  }
+
+  /**
+   * 设置缓存值
+   * 
+   * @param key 键
+   * @param value 值
+   * @param onEvict 当有项目被驱逐时的回调函数
+   */
+  set(key: K, value: V, onEvict?: (evictedKey: K, evictedValue: V) => void): void {
+    const existingNode = this.cache.get(key);
+    
+    // 如果键已存在，更新值并移动到最近使用
+    if (existingNode) {
+      existingNode.data.value = value;
+      this.lru.moveToLast(existingNode);
+      return;
+    }
+
+    // 如果缓存已满，移除最少使用的项
+    if (this.cache.size >= this.maxSize) {
+      const oldestNode = this.lru.first;
+      if (oldestNode) {
+        const { key: evictedKey, value: evictedValue } = oldestNode.data;
+        this.cache.delete(evictedKey);
+        this.lru.removeFirst();
+        
+        if (onEvict) {
+          onEvict(evictedKey, evictedValue);
+        }
+      }
+    }
+
+    // 添加新项到链表尾部（最近使用）
+    const newNode = this.lru.addLast({ key, value });
+    this.cache.set(key, newNode);
+  }
+
+  /**
+   * 检查键是否存在
+   * 
+   * @param key 键
+   * @returns 是否存在
+   */
+  has(key: K): boolean {
+    return this.cache.has(key);
+  }
+
+  /**
+   * 删除指定键的缓存
+   * 
+   * @param key 键
+   * @returns 是否成功删除
+   */
+  delete(key: K): boolean {
+    const node = this.cache.get(key);
+    if (node) {
+      this.cache.delete(key);
+      this.lru.remove(node);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * 清空缓存
+   * 
+   * @param onEvict 清空时对每个项目的回调函数
+   */
+  clear(onEvict?: (key: K, value: V) => void): void {
+    if (onEvict) {
+      this.lru.forEach(item => {
+        onEvict(item.key, item.value);
+      });
+    }
+    this.cache.clear();
+    this.lru.clear();
+  }
+
+  /**
+   * 获取缓存大小
+   * 
+   * @returns 当前缓存项数量
+   */
+  get size(): number {
+    return this.cache.size;
+  }
+
+  /**
+   * 获取所有键
+   * 
+   * @returns 所有键的数组，按最近使用顺序排列（从最少使用到最近使用）
+   */
+  keys(): K[] {
+    return this.lru.toArray().map(item => item.key);
+  }
+
+  /**
+   * 获取所有值
+   * 
+   * @returns 所有值的数组，按最近使用顺序排列（从最少使用到最近使用）
+   */
+  values(): V[] {
+    return this.lru.toArray().map(item => item.value);
+  }
+}

frontend/src/common/utils/timerUtils.ts

@@ -0,0 +1,162 @@
+/**
+ * 定时器管理工具类
+ * 提供安全的定时器创建、清理和管理功能
+ */
+
+/**
+ * 定时器管理器接口
+ */
+export interface TimerManager {
+  /** 当前定时器 ID */
+  readonly timerId: number | null;
+  /** 清除定时器 */
+  clear(): void;
+  /** 设置定时器 */
+  set(callback: () => void, delay: number): void;
+}
+
+/**
+ * 创建定时器管理器工厂函数
+ * 提供安全的定时器管理，自动处理清理和重置
+ * 
+ * @returns 定时器管理器实例
+ * 
+ * @example
+ * ```typescript
+ * const timer = createTimerManager();
+ * 
+ * // 设置定时器
+ * timer.set(() => {
+ *   console.log('Timer executed');
+ * }, 1000);
+ * 
+ * // 清除定时器
+ * timer.clear();
+ * 
+ * // 检查定时器状态
+ * if (timer.timerId !== null) {
+ *   console.log('Timer is running');
+ * }
+ * ```
+ */
+export const createTimerManager = (): TimerManager => {
+  let timerId: number | null = null;
+  
+  return {
+    get timerId() { 
+      return timerId; 
+    },
+    
+    clear() {
+      if (timerId !== null) {
+        window.clearTimeout(timerId);
+        timerId = null;
+      }
+    },
+    
+    set(callback: () => void, delay: number) {
+      // 先清除现有定时器
+      this.clear();
+      
+      // 设置新定时器
+      timerId = window.setTimeout(() => {
+        callback();
+        timerId = null; // 执行完成后自动重置
+      }, delay);
+    }
+  };
+};
+
+/**
+ * 创建带有自动清理功能的定时器
+ * 适用于需要在组件卸载时自动清理的场景
+ * 
+ * @param onCleanup 清理回调函数，通常在 onScopeDispose 或 onUnmounted 中调用
+ * @returns 定时器管理器实例
+ * 
+ * @example
+ * ```typescript
+ * import { onScopeDispose } from 'vue';
+ * 
+ * const timer = createAutoCleanupTimer(() => {
+ *   // 组件卸载时自动清理
+ * });
+ * 
+ * onScopeDispose(() => {
+ *   timer.clear();
+ * });
+ * ```
+ */
+export const createAutoCleanupTimer = (onCleanup?: () => void): TimerManager => {
+  const timer = createTimerManager();
+  
+  // 如果提供了清理回调，则包装 clear 方法
+  if (onCleanup) {
+    const originalClear = timer.clear.bind(timer);
+    timer.clear = () => {
+      originalClear();
+      onCleanup();
+    };
+  }
+  
+  return timer;
+};
+
+/**
+ * 延迟执行工具函数
+ * 简化的 Promise 版本延迟执行
+ * 
+ * @param delay 延迟时间（毫秒）
+ * @returns Promise
+ * 
+ * @example
+ * ```typescript
+ * await delay(1000); // 延迟 1 秒
+ * console.log('1 second later');
+ * ```
+ */
+export const delay = (delay: number): Promise<void> => {
+  return new Promise(resolve => {
+    setTimeout(resolve, delay);
+  });
+};
+
+/**
+ * 创建可取消的延迟 Promise
+ * 
+ * @param delay 延迟时间（毫秒）
+ * @returns 包含 promise 和 cancel 方法的对象
+ * 
+ * @example
+ * ```typescript
+ * const { promise, cancel } = createCancelableDelay(1000);
+ * 
+ * promise
+ *   .then(() => console.log('Executed'))
+ *   .catch(() => console.log('Cancelled'));
+ * 
+ * // 取消延迟
+ * cancel();
+ * ```
+ */
+export const createCancelableDelay = (delay: number) => {
+  let timeoutId: number;
+  let cancelled = false;
+  
+  const promise = new Promise<void>((resolve, reject) => {
+    timeoutId = window.setTimeout(() => {
+      if (!cancelled) {
+        resolve();
+      }
+    }, delay);
+  });
+  
+  const cancel = () => {
+    cancelled = true;
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  };
+  
+  return { promise, cancel };
+};

frontend/src/components/loading/LoadingScreen.vue

@@ -80,7 +80,7 @@ function animationLoop() {
       // 等待一段时间后重置动画
       resetTimeoutId = window.setTimeout(() => {
         reset();
-      }, 750);
+      }, 500);
     }
   }
   
@@ -136,7 +136,8 @@ onBeforeUnmount(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: var(--voidraft-bg-gradient, radial-gradient(#222922, #000500));
+  //background: var(--voidraft-bg-gradient, rgba(0, 5, 0, 0.15));
+  //backdrop-filter: blur(2px);
   z-index: 1000;
   display: flex;
   align-items: center;

frontend/src/components/monitor/MemoryMonitor.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
-import { SystemService } from '@/../bindings/voidraft/internal/services';
+import {computed, nextTick, onMounted, onUnmounted, ref, watch} from 'vue';
 import type {MemoryStats} from '@/../bindings/voidraft/internal/services';
+import {SystemService} from '@/../bindings/voidraft/internal/services';
 import {useI18n} from 'vue-i18n';
 import {useThemeStore} from '@/stores/themeStore';
 import {SystemThemeType} from '@/../bindings/voidraft/internal/models/models';
 
 const {t} = useI18n();
 const themeStore = useThemeStore();
+
+// 响应式状态
 const memoryStats = ref<MemoryStats | null>(null);
 const formattedMemory = ref('');
 const isLoading = ref(true);
 const canvasRef = ref<HTMLCanvasElement | null>(null);
-let intervalId: ReturnType<typeof setInterval> | null = null;
 
 // 存储历史数据点 (最近60个数据点)
 const historyData = ref<number[]>([]);
@@ -21,106 +22,74 @@ const maxDataPoints = 60;
 // 动态最大内存值（MB），初始为200MB，会根据实际使用动态调整
 const maxMemoryMB = ref(200);
 
-// 使用themeStore获取当前主题
+let intervalId: ReturnType<typeof setInterval> | null = null;
+
+// 使用 computed 获取当前主题状态
 const isDarkTheme = computed(() => {
-  const theme = themeStore.currentTheme;
-  if (theme === SystemThemeType.SystemThemeAuto) {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches;
-  }
-  return theme === SystemThemeType.SystemThemeDark;
+  const {currentTheme} = themeStore;
+  return currentTheme === SystemThemeType.SystemThemeDark;
 });
 
 // 监听主题变化，重新绘制图表
 watch(() => themeStore.currentTheme, () => {
-  nextTick(() => drawChart());
+  nextTick(drawChart);
 });
 
-// 静默错误处理包装器
-const withSilentErrorHandling = async <T>(
-  operation: () => Promise<T>,
-  fallback?: T
-): Promise<T | undefined> => {
-  try {
-    return await operation();
-  } catch (_error) {
-    // 静默处理错误，不输出到控制台
-    return fallback;
-  }
+// 格式化内存显示函数
+const formatMemorySize = (heapMB: number): string => {
+  if (heapMB < 1) return `${(heapMB * 1024).toFixed(0)}K`;
+  if (heapMB < 100) return `${heapMB.toFixed(1)}M`;
+  return `${heapMB.toFixed(0)}M`;
 };
 
 // 获取内存统计信息
-const fetchMemoryStats = async () => {
-  const stats = await withSilentErrorHandling(() => SystemService.GetMemoryStats());
-  
-  if (!stats) {
-    isLoading.value = false;
-    return;
-  }
+const fetchMemoryStats = async (): Promise<void> => {
+  try {
+    const stats = await SystemService.GetMemoryStats();
 
     memoryStats.value = stats;
 
     // 格式化内存显示 - 主要显示堆内存使用量
-    const heapMB = (stats.heapInUse / 1024 / 1024);
-    if (heapMB < 1) {
-      formattedMemory.value = `${(heapMB * 1024).toFixed(0)}K`;
-    } else if (heapMB < 100) {
-      formattedMemory.value = `${heapMB.toFixed(1)}M`;
-    } else {
-      formattedMemory.value = `${heapMB.toFixed(0)}M`;
-    }
+    const heapMB = stats.heapInUse / (1024 * 1024);
+    formattedMemory.value = formatMemorySize(heapMB);
 
     // 自动调整最大内存值，确保图表能够显示更大范围
     if (heapMB > maxMemoryMB.value * 0.8) {
-      // 如果内存使用超过当前最大值的80%，则将最大值调整为当前使用值的2倍
       maxMemoryMB.value = Math.ceil(heapMB * 2);
     }
 
     // 添加新数据点到历史记录 - 使用动态最大值计算百分比
     const memoryUsagePercent = Math.min((heapMB / maxMemoryMB.value) * 100, 100);
-    historyData.value.push(memoryUsagePercent);
-    
-    // 保持最大数据点数量
-    if (historyData.value.length > maxDataPoints) {
-      historyData.value.shift();
-    }
+    historyData.value = [...historyData.value, memoryUsagePercent].slice(-maxDataPoints);
 
     // 更新图表
     drawChart();
-    
+  } catch {
+    // 静默处理错误
+  } finally {
     isLoading.value = false;
+  }
 };
 
-// 绘制实时曲线图 - 简化版
-const drawChart = () => {
-  if (!canvasRef.value || historyData.value.length === 0) return;
+// 获取主题相关颜色配置
+const getThemeColors = () => {
+  const isDark = isDarkTheme.value;
+  return {
+    grid: isDark ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.07)',
+    line: isDark ? 'rgba(74, 158, 255, 0.6)' : 'rgba(37, 99, 235, 0.6)',
+    fill: isDark ? 'rgba(74, 158, 255, 0.05)' : 'rgba(37, 99, 235, 0.05)',
+    point: isDark ? 'rgba(74, 158, 255, 0.8)' : 'rgba(37, 99, 235, 0.8)'
+  };
+};
 
-  const canvas = canvasRef.value;
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
+// 绘制网格背景
+const drawGrid = (ctx: CanvasRenderingContext2D, width: number, height: number, colors: ReturnType<typeof getThemeColors>): void => {
+  ctx.strokeStyle = colors.grid;
+  ctx.lineWidth = 0.5;
 
-  // 设置canvas尺寸
-  const rect = canvas.getBoundingClientRect();
-  canvas.width = rect.width * window.devicePixelRatio;
-  canvas.height = rect.height * window.devicePixelRatio;
-  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-  
-  const width = rect.width;
-  const height = rect.height;
-  
-  // 清除画布
-  ctx.clearRect(0, 0, width, height);
-  
-  // 根据主题选择合适的颜色 - 更柔和的颜色
-  const gridColor = isDarkTheme.value ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.07)';
-  const lineColor = isDarkTheme.value ? 'rgba(74, 158, 255, 0.6)' : 'rgba(37, 99, 235, 0.6)';
-  const fillColor = isDarkTheme.value ? 'rgba(74, 158, 255, 0.05)' : 'rgba(37, 99, 235, 0.05)';
-  const pointColor = isDarkTheme.value ? 'rgba(74, 158, 255, 0.8)' : 'rgba(37, 99, 235, 0.8)';
-  
-  // 绘制背景网格 - 更加柔和
+  // 水平网格线
   for (let i = 0; i <= 4; i++) {
     const y = (height / 4) * i;
-    ctx.strokeStyle = gridColor;
-    ctx.lineWidth = 0.5;
     ctx.beginPath();
     ctx.moveTo(0, y);
     ctx.lineTo(width, y);
@@ -130,13 +99,79 @@ const drawChart = () => {
   // 垂直网格线
   for (let i = 0; i <= 6; i++) {
     const x = (width / 6) * i;
-    ctx.strokeStyle = gridColor;
-    ctx.lineWidth = 0.5;
     ctx.beginPath();
     ctx.moveTo(x, 0);
     ctx.lineTo(x, height);
     ctx.stroke();
   }
+};
+
+// 绘制平滑曲线路径
+const drawSmoothPath = (
+    ctx: CanvasRenderingContext2D,
+    data: number[],
+    startX: number,
+    stepX: number,
+    height: number,
+    fillArea = false
+): void => {
+  if (data.length < 2) return;
+
+  const firstY = height - (data[0] / 100) * height;
+
+  ctx.beginPath();
+  if (fillArea) ctx.moveTo(startX, height);
+  ctx.moveTo(startX, firstY);
+
+  // 使用二次贝塞尔曲线绘制平滑路径
+  for (let i = 1; i < data.length; i++) {
+    const x = startX + i * stepX;
+    const y = height - (data[i] / 100) * height;
+
+    if (i === 1) {
+      ctx.lineTo(x, y);
+    } else {
+      const prevX = startX + (i - 1) * stepX;
+      const prevY = height - (data[i - 1] / 100) * height;
+      const cpX = (prevX + x) / 2;
+      const cpY = (prevY + y) / 2;
+      ctx.quadraticCurveTo(cpX, cpY, x, y);
+    }
+  }
+
+  if (fillArea) {
+    const lastX = startX + (data.length - 1) * stepX;
+    ctx.lineTo(lastX, height);
+    ctx.closePath();
+  }
+};
+
+// 绘制实时曲线图
+const drawChart = (): void => {
+  const canvas = canvasRef.value;
+  if (!canvas || historyData.value.length === 0) return;
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  // 设置canvas尺寸
+  const rect = canvas.getBoundingClientRect();
+  const dpr = window.devicePixelRatio;
+
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  ctx.scale(dpr, dpr);
+
+  const {width, height} = rect;
+
+  // 清除画布
+  ctx.clearRect(0, 0, width, height);
+
+  // 获取主题颜色
+  const colors = getThemeColors();
+
+  // 绘制背景网格
+  drawGrid(ctx, width, height, colors);
 
   if (historyData.value.length < 2) return;
 
@@ -145,80 +180,25 @@ const drawChart = () => {
   const stepX = width / (maxDataPoints - 1);
   const startX = width - (dataLength - 1) * stepX;
 
-  // 绘制填充区域 - 更柔和的填充
-  ctx.beginPath();
-  ctx.moveTo(startX, height);
-  
-  // 移动到第一个数据点
-  const firstY = height - (historyData.value[0] / 100) * height;
-  ctx.lineTo(startX, firstY);
-  
-  // 绘制数据点路径 - 使用曲线连接点，确保连续性
-  for (let i = 1; i < dataLength; i++) {
-    const x = startX + i * stepX;
-    const y = height - (historyData.value[i] / 100) * height;
-    
-    // 使用贝塞尔曲线平滑连接
-    if (i < dataLength - 1) {
-      const nextX = startX + (i + 1) * stepX;
-      const nextY = height - (historyData.value[i + 1] / 100) * height;
-      const cpX1 = x - stepX / 4;
-      const cpY1 = y;
-      const cpX2 = x + stepX / 4;
-      const cpY2 = nextY;
-      
-      // 使用三次贝塞尔曲线平滑连接点
-      ctx.bezierCurveTo(cpX1, cpY1, cpX2, cpY2, nextX, nextY);
-      i++; // 跳过下一个点，因为已经在曲线中处理了
-    } else {
-      ctx.lineTo(x, y);
-    }
-  }
-  
-  // 完成填充路径
-  const lastX = startX + (dataLength - 1) * stepX;
-  ctx.lineTo(lastX, height);
-  ctx.closePath();
-  ctx.fillStyle = fillColor;
+  // 绘制填充区域
+  drawSmoothPath(ctx, historyData.value, startX, stepX, height, true);
+  ctx.fillStyle = colors.fill;
   ctx.fill();
 
-  // 绘制主曲线 - 平滑连续的曲线
-  ctx.beginPath();
-  ctx.moveTo(startX, firstY);
-  
-  // 重新绘制曲线路径，但这次只绘制线条
-  for (let i = 1; i < dataLength; i++) {
-    const x = startX + i * stepX;
-    const y = height - (historyData.value[i] / 100) * height;
-    
-    // 使用贝塞尔曲线平滑连接
-    if (i < dataLength - 1) {
-      const nextX = startX + (i + 1) * stepX;
-      const nextY = height - (historyData.value[i + 1] / 100) * height;
-      const cpX1 = x - stepX / 4;
-      const cpY1 = y;
-      const cpX2 = x + stepX / 4;
-      const cpY2 = nextY;
-      
-      // 使用三次贝塞尔曲线平滑连接点
-      ctx.bezierCurveTo(cpX1, cpY1, cpX2, cpY2, nextX, nextY);
-      i++; // 跳过下一个点，因为已经在曲线中处理了
-    } else {
-      ctx.lineTo(x, y);
-    }
-  }
-  
-  ctx.strokeStyle = lineColor;
+  // 绘制主曲线
+  drawSmoothPath(ctx, historyData.value, startX, stepX, height);
+  ctx.strokeStyle = colors.line;
   ctx.lineWidth = 1.5;
   ctx.lineCap = 'round';
   ctx.lineJoin = 'round';
   ctx.stroke();
 
   // 绘制当前值的高亮点
+  const lastX = startX + (dataLength - 1) * stepX;
   const lastY = height - (historyData.value[dataLength - 1] / 100) * height;
 
   // 外圈
-  ctx.fillStyle = pointColor;
+  ctx.fillStyle = colors.point;
   ctx.globalAlpha = 0.4;
   ctx.beginPath();
   ctx.arc(lastX, lastY, 3, 0, Math.PI * 2);
@@ -232,72 +212,32 @@ const drawChart = () => {
 };
 
 // 手动触发GC
-const triggerGC = async () => {
-  const success = await withSilentErrorHandling(() => SystemService.TriggerGC());
-  
-  if (success) {
-    // 延迟一下再获取新的统计信息
-    setTimeout(fetchMemoryStats, 100);
+const triggerGC = async (): Promise<void> => {
+  try {
+    await SystemService.TriggerGC();
+  } catch (error) {
+    console.error("Failed to trigger GC: ", error);
   }
 };
 
-// 处理窗口大小变化
-const handleResize = () => {
-  if (historyData.value.length > 0) {
-    nextTick(() => drawChart());
-  }
-};
-
-// 仅监听系统主题变化
-const setupSystemThemeListener = () => {
-  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-  const handleSystemThemeChange = () => {
-    // 仅当设置为auto时才响应系统主题变化
-    if (themeStore.currentTheme === SystemThemeType.SystemThemeAuto) {
-      nextTick(() => drawChart());
-    }
-  };
-
-  // 添加监听器
-  if (mediaQuery.addEventListener) {
-    mediaQuery.addEventListener('change', handleSystemThemeChange);
-  }
-
-  // 返回清理函数
-  return () => {
-    if (mediaQuery.removeEventListener) {
-      mediaQuery.removeEventListener('change', handleSystemThemeChange);
-    }
-  };
-};
-
 onMounted(() => {
   fetchMemoryStats();
-  // 每1秒更新一次内存信息
+  // 每3秒更新一次内存信息
   intervalId = setInterval(fetchMemoryStats, 3000);
-  
-  // 监听窗口大小变化
-  window.addEventListener('resize', handleResize);
-  
-  // 设置系统主题监听器（仅用于auto模式）
-  const cleanupThemeListener = setupSystemThemeListener();
-  
-  // 在卸载时清理
-  onUnmounted(() => {
-    if (intervalId) {
-      clearInterval(intervalId);
-    }
-    window.removeEventListener('resize', handleResize);
-    cleanupThemeListener();
 });
+
+onUnmounted(() => {
+  intervalId && clearInterval(intervalId);
 });
 </script>
 
 <template>
-  <div class="memory-monitor" @click="triggerGC" :title="`${t('monitor.memory')}: ${formattedMemory} | ${t('monitor.clickToClean')}`">
+  <div class="memory-monitor" @click="triggerGC"
+       :title="`${t('monitor.memory')}: ${formattedMemory} | ${t('monitor.clickToClean')}`">
     <div class="monitor-info">
       <div class="memory-label">
-        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
         </svg>
         <span>{{ t('monitor.memory') }}</span>

frontend/src/components/tabs/TabContainer.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="tab-container" style="--wails-draggable:drag">
+    <div class="tab-bar" ref="tabBarRef">
+      <div class="tab-scroll-wrapper" ref="tabScrollWrapperRef" style="--wails-draggable:drag" @wheel.prevent.stop="onWheelScroll">
+        <div class="tab-list" ref="tabListRef">
+          <TabItem
+            v-for="tab in tabStore.tabs"
+            :key="tab.documentId"
+            :tab="tab"
+            :isActive="tab.documentId === tabStore.currentDocumentId"
+            :canClose="tabStore.canCloseTab"
+            @click="switchToTab"
+            @close="closeTab"
+            @dragstart="onDragStart"
+            @dragover="onDragOver"
+            @drop="onDrop"
+            @contextmenu="onContextMenu"
+          />
+        </div>
+      </div>
+    </div>
+    
+    <!-- 右键菜单 -->
+    <TabContextMenu
+      :visible="showContextMenu"
+      :position="contextMenuPosition"
+      :targetDocumentId="contextMenuTargetId"
+      @close="closeContextMenu"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import TabItem from './TabItem.vue';
+import TabContextMenu from './TabContextMenu.vue';
+import { useTabStore } from '@/stores/tabStore';
+
+const tabStore = useTabStore();
+
+// DOM 引用
+const tabBarRef = ref<HTMLElement>();
+const tabListRef = ref<HTMLElement>();
+const tabScrollWrapperRef = ref<HTMLDivElement | null>(null);
+
+// 右键菜单状态
+const showContextMenu = ref(false);
+const contextMenuPosition = ref({ x: 0, y: 0 });
+const contextMenuTargetId = ref<number | null>(null);
+
+
+// 标签页操作
+const switchToTab = (documentId: number) => {
+  tabStore.switchToTabAndDocument(documentId);
+};
+
+const closeTab = (documentId: number) => {
+  tabStore.closeTab(documentId);
+};
+
+// 拖拽操作
+const onDragStart = (event: DragEvent, documentId: number) => {
+  tabStore.draggedTabId = documentId;
+  event.dataTransfer!.effectAllowed = 'move';
+};
+
+const onDragOver = (event: DragEvent) => {
+  event.preventDefault();
+  event.dataTransfer!.dropEffect = 'move';
+};
+
+const onDrop = (event: DragEvent, targetDocumentId: number) => {
+  event.preventDefault();
+  
+  if (tabStore.draggedTabId && tabStore.draggedTabId !== targetDocumentId) {
+    const draggedIndex = tabStore.getTabIndex(tabStore.draggedTabId);
+    const targetIndex = tabStore.getTabIndex(targetDocumentId);
+    
+    if (draggedIndex !== -1 && targetIndex !== -1) {
+      tabStore.moveTab(draggedIndex, targetIndex);
+    }
+  }
+  
+  tabStore.draggedTabId = null;
+};
+
+// 右键菜单操作
+const onContextMenu = (event: MouseEvent, documentId: number) => {
+  event.preventDefault();
+  event.stopPropagation();
+  
+  contextMenuPosition.value = { x: event.clientX, y: event.clientY };
+  contextMenuTargetId.value = documentId;
+  showContextMenu.value = true;
+};
+
+const closeContextMenu = () => {
+  showContextMenu.value = false;
+  contextMenuTargetId.value = null;
+};
+
+// 滚轮滚动处理
+const onWheelScroll = (event: WheelEvent) => {
+  const el = tabScrollWrapperRef.value;
+  if (!el) return;
+  const delta = event.deltaY || event.deltaX || 0;
+  el.scrollLeft += delta;
+};
+
+// 自动滚动到活跃标签页
+const scrollToActiveTab = async () => {
+  await nextTick();
+  
+  const scrollWrapper = tabScrollWrapperRef.value;
+  const tabList = tabListRef.value;
+  
+  if (!scrollWrapper || !tabList) return;
+  
+  // 查找当前活跃的标签页元素
+  const activeTabElement = tabList.querySelector('.tab-item.active') as HTMLElement;
+  if (!activeTabElement) return;
+  
+  const scrollWrapperRect = scrollWrapper.getBoundingClientRect();
+  const activeTabRect = activeTabElement.getBoundingClientRect();
+  
+  // 计算活跃标签页相对于滚动容器的位置
+  const activeTabLeft = activeTabRect.left - scrollWrapperRect.left + scrollWrapper.scrollLeft;
+  const activeTabRight = activeTabLeft + activeTabRect.width;
+  
+  // 获取滚动容器的可视区域
+  const scrollLeft = scrollWrapper.scrollLeft;
+  const scrollRight = scrollLeft + scrollWrapper.clientWidth;
+  
+  // 如果活跃标签页不在可视区域内，则滚动到合适位置
+  if (activeTabLeft < scrollLeft) {
+    // 标签页在左侧不可见，滚动到左边
+    scrollWrapper.scrollLeft = activeTabLeft - 10; // 留一点边距
+  } else if (activeTabRight > scrollRight) {
+    // 标签页在右侧不可见，滚动到右边
+    scrollWrapper.scrollLeft = activeTabRight - scrollWrapper.clientWidth + 10; // 留一点边距
+  }
+};
+
+onMounted(() => {
+  // 组件挂载时的初始化逻辑
+});
+
+onUnmounted(() => {
+  // 组件卸载时的清理逻辑
+});
+
+// 监听当前活跃标签页的变化
+watch(() => tabStore.currentDocumentId, () => {
+  scrollToActiveTab();
+});
+
+// 监听标签页列表变化
+watch(() => tabStore.tabs.length, () => {
+  scrollToActiveTab();
+});
+</script>
+
+<style scoped lang="scss">
+.tab-container {
+  position: relative;
+  background: transparent;
+  height: 32px;
+}
+
+.tab-bar {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  background: var(--toolbar-bg);
+  min-width: 0; /* 允许子项收缩，确保产生横向溢出 */
+}
+
+.tab-scroll-wrapper {
+  flex: 1;
+  min-width: 0; // 关键：允许作为 flex 子项收缩，从而产生横向溢出
+  overflow-x: auto;
+  overflow-y: hidden;
+  position: relative;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  pointer-events: auto;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.tab-list {
+  display: flex;
+  width: max-content; /* 令宽度等于所有子项总宽度，必定溢出 */
+  white-space: nowrap;
+  pointer-events: auto;
+}
+
+.tab-actions {
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  background: var(--toolbar-bg);
+  flex-shrink: 0; /* 防止被压缩 */
+}
+
+.tab-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: 0 1px;
+  border-radius: 3px;
+  cursor: pointer;
+  color: var(--toolbar-text);
+  transition: background-color 0.2s ease;
+  
+  &:hover {
+    background: var(--toolbar-button-hover);
+  }
+  
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .tab-action-btn {
+    width: 20px;
+    height: 20px;
+    
+    svg {
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+</style>

frontend/src/components/tabs/TabContextMenu.vue

@@ -0,0 +1,181 @@
+<template>
+  <div
+    v-if="visible && canClose"
+    class="tab-context-menu"
+    :style="{
+      left: position.x + 'px',
+      top: position.y + 'px'
+    }"
+    @click.stop
+  >
+    <div v-if="canClose" class="menu-item" @click="handleMenuClick('close')">
+      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 6L6 18M6 6l12 12"/>
+      </svg>
+      <span class="menu-text">{{ t('tabs.contextMenu.closeTab') }}</span>
+    </div>
+    <div v-if="hasOtherTabs" class="menu-item" @click="handleMenuClick('closeOthers')">
+      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+        <path d="M9 9l6 6M15 9l-6 6"/>
+      </svg>
+      <span class="menu-text">{{ t('tabs.contextMenu.closeOthers') }}</span>
+    </div>
+    <div v-if="hasTabsToLeft" class="menu-item" @click="handleMenuClick('closeLeft')">
+      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M15 18l-6-6 6-6"/>
+        <path d="M9 18l-6-6 6-6"/>
+      </svg>
+      <span class="menu-text">{{ t('tabs.contextMenu.closeLeft') }}</span>
+    </div>
+    <div v-if="hasTabsToRight" class="menu-item" @click="handleMenuClick('closeRight')">
+      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M9 18l6-6-6-6"/>
+        <path d="M15 18l6-6-6-6"/>
+      </svg>
+      <span class="menu-text">{{ t('tabs.contextMenu.closeRight') }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useTabStore } from '@/stores/tabStore';
+
+interface Props {
+  visible: boolean;
+  position: { x: number; y: number };
+  targetDocumentId: number | null;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const { t } = useI18n();
+const tabStore = useTabStore();
+
+// 计算属性
+const canClose = computed(() => tabStore.canCloseTab);
+
+const hasOtherTabs = computed(() => {
+  return tabStore.tabs.length > 1;
+});
+
+const currentTabIndex = computed(() => {
+  if (!props.targetDocumentId) return -1;
+  return tabStore.getTabIndex(props.targetDocumentId);
+});
+
+const hasTabsToRight = computed(() => {
+  const index = currentTabIndex.value;
+  return index !== -1 && index < tabStore.tabs.length - 1;
+});
+
+const hasTabsToLeft = computed(() => {
+  const index = currentTabIndex.value;
+  return index > 0;
+});
+
+// 处理菜单项点击
+const handleMenuClick = (action: string) => {
+  if (!props.targetDocumentId) return;
+
+  switch (action) {
+    case 'close':
+      tabStore.closeTab(props.targetDocumentId);
+      break;
+    case 'closeOthers':
+      tabStore.closeOtherTabs(props.targetDocumentId);
+      break;
+    case 'closeLeft':
+      tabStore.closeTabsToLeft(props.targetDocumentId);
+      break;
+    case 'closeRight':
+      tabStore.closeTabsToRight(props.targetDocumentId);
+      break;
+  }
+  
+  emit('close');
+};
+
+// 处理外部点击
+const handleClickOutside = (_event: MouseEvent) => {
+  if (props.visible) {
+    emit('close');
+  }
+};
+
+// 处理ESC键
+const handleEscapeKey = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && props.visible) {
+    emit('close');
+  }
+};
+
+// 生命周期
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+  document.addEventListener('keydown', handleEscapeKey);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+  document.removeEventListener('keydown', handleEscapeKey);
+});
+</script>
+
+<style scoped lang="scss">
+.tab-context-menu {
+  position: fixed;
+  z-index: 1000;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  min-width: 100px;
+  user-select: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-muted);
+  transition: all 0.15s ease;
+  gap: 8px;
+  
+  &:hover {
+    background-color: var(--toolbar-button-hover);
+    color: var(--text-primary);
+  }
+  
+  &:active {
+    background-color: var(--border-color);
+  }
+}
+
+.menu-icon {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  color: var(--text-muted);
+  transition: color 0.15s ease;
+  
+  .menu-item:hover & {
+    color: var(--text-primary);
+  }
+}
+
+.menu-text {
+  white-space: nowrap;
+  font-weight: 400;
+  flex: 1;
+}
+</style>

frontend/src/components/tabs/TabItem.vue

@@ -0,0 +1,294 @@
+<template>
+  <div 
+    class="tab-item"
+    :class="{ 
+      active: isActive,
+      dragging: isDragging 
+    }"
+    style="--wails-draggable:no-drag"
+    draggable="true"
+    @click="handleClick"
+    @dragstart="handleDragStart"
+    @dragover="handleDragOver"
+    @drop="handleDrop"
+    @dragend="handleDragEnd"
+    @contextmenu="handleContextMenu"
+  >
+    <!-- 文档图标 -->
+    <div class="tab-icon">
+      <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        width="12" 
+        height="12" 
+        viewBox="0 0 24 24" 
+        fill="none" 
+        stroke="currentColor" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+      >
+        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
+        <polyline points="14,2 14,8 20,8"/>
+      </svg>
+    </div>
+
+    <!-- 标签页标题 -->
+    <div class="tab-title" :title="tab.title">
+      {{ displayTitle }}
+    </div>
+    
+    <!-- 关闭按钮 -->
+    <div 
+      v-if="props.canClose"
+      class="tab-close"
+      @click.stop="handleClose"
+      :title="'Close tab'"
+    >
+      <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        width="12" 
+        height="12" 
+        viewBox="0 0 24 24" 
+        fill="none" 
+        stroke="currentColor" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+      >
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </div>
+    
+    <!-- 拖拽指示器 -->
+    <div v-if="isDragging" class="drag-indicator"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+// 组件属性
+interface TabProps {
+  tab: {
+    documentId: number;  // 直接使用文档ID作为唯一标识
+    title: string;       // 标签页标题
+  };
+  isActive: boolean;
+  canClose?: boolean; // 是否可以关闭标签页
+}
+
+const props = defineProps<TabProps>();
+
+// 组件事件
+const emit = defineEmits<{
+  click: [documentId: number];
+  close: [documentId: number];
+  dragstart: [event: DragEvent, documentId: number];
+  dragover: [event: DragEvent];
+  drop: [event: DragEvent, documentId: number];
+  contextmenu: [event: MouseEvent, documentId: number];
+}>();
+
+// 组件状态
+const isDragging = ref(false);
+
+// 计算属性
+const displayTitle = computed(() => {
+  const title = props.tab.title;
+  // 限制标题长度，超过15个字符显示省略号
+  return title.length > 15 ? title.substring(0, 15) + '...' : title;
+});
+
+// 事件处理
+const handleClick = () => {
+  emit('click', props.tab.documentId);
+};
+
+const handleClose = () => {
+  emit('close', props.tab.documentId);
+};
+
+const handleDragStart = (event: DragEvent) => {
+  isDragging.value = true;
+  emit('dragstart', event, props.tab.documentId);
+};
+
+const handleDragOver = (event: DragEvent) => {
+  emit('dragover', event);
+};
+
+const handleDrop = (event: DragEvent) => {
+  isDragging.value = false;
+  emit('drop', event, props.tab.documentId);
+};
+
+const handleDragEnd = () => {
+  isDragging.value = false;
+};
+
+const handleContextMenu = (event: MouseEvent) => {
+  event.preventDefault();
+  emit('contextmenu', event, props.tab.documentId);
+};
+</script>
+
+<style scoped lang="scss">
+.tab-item {
+  display: flex;
+  align-items: center;
+  min-width: 120px;
+  max-width: 200px;
+  height: 32px; // 适配标题栏高度
+  padding: 0 8px;
+  background-color: transparent;
+  border-right: 1px solid var(--toolbar-border);
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  transition: all 0.2s ease;
+  box-sizing: border-box; // 防止激活态的边框影响整体高度
+  
+  &:hover {
+    background-color: var(--toolbar-button-hover);
+    
+    .tab-close {
+      opacity: 1;
+    }
+  }
+  
+  &.active {
+    background-color: var(--toolbar-button-active, var(--toolbar-button-hover));
+    color: var(--toolbar-text);
+    position: relative;
+    .tab-title {
+      color: var(--toolbar-text);
+      font-weight: 600; /* 字体加粗 */
+      text-shadow: 0 0 1px rgba(0, 0, 0, 0.1); /* 轻微阴影增强可读性 */
+    }
+    
+    .tab-icon {
+      color: var(--accent-color);
+      filter: brightness(1.1);
+    }
+  }
+
+  /* 底部活跃线条 */
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--tab-active-line);
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 10;
+  }
+
+  &.active::after {
+    width: 100%;
+  }
+  
+  &.dragging {
+    opacity: 0.5;
+    transform: rotate(2deg);
+    z-index: 1000;
+  }
+}
+
+/* 文档图标 */
+.tab-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  color: var(--toolbar-text);
+  transition: color 0.2s ease;
+  
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.tab-title {
+  flex: 1;
+  font-size: 12px;
+  color: var(--toolbar-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.2s ease;
+}
+
+.tab-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 4px;
+  border-radius: 2px;
+  opacity: 0;
+  color: var(--toolbar-text);
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background-color: var(--error-color);
+    color: var(--text-muted);
+    opacity: 1 !important;
+  }
+  
+  svg {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+.drag-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, 
+    transparent 25%, 
+    rgba(var(--accent-color-rgb), 0.1) 25%, 
+    rgba(var(--accent-color-rgb), 0.1) 50%, 
+    transparent 50%, 
+    transparent 75%, 
+    rgba(var(--accent-color-rgb), 0.1) 75%
+  );
+  background-size: 8px 8px;
+  pointer-events: none;
+}
+
+/* 活跃标签页在拖拽时的特殊样式 */
+.tab-item.active.dragging {
+  border-bottom-color: transparent;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .tab-item {
+    min-width: 100px;
+    max-width: 150px;
+    padding: 0 6px;
+  }
+  
+  .tab-title {
+    font-size: 11px;
+  }
+  
+  .tab-close {
+    width: 18px;
+    height: 18px;
+    
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+}
+</style>

frontend/src/components/titlebar/LinuxTitleBar.vue

@@ -4,7 +4,13 @@
       <div class="titlebar-icon">
         <img src="/appicon.png" alt="voidraft"/>
       </div>
-      <div class="titlebar-title">{{ titleText }}</div>
+      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
+      <!-- 标签页容器区域 -->
+      <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
+        <TabContainer />
+      </div>
+      <!-- 设置页面标题 -->
+      <div v-if="isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
     </div>
 
     <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
@@ -48,15 +54,43 @@
 <script setup lang="ts">
 import {computed, onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
+import {useRoute} from 'vue-router';
 import * as runtime from '@wailsio/runtime';
 import {useDocumentStore} from '@/stores/documentStore';
+import TabContainer from '@/components/tabs/TabContainer.vue';
+import {useTabStore} from "@/stores/tabStore";
 
+const tabStore = useTabStore();
 const {t} = useI18n();
+const route = useRoute();
 const isMaximized = ref(false);
 const documentStore = useDocumentStore();
 
+// 判断是否在设置页面
+const isInSettings = computed(() => route.path.startsWith('/settings'));
+
 // 计算标题文本
 const titleText = computed(() => {
+  if (isInSettings.value) {
+    return `voidraft - ` + t('settings.title');
+  }
+  const currentDoc = documentStore.currentDocument;
+  if (currentDoc) {
+    // 限制文档标题长度，避免标题栏换行
+    const maxTitleLength = 30;
+    const truncatedTitle = currentDoc.title.length > maxTitleLength 
+      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
+      : currentDoc.title;
+    return `voidraft - ${truncatedTitle}`;
+  }
+  return 'voidraft';
+});
+
+// 计算完整标题文本（用于tooltip）
+const fullTitleText = computed(() => {
+  if (isInSettings.value) {
+    return `voidraft - ` + t('settings.title');
+  }
   const currentDoc = documentStore.currentDocument;
   return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
 });
@@ -126,6 +160,7 @@ onMounted(async () => {
   font-size: 13px;
   font-weight: 500;
   cursor: default;
+  min-width: 0; /* 允许内容收缩 */
 
   -webkit-context-menu: none;
   -moz-context-menu: none;
@@ -135,6 +170,7 @@ onMounted(async () => {
 .titlebar-content .titlebar-icon {
   width: 16px;
   height: 16px;
+  flex-shrink: 0;
 
   img {
     width: 100%;
@@ -149,6 +185,15 @@ onMounted(async () => {
   font-weight: 500;
 }
 
+.titlebar-tabs {
+  flex: 1;
+  height: 100%;
+  align-items: center;
+  overflow: hidden;
+  margin-left: 8px;
+  min-width: 0;
+}
+
 .titlebar-controls {
   display: flex;
   height: 100%;

frontend/src/components/titlebar/MacOSTitleBar.vue

@@ -43,8 +43,13 @@
       </button>
     </div>
     
-    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
-      <div class="titlebar-title">{{ titleText }}</div>
+    <!-- 标签页容器区域 -->
+    <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
+      <TabContainer />
+    </div>
+    
+    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent v-if="!tabStore.isTabsEnabled || isInSettings">
+      <div class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
     </div>
   </div>
 </template>
@@ -52,14 +57,22 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import * as runtime from '@wailsio/runtime';
 import { useDocumentStore } from '@/stores/documentStore';
+import TabContainer from '@/components/tabs/TabContainer.vue';
+import { useTabStore } from "@/stores/tabStore";
 
+const tabStore = useTabStore();
 const { t } = useI18n();
+const route = useRoute();
 const isMaximized = ref(false);
 const showControlIcons = ref(false);
 const documentStore = useDocumentStore();
 
+// 判断是否在设置页面
+const isInSettings = computed(() => route.path.startsWith('/settings'));
+
 const minimizeWindow = async () => {
   try {
     await runtime.Window.Minimise();
@@ -95,6 +108,26 @@ const checkMaximizedState = async () => {
 
 // 计算标题文本
 const titleText = computed(() => {
+  if (isInSettings.value) {
+    return `voidraft - ` + t('settings.title');
+  }
+  const currentDoc = documentStore.currentDocument;
+  if (currentDoc) {
+    // 限制文档标题长度，避免标题栏换行
+    const maxTitleLength = 30;
+    const truncatedTitle = currentDoc.title.length > maxTitleLength 
+      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
+      : currentDoc.title;
+    return `voidraft - ${truncatedTitle}`;
+  }
+  return 'voidraft';
+});
+
+// 计算完整标题文本（用于tooltip）
+const fullTitleText = computed(() => {
+  if (isInSettings.value) {
+    return `voidraft - ` + t('settings.title');
+  }
   const currentDoc = documentStore.currentDocument;
   return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
 });
@@ -134,6 +167,7 @@ onMounted(async () => {
   align-items: center;
   padding-left: 8px;
   gap: 8px;
+  flex-shrink: 0;
   
   -webkit-context-menu: none;
   -moz-context-menu: none;
@@ -212,12 +246,67 @@ onMounted(async () => {
   justify-content: center;
   flex: 1;
   cursor: default;
+  min-width: 0;
   
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
 }
 
+.titlebar-tabs {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  margin-right: 8px;
+  min-width: 0;
+  overflow: visible; /* 允许TabContainer内部处理滚动 */
+  
+  /* 确保TabContainer能够正确处理滚动 */
+  :deep(.tab-container) {
+    width: 100%;
+    height: 100%;
+  }
+  
+  :deep(.tab-bar) {
+    width: 100%;
+    height: 100%;
+  }
+  
+  :deep(.tab-scroll-wrapper) {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  
+  /* 确保底部线条能够正确显示 */
+  :deep(.tab-item) {
+    position: relative;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 2px;
+      background: var(--tab-active-line, var(--accent-color, #007acc));
+      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      z-index: 10;
+    }
+
+    &.active::after {
+      width: 100%;
+    }
+  }
+}
+
 .titlebar-title {
   font-size: 13px;
   font-weight: 500;

frontend/src/components/titlebar/WindowsTitleBar.vue

@@ -4,7 +4,13 @@
       <div class="titlebar-icon">
         <img src="/appicon.png" alt="voidraft"/>
       </div>
-      <div class="titlebar-title">{{ titleText }}</div>
+      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
+      <!-- 标签页容器区域 -->
+      <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
+        <TabContainer />
+      </div>
+      <!-- 设置页面标题 -->
+      <div v-if="isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
     </div>
 
     <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
@@ -38,18 +44,46 @@
 <script setup lang="ts">
 import {computed, onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
+import {useRoute} from 'vue-router';
 import * as runtime from '@wailsio/runtime';
 import {useDocumentStore} from '@/stores/documentStore';
+import TabContainer from '@/components/tabs/TabContainer.vue';
+import {useTabStore} from "@/stores/tabStore";
 
+const tabStore = useTabStore();
 const {t} = useI18n();
+const route = useRoute();
 const isMaximized = ref(false);
 const documentStore = useDocumentStore();
 
 // 计算属性用于图标，减少重复渲染
 const maximizeIcon = computed(() => isMaximized.value ? '&#xE923;' : '&#xE922;');
 
+// 判断是否在设置页面
+const isInSettings = computed(() => route.path.startsWith('/settings'));
+
 // 计算标题文本
 const titleText = computed(() => {
+  if (isInSettings.value) {
+    return `voidraft - ` + t('settings.title');
+  }
+  const currentDoc = documentStore.currentDocument;
+  if (currentDoc) {
+    // 限制文档标题长度，避免标题栏换行
+    const maxTitleLength = 30;
+    const truncatedTitle = currentDoc.title.length > maxTitleLength 
+      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
+      : currentDoc.title;
+    return `voidraft - ${truncatedTitle}`;
+  }
+  return 'voidraft';
+});
+
+// 计算完整标题文本（用于tooltip）
+const fullTitleText = computed(() => {
+  if (isInSettings.value) {
+    return `voidraft - ` + t('settings.title');
+  }
   const currentDoc = documentStore.currentDocument;
   return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
 });
@@ -118,6 +152,7 @@ onMounted(async () => {
   font-size: 12px;
   font-weight: 400;
   cursor: default;
+  min-width: 0; /* 允许内容收缩 */
 
   -webkit-context-menu: none;
   -moz-context-menu: none;
@@ -127,6 +162,7 @@ onMounted(async () => {
 .titlebar-content .titlebar-icon {
   width: 16px;
   height: 16px;
+  flex-shrink: 0;
 
   img {
     width: 100%;
@@ -135,9 +171,14 @@ onMounted(async () => {
   }
 }
 
-.titlebar-title {
-  font-size: 12px;
-  color: var(--toolbar-text);
+.titlebar-tabs {
+  flex: 1;
+  height: 100%;
+  align-items: center;
+  overflow: hidden;
+  margin-left: 8px;
+  min-width: 0;
+  //margin-right: 8px;
 }
 
 .titlebar-controls {

frontend/src/components/toolbar/BlockLanguageSelector.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick, shallowRef, readonly, effectScope, onScopeDispose } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useEditorStore } from '@/stores/editorStore';
 import { type SupportedLanguage } from '@/views/editor/extensions/codeblock/types';
@@ -8,56 +8,46 @@ import { getActiveNoteBlock } from '@/views/editor/extensions/codeblock/state';
 import { changeCurrentBlockLanguage } from '@/views/editor/extensions/codeblock/commands';
 
 const { t } = useI18n();
-const editorStore = useEditorStore();
+const editorStore = readonly(useEditorStore());
 
 // 组件状态
-const showLanguageMenu = ref(false);
+const showLanguageMenu = shallowRef(false);
 const searchQuery = ref('');
 const searchInputRef = ref<HTMLInputElement>();
 
-// 支持的语言列表
+// 优化语言数据处理
+const languageData = computed(() => {
   const supportedLanguages = getAllSupportedLanguages();
-
-// 动态生成语言显示名称映射
-const languageNames = computed(() => {
   const names: Record<string, string> = {
     auto: 'Auto',
     text: 'Plain Text'
   };
-  
-  LANGUAGES.forEach(lang => {
-    names[lang.token] = lang.name;
-  });
-  
-  return names;
-});
-
-// 动态生成语言别名映射
-const languageAliases = computed(() => {
   const aliases: Record<string, string> = {
     auto: 'auto',
     text: 'txt'
   };
   
+  // 一次遍历完成所有映射
   LANGUAGES.forEach(lang => {
-    // 使用语言名称的小写作为别名
+    names[lang.token] = lang.name;
     aliases[lang.token] = lang.name.toLowerCase();
   });
   
-  return aliases;
+  return {
+    supportedLanguages,
+    names,
+    aliases
+  };
 });
 
 // 当前活动块的语言信息
-const currentBlockLanguage = ref<{ name: SupportedLanguage; auto: boolean }>({
+const currentBlockLanguage = shallowRef<{ name: SupportedLanguage; auto: boolean }>({
   name: 'text',
   auto: false
 });
 
-// 事件监听器引用
-const eventListeners = ref<{
-  updateListener?: () => void;
-  selectionUpdateListener?: () => void;
-}>({});
+// 事件监听器管理
+let editorScope: ReturnType<typeof effectScope> | null = null;
 
 // 更新当前块语言信息
 const updateCurrentBlockLanguage = () => {
@@ -81,7 +71,7 @@ const updateCurrentBlockLanguage = () => {
         currentBlockLanguage.value = newLanguage;
       }
     } else {
-      if (currentBlockLanguage.value.name !== 'text' || currentBlockLanguage.value.auto !== false) {
+      if (currentBlockLanguage.value.name !== 'text' || currentBlockLanguage.value.auto) {
         currentBlockLanguage.value = { name: 'text', auto: false };
       }
     }
@@ -93,57 +83,47 @@ const updateCurrentBlockLanguage = () => {
 
 // 清理事件监听器
 const cleanupEventListeners = () => {
-  if (editorStore.editorView?.dom && eventListeners.value.updateListener) {
-    const dom = editorStore.editorView.dom;
-    dom.removeEventListener('click', eventListeners.value.updateListener);
-    dom.removeEventListener('keyup', eventListeners.value.updateListener);
-    dom.removeEventListener('keydown', eventListeners.value.updateListener);
-    dom.removeEventListener('focus', eventListeners.value.updateListener);
-    dom.removeEventListener('mouseup', eventListeners.value.updateListener);
-    
-    if (eventListeners.value.selectionUpdateListener) {
-      dom.removeEventListener('selectionchange', eventListeners.value.selectionUpdateListener);
+  if (editorScope) {
+    editorScope.stop();
+    editorScope = null;
   }
-  }
-  eventListeners.value = {};
 };
 
-// 设置事件监听器
+// 设置事件监听器 - 使用 effectScope 管理
 const setupEventListeners = (view: any) => {
   cleanupEventListeners();
   
+  editorScope = effectScope();
+  editorScope.run(() => {
     // 监听编辑器状态更新
     const updateListener = () => {
-    // 使用 requestAnimationFrame 确保在下一帧更新，性能更好
+      // 使用 requestAnimationFrame 确保在下一帧更新
       requestAnimationFrame(() => {
         updateCurrentBlockLanguage();
       });
     };
     
-  // 监听选择变化
-  const selectionUpdateListener = () => {
-    requestAnimationFrame(() => {
-      updateCurrentBlockLanguage();
-    });
-  };
-  
-  // 保存监听器引用
-  eventListeners.value = { updateListener, selectionUpdateListener };
-  
     // 监听关键事件：光标位置变化、文档变化、焦点变化
     view.dom.addEventListener('click', updateListener);
     view.dom.addEventListener('keyup', updateListener);
     view.dom.addEventListener('keydown', updateListener);
     view.dom.addEventListener('focus', updateListener);
-  view.dom.addEventListener('mouseup', updateListener); // 鼠标选择结束
+    view.dom.addEventListener('mouseup', updateListener);
+    view.dom.addEventListener('selectionchange', updateListener);
     
-  // 监听编辑器的选择变化事件
-  if (view.dom.addEventListener) {
-    view.dom.addEventListener('selectionchange', selectionUpdateListener);
-  }
+    // 在 scope 销毁时清理
+    onScopeDispose(() => {
+      view.dom.removeEventListener('click', updateListener);
+      view.dom.removeEventListener('keyup', updateListener);
+      view.dom.removeEventListener('keydown', updateListener);
+      view.dom.removeEventListener('focus', updateListener);
+      view.dom.removeEventListener('mouseup', updateListener);
+      view.dom.removeEventListener('selectionchange', updateListener);
+    });
     
     // 立即更新一次当前状态
     updateCurrentBlockLanguage();
+  });
 };
 
 // 监听编辑器状态变化
@@ -159,16 +139,18 @@ watch(
   { immediate: true }
 );
 
-// 过滤后的语言列表
+// 过滤后的语言列表 - 优化搜索性能
 const filteredLanguages = computed(() => {
+  const { supportedLanguages, names, aliases } = languageData.value;
+  
   if (!searchQuery.value) {
     return supportedLanguages;
   }
   
   const query = searchQuery.value.toLowerCase();
   return supportedLanguages.filter(langId => {
-    const name = languageNames.value[langId];
-    const alias = languageAliases.value[langId];
+    const name = names[langId];
+    const alias = aliases[langId];
     return langId.toLowerCase().includes(query) ||
            (name && name.toLowerCase().includes(query)) ||
            (alias && alias.toLowerCase().includes(query));
@@ -191,7 +173,7 @@ const closeLanguageMenu = () => {
   searchQuery.value = '';
 };
 
-// 选择语言
+// 选择语言 - 优化性能
 const selectLanguage = (languageId: SupportedLanguage) => {
   if (!editorStore.editorView) {
     closeLanguageMenu();
@@ -203,18 +185,9 @@ const selectLanguage = (languageId: SupportedLanguage) => {
     const state = view.state;
     const dispatch = view.dispatch;
 
-    let targetLanguage: string;
-    let autoDetect: boolean;
-
-    if (languageId === 'auto') {
-      // 设置为自动检测
-      targetLanguage = 'text';
-      autoDetect = true;
-    } else {
-      // 设置为指定语言，关闭自动检测
-      targetLanguage = languageId;
-      autoDetect = false;
-    }
+    const [targetLanguage, autoDetect] = languageId === 'auto' 
+      ? ['text', true] 
+      : [languageId, false];
 
     // 使用修复后的函数来更改语言
     const success = changeCurrentBlockLanguage(state as any, dispatch, targetLanguage, autoDetect);
@@ -231,65 +204,68 @@ const selectLanguage = (languageId: SupportedLanguage) => {
   closeLanguageMenu();
 };
 
-// 点击外部关闭
+// 全局事件处理器 - 使用 effectScope 管理
+const globalScope = effectScope();
+
+// 点击外部关闭 - 只在菜单打开时处理
 const handleClickOutside = (event: MouseEvent) => {
+  if (!showLanguageMenu.value) return;
+  
   const target = event.target as HTMLElement;
   if (!target.closest('.block-language-selector')) {
     closeLanguageMenu();
   }
 };
 
-// 键盘事件处理
+// 键盘事件处理 - 只在菜单打开时处理
 const handleKeydown = (event: KeyboardEvent) => {
+  if (!showLanguageMenu.value) return;
+  
   if (event.key === 'Escape') {
     closeLanguageMenu();
   }
 };
 
-onMounted(() => {
+// 在 setup 阶段就设置全局事件监听器
+globalScope.run(() => {
   document.addEventListener('click', handleClickOutside);
   document.addEventListener('keydown', handleKeydown);
   
+  onScopeDispose(() => {
+    document.removeEventListener('click', handleClickOutside);
+    document.removeEventListener('keydown', handleKeydown);
+  });
+});
+
+onMounted(() => {
   // 立即更新一次当前语言状态
   updateCurrentBlockLanguage();
 });
 
 onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-  document.removeEventListener('keydown', handleKeydown);
+  globalScope.stop();
   cleanupEventListeners();
 });
 
-// 获取当前语言的显示名称
-const getCurrentLanguageName = computed(() => {
+// 优化计算属性
+const languageDisplayInfo = computed(() => {
   const lang = currentBlockLanguage.value;
-  if (lang.auto) {
-    return `${lang.name} (auto)`;
-  }
-  return lang.name;
+  const displayName = lang.auto ? `${lang.name} (auto)` : lang.name;
+  const displayLanguage = lang.auto ? 'auto' : lang.name;
+  
+  return {
+    name: displayName,
+    language: displayLanguage
+  };
 });
 
-// 获取当前显示的语言选项
-const getCurrentDisplayLanguage = computed(() => {
-  const lang = currentBlockLanguage.value;
-  if (lang.auto) {
-    return 'auto';
-  }
-  return lang.name;
-});
-
-// 滚动到当前选择的语言
+// 滚动到当前选择的语言 - 优化性能
 const scrollToCurrentLanguage = () => {
   nextTick(() => {
-      const currentLang = getCurrentDisplayLanguage.value;
-      const selectorElement = document.querySelector('.block-language-selector');
+    const currentLang = languageDisplayInfo.value.language;
+    const activeOption = document.querySelector(`.language-option[data-language="${currentLang}"]`) as HTMLElement;
     
-      if (!selectorElement) return;
-      
-      const languageList = selectorElement.querySelector('.language-list') as HTMLElement;
-      const activeOption = selectorElement.querySelector(`.language-option[data-language="${currentLang}"]`) as HTMLElement;
-      
-      if (languageList && activeOption) {
+    if (activeOption) {
       // 使用 scrollIntoView 进行平滑滚动
       activeOption.scrollIntoView({
         behavior: 'auto',
@@ -314,7 +290,7 @@ const scrollToCurrentLanguage = () => {
           <polyline points="8 6 2 12 8 18"></polyline>
         </svg>
       </span>
-      <span class="language-name">{{ getCurrentLanguageName }}</span>
+      <span class="language-name">{{ languageDisplayInfo.name }}</span>
       <span class="arrow" :class="{ 'open': showLanguageMenu }">▲</span>
     </button>
     
@@ -341,11 +317,11 @@ const scrollToCurrentLanguage = () => {
           v-for="language in filteredLanguages" 
           :key="language"
           class="language-option"
-          :class="{ 'active': getCurrentDisplayLanguage === language }"
+          :class="{ 'active': languageDisplayInfo.language === language }"
           :data-language="language"
           @click="selectLanguage(language)"
         >
-          <span class="language-name">{{ languageNames[language] || language }}</span>
+          <span class="language-name">{{ languageData.names[language] || language }}</span>
           <span class="language-alias">{{ language }}</span>
         </div>
         

frontend/src/components/toolbar/DocumentSelector.vue

@@ -1,36 +1,40 @@
 <script setup lang="ts">
-import {computed, nextTick, onMounted, onUnmounted, ref} from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useDocumentStore } from '@/stores/documentStore';
+import { useTabStore } from '@/stores/tabStore';
+import { useWindowStore } from '@/stores/windowStore';
 import { useI18n } from 'vue-i18n';
 import type { Document } from '@/../bindings/voidraft/internal/models/models';
-import {useWindowStore} from "@/stores/windowStore";
 
 const documentStore = useDocumentStore();
+const tabStore = useTabStore();
 const windowStore = useWindowStore();
 const { t } = useI18n();
 
 // 组件状态
-const showMenu = ref(false);
 const inputValue = ref('');
 const inputRef = ref<HTMLInputElement>();
 const editingId = ref<number | null>(null);
 const editingTitle = ref('');
 const editInputRef = ref<HTMLInputElement>();
 const deleteConfirmId = ref<number | null>(null);
-// 添加错误提示状态
-const alreadyOpenDocId = ref<number | null>(null);
-const errorMessageTimer = ref<number | null>(null);
 
-// 过滤后的文档列表 + 创建选项
+// 常量
+const MAX_TITLE_LENGTH = 50;
+
+// 计算属性
+const currentDocName = computed(() => {
+  if (!documentStore.currentDocument) return t('toolbar.selectDocument');
+  const title = documentStore.currentDocument.title;
+  return title.length > 12 ? title.substring(0, 12) + '...' : title;
+});
+
 const filteredItems = computed(() => {
   const docs = documentStore.documentList;
   const query = inputValue.value.trim();
 
-  if (!query) {
-    return docs;
-  }
+  if (!query) return docs;
 
-  // 过滤匹配的文档
   const filtered = docs.filter(doc =>
     doc.title.toLowerCase().includes(query.toLowerCase())
   );
@@ -47,66 +51,53 @@ const filteredItems = computed(() => {
   return filtered;
 });
 
-// 当前文档显示名称
-const currentDocName = computed(() => {
-  if (!documentStore.currentDocument) return t('toolbar.selectDocument');
-  const title = documentStore.currentDocument.title;
-  return title.length > 12 ? title.substring(0, 12) + '...' : title;
-});
-
-// 打开菜单
-const openMenu = async () => {
-  showMenu.value = true;
-  await documentStore.updateDocuments();
-  nextTick(() => {
-    inputRef.value?.focus();
-  });
+// 工具函数
+const validateTitle = (title: string): string | null => {
+  if (!title.trim()) return t('toolbar.documentNameRequired');
+  if (title.trim().length > MAX_TITLE_LENGTH) {
+    return t('toolbar.documentNameTooLong', { max: MAX_TITLE_LENGTH });
+  }
+  return null;
+};
+
+const formatTime = (dateString: string | null) => {
+  if (!dateString) return t('toolbar.unknownTime');
+
+  try {
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) return t('toolbar.invalidDate');
+
+    const locale = t('locale') === 'zh-CN' ? 'zh-CN' : 'en-US';
+    return date.toLocaleString(locale, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
+  } catch {
+    return t('toolbar.timeError');
+  }
+};
+
+// 核心操作
+const openMenu = async () => {
+  documentStore.openDocumentSelector();
+  await documentStore.getDocumentMetaList();
+  await nextTick();
+  inputRef.value?.focus();
 };
 
-// 关闭菜单
 const closeMenu = () => {
-  showMenu.value = false;
+  documentStore.closeDocumentSelector();
   inputValue.value = '';
   editingId.value = null;
   editingTitle.value = '';
   deleteConfirmId.value = null;
-  
-  // 清除错误状态和定时器
-  clearErrorMessage();
 };
 
-// 清除错误提示和定时器
-const clearErrorMessage = () => {
-  if (errorMessageTimer.value) {
-    clearTimeout(errorMessageTimer.value);
-    errorMessageTimer.value = null;
-  }
-  alreadyOpenDocId.value = null;
-};
-
-// 切换菜单
-const toggleMenu = () => {
-  if (showMenu.value) {
-    closeMenu();
-  } else {
-    openMenu();
-  }
-};
-
-// 选择文档或创建文档
-const selectItem = async (item: any) => {
-  if (item.isCreateOption) {
-    // 创建新文档
-    await createDoc(inputValue.value.trim());
-  } else {
-    // 选择现有文档
-    await selectDoc(item);
-  }
-};
-
-// 选择文档
 const selectDoc = async (doc: Document) => {
-  try {
   // 如果选择的就是当前文档，直接关闭菜单
   if (documentStore.currentDocument?.id === doc.id) {
     closeMenu();
@@ -115,96 +106,80 @@ const selectDoc = async (doc: Document) => {
 
   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);
+    documentStore.setError(doc.id, t('toolbar.alreadyOpenInNewWindow'));
     return;
   }
+
   const success = await documentStore.openDocument(doc.id);
   if (success) {
+    if (tabStore.isTabsEnabled) {
+      tabStore.addOrActivateTab(doc);
+    }
     closeMenu();
   }
-  } catch (error) {
-    console.error('Failed to switch documents:', error);
-  }
 };
 
-// 文档名称长度限制
-const MAX_TITLE_LENGTH = 50;
-
-// 验证文档名称
-const validateTitle = (title: string): string | null => {
-  if (!title.trim()) {
-    return t('toolbar.documentNameRequired');
-  }
-  if (title.trim().length > MAX_TITLE_LENGTH) {
-    return t('toolbar.documentNameTooLong', {max: MAX_TITLE_LENGTH});
-  }
-  return null;
-};
-
-// 创建文档
 const createDoc = async (title: string) => {
   const trimmedTitle = title.trim();
   const error = validateTitle(trimmedTitle);
-  if (error) {
-    return;
-  }
+  if (error) return;
 
   try {
     const newDoc = await documentStore.createNewDocument(trimmedTitle);
-    if (newDoc) {
-      await selectDoc(newDoc);
-    }
+    if (newDoc) await selectDoc(newDoc);
   } catch (error) {
     console.error('Failed to create document:', error);
   }
 };
 
-// 开始重命名
+const selectItem = async (item: any) => {
+  if (item.isCreateOption) {
+    await createDoc(inputValue.value.trim());
+  } else {
+    await selectDoc(item);
+  }
+};
+
+// 编辑操作
 const startRename = (doc: Document, event: Event) => {
   event.stopPropagation();
   editingId.value = doc.id;
   editingTitle.value = doc.title;
-  deleteConfirmId.value = null; // 清除删除确认状态
+  deleteConfirmId.value = null;
   nextTick(() => {
     editInputRef.value?.focus();
     editInputRef.value?.select();
   });
 };
 
-// 保存编辑
 const saveEdit = async () => {
-  if (editingId.value && editingTitle.value.trim()) {
-    const trimmedTitle = editingTitle.value.trim();
-    const error = validateTitle(trimmedTitle);
-    if (error) {
-
+  if (!editingId.value || !editingTitle.value.trim()) {
+    editingId.value = null;
+    editingTitle.value = '';
     return;
   }
 
+  const trimmedTitle = editingTitle.value.trim();
+  const error = validateTitle(trimmedTitle);
+  if (error) return;
+
   try {
     await documentStore.updateDocumentMetadata(editingId.value, trimmedTitle);
-      await documentStore.updateDocuments();
-    } catch (_error) {
-      return;
-    }
+    await documentStore.getDocumentMetaList();
+    
+    // 如果tabs功能开启且该文档有标签页，更新标签页标题
+    if (tabStore.isTabsEnabled && tabStore.hasTab(editingId.value)) {
+      tabStore.updateTabTitle(editingId.value, trimmedTitle);
     }
+  } catch (error) {
+    console.error('Failed to update document:', error);
+  } finally {
     editingId.value = null;
     editingTitle.value = '';
+  }
 };
 
-// 在新窗口打开文档
+// 其他操作
 const openInNewWindow = async (doc: Document, event: Event) => {
   event.stopPropagation();
   try {
@@ -214,56 +189,32 @@ const openInNewWindow = async (doc: Document, event: Event) => {
   }
 };
 
-// 处理删除
 const handleDelete = async (doc: Document, event: Event) => {
   event.stopPropagation();
 
   if (deleteConfirmId.value === doc.id) {
     // 确认删除前检查文档是否在其他窗口打开
-    try {
     const hasOpen = await windowStore.isDocumentWindowOpen(doc.id);
     if (hasOpen) {
-        // 设置错误状态并启动定时器
-        alreadyOpenDocId.value = doc.id;
-        
-        // 清除之前的定时器（如果存在）
-        if (errorMessageTimer.value) {
-          clearTimeout(errorMessageTimer.value);
-        }
-        
-        // 设置新的定时器，3秒后清除错误信息
-        errorMessageTimer.value = window.setTimeout(() => {
-          alreadyOpenDocId.value = null;
-          errorMessageTimer.value = null;
-        }, 3000);
-        
-        // 取消删除确认状态
+      documentStore.setError(doc.id, t('toolbar.alreadyOpenInNewWindow'));
       deleteConfirmId.value = null;
       return;
     }
 
     const deleteSuccess = await documentStore.deleteDocument(doc.id);
-
-      if (!deleteSuccess) {
-        return;
-      }
-      
-      await documentStore.updateDocuments();
+    if (deleteSuccess) {
+      await documentStore.getDocumentMetaList();
       // 如果删除的是当前文档，切换到第一个文档
       if (documentStore.currentDocument?.id === doc.id && documentStore.documentList.length > 0) {
         const firstDoc = documentStore.documentList[0];
-        if (firstDoc) {
-          await selectDoc(firstDoc);
+        if (firstDoc) await selectDoc(firstDoc);
       }
     }
-    } catch (error) {
-      console.error('deleted failed:', error);
-    }
     deleteConfirmId.value = null;
   } else {
     // 进入确认状态
     deleteConfirmId.value = doc.id;
-    editingId.value = null; // 清除编辑状态
+    editingId.value = null;
 
     // 3秒后自动取消确认状态
     setTimeout(() => {
@@ -274,32 +225,18 @@ const handleDelete = async (doc: Document, event: Event) => {
   }
 };
 
-// 格式化时间
-const formatTime = (dateString: string | null) => {
-  if (!dateString) return t('toolbar.unknownTime');
-
-  try {
-    const date = new Date(dateString);
-    if (isNaN(date.getTime())) return t('toolbar.invalidDate');
-
-    // 根据当前语言显示时间格式
-    const locale = t('locale') === 'zh-CN' ? 'zh-CN' : 'en-US';
-    return date.toLocaleString(locale, {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    });
-  } catch (_error) {
-    return t('toolbar.timeError');
+// 键盘事件处理
+const createKeyHandler = (handlers: Record<string, () => void>) => (event: KeyboardEvent) => {
+  const handler = handlers[event.key];
+  if (handler) {
+    event.preventDefault();
+    event.stopPropagation();
+    handler();
   }
 };
 
-// 键盘事件
-const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Escape') {
+const handleGlobalKeydown = createKeyHandler({
+  Escape: () => {
     if (editingId.value) {
       editingId.value = null;
       editingTitle.value = '';
@@ -309,38 +246,25 @@ const handleKeydown = (event: KeyboardEvent) => {
       closeMenu();
     }
   }
-};
+});
 
-// 输入框键盘事件
-const handleInputKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter') {
-    event.preventDefault();
+const handleInputKeydown = createKeyHandler({
+  Enter: () => {
     const query = inputValue.value.trim();
-    if (query) {
-      // 如果有匹配的项目，选择第一个
-      if (filteredItems.value.length > 0) {
+    if (query && filteredItems.value.length > 0) {
       selectItem(filteredItems.value[0]);
     }
-    }
-  } else if (event.key === 'Escape') {
-    event.preventDefault();
-    closeMenu();
-  }
-  event.stopPropagation();
-};
+  },
+  Escape: closeMenu
+});
 
-// 编辑键盘事件
-const handleEditKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter') {
-    event.preventDefault();
-    saveEdit();
-  } else if (event.key === 'Escape') {
-    event.preventDefault();
+const handleEditKeydown = createKeyHandler({
+  Enter: saveEdit,
+  Escape: () => {
     editingId.value = null;
     editingTitle.value = '';
   }
-  event.stopPropagation();
-};
+});
 
 // 点击外部关闭
 const handleClickOutside = (event: Event) => {
@@ -353,15 +277,18 @@ const handleClickOutside = (event: Event) => {
 // 生命周期
 onMounted(() => {
   document.addEventListener('click', handleClickOutside);
-  document.addEventListener('keydown', handleKeydown);
+  document.addEventListener('keydown', handleGlobalKeydown);
 });
 
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside);
-  document.removeEventListener('keydown', handleKeydown);
-  // 清理定时器
-  if (errorMessageTimer.value) {
-    clearTimeout(errorMessageTimer.value);
+  document.removeEventListener('keydown', handleGlobalKeydown);
+});
+
+// 监听菜单状态变化
+watch(() => documentStore.showDocumentSelector, (isOpen) => {
+  if (isOpen) {
+    openMenu();
   }
 });
 </script>
@@ -369,7 +296,7 @@ onUnmounted(() => {
 <template>
   <div class="document-selector">
     <!-- 选择器按钮 -->
-    <button class="doc-btn" @click="toggleMenu">
+    <button class="doc-btn" @click="documentStore.toggleDocumentSelector">
       <span class="doc-icon">
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
@@ -377,11 +304,11 @@ onUnmounted(() => {
         </svg>
       </span>
       <span class="doc-name">{{ currentDocName }}</span>
-      <span class="arrow" :class="{ open: showMenu }">▲</span>
+      <span class="arrow" :class="{ open: documentStore.showDocumentSelector }">▲</span>
     </button>
 
     <!-- 菜单 -->
-    <div v-if="showMenu" class="doc-menu">
+    <div v-if="documentStore.showDocumentSelector" class="doc-menu">
       <!-- 输入框 -->
       <div class="input-box">
         <input
@@ -428,8 +355,8 @@ onUnmounted(() => {
             <div v-if="editingId !== item.id" class="doc-info">
               <div class="doc-title">{{ item.title }}</div>
               <!-- 根据状态显示错误信息或时间 -->
-              <div v-if="alreadyOpenDocId === item.id" class="doc-error">
-                {{ t('toolbar.alreadyOpenInNewWindow') }}
+               <div v-if="documentStore.selectorError?.docId === item.id" class="doc-error">
+                 {{ documentStore.selectorError?.message }}
                </div>
               <div v-else class="doc-date">{{ formatTime(item.updatedAt) }}</div>
             </div>
@@ -557,10 +484,12 @@ onUnmounted(() => {
     border-radius: 3px;
     margin-bottom: 4px;
     width: 260px;
-    max-height: 320px;
+    max-height: calc(100vh - 40px); // 限制最大高度，留出titlebar空间(32px)和一些边距
     z-index: 1000;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
     .input-box {
       position: relative;
@@ -598,8 +527,9 @@ onUnmounted(() => {
     }
 
     .item-list {
-      max-height: 240px;
+      max-height: calc(100vh - 100px); // 为输入框和边距预留空间
       overflow-y: auto;
+      flex: 1;
 
       .list-item {
         cursor: pointer;
@@ -709,20 +639,14 @@ onUnmounted(() => {
               display: flex;
               align-items: center;
               justify-content: center;
-              min-width: 20px;
-              min-height: 20px;
-
-              svg {
-                width: 12px;
-                height: 12px;
-              }
 
               &:hover {
-                background-color: var(--border-color);
-                color: var(--text-primary);
+                background-color: var(--bg-hover);
+                color: var(--text-secondary);
               }
 
-              &.delete-btn:hover {
+              &.delete-btn {
+                &:hover {
                   color: var(--text-danger);
                 }
 
@@ -731,15 +655,9 @@ onUnmounted(() => {
                   color: white;
 
                   .confirm-text {
-                  font-size: 10px;
-                  padding: 0 4px;
-                  font-weight: normal;
+                    font-size: 9px;
+                    font-weight: 500;
                   }
-
-                &:hover {
-                  background-color: var(--text-danger);
-                  color: white !important; // 确保确认状态下文字始终为白色
-                  opacity: 0.8;
                 }
               }
             }
@@ -752,44 +670,19 @@ onUnmounted(() => {
       }
 
       .empty, .loading {
-        padding: 12px 8px;
+        padding: 16px 8px;
         text-align: center;
         font-size: 11px;
         color: var(--text-muted);
       }
     }
   }
-
-  // 自定义滚动条
-  .item-list {
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--border-color);
-      border-radius: 2px;
-
-      &:hover {
-        background-color: var(--text-muted);
-      }
-    }
-  }
 }
 
 @keyframes fadeInOut {
-  0% {
-    opacity: 1;
-  }
-  70% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
+  0% { opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { opacity: 0; }
 }
 </style>