@tencentcloud/sdk-mcp 1.4.7 → 1.6.0-beta.1

package/resource/{doc/chatkit → integration/chat/preset}/vue/integration.md

@@ -2,40 +2,35 @@ TUIKit 是基于腾讯云 Chat SDK 的一款 Vue 3 UI 组件库，它提供了
 
 > **说明：**
 >
+> - **AI 助手使用说明**
 
-> 您好！我们正在开发一款即时通讯产品 UIKit，它基于腾讯云 Chat SDK，是一款 Vue3 UI 组件库，能帮助您快速集成并实现核心功能。
+> Skill 提供了** IM 知识咨询**和 **Vue3 State API 无 UI 集成**能力，您可以用 Skill 在 IDE 中直接查询 SDK、UIKit、服务端 API、产品计费等内容，也可以用 Skill 在 Vue3 项目中集成 IM 能力, [点击这里，立即体验 AI 集成和咨询助手](https://cloud.tencent.com/document/product/269/125822)。
 >
 
-> 您的反馈我们会**高度重视**，本问卷填写**仅需要 30 秒**！诚邀您的参与。
->
-
-> **推荐使用更高效的 AI 集成助手**
->
-
-> 我们为您提供了全新的 AI 集成方式，只需要简单描述您的需求，即可**自动生成集成代码**，大幅提升开发效率。
+> 您好！我们正在开发一款即时通信产品 UIKit，它基于腾讯云 Chat SDK，是一款 Vue3 UI 组件库，能帮助您快速集成并实现核心功能。
 >
 
-> [点击这里，立即体验 AI 集成](https://cloud.tencent.com/document/product/269/124481)
+> 您的反馈我们会**高度重视**，本问卷填写**仅需要 30 秒**！诚邀您的参与。
 >
 
 ## 关键概念
 
 chat-uikit-vue3 主要分为 ConversationList、Chat、MessageList、ChatHeader、MessageInput、ChatSetting、Search、Contact 等核心 UI 组件，每个 UI 组件负责展示不同的内容。
-1. ConversationList 提供会话列表组件。
+- ConversationList 提供会话列表组件。
 
-2. Chat 提供会话的容器组件。
+- Chat 提供会话的容器组件。
 
-3. MessageList 提供会话的消息列表组件。
+- MessageList 提供会话的消息列表组件。
 
-4. ChatHeader 提供会话的头部信息组件。
+- ChatHeader 提供会话的头部信息组件。
 
-5. MessageInput 提供输入框组件。
+- MessageInput 提供输入框组件。
 
-6. ChatSetting 提供单聊和群聊的管理组件。
+- ChatSetting 提供单聊和群聊的管理组件。
 
-7. Search 提供云端搜索组件。
+- Search 提供云端搜索组件。
 
-8. Contact 提供联系人组件。
+- Contact 提供联系人组件。
 
 ## 前提条件
 - Vue.js@^3.0.0
@@ -46,7 +41,7 @@ chat-uikit-vue3 主要分为 ConversationList、Chat、MessageList、ChatHeader
 
 ## 创建项目
 
-使用 Vite 创建一个新的名称为 **chat-example** 的 Vue3 项目。
+使用 Vite 创建一个新的名称为 **chat-integration-vue3** 的 Vue3 项目。
 
 > **说明：**
 >
@@ -59,181 +54,202 @@ chat-uikit-vue3 主要分为 ConversationList、Chat、MessageList、ChatHeader
 npm create vite@latest
 ```
 
+脚手架选项可参考以下选择：
+``` java
+◇  Project name:
+│  chat-integration-vue3
+│
+◇  Select a framework:
+│  Vue
+│
+◇  Select a variant:
+│  TypeScript
+│
+◆  Install with npm and start now?
+│  ● Yes / ○ No
+└
+```
+
 ## 下载并导入组件
 
 创建项目完成后，切换到项目所在目录。
 
 【shell】
 ``` bash
-cd chat-example
-npm install
+cd chat-integration-vue3
 ```
 
 ### 步骤1：安装依赖
 
+> **说明：**
+>
+
+> 建议使用 npm 进行安装，npm 会主动下载所需的 peerDependencies 依赖。
+>
+
 【shell】
 ``` bash
-npm i @tencentcloud/chat-uikit-vue3
+npm i @tencentcloud/chat-uikit-vue3@6 tuikit-atomicx-vue3@6
 ```
 
 ### 步骤2：引入组件
 
 > **注意：**
 >
-> - 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 步骤3 中获取相关信息后进行替换。
-> - 为了尊重版权，下图所示的**默认小黄脸表情包版权属于腾讯云**，您可以通过升级至 [IM 企业版套餐](https://buy.cloud.tencent.com/avc) 免费使用该表情包。
 
->
+> 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 步骤3 中获取相关信息后进行替换。
 >
 
-#### 2.1 搭建主界面
+#### 2.1 搭建入口页面
 
-例如：在  `src/App.vue` 页面中写入以下代码：
+例如：在 `src/App.vue` 页面中写入以下代码，保证登录成功后进入聊天页面，避免在登录前调用 api。
 ``` typescript
 <template>
   <UIKitProvider language="zh-CN" theme="light">
-    <div class="chat-layout">
-      <!-- 左侧导航 -->
-      <SideTab :active-tab="activeTab" @tab-change="handleTabChange" />
-
-      <!-- 中间列表 -->
-      <div class="conversation-list-panel">
-        <ConversationList v-show="activeTab === 'conversations'" />
-        <ContactList v-show="activeTab === 'contacts'" />
-      </div>
+    <ChatLayout v-if="isLoggedIn" />
+  </UIKitProvider>
+</template>
 
-      <!-- 右侧聊天 -->
-      <Chat
-        v-show="activeTab === 'conversations'"
-        class="chat-content-panel"
-        :PlaceholderEmpty="EmptyChatTpl"
-      >
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UIKitProvider, useLoginState } from '@tencentcloud/chat-uikit-vue3';
+import ChatLayout from './components/ChatLayout.vue';
+
+const { login } = useLoginState();
+const isLoggedIn = ref(false);
+
+login({
+  sdkAppId: 0, // SDKAppID, number 类型
+  userId: '',  // UserID, string 类型
+  userSig: '', // userSig, string 类型
+}).then(() => {
+  isLoggedIn.value = true;
+});
+</script>
+
+<style>
+body { margin: 0; padding: 0; font-family: Inter, Avenir, Helvetica, Arial, sans-serif; }
+#app { width: 100vw; height: 100vh; }
+#app > div { display: flex; align-items: center; justify-content: center; }
+</style>
+```
+
+#### 2.2 搭建聊天页面
+
+在 `src/components` 文件夹中新建一个 `ChatLayout.vue` 的文件，并写入以下内容：
+``` typescript
+<template>
+  <div class="chat-layout">
+    <SideTab :active-tab="activeTab" @tab-change="(tab) => activeTab = tab" />
+
+    <div class="list-panel">
+      <ConversationList v-show="activeTab === 'conversations'" />
+      <ContactList v-show="activeTab === 'contacts'" />
+    </div>
+
+    <div v-show="activeTab === 'conversations'" class="chat-panel">
+      <Chat :PlaceholderEmpty="EmptyChatTpl">
         <ChatHeader>
           <template #ChatHeaderRight>
-            <button class="icon-button" @click="isChatSettingShow = !isChatSettingShow">
+            <button class="icon-btn" @click="settingOpen = !settingOpen">
               <IconMenu size="20" />
             </button>
           </template>
         </ChatHeader>
         <MessageList />
-        <MessageInput class="message-input-container">
+        <MessageInput>
           <template #headerToolbar>
-            <div class="message-toolbar">
-              <div class="message-toolbar-actions">
-                <EmojiPicker />
-                <FilePicker />
-                <VideoPicker />
-                <ImagePicker />
-                <!-- 参考文档开通音视频通话服务 -->
-                <!-- <AudioCallPicker />
-                <VideoCallPicker /> -->
+            <div class="toolbar">
+              <div class="toolbar-left">
+                <EmojiPicker /><FilePicker /><VideoPicker /><ImagePicker />
               </div>
-              <button class="icon-button" @click="isSearchInChatShow = !isSearchInChatShow">
+              <button class="icon-btn" @click="searchOpen = !searchOpen">
                 <IconSearch size="20" />
               </button>
             </div>
           </template>
         </MessageInput>
-
-        <!-- 聊天设置侧边栏 -->
-        <div v-show="isChatSettingShow" class="chat-sidebar" :class="{ dark: theme === 'dark' }">
-          <div class="chat-sidebar-header">
-            <span class="chat-sidebar-title">设置</span>
-            <button class="icon-button" @click="isChatSettingShow = false">✕</button>
-          </div>
-          <ChatSetting />
-        </div>
-
-        <!-- 会话内搜索侧边栏 -->
-        <div v-show="isSearchInChatShow" class="chat-sidebar" :class="{ dark: theme === 'dark' }">
-          <div class="chat-sidebar-header">
-            <span class="chat-sidebar-title">群搜索</span>
-            <button class="icon-button" @click="isSearchInChatShow = false">✕</button>
-          </div>
-          <Search :variant="VariantType.EMBEDDED" />
+        <div v-if="settingOpen" class="float-sidebar">
+          <ChatSetting @close="settingOpen = false" />
         </div>
       </Chat>
+    </div>
 
-      <!-- 联系人详情 -->
-      <ContactInfo
-        v-show="activeTab === 'contacts'"
-        class="contact-detail-panel"
-        @send-message="handleSendMessage"
-      />
+    <div v-if="searchOpen && activeTab === 'conversations'" class="search-sidebar">
+      <div class="search-sidebar-header">
+        <span class="search-sidebar-title">搜索</span>
+        <button class="icon-btn" @click="searchOpen = false">✕</button>
+      </div>
+      <Search :variant="VariantType.EMBEDDED" />
     </div>
-  </UIKitProvider>
+
+    <div v-show="activeTab === 'contacts'" class="detail-panel">
+      <ContactInfo @send-message="activeTab = 'conversations'" />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, h, watch } from 'vue';
+import { ref, watch } from 'vue';
 import {
-  Chat, Search, ChatHeader, MessageList, MessageInput, ContactList, ContactInfo, ChatSetting, UIKitProvider, ConversationList, useUIKit, useLoginState, useConversationListState, EmojiPicker, FilePicker, VideoPicker, ImagePicker, VariantType, AudioCallPicker, VideoCallPicker,
+  Chat, Search, ChatHeader, MessageList, MessageInput,
+  ConversationList, ContactList, ContactInfo, ChatSetting,
+  EmojiPicker, FilePicker, VideoPicker, ImagePicker,
+  VariantType, useChatContext,
 } from '@tencentcloud/chat-uikit-vue3';
