rain
86 lines
4.3 KiB
Markdown
86 lines
4.3 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.
|
|
|
|
**目标：** 登录、注册、找回密码页面只调用 `public/tac` 自带的验证码组件和样式，不再追加任何验证码视觉样式或视觉配置。
|
|
|
|
**架构：** 页面保留一个无 class 的 `[data-captcha-box]` 挂载点；`captcha-pages.js` 只负责验证码接口参数和成功、取消、异常后的 DOM 清理；TAC 的外观完全由 `public/tac/css/tac.css` 与 `tac.min.js` 决定。
|
|
|
|
**技术栈：** 原生 JavaScript、TAC 本地组件、Node `assert` 测试。
|
|
|
|
## 全局约束
|
|
|
|
- 计划创建时间：2026-07-10 10:19:46 +08:00。
|
|
- 不修改 `public/tac/css/tac.css` 或 `public/tac/js/tac.min.js`。
|
|
- 不为验证码新增、覆盖或注入 CSS；不向 `new TAC` 传入 `bgUrl`、`logoUrl` 等视觉配置。
|
|
- 仅修改登录、注册、找回密码三页及其验证码适配、测试和记录。
|
|
|
|
---
|
|
|
|
### 任务 1：用测试锁定原生 TAC 调用边界
|
|
|
|
**文件：**
|
|
- 修改：`tests/auth-page-structure.test.js`
|
|
- 修改：`tests/captcha-pages.test.js`
|
|
|
|
- [x] **步骤 1：将页面结构测试改为禁止自定义验证码 CSS 与容器 class。**
|
|
|
|
断言三页加载 `public/tac/css/tac.css`，不加载 `public/css/captcha-modal.css`，且 `[data-captcha-box]` 不含 `auth-captcha-modal` class。
|
|
|
|
- [x] **步骤 2：将组件测试改为要求原生构造调用。**
|
|
|
|
断言 `captcha-pages.js` 中不存在 `bgUrl`、`logoUrl` 与 `.auth-captcha-modal` 视觉控制。
|
|
|
|
- [x] **步骤 3：运行测试并确认当前实现失败。**
|
|
|
|
运行：`node tests\auth-page-structure.test.js; node tests\captcha-pages.test.js`
|
|
|
|
预期：因当前自定义验证码 CSS、容器 class 和 TAC 视觉配置而失败。
|
|
|
|
### 任务 2：删除自定义验证码视觉层
|
|
|
|
**文件：**
|
|
- 修改：`login.html`
|
|
- 修改：`register.html`
|
|
- 修改：`forgot-password.html`
|
|
- 修改：`public/css/public.css`
|
|
- 删除：`public/css/captcha-modal.css`
|
|
- 修改：`public/js/captcha-pages.js`
|
|
|
|
- [x] **步骤 1：删除三页对 `captcha-modal.css` 的引用，并将挂载点改为无 class 的 `data-captcha-box`。**
|
|
|
|
- [x] **步骤 2：删除 `public.css` 中 `.auth-captcha-modal` 及其 TAC 尺寸限制规则。**
|
|
|
|
- [x] **步骤 3：删除 `captcha-modal.css`。**
|
|
|
|
- [x] **步骤 4：将 `new TAC(config, { ... })` 改为 `new TAC(config)`，并将挂载点查询、打开和关闭逻辑改为无视觉状态的 DOM 清理。**
|
|
|
|
- [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-native-style-cleanup.md`
|
|
|
|
- [x] **步骤 1：运行全量 Node 测试、验证码样式静态扫描和差异检查。**
|
|
|
|
运行：`Get-ChildItem -Path tests -Filter *.test.js | Sort-Object Name | ForEach-Object { node $_.FullName }; rg -n "captcha-modal.css|auth-captcha-modal|bgUrl|logoUrl" login.html register.html forgot-password.html public\css public\js; git diff --check`
|
|
|
|
预期：测试与差异检查通过；扫描没有自定义验证码视觉标识。
|
|
|
|
- [x] **步骤 2：记录完成时间、修改范围、验证结果和外部验证码实测边界。**
|
|
|
|
## 完成记录
|
|
|
|
- 完成时间：2026-07-10 10:32:20 +08:00。
|
|
- 删除 `public/css/captcha-modal.css`，并从 `public/css/public.css` 删除 35 行 `.auth-captcha-box`、`.auth-captcha-modal` 和 TAC 尺寸限制规则。
|
|
- 三个认证页仅加载 `public/tac/css/tac.css`，无 class 的 `[data-captcha-box]` 只作为 TAC 挂载点。
|
|
- `captcha-pages.js` 现在只执行 `new TAC(config)`；不再传入 `bgUrl`、`logoUrl` 或切换任何视觉 class。成功、取消、初始化异常后仍清空 TAC 第三方 DOM。
|
|
- 验证：聚焦结构/验证码测试、全量 Node 测试、`node --check public/js/captcha-pages.js`、自定义样式标识扫描和 `git diff --check` 均通过。
|
|
- 外部边界：尚未用有效验证码轨迹完成真实服务端验证；`/captcha/verify` 的尺寸校验问题仍需以后端挑战响应原始尺寸为准单独处理。
|