chore: release v5.2.1

Co-authored-by: afe1 <yunfei.zhu@nwowtec.com>

.github/release-drafter.yml

@@ -13,13 +13,13 @@ categories:
   - title: "🚀 Features"
     labels:
       - "feature"
-      - "enhancement"
   - title: "🐞 Bug Fixes"
     labels:
       - "bug"
   - title: "📈 Performance"
     labels:
       - "perf"
+      - "enhancement"
   - title: 📝 Documentation
     labels:
       - "documentation"
@@ -42,9 +42,9 @@ version-resolver:
   minor:
     labels:
       - "minor"
-      - "feature"
   patch:
     labels:
+      - "feature"
       - "patch"
       - "bug"
       - "maintenance"

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
       matrix:
         os:
           - ubuntu-latest
-          - macos-latest
+          # - macos-latest
           - windows-latest
     timeout-minutes: 20
     steps:
@@ -62,7 +62,7 @@ jobs:
       matrix:
         os:
           - ubuntu-latest
-          - macos-latest
+          # - macos-latest
           - windows-latest
 
     steps:
@@ -85,7 +85,7 @@ jobs:
       matrix:
         os:
           - ubuntu-latest
-          - macos-latest
+          # - macos-latest
           - windows-latest
     steps:
       - name: Checkout code

.github/workflows/deploy.yml

@@ -6,7 +6,7 @@ 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]')
     runs-on: ubuntu-latest
@@ -27,7 +27,7 @@ jobs:
         uses: ./.github/actions/setup-node
 
       - name: Build
-        run: pnpm run build
+        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]')
+    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,7 +61,7 @@ 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]')
     runs-on: ubuntu-latest
@@ -66,7 +82,7 @@ jobs:
         uses: ./.github/actions/setup-node
 
       - name: Build
-        run: pnpm run build
+        run: pnpm run build:antd
 
       - name: Sync files
         uses: SamKirkland/FTP-Deploy-Action@v4.3.5
@@ -76,7 +92,7 @@ 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]')
     runs-on: ubuntu-latest
@@ -97,7 +113,7 @@ jobs:
         uses: ./.github/actions/setup-node
 
       - name: Build
-        run: pnpm run build
+        run: pnpm run build:ele
 
       - name: Sync files
         uses: SamKirkland/FTP-Deploy-Action@v4.3.5
@@ -107,7 +123,7 @@ 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]')
     runs-on: ubuntu-latest
@@ -128,7 +144,7 @@ jobs:
         uses: ./.github/actions/setup-node
 
       - name: Build
-        run: pnpm run build
+        run: pnpm run build:naive
 
       - name: Sync files
         uses: SamKirkland/FTP-Deploy-Action@v4.3.5

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

@@ -21,5 +21,5 @@ jobs:
         with:
           actions: "close-issues" # 执行动作：关闭 Issues
           token: ${{ secrets.GITHUB_TOKEN }} # GitHub Token，用于认证
-          labels: "need reproduction" # 目标标签
+          labels: "needs reproduction" # 目标标签
           inactive-day: 3 # 未活动天数阈值

.gitignore

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

.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

.npmrc

@@ -1,4 +1,4 @@
-# registry = "https://registry.npmmirror.com"
+registry = "https://registry.npmmirror.com"
 public-hoist-pattern[]=husky
 public-hoist-pattern[]=eslint
 public-hoist-pattern[]=prettier

.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",
@@ -185,13 +213,12 @@
     "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

@@ -5,6 +5,8 @@
 <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)
 
 ## 紹介
@@ -78,7 +80,7 @@ pnpm build
 
 ## 変更ログ
 
-[CHANGELOG](./CHANGELOG.zh_CN.md)
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
 
 ## 貢献方法
 

README.md

@@ -5,6 +5,8 @@
 <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
@@ -77,7 +79,7 @@ pnpm build
 
 ## Change Log
 
-[CHANGELOG](./CHANGELOG.zh_CN.md)
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
 
 ## How to contribute
 

README.zh-CN.md

@@ -5,6 +5,8 @@
 <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)
 
 ## 简介
@@ -126,6 +128,10 @@ 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">

apps/backend-mock/.env

@@ -1 +1,3 @@
 PORT=5320
+ACCESS_TOKEN_SECRET=access_token_secret
+REFRESH_TOKEN_SECRET=refresh_token_secret

apps/backend-mock/README.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-Vben Admin 数据 mock 服务，没有对接任何的数据库，所有数据都是模拟的，用于前端开发时提供数据支持。线上环境不再提供mock集成，可自行部署服务或者对接真实数据，mock.js 等工具有一些限制，比如上传文件不行、无法模拟复杂的逻辑等，所以这里使用了真实的后端服务来实现。唯一麻烦的是本地需要同时启动后端服务和前端服务，但是这样可以更好的模拟真实环境。
+Vben Admin 数据 mock 服务，没有对接任何的数据库，所有数据都是模拟的，用于前端开发时提供数据支持。线上环境不再提供 mock 集成，可自行部署服务或者对接真实数据，由于 `mock.js` 等工具有一些限制，比如上传文件不行、无法模拟复杂的逻辑等，所以这里使用了真实的后端服务来实现。唯一麻烦的是本地需要同时启动后端服务和前端服务，但是这样可以更好的模拟真实环境。该服务不需要手动启动，已经集成在 vite 插件内，随应用一起启用。
 
 ## Running the app
 

apps/backend-mock/api/auth/codes.ts

