APP详细功能设计文档

迅思维智能宠物喂食器 App

详细功能设计文档

文档版本： v2.1
更新日期： 2026-04-23
产品名称： 迅思维智能宠物喂食器
App 版本： v1.0.0

---

目录

1. 文档说明
2. 角色说明与缩略语
3. 数据存储规格说明
4. 功能模块总览
5. 模块一：认证与账号
6. 模块二：首页与设备概览
7. 模块三：设备详情与实时监控
8. 模块四：相册（抓拍与录像）
9. 模块五：定时喂食计划
10. 模块六：宠物管理
11. 模块七：设备设置
12. 模块八：家庭管理
13. 模块九：消息中心
14. 模块十：设备配网与绑定
15. 模块十一：我的（个人中心）

---

1. 文档说明

1.1 目的

本文档为迅思维智能宠物喂食器 App 的详细功能设计说明，旨在明确 App 端、服务端、设备端在每个功能点上的具体职责、数据流转与状态管理，并对应 HTML 设计稿中的具体页面截图进行功能说明，为开发团队提供完整、可执行的功能规格参考。

1.2 适用范围

• 开发团队：App 端（iOS/Android）、服务端、设备端三方协同开发

1.3 阅读说明

• 每个功能模块均按 App端、服务端、设备端 三个视角展开
• 部分模块附有 设计稿截图索引，说明该功能在 HTML 设计稿中对应的页面位置
• 符号说明：
• 🟢 = 该端需处理
• ⚪ = 该端不参与
• ⭐ = 重点/关键逻辑

1.4 设计稿截图索引说明

本文档中每个模块标题下方均标注「设计稿对应页面」

开发/测试人员可打开 HTML 文件，定位到页面，查看该功能模块的视觉设计稿。

---

2. 角色说明与缩略语

2.1 系统角色

2.2 设备型号规格

2.3 设备状态定义

2.4 缩略语

---

3. 数据存储规格说明

3.1 用户数据存储

3.1.1 照片存储

3.1.2 视频存储

3.1.3 设备状态数据结构

// 设备实时状态上报（MQTT / HTTP 轮询备用）
{
  "device_id": "PF200-ABC123",
  "sn": "XSW20260408PF200",
  "model": "PF200",
  "firmware_version": "v2.1.0",
  "online": true,
  "power_mode": "plug",
  "battery_level": 100,
  "food_level": 75,
  "food_weight_g": 750,
  "last_feeding_time": "2026-04-23T10:30:00+08:00",
  "today_feeding_count": 3,
  "today_feeding_total_g": 85,
  "total_feeding_count": 128,
  "total_feeding_g": 3840,
  "runtime_hours": 12,
  "network_rssi": -45,
  "error_code": 0,
  "error_message": "",
  "camera_stream_url": "rtmp://media.xswei.com/live/PF200-ABC123",
  "camera_status": "active",
  "microphone_status": "active",
  "speaker_status": "active",
  "timestamp": "2026-04-23T11:55:00+08:00"
}

设备错误码定义：

3.1.4 喂食记录存储

• 存储时长：喂食记录永久保存，支持用户按月/按设备导出
• 查询限制：App 端单次查询最多返回 100 条，支持游标分页
• 设计稿对应：首页「今日统计」模块展示今日喂食次数和总克数；设备详情页展示今日/本周/本月统计

3.1.5 家庭数据存储

---

4. 功能模块总览

---

5. 模块一：认证与账号

对应页面名称：登录/注册页面（auth-page）
设计稿截图说明：页面采用全屏渐变背景（深青→青→浅青），顶部居中 Logo + 应用名称，下方白色圆角卡片承载登录/注册表单。主Tab切换「登录」与「注册」，子Tab切换「验证码登录」与「密码登录」。

!image-20260423163202366

---

5.1 模块概述

支持手机号 + 验证码登录、手机号 + 密码登录两种方式，以及新用户注册流程。账号体系为家庭共享制，同一手机号可加入多个家庭。

---

5.2 功能 1：验证码登录

功能描述：用户输入手机号，获取短信验证码，完成登录。

设计稿对应元素（HTML 第 530~600 行）：
- 输入框：手机号输入框（带 +86 前缀标识）
- 获取验证码按钮（点击后显示60秒倒计时）
- 验证码6位数字输入框
- 登录按钮

