@tencent-rtc/mcp 1.4.6 → 1.6.0-beta.1

package/resource/{doc/roomkit/vue/features → knowledge/roomkit/core-sdk/vue}/room-view.md

@@ -1,37 +1,37 @@
-This document will guide you in using Atomicx's core view component `RoomView` to implement video rendering for real-time audio and video rooms. By configuring layout templates and utilizing component slots, you can quickly implement video layout switching and personalized customization.
+This document guides you through using Atomicx's core view component `RoomView` to render the video display of a real-time audio/video room. By configuring layout templates and leveraging component slots, you can quickly implement video layout switching and personalized customization.
 
-`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.
+`RoomView` is the main container component in Atomicx responsible for rendering the video display. It automatically handles the subscription, rendering, and release of video streams, so you only need to focus on its layout configuration and UI enhancements.
 
 ## 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:
-- **Intelligent Performance Management**: Supports lazy loading of video streams within the viewport, and can automatically switch between high and low-definition streams based on stream area size and number of remote streams, significantly reducing system energy consumption and bandwidth usage.
+As the core view container for multi-party audio/video rooms, `RoomView` comes with several enterprise-grade audio/video processing capabilities built in:
+- **Intelligent performance management**: Supports lazy loading of video streams within the viewport, and can automatically switch between high- and low-definition streams based on the stream area size and the number of remote streams, significantly reducing system power consumption and bandwidth usage.
 
-- **Fine-grained Sorting Strategy**: The system automatically adjusts frame order based on roles (host priority) and media status (audio and video enabled priority).
+- **Fine-grained sorting strategy**: The system automatically adjusts the display order based on role (host first) and media status (audio/video enabled first).
 
-- **Interactive Speaker Mode**: Supports double-clicking to lock the main screen, and in sidebar or top bar layouts, supports collapsing non-core areas to focus on presentation content.
+- **Interactive speaker mode**: Supports double-clicking to pin the main view, and collapsing non-core areas in sidebar or top-bar layouts to focus on the presentation content.
 
-- **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.
+- **Immersive visual design**: All video windows are forced to maintain the standard `16:9` aspect ratio, and combined with an interactively displayed toolbar, provide a distraction-free multi-party audio/video room experience.
 
-## Customizable Range
+## Customizable Scope
 
-`RoomView` focuses only on underlying video stream playback, while giving developers all "presentation rights" at the view layer. Using `RoomView`, you can freely define:
-- **Layout Switching**: Transform layouts in real-time according to business scenarios (e.g., speaker mode or discussion mode).
+`RoomView` focuses solely on the underlying playback of video streams, while handing over all "presentation control" of the view layer to the developer. With `RoomView`, you can freely define:
+- **Layout switching**: Change the layout in real time based on the business scenario (for example, presentation mode or discussion mode).
 
-- **Video Widget UI:** Including name tags, volume dynamic waveforms, role badges, etc.
+- **Video widget UI:** Includes nickname labels, dynamic volume waveforms, role badges, and more.
 
 ## **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.
+- The user has completed login authentication via [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-LoginState). Please refer to the 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.
+- The user has entered the room via [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-RoomState). See 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).
+- The global `UIKitProvider` has been configured in `App.vue`. For details, see [Configuring App.vue](https://cloud.tencent.com/document/product/647/81962#ce98ee15-b0cb-43af-81da-70f51231430e).
 
-## Implementing Video Layout Feature
+## Implementing the Video Layout Feature
 
-### Step 1: Import and Render Basic Layout
+### Step 1: Import and Render the Basic Layout
 
-In your meeting page (e.g., RoomLayoutView.vue), import `RoomView` and the layout enum `RoomLayoutTemplate`.
+In your meeting page (for example, RoomLayoutView.vue), import `RoomView` and the layout enum `RoomLayoutTemplate`.
 ``` typescript
 <template>
   <div class="room-container">
@@ -55,22 +55,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.
+> `RoomView` automatically fills the height and width of its parent container, so make sure its parent container has explicit dimensions.
 >
 
-### Step 2: Switch Layout Mode
+### Step 2: Switch the Layout Mode
 
