zyt/admin/WEB_UIKIT_UPGRADE_GUIDE.md

Web 端 TUICallKit 升级指南

📦 版本变化

旧版本

"@tencentcloud/call-uikit-vue": "^4.0.12"

新版本

"@trtc/calls-uikit-vue": "^4.2.2"

🔄 主要变化

1. 包名变化

• 旧包名： @tencentcloud/call-uikit-vue
• 新包名： @trtc/calls-uikit-vue

2. 导入方式（保持不变）

// 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：安装依赖

cd admin
npm install

步骤 2：启动开发服务器

npm run dev

步骤 3：测试通话功能

1. 登录系统
2. 打开患者详情页
3. 点击"视频通话"按钮
4. 确认通话正常

📋 检查清单

编译检查

• 没有编译错误
• 没有类型错误
• 没有导入错误

功能检查

• 可以正常初始化
• 可以发起通话
• 可以接听通话
• 可以挂断通话
• 视频和音频正常
• 状态回调正常

兼容性检查

• Chrome 浏览器正常
• Edge 浏览器正常
• Safari 浏览器正常（Mac）
• 与小程序端互通正常

⚠️ 可能的问题

问题 1：导入错误

症状：

Cannot find module '@trtc/calls-uikit-vue'

解决：

# 删除 node_modules 和 package-lock.json
rm -rf node_modules package-lock.json

# 重新安装
npm install

问题 2：类型错误

症状：

Property 'xxx' does not exist on type 'xxx'

解决：

# 清除 TypeScript 缓存
rm -rf node_modules/.vite

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

问题 3：运行时错误

症状：

TUICallKitServer.xxx is not a function

解决：

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

🔧 如果需要回滚

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

# 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