+ +[](LICENSE) + +
+ 
+ 
+ 
+
](http://godban.github.io/browsers-support-badges/)IE | [](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
+| :-: | :-: | :-: | :-: | :-: |
+| サポートしない | 最新2バージョン | 最新2バージョン | 最新2バージョン | 最新2バージョン |
+
+## メンテナー
+
+[@Vben](https://github.com/anncwb)
+
+## スター歴史
+
+[](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
+## 寄付
+
+このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます！
+
+
+
+Paypal Me
+
+## 貢献者
+
+
+ 
+
+
+## Discord
+
+- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
+
+## ライセンス
+
+[MIT © Vben-2020](./LICENSE)
diff --git a/apps/vben5/README.md b/apps/vben5/README.md
new file mode 100644
index 000000000..e84c8392e
--- /dev/null
+++ b/apps/vben5/README.md
@@ -0,0 +1,152 @@
+
+
+
+
+
](http://godban.github.io/browsers-support-badges/)IE | [](http://godban.github.io/browsers-support-badges/)Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari |
+| :-: | :-: | :-: | :-: | :-: |
+| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## Maintainer
+
+[@Vben](https://github.com/anncwb)
+
+## Star History
+
+[](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
+## Donate
+
+If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
+
+
+
+Paypal Me
+
+## Contributor
+
+
+
+
+
+## Discord
+
+- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
+
+## License
+
+[MIT © Vben-2020](./LICENSE)
diff --git a/apps/vben5/README.zh-CN.md b/apps/vben5/README.zh-CN.md
new file mode 100644
index 000000000..e2f05bb98
--- /dev/null
+++ b/apps/vben5/README.zh-CN.md
@@ -0,0 +1,152 @@
+
+
+
+
+
](http://godban.github.io/browsers-support-badges/)IE | [](http://godban.github.io/browsers-support-badges/)Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari |
+| :-: | :-: | :-: | :-: | :-: |
+| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## 维护者
+
+[@Vben](https://github.com/anncwb)
+
+## Star History
+
+[](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
+## 捐赠
+
+如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
+
+
+
+Paypal Me
+
+## Contributor
+
+
+
+
+
+## Discord
+
+- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
+
+## License
+
+[MIT © Vben-2020](./LICENSE)
diff --git a/apps/vben5/apps/app-antd/.env b/apps/vben5/apps/app-antd/.env
new file mode 100644
index 000000000..c14a467fb
--- /dev/null
+++ b/apps/vben5/apps/app-antd/.env
@@ -0,0 +1,5 @@
+# 应用标题
+VITE_APP_TITLE=Vben Admin Antd
+
+# 应用命名空间，用于缓存、store等功能的前缀，确保隔离
+VITE_APP_NAMESPACE=vben-web-antd
diff --git a/apps/vben5/apps/app-antd/.env.analyze b/apps/vben5/apps/app-antd/.env.analyze
new file mode 100644
index 000000000..ffafa8dd5
--- /dev/null
+++ b/apps/vben5/apps/app-antd/.env.analyze
@@ -0,0 +1,7 @@
+# public path
+VITE_BASE=/
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/api
+
+VITE_VISUALIZER=true
diff --git a/apps/vben5/apps/app-antd/.env.development b/apps/vben5/apps/app-antd/.env.development
new file mode 100644
index 000000000..0692ed288
--- /dev/null
+++ b/apps/vben5/apps/app-antd/.env.development
@@ -0,0 +1,19 @@
+# 端口号
+VITE_PORT=5666
+
+VITE_BASE=/
+
+# 接口地址
+VITE_GLOB_API_URL=/
+
+# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
+VITE_NITRO_MOCK=true
+
+# 是否打开 devtools，true 为打开，false 为关闭
+VITE_DEVTOOLS=false
+
+# 是否注入全局loading
+VITE_INJECT_APP_LOADING=true
+
+VITE_GLOB_CLIENT_ID=vue-admin-client
+VITE_GLOB_CLIENT_SECRET=1q2w3e*
diff --git a/apps/vben5/apps/app-antd/.env.production b/apps/vben5/apps/app-antd/.env.production
new file mode 100644
index 000000000..5375847a6
--- /dev/null
+++ b/apps/vben5/apps/app-antd/.env.production
@@ -0,0 +1,19 @@
+VITE_BASE=/
+
+# 接口地址
+VITE_GLOB_API_URL=https://mock-napi.vben.pro/api
+
+# 是否开启压缩，可以设置为 none, brotli, gzip
+VITE_COMPRESS=none
+
+# 是否开启 PWA
+VITE_PWA=false
+
+# vue-router 的模式
+VITE_ROUTER_HISTORY=hash
+
+# 是否注入全局loading
+VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
diff --git a/apps/vben5/apps/app-antd/index.html b/apps/vben5/apps/app-antd/index.html
new file mode 100644
index 000000000..480eb84de
--- /dev/null
+++ b/apps/vben5/apps/app-antd/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+ Contributors
+ +
+
+ 
diff --git a/apps/vben5/docs/src/commercial/customized.md b/apps/vben5/docs/src/commercial/customized.md
new file mode 100644
index 000000000..1f0bcecaf
--- /dev/null
+++ b/apps/vben5/docs/src/commercial/customized.md
@@ -0,0 +1,12 @@
+# 定制开发
+
+我们提供基于 Vben Admin 的技术支持服务及定制开发，基本需求我们都可以满足。
+
+详细需求可添加作者了解，并注明来意：
+
+- 通过邮箱联系开发者： [ann.vben@gmail.com](mailto:ann.vben@gmail.com)
+- 通过微信联系开发者：
+
+
+
+我们会在第一时间回复您，定制费用根据需求而定。
diff --git a/apps/vben5/docs/src/commercial/technical-support.md b/apps/vben5/docs/src/commercial/technical-support.md
new file mode 100644
index 000000000..ded9bf2db
--- /dev/null
+++ b/apps/vben5/docs/src/commercial/technical-support.md
@@ -0,0 +1,8 @@
+# 技术支持
+
+## 问题反馈
+
+在使用项目的过程中，如果遇到问题，你可以先详细阅读本文档，未找到解决方案时，可以通过以下方式获取技术支持：
+
+- 通过 [GitHub Issues](https://github.com/vbenjs/vue-vben-admin/issues)
+- 通过 [GitHub Discussions](https://github.com/vbenjs/vue-vben-admin/discussions)
diff --git a/apps/vben5/docs/src/components/common-ui/vben-count-to-animator.md b/apps/vben5/docs/src/components/common-ui/vben-count-to-animator.md
new file mode 100644
index 000000000..301e1a41c
--- /dev/null
+++ b/apps/vben5/docs/src/components/common-ui/vben-count-to-animator.md
@@ -0,0 +1,52 @@
+---
+outline: deep
+---
+
+# Vben CountToAnimator 数字动画
+
+框架提供的数字动画组件，支持数字动画效果。
+
+> 如果文档内没有参数说明，可以尝试在在线示例内寻找
+
+::: info 写在前面
+
+如果你觉得现有组件的封装不够理想，或者不完全符合你的需求，大可以直接使用原生组件，亦或亲手封装一个适合的组件。框架提供的组件并非束缚，使用与否，完全取决于你的需求与自由。
+
+:::
+
+## 基础用法
+
+通过 `start-val` 和 `end-val`设置数字动画的开始值和结束值， 持续时间`3000`ms。
+
+hello world
+This should be red
+ + + +``` + +For more usage, see the [CSS Modules official documentation](https://vuejs.org/api/sfc-css-features.html#css-modules). diff --git a/apps/vben5/docs/src/en/guide/in-depth/access.md b/apps/vben5/docs/src/en/guide/in-depth/access.md new file mode 100644 index 000000000..05997d7d5 --- /dev/null +++ b/apps/vben5/docs/src/en/guide/in-depth/access.md @@ -0,0 +1,318 @@ +--- +outline: deep +--- + +# Access Control + +The framework has built-in two types of access control methods: + +- Determining whether a menu or button can be accessed based on user roles +- Determining whether a menu or button can be accessed through an API + +## Frontend Access Control + +**Implementation Principle**: The permissions for routes are hardcoded on the frontend, specifying which permissions are required to view certain routes. Only general routes are initialized, and routes that require permissions are not added to the route table. After logging in or obtaining user roles through other means, the roles are used to traverse the route table to generate a route table that the role can access. This table is then added to the router instance using `router.addRoute`, achieving permission filtering. + +**Disadvantage**: The permissions are relatively inflexible; if the backend changes roles, the frontend needs to be adjusted accordingly. This is suitable for systems with relatively fixed roles. + +### Steps + +- Ensure the current mode is set to frontend access control + +Adjust `preferences.ts` in the corresponding application directory to ensure `accessMode='frontend'`. + +```ts +import { defineOverridesPreferences } from '@vben/preferences'; + +export const overridesPreferences = defineOverridesPreferences({ + // overrides + app: { + // Default value, optional + accessMode: 'frontend', + }, +}); +``` + +- Configure route permissions + +#### If not configured, it is visible by default + +```ts {3} + { + meta: { + authority: ['super'], + }, +}, +``` + +- Ensure the roles returned by the interface match the permissions in the route table + +You can look under `src/store/auth` in the application to find the following code: + +```ts +// Set the login user information, ensuring that userInfo.roles is an array and contains permissions from the route table +// For example: userInfo.roles=['super', 'admin'] +authStore.setUserInfo(userInfo); +``` + +At this point, the configuration is complete. You need to ensure that the roles returned by the interface after login match the permissions in the route table; otherwise, access will not be possible. + +### Menu Visible but Access Forbidden + +Sometimes, we need the menu to be visible but access to it forbidden. This can be achieved by setting `menuVisibleWithForbidden` to `true`. In this case, the menu will be visible, but access will be forbidden, redirecting to a 403 page. + +```ts +{ + meta: { + menuVisibleWithForbidden: true, + }, +}, +``` + +## Backend Access Control + +**Implementation Principle**: It is achieved by dynamically generating a routing table through an API, which returns data following a certain structure. The frontend processes this data into a recognizable structure, then adds it to the routing instance using `router.addRoute`, realizing the dynamic generation of permissions. + +**Disadvantage**: The backend needs to provide a data structure that meets the standards, and the frontend needs to process this structure. This is suitable for systems with more complex permissions. + +### Steps + +- Ensure the current mode is set to backend access control + +Adjust `preferences.ts` in the corresponding application directory to ensure `accessMode='backend'`. + +```ts +import { defineOverridesPreferences } from '@vben/preferences'; + +export const overridesPreferences = defineOverridesPreferences({ + // overrides + app: { + accessMode: 'backend', + }, +}); +``` + +- Ensure the structure of the menu data returned by the interface is correct + +You can look under `src/router/access.ts` in the application to find the following code: + +```ts +async function generateAccess(options: GenerateMenuAndRoutesOptions) { + return await generateAccessible(preferences.app.accessMode, { + fetchMenuListAsync: async () => { + // This interface is for the menu data returned by the backend + return await getAllMenus(); + }, + }); +} +``` + +- Interface returns menu data, see comments for explanation + +::: details Example of Interface Returning Menu Data + +```ts +const dashboardMenus = [ + { + // Here, 'BasicLayout' is hardcoded and cannot be changed + component: 'BasicLayout', + meta: { + order: -1, + title: 'page.dashboard.title', + }, + name: 'Dashboard', + path: '/', + redirect: '/analytics', + children: [ + { + name: 'Analytics', + path: '/analytics', + // Here is the path of the page, need to remove 'views/' and '.vue' + component: '/dashboard/analytics/index', + meta: { + affixTab: true, + title: 'page.dashboard.analytics', + }, + }, + { + name: 'Workspace', + path: '/workspace', + component: '/dashboard/workspace/index', + meta: { + title: 'page.dashboard.workspace', + }, + }, + ], + }, +]; +``` + +::: + +At this point, the configuration is complete. You need to ensure that after logging in, the format of the menu returned by the interface is correct; otherwise, access will not be possible. + +## Fine-grained Control of Buttons + +In some cases, we need to control the display of buttons with fine granularity. We can control the display of buttons through interfaces or roles. + +### Permission Code + +The permission code is the code returned by the interface. The logic to determine whether a button is displayed is located under `src/store/auth`: + +```ts +const [fetchUserInfoResult, accessCodes] = await Promise.all([ + fetchUserInfo(), + getAccessCodes(), +]); + +userInfo = fetchUserInfoResult; +authStore.setUserInfo(userInfo); +accessStore.setAccessCodes(accessCodes); +``` + +Locate the `getAccessCodes` corresponding interface, which can be adjusted according to business logic. + +The data structure returned by the permission code is an array of strings, for example: `['AC_100100', 'AC_100110', 'AC_100120', 'AC_100010']` + +With the permission codes, you can use the `AccessControl` component and API provided by `@vben/access` to show and hide buttons. + +#### Component Method + +```vue + + + + +