设计完成30%

docs/design/2026-07-13-A01-G01-A02-视觉审视.md

@@ -0,0 +1,56 @@
+# A01、G01 与 A02 视觉审视
+
+> 日期：2026-07-13  
+> 方法：通过用户授权的 Chrome 调试端口捕获真实 360 × 800 页面画面，并逐张检查。  
+> 范围：只审视 A01、G01 两张已验收基准页与 A02 当前登录页；本记录不是用户最终验收。
+
+## 1. 截图证据
+
+| 页面 | 状态 | 截图 |
+| --- | --- | --- |
+| A01 启动／登录引导 | 用户已验收的认证基准 | `screens/runtime/2026-07-13/A01-360x800.png` |
+| G01 我的家谱 | 用户已验收的家谱基准 | `screens/runtime/2026-07-13/G01-360x800.png` |
+| A02 账号登录 | 当前实现，未验收 | `screens/runtime/2026-07-13/A02-before-360x800.png` |
+
+## 2. A01、G01 共同的可继承规则
+
+1. **完整资产承担外观。** 朱砂页头、纸纹、主／次按钮、题签框、谱印框、云纹和分区线都有明确的图片资产；文字与交互位于图片之上。
+2. **一屏只有一个视觉主角。** A01 是“家谱”标题与两枚操作按钮；G01 是当前家谱题签。其余山水、竹影和金线只托住主角。
+3. **信息层级有节奏。** 大号楷体标题、常规正文、弱化元信息分明；每一段间保留足够纸面，不把内容挤成普通管理表单。
+4. **朱砂只表达关键动作或当前状态。** A01 的登录、G01 的当前谱印与选中 Tab 使用朱砂；古金负责边框、图标和分隔。
+5. **同一类元素使用同一套成品。** A01 两枚按钮保持一致比例；G01 的当前题签、列表题签、谱印、快捷图标和底部导航形成连续的组件语言。
+6. **背景不抢任务。** 纸纹先提供可读底色，淡墨山水只落在空白和底部，不能穿过输入区或元信息。
+
+## 3. A02 当前状态
+
+### 可保留项
+
+- 已有 A01 同源的纸纹、祠堂页头、谱印、淡墨背景和朱砂按钮皮肤。
+- 账号密码／手机验证码双 Tab、真实 input、忘记密码入口、协议判断与 A05 跳转仍应保留。
+- 360 × 800 下页面没有横向裁切，主按钮可见。
+
+### 必须解决的可见问题
+
+1. **登录面板是普通的细金线矩形。** 它没有完整纸面、双线、角纹或题签结构，和 A01 的完整按钮、G01 的完整谱签不属于同一视觉系统。
+2. **卡片内容过小且过密。** 标题、双 Tab、标签、占位文本、忘记密码与协议提示都落在一张矮卡内，用户进入后感受到的是“填写控件”，不是“进入家谱”。
+3. **按钮比例被压扁。** 当前主按钮使用约 4.49:1 的 A01 皮肤，却放入更扁的容器，边角和纹样失去端正的卷轴比例。
+4. **标题装饰没有成为层级。** 单侧云纹和细小返回符号像零散点缀，无法支撑“登录家谱”作为当前任务标题。
+5. **底部留白失衡。** 表单卡结束后到山水背景之间有大块无任务留白，而面板内部反而拥挤；需要把留白放在卡片外、把可读空间还给表单。
+
+## 4. A02 设计决策
+
+- 继续使用“家祠卷轴 · 庄重留白”，不另起现代渐变、玻璃卡片或圆角后台表单画风。
+- 认证头部与 A01 使用同一祠堂高度和谱印位置；头部以下先给清楚的“登录家谱”题签标题，再给完整不透明的认证面板资产。
+- 认证面板只承载 Tab、输入、忘记密码与协议说明；面板自身纸纹、金边和角纹由一张完整不透明 PNG 提供。
+- 主按钮只能按完整皮肤原比例显示；空间不足时缩小宽度或增加高度，不能纵向压缩图片。
+- 淡墨山水放到卡片结束后的留白与底部，作为收束，不穿过输入行。
+
+## 5. 可见性与无障碍风险
+
+- A02 的弱提示和协议文字在 360 × 800 下偏小，后续实现要保证正文至少 24rpx，主要点击区至少约 44dp。
+- 截图不能证明键盘焦点、读屏标签、错误提示朗读和真实 Android 字体回退；实施后仍需在 HBuilderX/Android 复核。
+- 本次只验证了正常态，没有验证输入错误、验证码倒计时或网络失败态；这些状态保持现有功能边界，不在本轮扩展接口。
+
+## 6. 下一步
+
+先为 A02 建立完整认证面板和正确比例按钮的资产合同，再做 A02 四尺寸前后对比；用户确认 A02 后，才将它作为 A03–A05 的认证样板。

