jiapuapp/docs/design/G01_我的家谱_设计记录.md

G-01：我的家谱设计记录

状态：资产准备中
美术锚点：G01 我的家谱美术锚点
布局锚点：D1 安卓视觉规范与页面壳

页面目标

让已登录用户一眼查看当前家谱、进入四个高频入口、切换已创建 / 已加入家谱，并在无家谱时创建或搜索加入。

背景组合

• 红头：static/assets/backgrounds/header-hall-lineart.png 叠加朱砂底色。
• 内容纸面：static/assets/backgrounds/paper-rice-texture.jpg。
• 页面底部：static/assets/backgrounds/footer-mountain-bamboo.png，只用于列表尾部与新建按钮附近。

图标资产清单

所有项目完成后均为独立、紧凑的 RGBA 透明 PNG；不能从大图裁切后直接使用。

区域	语义	目标文件	风格	状态
顶部左侧	项目 Logo	brand/jiapu-seal-logo.png	用户确认的家祠 Logo 原图	已确认使用；待页面小尺寸摆放验收
顶部右侧	通知	common/notice-v3.png	古金双线 + 轻云纹	已生成；70 × 94px 主体通过紧凑尺寸检查
列表入口	右箭头	common/chevron-right-v2.png	古金简洁单线	已生成；96 × 96px、RGBA 四角透明、48px 检查通过
快捷入口	世系图	genealogy/tree-v2.png	古金双线简化版	已生成；96 × 96px、RGBA 四角透明、48px 检查通过
快捷入口	家族成员	genealogy/members-v2.png	古金双线简化版	已生成；96 × 96px、RGBA 四角透明、48px 检查通过
快捷入口	字辈诗	genealogy/generation-poem-v2.png	古金双线简化版	已生成；96 × 96px、RGBA 四角透明、48px 检查通过
快捷入口	申请审核	genealogy/application-v2.png	古金双线简化版	已生成；96 × 96px、RGBA 四角透明、48px 检查通过
主操作	新建家谱	action/add-v2.png	古金双线 + 轻云纹	已生成；96 × 96px、RGBA 四角透明、48px 检查通过
底部 Tab	家谱	tab/genealogy-v4.png、genealogy-active-v4.png	简洁谱册 / 世系语义	已生成；同轮廓墨褐 / 朱砂成对导出，96 × 96px、48px 检查通过
底部 Tab	家族	tab/family-v4.png、family-active-v4.png	简洁双人群组语义	已生成；同轮廓墨褐 / 朱砂成对导出，96 × 96px、48px 检查通过
底部 Tab	我的	tab/profile-v4.png、profile-active-v4.png	简洁人物档案语义	已生成；同轮廓墨褐 / 朱砂成对导出，96 × 96px、48px 检查通过

页面完成条件

• 图标资产清单全部生成并在 46rpx / 24dp 下逐个检查。
• 背景组合在 320 × 568 下不遮挡标题、按钮和列表。
• 按固定栅格完成正常态、无家谱态与加载态设计。
• 不存在横线占位、重复家谱层级或无业务含义的颜色差异。

Tabbar 重设计规则

• 当前 static/assets/icons/tab/ 和 static/icons/tab-*.png 的图标不通过验收，不得使用。
• 三个 Tab 重新采用等视觉重量的简洁符号：家谱为“世系关系 / 谱册”语义，家族为“双人群组”语义，我的为“人物档案”语义。
• 三个图标同为 24dp 标准视口、无文字嵌入、无枝叶和云纹等细碎装饰；默认态为墨褐 / 古金描边，选中态为朱砂色的同一图形加粗或填充。
• Logo 是品牌标识，不能拿来代替家谱 Tab 图标；Tab 图标只服务于快速识别目的地。

2026-07-11 当日确认记录

• 当前交接视觉稿：G01-我的家谱-紧凑版设计稿-v5-Tabbar安全区.png。它是明日施工时的美术与布局锚点，不替代真实页面和资产验收。
• 顶部品牌使用项目原有 static/assets/icons/brand/jiapu-seal-logo.png；缩小后固定在左上安全区，避免与居中标题及殿宇线稿争夺视觉焦点。
• 底部 Tabbar 仍然贴合屏幕底部；三个图标和文字整体上移至 Android 手势/三键导航安全区内，标签“家谱 / 家族 / 我的”加大，任何屏幕尺寸下不得被底边裁切。
• 上述确认只锁定 G-01 的方向和版式。真实透明 PNG 图标、背景组合、320 × 568 小屏校验、空状态与加载状态尚未完成，因此 G-01 仍不勾选为设计完成。
• 明日从 G-01 的可施工项开始：先按 D1 规范落实真实图标与背景资产、再还原页面布局；全量页面设计完成前，不恢复接口联调或 Android 打包工作。

2026-07-12 施工记录

• 已完成 G-01 独立图标资产：四个快捷入口、主操作、列表右箭头，以及三组 Tab 默认 / 选中态；全部为 96 × 96px RGBA PNG，四角透明，并按实际 48px 显示尺寸检查。
• 已完成 G-01 首轮页面还原：朱砂祠堂红头、左上原 Logo、条件式消息圆点、宣纸与山水背景、当前家谱题签、快捷入口、已创建 / 已加入列表、空状态、加载状态和 Android 安全区 Tabbar。
• 本页暂时使用 data/mock.js 的展示数据；已移除 G-01 的远程接口调用，接口联调仍按总规划暂停。
• 已通过：g01-visual-contract.ps1、compile-audit.ps1、uni-scss-injection.ps1、vue3-entry.ps1。
• 待完成：在已打开的 HBuilderX 中按 360 × 800、320 × 568 预览并记录无重叠、无底部裁切的证据。完成前不勾选本页“设计完成”条件。

