85 lines
2.8 KiB
Markdown
85 lines
2.8 KiB
Markdown
# 腾讯云 Chat UIKit 集成说明
|
||
|
||
## 功能概述
|
||
|
||
已成功将腾讯云 Chat UIKit Vue3 组件集成到预约管理系统的"聊天"按钮中，使用官方推荐的组件化方式。
|
||
|
||
## 实现内容
|
||
|
||
### 1. 创建聊天对话框组件
|
||
- 文件位置: `admin/src/components/chat-dialog/index.vue`
|
||
- 功能特性:
|
||
- 使用 Element Plus Dialog 作为容器
|
||
- 集成腾讯云 Chat UIKit 的官方组件：
|
||
- UIKitProvider: 提供 IM SDK 上下文
|
||
- ConversationList: 会话列表组件
|
||
- Chat: 聊天消息组件
|
||
- 自动获取医生签名并初始化聊天
|
||
- 加载状态和错误处理
|
||
- 响应式布局：左侧会话列表（300px）+ 右侧聊天区域
|
||
- 动态加载样式文件
|
||
|
||
### 2. 集成到预约列表页面
|
||
- 文件位置: `admin/src/views/tcm/appointment/list.vue`
|
||
- 修改内容:
|
||
- 导入 ChatDialog 组件
|
||
- 添加 chatDialogRef 引用
|
||
- 修改 handleCreatePrescription 方法，传递患者信息和诊单ID
|
||
- 在模板中添加 chat-dialog 组件
|
||
|
||
### 3. 使用的 API
|
||
- 复用现有的 `getCallSignature` API (`/tcm.diagnosis/getCallSignature`)
|
||
- 该接口返回腾讯云 IM 所需的:
|
||
- sdkAppId: 应用 ID
|
||
- userId: 当前用户 ID (医生)
|
||
- userSig: 用户签名
|
||
- patientUserId: 患者的 IM 用户 ID
|
||
|
||
### 4. 使用的组件
|
||
根据腾讯云官方文档 (https://cloud.tencent.com/document/product/269/123108)：
|
||
- `UIKitProvider`: 提供 SDK 配置和上下文
|
||
- `ConversationList`: 显示会话列表
|
||
- `Chat`: 显示聊天消息和输入框
|
||
|
||
## 使用方式
|
||
|
||
1. 在预约列表中找到状态为"已预约"的记录
|
||
2. 点击操作列中的"聊天"按钮
|
||
3. 系统会自动:
|
||
- 获取医生的腾讯云 IM 签名
|
||
- 初始化聊天组件
|
||
- 打开聊天对话框
|
||
4. 在对话框中可以:
|
||
- 查看左侧的会话列表
|
||
- 在右侧与患者进行实时聊天
|
||
- 发送文本、表情、图片等消息
|
||
|
||
## 技术栈
|
||
|
||
- @tencentcloud/chat-uikit-vue3: ^4.5.4
|
||
- @tencentcloud/chat: IM SDK
|
||
- Element Plus: 对话框和 UI 组件
|
||
- Vue 3 Composition API
|
||
|
||
## 样式处理
|
||
|
||
由于 Vite 对 node_modules 中 CSS 文件的导入限制，样式文件采用动态导入方式：
|
||
- 在组件 onMounted 时动态导入样式
|
||
- 如果样式加载失败，功能仍可正常使用，只是缺少部分美化
|
||
|
||
## 注意事项
|
||
|
||
1. 需要确保后端 `/tcm.diagnosis/getCallSignature` 接口正常工作
|
||
2. 需要配置腾讯云 IM 的 SDKAppID 和密钥
|
||
3. 聊天功能需要患者端也集成相应的 IM 功能
|
||
4. 确保网络环境支持 WebSocket 连接
|
||
5. 会话ID格式为 `C2C{patientUserId}`，表示单聊（C2C = Client to Client）
|
||
|
||
## 后续优化建议
|
||
|
||
1. 可以自定义聊天界面的主题和样式
|
||
2. 可以添加消息提醒功能
|
||
3. 可以添加聊天记录的持久化存储
|
||
4. 可以添加更多富媒体消息类型（语音、视频等）
|
||
5. 可以优化样式加载方式，确保样式稳定加载
|