初始化

ema-admin/src/main/resources/web/css/main.css

@@ -47,12 +47,65 @@ body { overflow: hidden; }
 .layui-side {
     width: 200px !important;
     top: 0;
+    transition: width 0.3s;
 }
 
 .layui-side-scroll {
     width: 220px;
 }
 
+/* 侧边栏收起状态 */
+.layui-side.layui-nav-hide {
+    width: 0 !important;
+    overflow: hidden;
+}
+
+.layui-side.layui-nav-hide .layui-side-scroll {
+    display: none;
+}
+
+/* 收起/展开按钮 - 固定在左侧 */
+.side-toggle {
+    position: fixed;
+    left: 200px;
+    bottom: 52px;
+    width: 20px;
+    height: 40px;
+    background: #009688;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0 4px 4px 0;
+    cursor: pointer;
+    transition: left 0.3s, background-color 0.2s;
+    z-index: 1001;
+}
+
+.side-toggle:hover {
+    background: #00b5ad;
+}
+
+.side-toggle .layui-icon {
+    margin: 0;
+    font-size: 14px;
+}
+
+/* 收起状态按钮位置 - 移到左侧边缘 */
+.side-toggle.collapsed {
+    left: 0;
+    border-radius: 0 4px 4px 0;
+}
+
+/* 主体内容过渡 */
+.layui-body {
+    transition: left 0.3s;
+}
+
+.layui-side.layui-nav-hide ~ .layui-body {
+    left: 0;
+}
+
 .layui-nav-tree .layui-nav-item a {
     height: 50px;
     line-height: 50px;

ema-admin/src/main/resources/web/js/main.js

@@ -9,6 +9,25 @@ layui.use(['element', 'layer'], function () {
     // 检查登录状态
     Common.checkLogin();
 
+    // 侧边栏收起/展开
+    var isSideCollapsed = false;
+    $('#sideToggle').click(function () {
+        isSideCollapsed = !isSideCollapsed;
+        if (isSideCollapsed) {
+            $('#sideNav').addClass('layui-nav-hide');
+            $('#sideToggle').addClass('collapsed');
+            $('#sideToggle .layui-icon').removeClass('layui-icon-prev').addClass('layui-icon-next');
+            $('#sideToggle').attr('title', '展开菜单');
+        } else {
+            $('#sideNav').removeClass('layui-nav-hide');
+            $('#sideToggle').removeClass('collapsed');
+            $('#sideToggle .layui-icon').removeClass('layui-icon-next').addClass('layui-icon-prev');
+            $('#sideToggle').attr('title', '收起菜单');
+        }
+        // 触发窗口调整
+        window.onresize();
+    });
+
     // 获取用户信息
     var userInfo = Common.getUserInfo();
     if (userInfo) {

ema-admin/src/main/resources/web/pages/main.html

@@ -39,14 +39,19 @@
         </div>
         
         <!-- 左侧导航 -->
-        <div class="layui-side layui-bg-black">
+        <div class="layui-side layui-bg-black" id="sideNav">
             <div class="layui-side-scroll">
                 <ul class="layui-nav layui-nav-tree" lay-filter="navMenu" id="navMenu">
                     <!-- 菜单将通过JS动态加载 -->
                 </ul>
             </div>
         </div>
-        
+
+        <!-- 收起/展开按钮 -->
+        <a href="javascript:;" class="side-toggle" id="sideToggle" title="收起菜单">
+            <i class="layui-icon layui-icon-prev"></i>
+        </a>
+
         <!-- 主体内容区域 -->
         <div class="layui-body">
             <!-- 标签页 -->