chore: release v5.1.0 [skip ci]

* feat: support custom background colors for sidebar and header

* fix: type error

.github/contributing.md

@@ -1,5 +1,42 @@
-# Contributing Guide
+# Vben Admin Contributing Guide
 
-1. Make sure you put things in the right category!
-2. Always add your items to the end of a list. To be fair, the order is first-come-first-serve.
-3. If you think something belongs in the wrong category, or think there needs to be a new category, feel free to edit things too.
+Hi! We're really excited that you are interested in contributing to Vben Admin. Before submitting your contribution, please make sure to take a moment and read through the following guidelines:
+
+- [Pull Request Guidelines](#pull-request-guidelines)
+
+## Contributor Code of Conduct
+
+As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free experience for everyone, regardless of the level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.
+
+Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
+
+## Pull Request Guidelines
+
+- Checkout a topic branch from the relevant branch, e.g. main, and merge back against that branch.
+
+- If adding a new feature:
+
+  - Provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first and have it approved before working on it.
+
+- If fixing bug:
+
+  - Provide a detailed description of the bug in the PR. Live demo preferred.
+
+- It's OK to have multiple small commits as you work on the PR - GitHub can automatically squash them before merging.
+
+## Development Setup
+
+You will need [pnpm](https://pnpm.io/)
+
+After cloning the repo, run:
+
+```bash
+# install the dependencies of the project
+$ pnpm install
+# start the project
+$ pnpm run dev
+```

.github/release-drafter.yml

@@ -17,14 +17,17 @@ categories:
   - title: "🐞 Bug Fixes"
     labels:
       - "bug"
-  - title: 📝 Documentation updates
+  - title: "📈 Performance"
+    labels:
+      - "perf"
+  - title: 📝 Documentation
     labels:
       - "documentation"
   - title: 👻 Maintenance
     labels:
       - "chore"
       - "dependencies"
-    collapse-after: 5
+    # collapse-after: 12
   - title: 🚦 Tests
     labels:
       - "tests"
@@ -34,12 +37,15 @@ categories:
 version-resolver:
   major:
     labels:
+      - "major"
       - "breaking"
   minor:
     labels:
+      - "minor"
       - "feature"
   patch:
     labels:
+      - "patch"
       - "bug"
       - "maintenance"
       - "docs"

.github/workflows/deploy.yml

@@ -6,8 +6,47 @@ on:
       - main
 
 jobs:
-  deploy-push-ftp:
-    name: Deploy Push Ftp
+  deploy-push-playground-ftp:
+    name: Deploy Push Playground 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: Sed Config Base
+        shell: bash
+        run: |
+          sed -i  "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./playground/.env.production
+          sed -i  "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./playground/.env.production
+          cat ./playground/.env.production
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Sync Playground files
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        with:
+          server: ${{ secrets.PRO_FTP_HOST }}
+          username: ${{ secrets.WEB_PLAYGROUND_FTP_ACCOUNT }}
+          password: ${{ secrets.WEB_PLAYGROUND_FTP_PWSSWORD }}
+          local-dir: ./playground/dist/
+
+      - name: Sync Docs files
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        with:
+          server: ${{ secrets.PRO_FTP_HOST }}
+          username: ${{ secrets.WEBSITE_FTP_ACCOUNT }}
+          password: ${{ secrets.WEBSITE_FTP_PASSWORD }}
+          local-dir: ./docs/.vitepress/dist/
+
+  deploy-push-antd-ftp:
+    name: Deploy Push Antd Ftp
     if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ubuntu-latest
     steps:
@@ -22,9 +61,65 @@ jobs:
           sed -i  "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./apps/web-antd/.env.production
           sed -i  "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./apps/web-antd/.env.production
           cat ./apps/web-antd/.env.production
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Sync files
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        with:
+          server: ${{ secrets.PRO_FTP_HOST }}
+          username: ${{ secrets.WEB_ANTD_FTP_ACCOUNT }}
+          password: ${{ secrets.WEB_ANTD_FTP_PASSWORD }}
+          local-dir: ./apps/web-antd/dist/
+
+  deploy-push-ele-ftp:
+    name: Deploy Push Element 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: Sed Config Base
+        shell: bash
+        run: |
           sed -i  "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./apps/web-ele/.env.production
           sed -i  "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./apps/web-ele/.env.production
           cat ./apps/web-ele/.env.production
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Sync files
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        with:
+          server: ${{ secrets.PRO_FTP_HOST }}
+          username: ${{ secrets.WEB_ELE_FTP_ACCOUNT }}
+          password: ${{ secrets.WEB_ELE_FTP_PASSWORD }}
+          local-dir: ./apps/web-ele/dist/
+
+  deploy-push-naive-ftp:
+    name: Deploy Push Naive 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: Sed Config Base
+        shell: bash
+        run: |
           sed -i  "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./apps/web-naive/.env.production
           sed -i  "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./apps/web-naive/.env.production
           cat ./apps/web-naive/.env.production
@@ -35,34 +130,10 @@ jobs:
       - name: Build
         run: pnpm run build
 
-      - name: Sync Web Antd files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
-        with:
-          server: ${{ secrets.PRO_FTP_HOST }}
-          username: ${{ secrets.WEB_ANTD_FTP_ACCOUNT }}
-          password: ${{ secrets.WEB_ANTD_FTP_PASSWORD }}
-          local-dir: ./apps/web-antd/dist/
-
-      - name: Sync Web Naive files
+      - name: Sync files
         uses: SamKirkland/FTP-Deploy-Action@v4.3.5
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_NAIVE_FTP_ACCOUNT }}
           password: ${{ secrets.WEB_NAIVE_FTP_PASSWORD }}
           local-dir: ./apps/web-naive/dist/
-
-      - name: Sync Web Ele files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
-        with:
-          server: ${{ secrets.PRO_FTP_HOST }}
-          username: ${{ secrets.WEB_ELE_FTP_ACCOUNT }}
-          password: ${{ secrets.WEB_ELE_FTP_PASSWORD }}
-          local-dir: ./apps/web-ele/dist/
-
-      - name: Sync Docs files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
-        with:
-          server: ${{ secrets.PRO_FTP_HOST }}
-          username: ${{ secrets.WEBSITE_FTP_ACCOUNT }}
-          password: ${{ secrets.WEBSITE_FTP_PASSWORD }}
-          local-dir: ./docs/.vitepress/dist/

.vscode/extensions.json

@@ -10,10 +10,6 @@
     "esbenp.prettier-vscode",
     // 支持 dotenv 文件语法
     "mikestead.dotenv",
-    // 获取每个 CSS 属性的初始值。
-    "dzhavat.css-initial-value",
-    // 使 VSCode 中的 TypeScript 错误更漂亮、更易于理解
-    "yoavbls.pretty-ts-errors",
     // 源代码的拼写检查器
     "streetsidesoftware.code-spell-checker",
     // Tailwind CSS 的官方 VS Code 插件

.vscode/launch.json

@@ -4,18 +4,27 @@
   "configurations": [
     {
       "type": "chrome",
-      "name": "vben admin antd dev",
+      "name": "vben admin playground dev",
       "request": "launch",
       "url": "http://localhost:5555",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
+      "webRoot": "${workspaceFolder}/playground/src"
+    },
+    {
+      "type": "chrome",
+      "name": "vben admin antd dev",
+      "request": "launch",
+      "url": "http://localhost:5666",
+      "env": { "NODE_ENV": "development" },
+      "sourceMaps": true,
       "webRoot": "${workspaceFolder}/apps/web-antd/src"
     },
     {
       "type": "chrome",
       "name": "vben admin ele dev",
       "request": "launch",
-      "url": "http://localhost:5666",
+      "url": "http://localhost:5777",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
       "webRoot": "${workspaceFolder}/apps/web-ele/src"
@@ -24,7 +33,7 @@
       "type": "chrome",
       "name": "vben admin naive dev",
       "request": "launch",
-      "url": "http://localhost:5777",
+      "url": "http://localhost:5888",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
       "webRoot": "${workspaceFolder}/apps/web-naive/src"

.vscode/settings.json

@@ -167,6 +167,7 @@
 
   "i18n-ally.localesPaths": [
     "packages/locales/src/langs",
+    "playground/src/langs",
     "apps/*/src/locales/langs"
   ],
   "i18n-ally.enabledParsers": ["json", "ts", "js", "yaml"],
@@ -183,7 +184,7 @@
     "*.env": "$(capture).env.*",
     "README.md": "README*,CHANGELOG*,LICENSE,CNAME",
     "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json",
-    "Dockerfile": "Dockerfile,.docker*,docker-entrypoint.sh,build-local-docker*",
+    "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",
     "tailwind.config.mjs": "postcss.*"
   },
@@ -191,5 +192,6 @@
   "i18n-ally.keystyle": "nested",
   "commentTranslate.multiLineMerge": true,
   "vue.server.hybridMode": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vitest.disableWorkspaceWarning": true
 }

Dockerfile

@@ -21,9 +21,9 @@ RUN echo "Builder Success 🎉"
 FROM nginx:stable-alpine as production
 
 RUN echo "types { application/javascript js mjs; }" > /etc/nginx/conf.d/mjs.conf
-COPY --from=builder /app/apps/web-antd/dist /usr/share/nginx/html
+COPY --from=builder /app/playground/dist /usr/share/nginx/html
 
-COPY ./deploy/nginx.conf /etc/nginx/nginx.conf
+COPY ./nginx.conf /etc/nginx/nginx.conf
 
 EXPOSE 8080
 

README.ja-JP.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -127,14 +127,15 @@ pnpm build
 
 このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます！
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.5/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 
 ## 貢献者
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=vbenjs/vue-vben-admin" />
+ <img alt="Contributors"
+        src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
 </a>
 
 ## Discord

README.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -126,14 +126,15 @@ Support modern browsers, not IE
 
 If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.5/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 
 ## Contributor
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=vbenjs/vue-vben-admin" />
+  <img alt="Contributors"
+        src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
 </a>
 
 ## Discord

README.zh-CN.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -122,10 +122,17 @@ pnpm build
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.5/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 
+## Contributor
+
+<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
+  <img alt="Contributors"
+        src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
+</a>
+
 ## Discord
 
 - [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)

apps/backend-mock/README.md

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

apps/web-antd/.env

@@ -1,5 +1,5 @@
 # 应用标题
-VITE_APP_TITLE=Vben Admin
+VITE_APP_TITLE=Vben Admin Antd
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-antd

apps/web-antd/.env.development

@@ -1,5 +1,5 @@
 # 端口号
-VITE_PORT=5555
+VITE_PORT=5666
 
 VITE_BASE=/
 

apps/web-antd/index.html

@@ -21,7 +21,7 @@
         (function () {
           var hm = document.createElement('script');
           hm.src =
-            'https://hm.baidu.com/hm.js?d20a01273820422b6aa2ee41b6c9414d';
+            'https://hm.baidu.com/hm.js?b38e689f40558f20a9a686d7f6f33edf';
           var s = document.getElementsByTagName('script')[0];
           s.parentNode.insertBefore(hm, s);
         })();

apps/web-antd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -40,11 +40,11 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^10.11.1",
     "ant-design-vue": "^4.2.3",
     "dayjs": "^1.11.12",
-    "pinia": "2.2.0",
-    "vue": "^3.4.36",
+    "pinia": "2.2.1",
+    "vue": "^3.4.37",
     "vue-router": "^4.4.3"
   }
 }

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

@@ -1,2 +1 @@
 export * from './core';
-export * from './demos';

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

@@ -59,7 +59,7 @@ function createRequestClient(baseURL: string) {
     if (status >= 200 && status < 400 && code === 0) {
       return data;
     }
-    throw new Error(msg);
+    throw new Error(`Error ${status}: ${msg}`);
   });
   return client;
 }

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

@@ -58,7 +58,11 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
       locale = await import('dayjs/locale/en');
     }
   }