数据规格：

---

5.3 功能 2：密码登录

功能描述：用户输入手机号和密码，完成登录。

设计稿对应元素

• 手机号输入框
• 密码输入框（带显示/隐藏切换图标）
• 记住账号复选框
• 忘记密码文字链接
• 登录按钮

密码规则：6-20位，支持字母、数字、符号混合，必须包含字母和数字。

---

5.4 功能 3：注册

功能描述：新用户通过手机号注册账号，注册成功后自动创建第一个家庭。

设计稿对应元素：

• 手机号输入框（+86前缀）
• 获取验证码按钮 + 验证码输入框
• 设置密码输入框（带显示/隐藏切换）
• 确认密码输入框
• 用户协议勾选框（链接到协议页）
• 注册按钮

数据规格：

注册后自动行为：
1. 颁发 JWT token（用户直接进入首页，无需重新登录）
2. 自动创建一个家庭（家庭名默认「{昵称}的家庭」）
3. 记录注册来源（iOS/Android/App版本）

---

5.5 功能 4：账号安全

功能描述：修改密码、绑定手机

设计稿对应：「我的」页面 → 设置入口 → 账号安全设置页

---

6. 模块二：首页与设备概览

对应页面名称：首页（home-page）
设计稿截图说明：顶部渐变导航栏（青→深青），左上角应用 Logo + 「小贝一家」家庭名称（可点击展开切换），右上角消息图标（带未读数字红点）。主区域为设备卡片列表，每张卡片包含：设备缩略图（占位图）、设备名称、在线状态角标、今日喂食次数和总量。底部固定Tab栏（首页/相册/喂食/宠物/我的）。

!image-20260423163501832

---

6.1 模块概述

首页是用户打开 App 后的第一个页面，展示已绑定设备的状态概览、快捷操作入口（手动喂食、定时计划入口）、家庭成员/宠物数量统计，以及宠物卡片展示。

---

6.2 功能 1：首页设备卡片

功能描述：展示设备名称、实时监控缩略图（占位图）、在线状态、今日喂食统计。

设计稿对应元素：

• 导航栏：家庭名称（带下拉箭头）+ 消息图标（红点未读数）
• 设备卡片：缩略图区（圆角矩形占位图）+ 设备名称 + 状态角标（在线/离线）+ 今日统计行（🍚今日喂食×3次，共85g）+ 底部快捷操作行
• 快捷操作行：📷 录像 ⏰ 计划 ⚙️ 设置

设备卡片数据结构：

---

6.3 功能 2：手动喂食（快捷操作）

功能描述：在首页设备卡片下方提供「手动喂食」按钮，一键触发出粮。

设计稿对应元素：设备详情页设备卡片右下角「🍚 手动喂食」按钮（主题色按钮，点击后变为加载状态）

手动喂食规格：

---

6.4 功能 3：家庭切换

功能描述：同一账号可属于多个家庭，首页顶部显示当前家庭，点击可展开切换面板。

设计稿对应元素：导航栏左侧「🏠 小贝一家 ▾」（点击展开下拉面板，列出所有家庭+当前勾选标记）

---

7. 模块三：设备详情与实时监控

对应页面名称：设备详情页（live-page / device-detail-page）
设计稿截图说明：页面顶部为视频监控区（黑色背景16:9比例），左上角返回按钮，左上叠加设备名称标签，右上叠加「LIVE」红点+当前时间。视频下方为监控控制栏：抓拍按钮、录像按钮（全屏）、对讲按钮、全屏按钮。余粮进度条（大号环形图）+ 今日喂食统计卡片 + 快捷操作按钮组（设备设置/喂食计划/分享/更多）。

!image-20260423163640968

---

7.1 模块概述

设备详情页是 App 的核心交互页面，包含实时视频监控画面、监控控制栏（抓拍/录像/对讲/全屏）、余粮/喂食统计、设备快捷操作入口。

---

7.2 功能 1：实时监控视频流

功能描述：显示设备摄像头实时画面（RTMP 推流 + HLS 拉流），左上角显示 LIVE 标识和当前时间，支持多码流切换。

设计稿对应元素：

