@tencentcloud/roomkit-electron-vue3 2.3.3

package/es/components/ManageMember/MemberControl/useMemberControlHooks.d.ts

@@ -0,0 +1,21 @@
+import { UserInfo } from '../../../stores/room';
+import { Ref } from 'vue';
+
+type ActionType = 'transferOwner' | 'kickUser' | '';
+export default function useMemberControl(props?: any): {
+    props: any;
+    isMe: import('vue').ComputedRef<boolean>;
+    isGeneralUser: any;
+    controlList: import('vue').ComputedRef<any>;
+    kickOffDialogContent: import('vue').ComputedRef<any>;
+    handleCancelDialog: () => void;
+    handleAction: (userInfo: UserInfo) => void;
+    isDialogVisible: Ref<boolean>;
+    dialogData: Ref<{
+        title: string;
+        content: string;
+        confirmText: string;
+        actionType: ActionType;
+    }>;
+};
+export {};

package/es/components/ManageMember/MemberControl/useMemberControlHooks.mjs

@@ -0,0 +1,341 @@
+import { ref, computed } from "vue";
+import { useI18n } from "../../../locales/index.mjs";
+import { useRoomStore } from "../../../stores/room.mjs";
+import useGetRoomEngine from "../../../hooks/useRoomEngine.mjs";
+import { useBasicStore } from "../../../stores/basic.mjs";
+import useMasterApplyControl from "../../../hooks/useMasterApplyControl.mjs";
+import { TUIRole, TUIMediaDevice, TUIRequestCallbackType, TUIErrorCode } from "@tencentcloud/tuiroom-engine-electron";
+import AudioOpenIcon from "../../common/icons/AudioOpenIcon.vue.mjs";
+import VideoOpenIcon from "../../common/icons/VideoOpenIcon.vue.mjs";
+import ChatForbiddenIcon from "../../common/icons/ChatForbiddenIcon.vue.mjs";
+import KickOutIcon from "../../common/icons/KickOutIcon.vue.mjs";
+import InviteOnStageIcon from "../../common/icons/InviteOnStageIcon.vue.mjs";
+import DenyOnStageIcon from "../../common/icons/DenyOnStageIcon.vue.mjs";
+import OnStageIcon from "../../common/icons/OnStageIcon.vue.mjs";
+import OffStageIcon from "../../common/icons/OffStageIcon.vue.mjs";
+import TransferOwnerIcon from "../../common/icons/TransferOwnerIcon.vue.mjs";
+import SetAdminIcon from "../../common/icons/SetAdminIcon.vue.mjs";
+import RevokeAdminIcon from "../../common/icons/RevokeAdminIcon.vue.mjs";
+import { storeToRefs } from "pinia";
+import renderMsg from "../../common/base/Message/Message.mjs";
+import { MESSAGE_DURATION } from "../../../constants/message.mjs";
+function useMemberControl(props) {
+  const roomEngine = useGetRoomEngine();
+  const { t } = useI18n();
+  const basicStore = useBasicStore();
+  const roomStore = useRoomStore();
+  const isDialogVisible = ref(false);
+  const dialogData = ref({
+    title: "",
+    content: "",
+    confirmText: "",
+    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);
+  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 = {
+      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] || [];
+    }
+    if (isSpeakAfterTakingSeatMode.value) {
+      return controlListObj.speakAfterTakeSeat[localUser.value.userRole] || [];
+    }
+    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 }));
+  async function toggleInviteUserOnStage(userInfo) {
+    const { isInvitingUserToAnchor } = userInfo;
+    if (isInvitingUserToAnchor) {
+      cancelInviteUserOnStage(userInfo);
+    } else {
+      inviteUserOnStage(userInfo);
+    }
+  }
+  async function muteUserAudio(userInfo) {
+    var _a, _b;
+    if (userInfo.hasAudioStream) {
+      await ((_a = roomEngine.instance) == null ? void 0 : _a.closeRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kMicrophone
+      }));
+    } else {
+      if (userInfo.isRequestingUserOpenMic) {
+        renderMsg({
+          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 ((_b = roomEngine.instance) == null ? void 0 : _b.openRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kMicrophone,
+        timeout: 0,
+        requestCallback: (callbackInfo) => {
+          roomStore.setRequestUserOpenMic({ userId: userInfo.userId, isRequesting: false });
+          const { requestCallbackType, code } = callbackInfo;
+          switch (requestCallbackType) {
+            case TUIRequestCallbackType.kRequestError:
+              if (code === TUIErrorCode.ERR_REQUEST_ID_REPEAT) {
+                renderMsg({
+                  type: "warning",
+                  message: t("This member has already received the same request, please try again later"),
+                  duration: MESSAGE_DURATION.NORMAL
+                });
+              }
+              break;
+          }
+        }
+      }));
+      renderMsg({
+        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 });
+      }
+    }
+  }
+  async function muteUserVideo(userInfo) {
+    var _a, _b;
+    if (userInfo.hasVideoStream) {
+      await ((_a = roomEngine.instance) == null ? void 0 : _a.closeRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kCamera
+      }));
+    } else {
+      if (userInfo.isRequestingUserOpenCamera) {
+        renderMsg({
+          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 ((_b = roomEngine.instance) == null ? void 0 : _b.openRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kCamera,
+        timeout: 0,
+        requestCallback: (callbackInfo) => {
+          roomStore.setRequestUserOpenCamera({ userId: userInfo.userId, isRequesting: false });
+          const { requestCallbackType, code } = callbackInfo;
+          switch (requestCallbackType) {
+            case TUIRequestCallbackType.kRequestError:
+              if (code === TUIErrorCode.ERR_REQUEST_ID_REPEAT) {
+                renderMsg({
+                  type: "warning",
+                  message: t("This member has already received the same request, please try again later"),
+                  duration: MESSAGE_DURATION.NORMAL
+                });
+              }
+              break;
+          }
+        }
+      }));
+      renderMsg({
+        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 });
+      }
+    }
+  }
+  function disableUserChat(userInfo) {
+    var _a;
+    const currentState = userInfo.isChatMutedByMasterOrAdmin;
+    roomStore.setMuteUserChat(userInfo.userId, !currentState);
+    (_a = roomEngine.instance) == null ? void 0 : _a.disableSendingMessageByAdmin({
+      userId: userInfo.userId,
+      isDisable: !currentState
+    });
+  }
+  async function kickOffUser(userInfo) {
+    var _a;
+    await ((_a = roomEngine.instance) == null ? void 0 : _a.kickRemoteUserOutOfRoom({
+      userId: userInfo.userId
+    }));
+  }
+  async function handleTransferOwner(userInfo) {
+    var _a, _b;
+    const roomInfo = await ((_a = roomEngine.instance) == null ? void 0 : _a.fetchRoomInfo());
+    if ((roomInfo == null ? void 0 : roomInfo.roomOwner) === roomStore.localUser.userId) {
+      try {
+        await ((_b = roomEngine.instance) == null ? void 0 : _b.changeUserRole({
+          userId: userInfo.userId,
+          userRole: TUIRole.kRoomOwner
+        }));
+        roomStore.setMasterUserId(userInfo.userId);
+        renderMsg({
+          type: "success",
+          message: t("The room owner has been transferred to sb", { name: userInfo.userName || userInfo.userId }),
+          duration: MESSAGE_DURATION.NORMAL
+        });
+      } catch (error) {
+        renderMsg({
+          type: "error",
+          message: t("Transfer owner failed, please try again."),
+          duration: MESSAGE_DURATION.NORMAL
+        });
+      }
+    }
+  }
+  async function handleSetOrRevokeAdmin(userInfo) {
+    var _a;
+    const newRole = userInfo.userRole === TUIRole.kGeneralUser ? TUIRole.kAdministrator : TUIRole.kGeneralUser;
+    await ((_a = roomEngine.instance) == null ? void 0 : _a.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 })}`;
+    renderMsg({ type: "success", message: tipMessage });
+    roomStore.setRemoteUserRole(userInfo.userId, newRole);
+  }
+  function handleOpenDialog(action) {
+    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) {
+    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
+  };
+}
+export {
+  useMemberControl as default
+};

package/es/components/ManageMember/MemberItem/index.vue.d.ts

@@ -0,0 +1,16 @@
+import { UserInfo } from '../../../stores/room';
+
+interface Props {
+    userInfo: UserInfo;
+}
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/es/components/ManageMember/MemberItem/index.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./index.vue2.mjs";
+import "./index.vue3.mjs";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const MemberItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ca3f9dba"]]);
+export {
+  MemberItem as default
+};

package/es/components/ManageMember/MemberItem/index.vue2.mjs

@@ -0,0 +1,45 @@
+import { defineComponent, ref, watch, openBlock, createElementBlock, unref, createVNode, withDirectives, vShow } from "vue";
+import MemberInfo from "../MemberItemCommon/MemberInfo.vue.mjs";
+import MemberControl from "../MemberControl/index.vue.mjs";
+import useMemberItem from "./useMemberItemHooks.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    userInfo: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      isMemberControlAccessible,
+      openMemberControl,
+      closeMemberControl
+    } = useMemberItem(props.userInfo);
+    const showMemberControl = ref(false);
+    watch(isMemberControlAccessible, (accessible) => {
+      showMemberControl.value = accessible;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "member-item-container",
+        onMouseenter: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => unref(openMemberControl) && unref(openMemberControl)(...args)),
+        onMouseleave: _cache[1] || (_cache[1] = //@ts-ignore
+        (...args) => unref(closeMemberControl) && unref(closeMemberControl)(...args))
+      }, [
+        createVNode(MemberInfo, {
+          "user-info": props.userInfo,
+          "show-state-icon": !showMemberControl.value
+        }, null, 8, ["user-info", "show-state-icon"]),
+        withDirectives(createVNode(MemberControl, {
+          "show-member-control": showMemberControl.value,
+          "user-info": props.userInfo
+        }, null, 8, ["show-member-control", "user-info"]), [
+          [vShow, showMemberControl.value]
+        ])
+      ], 32);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/ManageMember/MemberItem/index.vue3.mjs

@@ -0,0 +1 @@
+

package/es/components/ManageMember/MemberItem/useMemberItemHooks.d.ts

@@ -0,0 +1,7 @@
+import { UserInfo } from '../../../stores/room';
+
+export default function useMemberItem(userInfo: UserInfo): {
+    isMemberControlAccessible: import('vue').ComputedRef<any>;
+    openMemberControl: () => void;
+    closeMemberControl: () => void;
+};

package/es/components/ManageMember/MemberItem/useMemberItemHooks.mjs

@@ -0,0 +1,32 @@
+import { ref, computed } from "vue";
+import { useRoomStore } from "../../../stores/room.mjs";
+import { storeToRefs } from "pinia";
+import { TUIRole } from "@tencentcloud/tuiroom-engine-electron";
+const showUserId = ref("");
+function useMemberItem(userInfo) {
+  const roomStore = useRoomStore();
+  const { isMaster, isAdmin } = storeToRefs(roomStore);
+  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
+  };
+}
+export {
+  useMemberItem as default
+};

package/es/components/ManageMember/MemberItemCommon/MemberInfo.vue.d.ts

@@ -0,0 +1,17 @@
+import { UserInfo } from '../../../stores/room';
+
+interface Props {
+    userInfo: UserInfo;
+    showStateIcon: Boolean;
+}
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/es/components/ManageMember/MemberItemCommon/MemberInfo.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./MemberInfo.vue2.mjs";
+import "./MemberInfo.vue3.mjs";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const MemberInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-18d628a6"]]);
+export {
+  MemberInfo as default
+};

package/es/components/ManageMember/MemberItemCommon/MemberInfo.vue2.mjs

@@ -0,0 +1,115 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createVNode, toDisplayString, createBlock, createCommentVNode, Fragment, renderList } from "vue";
+import Avatar from "../../common/Avatar.vue.mjs";
+import { useBasicStore } from "../../../stores/basic.mjs";
+import { useRoomStore } from "../../../stores/room.mjs";
+import { storeToRefs } from "pinia";
+import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
+import VideoOpenIcon from "../../common/icons/VideoOpenIcon.vue.mjs";
+import VideoCloseIcon from "../../common/icons/VideoCloseIcon.vue.mjs";
+import AudioOpenIcon from "../../common/icons/AudioOpenIcon.vue.mjs";
+import AudioCloseIcon from "../../common/icons/AudioCloseIcon.vue.mjs";
+import ScreenOpenIcon from "../../common/icons/ScreenOpenIcon.vue.mjs";
+import ApplyActiveIcon from "../../common/icons/ApplyActiveIcon.vue.mjs";
+import { useI18n } from "../../../locales/index.mjs";
+import { isMobile } from "../../../utils/environment.mjs";
+import UserIcon from "../../common/icons/UserIcon.vue.mjs";
+import { TUIRole } from "@tencentcloud/tuiroom-engine-electron";
+const _hoisted_1 = { class: "user-name" };
+const _hoisted_2 = { class: "role-info" };
+const _hoisted_3 = {
+  key: 0,
+  class: "member-av-state"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MemberInfo",
+  props: {
+    userInfo: {},
+    showStateIcon: {}
+  },
+  setup(__props) {
+    const { t } = useI18n();
+    const props = __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;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(isMobile) ? "member-info-mobile" : "member-info"])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(!_ctx.showStateIcon && isTargetUserAdmin.value ? "member-basic-info-admin" : "member-basic-info")
+        }, [
+          createVNode(Avatar, {
+            class: "avatar-url",
+            "img-src": _ctx.userInfo.avatarUrl
+          }, null, 8, ["img-src"]),
+          createElementVNode("div", _hoisted_1, toDisplayString(_ctx.userInfo.userName || _ctx.userInfo.userId), 1),
+          createElementVNode("div", _hoisted_2, [
+            isTargetUserRoomOwner.value || isTargetUserAdmin.value ? (openBlock(), createBlock(SvgIcon, {
+              key: 0,
+              icon: UserIcon,
+              color: isTargetUserAdmin.value ? "#F06C4B" : "#4791FF",
+              class: normalizeClass(isTargetUserAdmin.value ? "admin-icon" : "master-icon")
+            }, null, 8, ["color", "class"])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass(`user-extra-info ${isTargetUserAdmin.value ? "user-extra-info-admin" : ""}`)
+            }, toDisplayString(extraInfo.value), 3)
+          ])
+        ], 2),
+        _ctx.showStateIcon ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(iconList.value, (item, index) => {
+            return openBlock(), createBlock(SvgIcon, {
+              key: index,
+              icon: item.icon,
+              class: normalizeClass(["state-icon", { "disable-icon": item.disable }]),
+              size: item.size
+            }, null, 8, ["icon", "class", "size"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/ManageMember/MemberItemCommon/MemberInfo.vue3.mjs

@@ -0,0 +1 @@
+

package/es/components/ManageMember/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/es/components/ManageMember/index.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./index.vue2.mjs";
+import "./index.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const ManageMember = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-392914b8"]]);
+export {
+  ManageMember as default
+};