rain
116 lines
12 KiB
Markdown
116 lines
12 KiB
Markdown
# G-01：我的家谱设计记录
|
||
|
||
> 状态：资产准备中
|
||
> 美术锚点：[G01 我的家谱美术锚点](references/G01-我的家谱-美术锚点.png)
|
||
> 布局锚点：[D1 安卓视觉规范与页面壳](D1_安卓视觉规范与页面壳.md#62-g-01-固定设计栅格360--800dp)
|
||
|
||
## 页面目标
|
||
|
||
让已登录用户一眼查看当前家谱、进入四个高频入口、切换已创建 / 已加入家谱，并在无家谱时创建或搜索加入。
|
||
|
||
## 背景组合
|
||
|
||
- 红头：`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](screens/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 新截图完成视觉验收。
|
||
|
||
## 2026-07-13 第七轮结构、屋檐与祥云校正
|
||
|
||
- 当前家谱题签由“谱印 + 右侧文案列”改为两层结构：上层为谱印和名称，下层为金线分隔后的地点、成员数、管理员三组元信息；三组元信息不再受谱印列宽挤压。
|
||
- 家谱列表由独立的左侧内容列与右侧操作列改为单一主内容区：第一行是标题、角色与箭头，第二行是地点、成员数与“更新于”日期；`320px` 宽度仅隐藏日期，保留其余信息。
|
||
- 根页头收窄至 `164rpx`；放大并提高现有祠堂屋檐线稿的可见度，保持其位于 Logo 和标题之后。Tabbar 容器收窄，图标和标签同步提升视觉重量。
|
||
- 内容左右边距收至 `32rpx`，快捷入口到列表的无效留白减少；山水竹影扩展至两条列表和新建按钮后方，仍低于所有文字和操作层。
|
||
- `action/create-cloud-v1.png` 已由独立透明 PNG `action/create-cloud-v2.png` 替换；v2 使用项目生成的古金线描祥云，四角透明且有效图形审计通过，旧资产已移除。
|
||
- 已通过：更新后的 G-01 视觉契约、PNG 透明审计和编译审计。仍待 HBuilderX 的 `360 × 800`、`320 × 568` 截图与 v5 参考稿并排确认，G-01 不标记为设计完成。
|