# 腾讯云 Chat UIKit 完整集成说明

## ✅ 已完成功能

### 1. 聊天界面组件
- **文件位置**: `admin/src/components/chat-dialog/index.vue`
- **使用官方组件**:
  - `UIKitProvider`: IM SDK 上下文提供者
  - `ConversationList`: 会话列表（左侧）
  - `Chat`: 聊天容器
  - `ChatHeader`: 聊天头部
  - `MessageList`: 消息列表
  - `MessageInput`: 消息输入框

### 2. 已支持的功能
- ✅ **会话管理**: 显示所有聊天会话，支持切换
- ✅ **文本消息**: 发送和接收文本消息
- ✅ **表情选择**: 内置表情选择器，点击表情图标使用
- ✅ **图片上传**: 点击图片图标上传图片
- ✅ **文件上传**: 点击文件图标上传文件
- ✅ **视频上传**: 点击视频图标上传视频
- ✅ **消息状态**: 显示已读/未读状态
- ✅ **实时通信**: WebSocket 实时消息推送

### 3. 登录流程
```typescript
await login({
  sdkAppId: Number(res.sdkAppId),
  userId: res.userId,
  userSig: res.userSig,
  useUploadPlugin: true  // 启用文件上传功能
})
```

## 📝 使用说明

### 基本使用
1. 在预约列表中找到"已预约"状态的记录
2. 点击"聊天"按钮
3. 等待初始化完成（约1-2秒）
4. 开始聊天

### 功能使用
- **发送文本**: 在输入框输入文字，点击"发送"按钮
- **发送表情**: 点击输入框左侧的表情图标 😊
- **发送图片**: 点击图片图标 🖼️，选择图片文件
- **发送文件**: 点击文件图标 📁，选择任意文件
- **发送视频**: 点击视频图标 🎬，选择视频文件

## 🔧 技术实现

### 依赖包
- `@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`: 患者ID
  - `diagnosis_id`: 诊单ID
- **返回**:
  - `sdkAppId`: 腾讯云应用ID
  - `userId`: 医生IM账号
  - `userSig`: 登录签名
  - `patientUserId`: 患者IM账号

## ⚙️ 配置说明

### 后端配置
需要在 `server/.env` 中配置:
```env
[TRTC]
SDK_APP_ID = "1600127710"
SECRET_KEY = "your_secret_key"
ENABLE = "true"
```

### 文件上传配置
- 已启用 `useUploadPlugin: true`
- 支持图片、文件、视频上传
- 需要确保服务器支持 CORS

## 📱 视频通话功能

当前聊天界面已包含基础的消息功能。如需集成音视频通话，需要：

1. 安装 TUICallKit 插件
2. 在 MessageInput 中配置通话按钮
3. 参考文档: https://cloud.tencent.com/document/product/647/115714

## 🎨 界面说明

### 布局结构
```
┌─────────────────────────────────────┐
│          与 患者名 聊天              │
├──────────┬──────────────────────────┤
│          │  ChatHeader              │
│ Conver-  ├──────────────────────────┤
│ sation   │                          │
│ List     │  MessageList             │
│          │                          │
│ (285px)  ├──────────────────────────┤
│          │  MessageInput            │
│          │  [😊][🖼️][📁][🎬]        │
└──────────┴──────────────────────────┘
```

### 组件说明
- **ConversationList**: 左侧会话列表，宽度285px
- **ChatHeader**: 显示当前聊天对象信息
- **MessageList**: 消息展示区域，支持滚动
- **MessageInput**: 输入框和功能按钮

## ⚠️ 注意事项

1. **网络要求**: 需要支持 WebSocket 连接
2. **HTTPS**: 生产环境建议使用 HTTPS
3. **文件大小**: 注意文件上传大小限制
4. **患者端**: 患者端也需要集成相应的 IM 功能
5. **登出**: 关闭对话框时会自动登出 IM

## 🚀 后续优化

1. 集成 TUICallKit 实现音视频通话
2. 添加消息提醒和未读数提示
3. 自定义主题和样式
4. 添加消息撤回功能
5. 支持消息引用和转发
6. 添加聊天记录导出功能

## 📚 参考文档

- [Chat UIKit Vue3 官方文档](https://cloud.tencent.com/document/product/269/123108)
- [IM SDK API 文档](https://cloud.tencent.com/document/product/269/37411)
- [TUICallKit 集成文档](https://cloud.tencent.com/document/product/647/115714)