-  dayjs.locale(locale);
+  if (locale) {
+    dayjs.locale(locale);
+  } else {
+    console.error(`Failed to load dayjs locale for ${lang}`);
+  }
 }
 
 /**

apps/web-antd/src/locales/langs/en-US.json

@@ -2,58 +2,7 @@
   "page": {
     "demos": {
       "title": "Demos",
-      "access": {
-        "frontendPermissions": "Frontend Permissions",
-        "backendPermissions": "Backend Permissions",
-        "pageAccess": "Page Access",
-        "buttonControl": "Button Control",
-        "menuVisible403": "Menu Visible(403)",
-        "superVisible": "Visible to Super",
-        "adminVisible": "Visible to Admin",
-        "userVisible": "Visible to User"
-      },
-      "nested": {
-        "title": "Nested Menu",
-        "menu1": "Menu 1",
-        "menu2": "Menu 2",
-        "menu2_1": "Menu 2-1",
-        "menu3": "Menu 3",
-        "menu3_1": "Menu 3-1",
-        "menu3_2": "Menu 3-2",
-        "menu3_2_1": "Menu 3-2-1"
-      },
-      "outside": {
-        "title": "External Pages",
-        "embedded": "Embedded",
-        "externalLink": "External Link"
-      },
-      "badge": {
-        "title": "Menu Badge",
-        "dot": "Dot Badge",
-        "text": "Text Badge",
-        "color": "Badge Color"
-      },
-      "activeIcon": {
-        "title": "Active Menu Icon",
-        "children": "Children Active Icon"
-      },
-      "fallback": { "title": "Fallback Page" },
-      "features": {
-        "title": "Features",
-        "hideChildrenInMenu": "Hide Menu Children",
-        "loginExpired": "Login Expired",
-        "icons": "Icons",
-        "watermark": "Watermark",
-        "tabs": "Tabs",
-        "tabDetail": "Tab Detail Page"
-      },
-      "breadcrumb": {
-        "navigation": "Breadcrumb Navigation",
-        "lateral": "Lateral Mode",
-        "lateralDetail": "Lateral Mode Detail",
-        "level": "Level Mode",
-        "levelDetail": "Level Mode Detail"
-      }
+      "antd": "Ant Design Vue"
     }
   }
 }

apps/web-antd/src/locales/langs/zh-CN.json

@@ -2,60 +2,7 @@
   "page": {
     "demos": {
       "title": "演示",
-      "access": {
-        "frontendPermissions": "前端权限",
-        "backendPermissions": "后端权限",
-        "pageAccess": "页面访问",
-        "buttonControl": "按钮控制",
-        "menuVisible403": "菜单可见(403)",
-        "superVisible": "Super 可见",
-        "adminVisible": "Admin 可见",
-        "userVisible": "User 可见"
-      },
-      "nested": {
-        "title": "嵌套菜单",
-        "menu1": "菜单 1",
-        "menu2": "菜单 2",
-        "menu2_1": "菜单 2-1",
-        "menu3": "菜单 3",
-        "menu3_1": "菜单 3-1",
-        "menu3_2": "菜单 3-2",
-        "menu3_2_1": "菜单 3-2-1"
-      },
-      "outside": {
-        "title": "外部页面",
-        "embedded": "内嵌",
-        "externalLink": "外链"
-      },
-      "badge": {
-        "title": "菜单徽标",
-        "dot": "点徽标",
-        "text": "文本徽标",
-        "color": "徽标颜色"
-      },
-      "activeIcon": {
-        "title": "菜单激活图标",
-        "children": "子级激活图标"
-      },
-      "fallback": {
-        "title": "缺省页"
-      },
-      "features": {
-        "title": "功能",
-        "hideChildrenInMenu": "隐藏子菜单",
-        "loginExpired": "登录过期",
-        "icons": "图标",
-        "watermark": "水印",
-        "tabs": "标签页",
-        "tabDetail": "标签详情页"
-      },
-      "breadcrumb": {
-        "navigation": "面包屑导航",
-        "lateral": "平级模式",
-        "level": "层级模式",
-        "levelDetail": "层级模式详情",
-        "lateralDetail": "平级模式详情"
-      }
+      "antd": "Ant Design Vue"
     }
   }
 }

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

@@ -115,10 +115,10 @@ function setupAccessGuard(router: Router) {
     // 保存菜单信息和路由信息
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
-    const redirectPath = (from.query.redirect ?? to.path) as string;
+    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
     return {
-      path: decodeURIComponent(redirectPath),
+      ...router.resolve(decodeURIComponent(redirectPath)),
       replace: true,
     };
   });

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

@@ -9,19 +9,19 @@ const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
 });
 
 // 有需要可以自行打开注释，并创建文件夹
-// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
 
 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 
-/** 静态路由列表，访问这些页面可以不需要权限 */
-// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
-const staticRoutes: RouteRecordRaw[] = [];
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统 */
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
+const externalRoutes: RouteRecordRaw[] = [];
 
 /** 路由列表，由基本路由+静态路由组成 */
 const routes: RouteRecordRaw[] = [
   ...coreRoutes,
-  ...staticRoutes,
+  ...externalRoutes,
   fallbackNotFoundRoute,
 ];
 

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