@@ -1,15 +1,14 @@
-export default eventHandler((event) => {
-  const token = getHeader(event, 'Authorization');
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse } from '~/utils/response';
 
-  if (!token) {
-    setResponseStatus(event, 401);
-    return useResponseError('UnauthorizedException', 'Unauthorized Exception');
+export default eventHandler((event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
   }
 
-  const username = Buffer.from(token, 'base64').toString('utf8');
-
   const codes =
-    MOCK_CODES.find((item) => item.username === username)?.codes ?? [];
+    MOCK_CODES.find((item) => item.username === userinfo.username)?.codes ?? [];
 
   return useResponseSuccess(codes);
 });

apps/backend-mock/api/auth/login.post.ts

@@ -1,20 +1,36 @@
+import {
+  clearRefreshTokenCookie,
+  setRefreshTokenCookie,
+} from '~/utils/cookie-utils';
+import { generateAccessToken, generateRefreshToken } from '~/utils/jwt-utils';
+import { forbiddenResponse } from '~/utils/response';
+
 export default defineEventHandler(async (event) => {
   const { password, username } = await readBody(event);
+  if (!password || !username) {
+    setResponseStatus(event, 400);
+    return useResponseError(
+      'BadRequestException',
+      'Username and password are required',
+    );
+  }
 
   const findUser = MOCK_USERS.find(
     (item) => item.username === username && item.password === password,
   );
 
   if (!findUser) {
-    setResponseStatus(event, 403);
-    return useResponseError('UnauthorizedException', '用户名或密码错误');
+    clearRefreshTokenCookie(event);
+    return forbiddenResponse(event);
   }
 
-  const accessToken = Buffer.from(username).toString('base64');
+  const accessToken = generateAccessToken(findUser);
+  const refreshToken = generateRefreshToken(findUser);
+
+  setRefreshTokenCookie(event, refreshToken);
 
   return useResponseSuccess({
+    ...findUser,
     accessToken,
-    // TODO: refresh token
-    refreshToken: accessToken,
   });
 });

apps/backend-mock/api/auth/logout.post.ts

@@ -0,0 +1,15 @@
+import {
+  clearRefreshTokenCookie,
+  getRefreshTokenFromCookie,
+} from '~/utils/cookie-utils';
+
+export default defineEventHandler(async (event) => {
+  const refreshToken = getRefreshTokenFromCookie(event);
+  if (!refreshToken) {
+    return useResponseSuccess('');
+  }
+
+  clearRefreshTokenCookie(event);
+
+  return useResponseSuccess('');
+});

apps/backend-mock/api/auth/refresh.post.ts

@@ -0,0 +1,33 @@
+import {
+  clearRefreshTokenCookie,
+  getRefreshTokenFromCookie,
+  setRefreshTokenCookie,
+} from '~/utils/cookie-utils';
+import { verifyRefreshToken } from '~/utils/jwt-utils';
+import { forbiddenResponse } from '~/utils/response';
+
+export default defineEventHandler(async (event) => {
+  const refreshToken = getRefreshTokenFromCookie(event);
+  if (!refreshToken) {
+    return forbiddenResponse(event);
+  }
+
+  clearRefreshTokenCookie(event);
+
+  const userinfo = verifyRefreshToken(refreshToken);
+  if (!userinfo) {
+    return forbiddenResponse(event);
+  }
+
+  const findUser = MOCK_USERS.find(
+    (item) => item.username === userinfo.username,
+  );
+  if (!findUser) {
+    return forbiddenResponse(event);
+  }
+  const accessToken = generateAccessToken(findUser);
+
+  setRefreshTokenCookie(event, refreshToken);
+
+  return accessToken;
+});

apps/backend-mock/api/menu/all.ts

@@ -1,14 +1,13 @@
-export default eventHandler((event) => {
-  const token = getHeader(event, 'Authorization');
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse } from '~/utils/response';
 
-  if (!token) {
-    setResponseStatus(event, 401);
-    return useResponseError('UnauthorizedException', 'Unauthorized Exception');
+export default eventHandler((event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
   }
 
-  const username = Buffer.from(token, 'base64').toString('utf8');
-
   const menus =
-    MOCK_MENUS.find((item) => item.username === username)?.menus ?? [];
+    MOCK_MENUS.find((item) => item.username === userinfo.username)?.menus ?? [];
   return useResponseSuccess(menus);
 });

apps/backend-mock/api/user/info.ts

@@ -1,14 +1,11 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse } from '~/utils/response';
+
 export default eventHandler((event) => {
-  const token = getHeader(event, 'Authorization');
-  if (!token) {
-    setResponseStatus(event, 401);
-    return useResponseError('UnauthorizedException', 'Unauthorized Exception');
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
   }
 
-  const username = Buffer.from(token, 'base64').toString('utf8');
-
-  const user = MOCK_USERS.find((item) => item.username === username);
-
-  const { password: _pwd, ...userInfo } = user;
-  return useResponseSuccess(userInfo);
+  return useResponseSuccess(userinfo);
 });

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/middleware/1.api.ts

@@ -1,11 +1,4 @@
 export default defineEventHandler((event) => {
-  // setResponseHeaders(event, {
-  //   'Access-Control-Allow-Credentials': 'true',
-  //   'Access-Control-Allow-Headers': '*',
-  //   'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
-  //   'Access-Control-Allow-Origin': '*',
-  //   'Access-Control-Expose-Headers': '*',
-  // });
   if (event.method === 'OPTIONS') {
     event.node.res.statusCode = 204;
     event.node.res.statusMessage = 'No Content.';

apps/backend-mock/package.json

@@ -6,10 +6,15 @@
   "license": "MIT",
   "author": "",
   "scripts": {
-    "start": "nitro dev",
-    "build": "nitro build"
+    "build": "nitro build",
+    "start": "nitro dev"
   },
   "dependencies": {
+    "jsonwebtoken": "^9.0.2",
     "nitropack": "^2.9.7"
+  },
+  "devDependencies": {
+    "@types/jsonwebtoken": "^9.0.6",
+    "h3": "^1.12.0"
   }
 }

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

@@ -0,0 +1,26 @@
+import type { EventHandlerRequest, H3Event } from 'h3';
+
+export function clearRefreshTokenCookie(event: H3Event<EventHandlerRequest>) {
+  deleteCookie(event, 'jwt', {
+    httpOnly: true,
+    sameSite: 'none',
+    secure: true,
+  });
+}
+
+export function setRefreshTokenCookie(
+  event: H3Event<EventHandlerRequest>,
+  refreshToken: string,
+) {
+  setCookie(event, 'jwt', refreshToken, {
+    httpOnly: true,
+    maxAge: 24 * 60 * 60 * 1000,
+    sameSite: 'none',
+    secure: true,
+  });
+}
+
+export function getRefreshTokenFromCookie(event: H3Event<EventHandlerRequest>) {
+  const refreshToken = getCookie(event, 'jwt');
+  return refreshToken;
+}

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

@@ -0,0 +1,59 @@
+import type { EventHandlerRequest, H3Event } from 'h3';
+
+import jwt from 'jsonwebtoken';
+
+import { UserInfo } from './mock-data';
+
+// TODO: Replace with your own secret key
+const ACCESS_TOKEN_SECRET = 'access_token_secret';
+const REFRESH_TOKEN_SECRET = 'refresh_token_secret';
+
+export interface UserPayload extends UserInfo {
+  iat: number;
+  exp: number;
+}
+
+export function generateAccessToken(user: UserInfo) {
+  return jwt.sign(user, ACCESS_TOKEN_SECRET, { expiresIn: '7d' });
+}
+
+export function generateRefreshToken(user: UserInfo) {
+  return jwt.sign(user, REFRESH_TOKEN_SECRET, {
+    expiresIn: '30d',
+  });
+}
+
+export function verifyAccessToken(
+  event: H3Event<EventHandlerRequest>,
+): null | Omit<UserInfo, 'password'> {
+  const authHeader = getHeader(event, 'Authorization');
+  if (!authHeader?.startsWith('Bearer')) {
+    return null;
+  }
+
+  const token = authHeader.split(' ')[1];
+  try {
+    const decoded = jwt.verify(token, ACCESS_TOKEN_SECRET) as UserPayload;
+
+    const username = decoded.username;
+    const user = MOCK_USERS.find((item) => item.username === username);
+    const { password: _pwd, ...userinfo } = user;
+    return userinfo;
+  } catch {
+    return null;
+  }
+}
+
+export function verifyRefreshToken(
+  token: string,
+): null | Omit<UserInfo, 'password'> {
+  try {
+    const decoded = jwt.verify(token, REFRESH_TOKEN_SECRET) as UserPayload;
+    const username = decoded.username;
+    const user = MOCK_USERS.find((item) => item.username === username);
+    const { password: _pwd, ...userinfo } = user;
+    return userinfo;
+  } catch {
+    return null;
+  }
+}

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

@@ -1,4 +1,12 @@
-export const MOCK_USERS = [
+export interface UserInfo {
+  id: number;
+  password: string;
+  realName: string;
+  roles: string[];
+  username: string;
+}
+
+export const MOCK_USERS: UserInfo[] = [
   {
     id: 0,
     password: '123456',

apps/backend-mock/utils/response.ts

@@ -1,3 +1,5 @@
+import type { EventHandlerRequest, H3Event } from 'h3';
+
 export function useResponseSuccess<T = any>(data: T) {
   return {
     code: 0,
@@ -15,3 +17,13 @@ export function useResponseError(message: string, error: any = null) {
     message,
   };
 }
+
+export function forbiddenResponse(event: H3Event<EventHandlerRequest>) {
+  setResponseStatus(event, 403);
+  return useResponseError('ForbiddenException', 'Forbidden Exception');
+}
+
+export function unAuthorizedResponse(event: H3Event<EventHandlerRequest>) {
+  setResponseStatus(event, 401);
+  return useResponseError('UnauthorizedException', 'Unauthorized Exception');
+}

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.0",
+  "version": "5.2.1",
   "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": "^10.11.1",
+    "@vueuse/core": "^11.0.3",
     "ant-design-vue": "^4.2.3",
-    "dayjs": "^1.11.12",
-    "pinia": "2.2.1",
-    "vue": "^3.4.37",
+    "dayjs": "^1.11.13",
+    "pinia": "2.2.2",
+    "vue": "^3.4.38",
     "vue-router": "^4.4.3"
   }
 }

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

@@ -1,4 +1,4 @@
-import { requestClient } from '#/api/request';
+import { baseRequestClient, requestClient } from '#/api/request';
 
 export namespace AuthApi {
   /** 登录接口参数 */
@@ -12,10 +12,14 @@ export namespace AuthApi {
     accessToken: string;
     desc: string;
     realName: string;
-    refreshToken: string;
     userId: string;
     username: string;
   }
+
+  export interface RefreshTokenResult {
+    data: string;
+    status: number;
+  }
 }
 
 /**
@@ -25,6 +29,24 @@ export async function loginApi(data: AuthApi.LoginParams) {
   return requestClient.post<AuthApi.LoginResult>('/auth/login', data);
 }
 
+/**
+ * 刷新accessToken
+ */
+export async function refreshTokenApi() {
+  return baseRequestClient.post<AuthApi.RefreshTokenResult>('/auth/refresh', {
+    withCredentials: true,
+  });
+}
+
+/**
+ * 退出登录
+ */
+export async function logoutApi() {
+  return baseRequestClient.post('/auth/logout', {
+    withCredentials: true,
+  });
+}
+
 /**
  * 获取用户权限码
  */

apps/web-antd/src/api/request.ts

@@ -1,67 +1,104 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { HttpResponse } from '@vben/request';
-
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
-import { RequestClient } from '@vben/request';
+import {
+  authenticateResponseInterceptor,
+  errorMessageResponseInterceptor,
+  RequestClient,
+} from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
 import { message } from 'ant-design-vue';
 
 import { useAuthStore } from '#/store';
 
+import { refreshTokenApi } from './core';
+
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
 function createRequestClient(baseURL: string) {
   const client = new RequestClient({
     baseURL,
-    // 为每个请求携带 Authorization
-    makeAuthorization: () => {
-      return {
-        // 默认
-        key: 'Authorization',
-        tokenHandler: () => {
-          const accessStore = useAccessStore();
-          return {
-            refreshToken: `${accessStore.refreshToken}`,
-            token: `${accessStore.accessToken}`,
-          };
-        },
-        unAuthorizedHandler: async () => {
-          const accessStore = useAccessStore();
-          const authStore = useAuthStore();
-          accessStore.setAccessToken(null);
-
-          if (preferences.app.loginExpiredMode === 'modal') {
-            accessStore.setLoginExpired(true);
-          } else {
-            // 退出登录
-            await authStore.logout();
-          }
-        },
-      };
-    },
-    makeErrorMessage: (msg) => message.error(msg),
-
-    makeRequestHeaders: () => {
-      return {
-        // 为每个请求携带 Accept-Language
-        'Accept-Language': preferences.app.locale,
-      };
-    },
   });
-  client.addResponseInterceptor<HttpResponse>((response) => {
-    const { data: responseData, status } = response;
 
-    const { code, data, message: msg } = responseData;
-    if (status >= 200 && status < 400 && code === 0) {
-      return data;
+  /**
+   * 重新认证逻辑
+   */
+  async function doReAuthenticate() {
+    console.warn('Access token or refresh token is invalid or expired. ');
+    const accessStore = useAccessStore();
+    const authStore = useAuthStore();
+    accessStore.setAccessToken(null);
+    if (
+      preferences.app.loginExpiredMode === 'modal' &&
+      accessStore.isAccessChecked
+    ) {
+      accessStore.setLoginExpired(true);
+    } else {
+      await authStore.logout();
     }
-    throw new Error(`Error ${status}: ${msg}`);
+  }
+
+  /**
+   * 刷新token逻辑
+   */
+  async function doRefreshToken() {
+    const accessStore = useAccessStore();
+    const resp = await refreshTokenApi();
+    const newToken = resp.data;
+    accessStore.setAccessToken(newToken);
+    return newToken;
+  }
+
+  function formatToken(token: null | string) {
+    return token ? `Bearer ${token}` : null;
+  }
+
+  // 请求头处理
+  client.addRequestInterceptor({
+    fulfilled: async (config) => {
+      const accessStore = useAccessStore();
+
+      config.headers.Authorization = formatToken(accessStore.accessToken);
+      config.headers['Accept-Language'] = preferences.app.locale;
+      return config;
+    },
   });
+
+  // response数据解构
+  client.addResponseInterceptor({
+    fulfilled: (response) => {
+      const { data: responseData, status } = response;
+
+      const { code, data, message: msg } = responseData;
+      if (status >= 200 && status < 400 && code === 0) {
+        return data;
+      }
+      throw new Error(`Error ${status}: ${msg}`);
+    },
+  });
+
+  // token过期的处理
+  client.addResponseInterceptor(
+    authenticateResponseInterceptor({
+      client,
+      doReAuthenticate,
+      doRefreshToken,
+      enableRefreshToken: preferences.app.enableRefreshToken,
+      formatToken,
+    }),
+  );
+
+  // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
+  client.addResponseInterceptor(
+    errorMessageResponseInterceptor((msg: string) => message.error(msg)),
+  );
+
   return client;
 }
 
 export const requestClient = createRequestClient(apiURL);
+
+export const baseRequestClient = new RequestClient({ baseURL: apiURL });

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

@@ -2,10 +2,9 @@
 import type { NotificationItem } from '@vben/layouts';
 
 import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
-import { LOGIN_PATH, VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
+import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
 import {
   BasicLayout,
@@ -14,16 +13,10 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import {
-  resetAllStores,
-  storeToRefs,
-  useAccessStore,
-  useUserStore,
-} from '@vben/stores';
+import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
-import { resetRoutes } from '#/router';
 import { useAuthStore } from '#/store';
 
 const notifications = ref<NotificationItem[]>([
@@ -100,12 +93,8 @@ const avatar = computed(() => {
   return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
 
-const router = useRouter();
-
 async function handleLogout() {
-  resetAllStores();
-  resetRoutes();
-  await router.replace(LOGIN_PATH);
+  await authStore.logout(false);
 }
 
 function handleNoticeClear() {

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/routes/modules/vben.ts

@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
       {
         name: 'VbenAbout',
         path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
         meta: {
           icon: 'lucide:copyright',
           title: $t('page.vben.about'),

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

@@ -10,7 +10,7 @@ import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 import { notification } from 'ant-design-vue';
 import { defineStore } from 'pinia';
 
-import { getAccessCodesApi, getUserInfoApi, loginApi } from '#/api';
+import { getAccessCodesApi, getUserInfoApi, loginApi, logoutApi } from '#/api';
 import { $t } from '#/locales';
 
 export const useAuthStore = defineStore('auth', () => {
@@ -33,13 +33,11 @@ export const useAuthStore = defineStore('auth', () => {
     let userInfo: null | UserInfo = null;
     try {
       loginLoading.value = true;
-      const { accessToken, refreshToken } = await loginApi(params);
+      const { accessToken } = await loginApi(params);
 
       // 如果成功获取到 accessToken
       if (accessToken) {
-        // 将 accessToken 存储到 accessStore 中
         accessStore.setAccessToken(accessToken);
-        accessStore.setRefreshToken(refreshToken);
 
         // 获取用户信息并存储到 accessStore 中
         const [fetchUserInfoResult, accessCodes] = await Promise.all([
@@ -77,16 +75,19 @@ export const useAuthStore = defineStore('auth', () => {
     };
   }
 
-  async function logout() {
+  async function logout(redirect: boolean = true) {
+    await logoutApi();
     resetAllStores();
     accessStore.setLoginExpired(false);
 
     // 回登陆页带上当前路由地址
     await router.replace({
       path: LOGIN_PATH,
-      query: {
-        redirect: encodeURIComponent(router.currentRoute.value.fullPath),
-      },
+      query: redirect
+        ? {
+            redirect: encodeURIComponent(router.currentRoute.value.fullPath),
+          }
+        : {},
     });
   }
 

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.0",
+  "version": "5.2.1",
   "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": "^10.11.1",
-    "dayjs": "^1.11.12",
-    "element-plus": "^2.8.0",
-    "pinia": "2.2.1",
-    "vue": "^3.4.37",
+    "@vueuse/core": "^11.0.3",
+    "dayjs": "^1.11.13",
+    "element-plus": "^2.8.1",
+    "pinia": "2.2.2",
+    "vue": "^3.4.38",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {

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

@@ -1,4 +1,4 @@
-import { requestClient } from '#/api/request';
+import { baseRequestClient, requestClient } from '#/api/request';
 
 export namespace AuthApi {
   /** 登录接口参数 */
@@ -12,10 +12,14 @@ export namespace AuthApi {
     accessToken: string;
     desc: string;
     realName: string;
-    refreshToken: string;
     userId: string;
     username: string;
   }
+
+  export interface RefreshTokenResult {
+    data: string;
+    status: number;
+  }
 }
 
 /**
@@ -25,6 +29,24 @@ export async function loginApi(data: AuthApi.LoginParams) {
   return requestClient.post<AuthApi.LoginResult>('/auth/login', data);
 }
 
+/**
+ * 刷新accessToken
+ */
+export async function refreshTokenApi() {
+  return baseRequestClient.post<AuthApi.RefreshTokenResult>('/auth/refresh', {
+    withCredentials: true,
+  });
+}
+
+/**
+ * 退出登录
+ */
+export async function logoutApi() {
+  return baseRequestClient.post('/auth/logout', {
+    withCredentials: true,
+  });
+}
+
 /**
  * 获取用户权限码
  */

apps/web-ele/src/api/request.ts

@@ -1,67 +1,104 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { HttpResponse } from '@vben/request';
-
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
-import { RequestClient } from '@vben/request';
+import {
+  authenticateResponseInterceptor,
+  errorMessageResponseInterceptor,
+  RequestClient,
+} from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
 import { ElMessage } from 'element-plus';
 
 import { useAuthStore } from '#/store';
 
+import { refreshTokenApi } from './core';
+
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
 function createRequestClient(baseURL: string) {
   const client = new RequestClient({
     baseURL,
-    // 为每个请求携带 Authorization
-    makeAuthorization: () => {
-      return {
-        // 默认
-        key: 'Authorization',
-        tokenHandler: () => {
-          const accessStore = useAccessStore();
-          return {
-            refreshToken: `${accessStore.refreshToken}`,
-            token: `${accessStore.accessToken}`,
-          };
-        },
-        unAuthorizedHandler: async () => {
-          const accessStore = useAccessStore();
-          const authStore = useAuthStore();
-          accessStore.setAccessToken(null);
-
-          if (preferences.app.loginExpiredMode === 'modal') {
-            accessStore.setLoginExpired(true);
-          } else {
-            // 退出登录
-            await authStore.logout();
-          }
-        },
-      };
-    },
-    makeErrorMessage: (msg) => ElMessage.error(msg),
-
-    makeRequestHeaders: () => {
-      return {
-        // 为每个请求携带 Accept-Language
-        'Accept-Language': preferences.app.locale,
-      };
-    },
   });
-  client.addResponseInterceptor<HttpResponse>((response) => {
-    const { data: responseData, status } = response;
 
-    const { code, data, message: msg } = responseData;
-    if (status >= 200 && status < 400 && code === 0) {
-      return data;
+  /**
+   * 重新认证逻辑
+   */
+  async function doReAuthenticate() {
+    console.warn('Access token or refresh token is invalid or expired. ');
+    const accessStore = useAccessStore();
+    const authStore = useAuthStore();
+    accessStore.setAccessToken(null);
+    if (
+      preferences.app.loginExpiredMode === 'modal' &&
+      accessStore.isAccessChecked
+    ) {
+      accessStore.setLoginExpired(true);
+    } else {
+      await authStore.logout();
     }
-    throw new Error(`Error ${status}: ${msg}`);
+  }
+
+  /**
+   * 刷新token逻辑
+   */
+  async function doRefreshToken() {
+    const accessStore = useAccessStore();
+    const resp = await refreshTokenApi();
+    const newToken = resp.data;
+    accessStore.setAccessToken(newToken);
+    return newToken;
+  }
+
+  function formatToken(token: null | string) {
+    return token ? `Bearer ${token}` : null;
+  }
+
+  // 请求头处理
+  client.addRequestInterceptor({
+    fulfilled: async (config) => {
+      const accessStore = useAccessStore();
+
+      config.headers.Authorization = formatToken(accessStore.accessToken);
+      config.headers['Accept-Language'] = preferences.app.locale;
+      return config;
+    },
   });
+
+  // response数据解构
+  client.addResponseInterceptor({
+    fulfilled: (response) => {
+      const { data: responseData, status } = response;
+
+      const { code, data, message: msg } = responseData;
+      if (status >= 200 && status < 400 && code === 0) {
+        return data;
+      }
+      throw new Error(`Error ${status}: ${msg}`);
+    },
+  });
+
+  // token过期的处理
+  client.addResponseInterceptor(
+    authenticateResponseInterceptor({
+      client,
+      doReAuthenticate,
+      doRefreshToken,
+      enableRefreshToken: preferences.app.enableRefreshToken,
+      formatToken,
+    }),
+  );
+
+  // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
+  client.addResponseInterceptor(
+    errorMessageResponseInterceptor((msg: string) => ElMessage.error(msg)),
+  );
+
   return client;
 }
 
 export const requestClient = createRequestClient(apiURL);
+
+export const baseRequestClient = new RequestClient({ baseURL: apiURL });

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

@@ -2,10 +2,9 @@
 import type { NotificationItem } from '@vben/layouts';
 
 import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
-import { LOGIN_PATH, VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
+import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
 import {
   BasicLayout,
@@ -14,16 +13,10 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import {
-  resetAllStores,
-  storeToRefs,
-  useAccessStore,
-  useUserStore,
-} from '@vben/stores';
+import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
-import { resetRoutes } from '#/router';
 import { useAuthStore } from '#/store';
 
 const notifications = ref<NotificationItem[]>([
@@ -100,12 +93,8 @@ const avatar = computed(() => {
   return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
 
-const router = useRouter();
-
 async function handleLogout() {
-  resetAllStores();
-  resetRoutes();
-  await router.replace(LOGIN_PATH);
+  await authStore.logout(false);
 }
 
 function handleNoticeClear() {

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/routes/modules/vben.ts

@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
       {
         name: 'VbenAbout',
         path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
         meta: {
           icon: 'lucide:copyright',
           title: $t('page.vben.about'),

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

@@ -10,7 +10,7 @@ import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 import { ElNotification } from 'element-plus';
 import { defineStore } from 'pinia';
 
-import { getAccessCodesApi, getUserInfoApi, loginApi } from '#/api';
+import { getAccessCodesApi, getUserInfoApi, loginApi, logoutApi } from '#/api';
 import { $t } from '#/locales';
 
 export const useAuthStore = defineStore('auth', () => {
@@ -33,13 +33,12 @@ export const useAuthStore = defineStore('auth', () => {
     let userInfo: null | UserInfo = null;
     try {
       loginLoading.value = true;
-      const { accessToken, refreshToken } = await loginApi(params);
+      const { accessToken } = await loginApi(params);
 
       // 如果成功获取到 accessToken
       if (accessToken) {
         // 将 accessToken 存储到 accessStore 中
         accessStore.setAccessToken(accessToken);
-        accessStore.setRefreshToken(refreshToken);
 
         // 获取用户信息并存储到 accessStore 中
         const [fetchUserInfoResult, accessCodes] = await Promise.all([
@@ -77,16 +76,19 @@ export const useAuthStore = defineStore('auth', () => {
     };
   }
 
-  async function logout() {
+  async function logout(redirect: boolean = true) {
+    await logoutApi();
     resetAllStores();
     accessStore.setLoginExpired(false);
 
     // 回登陆页带上当前路由地址
     await router.replace({
       path: LOGIN_PATH,
-      query: {
-        redirect: encodeURIComponent(router.currentRoute.value.fullPath),
-      },
+      query: redirect
+        ? {
+            redirect: encodeURIComponent(router.currentRoute.value.fullPath),
+          }
+        : {},
     });
   }
 

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-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.0",
+  "version": "5.2.1",
   "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": "^10.11.1",
+    "@vueuse/core": "^11.0.3",
     "naive-ui": "^2.39.0",
-    "pinia": "2.2.1",
-    "vue": "^3.4.37",
+    "pinia": "2.2.2",
+    "vue": "^3.4.38",
     "vue-router": "^4.4.3"
   }
 }

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

@@ -1,4 +1,4 @@
-import { requestClient } from '#/api/request';
+import { baseRequestClient, requestClient } from '#/api/request';
 
 export namespace AuthApi {
   /** 登录接口参数 */
@@ -12,10 +12,14 @@ export namespace AuthApi {
     accessToken: string;
     desc: string;
     realName: string;
-    refreshToken: string;
     userId: string;
     username: string;
   }
+
+  export interface RefreshTokenResult {
+    data: string;
+    status: number;
+  }
 }
 
 /**
@@ -25,6 +29,24 @@ export async function loginApi(data: AuthApi.LoginParams) {
   return requestClient.post<AuthApi.LoginResult>('/auth/login', data);
 }
 
+/**
+ * 刷新accessToken
+ */
+export async function refreshTokenApi() {
+  return baseRequestClient.post<AuthApi.RefreshTokenResult>('/auth/refresh', {
+    withCredentials: true,
+  });
+}
+
+/**
+ * 退出登录
+ */
+export async function logoutApi() {
+  return baseRequestClient.post('/auth/logout', {
+    withCredentials: true,
+  });
+}
+
 /**
  * 获取用户权限码
  */

apps/web-naive/src/api/request.ts

@@ -1,66 +1,103 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { HttpResponse } from '@vben/request';
-
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
-import { RequestClient } from '@vben/request';
+import {
+  authenticateResponseInterceptor,
+  errorMessageResponseInterceptor,
+  RequestClient,
+} from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
 import { message } from '#/naive';
 import { useAuthStore } from '#/store';
 
+import { refreshTokenApi } from './core';
+
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
 function createRequestClient(baseURL: string) {
   const client = new RequestClient({
     baseURL,
-    // 为每个请求携带 Authorization
-    makeAuthorization: () => {
-      return {
-        // 默认
-        key: 'Authorization',
-        tokenHandler: () => {
-          const accessStore = useAccessStore();
-          return {
-            refreshToken: `${accessStore.refreshToken}`,
-            token: `${accessStore.accessToken}`,
-          };
-        },
-        unAuthorizedHandler: async () => {
-          const accessStore = useAccessStore();
-          const authStore = useAuthStore();
-          accessStore.setAccessToken(null);
-
-          if (preferences.app.loginExpiredMode === 'modal') {
-            accessStore.setLoginExpired(true);
-          } else {
-            // 退出登录
-            await authStore.logout();
-          }
-        },
-      };
-    },
-    makeErrorMessage: (msg) => message.error(msg),
-
-    makeRequestHeaders: () => {
-      return {
-        // 为每个请求携带 Accept-Language
-        'Accept-Language': preferences.app.locale,
-      };
-    },
   });
-  client.addResponseInterceptor<HttpResponse>((response) => {
-    const { data: responseData, status } = response;
 
-    const { code, data, message: msg } = responseData;
-    if (status >= 200 && status < 400 && code === 0) {
-      return data;
+  /**
+   * 重新认证逻辑
+   */
+  async function doReAuthenticate() {
+    console.warn('Access token or refresh token is invalid or expired. ');
+    const accessStore = useAccessStore();
+    const authStore = useAuthStore();
+    accessStore.setAccessToken(null);
+    if (
+      preferences.app.loginExpiredMode === 'modal' &&
+      accessStore.isAccessChecked
+    ) {
+      accessStore.setLoginExpired(true);
+    } else {
+      await authStore.logout();
     }
-    throw new Error(`Error ${status}: ${msg}`);
+  }
+
+  /**
+   * 刷新token逻辑
+   */
+  async function doRefreshToken() {
+    const accessStore = useAccessStore();
+    const resp = await refreshTokenApi();
+    const newToken = resp.data;
+    accessStore.setAccessToken(newToken);
+    return newToken;
+  }
+
+  function formatToken(token: null | string) {
+    return token ? `Bearer ${token}` : null;
+  }
+
+  // 请求头处理
+  client.addRequestInterceptor({
+    fulfilled: async (config) => {
+      const accessStore = useAccessStore();
+
+      config.headers.Authorization = formatToken(accessStore.accessToken);
+      config.headers['Accept-Language'] = preferences.app.locale;
+      return config;
+    },
   });
+
+  // response数据解构
+  client.addResponseInterceptor({
+    fulfilled: (response) => {
+      const { data: responseData, status } = response;
+
+      const { code, data, message: msg } = responseData;
+      if (status >= 200 && status < 400 && code === 0) {
+        return data;
+      }
+      throw new Error(`Error ${status}: ${msg}`);
+    },
+  });
+
+  // token过期的处理
+  client.addResponseInterceptor(
+    authenticateResponseInterceptor({
+      client,
+      doReAuthenticate,
+      doRefreshToken,
+      enableRefreshToken: preferences.app.enableRefreshToken,
+      formatToken,
+    }),
+  );
+
+  // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
+  client.addResponseInterceptor(
+    errorMessageResponseInterceptor((msg: string) => message.error(msg)),
+  );
+
   return client;
 }
 
 export const requestClient = createRequestClient(apiURL);
+
+export const baseRequestClient = new RequestClient({ baseURL: apiURL });

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

@@ -2,10 +2,9 @@
 import type { NotificationItem } from '@vben/layouts';
 
 import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
-import { LOGIN_PATH, VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
+import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
 import {
   BasicLayout,
@@ -14,16 +13,10 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import {
-  resetAllStores,
-  storeToRefs,
-  useAccessStore,
-  useUserStore,
-} from '@vben/stores';
+import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
-import { resetRoutes } from '#/router';
 import { useAuthStore } from '#/store';
 
 const notifications = ref<NotificationItem[]>([
@@ -100,12 +93,8 @@ const avatar = computed(() => {
   return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
 
-const router = useRouter();
-
 async function handleLogout() {
-  resetAllStores();
-  resetRoutes();
-  await router.replace(LOGIN_PATH);
+  await authStore.logout(false);
 }
 
 function handleNoticeClear() {

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/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/routes/modules/vben.ts

@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
       {
         name: 'VbenAbout',
         path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
         meta: {
           icon: 'lucide:copyright',
           title: $t('page.vben.about'),

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

@@ -9,7 +9,7 @@ import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 
 import { defineStore } from 'pinia';
 
-import { getAccessCodesApi, getUserInfoApi, loginApi } from '#/api';
+import { getAccessCodesApi, getUserInfoApi, loginApi, logoutApi } from '#/api';
 import { $t } from '#/locales';
 import { notification } from '#/naive';
 
@@ -33,13 +33,12 @@ export const useAuthStore = defineStore('auth', () => {
     let userInfo: null | UserInfo = null;
     try {
       loginLoading.value = true;
-      const { accessToken, refreshToken } = await loginApi(params);
+      const { accessToken } = await loginApi(params);
 
       // 如果成功获取到 accessToken
       if (accessToken) {
         // 将 accessToken 存储到 accessStore 中
         accessStore.setAccessToken(accessToken);
-        accessStore.setRefreshToken(refreshToken);
 
         // 获取用户信息并存储到 accessStore 中
         const [fetchUserInfoResult, accessCodes] = await Promise.all([
@@ -77,16 +76,19 @@ export const useAuthStore = defineStore('auth', () => {
     };
   }
 
-  async function logout() {
+  async function logout(redirect: boolean = true) {
+    await logoutApi();
     resetAllStores();
     accessStore.setLoginExpired(false);
 
     // 回登陆页带上当前路由地址
     await router.replace({
       path: LOGIN_PATH,
-      query: {
-        redirect: encodeURIComponent(router.currentRoute.value.fullPath),
-      },
+      query: redirect
+        ? {
+            redirect: encodeURIComponent(router.currentRoute.value.fullPath),
+          }
+        : {},
     });
   }
 

apps/web-naive/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-naive/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-naive/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-naive/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-naive/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-naive/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 />

cspell.json

@@ -37,6 +37,7 @@
     "astro",
     "ui-kit",
     "styl",
+    "vnode",
     "nocheck",
     "prefixs",
     "vitepress",
@@ -53,6 +54,9 @@
     "**/*-dist/**",
     "**/icons/**",
     "pnpm-lock.yaml",
-    "**/*.log"
+    "**/*.log",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/__tests__/**"
   ]
 }

docs/.vitepress/components/demo-preview.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import PreviewGroup from './preview-group.vue';
+
+interface Props {
+  files?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), { files: '() => []' });
+
+const parsedFiles = computed(() => {
+  try {
+    return JSON.parse(decodeURIComponent(props.files ?? ''));
+  } catch {
+    return [];
+  }
+});
+</script>
+
+<template>
+  <div class="border-border shadow-float relative rounded-xl border">
+    <div
+      class="not-prose relative w-full overflow-x-auto rounded-t-lg px-4 py-6"
+    >
+      <div class="flex w-full max-w-[700px] px-2">
+        <slot v-if="parsedFiles.length > 0"></slot>
+        <div v-else class="text-destructive text-sm">
+          <span class="bg-destructive text-foreground rounded-sm px-1 py-1">
+            ERROR:
+          </span>
+          The preview directory does not exist. Please check the 'dir'
+          parameter.
+        </div>
+      </div>
+    </div>
+    <PreviewGroup v-if="parsedFiles.length > 0" :files="parsedFiles">
+      <template v-for="file in parsedFiles" #[file]>
+        <slot :name="file"></slot>
+      </template>
+    </PreviewGroup>
+  </div>
+</template>

docs/.vitepress/components/index.ts

@@ -0,0 +1 @@
+export { default as DemoPreview } from './demo-preview.vue';

docs/.vitepress/components/preview-group.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, ref, useSlots } from 'vue';
+
+import { VbenTooltip } from '@vben-core/shadcn-ui';
+
+import { Code } from 'lucide-vue-next';
+import {
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+} from 'radix-vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    files?: string[];
+  }>(),
+  { files: () => [] },
+);
+
+const open = ref(false);
+
+const slots = useSlots();
+
+const tabs = computed(() => {
+  return props.files.map((file) => {
+    return {
+      component: slots[file],
+      label: file,
+    };
+  });
+});
+
+const currentTab = ref('index.vue');
+
+const toggleOpen = () => {
+  open.value = !open.value;
+};
+</script>
+
+<template>
+  <TabsRoot
+    v-model="currentTab"
+    class="bg-background-deep border-border overflow-hidden rounded-b-xl border-t"
+    @update:model-value="open = true"
+  >
+    <div class="border-border bg-background flex border-b-2 pr-2">
+      <div class="flex w-full items-center justify-between text-[13px]">
+        <TabsList class="relative flex">
+          <template v-if="open">
+            <TabsIndicator
+              class="absolute bottom-0 left-0 h-[2px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full transition-[width,transform] duration-300"
+            >
+              <div class="size-full bg-[var(--vp-c-indigo-1)]"></div>
+            </TabsIndicator>
+            <TabsTrigger
+              v-for="(tab, index) in tabs"
+              :key="index"
+              :value="tab.label"
+              class="border-box text-foreground px-4 py-3 data-[state=active]:text-[var(--vp-c-indigo-1)]"
+              tabindex="-1"
+            >
+              {{ tab.label }}
+            </TabsTrigger>
+          </template>
+        </TabsList>
+
+        <div
+          :class="{
+            'py-2': !open,
+          }"
+          class="flex items-center"
+        >
+          <VbenTooltip side="top">
+            <template #trigger>
+              <Code
+                class="hover:bg-accent size-7 cursor-pointer rounded-full p-1.5"
+                @click="toggleOpen"
+              />
+            </template>
+            {{ open ? 'Collapse code' : 'Expand code' }}
+          </VbenTooltip>
+        </div>
+      </div>
+    </div>
+    <div
+      :class="`${open ? 'h-[unset] max-h-[80vh]' : 'h-0'}`"
+      class="block overflow-y-scroll bg-[var(--vp-code-block-bg)] transition-all duration-300"
+    >
+      <TabsContent
+        v-for="tab in tabs"
+        :key="tab.label"
+        :value="tab.label"
+        as-child
+        class="rounded-xl"
+      >
+        <div class="text-foreground relative rounded-xl">
+          <component :is="tab.component" class="border-0" />
+        </div>
+      </TabsContent>
+    </div>
+  </TabsRoot>
+</template>

docs/.vitepress/config/en.mts

@@ -0,0 +1,222 @@
+import { type DefaultTheme, defineConfig } from 'vitepress';
+
+import { version } from '../../../package.json';
+
+export const en = defineConfig({
+  description: 'Vben Admin & Enterprise level management system framework',
+  lang: 'en-US',
+  themeConfig: {
+    darkModeSwitchLabel: 'Theme',
+    darkModeSwitchTitle: 'Switch to Dark Mode',
+    docFooter: {
+      next: 'Next Page',
+      prev: 'Previous Page',
+    },
+    editLink: {
+      pattern:
+        'https://github.com/vbenjs/vue-vben-admin/edit/main/docs/src/:path',
+      text: 'Edit this page on GitHub',
+    },
+    footer: {
+      copyright: `Copyright © 2020-${new Date().getFullYear()} Vben`,
+      message: 'Released under the MIT License.',
+    },
+    langMenuLabel: 'Language',
+    lastUpdated: {
+      formatOptions: {
+        dateStyle: 'short',
+        timeStyle: 'medium',
+      },
+      text: 'Last updated on',
+    },
+    lightModeSwitchTitle: 'Switch to Light Mode',
+    nav: nav(),
+    outline: {
+      label: 'Navigate',
+    },
+    returnToTopLabel: 'Back to top',
+    sidebar: {
+      '/en/commercial/': {
+        base: '/en/commercial/',
+        items: sidebarCommercial(),
+      },
+      '/en/guide/': { base: '/en/guide/', items: sidebarGuide() },
+    },
+  },
+});
+
+function sidebarGuide(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      collapsed: false,
+      text: 'Introduction',
+      items: [
+        {
+          link: 'introduction/vben',
+          text: 'About Vben Admin',
+        },
+        {
+          link: 'introduction/why',
+          text: 'Why Choose Us?',
+        },
+        { link: 'introduction/quick-start', text: 'Quick Start' },
+        { link: 'introduction/thin', text: 'Lite Version' },
+      ],
+    },
+    {
+      text: 'Basics',
+      items: [
+        { link: 'essentials/concept', text: 'Basic Concepts' },
+        { link: 'essentials/development', text: 'Local Development' },
+        { link: 'essentials/route', text: 'Routing and Menu' },
+        { link: 'essentials/settings', text: 'Configuration' },
+        { link: 'essentials/icons', text: 'Icons' },
+        { link: 'essentials/styles', text: 'Styles' },
+        { link: 'essentials/external-module', text: 'External Modules' },
+        { link: 'essentials/build', text: 'Build and Deployment' },
+        { link: 'essentials/server', text: 'Server Interaction and Data Mock' },
+      ],
+    },
+    {
+      text: 'Advanced',
+      items: [
+        { link: 'in-depth/login', text: 'Login' },
+        { link: 'in-depth/theme', text: 'Theme' },
+        { link: 'in-depth/access', text: 'Access Control' },
+        { link: 'in-depth/locale', text: 'Internationalization' },
+        { link: 'in-depth/features', text: 'Common Features' },
+        { link: 'in-depth/check-updates', text: 'Check Updates' },
+        { link: 'in-depth/loading', text: 'Global Loading' },
+        { link: 'in-depth/ui-framework', text: 'UI Framework Switching' },
+      ],
+    },
+    {
+      text: 'Engineering',
+      items: [
+        { link: 'project/standard', text: 'Standards' },
+        { link: 'project/cli', text: 'CLI' },
+        { link: 'project/dir', text: 'Directory Explanation' },
+        { link: 'project/test', text: 'Unit Testing' },
+        { link: 'project/tailwindcss', text: 'Tailwind CSS' },
+        { link: 'project/changeset', text: 'Changeset' },
+        { link: 'project/vite', text: 'Vite Config' },
+      ],
+    },
+    {
+      text: 'Others',
+      items: [
+        { link: 'other/project-update', text: 'Project Update' },
+        { link: 'other/remove-code', text: 'Remove Code' },
+        { link: 'other/faq', text: 'FAQ' },
+      ],
+    },
+  ];
+}
+
+function sidebarCommercial(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      link: 'community',
+      text: 'Community',
+    },
+    {
+      link: 'technical-support',
+      text: 'Technical-support',
+    },
+    {
+      link: 'customized',
+      text: 'Customized',
+    },
+  ];
+}
+
+function nav(): DefaultTheme.NavItem[] {
+  return [
+    {
+      text: 'Doc',
+      items: [
+        {
+          link: '/en/guide/introduction/vben',
+          text: 'Guide',
+        },
+        {
+          text: 'Historical Versions',
+          items: [
+            {
+              link: 'https://doc.vvbin.cn',
+              text: '2.x Version Documentation',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      text: 'Demo',
+      items: [
+        {
+          text: 'Vben Admin',
+          items: [
+            {
+              link: 'https://www.vben.pro',
+              text: 'Demo Version',
+            },
+            {
+              link: 'https://ant.vben.pro',
+              text: 'Ant Design Vue Version',
+            },
+            {
+              link: 'https://naive.vben.pro',
+              text: 'Naive Version',
+            },
+            {
+              link: 'https://ele.vben.pro',
+              text: 'Element Plus Version',
+            },
+          ],
+        },
+        {
+          text: 'Others',
+          items: [
+            {
+              link: 'https://vben.vvbin.cn',
+              text: 'Vben Admin 2.x',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      text: version,
+      items: [
+        {
+          link: 'https://github.com/vbenjs/vue-vben-admin/releases',
+          text: 'Changelog',
+        },
+        {
+          link: 'https://github.com/orgs/vbenjs/projects/5',
+          text: 'Roadmap',
+        },
+        {
+          link: 'https://github.com/vbenjs/vue-vben-admin/blob/main/.github/contributing.md',
+          text: 'Contribution',
+        },
+      ],
+    },
+    {
+      link: '/commercial/technical-support',
+      text: '🦄 Tech Support',
+    },
+    {
+      link: '/sponsor/personal',
+      text: '✨ Sponsor',
+    },
+    {
+      link: '/commercial/community',
+      text: '👨‍👦‍👦 Community',
+    },
+    {
+      link: '/friend-links/',
+      text: '🤝 Friend Links',
+    },
+  ];
+}

docs/.vitepress/config/index.mts

@@ -0,0 +1,25 @@
+import { withPwa } from '@vite-pwa/vitepress';
+import { defineConfigWithTheme } from 'vitepress';
+
+import { en } from './en.mts';
+import { shared } from './shared.mts';
+import { zh } from './zh.mts';
+
+export default withPwa(
+  defineConfigWithTheme({
+    ...shared,
+    locales: {
+      en: {
+        label: 'English',
+        lang: 'en',
+        link: '/en/',
+        ...en,
+      },
+      root: {
+        label: '简体中文',
+        lang: 'zh-CN',
+        ...zh,
+      },
+    },
+  }),
+);

docs/.vitepress/config/plugins/demo-preview.ts

@@ -0,0 +1,135 @@
+import type { MarkdownEnv, MarkdownRenderer } from 'vitepress';
+
+import crypto from 'node:crypto';
+import { readdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+export const rawPathRegexp =
+  // eslint-disable-next-line regexp/no-super-linear-backtracking, regexp/strict
+  /^(.+?(?:\.([\da-z]+))?)(#[\w-]+)?(?: ?{(\d+(?:[,-]\d+)*)? ?(\S+)?})? ?(?:\[(.+)])?$/;
+
+function rawPathToToken(rawPath: string) {
+  const [
+    filepath = '',
+    extension = '',
+    region = '',
+    lines = '',
+    lang = '',
+    rawTitle = '',
+  ] = (rawPathRegexp.exec(rawPath) || []).slice(1);
+
+  const title = rawTitle || filepath.split('/').pop() || '';
+
+  return { extension, filepath, lang, lines, region, title };
+}
+
+export const demoPreviewPlugin = (md: MarkdownRenderer) => {
+  md.core.ruler.after('inline', 'demo-preview', (state) => {
+    const insertComponentImport = (importString: string) => {
+      const index = state.tokens.findIndex(
+        (i) => i.type === 'html_block' && i.content.match(/<script setup>/g),
+      );
+      if (index === -1) {
+        const importComponent = new state.Token('html_block', '', 0);
+        importComponent.content = `<script setup>\n${importString}\n</script>\n`;
+        state.tokens.splice(0, 0, importComponent);
+      } else {
+        if (state.tokens[index]) {
+          const content = state.tokens[index].content;
+          state.tokens[index].content = content.replace(
+            '</script>',
+            `${importString}\n</script>`,
+          );
+        }
+      }
+    };
+    // Define the regular expression to match the desired pattern
+    const regex = /<DemoPreview[^>]*\sdir="([^"]*)"/g;
+    // Iterate through the Markdown content and replace the pattern
+    state.src = state.src.replaceAll(regex, (_match, dir) => {
+      const componentDir = join(process.cwd(), 'src', dir);
+
+      let childFiles: string[] = [];
+      let dirExists = true;
+
+      try {
+        childFiles =
+          readdirSync(componentDir, {
+            encoding: 'utf8',
+            recursive: false,
+            withFileTypes: false,
+          }) || [];
+      } catch {
+        dirExists = false;
+      }
+
+      if (!dirExists) {
+        return '';
+      }
+
+      const uniqueWord = generateContentHash(componentDir);
+
+      const ComponentName = `DemoComponent_${uniqueWord}`;
+      insertComponentImport(
+        `import ${ComponentName} from '${componentDir}/index.vue'`,
+      );
+      const { path: _path } = state.env as MarkdownEnv;
+
+      const index = state.tokens.findIndex((i) => i.content.match(regex));
+
+      if (!state.tokens[index]) {
+        return '';
+      }
+
+      state.tokens[index].content =
+        `<DemoPreview files="${encodeURIComponent(JSON.stringify(childFiles))}" ><${ComponentName}/>
+        `;
+
+      const _dummyToken = new state.Token('', '', 0);
+      const tokenArray: Array<typeof _dummyToken> = [];
+      childFiles.forEach((filename) => {
+        // const slotName = filename.replace(extname(filename), '');
+
+        const templateStart = new state.Token('html_inline', '', 0);
+        templateStart.content = `<template #${filename}>`;
+        tokenArray.push(templateStart);
+
+        const resolvedPath = join(componentDir, filename);
+
+        const { extension, filepath, lang, lines, title } =
+          rawPathToToken(resolvedPath);
+        // Add code tokens for each line
+        const token = new state.Token('fence', 'code', 0);
+        token.info = `${lang || extension}${lines ? `{${lines}}` : ''}${
+          title ? `[${title}]` : ''
+        }`;
+
+        token.content = `<<< ${filepath}`;
+        (token as any).src = [resolvedPath];
+        tokenArray.push(token);
+
+        const templateEnd = new state.Token('html_inline', '', 0);
+        templateEnd.content = '</template>';
+        tokenArray.push(templateEnd);
+      });
+      const endTag = new state.Token('html_inline', '', 0);
+      endTag.content = '</DemoPreview>';
+      tokenArray.push(endTag);
+
+      state.tokens.splice(index + 1, 0, ...tokenArray);
+
+      // console.log(
+      //   state.md.renderer.render(state.tokens, state?.options ?? [], state.env),
+      // );
+      return '';
+    });
+  });
+};
+
+function generateContentHash(input: string, length: number = 10): string {
+  // 使用 SHA-256 生成哈希值
+  const hash = crypto.createHash('sha256').update(input).digest('hex');
+
+  // 将哈希值转换为 Base36 编码，并取指定长度的字符作为结果
+  return Number.parseInt(hash, 16).toString(36).slice(0, length);
+}

docs/.vitepress/config/shared.mts

@@ -0,0 +1,155 @@
+import type { PwaOptions } from '@vite-pwa/vitepress';
+import type { HeadConfig } from 'vitepress';
+
+import { resolve } from 'node:path';
+
+import { viteArchiverPlugin } from '@vben/vite-config';
+
+import {
+  GitChangelog,
+  GitChangelogMarkdownSection,
+} from '@nolebase/vitepress-plugin-git-changelog/vite';
+import tailwind from 'tailwindcss';
+import { defineConfig, postcssIsolateStyles } from 'vitepress';
+
+import { demoPreviewPlugin } from './plugins/demo-preview';
+import { search as zhSearch } from './zh.mts';
+
+export const shared = defineConfig({
+  appearance: 'dark',
+  head: head(),
+  markdown: {
+    preConfig(md) {
+      md.use(demoPreviewPlugin);
+    },
+  },
+  pwa: pwa(),
+  srcDir: 'src',
+  themeConfig: {
+    i18nRouting: true,
+    logo: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
+    search: {
+      options: {
+        locales: {
+          ...zhSearch,
+        },
+      },
+      provider: 'local',
+    },
+    siteTitle: 'Vben Admin',
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/vbenjs/vue-vben-admin' },
+    ],
+  },
+  title: 'Vben Admin',
+  vite: {
+    build: {
+      chunkSizeWarningLimit: Infinity,
+      minify: 'terser',
+    },
+    css: {
+      postcss: {
+        plugins: [
+          tailwind(),
+          postcssIsolateStyles({ includeFiles: [/vp-doc\.css/] }),
+        ],
+      },
+    },
+    json: {
+      stringify: true,
+    },
+    plugins: [
+      GitChangelog({
+        mapAuthors: [
+          {
+            mapByNameAliases: ['Vben'],
+            name: 'vben',
+            username: 'anncwb',
+          },
+          {
+            name: 'vince',
+            username: 'vince292007',
+          },
+          {
+            name: 'Li Kui',
+            username: 'likui628',
+          },
+        ],
+        repoURL: () => 'https://github.com/vbenjs/vue-vben-admin',
+      }),
+      GitChangelogMarkdownSection(),
+      viteArchiverPlugin({ outputDir: '.vitepress' }),
+    ],
+    server: {
+      fs: {
+        allow: ['../..'],
+      },
+      host: true,
+      port: 6173,
+    },
+    ssr: {
+      external: ['@vue/repl'],
+    },
+  },
+});
+
+function head(): HeadConfig[] {
+  return [
+    ['meta', { content: 'Vbenjs Team', name: 'author' }],
+    [
+      'meta',
+      {
+        content: 'vben, vitejs, vite, shacdn-ui, vue',
+        name: 'keywords',
+      },
+    ],
+    ['link', { href: '/favicon.ico', rel: 'icon', type: 'image/svg+xml' }],
+    [
+      'meta',
+      {
+        content:
+          'width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no',
+        name: 'viewport',
+      },
+    ],
+    ['meta', { content: 'vben admin docs', name: 'keywords' }],
+    ['link', { href: '/favicon.ico', rel: 'icon' }],
+    // [
+    //   'script',
+    //   {
+    //     src: 'https://cdn.tailwindcss.com',
+    //   },
+    // ],
+  ];
+}
+
+function pwa(): PwaOptions {
+  return {
+    includeManifestIcons: false,
+    manifest: {
+      description:
+        'Vben Admin is a modern admin dashboard template based on Vue 3. ',
+      icons: [
+        {
+          sizes: '192x192',
+          src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-192.png',
+          type: 'image/png',
+        },
+        {
+          sizes: '512x512',
+          src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-512.png',
+          type: 'image/png',
+        },
+      ],
+      id: '/',
+      name: 'Vben Admin Doc',
+      short_name: 'vben_admin_doc',
+      theme_color: '#ffffff',
+    },
+    outDir: resolve(process.cwd(), '.vitepress/dist'),
+    registerType: 'autoUpdate',
+    workbox: {
+      globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
+    },
+  };
+}

docs/.vitepress/config/zh.mts

@@ -1,116 +1,169 @@
-import type { DefaultTheme, HeadConfig } from 'vitepress';
+import { type DefaultTheme, defineConfig } from 'vitepress';
 
-import { resolve } from 'node:path';
+import { version } from '../../../package.json';
 
-import { type PwaOptions, withPwa } from '@vite-pwa/vitepress';
-import { defineConfigWithTheme } from 'vitepress';
-
-import { version } from '../../package.json';
-
-export default withPwa(
-  defineConfigWithTheme({
-    description: 'Vben Admin& 企业级管理系统框架',
-    head: head(),
-    lang: 'zh',
-    pwa: pwa(),
-    // locales: {
-    //   en: {
-    //     label: 'English',
-    //     lang: 'en',
-    //     link: '/en/',
-    //   },
-    //   root: {
-    //     label: '简体中文',
-    //     lang: 'zh-CN',
-    srcDir: 'src',
-    //   },
-    themeConfig: {
-      darkModeSwitchLabel: '主题',
-      darkModeSwitchTitle: '切换到深色模式',
-      docFooter: {
-        next: '下一页',
-        prev: '上一页',
+export const zh = defineConfig({
+  description: 'Vben Admin & 企业级管理系统框架',
+  lang: 'zh-Hans',
+  themeConfig: {
+    darkModeSwitchLabel: '主题',
+    darkModeSwitchTitle: '切换到深色模式',
+    docFooter: {
+      next: '下一页',
+      prev: '上一页',
+    },
+    editLink: {
+      pattern:
+        'https://github.com/vbenjs/vue-vben-admin/edit/main/docs/src/:path',
+      text: '在 GitHub 上编辑此页面',
+    },
+    footer: {
+      copyright: `Copyright © 2020-${new Date().getFullYear()} Vben`,
+      message: '基于 MIT 许可发布.',
+    },
+    langMenuLabel: '多语言',
+    lastUpdated: {
+      formatOptions: {
+        dateStyle: 'short',
+        timeStyle: 'medium',
       },
-      editLink: {
-        pattern:
-          'https://github.com/vbenjs/vue-vben-admin/edit/main/docs/:path',
-        text: '在 GitHub 上编辑此页面',
-      },
-      footer: {
-        copyright: `Copyright © 2020-${new Date().getFullYear()} Vben`,
-        message: '基于 MIT 许可发布.',
-      },
-      i18nRouting: true,
-      langMenuLabel: '多语言',
-      lastUpdated: {
-        formatOptions: {
-          dateStyle: 'short',
-          timeStyle: 'medium',
+      text: '最后更新于',
+    },
+    lightModeSwitchTitle: '切换到浅色模式',
+    nav: nav(),
+
+    outline: {
+      label: '页面导航',
+    },
+    returnToTopLabel: '回到顶部',
+
+    sidebar: {
+      '/commercial/': { base: '/commercial/', items: sidebarCommercial() },
+      '/components/': { base: '/components/', items: sidebarComponents() },
+      '/guide/': { base: '/guide/', items: sidebarGuide() },
+    },
+    sidebarMenuLabel: '菜单',
+  },
+});
+
+function sidebarGuide(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      collapsed: false,
+      text: '简介',
+      items: [
+        {
+          link: 'introduction/vben',
+          text: '关于 Vben Admin',
         },
-        text: '最后更新于',
-      },
-      lightModeSwitchTitle: '切换到浅色模式',
-      logo: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
-      nav: nav(),
-      outline: {
-        label: '页面导航',
-      },
-      returnToTopLabel: '回到顶部',
-      search: {
-        options: {
-          locales: {
-            zh: {
-              translations: {
-                button: {
-                  buttonAriaLabel: '搜索文档',
-                  buttonText: '搜索文档',
-                },
-                modal: {
-                  footer: {
-                    navigateText: '切换',
-                    selectText: '选择',
-                  },
-                  noResultsText: '无法找到相关结果',
-                  resetButtonTitle: '清除查询条件',
-                },
-              },
-            },
-          },
+        {
+          link: 'introduction/why',
+          text: '为什么选择我们?',
+        },
+        { link: 'introduction/quick-start', text: '快速开始' },
+        { link: 'introduction/thin', text: '精简版本' },
+        {
+          base: '/',
+          link: 'components/introduction',
+          text: '组件文档',
         },
-        provider: 'local',
-      },
-      sidebar: {
-        '/commercial/': { base: '/commercial/', items: sidebarCommercial() },
-        '/guide/': { base: '/guide/', items: sidebarGuide() },
-      },
-      sidebarMenuLabel: '菜单',
-      siteTitle: 'Vben Admin',
-      socialLinks: [
-        { icon: 'github', link: 'https://github.com/vbenjs/vue-vben-admin' },
       ],
     },
-    title: 'Vben Admin',
-    vite: {
-      build: {
-        chunkSizeWarningLimit: Infinity,
-        minify: 'terser',
-      },
-      json: {
-        stringify: true,
-      },
-      server: {
-        fs: {
-          allow: ['../..'],
-        },
-        host: true,
-        port: 6173,
-      },
-      ssr: {
-        external: ['@vue/repl'],
-      },
+    {
+      text: '基础',
+      items: [
+        { link: 'essentials/concept', text: '基础概念' },
+        { link: 'essentials/development', text: '本地开发' },
+        { link: 'essentials/route', text: '路由和菜单' },
+        { link: 'essentials/settings', text: '配置' },
+        { link: 'essentials/icons', text: '图标' },
+        { link: 'essentials/styles', text: '样式' },
+        { link: 'essentials/external-module', text: '外部模块' },
+        { link: 'essentials/build', text: '构建与部署' },
+        { link: 'essentials/server', text: '服务端交互与数据Mock' },
+      ],
     },
-  }),
-);
+    {
+      text: '深入',
+      items: [
+        { link: 'in-depth/login', text: '登录' },
+        // { link: 'in-depth/layout', text: '布局' },
+        { link: 'in-depth/theme', text: '主题' },
+        { link: 'in-depth/access', text: '权限' },
+        { link: 'in-depth/locale', text: '国际化' },
+        { link: 'in-depth/features', text: '常用功能' },
+        { link: 'in-depth/check-updates', text: '检查更新' },
+        { link: 'in-depth/loading', text: '全局loading' },
+        { link: 'in-depth/ui-framework', text: '组件库切换' },
+      ],
+    },
+    {
+      text: '工程',
+      items: [
+        { link: 'project/standard', text: '规范' },
+        { link: 'project/cli', text: 'CLI' },
+        { link: 'project/dir', text: '目录说明' },
+        { link: 'project/test', text: '单元测试' },
+        { link: 'project/tailwindcss', text: 'Tailwind CSS' },
+        { link: 'project/changeset', text: 'Changeset' },
+        { link: 'project/vite', text: 'Vite Config' },
+      ],
+    },
+    {
+      text: '其他',
+      items: [
+        { link: 'other/project-update', text: '项目更新' },
+        { link: 'other/remove-code', text: '移除代码' },
+        { link: 'other/faq', text: '常见问题' },
+      ],
+    },
+  ];
+}
+
+function sidebarCommercial(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      link: 'community',
+      text: '社区',
+    },
+    {
+      link: 'technical-support',
+      text: '技术支持',
+    },
+    {
+      link: 'customized',
+      text: '定制开发',
+    },
+  ];
+}
+
+function sidebarComponents(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: '组件',
+      items: [
+        {
+          link: 'introduction',
+          text: '介绍',
+        },
+      ],
+    },
+    {
+      collapsed: false,
+      text: '通用组件',
+      items: [
+        {
+          link: 'common-ui/vben-modal',
+          text: 'Vben Modal 模态框',
+        },
+        {
+          link: 'common-ui/vben-drawer',
+          text: 'Vben Drawer 抽屉',
+        },
+      ],
+    },
+  ];
+}
 
 function nav(): DefaultTheme.NavItem[] {
   return [
@@ -120,28 +173,10 @@ function nav(): DefaultTheme.NavItem[] {
         {
           link: '/guide/introduction/vben',
           text: '指南',
-          // items: [
-          //   {
-          //     link: '/guide/introduction/vben',
-          //     text: '简介',
-          //   },
-          //   {
-          //     link: '/guide/essentials/concept',
-          //     text: '基础',
-          //   },
-          //   {
-          //     link: '/guide/in-depth/layout',
-          //     text: '深入',
-          //   },
-          //   {
-          //     link: '/guide/project/standard',
-          //     text: '工程',
-          //   },
-          //   {
-          //     link: '/guide/other/project-update',
-          //     text: '其他',
-          //   },
-          // ],
+        },
+        {
+          link: '/components/introduction',
+          text: '组件',
         },
         {
           text: '历史版本',
@@ -216,7 +251,7 @@ function nav(): DefaultTheme.NavItem[] {
     },
     {
       link: '/commercial/community',
-      text: '👨‍👦‍👦 社区交流',
+      text: '👨‍👦‍👦 社区',
       // items: [
       //   {
       //     link: 'https://qun.qq.com/qqweb/qunpro/share?_wv=3&_wwv=128&appChannel=share&inviteCode=22ySzj7pKiw&businessType=9&from=246610&biz=ka&mainSourceId=share&subSourceId=others&jumpsource=shorturl#/pc',
@@ -239,147 +274,46 @@ function nav(): DefaultTheme.NavItem[] {
   ];
 }
 
-function sidebarGuide(): DefaultTheme.SidebarItem[] {
-  return [
-    {
-      collapsed: false,
-      text: '简介',
-      items: [
-        {
-          link: 'introduction/vben',
-          text: '关于 Vben Admin',
-        },
-        {
-          link: 'introduction/why',
-          text: '为什么选择我们?',
-        },
-        { link: 'introduction/quick-start', text: '快速开始' },
-        { link: 'introduction/thin', text: '精简版本' },
-      ],
-    },
-    {
-      text: '基础',
-      items: [
-        { link: 'essentials/concept', text: '基础概念' },
-        { link: 'essentials/development', text: '本地开发' },
-        { link: 'essentials/route', text: '路由和菜单' },
-        { link: 'essentials/settings', text: '配置' },
-        { link: 'essentials/icons', text: '图标' },
-        { link: 'essentials/styles', text: '样式' },
-        { link: 'essentials/external-module', text: '外部模块' },
-        { link: 'essentials/build', text: '构建与部署' },
-        { link: 'essentials/server', text: '服务端交互与数据Mock' },
-      ],
-    },
-    {
-      text: '深入',
-      items: [
-        // { link: 'in-depth/layout', text: '布局' },
-        { link: 'in-depth/theme', text: '主题' },
-        { link: 'in-depth/access', text: '权限' },
-        { link: 'in-depth/locale', text: '国际化' },
-        { link: 'in-depth/features', text: '常用功能' },
-        { link: 'in-depth/check-updates', text: '检查更新' },
-        { link: 'in-depth/loading', text: '全局loading' },
-        { link: 'in-depth/ui-framework', text: '组件库切换' },
-      ],
-    },
-    {
-      text: '工程',
-      items: [
-        { link: 'project/standard', text: '规范' },
-        { link: 'project/cli', text: 'CLI' },
-        { link: 'project/dir', text: '目录说明' },
-        { link: 'project/test', text: '单元测试' },
-        { link: 'project/tailwindcss', text: 'Tailwind CSS' },
-        { link: 'project/changeset', text: 'Changeset' },
-        { link: 'project/vite', text: 'Vite Config' },
-      ],
-    },
-    {
-      text: '其他',
-      items: [
-        { link: 'other/project-update', text: '项目更新' },
-        { link: 'other/remove-code', text: '移除代码' },
-        { link: 'other/faq', text: '常见问题' },
-      ],
-    },
-  ];
-}
-function sidebarCommercial(): DefaultTheme.SidebarItem[] {
-  return [
-    {
-      link: 'community',
-      text: '社区交流',
-    },
-    {
-      link: 'technical-support',
-      text: '技术支持',
-    },
-    {
-      link: 'customized',
-      text: '定制开发',
-    },
-  ];
-}
-
-function head(): HeadConfig[] {
-  return [
-    ['meta', { content: 'Vbenjs Team', name: 'author' }],
-    [
-      'meta',
-      {
-        content: 'vben, vitejs, vite, shacdn-ui, vue',
-        name: 'keywords',
+export const search: DefaultTheme.AlgoliaSearchOptions['locales'] = {
+  root: {
+    placeholder: '搜索文档',
+    translations: {
+      button: {
+        buttonAriaLabel: '搜索文档',
+        buttonText: '搜索文档',
       },
-    ],
-    ['link', { href: '/favicon.ico', rel: 'icon', type: 'image/svg+xml' }],
-    [
-      'meta',
-      {
-        content:
-          'width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no',
-        name: 'viewport',
+      modal: {
+        errorScreen: {
+          helpText: '你可能需要检查你的网络连接',
+          titleText: '无法获取结果',
+        },
+        footer: {
+          closeText: '关闭',
+          navigateText: '切换',
+          searchByText: '搜索提供者',
+          selectText: '选择',
+        },
+        noResultsScreen: {
+          noResultsText: '无法找到相关结果',
+          reportMissingResultsLinkText: '点击反馈',
+          reportMissingResultsText: '你认为该查询应该有结果？',
+          suggestedQueryText: '你可以尝试查询',
+        },
+        searchBox: {
+          cancelButtonAriaLabel: '取消',
+          cancelButtonText: '取消',
+          resetButtonAriaLabel: '清除查询条件',
+          resetButtonTitle: '清除查询条件',
+        },
+        startScreen: {
+          favoriteSearchesTitle: '收藏',
+          noRecentSearchesText: '没有搜索历史',
+          recentSearchesTitle: '搜索历史',
+          removeFavoriteSearchButtonTitle: '从收藏中移除',
+          removeRecentSearchButtonTitle: '从搜索历史中移除',
+          saveRecentSearchButtonTitle: '保存至搜索历史',
+        },
       },
-    ],
-    ['meta', { content: 'vben admin docs', name: 'keywords' }],
-    ['link', { href: '/favicon.ico', rel: 'icon' }],
-    // [
-    //   'script',
-    //   {
-    //     src: 'https://cdn.tailwindcss.com',
-    //   },
-    // ],
-  ];
-}
-
-function pwa(): PwaOptions {
-  return {
-    includeManifestIcons: false,
-    manifest: {
-      description:
-        'Vben Admin is a modern admin dashboard template based on Vue 3. ',
-      icons: [
-        {
-          sizes: '192x192',
-          src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-192.png',
-          type: 'image/png',
-        },
-        {
-          sizes: '512x512',
-          src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-512.png',
-          type: 'image/png',
-        },
-      ],
-      id: '/',
-      name: 'Vben Admin Doc',
-      short_name: 'vben_admin_doc',
-      theme_color: '#ffffff',
     },
-    outDir: resolve(process.cwd(), '.vitepress/dist'),
-    registerType: 'autoUpdate',
-    workbox: {
-      globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
-    },
-  };
-}
+  },
+};

docs/.vitepress/theme/index.ts

@@ -1,19 +1,24 @@
 // https://vitepress.dev/guide/custom-theme
-import type { Theme } from 'vitepress';
+import type { EnhanceAppContext, Theme } from 'vitepress';
 
+import { NolebaseGitChangelogPlugin } from '@nolebase/vitepress-plugin-git-changelog/client';
 import DefaultTheme from 'vitepress/theme';
 
+import { DemoPreview } from '../components';
 import SiteLayout from './components/site-layout.vue';
 import VbenContributors from './components/vben-contributors.vue';
 import { initHmPlugin } from './plugins/hm';
 
 import './styles';
 
-export default {
-  enhanceApp({ app }) {
-    // ...
-    app.component('VbenContributors', VbenContributors);
+import '@nolebase/vitepress-plugin-git-changelog/client/style.css';
 
+export default {
+  enhanceApp(ctx: EnhanceAppContext) {
+    const { app } = ctx;
+    app.component('VbenContributors', VbenContributors);
+    app.component('DemoPreview', DemoPreview);
+    app.use(NolebaseGitChangelogPlugin);
     // 百度统计
     initHmPlugin();
   },

docs/.vitepress/theme/styles/index.ts

@@ -1,2 +1,3 @@
 import './variables.css';
 import './base.css';
+import '@vben/styles';

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.1.0",
+  "version": "5.2.1",
   "private": true,
   "scripts": {
     "build": "vitepress build",
@@ -8,11 +8,18 @@
     "docs:preview": "vitepress preview"
   },
   "dependencies": {
-    "medium-zoom": "^1.1.0"
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben/common-ui": "workspace:*",
+    "@vben/styles": "workspace:*",
+    "lucide-vue-next": "^0.436.0",
+    "medium-zoom": "^1.1.0",
+    "radix-vue": "^1.9.5"
   },
   "devDependencies": {
+    "@nolebase/vitepress-plugin-git-changelog": "^2.4.0",
+    "@vben/vite-config": "workspace:*",
     "@vite-pwa/vitepress": "^0.5.0",
-    "vitepress": "^1.3.2",
-    "vue": "^3.4.37"
+    "vitepress": "^1.3.4",
+    "vue": "^3.4.38"
   }
 }

docs/src/components/common-ui/vben-drawer.md

@@ -0,0 +1,112 @@
+---
+outline: deep
+---
+
+# Vben Drawer 抽屉
+
+框架提供的抽屉组件，支持`自动高度`、`loading`等功能。
+
+## 基础用法
+
+使用 `useVbenDrawer` 创建最基础的模态框。
+
+<DemoPreview dir="demos/vben-drawer/basic" />
+
+## 组件抽离
+
+Drawer 内的内容一般业务中，会比较复杂，所以我们可以将 drawer 内的内容抽离出来，也方便复用。通过 `connectedComponent` 参数，可以将内外组件进行连接，而不用其他任何操作。
+
+<DemoPreview dir="demos/vben-drawer/extra" />
+
+## 自动计算高度
+
+弹窗会自动计算内容高度，超过一定高度会出现滚动条，同时结合 `loading` 效果以及使用 `prepend-footer` 插槽。
+
+<DemoPreview dir="demos/vben-drawer/auto-height" />
+
+## 使用 Api
+
+通过 `drawerApi` 可以调用 drawer 的方法以及使用 `setState` 更新 drawer 的状态。
+
+<DemoPreview dir="demos/vben-drawer/dynamic" />
+
+## 数据共享
+
+如果你使用了 `connectedComponent` 参数，那么内外组件会共享数据，比如一些表单回填等操作。可以用 `drawerApi` 来获取数据和设置数据，配合 `onOpenChange`，可以满足大部分的需求。
+
+<DemoPreview dir="demos/vben-drawer/shared-data" />
+
+::: info 注意
+
+- `VbenDrawer` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenDrawer参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
+- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenDrawer`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onComfirm`，那么以内部的 `onComfirm` 为准。`onOpenChange`事件除外，内外都会触发。
+
+:::
+
+## API
+
+```ts
+// Drawer 为弹窗组件
+// drawerApi 为弹窗的方法
+const [Drawer, drawerApi] = useVbenDrawer({
+  // 属性
+  // 事件
+});
+```
+
+### Props
+
+所有属性都可以传入 `useVbenDrawer` 的第一个参数中。
+
+| 属性名 | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标题 | `string\|slot` | - |
+| titleTooltip | 标题提示信息 | `string\|slot` | - |
+| description | 描述信息 | `string\|slot` | - |
+| isOpen | 弹窗打开状态 | `boolean` | `false` |
+| loading | 弹窗加载状态 | `boolean` | `false` |
+| closable | 显示关闭按钮 | `boolean` | `true` |
+| modal | 显示遮罩 | `boolean` | `true` |
+| header | 显示header | `boolean` | `true` |
+| footer | 显示footer | `boolean\|slot` | `true` |
+| confirmLoading | 确认按钮loading状态 | `boolean` | `false` |
+| closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` |
+| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` |
+| confirmText | 确认按钮文本 | `string\|slot` | `确认` |
+| cancelText | 取消按钮文本 | `string\|slot` | `取消` |
+| class | modal的class，宽度通过这个配置 | `string` | - |
+| contentClass | modal内容区域的class | `string` | - |
+| footerClass | modal底部区域的class | `string` | - |
+| headerClass | modal顶部区域的class | `string` | - |
+
+### Event
+
+以下事件，只有在 `useVbenDrawer({onCancel:()=>{}})` 中传入才会生效。
+
+| 事件名 | 描述 | 类型 |
+| --- | --- | --- |
+| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` |
+| onCancel | 点击取消按钮触发 | `()=>void` |
+| onConfirm | 点击确认按钮触发 | `()=>void` |
+| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` |
+
+### Slots
+
+除了上面的属性类型包含`slot`，还可以通过插槽来自定义弹窗的内容。
+
+| 插槽名         | 描述                |
+| -------------- | ------------------- |
+| default        | 默认插槽 - 弹窗内容 |
+| prepend-footer | 取消按钮左侧        |
+| append-footer  | 取消按钮右侧        |
+
+### modalApi
+
+| 事件名 | 描述 | 类型 |
+| --- | --- | --- |
+| setState | 动态设置弹窗状态属性 | `setState(props) \| setState((prev)=>(props))` |
+| open | 打开弹窗 | `()=>void` |
+| close | 关闭弹窗 | `()=>void` |
+| setData | 设置共享数据 | `<T>(data:T)=>void` |
+| getData | 获取共享数据 | `<T>()=>T` |
+| useStore | 获取可响应式状态 | - |

docs/src/components/common-ui/vben-modal.md

@@ -0,0 +1,122 @@
+---
+outline: deep
+---
+
+# Vben Modal 模态框
+
+框架提供的模态框组件，支持`拖拽`、`全屏`、`自动高度`、`loading`等功能。
+
+## 基础用法
+
+使用 `useVbenModal` 创建最基础的模态框。
+
+<DemoPreview dir="demos/vben-modal/basic" />
+
+## 组件抽离
+
+Modal 内的内容一般业务中，会比较复杂，所以我们可以将 modal 内的内容抽离出来，也方便复用。通过 `connectedComponent` 参数，可以将内外组件进行连接，而不用其他任何操作。
+
+<DemoPreview dir="demos/vben-modal/extra" />
+
+## 开启拖拽
+
+通过 `draggable` 参数，可开启拖拽功能。
+
+<DemoPreview dir="demos/vben-modal/draggable" />
+
+## 自动计算高度
+
+弹窗会自动计算内容高度，超过一定高度会出现滚动条，同时结合 `loading` 效果以及使用 `prepend-footer` 插槽。
+
+<DemoPreview dir="demos/vben-modal/auto-height" />
+
+## 使用 Api
+
+通过 `modalApi` 可以调用 modal 的方法以及使用 `setState` 更新 modal 的状态。
+
+<DemoPreview dir="demos/vben-modal/dynamic" />
+
+## 数据共享
+
+如果你使用了 `connectedComponent` 参数，那么内外组件会共享数据，比如一些表单回填等操作。可以用 `modalApi` 来获取数据和设置数据，配合 `onOpenChange`，可以满足大部分的需求。
+
+<DemoPreview dir="demos/vben-modal/shared-data" />
+
+::: info 注意
+
+- `VbenModal` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenModal参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
+- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenModal`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onComfirm`，那么以内部的 `onComfirm` 为准。`onOpenChange`事件除外，内外都会触发。
+
+:::
+
+## API
+
+```ts
+// Modal 为弹窗组件
+// modalApi 为弹窗的方法
+const [Modal, modalApi] = useVbenModal({
+  // 属性
+  // 事件
+});
+```
+
+### Props
+
+所有属性都可以传入 `useVbenModal` 的第一个参数中。
+
+| 属性名 | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标题 | `string\|slot` | - |
+| titleTooltip | 标题提示信息 | `string\|slot` | - |
+| description | 描述信息 | `string\|slot` | - |
+| isOpen | 弹窗打开状态 | `boolean` | `false` |
+| loading | 弹窗加载状态 | `boolean` | `false` |
+| fullscreen | 全屏显示 | `boolean` | `false` |
+| fullscreenButton | 显示全屏按钮 | `boolean` | `true` |
+| draggable | 可拖拽 | `boolean` | `false` |
+| closable | 显示关闭按钮 | `boolean` | `true` |
+| centered | 居中显示 | `boolean` | `false` |
+| modal | 显示遮罩 | `boolean` | `true` |
+| header | 显示header | `boolean` | `true` |
+| footer | 显示footer | `boolean\|slot` | `true` |
+| confirmLoading | 确认按钮loading状态 | `boolean` | `false` |
+| closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` |
+| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` |
+| confirmText | 确认按钮文本 | `string\|slot` | `确认` |
+| cancelText | 取消按钮文本 | `string\|slot` | `取消` |
+| class | modal的class，宽度通过这个配置 | `string` | - |
+| contentClass | modal内容区域的class | `string` | - |
+| footerClass | modal底部区域的class | `string` | - |
+| headerClass | modal顶部区域的class | `string` | - |
+
+### Event
+
+以下事件，只有在 `useVbenModal({onCancel:()=>{}})` 中传入才会生效。
+
+| 事件名 | 描述 | 类型 |
+| --- | --- | --- |
+| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` |
+| onCancel | 点击取消按钮触发 | `()=>void` |
+| onConfirm | 点击确认按钮触发 | `()=>void` |
+| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` |
+
+### Slots
+
+除了上面的属性类型包含`slot`，还可以通过插槽来自定义弹窗的内容。
+
+| 插槽名         | 描述                |
+| -------------- | ------------------- |
+| default        | 默认插槽 - 弹窗内容 |
+| prepend-footer | 取消按钮左侧        |
+| append-footer  | 取消按钮右侧        |
+
+### modalApi
+
+| 事件名 | 描述 | 类型 |
+| --- | --- | --- |
+| setState | 动态设置弹窗状态属性 | `setState(props) \| setState((prev)=>(props))` |
+| open | 打开弹窗 | `()=>void` |
+| close | 关闭弹窗 | `()=>void` |
+| setData | 设置共享数据 | `<T>(data:T)=>void` |
+| getData | 获取共享数据 | `<T>()=>T` |
+| useStore | 获取可响应式状态 | - |

docs/src/components/introduction.md

@@ -0,0 +1,11 @@
+# 介绍
+
+::: info README
+
+该文档介绍的是框架组件的使用方法、属性、事件等。如果你觉得组件封装的不好，或者不符合你的需求，你可以直接使用原生的组件，或者自己封装一个组件，不需要拘泥于框架提供的组件。我们只是提供了一些常用的组件，方便你快速开发。是否使用，取决于你的需求。
+
+:::
+
+## 通用组件
+
+通用组件是一些常用的组件，比如弹窗、抽屉、表单等。大部分基于 `Tailwind CSS` 实现，可适用于不同 UI 组件库的应用。

docs/src/demos/vben-drawer/auto-height/drawer.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenDrawer, VbenButton } from '@vben/common-ui';
+
+const list = ref<number[]>([]);
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    console.log('onConfirm');
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      handleUpdate(10);
+    }
+  },
+});
+
+function handleUpdate(len: number) {
+  drawerApi.setState({ loading: true });
+  setTimeout(() => {
+    list.value = Array.from({ length: len }, (_v, k) => k + 1);
+    drawerApi.setState({ loading: false });
+  }, 2000);
+}
+</script>
+<template>
+  <Drawer title="自动计算高度">
+    <div
+      v-for="item in list"
+      :key="item"
+      class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
+    >
+      {{ item }}
+    </div>
+    <template #prepend-footer>
+      <VbenButton type="link" @click="handleUpdate(6)">
+        点击更新数据
+      </VbenButton>
+    </template>
+  </Drawer>
+</template>

docs/src/demos/vben-drawer/auto-height/index.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useVbenDrawer, VbenButton } from '@vben/common-ui';
+
+import ExtraDrawer from './drawer.vue';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  // 连接抽离的组件
+  connectedComponent: ExtraDrawer,
+});
+
+function open() {
+  drawerApi.open();
+}
+</script>
+
+<template>
+  <div>
+    <Drawer />
+    <VbenButton @click="open">Open</VbenButton>
+  </div>
+</template>