Files

MingNian 51c7c89ec5 docs: split tech docs into backend/patient/doctor, add prod roadmap, improve upload UI, fix report list for doctors, auto-start frontends in bat

2026-05-21 11:21:43 +08:00

7.2 KiB

Raw Blame History

HealthManager 医生前端 — 技术文档

PC 端 Web 应用，医生在电脑浏览器中使用。

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

接口：

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: 医生端怎么启动？

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

7.2 KiB Raw Blame History Unescape Escape