@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/components/RoomFooter/ChatControl.vue

@@ -1,12 +1,16 @@
 <template>
   <div v-if="chatControlConfig.visible" class="chat-control-container">
-    <tui-badge :hidden="chatStore.unReadCount === 0" :value="chatStore.unReadCount" :max="10">
+    <tui-badge
+      :hidden="chatStore.unReadCount === 0"
+      :value="chatStore.unReadCount"
+      :max="10"
+    >
       <icon-button
         :title="t('Chat')"
         :icon="ChatIcon"
         :is-active="sidebarName === 'chat'"
         @click-icon="toggleChatSidebar"
-      ></icon-button>
+      />
     </tui-badge>
   </div>
 </template>

package/src/TUIRoom/components/RoomFooter/ContactControl.vue

@@ -7,7 +7,7 @@
       @click-icon="toggleContactSidebar"
     />
     <div v-if="isShowContactTab" class="contact-container">
-      <room-contact ref="contactRef" @on-close-contact="handleOnCloseContact"></room-contact>
+      <room-contact ref="contactRef" @on-close-contact="handleOnCloseContact" />
     </div>
   </div>
 </template>
@@ -19,7 +19,7 @@ import { useBasicStore } from '../../stores/basic';
 import MoreIcon from '../common/icons/MoreIcon.vue';
 import { storeToRefs } from 'pinia';
 import { useI18n } from '../../locales';
-import { isMobile }  from '../../utils/environment';
+import { isMobile } from '../../utils/environment';
 import roomContact from '../RoomMore/index.vue';
 
 const basicStore = useBasicStore();
