chore: release v5.3.2

* feat: add examples of asynchronous form verification and verification time

.dockerignore

@@ -3,3 +3,5 @@ node_modules
 .gitignore
 *.md
 dist
+.turbo
+dist.zip

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,7 +1,7 @@
 name: 🐞 Bug Report
 description: Report an issue with Vben Admin to help us make it better.
-title: "Bug: "
-labels: ["bug: pending triage"]
+title: 'Bug: '
+labels: ['bug: pending triage']
 
 body:
   - type: markdown

.github/ISSUE_TEMPLATE/docs.yml

@@ -1,6 +1,6 @@
 name: 📚 Documentation
 description: Report an issue with Vben Admin Website to help us make it better.
-title: "Docs: "
+title: 'Docs: '
 labels: [documentation]
 body:
   - type: markdown

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,7 +1,7 @@
 name: ✨ New Feature Proposal
 description: Propose a new feature to be added to Vben Admin
-title: "FEATURE: "
-labels: ["enhancement: pending triage"]
+title: 'FEATURE: '
+labels: ['enhancement: pending triage']
 body:
   - type: markdown
     attributes:

.github/actions/setup-node/action.yml

@@ -1,9 +1,9 @@
-name: "Setup Node"
+name: 'Setup Node'
 
-description: "Setup node and pnpm"
+description: 'Setup node and pnpm'
 
 runs:
-  using: "composite"
+  using: 'composite'
   steps:
     - name: Install pnpm
       uses: pnpm/action-setup@v4
@@ -12,7 +12,7 @@ runs:
       uses: actions/setup-node@v4
       with:
         node-version-file: .node-version
-        cache: "pnpm"
+        cache: 'pnpm'
 
     - name: Get pnpm store directory
       shell: bash

.github/dependabot.yml

@@ -1,7 +1,7 @@
 version: 2
 updates:
   - package-ecosystem: npm
-    directory: "/"
+    directory: '/'
     schedule:
       interval: daily
     groups:
@@ -9,7 +9,7 @@ updates:
         update-types: [minor, patch]
 
   - package-ecosystem: github-actions
-    directory: "/"
+    directory: '/'
     schedule:
       interval: weekly
     groups:

.github/release-drafter.yml

@@ -1,7 +1,7 @@
-name-template: "v$RESOLVED_VERSION"
-tag-template: "v$RESOLVED_VERSION"
+name-template: 'v$RESOLVED_VERSION'
+tag-template: 'v$RESOLVED_VERSION'
 version-template: $MAJOR.$MINOR.$PATCH
-change-template: "* $TITLE (#$NUMBER) @$AUTHOR"
+change-template: '* $TITLE (#$NUMBER) @$AUTHOR'
 template: |
   # What's Changed
 
@@ -10,52 +10,52 @@ template: |
   **Full Changelog**: https://github.com/$OWNER/$REPOSITORY/compare/$PREVIOUS_TAG...v$RESOLVED_VERSION
 
 categories:
-  - title: "🚀 Features"
+  - title: '🚀 Features'
     labels:
-      - "feature"
-      - "enhancement"
-  - title: "🐞 Bug Fixes"
+      - 'feature'
+  - title: '🐞 Bug Fixes'
     labels:
-      - "bug"
-  - title: "📈 Performance"
+      - 'bug'
+  - title: '📈 Performance'
     labels:
-      - "perf"
+      - 'perf'
+      - 'enhancement'
   - title: 📝 Documentation
     labels:
-      - "documentation"
+      - 'documentation'
   - title: 👻 Maintenance
     labels:
-      - "chore"
-      - "dependencies"
+      - 'chore'
+      - 'dependencies'
     # collapse-after: 12
   - title: 🚦 Tests
     labels:
-      - "tests"
-  - title: "Breaking"
-    label: "breaking"
+      - 'tests'
+  - title: 'Breaking'
+    label: 'breaking'
 
 version-resolver:
   major:
     labels:
-      - "major"
-      - "breaking"
+      - 'major'
+      - 'breaking'
   minor:
     labels:
-      - "minor"
+      - 'minor'
   patch:
     labels:
-      - "feature"
-      - "patch"
-      - "bug"
-      - "maintenance"
-      - "docs"
-      - "dependencies"
-      - "security"
+      - 'feature'
+      - 'patch'
+      - 'bug'
+      - 'maintenance'
+      - 'docs'
+      - 'dependencies'
+      - 'security'
 
 exclude-labels:
-  - "skip-changelog"
-  - "no-changelog"
-  - "changelog"
-  - "bump versions"
-  - "reverted"
-  - "invalid"
+  - 'skip-changelog'
+  - 'no-changelog'
+  - 'changelog'
+  - 'bump versions'
+  - 'reverted'
+  - 'invalid'

.github/workflows/build.yml

@@ -7,7 +7,7 @@ on:
       - main
 
 env:
-  HUSKY: "0"
+  HUSKY: '0'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
@@ -19,8 +19,15 @@ permissions:
 
 jobs:
   post-update:
+    if: github.repository == 'vbenjs/vue-vben-admin'
     # if: ${{ github.actor == 'dependabot[bot]' }}
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+          # - macos-latest
+          - windows-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

.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
@@ -36,7 +36,7 @@ jobs:
         uses: changesets/action@v1
         with:
           version: pnpm run version
-          commit: "chore: bump versions"
-          title: "chore: bump versions"
+          commit: 'chore: bump versions'
+          title: 'chore: bump versions'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -5,7 +5,7 @@ on:
   push:
     branches:
       - main
-      - "releases/*"
+      - 'releases/*'
 
 permissions:
   contents: read
@@ -17,13 +17,13 @@ env:
 jobs:
   test:
     name: Test
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
         os:
           - ubuntu-latest
-          - macos-latest
+          # - macos-latest
           - windows-latest
     timeout-minutes: 20
     steps:
@@ -56,13 +56,13 @@ jobs:
 
   lint:
     name: Lint
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
         os:
           - ubuntu-latest
-          - macos-latest
+          # - macos-latest
           - windows-latest
 
     steps:
@@ -79,13 +79,14 @@ jobs:
 
   check:
     name: Check
+    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ${{ matrix.os }}
     timeout-minutes: 20
     strategy:
       matrix:
         os:
           - ubuntu-latest
-          - macos-latest
+          # - macos-latest
           - windows-latest
     steps:
       - name: Checkout code
@@ -108,8 +109,8 @@ jobs:
 
   ci-ok:
     name: CI OK
