4.5 KiB
4.5 KiB
腾讯云 Chat UIKit 完整集成说明
✅ 已完成功能
1. 聊天界面组件
- 文件位置:
admin/src/components/chat-dialog/index.vue - 使用官方组件:
UIKitProvider: IM SDK 上下文提供者ConversationList: 会话列表（左侧）Chat: 聊天容器ChatHeader: 聊天头部MessageList: 消息列表MessageInput: 消息输入框
2. 已支持的功能
- ✅ 会话管理: 显示所有聊天会话，支持切换
- ✅ 文本消息: 发送和接收文本消息
- ✅ 表情选择: 内置表情选择器，点击表情图标使用
- ✅ 图片上传: 点击图片图标上传图片
- ✅ 文件上传: 点击文件图标上传文件
- ✅ 视频上传: 点击视频图标上传视频
- ✅ 消息状态: 显示已读/未读状态
- ✅ 实时通信: WebSocket 实时消息推送
3. 登录流程
await login({
sdkAppId: Number(res.sdkAppId),
userId: res.userId,
userSig: res.userSig,
useUploadPlugin: true // 启用文件上传功能
})
📝 使用说明
基本使用
- 在预约列表中找到"已预约"状态的记录
- 点击"聊天"按钮
- 等待初始化完成（约1-2秒）
- 开始聊天
功能使用
- 发送文本: 在输入框输入文字，点击"发送"按钮
- 发送表情: 点击输入框左侧的表情图标 😊
- 发送图片: 点击图片图标 🖼️，选择图片文件
- 发送文件: 点击文件图标 📁，选择任意文件
- 发送视频: 点击视频图标 🎬，选择视频文件
🔧 技术实现
依赖包
@tencentcloud/chat-uikit-vue3: ^4.5.4@tencentcloud/chat: IM SDK（自动依赖）
样式文件
- 复制到:
admin/src/assets/chat-uikit.css - 导入方式:
import '@/assets/chat-uikit.css'
API 接口
- 接口:
/tcm.diagnosis/getCallSignature - 参数:
patient_id: 患者IDdiagnosis_id: 诊单ID
- 返回:
sdkAppId: 腾讯云应用IDuserId: 医生IM账号userSig: 登录签名patientUserId: 患者IM账号
⚙️ 配置说明
后端配置
需要在 server/.env 中配置:
[TRTC]
SDK_APP_ID = "1600127710"
SECRET_KEY = "your_secret_key"
ENABLE = "true"
文件上传配置
- 已启用
useUploadPlugin: true - 支持图片、文件、视频上传
- 需要确保服务器支持 CORS
📱 视频通话功能
当前聊天界面已包含基础的消息功能。如需集成音视频通话，需要：
- 安装 TUICallKit 插件
- 在 MessageInput 中配置通话按钮
- 参考文档: https://cloud.tencent.com/document/product/647/115714
🎨 界面说明
布局结构
┌─────────────────────────────────────┐
│ 与 患者名 聊天 │
├──────────┬──────────────────────────┤
│ │ ChatHeader │
│ Conver- ├──────────────────────────┤
│ sation │ │
│ List │ MessageList │
│ │ │
│ (285px) ├──────────────────────────┤
│ │ MessageInput │
│ │ [😊][🖼️][📁][🎬] │
└──────────┴──────────────────────────┘
组件说明
- ConversationList: 左侧会话列表，宽度285px
- ChatHeader: 显示当前聊天对象信息
- MessageList: 消息展示区域，支持滚动
- MessageInput: 输入框和功能按钮
⚠️ 注意事项
- 网络要求: 需要支持 WebSocket 连接
- HTTPS: 生产环境建议使用 HTTPS
- 文件大小: 注意文件上传大小限制
- 患者端: 患者端也需要集成相应的 IM 功能
- 登出: 关闭对话框时会自动登出 IM
🚀 后续优化
- 集成 TUICallKit 实现音视频通话
- 添加消息提醒和未读数提示
- 自定义主题和样式
- 添加消息撤回功能
- 支持消息引用和转发
- 添加聊天记录导出功能