Files
jiapuapp/docs/superpowers/specs/2026-07-13-full-page-visual-delivery-design.md
T
2026-07-14 07:01:45 +08:00

62 lines
4.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 59 页面视觉全量交付设计
> 状态:用户已于 2026-07-13 确认“先全部完成、再集中修改”。
> 交付窗口:2026-07-13 至 2026-07-17;本文件是本窗口内页面视觉范围与完成标准的唯一依据。
## 目标
在 7 月 17 日前,让 `docs/规划.md` 所列 59 个页面/状态单元全部拥有已注册路由、统一的 Android 移动端视觉样式、可浏览的本地内容和主要操作反馈;后续再根据集中截图逐页精修。
## 明确边界
- 交付的是前端视觉与本地交互:不接真实登录、短信、微信、上传、支付、接口或 Android 打包。
- A01 和 G01 是已验收的视觉基准,本窗口不改变其可见结构。
- 当前 15 个页面保留已有可用流程并统一视觉;另建 44 个规划缺失页面与路由。
- 页面中的数据为本地示例数据;没有后端数据时仍必须呈现正常、空或待接入状态中的一种。
- 不把整页设计图或截图裁切后当页面;可见装饰继续复用项目内的纸纹、朱砂页头、山水、谱印、题签、云纹和图标资产。
## 单一视觉系统
所有新页面遵循已验收的 A01/G01 语言:暖宣纸底、朱砂主操作、古金边框与分隔、墨褐主文字、淡墨山水底部留白。母版不是低保真的同一张卡片复制:每一套都有独立的页头、内容节奏、信息卡比例、空状态和操作区;页面再按自身内容组合它们。页面只允许以下六类母版,不为每个页面另起画风:
| 母版 | 适用页面 | 共同结构 |
| --- | --- | --- |
| 认证页 | A02-A06 | 认证页头、宣纸背景、居中表单/状态卡、主按钮 |
| 家谱列表与详情 | G02-G12 | 朱砂页头、题签、信息卡、分区标题、底部导航 |
| 表单与编辑 | G03-G04、T04-T06、F02/F06/F09、R04/R07、M02-M05/M07 | 返回页头、宣纸表单卡、分组字段、固定主操作 |
| 成员与档案 | T01-T08、R01-R02、R08-R11 | 人物题签、关系/时间内容卡、筛选或操作条 |
| 家族内容 | F01-F10 | 内容头图/分类、动态卡或图文列表、发布入口 |
| 个人与消息 | N01-N02、M01-M10 | 个人信息题签、设置列表、消息/状态卡 |
精致完成的最低要求是:每个母版有明确的主视觉层级、两种以上内容卡层级、专属空状态/操作状态和与内容匹配的留白;同一模块中的列表、详情、编辑页面在版式上可识别为同一产品,但不能仅替换标题和文案。
仅在至少两个页面复用时新增公共组件;组件只负责页面壳、顶部栏、题签/分区标题、纸纹卡片、表单行和空状态,页面自己的业务文案与列表仍留在页面内。
## 页面覆盖范围
按规划的七个模块交付:账户 A01-A06(6)、家谱 G01-G1212)、世系 T01-T088)、家族 F01-F1010)、人物礼仪档案 R01-R1111)、消息 N01-N022)、个人中心 M01-M10(10),合计 59 个单元。组合描述的单元(例如 R01-R02)按规划拆为独立路由并共用同一母版。
## 执行节奏
| 时间 | 可见交付 |
| --- | --- |
| 7 月 13 日 | 建立页面壳/母版与完整 59 路由清单;完成账户、家谱模块样式与已存在页面的统一接入。 |
| 7 月 14 日 | 完成世系、家族内容模块样式与页面。 |
| 7 月 15 日 | 完成人物礼仪档案、消息、个人中心模块样式与页面。 |
| 7 月 16 日 | 补全每页的空/待接入可见状态,统一导航、间距、字体、主按钮与安全区。 |
| 7 月 17 日 | 集中四尺寸检查、修正可见溢出/遮挡/断链,并交由用户开始逐页精修。 |
## 页面完成标准
一个页面/状态单元只有同时满足以下条件才算本轮完成:
1.`pages.json` 有编号语义化路由,页面文件存在且带中文用途注释。
2. 进入后有完整视觉层级,不出现浏览器默认样式、裸白背景、无主题按钮或无内容占位。
3. 主操作、返回或底部导航有本地反馈;未接功能明确显示“功能待接入”,不伪造成功。
4. 在 320×568、360×640、360×800、412×915 下允许纵向滚动且不被安全区/固定操作遮挡。
5. 新增路由、跳转、组件和本轮资产通过编译、路由检查和 `git diff --check`
## 验收方式
本窗口采用“模块完成即自检、全量完成后集中截图”的方式;不在每个页面之间等待人工截图。用户在 7 月 17 日后按页面提出视觉修改,修改只影响被指出的页面或已确认的公共母版。