perf: 优化菜单

2025-10-21 23:59:22 +00:00 · 2024-05-24 18:05:14 +08:00
parent ebe131d4a4
commit 51fb493462
9 changed files with 52 additions and 42 deletions
--- a/src/icons/svg/command.svg
+++ b/src/icons/svg/command.svg
@@ -1 +1 @@
-<svg t="1716530288096" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="56414" width="200" height="200"><path d="M64 112v800h896V112H64z m846 750H114V162h796v700zM234.6 688.8L411.3 512 234.6 335.2l35.4-35.4L482.1 512 269.9 724.1l-35.3-35.3z m554.8-10.2h-300v-50h300v50z" fill="#2c2c2c" p-id="56415"></path></svg>
+<svg t="1716540168627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="95308" width="200" height="200"><path d="M992 96v832H32v-832h960z m-64 64h-832v704h832v-704zM303.36 386.176a35.2 35.2 0 0 1 34.688 5.952l105.6 89.344a83.712 83.712 0 0 1 0 128.448l-105.6 89.344a35.2 35.2 0 0 1-22.528 8.448 35.2 35.2 0 0 1-22.528-62.272l105.6-89.408a12.992 12.992 0 0 0 0-20.416l-105.6-89.344a35.2 35.2 0 0 1 10.304-60.16z m453.76 244.096a35.2 35.2 0 0 1 0 70.4H581.12a35.2 35.2 0 0 1 0-70.4z" fill="#2c2c2c" p-id="95309"></path></svg>
--- a/src/icons/svg/file-manager.svg
+++ b/src/icons/svg/file-manager.svg
@@ -1 +1 @@
-<svg t="1716531798029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="86140" width="200" height="200"><path d="M941.727 367.821C922.939 345.692 894.551 333 863.841 333h-28.565c0.353-1.935 0.547-4.074 0.547-6.11 0-53.343-43.6-96.89-97.19-96.89H468.235c-1.074 0-2.147 0.202-3.216 0.307-0.532-0.875-1.104-1.65-1.714-2.472l-83.04-111.64C374.04 107.814 364.216 103 353.776 103H162.564C108.974 103 65 146.422 65 200.011v610.81c-4 27.439 2.004 54.295 18.063 74.742C100.75 908.084 128.97 921 160.159 921h617.78c29.093 0 58.091-10.999 81.652-30.972 23.582-19.99 39.171-46.813 43.893-75.523l59.937-364.33c4.974-30.239-2.934-60.256-21.694-82.354zM162.564 169h174.619l72.34 97.277c12.118 18.929 33.084 30.112 55.217 30.11 1.661 0 3.331-0.387 5.002-0.387h268.89c17.198 0 31.19 13.939 31.19 30.89 0 2.037 0.194 4.176 0.547 6.11H287.598c-59.409 0-117.148 45.146-131.208 102.776L131 539.035V200.011C131 182.815 145.367 169 162.564 169z m735.732 270.462l-59.937 364.331C833.873 831.071 805.64 855 777.939 855h-617.78c-10.957 0-19.836-3.623-25.002-10.202-4.091-5.209-5.814-12.247-5.057-20.233a32.892 32.892 0 0 0 1.189-6.818l89.406-366.324C227.508 423.497 258.771 399 287.598 399h576.243c11.465 0 21.257 4.097 27.572 11.536 6.288 7.407 8.733 17.68 6.883 28.926z" p-id="86141" fill="#2c2c2c"></path></svg>
+<svg t="1716540775190" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="102379" width="200" height="200"><path d="M1049.6 288.682667v-76.458667c0-65.706667-52.053333-139.093333-121.685333-139.093333H576.768l-14.506667-27.392A83.370667 83.370667 0 0 0 488.192 0.853333h-374.613333C51.029333 0.853333 0.256 53.077333 0.256 117.333333v713.130667c0 64.170667 50.773333 116.394667 113.322667 116.394667h881.578666c62.464 0 113.322667-52.224 113.322667-116.394667v-437.76c0-37.888-25.088-78.08-58.88-104.106667z m-121.685333-145.664c24.149333 0 51.797333 36.864 51.797333 69.12v48.384l-3.498667-0.085334H676.010667l-62.208-117.418666h314.026666z m110.592 687.445333c0 25.6-19.456 46.506667-43.349334 46.506667H113.578667c-23.893333 0-43.434667-20.906667-43.434667-46.506667V117.333333c0-25.6 19.456-46.506667 43.434667-46.506666h374.613333a13.653333 13.653333 0 0 1 12.202667 7.509333l123.733333 233.472a34.986667 34.986667 0 0 0 30.890667 18.602667h321.194666c25.002667 0 62.293333 37.290667 62.293334 62.293333v437.76z" fill="#2c2c2c" p-id="102380"></path></svg>
--- a/src/icons/svg/file-transfer.svg
+++ b/src/icons/svg/file-transfer.svg
@@ -1 +1 @@
-<svg t="1716530340507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="57549" width="200" height="200"><path d="M94.698667 149.333333l245.354666 1.28c7.104 0.042667 13.952 2.666667 19.413334 7.424l112.682666 98.432h457.301334c16.874667 0 30.549333 14.314667 30.549333 32v554.176c0 17.685333-13.674667 32-30.549333 32H94.549333C77.653333 874.666667 64 860.330667 64 842.666667V181.333333c0-17.728 13.76-32.085333 30.698667-32zM128 213.504v597.141333h768V320.469333H461.482667c-7.104 0-13.973333-2.645333-19.413334-7.424l-111.914666-98.496L128 213.482667zM394.666667 597.333333h256.512a32 32 0 0 1 31.104 39.530667l-0.789334 2.709333-32.426666 96a32 32 0 0 1-61.482667-17.493333l0.853333-2.986667 18.133334-53.76H394.666667a32 32 0 0 1-3.072-63.850666L394.666667 597.333333h256.512H394.666667z m42.666666-211.626666a32 32 0 0 1 20.949334 37.568l-0.853334 2.986666-18.154666 53.76h211.925333a32 32 0 0 1 3.072 63.850667l-3.072 0.128H394.666667a32 32 0 0 1-31.104-39.530667l0.789333-2.709333 32.426667-96a32 32 0 0 1 40.533333-20.053333z" fill="#2c2c2c" p-id="57550"></path></svg>
+<svg t="1716540225224" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="97212" width="200" height="200"><path d="M282.794667 113.777778H113.777778a56.888889 56.888889 0 0 0-56.888889 56.888889v739.555555a56.888889 56.888889 0 0 0 56.888889 56.888889h796.444444a56.888889 56.888889 0 0 0 56.888889-56.888889V315.619556a56.888889 56.888889 0 0 0-56.888889-56.888889H470.129778a73.955556 73.955556 0 0 1-49.891556-19.342223L282.794667 113.777778zM113.777778 56.888889h184.490666a17.066667 17.066667 0 0 1 11.491556 4.494222l148.878222 135.964445a17.066667 17.066667 0 0 0 11.491556 4.494222H910.222222a113.777778 113.777778 0 0 1 113.777778 113.777778V910.222222a113.777778 113.777778 0 0 1-113.777778 113.777778H113.777778a113.777778 113.777778 0 0 1-113.777778-113.777778V170.666667a113.777778 113.777778 0 0 1 113.777778-113.777778z" fill="#2c2c2c" p-id="97213"></path><path d="M628.565333 503.296l-69.404444-54.215111a28.444444 28.444444 0 1 1 34.986667-44.828445l134.485333 105.073778a28.444444 28.444444 0 0 1-17.521778 50.858667h-398.222222a28.444444 28.444444 0 1 1 0-56.888889h315.676444zM395.491556 673.962667l69.404444 54.215111a28.444444 28.444444 0 1 1-35.043556 44.828444l-134.485333-105.073778a28.444444 28.444444 0 0 1 17.578667-50.858666h398.222222a28.444444 28.444444 0 1 1 0 56.888889H395.491556z" fill="#2c2c2c" p-id="97214"></path></svg>
--- a/src/icons/svg/template.svg
+++ b/src/icons/svg/template.svg
@@ -1 +1 @@
-<svg t="1716521434888" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26786" width="200" height="200"><path d="M864 128h-704a34.56 34.56 0 0 0-32 32v704a34.56 34.56 0 0 0 32 32h704a34.56 34.56 0 0 0 32-32v-704a34.56 34.56 0 0 0-32-32zM320 832H192V384h128z m512 0H384V384h448z m0-512H192V192h640z" fill="#2c2c2c" p-id="26787"></path></svg>
+<svg t="1716539343365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="93355" width="200" height="200"><path d="M943.786667 42.666667H80.213333C59.456 42.666667 42.666667 59.434667 42.666667 80.213333v863.573334c0 20.778667 16.768 37.546667 37.546666 37.546666h863.573334c20.778667 0 37.546667-16.768 37.546666-37.546666V80.213333C981.333333 59.456 964.565333 42.666667 943.786667 42.666667zM127.146667 127.146667h159.573333v769.706666H127.146667V127.146667z m769.706666 769.706666H361.813333V361.813333h535.04v535.04z m-535.04-610.133333V127.146667h535.04v159.573333H361.813333z" p-id="93356" fill="#2c2c2c"></path></svg>
--- a/src/layout/components/NavHeader/ViewSwitcher.vue
+++ b/src/layout/components/NavHeader/ViewSwitcher.vue
@@ -151,10 +151,6 @@ export default {
    &:hover {
      background-color: var(--menu-hover);
    }
-
-    &:focus {
-      background-color: transparent;
-    }
  }
 }

