jiapuapp/docs/superpowers/specs/2026-07-16-g01-fixed-header-independent-list-scroll-design.md

G01 固定信息区与独立列表滚动设计

决定

G01“已有家谱”的正常列表态改为两段式布局：上方信息区固定，下方列表区独立纵向滚动。该决定只作用于 G01，不改变其他 G 页面，也不改变 G01 的业务数据、入口、卡片样式、背景或弹窗。

用户已通过可操作对比稿确认该方向。

固定范围

由上到下固定显示：

1. 红色“我的家谱”标题栏；
2. 当前家谱大卡片；
3. 世系图、成员、字辈诗、申请审核四个快捷入口；
4. 快捷入口下方金色分隔线；
5. 底部三项导航栏。

固定区不随列表滚动，不做折叠、缩放、吸顶动画或滚动渐变。

独立滚动范围

金色分隔线下方到固定底部导航上方为唯一列表滚动区，包含：

• “我创建的”标题及卡片；
• “我加入的”标题及卡片；
• “加入申请”标题及卡片；
• “添加家谱”入口；
• 列表底部安全留白。

三个分组标题随列表一起滚动，不二次吸顶。现有“加入申请”连续卡片继续保持 12rpx 间距。

页面状态规则

仅 hasGenealogies 正常列表态使用两段式布局。

• loading：保持当前页面级加载布局，不创建空的固定区或内部列表滚动区；
• error：保持完整错误面板自然纵向布局；
• empty：保持完整空状态面板自然纵向布局；
• 添加家谱弹层、当前家谱切换层：继续使用全屏固定遮罩，滚动区不得穿透；
• 背景：继续由 GenealogyPageBackground.vue 固定覆盖整页，不进入任何滚动容器。

尺寸与布局

正常列表态使用视口高度和弹性布局分配空间，不按某一台手机写死滚动区像素高度：

• 页面壳占满当前可用视口；
• 标题栏按现有真实状态栏高度占位；
• 底部导航按现有 112rpx + safe-area-inset-bottom 占位；
• 当前家谱、快捷入口和分隔线按现有视觉尺寸占位；
• 剩余空间全部分配给列表滚动区，滚动容器必须得到可计算高度；
• 320×568 不压缩字号、卡片或快捷入口，列表保留约一张半卡片的可视高度并允许自然滚动；
• 360×640、360×800、412×915 以及 412×1000 均不得出现横向溢出、底栏遮挡或列表无法滚动。

滚动反馈与位置规则

• 不把“绝对没有滚动条”写成合同；Android 滑动时允许出现短暂的系统滚动指示条；
• 不专门美化或强制隐藏系统滚动指示条，只验证其不挤压卡片、不造成横向错位；
• 不新增下拉刷新、回弹动画、滚动阴影或底部分页行为；
• 从 G01 打开详情／申请页后返回，保留离开前的列表滚动位置；
• 打开并关闭添加家谱弹层或当前家谱切换层，不改变列表滚动位置；
• 用户切换当前家谱后，列表明确回到顶部，避免继续停留在旧家谱的浏览位置；
• loading、error、empty 与正常态切换时，不错误复用正常列表态的旧滚动位置。

实现边界

• 正常列表态使用单一纵向区域滚动容器；禁止嵌套同方向滚动容器；
• 当前家谱卡、快捷入口和分隔线必须位于区域滚动容器之外；
• 只调整 G01 模板结构、G01 局部样式和直接对应的测试；
• 不修改 PageHeader.vue、AppTabbar.vue、GenealogyPageBackground.vue 或其他 G 页面；
• 不对接接口，不新增全局状态，不改变路由；
• 不使用原生 uni.showToast、uni.showModal、uni.showLoading 或 uni.showActionSheet。

验证合同

静态合同

• 正常列表态存在且只存在一个纵向滚动容器；
• 当前家谱、快捷入口和分隔线位于滚动容器外；
• 三组列表和“添加家谱”入口位于滚动容器内；
• loading、error、empty 不被包进正常态固定结构；
• 未修改其他 G 页面共享组件引用。

H5 运行验证

在 320×568、360×640、360×800、412×915 和 412×1000 下：

1. 滚动列表前后，标题栏、当前家谱卡、快捷入口、分隔线和底部导航的视口位置保持不变；
2. “我创建的”及其后内容发生纵向位移；
3. 可以滚动到最后一个申请卡和“添加家谱”入口；
4. 页面没有横向溢出、滚动穿透或底栏遮挡；
5. 卡片点击、添加家谱弹层、当前家谱切换层、快捷入口保持可操作；
6. 返回 G01 保留列表位置，切换当前家谱后列表回到顶部；
7. 浏览器无异常、资源 404 或 console.error。

仍缺验证

H5 证据不能替代 Android/HBuilderX 真机或模拟器。最终仍需复核 Android 区域滚动手感、短暂系统滚动指示条、惯性、返回现场、状态栏、安全区和 4GB 设备性能。

验收状态边界

本次实现完成后仍只是 G01 新滚动结构的内部 H5 候选。背景方向已由用户确认，但 G01 整页未获得正式验收，不得因此改为 [x] 或冻结。