257 lines
6.1 KiB
Markdown
257 lines
6.1 KiB
Markdown
# 孕期健康检查报告解读应用 - 完整流程
|
||
|
||
## 📱 应用架构概览
|
||
|
||
本应用包含三个核心模块，共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`
|
||
|
||
---
|
||
|
||
**所有模块都已完整实现！** ✅
|