diff --git a/docs/superpowers/specs/2026-07-21-page-header-safe-area-g03-design.md b/docs/superpowers/specs/2026-07-21-page-header-safe-area-g03-design.md new file mode 100644 index 0000000..8f19022 --- /dev/null +++ b/docs/superpowers/specs/2026-07-21-page-header-safe-area-g03-design.md @@ -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 使用 ``。 + +## 范围 + +修改: + +- `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 原生画面无标题贴顶或内容裁切。