-import { IconMenu, IconSearch, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
-import SideTab from './components/SideTab.vue';
+import { IconMenu, IconSearch } from '@tencentcloud/uikit-base-component-vue3';
+import SideTab from './SideTab.vue';
 
-const { theme } = useUIKit();
-const { login } = useLoginState();
-const { setActiveConversation, activeConversation } = useConversationListState();
+const { activeConversation } = useChatContext();
 
 const activeTab = ref<'conversations' | 'contacts'>('conversations');
-const isChatSettingShow = ref(false);
-const isSearchInChatShow = ref(false);
-
-// 切换会话时关闭会话内侧边栏
-watch(() => activeConversation.value?.conversationID, (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    isChatSettingShow.value = false;
-    isSearchInChatShow.value = false;
-  }
-});
+const settingOpen = ref(false);
+const searchOpen = ref(false);
 
-// 登录
-login({
-  sdkAppId: 0, // SDKAppID, number 类型
-  userId: '',  // UserID, string 类型
-  userSig: '', // userSig, string 类型
-})
-.then(() => {
-  const userID = 'administrator';
-  const conversationID = `C2C${userID}`;
-  setActiveConversation(conversationID);
-})
-.catch((err) => {
-  TUIToast.error({
-    message: err.message,
-    duration: 5000,
-  });
+watch(() => activeConversation.value?.conversationID, () => {
+  settingOpen.value = false;
+  searchOpen.value = false;
 });
 
-const handleTabChange = (tab: 'conversations' | 'contacts') => {
-  activeTab.value = tab;
-};
-
-const handleSendMessage = () => {
-  activeTab.value = 'conversations';
-};
+watch(activeTab, () => {
+  settingOpen.value = false;
+  searchOpen.value = false;
+});
 
-// 空会话占位组件
-const EmptyChatTpl = h('div', { class: 'empty-placeholder' }, [
-  h('div', { class: 'empty-icon' }, '💬'),
-  h('div', { class: 'empty-title' }, '暂无会话'),
-  h('div', { class: 'empty-subtitle' }, '选择一个会话开始聊天'),
-]);
+const EmptyChatTpl = { template: `
+  <div class="empty-chat">
+    <div style="font-size:48px;opacity:.3">💬</div>
+    <div style="font-size:15px;font-weight:600;color:#6c757d">暂无会话</div>
+    <div style="font-size:13px;color:#868e96">选择一个会话开始聊天</div>
+  </div>
+`};
 </script>
 
 <style scoped>
-.chat-layout{width:calc(100vw - 64px);height:calc(100vh - 64px);max-width:1600px;max-height:900px;display:flex;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.1);overflow:hidden;backdrop-filter:blur(10px);}.conversation-list-panel{width:300px;display:flex;flex-direction:column;border-right:1px solid var(--stroke-color-primary);overflow:hidden;}.chat-content-panel{flex:1;}.contact-detail-panel{flex:1;}.icon-button{padding:4px 6px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:4px;font-size:20px;color:var(--text-color-primary);cursor:pointer;transition:background-color 0.2s;outline:none;}.icon-button:focus{outline:none;}.icon-button:hover{background-color:var(--button-color-secondary-hover);}.icon-button:active{background-color:var(--button-color-secondary-active);}.message-toolbar{display:flex;justify-content:space-between;align-items:center;}.message-toolbar-actions{display:flex;align-items:center;gap:4px;}.chat-sidebar{position:absolute;right:0;top:0;bottom:0;min-width:300px;max-width:400px;display:flex;flex-direction:column;background-color:var(--bg-color-operate);box-shadow:var(--shadow-color) 0 0 10px;overflow:auto;z-index:1000;}.chat-sidebar.dark{box-shadow:-4px 0 16px rgba(0,0,0,0.4),-1px 0 0 rgba(255,255,255,0.1);}.chat-sidebar-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:var(--bg-color-operate);border-bottom:1px solid var(--stroke-color-primary);z-index:10;}.chat-sidebar-title{font-size:16px;font-weight:500;color:var(--text-color-primary);}.empty-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background-color:var(--bg-color-operate);border-left:1px solid rgba(0,0,0,0.08);color:#adb5bd;}.empty-icon{font-size:64px;opacity:0.3;}.empty-title{font-size:16px;font-weight:600;color:#6c757d;}.empty-subtitle{font-size:14px;color:#868e96;}img[alt="empty"]{display:none;}.message-input-container{border-top:1px solid var(--stroke-color-primary);}.call-kit{position:fixed;top:50%;left:50%;z-index:999;transform:translate(-50%,-50%);max-width:800px;max-height:600px;}
+.chat-layout { height: 60vh; aspect-ratio: 16/9; display: flex; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; }
+@media (max-width: 1920px) { .chat-layout { height: 80vh; } }
+.list-panel { width: 300px; display: flex; flex-direction: column; border-right: 1px solid var(--stroke-color-primary); overflow: hidden; }
+.detail-panel { flex: 1; }
+.icon-btn { padding: 4px 6px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 4px; font-size: 20px; color: var(--text-color-primary); cursor: pointer; outline: none; }
+.icon-btn:hover { background-color: var(--button-color-secondary-hover); }
+.toolbar { display: flex; justify-content: space-between; align-items: center; }
+.toolbar-left { display: flex; align-items: center; gap: 4px; }
+.search-sidebar { border-left: 1px solid var(--stroke-color-primary); display: flex; flex-direction: column; flex: 0 0 300px; }
+.search-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--stroke-color-primary); }
+.search-sidebar-title { font-size: 16px; font-weight: 500; color: var(--text-color-primary); }
+.chat-panel { flex: 1; position: relative; display: flex; }
+.float-sidebar { position: absolute; right: 0; top: 0; bottom: 0; min-width: 300px; max-width: 400px; display: flex; flex-direction: column; background-color: var(--bg-color-operate); box-shadow: -2px 0 8px rgba(0,0,0,.04), -4px 0 16px rgba(0,0,0,.06); overflow: auto; z-index: 1000; }
+.empty-chat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background-color: var(--bg-color-operate); border-left: 1px solid rgba(0,0,0,.08); }
 </style>
 
 <style>