+    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && always()
     needs: [test, check, lint]
     env:
       FAILURE: ${{ contains(join(needs.*.result, ','), 'failure') }}

.github/workflows/codeql.yml

@@ -9,19 +9,20 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: ["main"]
+    branches: ['main']
   pull_request:
-    branches: ["main"]
+    branches: ['main']
   schedule:
-    - cron: "35 0 * * 0"
+    - cron: '35 0 * * 0'
 
 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
@@ -90,4 +91,4 @@ jobs:
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v3
         with:
-          category: "/language:${{matrix.language}}"
+          category: '/language:${{matrix.language}}'

.github/workflows/deploy.yml

@@ -6,9 +6,9 @@ on:
       - main
 
 jobs:
-  deploy-push-playground-ftp:
+  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
@@ -27,7 +27,7 @@ jobs:
         uses: ./.github/actions/setup-node
 
       - name: Build
-        run: pnpm build:play && pnpm build:docs
+        run: pnpm build:play
 
       - name: Sync Playground files
         uses: SamKirkland/FTP-Deploy-Action@v4.3.5
@@ -37,6 +37,22 @@ jobs:
           password: ${{ secrets.WEB_PLAYGROUND_FTP_PWSSWORD }}
           local-dir: ./playground/dist/
 
+  deploy-docs-ftp:
+    name: Deploy Push Docs Ftp
+    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
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node
+
+      - name: Build
+        run: pnpm build:docs
+
       - name: Sync Docs files
         uses: SamKirkland/FTP-Deploy-Action@v4.3.5
         with:
@@ -45,9 +61,9 @@ jobs:
           password: ${{ secrets.WEBSITE_FTP_PASSWORD }}
           local-dir: ./docs/.vitepress/dist/
 
-  deploy-push-antd-ftp:
+  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
@@ -76,9 +92,9 @@ jobs:
           password: ${{ secrets.WEB_ANTD_FTP_PASSWORD }}
           local-dir: ./apps/web-antd/dist/
 
-  deploy-push-ele-ftp:
+  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
@@ -107,9 +123,9 @@ jobs:
           password: ${{ secrets.WEB_ELE_FTP_PASSWORD }}
           local-dir: ./apps/web-ele/dist/
 
-  deploy-push-naive-ftp:
+  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

.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

.github/workflows/issue-close-require.yml

@@ -3,23 +3,29 @@ name: Issue Close Require
 
 # 触发条件：每天零点
 on:
+  workflow_dispatch:
   schedule:
-    - cron: "0 0 * * *"
+    - 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: "need 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

.github/workflows/issue-labeled.yml

@@ -13,33 +13,34 @@ permissions:
 
 jobs:
   reply-labeled:
+    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
     steps:
       - name: remove enhancement pending
         if: github.event.label.name == 'enhancement'
         uses: actions-cool/issues-helper@v3
         with:
-          actions: "remove-labels"
+          actions: 'remove-labels'
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
-          labels: "enhancement: pending triage"
+          labels: 'enhancement: pending triage'
 
       - name: remove bug pending
         if: github.event.label.name == 'bug'
         uses: actions-cool/issues-helper@v3
         with:
-          actions: "remove-labels"
+          actions: 'remove-labels'
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
-          labels: "bug: pending triage"
+          labels: 'bug: pending triage'
 
       - name: needs reproduction
         if: github.event.label.name == 'needs reproduction'
         uses: actions-cool/issues-helper@v3
         with:
-          actions: "create-comment, remove-labels"
+          actions: 'create-comment, remove-labels'
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
           body: |
             Hello @${{ github.event.issue.user.login }}. Please provide the complete reproduction steps and code. Issues labeled by `needs reproduction` will be closed if no activities in 3 days.
-          labels: "bug: pending triage"
+          labels: 'bug: pending triage'

.github/workflows/lock.yml

@@ -2,7 +2,7 @@ name: Lock Threads
 
 on:
   schedule:
-    - cron: "0 0 * * *"
+    - cron: '0 0 * * *'
   workflow_dispatch:
 
 permissions:
@@ -11,13 +11,14 @@ 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-lock-reason: ""
-          pr-inactive-days: "30"
-          pr-lock-reason: ""
-          process-only: "issues, prs"
+          issue-inactive-days: '14'
+          issue-lock-reason: ''
+          pr-inactive-days: '30'
+          pr-lock-reason: ''
+          process-only: 'issues, prs'

.github/workflows/release-tag.yml

@@ -3,10 +3,10 @@ name: Create Release Tag
 on:
   push:
     tags:
-      - "v*.*.*" # Push events to matching v*, i.e. v1.0, v20.15.10
+      - 'v*.*.*' # Push events to matching v*, i.e. v1.0, v20.15.10
 
 env:
-  HUSKY: "0"
+  HUSKY: '0'
 
 permissions:
   pull-requests: write
@@ -15,6 +15,7 @@ permissions:
 jobs:
   build:
     name: Create Release
+    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
     strategy:
       matrix:

.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

.github/workflows/stale.yml

@@ -1,18 +1,19 @@
-name: "Close stale issues"
+name: 'Close stale issues'
 
 on:
   schedule:
-    - cron: "0 1 * * *"
+    - cron: '0 1 * * *'
 
 jobs:
   stale:
+    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/stale@v9
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          stale-issue-message: "This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days"
-          stale-pr-message: "This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days"
-          exempt-issue-labels: "bug,enhancement"
+          stale-issue-message: 'This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days'
+          stale-pr-message: 'This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days'
+          exempt-issue-labels: 'bug,enhancement'
           days-before-stale: 60
           days-before-close: 7

.gitignore

@@ -48,3 +48,4 @@ vite.config.ts.*
 *.njsproj
 *.sln
 *.sw?
+.history

.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

.ls-lint.yml

@@ -1,28 +0,0 @@
-ls:
-  .js: kebab-case | pointcase
-  .vue: kebab-case | pointcase
-  .ts: kebab-case | pointcase
-  .tsx: kebab-case | pointcase
-  .jsx: kebab-case | pointcase
-  .css: kebab-case | pointcase
-  .d.ts: kebab-case | pointcase
-  # shadcn 自动生成文件为 PascalCase 格式
-  packages/@core/ui-kit/shadcn-ui/src/components/ui:
-    .vue: PascalCase
-
-ignore:
-  - "**/*.png"
-  - "**/*.jpg"
-  - "**/*.jpeg"
-  - "**/*.jpeg"
-  - "**/*.gif"
-  - "**/_util.ts"
-  - "**/deps/**"
-  - "**/dist/**"
-  - "**/node_modules/**"
-  - "**/.turbo/**"
-  - .git
-  - .vscode
-  - .idea
-  - node_modules
-  - .cache