• 视频区域：黑色16:9背景，摄像头画面填充
• 左上角：「📹 设备名称」白色半透明标签
• 右上角：「🔴 LIVE」红点标签 + 时间显示「14:32:05」
• 视频加载时：居中显示加载动画（旋转圆圈）
• 视频断开时：显示断连图标 + 「视频连接中断，点击重试」
• 音频：默认静音，开启对讲前保持静音

⭐ 摄像头通道与多码流支持：

视频流规格：

流地址刷新机制：

---

7.3 功能 2：抓拍照片

功能描述：在监控画面上点击「抓拍」按钮，截取当前视频帧保存为 JPEG 图片，上传到服务端并存入相册。

设计稿对应元素：

• 监控控制栏第一个图标按钮「📷 抓拍」（圆形，蓝色渐变填充）
• 点击后：屏幕闪白一下（模拟快门效果）+ 右上角 Toast「✅ 抓拍成功，已保存到相册」
• 抓拍数量统计 +1（如「已存 9/50 张」）

设计稿对应元素（HTML 第 1325~1340 行）：
- 设备详情页底部「抓拍与录像」入口卡片，显示缩略图预览 + 「12张照片 · 3个视频」统计

⭐ 抓拍本地缓存策略：

抓拍规格：

---

7.4 功能 3：录像

功能描述：按住「录像」按钮开始录制，松开停止，生成最长 30 秒的 MP4 视频文件，上传到服务端并存入相册。

设计稿对应元素：

• 监控控制栏第二个图标按钮「🎬 录像」（圆形，红色填充）
• 按住时按钮变红色 + 显示 REC 标识 + 录制时长倒计时「⏺ REC 00:24 / 00:30」
• 下方文字提示「长按录像，最长30秒」

⭐ 录像来源说明：

⭐ 录像上传路径分级策略：

录像断点续传机制：

录像规格：

---

7.5 功能 4：双向语音对讲

功能描述：点击「对讲」按钮，弹出对讲面板，支持按住说话将声音从设备端扬声器播放，同时设备端声音（宠物叫声等）传输到 App。

设计稿对应元素：

• 监控控制栏第三个图标按钮「🎤 对讲」（圆形，白色描边）
• 点击后：对讲面板从底部滑出（半透明遮罩 + 圆形说话按钮）
• 说话按钮居中，上方文字「按住说话，松开结束」
• 说话时按钮显示音量波形动画
• 对讲激活时，设备详情页视频画面左上角显示「🎤 对讲中」绿色标签

对讲规格：

⭐ 全双工 vs 半双工：本设计采用半双工（同一时间只能一方说话），避免回声和干扰。设备端检测到环境音量过大（宠物叫声等）时，可自动降低上行音频码率。

---

7.6 功能 5：全屏模式

功能描述：点击「全屏」按钮，视频画面横屏全屏播放，控制栏隐藏，点击屏幕恢复竖屏。

设计稿对应元素：监控控制栏第四个图标按钮「⛶ 全屏」（圆形，白色描边），点击后屏幕旋转为横屏，视频铺满屏幕，顶部状态栏隐藏。

---

7.7 功能 6：余粮统计与今日喂食统计

设计稿对应元素：

• 余粮环形进度条（大号，显示百分比数字如「75%」，颜色渐变：>50%绿色，20-50%橙色，<20%红色）
• 下方文字「粮仓余量 / 约750g」（以克为单位展示实际重量）
• 今日统计卡片：今日喂食「3次」+ 总计「85g」

---

8. 模块四：相册（抓拍与录像）

对应页面名称：相册页（album-page / gallery-page）
设计稿截图说明：顶部导航栏「📷 相册」+ 右上角「筛选」图标。筛选Tab：「全部 / 照片 / 视频」。主体为网格布局（3列），照片显示缩略图（圆角），视频缩略图叠加播放图标（▶）+ 时长标签（如「0:25」）。存储统计栏：「已存 10/50 张照片 · 2/5 段视频」。

!image-20260423164016822

---

8.1 模块概述

相册页面集中管理用户在设备详情页抓拍的照片和录制的视频，提供筛选、预览、删除功能，并展示存储用量统计。

---

8.2 功能 1：相册列表展示

功能描述：以网格形式展示照片和视频缩略图，支持「全部/照片/视频」三种筛选。

设计稿对应元素：

