..

src/main/resources/views/layouts/v4/subApp.html

@@ -153,22 +153,87 @@ layout("/layouts/v4/platform.html"){
         min-height: 400px;
     }
 
+    /* 悬浮菜单按钮样式 */
+    .menu-toggle-btn {
+        display: none;
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background-color: rgb(64 109 157);
+        color: white;
+        text-align: center;
+        line-height: 50px;
+        font-size: 24px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        z-index: 1000;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .menu-toggle-btn:hover {
+        background-color: rgb(54 99 147);
+        transform: scale(1.05);
+    }
+
+    .menu-toggle-btn.active {
+        background-color: #d9534f;
+    }
+
+    /* 菜单遮罩层样式 */
+    .menu-overlay {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 998;
+    }
+
     @media (max-width: 768px) {
-        .sub-app-container {
-            flex-direction: column;
-        }
+        /*.sub-app-container {*/
+        /*    !* flex-direction: column; *!*/
+        /*}*/
 
         .sidebar-menu {
-            width: 100%;
+            position: fixed;
+            top: 0;
+            left: -100%;
+            width: 80%;
+            height: 100vh;
+            z-index: 999;
+            transition: left 0.3s ease;
+            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
+            overflow-y: auto;
+        }
+
+        .sidebar-menu.show {
+            left: 0;
+        }
+
+        .menu-toggle-btn {
+            display: block;
+        }
+
+        .menu-overlay.show {
+            display: block;
         }
 
         .main-content {
             padding: 20px;
+            width: 100%;
         }
     }
 </style>
 
 <div class="sub-app-container" id="sub-app-container">
+    <!-- 菜单遮罩层 -->
+    <div class="menu-overlay" id="menu-overlay"></div>
+
     <!-- 左侧菜单区域 -->
     <nav class="sidebar-menu">
         <div class="menu-header">
@@ -219,6 +284,11 @@ layout("/layouts/v4/platform.html"){
         <!--# } #-->
     </nav>
 
+    <!-- 悬浮菜单按钮 -->
+    <div class="menu-toggle-btn" id="menu-toggle-btn">
+        <i class="fa fa-bars"></i>
+    </div>
+
     <!-- 右侧主体区域 -->
     <main class="main-content">
         <header class="content-header">
@@ -234,6 +304,33 @@ layout("/layouts/v4/platform.html"){
     document.addEventListener("DOMContentLoaded", function () {
         const menuLinks = document.querySelectorAll(".menu-link")
         const contentTitle = document.querySelector(".content-title")
+        const menuToggleBtn = document.getElementById("menu-toggle-btn")
+        const sidebarMenu = document.querySelector(".sidebar-menu")
+        const menuOverlay = document.getElementById("menu-overlay")
+        const isMobile = window.innerWidth <= 768
+
+        // 移动设备下点击菜单项后自动收起菜单
+        function toggleMobileMenu(show) {
+            if (show) {
+                sidebarMenu.classList.add("show")
+                menuOverlay.classList.add("show")
+                menuToggleBtn.classList.add("active")
+                menuToggleBtn.innerHTML = '<i class="fa fa-times"></i>'
+            } else {
+                sidebarMenu.classList.remove("show")
+                menuOverlay.classList.remove("show")
+                menuToggleBtn.classList.remove("active")
+                menuToggleBtn.innerHTML = '<i class="fa fa-bars"></i>'
+            }
+        }
+
+        // 初始化菜单按钮状态
+        if (window.innerWidth <= 768) {
+            menuToggleBtn.style.display = "block"
+        } else {
+            menuToggleBtn.style.display = "none"
+        }
+
         menuLinks.forEach((link) => {
             link.addEventListener("click", function (e) {
                 // 检查是否有 data-pjax 属性
@@ -242,6 +339,11 @@ layout("/layouts/v4/platform.html"){
                 if (pjax) {
                     // 如果有 pjax 属性，不阻止默认行为，让 pjax 处理
                     // 但仍然处理菜单样式更新
+
+                    // 在移动设备上，点击菜单项后自动收起菜单
+                    if (window.innerWidth <= 768) {
+                        toggleMobileMenu(false)
+                    }
                 } else {
                     // 如果没有 pjax 属性，阻止默认跳转
                     e.preventDefault()
@@ -285,6 +387,34 @@ layout("/layouts/v4/platform.html"){
             })
         })
 
+        // 菜单切换按钮点击事件
+        menuToggleBtn.addEventListener("click", function() {
+            const isMenuShown = sidebarMenu.classList.contains("show")
+            toggleMobileMenu(!isMenuShown)
+        })
+
+        // 遮罩层点击事件，点击遮罩层关闭菜单
+        menuOverlay.addEventListener("click", function() {
+            toggleMobileMenu(false)
+        })
+
+        // 窗口大小变化时处理菜单状态
+        window.addEventListener("resize", function() {
+            if (window.innerWidth <= 768) {
+                menuToggleBtn.style.display = "block"
+                // 如果从大屏幕变为小屏幕，默认收起菜单
+                if (!isMobile) {
+                    toggleMobileMenu(false)
+                }
+            } else {
+                menuToggleBtn.style.display = "none"
+                // 大屏幕下移除所有移动端相关类
+                sidebarMenu.classList.remove("show")
+                menuOverlay.classList.remove("show")
+                menuToggleBtn.classList.remove("active")
+            }
+        })
+
         $(document).pjax("#sub-app-container .sidebar-menu a[data-pjax]", "#sub-app-container-main-content", {
             maxCacheLength: 0,
             push: true,