@@ -195,6 +191,7 @@ export default {
 .el-menu-item {
  &.is-active {
    color: var(--menu-text-active);
+    background-color: var(--menu-hover);

    &:before {
      content: '';
--- a/src/router/workbench/index.js
+++ b/src/router/workbench/index.js
@@ -248,18 +248,18 @@ export default {
            permissions: ['ops.view_playbook'],
            activeMenu: '/workbench/ops/templates'
          }
+        },
+        {
+          path: '/workbench/system-tools',
+          name: 'SystemTools',
+          component: () => import('@/views/settings/Tool'),
+          meta: {
+            title: i18n.t('SystemTools'),
+            icon: 'tools',
+            permissions: ['rbac.view_systemtools']
+          }
        }
      ]
-    },
-    {
-      path: '/workbench/system-tools',
-      name: 'SystemTools',
-      component: () => import('@/views/settings/Tool'),
-      meta: {
-        title: i18n.t('SystemTools'),
-        icon: 'tools',
-        permissions: ['rbac.view_systemtools']
-      }
    }
  ]
 }
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -1,10 +1,13 @@
@import "./variables";

-$icon-width: 14px;
-$single-menu-height: 40px;
+$icon-width: 15px;
+$single-menu-height: 38px;
@mixin hover_active {
  background-color: var(--menu-hover);
  color: var(--color-primary);
+}
+
+@mixin only_active {
  &:before {
    content: '';
    position: absolute;
@@ -23,7 +26,7 @@ $single-menu-height: 40px;
 .left-menu.el-menu {
  .submenu-item {
    &.el-submenu-sidebar {
-
+      margin-top: 4px;
      &.is-opened {
        .el-icon-arrow-down {
          display: none;
@@ -31,12 +34,12 @@ $single-menu-height: 40px;
      }
      // 有子菜单项的 title
      .el-submenu__title {
-        height: 38px;
+        height: 34px;
        font-size: 11px;
        cursor: default;
        font-weight: 500;
-        line-height: 38px;
-        letter-spacing: .05em;
+        line-height: 30px;
+        letter-spacing: .07em;
        color: var(--color-text-primary) !important;

        .svg-icon {
@@ -64,16 +67,22 @@ $single-menu-height: 40px;
            justify-content: flex-start;
            align-items: center;
            height: 36px;
-            padding: 19px !important;
+            padding: 19px 20px !important;
            line-height: 36px;
            min-width: 200px;
-            font-size: 13px;
+            font-size: 12px;

-            &.is-active {
+            &:hover,
+            &.is-active, {
              @include hover_active;
            }

+            &.is-active {
+              @include only_active;
+            }
+
            .svg-icon {
+              font-weight: 500;
              overflow: hidden;
              width: $icon-width;
              height: $icon-width;
@@ -100,13 +109,17 @@ $single-menu-height: 40px;
      height: $single-menu-height;
      line-height: $single-menu-height;
      min-width: 200px;
-      font-size: 13px;
+      font-size: 12px;

      &:hover,
      &.is-active {
       @include hover_active
      }

+      &.is-active {
+        @include only_active;
+      }
+
      .svg-icon {
        //display: none;
        width: $icon-width;
@@ -166,8 +179,4 @@ $single-menu-height: 40px;
  .is-active i.fa {
    color: $menuActiveText;
  }
-
-  .nest-menu:last-child {
-    padding-bottom: 10px;
-  }
 }
--- a/src/utils/theme/color.js
+++ b/src/utils/theme/color.js
@@ -90,20 +90,23 @@ export function changeMenuColor(themeColors) {
    colors['--menu-hover'] = mix(white, menuActiveTextColor.replace(/#/g, ''), 90)
  }

-  const lights = [15, 40, 60, 80, 90]
-  const darken = [15, 30, 40, 60, 80]
+  const lights = [15, 40, 60, 90]
+  const darken = [15, 30, 40, 80]

+  const colorsGenMore = ['--color-primary']
  for (const key in colors) {
    const currentColor = colors[key]
    elementStyle.setProperty(key, currentColor)

-    for (const [i, light] of lights.entries()) {
-      const color = mix(white, currentColor.replace(/#/g, ''), light)
-      elementStyle.setProperty(key + '-light' + '-' + i, color)
-    }
-    for (const [i, dark] of darken.entries()) {
-      const color = mix(black, currentColor.replace(/#/g, ''), dark)
-      elementStyle.setProperty(key + '-dark' + '-' + i, color)
+    if (colorsGenMore.includes(key)) {
+      for (const [i, light] of lights.entries()) {
+        const color = mix(white, currentColor.replace(/#/g, ''), light)
+        elementStyle.setProperty(key + '-light' + '-' + i, color)
+      }
+      for (const [i, dark] of darken.entries()) {
+        const color = mix(black, currentColor.replace(/#/g, ''), dark)
+        elementStyle.setProperty(key + '-dark' + '-' + i, color)
+      }
    }

    if (key.includes('--color')) {
--- a/src/utils/theme/index.js
+++ b/src/utils/theme/index.js
@@ -18,6 +18,7 @@ export function changeElementColor(themeColors) {
    if (['primary', 'success', 'info', 'warning', 'danger'].includes(key)) {
      const blendColor = mix('ffffff', value.replace(/#/g, ''), 35)
      const darken = mix('000000', value.replace(/#/g, ''), 10)
+      const tooLightColor = mix('ffffff', value.replace(/#/g, ''), 90)
      colorsCssText = colorsCssText + `
        .el-button--${key}{
           border-color: var(--color-border);
@@ -48,7 +49,7 @@ export function changeElementColor(themeColors) {
          background-color: ${value} !important;
        }
        .el-alert.el-alert--${key}.is-light {
-          background-color: var(--color-${key}-light-4);
+          background-color: ${tooLightColor};
        }
      `
    }