• 筛选Tab栏（全部/照片/视频）
• 存储统计栏（显示「已存 10/50 张照片 · 2/5 段视频」，HTML 中无此文字元素但布局保留）
• 网格区域（3列，间距4px，照片/视频混合展示，）
• 视频缩略图叠加播放图标（▶）+ 时长标签（如「0:25」）
• 照片缩略图叠加抓拍时间（相对时间，如「3分钟前」）

设计稿对应元素：设备详情页底部「抓拍与录像」入口卡片：

• 左侧图标区（橙色渐变背景，照片图标）+ 标题「抓拍与录像」+ 统计文字「12张照片 · 3个视频」
• 右侧缩略图预览（3张圆形小图）
• 点击跳转到相册页

数据规格：

---

8.3 功能 2：照片预览与删除

功能描述：点击照片进入全屏预览，支持左右滑动切换照片，点击删除按钮并确认后删除。

设计稿对应元素（交互元素由 JS 控制）：

• 全屏预览（黑色背景，图片居中，底部半透明信息栏）
• 底部信息栏：设备名称「小贝的喂食器」+ 抓拍时间「2026年4月23日 14:30」
• 右上角删除图标（🗑 红色）
• 左滑/右滑切换照片
• 底部操作栏：分享按钮 / 删除按钮

---

8.4 功能 3：视频预览与删除

功能描述：点击视频缩略图调用系统播放器全屏播放，点击删除按钮并确认后删除。

设计稿对应元素：

• 点击后直接全屏播放（调用系统播放器，或 App 内嵌 ExoPlayer/AVPlayer）
• 播放界面：视频画面 + 进度条 + 时长显示 + 播放/暂停按钮
• 暂停时右上角显示删除图标（🗑）
• 删除确认弹窗「确定删除这段录像？删除后无法恢复」

---

8.5 功能 4：分享功能

功能描述：照片或视频支持分享到微信、朋友圈、QQ等。

设计稿对应元素：照片/视频预览页底部操作栏「分享」按钮

---

8.6 存储规格总表（相册模块）

存储超限静默处理：达到上限后自动删除最早的记录，不弹窗提示用户，不打断当前操作流程。

---

9. 模块五：定时喂食计划

对应页面名称：喂食计划页（feeding-plan-page）
设计稿截图说明：顶部导航栏「⏰ 喂食计划」+ 右上角「+」添加按钮。主体为计划列表，每条计划卡片显示：宠物头像（emoji）/ 默认图标 + 宠物名称 + 喂食时间（加粗大字如「08:00」）+ 喂食份量「30g」+ 重复周期标签（周一至周日图标，高亮今日）+ 开关按钮（ON/OFF）。底部有「+ 添加计划」悬浮按钮。

!image-20260423164207392

---

9.1 模块概述

管理员可创建、编辑、删除定时喂食计划（支持每日重复/按工作日/按指定星期重复）。设备端根据服务端下发的计划自动执行出粮，无需 App 在线。

---

9.2 功能 1：计划列表

功能描述：展示当前设备的所有喂食计划，显示时间、份量、宠物、重复周期、开关状态。

设计稿对应元素：

• 计划卡片：宠物图标 + 宠物名称 + 时间「08:00」（加粗）+ 份量「30g」+ 重复周期（周一到周日小圆点，当日为实心高亮）+ 开关按钮
• 空列表状态：「暂无喂食计划」+ 图标 + 「点击下方按钮添加」
• 管理员可见：编辑（✏️）和删除（🗑）操作入口
• 成员可见：仅显示列表，无法编辑

---

9.3 功能 2：新建计划

功能描述：管理员填写喂食计划表单，设置时间、宠物、份量、重复周期。

设计稿对应元素（表单页）：添加计划页表单：

• 设备选择（如果家庭有多个设备，当前设备默认选中）
• 宠物选择（可跳过，显示「未关联宠物」）
• 喂食时间选择器（时钟样式，滚轮选择「08 : 00」）
• 出粮量选择器（滑块或数字输入，范围 5-200g，步进5g，显示刻度）
• 重复周期选择（周一到周日图标按钮组，点击切换选中状态）
• 保存按钮

新建计划数据规格：

---

9.4 功能 3：编辑/删除计划

功能描述：管理员可编辑已有计划的任意字段；可删除计划（需二次确认）。

设计稿对应元素：

