chore(deps): update all non-major dependencies

- Changed component names from kebab-case to PascalCase in various files for consistency.
- Updated `<router-view>` and `<transition>` to `<RouterView>` and `<Transition>` respectively in App.vue and base-layout.vue.
- Refactored AppNaiveUIProvider.vue to use PascalCase for Naive UI providers.
- Adjusted language and theme switch buttons to use PascalCase for icon components.
- Updated button components in demo pages to use PascalCase for Naive UI buttons.
- Modified ESLint rules in route message files to use perfectionist/sort-objects for better key sorting.
- Enhanced Vite plugin files to export loadPlugin functions for better plugin management.
- Improved plugin loading logic to handle errors and warnings more effectively.

.devcontainer/devcontainer.json

@@ -0,0 +1,39 @@
+{
+  "image": "ghcr.io/yanhao98/h-devcontainer:main",
+  "runArgs": [
+    "--hostname=devcontainer-host",
+    "--name=${localWorkspaceFolderBasename}-devcontainer"
+  ],
+  "forwardPorts": [4730, 4731, 5901],
+  "portsAttributes": {
+    "4730": { "label": "开发服务器端口", "onAutoForward": "notify" },
+    "4731": { "label": "预览服务器端口", "onAutoForward": "notify" }
+  },
+  "containerEnv": {
+    "TZ": "${localEnv:TZ:Asia/Shanghai}"
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": ["prettier.prettier-vscode", "vue.volar"],
+      "settings": {
+        // "tasks": { "version": "2.0.0", "tasks": [] },
+        "github.copilot.chat.codeGeneration.instructions": [
+          {
+            "text": "This dev container includes a lightweight Fluxbox based desktop that can be accessed using a VNC viewer or the web. GUI-based commands executed from the built-in VS Code terminal will open on the desktop automatically."
+          }
+        ]
+      }
+    }
+  },
+  "mounts": [
+    "source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume",
+    "source=${localWorkspaceFolder}/.devcontainer/lifecycle-scripts.d,target=/usr/local/etc/lifecycle-scripts.d,type=bind,consistency=delegated"
+  ],
+  "workspaceMount": "source=${localWorkspaceFolder},target=/workspaces/${localWorkspaceFolderBasename},type=bind,consistency=delegated",
+  "initializeCommand": "docker pull ghcr.io/yanhao98/h-devcontainer:main;",
+  "onCreateCommand": "/usr/local/bin/run-lifecycle-scripts.sh onCreateCommand",
+  "updateContentCommand": "/usr/local/bin/run-lifecycle-scripts.sh updateContentCommand",
+  "postCreateCommand": "/usr/local/bin/run-lifecycle-scripts.sh postCreateCommand",
+  "postStartCommand": "/usr/local/bin/run-lifecycle-scripts.sh postStartCommand",
+  "postAttachCommand": "/usr/local/bin/run-lifecycle-scripts.sh postAttachCommand"
+}

.devcontainer/lifecycle-scripts.d/04-postStartCommand.d/-

@@ -0,0 +1,14 @@
+#!/bin/zsh -eu
+h-setup-zh-locale
+
+h-setup-bun-bin
+h-setup-pnpm-bin
+
+h-setup-chromium
+h-setup-desktop-lite
+
+h-install-node-modules
+
+echo "-----------------------------"
+echo "开发容器已启动并配置完成！"
+echo "-----------------------------"

.env

@@ -1,10 +1,15 @@
+VITE_APP_BUILD_TIME=NOT_SET
+VITE_APP_BUILD_COMMIT=NOT_SET
+
+VITE_BUILD_SOURCE_MAP=true
+VITE_BUILD_MINIFY=true
+VITE_CLOUDFLARE_SERVER_ENABLED=true
+
 VITE_APP_TITLE=vue-ts-example-2025
 VITE_APP_BASE=/
-VITE_APP_BUILD_SOURCE_MAP=true
-VITE_APP_BUILD_MINIFY=true
-VITE_APP_BUILD_COMMIT=
-VITE_APP_BUILD_TIME=
-VITE_ENABLE_VUE_DEVTOOLS=true
-VITE_MENU_SHOW_DEMOS=true
-VITE_MENU_SHOW_ORDER=true
-VITE_CLOUDFLARE_SERVER_ENABLED=true
+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

@@ -14,10 +14,10 @@ on:
 jobs:
   playwright:
     runs-on: ubuntu-latest
-    container: mcr.microsoft.com/playwright:v1.56.1-noble
+    container: mcr.microsoft.com/playwright:v1.57.0-noble
     steps:
       - name: ⚙️ 设置 Node 环境
-        uses: yanhao98/composite-actions/setup-node-environment@25eb4dc0c134cc9df2b7c569aa54140a366b45a8
+        uses: yanhao98/composite-actions/setup-node-environment@faab20ac2f9c85dfce1a4147fca493bf632bd744
       # - name: 📥 安装 Playwright 浏览器
       #   run: pnpm exec playwright install --with-deps
       - name: 📦 构建项目
@@ -32,13 +32,15 @@ jobs:
 
     steps:
       - name: 🛠️ 设置Node环境
-        uses: yanhao98/composite-actions/setup-node-environment@25eb4dc0c134cc9df2b7c569aa54140a366b45a8
+        uses: yanhao98/composite-actions/setup-node-environment@faab20ac2f9c85dfce1a4147fca493bf632bd744
 
       - name: 🔍 静态代码分析
         run: pnpm run lint
 
       - name: 📦 构建项目
-        run: pnpm run build-only
+        run: |
+          export VITE_APP_BUILD_TIME=$(date +"%Y-%m-%d %H:%M:%S")
+          pnpm run build-only
         env:
           VITE_APP_BUILD_COMMIT: ${{ github.sha }}
 

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

@@ -60,7 +60,7 @@ jobs:
 
   playwright:
     runs-on: ubuntu-latest
-    container: mcr.microsoft.com/playwright:v1.56.1-noble
+    container: mcr.microsoft.com/playwright:v1.57.0-noble
     steps:
       - uses: actions/checkout@main
         with:

.gitignore

@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+.pnpm-store
 node_modules
 .DS_Store
 dist

.husky/commit-msg

@@ -8,6 +8,6 @@ cat $1
 echo "🟢 [Commit-msg] Node 版本：$(node -v)"
 
 # pnpm exec commitlint --edit $1
-time node node_modules/@commitlint/cli/cli.js --edit $1
+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] 依赖安装完成！"

.husky/pre-commit

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

.ignore

@@ -0,0 +1,3 @@
+# VS Code 搜索忽略
+
+pnpm-lock.yaml

.npmrc

@@ -1,9 +1 @@
 # registry=https://registry.npmmirror.com/
-
-# https://pnpm.io/zh/npmrc#node-mirrorltreleasedir
-use-node-version=24.7.0
-node-mirror:release=https://npmmirror.com/mirrors/node/ # pnpm config set node-mirror:release=https://npmmirror.com/mirrors/node/
-node-mirror:rc=https://npmmirror.com/mirrors/node-rc/
-node-mirror:nightly=https://npmmirror.com/mirrors/node-nightly/
-
-# shamefully-hoist=true

.prettierrc.json

@@ -4,5 +4,6 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "plugins": ["@prettier/plugin-oxc"]
 }

.vscode/extensions.json

@@ -2,10 +2,11 @@
   "recommendations": [
     "Vue.volar",
     "vitest.explorer",
-    "ms-playwright.playwright",
     "dbaeumer.vscode-eslint",
     "EditorConfig.EditorConfig",
     "oxc.oxc-vscode",
-    "esbenp.prettier-vscode"
+    "prettier.prettier-vscode",
+    "stylelint.vscode-stylelint",
+    "lokalise.i18n-ally"
   ]
 }

.vscode/settings.json

@@ -1,34 +1,65 @@
 {
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.autoImportFileExcludePatterns": [
+    "vue-router$",
+    "**/src/composables/**",
+    "**/*-auto-imports.ts",
+    "**/*-auto-imports.types.ts"
+  ],
+  "search.exclude": {
+    "public/report-ui-dist": true
+  },
+
+  // ============================================================
+  // 代码格式化相关配置
+  // ============================================================
+  "prettier.enable": true,
+  "files.readonlyInclude": {
+    "dist/**": true
+  },
+  "eslint.enable": true,
+  "oxc.enable": true,
+  "stylelint.enable": true,
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit",
     "source.fixAll.eslint": "explicit",
-    "source.fixAll.stylelint": "explicit",
     "source.fixAll.oxc": "explicit",
-    "source.organizeImports": "never"
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "explicit"
   },
-  "editor.formatOnSave": true,
-
-  "stylelint.enable": true,
   "stylelint.validate": ["css", "less", "postcss", "scss", "vue"],
   "scss.lint.unknownAtRules": "ignore",
   "css.lint.unknownAtRules": "ignore",
   "less.lint.unknownAtRules": "ignore",
-
-  "eslint.enable": true,
-  "oxc.enable": true,
-  "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "prettier.prettier-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "prettier.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "prettier.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "prettier.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "prettier.prettier-vscode"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
 
-  "i18n-ally.localesPaths": ["src/locales"],
-  "i18n-ally.sourceLanguage": "zh-CN", // 翻译源语言 (源文件) 根据此语言文件翻译其他语言文件的变量和内容
-  "i18n-ally.displayLanguage": "zh-CN", // 显示语言 (显示文件/翻译文件)
+  // ============================================================
+  // i18n-ally 配置
+  // ============================================================
+  // >>>>>
+  "i18n-ally.readonly": false,
+  "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",
-
-  // https://github.com/copilot/share/8a1a019a-0180-80e7-8141-a40be02c4006
+  "i18n-ally.sourceLanguage": "zh-CN", // 翻译源语言 (源文件) 根据此语言文件翻译其他语言文件的变量和内容
+  "i18n-ally.displayLanguage": "zh-CN" // 显示语言 (显示文件/翻译文件)
+  // <<<<<
   // "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

@@ -6,16 +6,12 @@
       "script": "dev",
       "label": "🚀 dev",
       "detail": "启动开发服务器",
-      "problemMatcher": {
-        "pattern": { "regexp": "." },
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": "VITE.*ready in",
-          "endsPattern": "(Local|Network):.*http"
-        }
-      },
+      "problemMatcher": [],
       "isBackground": true,
-      "presentation": { "reveal": "always", "panel": "dedicated" },
+      "presentation": {
+        "reveal": "always", // 控制运行任务的终端是否显示。可按选项 "revealProblems" 进行替代。默认设置为“始终”。
+        "panel": "dedicated" // dedicated：一个任务独占一个终端，方便查看特定任务的日志，不会被其他任务干扰。
+      },
       "group": { "kind": "build", "isDefault": false }
     },
     {
@@ -23,7 +19,6 @@
       "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 }
     },
@@ -33,14 +28,7 @@
       "label": "☁️ wrangler:dev",
       "detail": "启动 Cloudflare Workers 开发服务器，相当于预览",
       "dependsOn": ["🔨 build-only"],
-      "problemMatcher": {
-        "pattern": { "regexp": "." },
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": "wrangler dev",
-          "endsPattern": "Ready on"
-        }
-      },
+      "problemMatcher": [],
       "isBackground": true,
       "presentation": { "reveal": "always", "panel": "dedicated" },
       "group": { "kind": "build", "isDefault": false }

AGENTS.md

@@ -9,6 +9,7 @@ Vue 3 TypeScript application with Vite.
 ## 开发服务器
 
 - **不要启动开发服务器**: 开发服务器通常已经由用户启动。除非特别要求，否则不要执行 `pnpm dev` 之类的命令。
