From 85ee447040f6121ce8601491e688ec5934cf32b1 Mon Sep 17 00:00:00 2001 From: rain Date: Mon, 13 Jul 2026 09:19:28 +0800 Subject: [PATCH] docs: define G01 v5 visual alignment --- ...26-07-13-g01-v5-visual-alignment-design.md | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 docs/superpowers/specs/2026-07-13-g01-v5-visual-alignment-design.md diff --git a/docs/superpowers/specs/2026-07-13-g01-v5-visual-alignment-design.md b/docs/superpowers/specs/2026-07-13-g01-v5-visual-alignment-design.md new file mode 100644 index 0000000..f9ec083 --- /dev/null +++ b/docs/superpowers/specs/2026-07-13-g01-v5-visual-alignment-design.md @@ -0,0 +1,57 @@ +# G01 v5 视觉对齐设计 + +> 状态:已获准实施 +> 视觉依据:`docs/design/screens/G01-我的家谱-紧凑版设计稿-v5-Tabbar安全区.png` + +## 目标与边界 + +将当前 G01「我的家谱」页面的运行预览校正至 v5 参考稿的比例、信息层级和对比度。本轮只处理可见的正常态页面,不改变路由、交互、`data/mock.js` 字段、远程接口或 PNG 资产内容。 + +涉及文件仅限: + +- `pages/genealogy/index.vue` +- `components/GenealogyCard.vue` +- `components/PageHeader.vue` +- `components/AppTabbar.vue` +- `tests/g01-visual-contract.ps1` +- `docs/design/G01_我的家谱_设计记录.md` +- `docs/规划.md` + +## 方案选择 + +1. 只微调字号和间距:改动最少,但无法让当前题签的元信息跨整行排列,也无法解除列表字段的截断。 +2. **局部重排加比例校正(采用)**:只重排当前题签的内容区,并对页头、列表、按钮、底栏与背景做 CSS 尺寸校正;保留现有组件职责和所有数据、路由、PNG 引用。 +3. 重新绘制整套 PNG:可进一步调整图标墨色,但改动范围大,且现有资产已通过透明度验收;本轮不做。 + +## 视觉设计 + +### 页头与底栏 + +- 根页头恢复参考稿的更高红头比例;Logo 与通知 PNG 放大并保持在安全区内,标题下移到红头的视觉中线。 +- 祠堂线稿仍为低对比底纹,不新增背景资产。 +- Tabbar 收紧容器高度,同时放大 Tab 图标和标签,使其接近参考稿的安全区内视觉重量。 + +### 当前家谱题签 + +- 将题签分成上方“谱印 + 名称”和下方“分隔线 + 三组元信息”两层;元信息横跨题签底部并均匀分布。 +- 保留现有谱印框、地点/成员/管理员 PNG 与动态文本;不嵌入文字到图片中。 +- 恢复可见的细金线分隔,提升元信息及快捷入口的墨色对比和可读尺寸。 + +### 列表、新建按钮与背景 + +- 列表保留当前纸签框、谱印与右侧角色/箭头的组件边界;调整横向空间分配,使 `地点 / 成员数 / 更新于` 在 360px 宽度完整显示,320px 时仅隐藏日期。 +- 收窄新建按钮,放大“+ 新建家谱”和两侧云纹的可见面积。 +- 扩大底部山水竹影的覆盖范围与可见层次,但保持它在文字和点击区域之下。 + +## 验收与验证 + +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` 保持未完成状态。 + +## 自检 + +- 不含占位项或未定义的视觉来源。 +- 组件职责不变:页面负责当前题签和新建按钮,卡片负责列表条目,页头和 Tabbar 保持独立。 +- 不保留旧布局的兼容分支;320px 降级规则只隐藏日期,其他参考稿字段仍保留。