chore: release v5.4.6

feat: added file download examples (#4853 )
fix: unable to preventDefault inside passive event listener invocation (#4852 )
2025-08-26 00:26:20 +08:00 · 2024-11-10 11:50:46 +08:00 · 2024-11-10 11:50:06 +08:00 · 2024-11-10 10:26:35 +08:00 · 2024-11-10 10:09:06 +08:00 · 2024-11-09 21:06:10 +08:00
674 changed files with 15351 additions and 8686 deletions
--- a/.commitlintrc.mjs
+++ b/.commitlintrc.mjs
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -16,7 +16,7 @@ categories:
  - title: '🐞 Bug Fixes'
    labels:
      - 'bug'
-  - title: '📈 Performance'
+  - title: '📈 Performance & Enhancement'
    labels:
      - 'perf'
      - 'enhancement'
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -19,6 +19,7 @@ permissions:

 jobs:
  post-update:
+    if: github.repository == 'vbenjs/vue-vben-admin'
    # if: ${{ github.actor == 'dependabot[bot]' }}
    runs-on: ${{ matrix.os }}
    strategy:
--- a/.github/workflows/changeset-version.yml
+++ b/.github/workflows/changeset-version.yml
@@ -18,7 +18,7 @@ env:

 jobs:
  version:
-    if: (github.event.pull_request.merged || github.event_name == 'workflow_dispatch') && github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    if: (github.event.pull_request.merged || github.event_name == 'workflow_dispatch') && github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
    # if: github.repository == 'vbenjs/vue-vben-admin'
    timeout-minutes: 15
    runs-on: ubuntu-latest
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -17,6 +17,7 @@ env:
 jobs:
  test:
    name: Test
+    if: github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
@@ -55,6 +56,7 @@ jobs:

  lint:
    name: Lint
+    if: github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
@@ -77,6 +79,7 @@ jobs:

  check:
    name: Check
+    if: github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ${{ matrix.os }}
    timeout-minutes: 20
    strategy:
@@ -106,6 +109,7 @@ jobs:

  ci-ok:
    name: CI OK
+    if: github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
    needs: [test, check, lint]
    env:
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -22,6 +22,7 @@ on:
 jobs:
  analyze:
    name: Analyze (${{ matrix.language }})
+    if: github.repository == 'vbenjs/vue-vben-admin'
    # Runner size impacts CodeQL analysis time. To learn more, please see:
    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
    #   - https://gh.io/supported-runners-and-hardware-resources
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -8,7 +8,7 @@ on:
 jobs:
  deploy-playground-ftp:
    name: Deploy Push Playground Ftp
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
@@ -39,7 +39,7 @@ jobs:

  deploy-docs-ftp:
    name: Deploy Push Docs Ftp
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
@@ -63,7 +63,7 @@ jobs:

  deploy-antd-ftp:
    name: Deploy Push Antd Ftp
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
@@ -94,7 +94,7 @@ jobs:

  deploy-ele-ftp:
    name: Deploy Push Element Ftp
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
@@ -125,7 +125,7 @@ jobs:

  deploy-naive-ftp:
    name: Deploy Push Naive Ftp
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
--- a/.github/workflows/draft.yml
+++ b/.github/workflows/draft.yml
@@ -17,6 +17,7 @@ jobs:
      # write permission is required for autolabeler
      # otherwise, read permission is required at least
      pull-requests: write
+    if: github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
    steps:
      - uses: release-drafter/release-drafter@v6
--- a/.github/workflows/issue-close-require.yml
+++ b/.github/workflows/issue-close-require.yml
@@ -3,23 +3,29 @@ name: Issue Close Require

 # 触发条件：每天零点
 on:
+  workflow_dispatch:
  schedule:
    - cron: '0 0 * * *'

 permissions:
  pull-requests: write
  contents: write
+  issues: write

 jobs:
  close-issues:
+    if: github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
-
    steps:
-      # 步骤1：关闭未活动的 Issues
+      # 关闭未活动的 Issues
      - name: Close Inactive Issues
-        uses: actions-cool/issues-helper@v3
+        uses: actions/stale@v9
        with:
-          actions: 'close-issues' # 执行动作：关闭 Issues
-          token: ${{ secrets.GITHUB_TOKEN }} # GitHub Token，用于认证
-          labels: 'needs reproduction' # 目标标签
-          inactive-day: 3 # 未活动天数阈值
+          days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
+          stale-issue-label: needs-reproduction # Label that flags an issue as stale.
+          only-labels: needs-reproduction # Only process these issues
+          days-before-issue-close: 3
+          ignore-updates: true
+          remove-stale-when-updated: false
+          close-issue-message: This issue was closed because it was open for 3 days without a valid reproduction.
+          close-issue-label: closed-by-action
--- a/.github/workflows/issue-labeled.yml
+++ b/.github/workflows/issue-labeled.yml
@@ -13,6 +13,7 @@ permissions:

 jobs:
  reply-labeled:
+    if: github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
    steps:
      - name: remove enhancement pending
--- a/.github/workflows/lock.yml
+++ b/.github/workflows/lock.yml
@@ -11,12 +11,13 @@ permissions:

 jobs:
  action:
+    if: github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
    steps:
      - uses: dessant/lock-threads@v5
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
-          issue-inactive-days: '30'
+          issue-inactive-days: '14'
          issue-lock-reason: ''
          pr-inactive-days: '30'
          pr-lock-reason: ''
--- a/.github/workflows/release-tag.yml
+++ b/.github/workflows/release-tag.yml
@@ -15,6 +15,7 @@ permissions:
 jobs:
  build:
    name: Create Release
+    if: github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
    strategy:
      matrix:
--- a/.github/workflows/semantic-pull-request.yml
+++ b/.github/workflows/semantic-pull-request.yml
@@ -9,8 +9,9 @@ on:

 jobs:
  main:
-    runs-on: ubuntu-latest
    name: Semantic Pull Request
+    if: github.repository == 'vbenjs/vue-vben-admin'
+    runs-on: ubuntu-latest
    steps:
      - name: Validate PR title
        uses: amannn/action-semantic-pull-request@v5
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -6,6 +6,7 @@ on:

 jobs:
  stale:
+    if: github.repository == 'vbenjs/vue-vben-admin'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/stale@v9
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -3,4 +3,4 @@ ports:
    onOpen: open-preview
 tasks:
  - init: corepack enable && pnpm install
-    command: pnpm run dev
+    command: pnpm run dev:play
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -19,7 +19,9 @@
    // i18n 插件
    "Lokalise.i18n-ally",
    // CSS 变量提示
-    "vunguyentuan.vscode-css-variables"
+    "vunguyentuan.vscode-css-variables",
+    // 在 package.json 中显示 PNPM catalog 的版本
+    "antfu.pnpm-catalog-lens"
  ],
  "unwantedRecommendations": [
    // 和 volar 冲突
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -160,6 +160,7 @@
  "stylelint.enable": true,
  "stylelint.packageManager": "pnpm",
  "stylelint.validate": ["css", "less", "postcss", "scss", "vue"],
+  "stylelint.customSyntax": "postcss-html",
  "stylelint.snippet": ["css", "less", "postcss", "scss", "vue"],

  "typescript.inlayHints.enumMemberValues.enabled": true,
@@ -197,11 +198,14 @@
    "playground/src/locales/langs",
    "apps/*/src/locales/langs"
  ],
-  "i18n-ally.pathMatcher": "{locale}.json",
-  "i18n-ally.enabledParsers": ["json", "ts", "js", "yaml"],
+  "i18n-ally.pathMatcher": "{locale}/{namespace}.{ext}",
+  "i18n-ally.enabledParsers": ["json"],
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.displayLanguage": "zh-CN",
  "i18n-ally.enabledFrameworks": ["vue", "react"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.namespace": true,

  // 控制相关文件嵌套展示
  "explorer.fileNesting.enabled": true,
@@ -216,7 +220,6 @@
    "tailwind.config.mjs": "postcss.*"
  },
  "commentTranslate.hover.enabled": false,
-  "i18n-ally.keystyle": "nested",
  "commentTranslate.multiLineMerge": true,
  "vue.server.hybridMode": true,
  "typescript.tsdk": "node_modules/typescript/lib"
--- a/README.ja-JP.md
+++ b/README.ja-JP.md
@@ -125,6 +125,10 @@ pnpm build

 [@Vben](https://github.com/anncwb)

+## スター歴史
+
+[![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
 ## 寄付

 このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます！
--- a/README.md
+++ b/README.md
@@ -124,13 +124,17 @@ Support modern browsers, not IE

 [@Vben](https://github.com/anncwb)

+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
 ## Donate

 If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!

 ![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)

-<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
+<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aee;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>

 ## Contributor

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -77,6 +77,10 @@ pnpm dev
 pnpm build
 ```

+## 更新日志
+
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
+
 ## 如何贡献

 非常欢迎你的加入！[提一个 Issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) 或者提交一个 Pull Request。
@@ -120,6 +124,10 @@ pnpm build

 [@Vben](https://github.com/anncwb)

+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
 ## 捐赠

 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
@@ -128,10 +136,6 @@ pnpm build

 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>

-## 更新日志
-
-[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
-
 ## Contributor

 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
--- a/apps/backend-mock/api/auth/login.post.ts
+++ b/apps/backend-mock/api/auth/login.post.ts
@@ -21,7 +21,7 @@ export default defineEventHandler(async (event) => {

  if (!findUser) {
    clearRefreshTokenCookie(event);
-    return forbiddenResponse(event);
+    return forbiddenResponse(event, 'Username or password is incorrect.');
  }

  const accessToken = generateAccessToken(findUser);
--- a/apps/backend-mock/api/menu/all.ts
+++ b/apps/backend-mock/api/menu/all.ts
@@ -1,7 +1,7 @@
 import { verifyAccessToken } from '~/utils/jwt-utils';
 import { unAuthorizedResponse } from '~/utils/response';

-export default eventHandler((event) => {
+export default eventHandler(async (event) => {
  const userinfo = verifyAccessToken(event);
  if (!userinfo) {
    return unAuthorizedResponse(event);
--- a/apps/backend-mock/api/table/list.ts
+++ b/apps/backend-mock/api/table/list.ts
@@ -0,0 +1,48 @@
+import { faker } from '@faker-js/faker';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse } from '~/utils/response';
+
+function generateMockDataList(count: number) {
+  const dataList = [];
+
+  for (let i = 0; i < count; i++) {
+    const dataItem = {
+      id: faker.string.uuid(),
+      imageUrl: faker.image.avatar(),
+      imageUrl2: faker.image.avatar(),
+      open: faker.datatype.boolean(),
+      status: faker.helpers.arrayElement(['success', 'error', 'warning']),
+      productName: faker.commerce.productName(),
+      price: faker.commerce.price(),
+      currency: faker.finance.currencyCode(),
+      quantity: faker.number.int({ min: 1, max: 100 }),
+      available: faker.datatype.boolean(),
+      category: faker.commerce.department(),
+      releaseDate: faker.date.past(),
+      rating: faker.number.float({ min: 1, max: 5 }),
+      description: faker.commerce.productDescription(),
+      weight: faker.number.float({ min: 0.1, max: 10 }),
+      color: faker.color.human(),
+      inProduction: faker.datatype.boolean(),
+      tags: Array.from({ length: 3 }, () => faker.commerce.productAdjective()),
+    };
+
+    dataList.push(dataItem);
+  }
+
+  return dataList;
+}
+
+const mockData = generateMockDataList(100);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  await sleep(600);
+
+  const { page, pageSize } = getQuery(event);
+  return usePageResponseSuccess(page as string, pageSize as string, mockData);
+});
--- a/apps/backend-mock/api/user/info.ts
+++ b/apps/backend-mock/api/user/info.ts
@@ -6,6 +6,5 @@ export default eventHandler((event) => {
  if (!userinfo) {
    return unAuthorizedResponse(event);
  }
-
  return useResponseSuccess(userinfo);
 });
--- a/apps/backend-mock/nitro.config.ts
+++ b/apps/backend-mock/nitro.config.ts
@@ -1,5 +1,6 @@
 import errorHandler from './error';

+process.env.COMPATIBILITY_DATE = new Date().toISOString();
 export default defineNitroConfig({
  devErrorHandler: errorHandler,
  errorHandler: '~/error',
--- a/apps/backend-mock/package.json
+++ b/apps/backend-mock/package.json
@@ -10,6 +10,7 @@
    "start": "nitro dev"
  },
  "dependencies": {
+    "@faker-js/faker": "catalog:",
    "jsonwebtoken": "catalog:",
    "nitropack": "catalog:"
  },
--- a/apps/backend-mock/utils/mock-data.ts
+++ b/apps/backend-mock/utils/mock-data.ts
@@ -86,7 +86,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
      component: '/demos/access/admin-visible',
      meta: {
        icon: 'mdi:button-cursor',
-        title: 'page.demos.access.adminVisible',
+        title: 'demos.access.adminVisible',
      },
      name: 'AccessAdminVisibleDemo',
      path: '/demos/access/admin-visible',
@@ -95,7 +95,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
      component: '/demos/access/super-visible',
      meta: {
        icon: 'mdi:button-cursor',
-        title: 'page.demos.access.superVisible',
+        title: 'demos.access.superVisible',
      },
      name: 'AccessSuperVisibleDemo',
      path: '/demos/access/super-visible',
@@ -104,7 +104,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
      component: '/demos/access/user-visible',
      meta: {
        icon: 'mdi:button-cursor',
-        title: 'page.demos.access.userVisible',
+        title: 'demos.access.userVisible',
      },
      name: 'AccessUserVisibleDemo',
      path: '/demos/access/user-visible',
@@ -118,7 +118,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
        icon: 'ic:baseline-view-in-ar',
        keepAlive: true,
        order: 1000,
-        title: 'page.demos.title',
+        title: 'demos.title',
      },
      name: 'Demos',
      path: '/demos',
@@ -129,7 +129,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
          path: '/demosaccess',
          meta: {
            icon: 'mdi:cloud-key-outline',
-            title: 'page.demos.access.backendPermissions',
+            title: 'demos.access.backendPermissions',
          },
          redirect: '/demos/access/page-control',
          children: [
@@ -139,7 +139,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
              component: '/demos/access/index',
              meta: {
                icon: 'mdi:page-previous-outline',
-                title: 'page.demos.access.pageAccess',
+                title: 'demos.access.pageAccess',
              },
            },
            {
@@ -148,7 +148,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
              component: '/demos/access/button-control',
              meta: {
                icon: 'mdi:button-cursor',
-                title: 'page.demos.access.buttonControl',
+                title: 'demos.access.buttonControl',
              },
            },
            {
@@ -159,7 +159,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
                authority: ['no-body'],
                icon: 'mdi:button-cursor',
                menuVisibleWithForbidden: true,
-                title: 'page.demos.access.menuVisible403',
+                title: 'demos.access.menuVisible403',
              },
            },
            roleWithMenus[role],
--- a/apps/backend-mock/utils/response.ts
+++ b/apps/backend-mock/utils/response.ts
@@ -9,6 +9,27 @@ export function useResponseSuccess<T = any>(data: T) {
  };
 }

+export function usePageResponseSuccess<T = any>(
+  page: number | string,
+  pageSize: number | string,
+  list: T[],
+  { message = 'ok' } = {},
+) {
+  const pageData = pagination(
+    Number.parseInt(`${page}`),
+    Number.parseInt(`${pageSize}`),
+    list,
+  );
+
+  return {
+    ...useResponseSuccess({
+      items: pageData,
+      total: list.length,
+    }),
+    message,
+  };
+}
+
 export function useResponseError(message: string, error: any = null) {
  return {
    code: -1,
@@ -18,12 +39,30 @@ export function useResponseError(message: string, error: any = null) {
  };
 }

-export function forbiddenResponse(event: H3Event<EventHandlerRequest>) {
+export function forbiddenResponse(
+  event: H3Event<EventHandlerRequest>,
+  message = 'Forbidden Exception',
+) {
  setResponseStatus(event, 403);
-  return useResponseError('ForbiddenException', 'Forbidden Exception');
+  return useResponseError(message, message);
 }

 export function unAuthorizedResponse(event: H3Event<EventHandlerRequest>) {
  setResponseStatus(event, 401);
-  return useResponseError('UnauthorizedException', 'Unauthorized Exception');
+  return useResponseError('Unauthorized Exception', 'Unauthorized Exception');
+}
+
+export function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export function pagination<T = any>(
+  pageNo: number,
+  pageSize: number,
+  array: T[],
+): T[] {
+  const offset = (pageNo - 1) * Number(pageSize);
+  return offset + Number(pageSize) >= array.length
+    ? array.slice(offset)
+    : array.slice(offset, offset + Number(pageSize));
 }
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/web-antd",
-  "version": "5.3.0",
+  "version": "5.4.6",
  "homepage": "https://vben.pro",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/web-antd/src/adapter/component/index.ts
@@ -0,0 +1,127 @@
+/**
+ * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
+ * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
+ */
+
+import type { BaseFormComponentType } from '@vben/common-ui';
+
+import type { Component, SetupContext } from 'vue';
+import { h } from 'vue';
+
+import { globalShareState } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import {
+  AutoComplete,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  DatePicker,
+  Divider,
+  Input,
+  InputNumber,
+  InputPassword,
+  Mentions,
+  notification,
+  Radio,
+  RadioGroup,
+  RangePicker,
+  Rate,
+  Select,
+  Space,
+  Switch,
+  Textarea,
+  TimePicker,
+  TreeSelect,
+  Upload,
+} from 'ant-design-vue';
+
+const withDefaultPlaceholder = <T extends Component>(
+  component: T,
+  type: 'input' | 'select',
+) => {
+  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
+    const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
+    return h(component, { ...props, ...attrs, placeholder }, slots);
+  };
+};
+
+// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
+export type ComponentType =
+  | 'AutoComplete'
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'DefaultButton'
+  | 'Divider'
+  | 'Input'
+  | 'InputNumber'
+  | 'InputPassword'
+  | 'Mentions'
+  | 'PrimaryButton'
+  | 'Radio'
+  | 'RadioGroup'
+  | 'RangePicker'
+  | 'Rate'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'Textarea'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+async function initComponentAdapter() {
+  const components: Partial<Record<ComponentType, Component>> = {
+    // 如果你的组件体积比较大，可以使用异步加载
+    // Button: () =>
+    // import('xxx').then((res) => res.Button),
+
+    AutoComplete,
+    Checkbox,
+    CheckboxGroup,
+    DatePicker,
+    // 自定义默认按钮
+    DefaultButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'default' }, slots);
+    },
+    Divider,
+    Input: withDefaultPlaceholder(Input, 'input'),
+    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
+    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
+    Mentions: withDefaultPlaceholder(Mentions, 'input'),
+    // 自定义主要按钮
+    PrimaryButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'primary' }, slots);
+    },
+    Radio,
+    RadioGroup,
+    RangePicker,
+    Rate,
+    Select: withDefaultPlaceholder(Select, 'select'),
+    Space,
+    Switch,
+    Textarea: withDefaultPlaceholder(Textarea, 'input'),
+    TimePicker,
+    TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
+    Upload,
+  };
+
+  // 将组件注册到全局共享状态中
+  globalShareState.setComponents(components);
+
+  // 定义全局共享状态中的消息提示
+  globalShareState.defineMessage({
+    // 复制成功消息提示
+    copyPreferencesSuccess: (title, content) => {
+      notification.success({
+        description: content,
+        message: title,
+        placement: 'bottomRight',
+      });
+    },
+  });
+}
+
+export { initComponentAdapter };
--- a/apps/web-antd/src/adapter/form.ts
+++ b/apps/web-antd/src/adapter/form.ts
@@ -1,94 +1,14 @@
 import type {
-  BaseFormComponentType,
  VbenFormSchema as FormSchema,
  VbenFormProps,
 } from '@vben/common-ui';

-import { h } from 'vue';
+import type { ComponentType } from './component';

 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';

-import {
-  AutoComplete,
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  DatePicker,
-  Divider,
-  Input,
-  InputNumber,
-  InputPassword,
-  Mentions,
-  Radio,
-  RadioGroup,
-  RangePicker,
-  Rate,
-  Select,
-  Space,
-  Switch,
-  Textarea,
-  TimePicker,
-  TreeSelect,
-  Upload,
-} from 'ant-design-vue';
-
-// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
-export type FormComponentType =
-  | 'AutoComplete'
-  | 'Checkbox'
-  | 'CheckboxGroup'
-  | 'DatePicker'
-  | 'Divider'
-  | 'Input'
-  | 'InputNumber'
-  | 'InputPassword'
-  | 'Mentions'
-  | 'Radio'
-  | 'RadioGroup'
-  | 'RangePicker'
-  | 'Rate'
-  | 'Select'
-  | 'Space'
-  | 'Switch'
-  | 'Textarea'
-  | 'TimePicker'
-  | 'TreeSelect'
-  | 'Upload'
-  | BaseFormComponentType;
-
-// 初始化表单组件，并注册到form组件内部
-setupVbenForm<FormComponentType>({
-  components: {
-    AutoComplete,
-    Checkbox,
-    CheckboxGroup,
-    DatePicker,
-    // 自定义默认的重置按钮
-    DefaultResetActionButton: (props, { attrs, slots }) => {
-      return h(Button, { ...props, attrs, type: 'default' }, slots);
-    },
-    // 自定义默认的提交按钮
-    DefaultSubmitActionButton: (props, { attrs, slots }) => {
-      return h(Button, { ...props, attrs, type: 'primary' }, slots);
-    },
-    Divider,
-    Input,
-    InputNumber,
-    InputPassword,
-    Mentions,
-    Radio,
-    RadioGroup,
-    RangePicker,
-    Rate,
-    Select,
-    Space,
-    Switch,
-    Textarea,
-    TimePicker,
-    TreeSelect,
-    Upload,
-  },
+setupVbenForm<ComponentType>({
  config: {
    // ant design vue组件库默认都是 v-model:value
    baseModelPropName: 'value',
@@ -105,23 +25,23 @@ setupVbenForm<FormComponentType>({
    // 输入项目必填国际化适配
    required: (value, _params, ctx) => {
      if (value === undefined || value === null || value.length === 0) {
-        return $t('formRules.required', [ctx.label]);
+        return $t('ui.formRules.required', [ctx.label]);
      }
      return true;
    },
    // 选择项目必填国际化适配
    selectRequired: (value, _params, ctx) => {
      if (value === undefined || value === null) {
-        return $t('formRules.selectRequired', [ctx.label]);
+        return $t('ui.formRules.selectRequired', [ctx.label]);
      }
      return true;
    },
  },
 });

-const useVbenForm = useForm<FormComponentType>;
+const useVbenForm = useForm<ComponentType>;

 export { useVbenForm, z };

-export type VbenFormSchema = FormSchema<FormComponentType>;
+export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
--- a/apps/web-antd/src/adapter/index.ts
+++ b/apps/web-antd/src/adapter/index.ts
@@ -1 +0,0 @@
-export * from './form';
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -0,0 +1,67 @@
+import { h } from 'vue';
+
+import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+
+import { Button, Image } from 'ant-design-vue';
+
+import { useVbenForm } from './form';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    vxeUI.setConfig({
+      grid: {
+        align: 'center',
+        border: false,
+        columnConfig: {
+          resizable: true,
+        },
+        minHeight: 180,
+        formConfig: {
+          // 全局禁用vxe-table的表单配置，使用formOptions
+          enabled: false,
+        },
+        proxyConfig: {
+          autoLoad: true,
+          response: {
+            result: 'items',
+            total: 'total',
+            list: 'items',
+          },
+          showActiveMsg: true,
+          showResponseMsg: false,
+        },
+        round: true,
+        showOverflow: true,
+        size: 'small',
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellImage' },
+    vxeUI.renderer.add('CellImage', {
+      renderTableDefault(_renderOpts, params) {
+        const { column, row } = params;
+        return h(Image, { src: row[column.field] });
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellLink' },
+    vxeUI.renderer.add('CellLink', {
+      renderTableDefault(renderOpts) {
+        const { props } = renderOpts;
+        return h(
+          Button,
+          { size: 'small', type: 'link' },
+          { default: () => props?.text },
+        );
+      },
+    });
+
+    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
+    // vxeUI.formats.add
+  },
+  useVbenForm,
+});
+
+export { useVbenVxeGrid };
+
+export type * from '@vben/plugins/vxe-table';
--- a/apps/web-antd/src/api/core/auth.ts
+++ b/apps/web-antd/src/api/core/auth.ts
@@ -3,17 +3,13 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
  /** 登录接口参数 */
  export interface LoginParams {
-    password: string;
-    username: string;
+    password?: string;
+    username?: string;
  }

  /** 登录接口返回值 */
  export interface LoginResult {
    accessToken: string;
-    desc: string;
-    realName: string;
-    userId: string;
-    username: string;
  }

  export interface RefreshTokenResult {
--- a/apps/web-antd/src/api/request.ts
+++ b/apps/web-antd/src/api/request.ts
@@ -1,6 +1,8 @@
 /**
 * 该文件可自行根据业务逻辑进行调整
 */
+import type { HttpResponse } from '@vben/request';
+
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
@@ -68,15 +70,16 @@ function createRequestClient(baseURL: string) {
  });

  // response数据解构
-  client.addResponseInterceptor({
+  client.addResponseInterceptor<HttpResponse>({
    fulfilled: (response) => {
      const { data: responseData, status } = response;

-      const { code, data, message: msg } = responseData;
+      const { code, data } = responseData;
      if (status >= 200 && status < 400 && code === 0) {
        return data;
      }
-      throw new Error(`Error ${status}: ${msg}`);
+
+      throw Object.assign({}, response, { response });
    },
  });

@@ -93,7 +96,14 @@ function createRequestClient(baseURL: string) {

  // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
  client.addResponseInterceptor(
-    errorMessageResponseInterceptor((msg: string) => message.error(msg)),
+    errorMessageResponseInterceptor((msg: string, error) => {
+      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+      // 当前mock接口返回的错误字段是 error 或者 message
+      const responseData = error?.response?.data ?? {};
+      const errorMessage = responseData?.error ?? responseData?.message ?? '';
+      // 如果没有错误信息，则会根据状态码进行提示
+      message.error(errorMessage || msg);
+    }),
  );

  return client;
--- a/apps/web-antd/src/bootstrap.ts
+++ b/apps/web-antd/src/bootstrap.ts
@@ -1,16 +1,23 @@
-import { createApp } from 'vue';
+import { createApp, watchEffect } from 'vue';

 import { registerAccessDirective } from '@vben/access';
+import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
 import '@vben/styles/antd';

-import { setupI18n } from '#/locales';
+import { useTitle } from '@vueuse/core';

+import { $t, setupI18n } from '#/locales';
+
+import { initComponentAdapter } from './adapter/component';
 import App from './app.vue';
 import { router } from './router';

 async function bootstrap(namespace: string) {
+  // 初始化组件适配器
+  await initComponentAdapter();
+
  const app = createApp(App);

  // 国际化 i18n 配置
@@ -25,6 +32,16 @@ async function bootstrap(namespace: string) {
  // 配置路由及路由守卫
  app.use(router);

+  // 动态更新标题
+  watchEffect(() => {
+    if (preferences.app.dynamicTitle) {
+      const routeTitle = router.currentRoute.value.meta?.title;
+      const pageTitle =
+        (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
+      useTitle(pageTitle);
+    }
+  });
+
  app.mount('#app');
 }

--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/layouts';

-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';

 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
+import { useWatermark } from '@vben/hooks';
 import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
 import {
  BasicLayout,
@@ -54,6 +55,7 @@ const notifications = ref<NotificationItem[]>([
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
+const { destroyWatermark, updateWatermark } = useWatermark();
 const showDot = computed(() =>
  notifications.value.some((item) => !item.isRead),
 );
@@ -66,7 +68,7 @@ const menus = computed(() => [
      });
    },
    icon: BookOpenText,
-    text: $t('widgets.document'),
+    text: $t('ui.widgets.document'),
  },
  {
    handler: () => {
@@ -84,7 +86,7 @@ const menus = computed(() => [
      });
    },
    icon: CircleHelp,
-    text: $t('widgets.qa'),
+    text: $t('ui.widgets.qa'),
  },
 ]);

@@ -103,6 +105,21 @@ function handleNoticeClear() {
 function handleMakeAll() {
  notifications.value.forEach((item) => (item.isRead = true));
 }
+watch(
+  () => preferences.app.watermark,
+  async (enable) => {
+    if (enable) {
+      await updateWatermark({
+        content: `${userStore.userInfo?.username}`,
+      });
+    } else {
+      destroyWatermark();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 </script>

 <template>
--- a/apps/web-antd/src/locales/index.ts
+++ b/apps/web-antd/src/locales/index.ts
@@ -4,7 +4,11 @@ import type { Locale } from 'ant-design-vue/es/locale';
 import type { App } from 'vue';
 import { ref } from 'vue';

-import { $t, setupI18n as coreSetup, loadLocalesMap } from '@vben/locales';
+import {
+  $t,
+  setupI18n as coreSetup,
+  loadLocalesMapFromDir,
+} from '@vben/locales';
 import { preferences } from '@vben/preferences';

 import antdEnLocale from 'ant-design-vue/es/locale/en_US';
@@ -13,10 +17,12 @@ import dayjs from 'dayjs';

 const antdLocale = ref<Locale>(antdDefaultLocale);

-const modules = import.meta.glob('./langs/*.json');
-
-const localesMap = loadLocalesMap(modules);
+const modules = import.meta.glob('./langs/**/*.json');

+const localesMap = loadLocalesMapFromDir(
+  /\.\/langs\/([^/]+)\/(.*)\.json$/,
+  modules,
+);
 /**
 * 加载应用特有的语言包
 * 这里也可以改造为从服务端获取翻译数据
@@ -45,14 +51,14 @@ async function loadThirdPartyMessage(lang: SupportedLanguagesType) {
 async function loadDayjsLocale(lang: SupportedLanguagesType) {
  let locale;
  switch (lang) {
-    case 'zh-CN': {
-      locale = await import('dayjs/locale/zh-cn');
-      break;
-    }
    case 'en-US': {
      locale = await import('dayjs/locale/en');
      break;
    }
+    case 'zh-CN': {
+      locale = await import('dayjs/locale/zh-cn');
+      break;
+    }
    // 默认使用英语
    default: {
      locale = await import('dayjs/locale/en');
@@ -71,14 +77,14 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
 */
 async function loadAntdLocale(lang: SupportedLanguagesType) {
  switch (lang) {
-    case 'zh-CN': {
-      antdLocale.value = antdDefaultLocale;
-      break;
-    }
    case 'en-US': {
      antdLocale.value = antdEnLocale;
      break;
    }
+    case 'zh-CN': {
+      antdLocale.value = antdDefaultLocale;
+      break;
+    }
  }
 }

--- a/apps/web-antd/src/locales/langs/en-US.json
+++ b/apps/web-antd/src/locales/langs/en-US.json
@@ -1,8 +0,0 @@
-{
-  "page": {
-    "demos": {
-      "title": "Demos",
-      "antd": "Ant Design Vue"
-    }
-  }
-}
--- a/apps/web-antd/src/locales/langs/en-US/demos.json
+++ b/apps/web-antd/src/locales/langs/en-US/demos.json
@@ -0,0 +1,12 @@
+{
+  "title": "Demos",
+  "antd": "Ant Design Vue",
+  "vben": {
+    "title": "Project",
+    "about": "About",
+    "document": "Document",
+    "antdv": "Ant Design Vue Version",
+    "naive-ui": "Naive UI Version",
+    "element-plus": "Element Plus Version"
+  }
+}
--- a/apps/web-antd/src/locales/langs/en-US/page.json
+++ b/apps/web-antd/src/locales/langs/en-US/page.json
@@ -0,0 +1,14 @@
+{
+  "auth": {
+    "login": "Login",
+    "register": "Register",
+    "codeLogin": "Code Login",
+    "qrcodeLogin": "Qr Code Login",
+    "forgetPassword": "Forget Password"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "analytics": "Analytics",
+    "workspace": "Workspace"
+  }
+}
--- a/apps/web-antd/src/locales/langs/zh-CN.json
+++ b/apps/web-antd/src/locales/langs/zh-CN.json
@@ -1,8 +0,0 @@
-{
-  "page": {
-    "demos": {
-      "title": "演示",
-      "antd": "Ant Design Vue"
-    }
-  }
-}
--- a/apps/web-antd/src/locales/langs/zh-CN/demos.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/demos.json
@@ -0,0 +1,12 @@
+{
+  "title": "演示",
+  "antd": "Ant Design Vue",
+  "vben": {
+    "title": "项目",
+    "about": "关于",
+    "document": "文档",
+    "antdv": "Ant Design Vue 版本",
+    "naive-ui": "Naive UI 版本",
+    "element-plus": "Element Plus 版本"
+  }
+}
--- a/apps/web-antd/src/locales/langs/zh-CN/page.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/page.json
@@ -0,0 +1,14 @@
+{
+  "auth": {
+    "login": "登录",
+    "register": "注册",
+    "codeLogin": "验证码登录",
+    "qrcodeLogin": "二维码登录",
+    "forgetPassword": "忘记密码"
+  },
+  "dashboard": {
+    "title": "概览",
+    "analytics": "分析页",
+    "workspace": "工作台"
+  }
+}
--- a/apps/web-antd/src/preferences.ts
+++ b/apps/web-antd/src/preferences.ts
@@ -3,6 +3,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
 /**
 * @description 项目配置文件
 * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ * !!! 更改配置后请清空缓存，否则可能不生效
 */
 export const overridesPreferences = defineOverridesPreferences({
  // overrides
--- a/apps/web-antd/src/router/guard.ts
+++ b/apps/web-antd/src/router/guard.ts
@@ -5,10 +5,7 @@ import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 import { startProgress, stopProgress } from '@vben/utils';

-import { useTitle } from '@vueuse/core';
-
-import { $t } from '#/locales';
-import { coreRouteNames, dynamicRoutes } from '#/router/routes';
+import { accessRoutes, coreRouteNames } from '#/router/routes';
 import { useAuthStore } from '#/store';

 import { generateAccess } from './access';
@@ -34,21 +31,12 @@ function setupCommonGuard(router: Router) {
  router.afterEach((to) => {
    // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行

-    if (preferences.tabbar.enable) {
-      loadedPaths.add(to.path);
-    }
+    loadedPaths.add(to.path);

    // 关闭页面加载进度条
    if (preferences.transition.progress) {
      stopProgress();
    }
-
-    // 动态修改标题
-    if (preferences.app.dynamicTitle) {
-      const { title } = to.meta;
-      // useTitle(`${$t(title)} - ${preferences.app.name}`);
-      useTitle(`${$t(title)} - ${preferences.app.name}`);
-    }
  });
 }

@@ -107,7 +95,7 @@ function setupAccessGuard(router: Router) {
      roles: userRoles,
      router,
      // 则会在菜单中显示，但是访问会被重定向到403
-      routes: dynamicRoutes,
+      routes: accessRoutes,
    });

    // 保存菜单信息和路由信息
--- a/apps/web-antd/src/router/routes/core.ts
+++ b/apps/web-antd/src/router/routes/core.ts
@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';

-import { DEFAULT_HOME_PATH } from '@vben/constants';
+import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';

 import { AuthPageLayout } from '#/layouts';
 import { $t } from '#/locales';
@@ -32,17 +32,19 @@ const coreRoutes: RouteRecordRaw[] = [
  {
    component: AuthPageLayout,
    meta: {
+      hideInTab: true,
      title: 'Authentication',
    },
    name: 'Authentication',
    path: '/auth',
+    redirect: LOGIN_PATH,
    children: [
      {
        name: 'Login',
        path: 'login',
        component: Login,
        meta: {
-          title: $t('page.core.login'),
+          title: $t('page.auth.login'),
        },
      },
      {
@@ -50,7 +52,7 @@ const coreRoutes: RouteRecordRaw[] = [
        path: 'code-login',
        component: () => import('#/views/_core/authentication/code-login.vue'),
        meta: {
-          title: $t('page.core.codeLogin'),
+          title: $t('page.auth.codeLogin'),
        },
      },
      {
@@ -59,7 +61,7 @@ const coreRoutes: RouteRecordRaw[] = [
        component: () =>
          import('#/views/_core/authentication/qrcode-login.vue'),
        meta: {
-          title: $t('page.core.qrcodeLogin'),
+          title: $t('page.auth.qrcodeLogin'),
        },
      },
      {
@@ -68,7 +70,7 @@ const coreRoutes: RouteRecordRaw[] = [
        component: () =>
          import('#/views/_core/authentication/forget-password.vue'),
        meta: {
-          title: $t('page.core.forgetPassword'),
+          title: $t('page.auth.forgetPassword'),
        },
      },
      {
@@ -76,7 +78,7 @@ const coreRoutes: RouteRecordRaw[] = [
        path: 'register',
        component: () => import('#/views/_core/authentication/register.vue'),
        meta: {
-          title: $t('page.core.register'),
+          title: $t('page.auth.register'),
        },
      },
    ],
--- a/apps/web-antd/src/router/routes/index.ts
+++ b/apps/web-antd/src/router/routes/index.ts
@@ -10,12 +10,16 @@ const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {

 // 有需要可以自行打开注释，并创建文件夹
 // const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
+// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });

 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);

-/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统 */
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统(不会显示在菜单中) */
 // const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
+/** 不需要权限的菜单列表（会显示在菜单中） */
+// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
+const staticRoutes: RouteRecordRaw[] = [];
 const externalRoutes: RouteRecordRaw[] = [];

 /** 路由列表，由基本路由+静态路由组成 */
@@ -28,4 +32,5 @@ const routes: RouteRecordRaw[] = [
 /** 基本路由列表，这些路由不需要进入权限拦截 */
 const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);

-export { coreRouteNames, dynamicRoutes, routes };
+const accessRoutes = [...dynamicRoutes, ...staticRoutes];
+export { accessRoutes, coreRouteNames, routes };
--- a/apps/web-antd/src/router/routes/modules/demos.ts
+++ b/apps/web-antd/src/router/routes/modules/demos.ts
@@ -10,14 +10,14 @@ const routes: RouteRecordRaw[] = [
      icon: 'ic:baseline-view-in-ar',
      keepAlive: true,
      order: 1000,
-      title: $t('page.demos.title'),
+      title: $t('demos.title'),
    },
    name: 'Demos',
    path: '/demos',
    children: [
      {
        meta: {
-          title: $t('page.demos.antd'),
+          title: $t('demos.antd'),
        },
        name: 'AntDesignDemos',
        path: '/demos/ant-design',
--- a/apps/web-antd/src/router/routes/modules/vben.ts
+++ b/apps/web-antd/src/router/routes/modules/vben.ts
@@ -18,7 +18,7 @@ const routes: RouteRecordRaw[] = [
      badgeType: 'dot',
      icon: VBEN_LOGO_URL,
      order: 9999,
-      title: $t('page.vben.title'),
+      title: $t('demos.vben.title'),
    },
    name: 'VbenProject',
    path: '/vben-admin',
@@ -29,7 +29,7 @@ const routes: RouteRecordRaw[] = [
        component: () => import('#/views/_core/about/index.vue'),
        meta: {
          icon: 'lucide:copyright',
-          title: $t('page.vben.about'),
+          title: $t('demos.vben.about'),
        },
      },
      {
@@ -39,7 +39,7 @@ const routes: RouteRecordRaw[] = [
        meta: {
          icon: 'lucide:book-open-text',
          link: VBEN_DOC_URL,
-          title: $t('page.vben.document'),
+          title: $t('demos.vben.document'),
        },
      },
      {
@@ -60,7 +60,7 @@ const routes: RouteRecordRaw[] = [
          badgeType: 'dot',
          icon: 'logos:naiveui',
          link: VBEN_NAIVE_PREVIEW_URL,
-          title: $t('page.vben.naive-ui'),
+          title: $t('demos.vben.naive-ui'),
        },
      },
      {
@@ -71,7 +71,7 @@ const routes: RouteRecordRaw[] = [
          badgeType: 'dot',
          icon: 'logos:element',
          link: VBEN_ELE_PREVIEW_URL,
-          title: $t('page.vben.element-plus'),
+          title: $t('demos.vben.element-plus'),
        },
      },
    ],
--- a/apps/web-antd/src/store/auth.ts
+++ b/apps/web-antd/src/store/auth.ts
@@ -1,5 +1,4 @@
-import type { LoginAndRegisterParams } from '@vben/common-ui';
-import type { UserInfo } from '@vben/types';
+import type { Recordable, UserInfo } from '@vben/types';

 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -26,7 +25,7 @@ export const useAuthStore = defineStore('auth', () => {
   * @param params 登录表单数据
   */
  async function authLogin(
-    params: LoginAndRegisterParams,
+    params: Recordable<any>,
    onSuccess?: () => Promise<void> | void,
  ) {
    // 异步处理用户登录操作并获取 accessToken
@@ -84,7 +83,7 @@ export const useAuthStore = defineStore('auth', () => {
    resetAllStores();
    accessStore.setLoginExpired(false);

-    // 回登陆页带上当前路由地址
+    // 回登录页带上当前路由地址
    await router.replace({
      path: LOGIN_PATH,
      query: redirect
--- a/apps/web-antd/src/views/_core/authentication/code-login.vue
+++ b/apps/web-antd/src/views/_core/authentication/code-login.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';

 import { computed, ref } from 'vue';

@@ -49,7 +50,7 @@ const formSchema = computed((): VbenFormSchema[] => {
 * Asynchronously handle the login process
 * @param values 登录表单数据
 */
-async function handleLogin(values: LoginCodeParams) {
+async function handleLogin(values: Recordable<any>) {
  // eslint-disable-next-line no-console
  console.log(values);
 }
--- a/apps/web-antd/src/views/_core/authentication/forget-password.vue
+++ b/apps/web-antd/src/views/_core/authentication/forget-password.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';

 import { computed, ref } from 'vue';

@@ -27,7 +28,7 @@ const formSchema = computed((): VbenFormSchema[] => {
  ];
 });

-function handleSubmit(value: string) {
+function handleSubmit(value: Recordable<any>) {
  // eslint-disable-next-line no-console
  console.log('reset email:', value);
 }
--- a/apps/web-antd/src/views/_core/authentication/register.vue
+++ b/apps/web-antd/src/views/_core/authentication/register.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';

 import { computed, h, ref } from 'vue';

@@ -45,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
        rules(values) {
          const { password } = values;
          return z
-            .string()
+            .string({ required_error: $t('authentication.passwordTip') })
            .min(1, { message: $t('authentication.passwordTip') })
            .refine((value) => value === password, {
              message: $t('authentication.confirmPasswordTip'),
@@ -55,7 +56,6 @@ const formSchema = computed((): VbenFormSchema[] => {
      },
      fieldName: 'confirmPassword',
      label: $t('authentication.confirmPassword'),
-      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
    {
      component: 'VbenCheckbox',
@@ -67,15 +67,10 @@ const formSchema = computed((): VbenFormSchema[] => {
            h(
              'a',
              {
-                class:
-                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                class: 'vben-link ml-1 ',
                href: '',
              },
-              [
-                $t('authentication.privacyPolicy'),
-                '&',
-                $t('authentication.terms'),
-              ],
+              `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
            ),
          ]),
      }),