@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout, IFrameView } from '#/layouts';
+import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
@@ -15,477 +15,13 @@ const routes: RouteRecordRaw[] = [
     name: 'Demos',
     path: '/demos',
     children: [
-      // 权限控制
       {
         meta: {
-          icon: 'mdi:shield-key-outline',
-          title: $t('page.demos.access.frontendPermissions'),
+          title: $t('page.demos.antd'),
         },
-        name: 'AccessDemos',
-        path: '/demos/access',
-        children: [
-          {
-            name: 'AccessPageControlDemo',
-            path: '/demos/access/page-control',
-            component: () => import('#/views/demos/access/index.vue'),
-            meta: {
-              icon: 'mdi:page-previous-outline',
-              title: $t('page.demos.access.pageAccess'),
-            },
-          },
-          {
-            name: 'AccessButtonControlDemo',
-            path: '/demos/access/button-control',
-            component: () => import('#/views/demos/access/button-control.vue'),
-            meta: {
-              icon: 'mdi:button-cursor',
-              title: $t('page.demos.access.buttonControl'),
-            },
-          },
-          {
-            name: 'AccessMenuVisible403Demo',
-            path: '/demos/access/menu-visible-403',
-            component: () =>
-              import('#/views/demos/access/menu-visible-403.vue'),
-            meta: {
-              authority: ['no-body'],
-              icon: 'mdi:button-cursor',
-              menuVisibleWithForbidden: true,
-              title: $t('page.demos.access.menuVisible403'),
-            },
-          },
-          {
-            name: 'AccessSuperVisibleDemo',
-            path: '/demos/access/super-visible',
-            component: () => import('#/views/demos/access/super-visible.vue'),
-            meta: {
-              authority: ['super'],
-              icon: 'mdi:button-cursor',
-              title: $t('page.demos.access.superVisible'),
-            },
-          },
-          {
-            name: 'AccessAdminVisibleDemo',
-            path: '/demos/access/admin-visible',
-            component: () => import('#/views/demos/access/admin-visible.vue'),
-            meta: {
-              authority: ['admin'],
-              icon: 'mdi:button-cursor',
-              title: $t('page.demos.access.adminVisible'),
-            },
-          },
-          {
-            name: 'AccessUserVisibleDemo',
-            path: '/demos/access/user-visible',
-            component: () => import('#/views/demos/access/user-visible.vue'),
-            meta: {
-              authority: ['user'],
-              icon: 'mdi:button-cursor',
-              title: $t('page.demos.access.userVisible'),
-            },
-          },
-        ],
-      },
-      // 功能
-      {
-        meta: {
-          icon: 'mdi:feature-highlight',
-          title: $t('page.demos.features.title'),
-        },
-        name: 'FeaturesDemos',
-        path: '/demos/features',
-        children: [
-          {
-            name: 'LoginExpiredDemo',
-            path: '/demos/features/login-expired',
-            component: () =>
-              import('#/views/demos/features/login-expired/index.vue'),
-            meta: {
-              icon: 'mdi:encryption-expiration',
-              title: $t('page.demos.features.loginExpired'),
-            },
-          },
-          {
-            name: 'IconsDemo',
-            path: '/demos/features/icons',
-            component: () => import('#/views/demos/features/icons/index.vue'),
-            meta: {
-              title: $t('page.demos.features.icons'),
-            },
-          },
-          {
-            name: 'WatermarkDemo',
-            path: '/demos/features/watermark',
-            component: () =>
-              import('#/views/demos/features/watermark/index.vue'),
-            meta: {
-              title: $t('page.demos.features.watermark'),
-            },
-          },
-          {
-            name: 'FeatureTabsDemo',
-            path: '/demos/features/tabs',
-            component: () => import('#/views/demos/features/tabs/index.vue'),
-            meta: {
-              icon: 'lucide:app-window',
-              title: $t('page.demos.features.tabs'),
-            },
-          },
-          {
-            name: 'FeatureTabDetailDemo',
-            path: '/demos/features/tabs/detail/:id',
-            component: () =>
-              import('#/views/demos/features/tabs/tab-detail.vue'),
-            meta: {
-              activePath: '/demos/features/tabs',
-              hideInMenu: true,
-              maxNumOfOpenTab: 3,
-              title: $t('page.demos.features.tabDetail'),
-            },
-          },
-          {
-            name: 'HideChildrenInMenuParentDemo',
-            path: '/demos/features/hide-menu-children',
-            component: () =>
-              import('#/views/demos/features/hide-menu-children/parent.vue'),
-            meta: {
-              hideChildrenInMenu: true,
-              icon: 'ic:round-menu',
-              title: $t('page.demos.features.hideChildrenInMenu'),
-            },
-            children: [
-              {
-                name: 'HideChildrenInMenuChildrenDemo',
-                path: '/demos/features/hide-menu-children/children',
-                component: () =>
-                  import(
-                    '#/views/demos/features/hide-menu-children/children.vue'
-                  ),
-                meta: { title: 'HideChildrenInMenuChildrenDemo' },
-              },
-            ],
-          },
-        ],
-      },
-      // 面包屑导航
-      {
-        name: 'BreadcrumbDemos',
-        path: '/demos/breadcrumb',
-        meta: {
-          icon: 'lucide:navigation',
-          title: $t('page.demos.breadcrumb.navigation'),
-        },
-        children: [
-          {
-            name: 'BreadcrumbLateralDemo',
-            path: '/demos/breadcrumb/lateral',
-            component: () => import('#/views/demos/breadcrumb/lateral.vue'),
-            meta: {
-              icon: 'lucide:navigation',
-              title: $t('page.demos.breadcrumb.lateral'),
-            },
-          },
-          {
-            name: 'BreadcrumbLateralDetailDemo',
-            path: '/demos/breadcrumb/lateral-detail',
-            component: () =>
-              import('#/views/demos/breadcrumb/lateral-detail.vue'),
-            meta: {
-              activePath: '/demos/breadcrumb/lateral',
-              hideInMenu: true,
-              title: $t('page.demos.breadcrumb.lateralDetail'),
-            },
-          },
-          {
-            name: 'BreadcrumbLevelDemo',
-            path: '/demos/breadcrumb/level',
-            meta: {
-              icon: 'lucide:navigation',
-              title: $t('page.demos.breadcrumb.level'),
-            },
-            children: [
-              {
-                name: 'BreadcrumbLevelDetailDemo',
-                path: '/demos/breadcrumb/level/detail',
-                component: () =>
-                  import('#/views/demos/breadcrumb/level-detail.vue'),
-                meta: {
-                  title: $t('page.demos.breadcrumb.levelDetail'),
-                },
-              },
-            ],
-          },
-        ],
-      },
-      // 缺省页
-      {
-        meta: {
-          icon: 'mdi:lightbulb-error-outline',
-          title: $t('page.demos.fallback.title'),
-        },
-        name: 'FallbackDemos',
-        path: '/demos/fallback',
-        children: [
-          {
-            name: 'Fallback403Demo',
-            path: '/demos/fallback/403',
-            component: () => import('#/views/_core/fallback/forbidden.vue'),
-            meta: {
-              icon: 'mdi:do-not-disturb-alt',
-              title: '403',
-            },
-          },
-          {
-            name: 'Fallback404Demo',
-            path: '/demos/fallback/404',
-            component: () => import('#/views/_core/fallback/not-found.vue'),
-            meta: {
-              icon: 'mdi:table-off',
-              title: '404',
-            },
-          },
-          {
-            name: 'Fallback500Demo',
-            path: '/demos/fallback/500',
-            component: () =>
-              import('#/views/_core/fallback/internal-error.vue'),
-            meta: {
-              icon: 'mdi:server-network-off',
-              title: '500',
-            },
-          },
-          {
-            name: 'FallbackOfflineDemo',
-            path: '/demos/fallback/offline',
-            component: () => import('#/views/_core/fallback/offline.vue'),
-            meta: {
-              icon: 'mdi:offline',
-              title: $t('fallback.offline'),
-            },
-          },
-        ],
-      },
-      // 菜单徽标
-      {
-        meta: {
-          badgeType: 'dot',
-          badgeVariants: 'destructive',
-          icon: 'lucide:circle-dot',
-          title: $t('page.demos.badge.title'),
-        },
-        name: 'BadgeDemos',
-        path: '/demos/badge',
-        children: [
-          {
-            name: 'BadgeDotDemo',
-            component: () => import('#/views/demos/badge/index.vue'),
-            path: '/demos/badge/dot',
-            meta: {
-              badgeType: 'dot',
-              icon: 'lucide:square-dot',
-              title: $t('page.demos.badge.dot'),
-            },
-          },
-          {
-            name: 'BadgeTextDemo',
-            component: () => import('#/views/demos/badge/index.vue'),
-            path: '/demos/badge/text',
-            meta: {
-              badge: '10',
-              icon: 'lucide:square-dot',
-              title: $t('page.demos.badge.text'),
-            },
-          },
-          {
-            name: 'BadgeColorDemo',
-            component: () => import('#/views/demos/badge/index.vue'),
-            path: '/demos/badge/color',
-            meta: {
-              badge: 'Hot',
-              badgeVariants: 'destructive',
-              icon: 'lucide:square-dot',
-              title: $t('page.demos.badge.color'),
-            },
-          },
-        ],
-      },
-      // 菜单激活图标
-      {
-        meta: {
-          activeIcon: 'fluent-emoji:radioactive',
-          icon: 'bi:radioactive',
-          title: $t('page.demos.activeIcon.title'),
-        },
-        name: 'ActiveIconDemos',
-        path: '/demos/active-icon',
-        children: [
-          {
-            name: 'ActiveIconDemo',
-            component: () => import('#/views/demos/active-icon/index.vue'),
-            path: '/demos/active-icon/children',
-            meta: {
-              activeIcon: 'fluent-emoji:radioactive',
-              icon: 'bi:radioactive',
-              title: $t('page.demos.activeIcon.children'),
-            },
-          },
-        ],
-      },
-      // 外部链接
-      {
-        meta: {
-          icon: 'ic:round-settings-input-composite',
-          title: $t('page.demos.outside.title'),
-        },
-        name: 'OutsideDemos',
-        path: '/demos/outside',
-        children: [
-          {
-            name: 'IframeDemos',
-            path: '/demos/outside/iframe',
-            meta: {
-              icon: 'mdi:newspaper-variant-outline',
-              title: $t('page.demos.outside.embedded'),
-            },
-            children: [
-              {
-                name: 'VueDocumentDemo',
-                path: '/demos/outside/iframe/vue-document',
-                component: IFrameView,
-                meta: {
-                  icon: 'logos:vue',
-                  iframeSrc: 'https://cn.vuejs.org/',
-                  keepAlive: true,
-                  title: 'Vue',
-                },
-              },
-              {
-                name: 'TailwindcssDemo',
-                path: '/demos/outside/iframe/tailwindcss',
-                component: IFrameView,
-                meta: {
-                  icon: 'devicon:tailwindcss',
-                  iframeSrc: 'https://tailwindcss.com/',
-                  // keepAlive: true,
-                  title: 'Tailwindcss',
-                },
-              },
-            ],
-          },
-          {
-            name: 'ExternalLinkDemos',
-            path: '/demos/outside/external-link',
-            meta: {
-              icon: 'mdi:newspaper-variant-multiple-outline',
-              title: $t('page.demos.outside.externalLink'),
-            },
-            children: [
-              {
-                name: 'ViteDemo',
-                path: '/demos/outside/external-link/vite',
-                component: IFrameView,
-                meta: {
-                  icon: 'logos:vitejs',
-                  link: 'https://vitejs.dev/',
-                  title: 'Vite',
-                },
-              },
-              {
-                name: 'VueUseDemo',
-                path: '/demos/outside/external-link/vue-use',
-                component: IFrameView,
-                meta: {
-                  icon: 'logos:vueuse',
-                  link: 'https://vueuse.org',
-                  title: 'VueUse',
-                },
-              },
-            ],
-          },
-        ],
-      },
-      // 嵌套菜单
-      {
-        meta: {
-          icon: 'ic:round-menu',
-          title: $t('page.demos.nested.title'),
-        },
-        name: 'NestedDemos',
-        path: '/demos/nested',
-        children: [
-          {
-            name: 'Menu1Demo',
-            path: '/demos/nested/menu1',
-            component: () => import('#/views/demos/nested/menu-1.vue'),
-            meta: {
-              icon: 'ic:round-menu',
-              keepAlive: true,
-              title: $t('page.demos.nested.menu1'),
-            },
-          },
-          {
-            name: 'Menu2Demo',
-            path: '/demos/nested/menu2',
-            meta: {
-              icon: 'ic:round-menu',
-              keepAlive: true,
-              title: $t('page.demos.nested.menu2'),
-            },
-            children: [
-              {
-                name: 'Menu21Demo',
-                path: '/demos/nested/menu2/menu2-1',
-                component: () => import('#/views/demos/nested/menu-2-1.vue'),
-                meta: {
-                  icon: 'ic:round-menu',
-                  keepAlive: true,
-                  title: $t('page.demos.nested.menu2_1'),
-                },
-              },
-            ],
-          },
-          {
-            name: 'Menu3Demo',
-            path: '/demos/nested/menu3',
-            meta: {
-              icon: 'ic:round-menu',
-              title: $t('page.demos.nested.menu3'),
-            },
-            children: [
-              {
-                name: 'Menu31Demo',
-                path: 'menu3-1',
-                component: () => import('#/views/demos/nested/menu-3-1.vue'),
-                meta: {
-                  icon: 'ic:round-menu',
-                  keepAlive: true,
-                  title: $t('page.demos.nested.menu3_1'),
-                },
-              },
-              {
-                name: 'Menu32Demo',
-                path: 'menu3-2',
-                meta: {
-                  icon: 'ic:round-menu',
-                  title: $t('page.demos.nested.menu3_2'),
-                },
-                children: [
-                  {
-                    name: 'Menu321Demo',
-                    path: '/demos/nested/menu3/menu3-2/menu3-2-1',
-                    component: () =>
-                      import('#/views/demos/nested/menu-3-2-1.vue'),
-                    meta: {
-                      icon: 'ic:round-menu',
-                      keepAlive: true,
-                      title: $t('page.demos.nested.menu3_2_1'),
-                    },
-                  },
-                ],
-              },
-            ],
-          },
-        ],
+        name: 'AntDesignDemos',
+        path: '/demos/ant-design',
+        component: () => import('#/views/demos/antd/index.vue'),
       },
     ],
   },

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

@@ -38,8 +38,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
-          iframeSrc: VBEN_DOC_URL,
-          keepAlive: true,
+          link: VBEN_DOC_URL,
           title: $t('page.vben.document'),
         },
       },

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

@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {

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

@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {

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

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { Button, Card, message, notification, Space } from 'ant-design-vue';
+
+type NotificationType = 'error' | 'info' | 'success' | 'warning';
+
+function info() {
+  message.info('How many roads must a man walk down');
+}
+
+function error() {
+  message.error({
+    content: 'Once upon a time you dressed so fine',
+    duration: 2500,
+  });
+}
+
+function warning() {
+  message.warning('How many roads must a man walk down');
+}
+function success() {
+  message.success('Cause you walked hand in hand With another man in my place');
+}
+
+function notify(type: NotificationType) {
+  notification[type]({
+    duration: 2500,
+    message: '说点啥呢',
+    type,
+  });
+}
+</script>
+
+<template>
+  <Page
+    description="支持多语言，主题功能集成切换等"
+    title="Ant Design Vue组件使用演示"
+  >
+    <Card title="按钮">
+      <Space>
+        <Button>Default</Button>
+        <Button type="primary"> Primary </Button>
+        <Button> Info </Button>
+        <Button danger> Error </Button>
+      </Space>
+    </Card>
+    <Card class="mb-5" title="Message">
+      <Space>
+        <Button @click="info"> 信息 </Button>
+        <Button danger @click="error"> 错误 </Button>
+        <Button @click="warning"> 警告 </Button>
+        <Button @click="success"> 成功 </Button>
+      </Space>
+    </Card>
+
+    <Card class="mb-5" title="Notification">
+      <Space>
+        <Button @click="notify('info')"> 信息 </Button>
+        <Button danger @click="notify('error')"> 错误 </Button>
+        <Button @click="notify('warning')"> 警告 </Button>
+        <Button @click="notify('success')"> 成功 </Button>
+      </Space>
+    </Card>
+  </Page>
+</template>

apps/web-ele/.env.development

@@ -1,5 +1,5 @@
 # 端口号
-VITE_PORT=5666
+VITE_PORT=5777
 
 VITE_BASE=/
 

apps/web-ele/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -40,11 +40,11 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^10.11.1",
     "dayjs": "^1.11.12",
-    "element-plus": "^2.7.8",
-    "pinia": "2.2.0",
-    "vue": "^3.4.36",
+    "element-plus": "^2.8.0",
+    "pinia": "2.2.1",
+    "vue": "^3.4.37",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {

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

@@ -59,7 +59,7 @@ function createRequestClient(baseURL: string) {
     if (status >= 200 && status < 400 && code === 0) {
       return data;
     }
-    throw new Error(msg);
+    throw new Error(`Error ${status}: ${msg}`);
   });
   return client;
 }

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

@@ -58,7 +58,11 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
       locale = await import('dayjs/locale/en');
     }
   }
-  dayjs.locale(locale);
+  if (locale) {
+    dayjs.locale(locale);
+  } else {
+    console.error(`Failed to load dayjs locale for ${lang}`);
+  }
 }
 
 /**

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

@@ -115,10 +115,10 @@ function setupAccessGuard(router: Router) {
     // 保存菜单信息和路由信息
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
-    const redirectPath = (from.query.redirect ?? to.path) as string;
+    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
     return {
-      path: decodeURIComponent(redirectPath),
+      ...router.resolve(decodeURIComponent(redirectPath)),
       replace: true,
     };
   });

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

@@ -9,19 +9,19 @@ const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
 });
 
 // 有需要可以自行打开注释，并创建文件夹
-// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
 
 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 
-/** 静态路由列表，访问这些页面可以不需要权限 */
-// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
-const staticRoutes: RouteRecordRaw[] = [];
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统 */
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
+const externalRoutes: RouteRecordRaw[] = [];
 
 /** 路由列表，由基本路由+静态路由组成 */
 const routes: RouteRecordRaw[] = [
   ...coreRoutes,
-  ...staticRoutes,
+  ...externalRoutes,
   fallbackNotFoundRoute,
 ];
 

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

@@ -17,7 +17,6 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         meta: {
-          icon: 'mdi:shield-key-outline',
           title: $t('page.demos.element-plus'),
         },
         name: 'NaiveDemos',

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

@@ -1,11 +1,11 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 import {
+  VBEN_ANT_PREVIEW_URL,
   VBEN_DOC_URL,
   VBEN_GITHUB_URL,
   VBEN_LOGO_URL,
   VBEN_NAIVE_PREVIEW_URL,
-  VBEN_PREVIEW_URL,
 } from '@vben/constants';
 
 import { BasicLayout, IFrameView } from '#/layouts';