-You can dynamically update the `layoutTemplate` attribute value of `RoomView` based on business logic (e.g., clicking a switch button).
-| Property Name | Type | Default Value | Description |
-| --- | --- | --- | --- |
-| `layoutTemplate` | `RoomLayoutTemplate` | `RoomLayoutTemplate.GridLayout` | Video stream layout |
+You can dynamically update the value of the `RoomView` property `layoutTemplate` based on your business logic (for example, clicking a toggle button).
 
-`RoomLayoutTemplate` optional value analysis:
-| 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. |
+|Property|Type|Default Value|Description|
+|---------|---------|---------|---------|
+|`layoutTemplate`|`RoomLayoutTemplate`|`RoomLayoutTemplate.GridLayout`|Video stream layout|
+
+Explanation of the available values of `RoomLayoutTemplate`:
+
+|Layout Mode|Enum Value|Description|
+|---------|---------|---------|
+|Grid layout|`RoomLayoutTemplate.GridLayout`|The default layout. All participants' videos are arranged evenly, with pagination supported when there are more than 9 participants.|
+|Sidebar layout|`RoomLayoutTemplate.SidebarLayout`|The main view is prominently displayed, and the other participants' videos are arranged as a sidebar, suitable for scenarios such as presentations and reports.|
+|Top-bar layout|`RoomLayoutTemplate.CinemaLayout`|The main view is prominently displayed, and the other participants' videos are arranged as a top bar, suitable for scenarios such as presentations and reports.<br>|
 
 ``` typescript
 <template>
@@ -88,10 +90,10 @@ You can dynamically update the `layoutTemplate` attribute value of `RoomView` ba
 <script setup lang="ts">
 import { ref } from 'vue';
 import { RoomView, RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
-// Default to grid layout
+// Use the grid layout by default
 const currentLayout = ref(RoomLayoutTemplate.GridLayout);
 
-// Switch layout
+// Switch the layout
 const switchLayout = (layout: RoomLayoutTemplate) => {
   currentLayout.value = layout;
 };
@@ -107,30 +109,30 @@ const switchLayout = (layout: RoomLayoutTemplate) => {
 
 ### Step 3: Implement Video Stream Widget Information
 
-You can customize UI display content for video screens (e.g., set nicknames, add custom icons) by using the `participantViewUI` slot.
+You can use the `participantViewUI` slot to customize the UI content displayed on the video (for example, setting the nickname or adding custom icons).
 
-| 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) |
+|Slot Parameter|Type|Description|
+|---------|---------|---------|
+|`participant`|`RoomParticipant`|The participant object corresponding to the current video stream, containing the user's real-time status information such as `userId`, `userName`, and `role`.|
+|`streamType`|`VideoStreamType`|Distinguishes whether the current stream is a camera stream (Camera) or a screen sharing stream (Screen).|
 
-#### Prepare Visual Resources
+#### Prepare Visual Assets
 
-To provide complete interactive feedback, it is recommended to prepare the following icons in advance:
-- Microphone status icons: Distinguish between enabled, muted, and dynamic volume bars.
+To provide complete interaction feedback, it is recommended that you prepare the following icons in advance:
+- Microphone status icon: distinguishes between enabled, muted, and dynamic volume bars.
 
-- Identity icons: Used to distinguish room owner (Owner), administrator (Admin), and regular members.
+- Identity indicator icon: used to distinguish between the Owner, Admin, and regular members.
 
-- Network signal icons: Display real-time uplink/downlink network quality.
+- Network signal icon: displays the real-time uplink/downlink network quality.
 
-   > **Special Note:**
+   > **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.
+   > We provide royalty-free icons in the @tencentcloud/uikit-base-component-vue3 npm package of the example project, which you can import and use directly.
    >
 
 #### Implementation Code Example
-1. Add file `ParticipantViewUI.vue` to implement UI rendering logic for a single video stream widget layer.
+1. Add a new file `ParticipantViewUI.vue` to implement the UI rendering logic for a single video stream widget layer.
 
    ``` typescript
    <template>
@@ -199,7 +201,7 @@ To provide complete interactive feedback, it is recommended to prepare the follo
    .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>
    ```
-2. Configure `RoomView` slot to render video stream widget content on the page.
+2. Configure the `RoomView` slot to render the video stream widget content on the page.
 
    ``` typescript
    <template>