docs/design/A01_启动登录引导_设计记录.md

@@ -62,7 +62,7 @@
 | `docs/design/screens/A01-启动登录引导-效果稿-v3-文字注册入口.png` | A-01 视觉比对依据 | 已归档并由用户确认的 v3 效果稿 | `852 × 1846px` PNG；仅作真实 DOM 页面还原和运行时验收对照，不直接作为页面内容 |
 | `static/assets/backgrounds/auth-ancestral-header-v1.png`、`auth-rice-paper-v1.jpg`、`auth-ink-scenery-v1.png` | A-01 分层页面背景 | 2026-07-13 内置图像生成 | 当前 A-01 使用；不得复用 G-01 背景 |
 | `static/assets/icons/auth/login-outline-v1.png`、`static/assets/icons/auth/wechat-licensed-v1.png` | A-01 两个按钮图标 | 登录图标复用项目既有资产；微信图标来源与许可见旧记录 | 当前 A-01 使用；微信图标免费使用须在应用“关于/设置”及应用商店描述中保留 Icons8 署名链接 |
-| `static/assets/icons/auth/auth-button-corner-v1.png` | 两个入口按钮的四角卷草装饰 | 2026-07-13 根据 412 × 915 视觉基准生成，去绿幕后保存 | `160 × 160px` 透明 PNG；同一张素材镜像至四角 |
+| `static/assets/foundation/opaque/a01-primary-button.png`、`a01-secondary-button.png` | A01 登录与微信登录的完整按钮皮肤 | 2026-07-13 以运行时视觉基准的比例与画风生成；不裁切设计图 | `1877 × 418px`、`1881 × 419px` 不透明 PNG；分别承担底色、双线边框和四角纹样，DOM 仅叠放图标与文案 |
 | `static/assets/icons/auth/auth-divider-knot-v1.png` | 标题上下金线的中心对称中结 | 2026-07-13 根据 412 × 915 视觉基准生成，去绿幕后保存 | `160 × 96px` 透明 PNG；不得改用长祥云 |
 | `static/assets/icons/auth/auth-title-cloud-v1.png` | “家谱”标题左右祥云 | 2026-07-13 根据 412 × 915 视觉基准生成，去绿幕后保存 | `200 × 120px` 透明 PNG；右侧只允许镜像该素材 |
 

docs/design/A02_账号登录_设计记录.md

