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