@tencentcloud/roomkit-electron-vue3 2.4.1 → 2.5.0

package/lib/components/ManageMember/MemberControl/index.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const index_vue_vue_type_script_setup_true_lang = require("./index.vue2.js");
 require("./index.vue3.js");
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const MemberControl = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-4309b988"]]);
+const MemberControl = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-978d269a"]]);
 exports.default = MemberControl;

package/lib/components/ManageMember/MemberControl/index.vue2.js

@@ -4,15 +4,15 @@ const Vue = require("vue");
 const index = require("../../../locales/index.js");
 const Button = require("../../common/base/Button.vue.js");
 const index$1 = require("../../common/base/Dialog/index.vue.js");
+const index$2 = require("../../common/base/Input/index.vue.js");
 const SvgIcon = require("../../common/base/SvgIcon.vue.js");
 const ArrowUpIcon = require("../../common/icons/ArrowUpIcon.vue.js");
 const useMemberControlHooks = require("./useMemberControlHooks.js");
-const _hoisted_1 = {
-  key: 0,
-  class: "member-control-container"
-};
+const useMemberItemHooks = require("../MemberItem/useMemberItemHooks.js");
+const _hoisted_1 = { class: "member-control-container" };
 const _hoisted_2 = ["onClick"];
 const _hoisted_3 = { class: "operate-text" };
+const _hoisted_4 = { class: "dialog-content" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "index",
   props: {
@@ -24,14 +24,17 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const { t } = index.useI18n();
     const {
       controlList,
-      isGeneralUser,
       handleCancelDialog,
       handleAction,
       isDialogVisible,
-      dialogData
+      dialogData,
+      tempUserName
     } = useMemberControlHooks.default(props);
+    const { isCanOperateMySelf } = useMemberItemHooks.default(props.userInfo);
     const singleControl = Vue.computed(() => controlList.value[0]);
-    const moreControlList = Vue.computed(() => controlList.value.slice(1));
+    const moreControlList = Vue.computed(() => {
+      return isCanOperateMySelf ? controlList.value : controlList.value.slice(1);
+    });
     const dropdownClass = Vue.ref("down");
     const moreBtnRef = Vue.ref();
     const operateListRef = Vue.ref();
@@ -75,17 +78,21 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return !Vue.unref(isGeneralUser) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-        Vue.createVNode(Button.default, {
+      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+        !Vue.unref(isCanOperateMySelf) ? (Vue.openBlock(), Vue.createBlock(Button.default, {
+          key: 0,
           class: "button",
           size: "default",
           onClick: _cache[0] || (_cache[0] = ($event) => singleControl.value.func(props.userInfo))
         }, {
-          default: Vue.withCtx(() => [
-            Vue.createTextVNode(Vue.toDisplayString(singleControl.value.title), 1)
-          ]),
+          default: Vue.withCtx(() => {
+            var _a;
+            return [
+              Vue.createTextVNode(Vue.toDisplayString((_a = singleControl.value) == null ? void 0 : _a.title), 1)
+            ];
+          }),
           _: 1
-        }),
+        })) : Vue.createCommentVNode("", true),
         Vue.createElementVNode("div", {
           ref_key: "moreBtnRef",
           ref: moreBtnRef,
@@ -130,7 +137,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         ], 512),
         Vue.createVNode(index$1.default, {
           modelValue: Vue.unref(isDialogVisible),
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => Vue.isRef(isDialogVisible) ? isDialogVisible.value = $event : null),
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => Vue.isRef(isDialogVisible) ? isDialogVisible.value = $event : null),
           title: Vue.unref(dialogData).title,
           modal: true,
           width: "480px",
@@ -141,13 +148,14 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           footer: Vue.withCtx(() => [
             Vue.createVNode(Button.default, {
               size: "default",
-              onClick: _cache[1] || (_cache[1] = ($event) => Vue.unref(handleAction)(props.userInfo))
+              onClick: _cache[2] || (_cache[2] = ($event) => Vue.unref(handleAction)(props.userInfo)),
+              disabled: Vue.unref(tempUserName).length === 0
             }, {
               default: Vue.withCtx(() => [
                 Vue.createTextVNode(Vue.toDisplayString(Vue.unref(dialogData).confirmText), 1)
               ]),
               _: 1
-            }),
+            }, 8, ["disabled"]),
             Vue.createVNode(Button.default, {
               class: "cancel",
               size: "default",
@@ -161,11 +169,20 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             }, 8, ["onClick"])
           ]),
           default: Vue.withCtx(() => [
-            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(dialogData).content), 1)
+            Vue.createElementVNode("div", _hoisted_4, [
+              Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(dialogData).content), 1),
+              Vue.unref(dialogData).showInput ? (Vue.openBlock(), Vue.createBlock(index$2.default, {
+                key: 0,
+                modelValue: Vue.unref(tempUserName),
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => Vue.isRef(tempUserName) ? tempUserName.value = $event : null),
+                class: "dialog-input",
+                placeholder: Vue.unref(t)("Please input user name")
+              }, null, 8, ["modelValue", "placeholder"])) : Vue.createCommentVNode("", true)
+            ])
           ]),
           _: 1
         }, 8, ["modelValue", "title", "before-close"])