+- **不要执行 Playwright 测试**: 除非用户明确要求，否则不要运行 Playwright 端到端测试。
 
 ### Routing & Layouts
 
@@ -22,14 +23,15 @@ 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`
+- **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
-- **In TypeScript/TSX files**: Auto-import does NOT work. You must explicitly import icons using the `~icons/` prefix:
+
+- **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';
@@ -45,25 +47,6 @@ Multiple auto-import systems are active:
 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**:
 

commitlint.config.ts

@@ -1,9 +1,11 @@
 import type { UserConfig } from '@commitlint/types';
 
-
 const Configuration: UserConfig = {
   extends: ['@commitlint/config-conventional'],
   formatter: '@commitlint/format',
+  rules: {
+    'body-max-line-length': [2, 'always', 500],
+  },
 };
 
 export default Configuration;

e2e/tsconfig.json

@@ -1,4 +1,4 @@
 {
-  "extends": "@tsconfig/node22/tsconfig.json",
+  "extends": "@tsconfig/node24/tsconfig.json",
   "include": ["./**/*"]
 }

eslint.config.ts

@@ -1,15 +1,20 @@
-import pluginImport from 'eslint-plugin-import';
-import { globalIgnores } from 'eslint/config';
+import vueI18n from '@intlify/eslint-plugin-vue-i18n';
+// import stylistic from '@stylistic/eslint-plugin';
+import pluginVitest from '@vitest/eslint-plugin';
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
 import {
+  configureVueProject,
   defineConfigWithVueTs,
   vueTsConfigs,
-  configureVueProject,
 } from '@vue/eslint-config-typescript';
-import pluginVue from 'eslint-plugin-vue';
-import pluginVitest from '@vitest/eslint-plugin';
-import pluginPlaywright from 'eslint-plugin-playwright';
+import pluginImport from 'eslint-plugin-import';
+import pluginJsonc from 'eslint-plugin-jsonc';
 import pluginOxlint from 'eslint-plugin-oxlint';
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
+import pluginPerfectionist from 'eslint-plugin-perfectionist';
+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'] });
 // More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
@@ -20,7 +25,14 @@ export default defineConfigWithVueTs(
     files: ['**/*.{ts,mts,tsx,vue}'],
   },
 
-  globalIgnores(['worker-configuration.d.ts', '**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+  globalIgnores([
+    'worker-configuration.d.ts',
+    '**/dist/**',
+    '**/dist-ssr/**',
+    '**/coverage/**',
+    '**/public/**',
+    '**/-----TEMP-----/**',
+  ]),
 
   pluginVue.configs['flat/essential'],
   vueTsConfigs.recommended,
@@ -35,10 +47,29 @@ export default defineConfigWithVueTs(
     files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
   },
   ...pluginOxlint.configs['flat/recommended'],
+
+  // https://eslint-plugin-vue-i18n.intlify.dev/started.html#getting-started
+  ...vueI18n.configs.recommended,
   {
-    plugins: {
-      import: pluginImport,
+    rules: {
+      '@intlify/vue-i18n/no-raw-text': 'off',
+      '@intlify/vue-i18n/no-unused-keys': [
+        'error',
+        {
+          src: './src',
+          extensions: ['.js', '.ts', '.tsx', '.vue'],
+        },
+      ],
     },
+    settings: {
+      'vue-i18n': {
+        localeDir: './src/locales/**/*.json',
+        messageSyntaxVersion: '^11.0.0',
+      },
+    },
+  },
+  {
+    plugins: { import: pluginImport },
     rules: {
       'import/first': 'error',
       'import/no-duplicates': 'error',
@@ -52,7 +83,25 @@ export default defineConfigWithVueTs(
     },
   },
 
+  { plugins: { perfectionist: pluginPerfectionist } },
+
   {
+    /**
+     * 启用 sort-keys 规则以强制对象键按字母顺序排序
+     * 原因：
+     * 1. 减少多人协作时的合并冲突
+     * 2. 保持代码一致性，提高可维护性
+     */
+    files: ['src/locales/**/*.json'],
+    languageOptions: { parser: jsoncParser },
+    plugins: { jsonc: pluginJsonc },
+    rules: { 'jsonc/sort-keys': 'error' },
+  },
+
+  {
+    // plugins: {
+    //   '@stylistic': stylistic,
+    // },
     rules: {
       '@typescript-eslint/no-explicit-any': 'off',
       'vue/block-order': [
@@ -65,7 +114,20 @@ export default defineConfigWithVueTs(
         'error',
         { order: ['defineOptions', 'defineModel', 'defineProps', 'defineEmits', 'defineSlots'] },
       ],
+      'vue/attributes-order': 'error',
       'vue/multi-word-component-names': 'off',
+      'vue/padding-line-between-blocks': ['error', 'always'],
+      'vue/component-name-in-template-casing': [
+        'error',
+        'PascalCase',
+        { registeredComponentsOnly: false, ignores: [] },
+      ],
+      // '@stylistic/padding-line-between-statements': [
+      //   'error',
+      //   { blankLine: 'always', prev: '*', next: ['const', 'let', 'var'] },
+      //   { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
+      //   { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
+      // ],
     },
   },
 

index.html

@@ -11,40 +11,6 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <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>
 
     <meta name="color-scheme" content="light dark" />
     <meta name="format-detection" content="telephone=no" />
@@ -132,35 +98,69 @@
     <!-- <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> -->
-  </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) {}
+    <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();
+        });
       };
-      s.parentNode.insertBefore(tk, s);
-    }); /* (document) */
-  </script>
+    </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>
 </html>

package.json

@@ -1,45 +1,49 @@
 {
-  "packageManager": "pnpm@10.18.3",
+  "packageManager": "pnpm@10.25.0",
   "name": "vue-ts-example-2025",
   "version": "0.0.0",
   "private": true,
   "type": "module",
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
+  "_devenginesruntime_docs": "https://pnpm.io/zh/package_json#devenginesruntime",
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "version": "^24.11.1",
+      "onFail": "download"
+    }
   },
   "scripts": {
-    "_all": "run-p build-only type-check lint format:prettier test:unit:DisableWatch",
-    "dev": "vite --port 4730 --host --strictPort",
+    "all": "run-s lint format:prettier build-only type-check test:unit:DisableWatch",
+    "dev": "nodemon --delay 280ms --watch vite-plugins --ext ts -x vite -- --port 4730 --host --strictPort",
     "build": "run-p type-check \"build-only {@}\" --",
     "build-only": "vite build",
     "preview": "vite preview --port 4731 --host --strictPort",
     "wrangler:dev": "wrangler dev --port 4732",
-    "format:prettier": "prettier --write src/",
+    "format:prettier": "prettier --config=.prettierrc.json --cache --write --log-level=warn src/",
     "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 \"**/*.{css,less,scss,vue}\" --fix --ignore-path .gitignore",
+    "lint:vue-i18n-extract": "vue-i18n-extract report --vueFiles './src/**/*.?(ts|tsx|vue)' --languageFiles './src/locales/**/*.?(json|yml|yaml|js)' --ci",
+    "lint:stylelint": "stylelint --config=stylelint.config.mjs --cache --output-file=node_modules/.cache/stylelint/stylelint-report.json --cache-location=node_modules/.cache/stylelint/.stylelintcache --fix --ignore-path=.gitignore '**/*.{css,less,scss,vue}'",
     "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
-    "lint:eslint": "eslint . --fix",
+    "lint:eslint": "eslint . --fix --config=eslint.config.ts --concurrency=auto --env-info --cache --cache-location=node_modules/.cache/eslint/.eslintcache",
     "test:unit:DisableWatch": "vitest --run",
     "test:playwright:headless": "HEADLESS=true playwright test --quiet",
+    "_stylelint-config": "stylelint --config=stylelint.config.mjs --print-config src/styles/scss/global.scss",
     "postinstall": "wrangler types",
     "prepare": "husky"
   },
   "lint-staged": {
-    "{server,src,e2e}/**/*.{js,jsx,ts,tsx,vue}": [
-      "prettier --write",
+    "{src,e2e}/**/*.{js,jsx,ts,tsx,vue}": [
       "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"
-    },
     "onlyBuiltDependencies": [
       "@parcel/watcher",
       "esbuild",
@@ -50,95 +54,110 @@
     ]
   },
   "dependencies": {
-    "@commitlint/cli": "^20.0.0",
+    "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@formkit/auto-animate": "^0.9.0",
-    "@pinia/colada": "^0.17.4",
-    "@primeuix/themes": "^1.2.3",
+    "@pinia/colada": "^0.21.0",
+    "@primeuix/themes": "^2.0.0",
     "@sa/materials": "workspace:*",
-    "@unhead/vue": "^2.0.14",
-    "@vueuse/core": "^13.9.0",
+    "@unhead/vue": "^2.0.19",
+    "@vueuse/core": "^14.0.0",
     "highlight.js": "^11.11.1",
-    "naive-ui": "^2.43.1",
-    "pinia": "^3.0.3",
-    "primelocale": "^2.1.7",
-    "primevue": "^4.3.9",
+    "jsonc-eslint-parser": "^2.4.1",
+    "lodash-es": "^4.17.21",
+    "naive-ui": "^2.43.2",
+    "pinia": "^3.0.4",
+    "primeicons": "^7.0.0",
+    "primelocale": "^2.2.2",
+    "primevue": "^4.4.1",
     "ts-enum-util": "^4.1.0",
-    "utils4u": "^4.2.3",
-    "vue": "^3.5.21",
-    "vue-i18n": "^11.1.12",
+    "utils4u": "^5",
+    "vue": "^3.5.24",
+    "vue-i18n": "^11.2.1",
+    "vue-memoize-dict": "^1.1.3",
     "vue-router": "^4.6.3"
   },
   "devDependencies": {
-    "@cloudflare/vite-plugin": "^1.13.2",
+    "@cloudflare/vite-plugin": "^1.15.2",
     "@commitlint/types": "^20.0.0",
-    "@iconify-json/carbon": "^1.2.13",
+    "@iconify-json/carbon": "^1.2.14",
     "@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",
+    "@iconify-json/material-symbols": "^1.2.47",
+    "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
+    "@intlify/unplugin-vue-i18n": "^11.0.1",
+    "@playwright/test": "^1.57.0",
+    "@prettier/plugin-oxc": "^0.1.3",
+    "@primevue/auto-import-resolver": "^4.4.1",
+    "@primevue/metadata": "^4.4.1",
     "@stylelint-types/stylelint-order": "^7.0.0",
     "@stylelint-types/stylelint-scss": "^6.11.0",
-    "@tsconfig/node22": "^22.0.2",
+    "@stylistic/eslint-plugin": "^5.6.1",
+    "@tsconfig/node24": "^24.0.0",
     "@types/html-minifier-terser": "^7.0.2",
     "@types/jsdom": "^27.0.0",
-    "@types/node": "^22.18.1",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^24.10.1",
     "@vant/auto-import-resolver": "^1.3.0",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vitejs/plugin-vue-jsx": "^5.1.1",
-    "@vitest/eslint-plugin": "^1.3.9",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitejs/plugin-vue-jsx": "^5.1.2",
+    "@vitest/eslint-plugin": "^1.4.3",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
+    "boxen": "^8.0.1",
     "consola": "^3.4.2",
-    "eslint": "^9.35.0",
+    "eslint": "^9.39.1",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-oxlint": "~1.23.0",
-    "eslint-plugin-playwright": "^2.2.2",
-    "eslint-plugin-vue": "~10.5.0",
-    "happy-dom": "^20.0.1",
+    "eslint-plugin-jsonc": "^2.21.0",
+    "eslint-plugin-oxlint": "~1.32.0",
+    "eslint-plugin-perfectionist": "^5.0.0",
+    "eslint-plugin-playwright": "^2.3.0",
+    "eslint-plugin-vue": "~10.6.0",
+    "happy-dom": "^20.0.10",
     "html-minifier-terser": "^7.2.0",
     "husky": "^9.1.7",
-    "jsdom": "^27.0.0",
-    "lint-staged": "^16.1.6",
+    "jsdom": "^27.2.0",
+    "lint-staged": "^16.2.7",
+    "nodemon": "^3.1.11",
     "npm-run-all2": "^8.0.4",
     "nprogress": "^0.2.0",
-    "oxlint": "~1.23.0",
+    "oxlint": "~1.29.0",
     "postcss-html": "^1.8.0",
-    "prettier": "3.6.2",
-    "rollup": "^4.52.5",
-    "sass-embedded": "^1.93.2",
-    "stylelint": "^16.25.0",
-    "stylelint-config-recess-order": "^7.3.0",
+    "prettier": "3.7.4",
+    "rollup": "^4.53.3",
+    "sass-embedded": "^1.93.3",
+    "sharp": "^0.34.5",
+    "stylelint": "^16.26.0",
+    "stylelint-config-recess-order": "^7.4.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",
-    "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.0.0",
-    "unplugin-vue-markdown": "^29.1.0",
-    "unplugin-vue-router": "^0.16.0",
-    "vite": "^7.1.5",
-    "vite-plugin-checker": "^0.11.0",
-    "vite-plugin-fake-server": "^2.2.0",
-    "vite-plugin-image-optimizer": "^2.0.2",
-    "vite-plugin-vue-devtools": "^8.0.1",
+    "type-fest": "^5.2.0",
+    "typescript": "~5.9.3",
+    "unocss": "^66.5.9",
+    "unocss-preset-animations": "^1.3.0",
+    "unplugin-auto-import": "^20.2.0",
+    "unplugin-icons": "^22.5.0",
+    "unplugin-vue-components": "^30.0.0",
+    "unplugin-vue-markdown": "^29.2.0",
+    "unplugin-vue-router": "^0.19.0",
+    "vite": "^7.2.4",
+    "vite-plugin-checker": "^0.12.0",
+    "vite-plugin-fake-server": "^2.2.2",
+    "vite-plugin-image-optimizer": "^2.0.3",
+    "vite-plugin-vue-devtools": "^8.0.5",
     "vite-plugin-vue-meta-layouts": "^0.6.1",
     "vite-plugin-webfont-dl": "^3.11.1",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.13",
+    "vue-component-type-helpers": "^3.1.4",
     "vue-i18n-extract": "^2.0.7",
-    "vue-macros": "3.1.1",
-    "vue-tsc": "^3.1.0",
-    "wrangler": "^4.37.1"
+    "vue-macros": "3.1.2",
+    "vue-tsc": "^3.1.8",
+    "wrangler": "^4.50.0"
   }
 }

pnpm-workspace.yaml

@@ -1,2 +1,6 @@
 packages:
-  - "packages/*"
+  - 'packages/*'
+# shamefullyHoist: false # https://pnpm.io/zh/settings#shamefullyhoist
+
+overrides:
+  vue-tsc: $vue-tsc

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

@@ -0,0 +1,15 @@
+#!/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);

src/App.vue

@@ -1,26 +1,18 @@
 <script setup lang="ts">
-import type { GlobalThemeOverrides } from 'naive-ui';
-import { darkTheme } from 'naive-ui';
 import { RouterView } from 'vue-router';
-
-const appStore = useAppStore();
-
-// https://www.naiveui.com/zh-CN/light/docs/customize-theme
-const themeOverrides: GlobalThemeOverrides = {
-  common: {},
-};
+import AppNaiveUIProvider from './AppNaiveUIProvider.vue';
 </script>
 
 <template>
   <DynamicDialog />
   <ConfirmDialog />
-  <Toast />
-  <n-config-provider
-    :theme-overrides
-    preflight-style-disabled
-    :theme="appStore.isDark ? darkTheme : null"
-    abstract
-  >
-    <RouterView />
-  </n-config-provider>
+  <Toast style="z-index: 5000" />
+
+  <AppNaiveUIProvider>
+    <RouterView v-slot="{ Component }">
+      <Transition name="fade" mode="out-in">
+        <component :is="Component" />
+      </Transition>
+    </RouterView>
+  </AppNaiveUIProvider>
 </template>

src/AppNaiveUIProvider.vue

@@ -0,0 +1,58 @@
+<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
+  >
+    <NLoadingBarProvider>
+      <NMessageProvider>
+        <NNotificationProvider>
+          <NModalProvider>
+            <NDialogProvider>
+              <slot></slot>
+              <ContextHolder />
+            </NDialogProvider>
+          </NModalProvider>
+        </NNotificationProvider>
+      </NMessageProvider>
+    </NLoadingBarProvider>
+  </NConfigProvider>
+</template>

src/composables/useMetaLayoutsMenuOptions.tsx

@@ -8,16 +8,7 @@ import IconMenuRounded from '~icons/material-symbols/menu-rounded';
 export function useMetaLayoutsNMenuOptions({ menuInstRef }: { menuInstRef: Ref<MenuInst | null> }) {
   const router = useRouter();
 
-  const { t, te } = useI18n({
-    inheritLocale: true,
-    useScope: 'local',
-    missing: (locale, key) => {
-      consola.warn(`菜单翻译缺失: locale=${locale}, key=${key}`);
-      return key;
-    },
-    fallbackRoot: true,
-    messages: locales4RouteMessages,
-  });
+  const { t, te } = routeI18nInstance.global;
 
   // 获取路由表但是不包含布局路由
   const routes = createGetRoutes(router)();
@@ -26,10 +17,15 @@ export function useMetaLayoutsNMenuOptions({ menuInstRef }: { menuInstRef: Ref<M
   const selectedKey = ref('');
 
   watch(
-    () => router.currentRoute.value.path,
-    (newPath) => {
-      selectedKey.value = newPath;
-      menuInstRef.value?.showOption(newPath); // 展开菜单，确保设定的元素被显示，如果不传入 key 会展示当前选中元素
+    () => 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 },
   );
@@ -48,67 +44,73 @@ export function useMetaLayoutsNMenuOptions({ menuInstRef }: { menuInstRef: Ref<M
     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_MENU_SHOW_DEMOS !== 'true' && route.path.startsWith('/demos')) {
-          return false;
-        }
-        return true;
-      })
-      // 排序路由，确保父路由总是在子路由之前，同级路由则根据 `meta.order` 排序
-      .sort((a: RouteRecordRaw, b: RouteRecordRaw) => {
-        const pathA = a.path;
-        const pathB = b.path;
-        const segmentsA = pathA.split('/').filter(Boolean);
-        const segmentsB = pathB.split('/').filter(Boolean);
-        const parentAPath = `/${segmentsA.slice(0, -1).join('/')}`;
-        const parentBPath = `/${segmentsB.slice(0, -1).join('/')}`;
+    // 过滤路由
+    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;
+    });
 
-        // 如果不是同级路由，则按路径排序，确保父路由在前
-        if (parentAPath !== parentBPath) {
-          return pathA.localeCompare(pathB);
-        }
+    // 排序路由：先按路径深度分组，再按 order 排序
+    const sortedRoutes = validRoutes.slice().sort((a: RouteRecordRaw, b: RouteRecordRaw) => {
+      const pathA = a.path;
+      const pathB = b.path;
 
-        // 同级路由，处理 `meta.order`
-        const orderA = a.meta?.order;
-        const orderB = b.meta?.order;
-        const hasOrderA = orderA !== undefined;
-        const hasOrderB = orderB !== undefined;
+      // 1. 首先按路径深度排序（确保父路由在子路由之前）
+      const depthA = pathA.split('/').filter(Boolean).length;
+      const depthB = pathB.split('/').filter(Boolean).length;
+      if (depthA !== depthB) {
+        return depthA - depthB;
+      }
 
-        // 当一个有 order 而另一个没有时，有 order 的排在前面
-        if (hasOrderA !== hasOrderB) {
-          return hasOrderA ? -1 : 1;
-        }
+      // 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('/')}` : '/';
 
