ci: 更新所有依赖到最新版本测试

- 将 baseURL 固定为 http://localhost:4173，不再根据环境变量区分 CI 和本地环境
- 修改启动命令为先构建再启动预览服务器
- 设置 reuseExistingServer 为 true，优化服务器重用逻辑

(cherry picked from commit df6ffb99c8123dbc8b3821f2d24c19844f8554a5)

.env

@@ -1,15 +1,4 @@
-VITE_APP_BUILD_TIME=NOT_SET
+VITE_BASE=/
-VITE_APP_BUILD_COMMIT=NOT_SET
-
 VITE_BUILD_SOURCE_MAP=true
-VITE_BUILD_MINIFY=true
+VITE_BUILD_COMMIT=
-VITE_CLOUDFLARE_SERVER_ENABLED=true
+VITE_BUILD_TIME=
-
-VITE_APP_TITLE=vue-ts-example-2025
-VITE_APP_BASE=/
-VITE_APP_ENABLE_VUE_DEVTOOLS=true
-VITE_APP_MENU_SHOW_DEMOS=true
-VITE_APP_MENU_SHOW_ORDER=true
-VITE_APP_ENABLE_ROUTER_LOG_GUARD=true
-VITE_APP_API_URL=/API
-VITE_APP_PROXY=[["/API","https://jsonplaceholder.typicode.com"]]

.github/workflows/ci-cd.yaml

@@ -12,21 +12,7 @@ on:
   workflow_dispatch:
 
 jobs:
-  playwright:
+  lint-build-and-typecheck:
-    runs-on: ubuntu-latest
-    container: mcr.microsoft.com/playwright:v1.56.1-noble
-    steps:
-      - name: ⚙️ 设置 Node 环境
-        uses: yanhao98/composite-actions/setup-node-environment@25eb4dc0c134cc9df2b7c569aa54140a366b45a8
-      # - name: 📥 安装 Playwright 浏览器
-      #   run: pnpm exec playwright install --with-deps
-      - name: 📦 构建项目
-        run: pnpm run build-only
-      - name: ▶️ 运行 Playwright 测试
-        run: pnpm exec playwright test
-
-  build-and-deploy:
-    needs: playwright
     runs-on: ubuntu-latest
     container: gitea/runner-images:ubuntu-latest-slim # https://github.com/cloudflare/wrangler-action/issues/329#issuecomment-3046747722
 
@@ -38,11 +24,12 @@ jobs:
         run: pnpm run lint
 
       - name: 📦 构建项目
-        run: |
+        run: pnpm run build-only
-          export VITE_APP_BUILD_TIME=$(date +"%Y-%m-%d %H:%M:%S")
-          pnpm run build-only
         env:
-          VITE_APP_BUILD_COMMIT: ${{ github.sha }}
+          VITE_BUILD_COMMIT: ${{ github.sha }}
+
+      - name: 🧪 单元测试
+        run: pnpm run test:unit
 
       - name: 📊 计算构建大小
         run: |
@@ -54,14 +41,36 @@ jobs:
           echo "🔹 文件总数:    $(find dist -type f | wc -l) 个文件"
           echo "----------------------------------------"
 
-      - name: 🧪 单元测试
-        run: pnpm exec vitest run
-
       - name: ✅ 类型检查
         run: pnpm run type-check # 要先 build，保证 components.d.ts 存在
 
+  deploy:
+    runs-on: ubuntu-latest
+    needs: lint-build-and-typecheck
+    if: github.ref == 'refs/heads/main'
+
+    # https://github.com/cloudflare/wrangler-action/issues/329#issuecomment-3046747722
+    container:
+      image: gitea/runner-images:ubuntu-latest-slim
+
+    steps:
+      - name: 🛠️ 设置Node环境
+        uses: yanhao98/composite-actions/setup-node-environment@25eb4dc0c134cc9df2b7c569aa54140a366b45a8
+
+      - name: 📦 构建项目
+        run: pnpm run build-only
+        env:
+          VITE_BUILD_COMMIT: ${{ github.sha }}
+
+      # - name: 🚀 上传版本到 Cloudflare
+      #   uses: cloudflare/wrangler-action@v3
+      #   id: upload
+      #   with:
+      #     apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+      #     accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+      #     command: versions upload --tag "${{ github.sha }}" --message "Deploy commit ${{ github.sha }} from ${{ github.ref_name }}"
+
       - name: 🚀 部署到 Cloudflare
-        if: github.ref == 'refs/heads/main'
         uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/playwright.yaml

@@ -0,0 +1,26 @@
+defaults:
+  run:
+    shell: bash
+
+env:
+  TZ: Asia/Shanghai
+
+on:
+  push:
+  workflow_dispatch:
+
+jobs:
+  playwright:
+    runs-on: ubuntu-latest
+    container: mcr.microsoft.com/playwright:v1.55.0-noble
+    steps:
+      - name: ⚙️ 设置 Node 环境
+        uses: yanhao98/composite-actions/setup-node-environment@25eb4dc0c134cc9df2b7c569aa54140a366b45a8
+      # - name: 📥 安装 Playwright 浏览器
+      #   run: pnpm exec playwright install --with-deps
+      - name: 🔄 更新依赖
+        run: pnpm update --latest
+      - name: 📦 构建项目
+        run: pnpm run build-only
+      - name: ▶️ 运行 Playwright 测试
+        run: pnpm exec playwright test

.github/workflows/测试最新依赖.yaml

@@ -1,86 +0,0 @@
-name: 测试最新依赖
-defaults:
-  run:
-    shell: bash
-
-env:
-  TZ: Asia/Shanghai
-
-on:
-  # push:
-  #   branches: [main]
-  schedule:
-    - cron: "30 22 * * *" # 22:30 UTC = 6:30 CST
-  workflow_dispatch:
-
-jobs:
-  build-and-test:
-    runs-on: ubuntu-latest
-    container: gitea/runner-images:ubuntu-latest-slim # https://github.com/cloudflare/wrangler-action/issues/329#issuecomment-3046747722
-
-    steps:
-      - uses: actions/checkout@main
-        with:
-          # fetch-depth: 0 # 0 代表完整检出，semantic-release 需要
-          filter: blob:none # 我们不需要所有 blob，只需要完整的树
-          show-progress: false
-      - run: rm pnpm-lock.yaml
-      - uses: pnpm/action-setup@master # https://github.com/pnpm/action-setup?tab=readme-ov-file#inputs
-
-      - uses: actions/setup-node@main # https://github.com/actions/setup-node?tab=readme-ov-file#usage
-        with:
-          cache: ""
-
-      - run: pnpm up --latest
-      - run: pnpm outdated
-
-      - name: 🔍 静态代码分析
-        run: pnpm run lint
-
-      - name: 📦 构建项目
-        run: pnpm run build-only
-        env:
-          VITE_APP_BUILD_COMMIT: ${{ github.sha }}
-
-      - name: 📊 计算构建大小
-        run: |
-          echo "📊 构建大小统计:"
-          echo "----------------------------------------"
-          echo "🔹 人类可读格式: $(du -sh dist | cut -f1)"
-          echo "🔹 以MB为单位:  $(du -sm dist | cut -f1) MB"
-          echo "🔹 以KB为单位:  $(du -sk dist | cut -f1) KB"
-          echo "🔹 文件总数:    $(find dist -type f | wc -l) 个文件"
-          echo "----------------------------------------"
-
-      - name: 🧪 单元测试
-        run: pnpm exec vitest run
-
-      - name: ✅ 类型检查
-        run: pnpm run type-check # 要先 build，保证 components.d.ts 存在
-
-  playwright:
-    runs-on: ubuntu-latest
-    container: mcr.microsoft.com/playwright:v1.56.1-noble
-    steps:
-      - uses: actions/checkout@main
-        with:
-          # fetch-depth: 0 # 0 代表完整检出，semantic-release 需要
-          filter: blob:none # 我们不需要所有 blob，只需要完整的树
-          show-progress: false
-
-      - run: rm pnpm-lock.yaml
-
-      - uses: pnpm/action-setup@master # https://github.com/pnpm/action-setup?tab=readme-ov-file#inputs
-
-      - uses: actions/setup-node@main # https://github.com/actions/setup-node?tab=readme-ov-file#usage
-        with:
-          cache: ""
-
-      - run: pnpm up --latest
-      - run: pnpm outdated
-
-      - name: 📦 构建项目
-        run: pnpm run build-only
-
-      - name: ▶️ 运行 Playwright 测试
-        run: pnpm exec playwright test

.gitignore

@@ -27,7 +27,7 @@ coverage
 
 *.tsbuildinfo
 
-playwright-test-results/
+test-results/
 playwright-report/
 
 # wrangler files

.husky/README.md

@@ -3,18 +3,18 @@
 - https://typicode.github.io/husky/zh/troubleshoot.html#找不到命令-command-not-found
 - https://typicode.github.io/husky/zh/how-to.html#node-版本管理器和-gui
 
-```bash
+```shell
 ln -s $(which pnpm) $HOME/.local/bin/pnpm
 ```
 
-```bash
-if command -v pnpm >/dev/null 2>&1; then
-    # 如果 pnpm 可用，直接使用它
-    pnpm exec lint-staged
-else
-    # 如果 pnpm 不可用，使用 $HOME/.local/bin/pnpm
-    # ln -s $(which pnpm) $HOME/.local/bin/pnpm
-    echo "找不到 pnpm，使用 $HOME/.local/bin/pnpm"
-    "$HOME"/.local/bin/pnpm exec lint-staged
-fi
 ```
+# if command -v pnpm >/dev/null 2>&1; then
+#     # 如果 pnpm 可用，直接使用它
+#     pnpm exec lint-staged
+# else
+#     # 如果 pnpm 不可用，使用 $HOME/.local/bin/pnpm
+#     # ln -s $(which pnpm) $HOME/.local/bin/pnpm
+#     echo "找不到 pnpm，使用 $HOME/.local/bin/pnpm"
+#     "$HOME"/.local/bin/pnpm exec lint-staged
+# fi
+```

.husky/commit-msg

@@ -1,13 +1,5 @@
 # 此钩子在 pre-commit 钩子成功完成后，用于检查提交消息。
 echo "📝 [Commit-msg] 正在运行 commit-msg 钩子..."
-
+echo "检查提交消息：$1"
-echo "🟢 检查提交消息：$1"
+pnpm exec commitlint --edit $1
-cat $1
+echo "✅ [Commit-msg] commit-msg 钩子完成！"
-
-# node -v
-echo "🟢 [Commit-msg] Node 版本：$(node -v)"
-
-# pnpm exec commitlint --edit $1
-time node node_modules/@commitlint/cli/cli.js --edit $1
-
-echo "📝 [Commit-msg] commit-msg 钩子完成！"

.husky/post-merge

@@ -1,4 +1,4 @@
 # 此钩子在 git merge 或 git pull 成功完成后运行。
 echo "🔗 [Post-merge] 正在安装依赖..."
-time pnpm install
+pnpm install
-echo "🔗 [Post-merge] 依赖安装完成！"
+echo "✅ [Post-merge] 依赖安装完成！"

.husky/pre-commit

@@ -1,6 +1,4 @@
 # 此钩子在执行 git commit 命令时，在创建提交之前运行。
 echo "🧹 [Pre-commit] 正在运行 lint-staged..."
-time pnpm exec lint-staged
+pnpm exec lint-staged
-time pnpm run lint:vue-i18n-extract
+echo "✅ [Pre-commit] lint-staged 完成！"
-# time pnpm run type-check
-echo "🧹 [Pre-commit] lint-staged 完成！"

.npmrc

@@ -1,4 +1,4 @@
-# registry=https://registry.npmmirror.com/
+registry=https://registry.npmmirror.com/
 
 # https://pnpm.io/zh/npmrc#node-mirrorltreleasedir
 use-node-version=24.7.0

.prettierrc.json

@@ -1,8 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": true,
+  "semi": false,
-  "tabWidth": 2,
   "singleQuote": true,
-  "printWidth": 100,
+  "printWidth": 100
-  "trailingComma": "all"
 }

.vscode/launch.json

@@ -8,18 +8,7 @@
       "url": "http://localhost:4730/",
       "webRoot": "${workspaceFolder}",
       "firefoxExecutable": "/Applications/Firefox Nightly.app/Contents/MacOS/firefox",
-      "preLaunchTask": "🚀 dev",
+      "preLaunchTask": "🚀 dev"
-      "pathMappings": [
-        {
-          "url": "http://localhost:4730",
-          "path": "${workspaceFolder}"
-        }
-      ],
-      "reAttach": true,
-      "reloadOnChange": {
-        "watch": "${workspaceFolder}/src/**/*.{js,jsx,ts,tsx,vue}",
-        "ignore": "**/node_modules/**"
-      }
     }
   ]
 }

.vscode/settings.json

@@ -1,42 +1,7 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
+    "source.fixAll": "explicit"
-    "source.fixAll.eslint": "explicit",
-    "source.fixAll.stylelint": "explicit",
-    "source.fixAll.oxc": "explicit",
-    "source.organizeImports": "never"
   },
-  "eslint.enable": true,
-  "stylelint.enable": true,
-  "oxc.enable": true,
   "editor.formatOnSave": true,
-
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
-  "stylelint.validate": ["css", "less", "postcss", "scss", "vue"],
-  "scss.lint.unknownAtRules": "ignore",
-  "css.lint.unknownAtRules": "ignore",
-  "less.lint.unknownAtRules": "ignore",
-
-  "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-
-  // >>>>>
-  "i18n-ally.readonly": true,
-  "i18n-ally.namespace": false /* 禁用命名空间（@intlify/unplugin-vue-i18n不支持吧？） */,
-  "i18n-ally.localesPaths": ["src/locales/demo", "src/locales"],
-  // https://github.com/lokalise/i18n-ally/wiki/Path-Matcher
-  // 默认: 🗃 Path Matcher Regex: /^(?<locale>[\w-_]+)(?:.*\/|^).*\.(?<ext>json|ya?ml|json5)$/
-  "i18n-ally.pathMatcher": "{locale}.json",
-  "i18n-ally.enabledParsers": ["json"],
-  "i18n-ally.keystyle": "nested",
-  "i18n-ally.sourceLanguage": "zh-CN", // 翻译源语言 (源文件) 根据此语言文件翻译其他语言文件的变量和内容
-  "i18n-ally.displayLanguage": "zh-CN", // 显示语言 (显示文件/翻译文件)
-  // <<<<<
-
-  // https://github.com/copilot/share/8a1a019a-0180-80e7-8141-a40be02c4006
-  // "iconify.customCollectionJsonPaths": ["https://example.com/my-icons.json", "./local/icons.json"],
-
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.preferences.autoImportFileExcludePatterns": ["vue-router/auto$"]
 }

.vscode/tasks.json

@@ -2,48 +2,32 @@
   "version": "2.0.0",
   "tasks": [
     {
-      "type": "npm",
-      "script": "dev",
       "label": "🚀 dev",
-      "detail": "启动开发服务器",
+      "type": "shell",
+      "command": "pnpm run dev",
+      "isBackground": true,
       "problemMatcher": {
-        "pattern": { "regexp": "." },
+        "owner": "vite",
+        "pattern": {
+          "regexp": "."
+        },
         "background": {
           "activeOnStart": true,
-          "beginsPattern": "VITE.*ready in",
+          "beginsPattern": ".*VITE.*",
-          "endsPattern": "(Local|Network):.*http"
+          "endsPattern": ".*ready in.*"
         }
       },
-      "isBackground": true,
+      "group": {
-      "presentation": { "reveal": "always", "panel": "dedicated" },
+        "kind": "build",
-      "group": { "kind": "build", "isDefault": false }
+        "isDefault": true
-    },
-    {
-      "type": "npm",
-      "script": "build-only",
-      "label": "🔨 build-only",
-      "detail": "" /* 如果为空或省略，VSCode 将自动使用 package.json 中 scripts[scriptName] 的值作为 detail */,
-      "problemMatcher": ["$tsc"],
-      "presentation": { "reveal": "always", "panel": "shared" },
-      "group": { "kind": "none", "isDefault": false }
-    },
-    {
-      "type": "npm",
-      "script": "wrangler:dev",
-      "label": "☁️ wrangler:dev",
-      "detail": "启动 Cloudflare Workers 开发服务器，相当于预览",
-      "dependsOn": ["🔨 build-only"],
-      "problemMatcher": {
-        "pattern": { "regexp": "." },
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": "wrangler dev",
-          "endsPattern": "Ready on"
-        }
       },
-      "isBackground": true,
+      "presentation": {
-      "presentation": { "reveal": "always", "panel": "dedicated" },
+        "reveal": "always",
-      "group": { "kind": "build", "isDefault": false }
+        "panel": "new"
+      },
+      "runOptions": {
+        "instanceLimit": 1
+      }
     }
   ]
 }

AGENTS.bak.md

@@ -1 +0,0 @@
-- **vite-plugin-fake-server**: Mock API under `/fake-api` (dev only) from `fake/` directory

AGENTS.md

@@ -1,92 +0,0 @@
-# AGENTS.md
-
-This file provides guidance to AI when working with code in this repository.
-
-## Project Overview
-
-Vue 3 TypeScript application with Vite.
-
-## 开发服务器
-
-- **不要启动开发服务器**: 开发服务器通常已经由用户启动。除非特别要求，否则不要执行 `pnpm dev` 之类的命令。
-
-### Routing & Layouts
-
-- **File-based routing**: Uses `unplugin-vue-router` with `.page.vue` and `.page.md` extensions in `src/pages/`
-- **Route naming**: Converts to PascalCase (e.g., `user-profile.page.vue` → `UserProfile`)
-- **Layouts**: `vite-plugin-vue-meta-layouts` with default layout `base-layout/base-layout`
-
-### Auto-Import Configuration
-
-Multiple auto-import systems are active:
-
-- **Vue APIs**: Core Vue, VueUse, Pinia, Vue Router, vue-i18n
-- **Components**: Auto-registered from multiple UI libraries (Naive UI, PrimeVue)
-- **Icons**: Uses `unplugin-icons` with `icon-` prefix; custom SVGs from `src/assets/icons/svgs/` available via `icon-svg-filename`
-
-**IMPORTANT - Auto-Import Limitations**:
-
-- **Dynamic components**: Auto-imported components cannot be used with `<component :is="..." />` syntax
-  - ❌ Avoid: `<component :is="`icon-${name}`" />`
-  - ✅ Use: `<icon-foo v-if="condition" />` with `v-if`/`v-else-if`/`v-else` directives
-
-- **Icons in TypeScript/TSX files**: Auto-import for icons does NOT work. You must explicitly import them using the `~icons/` prefix:
-
-  ```tsx
-  import IconMenuRounded from '~icons/material-symbols/menu-rounded';
-
-  // Then use in JSX/TSX
-  const menuOption = {
-    icon: () => <IconMenuRounded />,
-  };
-  ```
-
-### UI Component Libraries
-
-Project has multiple UI frameworks configured:
-
-- **Naive UI**
-  - **Form Layout**: When using `NGrid` for form layouts, prefer `NFormItemGi` over nesting `NFormItem` inside `NGridItem` for more concise code.
-
-    ```vue
-    <!-- ❌ Avoid: Verbose nesting -->
-    <NGrid :cols="4">
-      <NGridItem>
-        <NFormItem label="Username">
-          <NInput />
-        </NFormItem>
-      </NGridItem>
-    </NGrid>
-
-    <!-- ✅ Use: Concise and direct -->
-    <NGrid :cols="4">
-      <NFormItemGi label="Username">
-        <NInput />
-      </NFormItemGi>
-    </NGrid>
-    ```
-
-- **PrimeVue**:
-
-### Styling
-
-- **UnoCSS**: Wind preset
-- **SCSS**: Modern compiler API with global imports from `@/styles/scss/global.scss`
-
-### State Management
-
-Pinia stores
-
-### Cloudflare Workers Integration
-
-- **Server entry**: `server/index.ts` handles `/api/*` routes with KV storage
-- **KV binding**: Named `KV`
-
-### Vite Plugins (notable)
-
-- **vue-macros**: Enhanced Vue features
-- **unplugin-vue-markdown**: `.md` files as Vue components with frontmatter
-
-### Path Aliases
-
-- `@/` maps to `src/` directory

