141 lines
4.5 KiB
Markdown
141 lines
4.5 KiB
Markdown
# 腾讯云 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)
|