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

2025-06-06 16:37:18 +08:00 · 2024-01-10 21:01:37 +08:00 · 2024-01-10 21:01:37 +08:00 · 68cd2c925a
commit 68cd2c925a
parent aa8ba9a3e5
9 changed files with 122 additions and 31 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -381,7 +381,7 @@ packages:
      '@babel/generator': 7.23.6
      '@babel/helper-compilation-targets': 7.23.6
      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.7)
-      '@babel/helpers': 7.23.7
+      '@babel/helpers': 7.23.8
      '@babel/parser': 7.23.6
      '@babel/template': 7.22.15
      '@babel/traverse': 7.23.7
@ -535,8 +535,8 @@ packages:
    resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
    engines: {node: '>=6.9.0'}

-  /@babel/helpers@7.23.7:
-    resolution: {integrity: sha512-6AMnjCoC8wjqBzDHkuqpa7jAKwvMo4dC+lr/TFBz+ucfulO1XMpDnwWPGBNwClOKZ8h6xn5N81W/R5OrcKtCbQ==}
+  /@babel/helpers@7.23.8:
+    resolution: {integrity: sha512-KDqYz4PiOWvDFrdHLPhKtCThtIcKVy6avWD2oG4GEvyQ+XDZwHD4YQd+H2vNMnq2rkdxsDkU82T+Vk8U/WXHRQ==}
    engines: {node: '>=6.9.0'}
    dependencies:
      '@babel/template': 7.22.15
@ -701,15 +701,15 @@ packages:
      '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.7)
    dev: true

-  /@babel/runtime@7.23.7:
-    resolution: {integrity: sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==}
+  /@babel/runtime@7.23.8:
+    resolution: {integrity: sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==}
    engines: {node: '>=6.9.0'}
    dependencies:
      regenerator-runtime: 0.14.1
    dev: false

-  /@babel/standalone@7.23.7:
-    resolution: {integrity: sha512-AsO3aIh9I4qIqK61d6nPxPAdrSuWF4FmOLej3xNIkBIZj+8XJGArQQJw6DnuUkkqbsLp1fARkXOdKiuqWgac0Q==}
+  /@babel/standalone@7.23.8:
+    resolution: {integrity: sha512-i0tPn3dyKHbEZPDV66ry/7baC1pznRU02R8sU6eJSBfTOwMkukRdYuT3ks/j/cvTl4YkHMRmhTejET+iyPZVvQ==}
    engines: {node: '>=6.9.0'}
    requiresBuild: true
    dev: false
@ -1352,7 +1352,7 @@ packages:
      '@intlify/bundle-utils': 7.5.0(vue-i18n@9.9.0)
      '@intlify/shared': 9.9.0
      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
-      '@vue/compiler-sfc': 3.4.5
+      '@vue/compiler-sfc': 3.4.7
      debug: 4.3.4
      fast-glob: 3.3.2
      js-yaml: 4.1.0
@ -1670,7 +1670,7 @@ packages:
      mlly: 1.4.2
      pathe: 1.1.1
      pkg-types: 1.0.3
-      scule: 1.1.1
+      scule: 1.2.0
      semver: 7.5.4
      ufo: 1.3.2
      unctx: 2.3.1
@ -1693,7 +1693,7 @@ packages:
      hookable: 5.5.3
      pathe: 1.1.1
      pkg-types: 1.0.3
-      scule: 1.1.1
+      scule: 1.2.0
      std-env: 3.7.0
      ufo: 1.3.2
      unimport: 3.7.1(rollup@2.79.1)
@ -2348,12 +2348,29 @@ packages:
      estree-walker: 2.0.2
      source-map-js: 1.0.2

+  /@vue/compiler-core@3.4.7:
+    resolution: {integrity: sha512-hhCaE3pTMrlIJK7M/o3Xf7HV8+JoNTGOQ/coWS+V+pH6QFFyqtoXqQzpqsNp7UK17xYKua/MBiKj4e1vgZOBYw==}
+    dependencies:
+      '@babel/parser': 7.23.6
+      '@vue/shared': 3.4.7
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.0.2
+    dev: true
+
  /@vue/compiler-dom@3.4.5:
    resolution: {integrity: sha512-J8YlxknJVd90SXFJ4HwGANSAXsx5I0lK30sO/zvYV7s5gXf7gZR7r/1BmZ2ju7RGH1lnc6bpBc6nL61yW+PsAQ==}
    dependencies:
      '@vue/compiler-core': 3.4.5
      '@vue/shared': 3.4.5

