docs: revise G01 visual alignment scope

2026-07-13 09:24:54 +08:00
parent 85ee447040
commit 5b828eb0fd
1 changed files with 20 additions and 17 deletions
@@ -1,11 +1,11 @@
 # G01 v5 视觉对齐设计

-> 状态：已获准实施
+> 状态：根据最新预览反馈修订，待确认
 > 视觉依据：`docs/design/screens/G01-我的家谱-紧凑版设计稿-v5-Tabbar安全区.png`

 ## 目标与边界

-将当前 G01「我的家谱」页面的运行预览校正至 v5 参考稿的比例、信息层级和对比度。本轮只处理可见的正常态页面，不改变路由、交互、`data/mock.js` 字段、远程接口或 PNG 资产内容。
+将当前 G01「我的家谱」页面的运行预览校正至 v5 参考稿的比例、信息层级和对比度。本轮只处理可见的正常态页面，不改变路由、交互、`data/mock.js` 字段或远程接口；仅为“新建家谱”更换一个参考稿匹配的透明祥云 PNG。

 涉及文件仅限：

@@ -13,6 +13,7 @@
 - `components/GenealogyCard.vue`
 - `components/PageHeader.vue`
 - `components/AppTabbar.vue`
+- `static/assets/icons/action/create-cloud-v2.png`
 - `tests/g01-visual-contract.ps1`
 - `docs/design/G01_我的家谱_设计记录.md`
 - `docs/规划.md`
@@ -20,38 +21,40 @@
 ## 方案选择

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

 ## 视觉设计

-### 页头与底栏
+### 页头、屋檐与底栏

- 根页头恢复参考稿的更高红头比例；Logo 与通知 PNG 放大并保持在安全区内，标题下移到红头的视觉中线。
- 祠堂线稿仍为低对比底纹，不新增背景资产。
+- 根页头从当前比例收窄；Logo、标题与通知仍保留各自安全区，标题置于缩窄后红头的视觉中线。
+- 放大现有 `header-hall-lineart.png` 的覆盖面积并提高不透明度，使屋檐在页头左下可辨识，同时不遮挡 Logo 和标题；不新增祠堂背景资产。
 - Tabbar 收紧容器高度，同时放大 Tab 图标和标签，使其接近参考稿的安全区内视觉重量。

-### 当前家谱题签
+### 当前家谱题签与页面间距

- 将题签分成上方“谱印 + 名称”和下方“分隔线 + 三组元信息”两层；元信息横跨题签底部并均匀分布。
+- 将题签分成上方“谱印 + 名称”和下方“分隔线 + 三组元信息”两层；元信息横跨题签底部并均匀分布，而不是挤在名称右侧。
 - 保留现有谱印框、地点/成员/管理员 PNG 与动态文本；不嵌入文字到图片中。
 - 恢复可见的细金线分隔，提升元信息及快捷入口的墨色对比和可读尺寸。
+- 内容区水平边距从当前偏宽的值缩小，题签、列表和分隔线使用同一对齐线；快捷入口与列表之间只保留参考稿需要的留白。

 ### 列表、新建按钮与背景

- 列表保留当前纸签框、谱印与右侧角色/箭头的组件边界；调整横向空间分配，使 `地点 / 成员数 / 更新于` 在 360px 宽度完整显示，320px 时仅隐藏日期。
- 收窄新建按钮，放大“＋ 新建家谱”和两侧云纹的可见面积。
+- 列表从“左侧内容列 + 独立右侧列”改为单一主内容区：第一行是 `标题 / 角色 / 箭头`，第二行是 `地点 / 成员数 / 更新于`。这让日期可借用角色下方空间，360px 宽度完整显示，320px 时仅隐藏日期。
+- 收窄新建按钮，放大“＋ 新建家谱”与两侧云纹的可见面积。以独立的 `create-cloud-v2.png` 替换当前与参考稿不一致的 `create-cloud-v1.png`；新资产为紧凑 RGBA 透明 PNG，并在确认没有其他消费者后移除旧资产。
 - 扩大底部山水竹影的覆盖范围与可见层次，但保持它在文字和点击区域之下。

 ## 验收与验证

-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` 保持未完成状态。
+1. 先为题签两层结构、列表两行结构、新祥云 PNG 与关键尺寸写 G01 静态契约，并确认旧实现失败。
+2. 生成、检查并接入 `create-cloud-v2.png`；确认四角透明、有效图形紧凑，且旧祥云 PNG 没有剩余消费者。
+3. 修改组件后运行 `g01-visual-contract.ps1`、`g01-asset-alpha-audit.ps1`、`compile-audit.ps1`、`uni-scss-injection.ps1` 和 `vue3-entry.ps1`。
+4. 在 HBuilderX 的 `360 × 800` 重新截图，并同 v5 参考稿逐区比对：页头屋檐、当前题签、快捷入口、两条列表、新建按钮和 Tabbar。
+5. 再检查 `320 × 568`：不重叠、不截断、不被底栏遮挡。截图验收完成前，`G-01` 保持未完成状态。

 ## 自检

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