0.0.0

docs/04-页面与路由.md

@@ -0,0 +1,89 @@
+# 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`。
+
+