外观
页面状态与交互规范
本页记录当前 App 中真实存在的页面状态和交互规则,重点说明页面在正常、异常与过渡状态下如何表现。状态样本可以包含代码保留但当前入口隐藏的页面;这类页面只能用于理解实现形态,不能被理解为当前主链可达入口。
通用状态矩阵
| 状态 | 当前实现形态 | 真实示例 | 文档说明 |
|---|---|---|---|
loading | 全屏 CircularProgressIndicator、Skeleton、局部 loading 按钮 | SplashScreen、ChatHistoryScreen、ExerciseScreen、HealthOverviewScreen | 不同页面实现方式不统一;HealthOverviewScreen 当前入口隐藏,仅作状态实现样本 |
empty | 空图标 + 文案 + CTA 或说明 | ChatHistoryScreen、ExerciseHistoryScreen | 有些空态带 CTA,有些只有说明 |
error | SnackBar、错误页、对话框内提示 | PhoneInputScreen、PasswordLoginScreen、HealthOverviewScreen、ExerciseHistoryScreen | 当前不少错误通过 SnackBar 暴露;隐藏入口页不计入当前主链覆盖 |
success | 跳转、Banner、SnackBar、状态回写 | VerificationCodeScreen、ProfilePage、ExerciseExecutionScreen | 成功态多为短暂反馈,不一定有常驻成功页面 |
auth gated | 未登录态分流或游客态 | SplashScreen、ProfilePage | 一部分页面在启动时分流,一部分页面在当前页内降级 |
editing | 编辑模式复用已有流程 | OnboardingFlowScreen(isEditMode: true) | 编辑与首次建档共用同一套流程 |
关键页面状态说明
1. 启动与鉴权
| 页面 | 主要状态 | 说明 |
|---|---|---|
SplashScreen | initial / checking / resolved | 通过 SplashBloc 只做分流,不承载业务错误页 |
PhoneInputScreen | 表单校验失败、验证码发送中、发送成功、发送失败 | 失败通过 AuthError SnackBar 提示 |
VerificationCodeScreen | 倒计时中、可重发、验证中、注册成功、验证失败 | 验证成功后直接跳成功页 |
PasswordLoginScreen | 表单校验失败、登录中、登录失败、登录成功 | 成功后依据 healthInfoCompleted 分流 |
2. Onboarding
| 维度 | 当前实现 |
|---|---|
| 步骤状态 | 当前共 7 步,currentStep 驱动 |
| 提交状态 | saving / submitting / completed / error |
| 校验方式 | isCurrentStepValid + currentStepErrors |
| 特点 | 默认只在切步时重建主体内容,尽量减少输入时整页重绘 |
3. 首页 Dashboard
| 区域 | 当前状态 | 说明 |
|---|---|---|
| 问候语 | 动态文案 | 根据时间段生成“早上好/下午好/晚上好”等 |
| 今日状态卡 | 评估摘要 / 更新入口 | 由 AssessmentOverviewBloc 驱动 |
| 处方卡 | loading / loaded / generated / error | 由 PrescriptionBloc 驱动 |
| 今日运动卡 | 静态展示 | 当前不是实时后端统计 |
| 康复知识卡 | 静态知识池 | 承接 rehab_knowledge_items.dart |
4. Chat
| 区域 | 当前状态 | 说明 |
|---|---|---|
| 消息主列表 | ChatLoading / ChatMessagesLoaded / ChatError | 由 ChatBloc 驱动 |
| AI 正在回复 | isAiTyping=true | 仍处于同一 loaded state 中 |
| 会话抽屉 | loading / empty / list | 抽屉内通过 AnimatedSwitcher 切换 |
| 处方生成 | PrescriptionGenerating | 顶部显示生成提示条 |
5. Exercise
| 区域 | 当前状态 | 说明 |
|---|---|---|
| 运动中心 | 首次加载 / 已有处方 / 无处方 / 错误 SnackBar | ExerciseLoaded 为主渲染态 |
| 动作执行页 | 未开始 / 进行中 / 暂停 / 结束保存中 | 页面内部 state + ExerciseBloc 联动 |
| 运动历史 | loading / loaded / empty / error / has cached result | 一部分中间状态会保留上次已加载结果 |
6. Profile / 健康总览 / 设置
| 页面 | 当前状态 | 说明 |
|---|---|---|
ProfilePage | initial / loading / guest / loaded / error | 游客态会显示登录按钮 |
HealthOverviewScreen | skeleton / loaded / error / refresh | 错误态有完整页,不只是 SnackBar |
SettingsScreen | 本地 UI state 为主 | 多数功能有结构,但持久化仍待完善 |
HealthOverviewScreen 的状态实现仍有参考价值,但当前入口已隐藏。这里记录它,只说明代码中已有 skeleton / loaded / error / refresh 形态,不代表它已回到当前可达页面范围。
关键交互规则
表单类
| 交互 | 当前规则 | 真实落点 |
|---|---|---|
| 手机号输入 | 前端先校验格式,再发请求 | PhoneInputScreen |
| 密码输入 | 密码至少 6 位 | PasswordLoginScreen |
| Onboarding 下一步 | 当前步骤合法才允许继续 | OnboardingFlowScreen |
| Onboarding 编辑完成 | 编辑模式下保存后 pop 返回上页并带结果 | ProfilePage -> OnboardingFlowScreen(isEditMode: true) |
导航类
| 交互 | 当前规则 | 真实落点 |
|---|---|---|
| 返回登录 | 退出登录后 pushAndRemoveUntil 清空栈 | ProfilePage |
| 主页跨 tab 跳转 | 通过 navigateToTab(index) 切底部栏 | HomeScreen / DashboardPage |
| 详情页转场 | 优先使用 AppTransitions.* | 登录、设置、运动执行、运动历史等 |
反馈类
| 交互 | 当前规则 | 真实落点 |
|---|---|---|
| 错误反馈 | 轻量错误多用 SnackBar | Auth、Exercise、Prescription |
| 成功反馈 | 成功页、SnackBar、Inline Banner 混合使用 | 注册成功、档案保存、今日状态更新 |
| 删除确认 | 使用 AlertDialog | Chat 会话删除 |
交接检查点
| 检查点 | 应看位置 | 判断方式 |
|---|---|---|
| 页面是否当前可达 | 页面索引、路由文档、入口按钮 | 不能只看 route 是否存在;隐藏入口页需要单独标注 |
| 状态是否由 BLoC 驱动 | lib/bloc/<feature>/ 与页面 BlocBuilder / BlocListener | 识别 loading / loaded / error 是否来自统一状态流 |
| 错误是否可恢复 | 页面错误态、SnackBar、重试按钮 | 只弹 SnackBar 的页面,通常恢复路径依赖用户再次操作 |
| 空态是否有下一步 | 历史、会话、运动记录等列表页 | 有 CTA 的空态可引导动作,纯说明空态只承担告知 |
| 成功后是否清栈 | 主流程跳转表 | 登录、建档、退出等关键动作必须确认返回栈行为 |
| 静态数据是否误写成动态 | Dashboard、Exercise、Settings | 首页统计、运动动作库、设置持久化需要按真实接入状态描述 |
来源锚点
apps/flutter_app/lib/bloc/auth/auth_state.dartapps/flutter_app/lib/bloc/onboarding/onboarding_state.dartapps/flutter_app/lib/bloc/chat/chat_state.dartapps/flutter_app/lib/bloc/exercise/exercise_state.dartapps/flutter_app/lib/bloc/profile_overview/profile_overview_state.dartapps/flutter_app/lib/bloc/health_overview/health_overview_state.dart