jiapu/docs/superpowers/plans/2026-07-10-tac-layui-content-contract-fix.md

TAC Layui content 契约修复实施计划

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

目标： 修复认证页点击后只出现 d.parents is not a function 提示、TAC 弹层不显示的问题。

架构： CaptchaPages.createCaptchaLayer 继续只负责创建 Layui 默认弹层容器，不写验证码样式、不改 TAC 文件。Layui layer.open 的 content 使用 Layui/jQuery 包装对象满足弹层内部 .parents() 契约，TAC bindEl 继续使用对应的真实 DOM 节点。

技术栈： Layui 2.11.5、TAC 原生 CSS/JS、原生 JavaScript、Node assert 测试。

全局约束

• 计划创建时间：2026-07-10 10:50:06 +08:00。
• 不修改 public/tac/css/tac.css、public/tac/js/tac.min.js 或 Layui 第三方文件。
• 不新增验证码自定义 CSS，不注入样式，不传 TAC 视觉配置。
• 只修正 Layui 弹层 content 契约、对应测试和记录文档。

---

任务 1：复现 Layui content 契约错误

文件：

• 修改：tests/captcha-pages.test.js

• 步骤 1：写失败测试

断言 createCaptchaLayer 传给 layui.layer.open 的 content 必须是包装对象，包装对象需要保留真实 DOM 节点，并具备 .parents() 方法。

• 步骤 2：运行失败测试

运行：node tests\captcha-pages.test.js

预期：失败，当前实现把原生 DOM 直接传给 content。

任务 2：修正 createCaptchaLayer

文件：

• 修改：public/js/captcha-pages.js

• 步骤 1：最小实现

在 createCaptchaLayer 内用 root.layui.$ || root.$ || root.jQuery 包装真实 DOM 节点；layer.open({ content }) 使用包装对象；返回值中的 box 仍为真实 DOM，供 TAC bindEl 使用。

• 步骤 2：运行聚焦测试

运行：node tests\captcha-pages.test.js; node --check public\js\captcha-pages.js

预期：全部通过。

任务 3：记录和回归

文件：

• 修改：docs/pc-api-page-integration-tracker-2026-07-09.md

• 修改：docs/superpowers/plans/2026-07-10-tac-layui-content-contract-fix.md

• 步骤 1：补充 PC-018 完成记录

记录根因、修改文件、验证命令和结果。

• 步骤 2：运行最终验证

运行：node tests\auth-page-structure.test.js; node tests\captcha-pages.test.js; node --check public\js\captcha-pages.js; git diff --check

预期：全部通过；git diff --check 仅允许 Git 行尾提示，不允许空白错误。

完成记录

• 完成时间：2026-07-10 10:54:03 +08:00。
• 根因：Layui 2.11.5 的 layer.open 在处理 DOM 内容时会调用 .parents()；原实现将原生 DOM 节点直接传给 content，导致浏览器报 d.parents is not a function，弹层创建中断。
• 修复：createCaptchaLayer 使用 layui.$、$ 或 jQuery 包装临时 DOM 后传给 layer.open({ content })，同时继续把真实 DOM 节点传给 CaptchaConfig.bindEl。
• 验证：失败测试已先复现；修复后 node tests\captcha-pages.test.js 和 node --check public\js\captcha-pages.js 通过。最终回归记录见 docs/pc-api-page-integration-tracker-2026-07-09.md 的 PC-018。