README-command.md

@@ -1,73 +0,0 @@
-## 依赖管理
-
-```shell
-pnpm dedupe
-```
-
-去除重复的依赖包。当你的项目中存在多个版本的同一个包时，pnpm dedupe 会尝试将它们合并成尽可能少的版本，从而减少 node_modules 的体积。
-
-```bash
-pnpm dlx taze major --interactive
-```
-
-交互式地将项目依赖升级到最新的主要版本，可以逐个选择要升级哪些包。
-
-```bash
-pnpm dlx knip
-```
-
-检测项目中未使用的依赖、导出和文件，帮助清理冗余代码。
-
-## Playwright
-
-```bash
-playwright test
-```
-
-- `HEADLESS=true`：强制无头模式
-- `--ui`：启动 Playwright 的图形用户界面，方便调试测试用例
-- `--project=chromium`：指定使用 Chromium 浏览器进行测试
-- `--quiet`：减少输出信息，只显示必要的内容
-
-## Oxlint
-
-```bash
-oxlint . --fix --ignore-path=.gitignore --print-config
-```
-
-```bash
-oxlint . --fix --deny=correctness
-```
-
-## Wrangler
-
-### Pages
-
-```bash
-wrangler pages deploy dist --project-name=vue-ts-example-2025 --branch=preview
-```
-
-```bash
-wrangler pages deploy dist --project-name=vue-ts-example-2025
-```
-
-### Workers
-
-```bash
-wrangler deploy
-```
-
-```bash
-wrangler versions upload
-```
-
-## 拆包体积分析
-
-- https://github.com/nonzzz/vite-bundle-analyzer
-- https://github.com/KusStar/vite-bundle-visualizer
-
-```bash
-pnpm dlx vite-bundle-visualizer -t treemap
-pnpm dlx vite-bundle-visualizer -t sunburst
-pnpm dlx vite-bundle-visualizer -t network
-```

README.md

@@ -1,7 +1,64 @@
 # vue-ts-example-2025
 
-## 参考资料
+This template should help get you started developing with Vue 3 in Vite.
 
