docs: define shared header safe area

2026-07-21 13:28:13 +08:00
parent 668b4ef55f
commit 0542fa9102
1 changed files with 45 additions and 0 deletions
@@ -0,0 +1,45 @@
+# 公共二级页头安全区与 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.vue`
+- `pages/genealogy/g03-create-genealogy.vue`
+- 公共页头与 G03 相关契约、运行时验证
+
+不修改 G03 表单、弹层、按钮、背景和业务数据。已发现的 G03 原生第二步路由参数问题另行修复，不与本次页头调整混在同一个改动中。
+
+## 验收标准
+
+1. MuMu 中 G03 标题和返回按钮完整位于系统状态栏下方。
+2. G03 第一、第二步均使用公共 `PageHeader`，不存在 `flow-header` 残留。
+3. 已使用公共组件的 G06 等二级页面同步获得相同安全区，正文不被推入页头或遮挡。
+4. 根页面 G01 的现有头部高度和布局不变。
+5. 普通页面默认返回、深链回退及 G03 自定义返回均有测试覆盖。
+6. 320px 至 412px CSS 视口无横向溢出，MuMu 原生画面无标题贴顶或内容裁切。