From 12879f955319ce4472a62ae33130d547c110159f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=95=9D=E8=A3=B3?= <1923740402@qq.com>
Date: Tue, 7 Dec 2021 15:40:10 +0800
Subject: [PATCH] perf(router): refresh (#142)
* feat: set add multiTagsCache
* perf(router): refresh
* fix(multiTags): clear storage when close other tag
Co-authored-by: lrl <742798240@qq.com>
---
src/layout/components/setting/index.vue | 37 ++++++++++++++--
src/layout/index.vue | 3 +-
src/router/index.ts | 57 +++++++++++++++++++++++--
src/store/modules/multiTags.ts | 14 ++++--
src/utils/storage/responsive.ts | 3 +-
5 files changed, 102 insertions(+), 12 deletions(-)
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 79a02b437..15e47cb49 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";
@@ -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 251b4895c..7944e5fde 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/router/index.ts b/src/router/index.ts
index be3fd0d03..7c07b3542 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -199,6 +199,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"];
@@ -256,9 +299,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 21baa1120..8969435c5 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 bc251b718..e1e2fd4fd 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
}
}
},