@tencentcloud/sdk-mcp 1.2.9 → 1.3.1

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

@@ -0,0 +1,395 @@
+# Vue Chat TUIKit 代码生成工作流指令
+
+## 📋 指令目的
+
+为 Agent 提供实现 Vue Chat TUIKit **核心功能的代码生成蓝图**，并指导 Agent **优先使用工具实时获取的最新文档内容**，专门针对 Vue3 Web 应用场景。
+
+---
+
+## 🛑 Agent 执行硬性限制 (Guardrails)
+
+Agent 在生成代码时必须严格遵守以下指令：
+
+### 1. 文档驱动集成
+- 必须严格按照工具返回结果中的 `llm_code_generation_instructions_md` 步骤执行
+- **必须严格按照集成文档中的示例代码生成代码**，不得擅自修改代码结构和实现方式
+- 代码生成时应完全遵循集成文档提供的最佳实践和示例，确保代码的正确性和可运行性
+
+### 2. CSS 样式强制规范 🔴
+- **必须严格按照集成文档中的完整 CSS 样式代码生成**，包括：
+  - 官方 CSS 类名（如 `.chat-layout`、`.chat-content-panel` 等）
+  - 官方 CSS 变量定义（如 `--bg-color-operate`、`--stroke-color-primary` 等）
+  - 官方布局结构和样式属性
+  - 官方 `#app` 样式配置
+- **禁止创建任何自定义样式类名或修改官方样式**
+- 所有样式代码必须从集成文档中完整复制，不得修改
+
+### 3. 静默执行集成 🔥
+**CRITICAL**: 所有代码编写完成后，必须在最后一步自动安装依赖并启动项目，无需等待用户确认。
+
+**强制执行要求**：
+- **禁止询问**: 不得询问用户是否需要启动项目
+- **禁止等待**: 不得等待用户手动执行启动命令  
+- **必须自动**: 代码完成后必须立即执行集成步骤
+- **批量执行**: 安装依赖和启动命令必须在同一个 execute_command 调用中完成
+
+**标准执行命令**：
+```bash
+cd [项目路径] && npm install && npm run dev
+```
+
+### 4. 零外部配置
+- 禁止自动创建任何 `config.js` 或 `.env` 文件
+- SDKAppID、UserID 和 UserSig 等关键凭证必须直接注入到代码变量中
+
+### 5. 自动获取鉴权凭据
+- 必须调用 `get_usersig` 工具获取测试凭证，禁止要求用户手动输入
+- UserID 生成应保持简洁（禁止拼接动态时间戳以防逻辑出错）
+
+### 6. 默认激活会话
+- 集成逻辑必须包含 `setActiveConversation` 调用
+- 默认打开 `C2Cadministrator` 会话
+
+### 7. Vue3 组合式 API
+- 优先使用 `<script setup>` 语法
+- 使用 Vue3 Composition API（ref、reactive、computed 等）
+- 正确引入和使用 TUIKit 组件
+
+### 8. chat-only 模式功能限制（⚠️ 默认约束 + 用户主动要求时的例外）
+
+**默认行为**：
+当用户选择 chat-only 模式时，Agent **默认排除**以下扩展功能：
+- **默认不集成 Sidebar**（侧边栏）
+- **默认不集成 ChatSetting**（聊天设置）
+- **默认不集成会话内搜索功能**
+- **默认不集成 ConversationList**（会话列表）
+- **默认仅保留核心聊天组件**：`Chat`、`MessageList`、`ChatHeader`、`MessageInput`
+
+**例外处理**：
+如果用户**明确要求**添加某些扩展功能（如"需要 ChatSetting"、"要集成搜索"等），Agent **应该允许并执行**：
+- ✅ 在核心聊天组件基础上，额外集成用户明确要求的功能
+- ✅ 只添加用户明确要求的功能，不擅自扩展其他功能
+- ✅ 按照集成文档的规范正确集成所需组件
+
+**判断标准**：
+- 用户需求中包含明确的功能关键词（如"ChatSetting"、"搜索"、"设置"、"侧边栏"等）
+- 用户明确说明需要某个扩展功能
+
+---
+
+## 📦 TUIKit 版本与依赖自动化
+
+Agent 生成代码后，必须自动执行以下依赖链：
+
+### 1. 核心依赖版本推荐
+
+```json
+{
+  "@tencentcloud/chat-uikit-vue3": "latest",
+  "@tencentcloud/call-uikit-vue": "latest"
+}
+```
+
+### 2. 构建环境补丁 (Vite/esbuild)
+
+若检测到 Vite 项目，Agent 必须在 `package.json` 自动增加补丁配置以兼容 esbuild-wasm：
+
+```json
+{
+  "overrides": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  },
+  "resolutions": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  }
+}
+```
+
+---
+
+## 📦 Vue3 TUIKit 组件说明
+
+Agent 在生成代码时，必须了解并正确使用以下 Vue3 组件：
+
+| 组件名称 | 说明 | 使用场景 |
+|---------|------|---------|
+| `ConversationList` | 会话列表组件 | full-featured 模式，显示所有会话 |
+| `Chat` | 会话的容器组件 | 所有模式，聊天主容器 |
+| `MessageList` | 会话的消息列表组件 | 显示聊天消息记录 |
+| `ChatHeader` | 会话的头部信息组件 | 显示会话标题、成员信息等 |
+| `MessageInput` | 输入框组件 | 消息输入和发送 |
+| `ChatSetting` | 单聊和群聊的管理组件 | 会话设置、群管理等 |
+| `Search` | 云端搜索组件 | 搜索消息、联系人等 |
+| `ContactList` | 联系人组件 | full-featured 模式，通讯录功能 |
+
+**重要提示**：
+- Agent 必须严格按照集成文档中的组件名称和用法生成代码
+- 不要自行创造或修改组件名称
+- 组件的具体使用方式以工具返回的集成文档为准
+
+---
+
+## 🛠️ 集成模式分发 (Goals)
+
+根据用户的需求，Agent 必须选择对应的执行路径：
+
+### 1. 全量功能集成 (full-featured)
+
+**目标**: 实现类似微信的完整 IM 应用
+
+**核心组件**: 
+- `ConversationList` (会话列表)
+- `Chat` (聊天容器)
+- `ContactList` (通讯录)
+- `Search` (云端搜索)
+
+**执行参考**: 
+- 参考工具返回结果中实时获取的 `integration.md` 指令
+
+**适用场景**:
+- 构建独立的聊天应用
+- 需要完整的会话管理、通讯录、群组管理功能
+- 作为 Web 应用的核心功能模块
+
+---
+
+### 2. 仅集成聊天窗口 (chat-only)
+
+**目标**: 适用于客服、问诊、详情页私聊等纯对话场景
+
+**核心组件**: 
+- `Chat` (聊天容器)
+- `MessageList` (消息列表)
+- `ChatHeader` (聊天头部)
+- `MessageInput` (输入框)
+
+**执行参考**: 
+- 参考工具返回结果中实时获取的 `integration.md` 指令
+
+**适用场景**:
+- 客服咨询场景（用户点击咨询按钮进入聊天页面）
+- 医疗在线问诊（患者与医生一对一沟通）
+- 订单详情页私聊（买家与卖家沟通）
+- 社交应用中的私信功能
+
+**🔴 默认排除功能（Agent 必须遵守）**:
+
+Agent 在生成 chat-only 模式代码时，**默认排除**以下功能和组件：
+
+1. **默认不集成 Sidebar（侧边栏）**
+   - 默认不生成任何侧边栏相关代码
+   - 默认不引入会话列表、通讯录等侧边栏组件
+   - 聊天窗口默认应该是独立的、无侧边栏的纯聊天界面
+
+2. **默认不集成 ChatSetting（聊天设置）**
+   - 默认不生成会话设置、群管理等功能
+   - 默认不在 ChatHeader 右侧添加设置按钮
+   - 默认不引入 ChatSetting 组件
+
+3. **默认不集成会话内搜索功能**
+   - 默认不添加消息搜索功能
+   - 默认不在聊天界面添加搜索入口
+   - 默认不引入 Search 组件
+
+4. **默认不集成会话列表（ConversationList）**
+   - chat-only 模式下，用户通过外部路由/参数指定会话 ID
+   - 默认不需要会话切换功能
+
+---
+
+**⚠️ 用户主动要求时的例外处理**:
+
+如果用户在 chat-only 模式下**明确要求**添加某些扩展功能，Agent **应该允许并执行**：
+
+**触发条件**（满足任一即可）:
+- 用户明确说明："需要 ChatSetting"、"要集成聊天设置"、"添加会话设置功能"
+- 用户明确说明："需要 Search"、"要添加搜索功能"、"集成会话内搜索"
+- 用户明确说明："需要 Sidebar"、"要添加侧边栏"
+- 用户明确提出其他扩展功能需求
+
+**Agent 执行流程**:
+1. ✅ **确认用户需求**：识别到用户主动要求添加扩展功能
+2. ✅ **允许集成**：在 chat-only 模式基础上，额外集成用户要求的组件
+3. ✅ **保持克制**：只添加用户明确要求的功能，不擅自扩展其他功能
+4. ✅ **遵循文档**：按照集成文档的规范正确集成所需组件
+
+---
+
+## 📞 扩展功能：音视频通话 (TUICallKit)
+
+若需求中包含"通话"或"视频"功能，Agent 必须执行：
+
+### 组件挂载
+- 使用 `Teleport` 将 TUICallKit 组件挂载到 body
+
+### 交互注入
+
+**在 ChatHeader 组件的右侧插槽注入通话按钮**:
+- 图标: 电话、摄像机等
+- 组件使用方式参考集成文档
+
+**单聊逻辑**:
+- 通过 `TUICallKitServer.call` 发起通话
+- UserID 自动取自当前激活会话
+
+**群聊逻辑**:
+- 需集成成员选择组件
+- 引导用户选择群成员后再发起通话
+
+---
+
+## ✍️ Agent 代码生成示例指令 (Prompts)
+
+当 Agent 开始编写代码时，应遵循以下语义逻辑：
+
+**全量功能集成 (full-featured)**:
+> "按照 `full-featured` 模式，为我生成一个 Vue3 TUIKit 集成页面。请自动配置 `C2Cadministrator` 默认激活会话，并注入由 `get_usersig` 工具获取的凭据。禁止创建 config 文件。**🔴 重要：必须严格按照集成文档中的完整 CSS 样式代码生成，禁止任何自定义或修改。**"
+
+**仅聊天窗口集成 (chat-only)**:
+> "按照 `chat-only` 模式，为我生成一个 Vue3 TUIKit 聊天窗口。请自动配置 `C2Cadministrator` 默认激活会话，并注入由 `get_usersig` 工具获取的凭据。禁止创建 config 文件。**严格排除 Sidebar、ChatSetting、会话内搜索等功能，仅保留核心聊天组件。🔴 重要：必须严格按照集成文档中的完整 CSS 样式代码生成，禁止任何自定义样式。**"
+
+---
+
+## 📝 关键要点总结
+
+| 类别 | 要求 |
+|------|------|
+| **框架版本** | 专门针对 Vue3 项目 |
+| **文档优先** | 严格遵循工具返回的最新文档指令 |
+| **🔴 CSS 样式** | **严格按照集成文档 CSS，禁止任何自定义或修改** |
+| **静默集成** | 代码编写完成后自动安装依赖并启动开发服务器 |
+| **凭证注入** | 自动调用 `get_usersig`，直接注入代码 |
+| **默认会话** | 自动激活 `C2Cadministrator` 会话 |
+| **依赖管理** | 自动检测并安装所需依赖包 |
+| **构建工具** | Vite 项目需添加 esbuild-wasm 补丁配置 |
+| **集成模式** | 支持 full-featured（全量）和 chat-only（仅聊天）两种模式 |
+| **chat-only 限制** | ⚠️ 默认排除 Sidebar、ChatSetting、搜索功能；用户主动要求时允许集成 |
+
+---
+
+## 🎯 Agent 执行检查清单
+
+在完成代码生成后，Agent 必须确认以下所有项目：
+
+### 项目初始化
+- [ ] 已创建 Vue3 项目或在现有项目中集成
+- [ ] 已安装 `@tencentcloud/chat-uikit-vue3` 依赖
+- [ ] 如果需要音视频通话，已安装 `@tencentcloud/call-uikit-vue`
+- [ ] 如果是 Vite 项目，已添加 esbuild-wasm 补丁配置
+
+### 代码生成
+- [ ] 已在 main.js 中正确注册 TUIKit 组件
+- [ ] 已创建主聊天容器组件（ChatContainer.vue 或类似）
+- [ ] 组件使用了 `<script setup>` 语法
+- [ ] 🔴 **CSS 样式严格合规**：
+  - [ ] 已从集成文档中完整获取所有 CSS 样式代码
+  - [ ] 已使用集成文档中的官方类名
+  - [ ] 已完整复制集成文档中的 CSS 变量定义
+  - [ ] 已使用集成文档中的布局样式配置
+  - [ ] 禁止创建任何自定义样式类名
+  - [ ] 禁止修改集成文档中的任何样式属性
+  - [ ] 样式代码与集成文档完全一致
+
+### 凭证与登录
+- [ ] 🔴 已调用 `get_usersig` 工具获取测试凭证
+- [ ] 已将 SDKAppID、UserID、UserSig 直接注入到代码中
+- [ ] 禁止创建 config.js 或 .env 文件
+- [ ] 已实现 TUILogin.login() 登录逻辑
+
+### 会话激活
+- [ ] 已添加默认激活 `C2Cadministrator` 会话的逻辑
+- [ ] 使用了正确的 API（setActiveConversation）
+
+### 集成模式
+- [ ] 已根据用户需求选择正确的集成模式（full-featured 或 chat-only）
+- [ ] full-featured 模式：已集成 ConversationList、Chat、Contact 等组件
+- [ ] chat-only 模式：已集成核心组件（Chat、MessageList、ChatHeader、MessageInput）
+- [ ] chat-only 模式：已根据用户需求判断是否需要集成扩展功能
+  - [ ] 如果用户未主动要求，已确认不包含 Sidebar、ChatSetting、Search 等组件
+  - [ ] 如果用户主动要求（如"需要 ChatSetting"），已额外集成用户明确要求的功能
+
+### 音视频通话（可选）
+- [ ] 如果需要通话功能，已使用 Teleport 挂载 TUICallKit
+- [ ] 已在 ChatHeader 组件右侧插槽添加通话按钮
+- [ ] 已实现单聊和群聊的通话逻辑
+
+### 最终检查
+- [ ] 已调用 `record_result` 记录集成结果
+- [ ] 已自动安装依赖（npm install）
+- [ ] 已自动启动开发服务器（npm run dev）
+- [ ] 项目可以正常运行，无报错
+
+---
+
+## 💡 常见问题处理
+
+### 1. Vite 构建错误
+
+**问题现象**：Vite 项目运行时报 esbuild 相关错误
+
+**原因**：某些依赖包与 esbuild 不兼容
+
+**解决方案**：
+在 `package.json` 中添加补丁配置：
+```json
+{
+  "overrides": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  },
+  "resolutions": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  }
+}
+```
+
+### 2. chat-only 模式包含了不该有的功能
+
+**问题现象**：chat-only 模式生成的代码包含了用户未要求的 Sidebar、ChatSetting 或会话内搜索功能
+
+**原因**：Agent 未正确判断用户需求，擅自添加了扩展功能
+
+**判断标准**：
+- ✅ **应该添加**：用户明确说明"需要 ChatSetting"、"要集成搜索"、"添加设置功能"等
+- ❌ **不应添加**：用户只说"搭建 chat-only 聊天窗口"，未提及扩展功能
+
+**解决方案**：重新生成代码，确保默认不包含扩展功能
+
+### 3. CSS 样式不符合集成文档
+
+**问题现象**：生成的代码使用了自定义样式类名，或修改了官方样式
+
+**原因**：Agent 未严格按照集成文档中的 CSS 样式生成代码
+
+**解决方案**：
+1. 重新调用 `get_web_chat_uikit_integration` 获取最新集成文档
+2. 从集成文档中完整复制所有 CSS 样式代码
+3. 严格按照集成文档中的类名、变量名、样式属性使用
+4. 禁止任何形式的修改或自定义
+
+---
+
+## 🔗 相关工具参考
+
+### 必须使用的工具
+
+#### `get_usersig` - 获取完整测试凭证（强制调用）
+**用途**：生成完整的测试账号和鉴权凭证，包括：
+- `SDKAppID`: 应用标识
+- `userID`: 测试用户 ID
+- `userSig`: 用户签名（有效期 7 天）
+
+**调用时机**：在生成登录代码之前必须调用
+
+**使用约束**：
+- ✅ 必须使用工具返回的完整凭证
+- ❌ 禁止让用户手动填写 SDKAppID 和 secretKey
+- ❌ 禁止创建配置文件存储凭证
+
+#### `record_result` - 记录集成结果
+**用途**：记录集成过程和结果，用于统计和分析
+
+---
+
+**适用框架**: Vue3  
+**TUIKit 版本**: @tencentcloud/chat-uikit-vue3 > 4.0.0  
+**构建工具**: Vite (推荐) / Webpack

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

