@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/extension/RoomMessageCard/RoomMessageCard.vue

@@ -1,41 +1,55 @@
 <template>
   <div
     v-if="roomCardData.isRoomMessage"
-    :class="['room-message-container', roomCardData.isMessageFromMe ? 'isMe' : 'notMe']"
+    :class="[
+      'room-message-container',
+      roomCardData.isMessageFromMe ? 'isMe' : 'notMe',
+    ]"
   >
     <div :class="['room-message-card-container', roomCardData.roomState]">
       <div class="content">
         <div :class="['content-title', contentTitleClass]">
           <span class="icon"></span>
-          <p v-if="RoomState.CREATED === roomCardData.roomState">{{ t('Meeting in progress') }}</p>
+          <p v-if="RoomState.CREATED === roomCardData.roomState">
+            {{ t('Meeting in progress') }}
+          </p>
           <p v-else>{{ t('Meeting') }}</p>
         </div>
         <div class="content-desc">
           <div class="title">
-            {{ `${roomCardData.ownerName || roomCardData.owner}${t('Quick Conference')}` }}
+            {{
+              `${roomCardData.ownerName || roomCardData.owner}${t('Quick Conference')}`
+            }}
           </div>
           <ul class="users">
-            <template
-              v-for="(user, index) in roomCardData.userList"
-              :key="user.userId"
-            >
-              <li v-if="index <= 4">
+            <template v-for="(user, index) in roomCardData.userList">
+              <li v-if="index <= 4" :key="user.userId">
                 <img
                   :src="user.faceUrl || defaultAvatarUrl"
-                  :alt="user.nickName || user.userId" :onerror="avatarLoadError"
+                  :alt="user.nickName || user.userId"
+                  :onerror="avatarLoadError"
                 />
               </li>
-              <li v-if="index === 5" class="more">
-                ...
-              </li>
+              <li v-if="index === 5" class="more" :key="user.userId">...</li>
             </template>
           </ul>
         </div>
       </div>
-      <div :class="['footer', footerClass, roomCardData.isInnerRoom && 'in-room']">
-        <span v-if="roomInfo.visible" class="room-info">{{ roomInfo.message }}</span>
-        <span v-if="roomStatus.visible" :class="['room-status']" @click="enterRoom">{{ roomStatus.message }}</span>
-        <span v-if="roomDestroy.visible" :class="['room-info', 'center']">{{ roomDestroy.message }}</span>
+      <div
+        :class="['footer', footerClass, roomCardData.isInnerRoom && 'in-room']"
+      >
+        <span v-if="roomInfo.visible" class="room-info">{{
+          roomInfo.message
+        }}</span>
+        <span
+          v-if="roomStatus.visible"
+          :class="['room-status']"
+          @click="enterRoom"
+          >{{ roomStatus.message }}
+        </span>
+        <span v-if="roomDestroy.visible" :class="['room-info', 'center']">{{
+          roomDestroy.message
+        }}</span>
       </div>
     </div>
   </div>
