From 39c882ac16508dafee753dd9425b5b329c41b781 Mon Sep 17 00:00:00 2001 From: augushong Date: Sat, 10 Oct 2026 13:51:49 +0000 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=A4=B4=E9=83=A8=E6=A8=A1?= =?UTF-8?q?=E5=9D=97=E8=8F=9C=E5=8D=95=E5=AE=BD=E5=BA=A6=E8=87=AA=E9=80=82?= =?UTF-8?q?=E5=BA=94=E6=8A=98=E5=8F=A0=E4=B8=8E=E6=9B=B4=E5=A4=9A=E4=B8=8B?= =?UTF-8?q?=E6=8B=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugs/lay-module/layuimini/miniMenu.js | 110 +++++++++++++++++- 1 file changed, 106 insertions(+), 4 deletions(-) diff --git a/public/static/plugs/lay-module/layuimini/miniMenu.js b/public/static/plugs/lay-module/layuimini/miniMenu.js index ede2b93..cfe3c6b 100644 --- a/public/static/plugs/lay-module/layuimini/miniMenu.js +++ b/public/static/plugs/lay-module/layuimini/miniMenu.js @@ -226,9 +226,93 @@ }).join(""); $('.layui-layout-body').addClass('layuimini-multi-module'); //多模块标识 $('.layuimini-menu-header-pc').html(headerMenuHtml); //电脑 + // 常驻「更多」li：PC 多模块路径专属；自身不带 data-menu（不参与折叠遍历），li 带 lay-unselect 防 clickThis 洗牌激活态； + // 不手写 span.layui-nav-more（2.10.1 中手写不可见且会抑制自动注入箭头），由下方 element.init() 自动注入 chevron icon + $('.layuimini-menu-header-pc').append('
  • 更多
    • '); $('.layuimini-menu-left').html(leftMenuHtml); - + element.init(); + + // 首次渲染后重算宽度折叠，并同步「更多」激活态 + miniMenu.relayoutHeaderMenu(); + miniMenu.syncHeaderActiveState(); + }, + + /** + * 头部模块宽度自适应折叠重算：累计宽度超出可用宽度的模块收纳进「更多」下拉 + */ + relayoutHeaderMenu: function () { + var $headerMenu = $('.layuimini-menu-header-pc'); + if (!$headerMenu.is(':visible')) { //可见性守卫：≤1024 时 pc-show 隐藏，测量隐藏容器得到全零宽度脏状态 + return; + } + var $more = $headerMenu.children('.layuimini-header-more'); + if (!$more.length) { + return; + } + // 可用宽度 = 右侧功能区左边界 - 头部菜单容器左边界 - 安全边距 - 「更多」自身常驻占位 + var availableWidth = $('.layui-layout-right').first().offset().left - $headerMenu.offset().left - 12 - $more.outerWidth(true); + var $items = $headerMenu.children('li[data-menu]'); //仅模块 li；「菜单」模板 li 无 data-menu 不会被触及 + $items.removeClass('layui-hide'); //测量前先全部回填可见，保证变宽时能恢复 + var usedWidth = 0, + hiddenMenus = []; + $items.each(function () { + var $item = $(this); + usedWidth += $item.outerWidth(true); + if (usedWidth > availableWidth) { + $item.addClass('layui-hide'); + hiddenMenus.push($item.attr('data-menu')); + } + }); + // 用被隐藏模块按显示顺序重建下拉：dd 带 lay-unselect 防 clickThis 洗牌、带 a 承接主题悬停/颜色样式、不带 id + var ddHtml = ''; + miniMenu.each(hiddenMenus, function (index, menuId) { + var menuIndex = parseInt(menuId.replace('multi_module_', ''), 10); + var menu = (miniMenu.menuData || [])[menuIndex] || {}; + var icon = menu.icon ? menu.icon : ''; + ddHtml += '
    ' + (menu.title || '') + '
    '; + }); + $more.children('dl.layui-nav-child').html(ddHtml); + element.init(); //已核实安全：只重绑事件与 bar span，不重建 dd DOM，激活态得以保留 + miniMenu.syncHeaderActiveState(); //折叠可能隐藏当前激活项，重算后立即同步 + }, + + /** + * 「更多」与下拉 dd 的激活态同步：激活态真源是头部模块 li（即使被折叠隐藏） + */ + syncHeaderActiveState: function () { + var $more = $('.layuimini-header-more'); + if (!$more.length) { + return; + } + var $activeLi = $('.layuimini-header-menu li.layui-this').not('.layuimini-header-more').first(); + var isActiveHidden = $activeLi.length > 0 && $activeLi.hasClass('layui-hide'); + if (isActiveHidden) { + $more.addClass('layui-this'); + } else { + $more.removeClass('layui-this'); + } + // 下拉内对应 dd 与隐藏 li 的激活态对齐 + var $dd = $more.find('dl.layui-nav-child dd'); + $dd.removeClass('layui-this'); + if (isActiveHidden) { + $dd.filter('[data-menu="' + $activeLi.attr('data-menu') + '"]').addClass('layui-this'); + } + }, + + /** + * 轻量防抖：delay 内重复触发只执行最后一次 + */ + debounce: function (fn, delay) { + var timer = null; + return function () { + var context = this, + args = arguments; + clearTimeout(timer); + timer = setTimeout(function () { + fn.apply(context, args); + }, delay); + }; }, /** @@ -242,17 +326,33 @@ $('body').on('click', '[data-menu]', function () { var loading = layer.load(0, { shade: false, time: 2 * 1000 }); var menuId = $(this).attr('data-menu'); - // header - $(".layuimini-header-menu .layui-nav-item.layui-this").removeClass('layui-this'); - $(this).addClass('layui-this'); + var $headerLi = $("#" + menuId + "HeaderId"); + // header：清空范围含被折叠隐藏的 li；激活态真源始终是头部模块 li（即使隐藏），不依赖 $(this) 高亮 + $(".layuimini-header-menu .layui-nav-item").removeClass('layui-this'); + $headerLi.addClass('layui-this'); + // 被点击元素不是头部模块 li 本身（即「更多」下拉 dd 等克隆载体）时，才给它视觉高亮 + if (!$(this).is($headerLi)) { + $(this).addClass('layui-this'); + } // left $(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this").addClass('layui-hide'); $(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this.layui-hide").removeClass('layui-this'); $("#" + menuId).removeClass('layui-hide'); $("#" + menuId).addClass('layui-this'); + miniMenu.syncHeaderActiveState(); layer.close(loading); }); + /** + * 窗口尺寸变化时重算头部折叠（防抖，仅绑定一次，避免重渲染重复绑定） + */ + if (!miniMenu._resizeListenerBound) { + miniMenu._resizeListenerBound = true; + $(window).on('resize', miniMenu.debounce(function () { + miniMenu.relayoutHeaderMenu(); + }, 150)); + } + /** * 菜单缩放 */ @@ -272,6 +372,7 @@ layer.close(window.openTips); } element.init(); + setTimeout(miniMenu.relayoutHeaderMenu, 260); //左侧布局带 .2s 过渡，同步测量会读到中间值，等过渡结束再重算 layer.close(loading); }); /** @@ -300,6 +401,7 @@ layer.close(window.openTips); } element.init(); + setTimeout(miniMenu.relayoutHeaderMenu, 260); //左侧布局带 .2s 过渡，同步测量会读到中间值，等过渡结束再重算 layer.close(loading); }); },