• 编辑：点击计划卡片或编辑按钮 → 进入编辑表单页（内容同新建，自动填充）
• 删除：点击删除按钮 → 弹出确认框「确定删除「08:00 · 30g」计划？删除后无法恢复」

---

9.5 功能 4：计划开关（成员权限）

功能描述：所有家庭成员（包括普通成员）可开启/关闭某个喂食计划。

设计稿对应元素（每条计划右侧 Toggle Switch）

⭐ 权限规则：只有管理员可编辑/删除计划，普通成员仅可操作开关（开启/关闭某个计划），不可编辑时间/份量等核心字段。

---

9.6 功能 5：设备端定时执行

功能描述：设备端根据本地存储的计划，在设定时间到达时自动执行出粮动作。

断网处理：
- 设备本地存储完整计划列表，断网期间 RTC 仍按计划执行出粮
- 联网后设备端立即上报断网期间的喂食记录（topic=device/{device_id}/feed/batch-report）
- 服务端接收后补录喂食记录，用户可在 App 中查看

卡粮处理：
- 称重传感器检测：出粮后若实际出粮量 < 计划量 - 10g，判定为卡粮
- 设备端自动重试（最多3次，每次间隔10秒）
- 重试仍失败：上报 error_code=201，App 推送告警消息「出粮异常，请检查并清理出粮口」

---

10. 模块六：宠物管理

对应页面名称：宠物页（pet-page）
设计稿截图说明：顶部导航栏「🐾 我的宠物」+ 右上角「+」添加按钮。主体为宠物卡片列表，每张卡片：宠物头像（大emoji或自定义图片，圆形）+ 宠物名称（加粗）+ 宠物类型/品种「小狗 · 柯基」+ 年龄/性别标签 + 底部操作「🍚 喂食记录」按钮。空列表状态：空白占位图 + 「还没有宠物，点击添加」+ 添加按钮。

!image-20260423164501579

---

10.1 模块概述

管理家庭中的宠物档案（头像、名称、类型、品种、年龄、性别），宠物与喂食计划关联，便于记录每次喂食对应的宠物。

---

10.2 功能 1：宠物列表

功能描述：展示家庭所有宠物卡片（头像、名称、类型/品种/年龄/性别）。

设计稿对应元素：

• 宠物卡片：圆形头像（emoji 或自定义图片）+ 宠物名称 + 类型/品种行 + 年龄/性别标签
• 卡片底部：「🍚 喂食记录」按钮
• 管理员显示：编辑（✏️）和删除（🗑）操作入口
• 成员显示：仅查看，无法编辑

---

10.3 功能 2：添加宠物

功能描述：填写宠物档案信息，选择/上传宠物头像。

设计稿对应元素（表单页）：

• 头像选择区（顶部居中，圆形大头像选择框）
• 第一行：预设 emoji 头像网格（🐶🐱🐰🐹🐸🐦等12种）
• 第二行：「📷 上传图片」按钮（自定义图片，1MB以内）
• 宠物名称输入框（2-20字符）
• 宠物类型选择（小狗 / 猫咪 / 其他 → 二级选项）
• 品种输入框（选填）
• 生日选择器（选填）
• 性别选择（公 / 母 / 未知）
• 保存按钮

---

10.4 功能 3：编辑宠物

功能描述：编辑已有宠物的档案信息（头像、名称、类型、品种、年龄、性别）。

设计稿对应元素：宠物卡片点击 → 编辑表单页（内容同添加，自动填充现有数据）

---

10.5 功能 4：删除宠物

功能描述：删除宠物档案，同时解除与喂食计划的关联（pet_id 置空，不删除计划本身）。

设计稿对应元素：宠物卡片 → 删除按钮 → 确认弹窗「确定删除「小贝」？删除后所有关联的喂食计划将取消与该宠物的关联，但计划本身不会删除。」

---

10.6 功能 5：宠物喂食记录

功能描述：点击宠物卡片的「🍚 喂食记录」按钮，查看该宠物的历史喂食记录。

设计稿对应元素：喂食记录列表页（时间倒序）：
- 每条记录：时间标签「4月23日 08:05」+ 份量「30g」+ 喂食方式标签（手动/定时）+ 设备名称「小贝的喂食器」+ 状态（成功✅/失败❌）

