..

src/main/resources/views/layouts/platform.html

@@ -115,22 +115,82 @@ layout("/layouts/v4/baseLayout.html"){
         height: 100%;
     }
 
+
+    /* 悬浮菜单按钮样式 */
+    .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;
-        }
-
         .sidebar-menu {
-            width: 100%;
+            position: fixed;
+            top: 64px;
+            left: -100%;
+            width: 40%;
+            z-index: 999;
+            transition: left 0.3s ease;
+            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
         }
 
-        .sub-app-container-main-content {
+        .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" id="sidebar-menu">
         <div class="menu-header">
@@ -150,6 +210,11 @@ layout("/layouts/v4/baseLayout.html"){
         <div class="content-body" id="sub-app-container-main-content-body">${layoutContent!}</div>
     </main>
 
+    <!-- 悬浮菜单按钮 -->
+    <div class="menu-toggle-btn" id="menu-toggle-btn">
+        <i class="fa fa-bars"></i>
+    </div>
+
     <!-- 子应用ID -->
     <div id="sub-app-id" style="display: none"></div>
 </div>
@@ -177,29 +242,15 @@ layout("/layouts/v4/baseLayout.html"){
             setContentTitle()
         })
 
-        setContentTitle()
-    })()
 
-    // 设置内容标题
-    function setContentTitle() {
-        // const menu = store.state.user.menus.find((v) => v.href === window.location.pathname)
-        // $("#sub-app-container-main-content .content-title").text(menu?.name)
         try {
             const app = JSON.parse(window.sessionStorage.getItem("zhgh_sub_app"))
             $("#sub-app-container #sidebar-menu .menu-header .menu-title").text(app?.name)
         } catch (e) {
-        }
-    }
 
-    document.addEventListener("DOMContentLoaded", function () {
-        const menuLinks = document.querySelectorAll("#sidebar-menu a")
-        menuLinks.forEach((link) => {
-            link.addEventListener("click", function (e) {
-                const pjax = this.hasAttribute("data-pjax")
-                e.preventDefault()
-            })
-        })
-    })
+        }
+
+    })()
 
     new Vue({
         el: "#sidebar-menu",
@@ -361,11 +412,47 @@ layout("/layouts/v4/baseLayout.html"){
                     if (!appId) return
                     this.getMenus(appId)
                 }
-            }
+            },
 
         },
         mounted() {
             this.init()
+
+
+            // 移动端布局
+            const sidebarMenu = document.getElementById("sidebar-menu")
+            const menuToggleBtn = document.getElementById("menu-toggle-btn")
+            const menuOverlay = document.getElementById("menu-overlay")
+
+            // 初始化菜单状态
+            if (window.innerWidth <= 768) {
+                menuToggleBtn.style.display = "block"
+            } else {
+                menuToggleBtn.style.display = "none"
+            }
+
+            // 菜单按钮点击事件
+            menuToggleBtn.addEventListener("click", function () {
+                sidebarMenu.classList.toggle("show")
+                menuOverlay.classList.toggle("show")
+            })
+
+
+            // 遮罩层点击事件
+            menuOverlay.addEventListener("click", function () {
+                sidebarMenu.classList.remove("show")
+                menuOverlay.classList.remove("show")
+            })
+
+            window.addEventListener("resize", function () {
+                if (window.innerWidth <= 768) {
+                    menuToggleBtn.style.display = "block"
+                } else {
+                    menuToggleBtn.style.display = "none"
+                    sidebarMenu.classList.remove("show")
+                    menuOverlay.classList.remove("show")
+                }
+            })
         }
     })
 </script>