@tencentcloud/roomkit-electron-vue3 2.3.3

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

@@ -0,0 +1,376 @@
+import { computed, Ref, ref } from 'vue';
+import { useI18n } from '../../../locales';
+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 AudioOpenIcon from '../../common/icons/AudioOpenIcon.vue';
+import VideoOpenIcon from '../../common/icons/VideoOpenIcon.vue';
+import ChatForbiddenIcon from '../../common/icons/ChatForbiddenIcon.vue';
+import KickOutIcon from '../../common/icons/KickOutIcon.vue';
+import InviteOnStageIcon from '../../common/icons/InviteOnStageIcon.vue';
+import DenyOnStageIcon from '../../common/icons/DenyOnStageIcon.vue';
+import OnStageIcon from '../../common/icons/OnStageIcon.vue';
+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 { storeToRefs } from 'pinia';
+import TUIMessage from '../../common/base/Message';
+import { MESSAGE_DURATION } from '../../../constants/message';
+
+interface ObjectType {
+  [key: string]: any;
+}
+
+type ActionType = 'transferOwner' | 'kickUser' | '';
+export default function useMemberControl(props?: any) {
+  const roomEngine = useGetRoomEngine();
+  const { t } = useI18n();
+
+  const basicStore = useBasicStore();
+  const roomStore = useRoomStore();
+  const isDialogVisible: Ref<boolean> = ref(false);
+  const dialogData: Ref<{ title: string; content: string; confirmText: string; actionType: ActionType }> = ref({
+    title: '',
+    content: '',
+    confirmText: '',
+    actionType: '' as ActionType,
+  });
+  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 { isFreeSpeakMode, isSpeakAfterTakingSeatMode, localUser, isGeneralUser } = storeToRefs(roomStore);
+  /**
+   * Functions related to the Raise Your Hand function
+  **/
+  const {
+    agreeUserOnStage,
+    denyUserOnStage,
+    inviteUserOnStage,
+    cancelInviteUserOnStage,
+    kickUserOffStage,
+  } = useMasterApplyControl();
+
+  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] : [];
+    const onStageControlList = isTargetUserAnchor.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,
+        ],
+        [TUIRole.kAdministrator]: [
+          audioControl.value, videoControl.value, chatControl.value,
+        ],
+      },
+      speakAfterTakeSeat: {
+        [TUIRole.kRoomOwner]: [
+          ...inviteStageList, ...onStageControlList, ...agreeOrDenyStageList,
+          setOrRevokeAdmin.value, transferOwner.value, chatControl.value,
+          kickUser.value,
+        ],
+        [TUIRole.kAdministrator]: [
+          ...inviteStageList, ...onStageControlList, ...agreeOrDenyStageList,
+          chatControl.value,
+        ],
+      },
+    };
+    if (isFreeSpeakMode.value) {
+      return controlListObj.freeSpeak[localUser.value.userRole as keyof ObjectType] || [];
+    }
+    if (isSpeakAfterTakingSeatMode.value) {
+      return controlListObj.speakAfterTakeSeat[localUser.value.userRole as keyof ObjectType] || [];
+    }
+    return [];
+  });
+
+  const audioControl = computed(() => ({
+    key: 'audioControl',
+    icon: AudioOpenIcon,
+    title: props.userInfo.hasAudioStream ? t('Mute') : t('Unmute'),
+    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 chatControl = computed(() => ({
+    key: 'chatControl',
+    icon: ChatForbiddenIcon,
+    title: props.userInfo.isChatMutedByMasterOrAdmin ? t('Enable chat') : t('Disable chat'),
+    func: disableUserChat,
+  }));
+
+  const transferOwner = computed(() => ({
+    key: 'transferOwner',
+    icon: TransferOwnerIcon,
+    title: t('Transfer owner'),
+    func: () => handleOpenDialog('transferOwner'),
+  }));
+
+  const setOrRevokeAdmin = computed(() => ({
+    key: 'setOrRevokeAdmin',
+    icon: props.userInfo.userRole === TUIRole.kAdministrator ?  RevokeAdminIcon : SetAdminIcon,
+    title: props.userInfo.userRole === TUIRole.kAdministrator ? t('Revoke administrator') : t('Set as administrator'),
+    func: handleSetOrRevokeAdmin,
+  }));
+
+  const kickUser = computed(() => ({
+    key: 'kickUser',
+    icon: KickOutIcon,
+    title: t('Kick out'),
+    func: () => handleOpenDialog('kickUser'),
+  }));
+
+  const inviteOnStage = computed(() => ({
+    key: 'inviteOnStage',
+    icon: props.userInfo.isInvitingUserToAnchor ? DenyOnStageIcon : InviteOnStageIcon,
+    title: props.userInfo.isInvitingUserToAnchor ?  t('Cancel stage') : t('Invite stage'),
+    func: toggleInviteUserOnStage,
+  }));
+
+  const agreeOnStage = computed(() => ({
+    key: 'agreeOnStage',
+    icon: OnStageIcon,
+    title: t('Agree to the stage'),
+    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 }));
+  /**
+   * Invitation to the stage/uninvitation to the stage
+  **/
+  async function toggleInviteUserOnStage(userInfo: UserInfo) {
+    const { isInvitingUserToAnchor } = userInfo;
+    if (isInvitingUserToAnchor) {
+      cancelInviteUserOnStage(userInfo);
+    } else {
+      inviteUserOnStage(userInfo);
+    }
+  }
+
+  /**
+   * Banning/Unbanning
+  **/
+  async function muteUserAudio(userInfo: UserInfo) {
+    if (userInfo.hasAudioStream) {
+      await roomEngine.instance?.closeRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kMicrophone,
+      });
+    } else {
+      if (userInfo.isRequestingUserOpenMic) {
+        TUIMessage({
+          type: 'info',
+          message: `${t('An invitation to open the microphone has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+          duration: MESSAGE_DURATION.NORMAL,
+        });
+        return;
+      }
+      const request = await roomEngine.instance?.openRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kMicrophone,
+        timeout: 0,
+        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'),
+                  duration: MESSAGE_DURATION.NORMAL,
+                });
+              }
+              break;
+          }
+        },
+      });
+      TUIMessage({
+        type: 'info',
+        message: `${t('An invitation to open the microphone has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+        duration: MESSAGE_DURATION.NORMAL,
+      });
+      if (request && 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({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kCamera,
+      });
+    } else {
+      if (userInfo.isRequestingUserOpenCamera) {
+        TUIMessage({
+          type: 'info',
+          message: `${t('An invitation to open the camera has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+          duration: MESSAGE_DURATION.NORMAL,
+        });
+        return;
+      }
+      const request = await roomEngine.instance?.openRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kCamera,
+        timeout: 0,
+        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'),
+                  duration: MESSAGE_DURATION.NORMAL,
+                });
+              }
+              break;
+          }
+        },
+      });
+      TUIMessage({
+        type: 'info',
+        message: `${t('An invitation to open the camera has been sent to sb.', { name: userInfo.userName || userInfo.userId })}`,
+        duration: MESSAGE_DURATION.NORMAL,
+      });
+      if (request && request.requestId) {
+        roomStore.setRequestUserOpenCamera({ userId: userInfo.userId, isRequesting: true, requestId: request.requestId });
+      }
+    }
+  }
+  /**
+   * Allow text chat / Cancel text chat
+  **/
+  function disableUserChat(userInfo: UserInfo) {
+    const currentState = userInfo.isChatMutedByMasterOrAdmin;
+    roomStore.setMuteUserChat(userInfo.userId, !currentState);
+    roomEngine.instance?.disableSendingMessageByAdmin({
+      userId: userInfo.userId,
+      isDisable: !currentState,
+    });
+  }
+
+  /**
+   * Kick the user out of the room
+  **/
+  async function kickOffUser(userInfo: UserInfo) {
+    await roomEngine.instance?.kickRemoteUserOutOfRoom({
+      userId: userInfo.userId,
+    });
+  }
+
+  /**
+   * Transfer host to user
+   */
+  async function handleTransferOwner(userInfo: UserInfo) {
+    const roomInfo = await roomEngine.instance?.fetchRoomInfo();
+    if (roomInfo?.roomOwner === roomStore.localUser.userId) {
+      try {
+        await roomEngine.instance?.changeUserRole({
+          userId: userInfo.userId,
+          userRole: TUIRole.kRoomOwner,
+        });
+        roomStore.setMasterUserId(userInfo.userId);
+        TUIMessage({
+          type: 'success',
+          message: t('The room owner has been transferred to sb', { name: userInfo.userName || userInfo.userId }),
+          duration: MESSAGE_DURATION.NORMAL,
+        });
+      } catch (error) {
+        TUIMessage({
+          type: 'error',
+          message: t('Transfer owner failed, please try again.'),
+          duration: MESSAGE_DURATION.NORMAL,
+        });
+      }
+    }
+  }
+
+  /**
+   * Set/revoke administrator permissions
+   */
+  async function handleSetOrRevokeAdmin(userInfo: UserInfo) {
+    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 })}`;
+    TUIMessage({ type: 'success', message: tipMessage });
+    roomStore.setRemoteUserRole(userInfo.userId, newRole);
+  }
+
+  function handleOpenDialog(action: string) {
+    isDialogVisible.value = true;
+    switch (action) {
+      case 'kickUser':
+        dialogData.value = {
+          title: t('Note'),
+          content: kickOffDialogContent.value,
+          confirmText: t('Confirm'),
+          actionType: action,
+        };
+        break;
+      case 'transferOwner':
+        dialogData.value = {
+          title: transferOwnerTitle.value,
+          content: t('After transfer the room owner, you will become a general user'),
+          confirmText: t('Confirm transfer'),
+          actionType: action,
+        };
+        break;
+    }
+  }
+
+  function handleAction(userInfo: UserInfo) {
+    switch (dialogData.value.actionType) {
+      case 'kickUser':
+        kickOffUser(userInfo);
+        break;
+      case 'transferOwner':
+        handleTransferOwner(userInfo);
+        break;
+    } isDialogVisible.value = false;
+  }
+
+  function handleCancelDialog() {
+    isDialogVisible.value = false;
+  }
+
+  return {
+    props,
+    isMe,
+    isGeneralUser,
+    controlList,
+    kickOffDialogContent,
+    handleCancelDialog,
+    handleAction,
+    isDialogVisible,
+    dialogData,
+  };
+};

package/src/TUIRoom/components/ManageMember/MemberItem/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="member-item-container"
+    @mouseenter="openMemberControl"
+    @mouseleave="closeMemberControl"
+  >
+    <member-info :user-info="props.userInfo" :show-state-icon="!showMemberControl"></member-info>
+    <member-control
+      v-show="showMemberControl"
+      :show-member-control="showMemberControl"
+      :user-info="props.userInfo"
+    ></member-control>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MemberInfo from '../MemberItemCommon/MemberInfo.vue';
+import MemberControl from '../MemberControl/index.vue';
+import { UserInfo } from '../../../stores/room';
+import useMemberItem from './useMemberItemHooks';
+import { ref, watch } from 'vue';
+
+interface Props {
+  userInfo: UserInfo,
+}
+
+const props = defineProps<Props>();
+
+const {
+  isMemberControlAccessible,
+  openMemberControl,
+  closeMemberControl,
+} = useMemberItem(props.userInfo);
+
+const showMemberControl = ref(false);
+
+watch(isMemberControlAccessible, (accessible: boolean) => {
+  showMemberControl.value = accessible;
+});
+
+</script>
+
+<style lang="scss" scoped>
+.tui-theme-black .member-item-container {
+  --hover-bg-color: rgba(79, 88, 107, 0.2);
+}
+.tui-theme-white .member-item-container {
+  --hover-bg-color: rgba(213, 224, 242, 0.3);
+}
+
+.member-item-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 52px;
+  padding: 0 20px;
+  justify-content: space-between;
+  &:hover {
+    cursor: pointer;
+    background: var(--hover-bg-color);
+  }
+}
+</style>

package/src/TUIRoom/components/ManageMember/MemberItem/useMemberItemHooks.ts

@@ -0,0 +1,37 @@
+import { computed, ref } from 'vue';
+import { UserInfo, useRoomStore } from '../../../stores/room';
+import { storeToRefs } from 'pinia';
+import { TUIRole } from '@tencentcloud/tuiroom-engine-electron';
+
+// The user ID that needs to display the operation panel
+const showUserId = ref('');
+
+export default function useMemberItem(userInfo: UserInfo) {
+  const roomStore = useRoomStore();
+  const { isMaster, isAdmin } = storeToRefs(roomStore);
+  // Does the current user have permission to operate
+  const isCanOperateCurrentMember = computed(() => {
+    const isTargetUserRoomOwner = userInfo.userRole === TUIRole.kRoomOwner;
+    const isTargetUserGeneral = userInfo.userRole === TUIRole.kGeneralUser;
+    return (isMaster.value && !isTargetUserRoomOwner) || (isAdmin.value && isTargetUserGeneral);
+  });
+  const isMemberControlAccessible = computed(() => (
+    // Only the homeowner or administrator can open the control panel
+    userInfo.userId === showUserId.value) && isCanOperateCurrentMember.value);
+
+  function openMemberControl() {
+    showUserId.value = userInfo.userId;
+  }
+
+  function closeMemberControl() {
+    showUserId.value = '';
+  }
+
+  return {
+    isMemberControlAccessible,
+    openMemberControl,
+    closeMemberControl,
+  };
+}
+
+

package/src/TUIRoom/components/ManageMember/MemberItemCommon/MemberInfo.vue

@@ -0,0 +1,195 @@
+<template>
+  <!-- User base information -->
+  <div :class="[isMobile ? 'member-info-mobile' : 'member-info']">
+    <div :class="!showStateIcon && isTargetUserAdmin ? 'member-basic-info-admin' : 'member-basic-info'">
+      <Avatar class="avatar-url" :img-src="userInfo.avatarUrl"></Avatar>
+      <div class="user-name">{{ userInfo.userName || userInfo.userId }}</div>
+      <div class="role-info">
+        <svg-icon
+          v-if="isTargetUserRoomOwner || isTargetUserAdmin"
+          :icon="UserIcon"
+          :color="isTargetUserAdmin ? '#F06C4B' : '#4791FF'"
+          :class="isTargetUserAdmin ? 'admin-icon' : 'master-icon'"
+        />
+        <div :class="`user-extra-info ${isTargetUserAdmin ? 'user-extra-info-admin' : ''}`">{{ extraInfo }}</div>
+      </div>
+    </div>
+    <!-- User audio and video status information -->
+    <div v-if="showStateIcon" class="member-av-state">
+      <svg-icon
+        v-for="(item, index) in iconList"
+        :key="index"
+        :icon="item.icon"
+        :class="['state-icon', { 'disable-icon': item.disable }]"
+        :size="item.size"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import Avatar from '../../common/Avatar.vue';
+import { useBasicStore } from '../../../stores/basic';
+import { UserInfo, useRoomStore } from '../../../stores/room';
+import { storeToRefs } from 'pinia';
+import SvgIcon from '../../common/base/SvgIcon.vue';
+import VideoOpenIcon from '../../common/icons/VideoOpenIcon.vue';
+import VideoCloseIcon from '../../common/icons/VideoCloseIcon.vue';
+import AudioOpenIcon from '../../common/icons/AudioOpenIcon.vue';
+import AudioCloseIcon from '../../common/icons/AudioCloseIcon.vue';
+import ScreenOpenIcon from '../../common/icons/ScreenOpenIcon.vue';
+import ApplyActiveIcon from '../../common/icons/ApplyActiveIcon.vue';
+import { useI18n } from '../../../locales';
+import { isMobile } from '../../../utils/environment';
+import UserIcon from '../../common/icons/UserIcon.vue';
+import { TUIRole } from '@tencentcloud/tuiroom-engine-electron';
+
+const { t } = useI18n();
+
+interface Props {
+  userInfo: UserInfo,
+  showStateIcon: Boolean,
+}
+
+const props = defineProps<Props>();
+const basicStore = useBasicStore();
+const roomStore = useRoomStore();
+const { isMaster, isSpeakAfterTakingSeatMode } = storeToRefs(roomStore);
+
+const isMe = computed(() => basicStore.userId === props.userInfo.userId);
+
+const isTargetUserRoomOwner = computed(() => props.userInfo.userRole === TUIRole.kRoomOwner);
+const isTargetUserAdmin = computed(() => props.userInfo.userRole === TUIRole.kAdministrator);
+
+const extraInfo = computed(() => {
+  if (isMaster.value && isMe.value) {
+    return `${t('Host')}, ${t('Me')}`;
+  }
+  if (isTargetUserRoomOwner.value) {
+    return t('Host');
+  }
+  if (isTargetUserAdmin.value && isMe.value) {
+    return `${t('Admin')}, ${t('Me')}`;
+  }
+  if (isTargetUserAdmin.value) {
+    return t('Admin');
+  }
+  if (isMe.value) {
+    return t('Me');
+  }
+  return '';
+});
+
+const isAudienceRole = computed(() => isSpeakAfterTakingSeatMode.value && !props.userInfo.onSeat);
+
+const iconList = computed(() => {
+  const list = [];
+  if (props.userInfo.hasScreenStream) {
+    list.push({ icon: ScreenOpenIcon });
+  }
+  if (!isAudienceRole.value) {
+    list.push({ icon: props.userInfo.hasAudioStream ? AudioOpenIcon : AudioCloseIcon });
+    list.push({ icon: props.userInfo.hasVideoStream ? VideoOpenIcon : VideoCloseIcon });
+  }
+  if (isAudienceRole.value && !props.userInfo.isUserApplyingToAnchor) {
+    list.push({ icon: AudioCloseIcon, disable: true });
+    list.push({ icon: VideoCloseIcon, disable: true });
+  }
+  if (isAudienceRole.value && props.userInfo.isUserApplyingToAnchor) {
+    list.push({ icon: ApplyActiveIcon, size: 20 });
+  }
+  return list;
+});
+</script>
+
+<style lang="scss" scoped>
+
+.tui-theme-black .member-av-state {
+  --icon-color: #A3AEC7;
+}
+
+.tui-theme-white .member-av-state {
+  --icon-color: #B2BBD1;
+}
+.member-info,
+.member-info-mobile {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  .member-basic-info
+  ,.member-basic-info-admin {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .avatar-url {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      border-radius: 50%;
+      align-items: center;
+    }
+    .user-name {
+      margin-left: 12px;
+      font-size: 14px;
+      font-weight: 400;
+      color: var(--font-color-1);
+      line-height: 22px;
+      max-width: 100px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .role-info {
+      display: flex;
+      .master-icon,
+      .admin-icon {
+        color: var(--active-color-2);
+        margin-left: 8px;
+        display: flex;
+      }
+      .admin-icon {
+        color: var(--orange-color);
+      }
+      .user-extra-info,
+      .user-extra-info-admin {
+        line-height: 20px;
+        font-size: 14px;
+        font-weight: 400;
+        margin-left: 4px;
+        padding: 2px;
+        color: var(--active-color-2);
+        padding: 0 6px;
+      }
+      .user-extra-info-admin {
+        transition: none;
+        color: var(--orange-color);
+      }
+    }
+  }
+
+  .member-basic-info-admin {
+    .user-name {
+      max-width: 40px;
+    }
+  }
+
+  .member-av-state {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--icon-color);
+    .state-icon {
+      margin-left: 16px;
+    }
+    .disable-icon {
+      opacity: 0.4;
+    }
+  }
+}
+
+.member-info-mobile {
+  align-items: center;
+  width: 80vw;
+}
+</style>