dev · f079dcc / 2026-10-26

布局与文案对齐

第三轮：统一消除状态栏下方重复的顶部留白，修正表单、孩子选择器和筛选入口的下拉箭头。66 页渲染检查、7 页窄屏检查及相关交互回归通过。顶部间距按用户反馈进行 H5 画布适配，原始源码数值仍保留追溯。

其余页面尚无逐页原生截图证据；浏览器渲染与共享组件检查不等于真机逐像素一致。扫码仍是模拟。

本轮调整

顶部间距（第三轮）

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

第三轮当前截图

活动页标题与添加孩子返回按钮距状态栏底部均为 12px。以下为 H5 浏览器截图。

第三轮活动页第三轮添加孩子

第三轮浏览器检查记录

第二轮历史截图（顶部间距已由第三轮更新）

以下为修正后的 H5，不是原生 App 截图。

活动页登录帮助设备设置

第一轮 H5 截图

修正后的登录页修正后的添加设备页

逐页边界

66 个页面条目

检查邮箱

打开页面 →
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/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 截图，仍待逐屏视觉验收