移动端抽屉侧边栏

src/layouts/MainLayout.vue

@@ -16,10 +16,13 @@
       />
     </el-header>
     <el-container>
-      <el-aside width="240px">
+      <!-- 桌面端显示侧边栏，移动端隐藏（移动端使用抽屉式侧边栏） -->
+      <el-aside v-if="!appStore.isMobile" width="240px">
         <AppSidebar :menu-items="currentMenuItems" :theme="sidebarTheme" />
       </el-aside>
-      <el-main>
+      <!-- 移动端也渲染侧边栏，但使用固定定位的抽屉式效果 -->
+      <AppSidebar v-if="appStore.isMobile" :menu-items="currentMenuItems" :theme="sidebarTheme" />
+      <el-main :class="{ 'mobile-main': appStore.isMobile }">
         <div class="content-wrapper">
           <!-- 企业认证提示 - 根据当前页面路径显示 -->
           <CertificationNotice
@@ -50,10 +53,12 @@ import AppHeader from '@/components/layout/AppHeader.vue'
 import AppSidebar from '@/components/layout/AppSidebar.vue'
 import NotificationPanel from '@/components/layout/NotificationPanel.vue'
 import { getCurrentPageCertificationConfig, getUserAccessibleMenuItems } from '@/constants/menu'
+import { useAppStore } from '@/stores/app'
 import { useUserStore } from '@/stores/user'
 import { ElMessageBox } from 'element-plus'
 
 const router = useRouter()
+const appStore = useAppStore()
 const userStore = useUserStore()
 
 const showNotifications = ref(false)
@@ -192,6 +197,13 @@ const handleUserCommand = async (command) => {
 .el-main {
   background: transparent;
   padding: 0;
+  transition: margin-left 0.3s ease;
+}
+
+/* 移动端内容区域全宽显示 */
+.mobile-main {
+  width: 100% !important;
+  margin-left: 0 !important;
 }
 
 /* 性能优化：为低端设备提供简化样式 */
@@ -199,6 +211,11 @@ const handleUserCommand = async (command) => {
   .content-wrapper {
     padding: 0 12px 12px 12px;
   }
+
+  /* 确保移动端容器全宽 */
+  .el-container {
+    width: 100%;
+  }
 }
 
 /* 性能优化：减少动画效果 */