rain
4.7 KiB
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返回。