perf: 同步代码

README.md

@@ -1 +1,11 @@
 <h1>vue-pure-admin精简版</h1>
+
+## 配套视频教程
+
+bilibili：https://www.bilibili.com/video/BV1534y1S7HV/
+
+## 交流群
+
+[微信交流群，点击扫码进群](https://juejin.cn/post/6948419379566477342/)
+
+本人微信：18237613535，拉你进群

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" },

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) {
-    // 如果删除当前激活tag就自动切换到最后一个tag
   let newRoute: any = routerArrays.slice(-1);
+  if (current === route.path) {
+    // 删除缓存路由
+    handleAliveRoute(route.matched, "delete");
+    // 如果删除当前激活tag就自动切换到最后一个tag
+    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;

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;

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();
     }

src/style/element-ui.scss → src/style/element-plus.scss

@@ -15,13 +15,6 @@
   display: none;
 }
 
-.el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-}
-
 // refine element ui upload
 .upload-container {
   .el-upload {

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 {

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菜单折叠

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);
 };