@tencentcloud/sdk-mcp 1.1.3 → 1.1.5

package/resource/doc/livekit/vue/components/co-guest-panel.md

@@ -0,0 +1,127 @@
+本文对 TUILiveKit 组件中的**连麦管理面板（CoGuestPanel）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式和布局进行深度的定制。
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/af6ace34975411f093df52540099c741.png)
+
+
+## 核心功能
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**功能名称**</td>
+
+<td rowspan="1" colSpan="1" >**具体内容**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Tab 切换**</td>
+
+<td rowspan="1" colSpan="1" >提供双 Tab 界面设计，用户可在连麦申请和连麦管理两个功能模块间快速切换，支持状态记忆和消息提示。</td>
+</tr>
+
+<tr>
+<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>
+</tr>
+</table>
+
+
+## 组件接入
+
+### 步骤1：环境配置及开通服务
+
+在进行快速接入之前，您需要参考[准备工作](https://write.woa.com/document/185222107981008896)，满足相关环境配置及开通对应服务。
+
+### 步骤2：安装依赖
+
+
+
+
+【npm】
+``` bash
+npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+```
+
+
+【pnpm】
+``` bash
+pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+
+【yarn】
+``` bash
+yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+### 步骤3：集成连麦管理面板
+
+在您的项目中引入并使用**连麦管理面板**，可直接复制如下代码示例至您的项目中展示连麦管理面板。
+``` typescript
+<template>
+  <UIKitProvider theme="light" language="zh-CN">
+    <div class="app">
+      <CoGuestPanel class="co-guest-panel" />
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { CoGuestPanel, useLoginState, useLiveState } from 'tuikit-atomicx-vue3';
+
+const { login, loginUserInfo } = useLoginState();
+const { joinLive } = useLiveState();
+
+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();
+  await joinLive({
+    liveId: '输入对应直播间 LiveId',     // 输入对应 liveId 进入直播间
+  });
+});
+</script>
+
+<style scoped>.app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.co-guest-panel{width:100%;max-width:500px;padding: 24px;height:600px;background:rgba(255,255,255,0.9);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.1);overflow:hidden}</style>
+```
+
+## 自定义样式定制
+
+连麦管理面板支持通过 CSS 变量进行样式定制，您可以覆盖以下变量来调整组件外观，在已完成**步骤3**的前提下，您可以参考如下示例的方式来调整连麦管理面板的 UI，也可以直接将下列示例增量复制进您的组件中生成下列效果示例。
+``` typescript
+<template>
+   <CoGuestPanel class="co-guest-panel" />
+</template>
+
+<style>.co-guest-panel{--text-color-primary:#2d3748;--text-color-secondary:#93a3bb;--text-color-link:#20c9e7;--bg-color-primary:#ffffff;--bg-color-hover:#d6e7f3;--stroke-color-primary:#8bb6ef;--stroke-color-secondary:#90c0f4;--shadow-light:0 2px 8px rgba(69,67,67,0.08);--shadow-medium:0 4px 16px rgba(93,87,87,0.12);--transition:all 0.3s ease;}.co-guest-panel .panel-content{background:var(--bg-color-primary);border-radius:16px;border:1px solid var(--stroke-color-primary);box-shadow:var(--shadow-medium);transition:var(--transition);overflow:hidden;}.co-guest-panel .panel-content:hover{box-shadow:0 8px 24px rgba(0,0,0,0.15);transform:translateY(-2px);border-color:var(--stroke-color-secondary);}.co-guest-panel .user-item{padding:16px;margin:8px 0;background:var(--bg-color-primary);border:1px solid var(--stroke-color-primary);border-radius:12px;transition:var(--transition);cursor:pointer;}.co-guest-panel .user-item:hover{background:var(--bg-color-hover);border-color:var(--text-color-link);box-shadow:var(--shadow-light);transform:translateY(-1px);}.co-guest-panel .user-item:active{transform:translateY(0);transition:all 0.15s ease;}.co-guest-panel .user-item.selected{background:rgba(102,126,234,0.08);border-color:var(--text-color-link);box-shadow:var(--shadow-light);}</style></style>
+```
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**修改前**</td>
+
+<td rowspan="1" colSpan="1" >**修改后**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/af21ff93975411f0af98525400454e06.png)</td>
+
+<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/af27083e975411f0ad595254007c27c5.png)</td>
+</tr>
+</table>

package/resource/doc/livekit/vue/components/live-audience-list.md