-        // 当两个都有 order 时，按 order 值升序排序
-        if (hasOrderA && hasOrderB) {
-          const orderDiff = orderA - orderB;
-          if (orderDiff !== 0) {
-            return orderDiff;
-          }
-        }
+      // 如果父路径不同，按父路径字母顺序排序
+      if (parentA !== parentB) {
+        return parentA.localeCompare(parentB);
+      }
 
-        // order 相同或都没有 order，按路径字母顺序排序
-        return pathA.localeCompare(pathB);
-      });
+      // 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 validRoutes) {
+    for (const route of sortedRoutes) {
       const pathSegments = route.path.split('/').filter(Boolean);
       const routeName = route.name as string;
 
-      let text = te(routeName) ? t(routeName) : route.meta?.title || routeName;
-      if (import.meta.env.VITE_MENU_SHOW_ORDER === 'true' && route.meta?.order) {
+      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}`;
       }
@@ -147,11 +149,33 @@ export function useMetaLayoutsNMenuOptions({ menuInstRef }: { menuInstRef: Ref<M
       }
     }
 
+    // 添加调试日志
+    if (import.meta.env.DEV) {
+      console.debug(
+        '排序后的路由:',
+        sortedRoutes.map((route) => ({
+          path: route.path,
+          name: route.name,
+          order: route.meta?.order,
+        })),
+      );
+    }
+
     return rootMenus;
   }
 
-  // console.debug('原始路由:', JSON.stringify(routes, null, 0));
-  // console.debug('转换后的菜单:', JSON.stringify(menuOptions.value, null, 0));
+  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,

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

@@ -2,6 +2,7 @@
 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>
@@ -11,6 +12,7 @@ import ToggleSiderButton from './components/ToggleSiderButton.vue';
     <div class="flex items-center">
       <LanguageSwitchButton />
       <ThemeSwitchButton />
+      <UserDropdown />
     </div>
   </div>
 </template>

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

@@ -25,7 +25,7 @@ function handleSelect(key: string) {
   <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 />
+        <IconClarityLanguageLine w-4.5 h-4.5 />
       </template>
       <span>{{ languageLabels[locale] }}</span>
     </NButton>

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

@@ -4,7 +4,7 @@ const appStore = useAppStore();
 const themeLabels: Record<AppThemeMode, string> = {
   light: '浅色',
   dark: '深色',
-  system: '跟随系统',
+  auto: '跟随系统',
 };
 </script>
 
@@ -12,18 +12,18 @@ const themeLabels: Record<AppThemeMode, string> = {
   <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
+      <NButton quaternary @click="appStore.cycleTheme()">
+        <IconLineMdSunnyFilledLoopToMoonFilledLoopTransition
           v-if="appStore.themeMode === 'light'"
           w-4.5
           h-4.5
         />
-        <icon-line-md:moon-filled-to-sunny-filled-loop-transition
+        <IconLineMdMoonFilledToSunnyFilledLoopTransition
           v-else-if="appStore.themeMode === 'dark'"
           w-4.5
           h-4.5
         />
-        <icon-line-md:computer v-else w-4.5 h-4.5 />
+        <IconLineMdComputer v-else w-4.5 h-4.5 />
       </NButton>
     </template>
   </NTooltip>

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

@@ -15,8 +15,8 @@ function toggleCollapsed() {
     {{ 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 />
+        <IconLineMdMenuFoldRight v-if="appStore.sidebarCollapsed" w-4.5 h-4.5 />
+        <IconLineMdMenuFoldLeft v-else w-4.5 h-4.5 />
       </NButton>
     </template>
   </NTooltip>

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

@@ -0,0 +1,45 @@
+<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>
+      <IconMaterialSymbolsAccountCircle w-5 h-5 />
+    </NButton>
+  </NDropdown>
+</template>

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

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

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

@@ -8,12 +8,12 @@ const appStore = useAppStore();
 
 <template>
   <AdminLayout
+    v-model:sider-collapse="appStore.sidebarCollapsed"
     mode="horizontal"
     :footer-visible="!false"
     :tab-visible="!false"
     scroll-mode="content"
     :is-mobile="appStore.isMobile"
-    v-model:sider-collapse="appStore.sidebarCollapsed"
   >
     <template #header>
       <BaseLayoutHeader />
@@ -29,11 +29,11 @@ const appStore = useAppStore();
       <BaseLayoutSider />
     </template>
     <!-- <div>GlobalContent</div> -->
-    <router-view v-slot="{ Component }">
-      <transition name="fade" mode="out-in">
+    <RouterView v-slot="{ Component }">
+      <Transition name="fade" mode="out-in">
         <component :is="Component" />
-      </transition>
-    </router-view>
+      </Transition>
+    </RouterView>
     <!-- <div>ThemeDrawer</div> -->
     <template #footer>
       <div
@@ -49,14 +49,4 @@ const appStore = useAppStore();
 #__SCROLL_EL_ID__ {
   @include scrollbar;
 }
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.25s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
 </style>

src/locales-4-route/en-US.ts

@@ -1,10 +0,0 @@
-export default {
-  Root: 'Index',
-  $Path: '$Path',
-  Demos: 'Demos',
-  DemosApiDemo: 'API Demo',
-  DemosCounterDemo: 'Counter Demo',
-  DemosI18nDemo: 'i18n Demo',
-  DemosWebsocketDemo: 'WebSocket Demo',
-  Home: 'Home',
-} as const satisfies PageTitleLocalizations;

src/locales-4-route/zh-CN.ts

@@ -1,10 +0,0 @@
-export default {
-  Root: '根 (Gēn)',
-  $Path: '$Path',
-  Demos: '示例演示',
-  DemosApiDemo: 'API 调用示例',
-  DemosCounterDemo: '点击计数器',
-  DemosI18nDemo: '国际化示例',
-  DemosWebsocketDemo: 'WebSocket 示例',
-  Home: '首页',
-} as const satisfies PageTitleLocalizations;

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

@@ -0,0 +1,80 @@
+/* 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 { router } from '@/plugins/00.router-plugin';
+import { createGetRoutes } from 'virtual:meta-layouts';
+import { createI18n } from 'vue-i18n';
+import { START_LOCATION } from 'vue-router';
+
+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}`);
+    if (__DEV__) {
+      ToastService.add({
+        severity: 'warn',
+        summary: '菜单翻译缺失',
+        detail: `菜单翻译缺失: locale=${locale}, key=${key}`,
+        life: 5000,
+      });
+    }
+    return key;
+  },
+  fallbackRoot: true,
+  messages: i18nRouteMessages,
+});
+export const routeI18nT = routeI18nInstance.global.t;
+
+watchEffect(
+  () => {
+    locale.value = i18nInstance.global.locale.value;
+  },
+  { flush: 'sync' },
+);
+
+watch(
+  () => i18nInstance.global.locale.value,
+  () => {
+    const { t, te } = routeI18nInstance.global;
+
+    routeI18nInstance.global.locale.value = i18nInstance.global.locale.value;
+
+    if (router.currentRoute.value.name && router.currentRoute.value !== START_LOCATION) {
+      router.currentRoute.value.meta.title = t(router.currentRoute.value.name as string);
+    }
+
+    const routes = createGetRoutes(router)(); // 获取路由表但是不包含布局路由
+
+    routes.forEach((route) => {
+      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,4 +1,4 @@
-# `locales-4-route`
+# route-messages
 
 此目录存放专门用于**路由名称**的国际化（i18n）消息。这些消息通过一套自定义的编译时安全机制，为应用的导航菜单提供标题。
 
@@ -27,7 +27,7 @@
 3.  **编译时检查**：此目录下的每个语言环境文件（如 `en-US.ts`）都必须使用 `satisfies PageTitleLocalizations` 来进行类型断言。
 
     ```typescript
-    // src/locales-4-route/en-US.ts
+    // ./en-US.ts
     export default { ... } satisfies PageTitleLocalizations;
     ```
 
@@ -52,13 +52,13 @@
     使用上一步中自动生成的 `name` 作为键，在此目录的每个语言文件中添加翻译。
 
     ```ts
-    // src/locales-4-route/zh-CN.ts
+    // ./zh-CN.ts
     export default {
       // ... 其他翻译
       DemosApiDemo: 'API 演示',
     } satisfies PageTitleLocalizations;
 
-    // src/locales-4-route/en-US.ts
+    // ./en-US.ts
     export default {
       // ... 其他翻译
       DemosApiDemo: 'API Demo',

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

@@ -0,0 +1,25 @@
+/*eslint perfectionist/sort-objects: "error"*/
+/**
+ * 启用 perfectionist/sort-objects 规则以强制对象键按字母顺序排序
+ * 原因：
+ * 1. 减少多人协作时的合并冲突
+ * 2. 保持代码一致性，提高可维护性
+ *
+ * 运行以下命令自动修复排序：
+ * pnpm exec eslint --fix --no-ignore src/locales-utils/route-messages/
+ */
+
+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,13 +1,13 @@
 import type { I18nOptions } from 'vue-i18n';
 
-const modules = import.meta.glob(['./*.ts', '!./_messages-auto-imports.ts'], {
-  eager: true,
+const modules = import.meta.glob(['./*.ts', '!./route-messages-auto-imports'], {
+  eager: true /* true 为同步，false 为异步 */,
   import: 'default',
 });
 
 type MessageType = Record<string, string>;
 
-export const locales4RouteMessages: I18nOptions['messages'] = Object.entries(modules).reduce(
+export const i18nRouteMessages: I18nOptions['messages'] = Object.entries(modules).reduce(
   (messages, [path, mod]) => {
     const locale = path.replace(/(\.\/|\.ts)/g, '');
     messages[locale] = mod as MessageType;

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

@@ -0,0 +1,25 @@
+/*eslint perfectionist/sort-objects: "error"*/
+/**
+ * 启用 perfectionist/sort-objects 规则以强制对象键按字母顺序排序
+ * 原因：
+ * 1. 减少多人协作时的合并冲突
+ * 2. 保持代码一致性，提高可维护性
+ *
+ * 运行以下命令自动修复排序：
+ * pnpm exec eslint --fix --no-ignore src/locales-utils/route-messages/
+ */
+
+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

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

src/locales/demo/zh-CN.json

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

src/locales/en-US.json

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

src/locales/zh-CN.json

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

src/main.ts

@@ -1,11 +1,14 @@
 import './styles/index.ts';
+
 import { LogLevels } from 'consola';
 import App from './App.vue';
 import { setupPlugins } from './plugins';
 
 consola.level = LogLevels.verbose;
 
-/* `import.meta.glob(${g}, { eager: ${isSync} })`; */
-const autoInstallModules = import.meta.glob('./plugins/!(index).ts', { eager: true });
+const app = createApp(App);
+if (__DEV__) Object.defineProperty(window, '__APP__', { value: app });
+setupPlugins(app);
 
-setupPlugins(createApp(App), autoInstallModules).mount('#app');
+await new Promise((resolve) => setTimeout(resolve, 280));
+app.mount('#app');

src/pages/Login.page.vue

@@ -0,0 +1,87 @@
+<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,11 +1,29 @@
 <script lang="ts" setup>
 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="$router.back()">Back</Button>
+    <Button @click="handleBack">{{ canGoBack ? 'Back' : 'Home' }}</Button>
   </main>
 </template>
 

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

@@ -49,10 +49,10 @@ const callApi = async () => {
         </div>
 
         <button
-          @click="callApi"
           :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

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

@@ -91,10 +91,10 @@ const resetCount = () => {
           <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"
-              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"
             >
               <span class="flex items-center justify-center">
                 <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -111,8 +111,8 @@ const resetCount = () => {
 
             <!-- 原生按钮 (无 touch 事件) -->
             <button
-              @click="incrementCount"
               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">
@@ -128,14 +128,14 @@ const resetCount = () => {
             </button>
 
             <!-- Naive UI 按钮 -->
-            <n-button
-              @click="incrementCount"
+            <NButton
               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">
@@ -148,13 +148,13 @@ const resetCount = () => {
                 </svg>
               </template>
               点击 +1 (Naive UI)
-            </n-button>
+            </NButton>
 
             <!-- 重置按钮 -->
             <button
-              @click="resetCount"
               :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">

src/pages/demos/create.page.vue

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

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

@@ -1,34 +1,37 @@
 <script setup lang="ts">
-definePage({
-  meta: {
-    order: 1,
-  },
-});
-const { t, locale } = useI18n();
+definePage({ meta: { order: 1 } });
+const { t, locale } = useI18n({});
 
 function setLocale(newLocale: 'en-US' | 'zh-CN') {
-  locale.value = newLocale;
+  i18nInstance.global.locale.value = newLocale;
 }
 </script>
 
 <template>
   <div class="p-4">
-    <n-h1>{{ t('page.i18n-demo.title') }}</n-h1>
+    <NH1>{{ t('page.i18n-demo.title') }}</NH1>
 
-    <n-card :title="t('page.i18n-demo.change-language')">
-      <n-p>
+    <NCard :title="t('page.i18n-demo.change-language')">
+      <NP>
         {{ t('page.i18n-demo.current-language') }}:
         <span class="font-bold">{{ locale }}</span>
-      </n-p>
+      </NP>
 
-      <n-p>
+      <NP>
         {{ t('page.i18n-demo.hello', { name: 'Kilo' }) }}
-      </n-p>
+      </NP>
 
-      <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>
+      <NSpace>
+        <NButton type="primary" @click="setLocale('en-US')"> English </NButton>
+        <NButton type="success" @click="setLocale('zh-CN')"> 简体中文 </NButton>
+      </NSpace>
+    </NCard>
+
+    <!-- 这里响应式有问题: -->
+    <NP> $route.meta.title: {{ $route.meta.title }} </NP>
+    <!-- 这样才正常 -->
+    <NP>
+      routeI18nInstance.global.t($route.name): {{ routeI18nInstance.global.t($route.name) }}
+    </NP>
   </div>
 </template>

src/pages/demos/index.page.vue

@@ -24,6 +24,7 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props /* context */)
   </>
 );
 </script>
+
 <template>
   <NCard title="函数式组件（TSX）示例">
     <FComponent prop="some-prop-value" />

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { MessageType } from 'naive-ui';
+import { useDialog, useMessage } from 'naive-ui';
+
+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>
+      <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/primevue-demo.page.vue

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

@@ -227,12 +227,12 @@ onUnmounted(() => {
           <!-- 控制按钮 -->
           <div class="grid grid-cols-2 gap-2">
             <button
-              @click="connectWebSocket"
               :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"
@@ -259,10 +259,10 @@ onUnmounted(() => {
             </button>
 
             <button
-              @click="disconnectWebSocket"
               :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
@@ -284,19 +284,19 @@ onUnmounted(() => {
             <input
               id="messageInput"
               v-model="messageInput"
-              @keyup.enter="sendMessage"
               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
-              @click="sendMessage"
               :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
@@ -309,11 +309,11 @@ onUnmounted(() => {
               发送
             </button>
             <button
-              @click="sendMockData"
               :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
@@ -354,9 +354,9 @@ onUnmounted(() => {
             </h3>
             <div class="flex gap-1">
               <button
-                @click="exportMessages"
                 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
@@ -369,9 +369,9 @@ onUnmounted(() => {
                 导出
               </button>
               <button
-                @click="clearMessages"
                 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

src/pages/index.page.vue

@@ -2,6 +2,6 @@
 
 <template>
   <div>
-    <h1>Index Page</h1>
+    <NButton @click="$router.push({ name: 'DemosCreate' })">DemosCreate</NButton>
   </div>
 </template>

src/plugins/00.app-config.ts

@@ -1,5 +1,6 @@
 export function install({ app }: { app: import('vue').App<Element> }) {
-  app.config.globalProperties.__DEV__ = __DEV__;
+  app.config.globalProperties.__DEV__ =
+    __DEV__; /* vite.config.ts: define: { __DEV__: JSON.stringify(!isBuild) } */
 
   app.config.errorHandler = (error, instance, info) => {
     console.error('Global error:', error);
@@ -10,17 +11,4 @@ export function install({ app }: { app: import('vue').App<Element> }) {
     // 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/00.router-plugin.ts

@@ -2,8 +2,8 @@ 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 { RouteNamedMap } from 'vue-router/auto-routes';
-import { routes, handleHotUpdate } from 'vue-router/auto-routes';
+import type { Router } from 'vue-router';
+import { handleHotUpdate, routes } from 'vue-router/auto-routes';
 
 const setupLayoutsResult = setupLayouts(routes);
 const router = createRouter({
@@ -15,6 +15,10 @@ const router = createRouter({
   strict: true,
 });
 
+router.isReady().then(() => {
+  console.debug('✅ [router is ready]');
+});
+
 router.onError((error) => {
   console.debug('🚨 [router error]:', error);
 });
@@ -32,51 +36,25 @@ export function install({ app }: { app: import('vue').App<Element> }) {
 {
   // 警告：路由守卫的创建顺序会影响执行流程，请勿调整
   createNProgressGuard(router);
-  createLogGuard(router);
-  Object.assign(globalThis, { stack: createStackGuard(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);
+  });
+  // <<<
 }
 
-declare module 'vue-router' {
-  /* definePage({ meta: { title: '示例演示' } }); */
-  interface RouteMeta {
-    /**
-     * @description 是否在菜单中隐藏
-     */
-    hideInMenu?: boolean;
+if (__DEV__) Object.assign(window, { router });
 
-    /**
-     * @description 菜单标题
-     * @deprecated //!⚠️请通过多语言标题方案（搜`PageTitleLocalizations`）维护标题
-     */
-    title?: string;
-
-    /**
-     * @description 使用的布局，设置为 false 则表示不使用布局
-     */
-    layout?: string | false;
-
-    /**
-     * @description 菜单项是否渲染为可点击链接，默认为 true
-     * - true: 使用 RouterLink 包装，可点击跳转
-     * - false: 仅渲染纯文本标签，不可点击（适用于分组标题）
-     */
-    link?: boolean;
-
-    /**
-     * @description 菜单排序权重，数值越小越靠前，未设置则按路径字母顺序排序
-     */
-    order?: number;
-  }
-}
-
-export { router, setupLayoutsResult };
-
-declare global {
-  type PageTitleLocalizations = Record<keyof RouteNamedMap, string>;
-}
-
-if (__DEV__) Object.assign(globalThis, { 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

@@ -0,0 +1,50 @@
+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,25 +1,3 @@
-/* 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> }) {
-  // https://vue-i18n.intlify.dev/guide/essentials/started.html#registering-the-i18n-plugin
-  const i18n = createI18n({
-    legacy: false, // you must set `false`, to use Composition API
-    locale: navigator.language,
-    fallbackRoot: false,
-    // flatJson: true,
-    missing: (locale, key /* , instance, type */) => {
-      consola.warn(`缺少国际化内容: locale='${locale}', key='${key}'`);
-      return `[${key}]`;
-    },
-    missingWarn: !true,
-    fallbackWarn: !true,
-    messages,
-  });
-  app.use(i18n);
+  app.use(i18nInstance);
 }

src/plugins/10.primevue-plugin.ts

@@ -5,11 +5,21 @@
 import Aura from '@primeuix/themes/aura';
 import zhCN from 'primelocale/zh-CN.json';
 import PrimeVue from 'primevue/config';
+import type { PrimeVueConfiguration } from 'primevue/config';
 import StyleClass from 'primevue/styleclass';
+import ToastService from 'primevue/toastservice';
 
 export function install({ app }: { app: import('vue').App<Element> }) {
   app.directive('styleclass', StyleClass);
+
+  // https://github.com/primefaces/primevue/blob/afe6f58ae55e9caf7f9bc094cd453a21a6113001/packages/core/src/config/PrimeVue.js
   app.use(PrimeVue, {
+    zIndex: {
+      modal: 5100,
+      overlay: 5000,
+      menu: 5000,
+      tooltip: 5100,
+    },
     locale: {
       ...zhCN['zh-CN'],
       completed: '已上传',
@@ -24,5 +34,6 @@ export function install({ app }: { app: import('vue').App<Element> }) {
       },
       preset: Aura,
     },
-  });
+  } satisfies PrimeVueConfiguration);
+  app.use(ToastService);
 }

src/plugins/index.ts

@@ -4,13 +4,18 @@
 type UserPlugin = (ctx: UserPluginContext) => void;
 type AutoInstallModule = { [K: string]: unknown; install?: UserPlugin };
 type UserPluginContext = { app: import('vue').App<Element> };
-export function setupPlugins(
-  app: import('vue').App,
-  modules: AutoInstallModule | Record<string, unknown>,
-) {
-  console.group('🔌 Plugins');
-  for (const path in modules) {
-    const module = modules[path] as AutoInstallModule;
+
+const autoInstallModules: AutoInstallModule = import.meta.glob(
+  ['./*.ts', '!./**/*.types.ts', '!./index.ts'],
+  {
+    eager: true /* true 为同步，false 为异步 */,
+  },
+);
+
+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 });
       console.debug(`%c✔ ${path}`, 'color: #07a');

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

@@ -0,0 +1,28 @@
+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/stores/app-store-auto-imports.ts

@@ -0,0 +1,46 @@
+import type { BasicColorSchema } from '@vueuse/core';
+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<BasicColorSchema>({
+  selector: 'html',
+  attribute: 'class',
+  modes: { light: '', dark: 'app-dark', auto: '' },
+  disableTransition: false,
+  initialValue: 'auto',
+});
+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/app-store.ts

@@ -1,64 +0,0 @@
-import { useLocalStorage, useMediaQuery, usePreferredColorScheme } from '@vueuse/core';
-import { defineStore } from 'pinia';
-import { computed, watch } from 'vue';
-
-export const APP_THEME_MODES = ['light', 'dark', 'system'] as const;
-export type AppThemeMode = (typeof APP_THEME_MODES)[number];
-
-const DARK_CLASS = 'app-dark';
-
-export const useAppStore = defineStore('app', () => {
-  const themeMode = useLocalStorage<AppThemeMode>('app-theme-mode', 'system');
-  const preferredColor = usePreferredColorScheme();
-
-  // 侧边栏展开/收起状态
-  const sidebarCollapsed = useLocalStorage<boolean>('app-sidebar-collapsed', false);
-
-  // 计算实际使用的主题
-  const actualTheme = computed(() =>
-    themeMode.value === 'system'
-      ? preferredColor.value === 'dark'
-        ? 'dark'
-        : 'light'
-      : themeMode.value,
-  );
-
-  // 是否是暗色主题
-  const isDark = computed(() => actualTheme.value === 'dark');
-
-  // 是否是移动端
-  const isMobile = useMediaQuery('(max-width: 768px)');
-
-  // 更新 DOM 类名
-  function updateDomClass() {
-    document.documentElement.classList.toggle(DARK_CLASS, isDark.value);
-  }
-
-  // 循环切换主题
-  function cycleTheme() {
-    const currentIndex = APP_THEME_MODES.indexOf(themeMode.value);
-    const nextIndex = (currentIndex + 1) % APP_THEME_MODES.length;
-    themeMode.value = APP_THEME_MODES[nextIndex]!;
-  }
-
-  // 切换侧边栏展开/收起
-  function toggleSidebar() {
-    sidebarCollapsed.value = !sidebarCollapsed.value;
-  }
-
-  // 监听主题变化，更新 DOM
-  watch(isDark, updateDomClass, { immediate: true });
-
-  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

@@ -0,0 +1,45 @@
+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/styles/css/reset-primevue.css

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

src/styles/css/transition.css

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

stylelint.config.mjs

@@ -41,5 +41,6 @@ export default defineConfig({
     // SCSS 专用的 at-rule 规则会自动处理 @include, @mixin 等
     // 'scss/at-rule-no-unknown': true,
     // <<<<<
+    'selector-class-pattern': null,
   },
 });

tsconfig.app.json

@@ -14,7 +14,15 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "~/*": ["./src/*"]
     }
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "vue-macros/volar",
+      "unplugin-vue-router/volar/sfc-route-blocks",
+      "unplugin-vue-router/volar/sfc-typed-router"
+    ]
   }
 }

tsconfig.node.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@tsconfig/node22/tsconfig.json",
+  "extends": "@tsconfig/node24/tsconfig.json",
   "include": [
     "vite.config.*",
     "vitest.config.*",

typed-router.d.ts

@@ -2,7 +2,7 @@
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection ES6UnusedImports
-// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// Generated by unplugin-vue-router. !! DO NOT MODIFY THIS FILE !!
 // It's recommended to commit this file.
 // Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
 
@@ -58,6 +58,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    'DemosCreate': RouteRecordInfo<
+      'DemosCreate',
+      '/demos/create',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     'DemosI18nDemo': RouteRecordInfo<
       'DemosI18nDemo',
       '/demos/i18n-demo',
@@ -65,6 +72,20 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    'DemosNaiveUiDemo': RouteRecordInfo<
+      'DemosNaiveUiDemo',
+      '/demos/naive-ui-demo',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    'DemosPrimevueDemo': RouteRecordInfo<
+      'DemosPrimevueDemo',
+      '/demos/primevue-demo',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     'DemosWebsocketDemo': RouteRecordInfo<
       'DemosWebsocketDemo',
       '/demos/websocket-demo',
@@ -79,6 +100,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    'Login': RouteRecordInfo<
+      'Login',
+      '/Login',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
   }
 
   /**
@@ -122,12 +150,30 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/demos/create.page.vue': {
+      routes:
+        | 'DemosCreate'
+      views:
+        | never
+    }
     'src/pages/demos/i18n-demo.page.vue': {
       routes:
         | 'DemosI18nDemo'
       views:
         | never
     }
+    'src/pages/demos/naive-ui-demo/index.page.vue': {
+      routes:
+        | 'DemosNaiveUiDemo'
+      views:
+        | never
+    }
+    'src/pages/demos/primevue-demo.page.vue': {
+      routes:
+        | 'DemosPrimevueDemo'
+      views:
+        | never
+    }
     'src/pages/demos/websocket-demo.page.vue': {
       routes:
         | 'DemosWebsocketDemo'
@@ -140,6 +186,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/Login.page.vue': {
+      routes:
+        | 'Login'
+      views:
+        | never
+    }
   }
 
   /**

vite-plugins/00.vue-macros.ts

@@ -1,26 +1,33 @@
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-import { getPascalCaseRouteName } from 'unplugin-vue-router';
 import vueRouter from 'unplugin-vue-router/vite';
-import type { PluginOption } from 'vite';
 import VueMacros from 'vue-macros/vite';
 
-export default [
-  VueMacros({
-    plugins: {
-      vue: vue({ include: [/\.vue$/, /\.md$/] }),
-      vueJsx: vueJsx(),
+import type { LoadPluginFunction } from './_loadPlugins';
 
-      // https://uvr.esm.is/guide/configuration.html
-      // https://github.com/posva/unplugin-vue-router
-      // ⚠️ Vue must be placed after VueRouter()
-      vueRouter: vueRouter({
-        exclude: ['**/__*', '**/__*/**/*'],
-        extensions: ['.page.vue', '.page.md'],
-        getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
-        logs: false,
-        routesFolder: 'src/pages',
-      }),
-    },
-  }),
-] satisfies PluginOption;
+export const loadPlugin: LoadPluginFunction = async (_pluginLoadOptions) => {
+  return [
+    VueMacros({
+      plugins: {
+        vue: vue({ include: [/\.vue$/, /\.md$/] }),
+        vueJsx: vueJsx(),
+
+        // https://uvr.esm.is/guide/configuration.html
+        // https://github.com/posva/unplugin-vue-router
+        // ⚠️ Vue must be placed after VueRouter()
+        vueRouter: vueRouter({
+          routesFolder: 'src/pages',
+          extensions: ['.page.vue', '.page.md'],
+          exclude: ['**/__*', '**/__*/**/*'],
+          getRouteName: (await import('unplugin-vue-router')).getPascalCaseRouteName,
+          beforeWriteFiles(rootRoute) {
+            for (/* 深度优先遍历 */ const route of rootRoute.traverseDFS()) {
+              route.addToMeta({ _: route.fullPath });
+            }
+          },
+          logs: !true,
+        }),
+      },
+    }),
+  ];
+};

vite-plugins/01.unocss.ts

@@ -1,8 +1,13 @@
-import type { PluginOption } from 'vite';
 import UnoCSS from 'unocss/vite';
 
-export default [
-  // https://github.com/antfu/unocss
-  // see uno.config.ts for config
-  UnoCSS(),
-] satisfies PluginOption;
+import type { LoadPluginFunction } from './_loadPlugins';
+
+export const loadPlugin: LoadPluginFunction = (_pluginLoadOptions) => {
+  return [
+    // https://github.com/antfu/unocss
+    // see uno.config.ts for config
+    UnoCSS({
+      checkImport: true,
+    }),
+  ];
+};

vite-plugins/01.unplugin-vue-i18n.ts

@@ -1,18 +1,21 @@
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
-import type { PluginOption } from 'vite';
 
-export default [
-  // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
-  VueI18nPlugin({
-    /* options */
-    // locale messages resource pre-compile option
-    include: ['src/locales/**'],
+import type { LoadPluginFunction } from './_loadPlugins';
 
-    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#transformi18nblock
-    // transformI18nBlock(src) {
-    //   console.debug(`src :>> `, src);
-    //   console.debug(`typeof src :>> `, typeof src);
-    //   return src as string;
-    // },
-  }),
-] satisfies PluginOption;
+export const loadPlugin: LoadPluginFunction = (_pluginLoadOptions) => {
+  return [
+    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
+    VueI18nPlugin({
+      /* options */
+      // locale messages resource pre-compile option
+      include: ['src/locales/**'],
+
+      // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#transformi18nblock
+      // transformI18nBlock(src) {
+      //   console.debug(`src :>> `, src);
+      //   console.debug(`typeof src :>> `, typeof src);
+      //   return src as string;
+      // },
+    }),
+  ];
+};

vite-plugins/01.unplugin-vue-markdown.ts

@@ -1,9 +1,12 @@
-import type { PluginOption } from 'vite';
 import Markdown from 'unplugin-vue-markdown/vite';
 
-export default [
-  // https://github.com/unplugin/unplugin-vue-markdown
-  Markdown({
-    headEnabled: true,
-  }),
-] satisfies PluginOption;
+import type { LoadPluginFunction } from './_loadPlugins';
+
+export const loadPlugin: LoadPluginFunction = (_pluginLoadOptions) => {
+  return [
+    // https://github.com/unplugin/unplugin-vue-markdown
+    Markdown({
+      headEnabled: true,
+    }),
+  ];
+};

vite-plugins/01.vite-plugin-vue-meta-layouts.ts

@@ -1,17 +1,20 @@
-import type { PluginOption } from 'vite';
 import MetaLayouts from 'vite-plugin-vue-meta-layouts';
 
-export default [
-  // https://github.com/dishait/vite-plugin-vue-meta-layouts
-  MetaLayouts({
-    target: 'src/layouts',
-    excludes: ['**/!(the-)*.vue'], // 排除非 the- 开头的文件。
-    metaName: 'layout',
-    // defaultLayout: 'sakai-vue/AppLayout',
-    // defaultLayout: 'naive-ui/AppLayout',
-    defaultLayout: 'base-layout/the-base-layout',
-    // !⬇️: 当设置为 `sync` 时，注意`import 'virtual:uno.css'`的顺序问题。
-    // importMode: 'sync', // 默认为自动处理，SSG 时为 sync，非 SSG 时为 async
-    skipTopLevelRouteLayout: true, // 打开修复 https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134，默认为 false 关闭
-  }),
-] satisfies PluginOption;
+import type { LoadPluginFunction } from './_loadPlugins';
+
+export const loadPlugin: LoadPluginFunction = (_pluginLoadOptions) => {
+  return [
+    // https://github.com/dishait/vite-plugin-vue-meta-layouts
+    MetaLayouts({
+      target: 'src/layouts',
+      excludes: ['**/!(the-)*.vue'], // 排除非 the- 开头的文件。
+      metaName: 'layout',
+      // defaultLayout: 'sakai-vue/AppLayout',
+      // defaultLayout: 'naive-ui/AppLayout',
+      defaultLayout: 'base-layout/the-base-layout',
+      // !⬇️: 当设置为 `sync` 时，注意`import 'virtual:uno.css'`的顺序问题。
+      // importMode: 'sync', // 默认为自动处理，SSG 时为 sync，非 SSG 时为 async
+      skipTopLevelRouteLayout: true, // 打开修复 https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134，默认为 false 关闭
+    }),
+  ];
+};

vite-plugins/02.unplugin-auto-import.ts

@@ -4,11 +4,11 @@ import path from 'node:path';
 
 import AutoImport from 'unplugin-auto-import/vite';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+import IconsResolver from 'unplugin-icons/resolver';
 import Icons from 'unplugin-icons/vite';
 import Components from 'unplugin-vue-components/vite';
 import { VueRouterAutoImports } from 'unplugin-vue-router';
 import { createUtils4uAutoImports } from 'utils4u/auto-imports';
-import type { ConfigEnv, PluginOption } from 'vite';
 
 // >>>>>
 // eslint-disable-next-line import/no-duplicates
@@ -22,12 +22,14 @@ import { TDesignResolver } from 'unplugin-vue-components/resolvers';
 
 import { PrimeVueResolver } from '@primevue/auto-import-resolver';
 
-import IconsResolver from 'unplugin-icons/resolver';
-
 import { VantResolver } from '@vant/auto-import-resolver';
 // <<<<<
 
+import type { LoadPluginFunction } from './_loadPlugins';
+
 function _getNaiveUiComponentNames() {
+  // [dtsTsx](https://github.com/unplugin/unplugin-vue-components/pull/673/files/84e80738885cfe11298f41f070cda94a7a779276)
+
   // 方法1: 从 web-types.json 读取（推荐）
   const webTypesPath = path.resolve('node_modules/naive-ui/web-types.json');
   if (fs.existsSync(webTypesPath)) {
@@ -54,7 +56,7 @@ function _getNaiveUiComponentNames() {
   return [];
 }
 
-export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
+export const loadPlugin: LoadPluginFunction = (_pluginLoadOptions) => {
   return [
     // https://github.com/antfu/unplugin-auto-import
     AutoImport({
@@ -62,7 +64,7 @@ export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
       dirs: [
         // 'src/utils',
         'src/composables',
-        'src/stores',
+        // 'src/stores',
         // 匹配所有 -auto-imports.ts / -auto-imports.tsx 结尾的文件
         'src/**/*-auto-imports.{ts,tsx}',
       ],
@@ -72,17 +74,17 @@ export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
         'pinia',
         '@vueuse/core',
         VueRouterAutoImports,
-        createUtils4uAutoImports([]),
+        createUtils4uAutoImports(['primevue']),
         {
           'consola/browser': ['consola'],
-          'vue-router/auto': ['useLink'],
+          'unplugin-vue-router/data-loaders/basic': ['defineBasicLoader'],
           'naive-ui': [
             'useModal',
             'useDialog',
             'useMessage',
             'useNotification',
             'useLoadingBar',
-            ..._getNaiveUiComponentNames(),
+            // ..._getNaiveUiComponentNames(),
           ],
         },
       ],
@@ -91,12 +93,25 @@ export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
     // https://github.com/antfu/unplugin-vue-components
     Components({
       syncMode: 'default',
+      dtsTsx: true,
+
       // `__`开头的
       excludeNames: [/^__/],
       // allow auto load markdown components under `./src/components/`
       extensions: ['vue', 'md'],
-      // allow auto import and register components used in markdown
-      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+
+      include: [
+        // https://github.com/unplugin/unplugin-vue-components/blob/c9117ae93f60f81c8b5a41890cb7fa0133f34a12/src/core/unplugin.ts#L17
+
+        /\.vue$/,
+        /\.vue\?vue/,
+        /\.vue\.[tj]sx?\?vue/, // for vue-loader with experimentalInlineMatchResource enabled
+        /\.vue\?v=/,
+        //
+        /\.md$/, // allow auto import and register components used in markdown
+        /\.tsx/,
+      ],
+
       resolvers: [
         AntDesignVueResolver({
           importStyle: false, // css in js
@@ -127,4 +142,4 @@ export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
       },
     }),
   ];
-}
+};

vite-plugins/09.index-html-plugin.ts

@@ -1,5 +1,7 @@
-import type { PluginOption } from 'vite';
 import { minify as minifyHtml } from 'html-minifier-terser';
+import type { PluginOption } from 'vite';
+
+import type { LoadPluginFunction } from './_loadPlugins';
 
 function IndexHtmlPlugin(): PluginOption {
   return {
@@ -25,4 +27,79 @@ function IndexHtmlPlugin(): PluginOption {
   };
 }
 
-export default [IndexHtmlPlugin()] satisfies PluginOption[];
+function ___(): PluginOption {
+  // https://github.com/hu3dao/vite-plugin-debug/blob/2935025e8ce082b9a5aef04766bcae3e996b3e55/src/index.ts
+  return {
+    name: 'vant-touch-emulator-online',
+    apply: 'build',
+    transformIndexHtml(html) {
+      return {
+        html,
+        tags: [
+          {
+            tag: 'script',
+            attrs: {
+              src: 'https://testingcf.jsdelivr.net/npm/@vant/touch-emulator/dist/index.min.js',
+              // 这里的 `.min.js` 是 jsDelivr 的特殊处理
+              // src: 'https://unpkg.luckincdn.com/@vant/touch-emulator@1.4.0/dist/index.js',
+            },
+            injectTo: 'body',
+          },
+
+          // >>>>> eruda
+
+          {
+            tag: 'script',
+            attrs: {
+              src: 'https://testingcf.jsdelivr.net/npm/eruda/eruda.js',
+            },
+            injectTo: 'body',
+          },
+          {
+            tag: 'script',
+            children: `eruda.init();`,
+            injectTo: 'body',
+          },
+          // https://eruda.liriliri.io/zh/docs/#快速上手
+          //   import('eruda').then(({ default: eruda }) => {
+          //     eruda.init({
+          //       defaults: {
+          //         transparency: 0.9,
+          //       },
+          //     })
+          //     /* eruda.show(); */
+          //   })
+          // }
+          // <<<<<
+
+          // >>>>> vConsole
+          {
+            tag: 'script',
+            attrs: {
+              src: 'https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js',
+            },
+            injectTo: 'body',
+          },
+          {
+            tag: 'script',
+            children: `new window.VConsole();`,
+            injectTo: 'body',
+          },
+          // <<<<<
+        ],
+      };
+    },
+  };
+}
+
+export const loadPlugin: LoadPluginFunction = (pluginLoadOptions) => {
+  const { mode, env } = pluginLoadOptions;
+  // return [___()];
+  if (mode !== 'production') {
+    return { plugins: [], message: '仅在生产模式下启用' };
+  }
+  if (env.VITE_BUILD_MINIFY !== 'true') {
+    return { plugins: [], message: `已通过环境变量禁用: VITE_BUILD_MINIFY=${env.VITE_BUILD_MINIFY}` };
+  }
+  return IndexHtmlPlugin();
+};

vite-plugins/09.vite-plugin-fake-server.ts

@@ -1,16 +1,16 @@
-import { consola } from 'consola';
-import type { ConfigEnv, PluginOption } from 'vite';
 import { vitePluginFakeServer } from 'vite-plugin-fake-server';
-// https://github.com/condorheroblog/vite-plugin-fake-server?tab=readme-ov-file#usage
 
-export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
-  if (_configEnv.mode !== 'development') {
-    consola.info('fake server plugin is disabled in non-development mode.');
-    return [];
+import type { LoadPluginFunction } from './_loadPlugins';
+
+// https://github.com/condorheroblog/vite-plugin-fake-server?tab=readme-ov-file#usage
+export const loadPlugin: LoadPluginFunction = (pluginLoadOptions) => {
+  const { mode } = pluginLoadOptions;
+  if (mode !== 'development') {
+    return { plugins: [], message: '仅在开发模式下启用' };
   }
   return vitePluginFakeServer({
     basename: 'fake-api',
     enableProd: true,
     include: 'fake',
   });
-}
+};

vite-plugins/09.vite-plugin-image-optimizer.ts

@@ -1,9 +1,12 @@
-import type { PluginOption } from 'vite';
 import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
 
-export default [
-  // https://github.com/FatehAK/vite-plugin-image-optimizer?tab=readme-ov-file#default-configuration
-  ViteImageOptimizer({
-    /* pass your config */
-  }),
-] satisfies PluginOption;
+import type { LoadPluginFunction } from './_loadPlugins';
+
+export const loadPlugin: LoadPluginFunction = (_pluginLoadOptions) => {
+  return [
+    // https://github.com/FatehAK/vite-plugin-image-optimizer?tab=readme-ov-file#default-configuration
+    ViteImageOptimizer({
+      /* pass your config */
+    }),
+  ];
+};

vite-plugins/09.vite-plugin-vue-devtools.ts

@@ -1,20 +1,27 @@
-import consola from 'consola';
-import type { ConfigEnv, PluginOption } from 'vite';
-import { loadEnv } from 'vite';
 import vueDevTools from 'vite-plugin-vue-devtools';
 
-export function loadPlugin(configEnv: ConfigEnv): PluginOption {
-  const env = loadEnv(configEnv.mode, process.cwd());
+import type { LoadPluginFunction } from './_loadPlugins';
 
-  if (configEnv.command === 'build') {
-    consola.info('vue-devtools plugin is not used in build mode.');
-    return [];
+export const loadPlugin: LoadPluginFunction = (_pluginLoadOptions) => {
+  const { mode } = _pluginLoadOptions;
+  if (mode !== 'development') {
+    return { plugins: [], message: '仅在开发模式下启用' };
   }
 
-  if (env.VITE_ENABLE_VUE_DEVTOOLS !== 'true') {
-    consola.info('vue-devtools plugin disabled by env');
-    return [];
+  let launchEditor = 'code';
+  let message: string | undefined;
+
+  if (process.env.TERM_PROGRAM_VERSION?.toLowerCase()?.includes('insider')) {
+    launchEditor = 'code-insiders';
+    message = '检测到 VSCode Insiders 环境';
   }
 
-  return [vueDevTools()];
-}
+  return {
+    plugins: [
+      vueDevTools({
+        launchEditor: launchEditor,
+      }),
+    ],
+    message,
+  };
+};

vite-plugins/100.cloudflare.ts

@@ -1,15 +1,17 @@
 import { cloudflare } from '@cloudflare/vite-plugin';
 
-import type { ConfigEnv, PluginOption } from 'vite';
+import type { LoadPluginFunction } from './_loadPlugins';
 
-export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
-  if (_configEnv.mode === 'test') {
-    console.log('cloudflare plugin disabled in test mode');
-    return [];
+export const loadPlugin: LoadPluginFunction = (pluginLoadOptions) => {
+  const { mode, env } = pluginLoadOptions;
+  if (mode === 'test') {
+    return { plugins: [], message: '在测试模式下禁用' };
   }
-  if (process.env.VITE_CLOUDFLARE_SERVER_ENABLED !== 'true') {
-    console.log('cloudflare plugin disabled by env');
-    return [];
+  if (env.VITE_CLOUDFLARE_SERVER_ENABLED !== 'true') {
+    return {
+      plugins: [],
+      message: `已通过环境变量禁用: VITE_CLOUDFLARE_SERVER_ENABLED=${env.VITE_CLOUDFLARE_SERVER_ENABLED}`,
+    };
   }
   return [cloudflare()];
-}
+};

vite-plugins/_loadPlugins.ts

@@ -1,28 +1,47 @@
+import boxen from 'boxen';
+import consola from 'consola';
 import path from 'node:path';
 import { pathToFileURL } from 'node:url';
-
-import consola from 'consola';
 import { glob } from 'tinyglobby';
 import type { ConfigEnv, PluginOption } from 'vite';
+import { loadEnv } from 'vite';
+
+export type LoadPluginFunction = (
+  configEnv: ConfigEnv & {
+    env: Record<string, string>;
+  },
+) => PluginOption | LoadPluginResult;
+export interface LoadPluginResult {
+  plugins: PluginOption;
+  message?: string;
+}
 
-type LoadPluginFunction = (configEnv: ConfigEnv) => PluginOption;
 export async function loadPlugins(configEnv: ConfigEnv): Promise<PluginOption[]> {
   const plugins: PluginOption[] = [];
 
-  consola.start('开始加载 Vite 插件...');
+  const cwd = path.resolve(import.meta.dirname);
 
   const pluginEntries = await glob('**/*.ts', {
     absolute: true,
-    cwd: path.resolve(import.meta.dirname),
+    cwd,
     ignore: [
       '**/*.d.ts',
       '**/*.disabled.ts',
       '**/x-*.ts', // 禁用以 x- 开头的插件文件
+      '**/*-x.ts', // 禁用以 -x 结尾的插件文件
+      '**/*-X.ts', // 禁用以 -X 结尾的插件文件
       '**/_*',
     ],
   });
 
-  consola.info(`找到 ${pluginEntries.length} 个插件文件`);
+  const relativeCwd = path.relative(process.cwd(), cwd);
+  console.time('加载插件');
+  consola.log(
+    boxen(`正在加载 Vite 插件... (./${relativeCwd})`, {
+      borderStyle: 'classic',
+      borderColor: 'cyan',
+    }),
+  );
 
   // 计算最长的文件名长度，用于对齐输出
   const maxNameLength = Math.max(...pluginEntries.map((entry) => path.basename(entry).length));
@@ -33,36 +52,39 @@ export async function loadPlugins(configEnv: ConfigEnv): Promise<PluginOption[]>
     const imported = await import(pathToFileURL(entry).href);
 
     const loadPlugin = imported.loadPlugin as LoadPluginFunction | undefined;
-    let plugin: PluginOption | undefined;
-    let loadMethod = '';
 
-    // 优先使用 loadPlugin 函数（接收 configEnv 参数）
-    if (loadPlugin && typeof loadPlugin === 'function') {
-      plugin = loadPlugin(configEnv);
-      loadMethod = 'loadPlugin';
-    } else if (imported.default) {
-      plugin = imported.default;
-      loadMethod = 'default';
-    } else {
-      consola.warn(`插件未导出有效内容: ${paddedName}`);
-      continue; // 跳过无效插件
+    if (!loadPlugin || typeof loadPlugin !== 'function') {
+      consola.warn(`插件未导出 loadPlugin 函数: ${paddedName}`);
+      continue;
     }
 
-    if (plugin) {
-      const pluginArray = Array.isArray(plugin) ? plugin : [plugin];
-      const validPlugins = pluginArray.filter(Boolean); // 过滤掉 null/undefined
-      const pluginCount = validPlugins.length;
+    const env = loadEnv(configEnv.mode, process.cwd());
+    const result = loadPlugin({ ...configEnv, env });
 
-      if (pluginCount > 0) {
-        plugins.push(...validPlugins);
-        consola.success(`${paddedName} → ${pluginCount} 个实例 (${loadMethod})`);
-      } else {
-        consola.info(`${paddedName} 返回了空数组或无效值`);
-      }
+    // 判断是否是 LoadPluginResult 对象
+    const isResultObject = (val: unknown): val is LoadPluginResult =>
+      typeof val === 'object' && val !== null && 'plugins' in val;
+
+    const plugin = isResultObject(result) ? result.plugins : result;
+    const message = isResultObject(result) ? result.message : undefined;
+
+    const pluginArray = Array.isArray(plugin) ? plugin : [plugin];
+    const validPlugins = pluginArray.filter(Boolean);
+    const pluginCount = validPlugins.length;
+
+    if (pluginCount > 0) {
+      plugins.push(...validPlugins);
+      const suffix = message ? ` (${message})` : '';
+      consola.info(`${paddedName} → ${pluginCount} 个实例${suffix}`);
+    } else if (message) {
+      consola.info(`${paddedName} → ${message}`);
+    } else {
+      consola.info(`${paddedName} 返回了空数组或无效值`);
     }
   }
 
-  consola.success(`✅ 总共加载了 ${plugins.length} 个插件实例`);
+  consola.success(`共 ${pluginEntries.length} 个插件文件，已加载 ${plugins.length} 个实例`);
+  console.timeEnd('加载插件');
 
   return plugins;
 }

vite-plugins/_x-demo.disabled.ts

@@ -1,9 +1,16 @@
-import type { ConfigEnv, PluginOption } from 'vite';
+import type { LoadPluginFunction } from './_loadPlugins';
 
-export default [
-  // ...
-] satisfies PluginOption;
+export const loadPlugin: LoadPluginFunction = (_pluginLoadOptions) => {
+  const env = _pluginLoadOptions.env;
 
-export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
+  // 示例：根据环境变量禁用插件并返回消息
+  if (env.VITE_DEMO_ENABLED !== 'true') {
+    return {
+      plugins: [],
+      message: `已通过环境变量禁用: VITE_DEMO_ENABLED=${env.VITE_DEMO_ENABLED}`,
+    };
+  }
+
+  // 正常返回插件
   return [];
-}
+};

vite-plugins/x-vite-plugin-zip-file.ts

@@ -1,17 +0,0 @@
-import type { PluginOption } from 'vite';
-
-export default [
-  // // 检查是否在VS Code终端中运行
-  // if (process.env.TERM_PROGRAM === 'vscode' || process.env.VSCODE_PID) {
-  //   // plugins.push(
-  //   //   // 构建后自动将dist目录打包成zip文件
-  //   //   viteArchiverPlugin({
-  //   //     addTimestamp: false, // 是否添加时间戳到输出文件名
-  //   //     format: 'zip', // 输出的压缩文件格式
-  //   //     outputDir: '', // 输出目录，默认为项目根目录
-  //   //     outputFileName: 'dist', // 输出的zip文件名（不含扩展名）
-  //   //     sourceDir: 'dist', // 要打包的源目录
-  //   //   }),
-  //   // )
-  // }
-] satisfies PluginOption;

vite.config.rollup.ts

@@ -1,6 +1,6 @@
-import type { ManualChunkMeta, PreRenderedAsset, RollupOptions } from 'rollup';
+import type { /* ManualChunkMeta, PreRenderedAsset, */ RollupOptions } from 'rollup';
 
-import path from 'node:path';
+// import path from 'node:path';
 
 // https://www.npmjs.com/package/utils4u/v/2.19.2?activeTab=code
 
@@ -12,94 +12,95 @@ export const viteConfigRollupOptions: RollupOptions = {
     if (warning.code === 'EVAL' && warning.id?.includes('node_modules/protobufjs')) return;
     warn(warning);
   }, */
-
   output: {
-    // Keep hashed file names predictable across entry, chunk, and asset outputs.
-    entryFileNames: 'entry/[name].[hash].js', // 默认：	"[name].js"
-    chunkFileNames: 'chunk/[name].[hash].js', // 默认：	"[name]-[hash].js"
-    // assetFileNames:'', // 默认：	"assets/[name]-[hash][extname]"
-    // https://cn.rollupjs.org/configuration-options/#output-assetfilenames
-    assetFileNames(chunkInfo: PreRenderedAsset) {
-      const names = chunkInfo.names;
-
-      if (names.length !== 1) {
-        console.error('Multiple names for asset:', chunkInfo);
-        process.exit(1);
-      }
-
-      const assetName = names[0];
-      const ext = assetName.split('.').pop()?.toLowerCase();
-      if (ext && /png|jpe?g|gif|svg|webp|avif/.test(ext)) {
-        return 'chunks/images/[name].[hash][extname]';
-      }
-      if (ext && /woff2?|ttf|otf/.test(ext)) {
-        return 'chunks/fonts/[name].[hash][extname]';
-      }
-      if (ext === 'css') {
-        return 'chunks/css/[name].[hash][extname]';
-      }
-      return '_chunks/[name].[hash][extname]';
-    },
-
-    manualChunks: (id: string, _meta: ManualChunkMeta) => {
-      if (['/src/layouts'].some((prefix) => id.includes(prefix))) {
-        return 'layouts';
-      }
-
-      if (id.includes('meta-layouts')) {
-        // console.debug(`id :>> `, id); // id :>>  virtual:meta-layouts
-        // 这里很奇怪，打印 id 是`virtual:meta-layouts`，但是 `'virtual:meta-layouts' === id` 却是 false
-        return 'lib-meta-layouts';
-      }
-
-      if (id.includes('index.page.vue')) {
-        const parentDir = path.basename(path.dirname(id));
-        return `${parentDir}-index.page`;
-      }
-
-      if (!id.includes('node_modules')) return;
-      // 处理 pnpm 的特殊路径结构
-      let packageName;
-      if (id.includes('.pnpm')) {
-        // pnpm 路径: .pnpm/naive-ui@2.43.1_vue@3.5.22/node_modules/naive-ui/...
-        const pnpmMatch = id.match(/\.pnpm\/(.+?)@/);
-        if (pnpmMatch) {
-          packageName = pnpmMatch[1];
-        }
-      } else {
-        // 普通路径: node_modules/lodash/...
-        const normalMatch = id.match(/node_modules\/(@[^/]+\/[^/]+|[^/]+)\//);
-        if (normalMatch) {
-          packageName = normalMatch[1];
-        }
-      }
-
-      if (packageName) {
-        if (['highlight.js'].includes(packageName)) {
-          return 'lib-hljs';
-        }
-
-        // 根据包名分组
-        if (['consola', 'lodash', '@juggle+resize-observer', 'vueuc'].includes(packageName)) {
-          return 'lib-vendor';
-        }
-
-        if (['naive-ui'].includes(packageName) && id.includes('_internal')) {
-          return 'lib-naive-ui-internal';
-        }
-
-        if (['naive-ui'].includes(packageName)) {
-          return 'lib-naive-ui';
-        }
-
-        if (['primelocale', 'primevue', '@primeuix'].some((name) => packageName!.includes(name))) {
-          return 'lib-primevue';
-        }
-
-        if (['vue', 'vue-router', 'pinia', 'vue-demi', 'vue-i18n'].includes(packageName)) {
-          return 'lib-vue-vendor';
-        }
-      }
-    },
+    // 如果一个 chunk 小于 10KB，Rollup 会尝试将它合并到其他 chunk 中。这样可以避免产生大量碎片文件
+    experimentalMinChunkSize: 10 * 1024,
+    // // Keep hashed file names predictable across entry, chunk, and asset outputs.
+    // entryFileNames: 'entry/[name].[hash].js', // 默认：	"[name].js"
+    // chunkFileNames: 'chunk/[name].[hash].js', // 默认：	"[name]-[hash].js"
+    // // assetFileNames:'', // 默认：	"assets/[name]-[hash][extname]"
+    // // https://cn.rollupjs.org/configuration-options/#output-assetfilenames
+    // assetFileNames(chunkInfo: PreRenderedAsset) {
+    //   const names = [...new Set(chunkInfo.names)];
+    //   if (names.length !== 1) {
+    //     console.error('Multiple names for asset:', chunkInfo);
+    //     process.exit(1);
+    //   }
+    //   const assetName = names[0];
+    //   const ext = assetName.split('.').pop()?.toLowerCase();
+    //   if (ext && /png|jpe?g|gif|svg|webp|avif/.test(ext)) {
+    //     return 'chunks/images/[name].[hash][extname]';
+    //   }
+    //   if (ext && /woff2?|ttf|otf/.test(ext)) {
+    //     return 'chunks/fonts/[name].[hash][extname]';
+    //   }
+    //   if (ext === 'css') {
+    //     return 'chunks/css/[name].[hash][extname]';
+    //   }
+    //   return '_chunks/[name].[hash][extname]';
+    // },
+    // manualChunks: (id: string, _meta: ManualChunkMeta) => {
+    //   // https://github.com/unocss/unocss/issues/4917
+    //   // if (['/src/layouts'].some((prefix) => id.includes(prefix))) {
+    //   //   const url = new URL(id, 'file://');
+    //   //   if (!url.search /* ?vue&type=script&setup=true&lang.ts */) {
+    //   //     return 'layouts';
+    //   //   }
+    //   // }
+    //   if (id.includes('meta-layouts')) {
+    //     // console.debug(`id :>> `, id); // id :>>  virtual:meta-layouts
+    //     // 这里很奇怪，打印 id 是`virtual:meta-layouts`，但是 `'virtual:meta-layouts' === id` 却是 false
+    //     return 'lib-meta-layouts';
+    //   }
+    //   if (id.includes('index.page.vue')) {
+    //     const url = new URL(id, 'file://');
+    //     if (!url.search /* ?vue&type=script&setup=true&lang.ts */) {
+    //       const parentDir = path.basename(path.dirname(id));
+    //       return `${parentDir}-index.page`;
+    //     }
+    //   }
+    //   if (!id.includes('node_modules')) return;
+    //   // 处理 pnpm 的特殊路径结构
+    //   let packageName;
+    //   if (id.includes('.pnpm')) {
+    //     // pnpm 路径: .pnpm/naive-ui@2.43.1_vue@3.5.22/node_modules/naive-ui/...
+    //     const pnpmMatch = id.match(/\.pnpm\/(.+?)@/);
+    //     if (pnpmMatch) {
+    //       packageName = pnpmMatch[1];
+    //     }
+    //   } else {
+    //     // 普通路径: node_modules/lodash/...
+    //     const normalMatch = id.match(/node_modules\/(@[^/]+\/[^/]+|[^/]+)\//);
+    //     if (normalMatch) {
+    //       packageName = normalMatch[1];
+    //     }
+    //   }
+    //   if (packageName) {
+    //     if (['highlight.js'].includes(packageName)) {
+    //       return 'lib-hljs';
+    //     }
+    //     // 根据包名分组
+    //     if (['consola', 'lodash', '@juggle+resize-observer', 'vueuc'].includes(packageName)) {
+    //       return 'lib-vendor';
+    //     }
+    //     // // 拆了有问题
+    //     // if (['naive-ui'].includes(packageName) && id.includes('_internal')) {
+    //     //   return 'lib-naive-ui-internal';
+    //     // }
+    //     if (['naive-ui'].includes(packageName)) {
+    //       return 'lib-naive-ui';
+    //     }
+    //     if (
+    //       ['primelocale', 'primevue', 'primeuix', 'primeicons'].some((name) =>
+    //         packageName!.includes(name),
+    //       )
+    //     ) {
+    //       return 'lib-primevue';
+    //     }
+    //     if (['vue', 'vue-router', 'pinia', 'vue-demi', 'vue-i18n'].includes(packageName)) {
+    //       return 'lib-vue-vendor';
+    //     }
+    //   }
+    // },
   },
 };

vite.config.ts

@@ -13,12 +13,17 @@ export default defineConfig(async (configEnv) => {
 
   const isBuild = command === 'build';
   const env = loadEnv(mode, process.cwd());
+  if (process.env.CI) {
+    for (const [key, value] of Object.entries(env)) {
+      consola.info(`[vite.config.ts] env: ${key}: ${value}`);
+    }
+  }
 
   return {
     base: env.VITE_APP_BASE,
     build: {
-      minify: env.VITE_APP_BUILD_MINIFY === 'true' ? undefined /* 即默认 */ : false, // 默认：	'terser'
-      sourcemap: env.VITE_APP_BUILD_SOURCE_MAP === 'true',
+      minify: env.VITE_BUILD_MINIFY === 'true' ? undefined /* 即默认 */ : false, // 默认：	'terser'
+      sourcemap: env.VITE_BUILD_SOURCE_MAP === 'true',
       rollupOptions: viteConfigRollupOptions,
     },
     css: {
@@ -35,12 +40,11 @@ export default defineConfig(async (configEnv) => {
     resolve: {
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
+        '~': fileURLToPath(new URL('./src', import.meta.url)),
       },
     },
     define: {
       __DEV__: JSON.stringify(!isBuild),
-      // // https://github.com/fi3ework/vite-plugin-checker/issues/569#issuecomment-3254311799
-      // 'process.env.NODE_ENV': JSON.stringify('production'),
     },
     server: {
       allowedHosts: ['.NWCT.DEV'],