@tencentcloud/sdk-mcp 1.3.9 → 1.4.0

package/resource/doc/livekit/{live → preset/live}/vue/components/live-scene-panel.md

@@ -1,71 +1,32 @@
 本文对 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
@@ -124,34 +85,10 @@ onMounted(async () => {
 
 <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>
-
+| **修改前** | **修改后** |  |  |
+| --- | --- | --- | --- |
+| **添加媒体源界面** | **媒体源设置界面** | **添加媒体源界面** | **媒体源设置界面** |
+|  |  |  |  |
 
 ### 状态监听与扩展
 
@@ -190,4 +127,4 @@ watch(mediaSourceList, (newList, oldList) => {
 </script>
 
 <style>.status-info {display: flex; gap: 20px; padding: 12px; background: #f8f9fa;border-radius: 6px; margin-bottom: 16px;font-size: 14px;}</style>
-```
+```

package/resource/doc/livekit/{live → preset/live}/vue/components/live-view.md

@@ -1,53 +1,29 @@
 本文对**直播视频组件（LiveView）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式，布局进行深度的定制。
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/1b766277b00211f09e195254007c27c5.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" >LiveView 能够根据当前用户的身份（观众或连麦者）自动切换流类型。<br>- 观众模式： 组件将播放超低延迟视频流，确保数百万观众都能流畅观看，同时大幅节省流量成本。<br>- 连线模式： 组件会自动切换到实时音视频流，提供毫秒级的超低延迟，保证连线用户之间实时、清晰的互动体验。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**可定制化 UI**</td>
-
-<td rowspan="1" colSpan="1" >为了满足多样化的业务场景，LiveView 提供组件 UI 自定义插槽，让您能够完全掌控连麦用户的视频流区域，重写其 UI 展示，灵活定义连麦用户的头像、昵称、状态等信息，轻松打造符合您品牌风格的独特视觉体验。</td>
-</tr>
-</table>
-
+| **功能分类** | **具体能力** |
+| --- | --- |
+| **智能流切换** | LiveView 能够根据当前用户的身份（观众或连麦者）自动切换流类型。<br>- 观众模式： 组件将播放超低延迟视频流，确保数百万观众都能流畅观看，同时大幅节省流量成本。<br>- 连线模式： 组件会自动切换到实时音视频流，提供毫秒级的超低延迟，保证连线用户之间实时、清晰的互动体验。 |
+| **可定制化 UI** | 为了满足多样化的业务场景，LiveView 提供组件 UI 自定义插槽，让您能够完全掌控连麦用户的视频流区域，重写其 UI 展示，灵活定义连麦用户的头像、昵称、状态等信息，轻松打造符合您品牌风格的独特视觉体验。 |
 
 ## 组件接入
 
 ### 步骤1：环境配置及开通服务
 
-在进行快速接入之前，您需要参考 [准备工作](https://write.woa.com/document/185222107981008896)，满足相关环境配置及开通对应服务。
+在进行快速接入之前，您需要参考 准备工作，满足相关环境配置及开通对应服务。
 
 ### 步骤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
@@ -87,7 +63,7 @@ async function initLogin() {
 }
 
 onMounted(async () => {
-  await initLogin();                    
+  await initLogin();
   await joinLive({
     liveId: '已经存在的直播间 Id',   // 观众进入直播间之后， LiveView 自动播放超低延时流
   })
@@ -103,23 +79,9 @@ onMounted(async () => {
 LiveView 提供了灵活的组件自定义插槽，该插槽支持您根据自己需求调整头像、昵称、状态等元素的样式与布局，也支持定制视频流区域连麦 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" >streamViewUI</td>
-
-<td rowspan="1" colSpan="1" >userInfo</td>
-
-<td rowspan="1" colSpan="1" >自定义麦位的显示 UI</td>
-</tr>
-</table>
+| **名称** | **参数** | **说明** |
+| --- | --- | --- |
+| streamViewUI | userInfo | 自定义麦位的显示 UI |
 
 ``` java
 // streamViewUI 插槽使用示例
@@ -129,126 +91,27 @@ LiveView 提供了灵活的组件自定义插槽，该插槽支持您根据自
 ```
 1. `userInfo` 定义了直播房间中每个麦位的基本信息和状态：
 
-<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" >userInfo</td>
-
-<td rowspan="1" colSpan="1" >userInfo</td>
-
-<td rowspan="1" colSpan="1" >非必填</td>
-
-<td rowspan="1" colSpan="1" >当前坐在该麦位上的用户信息，如果麦位为空则为 `undefined`。</td>
-</tr>
-</table>
+| 参数 | 类型 | 属性 | 说明 |
+| --- | --- | --- | --- |
+| userInfo | userInfo | 非必填 | 当前坐在该麦位上的用户信息，如果麦位为空则为 `undefined`。 |
 
    ``` typescript
    interface userInfo {
      userInfo: userInfo; // 麦位上的用户信息
-   } 
+   }
    ```
 2. `userInfo` 定义了直播房间中每个麦位上的用户详细信息：
 
-<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" >roomId</td>
-
-<td rowspan="1" colSpan="1" >string</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>
-
-<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" >必填</td>
-
-<td rowspan="1" colSpan="1" >用户在直播中显示的名称，支持中文、英文等字符。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >avatarUrl</td>
-
-<td rowspan="1" colSpan="1" >string</td>
-
-<td rowspan="1" colSpan="1" >必填</td>
-
-<td rowspan="1" colSpan="1" >用户头像的完整URL地址，支持 HTTPS 协议。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >microphoneStatus</td>
-
-<td rowspan="1" colSpan="1" >DeviceStatus</td>
-
-<td rowspan="1" colSpan="1" >必填</td>
-
-<td rowspan="1" colSpan="1" >麦克风的当前状态。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >microphoneStatusReason</td>
-
-<td rowspan="1" colSpan="1" >DeviceStatusReason</td>
-
-<td rowspan="1" colSpan="1" >必填</td>
-
-<td rowspan="1" colSpan="1" >麦克风状态变更的原因，用于区分是用户主动操作还是管理员操作。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >cameraStatus</td>
-
-<td rowspan="1" colSpan="1" >DeviceStatus</td>
-
-<td rowspan="1" colSpan="1" >必填</td>
-
-<td rowspan="1" colSpan="1" >摄像头的当前状态。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >cameraStatusReason</td>
-
-<td rowspan="1" colSpan="1" >DeviceStatusReason</td>
-
-<td rowspan="1" colSpan="1" >必填</td>
-
-<td rowspan="1" colSpan="1" >摄像头状态变更的原因，用于区分是用户主动操作还是管理员操作。</td>
-</tr>
-</table>
+| 参数 | 类型 | 属性 | 说明 |
+| --- | --- | --- | --- |
+| roomId | string | 必填 | 当前直播房间的唯一标识符，用于区分不同的直播房间。 |
+| userId | string | 必填 | 用户的唯一标识符，在整个系统中保持唯一性。 |
+| userName | string | 必填 | 用户在直播中显示的名称，支持中文、英文等字符。 |
+| avatarUrl | string | 必填 | 用户头像的完整URL地址，支持 HTTPS 协议。 |
+| microphoneStatus | DeviceStatus | 必填 | 麦克风的当前状态。 |
+| microphoneStatusReason | DeviceStatusReason | 必填 | 麦克风状态变更的原因，用于区分是用户主动操作还是管理员操作。 |
+| cameraStatus | DeviceStatus | 必填 | 摄像头的当前状态。 |
+| cameraStatusReason | DeviceStatusReason | 必填 | 摄像头状态变更的原因，用于区分是用户主动操作还是管理员操作。 |
 
    ``` typescript
    interface SeatUserInfo {
@@ -261,7 +124,7 @@ LiveView 提供了灵活的组件自定义插槽，该插槽支持您根据自
      cameraStatus: DeviceStatus;        // 摄像头状态
      allowOpenCamera: boolean;          // 是否允许打开摄像头
    }
-   
+
    export type SeatUserInfo = {
      liveId: string;                                // 直播房间ID
      userId: string;                                // 用户唯一标识
@@ -275,67 +138,13 @@ LiveView 提供了灵活的组件自定义插槽，该插槽支持您根据自
    ```
 3. `RegionInfo` 定义了麦位在视频画布中的显示区域和层级信息：
 
-<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" >x</td>
-
-<td rowspan="1" colSpan="1" >number</td>
-
-<td rowspan="1" colSpan="1" >必填</td>
-
-<td rowspan="1" colSpan="1" >区域左上角相对于画布左上角的X坐标（像素值）。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >y</td>
-
-<td rowspan="1" colSpan="1" >number</td>
-
-<td rowspan="1" colSpan="1" >必填</td>
-
-<td rowspan="1" colSpan="1" >区域左上角相对于画布左上角的Y坐标（像素值）。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >w</td>
-
-<td rowspan="1" colSpan="1" >number</td>
-
-<td rowspan="1" colSpan="1" >必填</td>
-
-<td rowspan="1" colSpan="1" >区域的宽度（像素值），必须大于0。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >h</td>
-
-<td rowspan="1" colSpan="1" >number</td>
-
-<td rowspan="1" colSpan="1" >必填</td>
-
-<td rowspan="1" colSpan="1" >区域的高度（像素值），必须大于0。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >zOrder</td>
-
-<td rowspan="1" colSpan="1" >number</td>
-
-<td rowspan="1" colSpan="1" >必填</td>
-
-<td rowspan="1" colSpan="1" >层级顺序，数值越大越靠前显示，用于处理重叠区域的显示优先级。</td>
-</tr>
-</table>
+| 参数 | 类型 | 属性 | 说明 |
+| --- | --- | --- | --- |
+| x | number | 必填 | 区域左上角相对于画布左上角的X坐标（像素值）。 |
+| y | number | 必填 | 区域左上角相对于画布左上角的Y坐标（像素值）。 |
+| w | number | 必填 | 区域的宽度（像素值），必须大于0。 |
+| h | number | 必填 | 区域的高度（像素值），必须大于0。 |
+| zOrder | number | 必填 | 层级顺序，数值越大越靠前显示，用于处理重叠区域的显示优先级。 |
 
    ``` typescript
    interface RegionInfo {
@@ -354,7 +163,7 @@ LiveView 提供了灵活的组件自定义插槽，该插槽支持您根据自
 <template>
   <LiveView>
     <template #streamViewUI="{ userInfo }">
-      <div 
+      <div
         class="live-stream-view"
         :class="{ 'is-anchor': isAnchor(userInfo), 'is-guest': !isAnchor(userInfo) }"
       >
@@ -362,7 +171,7 @@ LiveView 提供了灵活的组件自定义插槽，该插槽支持您根据自
         <div class="video-area">
           <!-- 视频流会自动渲染 -->
         </div>
-        
+
         <!-- 用户信息覆盖层 -->
         <div class="user-overlay">
           <div class="user-badge" :class="{ 'anchor-badge': isAnchor(userInfo) }">

package/resource/doc/livekit/preset/live/vue/components/stream-mixer.md

@@ -0,0 +1,211 @@
+本文对 TUILiveKit 组件中的**视频源编辑画板（StreamMixer）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式，布局进行深度的定制。
+
+## 核心功能
+| **功能分类** | **具体能力** |
+| --- | --- |
+| **实时预览** | 提供所见即所得的编辑体验，主播可以直观地看到混流效果，支持对元素进行旋转、移动、缩放、镜像、层级调整等操作 |
+| **模板布局** | 内置多种直播间布局模板，支持自动适配不同连麦场景，包括九宫格、1v6、浮窗等，帮助您快速切换不同风格的直播画面。 |
+| **用户状态管理** | 智能感知连麦用户的加入和退出，自动调整布局，无需手动干预，确保了直播过程的流畅性，为主播提供无缝体验。 |
+| **可定制化 UI** | 为了满足多样化的业务场景，视频源编辑画板提供组件 UI 自定义插槽，让您能够完全掌控连麦用户的视频流区域，重写其 UI 展示，灵活定义连麦用户的头像、昵称、状态等信息，轻松打造符合您 UI 风格的独特视觉体验。 |
+
+## 组件接入
+
+### 步骤1：环境配置及开通服务
+
+在进行快速接入之前，您需要参见 准备工作，满足相关环境配置及开通对应服务。
+
+### 步骤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">
+      <LiveScenePanel class="live-scene-panel" />
+      <StreamMixer class="live-stream-mixer" />
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { LiveScenePanel, StreamMixer, useLoginState, useLiveState, useCoGuestState } from 'tuikit-atomicx-vue3';
+
+const { login } = useLoginState();
+const { createLive } = useLiveState();
+const { sendCoGuestRequest } = useCoGuestState();
+
+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 createLive({               // 主播创建直播间之后， StreamMixer 自动将本地合图画面推流到直播间
+    liveId: `live_${loginUserInfo.value.userId}`,
+    liveName: `${loginUserInfo.value?.userName} 的直播间`,
+  });
+  await sendCoGuestRequest();     // 观众端通过调用相应方法即可加入直播间并根据需要上下麦,观众成功上麦之后，StreamMixer 自动播放实时音视频流
+});
+</script>
+
+<style>.app {width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center}</style>
+```
+``` bash
+npm run dev
+```
+
+## 组件定制化
+
+**视频源编辑画板**提供了灵活的组件自定义插槽，该插槽支持您根据自己需求调整头像、昵称、状态等元素的样式与布局，也支持定制视频流区域连麦 UI。下列分别给出插槽使用示例
+
+### 组件插槽
+| **名称** | **参数** | **说明** |
+| --- | --- | --- |
+| seatViewUI | seatInfo: SeatInfo | 自定义麦位的显示 UI |
+
+``` java
+// seatViewUI 插槽使用示例
+<StreamMixer>
+  <CustomSeatViewUI #seatViewUI></CustomSeatViewUI>
+</StreamMixer>
+```
+1. `SeatInfo` 定义了直播房间中每个麦位的基本信息和状态：
+
+| 参数 | 类型 | 属性 | 说明 |
+| --- | --- | --- | --- |
+| index | number | 必填 | 麦位的索引号，从0开始递增，用于标识麦位在房间中的位置。 |
+| isLocked | boolean | 必填 | 麦位锁定状态，true 表示麦位被锁定，其他用户无法进入；false 表示麦位开放。 |
+| userInfo | SeatUserInfo | 非必填 | 当前坐在该麦位上的用户信息，如果麦位为空则为 `undefined`。 |
+| region | RegionInfo | 非必填 | 麦位在视频画布中的显示区域信息，用于多路视频布局。 |
+
+   ``` typescript
+   interface SeatInfo {
+     index: number;           // 麦位索引
+     isLocked: boolean;       // 麦位是否被锁定
+     userInfo?: SeatUserInfo; // 麦位上的用户信息（可选）
+     region?: RegionInfo;     // 麦位在画布中的区域信息（可选）
+   }
+   ```
+2. `SeatUserInfo` 定义了直播房间中每个麦位上的用户详细信息：
+
+| 参数 | 类型 | 属性 | 说明 |
+| --- | --- | --- | --- |
+| roomId | string | 必填 | 当前直播房间的唯一标识符，用于区分不同的直播房间。 |
+| userId | string | 必填 | 用户的唯一标识符，在整个系统中保持唯一性。 |
+| userName | string | 必填 | 用户在直播中显示的名称，支持中文、英文等字符。 |
+| avatarUrl | string | 必填 | 用户头像的完整URL地址，支持 HTTPS 协议。 |
+| microphoneStatus | DeviceStatus | 必填 | 麦克风的当前状态。 |
+| microphoneStatusReason | DeviceStatusReason | 必填 | 麦克风状态变更的原因，用于区分是用户主动操作还是管理员操作。 |
+| cameraStatus | DeviceStatus | 必填 | 摄像头的当前状态。 |
+| cameraStatusReason | DeviceStatusReason | 必填 | 摄像头状态变更的原因，用于区分是用户主动操作还是管理员操作。 |
+
+   ``` typescript
+   interface SeatUserInfo {
+     roomId: string;                    // 直播房间ID
+     userId: string;                    // 用户唯一标识
+     userName: string;                  // 用户显示名称
+     avatarUrl: string;                 // 用户头像URL
+     microphoneStatus: DeviceStatus;    // 麦克风状态
+     allowOpenMicrophone: boolean;      // 是否允许打开麦克风
+     cameraStatus: DeviceStatus;        // 摄像头状态
+     allowOpenCamera: boolean;          // 是否允许打开摄像头
+   }
+
+   export type SeatUserInfo = {
+     liveId: string;                                // 直播房间ID
+     userId: string;                                // 用户唯一标识
+     userName: string;                              // 用户显示名称
+     avatarUrl: string;                             // 用户头像URL
+     microphoneStatus: DeviceStatus;                // 麦克风状态
+     microphoneStatusReason: DeviceStatusReason;    // 麦克风状态变更原因
+     cameraStatus: DeviceStatus;                    // 摄像头状态
+     cameraStatusReason: DeviceStatusReason;        // 摄像头状态变更原因
+   }
+   ```
+3. `RegionInfo` 定义了麦位在视频画布中的显示区域和层级信息：
+
+| 参数 | 类型 | 属性 | 说明 |
+| --- | --- | --- | --- |
+| x | number | 必填 | 区域左上角相对于画布左上角的X坐标（像素值）。 |
+| y | number | 必填 | 区域左上角相对于画布左上角的Y坐标（像素值）。 |
+| w | number | 必填 | 区域的宽度（像素值），必须大于0。 |
+| h | number | 必填 | 区域的高度（像素值），必须大于0。 |
+| zOrder | number | 必填 | 层级顺序，数值越大越靠前显示，用于处理重叠区域的显示优先级。 |
+
+   ``` typescript
+   interface RegionInfo {
+     x: number;      // 区域左上角X坐标
+     y: number;      // 区域左上角Y坐标
+     w: number;      // 区域宽度
+     h: number;      // 区域高度
+     zOrder: number; // 层级顺序
+   }
+   ```
+
+### 自定义插槽示例
+
+为了更好地让您体验及理解视频源编辑画板 组件的 seatViewUI 插槽定制化能力，我们提供了**直播连麦场景**示例场景供您参考，您可以参考上述**步骤3**将以下代码增量复制至您的项目中实现类似场景的效果。
+``` typescript
+<template>
+  <StreamMixer>
+    <template #seatViewUI="{ userInfo }">
+      <div
+        class="live-stream-view"
+        :class="{ 'is-anchor': isAnchor(userInfo), 'is-guest': !isAnchor(userInfo) }"
+      >
+        <!-- 用户信息覆盖层 -->
+        <div class="user-overlay">
+          <div class="user-badge" :class="{ 'anchor-badge': isAnchor(userInfo) }">
+            {{ isAnchor(userInfo) ? '主播' : '观众' }}
+          </div>
+          <div class="user-name">{{ userInfo.userName }}</div>
+          <div class="device-status">
+            <span :class="['mic', userInfo.microphoneStatus]"></span>
+            <span :class="['camera', userInfo.cameraStatus]"></span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </StreamMixer>
+</template>
+
+<script setup lang="ts">
+import { StreamMixer } from 'tuikit-atomicx-vue3';
+import type { SeatUserInfo } from 'tuikit-atomicx-vue3';
+
+// 判断是否为主播（根据业务逻辑）
+const isAnchor = (userInfo: SeatUserInfo) => {
+  // 这里可以根据用户ID、角色等判断
+  return userInfo.userId.includes('anchor') || userInfo.userName.includes('主播');
+};
+</script>
+
+<style scoped>.live-stream-view{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden}.live-stream-view.is-anchor{border:3px solid #ff6b35;box-shadow:0 0 20px rgba(255,107,53,.3)}.live-stream-view.is-guest{border:1px solid #ddd}.video-area{width:100%;height:100%;background:#000}.user-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:10px;color:#fff}.user-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;margin-bottom:5px;background:#666}.anchor-badge{background:#ff6b35;color:#fff}.user-name{font-weight:700;margin-bottom:5px}.device-status span{margin-right:5px;opacity:.8}.device-status .camera.Off,.device-status .mic.Off{opacity:.3}</style>
+```

package/resource/doc/livekit/preset/live/vue/faq.md

@@ -0,0 +1 @@
+