@tencentcloud/sdk-mcp 1.3.8 → 1.4.0

package/resource/doc/roomkit/vue/features/room-view.md

@@ -2,9 +2,6 @@
 
 `RoomView` 是 Atomicx 中负责视频画面渲染的主容器组件。它会自动处理视频流的订阅、渲染和释放，您只需关注其布局配置和 UI 增强。
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/c09ab2a6e07f11f0a5a25254007c27c5.png)
-
-
 ## 核心能力
 
 `RoomView` 作为多人音视频房间的核心视图容器，内置了多项企业级音视频处理能力：
@@ -16,7 +13,6 @@
 
 - **沉浸式视觉设计**：所有视频窗口强制保持 `16:9` 的标准比例，并配合交互显示的工具栏，提供无干扰的多人音视频房间体验。
 
-
 ## 可定制范围
 
 `RoomView` 仅聚焦于底层视频流的播放，而将视图层的所有“表现权”交给了开发者。使用 `RoomView` 您可以自由定义：
@@ -24,15 +20,13 @@
 
 - **视频挂件 UI：**包含昵称标签、音量动态波形、角色徽章等。
 
-
 ## **前提条件**
-- 用户已经通过 [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState) 完成登录鉴权，请参考 [接入概览](https://write.woa.com/document/197379797539790848)。
+- 用户已经通过 [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState) 完成登录鉴权，请参考 接入概览。
 
-- 用户已经通过 [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) 进入房间，参考 [房间管理](https://write.woa.com/document/197379861957083136)。
+- 用户已经通过 [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) 进入房间，参考 房间管理。
 
 - 已在 `App.vue` 中配置全局 `UIKitProvider`，具体请参考 [配置 App.vue](https://cloud.tencent.com/document/product/647/81962#ce98ee15-b0cb-43af-81da-70f51231430e)。
 
-
 ## 实现视频布局功能
 
 ### 步骤1：引入并渲染基础布局
@@ -59,72 +53,24 @@ import { RoomView } from 'tuikit-atomicx-vue3/room';
 ```
 
 > **注意：**
-> 
+>
 
 > `RoomView` 会自动占满父容器的高度和宽度，请确保其父容器具备明确的尺寸。
-> 
-
+>
 
 ### 步骤2：切换布局模式
 
 您可以根据业务逻辑（例如点击切换按钮）动态更新 `RoomView` 属性 `layoutTemplate` 的值。
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >属性名</td>
-
-<td rowspan="1" colSpan="1" >类型</td>
-
-<td rowspan="1" colSpan="1" >默认值</td>
-
-<td rowspan="1" colSpan="1" >说明</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`layoutTemplate`</td>
-
-<td rowspan="1" colSpan="1" >`RoomLayoutTemplate`</td>
-
-<td rowspan="1" colSpan="1" >`RoomLayoutTemplate.GridLayout`</td>
-
-<td rowspan="1" colSpan="1" >视频流布局</td>
-</tr>
-</table>
-
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `layoutTemplate` | `RoomLayoutTemplate` | `RoomLayoutTemplate.GridLayout` | 视频流布局 |
 
 `RoomLayoutTemplate` 可选值解析：
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >布局模式</td>
-
-<td rowspan="1" colSpan="1" >枚举值</td>
-
-<td rowspan="1" colSpan="1" >描述</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >宫格布局</td>
-
-<td rowspan="1" colSpan="1" >`RoomLayoutTemplate.GridLayout`</td>
-
-<td rowspan="1" colSpan="1" >默认布局。所有参会者画面均匀排列，参会者超出 9 人时支持翻页。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >侧边栏布局</td>
-
-<td rowspan="1" colSpan="1" >`RoomLayoutTemplate.SidebarLayout`</td>
-
-<td rowspan="1" colSpan="1" >主画面突出显示，其余参会者画面以侧边栏的形式排列，适用于演讲、报告等场景。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >顶部栏布局</td>
-
-<td rowspan="1" colSpan="1" >`RoomLayoutTemplate.CinemaLayout`</td>
-
-<td rowspan="1" colSpan="1" >主画面突出显示，其余参会者画面以顶部栏的形式排列，适用于演讲、报告等场景。<br></td>
-</tr>
-</table>
+| 布局模式 | 枚举值 | 描述 |
+| --- | --- | --- |
+| 宫格布局 | `RoomLayoutTemplate.GridLayout` | 默认布局。所有参会者画面均匀排列，参会者超出 9 人时支持翻页。 |
+| 侧边栏布局 | `RoomLayoutTemplate.SidebarLayout` | 主画面突出显示，其余参会者画面以侧边栏的形式排列，适用于演讲、报告等场景。 |
+| 顶部栏布局 | `RoomLayoutTemplate.CinemaLayout` | 主画面突出显示，其余参会者画面以顶部栏的形式排列，适用于演讲、报告等场景。 |
 
 ``` typescript
 <template>
@@ -163,34 +109,10 @@ const switchLayout = (layout: RoomLayoutTemplate) => {
 
 您可以通过使用 `participantViewUI` 插槽，为视频画面定制 UI 显示内容（例如设置昵称，添加自定义图标）。
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/3728c9fce00311f09bba52540044a08e.png)
-
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >插槽参数</td>
-
-<td rowspan="1" colSpan="1" >类型</td>
-
-<td rowspan="1" colSpan="1" >说明</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`participant`</td>
-
-<td rowspan="1" colSpan="1" >`RoomParticipant`</td>
-
-<td rowspan="1" colSpan="1" >当前视频流对应的参会者对象，包含用户的 `userId`、`userName`、`role` 等实时状态信息。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`streamType`</td>
-
-<td rowspan="1" colSpan="1" >`VideoStreamType`</td>
-
-<td rowspan="1" colSpan="1" >区分当前是摄像头流（Camera）还是屏幕分享流（Screen）</td>
-</tr>
-</table>
-
+| 插槽参数 | 类型 | 说明 |
+| --- | --- | --- |
+| `participant` | `RoomParticipant` | 当前视频流对应的参会者对象，包含用户的 `userId`、`userName`、`role` 等实时状态信息。 |
+| `streamType` | `VideoStreamType` | 区分当前是摄像头流（Camera）还是屏幕分享流（Screen） |
 
 #### 准备视觉资源
 
@@ -200,14 +122,12 @@ const switchLayout = (layout: RoomLayoutTemplate) => {
 - 身份标识图标：用于区分房主（Owner）、管理员（Admin）与普通成员。
 
 - 网络信号图标：展示实时的上/下行网络质量。
-   
 
    > **特别说明：**
-   > 
+   >
 
    > 我们在示例项目的 @tencentcloud/uikit-base-component-vue3 npm 包中提供了免版权的图标，您可以直接引入使用。
-   > 
-
+   >
 
 #### 实现代码示例
 1. 新增文件 `ParticipantViewUI.vue` 实现单个视频流挂件层 UI 渲染逻辑。
@@ -235,7 +155,7 @@ const switchLayout = (layout: RoomLayoutTemplate) => {
        </div>
      </div>
    </template>
-   
+
    <script setup lang="ts">
    import { computed, defineProps } from 'vue';
    import {
@@ -245,13 +165,13 @@ const switchLayout = (layout: RoomLayoutTemplate) => {
    } from '@tencentcloud/uikit-base-component-vue3';
    import { RoomParticipantRole, DeviceStatus, VideoStreamType, useRoomParticipantState } from 'tuikit-atomicx-vue3/room';
    import type { RoomParticipant } from 'tuikit-atomicx-vue3/room';
-   
+
    interface Props {
      participant: RoomParticipant;
      streamType: VideoStreamType;
    }
    const props = defineProps<Props>();
-   
+
    const { speakingUsers } = useRoomParticipantState();
    const speakingAudioVolume = computed(() => speakingUsers.value.get(props.participant.userId) || 0);
    const audioLevelStyle = computed(() => {
@@ -260,21 +180,21 @@ const switchLayout = (layout: RoomLayoutTemplate) => {
      }
      return `height: ${speakingAudioVolume.value * 4}%`;
    });
-   
+
    const isMicrophoneOn = computed(() => props.participant.microphoneStatus === DeviceStatus.On);
    const displayName = computed(() => props.participant.nameCard || props.participant.userName || props.participant.userId);
-   
+
    const showMasterIcon = computed(() => {
      const { role } = props.participant;
      return role === RoomParticipantRole.Owner && props.streamType === VideoStreamType.Camera;
    });
-   
+
    const showAdminIcon = computed(() => {
      const { role } = props.participant;
      return (role === RoomParticipantRole.Admin && props.streamType === VideoStreamType.Camera);
    });
    </script>
-   
+
    <style lang="scss" scoped>
    .stream-cover-container {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  border-radius: 12px;  pointer-events: none;  .corner-user-info-container {    position: absolute;    bottom: 8px;    left: 8px;    display: flex;    align-content: center;    align-items: center;    box-sizing: border-box;    min-width: 118px;    max-width: calc(100% - 24px);    padding-right: 10px;    height: 32px;    overflow: hidden;    font-size: 14px;    color: var(--uikit-color-white-1);    border-radius: 16px;    background-color: var(--uikit-color-black-5);    .master-icon,    .admin-icon {      display: flex;      flex-shrink: 0;      align-items: center;      justify-content: center;      width: 32px;      height: 32px;      margin-left: 0;      border-radius: 50%;      background-color: var(--button-color-primary-default);    }    .admin-icon {      background-color: var(--text-color-warning);    }    .audio-icon-container {      margin-left: 4px;      position: relative;      width: 20px;      height: 20px;      flex-shrink: 0;      min-width: 20px;      &:first-child {        margin-left: 8px;      }      .audio-level-container {        position: absolute;        top: 2px;        left: 6px;        display: flex;        flex-flow: column-reverse wrap;        justify-content: space-between;        width: 8px;        height: 12px;        overflow: hidden;        border-radius: 4px;        .audio-level {          width: 100%;          background-color: var(--text-color-success);          transition: height 0.2s;        }      }      .audio-icon {        position: absolute;        top: 0;        left: 0;      }    }    .user-name {      margin-left: 4px;      overflow: hidden;      text-overflow: ellipsis;      white-space: nowrap;      min-width: 0;    }    .screen-icon {      flex-shrink: 0;      min-width: 0;      color: var(--uikit-color-white-1);      margin-left: 4px;      margin-right: 2px;    }    .screen-info {      margin-left: 4px;      font-size: 12px;      color: var(--uikit-color-white-1);      flex-shrink: 0;      min-width: 0;    }  }}
    </style>
@@ -291,37 +211,22 @@ const switchLayout = (layout: RoomLayoutTemplate) => {
        </RoomView>
      </div>
    </template>
-   
+
    <script setup lang="ts">
    import { ref } from 'vue';
    import { RoomView, RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
    // 引入新增的 ParticipantViewUI.vue 文件
    import ParticipantViewUI from './ParticipantViewUI.vue';
-   
+
    // 默认使用宫格布局
    const currentLayout = ref(RoomLayoutTemplate.GridLayout);
    </script>
    ```
 
 ## 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" >**useRoomParticipantState**</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-RoomParticipantState)</td>
-</tr>
-</table>
-
+| **State/Component** | **功能描述** | **API 文档** |
+| --- | --- | --- |
+| **useRoomParticipantState** | 包含房间内用户数据，用户管理接口。 | [API 文档](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState) |
 
 ## 常见问题
 
@@ -334,5 +239,3 @@ const switchLayout = (layout: RoomLayoutTemplate) => {
 `RoomView` 内部无默认 UI 挂件，您可以参考 [RoomView 开源使用示例](https://github.com/Tencent-RTC/TUIRoomKit/tree/main/Web/example/atomicx-vite-vue3-ts/src/components/RoomLayoutView) 快速完成自定义 UI 挂件。
 
 ### RoomView 提供的布局均不满足需求，是否可以提供更多的可选布局？
-
-`RoomView` 暂时支持宫格布局、侧边栏和顶部栏布局。如果您有定制需求请 [联系我们](https://cloud.tencent.com/document/product/647/19906)。

package/resource/doc/roomkit/vue/features/schedule-room.md

@@ -7,13 +7,11 @@
 
 - **远程面试预约：** HR 为面试者和面试官预约特定的时间段。
 
-
 ## 前提条件
-- **用户状态：** 用户已经通过 useLoginState 完成登录鉴权，参考 [接入概览](https://write.woa.com/document/197379797539790848)，处于**已登录**状态才能发起预定或查看预定列表。
+- **用户状态：** 用户已经通过 useLoginState 完成登录鉴权，参考 接入概览，处于**已登录**状态才能发起预定或查看预定列表。
 
 - **环境依赖：** 项目已引入 `tuikit-atomicx-vue3`。
 
-
 ## 实现预定房间功能
 
 本功能提供两种集成方案，您可以根据业务需求选择最适合的一种：
@@ -21,9 +19,6 @@
 
 - **方案二（高级）：** 使用底层 API 自定义集成。基于 atomicx-core SDK API `useRoomState` 状态钩子自行实现 UI 和交互逻辑，灵活度最高。
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/87d4918de48011f0ab0f5254005ef0f7.png)
-
-
 ## 方案一：使用 UI 组件快速集成
 
 `tuikit-atomicx-vue3` 提供了两个核心组件：
@@ -31,7 +26,6 @@
 
 - [**ScheduledRoomList**](https://github.com/Tencent-RTC/TUIKit_Vue3/blob/main/packages/tuikit-atomicx-vue3/src/components/ScheduleRoomPanel/ScheduledRoomList.vue)**：**展示当前用户的预定会议列表，支持点击入会、修改和取消预定。
 
-
 ### 步骤1：引入组件
 ``` typescript
 import { ScheduleRoomPanel, ScheduledRoomList } from 'tuikit-atomicx-vue3/room';
@@ -86,7 +80,7 @@ const handleScheduleConfirm = (roomId: string, options: Record<string, any>) =>
 
 const handleJoinRoom = async (roomInfo: { roomId: string }) => {
   console.log('点击入会', roomInfo.roomId);
-  await joinRoom(roomInfo.roomId); 
+  await joinRoom(roomInfo.roomId);
 };
 </script>
 
@@ -99,11 +93,8 @@ const handleJoinRoom = async (roomInfo: { roomId: string }) => {
 
 本节主要介绍如何通过 atomicx-core SDK API [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) 接口来实现预定房间的核心逻辑。
 
-![预定房间时序图](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/8dbc9bdedfae11f08304525400454e06.png)
-
 预定房间时序图
 
-
 ### 步骤1：发起预定
 
 使用 [scheduleRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#scheduleRoom) 方法创建一个新的预定会议。您需要指定会议的开始时间、结束时间以及房间名称等信息。
@@ -115,8 +106,8 @@ const { scheduleRoom } = useRoomState();
 const createSchedule = async () => {
   try {
     // roomId 限制：字符串类型，必传参数，建议随机生成
-    const roomId = '123456'; 
-    
+    const roomId = '123456';
+
     // 注意：时间戳单位必须为 **秒** (Date.getTime() 获取的是毫秒，需除以 1000)
     const startTime = Math.floor(new Date().getTime() / 1000) + 3600; // 1小时后开始
     const duration = 1800; // 30分钟
@@ -146,7 +137,7 @@ const createSchedule = async () => {
 import { onMounted, watch } from 'vue';
 import { useRoomState } from 'tuikit-atomicx-vue3/room';
 
-const { 
+const {
   scheduledRoomList,      // 响应式数据：预定会议列表
   getScheduledRoomList    // 方法：拉取列表
 } = useRoomState();
@@ -155,7 +146,7 @@ const {
 onMounted(async () => {
   // cursor 表示从哪里开始拉取数据，空字符串表示从头开始
   // getScheduledRoomList 返回值包含新的 cursor
-  const { cursor } = await getScheduledRoomList({ cursor: '' }); 
+  const { cursor } = await getScheduledRoomList({ cursor: '' });
   // 如果 cursor 不为空，表示还有更多数据，可继续调用拉取
 });
 
@@ -292,58 +283,36 @@ onUnmounted(() => {
 
 4. **分页处理**：预定列表可能会很长，`getScheduledRoomList` 接口支持分页拉取。请关注返回值中的 `cursor` 字段，若不为空，则说明还有更多数据。
 
-
 ## 常见问题
 1. **预定成功但列表不更新？**
 
-
    请确认已登录且首屏调用过 `getScheduledRoomList`（例如 `cursor: ''`）。返回的 `cursor` 不为空需继续拉取；列表是响应式的，更新后 UI 会同步。
 
 2. `joinRoom`** 参数怎么传？**
 
-
    推荐统一使用对象入参：`joinRoom({ roomId, password })`，避免直接传字符串导致类型不匹配或后续扩展受限。
 
 3. **时间戳用毫秒导致预约失败？**
 
-
    所有时间相关参数必须是秒，`Date.now()` 需 `/ 1000`，否则会返回时间冲突错误。
 
 4. **房间设置了密码如何处理？**
 
-
    捕获 `TUIErrorCode.ERR_NEED_PASSWORD` / `ERR_WRONG_PASSWORD`，弹出密码输入框，重新 `joinRoom({ roomId, password })`；错误多次后可提示联系房主重置。
 
 5. **roomId 冲突或重复？**
 
-
    建议由后端生成全局唯一 roomId；如果前端生成，请在调度前检查冲突并做好重试策略。
 
 6. **分页怎么继续拉取？**
 
-
    `getScheduledRoomList` 返回的 `cursor` 不为空时继续传入；为空表示已拉完。
 
-
 ## **示例项目**
 
 腾讯云在 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) |

package/resource/doc/roomkit/vue/features/screen-share.md

@@ -1,9 +1,9 @@
 本文档指导您如何使用 Atomicx 实现屏幕分享能力，并根据屏幕分享状态处理房间内交互。
 
 ## 前提条件
-- 用户已经通过 [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState) 完成登录鉴权，请参考 [接入概览](https://write.woa.com/document/197379797539790848)。
+- 用户已经通过 [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState) 完成登录鉴权，请参考 接入概览。
 
-- 用户已经通过 [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) 进入房间，请参考 [房间管理](https://write.woa.com/document/197379861957083136)。
+- 用户已经通过 [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) 进入房间，请参考 房间管理。
 
 - 若在 `iframe` 中集成，需在标签中声明权限。
 
@@ -17,8 +17,6 @@
 
 使用 [startScreenShare](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#startScreenShare) 方法开始屏幕分享。在 Web 环境下，您将看到浏览器的屏幕选择器，可以选择分享整个屏幕、应用窗口或浏览器标签页。
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/3233e9a6dbe911f0a38652540044a08e.png)
-
 ``` typescript
 import { useDeviceState } from 'tuikit-atomicx-vue3/room';
 const { startScreenShare } = useDeviceState();
@@ -38,8 +36,6 @@ const handleStartShare = async () => {
 
 通过设置 `screenAudio: true` 参数，可以在屏幕分享时同时分享系统音频。这在分享视频、演示、音乐等包含音频内容时非常有用。
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/3e3557c9dbe911f0a4f35254007c27c5.png)
-
 ``` typescript
 import { useDeviceState } from 'tuikit-atomicx-vue3/room';
 const { startScreenShare } = useDeviceState();
@@ -56,55 +52,18 @@ const handleStartScreenShareWithAudio = async () => {
 ```
 
 **浏览器兼容性说明：**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >浏览器</td>
-
-<td rowspan="1" colSpan="1" >系统音频分享支持</td>
-
-<td rowspan="1" colSpan="1" >备注</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Chrome 74+</td>
-
-<td rowspan="1" colSpan="1" >支持</td>
-
-<td rowspan="1" colSpan="1" >需要在选择器中勾选**分享音频**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Edge 79+</td>
-
-<td rowspan="1" colSpan="1" >支持</td>
-
-<td rowspan="1" colSpan="1" >基于 Chromium，体验同 Chrome</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Firefox</td>
-
-<td rowspan="1" colSpan="1" >不支持</td>
-
-<td rowspan="1" colSpan="1" >暂不支持系统音频分享</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Safari</td>
-
-<td rowspan="1" colSpan="1" >不支持</td>
-
-<td rowspan="1" colSpan="1" >暂不支持系统音频分享</td>
-</tr>
-</table>
-
+| 浏览器 | 系统音频分享支持 | 备注 |
+| --- | --- | --- |
+| Chrome 74+ | 支持 | 需要在选择器中勾选**分享音频** |
+| Edge 79+ | 支持 | 基于 Chromium，体验同 Chrome |
+| Firefox | 不支持 | 暂不支持系统音频分享 |
+| Safari | 不支持 | 暂不支持系统音频分享 |
 
 > **注意：**
-> 
+>
 
 > 系统音频分享需要浏览器支持，且用户在屏幕选择器中勾选**分享音频**选项。如果浏览器不支持系统音频分享，`screenAudio` 参数会被忽略，但屏幕画面分享功能不受影响，可以正常使用。
-> 
-
+>
 
 ### 步骤3：停止屏幕分享
 
@@ -114,7 +73,7 @@ const handleStartScreenShareWithAudio = async () => {
    ``` typescript
    import { useDeviceState, DeviceStatus } from 'tuikit-atomicx-vue3/room';
    const { screenStatus, stopScreenShare } = useDeviceState();
-   
+
    // 停止屏幕分享
    const handleStopScreenShare = async () => {
      try {
@@ -127,17 +86,13 @@ const handleStartScreenShareWithAudio = async () => {
    ```
 2. **点击浏览器原生的"停止分享"按钮**
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/471f5332dbe911f0809c525400454e06.png)
-
 3. **关闭被分享的窗口或标签页**
-   
 
    > **说明：**
-   > 
+   >
 
    > 用户使用任意一种方式停止屏幕分享时，Atomicx 都会自动更新 [screenStatus](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#screenStatus) 的状态。
-   > 
-
+   >
 
 ### 步骤4：权限控制与状态监听
 
@@ -173,9 +128,9 @@ async function handleEnableAllScreen() {
   <div class="room-container">
     <RoomView :layout-template="layoutTemplate">
       <template #participantViewUI="{ participant, streamType }">
-        <ParticipantViewUI 
-          :participant="participant" 
-          :stream-type="streamType" 
+        <ParticipantViewUI
+          :participant="participant"
+          :stream-type="streamType"
         />
       </template>
     </RoomView>
@@ -184,8 +139,8 @@ async function handleEnableAllScreen() {
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { 
-  RoomView, 
+import {
+  RoomView,
   RoomLayoutTemplate,
   useRoomParticipantState
 } from 'tuikit-atomicx-vue3/room';
@@ -272,32 +227,10 @@ try {
 ```
 
 ## 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" >**useDeviceState**</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-DeviceState)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useRoomParticipantState**</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-RoomParticipantState)</td>
-</tr>
-</table>
-
+| **State/Component** | **功能描述** | **API 文档** |
+| --- | --- | --- |
+| **useDeviceState** | 包含音视频设备状态，音视频设备列表及操作接口。 | [API 文档](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) |
+| **useRoomParticipantState** | 包含房间内用户数据，用户管理接口。 | [API 文档](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState) |
 
 ## 常见问题
 
@@ -308,7 +241,6 @@ try {
 
 - **系统限制：**部分操作系统不支持分享特定**应用窗口**的音频，建议优先选择**整个屏幕**或**浏览器标签页**。
 
-
 ### 如何感知用户通过点击浏览器的“停止分享”按钮后结束屏幕分享？
 
 Atomicx 会自动监听浏览器的停止分享事件，并更新 `screenStatus` 状态。您只需要监听 `screenStatus` 的变化即可：