perf: 优化导航，弹出的菜单超出内容区自适应且可滚动 (#858)

src/layout/components/sidebar/horizontal.vue

@@ -51,6 +51,7 @@ nextTick(() => {
       ref="menuRef"
       router
       mode="horizontal"
+      popper-class="pure-scrollbar"
       class="horizontal-header-menu"
       :default-active="defaultActive"
     >

src/layout/components/sidebar/mixNav.vue

@@ -68,6 +68,7 @@ watch(
       ref="menuRef"
       router
       mode="horizontal"
+      popper-class="pure-scrollbar"
       class="horizontal-header-menu"
       :default-active="defaultActive"
     >

src/layout/components/sidebar/sidebarItem.vue

@@ -254,12 +254,12 @@ function resolvePath(routePath) {
       </div>
     </template>
   </el-menu-item>
-
   <el-sub-menu
     v-else
     ref="subMenu"
-    v-bind="expandCloseIcon"
+    teleported
     :index="resolvePath(props.item.path)"
+    v-bind="expandCloseIcon"
   >
     <template #title>
       <div
@@ -307,6 +307,7 @@ function resolvePath(routePath) {
         <extraIcon v-if="!isCollapse" :extraIcon="props.item.meta.extraIcon" />
       </div>
     </template>
+
     <sidebar-item
       v-for="child in props.item.children"
       :key="child.path"

src/layout/components/sidebar/vertical.vue

@@ -98,11 +98,12 @@ onBeforeUnmount(() => {
         router
         unique-opened
         mode="vertical"
-        :popper-effect="tooltipEffect"
+        popper-class="pure-scrollbar"
         class="outer-most select-none"
         :collapse="isCollapse"
-        :default-active="defaultActive"
         :collapse-transition="false"
+        :popper-effect="tooltipEffect"
+        :default-active="defaultActive"
       >
         <sidebar-item
           v-for="routes in menuData"

src/style/dark.scss

@@ -182,4 +182,17 @@ html.dark {
       color: rgb(255 255 255 / 25%);
     }
   }
+
+  /* 仿 el-scrollbar 滚动条样式 支持大多数浏览器，如Chrome、Edge、Firefox、Safari等 */
+  .pure-scrollbar {
+    scrollbar-color: rgb(63 64 66) transparent;
+
+    ::-webkit-scrollbar-thumb {
+      background-color: rgb(63 64 66);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgb(92 93 96);
+    }
+  }
 }

src/style/element-plus.scss

@@ -176,3 +176,29 @@
       0 -3px 6px 0 rgb(69 98 155 / 12%);
   }
 }
+
+/* 仿 el-scrollbar 滚动条样式，支持大多数浏览器，如Chrome、Edge、Firefox、Safari等。暗黑模式在 src/style/dark.scss 文件进行了适配 */
+.pure-scrollbar {
+  /* Firefox */
+  scrollbar-width: thin; /* 可选值为 'auto', 'thin', 'none' */
+  scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
+  ::-webkit-scrollbar {
+    width: 6px; /* 滚动条宽度 */
+  }
+
+  /* 滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background: transparent; /* 轨道颜色 */
+  }
+
+  /* 滚动条滑块 */
+  ::-webkit-scrollbar-thumb {
+    background-color: rgb(221 222 224);
+    border-radius: 4px;
+  }
+
+  /* 滚动条滑块：hover状态 */
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgb(199 201 203); /* 滑块hover颜色 */
+  }
+}

src/style/sidebar.scss

@@ -14,6 +14,12 @@
     }
   }
 
+  /* popper menu 超出内容区可滚动 */
+  .pure-scrollbar {
+    max-height: calc(100vh - calc(50px * 2.5));
+    overflow: hidden auto;
+  }
+
   .sub-menu-icon {
     margin-right: 5px;
     font-size: 18px;