jiapuapp/docs/superpowers/specs/2026-07-12-g01-reference-typography-design.md

G01 参考稿信息层级校正设计

已确认的目标

• 以 docs/design/screens/G01-我的家谱-紧凑版设计稿-v5-Tabbar安全区.png 为唯一视觉基准；不再以当前浏览器页为准缩放设计。
• 本轮只校正用户箭头指出的内容区：当前家谱题签的信息层级、四个快捷入口、分隔线之后的两条列表和“新建家谱”按钮。
• 保留已确认的朱砂页头、宣纸底纹、淡墨山水和底部 Tabbar；不接入接口、不改路由；仅为现有展示用 data/mock.js 家谱条目补充参考稿需要的 updatedAt 日期字段。
• 预览阶段的展示字段必须与参考稿一致：当前家谱为“汤氏家谱 / 河南·洛阳 / 158 位成员 / 管理员”，已加入家谱为“汤氏宗谱 / 山东·济宁 / 286 位成员 / 成员”。视觉验收期间不得保留四川、达州、刘氏等旧演示字段。

方案比较与选择

1. 仅增大现有 CSS 字号和图标容器：改动少，但仍缺地点/成员/管理员图标和更新时间层级，不能还原参考稿。
2. 同时压缩所有内容区：会牺牲旧安卓小屏可读性，也无法解决信息结构错误。
3. 按参考稿重建四个内容区的信息栅格：补齐独立 PNG 元信息图标，放大可见图标和标题字号，使用两行列表元信息与右侧角色列。选此方案。

页面规格

当前家谱题签

• 保持纸签框资产和透明四角；名称为最高层级，使用楷体回退链。
• 左侧“家谱”不是普通红色圆角块：改为独立的竖式朱砂谱印框 PNG，包含参考稿的双层金白描边与红印底；谱印固定显示“家谱”，家谱名称和数值仍由页面数据渲染，不嵌死在图片中。
• 当前家谱谱印比列表谱印更高；两者分别使用对应尺寸的 PNG 框，保持参考稿的层级，不能共用一个拉伸框。
• 元信息改为三组：地点、成员数、管理员；每组由 24dp 的透明 PNG 图标与文字构成，不能再只用文字串联。
• 三组在可用宽度内均匀排列；320px 小屏可换行但不重叠。
• 名称与三组元信息之间保留参考稿中的细金线分隔；在 430px 验收宽度三组必须同一行。

快捷入口与分隔线

• 快捷图标的显示框放大，使实际图形接近参考稿的视觉面积；标签同步提升，四项保持等宽。
• 快捷区与金线云纹分隔线保留明确留白，分区标题不得贴线。

家谱列表

• 每条维持纸签框和透明四角；标题提升为主要信息。
• 左侧使用较小的竖式朱砂谱印框 PNG；已加入家谱可保持低饱和底色，但边框、比例与“我创建的”谱印一致。
• 次行固定为“地点 + 成员数”；右侧固定为“角色 + 箭头”，并在宽屏下补充“更新于日期”。
• 小屏降级时优先保留标题、地点、成员数和角色；更新时间可隐藏，禁止文字压到箭头。
• 角色文字与右箭头使用同一水平基线；日期是文本信息，不增加参考稿中没有的日历图标。
• 列表谱印固定显示竖排“家谱”，不显示动态姓氏；已加入列表使用低饱和谱印状态。

新建按钮

• 保留独立 PNG 加号；放大文字和图标实际显示尺寸。
• 补齐参考稿的左右云纹装饰 PNG，不用 CSS 或文字模拟装饰。

资产与兼容性

• 新增地点、成员、管理员、更新时间和按钮云纹均为项目内 RGBA PNG；图标画布为 96px，并检查四角透明。
• 不用 clip-path、蒙版或其他旧 Android WebView 风险较高的裁切方案。
• 所有布局继续使用 rpx、弹性布局、单行省略和 max-width: 340px 小屏规则。

验收与验证

1. 自动契约先失败：要求新元信息图标、两行列表结构、放大的快捷图标和新建按钮云纹存在；旧的纯文字元信息实现必须不再通过。
2. 完成最小代码与 PNG 资产改动后，运行 G01 契约、编译审计、SCSS 注入审计和 PNG 透明角检查。
3. 使用 HBuilderX 在同一设备尺寸重新截图，与参考稿并排比对：重点确认箭头所指的字号、间距、图标面积、列表行高与按钮装饰。

自检

• 无占位项、无接口或路由扩展。
• 唯一视觉来源是已确认的 G01 v5 参考稿；本轮没有重设颜色、背景或页面功能。
• 若 320px 宽度装不下，按本文件定义隐藏更新时间，而不是压缩全部文字。