From ce153c132307cecb8d50bf61337fc2bdd1fe17f3 Mon Sep 17 00:00:00 2001
From: Zhang Jing Xuan <17660634225@163.com>
Date: Fri, 31 Jul 2026 17:44:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=8A=BD=E5=B1=89?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 检测移动端设备(<768px)自动切换为抽屉式侧边栏
- 添加半透明遮罩层和滑入滑出动画
- 路由切换时自动关闭侧边栏
- 优化移动端导航体验
---
 frontend/src/components/layout/AppLayout.vue | 65 ++++++++++++++++++--
 1 file changed, 61 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/layout/AppLayout.vue b/frontend/src/components/layout/AppLayout.vue
index f801b85..c1905b9 100644
--- a/frontend/src/components/layout/AppLayout.vue
+++ b/frontend/src/components/layout/AppLayout.vue
@@ -1,12 +1,18 @@
 <template>
   <router-view v-if="route.meta.fullPage" />
   <el-container v-else class="app-layout">
-    <el-aside :width="isCollapse ? 'var(--sidebar-collapsed)' : 'var(--sidebar-width)'" class="sidebar" :class="{ collapsed: isCollapse }">
-      <AppSidebar :is-collapse="isCollapse" />
+    <!-- Mobile backdrop -->
+    <div v-if="isMobile && !isCollapse" class="mobile-backdrop" @click="isCollapse = true"></div>
+    <el-aside
+      :width="isCollapse && !isMobile ? 'var(--sidebar-collapsed)' : 'var(--sidebar-width)'"
+      class="sidebar"
+      :class="{ collapsed: isCollapse, 'mobile-drawer': isMobile, 'mobile-open': isMobile && !isCollapse }"
+    >
+      <AppSidebar :is-collapse="isCollapse && !isMobile" />
     </el-aside>
     <el-container class="main-container">
       <el-header class="app-header-bar" height="60px">
-        <AppHeader :is-collapse="isCollapse" @toggle="isCollapse = !isCollapse" />
+        <AppHeader :is-collapse="isCollapse" @toggle="handleToggle" />
       </el-header>
       <el-main class="app-main">
         <router-view v-slot="{ Component }">
@@ -20,13 +26,34 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import AppSidebar from './AppSidebar.vue'
 import AppHeader from './AppHeader.vue'
 
 const isCollapse = ref(false)
+const isMobile = ref(false)
 const route = useRoute()
+
+function checkMobile() {
+  isMobile.value = window.innerWidth < 768
+  if (isMobile.value) isCollapse.value = true
+}
+
+function handleToggle() {
+  isCollapse.value = !isCollapse.value
+}
+
+// Close drawer on route change (mobile)
+watch(() => route.path, () => {
+  if (isMobile.value) isCollapse.value = true
+})
+
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+onUnmounted(() => window.removeEventListener('resize', checkMobile))
 </script>
 
 <style scoped>
@@ -89,4 +116,34 @@ const route = useRoute()
 .fade-leave-to {
   opacity: 0;
 }
+
+
+.mobile-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 99;
+}
+
+.sidebar.mobile-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  z-index: 100;
+  transform: translateX(-100%);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
+}
+
+.sidebar.mobile-drawer.mobile-open {
+  transform: translateX(0);
+}
+
+@media (max-width: 767px) {
+  .app-header-bar {
+    padding: 0 12px;
+  }
+}
+
 </style>