-- [soybean-admin (GitHub)](https://github.com/soybeanjs/soybean-admin) — 2.0 预览： [预览地址](https://v2-0.soybean-admin-df1.pages.dev/home)
+## Recommended IDE Setup
-- [Vite：静态部署指南（中文）](https://vitejs.cn/vite3-cn/guide/static-deploy.html) — Vite 官方中文文档中关于静态站点部署的说明。
+
-- [vitesse (GitHub)](https://github.com/antfu-collective/vitesse) — Anthony Fu 的 Vite + Vue 3 快速启动模板
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+pnpm build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+pnpm test:unit
+```
+
+### Run End-to-End Tests with [Playwright](https://playwright.dev)
+
+```sh
+# Install browsers for the first run
+npx playwright install
+
+# When testing on CI, must build the project first
+pnpm build
+
+# Runs the end-to-end tests
+pnpm test:e2e
+# Runs the tests only on Chromium
+pnpm test:e2e --project=chromium
+# Runs the tests of a specific file
+pnpm test:e2e tests/example.spec.ts
+# Runs the tests in debug mode
+pnpm test:e2e --debug
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+pnpm lint
+```

auto-imports.d.ts

@@ -6,10 +6,7 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-  const ConfirmationService: typeof import('utils4u/primevue')['ConfirmationService']
-  const DialogService: typeof import('utils4u/primevue')['DialogService']
   const EffectScope: typeof import('vue')['EffectScope']
-  const ToastService: typeof import('utils4u/primevue')['ToastService']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const arrayToTree: typeof import('utils4u/array')['arrayToTree']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
@@ -52,8 +49,6 @@ declare global {
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const getCurrentWatcher: typeof import('vue')['getCurrentWatcher']
   const h: typeof import('vue')['h']
-  const i18nInstance: typeof import('./src/locales-utils/i18n-auto-imports')['i18nInstance']
-  const i18nRouteMessages: typeof import('./src/locales-utils/route-messages/route-messages-auto-imports')['i18nRouteMessages']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const injectLocal: typeof import('@vueuse/core')['injectLocal']
@@ -111,7 +106,6 @@ declare global {
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
-  const routeI18nInstance: typeof import('./src/locales-utils/i18n-auto-imports')['routeI18nInstance']
   const setActivePinia: typeof import('pinia')['setActivePinia']
   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const setViewportCSSVars: typeof import('utils4u/browser')['setViewportCSSVars']
@@ -141,7 +135,6 @@ declare global {
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
   const useAnimate: typeof import('@vueuse/core')['useAnimate']
-  const useAppStore: typeof import('./src/stores/app-store-auto-imports')['useAppStore']
   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
@@ -157,7 +150,6 @@ declare global {
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
-  const useAuthStore: typeof import('./src/stores/auth-store-auto-imports')['useAuthStore']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
@@ -230,7 +222,6 @@ declare global {
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
   const useMessage: typeof import('naive-ui')['useMessage']
-  const useMetaLayoutsNMenuOptions: typeof import('./src/composables/useMetaLayoutsMenuOptions')['useMetaLayoutsNMenuOptions']
   const useModal: typeof import('naive-ui')['useModal']
   const useModel: typeof import('vue')['useModel']
   const useMounted: typeof import('@vueuse/core')['useMounted']
@@ -260,7 +251,6 @@ declare global {
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
   const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
-  const usePrimevueDialogRef: typeof import('utils4u/primevue')['usePrimevueDialogRef']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useRefs: typeof import('utils4u/vue-use')['useRefs']
@@ -268,7 +258,6 @@ declare global {
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
-  const useSafeNForm: typeof import('./src/utils/use-safe-n-form-auto-imports')['useSafeNForm']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -341,9 +330,6 @@ declare global {
   // @ts-ignore
   export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
-  // @ts-ignore
-  export type { AppThemeMode } from './src/stores/app-store-auto-imports'
-  import('./src/stores/app-store-auto-imports')
 }
 
 // for vue template auto import
@@ -351,10 +337,7 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
-    readonly ConfirmationService: UnwrapRef<typeof import('utils4u/primevue')['ConfirmationService']>
-    readonly DialogService: UnwrapRef<typeof import('utils4u/primevue')['DialogService']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly ToastService: UnwrapRef<typeof import('utils4u/primevue')['ToastService']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly arrayToTree: UnwrapRef<typeof import('utils4u/array')['arrayToTree']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
@@ -397,8 +380,6 @@ declare module 'vue' {
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getCurrentWatcher: UnwrapRef<typeof import('vue')['getCurrentWatcher']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
-    readonly i18nInstance: UnwrapRef<typeof import('./src/locales-utils/i18n-auto-imports')['i18nInstance']>
-    readonly i18nRouteMessages: UnwrapRef<typeof import('./src/locales-utils/route-messages/route-messages-auto-imports')['i18nRouteMessages']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
@@ -456,7 +437,6 @@ declare module 'vue' {
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
-    readonly routeI18nInstance: UnwrapRef<typeof import('./src/locales-utils/i18n-auto-imports')['routeI18nInstance']>
     readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
     readonly setViewportCSSVars: UnwrapRef<typeof import('utils4u/browser')['setViewportCSSVars']>
@@ -486,7 +466,6 @@ declare module 'vue' {
     readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
     readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
     readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
-    readonly useAppStore: UnwrapRef<typeof import('./src/stores/app-store-auto-imports')['useAppStore']>
     readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
     readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
     readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
@@ -502,7 +481,6 @@ declare module 'vue' {
     readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
     readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
-    readonly useAuthStore: UnwrapRef<typeof import('./src/stores/auth-store-auto-imports')['useAuthStore']>
     readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
     readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
     readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
@@ -575,7 +553,6 @@ declare module 'vue' {
     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
     readonly useMessage: UnwrapRef<typeof import('naive-ui')['useMessage']>
-    readonly useMetaLayoutsNMenuOptions: UnwrapRef<typeof import('./src/composables/useMetaLayoutsMenuOptions')['useMetaLayoutsNMenuOptions']>
     readonly useModal: UnwrapRef<typeof import('naive-ui')['useModal']>
     readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
@@ -605,7 +582,6 @@ declare module 'vue' {
     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
     readonly usePreferredReducedTransparency: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedTransparency']>
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
-    readonly usePrimevueDialogRef: UnwrapRef<typeof import('utils4u/primevue')['usePrimevueDialogRef']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useRefs: UnwrapRef<typeof import('utils4u/vue-use')['useRefs']>
@@ -613,7 +589,6 @@ declare module 'vue' {
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useSSRWidth: UnwrapRef<typeof import('@vueuse/core')['useSSRWidth']>
-    readonly useSafeNForm: UnwrapRef<typeof import('./src/utils/use-safe-n-form-auto-imports')['useSafeNForm']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>

e2e/playwright/vue.spec.ts

@@ -1,12 +1,60 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
 
 test.describe('Vue App', () => {
-  test('app renders correctly', async ({ page }) => {
+  test('visits the app root url', async ({ page }) => {
-    await page.goto('/');
+    await page.goto('/')
+    await expect(page.locator('h1')).toHaveText('You did it!')
+  })
 
-    const app = page.locator('#app');
+  test('displays Vue documentation link', async ({ page }) => {
-    await expect(app).toBeVisible();
+    await page.goto('/')
+    const link = page.locator('a[href="https://vuejs.org/"]')
+    await expect(link).toBeVisible()
+    await expect(link).toHaveText('vuejs.org')
+    await expect(link).toHaveAttribute('target', '_blank')
+    await expect(link).toHaveAttribute('rel', 'noopener')
+  })
 
-    await page.locator('.app-loading').waitFor({ state: 'detached' });
+  test('displays button with initial name state', async ({ page }) => {
-  });
+    await page.goto('/')
-});
+    const button = page.locator('button[aria-label="get name"]')
+    await expect(button).toBeVisible()
+    await expect(button).toHaveText('Name from API is: Unknown')
+  })
+
+  test('button click triggers API call', async ({ page }) => {
+    await page.goto('/')
+
+    await page.route('/api/', async (route) => {
+      await route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({ name: 'Test User' }),
+      })
+    })
+
+    const button = page.locator('button[aria-label="get name"]')
+    await button.click()
+
+    await expect(button).toHaveText('Name from API is: Test User')
+  })
+
+  test('handles API error gracefully', async ({ page }) => {
+    await page.goto('/')
+
+    await page.route('/api/', async (route) => {
+      await route.abort('failed')
+    })
+
+    const button = page.locator('button[aria-label="get name"]')
+    await button.click()
+
+    await expect(button).toHaveText('Name from API is: Unknown')
+  })
+
+  test('app-layout is present', async ({ page }) => {
+    await page.goto('/')
+    const appLayout = page.locator('.app-layout')
+    await expect(appLayout).toBeVisible()
+    await expect(appLayout).toContainText('AppLayout')
+  })
+})

eslint.config.ts

@@ -1,19 +1,14 @@
-import pluginVitest from '@vitest/eslint-plugin';
+import { globalIgnores } from 'eslint/config'
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
-import {
+import pluginVue from 'eslint-plugin-vue'
-  configureVueProject,
+import pluginVitest from '@vitest/eslint-plugin'
-  defineConfigWithVueTs,
+import pluginPlaywright from 'eslint-plugin-playwright'
-  vueTsConfigs,
+import pluginOxlint from 'eslint-plugin-oxlint'
-} from '@vue/eslint-config-typescript';
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
-import pluginImport from 'eslint-plugin-import';
-import pluginJsonc from 'eslint-plugin-jsonc';
-import pluginOxlint from 'eslint-plugin-oxlint';
-import pluginPlaywright from 'eslint-plugin-playwright';
-import pluginVue from 'eslint-plugin-vue';
-import { globalIgnores } from 'eslint/config';
-import jsoncParser from 'jsonc-eslint-parser';
 
-configureVueProject({ scriptLangs: ['ts', 'tsx'] });
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
 // More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
 
 export default defineConfigWithVueTs(
@@ -22,7 +17,7 @@ export default defineConfigWithVueTs(
     files: ['**/*.{ts,mts,tsx,vue}'],
   },
 
-  globalIgnores(['worker-configuration.d.ts', '**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
 
   pluginVue.configs['flat/essential'],
   vueTsConfigs.recommended,
@@ -37,35 +32,7 @@ export default defineConfigWithVueTs(
     files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
   },
   ...pluginOxlint.configs['flat/recommended'],
-  {
+  skipFormatting,
-    plugins: {
-      import: pluginImport,
-    },
-    rules: {
-      'import/first': 'error',
-      'import/no-duplicates': 'error',
-      'import/newline-after-import': 'error',
-      'import/no-mutable-exports': 'error',
-      'import/no-named-default': 'error',
-      'import/no-self-import': 'error',
-      'import/no-unresolved': 'off',
-      'import/no-webpack-loader-syntax': 'error',
-      'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
-    },
-  },
-
-  {
-    /**
-     * 启用 sort-keys 规则以强制对象键按字母顺序排序
-     * 原因：
-     * 1. 减少多人协作时的合并冲突
-     * 2. 保持代码一致性，提高可维护性
-     */
-    files: ['src/locales/**/*.json'],
-    languageOptions: { parser: jsoncParser },
-    plugins: { jsonc: pluginJsonc },
-    rules: { 'jsonc/sort-keys': 'error' },
-  },
 
   {
     rules: {
@@ -78,12 +45,11 @@ export default defineConfigWithVueTs(
       ],
       'vue/define-macros-order': [
         'error',
-        { order: ['defineOptions', 'defineModel', 'defineProps', 'defineEmits', 'defineSlots'] },
+        {
+          order: ['defineOptions', 'defineProps', 'defineEmits', 'defineSlots'],
+        },
       ],
-      'vue/attributes-order': 'error',
       'vue/multi-word-component-names': 'off',
     },
   },
-
+)
-  skipFormatting,
-);

index.html

@@ -1,166 +1,88 @@
 <!doctype html>
-<html lang="zh-CN" data-build-time="%VITE_APP_BUILD_TIME%" data-commit="%VITE_APP_BUILD_COMMIT%">
+<html lang="zh-CN" data-build-time="%VITE_BUILD_TIME%" data-commit="%VITE_BUILD_COMMIT%">
   <head>
     <meta charset="UTF-8" />
-
     <!-- <link rel="icon" href="data:;base64,iVBORw0KGgo=" /> -->
     <link rel="icon" href="/favicon.ico" />
-
-    <!-- viewport-fit=cover, -->
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"
     />
-
-    <meta name="color-scheme" content="light dark" />
     <meta name="format-detection" content="telephone=no" />
-
+    <title>vue-ts-example-2025</title>
-    <title>%VITE_APP_TITLE%</title>
-
     <style type="text/css">
-      *,
-      ::before,
-      ::after {
-        box-sizing: border-box;
-      }
-
-      html,
-      body,
-      #app {
-        height: 100%;
-      }
-
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-      }
       body {
         text-rendering: optimizeLegibility;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
+        margin: 0;
+      }
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: #000;
+          color: #fff;
+        }
       }
-    </style>
-
-    <style type="text/css">
       #app {
         min-height: 100vh;
+        display: flex;
+        flex-direction: column;
       }
 
       @supports (min-height: 100dvh) {
         #app {
           min-height: 100dvh;
         }
+        html .min-h-screen {
+          min-height: 100dvh;
+        }
+      }
+      .page-wrapper {
+        flex-grow: 1;
       }
     </style>
   </head>
 
+  <!-- ontouchstart ontouchend -->
   <body>
     <div id="app">
-      <style type="text/css">
+      <div class="page-wrapper" style="display: flex; justify-content: center; align-items: center">
-        @keyframes spin {
+        Loading...
-          to {
-            transform: rotate(360deg);
-          }
-        }
-        .app-loading-spinner {
-          width: 40px;
-          height: 40px;
-          border: 3px solid rgba(0, 0, 0, 0.08);
-          border-top-color: #333;
-          border-radius: 50%;
-          animation: spin 0.8s linear infinite;
-        }
-        @media (prefers-color-scheme: dark) {
-          body {
-            background-color: #0f0f0f;
-          }
-          .app-loading-spinner {
-            border: 3px solid rgba(255, 255, 255, 0.1);
-            border-top-color: #e5e5e5;
-          }
-        }
-      </style>
-      <div
-        class="app-loading"
-        style="
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          min-height: 100vh;
-          min-height: 100dvh;
-        "
-      >
-        <div class="app-loading-spinner"></div>
       </div>
     </div>
     <script type="module" src="/src/main.ts"></script>
     <!-- <script src="https://testingcf.jsdelivr.net/npm/@vant/touch-emulator/dist/index.min.js"></script> -->
     <!-- .min.js 是 jsDelivr 的特殊处理 -->
     <!-- <script src="https://unpkg.luckincdn.com/@vant/touch-emulator@1.4.0/dist/index.js"></script> -->
-    <script>
-      window.addEventListener('DOMContentLoaded', function () {
-        window.ontouchstart = function () {};
-        window.ontouchend = function () {};
-      });
-
-      window.onloadX = function () {
-        // 禁止双指缩放
-        document.addEventListener('touchstart', function (event) {
-          if (event.touches.length > 1) {
-            event.preventDefault();
-          }
-        });
-
-        // 禁止双击放大
-        var lastTouchEnd = 0;
-        document.addEventListener(
-          'touchend',
-          function (event) {
-            var now = new Date().getTime();
-            if (now - lastTouchEnd <= 300) {
-              event.preventDefault();
-            }
-            lastTouchEnd = now;
-          },
-          false,
-        );
-
-        // 禁止手势事件
-        document.addEventListener('gesturestart', function (event) {
-          event.preventDefault();
-        });
-      };
-    </script>
-    <script>
-      (function (d) {
-        var config = {
-            kitId: 'whk2tto',
-            scriptTimeout: 3000,
-            async: true,
-          },
-          h = d.documentElement,
-          t = setTimeout(function () {
-            h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive';
-          }, config.scriptTimeout),
-          tk = d.createElement('script'),
-          f = false,
-          s = d.getElementsByTagName('script')[0],
-          a;
-        h.className += ' wf-loading';
-        tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
-        tk.async = true;
-        tk.onload = tk.onreadystatechange = function () {
-          a = this.readyState;
-          if (f || (a && a != 'complete' && a != 'loaded')) return;
-          f = true;
-          clearTimeout(t);
-          try {
-            Typekit.load(config);
-          } catch (e) {}
-        };
-        s.parentNode.insertBefore(tk, s);
-      }); /* (document) */
-    </script>
   </body>
+  <script>
+    ;(function (d) {
+      var config = {
+          kitId: 'whk2tto',
+          scriptTimeout: 3000,
+          async: true,
+        },
+        h = d.documentElement,
+        t = setTimeout(function () {
+          h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive'
+        }, config.scriptTimeout),
+        tk = d.createElement('script'),
+        f = false,
+        s = d.getElementsByTagName('script')[0],
+        a
+      h.className += ' wf-loading'
+      tk.src = 'https://use.typekit.net/' + config.kitId + '.js'
+      tk.async = true
+      tk.onload = tk.onreadystatechange = function () {
+        a = this.readyState
+        if (f || (a && a != 'complete' && a != 'loaded')) return
+        f = true
+        clearTimeout(t)
+        try {
+          Typekit.load(config)
+        } catch (e) {}
+      }
+      s.parentNode.insertBefore(tk, s)
+    }) /* (document) */
+  </script>
 </html>

package.json

@@ -1,5 +1,5 @@
 {
-  "packageManager": "pnpm@10.18.3",
+  "packageManager": "pnpm@10.15.1",
   "name": "vue-ts-example-2025",
   "version": "0.0.0",
   "private": true,
@@ -8,89 +8,78 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "scripts": {
-    "_all": "run-s build-only lint format:prettier type-check test:unit:DisableWatch",
+    "_all": "run-p build-only format type-check lint",
     "dev": "vite --port 4730 --host --strictPort",
     "build": "run-p type-check \"build-only {@}\" --",
     "build-only": "vite build",
-    "preview": "vite preview --port 4731 --host --strictPort",
+    "preview": "vite preview",
-    "wrangler:dev": "wrangler dev --port 4732",
+    "preview:wrangler": "pnpm run build && wrangler dev",
-    "format:prettier": "prettier --write src/",
+    "test:unit": "vitest",
+    "test:playwright": "playwright test",
+    "test:playwright:headless": "HEADLESS=true playwright test",
+    "test:playwright:ui": "playwright test --ui",
+    "test:playwright:chromium": "playwright test --project=chromium",
     "type-check": "vue-tsc --build",
-    "lint": "run-s lint:*",
-    "lint:vue-i18n-extract": "vue-i18n-extract report --vueFiles './src/**/*.?(ts|tsx|vue)' --languageFiles './src/locales/**/*.?(json|yml|yaml|js)' --ci",
-    "lint:stylelint": "stylelint --fix --ignore-path .gitignore \"**/*.{css,less,scss,vue}\"",
     "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
     "lint:eslint": "eslint . --fix",
-    "test:unit:DisableWatch": "vitest --run",
+    "_oxlint_cfg": "oxlint . --fix --ignore-path=.gitignore --print-config",
-    "test:playwright:headless": "HEADLESS=true playwright test --quiet",
+    "__oxlint_-D": "oxlint . --fix --deny=correctness",
-    "postinstall": "wrangler types",
+    "lint": "run-s lint:*",
+    "format": "prettier --write src/",
+    "-wrangler:pages:deploy:preview": "wrangler pages deploy dist --project-name=vue-ts-example-2025 --branch=preview",
+    "-wrangler:pages:deploy:prod": "wrangler pages deploy dist --project-name=vue-ts-example-2025",
+    "-deploy:preview": "run-s build-only wrangler:pages:deploy:preview",
+    "-deploy:prod": "run-s build-only wrangler:pages:deploy:prod",
+    "wrangler:deploy": "pnpm run build && wrangler deploy",
+    "wrangler:versions:upload": "pnpm run build && wrangler versions upload",
+    "cf-typegen": "wrangler types",
+    "_dep:dedupe": "pnpm dedupe",
+    "_dep:update": "pnpm dlx taze major --interactive",
+    "_sizecheck:Treemap": "pnpm dlx vite-bundle-visualizer -t treemap",
+    "_sizecheck:Sunburst": "pnpm dlx vite-bundle-visualizer -t sunburst",
+    "_sizecheck:Network": "pnpm dlx vite-bundle-visualizer -t network",
+    "_knip": "pnpm dlx knip",
     "prepare": "husky"
   },
   "lint-staged": {
     "{src,e2e}/**/*.{js,jsx,ts,tsx,vue}": [
+      "prettier --write",
       "eslint --fix",
-      "oxlint --fix",
+      "oxlint --fix"
-      "prettier --write"
+    ]
-    ],
-    "{src,packages}/**/*.{css,less,scss,vue}": [
-      "stylelint --fix"
-    ],
-    "{src/locales-utils,src/locales}/**/*": "node scripts/type-check-for-lint-staged.mjs"
   },
   "pnpm": {
     "overrides": {
-      "vue-tsc": "$vue-tsc"
+      "vite": "$vite"
-    },
+    }
-    "onlyBuiltDependencies": [
-      "@parcel/watcher",
-      "esbuild",
-      "oxc-resolver",
-      "sharp",
-      "vue-demi",
-      "workerd"
-    ]
   },
   "dependencies": {
-    "@commitlint/cli": "^20.0.0",
+    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^20.0.0",
+    "@commitlint/config-conventional": "^19.8.1",
     "@formkit/auto-animate": "^0.9.0",
     "@pinia/colada": "^0.17.4",
     "@primeuix/themes": "^1.2.3",
-    "@sa/materials": "workspace:*",
     "@unhead/vue": "^2.0.14",
     "@vueuse/core": "^13.9.0",
-    "highlight.js": "^11.11.1",
-    "lodash-es": "^4.17.21",
-    "naive-ui": "^2.43.1",
     "pinia": "^3.0.3",
-    "primeicons": "^7.0.0",
+    "pinia-plugin-persistedstate": "^4.5.0",
     "primelocale": "^2.1.7",
     "primevue": "^4.3.9",
-    "ts-enum-util": "^4.1.0",
     "utils4u": "^4.2.3",
     "vue": "^3.5.21",
     "vue-i18n": "^11.1.12",
-    "vue-memoize-dict": "^1.1.3",
+    "vue-router": "^4.5.1"
-    "vue-router": "^4.6.3"
   },
   "devDependencies": {
-    "@cloudflare/vite-plugin": "^1.13.2",
+    "@cloudflare/vite-plugin": "^1.12.4",
-    "@commitlint/types": "^20.0.0",
+    "@commitlint/types": "^19.8.1",
-    "@iconify-json/carbon": "^1.2.13",
-    "@iconify-json/clarity": "^1.2.4",
-    "@iconify-json/line-md": "^1.2.11",
-    "@iconify-json/material-symbols": "^1.2.42",
     "@intlify/unplugin-vue-i18n": "^11.0.0",
     "@playwright/test": "^1.55.0",
     "@prettier/plugin-oxc": "^0.0.4",
     "@primevue/auto-import-resolver": "^4.3.9",
     "@primevue/metadata": "^4.3.9",
-    "@stylelint-types/stylelint-order": "^7.0.0",
-    "@stylelint-types/stylelint-scss": "^6.11.0",
     "@tsconfig/node22": "^22.0.2",
-    "@types/html-minifier-terser": "^7.0.2",
+    "@types/jsdom": "^21.1.7",
-    "@types/jsdom": "^27.0.0",
-    "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.18.1",
     "@vant/auto-import-resolver": "^1.3.0",
     "@vitejs/plugin-vue": "^6.0.1",
@@ -100,55 +89,36 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
-    "consola": "^3.4.2",
     "eslint": "^9.35.0",
-    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-oxlint": "~1.14.0",
-    "eslint-plugin-jsonc": "^2.21.0",
-    "eslint-plugin-oxlint": "~1.23.0",
     "eslint-plugin-playwright": "^2.2.2",
-    "eslint-plugin-vue": "~10.5.0",
+    "eslint-plugin-vue": "~10.4.0",
-    "happy-dom": "^20.0.1",
-    "html-minifier-terser": "^7.2.0",
     "husky": "^9.1.7",
-    "jsdom": "^27.0.0",
+    "jiti": "^2.5.1",
+    "jsdom": "^26.1.0",
     "lint-staged": "^16.1.6",
     "npm-run-all2": "^8.0.4",
     "nprogress": "^0.2.0",
-    "oxlint": "~1.23.0",
+    "oxlint": "~1.14.0",
-    "postcss-html": "^1.8.0",
     "prettier": "3.6.2",
-    "rollup": "^4.52.5",
-    "sass-embedded": "^1.93.2",
-    "sharp": "^0.34.4",
-    "stylelint": "^16.25.0",
-    "stylelint-config-recess-order": "^7.3.0",
-    "stylelint-config-standard": "^39.0.1",
-    "stylelint-config-standard-scss": "^16.0.0",
-    "stylelint-config-standard-vue": "^1.0.0",
-    "stylelint-define-config": "^16.24.0",
-    "svgo": "^4.0.0",
-    "tinyglobby": "^0.2.15",
-    "type-fest": "^5.1.0",
     "typescript": "~5.9.2",
     "unocss": "^66.5.1",
     "unocss-preset-animations": "^1.2.1",
     "unplugin-auto-import": "^20.1.0",
     "unplugin-icons": "^22.2.0",
-    "unplugin-vue-components": "^29.2.0",
+    "unplugin-vue-components": "^29.0.0",
-    "unplugin-vue-markdown": "^29.2.0",
+    "unplugin-vue-markdown": "^29.1.0",
-    "unplugin-vue-router": "^0.16.0",
+    "unplugin-vue-router": "^0.15.0",
-    "vite": "^7.1.5",
+    "vite": "npm:rolldown-vite@^7.1.9",
-    "vite-plugin-checker": "^0.11.0",
+    "vite-plugin-checker": "^0.10.3",
     "vite-plugin-fake-server": "^2.2.0",
     "vite-plugin-image-optimizer": "^2.0.2",
     "vite-plugin-vue-devtools": "^8.0.1",
-    "vite-plugin-vue-meta-layouts": "^0.6.1",
+    "vite-plugin-vue-meta-layouts": "^0.6.0",
     "vite-plugin-webfont-dl": "^3.11.1",
     "vitest": "^3.2.4",
-    "vue-component-type-helpers": "^3.1.2",
+    "vue-macros": "3.0.0-beta.23",
-    "vue-i18n-extract": "^2.0.7",
+    "vue-tsc": "^3.0.6",
-    "vue-macros": "3.1.1",
+    "wrangler": "^4.35.0"
-    "vue-tsc": "^3.1.0",
-    "wrangler": "^4.37.1"
   }
 }

packages/materials/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "@sa/materials",
-  "version": "1.3.15",
-  "exports": {
-    ".": "./src/index.ts"
-  },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "./src/*"
-      ]
-    }
-  },
-  "scripts": {
-    "gen:css-types": "bunx --bun typed-css-modules src --pattern '**/*.module.css'"
-  },
-  "dependencies": {
-    "simplebar-vue": "2.4.2"
-  }
-}

packages/materials/src/index.ts

@@ -1,6 +0,0 @@
-import AdminLayout, { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID } from './libs/admin-layout';
-
-import SimpleScrollbar from './libs/simple-scrollbar';
-
-export { AdminLayout, LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX, SimpleScrollbar };
-export * from './types';

packages/materials/src/libs/admin-layout/index.module.css

@@ -1,63 +0,0 @@
-/* @type */
-
-.layout-header,
-.layout-header-placement {
-  height: var(--soy-header-height);
-}
-
-.layout-header {
-  z-index: var(--soy-header-z-index);
-}
-
-.layout-tab {
-  top: var(--soy-header-height);
-  z-index: var(--soy-tab-z-index);
-  height: var(--soy-tab-height);
-}
-
-.layout-tab-placement {
-  height: var(--soy-tab-height);
-}
-
-.layout-sider {
-  z-index: var(--soy-sider-z-index);
-  width: var(--soy-sider-width);
-}
-
-.layout-mobile-sider {
-  z-index: var(--soy-sider-z-index);
-}
-
-.layout-mobile-sider-mask {
-  z-index: var(--soy-mobile-sider-z-index);
-}
-
-.layout-sider-collapsed {
-  z-index: var(--soy-sider-z-index);
-  width: var(--soy-sider-collapsed-width);
-}
-
-.layout-footer,
-.layout-footer-placement {
-  height: var(--soy-footer-height);
-}
-
-.layout-footer {
-  z-index: var(--soy-footer-z-index);
-}
-
-.left-gap {
-  padding-left: var(--soy-sider-width);
-}
-
-.left-gap-collapsed {
-  padding-left: var(--soy-sider-collapsed-width);
-}
-
-.sider-padding-top {
-  padding-top: var(--soy-header-height);
-}
-
-.sider-padding-bottom {
-  padding-bottom: var(--soy-footer-height);
-}

packages/materials/src/libs/admin-layout/index.module.css.d.ts

@@ -1,17 +0,0 @@
-declare const styles: {
-  readonly 'layout-footer': string;
-  readonly 'layout-footer-placement': string;
-  readonly 'layout-header': string;
-  readonly 'layout-header-placement': string;
-  readonly 'layout-mobile-sider': string;
-  readonly 'layout-mobile-sider-mask': string;
-  readonly 'layout-sider': string;
-  readonly 'layout-sider-collapsed': string;
-  readonly 'layout-tab': string;
-  readonly 'layout-tab-placement': string;
-  readonly 'left-gap': string;
-  readonly 'left-gap-collapsed': string;
-  readonly 'sider-padding-bottom': string;
-  readonly 'sider-padding-top': string;
-};
-export = styles;

packages/materials/src/libs/admin-layout/index.ts

@@ -1,5 +0,0 @@
-import AdminLayout from './index.vue';
-import { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID } from './shared';
-
-export default AdminLayout;
-export { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX };

packages/materials/src/libs/admin-layout/index.vue

@@ -1,238 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { AdminLayoutProps } from '../../types';
-import { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID, createLayoutCssVars } from './shared';
-import style from './index.module.css';
-
-defineOptions({
-  name: 'AdminLayout',
-});
-
-const props = withDefaults(defineProps<AdminLayoutProps>(), {
-  mode: 'vertical',
-  scrollMode: 'content',
-  scrollElId: LAYOUT_SCROLL_EL_ID,
-  commonClass: 'transition-all-300',
-  fixedTop: true,
-  maxZIndex: LAYOUT_MAX_Z_INDEX,
-  headerVisible: true,
-  headerHeight: 56,
-  tabVisible: true,
-  tabHeight: 48,
-  siderVisible: true,
-  siderCollapse: false,
-  siderWidth: 220,
-  siderCollapsedWidth: 64,
-  footerVisible: true,
-  footerHeight: 48,
-  rightFooter: false,
-});
-
-const emit = defineEmits<Emits>();
-
-const slots = defineSlots<Slots>();
-
-interface Emits {
-  /** Update siderCollapse */
-  (e: 'update:siderCollapse', collapse: boolean): void;
-}
-
-type SlotFn = (props?: Record<string, unknown>) => any;
-
-type Slots = {
-  /** Main */
-  default?: SlotFn;
-  /** Header */
-  header?: SlotFn;
-  /** Tab */
-  tab?: SlotFn;
-  /** Sider */
-  sider?: SlotFn;
-  /** Footer */
-  footer?: SlotFn;
-};
-
-const cssVars = computed(() => createLayoutCssVars(props));
-
-// config visible
-const showHeader = computed(() => Boolean(slots.header) && props.headerVisible);
-const showTab = computed(() => Boolean(slots.tab) && props.tabVisible);
-const showSider = computed(() => !props.isMobile && Boolean(slots.sider) && props.siderVisible);
-const showMobileSider = computed(
-  () => props.isMobile && Boolean(slots.sider) && props.siderVisible,
-);
-const showFooter = computed(() => Boolean(slots.footer) && props.footerVisible);
-
-// scroll mode
-const isWrapperScroll = computed(() => props.scrollMode === 'wrapper');
-const isContentScroll = computed(() => props.scrollMode === 'content');
-
-// layout direction
-const isVertical = computed(() => props.mode === 'vertical');
-const isHorizontal = computed(() => props.mode === 'horizontal');
-
-const fixedHeaderAndTab = computed(
-  () => props.fixedTop || (isHorizontal.value && isWrapperScroll.value),
-);
-
-// css
-const leftGapClass = computed(() => {
-  if (!props.fullContent && showSider.value) {
-    return props.siderCollapse ? style['left-gap-collapsed'] : style['left-gap'];
-  }
-
-  return '';
-});
-
-const headerLeftGapClass = computed(() => (isVertical.value ? leftGapClass.value : ''));
-
-const footerLeftGapClass = computed(() => {
-  const condition1 = isVertical.value;
-  const condition2 = isHorizontal.value && isWrapperScroll.value && !props.fixedFooter;
-  const condition3 = Boolean(isHorizontal.value && props.rightFooter);
-
-  if (condition1 || condition2 || condition3) {
-    return leftGapClass.value;
-  }
-
-  return '';
-});
-
-const siderPaddingClass = computed(() => {
-  let cls = '';
-
-  if (showHeader.value && !headerLeftGapClass.value) {
-    cls += style['sider-padding-top'];
-  }
-  if (showFooter.value && !footerLeftGapClass.value) {
-    cls += ` ${style['sider-padding-bottom']}`;
-  }
-
-  return cls;
-});
-
-function handleClickMask() {
-  emit('update:siderCollapse', true);
-}
-</script>
-
-<template>
-  <div class="relative h-full" :class="[commonClass]" :style="cssVars">
-    <div
-      :id="isWrapperScroll ? scrollElId : undefined"
-      class="h-full flex flex-col"
-      :class="[commonClass, scrollWrapperClass, { 'overflow-y-auto': isWrapperScroll }]"
-    >
-      <!-- Header -->
-      <template v-if="showHeader">
-        <header
-          v-show="!fullContent"
-          class="flex-shrink-0"
-          :class="[
-            style['layout-header'],
-            commonClass,
-            headerLeftGapClass,
-            { 'absolute top-0 left-0 w-full': fixedHeaderAndTab },
-          ]"
-        >
-          <slot name="header"></slot>
-        </header>
-        <div
-          v-show="!fullContent && fixedHeaderAndTab"
-          class="flex-shrink-0 overflow-hidden"
-          :class="[style['layout-header-placement']]"
-        ></div>
-      </template>
-
-      <!-- Tab -->
-      <template v-if="showTab">
-        <div
-          class="flex-shrink-0 overflow-hidden"
-          :class="[
-            style['layout-tab'],
-            commonClass,
-            tabClass,
-            { 'top-0!': fullContent || !showHeader },
-            leftGapClass,
-            { 'absolute left-0 w-full': fixedHeaderAndTab },
-          ]"
-        >
-          <slot name="tab"></slot>
-        </div>
-        <div
-          v-show="fullContent || fixedHeaderAndTab"
-          class="flex-shrink-0 overflow-hidden"
-          :class="[style['layout-tab-placement']]"
-        ></div>
-      </template>
-
-      <!-- Sider -->
-      <template v-if="showSider">
-        <aside
-          v-show="!fullContent"
-          class="absolute left-0 top-0 h-full"
-          :class="[
-            commonClass,
-            siderClass,
-            siderPaddingClass,
-            siderCollapse ? style['layout-sider-collapsed'] : style['layout-sider'],
-          ]"
-        >
-          <slot name="sider"></slot>
-        </aside>
-      </template>
-
-      <!-- Mobile Sider -->
-      <template v-if="showMobileSider">
-        <aside
-          class="absolute left-0 top-0 h-full w-0 bg-white dark:bg-gray-800"
-          :class="[
-            commonClass,
-            mobileSiderClass,
-            style['layout-mobile-sider'],
-            siderCollapse ? 'overflow-hidden' : style['layout-sider'],
-          ]"
-        >
-          <slot name="sider"></slot>
-        </aside>
-        <div
-          v-show="!siderCollapse"
-          class="absolute left-0 top-0 h-full w-full bg-[rgba(0,0,0,0.2)]"
-          :class="[style['layout-mobile-sider-mask']]"
-          @click="handleClickMask"
-        ></div>
-      </template>
-
-      <!-- Main Content -->
-      <main
-        :id="isContentScroll ? scrollElId : undefined"
-        class="flex flex-col flex-grow"
-        :class="[commonClass, contentClass, leftGapClass, { 'overflow-y-auto': isContentScroll }]"
-      >
-        <slot></slot>
-      </main>
-
-      <!-- Footer -->
-      <template v-if="showFooter">
-        <footer
-          v-show="!fullContent"
-          class="flex-shrink-0"
-          :class="[
-            style['layout-footer'],
-            commonClass,
-            footerClass,
-            footerLeftGapClass,
-            { 'absolute left-0 bottom-0 w-full': fixedFooter },
-          ]"
-        >
-          <slot name="footer"></slot>
-        </footer>
-        <div
-          v-show="!fullContent && fixedFooter"
-          class="flex-shrink-0 overflow-hidden"
-          :class="[style['layout-footer-placement']]"
-        ></div>
-      </template>
-    </div>
-  </div>
-</template>

packages/materials/src/libs/admin-layout/shared.ts

@@ -1,68 +0,0 @@
-import type { AdminLayoutProps, LayoutCssVars, LayoutCssVarsProps } from '../../types';
-
-/** The id of the scroll element of the layout */
-export const LAYOUT_SCROLL_EL_ID = '__SCROLL_EL_ID__';
-
-/** The max z-index of the layout */
-export const LAYOUT_MAX_Z_INDEX = 100;
-
-/**
- * Create layout css vars by css vars props
- *
- * @param props Css vars props
- */
-function createLayoutCssVarsByCssVarsProps(props: LayoutCssVarsProps) {
-  const cssVars: LayoutCssVars = {
-    '--soy-header-height': `${props.headerHeight}px`,
-    '--soy-header-z-index': props.headerZIndex,
-    '--soy-tab-height': `${props.tabHeight}px`,
-    '--soy-tab-z-index': props.tabZIndex,
-    '--soy-sider-width': `${props.siderWidth}px`,
-    '--soy-sider-collapsed-width': `${props.siderCollapsedWidth}px`,
-    '--soy-sider-z-index': props.siderZIndex,
-    '--soy-mobile-sider-z-index': props.mobileSiderZIndex,
-    '--soy-footer-height': `${props.footerHeight}px`,
-    '--soy-footer-z-index': props.footerZIndex
-  };
-
-  return cssVars;
-}
-
-/**
- * Create layout css vars
- *
- * @param props
- */
-export function createLayoutCssVars(props: AdminLayoutProps) {
-  const {
-    mode,
-    isMobile,
-    maxZIndex = LAYOUT_MAX_Z_INDEX,
-    headerHeight,
-    tabHeight,
-    siderWidth,
-    siderCollapsedWidth,
-    footerHeight
-  } = props;
-
-  const headerZIndex = maxZIndex - 3;
-  const tabZIndex = maxZIndex - 5;
-  const siderZIndex = mode === 'vertical' || isMobile ? maxZIndex - 1 : maxZIndex - 4;
-  const mobileSiderZIndex = isMobile ? maxZIndex - 2 : 0;
-  const footerZIndex = maxZIndex - 5;
-
-  const cssProps: LayoutCssVarsProps = {
-    headerHeight,
-    headerZIndex,
-    tabHeight,
-    tabZIndex,
-    siderWidth,
-    siderZIndex,
-    mobileSiderZIndex,
-    siderCollapsedWidth,
-    footerHeight,
-    footerZIndex
-  };
-
-  return createLayoutCssVarsByCssVarsProps(cssProps);
-}

packages/materials/src/libs/simple-scrollbar/index.ts

@@ -1,3 +0,0 @@
-import SimpleScrollbar from './index.vue';
-
-export default SimpleScrollbar;

packages/materials/src/libs/simple-scrollbar/index.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Simplebar from 'simplebar-vue';
-import 'simplebar-vue/dist/simplebar.min.css';
-
-defineOptions({
-  name: 'SimpleScrollbar',
-});
-</script>
-
-<template>
-  <div class="h-full flex-1-hidden">
-    <Simplebar class="h-full">
-      <slot />
-    </Simplebar>
-  </div>
-</template>

packages/materials/src/types/index.ts

@@ -1,288 +0,0 @@
-/** Header config */
-interface AdminLayoutHeaderConfig {
-  /**
-   * Whether header is visible
-   *
-   * @default true
-   */
-  headerVisible?: boolean;
-  /**
-   * Header height
-   *
-   * @default 56px
-   */
-  headerHeight?: number;
-}
-
-/** Tab config */
-interface AdminLayoutTabConfig {
-  /**
-   * Whether tab is visible
-   *
-   * @default true
-   */
-  tabVisible?: boolean;
-  /**
-   * Tab class
-   *
-   * @default ''
-   */
-  tabClass?: string;
-  /**
-   * Tab height
-   *
-   * @default 48px
-   */
-  tabHeight?: number;
-}
-
-/** Sider config */
-interface AdminLayoutSiderConfig {
-  /**
-   * Whether sider is visible
-   *
-   * @default true
-   */
-  siderVisible?: boolean;
-  /**
-   * Sider class
-   *
-   * @default ''
-   */
-  siderClass?: string;
-  /**
-   * Mobile sider class
-   *
-   * @default ''
-   */
-  mobileSiderClass?: string;
-  /**
-   * Sider collapse status
-   *
-   * @default false
-   */
-  siderCollapse?: boolean;
-  /**
-   * Sider width when collapse is false
-   *
-   * @default '220px'
-   */
-  siderWidth?: number;
-  /**
-   * Sider width when collapse is true
-   *
-   * @default '64px'
-   */
-  siderCollapsedWidth?: number;
-}
-
-/** Content config */
-export interface AdminLayoutContentConfig {
-  /**
-   * Content class
-   *
-   * @default ''
-   */
-  contentClass?: string;
-  /**
-   * Whether content is full the page
-   *
-   * If true, other elements will be hidden by `display: none`
-   */
-  fullContent?: boolean;
-}
-
-/** Footer config */
-export interface AdminLayoutFooterConfig {
-  /**
-   * Whether footer is visible
-   *
-   * @default true
-   */
-  footerVisible?: boolean;
-  /**
-   * Whether footer is fixed
-   *
-   * @default true
-   */
-  fixedFooter?: boolean;
-  /**
-   * Footer class
-   *
-   * @default ''
-   */
-  footerClass?: string;
-  /**
-   * Footer height
-   *
-   * @default 48px
-   */
-  footerHeight?: number;
-  /**
-   * Whether footer is on the right side
-   *
-   * When the layout is vertical, the footer is on the right side
-   */
-  rightFooter?: boolean;
-}
-
-/**
- * Layout mode
- *
- * - Horizontal
- * - Vertical
- */
-export type LayoutMode = 'horizontal' | 'vertical';
-
-/**
- * The scroll mode when content overflow
- *
- * - Wrapper: the layout component's wrapper element has a scrollbar
- * - Content: the layout component's content element has a scrollbar
- *
- * @default 'wrapper'
- */
-export type LayoutScrollMode = 'wrapper' | 'content';
-
-/** Admin layout props */
-export interface AdminLayoutProps
-  extends AdminLayoutHeaderConfig,
-    AdminLayoutTabConfig,
-    AdminLayoutSiderConfig,
-    AdminLayoutContentConfig,
-    AdminLayoutFooterConfig {
-  /**
-   * Layout mode
-   *
-   * - {@link LayoutMode}
-   */
-  mode?: LayoutMode;
-  /** Is mobile layout */
-  isMobile?: boolean;
-  /**
-   * Scroll mode
-   *
-   * - {@link ScrollMode}
-   */
-  scrollMode?: LayoutScrollMode;
-  /**
-   * The id of the scroll element of the layout
-   *
-   * It can be used to get the corresponding Dom and scroll it
-   *
-   * @example
-   *   use the default id by import
-   *   ```ts
-   *   import { adminLayoutScrollElId } from '@sa/vue-materials';
-   *   ```
-   *
-   * @default
-   * ```ts
-   * const adminLayoutScrollElId = '__ADMIN_LAYOUT_SCROLL_EL_ID__'
-   * ```
-   */
-  scrollElId?: string;
-  /** The class of the scroll element */
-  scrollElClass?: string;
-  /** The class of the scroll wrapper element */
-  scrollWrapperClass?: string;
-  /**
-   * The common class of the layout
-   *
-   * Is can be used to configure the transition animation
-   *
-   * @default 'transition-all-300'
-   */
-  commonClass?: string;
-  /**
-   * Whether fix the header and tab
-   *
-   * @default true
-   */
-  fixedTop?: boolean;
-  /**
-   * The max z-index of the layout
-   *
-   * The z-index of Header,Tab,Sider and Footer will not exceed this value
-   */
-  maxZIndex?: number;
-}
-
-type Kebab<S extends string> = S extends Uncapitalize<S> ? S : `-${Uncapitalize<S>}`;
-
-type KebabCase<S extends string> = S extends `${infer Start}${infer End}`
-  ? `${Uncapitalize<Start>}${KebabCase<Kebab<End>>}`
-  : S;
-
-type Prefix = '--soy-';
-
-export type LayoutCssVarsProps = Pick<
-  AdminLayoutProps,
-  'headerHeight' | 'tabHeight' | 'siderWidth' | 'siderCollapsedWidth' | 'footerHeight'
-> & {
-  headerZIndex?: number;
-  tabZIndex?: number;
-  siderZIndex?: number;
-  mobileSiderZIndex?: number;
-  footerZIndex?: number;
-};
-
-export type LayoutCssVars = {
-  [K in keyof LayoutCssVarsProps as `${Prefix}${KebabCase<K>}`]: string | number;
-};
-
-/**
- * The mode of the tab
- *
- * - Button: button style
- * - Chrome: chrome style
- *
- * @default chrome
- */
-export type PageTabMode = 'button' | 'chrome';
-
-export interface PageTabProps {
-  /** Whether is dark mode */
-  darkMode?: boolean;
-  /**
-   * The mode of the tab
-   *
-   * - {@link TabMode}
-   */
-  mode?: PageTabMode;
-  /**
-   * The common class of the layout
-   *
-   * Is can be used to configure the transition animation
-   *
-   * @default 'transition-all-300'
-   */
-  commonClass?: string;
-  /** The class of the button tab */
-  buttonClass?: string;
-  /** The class of the chrome tab */
-  chromeClass?: string;
-  /** Whether the tab is active */
-  active?: boolean;
-  /** The color of the active tab */
-  activeColor?: string;
-  /**
-   * Whether the tab is closable
-   *
-   * Show the close icon when true
-   */
-  closable?: boolean;
-}
-
-export type PageTabCssVarsProps = {
-  primaryColor: string;
-  primaryColor1: string;
-  primaryColor2: string;
-  primaryColorOpacity1: string;
-  primaryColorOpacity2: string;
-  primaryColorOpacity3: string;
-};
-
-export type PageTabCssVars = {
-  [K in keyof PageTabCssVarsProps as `${Prefix}${KebabCase<K>}`]: string | number;
-};

packages/materials/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "jsx": "preserve",
-    "lib": ["DOM", "ESNext"],
-    "baseUrl": ".",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "types": ["node"],
-    "strict": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}

playwright.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test'
-import process from 'node:process';
+import process from 'node:process'
 
 // const runningInVSCode = process.env.TERM_PROGRAM === 'vscode'
-const baseURL = 'http://localhost:4731';
+const baseURL = 'http://localhost:4173'
 
 /**
  * Read environment variables from file.
@@ -97,7 +97,7 @@ export default defineConfig({
   ],
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
-  outputDir: 'playwright-test-results/',
+  // outputDir: 'test-results/',
 
   /* Run your local dev server before starting the tests */
   webServer: {
@@ -110,4 +110,4 @@ export default defineConfig({
     port: Number(new URL(baseURL).port),
     reuseExistingServer: true /* !process.env.CI */,
   },
-});
+})

pnpm-workspace.yaml

@@ -1,2 +0,0 @@
-packages:
-  - "packages/*"

scripts/type-check-for-lint-staged.mjs

@@ -1,15 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Type check script for lint-staged
- * This script ignores file arguments passed by lint-staged and runs type-check on the entire project
- */
-
-import { spawnSync } from 'child_process';
-
-const result = spawnSync('pnpm', ['run', 'type-check'], {
-  stdio: 'inherit',
-  shell: process.platform === 'win32',
-});
-
-process.exit(result.status ?? 1);

server/index.ts

@@ -1,89 +1,24 @@
 export default {
   async fetch(request, env) {
-    const url = new URL(request.url);
+    const url = new URL(request.url)
 
-    // 本地开发环境延迟处理
-    if (url.hostname === 'localhost' || url.hostname === '127.0.0.1') {
-      await new Promise((r) => setTimeout(r, 250));
-    }
-
-    // API 路由处理
     if (url.pathname.startsWith('/api/')) {
-      await env.KV.put(
+      // write a key-value pair
-        'events:api:last-call',
+      await env.KV.put('KEY', 'VALUE')
-        `${new Date().toISOString()} ${request.method} ${url.pathname}`,
+      // read a key-value pair
-      );
+      const value = await env.KV.get('KEY')
-
+      // list all key-value pairs
-      // 获取所有可用的键名
+      const allKeys = await env.KV.list()
-      const availableKeys = [
+      // delete a key-value pair
-        'events:api:last-call',
+      await env.KV.delete('KEY')
-        'events:ws:connection',
-        'events:ws:message',
-        'events:ws:disconnection',
-      ];
 
       return Response.json({
-        timestamp: Date.now(),
+        name: 'Cloudflare',
-        lastApiCall: await env.KV.get('events:api:last-call'),
+        value,
-        availableKeys: availableKeys,
+        valueAfterDelete: await env.KV.get('KEY'),
-        storedData: {
+        allKeys,
-          apiLastCall: await env.KV.get('events:api:last-call'),
+      })
-          wsConnection: await env.KV.get('events:ws:connection'),
-          wsMessage: await env.KV.get('events:ws:message'),
-          wsDisconnection: await env.KV.get('events:ws:disconnection'),
-        },
-      });
     }
-
+    return new Response(null, { status: 404 })
-    // WebSocket 连接处理
-    if (url.pathname === '/ws') {
-      const upgradeHeader = request.headers.get('Upgrade');
-      if (upgradeHeader !== 'websocket') {
-        return new Response('Expected websocket', { status: 400 });
-      }
-
-      const [client, server] = Object.values(new WebSocketPair());
-
-      // 处理服务器端WebSocket消息
-      server.accept();
-      env.KV.put('events:ws:connection', `${new Date().toISOString()} ${url.pathname}`);
-
-      // accept 后立即发送欢迎消息
-      if (url.hostname === 'localhost' || url.hostname === '127.0.0.1') {
-        await new Promise((r) => setTimeout(r, 250));
-      }
-
-      server.send(
-        `欢迎连接到WebSocket服务器！连接时间: ${new Date().toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })}`,
-      );
-
-      server.addEventListener('message', async (event) => {
-        console.log('收到客户端消息:', event.data);
-        await env.KV.put('events:ws:message', `${new Date().toISOString()} ${event.data}`);
-
-        // 回复消息给客户端
-        if (url.hostname === 'localhost' || url.hostname === '127.0.0.1') {
-          await new Promise((r) => setTimeout(r, 250));
-        }
-
-        server.send(
-          `服务器收到: ${event.data} (时间: ${new Date().toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })})`,
-        );
-      });
-
-      server.addEventListener('close', (event) => {
-        console.log('WebSocket连接关闭');
-        console.log('[close] event :>> ', event);
-        env.KV.put('events:ws:disconnection', `${new Date().toISOString()} ${url.pathname}`);
-        server.close(event.code, `连接关闭: ${event.reason}`);
-      });
-
-      return new Response(null, {
-        status: 101,
-        webSocket: client,
-      });
-    }
-
-    return new Response(null, { status: 404 });
   },
-} satisfies ExportedHandler<Env>;
+} satisfies ExportedHandler<Env>

src/App.spec.ts

@@ -1,34 +0,0 @@
-/**
- * @vitest-environment happy-dom
- */
-
-/*
- * https://pinia.vuejs.org/zh/cookbook/testing.html#unit-testing-components
- */
-
-import { mount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import { createMemoryHistory, createRouter } from 'vue-router';
-import App from './App.vue';
-
-const router = createRouter({
-  history: createMemoryHistory(),
-  routes: [
-    {
-      path: '/',
-      component: {
-        template: 'Welcome to the blogging app',
-      },
-    },
-  ],
-});
-
-describe('App', () => {
-  it('renders RouterView', async () => {
-    router.push('/');
-    await router.isReady();
-
-    const wrapper = mount(App, { global: { plugins: [router, createPinia()] } });
-    expect(wrapper.text()).toContain('Welcome to the blogging app');
-  });
-});

src/App.vue

@@ -1,18 +1,29 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router';
+import { ref } from 'vue'
-import AppNaiveUIProvider from './AppNaiveUIProvider.vue';
+
+const name = ref('Unknown')
+
+const getName = async () => {
+  const res = await fetch('/api/')
+  const data = await res.json()
+  name.value = data.name
+}
 </script>
 
 <template>
-  <DynamicDialog />
+  <div>
-  <ConfirmDialog />
+    <h1>You did it!</h1>
-  <Toast />
+    <p>
+      Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
+      documentation
+    </p>
+    <button class="green" @click="getName" aria-label="get name">
+      Name from API is: {{ name }}
+    </button>
+  </div>
 
-  <AppNaiveUIProvider>
+  <DynamicDialog /> <ConfirmDialog /> <Toast />
-    <router-view v-slot="{ Component }">
+  <RouterView />
-      <transition name="fade" mode="out-in">
-        <component :is="Component" />
-      </transition>
-    </router-view>
-  </AppNaiveUIProvider>
 </template>
+
+<style scoped></style>

src/AppNaiveUIProvider.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import type { GlobalThemeOverrides } from 'naive-ui';
-import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
-import type { FunctionalComponent } from 'vue';
-import { createTextVNode } from 'vue';
-
-const appStore = useAppStore();
-
-// https://www.naiveui.com/zh-CN/light/docs/customize-theme
-const themeOverrides: GlobalThemeOverrides = {
-  common: {},
-};
-
-const ContextHolder: FunctionalComponent = () => {
-  window.$nLoadingBar = useLoadingBar();
-  window.$nModal = useModal();
-  window.$nDialog = useDialog();
-  window.$nMessage = useMessage();
-  window.$nNotification = useNotification();
-  return createTextVNode();
-};
-</script>
-
-<script lang="ts">
-declare global {
-  export interface Window {
-    $nLoadingBar?: import('naive-ui').LoadingBarProviderInst;
-    $nModal?: import('naive-ui').ModalProviderInst;
-    $nDialog?: import('naive-ui').DialogProviderInst;
-    $nMessage?: import('naive-ui').MessageProviderInst;
-    $nNotification?: import('naive-ui').NotificationProviderInst;
-  }
-}
-</script>
-
-<template>
-  <NConfigProvider
-    :locale="zhCN"
-    :date-locale="dateZhCN"
-    :theme-overrides
-    preflight-style-disabled
-    :theme="appStore.isDark ? darkTheme : null"
-    abstract
-  >
-    <n-loading-bar-provider>
-      <n-message-provider>
-        <n-notification-provider>
-          <n-modal-provider>
-            <n-dialog-provider>
-              <slot></slot>
-              <ContextHolder />
-            </n-dialog-provider>
-          </n-modal-provider>
-        </n-notification-provider>
-      </n-message-provider>
-    </n-loading-bar-provider>
-  </NConfigProvider>
-</template>

src/__tests__/App.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import App from '../App.vue'
+
+describe('App', () => {
+  it('mounts renders properly', () => {
+    const wrapper = mount(App)
+    expect(wrapper.text()).toContain('You did it!')
+  })
+})

src/assets/icons/svgs/demo.svg

@@ -1,16 +0,0 @@
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <!-- 中心圆形 -->
-  <circle cx="100" cy="100" r="35" fill="#FDB813"/>
-  
-  <!-- 光芒 -->
-  <g stroke="#FDB813" stroke-width="8" stroke-linecap="round">
-    <line x1="100" y1="30" x2="100" y2="50"/>
-    <line x1="141" y1="41" x2="129" y2="59"/>
-    <line x1="170" y1="100" x2="150" y2="100"/>
-    <line x1="141" y1="159" x2="129" y2="141"/>
-    <line x1="100" y1="170" x2="100" y2="150"/>
-    <line x1="59" y1="159" x2="71" y2="141"/>
-    <line x1="30" y1="100" x2="50" y2="100"/>
-    <line x1="59" y1="41" x2="71" y2="59"/>
-  </g>
-</svg>

src/composables/useMetaLayoutsMenuOptions.tsx

@@ -1,184 +0,0 @@
-import type { MenuInst, MenuOption } from 'naive-ui';
-import { createGetRoutes } from 'virtual:meta-layouts';
-import type { Ref } from 'vue';
-import type { RouteRecordRaw } from 'vue-router';
-import { RouterLink } from 'vue-router';
-import IconMenuRounded from '~icons/material-symbols/menu-rounded';
-
-export function useMetaLayoutsNMenuOptions({ menuInstRef }: { menuInstRef: Ref<MenuInst | null> }) {
-  const router = useRouter();
-
-  const { t, te } = routeI18nInstance.global;
-
-  // 获取路由表但是不包含布局路由
-  const routes = createGetRoutes(router)();
-
-  const options = computed(() => convertRoutesToNMenuOptions(routes));
-  const selectedKey = ref('');
-
-  watch(
-    () => router.currentRoute.value,
-    (route) => {
-      // 优先使用 activeMenuName（通过路由名称解析为路径），如果没有则使用当前路径
-      const activeMenuPath = route.meta.activeMenuName
-        ? router.resolve({ name: route.meta.activeMenuName }).path
-        : route.path;
-
-      selectedKey.value = activeMenuPath;
-      menuInstRef.value?.showOption(activeMenuPath); // 展开菜单，确保设定的元素被显示
-    },
-    { immediate: true },
-  );
-
-  // 路由转换为菜单树的辅助函数
-  function convertRoutesToNMenuOptions(routes: Readonly<RouteRecordRaw[]>): MenuOption[] {
-    const orderMaxLength = routes.reduce((max, route) => {
-      const order = route.meta?.order;
-      if (order !== undefined) {
-        const orderLength = String(order).length;
-        return orderLength > max ? orderLength : max;
-      }
-      return max;
-    }, 0);
-
-    const menuMap = new Map<string, MenuOption>();
-    const rootMenus: MenuOption[] = [];
-
-    // 过滤路由
-    const validRoutes = routes.filter((route) => {
-      // 过滤掉不需要显示的路由
-      if (route.meta?.hideInMenu === true || route.meta?.layout === false) {
-        return false;
-      }
-      // 过滤掉通配符路径
-      if (route.path.includes('*')) {
-        return false;
-      }
-      // 根据环境变量判断是否显示 /demos 开头的路由
-      if (import.meta.env.VITE_APP_MENU_SHOW_DEMOS !== 'true' && route.path.startsWith('/demos')) {
-        return false;
-      }
-      return true;
-    });
-
-    // 排序路由：先按路径深度分组，再按 order 排序
-    const sortedRoutes = validRoutes.slice().sort((a: RouteRecordRaw, b: RouteRecordRaw) => {
-      const pathA = a.path;
-      const pathB = b.path;
-
-      // 1. 首先按路径深度排序（确保父路由在子路由之前）
-      const depthA = pathA.split('/').filter(Boolean).length;
-      const depthB = pathB.split('/').filter(Boolean).length;
-      if (depthA !== depthB) {
-        return depthA - depthB;
-      }
-
-      // 2. 获取父路径，判断是否为同一父级下的路由
-      const segmentsA = pathA.split('/').filter(Boolean);
-      const segmentsB = pathB.split('/').filter(Boolean);
-      const parentA = segmentsA.length > 1 ? `/${segmentsA.slice(0, -1).join('/')}` : '/';
-      const parentB = segmentsB.length > 1 ? `/${segmentsB.slice(0, -1).join('/')}` : '/';
-
-      // 如果父路径不同，按父路径字母顺序排序
-      if (parentA !== parentB) {
-        return parentA.localeCompare(parentB);
-      }
-
-      // 3. 同一父级下的路由，按 order 排序
-      const orderA = a.meta?.order;
-      const orderB = b.meta?.order;
-      const hasOrderA = typeof orderA === 'number';
-      const hasOrderB = typeof orderB === 'number';
-
-      // 有 order 的排在没有 order 的前面
-      if (hasOrderA && !hasOrderB) return -1;
-      if (!hasOrderA && hasOrderB) return 1;
-
-      // 都有 order 时，按 order 数值升序排序
-      if (hasOrderA && hasOrderB) {
-        const diff = (orderA as number) - (orderB as number);
-        if (diff !== 0) return diff;
-      }
-
-      // order 相同或都没有 order，按路径名字母顺序排序
-      return pathA.localeCompare(pathB);
-    });
-
-    // 构建菜单树
-    for (const route of sortedRoutes) {
-      const pathSegments = route.path.split('/').filter(Boolean);
-      const routeName = route.name as string;
-
-      let text = te(routeName) ? t(routeName) : routeName;
-      if (import.meta.env.VITE_APP_MENU_SHOW_ORDER === 'true' && route.meta?.order) {
-        const order = String(route.meta.order).padStart(orderMaxLength, '0');
-        text = `${order}. ${text}`;
-      }
-
-      const menuOption: MenuOption = {
-        label: () =>
-          route.meta?.link === false ? text : <RouterLink to={route}>{text}</RouterLink>,
-        key: route.path,
-        icon: () => <IconMenuRounded style="width: 1em; height: 1em;" />,
-      };
-
-      // 如果是根路径或只有一级路径，直接添加到根菜单
-      if (pathSegments.length === 0 || pathSegments.length === 1) {
-        rootMenus.push(menuOption);
-        menuMap.set(route.path, menuOption);
-      } else {
-        // 多级路径，需要创建或找到父菜单
-        let currentPath = '';
-        for (let i = 0; i < pathSegments.length - 1; i++) {
-          currentPath += `/${pathSegments[i]}`;
-        }
-
-        // 将当前菜单项添加到父菜单
-        const parentPath = currentPath;
-        const parent = menuMap.get(parentPath);
-        if (parent) {
-          if (!parent.children) {
-            parent.children = [];
-          }
-          parent.children.push(menuOption);
-        } else {
-          consola.warn(`未找到父菜单项: ${parentPath}，无法将子菜单项添加到其下。`);
-        }
-
-        menuMap.set(route.path, menuOption);
-      }
-    }
-
-    // 添加调试日志
-    if (import.meta.env.DEV) {
-      console.debug(
-        '排序后的路由:',
-        sortedRoutes.map((route) => ({
-          path: route.path,
-          name: route.name,
-          order: route.meta?.order,
-        })),
-      );
-    }
-
-    return rootMenus;
-  }
-
-  if (import.meta.env.DEV) {
-    console.debug(
-      '原始路由:',
-      routes.map((route) => ({
-        path: route.path,
-        name: route.name,
-        order: route.meta?.order,
-      })),
-    );
-    console.debug('转换后的菜单:', options.value);
-  }
-
-  return {
-    options,
-    selectedKey,
-    // expanded-keys // 展开的子菜单标识符数组，如果设定了，菜单的展开将会进入受控状态，default-expanded-keys 不会生效
-  };
-}

src/layouts/base-layout/base-layout-header/base-layout-header.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import LanguageSwitchButton from './components/LanguageSwitchButton.vue';
-import ThemeSwitchButton from './components/ThemeSwitchButton.vue';
-import ToggleSiderButton from './components/ToggleSiderButton.vue';
-import UserDropdown from './components/UserDropdown.vue';
-</script>
-
-<template>
-  <div class="h-full flex items-center justify-between px-12px shadow-header dark:shadow-gray-700">
-    <ToggleSiderButton />
-
-    <div class="flex items-center">
-      <LanguageSwitchButton />
-      <ThemeSwitchButton />
-      <UserDropdown />
-    </div>
-  </div>
-</template>

src/layouts/base-layout/base-layout-header/components/LanguageSwitchButton.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { DropdownOption } from 'naive-ui';
-
-const { locale, availableLocales } = useI18n({ useScope: 'global' });
-
-const languageLabels: Record<string, string> = {
-  'en-US': 'English',
-  'zh-CN': '简体中文',
-};
-
-const options = computed<DropdownOption[]>(() =>
-  availableLocales.map((lang) => ({
-    label: languageLabels[lang] || lang,
-    key: lang,
-    disabled: locale.value === lang,
-  })),
-);
-
-function handleSelect(key: string) {
-  locale.value = key;
-}
-</script>
-
-<template>
-  <NDropdown trigger="hover" placement="bottom-end" :options="options" @select="handleSelect">
-    <NButton quaternary class="flex items-center gap-1">
-      <template #icon>
-        <icon-clarity-language-line w-4.5 h-4.5 />
-      </template>
-      <span>{{ languageLabels[locale] }}</span>
-    </NButton>
-  </NDropdown>
-</template>

src/layouts/base-layout/base-layout-header/components/ThemeSwitchButton.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-const appStore = useAppStore();
-
-const themeLabels: Record<AppThemeMode, string> = {
-  light: '浅色',
-  dark: '深色',
-  auto: '跟随系统',
-};
-</script>
-
-<template>
-  <NTooltip :disabled="appStore.isMobile" placement="bottom-end">
-    {{ themeLabels[appStore.themeMode] }}
-    <template #trigger>
-      <NButton quaternary @click="appStore.cycleTheme()">
-        <icon-line-md-sunny-filled-loop-to-moon-filled-loop-transition
-          v-if="appStore.themeMode === 'light'"
-          w-4.5
-          h-4.5
-        />
-        <icon-line-md-moon-filled-to-sunny-filled-loop-transition
-          v-else-if="appStore.themeMode === 'dark'"
-          w-4.5
-          h-4.5
-        />
-        <icon-line-md-computer v-else w-4.5 h-4.5 />
-      </NButton>
-    </template>
-  </NTooltip>
-</template>

src/layouts/base-layout/base-layout-header/components/ToggleSiderButton.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const buttonRef = useTemplateRef('buttonRef');
-const appStore = useAppStore();
-
-function toggleCollapsed() {
-  // https://github.com/tusen-ai/naive-ui/issues/3688
-  // hover style 鼠标移出就会消失 如果是点击 button 会聚焦需要失去焦点才会恢复
-  buttonRef.value?.$el.blur();
-  appStore.toggleSidebar();
-}
-</script>
-
-<template>
-  <NTooltip :disabled="appStore.isMobile" placement="bottom-start">
-    {{ appStore.sidebarCollapsed ? '展开菜单' : '收起菜单' }}
-    <template #trigger>
-      <NButton ref="buttonRef" quaternary @click="toggleCollapsed">
-        <icon-line-md-menu-fold-right v-if="appStore.sidebarCollapsed" w-4.5 h-4.5 />
-        <icon-line-md-menu-fold-left v-else w-4.5 h-4.5 />
-      </NButton>
-    </template>
-  </NTooltip>
-</template>

src/layouts/base-layout/base-layout-header/components/UserDropdown.vue

@@ -1,45 +0,0 @@
-<script setup lang="tsx">
-const router = useRouter();
-const userStore = useAuthStore();
-const dialog = useDialog();
-
-const options = computed(() => [
-  {
-    label: userStore.userInfo?.nickname || userStore.userInfo?.username || '用户',
-    key: 'user',
-    disabled: true,
-  },
-  {
-    type: 'divider',
-    key: 'd1',
-  },
-  {
-    label: '退出登录',
-    key: 'logout',
-    icon: () => <icon-material-symbols-logout class="w-4 h-4" />,
-  },
-]);
-
-function handleSelect(key: string) {
-  if (key === 'logout') {
-    dialog.warning({
-      title: '退出登录',
-      content: '确定要退出登录吗?',
-      positiveText: '确定',
-      negativeText: '取消',
-      onPositiveClick: () => {
-        userStore.clearToken('用户退出登录');
-        router.push('/login');
-      },
-    });
-  }
-}
-</script>
-
-<template>
-  <NDropdown :options="options" placement="bottom-end" @select="handleSelect">
-    <NButton quaternary circle>
-      <icon-material-symbols-account-circle w-5 h-5 />
-    </NButton>
-  </NDropdown>
-</template>

src/layouts/base-layout/base-layout-sider.vue

@@ -1,27 +0,0 @@
-<script setup lang="tsx">
-import { useAppStore } from '@/stores/app-store-auto-imports';
-
-const menuInstRef = useTemplateRef('menuInstRef');
-const { options, selectedKey } = useMetaLayoutsNMenuOptions({
-  menuInstRef,
-});
-
-const appStore = useAppStore();
-</script>
-
-<template>
-  <!-- @update:value="handleMenuUpdate" -->
-  <NMenu
-    ref="menuInstRef"
-    v-model:value="selectedKey"
-    mode="vertical"
-    :collapsed="appStore.sidebarCollapsed"
-    :collapsed-width="64"
-    :icon-size="20"
-    :collapsed-icon-size="24"
-    :options="options"
-    :inverted="false"
-    :root-indent="32"
-    :indent="32"
-  />
-</template>

src/layouts/base-layout/the-base-layout.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { AdminLayout } from '@sa/materials';
-import BaseLayoutHeader from './base-layout-header/base-layout-header.vue';
-import BaseLayoutSider from './base-layout-sider.vue';
-
-const appStore = useAppStore();
-</script>
-
-<template>
-  <AdminLayout
-    v-model:sider-collapse="appStore.sidebarCollapsed"
-    mode="horizontal"
-    :footer-visible="!false"
-    :tab-visible="!false"
-    scroll-mode="content"
-    :is-mobile="appStore.isMobile"
-  >
-    <template #header>
-      <BaseLayoutHeader />
-    </template>
-    <template #tab>
-      <div
-        class="bg-green-100/28 dark:bg-green-900/28 text-green-900 dark:text-green-100 flex h-full items-center justify-center"
-      >
-        GlobalTab
-      </div>
-    </template>
-    <template #sider>
-      <BaseLayoutSider />
-    </template>
-    <!-- <div>GlobalContent</div> -->
-    <router-view v-slot="{ Component }">
-      <transition name="fade" mode="out-in">
-        <component :is="Component" />
-      </transition>
-    </router-view>
-    <!-- <div>ThemeDrawer</div> -->
-    <template #footer>
-      <div
-        class="bg-red-100/28 dark:bg-red-900/28 text-red-900 dark:text-red-100 h-full flex items-center justify-center"
-      >
-        GlobalFooter
-      </div>
-    </template>
-  </AdminLayout>
-</template>
-
-<style lang="scss">
-#__SCROLL_EL_ID__ {
-  @include scrollbar;
-}
-</style>

src/layouts/naive-ui/AppLayout.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="app-layout">
+    <div>AppLayout</div>
+    <router-view />
+  </div>
+</template>
+
+<style scoped></style>

src/locales-utils/i18n-auto-imports.ts

@@ -1,71 +0,0 @@
-/* https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#static-bundle-importing
- * All i18n resources specified in the plugin `include` option can be loaded
- * at once using the import syntax
- */
-import { router } from '@/plugins/00.router-plugin';
-import messages from '@intlify/unplugin-vue-i18n/messages';
-import { createGetRoutes } from 'virtual:meta-layouts';
-
-import { createI18n } from 'vue-i18n';
-
-const locale = useLocalStorage<string>('app-locale', navigator.language);
-watchEffect(() => {
-  window.document.documentElement.setAttribute('lang', locale.value);
-});
-
-// https://vue-i18n.intlify.dev/guide/essentials/started.html#registering-the-i18n-plugin
-export const i18nInstance = createI18n({
-  legacy: false, // you must set `false`, to use Composition API
-  locale: locale.value,
-  fallbackRoot: false,
-  // flatJson: true,
-  missing: (locale, key /* , instance, type */) => {
-    consola.warn(`缺少国际化内容: locale='${locale}', key='${key}'`);
-    return `[${key}]`;
-  },
-  missingWarn: !true,
-  fallbackWarn: !true,
-  messages,
-});
-
-export const routeI18nInstance = createI18n({
-  legacy: false, // you must set `false`, to use Composition API
-  locale: locale.value,
-  inheritLocale: true,
-  useScope: 'local',
-  missing: (locale, key) => {
-    consola.warn(`菜单翻译缺失: locale=${locale}, key=${key}`);
-    return key;
-  },
-  fallbackRoot: true,
-  messages: i18nRouteMessages,
-});
-
-watchEffect(
-  () => {
-    locale.value = i18nInstance.global.locale.value;
-  },
-  { flush: 'sync' },
-);
-
-watch(
-  () => i18nInstance.global.locale.value,
-  () => {
-    routeI18nInstance.global.locale.value = i18nInstance.global.locale.value;
-
-    const routes = createGetRoutes(router)(); // 获取路由表但是不包含布局路由
-
-    routes.forEach((route) => {
-      const { t, te } = routeI18nInstance.global;
-
-      if (router.currentRoute.value.name) {
-        router.currentRoute.value.meta.title = t(router.currentRoute.value.name as string);
-      }
-
-      route.meta = route.meta || {};
-      const routeName = route.name as string;
-      route.meta.title = te(routeName) ? t(routeName) : routeName;
-    });
-  },
-  { immediate: true, flush: 'sync' },
-);

src/locales-utils/route-messages/README.md

@@ -1,66 +0,0 @@
-# route-messages
-
-此目录存放专门用于**路由名称**的国际化（i18n）消息。这些消息通过一套自定义的编译时安全机制，为应用的导航菜单提供标题。
-
-## 解决什么问题？
-
-`unplugin-vue-router` 的 `definePage()` 宏在编译时执行，无法访问 Vue `<script setup>` 作用域中的运行时变量（如 `t()` 函数）。这使得在路由元信息（`meta`）中直接定义多语言标题变得不可能。
-
-## 解决方案：自定义的编译时安全机制
-
-我们采用一种**约定优于配置**的策略，并利用 TypeScript 进行编译时检查，以确保所有菜单标题都已定义。
-
-**工作流程：**
-
-1.  **`RouteNamedMap` 的生成**：`unplugin-vue-router` 会扫描你的页面组件，并自动生成一个名为 `RouteNamedMap` 的 TypeScript 类型，该类型包含了项目中所有具名路由的 `name`。
-
-2.  **自定义全局类型**：我们定义了一个全局类型 `PageTitleLocalizations`：
-
-    ```typescript
-    declare global {
-      type PageTitleLocalizations = Record<keyof RouteNamedMap, string>;
-    }
-    ```
-
-    这个自定义类型创建了一个**契约**：任何满足此类型的对象，都**必须**为 `RouteNamedMap` 中的每一个路由名称提供一个字符串类型的键值对。
-
-3.  **编译时检查**：此目录下的每个语言环境文件（如 `en-US.ts`）都必须使用 `satisfies PageTitleLocalizations` 来进行类型断言。
-
-    ```typescript
-    // ./en-US.ts
-    export default { ... } satisfies PageTitleLocalizations;
-    ```
-
-    这个操作会触发 TypeScript 在**编译时**进行检查。如果你新增了一个具名路由但忘记在此处添加翻译，**TypeScript 编译将会失败**，并明确提示你缺少的键。
-
-4.  **菜单生成**：在运行时，`@/composables/useMetaLayoutsMenuOptions.tsx` 会获取当前路由的 `name`，并使用它作为键（`t(routeName)`）来查找并显示菜单标题。由于有编译时检查，我们可以确信翻译始终存在。
-
-### 带来的好处
-
-- **杜绝遗漏**：从根本上解决了菜单项标题缺失或显示为原始键的问题。
-- **关注点分离**：路由定义只关心路由结构，显示文本则集中在此处管理。
-
-### 开发者实践指南
-
-1.  **理解路由命名规则**：
-    `unplugin-vue-router` 会根据页面组件的**文件路径**自动生成 `PascalCase` 格式的路由 `name`。
-    - **示例**：
-      - 文件路径：`src/pages/demos/api-demo.page.vue`
-      - 自动生成的路由 `name`：`DemosApiDemo`
-
-2.  **添加对应的翻译**：
-    使用上一步中自动生成的 `name` 作为键，在此目录的每个语言文件中添加翻译。
-
-    ```ts
-    // ./zh-CN.ts
-    export default {
-      // ... 其他翻译
-      DemosApiDemo: 'API 演示',
-    } satisfies PageTitleLocalizations;
-
-    // ./en-US.ts
-    export default {
-      // ... 其他翻译
-      DemosApiDemo: 'API Demo',
-    } satisfies PageTitleLocalizations;
-    ```

src/locales-utils/route-messages/en-US.ts

@@ -1,22 +0,0 @@
-/*eslint sort-keys: "error"*/
-/**
- * 启用 sort-keys 规则以强制对象键按字母顺序排序
- * 原因：
- * 1. 减少多人协作时的合并冲突
- * 2. 保持代码一致性，提高可维护性
- */
-
-export default {
-  $Path: '$Path',
-  Demos: 'Demos',
-  DemosApiDemo: 'API Demo',
-  DemosCounterDemo: 'Counter Demo',
-  DemosCreate: 'Create Demo',
-  DemosI18nDemo: 'i18n Demo',
-  DemosNaiveUiDemo: 'Naive UI Demo',
-  DemosPrimevueDemo: 'PrimeVue Demo',
-  DemosWebsocketDemo: 'WebSocket Demo',
-  Home: 'Home',
-  Login: 'Login',
-  Root: 'Index',
-} satisfies PageTitleLocalizations;

src/locales-utils/route-messages/route-messages-auto-imports.ts

@@ -1,17 +0,0 @@
-import type { I18nOptions } from 'vue-i18n';
-
-const modules = import.meta.glob(['./*.ts', '!./route-messages-auto-imports'], {
-  eager: true /* true 为同步，false 为异步 */,
-  import: 'default',
-});
-
-type MessageType = Record<string, string>;
-
-export const i18nRouteMessages: I18nOptions['messages'] = Object.entries(modules).reduce(
-  (messages, [path, mod]) => {
-    const locale = path.replace(/(\.\/|\.ts)/g, '');
-    messages[locale] = mod as MessageType;
-    return messages;
-  },
-  {} as Record<string, MessageType>,
-);

src/locales-utils/route-messages/zh-CN.ts

@@ -1,22 +0,0 @@
-/*eslint sort-keys: "error"*/
-/**
- * 启用 sort-keys 规则以强制对象键按字母顺序排序
- * 原因：
- * 1. 减少多人协作时的合并冲突
- * 2. 保持代码一致性，提高可维护性
- */
-
-export default {
-  $Path: '$Path',
-  Demos: '示例演示',
-  DemosApiDemo: 'API 调用示例',
-  DemosCounterDemo: '点击计数器',
-  DemosCreate: '创建示例',
-  DemosI18nDemo: '国际化示例',
-  DemosNaiveUiDemo: 'Naive UI 组件示例',
-  DemosPrimevueDemo: 'PrimeVue 组件示例',
-  DemosWebsocketDemo: 'WebSocket 示例',
-  Home: '首页',
-  Login: '登录',
-  Root: '根 (Gēn)',
-} satisfies PageTitleLocalizations;

src/locales/demo/en-US.json

@@ -1,10 +0,0 @@
-{
-  "page": {
-    "i18n-demo": {
-      "change-language": "Change Language",
-      "current-language": "Current Language",
-      "hello": "Hello, {name}!",
-      "title": "Vue I18n Demo"
-    }
-  }
-}

src/locales/demo/zh-CN.json

@@ -1,10 +0,0 @@
-{
-  "page": {
-    "i18n-demo": {
-      "change-language": "切换语言",
-      "current-language": "当前语言",
-      "hello": "你好, {name}！",
-      "title": "Vue I18n 示例"
-    }
-  }
-}

src/locales/en-US.json

@@ -1 +0,0 @@
-{}

src/locales/zh-CN.json

@@ -1 +0,0 @@
-{}

src/main.ts

@@ -1,13 +1,12 @@
-import './styles/index.ts';
+import './styles'
 
-import { LogLevels } from 'consola';
+// import { LogLevels } from 'consola';
-import App from './App.vue';
+// consola.level = LogLevels.verbose;
-import { setupPlugins } from './plugins';
 
-consola.level = LogLevels.verbose;
+import App from './App.vue'
 
-const app = createApp(App);
+const autoInstallModules = import.meta.glob('./plugins/!(index).ts', { eager: true })
-setupPlugins(app);
 
-await new Promise((resolve) => setTimeout(resolve, 280));
+import { setupPlugins } from './plugins'
-app.mount('#app');
+
+setupPlugins(createApp(App), autoInstallModules).mount('#app')

src/pages/Home.page.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-definePage({ meta: { hideInMenu: false } });
-</script>
-
-<template>
-  <div>Home Page</div>
-</template>

src/pages/Login.page.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-definePage({ meta: { ignoreAuth: true, layout: false } });
-
-const router = useRouter();
-const userStore = useAuthStore();
-const message = useMessage();
-
-const formValue = ref({
-  username: 'admin',
-  password: 'admin',
-});
-
-const loading = ref(false);
-
-async function handleLogin() {
-  if (!formValue.value.username || !formValue.value.password) {
-    message.warning('请输入用户名和密码');
-    return;
-  }
-
-  loading.value = true;
-  try {
-    const result = await userStore.login(formValue.value.username, formValue.value.password);
-    if (result.success) {
-      message.success('登录成功');
-      router.push('/');
-    } else {
-      message.error(result.message || '登录失败');
-    }
-  } catch {
-    message.error('登录异常');
-  } finally {
-    loading.value = false;
-  }
-}
-</script>
-
-<template>
-  <div class="login-page">
-    <NCard class="login-card" title="用户登录">
-      <NForm :model="formValue" label-placement="left" label-width="80">
-        <NFormItem label="用户名" path="username">
-          <NInput
-            v-model:value="formValue.username"
-            placeholder="请输入用户名"
-            @keyup.enter="handleLogin"
-          />
-        </NFormItem>
-        <NFormItem label="密码" path="password">
-          <NInput
-            v-model:value="formValue.password"
-            type="password"
-            show-password-on="click"
-            placeholder="请输入密码"
-            @keyup.enter="handleLogin"
-          />
-        </NFormItem>
-        <NFormItem :show-label="false">
-          <NButton type="primary" block :loading="loading" @click="handleLogin"> 登录 </NButton>
-        </NFormItem>
-      </NForm>
-      <div class="login-hint">
-        <NText depth="3">提示：用户名和密码均为 admin</NText>
-      </div>
-    </NCard>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.login-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.login-card {
-  width: 400px;
-  max-width: 90%;
-}
-
-.login-hint {
-  margin-top: 16px;
-  text-align: center;
-}
-</style>

src/pages/[...path].page.vue

@@ -1,29 +1,11 @@
 <script lang="ts" setup>
-defineProps<{ path: string }>();
+defineProps<{ path: string }>()
-
-declare global {
-  interface Window {
-    stack?: ReturnType<typeof createStackGuard>;
-  }
-}
-
-const stack = window?.stack;
-const canGoBack = stack && stack.length > 1;
-const router = useRouter();
-function handleBack() {
-  if (canGoBack) {
-    router.back();
-  } else {
-    router.push('/');
-  }
-}
 </script>
-
 <template>
   <main flex-1 class="flex flex-col items-center justify-center h-full space-y-4">
     <h1>Not Found</h1>
     <p>{{ path }} does not exist.</p>
-    <Button @click="handleBack">{{ canGoBack ? 'Back' : 'Home' }}</Button>
+    <Button @click="$router.back()">Back</Button>
   </main>
 </template>
 

src/pages/demos/api-demo.page.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-definePage({
-  meta: {},
-});
-
-// ========== API 模块 ==========
-const apiResult = ref<string>('');
-const loading = ref(false);
-
-const callApi = async () => {
-  loading.value = true;
-  try {
-    const response = await fetch('/api/');
-    const data = await response.json();
-    apiResult.value = JSON.stringify(data, null, 2);
-  } catch (error) {
-    apiResult.value = `Error: ${error}`;
-  } finally {
-    loading.value = false;
-  }
-};
-</script>
-
-<template>
-  <div
-    class="transition-all duration-500 p-2 sm:p-3 bg-gray-50 dark:bg-gray-900 via-blue-50 dark:via-slate-800 to-slate-100 dark:to-gray-900 bg-gradient-to-br"
-  >
-    <div class="max-w-5xl mx-auto">
-      <!-- API 调用示例 -->
-      <div
-        class="backdrop-blur-sm rounded-2xl shadow-lg border p-4 sm:p-5 hover:shadow-2xl hover:scale-[1.02] transition-all duration-500 cursor-pointer group bg-white dark:bg-gray-800 border-white dark:border-gray-700 hover:bg-white dark:hover:bg-gray-800"
-      >
-        <div class="flex items-center mb-3">
-          <div
-            class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mr-2"
-          >
-            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
-          </div>
-          <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">API 调用示例</h2>
-        </div>
-
-        <button
-          :disabled="loading"
-          :aria-label="loading ? '正在调用API' : '调用API接口'"
-          class="w-full bg-gradient-to-br from-blue-500 via-blue-600 to-purple-600 text-white font-semibold py-3 px-4 rounded-xl hover:from-blue-600 hover:via-blue-700 hover:to-purple-700 transition-all duration-500 disabled:opacity-50 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 hover:scale-[1.02] text-sm"
-          @click="callApi"
-        >
-          <span v-if="loading" class="flex items-center justify-center">
-            <svg
-              class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                class="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                stroke-width="4"
-              />
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              />
-            </svg>
-            调用中...
-          </span>
-          <span v-else>调用 API</span>
-        </button>
-
-        <div
-          v-if="apiResult"
-          class="mt-4 rounded-lg p-4 border bg-gray-50 dark:bg-gray-800 dark:from-gray-800 dark:to-gray-700 border-gray-200 dark:border-gray-600 bg-gradient-to-r from-gray-50 dark:from-gray-800 to-gray-100 dark:to-gray-700"
-        >
-          <h3 class="font-semibold mb-2 flex items-center text-sm text-gray-700 dark:text-gray-200">
-            <svg
-              class="w-4 h-4 mr-2 text-green-500"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            响应结果:
-          </h3>
-          <pre
-            class="text-sm overflow-x-auto p-3 rounded border text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-600"
-            >{{ apiResult }}</pre
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

src/pages/demos/counter-demo.page.vue

@@ -1,176 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { NButton } from 'naive-ui';
-
-definePage({
-  meta: {},
-});
-
-// ========== 计数器模块 ==========
-const clickCount = ref(0);
-
-const incrementCount = () => {
-  clickCount.value++;
-};
-
-const resetCount = () => {
-  clickCount.value = 0;
-};
-</script>
-
-<template>
-  <div
-    class="transition-all duration-500 p-2 sm:p-3 bg-gray-50 dark:bg-gray-900 via-blue-50 dark:via-slate-800 to-slate-100 dark:to-gray-900 bg-gradient-to-br"
-  >
-    <div class="max-w-5xl mx-auto">
-      <!-- 计数器示例 -->
-      <div
-        class="mt-4 sm:mt-6 backdrop-blur-sm rounded-2xl shadow-lg border p-4 sm:p-5 bg-white dark:bg-gray-800 border-white dark:border-gray-700 hover:shadow-2xl hover:scale-[1.02] transition-all duration-500"
-      >
-        <div class="mb-4">
-          <div class="flex items-center mb-2">
-            <div
-              class="w-8 h-8 bg-gradient-to-r from-orange-500 to-red-600 rounded-lg flex items-center justify-center mr-2"
-            >
-              <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11"
-                />
-              </svg>
-            </div>
-            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">点击计数器</h2>
-          </div>
-
-          <!-- 说明文字 -->
-          <div
-            class="text-sm text-gray-600 dark:text-gray-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3"
-          >
-            <div class="flex items-start">
-              <svg
-                class="w-4 h-4 mr-2 mt-0.5 text-blue-500 flex-shrink-0"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <div>
-                <span class="font-semibold text-blue-700 dark:text-blue-300">测试说明：</span>
-                <span class="text-gray-700 dark:text-gray-300"
-                  >用于测试移动端连点和页面缩放对按钮点击事件的影响</span
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex flex-col items-center justify-center space-y-4">
-          <!-- 计数显示 -->
-          <div
-            class="w-full p-6 rounded-xl bg-gradient-to-br from-orange-50 to-red-50 dark:from-orange-900/30 dark:to-red-900/30 border-2 border-orange-200 dark:border-orange-700"
-          >
-            <div class="text-center">
-              <div class="text-sm text-gray-600 dark:text-gray-300 mb-2">当前点击次数</div>
-              <div
-                class="text-6xl font-bold bg-gradient-to-r from-orange-500 to-red-600 bg-clip-text text-transparent"
-              >
-                {{ clickCount }}
-              </div>
-            </div>
-          </div>
-
-          <!-- 操作按钮 -->
-          <div class="w-full flex flex-col gap-3">
-            <!-- 原生按钮 (带 touch 事件) -->
-            <button
-              class="w-full bg-gradient-to-br from-orange-500 via-orange-600 to-red-600 text-white font-semibold py-4 px-6 rounded-xl hover:from-orange-600 hover:via-orange-700 hover:to-red-700 transition-all duration-500 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 hover:scale-[1.02] text-lg"
-              @touchstart="() => {}"
-              @touchend="() => {}"
-              @click="incrementCount"
-            >
-              <span class="flex items-center justify-center">
-                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 4v16m8-8H4"
-                  />
-                </svg>
-                点击 +1 (带 touch)
-              </span>
-            </button>
-
-            <!-- 原生按钮 (无 touch 事件) -->
-            <button
-              class="w-full bg-gradient-to-br from-blue-500 via-blue-600 to-purple-600 text-white font-semibold py-4 px-6 rounded-xl hover:from-blue-600 hover:via-blue-700 hover:to-purple-700 transition-all duration-500 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 hover:scale-[1.02] text-lg"
-              @click="incrementCount"
-            >
-              <span class="flex items-center justify-center">
-                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 4v16m8-8H4"
-                  />
-                </svg>
-                点击 +1 (无 touch)
-              </span>
-            </button>
-
-            <!-- Naive UI 按钮 -->
-            <n-button
-              type="warning"
-              size="large"
-              block
-              strong
-              secondary
-              class="text-lg"
-              @click="incrementCount"
-            >
-              <template #icon>
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 4v16m8-8H4"
-                  />
-                </svg>
-              </template>
-              点击 +1 (Naive UI)
-            </n-button>
-
-            <!-- 重置按钮 -->
-            <button
-              :disabled="clickCount === 0"
-              class="w-full bg-gradient-to-br from-gray-500 via-gray-600 to-gray-700 text-white font-semibold py-3 px-6 rounded-xl hover:from-gray-600 hover:via-gray-700 hover:to-gray-800 transition-all duration-500 disabled:opacity-50 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 hover:scale-[1.02]"
-              @click="resetCount"
-            >
-              <span class="flex items-center justify-center">
-                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                  />
-                </svg>
-                重置计数器
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

src/pages/demos/create.page.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-definePage({
-  meta: {
-    hideInMenu: true,
-    activeMenuName: 'Demos',
-  },
-});
-</script>
-
-<template>
-  <div></div>
-</template>

src/pages/demos/i18n-demo.page.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-definePage({ meta: { order: 1 } });
-const { t, locale } = useI18n({});
-
-function setLocale(newLocale: 'en-US' | 'zh-CN') {
-  i18nInstance.global.locale.value = newLocale;
-}
-</script>
-
-<template>
-  <div class="p-4">
-    <n-h1>{{ t('page.i18n-demo.title') }}</n-h1>
-
-    <n-card :title="t('page.i18n-demo.change-language')">
-      <n-p>
-        {{ t('page.i18n-demo.current-language') }}:
-        <span class="font-bold">{{ locale }}</span>
-      </n-p>
-
-      <n-p>
-        {{ t('page.i18n-demo.hello', { name: 'Kilo' }) }}
-      </n-p>
-
-      <n-p> $route.meta: {{ $route.meta }} </n-p>
-
-      <n-space>
-        <n-button type="primary" @click="setLocale('en-US')"> English </n-button>
-        <n-button type="success" @click="setLocale('zh-CN')"> 简体中文 </n-button>
-      </n-space>
-    </n-card>
-  </div>
-</template>

src/pages/demos/index.page.vue

@@ -1,31 +0,0 @@
-<script setup lang="tsx">
-import hljs from 'highlight.js/lib/core';
-import json from 'highlight.js/lib/languages/json';
-import type { FunctionalComponent } from 'vue';
-
-hljs.registerLanguage('json', json);
-
-definePage({ meta: { link: true } });
-const FComponent: FunctionalComponent<{ prop: string }> = (props /* context */) => (
-  <>
-    <NBlockquote>
-      函数式组件文档:
-      <a
-        class="text-blue-500 hover:text-blue-600 transition-colors"
-        href="https://cn.vuejs.org/guide/extras/render-function#typing-functional-components"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        Render Function & JSX
-      </a>
-    </NBlockquote>
-    <p class="my-4">这是一个函数式组件，它接收到的 prop 值为：</p>
-    <NCode code={JSON.stringify(props, null, 2)} language="json" hljs={hljs} />
-  </>
-);
-</script>
-<template>
-  <NCard title="函数式组件（TSX）示例">
-    <FComponent prop="some-prop-value" />
-  </NCard>
-</template>

src/pages/demos/naive-ui-demo/index.page.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import type { MessageType } from 'naive-ui';
-import { useDialog, useMessage } from 'naive-ui';
-import UseSafeNForm from './use-safe-n-form.vue';
-
-definePage({ meta: {} });
-
-const message = useMessage();
-const dialog = useDialog();
-
-const messageTypes = ['info', 'success', 'warning', 'error', 'loading'] satisfies MessageType[];
-const dialogTypes = ['info', 'success', 'warning', 'error'] as const;
-
-const openAllMessages = () => {
-  messageTypes.forEach((type, index) => {
-    setTimeout(() => {
-      message[type](`${index + 1}. 消息内容`, {
-        duration: 3000,
-        closable: true,
-      });
-    }, index * 500);
-  });
-};
-
-const openDialog = (type: (typeof dialogTypes)[number]) => {
-  dialog[type]({
-    title: `${type.charAt(0).toUpperCase() + type.slice(1)} 弹窗`,
-    content: '这是一个命令式 API 创建的弹窗示例。',
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: () => {
-      message.success('点击了确定');
-    },
-    onNegativeClick: () => {
-      message.error('点击了取消');
-    },
-  });
-};
-
-const openModal = () => {
-  window.$nModal!.create({
-    title: '命令式 Modal 示例',
-    content: '这是一个命令式 API 创建的 Modal 示例，使用 preset="dialog"。',
-    preset: 'dialog',
-    onPositiveClick: () => {
-      message.success('点击了确定');
-    },
-    onNegativeClick: () => {
-      message.error('点击了取消');
-    },
-    positiveText: '确定',
-    negativeText: '取消',
-  });
-};
-</script>
-
-<template>
-  <div class="naive-ui-demo-page">
-    <NCard>
-      <template #header>Naive UI 组件演示</template>
-      <NAlert title="信息" type="info" :bordered="false">
-        演示 Naive UI 各种组件的使用方法和功能特性
-      </NAlert>
-      <n-card title="SafeNForm" mt-4>
-        <UseSafeNForm />
-      </n-card>
-      <NCard title="Message 消息" class="mt-4">
-        <NSpace>
-          <NButton
-            v-for="(type, index) in messageTypes"
-            :key="type"
-            @click="
-              message[type](`${index + 1}. 消息内容`, {
-                duration: 3000,
-                closable: true,
-              })
-            "
-          >
-            {{ `${index + 1}. ${type}` }}
-          </NButton>
-          <NButton @click="openAllMessages"> 一键打开所有 </NButton>
-        </NSpace>
-      </NCard>
-
-      <NCard title="Dialog 弹窗 (命令式 API)" class="mt-4">
-        <NSpace>
-          <NButton v-for="type in dialogTypes" :key="type" @click="openDialog(type)">
-            {{ type }}
-          </NButton>
-        </NSpace>
-      </NCard>
-
-      <NCard title="Modal 弹窗 (命令式 API)" class="mt-4">
-        <NSpace>
-          <NButton @click="openModal"> 打开 Modal </NButton>
-        </NSpace>
-      </NCard>
-    </NCard>
-  </div>
-</template>

src/pages/demos/naive-ui-demo/use-safe-n-form.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-const { formInst, formValue, SafeNForm, SafeNFormItem } = useSafeNForm({
-  initialFormValue: {
-    /* ⚠️:
-      如果没使用`SafeNFormItem`，
-      这里`user`对象没有手动初始化的话，将会报错：
-      `can't access property "name", $setup.formValue.user is undefined`
-    */
-    user: {
-      name: '',
-      age: 0,
-    },
-    phone: '',
-  },
-});
-
-function handleValidateClick() {
-  formInst.value?.validate((errors) => {
-    if (!errors) {
-      window.$nMessage!.success('Valid');
-    } else {
-      console.log(errors);
-      window.$nMessage!.error('Invalid');
-    }
-  });
-}
-</script>
-
-<template>
-  <div border>
-    <pre>formValue: {{ JSON.stringify(formValue, null, 2) }}</pre>
-  </div>
-
-  <SafeNForm inline label-placement="left" label-width="auto" mt-4>
-    <n-form-item
-      label="姓名"
-      path="user.name"
-      :rule="{ required: true, message: '请输入姓名', trigger: ['input'] }"
-    >
-      <n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
-    </n-form-item>
-
-    <SafeNFormItem
-      #default="{ value, setValue }"
-      :rule="{ required: true, message: '请输入姓名', trigger: ['input'] }"
-      label="姓名"
-      path="user.name"
-    >
-      <NInput :value="value" placeholder="SafeNFormItem" @update:value="setValue" />
-    </SafeNFormItem>
-
-    <n-form-item
-      label="电话号码"
-      path="phone"
-      :rule="{ required: true, message: '请输入电话号码', trigger: ['blur'] }"
-    >
-      <n-input v-model:value="formValue.phone" placeholder="电话号码" />
-    </n-form-item>
-
-    <SafeNFormItem
-      label="电话号码"
-      path="phone"
-      :rule="{ required: true, message: '请输入电话号码', trigger: ['blur'] }"
-    >
-      <!-- 如果没有提供插槽，会默认渲染一个`<NInput>` -->
-    </SafeNFormItem>
-
-    <n-form-item>
-      <n-button attr-type="button" @click="handleValidateClick"> 验证 </n-button>
-    </n-form-item>
-  </SafeNForm>
-</template>

