# 界面与需求对照

共28个不同界面，分别提供低保真和高保真，共56张PNG和56份SVG。手机参考视口390×844，长页面按完整内容导出，未裁掉表单。

|序号|界面|WebApp路径|后续流程|
|---|---|---|---|
|1|欢迎开启|#/welcome|陪伴首页|
|2|陪伴首页|#/home|成长时光轴、健康与体重趋势、发现散步搭子、宠物日历、宠物档案主页|
|3|成长时光轴|#/timeline|成长故事详情、新增成长记录|
|4|新增成长记录|#/record/new|成长故事详情|
|5|成长故事详情|#/record/story-autumn|成长时光轴、编辑成长故事、成长回忆卡|
|6|编辑成长故事|#/record-edit/story-autumn|成长故事详情|
|7|成长回忆卡|#/recap/story-autumn|成长故事详情|
|8|宠物档案主页|#/profile|双身份切换、多宠切换、创建宠物档案、健康与体重趋势|
|9|创建宠物档案|#/pet/new|宠物档案主页|
|10|多宠切换|#/pet-switch|宠物档案主页、创建宠物档案|
|11|双身份切换|#/identity|宠物档案主页、宠友动态|
|12|健康与体重趋势|#/health|添加体重记录、疫苗记录、添加疫苗记录|
|13|疫苗记录|#/vaccines|添加疫苗记录、健康与体重趋势|
|14|添加体重记录|#/health-new|健康与体重趋势|
|15|添加疫苗记录|#/health-new?type=vaccine|疫苗记录|
|16|宠友动态|#/community|动态详情与评论、发布成长动态|
|17|动态详情与评论|#/post/community-one|宠友动态|
|18|发布成长动态|#/record/new?visibility=public|宠友动态|
|19|宠物日历|#/calendar|新增日程、陪伴首页|
|20|新增日程|#/schedule-new|宠物日历|
|21|附近宠物服务地图|#/services|陪伴首页|
|22|发现散步搭子|#/buddies|填写匹配条件、搭子详情|
|23|填写匹配条件|#/match|匹配中与取消、发现散步搭子|
|24|匹配中与取消|#/match-loading|匹配结果列表、填写匹配条件|
|25|匹配结果列表|#/match-results|搭子详情、填写匹配条件|
|26|搭子详情|#/buddy/mili|填写约遛邀请、匹配结果列表|
|27|填写约遛邀请|#/invite/mili|邀请保存与等待确认、搭子详情|
|28|邀请保存与等待确认|#/invite-sent/design-invite|搭子详情、发现散步搭子|

## 需求覆盖

- 成长时光轴、日期与类别筛选、新增编辑、故事详情和回忆卡：03–07。
- 档案创建、多宠切换、宠主与爱宠人士两种身份：08–11。双身份为本机身份切换，不是服务器账号登录。
- 健康记录、疫苗、体重趋势及新增记录：12–15。
- 动态发布、详情、评论与点赞反馈：16–18。
- 日历、日程与附近服务地图：19–21。
- 遛宠匹配条件、匹配状态、取消、结果列表、搭子详情、邀请与等待确认：22–28。
- 点赞弹跳动画、保存提示和匹配加载反馈在WebApp中实际实现，系统减少动态效果设置受支持。

设计流程预览提供页面导航，真实数据填写、保存、筛选、上传等操作使用WebApp。附近服务、搭子与社区均为示例数据，不包含真实用户匹配、导航、推送或服务器登录。