fix: 🐛 侧边栏收缩扩展按钮显示样式和菜单图标边距修改优化

src/assets/icons/shrink.svg

@@ -1 +1 @@
-<svg t="1697690769344" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7573" width="200" height="200"><path d="M128 192l0-64L896 128l0 64-768 0z m192 447.808l-192-128 192-128 0 256zM384 544l0-64L896 480l0 64-512 0zM128 896l0-64L896 832V896l-768 0z" fill="#464955" p-id="7574"></path></svg>
+<svg t="1697727436066" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8081" width="200" height="200"><path d="M892.5 160h-760a4 4 0 0 0-4 4v64a4 4 0 0 0 4 4h760a4 4 0 0 0 4-4v-64a4 4 0 0 0-4-4z m0 210.7h-440a4 4 0 0 0-4 4v64a4 4 0 0 0 4 4h440a4 4 0 0 0 4-4v-64a4 4 0 0 0-4-4z m0 210.6h-440a4 4 0 0 0-4 4v64a4 4 0 0 0 4 4h440a4 4 0 0 0 4-4v-64a4 4 0 0 0-4-4z m0 210.7h-760a4 4 0 0 0-4 4v64a4 4 0 0 0 4 4h760a4 4 0 0 0 4-4v-64a4 4 0 0 0-4-4z m-527-140.8a4 4 0 0 0 6-3.5V376.3a4 4 0 0 0-6-3.5l-235 135.7a4 4 0 0 0 0 7z" p-id="8082"></path></svg>

src/components/Hamburger/index.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="menu-toggle-button" @click="toggleClick">
+  <div
+    class="px-[15px] flex items-center justify-center color-[var(--el-text-color-regular)]"
+    @click="toggleClick"
+  >
     <svg-icon
-      class="menu-toggle-button__icon"
+      class="hamburger"
       :class="{ 'is-active': isActive }"
       icon-class="shrink"
     />
   </div>
 </template>
-
 <script setup lang="ts">
 defineProps({
   isActive: {
@@ -25,26 +27,12 @@ function toggleClick() {
 </script>
 
 <style scoped lang="scss">
-.menu-toggle-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 15px;
+.hamburger {
+  vertical-align: middle;
   cursor: pointer;
-  transition: background-color 0.3s;
+}
 
-  :hover {
-    background-color: var(--el-fill-color);
-  }
-
-  &--active {
-    background-color: var(--el-fill-color-light);
-  }
-
-  &__icon {
-    &.is-active {
-      transform: rotate(180deg);
-    }
-  }
+.hamburger.is-active {
+  transform: rotate(180deg);
 }
 </style>

src/layout/components/NavBar/NavRight.vue

@@ -99,7 +99,7 @@ function logout() {
     cursor: pointer;
 
     &:hover {
-      background: var(--el-color-info-light-3);
+      background: var(--el-disabled-bg-color);
     }
   }
 }

src/layout/components/Sidebar/SidebarItem.vue

@@ -90,6 +90,7 @@ function resolvePath(routePath: string) {
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)">
           <svg-icon
+            class="mr-1"
             :icon-class="
               onlyOneChild.meta && onlyOneChild.meta.icon
                 ? onlyOneChild.meta.icon

src/layout/index.vue

@@ -190,6 +190,9 @@ function toggleSideBar() {
       .menu-action {
         position: absolute;
         bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: 100%;
         height: 50px;
         line-height: 50px;