@@ -38,8 +38,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
-          iframeSrc: VBEN_DOC_URL,
-          keepAlive: true,
+          link: VBEN_DOC_URL,
           title: $t('page.vben.document'),
         },
       },
@@ -69,7 +68,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
-          link: VBEN_PREVIEW_URL,
+          link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },
       },

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

@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {

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

@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {

apps/web-ele/src/views/demos/element/index.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
 import {
   ElButton,
   ElCard,
@@ -39,58 +41,38 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">Element Plus组件使用演示</h1>
-      <div class="text-foreground/80 mt-2">支持多语言，主题功能集成切换等</div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">按钮</span>
-      </div>
-      <div>
-        <ElSpace>
-          <ElButton>Default</ElButton>
-          <ElButton type="primary"> Primary </ElButton>
-          <ElButton type="info"> Info </ElButton>
-          <ElButton type="success"> Success </ElButton>
-          <ElButton type="warning"> Warning </ElButton>
-          <ElButton type="danger"> Error </ElButton>
-        </ElSpace>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">卡片</span>
-      </div>
-      <div>
-        <ElCard title="卡片"> 卡片内容 </ElCard>
-      </div>
-    </div>
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">信息 Message </span>
-      </div>
-      <div class="flex gap-3">
+  <Page
+    description="支持多语言，主题功能集成切换等"
+    title="Element Plus组件使用演示"
+  >
+    <ElCard class="mb-5">
+      <template #header> 按钮 </template>
+      <ElSpace>
+        <ElButton>Default</ElButton>
+        <ElButton type="primary"> Primary </ElButton>
+        <ElButton type="info"> Info </ElButton>
+        <ElButton type="success"> Success </ElButton>
+        <ElButton type="warning"> Warning </ElButton>
+        <ElButton type="danger"> Error </ElButton>
+      </ElSpace>
+    </ElCard>
+    <ElCard class="mb-5">
+      <template #header> Message </template>
+      <ElSpace>
         <ElButton type="info" @click="info"> 信息 </ElButton>
         <ElButton type="danger" @click="error"> 错误 </ElButton>
         <ElButton type="warning" @click="warning"> 警告 </ElButton>
         <ElButton type="success" @click="success"> 成功 </ElButton>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">通知 Notification </span>
-      </div>
-      <div class="flex gap-3">
+      </ElSpace>
+    </ElCard>
+    <ElCard class="mb-5">
+      <template #header> Notification </template>
+      <ElSpace>
         <ElButton type="info" @click="notify('info')"> 信息 </ElButton>
         <ElButton type="danger" @click="notify('error')"> 错误 </ElButton>
         <ElButton type="warning" @click="notify('warning')"> 警告 </ElButton>
         <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
-      </div>
-    </div>
-  </div>
+      </ElSpace>
+    </ElCard>
+  </Page>
 </template>

apps/web-naive/.env.development

@@ -1,5 +1,5 @@
 # 端口号
-VITE_PORT=5777
+VITE_PORT=5888
 
 VITE_BASE=/
 

apps/web-naive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -40,10 +40,10 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^10.11.1",
     "naive-ui": "^2.39.0",
-    "pinia": "2.2.0",
-    "vue": "^3.4.36",
+    "pinia": "2.2.1",
+    "vue": "^3.4.37",
     "vue-router": "^4.4.3"
   }
 }

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

@@ -58,7 +58,7 @@ function createRequestClient(baseURL: string) {
     if (status >= 200 && status < 400 && code === 0) {
       return data;
     }
-    throw new Error(msg);
+    throw new Error(`Error ${status}: ${msg}`);
   });
   return client;
 }

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

@@ -115,10 +115,10 @@ function setupAccessGuard(router: Router) {
     // 保存菜单信息和路由信息
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
-    const redirectPath = (from.query.redirect ?? to.path) as string;
+    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
     return {
-      path: decodeURIComponent(redirectPath),
+      ...router.resolve(decodeURIComponent(redirectPath)),
       replace: true,
     };
   });

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

@@ -9,19 +9,19 @@ const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
 });
 
 // 有需要可以自行打开注释，并创建文件夹
-// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
 
 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 
-/** 静态路由列表，访问这些页面可以不需要权限 */
-// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
-const staticRoutes: RouteRecordRaw[] = [];
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统 */
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
+const externalRoutes: RouteRecordRaw[] = [];
 
 /** 路由列表，由基本路由+静态路由组成 */
 const routes: RouteRecordRaw[] = [
   ...coreRoutes,
-  ...staticRoutes,
+  ...externalRoutes,
   fallbackNotFoundRoute,
 ];
 

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

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

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

@@ -1,11 +1,11 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 import {
+  VBEN_ANT_PREVIEW_URL,
   VBEN_DOC_URL,
   VBEN_ELE_PREVIEW_URL,
   VBEN_GITHUB_URL,
   VBEN_LOGO_URL,
-  VBEN_PREVIEW_URL,
 } from '@vben/constants';
 
 import { BasicLayout, IFrameView } from '#/layouts';
@@ -38,8 +38,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
-          iframeSrc: VBEN_DOC_URL,
-          keepAlive: true,
+          link: VBEN_DOC_URL,
           title: $t('page.vben.document'),
         },
       },
@@ -59,7 +58,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
-          link: VBEN_PREVIEW_URL,
+          link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },
       },

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

