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

## 📱 应用架构概览

本应用包含三个核心模块，共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`

---

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