From 80e51e0f7aa4ab4ec8904745ec0b0074684ee0f8 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 19 Oct 2021 20:37:36 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=90=8C=E6=AD=A5=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                           | 10 +++++++
 src/components/ReInfo/index.vue     |  3 ++-
 src/layout/components/tag/index.vue | 28 ++++++++++++++-----
 src/layout/index.vue                | 38 ++++++--------------------
 src/router/index.ts                 |  7 +++--
 src/style/element-plus.scss         | 47 ++++++++++++++++++++++++++++++++
 src/style/element-ui.scss           | 54 -------------------------------------
 src/style/index.scss                |  2 +-
 src/style/sidebar.scss              | 28 ++++++++++++++++++-
 vite.config.ts                      |  2 +-
 10 files changed, 122 insertions(+), 97 deletions(-)
 create mode 100644 src/style/element-plus.scss
 delete mode 100644 src/style/element-ui.scss

diff --git a/README.md b/README.md
index 1940428..5c50b24 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,11 @@
 <h1>vue-pure-admin精简版</h1>
+
+## 配套视频教程
+
+bilibili：https://www.bilibili.com/video/BV1534y1S7HV/
+
+## 交流群
+
+[微信交流群，点击扫码进群](https://juejin.cn/post/6948419379566477342/)
+
+本人微信：18237613535，拉你进群
diff --git a/src/components/ReInfo/index.vue b/src/components/ReInfo/index.vue
index 3ba657d..86610ce 100644
--- a/src/components/ReInfo/index.vue
+++ b/src/components/ReInfo/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, PropType, getCurrentInstance, watch, nextTick, toRef } from "vue";
+import { FormRulesMap } from "element-plus/lib/components/form/src/form.type";
 import { useRouter, useRoute } from "vue-router";
 import { initRouter } from "/@/router";
 import { storageSession } from "/@/utils/storage";
@@ -44,7 +45,7 @@ watch(
   { immediate: true }
 );
 