-#app{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;width:100vw !important;height:100vh !important;text-align:start !important;max-width:none !important;display:flex !important;align-items:center !important;justify-content:center !important}
+#app { text-align: start; }
 </style>
 ```
 
-#### 2.2 引入侧边导航
+#### 2.3 引入侧边导航
 
-在 `src/component` 文件夹中新建一个 `SideTab.vue` 的文件，并写入以下内容：
+在 `src/components` 文件夹中新建一个 `SideTab.vue` 的文件，并写入以下内容：
 ``` typescript
 <template>
   <div class="side-tab" :class="{ dark: isDark }">
@@ -301,20 +317,20 @@ const handleTabChange = (tab: 'conversations' | 'contacts') => {
 
 ### 步骤3：获取 SDKAppID、userID 和 userSig
 
-在上一步的 `src/App.vue`文件中的 login 函数，填入登录信息 SDKAppID、userID 和 userSig。
+在上一步的 `src/App.vue` 文件中的 login 函数，填入登录信息 SDKAppID、userID 和 userSig。
 ``` java
 // 登录
 login({
-  sdkAppId : , // SDKAppID, number 类型
-  userId: '',  // UserID, string 类型
-  userSig: '', // userSig, string 类型
+  sdkAppId: 0, // number 类型
+  userId: '',  // string 类型
+  userSig: '', // string 类型
 });
 ```
 | 参数 | 类型 | 说明 |
 | --- | --- | --- |
-| SDKAppID | Number | SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 创建新应用，获取 SDKAppID 。<br>**说明：**<br>SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。 |
+| SDKAppID | Number | SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在 <a href="https://console.cloud.tencent.com/im">即时通信 IM 控制台</a> 创建新应用，获取 SDKAppID 。<br><strong>说明：</strong><br>SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。 |
 | userID | String | 用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。 |
-| userSig | String | 用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。<br>**说明：**<br>开发环境：快速跑通 Demo，可以通过 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig。<br>生产环境：将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口， 正确的 UserSig 签发方式请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。 |
+| userSig | String | 用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。<br><strong>说明：</strong><br>开发环境：快速跑通 Demo，可以通过 <a href="https://console.cloud.tencent.com/im">即时通信 IM 控制台</a> 获取 UserSig。<br>生产环境：将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口， 正确的 UserSig 签发方式请参见 <a href="https://cloud.tencent.com/document/product/269/32688">服务端生成 UserSig</a>。 |
 
 > **注意：**
 >
@@ -326,7 +342,7 @@ login({
 
 - userID：单击 [即时通信 IM 控制台 > 消息服务 Chat > 账号管理](https://console.cloud.tencent.com/im/account-management)，切换至目标应用所在账号，您可以创建 2～3 个账号用于体验单聊、群聊的功能。
 
-- userSig：单击 [即时通信 IM 控制台 > 开发工具 > UserSig生成校验](https://console.cloud.tencent.com/im/tool-usersig)，切换至目标应用所在账号，填写创建的 UserID，即可生成 UserSig。
+- userSig：单击 [即时通信 IM 控制台 > 开发工具 > UserSig 生成校验](https://console.cloud.tencent.com/im/tool-usersig)，切换至目标应用所在账号，填写创建的 UserID，即可生成 UserSig。
 
 ## 运行和测试
 
@@ -339,9 +355,9 @@ login({
 
 > **注意：**
 >
-> 1. 请确保 步骤3 代码中  SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
-> 2. userID 和 userSig  为一一对应关系。
-> 3. 如遇到项目启动失败，请检查 开发环境要求 是否满足。
+> - 请确保 步骤3 代码中 SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
+> - userID 和 userSig 为一一对应关系。
+> - 如遇到项目启动失败，请检查 开发环境要求 是否满足。
 
 ## 集成更多高级特性
 
@@ -356,12 +372,12 @@ login({
 > 更多详细信息可参考：音视频通话-开通服务。
 >
 
-1. 安装 `@tencentcloud/call-uikit-vue` 依赖。
+1. 安装 `@trtc/calls-uikit-vue` 依赖。
 
    ``` bash
-     npm install @tencentcloud/call-uikit-vue
+     npm install @trtc/calls-uikit-vue
    ```
-2. 从 `@tencentcloud/call-uikit-vue` 导出 `TUICallKit`，并挂载到 DOM 节点上。
+2. 从 `@trtc/calls-uikit-vue` 导出 `TUICallKit`，并挂载到 DOM 节点上。
 
    在 `src/App.vue` 文件中继续补充下面的代码：
 
@@ -377,7 +393,7 @@ login({
 
    <script setup lang="ts">
    // 导入音视频通话核心组件
-   import { TUICallKit } from '@tencentcloud/call-uikit-vue';
+   import { TUICallKit } from '@trtc/calls-uikit-vue';
    </script>
    ```
 3. 打开 `<MessageInput />` 组件中 `#headerToolbar` 插槽内的注释。
@@ -421,14 +437,14 @@ login({
 >
 
 云端搜索在“步骤 2”中已经默认集成，如果需要关闭云端搜索功能，请参考以下代码：
-1. 设置 `ConversationList` 的 `enableSearch` 属性为 `false`
+1. 设置 `ConversationList` 的 `enableSearch` 属性为 `false`：
 
    ``` typescript
    <template>
      <ConversationList v-show="activeTab === 'conversations'" :enable-search="false" />
    </template>
    ```
-2. 注释会话内搜索侧边栏相关的代码
+2. 注释会话内搜索侧边栏相关的代码：
 
    ``` typescript
    <template>
@@ -470,6 +486,10 @@ const isChatSettingShow = ref(false);
 </el-drawer>
 ```
 
+### 表情包使用
+
+为了尊重版权，下图所示的**默认小黄脸表情包版权属于腾讯云**，您可以通过升级至 [IM 企业版套餐](https://buy.cloud.tencent.com/avc) 免费使用该表情包。
+
 ## 参考信息
 
 ### 官网文档

package/resource/{doc → integration}/livekit/preset/live/vue/live-list-integration.md

@@ -4,7 +4,7 @@
 
 ## 快速体验
 
-您可以在 在线体验 中使用 [在线开播网站](https://web.sdk.qcloud.com/trtc/livekit/pusher/index.html#/?fromMark=123016) 快速开启一场直播，同时您也可以使用 [在线观看网站](https://web.sdk.qcloud.com/trtc/livekit/player/index.html#/?fromMark=123016) 来查看账户下直播列表。
+您可以在 在线体验 中使用 [在线开播网站](https://web.sdk.qcloud.com/trtc/livekit/pusher/index.html#/) 快速开启一场直播，同时您也可以使用 [在线观看网站](https://web.sdk.qcloud.com/trtc/livekit/player/index.html#/) 来查看账户下直播列表。
 
 ## 快速接入
 
@@ -110,7 +110,7 @@ onMounted(async () => {
 
 #### 步骤1：配置页面路由
 
-请配置您的 Vue Router，将`live-list.vue` 映射到直播列表页面。
+请配置您的 Vue Router，将 `live-list.vue` 映射到直播列表页面。
 
 > **注意：**
 >
@@ -186,10 +186,10 @@ function handleLiveRoomClick(liveInfo: LiveInfo) {
 ## 自由定制
 
 根据上述功能展示图，我们也支持您根据项目需求对直播列表页面进行 UI 定制。主要可供定制的能力如下表所示。
-| **类别** | **功能** | **描述** |
+| <strong>类别</strong> | <strong>功能</strong> | <strong>描述</strong> |
 | --- | --- | --- |
-| **直播间列表** | 自定义直播间列表区域展示 | **支持：**<br>- **直播间信息文字 展示/隐藏、UI 进行定制。**<br>- **直播间一行/一列展示固定数量定制。** |
-| **个人信息** | 自定义个人信息展示 | **支持：**<br>- **展示/隐藏个人信息。**<br>- **个人信息字体、颜色 UI 自定义设置。** |
+| <strong>直播间列表</strong> | 自定义直播间列表区域展示 | <strong>支持：</strong><br>- <strong>直播间信息文字 展示/隐藏、UI 进行定制。</strong><br>- <strong>直播间一行/一列展示固定数量定制。</strong> |
+| <strong>个人信息</strong> | 自定义个人信息展示 | <strong>支持：</strong><br>- <strong>展示/隐藏个人信息。</strong><br>- <strong>个人信息字体、颜色 UI 自定义设置。</strong> |
 
 ### 颜色主题及语言
 
@@ -211,12 +211,12 @@ import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
 ### 按钮 Button 和 图标 Icon
 
 您可以对按钮、图标等控件进行自定义。以` live-list.vue` 为例，对` Button`、`Icon` 控件执行增删改等操作都可以满足您的自定义需求。除布局调整外，我们还支持对颜色、字体、圆角以及输入框、弹框等内容进行全面修改，充分满足您的 UI 定制需求。
-| **类别** | **功能** | **描述** |
+| <strong>类别</strong> | <strong>功能</strong> | <strong>描述</strong> |
 | --- | --- | --- |
-| **素材管理** | 自定义素材管理区域展示 | 支持调整 Icon 的大小、颜色或对 Icon 进行替换。 |
-| **直播工具** | 自定义直播工具信息展示 | 支持调整 Icon 的大小、颜色或对 Icon 进行替换。 |
-| **在线观众** | 自定义观众信息展示 | 支持：<br>- 展示/隐藏观众等级。<br>- 观众信息字体、颜色 UI 自定义设置。<br>- 替换为您需要的 Icon 风格。 |
-| **消息列表** | 自定义消息弹幕区域展示 | 支持：<br>- 展示/隐藏聊天输入区域。<br>- 支持 UI 定制聊天气泡风格、定制观众等级等内容。 |
+| <strong>素材管理</strong> | 自定义素材管理区域展示 | 支持调整 Icon 的大小、颜色或对 Icon 进行替换。 |
+| <strong>直播工具</strong> | 自定义直播工具信息展示 | 支持调整 Icon 的大小、颜色或对 Icon 进行替换。 |
+| <strong>在线观众</strong> | 自定义观众信息展示 | 支持：<br>- 展示/隐藏观众等级。<br>- 观众信息字体、颜色 UI 自定义设置。<br>- 替换为您需要的 Icon 风格。 |
+| <strong>消息列表</strong> | 自定义消息弹幕区域展示 | 支持：<br>- 展示/隐藏聊天输入区域。<br>- 支持 UI 定制聊天气泡风格、定制观众等级等内容。 |
 
 ### 设置昵称及头像
 
@@ -236,9 +236,9 @@ await setSelfInfo({
 ## 下一步
 
 恭喜您，现在您已经成功集成了**直播列表页面**。接下来，您可以实现**主播开播页**、**观众观看页**和 **UI 自定义**等内容，可参考下表：
-| **功能** | **描述** | **集成指引** |
+| <strong>功能</strong> | <strong>描述</strong> | <strong>集成指引</strong> |
 | --- | --- | --- |
-| **观众观看** | 实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。 | 观众观看（Web Vue3） |
-| **主播开播** | 主播在当前页面开始直播及相关设置。 | 主播开播（Web Vue3） |
-| **UI 自定义** | 更详细的 UI 组件自定义指引。 | UI 自定义 |
-| **Web 监播** | 运营平台，支持直播间管控。 | 监播页面（Web Vue3） |
+| <strong>观众观看</strong> | 实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。 | 观众观看（Web Vue3） |
+| <strong>主播开播</strong> | 主播在当前页面开始直播及相关设置。 | 主播开播（Web Vue3） |
+| <strong>UI 自定义</strong> | 更详细的 UI 组件自定义指引。 | UI 自定义 |
+| <strong>直播管理系统</strong> | 运营平台，支持直播间管控。 | 直播管理系统（Vue3） |

package/resource/{doc → integration}/livekit/preset/live/vue/live-player-desk-integration.md

@@ -1,5 +1,11 @@
 本文对 TUILiveKit Demo 中的**观看页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的观看页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
 
+> **集成提示****：**
+>
+
+> 本文档介绍基于 **UI 组件** 的观众观看方式（含完整交互 UI）。若您需通过 **Core SDK** 自行搭建观众端界面，请参考 观众观看 (Core SDK)。
+>
+
 ## 功能展示
 
 观看页面提供默认行为和风格，但如果默认行为和样式不能完全满足您的需求，您也可以对 UI 进行自定义。图中显示的数字与特定功能列表中的类别相对应。其中主要包含直播**信息展示、视频直播区域、在线观众、音视频操作、直播时长、画面分辨率切换、全屏功能、聊天互动、消息列表等。**
@@ -13,6 +19,12 @@
 
 - **H5 移动平台支持**：跨平台兼容。
 
+   > **说明：**
+   >
+
+   > 本文档主要介绍观众端的核心功能逻辑。如果您需要修改观众端的界面样式（如修改某些默认控件、修改图标和颜色、调整弹窗风格），请直接前往 调整界面风格 指南进行配置。
+   >
+
 ## 快速接入
 
 ### 步骤1：环境配置及开通服务
@@ -40,7 +52,7 @@ yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 
 ### 步骤3：观看页面接入
 
-在您的项目下创建`live-player.vue`文件，可直接复制如下代码至您的项目中集成**观看页面**。
+在您的项目下创建 `live-player.vue`文件，可直接复制如下代码至您的项目中集成**观看页面**。
 
 > **注意：**
 >
@@ -150,7 +162,7 @@ npm run dev
 ### 步骤1：开启一场直播
 - **方式一（推荐）：**
 
-   使用我们提供的 [在线开播网站](https://web.sdk.qcloud.com/trtc/livekit/pusher/index.html#/?fromMark=123004) ，开启一场直播来观看，开启后获取直播间 ID
+   使用我们提供的 [在线开播网站](https://web.sdk.qcloud.com/trtc/livekit/pusher/index.html#/) ，开启一场直播来观看，开启后获取直播间 ID
 
 - **方式二：**
 
@@ -229,21 +241,21 @@ import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
 
 ### 按钮 Button 和图标 Icon
 
-若您需要对按钮 Button 或图标 Icon 等其他控件进行新增或替换等 UI 定制，您可以通过如下方式实现，以`live-player.vue `文件中的按钮和图标为例，您可以参考下图找到对应按钮或图标的指定位置源码，对当前部分的控件进行**增加、删除、替换**等 UI 定制操作。
+若您需要对按钮 Button 或图标 Icon 等其他控件进行新增或替换等 UI 定制，您可以通过如下方式实现，以 `live-player.vue `文件中的按钮和图标为例，您可以参考下图找到对应按钮或图标的指定位置源码，对当前部分的控件进行**增加、删除、替换**等 UI 定制操作。
 
 根据上述示例，我们同样支持您根据项目需求对**观众观看页面**进行 UI 定制的能力。除了页面 UI 布局调整，我们也支持您对**颜色主题、字体、圆角、按钮、图标、输入框、弹框等**内容进行**增加、删除、修改**等操作，满足您的 UI 定制需要。
-| **类别** | **功能** | **描述** |
+| <strong>类别</strong> | <strong>功能</strong> | <strong>描述</strong> |
 | --- | --- | --- |
-| **素材管理** | 自定义素材管理区域展示 | 支持调整 Icon 的大小、颜色或对 Icon 进行替换。 |
-| **直播工具** | 自定义直播工具信息展示 | 支持调整 Icon 的大小、颜色或对 Icon 进行替换。 |
-| **在线观众** | 自定义观众信息展示 | **支持：**<br>- 展示/隐藏观众等级。<br>- 观众信息字体、颜色 UI 自定义设置。<br>- 替换为您需要的 Icon 风格。 |
-| **消息列表** | 自定义消息弹幕区域展示 | **支持：**<br>- 展示/隐藏聊天输入区域。<br>- 支持 UI 定制聊天气泡风格、定制观众等级等内容。 |
+| <strong>素材管理</strong> | 自定义素材管理区域展示 | 支持调整 Icon 的大小、颜色或对 Icon 进行替换。 |
+| <strong>直播工具</strong> | 自定义直播工具信息展示 | 支持调整 Icon 的大小、颜色或对 Icon 进行替换。 |
+| <strong>在线观众</strong> | 自定义观众信息展示 | <strong>支持：</strong><br>- 展示/隐藏观众等级。<br>- 观众信息字体、颜色 UI 自定义设置。<br>- 替换为您需要的 Icon 风格。 |
+| <strong>消息列表</strong> | 自定义消息弹幕区域展示 | <strong>支持：</strong><br>- 展示/隐藏聊天输入区域。<br>- 支持 UI 定制聊天气泡风格、定制观众等级等内容。 |
 
 ## 常见问题
 
 ### 浏览器自动播放限制
 
-出于用户体验考虑，现代浏览器对网页自动播放 (Autoplay) 功能实施了限制性策略：所有带声音的媒体内容必须经过用户主动交互（如点击或触摸）后才能播放。这项限制主要是为了防止网站在用户未明确同意的情况下突然播放音频，避免对用户造成干扰。大多数浏览器都不限制无声视频的自动播放，但是在低电量模式下的 iOS Safari 浏览器中以及开启了自定义自动播放限制的 iOS WKWebView 中（如 iOS 微信浏览器），无声视频的自动播放也会受到限制。
+出于用户体验考虑，现代浏览器对网页自动播放 (Autoplay) 功能实施了限制性策略：所有带声音的媒体内容必须经过用户主动交互（如点击或触摸）后才能播放。这项限制主要是为了防止网站在用户未明确同意的情况下突然播放音频，避免对用户造成干扰。大多数浏览器都不限制无声视频的自动播放，但是在低电量模式下的 iOS Safari 浏览器中以及开启了自定义自动播放限制的 iOS WKWebView 中（例如 iOS 微信浏览器），无声视频的自动播放也会受到限制。
 
 #### 自动播放失败表现
 
@@ -294,8 +306,8 @@ export { useCustomizedAutoPlayDialog };
 ## 下一步
 
 恭喜您，现在您已经成功集成了观众观看功能。接下来，您可以继续接入**直播列表、UI 自定义**和**监播**等功能：
-| **功能** | **描述** | **集成指引** |
+| <strong>功能</strong> | <strong>描述</strong> | <strong>集成指引</strong> |
 | --- | --- | --- |
-| **直播列表** | 展示直播列表界面和功能，包含直播列表和房间信息展示功能。 | 直播列表（Web Vue3） |
-| **UI 自定义** | 更详细的 UI 组件自定义指引。 | 概述 |
-| **Web 监播** | 运营平台，支持直播间管控。 | Web 监播页（Web Vue3） |
+| <strong>直播列表</strong> | 展示直播列表界面和功能，包含直播列表和房间信息展示功能。 | 直播列表（Web Vue3） |
+| <strong>UI 自定义</strong> | 更详细的 UI 组件自定义指引。 | 概述 |
+| <strong>直播管理系统</strong> | 运营平台，支持直播间管控。 | 直播管理系统（Vue3） |