@tencentcloud/sdk-mcp 1.3.9 → 1.4.0

package/resource/doc/roomkit/ios/integration.md

@@ -0,0 +1,384 @@
+TUIRoomKit 是腾讯云提供的一站式多人音视频房间解决方案，集成了完整的 UI 组件和核心功能。通过本文档，开发者可以快速了解如何将 TUIRoomKit 集成到项目中，实现多人音视频房间功能。本文还将详细介绍如何快速替换图片资源、本地化文案等个性化配置，帮助开发者打造符合品牌特色的音视频应用。
+| 房间准备页 | 标准房间主页 | 大型研讨会房间主页 | 成员管理 |
+| --- | --- | --- | --- |
+|  |  |  |  |
+
+## 前提条件
+
+### 开通服务
+
+请参考 开通服务 领取 `TUIRoomKit` 体验版，并在 [应用管理](https://console.cloud.tencent.com/trtc) 页面获取以下信息：
+- **SDKAppID**：应用标识（必填），腾讯云基于 SDKAppID 完成计费统计。
+
+- **SDKSecretKey**：应用密钥，用于初始化配置文件的密钥信息。
+
+### 环境准备
+
+在开始运行 Demo 之前，请确保您的开发环境满足以下要求：
+- **Xcode**：需使用 **Xcode 15 **或更高版本。
+
+- **iOS 系统**：支持 **iOS 13.0 **或更高版本的设备。
+
+- **CocoaPods 环境**：已安装 CocoaPods 环境。如果您尚未安装，请参见 [CocoaPods官网安装](https://guides.cocoapods.org/using/getting-started.html)，或按以下步骤操作：
+
+  - **使用 gem 安装 CocoaPods**：在终端中执行 `sudo gem install cocoapods` 命令进行安装。
+
+      > **提示：**
+      >
+
+      > `sudo gem install cocoapods` 安装过程中可能需要输入电脑密码，按提示输入管理员密码即可。
+      >
+
+## 快速接入
+
+### 步骤1：集成 TUIRoomKit 组件
+1. **添加 Pod 依赖：**
+
+  - **若项目已有 Podfile 文件。**
+
+      在您项目的 `Podfile` 文件中添加 `pod 'TUIRoomKit'` 依赖。例如：
+
+      ``` ruby
+        target 'YourProjectTarget' do
+          # 其他已有的 Pod 依赖...
+          # 添加 pod 'TUIRoomKit' 依赖
+          pod 'TUIRoomKit'
+
+        end
+      ```
+  - **若项目没有 Podfile 文件。**
+
+      在终端中通过 `cd` 命令切换到您的 `.xcodeproj` 目录下，然后执行 `pod init` 命令创建 `Podfile` 文件，创建完成后，在您的 `Podfile` 文件中添加 `pod 'TUIRoomKit'` 依赖。例如：
+
+      ``` bash
+      // 如果您的项目目录是 /Users/yourusername/Projects/YourProject
+
+      // 1. cd 到您的.xcodeproj 工程目录下
+      cd /Users/yourusername/Projects/YourProject
+
+      // 2. 执行 pod init，此命令运行完后，会在您的工程目录下生成一个 Podfile 文件。
+      pod init
+
+      // 3. 在生成的 Podfile 文件中添加 pod 'TUIRoomKit' 依赖
+        target 'YourProjectTarget' do
+          # 添加 pod 'TUIRoomKit' 依赖
+          pod 'TUIRoomKit'
+
+        end
+      ```
+2. **安装组件**：
+
+   在终端中 `cd` 到 `Podfile` 文件所在的目录，然后执行以下命令安装组件。
+
+   ``` bash
+   pod install
+   ```
+
+### 步骤2：工程配置
+
+为了使用音视频功能，您的应用需要获取麦克风和摄像头的权限。请在应用的 `Info.plist` 文件中添加以下两项，并填写对应的使用说明，这些说明将在系统请求权限时向用户显示：
+``` ruby
+<key>NSCameraUsageDescription</key>
+<string>TUIRoomKit需要访问您的相机权限</string>
+<key>NSMicrophoneUsageDescription</key>
+<string>TUIRoomKit需要访问您的麦克风权限</string>
+```
+
+### 步骤3：登录
+
+代码集成完成后，需要完成登录操作，这是**使用 **`TUIRoomKit`** 的关键步骤**。只有在登录成功后，才能正常使用 `TUIRoomKit` 的各项功能，因此请仔细检查相关参数配置是否正确：
+
+> **说明：**
+>
+
+> 在示例代码中，登录操作是在 `didFinishLaunchingWithOptions` 方法内完成的。但在实际项目场景下，强烈推荐**在完成自己的用户身份验证等相关登录操作后，再调用 AtomicXCore 的登录服务**。这样可以避免因过早调用登录服务，导致业务逻辑混乱或数据不一致的问题，同时也能更好地适配您项目中现有的用户管理和权限控制体系。
+>
+
+【Swift】
+``` swift
+import AtomicXCore
+
+//  AppDelegate.swift
+func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+    LoginStore.shared.login(sdkAppID: 1400000001,                  // 替换为项目的 sdkAppID
+                            userID: "test_001",                    // 替换为项目的 userID
+                            userSig: "xxxxxxxxxxx") { result in    // 替换为项目的 userSig
+      switch result {
+        case .success(let info):
+        debugPrint("login success")
+        case .failure(let error):
+        debugPrint("login failed code:\(error.code), message:\(error.message)")
+      }
+    }
+    return true
+}
+```
+
+**登录接口参数说明：**
+| 参数 | 类型 | 说明 |
+| --- | --- | --- |
+| `sdkAppID` | `Int32` | 从 [控制台](https://console.cloud.tencent.com/trtc) 获取，通常是以 `140` 或 `160` 开头的 10 位整数。 |
+| `userID` | `String` | 当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突，**请勿使用**`1`、`123`**等简单 ID**。 |
+| `userSig` | `String` | 用于腾讯云鉴权的票据。更多信息请参见 如何计算及使用 UserSig。<br>**注意：**<br>- 开发环境：可以采用本地 `GenerateTestUserSig.genTestSig` 函数生成 userSig 或者通过 [UserSig 辅助工具](https://console.cloud.tencent.com/im/tool-usersig) 生成临时的 userSig。<br>- 生产环境：为了防止密钥泄露，请务必采用服务端生成 userSig 的方式。详细信息请参考 服务端生成 UserSig。 |
+
+### 步骤4：设置头像和昵称
+
+首次登录的用户没有头像和昵称信息，需要通过 `LoginStore` 的 `setSelfInfo` 接口设置个人信息：
+``` swift
+import AtomicXCore
+
+func setSelfInfo() {
+    let userProfile = UserProfile(userID: "test_001",        // 您已经登录的userID
+                                nickname: "tom",             // 设置昵称
+                               avatarURL: "http://xxx.png")  // 设置头像URL
+    LoginStore.shared.setSelfInfo(userProfile: userProfile) { result in
+      switch result {
+      case .success():
+        debugPrint("setSelfInfo success")
+      case .failure(let error):
+        debugPrint("setSelfInfo failed code:\(error.code), message:\(error.message)")
+      }
+    }
+}
+```
+
+**setSelfInfo接口参数说明：**
+| 参数 | 类型 | 必填 | 说明 |
+| --- | --- | --- | --- |
+| `userProfile` | `UserProfile` | 是 | 个人用户信息核心模型，包含：<br>- userID：要设置用户信息的用户 ID。<br>- nickname：昵称信息。<br>- avatarURL：头像链接。 |
+| `completion` | `CompletionClosure` | 否 | 设置个人信息接口的结果回调。若失败会返回错误码和错误信息。 |
+
+### 步骤5：创建房间
+
+在 `TUIRoomKit` 组件中，`RoomMainView` 是集成了完整的多人音视频房间功能的核心界面，以下将向开发者演示如何以房主身份将 `RoomMainView` 嵌入到应用中。
+
+#### **实现方式：**
+1. **遵守路由导航协议**：`TUIRoomKit` 内部使用 `RouterContext` 协议管理页面间的路由跳转。宿主视图控制器需要声明遵循该协议，以确保组件内部的导航操作（如结束房间、返回上一页）能够正确执行。
+
+2. **懒加载创建视图页面**：在控制器内部以懒加载方式实例化 `RoomMainView`，并为其设置 `routerContext` 属性。该属性使得视图能够通过协议方法调用宿主控制器的导航功能。
+
+3. **构造进房的配置项**：进入房间后是否需要自动打开音视频设备的配置项。
+
+4. **初始化房间主页面**：通过房主身份初始化房间主页面。
+
+5. **将视图添加到控制器**：在控制器的 `viewDidLoad` 方法中，将 `RoomMainView` 加入视图层级，并使用约束布局使其充满整个控制器视图区域。
+
+   > **说明：**
+   >
+>   - `TUIRoomKit` 的内部页面跳转机制基于 `UINavigationController` 的标准导航方法（push/pop）实现。为确保页面路由功能正常工作，开发者的视图控制器必须作为 `UINavigationController` 的根视图控制器或位于其导航栈内。若未将控制器包装至 `UINavigationController` 中，SDK 内部的跳转操作将因缺少有效的导航上下文而失效，导致页面无法正常切换。
+>   - 移动端仅支持创建标准房间，如果您需要创建大型研讨会房间，请参考 Web 快速接入 使用 Web 端创建。
+
+#### **示例代码：**
+``` swift
+import UIKit
+import TUIRoomKit
+import SnapKit
+import AtomicXCore
+
+// YourMainViewController 代表您加载房间主页面的视图控制器
+
+// 1. YourMainViewController 需要遵守 TUIRoomKit 组件中的 RouterContext 协议
+class YourMainViewController: UIViewController, RouterContext {
+
+    // 2. 懒加载创建 TUIRoomKit 中的 RoomMainView 房间主页面
+    private lazy var mainView: RoomMainView = {
+        // 3. 构造进房的配置项
+        var config = ConnectConfig()
+        config.autoEnableCamera = true      // 进房后是否自动开启摄像头
+        config.autoEnableMicrophone = true  // 进房后是否自动开启麦克风
+        config.autoEnableSpeaker = true     // 进房后是否自动开启扬声器
+
+        // 4 房主身份初始化房间主页面
+        var options = CreateRoomOptions()
+        options.roomName = "roomName"       // 房间名称
+
+        let view = RoomMainView(roomID: "roomID", behavior: .create(options: options), config: config)
+        view.routerContext = self
+        return view
+    }()
+
+    public override func viewDidLoad() {
+        super.viewDidLoad()
+        // 5. 将 RoomMainView 对象 添加到视图控制器中
+        view.addSubview(mainView)
+        mainView.snp.makeConstraints { make in
+            make.edges.equalToSuperview()
+        }
+    }
+}
+```
+
+**RoomMainView 构造函数参数详细说明：**
+| 参数 | 类型 | 说明 |
+| --- | --- | --- |
+| `roomID` | `String` | - 字符串类型的房间唯一标识符。<br>- 限制长度为 0-48 字节。<br>- 建议仅包含数字、英文字母（区分大小写）、下划线（_）和连字符（-）。避免使用空格和中文字符。 |
+| `behavior` | `RoomBehavior` | 房间主页面初始化来源。<br>- create：房主身份创建房间的方式需要构造创建房间配置项。<br>- 关于 `CreateRoomOptions` 的详细用法请参考：CreateRoomOptions 结构体详细说明。<br>- join：参与者身份加入房间。 |
+| `config` | `ConnectConfig` | 进房后音视频设备控制的配置项。 |
+
+**ConnectConfig 参数详细说明****：**
+| 参数 | 类型 | 说明 |
+| --- | --- | --- |
+| autoEnableMicrophone | `Bool` | 进房后是否自动开启麦克风。<br>- true：自动开启 （默认值）。<br>- false：不自动开启。 |
+| autoEnableCamera | `Bool` | 进房后是否自动开启摄像头。<br>- true：自动开启 （默认值）。<br>- false：不自动开启。 |
+| autoEnableSpeaker | `Bool` | 进房后是否自动开启扬声器。<br>- true：自动开启 （默认值）。<br>- false：不自动开启。 |
+
+### 步骤6：加入房间
+
+以下示例将向开发者演示如何以参与者身份将`RoomMainView`嵌入到应用中。
+
+#### **实现方式：**
+1. **遵守路由导航协议**：`TUIRoomKit` 内部使用 `RouterContext` 协议管理页面间的路由跳转。宿主视图控制器需要声明遵循该协议，以确保组件内部的导航操作（如结束房间、返回上一页）能够正确执行。
+
+2. **懒加载创建视图页面**：在控制器内部以懒加载方式实例化 `RoomMainView`，并为其设置 `routerContext` 属性。该属性使得视图能够通过协议方法调用宿主控制器的导航功能。
+
+3. **构造进房的配置项**：进入房间后是否需要自动打开音视频设备的配置项。
+
+4. **初始化房间主页面**：通过参与者身份初始化房间主页面。
+
+5. **将视图添加到控制器**：在控制器的 `viewDidLoad` 方法中，将 `RoomMainView` 加入视图层级，并使用约束布局使其充满整个控制器视图区域。
+
+#### 代码示例：
+``` swift
+import UIKit
+import TUIRoomKit
+import SnapKit
+import AtomicXCore
+// YourMainViewController 代表您加载房间主页面的视图控制器
+
+// 1. YourMainViewController 需要遵守 TUIRoomKit 组件中的 RouterContext 协议
+class YourMainViewController: UIViewController, RouterContext {
+
+    // 2. 懒加载创建 TUIRoomKit 中的 RoomMainView 房间主页面
+    private lazy var mainView: RoomMainView = {
+        // 3. 构造进房的配置项
+        var config = ConnectConfig()
+        config.autoEnableCamera = true      // 进房后是否自动开启摄像头
+        config.autoEnableMicrophone = true  // 进房后是否自动开启麦克风
+        config.autoEnableSpeaker = true     // 进房后是否自动开启扬声器
+
+        // 4. 参与者身份初始化房间主页面
+         let view = RoomMainView(roomID: "roomID", behavior: .join, config: config)
+        view.routerContext = self
+        return view
+    }()
+
+    public override func viewDidLoad() {
+        super.viewDidLoad()
+
+        // 5. 将 RoomMainView 对象 添加到视图控制器中
+        view.addSubview(mainView)
+        mainView.snp.makeConstraints { make in
+            make.edges.equalToSuperview()
+        }
+    }
+}
+```
+
+**参数详细说明请参考：**
+
+[RoomMainView 构造函数参数详细说明]( 构造函数参数详细说明)和 [ConnectConfig 参数详细说明]( 参数详细说明)
+
+> **说明：**
+>
+
+> 使用 **TUIRoomKit** 组件进入大型研讨会房间时，需确保Web端创建的研讨会房间的房间ID以 `webinar_` 开头。
+>
+
+## 核心功能
+
+接入`RoomMainView`代码后，开发者将得到一个完整的多人音视频页面，内部包含成员管理，音视频设备控制，房间信息展示等功能，这是 `TUIRoomKit` 组件的核心。
+| 标准房间 | 大型研讨会房间 |
+| --- | --- |
+|  |  |
+
+## 界面定制
+
+> **注意：**
+>
+
+> 界面定制、图标定制、文案定制这部分章节内容，涉及到需要修改`TUIRoomKit` 组件源码，通过 **CocoaPods** 依赖管理器集成`TUIRoomKit`将被视为“不可变”的依赖项。每次执行 pod install 时，**CocoaPods** 会：
+>
+> - 检查 Podfile.lock 中记录的版本号。
+> - 从远程仓库重新下载对应版本的源码。
+> - 用下载的原始代码覆盖 Pods/ 目录下的现有文件。
+
+> **因此，任何对 Pods/ 目录的手动修改都只是临时性的，下次执行安装命令时即被还原。**
+>
+
+> **推荐解决方案：**
+>
+> - Fork [TUIRoomKit](https://github.com/Tencent-RTC/TUIKit_iOS) 的官方仓库。
+> - 在 fork 的仓库中修复问题并提交。
+> - 修改 Podfile，指向自定义仓库和分支。
+> `pod 'TUIRoomKit', :git => 'https://github.com/your-username/TUIRoomKit.git', :branch => 'your-branch'`
+
+`RoomMainView`房间主页面内功能丰富，可定制化度高，开发者可以根据实际产品需求，对 UI 进行定制化修改，以适配业务交互场景。以下将详细为开发者展示`RoomMainView`页面中视图组件，便于开发者快速修改。
+| 标准房间 | 大型研讨会房间 |
+| --- | --- |
+|  |  |
+
+`RoomMainView`**中的组件详细说明**
+| 组件 | 功能描述 | 定制化建议 |
+| --- | --- | --- |
+| [RoomMainView](https://github.com/Tencent-RTC/TUIKit_iOS/blob/main/room/Source/View/RoomMainView.swift) | 房间主视图容器，负责协调各子组件的布局与数据流转。 | 可调整整体背景、安全区域适配、组件显隐逻辑。 |
+| [RoomTopBarView](https://github.com/Tencent-RTC/TUIKit_iOS/blob/main/room/Source/View/Main/RoomTopBarView.swift) | 顶部导航栏，包含房间信息、摄像头和声音控制、退出房间功能入口。 | 可替换图标、调整背景透明度、添加自定义按钮（例如录制、 窗口化）。 |
+| [RoomView](https://github.com/Tencent-RTC/TUIKit_iOS/blob/main/room/Source/View/Main/RoomView.swift) | 视频流展示区域，采用瀑布流布局管理多个用户视频画面。 | 可修改布局算法（行列数、间距）、分页指示器样式、空状态视图。 |
+| [RoomViewVideoStreamCell](https://github.com/Tencent-RTC/TUIKit_iOS/blob/main/room/Source/View/Main/RoomView/RoomViewCell.swift) | 单个视频流单元格，承载用户视频画面与基本信息。 | 可自定义视频渲染层、用户信息面板（头像、徽章）、互动控件（语音波形）。 |
+| [RoomBottomBarView](https://github.com/Tencent-RTC/TUIKit_iOS/blob/main/room/Source/View/Main/RoomBottomBarView.swift) | 底部工具栏，集成麦克风、摄像头、成员管理操作按钮。 | 可重新排列按钮顺序、修改按钮样式（颜色、尺寸）、添加业务相关功能（例如屏幕分享、会中呼叫、美颜）。 |
+
+## 图标定制
+
+接入 `TUIRoomKit` 组件后，开发者可以根据实际 UI 交互需求直接替换组件下的图标资源， 以适配开发者的业务场景。
+
+`TUIRoomKit` 使用 `TUIRoomKit.xcassets`管理 UI 所需的图片资源，您可以借助 Xcode 图形化工具快速修改自定义界面所需的图标。
+
+**常用的图片文件列表**
+| 图标 | 文件名 | 说明 |
+| --- | --- | --- |
+|  | camera_close.png | 摄像头关闭图标 |
+|  | camera_open.png | 摄像头开启图标 |
+|  | room_mic_off_red.png | 麦克风关闭图标 |
+|  | room_mic_on_big.png | 麦克风开启图标 |
+|  | room_admin_tag.png | 管理员身份标识图标 |
+|  | room_owner_tag.png | 房主身份标识图标 |
+
+## 文案定制
+
+`TUIRoomKit` 使用更为方便的 [Apple Strings Catalog](https://developer.apple.com/documentation/xcode/localizing-and-varying-text-with-a-string-catalog) 工具来管理 UI 所需的文案显示，您可以很直观的通过  Xcode 视图化管理工具修改需要调整的文案：
+
+> **说明：**
+>
+
+> [Apple Strings Catalog](https://developer.apple.com/documentation/xcode/localizing-and-varying-text-with-a-string-catalog) (.xcstrings) 是在 Xcode 15 中引入的本地化格式。它增强了开发者管理本地化字符串的方式，支持处理复数、设备特定变体等的结构化格式。这种格式正成为管理 iOS 和 macOS 应用程序本地化的推荐方法。
+>
+
+## 常见问题
+
+### pod install 执行后本地安装找不到 TUIRoomKit 最新版本？
+
+如果无法安装 `TUIRoomKit` 最新版本，请按以下步骤操作：
+1. 在 Podfile 所在目录下删除 `Podfile.lock`和 `Pods`，您可以选择手动删除或终端执行以下命令：
+
+   ``` bash
+   // cd 到 Podfile 所在目录下
+
+   rm -rf Pods/
+   rm Podfile.lock
+   ```
+2. 在 Podfile 所在目录下执行 `pod install --repo-update`：
+
+   ``` bash
+   // cd 到 Podfile 所在目录下
+
+   pod install --repo-update
+   ```
+
+### 每次进房都需要调用登录吗？
+
+不需要。通常您只需要完成一次 `LoginStore.shared.login` 调用即可，我们建议您将 `LoginStore.shared.login` 和
+
+`LoginStore.shared.logout` 与自己的登录业务关联。
+
+### Podfile 文件有没有示例配置可以参考？
+
+您可以参考 [GitHub TUIKit_iOS Example](https://github.com/Tencent-RTC/TUIKit_iOS/tree/main/application) 工程 `Podfile` 示例文件。

package/resource/doc/roomkit/vue/faq.md

@@ -0,0 +1 @@
+

package/resource/doc/roomkit/vue/features/call-user-to-room.md

@@ -7,26 +7,21 @@
 
 - **互联网医疗会诊：**首诊医生在病历分析过程中，通过呼叫功能邀请上级医生进入虚拟诊室进行多方会诊，或者医生呼叫在等候室的患者进行问诊。
 
-
 ## 前提条件
 
 在接入功能前，请确保满足以下条件：
-- **邀请者 (User A)：**用户已经通过 `useLoginState` 完成登录鉴权，参考 [接入概览](https://write.woa.com/document/197379797539790848)，并已作为一个房间的房主或成员在房间内，参考 [房间周期](https://write.woa.com/document/197379861957083136)。
+- **邀请者 (User A)：**用户已经通过 `useLoginState` 完成登录鉴权，参考 接入概览，并已作为一个房间的房主或成员在房间内，参考 房间周期。
 
-- **被邀请者 (User B)：**用户已经通过 `useLoginState` 完成登录鉴权，参考 [接入概览](https://write.woa.com/document/197379797539790848)，以便接收信令事件。
+- **被邀请者 (User B)：**用户已经通过 `useLoginState` 完成登录鉴权，参考 接入概览，以便接收信令事件。
 
 - **环境依赖：**项目已正确安装并引入 `tuikit-atomicx-vue3`。
 
-
 ## 实现会中呼叫功能
 
 实现会中呼叫的核心流程如下：
 
-![会中呼叫时序图](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/82ba8603dee611f0a4f35254007c27c5.png)
-
 会中呼叫时序图
 
-
 ### 步骤1：发起呼叫（邀请者）
 
 邀请者调用 [callUserToRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#callUserToRoom) 接口发起邀请。请确保邀请者当前已在房间内（即 [currentRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#currentRoom) 不为空），否则无法发起呼叫。
@@ -48,9 +43,9 @@ const inviteUser = async () => {
       userIdList: ['user1', 'user2'],    // 目标用户 ID 数组，支持单人或多人
       timeout: 60,                        // 邀请有效时长（秒），超时后双方会触发 onCallTimeout
       // extensionInfo 可用于传递业务自定义数据，例如邀请类型、附加消息等
-      extensionInfo: JSON.stringify({ type: 'emergency', priority: 'high' }) 
+      extensionInfo: JSON.stringify({ type: 'emergency', priority: 'high' })
     });
-    
+
     // resultMap 返回每个 userId 对应的状态，例如 Success、AlreadyInRoom (已在房) 或 AlreadyInCalling (通话中)
     console.log('邀请发送完成，详情状态映射:', resultMap);
   } catch (error) {
@@ -66,13 +61,13 @@ const inviteUser = async () => {
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useRoomState, RoomEvent } from 'tuikit-atomicx-vue3/room';
 
-const { 
-  subscribeEvent, 
-  unsubscribeEvent, 
-  acceptCall, 
-  rejectCall, 
-  joinRoom, 
-  currentRoom 
+const {
+  subscribeEvent,
+  unsubscribeEvent,
+  acceptCall,
+  rejectCall,
+  joinRoom,
+  currentRoom
 } = useRoomState();
 
 const showInviteDialog = ref(false); // 控制 UI 弹窗显隐
@@ -98,9 +93,9 @@ const onUserAccept = async () => {
   try {
     // 关键流程 A：响应信令。告知邀请者已接受，使其能更新 UI（例如显示“对方已接听”）
     await acceptCall({ roomId });
-    
+
     // 关键流程 B：执行进房。只有调用 joinRoom 才会真正开启音视频推拉流链路
-    await joinRoom({ roomId }); 
+    await joinRoom({ roomId });
   } catch (error) {
     console.error('接受呼叫后的进房操作失败:', error);
   } finally {
@@ -125,7 +120,7 @@ const closeDialog = () => {
 // 事件全生命周期管理：确保在组件挂载时监听，销毁时移除，防止事件溢出
 onMounted(() => {
   subscribeEvent(RoomEvent.onCallReceived, handleCallReceived);
-  
+
   // 监听导致邀请结束的各种异常/同步事件，确保 UI 弹窗能及时闭合
   subscribeEvent(RoomEvent.onCallCancelled, closeDialog); // 邀请者取消了呼叫
   subscribeEvent(RoomEvent.onCallTimeout, closeDialog);   // 呼叫超时未响应
@@ -152,13 +147,11 @@ onUnmounted(() => {
 
 - **听觉提醒**：在 `onCallReceived` 事件触发时播放高优先级的提示铃声。注意：需遵循浏览器的 [自动播放策略](https://developer.mozilla.org/zh-CN/docs/Web/Media/Guides/Autoplay)，大部分浏览器在缺乏用户交互（例如点击、触摸或按键）的情况下会限制音频自动播放。
 
-
 ### 2. 丰富邀请上下文（提升接听意愿）
 
 缺乏明确意图的邀请容易被用户拒绝。建议充分利用 `extensionInfo` 字段传递关键业务信息，以提升用户的接听意愿。
 - **传递业务上下文**：利用 `extensionInfo` 透传如 `reason`（例如：“项目紧急评审”）、`level`（例如：“P0故障排查”）等业务字段，告知用户呼叫的紧迫性和重要性。
 
-
 ### 3. 多通道触达兜底（确保消息可达）
 
 受限于 Web 端机制，浏览器进程结束将无法接收实时信令。建议采取以下替代方案以确保触达：
@@ -166,91 +159,62 @@ onUnmounted(() => {
 
 - **多通道触达**：建议结合业务后端逻辑，在检测到用户不在线或超时未响应时，通过**短信**、**邮件**或**企业微信**等外部渠道发送入会链接，实现全方位触达。
 
-
 ### 4. 智能重试机制（解决“接受邀请后进房失败”）
 
 在弱网或其他不稳定环境下，用户点击接受邀请后调用 `joinRoom` 可能会出现偶发性失败。
 - **自动重试**：建议在 `onUserAccept` 的异常处理逻辑（`catch`）中引入 2-3 次自动重试机制（推荐结合指数退避策略），以最大程度确保用户点击“接受”后能成功加入会议。
 
-
 ## 开发注意事项
 1. **接受邀请不等于进房**
 
-
    `acceptCall` 仅仅是信令层面的回复（告知对方已接听）。用户必须在调用 `acceptCall` 后紧接着手动调用 `await joinRoom({ roomId })` 才能真正进入音视频房间。
 
 2. **生命周期管理**
 
-
    请务必在组件销毁周期（`onUnmounted`）调用 `unsubscribeEvent`。如果不清理监听器，当用户切换页面时，旧页面的监听器会残留在内存中，导致一次邀请弹出多个窗口或逻辑重复执行。
 
 3. **超时设置**
 
-
    如果不设置 `timeout` 参数，在某些网络异常或程序崩溃情况下，邀请可能长期处于挂起状态，导致无法再次对该用户发起呼叫。建议设置为 30-60 秒。
 
-
 ## 常见问题
 1. **如何在呼叫时带上自定义参数（如“来自XX的紧急会议”）？**
 
-
    使用 `callUserToRoom` 的 `extensionInfo` 参数传递 JSON 字符串。被邀请者可以在 `onCallReceived` 事件的 `extensionInfo` 字段中解析该字符串获取业务信息。
 
 2. **被邀请者如果不在线，上线后能收到邀请吗？**
 
-
    不可以。邀请事件是一个瞬时信令动作，SDK 目前不会补发离线期间收到的呼叫通知。
 
 3. **可以取消已发出的邀请吗？**
 
-
    可以。调用 `cancelCall({ roomId, userIdList })` 即可撤销。此时被邀请者会收到 `onCallCancelled` 事件，您需要监听此事件来关闭被邀请端的 UI 弹窗。
 
 4. **接受后进房失败怎么办？**
 
-
    检查是否已登录 `TUIRoomEngine`，重试 `joinRoom({ roomId })` 并捕获错误提示用户；必要时在 UI 上提供“重试”按钮。
 
 5. **对方忙线或已在其他房间如何提示？**
 
-
    `callUserToRoom` 的返回值 `resultMap` 中若出现 `AlreadyInRoom` / `AlreadyInCalling`，应在邀请者 UI 提示“对方忙线/已在会中”，并决定是否稍后重试。
 
 6. **超时/取消后弹窗不关闭？**
 
-
    确保监听 `onCallTimeout`、`onCallCancelled`、`onCallHandledByOtherDevice`，统一在回调里关闭弹窗、清理当前邀请数据。
 
 7. **多设备同时响铃如何处理？**
 
-
    在任意设备接受/拒绝后，其余设备会收到 `onCallHandledByOtherDevice`，需关闭其他端弹窗避免重复处理。
 
 8. **extensionInfo 该怎么约定？**
 
-
    建议使用 JSON 字符串并约定字段（例如 `type`、`priority`、`from`），在 `handleCallReceived` 时解析后展示友好文案（例如“来自XX的紧急会议”）。
 
-
 ## **示例项目**
 
 腾讯云在 GitHub 上提供了示例项目 [atomicx-vite-vue3-ts](https://github.com/Tencent-RTC/TUIRoomKit/tree/main/Web/example/atomicx-vite-vue3-ts) ，您可以参考以实现完整的 RoomKit 功能。
 
 ## API 文档
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**State/Component**</td>
-
-<td rowspan="1" colSpan="1" >**功能描述**</td>
-
-<td rowspan="1" colSpan="1" >**API 文档**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useRoomState**</td>
-
-<td rowspan="1" colSpan="1" >房间状态管理（创建、加入、预约等）</td>
-
-<td rowspan="1" colSpan="1" >[API 文档](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState)</td>
-</tr>
-</table>
+| **State/Component** | **功能描述** | **API 文档** |
+| --- | --- | --- |
+| **useRoomState** | 房间状态管理（创建、加入、预约等） | [API 文档](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) |