-const rules: Object = ref({
+const rules = ref<FormRulesMap>({
   userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
   passWord: [
     { required: true, message: "请输入密码", trigger: "blur" },
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index c4c6e7e..2642110 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -49,6 +49,7 @@ const router = useRouter();
 const showTags = ref(storageLocal.getItem("tagsVal") || false);
 const containerDom = templateRef<HTMLElement | null>("containerDom", null);
 const activeIndex = ref(-1);
+
 const tagsViews = ref<Array<tagsViewsType>>([
   {
     icon: refresh,
@@ -173,9 +174,6 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
       routerArrays.splice(start, end);
       relativeStorage.routesInStorage = routerArrays;
     }
-    router.push(obj.path);
-    // 删除缓存路由
-    handleAliveRoute(route.matched, "delete");
   };
 
   if (tag === "other") {
@@ -188,15 +186,32 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
     // 从当前匹配到的路径中删除
     spliceRoute(valueIndex, 1);
   }
-
-  if (current === obj.path) {
+  let newRoute: any = routerArrays.slice(-1);
+  if (current === route.path) {
+    // 删除缓存路由
+    handleAliveRoute(route.matched, "delete");
     // 如果删除当前激活tag就自动切换到最后一个tag
-    let newRoute: any = routerArrays.slice(-1);
+    if (tag === "left") return;
     nextTick(() => {
       router.push({
         path: newRoute[0].path
       });
     });
+  } else {
+    //保存跳转之前的路径
+    let oldPath = route.path;
+    router.push(obj.path);
+    // 删除缓存路由
+    handleAliveRoute(route.matched, "delete");
+    if (!routerArrays.length) return;
+    let isHasOldPath = routerArrays.some(item => {
+      return item.path === oldPath;
+    });
+    isHasOldPath
+      ? router.push(oldPath)
+      : router.push({
+          path: newRoute[0].path
+        });
   }
 }
 
@@ -655,7 +670,6 @@ onBeforeMount(() => {
   .contextmenu {
     margin: 0;
     background: #fff;
-    z-index: 3000;
     position: absolute;
     list-style-type: none;
     padding: 5px 0;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index f4c7163..f971ac4 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -33,14 +33,12 @@ import {
   computed,
   onMounted,
   watchEffect,
-  useCssModule,
   onBeforeMount,
   getCurrentInstance
 } from "vue";
 import { setType } from "./types";
 import { useI18n } from "vue-i18n";
 import { emitter } from "/@/utils/mitt";
-import { toggleClass } from "/@/utils/operate";
 import { useEventListener } from "@vueuse/core";
 import { storageLocal } from "/@/utils/storage";
 import { useAppStoreHook } from "/@/store/modules/app";
@@ -56,7 +54,6 @@ import Vertical from "./components/sidebar/vertical.vue";
 import Horizontal from "./components/sidebar/horizontal.vue";
 
 const pureSetting = useSettingStoreHook();
-const { hiddenMainContainer } = useCssModule();
 
 const instance =
   getCurrentInstance().appContext.app.config.globalProperties.$storage;
@@ -128,21 +125,9 @@ const $_resizeHandler = () => {
 };
 
 function onFullScreen() {
-  if (unref(hiddenSideBar)) {
-    hiddenSideBar.value = false;
-    toggleClass(
-      false,
-      hiddenMainContainer,
-      document.querySelector(".main-container")
-    );
-  } else {
-    hiddenSideBar.value = true;
-    toggleClass(
-      true,
-      hiddenMainContainer,
-      document.querySelector(".main-container")
-    );
-  }
+  unref(hiddenSideBar)
+    ? (hiddenSideBar.value = false)
+    : (hiddenSideBar.value = true);
 }
 
 onMounted(() => {
@@ -151,11 +136,6 @@ onMounted(() => {
     useAppStoreHook().toggleDevice("mobile");
     handleClickOutside(true);
   }
-  toggleClass(
-    unref(hiddenSideBar),
-    hiddenMainContainer,
-    document.querySelector(".main-container")
-  );
 });
 
 onBeforeMount(() => {
@@ -175,7 +155,7 @@ onBeforeMount(() => {
       @click="handleClickOutside(false)"
     />
     <Vertical v-show="!hiddenSideBar && layout.includes('vertical')" />
-    <div class="main-container">
+    <div :class="['main-container', hiddenSideBar ? 'main-hidden' : '']">
       <div :class="{ 'fixed-header': set.fixedHeader }">
         <!-- 顶部导航栏 -->
         <navbar v-show="!hiddenSideBar && layout.includes('vertical')" />
@@ -196,12 +176,6 @@ onBeforeMount(() => {
   </div>
 </template>
 
-<style scoped module>
-.hiddenMainContainer {
-  margin-left: 0 !important;
-}
-</style>
-
 <style lang="scss" scoped>
 @mixin clearfix {
   &::after {
@@ -224,6 +198,10 @@ onBeforeMount(() => {
   }
 }
 
+.main-hidden {
+  margin-left: 0 !important;
+}
+
 .drawer-bg {
   background: #000;
   opacity: 0.3;
diff --git a/src/router/index.ts b/src/router/index.ts
index c1858b5..459c498 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,7 +5,7 @@ import {
   createWebHashHistory,
   RouteRecordNormalized
 } from "vue-router";
-import { split } from "lodash-es";
+import { split, uniqBy } from "lodash-es";
 import { i18n } from "/@/plugins/i18n";
 import { openLink } from "/@/utils/link";
 import NProgress from "/@/utils/progress";
@@ -215,7 +215,10 @@ router.beforeEach((to, _from, next) => {
               }
             });
           });
-          storageLocal.setItem("responsive-routesInStorage", newLocalRoutes);
+          storageLocal.setItem(
+            "responsive-routesInStorage",
+            uniqBy(newLocalRoutes, "path")
+          );
         });
       next();
     }
diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss
new file mode 100644
index 0000000..3a17653
--- /dev/null
+++ b/src/style/element-plus.scss
@@ -0,0 +1,47 @@
+// cover some element-plus styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  padding: 2px 0 2px 0 !important;
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-loading-mask {
+  z-index: -1;
+}
+
+// el-tooltip的权重
+.is-dark {
+  z-index: 99999 !important;
+}
diff --git a/src/style/element-ui.scss b/src/style/element-ui.scss
deleted file mode 100644
index ecca914..0000000
--- a/src/style/element-ui.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-// cover some element-plus styles
-
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-}
-
-.el-upload {
-  input[type="file"] {
-    display: none !important;
-  }
-}
-
-.el-upload__input {
-  display: none;
-}
-
-.el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-}
-
-// refine element ui upload
-.upload-container {
-  .el-upload {
-    width: 100%;
-
-    .el-upload-dragger {
-      width: 100%;
-      height: 200px;
-    }
-  }
-}
-
-// dropdown
-.el-dropdown-menu {
-  padding: 2px 0 2px 0 !important;
-}
-
-// to fix el-date-picker css style
-.el-range-separator {
-  box-sizing: content-box;
-}
-
-.el-loading-mask {
-  z-index: -1;
-}
-
-// el-tooltip的权重
-.is-dark {
-  z-index: 99999 !important;
-}
diff --git a/src/style/index.scss b/src/style/index.scss
index 6cde2c1..b79cacb 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,6 +1,6 @@
 @import "./mixin.scss";
 @import "./transition.scss";
-@import "./element-ui.scss";
+@import "./element-plus.scss";
 @import "./sidebar.scss";
 
 body {
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 53768a0..fabf4c9 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -27,11 +27,23 @@
     position: fixed;
     top: 0;
     right: 0;
-    z-index: 9;
+    z-index: 1000;
     width: calc(100% - 210px);
     transition: width 0.28s;
   }
 
+  .main-hidden {
+    margin-left: 0 !important;
+
+    .fixed-header {
+      width: 100% !important;
+
+      + .app-main {
+        padding-top: 37px;
+      }
+    }
+  }
+
   .el-popper.is-light {
     border: none !important;
   }
@@ -334,6 +346,20 @@
         background-color: $menuHover !important;
       }
     }
+
+    .el-menu-item,
+    .el-sub-menu {
+      i {
+        width: 20px;
+        text-align: center;
+        font-size: 16px;
+      }
+
+      i.fa {
+        margin-right: 5px;
+        font-size: 16px;
+      }
+    }
   }
 
   // horizontal菜单折叠
diff --git a/vite.config.ts b/vite.config.ts
index d048456..172e28f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,7 +9,7 @@ import svgLoader from "vite-svg-loader";
 import styleImport from "vite-plugin-style-import";
 import ElementPlus from "unplugin-element-plus/vite";
 
-const pathResolve = (dir: string): any => {
+const pathResolve = (dir: string): string => {
   return resolve(__dirname, ".", dir);
 };