@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {

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

@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import type { NotificationType } from 'naive-ui';
+import { Page } from '@vben/common-ui';
 
+import { type NotificationType } from 'naive-ui';
 import { NButton, NCard, NSpace, useMessage, useNotification } from 'naive-ui';
 
 const notification = useNotification();
@@ -33,59 +34,35 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">naive组件使用演示</h1>
-      <div class="text-foreground/80 mt-2">支持多语言，主题功能集成切换等</div>
-    </div>
+  <Page description="支持多语言，主题功能集成切换等" title="naive组件使用演示">
+    <NCard class="mb-5" title="按钮">
+      <NSpace>
+        <NButton>Default</NButton>
+        <NButton type="tertiary"> Tertiary </NButton>
+        <NButton type="primary"> Primary </NButton>
+        <NButton type="info"> Info </NButton>
+        <NButton type="success"> Success </NButton>
+        <NButton type="warning"> Warning </NButton>
+        <NButton type="error"> Error </NButton>
+      </NSpace>
+    </NCard>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">按钮</span>
-      </div>
-      <div>
-        <NSpace>
-          <NButton>Default</NButton>
-          <NButton type="tertiary"> Tertiary </NButton>
-          <NButton type="primary"> Primary </NButton>
-          <NButton type="info"> Info </NButton>
-          <NButton type="success"> Success </NButton>
-          <NButton type="warning"> Warning </NButton>
-          <NButton type="error"> Error </NButton>
-        </NSpace>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">卡片</span>
-      </div>
-      <div>
-        <NCard title="卡片"> 卡片内容 </NCard>
-      </div>
-    </div>
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">信息 Message </span>
-      </div>
-      <div class="flex gap-3">
+    <NCard class="mb-5" title="Message">
+      <NSpace>
         <NButton type="error" @click="error"> 错误 </NButton>
         <NButton type="warning" @click="warning"> 警告 </NButton>
         <NButton type="success" @click="success"> 成功 </NButton>
         <NButton type="primary" @click="loading"> 加载中 </NButton>
-      </div>
-    </div>
+      </NSpace>
+    </NCard>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">通知 Notification </span>
-      </div>
-      <div class="flex gap-3">
+    <NCard class="mb-5" title="Notification">
+      <NSpace>
         <NButton type="error" @click="notify('error')"> 错误 </NButton>
         <NButton type="warning" @click="notify('warning')"> 警告 </NButton>
         <NButton type="success" @click="notify('success')"> 成功 </NButton>
         <NButton type="primary" @click="notify('info')"> 加载中 </NButton>
-      </div>
-    </div>
-  </div>
+      </NSpace>
+    </NCard>
+  </Page>
 </template>

apps/web-naive/src/views/demos/table/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+import { Page } from '@vben/common-ui';
+
 import { NDataTable } from 'naive-ui';
 
 const columns = ref([
@@ -25,7 +27,12 @@ const data = [
 </script>
 
 <template>
-  <NDataTable :columns="columns" :data="data" />
+  <Page
+    description="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。"
+    title="NDataTable"
+  >
+    <NDataTable :columns="columns" :data="data" />
+  </Page>
 </template>
 
 <style scoped></style>

docs/.vitepress/config.mts

@@ -50,7 +50,7 @@ export default withPwa(
         text: '最后更新于',
       },
       lightModeSwitchTitle: '切换到浅色模式',
-      logo: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp',
+      logo: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
       nav: nav(),
       outline: {
         label: '页面导航',
@@ -162,7 +162,11 @@ function nav(): DefaultTheme.NavItem[] {
           items: [
             {
               link: 'https://www.vben.pro',
-              text: 'Ant Design Vue 版本(默认)',
+              text: '演示版本',
+            },
+            {
+              link: 'https://ant.vben.pro',
+              text: 'Ant Design Vue 版本',
             },
             {
               link: 'https://naive.vben.pro',
@@ -250,6 +254,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
           text: '为什么选择我们?',
         },
         { link: 'introduction/quick-start', text: '快速开始' },
+        { link: 'introduction/thin', text: '精简版本' },
       ],
     },
     {
@@ -284,6 +289,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
       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' },
@@ -356,12 +362,12 @@ function pwa(): PwaOptions {
       icons: [
         {
           sizes: '192x192',
-          src: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/pwa-icon-192.png',
+          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.5/source/pwa-icon-512.png',
+          src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-512.png',
           type: 'image/png',
         },
       ],

docs/.vitepress/theme/components/vben-contributors.vue

@@ -4,7 +4,10 @@
   <div class="vp-doc vben-contributors">
     <p>Contributors</p>
     <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
-      <img src="https://contrib.rocks/image?repo=vbenjs/vue-vben-admin" />
+      <img
+        alt="Contributors"
+        src="https://opencollective.com/vbenjs/contributors.svg?button=false"
+      />
     </a>
   </div>
 </template>

docs/.vitepress/theme/plugins/hm.ts

@@ -23,6 +23,6 @@ function registerAnalytics() {
 
 export function initHmPlugin() {
   if (inBrowser && import.meta.env.PROD) {
-    registerAnalytics(SITE_ID);
+    registerAnalytics();
   }
 }

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "private": true,
   "scripts": {
     "build": "vitepress build",
@@ -13,6 +13,6 @@
   "devDependencies": {
     "@vite-pwa/vitepress": "^0.5.0",
     "vitepress": "^1.3.2",
-    "vue": "^3.4.36"
+    "vue": "^3.4.37"
   }
 }

docs/src/commercial/community.md

@@ -14,8 +14,8 @@
 
 :::
 
-作者主要通过微信群提供帮助，如果你有问题，可以通过以下方式加入微信群：
+作者主要通过微信群提供帮助，如果你有问题，可以通过以下方式加入微信群。
 
 通过微信联系作者，注明加群来意：
 
- <img src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/wechat.jpg" style="width: 300px;"/>
+<img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>

docs/src/commercial/customized.md

@@ -7,6 +7,6 @@
 - 通过邮箱联系开发者： [ann.vben@gmail.com](mailto:ann.vben@gmail.com)
 - 通过微信联系开发者：
 
- <img src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>
 
 我们会在第一时间回复您，定制费用根据需求而定。

docs/src/en/index.md

@@ -8,7 +8,7 @@ hero:
   text: 企业级管理系统框架
   tagline: 全新升级，开箱即用，简单高效
   image:
-    src: https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp
+    src: https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
     alt: Vben Admin
   actions:
     - theme: brand

docs/src/friend-links/index.md

@@ -9,7 +9,7 @@
 - 通过邮箱联系作者： [ann.vben@gmail.com](mailto:ann.vben@gmail.com)
 - 通过微信联系作者：
 
- <img src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>
 
 ### 提供资料
 
@@ -22,6 +22,6 @@
   - 名称：Vben Admin
   - 链接：https://www.vben.pro
   - 描述：Vben Admin 企业级开箱即用的中后台前端解决方案
-  - Logo：https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp
+  - Logo：https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
 
 我们将定期的检查友情链接，如果发现您的网站已经删除了我们的友情链接以及链接地址是否正确。

docs/src/guide/essentials/development.md

@@ -78,6 +78,8 @@ npm 脚本是项目常见的配置，用于执行一些常见的任务，比如
     "dev:docs": "pnpm -F @vben/docs run dev",
     // 启动web-ele应用
     "dev:ele": "pnpm -F @vben/web-ele run dev",
+    // 启动演示应用
+    "dev:play": "pnpm -F @vben/playground run dev",
     // 启动web-naive应用
     "dev:naive": "pnpm -F @vben/web-naive run dev",
     // 格式化代码

docs/src/guide/essentials/route.md

@@ -16,15 +16,15 @@ outline: deep
 
 ```ts
 // 有需要可以自行打开注释，并创建文件夹
-// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true }); // [!code --]
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true }); // [!code --]
 const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true }); // [!code ++]
 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 
-/** 静态路由列表，访问这些页面可以不需要权限 */
-// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles); // [!code --]
-const staticRoutes: RouteRecordRaw[] = []; // [!code --]
-const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles); // [!code ++]
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统 */
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles) // [!code --]
+const externalRoutes: RouteRecordRaw[] = []; // [!code --]
+const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles); // [!code ++]
 ```
 
 ### 动态路由

docs/src/guide/essentials/server.md

@@ -221,7 +221,7 @@ function createRequestClient(baseURL: string) {
     if (status >= 200 && status < 400 && code === 0) {
       return data;
     }
-    throw new Error(msg);
+    throw new Error(`Error ${status}: ${msg}`);
   });
   return client;
 }

docs/src/guide/essentials/settings.md

@@ -180,7 +180,7 @@ const defaultPreferences: Preferences = {
     compact: false,
     contentCompact: 'wide',
     defaultAvatar:
-      'https://unpkg.com/@vbenjs/static-source@0.1.5/source/avatar-v1.webp',
+      'https://unpkg.com/@vbenjs/static-source@0.1.6/source/avatar-v1.webp',
     dynamicTitle: true,
     enableCheckUpdates: true,
     enablePreferences: true,
@@ -189,6 +189,7 @@ const defaultPreferences: Preferences = {
     locale: 'zh-CN',
     loginExpiredMode: 'modal',
     name: 'Vben Admin',
+    preferencesButtonPosition: 'fixed',
     watermark: false,
   },
   breadcrumb: {
@@ -217,7 +218,7 @@ const defaultPreferences: Preferences = {
   },
   logo: {
     enable: true,
-    source: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp',
+    source: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
   },
   navigation: {
     accordion: true,
@@ -260,7 +261,8 @@ const defaultPreferences: Preferences = {
     colorWarning: 'hsl(42 84% 61%)',
     mode: 'dark',
     radius: '0.5',
-    semiDarkMenu: true,
+    semiDarkHeader: false,
+    semiDarkSidebar: true,
   },
   transition: {
     enable: true,
@@ -318,6 +320,8 @@ interface AppPreferences {
   loginExpiredMode: LoginExpiredModeType;
   /** 应用名 */
   name: string;
+  /** 偏好设置按钮位置 */
+  preferencesButtonPosition: PreferencesButtonPositionType;
   /**
    * @zh_CN 是否开启水印
    */
@@ -452,8 +456,10 @@ interface ThemePreferences {
   mode: ThemeModeType;
   /** 圆角 */
   radius: string;
+  /** 是否开启半深色header（只在theme='light'时生效） */
+  semiDarkHeader: boolean;
   /** 是否开启半深色菜单（只在theme='light'时生效） */
-  semiDarkMenu: boolean;
+  semiDarkSidebar: boolean;
 }
 
 interface TransitionPreferences {

docs/src/guide/in-depth/locale.md

@@ -198,7 +198,11 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
       locale = await import('dayjs/locale/en');
     }
   }
-  dayjs.locale(locale);
+  if (locale) {
+    dayjs.locale(locale);
+  } else {
+    console.error(`Failed to load dayjs locale for ${lang}`);
+  }
 }
 ```
 

docs/src/guide/in-depth/theme.md

@@ -107,12 +107,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
-  /* 登录背景色 */
-  --authentication: 231deg 61% 44%;
-
   /* =============component & UI============= */
 
   /* menu */
@@ -120,6 +114,9 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
   --sidebar-deep: 210 11.11% 96.47%;
   --menu: var(--sidebar);
 
+  /* header */
+  --header: 0 0% 100%;
+
   accent-color: var(--primary);
   color-scheme: light;
 }
@@ -209,17 +206,12 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
-  /* 登录背景色 */
-  --authentication: 220deg 13.06% 3.04%;
-
   /* =============component & UI============= */
 
   --sidebar: 222.34deg 10.43% 12.27%;
   --sidebar-deep: 220deg 13.06% 9%;
   --menu: var(--sidebar);
+  --header: 222.34deg 10.43% 12.27%;
 
   color-scheme: dark;
 }
@@ -234,7 +226,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
 ### 默认主题下：
 
 ```css
-/*  */
 :root {
   /* Background color for <Card /> */
   --card: 0 0% 30%;
@@ -244,10 +235,11 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
 ### 黑暗模式下
 
 ```css
-/*  */
-:root {
+.dark,
+.dark[data-theme='custom'],
+.dark[data-theme='default'] {
   /* Background color for <Card /> */
-  --card: 0 0% 30%;
+  --card: 222.34deg 10.43% 12.27%;
 }
 ```
 
@@ -339,7 +331,7 @@ type BuiltinThemeType =
 
   /* 主体区域背景色 */
   --background-deep: 210 11.11% 96.47%;
-  --foreground: 210 6% 21%;
+  --foreground: 222 84% 5%;
 
   /* Background color for <Card /> */
   --card: 0 0% 100%;
@@ -350,8 +342,12 @@ type BuiltinThemeType =
   --popover-foreground: 222.2 84% 4.9%;
 
   /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
+
+  /* --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%; */
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
 
   /* 主题颜色 */
 
@@ -409,19 +405,16 @@ type BuiltinThemeType =
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
-  /* 登录背景色 */
-  --authentication: 231deg 61% 44%;
-
   /* =============component & UI============= */
 
   /* menu */
   --sidebar: 0 0% 100%;
-  --sidebar-deep: 210 11.11% 96.47%;
+  --sidebar-deep: 0 0% 100%;
   --menu: var(--sidebar);
 
+  /* header */
+  --header: 0 0% 100%;
+
   accent-color: var(--primary);
   color-scheme: light;
 }
@@ -726,8 +719,13 @@ type BuiltinThemeType =
   --popover-foreground: 210 40% 98%;
 
   /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
-  --muted: 220deg 6.82% 17.25%;
-  --muted-foreground: 215 20.2% 65.1%;
+
+  /* --muted: 220deg 6.82% 17.25%; */
+
+  /* --muted-foreground: 215 20.2% 65.1%; */
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
 
   /* 主题颜色 */
 
@@ -754,16 +752,16 @@ type BuiltinThemeType =
   --secondary-foreground: 0 0% 98%;
 
   /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
-  --accent: 0deg 0% 100% / 8%;
-  --accent-hover: 0deg 0% 100% / 12%;
+  --accent: 216 5% 19%;
+  --accent-hover: 216 5% 24%;
   --accent-foreground: 0 0% 98%;
 
   /* Darker color */
-  --heavy: 0deg 0% 100% / 12%;
+  --heavy: 216 5% 24%;
   --heavy-foreground: var(--accent-foreground);
 
   /* Default border color */
-  --border: 240 3.7% 15.9%;
+  --border: 240 3.7% 22%;
 
   /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
   --input: 0deg 0% 100% / 10%;
@@ -784,18 +782,15 @@ type BuiltinThemeType =
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
-  /* 登录背景色 */
-  --authentication: 220deg 13.06% 3.04%;
-
   /* =============component & UI============= */
 
   --sidebar: 222.34deg 10.43% 12.27%;
   --sidebar-deep: 220deg 13.06% 9%;
   --menu: var(--sidebar);
 
+  /* header */
+  --header: 222.34deg 10.43% 12.27%;
+
   color-scheme: dark;
 }
 
@@ -822,6 +817,7 @@ type BuiltinThemeType =
   --ring: 263.4 70% 50.4%;
   --sidebar: 224 71.4% 4.1%;
   --sidebar-deep: 224 71.4% 4.1%;
+  --header: 224 71.4% 4.1%;
 }
 
 .dark[data-theme='pink'],
@@ -847,6 +843,7 @@ type BuiltinThemeType =
   --ring: 346.8 77.2% 49.8%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='rose'],
@@ -872,6 +869,7 @@ type BuiltinThemeType =
   --ring: 0 72.2% 50.6%;
   --sidebar: 0 0% 3.9%;
   --sidebar-deep: 0 0% 3.9%;
+  --header: 0 0% 3.9%;
 }
 
 .dark[data-theme='sky-blue'],
@@ -897,6 +895,7 @@ type BuiltinThemeType =
   --ring: 224.3 76.3% 48%;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='deep-blue'],
@@ -922,6 +921,7 @@ type BuiltinThemeType =
   --ring: 224.3 76.3% 48%;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='green'],
@@ -947,6 +947,7 @@ type BuiltinThemeType =
   --ring: 142.4 71.8% 29.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='deep-green'],
@@ -972,6 +973,7 @@ type BuiltinThemeType =
   --ring: 142.4 71.8% 29.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='orange'],
@@ -997,6 +999,7 @@ type BuiltinThemeType =
   --ring: 20.5 90.2% 48.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='yellow'],
@@ -1022,6 +1025,7 @@ type BuiltinThemeType =
   --ring: 35.5 91.7% 32.9%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='zinc'],
@@ -1047,6 +1051,7 @@ type BuiltinThemeType =
   --ring: 240 4.9% 83.9%;
   --sidebar: 240 10% 3.9%;
   --sidebar-deep: 240 10% 3.9%;
+  --header: 240 4.9% 83.9%;
 }
 
 .dark[data-theme='neutral'],
@@ -1072,6 +1077,7 @@ type BuiltinThemeType =
   --ring: 0 0% 83.1%;
   --sidebar: 0 0% 3.9%;
   --sidebar-deep: 0 0% 3.9%;
+  --header: 0 0% 3.9%;
 }
 
 .dark[data-theme='slate'],
@@ -1097,6 +1103,7 @@ type BuiltinThemeType =
   --ring: 212.7 26.8% 83.9;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='gray'],
@@ -1122,6 +1129,7 @@ type BuiltinThemeType =
   --ring: 216 12.2% 83.9%;
   --sidebar: 224 71.4% 4.1%;
   --sidebar-deep: 224 71.4% 4.1%;
+  --header: 224 71.4% 4.1%;
 }
 ```
 
@@ -1210,6 +1218,50 @@ export const overridesPreferences = defineOverridesPreferences({
 });
 ```
 
+## 自定义侧边栏颜色
+
+侧边栏颜色通过`--sidebar`变量来配置
+
+### 默认主题下：
+
+```css
+:root {
+  --sidebar: 0 0% 100%;
+}
+```
+
+### 黑暗模式下
+
+```css
+.dark,
+.dark[data-theme='custom'],
+.dark[data-theme='default'] {
+  --sidebar: 222.34deg 10.43% 12.27%;
+}
+```
+
+## 自定义顶栏颜色
+
+侧边栏颜色通过`--header`变量来配置
+
+### 默认主题下：
+
+```css
+:root {
+  --header: 0 0% 100%;
+}
+```
+
+### 黑暗模式下
+
+```css
+.dark,
+.dark[data-theme='custom'],
+.dark[data-theme='default'] {
+  --header: 222.34deg 10.43% 12.27%;
+}
+```
+
 ## 色弱模式
 
 一般用于特殊场景，将设置为色弱模式，你可以在`preferences.ts`中进行配置：

docs/src/guide/introduction/quick-start.md

