perf: 同步完整版代码

src/layout/components/sidebar/sidebarItem.vue

@@ -148,7 +148,7 @@ function resolvePath(routePath) {
       :class="{ 'submenu-title-noDropdown': !isNest }"
       :style="getNoDropdownStyle"
     >
-      <div class="el-icon" v-show="props.item.meta.icon">
+      <div class="sub-menu-icon" v-show="props.item.meta.icon">
         <component
           :is="
             useRenderIcon(
@@ -216,10 +216,7 @@ function resolvePath(routePath) {
     popper-append-to-body
   >
     <template #title>
-      <div
-        v-show="props.item.meta.icon"
-        :class="['el-icon', props.item.meta.icon]"
-      >
+      <div v-show="props.item.meta.icon" class="sub-menu-icon">
         <component
           :is="useRenderIcon(props.item.meta && props.item.meta.icon)"
         />

src/main.ts

@@ -1,15 +1,16 @@
 import App from "./App.vue";
 import router from "./router";
 import { setupStore } from "/@/store";
+import ElementPlus from "element-plus";
 import { getServerConfig } from "./config";
 import { createApp, Directive } from "vue";
 import { useI18n } from "../src/plugins/i18n";
 import { MotionPlugin } from "@vueuse/motion";
-import { useElementPlus } from "../src/plugins/element-plus";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";
 
 import "animate.css";
 import "virtual:windi.css";
+import "element-plus/dist/index.css";
 // 导入公共样式
 import "./style/index.scss";
 import "@pureadmin/components/dist/index.css";
@@ -41,6 +42,6 @@ getServerConfig(app).then(async config => {
   await router.isReady();
   injectResponsiveStorage(app, config);
   setupStore(app);
-  app.use(MotionPlugin).use(useI18n).use(useElementPlus);
+  app.use(MotionPlugin).use(useI18n).use(ElementPlus);
   app.mount("#app");
 });

src/style/element-plus.scss

@@ -53,12 +53,6 @@
   --el-button-active-border-color: var(--el-color-primary) !important;
 }
 
-/* button--primary plain */
-.el-button--primary.is-plain {
-  --el-button-active-bg-color: var(--el-color-primary) !important;
-  --el-button-active-border-color: var(--el-color-primary) !important;
-}
-
 /* nprogress适配ep的primary */
 #nprogress {
   & .bar {

src/style/sidebar.scss

@@ -14,10 +14,19 @@
     }
   }
 
+  .sub-menu-icon {
+    vertical-align: middle;
+    margin-right: 5px;
+    font-size: 18px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .main-container {
     height: 100vh;
     min-height: 100%;
-    transition: margin-left 0.28s;
+    transition: margin-left 0.1s;
     margin-left: $sideBarWidth;
     position: relative;
     background: #f0f2f5;
@@ -29,7 +38,7 @@
     right: 0;
     z-index: 998;
     width: calc(100% - 210px);
-    transition: width 0.28s;
+    transition: width 0.1s;
   }
 
   .main-hidden {
@@ -49,7 +58,7 @@
   }
 
   .sidebar-container {
-    transition: width 0.28s;
+    transition: width 0.1s;
     width: $sideBarWidth !important;
     background: $menuBg;
     height: 100%;
@@ -489,8 +498,8 @@
     > .el-sub-menu__title::before {
     position: absolute;
     top: 0;
-    left: 0;
-    width: 3px;
+    left: 2px;
+    width: 2px;
     height: 100%;
     background-color: $menuActiveBefore;
     content: "";
@@ -503,7 +512,7 @@
   .el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
     position: absolute;
     top: 0;
-    width: 3px;
+    width: 2px;
     height: 100%;
     background-color: $menuActiveBefore;
     content: "";
@@ -527,7 +536,7 @@
   .mobile {
     .fixed-header {
       width: 100% !important;
-      transition: width 0.28s;
+      transition: width 0.1s;
     }
 
     .main-container {
@@ -535,7 +544,7 @@
     }
 
     .sidebar-container {
-      transition: transform 0.28s;
+      transition: transform 0.1s;
       width: $sideBarWidth;
     }
 
@@ -572,7 +581,7 @@ body[layout="vertical"] {
   .hideSidebar {
     .fixed-header {
       width: calc(100% - 54px);
-      transition: width 0.28s;
+      transition: width 0.1s;
     }
 
     .sidebar-container {
@@ -606,17 +615,25 @@ body[layout="vertical"] {
         }
       }
 
-      /* 有无子菜单 */
-      .el-sub-menu__title,
-      .el-menu-item [class^="el-icon"] {
-        right: 5px;
-      }
-
       .submenu-title-noDropdown {
         background: transparent !important;
       }
+
+      /* 有无子菜单 */
+      .el-sub-menu__title,
+      .el-menu-item [class^="el-icon"] {
+        right: 2px;
+      }
+
+      .el-menu-tooltip__trigger {
+        padding: 0 18px;
+      }
     }
   }
+
+  .sub-menu-icon {
+    width: 24px;
+  }
 }
 
 body[layout="horizontal"] {
@@ -640,7 +657,7 @@ body[layout="mix"] {
   .hideSidebar {
     .fixed-header {
       width: calc(100% - 54px);
-      transition: width 0.28s;
+      transition: width 0.1s;
     }
 
     .sidebar-container {

src/utils/debounce/index.ts

@@ -1,12 +1,39 @@
+import { unref } from "vue";
+import type { Ref } from "vue";
+
+type FunctionArgs<Args extends any[] = any[], Return = void> = (
+  ...args: Args
+) => Return;
+
+type MaybeRef<T> = T | Ref<T>;
+
 // 延迟函数
 export const delay = (timeout: number) =>
   new Promise(resolve => setTimeout(resolve, timeout));
 
-// 防抖函数
-export const debounce = (fn: () => Fn, timeout: number) => {
+/**
+ * 防抖函数
+ * @param fn 函数
+ * @param timeout 延迟时间
+ * @param immediate 是否立即执行
+ * @returns
+ */
+export const debounce = <T extends FunctionArgs>(
+  fn: T,
+  timeout: MaybeRef<number> = 200,
+  immediate = false
+) => {
   let timmer: TimeoutHandle;
+  const wait = unref(timeout);
   return () => {
-    timmer ? clearTimeout(timmer) : null;
-    timmer = setTimeout(fn, timeout);
+    timmer && clearTimeout(timmer);
+    if (immediate) {
+      if (!timmer) {
+        fn();
+      }
+      timmer = setTimeout(() => (timmer = null), wait);
+    } else {
+      timmer = setTimeout(fn, wait);
+    }
   };
 };