From 1b93ce989c8397f93db5f8a34a18933c6d0ebd3e Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 5 Feb 2022 17:42:39 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=90=8C=E6=AD=A5=E5=AE=8C=E6=95=B4?=
 =?UTF-8?q?=E7=89=88=E5=88=86=E6=94=AF=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/sidebar/sidebarItem.vue | 19 +++++++++++++++++++
 src/style/sidebar.scss                        | 14 ++++----------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
index c918174..d3ede24 100644
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -31,6 +31,19 @@ const props = defineProps({
   }
 });
 
+const getExtraIconStyle = computed((): CSSProperties => {
+  if (useAppStoreHook().getSidebarStatus) {
+    return {
+      position: "absolute",
+      right: "10px"
+    };
+  } else {
+    return {
+      position: "static"
+    };
+  }
+});
+
 const getNoDropdownStyle = computed((): CSSProperties => {
   return {
     display: "flex",
@@ -177,6 +190,9 @@ function resolvePath(routePath) {
           </el-tooltip>
           <FontIcon
             v-if="onlyOneChild.meta.extraIcon"
+            width="30px"
+            height="30px"
+            :style="getExtraIconStyle"
             :icon="onlyOneChild.meta.extraIcon.name"
             :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
           ></FontIcon>
@@ -221,6 +237,9 @@ function resolvePath(routePath) {
       </el-tooltip>
       <FontIcon
         v-if="props.item.meta.extraIcon"
+        width="30px"
+        height="30px"
+        style="position: absolute; right: 10px"
         :icon="props.item.meta.extraIcon.name"
         :svg="props.item.meta.extraIcon.svg ? true : false"
       ></FontIcon>
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 691c738..86a10ac 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -306,6 +306,10 @@
       height: 48px;
       line-height: 48px;
       background: $menuBg;
+
+      svg {
+        position: static !important;
+      }
     }
 
     .is-active > .el-sub-menu__title,
@@ -600,16 +604,6 @@ body[layout="vertical"] {
       }
     }
 
-    .el-sub-menu {
-      overflow: hidden;
-
-      & > .el-sub-menu__title {
-        .el-sub-menu__icon-arrow {
-          display: none;
-        }
-      }
-    }
-
     /* 菜单折叠 */
     .el-menu--collapse {
       .el-sub-menu {