@tencent-rtc/mcp 1.3.8 → 1.4.0

package/resource/doc/roomkit/vue/features/free-beauty-panel.md

@@ -7,15 +7,13 @@ The basic beauty feature allows users to apply skin smoothing, whitening, and ru
 
 - **Online Education:** Teachers and students maintain a clean and natural appearance, creating a good classroom atmosphere.
 
-
 ## Prerequisites
-- **User Status:** The user has completed login authentication through useLoginState, refer to [Integration Overview](https://write.woa.com/document/197379797539790848), and is in **logged in** status.
+- **User Status:** The user has completed login authentication through useLoginState, refer to Integration Overview, and is in **logged in** status.
 
 - **Environment Dependencies:** The project has imported `tuikit-atomicx-vue3`.
 
 - **Device Requirements:** A working camera device is required, and the user has authorized camera access. If the user denies authorization, the virtual background feature will not be available.
 
-
 ## Implementing Basic Beauty Feature
 
 This feature provides two integration solutions. You can choose the most suitable one according to business needs:
@@ -23,15 +21,11 @@ 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 [useFreeBeautyState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-FreeBeautyState) state hook to implement UI and interaction logic yourself, with the highest flexibility.
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/70883e08df0d11f08304525400454e06.png)
-
-
 ## Solution 1: Quick Integration Using UI Components
 
 `tuikit-atomicx-vue3` provides a core beauty settings panel component:
 - [**FreeBeautyPanel**](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/FreeBeautyPanel)**:** Basic beauty configuration panel, including parameter adjustment functions for skin smoothing, whitening, and ruddiness.
 
-
 ### Step 1: Import Component
 ``` typescript
 import { FreeBeautyPanel } from 'tuikit-atomicx-vue3/room';
@@ -44,10 +38,10 @@ It is generally recommended to place `FreeBeautyPanel` in a dialog or modal, tri
 **The following example shows how to implement a complete interaction for clicking a button to open beauty settings:**
 
 > **Note:**
-> 
+>
 
-> All TUIKit components must be wrapped inside [UIKitProvider](https://write.woa.com/document/197379797539790848), otherwise they will not be able to obtain context dependencies, causing style anomalies.
-> 
+> All TUIKit components must be wrapped inside UIKitProvider, otherwise they will not be able to obtain context dependencies, causing style anomalies.
+>
 
 ``` typescript
 <template>
@@ -63,7 +57,7 @@ It is generally recommended to place `FreeBeautyPanel` in a dialog or modal, tri
             <span>Basic Beauty</span>
             <button @click="showSettings = false">Close</button>
           </div>
-          
+
           <div class="modal-body">
             <!-- 3. Import panel component -->
             <!-- @close event: Triggered when user clicks the close button (if any) inside the panel -->
@@ -115,7 +109,6 @@ The internal logic of this component is as follows:
 
 - **Save and Apply:** When closing the panel (triggering `@close` event), the current settings are automatically saved to take effect for remote users.
 
-
 ## Solution 2: Custom Integration Using Underlying API
 
 This section mainly introduces how to implement basic beauty through atomicx-core SDK API [useFreeBeautyState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-FreeBeautyState) interface.
@@ -125,10 +118,10 @@ This section mainly introduces how to implement basic beauty through atomicx-cor
 When users adjust beauty parameters (e.g., dragging sliders), use [setFreeBeauty](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setFreeBeauty) for real-time preview. At this time, the effect is only visible locally and will not be transmitted to remote users.
 
 > **Note:**
-> 
+>
 
 > Parameter values range from 0-100.
-> 
+>
 
 ``` typescript
 import { useFreeBeautyState } from 'tuikit-atomicx-vue3/room';
@@ -151,10 +144,10 @@ const updatePreview = async (beauty: number, white: number, ruddy: number) => {
 After users confirm the preview effect is satisfactory, call [saveBeautySetting](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#saveBeautySetting) to apply the current configuration to the video stream. At this time, remote users can see the beauty effect.
 
 > **Note:**
-> 
+>
 
 > The virtual background feature depends on camera devices. You can use [useDeviceState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) to check device status.
-> 
+>
 > - [cameraList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#cameraList): List of currently available camera devices. If the list is empty, it means no camera was detected or camera permission was denied.
 
 ``` typescript
@@ -180,7 +173,7 @@ const closeBeauty = async () => {
     whitenessLevel: 0,
     ruddinessLevel: 0
   });
-  
+
   // 2. Save to apply
   await saveBeautySetting();
 };
