家属移动App页面清单
UI/UX设计注意事项
设计风格定位
本App的设计参考了客户提供的家属移动App设计效果参考.png，定位为现代简洁的健康监护类应用，整体风格偏向 Apple Health / Oura / Fitbit 等主流健康App的视觉语言，强调数据的清晰呈现和操作的轻量化。
视觉设计规范
色彩体系（基础色）
| 用途 | 颜色 | 色值 | 使用场景 |
|---|---|---|---|
| 主色调 | Teal / 蓝绿色 | #1ABC9C | 底部导航选中态、主要按钮、图表数据线、进度环 |
| 辅助色 | 白色 | #FFFFFF | 卡片背景、输入框背景 |
| 文字主色 | 深炭灰 | #2C3E50 | 标题、重要文字 |
| 文字辅色 | 中灰色 | #7F8C8D | 描述文字、次要信息 |
| 成功色 | 翠绿色 | #27AE60 | 在线状态、已完成、确认操作 |
| 禁用色 | 浅灰色 | #BDC3C7 | 禁用状态、占位符 |
| 分割线 | 极浅灰 | #ECF0F1 | 卡片分隔、列表分割线 |
预警状态色彩体系（动态主题）
重要设计原则：当App检测到**关注（黄色）或紧急（红色）**预警时，整个App的视觉主题需要发生变化，不仅仅是按钮颜色变化，而是全局主题色的切换。
| 预警级别 | 状态名称 | 主题色 | 色值 | 触发场景 |
|---|---|---|---|---|
| 绿色 | 普通（Normal） | Teal 主题 | #1ABC9C | 日常建议与小变化 |
| 黄色 | 关注（Attention） | Amber 主题 | #F39C12 | 作息异常、活动下降、设备离线12h |
| 红色 | 紧急（Emergency） | Coral 主题 | #E74C3C | 跌倒、SOS、长时间无回应、设备离线48h |
主题色应用规范
当App处于不同预警状态时，以下元素需要全局变化：
| 元素 | 绿色(普通) | 黄色(关注) | 红色(紧急) |
|---|---|---|---|
| 底部导航选中态 | Teal (#1ABC9C) | Amber (#F39C12) | Coral (#E74C3C) |
| 顶部状态栏 | 白色 | 浅黄色 tint (#FEF9E7) | 浅红色 tint (#FDEDEC) |
| 主按钮 | Teal 渐变 | Amber 渐变 | Coral 渐变 |
| 首页状态指示 | 绿色对勾 | 黄色警示图标 | 红色警报图标 |
| 卡片边框 | 无/Teal细线 | 黄色细线 | 红色粗线 |
| 页面背景 | 白色/浅灰 | 浅黄色 | 浅红色 |
实现方式：通过CSS变量或React Context管理全局主题色，WebSocket实时接收最新预警状态并动态切换。
字体规范
| 元素 | 字体 | 字重 | 字号 | 行高 |
|---|---|---|---|---|
| 页面大标题 | SF Pro Display / system-ui | Semibold (600) | 28pt | 1.2 |
| 卡片标题 | SF Pro Display / system-ui | Semibold (600) | 18pt | 1.3 |
| 正文内容 | SF Pro Text / system-ui | Regular (400) | 16pt | 1.5 |
| 辅助描述 | SF Pro Text / system-ui | Regular (400) | 14pt | 1.4 |
| 标签/小字 | SF Pro Text / system-ui | Medium (500) | 12pt | 1.3 |
| 数字数据 | SF Pro Rounded / system-ui | Bold (700) | 32-48pt | 1.0 |
间距与圆角
| 元素 | 数值 | 说明 |
|---|---|---|
| 页面左右边距 | 16pt | 标准内容区域边距 |
| 卡片内边距 | 16pt | 卡片内容与边缘的距离 |
| 卡片圆角 | 12pt | 卡片整体圆角 |
| 按钮圆角 | 8pt | 按钮圆角 |
| 列表项间距 | 8pt | 垂直列表项之间的间距 |
| 卡片间距 | 12pt | 卡片之间的垂直间距 |
卡片设计
- 白色背景：所有内容卡片使用纯白色背景 (
#FFFFFF) - 轻微阴影：使用柔和的投影效果 (
box-shadow: 0 2px 8px rgba(0,0,0,0.08)) - 圆角统一：统一使用 12pt 圆角
- 紧凑布局：卡片内部元素紧凑排列，充分利用空间
组件设计规范
底部导航栏
- 5个Tab：Home、Dashboard、Activity/Trends、Profile、Settings
- 图标 + 文字组合形式
- 选中态：主色调 (Teal) + 文字
- 未选中态：灰色 (#999999)
- 高度：49pt + 安全区域
- 背景：白色 + 顶部1px分割线
健康指标卡片
- 横向排列2列布局（首页）
- 或纵向排列（健康数据页）
- 每个卡片包含：图标、数值、单位、趋势箭头
- 趋势箭头：绿色↑ / 红色↓ / 灰色→
列表项设计
- 左侧图标 + 中间内容 + 右侧箭头/状态
- 分割线使用极浅灰色
- 点击反馈：背景色轻微变化
进度环 / 环形图
- 用于展示健康目标完成度
- 环形进度条 + 中心数值
- 配色与主色调一致
表单控件
- 输入框：白色背景 + 圆角 + 底部边框
- 按钮：主色填充 / 白色边框 + 主色文字
- 开关：iOS风格滑动开关
交互设计规范
- 点击反馈：所有可点击元素有点击态（背景色变化或轻微缩放）
- 过渡动画：页面切换使用平滑过渡 (300ms ease-in-out)
- 下拉刷新：支持下拉刷新获取最新数据
- 骨架屏：数据加载时显示骨架屏占位
- 空状态：列表为空时显示友好提示 + 引导操作
响应式适配
- iOS：主要适配 iPhone 12/13/14/15 系列（设计分辨率 390×844 pt）
- Android：主要适配主流 Android 设备（设计分辨率 360×800 dp）
- 安全区域：内容必须避开刘海屏/灵动岛区域，确保在 Safe Area 内
- 底部导航：考虑 Home Indicator 高度（34pt on iPhone X+），底部按钮与导航栏需预留足够间距
响应式断点
- 小屏设备（≤320pt）：单列布局，字号不小于 14pt
- 标准屏（321-414pt）：双列卡片布局
- 大屏设备（≥415pt）：最大内容宽度限制在 480pt 以内，保持单手操作舒适区
关键原则
- 触摸目标足够大（最小 44×44pt）
- 高对比度文字（符合WCAG AA标准）
- 简洁清晰的语言，避免技术术语
- 遵循流行美国App的交互模式（如标准iOS/Android规范）
- 支持系统字体缩放
核心设计理念
本App的设计严格遵循 Reflekt Health 的核心价值观：Safety（安全）、Independence（独立尊严）、Trust（信任）。
- 安全底线：红色预警（跌倒、SOS、设备离线48h）必须穿透所有静默设置，永远强提醒
- 尊严守护：健康数据使用非医疗化文案，误报标记为"算法优化"而非"老人行为"，用药遵从使用灰点而非警示色
- 信任基石：离线状态透明告知，操作审计日志可查，协作者权限即时撤销
页面清单
一、认证与账户模块
| 序号 | 页面名称 | 界面排版描述 | 前端交互描述 | 接口交互描述 |
|---|---|---|---|---|
| 1 | 隐私协议弹窗 | 全屏弹窗形式，顶部标题"Privacy Policy"，正文以可滚动区域展示完整隐私政策内容（英文），底部固定两个等宽按钮："Disagree"（灰色）和"Agree"（主色） | 首次启动App时强制弹出，用户必须滚动阅读到底部才能点击按钮；点击Agree关闭弹窗并记录状态进入下一步；点击Disagree显示友好提示后退出App | 调用 POST /api/privacy/consent 记录用户同意状态和同意时间戳 |
| 2 | 登录页 | 页面顶部居中Logo，中部手机号输入框+密码输入框（带显示/隐藏密码切换），底部"Forgot Password?"链接，登录按钮，页面底部注册入口"New here? Sign Up" | 输入手机号和密码后点击Login，后端验证成功后存储Token（安全存储到Keychain/Keystore）并跳转首页；点击Forgot Password跳转密码重置页；点击Sign Up跳转注册页；支持生物识别快捷登录（如果已开启） | POST /api/auth/login 获取AccessToken和RefreshToken；验证失败返回具体错误码（账号不存在/密码错误/账号已锁定） |
| 3 | 注册页 | 顶部标题"Create Account"，手机号输入框+右侧"Send Code"按钮，验证码输入框（6位数字），密码输入框（显示密码强度指示器），确认密码框，"Create Account"按钮，底部已有账号入口"Already have an account? Log in" | 输入手机号后点击Send Code（倒计时60秒防刷），输入收到的6位验证码，设置密码（至少8位，含大小写和数字），提交注册；注册成功自动登录并引导完善家庭档案或跳过 | POST /api/auth/sendCode 发送验证码（参数：phone, type=REGISTER）；POST /api/auth/register 提交注册（参数：phone, code, password）；验证码有效期5分钟 |
| 4 | 忘记密码页 | 顶部标题"Reset Password"和返回按钮，手机号输入框+"Send Code"按钮+验证码输入框，新密码输入框（显示强度）+确认密码框，"Reset Password"按钮 | 输入手机号获取验证码，输入新密码后提交；密码重置成功后使其他设备Token失效，然后跳转登录页 | POST /api/auth/sendCode 发送验证码（参数：phone, type=RESET_PASSWORD）；POST /api/auth/resetPassword 重置密码（参数：phone, code, newPassword）；POST /api/auth/revokeAllTokens 使其他设备登录态失效 |
二、首页与仪表盘
| 序号 | 页面名称 | 界面排版描述 | 前端交互描述 | 接口交互描述 |
|---|---|---|---|---|
| 5 | 首页/仪表盘 | 顶部区域：老人姓名+头像（圆形）+预警状态指示器（根据当前预警级别显示对应颜色状态条）；主内容区： - 状态概览卡片：根据预警级别显示不同颜色主题（绿色=一切正常/黄色=需要关注/红色=紧急关注），卡片内显示人性化关怀文案而非原始数据（如"Mom is doing well today"或"We noticed Mom's activity is a bit lower than usual"） - 快捷操作卡片：显示"Call Mom/Dad"按钮（紧急呼叫，红色） - 健康数据入口卡片：显示"View Health Details"入口，点击可跳转至健康数据详情页 底部导航栏：Home、Devices、Alerts、Health、Profile五个Tab（选中态颜色随预警级别动态变化） 动态主题：整个页面的主题色（顶部背景、按钮、导航选中态、卡片边框）随预警级别自动切换 | 点击状态概览卡片无跳转（仅展示）；点击Call按钮跳转系统电话；点击"View Health Details"进入健康数据详情页；下拉刷新获取最新预警状态；WebSocket实时接收预警级别变化并动态切换主题色 | GET /api/alert/current-level 获取当前预警级别（GREEN/YELLOW/RED）；GET /api/health/summary 获取健康状态摘要（非原始数据）；GET /api/family/profile 获取老人姓名和头像；WebSocket长连接接收实时预警推送和级别变化 |
三、设备管理模块
| 序号 | 页面名称 | 界面排版描述 | 前端交互描述 | 接口交互描述 |
|---|---|---|---|---|
| 6 | 设备列表页 | 顶部标题"My Devices"和右侧添加设备图标（+），设备卡片列表纵向排列，每个卡片包含：设备类型图标（左）、设备名称+设备类型文字（中）、在线状态指示灯（右，绿色=在线/灰色=离线+最后在线时间） | 点击设备卡片进入详情页；点击右上角+进入绑定流程；下拉刷新获取最新设备状态；离线设备显示黄色（超过12h）或红色（超过48h）状态标记 | GET /api/device/list 获取设备列表（含设备类型、名称、在线状态、最后心跳时间）；GET /api/device/:id/status 获取单个设备详细状态 |
| 7 | 设备详情页 | 顶部返回按钮和设备名称，设备图片区域（设备类型图标），下方卡片显示：Device ID（可复制）、设备类型、在线状态、最后在线时间、信号强度（如适用），底部"Contact Support to Unbind"按钮（需二次确认解绑风险） | 点击Device ID可复制到剪贴板；点击Contact Support跳转客服页并自动填充设备ID和家庭ID；返回设备列表 | GET /api/device/:id/detail 获取设备详细信息；GET /api/device/:id/health 获取设备健康状态（自检结果） |
| 8 | 设备绑定/配网引导页 | 全屏步骤引导形式，顶部步骤进度指示器（Step 1/5: Scan → Step 2/5: BLE Connect → Step 3/5: WiFi Config → Step 4/5: Device Setup → Step 5/5: SOS Test），每步配有图示、说明文字和操作按钮 | Step 1: 扫描Luma屏幕二维码或手动输入设备码；Step 2: 引导用户将手机靠近Luma建立BLE连接；Step 3: 输入家庭WiFi的SSID和密码（显示密码时提供切换）；Step 4: 等待Luma自检（显示自检进度：麦克风/喇叭/屏幕/雷达/心跳）；Step 5: 引导进行一次SOS测试；每步失败显示具体错误码和解决建议（如：密码错误/需切换2.4G WiFi/关闭路由器隔离模式） | POST /api/device/bind 发起绑定请求；GET /api/device/bind/status 轮询绑定进度（返回：PENDING/BLE_CONNECTING/WIFI_CONNECTING/SELF_TEST/COMPLETED/FAILED+errorCode）；POST /api/device/:id/test-sos 触发SOS测试 |
四、家庭与联系人模块
| 序号 | 页面名称 | 界面排版描述 | 前端交互描述 | 接口交互描述 |
|---|---|---|---|---|
| 9 | 家庭档案编辑页 | 顶部标题"Family Profile"和Save按钮，老人信息表单：Name（必填）、Age（数字）、Medical History（多行文本，选填）、Medication History（多行文本，选填）、Daily Routine（时间段选择器）、Quiet Hours（开始时间-结束时间选择器） | 用户填写/修改表单，Medical History和Medication History使用非医疗化提示文案（如"Any conditions we should know about?"）；静默时段与通知设置联动；Save按钮提交后显示loading，成功后Toast提示 | GET /api/family/profile 获取家庭档案；PUT /api/family/profile 更新档案（参数：elderName, elderAge, medicalHistory, medicationHistory, dailyRoutineStart, dailyRoutineEnd, quietHoursStart, quietHoursEnd） |
| 10 | 紧急联系人管理页 | 顶部标题"Emergency Contacts"和编辑完成按钮，联系人列表纵向排列，每个联系人卡片显示：头像占位、姓名、电话、顺序号（1/2/3...）、拖拽手柄图标，底部"Add Contact"按钮，添加联系人弹窗（姓名输入框+电话输入框+保存/取消） | 点击Add弹出表单；拖拽调整顺序决定通知优先级（第一联系人优先收到预警电话）；左滑出现删除按钮（需二次确认）；点击保存后刷新列表；联系人删除后自动重新编号 | GET /api/family/contacts 获取联系人列表（含顺序）；POST /api/family/contacts 添加联系人；PUT /api/family/contacts/:id 更新联系人信息；PUT /api/family/contacts/reorder 批量更新联系人顺序（参数：contactIds数组）；DELETE /api/family/contacts/:id 删除联系人 |
| 11 | 协作者管理页 | 顶部标题"Collaborators"和添加按钮，协作者列表纵向排列，每个卡片显示：头像、姓名、手机号、角色标签（Admin=蓝色/Viewer=灰色）、加入时间，底部"Add Collaborator"按钮，添加弹窗（手机号输入框+角色选择单选框Admin/Viewer+发送邀请按钮） | 点击Add输入手机号选择角色发送邀请；点击协作者卡片进入详情（可查看权限）；管理员可一键移除协作者（需二次确认，警告：立即失去所有数据访问权限）；被移除的协作者下次登录时自动解除家庭关联 | GET /api/family/collaborators 获取协作者列表（含角色、加入时间）；POST /api/family/collaborators/invite 发送邀请（参数：phone, role）；DELETE /api/family/collaborators/:id 移除协作者（立即生效，后端撤销所有数据访问权限）；GET /api/family/collaborators/invitations 获取 pending 邀请列表 |
五、预警中心模块
| 序号 | 页面名称 | 界面排版描述 | 前端交互描述 | 接口交互描述 |
|---|---|---|---|---|
| 12 | 预警列表页 | 顶部区域：标题"Alerts"、筛选/排序入口、当前预警级别指示条（根据当前最高级别显示颜色） 预警消息列表：纵向排列，每条显示：左侧预警类型图标（红色=跌倒/SOS/设备离线48h/黄色=设备离线12h/活动异常/绿色=普通消息）、预警标题、发生时间、状态标签（New/Unprocessed/Processed/False Alarm） 动态主题：当存在未处理的黄色/红色预警时，页面顶部状态条、筛选按钮高亮、页面背景会呈现对应预警级别的主题色 支持下拉刷新和上拉加载更多 | 点击条目进入预警详情；点击筛选按钮按类型（All/Fall/SOS/Device Offline/Medication/Activity）/状态（All/New/Processed/False Alarm）/时间（Today/This Week/This Month）筛选；新预警显示红点badge；实时接收WebSocket推送，页面主题色随最新预警级别变化 | GET /api/alert/list 获取预警列表（分页，每页20条）；GET /api/alert/unread-count 获取未读数量；GET /api/alert/current-level 获取当前预警级别；PUT /api/alert/:id/read 标记已读；WebSocket接收实时预警推送 |
| 13 | 预警详情页 | 顶部返回按钮和预警标题，预警级别大标签（RED/YELLOW/NORMAL），详情卡片包含：预警类型、发生时间、详细描述、触发证据区域（如：跌倒时的心率值、设备离线持续时间）；底部操作按钮组横排：Call Elder（绿色）、Mark as Processed（蓝色）、Mark as False Alarm（灰色+需选择原因） | 点击Call Elder跳转系统电话；点击Mark as Processed更新状态并返回列表；点击Mark as False Alarm弹出原因选择弹窗（选项：Picked up object快速弯腰、Exercising运动、Pet interference宠物干扰、Radar blocked雷达遮挡、Other other reason），选择原因后提交；误报数据用于算法优化 | GET /api/alert/:id/detail 获取预警详情（含证据数据）；POST /api/alert/:id/handle 标记已处理（参数：handlerId）；POST /api/alert/:id/falseReport 标记误报（参数：reason, description可选） |
| 14 | 设备离线预警详情页 | 顶部返回按钮和"Device Offline Alert"标题，预警级别标签（YELLOW=12-48小时/RED=超过48小时），详情卡片显示：设备名称、设备类型、离线开始时间、离线持续时长、最后在线时间，底部显示故障排查建议卡片（如：检查WiFi路由器、检查电源、联系客服），操作按钮：Call Elder、Mark as Processed、Refresh Status | 点击Mark as Processed更新状态；点击Refresh Status重新检查设备在线状态；设备恢复在线后自动更新状态；超过48小时显示红色并提示"High Risk"标记 | GET /api/alert/:id/detail 获取离线预警详情；GET /api/device/:id/status 刷新设备状态；POST /api/alert/:id/handle 标记处理 |
| 15 | 普通消息收件箱 | 顶部标题"Messages"和全部已读按钮，消息列表纵向排列，每条显示：消息标题、时间、正文摘要（最多2行），未读消息显示左侧蓝点，已读消息无标记 | 点击查看详情（全屏展示）；点击全部已读一键标记所有消息为已读；仅支持查看，无处理操作 | GET /api/message/list 获取消息列表；PUT /api/message/read-all 全部标记已读；GET /api/message/:id 获取消息详情 |
六、健康数据模块
重要说明：健康数据模块是用户主动查询详细健康数据的入口。首页只展示状态概览和引导性信息，不直接呈现原始健康指标数据。
| 序号 | 页面名称 | 界面排版描述 | 前端交互描述 | 接口交互描述 |
|---|---|---|---|---|
| 16 | 健康数据首页 | 顶部区域：标题"Health"、日期选择器（默认Today） 说明卡片：顶部显示引导文案"View detailed health metrics and trends here" 四个健康指标卡片：纵向排列（点击可进入详情）： - Heart Rate（心率图标+数值+单位+bpm） - Blood Oxygen（血氧图标+数值+单位+%） - Sleep（睡眠图标+小时+分钟） - Steps（步数图标+数值+步） 每个卡片显示与昨日对比的箭头标识和百分比变化，数据异常显示非医疗化文案 | 点击卡片进入对应指标的详情/趋势图（健康趋势图页）；左右滑动切换不同日期；选择日期后获取该日数据；此页面为数据查询入口，用户从首页的"View Health Details"进入 | GET /api/health/today 获取今日概要；GET /api/health/date/:date 获取指定日期数据；GET /api/health/:type/daily/:date 获取单指标数据 |
| 17 | 健康趋势图页 | 顶部返回按钮和指标名称，Day/Week视图切换按钮（横向排列），图表区域：Y轴数值、X轴时间，折线显示数据波动，背景显示灰色基线区间（基于老人历史数据的个人基线），图例说明区域，底部非医疗化解释文案（如"Activity is within your normal range"或"Activity slightly low compared to your baseline"） | 点击Day/Week切换按钮切换视图；点击图表上的数据点显示具体数值和时间；左右滑动查看历史数据；基线区间用半透明灰色带显示，超出基线用不同颜色标识 | GET /api/health/:type/trend 获取趋势数据（含基线区间参数：baselineLow, baselineHigh）；GET /api/health/:type/daily/:date 获取单日详细数据点 |
| 18 | 健康周报页 | 顶部标题"Health Report"和日期范围（如"Feb 17 - Feb 23"），报告内容区域纵向排列：本周各项指标摘要（心率/血氧/睡眠/步数）、与上周对比、趋势描述，每项使用非医疗化关怀语句（如"Your activity was slightly lower this week. Maybe give Mom a call to check in?"），底部分享按钮 | 左右滑动查看完整报告内容；点击share按钮弹出分享菜单（Messages/Email/复制链接）；报告每周生成一次，默认显示上周报告 | GET /api/health/weekly/report 获取周报（含日期范围参数）；GET /api/health/weekly/reports 获取历史周报列表 |
七、关怀提醒模块
| 序号 | 页面名称 | 界面排版描述 | 前端交互描述 | 接口交互描述 |
|---|---|---|---|---|
| 19 | 提醒列表页 | 顶部标题"Reminders"和添加按钮，提醒列表纵向排列，每条显示：提醒类型图标（用药/喝水/散步/其他）、提醒内容（文字或语音留言标识）、执行时间、重复规则图标（每天/每周/自定义）、提醒方式图标（Luma语音/App通知/Both），底部"Create Reminder"按钮 | 点击提醒进入详情/编辑页；左滑出现删除按钮；点击Create进入创建页；下拉刷新查看执行状态；即将执行的提醒显示"Upcoming"标签 | GET /api/reminder/list 获取提醒列表；GET /api/reminder/:id/detail 获取提醒详情和历史执行记录；DELETE /api/reminder/:id 删除提醒 |
| 20 | 创建/编辑提醒页 | 顶部标题"Create Reminder"或"Edit Reminder"和Save/Cancel按钮，表单区域：提醒类型选择（从模板库选择或Custom）、提醒内容输入（文字最多100字符/或选择语音留言）、提醒时间选择器（单次/多次/常用时间段Morning/Lunch/Evening快捷选项）、提醒频率选择（每天/每周指定天数/每周一次/自定义日期范围）、提醒方式选择复选框（Luma Voice/App Notification/Both）、用药提醒二次确认开关（P1用药提醒特有，间隔5分钟二次提醒） | 选择模板后自动填充内容；设置时间支持多选；保存前验证必填项；用药提醒开启二次确认后，系统会在首次提醒未确认后5分钟自动二次提醒；保存后返回列表页 | POST /api/reminder 创建提醒；PUT /api/reminder/:id 更新提醒；GET /api/reminder/template/list 获取提醒模板库（25项美式生活模板）；GET /api/reminder/:id 获取提醒详情用于编辑回显 |
| 21 | 用药遵从日志页 | 顶部标题"Medication Compliance"和视图切换按钮（日历/图表），日历视图：7-14天日期网格横向排列（可滑动查看更多天），每个日期下方显示状态点（绿色勾=已确认、灰色点=未确认、灰色横线=无提醒），底部统计摘要（如"This week: 5 of 7 taken"）；图表视图：折线图显示遵从率趋势 | 点击日期查看当天详情（提醒时间、是否确认、确认时间）；切换日历/图表视图；遵从数据仅展示模式，不作为问责依据；灰色点设计避免"未确认=错误"的负面暗示 | GET /api/reminder/medication/compliance 获取用药遵从数据（参数：days=7或14）；GET /api/reminder/medication/daily/:date 获取指定日期用药提醒执行详情 |
八、设置与偏好模块
| 序号 | 页面名称 | 界面排版描述 | 前端交互描述 | 接口交互描述 |
|---|---|---|---|---|
| 22 | 设置首页 | 顶部标题"Settings"，设置项分组列表（分组标题+列表项），分组包括：Notification Preferences（通知偏好）、Quiet Hours（静默时段）、Emergency Contact Order（紧急联系人顺序）、Privacy & Data（隐私与数据）、Support（客服与帮助）、Account（账户），每项右侧显示当前状态或箭头 | 点击每项进入对应详情页；"Data Collection"开关需二次确认；Logout显示确认框后清除本地Token；部分设置修改后实时生效 | GET /api/settings 获取所有设置项；PUT /api/settings/:key 更新单个设置项；POST /api/auth/logout 登出（可选，清理本地Token） |
| 23 | 通知偏好设置页 | 顶部标题"Notification Preferences"和返回按钮，设置项列表：Receive Normal Messages开关（可关闭）、Receive Yellow Alerts开关（可关闭）、Receive Red Alerts开关（显示但禁用状态+锁定图标+提示"Red Alerts are always on to ensure your safety"），每个开关下方显示说明文字 | 点击普通消息开关可开启/关闭；点击黄色预警开关可开启/关闭；红色预警开关始终禁用，hover或点击显示tooltip解释；开关状态实时保存到后端 | PUT /api/settings/notification 更新通知偏好（参数：normalEnabled, yellowEnabled；redAlwaysTrue） |
| 24 | 静默时段设置页 | 顶部标题"Quiet Hours"和返回按钮，时间范围选择器（开始时间滚轮选择器-结束时间滚轮选择器），说明文字区域："App will not ring or vibrate during this time, except for Red Emergency Alerts which will always come through"，底部显示当前设置预览 | 旋转滚轮选择开始和结束时间；支持跨天设置（如22:00-07:00）；设置后自动保存；红色预警永远穿透静默时段 | PUT /api/settings/silent-mode 更新静默时段（参数：enabled, startTime, endTime） |
| 25 | 紧急联系人顺序设置页 | 顶部标题"Emergency Contact Order"和返回按钮，说明文字："The first contact will be called first in case of emergency"，联系人列表（与紧急联系人管理页共享），拖拽排序，顺序决定呼叫优先级 | 拖拽调整联系人顺序；第一联系人显示"Primary"标签；顺序变更后实时生效 | PUT /api/family/contacts/priority-order 更新联系人优先级顺序（参数：orderedContactIds） |
| 26 | 隐私与数据设置页 | 顶部标题"Privacy & Data"和返回按钮，设置项：Data Collection开关（带二次确认）、Activity Log查看入口，每个设置项下方显示详细说明 | 点击Data Collection开关弹出二次确认框（说明：Turning this off will stop receiving all health data and alert notifications）；确认后后端停止推送；点击Activity Log进入审计日志页面 | PUT /api/privacy/withdraw 撤回隐私同意（参数：confirm=true）；GET /api/audit/log 获取操作审计日志 |
| 27 | 操作审计日志页 | 顶部标题"Activity Log"和返回按钮、导出按钮，日志列表纵向排列，每条显示：操作时间、操作类型（Changed settings/Added collaborator/Removed device等）、操作对象、IP地址，操作日志保留12个月 | 展示最近12个月的操作记录；支持按时间范围筛选；点击导出按钮下载CSV文件 | GET /api/audit/log 获取审计日志（参数：startDate, endDate, page, pageSize）；GET /api/audit/log/export 导出CSV |
九、客服与支持模块
| 序号 | 页面名称 | 界面排版描述 | 前端交互描述 | 接口交互描述 |
|---|---|---|---|---|
| 28 | 联系客服页 | 顶部标题"Support"和返回按钮，客服联系方式区域：Email（support@reflekthealth.com）、Phone（1-800-REFLEKT），自动填充信息卡片：Current Family ID、Device ID（用于快速定位问题），一键复制按钮，常见问题FAQ折叠列表，提交工单表单（问题描述+截图附件+提交按钮） | 点击复制按钮复制信息到剪贴板并显示Toast；点击FAQ展开查看答案；填写工单表单提交后显示提交成功 | POST /api/support/ticket 提交工单（参数：subject, description, deviceId可选, attachmentUrls可选）；GET /api/support/faqs 获取常见问题列表（可选） |
设计参考