+  /@vue/compiler-dom@3.4.7:
+    resolution: {integrity: sha512-qDKBAIurCTub4n/6jDYkXwgsFuriqqmmLrIq1N2QDfYJA/mwiwvxi09OGn28g+uDdERX9NaKDLji0oTjE3sScg==}
+    dependencies:
+      '@vue/compiler-core': 3.4.7
+      '@vue/shared': 3.4.7
+    dev: true
+
  /@vue/compiler-sfc@3.4.5:
    resolution: {integrity: sha512-jauvkDuSSUbP0ebhfNqljhShA90YEfX/0wZ+w40oZF43IjGyWYjqYaJbvMJwGOd+9+vODW6eSvnk28f0SGV7OQ==}
    dependencies:
@ -2367,12 +2384,33 @@ packages:
      postcss: 8.4.33
      source-map-js: 1.0.2

+  /@vue/compiler-sfc@3.4.7:
+    resolution: {integrity: sha512-Gec6CLkReVswDYjQFq79O5rktri4R7TsD/VPCiUoJw40JhNNxaNJJa8mrQrWoJluW4ETy6QN0NUyC/JO77OCOw==}
+    dependencies:
+      '@babel/parser': 7.23.6
+      '@vue/compiler-core': 3.4.7
+      '@vue/compiler-dom': 3.4.7
+      '@vue/compiler-ssr': 3.4.7
+      '@vue/shared': 3.4.7
+      estree-walker: 2.0.2
+      magic-string: 0.30.5
+      postcss: 8.4.33
+      source-map-js: 1.0.2
+    dev: true
+
  /@vue/compiler-ssr@3.4.5:
    resolution: {integrity: sha512-DDdEcDzj2lWTMfUMMtEpLDhURai9LhM0zSZ219jCt7b2Vyl0/jy3keFgCPMitG0V1S1YG4Cmws3lWHWdxHQOpg==}
    dependencies:
      '@vue/compiler-dom': 3.4.5
      '@vue/shared': 3.4.5

+  /@vue/compiler-ssr@3.4.7:
+    resolution: {integrity: sha512-PvYeSOvnCkST5mGS0TLwEn5w+4GavtEn6adcq8AspbHaIr+mId5hp7cG3ASy3iy8b+LuXEG2/QaV/nj5BQ/Aww==}
+    dependencies:
+      '@vue/compiler-dom': 3.4.7
+      '@vue/shared': 3.4.7
+    dev: true
+
  /@vue/devtools-api@6.5.1:
    resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}

@ -2386,8 +2424,8 @@ packages:
    dependencies:
      '@volar/language-core': 1.11.1
      '@volar/source-map': 1.11.1
-      '@vue/compiler-dom': 3.4.5
-      '@vue/shared': 3.4.5
+      '@vue/compiler-dom': 3.4.7
+      '@vue/shared': 3.4.7
      computeds: 0.0.1
      minimatch: 9.0.3
      muggle-string: 0.3.1
@ -2426,6 +2464,10 @@ packages:
  /@vue/shared@3.4.5:
    resolution: {integrity: sha512-6XptuzlMvN4l4cDnDw36pdGEV+9njYkQ1ZE0Q6iZLwrKefKaOJyiFmcP3/KBDHbt72cJZGtllAc1GaHe6XGAyg==}

+  /@vue/shared@3.4.7:
+    resolution: {integrity: sha512-G+i4glX1dMJk88sbJEcQEGWRQnVm9eIY7CcQbO5dpdsD9SF8jka3Mr5OqZYGjczGN1+D6EUwdu6phcmcx9iuPA==}
+    dev: true
+
  /@vueuse/core@10.7.1(vue@3.4.5):
    resolution: {integrity: sha512-74mWHlaesJSWGp1ihg76vAnfVq9NTv1YT0SYhAQ6zwFNdBkkP+CKKJmVOEHcdSnLXCXYiL5e7MaewblfiYLP7g==}
    dependencies:
@ -2925,7 +2967,7 @@ packages:
      postcss: ^8.1.0
    dependencies:
      browserslist: 4.22.2
-      caniuse-lite: 1.0.30001574
+      caniuse-lite: 1.0.30001576
      fraction.js: 4.3.7
      normalize-range: 0.1.2
      picocolors: 1.0.0
@ -3067,8 +3109,8 @@ packages:
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true
    dependencies:
-      caniuse-lite: 1.0.30001574
-      electron-to-chromium: 1.4.623
+      caniuse-lite: 1.0.30001576
+      electron-to-chromium: 1.4.626
      node-releases: 2.0.14
      update-browserslist-db: 1.0.13(browserslist@4.22.2)