@@ -86,7 +81,7 @@ const formSchema = computed((): VbenFormSchema[] => {
  ];
 });

-function handleSubmit(value: LoginAndRegisterParams) {
+function handleSubmit(value: Recordable<any>) {
  // eslint-disable-next-line no-console
  console.log('register submit:', value);
 }
--- a/apps/web-antd/src/views/dashboard/workspace/index.vue
+++ b/apps/web-antd/src/views/dashboard/workspace/index.vue
@@ -7,6 +7,7 @@ import type {
 } from '@vben/common-ui';

 import { ref } from 'vue';
+import { useRouter } from 'vue-router';

 import {
  AnalysisChartCard,
@@ -18,11 +19,15 @@ import {
 } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { useUserStore } from '@vben/stores';
+import { openWindow } from '@vben/utils';

 import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';

 const userStore = useUserStore();

+// 这是一个示例数据，实际项目中需要根据实际情况进行调整
+// url 也可以是内部路由，在 navTo 方法中识别处理，进行内部跳转
+// 例如：url: /dashboard/workspace
 const projectItems: WorkbenchProjectItem[] = [
  {
    color: '',
@@ -31,6 +36,7 @@ const projectItems: WorkbenchProjectItem[] = [
    group: '开源组',
    icon: 'carbon:logo-github',
    title: 'Github',
+    url: 'https://github.com',
  },
  {
    color: '#3fb27f',
@@ -39,6 +45,7 @@ const projectItems: WorkbenchProjectItem[] = [
    group: '算法组',
    icon: 'ion:logo-vue',
    title: 'Vue',
+    url: 'https://vuejs.org',
  },
  {
    color: '#e18525',
@@ -47,6 +54,7 @@ const projectItems: WorkbenchProjectItem[] = [
    group: '上班摸鱼',
    icon: 'ion:logo-html5',
    title: 'Html5',
+    url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
  },
  {
    color: '#bf0c2c',
@@ -55,6 +63,7 @@ const projectItems: WorkbenchProjectItem[] = [
    group: 'UI',
    icon: 'ion:logo-angular',
    title: 'Angular',
+    url: 'https://angular.io',
  },
  {
    color: '#00d8ff',
@@ -63,6 +72,7 @@ const projectItems: WorkbenchProjectItem[] = [
    group: '技术牛',
    icon: 'bx:bxl-react',
    title: 'React',
+    url: 'https://reactjs.org',
  },
  {
    color: '#EBD94E',
@@ -71,39 +81,47 @@ const projectItems: WorkbenchProjectItem[] = [
    group: '架构组',
    icon: 'ion:logo-javascript',
    title: 'Js',
+    url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript',
  },
 ];

+// 同样，这里的 url 也可以使用以 http 开头的外部链接
 const quickNavItems: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    icon: 'ion:home-outline',
    title: '首页',
+    url: '/',
  },
  {
    color: '#bf0c2c',
    icon: 'ion:grid-outline',
    title: '仪表盘',
+    url: '/dashboard',
  },
  {
    color: '#e18525',
    icon: 'ion:layers-outline',
    title: '组件',
+    url: '/demos/features/icons',
  },
  {
    color: '#3fb27f',
    icon: 'ion:settings-outline',
    title: '系统管理',
+    url: '/demos/features/login-expired', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
  },
  {
    color: '#4daf1bc9',
    icon: 'ion:key-outline',
    title: '权限管理',
+    url: '/demos/access/page-control',
  },
  {
    color: '#00d8ff',
    icon: 'ion:bar-chart-outline',
    title: '图表',
+    url: '/analytics',
  },
 ];

@@ -195,6 +213,24 @@ const trendItems: WorkbenchTrendItem[] = [
    title: 'Vben',
  },
 ];
+
+const router = useRouter();
+
+// 这是一个示例方法，实际项目中需要根据实际情况进行调整
+// This is a sample method, adjust according to the actual project requirements
+function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+  if (nav.url?.startsWith('http')) {
+    openWindow(nav.url);
+    return;
+  }
+  if (nav.url?.startsWith('/')) {
+    router.push(nav.url).catch((error) => {
+      console.error('Navigation failed:', error);
+    });
+  } else {
+    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
+  }
+}
 </script>

 <template>
@@ -210,7 +246,7 @@ const trendItems: WorkbenchTrendItem[] = [

    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="mr-4 w-full lg:w-3/5">
-        <WorkbenchProject :items="projectItems" title="项目" />
+        <WorkbenchProject :items="projectItems" title="项目" @click="navTo" />
        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
      </div>
      <div class="w-full lg:w-2/5">
@@ -218,6 +254,7 @@ const trendItems: WorkbenchTrendItem[] = [
          :items="quickNavItems"
          class="mt-5 lg:mt-0"
          title="快捷导航"
+          @click="navTo"
        />
        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
        <AnalysisChartCard class="mt-5" title="访问来源">
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/web-ele",
-  "version": "5.3.0",
+  "version": "5.4.6",
  "homepage": "https://vben.pro",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/apps/web-ele/src/adapter/component/index.ts
+++ b/apps/web-ele/src/adapter/component/index.ts
@@ -0,0 +1,104 @@
+/**
+ * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
+ * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
+ */
+
+import type { BaseFormComponentType } from '@vben/common-ui';
+
+import type { Component, SetupContext } from 'vue';
+import { h } from 'vue';
+
+import { globalShareState } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElDivider,
+  ElInput,
+  ElInputNumber,
+  ElNotification,
+  ElRadioGroup,
+  ElSelect,
+  ElSpace,
+  ElSwitch,
+  ElTimePicker,
+  ElTreeSelect,
+  ElUpload,
+} from 'element-plus';
+
+const withDefaultPlaceholder = <T extends Component>(
+  component: T,
+  type: 'input' | 'select',
+) => {
+  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
+    const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
+    return h(component, { ...props, ...attrs, placeholder }, slots);
+  };
+};
+
+// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
+export type ComponentType =
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'Divider'
+  | 'Input'
+  | 'InputNumber'
+  | 'RadioGroup'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+async function initComponentAdapter() {
+  const components: Partial<Record<ComponentType, Component>> = {
+    // 如果你的组件体积比较大，可以使用异步加载
+    // Button: () =>
+    // import('xxx').then((res) => res.Button),
+
+    Checkbox: ElCheckbox,
+    CheckboxGroup: ElCheckboxGroup,
+    // 自定义默认按钮
+    DefaulButton: (props, { attrs, slots }) => {
+      return h(ElButton, { ...props, attrs, type: 'info' }, slots);
+    },
+    // 自定义主要按钮
+    PrimaryButton: (props, { attrs, slots }) => {
+      return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
+    },
+    Divider: ElDivider,
+    Input: withDefaultPlaceholder(ElInput, 'input'),
+    InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
+    RadioGroup: ElRadioGroup,
+    Select: withDefaultPlaceholder(ElSelect, 'select'),
+    Space: ElSpace,
+    Switch: ElSwitch,
+    TimePicker: ElTimePicker,
+    TreeSelect: withDefaultPlaceholder(ElTreeSelect, 'select'),
+    Upload: ElUpload,
+  };
+
+  // 将组件注册到全局共享状态中
+  globalShareState.setComponents(components);
+
+  // 定义全局共享状态中的消息提示
+  globalShareState.defineMessage({
+    // 复制成功消息提示
+    copyPreferencesSuccess: (title, content) => {
+      ElNotification({
+        title,
+        message: content,
+        position: 'bottom-right',
+        duration: 0,
+        type: 'success',
+      });
+    },
+  });
+}
+
+export { initComponentAdapter };
--- a/apps/web-ele/src/adapter/form.ts
+++ b/apps/web-ele/src/adapter/form.ts
@@ -1,71 +1,14 @@
 import type {
-  BaseFormComponentType,
  VbenFormSchema as FormSchema,
  VbenFormProps,
 } from '@vben/common-ui';

-import { h } from 'vue';
+import type { ComponentType } from './component';

 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';

-import {
-  ElButton,
-  ElCheckbox,
-  ElCheckboxGroup,
-  ElDivider,
-  ElInput,
-  ElInputNumber,
-  ElRadioGroup,
-  ElSelect,
-  ElSpace,
-  ElSwitch,
-  ElTimePicker,
-  ElTreeSelect,
-  ElUpload,
-} from 'element-plus';
-// 业务表单组件适配
-
-export type FormComponentType =
-  | 'Checkbox'
-  | 'CheckboxGroup'
-  | 'DatePicker'
-  | 'Divider'
-  | 'Input'
-  | 'InputNumber'
-  | 'RadioGroup'
-  | 'Select'
-  | 'Space'
-  | 'Switch'
-  | 'TimePicker'
-  | 'TreeSelect'
-  | 'Upload'
-  | BaseFormComponentType;
-
-// 初始化表单组件，并注册到form组件内部
-setupVbenForm<FormComponentType>({
-  components: {
-    Checkbox: ElCheckbox,
-    CheckboxGroup: ElCheckboxGroup,
-    // 自定义默认的重置按钮
-    DefaultResetActionButton: (props, { attrs, slots }) => {
-      return h(ElButton, { ...props, attrs, type: 'info' }, slots);
-    },
-    // 自定义默认的提交按钮
-    DefaultSubmitActionButton: (props, { attrs, slots }) => {
-      return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
-    },
-    Divider: ElDivider,
-    Input: ElInput,
-    InputNumber: ElInputNumber,
-    RadioGroup: ElRadioGroup,
-    Select: ElSelect,
-    Space: ElSpace,
-    Switch: ElSwitch,
-    TimePicker: ElTimePicker,
-    TreeSelect: ElTreeSelect,
-    Upload: ElUpload,
-  },
+setupVbenForm<ComponentType>({
  config: {
    modelPropNameMap: {
      Upload: 'fileList',
@@ -74,22 +17,22 @@ setupVbenForm<FormComponentType>({
  defineRules: {
    required: (value, _params, ctx) => {
      if (value === undefined || value === null || value.length === 0) {
-        return $t('formRules.required', [ctx.label]);
+        return $t('ui.formRules.required', [ctx.label]);
      }
      return true;
    },
    selectRequired: (value, _params, ctx) => {
      if (value === undefined || value === null) {
-        return $t('formRules.selectRequired', [ctx.label]);
+        return $t('ui.formRules.selectRequired', [ctx.label]);
      }
      return true;
    },
  },
 });

-const useVbenForm = useForm<FormComponentType>;
+const useVbenForm = useForm<ComponentType>;

 export { useVbenForm, z };

-export type VbenFormSchema = FormSchema<FormComponentType>;
+export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
--- a/apps/web-ele/src/adapter/index.ts
+++ b/apps/web-ele/src/adapter/index.ts
@@ -1 +0,0 @@
-export * from './form';
--- a/apps/web-ele/src/adapter/vxe-table.ts
+++ b/apps/web-ele/src/adapter/vxe-table.ts
@@ -0,0 +1,68 @@
+import { h } from 'vue';
+
+import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+
+import { ElButton, ElImage } from 'element-plus';
+
+import { useVbenForm } from './form';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    vxeUI.setConfig({
+      grid: {
+        align: 'center',
+        border: false,
+        columnConfig: {
+          resizable: true,
+        },
+        minHeight: 180,
+        formConfig: {
+          // 全局禁用vxe-table的表单配置，使用formOptions
+          enabled: false,
+        },
+        proxyConfig: {
+          autoLoad: true,
+          response: {
+            result: 'items',
+            total: 'total',
+            list: 'items',
+          },
+          showActiveMsg: true,
+          showResponseMsg: false,
+        },
+        round: true,
+        showOverflow: true,
+        size: 'small',
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellImage' },
+    vxeUI.renderer.add('CellImage', {
+      renderTableDefault(_renderOpts, params) {
+        const { column, row } = params;
+        const src = row[column.field];
+        return h(ElImage, { src, previewSrcList: [src] });
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellLink' },
+    vxeUI.renderer.add('CellLink', {
+      renderTableDefault(renderOpts) {
+        const { props } = renderOpts;
+        return h(
+          ElButton,
+          { size: 'small', link: true },
+          { default: () => props?.text },
+        );
+      },
+    });
+
+    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
+    // vxeUI.formats.add
+  },
+  useVbenForm,
+});
+
+export { useVbenVxeGrid };
+
+export type * from '@vben/plugins/vxe-table';
--- a/apps/web-ele/src/api/core/auth.ts
+++ b/apps/web-ele/src/api/core/auth.ts
@@ -3,17 +3,13 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
  /** 登录接口参数 */
  export interface LoginParams {
-    password: string;
-    username: string;
+    password?: string;
+    username?: string;
  }

  /** 登录接口返回值 */
  export interface LoginResult {
    accessToken: string;
-    desc: string;
-    realName: string;
-    userId: string;
-    username: string;
  }

  export interface RefreshTokenResult {
--- a/apps/web-ele/src/api/request.ts
+++ b/apps/web-ele/src/api/request.ts
@@ -1,6 +1,8 @@
 /**
 * 该文件可自行根据业务逻辑进行调整
 */
+import type { HttpResponse } from '@vben/request';
+
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
@@ -68,15 +70,15 @@ function createRequestClient(baseURL: string) {
  });

  // response数据解构
-  client.addResponseInterceptor({
+  client.addResponseInterceptor<HttpResponse>({
    fulfilled: (response) => {
      const { data: responseData, status } = response;

-      const { code, data, message: msg } = responseData;
+      const { code, data } = responseData;
      if (status >= 200 && status < 400 && code === 0) {
        return data;
      }
-      throw new Error(`Error ${status}: ${msg}`);
+      throw Object.assign({}, response, { response });
    },
  });

@@ -93,7 +95,14 @@ function createRequestClient(baseURL: string) {

  // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
  client.addResponseInterceptor(
-    errorMessageResponseInterceptor((msg: string) => ElMessage.error(msg)),
+    errorMessageResponseInterceptor((msg: string, error) => {
+      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+      // 当前mock接口返回的错误字段是 error 或者 message
+      const responseData = error?.response?.data ?? {};
+      const errorMessage = responseData?.error ?? responseData?.message ?? '';
+      // 如果没有错误信息，则会根据状态码进行提示
+      ElMessage.error(errorMessage || msg);
+    }),
  );

  return client;
--- a/apps/web-ele/src/bootstrap.ts
+++ b/apps/web-ele/src/bootstrap.ts
@@ -1,16 +1,22 @@
-import { createApp } from 'vue';
+import { createApp, watchEffect } from 'vue';

 import { registerAccessDirective } from '@vben/access';
+import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
 import '@vben/styles/ele';

-import { setupI18n } from '#/locales';
+import { useTitle } from '@vueuse/core';

+import { $t, setupI18n } from '#/locales';
+
+import { initComponentAdapter } from './adapter/component';
 import App from './app.vue';
 import { router } from './router';

 async function bootstrap(namespace: string) {
+  // 初始化组件适配器
+  await initComponentAdapter();
  const app = createApp(App);

  // 国际化 i18n 配置
@@ -25,6 +31,16 @@ async function bootstrap(namespace: string) {
  // 配置路由及路由守卫
  app.use(router);

+  // 动态更新标题
+  watchEffect(() => {
+    if (preferences.app.dynamicTitle) {
+      const routeTitle = router.currentRoute.value.meta?.title;
+      const pageTitle =
+        (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
+      useTitle(pageTitle);
+    }
+  });
+
  app.mount('#app');
 }

--- a/apps/web-ele/src/layouts/basic.vue
+++ b/apps/web-ele/src/layouts/basic.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/layouts';

-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';

 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
+import { useWatermark } from '@vben/hooks';
 import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
 import {
  BasicLayout,
@@ -54,6 +55,7 @@ const notifications = ref<NotificationItem[]>([
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
+const { destroyWatermark, updateWatermark } = useWatermark();
 const showDot = computed(() =>
  notifications.value.some((item) => !item.isRead),
 );
@@ -66,7 +68,7 @@ const menus = computed(() => [
      });
    },
    icon: BookOpenText,
-    text: $t('widgets.document'),
+    text: $t('ui.widgets.document'),
  },
  {
    handler: () => {
@@ -84,7 +86,7 @@ const menus = computed(() => [
      });
    },
    icon: CircleHelp,
-    text: $t('widgets.qa'),
+    text: $t('ui.widgets.qa'),
  },
 ]);

@@ -103,6 +105,21 @@ function handleNoticeClear() {
 function handleMakeAll() {
  notifications.value.forEach((item) => (item.isRead = true));
 }
+watch(
+  () => preferences.app.watermark,
+  async (enable) => {
+    if (enable) {
+      await updateWatermark({
+        content: `${userStore.userInfo?.username}`,
+      });
+    } else {
+      destroyWatermark();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 </script>

 <template>
--- a/apps/web-ele/src/locales/index.ts
+++ b/apps/web-ele/src/locales/index.ts
@@ -4,7 +4,11 @@ import type { Language } from 'element-plus/es/locale';
 import type { App } from 'vue';
 import { ref } from 'vue';

-import { $t, setupI18n as coreSetup, loadLocalesMap } from '@vben/locales';
+import {
+  $t,
+  setupI18n as coreSetup,
+  loadLocalesMapFromDir,
+} from '@vben/locales';
 import { preferences } from '@vben/preferences';

 import dayjs from 'dayjs';
@@ -13,10 +17,12 @@ import defaultLocale from 'element-plus/es/locale/lang/zh-cn';

 const elementLocale = ref<Language>(defaultLocale);

-const modules = import.meta.glob('./langs/*.json');
-
-const localesMap = loadLocalesMap(modules);
+const modules = import.meta.glob('./langs/**/*.json');

+const localesMap = loadLocalesMapFromDir(
+  /\.\/langs\/([^/]+)\/(.*)\.json$/,
+  modules,
+);
 /**
 * 加载应用特有的语言包
 * 这里也可以改造为从服务端获取翻译数据
@@ -45,14 +51,14 @@ async function loadThirdPartyMessage(lang: SupportedLanguagesType) {
 async function loadDayjsLocale(lang: SupportedLanguagesType) {
  let locale;
  switch (lang) {
-    case 'zh-CN': {
-      locale = await import('dayjs/locale/zh-cn');
-      break;
-    }
    case 'en-US': {
      locale = await import('dayjs/locale/en');
      break;
    }
+    case 'zh-CN': {
+      locale = await import('dayjs/locale/zh-cn');
+      break;
+    }
    // 默认使用英语
    default: {
      locale = await import('dayjs/locale/en');
@@ -71,14 +77,14 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
 */
 async function loadElementLocale(lang: SupportedLanguagesType) {
  switch (lang) {
-    case 'zh-CN': {
-      elementLocale.value = defaultLocale;
-      break;
-    }
    case 'en-US': {
      elementLocale.value = enLocale;
      break;
    }
+    case 'zh-CN': {
+      elementLocale.value = defaultLocale;
+      break;
+    }
  }
 }

--- a/apps/web-ele/src/locales/langs/en-US.json
+++ b/apps/web-ele/src/locales/langs/en-US.json
@@ -1,8 +0,0 @@
-{
-  "page": {
-    "demos": {
-      "title": "Demos",
-      "element-plus": "Element Plus"
-    }
-  }
-}
--- a/apps/web-ele/src/locales/langs/en-US/demos.json
+++ b/apps/web-ele/src/locales/langs/en-US/demos.json
@@ -0,0 +1,12 @@
+{
+  "title": "Demos",
+  "elementPlus": "Element Plus",
+  "vben": {
+    "title": "Project",
+    "about": "About",
+    "document": "Document",
+    "antdv": "Ant Design Vue Version",
+    "naive-ui": "Naive UI Version",
+    "element-plus": "Element Plus Version"
+  }
+}
--- a/apps/web-ele/src/locales/langs/en-US/page.json
+++ b/apps/web-ele/src/locales/langs/en-US/page.json
@@ -0,0 +1,14 @@
+{
+  "auth": {
+    "login": "Login",
+    "register": "Register",
+    "codeLogin": "Code Login",
+    "qrcodeLogin": "Qr Code Login",
+    "forgetPassword": "Forget Password"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "analytics": "Analytics",
+    "workspace": "Workspace"
+  }
+}
--- a/apps/web-ele/src/locales/langs/zh-CN.json
+++ b/apps/web-ele/src/locales/langs/zh-CN.json
@@ -1,8 +0,0 @@
-{
-  "page": {
-    "demos": {
-      "title": "演示",
-      "element-plus": "Element Plus"
-    }
-  }
-}
--- a/apps/web-ele/src/locales/langs/zh-CN/demos.json
+++ b/apps/web-ele/src/locales/langs/zh-CN/demos.json
@@ -0,0 +1,12 @@
+{
+  "title": "演示",
+  "elementPlus": "Element Plus",
+  "vben": {
+    "title": "项目",
+    "about": "关于",
+    "document": "文档",
+    "antdv": "Ant Design Vue 版本",
+    "naive-ui": "Naive UI 版本",
+    "element-plus": "Element Plus 版本"
+  }
+}
--- a/apps/web-ele/src/locales/langs/zh-CN/page.json
+++ b/apps/web-ele/src/locales/langs/zh-CN/page.json
@@ -0,0 +1,14 @@
+{
+  "auth": {
+    "login": "登录",
+    "register": "注册",
+    "codeLogin": "验证码登录",
+    "qrcodeLogin": "二维码登录",
+    "forgetPassword": "忘记密码"
+  },
+  "dashboard": {
+    "title": "概览",
+    "analytics": "分析页",
+    "workspace": "工作台"
+  }
+}
--- a/apps/web-ele/src/preferences.ts
+++ b/apps/web-ele/src/preferences.ts
@@ -3,6 +3,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
 /**
 * @description 项目配置文件
 * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ * !!! 更改配置后请清空缓存，否则可能不生效
 */
 export const overridesPreferences = defineOverridesPreferences({
  // overrides
--- a/apps/web-ele/src/router/guard.ts
+++ b/apps/web-ele/src/router/guard.ts
@@ -5,10 +5,7 @@ import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 import { startProgress, stopProgress } from '@vben/utils';

-import { useTitle } from '@vueuse/core';
-
-import { $t } from '#/locales';
-import { coreRouteNames, dynamicRoutes } from '#/router/routes';
+import { accessRoutes, coreRouteNames } from '#/router/routes';
 import { useAuthStore } from '#/store';

 import { generateAccess } from './access';
@@ -34,21 +31,12 @@ function setupCommonGuard(router: Router) {
  router.afterEach((to) => {
    // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行

-    if (preferences.tabbar.enable) {
-      loadedPaths.add(to.path);
-    }
+    loadedPaths.add(to.path);

    // 关闭页面加载进度条
    if (preferences.transition.progress) {
      stopProgress();
    }
-
-    // 动态修改标题
-    if (preferences.app.dynamicTitle) {
-      const { title } = to.meta;
-      // useTitle(`${$t(title)} - ${preferences.app.name}`);
-      useTitle(`${$t(title)} - ${preferences.app.name}`);
-    }
  });
 }

@@ -107,7 +95,7 @@ function setupAccessGuard(router: Router) {
      roles: userRoles,
      router,
      // 则会在菜单中显示，但是访问会被重定向到403
-      routes: dynamicRoutes,
+      routes: accessRoutes,
    });

    // 保存菜单信息和路由信息
--- a/apps/web-ele/src/router/routes/core.ts
+++ b/apps/web-ele/src/router/routes/core.ts
@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';

-import { DEFAULT_HOME_PATH } from '@vben/constants';
+import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';

 import { AuthPageLayout } from '#/layouts';
 import { $t } from '#/locales';
@@ -32,17 +32,19 @@ const coreRoutes: RouteRecordRaw[] = [
  {
    component: AuthPageLayout,
    meta: {
+      hideInTab: true,
      title: 'Authentication',
    },
    name: 'Authentication',
    path: '/auth',
+    redirect: LOGIN_PATH,
    children: [
      {
        name: 'Login',
        path: 'login',
        component: Login,
        meta: {
-          title: $t('page.core.login'),
+          title: $t('page.auth.login'),
        },
      },
      {
@@ -50,7 +52,7 @@ const coreRoutes: RouteRecordRaw[] = [
        path: 'code-login',
        component: () => import('#/views/_core/authentication/code-login.vue'),
        meta: {
-          title: $t('page.core.codeLogin'),
+          title: $t('page.auth.codeLogin'),
        },
      },
      {
@@ -59,7 +61,7 @@ const coreRoutes: RouteRecordRaw[] = [
        component: () =>
          import('#/views/_core/authentication/qrcode-login.vue'),
        meta: {
-          title: $t('page.core.qrcodeLogin'),
+          title: $t('page.auth.qrcodeLogin'),
        },
      },
      {
@@ -68,7 +70,7 @@ const coreRoutes: RouteRecordRaw[] = [
        component: () =>
          import('#/views/_core/authentication/forget-password.vue'),
        meta: {
-          title: $t('page.core.forgetPassword'),
+          title: $t('page.auth.forgetPassword'),
        },
      },
      {
@@ -76,7 +78,7 @@ const coreRoutes: RouteRecordRaw[] = [
        path: 'register',
        component: () => import('#/views/_core/authentication/register.vue'),
        meta: {
-          title: $t('page.core.register'),
+          title: $t('page.auth.register'),
        },
      },
    ],
--- a/apps/web-ele/src/router/routes/index.ts
+++ b/apps/web-ele/src/router/routes/index.ts
@@ -10,12 +10,16 @@ const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {

 // 有需要可以自行打开注释，并创建文件夹
 // const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
+// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });

 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);

-/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统 */
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统(不会显示在菜单中) */
 // const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
+/** 不需要权限的菜单列表（会显示在菜单中） */
+// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
+const staticRoutes: RouteRecordRaw[] = [];
 const externalRoutes: RouteRecordRaw[] = [];

 /** 路由列表，由基本路由+静态路由组成 */
@@ -28,4 +32,5 @@ const routes: RouteRecordRaw[] = [
 /** 基本路由列表，这些路由不需要进入权限拦截 */
 const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);

-export { coreRouteNames, dynamicRoutes, routes };
+const accessRoutes = [...dynamicRoutes, ...staticRoutes];
+export { accessRoutes, coreRouteNames, routes };
--- a/apps/web-ele/src/router/routes/modules/demos.ts
+++ b/apps/web-ele/src/router/routes/modules/demos.ts
@@ -10,14 +10,14 @@ const routes: RouteRecordRaw[] = [
      icon: 'ic:baseline-view-in-ar',
      keepAlive: true,
      order: 1000,
-      title: $t('page.demos.title'),
+      title: $t('demos.title'),
    },
    name: 'Demos',
    path: '/demos',
    children: [
      {
        meta: {
-          title: $t('page.demos.element-plus'),
+          title: $t('demos.elementPlus'),
        },
        name: 'NaiveDemos',
        path: '/demos/element',
--- a/apps/web-ele/src/router/routes/modules/vben.ts
+++ b/apps/web-ele/src/router/routes/modules/vben.ts
@@ -19,7 +19,7 @@ const routes: RouteRecordRaw[] = [
      badgeType: 'dot',
      icon: VBEN_LOGO_URL,
      order: 9999,
-      title: $t('page.vben.title'),
+      title: $t('demos.vben.title'),
    },
    name: 'VbenProject',
    path: '/vben-admin',
@@ -30,7 +30,7 @@ const routes: RouteRecordRaw[] = [
        component: () => import('#/views/_core/about/index.vue'),
        meta: {
          icon: 'lucide:copyright',
-          title: $t('page.vben.about'),
+          title: $t('demos.vben.about'),
        },
      },
      {
@@ -40,7 +40,7 @@ const routes: RouteRecordRaw[] = [
        meta: {
          icon: 'lucide:book-open-text',
          link: VBEN_DOC_URL,
-          title: $t('page.vben.document'),
+          title: $t('demos.vben.document'),
        },
      },
      {
@@ -61,7 +61,7 @@ const routes: RouteRecordRaw[] = [
          badgeType: 'dot',
          icon: 'logos:naiveui',
          link: VBEN_NAIVE_PREVIEW_URL,
-          title: $t('page.vben.naive-ui'),
+          title: $t('demos.vben.naive-ui'),
        },
      },
      {
@@ -72,7 +72,7 @@ const routes: RouteRecordRaw[] = [
          badgeType: 'dot',
          icon: SvgAntdvLogoIcon,
          link: VBEN_ANT_PREVIEW_URL,
-          title: $t('page.vben.antdv'),
+          title: $t('demos.vben.antdv'),
        },
      },
    ],
--- a/apps/web-ele/src/store/auth.ts
+++ b/apps/web-ele/src/store/auth.ts
@@ -1,5 +1,4 @@
-import type { LoginAndRegisterParams } from '@vben/common-ui';
-import type { UserInfo } from '@vben/types';
+import type { Recordable, UserInfo } from '@vben/types';

 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -26,7 +25,7 @@ export const useAuthStore = defineStore('auth', () => {
   * @param params 登录表单数据
   */
  async function authLogin(
-    params: LoginAndRegisterParams,
+    params: Recordable<any>,
    onSuccess?: () => Promise<void> | void,
  ) {
    // 异步处理用户登录操作并获取 accessToken
@@ -85,7 +84,7 @@ export const useAuthStore = defineStore('auth', () => {
    resetAllStores();
    accessStore.setLoginExpired(false);

-    // 回登陆页带上当前路由地址
+    // 回登录页带上当前路由地址
    await router.replace({
      path: LOGIN_PATH,
      query: redirect
--- a/apps/web-ele/src/views/_core/authentication/code-login.vue
+++ b/apps/web-ele/src/views/_core/authentication/code-login.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';

 import { computed, ref } from 'vue';

@@ -49,7 +50,7 @@ const formSchema = computed((): VbenFormSchema[] => {
 * Asynchronously handle the login process
 * @param values 登录表单数据
 */
-async function handleLogin(values: LoginCodeParams) {
+async function handleLogin(values: Recordable<any>) {
  // eslint-disable-next-line no-console
  console.log(values);
 }
--- a/apps/web-ele/src/views/_core/authentication/forget-password.vue
+++ b/apps/web-ele/src/views/_core/authentication/forget-password.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';

 import { computed, ref } from 'vue';

@@ -27,7 +28,7 @@ const formSchema = computed((): VbenFormSchema[] => {
  ];
 });

-function handleSubmit(value: string) {
+function handleSubmit(value: Recordable<any>) {
  // eslint-disable-next-line no-console
  console.log('reset email:', value);
 }
--- a/apps/web-ele/src/views/_core/authentication/register.vue
+++ b/apps/web-ele/src/views/_core/authentication/register.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';

 import { computed, h, ref } from 'vue';

@@ -45,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
        rules(values) {
          const { password } = values;
          return z
-            .string()
+            .string({ required_error: $t('authentication.passwordTip') })
            .min(1, { message: $t('authentication.passwordTip') })
            .refine((value) => value === password, {
              message: $t('authentication.confirmPasswordTip'),
@@ -55,7 +56,6 @@ const formSchema = computed((): VbenFormSchema[] => {
      },
      fieldName: 'confirmPassword',
      label: $t('authentication.confirmPassword'),
-      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
    {
      component: 'VbenCheckbox',
@@ -67,15 +67,10 @@ const formSchema = computed((): VbenFormSchema[] => {
            h(
              'a',
              {
-                class:
-                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                class: 'vben-link ml-1 ',
                href: '',
              },
-              [
-                $t('authentication.privacyPolicy'),
-                '&',
-                $t('authentication.terms'),
-              ],
+              `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
            ),
          ]),
      }),
@@ -86,7 +81,7 @@ const formSchema = computed((): VbenFormSchema[] => {
  ];
 });

-function handleSubmit(value: LoginAndRegisterParams) {
+function handleSubmit(value: Recordable<any>) {
  // eslint-disable-next-line no-console
  console.log('register submit:', value);
 }
--- a/apps/web-ele/src/views/dashboard/workspace/index.vue
+++ b/apps/web-ele/src/views/dashboard/workspace/index.vue
@@ -7,6 +7,7 @@ import type {
 } from '@vben/common-ui';

 import { ref } from 'vue';
+import { useRouter } from 'vue-router';

 import {
  AnalysisChartCard,
@@ -18,11 +19,15 @@ import {
 } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { useUserStore } from '@vben/stores';
+import { openWindow } from '@vben/utils';

 import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';

 const userStore = useUserStore();

+// 这是一个示例数据，实际项目中需要根据实际情况进行调整
+// url 也可以是内部路由，在 navTo 方法中识别处理，进行内部跳转
+// 例如：url: /dashboard/workspace
 const projectItems: WorkbenchProjectItem[] = [
  {
    color: '',
@@ -31,6 +36,7 @@ const projectItems: WorkbenchProjectItem[] = [
    group: '开源组',
    icon: 'carbon:logo-github',
    title: 'Github',
+    url: 'https://github.com',
  },
  {
    color: '#3fb27f',
@@ -39,6 +45,7 @@ const projectItems: WorkbenchProjectItem[] = [
    group: '算法组',
    icon: 'ion:logo-vue',
    title: 'Vue',
+    url: 'https://vuejs.org',
  },
  {
    color: '#e18525',
@@ -47,6 +54,7 @@ const projectItems: WorkbenchProjectItem[] = [
    group: '上班摸鱼',
    icon: 'ion:logo-html5',
    title: 'Html5',
+    url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
  },
  {
    color: '#bf0c2c',
@@ -55,6 +63,7 @@ const projectItems: WorkbenchProjectItem[] = [
    group: 'UI',
    icon: 'ion:logo-angular',
    title: 'Angular',
+    url: 'https://angular.io',
  },
  {
    color: '#00d8ff',
@@ -63,6 +72,7 @@ const projectItems: WorkbenchProjectItem[] = [
    group: '技术牛',
    icon: 'bx:bxl-react',
    title: 'React',
+    url: 'https://reactjs.org',
  },
  {
    color: '#EBD94E',
@@ -71,39 +81,47 @@ const projectItems: WorkbenchProjectItem[] = [
    group: '架构组',
    icon: 'ion:logo-javascript',
    title: 'Js',
+    url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript',
  },
 ];

+// 同样，这里的 url 也可以使用以 http 开头的外部链接
 const quickNavItems: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    icon: 'ion:home-outline',
    title: '首页',
+    url: '/',
  },
  {
    color: '#bf0c2c',
    icon: 'ion:grid-outline',
    title: '仪表盘',
+    url: '/dashboard',
  },
  {
    color: '#e18525',
    icon: 'ion:layers-outline',
    title: '组件',
+    url: '/demos/features/icons',
  },
  {
    color: '#3fb27f',
    icon: 'ion:settings-outline',
    title: '系统管理',
+    url: '/demos/features/login-expired', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
  },
  {
    color: '#4daf1bc9',
    icon: 'ion:key-outline',
    title: '权限管理',
+    url: '/demos/access/page-control',
  },
  {
    color: '#00d8ff',
    icon: 'ion:bar-chart-outline',
    title: '图表',
+    url: '/analytics',
  },
 ];

@@ -195,6 +213,24 @@ const trendItems: WorkbenchTrendItem[] = [
    title: 'Vben',
  },
 ];
+
+const router = useRouter();
+
+// 这是一个示例方法，实际项目中需要根据实际情况进行调整
+// This is a sample method, adjust according to the actual project requirements
+function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+  if (nav.url?.startsWith('http')) {
+    openWindow(nav.url);
+    return;
+  }
+  if (nav.url?.startsWith('/')) {
+    router.push(nav.url).catch((error) => {
+      console.error('Navigation failed:', error);
+    });
+  } else {
+    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
+  }
+}
 </script>

 <template>
@@ -210,7 +246,7 @@ const trendItems: WorkbenchTrendItem[] = [

    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="mr-4 w-full lg:w-3/5">
-        <WorkbenchProject :items="projectItems" title="项目" />
+        <WorkbenchProject :items="projectItems" title="项目" @click="navTo" />
        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
      </div>
      <div class="w-full lg:w-2/5">
@@ -218,6 +254,7 @@ const trendItems: WorkbenchTrendItem[] = [
          :items="quickNavItems"
          class="mt-5 lg:mt-0"
          title="快捷导航"
+          @click="navTo"
        />
        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
        <AnalysisChartCard class="mt-5" title="访问来源">
--- a/apps/web-ele/src/views/demos/element/index.vue
+++ b/apps/web-ele/src/views/demos/element/index.vue
@@ -7,6 +7,7 @@ import {
  ElMessage,
  ElNotification,
  ElSpace,
+  ElTable,
 } from 'element-plus';

 type NotificationType = 'error' | 'info' | 'success' | 'warning';
@@ -38,6 +39,14 @@ function notify(type: NotificationType) {
    type,
  });
 }
+const tableData = [
+  { prop1: '1', prop2: 'A' },
+  { prop1: '2', prop2: 'B' },
+  { prop1: '3', prop2: 'C' },
+  { prop1: '4', prop2: 'D' },
+  { prop1: '5', prop2: 'E' },
+  { prop1: '6', prop2: 'F' },
+];
 </script>

 <template>
@@ -48,6 +57,7 @@ function notify(type: NotificationType) {
    <ElCard class="mb-5">
      <template #header> 按钮 </template>
      <ElSpace>
+        <ElButton text>Text</ElButton>
        <ElButton>Default</ElButton>
        <ElButton type="primary"> Primary </ElButton>
        <ElButton type="info"> Info </ElButton>
@@ -74,5 +84,11 @@ function notify(type: NotificationType) {
        <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
      </ElSpace>
    </ElCard>
+    <ElCard class="mb-5">
+      <ElTable :data="tableData" stripe>
+        <ElTable.TableColumn label="测试列1" prop="prop1" />
+        <ElTable.TableColumn label="测试列2" prop="prop2" />
+      </ElTable>
+    </ElCard>
  </Page>
 </template>
--- a/apps/web-naive/package.json
+++ b/apps/web-naive/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/web-naive",
-  "version": "5.3.0",
+  "version": "5.4.6",
  "homepage": "https://vben.pro",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/apps/web-naive/src/adapter/component/index.ts
+++ b/apps/web-naive/src/adapter/component/index.ts
@@ -0,0 +1,103 @@
+/**
+ * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
+ * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
+ */
+
+import type { BaseFormComponentType } from '@vben/common-ui';
+
+import type { Component, SetupContext } from 'vue';
+import { h } from 'vue';
+
+import { globalShareState } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import {
+  NButton,
+  NCheckbox,
+  NCheckboxGroup,
+  NDatePicker,
+  NDivider,
+  NInput,
+  NInputNumber,
+  NRadioGroup,
+  NSelect,
+  NSpace,
+  NSwitch,
+  NTimePicker,
+  NTreeSelect,
+  NUpload,
+} from 'naive-ui';
+
+import { message } from '#/adapter/naive';
+
+const withDefaultPlaceholder = <T extends Component>(
+  component: T,
+  type: 'input' | 'select',
+) => {
+  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
+    const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
+    return h(component, { ...props, ...attrs, placeholder }, slots);
+  };
+};
+
+// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
+export type ComponentType =
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'Divider'
+  | 'Input'
+  | 'InputNumber'
+  | 'RadioGroup'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+async function initComponentAdapter() {
+  const components: Partial<Record<ComponentType, Component>> = {
+    // 如果你的组件体积比较大，可以使用异步加载
+    // Button: () =>
+    // import('xxx').then((res) => res.Button),
+
+    Checkbox: NCheckbox,
+    CheckboxGroup: NCheckboxGroup,
+    DatePicker: NDatePicker,
+    // 自定义默认按钮
+    DefaultButton: (props, { attrs, slots }) => {
+      return h(NButton, { ...props, attrs, type: 'default' }, slots);
+    },
+    // 自定义主要按钮
+    PrimaryButton: (props, { attrs, slots }) => {
+      return h(NButton, { ...props, attrs, type: 'primary' }, slots);
+    },
+    Divider: NDivider,
+    Input: withDefaultPlaceholder(NInput, 'input'),
+    InputNumber: withDefaultPlaceholder(NInputNumber, 'input'),
+    RadioGroup: NRadioGroup,
+    Select: withDefaultPlaceholder(NSelect, 'select'),
+    Space: NSpace,
+    Switch: NSwitch,
+    TimePicker: NTimePicker,
+    TreeSelect: withDefaultPlaceholder(NTreeSelect, 'select'),
+    Upload: NUpload,
+  };
+
+  // 将组件注册到全局共享状态中
+  globalShareState.setComponents(components);
+
+  // 定义全局共享状态中的消息提示
+  globalShareState.defineMessage({
+    // 复制成功消息提示
+    copyPreferencesSuccess: (title, content) => {
+      message.success(content || title, {
+        duration: 0,
+      });
+    },
+  });
+}
+
+export { initComponentAdapter };
--- a/apps/web-naive/src/adapter/form.ts
+++ b/apps/web-naive/src/adapter/form.ts
@@ -1,78 +1,19 @@
 import type {
-  BaseFormComponentType,
  VbenFormSchema as FormSchema,
  VbenFormProps,
 } from '@vben/common-ui';

-import { h } from 'vue';
+import type { ComponentType } from './component';

 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';

-import {
-  NButton,
-  NCheckbox,
-  NCheckboxGroup,
-  NDatePicker,
-  NDivider,
-  NInput,
-  NInputNumber,
-  NRadioGroup,
-  NSelect,
-  NSpace,
-  NSwitch,
-  NTimePicker,
-  NTreeSelect,
-  NUpload,
-} from 'naive-ui';
-// 业务表单组件适配
-
-export type FormComponentType =
-  | 'Checkbox'
-  | 'CheckboxGroup'
-  | 'DatePicker'
-  | 'Divider'
-  | 'Input'
-  | 'InputNumber'
-  | 'RadioGroup'
-  | 'Select'
-  | 'Space'
-  | 'Switch'
-  | 'TimePicker'
-  | 'TreeSelect'
-  | 'Upload'
-  | BaseFormComponentType;
-
-// 初始化表单组件，并注册到form组件内部
-setupVbenForm<FormComponentType>({
-  components: {
-    Checkbox: NCheckbox,
-    CheckboxGroup: NCheckboxGroup,
-    DatePicker: NDatePicker,
-    // 自定义默认的重置按钮
-    DefaultResetActionButton: (props, { attrs, slots }) => {
-      return h(NButton, { ...props, attrs, text: false, type: 'info' }, slots);
-    },
-    // 自定义默认的提交按钮
-    DefaultSubmitActionButton: (props, { attrs, slots }) => {
-      return h(
-        NButton,
-        { ...props, attrs, text: false, type: 'primary' },
-        slots,
-      );
-    },
-    Divider: NDivider,
-    Input: NInput,
-    InputNumber: NInputNumber,
-    RadioGroup: NRadioGroup,
-    Select: NSelect,
-    Space: NSpace,
-    Switch: NSwitch,
-    TimePicker: NTimePicker,
-    TreeSelect: NTreeSelect,
-    Upload: NUpload,
-  },
+setupVbenForm<ComponentType>({
  config: {
+    // naive-ui组件不接受onChang事件，所以需要禁用
+    disabledOnChangeListener: true,
+    // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
+    emptyStateValue: null,
    baseModelPropName: 'value',
    modelPropNameMap: {
      Checkbox: 'checked',
@@ -83,22 +24,22 @@ setupVbenForm<FormComponentType>({
  defineRules: {
    required: (value, _params, ctx) => {
      if (value === undefined || value === null || value.length === 0) {
-        return $t('formRules.required', [ctx.label]);
+        return $t('ui.formRules.required', [ctx.label]);
      }
      return true;
    },
    selectRequired: (value, _params, ctx) => {
      if (value === undefined || value === null) {
-        return $t('formRules.selectRequired', [ctx.label]);
+        return $t('ui.formRules.selectRequired', [ctx.label]);
      }
      return true;
    },
  },
 });

-const useVbenForm = useForm<FormComponentType>;
+const useVbenForm = useForm<ComponentType>;

 export { useVbenForm, z };

-export type VbenFormSchema = FormSchema<FormComponentType>;
+export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
--- a/apps/web-naive/src/adapter/index.ts
+++ b/apps/web-naive/src/adapter/index.ts
@@ -1,2 +0,0 @@
-export * from './form';
-export * from './naive';
--- a/apps/web-naive/src/adapter/vxe-table.ts
+++ b/apps/web-naive/src/adapter/vxe-table.ts
@@ -0,0 +1,67 @@
+import { h } from 'vue';
+
+import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+
+import { NButton, NImage } from 'naive-ui';
+
+import { useVbenForm } from './form';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    vxeUI.setConfig({
+      grid: {
+        align: 'center',
+        border: false,
+        columnConfig: {
+          resizable: true,
+        },
+        minHeight: 180,
+        formConfig: {
+          // 全局禁用vxe-table的表单配置，使用formOptions
+          enabled: false,
+        },
+        proxyConfig: {
+          autoLoad: true,
+          response: {
+            result: 'items',
+            total: 'total',
+            list: 'items',
+          },
+          showActiveMsg: true,
+          showResponseMsg: false,
+        },
+        round: true,
+        showOverflow: true,
+        size: 'small',
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellImage' },
+    vxeUI.renderer.add('CellImage', {
+      renderTableDefault(_renderOpts, params) {
+        const { column, row } = params;
+        return h(NImage, { src: row[column.field] });
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellLink' },
+    vxeUI.renderer.add('CellLink', {
+      renderTableDefault(renderOpts) {
+        const { props } = renderOpts;
+        return h(
+          NButton,
+          { size: 'small', type: 'primary', quaternary: true },
+          { default: () => props?.text },
+        );
+      },
+    });
+
+    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
+    // vxeUI.formats.add
+  },
+  useVbenForm,
+});
+
+export { useVbenVxeGrid };
+
+export type * from '@vben/plugins/vxe-table';
--- a/apps/web-naive/src/api/core/auth.ts
+++ b/apps/web-naive/src/api/core/auth.ts
@@ -3,17 +3,13 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
  /** 登录接口参数 */
  export interface LoginParams {
-    password: string;
-    username: string;
+    password?: string;
+    username?: string;
  }

  /** 登录接口返回值 */
  export interface LoginResult {
    accessToken: string;
-    desc: string;
-    realName: string;
-    userId: string;
-    username: string;
  }

  export interface RefreshTokenResult {
--- a/apps/web-naive/src/api/request.ts
+++ b/apps/web-naive/src/api/request.ts
@@ -1,6 +1,8 @@
 /**
 * 该文件可自行根据业务逻辑进行调整
 */
+import type { HttpResponse } from '@vben/request';
+
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
@@ -10,7 +12,7 @@ import {
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';

-import { message } from '#/adapter';
+import { message } from '#/adapter/naive';
 import { useAuthStore } from '#/store';

 import { refreshTokenApi } from './core';
@@ -67,15 +69,15 @@ function createRequestClient(baseURL: string) {
  });

  // response数据解构
-  client.addResponseInterceptor({
+  client.addResponseInterceptor<HttpResponse>({
    fulfilled: (response) => {
      const { data: responseData, status } = response;

-      const { code, data, message: msg } = responseData;
+      const { code, data } = responseData;
      if (status >= 200 && status < 400 && code === 0) {
        return data;
      }
-      throw new Error(`Error ${status}: ${msg}`);
+      throw Object.assign({}, response, { response });
    },
  });

@@ -92,7 +94,14 @@ function createRequestClient(baseURL: string) {

  // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
  client.addResponseInterceptor(
-    errorMessageResponseInterceptor((msg: string) => message.error(msg)),
+    errorMessageResponseInterceptor((msg: string, error) => {
+      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+      // 当前mock接口返回的错误字段是 error 或者 message
+      const responseData = error?.response?.data ?? {};
+      const errorMessage = responseData?.error ?? responseData?.message ?? '';
+      // 如果没有错误信息，则会根据状态码进行提示
+      message.error(errorMessage || msg);
+    }),
  );

  return client;
--- a/apps/web-naive/src/bootstrap.ts
+++ b/apps/web-naive/src/bootstrap.ts
@@ -1,15 +1,21 @@
-import { createApp } from 'vue';
+import { createApp, watchEffect } from 'vue';

 import { registerAccessDirective } from '@vben/access';
+import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';

-import { setupI18n } from '#/locales';
+import { useTitle } from '@vueuse/core';

+import { $t, setupI18n } from '#/locales';
+
+import { initComponentAdapter } from './adapter/component';
 import App from './app.vue';
 import { router } from './router';

 async function bootstrap(namespace: string) {
+  // 初始化组件适配器
+  initComponentAdapter();
  const app = createApp(App);

  // 国际化 i18n 配置
@@ -24,6 +30,16 @@ async function bootstrap(namespace: string) {
  // 配置路由及路由守卫
  app.use(router);

+  // 动态更新标题
+  watchEffect(() => {
+    if (preferences.app.dynamicTitle) {
+      const routeTitle = router.currentRoute.value.meta?.title;
+      const pageTitle =
+        (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
+      useTitle(pageTitle);
+    }
+  });
+
  app.mount('#app');
 }

--- a/apps/web-naive/src/layouts/basic.vue
+++ b/apps/web-naive/src/layouts/basic.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/layouts';

-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';

 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
+import { useWatermark } from '@vben/hooks';
 import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
 import {
  BasicLayout,
@@ -54,6 +55,7 @@ const notifications = ref<NotificationItem[]>([
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
+const { destroyWatermark, updateWatermark } = useWatermark();
 const showDot = computed(() =>
  notifications.value.some((item) => !item.isRead),
 );
@@ -66,7 +68,7 @@ const menus = computed(() => [
      });
    },
    icon: BookOpenText,
-    text: $t('widgets.document'),
+    text: $t('ui.widgets.document'),
  },
  {
    handler: () => {
@@ -84,7 +86,7 @@ const menus = computed(() => [
      });
    },
    icon: CircleHelp,
-    text: $t('widgets.qa'),
+    text: $t('ui.widgets.qa'),
  },
 ]);

@@ -103,6 +105,22 @@ function handleNoticeClear() {
 function handleMakeAll() {
  notifications.value.forEach((item) => (item.isRead = true));
 }
+
+watch(
+  () => preferences.app.watermark,
+  async (enable) => {
+    if (enable) {
+      await updateWatermark({
+        content: `${userStore.userInfo?.username}`,
+      });
+    } else {
+      destroyWatermark();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 </script>

 <template>
--- a/apps/web-naive/src/locales/index.ts
+++ b/apps/web-naive/src/locales/index.ts
@@ -2,12 +2,19 @@ import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';

 import type { App } from 'vue';

-import { $t, setupI18n as coreSetup, loadLocalesMap } from '@vben/locales';
+import {
+  $t,
+  setupI18n as coreSetup,
+  loadLocalesMapFromDir,
+} from '@vben/locales';
 import { preferences } from '@vben/preferences';

-const modules = import.meta.glob('./langs/*.json');
+const modules = import.meta.glob('./langs/**/*.json');

-const localesMap = loadLocalesMap(modules);
+const localesMap = loadLocalesMapFromDir(
+  /\.\/langs\/([^/]+)\/(.*)\.json$/,
+  modules,
+);

 /**
 * 加载应用特有的语言包
--- a/apps/web-naive/src/locales/langs/en-US.json
+++ b/apps/web-naive/src/locales/langs/en-US.json
@@ -1,9 +0,0 @@
-{
-  "page": {
-    "demos": {
-      "title": "Demos",
-      "naive": "Naive UI",
-      "table": "Table"
-    }
-  }
-}
--- a/apps/web-naive/src/locales/langs/en-US/demos.json
+++ b/apps/web-naive/src/locales/langs/en-US/demos.json
@@ -0,0 +1,13 @@
+{
+  "title": "Demos",
+  "naive": "Naive UI",
+  "table": "Table",
+  "vben": {
+    "title": "Project",
+    "about": "About",
+    "document": "Document",
+    "antdv": "Ant Design Vue Version",
+    "naive-ui": "Naive UI Version",
+    "element-plus": "Element Plus Version"
+  }
+}
--- a/apps/web-naive/src/locales/langs/en-US/page.json
+++ b/apps/web-naive/src/locales/langs/en-US/page.json
@@ -0,0 +1,14 @@
+{
+  "auth": {
+    "login": "Login",
+    "register": "Register",
+    "codeLogin": "Code Login",
+    "qrcodeLogin": "Qr Code Login",
+    "forgetPassword": "Forget Password"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "analytics": "Analytics",
+    "workspace": "Workspace"
+  }
+}
--- a/apps/web-naive/src/locales/langs/zh-CN.json
+++ b/apps/web-naive/src/locales/langs/zh-CN.json
@@ -1,9 +0,0 @@
-{
-  "page": {
-    "demos": {
-      "title": "演示",
-      "naive": "Naive UI",
-      "table": "Table"
-    }
-  }
-}
--- a/apps/web-naive/src/locales/langs/zh-CN/demos.json
+++ b/apps/web-naive/src/locales/langs/zh-CN/demos.json
@@ -0,0 +1,13 @@
+{
+  "title": "演示",
+  "naive": "Naive UI",
+  "table": "Table",
+  "vben": {
+    "title": "项目",
+    "about": "关于",
+    "document": "文档",
+    "antdv": "Ant Design Vue 版本",
+    "naive-ui": "Naive UI 版本",
+    "element-plus": "Element Plus 版本"
+  }
+}
--- a/apps/web-naive/src/locales/langs/zh-CN/page.json
+++ b/apps/web-naive/src/locales/langs/zh-CN/page.json
@@ -0,0 +1,14 @@
+{
+  "auth": {
+    "login": "登录",
+    "register": "注册",
+    "codeLogin": "验证码登录",
+    "qrcodeLogin": "二维码登录",
+    "forgetPassword": "忘记密码"
+  },
+  "dashboard": {
+    "title": "概览",
+    "analytics": "分析页",
+    "workspace": "工作台"
+  }
+}
--- a/apps/web-naive/src/preferences.ts
+++ b/apps/web-naive/src/preferences.ts
@@ -3,6 +3,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
 /**
 * @description 项目配置文件
 * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ * !!! 更改配置后请清空缓存，否则可能不生效
 */
 export const overridesPreferences = defineOverridesPreferences({
  // overrides
--- a/Show More
+++ b/Show More