@tencentcloud/sdk-mcp 1.2.8 → 1.3.0

package/resource/doc/livekit/vue/{components/broadcast.md → live-pusher-integration.md}

@@ -1,72 +1,28 @@
-本文对 TUILiveKit 组件中的**主播开播页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的主播开播页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
+本文将介绍如何接入 TUILiveKit Demo 的**主播开播页**，指导您将我们提供的开播页面集成到您的项目中，同时介绍如何对直播页面的样式、布局、以及功能进行自定义修改。
 
-## 功能概览
-<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" >支持主播与观众实时音视频互动，并提供了九宫格、1v6、浮窗等多种连麦布局，轻松应对各类互动场景</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**观众互动**</td>
-
-<td rowspan="1" colSpan="1" >集成实时弹幕、礼物、点赞等功能，增强主播与观众的粘性</td>
-</tr>
+## 功能展示
+- **横屏开播**
 
-<tr>
-<td rowspan="1" colSpan="1" >**横竖屏开播**</td>
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027339142/bac075ccbf0111f0b4c35254001c06ec.png)
 
-<td rowspan="1" colSpan="1" >满足不同场景的直播需求</td>
-</tr>
+- **竖屏开播**
 
-<tr>
-<td rowspan="1" colSpan="1" >**观众管理**</td>
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027339142/931de742bf0111f0b4c35254001c06ec.png)
 
-<td rowspan="1" colSpan="1" >便捷的观众列表与禁言管理</td>
-</tr>
-</table>
 
+## 功能概览
+- **画面源管理**：支持添加多个摄像头、屏幕分享、窗口分享和本地图片。
 
-## 功能展示
-
-主播开播页面提供默认行为和风格，但如果默认行为和样式不能完全满足您的需求，自定义 UI 可见本文中**自由定制**部分。如下图主播开播页面功能展示主要包含**素材管理、直播工具、音视频控制、画面源输出、素材编辑工具、弹幕聊天、观众列表**。
-<table>
-<tr>
-<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/747ea23f8ebd11f0814e525400bf7822.png)</td>
-</tr>
-</table>
+- **直播画面排版**：支持对画面源拖拽、缩放，支持通过快捷菜单对画面源设置镜像、旋转和层级调整。
 
-<table>
-<tr>
-<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/73858fb28ebd11f0818a52540099c741.png)</td>
-</tr>
-</table>
+- **主播PK**：支持主播跨房连线、PK。
 
+- **互动聊天**：支持收发文字和表情消息，聊天互动。
 
-## 快速体验
+- **观众管理**：支持对观众禁言、踢出直播间等操作。
 
