# 聊天与视频通话集成完成

## 解决方案

采用**分离架构**，避免 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、群组、浮动窗口）
- 两个功能互不干扰，可以同时使用

这种架构清晰、可维护，为后续功能扩展提供了良好的基础。