家谱APP首页样式设计完成，落地80%

2026-07-13 00:23:04 +08:00
commit 1da4d8cf1f
117 changed files with 9476 additions and 0 deletions
@@ -0,0 +1,62 @@
+# 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 宽度装不下，按本文件定义隐藏更新时间，而不是压缩全部文字。