From f81163aca811f2019ca465c46e3f261800f11a33 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sun, 14 Apr 2024 21:45:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0=E5=90=8Eicon=E4=B8=8D=E5=B1=85=E4=B8=AD?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Aside/index.vue | 18 ++++++++++++++++++
 src/layout/components/Menu/index.vue  | 12 +-----------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/layout/components/Aside/index.vue b/src/layout/components/Aside/index.vue
index 81bbca1..247221d 100644
--- a/src/layout/components/Aside/index.vue
+++ b/src/layout/components/Aside/index.vue
@@ -57,4 +57,22 @@ const { collapsed } = storeToRefs(themeStore);
   box-shadow: unset;
   border-right: $border-1 solid $color-border-2;
 }
+
+// 解决折叠菜单的icon不居中问题
+:deep(.arco-menu-vertical.arco-menu-collapsed) {
+  // 消除icon的自带padding值，并且让元素居中
+  .arco-menu-has-icon {
+    padding: 0;
+    justify-content: center;
+  }
+  // 消除icon的自带margin-right值，并且设置icon的padding值以保留icon空隙
+  .arco-menu-icon {
+    margin-right: 0;
+    padding: 10px 0;
+  }
+  // 消除title占位
+  .arco-menu-title {
+    display: none;
+  }
+}
 </style>
diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 0bee8a3..8fa6e71 100644
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -18,14 +18,4 @@ const { collapsed } = storeToRefs(themeStore);
 console.log("路由树", routeTree.value);
 </script>
 
-<style lang="scss">
-:deep(.arco-menu-pop .arco-menu-pop-header .arco-menu-has-icon) {
-  padding: 0 !important;
-}
-:deep(.arco-menu-vertical .arco-menu-pop-header) {
-  padding: 0 !important;
-}
-:deep(.arco-menu-vertical .arco-menu-item) {
-  padding: 0 !important;
-}
-</style>
+<style lang="scss" scoped></style>