@tencentcloud/sdk-mcp 1.6.4 → 1.6.5

package/resource/integration/roomkit/preset/vue/integration.md

@@ -1,106 +1,440 @@
-TUIRoomKit 是腾讯云推出的音视频房间 UI 应用。本次升级引入了全新的原子化组件接入方案，开发者可以灵活组合这些原子化组件，以构建个性化的音视频房间界面。
+本文档介绍如何在 Vue 3 业务项目中集成 TUIRoomKit，快速获得开箱即用的多人音视频会议能力。
 
-> 推荐使用更高效的 AI 集成助手
->
+<style>
+.vsdk-survey-card * {
+  box-sizing: border-box;
+}
 
-> 我们为您提供了全新的 AI 集成方式，只需要描述您的需求，即可自动生成集成代码，大幅提升开发效率。
->
+.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;
+}
 
-> 点击这里，立即体验 AI 集成
->
+.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;
+}
 
-本文档介绍如何将 TUIRoomKit 集成到现有的 Vue3 项目中，同时介绍如何对 TUIRoomKit 的样式、布局及功能进行自定义修改。
-- 桌面端多人会议
+.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;
+}
 
-- H5 多人会议
+.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">
+缺少您想要的功能？
+<span class="vsdk-badge">优先内测</span>
+</div>
+
+<div class="vsdk-desc">
+如果您在使用视频会议 SDK 时遇到过问题，或希望支持新的能力，欢迎与我们分享。<br />
+您的反馈将帮助我们持续优化产品，并优先邀请有相关需求的用户参与新功能内测。
+</div>
+
+</div>
+
+</div>
+
+<div class="vsdk-card-right">
+<a class="vsdk-cta" href="https://wj.qq.com/s2/27306813/b61d/" target="_blank">
+填写问卷
+</a>
+</div>
+
+</div>
 
 ## 前提条件
 
 ### 开通服务
 
 请参考 [开通服务](https://cloud.tencent.com/document/product/647/104842) 领取 TUIRoomKit 体验版或开通 TUIRoomKit 正式版，并在 [应用管理](https://console.cloud.tencent.com/trtc) 页面获取以下信息:
-- SDKAppID: 应用标识，腾讯云基于 `SDKAppID` 完成计费统计。
+- **SDKAppID:** 应用标识，腾讯云基于 `SDKAppID` 完成计费统计。
 
-- SDKSecretKey: 应用密钥，用于初始化配置文件的密钥信息。
+- **SDKSecretKey:** 应用密钥，用于本地调试时生成 UserSig。
 
 ### 环境准备
-- Node.js: ≥ 18.19.1 (推荐使用官方 LTS 版本)。
+- **Node.js:** ≥ 18.19.1 (推荐使用官方 LTS 版本)。
+
+- **浏览器：**推荐使用最新版 Chrome，或其他支持 [WebRTC API](https://cloud.tencent.com/document/product/647/17249#.E6.94.AF.E6.8C.81.E7.9A.84.E5.B9.B3.E5.8F.B0) 的浏览器。
 
-- Vue: ≥ 3.4.21。
+- **媒体设备：**建议配备摄像头、麦克风和扬声器。缺少相应设备时仍可入会，但对应音视频能力不可用。
 
-- 现代浏览器：支持 [WebRTC APIs](https://cloud.tencent.com/document/product/647/17249#.E6.94.AF.E6.8C.81.E7.9A.84.E5.B9.B3.E5.8F.B0) 的现代浏览器。
+### 准备 Vue3 项目
 
-- 设备：摄像头、麦克风、扬声器。
+若您尚未创建 Vue 3 项目，可先执行以下命令初始化；若已有 Vue 3 项目，可跳过本节。
+``` bash
+# 创建名为 roomkit-demo 的 Vue3 + TypeScript 项目
+npm create vite@5 roomkit-demo -- --template vue-ts
+# 进入项目目录
+cd roomkit-demo
+# 安装基础依赖
+npm install
+```
 
 ## 快速接入
 
-### 步骤1：安装项目依赖
+完成前提条件后，按以下步骤在 Vue 3 项目中快速完成 TUIRoomKit 接入，并体验会中能力。
+
+### 步骤1：安装 SDK 依赖
 
 在您的业务项目中安装以下依赖。
 
 【npm】
 ``` bash
-npm install @tencentcloud/roomkit-web-vue3@5 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
+npm install @tencentcloud/roomkit-web-vue3 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
 ```
 
 【pnpm】
 ``` bash
-pnpm install @tencentcloud/roomkit-web-vue3@5 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
+pnpm install @tencentcloud/roomkit-web-vue3 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
 ```
 
 【yarn】
 ``` bash
-yarn add @tencentcloud/roomkit-web-vue3@5 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
+yarn add @tencentcloud/roomkit-web-vue3 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
 ```
 
-### 步骤2：引用 TUIRoomKit 组件
+### 步骤2：集成会中界面
+
+将以下示例代码复制至 `src/App.vue`，并根据控制台信息替换 `SDKAppID` 与 `SDKSecretKey`。
+
+> **注意**：
+>
+> 快速接入示例采用客户端生成 UserSig 的方式，**仅可用于本地开发调试**。正式环境请改为由业务服务端生成 UserSig，详见 [正式运行阶段如何计算 UserSig](https://cloud.tencent.com/document/product/647/17275#formal)。
+>
+
 ``` typescript
 <template>
   <UIKitProvider theme="light" language="zh-CN">
-    <ConferenceMainView v-if="isPC"></ConferenceMainView>
-    <ConferenceMainViewH5 v-else></ConferenceMainViewH5>
+    <ConferenceMainView v-if="inRoom && isPC" />
+    <ConferenceMainViewH5 v-else-if="inRoom" />
+    <div v-else class="entry">
+      <TUIInput v-model="entry.userId" placeholder="请输入用户 ID" />
+      <TUIInput v-model="entry.userName" placeholder="请输入昵称" />
+      <TUIInput v-model="entry.roomId" placeholder="如 123456" />
+      <TUIButton type="primary" :disabled="!entry.userId || !entry.roomId" @click="handleEnterRoom">进入会议</TUIButton>
+    </div>
   </UIKitProvider>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { ConferenceMainView, ConferenceMainViewH5 } from '@tencentcloud/roomkit-web-vue3';
+import { ref, onMounted, onUnmounted } from 'vue';
+import { UIKitProvider, TUIInput, TUIButton, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
+import { conference, ConferenceMainView, ConferenceMainViewH5, RoomEvent, genTestUserSig } from '@tencentcloud/roomkit-web-vue3';
 import { getPlatform } from '@tencentcloud/universal-api';
 
-const isPC = ref(getPlatform() === 'pc');
+const SDKAppID = 0; // 替换为您在开通服务阶段获取的 SDKAppID
+const SDKSecretKey = ''; // 替换为您在开通服务阶段获取的 SDKSecretKey
+
+const isPC = getPlatform() === 'pc';
+const inRoom = ref(false);
+const stored = JSON.parse(sessionStorage.getItem('tuiRoom-entry') || '{}');
+const entry = ref({ userId: stored.userId || '', userName: stored.userName || '', roomId: stored.roomId || '' });
+
+const handleEnterRoom = async () => {
+  sessionStorage.setItem('tuiRoom-entry', JSON.stringify(entry.value));
+  if (!SDKAppID || !SDKSecretKey) {
+    TUIToast.warning({ message: '请先在代码中配置 SDKAppID 和 SDKSecretKey' });
+    return;
+  }
+  try {
+    const { userSig } = genTestUserSig({ userId: entry.value.userId, sdkAppId: SDKAppID, secretKey: SDKSecretKey });
+    await conference.login({ sdkAppId: SDKAppID, userId: entry.value.userId, userSig });
+    await conference.setSelfInfo({ userName: entry.value.userName, avatarUrl: '' });
+    await conference.createAndJoinRoom({ roomId: entry.value.roomId, options: { roomName: `${entry.value.userName || entry.value.userId} 的会议` } });
+    inRoom.value = true;
+  } catch (error) {
+    console.error('进入会议失败:', error);
+  }
+};
+
+const handleLeave = () => { inRoom.value = false; };
+
+onMounted(() => {
+  conference.on(RoomEvent.ROOM_LEAVE, handleLeave);
+  conference.on(RoomEvent.ROOM_DISMISS, handleLeave);
+});
+
+onUnmounted(() => {
+  conference.off(RoomEvent.ROOM_LEAVE, handleLeave);
+  conference.off(RoomEvent.ROOM_DISMISS, handleLeave);
+});
 </script>
+
+<style>
+html, body, #app { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; }
+.entry { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; height: 100vh; width: 260px; margin: 0 auto; }
+</style>
+```
+
+### 步骤3：启动并验证
+
+【npm】
+``` bash
+npm run dev
+```
+
+【pnpm】
+``` bash
+pnpm run dev
+```
+
+【yarn】
+``` bash
+yarn run dev
+```
+
+启动成功后，在浏览器访问本地调试地址（通常为 `http://localhost:5173`），填写用户 ID 与房间号，点击 **进入会议**，即可进入 TUIRoomKit 会中界面。
+
+**验证多人会议：**建议打开两个浏览器标签页，分别模拟不同用户进入同一房间，验证音视频互通与会中功能。操作步骤如下：
+
+**步骤1：**打开两个浏览器标签页，分别填写用户 ID `userA`、`userB` 及相同房间号 `room_123456`，点击 **进入会议**。`userA` 先进入时将自动创建房间并成为房主；`userB` 后进入时将作为参会者加入。
+| 测试用户 A | 测试用户 B |
+| --- | --- |
+|  |  |
+
+**步骤2:** 测试用户均进入会中界面后，可在成员列表中互相看到对方；开启摄像头、麦克风，确认能否看到彼此的画面并听到声音。
+| 测试用户 A | 测试用户 B |
+| --- | --- |
+|  |  |
+
+**步骤3:** 您还可以体验屏幕共享、聊天、成员管理等会中能力，确认多人场景下的基础功能正常。
+
+## 接入详解
+
+快速接入章节以一体化示例帮助您完成首次进房体验。若需将会议能力集成至实际业务，可按会议流程分步集成。本节依次介绍 SDK 依赖安装、TUIRoomKit 组件引用、登录鉴权、创建与加入会议、离开会议、监听会议状态等核心能力的用法。
+
+> **推荐使用更高效的 AI 集成助手**
+>
+> 我们为您提供 AI 集成助手：描述业务需求即可自动生成集成代码；接入过程中遇到问题，也可向 AI 咨询答疑。点击这里，立即体验 AI 集成
+>
+
+### 步骤1：安装 SDK 依赖
+
+在您的业务项目中安装 TUIRoomKit 及配套依赖包。
+
+【npm】
+``` bash
+npm install @tencentcloud/roomkit-web-vue3 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
 ```
 
+【pnpm】
+``` bash
+pnpm install @tencentcloud/roomkit-web-vue3 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
+```
+
+【yarn】
+``` bash
+yarn add @tencentcloud/roomkit-web-vue3 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
+```
+
+### 步骤2：引用 TUIRoomKit 组件
+
+TUIRoomKit 提供 Web 桌面端与 H5 移动端两套会中完整界面组件，均从 `@tencentcloud/roomkit-web-vue3` 导出。根据终端类型按需引用：
+- `ConferenceMainView`：面向 Web 桌面端，提供九宫格 / 侧边栏 / 顶部栏等视频布局，内置摄像头、麦克风、屏幕共享、成员管理、聊天、邀请入会等完整会中能力。
+
+- `ConferenceMainViewH5`：面向 H5 移动端，采用移动端专属布局与交互，支持摄像头、麦克风、成员列表、聊天等核心会中能力，适配手机浏览器场景。
+
+   组件须包裹在 `UIKitProvider` 内，并通过 `getPlatform()` 区分 Web 与 H5 终端后按需渲染：
+
+   ``` typescript
+   <template>
+     <UIKitProvider theme="light" language="zh-CN">
+       <ConferenceMainView v-if="isPC"></ConferenceMainView>
+       <ConferenceMainViewH5 v-else></ConferenceMainViewH5>
+     </UIKitProvider>
+   </template>
+
+   <script setup lang="ts">
+   import { ref } from 'vue';
+   import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+   import { ConferenceMainView, ConferenceMainViewH5 } from '@tencentcloud/roomkit-web-vue3';
+   import { getPlatform } from '@tencentcloud/universal-api';
+
+   const isPC = ref(getPlatform() === 'pc');
+   </script>
+   ```
+
 ### 步骤3：登录
 
-登录是使用 TUIRoomKit 一切功能的基础。通常建议在您的业务系统完成鉴权（用户登录您的 Web 页面）后，立即调用 **conference.login **方法登录 TUIRoomKit。调用 `conference.login` 完成鉴权后，建议同步调用 `conference.setSelfInfo` 来设置当前用户的展示昵称和头像，这些信息将在随后的参会者视频区域和成员列表中展示。
+本节介绍 TUIRoomKit 登录的最佳实践。推荐在用户完成业务侧 Web 登录鉴权后，由业务服务端签发 UserSig 并下发至客户端，再依次调用 `conference.login` 与 `conference.setSelfInfo`，完成 TUIRoomKit 鉴权并配置会中展示信息。
 
 > **注意**：
 >
-
-> 在配置代码中，请务必填入生成的 UserSig。在正式的生产环境中，建议在您的服务端生成 UserSig，在需要 UserSig 时由您的客户端向业务服务器发起请求获取动态 UserSig 来进行鉴权。详见 [正式运行阶段如何计算 UserSig](https://cloud.tencent.com/document/product/647/17275#formal)。
+> UserSig 是 TUIRoomKit 登录的核心凭证。**生产环境**必须由业务服务端生成 UserSig，客户端在需要时向业务服务器请求获取，切勿在客户端硬编码 SDKSecretKey。**本地开发调试**时，可使用 `@tencentcloud/roomkit-web-vue3` 提供的 `genTestUserSig` 生成临时 UserSig，仅用于本地验证，不可用于生产环境。详见 [正式运行阶段如何计算 UserSig](https://cloud.tencent.com/document/product/647/17275#formal)。
 >
 
 ``` typescript
 import { onMounted } from 'vue';
 import { conference } from '@tencentcloud/roomkit-web-vue3';
 
-// 注意：以下参数请替换为您真实的业务数据和控制台获取的 SDKAppID
-const SDKAppID = 0;
-const userId = 'your_user_id';
-const userSig = 'your_dynamic_user_sig';
-const userName = '用户展示昵称';
+const SDKAppID = 0; // 控制台获取的 SDKAppID
+const userId = 'your_user_id'; // 业务侧用户唯一标识
+const userSig = 'your_user_sig'; // 由业务服务端签发并下发
+const userName = 'your_user_name';
 
 onMounted(async () => {
   try {
-    // 1. 执行 SDK 登录
-    await conference.login({
-      sdkAppId: SDKAppID,
-      userId,
-      userSig,
-    });
-    // 2. （可选）设置个人信息
+    await conference.login({ sdkAppId: SDKAppID, userId, userSig });
     await conference.setSelfInfo({
       userName,
       avatarUrl: 'https://your-avatar-url.com/image.png',
@@ -111,9 +445,9 @@ onMounted(async () => {
 });
 ```
 
-#### 接入问题：登录与进房分属不同路由页面如何监听登录成功的状态？
+#### 登录与进房分属不同路由时，如何监听登录状态？
 
-当登录页面与进房页面是两个独立路由时，进房页面加载时 `conference.login` 登录逻辑可能尚未执行。推荐通过 `watch` 监听 `loginUserInfo.value?.userId`，该字段非空即视为 TUIRoomKit 登录成功。
+若登录页与进房页为独立路由，进房页加载时 `conference.login` 可能尚未执行完毕。可通过 `watch` 监听 `loginUserInfo.value?.userId`：该字段非空时表示 TUIRoomKit 已完成登录，再执行进房逻辑。
 ``` typescript
 import { watch } from 'vue';
 import { useLoginState } from 'tuikit-atomicx-vue3/room';
@@ -130,7 +464,7 @@ watch(() => loginUserInfo.value?.userId, async (userId) => {
 
 ### 步骤4：创建会议
 
-创建会议所需要的**房间号（roomId）**是会议的核心标识，**由您的业务系统自行生成与维护（需保证全局唯一）**。请根据您的实际业务场景，选择适合的创建房间的方式：
+创建会议所需的**房间号（roomId）**是会议的核心标识，**由您的业务系统自行生成并维护（需保证全局唯一）**。请根据实际业务场景，选择以下创建方式：
 
 #### 场景一：客户端发起快速会议
 
@@ -212,7 +546,7 @@ POST /v4/room_engine_http_srv/create_room
 
 **适用场景：**房间已经被发起人或服务端明确创建，参会人收到了发起人分享的房间号或者会议邀请链接。
 
-**实现方式：**参会人输入房间号或客户端通过邀请链接解析出 `roomId` 后，仅需调用 `conference.joinRoom` 即可加入房间。
+**实现方式：**参会人输入房间号，或通过邀请链接解析出 `roomId` 后，调用 `conference.joinRoom` 加入会议。
 ``` typescript
 import { conference } from '@tencentcloud/roomkit-web-vue3';
 
@@ -227,7 +561,7 @@ const joinExistingMeeting = async (sharedRoomId: string) => {
 
 **适用场景：**适用于已通过“客户端预约”或“服务端创建”的会议。用户可进入“会议列表”页面，查看自己预定或受邀参与的会议，并快速点击加入。
 
-**实现方式：**通过 `useRoomState` 提供的 `getScheduledRoomList` 接口拉取当前用户的预约会议列表，并将其渲染至界面。当用户点击对应会议时，获取该项预约记录对应的 `roomId` 并调用 `conference.joinRoom` 即可完成进房操作。
+**实现方式：**通过 `useRoomState` 提供的 `getScheduledRoomList` 接口拉取当前用户的预约会议列表并渲染至界面；用户点击目标会议后，获取对应 `roomId` 并调用 `conference.joinRoom` 进房。
 ``` typescript
 <template>
   <div>
@@ -310,15 +644,14 @@ const enterDualMeeting = async (bizOrderId: string) => {
 
 > **说明：**
 >
-
-> `conference.createAndJoinRoom` 接口内部封装了“不存在则创建（成为房主），已存在则加入（成为普通参会者）”的逻辑，完美解决高并发下的状态冲突问题。
+> `conference.createAndJoinRoom` 内部封装了“房间不存在则创建并成为房主，已存在则加入并成为参会者”的逻辑，适用于双方对等发起的进房场景。
 >
 
 ### 步骤6：离开与解散房间
 
-TUIRoomKit 已在界面上内置了离开和解散房间的功能，用户可直接点击界面上的**「离开房间」**或**「解散房间」**按钮完成操作。
+TUIRoomKit 已在界面上内置离开与解散房间功能，用户可直接点击 **离开房间** 或 **解散房间** 完成操作。
 
-如果您需要在客户端通过代码主动触发离开或解散，可调用以下接口。
+如需在业务代码中主动触发离开或解散，可调用以下接口。
 
 #### 场景一：主动离开房间
 
@@ -331,7 +664,6 @@ await conference.leaveRoom();
 
 > **说明**：
 >
-
 > 房主离开房间或关闭网页，不会自动解散房间，其他参会成员可继续正常使用 TUIRoomKit 能力，系统会在会议结束时间后 6 小时、且房间内人数为 0 时自动回收房间资源。
 >
 
@@ -346,15 +678,14 @@ await conference.endRoom();
 
 > **注意**：
 >
-
 > `endRoom()` 必须由房主在成功进入房间后才能调用。非房主身份或在尚未进入房间的状态下调用会报错。
 >
 
 ### 步骤7：监听房间状态
 
-在真实的音视频会议场景中，房间状态可能会因为各种不可控因素发生变化（例如：房主主动解散了会议、账号在其他设备登录、或者网络异常导致进房失败）。
+在音视频会议场景中，房间状态可能因房主解散、账号在其他设备登录或网络异常等原因发生变化。
 
-TUIRoomKit 内部会自动处理底层音视频资源的销毁和 UI 提示，但界面的路由跳转必须由您的业务层来接管。因此，强烈建议您在会议组件挂载（onMounted）时注册状态监听，并在组件卸载（onUnmounted）时及时销毁监听。
+TUIRoomKit 会自动处理底层音视频资源释放与界面提示，但页面路由跳转需由业务层接管。建议您在会议组件 `onMounted` 时注册状态监听，并在 `onUnmounted` 时移除监听。
 ``` typescript
 <template>
   <ConferenceMainView></ConferenceMainView>
@@ -396,32 +727,13 @@ onUnmounted(() => {
 |`RoomEvent.KICKED_OFFLINE`|同一账号在其他设备登录，当前设备被强制下线|跳转登录页|
 |`RoomEvent.USER_SIG_EXPIRED`|UserSig 已过期|跳转登录页|
 
-## 启动项目
-
-【npm】
-``` bash
-npm run dev
-```
-
-【pnpm】
-``` bash
-pnpm run dev
-```
-
-【yarn】
-``` bash
-yarn run dev
-```
-
-启动成功后，请在浏览器中打开调试地址（通常为 http://localhost:5173）访问应用。您将看到如下所示的会议界面：
-
 ## 下一步
 
 在完成基础集成后，您可以根据业务需求进一步定制 UI 界面。
 
 ### 配置主题及语言
 
-通过配置` App.vue` 中 `UIKitProvider` 的入参，修改主题及语言的默认值。更多自定义主题及语言请参考 UI 自定义 > 主题及语言。
+通过配置 `App.vue` 中 `UIKitProvider` 的入参，修改主题及语言的默认值。更多自定义主题及语言请参考 UI 自定义 > 主题及语言。
 | <code>UIKitProvider</code> 参数 | 可选值 | 默认值 |
 | --- | --- | --- |
 | theme | "light" \\| "dark" | "light" |
@@ -429,11 +741,14 @@ yarn run dev
 
 ``` typescript
 <UIKitProvider theme="light" language="zh-CN">
-  <router-view />
+  <ConferenceMainView v-if="stage === 'room' && isPC" />
+  <ConferenceMainViewH5 v-else-if="stage === 'room'" />
 </UIKitProvider>
 
 <script setup lang="ts">
 import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { ConferenceMainView, ConferenceMainViewH5 } from '@tencentcloud/roomkit-web-vue3';
+</script>
 ```
 
 ### 配置用户联系人列表
@@ -477,7 +792,7 @@ TUIRoomKit 默认内置以下视频流挂件，如您需要自定义视频流挂
 
 ### 创建房间的用户（房主）关闭网页或异常退出后，会议会立即结束吗？
 
-不会。 当房主关闭浏览器或因网络异常离开页面时，并不会导致会议立即解散。会议将持续运行，其他在房成员仍可正常进行会议互动。
+不会。房主关闭浏览器或因网络异常离开页面时，会议不会立即解散，其他在房成员仍可继续会议。
 
 为节省资源，建议在会议实际结束时，通过以下任一方式主动销毁房间：
 - 界面操作：房主点击 TUIRoomKit 界面上的「解散房间」按钮；
@@ -490,15 +805,15 @@ TUIRoomKit 默认内置以下视频流挂件，如您需要自定义视频流挂
 
 ### 多个设备能否使用同一个 userId 同时加入同一场会议？
 
-不支持。 TUIRoomKit 不允许同一 userId 在多个设备上同时进入同一房间。
+不支持。TUIRoomKit 不允许同一 userId 在多个设备上同时进入同一房间。
 - 互踢机制：若后到的设备使用相同 userId 尝试进房，先前已在房内的设备会被强制下线（踢出）。
 
 - 解决方案：如需实现多端（如手机、PC）同时加入会议，请确保为每个设备分配唯一的 userId。
 
 ### 在本地开发时使用正常，但部署到线上环境后无法正常采集用户的摄像头或麦克风设备？
-- 原因分析：浏览器出于安全和隐私保护的考虑，对音视频设备（麦克风、摄像头）的采集有着严格限制。只有在安全环境下，采集操作才会被允许。安全环境协议包括：https://、localhost、file:// 等。HTTP 协议被视为不安全，浏览器会默认禁止访问媒体设备。
+- **原因：**浏览器出于安全与隐私考虑，仅允许在安全环境（`https://`、`localhost`、`file://` 等）下采集摄像头、麦克风。HTTP 协议下浏览器会默认禁止访问媒体设备。
 
-- 解决方案：若您在本地（localhost）测试一切正常，但部署后出现采集失败，请立即检查您的网页是否部署在 HTTP 协议上。必须使用 HTTPS 协议部署您的网页，并确保具备有效的安全证书。
+- **解决方案：**若本地（`localhost`）测试正常但部署后采集失败，请检查页面是否使用 HTTPS 协议部署，并确保证书有效。
 
 - 相关资源：更多关于 URL 域名及协议的限制详情，请参见 [URL 域名及协议限制说明](https://cloud.tencent.com/document/product/647/17249#URL-.E5.9F.9F.E5.90.8D.E5.8D.8F.E8.AE.AE.E9.99.90.E5.88.B6)。
 
@@ -514,38 +829,16 @@ TUIRoomKit 默认内置以下视频流挂件，如您需要自定义视频流挂
 
 ### 是否支持设置内网代理？
 
-支持。请参考如下指引设置内网代理参数。更多内网代理信息请参考 [应对防火墙受限](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-34-advanced-proxy.html)。
-``` typescript
-// 请在进房前设置内网代理参数
-import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
-import { useRoomEngine } from 'tuikit-atomicx-vue3/room';
-const { roomEngine } = useRoomEngine();
-
-TUIRoomEngine.once('ready', () => {
-  const trtcCloud = roomEngine.instance?.getTRTCCloud();
-  trtcCloud.callExperimentalAPI(JSON.stringify({
-    api: 'setNetworkProxy',
-    params: {
-      websocketProxy: "wss://proxy.example.com/ws/",
-      turnServer: [{
-        url: '14.3.3.3:3478',
-        username: 'turn',
-        credential: 'turn',
-      }],
-      iceTransportPolicy: 'relay',
-    },
-  }));
-});
-```
+支持。更多内网代理信息请参考 内网代理（Web）。
 
 ### 是否可以直接修改 TUIRoomKit 的底层源码？
 
-TUIRoomKit 已经为您提供了极其丰富的 UI 自定义能力，包括 自定义主题及语言、界面微调、自定义视频布局及挂件、水印配置等，能够满足绝大部分业务的个性化视觉与交互需求。
+TUIRoomKit 已提供丰富的 UI 自定义能力，包括 主题及语言、界面微调、视频布局及挂件、水印配置 等，可满足大多数业务的个性化需求。
 
 我们非常不推荐您进行源码导出。导出源码意味着您的项目将脱离 TUIRoomKit 的常规 npm 版本升级路径。您不仅需要自行承担后续极高的代码维护成本，也将无法直接通过更新版本来享受我们后续推出的新功能和底层音视频引擎的性能优化。
-- 推荐方案：请优先查阅 UI 自定义类文档探索标准自定义方案。
+- **推荐方案：**优先查阅 UI 自定义系列文档，使用标准自定义接口。
 
-   如果您已经充分评估了上述高昂的维护风险，且业务确实存在极特殊的、必须破坏底层结构的深度定制需求，可按照以下步骤导出源码：
+   若您已充分评估维护风险，且业务存在必须修改底层结构的深度定制需求，可按以下步骤导出源码：
 
 【Vue3】
 1. 执行源码导出脚本，默认拷贝路径为 `./src/components/RoomKit`