@@ -72,11 +72,24 @@ pnpm install
 
 ### 运行项目
 
-执行以下命令即可运行项目:
+执行以下命运行项目:
 
 ```bash
 # 启动项目
 pnpm dev
 ```
 
+此时，你会看到类似如下的输出，选择你需要运行的项目：
+
+```bash
+│
+◆  Select the app you need to run [dev]:
+│  ● @vben/web-antd
+│  ○ @vben/web-ele
+│  ○ @vben/web-naive
+│  ○ @vben/docs
+│  ○ @vben/playground
+└
+```
+
 现在，你可以在浏览器访问 `http://localhost:5555` 查看项目。

docs/src/guide/introduction/thin.md

@@ -0,0 +1,62 @@
+# 精简版本
+
+从 `5.0` 版本开始，我们不再提供精简的仓库或者分支。我们的目标是提供一个更加一致的开发体验，同时减少维护成本。在这里，我们将如何介绍自己的项目，如何去精简以及移除不需要的功能。
+
+## 应用精简
+
+首先，确认你需要的 `UI` 组件库版本，然后删除对应的应用，比如你选择使用 `Ant Design Vue`，那么你可以删除其他应用， 只需要删除下面两个文件夹即可：
+
+```bash
+apps/web-ele
+apps/web-native
+
+```
+
+::: tip
+
+如果项目没有内置你需要的 `UI` 组件库应用，你可以直接全部删除其他应用。然后自行新建应用即可。
+
+:::
+
+## 演示代码精简
+
+如果你不需要演示代码，你可以直接删除的`playground`文件夹。
+
+## 文档精简
+
+如果你不需要文档，你可以直接删除`docs`文件夹。
+
+## Mock 服务精简
+
+如果你不需要`Mock`服务，你可以直接删除`apps/backend-mock`文件夹。同时在你的应用下`.env.development`文件中删除`VITE_NITRO_MOCK`变量。
+
+```bash
+# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
+VITE_NITRO_MOCK=false
+```
+
+## 安装依赖
+
+到这里，你已经完成了精简操作，接下来你可以安装依赖，并启动你的项目：
+
+```bash
+# 根目录下执行
+pnpm install
+
+```
+
+## 命令调整
+
+在精简后，你可能需要根据你的项目调整命令，在根目录下的`package.json`文件中，你可以调整`scripts`字段，移除你不需要的命令。
+
+```json
+{
+  "scripts": {
+    "dev:antd": "pnpm -F @vben/web-antd run dev",
+    "dev:docs": "pnpm -F @vben/docs run dev",
+    "dev:ele": "pnpm -F @vben/web-ele run dev",
+    "dev:play": "pnpm -F @vben/playground run dev",
+    "dev:naive": "pnpm -F @vben/web-naive run dev"
+  }
+}
+```

docs/src/guide/project/dir.md

@@ -0,0 +1,68 @@
+# 目录说明
+
+目录使用 Monorepo 管理，项目结构如下：
+
+```bash
+.
+├── Dockerfile # Docker 镜像构建文件
+├── README.md # 项目说明文档
+├── apps # 项目应用目录
+│   ├── backend-mock # 后端模拟服务应用
+│   ├── web-antd # 基于 Ant Design Vue 的前端应用
+│   ├── web-ele # 基于 Element Plus 的前端应用
+│   └── web-naive # 基于 Naive UI 的前端应用
+├── build-local-docker-image.sh # 本地构建 Docker 镜像脚本
+├── cspell.json # CSpell 配置文件
+├── docs # 项目文档目录
+├── eslint.config.mjs # ESLint 配置文件
+├── internal # 内部工具目录
+│   ├── lint-configs # 代码检查配置
+│   │   ├── commitlint-config # Commitlint 配置
+│   │   ├── eslint-config # ESLint 配置
+│   │   ├── prettier-config # Prettier 配置
+│   │   └── stylelint-config # Stylelint 配置
+│   ├── node-utils # Node.js 工具
+│   ├── tailwind-config # Tailwind 配置
+│   ├── tsconfig # 通用 tsconfig 配置
+│   └── vite-config # 通用Vite 配置
+├── package.json # 项目依赖配置
+├── packages # 项目包目录
+│   ├── @core # 核心包
+│   │   ├── base # 基础包
+│   │   │   ├── design # 设计相关
+│   │   │   ├── icons # 图标
+│   │   │   ├── shared # 共享
+│   │   │   └── typings # 类型定义
+│   │   ├── composables # 组合式 API
+│   │   ├── preferences # 偏好设置
+│   │   └── ui-kit # UI 组件集合
+│   │       ├── layout-ui # 布局 UI
+│   │       ├── menu-ui  # 菜单 UI
+│   │       ├── shadcn-ui # shadcn UI
+│   │       └── tabs-ui # 标签页 UI
+│   ├── constants # 常量
+│   ├── effects # 副作用相关包
+│   │   ├── access # 访问控制
+│   │   ├── chart-ui # 图表 UI
+│   │   ├── common-ui # 通用 UI
+│   │   ├── hooks # 组合式 API
+│   │   ├── layouts # 布局
+│   │   └── request # 请求
+│   ├── icons # 图标
+│   ├── locales # 国际化
+│   ├── preferences  # 偏好设置
+│   ├── stores # 状态管理
+│   ├── styles # 样式
+│   ├── types # 类型定义
+│   └── utils # 工具
+├── playground # 演示目录
+├── pnpm-lock.yaml # pnpm 锁定文件
+├── pnpm-workspace.yaml # pnpm 工作区配置文件
+├── scripts # 脚本目录
+│   ├── turbo-run # Turbo 运行脚本
+│   └── vsh # VSH 脚本
+├── stylelint.config.mjs # Stylelint 配置文件
+├── turbo.json # Turbo 配置文件
+├── vben-admin.code-workspace # VS Code 工作区配置文件
+└── vitest.config.ts # Vite 配置文件
+```

docs/src/index.md

@@ -8,7 +8,7 @@ hero:
   text: 企业级管理系统框架
   tagline: 全新升级，开箱即用，简单高效
   image:
-    src: https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp
+    src: https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
     alt: Vben Admin
   actions:
     - theme: brand

docs/src/sponsor/personal.md

@@ -2,7 +2,7 @@
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![](https://unpkg.com/@vbenjs/static-source@0.1.5/source/sponsor.png)
+![](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
 
 您的赞助将帮助我们：
 

internal/lint-configs/commitlint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/commitlint-config",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",

internal/lint-configs/eslint-config/package.json

@@ -32,22 +32,22 @@
     "eslint-plugin-import-x": "^3.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.8.0",
+    "@eslint/js": "^9.9.0",
     "@types/eslint": "^9.6.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.1",
-    "@typescript-eslint/parser": "^8.0.1",
-    "eslint": "^9.8.0",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
+    "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-jsdoc": "^50.0.0",
+    "eslint-plugin-jsdoc": "^50.2.0",
     "eslint-plugin-jsonc": "^2.16.0",
     "eslint-plugin-n": "^17.10.2",
     "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-perfectionist": "^3.1.2",
+    "eslint-plugin-perfectionist": "^3.1.3",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-regexp": "^2.6.0",
     "eslint-plugin-unicorn": "^55.0.0",
-    "eslint-plugin-unused-imports": "^4.0.1",
+    "eslint-plugin-unused-imports": "^4.1.3",
     "eslint-plugin-vitest": "^0.5.4",
     "eslint-plugin-vue": "^9.27.0",
     "globals": "^15.9.0",

internal/lint-configs/eslint-config/src/custom-config.ts

@@ -14,6 +14,13 @@ const customConfig: Linter.Config[] = [
       'vue/require-default-prop': 'off',
     },
   },
+  {
+    files: ['packages/effects/**/**', 'packages/types/**/**'],
+    ignores: restrictedImportIgnores,
+    rules: {
+      'perfectionist/sort-interfaces': 'off',
+    },
+  },
   {
     // apps内部的一些基础规则
     files: ['apps/**/**'],
@@ -46,6 +53,7 @@ const customConfig: Linter.Config[] = [
           ],
         },
       ],
+      'perfectionist/sort-interfaces': 'off',
     },
   },
   {

internal/lint-configs/prettier-config/package.json

@@ -23,6 +23,6 @@
   },
   "dependencies": {
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.5"
+    "prettier-plugin-tailwindcss": "^0.6.6"
   }
 }

internal/lint-configs/stylelint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/stylelint-config",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",

internal/node-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/node-utils",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",

internal/node-utils/src/spinner.ts

