rain
2.2 KiB
2.2 KiB
公共二级页头安全区与 G03 复用设计
目标
统一修正普通二级页面导航栏与 Android 状态栏距离过近的问题，并删除 G03 自建的 flow-header，让其复用公共 PageHeader。
单一组件规则
components/PageHeader.vue 是项目根页面和二级页面导航栏的唯一实现：
- 根页面继续使用现有
root变体。 - 普通二级页面总高度由“系统状态栏高度 + 104rpx 导航内容高度”组成。
- 普通二级页面顶部内边距使用
var(--status-bar-height, 0px)，标题和返回按钮在状态栏下方的 104rpx 内容区中垂直居中。 - 页面正文继续由
page-header-slot占位，不允许被固定页头覆盖。
不在 G03 或其他业务页面重复设置状态栏补偿。
G03 接入
- G03 删除
flow-header、返回图标和标题的自建模板与样式。 - G03 使用动态公共页头标题：第一步为“创建家谱”，第二步为“录入首代人物”。
- G03 仍保留第二步返回第一步的原有业务行为。
- 为支持这一行为，
PageHeader增加可选customBack布尔属性和back事件：customBack为false时保持现有默认返回和深链回退逻辑。customBack为true时只触发back事件，由页面处理返回。
- G03 使用
<PageHeader :title="..." custom-back @back="goBack" />。
范围
修改：
components/PageHeader.vuepages/genealogy/g03-create-genealogy.vue- 公共页头与 G03 相关契约、运行时验证
不修改 G03 表单、弹层、按钮、背景和业务数据。已发现的 G03 原生第二步路由参数问题另行修复，不与本次页头调整混在同一个改动中。
验收标准
- MuMu 中 G03 标题和返回按钮完整位于系统状态栏下方。
- G03 第一、第二步均使用公共
PageHeader，不存在flow-header残留。 - 已使用公共组件的 G06 等二级页面同步获得相同安全区，正文不被推入页头或遮挡。
- 根页面 G01 的现有头部高度和布局不变。
- 普通页面默认返回、深链回退及 G03 自定义返回均有测试覆盖。
- 320px 至 412px CSS 视口无横向溢出，MuMu 原生画面无标题贴顶或内容裁切。