@@ -1,4 +1,4 @@
-本文对 TUILiveKit 组件中的**连麦管理面板（CoGuestPanel）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式和布局进行深度的定制。
+本文对**连麦管理面板（CoGuestPanel）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式和布局进行深度的定制。
 
 ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/af6ace34975411f093df52540099c741.png)
 
@@ -35,7 +35,7 @@
 
 ### 步骤1：环境配置及开通服务
 
-在进行快速接入之前，您需要参考[准备工作](https://write.woa.com/document/185222107981008896)，满足相关环境配置及开通对应服务。
+在进行快速接入之前，您需要参考 [准备工作](https://write.woa.com/document/188228825253294080)，满足相关环境配置及开通对应服务。
 
 ### 步骤2：安装依赖
 
@@ -44,19 +44,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/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：集成连麦管理面板

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

@@ -1,4 +1,4 @@
-本文对 TUILiveKit 组件中的 **直播视频组件（LiveView）** 进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式，布局进行深度的定制。
+本文对**直播视频组件（LiveView）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式，布局进行深度的定制。
 
 ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/1b766277b00211f09e195254007c27c5.png)
 
@@ -38,19 +38,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/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：加入直播间并进行连麦
@@ -113,21 +113,21 @@ LiveView 提供了灵活的组件自定义插槽，该插槽支持您根据自
 </tr>
 
 <tr>
-<td rowspan="1" colSpan="1" >seatViewUI</td>
+<td rowspan="1" colSpan="1" >streamViewUI</td>
 
-<td rowspan="1" colSpan="1" >seatInfo: SeatInfo</td>
+<td rowspan="1" colSpan="1" >userInfo</td>
 
 <td rowspan="1" colSpan="1" >自定义麦位的显示 UI</td>
 </tr>
 </table>
 
-``` typescript
-// seatViewUI 插槽使用示例
+``` java
+// streamViewUI 插槽使用示例
 <LiveView>
   <CustomStreamViewUI #streamViewUI></CustomStreamViewUI>
 </LiveView>
 ```
-1. `SeatInfo` 定义了直播房间中每个麦位的基本信息和状态：
+1. `userInfo` 定义了直播房间中每个麦位的基本信息和状态：
 
 <table>
 <tr>
@@ -140,56 +140,23 @@ LiveView 提供了灵活的组件自定义插槽，该插槽支持您根据自
 <td rowspan="1" colSpan="1" >说明</td>
 </tr>
 
-<tr>
-<td rowspan="1" colSpan="1" >index</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" >isLocked</td>
-
-<td rowspan="1" colSpan="1" >boolean</td>
-
-<td rowspan="1" colSpan="1" >必填</td>
-
-<td rowspan="1" colSpan="1" >麦位锁定状态，true 表示麦位被锁定，其他用户无法进入；false 表示麦位开放。</td>
-</tr>
-
 <tr>
 <td rowspan="1" colSpan="1" >userInfo</td>
 
-<td rowspan="1" colSpan="1" >SeatUserInfo</td>
+<td rowspan="1" colSpan="1" >userInfo</td>
 
 <td rowspan="1" colSpan="1" >非必填</td>
 
 <td rowspan="1" colSpan="1" >当前坐在该麦位上的用户信息，如果麦位为空则为 `undefined`。</td>
 </tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >region</td>
-
-<td rowspan="1" colSpan="1" >RegionInfo</td>
-
-<td rowspan="1" colSpan="1" >非必填</td>
-
-<td rowspan="1" colSpan="1" >麦位在视频画布中的显示区域信息，用于多路视频布局。</td>
-</tr>
 </table>
 
    ``` typescript
-   interface SeatInfo {
-     index: number;           // 麦位索引
-     isLocked: boolean;       // 麦位是否被锁定
-     userInfo?: SeatUserInfo; // 麦位上的用户信息（可选）
-     region?: RegionInfo;     // 麦位在画布中的区域信息（可选）
+   interface userInfo {
+     userInfo: userInfo; // 麦位上的用户信息
    } 
    ```
-2. `SeatUserInfo` 定义了直播房间中每个麦位上的用户详细信息：
+2. `userInfo` 定义了直播房间中每个麦位上的用户详细信息：
 
 <table>
 <tr>
@@ -382,11 +349,11 @@ LiveView 提供了灵活的组件自定义插槽，该插槽支持您根据自
 
 #### 自定义插槽示例
 
-为了更好地让您体验及理解 LiveView 组件的 seatViewUI 插槽定制化能力，我们提供了**直播连麦场景**示例供您参考，您可以参考上述**步骤3**将如下代码增量复制至您的项目中实现类似场景的效果。
+为了更好地让您体验及理解 LiveView 组件的 streamViewUI 插槽定制化能力，我们提供了**直播连麦场景**示例供您参考，您可以参考上述**步骤3**将如下代码增量复制至您的项目中实现类似场景的效果。
 ``` typescript
 <template>
   <LiveView>
-    <template #seatViewUI="{ userInfo }">
+    <template #streamViewUI="{ userInfo }">
       <div 
         class="live-stream-view"
         :class="{ 'is-anchor': isAnchor(userInfo), 'is-guest': !isAnchor(userInfo) }"
@@ -424,4 +391,4 @@ const isAnchor = (userInfo: SeatUserInfo) => {
 </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/vue/{components/live-list.md → live-list-integration.md}

@@ -1,16 +1,21 @@
 ## 概述
-本文对 TUILiveKit 组件中的**直播列表页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的直播列表页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
+
+本文对 TUILiveKit Demo 中的**直播列表页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的直播列表页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
 
 ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/f73d96db8c8611f0ae9d5254001c06ec.png)
 
 
+## 快速体验
+
+您可以在 [在线体验](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) 来查看账户下直播列表。
+
 ## 快速接入
 
 ### 步骤1：环境配置及开通服务
 
 在进行快速接入之前，您需要参见 [准备工作](https://write.woa.com/document/188228825253294080)，满足相关环境配置及开通对应服务。
 
-### 步骤2: 安装依赖
+### 步骤2：安装依赖
 
 您可以选择以下任一方式安装依赖：
 
@@ -19,25 +24,25 @@
 
 【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: 直播列表页面接入
 
 在您的项目下创建 **live-list.vue **文件，可直接复制如下代码至您的项目中集成**直播列表页面**。
-``` vue
+``` javascript
 <template>
   <UIKitProvider language="zh-CN">
     <div class="container">
@@ -81,7 +86,7 @@ onMounted(async () => {
 > **注意：**
 > 
 
-> 若您需要实现直播列表到进入直播间的跳转逻辑，可参考本文中[指定直播间](https://write.woa.com/#61f1bbc9-1f23-4b69-aceb-7ab3f35a0ec2)部分内容。
+> 若您需要实现直播列表到进入直播间的跳转逻辑，可参考本文中 [指定直播间](https://write.woa.com/#61f1bbc9-1f23-4b69-aceb-7ab3f35a0ec2) 部分内容。
 > 
 
 
@@ -94,7 +99,7 @@ npm run dev
 
 ## 自由定制
 
-根据上述功能展示图，我们也支持您根据项目需求对直播列表页面进行 UI 定制能力。主要可供定制的能力如下表所示。
+根据上述功能展示图，我们也支持您根据项目需求对直播列表页面进行 UI 定制。主要可供定制的能力如下表所示。
 <table>
 <tr>
 <td rowspan="1" colSpan="1" >**类别**</td>
@@ -188,39 +193,3 @@ app.mount('#app');
 ### 更多资源
 
 [腾讯云实时音视频控制台](https://console.cloud.tencent.com/trtc)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-#### 
-
-#### 
-
-#### 
-
-#### 
-
-####