npm - @tencentcloud/sdk-mcp - Versions diffs - 1.3.8 → 1.4.0 - Mend

@tencentcloud/sdk-mcp 1.3.8 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (503) hide show

package/resource/doc/livekit/live/vue/live-pusher-integration.md DELETED Viewed

@@ -1,598 +0,0 @@
-本文将介绍如何接入 TUILiveKit Demo 的**主播开播页**，指导您将我们提供的开播页面集成到您的项目中，同时介绍如何对直播页面的样式、布局、以及功能进行自定义修改。
-## 功能展示
-- **横屏开播**
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027339142/bac075ccbf0111f0b4c35254001c06ec.png)
-- **竖屏开播**
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027339142/931de742bf0111f0b4c35254001c06ec.png)
-## 功能概览
-- **画面源管理**：支持添加多个摄像头、屏幕分享、窗口分享和本地图片。
-- **直播画面排版**：支持对画面源拖拽、缩放，支持通过快捷菜单对画面源设置镜像、旋转和层级调整。
-- **观众连麦**：支持房间内观众连麦，内置多种连麦布局。
-- **主播PK**：支持主播跨房连线、PK。
-- **互动聊天**：支持收发文字和表情消息，聊天互动。
-- **观众管理**：支持对观众禁言、踢出直播间等操作。
-## 快速接入
-### 步骤1：环境配置及开通服务
-在进行快速接入之前，您需要参见 [准备工作](https://write.woa.com/document/188228825253294080)，满足相关环境配置及开通对应服务。
-### 步骤2:  安装依赖
-【npm】
-``` bash
-npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
-```
-【pnpm】
-``` bash
-pnpm add tuikit-atomicx-vue3 @tencentcloud/livekit-web-vue3 @tencentcloud/uikit-base-component-vue3
-```
-【yarn】
-``` bash
-yarn add tuikit-atomicx-vue3 @tencentcloud/livekit-web-vue3 @tencentcloud/uikit-base-component-vue3
-```
-### 步骤3：主播开播页面接入
-在您的项目下创建 `live-pusher.vue` 文件，通过复制如下代码至您新建的 `live-pusher.vue` 文件中集成完整的**主播开播页面**。
-``` typescript
-<template>
-  <UIKitProvider language="zh-CN" theme="dark">
-    <div class="custom-live-pusher">
-      <!-- 顶部控制栏 -->
-      <div class="top-controls">
-        <div class="live-title">{{ liveName }}</div>
-        <div class="audience-count">{{ audienceCount }} 人观看</div>
-      </div>
-      <!-- 主要内容区 -->
-      <div class="main-content">
-        <!-- 左侧：视频源和工具 -->
-        <div class="left-panel">
-          <LiveScenePanel />
-          <div class="tools-section">
-            <!-- <CoGuestButton /> -->
-          </div>
-        </div>
-        <!-- 中央：直播画面 -->
-        <div class="center-panel">
-          <StreamMixer />
-          <div class="live-controls">
-            <button v-if="!currentLive?.liveId" @click="handleStartLive">开始直播</button>
-            <button v-else @click="handleStopLive">停止直播</button>
-          </div>
-        </div>
-        <!-- 右侧：观众互动 -->
-        <div class="right-panel">
-          <LiveAudienceList />
-          <BarrageList />
-          <BarrageInput />
-        </div>
-        <!-- 底部：主播操作 -->
-        <!-- <div class="bottom-panel">
-            <MicVolumeSetting />       // 媒体设置能力请参考本文高级功能集成部分
-            <SpeakerVolumeSetting />
-            <CoGuestButton />          // 连麦观众能力请参考本文高级功能集成部分
-            <OrientationSwitch />      // 布局设置请参考本文高级功能集成部分
-            <LayoutSwitch />           // 横竖屏推流能力请参考本文高级功能集成部分
-        </div>-->
-      </div>
-    </div>
-  </UIKitProvider>
-</template>
-<script setup lang="ts">
-import { onMounted } from 'vue';
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import {
-  LiveScenePanel,
-  StreamMixer,
-  LiveAudienceList,
-  BarrageList,
-  BarrageInput,
-  useLiveListState,
-  useLiveAudienceState,
-  useLoginState,
-} from 'tuikit-atomicx-vue3';
-const { login, setSelfInfo } = useLoginState();
-const { createLive, currentLive, endLive } = useLiveListState();
-const { audienceCount } = useLiveAudienceState();
-const liveName = '我的直播间';
-const handleStartLive = async () => {
-  await createLive({
-    liveId: 'my-live-room',
-    liveName: liveName,
-  });
-  await setSelfInfo({
-    userName: '我的名字/昵称',   // 用户名
-    avatarUrl: '',              // 头像 URL 地址
-  });
-};
-const handleStopLive = async () => {
-  await endLive();
-};
-async function initLogin() {
-  try {
-    await login({
-      sdkAppId: 0,        // SDKAppID, 可以参考步骤 1 获取
-      userId: '',         // UserID, 可以参考步骤 1 获取
-      userSig: '',        // userSig, 可以参考步骤 1 获取
-    });
-  } catch (error) {
-    console.error('登录失败:', error);
-  }
-}
-onMounted(async () => {
-  await initLogin();
-});
-</script>
-<style>
-html,body,#app {height: 100%;width: 100%;margin: 0;padding: 0;}
-</style>
-<style scoped>
-.custom-live-pusher,.left-panel{flex-direction:column;display:flex}.custom-live-pusher,.live-title{color:var(--text-color-primary)}.live-controls,.tools-section,.top-controls{backdrop-filter:blur(10px)}*{box-sizing:border-box;margin:0;padding:0}:global(::before){box-sizing:border-box;margin:0;padding:0}.layout-label,.template-options{margin-bottom:16px}:global(body){line-height:1.6;color:var(--text-color-primary);background:var(--bg-color-default)}.custom-live-pusher{height:100vh;width:100vw;background:linear-gradient(135deg,var(--bg-color-default) 0,var(--bg-color-function) 100%);overflow:hidden}.top-controls{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--bg-color-operate);border-bottom:1px solid var(--stroke-color-primary);z-index:100;min-height:60px}.live-title{font-size:18px;font-weight:600;text-shadow:0 2px 4px var(--shadow-color)}.audience-count{font-size:14px;color:var(--text-color-error);background:var(--uikit-color-red-1);padding:6px 12px;border-radius:20px;border:1px solid var(--uikit-color-red-3)}.live-controls,.tools-section{background:var(--bg-color-operate)}.main-content{display:flex;flex:1;height:calc(100vh - 60px);gap:16px;padding:16px;overflow:hidden}.left-panel{width:280px;gap:16px;flex-shrink:0}.tools-section{border-radius:12px;padding:16px;border:1px solid var(--stroke-color-primary)}.center-panel{display:flex;flex-direction:column;flex:1;gap:16px;min-width:0}.live-controls{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:12px;border:1px solid var(--stroke-color-primary);gap:16px}.live-controls button{background:linear-gradient(135deg,var(--text-color-error) 0,var(--uikit-color-red-5) 100%);color:var(--text-color-button);border:none;padding:12px 32px;border-radius:25px;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 4px 15px var(--shadow-color)}.right-panel{display:flex;flex-direction:column;width:320px;gap:16px;flex-shrink:0}.center-panel>*,.left-panel>*,.right-panel>*{background:var(--bg-color-operate);border-radius:12px;border:1px solid var(--stroke-color-primary);overflow:hidden}.left-panel>*,.right-panel>*{padding:16px}.custom-icon-container,.device-setting{padding:8px 12px;background:var(--bg-color-function)}.center-panel>:first-child{flex:1;min-height:300px;padding:0;border:2px solid var(--stroke-color-secondary)}.bottom-panel,.device-setting{align-items:center;display:flex}.custom-icon-container:hover,.option-card:hover{border-color:var(--stroke-color-primary);background:var(--list-color-hover)}.bottom-panel{gap:16px;flex:1}.device-setting{gap:8px;border-radius:8px;border:1px solid var(--stroke-color-secondary)}.device-icon{cursor:pointer;color:var(--text-color-primary);transition:color .2s}.device-icon:hover{color:var(--text-color-link)}.device-slider{width:80px}.custom-icon-container{display:flex;align-items:center;gap:6px;border-radius:8px;border:1px solid var(--stroke-color-secondary);cursor:pointer;transition:.2s;position:relative}.custom-icon-container.disabled{opacity:.5;cursor:not-allowed}.custom-icon-container.disabled:hover{background:var(--bg-color-function);border-color:var(--stroke-color-secondary)}.custom-icon{width:16px;height:16px;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M7 10h10'/%3E%3C/svg%3E")}.portrait-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='6' y='3' width='12' height='18' rx='2'/%3E%3Cpath d='M10 7h4'/%3E%3C/svg%3E")}.layout-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E")}.co-guest-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}.custom-text{font-size:12px;color:var(--text-color-secondary);white-space:nowrap}.unread-count{position:absolute;top:-4px;right:-4px;background:var(--text-color-error);color:var(--text-color-button);border-radius:10px;padding:2px 6px;font-size:10px;font-weight:600;min-width:16px;text-align:center;line-height:1}.layout-label,.option-info h4{color:var(--text-color-primary)}.layout-dialog{max-width:600px}.layout-label{font-size:16px;font-weight:600}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.option-card{padding:16px;background:var(--bg-color-function);border:2px solid var(--stroke-color-secondary);border-radius:8px;cursor:pointer;transition:.2s;text-align:center}.option-card.active{border-color:var(--text-color-link);background:var(--bg-color-operate)}.option-info h4{margin:8px 0 0;font-size:12px}.option-icon{width:32px;height:32px;margin:0 auto;color:var(--text-color-secondary)}.co-guest-dialog{max-width:500px}.co-guest-panel{min-height:300px}
-</style>
-```
-### 步骤4：开启直播
-开启您的第一场直播。
-``` bash
-  npm run dev
-```
-### 步骤5：观看直播
-- **方式一：（推荐）**
-   通过我们提供的 [在线观看网站](https://web.sdk.qcloud.com/trtc/livekit/player/index.html)，立刻观看您开启的直播。
-- **方式二：**
-   集成我们提供的 [观众观看（Web 桌面浏览器）](https://write.woa.com/document/185968222948704256)或者 [观众观看（H5 移动端浏览器）](https://write.woa.com/document/188483856012668928) 页面，观看直播。
-   > **重要提示：**
-   >
-   > 请使用不同的**用户 ID** 登录观看： 开播端和观看端必须使用**不同**的用户 ID，否则后登录的设备会强制先登录的设备下线（即“被踢下线”）。
-   >
-## 高级功能集成
-【支持媒体设置能力】
-若您需要支持媒体设置能力，包括设置扬声器、麦克风音量大小等内容，请参考如下代码示例复制到`live-pusher.vue `文件中即可。
-``` typescript
-<template>
-  <!-- MicVolumeSetting 麦克风设置 -->
-  <div class="device-setting">
-    <IconAudio :size="16" :audioVolume="audioVolume" :isMuted="microphoneStatus === DeviceStatus.Off" @click="switchMicrophoneStatus" />
-    <TUISlider v-if="microphoneStatus !== DeviceStatus.Off" v-model="microphoneVolume" class="device-slider" :min="0" :max="100" @change="handleMicrophoneVolumeChange" />
-    <TUISlider v-else class="device-slider" :min="0" :max="100" disabled />
-  </div>
-  <!-- SpeakerVolumeSetting 扬声器设置 -->
-  <div class="device-setting">
-    <TUIIcon class="device-icon" :icon="speakerIsOn ? IconSpeakerOn : IconSpeakerOff" @click="switchSpeaker(!speakerIsOn)" />
-    <TUISlider v-if="speakerIsOn" v-model="speakerVolume" class="device-slider" :min="0" :max="100" @change="handleSpeakerVolumeChange" />
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import { TUIIcon, TUISlider, IconSpeakerOn, IconSpeakerOff, IconAudio } from '@tencentcloud/uikit-base-component-vue3';
-import { DeviceStatus, useDeviceState } from 'tuikit-atomicx-vue3';
-const {
-  captureVolume,
-  setCaptureVolume,
-  microphoneStatus,
-  openLocalMicrophone,
-  closeLocalMicrophone,
-  audioVolume,
-} = useDeviceState();
-const { outputVolume, setOutputVolume } = useDeviceState();
-const microphoneVolume = ref(captureVolume.value);
-const speakerVolume = ref(outputVolume.value);
-const speakerIsOn = ref(true);
-const templateSpeakerVolume = ref(outputVolume.value);
-const handleMicrophoneVolumeChange = (value: number) => {
-  if (value !== captureVolume.value) {
-    setCaptureVolume(value);
-  }
-};
-const switchMicrophoneStatus = () => {
-  if (microphoneStatus.value === DeviceStatus.On) {
-    closeLocalMicrophone();
-  } else {
-    openLocalMicrophone();
-  }
-};
-const switchSpeaker = (open: boolean) => {
-  speakerIsOn.value = open;
-  if (!open) {
-    templateSpeakerVolume.value = outputVolume.value;
-    setOutputVolume(0);
-  } else {
-    setOutputVolume(templateSpeakerVolume.value);
-  }
-};
-const handleSpeakerVolumeChange = (value: number) => {
-  if (value !== outputVolume.value) {
-    setOutputVolume(value);
-  }
-};
-watch(captureVolume, (newVal) => {
-  microphoneVolume.value = newVal;
-});
-watch(outputVolume, (newVal) => {
-  speakerVolume.value = newVal;
-});
-</script>
-```
-【支持横竖屏推流能力】
-若您需要支持横竖屏推流能力，包括设置切换横竖屏等内容，请参考如下代码示例复制到`live-pusher.vue `文件中即可。
-``` typescript
-<template>
-  <!-- LayoutSwitch 横竖屏推流设置 -->
-  <div class="custom-icon-container":class="{ 'disabled': localLiveStatus === LiveStatus.Live }" @click="handleOrientationSwitch">
-    <span v-if="currentOrientation === LiveOrientation.Landscape" class="custom-icon horizontal-icon" />
-    <span v-else class="custom-icon portrait-icon"/>
-    <span class="custom-text co-guest-text">{{ currentOrientation === LiveOrientation.Portrait ? t('Portrait') : t('Landscape')}}</span>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import { useUIKit, TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
-import { useLiveListState, LiveOrientation, LiveStatus } from 'tuikit-atomicx-vue3';
-const { t } = useUIKit();
-enum TUISeatLayoutTemplate {
-  LandscapeDynamic_1v3 = 200,
-  PortraitDynamic_Grid9 = 600,
-  PortraitDynamic_1v6 = 601,
-  PortraitFixed_Grid9 = 800,
-  PortraitFixed_1v6 = 801,
-  PortraitFixed_6v6 = 802,
-}
-const { currentLive, localLiveStatus, updateLiveInfo } = useLiveListState();
-const currentOrientation = ref(LiveOrientation.Portrait);
-watch(
-  () => currentLive.value?.layoutTemplate,
-  (newVal) => {
-    if (newVal === TUISeatLayoutTemplate.LandscapeDynamic_1v3) {
-      currentOrientation.value = LiveOrientation.Landscape;
-    } else {
-      currentOrientation.value = LiveOrientation.Portrait;
-    }
-  },
-  { immediate: true },
-);
-const handleOrientationSwitch = () => {
-  if (localLiveStatus.value === LiveStatus.Live) {
-    TUIToast({
-      message: t('Cannot switch orientation during live streaming'),
-      type: TOAST_TYPE.ERROR,
-    });
-    return;
-  }
-  if (currentOrientation.value === LiveOrientation.Portrait) {
-    updateLiveInfo({ layoutTemplate: TUISeatLayoutTemplate.LandscapeDynamic_1v3 });
-  } else {
-    updateLiveInfo({ layoutTemplate: TUISeatLayoutTemplate.PortraitDynamic_Grid9 });
-  }
-};
-</script>
-```
-【支持连观众能力】
-若您需要支持观众连麦能力，包括设置连麦申请、连麦管理等内容，请参考如下代码示例复制到`live-pusher.vue `文件中即可。
-``` typescript
-<template>
-  <!-- CoGuestSetting 观众连麦设置 -->
-  <div class="custom-icon-container" @click="handleCoGuest">
-    <span v-if="receivedCoGuestUserList.length > 0" class="unread-count">{{ receivedCoGuestUserList.length }}</span>
-    <span class="custom-icon co-guest-icon" />
-    <span class="custom-text co-guest-text">{{ t('CoGuest') }}</span>
-  </div>
-  <TUIDialog :title="t('CoGuest')" :visible="coGuestPanelVisible" :customClasses="['co-guest-dialog']" @close="coGuestPanelVisible = false" @confirm="coGuestPanelVisible = false" @cancel="coGuestPanelVisible = false">
-    <CoGuestPanel class="co-guest-panel" />
-    <template #footer>
-      <div />
-    </template>
-  </TUIDialog>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { useUIKit, TUIDialog } from '@tencentcloud/uikit-base-component-vue3';
-import { CoGuestPanel, useCoGuestState } from 'tuikit-atomicx-vue3';
-const { t } = useUIKit();
-const { receivedCoGuestUserList } = useCoGuestState();
-const coGuestPanelVisible = ref(false);
-const handleCoGuest = () => {
-  coGuestPanelVisible.value = true;
-};
-</script>
-```
-【支持布局设置能力】
-若您需要支持视频流切换布局能力，包括设置**动态宫格布局、静态宫格布局、静态小窗布局、浮动小窗布局**等内容，请参考如下代码示例复制到`live-pusher.vue `文件中即可。
-``` typescript
-<template>
-  <!-- OrientationSwitch 布局设置 -->
-  <div class="custom-icon-container" @click="handleSwitchLayout">
-    <span class="custom-icon layout-icon" />
-    <span class="custom-text setting-text">{{ t('Layout Settings') }}</span>
-  </div>
-  <TUIDialog :customClasses="['layout-dialog']":title="t('Layout Settings')" :visible="layoutSwitchVisible" @close="handleCancel" @confirm="handleConfirm" @cancel="handleCancel">
-    <div class="layout-label"> {{ t('Audience Layout') }}</div>
-    <div class="template-options">
-      <div class="options-grid">
-        <template v-for="template in layoutOptions" :key="template.id">
-          <div class="option-card" :class="{ active: selectedTemplate === template.templateId }" @click="selectTemplate(template.templateId)">
-            <div class="option-info">
-              <component :is="template.icon" v-if="template.icon" class="option-icon"/>
-              <h4>{{ template.label }}</h4>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-  </TUIDialog>
-</template>
-<script lang="ts" setup>
-import { ref, computed, watch } from 'vue';
-import { TUIErrorCode,  } from '@tencentcloud/tuiroom-engine-js';
-import { useUIKit, TUIDialog, TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
-import { LiveStatus, useLiveListState } from 'tuikit-atomicx-vue3';
-import { TUISeatLayoutTemplate } from '../types/LivePusher';
-const { t } = useUIKit();
-const { localLiveStatus, currentLive, updateLiveInfo } = useLiveListState();
-watch(
-  localLiveStatus,
-  () => {
-    if (localLiveStatus.value === LiveStatus.IDLE) {
-      updateLiveInfo({ layoutTemplate: TUISeatLayoutTemplate.PortraitDynamic_Grid9 });
-    }
-  },
-  { immediate: true },
-);
-const layoutSwitchVisible = ref(false);
-const handleSwitchLayout = () => {
-  layoutSwitchVisible.value = true;
-};
-const portraitLayoutOptions = computed(() => [
-  {
-    id: 'PortraitDynamic_Grid9',
-    templateId: TUISeatLayoutTemplate.PortraitDynamic_Grid9,
-    label: t('Dynamic Grid9 Layout'),
-  },
-  {
-    id: 'PortraitFixed_1v6',
-    templateId: TUISeatLayoutTemplate.PortraitFixed_1v6,
-    label: t('Fixed 1v6 Layout'),
-  },
-  {
-    id: 'PortraitFixed_Grid9',
-    templateId: TUISeatLayoutTemplate.PortraitFixed_Grid9,
-    label: t('Fixed Grid9 Layout'),
-  },
-  {
-    id: 'PortraitDynamic_1v6',
-    templateId: TUISeatLayoutTemplate.PortraitDynamic_1v6,
-    label: t('Dynamic 1v6 Layout'),
-  },
-]);
-const horizontalLayoutOptions = computed(() => [
-  {
-    id: 'LandscapeDynamic_1v3',
-    templateId: TUISeatLayoutTemplate.LandscapeDynamic_1v3,
-    label: t('Landscape Template'),
-  },
-]);
-const layoutOptions = computed(() => {
-  if (currentLive.value && currentLive.value?.layoutTemplate >= 200 && currentLive.value?.layoutTemplate <= 599) {
-    return horizontalLayoutOptions.value;
-  }
-  return portraitLayoutOptions.value;
-});
-const selectedTemplate = ref<TUISeatLayoutTemplate | null>(currentLive.value?.layoutTemplate ?? null);
-function selectTemplate(template: TUISeatLayoutTemplate) {
-  selectedTemplate.value = template;
-}
-watch(() => currentLive.value?.layoutTemplate, (newVal) => {
-  if (newVal) {
-    selectedTemplate.value = newVal;
-  }
-});
-async function handleConfirm() {
-  if (selectedTemplate.value) {
-    try {
-      await updateLiveInfo({ layoutTemplate: selectedTemplate.value });
-      layoutSwitchVisible.value = false;
-    } catch (error: any) {
-      let errorMessage = t('Layout switch failed');
-      if (error.code === TUIErrorCode.ERR_FREQ_LIMIT) {
-        errorMessage = t('Operation too frequent, please try again later');
-      }
-      TUIToast({ type: TOAST_TYPE.ERROR, message: errorMessage });
-    }
-  } else {
-    layoutSwitchVisible.value = false;
-  }
-}
-function handleCancel() {
-  selectedTemplate.value = currentLive.value?.layoutTemplate ?? null;
-  layoutSwitchVisible.value = false;
-}
-</script>
-```
-## 自由定制
-根据上述功能展示图，我们同样支持您根据项目需求对**主播开播页面**进行 UI 定制的能力。除了页面 UI 布局调整，我们也支持您对**颜色主题、字体、圆角、按钮、图标、输入框、弹框等**内容进行**增加、删除、修改**等操作，满足您的 UI 定制需要。
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**类别**</td>
-<td rowspan="1" colSpan="1" >**功能**</td>
-<td rowspan="1" colSpan="1" >**描述**</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >**素材管理**</td>
-<td rowspan="1" colSpan="1" >自定义素材管理区域展示</td>
-<td rowspan="1" colSpan="1" >**支持：**<br>- **调整展示 Icon 的大小、颜色或对 Icon 进行替换**</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >**直播工具**</td>
-<td rowspan="1" colSpan="1" >自定义直播工具信息展示</td>
-<td rowspan="1" colSpan="1" >**支持：**<br>- **调整展示 Icon 的大小、颜色或对 Icon 进行替换**</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >**在线观众**</td>
-<td rowspan="1" colSpan="1" >自定义观众信息展示</td>
-<td rowspan="1" colSpan="1" >**支持：**<br>- **展示/隐藏观众等级**<br>- **观众信息字体、颜色 UI 自定义设置**<br>- **替换为您需要的 Icon 风格**</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >**消息列表**</td>
-<td rowspan="1" colSpan="1" >自定义消息弹幕区域展示</td>
-<td rowspan="1" colSpan="1" >**支持：**<br>- **展示/隐藏聊天输入区域**<br>- **支持 UI 定制聊天气泡风格、定制观众等级等内容**</td>
-</tr>
-</table>
-### 颜色主题
-参见**步骤3**中代码示例，您可以使用操作 theme 的值来实现您切换颜色主题。
-``` java
-<UIKitProvider theme="dark">  // theme 传入 dark 时，界面整体颜色主题为黑色
-  xxx                         // theme 传入 light 时，界面整体颜色主题为白色
-</UIKitProvider>
-```
-### 按钮 Button / 图标 Icon
-若您需要对按钮 Button 或图标 Icon 等其他控件进行新增或替换等 UI 定制，您可以通过如下方式实现，以`live-pusher.vue `文件中的按钮和图标为例，您可以参考下图找到对应按钮或图标的指定位置源码，对当前部分的控件进行**增加、删除、替换**等 UI 定制操作。
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/7447da478ebd11f0974b52540044a08e.png)
-## 下一步
-恭喜您，现在您已经成功集成了** 主播开播页面 **。接下来，您可以实现**观众观看页**、**直播列表页**等内容，可参考下表：
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**功能**</td>
-<td rowspan="1" colSpan="1" >**描述**</td>
-<td rowspan="1" colSpan="1" >**集成指引**</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >**观众观看**</td>
-<td rowspan="1" colSpan="1" >实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能</td>
-<td rowspan="1" colSpan="1" >[观众观看](https://write.woa.com/document/185968222948704256)</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >**直播列表**</td>
-<td rowspan="1" colSpan="1" >展示直播列表界面和功能，包含直播列表，房间信息展示功能</td>
-<td rowspan="1" colSpan="1" >[直播列表](https://write.woa.com/document/185968224430342144)</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >**UI 自定义**</td>
-<td rowspan="1" colSpan="1" >更详细的 UI 组件自定义指引。</td>
-<td rowspan="1" colSpan="1" >[概述](https://write.woa.com/document/177815913198854144)</td>
-</tr>
-</table>