即时通信 IM Electron（Windows&Mac）-多人会议（含 UI）-文档中心-腾讯云

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

Electron（Windows&Mac）

本页目录：

方案1：界面微调方案

替换图标

调整 UI 布局

方案2：自定义 UI 方案