2026-07-12 视觉校正记录

• 用户预览反馈首轮还原与确认稿差异过大。已定位为：祠堂线稿直接铺在红头导致视觉过满，且题签 / 列表使用普通圆角边框而不是确认稿的纸签资产。
• 红头已改为纯朱砂底 + 独立 header-hall-lineart.png 低对比背景层（不透明度 0.22）；Logo 放大并上移，标题与通知保持独立层级。
• 已新增并接入 backgrounds/genealogy-current-slip-frame.png 与 backgrounds/genealogy-list-slip-frame.png；两者为透明 PNG 双金线纸签框，透明角检查通过。
• 此次只修正可见还原偏差，不改变 G-01 的数据、路由和状态范围；仍待用户重新运行后的两组小屏预览确认。

2026-07-12 尺寸校正记录

• 原始品牌 Logo 的透明留白导致顶部显示偏小，已从同一原图无损裁切为 brand/jiapu-seal-logo-header.png 后接入；不改变 Logo 的图形、配色或品牌含义。
• 快捷入口图标由 52rpx 调整为 68rpx；Tab 图标由 48rpx 调整为 56rpx，标签由 24rpx 调整为 28rpx，使实际显示尺寸靠近确认稿。
• 校正后已重新通过 G-01 资产/页面契约、编译审计和 SCSS 注入审计；仍需 HBuilderX 截图作最终视觉依据。

2026-07-12 第三轮背景与栅格校正

• 红头高度由 216rpx 收至 184rpx，改用 backgrounds/header-cinnabar-texture-v2.jpg；祠堂线稿仅作为 0.16 不透明度的独立底纹层。
• 内容左右边距由 32rpx 调整为 48rpx，当前家谱题签高度收至 250rpx，并在快捷入口和列表之间恢复 backgrounds/genealogy-section-divider-v2.png 金线云纹分隔。
• 页面底色改用浅宣纸 backgrounds/paper-rice-texture-v2.jpg；山水竹影改用透明 backgrounds/footer-mountain-bamboo-v2.png 作为整页底部淡层，不再出现矩形背景块；已检查不含绿色像素。
• 标题、分区标题与家谱名称增加宋/楷书本机回退链；题签框统一压为古金 #B58A4B。
• 已通过：G-01 页面/资产契约、编译审计、SCSS 注入审计及页脚透明区域检查。仍待新截图比对，页面不标记为完成。

2026-07-12 第四轮底图与题签边角校正

• 根因核验：genealogy-current-slip-frame.png 与 genealogy-list-slip-frame.png 的四个角均为 Alpha 0；白色直角边并非 PNG 资产本身，而是题签容器在透明镂空角下铺了接近白色的矩形底色。
• 已移除当前家谱题签和两条列表题签的矩形底色，让透明镂空角直接透出宣纸底纹；文字、边框和点击区域不变。
• 已撤回错误的 footer-mountain-bamboo-v2.png（该图是连续实心灰山，无法还原设计稿的淡墨层次），恢复使用带亭、远山和竹影的 footer-mountain-bamboo.png，以 0.48 透明度贴在 Tabbar 上沿，不形成独立灰色矩形带。
• tests/g01-visual-contract.ps1 先新增回归断言并确认旧实现失败，再完成最小改动后通过；仍需在 HBuilderX 的同一设备尺寸下由新截图确认最终观感，G-01 不标记为完成。

2026-07-12 第五轮信息层级与谱印施工

• 施工依据固定为 screens/G01-我的家谱-紧凑版设计稿-v5-Tabbar安全区.png，对应用户箭头指出的谱印、元信息、快捷入口、两条列表和新建按钮；未改接口、路由、页头、背景或 Tabbar。
• 新增并接入透明 PNG：common/location-v1.png、common/member-meta-v1.png、common/admin-v1.png、genealogy/seal-current-frame-v1.png、genealogy/seal-row-frame-v1.png、action/create-cloud-v1.png。谱印框只承载朱砂和金白边框，谱印固定显示“家谱”，家谱名称和数值仍为动态文本。
• 当前家谱改为地点、成员数、管理员三组图标化元信息；快捷入口显示框提升至 82rpx；新建按钮加入两侧云纹 PNG。
• 家谱列表改为谱印框、标题、地点/成员元信息和“更新于”日期的两层结构；320px 小屏隐藏更新时间，优先保证标题、元信息、角色和箭头不重叠。
• 已新增资产透明角/有效图形审计。验证通过：g01-visual-contract.ps1、g01-asset-alpha-audit.ps1、compile-audit.ps1、uni-scss-injection.ps1。待 HBuilderX 新截图与参考稿并排确认后，G-01 才能标记设计完成。

2026-07-12 第六轮参考稿字段与右侧基线校正

• 预览字段已切换为参考稿：当前家谱“汤氏家谱 / 河南·洛阳 / 158 位成员 / 管理员”，已加入家谱“汤氏宗谱 / 山东·济宁 / 286 位成员 / 成员”；不再使用四川、达州、刘氏等旧演示字段。
• 当前题签恢复标题与元信息之间的细金线；短字段确保 430px 验收宽度内三组元信息同一行显示。
• 列表谱印固定为竖排“家谱”；右侧角色与箭头改为同一水平基线；“更新于”保留为文本，移除参考稿中不存在的日历图标和对应闲置资产。
• 新增字段/基线契约先失败后通过。完整验证再次通过：G-01 视觉契约、PNG 透明角审计、编译审计、SCSS 注入审计、Vue 3 入口审计。仍待用户提供 HBuilderX 新截图完成视觉验收。