jiapuapp/docs/superpowers/specs/2026-07-13-g01-v5-visual-alignment-design.md

G01 v5 视觉对齐设计

状态：已获准实施 视觉依据：docs/design/screens/G01-我的家谱-紧凑版设计稿-v5-Tabbar安全区.png

目标与边界

将当前 G01「我的家谱」页面的运行预览校正至 v5 参考稿的比例、信息层级和对比度。本轮只处理可见的正常态页面，不改变路由、交互、data/mock.js 字段、远程接口或 PNG 资产内容。

涉及文件仅限：

• pages/genealogy/index.vue
• components/GenealogyCard.vue
• components/PageHeader.vue
• components/AppTabbar.vue
• tests/g01-visual-contract.ps1
• docs/design/G01_我的家谱_设计记录.md
• docs/规划.md

方案选择

1. 只微调字号和间距：改动最少，但无法让当前题签的元信息跨整行排列，也无法解除列表字段的截断。
2. 局部重排加比例校正（采用）：只重排当前题签的内容区，并对页头、列表、按钮、底栏与背景做 CSS 尺寸校正；保留现有组件职责和所有数据、路由、PNG 引用。
3. 重新绘制整套 PNG：可进一步调整图标墨色，但改动范围大，且现有资产已通过透明度验收；本轮不做。

视觉设计

页头与底栏

• 根页头恢复参考稿的更高红头比例；Logo 与通知 PNG 放大并保持在安全区内，标题下移到红头的视觉中线。
• 祠堂线稿仍为低对比底纹，不新增背景资产。
• Tabbar 收紧容器高度，同时放大 Tab 图标和标签，使其接近参考稿的安全区内视觉重量。

当前家谱题签

• 将题签分成上方“谱印 + 名称”和下方“分隔线 + 三组元信息”两层；元信息横跨题签底部并均匀分布。
• 保留现有谱印框、地点/成员/管理员 PNG 与动态文本；不嵌入文字到图片中。
• 恢复可见的细金线分隔，提升元信息及快捷入口的墨色对比和可读尺寸。

列表、新建按钮与背景

• 列表保留当前纸签框、谱印与右侧角色/箭头的组件边界；调整横向空间分配，使 地点 / 成员数 / 更新于 在 360px 宽度完整显示，320px 时仅隐藏日期。
• 收窄新建按钮，放大“＋ 新建家谱”和两侧云纹的可见面积。
• 扩大底部山水竹影的覆盖范围与可见层次，但保持它在文字和点击区域之下。

验收与验证

1. 先为新的结构与关键尺寸写 G01 静态契约，并确认旧实现失败。
2. 修改组件后运行 g01-visual-contract.ps1、compile-audit.ps1、uni-scss-injection.ps1 和 vue3-entry.ps1。
3. 在 HBuilderX 的 360 × 800 重新截图，并同 v5 参考稿逐区比对：页头、当前题签、快捷入口、两条列表、新建按钮和 Tabbar。
4. 再检查 320 × 568：不重叠、不截断、不被底栏遮挡。截图验收完成前，G-01 保持未完成状态。

自检

• 不含占位项或未定义的视觉来源。
• 组件职责不变：页面负责当前题签和新建按钮，卡片负责列表条目，页头和 Tabbar 保持独立。
• 不保留旧布局的兼容分支；320px 降级规则只隐藏日期，其他参考稿字段仍保留。