优化细节

layouts/admin/components/AdminSubsider.uvue

@@ -1,5 +1,9 @@
 <template>
-  <view class="admin-subsider" :style="{ left: asideWidth + 'px', width: siderWidth + 'px' }">
+  <view
+    class="admin-subsider"
+    :class="{ 'is-hidden': !visible }"
+    :style="{ left: asideWidth + 'px', width: siderWidth + 'px' }"
+  >
     <view class="subsider-header">
       <text class="header-title">{{ topMenuTitle }}</text>
     </view>
@@ -10,8 +14,8 @@
           <text>{{ group.title }}</text>
         </view>
 
-        <view 
-          v-for="route in getGroupRoutes(group.id)" 
+        <view
+          v-for="route in getGroupRoutes(group.id)"
           :key="route.id"
           class="menu-item"
           :class="{ active: route.id === activeRouteId }"
@@ -28,6 +32,7 @@
 import type { MenuGroup, RouteRecord } from '@/layouts/admin/router/adminRoutes.uts'
 
 const props = defineProps<{
+  visible: boolean // ✅ 新增：由父层控制显示/隐藏（不要用 v-if 卸载）
   topMenuTitle: string
   groups: MenuGroup[]
   routes: Map<string, RouteRecord[]>
@@ -56,10 +61,45 @@ function onRouteClick(routeId: string): void {
   bottom: 0;
   background: #fff;
   border-right: 1px solid #e8e8e8;
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
   display: flex;
   flex-direction: column;
+
+  /* ✅ 动画只用 GPU 友好属性，避免 width/left 导致卡顿 */
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  will-change: transform, opacity;
+
+  /* ✅ 可点击时才需要高 z-index */
   z-index: 999;
+
+  /* ✅ 注意：visibility 默认可见 */
+  visibility: visible;
+
+  /* 显示态：visibility 不延迟 */
+  transition: transform 300ms ease, opacity 250ms ease, visibility 0s linear 0s;
+}
+
+/* 悬浮/抽屉模式：复刻 CRMEB 核心逻辑 */
+.sub-sider-overlay {
+  z-index: 1001;
+  box-shadow: 6px 0 16px rgba(0, 0, 0, 0.08);
+}
+
+.admin-subsider.is-hidden {
+  /* ✅ 立即禁止拦截点击，彻底解决“遮挡可操作区” */
+  pointer-events: none;
+
+  /* ✅ 先淡出 + 滑出（推荐滑出 100%：完全离开可视区） */
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+
+  /* ✅ 动画结束后再隐藏（避免那一帧还挡住） */
+  visibility: hidden;
+  transition: transform 300ms ease, opacity 250ms ease, visibility 0s linear 300ms;
+
+  /* 可选：进一步避免层叠影响 */
+  z-index: 0;
 }
 
 .subsider-header {
@@ -68,7 +108,7 @@ function onRouteClick(routeId: string): void {
   align-items: center;
   padding: 0 16px;
   border-bottom: 1px solid #e8e8e8;
-  
+
   .header-title {
     font-size: 16px;
     font-weight: 600;
@@ -79,7 +119,9 @@ function onRouteClick(routeId: string): void {
 .subsider-menu {
   flex: 1;
   padding: 8px 0;
-  overflow-y: scroll;
+
+  /* ✅ 用 auto，避免一直显示滚动条影响布局 */
+  overflow-y: auto;
 }
 
 .menu-group {
@@ -91,7 +133,7 @@ function onRouteClick(routeId: string): void {
   font-size: 12px;
   color: #999;
   font-weight: 500;
-  
+
   text {
     display: block;
   }
@@ -103,17 +145,19 @@ function onRouteClick(routeId: string): void {
   display: flex;
   align-items: center;
   cursor: pointer;
-  transition: all 0.2s;
   position: relative;
-  
+
+  /* ✅ 不要 transition: all（会引发布局属性动画/回流） */
+  transition: background-color 0.2s ease, color 0.2s ease;
+
   &:hover {
     background: #f5f5f5;
   }
-  
+
   &.active {
     background: #e6f7ff;
     color: #1890ff;
-    
+
     &::after {
       content: '';
       position: absolute;
@@ -124,7 +168,7 @@ function onRouteClick(routeId: string): void {
       background: #1890ff;
     }
   }
-  
+
   .item-title {
     font-size: 14px;
   }