docs: 文档兼容最新版v5.8.0

docs/.vuepress/config.js

@@ -3,7 +3,7 @@ const base = require("../../base.js");
 const htmlModules = require("./config/htmlModules.js");
 
 module.exports = {
-  title: "Pure Admin 保姆级文档",
+  title: "Pure Admin 保姆级文档（已兼容最新版v5.8.0）",
   description: "一款开源完全免费且开箱即用的中后台管理系统模版",
   port: 8889,
   base, // '/<仓库名>/'， 默认'/'

docs/01.指南/01.指南/01.介绍.md

@@ -17,17 +17,21 @@ permalink: /pages/introduction
 
 - [点我查看完整版本](https://github.com/pure-admin/vue-pure-admin)
 
-## `vue-pure-admin-max` 版本
-
-- [点我查看 vue-pure-admin-max 版本](https://github.com/pure-admin/vue-pure-admin-max)
-
 ## 精简版本（提供国际化和非国际化两个版本）
 
 精简版是基于 [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin) 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`，并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后，打包大小低于 `350kb`
 
 - [点我查看国际化精简版](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
 - [点我查看非国际化精简版](https://github.com/pure-admin/pure-admin-thin)
 
+## `js` 版本
+
+- [点我查看 js 版本](https://pure-admin.github.io/pure-admin-doc/pages/js/)
+
+## `vue-pure-admin-max` 版本
+
+- [点我查看 max 版本](https://github.com/pure-admin/vue-pure-admin-max)
+
 ## 微前端版本
 
 - [点我查看微前端版本](https://github.com/pure-admin/pure-admin-micro)

docs/01.指南/01.指南/03.目录结构.md

@@ -44,18 +44,20 @@ permalink: /pages/directory
 │   ├── assets  # 字体、图片等静态资源
 │   ├── components  # 自定义通用组件
 │   │   ├── ReAnimateSelector  # [animate.css](https://animate.style/) 选择器组件
-│   │   ├── ReAuth  # 按钮级别权限组件
+│   │   ├── ReAuth  # 按钮级别权限组件（根据路由meta中的auths字段进行判断）
 │   │   ├── ReBarcode  # 条形码组件
 │   │   ├── ReCol  # 封装 element-plus 的 el-col 组件
 │   │   ├── ReCountTo  # 数字动画组件
 │   │   ├── ReCropper  # 图片裁剪组件
+│   │   ├── ReCropperPreview  # 图片裁剪预览组件
 │   │   ├── ReDialog  # 基于 element-plus 中 el-dialog 组件开发的函数式弹框
 │   │   ├── ReFlicker  # 圆点、方形闪烁动画组件
 │   │   ├── ReFlop  # 时间翻牌组件
 │   │   ├── ReFlowChart  # LogicFlow 流程图组件
 │   │   ├── ReIcon  # 图标组件
 │   │   ├── ReImageVerify  # 图形验证码组件
 │   │   ├── ReMap  # 高德地图组件
+│   │   ├── RePerms  # 按钮级别权限组件（根据登录接口返回的permissions字段进行判断）
 │   │   ├── RePureTableBar  # 配合 `@pureadmin/table` 实现快速便捷的表格操作 https://github.com/pure-admin/pure-admin-table */
 │   │   ├── ReQrcode  # 二维码组件
 │   │   ├── ReSeamlessScroll  # 无缝滚动组件
@@ -65,12 +67,15 @@ permalink: /pages/directory
 │   │   ├── ReText  # 支持 Tooltip 提示的文本省略组件
 │   │   ├── ReTreeLine  # 树形连接线组件（基于element-plus）
 │   │   ├── ReTypeit  # 打字机效果组件
+│   │   ├── ReVxeTableBar  # 配合 vxe-table 实现快速便捷的表格操作
 │   ├── config  # 获取平台动态全局配置
 │   ├── directives  # 自定义指令
-│   │   ├── auth  # 按钮级别权限指令
+│   │   ├── auth  # 按钮级别权限指令（根据路由meta中的auths字段进行判断）
 │   │   ├── copy  # 文本复制指令（默认双击复制）
 │   │   ├── longpress  # 长按指令
 │   │   ├── optimize  # 防抖、节流指令
+│   │   ├── perms  # 按钮级别权限指令（根据登录接口返回的permissions字段进行判断）
+│   │   ├── ripple  # 水波纹效果指令
 │   ├── layout  # 主要页面布局
 │   ├── plugins  # 处理一些库或插件，导出更方便的 api
 │   ├── router  # 路由配置
@@ -101,6 +106,7 @@ permalink: /pages/directory
 │   ├── App.vue  # 入口页面
 │   ├── main.ts  # 入口文件
 ├── types  # 全局 TS 类型配置
+│   │   ├── directives.d.ts  # 全局自定义指令类型声明
 │   │   ├── global-components.d.ts  # 自定义全局组件获得 Volar 提示（自定义的全局组件需要在这里声明下才能获得 Volar 类型提示哦）
 │   │   ├── global.d.ts  # 全局类型声明，无需引入直接在 `.vue` 、`.ts` 、`.tsx` 文件使用即可获得类型提示
 │   │   ├── index.d.ts  # 此文件跟同级目录的 global.d.ts 文件一样也是全局类型声明，只不过这里存放一些零散的全局类型，无需引入直接在 .vue 、.ts 、.tsx 文件使用即可获得类型提示
@@ -114,7 +120,6 @@ permalink: /pages/directory
 ├── .env.development  # 开发环境变量配置
 ├── .env.production  # 生产环境变量配置
 ├── .env.staging  # 预发布环境变量配置
-├── .eslintignore  # eslint 语法检查忽略文件
 ├── .gitattributes  # 自定义指定文件属性
 ├── .gitignore  # git 提交忽略文件
 ├── .gitpod.yml  # gitpod 部署配置
@@ -128,16 +133,16 @@ permalink: /pages/directory
 ├── CHANGELOG.en_US.md  # 版本更新日志（英文版）
 ├── CHANGELOG.md  # 版本更新日志（英文版）
 ├── CHANGELOG.zh_CN.md  # 版本更新日志（中文版）
-├── commitlint.config.js  # git 提交前检查配置
 ├── Dockerfile  # 用来构建 docker 镜像
+├── LICENSE  # 证书
+├── README.en-US.md  # README（英文版）
+├── README.md  # README
+├── commitlint.config.js  # git 提交前检查配置
 ├── eslint.config.js  # eslint 语法检查配置
 ├── index.html  # html 主入口
-├── LICENSE  # 证书
 ├── package.json  # 依赖包管理以及命令配置
 ├── pnpm-lock.yaml  # 依赖包版本锁定文件
 ├── postcss.config.js  # postcss 插件配置
-├── README.en-US.md  # README（英文版）
-├── README.md  # README
 ├── stylelint.config.js  # stylelint 配置
 ├── tailwind.config.ts  # tailwindcss 配置
 ├── tsconfig.json  # typescript 配置

docs/01.指南/01.指南/05.平台配置.md

@@ -102,14 +102,14 @@ const ret: ViteEnv = {
 
 ```json
 {
-  "Version": "5.7.0", // 平台版本号
+  "Version": "5.8.0", // 平台版本号
   "Title": "PureAdmin", // 平台标题
   "FixedHeader": true, // 是否固定页头和标签页（true 内容区超出出现纵向滚动条 false 页头、标签页、内容区可纵向滚动）
   "HiddenSideBar": false, // 隐藏菜单和页头，只显示标签页和内容区
   "MultiTagsCache": false, // 是否开启持久化标签 （会缓存）
   "KeepAlive": true, // 是否开启组件缓存（此处不同于路由的 keepAlive，如果此处为 true 表示设置路由的 keepAlive 起效，反之设置 false 屏蔽平台整体的 keepAlive，即使路由设置了keepAlive 也不再起作用）
-  "Locale": "zh", // 默认国际化语言 （zh 中文、en 英文）（会缓存）
-  "Layout": "vertical", // 导航菜单模式 （vertical 左侧菜单模式、horizontal 顶部菜单模式、mix 混合菜单模式、double 左侧双栏菜单模式）（会缓存）
+  "Locale": "zh", // 默认国际化语言 （zh 中文、en 英文）（会缓存）（max版本额外配置：tw 繁體中文、ja 日语、ko 韩语）
+  "Layout": "vertical", // 导航菜单模式 （vertical 左侧菜单模式、horizontal 顶部菜单模式、mix 混合菜单模式）（会缓存）（max版本额外配置：double 左侧双栏菜单模式）
   "Theme": "light", // 主题模式（会缓存）
   "DarkMode": false, // 是否开启暗黑模式 （会缓存）
   "OverallStyle": "light", // 整体风格（浅色：light、深色：dark、自动：system）（会缓存）更多详情看 https://github.com/pure-admin/vue-pure-admin/commit/dd783136229da9e291b518df93227111f4216ad0#commitcomment-137027417

docs/01.指南/01.指南/06.布局.md

@@ -37,6 +37,6 @@ permalink: /pages/layout/
 
 ## 双栏菜单模式
 
-[仅高级版拥有](https://github.com/pure-admin/vue-pure-admin-max?tab=readme-ov-file#vue-pure-admin-max-%E4%B8%8E-vue-pure-admin-%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E5%A6%82%E4%BD%95%E6%8B%A5%E6%9C%89-max-%E7%89%88%E6%9C%AC)
+[仅 max 版支持](https://github.com/pure-admin/vue-pure-admin-max?tab=readme-ov-file#vue-pure-admin-max-%E4%B8%8E-vue-pure-admin-%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E5%A6%82%E4%BD%95%E6%8B%A5%E6%9C%89-max-%E7%89%88%E6%9C%AC)
 
 ![mixNav](~@alias/img/layout/double.jpg)

docs/01.指南/01.指南/08.http请求.md

@@ -96,7 +96,7 @@ async function onLogin() {
 
 ### 如何快速删除 `mock`
 
-来到 [build/plugins.ts](https://github.com/pure-admin/vue-pure-admin/blob/main/build/plugins.ts#L15) 文件，将 `import { vitePluginFakeServer } from "vite-plugin-fake-server";` 注释，最后把 [这里选中](https://github.com/pure-admin/vue-pure-admin/blob/main/build/plugins.ts#L38-L43) 的都注释即可
+来到 [build/plugins.ts](https://github.com/pure-admin/vue-pure-admin/blob/main/build/plugins.ts#L17) 文件，将 `import { vitePluginFakeServer } from "vite-plugin-fake-server";` 注释，最后把 [这里选中](https://github.com/pure-admin/vue-pure-admin/blob/main/build/plugins.ts#L52-#L57) 的都注释即可
 
 ## Axios
 
@@ -263,7 +263,7 @@ export const getLogin = (data?: object) => {
 };
 ```
 
-④ 上面都完成后，我们在需要调用该接口的地方调用即可，参考 [src/store/modules/user.ts](https://github.com/pure-admin/vue-pure-admin/blob/main/src/store/modules/user.ts#L73)
+④ 上面都完成后，我们在需要调用该接口的地方调用即可，参考 [src/store/modules/user.ts](https://github.com/pure-admin/vue-pure-admin/blob/main/src/store/modules/user.ts#L82)
 
 ##### 多个后端地址如何联调
 

docs/01.指南/02.进阶/05.RBAC权限.md

@@ -11,11 +11,11 @@ permalink: /pages/RBAC/
 
 ## 用户
 
-平台用 `mock` 模拟出两个账号，一个是 [admin](https://github.com/pure-admin/vue-pure-admin/blob/main/mock/login.ts#L14)，另一个是 [common](https://github.com/pure-admin/vue-pure-admin/blob/main/mock/login.ts#L28)，用户名字段为 `username` ，为字符串类型，当然平台将用户名在 `pinia` 的 [state](https://github.com/pure-admin/vue-pure-admin/blob/main/src/store/modules/user.ts#L25) 里存了一份
+平台用 `mock` 模拟出两个账号，一个是 [admin](https://github.com/pure-admin/vue-pure-admin/blob/main/mock/login.ts#L14)，另一个是 [common](https://github.com/pure-admin/vue-pure-admin/blob/main/mock/login.ts#L30)，用户名字段为 `username` ，为字符串类型，当然平台将用户名在 `pinia` 的 [state](https://github.com/pure-admin/vue-pure-admin/blob/main/src/store/modules/user.ts#L25) 里存了一份
 
 ## 角色
 
-平台用 `mock` 模拟出两个角色，一个是 [admin](https://github.com/pure-admin/vue-pure-admin/blob/main/mock/login.ts#L17)，另一个是 [common](https://github.com/pure-admin/vue-pure-admin/blob/main/mock/login.ts#L30)，角色存放在 `roles` 字段中，为数组类型，可支持多个角色，当然平台将 `当前登录用户的角色` 在 `pinia` 的 [state](https://github.com/pure-admin/vue-pure-admin/blob/main/src/store/modules/user.ts#L29) 里也存了一份
+平台用 `mock` 模拟出两个角色，一个是 [admin](https://github.com/pure-admin/vue-pure-admin/blob/main/mock/login.ts#L17)，另一个是 [common](https://github.com/pure-admin/vue-pure-admin/blob/main/mock/login.ts#L32)，角色存放在 `roles` 字段中，为数组类型，可支持多个角色，当然平台将 `当前登录用户的角色` 在 `pinia` 的 [state](https://github.com/pure-admin/vue-pure-admin/blob/main/src/store/modules/user.ts#L29) 里也存了一份
 
 ## 权限
 
@@ -55,21 +55,27 @@ permalink: /pages/RBAC/
 
 #### 按钮、组件、类方法权限
 
-针对这三类权限判断，平台提供三种方法 [组件方式判断权限](#组件方式判断权限)、[函数方式判断权限](#函数方式判断权限)、[指令方式判断权限](#指令方式判断权限)
+针对这三类权限，平台提供两种模式，它们都有`组件方式判断权限`、`函数方式判断权限`、`指令方式判断权限` 三种方法
 
-在使用这三种方法前，需要通过返回路由的 `auths` 配置项，赋予该页面按钮级别权限，如下图
+##### 第一种模式，路由返回按钮级别权限
+
+通过路由的 `auths` 配置项，赋予对应页面按钮级别权限，如下图
 
 ![auths](~@alias/img/rbac/auths.jpg)
 
-##### 组件方式判断权限
+:::tip
+单个路由的 `auths` 字段中按钮级别权限标识必须保持唯一，而在不同路由的 `auths` 字段中可以重复使用相同的权限标识
+:::
+
+###### 组件方式判断权限
 
-- 按钮、组件权限可用
+按钮、组件权限可用
 
-###### 实现原理、代码
+- 实现原理、代码
 
 通过 [hasAuth](https://github.com/pure-admin/vue-pure-admin/blob/main/src/router/utils.ts#L359) 函数，进行权限组件的封装，使用 `Vue` 提供的 [Fragment](https://cn.vuejs.org/guide/extras/rendering-mechanism.html#patch-flags) 标签进行包裹，这样可让被包裹的组件无多余标签，减少渲染成本。[查看具体代码](https://github.com/pure-admin/vue-pure-admin/blob/main/src/components/ReAuth/src/auth.tsx)
 
-###### 如何配置
+- 如何配置
 
 具体参考 [views/permission/button/index.vue](https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/index.vue#L25-L46)
 
@@ -80,18 +86,18 @@ permalink: /pages/RBAC/
 ```
 
 ::: tip
-平台已经全局注册 [Auth](https://github.com/pure-admin/vue-pure-admin/blob/main/src/main.ts#L46-L47) 组件，无需重复注册
+平台已经全局注册 [Auth](https://github.com/pure-admin/vue-pure-admin/blob/main/src/main.ts#L48) 组件，无需重复注册
 :::
 
-##### 函数方式判断权限
+###### 函数方式判断权限
 
-- 按钮、组件、类方法权限都可用
+按钮、组件、类方法权限都可用
 
-###### 实现原理、代码
+- 实现原理、代码
 
 通过 [hasAuth](https://github.com/pure-admin/vue-pure-admin/blob/main/src/router/utils.ts#L359) 函数判断某些按钮、组件、类方法是否有按钮级别的权限
 
-###### 如何配置
+- 如何配置
 
 具体参考 [views/permission/button/index.vue](https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/index.vue#L55-L74)
 
@@ -105,15 +111,15 @@ permalink: /pages/RBAC/
 hasAuth("btn_add") ? "显示" : "隐藏";
 ```
 
-##### 指令方式判断权限
+###### 指令方式判断权限
 
-- 按钮、组件权限可用。指令方式不能动态修改权限
+按钮、组件权限可用。指令方式不能动态修改权限
 
-###### 实现原理、代码
+- 实现原理、代码
 
 通过 [hasAuth](https://github.com/pure-admin/vue-pure-admin/blob/main/src/router/utils.ts#L359) 函数，进行权限指令的封装。[查看具体代码](https://github.com/pure-admin/vue-pure-admin/blob/main/src/directives/auth/index.ts)
 
-###### 如何配置
+- 如何配置
 
 具体参考 [views/permission/button/index.vue](https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/index.vue#L85-L102)
 
@@ -123,6 +129,78 @@ hasAuth("btn_add") ? "显示" : "隐藏";
 </el-button>
 ```
 
+##### 第二种模式，登录接口返回按钮级别权限
+
+通过登录接口的`permissions`字段返回按钮级别权限，如下图
+
+![permissions](~@alias/img/rbac/permissions.jpg)
+
+:::warning
+`permissions`字段里的按钮级别权限标识需保持唯一
+:::
+
+###### 组件方式判断权限
+
+按钮、组件权限可用
+
+- 实现原理、代码
+
+通过 [hasPerms](https://github.com/pure-admin/vue-pure-admin/blob/main/src/utils/auth.ts#L131) 函数，进行权限组件的封装，使用 `Vue` 提供的 [Fragment](https://cn.vuejs.org/guide/extras/rendering-mechanism.html#patch-flags) 标签进行包裹，这样可让被包裹的组件无多余标签，减少渲染成本。[查看具体代码](https://github.com/pure-admin/vue-pure-admin/blob/main/src/components/RePerms/src/perms.tsx)
+
+- 如何配置
+
+具体参考 [views/permission/button/perms.vue](https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/perms.vue#L31-L52)
+
+```Vue
+<Perms value="permission:btn:add">
+  <el-button plain type="warning"> 拥有code：'permission:btn:add' 权限可见 </el-button>
+</Perms>
+```
+
+::: tip
+平台已经全局注册 [Perms](https://github.com/pure-admin/vue-pure-admin/blob/main/src/main.ts#L49) 组件，无需重复注册
+:::
+
+###### 函数方式判断权限
+
+按钮、组件、类方法权限都可用
+
+- 实现原理、代码
+
+通过 [hasPerms](https://github.com/pure-admin/vue-pure-admin/blob/main/src/utils/auth.ts#L131) 函数判断某些按钮、组件、类方法是否有按钮级别的权限
+
+- 如何配置
+
+具体参考 [views/permission/button/perms.vue](https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/perms.vue#L61-L84)
+
+```Vue
+<el-button v-if="hasPerms('permission:btn:add')" plain type="warning">
+  拥有code：'permission:btn:add' 权限可见
+</el-button>
+```
+
+```ts
+hasPerms("btn_add") ? "显示" : "隐藏";
+```
+
+###### 指令方式判断权限
+
+按钮、组件权限可用。指令方式不能动态修改权限
+
+- 实现原理、代码
+
+通过 [hasPerms](https://github.com/pure-admin/vue-pure-admin/blob/main/src/utils/auth.ts#L131) 函数，进行权限指令的封装。[查看具体代码](https://github.com/pure-admin/vue-pure-admin/blob/main/src/directives/perms/index.ts)
+
+- 如何配置
+
+具体参考 [views/permission/button/perms.vue](https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/perms.vue#L95-L112)
+
+```Vue
+<el-button v-perms="'permission:btn:add'" plain type="warning">
+  拥有code：'permission:btn:add' 权限可见
+</el-button>
+```
+
 ### 细粒度权限
 
 #### 数据权限

docs/01.指南/02.进阶/06.类型声明.md

@@ -53,7 +53,7 @@ permalink: /pages/typescript/
 
 拿平台封装的 [Auth](https://github.com/pure-admin/vue-pure-admin/tree/main/src/components/ReAuth) 组件举例
 
-① 我们将 `Auth` 组件在 [main.ts](https://github.com/pure-admin/vue-pure-admin/blob/main/src/main.ts#L46-L47) 中进行了全局注册
+① 我们将 `Auth` 组件在 [main.ts](https://github.com/pure-admin/vue-pure-admin/blob/main/src/main.ts#L48) 中进行了全局注册
 
 ② 然后将 `Auth` 组件在 [global-components.d](https://github.com/pure-admin/vue-pure-admin/blob/main/types/global-components.d.ts#L9) 中引入，所有的全局组件都应该在 `GlobalComponents` 下引入才可获得类型支持，如下图
 

docs/01.指南/02.进阶/08.自定义免登录.md

@@ -28,6 +28,6 @@ permalink: /pages/nologin/
 
 ## 具体实现
 
-用户登录后判断是否勾选免登录，来给`key`为`multiple-tabs`的数据存储到`cookie`中，如果勾选就设置对应的过期时间，反之不设置 [具体代码](https://github.com/pure-admin/vue-pure-admin/blob/main/src/utils/auth.ts#L59-L67)
+用户登录后判断是否勾选免登录，来给`key`为`multiple-tabs`的数据存储到`cookie`中，如果勾选就设置对应的过期时间，反之不设置 [具体代码](https://github.com/pure-admin/vue-pure-admin/blob/main/src/utils/auth.ts#L61-L69)
 
-自定义所需天数在[此处配置](https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/login/index.vue#L243-L245)
+自定义所需天数在[此处配置](https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/login/index.vue#L247-L249)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pure-admin-doc",
-  "version": "5.1.0",
+  "version": "5.8.0",
   "scripts": {
     "dev": "export NODE_OPTIONS=--openssl-legacy-provider && vuepress dev docs",
     "build": "export NODE_OPTIONS=--openssl-legacy-provider && vuepress build docs",