@@ -1,4 +1,4 @@
-import ora, { Ora } from 'ora';
+import ora, { type Ora } from 'ora';
 
 interface SpinnerOptions {
   failedText?: string;

internal/tailwind-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/tailwind-config",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -46,17 +46,17 @@
     "tailwindcss": "^3.4.3"
   },
   "dependencies": {
-    "@iconify/json": "^2.2.234",
+    "@iconify/json": "^2.2.237",
     "@iconify/tailwind": "^1.1.2",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
-    "@tailwindcss/typography": "^0.5.13",
+    "@tailwindcss/typography": "^0.5.14",
     "autoprefixer": "^10.4.20",
-    "cssnano": "^7.0.4",
+    "cssnano": "^7.0.5",
     "postcss": "^8.4.41",
     "postcss-antd-fixes": "^0.2.0",
     "postcss-import": "^16.1.0",
     "postcss-preset-env": "^10.0.0",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.9",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {

internal/tailwind-config/src/index.ts

@@ -76,13 +76,13 @@ const shadcnUiColors = {
 };
 
 const customColors = {
-  authentication: {
-    DEFAULT: 'hsl(var(--authentication))',
-  },
   green: {
     ...createColorsPalette('green'),
     foreground: 'hsl(var(--success-foreground))',
   },
+  header: {
+    DEFAULT: 'hsl(var(--header))',
+  },
   heavy: {
     DEFAULT: 'hsl(var(--heavy))',
     foreground: 'hsl(var(--heavy-foreground))',
@@ -145,6 +145,7 @@ export default {
         'collapsible-up': 'collapsible-up 0.2s ease-in-out',
         float: 'float 5s linear 0ms infinite',
       },
+
       animationDuration: {
         '2000': '2000ms',
         '3000': '3000ms',
@@ -155,6 +156,11 @@ export default {
         sm: 'calc(var(--radius) - 4px)',
         xl: 'calc(var(--radius) + 4px)',
       },
+      boxShadow: {
+        float: `0 6px 16px 0 rgb(0 0 0 / 8%),
+          0 3px 6px -4px rgb(0 0 0 / 12%),
+          0 9px 28px 8px rgb(0 0 0 / 5%)`,
+      },
       colors: {
         ...customColors,
         ...shadcnUiColors,

internal/tsconfig/base.json

@@ -13,7 +13,6 @@
 
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "allowImportingTsExtensions": true,
 
     "strict": true,
     "strictNullChecks": true,

internal/tsconfig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/tsconfig",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -20,6 +20,6 @@
   ],
   "dependencies": {
     "@vben/types": "workspace:*",
-    "vite": "^5.3.5"
+    "vite": "^5.4.0"
   }
 }

internal/vite-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/vite-config",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -29,14 +29,14 @@
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@jspm/generator": "^2.1.3",
-    "cheerio": "1.0.0-rc.12",
+    "cheerio": "1.0.0",
     "get-port": "^7.1.0",
     "html-minifier-terser": "^7.2.0",
     "nitropack": "^2.9.7",
     "resolve.exports": "^2.0.2",
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-pwa": "^0.20.1",
-    "vite-plugin-vue-devtools": "^7.3.7"
+    "vite-plugin-vue-devtools": "^7.3.8"
   },
   "devDependencies": {
     "@types/html-minifier-terser": "^7.0.2",
@@ -48,9 +48,9 @@
     "rollup": "^4.20.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.77.8",
-    "vite": "^5.3.5",
+    "vite": "^5.4.0",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-dts": "4.0.0",
+    "vite-plugin-dts": "4.0.2",
     "vite-plugin-html": "^3.2.2"
   }
 }

internal/vite-config/src/config/application.ts

@@ -2,7 +2,7 @@ import type { UserConfig } from 'vite';
 
 import type { DefineApplicationOptions } from '../typing';
 
-import { relative } from 'node:path';
+import path, { relative } from 'node:path';
 
 import { findMonorepoRoot } from '@vben/node-utils';
 
@@ -101,7 +101,7 @@ function createCssOptions(injectGlobalScss = true) {
             additionalData: (content: string, filepath: string) => {
               const relativePath = relative(root, filepath);
               // apps下的包注入全局样式
-              if (relativePath.startsWith('apps/')) {
+              if (relativePath.startsWith(`apps${path.sep}`)) {
                 return `@import "@vben/styles/global";\n${content}`;
               }
               return content;

internal/vite-config/src/options.ts

@@ -11,12 +11,12 @@ const getDefaultPwaOptions = (name: string): Partial<PwaPluginOptions> => ({
     icons: [
       {
         sizes: '192x192',
-        src: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/pwa-icon-192.png',
+        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.5/source/pwa-icon-512.png',
+        src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-512.png',
         type: 'image/png',
       },
     ],
@@ -25,6 +25,9 @@ const getDefaultPwaOptions = (name: string): Partial<PwaPluginOptions> => ({
   },
 });
 
+/**
+ * importmap CDN 暂时不开启，因为有些包不支持，且网络不稳定
+ */
 const defaultImportmapOptions: ImportmapPluginOptions = {
   // 通过 Importmap CDN 方式引入,
   // 目前只有esm.sh源兼容性好一点，jspm.io对于 esm 入口要求高

internal/vite-config/src/plugins/importmap.ts

@@ -80,7 +80,7 @@ async function viteImportMapPlugin(
   const firstLayerKeys = Object.keys(scopes);
   const inputMapScopes: string[] = [];
   firstLayerKeys.forEach((key) => {
-    inputMapScopes.push(...Object.keys(scopes[key]));
+    inputMapScopes.push(...Object.keys(scopes[key] || {}));
   });
   const inputMapImports = Object.keys(imports);
 
@@ -160,7 +160,10 @@ async function viteImportMapPlugin(
             options.defaultProvider || DEFAULT_PROVIDER,
           );
 
-          const resultHtml = await injectShimsToHtml(html, esModuleShimsSrc);
+          const resultHtml = await injectShimsToHtml(
+            html,
+            esModuleShimsSrc || '',
+          );
           html = await minify(resultHtml || html, {
             collapseWhitespace: true,
             minifyCSS: true,

internal/vite-config/src/plugins/inject-app-loading/default-loading.html

@@ -25,7 +25,7 @@
     pointer-events: none;
     visibility: hidden;
     opacity: 0;
-    transition: all 1s ease-out;
+    transition: all 0.8s ease-out;
   }
 
   .dark .loading {

internal/vite-config/src/plugins/inject-metadata.ts

@@ -16,8 +16,8 @@ function resolvePackageVersion(
 async function resolveMonorepoDependencies() {
   const { packages } = await getPackages();
 
-  const resultDevDependencies: Record<string, string> = {};
-  const resultDependencies: Record<string, string> = {};
+  const resultDevDependencies: Record<string, string | undefined> = {};
+  const resultDependencies: Record<string, string | undefined> = {};
   const pkgsMeta: Record<string, string> = {};
 
   for (const { packageJson } of packages) {

internal/vite-config/src/utils/env.ts

@@ -6,6 +6,14 @@ import { fs } from '@vben/node-utils';
 
 import dotenv from 'dotenv';
 
+const getBoolean = (value: string | undefined) => value === 'true';
+
+const getString = (value: string | undefined, fallback: string) =>
+  value ?? fallback;
+
+const getNumber = (value: string | undefined, fallback: number) =>
+  Number(value) || fallback;
+
 /**
  * 获取当前环境下生效的配置文件名
  */
@@ -63,6 +71,7 @@ async function loadAndConvertEnv(
   } & Partial<ApplicationPluginOptions>
 > {
   const envConfig = await loadEnv(match, confFiles);
+
   const {
     VITE_APP_TITLE,
     VITE_BASE,
@@ -74,22 +83,22 @@ async function loadAndConvertEnv(
     VITE_PWA,
     VITE_VISUALIZER,
   } = envConfig;
-  const compress = VITE_COMPRESS || '';
-  const compressTypes = compress
+
+  const compressTypes = (VITE_COMPRESS ?? '')
     .split(',')
     .filter((item) => item === 'brotli' || item === 'gzip');
 
   return {
-    appTitle: VITE_APP_TITLE ?? 'Vben Admin',
-    base: VITE_BASE || '/',
-    compress: !!compress,
-    compressTypes: compressTypes as ('brotli' | 'gzip')[],
-    devtools: VITE_DEVTOOLS === 'true',
-    injectAppLoading: VITE_INJECT_APP_LOADING === 'true',
-    nitroMock: VITE_NITRO_MOCK === 'true',
-    port: Number(VITE_PORT) || 5173,
-    pwa: VITE_PWA === 'true',
-    visualizer: VITE_VISUALIZER === 'true',
+    appTitle: getString(VITE_APP_TITLE, 'Vben Admin'),
+    base: getString(VITE_BASE, '/'),
+    compress: compressTypes.length > 0,
+    compressTypes,
+    devtools: getBoolean(VITE_DEVTOOLS),
+    injectAppLoading: getBoolean(VITE_INJECT_APP_LOADING),
+    nitroMock: getBoolean(VITE_NITRO_MOCK),
+    port: getNumber(VITE_PORT, 5173),
+    pwa: getBoolean(VITE_PWA),
+    visualizer: getBoolean(VITE_VISUALIZER),
   };
 }
 

nginx.conf

@@ -73,15 +73,3 @@ http {
     }
   }
 }
-
-# stream {    # stream 模块配置和 http 模块在相同级别
-#     upstream redis {
-#         server 127.0.0.1:6379 max_fails=3 fail_timeout=30s;
-#     }
-#     server {
-#         listen 16379;
-#         proxy_connect_timeout 1s;
-#         proxy_timeout 3s;
-#         proxy_pass redis;
-#     }
-# }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-pro",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "private": true,
   "keywords": [
     "monorepo",
@@ -41,6 +41,7 @@
     "dev:antd": "pnpm -F @vben/web-antd run dev",
     "dev:docs": "pnpm -F @vben/docs run dev",
     "dev:ele": "pnpm -F @vben/web-ele run dev",
+    "dev:play": "pnpm -F @vben/playground run dev",
     "dev:naive": "pnpm -F @vben/web-naive run dev",
     "format": "vsh lint --format",
     "lint": "vsh lint",
@@ -59,7 +60,7 @@
     "@changesets/cli": "^2.27.7",
     "@ls-lint/ls-lint": "^2.2.3",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.1.0",
+    "@types/node": "^22.2.0",
     "@vben/commitlint-config": "workspace:*",
     "@vben/eslint-config": "workspace:*",
     "@vben/prettier-config": "workspace:*",
@@ -69,21 +70,24 @@
     "@vben/turbo-run": "workspace:*",
     "@vben/vite-config": "workspace:*",
     "@vben/vsh": "workspace:*",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "cspell": "^8.13.1",
+    "cspell": "^8.13.3",
     "husky": "^9.1.4",
     "is-ci": "^3.0.1",
     "jsdom": "^24.1.1",
-    "lint-staged": "^15.2.8",
+    "lint-staged": "^15.2.9",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.9",
     "turbo": "^2.0.12",
     "typescript": "^5.5.4",
     "unbuild": "^2.0.0",
-    "vite": "^5.3.5",
+    "vite": "^5.4.0",
     "vitest": "^2.0.5",
+    "vue": "^3.4.37",
     "vue-tsc": "^2.0.29"
   },
   "engines": {
@@ -100,7 +104,7 @@
     "overrides": {
       "@ctrl/tinycolor": "^4.1.0",
       "clsx": "^2.1.1",
-      "vue": "^3.4.36"
+      "vue": "^3.4.37"
     },
     "neverBuiltDependencies": [
       "canvas",

packages/@core/base/design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/design",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/base/design/src/css/global.css

@@ -35,7 +35,10 @@
     min-height: 100vh;
 
     /* overflow: overlay; */
-    -webkit-font-smoothing: antialiased;
+
+    /* -webkit-font-smoothing: antialiased; */
+
+    /* -moz-osx-font-smoothing: grayscale; */
   }
 
   a,

packages/@core/base/design/src/design-tokens/dark/index.css

@@ -19,8 +19,13 @@
   --popover-foreground: 210 40% 98%;
 
   /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
-  --muted: 220deg 6.82% 17.25%;
-  --muted-foreground: 215 20.2% 65.1%;
+
+  /* --muted: 220deg 6.82% 17.25%; */
+
+  /* --muted-foreground: 215 20.2% 65.1%; */
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
 
   /* 主题颜色 */
 
@@ -47,12 +52,12 @@
   --secondary-foreground: 0 0% 98%;
 
   /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
-  --accent: 0deg 0% 100% / 8%;
-  --accent-hover: 0deg 0% 100% / 12%;
+  --accent: 216 5% 19%;
+  --accent-hover: 216 5% 24%;
   --accent-foreground: 0 0% 98%;
 
   /* Darker color */
-  --heavy: 0deg 0% 100% / 12%;
+  --heavy: 216 5% 24%;
   --heavy-foreground: var(--accent-foreground);
 
   /* Default border color */
@@ -77,18 +82,15 @@
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
-  /* 登录背景色 */
-  --authentication: 220deg 13.06% 3.04%;
-
   /* =============component & UI============= */
 
   --sidebar: 222.34deg 10.43% 12.27%;
   --sidebar-deep: 220deg 13.06% 9%;
   --menu: var(--sidebar);
 
+  /* header */
+  --header: 222.34deg 10.43% 12.27%;
+
   color-scheme: dark;
 }
 
@@ -115,6 +117,7 @@
   --ring: 263.4 70% 50.4%;
   --sidebar: 224 71.4% 4.1%;
   --sidebar-deep: 224 71.4% 4.1%;
+  --header: 224 71.4% 4.1%;
 }
 
 .dark[data-theme='pink'],
@@ -140,6 +143,7 @@
   --ring: 346.8 77.2% 49.8%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='rose'],
@@ -165,6 +169,7 @@
   --ring: 0 72.2% 50.6%;
   --sidebar: 0 0% 3.9%;
   --sidebar-deep: 0 0% 3.9%;
+  --header: 0 0% 3.9%;
 }
 
 .dark[data-theme='sky-blue'],
@@ -190,6 +195,7 @@
   --ring: 224.3 76.3% 48%;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='deep-blue'],
@@ -215,6 +221,7 @@
   --ring: 224.3 76.3% 48%;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='green'],
@@ -240,6 +247,7 @@
   --ring: 142.4 71.8% 29.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='deep-green'],
@@ -265,6 +273,7 @@
   --ring: 142.4 71.8% 29.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='orange'],
@@ -290,6 +299,7 @@
   --ring: 20.5 90.2% 48.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='yellow'],
@@ -315,6 +325,7 @@
   --ring: 35.5 91.7% 32.9%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='zinc'],
@@ -340,6 +351,7 @@
   --ring: 240 4.9% 83.9%;
   --sidebar: 240 10% 3.9%;
   --sidebar-deep: 240 10% 3.9%;
+  --header: 240 4.9% 83.9%;
 }
 
 .dark[data-theme='neutral'],
@@ -365,6 +377,7 @@
   --ring: 0 0% 83.1%;
   --sidebar: 0 0% 3.9%;
   --sidebar-deep: 0 0% 3.9%;
+  --header: 0 0% 3.9%;
 }
 
 .dark[data-theme='slate'],
@@ -390,6 +403,7 @@
   --ring: 212.7 26.8% 83.9;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='gray'],
@@ -415,4 +429,5 @@
   --ring: 216 12.2% 83.9%;
   --sidebar: 224 71.4% 4.1%;
   --sidebar-deep: 224 71.4% 4.1%;
+  --header: 224 71.4% 4.1%;
 }