@@ -0,0 +1,282 @@
+本文对 TUILiveKit 组件中的**观众列表组件（LiveAudienceList）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式，布局进行深度的定制。
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/864d9b02975411f0b5725254001c06ec.png)
+
+
+## 核心功能
+<table>
+<tr>
+<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>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**响应式设计**</td>
+
+<td rowspan="1" colSpan="1" >组件支持桌面端和移动端两套UI方案，自动适配不同设备屏幕尺寸，提供一致的用户体验，满足多平台直播需求</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**可定制化 UI**</td>
+
+<td rowspan="1" colSpan="1" >提供灵活的插槽机制，支持自定义观众标记、头像样式等元素，让您能够根据业务需求定制观众列表的展示效果，打造独特的视觉体验</td>
+</tr>
+</table>
+
+
+## 组件接入
+
+### 步骤1：环境配置及开通服务
+
+在进行快速接入之前，您需要参见 [准备工作](https://write.woa.com/document/185222107981008896)，满足相关环境配置及开通对应服务。
+
+### 步骤2: 安装依赖
+
+
+
+
+【npm】
+``` bash
+npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+```
+
+
+【pnpm】
+``` bash
+pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+
+【yarn】
+``` bash
+yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+### 步骤3：集成观众列表组件
+
+在您的项目中引入并使用**观众列表组件**，可直接复制如下代码示例至您的项目中展示直播间观众列表。
+``` typescript
+<template>
+  <UIKitProvider theme="dark" language="zh-CN">
+    <div class="app">
+        <div class="live-audience-container">
+          <LiveAudienceList class="live-audience-list"/>
+      </div>
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { LiveAudienceList, useLoginState, useLiveState } from 'tuikit-atomicx-vue3';
+
+const { login } = useLoginState();
+const { joinLive } = useLiveState();
+
+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();                    
+  await joinLive({
+    liveId: '输入对应直播间 LiveId',     // 进入直播间
+  });
+});
+</script>
+
+<style>.live-audience-container{display:flex;height:100%;width:300px;padding:20px}.live-audience-list{width:100%;height:100%}</style>
+```
+
+## 组件定制化
+
+**观众列表组件**提供了灵活的组件自定义插槽，该插槽支持您根据自己需求调整观众标记、特殊身份标识等元素的样式与布局。下列分别给出插槽使用示例
+
+### 组件插槽
+<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" >customAudienceInfo</td>
+
+<td rowspan="1" colSpan="1" >audience: AudienceInfo</td>
+
+<td rowspan="1" colSpan="1" >自定义观众信息的显示 UI</td>
+</tr>
+</table>
+
+``` typescript
+// customAudienceInfo 插槽使用示例
+<LiveAudienceList>
+   <CustomAudienceInfo #customAudienceInfo />
+</LiveAudienceList>
+```
+
+`AudienceInfo` 定义了直播房间中每个观众的基本信息和状态：
+<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" >userId</td>
+
+<td rowspan="1" colSpan="1" >string</td>
+
+<td rowspan="1" colSpan="1" >观众的唯一标识符，在整个系统中保持唯一性。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >userName</td>
+
+<td rowspan="1" colSpan="1" >string</td>
+
+<td rowspan="1" colSpan="1" >观众在直播中显示的名称，支持中文、英文等字符，为空时显示 userId。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >avatarUrl</td>
+
+<td rowspan="1" colSpan="1" >string</td>
+
+<td rowspan="1" colSpan="1" >观众头像的完整 URL 地址，支持 HTTPS 协议。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >isMessageDisabled</td>
+
+<td rowspan="1" colSpan="1" >boolean</td>
+
+<td rowspan="1" colSpan="1" >观众是否被禁言，true 表示已被禁言，false 表示可以正常发言。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >joinTime</td>
+
+<td rowspan="1" colSpan="1" >number</td>
+
+<td rowspan="1" colSpan="1" >观众进入直播间的时间戳，用于排序和统计。</td>
+</tr>
+</table>
+
+``` typescript
+interface AudienceInfo {
+  userId: string;              // 观众唯一标识
+  userName?: string;           // 观众显示名称（可选）
+  avatarUrl?: string;          // 观众头像URL（可选）
+  isMessageDisabled?: boolean; // 是否被禁言（可选）
+  joinTime?: number;           // 进入时间戳（可选）
+} 
+```
+
+### 组件属性
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**属性名**</td>
+
+<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" >height</td>
+
+<td rowspan="1" colSpan="1" >string</td>
+
+<td rowspan="1" colSpan="1" >'500px'</td>
+
+<td rowspan="1" colSpan="1" >组件高度，支持 CSS 单位（px、%、vh等）。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >style</td>
+
+<td rowspan="1" colSpan="1" >CSSProperties</td>
+
+<td rowspan="1" colSpan="1" >{}</td>
+
+<td rowspan="1" colSpan="1" >自定义样式对象，用于覆盖组件默认样式。</td>
+</tr>
+</table>
+
+
+#### 自定义插槽示例
+
+为了更好地让您体验及理解**观众列表组件** 组件的 **customAudienceInfo **插槽定制化能力，我们提供了**自定义个人信息**示例场景供您参考，您可以参考上述**步骤3**将如下代码增量复制至您的项目中实现类似场景的效果。
+``` typescript
+<template>
+  <LiveAudienceList>
+    <template #customAudienceInfo="{ audience }">
+      <div class="custom-audience-info">
+        <!-- 头像 -->
+        <img 
+          :src="audience.avatarUrl || defaultAvatar" 
+          :alt="audience.userName || audience.userId"
+          class="audience-avatar"
+        />
+        
+        <!-- 观众信息 -->
+        <div class="audience-details">
+          <span class="audience-name">{{ audience.userName || audience.userId }}</span>
+          <span class="join-time">{{ formatJoinTime(audience.joinTime) }}</span>
+        </div>
+        
+        <!-- 状态指示器 -->
+        <div v-if="audience.isMessageDisabled" class="muted-indicator">🔇</div>
+      </div>
+    </template>
+  </LiveAudienceList>
+</template>
+
+<script setup lang="ts">
+import { LiveAudienceList } from 'tuikit-atomicx-vue3';
+
+const defaultAvatar = 'xxx'; // 输入默认头像 Url
+
+const formatJoinTime = (timestamp?: number) => {  // 格式化加入时间
+  if (!timestamp) return '刚刚加入';
+  
+  const now = Date.now();
+  const diff = now - timestamp;
+  const minutes = Math.floor(diff / (1000 * 60));
+  const hours = Math.floor(diff / (1000 * 60 * 60));
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  
+  if (days > 0) return `${days}天前加入`;
+  if (hours > 0) return `${hours}小时前加入`;
+  if (minutes > 0) return `${minutes}分钟前加入`;
+  return '刚刚加入';
+};
+</script>
+
+<style scoped>.custom-audience-info{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;transition:background-color .2s ease}.custom-audience-info:hover{background-color:var(--uikit-color-gray-1)}.audience-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--uikit-color-gray-3)}.audience-details{flex:1;display:flex;flex-direction:column;gap:4px}.audience-name{font-size:14px;font-weight:500;color:var(--text-color-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.join-time{font-size:12px;color:var(--text-color-secondary)}.muted-indicator{font-size:16px;opacity:.6}</style>
+```

package/resource/doc/livekit/vue/components/live-list.md

@@ -1,6 +1,5 @@
 ## 概述
-
-本文对 TUILiveKit Demo 中的**直播列表页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的直播列表页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
+本文对 TUILiveKit 组件中的**直播列表页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的直播列表页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
 
 ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/f73d96db8c8611f0ae9d5254001c06ec.png)
 
