rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改未完成

Browse Source
This commit is contained in:
rain
2026-07-13 17:31:05 +08:00
parent 965fff1621
commit 355f47976a
95 changed files with 1112 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design/D1_安卓视觉规范与页面壳.md
+52 -255
View File
@@ -1,272 +1,69 @@
# D1：安卓视觉规范与页面壳
# D1 安卓视觉地基规范
> 对应《规划》：P-02、P-03、P-04
> 适用范围：Android 手机端全部页面
> 设计锚点：用户提供的“汤氏家谱世系图”参考图
> 状态：P-00 实施中。
> 本文件是 Android 页面视觉、资产与公共组件的唯一施工规范；与历史设计记录冲突时，以本文件和用户最新确认优先。
## 1. 设计锚点与不可偏离项
## 1. 冻结视觉锚点
参考图不是只借用“红色”，而是整套视觉语言的依据。后续每一页必须具备以下共性：
- A01 启动／登录引导：`screens/A01-启动登录引导-栅格验收-412x915.png`
- G01 我的家谱：`screens/G01-我的家谱-紧凑版设计稿-v5-Tabbar安全区.png`
1. **家祠红头图**：核心家谱页面使用朱砂红顶部，左侧为低对比古建筑线描，标题使用金色或暖白色。
2. **宣纸正文区**：主内容始终落在暖白纸面上，背景只允许极浅的山峦、竹影、亭台或纸纤维纹理，不能影响文字阅读。
3. **墨字与古金线**：正文使用墨褐色，分隔、牌位、题签和次级结构使用古金细线。
4. **礼制化状态**：当前选中、重要操作与未读提醒使用朱砂；不可用荧光色、大面积渐变或通用蓝色按钮替代。
5. **牌位不是卡片**：世系树、人物录核心信息使用竖式牌位；其他列表保留纸签和金线的秩序感，不能变成白底大圆角信息卡。
两页已获用户验收。P-00 可以重整文件、组件和资产路径，但在 412 × 915 下不得改变两页可见布局、色彩、纹样、按钮或背景组合。
### 1.1 一比一还原的验收定义
## 2. 视觉语言
“一比一”指以参考图为唯一视觉锚点，不能只借用红色后另行发挥。以 `360 × 800dp` 设计画布验收时，必须同时还原：朱砂红头的高度与留白、祠堂线描的位置和低对比度、金色标题比例、宣纸与山水底纹、古金牌位线框、朱砂选中描边、纸面底部抽屉与底部导航的层级效果。
不同业务页的内容结构可以不同，但不能把世系图页面原样复制到每个页面；它们必须在同一套材质、颜色、字体、线框和动效逻辑中变化。为适配 `320 × 568` 等小屏，元素可流式换行或缩放，**不得**为追求固定像素而造成重叠或不可点击。
每张后续设计稿都要和参考图并排核对上述八项；没有通过核对，不能标为设计完成。
## 2. Android 基础尺寸
设计坐标以 `750rpx` 宽度为基准。实现时允许流式收缩，但不得缩小关键点击区。
| 元素 | 设计值 | 小屏规则 |
| --- | ---: | --- |
| 页面左右安全边距 | `32rpx` | `320px` 小屏可缩至 `24rpx`。 |
| 页面标题 | `34rpx` | 不换成两行；长标题使用省略号。 |
| 主标题 | `48rpx` | 家谱名最大两行，超出截断。 |
| 正文 | `28rpx` | 不低于 `24rpx`。 |
| 辅助文字 | `24rpx` | 仅用于时间、状态、说明。 |
| 主按钮高度 | `88rpx` | 最小点击高度，不因小屏减小。 |
| 图标触控框 | `88rpx × 88rpx` | 图标视觉大小可为 `40–48rpx`。 |
| 列表行高度 | `104rpx` 起 | 多行信息自动增高。 |
| 底部操作栏 | `128rpx` 起 | 加系统导航保底内边距。 |
## 3. 色彩、字体与图标
### 3.1 色彩
| Token | 色值 | 使用位置 |
| --- | --- | --- |
| `paper-page` | `#F6F0E5` | 页面整体纸底。 |
| `paper-surface` | `#FFF9EE` | 抽屉、表单、列表承载面。 |
| `cinnabar` | `#A33B2B` | 主操作、选中描边、徽章。 |
| `cinnabar-deep` | `#7E251C` | 顶部红底的层次和按下态。 |
| `ink` | `#342A24` | 标题、主正文。 |
| `ink-muted` | `#7A6958` | 次级正文、时间。 |
| `antique-gold` | `#B58A4B` | 牌位描边、细分割线、装饰。 |
| `gold-soft` | `#E4D4B8` | 弱分割线、未选中轮廓。 |
| `danger` | `#B63A2C` | 删除、审核拒绝；不额外引入鲜红。 |
绿色不进入页面的背景、导航、主按钮或状态色。若用户照片中含绿色，保持原图，不再叠加绿色 UI 元素。
### 3.2 字体
- 页面标题、家谱名、人物姓名：系统衬线回退链 `serif`；仅用于短标题和牌位姓名，体现家谱的书卷感。
- 正文、表单、数字、按钮：Android 系统无衬线字体 `sans-serif`；优先保证低版本设备的字形和行高稳定。
- 不下载网络字体，不依赖单一厂商字体，不用细于常规字重的中文字体。
- 姓名为两至四字时居中竖排；超过四字改为横排或两行，禁止压缩字距造成难读。
### 3.3 透明 PNG 图标规范
- 图标文件一律是 RGBA PNG，四角透明；不把乳白或绿色底色烘焙进图标。
- 功能图标以官方 `24dp × 24dp` 视口为唯一留白标准，导出为 `96 × 96px`（4 倍）透明 PNG；不得再从大幅生成图中裁出图标、不得人为叠加 `25%` 以上的额外空白。图标的边距只保留官方图形本身的标准边距。
- 正常态使用墨褐或古金单色；选中态使用朱砂；不使用渐变、投影或多色填充。
- 图标命名采用 `功能-状态.png`，例如 `tree-active.png`、`notice-default.png`、`profile-active.png`。
- 首批需要的图标：返回、搜索、更多、通知、家谱、家族、我的、世系图、列表、编辑、新增、相册、礼仪、消息、设置、关闭。
### 3.4 资产优先规则
- 所有具备明确动作或状态的元素必须使用透明 PNG 图标：导航、返回、搜索、通知、更多、关闭、编辑、新增、上传、相册、成员、世系、礼仪、设置、删除、分享、点赞、评论。
- 禁止使用 Emoji、Unicode 符号、临时文字（例如“返回”“更多”）替代功能图标；功能图标旁的文字仅用于解释，不承担唯一识别职责。
- 文字只保留在用户必须阅读或选择的内容上：页面标题、家谱名称、成员资料、表单标签、状态说明与按钮动作。
- 每一个图标必须有默认态与需要时的选中态；选中态仅改变为朱砂色，不改变图形轮廓，保证低端 Android 设备上也能一眼识别。
- **后续强制规则**：任何后续页面设计中新增加的图标，必须同步生成对应的 RGBA 透明 PNG，保存到项目 `static/assets/icons/` 后才能将该页面标记为“设计完成”。设计图中的图形、文字占位、Emoji 或系统默认图标均不能替代实际资产。
- 每个新增图标都要在资产清单登记：用途、文件路径、默认 / 选中状态、设计页编号和透明背景检查结果；页面实现只能引用清单中的已验收资产。
### 3.4.3 第三方平台品牌标识
- 微信、支付宝、QQ 等已有成熟品牌标识不重新设计、不改色；仅在页面确有对应登录、支付或分享入口时使用。
- 资产可从品牌官方渠道或许可的素材来源下载为透明背景 PNG，但必须保存到项目 `static/assets/icons/` 后由页面本地引用；不使用远程 URL，不从截图或大图裁切。
- 每个引入的第三方 PNG 必须记录来源、用途、文件路径与透明角检查结果；若品牌方更新使用规则或要求停用，应替换或移除该资产。
### 3.4.1 功能图标的标准骨架与视觉风格
- Android / Material 的在线规范用于锁定**图标语义、24dp 视口、触控区、默认 / 选中状态和可识别性**，不是要求本项目的每个图标都长成默认黑色 Material 图标。
- 项目 Logo、祠堂纹样、宣纸、山水竹影属于品牌与背景插画，可以定制生成；顶部和通用操作图标允许采用本项目的“古金双线 + 克制云纹收口”风格，风格锚点见 [公共操作图标风格锚点](references/公共操作图标-风格锚点.png)。
- 自定义图标仍须保留标准语义：返回一眼识别为左箭头、搜索为放大镜、通知为铃铛、更多为三点、关闭为 X；不得因装饰而改变动作含义。
- 底部导航固定为三项且每项同时显示图标与短标签：`家谱`、`家族`、`我的`。现有 Tab 图标不通过验收，必须重设计为等视觉重量的简洁轮廓；不能出现云纹、枝叶和双层复杂装饰。选中项使用同一图形的朱砂色与填充 / 加粗状态，非选中项用墨褐或古金描边。
- 顶部与通用操作采用标准语义：返回、搜索、通知、更多、关闭、新增、编辑、上传、删除、分享、设置。图标可定制风格，但不以文字、Emoji 或难以识别的自造图形替代。
### 3.4.2 按钮图标风格分级
- **大部分按钮与顶部操作**：返回、搜索、通知、更多、关闭、新增、编辑、上传、删除、分享、设置，以及家谱 / 家族模块中的快捷入口，采用“古金双线 + 轻云纹收口”风格。
- **主操作按钮**：图标可置于“新建家谱、保存、发布、提交”等文字前；图标为古金双线简化版，按钮本身仍以朱砂描边或朱砂实底表达主次，不用纯文字按钮。
- **底部 Tab**：不得直接使用复杂云纹版本；使用更简洁的同色系轮廓，优先保证 24dp 识别度和三个目的地的差异。
- **状态与危险操作**：成功、失败、删除、无权限等不使用花纹干扰信息；保留标准清晰的符号，颜色按状态区分。
> 来源依据：Google Material Symbols 官方库提供适用于 Android 的 PNG / SVG 图标、`FILL` 状态轴和 20–48dp 光学尺寸；Android 官方将导航栏用于 3–5 个同等级目的地。项目以这些规则做底线，并在其上保留家祠卷轴的视觉个性。
### 3.5 图标资产清单与路径
所有最终资产均保存在 `static/assets/icons/`，由页面直接引用；不使用在线 URL。
| 资产组 | 文件 | 状态 |
| --- | --- | --- |
| 项目标识 | `brand/jiapu-seal-logo.png` | 自定义生成，待缩小尺寸验收 |
| 顶部操作 | `common/back.png`、`common/search.png`、`common/notice.png`、`common/more.png`、`common/close.png` | 保留已确认的古金双线风格，待逐个紧凑导出 |
| 底部导航 | `tab/genealogy.png`、`tab/family.png`、`tab/profile.png` 及各自 `-active.png` | 待按标准 24dp 语义重绘为简洁同风格版本 |
| 家谱操作 | `genealogy/tree.png`、`members.png`、`generation-poem.png`、`application.png`、`create.png`、`edit.png` | 页面设计时按 Material Symbols 官方源导出 |
| 家族内容 | `family/feed.png`、`article.png`、`album.png`、`ceremony.png`、`gift.png`、`archive.png` | 页面设计时按 Material Symbols 官方源导出 |
| 通用操作 | `action/add.png`、`upload.png`、`delete.png`、`share.png`、`like.png`、`comment.png`、`setting.png` | 待按古金双线风格逐个紧凑导出 |
### 3.5 已否决的资产（不得引用）
`static/assets/icons/common/`、`static/assets/icons/tab/`、`static/assets/icons/action/` 当前是从大幅绿色底图裁切的原始试验文件，仍不得直接引用。其问题是**画布和缩放方式**，不是用户已确认的顶部操作图标美术方向。
**根因记录**：这些文件来自带大块绿色空白的 3 × 2 AI 图稿，再按格子裁切；生成图没有稳定的标准视口，导致图标周围出现过多空白、主体大小不一致。顶部操作图标的古金双线与轻云纹风格保留；Tab 图标的复杂枝叶、过多装饰和不统一轮廓不保留。
**新生产方式**：每个图标单独制作并紧凑导出到 `96px` PNG，实际图形占官方 24dp 视口的正常范围；不得再批量盲裁。顶部 / 操作图标以风格锚点为准，Tab 按简洁语义重新制作。每个文件在 `46rpx` 实际显示尺寸检查后才可引用。
### 3.6 功能图标验收
功能图标只有同时满足以下条件，才可标记为“已生成”：
1. 语义、视口与状态符合 Google Material Symbols / Android 规范；若为本项目定制图标，记录其对应的标准语义与风格锚点。
2. 默认 / 选中态为同一语义符号，保持 `24dp` 标准画布与固定留白；不得改变动作含义来冒充选中态。
3. 项目内文件为 RGBA 透明 PNG，四角透明；默认墨褐、选中朱砂；在纸白底和红头上均满足清晰可见。
4. 在 `46rpx` Tab 显示尺寸及 `320 × 568` 小屏中检查可识别性、标签不换行、点击区不小于 `88rpx`。
### 3.7 背景资产规则
- 所有装饰性背景都必须生成并保存在项目 `static/assets/backgrounds/`；禁止依赖网络背景图，也不能只用临时 CSS 渐变假装纸纹。
- 背景分层使用：`header-hall-lineart.png` 用于朱砂顶部；`paper-rice-texture.jpg` 用于宣纸底；`footer-mountain-bamboo.png` 用于页面底部的淡山水竹影。页面按需组合，不把它们烘焙成一张全屏超大图。
- 祠堂线描、山水、竹影等叠加背景应使用透明 PNG；宣纸纸纹使用压缩后的 JPG。所有背景必须无文字、无 Logo、无人物、无绿色调。
- 为兼容老款 Android：顶部纹样显示尺寸不超过 `750 × 288rpx`，底部山水显示尺寸不超过 `750 × 360rpx`；背景只在首屏和固定区域加载，不在长列表中重复解码。
- 背景完成验收需检查：`320 × 568` 下不遮挡标题或操作、纸纹不影响文字对比度、图片已压缩到适合移动端的尺寸。
- **页面背景完成条件**：每一个页面必须在其设计记录中写清“红头 / 纸纹 / 山水竹影 / 侧边竹影 / 无”的组合与对应资产路径；没有背景组合的页面不得标记为“设计完成”。背景可以复用基础资产，但不能是未设计的纯色空白页面或临时 CSS 渐变。
| 页面类型 | 必须使用的背景组合 |
| 元素 | 规则 |
| --- | --- |
| 家谱总览、世系树、成员档案 | 朱砂红头 + 祠堂线描 + 宣纸纸纹；底部或抽屉使用淡山水竹影。 |
| 家族动态、谱文、相册、礼仪、消息 | 紧凑朱砂题签 + 宣纸纸纹；内容尾部按需叠加竹影或山水。 |
| 创建、编辑、申请、设置、反馈 | 紧凑题签 + 宣纸纸纹；表单区域保持干净，不让山水压住输入内容。 |
| 登录、注册、找回密码 | 独立生成的红头 / 纸纹欢迎背景；不能直接复用列表页大山水。 |
| 无数据、失败、审核中 | 宣纸纸纹 + 对应低对比卷轴 / 印章背景资产；不能只显示文字。 |
| 页面基调 | 暖宣纸、朱砂、古金、墨褐、淡墨山水／竹影；禁止绿色页面背景。 |
| 文字 | 标题与重要文字用楷体语气；正文首先保证 Android 小屏可读性。 |
| 主操作 | 朱砂完整按钮图片，含自身纹理、边框与四角；不可由 CSS 色块和零散图片拼装。 |
| 次操作 | 纸白完整按钮图片，含自身金边、四角与纹理；不可借用主按钮角标。 |
| 页面背景 | 使用完整不透明纸纹／页头／面板图片，必要时可叠加透明山水或竹影 PNG；不能使用截图拼接。 |
| 装饰 | 云纹、谱印、分隔纹、图标、边框均为透明 PNG；不使用 CSS／SVG 临时绘制。 |
| 背景资产 | 路径 | 用途 | 状态 |
| --- | --- | --- | --- |
| 祠堂线描 | `backgrounds/header-hall-lineart.png` | 家谱红头左侧或底部纹样 | 生成中 |
| 宣纸纸纹 | `backgrounds/paper-rice-texture.jpg` | 全局纸面底色 | 未生成 |
| 山水竹影 | `backgrounds/footer-mountain-bamboo.png` | 列表页、抽屉页底部装饰 | 未生成 |
## 3. 资产分类与目录
## 4. 公共页面壳
所有最终资产放在 `static/assets/`，路径必须表达所属范围、背景属性和语义：
### 4.1 核心家谱页面壳
```text
static/assets/
foundation/
opaque/ # 自带底色／纹理：纸纹、页头、完整按钮、卡片、导航
transparent/ # 透明 PNG：Logo、图标、云纹、边框、分隔纹
modules/
genealogy/
opaque/
transparent/
tree/
opaque/
transparent/
family/
opaque/
transparent/
```
适用于：家谱总览、世系图、成员目录、人物档案。
- `opaque` 资产不能依赖页面 CSS 背景色才显示完整外观。
- `transparent` 资产必须是 RGBA PNG；其使用位置要在资产清单中写明宿主不透明底图。
- 每项资产都在 P00 清单中登记用途、显示尺寸、引用组件、引用页面和保留／删除状态。
- 不再创建长期使用的 `-v1`、`-v2`、`-source`、`-copy` 文件；同一语义只保留一个已验收版本。
- 顶部采用 `124rpx` 的可视朱砂导航区，外层始终额外预留真实系统状态栏高度；左下放置低对比祠堂屋檐线描，禁止使用满屏建筑照片。
- 自定义顶部统一使用 `height: calc(124rpx + var(--status-bar-height, 0px))` 与同等 `padding-top`；纸纹或内容背景的起点使用同一计算值，不能让状态栏挤压 Logo、标题或通知入口。
- 根页面左上角放项目 Logo（祠堂屋檐 + “谱”字印章，透明 PNG，视觉 `40rpx`、触控区 `88rpx`）；详情页该位置优先保留返回按钮，Logo 收入建筑纹样中的小印记。
- 搜索、通知、更多均为 `88rpx` 触控框；图标为暖白或金色线稿 PNG。通知铃铛仅在未读消息数大于 0 时显示朱砂小圆点；未读为 0 时不显示圆点和数字。
- 家谱名称位于视觉中心，最大两行；名称下可放地域或代系提示，但不能与图标重叠。
- 红头结束后立即进入纸面 Tab/分段导航，使用古金底线标记当前项。
## 4. 页面与组件
### 4.2 普通列表与详情页面壳
- 页面文件：`<页面编号>-<语义名>.vue`；没有确认页面编号的临时骨架要标明 `skeleton`，不能伪装成完成页面。
- 公共组件只收纳已被两个或以上确认页面使用的稳定结构：页面纸纹壳、顶部栏、底部导航、完整图片按钮、完整图片卡片、状态容器。
- 页面与组件开头写中文用途注释；模板按背景、页头、主体、操作、状态分段；资产图层和复杂交互写中文约束说明。
- CSS 只负责布局、尺寸、文字、可见／隐藏与交互状态；不能再用 CSS 绘制边角、金线、云纹、分隔结、纸纹、按钮或卡片外观。
适用于：家族动态、谱文、相册、人物录、礼仪、消息、我的。
## 5. Android 约束
- 顶部使用 `144–176rpx` 紧凑朱砂题签，保留建筑线描的局部纹样。
- 内容区采用纸白承载面与古金细分割线，列表项不使用夸张圆角；圆角最大 `16rpx`。
- 每页只保留一个视觉主操作：新增、发布、保存或提交。它固定在底部操作栏或右下角，不能同时出现两个醒目的红按钮。
- 核验尺寸：320 × 568、360 × 640、360 × 800、412 × 915。
- 正文不小于 24rpx；主操作最小高度 88rpx；可点击区不小于约 44dp。
- 使用 Flex、边距和基础布局；不依赖 CSS Grid、`flex gap`、复杂滤镜、大面积动画或全屏截图背景。
- 顶部和底部预留状态栏、三键／手势导航安全区；固定底栏不得遮挡页面操作。
### 4.3 表单与编辑页面壳
## 6. 验收和代码纪律
适用于：创建家谱、录入始祖、申请加入、发布内容、编辑成员、反馈、设置。
- 顶部为紧凑题签，正文使用逐行纸签式表单，标签在左、输入值在右或下一行。
- 必填项用朱砂小印记表示；校验说明用暖灰褐，不使用大面积红色报错框。
- 键盘出现时页面可滚动，底部“保存 / 提交”保持可操作。
### 4.4 底部导航与抽屉
- 三 Tab：家谱、家族、我的。纸白底、顶部古金细线；当前图标和文字用朱砂，未选中用墨褐。
- 无底部 Tab 的详情页，底部保留返回区域或单主操作栏，不能出现空白黑条。
- 成员、相册、礼仪的详情采用半屏至全屏底部抽屉：纸白底、顶部金色短握条、右上关闭按钮、淡竹影或山影作为低对比装饰。
## 5. 核心组件规则
### 5.1 世系人物牌位
- 牌位为暖白底、古金双线边框、上下折角；不使用普通矩形卡片。
- 始祖牌位比同层成员高一级；当前选中人物外框换成朱砂双线，并使用小圆点连接标识。
- 牌内信息顺序：姓名 → 字 / 号 → 生卒或年份；信息不足时显示“生卒不详”，不留大段空白。
- 代际标签固定在树左侧，不随横向滚动丢失；横向树区域与底部档案抽屉互不遮挡。
### 5.2 纸签列表
- 左侧为功能图标或缩略图，中间为标题和两行信息，右侧是状态或箭头。
- 每行以古金细线分隔；红色仅用于“待审核”“未读”“进行中”等需要注意的状态。
- 长标题最多两行；日期、人数、地域等元信息单独一行，不与操作按钮抢空间。
### 5.3 主操作与次操作
- 主操作：朱砂描边或朱砂实底，圆角 `44rpx` 的胶囊形；文字白色或纸白。
- 次操作：纸白底、古金描边、墨褐文字。
- 删除和退出：先显示纸面确认抽屉，再允许使用 `danger` 色；不可直接用红色文字替代确认流程。
### 5.4 空状态与异常
- 空状态使用纸纹中的淡印章、卷轴、山影或未展开牌位，不使用卡通人物。
- 网络失败使用“纸页未送达”图标、明确重试按钮；不把错误码直接展示给用户。
- 审核中使用朱砂印章和预计提示；无权限使用合拢卷轴与申请/返回入口。
## 6. 首屏结构：家谱首页（G-01）
G-01 是所有设计页的公共还原样板，不等同于最终代码。
1. 顶部：朱砂祠堂红头，左侧项目 Logo，中央为“我的家谱”，右侧通知 PNG 图标；只有未读消息时才带朱砂小圆点。
2. 主区：当前家谱以横向家谱题签展示名称、地域、成员数和身份；这个题签的朱砂印章代表“当前选中的家谱”，不是另一种家谱颜色。没有家谱时替换为卷轴空状态。
3. 快捷区：世系图、成员、字辈诗、申请审核四项，使用透明 PNG 图标与古金分隔。
4. 家谱列表：明确分为“我创建的”和“我加入的”两个标题区；每项使用同一套纸签和古金线，不用红色 / 金色印章暗示未说明的身份差异。当前选中项可用朱砂细边标记。
5. 底部：三 Tab；主操作“创建家谱”在内容末尾或空状态中出现，避免遮挡 Tab。
### 6.1 G-01 数据文案规则
- 家谱名称后不得出现无意义横线、破折号、模拟字符或“待补充”占位。
- 有数据时按真实字段显示，例如“河南省 · 洛阳市”“158 位成员”“管理员”；无数据时整行隐藏，或显示明确的“地区待完善 / 成员待录入”。
- “当前家谱”与下方列表不得无说明地重复同一名称；当前题签显示选中的家谱，下方列表用于切换，选中项需要清晰标记。
### 6.2 G-01 固定设计栅格（360 × 800dp）
这是后续页面还原的硬尺寸基准，不再交给整页 AI 图自行猜测：
| 区域 | 尺寸 / 间距 | 约束 |
| --- | --- | --- |
| 系统状态栏 | `24dp` | 只预留系统空间，不放页面内容。 |
| 家祠红头 | `124rpx` 可视导航区 + 真实状态栏高度 | Logo 左 `16dp`，标题居中，铃铛右 `16dp`；红头结束后不得出现大块空白。 |
| 当前家谱题签 | 顶距 `16dp`，高 `136dp`，左右 `16dp` | 只展示当前家谱一次；名称、成员数、地域、身份均为真实字段。 |
| 快捷入口 | 题签后 `16dp`，行高 `84dp` | 四项等宽；图标实际 `24dp`，标签 `14sp`，不使用大号装饰图。 |
| 分隔与列表标题 | 上距 `16dp`，标题区 `36dp` | 细古金线 + “我创建的 / 我加入的”，不能留无内容的整屏空白。 |
| 家谱列表项 | 每项 `72dp`，项间 `8dp` | 一项只显示名称、必要元信息、右箭头；不重复当前题签内容。 |
| 新建家谱 | 列表后 `16dp`，高 `48dp` | 朱砂描边胶囊按钮，不用巨大的上下留白烘托。 |
| 底部导航 | `64dp` + 系统导航保底 | 纸白底、三项等宽，图标 `24dp`、标签 `12sp`、每项触控区至少 `48dp`。 |
上述内容总高度在 `360 × 800dp` 首屏内保持紧凑；数据较多时由内容区滚动，而不是拉大首屏留白。`320 × 568` 下题签和快捷入口仍在首屏可见，列表向下滚动。
### 6.3 已否决的 G-01 生成整页图
此前 AI 生成的“我的家谱”整页图**保留为美术锚点**：[G01 我的家谱美术锚点](references/G01-我的家谱-美术锚点.png)。它明确了本项目应该保留的整体效果：朱砂祠堂红头、暖金标题、宣纸纸纹、金线题签、淡山水竹影、纸白底部导航和庄重的色彩层级。
该图**不直接作为尺寸与功能验收稿**，因此不计入 G-01 的“页面设计完成”。需要按 6.2 的固定栅格修正：红头后与题签之间的过大留白、快捷入口与列表之间的过大留白、缺失的左上 Logo、当前家谱与列表的重复、无意义横线占位、以及非标准来源图标。
从此以后，页面设计采用“双锚点”：本图锁定美术氛围和视觉效果；6.2 固定栅格锁定尺寸、内容密度与 Android 小屏可用性。AI 只可生成 Logo、背景等独立视觉资产，不能决定页面间距、文字排版、列表高度或交互层级。
### 6.4 标准来源验收备注
- Material Symbols 官方指南：<https://developers.google.com/fonts/docs/material_symbols>
- Android Navigation Bar 官方指南：<https://developer.android.com/develop/ui/compose/components/navigation-bar>
## 7. 设计状态记录
- P-02：完成。颜色、字体、尺寸、透明 PNG 图标规范已锁定。
- P-03：完成。核心、普通、表单三类页面壳及底部导航、抽屉已锁定。
- P-04：完成。加载、空数据、失败、无权限、审核中与确认操作规则已锁定。
- 下一阶段：D2 账户与首次使用页面；全部页面均按本规范出高保真稿后，才进入 uni-app 还原。
- 资产先验收，页面后验收；资产不通过不进入页面。
- 所有页面只实现明确设计与交互；不增加推测性的 JS、接口、依赖、变量、方法和分支。
- 每次结构迁移必须同时更新页面路径、`pages.json`、跳转、测试和文档；旧路径确认无引用后立即删除。
- 每次完成后执行受影响审计、编译检查与 `git diff --check`；A01、G01 还需做截图回归。
docs/design/P00_页面结构与资产清单.md
+143
View File
@@ -0,0 +1,143 @@
# P00 页面结构与资产清单
> 状态：页面与现有资产迁移已完成；A01 完整按钮候选待设计图复核，两页截图回归待办。
> 目的：让页面、路由和资产都有唯一、可读、可审计的归属；本文件是 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/skeleton/content-list-skeleton` | 多类型内容列表功能骨架 | `pages/skeleton/content-list-skeleton.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` | 已迁移；未验收 |
迁移要求：同一轮更新页面文件、`pages.json`、所有跳转路径、测试和中文文件头注释；未完成全部引用更新时，不得删除旧路径。
## 3. 最终资产目录
```text
static/assets/
foundation/
opaque/
page-paper.jpg
auth-page-paper.jpg
auth-header.png
root-header-cinnabar.jpg
transparent/
brand-seal.png
auth-title-cloud.png
auth-divider-knot.png
auth-button-corner.png
...
modules/
genealogy/
opaque/
transparent/
tree/
opaque/
transparent/
family/
opaque/
transparent/
```
当前已迁入的资产以第 4 节台账为准。`auth-primary-button.png`、`auth-secondary-button.png` 尚未生成：在它们验收并替换 A01 的旧角标拼接实现前，A01 不能按“完整资产规则”关闭地基验收。
## 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/transparent/auth-button-corner.png` | transparent / 160×160 | A01 旧按钮角标；待完整按钮替换 | A01 | 过渡保留 |
| `foundation/opaque/a01-primary-button-candidate.png` | opaque / 1983×793 | A01 主按钮完整图片候选；未接入 | 无 | 待设计图复核 |
| `foundation/opaque/a01-secondary-button-candidate.png` | opaque / 1983×793 | A01 次按钮完整图片候选；未接入 | 无 | 待设计图复核 |
| `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 候选由图像生成工具制作，不是设计图裁切，当前比例约为 2.5:1，尚不符合现有按钮约 3.6:1 的显示比例，严禁直接接入或作为验收通过依据。旧版设计记录中的历史路径不再是资产依据；后续只按本台账引用和维护。
## 5. 图片属性规则
| 类型 | 文件格式与内容 | 典型用途 | 页面使用规则 |
| --- | --- | --- | --- |
| 不透明底图 | JPG 或无透明区域 PNG；包含完整底色、纹理、边框和四角 | 页面纸纹、朱砂页头、完整主／次按钮、卡片、导航 | 直接作为对应区域的完整视觉面，不再靠 CSS 补色或叠加边角 |
| 透明叠加图 | RGBA PNG；四周透明，主体边界干净 | Logo、图标、祥云、谱印、分隔纹、边框 | 明确记录叠在何种不透明底图上；不单独承担底色 |
禁止项：整页截图、设计图局部裁切、半边边框、按钮角标拼接、CSS／SVG 绘制可见装饰、同一语义的多版本长期共存。
## 6. 资产清理登记规则
每项现有资产必须登记以下字段后才可以决定保留或删除：
| 字段 | 含义 |
| --- | --- |
| 当前路径 | 盘点时的真实文件路径 |
| 语义用途 | 它服务的视觉元素，而不是模糊类别 |
| 背景属性 | `opaque` 或 `transparent` |
| 代码引用 | 页面、组件、配置或测试中的引用位置 |
| 替代资产 | 若要迁移，写入唯一的新路径；无替代则留空 |
| 决定 | `保留`、`迁移后删除` 或 `无引用删除` |
执行顺序固定为：扫描引用 → 填写登记 → 迁移引用 → 编译与截图验证 → 删除旧资产 → 再次扫描确认零引用。任何一步失败都停止删除。
## 7. 中文注释约定
每个页面和组件文件以中文注释写清页面编号、用途和关键依赖；模板至少区分背景、页头、主体、操作、状态五类区域。资产图层、路由跳转、非直观状态和防回归样式要解释“为什么这样写”。显而易见的单行 CSS 不写噪声注释。