-      ])) : Vue.createCommentVNode("", true);
+      ]);
     };
   }
 });

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

@@ -1,7 +1,7 @@
 import { UserInfo } from '../../../stores/room';
 import { Ref } from 'vue';
 
-type ActionType = 'transferOwner' | 'kickUser' | '';
+type ActionType = 'transferOwner' | 'kickUser' | 'changeUserNameCard' | '';
 export default function useMemberControl(props?: any): {
     props: any;
     isMe: import('vue').ComputedRef<boolean>;
@@ -16,6 +16,11 @@ export default function useMemberControl(props?: any): {
         content: string;
         confirmText: string;
         actionType: ActionType;
+        showInput: boolean;
     }>;
+    tempUserName: Ref<any>;
+    isShowInput: Ref<boolean>;
+    editorInputEle: Ref<any>;
+    editorInputEleContainer: Ref<any>;
 };
 export {};

package/lib/components/ManageMember/MemberControl/useMemberControlHooks.js

@@ -18,23 +18,37 @@ const OffStageIcon = require("../../common/icons/OffStageIcon.vue.js");
 const TransferOwnerIcon = require("../../common/icons/TransferOwnerIcon.vue.js");
 const SetAdminIcon = require("../../common/icons/SetAdminIcon.vue.js");
 const RevokeAdminIcon = require("../../common/icons/RevokeAdminIcon.vue.js");
+const EditNameCardIcon = require("../../common/icons/EditNameCardIcon.vue.js");
 const pinia = require("pinia");
 const Message = require("../../common/base/Message/Message.js");
 const message = require("../../../constants/message.js");
