feat: 初始化孕育无忧全栈项目基础代码结构

完成项目初始搭建,包含后端FastAPI+MongoDB服务、前端React+Vite项目的完整基础结构,添加各类配置文件与依赖清单,涵盖核心业务初始框架。
This commit is contained in:
2026-05-21 00:46:48 +08:00
commit 409dabafb5
142 changed files with 31010 additions and 0 deletions

View File

@@ -0,0 +1,256 @@
# 孕期健康检查报告解读应用 - 完整流程
## 📱 应用架构概览
本应用包含三个核心模块,共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`
---
**所有模块都已完整实现!** ✅