@tencentcloud/sdk-mcp 1.2.8 → 1.3.0

package/resource/doc/livekit/vue/live-player-desk-integration.md

@@ -0,0 +1,293 @@
+本文对 TUILiveKit Demo 中的**观看页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的观看页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
+
+## 功能展示
+
+观看页面提供默认行为和风格，但如果默认行为和样式不能完全满足您的需求，您也可以对 UI 进行自定义。图中显示的数字与特定功能列表中的类别相对应。其中主要包含直播**信息展示、视频直播区域、在线观众、音视频操作、直播时长、画面分辨率切换、全屏功能、聊天互动、消息列表等。**
+- **直播视频播放**：高清流畅的直播体验。
+
+- **弹幕互动**：实时弹幕交流。
+
+- **观众列表**：查看在线观众信息。
+
+- **全屏播放**：沉浸式观看体验。
+
+- **H5 移动平台支持**：跨平台兼容。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/99721fcb8c8611f0814e525400bf7822.png)
+
+
+## 快速接入
+
+### 步骤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/uikit-base-component-vue3
+```
+
+
+【yarn】
+``` bash
+yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
+```
+
+### 步骤3：观看页面接入
+
+在您的项目下创建 **live-player.vue **文件，可直接复制如下代码至您的项目中集成**观看页面**。
+``` java
+<template>
+  <UIKitProvider language="zh-CN">
+    <div class="container">
+      <!-- 直播核心区域 -->
+      <section class="live">
+        <header class="header">
+          <IconArrowStrokeBack class="back-btn" size="20" />
+          <Avatar :src="currentLive?.liveOwner.avatarUrl" :size="32" class="avatar" />
+          <span class="user-name">{{ currentLive?.liveOwner.userName || currentLive?.liveOwner.userId }}</span>
+        </header>
+        <LiveCoreView class="player" />
+      </section>
+
+      <div class="sidebar">
+        <!-- 在线观众列表 -->
+        <section class="audience">
+          <header class="section-header">
+            <h3> 在线观众 <span>({{ audienceList.length }})</span></h3>
+          </header>
+          <LiveAudienceList class="list" />
+        </section>
+
+        <!-- 消息列表 & 消息输入框 -->
+        <section class="barrage">
+          <header class="section-header">
+            <h3>消息列表</h3>
+          </header>
+          <BarrageList class="list" />
+          <BarrageInput class="input" height="48px" />
+        </section>
+      </div>
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { LiveAudienceList, BarrageList, BarrageInput, useLiveAudienceState, LiveCoreView, useLiveListState, Avatar, useLoginState } from 'tuikit-atomicx-vue3';
+import { UIKitProvider, IconArrowStrokeBack } from '@tencentcloud/uikit-base-component-vue3';
+
+const { audienceList } = useLiveAudienceState();
+const { currentLive } = useLiveListState();
+const { login } = useLoginState();
+
+const liveId = 'live_xxxx'  // 填入您要观看的直播间的ID
+
+async function initLogin() {
+  try {
+    await login({
+      sdkAppId: 0,        // SDKAppID, 可以参考步骤 1 获取
+      userId: 'xxx',      // UserID, 可以参考步骤 1 获取
+      userSig: 'xxx',     // userSig, 可以参考步骤 1 获取
+    });
+  } catch (error) {
+    console.error('登录失败:', error);
+  }
+}
+
+onMounted(async () => {
+  await initLogin();
+});
+
+</script>
+
+<style>:global(body){height:100vh;width:100vw;margin:0;padding:0;overflow:hidden;font-size:15px;line-height:1.6;text-rendering:optimizeLegibility;}:global(*),:global(*::before),:global(*::after){box-sizing:border-box;margin:0;}.container{display:grid;grid-template-columns:70% 30%;height:100vh;width:100vw;gap:16px;padding:16px;background:var(--bg-color-default);box-sizing:border-box;overflow:hidden;}.live{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);}.header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--stroke-color-primary);}.back-btn{cursor:pointer;color:var(--text-color-tertiary);transition:color 0.2s;}.back-btn:hover{color:var(--text-color-link-hover);}.avatar{border:1px solid var(--uikit-color-white-7);}.user-name{color:var(--text-color-primary);font-weight:500;}.player{flex:1;background:var(--uikit-color-black-1);}.sidebar{display:flex;flex-direction:column;gap:16px;height:100%;overflow:hidden;}.audience{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.barrage{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.section-header{padding:16px;border-bottom:1px solid var(--stroke-color-primary);background:var(--bg-color-operate);}.section-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-color-primary);}.section-header span{font-weight:400;color:var(--text-color-secondary);font-size:14px;}.list{flex:1;min-height:0;overflow-y:auto;}.input{border-top:1px solid var(--stroke-color-primary);flex-shrink:0;height:48px;}@media (max-width:1200px){.container{grid-template-columns:1fr;grid-template-rows:60% 20% 20%;gap:12px;}.sidebar{gap:12px;}.audience,.barrage{min-height:200px;}}@media (max-width:768px){.container{padding:8px;gap:8px;grid-template-rows:50% 25% 25%;}.header,.section-header{padding:12px;}.sidebar{gap:8px;}}</style>
+
+```
+
+### 步骤4：启动项目
+
+打开终端，进入项目目录，执行以下命令启动项目后，您就可以观看直播了。
+``` bash
+npm run dev
+```
+
+## 播放直播流
+
+### 步骤1：开启一场直播
+- **方式一（推荐）：**
+
+
+   使用我们提供的 [在线开播网站](https://web.sdk.qcloud.com/trtc/livekit/pusher/index.html) ，开启一场直播来观看，开启后获取直播间 ID
+
+- **方式二：**
+
+
+   集成我们提供的 [主播开播（Web 桌面浏览器）](https://write.woa.com/document/188483825115738112)，开启一场直播来观看，开启后获取直播间 ID。
+   
+
+   > **重要提示：**
+   > 
+
+   > 请使用不同的 **用户 ID** 开播和观看，否则后登录的设备会强制先登录的设备下线（即“被踢下线”）。
+   > 
+
+
+### 步骤2：观看直播
+
+在上述**快速接入步骤 3 **的代码基础上增加如下内容，进入直播间观看：
+``` java
+// live-player.vue
+import { onMounted } from 'vue';
+import { useLiveListState } from 'tuikit-atomicx-vue3';
+
+const { joinLive } = useLiveListState();
+
+onMounted(async () => {
+  await joinLive({ liveId: 'xxx' }); // 输入 liveId 加入直播间，具体参数含义可参考步骤 1 中的准备工作
+});
+```
+
+观看效果如下图所示：
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027339142/3b82b1dcbf6911f0b4c35254001c06ec.gif)
+
+
+### 步骤3：路由配置
+
+由于涉及到直播列表(或首页)到直播间的跳转逻辑，您需要配置 Vue Router。在项目 **src** 目录下新建 **router **文件夹，并创建 **index.ts **文件。然后，在您的主文件（例如 **main.ts** 或 **index.ts**）中引入并使用路由。可参见 [GitHub 代码示例](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts)，如果需要直播列表，可参见文档 [直播列表](https://write.woa.com/document/185968224430342144)。
+``` typescript
+// src/router/index.ts
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/live-player',
+    component: () => import('../views/live-player.vue'),
+  },
+  // 如果需要直播列表功能，可添加如下路由  
+  // {  
+    //   path: '/live-list',  
+    //   component: () => import('../views/live-list.vue'),  
+  // },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+export default router;
+
+// src/main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App);
+app.use(router);
+app.mount('#app');
+```
+
+## 自由定制
+
+根据上述功能展示图，我们也支持您根据项目需求对观看页面进行 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>- **展示/隐藏 Logo，替换为您需要的 Logo**<br>- **UI 定制、展示/隐藏关注按钮，替换为您需要的按钮风格**</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 定制，您可以通过如下方式进行实现，以观看页面操作的 Icon 为例。参考下图，您可以找到对应 Button / Icon 指定位置的源码，对当前部分的按钮进行**增加、删除、替换**等 UI 定制操作。
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027339142/94af15a6bf6911f0b4c35254001c06ec.png)
+
+
+## 下一步
+
+恭喜您，现在您已经成功集成了观众观看。接下来，您可以继续接入 **直播列表、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" >[直播列表](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>
+
+<tr>
+<td rowspan="1" colSpan="1" >Web 监播</td>
+
+<td rowspan="1" colSpan="1" >运营平台，支持直播间管控。</td>
+
+<td rowspan="1" colSpan="1" >[Web 监播页](https://write.woa.com/document/185222048061181952)</td>
+</tr>
+</table>

package/resource/doc/livekit/vue/{components/live-player.md → live-player-h5-integration.md}

@@ -1,57 +1,21 @@
-## 概述
-本文对 TUILiveKit 组件中的**观看页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的观看页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。这边文档用于直播观看场景，如果需要直播连麦场景，请使用 LiveView 组件。
+本文对 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" >实时弹幕交流</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>
+观看页面提供默认行为和风格，但如果默认行为和样式不能完全满足您的需求，您也可以对 UI 进行自定义。图中显示的数字与特定功能列表中的类别相对应。其中主要包含直播**信息展示、视频直播区域、在线观众、音视频操作、直播时长、画面分辨率切换、全屏功能、聊天互动、消息列表等。**
+- **直播视频播放：**高清流畅的直播体验。
 
-<tr>
-<td rowspan="1" colSpan="1" >**全屏播放**</td>
+- **弹幕互动：**实时弹幕交流。
 
-<td rowspan="1" colSpan="1" >沉浸式观看体验</td>
-</tr>
+- **观众列表：**查看在线观众信息。
 
-<tr>
-<td rowspan="1" colSpan="1" >**Web 桌面浏览器支持**</td>
+- **关注主播：**一键关注喜欢的主播。
 
-<td rowspan="1" colSpan="1" > 跨平台兼容</td>
-</tr>
-</table>
+- **全屏播放：**沉浸式观看体验。
 
+- **Web 桌面浏览器支持：**跨平台兼容。
 
-## 功能展示
-
-观看页面提供默认行为和风格，但如果默认行为和样式不能完全满足您的需求，您也可以对 UI 进行自定义。图中显示的数字与特定功能列表中的类别相对应。其中主要包含直播**信息展示、视频直播区域、在线观众、音视频操作、直播时长、画面分辨率切换、全屏功能、聊天互动、消息列表等。**
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/de40dc288ebd11f0814e525400bf7822.png)
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027339142/1cd04be2bf6511f0a5e052540099c741.png)
 
 
 ## 快速接入
@@ -60,29 +24,29 @@
 
 在进行快速接入之前，您需要参见 [准备工作](https://write.woa.com/document/185222107981008896)，满足相关环境配置及开通对应服务。
 
-### 步骤2: 安装依赖
+### 步骤2：安装依赖
 
 
 
 
 【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/uikit-base-component-vue3
+pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 
 【yarn】
 ``` bash
-yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
-### 步骤3: 观看页面接入
+### 步骤3：观看页面接入
 
 在您的项目下创建 `live-player.vue` 文件，可直接复制如下代码至您的项目中集成**观看页面**。
 ``` typescript
@@ -182,21 +146,21 @@ yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { 
   LiveAudienceList, 
   BarrageList, 
   BarrageInput, 
   useLiveAudienceState, 
   LiveCoreView, 
-  useLiveState, 
+  useLiveListState, 
   Avatar, 
   useLoginState 
 } from 'tuikit-atomicx-vue3';
 import { UIKitProvider, IconClose } from '@tencentcloud/uikit-base-component-vue3';
 
 const { audienceList, fetchAudienceList } = useLiveAudienceState();
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 const { login } = useLoginState();
 
 const audienceDrawerVisible = ref(false);
@@ -247,11 +211,84 @@ onMounted(async () => {
 
 ```
 
-### 步骤4: 启动项目
+### 步骤4：启动项目
+
+打开终端，进入项目目录，执行以下命令启动项目后，您就可以观看直播了。
 ``` bash
 npm run dev
 ```
 
+## 播放直播流
+
+### 步骤1：开启一场直播
+- **方式一（推荐）：**
+
+
+   使用我们提供的 [在线开播网站](https://web.sdk.qcloud.com/trtc/livekit/pusher/index.html) ，开启一场直播来观看，开启后获取直播间 ID
+
+- **方式二：**
+
+
+   集成我们提供的 [主播开播（Web 桌面浏览器）](https://write.woa.com/document/188483825115738112)，开启一场直播来观看，开启后获取直播间 ID。
+   
+
+   > **重要提示：**
+   > 
+
+   > 请使用不同的 **用户 ID** 开播和观看，否则后登录的设备会强制先登录的设备下线（即“被踢下线”）。
+   > 
+
+
+### 步骤2：观看直播
+
+在上述**快速接入步骤 3 **的代码基础上增加如下内容，进入直播间观看：
+``` java
+// live-player.vue
+import { onMounted } from 'vue';
+import { useLiveListState } from 'tuikit-atomicx-vue3';
+
+const { joinLive } = useLiveListState();
+
+onMounted(async () => {
+  await joinLive({ liveId: 'xxx' }); // 输入 liveId 加入直播间，具体参数含义可参考步骤 1 中的准备工作
+});
+```
+
+### 步骤3：路由配置
+
+由于涉及到直播列表(或首页)到直播间的跳转逻辑，您需要配置 Vue Router。在项目 `src` 目录下新建 `router` 文件夹，并创建 `index.ts` 文件。然后，在您的主文件（例如 `main.ts` 或 `index.ts`）中引入并使用路由。可参考 GitHub [代码示例](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts), 如需要直播列表，可参考文档 [直播列表](https://write.woa.com/document/185968224430342144)。
+``` typescript
+// src/router/index.ts
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/live-player',
+    component: () => import('../views/live-player.vue'),
+  },
+  // 如果需要直播列表功能，可添加如下路由  
+  // {  
+    //   path: '/live-list',  
+    //   component: () => import('../views/live-list.vue'),  
+  // },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+export default router;
+
+// src/main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App);
+app.use(router);
+app.mount('#app');
+```
+
 ## 自由定制
 
 另外，我们也支持您根据项目需求对观看页面进行 UI 定制能力。主要可供定制的能力如下表所示。可供定制内容包括但不限于对源码中的**颜色主题、字体、圆角、按钮、图标、输入框、弹框等**内容，都可以进行**增加、删除、修改**等定制操作，下列分别给出颜色主题、按钮以及图标的定制示例，您可以参考实现方式通用到其他组件，满足您的 UI 定制需要。
@@ -292,7 +329,7 @@ npm run dev
 
 ### 颜色主题
 
-参见**步骤3**中代码示例，您可以使用操作 theme 的值来满足您切换颜色主题。
+参见**步骤3**中代码示例，您可以操作 theme 的值来满足您切换颜色主题。
 ``` java
 <UIKitProvider theme="dark">     // theme 传入 dark 时，界面整体颜色主题为黑色主题
   xxx                            // theme 传入 light 时，界面整体颜色主题为白色主题
@@ -301,73 +338,44 @@ npm run dev
 
 ### 按钮 Button / 图标 Icon
 
-若您需要对按钮 Button 或者图标 Icon 进行新增或替换等 UI 定制，您可以通过如下方式进行实现，以观看页面操作的 Icon 为例。参考下图，您可以找到对应 Button / Icon 指定位置源码，对当前部分的按钮进行**增加、删除、替换**等 UI 定制操作。
+若您需要对按钮 Button 或者图标 Icon 进行新增或替换等 UI 定制，您可以通过如下方式进行实现，以观看页面操作的 Icon 为例。参考下图，您可以找到对应 Button / Icon 指定位置的源码，对当前部分的按钮进行**增加、删除、替换**等 UI 定制操作。
 
 ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/dd256f268ebd11f088af5254005ef0f7.png)
 
 
-## 播放直播流
+## 下一步
 
-### 步骤1：指定 LiveId 播放
-
-若您需要指定 **LiveId** 进行播放，您需要在上述**快速接入中的步骤3**代码基础上增量添加如下内容，参考方式如下：
-``` TypeScript
-// live-player.vue
-import { onMounted } from 'vue';
-import { useLiveState } from 'tuikit-atomicx-vue3';
-
-const { joinLive } = useLiveState();
-
-onMounted(async () => {
-  await joinLive({ liveId: 'xxx' }); // 输入 liveId 加入直播间，具体参数含义可参考步骤 1 中的准备工作
-});
-```
-
-### 步骤2：路由配置
-
-由于涉及到直播列表(或首页)到直播间的跳转逻辑，您需要配置 Vue Router。在项目 `src` 目录下新建 `router` 文件夹，并创建 `index.ts` 文件。然后，在您的主文件（例如 `main.ts` 或 `index.ts`）中引入并使用路由。可参考 GitHub [代码示例](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts), 如需要直播列表，可参考文档 [直播列表](https://write.woa.com/document/185968224430342144)。
-``` typescript
-// src/router/index.ts
-import { createRouter, createWebHistory } from 'vue-router';
+恭喜您，现在您已经成功集成了观众观看。接下来，您可以继续接入 **直播列表、UI 自定义、监播 **等功能：
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**功能**</td>
 
-const routes = [
-  {
-    path: '/live-player',
-    component: () => import('../views/live-player.vue'),
-  },
-  // 如果需要直播列表功能，可添加如下路由  
-  // {  
-    //   path: '/live-list',  
-    //   component: () => import('../views/live-list.vue'),  
-  // },
-];
+<td rowspan="1" colSpan="1" >**描述**</td>
 
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-});
-export default router;
+<td rowspan="1" colSpan="1" >**集成指引**</td>
+</tr>
 
-// src/main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-import router from './router';
+<tr>
+<td rowspan="1" colSpan="1" >**直播列表**</td>
 
-const app = createApp(App);
-app.use(router);
-app.mount('#app');
-```
+<td rowspan="1" colSpan="1" >展示直播列表界面和功能，包含直播列表，房间信息展示功能</td>
 
-## 资源参考
+<td rowspan="1" colSpan="1" >[直播列表](https://write.woa.com/document/185968224430342144)</td>
+</tr>
 
-### 其他参考文档
-- [TUILiveKit Web 直播列表页](https://write.woa.com/document/185968224430342144)
+<tr>
+<td rowspan="1" colSpan="1" >**UI 自定义**</td>
 
-- [TUILiveKit Web 推流助手页](https://write.woa.com/document/185222135291670528)
+<td rowspan="1" colSpan="1" >更详细的 UI 组件自定义指引。</td>
 
-- [TUILiveKit Web 监播页](https://write.woa.com/document/185222048061181952)
+<td rowspan="1" colSpan="1" >[概述](https://write.woa.com/document/177815913198854144)</td>
+</tr>
 
+<tr>
+<td rowspan="1" colSpan="1" >**Web 监播**</td>
 
-### 更多资源
+<td rowspan="1" colSpan="1" >运营平台，支持直播间管控。</td>
 
-[腾讯云实时音视频控制台](https://console.cloud.tencent.com/trtc)
+<td rowspan="1" colSpan="1" >[Web 监播页](https://write.woa.com/document/185222048061181952)</td>
+</tr>
+</table>