# 布局与文案对齐记录

日期：2026-10-26（第三轮顶部间距与下拉箭头修正）；基准：dev `f079dcc951be0d098a27aae4239096468107e4f3`。Flutter 源码未修改。

## 最终调整

| 范围 | 最终状态 | 源码依据 |
|---|---|---|
| 顶部间距（第三轮） | H5 状态栏统一占位，移除页面重复叠加的 40/60px 顶部留白。活动、相册、聊天、探索及共享 PageHeader 紧接状态栏，保留 12px 控件内边距；启动/欢迎页保留居中构图。这是按用户反馈进行的 H5 画布适配，源码原始 topInset 仅保留为追溯事实。 | `app-alignment.css；app.js；visual-source.js` |
| 下拉箭头（第三轮） | 新增/编辑/引导孩子及模拟弹窗的表单箭头垂直居中、距右侧 16px；孩子选择器、相册时间筛选、探索筛选使用统一 SVG 箭头。选择和筛选逻辑保持原状。 | `pages.js：vector、childHeader；app-alignment.css` |
| 活动、相册、聊天历史 | 使用源码 ChildSelector：标题右侧 150px 白色胶囊、36px 头像容器、仅孩子名称；下方锚定菜单切换孩子；不附加等级副标题。探索页没有该组件，移除错误复用。 | `lib/widgets/common/child_selector.dart:74,324；lib/pages/main/activity/today_page.dart:1617；lib/pages/main/photos/photos_page.dart:716；lib/pages/main/chat/chat_history_page.dart:626；lib/pages/main/activity/explore_page.dart:354` |
| 通知铃铛 | 活动、相册、聊天历史和我的使用 40px 白色圆按钮、20px 图标、未读数字角标（超过 99 显示 99+）。 | `lib/widgets/common/notification_bell_button.dart:45-123` |
| 认证帮助弹窗 | 登录帮助恢复四项标题、说明和底部提示，国内首项回手机号登录、海外首项直接确认切回大陆；FAQ 恢复六项问题与互相跳转；地区选择恢复说明、当前状态与切换确认。内容弹窗使用右上角关闭，不追加取消/完成尾栏。登录手机号和邮箱草稿分别保留；注册帮助返回登录，注册切换服务地区仍停留注册；我的地区选择使用独立简洁版。注册源码未传 isDomestic，帮助仍使用组件默认国内入口，照原样保留。 | `lib/widgets/auth/login_help_sheet.dart；lib/widgets/auth/faq_sheet.dart；lib/widgets/auth/region_selection_sheet.dart；lib/pages/auth/login_page.dart:614,1832-1857` |
| 设备设置 | 设备图标白底方块和短 SN；状态、电量、存储、网络置于同一张绿色卡片的两行网格；关联孩子与更换入口同卡；恢复区块图标、居中时长、描边解绑按钮及提示卡。时长关闭再开启保留当前值，仅保存后生效；无设备显示空态。未开放源码中被注释的功能开关。 | `lib/pages/main/me/device_settings_page.dart:172-810` |
| 登录页 | 去掉额外“登录”标题栏；完整 QMox 字标、浮动返回/帮助、白色表单卡片、输入框图标、眼睛显隐图标；验证码登录位于登录按钮下方；协议为隐私政策→使用条款→儿童隐私政策，复选框与文字同行；ICP备案固定底部。 | `lib/pages/auth/login_page.dart:405,577,735,922,1268` |
| 登录平台分支 | 国内 Android 为圆形微信；iOS 为 Apple 按钮，国内同时显示微信；无第三方入口时不画“或”分隔线。 | `lib/pages/auth/login_page.dart:1380-1509` |
| 添加设备 | 260×260 扫描区域，28 圆角和 3px 绿色边框；普通字号标题；图标+滑块+百分比横排；默认 60%，范围 0–100%；提示只放缩放条下方。 | `lib/pages/main/me/add_device_page.dart:27,315-513` |
| 引导连接设备 | 单独的浮动返回、步骤点、步骤文字、左对齐标题、浅绿提示卡、满内容宽的方形扫描框；不再与添加设备套同一模板；移除源码占位按钮处自行添加的连接帮助入口。 | `lib/pages/guide/device_connect_page.dart:329-666` |
| 注册页 | 字标与单一标题，白色表单卡片；手机号/邮箱切换样式；按源码使用注册协议文案与顺序；密码框保留无眼睛按钮的实现，提示读取本地化键。 | `lib/pages/auth/register_page.dart:226,379,744-832,1014` |
| 重置密码 | 独立返回、钥匙图标、单一标题和说明、白色表单卡片；国内显示账号切换，海外保持邮箱；返回提示和密码占位文案读取源码语言表。 | `lib/pages/auth/forgot_password_page.dart:72-506` |
| 公共组件 | 25 个 PageHeader 页按共享组件还原 40px 圆形返回、20px 箭头、16px 间距及 20px 黑色标题；页面背景从各页 build 提取；显式顶部间距只记录，不在已有状态栏的 H5 画布重复叠加；密码眼睛状态同步。 | `lib/widgets/common/page_header.dart:28-76；lib/constants/app_colors.dart；lib/constants/app_text_styles.dart` |
| 评审画布 | 桌面预览固定 390×844，避免随桌面窗口高度压缩 App 视口。扫码模拟按钮移到手机之外，真实预览图像继续使用占位。 | `index.html；app.js；app-alignment.css` |

