本文将介绍如何定制 TUIRoomkit 的用户界面,我们提供了两个方案供您选择:换肤方案和自定义 UI 方案。
方案一:界面微调方案
替换图标
您可以直接修改 Web/vue3/src/TUIRoom/assests/icons/svg 文件夹下的图标组件,以确保整个 App 中的图标色调风格保持一致,请在替换时保持图标文件的名字不变。
调整 UI 布局
您可以通过修改 src/components/ 文件下的不同页面来调整多人视频会议界面的 UI 布局。
- components/- base- Chat 聊天- common 公用图标组件- ManageMember 成员管理- RoomContent Room 视频- RoomFooter Room 页面 Footer部分- RoomHeader Room 页面 Header部分- RoomHome Home 页面- RoomInvite 邀请成员- RoomLogin 登录页面- RoomMore 更多- RoomSetting 设置- RoomSidebar 抽屉组件
方案二:自定义 UI 方案
TUIRoom 的整体功能是基于 TUIRoomEngine 这个无 UI SDK 实现的,您可以完全基于 TUIRoomEngine 实现一套自己的 UI 界面。详情可见以下指引文档: