# 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 兜底的测试。 - [x] **Step 1: 添加页面结构断言** 检查 `login.html`、`register.html`、`forgot-password.html` 必须加载 `public/layui/css/layui.css` 和 `public/layui/layui.js`，且 `layui.js` 在 `auth-pages.js` 前面。 - [x] **Step 2: 添加提示脚本断言** 检查 `public/js/auth-pages.js` 与 `public/js/captcha-pages.js` 不再包含 `root.alert`，并检查 `public/css/public.css` 提供 `.auth-layer-message`。 - [x] **Step 3: 验证红灯** 运行： ```powershell 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。 - [x] **Step 1: 三页加载 layui 样式和脚本** 在三页 `` 中加入 `public/layui/css/layui.css`，在 `auth-pages.js` 前加入 `public/layui/layui.js`。 - [x] **Step 2: 修改认证脚本提示** 把 `auth-pages.js` 的 `showMessage` 改为优先调用 `layui.layer.msg(message, { skin: 'auth-layer-message' })`，没有 layui 时使用 `console.warn`。 - [x] **Step 3: 修改验证码脚本提示** 把 `captcha-pages.js` 的 `showMessage` 同步改为同样的 layer 提示策略。 ### Task 3: 补齐公共样式 **Files:** - Modify: `public/css/public.css` **Interfaces:** - Consumes: layui layer 生成的 `.auth-layer-message`。 - Produces: 认证页统一提示皮肤和移动端更稳的 TAC 弹窗尺寸。 - [x] **Step 1: 添加 layui 消息皮肤** 在公共 CSS 中添加 `.auth-layer-message`，控制圆角、背景、文字和阴影。 - [x] **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 完成记录。 - [x] **Step 1: 跑焦点测试** 运行： ```powershell node tests\auth-page-structure.test.js node tests\auth-message.test.js ``` 预期：全部通过。 - [x] **Step 2: 跑相关测试和语法检查** 运行： ```powershell 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 ``` 预期：全部通过。 - [x] **Step 3: 更新追踪记录** 把 PC-012 标记为已完成，写入完成时间、修改文件、验证命令和剩余风险。