---

11. 模块七：设备设置

对应页面名称：设备设置页（device-settings-page）
设计稿截图说明：顶部导航栏「⚙️ 设备设置」+ 返回按钮。设置分组列表：基本设置 / 喂食设置 / 摄像头设置 / 语音设置 / 设备信息 / 底部危险区（解除绑定）。

!image-20260423164556958

---

11.1 模块概述

管理单个设备的配置项，包括基本设置、喂食设置、摄像头设置、语音设置和设备信息展示。

---

11.2 功能 1：基本设置

功能描述：修改设备名称、设置设备位置、显示供电模式。

设计稿对应元素：

• 设备名称输入框（点击编辑，弹出键盘）
• 设备位置选择器（6个预设选项圆形图标：客厅/卧室/阳台/厨房/其他）
• 供电模式显示（插电图标🔌 或电池图标🔋+百分比）

---

11.3 功能 2：喂食设置

功能描述：设置默认出粮量（手动喂食和新建计划的初始值）、喂食声音开关、出粮提醒开关、低粮量提醒阈值。

设计稿对应元素：

• 默认出粮量滑块（范围 5-200g，步进5g，下方显示刻度标签）
• 喂食声音开关（开启时出粮播放提示音）
• 出粮提醒开关（开启时出粮后 App 推送通知）
• 低粮量提醒阈值滑块（范围 5%-50%，默认20%，下方文字「粮量低于此值时发送提醒」）

---

11.4 功能 3：摄像头设置

功能描述：设置视频分辨率、红外夜视模式、录像画质。

设计稿对应元素：

• 画面分辨率选项：「标清 640×480」（默认）/「高清 1280×720」
• 红外夜视选项：「自动」（根据光线自动切换）/「始终开启」/「关闭」
• 录像画质选项：「标准画质」（默认）/「高清画质」（仅当分辨率设为高清时可用）

⭐ 摄像头分辨率切换说明：

---

11.5 功能 4：语音设置

功能描述：调节对讲音量、开关设备端声音（扬声器）、开关设备端麦克风。

设计稿对应元素：

• 对讲音量滑块（0-100，默认80）
• 设备端声音开关（开启后设备可播放 App 发送的语音）
• 设备端麦克风开关（开启后设备可采集声音发送给 App）

---

11.6 功能 5：设备信息展示

功能描述：展示设备型号、固件版本、设备ID、运行时长、累计喂食统计等只读元信息。

设计稿对应元素：

• 设备型号：PF200（只读文本）
• 设备ID：PF200-ABC123（只读文本，可复制）
• 固件版本：v2.1.0（只读文本，点击进入固件升级页）
• 设备SN：XSW20260408PF200（只读文本）
• 运行时长：12小时（「已稳定运行12小时5分钟」）
• 累计喂食：共128次 / 共3840g（只读文本）

---

11.7 功能 6：固件升级（OTA）

功能描述：检测新版本固件，下载并升级设备固件。

设计稿对应元素（HTML 第 1900~1920 行，固件升级页）：
- 当前版本：v2.1.0（显示）
- 最新版本：v2.2.0（如有新版本，显示）→ 新版本说明「修复了若干bug，提升了稳定性」
- 升级按钮（如有新版本，显示「检查更新」→「立即升级」）
- 升级进度：下载进度条（0-100%）+ 状态文字「正在下载固件…」「正在升级中…请勿断电」

固件升级规格：

---

11.8 功能 7：解除绑定

功能描述：将设备从当前家庭中移除，解除账号与设备的绑定关系。

设计稿对应元素：设备设置页底部「🚨 解除绑定」红色按钮（危险操作区），点击后：

• 确认弹窗「确定解除绑定「小贝的喂食器」？解除后您将无法通过此 App 控制该设备，其他家庭成员也将失去访问权限。」
• 二次确认：输入设备名称确认「请输入「小贝的喂食器」确认」

---

12. 模块八：家庭管理

对应页面名称：家庭管理页（family-page）
设计稿截图说明：顶部导航栏「👨‍👩‍👧 家庭管理」+ 返回按钮。主体区域：当前家庭信息卡片（家庭名称 + 成员数量）+ 成员列表（头像 + 昵称 + 角色标签「管理员★」/「成员」）+ 右上角「邀请成员」按钮。底部操作区：「编辑家庭信息」+ 「解散家庭」（仅管理员，无其他成员时可见）。

