Files
jiapuapp/docs/design/P00_页面结构与资产清单.md
T
2026-07-14 07:01:45 +08:00

149 lines
10 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.
# P00 页面结构与资产清单
> 状态:59 条最终编号路由与第一版统一视觉母版已落地;A01/G01 运行时截图回归及全量逐页视觉精修待办。
> 目的:让页面、路由和资产都有唯一、可读、可审计的归属;本文件是 P-00 的执行清单。
## 1. 页面命名规则
最终页面文件遵循 `<页面编号>-<语义名>.vue`
- 账户:`a01-entry.vue``a02-login.vue`
- 家谱:`g01-my-genealogies.vue``g03-create-genealogy.vue`
- 世系:`t01-tree-overview.vue``t03-member-profile.vue`
- 家族:`f01-family-feed.vue``f02-publish-feed.vue`
- 消息:`n01-message-center.vue`
- 我的:`m01-profile-home.vue`
尚未被全量设计确认、但为了保留现有功能骨架的通用页面,必须在文件名中使用 `skeleton`,不能使用含义不明的 `index.vue``list.vue``detail.vue`
## 2. 首批 15 个路由的历史迁移映射
| 当前路由 | 当前可确认用途 | 目标文件 | 处理状态 |
| --- | --- | --- | --- |
| `pages/auth/a01-entry` | A01 启动/登录引导 | `pages/auth/a01-entry.vue` | 已迁移;视觉冻结;完整按钮资产待补 |
| `pages/auth/a02-login` | A02 账号登录 | `pages/auth/a02-login.vue` | 已迁移;未验收 |
| `pages/genealogy/g01-my-genealogies` | G01 我的家谱 | `pages/genealogy/g01-my-genealogies.vue` | 已迁移;视觉冻结 |
| `pages/genealogy/g03-create-genealogy` | G03 创建家谱 | `pages/genealogy/g03-create-genealogy.vue` | 已迁移;未验收 |
| `pages/genealogy/g04-first-ancestor` | G04 始祖录入 | `pages/genealogy/g04-first-ancestor.vue` | 已迁移;未验收 |
| `pages/genealogy/g05-genealogy-overview` | G05 家谱总览 | `pages/genealogy/g05-genealogy-overview.vue` | 已迁移;未验收 |
| `pages/genealogy/g06-search-genealogies` | G06 公开家谱搜索 | `pages/genealogy/g06-search-genealogies.vue` | 已迁移;未验收 |
| `pages/genealogy/g10-application-review` | G10 管理员入谱审核 | `pages/genealogy/g10-application-review.vue` | 已迁移;未验收 |
| `pages/tree/t01-tree-overview` | T01 世系树总览 | `pages/tree/t01-tree-overview.vue` | 已迁移;未验收 |
| `pages/tree/t03-member-profile` | T03 成员档案 | `pages/tree/t03-member-profile.vue` | 已迁移;未验收 |
| `pages/family/f01-family-feed` | F01 家族动态 | `pages/family/f01-family-feed.vue` | 已迁移;未验收 |
| `pages/family/f02-publish-feed` | F02 发布动态 | `pages/family/f02-publish-feed.vue` | 已迁移;未验收 |
| `pages/notification/n01-message-center` | N01 消息中心 | `pages/notification/n01-message-center.vue` | 已迁移;未验收 |
| `pages/profile/m01-profile-home` | M01 我的首页 | `pages/profile/m01-profile-home.vue` | 已迁移;未验收 |
上述表仅保留首批迁移的历史背景;当前最终 59 路由、文件存在性和中文编号注释的唯一合同是 `tests/full-page-visual-contract.ps1`。临时 `content-list-skeleton` 已由谱文、相册、礼仪、备忘录和字辈诗最终页面替代并移除。
迁移要求:同一轮更新页面文件、`pages.json`、所有跳转路径、测试和中文文件头注释;未完成全部引用更新时,不得删除旧路径。
## 3. 最终资产目录
```text
static/assets/
foundation/
opaque/
page-paper.jpg
auth-page-paper.jpg
auth-header.png
a01-primary-button.png
a01-secondary-button.png
root-header-cinnabar.jpg
transparent/
brand-seal.png
auth-title-cloud.png
auth-divider-knot.png
...
modules/
auth/
opaque/
a02-login-panel.png
genealogy/
opaque/
transparent/
tree/
opaque/
transparent/
family/
opaque/
transparent/
```
当前已迁入的资产以第 4 节台账为准。A01 已使用 `a01-primary-button.png``a01-secondary-button.png` 两张完整按钮皮肤替换旧角标拼接实现;是否维持用户验收效果仍以运行时截图回归为准。
## 4. 当前资产台账
以下为当前唯一可用资产路径。尺寸为原始像素;页面中的显示尺寸仍以组件/页面样式为准。
| 路径 | 属性/尺寸 | 用途 | 引用位置 | 状态 |
| --- | --- | --- | --- | --- |
| `foundation/opaque/auth-page-paper.jpg` | opaque / 750×1334 | 认证页纸纹底色 | A01、A02 | 保留 |
| `foundation/opaque/auth-header.png` | opaque / 750×196 | 认证页红色页头 | A01、A02 | 保留 |
| `foundation/opaque/page-paper.jpg` | opaque / 852×1846 | 根页宣纸底图 | G01 | 保留 |
| `foundation/opaque/root-header-cinnabar.jpg` | opaque / 720×184 | 根页朱砂页头 | `PageHeader` | 保留 |
| `foundation/transparent/auth-ink-scenery.png` | transparent / 750×1334 | 认证页淡墨叠层 | A01、A02 | 保留 |
| `foundation/transparent/auth-title-cloud.png` | transparent / 200×120 | A01 标题左右云纹 | A01 | 保留 |
| `foundation/transparent/auth-divider-knot.png` | transparent / 160×96 | A01 文案分隔结 | A01 | 保留 |
| `foundation/opaque/a01-primary-button.png` | opaque / 1877×418 | A01 朱砂主按钮完整皮肤 | A01 | 保留;待运行截图回归 |
| `foundation/opaque/a01-secondary-button.png` | opaque / 1881×419 | A01 宣纸次按钮完整皮肤 | A01 | 保留;待运行截图回归 |
| `modules/auth/opaque/a02-login-panel.png` | opaque / 940×1672 | A02 完整卷轴登录面板,含纸纹、双金线、角纹、云纹与底部山水 | A02 | 保留;待用户视觉验收 |
| `foundation/transparent/auth-login-outline.png` | transparent / 96×96 | 登录图标 | A01 | 保留 |
| `foundation/transparent/auth-wechat.png` | transparent / 96×96 | 微信图标 | A01 | 保留 |
| `foundation/transparent/brand-seal.png` | transparent / 240×288 | 品牌谱印 | A01、A02、`PageHeader` | 保留 |
| `foundation/transparent/root-header-hall.png` | transparent / 750×300 | 根页祠堂线稿 | `PageHeader` | 保留 |
| `foundation/transparent/footer-mountain-bamboo.png` | transparent / 750×360 | 根页底部山水竹影 | G01 | 保留 |
| `foundation/transparent/notice.png` | transparent / 96×96 | 通知图标 | `PageHeader` | 保留 |
| `foundation/transparent/chevron-right.png` | transparent / 96×96 | 列表右箭头 | `GenealogyCard` | 保留 |
| `foundation/transparent/meta-location.png` | transparent / 96×96 | 地点元信息 | G01、`GenealogyCard` | 保留 |
| `foundation/transparent/meta-member.png` | transparent / 96×96 | 成员元信息 | G01、`GenealogyCard` | 保留 |
| `foundation/transparent/meta-admin.png` | transparent / 96×96 | 管理员元信息 | G01 | 保留 |
| `foundation/transparent/tab-genealogy.png` | transparent / 96×96 | 家谱 Tab 默认态 | `AppTabbar` | 保留 |
| `foundation/transparent/tab-genealogy-active.png` | transparent / 96×96 | 家谱 Tab 选中态 | `AppTabbar` | 保留 |
| `foundation/transparent/tab-family.png` | transparent / 96×96 | 家族 Tab 默认态 | `AppTabbar` | 保留 |
| `foundation/transparent/tab-family-active.png` | transparent / 96×96 | 家族 Tab 选中态 | `AppTabbar` | 保留 |
| `foundation/transparent/tab-profile.png` | transparent / 96×96 | 我的 Tab 默认态 | `AppTabbar` | 保留 |
| `foundation/transparent/tab-profile-active.png` | transparent / 96×96 | 我的 Tab 选中态 | `AppTabbar` | 保留 |
| `modules/genealogy/transparent/current-slip-frame.png` | transparent / 720×272 | 当前家谱题签框 | G01 | 保留 |
| `modules/genealogy/transparent/list-slip-frame.png` | transparent / 720×144 | 家谱列表题签框 | `GenealogyCard` | 保留 |
| `modules/genealogy/transparent/section-divider.png` | transparent / 720×30 | G01 分区金线 | G01 | 保留 |
| `modules/genealogy/transparent/current-seal-frame.png` | transparent / 144×208 | 当前家谱谱印框 | G01 | 保留 |
| `modules/genealogy/transparent/row-seal-frame.png` | transparent / 112×160 | 列表谱印框 | `GenealogyCard` | 保留 |
| `modules/genealogy/transparent/create-cloud.png` | transparent / 192×96 | 新建入口云纹 | G01 | 保留 |
| `modules/genealogy/transparent/add.png` | transparent / 96×96 | 新建入口加号 | G01 | 保留 |
| `modules/genealogy/transparent/shortcut-tree.png` | transparent / 96×96 | 世系图入口 | G01 | 保留 |
| `modules/genealogy/transparent/shortcut-members.png` | transparent / 96×96 | 成员入口 | G01 | 保留 |
| `modules/genealogy/transparent/shortcut-generation-poem.png` | transparent / 96×96 | 字辈诗入口 | G01 | 保留 |
| `modules/genealogy/transparent/shortcut-application.png` | transparent / 96×96 | 审核入口 | G01 | 保留 |
本轮已迁入 35 项在用资产,删除 24 项运行时零引用的旧副本。A01 的两张完整按钮皮肤由图像生成工具制作,不是设计图裁切;它们的原始比例均约为 4.49:1,并由 A01 页面作为单张底层皮肤引用。旧版设计记录中的历史路径不再是资产依据;后续只按本台账引用和维护。
## 5. 图片属性规则
| 类型 | 文件格式与内容 | 典型用途 | 页面使用规则 |
| --- | --- | --- | --- |
| 不透明底图 | JPG 或无透明区域 PNG;包含完整底色、纹理、边框和四角 | 页面纸纹、朱砂页头、完整主/次按钮、卡片、导航 | 直接作为对应区域的完整视觉面,不再靠 CSS 补色或叠加边角 |
| 透明叠加图 | RGBA PNG;四周透明,主体边界干净 | Logo、图标、祥云、谱印、分隔纹、边框 | 明确记录叠在何种不透明底图上;不单独承担底色 |
禁止项:整页截图、设计图局部裁切、半边边框、按钮角标拼接、CSS/SVG 绘制可见装饰、同一语义的多版本长期共存。
## 6. 资产清理登记规则
每项现有资产必须登记以下字段后才可以决定保留或删除:
| 字段 | 含义 |
| --- | --- |
| 当前路径 | 盘点时的真实文件路径 |
| 语义用途 | 它服务的视觉元素,而不是模糊类别 |
| 背景属性 | `opaque``transparent` |
| 代码引用 | 页面、组件、配置或测试中的引用位置 |
| 替代资产 | 若要迁移,写入唯一的新路径;无替代则留空 |
| 决定 | `保留``迁移后删除``无引用删除` |
执行顺序固定为:扫描引用 → 填写登记 → 迁移引用 → 编译与截图验证 → 删除旧资产 → 再次扫描确认零引用。任何一步失败都停止删除。
## 7. 中文注释约定
每个页面和组件文件以中文注释写清页面编号、用途和关键依赖;模板至少区分背景、页头、主体、操作、状态五类区域。资产图层、路由跳转、非直观状态和防回归样式要解释“为什么这样写”。显而易见的单行 CSS 不写噪声注释。