@ -3150,13 +3192,13 @@ packages:
    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
    dependencies:
      browserslist: 4.22.2
-      caniuse-lite: 1.0.30001574
+      caniuse-lite: 1.0.30001576
      lodash.memoize: 4.1.2
      lodash.uniq: 4.5.0
    dev: true

-  /caniuse-lite@1.0.30001574:
-    resolution: {integrity: sha512-BtYEK4r/iHt/txm81KBudCUcTy7t+s9emrIaHqjYurQ10x71zJ5VQ9x1dYPcz/b+pKSp4y/v1xSI67A+LzpNyg==}
+  /caniuse-lite@1.0.30001576:
+    resolution: {integrity: sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==}

  /cfb@1.2.2:
    resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
@ -3970,8 +4012,8 @@ packages:
      - typescript
    dev: false

-  /electron-to-chromium@1.4.623:
-    resolution: {integrity: sha512-lKoz10iCYlP1WtRYdh5MvocQPWVRoI7ysp6qf18bmeBgR8abE6+I2CsfyNKztRDZvhdWc+krKT6wS7Neg8sw3A==}
+  /electron-to-chromium@1.4.626:
+    resolution: {integrity: sha512-f7/be56VjRRQk+Ric6PmIrEtPcIqsn3tElyAu9Sh6egha2VLJ82qwkcOdcnT06W+Pb6RUulV1ckzrGbKzVcTHg==}

  /element-plus@2.1.4(@types/lodash-es@4.17.12)(vue@3.4.5):
    resolution: {integrity: sha512-pcwgDbKUrzyWbixYB/zIbLPLBQ/NPGPJnGXJ+jYozUSthPW4SuriaUGJKgbAE6PDBAtw3IodiT2E2GbiaZLxww==}
@ -4889,7 +4931,7 @@ packages:
  /i18next@20.6.1:
    resolution: {integrity: sha512-yCMYTMEJ9ihCwEQQ3phLo7I/Pwycf8uAx+sRHwwk5U9Aui/IZYgQRyMqXafQOw5QQ7DM1Z+WyEXWIqSuJHhG2A==}
    dependencies:
-      '@babel/runtime': 7.23.7
+      '@babel/runtime': 7.23.8
    dev: false

  /iconv-lite@0.4.24:
@ -7607,8 +7649,8 @@ packages:
      compute-scroll-into-view: 1.0.20
    dev: false

-  /scule@1.1.1:
-    resolution: {integrity: sha512-sHtm/SsIK9BUBI3EFT/Gnp9VoKfY6QLvlkvAE6YK7454IF8FSgJEAnJpVdSC7K5/pjI5NfxhzBLW2JAfYA/shQ==}
+  /scule@1.2.0:
+    resolution: {integrity: sha512-CRCmi5zHQnSoeCik9565PONMg0kfkvYmcSqrbOJY4txFfy1wvVULV4FDaiXhUblUgahdqz3F2NwHZ8i4eBTwUw==}
    requiresBuild: true
    dev: false
    optional: true
@ -8519,7 +8561,7 @@ packages:
      mlly: 1.4.2
      pathe: 1.1.1
      pkg-types: 1.0.3
-      scule: 1.1.1
+      scule: 1.2.0
      strip-literal: 1.3.0
      unplugin: 1.6.0
    transitivePeerDependencies:
@ -8551,12 +8593,12 @@ packages:
    requiresBuild: true
    dependencies:
      '@babel/core': 7.23.7
-      '@babel/standalone': 7.23.7
+      '@babel/standalone': 7.23.8
      '@babel/types': 7.23.6
      defu: 6.1.4
      jiti: 1.21.0
      mri: 1.2.0
-      scule: 1.1.1
+      scule: 1.2.0
    transitivePeerDependencies:
      - supports-color
    dev: false
--- a/public/platform-config.json
+++ b/public/platform-config.json
@ -17,7 +17,7 @@
  "EpThemeColor": "#409EFF",
  "ShowLogo": true,
  "ShowModel": "smart",
-  "MenuArrowIconNoTransition": true,
+  "MenuArrowIconNoTransition": false,
  "CachingAsyncRoutes": false,
  "TooltipEffect": "light",
  "ResponsiveStorageNameSpace": "responsive-",
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/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"
    >
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/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"
    >
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/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"
--- a/src/layout/components/sidebar/vertical.vue
+++ b/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"
--- a/src/style/dark.scss
+++ b/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);
+    }
+  }
 }
--- a/src/style/element-plus.scss
+++ b/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颜色 */
+  }
+}
--- a/src/style/sidebar.scss
+++ b/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;