# 医疗问诊 Agent Vue Demo

这是第一版 Demo 的 Vue 3 测试前端，用于展示和验证当前 FastAPI 后端已实现的问诊训练闭环。它不是最终生产 UI，但页面结构、接口封装和状态管理已按后续正式前端扩展保留边界。

## 技术栈

- Vue 3 + Vite + TypeScript
- Pinia
- Vue Router
- Axios + Fetch SSE
- 原生 CSS，移动端优先

## 启动

```powershell
cd D:\Code\newfounder\medical-consultation-agent\frontend
npm.cmd install
npm.cmd run dev -- --host 127.0.0.1 --port 5173
```

访问：

```text
http://127.0.0.1:5173
```

构建：

```powershell
npm.cmd run build
```

## 后端配置

默认 API：

```text
http://127.0.0.1:8000/api/v1
```

所有业务请求都会携带：

- `X-User-Id`
- `X-Entry-Scene`

入口页可修改 `user_id`、API Base 和入口场景。默认 `user_id` 为 `demo_user_001`。

## 页面与功能

| 页面 | 路由 | 主要功能 |
|---|---|---|
| 入口 | `#/` | 配置 user_id/API Base，调用 Agent Hello |
| 病例 | `#/cases` | 病例列表、病例详情、开始训练 |
| 病例导入 | `#/import` | 上传接口解析后的 SQL，预检并确认写入病例源表 |
| 会话配置 | `#/session` | 选择模式、评分类型并创建会话 |
| 问诊 | `#/chat` | 普通/流式 Chat、查看提示、检查申请、完成问诊 |
| 提交 | `#/submit` | 提交诊断和治疗方案 |
| 报告 | `#/report` | 生成评价、查看评分、导出 PDF |
| 历史 | `#/history` | 查询当前 user_id 的历史评价 |
| LLM 测试 | `#/llm-test` | 测试 Fast/Reason 模型耗时 |

## 测试流程

1. 入口页确认连接成功。
2. 需要新增病例时进入 `#/import`，上传 `.sql` 文件并先执行“解析检查”，确认通过后再“确认导入”。
3. 病例页选择“支气管肺炎 - 6岁男性患儿”或刚导入的新病例。
4. 点击“开始训练”，创建练习模式会话。
5. Chat 中提问并查看 AI 病人流式回复。
6. 点击“查看提示”验证 Hint Agent。
7. 申请血常规、CRP、胸片、血氧饱和度、肺部体格检查。
8. 完成问诊，提交诊断和治疗方案。
9. 生成 AI 评价报告并导出 PDF。
10. 历史页刷新并查看报告详情。

## 交互边界

- 前端不保存长期聊天历史。
- Chat 消息只保存在 Pinia 当前状态中，刷新页面后以当前后端会话状态为准。
- 诊断和治疗表单默认清空；演示模板需要手动点击填入。
- 检查项目按 `item_code` 去重，同一会话不会重复申请同一检查。
- 真实模型、mock 和 fallback 状态由后端 `.env` 决定，前端只展示后端返回结果。