@tencent-rtc/mcp 1.3.9 → 1.4.0

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

@@ -1,8 +1,5 @@
 This document will guide you in detail on how to use Atomicx's [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) to manage the complete lifecycle of a room, including creating, joining, leaving, and ending a room, as well as handling key room status notifications. The following sequence diagram demonstrates the main process from room creation to destruction.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/b5d730a6dfdc11f08775525400bf7822.png)
-
-
 ## Feature Introduction
 
 [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) is the core Hook responsible for room management in the Atomicx solution. It encapsulates complex underlying signaling processes, and developers can drive room state through simple reactive data and method calls.
@@ -12,10 +9,9 @@ This document will guide you in detail on how to use Atomicx's [useRoomState](ht
 
 - **Role-based Exit Mechanism:** Provides clear operational boundaries for different roles. Regular members can use [leaveRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#leaveRoom) to exit; while the room owner (host) has [endRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#endRoom) permission to end the room and destroy room resources with one click.
 
-
 ## **Prerequisites**
 
-User has completed login authentication through [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState), please refer to [Integration Overview](https://write.woa.com/document/197379797539790848).
+User has completed login authentication through [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState), please refer to Integration Overview.
 
 ## Implementing Room Management
 
@@ -23,12 +19,12 @@ User has completed login authentication through [useLoginState](https://web.sdk.
 ``` typescript
 import { useRoomState } from 'tuikit-atomicx-vue3/room';
 
-const { 
-  createAndJoinRoom, 
-  joinRoom, 
-  leaveRoom, 
+const {
+  createAndJoinRoom,
+  joinRoom,
+  leaveRoom,
   endRoom,
-  currentRoom 
+  currentRoom
 } = useRoomState();
 ```
 
@@ -37,17 +33,17 @@ const {
 Create room (room owner): Use [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#createAndJoinRoom), after successful call the user will automatically obtain room owner permissions.
 
 > **Note:**
-> 
+>
 
 > The roomId specified when creating a room is recommended to be generated and issued by the business backend to ensure global uniqueness and stability of the room ID.
-> 
+>
 
 - **Example 1: User creates room**
 
    ``` typescript
    import { useRoomState } from 'tuikit-atomicx-vue3/room';
    const { createAndJoinRoom } = useRoomState();
-   
+
    await createAndJoinRoom({
      roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
    })
@@ -57,7 +53,7 @@ Create room (room owner): Use [createAndJoinRoom](https://web.sdk.qcloud.com/trt
    ``` typescript
    import { useRoomState } from 'tuikit-atomicx-vue3/room';
    const { createAndJoinRoom } = useRoomState();
-   
+
    await createAndJoinRoom({
      roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
      options: {
@@ -70,7 +66,7 @@ Create room (room owner): Use [createAndJoinRoom](https://web.sdk.qcloud.com/trt
    ``` typescript
    import { useRoomState } from 'tuikit-atomicx-vue3/room';
    const { createAndJoinRoom } = useRoomState();
-   
+
    await createAndJoinRoom({
      roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
      options: {
@@ -78,20 +74,20 @@ Create room (room owner): Use [createAndJoinRoom](https://web.sdk.qcloud.com/trt
        password: '123456',
      }
    })
-   ```   
+   ```
 
    > **Note:**
-   > 
+   >
 
    > Creator automatically joins the room when calling [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#createAndJoinRoom), no password required.
-   > 
+   >
 
 - **Example 4: User creates room and configures member management settings**
 
    ``` typescript
    import { useRoomState } from 'tuikit-atomicx-vue3/room';
    const { createAndJoinRoom } = useRoomState();
-   
+
    await createAndJoinRoom({
      roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
      options: {
@@ -103,14 +99,13 @@ Create room (room owner): Use [createAndJoinRoom](https://web.sdk.qcloud.com/trt
        isAllMessageDisabled: true,      // Enable disable all in-meeting messages
      }
    })
-   ```   
+   ```
 
    > **Note:**
-   > 
-
-   > Member management configuration only applies to regular members, room owner and administrators are not restricted. To modify member management configuration after room creation or manage individual member permissions, please refer to [Member Management](https://write.woa.com/document/197380064613830656).
-   > 
+   >
 
+   > Member management configuration only applies to regular members, room owner and administrators are not restricted. To modify member management configuration after room creation or manage individual member permissions, please refer to Member Management.
+   >
 
 ### Step 3: User joins existing room
 
@@ -120,7 +115,7 @@ Logged-in users can call [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc
    ``` typescript
    import { useRoomState } from 'tuikit-atomicx-vue3/room';
    const { joinRoom } = useRoomState();
-   
+
    await joinRoom({
      roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
    })
@@ -130,7 +125,7 @@ Logged-in users can call [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc
    ``` typescript
    import { useRoomState } from 'tuikit-atomicx-vue3/room';
    const { joinRoom } = useRoomState();
-   
+
    await joinRoom({
      roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
      password: '123456',
@@ -154,11 +149,10 @@ await updateRoomInfo({
 ```
 
 > **Note:**
-> 
+>
 
 > Room owner must be in the room to call [updateRoomInfo](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#updateRoomInfo). If room owner has left the room, they need to rejoin before updating room information.
-> 
-
+>
 
 ### Step 5: Leave room
 
@@ -181,11 +175,10 @@ await endRoom();
 ```
 
 > **Note:**
-> 
+>
 > - If room owner leaves the room without calling [endRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#endRoom), the room will continue to exist until automatic reclamation conditions are met (6 consecutive hours without users).
 > - Room owner can transfer owner status to other users through [transferOwner](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#transferOwner) interface.
 
-
 ### Step 7: Handle abnormal exit
 
 #### Handle room destroyed event
@@ -268,9 +261,7 @@ Atomicx provides complete scheduled room capabilities, including:
 
 - **Meeting Reminders:** Support automatic reminder logic before start.
 
-
-   If you need to implement more complex business multi-party audio/video room management logic as described above, please refer to: [Schedule Room](https://write.woa.com/document/197380092150673408).
-
+   If you need to implement more complex business multi-party audio/video room management logic as described above, please refer to: Schedule Room.
 
 ## FAQ
 

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

@@ -2,9 +2,6 @@ This document will guide you in using Atomicx's core view component `RoomView` t
 
 `RoomView` is the main container component responsible for video rendering in Atomicx. It automatically handles video stream subscription, rendering, and release. You only need to focus on its layout configuration and UI enhancement.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/c09ab2a6e07f11f0a5a25254007c27c5.png)
-
-
 ## Core Capabilities
 
 `RoomView`, as the core view container for multi-party audio and video rooms, has built-in multiple enterprise-grade audio and video processing capabilities:
@@ -16,7 +13,6 @@ This document will guide you in using Atomicx's core view component `RoomView` t
 
 - **Immersive Visual Design**: All video windows are forced to maintain a standard `16:9` ratio, combined with interactive display toolbars, providing an interference-free multi-party audio and video room experience.
 
-
 ## Customizable Range
 
 `RoomView` focuses only on underlying video stream playback, while giving developers all "presentation rights" at the view layer. Using `RoomView`, you can freely define:
@@ -24,15 +20,13 @@ This document will guide you in using Atomicx's core view component `RoomView` t
 
 - **Video Widget UI:** Including name tags, volume dynamic waveforms, role badges, etc.
 
-
 ## **Prerequisites**
-- The user has completed login authentication through [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState), please refer to [Integration Overview](https://write.woa.com/document/197379797539790848).
+- The user has completed login authentication through [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState), please refer to Integration Overview.
 
-- The user has entered a room through [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState), refer to [Room Management](https://write.woa.com/document/197379861957083136).
+- The user has entered a room through [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState), refer to Room Management.
 
 - Global `UIKitProvider` has been configured in `App.vue`, please refer to [Configure App.vue](https://cloud.tencent.com/document/product/647/81962#ce98ee15-b0cb-43af-81da-70f51231430e).
 
-
 ## Implementing Video Layout Feature
 
 ### Step 1: Import and Render Basic Layout
@@ -59,72 +53,24 @@ import { RoomView } from 'tuikit-atomicx-vue3/room';
 ```
 
 > **Note:**
-> 
+>
 
 > `RoomView` will automatically fill the parent container's height and width, please ensure its parent container has explicit dimensions.
-> 
-
+>
 
 ### Step 2: Switch Layout Mode
 
 You can dynamically update the `layoutTemplate` attribute value of `RoomView` based on business logic (e.g., clicking a switch button).
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Property Name</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Default Value</td>
-
-<td rowspan="1" colSpan="1" >Description</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" >Video stream layout</td>
-</tr>
-</table>
-
+| Property Name | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| `layoutTemplate` | `RoomLayoutTemplate` | `RoomLayoutTemplate.GridLayout` | Video stream layout |
 
 `RoomLayoutTemplate` optional value analysis:
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Layout Mode</td>
-
-<td rowspan="1" colSpan="1" >Enum Value</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Grid Layout</td>
-
-<td rowspan="1" colSpan="1" >`RoomLayoutTemplate.GridLayout`</td>
-
-<td rowspan="1" colSpan="1" >Default layout. All participant screens are evenly arranged, supports pagination when participants exceed 9 people.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Sidebar Layout</td>
-
-<td rowspan="1" colSpan="1" >`RoomLayoutTemplate.SidebarLayout`</td>
-
-<td rowspan="1" colSpan="1" >Main screen is prominently displayed, with other participant screens arranged in a sidebar format, suitable for speeches, reports, and other scenarios.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Top Bar Layout</td>
-
-<td rowspan="1" colSpan="1" >`RoomLayoutTemplate.CinemaLayout`</td>
-
-<td rowspan="1" colSpan="1" >Main screen is prominently displayed, with other participant screens arranged in a top bar format, suitable for speeches, reports, and other scenarios.<br></td>
-</tr>
-</table>
+| Layout Mode | Enum Value | Description |
+| --- | --- | --- |
+| Grid Layout | `RoomLayoutTemplate.GridLayout` | Default layout. All participant screens are evenly arranged, supports pagination when participants exceed 9 people. |
+| Sidebar Layout | `RoomLayoutTemplate.SidebarLayout` | Main screen is prominently displayed, with other participant screens arranged in a sidebar format, suitable for speeches, reports, and other scenarios. |
+| Top Bar Layout | `RoomLayoutTemplate.CinemaLayout` | Main screen is prominently displayed, with other participant screens arranged in a top bar format, suitable for speeches, reports, and other scenarios. |
 
 ``` typescript
 <template>
@@ -163,34 +109,10 @@ const switchLayout = (layout: RoomLayoutTemplate) => {
 
 You can customize UI display content for video screens (e.g., set nicknames, add custom icons) by using the `participantViewUI` slot.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/3728c9fce00311f09bba52540044a08e.png)
-
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Slot Parameter</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`participant`</td>
-
-<td rowspan="1" colSpan="1" >`RoomParticipant`</td>
-
-<td rowspan="1" colSpan="1" >Participant object corresponding to the current video stream, containing real-time status information such as user's `userId`, `userName`, `role`, etc.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`streamType`</td>
-
-<td rowspan="1" colSpan="1" >`VideoStreamType`</td>
-
-<td rowspan="1" colSpan="1" >Distinguish whether the current is camera stream (Camera) or screen share stream (Screen)</td>
-</tr>
-</table>
-
+| Slot Parameter | Type | Description |
+| --- | --- | --- |
+| `participant` | `RoomParticipant` | Participant object corresponding to the current video stream, containing real-time status information such as user's `userId`, `userName`, `role`, etc. |
+| `streamType` | `VideoStreamType` | Distinguish whether the current is camera stream (Camera) or screen share stream (Screen) |
 
 #### Prepare Visual Resources
 
@@ -200,14 +122,12 @@ To provide complete interactive feedback, it is recommended to prepare the follo
 - Identity icons: Used to distinguish room owner (Owner), administrator (Admin), and regular members.
 
 - Network signal icons: Display real-time uplink/downlink network quality.
-   
 
    > **Special Note:**
-   > 
+   >
 
    > We provide copyright-free icons in the @tencentcloud/uikit-base-component-vue3 npm package in the sample project, which you can directly import and use.
-   > 
-
+   >
 
 #### Implementation Code Example
 1. Add file `ParticipantViewUI.vue` to implement UI rendering logic for a single video stream widget layer.
@@ -235,7 +155,7 @@ To provide complete interactive feedback, it is recommended to prepare the follo
        </div>
      </div>
    </template>
-   
+
    <script setup lang="ts">
    import { computed, defineProps } from 'vue';
    import {
@@ -245,13 +165,13 @@ To provide complete interactive feedback, it is recommended to prepare the follo
    } 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 @@ To provide complete interactive feedback, it is recommended to prepare the follo
      }
      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 @@ To provide complete interactive feedback, it is recommended to prepare the follo
        </RoomView>
      </div>
    </template>
-   
+
    <script setup lang="ts">
    import { ref } from 'vue';
    import { RoomView, RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
    // Import the newly added ParticipantViewUI.vue file
    import ParticipantViewUI from './ParticipantViewUI.vue';
-   
+
    // Default to grid layout
    const currentLayout = ref(RoomLayoutTemplate.GridLayout);
    </script>
    ```
 
 ## API Documentation
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**State/Component**</td>
-
-<td rowspan="1" colSpan="1" >**Feature Description**</td>
-
-<td rowspan="1" colSpan="1" >**API Documentation**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useRoomParticipantState**</td>
-
-<td rowspan="1" colSpan="1" >Contains room user data and user management interface.</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState)</td>
-</tr>
-</table>
-
+| **State/Component** | **Feature Description** | **API Documentation** |
+| --- | --- | --- |
+| **useRoomParticipantState** | Contains room user data and user management interface. | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState) |
 
 ## Common Questions
 

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

@@ -7,13 +7,11 @@ The scheduled room feature allows users to plan meeting times, topics, and entry
 
 - **Remote Interview Appointments:** HR can schedule specific time slots for interviewees and interviewers.
 
-
 ## Prerequisites
-- **User Status:** The user has completed login authentication through useLoginState, refer to [Integration Overview](https://write.woa.com/document/197379797539790848), and must be in **logged in** status to initiate scheduling or view scheduled list.
+- **User Status:** The user has completed login authentication through useLoginState, refer to Integration Overview, and must be in **logged in** status to initiate scheduling or view scheduled list.
 
 - **Environment Dependencies:** The project has imported `tuikit-atomicx-vue3`.
 
-
 ## Implementing Scheduled Room Feature
 
 This feature provides two integration solutions. You can choose the most suitable one according to business needs:
@@ -21,9 +19,6 @@ This feature provides two integration solutions. You can choose the most suitabl
 
 - **Solution 2 (Advanced):** Custom integration using underlying API. Based on atomicx-core SDK API `useRoomState` state hook to implement UI and interaction logic yourself, with the highest flexibility.
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/87d4918de48011f0ab0f5254005ef0f7.png)
-
-
 ## Solution 1: Quick Integration Using UI Components
 
 `tuikit-atomicx-vue3` provides two core components:
@@ -31,7 +26,6 @@ This feature provides two integration solutions. You can choose the most suitabl
 
 - [**ScheduledRoomList**](https://github.com/Tencent-RTC/TUIKit_Vue3/blob/main/packages/tuikit-atomicx-vue3/src/components/ScheduleRoomPanel/ScheduledRoomList.vue)**:** Displays the current user's scheduled meeting list, supports clicking to join, modify, and cancel schedules.
 
-
 ### Step 1: Import Components
 ``` 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('Click to join', roomInfo.roomId);
-  await joinRoom(roomInfo.roomId); 
+  await joinRoom(roomInfo.roomId);
 };
 </script>
 
@@ -99,11 +93,8 @@ const handleJoinRoom = async (roomInfo: { roomId: string }) => {
 
 This section mainly introduces how to implement the core logic of scheduled rooms through atomicx-core SDK API [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) interface.
 
-![Scheduled room sequence diagram](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/8dbc9bdedfae11f08304525400454e06.png)
-
 Scheduled room sequence diagram
 
-
 ### Step 1: Initiate Schedule
 
 Use the [scheduleRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#scheduleRoom) method to create a new scheduled meeting. You need to specify the meeting's start time, end time, room name, and other information.
@@ -115,8 +106,8 @@ const { scheduleRoom } = useRoomState();
 const createSchedule = async () => {
   try {
     // roomId restriction: string type, required parameter, recommended to generate randomly
-    const roomId = '123456'; 
-    
+    const roomId = '123456';
+
     // Note: Timestamp unit must be **seconds** (Date.getTime() gets milliseconds, need to divide by 1000)
     const startTime = Math.floor(new Date().getTime() / 1000) + 3600; // Start after 1 hour
     const duration = 1800; // 30 minutes
@@ -146,7 +137,7 @@ Use the [getScheduledRoomList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/i
 import { onMounted, watch } from 'vue';
 import { useRoomState } from 'tuikit-atomicx-vue3/room';
 
-const { 
+const {
   scheduledRoomList,      // Reactive data: scheduled meeting list
   getScheduledRoomList    // Method: Retrieve list
 } = useRoomState();
@@ -155,7 +146,7 @@ const {
 onMounted(async () => {
   // cursor indicates where to start pulling data, empty string means start from beginning
   // getScheduledRoomList return value includes new cursor
-  const { cursor } = await getScheduledRoomList({ cursor: '' }); 
+  const { cursor } = await getScheduledRoomList({ cursor: '' });
   // If cursor is not empty, it means there is more data, can continue calling to retrieve
 });
 
@@ -292,58 +283,36 @@ onUnmounted(() => {
 
 4. **Pagination Handling**: The scheduled list may be very long, and the `getScheduledRoomList` interface supports paginated retrieval. Please pay attention to the `cursor` field in the return value. If it is not empty, it means there is more data.
 
-
 ## Common Questions
 1. **Schedule successful but list not updating?**
 
-
    Please confirm that you are logged in and have called `getScheduledRoomList` on the first screen (e.g., `cursor: ''`). If the returned `cursor` is not empty, you need to continue retrieving; the list is reactive and UI will synchronize after updates.
 
 2. `joinRoom`** how to pass parameters?**
 
-
    It is recommended to use object parameters uniformly: `joinRoom({ roomId, password })`, avoid directly passing strings which may cause type mismatch or limit subsequent extensions.
 
 3. **Using milliseconds for timestamp causes appointment failure?**
 
-
    All time-related parameters must be in seconds, `Date.now()` needs `/ 1000`, otherwise it will return time conflict error.
 
 4. **How to handle rooms with passwords?**
 
-
    Catch `TUIErrorCode.ERR_NEED_PASSWORD` / `ERR_WRONG_PASSWORD`, pop up password input box, re-call `joinRoom({ roomId, password })`; after multiple errors, you can prompt to contact room owner to reset.
 
 5. **roomId conflict or duplication?**
 
-
    It is recommended that roomId be generated by the backend to ensure global uniqueness; if generated by the frontend, please check for conflicts before scheduling and have a retry strategy.
 
 6. **How to continue paginated retrieval?**
 
-
    When the `cursor` returned by `getScheduledRoomList` is not empty, continue passing it in; empty means all data has been retrieved.
 
-
 ## **Sample Project**
 
 Tencent Cloud provides a sample project [atomicx-vite-vue3-ts](https://github.com/Tencent-RTC/TUIRoomKit/tree/main/Web/example/atomicx-vite-vue3-ts) on GitHub, which you can refer to for implementing complete RoomKit functionality.
 
 ## API Documentation
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**State/Component**</td>
-
-<td rowspan="1" colSpan="1" >**Feature Description**</td>
-
-<td rowspan="1" colSpan="1" >**API Documentation**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useRoomState**</td>
-
-<td rowspan="1" colSpan="1" >Room state management (create, join, schedule, etc.)</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState)</td>
-</tr>
-</table>
+| **State/Component** | **Feature Description** | **API Documentation** |
+| --- | --- | --- |
+| **useRoomState** | Room state management (create, join, schedule, etc.) | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) |