From 3770e76583b763024d94422427bf01908c5ec022 Mon Sep 17 00:00:00 2001 From: augushong Date: Mon, 5 Oct 2026 10:04:51 +0000 Subject: [PATCH] =?UTF-8?q?fix(table):=20=E5=8D=A1=E7=89=87=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E9=9D=A2=E6=9D=BF=E4=B8=8E=E6=93=8D=E4=BD=9C=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E4=BA=A4=E4=BA=92=E6=89=93=E7=A3=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 外点收起改捕获阶段监听，点击筛选列等其他工具按钮时面板正确消失 - 排序点击后面板保持打开并就地刷新高亮，可连续切换排序 - 设置面板行距压缩（行高约 28px、最小宽 160px） - 卡片操作按钮间距紧凑（清零 layui 相邻 margin，统一 6px gap） --- public/static/admin/css/public.css | 20 ++++++-- public/static/admin/css/public.scss | 22 ++++++-- .../static/plugs/ulthon-admin/admin-table.js | 51 ++++++++++++++----- 3 files changed, 71 insertions(+), 22 deletions(-) diff --git a/public/static/admin/css/public.css b/public/static/admin/css/public.css index 701bdf2..78ecc35 100644 --- a/public/static/admin/css/public.css +++ b/public/static/admin/css/public.css @@ -852,12 +852,16 @@ table样式 .ua-data-card-operat { display: flex; flex-wrap: wrap; - gap: 4px; + gap: 6px; justify-content: flex-end; } .ua-data-card-operat a { margin: 0; } +/* 压过 layui 基类 .layui-btn+.layui-btn{margin-left:10px}（特异性 0,3,0 > 0,2,0） */ +.ua-data-card-operat .layui-btn + .layui-btn { + margin-left: 0; +} /* 卡片操作按钮三态显隐：卡片网格内默认隐藏（保占位防 footer 跳动）、 hover 显示；设置面板开关写入容器的 ua-card-operat-always 类后常显 @@ -891,7 +895,7 @@ table样式 flex-basis: 100%; display: flex; justify-content: flex-end; - gap: 4px; + gap: 6px; flex-wrap: wrap; } @@ -913,7 +917,7 @@ table样式 .ua-card-setting-panel { position: absolute; z-index: 999; - min-width: 200px; + min-width: 160px; border: 1px solid #d2d2d2; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); @@ -923,7 +927,7 @@ table样式 } .ua-card-setting-title { - padding: 10px 18px 2px; + padding: 6px 12px 0; color: #999; font-size: 12px; } @@ -933,11 +937,17 @@ table样式 align-items: center; justify-content: space-between; gap: 12px; - padding: 8px 18px; + padding: 4px 12px; } .ua-card-setting-item:hover { background-color: #f8f8f8; } +/* 排序行紧凑：压过 .ul-nav-block .item 基类的 padding: 8px 18px + （同特异性 0,2,0，源序靠后胜出，不用 !important） */ +.ua-card-setting-panel .ua-card-setting-sort-item { + padding: 4px 12px; + line-height: 20px; +} .ua-card-setting-switch { position: relative; diff --git a/public/static/admin/css/public.scss b/public/static/admin/css/public.scss index a41cec2..3840a80 100644 --- a/public/static/admin/css/public.scss +++ b/public/static/admin/css/public.scss @@ -873,12 +873,17 @@ table样式 .ua-data-card-operat { display: flex; flex-wrap: wrap; - gap: 4px; + gap: 6px; justify-content: flex-end; a { margin: 0; } + + // 压过 layui 基类 .layui-btn+.layui-btn{margin-left:10px}（特异性 0,3,0 > 0,2,0） + .layui-btn + .layui-btn { + margin-left: 0; + } } // 卡片操作按钮三态显隐：卡片网格内默认隐藏（保占位防 footer 跳动）、 @@ -913,7 +918,7 @@ table样式 flex-basis: 100%; display: flex; justify-content: flex-end; - gap: 4px; + gap: 6px; flex-wrap: wrap; } @@ -936,7 +941,7 @@ table样式 .ua-card-setting-panel { position: absolute; z-index: 999; - min-width: 200px; + min-width: 160px; border: 1px solid #d2d2d2; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); @@ -946,7 +951,7 @@ table样式 } .ua-card-setting-title { - padding: 10px 18px 2px; + padding: 6px 12px 0; color: #999; font-size: 12px; } @@ -956,13 +961,20 @@ table样式 align-items: center; justify-content: space-between; gap: 12px; - padding: 8px 18px; + padding: 4px 12px; &:hover { background-color: #f8f8f8; } } +// 排序行紧凑：压过 .ul-nav-block .item 基类的 padding: 8px 18px +//（同特异性 0,2,0，源序靠后胜出，不用 !important） +.ua-card-setting-panel .ua-card-setting-sort-item { + padding: 4px 12px; + line-height: 20px; +} + .ua-card-setting-switch { position: relative; flex: none; diff --git a/public/static/plugs/ulthon-admin/admin-table.js b/public/static/plugs/ulthon-admin/admin-table.js index c137954..1488dc8 100644 --- a/public/static/plugs/ulthon-admin/admin-table.js +++ b/public/static/plugs/ulthon-admin/admin-table.js @@ -9,6 +9,8 @@ var lastTableWhere = {}; var colToggledTimers = {}; + // 卡片设置面板外点收起的原生捕获监听（单例，打开面板前先摘旧监听防重复绑定） + var cardSettingOutsideClose = null; var selectMode, selectConfirmCallback; // reloadData 引擎接线（加载期执行一次）：受控表（UA_TABLE_STORE 已注册）的数据 @@ -389,6 +391,16 @@ $view.find('[lay-event="TABLE_CARD_SETTING"]').toggleClass('layui-hide', isTable); }; + // 卡片设置面板统一收起（外点收起/图标再点收起等路径共用）：移除面板并摘除 + // 外点捕获监听，保证不留孤儿监听 + var closeCardSettingPanel = function (tableId) { + $('#ua-card-setting-' + tableId).remove(); + if (cardSettingOutsideClose) { + document.removeEventListener('click', cardSettingOutsideClose, true); + cardSettingOutsideClose = null; + } + }; + // 卡片设置面板开关（pro#5 迭代：入口为右侧 defaultToolbar 图标组最左侧的 // TABLE_CARD_SETTING 图标，走 layui toolbar 事件）。含面板创建/移除/开关/ // 排序/外点收起全套逻辑。面板 append 在本表的 .layui-table-tool 容器 @@ -404,7 +416,7 @@ var $toolElem = $view.find('.layui-table-tool').first(); var $cardSettingElem = $('#' + cardSettingId); if ($cardSettingElem.length > 0) { - $cardSettingElem.remove(); + closeCardSettingPanel(tableId); return; } @@ -468,7 +480,7 @@ // 请求参数，漏传排序到不了服务端）；initSort 供表头 // 箭头（取消时省略）；当前态以 store getState 为准 // （搜索路径会整体覆盖 lastTableWhere，admin-table.js - // 侧变量不可作判定依据）。点击后收起面板 + // 侧变量不可作判定依据）。点击后面板保持打开就地刷新高亮，可连续点击 $cardSettingElem.on('click', '.ua-card-setting-sort-item', function (event) { event.stopPropagation(); var field = $(this).data('field'); @@ -489,19 +501,34 @@ } lastTableWhere[tableId] = lastWhere; ua.table.reloadData(tableId, reloadOpts); - $cardSettingElem.remove(); - $(document).off('click.ua-card-setting'); + // 就地刷新面板高亮（覆盖取消排序态）：reloadData 调用链内 store + // setWhere 同步完成，返回后重读 where.sort 即新值 + sortState = window.UA_TABLE_STORE.dataProvider.getState(tableId); + cardSortCurrent = sortState && sortState.where ? sortState.where.sort : null; + $cardSettingElem.find('.ua-card-setting-sort-item').each(function () { + var sortType = cardSortCurrent ? (cardSortCurrent[$(this).data('field')] || null) : null; + $(this).toggleClass('current', !!sortType) + .find('i').attr('class', sortType + ? 'layui-icon layui-icon-' + (sortType === 'desc' ? 'down' : 'up') + : 'layui-icon layui-hide'); + }); }); - // 点击面板外区域收起（命名空间事件，收起时解除）；面板已不在图标 - // 元素内，判定为「既不在图标内、也不在面板内」才收起，否则点面板 - // 自身会被误判为外部点立刻收起 - $(document).off('click.ua-card-setting').on('click.ua-card-setting', function (event) { - if (!$(event.target).closest($toolbarSettingElem).length && !$(event.target).closest('#' + cardSettingId).length) { - $('#' + cardSettingId).remove(); - $(document).off('click.ua-card-setting'); + // 点击面板外区域收起（原生捕获阶段监听，先于一切 stopPropagation—— + // layui 内置 LAYTABLE_COLS/PRINT/EXPORT 等图标的点击处理带 + // stopPropagation 挡冒泡，冒泡阶段监听点不到，捕获阶段不受影响）； + // 面板已不在图标元素内，判定为「既不在图标内、也不在面板内」才收起， + // 否则点面板自身会被误判为外部点立刻收起。绑定前先摘旧监听防重复绑定 + if (cardSettingOutsideClose) { + document.removeEventListener('click', cardSettingOutsideClose, true); + } + cardSettingOutsideClose = function (event) { + var $t = $(event.target); + if (!$t.closest($toolbarSettingElem).length && !$t.closest('#' + cardSettingId).length) { + closeCardSettingPanel(tableId); } - }); + }; + document.addEventListener('click', cardSettingOutsideClose, true); }; if (window.UA_TABLE_STORE) {