!image-20260423164717172

---

12.1 模块概述

管理家庭单元，包括创建/编辑家庭信息、邀请/移除成员、设置成员角色（管理员/成员）。

---

12.2 功能 1：创建/编辑家庭

功能描述：创建新家庭（填写名称和地址）；管理员可编辑家庭信息。

设计稿对应元素：

• 创建家庭表单：家庭名称输入框（必填，2-20字符）+ 家庭地址输入框（选填）
• 编辑家庭表单：同创建，自动填充现有数据

---

12.3 功能 2：邀请成员

功能描述：通过二维码/邀请链接邀请他人加入家庭。

设计稿对应元素：

• 邀请页：家庭二维码（居中，可保存到相册）+ 复制链接按钮 + 分享到微信/QQ按钮
• 二维码下方文字：「扫描二维码加入「小贝一家」」「邀请链接有效期7天」

邀请规格：

---

12.4 功能 3：移除成员

功能描述：管理员可移除其他成员（确认弹窗）；成员不可移除自己（需联系管理员或退出家庭）。

设计稿对应元素：成员列表每项右侧「移除」按钮（红色文字，管理员操作），点击后：

• 确认弹窗「确定将「{成员昵称}」移出家庭？移出后该成员将无法访问家庭内的所有设备。」

⭐ 权限规则：

• 管理员不可移除自己
• 家庭至少保留 1 名管理员
• 若管理员要退出家庭，必须先转移管理员权限给其他成员
• 成员可主动退出家庭（「退出家庭」按钮在成员个人卡片中）

---

13. 模块九：消息中心

对应页面名称：消息页（message-page）
设计稿截图说明：顶部导航栏「🔔 消息」+ 右上角「⚙️ 消息设置」按钮。筛选Tab：「全部 / 喂食 / 设备 / 系统」。主体为消息列表，每条消息卡片：左侧图标（🔔喂食/⚠️设备/📢系统）+ 消息标题（加粗）+ 消息摘要（灰色小字）+ 时间标签（右侧「3分钟前」/「昨天」）。未读消息左侧有蓝色竖条标记。

!image-20260423164807542

---

13.1 模块概述

集中展示系统推送通知，包括喂食完成通知、设备告警通知、家庭成员变动通知、系统公告等。

---

13.2 功能 1：消息列表

功能描述：按时间倒序展示消息，支持按类型筛选（全部/喂食/设备/系统），未读消息有蓝色左侧竖条标记。

设计稿对应元素：

• 消息列表：每条消息卡片 + 未读蓝色竖条 + 标题 + 摘要 + 时间
• 筛选Tab（全部/喂食/设备/系统）
• 消息详情页：点击卡片 → 进入详情页（全屏消息内容+相关操作按钮）

消息已读策略：
- App 端进入消息列表页时，静默将当前屏所有消息标记为已读（批量 PATCH）
- 进入单条消息详情页时，单独标记该消息为已读
- 底部Tab栏消息图标显示未读数字红点（实时更新）

---

13.3 功能 2：消息推送触发

功能描述：服务端根据事件类型生成并推送消息，同时通过极光/友盟/自建 Push 通道推送到 App。

---

13.4 功能 3：消息设置

功能描述：用户可开关各类消息通知（喂食提醒、低粮量提醒、设备离线提醒、低电量提醒、免打扰模式）。

设计稿对应元素（消息设置页）：

• 喂食提醒开关（默认开启）
• 低粮量提醒开关（默认开启）
• 设备状态提醒开关（默认开启）
• 低电量提醒开关（默认开启）
• 免打扰时段开关（默认关闭）：开启后显示时间选择器「22:00 - 08:00」

免打扰时段规格：
- 默认关闭
- 开启后：22:00 - 08:00（可自定义开始和结束时间）
- 免打扰时段内：暂停喂食提醒、设备状态提醒、低电量提醒
- 强制推送例外：低粮量严重告警（<10%）和设备 error_code 为高严重级别时，即使在免打扰时段内也强制推送

---

14. 模块十：设备配网与绑定

