From 2bac78478c5d39d33c059ad79d4d525cf3fd8d7d Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Fri, 8 Apr 2022 12:05:46 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=90=8C=E6=AD=A5=E5=AE=8C=E6=95=B4?= =?UTF-8?q?=E7=89=88=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/user.ts | 23 +++++++++++++++++++++++ src/layout/components/panel/index.vue | 6 +++--- src/layout/components/setting/index.vue | 3 ++- src/layout/components/sidebar/horizontal.vue | 7 ------- src/layout/components/sidebar/vertical.vue | 1 - src/layout/hooks/nav.ts | 4 ++-- src/router/utils.ts | 6 +++++- src/store/modules/permission.ts | 5 ++++- src/store/modules/user.ts | 13 ++++++------- src/views/login.vue | 20 ++++++++++++++------ 10 files changed, 59 insertions(+), 29 deletions(-) create mode 100644 mock/user.ts diff --git a/mock/user.ts b/mock/user.ts new file mode 100644 index 0000000..34389c0 --- /dev/null +++ b/mock/user.ts @@ -0,0 +1,23 @@ +import { MockMethod } from "vite-plugin-mock"; + +export default [ + { + url: "/login", + method: "post", + response: ({ body }) => { + if (body.username === "admin") { + return { + username: "admin", + expires: 24 * 60 * 60, + accessToken: "eyJhbGciOiJIUzUxMiJ9.admin" + }; + } else { + return { + username: "test", + expires: 24 * 60 * 60, + accessToken: "eyJhbGciOiJIUzUxMiJ9.test" + }; + } + } + } +] as MockMethod[]; diff --git a/src/layout/components/panel/index.vue b/src/layout/components/panel/index.vue index aa8ef49..01aa26c 100644 --- a/src/layout/components/panel/index.vue +++ b/src/layout/components/panel/index.vue @@ -54,7 +54,7 @@ emitter.on("openPanel", () => { .right-panel { width: 100%; - max-width: 300px; + max-width: 315px; height: 100vh; position: fixed; top: 0; @@ -105,8 +105,8 @@ emitter.on("openPanel", () => { .right-panel-items { margin-top: 60px; - height: 100vh; - overflow: auto; + height: calc(100vh - 60px); + overflow-y: auto; } .project-configuration { diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue index 45480f9..b512853 100644 --- a/src/layout/components/setting/index.vue +++ b/src/layout/components/setting/index.vue @@ -266,6 +266,7 @@ function setLayoutThemeColor(theme: string) { // 设置ep主题色 const setEpThemeColor = (color: string) => { + // @ts-expect-error writeNewStyle(createNewStyle(color)); useEpThemeStoreHook().setEpThemeColor(color); body.style.setProperty("--el-color-primary-active", shadeBgColor(color)); @@ -298,7 +299,7 @@ nextTick(() => { settings.weakVal && document.querySelector("html")?.setAttribute("class", "html-weakness"); settings.tabsVal && tagsChange(); - + // @ts-expect-error writeNewStyle(createNewStyle(epThemeColor.value)); dataThemeChange(); }); diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue index ed66499..d2a414c 100644 --- a/src/layout/components/sidebar/horizontal.vue +++ b/src/layout/components/sidebar/horizontal.vue @@ -46,13 +46,6 @@ watch( } ); -watch( - () => route.path, - () => { - menuSelect(route.path, routers); - } -); - function translationCh() { instance.locale = { locale: "zh" }; locale.value = "zh"; diff --git a/src/layout/components/sidebar/vertical.vue b/src/layout/components/sidebar/vertical.vue index 94b8108..bdef950 100644 --- a/src/layout/components/sidebar/vertical.vue +++ b/src/layout/components/sidebar/vertical.vue @@ -51,7 +51,6 @@ watch( () => route.path, () => { getSubMenuData(route.path); - menuSelect(route.path, routers); } ); diff --git a/src/layout/hooks/nav.ts b/src/layout/hooks/nav.ts index a162be9..e5e224e 100644 --- a/src/layout/hooks/nav.ts +++ b/src/layout/hooks/nav.ts @@ -7,6 +7,7 @@ import { remainingPaths } from "/@/router"; import { transformI18n } from "/@/plugins/i18n"; import { storageSession } from "/@/utils/storage"; import { useAppStoreHook } from "/@/store/modules/app"; +import { useUserStoreHook } from "/@/store/modules/user"; import { useEpThemeStoreHook } from "/@/store/modules/epTheme"; export function useNav() { @@ -38,8 +39,7 @@ export function useNav() { // 退出登录 function logout() { - storageSession.removeItem("info"); - router.push("/login"); + useUserStoreHook().logOut(); } function backHome() { diff --git a/src/router/utils.ts b/src/router/utils.ts index 9ad5ffd..484fab2 100644 --- a/src/router/utils.ts +++ b/src/router/utils.ts @@ -234,7 +234,11 @@ function addAsyncRoutes(arrRoutes: Array) { } else if (v.meta?.frameSrc) { v.component = IFrame; } else { - const index = modulesRoutesKeys.findIndex(ev => ev.includes(v.path)); + // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会根path保持一致） + const index = v?.component + ? // @ts-expect-error + modulesRoutesKeys.findIndex(ev => ev.includes(v.component)) + : modulesRoutesKeys.findIndex(ev => ev.includes(v.path)); v.component = modulesRoutes[modulesRoutesKeys[index]]; } if (v.children) { diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index f2aa691..a2d84cf 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -61,8 +61,11 @@ export const usePermissionStore = defineStore({ break; } }, - // 清空缓存页面 + // 清空缓存 clearAllCachePage() { + this.wholeMenus = []; + this.menusTree = []; + this.buttonAuth = []; this.cachePageList = []; } } diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 6fb490c..d744f3e 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -2,8 +2,8 @@ import { defineStore } from "pinia"; import { store } from "/@/store"; import { userType } from "./types"; import { router } from "/@/router"; +import { storageSession } from "/@/utils/storage"; import { getLogin, refreshToken } from "/@/api/user"; -import { storageLocal, storageSession } from "/@/utils/storage"; import { getToken, setToken, removeToken } from "/@/utils/auth"; import { useMultiTagsStoreHook } from "/@/store/modules/multiTags"; @@ -33,12 +33,12 @@ export const useUserStore = defineStore({ }, // 登入 async loginByUsername(data) { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { getLogin(data) - .then(data => { - if (data) { - setToken(data); - resolve(); + .then(res => { + if (res) { + setToken(res); + resolve(res); } }) .catch(error => { @@ -51,7 +51,6 @@ export const useUserStore = defineStore({ this.token = ""; this.name = ""; removeToken(); - storageLocal.clear(); storageSession.clear(); useMultiTagsStoreHook().handleTags("equal", [ { diff --git a/src/views/login.vue b/src/views/login.vue index 7054a0f..d1120e3 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -8,18 +8,26 @@ import bg from "/@/assets/login/bg.png"; import avatar from "/@/assets/login/avatar.svg?component"; import illustration from "/@/assets/login/illustration.svg?component"; +import { useUserStoreHook } from "/@/store/modules/user"; +import { usePermissionStoreHook } from "/@/store/modules/permission"; + const router = useRouter(); let user = ref("admin"); let pwd = ref("123456"); const onLogin = (): void => { - storageSession.setItem("info", { - username: "admin", - accessToken: "eyJhbGciOiJIUzUxMiJ9.test" - }); - initRouter("admin").then(() => {}); - router.push("/"); + useUserStoreHook() + .loginByUsername({ username: user.value, password: pwd.value }) + .then(async (res: any) => { + storageSession.setItem("info", { + username: res.username, + accessToken: res.accessToken + }); + usePermissionStoreHook().clearAllCachePage(); + initRouter(res.username); + router.push("/"); + }); }; function onUserFocus() {