90 lines
4.8 KiB
Markdown
90 lines
4.8 KiB
Markdown
# 04 · 页面与路由
|
||
|
||
## 1. 页面清单（对应原型 12 屏）
|
||
|
||
| 原型 Frame | 页面/组件 | 路径 | 类型 | 说明 |
|
||
|-----------|----------|------|------|------|
|
||
| 0a 登录 | login | `pages/login/login` | 普通页 | 微信授权登录 |
|
||
| 0b 建档/编辑 | dog-edit | `pages/dog-edit/dog-edit` | 普通页 | 建档与编辑复用，`?id=` 区分 |
|
||
| 0c 多狗选择 | multi-dog-sheet | `components/multi-dog-sheet` | 组件(弹层) | 点遛狗时多狗才弹 |
|
||
| 1 我的 | home | `pages/home/home` | **Tab** | 启动默认页 |
|
||
| 2/2b 遛狗中 | walking | `pages/walking/walking` | 普通页 | 进行/暂停同页切状态 |
|
||
| 3 成果卡 | summary | `pages/summary/summary` | 普通页 | 遛完总结 |
|
||
| 4 狗狗主页 | dog-detail | `pages/dog-detail/dog-detail` | 普通页 | `?id=` |
|
||
| 5 遛狗历史 | history | `pages/history/history` | 普通页 | 含补记弹层 |
|
||
| 6/6b 记录 | records | `pages/records/records` | **Tab** | 含空状态 |
|
||
| 7 完整成就 | achievements | `pages/achievements/achievements` | 普通页 | `?dogId=`，两入口共用 |
|
||
|
||
## 2. tabBar 配置（app.json）
|
||
|
||
底部三 Tab，中央「遛狗」为凸起按钮。微信原生 tabBar 不支持凸起 FAB，因此采用 **自定义 tabBar**（`custom: true` + `components/custom-tab-bar/`）实现原型的橙色凸起按钮和状态变色。
|
||
|
||
```jsonc
|
||
{
|
||
"tabBar": {
|
||
"custom": true, // 自定义，实现中央凸起 FAB
|
||
"list": [
|
||
{ "pagePath": "pages/records/records", "text": "记录" },
|
||
{ "pagePath": "pages/home/home", "text": "我的" }
|
||
// 中央“遛狗”由自定义 tabBar 渲染，非真实 tab 页
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
中央「遛狗」按钮行为：
|
||
- 点击 → 单狗直接进 `walking`；多狗弹 `multi-dog-sheet` 选择后再进。
|
||
- 遛狗中时按钮变绿显示「遛狗中」，点击回到 `walking`；暂停态变黄「已暂停」。
|
||
|
||
## 3. 路由跳转表
|
||
|
||
```
|
||
login ──(新用户)──► dog-edit ──完成──► home(tab)
|
||
login ──(老用户)──────────────────► home(tab)
|
||
|
||
home ──点狗卡片──► dog-detail
|
||
home ──点「成就」──► achievements
|
||
home ──中央按钮──┬─(单狗)─► walking
|
||
└─(多狗)─► multi-dog-sheet ─选定─► walking
|
||
|
||
walking ⇄ (暂停态同页切换)
|
||
walking ──结束+二次确认──► summary ──完成──► dog-detail / home
|
||
walking ──定位/数据降级──► (未授权时隐藏距离·狗步；授权时累计 GPS 距离并换算狗步)
|
||
|
||
dog-detail ──右上编辑──► dog-edit?id=xxx（预填）
|
||
dog-detail ──近期记录──► summary（只读回看，占位；后续替换为 record-detail）
|
||
|
||
records(tab) ──成就概览/全部──► achievements
|
||
records(tab) ──+补记──► manual-add-sheet
|
||
records(tab) ──历史项──► summary（只读回看，占位；后续替换为 record-detail）
|
||
|
||
history ──右上+──► manual-add-sheet ──保存──► 刷新历史
|
||
```
|
||
|
||
## 4. 公共组件拆分
|
||
|
||
| 组件 | 用于页面 | 职责 |
|
||
|------|---------|------|
|
||
| `custom-tab-bar` | 全局 | 三 Tab + 中央状态化 FAB |
|
||
| `dog-card` | home | 狗狗卡片（连续天数、犬种） |
|
||
| `stat-grid` | summary, dog-detail | 三宫格统计 |
|
||
| `walk-row` | history, records, dog-detail | 一条遛狗记录（含补记标识） |
|
||
| `achievement-medal` | dog-detail, records, achievements | 勋章（解锁/锁定/进度） |
|
||
| `multi-dog-sheet` | tabBar 触发 | 多狗选择弹层 |
|
||
| `manual-add-sheet` | history, records | 补记表单弹层 |
|
||
| `chip-group` | dog-edit, summary | 单选标签组（性别/年龄/天气/状态） |
|
||
|
||
## 5. 关键交互细节（迁移自原型注释）
|
||
|
||
- **遛狗中计时**：基于 `startAt` 实时差值计算，扣除累计暂停时长；切后台不丢（见架构文档 §4）。
|
||
- **定位增强**：不在首次打开强制索权；开始遛狗后可请求定位。授权时累计 GPS 距离并按狗狗 `stride` 换算狗步，未授权时隐藏距离/狗步，只保留时长。
|
||
- **便便打卡**：行内 toggle，遛狗中即时写入会话状态，结束时随 walk 落库。
|
||
- **暂停态**：停止计时、数据置灰，主按钮变「继续」——防止等狗/捡便便污染数据。
|
||
- **结束**：必须二次确认弹窗，再进成果卡。
|
||
- **成果卡视角**：文案「豆豆今天走了 3,480 狗步」，非「你遛了」。
|
||
- **空状态（6b）**：新用户「记录」Tab 显俏皮引导 +「带豆豆出门」按钮，成就墙全灰待解锁；遛完第一次切正常态。
|
||
- **分享**：成果卡「生成图片分享朋友圈」用 Canvas 2D 绘制成果图，是拉新主入口。
|
||
- **历史回看**：V1 可复用 `summary` 做只读态，但不得显示「完成」这类结束流程按钮；正式形态后续补 `record-detail`。
|
||
|
||
|