jiapu/docs/superpowers/plans/2026-07-10-tac-layer-call-correction.md

TAC 默认层调用纠正实施计划

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

目标： 在不写任何验证码 CSS、也不修改 TAC 第三方文件的前提下，将 TAC 挂载到 Layui 默认弹层中，不再渲染到认证页底部。

架构： auth-pages.js 仍在表单提交时调用 CaptchaPages.ensureToken；captcha-pages.js 通过已加载的 layui.layer.open 创建默认容器，将该容器传给 CaptchaConfig.bindEl，然后原样调用 new TAC(config)。TAC 继续根据后端下发的 captchaType 自己选择滑块、旋转、拼图、文字点击或禁用态。

技术栈： Layui 内置 layer、public/tac/css/tac.css、public/tac/js/tac.min.js、原生 JavaScript、Node assert 测试。

全局约束

• 计划创建时间：2026-07-10 10:38:10 +08:00。
• 不修改 public/tac/css/tac.css、public/tac/js/tac.min.js 或 Layui 第三方文件。
• 不创建或注入任何验证码 CSS；不传 bgUrl、logoUrl、尺寸、皮肤等 TAC 视觉配置。
• 只使用 Layui 默认 layer.open 作为弹层容器，TAC 的内部外观完全由其自带文件负责。
• 只修改认证三页、验证码适配、对应测试和记录。

---

任务 1：锁定正确的弹层挂载契约

文件：

• 修改：tests/auth-page-structure.test.js

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

• 步骤 1：写页面结构失败测试。

断言 login.html、register.html、forgot-password.html 不再保留 [data-captcha-box] 静态挂载点，且 public/layui/layui.js 在 captcha-pages.js 前加载。

• 步骤 2：写验证码适配失败测试。

断言适配层调用 root.layui.layer.open、在结束时调用 root.layui.layer.close，仍只调用 new root.TAC(config)，不存在自定义验证码视觉标识。

• 步骤 3：运行测试并确认当前底部挂载实现失败。

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

预期：因静态 [data-captcha-box] 与缺少 layer.open 而失败。

任务 2：使用 Layui 默认层承载 TAC

文件：

• 修改：login.html

• 修改：register.html

• 修改：forgot-password.html

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

• 步骤 1：删除三页静态 [data-captcha-box]。

• 步骤 2：在 captcha-pages.js 创建无样式的 DOM 容器，并以 layui.layer.open({ type: 1, content: mount }) 打开默认弹层。

• 步骤 3：将该 DOM 容器作为 CaptchaConfig.bindEl，并保持 new TAC(config) 原样调用。

• 步骤 4：在 TAC 成功、关闭、初始化异常和 Promise 异常时销毁 TAC 并关闭对应 Layui 层。

• 步骤 5：运行聚焦测试和语法检查。

运行：node tests\auth-page-structure.test.js; 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-layer-call-correction.md

• 步骤 1：运行全量 Node 测试、静态扫描和差异检查。

运行：Get-ChildItem -Path tests -Filter *.test.js | Sort-Object Name | ForEach-Object { node $_.FullName }; rg -n "data-captcha-box|auth-captcha-modal|captcha-modal.css|bgUrl|logoUrl" login.html register.html forgot-password.html public\css public\js; git diff --check

预期：测试和差异检查通过；认证页中不再有静态验证码挂载点或自定义视觉标识。

• 步骤 2：记录完成时间、TAC 功能边界和浏览器实测边界。

完成记录

• 完成时间：2026-07-10 10:44:11 +08:00。
• 根因：TAC 的 init() 只向 CaptchaConfig.bindEl 追加组件；原先静态挂载点位于 body 末尾，移除定位样式后自然渲染在页面底部。
• 修改：删除三页静态 [data-captcha-box]；验证码适配层使用 Layui 默认 layer.open 创建临时容器并传给 bindEl；成功、TAC 关闭、初始化异常与 Promise 异常都会清空容器并关闭同一层。
• TAC 边界：保留原生 new TAC(config)、原生样式、原生刷新和后端类型分发；不传视觉配置，不写验证码 CSS，不改动任何 public/tac 文件。
• 验证：失败测试已复现底部挂载；聚焦测试、全量 Node 测试、node --check public/js/captcha-pages.js 和 git diff --check 均通过。
• 浏览器边界：未在真实测试网关完成一次有效轨迹验证；仍需在浏览器点击注册后确认 Layui 默认层居中显示及后端 validToken 返回。