-如果您想要提前体验下直播功能，可以在 [在线体验](https://write.woa.com/document/193874503063744512) 中使用 [在线开播网站](https://web.sdk.qcloud.com/trtc/livekit/pusher/index.html) 快速开启一场直播进行体验，同时您也可以使用 [在线观看网站](https://web.sdk.qcloud.com/trtc/livekit/player/index.html) 来观看一场直播。
 
 ## 快速接入
 
@@ -81,19 +37,19 @@
 
 【npm】
 ``` bash
-npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
 ```
 
 
 【pnpm】
 ``` bash
-pnpm add tuikit-atomicx-vue3@latest @tencentcloud/livekit-web-vue3tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+pnpm add tuikit-atomicx-vue3 @tencentcloud/livekit-web-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 
 【yarn】
 ``` bash
-yarn add tuikit-atomicx-vue3@latest @tencentcloud/livekit-web-vue3tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+yarn add tuikit-atomicx-vue3 @tencentcloud/livekit-web-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 ### 步骤3：主播开播页面接入
@@ -115,7 +71,7 @@ yarn add tuikit-atomicx-vue3@latest @tencentcloud/livekit-web-vue3tuikit-atomicx
         <div class="left-panel">
           <LiveScenePanel />
           <div class="tools-section">
-            <CoGuestButton />
+            <!-- <CoGuestButton /> -->
           </div>
         </div>
 
@@ -123,7 +79,8 @@ yarn add tuikit-atomicx-vue3@latest @tencentcloud/livekit-web-vue3tuikit-atomicx
         <div class="center-panel">
           <StreamMixer />
           <div class="live-controls">
-            <button @click="handleStartLive">开始直播</button>
+            <button v-if="!currentLive?.liveId" @click="handleStartLive">开始直播</button>
+            <button v-else @click="handleStopLive">停止直播</button>
           </div>
         </div>
 
@@ -133,15 +90,15 @@ yarn add tuikit-atomicx-vue3@latest @tencentcloud/livekit-web-vue3tuikit-atomicx
           <BarrageList />
           <BarrageInput />
         </div>
-        
+
         <!-- 底部：主播操作 -->
-        <div class="bottom-panel">
-         <!-- <MicVolumeSetting />     // 媒体设置能力请参考本文高级功能集成部分
+        <!-- <div class="bottom-panel">
+            <MicVolumeSetting />       // 媒体设置能力请参考本文高级功能集成部分
             <SpeakerVolumeSetting />
             <CoGuestButton />          // 连麦观众能力请参考本文高级功能集成部分
             <OrientationSwitch />      // 布局设置请参考本文高级功能集成部分
-            <LayoutSwitch /> -->       // 横竖屏推流能力请参考本文高级功能集成部分
-        </div>
+            <LayoutSwitch />           // 横竖屏推流能力请参考本文高级功能集成部分
+        </div>-->
       </div>
     </div>
   </UIKitProvider>
@@ -149,6 +106,7 @@ yarn add tuikit-atomicx-vue3@latest @tencentcloud/livekit-web-vue3tuikit-atomicx
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
 import {
   LiveScenePanel,
   StreamMixer,
@@ -157,12 +115,11 @@ import {
   BarrageInput,
   useLiveListState,
   useLiveAudienceState,
-  useLoginState
+  useLoginState,
 } from 'tuikit-atomicx-vue3';
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
 
-const { login } = useLoginState();
-const { createLive } = useLiveListState();
+const { login, setSelfInfo } = useLoginState();
+const { createLive, currentLive, endLive } = useLiveListState();
 const { audienceCount } = useLiveAudienceState();
 const liveName = '我的直播间';
 
@@ -171,6 +128,14 @@ const handleStartLive = async () => {
     liveId: 'my-live-room',
     liveName: liveName,
   });
+  await setSelfInfo({
+    userName: '我的名字/昵称',   // 用户名
+    avatarUrl: '',              // 头像 URL 地址
+  });
+};
+
+const handleStopLive = async () => {
+  await endLive();
 };
 
 async function initLogin() {
@@ -191,16 +156,40 @@ onMounted(async () => {
 
 </script>
 
-<style scoped>:global(::before){box-sizing:border-box;margin:0;padding:0}:global(body){line-height:1.6;color:var(--text-color-primary);background:var(--bg-color-default)}.custom-live-pusher{display:flex;flex-direction:column;height:100vh;width:100vw;background:linear-gradient(135deg,var(--bg-color-default) 0,var(--bg-color-function) 100%);color:var(--text-color-primary);overflow:hidden}.top-controls{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--bg-color-operate);backdrop-filter:blur(10px);border-bottom:1px solid var(--stroke-color-primary);z-index:100;min-height:60px}.live-title{font-size:18px;font-weight:600;color:var(--text-color-primary);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)}.main-content{display:flex;flex:1;height:calc(100vh - 60px);gap:16px;padding:16px;overflow:hidden}.left-panel{display:flex;flex-direction:column;width:280px;gap:16px;flex-shrink:0}.tools-section{background:var(--bg-color-operate);border-radius:12px;padding:16px;border:1px solid var(--stroke-color-primary);backdrop-filter:blur(10px)}.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;background:var(--bg-color-operate);border-radius:12px;border:1px solid var(--stroke-color-primary);backdrop-filter:blur(10px);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);backdrop-filter:blur(10px);overflow:hidden}.left-panel>*{padding:16px}.right-panel>*{padding:16px}.center-panel>:first-child{flex:1;min-height:300px;padding:0;background:var(--uikit-color-black-1);border:2px solid var(--stroke-color-secondary)}.bottom-panel{display:flex;align-items:center;gap:16px;flex:1}.device-setting{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-color-function);border-radius:8px;border:1px solid var(--stroke-color-secondary)}.device-icon{cursor:pointer;color:var(--text-color-primary);transition:color .2s ease}.device-icon:hover{color:var(--text-color-link)}.device-slider{width:80px}.custom-icon-container{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--bg-color-function);border-radius:8px;border:1px solid var(--stroke-color-secondary);cursor:pointer;transition:all .2s ease;position:relative}.custom-icon-container:hover{background:var(--list-color-hover);border-color:var(--stroke-color-primary)}.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-dialog{max-width:600px}.layout-label{font-size:16px;font-weight:600;color:var(--text-color-primary);margin-bottom:16px}.template-options{margin-bottom:16px}.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:all .2s ease;text-align:center}.option-card:hover{border-color:var(--stroke-color-primary);background:var(--list-color-hover)}.option-card.active{border-color:var(--text-color-link);background:var(--bg-color-operate)}.option-info h4{margin:8px 0 0 0;font-size:12px;color:var(--text-color-primary)}.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>
+<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，否则后登录的设备会强制先登录的设备下线（即“被踢下线”）。
+   > 
+
+
 ## 高级功能集成
 
 
