From b65b9723530f692fb80aea1582415d4e7ef50080 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 27 Nov 2021 10:05:36 +0800
Subject: [PATCH] fix: update

---
 src/layout/components/tag/index.vue | 101 ++++++++++++++--------------
 src/layout/index.vue                |   7 +-
 src/layout/types.ts                 |   2 +-
 src/router/index.ts                 |   6 +-
 src/store/modules/multiTags.ts      |  34 +++++++++-
 src/store/modules/types.ts          |   5 ++
 src/utils/storage/responsive.ts     |   4 +-
 7 files changed, 95 insertions(+), 64 deletions(-)

diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index 067d41793..9c852a5a0 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -1,18 +1,3 @@
-<script lang="ts">
-let routerArrays: Array<RouteConfigs> = [
-  {
-    path: "/welcome",
-    parentPath: "/",
-    meta: {
-      title: "message.hshome",
-      icon: "el-icon-s-home",
-      i18n: true,
-      showLink: true
-    }
-  }
-];
-</script>
-
 <script setup lang="ts">
 import {
   ref,
@@ -33,15 +18,16 @@ import closeOther from "/@/assets/svg/close_other.svg";
 import closeRight from "/@/assets/svg/close_right.svg";
 
 import { emitter } from "/@/utils/mitt";
-import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
 import { transformI18n } from "/@/utils/i18n";
 import { storageLocal } from "/@/utils/storage";
 import { useRoute, useRouter } from "vue-router";
+import { RouteConfigs, tagsViewsType } from "../../types";
 import { handleAliveRoute, delAliveRoutes } from "/@/router";
 import { useSettingStoreHook } from "/@/store/modules/settings";
+import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
-import { RouteConfigs, multiTagsType, tagsViewsType } from "../../types";
+import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
 
 const route = useRoute();
 const router = useRouter();
@@ -49,15 +35,18 @@ const translateX = ref<number>(0);
 const activeIndex = ref<number>(-1);
 let refreshButton = "refresh-button";
 const instance = getCurrentInstance();
-let multiTags: multiTagsType;
 const pureSetting = useSettingStoreHook();
 const showTags = ref(storageLocal.getItem("tagsVal") || false);
 const tabDom = templateRef<HTMLElement | null>("tabDom", null);
 const containerDom = templateRef<HTMLElement | null>("containerDom", null);
 const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null);
 