@@ -20,25 +19,25 @@
 
 【npm】
 ``` bash
-npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
+npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
 ```
 
 
 【pnpm】
 ``` bash
-pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
+pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
 ```
 
 
 【yarn】
 ``` bash
-yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
+yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
 ```
 
 ### 步骤3: 直播列表页面接入
 
 在您的项目下创建 **live-list.vue **文件，可直接复制如下代码至您的项目中集成**直播列表页面**。
-``` javascript
+``` vue
 <template>
   <UIKitProvider language="zh-CN">
     <div class="container">

package/resource/doc/livekit/vue/components/live-player.md

@@ -1,6 +1,5 @@
 ## 概述
-
-本文对 TUILiveKit Demo 中的**观看页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的观看页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。这边文档用于直播观看场景，如果需要直播连麦场景，请使用 LiveView 组件。
+本文对 TUILiveKit 组件中的**观看页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的观看页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。这边文档用于直播观看场景，如果需要直播连麦场景，请使用 LiveView 组件。
 
 ## 功能概览
 <table>
@@ -68,19 +67,19 @@
 
 【npm】
 ``` bash
-npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
+npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
 ```
 
 
 【pnpm】
 ``` bash
-pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
+pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
 ```
 
 
 【yarn】
 ``` bash
-yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
+yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
 ```
 
 ### 步骤3: 观看页面接入
@@ -312,7 +311,7 @@ npm run dev
 ### 步骤1：指定 LiveId 播放
 
 若您需要指定 **LiveId** 进行播放，您需要在上述**快速接入中的步骤3**代码基础上增量添加如下内容，参考方式如下：
-``` java
+``` TypeScript
 // live-player.vue
 import { onMounted } from 'vue';
 import { useLiveState } from 'tuikit-atomicx-vue3';

package/resource/doc/livekit/vue/components/live-scene-panel.md

