jiapu/docs/superpowers/plans/2026-07-10-tac-native-style-cleanup.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.

目标： 登录、注册、找回密码页面只调用 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

• 步骤 1：将页面结构测试改为禁止自定义验证码 CSS 与容器 class。

断言三页加载 public/tac/css/tac.css，不加载 public/css/captcha-modal.css，且 [data-captcha-box] 不含 auth-captcha-modal class。

• 步骤 2：将组件测试改为要求原生构造调用。

断言 captcha-pages.js 中不存在 bgUrl、logoUrl 与 .auth-captcha-modal 视觉控制。

• 步骤 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

• 步骤 1：删除三页对 captcha-modal.css 的引用，并将挂载点改为无 class 的 data-captcha-box。

• 步骤 2：删除 public.css 中 .auth-captcha-modal 及其 TAC 尺寸限制规则。

• 步骤 3：删除 captcha-modal.css。

• 步骤 4：将 new TAC(config, { ... }) 改为 new TAC(config)，并将挂载点查询、打开和关闭逻辑改为无视觉状态的 DOM 清理。

• 步骤 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

• 步骤 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

预期：测试与差异检查通过；扫描没有自定义验证码视觉标识。

• 步骤 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 的尺寸校验问题仍需以后端挑战响应原始尺寸为准单独处理。