src/pages/demos/primevue-demo.page.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import type { ToastMessageOptions } from 'primevue/toast';
-
-definePage({
-  meta: {},
-});
-
-const tostSeverities = [
-  'secondary',
-  'success',
-  'info' /* 默认 */,
-  'warn',
-  'error',
-  'contrast',
-  undefined,
-] satisfies ToastMessageOptions['severity'][];
-
-const openAllToasts = () => {
-  tostSeverities.forEach((severity, index) => {
-    setTimeout(() => {
-      ToastService.add({
-        severity,
-        summary: `severity: ${severity ?? 'default'}`,
-        life: 3000,
-        detail: `${index + 1}. 消息内容`,
-      });
-    }, index * 500);
-  });
-};
-</script>
-
-<template>
-  <div class="prime-vue-demo-page">
-    <Card>
-      <template #title>PrimeVue 组件演示</template>
-      <template #content>
-        <Message severity="info">演示 PrimeVue 各种组件的使用方法和功能特性</Message>
-
-        <Panel header="Toast 消息" class="mt-1.5">
-          <div flex="~ wrap" gap="4">
-            <Button
-              v-for="(severity, index) in tostSeverities"
-              :key="severity ?? 'default'"
-              @click="
-                ToastService.add({
-                  severity: severity,
-                  summary: `severity: ${severity ?? 'default'}`,
-                  life: 3000,
-                  detail: '消息内容',
-                })
-              "
-            >
-              {{ `${index + 1}. ${severity ?? 'default'}` }}
-            </Button>
-            <Button @click="openAllToasts"> 一键打开所有 </Button>
-          </div>
-        </Panel>
-      </template>
-    </Card>
-  </div>
-</template>

