rain
85 lines
4.7 KiB
Markdown
85 lines
4.7 KiB
Markdown
# 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`
|
||
|
||
- [x] **步骤 1：写页面结构失败测试。**
|
||
|
||
断言 `login.html`、`register.html`、`forgot-password.html` 不再保留 `[data-captcha-box]` 静态挂载点，且 `public/layui/layui.js` 在 `captcha-pages.js` 前加载。
|
||
|
||
- [x] **步骤 2：写验证码适配失败测试。**
|
||
|
||
断言适配层调用 `root.layui.layer.open`、在结束时调用 `root.layui.layer.close`，仍只调用 `new root.TAC(config)`，不存在自定义验证码视觉标识。
|
||
|
||
- [x] **步骤 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`
|
||
|
||
- [x] **步骤 1：删除三页静态 `[data-captcha-box]`。**
|
||
|
||
- [x] **步骤 2：在 `captcha-pages.js` 创建无样式的 DOM 容器，并以 `layui.layer.open({ type: 1, content: mount })` 打开默认弹层。**
|
||
|
||
- [x] **步骤 3：将该 DOM 容器作为 `CaptchaConfig.bindEl`，并保持 `new TAC(config)` 原样调用。**
|
||
|
||
- [x] **步骤 4：在 TAC 成功、关闭、初始化异常和 Promise 异常时销毁 TAC 并关闭对应 Layui 层。**
|
||
|
||
- [x] **步骤 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`
|
||
|
||
- [x] **步骤 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`
|
||
|
||
预期：测试和差异检查通过；认证页中不再有静态验证码挂载点或自定义视觉标识。
|
||
|
||
- [x] **步骤 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` 返回。
|