@@ -49,7 +63,7 @@ import { Message, Profile } from '@tencentcloud/chat';
 import { useI18n } from '../../locales/index';
 const { t } = useI18n();
 const props = defineProps<{
-  message: Message
+  message: Message;
 }>();
 const roomCardData = ref<MessageData>({
   roomId: '',
@@ -69,7 +83,8 @@ watchEffect(() => {
   const {
     isRoomMessage,
     isRoomCreateByMe,
-    roomState, userList,
+    roomState,
+    userList,
     roomId,
     isInnerRoom,
     myProfile,
@@ -118,18 +133,29 @@ const roomInfo = computed(() => {
       message: `${t('Initiating')}...`,
     };
   }
-  if (roomCardData.value.isRoomCreateByMe && roomCardData.value.roomState === RoomState.CREATED) {
+  if (
+    roomCardData.value.isRoomCreateByMe &&
+    roomCardData.value.roomState === RoomState.CREATED
+  ) {
     return {
       visible: true,
-      message: roomCardData.value.userList.length > 1
-        ? t('X people have joined', { number: roomCardData.value.userList.length - 1 })
-        : t('Waiting for members to join the meeting'),
+      message:
+        roomCardData.value.userList.length > 1
+          ? t('X people have joined', {
+              number: roomCardData.value.userList.length - 1,
+            })
+          : t('Waiting for members to join the meeting'),
     };
   }
-  if (!roomCardData.value.isRoomCreateByMe && roomCardData.value.roomState === RoomState.CREATED) {
+  if (
+    !roomCardData.value.isRoomCreateByMe &&
+    roomCardData.value.roomState === RoomState.CREATED
+  ) {
     return {
       visible: true,
-      message: t('X people are in the meeting', { number: roomCardData.value.userList.length }),
+      message: t('X people are in the meeting', {
+        number: roomCardData.value.userList.length,
+      }),
     };
   }
   return {
@@ -141,7 +167,9 @@ const roomStatus = computed(() => {
   if (roomCardData.value.roomState === RoomState.CREATED) {
     return {
       visible: true,
-      message: roomCardData.value.isInnerRoom ? t('Already joined') : t('Enter the meeting'),
+      message: roomCardData.value.isInnerRoom
+        ? t('Already joined')
+        : t('Enter the meeting'),
     };
   }
   return {
@@ -167,7 +195,8 @@ const roomDestroy = computed(() => {
     message: '',
   };
 });
-const defaultAvatarUrl = 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';
+const defaultAvatarUrl =
+  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';
 const enterRoom = () => {
   chatExtension.enterRoom(roomCardData.value.roomId, props.message);
 };

package/src/TUIRoom/extension/RoomMessageCard/handleRoomMessage.ts

@@ -28,7 +28,10 @@ export class HandleRoomMessage {
   }
 
   public destroy() {
-    chatExtension.setHistoryMeetingMessageList('delete', { ID: this.message.ID, messageData: this.messageData });
+    chatExtension.setHistoryMeetingMessageList('delete', {
+      ID: this.message.ID,
+      messageData: this.messageData,
+    });
   }
 
   // Get card information
@@ -37,19 +40,14 @@ export class HandleRoomMessage {
     const currentUser = chatExtension.chatContext?.userID;
     const messagePayload = this.parseMessageData(message);
     if (!getIsRoomCardMessage(message)) return;
-    const {
-      businessID,
-      owner,
-      roomId,
-      roomState,
-      userList,
-      ownerName,
-    } = messagePayload;
+    const { businessID, owner, roomId, roomState, userList, ownerName } =
+      messagePayload;
     const isRoomDestroyed = roomState === RoomState.DESTROYED;
-    const isInnerRoom = chatExtension.getOnGoingRoomId() === roomId
-      && userList.some(u => u.userId === currentUser)
-      && !isRoomDestroyed;
-    const isRoomCreateByMe =  owner === currentUser;
+    const isInnerRoom =
+      chatExtension.getOnGoingRoomId() === roomId &&
+      userList.some(u => u.userId === currentUser) &&
+      !isRoomDestroyed;
+    const isRoomCreateByMe = owner === currentUser;
     if (isRoomCreateByMe && isInnerRoom && !isRoomDestroyed) {
       chatExtension.setActiveMeetingMessage(message, messagePayload);
     }
@@ -65,7 +63,10 @@ export class HandleRoomMessage {
       ownerName,
       owner,
     };
-    chatExtension.setHistoryMeetingMessageList('add', { ID: message.ID, messageData: this.messageData });
+    chatExtension.setHistoryMeetingMessageList('add', {
+      ID: message.ID,
+      messageData: this.messageData,
+    });
   }
 
   public parseMessageData(message: Message) {

package/src/TUIRoom/extension/RoomMessageCard/roomMessageCard.scss

@@ -4,6 +4,7 @@
         border-top-right-radius: 0;
     }
 }
+
 .room-message-container.notMe {
     .room-message-card-container {
         border-top-left-radius: 0;
@@ -11,21 +12,21 @@
 }
 
 .room-message-card-container {
-    width: 100%;
-    height: 100%;
-    min-width: 238px;
-    max-width: 436px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    border-radius: 1rem;
-    border: 1px solid #ddd;
+    width: 100%;
+    min-width: 238px;
+    max-width: 436px;
+    height: 100%;
     overflow: hidden;
     user-select: none;
+    border: 1px solid #ddd;
+    border-radius: 1rem;
 
     .content {
+        padding: 1.6rem 1rem 1rem;
         background: linear-gradient(90deg, #dceafd -17.36%, rgba(220, 234, 253, 0.4) 103.56%);
-        padding: 1.6rem 1rem 1rem 1rem;
         border-bottom: 1px solid #ddd;
 
         .content-title {
@@ -33,10 +34,10 @@
             flex-direction: row;
 
             .icon {
-                background-repeat: no-repeat;
-                background-position: center;
                 width: 16px;
                 margin-right: 6px;
+                background-repeat: no-repeat;
+                background-position: center;
             }
         }
 
@@ -44,9 +45,9 @@
             padding-top: .6rem;
 
             .title {
+                overflow: hidden;
                 font-size: 16px;
                 font-weight: 500;
-                overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
             }
@@ -57,8 +58,8 @@
                 margin-top: .6rem;
 
                 .more {
-                    font-weight: bold;
                     font-size: 16px;
+                    font-weight: bold;
                 }
 
                 li {
@@ -66,8 +67,8 @@
                     min-width: 27px;
                     height: 27px;
                     margin-right: 10px;
-                    border-radius: 3px;
                     overflow: hidden;
+                    border-radius: 3px;
 
                     img {
                         width: 100%;
@@ -78,30 +79,30 @@
     }
 
     .footer {
-        padding: 1rem;
-        color: #888;
+        box-sizing: border-box;
         display: flex;
-        justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
         width: 100%;
-        box-sizing: border-box;
+        padding: 1rem;
+        color: #888;
 
         .room-info {
             line-height: 21px;
         }
 
         .room-info.center {
-            text-align: center;
             width: 100%;
+            text-align: center;
         }
 
         .room-status {
-            border-radius: 4px;
-            font-weight: 900;
             padding: .6rem;
+            font-weight: 900;
+            color: #fff;
             cursor: pointer;
             background-color: #147AFF;
-            color: #fff;
+            border-radius: 4px;
         }
     }
 
@@ -134,8 +135,8 @@
 
 .room-message-card-container .footer.in-room {
     .room-status {
-        background-color: #F3F4F4;
         color: #999;
+        background-color: #F3F4F4;
     }
 }