# Web 端 TUICallKit 升级指南

## 📦 版本变化

### 旧版本
```json
"@tencentcloud/call-uikit-vue": "^4.0.12"
```

### 新版本
```json
"@trtc/calls-uikit-vue": "^4.2.2"
```

## 🔄 主要变化

### 1. 包名变化
- **旧包名：** `@tencentcloud/call-uikit-vue`
- **新包名：** `@trtc/calls-uikit-vue`

### 2. 导入方式（保持不变）
```typescript
// 4.2.x 版本的导入方式
import { TUICallKitServer, TUICallKit, TUICallType, STATUS } from '@trtc/calls-uikit-vue'
```

### 3. API 兼容性
4.2.x 版本与 4.0.x 版本的 API 基本兼容，主要改进：
- 更好的性能
- 更稳定的连接
- 修复了一些已知问题
- 改进了错误处理

## ✅ 已更新的代码

### 更新内容
1. ✅ 更新了导入语句
2. ✅ 保持了原有的 API 调用方式
3. ✅ 保持了原有的回调处理

### 无需更改的部分
- `TUICallKitServer.init()` - 初始化方法
- `TUICallKitServer.call()` - 发起通话方法
- `TUICallKitServer.hangup()` - 挂断方法
- `TUICallKitServer.setCallback()` - 设置回调
- `TUICallKitServer.enableFloatWindow()` - 浮窗设置

## 🧪 测试步骤

### 步骤 1：安装依赖
```bash
cd admin
npm install
```

### 步骤 2：启动开发服务器
```bash
npm run dev
```

### 步骤 3：测试通话功能
1. 登录系统
2. 打开患者详情页
3. 点击"视频通话"按钮
4. 确认通话正常

## 📋 检查清单

### 编译检查
- [ ] 没有编译错误
- [ ] 没有类型错误
- [ ] 没有导入错误

### 功能检查
- [ ] 可以正常初始化
- [ ] 可以发起通话
- [ ] 可以接听通话
- [ ] 可以挂断通话
- [ ] 视频和音频正常
- [ ] 状态回调正常

### 兼容性检查
- [ ] Chrome 浏览器正常
- [ ] Edge 浏览器正常
- [ ] Safari 浏览器正常（Mac）
- [ ] 与小程序端互通正常

## ⚠️ 可能的问题

### 问题 1：导入错误

**症状：**
```
Cannot find module '@trtc/calls-uikit-vue'
```

**解决：**
```bash
# 删除 node_modules 和 package-lock.json
rm -rf node_modules package-lock.json

# 重新安装
npm install
```

### 问题 2：类型错误

**症状：**
```
Property 'xxx' does not exist on type 'xxx'
```

**解决：**
```bash
# 清除 TypeScript 缓存
rm -rf node_modules/.vite

# 重新启动开发服务器
npm run dev
```

### 问题 3：运行时错误

**症状：**
```
TUICallKitServer.xxx is not a function
```

**解决：**
1. 确认包版本正确
2. 清除缓存重新安装
3. 检查 API 调用方式

## 🔧 如果需要回滚

如果新版本有问题，可以回滚到旧版本：

```bash
# 1. 修改 package.json
"@tencentcloud/call-uikit-vue": "^4.0.12"

# 2. 修改导入语句
import { ... } from '@tencentcloud/call-uikit-vue'

# 3. 重新安装
npm install
```

## 📞 技术支持

如果遇到问题：
1. 查看腾讯云官方文档
2. 检查控制台错误信息
3. 提供完整的错误日志

---

**最后更新：** 2024-03-04
**版本：** 1.0