@@ -0,0 +1,55 @@
+# A02 账号登录设计记录
+
+> 状态：实现与运行时截图已完成，等待用户视觉验收。  
+> 路由：`pages/auth/a02-login?agreed=1`  
+> 视觉来源：已验收的 A01 启动／登录引导与 G01 我的家谱。
+
+## 1. 页面任务
+
+让已确认协议的用户在“账号密码登录”与“手机验证码登录”之间切换并进入家谱。页面只保留本地字段校验、A05 忘记密码跳转与待接入 toast；不新增真实账号、短信、微信或后端逻辑。
+
+## 2. 视觉结构
+
+1. 使用与 A01 同高度的朱砂祠堂头和居中谱印，保证认证入口属于同一品牌场景。
+2. 头部下方放置一张完整不透明的卷轴认证面板，而不是普通 CSS 矩形卡；标题、双 Tab、输入、辅助链接和按钮文字都是可编辑的 Vue 内容层。
+3. 面板上部承载任务标题和双 Tab，中部承载两行输入与辅助操作，下部留给原比例朱砂按钮、协议提示与淡墨山水收束。
+4. 主按钮继续复用 A01 的 `a01-primary-button.png`，显示槽高度为 128rpx；不把约 4.49:1 的皮肤压进旧的 100rpx 矮按钮。
+5. 背景山水只出现在认证面板之外和面板底部，保证输入、标签与占位文本的对比度。
+
+## 3. 资产合同
+
+| 路径 | 属性／原图尺寸 | 页面显示与职责 |
+| --- | --- | --- |
+| `static/assets/foundation/opaque/auth-header.png` | opaque / 750×196 | 认证祠堂头，A01 与 A02 共用。 |
+| `static/assets/foundation/transparent/brand-seal.png` | transparent / 240×288 | 头部谱印。 |
+| `static/assets/modules/auth/opaque/a02-login-panel.png` | opaque / 940×1672 | 完整卷轴登录面板，承载纸纹、双金线、角纹、云纹与底部山水；A02 容器 666rpx × 1184rpx。 |
+| `static/assets/foundation/opaque/a01-primary-button.png` | opaque / 1877×418 | A02 唯一主操作按钮皮肤，显示槽 128rpx 高。 |
+| `static/assets/foundation/transparent/chevron-right.png` | transparent / 96×96 | 返回图标，水平翻转后使用，不再用文字符号或 CSS 圆框。 |
+
+认证面板由内置 ImageGen 根据 A01、G01 的已验收截图生成；提示词约束为“完整不透明暖宣纸、双古金线、角纹、边缘淡云竹、中央留给真实控件、无文字无按钮无图标”。生成源保留在 Codex 生成目录，项目运行时只引用上表中的最终资产。
+
+## 4. 交互与可读性
+
+- 两个 Tab 仍由 `activeTab` 切换；已验证手机验证码 Tab 的真实页面状态。
+- 账号、密码、手机号、验证码继续使用原生 `input`，不烘焙到图片。
+- A02 不绘制面板或主按钮的 CSS `border`／`background`；对应完整外观由图片资产承担。
+- 320 × 568 下可纵向滚动，主按钮位于首屏可达区域；360 × 640、360 × 800、412 × 915 均无横向裁切。
+
+## 5. 运行时证据
+
+| 状态 | 截图 |
+| --- | --- |
+| 改造前，账号密码 Tab，360×800 | `screens/runtime/2026-07-13/A02-before-360x800.png` |
+| 改造后，账号密码 Tab，320×568 | `screens/runtime/2026-07-13/A02-after-320x568.png` |
+| 改造后，账号密码 Tab，360×640 | `screens/runtime/2026-07-13/A02-after-360x640.png` |
+| 改造后，账号密码 Tab，360×800 | `screens/runtime/2026-07-13/A02-after-360x800.png` |
+| 改造后，账号密码 Tab，412×915 | `screens/runtime/2026-07-13/A02-after-412x915.png` |
+| 改造后，手机验证码 Tab，360×800 | `screens/runtime/2026-07-13/A02-sms-360x800.png` |
+
+## 6. 自动检查
+
+- `tests/a02-asset-alpha-audit.ps1`：A02 卷轴面板存在、尺寸稳定、比例稳定、四角不透明。
+- `tests/a01-a02-ui-contract.ps1`：A02 使用完整卷轴面板与完整主按钮；保留 Tab、原生输入、A05 跳转；拒绝 CSS 面板和 CSS 主按钮外观。
+- `tests/compile-audit.ps1`：Vue 结构可编译。
+
+用户未确认前，A02 不得在规划中标记为视觉验收完成，也不得作为其他认证页的最终样板直接复制。

docs/design/P00_页面结构与资产清单.md

@@ -1,6 +1,6 @@
 # P00 页面结构与资产清单
 
-> 状态：页面与现有资产迁移已完成；A01 完整按钮候选待设计图复核，两页截图回归待办。  
+> 状态：59 条最终编号路由与第一版统一视觉母版已落地；A01/G01 运行时截图回归及全量逐页视觉精修待办。
 > 目的：让页面、路由和资产都有唯一、可读、可审计的归属；本文件是 P-00 的执行清单。
 
 ## 1. 页面命名规则
@@ -16,7 +16,7 @@
 
 尚未被全量设计确认、但为了保留现有功能骨架的通用页面，必须在文件名中使用 `skeleton`，不能使用含义不明的 `index.vue`、`list.vue`、`detail.vue`。
 