src/pages/demos/websocket-demo.page.vue

@@ -1,438 +0,0 @@
-<script setup lang="ts">
-import { ref, onUnmounted, computed, nextTick } from 'vue';
-
-definePage({
-  meta: {},
-});
-
-// ========== WebSocket 模块 ==========
-const ws = ref<WebSocket | null>(null);
-const wsConnected = ref(false);
-const wsMessages = ref<string[]>([]);
-const messageInput = ref('');
-const wsLoading = ref(false);
-const connectionAttempts = ref(0);
-const maxReconnectAttempts = 3;
-const messagesContainer = ref<HTMLElement | null>(null);
-
-const scrollToBottom = async () => {
-  await nextTick();
-  if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
-  }
-};
-
-const connectWebSocket = async () => {
-  if (ws.value?.readyState === WebSocket.OPEN) return;
-
-  wsLoading.value = true;
-  connectionAttempts.value++;
-
-  try {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/ws`;
-    ws.value = new WebSocket(wsUrl);
-
-    ws.value.onopen = (event) => {
-      console.log('[onopen] event :>> ', event);
-      wsConnected.value = true;
-      wsLoading.value = false;
-      connectionAttempts.value = 0;
-      wsMessages.value.push(`✅ WebSocket连接已建立 (${new Date().toLocaleTimeString()})`);
-      scrollToBottom();
-    };
-
-    ws.value.onmessage = (event) => {
-      console.log('[onmessage] event :>> ', event);
-      wsMessages.value.push(`📨 收到: ${event.data}`);
-      scrollToBottom();
-    };
-
-    ws.value.onclose = (event) => {
-      console.log('[onclose] event :>> ', event);
-      wsConnected.value = false;
-      wsLoading.value = false;
-      const reason = event.reason || '连接意外断开';
-      wsMessages.value.push(
-        `❌ WebSocket连接已关闭: ${reason} (${new Date().toLocaleTimeString()})`,
-      );
-      scrollToBottom();
-
-      if (connectionAttempts.value < maxReconnectAttempts && !event.wasClean) {
-        setTimeout(() => {
-          wsMessages.value.push(
-            `🔄 尝试重新连接 (${connectionAttempts.value}/${maxReconnectAttempts})...`,
-          );
-          scrollToBottom();
-          connectWebSocket();
-        }, 2000);
-      }
-    };
-
-    ws.value.onerror = (error) => {
-      console.error('[onerror] error :>> ', error);
-      wsLoading.value = false;
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      wsMessages.value.push(
-        `⚠️ WebSocket连接错误: ${errorMessage} (${new Date().toLocaleTimeString()})`,
-      );
-      scrollToBottom();
-    };
-  } catch {
-    wsLoading.value = false;
-    wsMessages.value.push(`❌ 连接失败 (${new Date().toLocaleTimeString()})`);
-    scrollToBottom();
-  }
-};
-
-const disconnectWebSocket = () => {
-  if (ws.value) {
-    ws.value.close(4000, '用户主动断开连接');
-    ws.value = null;
-  }
-};
-
-const sendMessage = () => {
-  if (ws.value?.readyState === WebSocket.OPEN && messageInput.value.trim()) {
-    const message = messageInput.value.trim();
-    ws.value.send(message);
-    wsMessages.value.push(`🚀 发送: ${message} (${new Date().toLocaleTimeString()})`);
-    messageInput.value = '';
-    scrollToBottom();
-  }
-};
-
-const sendMockData = () => {
-  if (ws.value?.readyState === WebSocket.OPEN) {
-    const mockMessages = [
-      '你好，这是一条测试消息',
-      'WebSocket 连接正常',
-      '实时通信功能演示',
-      '模拟数据发送成功',
-      'Hello World!',
-      '这是一条中文消息',
-      '实时数据传输测试',
-      'WebSocket 功能验证',
-    ];
-
-    const randomIndex = Math.floor(Math.random() * mockMessages.length);
-    const randomMessage = mockMessages[randomIndex]!;
-    ws.value.send(randomMessage);
-    wsMessages.value.push(`🚀 发送: ${randomMessage} (${new Date().toLocaleTimeString()})`);
-    scrollToBottom();
-  }
-};
-
-const clearMessages = async () => {
-  wsMessages.value = [];
-  await scrollToBottom();
-};
-
-const exportMessages = () => {
-  const dataStr = JSON.stringify(wsMessages.value, null, 2);
-  const dataBlob = new Blob([dataStr], { type: 'application/json' });
-  const url = URL.createObjectURL(dataBlob);
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = `websocket-messages-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  URL.revokeObjectURL(url);
-};
-
-// ========== 计算属性 ==========
-const canSendMessage = computed(() => wsConnected.value && messageInput.value.trim());
-const connectionStatusText = computed(() => {
-  if (wsLoading.value) return '连接中...';
-  if (wsConnected.value) return '已连接';
-  return '未连接';
-});
-
-// ========== 生命周期钩子 ==========
-onUnmounted(() => {
-  if (ws.value) {
-    ws.value.close();
-  }
-});
-</script>
-
-<template>
-  <div
-    class="transition-all duration-500 p-2 sm:p-3 bg-gray-50 dark:bg-gray-900 via-blue-50 dark:via-slate-800 to-slate-100 dark:to-gray-900 bg-gradient-to-br"
-  >
-    <div class="max-w-5xl mx-auto">
-      <!-- WebSocket 示例 -->
-      <div
-        class="backdrop-blur-sm rounded-2xl shadow-lg border p-4 sm:p-5 hover:shadow-2xl hover:scale-[1.02] transition-all duration-500 cursor-pointer group bg-white dark:bg-gray-800 border-white dark:border-gray-700 hover:bg-white dark:hover:bg-gray-800"
-      >
-        <div class="flex items-center mb-4">
-          <div
-            class="w-8 h-8 bg-gradient-to-r from-green-500 to-teal-600 rounded-lg flex items-center justify-center mr-2"
-          >
-            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 18.5V6M9 9l3-3 3 3m-3 9l3 3-3 3"
-              />
-            </svg>
-          </div>
-          <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">WebSocket 示例</h2>
-        </div>
-
-        <!-- 连接状态和控制按钮 -->
-        <div class="mb-4">
-          <!-- 连接状态显示 -->
-          <div
-            class="flex items-center justify-between mb-3 p-2.5 rounded-lg bg-gray-50 dark:bg-gray-700"
-            role="status"
-            aria-live="polite"
-            aria-label="WebSocket连接状态"
-          >
-            <div class="flex items-center gap-3">
-              <div class="relative">
-                <div
-                  class="w-4 h-4 rounded-full transition-all duration-500 shadow-lg"
-                  :class="
-                    wsConnected
-                      ? 'bg-gradient-to-br from-green-400 to-green-600 animate-pulse'
-                      : 'bg-gradient-to-br from-red-400 to-red-600'
-                  "
-                />
-                <div
-                  v-if="wsLoading"
-                  class="absolute inset-0 w-4 h-4 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 animate-ping"
-                />
-                <div
-                  v-if="wsConnected"
-                  class="absolute inset-0 w-4 h-4 rounded-full bg-green-400 animate-ping opacity-20"
-                />
-              </div>
-              <div>
-                <div class="font-medium text-gray-800 dark:text-gray-100">
-                  {{ connectionStatusText }}
-                </div>
-                <div v-if="connectionAttempts > 0" class="text-xs text-gray-500 dark:text-gray-300">
-                  重连次数: {{ connectionAttempts }}/{{ maxReconnectAttempts }}
-                </div>
-              </div>
-            </div>
-            <div class="text-xs text-gray-500 dark:text-gray-300">
-              {{ wsConnected ? '🟢 实时通信' : wsLoading ? '🟡 连接中' : '🔴 未连接' }}
-            </div>
-          </div>
-
-          <!-- 控制按钮 -->
-          <div class="grid grid-cols-2 gap-2">
-            <button
-              :disabled="wsConnected || wsLoading"
-              :aria-label="
-                wsLoading ? '正在连接WebSocket' : wsConnected ? 'WebSocket已连接' : '连接WebSocket'
-              "
-              class="flex items-center justify-center bg-gradient-to-br from-green-500 via-green-600 to-emerald-600 text-white font-semibold py-2.5 px-4 rounded-xl hover:from-green-600 hover:via-green-700 hover:to-emerald-700 transition-all duration-500 disabled:opacity-50 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 hover:scale-[1.02] text-sm"
-              @click="connectWebSocket"
-            >
-              <svg
-                v-if="wsLoading"
-                class="animate-spin -ml-1 mr-2 h-4 w-4"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <circle
-                  class="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  stroke-width="4"
-                />
-                <path
-                  class="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                />
-              </svg>
-              <span>{{ wsLoading ? '连接中...' : '连接' }}</span>
-            </button>
-
-            <button
-              :disabled="!wsConnected || wsLoading"
-              :aria-label="!wsConnected ? 'WebSocket未连接' : '断开WebSocket连接'"
-              class="flex items-center justify-center bg-gradient-to-br from-red-500 via-red-600 to-pink-600 text-white font-semibold py-2.5 px-4 rounded-xl hover:from-red-600 hover:via-red-700 hover:to-pink-700 transition-all duration-500 disabled:opacity-50 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 hover:scale-[1.02] text-sm"
-              @click="disconnectWebSocket"
-            >
-              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-              断开
-            </button>
-          </div>
-        </div>
-
-        <!-- 发送消息 -->
-        <div class="mb-4">
-          <div class="flex gap-2">
-            <label class="sr-only" for="messageInput">要发送的消息</label>
-            <input
-              id="messageInput"
-              v-model="messageInput"
-              placeholder="输入要发送的消息..."
-              :disabled="!wsConnected"
-              :aria-describedby="!wsConnected ? 'ws-status' : undefined"
-              class="flex-1 w-full border-2 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:text-gray-500 transition-all duration-300 border-gray-200 dark:border-gray-600 bg-white/60 dark:bg-gray-700/60 backdrop-blur-sm text-gray-800 dark:text-gray-100 disabled:bg-gray-100/60 dark:disabled:bg-gray-800/60 hover:border-gray-300 dark:hover:border-gray-500"
-              @keyup.enter="sendMessage"
-            />
-            <button
-              :disabled="!canSendMessage"
-              :aria-label="
-                !wsConnected ? 'WebSocket未连接' : canSendMessage ? '发送消息' : '请输入消息内容'
-              "
-              class="flex items-center bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-600 text-white font-semibold py-2.5 px-4 rounded-xl hover:from-blue-600 hover:via-blue-700 hover:to-indigo-700 transition-all duration-500 disabled:opacity-50 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 hover:scale-[1.02] text-sm"
-              @click="sendMessage"
-            >
-              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-                />
-              </svg>
-              发送
-            </button>
-            <button
-              :disabled="!wsConnected"
-              :aria-label="!wsConnected ? 'WebSocket未连接' : '发送随机模拟数据'"
-              class="flex items-center bg-gradient-to-br from-purple-500 via-purple-600 to-violet-600 text-white font-semibold py-2.5 px-4 rounded-xl hover:from-purple-600 hover:via-purple-700 hover:to-violet-700 transition-all duration-500 disabled:opacity-50 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 hover:scale-[1.02] text-sm"
-              :title="!wsConnected ? 'WebSocket未连接时不可用' : '发送随机模拟数据'"
-              @click="sendMockData"
-            >
-              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
-                />
-              </svg>
-              模拟
-            </button>
-          </div>
-        </div>
-
-        <!-- 消息记录 -->
-        <div
-          class="rounded-lg p-3 border bg-gray-50 dark:bg-gray-800 dark:from-gray-800 dark:to-gray-700 border-gray-200 dark:border-gray-600 bg-gradient-to-r from-gray-50 dark:from-gray-800 to-gray-100 dark:to-gray-700"
-          role="log"
-          aria-label="WebSocket消息记录"
-          aria-live="polite"
-        >
-          <div class="flex justify-between items-center mb-2">
-            <h3 class="text-gray-700 dark:text-gray-200 font-semibold flex items-center text-sm">
-              <svg
-                class="w-4 h-4 mr-2 text-blue-500"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                />
-              </svg>
-              消息记录:
-            </h3>
-            <div class="flex gap-1">
-              <button
-                class="text-xs text-gray-500 hover:text-blue-500 transition-colors duration-200 flex items-center"
-                title="导出消息"
-                @click="exportMessages"
-              >
-                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 10v6m0 0l4-4m-4 4l-4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-                导出
-              </button>
-              <button
-                class="text-xs text-gray-500 hover:text-red-500 transition-colors duration-200 flex items-center"
-                title="清空消息"
-                @click="clearMessages"
-              >
-                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                  />
-                </svg>
-                清空
-              </button>
-            </div>
-          </div>
-          <div
-            ref="messagesContainer"
-            class="max-h-48 overflow-y-auto rounded-lg border p-2 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-600"
-          >
-            <div
-              v-if="wsMessages.length === 0"
-              class="text-gray-500 dark:text-gray-400 text-sm text-center py-6"
-            >
-              <svg
-                class="w-6 h-6 mx-auto mb-1 text-gray-300"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                />
-              </svg>
-              暂无消息
-            </div>
-            <div v-else class="space-y-2">
-              <div
-                v-for="(message, index) in wsMessages"
-                :key="index"
-                class="text-sm p-2 rounded-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] animate-fade-in"
-                :class="
-                  message.includes('发送:')
-                    ? 'bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/30 dark:to-blue-800/30 text-blue-800 dark:text-blue-200 border-l-4 border-blue-400 dark:border-blue-500'
-                    : message.includes('收到:')
-                      ? 'bg-gradient-to-r from-green-50 to-green-100 dark:from-green-900/30 dark:to-green-800/30 text-green-800 dark:text-green-200 border-l-4 border-green-400 dark:border-green-500'
-                      : message.includes('连接已建立')
-                        ? 'bg-gradient-to-r from-emerald-50 to-emerald-100 dark:from-emerald-900/30 dark:to-emerald-800/30 text-emerald-800 dark:text-emerald-200 border-l-4 border-emerald-400 dark:border-emerald-500'
-                        : message.includes('连接已关闭') || message.includes('连接失败')
-                          ? 'bg-gradient-to-r from-red-50 to-red-100 dark:from-red-900/30 dark:to-red-800/30 text-red-800 dark:text-red-200 border-l-4 border-red-400 dark:border-red-500'
-                          : message.includes('尝试重新连接')
-                            ? 'bg-gradient-to-r from-yellow-50 to-yellow-100 dark:from-yellow-900/30 dark:to-yellow-800/30 text-yellow-800 dark:text-yellow-200 border-l-4 border-yellow-400 dark:border-yellow-500'
-                            : 'bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 border-l-4 border-gray-400 dark:border-gray-500'
-                "
-              >
-                {{ message }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

src/pages/index.page.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div>
+  <div></div>
-    <n-button @click="$router.push({ name: 'DemosCreate' })">DemosCreate</n-button>
-  </div>
 </template>
+
+<style scoped></style>

src/plugins/00.app-config.ts

@@ -1,13 +0,0 @@
-export function install({ app }: { app: import('vue').App<Element> }) {
-  app.config.globalProperties.__DEV__ = __DEV__;
-
-  app.config.errorHandler = (error, instance, info) => {
-    console.error('Global error:', error);
-    console.error('Component:', instance);
-    console.error('Error Info:', info);
-    // 这里你可以：
-    // 1. 发送错误到日志服务
-    // 2. 显示全局错误提示
-    // 3. 进行错误分析和处理
-  };
-}

src/plugins/00.pinia-plugin.ts

@@ -1,6 +0,0 @@
-import { PiniaColada } from '@pinia/colada';
-// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-export function install({ app }: { app: import('vue').App<Element> }) {
-  app.use(createPinia() /* .use(piniaPluginPersistedstate) */);
-  app.use(PiniaColada, {});
-}

src/plugins/00.router-plugin.ts

@@ -1,60 +0,0 @@
-import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
-import { setupLayouts } from 'virtual:meta-layouts';
-// import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts';
-import { createRouter, createWebHistory } from 'vue-router';
-import type { Router } from 'vue-router';
-import { handleHotUpdate, routes } from 'vue-router/auto-routes';
-
-const setupLayoutsResult = setupLayouts(routes);
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: /* routes ?? */ setupLayoutsResult,
-  scrollBehavior: (_to, _from, savedPosition) => {
-    return savedPosition ?? { left: 0, top: 0 };
-  },
-  strict: true,
-});
-
-router.isReady().then(() => {
-  console.debug('✅ [router is ready]');
-});
-
-router.onError((error) => {
-  console.debug('🚨 [router error]:', error);
-});
-
-export function install({ app }: { app: import('vue').App<Element> }) {
-  app
-    // 在路由之前注册插件
-    .use(DataLoaderPlugin, { router })
-    // 添加路由会触发初始导航
-    .use(router);
-}
-// ========================================================================
-// =========================== Router Guards ==============================
-// ========================================================================
-{
-  // 警告：路由守卫的创建顺序会影响执行流程，请勿调整
-  createNProgressGuard(router);
-  if (import.meta.env.VITE_APP_ENABLE_ROUTER_LOG_GUARD === 'true') createLogGuard(router);
-  Object.assign(window, { stack: createStackGuard(router) });
-
-  // >>>
-  Object.values(
-    import.meta.glob<{
-      createGuard?: (router: Router) => void;
-    }>('./router-guard/*.ts', { eager: true /* true 为同步，false 为异步 */ }),
-  ).forEach((module) => {
-    module.createGuard?.(router);
-  });
-  // <<<
-}
-
-if (__DEV__) Object.assign(window, { router });
-
-// This will update routes at runtime without reloading the page
-if (import.meta.hot) {
-  handleHotUpdate(router);
-}
-
-export { router, setupLayoutsResult };