+const useMitt = require("../../../hooks/useMitt.js");
+const useMemberItemHooks = require("../MemberItem/useMemberItemHooks.js");
+require("../../../services/main.js");
+const roomService = require("../../../services/roomService.js");
+require("mitt");
+require("../../../services/manager/roomActionManager.js");
+const environment = require("../../../utils/environment.js");
+const utils = require("../../../utils/utils.js");
 function useMemberControl(props) {
   const roomEngine = useRoomEngine.default();
   const { t } = index.useI18n();
   const basicStore = basic.useBasicStore();
   const roomStore = room.useRoomStore();
   const isDialogVisible = Vue.ref(false);
+  const isShowInput = Vue.ref(false);
+  const editorInputEle = Vue.ref();
+  const editorInputEleContainer = Vue.ref();
+  const tempUserName = Vue.ref(props.userInfo.nameCard || props.userInfo.userName);
   const dialogData = Vue.ref({
     title: "",
     content: "",
     confirmText: "",
-    actionType: ""
+    actionType: "",
+    showInput: false
   });
-  const kickOffDialogContent = Vue.computed(() => t("whether to kick sb off the room", { name: props.userInfo.userName || props.userInfo.userId }));
-  const transferOwnerTitle = Vue.computed(() => t("Transfer the roomOwner to sb", { name: props.userInfo.userName || props.userInfo.userId }));
+  const kickOffDialogContent = Vue.computed(() => t("whether to kick sb off the room", { name: roomService.roomService.getDisplayName(props.userInfo) }));
+  const transferOwnerTitle = Vue.computed(() => t("Transfer the roomOwner to sb", { name: roomService.roomService.getDisplayName(props.userInfo) }));
   const {
     isFreeSpeakMode,
     isSpeakAfterTakingSeatMode,
@@ -50,10 +64,14 @@ function useMemberControl(props) {
     cancelInviteUserOnStage,
     kickUserOffStage
   } = useMasterApplyControl.default();
+  const { isCanOperateMySelf } = useMemberItemHooks.default(props.userInfo);
   const isMe = Vue.computed(() => basicStore.userId === props.userInfo.userId);
   const isTargetUserAnchor = Vue.computed(() => props.userInfo.onSeat === true);
   const isTargetUserAudience = Vue.computed(() => props.userInfo.onSeat !== true);
   const controlList = Vue.computed(() => {
+    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] : [];
@@ -65,12 +83,14 @@ function useMemberControl(props) {
           chatControl.value,
           setOrRevokeAdmin.value,
           transferOwner.value,
-          kickUser.value
+          kickUser.value,
+          changeUserNameCard.value
         ],
         [TUIRoomEngine.TUIRole.kAdministrator]: [
           audioControl.value,
           videoControl.value,
-          chatControl.value
+          chatControl.value,
+          changeUserNameCard.value
         ]
       },
       speakAfterTakeSeat: {
@@ -81,13 +101,15 @@ function useMemberControl(props) {
           setOrRevokeAdmin.value,
           transferOwner.value,
           chatControl.value,
-          kickUser.value
+          kickUser.value,
+          changeUserNameCard.value
         ],
         [TUIRoomEngine.TUIRole.kAdministrator]: [
           ...inviteStageList,
           ...onStageControlList,
           ...agreeOrDenyStageList,
-          chatControl.value
+          chatControl.value,
+          changeUserNameCard.value
         ]
       }
     };
@@ -147,6 +169,12 @@ function useMemberControl(props) {
   }));
   const denyOnStage = Vue.computed(() => ({ key: "denyOnStage", icon: DenyOnStageIcon.default, title: t("Refuse stage"), func: denyUserOnStage }));
   const makeOffStage = Vue.computed(() => ({ key: "makeOffStage", icon: OffStageIcon.default, title: t("Step down"), func: kickUserOffStage }));