## 维护规则

- `pages.js` 的认证、设备、扫码文案通过 `text(getter, state)` 读取源码本地化表，不另造一份中文。源码未提供的模拟文案仅出现在评审区或模拟弹窗。
- `scripts/build_visual_source.py` 生成 `visual-source.js` 和 66 页的 `evidence/visual-source-inventory.json`，记录源文件 SHA、PageHeader、页面背景、显式顶部间距与标题键。`app-alignment.css` 按组件组织样式，注释标注来源。
- 新提交到来时先运行 `scripts/check_source.py`，确认是源码漂移还是 H5 差异；经审阅后才重新生成源数据。生成元数据不会自动完成页面视觉还原。
- 保留国内/国际、iOS/Android、密码/验证码的分支。固定手机逻辑尺寸用于比较；字体栅格化、设备字号、安全区和系统栏仍可能有平台差异。
- 第二轮反馈的三张图为旧 H5 标注图，按 dev 组件源码核对；已有原生截图仍只有登录与添加设备；其余页面是源码共享组件检查与浏览器渲染回归，不能标为已有 66 张 App 截图逐像素验收。
- 原生摄像头画面、支付、硬件和服务端结果仍为模拟。TODO 清单保留。

## 本轮验证

- 66 个页面逐页检查：64 个带页头页面的首个标题/返回控件距状态栏底部 12–17.7px；2 个无页头启动/欢迎页保留原构图。无横向溢出、空白按钮、已加载失败图片。
- 活动页顶部间距由 60px 改为 12px；添加孩子返回按钮由 52px 改为 12px。7 个相关页面通过 320px 窄屏检查；性别选择、孩子切换、相册时间筛选实点通过，控制台无警告和错误。详见 evidence/round3-browser-receipt.json。
- 本轮复跑 41 组交互、7 组布局文案、13 组第二轮回归全部通过；按钮回归 612 次渲染、2267 断言通过；259 份源码/资源指纹未变。

## 历史验证（第一、二轮）

- 第一轮 7 组布局文案回归继续通过；第二轮新增 13 组组件结构、弹窗分支、草稿与设备时长回归通过（核心差异先失败后修复）。
- 原有 41 组交互回归、28 项模型检查、1,700 次场景渲染通过。
- 66 页 × 6 场景的初始按钮扫描：2,032 项，脚本异常和未解释无反馈为 0；扫码评审入口另由布局回归与浏览器实点验证。
- 390px 浏览器逐页检查 66 页：无横向溢出、无空白按钮、无已加载失败图片。活动、登录帮助、设备设置另进行截图检查；320px 窄屏检查六个相关页面和帮助弹窗。详见 evidence/review-round2-browser.json。
- 259 份原始源码/资源指纹未变。

## 逐页检查边界

