perf: 同步完整版分支代码

3 years ago · 85a60cdc4d
14 changed files with 120 additions and 30 deletions
--- 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<Array<themeColorsType>>([
-  // 暗雅（默认）
+  // 道奇蓝（默认）
  { 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) {
        >
        </el-switch>
      </li>
+      <li>
+        <span>标签页持久化</span>
+        <el-switch
+          v-model="settings.multiTagsCache"
+          inline-prompt
+          inactive-color="#a6a6a6"
+          active-text="开"
+          inactive-text="关"
+          @change="multiTagsCacheChange"
+        >
+        </el-switch>
+      </li>

      <li>
        <span>标签风格</span>
--- 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;
--- a/src/layout/theme/auroraGreen-vars.scss
+++ b/src/layout/theme/auroraGreen-vars.scss
@ -1,4 +1,4 @@
-/* 极光绿 */
+/* 酸橙绿 */
 $subMenuActiveText: #fff;
 $menuBg: #0b1e15;
 $menuHover: #60ac80;
--- 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
 */
--- a/src/layout/theme/dusk-vars.scss
+++ b/src/layout/theme/dusk-vars.scss
@ -1,4 +1,4 @@
-/* 薄暮 */
+/* 猩红色 */
 $subMenuActiveText: #fff;
 $menuBg: #2a0608;
 $menuHover: #e13c39;
--- a/src/layout/theme/light-vars.scss
+++ b/src/layout/theme/light-vars.scss
@ -1,4 +1,4 @@
-/* 明亮 */
+/* 亮白色 */
 $subMenuActiveText: #409eff;
 $menuBg: #fff;
 $menuHover: #e0ebf6;
--- a/src/layout/theme/mingQing-vars.scss
+++ b/src/layout/theme/mingQing-vars.scss
@ -1,4 +1,4 @@
-/* 明青 */
+/* 绿宝石 */
 $subMenuActiveText: #fff;
 $menuBg: #032121;
 $menuHover: #59bfc1;
--- a/src/layout/theme/pink-vars.scss
+++ b/src/layout/theme/pink-vars.scss
@ -1,4 +1,4 @@
-/* 粉红 */
+/* 深粉色 */
 $subMenuActiveText: #fff;
 $menuBg: #28081a;
 $menuHover: #d84493;
--- a/src/layout/theme/saucePurple-vars.scss
+++ b/src/layout/theme/saucePurple-vars.scss
@ -1,4 +1,4 @@
-/* 酱紫 */
+/* 深紫罗兰色 */
 $subMenuActiveText: #fff;
 $menuBg: #130824;
 $menuHover: #693ac9;
--- a/src/layout/theme/volcano-vars.scss
+++ b/src/layout/theme/volcano-vars.scss
@ -1,4 +1,4 @@
-/* 火山 */
+/* 橙红色 */
 $subMenuActiveText: #fff;
 $menuBg: #2b0e05;
 $menuHover: #e85f33;
--- a/src/layout/theme/yellow-vars.scss
+++ b/src/layout/theme/yellow-vars.scss
@ -1,4 +1,4 @@
-/* 橘黄 */
+/* 金色 */
 $subMenuActiveText: #d25f00;
 $menuBg: #2b2503;
 $menuHover: #f6da4d;
--- 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);
--- 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":
          {
--- 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
        }
      }
    },