docs: split tech docs into backend/patient/doctor, add prod roadmap, improve upload UI, fix report list for doctors, auto-start frontends in bat
This commit is contained in:
MingNian
232
frontend-doctor/技术文档-医生前端.md
Normal file
232
frontend-doctor/技术文档-医生前端.md
Normal file
@@ -0,0 +1,232 @@
|
||||
# HealthManager 医生前端 — 技术文档
|
||||
|
||||
> PC 端 Web 应用，医生在电脑浏览器中使用。
|
||||
|
||||
---
|
||||
|
||||
## 目录
|
||||
|
||||
1. [文件结构](#1-文件结构)
|
||||
2. [关键文件详解](#2-关键文件详解)
|
||||
3. [页面详解](#3-页面详解)
|
||||
4. [状态管理](#4-状态管理)
|
||||
5. [样式方案](#5-样式方案)
|
||||
6. [常见问题 FAQ](#6-常见问题-faq)
|
||||
|
||||
---
|
||||
|
||||
## 1. 文件结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── main.tsx ← 应用入口
|
||||
├── App.tsx ← 根组件
|
||||
├── router/
|
||||
│ ├── index.tsx ← URL 和页面映射
|
||||
│ └── AuthGuard.tsx ← 路由守卫
|
||||
├── stores/
|
||||
│ └── auth.store.ts ← 认证状态（唯一的状态管理）
|
||||
├── services/
|
||||
│ └── api-client.ts ← HTTP 客户端
|
||||
├── types/
|
||||
│ └── index.ts ← 所有类型定义
|
||||
├── components/
|
||||
│ └── layout/
|
||||
│ └── DoctorLayout.tsx ← 主布局：侧边栏 + 内容区
|
||||
└── pages/
|
||||
├── auth/
|
||||
│ └── LoginPage.tsx ← 登录页
|
||||
├── dashboard/
|
||||
│ └── DashboardPage.tsx ← 工作台首页
|
||||
├── patients/
|
||||
│ ├── PatientListPage.tsx ← 患者列表
|
||||
│ └── PatientDetailPage.tsx ← 患者详情
|
||||
├── consultations/
|
||||
│ ├── ConsultationListPage.tsx ← 咨询列表
|
||||
│ └── ChatPage.tsx ← 聊天页
|
||||
├── reports/
|
||||
│ ├── ReportListPage.tsx ← 报告列表
|
||||
│ └── ReportDetailPage.tsx ← 报告解读
|
||||
├── followups/
|
||||
│ ├── FollowUpListPage.tsx ← 随访列表
|
||||
│ └── FollowUpEditPage.tsx ← 新建/编辑随访
|
||||
└── settings/
|
||||
└── ProfilePage.tsx ← 个人资料
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 关键文件详解
|
||||
|
||||
### 2.1 `components/layout/DoctorLayout.tsx` — 主布局
|
||||
|
||||
医生端所有页面的"壳"。左侧深蓝色侧边栏（`#0F1D3D`，220px 宽），右侧白色内容区。
|
||||
|
||||
**侧边栏内容**：
|
||||
- Logo："♥ 健康管家" + "医生工作台"
|
||||
- **导航菜单**（5 项）：工作台、患者管理、在线问诊、报告审核、随访管理
|
||||
- 当前菜单项蓝底高亮，其他灰色
|
||||
- 底部：医生姓名 + 科室职称 + 退出按钮
|
||||
|
||||
使用 React Router 的 `<NavLink>` + `<Outlet>` 实现。
|
||||
|
||||
### 2.2 `stores/auth.store.ts` — 认证状态
|
||||
|
||||
**和患者端的区别**：
|
||||
- 存储键 `doc_auth`（患者端是 `hrt_auth`）
|
||||
- 登录后验证 `role === 'doctor'`，否则报错"仅限医生账号登录"
|
||||
- 登录成功后额外调 `GET /api/auth/me` 获取医生完整资料
|
||||
- 使用 `persist` 中间件持久化到 localStorage
|
||||
|
||||
**接口**：
|
||||
```ts
|
||||
interface AuthState {
|
||||
user: User | null;
|
||||
token: string | null;
|
||||
isAuthenticated: boolean;
|
||||
login(phone, code): Promise<void>;
|
||||
logout(): void;
|
||||
updateProfile(data): void;
|
||||
}
|
||||
```
|
||||
|
||||
### 2.3 `services/api-client.ts` — HTTP 客户端
|
||||
|
||||
与患者端逻辑相同：
|
||||
- 公开接口（login 等）不附加令牌
|
||||
- 其他请求自动带 `Authorization: Bearer xxx`
|
||||
- 401 → 清除 `doc_auth` + 跳转 `/login`
|
||||
- 统一包装响应为 `{ code, data, message }`
|
||||
|
||||
---
|
||||
|
||||
## 3. 页面详解
|
||||
|
||||
### 登录页 `LoginPage.tsx`
|
||||
|
||||
- 手机号 + 验证码输入
|
||||
- 演示医生账号：`13700137000`，验证码随便填
|
||||
- 成功后跳工作台
|
||||
|
||||
### 工作台 `DashboardPage.tsx`
|
||||
|
||||
- 顶部："欢迎回来，王建国"
|
||||
- **4 个统计卡片**：患者总数（蓝）、进行中问诊（绿）、待审核报告（橙）、今日随访（紫）
|
||||
- **快捷操作**：患者列表、在线问诊、报告审核、随访管理（用 `<Link>` 跳转）
|
||||
- **今日待办**：列出待审核报告数、进行中问诊数、今日随访数
|
||||
|
||||
### 患者管理
|
||||
|
||||
**患者列表 `PatientListPage.tsx`**：
|
||||
- 搜索框，支持按姓名/手机号过滤
|
||||
- 表格：姓名、手机号、性别、支架日期、支架类型
|
||||
- 点击进入详情
|
||||
|
||||
**患者详情 `PatientDetailPage.tsx`**：
|
||||
- 调 `GET /api/patients/{id}` 获取基本信息
|
||||
- 调 `GET /api/health-records?patientId={id}&days=30` 获取健康数据
|
||||
- 显示：姓名、手机、性别、身高体重、病史、最近健康数据卡片
|
||||
|
||||
### 在线问诊
|
||||
|
||||
**咨询列表 `ConsultationListPage.tsx`**：
|
||||
- 所有分配给当前医生的咨询
|
||||
- 每条：患者姓名、主题、状态标签（进行中/已结束）、日期
|
||||
- 点击进入聊天
|
||||
|
||||
**聊天页 `ChatPage.tsx`**：
|
||||
- 对话气泡界面
|
||||
- 医生消息靠右蓝色，患者消息靠左白色
|
||||
- 输入框 + 发送按钮（Enter 发送）
|
||||
|
||||
### 报告审核
|
||||
|
||||
**报告列表 `ReportListPage.tsx`**：
|
||||
- 表格：患者、标题、分类、状态、日期、操作
|
||||
- 状态：待审核（橙）/ 已完成（绿）
|
||||
- 点"查看"进详情
|
||||
|
||||
**报告详情 `ReportDetailPage.tsx`**：
|
||||
- 报告基本信息 + 图片列表
|
||||
- **如果未解读**：文本框 + 提交按钮 → 调 `POST /reports/{id}/interpret`
|
||||
- **如果已解读**：显示解读结果（总结、风险等级、各检查项、建议）
|
||||
|
||||
### 随访管理
|
||||
|
||||
**随访列表 `FollowUpListPage.tsx`**：
|
||||
- 每条：标题、患者、日期、状态（待随访/已完成/已错过）
|
||||
- "+ 新建随访"按钮 → 跳编辑页
|
||||
- "编辑"链接 → 跳编辑页
|
||||
|
||||
**随访编辑 `FollowUpEditPage.tsx`**：
|
||||
- 新建：空白表单，POST 创建
|
||||
- 编辑：预填现有数据，PUT 更新
|
||||
- 字段：标题、患者选择、计划时间、备注
|
||||
|
||||
### 个人设置 `ProfilePage.tsx`
|
||||
|
||||
- 预填姓名、手机号（不可改）、科室、职称、简介
|
||||
- 修改后调 `PUT /api/auth/me` 保存
|
||||
|
||||
---
|
||||
|
||||
## 4. 状态管理
|
||||
|
||||
医生端只有一个 Zustand Store（`auth.store`），比患者端更简单。因为医生端核心需求是"管理数据"，不像患者端有通知等高频变化的状态。
|
||||
|
||||
| Store | 存储键 | 持久化 | 内容 |
|
||||
|-------|--------|--------|------|
|
||||
| `auth.store` | `doc_auth` | ✓ localStorage | user, token, isAuthenticated |
|
||||
|
||||
---
|
||||
|
||||
## 5. 样式方案
|
||||
|
||||
医生端使用**内联样式（inline style）**，每个组件直接在 JSX 中写 `style={{...}}`。
|
||||
|
||||
**优点**：
|
||||
- 样式和组件紧密绑定，无冲突
|
||||
- 不需要额外 CSS 文件
|
||||
- 适合组件数量不多的项目
|
||||
|
||||
**全局基础**在 `src/index.css` 中（CSS 变量、字体、基础布局）。
|
||||
|
||||
---
|
||||
|
||||
## 6. 常见问题 FAQ
|
||||
|
||||
### Q1: 医生端怎么启动？
|
||||
|
||||
```bash
|
||||
cd frontend-doctor
|
||||
npm run dev
|
||||
# 浏览器打开 http://localhost:5174
|
||||
```
|
||||
|
||||
### Q2: 演示医生账号是什么？
|
||||
|
||||
手机号 `13700137000`（王建国），验证码随便填。
|
||||
|
||||
### Q3: 和患者端有什么区别？
|
||||
|
||||
| 对比 | 患者端 | 医生端 |
|
||||
|------|--------|--------|
|
||||
| 端口 | 5173 | 5174 |
|
||||
| 存储键 | `hrt_auth` | `doc_auth` |
|
||||
| 布局 | 底部 TabBar | 左侧 Sidebar |
|
||||
| 目标设备 | 手机 H5 | PC 浏览器 |
|
||||
| 样式 | CSS Modules | Inline Style |
|
||||
|
||||
### Q4: 为什么医生看报告列表是空的？
|
||||
|
||||
报告列表调 `GET /api/reports`，医生角色会返回全部患者报告。如果为空，检查：
|
||||
- 患者端是否上传了报告
|
||||
- 后端是否运行（`ERR_CONNECTION_REFUSED` 则是后端没启动）
|
||||
|
||||
### Q5: 状态栏是怎么高亮的？
|
||||
|
||||
使用 React Router 的 `<NavLink>` 组件，`style` 回调中的 `isActive` 参数判断当前 URL 是否匹配。
|
||||
|
||||
---
|
||||
|
||||
> 文档版本：v1.0 | 最后更新：2026-05-20 | 医生前端技术文档
|
||||
Reference in New Issue
Block a user