-## 2. 当前 15 个路由的迁移映射
+## 2. 首批 15 个路由的历史迁移映射
 
 | 当前路由 | 当前可确认用途 | 目标文件 | 处理状态 |
 | --- | --- | --- | --- |
@@ -32,10 +32,11 @@
 | `pages/tree/t03-member-profile` | T03 成员档案 | `pages/tree/t03-member-profile.vue` | 已迁移；未验收 |
 | `pages/family/f01-family-feed` | F01 家族动态 | `pages/family/f01-family-feed.vue` | 已迁移；未验收 |
 | `pages/family/f02-publish-feed` | F02 发布动态 | `pages/family/f02-publish-feed.vue` | 已迁移；未验收 |
-| `pages/skeleton/content-list-skeleton` | 多类型内容列表功能骨架 | `pages/skeleton/content-list-skeleton.vue` | 已迁移；不能计为设计页 |
 | `pages/notification/n01-message-center` | N01 消息中心 | `pages/notification/n01-message-center.vue` | 已迁移；未验收 |
 | `pages/profile/m01-profile-home` | M01 我的首页 | `pages/profile/m01-profile-home.vue` | 已迁移；未验收 |
 
+上述表仅保留首批迁移的历史背景；当前最终 59 路由、文件存在性和中文编号注释的唯一合同是 `tests/full-page-visual-contract.ps1`。临时 `content-list-skeleton` 已由谱文、相册、礼仪、备忘录和字辈诗最终页面替代并移除。
+
 迁移要求：同一轮更新页面文件、`pages.json`、所有跳转路径、测试和中文文件头注释；未完成全部引用更新时，不得删除旧路径。
 
 ## 3. 最终资产目录
@@ -47,14 +48,18 @@ static/assets/
       page-paper.jpg
       auth-page-paper.jpg
       auth-header.png
+      a01-primary-button.png
+      a01-secondary-button.png
       root-header-cinnabar.jpg
     transparent/
       brand-seal.png
       auth-title-cloud.png
       auth-divider-knot.png
-      auth-button-corner.png
       ...
   modules/
+    auth/
+      opaque/
+        a02-login-panel.png
     genealogy/
       opaque/
       transparent/
