4.8 KiB
4.8 KiB
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/）实现原型的橙色凸起按钮和状态变色。
{
"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。