@@ -300,7 +289,7 @@ watch(outputVolume, (newVal) => {
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { useUIKit, TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
-import { useLiveState, LiveOrientation, LiveStatus } from 'tuikit-atomicx-vue3';
+import { useLiveListState, LiveOrientation, LiveStatus } from 'tuikit-atomicx-vue3';
 
 const { t } = useUIKit();
 
@@ -313,7 +302,7 @@ enum TUISeatLayoutTemplate {
   PortraitFixed_6v6 = 802,
 }
 
-const { currentLive, localLiveStatus, updateLiveInfo } = useLiveState();
+const { currentLive, localLiveStatus, updateLiveInfo } = useLiveListState();
 const currentOrientation = ref(LiveOrientation.Portrait);
 
 watch(
@@ -413,11 +402,11 @@ const handleCoGuest = () => {
 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, useLiveState } from 'tuikit-atomicx-vue3';
+import { LiveStatus, useLiveListState } from 'tuikit-atomicx-vue3';
 import { TUISeatLayoutTemplate } from '../types/LivePusher';
 
 const { t } = useUIKit();
-const { localLiveStatus, currentLive, updateLiveInfo } = useLiveState();
+const { localLiveStatus, currentLive, updateLiveInfo } = useLiveListState();
 
 watch(
   localLiveStatus,
@@ -522,7 +511,7 @@ function handleCancel() {
 </tr>
 
 <tr>
-<td rowspan="1" colSpan="1" >**1.素材管理**</td>
+<td rowspan="1" colSpan="1" >**素材管理**</td>
 
 <td rowspan="1" colSpan="1" >自定义素材管理区域展示</td>
 
@@ -530,7 +519,7 @@ function handleCancel() {
 </tr>
 
 <tr>
-<td rowspan="1" colSpan="1" >**2.直播工具**</td>
+<td rowspan="1" colSpan="1" >**直播工具**</td>
 
 <td rowspan="1" colSpan="1" >自定义直播工具信息展示</td>
 
@@ -538,7 +527,7 @@ function handleCancel() {
 </tr>
 
 <tr>
-<td rowspan="1" colSpan="1" >**3.在线观众**</td>
+<td rowspan="1" colSpan="1" >**在线观众**</td>
 
 <td rowspan="1" colSpan="1" >自定义观众信息展示</td>
 
@@ -546,7 +535,7 @@ function handleCancel() {
 </tr>
 
 <tr>
-<td rowspan="1" colSpan="1" >**4.消息列表**</td>
+<td rowspan="1" colSpan="1" >**消息列表**</td>
 
 <td rowspan="1" colSpan="1" >自定义消息弹幕区域展示</td>
 
@@ -598,6 +587,12 @@ function handleCancel() {
 
 <td rowspan="1" colSpan="1" >[直播列表](https://write.woa.com/document/185968224430342144)</td>
 </tr>
-</table>
 
+<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>

package/resource/doc/livekit/vue/workflow.md

@@ -0,0 +1,219 @@
+# Web Live TUIKit 代码生成工作流指令 (Vue) 
+
+**【指令目的】**: 为 Agent 提供实现 Vue Web Live TUIKit 核心功能的 **代码生成蓝图**，并指导 Agent **优先使用工具实时获取的最新文档内容**。
+
+**💡 特别提醒：**
+1. **当用户需求包含【直播列表】、【开播页】和【观看页】时，Agent 必须在生成的代码中增加一个**【主播和观众身份入口选择】**的页面或逻辑，以便用户使用不同的 UserID 进行测试**。
+2. **当用户需要实现申请上麦相关功能时需要调用** `get_web_live_state_detail` **来获取 liveKit 客户端 API 实现相关功能**。
+
+---
+
+## 📦 UIKit 版本与依赖说明
+
+### 推荐版本
+```json
+{
+  "tuikit-atomicx-vue3": "latest",
+  "@tencentcloud/uikit-base-component-vue3": "latest",
+}
+```
+
+### 自动依赖安装流程
+Agent 在生成代码后，**必须自动执行**以下步骤：
+
+1. **检测依赖完整性**：检查 `package.json` 是否包含所有必需依赖
+2. **自动安装依赖**：执行 `npm install` 或 `pnpm install`
+3. **验证安装**：确认依赖安装成功后再提示用户运行项目
+
+### esbuild 问题解决方案
+在 `package.josn` 中增加以下内容，`resolutions` 兼容 `yarn`，`overrides` 兼容 `npm` 和 `pnpm`
+```json
+{
+ "resolutions": {
+    "esbuild": "npm:esbuild-wasm@latest"
+  },
+   "overrides": {
+    "esbuild": "npm:esbuild-wasm@latest"
+  }
+}
+```
+---
+
+## 🔐 测试凭证自动生成
+
+### UserSig 自动获取工作流
+
+在生成代码前，Agent **必须**：
+
+1. **调用 `get_usersig` MCP 工具**自动生成测试账号信息
+2. **生成测试 UserID**：
+ - 主播 UserID: 格式为 live001 或 host001
+ - 观众 UserID: 格式为 user001 或 viewer001
+3. **嵌入代码**：将生成的 SDKAppID、userID（主播和观众）、userSig 直接写入代码中的配置区域
+4. **安全提示**：在代码注释中明确标注这是测试凭证，生产环境必须后端生成
+
+---
+
+## ⚙️ 代码生成核心工作流 (LLM 行动指南)
+
+Agent，本工具已为您**实时获取**了用户所需功能（Goals）对应的最新文档内容，并将其内容附在了**本指令下方**（在 `llm_code_generation_instructions_md` 字段中）。
+
+### 严格执行步骤：
+
+#### 步骤 0: 前置准备（自动化）
+```
+a. 调用 get_usersig 工具生成测试凭证
+   - 主播 userID: 使用 `live001` 格式
+   - 观众 userID: 使用 `user001` 格式
+   
+b. 检查并准备项目环境
+   - 验证 package.json 中的依赖版本
+   - 如缺少依赖，自动添加到 dependencies
+   
+c. 执行依赖安装
+   - 运行 npm install 或 pnpm install
+   - 等待安装完成并检查是否有错误
+```
+
+#### 步骤 1: 选择功能模块
+根据用户提出的具体功能需求，从以下功能块中选择对应的指令。
+
+#### 步骤 2: 使用实时文档
+**必须优先且唯一**使用本工具返回结果中**提供的实时文档内容**（而非自行访问 URL）来生成 Vue 代码片段。
+
+---
+
+## 🎯 功能实现指令
+
+### 1. 实现直播列表页 (`liveList`)
+
+**目标组件**: `liveList`
+
+**代码生成指令**:
+- 生成 Vue 组件结构，引入 `liveList`
+- **自动注入测试凭证**：在组件初始化时使用自动生成的**观众** `SDKAppID`、`userID`、`userSig`
+- **核心逻辑**: 参考本工具返回结果中实时获取的文档内容，提取最新的 API 调用和示例代码
+
+**依赖组件**: `liveList`
+
+**生成后操作**:
+```bash
+# Agent 自动执行
+npm install  # 安装依赖
+npm run dev  # 启动开发服务器
+```
+
+---
+
+### 2. 实现 PC 直播观看页 (`livePlayer` & `barrage`)
+
+**目标组件**: `livePlayer`, `barrage`
+
+**代码生成指令**:
+- 根据实时文档的示例代码生成观看页
+- **自动注入测试凭证**：在播放器初始化时配置**观众**测试账号
+- **核心逻辑**: 参考本工具返回结果中实时获取的文档内容，必须按照文档的步骤集成 `livePlayer` 和 `barrage`（弹幕），并展示如何监听视频流状态
+- **交互优化**: 添加加载状态、错误处理、重连机制
+
+**依赖组件**: `livePlayer`, `barrage`
+
+---
+
+### 3. 实现 H5 直播观看页 (`livePlayer` & `barrage`)
+
+**目标组件**: `livePlayer`, `barrage`
+
+**代码生成指令**:
+- 根据实时文档的示例代码生成观看页
+- **自动注入测试凭证**：在播放器初始化时配置**观众**测试账号
+- **核心逻辑**: 参考本工具返回结果中实时获取的文档内容，必须按照文档的步骤集成 `livePlayer` 和 `barrage`（弹幕），并展示如何监听视频流状态
+- **交互优化**: 添加加载状态、错误处理、重连机制
+
+**依赖组件**: `livePlayer`, `barrage`
+
+---
+
+### 4. 实现直播开播页 (`livePusher`)
+
+**目标组件**: `livePusher`
+
+**代码生成指令**:
+- 根据实时文档的示例代码生成开播页
+- **自动注入测试凭证**：在推流器初始化时配置**主播**测试账号
+- **核心逻辑**: 参考本工具返回结果中实时获取的文档内容，必须包含 Vue 逻辑来处理摄像头和麦克风的**权限请求和开关控制**
+- **设备检测**: 自动检测可用的摄像头和麦克风设备
+- **错误处理**: 处理权限拒绝、设备不可用等异常情况
+
+**依赖组件**: `livePusher`
+
+---
+
+### 5. 实现直播连麦功能 (`CoGuestPanel`)
+
+**目标组件**: `CoGuestPanel`
+
+**代码生成指令**:
+- 根据实时文档的示例代码生成连麦相关的复杂组件或逻辑模块
+- **自动注入测试凭证**：为主播和连麦观众分别配置测试账号
+- **核心逻辑**: 参考本工具返回结果中实时获取的文档内容，代码应展示如何使用 `CoGuestPanel` 管理连麦申请，并协调推流/播放器的逻辑切换
+- **状态管理**: 处理连麦邀请、接受、拒绝、断开等状态流转
+- **多人连麦**: 支持多人同时连麦的场景
+
+**依赖组件**: `CoGuestPanel`, `livePusher`, `livePlayer`
+```
+
+---
+
+## 🔄 完整自动化流程总结
+
+```mermaid
+graph TD
+    A[接收用户需求] --> B[调用 get_web_live_uikit_integration 获取最新文档]
+    B --> C[检查 package.json 依赖]
+    C --> D[自动添加缺失依赖]
+    D --> E[执行 npm install]
+    E --> F[根据实时文档生成代码]
+    F --> G[调用 get_usersig 生成测试凭证]
+    G --> H[注入测试凭证到代码]
+    H --> I[添加安全注释和提示]
+    I --> J[启动开发服务器]
+    J --> K[输出测试信息给用户]
+```
+
+---
+
+## 📋 Agent 检查清单
+
+在完成代码生成后，Agent 必须确认：
+
+- [x] 已调用 `get_usersig` 生成测试凭证
+- [x] 已将凭证嵌入代码配置区域
+- [x] 已在代码中添加安全警告注释
+- [x] 已检查 `package.json` 依赖完整性
+- [x] 已自动执行 `npm install`
+- [x] 已验证依赖安装成功
+- [x] 已使用实时文档内容（非外部 URL）
+- [x] 已添加错误处理和日志输出
+- [x] 已为用户提供测试账号信息
+- [x] 已提示用户运行 `npm run dev`
+
+---
+
+## 🚨 安全提醒（必须包含在生成的代码注释中）
+
+```javascript
+/**
+ * ⚠️ 重要安全提示
+ * 
+ * 1. 当前使用的 userSig 是通过开发工具自动生成的测试凭证
+ * 2. userSig 有效期为 7 天，过期后需要重新生成
+ * 3. ❌ 生产环境严禁在前端生成 userSig
+ * 4. ✅ 正式上线前，必须在后端服务生成 userSig
+ * 5. 参考文档: https://cloud.tencent.com/document/product/647/17275
+ * 
+ * SDKAppID 和 secretKey 获取位置：
+ * - IM 应用: https://console.cloud.tencent.com/im
+ * - TRTC 应用: https://console.cloud.tencent.com/trtc
+ */
+```
+