src/plugins/00.router-plugin.types.ts

@@ -1,50 +0,0 @@
-import type { RouteNamedMap } from 'vue-router/auto-routes';
-
-declare global {
-  type PageTitleLocalizations = Record<keyof RouteNamedMap, string>;
-}
-
-declare module 'vue-router' {
-  /* definePage({ meta: { title: '示例演示' } }); */
-  interface RouteMeta {
-    /**
-     * @description 是否在菜单中隐藏
-     */
-    hideInMenu?: boolean;
-
-    /**
-     * @description 菜单标题 // !⚠️通过多语言标题方案（搜`PageTitleLocalizations`）维护标题
-     */
-    title?: string;
-
-    /**
-     * @description 使用的布局，设置为 false 则表示不使用布局
-     */
-    layout?: string | false;
-
-    /**
-     * @description 菜单项是否渲染为可点击链接，默认为 true
-     * - true: 使用 RouterLink 包装，可点击跳转
-     * - false: 仅渲染纯文本标签，不可点击（适用于分组标题）
-     */
-    link?: boolean;
-
-    /**
-     * @description 菜单排序权重，数值越小越靠前，未设置则按路径字母顺序排序
-     */
-    order?: number;
-
-    /**
-     * @description 是否忽略权限，默认为 false
-     */
-    ignoreAuth?: boolean;
-
-    /**
-     * @description 当前路由激活时应该高亮的菜单项（通过路由名称指定）
-     * - 用于隐藏在菜单中的子页面，指定其父级菜单项应该高亮
-     * - 使用路由名称而非路径，提供更好的类型安全和重构友好性
-     * - 例如：`activeMenuName: 'Demos'` 会高亮 Demos 菜单项
-     */
-    activeMenuName?: keyof RouteNamedMap;
-  }
-}

