# 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 | 医生前端技术文档