@@ -66,7 +71,7 @@ static/assets/
       transparent/
 ```
 
-当前已迁入的资产以第 4 节台账为准。`auth-primary-button.png`、`auth-secondary-button.png` 尚未生成：在它们验收并替换 A01 的旧角标拼接实现前，A01 不能按“完整资产规则”关闭地基验收。
+当前已迁入的资产以第 4 节台账为准。A01 已使用 `a01-primary-button.png`、`a01-secondary-button.png` 两张完整按钮皮肤替换旧角标拼接实现；是否维持用户验收效果仍以运行时截图回归为准。
 
 ## 4. 当前资产台账
 
@@ -81,9 +86,9 @@ static/assets/
 | `foundation/transparent/auth-ink-scenery.png` | transparent / 750×1334 | 认证页淡墨叠层 | A01、A02 | 保留 |
 | `foundation/transparent/auth-title-cloud.png` | transparent / 200×120 | A01 标题左右云纹 | A01 | 保留 |
 | `foundation/transparent/auth-divider-knot.png` | transparent / 160×96 | A01 文案分隔结 | A01 | 保留 |
-| `foundation/transparent/auth-button-corner.png` | transparent / 160×160 | A01 旧按钮角标；待完整按钮替换 | A01 | 过渡保留 |
-| `foundation/opaque/a01-primary-button-candidate.png` | opaque / 1983×793 | A01 主按钮完整图片候选；未接入 | 无 | 待设计图复核 |
-| `foundation/opaque/a01-secondary-button-candidate.png` | opaque / 1983×793 | A01 次按钮完整图片候选；未接入 | 无 | 待设计图复核 |
+| `foundation/opaque/a01-primary-button.png` | opaque / 1877×418 | A01 朱砂主按钮完整皮肤 | A01 | 保留；待运行截图回归 |
+| `foundation/opaque/a01-secondary-button.png` | opaque / 1881×419 | A01 宣纸次按钮完整皮肤 | A01 | 保留；待运行截图回归 |
+| `modules/auth/opaque/a02-login-panel.png` | opaque / 940×1672 | A02 完整卷轴登录面板，含纸纹、双金线、角纹、云纹与底部山水 | A02 | 保留；待用户视觉验收 |
 | `foundation/transparent/auth-login-outline.png` | transparent / 96×96 | 登录图标 | A01 | 保留 |
 | `foundation/transparent/auth-wechat.png` | transparent / 96×96 | 微信图标 | A01 | 保留 |
 | `foundation/transparent/brand-seal.png` | transparent / 240×288 | 品牌谱印 | A01、A02、`PageHeader` | 保留 |
@@ -112,7 +117,7 @@ static/assets/
 | `modules/genealogy/transparent/shortcut-generation-poem.png` | transparent / 96×96 | 字辈诗入口 | G01 | 保留 |
 | `modules/genealogy/transparent/shortcut-application.png` | transparent / 96×96 | 审核入口 | G01 | 保留 |
 
-本轮已迁入 35 项在用资产，删除 24 项运行时零引用的旧副本。两张 A01 候选由图像生成工具制作，不是设计图裁切，当前比例约为 2.5:1，尚不符合现有按钮约 3.6:1 的显示比例，严禁直接接入或作为验收通过依据。旧版设计记录中的历史路径不再是资产依据；后续只按本台账引用和维护。
+本轮已迁入 35 项在用资产，删除 24 项运行时零引用的旧副本。A01 的两张完整按钮皮肤由图像生成工具制作，不是设计图裁切；它们的原始比例均约为 4.49:1，并由 A01 页面作为单张底层皮肤引用。旧版设计记录中的历史路径不再是资产依据；后续只按本台账引用和维护。
 
 ## 5. 图片属性规则
 

docs/design/视觉设计交接手册.md

@@ -0,0 +1,212 @@
+# 家谱 APP 视觉设计交接手册
+
+> 更新日期：2026-07-14
+> 用途：在新电脑或交给新的 GPT 后，按本手册恢复当前工作；它只记录已发生的事实，不把待验收写成已完成。
+
+## 1. 当前停点：先看这一节
+
+项目已有 59 条最终编号路由，第一版都可以浏览；这不等于 59 个页面已完成视觉验收。
+
+- 用户已经验收的视觉基准只有两个：**A01 启动/登录引导**、**G01 我的家谱**。它们的可见效果已冻结。
+- **A02 账号登录**已经完成一次资产化重做、功能回归和多尺寸截图，但**仍在等待用户审美验收**。在用户确认前，不得把 A02 标记为完成，也不得把它的样式批量传播到 A03--A06。
+- 其余模块的页面仍属于后续视觉设计任务；其中不少页面目前由 `components/ModulePage.vue` 与 `data/page-catalog.js` 提供第一版可浏览壳。这个壳是过渡方案，不是最终 UI。
+- 不提交、不推送、不上传 Git；由用户自行处理版本库操作。
+
+下一位执行者的第一件事不是开始做新页面，而是请用户查看 A02 的前后对比：
+
+- `docs/design/screens/runtime/2026-07-13/A02-before-after-360x800.png`
+- `docs/design/screens/runtime/2026-07-13/A02-after-412x915.png`
+- `docs/design/screens/runtime/2026-07-13/A02-sms-360x800.png`
+
+用户若要求调整，只修改 A02 并重新截图、复核；用户若明确通过，才进入 A03--A06。
+
+## 1.1 迁移前必须保留的文件
+
+本手册和截图工具是本轮新增文件；换电脑前，用户需在自行提交/上传时包含它们，或完整复制当前工作区。我没有执行任何 Git 暂存、提交、推送或上传操作。
+
+至少要保留：`docs/design/视觉设计交接手册.md`、`docs/交接记录.md`、`scripts/capture-chrome-page.js`、A02 页面/资产/测试、`docs/design/screens/runtime/2026-07-13/` 的运行证据，以及现有计划与设计记录。只复制已提交的旧版本会丢失当前停点。
+
+## 2. 必读文件与唯一职责
+
+| 文件 | 负责什么 |
+| --- | --- |
+| `AGENTS.md` | 最小修改、保护既有未提交内容、验证后再交付的项目规则。 |
+| `docs/规划.md` | 59 个页面的范围、模块顺序和“完成”的定义。 |
+| `docs/design/D1_安卓视觉规范与页面壳.md` | Android 页面、资产、布局与中文注释的硬约束。 |
+| `docs/design/P00_页面结构与资产清单.md` | 路由、页面文件和资产台账的唯一清单。 |
+| `docs/superpowers/plans/2026-07-13-product-design-visual-refinement.md` | 已批准的分模块视觉精修计划和验收顺序。 |
+| `docs/design/2026-07-13-A01-G01-A02-视觉审视.md` | A01/G01 视觉证据与旧 A02 的问题定位。 |
+| `docs/design/A02_账号登录_设计记录.md` | A02 当前实现、资产、截图和测试记录。 |
+| `design-qa.md` | A02 的 Design QA；当前 `final result: blocked`，原因是缺少用户的审美确认。 |
+| `docs/交接记录.md` | 简版当前状态与恢复入口；本手册提供完整操作细节。 |
+
+发生冲突时，按“用户最新明确指令 > AGENTS.md > 上表中的当前台账/计划 > 历史文档”的顺序处理。不要以旧的草案或已废弃的截图切片方案为依据。
+
+## 3. 已验收的风格与绝对禁区
+
+### A01 与 G01 是可观察的品牌真源
+
+- A01 参考图：`docs/design/screens/A01-启动登录引导-栅格验收-412x915.png`
+- G01 参考图：`docs/design/screens/G01-我的家谱-紧凑版设计稿-v5-Tabbar安全区.png`
+
+共同语言是“家祠卷轴”：暖宣纸、朱砂主色、古金框线和元数据、墨褐字、低对比淡墨山水。主信息应先于背景被读到，留白是结构的一部分。
+
+必须遵守：
+
+1. 完整按钮、卡片、标题签、页面头图和有边框的装饰面，使用完整的**不透明位图资产**承载底色、纹理和边框。
+2. 透明 PNG 仅承担 Logo、图标、祥云、纹样等叠加元素；CSS 只承担布局、文字、状态与交互，不能伪造完整框、祥云、按钮或卡片。
+3. 不能把整张设计截图或局部截图裁进运行页面；运行资产必须是可复用的独立元素。
+4. 不要修改 A01/G01 已验收的可见布局、比例、配色或装饰。可读其实现和资产，但不能借“整理”改变效果。
+5. 不要用一个通用卡片母版覆盖所有模块。家谱、世系树、内容档案、人物记录、通知和设置必须在同一视觉语言下有各自的信息密度与层级。
+
+## 4. A02 的精确状态
+
+### 实现内容
+
+- 路由与页面：`pages/auth/a02-login.vue`
+- 新面板资产：`static/assets/modules/auth/opaque/a02-login-panel.png`
+  - 实际尺寸：940 × 1672
+  - 属性：四角不透明，承载宣纸底、双古金框、角饰与淡纹样
+- 主按钮继续复用已验收完整资产：`static/assets/foundation/opaque/a01-primary-button.png`
+- 账号密码与短信验证码 Tab、输入、忘记密码跳转和原有交互均保留；短信 Tab 已经通过真实 Chrome 调试点击截图。
+
+### 已保存的运行证据
+
+目录：`docs/design/screens/runtime/2026-07-13/`
+
+| 文件 | 状态 |
+| --- | --- |
+| `A02-before-360x800.png` | 改造前基线。 |
+| `A02-after-320x568.png` | 小屏账号密码态；允许纵向滚动，不允许横向裁切。 |
+| `A02-after-360x640.png` | 中屏账号密码态。 |
+| `A02-after-360x800.png` | 主对比尺寸。 |
+| `A02-after-412x915.png` | 大屏账号密码态。 |
+| `A02-sms-360x800.png` | 真实切换后的短信验证码态。 |
+| `A02-before-after-360x800.png` | 左旧右新的并排对比。 |
+
+### 通过/未通过的界线
+
+已通过的是：资产尺寸与不透明角审计、A01/A02 页面契约、编译检查、A02 的多尺寸运行截图和短信 Tab 交互。
+
+未通过的是：用户对 A02 的最终审美确认。因此 `design-qa.md` 必须保持 `blocked`，直至用户明确确认。用户若觉得顶部祥云偏多，只可先移除 A02 标题右侧的单个祥云；不要无根据改动面板框、输入区或交互。
+
+## 5. 换电脑后如何恢复截图与审视能力
+
+### 必备环境
+
+- Windows、Chrome、HBuilderX（项目当前以 Android `uni-app` 为目标）。
+- Node.js 22 或更高版本；当前脚本已在 Node 24 环境使用原生 `fetch` 与 `WebSocket`。
+- 先在 HBuilderX 启动本地 H5 调试页，并确认它能在 `http://localhost:5173` 打开。不要臆测项目的 npm 启动命令。
+
+用专用 Chrome 调试实例开启远程端口；它与用户日常 Chrome 隔离：
+
+```powershell
+$chrome = "$env:ProgramFiles\Google\Chrome\Application\chrome.exe"
+Start-Process -FilePath $chrome -ArgumentList `
+  '--remote-debugging-port=9222', `
+  "--user-data-dir=$env:TEMP\jiapu-chrome-debug", `
+  'http://localhost:5173/#/pages/auth/a02-login?agreed=1'
+```
+
+确认调试端口与应用页面存在：
+
+```powershell
+Invoke-RestMethod 'http://127.0.0.1:9222/json/list' | Select-Object title, url
+```
+
+使用项目内的正式脚本截图。它会导航**专用调试 Chrome**的当前标签页、写出 PNG，并在结束时清除设备尺寸覆盖；不能操作或关闭用户的日常 Chrome。
+
+```powershell
+node scripts/capture-chrome-page.js `
+  'http://localhost:5173/#/pages/auth/a02-login?agreed=1' `
+  '.login-page' `
+  'docs/design/screens/runtime/2026-07-14/A02-after-360x800.png' `
+  360 800
+```
+
+截图只作为 `docs/design/screens/runtime/<日期>/` 下的设计证据，绝不能放回 `static/assets/` 作为运行资源。每个代表页面至少做 360 × 800；模块代表页还要做 320 × 568、360 × 640、360 × 800、412 × 915。最终 Android/HBuilderX 截图仍需补做，H5 Chrome 截图不能替代它。
+
+## 6. 后续执行顺序与每轮产物
+
+### 门禁 0：先处理 A02
+
+1. 让用户审 A02 前后对比与 412 × 915、短信 Tab 图。
+2. 若不通过：只在 A02 修正明确问题，先调整对应契约测试，再改页面/资产，重新截全尺寸图。
+3. 若通过：把 A02 状态同步到 `docs/规划.md`、`docs/交接记录.md`、`docs/design/A02_账号登录_设计记录.md` 与 `design-qa.md`，再开始 A03--A06。
+
+### 其后的模块顺序
+
+1. **账号 A03--A06**：以已验收 A02 为认证样板，但每个页面保留各自的任务与状态，不能直接复制表单。
+2. **家谱 G02--G12**：先做空态/创建、家谱概览与世代字等代表页，再扩展搜索、申请、设置。
+3. **世系树 T01--T08**：先建立树、成员档案、关系编辑三类代表页。
+4. **家族内容 F01--F10**：动态、文章、相册、媒体上传分别建立内容档案式层级。
+5. **人物记录 R01--R11**：人物档案、礼仪活动、成长时间线先定样板。
+6. **通知 N01--N02**：区分未读、已读、时间和详情层级，不只依赖颜色。
+7. **我的 M01--M10**：个人身份首页与安全设置先做，后续设置页按统一行式结构展开。
+
+`ModulePage.vue`/`page-catalog.js` 中属于本轮模块的临时入口，必须在同一轮被真实页面替换并移除相应依赖；不得保留“新旧两套入口”或把通用壳伪称为精修完成。
+
+### 每个模块的固定工作流
+
+1. 用 Product Design 对已运行页面截图审视，明确该模块与 A01/G01 的继承点、不同的信息结构与验收尺寸。
+2. 先补/改最小的页面契约测试并看到失败，再实现页面；只有缺少真实视觉资产时才生成资产。
+3. 资产生成后记录路径、尺寸、是否不透明、用途和引用页到 P00；生成图必须经过本地检查后进入 `static/assets/`。
+4. 保留既有可用跳转和返回行为，删除本轮替换后不再使用的临时导入、目录项和样式。
+5. 运行受影响的测试、编译审计、真实路由截图，再更新设计记录、规划和交接状态。
+6. 在用户验收之前，状态统一写“实现与截图完成，视觉待用户验收”。
+
+## 7. 下一位 GPT 需要具备并实际调用的能力
+
+这不是“只改 CSS”的任务。执行视觉页前应先读取对应技能说明，并在对用户的工作说明中指出正在使用的技能及目的。
+
+| 能力/技能 | 何时使用 | 项目中的正确做法 |
+| --- | --- | --- |
+| `product-design:index`、`product-design:audit` | 审视、评价或设计一个已运行页面/流程时。 | 先拿到真实路由截图，再依据 A01/G01 与页面任务写审视结论；不要靠源码猜好不好看。 |
+| Product Design 的 `user-context`、`get-context`、`ideate`、`image-to-code`、Design QA 流程 | 需要探索方向、选择视觉方案、将已选样稿落地、或交付前比对时。 | 有明确视觉真源时先忠实落地；没有真源且需要新方向时先给可比较方案，选定后再实现；最后在 `design-qa.md` 诚实记录通过或阻塞。 |
+| `imagegen` | 现有资产无法承担完整视觉面时。 | 先用 A01/G01 实图作为参考，明确输出是完整不透明面板还是透明叠加件；检查实际尺寸/Alpha 后再放入项目。不能用截图代替资产。 |
+| `superpowers:brainstorming` 与 `superpowers:writing-plans` | 新模块或会改变页面行为的创作工作开始前。 | 先写清用户目标、交互和验收，不以“尽快”跳过设计决定。 |
+| `superpowers:test-driven-development` | 修改功能、路由契约、可审计视觉结构前。 | 先让最小契约测试失败，再做实现；视觉资产同样写尺寸/Alpha/引用审计。 |
+| `superpowers:systematic-debugging` | 截图、路由、构建或测试出现意外时。 | 先复现和定位单一根因，禁止靠删测试、盲改样式掩盖问题。 |
+| `superpowers:verification-before-completion` | 任何“完成/修好/通过”的表述前。 | 以命令输出、运行截图和用户确认作证据；不能用意图代替验证。 |
+
+若新电脑没有 Product Design 或 ImageGen 插件，应先安装/启用同等能力；在能力缺失时不能假装完成视觉审计或资产生成。当前环境曾因 Windows 的 `python`/`python3` 只是商店占位符而无法保存 Product Design 的持久 context，这不影响当前项目文件和截图恢复；新环境若有可用 Python，可重新运行该插件的 context 预检。
+
+## 8. 验证命令
+
+先看工作区，再运行与改动相匹配的聚焦测试；模块阶段结束前运行全量 PowerShell 审计：
+
+```powershell
+git status --short
+
+Get-ChildItem tests -Filter *.ps1 | Sort-Object Name | ForEach-Object {
+  & powershell.exe -NoProfile -ExecutionPolicy Bypass -File $_.FullName
+  if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE }
+}
+
+git diff --check
+```
+
+A02 当前的最小回归集合：
+
+```powershell
+powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a02-asset-alpha-audit.ps1
+powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1
+powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/compile-audit.ps1
+powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/full-page-visual-contract.ps1
+git diff --check
+```
+
+`git diff --check` 可能提示仓库既有的 CRLF 行尾警告；只有真正的空白错误或非零退出码才算失败。不要 reset、checkout、清空或覆盖用户已有改动。
+
+## 9. 文档与资源维护清单
+
+每次完成一个页面/模块，按事实更新：
+
+- `docs/规划.md`：用户验收状态与下一个模块。
+- `docs/design/P00_页面结构与资产清单.md`：新旧资产、尺寸、透明属性、引用位置与去留。
+- `docs/design/<页面>_设计记录.md`：设计意图、截图、交互与测试。
+- `docs/design/screens/runtime/<日期>/`：真实运行截图。
+- `design-qa.md`：修复项、未决项与最终 `passed/blocked` 结果。
+- `docs/交接记录.md` 与本手册：真实停点、风险、下一步；未获得用户确认就不能写成“已完成”。
+
+当前工作区已经存在用户和历史任务的未提交改动。后续工作只能触及当前任务需要的文件；若改动与当前设计目标无关，只报告，不清理。