jiapuapp/docs/superpowers/specs/2026-07-16-genealogy-adaptive-background-design.md

G 类型页面分层自适应背景设计

目标

解决 G 类型页面在高屏下半区只剩纯色宣纸、画面重心中断的问题，同时继续满足：左右不裁剪、背景不拉伸、不同屏幕比例可用、9 个活动 G 页面共用。

用户决定

采用现有 C 图贴底的自适应背景，不生成新图，也不重做一张依赖固定长宽比的超长整图。

视觉结构

公共背景由两个固定视口图层组成，统一归 components/GenealogyPageBackground.vue 管理：

1. 宣纸底层：覆盖完整视口，沿用与 C 母版底部匹配的暖灰宣纸色。
2. 底部山水层：继续使用用户选定的 C“云竹亭台连续宣纸景”，宽度 100%、widthFix 等比显示并贴底，完整保留左右画面，不裁剪、不拉伸。

不新增顶部竹枝资产，不重复渲染或裁切 C 图。高屏多出的宣纸区留在上方，主要由标题栏、当前家谱卡片和快捷入口覆盖；C 图的亭台、山水与竹影集中承托下方列表和加入申请区。

响应式规则

• 320×568：C 层贴底后接近页头，完整画面覆盖大部分视口。
• 360×640：C 层贴底，顶部只保留较小宣纸区，中央内容区保持可读。
• 360×800、412×915：高屏多出的宣纸区位于上方，C 层稳定承托“我创建的”“我加入的”“加入申请”等下半区。
• 所有尺寸都禁止 aspectFill 和 scaleToFill；C 图片层按原比例显示。
• 背景固定于视口，页面内容继续自然滚动；本轮不改变 G01 固定区／独立滚动结构。

资产与可恢复性

• C 母版和现有确定性构建流程保持不变。
• 不新增任何背景候选或运行资产；继续使用 static/assets/modules/genealogy/opaque/genealogy-page-background.png。
• manifest、构建脚本和测试继续以现有 C 母版为唯一可重建输入。

验证

• 更新公共组件前先写贴底定位失败契约并执行红绿循环。
• G01 在 320×568、360×640、360×800、412×915 下生成真实 H5 截图。
• 同一比较输入中查看 C 母版和实现截图，检查上方宣纸区、贴底位置、裁剪、拉伸、文字对比度和横向溢出。
• 其他 8 个 G 页面至少通过公共背景契约与现有运行 smoke；仍不得据此宣称逐页视觉验收。
• Android/HBuilderX 真机或模拟器复核继续保留为最终验证缺口。

非目标

• 不修改 G 页面内容、卡片、标题栏、路由、接口或状态逻辑。
• 不实施 G01 标题／当前家谱／快捷入口固定和列表独立滚动。
• 不删除 A/B/C 历史母版、未跟踪资产、截图或缓存。