From 7bc50662b904b52276a8420837a651023314fcd6 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 17 Dec 2021 15:09:02 +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

---
 .env.production                              |  3 +
 build/index.ts                               |  3 +-
 package.json                                 |  1 +
 pnpm-lock.yaml                               | 49 ++++++++++++++++
 src/layout/components/sidebar/breadCrumb.vue | 56 ++++++++++++++++--
 src/layout/components/tag/index.vue          | 87 ++++++++++++++--------------
 types/global.d.ts                            |  1 +
 vite.config.ts                               | 11 +++-
 8 files changed, 160 insertions(+), 51 deletions(-)

diff --git a/.env.production b/.env.production
index 5537b0c..c636c82 100644
--- a/.env.production
+++ b/.env.production
@@ -6,3 +6,6 @@ VITE_ROUTER_HISTORY = "hash"
 
 # 线上环境后端地址
 VITE_PROXY_DOMAIN_REAL = ""
+
+# 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
+VITE_LEGACY = false 
\ No newline at end of file
diff --git a/build/index.ts b/build/index.ts
index 7280839..4127d62 100644
--- a/build/index.ts
+++ b/build/index.ts
@@ -6,7 +6,8 @@ const warpperEnv = (envConf: Recordable): ViteEnv => {
     VITE_PUBLIC_PATH: "",
     VITE_PROXY_DOMAIN: "",
     VITE_PROXY_DOMAIN_REAL: "",
-    VITE_ROUTER_HISTORY: ""
+    VITE_ROUTER_HISTORY: "",
+    VITE_LEGACY: false
   };
 
   for (const envName of Object.keys(envConf)) {
diff --git a/package.json b/package.json
index a1ab3dd..f22621e 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "4.31.0",
     "@typescript-eslint/parser": "4.31.0",
+    "@vitejs/plugin-legacy": "^1.6.4",
     "@vitejs/plugin-vue": "^1.10.2",
     "@vitejs/plugin-vue-jsx": "^1.3.1",
     "@vue/eslint-config-prettier": "6.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 624692c..2627e86 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,6 +15,7 @@ specifiers:
   "@types/qs": ^6.9.7
   "@typescript-eslint/eslint-plugin": 4.31.0
   "@typescript-eslint/parser": 4.31.0
+  "@vitejs/plugin-legacy": ^1.6.4
   "@vitejs/plugin-vue": ^1.10.2
   "@vitejs/plugin-vue-jsx": ^1.3.1
   "@vue/compiler-sfc": ^3.2.24
@@ -121,6 +122,7 @@ devDependencies:
   "@types/qs": 6.9.7
   "@typescript-eslint/eslint-plugin": 4.31.0_f4e6dc0776b3600ef484e3c64a523136
   "@typescript-eslint/parser": 4.31.0_eslint@7.30.0+typescript@4.4.2
+  "@vitejs/plugin-legacy": 1.6.4_vite@2.6.14
   "@vitejs/plugin-vue": 1.10.2_vite@2.6.14
   "@vitejs/plugin-vue-jsx": 1.3.1
   "@vue/eslint-config-prettier": 6.0.0_82e4252401b0cc5be86f7c2133946f49
@@ -495,6 +497,14 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/standalone/7.16.6:
+    resolution:
+      {
+        integrity: sha512-wjildVe951w1IPEPN4G76j+y5JFZfJN9gdyP8o9zd61qbiVEecAgORKskK1D/7VrJZrZS+nxDbhj2akEFU2RJw==
+      }
+    engines: { node: ">=6.9.0" }
+    dev: true
+
   /@babel/template/7.16.0:
     resolution:
       {
@@ -1257,6 +1267,23 @@ packages:
       eslint-visitor-keys: 2.1.0
     dev: true
 
+  /@vitejs/plugin-legacy/1.6.4_vite@2.6.14:
+    resolution:
+      {
+        integrity: sha512-geH2F3hTRN++E4n9NZ0JFumxIWUKqW4FA9PAgM7Q6RvUOUUYW4tlURhEmCBYfZSN24H/yX3mEolX+wFVErsAYQ==
+      }
+    engines: { node: ">=12.0.0" }
+    peerDependencies:
+      vite: ^2.0.0
+    dependencies:
+      "@babel/standalone": 7.16.6
+      core-js: 3.20.0
+      magic-string: 0.25.7
+      regenerator-runtime: 0.13.9
+      systemjs: 6.11.0
+      vite: 2.6.14_sass@1.43.4
+    dev: true
+
   /@vitejs/plugin-vue-jsx/1.3.1:
     resolution:
       {
@@ -2305,6 +2332,14 @@ packages:
       safe-buffer: 5.1.2
     dev: true
 
+  /core-js/3.20.0:
+    resolution:
+      {
+        integrity: sha512-KjbKU7UEfg4YPpskMtMXPhUKn7m/1OdTHTVjy09ScR2LVaoUXe8Jh0UdvN2EKUR6iKTJph52SJP95mAB0MnVLQ==
+      }
+    requiresBuild: true
+    dev: true
+
   /cosmiconfig/7.0.1:
     resolution:
       {
@@ -5297,6 +5332,13 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /regenerator-runtime/0.13.9:
+    resolution:
+      {
+        integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+      }
+    dev: true
+
   /regexpp/3.2.0:
     resolution:
       {
@@ -6009,6 +6051,13 @@ packages:
       stable: 0.1.8
     dev: true
 
+  /systemjs/6.11.0:
+    resolution:
+      {
+        integrity: sha512-7YPIY44j+BoY+E6cGBSw0oCU8SNTTIHKZgftcBdwWkDzs/M86Fdlr21FrzAyph7Zo8r3CFGscyFe4rrBtixrBg==
+      }
+    dev: true
+
   /table/6.7.2:
     resolution:
       {
diff --git a/src/layout/components/sidebar/breadCrumb.vue b/src/layout/components/sidebar/breadCrumb.vue
index 08ba0bb..989e225 100644
--- a/src/layout/components/sidebar/breadCrumb.vue
+++ b/src/layout/components/sidebar/breadCrumb.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
+import { isEqual } from "lodash-es";
 import { transformI18n } from "/@/plugins/i18n";
+import { getParentPaths, findRouteByPath } from "/@/router/utils";
+import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
+import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
 
-const levelList = ref([]);
 const route = useRoute();
+const levelList = ref([]);
 const router = useRouter();
+const routes = router.options.routes;
+const multiTags = useMultiTagsStoreHook().multiTags;
 
 const isDashboard = (route: RouteLocationMatched): boolean | string => {
   const name = route && (route.name as string);
@@ -16,7 +21,44 @@ const isDashboard = (route: RouteLocationMatched): boolean | string => {
 };
 
 const getBreadcrumb = (): void => {
-  let matched = route.matched.filter(item => item.meta && item.meta.title);
+  // 当前路由信息
+  let currentRoute;
+  if (Object.keys(route.query).length > 0) {
+    multiTags.forEach(item => {
+      if (isEqual(route.query, item?.query)) {
+        currentRoute = item;
+      }
+    });
+  } else {
+    currentRoute = findRouteByPath(router.currentRoute.value.path, multiTags);
+  }
+  // 当前路由的父级路径组成的数组
+  const parentRoutes = getParentPaths(router.currentRoute.value.path, routes);
+  // 存放组成面包屑的数组
+  let matched = [];
+  // 获取每个父级路径对应的路由信息
+  parentRoutes.forEach(path => {
+    if (path !== "/") {
+      matched.push(findRouteByPath(path, routes));
+    }
+  });
+  if (router.currentRoute.value.meta?.refreshRedirect) {
+    matched.unshift(
+      findRouteByPath(
+        router.currentRoute.value.meta.refreshRedirect as string,
+        routes
+      )
+    );
+  } else {
+    // 过滤与子级相同标题的父级路由
+    matched = matched.filter(item => {
+      return !item.redirect || (item.redirect && item.children.length !== 1);
+    });
+  }
+  if (currentRoute?.path !== "/welcome") {
+    matched.push(currentRoute);
+  }
+
   const first = matched[0];
   if (!isDashboard(first)) {
     matched = [
@@ -27,8 +69,9 @@ const getBreadcrumb = (): void => {
       } as unknown as RouteLocationMatched
     ].concat(matched);
   }
+
   levelList.value = matched.filter(
-    item => item.meta && item.meta.title && item.meta.breadcrumb !== false
+    item => item?.meta && item?.meta.title !== false
   );
 };
 
@@ -39,6 +82,11 @@ watch(
   () => getBreadcrumb()
 );
 
+watch(
+  () => route.query,
+  () => getBreadcrumb()
+);
+
 const handleLink = (item: RouteLocationMatched): any => {
   const { redirect, path } = item;
   if (redirect) {
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index 452edbf..2a2ab54 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -17,8 +17,8 @@ import closeLeft from "/@/assets/svg/close_left.svg";
 import closeOther from "/@/assets/svg/close_other.svg";
 import closeRight from "/@/assets/svg/close_right.svg";
 
-import { isEqual } from "lodash-es";
 import { emitter } from "/@/utils/mitt";
+import { isEqual, isEmpty } from "lodash-es";
 import { transformI18n } from "/@/plugins/i18n";
 import { storageLocal } from "/@/utils/storage";
 import { useRoute, useRouter } from "vue-router";
@@ -272,9 +272,10 @@ function dynamicRouteTag(value: string, parentPath: string): void {
 // 重新加载
 function onFresh() {
   toggleClass(true, refreshButton, document.querySelector(".rotate"));
-  const { fullPath } = unref(route);
+  const { fullPath, query } = unref(route);
   router.replace({
-    path: "/redirect" + fullPath
+    path: "/redirect" + fullPath,
+    query: query
   });
   setTimeout(() => {
     removeClass(document.querySelector(".rotate"), refreshButton);
@@ -367,6 +368,19 @@ function deleteMenu(item, tag?: string) {
 
 function onClickDrop(key, item, selectRoute?: RouteConfigs) {
   if (item && item.disabled) return;
+
+  let selectTagRoute;
+  if (selectRoute) {
+    selectTagRoute = {
+      path: selectRoute.path,
+      meta: selectRoute.meta,
+      name: selectRoute.name,
+      query: selectRoute.query
+    };
+  } else {
+    selectTagRoute = { path: route.path, meta: route.meta };
+  }
+
   // 当前路由信息
   switch (key) {
     case 0:
@@ -375,49 +389,19 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
       break;
     case 1:
       // 关闭当前标签页
-      selectRoute
-        ? deleteMenu({
-            path: selectRoute.path,
-            meta: selectRoute.meta,
-            name: selectRoute.name
-          })
-        : deleteMenu({ path: route.path, meta: route.meta });
+      deleteMenu(selectTagRoute);
       break;
     case 2:
       // 关闭左侧标签页
-      selectRoute
-        ? deleteMenu(
-            {
-              path: selectRoute.path,
-              meta: selectRoute.meta
-            },
-            "left"
-          )
-        : deleteMenu({ path: route.path, meta: route.meta }, "left");
+      deleteMenu(selectTagRoute, "left");
       break;
     case 3:
       // 关闭右侧标签页
-      selectRoute
-        ? deleteMenu(
-            {
-              path: selectRoute.path,
-              meta: selectRoute.meta
-            },
-            "right"
-          )
-        : deleteMenu({ path: route.path, meta: route.meta }, "right");
+      deleteMenu(selectTagRoute, "right");
       break;
     case 4:
       // 关闭其他标签页
-      selectRoute
-        ? deleteMenu(
-            {
-              path: selectRoute.path,
-              meta: selectRoute.meta
-            },
-            "other"
-          )
-        : deleteMenu({ path: route.path, meta: route.meta }, "other");
+      deleteMenu(selectTagRoute, "other");
       break;
     case 5:
       // 关闭全部标签页
@@ -430,7 +414,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
       break;
   }
   setTimeout(() => {
-    showMenuModel(route.fullPath);
+    showMenuModel(route.fullPath, route.query);
   });
 }
 
@@ -456,18 +440,31 @@ function disabledMenus(value: boolean) {
 }
 
 // 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是首页，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页
-function showMenuModel(currentPath: string, refresh = false) {
+function showMenuModel(
+  currentPath: string,
+  query: object = {},
+  refresh = false
+) {
   let allRoute = multiTags.value;
   let routeLength = multiTags.value.length;
-  // currentIndex为1时，左侧的菜单是首页，则不显示关闭左侧标签页
-  let currentIndex = allRoute.findIndex(v => v.path === currentPath);
-  // 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
+  let currentIndex = -1;
+  if (isEmpty(query)) {
+    currentIndex = allRoute.findIndex(v => v.path === currentPath);
+  } else {
+    currentIndex = allRoute.findIndex(v => isEqual(v.query, query));
+  }
+
   showMenus(true);
 
   if (refresh) {
     tagsViews.value[0].show = true;
   }
 
+  /**
+   * currentIndex为1时，左侧的菜单是首页，则不显示关闭左侧标签页
+   * 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
+   */
+
   if (currentIndex === 1 && routeLength !== 2) {
     // 左侧的菜单是首页，右侧存在别的菜单
     tagsViews.value[2].show = false;
@@ -506,7 +503,7 @@ function openMenu(tag, e) {
   } else if (route.path !== tag.path) {
     // 右键菜单不匹配当前路由，隐藏刷新
     tagsViews.value[0].show = false;
-    showMenuModel(tag.path);
+    showMenuModel(tag.path, tag.query);
   } else if (
     // eslint-disable-next-line no-dupe-else-if
     multiTags.value.length === 2 &&
@@ -517,7 +514,7 @@ function openMenu(tag, e) {
     tagsViews.value[4].show = false;
   } else if (route.path === tag.path) {
     // 右键当前激活的菜单
-    showMenuModel(tag.path, true);
+    showMenuModel(tag.path, tag.query, true);
   }
 
   currentSelect.value = tag;
@@ -545,7 +542,7 @@ function tagOnClick(item) {
     path: item?.path,
     query: item?.query
   });
-  showMenuModel(item?.path);
+  showMenuModel(item?.path, item?.query);
 }
 
 // 鼠标移入
diff --git a/types/global.d.ts b/types/global.d.ts
index 3676a68..3b5fb1a 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -69,6 +69,7 @@ declare global {
     VITE_PROXY_DOMAIN: string;
     VITE_PROXY_DOMAIN_REAL: string;
     VITE_ROUTER_HISTORY: string;
+    VITE_LEGACY: boolean;
   }
 
   declare interface ServerConfigs {
diff --git a/vite.config.ts b/vite.config.ts
index f49da76..94e477b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
 import { resolve } from "path";
 import vue from "@vitejs/plugin-vue";
 import svgLoader from "vite-svg-loader";
+import legacy from "@vitejs/plugin-legacy";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import { warpperEnv, regExps } from "./build";
 import { viteMockServe } from "vite-plugin-mock";
@@ -27,6 +28,7 @@ const alias: Record<string, string> = {
 export default ({ command, mode }: ConfigEnv): UserConfigExport => {
   const {
     VITE_PORT,
+    VITE_LEGACY,
     VITE_PUBLIC_PATH,
     VITE_PROXY_DOMAIN,
     VITE_PROXY_DOMAIN_REAL
@@ -149,7 +151,14 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
           setupProdMockServer();
         `,
         logger: true
-      })
+      }),
+      // 是否为打包后的文件提供传统浏览器兼容性支持
+      VITE_LEGACY
+        ? legacy({
+            targets: ["ie >= 11"],
+            additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
+          })
+        : null
     ],
     optimizeDeps: {
       include: [