src/plugins/00.vueI18n-plugin.ts

@@ -1,3 +0,0 @@
-export function install({ app }: { app: import('vue').App<Element> }) {
-  app.use(i18nInstance);
-}

src/plugins/10.formkit-auto-animate.ts

@@ -1,5 +0,0 @@
-import { autoAnimatePlugin } from '@formkit/auto-animate/vue';
-
-export function install({ app }: { app: import('vue').App<Element> }) {
-  app.use(autoAnimatePlugin); // v-auto-animate="{ duration: 100 }"
-}

src/plugins/10.unhead.ts

@@ -1,5 +0,0 @@
-import { createHead } from '@unhead/vue/client';
-
-export function install({ app }: { app: import('vue').App<Element> }) {
-  app.use(createHead());
-}

src/plugins/_.ts

@@ -0,0 +1,32 @@
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { createHead } from '@unhead/vue/client'
+
+export function install({ app }: { app: import('vue').App<Element> }) {
+  app.config.globalProperties.__DEV__ = __DEV__
+
+  app.use(autoAnimatePlugin) // v-auto-animate="{ duration: 100 }"
+
+  app.use(createHead())
+  app.config.errorHandler = (error, instance, info) => {
+    console.error('Global error:', error)
+    console.error('Component:', instance)
+    console.error('Error Info:', info)
+    // 这里你可以：
+    // 1. 发送错误到日志服务
+    // 2. 显示全局错误提示
+    // 3. 进行错误分析和处理
+  }
+
+  // if (import.meta.env.MODE === 'development' && '1' === ('2' as never)) {
+  //   // TODO: https://github.com/hu3dao/vite-plugin-debug/
+  //   // https://eruda.liriliri.io/zh/docs/#快速上手
+  //   import('eruda').then(({ default: eruda }) => {
+  //     eruda.init({
+  //       defaults: {
+  //         transparency: 0.9,
+  //       },
+  //     })
+  //     /* eruda.show(); */
+  //   })
+  // }
+}

