@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/components/ManageMember/MemberControl/useMemberControlHooks.ts

@@ -4,7 +4,12 @@ import { UserInfo, useRoomStore } from '../../../stores/room';
 import useGetRoomEngine from '../../../hooks/useRoomEngine';
 import { useBasicStore } from '../../../stores/basic';
 import useMasterApplyControl from '../../../hooks/useMasterApplyControl';
-import { TUIMediaDevice, TUIRole, TUIRequestCallbackType, TUIErrorCode } from '@tencentcloud/tuiroom-engine-electron';
+import {
+  TUIMediaDevice,
+  TUIRole,
+  TUIRequestCallbackType,
+  TUIErrorCode,
+} from '@tencentcloud/tuiroom-engine-electron';
 import AudioOpenIcon from '../../common/icons/AudioOpenIcon.vue';
 import VideoOpenIcon from '../../common/icons/VideoOpenIcon.vue';
 import ChatForbiddenIcon from '../../common/icons/ChatForbiddenIcon.vue';
@@ -16,15 +21,20 @@ import OffStageIcon from '../../common/icons/OffStageIcon.vue';
 import TransferOwnerIcon from '../../common/icons/TransferOwnerIcon.vue';
 import SetAdminIcon from '../../common/icons/SetAdminIcon.vue';
 import RevokeAdminIcon from '../../common/icons/RevokeAdminIcon.vue';
+import EditNameCardIcon from '../../common/icons/EditNameCardIcon.vue';
 import { storeToRefs } from 'pinia';
 import TUIMessage from '../../common/base/Message';
 import { MESSAGE_DURATION } from '../../../constants/message';
-
+import eventBus from '../../../hooks/useMitt';
+import useMemberItemHooks from '../MemberItem/useMemberItemHooks';
+import { roomService } from '../../../services';
+import { isMobile } from '../../../utils/environment';
+import { calculateByteLength } from '../../../utils/utils';
 interface ObjectType {
   [key: string]: any;
 }
 
