zhaoshutiao/muyingbaogaojiedu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
muyingbaogaojiedu/前端-孕期报告解读-figma/APPLICATION_FLOW.md
shutiaozhao127-boop cfdeeb5e41 chore: 初始化项目结构并添加基础配置文件 
添加后端API和前端项目的初始目录结构，包括应用层模块、工具模块和模型定义
配置前后端的.dockerignore文件以排除开发环境文件
添加前端样式文件，包括字体、Tailwind CSS和主题配置
初始化Python虚拟环境中的类型标记文件
2026-04-01 16:55:24 +08:00

6.1 KiB
Raw Permalink Blame History

孕期健康检查报告解读应用 - 完整流程

📱 应用架构概览

本应用包含三个核心模块，共7个页面，完整覆盖从用户登录到AI报告解读的全流程。

🎯 模块一：登录与初始化

1. 登录页面 (LoginPage)

路由: /

功能:

  • 支持微信、手机号、Apple ID 快捷登录
  • 温馨的欢迎文案和视觉设计
  • 隐私保护说明

导航:

  • 登录成功后 → /onboarding (首次用户)
  • 登录成功后 → /home (老用户)

2. 用户画像页面 (OnboardingPage)

路由: /onboarding

功能:

  • 收集孕周信息（末次月经日期 / 直接输入孕周）
  • 收集预产期
  • 收集孕妈基本信息（年龄、身高、体重等）
  • 情感化设计，温馨的引导文案

导航:

  • 完成设置后 → /home

🎯 模块二：报告采集与录入

3. 首页 (HomePage)

路由: /home

功能:

  • 显示当前孕周信息
  • 快捷操作：拍照录入、趋势分析
  • 报告列表展示（带三色预警标识）
  • 孕期小贴士
  • 浮动"+"按钮快速添加报告

导航:

  • 点击"拍照录入"按钮 → /camera
  • 点击浮动"+"按钮 → /camera
  • 点击报告列表项 → /analysis/:reportId

4. OCR 拍照页面 (CameraCapturePage)

路由: /camera

功能:

  • 实时相机预览
  • 智能取景框引导
  • 拍摄提示（光线、角度、防抖）
  • AI OCR 识别提示
  • 隐私自动脱敏说明
  • 重拍/确认功能
  • 相册导入选项

导航:

  • 点击返回 → /home
  • 确认拍照后 → /review (数据校对页面)

5. 数据校对页面 (DataVerificationPage)

路由: /review 或 /verify

功能:

  • OCR识别结果展示
  • 分类折叠展示（血液检查、激素水平等）
  • Inline 编辑功能（点击即改）
  • 三色预警标识（正常/注意/异常）
  • 补充录入区域（自觉症状、备注）
  • 错误提示和修正引导
  • 隐私脱敏数据显示（姓名、身份证等）

导航:

  • 点击返回 → /camera
  • 点击"完成校对，生成解读" → /analysis/:reportId

🎯 模块三：AI 解读

6. AI 智能解读页面 (AIAnalysisPage)

路由: /analysis/:reportId

功能:

  • 整体评估卡片（三色状态、综合风险评级）
  • 分类详细解读
    • 血液指标、激素水平等
    • 每项指标包含：
      • 术语白话化（如"血液中的'氧气快递员'"）
      • 通俗解释（这是什么？）
      • 影响说明（对宝宝的影响）
      • 行动建议（建议措施）
      • 复查提醒
  • 行动建议列表（优先级排序：高/中/低）
  • 温馨提示
  • 情感化文案（"宝宝发育良好"而非"正常"）

导航:

  • 点击返回 → /home
  • 点击"查看原始报告" → /report/:reportId
  • 分享/下载功能

7. 报告详情页面 (ReportDetailPage)

路由: /report/:reportId

功能:

  • 完整报告数据表格展示
  • 原始检查数据
  • 参考范围对比
  • 历史趋势图表（如有）
  • 打印/导出功能

导航:

  • 点击返回 → /analysis/:reportId
  • 点击"AI解读" → /analysis/:reportId

🔄 完整用户流程示例

新用户首次使用流程:

1. 打开应用 (/)
   ↓
2. 选择登录方式（微信/手机/Apple ID）
   ↓
3. 进入用户画像设置 (/onboarding)
   - 输入孕周信息
   - 输入个人信息
   ↓
4. 进入首页 (/home)
   - 查看孕周卡片
   - 浏览孕期小贴士
   ↓
5. 点击"拍照录入"或浮动"+" (/camera)
   - 拍摄检查报告
   - AI OCR 识别
   ↓
6. 数据校对 (/review)
   - 检查识别结果
   - 修正错误数据
   - 补充症状信息
   ↓
7. 生成AI解读 (/analysis/1)
   - 查看整体评估
   - 阅读详细解读
   - 了解行动建议
   ↓
8. （可选）查看原始报告 (/report/1)
   - 查看完整数据表格

老用户日常使用流程:

1. 打开应用 (/)
   ↓
2. 自动登录跳转到首页 (/home)
   ↓
3. 查看历史报告列表
   ↓
4. 点击某个报告查看AI解读 (/analysis/1)
   ↓
5. 或添加新报告 (/camera)

📋 页面完整列表

页面 路由 所属模块 核心功能
LoginPage / 模块一 用户登录
OnboardingPage /onboarding 模块一 用户画像创建
HomePage /home 模块二 报告管理中心
CameraCapturePage /camera 模块二 OCR 拍照
DataVerificationPage /review 模块二 数据校对
AIAnalysisPage /analysis/:reportId 模块三 AI 智能解读
ReportDetailPage /report/:reportId 模块三 原始报告详情

🎨 情感化设计特色

  1. 温和的视觉语言

    • 柔和的渐变色（粉色、紫色、蓝色）
    • 圆角设计（rounded-2xl, rounded-3xl）
    • 柔和的阴影效果

  2. 关怀的文案

    • "宝宝发育良好" vs "正常值"
    • "血液中的'氧气快递员'" vs "血红蛋白"
    • "孕育无忧" vs "报告系统"

  3. 三色预警系统

    • 🟢 绿色：正常，宝宝发育良好
    • 🟠 橙色：需关注，有改善建议
    • 🔴 红色：异常，需及时就医

  4. 情感化图标

    • 💕 心形图标表达关爱
    • 👶 宝宝图标增加亲近感
    • 🎉 庆祝图标鼓励积极情绪

🔒 隐私保护

  • 自动脱敏个人信息（姓名、身份证、电话等）
  • 本地加密存储
  • 数据传输安全提示
  • 隐私保护说明文案

📱 技术栈

  • 前端框架: React + TypeScript
  • 样式方案: Tailwind CSS v4
  • 路由管理: React Router v7
  • 动画库: Motion (Framer Motion)
  • 图标库: Lucide React
  • UI 组件: 自定义组件库

🚀 快速测试流程

  1. 访问 / - 看到登录页面
  2. 点击任意登录方式 - 跳转到 /onboarding
  3. 填写用户信息 - 跳转到 /home
  4. 点击"拍照录入" - 跳转到 /camera
  5. 点击拍摄按钮 - 模拟拍照
  6. 点击"确认使用" - 跳转到 /review
  7. 检查数据并点击"完成校对" - 跳转到 /analysis/1
  8. 查看AI解读 - 可点击"查看原始报告"跳转到 /report/1

所有模块都已完整实现！ ✅

Reference in New Issue View Git Blame Copy Permalink