From 67962f1deea31d695d20ae0ea7fc39b39c1eea47 Mon Sep 17 00:00:00 2001 From: Vben Date: Thu, 18 Mar 2021 22:38:36 +0800 Subject: [PATCH] fix(v-auth): ensure the background mode is correct close #330 --- build/config/themeConfig.ts | 10 +++++----- .../SimpleMenu/src/components/menu.less | 19 ------------------- src/design/var/index.less | 3 --- src/directives/permission.ts | 13 ------------- src/layouts/default/header/index.less | 5 +++++ src/store/modules/permission.ts | 11 +++++++++++ src/views/demo/permission/back/Btn.vue | 10 +++------- 7 files changed, 24 insertions(+), 47 deletions(-) diff --git a/build/config/themeConfig.ts b/build/config/themeConfig.ts index 4b004af3..24fe9038 100644 --- a/build/config/themeConfig.ts +++ b/build/config/themeConfig.ts @@ -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(); diff --git a/src/components/SimpleMenu/src/components/menu.less b/src/components/SimpleMenu/src/components/menu.less index 7fda2eca..0cc66dd0 100644 --- a/src/components/SimpleMenu/src/components/menu.less +++ b/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; diff --git a/src/design/var/index.less b/src/design/var/index.less index bd8e12ef..1689f76d 100644 --- a/src/design/var/index.less +++ b/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(); diff --git a/src/directives/permission.ts b/src/directives/permission.ts index 248ca96c..ca5d0fca 100644 --- a/src/directives/permission.ts +++ b/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 isAuth(el: Element, binding: any) { } } -function isBackMode() { - return projectSetting.permissionMode === PermissionModeEnum.BACK; -} - const mounted = (el: Element, binding: DirectiveBinding) => { - if (isBackMode()) return; - isAuth(el, binding); -}; - -const updated = (el: Element, binding: DirectiveBinding) => { - if (!isBackMode()) return; isAuth(el, binding); }; const authDirective: Directive = { mounted, - updated, }; export function setupPermissionDirective(app: App) { diff --git a/src/layouts/default/header/index.less b/src/layouts/default/header/index.less index 1e45a7e7..ec603f81 100644 --- a/src/layouts/default/header/index.less +++ b/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; } diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index 6b4a5254..44913a02 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -13,6 +13,7 @@ import { asyncRoutes } from '/@/router/routes'; 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'; @@ -82,6 +83,12 @@ class Permission extends VuexModule { this.lastBuildMenuTimeState = 0; } + @Action + async changePermissionCode(userId: string) { + const codeList = await getPermCodeByUserId({ userId }); + this.commitPermCodeListState(codeList); + } + @Action async buildRoutesAction(id?: number | string): Promise { const { t } = useI18n(); @@ -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!'); } diff --git a/src/views/demo/permission/back/Btn.vue b/src/views/demo/permission/back/Btn.vue index 92a0fc67..0fc3b871 100644 --- a/src/views/demo/permission/back/Btn.vue +++ b/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, -- GitLab