+  const changeUserNameCard = Vue.computed(() => ({
+    key: "changeUserNameCard",
+    icon: EditNameCardIcon.default,
+    title: t("change name"),
+    func: () => handleOpenDialog("changeUserNameCard")
+  }));
   async function toggleInviteUserOnStage(userInfo) {
     const { isInvitingUserToAnchor } = userInfo;
     if (isInvitingUserToAnchor) {
@@ -174,7 +202,7 @@ function useMemberControl(props) {
       if (userInfo.isRequestingUserOpenMic) {
         Message.default({
           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.roomService.getDisplayName(userInfo) })}`,
           duration: message.MESSAGE_DURATION.NORMAL
         });
         return;
@@ -201,7 +229,7 @@ function useMemberControl(props) {
       }));
       Message.default({
         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.roomService.getDisplayName(userInfo) })}`,
         duration: message.MESSAGE_DURATION.NORMAL
       });
       if (request && request.requestId) {
@@ -220,7 +248,7 @@ function useMemberControl(props) {
       if (userInfo.isRequestingUserOpenCamera) {
         Message.default({
           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.roomService.getDisplayName(userInfo) })}`,
           duration: message.MESSAGE_DURATION.NORMAL
         });
         return;
@@ -247,7 +275,7 @@ function useMemberControl(props) {
       }));
       Message.default({
         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.roomService.getDisplayName(userInfo) })}`,
         duration: message.MESSAGE_DURATION.NORMAL
       });
       if (request && request.requestId) {
@@ -277,12 +305,16 @@ function useMemberControl(props) {
     await ((_a = roomEngine.instance) == null ? void 0 : _a.kickRemoteUserOutOfRoom({
       userId: userInfo.userId
     }));
+    roomStore.removeRemoteUser(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 {
+        if (roomStore.localUser.hasScreenStream) {
+          useMitt.default.emit("ScreenShare:stopScreenShare");
+        }
         await ((_b = roomEngine.instance) == null ? void 0 : _b.changeUserRole({
           userId: userInfo.userId,
           userRole: TUIRoomEngine.TUIRole.kRoomOwner
@@ -290,7 +322,7 @@ function useMemberControl(props) {
         roomStore.setMasterUserId(userInfo.userId);
         Message.default({
           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.roomService.getDisplayName(userInfo) }),
           duration: message.MESSAGE_DURATION.NORMAL
         });
       } catch (error) {
@@ -303,7 +335,7 @@ function useMemberControl(props) {
     }
   }
   async function handleSetOrRevokeAdmin(userInfo) {
-    var _a;
+    var _a, _b;
     const newRole = userInfo.userRole === TUIRoomEngine.TUIRole.kGeneralUser ? TUIRoomEngine.TUIRole.kAdministrator : TUIRoomEngine.TUIRole.kGeneralUser;
     await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserRole({
       userId: userInfo.userId,
@@ -313,28 +345,84 @@ function useMemberControl(props) {
     const tipMessage = newRole === TUIRoomEngine.TUIRole.kAdministrator ? `${t("sb has been set as administrator", { name: updatedUserName })}` : `${t("The administrator status of sb has been withdrawn", { name: updatedUserName })}`;
     Message.default({ type: "success", message: tipMessage });
     roomStore.setRemoteUserRole(userInfo.userId, newRole);
+    if (newRole === TUIRoomEngine.TUIRole.kGeneralUser && userInfo.hasScreenStream) {
+      await ((_b = roomEngine.instance) == null ? void 0 : _b.closeRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIRoomEngine.TUIMediaDevice.kScreen
+      }));
+    }
   }
   function handleOpenDialog(action) {
-    isDialogVisible.value = true;
+    var _a;
     switch (action) {
       case "kickUser":
+        isDialogVisible.value = true;
         dialogData.value = {
           title: t("Note"),
           content: kickOffDialogContent.value,
           confirmText: t("Confirm"),
-          actionType: action
+          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"),
           confirmText: t("Confirm transfer"),
-          actionType: action
+          actionType: action,
+          showInput: false
+        };
+        break;
+      case "changeUserNameCard":
+        if (environment.isMobile) {
+          isShowInput.value = true;
+          (_a = document == null ? void 0 : document.body) == null ? void 0 : _a.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 = utils.calculateByteLength(tempUserName.value) <= 32;
+    !result && Message.default({
+      type: "warning",
+      message: t("The user name cannot exceed 32 characters"),
+      duration: message.MESSAGE_DURATION.NORMAL
+    });
+    return result;
+  };
+  async function handleChangeUserNameCard(userInfo) {
+    var _a;
+    if (!nameCardCheck())
+      return;
+    try {
+      await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserNameCard({
+        userId: userInfo.userId,
+        nameCard: tempUserName.value
+      }));
+      Message.default({
+        type: "success",
+        message: t("Name changed successfully"),
+        duration: message.MESSAGE_DURATION.NORMAL
+      });
+    } catch (error) {
+      Message.default({
+        type: "error",
+        message: t("change name failed, please try again."),
+        duration: message.MESSAGE_DURATION.NORMAL
+      });
+    }
+  }
   function handleAction(userInfo) {
     switch (dialogData.value.actionType) {
       case "kickUser":
@@ -343,10 +431,14 @@ function useMemberControl(props) {
       case "transferOwner":
         handleTransferOwner(userInfo);
         break;
+      case "changeUserNameCard":
+        handleChangeUserNameCard(userInfo);
+        isShowInput.value = false;
     }
     isDialogVisible.value = false;
   }
   function handleCancelDialog() {
+    tempUserName.value = props.userInfo.nameCard || props.userInfo.userName;
     isDialogVisible.value = false;
   }
   return {
@@ -358,7 +450,11 @@ function useMemberControl(props) {
     handleCancelDialog,
     handleAction,
     isDialogVisible,
-    dialogData
+    dialogData,
+    tempUserName,
+    isShowInput,
+    editorInputEle,
+    editorInputEleContainer
   };
 }
 exports.default = useMemberControl;

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

@@ -4,4 +4,5 @@ export default function useMemberItem(userInfo: UserInfo): {
     isMemberControlAccessible: import('vue').ComputedRef<any>;
     openMemberControl: () => void;
     closeMemberControl: () => void;
+    isCanOperateMySelf: import('vue').ComputedRef<boolean>;
 };

package/lib/components/ManageMember/MemberItem/useMemberItemHooks.js

@@ -11,12 +11,13 @@ function useMemberItem(userInfo) {
   const isCanOperateCurrentMember = Vue.computed(() => {
     const isTargetUserRoomOwner = userInfo.userRole === TUIRoomEngine.TUIRole.kRoomOwner;
     const isTargetUserGeneral = userInfo.userRole === TUIRoomEngine.TUIRole.kGeneralUser;
-    return isMaster.value && !isTargetUserRoomOwner || isAdmin.value && isTargetUserGeneral;
+    const isTargetUserMySelf = userInfo.userId === roomStore.localUser.userId;
+    return isMaster.value && !isTargetUserRoomOwner || isAdmin.value && isTargetUserGeneral || isTargetUserMySelf;
   });
-  const isMemberControlAccessible = Vue.computed(() => (
-    // Only the homeowner or administrator can open the control panel
-    userInfo.userId === showUserId.value && isCanOperateCurrentMember.value
-  ));
+  const isCanOperateMySelf = Vue.computed(() => {
+    return userInfo.userId === roomStore.localUser.userId;
+  });
+  const isMemberControlAccessible = Vue.computed(() => userInfo.userId === showUserId.value && (isCanOperateMySelf.value || isCanOperateCurrentMember.value));
   function openMemberControl() {
     showUserId.value = userInfo.userId;
   }
@@ -26,7 +27,8 @@ function useMemberItem(userInfo) {
   return {
     isMemberControlAccessible,
     openMemberControl,
-    closeMemberControl
+    closeMemberControl,
+    isCanOperateMySelf
   };
 }
 exports.default = useMemberItem;

package/lib/components/ManageMember/MemberItemCommon/MemberInfo.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const MemberInfo_vue_vue_type_script_setup_true_lang = require("./MemberInfo.vue2.js");
 require("./MemberInfo.vue3.js");
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const MemberInfo = /* @__PURE__ */ _pluginVue_exportHelper.default(MemberInfo_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-18d628a6"]]);
+const MemberInfo = /* @__PURE__ */ _pluginVue_exportHelper.default(MemberInfo_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-7b3ca6c8"]]);
 exports.default = MemberInfo;

package/lib/components/ManageMember/MemberItemCommon/MemberInfo.vue2.js

@@ -16,6 +16,10 @@ const index = require("../../../locales/index.js");
 const environment = require("../../../utils/environment.js");
 const UserIcon = require("../../common/icons/UserIcon.vue.js");
 const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
+require("../../../services/main.js");
+const roomService = require("../../../services/roomService.js");
+require("mitt");
+require("../../../services/manager/roomActionManager.js");
 const _hoisted_1 = { class: "user-name" };
 const _hoisted_2 = { class: "role-info" };
 const _hoisted_3 = {
@@ -85,7 +89,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             class: "avatar-url",
             "img-src": _ctx.userInfo.avatarUrl
           }, null, 8, ["img-src"]),
-          Vue.createElementVNode("div", _hoisted_1, Vue.toDisplayString(_ctx.userInfo.userName || _ctx.userInfo.userId), 1),
+          Vue.createElementVNode("div", _hoisted_1, Vue.toDisplayString(Vue.unref(roomService.roomService).getDisplayName(_ctx.userInfo)), 1),
           Vue.createElementVNode("div", _hoisted_2, [
             isTargetUserRoomOwner.value || isTargetUserAdmin.value ? (Vue.openBlock(), Vue.createBlock(SvgIcon.default, {
               key: 0,

package/lib/components/ManageMember/index.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const index_vue_vue_type_script_setup_true_lang = require("./index.vue2.js");
 require("./index.vue3.js");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const ManageMember = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-392914b8"]]);
+const ManageMember = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-efce71bc"]]);
 exports.default = ManageMember;

package/lib/components/ManageMember/index.vue2.js

@@ -11,6 +11,8 @@ const index$1 = require("../common/base/Dialog/index.vue.js");
 const room = require("../../stores/room.js");
 const useIndexHooks = require("./useIndexHooks.js");
 const Button = require("../common/base/Button.vue.js");
+const ArrowUpIcon = require("../common/icons/ArrowUpIcon.vue.js");
+const vClickOutside = require("../../directives/vClickOutside.js");
 const _hoisted_1 = { class: "manage-member-container" };
 const _hoisted_2 = { class: "manage-member-header" };
 const _hoisted_3 = { class: "search-container" };
@@ -29,14 +31,18 @@ const _hoisted_9 = {
   key: 2,
   class: "global-setting"
 };
+const _hoisted_10 = { class: "more-container" };
+const _hoisted_11 = {
+  class: /* @__PURE__ */ Vue.normalizeClass(["tui-theme-white", "drop-down"])
+};
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = { class: "operate-text" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "index",
   setup(__props) {
     const roomStore = room.useRoomStore();
     const {
       applyToAnchorList,
-      isMicrophoneDisableForAllUser,
-      isCameraDisableForAllUser,
       isGeneralUser
     } = pinia.storeToRefs(roomStore);
     const {
@@ -55,8 +61,18 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       filteredUserList,
       isOnStateTabActive,
       handleToggleStaged,
-      applyToAnchorUserContent
+      applyToAnchorUserContent,
+      audioManageInfo,
+      videoManageInfo,
+      toggleClickMoreBtn,
+      showMoreControl,
+      moreControlList
     } = useIndexHooks.default();
+    const handleShowMoreControl = () => {
+      if (showMoreControl.value) {
+        showMoreControl.value = false;
+      }
+    };
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
         Vue.createElementVNode("div", _hoisted_2, [
@@ -124,7 +140,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             onClick: _cache[3] || (_cache[3] = ($event) => Vue.unref(toggleManageAllMember)(Vue.unref(ManageControlType).AUDIO))
           }, {
             default: Vue.withCtx(() => [
-              Vue.createTextVNode(Vue.toDisplayString(Vue.unref(isMicrophoneDisableForAllUser) ? Vue.unref(t)("Enable all audios") : Vue.unref(t)("Disable all audios")), 1)
+              Vue.createTextVNode(Vue.toDisplayString(Vue.unref(audioManageInfo)), 1)
             ]),
             _: 1
           }),
@@ -134,10 +150,45 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             onClick: _cache[4] || (_cache[4] = ($event) => Vue.unref(toggleManageAllMember)(Vue.unref(ManageControlType).VIDEO))
           }, {
             default: Vue.withCtx(() => [
-              Vue.createTextVNode(Vue.toDisplayString(Vue.unref(isCameraDisableForAllUser) ? Vue.unref(t)("Enable all videos") : Vue.unref(t)("Disable all videos")), 1)
+              Vue.createTextVNode(Vue.toDisplayString(Vue.unref(videoManageInfo)), 1)
             ]),
             _: 1
-          })
+          }),
+          Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_10, [
+            Vue.createVNode(Button.default, {
+              class: "button",
+              size: "default",
+              onClick: Vue.unref(toggleClickMoreBtn)
+            }, {
+              default: Vue.withCtx(() => [
+                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("More")) + " ", 1),
+                Vue.createVNode(SvgIcon.default, {
+                  size: "12",
+                  class: Vue.normalizeClass(["more-arrow", Vue.unref(showMoreControl) ? "up" : "down"]),
+                  icon: ArrowUpIcon.default
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            }, 8, ["onClick"]),
+            Vue.withDirectives(Vue.createElementVNode("div", _hoisted_11, [
+              (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(moreControlList), (item) => {
+                return Vue.openBlock(), Vue.createElementBlock("div", {
+                  key: item.type,
+                  class: "user-operate-item",
+                  onClick: ($event) => item.func(item.type)
+                }, [
+                  Vue.createVNode(SvgIcon.default, {
+                    icon: item.icon
+                  }, null, 8, ["icon"]),
+                  Vue.createElementVNode("span", _hoisted_13, Vue.toDisplayString(item.title), 1)
+                ], 8, _hoisted_12);
+              }), 128))
+            ], 512), [
+              [Vue.vShow, Vue.unref(showMoreControl)]
+            ])
+          ])), [
+            [Vue.unref(vClickOutside.default), handleShowMoreControl]
+          ])
         ])) : Vue.createCommentVNode("", true),
         Vue.createVNode(index$1.default, {
           modelValue: Vue.unref(showManageAllUserDialog),