packages/@core/base/design/src/design-tokens/default/index.css

@@ -19,8 +19,12 @@
   --popover-foreground: 222.2 84% 4.9%;
 
   /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
+
+  /* --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%; */
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
 
   /* 主题颜色 */
 
@@ -78,19 +82,16 @@
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
-  /* 登录背景色 */
-  --authentication: 231deg 61% 44%;
-
   /* =============component & UI============= */
 
   /* menu */
   --sidebar: 0 0% 100%;
-  --sidebar-deep: 210 11.11% 96.47%;
+  --sidebar-deep: 0 0% 100%;
   --menu: var(--sidebar);
 
+  /* header */
+  --header: 0 0% 100%;
+
   accent-color: var(--primary);
   color-scheme: light;
 }

packages/@core/base/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/icons",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@iconify/vue": "^4.1.2",
-    "lucide-vue-next": "^0.424.0",
-    "vue": "^3.4.36"
+    "lucide-vue-next": "^0.427.0",
+    "vue": "^3.4.37"
   }
 }

packages/@core/base/icons/src/lucide.ts

@@ -38,6 +38,7 @@ export {
   RotateCw,
   Search,
   SearchX,
+  Settings,
   Sun,
   SunMoon,
   SwatchBook,

packages/@core/base/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shared",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -56,12 +56,12 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
-    "@vue/shared": "^3.4.36",
+    "@vue/shared": "^3.4.37",
     "clsx": "^2.1.1",
     "defu": "^6.1.4",
     "lodash.clonedeep": "^4.5.0",
     "nprogress": "^0.2.0",
-    "tailwind-merge": "^2.4.0",
+    "tailwind-merge": "^2.5.2",
     "theme-colors": "^0.1.0"
   },
   "devDependencies": {

packages/@core/base/shared/src/color/convert.test.ts

@@ -1,6 +1,11 @@
 import { describe, expect, it } from 'vitest';
 
-import { convertToHsl, convertToHslCssVar, convertToRgb } from './convert';
+import {
+  convertToHsl,
+  convertToHslCssVar,
+  convertToRgb,
+  isValidColor,
+} from './convert';
 
 describe('color conversion functions', () => {
   it('should correctly convert color to HSL format', () => {
@@ -39,3 +44,15 @@ describe('color conversion functions', () => {
     expect(convertToRgb(color)).toEqual(expectedRgba);
   });
 });
+
+describe('isValidColor', () => {
+  it('isValidColor function', () => {
+    // 测试有效颜色
+    expect(isValidColor('blue')).toBe(true);
+    expect(isValidColor('#000000')).toBe(true);
+
+    // 测试无效颜色
+    expect(isValidColor('invalid color')).toBe(false);
+    expect(isValidColor()).toBe(false);
+  });
+});

packages/@core/base/shared/src/color/convert.ts

@@ -41,4 +41,22 @@ function convertToRgb(str: string): string {
   return new TinyColor(str.replaceAll(/deg|grad|rad|turn/g, '')).toRgbString();
 }
 
-export { convertToHsl, convertToHslCssVar, convertToRgb, TinyColor };
+/**
+ * 检查颜色是否有效
+ * @param {string} color - 待检查的颜色
+ * 如果颜色有效返回true，否则返回false
+ */
+function isValidColor(color?: string) {
+  if (!color) {
+    return false;
+  }
+  return new TinyColor(color).isValid;
+}
+
+export {
+  convertToHsl,
+  convertToHslCssVar,
+  convertToRgb,
+  isValidColor,
+  TinyColor,
+};

packages/@core/base/shared/src/constants/vben.ts

@@ -12,7 +12,7 @@ export const VBEN_DOC_URL = 'https://doc.vben.pro';
  * @zh_CN Vben Logo
  */
 export const VBEN_LOGO_URL =
-  'https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp';
+  'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp';
 
 /**
  * @zh_CN Vben Admin 首页地址
@@ -22,3 +22,5 @@ export const VBEN_PREVIEW_URL = 'https://www.vben.pro';
 export const VBEN_ELE_PREVIEW_URL = 'https://ele.vben.pro';
 
 export const VBEN_NAIVE_PREVIEW_URL = 'https://naive.vben.pro';
+
+export const VBEN_ANT_PREVIEW_URL = 'https://ant.vben.pro';

packages/@core/base/shared/src/utils/diff.test.ts

@@ -3,58 +3,51 @@ import { describe, expect, it } from 'vitest';
 import { diff } from './diff';
 
 describe('diff function', () => {
-  it('should correctly find differences in flat objects', () => {
-    const oldObj = { a: 1, b: 2, c: 3 };
-    const newObj = { a: 1, b: 3, c: 3 };
-    expect(diff(oldObj, newObj)).toEqual({ b: 3 });
+  it('should return an empty object when comparing identical objects', () => {
+    const obj1 = { a: 1, b: { c: 2 } };
+    const obj2 = { a: 1, b: { c: 2 } };
+    expect(diff(obj1, obj2)).toEqual(undefined);
   });
 
-  it('should correctly handle nested objects', () => {
-    const oldObj = { a: { b: 1, c: 2 }, d: 3 };
-    const newObj = { a: { b: 1, c: 3 }, d: 3 };
-    expect(diff(oldObj, newObj)).toEqual({ a: { b: 1, c: 3 } });
+  it('should detect simple changes in primitive values', () => {
+    const obj1 = { a: 1, b: 2 };
+    const obj2 = { a: 1, b: 3 };
+    expect(diff(obj1, obj2)).toEqual({ b: 3 });
   });
 
-  it('should correctly handle arrays`', () => {
-    const oldObj = { a: [1, 2, 3] };
-    const newObj = { a: [1, 2, 4] };
-    expect(diff(oldObj, newObj)).toEqual({ a: [1, 2, 4] });
+  it('should detect nested object changes', () => {
+    const obj1 = { a: 1, b: { c: 2, d: 4 } };
+    const obj2 = { a: 1, b: { c: 3, d: 4 } };
+    expect(diff(obj1, obj2)).toEqual({ b: { c: 3 } });
   });
 
-  it('should correctly handle nested arrays', () => {
-    const oldObj = {
-      a: [
-        [1, 2],
-        [3, 4],
-      ],
-    };
-    const newObj = {
-      a: [
-        [1, 2],
-        [3, 5],
-      ],
-    };
-    expect(diff(oldObj, newObj)).toEqual({
-      a: [
-        [1, 2],
-        [3, 5],
-      ],
-    });
+  it('should handle array changes', () => {
+    const obj1 = { a: [1, 2, 3], b: 2 };
+    const obj2 = { a: [1, 2, 4], b: 2 };
+    expect(diff(obj1, obj2)).toEqual({ a: [1, 2, 4] });
   });
 
-  it('should return null if objects are identical', () => {
-    const oldObj = { a: 1, b: 2, c: 3 };
-    const newObj = { a: 1, b: 2, c: 3 };
-    expect(diff(oldObj, newObj)).toBeNull();
+  it('should handle added keys', () => {
+    const obj1 = { a: 1 };
+    const obj2 = { a: 1, b: 2 };
+    expect(diff(obj1, obj2)).toEqual({ b: 2 });
   });
 
-  it('should return differences between two objects excluding ignored fields', () => {
-    const oldObj = { a: 1, b: 2, c: 3, d: 6 };
-    const newObj = { a: 2, b: 2, c: 4, d: 5 };
-    const ignoreFields: (keyof typeof newObj)[] = ['a', 'd'];
+  it('should handle removed keys', () => {
+    const obj1 = { a: 1, b: 2 };
+    const obj2 = { a: 1 };
+    expect(diff(obj1, obj2)).toEqual(undefined);
+  });
 
-    const result = diff(oldObj, newObj, ignoreFields);
+  it('should handle boolean value changes', () => {
+    const obj1 = { a: true, b: false };
+    const obj2 = { a: true, b: true };
+    expect(diff(obj1, obj2)).toEqual({ b: true });
+  });
 
-    expect(result).toEqual({ c: 4 });
+  it('should handle null and undefined values', () => {
+    const obj1 = { a: null, b: undefined };
+    const obj2: any = { a: 1, b: undefined };
+    expect(diff(obj1, obj2)).toEqual({ a: 1 });
   });
 });

packages/@core/base/shared/src/utils/diff.ts

@@ -1,4 +1,4 @@
-type Diff<T = any> = T;
+// type Diff<T = any> = T;
 
 // 比较两个数组是否相等
 
@@ -19,40 +19,78 @@ function arraysEqual<T>(a: T[], b: T[]): boolean {
 }
 
 // 深度对比两个值
-function deepEqual<T>(oldVal: T, newVal: T): boolean {
-  if (
-    typeof oldVal === 'object' &&
-    oldVal !== null &&
-    typeof newVal === 'object' &&
-    newVal !== null
-  ) {
-    return Array.isArray(oldVal) && Array.isArray(newVal)
-      ? arraysEqual(oldVal, newVal)
-      : diff(oldVal as any, newVal as any) === null;
-  } else {
-    return oldVal === newVal;
-  }
-}
+// function deepEqual<T>(oldVal: T, newVal: T): boolean {
+//   if (
+//     typeof oldVal === 'object' &&
+//     oldVal !== null &&
+//     typeof newVal === 'object' &&
+//     newVal !== null
+//   ) {
+//     return Array.isArray(oldVal) && Array.isArray(newVal)
+//       ? arraysEqual(oldVal, newVal)
+//       : diff(oldVal as any, newVal as any) === null;
+//   } else {
+//     return oldVal === newVal;
+//   }
+// }
 
-// 主要的 diff 函数
-function diff<T extends object>(
-  oldObj: T,
-  newObj: T,
-  ignoreFields: (keyof T)[] = [],
-): { [K in keyof T]?: Diff<T[K]> } | null {
-  const difference: { [K in keyof T]?: Diff<T[K]> } = {};
+// // diff 函数
+// function diff<T extends object>(
+//   oldObj: T,
+//   newObj: T,
+//   ignoreFields: (keyof T)[] = [],
+// ): { [K in keyof T]?: Diff<T[K]> } | null {
+//   const difference: { [K in keyof T]?: Diff<T[K]> } = {};
 
-  for (const key in oldObj) {
-    if (ignoreFields.includes(key)) continue;
-    const oldValue = oldObj[key];
-    const newValue = newObj[key];
+//   for (const key in oldObj) {
+//     if (ignoreFields.includes(key)) continue;
+//     const oldValue = oldObj[key];
+//     const newValue = newObj[key];
 
-    if (!deepEqual(oldValue, newValue)) {
-      difference[key] = newValue;
+//     if (!deepEqual(oldValue, newValue)) {
+//       difference[key] = newValue;
+//     }
+//   }
+
+//   return Object.keys(difference).length === 0 ? null : difference;
+// }
+
+type DiffResult<T> = Partial<{
+  [K in keyof T]: T[K] extends object ? DiffResult<T[K]> : T[K];
+}>;
+
+function diff<T extends Record<string, any>>(obj1: T, obj2: T): DiffResult<T> {
+  function findDifferences(o1: any, o2: any): any {
+    if (Array.isArray(o1) && Array.isArray(o2)) {
+      if (!arraysEqual(o1, o2)) {
+        return o2;
+      }
+      return undefined;
     }
+
+    if (
+      typeof o1 === 'object' &&
+      typeof o2 === 'object' &&
+      o1 !== null &&
+      o2 !== null
+    ) {
+      const diffResult: any = {};
+
+      const keys = new Set([...Object.keys(o1), ...Object.keys(o2)]);
+      keys.forEach((key) => {
+        const valueDiff = findDifferences(o1[key], o2[key]);
+        if (valueDiff !== undefined) {
+          diffResult[key] = valueDiff;
+        }
+      });
+
+      return Object.keys(diffResult).length > 0 ? diffResult : undefined;
+    }
+
+    return o1 === o2 ? undefined : o2;
   }
 
-  return Object.keys(difference).length === 0 ? null : difference;
+  return findDifferences(obj1, obj2);
 }
 
 export { arraysEqual, diff };