| 页面 | 源码 | 本轮对齐范围 | 原生截图证据 |
|---|---|---|---|
| 检查邮箱 | `lib/pages/auth/check_email_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 重置密码 | `lib/pages/auth/forgot_password_page.dart` | 同类结构问题延伸修正 + 源码布局/文案 | 无本页 App 截图，仍待逐屏视觉验收 |
| 登录 | `lib/pages/auth/login_page.dart` | 截图标注逐项修正 + 页面结构/文案/布局 | 用户提供的 App 截图 |
| 欢迎首页 | `lib/pages/auth/onboarding_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 注册 | `lib/pages/auth/register_page.dart` | 同类结构问题延伸修正 + 源码布局/文案 | 无本页 App 截图，仍待逐屏视觉验收 |
| 第三方登录绑定手机 | `lib/pages/auth/social_bind_phone_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 启动页 | `lib/pages/auth/splash_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 注册成功选择 | `lib/pages/auth/welcome_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 初始化失败 | `lib/pages/common/init_error_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 设置恢复 | `lib/pages/common/setup_recovery_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 内嵌网页 | `lib/pages/common/web_view_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 引导添加孩子 | `lib/pages/guide/child_add_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 引导连接设备 | `lib/pages/guide/device_connect_page.dart` | 同类结构问题延伸修正 + 源码布局/文案 | 无本页 App 截图，仍待逐屏视觉验收 |
| 连接帮助 | `lib/pages/guide/help_connect_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 设置完成 | `lib/pages/guide/setup_complete_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 奖章 | `lib/pages/main/activity/badges_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 旧物种详情（未接入） | `lib/pages/main/activity/discovery_detail_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 探索时间线 | `lib/pages/main/activity/explore_page.dart` | 同类结构问题延伸修正 + 源码布局/文案 | 无本页 App 截图，仍待逐屏视觉验收 |
| 探索者等级 | `lib/pages/main/activity/explorer_level_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 最近活动 | `lib/pages/main/activity/recent_activities_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 活动 | `lib/pages/main/activity/today_page.dart` | 同类结构问题延伸修正 + 源码布局/文案 | 无本页 App 截图，仍待逐屏视觉验收 |
| 对话详情 | `lib/pages/main/chat/chat_detail_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 聊天历史 | `lib/pages/main/chat/chat_history_page.dart` | 同类结构问题延伸修正 + 源码布局/文案 | 无本页 App 截图，仍待逐屏视觉验收 |
| 在线客服 | `lib/pages/main/chat/live_chat_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 探索页导航容器 | `lib/pages/main/main_layout.dart` | 同类结构问题延伸修正 + 源码布局/文案 | 无本页 App 截图，仍待逐屏视觉验收 |
| 主导航容器 | `lib/pages/main/main_tab_page.dart` | 同类结构问题延伸修正 + 源码布局/文案 | 无本页 App 截图，仍待逐屏视觉验收 |
| 关于我们 | `lib/pages/main/me/about_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 添加孩子 | `lib/pages/main/me/add_child_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 添加设备 | `lib/pages/main/me/add_device_page.dart` | 截图标注逐项修正 + 页面结构/文案/布局 | 用户提供的 App 截图 |
| 修改密码 | `lib/pages/main/me/change_password_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 孩子详情 | `lib/pages/main/me/child_detail_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 设备设置 | `lib/pages/main/me/device_settings_page.dart` | 同类结构问题延伸修正 + 源码布局/文案 | 无本页 App 截图，仍待逐屏视觉验收 |
| 物种详情 | `lib/pages/main/me/discovery_detail_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 编辑孩子资料 | `lib/pages/main/me/edit_child_profile_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 编辑个人资料 | `lib/pages/main/me/edit_profile_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 验证邮箱 | `lib/pages/main/me/email_verification_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 数据报告预览 | `lib/pages/main/me/export_preview_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 家庭成员 | `lib/pages/main/me/family_members_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 图鉴 | `lib/pages/main/me/field_guide_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 帮助文章 | `lib/pages/main/me/help_article_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 帮助与支持 | `lib/pages/main/me/help_support_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 邀请成员 | `lib/pages/main/me/invite_member_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 加入家庭 | `lib/pages/main/me/join_family_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 语言 | `lib/pages/main/me/language_settings_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 关联孩子 | `lib/pages/main/me/link_to_child_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 关联设备 | `lib/pages/main/me/link_to_device_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 我的 | `lib/pages/main/me/me_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 消息中心 | `lib/pages/main/me/notifications_center_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 通知设置 | `lib/pages/main/me/notifications_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 隐私与数据 | `lib/pages/main/me/privacy_data_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 安全 | `lib/pages/main/me/security_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 物种分类 | `lib/pages/main/me/species_category_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 订阅结算 | `lib/pages/main/me/subscription_checkout_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 设备订阅详情 | `lib/pages/main/me/subscription_device_detail_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 订阅历史 | `lib/pages/main/me/subscription_history_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 订单详情 | `lib/pages/main/me/subscription_order_detail_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 订阅管理 | `lib/pages/main/me/subscription_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 自动续费管理 | `lib/pages/main/me/subscription_renewal_management_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 订阅成功 | `lib/pages/main/me/subscription_success_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 切换家庭 | `lib/pages/main/me/switch_family_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 版本详情 | `lib/pages/main/me/version_detail_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 版本历史 | `lib/pages/main/me/version_history_page.dart` | PageHeader、页面背景、H5 顶部间距适配及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 作品详情 | `lib/pages/main/photos/artwork_detail_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 相册物种分类 | `lib/pages/main/photos/category_species_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 照片详情 | `lib/pages/main/photos/photo_detail_page.dart` | 公共文本色/背景及渲染检查 | 无本页 App 截图，仍待逐屏视觉验收 |
| 相册 | `lib/pages/main/photos/photos_page.dart` | 同类结构问题延伸修正 + 源码布局/文案 | 无本页 App 截图，仍待逐屏视觉验收 |

## 复验命令

```sh
python3 scripts/check_source.py
python3 scripts/build_visual_source.py
node scripts/test-visual-contract.cjs
node scripts/test-review-round2.cjs
node scripts/test-interactions.cjs
node scripts/test.cjs
node scripts/test-buttons.cjs
node --expose-gc scripts/audit-interactions.cjs
python3 scripts/build_docs.py
python3 scripts/build_interaction_docs.py
python3 scripts/build_visual_docs.py
```

网页版发布：先重新生成 `../cloudflare/qmox-app-dev/public/`，再部署并运行在线哈希与浏览器验收。不得直接发布整个仓库或原始 App 截图。每次交付保留独立发布记录。