@tencentcloud/sdk-mcp 1.7.3 → 1.7.4

package/resource/knowledge/roomkit/preset/uniapp-app/integration.md

@@ -1,205 +1,4 @@
-TUIRoomKit 是腾讯云提供的一站式多人视频会议解决方案，集成了完整的 UI 组件和核心功能。通过本文档，开发者可以快速了解如何将 TUIRoomKit 集成到项目中，实现多人视频会议功能。本文还将详细介绍如何快速接入 UI 项目，替换图片资源，自定义样式，帮助开发者打造符合品牌特色的音视频应用。
-
-<style>
-.vsdk-survey-card * {
-  box-sizing: border-box;
-}
-
-.vsdk-survey-card {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 18px 22px;
-  margin: 16px 0;
-  border-radius: 14px;
-  overflow: hidden;
-  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
-  border: 1px solid #D7E8FF;
-  box-shadow: 0 4px 16px rgba(0,110,255,.05);
-  transition: all .25s ease;
-}
-
-.vsdk-survey-card::before{
-  content:"";
-  position:absolute;
-  right:-60px;
-  top:-60px;
-  width:180px;
-  height:180px;
-  background:radial-gradient(circle,
-      rgba(0,110,255,.16) 0%,
-      rgba(0,110,255,.08) 45%,
-      transparent 75%);
-  pointer-events:none;
-}
-
-.vsdk-survey-card::after{
-  content:"";
-  position:absolute;
-  left:-40px;
-  bottom:-60px;
-  width:120px;
-  height:120px;
-  background:radial-gradient(circle,
-      rgba(76,169,255,.08),
-      transparent 70%);
-  pointer-events:none;
-}
-
-.vsdk-survey-card:hover{
-  border-color:#006EFF;
-  box-shadow:
-      0 10px 28px rgba(0,110,255,.10),
-      0 0 36px rgba(0,110,255,.08);
-  transform:translateY(-2px);
-}
-
-.vsdk-card-left{
-  display:flex;
-  align-items:center;
-  gap:14px;
-  flex:1;
-  min-width:0;
-  position:relative;
-  z-index:1;
-}
-
-.vsdk-ico{
-  width:46px;
-  height:46px;
-  flex:0 0 46px;
-  border-radius:12px;
-  background:linear-gradient(180deg,#EDF5FF,#DCEBFF);
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  font-size:22px;
-  box-shadow:
-      inset 0 1px 0 rgba(255,255,255,.8),
-      0 6px 18px rgba(0,110,255,.12);
-}
-
-.vsdk-text{
-  min-width:0;
-}
-
-.vsdk-title{
-  display:flex;
-  align-items:center;
-  gap:8px;
-  flex-wrap:wrap;
-  font-size:18px;
-  font-weight:600;
-  color:#1F2329;
-  line-height:1.4;
-}
-
-.vsdk-badge{
-  padding:2px 8px;
-  border-radius:999px;
-  background:#EAF3FF;
-  color:#006EFF;
-  font-size:11px;
-  font-weight:600;
-}
-
-.vsdk-desc{
-  margin-top:6px;
-  font-size:13px;
-  line-height:1.7;
-  color:#4E5969;
-}
-
-.vsdk-card-right{
-  flex-shrink:0;
-  position:relative;
-  z-index:1;
-}
-
-.vsdk-cta{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  min-width:112px;
-  height:40px;
-  padding:0 22px;
-  border-radius:8px;
-  background:#006EFF;
-  color:#FFFFFF;
-  text-decoration:none;
-  font-size:14px;
-  font-weight:600;
-  box-shadow:0 8px 20px rgba(0,110,255,.25);
-  transition:all .2s ease;
-}
-
-.vsdk-cta:hover{
-  background:#0052D9;
-  box-shadow:0 10px 24px rgba(0,110,255,.35);
-}
-
-@media (max-width:768px){
-
-.vsdk-survey-card{
-    flex-direction:column;
-    align-items:flex-start;
-}
-
-.vsdk-card-left{
-    width:100%;
-    align-items:flex-start;
-}
-
-.vsdk-title{
-    font-size:16px;
-}
-
-.vsdk-desc{
-    font-size:12px;
-}
-
-.vsdk-card-right{
-    width:100%;
-    margin-top:14px;
-}
-
-.vsdk-cta{
-    width:100%;
-}
-
-}
-</style>
-
-<div class="vsdk-survey-card">
-
-<div class="vsdk-card-left">
-
-<div class="vsdk-ico">💡</div>
-
-<div class="vsdk-text">
-
-<div class="vsdk-title">
-有接入卡点？30 秒反馈
-<span class="vsdk-badge">全部选填</span>
-</div>
-
-<div class="vsdk-desc">
-正在了解或评估视频会议 SDK？UI、功能、文档或套餐开通如有卡点，欢迎填写反馈。
-</div>
-
-</div>
-
-</div>
-
-<div class="vsdk-card-right">
-<a class="vsdk-cta" href="https://wj.qq.com/s2/27395009/ac34/" target="_blank">
-填写反馈
-</a>
-</div>
-
-</div>
+本文档介绍如何在 uniapp 业务项目中集成 TUIRoomKit，快速获得开箱即用的多人音视频会议能力。
 
 ## 前提条件
 
@@ -211,371 +10,270 @@ TUIRoomKit 是腾讯云提供的一站式多人视频会议解决方案，集成
 - **SDKSecretKey**：应用密钥，用于初始化配置文件的密钥信息。
 
 ### 环境准备
+- **IDE**： HBuilderX 升级到新版本。
 
-> **说明：**
-> HBuilderX 4.64 和 4.65 版本对 UTS 插件打包存在已知兼容性问题，建议使用 4.66 或更高版本。
->
-
-- [HBuilderX](https://www.dcloud.io/hbuilderx.html)：HBuilderX 是 **uni-app 官方**的集成开发环境（IDE），我们需要用它来导入、配置和运行我们的 Demo。
-
-- 2个移动设备： Android 5.0 以上的设备 / iOS 13.0 及以上设备。
-
-## 快速接入
-
-### **步骤1：下载 TUIRoomKit 组件**
-
-#### 1. 克隆项目源码
-``` bash
-git clone
-```
-
-#### 2. 导入 atomic-x 组件
-- 将源码中 `TUIKit_uni-app/App/uni_modules` 目录下的 `tuikit-atomic-x` 文件夹，完整拷贝到您项目根目录下的 `uni_modules` 文件夹中。
-
-- 将源码中 `TUIKit_uni-app/App/components` 下的文件，完整的拷贝到您项目的 `components` 文件夹中。
-
-- 将源码中 `TUIKit_uni-app/App/static` 目录下的文件，完整拷贝到您项目根目录下的同名文件夹下。
-
-#### 3. 拷贝创建房间，加入房间，房间主界面等页面
-- 将源码中 `TUIKit_uni-app/App/pages` 目录下的文件，完整拷贝到您项目根目录下的同名文件夹中。
-
-- 将源码中 `TUIKit_uni-app/App/debug` 文件夹拷贝到您项目的根目录下，这个目录提供有可以方便您在客户端快速生成的 **UserSig** 的快捷函数。
-
-#### 4. 合并 App.vue 配置
-
-**TUIKit_uni-app/App/App.vue** 文件中包含多人视频会议能力的初始化逻辑，因此您需要将 **TUIKit_uni-app/App/App.vue** 文件和您项目下的 **App.vue** 文件进行合并。
+- **语言**： nvue。
 
-   > **注意：**
-   >
-   > 不要直接覆盖 **App.vue** 文件！ 打开源码中的 **TUIKit_uni-app/App/App.vue**， 将其 `<script>` 部分的 ts 内容追加到您自己项目的 **App.vue** 的 `<script>`  标签内。
-   >
+- **运行环境**： Node.js v12 版本及以上。
 
-### 步骤2：工程配置
-1. 配置 `manifest.json`
+- **包管理**： npm (版本需与 Node 版本匹配)。
 
-   打开您项目的 **manifest.json** 文件，在 **app-plus** > **distribute** 节点下，确保添加了以下必要的权限：
+- **支持平台**： uni-app 打包 App。
 
-  - Android 平台（`android` 节点）：在 `permissions` 数组中，请确保包含以下权限：
+## 集成步骤
 
-      ``` json
-      "<uses-permission android:name=\"android.permission.CAMERA\"/>",
-      "<uses-permission android:name=\"android.permission.RECORD_AUDIO\" />",
-      "<uses-permission android:name=\"android.permission.INTERNET\"/>",
-      "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-      "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>"
-      ```
-  - iOS 平台（ios 节点）：在 `privacyDescription` 对象中，请确保包含以下描述：
+### 步骤1：创建项目
 
-      ``` json
-      "NSCameraUsageDescription" : "应用需要访问您的相机以进行多人音视频互动",
-      "NSMicrophoneUsageDescription" : "应用需要访问您的麦克风以进行多人音视频互动"
-      ```
+打开 HBuilderX，在菜单栏中选择**文件 > 新建 > 项目**，创建一个名为 `room-example` 的 uni-app vue3 项目。
 
-      在 `UIBackgroundModes` 数组中，添加 `audio` 以支持后台播放音频。
+### 步骤2：安装 TUIKit 插件
 
-      ``` json
-      "UIBackgroundModes" : [ "audio" ]
-      ```
-2. 制作自定义基座。
+进入[【官方】腾讯云聊天+通话+直播响应式 SDK](https://ext.dcloud.net.cn/plugin)。点击**下载插件并导入 HBuilderX**，将插件导入 `room-example` 项目中。
 
-   > **说明：**
-   >
-   > 由于 TUIRoomKit 包含原生代码（UTS 插件），您**必须**制作自定义调试基座才能在真机上运行。
-   >
+### 步骤3：配置原生模块与 Android 权限
 
-  1. 在 HBuilderX 顶部菜单选择**运行** > **运行到手机或模拟器** > **制作自定义调试基座**。
-
-  2. 制作成功后，再次选择**运行** > **运行到手机或模拟器**，在弹窗中勾选**使用自定义调试基座**后运行到您的手机。
-
-      具体操作指引参见 编译并运行 Demo。
-
-### 步骤3：登录
-
-集成完成后，您需要完成登录。在您项目中需要使用到多人视频会议能力的地方进行登录，这是**使用 TUIRoomKit 的关键步骤**，因为只有在登录成功后才能正常使用 TUIRoomKit 的各项功能，故请您耐心检查相关参数是否配置正确：
-``` typescript
-import { useLoginState } from "@/uni_modules/tuikit-atomic-x/state/LoginState";
-
-const { login } = useLoginState();
-
-onMounted(() => {
-  login({
-	sdkAppID: 1400000001,     // 请替换为开通服务控制台的 SDKAppID
-	userID: "your userID",        // 请替换为您的 UserID
-	userSig: "xxxxxxxxxxx",  // 您可以在控制台中计算一个 UserSig 并填在这个位置
-  });
-});
+【Android 权限配置】
 
+``` json
+<uses-permission android:name="android.permission.CAMERA"/>
+<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+<uses-permission android:name="android.permission.RECORD_AUDIO" />
+<uses-permission android:name="android.permission.INTERNET"/>
+<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 ```
 
-**登录接口参数说明**
-| 参数 | 类型 | 说明 |
-| --- | --- | --- |
-| SDKAppID | Number | 从 <a href="https://console.cloud.tencent.com/trtc">TRTC 控制台 > 应用管理</a> 获取。 |
-| userID | String | 当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。 |
-| userSig | String | 用于腾讯云鉴权的票据。请注意：<br>- 开发环境：您可以采用本地 <code>GenerateTestUserSig.genTestSig</code> 函数生成 UserSig 或者通过 <a href="https://console.cloud.tencent.com/im/tool-usersig">UserSig 辅助工具</a> 生成临时的 UserSig。<br>- 生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参见 <a href="https://cloud.tencent.com/document/product/647/17275#formal">服务端生成 UserSig</a>。<br>更多信息请参见 <a href="https://cloud.tencent.com/document/product/647/17275">如何计算及使用 UserSig</a>。 |
+【iOS 权限配置】
 
-### 步骤4：注册多人视频会议主页面
+``` java
+"privacyDescription" : {
+    "NSCameraUsageDescription" : "应用需要访问您的相机以进行直播",
+    "NSMicrophoneUsageDescription" : "应用需要访问您的麦克风以进行直播"
+},
+"UIBackgroundModes" : [ "audio" ]
+```
 
-现在，您需要在 `pages.json` 文件中告诉您的应用，这个新页面是存在的。
+### 步骤4：集成 TUIKit
+1. **拷贝 TUIKit 页面及静态资源**：将 `⁠uni_modules/tuikit-atomic-x/quickstart_room/`⁠下的`⁠pages/*⁠` 拷贝到项目 `page`⁠ 目录，⁠`static/*⁠` 拷贝到项目 `static` 目录下。
 
-打开您项目根目录下的 `pages.json` 文件，在 `"pages"` 数组中，添加以下对象来注册多人视频会议主页面。
-``` json
-{
-    "pages": [
-        // ... 您项目已有的其他页面配置
-        {
-            "path": "pages/scenes/room/main/index",
-            "style": {
-                "navigationBarTitleText": "",
-                "disableSwipeBack": true, // 禁止右滑返回，防止会中误操作退出
-                "app-plus": {
-                    "titleNView": false // 隐藏原生导航栏，使用页面内的自定义导航
-                }
-            }
-        }
-    ]
-    // ... 其他配置
-}
+【Windows 端】
+``` bash
+xcopy /E /I /Y "uni_modules\tuikit-atomic-x\quickstart_room\static\*" "static\" && xcopy /E /I /Y "uni_modules\tuikit-atomic-x\quickstart_room\pages\*" "pages\"
 ```
 
-### 步骤5：跳转多人视频会议主页面
-
-#### 创建房间
-
-在您需要创建多人视频会议的地方（具体由您的业务决定，在其点击事件里执行），调用 `uni.navigateTo` 或 `uni.redirectTo` 方法，即可进入多人视频会议主页面。
-``` typescript
-// 示例：在一个按钮的点击事件中
-function startBroadcast() {
-  const roomID = '123456'; //房间id
-  const roomName = '123456'; //房间名称
-  const query = [
-    'mode=create',
-    `roomID=${encodeURIComponent(roomID)}`,
-    `roomName=${encodeURIComponent(roomName)}`,
-    'autoEnableCamera=1',     //进房是否开启摄像头（1 开启， 0 关闭）
-    'autoEnableMicrophone=1', //进房是否开启麦克风（1 开启， 0 关闭）
-    'autoEnableSpeaker=1',    //进房是否开启扬声器（1 开启， 0 关闭）
-  ].join('&');
-  uni.navigateTo({ url: `/pages/scenes/room/main/index?${query}` }); // URL 对应 pages.json 中配置的 path
-}
+【Mac 端】
+``` bash
+cp -r uni_modules/tuikit-atomic-x/quickstart_room/static/* static/ && cp -r uni_modules/tuikit-atomic-x/quickstart_room/pages/* pages/
 ```
 
+   2. **配置页面路由：**替换 `pages.json` 内容，注册所需页面路由：
+
+   ``` json
+   {
+     "pages": [
+       {
+         "path": "pages/login/login",
+         "style": {
+           "navigationStyle": "custom"
+         }
+       },
+       {
+         "path": "pages/index/index",
+         "style": {
+           "navigationStyle": "custom"
+         }
+       },
+       {
+         "path": "pages/scenes/room/index",
+         "style": {
+           "navigationStyle": "custom"
+         }
+       },
+       {
+         "path": "pages/scenes/room/join/index",
+         "style": {
+           "navigationStyle": "custom"
+         }
+       },
+       {
+         "path": "pages/scenes/room/create/index",
+         "style": {
+           "navigationStyle": "custom"
+         }
+       },
+       {
+         "path": "pages/scenes/room/main/index",
+         "style": {
+           "navigationStyle": "custom",
+           "disableScroll": true,
+           "disableSwipeBack": true
+         }
+       }
+     ],
+     "globalStyle": {
+       "navigationBarTextStyle": "black",
+       "navigationBarTitleText": "腾讯云 IM",
+       "navigationBarBackgroundColor": "#EBF0F6",
+       "backgroundColor": "#F8F8F8"
+     }
+   }
+   ```
+
+## 运行和测试
+
 > **说明：**
-> **navigateTo** 与 **redirectTo**
+> 接入过程中遇到任何卡点或有改进建议，欢迎通过 [视频会议 SDK 接入反馈问卷](https://wj.qq.com/s2/27395009/ac34/) 反馈，官方会及时跟进处理。
 >
-> - `uni.navigateTo`：保留当前页面，跳转到新页面，用户可以从多人视频会议主页返回到上一页。适用于创建房间前可以取消的场景。
-> - `uni.redirectTo`：关闭当前页面，跳转到新页面，用户无法返回。适用于支持人直接进入主流程的场景，不需要保存上个界面， 您可以根据自己的业务需求选择使用。
-
-#### 加入房间
-
-在您需要加入多人视频会议的地方（具体由您的业务决定，在其点击事件里执行），调用 `uni.navigateTo` 或 `uni.redirectTo` 方法，即可进入多人视频会议主页面。
-``` typescript
-// 示例：在一个按钮的点击事件中
-function startBroadcast() {
-  const roomID = '123456'; //房间id
-  const query = [
-    'mode=join',
-    `roomID=${encodeURIComponent(roomID)}`,
-    'autoEnableCamera=1',     //进房是否开启摄像头（1 开启， 0 关闭）
-    'autoEnableMicrophone=1', //进房是否开启麦克风（1 开启， 0 关闭）
-    'autoEnableSpeaker=1',    //进房是否开启扬声器（1 开启， 0 关闭）
-  ].join('&');
-  uni.navigateTo({ url: `/pages/scenes/room/main/index?${query}` }); // URL 对应 pages.json 中配置的 path
-}
-```
-
-## 定制您的 UI
-
-### 替换主界面底部栏，顶部栏和视频流用户信息界面图标
 
-TUIRoomKit 用到的所有图标都存放于 `static/images` 目录下，部分示例如下，您可以根据您的诉求来替换目录下的图标。
+### 步骤1：**制作自定义基座**
 
-顶部栏：
+点击**运行** > **运行到手机或模拟器** > **制作自定义调试基座**。
 
-|图标路径|详细描述|
-|---------|---------|
-|/static/images/room/room_switch_camera.png|顶部操作栏切换摄像头图标。|
-|/static/images/room/room_speakerphone.png|顶部操作栏扬声器图标。|
-|/static/images/room/room_earpiece.png|顶部操作栏听筒图标。|
-
-底部栏：
-
-|图标路径|详细描述|
-|---------|---------|
-|/static/images/room/room_member.png|底部操作栏成员图标。|
-|/static/images/room/room_mic_on.png|底部操作栏麦克风开启图标。|
-|/static/images/room/room_mic_off.png|底部操作栏麦克风关闭图标。|
-|/static/images/room/room_camera_on.png|底部操作栏摄像头开启图标。|
-|/static/images/room/room_camera_off.png|底部操作栏摄像头关闭图标。|
-
-视频流区域用户状态信息：
+> **说明：**
+> 首次制作自定义基座需要下载 Gradle 依赖，Android 通常需要 10～20 分钟，iOS 需要 5～10 分钟。过程中请勿中断。
+>
 
-|图标路径|详细描述|
-|---------|---------|
-|/static/images/room/room_video_view_mic_on.png|视频流用户麦克风开启图标。|
-|/static/images/room/room_video_view_mic_off.png|视频流用户麦克风关闭图标。|
-|/static/images/room/room_video_view_owner.png|视频流用户主持人角色图标。|
-|/static/images/room/room_video_view_admin.png|底部操作栏管理员角色图标。|
+### 步骤2：**登录**
 
-### 设置字体的大小/颜色
+在 `pages/login/login.vue` 中，填入 `SDKAppID`、 `userID`、`SecretKey`，点击**登录**。
+| 参数 | 类型 | 说明 |
+| --- | --- | --- |
+| SDKAppID | Number | SDKAppID 是 RoomKit 客户应用的唯一标识。您可以在 <a href="https://console.cloud.tencent.com/trtc">TRTC 控制台 > 应用管理</a> 创建新应用获取 。<br><strong>说明：</strong><br>SDKAppID 是 RoomKit 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间是天然隔离的，不能互通。 |
+| SecretKey | String | SecretKey 是 RoomKit 客户应用的密钥。您可以在 <a href="https://console.cloud.tencent.com/trtc">TRTC 控制台 > 应用管理</a> 对应应用获取。<br><strong>安全提示：</strong><br>- 项目示例支持通过 <code>genTestUserSig</code> 函数生成 <code>userSig</code>。该方法中 <code>SecretKey</code> 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。<strong>该方法仅适合本地跑通功能调试</strong>。 正确的 UserSig 签发方式请参见 <a href="https://cloud.tencent.com/document/product/647/17275#formal">服务端生成 UserSig</a>。<br>- 敏感信息（SecretKey）仅用于 Demo 测试，不可提交到代码仓库或用于生产环境。 |
+| userID | String | 用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。 |
 
-uni-app 官方对 **nvue** 页面限制字体的大小和颜色只能在 `text` 标签上设置，对于您想修改的文案，直接修改其 `css` 样式即可，示例如下
+``` java
 
-以 “解除静音” 文字为例：
-``` typescript
-<template>
-  <text class="bottom-text">解除静音</text>
-</template>
+import { ref } from 'vue'
+import { useLoginState } from '@/uni_modules/tuikit-atomic-x/state/LoginState';
+import { genTestUserSig  } from '@/uni_modules/tuikit-atomic-x/debug/GenerateTestUserSig';
+const { login } = useLoginState();
 
-<style>
-  .bottom-text {
-    color: #FFFFFF;
-    font-size: 20rpx;
-    margin-top: 6rpx;
-    text-overflow: ellipsis;
+const sdkAppId = 0; // SDKAppID
+const userId = ref(''); // userID
+const secretKey = ''; // SecretKey
+
+// 登录
+login({
+  sdkAppID: sdkAppId,
+  userID: userId.value,
+  userSig: genTestUserSig({
+    SDKAppID: sdkAppId,
+    userID: userId.value,
+    secretKey: secretKey
+  }).userSig,
+  success: () => {
+    uni.reLaunch({ url: '/pages/scenes/chat/conversationList/conversationList' })
+  },
+  fail: (code: number, msg: string) => {
+    uni.showToast({ title: msg || '登录失败', icon: 'none' })
   }
-</style>
+})
 ```
 
-修改其 css 样式：
-``` typescript
-<template>
-  <text class="bottom-text">开启音频</text>
-</template>
-
-<style>
- .bottom-text {
-    color: red;
-    font-size: 24rpx;
-    margin-top: 6rpx;
-    text-overflow: ellipsis;
-  }
-</style>
+### 步骤3：**运行项目**
 
-```
+点击**运行** > **运行到手机或模拟器** > **运行到 Android/iOS 基座**，使用制作好的**自定义基座**运行到手机。
 
-最终效果：
+## AI 助手：知识咨询与代码集成
 
-### 设置按钮的大小
+您在接入视频会议 SDK 过程中，可以通过 MCP 使用 AI 助手，快速完成知识咨询、报错排查和集成代码生成。支持 Web/Android/iOS/Flutter/uni-app/HarmonyOS 等平台，答案基于官方文档。适用于查询 Room 组件和 AtomicXCore SDK 用法以及集成文档等场景，[立即体验，提出您的第一个问题](https://cloud.tencent.com/document/product/647/129285)。
 
-设置按钮的大小，也可以直接通过修改 `css` 属性来进行设置，示例如下：
+## 高级功能
 
-以底部操作栏麦克风按钮为例：
-``` typescript
-<template>
-<image class="bottom-icon" src="/static/images/room/room_mic_on.png" mode="aspectFit"/>
-<text class="bottom-text">解除静音</text>
-</template>
+### 屏幕共享
 
-<style>
-  .bottom-icon {
-    width: 48rpx;
-    height: 48rpx;
-  }
-</style>
-```
+#### Android - 无需配置
 
-设置对应的 `css` 属性：
-``` typescript
-<template>
-<image class="bottom-icon" src="/static/images/room/room_mic_off.png" mode="aspectFit"/>
-<text class="bottom-text">解除静音</text>
-</template>
-
-<style>
-  .bottom-icon {
-    width: 70rpx;
-    height: 70rpx;
-  }
-</style>
+开箱即用。
 
-```
+#### iOS - 需配置 Broadcast Upload Extension
 
-最终效果：
+##### **步骤1：生成并绑定** Extension
 
-### 隐藏按钮
+使用您的账号 [登录](https://developer.apple.com/)，进行以下操作，注意完成后需要下载对应的 Provisioning Profile。
+1. 单击 Certificates, IDs & Profiles。
 
-隐藏按钮可以通过注释代码的方式来进行直接隐藏，示例如下
+2. 在右侧的界面中单击加号。
 
-以底部操作栏的麦克风按钮为例：
-``` typescript
-<!-- 底部操作栏 -->
-<view class="bottom-bar">
-  <MembersButton />
-   <!-- <MicButton /> -->   <!-- 隐藏麦克风图标 -->
-  <CameraButton />
-</view>
-```
+3. 选择 App Groups，单击 Continue。
 
-将其注释掉即可实现隐藏按钮。
-
-### 新增按钮
-
-在您需要新增的位置，插入对应的按钮实现。
-
-以底部栏新增“更多”按钮为例：
-``` typescript
-<template>
-  ......
- <!-- 底部操作栏 -->
-    <view class="bottom-bar">
-    ......
-	  <view class="action-button-item">
-	    <image class="bottom-icon" src="/static/images/more.png" mode="aspectFit" />
-	    <text class="bottom-text">更多</text>
-	  </view>
-    </view>
-</template>
-
-<style>
-  .bottom-icon {
-    width: 48rpx;
-    height: 48rpx;
-  }
-  .bottom-text {
-    color: #FFFFFF;
-    font-size: 20rpx;
-    margin-top: 6rpx;
-    text-overflow: ellipsis;
-	text-align: center;
-  }
-</style>
-```
+4. 在弹出的表单中填写 Description 和 Identifier，其中 Identifier 需要传入接口中的对应的 AppGroup 参数。完成后单击 Continue。
 
-## 常见问题
+5. 回到 Identifier 页面，左上边的菜单中选择 App IDs，然后单击您的 App ID（主 App 与 Extension 的 AppID 需要进行同样的配置）。
 
-#### **Q：该 TUIKit 插件是否支持编译到 H5 或微信小程序？**
+6. 选中 App Groups 并单击 Edit。
 
-A：**不支持。**由于新版 TUIKit 基于 **UTS (Uni-app Type Script)** 插件架构开发，深度依赖 Android 和 iOS 的原生能力（如原生渲染引擎、本地数据库、音视频编解码），因此仅支持打包为 **App (Android/iOS)**。
+7. 在弹出的表单中选择您之前创建的 App Group，单击 Continue 返回编辑页，单击 Save 保存。
 
-#### **Q：我的现有项目全是** `.vue` **页面（Webview 渲染），能直接集成吗？**
+##### **步骤2：配置屏幕共享扩展。**
 
-A：**可以混用，但需要注意页面模式。**
+2. 在 `nativeResources/ios` 下新建 `ios-extension.json` 文件，配置文件内容如下：
 
-nvue 页面和 vue 页面可以互相跳转，但是 vue 页面的子组件不建议是 nvue 组件。TUIKit 的 UI 组件是 nvue 组件，因此使用 TUIKit 所在的**页面（pages）**必须也是 nvue 文件。
+   |参数|说明|
+   |---------|---------|
+   |identifier|步骤1中 Apple 开发者后台创建的 Extension 的 Bundle ID。|
+   |profile|`nativeResources/ios` 下的 .mobileprovision 的文件名。|
+   |entitlements.com.apple.security.application-groups|步骤1中 Apple 开发者后台创建的 App Group ID。|
 
-#### **Q：页面样式错乱、布局塌陷？**
-
-A：**没有严格遵守 nvue 的 Flex 布局规范。**
-
-nvue 页面中：
-- 默认 `flex-direction` 是 `column`（纵向），而非 Web 的 `row`。
-
-- 文本必须包裹在 `<text>` 组件中，不能直接写在 `<div>` 或 `<view>` 里。
-
-- 不支持简写属性（例如 `margin: 10px 20px`），必须写全（`margin-top`, `margin-left` 等）。
+   ``` java
+    {
+      "ScreenShareExtension.appex": {
+        "identifier": "xxx",
+        "profile": "xxx.mobileprovision",
+        "entitlements": {
+          "com.apple.security.application-groups": ["xxx"]
+        }
+      }
+    }
+   ```
+
+3. 在 `nativeResources/ios` 下新建 UniApp.entitlements 文件，配置文件内容如下：
+
+   |**参数**|**说明**|
+   |---------|---------|
+   |com.apple.security.application-groups|步骤1中 Apple 开发者后台创建的 App Group ID。|
+
+   ``` xml
+   <?xml version="1.0" encoding="UTF-8"?>
+   <plist version="1.0">
+    <dict>
+      <key>com.apple.security.application-groups</key>
+      <array>
+        <string>xxx</string>
+      </array>
+    </dict>
+   </plist>
+   ```
+
+4. 在 项目根目录下新建 `Info.plist` 文件，配置文件内容如下：
+
+   |**参数**|**说明**|
+   |---------|---------|
+   |TUIRoomAppGroup|步骤1中 Apple 开发者后台创建的 App Group ID。|
+
+   ``` xml
+   <?xml version="1.0" encoding="UTF-8"?>
+   <plist version="1.0">
+    <dict>
+      <key>TUIRoomAppGroup</key>
+      <string>xxx</string>
+    </dict>
+   </plist>
+   ```
+
+##### **步骤3：**重新制作自定义基座**。**
+
+点击**运行** > **运行到手机或模拟器** > **制作 iOS 自定义调试基座。**
 
-#### **Q：**运行报错 "uni is not defined" 或组件无法加载？
+## 常见问题
 
-A：请检查是否制作并使用了**自定义调试基座**。
+#### **该 TUIKit 插件是否支持编译到 H5 或微信小程序？**
 
-由于插件包含原生代码（Java/Objective-C），标准基座不包含这些原生库。
-- **解决步骤：** 请严格按照文档“运行和测试-步骤2”操作，在 HBuilderX 中点击 **运行** > **运行到手机或模拟器** > **制作自定义调试基座**。制作完成后，运行时请务必选择**运行到 Android/iOS 基座**，并勾选“使用自定义基座”。
+**不支持。**由于新版 TUIKit 基于 **UTS (Uni-app Type Script)** 插件架构开发，深度依赖 Android 和 iOS 的原生能力（如原生渲染引擎、本地数据库、音视频编解码），因此仅支持打包为 **App (Android/iOS)**。
 
-#### **Q：制作自定义基座时一直失败或卡顿怎么办？**
+#### **我的现有项目全是** `.vue` **页面（Webview 渲染），能直接集成吗？**
 
-A：这通常是本地原生编译环境（Gradle 或 CocoaPods）配置问题导致的。
-- **Android：** 请检查本地 JDK 版本是否兼容，以及网络是否能正常访问 Maven/Google 仓库。
+**可以混用，但需要注意页面模式。**
 
-- **iOS：** 请确保已安装 CocoaPods 且版本更新，同时检查网络环境是否能访问 GitHub 或 CDN 库。
+nvue 页面和 vue 页面可以互相跳转，但是 vue 页面的子组件不建议是 nvue 组件。TUIKit 的 UI 组件是 nvue 组件，因此使用 TUIKit 所在的**页面（pages）**必须也是 nvue 文件。