-type ActionType = 'transferOwner' | 'kickUser' | '';
+type ActionType = 'transferOwner' | 'kickUser' | 'changeUserNameCard' | '';
 export default function useMemberControl(props?: any) {
   const roomEngine = useGetRoomEngine();
   const { t } = useI18n();
@@ -32,14 +42,33 @@ export default function useMemberControl(props?: any) {
   const basicStore = useBasicStore();
   const roomStore = useRoomStore();
   const isDialogVisible: Ref<boolean> = ref(false);
-  const dialogData: Ref<{ title: string; content: string; confirmText: string; actionType: ActionType }> = ref({
+  const isShowInput: Ref<boolean> = ref(false);
+  const editorInputEle = ref();
+  const editorInputEleContainer = ref();
+  const tempUserName = ref(props.userInfo.nameCard || props.userInfo.userName);
+  const dialogData: Ref<{
+    title: string;
+    content: string;
+    confirmText: string;
+    actionType: ActionType;
+    showInput: boolean;
+  }> = ref({
     title: '',
     content: '',
     confirmText: '',
     actionType: '' as ActionType,
+    showInput: false,
   });
-  const kickOffDialogContent = computed(() => t('whether to kick sb off the room', { name: props.userInfo.userName || props.userInfo.userId }));
-  const transferOwnerTitle = computed(() => t('Transfer the roomOwner to sb', { name: props.userInfo.userName || props.userInfo.userId }));
+  const kickOffDialogContent = computed(() =>
+    t('whether to kick sb off the room', {
+      name: roomService.getDisplayName(props.userInfo),
+    })
+  );
+  const transferOwnerTitle = computed(() =>
+    t('Transfer the roomOwner to sb', {
+      name: roomService.getDisplayName(props.userInfo),
+    })
+  );
   const {
     isFreeSpeakMode,
     isSpeakAfterTakingSeatMode,
@@ -50,7 +79,7 @@ export default function useMemberControl(props?: any) {
   } = storeToRefs(roomStore);
   /**
    * Functions related to the Raise Your Hand function
-  **/
+   **/
   const {
     agreeUserOnStage,
     denyUserOnStage,
@@ -59,44 +88,78 @@ export default function useMemberControl(props?: any) {
     kickUserOffStage,
   } = useMasterApplyControl();
 
+  const { isCanOperateMySelf } = useMemberItemHooks(props.userInfo);
+
   const isMe = computed(() => basicStore.userId === props.userInfo.userId);
   const isTargetUserAnchor = computed(() => props.userInfo.onSeat === true);
   const isTargetUserAudience = computed(() => props.userInfo.onSeat !== true);
 
   const controlList = computed(() => {
-    const agreeOrDenyStageList = props.userInfo.isUserApplyingToAnchor ? [agreeOnStage.value, denyOnStage.value] : [];
-    const inviteStageList = isTargetUserAudience.value && !props.userInfo.isUserApplyingToAnchor
-      ? [inviteOnStage.value] : [];
+    if (isCanOperateMySelf.value) {
+      return [changeUserNameCard.value];
+    }
+    const agreeOrDenyStageList = props.userInfo.isUserApplyingToAnchor
+      ? [agreeOnStage.value, denyOnStage.value]
+      : [];
+    const inviteStageList =
+      isTargetUserAudience.value && !props.userInfo.isUserApplyingToAnchor
+        ? [inviteOnStage.value]
+        : [];
     const onStageControlList = isTargetUserAnchor.value
-      ? [audioControl.value, videoControl.value, makeOffStage.value] : [];
+      ? [audioControl.value, videoControl.value, makeOffStage.value]
+      : [];
 
     const controlListObj: ObjectType = {
       freeSpeak: {
         [TUIRole.kRoomOwner]: [
-          audioControl.value, videoControl.value, chatControl.value,
-          setOrRevokeAdmin.value, transferOwner.value, kickUser.value,
+          audioControl.value,
+          videoControl.value,
+          chatControl.value,
+          setOrRevokeAdmin.value,
+          transferOwner.value,
+          kickUser.value,
+          changeUserNameCard.value,
         ],
         [TUIRole.kAdministrator]: [
-          audioControl.value, videoControl.value, chatControl.value,
+          audioControl.value,
+          videoControl.value,
+          chatControl.value,
+          changeUserNameCard.value,
         ],
       },
       speakAfterTakeSeat: {
         [TUIRole.kRoomOwner]: [
-          ...inviteStageList, ...onStageControlList, ...agreeOrDenyStageList,
-          setOrRevokeAdmin.value, transferOwner.value, chatControl.value,
+          ...inviteStageList,
+          ...onStageControlList,
+          ...agreeOrDenyStageList,
+          setOrRevokeAdmin.value,
+          transferOwner.value,
+          chatControl.value,
           kickUser.value,
+          changeUserNameCard.value,
         ],
         [TUIRole.kAdministrator]: [
-          ...inviteStageList, ...onStageControlList, ...agreeOrDenyStageList,
+          ...inviteStageList,
+          ...onStageControlList,
+          ...agreeOrDenyStageList,
           chatControl.value,
+          changeUserNameCard.value,
         ],
       },
     };
     if (isFreeSpeakMode.value) {
-      return controlListObj.freeSpeak[localUser.value.userRole as keyof ObjectType] || [];
+      return (
+        controlListObj.freeSpeak[
+          localUser.value.userRole as keyof ObjectType
+        ] || []
+      );
     }
     if (isSpeakAfterTakingSeatMode.value) {
-      return controlListObj.speakAfterTakeSeat[localUser.value.userRole as keyof ObjectType] || [];
+      return (
+        controlListObj.speakAfterTakeSeat[
+          localUser.value.userRole as keyof ObjectType
+        ] || []
+      );
     }
     return [];
   });
@@ -108,16 +171,24 @@ export default function useMemberControl(props?: any) {
     func: muteUserAudio,
   }));
 
-
   const videoControl = computed(() => {
-    const videoControlTitle = props.userInfo.hasVideoStream ? t('Disable video') : t('Enable video');
-    return { key: 'videoControl', icon: VideoOpenIcon, title: videoControlTitle, func: muteUserVideo };
+    const videoControlTitle = props.userInfo.hasVideoStream
+      ? t('Disable video')
+      : t('Enable video');
+    return {
+      key: 'videoControl',
+      icon: VideoOpenIcon,
+      title: videoControlTitle,
+      func: muteUserVideo,
+    };
   });
 
   const chatControl = computed(() => ({
     key: 'chatControl',
     icon: ChatForbiddenIcon,
-    title: props.userInfo.isMessageDisabled ? t('Enable chat') : t('Disable chat'),
+    title: props.userInfo.isMessageDisabled
+      ? t('Enable chat')
+      : t('Disable chat'),
     func: disableUserChat,
   }));
 
@@ -130,8 +201,14 @@ export default function useMemberControl(props?: any) {
 
   const setOrRevokeAdmin = computed(() => ({
     key: 'setOrRevokeAdmin',
-    icon: props.userInfo.userRole === TUIRole.kAdministrator ?  RevokeAdminIcon : SetAdminIcon,
-    title: props.userInfo.userRole === TUIRole.kAdministrator ? t('Remove administrator') : t('Set as administrator'),
+    icon:
+      props.userInfo.userRole === TUIRole.kAdministrator
+        ? RevokeAdminIcon
+        : SetAdminIcon,
+    title:
+      props.userInfo.userRole === TUIRole.kAdministrator
+        ? t('Remove administrator')
+        : t('Set as administrator'),
     func: handleSetOrRevokeAdmin,
   }));
 
@@ -144,8 +221,12 @@ export default function useMemberControl(props?: any) {
 
   const inviteOnStage = computed(() => ({
     key: 'inviteOnStage',
-    icon: props.userInfo.isInvitingUserToAnchor ? DenyOnStageIcon : InviteOnStageIcon,
-    title: props.userInfo.isInvitingUserToAnchor ?  t('Cancel stage') : t('Invite stage'),
+    icon: props.userInfo.isInvitingUserToAnchor
+      ? DenyOnStageIcon
+      : InviteOnStageIcon,
+    title: props.userInfo.isInvitingUserToAnchor
+      ? t('Cancel stage')
+      : t('Invite stage'),
     func: toggleInviteUserOnStage,
   }));
 
@@ -156,11 +237,28 @@ export default function useMemberControl(props?: any) {
     func: agreeUserOnStage,
   }));
 
-  const denyOnStage = computed(() => ({ key: 'denyOnStage', icon: DenyOnStageIcon, title: t('Refuse stage'), func: denyUserOnStage }));
-  const makeOffStage = computed(() => ({ key: 'makeOffStage', icon: OffStageIcon, title: t('Step down'), func: kickUserOffStage }));
+  const denyOnStage = computed(() => ({
+    key: 'denyOnStage',
+    icon: DenyOnStageIcon,
+    title: t('Refuse stage'),
+    func: denyUserOnStage,
+  }));
+  const makeOffStage = computed(() => ({
+    key: 'makeOffStage',
+    icon: OffStageIcon,
+    title: t('Step down'),
+    func: kickUserOffStage,
+  }));
+
+  const changeUserNameCard = computed(() => ({
+    key: 'changeUserNameCard',
+    icon: EditNameCardIcon,
+    title: t('change name'),
+    func: () => handleOpenDialog('changeUserNameCard'),
+  }));
   /**
    * Invitation to the stage/uninvitation to the stage
-  **/
+   **/
   async function toggleInviteUserOnStage(userInfo: UserInfo) {
     const { isInvitingUserToAnchor } = userInfo;
     if (isInvitingUserToAnchor) {
@@ -180,7 +278,7 @@ export default function useMemberControl(props?: any) {
 
   /**
    * Banning/Unbanning
-  **/
+   **/
   async function muteUserAudio(userInfo: UserInfo) {
     if (userInfo.hasAudioStream) {
       await roomEngine.instance?.closeRemoteDeviceByAdmin({
@@ -191,7 +289,7 @@ export default function useMemberControl(props?: any) {
       if (userInfo.isRequestingUserOpenMic) {
         TUIMessage({
           type: 'info',
-          message: `${t('An invitation to open the microphone has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+          message: `${t('An invitation to open the microphone has been sent to sb.', { name: roomService.getDisplayName(userInfo) })}`,
           duration: MESSAGE_DURATION.NORMAL,
         });
         return;
@@ -200,15 +298,23 @@ export default function useMemberControl(props?: any) {
         userId: userInfo.userId,
         device: TUIMediaDevice.kMicrophone,
         timeout: 0,
-        requestCallback: (callbackInfo: { requestCallbackType: TUIRequestCallbackType, code: TUIErrorCode }) => {
-          roomStore.setRequestUserOpenMic({ userId: userInfo.userId, isRequesting: false });
+        requestCallback: (callbackInfo: {
+          requestCallbackType: TUIRequestCallbackType;
+          code: TUIErrorCode;
+        }) => {
+          roomStore.setRequestUserOpenMic({
+            userId: userInfo.userId,
+            isRequesting: false,
+          });
           const { requestCallbackType, code } = callbackInfo;
           switch (requestCallbackType) {
             case TUIRequestCallbackType.kRequestError:
               if (code === TUIErrorCode.ERR_REQUEST_ID_REPEAT) {
                 TUIMessage({
                   type: 'warning',
-                  message: t('This member has already received the same request, please try again later'),
+                  message: t(
+                    'This member has already received the same request, please try again later'
+                  ),
                   duration: MESSAGE_DURATION.NORMAL,
                 });
               }
@@ -218,18 +324,22 @@ export default function useMemberControl(props?: any) {
       });
       TUIMessage({
         type: 'info',
-        message: `${t('An invitation to open the microphone has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+        message: `${t('An invitation to open the microphone has been sent to sb.', { name: roomService.getDisplayName(userInfo) })}`,
         duration: MESSAGE_DURATION.NORMAL,
       });
       if (request && request.requestId) {
-        roomStore.setRequestUserOpenMic({ userId: userInfo.userId, isRequesting: true, requestId: request.requestId });
+        roomStore.setRequestUserOpenMic({
+          userId: userInfo.userId,
+          isRequesting: true,
+          requestId: request.requestId,
+        });
       }
     }
   }
 
   /**
    * Banned painting/unbanned painting
-  **/
+   **/
   async function muteUserVideo(userInfo: UserInfo) {
     if (userInfo.hasVideoStream) {
       await roomEngine.instance?.closeRemoteDeviceByAdmin({
@@ -240,7 +350,7 @@ export default function useMemberControl(props?: any) {
       if (userInfo.isRequestingUserOpenCamera) {
         TUIMessage({
           type: 'info',
-          message: `${t('An invitation to open the camera has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+          message: `${t('An invitation to open the camera has been sent to sb.', { name: roomService.getDisplayName(userInfo) })}`,
           duration: MESSAGE_DURATION.NORMAL,
         });
         return;
@@ -249,15 +359,23 @@ export default function useMemberControl(props?: any) {
         userId: userInfo.userId,
         device: TUIMediaDevice.kCamera,
         timeout: 0,
-        requestCallback: (callbackInfo: { requestCallbackType: TUIRequestCallbackType, code: TUIErrorCode }) => {
-          roomStore.setRequestUserOpenCamera({ userId: userInfo.userId, isRequesting: false });
+        requestCallback: (callbackInfo: {
+          requestCallbackType: TUIRequestCallbackType;
+          code: TUIErrorCode;
+        }) => {
+          roomStore.setRequestUserOpenCamera({
+            userId: userInfo.userId,
+            isRequesting: false,
+          });
           const { requestCallbackType, code } = callbackInfo;
           switch (requestCallbackType) {
             case TUIRequestCallbackType.kRequestError:
               if (code === TUIErrorCode.ERR_REQUEST_ID_REPEAT) {
                 TUIMessage({
                   type: 'warning',
-                  message: t('This member has already received the same request, please try again later'),
+                  message: t(
+                    'This member has already received the same request, please try again later'
+                  ),
                   duration: MESSAGE_DURATION.NORMAL,
                 });
               }
@@ -267,17 +385,21 @@ export default function useMemberControl(props?: any) {
       });
       TUIMessage({
         type: 'info',
-        message: `${t('An invitation to open the camera has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+        message: `${t('An invitation to open the camera has been sent to sb.', { name: roomService.getDisplayName(userInfo) })}`,
         duration: MESSAGE_DURATION.NORMAL,
       });
       if (request && request.requestId) {
-        roomStore.setRequestUserOpenCamera({ userId: userInfo.userId, isRequesting: true, requestId: request.requestId });
+        roomStore.setRequestUserOpenCamera({
+          userId: userInfo.userId,
+          isRequesting: true,
+          requestId: request.requestId,
+        });
       }
     }
   }
   /**
    * Allow text chat / Cancel text chat
-  **/
+   **/
   async function disableUserChat(userInfo: UserInfo) {
     const { isMessageDisabled } = userInfo;
     try {
@@ -297,11 +419,12 @@ export default function useMemberControl(props?: any) {
 
   /**
    * Kick the user out of the room
-  **/
+   **/
   async function kickOffUser(userInfo: UserInfo) {
     await roomEngine.instance?.kickRemoteUserOutOfRoom({
       userId: userInfo.userId,
     });
+    roomStore.removeRemoteUser(userInfo.userId);
   }
 
   /**
@@ -311,6 +434,9 @@ export default function useMemberControl(props?: any) {
     const roomInfo = await roomEngine.instance?.fetchRoomInfo();
     if (roomInfo?.roomOwner === roomStore.localUser.userId) {
       try {
+        if (roomStore.localUser.hasScreenStream) {
+          eventBus.emit('ScreenShare:stopScreenShare');
+        }
         await roomEngine.instance?.changeUserRole({
           userId: userInfo.userId,
           userRole: TUIRole.kRoomOwner,
@@ -318,7 +444,9 @@ export default function useMemberControl(props?: any) {
         roomStore.setMasterUserId(userInfo.userId);
         TUIMessage({
           type: 'success',
-          message: t('The room owner has been transferred to sb', { name: userInfo.userName || userInfo.userId }),
+          message: t('The room owner has been transferred to sb', {
+            name: roomService.getDisplayName(userInfo),
+          }),
           duration: MESSAGE_DURATION.NORMAL,
         });
       } catch (error) {
@@ -335,41 +463,106 @@ export default function useMemberControl(props?: any) {
    * Set/Remove administrator permissions
    */
   async function handleSetOrRevokeAdmin(userInfo: UserInfo) {
-    const newRole = userInfo.userRole === TUIRole.kGeneralUser ? TUIRole.kAdministrator : TUIRole.kGeneralUser;
+    const newRole =
+      userInfo.userRole === TUIRole.kGeneralUser
+        ? TUIRole.kAdministrator
+        : TUIRole.kGeneralUser;
     await roomEngine.instance?.changeUserRole({
       userId: userInfo.userId,
       userRole: newRole,
     });
     const updatedUserName = roomStore.getUserName(userInfo.userId);
-    const tipMessage = newRole === TUIRole.kAdministrator
-      ? `${t('sb has been set as administrator', { name: updatedUserName })}`
-      : `${t('The administrator status of sb has been withdrawn', { name: updatedUserName })}`;
+    const tipMessage =
+      newRole === TUIRole.kAdministrator
+        ? `${t('sb has been set as administrator', { name: updatedUserName })}`
+        : `${t('The administrator status of sb has been withdrawn', { name: updatedUserName })}`;
     TUIMessage({ type: 'success', message: tipMessage });
     roomStore.setRemoteUserRole(userInfo.userId, newRole);
+    if (newRole === TUIRole.kGeneralUser && userInfo.hasScreenStream) {
+      await roomEngine.instance?.closeRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kScreen,
+      });
+    }
   }
 
   function handleOpenDialog(action: string) {
-    isDialogVisible.value = true;
     switch (action) {
       case 'kickUser':
+        isDialogVisible.value = true;
         dialogData.value = {
           title: t('Note'),
           content: kickOffDialogContent.value,
           confirmText: t('Confirm'),
           actionType: action,
+          showInput: false,
         };
         break;
       case 'transferOwner':
+        isDialogVisible.value = true;
         dialogData.value = {
           title: transferOwnerTitle.value,
-          content: t('After transfer the room owner, you will become a general user'),
+          content: t(
+            'After transfer the room owner, you will become a general user'
+          ),
           confirmText: t('Confirm transfer'),
           actionType: action,
+          showInput: false,
+        };
+        break;
+      case 'changeUserNameCard':
+        if (isMobile) {
+          isShowInput.value = true;
+          document?.body?.appendChild(editorInputEleContainer.value);
+        } else {
+          isDialogVisible.value = true;
+        }
+        dialogData.value = {
+          title: t('change name'),
+          content: '',
+          confirmText: t('Confirm'),
+          actionType: action,
+          showInput: true,
         };
         break;
     }
   }
 
+  const nameCardCheck = () => {
+    const result = calculateByteLength(tempUserName.value) <= 32;
+    !result &&
+      TUIMessage({
+        type: 'warning',
+        message: t('The user name cannot exceed 32 characters'),
+        duration: MESSAGE_DURATION.NORMAL,
+      });
+    return result;
+  };
+
+  /**
+   * change UserNameCard
+   */
+  async function handleChangeUserNameCard(userInfo: UserInfo) {
+    if (!nameCardCheck()) return;
+    try {
+      await roomEngine.instance?.changeUserNameCard({
+        userId: userInfo.userId,
+        nameCard: tempUserName.value,
+      });
+      TUIMessage({
+        type: 'success',
+        message: t('Name changed successfully'),
+        duration: MESSAGE_DURATION.NORMAL,
+      });
+    } catch (error) {
+      TUIMessage({
+        type: 'error',
+        message: t('change name failed, please try again.'),
+        duration: MESSAGE_DURATION.NORMAL,
+      });
+    }
+  }
+
   function handleAction(userInfo: UserInfo) {
     switch (dialogData.value.actionType) {
       case 'kickUser':
@@ -378,10 +571,15 @@ export default function useMemberControl(props?: any) {
       case 'transferOwner':
         handleTransferOwner(userInfo);
         break;
-    } isDialogVisible.value = false;
+      case 'changeUserNameCard':
+        handleChangeUserNameCard(userInfo);
+        isShowInput.value = false;
+    }
+    isDialogVisible.value = false;
   }
 
   function handleCancelDialog() {
+    tempUserName.value = props.userInfo.nameCard || props.userInfo.userName;
     isDialogVisible.value = false;
   }
 
@@ -395,5 +593,9 @@ export default function useMemberControl(props?: any) {
     handleAction,
     isDialogVisible,
     dialogData,
+    tempUserName,
+    isShowInput,
+    editorInputEle,
+    editorInputEleContainer,
   };
-};
+}

package/src/TUIRoom/components/ManageMember/MemberInvite/MemberInvite.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="member-invite-container">
+    <div class="member-invite-item">
+      <Avatar class="avatar-url" :img-src="userInfo.avatarUrl" />
+      <div class="user-name">{{ userInfo.userId || userInfo.userName }}</div>
+    </div>
+    <span class="member-invite-reject" v-if="showReject">{{
+      t('Not joining for now')
+    }}</span>
+    <span
+      class="member-invite-calling"
+      v-if="userInfo.status === TUIInvitationStatus.kPending"
+    >
+      {{ t('Calling...') }}
+    </span>
+    <tui-button v-else class="button" size="default" @click="handleInvite">
+      {{ t('Call') }}
+    </tui-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps } from 'vue';
+import { UserInfo } from '../../../stores/room';
+import Avatar from '../../common/Avatar.vue';
+import TuiButton from '../../common/base/Button.vue';
+import { useI18n } from '../../../locales';
+import { roomService, TUIInvitationStatus } from '../../../services';
+import TUIMessage from '../../common/base/Message/index';
+import { MESSAGE_DURATION } from '../../../constants/message';
+const { t } = useI18n();
+
+interface Props {
+  userInfo: UserInfo;
+}
+
+const showReject = ref(false);
+
+const handleInvite = () => {
+  roomService.conferenceInvitationManager.inviteUsers({
+    userIdList: [props.userInfo.userId],
+  });
+  TUIMessage({
+    type: 'success',
+    message: t('Invitation sent, waiting for members to join.'),
+    duration: MESSAGE_DURATION.NORMAL,
+  });
+};
+
+const props = defineProps<Props>();
+
+watch(props.userInfo, val => {
+  if (val.status === TUIInvitationStatus.kRejected) {
+    showReject.value = true;
+    setTimeout(() => {
+      showReject.value = false;
+    }, 3000);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.member-invite-container {
+  display: flex;
+  width: 100%;
+
+  .member-invite-item {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+
+  .avatar-url {
+    display: flex;
+    align-items: center;
+    width: 32px;
+    height: 32px;
+  }
+
+  .member-invite-reject {
+    display: flex;
+    align-self: center;
+    padding-right: 10px;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--font-color-1);
+  }
+
+  .member-invite-calling {
+    display: flex;
+    align-items: center;
+    padding-right: 10px;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--font-color-1);
+  }
+
+  .button {
+    width: 68px;
+  }
+
+  .user-name {
+    max-width: 100px;
+    margin-left: 12px;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--font-color-1);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>