本文对**连麦管理面板（CoGuestPanel）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式和布局进行深度的定制。
## 核心功能
| **功能名称** | **具体内容** |
| --- | --- |
| **Tab 切换** | 提供双 Tab 界面设计，用户可在连麦申请和连麦管理两个功能模块间快速切换，支持状态记忆和消息提示。 |
| **申请列表** | 实时展示所有待审核的连麦申请，显示用户头像、昵称等信息，支持按时间排序和状态筛选功能。 |
| **主播操作** | 提供丰富的一键式操作按钮，支持接受申请、拒绝申请、断开连麦等功能，实时反馈操作结果。 |
## 组件接入
### 步骤1：环境配置及开通服务
在进行快速接入之前，您需要参考 准备工作，满足相关环境配置及开通对应服务。
### 步骤2：安装依赖
【npm】
``` bash
npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
```
【pnpm】
``` bash
pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
```
【yarn】
``` bash
yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
```
### 步骤3：集成连麦管理面板
在您的项目中引入并使用**连麦管理面板**，可直接复制如下代码示例至您的项目中展示连麦管理面板。
``` typescript
```
## 自定义样式定制
连麦管理面板支持通过 CSS 变量进行样式定制，您可以覆盖以下变量来调整组件外观，在已完成**步骤3**的前提下，您可以参考如下示例的方式来调整连麦管理面板的 UI，也可以直接将下列示例增量复制进您的组件中生成下列效果示例。
``` typescript
```
| **修改前** | **修改后** |
| --- | --- |
| | |