核心问题是事件绑定过早或数据缺失导致弹窗内容为空，应确保table.render()完成后再绑定row事件、透传ID字段，并用layer.open()配合异步加载；实时日志需防重复请求、滚动自动到底部、适配移动端及XSS防护。
点击表格行触发弹窗，但弹窗内容为空或加载失败
核心问题通常是事件绑定时机不对，或者数据没传过去。Layui 的 table.on('row(...)') 事件必须在表格渲染完成之后绑定，否则监听无效；另外，data 参数里没有包含日志所需的唯一标识（比如 id 或 log_key），后续请求就找不到对应记录。
实操建议：
- 确保
table.render()执行完毕后再调用table.on('row(...)，推荐写在done回调里 - 检查表格列配置是否漏传关键字段，例如：
{field: 'id', title: 'ID', hide: true}—— 即使不显示，也要让data.id可用 - 弹窗内容用
layer.open()打开，不要用layer.msg()或内联content字符串，得留出异步加载空间 - 避免直接把日志内容拼进 HTML 字符串里传给
content，应先空弹窗，再用$.get()拉取实时日志并填入$('.log-container')
如何安全拉取“实时日志”并防重复请求
所谓“实时”，其实是指按行 ID 轮询后端接口获取最新几条日志，不是 WebSocket 长连。重点是别点一次就发 5 次请求，也别让上一个请求还没返回，下一个又覆盖了 DOM。
实操建议：
- 每次打开弹窗前，先清掉上一次的定时器：
clearInterval(window.logPollTimer) - 用
layer.open()的success回调发起首次请求，成功后再启动setInterval，间隔建议 ≥3s - 后端接口要支持按
id和时间戳分页，例如：/api/log?target_id=123&since=1717023456，前端存上次响应里的最大timestamp - 响应体必须带状态标识，比如
{code: 0, data: [...], last_time: 1717023456}，避免把错误响应当正常日志塞进去
弹窗里日志滚动到底部但新内容不自动跟进
这是典型 DOM 更新后未触发滚动定位的问题。Layui 弹窗容器有 class layui-layer-content，但你 append 日志项后，浏览器不会自动滚到底部。
实操建议：
- 每次追加日志节点后，执行：
elem.scrollTop = elem.scrollHeight，其中elem是日志容器 DOM 元素（如$('.log-container')[0]） - 别用
$().animate({scrollTop: ...})，动画会卡顿且干扰轮询节奏 - 如果日志行太多，记得限制单次加载条数（比如最多 50 条），并在容器上加
max-height: 400px; overflow-y: auto; - 注意 IE 不支持
scrollHeight在某些隐藏状态下取值，所以确保弹窗已完全 show 出来再操作 DOM
移动端点击错位、弹窗遮挡或无法关闭
Layui 默认弹窗在小屏下容易超出视口，尤其右侧固定弹窗（area: ['400px', '100%'] + offset: 'r'）在 iOS 上常被 Safari 导航栏截断，且右滑返回手势会冲突。
实操建议：
- 放弃
offset: 'r'，改用position: 'fixed'+ 手动计算 right 值，例如：right: (window.innerWidth > 768 ? 20 : 10) + 'px' - 加
shadeClose: true和右上角关闭按钮，同时监听click外部区域时调用layer.close() - 禁用 body 滚动：
$('body').css('overflow', 'hidden')，弹窗 close 时还原，否则 iOS 滚动穿透严重 - 别在弹窗里放
textarea或input，除非真需要编辑——聚焦会触发软键盘，挤走弹窗内容，且失去焦点后不自动恢复位置
最麻烦的其实是日志时间戳对齐和换行处理：后端返回的换行符 \n 得转成 <br>，但别用 .replace(/\n/g, '<br>') 直接插进 innerHTML，得用 textContent + createElement 或至少做 XSS 过滤。这事容易被跳过，等上线后发现日志里能执行 JS 就晚了。