+let multiTags: ComputedRef<Array<RouteConfigs>> = computed(() => {
+  return useMultiTagsStoreHook()?.multiTags;
+});
+
 const dynamicTagView = () => {
-  const index = dynamicTagList.value.findIndex(item => {
+  const index = multiTags.value.findIndex(item => {
     return item.path === route.path;
   });
   moveToView(index);
@@ -150,41 +139,38 @@ const tagsViews = ref<Array<tagsViewsType>>([
     icon: close,
     text: "message.hscloseCurrentTab",
     divided: false,
-    disabled: routerArrays.length > 1 ? false : true,
+    disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeLeft,
     text: "message.hscloseLeftTabs",
     divided: true,
-    disabled: routerArrays.length > 1 ? false : true,
+    disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeRight,
     text: "message.hscloseRightTabs",
     divided: false,
-    disabled: routerArrays.length > 1 ? false : true,
+    disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeOther,
     text: "message.hscloseOtherTabs",
     divided: true,
-    disabled: routerArrays.length > 2 ? false : true,
+    disabled: multiTags.value.length > 2 ? false : true,
     show: true
   },
   {
     icon: closeAll,
     text: "message.hscloseAllTabs",
     divided: false,
-    disabled: routerArrays.length > 1 ? false : true,
+    disabled: multiTags.value.length > 1 ? false : true,
     show: true
   }
 ]);
-const dynamicTagList: ComputedRef<Array<RouteConfigs>> = computed(() => {
-  return multiTags.routesInStorage;
-});
 
 // 显示模式，默认灵动模式显示
 const showModel = ref(storageLocal.getItem("showModel") || "smart");
@@ -200,7 +186,7 @@ let buttonTop = ref(0);
 let currentSelect = ref({});
 
 function dynamicRouteTag(value: string, parentPath: string): void {
-  const hasValue = multiTags.routesInStorage.some((item: any) => {
+  const hasValue = multiTags.value.some(item => {
     return item.path === value;
   });
 
@@ -209,13 +195,12 @@ function dynamicRouteTag(value: string, parentPath: string): void {
       arr.forEach((arrItem: any) => {
         let pathConcat = parentPath + arrItem.path;
         if (arrItem.path === value || pathConcat === value) {
-          routerArrays.push({
+          useMultiTagsStoreHook().handleTags("push", {
             path: value,
             parentPath: `/${parentPath.split("/")[1]}`,
             meta: arrItem.meta,
             name: arrItem.name
           });
-          multiTags.routesInStorage = routerArrays;
         } else {
           if (arrItem.children && arrItem.children.length > 0) {
             concatPath(arrItem.children, value, parentPath);
@@ -242,13 +227,17 @@ function onFresh() {
 function deleteDynamicTag(obj: any, current: any, tag?: string) {
   // 存放被删除的缓存路由
   let delAliveRouteList = [];
-  let valueIndex: number = routerArrays.findIndex((item: any) => {
+  let valueIndex: number = multiTags.value.findIndex((item: any) => {
     return item.path === obj.path;
   });
 
-  const spliceRoute = (start?: number, end?: number, other?: boolean): void => {
+  const spliceRoute = (
+    startIndex?: number,
+    length?: number,
+    other?: boolean
+  ): void => {
     if (other) {
-      multiTags.routesInStorage = [
+      useMultiTagsStoreHook().handleTags("equal", [
         {
           path: "/welcome",
           parentPath: "/",
@@ -260,11 +249,24 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
           }
         },
         obj
-      ];
-      routerArrays = multiTags.routesInStorage;
+      ]);
     } else {
-      delAliveRouteList = routerArrays.splice(start, end);
-      multiTags.routesInStorage = routerArrays;
+      delAliveRouteList = useMultiTagsStoreHook().handleTags("splice", "", {
+        startIndex,
+        length
+      });
+      useMultiTagsStoreHook().handleTags("equal", [
+        {
+          path: "/welcome",
+          parentPath: "/",
+          meta: {
+            title: "message.hshome",
+            icon: "el-icon-s-home",
+            i18n: true,
+            showLink: true
+          }
+        }
+      ]);
     }
   };
 
@@ -273,12 +275,12 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
   } else if (tag === "left") {
     spliceRoute(1, valueIndex - 1);
   } else if (tag === "right") {
-    spliceRoute(valueIndex + 1, routerArrays.length);
+    spliceRoute(valueIndex + 1, multiTags.value.length);
   } else {
     // 从当前匹配到的路径中删除
     spliceRoute(valueIndex, 1);
   }
-  let newRoute: any = routerArrays.slice(-1);
+  let newRoute = useMultiTagsStoreHook().handleTags("slice");
   if (current === route.path) {
     // 删除缓存路由
     tag
@@ -294,8 +296,8 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
   } else {
     // 删除缓存路由
     tag ? delAliveRoutes(delAliveRouteList) : delAliveRoutes([obj]);
-    if (!routerArrays.length) return;
-    let isHasActiveTag = routerArrays.some(item => {
+    if (!multiTags.value.length) return;
+    let isHasActiveTag = multiTags.value.some(item => {
       return item.path === route.path;
     });
     !isHasActiveTag &&
@@ -365,11 +367,12 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
       break;
     case 5:
       // 关闭全部标签页
-      routerArrays.splice(1, routerArrays.length);
-      multiTags.routesInStorage = routerArrays;
+      useMultiTagsStoreHook().handleTags("splice", "", {
+        startIndex: 1,
+        length: multiTags.value.length
+      });
       usePermissionStoreHook().clearAllCachePage();
       router.push("/welcome");
-
       break;
   }
   setTimeout(() => {
@@ -400,8 +403,8 @@ function disabledMenus(value: boolean) {
 
 // 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是首页，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页
 function showMenuModel(currentPath: string, refresh = false) {
-  let allRoute = unref(multiTags.routesInStorage);
-  let routeLength = unref(multiTags.routesInStorage).length;
+  let allRoute = multiTags.value;
+  let routeLength = multiTags.value.length;
   // currentIndex为1时，左侧的菜单是首页，则不显示关闭左侧标签页
   let currentIndex = allRoute.findIndex(v => v.path === currentPath);
   // 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
@@ -452,7 +455,7 @@ function openMenu(tag, e) {
     showMenuModel(tag.path);
   } else if (
     // eslint-disable-next-line no-dupe-else-if
-    multiTags.routesInStorage.length === 2 &&
+    multiTags.value.length === 2 &&
     route.path !== tag.path
   ) {
     showMenus(true);
@@ -531,8 +534,6 @@ watch(
 
 onBeforeMount(() => {
   if (!instance) return;
-  multiTags = instance.appContext.app.config.globalProperties.$storage;
-  routerArrays = multiTags.routesInStorage ?? routerArrays;
 
   // 根据当前路由初始化操作标签页的禁用状态
   showMenuModel(route.fullPath);
@@ -569,7 +570,7 @@ onBeforeMount(() => {
       >
         <div
           :ref="'dynamic' + index"
-          v-for="(item, index) in dynamicTagList"
+          v-for="(item, index) in multiTags"
           :key="index"
           :class="[
             'scroll-item is-closable',
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 3ab498561..e6b22dba7 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -32,12 +32,9 @@ const instance = getCurrentInstance().appContext.app.config.globalProperties;
 // 清空缓存后从serverConfig.json读取默认配置并赋值到storage中
 const layout = computed(() => {
   // 路由
-  if (
-    !instance.$storage.routesInStorage ||
-    instance.$storage.routesInStorage.length === 0
-  ) {
+  if (!instance.$storage.tags || instance.$storage.tags.length === 0) {
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    instance.$storage.routesInStorage = routerArrays;
+    instance.$storage.tags = routerArrays;
   }
   // 国际化
   if (!instance.$storage.locale) {
diff --git a/src/layout/types.ts b/src/layout/types.ts
index 3a991bdf5..4222e5c42 100644
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -25,7 +25,7 @@ export type RouteConfigs = {
 };
 
 export type multiTagsType = {
-  routesInStorage: Array<RouteConfigs>;
+  tags: Array<RouteConfigs>;
 };
 
 export type tagsViewsType = {
diff --git a/src/router/index.ts b/src/router/index.ts
index 8980e85b4..5e37b678b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -232,9 +232,7 @@ router.beforeEach((to, _from, next) => {
         initRouter(name.username).then((router: Router) => {
           router.push(to.path);
           // 刷新页面更新标签栏与页面路由匹配
-          const localRoutes = storageLocal.getItem(
-            "responsive-routesInStorage"
-          );
+          const localRoutes = storageLocal.getItem("responsive-tags");
           const optionsRoutes = router.options?.routes;
           const newLocalRoutes = [];
           optionsRoutes.forEach(ors => {
@@ -245,7 +243,7 @@ router.beforeEach((to, _from, next) => {
             });
           });
           storageLocal.setItem(
-            "responsive-routesInStorage",
+            "responsive-tags",
             uniqBy(newLocalRoutes, "path")
           );
         });
diff --git a/src/store/modules/multiTags.ts b/src/store/modules/multiTags.ts
index d03907d23..ed31e7272 100644
--- a/src/store/modules/multiTags.ts
+++ b/src/store/modules/multiTags.ts
@@ -1,11 +1,24 @@
 import { defineStore } from "pinia";
 import { store } from "/@/store";
 import { getConfig } from "/@/config";
-// import { multiTagsType } from "/@/layout/types";
+import { positionType } from "./types";
 
 export const useMultiTagsStore = defineStore({
   id: "pure-multiTags",
   state: () => ({
+    // 存储标签页信息（路由信息）
+    multiTags: [
+      {
+        path: "/welcome",
+        parentPath: "/",
+        meta: {
+          title: "message.hshome",
+          icon: "el-icon-s-home",
+          i18n: true,
+          showLink: true
+        }
+      }
+    ],
     multiTagsCache: getConfig().MultiTagsCache
   }),
   getters: {
@@ -13,7 +26,24 @@ export const useMultiTagsStore = defineStore({
       return this.multiTagsCache;
     }
   },
-  actions: {}
+  actions: {
+    handleTags<T>(mode: string, value?: T, position?: positionType): any {
+      switch (mode) {
+        case "equal":
+          this.multiTags = value;
+          break;
+        case "push":
+          this.multiTags.push(value);
+          break;
+        case "splice":
+          this.multiTags.splice(position?.startIndex, position?.length);
+          break;
+        case "slice":
+          this.multiTags.slice(-1);
+          break;
+      }
+    }
+  }
 });
 
 export function useMultiTagsStoreHook() {
diff --git a/src/store/modules/types.ts b/src/store/modules/types.ts
index 2babafbae..a868bbf4b 100644
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -4,3 +4,8 @@ export type cacheType = {
   mode: string;
   name?: RouteRecordName;
 };
+
+export type positionType = {
+  startIndex?: number;
+  length?: number;
+};
diff --git a/src/utils/storage/responsive.ts b/src/utils/storage/responsive.ts
index 4df889f00..3caa1b4cc 100644
--- a/src/utils/storage/responsive.ts
+++ b/src/utils/storage/responsive.ts
@@ -5,9 +5,9 @@ import Storage from "responsive-storage";
 export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
   app.use(Storage, {
     // 默认显示首页tag
-    routesInStorage: {
+    tags: {
       type: Array,
-      default: Storage.getData(undefined, "routesInStorage") ?? [
+      default: Storage.getData(undefined, "tags") ?? [
         {
           path: "/welcome",
           parentPath: "/",