perf: 同步完整版分支代码

2021-11-28 16:39:26 +08:00
parent 1e92bd416e
commit e9dc8274a0
20 changed files with 326 additions and 165 deletions
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -17,6 +17,7 @@ import { debounce } from "/@/utils/debounce";
 import { themeColorsType } from "../../types";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { storageLocal, storageSession } from "/@/utils/storage";
+import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils";

 const router = useRouter();
@@ -135,6 +136,18 @@ function onReset() {
  storageSession.clear();
  toggleClass(false, "html-grey", document.querySelector("html"));
  toggleClass(false, "html-weakness", document.querySelector("html"));
+  useMultiTagsStoreHook().handleTags("equal", [
+    {
+      path: "/welcome",
+      parentPath: "/",
+      meta: {
+        title: "message.hshome",
+        icon: "el-icon-s-home",
+        i18n: true,
+        showLink: true
+      }
+    }
+  ]);
  router.push("/login");
 }

--- 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, relativeStorageType, 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 relativeStorage: relativeStorageType;
 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 relativeStorage.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 = relativeStorage.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
          });
-          relativeStorage.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) {
-      relativeStorage.routesInStorage = [
+      useMultiTagsStoreHook().handleTags("equal", [
        {
          path: "/welcome",
          parentPath: "/",
@@ -260,11 +249,12 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
          }
        },
        obj
-      ];
-      routerArrays = relativeStorage.routesInStorage;
+      ]);
    } else {
-      delAliveRouteList = routerArrays.splice(start, end);
-      relativeStorage.routesInStorage = routerArrays;
+      delAliveRouteList = useMultiTagsStoreHook().handleTags("splice", "", {
+        startIndex,
+        length
+      });
    }
  };

@@ -273,12 +263,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 +284,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 +355,12 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
      break;
    case 5:
      // 关闭全部标签页
-      routerArrays.splice(1, routerArrays.length);
-      relativeStorage.routesInStorage = routerArrays;
+      useMultiTagsStoreHook().handleTags("splice", "", {
+        startIndex: 1,
+        length: multiTags.value.length
+      });
      usePermissionStoreHook().clearAllCachePage();
      router.push("/welcome");
-
      break;
  }
  setTimeout(() => {
@@ -400,8 +391,8 @@ function disabledMenus(value: boolean) {

 // 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是首页，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页
 function showMenuModel(currentPath: string, refresh = false) {
-  let allRoute = unref(relativeStorage.routesInStorage);
-  let routeLength = unref(relativeStorage.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 +443,7 @@ function openMenu(tag, e) {
    showMenuModel(tag.path);
  } else if (
    // eslint-disable-next-line no-dupe-else-if
-    relativeStorage.routesInStorage.length === 2 &&
+    multiTags.value.length === 2 &&
    route.path !== tag.path
  ) {
    showMenus(true);
@@ -531,8 +522,6 @@ watch(

 onBeforeMount(() => {
  if (!instance) return;
-  relativeStorage = instance.appContext.app.config.globalProperties.$storage;
-  routerArrays = relativeStorage.routesInStorage ?? routerArrays;

  // 根据当前路由初始化操作标签页的禁用状态
  showMenuModel(route.fullPath);
@@ -569,7 +558,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',
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -17,6 +17,7 @@ import fullScreen from "/@/assets/svg/full_screen.svg";
 import exitScreen from "/@/assets/svg/exit_screen.svg";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import { useSettingStoreHook } from "/@/store/modules/settings";
+import { useMultiTagsStore } from "/@/store/modules/multiTags";

 import navbar from "./components/navbar.vue";
 import tag from "./components/tag/index.vue";
@@ -33,11 +34,11 @@ const instance = getCurrentInstance().appContext.app.config.globalProperties;
 const layout = computed(() => {
  // 路由
  if (
-    !instance.$storage.routesInStorage ||
-    instance.$storage.routesInStorage.length === 0
+    useMultiTagsStore().multiTagsCache &&
+    (!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) {
@@ -105,6 +106,9 @@ function toggle(device: string, bool: boolean) {
  useAppStoreHook().toggleSideBar(bool, "resize");
 }

+// 判断是否可自动关闭菜单栏
+let isAutoCloseSidebar = true;
+
 // 监听容器
 emitter.on("resize", ({ detail }) => {
  if (isMobile) return;
@@ -117,11 +121,16 @@ emitter.on("resize", ({ detail }) => {
   */
  if (width > 0 && width <= 760) {
    toggle("mobile", false);
+    isAutoCloseSidebar = true;
  } else if (width > 760 && width <= 990) {
-    toggle("desktop", false);
+    if (isAutoCloseSidebar) {
+      toggle("desktop", false);
+      isAutoCloseSidebar = false;
+    }
  } else if (width > 990) {
    if (!set.sidebar.isClickHamburger) {
      toggle("desktop", true);
+      isAutoCloseSidebar = true;
    }
  }
 });
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -24,8 +24,8 @@ export type RouteConfigs = {
  name?: string;
 };

-export type relativeStorageType = {
-  routesInStorage: Array<RouteConfigs>;
+export type multiTagsType = {
+  tags: Array<RouteConfigs>;
 };

 export type tagsViewsType = {