Merge branch 'main' into project_management

.vscode/settings.json

@@ -36,6 +36,7 @@
     "v-copy",
     "v-longpress",
     "v-optimize",
+    "v-perms",
     "v-ripple"
   ],
   "vscodeCustomCodeColor.highlightValueColor": "#b392f0",

Dockerfile

@@ -1,8 +1,8 @@
-FROM node:18-alpine as build-stage
+FROM node:20-alpine as build-stage
 
 WORKDIR /app
 RUN corepack enable
-RUN corepack prepare pnpm@8.6.10 --activate
+RUN corepack prepare pnpm@latest --activate
 
 RUN npm config set registry https://registry.npmmirror.com
 

mock/asyncRoutes.ts

@@ -1,5 +1,59 @@
 // 模拟后端动态生成路由
 import { defineFakeRoute } from "vite-plugin-fake-server/client";
+
+/**
+ * roles：页面级别权限，这里模拟二种 "admin"、"common"
+ * admin：管理员角色
+ * common：普通角色
+ */
+const permissionRouter = {
+  path: "/permission",
+  meta: {
+    title: "权限管理",
+    icon: "ep:lollipop",
+    rank: 10
+  },
+  children: [
+    {
+      path: "/permission/page/index",
+      name: "PermissionPage",
+      meta: {
+        title: "页面权限",
+        roles: ["admin", "common"]
+      }
+    },
+    {
+      path: "/permission/button",
+      meta: {
+        title: "按钮权限",
+        roles: ["admin", "common"]
+      },
+      children: [
+        {
+          path: "/permission/button/router",
+          component: "permission/button/index",
+          name: "PermissionButtonRouter",
+          meta: {
+            title: "路由返回按钮权限",
+            auths: [
+              "permission:btn:add",
+              "permission:btn:edit",
+              "permission:btn:delete"
+            ]
+          }
+        },
+        {
+          path: "/permission/button/login",
+          component: "permission/button/perms",
+          name: "PermissionButtonLogin",
+          meta: {
+            title: "登录接口返回按钮权限"
+          }
+        }
+      ]
+    }
+  ]
+};
 export default defineFakeRoute([
   {
     url: "/get-async-routes",

mock/login.ts

@@ -15,6 +15,8 @@ export default defineFakeRoute([
             nickname: "NiceAsiv",
             // 一个用户可能有多个角色
             roles: ["admin"],
+            // 按钮级别权限
+            permissions: ["*:*:*"],
             accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
             refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
             expires: "2030/10/30 00:00:00"
@@ -28,6 +30,7 @@ export default defineFakeRoute([
             username: "common",
             nickname: "小林",
             roles: ["common"],
+            permissions: ["permission:btn:add", "permission:btn:edit"],
             accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
             refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
             expires: "2030/10/30 00:00:00"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pure-admin-thin",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -49,36 +49,36 @@
   },
   "dependencies": {
     "@pureadmin/descriptions": "^1.2.1",
-    "@pureadmin/table": "^3.1.2",
+    "@pureadmin/table": "^3.2.0",
-    "@pureadmin/utils": "^2.4.7",
+    "@pureadmin/utils": "^2.4.8",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^10.11.1",
     "@vueuse/motion": "^2.2.3",
     "animate.css": "^4.1.1",
-    "axios": "^1.7.2",
+    "axios": "^1.7.4",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "echarts": "^5.5.1",
-    "element-plus": "^2.7.6",
+    "element-plus": "^2.8.0",
     "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.1.7",
+    "pinia": "^2.2.2",
-    "pinyin-pro": "^3.23.0",
+    "pinyin-pro": "^3.24.2",
-    "qs": "^6.12.2",
+    "qs": "^6.13.0",
     "responsive-storage": "^2.2.0",
     "sortablejs": "^1.15.2",
     "vue": "^3.4.31",
     "vue-chartjs": "^5.3.1",
     "vue-router": "^4.4.0",
     "vue-tippy": "^6.4.4",
-    "vue-types": "^5.1.2"
+    "vue-types": "^5.1.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
+    "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@commitlint/types": "^19.0.3",
-    "@eslint/js": "^9.6.0",
+    "@eslint/js": "^9.9.0",
     "@faker-js/faker": "^8.4.1",
     "@iconify-icons/ep": "^1.2.12",
     "@iconify-icons/ri": "^1.2.10",
@@ -86,52 +86,52 @@
     "@pureadmin/theme": "^3.2.0",
     "@types/gradient-string": "^1.1.6",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.16.1",
     "@types/nprogress": "^0.2.3",
     "@types/qs": "^6.9.15",
     "@types/sortablejs": "^1.15.8",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.15.0",
+    "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.2",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "boxen": "^7.1.1",
-    "cssnano": "^7.0.3",
+    "cssnano": "^7.0.5",
-    "eslint": "^9.6.0",
+    "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-define-config": "^2.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-vue": "^9.27.0",
     "gradient-string": "^2.0.2",
-    "husky": "^9.0.11",
+    "husky": "^9.1.4",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.2.9",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.41",
     "postcss-html": "^1.7.0",
     "postcss-import": "^16.1.0",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
-    "rimraf": "^5.0.7",
+    "rimraf": "^5.0.10",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.77.6",
+    "sass": "^1.77.8",
-    "stylelint": "^16.6.1",
+    "stylelint": "^16.8.2",
     "stylelint-config-recess-order": "^5.0.1",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-prettier": "^5.0.0",
+    "stylelint-prettier": "^5.0.2",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
-    "vite": "^5.3.2",
+    "vite": "^5.4.1",
     "vite-plugin-cdn-import": "^1.0.1",
-    "vite-plugin-checker": "^0.7.0",
+    "vite-plugin-checker": "^0.7.2",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-fake-server": "^2.1.1",
     "vite-plugin-remove-console": "^2.2.0",
     "vite-plugin-router-warn": "^1.0.0",
-    "vite-plugin-vue-inspector": "^5.1.2",
+    "vite-plugin-vue-inspector": "^5.1.3",
     "vite-svg-loader": "^5.1.0",
     "vue-eslint-parser": "^9.4.3",
-    "vue-tsc": "^2.0.24"
+    "vue-tsc": "^2.0.29"
   },
   "engines": {
     "node": "^18.18.0 || ^20.9.0 || >=21.1.0",

src/api/user.ts

@@ -11,6 +11,8 @@ export type UserResult = {
     nickname: string;
     /** 当前登录用户的角色 */
     roles: Array<string>;
+    /** 按钮级别权限 */
+    permissions: Array<string>;
     /** `token` */
     accessToken: string;
     /** 用于调用刷新`accessToken`的接口时所需的`token` */

src/components/ReDialog/index.vue

@@ -15,6 +15,7 @@ defineOptions({
   name: "ReDialog"
 });
 
+const sureBtnMap = ref({});
 const fullscreen = ref(false);
 
 const footerButtons = computed(() => {
@@ -43,10 +44,26 @@ const footerButtons = computed(() => {
             bg: true,
             popconfirm: options?.popconfirm,
             btnClick: ({ dialog: { options, index } }) => {
-              const done = () =>
+              if (options?.sureBtnLoading) {
+                sureBtnMap.value[index] = Object.assign(
+                  {},
+                  sureBtnMap.value[index],
+                  {
+                    loading: true
+                  }
+                );
+              }
+              const closeLoading = () => {
+                if (options?.sureBtnLoading) {
+                  sureBtnMap.value[index].loading = false;
+                }
+              };
+              const done = () => {
+                closeLoading();
                 closeDialog(options, index, { command: "sure" });
+              };
               if (options?.beforeSure && isFunction(options?.beforeSure)) {
-                options.beforeSure(done, { options, index });
+                options.beforeSure(done, { options, index, closeLoading });
               } else {
                 done();
               }
@@ -172,6 +189,7 @@ function handleClose(
           <el-button
             v-else
             v-bind="btn"
+            :loading="key === 1 && sureBtnMap[index]?.loading"
             @click="
               btn.btnClick({
                 dialog: { options, index },

src/components/ReDialog/type.ts

@@ -69,11 +69,11 @@ type DialogProps = {
 type Popconfirm = {
   /** 标题 */
   title?: string;
-  /** 确认按钮文字 */
+  /** 确定按钮文字 */
   confirmButtonText?: string;
   /** 取消按钮文字 */
   cancelButtonText?: string;
-  /** 确认按钮类型，默认 `primary` */
+  /** 确定按钮类型，默认 `primary` */
   confirmButtonType?: ButtonType;
   /** 取消按钮类型，默认 `text` */
   cancelButtonType?: ButtonType;
@@ -121,7 +121,7 @@ type ButtonProps = {
   round?: boolean;
   /** 是否为圆形按钮，默认 `false` */
   circle?: boolean;
-  /** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
+  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
   popconfirm?: Popconfirm;
   /** 是否为加载中状态，默认 `false` */
   loading?: boolean;
@@ -160,8 +160,10 @@ interface DialogOptions extends DialogProps {
   props?: any;
   /** 是否隐藏 `Dialog` 按钮操作区的内容 */
   hideFooter?: boolean;
-  /** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
+  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
   popconfirm?: Popconfirm;
+  /** 点击确定按钮后是否开启 `loading` 加载动画 */
+  sureBtnLoading?: boolean;
   /**
    * @description 自定义对话框标题的内容渲染器
    * @see {@link https://element-plus.org/zh-CN/component/dialog.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%B4%E9%83%A8}
@@ -259,10 +261,13 @@ interface DialogOptions extends DialogProps {
     done: Function,
     {
       options,
-      index
+      index,
+      closeLoading
     }: {
       options: DialogOptions;
       index: number;
+      /** 关闭确定按钮的 `loading` 加载动画 */
+      closeLoading: Function;
     }
   ) => void;
 }

src/components/RePerms/index.ts

@@ -0,0 +1,5 @@
+import perms from "./src/perms";
+
+const Perms = perms;
+
+export { Perms };

src/components/RePerms/src/perms.tsx

@@ -0,0 +1,20 @@
+import { defineComponent, Fragment } from "vue";
+import { hasPerms } from "@/utils/auth";
+
+export default defineComponent({
+  name: "Perms",
+  props: {
+    value: {
+      type: undefined,
+      default: []
+    }
+  },
+  setup(props, { slots }) {
+    return () => {
+      if (!slots) return null;
+      return hasPerms(props.value) ? (
+        <Fragment>{slots.default?.()}</Fragment>
+      ) : null;
+    };
+  }
+});

src/components/RePureTableBar/src/bar.tsx

@@ -17,6 +17,8 @@ import {
   getKeyList
 } from "@pureadmin/utils";
 
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 import DragIcon from "@/assets/table-bar/drag.svg?component";
 import ExpandIcon from "@/assets/table-bar/expand.svg?component";
 import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
@@ -56,6 +58,7 @@ export default defineComponent({
     const size = ref("default");
     const loading = ref(false);
     const checkAll = ref(true);
+    const isFullscreen = ref(false);
     const isIndeterminate = ref(false);
     const instance = getCurrentInstance()!;
     const isExpandAll = ref(props.isExpandAll);
@@ -239,7 +242,18 @@ export default defineComponent({
 
     return () => (
       <>
-        <div {...attrs} class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
+        <div
+          {...attrs}
+          class={[
+            "w-[99/100]",
+            "px-2",
+            "pb-2",
+            "bg-bg_color",
+            isFullscreen.value
+              ? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
+              : "mt-2"
+          ]}
+        >
           <div class="flex justify-between w-full h-[60px] p-4">
             {slots?.title ? (
               slots.title()
@@ -353,6 +367,14 @@ export default defineComponent({
                   </el-scrollbar>
                 </div>
               </el-popover>
+              <el-divider direction="vertical" />
+
+              <iconifyIconOffline
+                class={["w-[16px]", iconClass.value]}
+                icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
+                v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
+                onClick={() => (isFullscreen.value = !isFullscreen.value)}
+              />
             </div>
           </div>
           {slots.default({

src/directives/index.ts

@@ -2,4 +2,5 @@ export * from "./auth";
 export * from "./copy";
 export * from "./longpress";
 export * from "./optimize";
+export * from "./perms";
 export * from "./ripple";

src/directives/perms/index.ts

@@ -0,0 +1,15 @@
+import { hasPerms } from "@/utils/auth";
+import type { Directive, DirectiveBinding } from "vue";
+
+export const perms: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
+    const { value } = binding;
+    if (value) {
+      !hasPerms(value) && el.parentNode?.removeChild(el);
+    } else {
+      throw new Error(
+        "[Directive: perms]: need perms! Like v-perms=\"['btn.add','btn.edit']\""
+      );
+    }
+  }
+};

src/layout/components/lay-sidebar/NavHorizontal.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { isAllEmpty } from "@pureadmin/utils";
+import { emitter } from "@/utils/mitt";
-import { ref, nextTick, computed } from "vue";
 import { useNav } from "@/layout/hooks/useNav";
 import LaySearch from "../lay-search/index.vue";
 import LayNotice from "../lay-notice/index.vue";
+import { responsiveStorageNameSpace } from "@/config";
+import { ref, nextTick, computed, onMounted } from "vue";
+import { storageLocal, isAllEmpty } from "@pureadmin/utils";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
 import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
@@ -12,6 +14,11 @@ import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
 import Setting from "@iconify-icons/ri/settings-3-line";
 
 const menuRef = ref();
+const showLogo = ref(
+  storageLocal().getItem<StorageConfigs>(
+    `${responsiveStorageNameSpace()}configure`
+  )?.showLogo ?? true
+);
 
 const {
   route,
@@ -32,6 +39,12 @@ const defaultActive = computed(() =>
 nextTick(() => {
   menuRef.value?.handleResize();
 });
+
+onMounted(() => {
+  emitter.on("logoChange", key => {
+    showLogo.value = key;
+  });
+});
 </script>
 
 <template>
@@ -39,7 +52,7 @@ nextTick(() => {
     v-loading="usePermissionStoreHook().wholeMenus.length === 0"
     class="horizontal-header"
   >
-    <div class="horizontal-header-left" @click="backTopMenu">
+    <div v-if="showLogo" class="horizontal-header-left" @click="backTopMenu">
       <img :src="getLogo()" alt="logo" />
       <span>{{ title }}</span>
     </div>

src/main.ts

@@ -46,7 +46,9 @@ app.component("FontIcon", FontIcon);
 
 // 全局注册按钮级别权限组件
 import { Auth } from "@/components/ReAuth";
+import { Perms } from "@/components/RePerms";
 app.component("Auth", Auth);
+app.component("Perms", Perms);
 
 // 全局注册vue-tippy
 import "tippy.js/dist/tippy.css";

src/router/utils.ts

@@ -355,7 +355,7 @@ function getAuths(): Array<string> {
   return router.currentRoute.value.meta.auths as Array<string>;
 }
 
-/** 是否有按钮级别的权限 */
+/** 是否有按钮级别的权限（根据路由`meta`中的`auths`字段进行判断）*/
 function hasAuth(value: string | Array<string>): boolean {
   if (!value) return false;
   /** 从当前路由的`meta`字段里获取按钮级别的所有自定义`code`值 */

src/store/modules/user.ts

@@ -27,6 +27,9 @@ export const useUserStore = defineStore({
     nickname: storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "",
     // 页面级别权限
     roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
+    // 按钮级别权限
+    permissions:
+      storageLocal().getItem<DataInfo<number>>(userKey)?.permissions ?? [],
     // 是否勾选了登录页的免登录
     isRemembered: false,
     // 登录页的免登录存储几天，默认7天
@@ -49,6 +52,10 @@ export const useUserStore = defineStore({
     SET_ROLES(roles: Array<string>) {
       this.roles = roles;
     },
+    /** 存储按钮级别权限 */
+    SET_PERMS(permissions: Array<string>) {
+      this.permissions = permissions;
+    },
     /** 存储是否勾选了登录页的免登录 */
     SET_ISREMEMBERED(bool: boolean) {
       this.isRemembered = bool;
@@ -74,6 +81,7 @@ export const useUserStore = defineStore({
     logOut() {
       this.username = "";
       this.roles = [];
+      this.permissions = [];
       removeToken();
       useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
       resetRouter();

src/store/types.ts

@@ -41,6 +41,7 @@ export type userType = {
   username?: string;
   nickname?: string;
   roles?: Array<string>;
+  permissions?: Array<string>;
   isRemembered?: boolean;
   loginDay?: number;
 };

src/utils/auth.ts

@@ -1,6 +1,6 @@
 import Cookies from "js-cookie";
-import { storageLocal } from "@pureadmin/utils";
 import { useUserStoreHook } from "@/store/modules/user";
+import { storageLocal, isString, isIncludeAllChildren } from "@pureadmin/utils";
 
 export interface DataInfo<T> {
   /** token */
@@ -17,6 +17,8 @@ export interface DataInfo<T> {
   nickname?: string;
   /** 当前登录用户的角色 */
   roles?: Array<string>;
+  /** 当前登录用户的按钮级别权限 */
+  permissions?: Array<string>;
 }
 
 export const userKey = "user-info";
@@ -41,7 +43,7 @@ export function getToken(): DataInfo<number> {
  * @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
  * 无感刷新：后端返回`accessToken`（访问接口使用的`token`）、`refreshToken`（用于调用刷新`accessToken`的接口时所需的`token`，`refreshToken`的过期时间（比如30天）应大于`accessToken`的过期时间（比如2小时））、`expires`（`accessToken`的过期时间）
  * 将`accessToken`、`expires`、`refreshToken`这三条信息放在key值为authorized-token的cookie里（过期自动销毁）
- * 将`avatar`、`username`、`nickname`、`roles`、`refreshToken`、`expires`这六条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
+ * 将`avatar`、`username`、`nickname`、`roles`、`permissions`、`refreshToken`、`expires`这七条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
  */
 export function setToken(data: DataInfo<Date>) {
   let expires = 0;
@@ -66,18 +68,20 @@ export function setToken(data: DataInfo<Date>) {
       : {}
   );
 
-  function setUserKey({ avatar, username, nickname, roles }) {
+  function setUserKey({ avatar, username, nickname, roles, permissions }) {
     useUserStoreHook().SET_AVATAR(avatar);
     useUserStoreHook().SET_USERNAME(username);
     useUserStoreHook().SET_NICKNAME(nickname);
     useUserStoreHook().SET_ROLES(roles);
+    useUserStoreHook().SET_PERMS(permissions);
     storageLocal().setItem(userKey, {
       refreshToken,
       expires,
       avatar,
       username,
       nickname,
-      roles
+      roles,
+      permissions
     });
   }
 
@@ -87,7 +91,8 @@ export function setToken(data: DataInfo<Date>) {
       avatar: data?.avatar ?? "",
       username,
       nickname: data?.nickname ?? "",
-      roles
+      roles,
+      permissions: data?.permissions ?? []
     });
   } else {
     const avatar =
@@ -98,11 +103,14 @@ export function setToken(data: DataInfo<Date>) {
       storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "";
     const roles =
       storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
+    const permissions =
+      storageLocal().getItem<DataInfo<number>>(userKey)?.permissions ?? [];
     setUserKey({
       avatar,
       username,
       nickname,
-      roles
+      roles,
+      permissions
     });
   }
 }
@@ -118,3 +126,16 @@ export function removeToken() {
 export const formatToken = (token: string): string => {
   return "Bearer " + token;
 };
+
+/** 是否有按钮级别的权限（根据登录接口返回的`permissions`字段进行判断）*/
+export const hasPerms = (value: string | Array<string>): boolean => {
+  if (!value) return false;
+  const allPerms = "*:*:*";
+  const { permissions } = useUserStoreHook();
+  if (!permissions) return false;
+  if (permissions.length === 1 && permissions[0] === allPerms) return true;
+  const isAuths = isString(value)
+    ? permissions.includes(value)
+    : isIncludeAllChildren(value, permissions);
+  return isAuths ? true : false;
+};

src/views/permission/button/index.vue

@@ -2,7 +2,7 @@
 import { hasAuth, getAuths } from "@/router/utils";
 
 defineOptions({
-  name: "PermissionButton"
+  name: "PermissionButtonRouter"
 });
 </script>
 

src/views/permission/button/perms.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { hasPerms } from "@/utils/auth";
+import { useUserStoreHook } from "@/store/modules/user";
+
+const { permissions } = useUserStoreHook();
+
+defineOptions({
+  name: "PermissionButtonLogin"
+});
+</script>
+
+<template>
+  <div>
+    <p class="mb-2">当前拥有的code列表：{{ permissions }}</p>
+    <p v-show="permissions?.[0] === '*:*:*'" class="mb-2">
+      *:*:* 代表拥有全部按钮级别权限
+    </p>
+
+    <el-card shadow="never" class="mb-2">
+      <template #header>
+        <div class="card-header">组件方式判断权限</div>
+      </template>
+      <el-space wrap>
+        <Perms value="permission:btn:add">
+          <el-button plain type="warning">
+            拥有code：'permission:btn:add' 权限可见
+          </el-button>
+        </Perms>
+        <Perms :value="['permission:btn:edit']">
+          <el-button plain type="primary">
+            拥有code：['permission:btn:edit'] 权限可见
+          </el-button>
+        </Perms>
+        <Perms
+          :value="[
+            'permission:btn:add',
+            'permission:btn:edit',
+            'permission:btn:delete'
+          ]"
+        >
+          <el-button plain type="danger">
+            拥有code：['permission:btn:add', 'permission:btn:edit',
+            'permission:btn:delete'] 权限可见
+          </el-button>
+        </Perms>
+      </el-space>
+    </el-card>
+
+    <el-card shadow="never" class="mb-2">
+      <template #header>
+        <div class="card-header">函数方式判断权限</div>
+      </template>
+      <el-space wrap>
+        <el-button v-if="hasPerms('permission:btn:add')" plain type="warning">
+          拥有code：'permission:btn:add' 权限可见
+        </el-button>
+        <el-button
+          v-if="hasPerms(['permission:btn:edit'])"
+          plain
+          type="primary"
+        >
+          拥有code：['permission:btn:edit'] 权限可见
+        </el-button>
+        <el-button
+          v-if="
+            hasPerms([
+              'permission:btn:add',
+              'permission:btn:edit',
+              'permission:btn:delete'
+            ])
+          "
+          plain
+          type="danger"
+        >
+          拥有code：['permission:btn:add', 'permission:btn:edit',
+          'permission:btn:delete'] 权限可见
+        </el-button>
+      </el-space>
+    </el-card>
+
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          指令方式判断权限（该方式不能动态修改权限）
+        </div>
+      </template>
+      <el-space wrap>
+        <el-button v-perms="'permission:btn:add'" plain type="warning">
+          拥有code：'permission:btn:add' 权限可见
+        </el-button>
+        <el-button v-perms="['permission:btn:edit']" plain type="primary">
+          拥有code：['permission:btn:edit'] 权限可见
+        </el-button>
+        <el-button
+          v-perms="[
+            'permission:btn:add',
+            'permission:btn:edit',
+            'permission:btn:delete'
+          ]"
+          plain
+          type="danger"
+        >
+          拥有code：['permission:btn:add', 'permission:btn:edit',
+          'permission:btn:delete'] 权限可见
+        </el-button>
+      </el-space>
+    </el-card>
+  </div>
+</template>

types/directives.d.ts

@@ -5,7 +5,7 @@ declare module "vue" {
   export interface ComponentCustomProperties {
     /** `Loading` 动画加载指令，具体看：https://element-plus.org/zh-CN/component/loading.html#%E6%8C%87%E4%BB%A4 */
     vLoading: Directive<Element, boolean>;
-    /** 按钮权限指令 */
+    /** 按钮权限指令（根据路由`meta`中的`auths`字段进行判断）*/
     vAuth: Directive<HTMLElement, string | Array<string>>;
     /** 文本复制指令（默认双击复制） */
     vCopy: Directive<CopyEl, string>;
@@ -13,6 +13,8 @@ declare module "vue" {
     vLongpress: Directive<HTMLElement, Function>;
     /** 防抖、节流指令 */
     vOptimize: Directive<HTMLElement, OptimizeOptions>;
+    /** 按钮权限指令（根据登录接口返回的`permissions`字段进行判断）*/
+    vPerms: Directive<HTMLElement, string | Array<string>>;
     /**
      * `v-ripple`指令，用法如下：
      * 1. `v-ripple`代表启用基本的`ripple`功能

types/global-components.d.ts

@@ -7,6 +7,7 @@ declare module "vue" {
     IconifyIconOnline: (typeof import("../src/components/ReIcon"))["IconifyIconOnline"];
     FontIcon: (typeof import("../src/components/ReIcon"))["FontIcon"];
     Auth: (typeof import("../src/components/ReAuth"))["Auth"];
+    Perms: (typeof import("../src/components/RePerms"))["Perms"];
   }
 }