答案是：用sessionStorage标记状态，结合setTimeout/setTimeout重置定时器检测空闲，监听四类事件，触发maskSensitive函数批量定位敏感td并正则替换文本、添加data-masked属性；还原时从table.cache按rowIndex取原始值，仅更新DOM不重载表格。
如何用 sessionStorage + 定时器触发自动打码
页面无操作 10 分钟后对敏感字段（如手机号、身份证号）做前端掩码，核心是「检测空闲」+「安全修改 DOM」+「避免污染原始数据」。不能直接改 table.cache，否则 reload 后还是明文；也不能只改渲染后的 td 文本，否则导出、复制仍暴露原始值。
推荐做法：用 sessionStorage 标记状态，配合 setTimeout 和 clearTimeout 实现空闲检测，触发时仅修改当前页可见单元格的文本内容，并加 data-masked="true" 属性便于后续识别和还原。
- 监听
mousemove、keydown、scroll、click四类事件，任一触发就重置定时器 - 初始设置
let idleTimer = setTimeout(maskSensitive, 10 * 60 * 1000) -
maskSensitive()函数里用layui.jquery('td[data-field="phone"], td[data-field="idCard"]')批量定位，逐个替换文本（如text().replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')） - 替换前先检查是否已打码：
if (!$(td).attr('data-masked')) { ... }，避免重复处理 - 别忘了给被修改的
td加data-masked="true"，方便用户手动刷新或点击“还原”时识别
打码后怎么安全还原（比如用户点击“查看原文”）
自动打码只是视觉层遮蔽，原始数据始终保留在 table.cache 和后端响应中。还原的关键是「按需恢复、不重绘整表」——尤其当表格启用了分页或搜索时，reload 会丢失当前筛选态。
- 还原函数应从
table.cache['yourTableId'][rowIndex]中读取原始值，而非依赖 DOM 上可能被多次覆盖的文本 - 对单个单元格还原：用
layui.jquery('td[data-field="phone"]').eq(rowIndex).text(originalValue).removeAttr('data-masked') - 如果需要批量还原（如“全部显示”按钮），遍历所有带
data-masked="true"的td，再查对应rowIndex去 cache 里取值 - 不要调用
table.reloadData()或table.reload()，它们会清空编辑态、重置分页、丢掉临时勾选 - 若还原后要支持导出明文，记得同步更新导出前构造的副本数据（参考导出掩码方案中
exportData的生成逻辑）
为什么不能在 table.render 的 done 回调里直接写打码逻辑
很多人把 maskSensitive() 直接塞进 done: function(res) { ... }，结果发现第一次加载就打码了，或者分页切换后失效。这是因为 done 只在初始化或 reload 成功后执行一次，无法响应后续用户行为或空闲状态变化。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
done是一次性回调，不是持续监听器；它不感知用户是否还在操作 - 分页、搜索、重载后，
done不会再次触发，打码状态就断连了 - 正确入口点是全局事件监听 + 独立定时器，且要在
layui.use(['table', 'jquery'], function(){...})内部初始化，确保 DOM 和 layui 模块都就绪 - 若表格使用了
url模式，注意table.cache在首次加载后才可用，打码函数必须等cache存在后再执行首次扫描
移动端要注意的两个坑
手机浏览器上空闲检测更复杂：键盘弹起/收起、页面缩放、横竖屏切换都可能不触发 mousemove，但用户显然没“离开”。只靠桌面端那几类事件会误判。
- 必须额外监听
focusin和blur事件（尤其 input、textarea），因为软键盘操作会触发它们 - iOS Safari 下
scroll事件有延迟或节流，建议加touchstart和touchmove补充判断 - 别用
visibilitychange判断页面是否“在用”——用户切到微信再切回来，页面仍是 visible，但实际已空闲超时 - 打码后的文本若含空格或特殊字符，iOS 微信内置浏览器可能渲染错位，建议统一用
white-space: nowrap
真正难的不是写打码函数，而是让“空闲”定义准确、让“还原”不破坏当前交互态、让移动端行为和桌面端保持一致。这些细节漏一个，用户就会在关键时刻看到明文，或者点了还原却没反应。
