fix(v-auth): ensure the background mode is correct close #330

Vben
1 parent 8360b1d6
Showing 7 changed files with 24 additions and 47 deletions
build/config/themeConfig.ts
src/components/SimpleMenu/src/components/menu.less
src/design/var/index.less
src/directives/permission.ts
src/layouts/default/header/index.less
src/store/modules/permission.ts
src/views/demo/permission/back/Btn.vue
@@ -38,22 +38,22 @@ export function generateColors({
   tinycolor,
 }: GenerateColorsParams) {
   const arr = new Array(19).fill(0);
-  const lightens = arr.map((t, i) => {
+  const lightens = arr.map((_t, i) => {
     return mixLighten(color, i / 5);
   });
  
-  const darkens = arr.map((t, i) => {
+  const darkens = arr.map((_t, i) => {
     return mixDarken(color, i / 5);
   });
  
-  const alphaColors = arr.map((t, i) => {
+  const alphaColors = arr.map((_t, i) => {
     return tinycolor(color)
       .setAlpha(i / 20)
       .toRgbString();
   });
  
   const tinycolorLightens = arr
-    .map((t, i) => {
+    .map((_t, i) => {
       return tinycolor(color)
         .lighten(i * 5)
         .toHexString();
@@ -61,7 +61,7 @@ export function generateColors({
     .filter((item) => item !== '#ffffff');
  
   const tinycolorDarkens = arr
-    .map((t, i) => {
+    .map((_t, i) => {
       return tinycolor(color)
         .darken(i * 5)
         .toHexString();
@@ -111,7 +111,6 @@
  
       .@{menu-prefix-cls}-submenu-active {
         color: @primary-color !important;
-        // background: fade(@primary-color, 8);
  
         &-border {
           .light-border();
@@ -120,8 +119,6 @@
     }
  
     &-dark {
-      // background: @menu-dark;
-
       .@{menu-prefix-cls}-submenu-active {
         color: #fff !important;
       }
@@ -137,7 +134,6 @@
       cursor: pointer;
       outline: none;
       align-items: center;
-      // transition: all @transition-time @ease-in-out;
  
       &:hover,
       &:active {
@@ -264,12 +260,7 @@
  
       &:hover {
         color: #fff;
-        // background: @menu-dark;
       }
-
-      // &-active:not(.@{menu-prefix-cls}-submenu) {
-      //   color: @primary-color;
-      // }
     }
  
     &-dark&-vertical&-collapse {
@@ -296,11 +287,6 @@
     }
  
     &-dark&-vertical &-submenu &-item {
-      // &:hover {
-      //   color: #fff;
-      //   background: transparent;
-      // }
-
       &-active,
       &-active:hover {
         color: #fff;
@@ -313,11 +299,6 @@
     }
  
     &-dark&-vertical &-opened {
-      // background: @menu-dark-active-bg;
-      // .@{menu-prefix-cls}-submenu-title {
-      //   background: @menu-dark;
-      // }
-
       .@{menu-prefix-cls}-submenu-has-parent-submenu {
         .@{menu-prefix-cls}-submenu-title {
           background: transparent;
@@ -32,9 +32,6 @@
  
 @page-footer-z-index: 99;
  
-// left-menu
-@app-menu-item-height: 42px;
-
 .bem(@n; @content) {
   @{namespace}-@{n} {
     @content();
@@ -5,9 +5,7 @@
  */
 import type { App, Directive, DirectiveBinding } from 'vue';
  
-import projectSetting from '/@/settings/projectSetting';
 import { usePermission } from '/@/hooks/web/usePermission';
-import { PermissionModeEnum } from '/@/enums/appEnum';
  
 function isAuth(el: Element, binding: any) {
   const { hasPermission } = usePermission();
@@ -19,23 +17,12 @@ function isAuth(el: Element, binding: any) {
   }
 }
  
-function isBackMode() {
-  return projectSetting.permissionMode === PermissionModeEnum.BACK;
-}
-
 const mounted = (el: Element, binding: DirectiveBinding<any>) => {
-  if (isBackMode()) return;
-  isAuth(el, binding);
-};
-
-const updated = (el: Element, binding: DirectiveBinding<any>) => {
-  if (!isBackMode()) return;
   isAuth(el, binding);
 };
  
 const authDirective: Directive = {
   mounted,
-  updated,
 };
  
 export function setupPermissionDirective(app: App) {
@@ -175,6 +175,11 @@
  
     .@{header-prefix-cls}-action {
       &__item {
+        .app-iconify {
+          padding: 0 10px;
+          font-size: 16px !important;
+        }
+
         &:hover {
           background: @header-dark-bg-hover-color;
         }
@@ -13,6 +13,7 @@ import { asyncRoutes } from &#39;/@/router/routes&#39;;
 import { filter } from '/@/utils/helper/treeHelper';
 import { toRaw } from 'vue';
 import { getMenuListById } from '/@/api/sys/menu';
+import { getPermCodeByUserId } from '/@/api/sys/user';
  
 import { transformObjToRoute, flatRoutes } from '/@/router/helper/routeHelper';
 import { transformRouteToMenu } from '/@/router/helper/menuHelper';
@@ -83,6 +84,12 @@ class Permission extends VuexModule {
   }
  
   @Action
+  async changePermissionCode(userId: string) {
+    const codeList = await getPermCodeByUserId({ userId });
+    this.commitPermCodeListState(codeList);
+  }
+
+  @Action
   async buildRoutesAction(id?: number | string): Promise<AppRouteRecordRaw[]> {
     const { t } = useI18n();
     let routes: AppRouteRecordRaw[] = [];
@@ -106,6 +113,10 @@ class Permission extends VuexModule {
       });
       // Here to get the background routing menu logic to modify by yourself
       const paramId = id || userStore.getUserInfoState.userId;
+
+      // !Simulate to obtain permission codes from the background,
+      // this function may only need to be executed once, and the actual project can be put at the right time by itself
+      this.changePermissionCode('1');
       if (!paramId) {
         throw new Error('paramId is undefined!');
       }
@@ -59,7 +59,6 @@
   import CurrentPermissionMode from '../CurrentPermissionMode.vue';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { Authority } from '/@/components/Authority';
-  import { getPermCodeByUserId } from '/@/api/sys/user';
   import { permissionStore } from '/@/store/modules/permission';
   import { PermissionModeEnum } from '/@/enums/appEnum';
   import { PageWrapper } from '/@/components/Page';
@@ -69,13 +68,10 @@
     setup() {
       const { hasPermission } = usePermission();
  
-      // !模拟从后台获取权限编码， 该函数可能只需要执行一次，实际项目可以自行放到合适的时机
-      async function changePermissionCode(userId: string) {
-        const codeList = await getPermCodeByUserId({ userId });
-        permissionStore.commitPermCodeListState(codeList);
+      function changePermissionCode(userId: string) {
+        permissionStore.changePermissionCode(userId);
       }
-      // 默认初始化为1
-      changePermissionCode('1');
+
       return {
         hasPermission,
         permissionStore,