保留页面布局

layouts/admin/AdminLayout.uvue

@@ -1,7 +1,16 @@
 <template>
   <view class="layout-root">
+    <!-- 移动端遮罩层 -->
+    <view 
+      v-if="isMobile && isMobileMenuOpen" 
+      class="mobile-mask" 
+      @click="isMobileMenuOpen = false"
+    ></view>
+
     <!-- 主侧边栏 (CRMEB风格) -->
     <AdminAside
+      class="admin-sidebar"
+      :class="{ 'mobile-aside-open': isMobileMenuOpen }"
       :collapsed="isMainAsideCollapsed"
       :topMenus="topMenus"
       :activeTopMenuId="activeTopMenuId"
@@ -12,7 +21,7 @@
 
     <!-- 二级侧边栏 (CRMEB风格 - 内容区左侧) -->
     <AdminSubSider
-      v-if="showSubSider"
+      v-if="showSubSider && !isMobile"
       :topMenuTitle="activeTopMenuTitle"
       :groups="activeGroups"
       :routes="activeRoutes"
@@ -25,19 +34,22 @@
     <!-- 右侧内容区 -->
     <view
       class="main"
-      :style="{ marginLeft: mainLeft }"
+      :style="{ marginLeft: isMobile ? '0' : mainLeft }"
     >
       <!-- 顶部导航栏 -->
       <AdminHeader
         :breadcrumb="breadcrumb"
         :hasNotification="hasNotification"
+        :isMobile="isMobile"
+        @toggle-mobile-menu="isMobileMenuOpen = !isMobileMenuOpen"
         @search="onSearch"
         @refresh="onRefresh"
         @notify="onNotify"
       />
 
-      <!-- 标签页 (CRMEB风格) -->
+      <!-- 标签页 (CRMEB风格) - 移动端可以隐藏或滚动 -->
       <AdminTagsView
+        v-if="!isMobile"
         :tabs="tabs"
         :activeTabId="activeRouteId"
         @tab-click="onTabClick"
@@ -48,7 +60,7 @@
 
       <!-- 内容展示区 (内部路由渲染) -->
       <view class="content-scroll">
-        <view class="content-inner">
+        <view class="content-inner" :style="{ padding: isMobile ? '12px' : '16px' }">
           <component :is="currentComponent" />
         </view>
         <AdminFooter />
@@ -80,6 +92,9 @@ import {
   tabs,
   isMainAsideCollapsed,
   showSubSider,
+  windowWidth,
+  isMobile,
+  isMobileMenuOpen,
   openRoute,
   closeTab,
   closeOtherTabs,
@@ -194,6 +209,18 @@ function onNotify(): void {
 
 onMounted(() => {
   initNavState()
+  
+  // 初始化窗口宽度
+  windowWidth.value = uni.getWindowInfo().windowWidth
+  
+  // 监听窗口变化
+  uni.onWindowResize((res) => {
+    windowWidth.value = res.size.windowWidth
+    // 窗口变大时自动关闭移动端菜单
+    if (windowWidth.value >= 768) {
+      isMobileMenuOpen.value = false
+    }
+  })
 })
 </script>
 
@@ -204,6 +231,32 @@ onMounted(() => {
   width: 100%;
   min-height: 100vh;
   background: #f0f2f5;
+  position: relative;
+}
+
+/* 移动端侧边栏样式 */
+.mobile-aside {
+  position: absolute;
+  left: -100px; /* 隐藏在左侧 */
+  top: 0;
+  bottom: 0;
+  z-index: 1001;
+  transition: transform 0.3s ease;
+  background: #fff;
+}
+
+.mobile-aside-open {
+  transform: translateX(100px); /* 移入视图 */
+}
+
+.mobile-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1000;
 }
 
 .main {
@@ -213,11 +266,35 @@ onMounted(() => {
   min-height: 100vh;
   transition: margin-left 0.3s ease;
   background: #f0f2f5;
+  width: 100%;
+}
+
+/* 响应式强制覆盖 */
+@media screen and (max-width: 768px) {
+  .main {
+    margin-left: 0 !important;
+  }
+
+  /* 强行改变侧边栏布局模式 */
+  .admin-sidebar {
+    position: absolute !important;
+    left: -100px !important; /* 隐藏在左侧，假设 ASIDE_W 是 96 */
+    top: 0;
+    bottom: 0;
+    z-index: 1001;
+    transition: transform 0.3s ease !important;
+  }
+
+  /* 展开时的状态 */
+  .mobile-aside-open {
+    transform: translateX(100px) !important;
+  }
 }
 
 .content-scroll {
   flex: 1;
   overflow-y: scroll;
+  overflow-x: auto; /* 允许横向滚动，兼容极端窄屏 */
   background: #f0f2f5;
 }