src/plugins/index.ts

@@ -1,29 +1,24 @@
 /**
  * https://github.com/antfu-collective/vitesse/blob/47618e72dfba76c77b9b85b94784d739e35c492b/src/modules/README.md
  */
-type UserPlugin = (ctx: UserPluginContext) => void;
+type UserPlugin = (ctx: UserPluginContext) => void
-type AutoInstallModule = { [K: string]: unknown; install?: UserPlugin };
+type AutoInstallModule = { [K: string]: unknown; install?: UserPlugin }
-type UserPluginContext = { app: import('vue').App<Element> };
+type UserPluginContext = { app: import('vue').App<Element> }
-
+export function setupPlugins(
-const autoInstallModules: AutoInstallModule = import.meta.glob(
+  app: import('vue').App,
-  ['./*.ts', '!./**/*.types.ts', '!./index.ts'],
+  modules: AutoInstallModule | Record<string, unknown>,
-  {
+) {
-    eager: true /* true 为同步，false 为异步 */,
+  console.group('🔌 Plugins')
-  },
+  for (const path in modules) {
-);
+    const module = modules[path] as AutoInstallModule
-
-export function setupPlugins(app: import('vue').App) {
-  console.group(`🔌 Installing ${Object.keys(autoInstallModules).length} plugins`);
-  for (const path in autoInstallModules) {
-    const module = autoInstallModules[path] as AutoInstallModule;
     if (module.install) {
-      module.install({ app });
+      module.install({ app })
-      console.debug(`%c✔ ${path}`, 'color: #07a');
+      console.debug(`%c✔ ${path}`, 'color: #07a')
     } else {
-      if (typeof module.setupPlugins === 'function') continue;
+      if (typeof module.setupPlugins === 'function') continue
-      console.warn(`%c✘ ${path} has no install function`, 'color: #f50');
+      console.warn(`%c✘ ${path} has no install function`, 'color: #f50')
     }
   }
-  console.groupEnd();
+  console.groupEnd()
-  return app;
+  return app
 }

src/plugins/pinia.ts

@@ -0,0 +1,6 @@
+import { PiniaColada } from '@pinia/colada'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+export function install({ app }: { app: import('vue').App<Element> }) {
+  app.use(createPinia().use(piniaPluginPersistedstate))
+  app.use(PiniaColada, {})
+}

src/plugins/primevue.ts

@@ -2,14 +2,13 @@
  * 需要把 <DynamicDialog /> <ConfirmDialog /> <Toast /> 放在 App.vue 的 template 中
  */
 
-import Aura from '@primeuix/themes/aura';
+import Aura from '@primeuix/themes/aura'
-import zhCN from 'primelocale/zh-CN.json';
+import zhCN from 'primelocale/zh-CN.json'
-import PrimeVue from 'primevue/config';
+import PrimeVue from 'primevue/config'
-import StyleClass from 'primevue/styleclass';
+import StyleClass from 'primevue/styleclass'
-import ToastService from 'primevue/toastservice';
 
 export function install({ app }: { app: import('vue').App<Element> }) {
-  app.directive('styleclass', StyleClass);
+  app.directive('styleclass', StyleClass)
   app.use(PrimeVue, {
     locale: {
       ...zhCN['zh-CN'],
@@ -25,6 +24,5 @@ export function install({ app }: { app: import('vue').App<Element> }) {
       },
       preset: Aura,
     },
-  });
+  })
-  app.use(ToastService);
 }

src/plugins/router-guard/router-permission-guard.ts

@@ -1,28 +0,0 @@
-import type { Router } from 'vue-router';
-
-export function createGuard(router: Router) {
-  router.beforeEach(async (to /* , from */) => {
-    const userStore = useAuthStore();
-
-    if (to.name === 'Login') {
-      userStore.clearToken('User navigated to login page');
-    }
-
-    if (to.meta.ignoreAuth) {
-      return true;
-    }
-
-    if (!userStore.isLoggedIn) {
-      console.debug('🔑 [permission-guard] 用户未登录，重定向到登录页');
-      return { name: 'Login' };
-    }
-  });
-
-  router.beforeResolve(async (/* to, from */) => {
-    const userStore = useAuthStore();
-    if (userStore.isLoggedIn && !userStore.userInfo) {
-      console.debug('🔑 [permission-guard] 用户信息不存在，尝试获取用户信息');
-      await userStore.fetchUserInfo();
-    }
-  });
-}

src/plugins/router.ts

@@ -0,0 +1,58 @@
+import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders'
+import { setupLayouts } from 'virtual:meta-layouts'
+// import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts';
+import { createRouter, createWebHistory } from 'vue-router'
+import { handleHotUpdate, routes } from 'vue-router/auto-routes'
+
+const setupLayoutsResult = setupLayouts(routes)
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: /* routes ?? */ setupLayoutsResult,
+  scrollBehavior: (_to, _from, savedPosition) => {
+    return savedPosition ?? { left: 0, top: 0 }
+  },
+  strict: true,
+})
+if (import.meta.hot) handleHotUpdate(router)
+if (__DEV__) Object.assign(globalThis, { router })
+router.onError((error) => {
+  console.debug('🚨 [router error]:', error)
+})
+
+export { router, setupLayoutsResult }
+export function install({ app }: { app: import('vue').App<Element> }) {
+  app
+    // 在路由之前注册插件
+    .use(DataLoaderPlugin, { router })
+    // 添加路由会触发初始导航
+    .use(router)
+}
+// ========================================================================
+// =========================== Router Guards ==============================
+// ========================================================================
+{
+  // 警告：路由守卫的创建顺序会影响执行流程，请勿调整
+  createNProgressGuard(router)
+  createLogGuard(router)
+  Object.assign(globalThis, { stack: createStackGuard(router) })
+}
+
+/*
+definePage({
+  meta: { },
+});
+ */
+declare module 'vue-router' {
+  interface RouteMeta {
+    /**
+     * @description 是否在菜单中隐藏
+     */
+    hidden?: boolean
+    /**
+     * @description 菜单标题
+     */
+    title?: string
+  }
+}
+
+export { createGetRoutes } from 'virtual:meta-layouts'

src/plugins/vue-i18n.ts

@@ -0,0 +1,17 @@
+/* https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#static-bundle-importing
+ * All i18n resources specified in the plugin `include` option can be loaded
+ * at once using the import syntax
+ */
+import messages from '@intlify/unplugin-vue-i18n/messages'
+import { createI18n } from 'vue-i18n'
+
+export function install({ app }: { app: import('vue').App<Element> }) {
+  app.use(
+    // https://vue-i18n.intlify.dev/guide/essentials/started.html#registering-the-i18n-plugin
+    createI18n({
+      legacy: false, // you must set `false`, to use Composition API
+      locale: navigator.language,
+      messages,
+    }),
+  )
+}

src/stores/app-store-auto-imports.ts

@@ -1,42 +0,0 @@
-import { useLocalStorage, useMediaQuery } from '@vueuse/core';
-import { defineStore } from 'pinia';
-import { computed } from 'vue';
-
-// >>>>>
-// https://vueuse.org/core/useColorMode/#advanced-usage
-const { system, store: themeMode } = useColorMode({
-  modes: { light: '', dark: 'app-dark', auto: '' },
-  disableTransition: false,
-});
-const { state, next: cycleTheme } = useCycleList(['light', 'dark', 'auto'] as const, {
-  initialValue: themeMode,
-});
-watchEffect(() => (themeMode.value = state.value));
-export type AppThemeMode = typeof themeMode.value;
-// <<<<<
-
-export const useAppStore = defineStore('app', () => {
-  // 侧边栏展开/收起状态
-  const sidebarCollapsed = useLocalStorage<boolean>('app-sidebar-collapsed', false);
-  const toggleSidebar = useToggle(sidebarCollapsed);
-
-  // 主题模式
-  const actualTheme = computed(() => (themeMode.value === 'auto' ? system.value : themeMode.value));
-  const isDark = computed(() => actualTheme.value === 'dark');
-
-  // 是否是移动端
-  const isMobile = useMediaQuery('(max-width: 768px)');
-
-  return {
-    themeMode,
-    isDark,
-    isMobile,
-    cycleTheme,
-    sidebarCollapsed,
-    toggleSidebar,
-  };
-});
-
-if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useAppStore, import.meta.hot));
-}

src/stores/auth-store-auto-imports.ts

@@ -1,45 +0,0 @@
-export const useAuthStore = defineStore('auth', () => {
-  const token = useLocalStorage<string | null>('auth-token', null);
-  const userInfo = ref<Record<string, any> | null>(null);
-
-  const isLoggedIn = computed(() => !!token.value);
-
-  function clearToken(reason?: string) {
-    consola.info('🚮  [auth-store] clear: ', reason);
-    token.value = null;
-    userInfo.value = null;
-  }
-
-  async function login(username: string, password: string) {
-    // 模拟登录延迟
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    // 模拟验证
-    if (username === 'admin' && password === 'admin') {
-      token.value = `mock-token-${Date.now()}`;
-      await fetchUserInfo();
-      return { success: true };
-    }
-
-    return { success: false, message: '用户名或密码错误' };
-  }
-
-  async function fetchUserInfo() {
-    if (!token.value) {
-      return;
-    }
-
-    // 模拟获取用户信息延迟
-    await new Promise((resolve) => setTimeout(resolve, 300));
-
-    // 模拟从服务器获取用户信息
-    userInfo.value = {
-      id: 1,
-      username: 'admin',
-      nickname: '管理员',
-      roles: ['admin'],
-    };
-  }
-
-  return { token, isLoggedIn, userInfo, clearToken, login, fetchUserInfo };
-});

src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

src/styles/css/reset-primevue.css

@@ -1,8 +0,0 @@
-.p-confirmdialog,
-.p-toast {
-  max-width: calc(100% - 50px);
-}
-
-.p-toast .p-toast-message-text {
-  margin-top: -0.2rem;
-}

src/styles/css/transition.css

@@ -1,9 +0,0 @@
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.25s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}

src/styles/index.ts

@@ -1,8 +1,4 @@
-import 'nprogress/nprogress.css'; // <link rel="stylesheet" href="https://testingcf.jsdelivr.net/npm/nprogress/nprogress.css" />
+import 'nprogress/nprogress.css' // <link rel="stylesheet" href="https://testingcf.jsdelivr.net/npm/nprogress/nprogress.css" />
 
-import 'primeicons/primeicons.css';
+//
-
+import 'virtual:uno.css'
-import './css/reset-primevue.css';
-import './css/transition.css';
-
-import 'virtual:uno.css';

src/styles/scss/global.scss

@@ -1 +0,0 @@
-@forward 'scrollbar';

src/styles/scss/scrollbar.scss

@@ -1,24 +0,0 @@
-@mixin scrollbar($size: 7px, $color: rgba(0, 0, 0, 0.5)) {
-  scrollbar-color: $color transparent;
-  scrollbar-width: thin;
-
-  &::-webkit-scrollbar-thumb {
-    background-color: $color;
-    border-radius: $size;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: $color;
-    border-radius: $size;
-  }
-
-  &::-webkit-scrollbar {
-    width: $size;
-    height: $size;
-  }
-
-  &::-webkit-scrollbar-track-piece {
-    background-color: rgb(0 0 0 / 0%);
-    border-radius: 0;
-  }
-}

src/types/global.ts

@@ -1,9 +1,9 @@
 declare global {
-  const __DEV__: boolean;
+  const __DEV__: boolean
 }
 
 declare module 'vue' {
   export interface ComponentCustomProperties {
-    __DEV__: boolean;
+    __DEV__: boolean
   }
 }

src/utils/use-safe-n-form-auto-imports.tsx

@@ -1,121 +0,0 @@
-/**
- * https://www.naiveui.com/zh-CN/os-theme/components/form
- *
- * FIXME: `NForm` 和 `NFormItem` 的 slots 还没有实现。`NFormItemGi`组件。
- */
-
-import { get, set } from 'lodash-es';
-import type { FormInst, FormItemProps, FormProps } from 'naive-ui';
-import { NForm, NFormItem, formItemProps, NInput, formProps } from 'naive-ui';
-import type { Get, Paths } from 'type-fest';
-import type { SlotsType } from 'vue';
-import { Comment } from 'vue';
-
-type UseSafeNFormOptions<FormValue> = {
-  initialFormValue?: FormValue;
-};
-
-export function useSafeNForm<T extends Record<string, any> = Record<string, unknown>>(
-  options: UseSafeNFormOptions<T> = {},
-) {
-  const formInst = ref<FormInst | null>(null);
-  const formValue = ref<T>(structuredClone(toRaw(options.initialFormValue)) || ({} as T));
-
-  // 创建类型安全的 Form 组件
-  type SafeNFormProps = FormProps;
-
-  type SafeNFormSlots = SlotsType<{
-    default?: { count?: number };
-  }>;
-
-  const SafeNForm = defineComponent<SafeNFormProps, /* Emits */ [], /* EE */ never, SafeNFormSlots>(
-    (props, ctx) => {
-      return () => (
-        <NForm
-          {...props}
-          model={formValue.value}
-          ref={(inst) => {
-            formInst.value = inst as unknown as FormInst;
-          }}
-        >
-          {ctx.slots.default?.({})}
-        </NForm>
-      );
-    },
-    {
-      name: 'SafeNForm',
-      inheritAttrs: true,
-      props: formProps,
-    },
-  );
-  // <<<<<
-
-  // >>>>> 创建类型安全的 FormItem 组件
-  type SafeNFormItemProps<P extends Paths<T> & string> = FormItemProps & {
-    path: P;
-  };
-
-  type SafeNFormItemDefaultSlot<P extends Paths<T> & string> = {
-    value: Get<T, P>;
-    setValue: (val: Get<T, P>) => void;
-  };
-
-  const SafeNFormItemImpl = defineComponent<
-    SafeNFormItemProps<Paths<T> & string>,
-    /* Emits */ [],
-    /* EE */ never,
-    SlotsType<{ default: SafeNFormItemDefaultSlot<Paths<T> & string> }>
-  >(
-    (props, ctx) => {
-      return () => {
-        const value = get(formValue.value, props.path);
-        function setValue(val: typeof value) {
-          set(formValue.value, props.path, val);
-        }
-
-        const defaultSlotContent = ctx.slots.default?.({
-          value,
-          setValue,
-        });
-
-        // 如果没有提供默认 slot 内容，则渲染一个 NInput 作为默认输入组件
-        const renderDefaultNInput = defaultSlotContent?.some((v) => v.type !== Comment) ? null : (
-          <NInput value={value} onUpdate:value={setValue} />
-        );
-
-        return (
-          <NFormItem {...props} path={props.path}>
-            {defaultSlotContent}
-            {renderDefaultNInput}
-          </NFormItem>
-        );
-      };
-    },
-    {
-      name: 'SafeNFormItem',
-      inheritAttrs: false,
-      props: Object.keys(formItemProps) as unknown as [keyof FormItemProps],
-    },
-  );
-
-  // Expose a generic constructor so template literals narrow `path`.
-  type SafeNFormItemComponent = {
-    new <P extends Paths<T> & string>(
-      props: SafeNFormItemProps<P>,
-    ): {
-      $props: SafeNFormItemProps<P>;
-      $slots: {
-        default?: (scope: SafeNFormItemDefaultSlot<P>) => VNode[];
-      };
-    };
-  };
-  const SafeNFormItem = SafeNFormItemImpl as SafeNFormItemComponent;
-  // <<<<<
-
-  return {
-    formValue,
-    SafeNForm,
-    SafeNFormItem,
-    formInst,
-  };
-}