Merge branch 'master' of https://git.yunzer.cn/yunzerwebsite/platform-vue

src/components/CommonAside.vue

@@ -27,7 +27,10 @@
       :default-active="route.path"
     >
       <!-- 菜单标题 -->
-      <h3>{{ isCollapse ? "管理" : asideTitle }}</h3>
+      <h3>
+        {{ isCollapse ? "管理" : asideTitle }}
+        <span class="mobile-close-btn" @click="closeMobile">✕</span>
+      </h3>
 
       <!-- 无模块时显示提示（在首页 /home 时不显示，避免重复） -->
       <el-menu-item v-if="!currentModule && route.path !== '/home'" index="/home">
@@ -150,6 +153,10 @@
       </el-button>
     </div>
   </el-aside>
+
+  <teleport to="body">
+    <div v-if="mobileOpen" class="aside-mobile-overlay" @click="closeMobile" />
+  </teleport>
 </template>
 
 <script setup>
@@ -169,13 +176,7 @@ const errorMsg = computed(() => menuStore.error || "加载菜单失败");
 
 const store = useAllDataStore();
 const isCollapse = computed(() => store.state.isCollapse);
-const isMobile = ref(false);
-const width = computed(() => {
-  if (isMobile.value) {
-    return store.state.isCollapse ? "0px" : "220px";
-  }
-  return store.state.isCollapse ? "64px" : "200px";
-});
+const width = computed(() => (store.state.isCollapse ? "64px" : "200px"));
 
 const asideBgColor = ref("#304156");
 const asideTextColor = ref("#bfcbd9");
@@ -334,6 +335,8 @@ const list = computed(() => {
 });
 
 const handleMenuSelect = (index) => {
+  // 移动端点击菜单后关闭侧边栏
+  closeMobile();
   if (index === "/home") {
     emit("menu-click", {
       path: "/home",
@@ -451,6 +454,38 @@ h3 {
   margin: 0;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .mobile-close-btn {
+    display: none;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.15);
+    transition: background 0.2s;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+      color: #fff;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .mobile-close-btn {
+      display: block;
+    }
+  }
 }
 
 // 菜单样式
@@ -581,12 +616,7 @@ h3 {
 // 响应式设计
 @media (max-width: 768px) {
   .common-aside {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 1200;
-    max-width: 80vw;
+    width: 100% !important;
   }
 
   :deep(.el-menu) {
@@ -598,3 +628,18 @@ h3 {
   }
 }
 </style>
+
+<style>
+.aside-mobile-overlay {
+  display: none;
+}
+@media (max-width: 768px) {
+  .aside-mobile-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 999;
+  }
+}
+</style>

src/components/CommonHeader.vue

@@ -72,6 +72,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
+
+const emit = defineEmits(['collapse']);
 import { useAllDataStore, useMenuStore, useTabsStore } from "@/stores";
 import { useAuthStore } from "@/stores/auth";
 import { logout, getCurrentUser } from "@/api/login";
@@ -198,7 +200,11 @@ const roleLabel = computed(() => {
 });
 
 const handleCollapse = () => {
-  store.state.isCollapse = !store.state.isCollapse;
+  if (window.innerWidth <= 768) {
+    emit('collapse');
+  } else {
+    store.state.isCollapse = !store.state.isCollapse;
+  }
 };
 
 const showTopToggle = computed(() => store.state.isCollapse);