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

Vben

2021-03-18 67962f1deea31d695d20ae0ea7fc39b39c1eea47

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

 build/config/themeConfig.ts

@@ -38,22 +38,22 @@
  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 @@
    .filter((item) => item !== '#ffffff');

  const tinycolorDarkens = arr
    .map((t, i) => {
    .map((_t, i) => {
      return tinycolor(color)
        .darken(i * 5)
        .toHexString();

 src/components/SimpleMenu/src/components/menu.less

@@ -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;

 src/design/var/index.less

@@ -32,9 +32,6 @@

@page-footer-z-index: 99;

// left-menu
@app-menu-item-height: 42px;

.bem(@n; @content) {
  @{namespace}-@{n} {
    @content();

 src/directives/permission.ts

@@ -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 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) {

 src/layouts/default/header/index.less

@@ -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;
        }

 src/store/modules/permission.ts

@@ -13,6 +13,7 @@
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 @@
  }

  @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 @@
      });
      // 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!');
      }

 src/views/demo/permission/back/Btn.vue

@@ -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,