Pet3/docs/04-页面与路由.md

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。