@@ -195,7 +188,6 @@ const closeBeauty = async () => {
 
 - **Performance Consumption:** Enabling beauty will increase CPU and GPU load. It is recommended to guide users to use moderately on low-end devices.
 
-
 ## Common Questions
 
 ### **Why can't remote users see the effect after adjusting beauty?**
@@ -213,26 +205,11 @@ No. `useFreeBeautyState` has internally implemented automatic state management:
 
 - Entering/exiting rooms: All beauty parameters are automatically reset when exiting a room, no need for developers to clean up manually.
 
-
 ## **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" >**useFreeBeautyState**</td>
-
-<td rowspan="1" colSpan="1" >Free beauty feature management</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-FreeBeautyState)</td>
-</tr>
-</table>
+| **State/Component** | **Feature Description** | **API Documentation** |
+| --- | --- | --- |
+| **useFreeBeautyState** | Free beauty feature management | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-FreeBeautyState) |

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

@@ -7,15 +7,13 @@ The in-room chat feature allows members within a meeting to interact in real-tim
 
 - **Live Teaching:** Students can send bullet comments or questions in the chat area, and teachers can view and answer in real-time, enhancing classroom interaction.
 
-
 ## Prerequisites
 
 Before integrating this feature, please ensure the following conditions are met:
-- **User Status:** The user has completed login authentication through useLoginState, refer to [Integration Overview](https://write.woa.com/document/197379797539790848), and is already in a room as the room owner or member, refer to [Room Management](https://write.woa.com/document/197379861957083136).
+- **User Status:** The user has completed login authentication through useLoginState, refer to Integration Overview, and is already in a room as the room owner or member, refer to Room Management.
 
 - **Environment Dependencies:** The project has correctly installed and imported `tuikit-atomicx-vue3`.
 
-
 ## Implementing In-Room Chat Feature
 
 This feature provides two integration solutions. You can choose the most suitable one according to business needs:
@@ -23,11 +21,8 @@ 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 [useMessageListState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-MessageListState) and [useMessageInputState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-MessageInputState) state hooks to implement UI and interaction logic yourself, with the highest flexibility.
 
-   ![In-room chat](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/8c740e5cdf1111f09143525400bf7822.png)
-
    In-room chat
 
-
 ## Solution 1: Quick Integration Using UI Components
 
 `tuikit-atomicx-vue3` provides two core components:
@@ -35,13 +30,12 @@ This feature provides two integration solutions. You can choose the most suitabl
 
 - [**MessageInput**](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/MessageInput)**:** Message input component that supports sending text, emojis, images, and files, and can be automatically disabled based on mute status.
 
-
 ### Step 1: Data Initialization
 
 After the user successfully joins a room, you need to call the [setActiveConversation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setActiveConversation) interface to initialize chat data. It is recommended to listen for changes in [currentRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#currentRoom) to handle this automatically.
 
 > **Note:**
-> 
+>
 > - `GROUP` is a fixed prefix, the `setActiveConversation` parameter must be ``GROUP${roomId}``, otherwise messages cannot be sent or received normally.
 > - `GROUP` is the fixed prefix for IM SDK group conversations (refer to [IM Conversation Types](https://web.sdk.qcloud.com/im/doc/zh-cn/Conversation.html)). Room chat is based on IM groups, so the conversation ID must be in the ``GROUP${roomId}`` format.
 
@@ -67,10 +61,10 @@ watch(() => currentRoom.value?.roomId, (roomId) => {
 In your page, you can directly combine these two components. Also combine [useRoomParticipantState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState) to get the current user's mute status and control the availability of the input box.
 
 > **Note:**
-> 
+>
 
-> All TUIKit components must be wrapped inside [UIKitProvider](https://write.woa.com/document/197379797539790848), otherwise they will not be able to obtain context dependencies, causing style anomalies.
-> 
+> All TUIKit components must be wrapped inside UIKitProvider, otherwise they will not be able to obtain context dependencies, causing style anomalies.
+>
 
 ``` typescript
 <template>
@@ -108,7 +102,7 @@ const { localParticipant } = useRoomParticipantState();
 const isMessageDisabled = computed(() => localParticipant.value?.isMessageDisabled);
 
 // Dynamically display placeholder prompt based on status
-const inputPlaceholder = computed(() => 
+const inputPlaceholder = computed(() =>
   isMessageDisabled.value ? 'You have been muted' : 'Please enter message...'
 );
 </script>
@@ -151,18 +145,17 @@ const openChatWindow = () => {
 This section mainly introduces how to implement a custom chat interface through atomicx-core SDK API [useMessageListState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-MessageListState) and [useMessageInputState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-MessageInputState) interfaces.
 
 > **Note:**
-> 
+>
 
 > `MessageInputState` supports integration with `@tiptap/vue-3` editor by default. If you only need a simple text input box (e.g., `<input>` or `<textarea>`), please **ignore** `setEditorInstance`, `setContent` and other APIs bound to editor instances, and directly use `updateRawValue` and `sendMessage`.
-> 
-
+>
 
 #### Step 1: Data Initialization
 
 After the user successfully joins a room, you need to call the [setActiveConversation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setActiveConversation) interface to initialize chat data. It is recommended to listen for changes in [currentRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#currentRoom) to handle this automatically.
 
 > **Note:**
-> 
+>
 > - `GROUP` is a fixed prefix, the `setActiveConversation` parameter must be ``GROUP${roomId}``, otherwise messages cannot be sent or received normally.
 > - When switching rooms or exiting a room, it is recommended to reset or clear the active conversation to avoid sending messages to the wrong conversation.
 
@@ -189,7 +182,7 @@ Use [useMessageListState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.
 ``` typescript
 import { useMessageListState } from 'tuikit-atomicx-vue3/chat';
 
-const { 
+const {
   messageList,      // Reactive message list
   loadMoreOlderMessage, // Method to load more history messages
   hasMoreOlderMessage,   // Whether there are more history messages
@@ -207,7 +200,7 @@ Use [useMessageInputState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index
 ``` typescript
 import { useMessageInputState } from 'tuikit-atomicx-vue3/chat';
 
-const { 
+const {
   inputRawValue,  // Reactive data: current input content
   updateRawValue, // Method: Update input content (will automatically trigger "other party is typing" status)
   sendMessage     // Method: Send message
@@ -216,17 +209,17 @@ const {
 const handleSend = async () => {
   // Validate non-empty
   if (!inputRawValue.value) return;
-  
+
   try {
     // 1. Send message
     // Method A: Send the content of current inputRawValue
     await sendMessage();
-    
+
     // Method B: Directly send specified text (not dependent on inputRawValue)
     // await sendMessage('Hello World');
 
     console.log('Sent successfully');
-    
+
     // 2. Clear input box after successful send
     // Key point: In non-rich text mode, must use updateRawValue('') to clear
     // Do not use setContent(''), this method only takes effect after binding an editor instance
@@ -237,10 +230,10 @@ const handleSend = async () => {
 };
 
 // Example: Bind to native input box
-// <input 
-//   :value="inputRawValue" 
-//   @input="(e) => updateRawValue(e.target.value)" 
-//   @keyup.enter="handleSend" 
+// <input
+//   :value="inputRawValue"
+//   @input="(e) => updateRawValue(e.target.value)"
+//   @keyup.enter="handleSend"
 // />
 ```
 
@@ -249,15 +242,15 @@ const handleSend = async () => {
 Use the [loadMoreOlderMessage](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-MessageListState) method to paginate and pull history messages. Usually triggered when scrolling to the top of the list.
 
 > **Note:**
-> 
+>
 
 > After loading history messages, you usually need to manually adjust the scroll position to keep the current viewing perspective from jumping.
-> 
+>
 
 ``` typescript
 import { useMessageListState } from 'tuikit-atomicx-vue3/chat';
 
-const { 
+const {
   hasMoreOlderMessage,
   loadMoreOlderMessage
 } = useMessageListState();
@@ -266,9 +259,9 @@ const loadHistory = async () => {
   if (hasMoreOlderMessage.value) {
     // Record scroll height before loading
     // const previousHeight = scrollContainer.value.scrollHeight;
-    
+
     await loadMoreOlderMessage();
-    
+
     // Restore scroll position after DOM update
     // nextTick(() => {
     //   const currentHeight = scrollContainer.value.scrollHeight;
@@ -282,7 +275,7 @@ const loadHistory = async () => {
 
 If you need read receipt functionality, you can use [setEnableReadReceipt](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setEnableReadReceipt).
 ``` typescript
-const { 
+const {
   setEnableReadReceipt, // Enable/disable read receipts
 } = useMessageListState();
 
@@ -293,45 +286,36 @@ setEnableReadReceipt(true);
 ## Development Notes
 - **Mute Status Synchronization**
 
-
    `localParticipant.isMessageDisabled` is controlled by room administrators. When administrators enable "mute all" or individually mute a user, this property will automatically update. Please be sure to bind this property to the input box's `disabled` state to restrict user speaking at the frontend level.
 
 - **Conversation Switch Timing**
 
-
    Ensure `setActiveConversation` is called after successfully entering the room and when `roomId` has a value. If called before entering the room, it may fail because the SDK has not finished initialization or is not logged in.
 
 - **Container Layout Requirements (Important)**
 
-
    The message list component internally handles scrolling logic, so **the parent container must have a fixed height** (e.g., `height: 100%` or specific pixel value) and set `overflow: hidden`, otherwise the list will stretch infinitely and cannot scroll.
 
 - **Message Type Handling**
 
-
    `messageList` contains multiple types of messages (text, images, files, etc.). When customizing rendering, you need to distinguish and handle according to `msg.type`.
 
 - **Input State Management**
 
-
    Using `updateRawValue` to update input content will automatically trigger "other party is typing" status notification (if supported). Using only `inputRawValue.value = 'xxx'` may not trigger this status.
 
 - **History Message Scroll Maintenance**
 
-
    In custom development, after calling `loadMoreOlderMessage` to load history messages, the DOM height will increase. To prevent view jumping, you need to record `scrollHeight` before loading, and adjust `scrollTop` after loading (`nextTick`) by calculating the height difference.
 
 - **New Message Scroll Strategy**
 
-
    It is recommended to implement "smart scroll" logic: when users are at the bottom of the list, automatically scroll to the bottom when receiving new messages; when users are browsing history messages, keep the current position unchanged and display a "new message" prompt bubble.
 
 - **Conversation ID Format Requirements**
 
-
    When calling `setActiveConversation`, you must use the ``GROUP${roomId}`` format (GROUP is a fixed prefix). This is the standard format for IM SDK group conversations, cannot be customized or prefix omitted, otherwise messages cannot be sent or received normally.
 
-
 ## Common Questions
 
 **Failed to switch to group conversation or message list is empty?**
@@ -376,52 +360,10 @@ Component class names in `tuikit-atomicx-vue3` are usually stable. You can use C
 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>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useRoomParticipantState**</td>
-
-<td rowspan="1" colSpan="1" >Room participant management (member list, permission control)</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useConversationListState**</td>
-
-<td rowspan="1" colSpan="1" >Conversation list management</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-ConversationListState)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useMessageListState**</td>
-
-<td rowspan="1" colSpan="1" >Message list management</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-MessageListState)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useMessageInputState**</td>
-
-<td rowspan="1" colSpan="1" >Message input management</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-MessageInputState)</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) |
+| **useRoomParticipantState** | Room participant management (member list, permission control) | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState) |
+| **useConversationListState** | Conversation list management | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-ConversationListState) |
+| **useMessageListState** | Message list management | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-MessageListState) |
+| **useMessageInputState** | Message input management | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-MessageInputState) |

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

@@ -9,20 +9,15 @@ The member management module covers a complete set of capabilities for displayin
 
 - **Tiered Management:** Supports differentiated permission strategies for room owners, administrators, and regular members.
 
-
 ## 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 entered the room through [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState), please refer to [Room Management](https://write.woa.com/document/197379861957083136).
+- 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.
 
+- User has entered the room through [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState), please refer to Room Management.
 
 ## Integrating Member Management Component
 
 If you need to quickly build a member list interface, it's recommended to directly use the `RoomParticipantList` component. `RoomParticipantList` is an out-of-the-box participant list component with built-in complete member management UI and interactions.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/9407bc54dbe911f0a4f35254007c27c5.png)
-
-
 Example code for integrating `RoomParticipantList` component:
 ``` typescript
 <template>
@@ -43,11 +38,11 @@ Example code for integrating `RoomParticipantList` component:
 <script setup lang="ts">
 import { ref } from 'vue';
 import { IconClose } from '@tencentcloud/uikit-base-component-vue3';
-import { 
+import {
   RoomView,
   RoomParticipantList,
   useRoomState,
-  useRoomParticipantState 
+  useRoomParticipantState
 } from 'tuikit-atomicx-vue3/room';
 
 const { currentRoom } = useRoomState();
@@ -86,11 +81,10 @@ const { participantList } = useRoomParticipantState();
 ```
 
 > **Note:**
-> 
+>
 > - `RoomParticipantList` will automatically fill the height and width of its parent container, please ensure its parent container has explicit dimensions.
 > - When using the `RoomParticipantList` component, ensure global `UIKitProvider` is configured in `App.vue`, please refer to [Configure App.vue](https://cloud.tencent.com/document/product/647/81962#ce98ee15-b0cb-43af-81da-70f51231430e).
 
-
 ## Implementing Member Management Features
 
 If you need to customize member list UI or trigger management actions in specific business scenarios, please use [useRoomParticipantState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState).
@@ -118,11 +112,10 @@ const handleLoadMore = async () => {
 ```
 
 > **Note:**
-> 
+>
 
 > Data successfully fetched by `getParticipantList` interface will be automatically maintained in `participantList`, UI only needs to render data from `participantList`.
-> 
-
+>
 
 ### Step 2: Render Participant Information
 
@@ -137,15 +130,15 @@ Developers can use [participantList](https://web.sdk.qcloud.com/trtc/live/web/do
       </button>
     </div>
     <div class="list-content">
-      <div 
-        v-for="participant in participantList" 
+      <div
+        v-for="participant in participantList"
         :key="participant.userId"
         class="participant-item"
       >
         <!-- Avatar -->
-        <Avatar 
-          :user-id="participant.userId" 
-          :avatar-url="participant.avatarUrl" 
+        <Avatar
+          :user-id="participant.userId"
+          :avatar-url="participant.avatarUrl"
         />
 
         <!-- User info -->
@@ -153,14 +146,14 @@ Developers can use [participantList](https://web.sdk.qcloud.com/trtc/live/web/do
           <div class="user-name">
             <span>{{ participant.userName }}</span>
             <span v-if="participant.userId === localParticipant.userId" class="badge">Me</span>
-            <span 
-              v-if="participant.role === RoomParticipantRole.Owner" 
+            <span
+              v-if="participant.role === RoomParticipantRole.Owner"
               class="role-badge owner"
             >
               Owner
             </span>
-            <span 
-              v-else-if="participant.role === RoomParticipantRole.Admin" 
+            <span
+              v-else-if="participant.role === RoomParticipantRole.Admin"
               class="role-badge admin"
             >
               Admin
@@ -170,15 +163,15 @@ Developers can use [participantList](https://web.sdk.qcloud.com/trtc/live/web/do
 
         <!-- Device status -->
         <div class="device-status">
-          <IconMicOn 
+          <IconMicOn
             size="20"
-            v-if="participant.microphoneStatus === DeviceStatus.On" 
+            v-if="participant.microphoneStatus === DeviceStatus.On"
             class="icon-on"
           />
           <IconMicOff size="20" v-else class="icon-off" />
           <IconCameraOn
             size="20"
-            v-if="participant.cameraStatus === DeviceStatus.On" 
+            v-if="participant.cameraStatus === DeviceStatus.On"
             class="icon-on"
           />
           <IconCameraOff size="20" v-else class="icon-off" />
@@ -191,15 +184,15 @@ Developers can use [participantList](https://web.sdk.qcloud.com/trtc/live/web/do
 <script setup lang="ts">
 import { computed } from 'vue';
 import { IconRefresh, IconMicOn, IconMicOff, IconCameraOn, IconCameraOff } from '@tencentcloud/uikit-base-component-vue3';
-import { 
+import {
   useRoomParticipantState,
   Avatar,
   RoomParticipantRole,
   DeviceStatus
 } from 'tuikit-atomicx-vue3/room';
 
-const { 
-  localParticipant, 
+const {
+  localParticipant,
   participantList,
   getParticipantList,
   transferOwner
@@ -231,11 +224,11 @@ Developers can use the [updateParticipantMetaData](https://web.sdk.qcloud.com/tr
 <script setup lang="ts">
 import { computed } from 'vue';
 import { IconRefresh, IconMicOn, IconMicOff, IconCameraOn, IconCameraOff } from '@tencentcloud/uikit-base-component-vue3';
-import { 
+import {
   useRoomParticipantState,
 } from 'tuikit-atomicx-vue3/room';
 
-const { 
+const {
   updateParticipantMetaData,
 } = useRoomParticipantState();
 
@@ -362,27 +355,12 @@ await kickParticipant({ userId });
 
 ### Step 9: Invite Others to Join Room
 
-In real business scenarios, you may need to initiate call invitations to users not yet in the room. Atomicx provides complete call system support, please see [In-Meeting Call](https://write.woa.com/document/197380078005506048).
+In real business scenarios, you may need to initiate call invitations to users not yet in the room. Atomicx provides complete call system support, please see In-Meeting Call.
 
 ## 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 user data in the room and user management interfaces.</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 user data in the room and user management interfaces. | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState) |
 
 ## Development Recommendations