zyt/CHAT_INTEGRATION.md

腾讯云 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. 可以优化样式加载方式，确保样式稳定加载