rain
129 lines
4.1 KiB
Markdown
129 lines
4.1 KiB
Markdown
# 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 样式和脚本**
|
||
|
||
在三页 `<head>` 中加入 `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 标记为已完成，写入完成时间、修改文件、验证命令和剩余风险。
|