From 85a60cdc4d9a6cc12c53b6ae1b79f1b9560069e5 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Wed, 8 Dec 2021 11:22:03 +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=E5=88=86=E6=94=AF=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/components/setting/index.vue | 55 +++++++++++++++++++++++-------- src/layout/index.vue | 3 +- src/layout/theme/auroraGreen-vars.scss | 2 +- src/layout/theme/default-vars.scss | 2 +- src/layout/theme/dusk-vars.scss | 2 +- src/layout/theme/light-vars.scss | 2 +- src/layout/theme/mingQing-vars.scss | 2 +- src/layout/theme/pink-vars.scss | 2 +- src/layout/theme/saucePurple-vars.scss | 2 +- src/layout/theme/volcano-vars.scss | 2 +- src/layout/theme/yellow-vars.scss | 2 +- src/router/index.ts | 57 +++++++++++++++++++++++++++++++-- src/store/modules/multiTags.ts | 14 ++++++-- src/utils/storage/responsive.ts | 3 +- 14 files changed, 120 insertions(+), 30 deletions(-) diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue index dffdc64..15e47cb 100644 --- a/src/layout/components/setting/index.vue +++ b/src/layout/components/setting/index.vue @@ -10,6 +10,7 @@ import { getCurrentInstance } from "vue"; import panel from "../panel/index.vue"; +import { getConfig } from "/@/config"; import { useRouter } from "vue-router"; import { emitter } from "/@/utils/mitt"; import { templateRef } from "@vueuse/core"; @@ -29,23 +30,23 @@ const instanceConfig = getCurrentInstance().appContext.app.config.globalProperties.$config; let themeColors = ref>([ - // 暗雅（默认） + // 道奇蓝（默认） { rgb: "27, 42, 71", themeColor: "default" }, - // 明亮 + // 亮白色 { rgb: "255, 255, 255", themeColor: "light" }, - // 薄暮 + // 猩红色 { rgb: "245, 34, 45", themeColor: "dusk" }, - // 火山 + // 橙红色 { rgb: "250, 84, 28", themeColor: "volcano" }, - // 黄色 + // 金色 { rgb: "250, 219, 20", themeColor: "yellow" }, - // 明青 + // 绿宝石 { rgb: "19, 194, 194", themeColor: "mingQing" }, - // 极光绿 + // 酸橙绿 { rgb: "82, 196, 26", themeColor: "auroraGreen" }, - // 粉红 + // 深粉色 { rgb: "235, 47, 150", themeColor: "pink" }, - // 酱紫 + // 深紫罗兰色 { rgb: "114, 46, 209", themeColor: "saucePurple" } ]); @@ -77,7 +78,8 @@ const logoVal = ref(storageLocal.getItem("logoVal") || "1"); const settings = reactive({ greyVal: instance.sets.grey, weakVal: instance.sets.weak, - tabsVal: instance.sets.hideTabs + tabsVal: instance.sets.hideTabs, + multiTagsCache: instance.sets.multiTagsCache }); function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) { @@ -93,7 +95,8 @@ const greyChange = (value): void => { instance.sets = { grey: value, weak: instance.sets.weak, - hideTabs: instance.sets.hideTabs + hideTabs: instance.sets.hideTabs, + multiTagsCache: instance.sets.multiTagsCache }; }; @@ -107,7 +110,8 @@ const weekChange = (value): void => { instance.sets = { grey: instance.sets.grey, weak: value, - hideTabs: instance.sets.hideTabs + hideTabs: instance.sets.hideTabs, + multiTagsCache: instance.sets.multiTagsCache }; }; @@ -116,11 +120,23 @@ const tagsChange = () => { instance.sets = { grey: instance.sets.grey, weak: instance.sets.weak, - hideTabs: showVal + hideTabs: showVal, + multiTagsCache: instance.sets.multiTagsCache }; emitter.emit("tagViewsChange", showVal); }; +const multiTagsCacheChange = () => { + let multiTagsCache = settings.multiTagsCache; + instance.sets = { + grey: instance.sets.grey, + weak: instance.sets.weak, + hideTabs: instance.sets.hideTabs, + multiTagsCache: multiTagsCache + }; + useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache); +}; + //初始化项目配置 nextTick(() => { settings.greyVal && @@ -148,6 +164,7 @@ function onReset() { } } ]); + useMultiTagsStoreHook().multiTagsCacheChange(getConfig().MultiTagsCache); router.push("/login"); } @@ -317,6 +334,18 @@ function setLayoutThemeColor(theme: string) { > +
  • + 标签页持久化 + + +
  • 标签风格 diff --git a/src/layout/index.vue b/src/layout/index.vue index 251b489..7944e5f 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -60,7 +60,8 @@ const layout = computed(() => { instance.$storage.sets = { grey: instance.$config?.Grey ?? false, weak: instance.$config?.Weak ?? false, - hideTabs: instance.$config?.HideTabs ?? false + hideTabs: instance.$config?.HideTabs ?? false, + multiTagsCache: instance.$config?.MultiTagsCache ?? false }; } return instance.$storage?.layout.layout; diff --git a/src/layout/theme/auroraGreen-vars.scss b/src/layout/theme/auroraGreen-vars.scss index 2fcea09..af1f6ce 100644 --- a/src/layout/theme/auroraGreen-vars.scss +++ b/src/layout/theme/auroraGreen-vars.scss @@ -1,4 +1,4 @@ -/* 极光绿 */ +/* 酸橙绿 */ $subMenuActiveText: #fff; $menuBg: #0b1e15; $menuHover: #60ac80; diff --git a/src/layout/theme/default-vars.scss b/src/layout/theme/default-vars.scss index 8b2fd4a..def418f 100644 --- a/src/layout/theme/default-vars.scss +++ b/src/layout/theme/default-vars.scss @@ -1,5 +1,5 @@ /** - * 暗雅（默认） + * 道奇蓝（默认） * 此scss变量文件作为multipleScopeVars去编译时，会自动移除!default以达到变量提升 * 同时此scss变量文件作为默认主题变量文件，被其他.scss通过 @import 时，必需 !default */ diff --git a/src/layout/theme/dusk-vars.scss b/src/layout/theme/dusk-vars.scss index bb34fee..61add25 100644 --- a/src/layout/theme/dusk-vars.scss +++ b/src/layout/theme/dusk-vars.scss @@ -1,4 +1,4 @@ -/* 薄暮 */ +/* 猩红色 */ $subMenuActiveText: #fff; $menuBg: #2a0608; $menuHover: #e13c39; diff --git a/src/layout/theme/light-vars.scss b/src/layout/theme/light-vars.scss index f83a084..b33aa01 100644 --- a/src/layout/theme/light-vars.scss +++ b/src/layout/theme/light-vars.scss @@ -1,4 +1,4 @@ -/* 明亮 */ +/* 亮白色 */ $subMenuActiveText: #409eff; $menuBg: #fff; $menuHover: #e0ebf6; diff --git a/src/layout/theme/mingQing-vars.scss b/src/layout/theme/mingQing-vars.scss index 8b8b0af..59ead9f 100644 --- a/src/layout/theme/mingQing-vars.scss +++ b/src/layout/theme/mingQing-vars.scss @@ -1,4 +1,4 @@ -/* 明青 */ +/* 绿宝石 */ $subMenuActiveText: #fff; $menuBg: #032121; $menuHover: #59bfc1; diff --git a/src/layout/theme/pink-vars.scss b/src/layout/theme/pink-vars.scss index 6a0403c..3d39a3a 100644 --- a/src/layout/theme/pink-vars.scss +++ b/src/layout/theme/pink-vars.scss @@ -1,4 +1,4 @@ -/* 粉红 */ +/* 深粉色 */ $subMenuActiveText: #fff; $menuBg: #28081a; $menuHover: #d84493; diff --git a/src/layout/theme/saucePurple-vars.scss b/src/layout/theme/saucePurple-vars.scss index 9bb55d1..0ead258 100644 --- a/src/layout/theme/saucePurple-vars.scss +++ b/src/layout/theme/saucePurple-vars.scss @@ -1,4 +1,4 @@ -/* 酱紫 */ +/* 深紫罗兰色 */ $subMenuActiveText: #fff; $menuBg: #130824; $menuHover: #693ac9; diff --git a/src/layout/theme/volcano-vars.scss b/src/layout/theme/volcano-vars.scss index aea4d33..6856fea 100644 --- a/src/layout/theme/volcano-vars.scss +++ b/src/layout/theme/volcano-vars.scss @@ -1,4 +1,4 @@ -/* 火山 */ +/* 橙红色 */ $subMenuActiveText: #fff; $menuBg: #2b0e05; $menuHover: #e85f33; diff --git a/src/layout/theme/yellow-vars.scss b/src/layout/theme/yellow-vars.scss index a0fe225..49af3de 100644 --- a/src/layout/theme/yellow-vars.scss +++ b/src/layout/theme/yellow-vars.scss @@ -1,4 +1,4 @@ -/* 橘黄 */ +/* 金色 */ $subMenuActiveText: #d25f00; $menuBg: #2b2503; $menuHover: #f6da4d; diff --git a/src/router/index.ts b/src/router/index.ts index f24c980..bc763f0 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -188,6 +188,49 @@ export function resetRouter() { }); } +function findRouteByPath(path, routes) { + let res = routes.find(item => item.path == path); + if (res) { + return res; + } else { + for (let i = 0; i < routes.length; i++) { + if ( + routes[i].children instanceof Array && + routes[i].children.length > 0 + ) { + res = findRouteByPath(path, routes[i].children); + if (res) { + return res; + } + } + } + return null; + } +} + +function getParentPaths(path, routes) { + // 深度遍历查找 + function dfs(routes, path, parents) { + for (let i = 0; i < routes.length; i++) { + const item = routes[i]; + // 找到path则返回父级path + if (item.path === path) return parents; + // children不存在或为空则不递归 + if (!item.children || !item.children.length) continue; + // 往下查找时将当前path入栈 + parents.push(item.path); + + if (dfs(item.children, path, parents).length) return parents; + // 深度遍历查找未找到时当前path 出栈 + parents.pop(); + } + // 未找到时返回空数组 + return []; + } + + return dfs(routes, path, []); +} + // 路由白名单 const whiteList = ["/login"]; @@ -245,9 +288,17 @@ router.beforeEach((to, _from, next) => { handTag(path, parentPath, name, meta); return router.push(path); } else { - const { path, name, meta } = to; - handTag(path, parentPath, name, meta); - return router.push(to.path); + const { path } = to; + const routes = router.options.routes; + const route = findRouteByPath(path, routes); + const routePartent = getParentPaths(path, routes); + handTag( + route.path, + routePartent[routePartent.length - 1], + route.name, + route.meta + ); + return router.push(path); } } router.push(to.path); diff --git a/src/store/modules/multiTags.ts b/src/store/modules/multiTags.ts index 21baa11..8969435 100644 --- a/src/store/modules/multiTags.ts +++ b/src/store/modules/multiTags.ts @@ -1,6 +1,5 @@ import { defineStore } from "pinia"; import { store } from "/@/store"; -import { getConfig } from "/@/config"; import { storageLocal } from "/@/utils/storage"; import { multiType, positionType } from "./types"; @@ -8,7 +7,7 @@ export const useMultiTagsStore = defineStore({ id: "pure-multiTags", state: () => ({ // 存储标签页信息（路由信息） - multiTags: getConfig().MultiTagsCache + multiTags: storageLocal.getItem("responsive-sets").multiTagsCache ? storageLocal.getItem("responsive-tags") : [ { @@ -22,7 +21,7 @@ export const useMultiTagsStore = defineStore({ } } ], - multiTagsCache: getConfig().MultiTagsCache + multiTagsCache: storageLocal.getItem("responsive-sets").multiTagsCache }), getters: { getMultiTagsCache() { @@ -30,6 +29,14 @@ export const useMultiTagsStore = defineStore({ } }, actions: { + multiTagsCacheChange(multiTagsCache: boolean) { + this.multiTagsCache = multiTagsCache; + if (multiTagsCache) { + storageLocal.setItem("responsive-tags", this.multiTags); + } else { + storageLocal.removeItem("responsive-tags"); + } + }, tagsCache(multiTags) { this.getMultiTagsCache && storageLocal.setItem("responsive-tags", multiTags); @@ -42,6 +49,7 @@ export const useMultiTagsStore = defineStore({ switch (mode) { case "equal": this.multiTags = value; + this.tagsCache(this.multiTags); break; case "push": { diff --git a/src/utils/storage/responsive.ts b/src/utils/storage/responsive.ts index bc251b7..e1e2fd4 100644 --- a/src/utils/storage/responsive.ts +++ b/src/utils/storage/responsive.ts @@ -25,7 +25,8 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => { default: Storage.getData(undefined, "sets") ?? { grey: config.Grey ?? false, weak: config.Weak ?? false, - hideTabs: config.HideTabs ?? false + hideTabs: config.HideTabs ?? false, + multiTagsCache: config.MultiTagsCache ?? false } } },