@tencentcloud/sdk-mcp 1.3.9 → 1.4.0

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

@@ -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>