From 47b9f355b07e9ca0b34a45a17af0df3266ac3f1a Mon Sep 17 00:00:00 2001 From: augushong Date: Mon, 5 Oct 2026 07:18:08 +0000 Subject: [PATCH] =?UTF-8?q?fix(table):=20=E5=8D=A1=E7=89=87=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E5=9B=BE=E6=A0=87=E5=BD=92=E4=BD=8D=E5=8F=B3=E4=BE=A7?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=BB=84=E6=9C=80=E5=B7=A6=E5=B9=B6=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E9=9D=A2=E6=9D=BF=E6=82=AC=E5=81=9C=E9=80=8F=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 入口改为 defaultToolbar 头部插入（unshift），图标渲染于筛选列左侧，撤掉左侧 layui-btn 方案 - 面板改挂 .layui-table-tool 并按图标坐标内联定位（右缘对齐图标、向下展开），不再嵌于图标元素内 - 根治悬停透明：原面板挂在 .layui-btn 内，layui .layui-btn:hover 的 opacity:.8 继承到整棵面板子树 --- public/static/admin/css/public.css | 15 +-- public/static/admin/css/public.scss | 15 +-- .../static/plugs/ulthon-admin/admin-table.js | 103 ++++++++++++------ 3 files changed, 77 insertions(+), 56 deletions(-) diff --git a/public/static/admin/css/public.css b/public/static/admin/css/public.css index cebd4a6..701bdf2 100644 --- a/public/static/admin/css/public.css +++ b/public/static/admin/css/public.css @@ -905,18 +905,13 @@ table样式 /* 卡片设置面板（admin-table.js toggleCardSettingPanel 产出；面板骨架复用上方 .ul-nav-block 基类，此处补面板本体定位与视觉（与 .table-tpl-container 视图 - 切换下拉同语言）、配置行与自绘开关）。入口按钮 .ua-card-setting-btn 由受控 - 接线追加至左侧工具栏容器 .layui-table-tool-temp 末尾，position:relative 供 - 面板相对按钮向下展开锚定；按钮不带 lay-event，点击直调开关函数 */ -.ua-card-setting-btn { - position: relative; - margin-left: 10px; -} - + 切换下拉同语言）、配置行与自绘开关）。入口为右侧 defaultToolbar 图标组 + 最左侧的 TABLE_CARD_SETTING 图标；面板由受控接线 append 至本表的 + .layui-table-tool（layui 已 position:relative），left/top 不在此声明， + 打开时经 getBoundingClientRect 差值内联定位（右缘对齐图标右缘、顶边贴 + 图标下沿），向下向左展开 */ .ua-card-setting-panel { position: absolute; - left: 0; - top: 100%; z-index: 999; min-width: 200px; border: 1px solid #d2d2d2; diff --git a/public/static/admin/css/public.scss b/public/static/admin/css/public.scss index caf00da..a41cec2 100644 --- a/public/static/admin/css/public.scss +++ b/public/static/admin/css/public.scss @@ -928,18 +928,13 @@ table样式 // 卡片设置面板（admin-table.js toggleCardSettingPanel 产出；面板骨架复用上方 // .ul-nav-block 基类，此处补面板本体定位与视觉（与 .table-tpl-container 视图 -// 切换下拉同语言）、配置行与自绘开关）。入口按钮 .ua-card-setting-btn 由受控 -// 接线追加至左侧工具栏容器 .layui-table-tool-temp 末尾，position:relative 供 -// 面板相对按钮向下展开锚定；按钮不带 lay-event，点击直调开关函数 -.ua-card-setting-btn { - position: relative; - margin-left: 10px; -} - +// 切换下拉同语言）、配置行与自绘开关）。入口为右侧 defaultToolbar 图标组 +// 最左侧的 TABLE_CARD_SETTING 图标；面板由受控接线 append 至本表的 +// .layui-table-tool（layui 已 position:relative），left/top 不在此声明， +// 打开时经 getBoundingClientRect 差值内联定位（右缘对齐图标右缘、顶边贴 +// 图标下沿），向下向左展开 .ua-card-setting-panel { position: absolute; - left: 0; - top: 100%; z-index: 999; min-width: 200px; border: 1px solid #d2d2d2; diff --git a/public/static/plugs/ulthon-admin/admin-table.js b/public/static/plugs/ulthon-admin/admin-table.js index 8512426..c137954 100644 --- a/public/static/plugs/ulthon-admin/admin-table.js +++ b/public/static/plugs/ulthon-admin/admin-table.js @@ -386,16 +386,22 @@ // 工具栏形态联动：print 仅表格形态有意义；卡片设置仅非表格形态有意义。 // filter（LAYTABLE_COLS）与视图切换（TABLE_LAYOUT）两形态常驻不动 $view.find('[lay-event="LAYTABLE_PRINT"]').toggleClass('layui-hide', !isTable); - $view.find('.ua-card-setting-btn').toggleClass('layui-hide', isTable); + $view.find('[lay-event="TABLE_CARD_SETTING"]').toggleClass('layui-hide', isTable); }; - // 卡片设置面板开关（pro#5 迭代：入口由右侧图标区移至左侧工具栏末尾的 - // .ua-card-setting-btn 按钮，点击直调本函数；不再走 layui toolbar 事件）。 - // 含面板创建/移除/开关/排序/外点收起全套逻辑，面板 append 在按钮元素内 - //（按钮 position:relative，面板向右向下展开），面板内交互均阻断冒泡 + // 卡片设置面板开关（pro#5 迭代：入口为右侧 defaultToolbar 图标组最左侧的 + // TABLE_CARD_SETTING 图标，走 layui toolbar 事件）。含面板创建/移除/开关/ + // 排序/外点收起全套逻辑。面板 append 在本表的 .layui-table-tool 容器 + //（layui 已 position:relative）而非图标元素内：layui.css 的 + // .layui-btn:hover{opacity:.8} 会沿祖先链压暗整棵面板子树，断开父子 + // 关系即根治。打开时用 getBoundingClientRect 内联定位（两 rect 同帧 + // 相减与滚动无关），面板右缘对齐图标右缘、顶边贴图标下沿，向下向左 + // 展开。面板内交互均阻断冒泡 var toggleCardSettingPanel = function (tableId) { var cardSettingId = 'ua-card-setting-' + tableId; - var $toolbarSettingElem = $(controlledLayouts[tableId].elem).siblings('.layui-table-view').first().find('.ua-card-setting-btn'); + var $view = $(controlledLayouts[tableId].elem).siblings('.layui-table-view').first(); + var $toolbarSettingElem = $view.find('[lay-event="TABLE_CARD_SETTING"]'); + var $toolElem = $view.find('.layui-table-tool').first(); var $cardSettingElem = $('#' + cardSettingId); if ($cardSettingElem.length > 0) { $cardSettingElem.remove(); @@ -430,7 +436,17 @@ }); cardSettingHtml += ''; - $cardSettingElem = $(cardSettingHtml).appendTo($toolbarSettingElem); + $cardSettingElem = $(cardSettingHtml).appendTo($toolElem); + + // 内联定位：面板右缘对齐图标右缘、顶边贴图标下沿（200px 宽面板 + // 自图标向左下展开，完全落在视口内）。iconRect/toolRect 同帧相减， + // 与页面滚动无关 + var iconRect = $toolbarSettingElem[0].getBoundingClientRect(); + var toolRect = $toolElem[0].getBoundingClientRect(); + $cardSettingElem.css({ + top: (iconRect.bottom - toolRect.top) + 'px', + right: (toolRect.right - iconRect.right) + 'px' + }); // 面板内条目点击不冒泡（排序段等后续 .item 条目沿用） $cardSettingElem.on('click', '.item', function (event) { @@ -477,9 +493,11 @@ $(document).off('click.ua-card-setting'); }); - // 点击面板外区域收起（命名空间事件，收起时解除）；判定以入口按钮为界 + // 点击面板外区域收起（命名空间事件，收起时解除）；面板已不在图标 + // 元素内，判定为「既不在图标内、也不在面板内」才收起，否则点面板 + // 自身会被误判为外部点立刻收起 $(document).off('click.ua-card-setting').on('click.ua-card-setting', function (event) { - if (!$(event.target).closest($toolbarSettingElem).length) { + if (!$(event.target).closest($toolbarSettingElem).length && !$(event.target).closest('#' + cardSettingId).length) { $('#' + cardSettingId).remove(); $(document).off('click.ua-card-setting'); } @@ -938,6 +956,25 @@ extend: 'data-table-id="' + options.id + '"' }); } + // 卡片设置入口（pro#5）：存在任何非 table 形态即注入（不依赖 + // 条目数>1，单形态 card 页也需要打开设置面板）。头部插入使图标 + // 渲染在工具图标组最左侧（layui.js 按数组序 map 拼 HTML 写入 + // .layui-table-tool-self）。不写 extend 属性（layui 不渲染该 + // 属性，面板定位走 lay-table-id 模式） + var hasNonTableLayout = false; + $.each(layoutEntries, function (i, entry) { + if (entry && entry.name !== 'table') { + hasNonTableLayout = true; + return false; + } + }); + if (hasNonTableLayout) { + defaultToolbar.unshift({ + title: '卡片设置', + layEvent: 'TABLE_CARD_SETTING', + icon: 'layui-icon-set' + }); + } } if (options.defaultToolbar === undefined) { @@ -962,6 +999,23 @@ extend: 'data-table-id="' + options.id + '"' }); } + // 卡片设置入口与 TABLE_LAYOUT 同规则去重补投：autoInjected + // 即默认注入 card，条件恒成立；已有同名 layEvent 不重复加。 + // 头部插入保持"图标组最左侧"与主注入一致 + var hasCardSettingBtn = false; + $.each(options.defaultToolbar, function (i, btn) { + if (btn && typeof btn === 'object' && btn.layEvent === 'TABLE_CARD_SETTING') { + hasCardSettingBtn = true; + return false; + } + }); + if (!hasCardSettingBtn) { + options.defaultToolbar.unshift({ + title: '卡片设置', + layEvent: 'TABLE_CARD_SETTING', + icon: 'layui-icon-set' + }); + } } @@ -1186,33 +1240,6 @@ e.stopPropagation(); }); - // 卡片设置入口按钮（pro#5 迭代：由右侧图标区 defaultToolbar 移至 - // 左侧工具栏末尾）。layui 2.10.1 左容器为 .layui-table-tool-temp - //（layui.js 工具栏模板 '
'，左容器经 - // o.layTool.find(".layui-table-tool-temp").html(t) 渲染现有操作 - // 按钮）。不带 lay-event（避免 layui toolbar 委托与直绑双触发）， - // 点击直调 toggleCardSettingPanel。初始 layui-hide，追加在本分支 - // 内、首次 syncLayoutVisibility 调用之前，由其按当前形态定初始 - // 显隐（表格形态直开页按钮不会闪现） - var $cardSettingView = $(options.elem).siblings('.layui-table-view').first(); - var hasNonTableLayout = false; - $.each(layoutEntries, function (i, entry) { - if (entry && entry.name !== 'table') { - hasNonTableLayout = true; - return false; - } - }); - if (hasNonTableLayout && $cardSettingView.find('.ua-card-setting-btn').length === 0) { - var $cardSettingBtn = $('卡片设置') - .appendTo($cardSettingView.find('.layui-table-tool-temp')); - $cardSettingBtn.on('click', function (event) { - toggleCardSettingPanel(options.id); - event.stopPropagation(); - }); - } - // 形态注册：layoutList 已在 defaultToolbar 段规范化（视图按钮 // 注入共用）。运行期切形态经 ua.table.setLayoutForm。 // options.cols 此时已过 formatCols/renderOperat/renderTrueHide， @@ -2372,6 +2399,10 @@ } }); break; + case 'TABLE_CARD_SETTING': + // 卡片设置面板（开关/定位/外点收起全套在 toggleCardSettingPanel） + toggleCardSettingPanel(tableId); + break; } }); },