对应页面名称：添加设备页（add-device-page / add-method-page / bluetooth-add-page / wifi-add-page）
设计稿截图说明：顶部导航栏「➕ 添加设备」+ 返回按钮。主体为配网引导页：步骤指示器「① 选择方式 ② 连接设备 ③ 完成绑定」。下方两个大卡片选项：「📡 蓝牙添加（推荐）」+ 「📶 WiFi添加」。

!image-20260423164854799

---

14.1 模块概述

用户将新设备添加到 App 的过程，支持蓝牙添加（推荐）和 WiFi 添加两种方式。设备配网是用户首次使用的关键流程。

---

14.2 功能 1：添加方式选择

功能描述：引导用户选择蓝牙添加或 WiFi 添加，推荐蓝牙方式。

设计稿对应元素：

• 两个并列大卡片：「📡 蓝牙添加（推荐）」+ 「📶 WiFi添加」
• 蓝牙卡片带「推荐」标签（绿色小标签）
• 点击卡片进入对应配网流程

---

14.3 功能 2：蓝牙添加（推荐）

功能描述：通过 BLE（低功耗蓝牙）搜索附近设备并连接，完成设备配网和账号绑定。

设计稿对应元素：

• 步骤1：设备通电 → 说明「长按设备复位键3秒，指示灯蓝色快闪表示进入配网模式」
• 步骤2：搜索设备 → 显示 BLE 扫描动画（圆形扩散效果）+ 发现的设备列表（名称如「XSW-PF200-AB12」）
• 步骤3：连接中 → 显示进度「正在连接…」「正在配网…」「绑定成功」
• 完成页：设备图片 + 「小贝的喂食器 已添加成功」+ 「去看看」按钮

设备指示灯状态（蓝牙添加全程）：

---

14.4 功能 3：WiFi 添加

功能描述：通过设备热点连接 WiFi 网络，完成配网和绑定（蓝牙不可用时的备选方案）。

设计稿对应元素：

• 步骤1：设备通电 → 说明「长按设备复位键3秒，指示灯蓝色快闪」
• 步骤2：连接设备热点 → 说明「在手机 WiFi 设置中连接 XSW-PF200-XXXX 热点」
• 步骤3：选择 WiFi → App 显示手机当前 WiFi 列表，用户选择家庭 WiFi 并输入密码
• 步骤4：配网中 → 进度条「正在配置…」
• 完成页：同蓝牙添加

---

15. 模块十一：我的（个人中心）

对应页面名称：我的页面（profile-page / mine-page）
设计稿截图说明：顶部导航栏「👤 我的」或用户头像+昵称区。主体为菜单列表：消息通知 / 家庭管理 / 账号安全 / 清理缓存 / 关于我们 / 退出登录。底部显示 App 版本号。

!image-20260423164929006

---

15.1 模块概述

展示用户个人信息，提供账号安全、通知设置、缓存清理、关于等辅助功能入口。

---

15.2 功能 1：个人信息展示

功能描述：展示用户头像、昵称、手机号（脱敏）、家庭数量。

设计稿对应元素：

• 用户头像（圆形，可点击编辑）
• 昵称（加粗）
• 手机号脱敏显示（138****1234）
• 家庭数量统计（「家庭 ×2」）

---

15.3 功能 2：账号安全

功能描述：修改密码、绑定微信、设置生物识别登录（见模块一 5.5 账号安全）。

---

15.4 功能 3：消息通知设置

功能描述：开关各类消息通知（见模块九 13.4 消息设置）。

---

15.5 功能 4：清理缓存

功能描述：一键清理 App 本地缓存（缩略图、临时文件）。

设计稿对应元素：

• 当前缓存大小显示（如「当前缓存 12.5MB」）
• 「清理缓存」按钮（点击后显示清理进度，清理完成后显示「已清理 0MB」）

清理范围：

---

15.6 功能 5：关于我们

功能描述：展示 App 版本号、用户协议、隐私政策、客服联系方式。

设计稿对应元素：

• App Logo + 版本号（v1.0.0 build 20260423）
• 用户协议链接
• 隐私政策链接
• 客服邮箱 / 电话

---

15.7 功能 6：退出登录

功能描述：清除本地登录状态，返回登录页。

设计稿对应元素：底部「退出登录」按钮（红色文字）

---

附录

A. 视频流与媒体文件关键规格汇总

B. MQTT Topic 规范

C. 错误码总表