278 lines
6.3 KiB
Markdown
278 lines
6.3 KiB
Markdown
# 聊天与视频通话集成完成
|
||
|
||
## 解决方案
|
||
|
||
采用**分离架构**，避免 TUICallKit 与 Chat UIKit 的初始化冲突：
|
||
|
||
1. **聊天对话框** (`admin/src/components/chat-dialog/index.vue`)
|
||
- 只初始化 Chat UIKit（IM 聊天系统）
|
||
- 提供视频通话按钮
|
||
- 通过事件通知父组件发起视频通话
|
||
|
||
2. **视频通话组件** (`admin/src/components/video-call/index.vue`)
|
||
- 独立的浮动窗口
|
||
- 独立初始化 TUICallKit
|
||
- 可拖拽、可调整大小
|
||
|
||
## 功能特性
|
||
|
||
### 聊天功能
|
||
- ✅ 文字聊天
|
||
- ✅ 表情发送
|
||
- ✅ 图片上传
|
||
- ✅ 文件上传
|
||
- ✅ 视频上传
|
||
- ✅ 会话列表
|
||
- ✅ 消息历史
|
||
|
||
### 视频通话功能
|
||
- ✅ 1v1 视频通话
|
||
- ✅ 群组视频通话
|
||
- ✅ 通话状态监听
|
||
- ✅ 浮动窗口显示
|
||
- ✅ 窗口拖拽和调整大小
|
||
|
||
## 使用流程
|
||
|
||
### 1. 打开聊天界面
|
||
```typescript
|
||
// 在预约列表点击"聊天"按钮
|
||
chatDialogRef.value?.open({
|
||
patientId: row.patient_id,
|
||
patientName: row.patient_name,
|
||
diagnosisId: row.diagnosis_id || row.id
|
||
})
|
||
```
|
||
|
||
### 2. 在聊天界面发起视频通话
|
||
- 点击聊天界面右上角的"视频通话"按钮
|
||
- 触发 `@video-call` 事件
|
||
- 父组件接收事件并打开独立的视频通话窗口
|
||
|
||
### 3. 视频通话窗口
|
||
- 自动初始化 TUICallKit
|
||
- 发起视频通话
|
||
- 等待对方接听
|
||
- 通话中可以拖拽窗口位置
|
||
- 通话结束后自动关闭
|
||
|
||
## 技术实现
|
||
|
||
### 聊天对话框组件
|
||
|
||
```vue
|
||
<template>
|
||
<el-dialog>
|
||
<UIKitProvider>
|
||
<div class="chat-layout">
|
||
<ConversationList />
|
||
<Chat>
|
||
<!-- 自定义头部，包含视频通话按钮 -->
|
||
<div class="chat-header">
|
||
<el-button @click="handleVideoCall">
|
||
视频通话
|
||
</el-button>
|
||
</div>
|
||
<MessageList />
|
||
<MessageInput />
|
||
</Chat>
|
||
</div>
|
||
</UIKitProvider>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 只初始化 Chat UIKit
|
||
await login({
|
||
sdkAppId: Number(res.sdkAppId),
|
||
userId: res.userId,
|
||
userSig: res.userSig,
|
||
useUploadPlugin: true
|
||
})
|
||
|
||
// 通过事件通知父组件
|
||
const emit = defineEmits(['videoCall'])
|
||
const handleVideoCall = () => {
|
||
emit('videoCall', {
|
||
diagnosisId: diagnosisId.value,
|
||
patientId: patientId.value,
|
||
patientName: patientName.value,
|
||
userId: patientUserId.value
|
||
})
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 预约列表页面
|
||
|
||
```vue
|
||
<template>
|
||
<!-- 聊天对话框 -->
|
||
<chat-dialog
|
||
ref="chatDialogRef"
|
||
@video-call="handleChatVideoCall"
|
||
/>
|
||
|
||
<!-- 视频通话组件 -->
|
||
<video-call ref="videoCallRef" />
|
||
</template>
|
||
|
||
<script setup>
|
||
// 监听聊天对话框的视频通话事件
|
||
const handleChatVideoCall = (data) => {
|
||
// 打开独立的视频通话窗口
|
||
videoCallRef.value?.open({
|
||
diagnosisId: data.diagnosisId,
|
||
patientId: data.patientId,
|
||
patientName: data.patientName,
|
||
userId: data.userId,
|
||
isGroup: false
|
||
})
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## 架构优势
|
||
|
||
### 1. 避免冲突
|
||
- Chat UIKit 和 TUICallKit 在不同组件中初始化
|
||
- 互不干扰，各自独立运行
|
||
|
||
### 2. 职责分离
|
||
- 聊天对话框：专注于聊天功能
|
||
- 视频通话组件：专注于视频通话功能
|
||
|
||
### 3. 可维护性
|
||
- 每个组件功能单一，易于维护
|
||
- 可以独立测试和调试
|
||
|
||
### 4. 用户体验
|
||
- 聊天和视频通话可以同时进行
|
||
- 视频通话窗口可以自由拖拽
|
||
- 不影响聊天界面的使用
|
||
|
||
## 文件清单
|
||
|
||
### 修改的文件
|
||
1. `admin/src/components/chat-dialog/index.vue`
|
||
- 添加视频通话按钮
|
||
- 添加 videoCall 事件
|
||
- 移除 TUICallKit 初始化
|
||
|
||
2. `admin/src/views/tcm/appointment/list.vue`
|
||
- 监听 @video-call 事件
|
||
- 添加 handleChatVideoCall 方法
|
||
|
||
### 现有文件（无需修改）
|
||
1. `admin/src/components/video-call/index.vue`
|
||
- 独立的视频通话组件
|
||
- 已完整实现所有功能
|
||
|
||
2. `admin/src/assets/chat-uikit.css`
|
||
- Chat UIKit 样式文件
|
||
|
||
## API 接口
|
||
|
||
### 获取签名
|
||
- 接口：`/tcm.diagnosis/getCallSignature`
|
||
- 参数：
|
||
```typescript
|
||
{
|
||
patient_id: number
|
||
diagnosis_id: number
|
||
}
|
||
```
|
||
- 返回：
|
||
```typescript
|
||
{
|
||
sdkAppId: number
|
||
userId: string // 医生ID，如 "doctor_1"
|
||
userSig: string // 签名
|
||
patientUserId: string // 患者ID，如 "patient_4"
|
||
expireTime: number
|
||
}
|
||
```
|
||
|
||
## 后端配置
|
||
|
||
```env
|
||
SDK_APP_ID = "1600127710"
|
||
SECRET_KEY = "8a6b3ce533b0e46b9d6e17d5c77bac240bc0ccdce4e3db93a0d6a1e55160c73d"
|
||
ENABLE = "true"
|
||
```
|
||
|
||
## 测试建议
|
||
|
||
### 聊天功能测试
|
||
1. ✅ 打开聊天对话框
|
||
2. ✅ 发送文字消息
|
||
3. ✅ 发送表情
|
||
4. ✅ 上传图片
|
||
5. ✅ 上传文件
|
||
6. ✅ 上传视频
|
||
7. ✅ 查看会话列表
|
||
8. ✅ 查看消息历史
|
||
|
||
### 视频通话测试
|
||
1. ✅ 在聊天界面点击"视频通话"按钮
|
||
2. ✅ 视频通话窗口弹出
|
||
3. ✅ 发起通话
|
||
4. ✅ 等待对方接听
|
||
5. ✅ 通话接通
|
||
6. ✅ 拖拽窗口
|
||
7. ✅ 调整窗口大小
|
||
8. ✅ 挂断通话
|
||
9. ✅ 窗口自动关闭
|
||
|
||
### 集成测试
|
||
1. ✅ 聊天时发起视频通话
|
||
2. ✅ 视频通话时继续聊天
|
||
3. ✅ 关闭聊天对话框，视频通话继续
|
||
4. ✅ 结束视频通话，聊天继续
|
||
|
||
## 注意事项
|
||
|
||
1. **HTTPS 要求**
|
||
- 视频通话需要 HTTPS 环境
|
||
- 或在 localhost 下测试
|
||
|
||
2. **浏览器权限**
|
||
- 需要授权摄像头和麦克风访问
|
||
- 首次使用会弹出权限请求
|
||
|
||
3. **用户 ID 格式**
|
||
- 医生：`doctor_{id}`
|
||
- 患者：`patient_{id}`
|
||
|
||
4. **表情功能**
|
||
- 可能需要腾讯云授权
|
||
- 默认表情包有版权限制
|
||
|
||
## 故障排查
|
||
|
||
### 聊天界面无法加载
|
||
1. 检查后端签名接口是否正常
|
||
2. 查看浏览器控制台错误信息
|
||
3. 确认 SDK_APP_ID 配置正确
|
||
|
||
### 视频通话无法发起
|
||
1. 确认使用 HTTPS 或 localhost
|
||
2. 检查浏览器权限设置
|
||
3. 查看控制台是否有 TUICallKit 错误
|
||
4. 确认对方用户 ID 正确
|
||
|
||
### 视频通话窗口不显示
|
||
1. 检查 z-index 是否被其他元素遮挡
|
||
2. 确认 TUICallKit 初始化成功
|
||
3. 查看窗口位置是否在屏幕外
|
||
|
||
## 总结
|
||
|
||
通过分离架构，成功解决了 Chat UIKit 和 TUICallKit 的初始化冲突问题。现在系统同时支持：
|
||
|
||
- 完整的聊天功能（文字、表情、图片、文件、视频）
|
||
- 完整的视频通话功能（1v1、群组、浮动窗口）
|
||
- 两个功能互不干扰，可以同时使用
|
||
|
||
这种架构清晰、可维护，为后续功能扩展提供了良好的基础。
|