更新前端线自适应显示问题

src/components/CommonAside.vue

@@ -1,6 +1,5 @@
 <template>
-  <el-aside :width="width" class="common-aside">
-    <!-- 加载状态 -->
+  <el-aside :width="width" class="common-aside" :class="{ 'mobile-open': mobileOpen }">
     <div v-if="loading" class="loading-spinner">
       <i class="el-icon-loading" style="font-size: 24px; color: #fff"></i>
     </div>
@@ -27,7 +26,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">
@@ -144,6 +146,10 @@
       </template>
     </el-menu>
   </el-aside>
+
+  <teleport to="body">
+    <div v-if="mobileOpen" class="aside-mobile-overlay" @click="closeMobile" />
+  </teleport>
 </template>
 
 <script setup>
@@ -165,6 +171,14 @@ const store = useAllDataStore();
 const isCollapse = computed(() => store.state.isCollapse);
 const width = computed(() => (store.state.isCollapse ? "64px" : "200px"));
 
+const mobileOpen = ref(false);
+
+function openMobile() { mobileOpen.value = true; }
+function closeMobile() { mobileOpen.value = false; }
+function toggleMobile() { mobileOpen.value = !mobileOpen.value; }
+
+defineExpose({ openMobile, closeMobile, toggleMobile });
+
 const asideBgColor = ref("#304156");
 const asideTextColor = ref("#bfcbd9");
 const activeColor = ref("#3973FF");
@@ -315,6 +329,8 @@ const list = computed(() => {
 });
 
 const handleMenuSelect = (index) => {
+  // 移动端点击菜单后关闭侧边栏
+  closeMobile();
   if (index === "/home") {
     emit("menu-click", {
       path: "/home",
@@ -417,6 +433,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;
+    }
+  }
 }
 
 // 菜单样式
@@ -522,7 +570,17 @@ h3 {
 // 响应式设计
 @media (max-width: 768px) {
   .common-aside {
-    width: 100% !important;
+    position: fixed !important;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    height: 100vh !important;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease, width 0.3s ease !important;
+
+    &.mobile-open {
+      transform: translateX(0);
+    }
   }
 
   :deep(.el-menu) {
@@ -530,3 +588,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 goHome = () => {