1

src/assets/styles/sidebar.scss

@@ -1,3 +1,12 @@
+@keyframes sidebarFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 #app {
 
   .main-container {
@@ -34,20 +43,9 @@
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
     }
     
-    // 添加进入动画
-    animation: slideInLeft 0.5s ease-out;
-  }
-  
-  @keyframes slideInLeft {
-    from {
-      transform: translateX(-100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
+    // 进入动画仅用透明度；勿对侧栏本体使用 transform，
+    // 否则会影响子菜单弹出层（popper-append-to-body）的定位，出现跑偏、重影。
+    animation: sidebarFadeIn 0.45s ease-out;
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -110,17 +108,7 @@
       line-height: 48px;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
-      
-      span {
-        font-size: 14px !important;
-        display: inline-block !important;
-        visibility: visible !important;
-        opacity: 1 !important;
-        width: auto !important;
-        height: auto !important;
-        overflow: visible !important;
-      }
-      
+
       &:hover {
         background: rgba(25, 118, 210, 0.1) !important;
         color: $base-menu-color-active !important;
@@ -148,6 +136,61 @@
       }
     }
 
+    // 仅在侧栏菜单「未折叠」时强制标题 span 可见；勿写在通用 .el-menu-item 上，
+    // 否则会覆盖 Element 折叠态样式，导致收起后文字仍挤出侧栏。
+    .el-menu:not(.el-menu--collapse) {
+      .el-menu-item,
+      .el-submenu > .el-submenu__title {
+        span {
+          font-size: 14px !important;
+          display: inline-block !important;
+          visibility: visible !important;
+          opacity: 1 !important;
+          width: auto !important;
+          height: auto !important;
+          overflow: visible !important;
+        }
+      }
+    }
+
+    // 侧栏折叠：单行只保留图标（与 hideSidebar / Element 折叠行为对齐）
+    .el-menu.el-menu--collapse {
+      .el-menu-item,
+      .el-submenu > .el-submenu__title {
+        overflow: hidden !important;
+      }
+
+      // 折叠态不要用 translate 做悬停位移，否则会抖动 reference，Popper 浮层错位/叠层
+      > .el-menu-item:hover,
+      > .el-submenu > .el-submenu__title:hover {
+        transform: none !important;
+        box-shadow: none !important;
+      }
+
+      .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+        display: none !important;
+      }
+
+      // 含 el-tooltip 包裹时文字不在 li 的直接子 span 上，故用后代选择器
+      > .el-menu-item span,
+      > .el-submenu > .el-submenu__title span {
+        visibility: hidden !important;
+        opacity: 0 !important;
+        width: 0 !important;
+        height: 0 !important;
+        overflow: hidden !important;
+        display: inline-block !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        font-size: 0 !important;
+        line-height: 0 !important;
+      }
+
+      .svg-icon:hover {
+        transform: none !important;
+      }
+    }
+
     // 子菜单样式优化
     .el-submenu {
       .el-submenu__title {
@@ -223,6 +266,9 @@
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;
+      // 折叠时关闭毛玻璃，避免 Chromium 下与 Popper 浮层定位/重影异常
+      backdrop-filter: none !important;
+      -webkit-backdrop-filter: none !important;
     }
 
     .main-container {
@@ -375,8 +421,10 @@
     }
   }
 
-// 弹出菜单样式优化
+}
+
 .el-menu--popup {
+  z-index: 3050 !important;
   background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
   border-radius: 12px !important;
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
@@ -393,7 +441,6 @@
     &:hover {
       background: rgba(25, 118, 210, 0.1) !important;
       color: $base-menu-color-active !important;
-      transform: translateX(4px);
     }
     
     &.is-active {