@@ -50,20 +50,18 @@ function toggleContactSidebar() {
 function handleOnCloseContact() {
   isShowContactTab.value = false;
 }
-
 </script>
 
 <style lang="scss" scoped>
 .contact-container {
   position: fixed;
-  left: 0;
   top: 0;
   bottom: 0;
+  left: 0;
+  z-index: 11;
+  box-sizing: border-box;
   width: 100vw;
   height: auto;
-  box-sizing: border-box;
   background-color: var(--log-out-mobile);
-  z-index: 11;
 }
 </style>
-

package/src/TUIRoom/components/RoomFooter/EndControl/index.vue

@@ -18,12 +18,17 @@
       <div v-if="currentDialogType === DialogType.TransferDialog">
         <div>{{ t('New host') }}</div>
         <div>
-          <tui-select v-model="selectedUser" :teleported="false" :popper-append-to-body="false" theme="white">
+          <tui-select
+            v-model="selectedUser"
+            :teleported="false"
+            :popper-append-to-body="false"
+            theme="white"
+          >
             <tui-option
-              v-for="user in remoteUserList"
+              v-for="user in remoteEnteredUserList"
               :key="user.userId"
               :value="user.userId"
-              :label="user.userName"
+              :label="user.nameCard || user.userName"
               theme="white"
             />
           </tui-select>
@@ -31,13 +36,28 @@
       </div>
       <template #footer>
         <div v-if="currentDialogType === DialogType.BasicDialog">
-          <tui-button v-if="roomStore.isMaster" class="button" size="default" @click="dismissRoom">
+          <tui-button
+            v-if="roomStore.isMaster"
+            class="button"
+            size="default"
+            @click="dismissRoom"
+          >
             {{ t('Dismiss') }}
           </tui-button>
-          <tui-button v-if="isShowLeaveRoomDialog" class="button" size="default" @click="handleEndLeaveClick">
+          <tui-button
+            v-if="isShowLeaveRoomDialog"
+            class="button"
+            size="default"
+            @click="handleEndLeaveClick"
+          >
             {{ t('Leave') }}
           </tui-button>
-          <tui-button class="button" type="primary" size="default" @click="cancel">
+          <tui-button
+            class="button"
+            type="primary"
+            size="default"
+            @click="cancel"
+          >
             {{ t('Cancel') }}
           </tui-button>
         </div>
@@ -45,7 +65,12 @@
           <tui-button class="button" size="default" @click="transferAndLeave">
             {{ t('Transfer and leave') }}
           </tui-button>
-          <tui-button class="button" size="default" type="primary" @click="cancel">
+          <tui-button
+            class="button"
+            size="default"
+            type="primary"
+            @click="cancel"
+          >
             {{ t('Cancel') }}
           </tui-button>
         </div>
@@ -56,8 +81,8 @@
 
 <script setup lang="ts">
 import TuiButton from '../../common/base/Button.vue';
-import TuiSelect from '../../common/base/Select.vue';
-import TuiOption from '../../common/base/Option.vue';
+import TuiSelect from '../../common/base/Select/index.vue';
+import TuiOption from '../../common/base/Option/index.vue';
 import Dialog from '../../common/base/Dialog/index.vue';
 import { TUIRole } from '@tencentcloud/tuiroom-engine-electron';
 import useEndControl from './useEndControlHooks';
@@ -82,7 +107,7 @@ const {
   resetState,
   isMasterWithOneRemoteUser,
   isMasterWithRemoteUser,
-  remoteUserList,
+  remoteEnteredUserList,
 } = useEndControl();
 
 function handleEndBtnClick() {
@@ -94,7 +119,7 @@ function handleEndLeaveClick() {
     return;
   }
   if (isMasterWithRemoteUser.value) {
-    selectedUser.value = remoteUserList.value[0].userId;
+    selectedUser.value = remoteEnteredUserList.value[0].userId;
     if (isMasterWithOneRemoteUser.value) {
       transferAndLeave();
       return;
@@ -135,7 +160,10 @@ async function transferAndLeave() {
   }
   try {
     const userId = selectedUser.value;
-    const changeUserRoleResponse = await roomEngine.instance?.changeUserRole({ userId, userRole: TUIRole.kRoomOwner });
+    const changeUserRoleResponse = await roomEngine.instance?.changeUserRole({
+      userId,
+      userRole: TUIRole.kRoomOwner,
+    });
     logger.log(`${logPrefix}transferAndLeave:`, changeUserRoleResponse);
     resetState();
     await roomService.leaveRoom();
@@ -149,16 +177,18 @@ async function transferAndLeave() {
   .end-button {
     padding: 9px 20px;
     font-size: 14px;
-    border-radius: 20px;
-    border: 1.5px solid var(--red-color-2);
     color: var(--red-color-2);
+    border: 1.5px solid var(--red-color-2);
+    border-radius: 20px;
+
     &:hover {
-      background: var(--red-color-2);
       color: var(--font-color-7);
+      background: var(--red-color-2);
       border: 1px solid var(--red-color-2);
     }
   }
 }
+
 .button {
   margin-left: 20px;
 }

package/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts

@@ -5,15 +5,19 @@ import { useChatStore } from '../../../stores/chat';
 import { storeToRefs } from 'pinia';
 import { useI18n } from '../../../locales';
 import useGetRoomEngine from '../../../hooks/useRoomEngine';
-import TUIRoomEngine, { TUIRole, TUIRoomEvents } from '@tencentcloud/tuiroom-engine-electron';
+import TUIRoomEngine, {
+  TUIRole,
+  TUIRoomEvents,
+} from '@tencentcloud/tuiroom-engine-electron';
 import logger from '../../../utils/common/logger';
 import TUIMessage from '../../common/base/Message/index';
+import { roomService } from '../../../services';
 
 export default function useEndControl() {
   const { t } = useI18n();
   enum DialogType {
     BasicDialog,
-    TransferDialog
+    TransferDialog,
   }
   const currentDialogType = ref(DialogType.BasicDialog);
 
@@ -25,31 +29,62 @@ export default function useEndControl() {
   logger.log(`${logPrefix} basicStore:`, basicStore);
 
   const roomStore = useRoomStore();
-  const { localUser, remoteUserList, applyToAnchorList } = storeToRefs(roomStore);
-  const title = computed(() => (currentDialogType.value === DialogType.BasicDialog ? t('Leave room?') : t('Select a new host')));
-  const isShowLeaveRoomDialog = computed(() => (
-    roomStore.isMaster && remoteUserList.value.length > 0)
-  || !roomStore.isMaster);
+  const { localUser, remoteEnteredUserList, applyToAnchorList } =
+    storeToRefs(roomStore);
+  const title = computed(() =>
+    currentDialogType.value === DialogType.BasicDialog
+      ? t('Leave room?')
+      : t('Select a new host')
+  );
+  const isShowLeaveRoomDialog = computed(
+    () =>
+      (roomStore.isMaster && remoteEnteredUserList.value.length > 0) ||
+      !roomStore.isMaster
+  );
   const { isSidebarOpen, sidebarName } = storeToRefs(basicStore);
-  const showSideBar = computed(() => isSidebarOpen.value && sidebarName.value === 'transfer-leave');
+  const showSideBar = computed(
+    () => isSidebarOpen.value && sidebarName.value === 'transfer-leave'
+  );
   const selectedUser: Ref<string> = ref('');
   const showTransfer = ref(false);
   const searchName = ref('');
-  const filteredList = computed(() => remoteUserList.value.filter(searchUser => (
-    searchUser.userId.includes(searchName.value)) || (searchUser.userName?.includes(searchName.value))));
-  const hasNoData = computed(() => filteredList.value.length === 0);
-  const isMasterWithOneRemoteUser = computed(() => remoteUserList.value.length === 1);
-  const isMasterWithRemoteUser = computed(() => remoteUserList.value.length > 0);
-  const isMasterWithoutRemoteUser = computed(() => roomStore.isMaster && remoteUserList.value.length === 0);
-  const showEndButtonContent = computed(() => (roomStore.isMaster ? t('EndPC') : t('Leave')));
-  const showEndDialogContent = computed(() => (
-    roomStore.isMaster ? (isMasterWithoutRemoteUser.value
-      ? t('You are currently the host of the room, please choose the corresponding operation. If you choose "End Room", the current room will be disbanded and all members will be removed.')
-      : t('You are currently the host of the room, please choose the corresponding operation. If you choose "End Room", the current room will be disbanded and all members will be removed. If you choose "Leave Room", the current room will not be disbanded, and your hosting privileges will be transferred to other members.')
+  const filteredList = computed(() =>
+    remoteEnteredUserList.value.filter(
+      searchUser =>
+        searchUser.nameCard?.includes(searchName.value) ||
+        searchUser.userId.includes(searchName.value) ||
+        searchUser.userName?.includes(searchName.value)
     )
-      : t('Are you sure you want to leave this room?')));
+  );
+  const hasNoData = computed(() => filteredList.value.length === 0);
+  const isMasterWithOneRemoteUser = computed(
+    () => remoteEnteredUserList.value.length === 1
+  );
+  const isMasterWithRemoteUser = computed(
+    () => remoteEnteredUserList.value.length > 0
+  );
+  const isMasterWithoutRemoteUser = computed(
+    () => roomStore.isMaster && remoteEnteredUserList.value.length === 0
+  );
+  const showEndButtonContent = computed(() =>
+    roomStore.isMaster ? t('EndPC') : t('Leave')
+  );
+  const showEndDialogContent = computed(() =>
+    roomStore.isMaster
+      ? isMasterWithoutRemoteUser.value
+        ? t(
+            'You are currently the host of the room, please choose the corresponding operation. If you choose "End Room", the current room will be disbanded and all members will be removed.'
+          )
+        : t(
+            'You are currently the host of the room, please choose the corresponding operation. If you choose "End Room", the current room will be disbanded and all members will be removed. If you choose "Leave Room", the current room will not be disbanded, and your hosting privileges will be transferred to other members.'
+          )
+      : t('Are you sure you want to leave this room?')
+  );
   function toggleMangeMemberSidebar() {
-    if (basicStore.setSidebarOpenStatus && sidebarName.value === 'transfer-leave') {
+    if (
+      basicStore.setSidebarOpenStatus &&
+      sidebarName.value === 'transfer-leave'
+    ) {
       basicStore.setSidebarOpenStatus(false);
       basicStore.setSidebarName('');
       return;
@@ -93,7 +128,8 @@ export default function useEndControl() {
     }
     if (applyToAnchorList.value.length > 0) {
       applyToAnchorList.value.forEach((user: UserInfo) => {
-        user.applyToAnchorRequestId && roomStore.removeApplyToAnchorUser(user.applyToAnchorRequestId);
+        user.applyToAnchorRequestId &&
+          roomStore.removeApplyToAnchorUser(user.applyToAnchorRequestId);
       });
     }
     const applicationList = await roomEngine.instance?.getSeatApplicationList();
@@ -105,26 +141,34 @@ export default function useEndControl() {
     }
   }
 
-  const onUserRoleChanged = async (eventInfo: { userId: string, userRole: TUIRole }) => {
+  const onUserRoleChanged = async (eventInfo: {
+    userId: string;
+    userRole: TUIRole;
+  }) => {
     const { userId, userRole } = eventInfo;
     const isLocal = roomStore.localUser.userId === userId;
     const oldUserRole = roomStore.getUserRole(userId);
-    if (isLocal) {
-      roomStore.setLocalUser({ userRole });
-    } else {
-      roomStore.setRemoteUserRole(userId, userRole);
-    }
+    roomStore.updateUserInfo({ userId, userRole });
     switch (userRole) {
       case TUIRole.kGeneralUser:
         if (isLocal) {
-          if (roomStore?.isMicrophoneDisableForAllUser && !roomStore.localStream.hasAudioStream) {
+          if (
+            roomStore?.isMicrophoneDisableForAllUser &&
+            !roomStore.localStream.hasAudioStream
+          ) {
             roomStore.setCanControlSelfAudio(false);
           }
-          if (roomStore?.isCameraDisableForAllUser && !roomStore.localStream.hasVideoStream) {
+          if (
+            roomStore?.isCameraDisableForAllUser &&
+            !roomStore.localStream.hasVideoStream
+          ) {
             roomStore.setCanControlSelfVideo(false);
           }
           if (oldUserRole === TUIRole.kAdministrator) {
-            TUIMessage({ type: 'warning', message: t('Your administrator status has been revoked') });
+            TUIMessage({
+              type: 'warning',
+              message: t('Your administrator status has been revoked'),
+            });
           }
           if (roomStore.localStream.hasAudioStream) {
             roomStore.setCanControlSelfAudio(true);
@@ -136,7 +180,10 @@ export default function useEndControl() {
         break;
       case TUIRole.kAdministrator:
         if (isLocal) {
-          TUIMessage({ type: 'success', message: t('You have become a administrator') });
+          TUIMessage({
+            type: 'success',
+            message: t('You have become a administrator'),
+          });
           roomStore.setCanControlSelfAudio(true);
           roomStore.setCanControlSelfVideo(true);
           if (roomStore.isSpeakAfterTakingSeatMode) {
@@ -147,10 +194,16 @@ export default function useEndControl() {
       case TUIRole.kRoomOwner: {
         roomStore.setMasterUserId(userId);
         if (isLocal) {
-          TUIMessage({ type: 'success', message: `${t('You are now a room owner')}` });
+          TUIMessage({
+            type: 'success',
+            message: `${t('You are now a room owner')}`,
+          });
           if (roomStore.isSpeakAfterTakingSeatMode) {
             if (!roomStore.isAnchor) {
-              await roomEngine.instance?.takeSeat({ seatIndex: -1, timeout: 0 });
+              await roomEngine.instance?.takeSeat({
+                seatIndex: -1,
+                timeout: 0,
+              });
             }
             handleUpdateSeatApplicationList();
           }
@@ -169,9 +222,22 @@ export default function useEndControl() {
   TUIRoomEngine.once('ready', () => {
     roomEngine.instance?.on(TUIRoomEvents.onUserRoleChanged, onUserRoleChanged);
   });
-
+  const handleMount = () => {
+    const { userRole } = roomService.roomStore.localUser;
+    if (
+      userRole === TUIRole.kRoomOwner ||
+      userRole === TUIRole.kAdministrator
+    ) {
+      handleUpdateSeatApplicationList();
+    }
+  };
+  roomService.lifeCycleManager.on('mount', handleMount);
   onUnmounted(() => {
-    roomEngine.instance?.off(TUIRoomEvents.onUserRoleChanged, onUserRoleChanged);
+    roomEngine.instance?.off(
+      TUIRoomEvents.onUserRoleChanged,
+      onUserRoleChanged
+    );
+    roomService.lifeCycleManager.off('mount', handleMount);
   });
   return {
     t,
@@ -202,6 +268,6 @@ export default function useEndControl() {
     showSideBar,
     isMasterWithOneRemoteUser,
     isMasterWithRemoteUser,
-    remoteUserList,
+    remoteEnteredUserList,
   };
 }

package/src/TUIRoom/components/RoomFooter/FullScreenControl.vue

@@ -5,7 +5,7 @@
       :title="title"
       @click-icon="toggleScreen"
     >
-      <full-screen-icon></full-screen-icon>
+      <full-screen-icon />
     </icon-button>
   </div>
 </template>
@@ -25,10 +25,12 @@ const fullScreenConfig = roomService.getComponentConfig('FullScreen');
 
 /**
  * Whether the current state is full screen, default is false
-**/
+ **/
 const isFullScreen = ref(false);
 
-const title = computed((): string => (isFullScreen.value ? t('Exit') : t('Full screen')));
+const title = computed((): string =>
+  isFullScreen.value ? t('Exit') : t('Full screen')
+);
 
 function toggleScreen() {
   if (isFullScreen.value) {
@@ -45,22 +47,30 @@ function toggleScreen() {
 }
 
 function handleFullScreenChange() {
-  isFullScreen.value = !!(document.fullscreenElement);
+  isFullScreen.value = !!document.fullscreenElement;
 }
 
 onMounted(() => {
-  ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange'].forEach((item) => {
+  [
+    'fullscreenchange',
+    'webkitfullscreenchange',
+    'mozfullscreenchange',
+    'msfullscreenchange',
+  ].forEach(item => {
     window.addEventListener(item, handleFullScreenChange);
   });
 });
 
 onUnmounted(() => {
-  ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange'].forEach((item) => {
+  [
+    'fullscreenchange',
+    'webkitfullscreenchange',
+    'mozfullscreenchange',
+    'msfullscreenchange',
+  ].forEach(item => {
     window.removeEventListener(item, handleFullScreenChange);
   });
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

package/src/TUIRoom/components/RoomFooter/InviteControl.vue

@@ -1,18 +1,23 @@
 <template>
-  <div v-if="inviteControlConfig.visible" class="invite-control-container">
+  <div
+    v-if="inviteControlConfig.visible"
+    class="invite-control-container"
+    v-click-outside="handleClickOutSide"
+  >
     <icon-button
+      class="invite"
       :is-active="sidebarName === 'invite'"
       :title="t('Invite')"
       :icon="InviteIcon"
       @click-icon="toggleInviteSidebar"
-    >
-    </icon-button>
-    <div v-if="isShowInviteTab" class="invite-container">
-      <room-invite ref="inviteRef" @on-close-invite="handleCloseInvite"></room-invite>
-    </div>
+    />
+    <room-invite
+      ref="inviteRef"
+      v-if="isShowInviteTab"
+      @on-close-invite="handleCloseInvite"
+    />
   </div>
 </template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 import IconButton from '../common/base/IconButton.vue';
@@ -20,9 +25,10 @@ import InviteIcon from '../common/icons/InviteIcon.vue';
 import { useBasicStore } from '../../stores/basic';
 import { storeToRefs } from 'pinia';
 import { useI18n } from '../../locales';
-import { isMobile }  from '../../utils/environment';
+import { isMobile } from '../../utils/environment';
 import roomInvite from '../RoomInvite/index.vue';
 import { roomService } from '../../services';
+import vClickOutside from '../../directives/vClickOutside';
 
 const basicStore = useBasicStore();
 const { sidebarName } = storeToRefs(basicStore);
@@ -31,40 +37,29 @@ const isShowInviteTab = ref(false);
 const inviteRef = ref();
 const inviteControlConfig = roomService.getComponentConfig('InviteControl');
 function toggleInviteSidebar() {
+  isShowInviteTab.value = !isShowInviteTab.value;
   if (isMobile) {
-    isShowInviteTab.value = true;
     if (basicStore.sidebarName === 'invite') {
       basicStore.setSidebarName('');
       return;
     }
     basicStore.setSidebarName('invite');
-  } else {
-    if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === 'invite') {
-      basicStore.setSidebarOpenStatus(false);
-      basicStore.setSidebarName('');
-      return;
-    }
-    basicStore.setSidebarOpenStatus(true);
-    basicStore.setSidebarName('invite');
   }
 }
 
 function handleCloseInvite() {
   isShowInviteTab.value = false;
 }
+
+function handleClickOutSide() {
+  if (isShowInviteTab.value) {
+    isShowInviteTab.value = false;
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-.invite-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 100vw;
-  height: auto;
-  box-sizing: border-box;
-  background-color: var(--log-out-mobile);
-  z-index: 1;
+.invite-control-container {
+  position: relative;
 }
 </style>
-

package/src/TUIRoom/components/RoomFooter/ManageMemberControl.vue

@@ -1,12 +1,14 @@
 <template>
-  <div v-if="manageMemberControlConfig.visible" class="manage-member-control-container">
+  <div
+    v-if="manageMemberControlConfig.visible"
+    class="manage-member-control-container"
+  >
     <icon-button
       :is-active="sidebarName === 'manage-member'"
       :title="memberTitle"
       :icon="ManageMemberIcon"
       @click-icon="toggleMangeMemberSidebar"
-    >
-    </icon-button>
+    />
   </div>
 </template>
 
@@ -20,7 +22,9 @@ import { useI18n } from '../../locales';
 import { computed } from 'vue';
 import { roomService } from '../../services';
 
-const manageMemberControlConfig = roomService.getComponentConfig('ManageMemberControl');
+const manageMemberControlConfig = roomService.getComponentConfig(
+  'ManageMemberControl'
+);
 const { t } = useI18n();
 
 const basicStore = useBasicStore();
@@ -31,7 +35,10 @@ const { userNumber } = storeToRefs(roomStore);
 const memberTitle = computed(() => `${t('Members')}(${userNumber.value})`);
 
 function toggleMangeMemberSidebar() {
-  if (basicStore.setSidebarOpenStatus && sidebarName.value === 'manage-member') {
+  if (
+    basicStore.setSidebarOpenStatus &&
+    sidebarName.value === 'manage-member'
+  ) {
     basicStore.setSidebarOpenStatus(false);
     basicStore.setSidebarName('');
     return;
@@ -42,6 +49,4 @@ function toggleMangeMemberSidebar() {
 }
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

package/src/TUIRoom/components/RoomFooter/ManageStageControl.vue

@@ -13,7 +13,7 @@
         @click-icon="toggleManageStage"
       />
     </tui-badge>
-    <master-apply-control v-show="showApplyUserList"></master-apply-control>
+    <master-apply-control v-show="showApplyUserList" />
   </div>
 </template>
 
@@ -52,5 +52,4 @@ function toggleManageStage() {
 }
 
 handleShowNotification();
-
 </script>

package/src/TUIRoom/components/RoomFooter/MoreControl/index.vue

@@ -5,8 +5,7 @@
       :title="t('More')"
       :icon="MoreIcon"
       @click-icon="toggleMoreSidebar"
-    >
-    </icon-button>
+    />
   </div>
 </template>
 <script setup lang="ts">
@@ -16,11 +15,7 @@ import userMoreControl from './useMoreControlHooks';
 import { roomService } from '../../../services';
 
 const moreControlConfig = roomService.getComponentConfig('MoreControl');
-const {
-  t,
-  basicStore,
-  sidebarName,
-} = userMoreControl();
+const { t, basicStore, sidebarName } = userMoreControl();
 
 function toggleMoreSidebar() {
   if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === 'more') {
@@ -32,6 +27,4 @@ function toggleMoreSidebar() {
   basicStore.setSidebarName('more');
 }
 </script>
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

package/src/TUIRoom/components/RoomFooter/MoreControl/useMoreControlHooks.ts

@@ -10,7 +10,9 @@ export default function useControl() {
   const basicStore = useBasicStore();
   const { sidebarName } = storeToRefs(basicStore);
 
-  const iconName = computed(() => (sidebarName.value === 'more' ? ICON_NAME.MoreActive : ICON_NAME.More));
+  const iconName = computed(() =>
+    sidebarName.value === 'more' ? ICON_NAME.MoreActive : ICON_NAME.More
+  );
 
   return {
     t,