刘金宝
2.6 KiB
2.6 KiB
医疗问诊 Agent Vue Demo
这是第一版 Demo 的 Vue 3 测试前端，用于展示和验证当前 FastAPI 后端已实现的问诊训练闭环。它不是最终生产 UI，但页面结构、接口封装和状态管理已按后续正式前端扩展保留边界。
技术栈
- Vue 3 + Vite + TypeScript
- Pinia
- Vue Router
- Axios + Fetch SSE
- 原生 CSS，移动端优先
启动
cd D:\Code\newfounder\medical-consultation-agent\frontend
npm.cmd install
npm.cmd run dev -- --host 127.0.0.1 --port 5173
访问：
http://127.0.0.1:5173
构建：
npm.cmd run build
后端配置
默认 API：
http://127.0.0.1:8000/api/v1
所有业务请求都会携带：
X-User-IdX-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 模型耗时 |
测试流程
- 入口页确认连接成功。
- 需要新增病例时进入
#/import，上传.sql文件并先执行“解析检查”，确认通过后再“确认导入”。 - 病例页选择“支气管肺炎 - 6岁男性患儿”或刚导入的新病例。
- 点击“开始训练”，创建练习模式会话。
- Chat 中提问并查看 AI 病人流式回复。
- 点击“查看提示”验证 Hint Agent。
- 申请血常规、CRP、胸片、血氧饱和度、肺部体格检查。
- 完成问诊，提交诊断和治疗方案。
- 生成 AI 评价报告并导出 PDF。
- 历史页刷新并查看报告详情。
交互边界
- 前端不保存长期聊天历史。
- Chat 消息只保存在 Pinia 当前状态中，刷新页面后以当前后端会话状态为准。
- 诊断和治疗表单默认清空；演示模板需要手动点击填入。
- 检查项目按
item_code去重，同一会话不会重复申请同一检查。 - 真实模型、mock 和 fallback 状态由后端
.env决定，前端只展示后端返回结果。