.vscode/launch.json

@@ -9,7 +9,7 @@
       "url": "http://localhost:5555",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/playground/src"
+      "webRoot": "${workspaceFolder}"
     },
     {
       "type": "chrome",
@@ -18,7 +18,7 @@
       "url": "http://localhost:5666",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/apps/web-antd/src"
+      "webRoot": "${workspaceFolder}"
     },
     {
       "type": "chrome",
@@ -27,7 +27,7 @@
       "url": "http://localhost:5777",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/apps/web-ele/src"
+      "webRoot": "${workspaceFolder}"
     },
     {
       "type": "chrome",
@@ -36,7 +36,7 @@
       "url": "http://localhost:5888",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/apps/web-naive/src"
+      "webRoot": "${workspaceFolder}"
     }
   ]
 }

.vscode/settings.json

@@ -14,7 +14,6 @@
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
   "editor.cursorBlinking": "expand",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.largeFileOptimizations": false,
   "editor.accessibilitySupport": "off",
   "editor.cursorSmoothCaretAnimation": "on",
@@ -37,7 +36,34 @@
     "source.fixAll.stylelint": "explicit",
     "source.organizeImports": "never"
   },
-
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   // extensions
   "extensions.ignoreRecommendations": true,
 
@@ -56,7 +82,8 @@
     "*.ejs": "html",
     "*.art": "html",
     "**/tsconfig.json": "jsonc",
-    "*.json": "jsonc"
+    "*.json": "jsonc",
+    "package.json": "json"
   },
 
   "files.exclude": {
@@ -167,9 +194,10 @@
 
   "i18n-ally.localesPaths": [
     "packages/locales/src/langs",
-    "playground/src/langs",
+    "playground/src/locales/langs",
     "apps/*/src/locales/langs"
   ],
+  "i18n-ally.pathMatcher": "{locale}.json",
   "i18n-ally.enabledParsers": ["json", "ts", "js", "yaml"],
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.displayLanguage": "zh-CN",
@@ -184,14 +212,12 @@
     "*.env": "$(capture).env.*",
     "README.md": "README*,CHANGELOG*,LICENSE,CNAME",
     "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json",
-    "Dockerfile": "Dockerfile,.docker*,docker-entrypoint.sh,build-local-docker*,nginx.conf",
-    "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,.ls-lint*,cspell.json",
+    "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json",
     "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",
-  "vitest.disableWorkspaceWarning": true
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

README.ja-JP.md

@@ -1,10 +1,12 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
 <h1>Vue Vben Admin</h1>
 </div>
 
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
+
 **日本語** | [English](./README.md) | [中文](./README.zh-CN.md)
 
 ## 紹介
@@ -123,11 +125,15 @@ 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)
+
 ## 寄付
 
 このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます！
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
+![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>
 

README.md

@@ -1,10 +1,12 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
 <h1>Vue Vben Admin</h1>
 </div>
 
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
+
 **English** | [中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md)
 
 ## Introduction
@@ -122,11 +124,15 @@ 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.6/source/sponsor.png)
+![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>
 

README.zh-CN.md

@@ -1,10 +1,12 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
 <h1>Vue Vben Admin</h1>
 </div>
 
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
+
 **中文** | [English](./README.md) | [日本語](./README.ja-JP.md)
 
 ## 简介
@@ -75,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。
@@ -118,18 +124,18 @@ 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)
+
 ## 捐赠
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
+![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>
 
-## 更新日志
-
-[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
-
 ## Contributor
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">

apps/backend-mock/error.ts

@@ -1,7 +1,7 @@
 import type { NitroErrorHandler } from 'nitropack';
 
 const errorHandler: NitroErrorHandler = function (error, event) {
-  event.res.end(`[error handler] ${error.stack}`);
+  event.node.res.end(`[Error Handler] ${error.stack}`);
 };
 
 export default errorHandler;

apps/backend-mock/package.json

@@ -10,11 +10,11 @@
     "start": "nitro dev"
   },
   "dependencies": {
-    "jsonwebtoken": "^9.0.2",
-    "nitropack": "^2.9.7"
+    "jsonwebtoken": "catalog:",
+    "nitropack": "catalog:"
   },
   "devDependencies": {
-    "@types/jsonwebtoken": "^9.0.6",
-    "h3": "^1.12.0"
+    "@types/jsonwebtoken": "catalog:",
+    "h3": "catalog:"
   }
 }

apps/backend-mock/utils/jwt-utils.ts

@@ -14,7 +14,7 @@ export interface UserPayload extends UserInfo {
 }
 
 export function generateAccessToken(user: UserInfo) {
-  return jwt.sign(user, ACCESS_TOKEN_SECRET, { expiresIn: '2h' });
+  return jwt.sign(user, ACCESS_TOKEN_SECRET, { expiresIn: '7d' });
 }
 
 export function generateRefreshToken(user: UserInfo) {

apps/web-antd/.env.production

@@ -14,3 +14,6 @@ VITE_ROUTER_HISTORY=hash
 
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true

apps/web-antd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.1.1",
+  "version": "5.3.2",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -27,24 +27,24 @@
   },
   "dependencies": {
     "@vben/access": "workspace:*",
-    "@vben/chart-ui": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
     "@vben/preferences": "workspace:*",
     "@vben/request": "workspace:*",
     "@vben/stores": "workspace:*",
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/core": "^11.0.0",
-    "ant-design-vue": "^4.2.3",
-    "dayjs": "^1.11.12",
-    "pinia": "2.2.2",
-    "vue": "^3.4.38",
-    "vue-router": "^4.4.3"
+    "@vueuse/core": "catalog:",
+    "ant-design-vue": "catalog:",
+    "dayjs": "catalog:",
+    "pinia": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
   }
 }

apps/web-antd/src/adapter/form.ts

