rain
4.1 KiB
Auth Layer Message Implementation Plan
For agentic workers: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: 让登录、注册、忘记密码三页的提示统一使用 layui layer.msg，不再出现浏览器原生 alert，并补好认证页提示和 TAC 弹窗样式。
Architecture: 页面加载 public/layui/css/layui.css 和 public/layui/layui.js；auth-pages.js 与 captcha-pages.js 只负责调用提示，不写样式；提示皮肤与 TAC 弹窗样式写入 public/css/public.css。
Tech Stack: 原生 HTML/CSS/JavaScript、layui layer、public/tac、Node 断言测试。
Global Constraints
- 计划开始时间：2026-07-09 17:14:08 +08:00。
- 只处理登录、注册、忘记密码三页的提示与弹窗样式问题。
- 不修改
public/tac/js/tac.min.js。 - 不使用 HTML 原生
alert作为用户提示。 - 样式写在 CSS 文件里，JS 只切 class 或调用组件。
- 新增或修改的 HTML、CSS、JS 注释使用中文，代码保持可读。
Task 1: 补充失败测试
Files:
- Modify:
tests/auth-page-structure.test.js - Create:
tests/auth-message.test.js
Interfaces:
-
Consumes: 当前三页 HTML 与认证脚本。
-
Produces: 能捕获缺少 layui 和原生 alert 兜底的测试。
-
Step 1: 添加页面结构断言
检查 login.html、register.html、forgot-password.html 必须加载 public/layui/css/layui.css 和 public/layui/layui.js，且 layui.js 在 auth-pages.js 前面。
- Step 2: 添加提示脚本断言
检查 public/js/auth-pages.js 与 public/js/captcha-pages.js 不再包含 root.alert，并检查 public/css/public.css 提供 .auth-layer-message。
- Step 3: 验证红灯
运行：
node tests\auth-page-structure.test.js
node tests\auth-message.test.js
预期：两个测试均失败，分别提示缺少 layui 和仍存在 root.alert。
Task 2: 接入 layui 并替换原生提示
Files:
- Modify:
login.html - Modify:
register.html - Modify:
forgot-password.html - Modify:
public/js/auth-pages.js - Modify:
public/js/captcha-pages.js
Interfaces:
-
Consumes:
layui.layer.msg(message, options)。 -
Produces:
showMessage(message)统一使用 layer，缺少 layui 时只输出控制台警告，不再弹原生 alert。 -
Step 1: 三页加载 layui 样式和脚本
在三页 <head> 中加入 public/layui/css/layui.css，在 auth-pages.js 前加入 public/layui/layui.js。
- Step 2: 修改认证脚本提示
把 auth-pages.js 的 showMessage 改为优先调用 layui.layer.msg(message, { skin: 'auth-layer-message' })，没有 layui 时使用 console.warn。
- Step 3: 修改验证码脚本提示
把 captcha-pages.js 的 showMessage 同步改为同样的 layer 提示策略。
Task 3: 补齐公共样式
Files:
- Modify:
public/css/public.css
Interfaces:
-
Consumes: layui layer 生成的
.auth-layer-message。 -
Produces: 认证页统一提示皮肤和移动端更稳的 TAC 弹窗尺寸。
-
Step 1: 添加 layui 消息皮肤
在公共 CSS 中添加 .auth-layer-message，控制圆角、背景、文字和阴影。
- Step 2: 微调 TAC 弹窗移动端尺寸
继续使用 .auth-captcha-modal 页面级挂载，限制 TAC 宽度不超过视口，避免盖层内容顶到边缘。
Task 4: 验证并记录完成
Files:
- Modify:
docs/pc-api-page-integration-tracker-2026-07-09.md
Interfaces:
-
Consumes: Task 1-3 的实现结果。
-
Produces: PC-012 完成记录。
-
Step 1: 跑焦点测试
运行：
node tests\auth-page-structure.test.js
node tests\auth-message.test.js
预期：全部通过。
- Step 2: 跑相关测试和语法检查
运行：
node tests\auth-pages.test.js
node tests\captcha-pages.test.js
node --check public\js\auth-pages.js
node --check public\js\captcha-pages.js
预期：全部通过。
- Step 3: 更新追踪记录
把 PC-012 标记为已完成，写入完成时间、修改文件、验证命令和剩余风险。