@@ -0,0 +1,193 @@
+本文对 TUILiveKit 组件中的**媒体源配置面板（LiveScenePanel）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式和布局进行深度的定制。
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/be6ef71a975411f093df52540099c741.png)
+
+
+## 核心功能
+<table>
+<tr>
+<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>
+</tr>
+
+<tr>
+<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>
+</tr>
+
+<tr>
+<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>
+</tr>
+</table>
+
+
+## 组件接入
+
+### 步骤1：环境配置及开通服务
+
+在进行快速接入之前，您需要参考[准备工作](https://write.woa.com/document/185222107981008896)，满足相关环境配置及开通对应服务。
+
+### 步骤2：安装依赖
+
+
+
+
+【npm】
+``` bash
+npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+```
+
+
+【pnpm】
+``` bash
+pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+
+【yarn】
+``` bash
+yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+### 步骤3：集成**媒体源配置面板**
+
+在您的项目中引入并使用**媒体源配置面板**，可直接复制如下代码示例至您的项目中展示媒体源配置面板。
+``` typescript
+<template>
+  <UIKitProvider theme="dark" language="zh-CN">
+    <div class="app-container">
+      <LiveScenePanel class="live-scene-panel" />
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { LiveScenePanel, useLoginState } from 'tuikit-atomicx-vue3';
+
+const { login } = useLoginState();
+
+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 scoped>.app-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.live-scene-panel{width:20%;height:80vh;background:rgba(0,0,0,0.8);border-radius:16px}</style>
+```
+
+## 自定义组件
+
+媒体源配置面板为用户自定义提供了丰富且多维度的功能接口，允许用户自定义素材类型、操作行为、样式主题等。在已完成上述**步骤3**的前提下，您可以参考如下示例的方式来调整媒体源配置面板的 UI，也可以直接将下列示例增量复制组件中生成下列效果示例。
+
+### 样式自定义
+
+通过 CSS 类名和变量自定义组件外观，支持主题色彩、布局样式、动画效果等全方位定制。
+``` typescript
+<template>
+  <LiveScenePanel class="custom-live-scene-panel" />
+</template>
+
+<style>.app-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.custom-live-scene-panel{width:100%;max-width:300px;height:80vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:2px solid #4c63d2;border-radius:16px;padding:24px;box-shadow:0 8px 32px rgba(0,0,0,0.1);color:white}.custom-live-scene-panel .add-material-item{background-color:#147fcb!important;color:white;border:none;border-radius:0!important;padding:12px 24px;font-weight:600;transition:all 0.3s ease}.custom-live-scene-panel .materials-list{margin-top:20px;gap:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.custom-live-scene-panel .material-item{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:12px;padding:16px;backdrop-filter:blur(10px);transition:all 0.3s ease}.custom-live-scene-panel .material-item:hover{background:rgba(255,255,255,0.2);transform:scale(1.02)}</style>
+```
+<table>
+<tr>
+<td rowspan="1" colSpan="2" >**修改前**</td>
+
+<td rowspan="1" colSpan="2" >**修改后**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**添加媒体源界面**</td>
+
+<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" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/be374b93975411f093df52540099c741.png)</td>
+
+<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/be294e63975411f0a7c6525400e889b2.png)</td>
+
+<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/be90885c975411f0af98525400454e06.png)</td>
+
+<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/be5b3349975411f0b5725254001c06ec.png)</td>
+</tr>
+</table>
+
+
+### 状态监听与扩展
+
+通过状态管理 Hooks，您可以监听媒体源配置面板的内部状态变化，实现外部业务逻辑的响应式处理。这种方式允许您在不修改组件内部代码的情况下，对素材的添加、删除、更新等操作进行监听和响应，从而实现数据同步、业务统计、用户提示等扩展功能。
+``` typescript
+<template>
+    <!-- 状态显示 -->
+    <div class="status-info">
+      <span>素材数量: {{ materialCount }}</span>
+      <span>最后操作: {{ lastOperation }}</span>
+    </div>
+    <!-- LiveScenePanel 组件 -->
+    <LiveScenePanel />
+    <StreamMixer />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { LiveScenePanel, useVideoMixerState, StreamMixer } from 'tuikit-atomicx-vue3';
+
+// 使用状态管理 hooks
+const { mediaSourceList } = useVideoMixerState();
+const lastOperation = ref('无');
+const materialCount = computed(() => mediaSourceList.value.length);
+
+// 监听素材列表变化
+watch(mediaSourceList, (newList, oldList) => {
+  if (newList.length > oldList.length) {
+    lastOperation.value = '添加素材';
+    console.log('素材已添加');
+  } else if (newList.length < oldList.length) {
+    lastOperation.value = '删除素材';
+    console.log('素材已删除');
+  }
+}, { deep: true });
+</script>
+
+<style>.status-info {display: flex; gap: 20px; padding: 12px; background: #f8f9fa;border-radius: 6px; margin-bottom: 16px;font-size: 14px;}</style>
+```