@@ -0,0 +1,138 @@
+import type {
+  BaseFormComponentType,
+  VbenFormSchema as FormSchema,
+  VbenFormProps,
+} from '@vben/common-ui';
+
+import type { Component, SetupContext } from 'vue';
+import { h } from 'vue';
+
+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;
+
+const withDefaultPlaceholder = <T extends Component>(
+  component: T,
+  type: 'input' | 'select',
+) => {
+  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
+    const placeholder = props?.placeholder || $t(`placeholder.${type}`);
+    return h(component, { ...props, ...attrs, placeholder }, slots);
+  };
+};
+
+// 初始化表单组件，并注册到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: withDefaultPlaceholder(Input, 'input'),
+    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
+    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
+    Mentions: withDefaultPlaceholder(Mentions, 'input'),
+    Radio,
+    RadioGroup,
+    RangePicker,
+    Rate,
+    Select: withDefaultPlaceholder(Select, 'select'),
+    Space,
+    Switch,
+    Textarea: withDefaultPlaceholder(Textarea, 'input'),
+    TimePicker,
+    TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
+    Upload,
+  },
+  config: {
+    // ant design vue组件库默认都是 v-model:value
+    baseModelPropName: 'value',
+
+    // 一些组件是 v-model:checked 或者 v-model:fileList
+    modelPropNameMap: {
+      Checkbox: 'checked',
+      Radio: 'checked',
+      Switch: 'checked',
+      Upload: 'fileList',
+    },
+  },
+  defineRules: {
+    // 输入项目必填国际化适配
+    required: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return $t('formRules.required', [ctx.label]);
+      }
+      return true;
+    },
+    // 选择项目必填国际化适配
+    selectRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null) {
+        return $t('formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
+  },
+});
+
+const useVbenForm = useForm<FormComponentType>;
+
+export { useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<FormComponentType>;
+export type { VbenFormProps };

apps/web-antd/src/adapter/index.ts

@@ -0,0 +1 @@
+export * from './form';

apps/web-antd/src/api/core/auth.ts

@@ -10,10 +10,6 @@ export namespace AuthApi {
   /** 登录接口返回值 */
   export interface LoginResult {
     accessToken: string;
-    desc: string;
-    realName: string;
-    userId: string;
-    username: string;
   }
 
   export interface RefreshTokenResult {
@@ -42,7 +38,9 @@ export async function refreshTokenApi() {
  * 退出登录
  */
 export async function logoutApi() {
-  return requestClient.post('/auth/logout');
+  return baseRequestClient.post('/auth/logout', {
+    withCredentials: true,
+  });
 }
 
 /**

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 {
@@ -31,7 +33,10 @@ function createRequestClient(baseURL: string) {
     const accessStore = useAccessStore();
     const authStore = useAuthStore();
     accessStore.setAccessToken(null);
-    if (preferences.app.loginExpiredMode === 'modal') {
+    if (
+      preferences.app.loginExpiredMode === 'modal' &&
+      accessStore.isAccessChecked
+    ) {
       accessStore.setLoginExpired(true);
     } else {
       await authStore.logout();
@@ -65,7 +70,7 @@ function createRequestClient(baseURL: string) {
   });
 
   // response数据解构
-  client.addResponseInterceptor({
+  client.addResponseInterceptor<HttpResponse>({
     fulfilled: (response) => {
       const { data: responseData, status } = response;
 
@@ -90,7 +95,10 @@ function createRequestClient(baseURL: string) {
 
   // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
   client.addResponseInterceptor(
-    errorMessageResponseInterceptor((msg: string) => message.error(msg)),
+    errorMessageResponseInterceptor((msg: string, _error) => {
+      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+      message.error(msg);
+    }),
   );
 
   return client;

apps/web-antd/src/layouts/auth.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>

apps/web-antd/src/layouts/basic.vue

@@ -13,11 +13,12 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';
 
 const notifications = ref<NotificationItem[]>([
   {
@@ -87,8 +88,6 @@ const menus = computed(() => [
   },
 ]);
 
-const { loginLoading } = storeToRefs(authStore);
-
 const avatar = computed(() => {
   return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
@@ -130,11 +129,9 @@ function handleMakeAll() {
       <AuthenticationLoginExpiredModal
         v-model:open="accessStore.loginExpired"
         :avatar
-        :loading="loginLoading"
-        password-placeholder="123456"
-        username-placeholder="vben"
-        @submit="authStore.authLogin"
-      />
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
     </template>
     <template #lock-screen>
       <LockScreen :avatar @to-login="handleLogout" />

apps/web-antd/src/layouts/index.ts

@@ -1,8 +1,6 @@
 const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');
 
 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
 
-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
-
 export { AuthPageLayout, BasicLayout, IFrameView };

apps/web-antd/src/locales/index.ts

@@ -91,4 +91,4 @@ async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
   });
 }
 
-export { $t, antdLocale, loadMessages, setupI18n };
+export { $t, antdLocale, setupI18n };

apps/web-antd/src/router/guard.ts

@@ -92,10 +92,8 @@ function setupAccessGuard(router: Router) {
       return to;
     }
 
-    const accessRoutes = accessStore.accessRoutes;
-
     // 是否已经生成过动态路由
-    if (accessRoutes && accessRoutes.length > 0) {
+    if (accessStore.isAccessChecked) {
       return true;
     }
 
@@ -115,6 +113,7 @@ function setupAccessGuard(router: Router) {
     // 保存菜单信息和路由信息
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
+    accessStore.setIsAccessChecked(true);
     const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
     return {

apps/web-antd/src/router/index.ts

@@ -19,7 +19,12 @@ const router = createRouter({
       : createWebHistory(import.meta.env.VITE_BASE),
   // 应该添加到路由的初始路由列表。
   routes,
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
   // 是否应该禁止尾部斜杠。
   // strict: true,
 });

apps/web-antd/src/router/routes/modules/dashboard.ts

@@ -29,6 +29,7 @@ const routes: RouteRecordRaw[] = [
         path: '/workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
+          icon: 'carbon:workspace',
           title: $t('page.dashboard.workspace'),
         },
       },

apps/web-antd/src/router/routes/modules/vben.ts

@@ -58,6 +58,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:naiveui',
           link: VBEN_NAIVE_PREVIEW_URL,
           title: $t('page.vben.naive-ui'),
         },
@@ -68,6 +69,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:element',
           link: VBEN_ELE_PREVIEW_URL,
           title: $t('page.vben.element-plus'),
         },

apps/web-antd/src/store/auth.ts

@@ -76,7 +76,11 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function logout(redirect: boolean = true) {
-    await logoutApi();
+    try {
+      await logoutApi();
+    } catch {
+      // 不做任何处理
+    }
     resetAllStores();
     accessStore.setLoginExpired(false);
 

apps/web-antd/src/views/_core/authentication/code-login.vue

@@ -1,15 +1,49 @@
 <script lang="ts" setup>
-import type { LoginCodeParams } from '@vben/common-ui';
+import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
-import { AuthenticationCodeLogin } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationCodeLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.mobile'),
+      },
+      fieldName: 'phoneNumber',
+      label: $t('authentication.mobile'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.mobileTip') })
+        .refine((v) => /^\d{11}$/.test(v), {
+          message: $t('authentication.mobileErrortip'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        placeholder: $t('authentication.code'),
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+    },
+  ];
+});
 /**
  * 异步处理登录操作
  * Asynchronously handle the login process
@@ -23,8 +57,8 @@ async function handleLogin(values: LoginCodeParams) {
 
 <template>
   <AuthenticationCodeLogin
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleLogin"
   />
 </template>

apps/web-antd/src/views/_core/authentication/forget-password.vue

@@ -1,13 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { VbenFormSchema } from '@vben/common-ui';
 
-import { AuthenticationForgetPassword } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { computed, ref } from 'vue';
+
+import { AuthenticationForgetPassword, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'ForgetPassword' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: 'example@example.com',
+      },
+      fieldName: 'email',
+      label: $t('authentication.email'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.emailTip') })
+        .email($t('authentication.emailValidErrorTip')),
+    },
+  ];
+});
+
 function handleSubmit(value: string) {
   // eslint-disable-next-line no-console
   console.log('reset email:', value);
@@ -16,8 +35,8 @@ function handleSubmit(value: string) {
 
 <template>
   <AuthenticationForgetPassword
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>

apps/web-antd/src/views/_core/authentication/login.vue

@@ -1,18 +1,98 @@
 <script lang="ts" setup>
-import { AuthenticationLogin } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { BasicOption } from '@vben/types';
+
+import { computed, markRaw } from 'vue';
+
+import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'Login' });
 
 const authStore = useAuthStore();
+
+const MOCK_USER_OPTIONS: BasicOption[] = [
+  {
+    label: 'Super',
+    value: 'vben',
+  },
+  {
+    label: 'Admin',
+    value: 'admin',
+  },
+  {
+    label: 'User',
+    value: 'jack',
+  },
+];
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: MOCK_USER_OPTIONS,
+        placeholder: $t('authentication.selectAccount'),
+      },
+      fieldName: 'selectAccount',
+      label: $t('authentication.selectAccount'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.selectAccount') })
+        .optional()
+        .default('vben'),
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      dependencies: {
+        trigger(values, form) {
+          if (values.selectAccount) {
+            const findUser = MOCK_USER_OPTIONS.find(
+              (item) => item.value === values.selectAccount,
+            );
+            if (findUser) {
+              form.setValues({
+                password: '123456',
+                username: findUser.value,
+              });
+            }
+          }
+        },
+        triggerFields: ['selectAccount'],
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: markRaw(SliderCaptcha),
+      fieldName: 'captcha',
+      rules: z.boolean().refine((value) => value, {
+        message: $t('authentication.verifyRequiredTip'),
+      }),
+    },
+  ];
+});
 </script>
 
 <template>
   <AuthenticationLogin
+    :form-schema="formSchema"
     :loading="authStore.loginLoading"
-    password-placeholder="123456"
-    username-placeholder="vben"
     @submit="authStore.authLogin"
   />
 </template>

apps/web-antd/src/views/_core/authentication/register.vue

@@ -1,15 +1,91 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, h, ref } from 'vue';
 
-import { AuthenticationRegister } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationRegister, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'Register' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string()
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenCheckbox',
+      fieldName: 'agreePolicy',
+      renderComponentContent: () => ({
+        default: () =>
+          h('span', [
+            $t('authentication.agree'),
+            h(
+              'a',
+              {
+                class:
+                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                href: '',
+              },
+              [
+                $t('authentication.privacyPolicy'),
+                '&',
+                $t('authentication.terms'),
+              ],
+            ),
+          ]),
+      }),
+      rules: z.boolean().refine((value) => !!value, {
+        message: $t('authentication.agreeTip'),
+      }),
+    },
+  ];
+});
+
 function handleSubmit(value: LoginAndRegisterParams) {
   // eslint-disable-next-line no-console
   console.log('register submit:', value);
@@ -18,8 +94,8 @@ function handleSubmit(value: LoginAndRegisterParams) {
 
 <template>
   <AuthenticationRegister
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>

apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
@@ -51,12 +55,27 @@ onMounted(() => {
       },
       trigger: 'axis',
     },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
     xAxis: {
       axisTick: {
         show: false,
       },
       boundaryGap: false,
       data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
       type: 'category',
     },
     yAxis: [
@@ -65,7 +84,10 @@ onMounted(() => {
           show: false,
         },
         max: 80_000,
-
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
         type: 'value',
       },
     ],

apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

apps/web-antd/src/views/dashboard/workspace/index.vue

@@ -214,7 +214,11 @@ const trendItems: WorkbenchTrendItem[] = [
         <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
       </div>
       <div class="w-full lg:w-2/5">
-        <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+        />
         <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
         <AnalysisChartCard class="mt-5" title="访问来源">
           <AnalyticsVisitsSource />

apps/web-antd/src/views/demos/antd/index.vue

@@ -37,7 +37,7 @@ function notify(type: NotificationType) {
     description="支持多语言，主题功能集成切换等"
     title="Ant Design Vue组件使用演示"
   >
-    <Card title="按钮">
+    <Card class="mb-5" title="按钮">
       <Space>
         <Button>Default</Button>
         <Button type="primary"> Primary </Button>

apps/web-ele/.env.production

@@ -14,3 +14,6 @@ VITE_ROUTER_HISTORY=hash
 
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true

apps/web-ele/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.1.1",
+  "version": "5.3.2",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -27,27 +27,27 @@
   },
   "dependencies": {
     "@vben/access": "workspace:*",
-    "@vben/chart-ui": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
     "@vben/preferences": "workspace:*",
     "@vben/request": "workspace:*",
     "@vben/stores": "workspace:*",
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/core": "^11.0.0",
-    "dayjs": "^1.11.12",
-    "element-plus": "^2.8.0",
-    "pinia": "2.2.2",
-    "vue": "^3.4.38",
-    "vue-router": "^4.4.3"
+    "@vueuse/core": "catalog:",
+    "dayjs": "catalog:",
+    "element-plus": "catalog:",
+    "pinia": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
   },
   "devDependencies": {
-    "unplugin-element-plus": "^0.8.0"
+    "unplugin-element-plus": "catalog:"
   }
 }

apps/web-ele/src/adapter/form.ts

@@ -0,0 +1,106 @@
+import type {
+  BaseFormComponentType,
+  VbenFormSchema as FormSchema,
+  VbenFormProps,
+} from '@vben/common-ui';
+
+import type { Component, SetupContext } from 'vue';
+import { h } from 'vue';
+
+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;
+
+const withDefaultPlaceholder = <T extends Component>(
+  component: T,
+  type: 'input' | 'select',
+) => {
+  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
+    const placeholder = props?.placeholder || $t(`placeholder.${type}`);
+    return h(component, { ...props, ...attrs, placeholder }, slots);
+  };
+};
+
+// 初始化表单组件，并注册到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: 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,
+  },
+  config: {
+    modelPropNameMap: {
+      Upload: 'fileList',
+    },
+  },
+  defineRules: {
+    required: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return $t('formRules.required', [ctx.label]);
+      }
+      return true;
+    },
+    selectRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null) {
+        return $t('formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
+  },
+});
+
+const useVbenForm = useForm<FormComponentType>;
+
+export { useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<FormComponentType>;
+export type { VbenFormProps };

apps/web-ele/src/adapter/index.ts

@@ -0,0 +1 @@
+export * from './form';

apps/web-ele/src/api/core/auth.ts

@@ -10,10 +10,6 @@ export namespace AuthApi {
   /** 登录接口返回值 */
   export interface LoginResult {
     accessToken: string;
-    desc: string;
-    realName: string;
-    userId: string;
-    username: string;
   }
 
   export interface RefreshTokenResult {
@@ -42,7 +38,9 @@ export async function refreshTokenApi() {
  * 退出登录
  */
 export async function logoutApi() {
-  return requestClient.post('/auth/logout');
+  return baseRequestClient.post('/auth/logout', {
+    withCredentials: true,
+  });
 }
 
 /**

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 {
@@ -31,7 +33,10 @@ function createRequestClient(baseURL: string) {
     const accessStore = useAccessStore();
     const authStore = useAuthStore();
     accessStore.setAccessToken(null);
-    if (preferences.app.loginExpiredMode === 'modal') {
+    if (
+      preferences.app.loginExpiredMode === 'modal' &&
+      accessStore.isAccessChecked
+    ) {
       accessStore.setLoginExpired(true);
     } else {
       await authStore.logout();
@@ -65,7 +70,7 @@ function createRequestClient(baseURL: string) {
   });
 
   // response数据解构
-  client.addResponseInterceptor({
+  client.addResponseInterceptor<HttpResponse>({
     fulfilled: (response) => {
       const { data: responseData, status } = response;
 
@@ -90,7 +95,10 @@ function createRequestClient(baseURL: string) {
 
   // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
   client.addResponseInterceptor(
-    errorMessageResponseInterceptor((msg: string) => ElMessage.error(msg)),
+    errorMessageResponseInterceptor((msg: string, _error) => {
+      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+      ElMessage.error(msg);
+    }),
   );
 
   return client;

apps/web-ele/src/bootstrap.ts

@@ -3,6 +3,7 @@ import { createApp } from 'vue';
 import { registerAccessDirective } from '@vben/access';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
+import '@vben/styles/ele';
 
 import { setupI18n } from '#/locales';
 

apps/web-ele/src/layouts/auth.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>

apps/web-ele/src/layouts/basic.vue

@@ -13,11 +13,12 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';
 
 const notifications = ref<NotificationItem[]>([
   {
@@ -87,8 +88,6 @@ const menus = computed(() => [
   },
 ]);
 
-const { loginLoading } = storeToRefs(authStore);
-
 const avatar = computed(() => {
   return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
@@ -130,11 +129,9 @@ function handleMakeAll() {
       <AuthenticationLoginExpiredModal
         v-model:open="accessStore.loginExpired"
         :avatar
-        :loading="loginLoading"
-        password-placeholder="123456"
-        username-placeholder="vben"
-        @submit="authStore.authLogin"
-      />
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
     </template>
     <template #lock-screen>
       <LockScreen :avatar @to-login="handleLogout" />

apps/web-ele/src/layouts/index.ts

@@ -1,8 +1,6 @@
 const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');
 
 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
 
-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
-
 export { AuthPageLayout, BasicLayout, IFrameView };

apps/web-ele/src/locales/index.ts

@@ -91,4 +91,4 @@ async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
   });
 }
 
-export { $t, elementLocale, loadMessages, setupI18n };
+export { $t, elementLocale, setupI18n };

apps/web-ele/src/router/guard.ts

@@ -92,10 +92,8 @@ function setupAccessGuard(router: Router) {
       return to;
     }
 
-    const accessRoutes = accessStore.accessRoutes;
-
     // 是否已经生成过动态路由
-    if (accessRoutes && accessRoutes.length > 0) {
+    if (accessStore.isAccessChecked) {
       return true;
     }
 
@@ -115,6 +113,7 @@ function setupAccessGuard(router: Router) {
     // 保存菜单信息和路由信息
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
+    accessStore.setIsAccessChecked(true);
     const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
     return {

apps/web-ele/src/router/index.ts

@@ -19,7 +19,12 @@ const router = createRouter({
       : createWebHistory(import.meta.env.VITE_BASE),
   // 应该添加到路由的初始路由列表。
   routes,
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
   // 是否应该禁止尾部斜杠。
   // strict: true,
 });

apps/web-ele/src/router/routes/modules/dashboard.ts

@@ -29,6 +29,7 @@ const routes: RouteRecordRaw[] = [
         path: '/workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
+          icon: 'carbon:workspace',
           title: $t('page.dashboard.workspace'),
         },
       },

apps/web-ele/src/router/routes/modules/vben.ts

@@ -7,6 +7,7 @@ import {
   VBEN_LOGO_URL,
   VBEN_NAIVE_PREVIEW_URL,
 } from '@vben/constants';
+import { SvgAntdvLogoIcon } from '@vben/icons';
 
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
@@ -58,6 +59,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:naiveui',
           link: VBEN_NAIVE_PREVIEW_URL,
           title: $t('page.vben.naive-ui'),
         },
@@ -68,6 +70,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: SvgAntdvLogoIcon,
           link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },

apps/web-ele/src/store/auth.ts

@@ -77,7 +77,11 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function logout(redirect: boolean = true) {
-    await logoutApi();
+    try {
+      await logoutApi();
+    } catch {
+      // 不做任何处理
+    }
     resetAllStores();
     accessStore.setLoginExpired(false);
 

apps/web-ele/src/views/_core/authentication/code-login.vue

@@ -1,15 +1,49 @@
 <script lang="ts" setup>
-import type { LoginCodeParams } from '@vben/common-ui';
+import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
-import { AuthenticationCodeLogin } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationCodeLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.mobile'),
+      },
+      fieldName: 'phoneNumber',
+      label: $t('authentication.mobile'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.mobileTip') })
+        .refine((v) => /^\d{11}$/.test(v), {
+          message: $t('authentication.mobileErrortip'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        placeholder: $t('authentication.code'),
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+    },
+  ];
+});
 /**
  * 异步处理登录操作
  * Asynchronously handle the login process
@@ -23,8 +57,8 @@ async function handleLogin(values: LoginCodeParams) {
 
 <template>
   <AuthenticationCodeLogin
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleLogin"
   />
 </template>

apps/web-ele/src/views/_core/authentication/forget-password.vue

@@ -1,13 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { VbenFormSchema } from '@vben/common-ui';
 
-import { AuthenticationForgetPassword } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { computed, ref } from 'vue';
+
+import { AuthenticationForgetPassword, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'ForgetPassword' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: 'example@example.com',
+      },
+      fieldName: 'email',
+      label: $t('authentication.email'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.emailTip') })
+        .email($t('authentication.emailValidErrorTip')),
+    },
+  ];
+});
+
 function handleSubmit(value: string) {
   // eslint-disable-next-line no-console
   console.log('reset email:', value);
@@ -16,8 +35,8 @@ function handleSubmit(value: string) {
 
 <template>
   <AuthenticationForgetPassword
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>

apps/web-ele/src/views/_core/authentication/login.vue

@@ -1,18 +1,98 @@
 <script lang="ts" setup>
-import { AuthenticationLogin } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { BasicOption } from '@vben/types';
+
+import { computed, markRaw } from 'vue';
+
+import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'Login' });
 
 const authStore = useAuthStore();
+
+const MOCK_USER_OPTIONS: BasicOption[] = [
+  {
+    label: 'Super',
+    value: 'vben',
+  },
+  {
+    label: 'Admin',
+    value: 'admin',
+  },
+  {
+    label: 'User',
+    value: 'jack',
+  },
+];
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: MOCK_USER_OPTIONS,
+        placeholder: $t('authentication.selectAccount'),
+      },
+      fieldName: 'selectAccount',
+      label: $t('authentication.selectAccount'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.selectAccount') })
+        .optional()
+        .default('vben'),
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      dependencies: {
+        trigger(values, form) {
+          if (values.selectAccount) {
+            const findUser = MOCK_USER_OPTIONS.find(
+              (item) => item.value === values.selectAccount,
+            );
+            if (findUser) {
+              form.setValues({
+                password: '123456',
+                username: findUser.value,
+              });
+            }
+          }
+        },
+        triggerFields: ['selectAccount'],
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: markRaw(SliderCaptcha),
+      fieldName: 'captcha',
+      rules: z.boolean().refine((value) => value, {
+        message: $t('authentication.verifyRequiredTip'),
+      }),
+    },
+  ];
+});
 </script>
 
 <template>
   <AuthenticationLogin
+    :form-schema="formSchema"
     :loading="authStore.loginLoading"
-    password-placeholder="123456"
-    username-placeholder="vben"
     @submit="authStore.authLogin"
   />
 </template>

apps/web-ele/src/views/_core/authentication/register.vue

@@ -1,15 +1,91 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, h, ref } from 'vue';
 
-import { AuthenticationRegister } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationRegister, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'Register' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string()
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenCheckbox',
+      fieldName: 'agreePolicy',
+      renderComponentContent: () => ({
+        default: () =>
+          h('span', [
+            $t('authentication.agree'),
+            h(
+              'a',
+              {
+                class:
+                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                href: '',
+              },
+              [
+                $t('authentication.privacyPolicy'),
+                '&',
+                $t('authentication.terms'),
+              ],
+            ),
+          ]),
+      }),
+      rules: z.boolean().refine((value) => !!value, {
+        message: $t('authentication.agreeTip'),
+      }),
+    },
+  ];
+});
+
 function handleSubmit(value: LoginAndRegisterParams) {
   // eslint-disable-next-line no-console
   console.log('register submit:', value);
@@ -18,8 +94,8 @@ function handleSubmit(value: LoginAndRegisterParams) {
 
 <template>
   <AuthenticationRegister
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>

apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
@@ -51,12 +55,27 @@ onMounted(() => {
       },
       trigger: 'axis',
     },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
     xAxis: {
       axisTick: {
         show: false,
       },
       boundaryGap: false,
       data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
       type: 'category',
     },
     yAxis: [
@@ -65,7 +84,10 @@ onMounted(() => {
           show: false,
         },
         max: 80_000,
-
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
         type: 'value',
       },
     ],

apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

apps/web-ele/src/views/dashboard/workspace/index.vue

@@ -214,7 +214,11 @@ const trendItems: WorkbenchTrendItem[] = [
         <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
       </div>
       <div class="w-full lg:w-2/5">
-        <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+        />
         <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
         <AnalysisChartCard class="mt-5" title="访问来源">
           <AnalyticsVisitsSource />

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>
@@ -74,5 +83,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>

apps/web-naive/.env.production

@@ -14,3 +14,6 @@ VITE_ROUTER_HISTORY=hash
 
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true

apps/web-naive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.1.1",
+  "version": "5.3.2",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -27,23 +27,23 @@
   },
   "dependencies": {
     "@vben/access": "workspace:*",
-    "@vben/chart-ui": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
     "@vben/preferences": "workspace:*",
     "@vben/request": "workspace:*",
     "@vben/stores": "workspace:*",
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/core": "^11.0.0",
-    "naive-ui": "^2.39.0",
-    "pinia": "2.2.2",
-    "vue": "^3.4.38",
-    "vue-router": "^4.4.3"
+    "@vueuse/core": "catalog:",
+    "naive-ui": "catalog:",
+    "pinia": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
   }
 }

apps/web-naive/src/adapter/form.ts

@@ -0,0 +1,116 @@
+import type {
+  BaseFormComponentType,
+  VbenFormSchema as FormSchema,
+  VbenFormProps,
+} from '@vben/common-ui';
+
+import type { Component, SetupContext } from 'vue';
+import { h } from 'vue';
+
+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;
+
+const withDefaultPlaceholder = <T extends Component>(
+  component: T,
+  type: 'input' | 'select',
+) => {
+  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
+    const placeholder = props?.placeholder || $t(`placeholder.${type}`);
+    return h(component, { ...props, ...attrs, placeholder }, slots);
+  };
+};
+
+// 初始化表单组件，并注册到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: 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,
+  },
+  config: {
+    disabledOnChangeListener: true,
+    baseModelPropName: 'value',
+    modelPropNameMap: {
+      Checkbox: 'checked',
+      Radio: 'checked',
+      Upload: 'fileList',
+    },
+  },
+  defineRules: {
+    required: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return $t('formRules.required', [ctx.label]);
+      }
+      return true;
+    },
+    selectRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null) {
+        return $t('formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
+  },
+});
+
+const useVbenForm = useForm<FormComponentType>;
+
+export { useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<FormComponentType>;
+export type { VbenFormProps };

apps/web-naive/src/adapter/index.ts

@@ -0,0 +1,2 @@
+export * from './form';
+export * from './naive';

apps/web-naive/src/api/core/auth.ts

@@ -10,10 +10,6 @@ export namespace AuthApi {
   /** 登录接口返回值 */
   export interface LoginResult {
     accessToken: string;
-    desc: string;
-    realName: string;
-    userId: string;
-    username: string;
   }
 
   export interface RefreshTokenResult {
@@ -42,7 +38,9 @@ export async function refreshTokenApi() {
  * 退出登录
  */
 export async function logoutApi() {
-  return requestClient.post('/auth/logout');
+  return baseRequestClient.post('/auth/logout', {
+    withCredentials: true,
+  });
 }
 
 /**

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 '#/naive';
+import { message } from '#/adapter';
 import { useAuthStore } from '#/store';
 
 import { refreshTokenApi } from './core';
@@ -30,7 +32,10 @@ function createRequestClient(baseURL: string) {
     const accessStore = useAccessStore();
     const authStore = useAuthStore();
     accessStore.setAccessToken(null);
-    if (preferences.app.loginExpiredMode === 'modal') {
+    if (
+      preferences.app.loginExpiredMode === 'modal' &&
+      accessStore.isAccessChecked
+    ) {
       accessStore.setLoginExpired(true);
     } else {
       await authStore.logout();
@@ -64,7 +69,7 @@ function createRequestClient(baseURL: string) {
   });
 
   // response数据解构
-  client.addResponseInterceptor({
+  client.addResponseInterceptor<HttpResponse>({
     fulfilled: (response) => {
       const { data: responseData, status } = response;
 
@@ -89,7 +94,10 @@ function createRequestClient(baseURL: string) {
 
   // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
   client.addResponseInterceptor(
-    errorMessageResponseInterceptor((msg: string) => message.error(msg)),
+    errorMessageResponseInterceptor((msg: string, _error) => {
+      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+      message.error(msg);
+    }),
   );
 
   return client;

apps/web-naive/src/layouts/auth.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>

apps/web-naive/src/layouts/basic.vue

@@ -13,11 +13,12 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';
 
 const notifications = ref<NotificationItem[]>([
   {
@@ -87,8 +88,6 @@ const menus = computed(() => [
   },
 ]);
 
-const { loginLoading } = storeToRefs(authStore);
-
 const avatar = computed(() => {
   return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
@@ -130,11 +129,9 @@ function handleMakeAll() {
       <AuthenticationLoginExpiredModal
         v-model:open="accessStore.loginExpired"
         :avatar
-        :loading="loginLoading"
-        password-placeholder="123456"
-        username-placeholder="vben"
-        @submit="authStore.authLogin"
-      />
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
     </template>
     <template #lock-screen>
       <LockScreen :avatar @to-login="handleLogout" />

apps/web-naive/src/layouts/index.ts

@@ -1,8 +1,6 @@
 const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');
 
 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
 
-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
-
 export { AuthPageLayout, BasicLayout, IFrameView };

apps/web-naive/src/locales/index.ts

@@ -28,4 +28,4 @@ async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
   });
 }
 
-export { $t, loadMessages, setupI18n };
+export { $t, setupI18n };

apps/web-naive/src/router/access.ts

@@ -6,10 +6,10 @@ import type {
 import { generateAccessible } from '@vben/access';
 import { preferences } from '@vben/preferences';
 
+import { message } from '#/adapter';
 import { getAllMenusApi } from '#/api';
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
-import { message } from '#/naive';
 
 const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
 

apps/web-naive/src/router/guard.ts

@@ -92,13 +92,10 @@ function setupAccessGuard(router: Router) {
       return to;
     }
 
-    const accessRoutes = accessStore.accessRoutes;
-
     // 是否已经生成过动态路由
-    if (accessRoutes && accessRoutes.length > 0) {
+    if (accessStore.isAccessChecked) {
       return true;
     }
-
     // 生成路由表
     // 当前登录用户拥有的角色标识列表
     const userInfo = userStore.userInfo || (await authStore.fetchUserInfo());
@@ -115,6 +112,7 @@ function setupAccessGuard(router: Router) {
     // 保存菜单信息和路由信息
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
+    accessStore.setIsAccessChecked(true);
     const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
     return {

apps/web-naive/src/router/index.ts

@@ -19,7 +19,12 @@ const router = createRouter({
       : createWebHistory(import.meta.env.VITE_BASE),
   // 应该添加到路由的初始路由列表。
   routes,
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
   // 是否应该禁止尾部斜杠。
   // strict: true,
 });

apps/web-naive/src/router/routes/modules/dashboard.ts

@@ -29,6 +29,7 @@ const routes: RouteRecordRaw[] = [
         path: '/workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
+          icon: 'carbon:workspace',
           title: $t('page.dashboard.workspace'),
         },
       },

apps/web-naive/src/router/routes/modules/demos.ts

@@ -25,7 +25,6 @@ const routes: RouteRecordRaw[] = [
       },
       {
         meta: {
-          icon: 'mdi:shield-key-outline',
           title: $t('page.demos.table'),
         },
         name: 'Table',

apps/web-naive/src/router/routes/modules/vben.ts

@@ -7,6 +7,7 @@ import {
   VBEN_GITHUB_URL,
   VBEN_LOGO_URL,
 } from '@vben/constants';
+import { SvgAntdvLogoIcon } from '@vben/icons';
 
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
@@ -58,6 +59,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: SvgAntdvLogoIcon,
           link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },
@@ -68,6 +70,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:element',
           link: VBEN_ELE_PREVIEW_URL,
           title: $t('page.vben.element-plus'),
         },