# 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`。