@@ -218,26 +220,25 @@ To provide complete interactive feedback, it is recommended to prepare the follo
    // Import the newly added ParticipantViewUI.vue file
    import ParticipantViewUI from './ParticipantViewUI.vue';
 
-   // Default to grid layout
+   // Use the grid layout by default
    const currentLayout = ref(RoomLayoutTemplate.GridLayout);
    </script>
    ```
 
 ## API Documentation
-| **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
+|**State/Component**|**Description**|**API Documentation**|
+|---------|---------|---------|
+|**useRoomParticipantState**|Contains in-room user data and user management interfaces.|[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-RoomParticipantState)|
 
-### **Does RoomView include screen share stream rendering?**
+## FAQ
 
-`RoomView` has built-in remote screen share stream rendering. For local screen sharing, you need to complete local screen share placeholder UI through the `participantViewUI` slot.
+### **Does RoomView include rendering of screen sharing streams?**
 
-### Does RoomView include default UI widgets?
+`RoomView` has built-in rendering of remote screen sharing streams. For local screen sharing, you need to complete the placeholder UI for the local screen sharing via the `participantViewUI` slot.
 
-`RoomView` has no default UI widgets internally. You can refer to [RoomView Open Source Usage Example](https://github.com/Tencent-RTC/TUIRoomKit/tree/main/Web/example/atomicx-vite-vue3-ts/src/components/RoomLayoutView) to quickly complete custom UI widgets.
+### Does RoomView include UI widgets by default?
 
-### If the layouts provided by RoomView do not meet requirements, can more optional layouts be provided?
+`RoomView` has no default UI widgets internally. You can refer to the [RoomView open-source usage example](https://github.com/Tencent-RTC/TUIRoomKit/tree/main/Web/example/atomicx-vite-vue3-ts/src/components/RoomLayoutView) to quickly build custom UI widgets.
 
-`RoomView` currently supports grid layout, sidebar, and top bar layouts. If you have customization needs, please [contact us](https://cloud.tencent.com/document/product/647/19906).
+### None of the layouts provided by RoomView meet my needs. Can more optional layouts be provided?

package/resource/knowledge/roomkit/core-sdk/vue/schedule-room.md

@@ -0,0 +1,319 @@
+The schedule room feature allows users to plan meeting time, topic, and join password in advance. With this feature, users can create future meeting plans, generate a dedicated meeting number and join link, making it easy to notify participants ahead of time.
+
+## Use Cases
+- **Recurring enterprise meetings:** Schedule weekly and monthly meetings in advance to ensure participants are notified early.
+
+- **Online class scheduling:** Teachers can set up a full week's class schedule in advance.
+
+- **Remote interview booking:** HR can book specific time slots for candidates and interviewers.
+
+## Prerequisites
+- **User status:** The user has completed login authentication via useLoginState (see Integration Overview) and is in the **logged-in** state, which is required to schedule rooms or view the scheduled room list.
+
+- **Environment dependency:** The project has already imported `tuikit-atomicx-vue3`.
+
+## Implementing the Schedule Room Feature
+
+This feature provides two integration approaches. You can choose the one that best fits your business needs:
+- **Approach 1 (Recommended):** Quick integration using UI components. Directly import the schedule room panel ([ScheduleRoomPanel](https://github.com/Tencent-RTC/TUIKit_Vue3/blob/main/packages/tuikit-atomicx-vue3/src/components/ScheduleRoomPanel/ScheduleRoomPanel.vue)) and the scheduled room list component ([ScheduledRoomList](https://github.com/Tencent-RTC/TUIKit_Vue3/blob/main/packages/tuikit-atomicx-vue3/src/components/ScheduleRoomPanel/ScheduledRoomList.vue)) provided by `tuikit-atomicx-vue3`, which has the lowest development cost.
+
+- **Approach 2 (Advanced):** Custom integration using low-level APIs. Implement the UI and interaction logic yourself based on the atomicx-core SDK API `useRoomState` state hook, which offers the highest flexibility.
+
+## Approach 1: Quick Integration Using UI Components
+
+`tuikit-atomicx-vue3` provides two core components:
+- [**ScheduleRoomPanel**](https://github.com/Tencent-RTC/TUIKit_Vue3/blob/main/packages/tuikit-atomicx-vue3/src/components/ScheduleRoomPanel/ScheduleRoomPanel.vue)**:** The configuration panel for scheduling meetings, including time selection, member invitation, and more.
+
+- [**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, supporting click-to-join, modify, and cancel operations.
+
+### Step 1: Import the Components
+``` typescript
+import { ScheduleRoomPanel, ScheduledRoomList } from 'tuikit-atomicx-vue3/room';
+```
+
+### Step 2: Use the Components
+
+You can combine and use these two components directly in your page.
+``` typescript
+<template>
+  <UIKitProvider theme="light" language="en-US">
+    <div class="schedule-container">
+      <!-- Schedule button; clicking it shows the schedule dialog -->
+      <button @click="showSchedulePanel = true">
+        Schedule a Meeting
+      </button>
+
+      <!-- Scheduled room list component -->
+      <div class="list-container">
+        <!-- Listen to the join-room event to handle join logic -->
+        <ScheduledRoomList @join-room="handleJoinRoom" />
+      </div>
+
+      <!-- Schedule panel dialog -->
+      <!-- It is recommended to wrap it in a Dialog or Modal component -->
+      <div v-if="showSchedulePanel" class="modal-mask">
+        <div class="modal-content">
+          <ScheduleRoomPanel
+            @confirm="handleScheduleConfirm"
+            @cancel="showSchedulePanel = false"
+          />
+        </div>
+      </div>
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { ScheduleRoomPanel, ScheduledRoomList, useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { joinRoom } = useRoomState();
+
+const showSchedulePanel = ref(false);
+
+const handleScheduleConfirm = (roomId: string, options: Record<string, any>) => {
+  console.log('Scheduled successfully', roomId, options);
+  showSchedulePanel.value = false;
+  // Optional: show the invitation dialog or copy the link
+};
+
+const handleJoinRoom = async (roomInfo: { roomId: string }) => {
+  console.log('Join clicked', roomInfo.roomId);
+  await joinRoom(roomInfo.roomId);
+};
+</script>
+
+<style scoped>
+.schedule-container{padding:24px;max-width:1000px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}button{background-color:#006eff;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s;margin-bottom:24px}button:hover{background-color:#0056cc}.list-container{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05);padding:16px}.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.1);padding:24px;width:100%;max-width:480px}
+</style>
+```
+
+## Approach 2: Custom Integration Using Low-Level APIs
+
+This section mainly describes how to implement the core logic of scheduling rooms through the atomicx-core SDK API [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-RoomState) interface.
+
+Schedule room sequence diagram
+
+### Step 1: Create a Schedule
+
+Use the [scheduleRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#scheduleRoom) method to create a new scheduled meeting. You need to specify information such as the meeting's start time, end time, and room name.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { scheduleRoom } = useRoomState();
+
+const createSchedule = async () => {
+  try {
+    // roomId constraints: string type, required parameter, recommended to be randomly generated
+    const roomId = '123456';
+
+    // Note: the timestamp unit must be **seconds** (Date.getTime() returns milliseconds, so divide by 1000)
+    const startTime = Math.floor(new Date().getTime() / 1000) + 3600; // starts in 1 hour
+    const duration = 1800; // 30 minutes
+
+    const options = {
+      roomName: 'Product Requirements Review',
+      scheduleStartTime: startTime, // unit: seconds
+      scheduleEndTime: startTime + duration, // unit: seconds
+      scheduleAttendees: ['userA', 'userB'], // list of invited participant IDs
+      password: '123', // optional: set a join password
+      isAllMicrophoneDisabled: false, // optional: whether to mute all microphones
+      isAllCameraDisabled: false,     // optional: whether to disable all cameras
+    };
+
+    await scheduleRoom({ roomId, options });
+    console.log('Scheduled successfully', roomId);
+  } catch (error) {
+    console.error('Scheduling failed', error);
+  }
+};
+```
+
+### Step 2: Get the Scheduled Room List
+
+Use the [getScheduledRoomList](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#getScheduledRoomList) method to fetch the current user's scheduled meeting list. The list data is reactively updated into the [scheduledRoomList](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#scheduledRoomList) state.
+``` typescript
+import { onMounted, watch } from 'vue';
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const {
+  scheduledRoomList,      // reactive data: scheduled meeting list
+  getScheduledRoomList    // method: fetch the list
+} = useRoomState();
+
+// Load the list on initialization
+onMounted(async () => {
+  // cursor indicates where to start fetching data; an empty string means start from the beginning
+  // getScheduledRoomList returns a new cursor
+  const { cursor } = await getScheduledRoomList({ cursor: '' });
+  // If cursor is not empty, there is more data available and you can continue fetching
+});
+
+// Watch for list changes and update the UI in real time
+watch(scheduledRoomList, (list) => {
+  console.log('Current scheduled list:', list);
+});
+```
+
+### Step 3: Modify a Schedule
+
+If you need to adjust the time or topic of a scheduled meeting, you can use the [updateScheduledRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#updateScheduledRoom) method.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { updateScheduledRoom } = useRoomState();
+
+const updateRoom = async (roomId: string) => {
+  try {
+    const newStartTime = Math.floor(new Date().getTime() / 1000) + 7200; // postpone by 2 hours
+    const options = {
+      roomName: 'Product Requirements Review (Rescheduled)',
+      scheduleStartTime: newStartTime,
+      scheduleEndTime: newStartTime + 1800,
+    };
+
+    await updateScheduledRoom({ roomId, options });
+    console.log('Modified successfully');
+  } catch (error) {
+    console.error('Modification failed', error);
+  }
+};
+```
+
+### Step 4: Cancel a Schedule
+
+If you need to cancel a scheduled meeting, you can call the [cancelScheduledRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#cancelScheduledRoom) method.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { cancelScheduledRoom } = useRoomState();
+
+const cancelRoom = async (roomId: string) => {
+  try {
+    await cancelScheduledRoom({ roomId });
+    console.log('Canceled successfully');
+    // After a successful cancellation, scheduledRoomList updates automatically; no manual re-fetch is needed
+  } catch (error) {
+    console.error('Cancellation failed', error);
+  }
+};
+```
+
+### Step 5: Handle the Join Password
+
+For scheduled meetings that have a password set, when calling the [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#joinRoom) interface to join, you need to catch the authentication failure error and guide the user to enter the password.
+``` typescript
+import { useRoomState, TUIErrorCode } from 'tuikit-atomicx-vue3/room';
+
+const { joinRoom } = useRoomState();
+
+const enterRoom = async (roomId: string, password?: string) => {
+  try {
+    await joinRoom({ roomId, password });
+  } catch (error: any) {
+    // Catch the specific error code, TUIErrorCode.ERR_NEED_PASSWORD (-2010)
+    if (error.code === TUIErrorCode.ERR_NEED_PASSWORD) {
+      console.log('This room requires a password; please guide the user to enter it');
+      // 1. Pop up the password input box
+      // 2. Get the password entered by the user, inputPassword
+      // 3. Call enterRoom(roomId, inputPassword) again
+    } else if (error.code === TUIErrorCode.ERR_WRONG_PASSWORD) {
+      console.error('Incorrect password, please try again');
+    } else {
+      console.error('Failed to join the room', error);
+    }
+  }
+};
+```
+
+### Step 6: Listen to Schedule Events
+
+In addition to passively reacting to data changes, you can also listen to specific schedule events to handle business logic, such as showing a reminder when a meeting is about to start.
+``` typescript
+import { onMounted, onUnmounted } from 'vue';
+import { useRoomState, RoomEvent } from 'tuikit-atomicx-vue3/room';
+
+const { subscribeEvent, unsubscribeEvent } = useRoomState();
+
+// Meeting starting soon notification (default: 5 minutes before start)
+const handleRoomStartingSoon = (info: { roomInfo: any }) => {
+  console.log('Meeting starting soon:', info.roomInfo.roomName);
+  // You can implement a Toast reminder or system notification here
+};
+
+// Meeting canceled notification
+const handleRoomCancelled = (info: { roomInfo: any; operateUser: any }) => {
+  console.log(`Meeting ${info.roomInfo.roomName} has been canceled by ${info.operateUser.userName}`);
+};
+
+// New meeting invitation received notification
+const handleRoomAdded = (info: { roomInfo: any }) => {
+  console.log('Received a new meeting invitation:', info.roomInfo.roomName);
+};
+
+// Removed from meeting notification
+const handleRemovedFromRoom = (info: { roomInfo: any; operateUser: any }) => {
+  console.log(`You have been removed from meeting ${info.roomInfo.roomName} by ${info.operateUser.userName}`);
+};
+
+onMounted(() => {
+  // Register event listeners
+  subscribeEvent(RoomEvent.onScheduledRoomStartingSoon, handleRoomStartingSoon);
+  subscribeEvent(RoomEvent.onScheduledRoomCancelled, handleRoomCancelled);
+  subscribeEvent(RoomEvent.onAddedToScheduledRoom, handleRoomAdded);
+  subscribeEvent(RoomEvent.onRemovedFromScheduledRoom, handleRemovedFromRoom);
+});
+
+onUnmounted(() => {
+  // Remove event listeners
+  unsubscribeEvent(RoomEvent.onScheduledRoomStartingSoon, handleRoomStartingSoon);
+  unsubscribeEvent(RoomEvent.onScheduledRoomCancelled, handleRoomCancelled);
+  unsubscribeEvent(RoomEvent.onAddedToScheduledRoom, handleRoomAdded);
+  unsubscribeEvent(RoomEvent.onRemovedFromScheduledRoom, handleRemovedFromRoom);
+});
+```
+
+## Development Notes
+1. **Timestamp unit**: All time parameters involved in the SDK (for example, `scheduleStartTime` and `scheduleEndTime`) are in **seconds**, not the milliseconds used by default by the JavaScript `Date` object. Be sure to perform the `/ 1000` operation before passing them.
+
+2. **Style import**: When using UI components, be sure to import `UIKitProvider`, otherwise the component styles will not render correctly.
+
+3. **RoomID recommendation**: Although `scheduleRoom` allows the frontend to pass in a `roomId`, to avoid ID conflicts, it is recommended that this ID be generated by the business backend and be globally unique.
+
+4. **Pagination handling**: The scheduled room list can be very long, and the `getScheduledRoomList` interface supports paginated fetching. Pay attention to the `cursor` field in the return value; if it is not empty, there is more data available.
+
+## FAQ
+1. **Scheduled successfully but the list does not update?**
+
+   Please confirm that you are logged in and that `getScheduledRoomList` was called on the first screen (for example, `cursor: ''`). If the returned `cursor` is not empty, you need to continue fetching; the list is reactive, so the UI will sync after it updates.
+
+2. **How should I pass the** `joinRoom` **parameters?**
+
+   It is recommended to consistently use object arguments: `joinRoom({ roomId, password })`, to avoid passing a string directly, which can cause type mismatches or limit future extensibility.
+
+3. **Does using milliseconds for the timestamp cause scheduling to fail?**
+
+   All time-related parameters must be in seconds; `Date.now()` needs to be divided by 1000 (`/ 1000`), otherwise a time conflict error will be returned.
+
+4. **How do I handle a room that has a password set?**
+
+   Catch `TUIErrorCode.ERR_NEED_PASSWORD` / `ERR_WRONG_PASSWORD`, pop up the password input box, and call `joinRoom({ roomId, password })` again; after multiple errors, you can prompt the user to contact the room owner to reset it.
+
+5. **roomId conflicts or duplicates?**
+
+   It is recommended that the backend generate a globally unique roomId; if generated on the frontend, check for conflicts before scheduling and implement a proper retry strategy.
+
+6. **How do I continue fetching with pagination?**
+
+   When the `cursor` returned by `getScheduledRoomList` is not empty, continue passing it in; an empty value means all data has been fetched.
+
+## **Sample Project**
+
+Tencent Cloud provides the 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 reference to implement the complete RoomKit functionality.
+
+## API Documentation
+
+|**State/Component**|**Description**|**API Documentation**|
+|---------|---------|---------|
+|**useRoomState**|Room state management (create, join, schedule, etc.)|[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-RoomState)|