家谱现有接口调试50%

2026-07-09 17:29:25 +08:00
commit 6050508144
262 changed files with 63354 additions and 0 deletions
@@ -0,0 +1,128 @@
+# 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 标记为已完成，写入完成时间、修改文件、验证命令和剩余风险。