card_demo/medical-card-demo

医疗智能卡片挂号演示系统

基于 SpringBoot + LangChain4J + Vue 的卡片式医疗挂号演示系统，实现对话式AI导诊和智能挂号功能。

功能特性

核心功能

• 智能病情分析：用户描述病情后，系统自动分析并推荐合适的科室
• 科室选择卡片：以卡片形式展示推荐的3-5个科室，支持下拉选择
• 医生排班卡片：展示医生列表、日期选择和15分钟间隔的排班信息
• 挂号成功卡片：显示挂号详情和支付二维码

技术亮点

• 对话式交互：基于自然语言的流畅对话体验
• 卡片式UI：渐进式信息披露，降低用户认知负荷
• SSE流式响应：实时推送AI回复和卡片数据
• 移动端优先：完美适配手机端展示

技术栈

层级	技术
后端	SpringBoot 3.2 + LangChain4J 0.25
前端	Vue 3.3 + Pinia
构建工具	Maven + npm
其他	ZXing (二维码生成)

项目结构

medical-card-demo/
├── backend/                    # SpringBoot 后端
│   ├── src/main/java/         # Java 源代码
│   │   └── com/medical/demo/
│   │       ├── controller/    # API 控制器
│   │       ├── service/       # 业务逻辑
│   │       └── dto/           # 数据传输对象
│   ├── src/main/resources/    # 配置文件
│   └── pom.xml                # Maven 配置
├── frontend/                   # Vue 前端
│   ├── src/
│   │   ├── components/        # 组件
│   │   │   ├── cards/         # 卡片组件
│   │   │   └── ChatInterface.vue
│   │   ├── api/               # API 接口
│   │   └── App.vue
│   ├── public/
│   └── package.json
├── build.sh                    # 构建脚本
├── start.sh                    # 启动脚本
└── README.md                   # 项目文档

快速开始

环境要求

• Java 17 或更高版本
• Maven 3.6+
• Node.js 16+

一键启动（推荐）

# 进入后端目录
cd medical-card-demo/backend

cd "E:/java/emoon/card_robot_demo/medical-card-demo/backend"

cd E:/java/emoon/card_robot_demo/medical-card-demo/backend
./startup.sh
# 运行一键启动脚本
./startup.sh

启动脚本会自动完成：

1. 检查环境依赖（Java、Maven、Node.js）
2. 安装前端依赖（首次）
3. 构建前端项目
4. 复制前端资源到后端
5. 启动SpringBoot应用（端口3381）

应用启动后：后端 JAR 为 http://localhost:3381；一键脚本末尾会启动前端开发服（默认 http://localhost:8080，API 代理至 3381）。

手动启动（开发模式）

如果需要分别启动前后端进行开发：

# 终端1 - 启动后端
cd medical-card-demo/backend
mvn spring-boot:run

# 终端2 - 启动前端（开发服务器）
cd medical-card-demo/frontend
npm install  # 首次需要安装依赖
npm run serve

打包部署

cd medical-card-demo/backend

# 先构建前端
cd ../frontend
npm install
npm run build

# 再打包后端（会自动复制前端资源）
cd ../backend
mvn clean package

# 运行打包后的JAR
java -jar target/RobotMedicalCardDemo.jar

使用指南

演示流程

1. 描述病情

   • 在输入框中描述您的症状
   • 例如："我头疼发烧，应该挂什么科？"

2. 选择科室

   • 系统会推荐3-5个合适的科室
   • 从下拉菜单中选择科室
   • 点击"确认选择"

3. 选择医生和排班

   • 选择医生（下拉菜单）
   • 选择就诊日期（今天/明天/后天）
   • 选择排班时间（15分钟间隔，20%概率显示已约满）
   • 点击"确认挂号"

4. 完成挂号

   • 查看挂号详情
   • 扫描二维码完成缴费（演示用）

支持的病情关键词

系统支持以下常见症状识别：

• 发烧、咳嗽、感冒 → 内科/呼吸内科/儿科
• 头痛、头晕 → 神经内科/内科
• 胃痛、肚子疼、腹泻 → 消化内科/内科/外科
• 胸闷、心慌、高血压 → 心血管内科/内科
• 骨折、关节疼痛、腰疼 → 骨科/外科
• 眼睛、视力问题 → 眼科
• 耳朵、鼻子、喉咙 → 耳鼻喉科
• 皮肤、皮疹、过敏 → 皮肤科
• 妇科、月经、怀孕 → 妇产科
• 孩子、儿童、宝宝 → 儿科

API 接口

聊天消息

POST /api/v1/chat/messages
Content-Type: application/json

{
  "query": "我头疼发烧",
  "conversationId": ""
}

选择科室

POST /api/v1/chat/select-department?conversationId=xxx&departmentId=dept_001

选择医生

POST /api/v1/chat/select-doctor?conversationId=xxx&doctorId=doc_xxx&date=2026-02-15

创建挂号

POST /api/v1/chat/appointment
Content-Type: application/json

{
  "departmentId": "dept_001",
  "doctorId": "doc_xxx",
  "date": "2026-02-15",
  "scheduleId": "slot_001",
  "timeSlot": "09:00-09:15",
  "conversationId": "xxx"
}

卡片交互设计

本项目参考了 medical-agent-card-interaction-design.md 中的设计原理：

设计原则

1. 对话优先原则：所有操作通过自然语言触发
2. 渐进式披露：复杂流程分步骤展示
3. 可组合性：卡片作为独立单元灵活组合
4. 移动端适配：优先适配手机端体验

卡片类型

• department-selection：科室选择卡片
• doctor-selection：医生排班选择卡片
• appointment-success：挂号成功卡片

开发说明

后端开发

cd backend

# 开发模式运行
mvn spring-boot:run

# 运行测试
mvn test

# 打包
mvn clean package

前端开发

cd frontend

# 安装依赖
npm install

# 开发模式运行
npm run serve

# 构建生产版本
npm run build

注意事项

1. 演示性质：本项目仅用于演示，数据为模拟生成
2. LangChain4J：当前使用关键词匹配模拟AI推荐，可接入真实LLM
3. 二维码：生成的二维码仅作演示，无法真实支付
4. 数据存储：使用内存存储，重启后数据丢失

浏览器兼容性

• Chrome 90+
• Safari 14+
• Firefox 88+
• Edge 90+

推荐使用 Chrome 移动端模拟器进行演示

许可证

MIT License

联系方式

如有问题或建议，欢迎反馈。