@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/components/ScheduleConference/ScheduleRoomControl.vue

@@ -1,94 +1,172 @@
 <template>
-  <div v-click-outside="handleCloseOperate" class="schedule-room-control">
-    <div class="schedule-room-info">
-      <div class="schedule-title" :title="item.basicRoomInfo.roomName">{{ item.basicRoomInfo.roomName }}</div>
-      <div class="schedule-content">
-        <span class="schedule-content-time">
-          <span>{{ props.scheduleStartTime }}</span>
-          <i class="segregation-level"></i>
-          <span>{{ props.scheduleEndTime }}</span>
-        </span>
-        <i class="segregation-vertical"></i>
-        <span class="schedule-content-roomId">
-          {{ item.basicRoomInfo.roomId }}
-        </span>
-        <i v-if="item.status !== TUIConferenceStatus.kConferenceStatusNotStarted" class="segregation-vertical"></i>
-        <span class="schedule-content-status" :class="getStatusTextAndClass(item.status).className">
-          {{ t(getStatusTextAndClass(item.status).text) }}
-        </span>
+  <div>
+    <div v-click-outside="handleCloseOperate" class="schedule-room-control">
+      <div class="schedule-room-info" @click="showDetail">
+        <div class="schedule-title" :title="item.basicRoomInfo.roomName">
+          <span class="schedule-title-text">
+            {{ item.basicRoomInfo.roomName }}
+          </span>
+          <svg-icon
+            class="schedule-title-icon"
+            v-if="isMobile"
+            :icon="ChevronRight"
+          />
+        </div>
+        <div class="schedule-content">
+          <span class="schedule-content-time">
+            <span>{{ props.scheduleStartTime }}</span>
+            <i class="segregation-level"></i>
+            <span>{{ props.scheduleEndTime }}</span>
+          </span>
+          <i class="segregation-vertical"></i>
+          <span class="schedule-content-room-id">
+            {{ item.basicRoomInfo.roomId }}
+          </span>
+          <i
+            v-if="item.status === TUIConferenceStatus.kConferenceStatusRunning"
+            class="segregation-vertical"
+          ></i>
+          <span
+            class="schedule-content-status"
+            :class="getStatusTextAndClass(item.status).className"
+          >
+            {{ t(getStatusTextAndClass(item.status).text) }}
+          </span>
+        </div>
       </div>
-    </div>
-    <div ref="moreBtnRef" class="schedule-room-operate">
-      <svg-icon class="ellipsis" :icon="EllipsisIcon" @click="toggleClickMoreBtn"></svg-icon>
-      <div
-        v-show="showMoreControl"
-        ref="operateListRef"
-        :class="['operate-list', dropdownClass]"
-      >
-        <template
-          v-for="controlItem in moreControlList"
-          :key="controlItem.key"
+      <div ref="moreBtnRef" class="schedule-room-operate">
+        <svg-icon
+          class="ellipsis"
+          :icon="EllipsisIcon"
+          @click="toggleClickMoreBtn"
+          v-if="!isMobile"
+        />
+        <div
+          v-show="showMoreControl"
+          ref="operateListRef"
+          :class="[
+            'operate-list',
+            dropdownClass,
+            !showMoreControl ? 'hidden' : '',
+          ]"
         >
-          <div
-            v-if="controlItem.visible"
-            class="operate-item"
-            :class="{ 'cancel-text': controlItem.key === 'cancelRoom' }"
-            @click="controlItem.func()"
-          >
-            <span class="operate-text" @click="controlItem.func">{{ controlItem.title }}</span>
-          </div>
-        </template>
+          <template v-for="controlItem in moreControlList">
+            <div
+              v-if="controlItem.visible"
+              :key="controlItem.key"
+              class="operate-item"
+              :class="{ 'cancel-text': controlItem.key === 'cancelRoom' }"
+              @click="controlItem.func()"
+            >
+              <span class="operate-text" @click="controlItem.func">{{
+                controlItem.title
+              }}</span>
+            </div>
+          </template>
+        </div>
+        <svg-icon
+          v-if="!isMobile"
+          class="link"
+          :icon="LinkIcon"
+          @click="toggleInviteRoom"
+        />
+        <tui-button size="default" @click="joinConference">
+          {{ t('Join') }}
+        </tui-button>
       </div>
-      <svg-icon class="link" :icon="LinkIcon" @click="toggleInviteRoom"></svg-icon>
-      <tui-button size="default" @click="joinConference">{{ t('join') }}</tui-button>
     </div>
-    <ScheduleConferencePanel
-      :visible="modifyDialogVisible"
-      :conference-info="props.item"
-      @input="modifyDialogVisible = $event"
-    ></ScheduleConferencePanel>
-    <Dialog
-      v-model="showRoomDetail"
+    <PanelContainer
+      :visible="showRoomDetail"
+      @input="showRoomDetail = $event"
       :title="t('Room Details')"
-      :modal="true"
-      :show-close="true"
-      :close-on-click-modal="true"
+      :editButtonText="modifyRoom.visible && t('Modify')"
       width="540px"
-      :append-to-body="true"
+      @edit="modifyRoom.func"
     >
-      <div class="roomInfo-container">
+      <div class="room-detail-content">
+        <ConferenceDetail
+          :conferenceInfo="props.item"
+          :scheduleRoomDetailList="scheduleRoomDetailList"
+        />
+      </div>
+      <div class="room-detail h5" v-if="isMobile">
+        <div class="detail-footer">
+          <tui-button
+            type="primary"
+            :round="false"
+            plain
+            class="footer-button"
+            :custom-style="{ width: '100%', padding: '10px', fontSize: '16px' }"
+            @click.stop="joinConference"
+            >{{ t('Join Room') }}
+          </tui-button>
+          <tui-button
+            type="primary"
+            :round="false"
+            plain
+            class="footer-button"
+            :custom-style="{ width: '100%', padding: '10px', fontSize: '16px' }"
+            @click.stop="toggleInvitePanelShow"
+            >{{ t('Invited members') }}
+          </tui-button>
+          <tui-button
+            type="danger"
+            :round="false"
+            plain
+            class="footer-button"
+            :custom-style="{ width: '100%', padding: '10px', fontSize: '16px' }"
+            v-if="cancelRoom.visible"
+            @click.stop="cancelRoom.func"
+            >{{ t('cancel room') }}
+          </tui-button>
+        </div>
         <div
-          v-for="(item, index) in scheduleRoomDetailList"
-          v-show="item.isVisible"
-          :key="index"
-          class="roomInfo-content"
-        >
-          <span class="roomInfo-title">{{ t(item.title) }}</span>
-          <span class="roomInfo-item" :title="item.content">{{ item.content }}</span>
-          <span v-if="item.isShowCopyIcon" class="copy-container" @click="onCopy(item.content)">
-            <svg-icon class="copy" :icon="copyIcon"></svg-icon>
-          </span>
-          <div v-if="item.isShowStatus" :class="['roomInfo-status', getStatusTextAndClass(item.status).className]">
-            {{ t(getStatusTextAndClass(item.status).text) }}
+          class="mask"
+          v-if="invitePanelShow"
+          @click.stop="toggleInvitePanelShow"
+        ></div>
+        <div class="invite-member-panel" v-if="invitePanelShow">
+          <div class="invite-member-close" @click="toggleInvitePanelShow">
+            <svg-icon :icon="ArrowDown" />
+          </div>
+          <div class="invite-member-header">
+            {{ t('Inviting members to join') }}
           </div>
+          <InvitePanel :scheduleInviteList="scheduleInviteList" />
         </div>
       </div>
-      <template #footer>
+      <template v-if="!isMobile" #footer>
         <tui-button
           v-if="item.status === TUIConferenceStatus.kConferenceStatusNone"
           class="dialog-button"
-          size="default" disabled
+          size="default"
+          disabled
         >
           {{ t('The room is closed') }}
         </tui-button>
         <span v-else>
-          <tui-button class="dialog-button" size="default" @click="joinConference">{{ t('Enter Now') }}</tui-button>
           <tui-button
-            type="primary" size="default" class="button" @click="toggleInviteRoom"
-          >{{ t('Invited members') }}</tui-button>
+            class="dialog-button"
+            size="default"
+            @click="joinConference"
+          >
+            {{ t('Enter Now') }}
+          </tui-button>
+          <tui-button
+            type="primary"
+            size="default"
+            class="button"
+            @click="toggleInviteRoom"
+            >{{ t('Invited members') }}
+          </tui-button>
         </span>
       </template>
-    </Dialog>
+    </PanelContainer>
+    <ScheduleConferencePanel
+      :visible="modifyDialogVisible"
+      :conference-info="props.item"
+      @input="modifyDialogVisible = $event"
+    />
     <Dialog
       v-model="showRoomCancel"
       :title="t('Cancellation of scheduled rooms')"
@@ -98,18 +176,39 @@
       width="480px"
       :append-to-body="true"
       :title-icon="WarningIcon"
+      :cancelButton="t('No cancellation')"
+      :confirmButton="t('cancel room')"
+      @confirm="handleCancelSchedule"
+      @cancel="showRoomCancel = false"
     >
-      <span>{{ t('Other members will not be able to join after cancellation') }}</span>
+      <span>{{
+        t('Other members will not be able to join after cancellation')
+      }}</span>
       <template #footer>
         <span>
-          <tui-button class="dialog-button" size="default" @click="handleCancelSchedule">{{ t('cancel room') }}</tui-button>
-          <tui-button type="primary" size="default" class="button" @click="showRoomCancel = false">{{ t('No cancellation') }}</tui-button>
+          <tui-button
+            class="dialog-button"
+            size="default"
+            @click="handleCancelSchedule"
+            >{{ t('cancel room') }}
+          </tui-button>
+          <tui-button
+            type="primary"
+            size="default"
+            class="button"
+            @click="showRoomCancel = false"
+            >{{ t('No cancellation') }}
+          </tui-button>
         </span>
       </template>
     </Dialog>
     <Dialog
       v-model="showRoomInvite"
-      :title="t('sb invites you to join the conference', { name: userName || userId })"
+      :title="
+        t('sb invites you to join the conference', {
+          name: userName || userId,
+        })
+      "
       :modal="true"
       :show-close="true"
       :close-on-click-modal="true"
@@ -117,16 +216,15 @@
       :append-to-body="true"
       :title-icon="SuccessIcon"
     >
-      <div class="invite-member">
-        <div v-for="(item, index) in scheduleInviteList" :key="index" class="invite-member-container">
-            <span class="invite-member-title">{{ t(item.title) }}</span>
-            <span class="invite-member-content" :title="item.content"> {{ item.content }}</span>
-            <svg-icon class="copy" :icon="copyIcon" v-if="item.isShowCopyIcon" @click="onCopy(item.content)"></svg-icon>
-          </div>
-      </div>
+      <InvitePanel :scheduleInviteList="scheduleInviteList" />
       <template #footer>
         <span>
-          <tui-button class="dialog-button" size="default" @click="copyRoomIdAndRoomLink()">{{ t('Copy the conference number and link') }}</tui-button>
+          <tui-button
+            class="dialog-button"
+            size="default"
+            @click="copyRoomIdAndRoomLink()"
+            >{{ t('Copy the conference number and link') }}
+          </tui-button>
         </span>
       </template>
     </Dialog>
@@ -134,27 +232,42 @@
 </template>
 
 <script setup lang="ts">
-import { TUIConferenceStatus  } from '@tencentcloud/tuiroom-engine-electron';
-import { ref, defineProps, nextTick, computed, defineEmits } from 'vue';
+import { TUIConferenceStatus } from '@tencentcloud/tuiroom-engine-electron';
+import {
+  ref,
+  defineProps,
+  nextTick,
+  computed,
+  defineEmits,
+  onMounted,
+} from 'vue';
 import { roomService } from '../../services';
-import useRoomInfo from '../../components/RoomHeader/RoomInfo/useRoomInfoHooks';
-import SvgIcon from '../../components/common/base/SvgIcon.vue';
-import Dialog from '../../components/common/base/Dialog/index.vue';
-import EllipsisIcon from '../../components/common/icons/EllipsisIcon.vue';
-import copyIcon from '../../components/common/icons/CopyIcon.vue';
-import LinkIcon from '../../components/common/icons/LinkIcon.vue';
-import SuccessIcon from '../../components/common/icons/SuccessIcon.vue';
-import WarningIcon from '../../components/common/icons/WarningIcon.vue';
-import TuiButton from '../../components/common/base/Button.vue';
+import useRoomInfo from '../RoomHeader/RoomInfo/useRoomInfoHooks';
+import SvgIcon from '../common/base/SvgIcon.vue';
+import Dialog from '../common/base/Dialog/index.vue';
+import EllipsisIcon from '../common/icons/EllipsisIcon.vue';
+import ChevronRight from '../common/icons/ChevronRight.vue';
+import ArrowDown from '../common/icons/ArrowDown.vue';
+import LinkIcon from '../common/icons/LinkIcon.vue';
+import SuccessIcon from '../common/icons/SuccessIcon.vue';
+import WarningIcon from '../common/icons/WarningIcon.vue';
+import TuiButton from '../common/base/Button.vue';
 import { useI18n } from '../../locales';
 import vClickOutside from '../../directives/vClickOutside';
-import ScheduleConferencePanel from './ScheduleConferencePanel.vue';
-import { getUrlWithRoomId } from '../../utils/utils';
+import ScheduleConferencePanel from './ScheduleConferencePanel/index.vue';
+import { getUrlWithRoomId, convertSecondsToHMS } from '../../utils/utils';
 import { useBasicStore } from '../../stores/basic';
 import { storeToRefs } from 'pinia';
+import { isMobile } from '../../utils/environment';
+import ConferenceDetail from './ConferenceDetail.vue';
+import InvitePanel from './InvitePanel.vue';
+import PanelContainer from './PanelContainer.vue';
+import logger from '../../utils/common/logger';
 
 const basicStore = useBasicStore();
-const { userId, userName } = storeToRefs(basicStore);
+const { userId, userName, isRoomLinkVisible } = storeToRefs(basicStore);
+
+const roomLinkConfig = roomService.getComponentConfig('RoomLink');
 
 const { t } = useI18n();
 const showMoreControl = ref(false);
@@ -166,6 +279,7 @@ const emit = defineEmits(['join-conference', 'show-more']);
 const showRoomDetail = ref(false);
 const showRoomCancel = ref(false);
 const showRoomInvite = ref(false);
+const roomInfo = ref();
 
 const props = defineProps<{
   item: any;
@@ -191,10 +305,16 @@ const statusMap: StatusMapType = {
   },
 };
 
-const getStatusTextAndClass = (status: TUIConferenceStatus) => statusMap[status] || { text: '', className: '' };
+const getStatusTextAndClass = (status: TUIConferenceStatus) =>
+  statusMap[status] || { text: '', className: '' };
+
+const isOwner = computed(
+  () =>
+    props.item.basicRoomInfo.ownerId === roomService.basicStore.userId &&
+    props.item.status === TUIConferenceStatus.kConferenceStatusNotStarted
+);
 
-const isOwner = computed(() => props.item.basicRoomInfo.ownerId === roomService.basicStore.userId
-  && props.item.status === TUIConferenceStatus.kConferenceStatusNotStarted);
+const isShowPassword = computed(() => !!roomInfo.value?.password);
 
 const viewDetails = computed(() => ({
   key: 'roomDetails',
@@ -231,8 +351,19 @@ const moreControlList = computed(() => [
   modifyRoom.value,
   cancelRoom.value,
 ]);
-const scheduleAttendeesInfo = computed(() => (props.item.scheduleAttendees ? props.item.scheduleAttendees.map((attendee: { userId: string; userName: string; }) => attendee.userName || attendee.userId).join('; ') : ''));
-const durationTime = computed(() => props.item.scheduleEndTime - props.item.scheduleStartTime);
+const scheduleAttendeesInfo = computed(() =>
+  props.item.scheduleAttendees
+    ? props.item.scheduleAttendees
+        .map(
+          (attendee: { userId: string; userName: string }) =>
+            attendee.userName || attendee.userId
+        )
+        .join('; ')
+    : ''
+);
+const durationTime = computed(
+  () => props.item.scheduleEndTime - props.item.scheduleStartTime
+);
 
 function getScheduleTime(timestamp: number) {
   const date = new Date(timestamp);
@@ -240,30 +371,146 @@ function getScheduleTime(timestamp: number) {
   const minutes = `${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()}`;
   return `${hours}:${minutes}`;
 }
-const scheduleRoomDetailList = computed(() => [
-  { title: 'Room Name', content: props.item.basicRoomInfo.roomName, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: true },
-  { title: 'Room ID', content: props.item.basicRoomInfo.roomId, isShowCopyIcon: true, status: null, isShowStatus: false,  isVisible: true },
+
+const scheduleRoomDetailList = computed(() => {
+  const { hours, minutes } = convertSecondsToHMS(
+    props.item.scheduleEndTime - props.item.scheduleStartTime
+  );
+  return [
+    {
+      title: 'Room Name',
+      content: props.item.basicRoomInfo.roomName,
+      isShowCopyIcon: false,
+      status: null,
+      isShowStatus: false,
+      isVisible: true,
+    },
+    {
+      title: 'Room ID',
+      content: props.item.basicRoomInfo.roomId,
+      isShowCopyIcon: true,
+      status: null,
+      isShowStatus: false,
+      isVisible: true,
+    },
+    {
+      title: 'Room Time',
+      content: `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndDate} ${props.scheduleEndTime}`,
+      isShowCopyIcon: false,
+      status: props.item.status,
+      isShowStatus: true,
+      isVisible: !isMobile,
+    },
+    {
+      title: 'Starting time',
+      content: `${props.scheduleStartDate} ${props.scheduleStartTime}`,
+      isShowCopyIcon: false,
+      status: null,
+      isShowStatus: false,
+      isVisible: isMobile,
+    },
+    {
+      title: 'Room duration',
+      content: hours
+        ? `${hours}${t('hours')}${minutes ? ` ${minutes}${t('minutes')}` : ''}`
+        : `${minutes}${t('minutes')}`,
+      isShowCopyIcon: false,
+      status: null,
+      isShowStatus: false,
+      isVisible: isMobile,
+    },
+    {
+      title: 'Room Type',
+      content: `${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}`,
+      isShowCopyIcon: false,
+      status: null,
+      isShowStatus: false,
+      isVisible: true,
+    },
+    {
+      title: 'Room Password',
+      content: `${roomInfo.value?.password}`,
+      isShowCopyIcon: true,
+      status: null,
+      isShowStatus: false,
+      isVisible: isShowPassword.value,
+    },
+    {
+      title: 'Creator',
+      content: props.item.basicRoomInfo.roomOwner,
+      isShowCopyIcon: false,
+      status: null,
+      isShowStatus: false,
+      isVisible: true,
+    },
+    {
+      title: 'Participants',
+      content: scheduleAttendeesInfo.value,
+      isShowCopyIcon: false,
+      status: null,
+      isShowStatus: false,
+      isVisible: true,
+    },
+    {
+      title: 'Entry Time',
+      content: `${props.scheduleStartDate}${props.scheduleStartTime}`,
+      isShowCopyIcon: false,
+      status: null,
+      isShowStatus: false,
+      isVisible:
+        props.item.status === TUIConferenceStatus.kConferenceStatusNone,
+    },
+    {
+      title: 'Duration of participation',
+      content: getScheduleTime(durationTime.value),
+      isShowCopyIcon: false,
+      status: null,
+      isShowStatus: false,
+      isVisible:
+        props.item.status === TUIConferenceStatus.kConferenceStatusNone,
+    },
+  ];
+});
+
+const scheduleInviteList = computed(() => [
+  {
+    title: 'Room Name',
+    content: props.item.basicRoomInfo.roomName,
+    isShowCopyIcon: false,
+    isVisible: true,
+  },
+  {
+    title: 'Room Type',
+    content: `${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}`,
+    isShowCopyIcon: false,
+    isVisible: true,
+  },
   {
     title: 'Room Time',
-    content: `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndDate} ${props.scheduleEndTime}`,
+    content: !isMobile
+      ? `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndDate} ${props.scheduleEndTime}`
+      : `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndTime}`,
     isShowCopyIcon: false,
-    status: props.item.status,
-    isShowStatus: true,
     isVisible: true,
   },
-  { title: 'Room Type', content: `${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}`, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: true },
-  { title: 'Creator', content: props.item.basicRoomInfo.roomOwner, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: true },
-  { title: 'Members', content: scheduleAttendeesInfo.value, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: true },
-  { title: 'Entry Time', content: `${props.scheduleStartDate}${props.scheduleStartTime}`, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: props.item.status === TUIConferenceStatus.kConferenceStatusNone },
-  { title: 'Duration of participation', content: getScheduleTime(durationTime.value), isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: props.item.status === TUIConferenceStatus.kConferenceStatusNone },
-]);
-
-const scheduleInviteList = computed(() => [
-  { title: 'Room Name', content: props.item.basicRoomInfo.roomName, isShowCopyIcon: false },
-  { title: 'Room Type', content: `${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}`, isShowCopyIcon: false },
-  { title: 'Room Time', content: `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndDate} ${props.scheduleEndTime}`, isShowCopyIcon: false },
-  { title: 'Room ID', content: props.item.basicRoomInfo.roomId, isShowCopyIcon: true },
-  { title: 'Room Link', content: getUrlWithRoomId(props.item.basicRoomInfo.roomId), isShowCopyIcon: true },
+  {
+    title: 'Room ID',
+    content: props.item.basicRoomInfo.roomId,
+    isShowCopyIcon: true,
+    isVisible: true,
+  },
+  {
+    title: 'Room Password',
+    content: `${roomInfo.value?.password}`,
+    isShowCopyIcon: true,
+    isVisible: isShowPassword.value,
+  },
+  {
+    title: 'Room Link',
+    content: getUrlWithRoomId(props.item.basicRoomInfo.roomId),
+    isShowCopyIcon: isMobile,
+    isVisible: isRoomLinkVisible.value && roomLinkConfig.visible,
+  },
 ]);
 
 function getSeatModeDisplay(isSeatEnabled: boolean) {
@@ -283,8 +530,11 @@ function handleCloseOperate() {
 }
 
 async function handleDropDownPosition() {
-  const { top, bottom } = moreBtnRef.value?.getBoundingClientRect();
-  const { top: containerTop, bottom: containerBottom } = document.getElementById('scheduleRoomContainer')?.getBoundingClientRect() as DOMRect;
+  await nextTick();
+  const { top, bottom } = moreBtnRef.value?.getBoundingClientRect() || {};
+  const { top: containerTop, bottom: containerBottom } = document
+    .getElementById('scheduleRoomContainer')
+    ?.getBoundingClientRect() as DOMRect;
   if (!containerBottom || !containerTop) {
     return;
   }
@@ -292,7 +542,8 @@ async function handleDropDownPosition() {
   const topSize = top - containerTop;
   let dropDownContainerHeight = 0;
   if (!showMoreControl.value) {
-    operateListRef.value.style = 'display:block;position:absolute;z-index:-1000';
+    operateListRef.value.style =
+      'display:block;position:absolute;z-index:-1000';
     await nextTick();
     dropDownContainerHeight = operateListRef.value.offsetHeight;
     operateListRef.value.style = '';
@@ -307,6 +558,7 @@ async function handleDropDownPosition() {
   }
 }
 
+const invitePanelShow = ref(false);
 const joinConference = () => {
   emit('join-conference', {
     roomId: props.item?.basicRoomInfo.roomId,
@@ -316,6 +568,14 @@ const joinConference = () => {
     },
   });
 };
+const toggleInvitePanelShow = () => {
+  invitePanelShow.value = !invitePanelShow.value;
+};
+const showDetail = () => {
+  if (!isMobile) return;
+  emit('show-more', { roomId: props.item.basicRoomInfo.roomId });
+  viewDetails.value.func();
+};
 function toggleInviteRoom() {
   if (showRoomDetail.value) {
     showRoomDetail.value = false;
@@ -324,254 +584,306 @@ function toggleInviteRoom() {
 }
 
 function copyRoomIdAndRoomLink() {
-  const invitation = `${props.item.basicRoomInfo.roomName}\n
-${t('Room Type')}: ${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}\n
-${t('Room Time')}: ${props.scheduleStartDate}${props.scheduleStartTime} - ${props.scheduleEndDate}${props.scheduleEndTime}\n
-${t('Room ID')}: ${props.item.basicRoomInfo.roomId}\n
-${t('Room Link')}: ${getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`;
+  const invitationList = [
+    `${props.item.basicRoomInfo.roomName}`,
+    `${t('Room Type')}: ${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}`,
+    `${t('Room ID')}: ${props.item.basicRoomInfo.roomId}`,
+  ];
+  if (isShowPassword.value) {
+    invitationList.push(`${t('Room Password')}: ${roomInfo.value?.password}`);
+  }
+  if (isRoomLinkVisible.value && roomLinkConfig.visible) {
+    invitationList.push(
+      `${t('Room Link')}: ${getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`
+    );
+  }
+  const invitation = invitationList.join('\n');
   onCopy(invitation);
 }
 
 async function handleCancelSchedule() {
-  await roomService.scheduleConferenceManager.cancelConference({ roomId: props.item.basicRoomInfo.roomId });
+  await roomService.scheduleConferenceManager.cancelConference({
+    roomId: props.item.basicRoomInfo.roomId,
+  });
   showRoomCancel.value = false;
+  showRoomDetail.value = false;
 }
+
+onMounted(async () => {
+  try {
+    const roomInfoParams = {
+      roomId: props.item.basicRoomInfo.roomId,
+      roomType: props.item.basicRoomInfo.roomType,
+    };
+    roomInfo.value = await roomService.fetchRoomInfo(roomInfoParams);
+  } catch (error) {
+    logger.error('fetch roomInfo failed:', error);
+  }
+});
 </script>
 
 <style scoped lang="scss">
 .tui-theme-black .operate-list {
-  --operation-box-shadow: 0px 3px 8px rgba(34, 38, 46, 0.30), 0px 6px 40px rgba(34, 38, 46, 0.30);
+  --operation-box-shadow: 0px 3px 8px rgba(34, 38, 46, 0.3),
+    0px 6px 40px rgba(34, 38, 46, 0.3);
 }
 
 .tui-theme-white .operate-list {
-  --operation-box-shadow: 0px 3px 8px #E9F0FB, 0px 6px 40px rgba(0, 0, 0, 0.10);
+  --operation-box-shadow: 0px 3px 8px #e9f0fb, 0px 6px 40px rgba(0, 0, 0, 0.1);
 }
+
 .schedule-room-control {
-    padding: 10px;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    .schedule-room-info {
-      flex: 1;
-      .schedule-title {
-        font-weight: 500;
-        font-size: 16px;
-        color: var(--font-color-4);
-        white-space: nowrap;
-        max-width: 220px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding: 10px;
+  user-select: none;
+
+  .schedule-room-info {
+    flex: 1;
+
+    .schedule-title {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      max-width: 220px;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--font-color-4);
+
+      .schedule-title-text {
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
       }
-        .schedule-content {
-          font-size: 14px;
-          font-weight: 400;
-          color: var(--font-color-4);
-          margin-top: 6px;
-          display: flex;
-          .schedule-content-time {
-            min-width: 94px;
-            max-width: 94px;
-            .segregation-level{
-              width: 10px;
-              height: 1px;
-              background-color: var(--font-color-4);
-              display: inline-block;
-              margin: 0 4px 4px 4px;
-            }
-          }
-          .schedule-content-roomId {
-            text-overflow: ellipsis;
-            flex-wrap: nowrap;
-            min-width: 60px;
-            max-width: 84px;
-            padding-right: 10px;
-          }
-          .segregation-vertical {
-            width: 1px;
-            height: 10px;
-            background-color: #969EB4;
-            margin: 5px 10px 0 5px;
-          }
-        }
-    }
-    .schedule-room-operate {
-      display: flex;
-      align-items: center;
-      position: relative;
-      justify-content: space-between;
-      .ellipsis, .link {
-        width: 30px;
-        height: 30px;
-        color: var(--active-color-1);
-        margin-right: 6px;
-        &:hover {
-          border-radius: 4px;
-          background: rgba(150, 158, 180, 0.10);
-        }
+
+      .schedule-title-icon {
+        min-width: 6px;
       }
-    .operate-list {
-      position: absolute;
-      min-width: 96px;
-      background: #FFFFFF;
-      border-radius: 8px;
-      box-shadow: var(--operation-box-shadow);
-      z-index: 1;
+    }
+
+    .schedule-content {
       display: flex;
-      flex-direction: column;
-      padding: 20px;
-      &::before {
-        content: '';
-        position: absolute;
-        width: 0px;
-        border-top: 10px solid transparent;
-        border-right: 10px solid transparent;
-        border-bottom: 10px solid #FFFFFF;
-        border-left: 10px solid transparent;
-      }
-      .operate-item {
-        cursor: pointer;
-        color: #6B758A;
-        height: 20px;
-        display: flex;
-        justify-content: center;
-        .operate-text {
-          font-size: 14px;
-          white-space: nowrap;
-          }
-          &:not(:first-child) {
-            margin-top: 20px;
-          }
-          &:hover {
-            color: var(--active-color-1);
-          }
-      }
-      .cancel-text{
-        color: var(--red-color-2);
-        &:hover {
-          color: var(--red-color-2);
+      margin-top: 6px;
+      font-size: 14px;
+      font-weight: 400;
+      color: var(--font-color-4);
+
+      .schedule-content-time {
+        min-width: 94px;
+        max-width: 94px;
+
+        .segregation-level {
+          display: inline-block;
+          width: 10px;
+          height: 1px;
+          margin: 0 4px 4px;
+          background-color: var(--font-color-4);
         }
       }
-    }
-    .down {
-      top: 50px;
-      right: 74px;
-      &::before {
-        right: 60px;
-        top: -20px;
-      }
-      &::after {
-        left: 0px;
-        top: -20px;
-      }
-    }
-    .up {
-      bottom: 50px;
-      right: 74px;
-      &::before {
-        bottom: -20px;
-        right: 60px;
-        transform: rotate(180deg);
+
+      .schedule-content-room-id {
+        flex-wrap: nowrap;
+        min-width: 60px;
+        max-width: 84px;
+        padding-right: 10px;
+        text-overflow: ellipsis;
       }
-      &::after {
-        left: 0px;
-        bottom: -20px;
+
+      .segregation-vertical {
+        width: 1px;
+        height: 10px;
+        margin: 5px 10px 0 5px;
+        background-color: #969eb4;
       }
     }
-    }
-    &:hover {
-      background-color: rgba(150, 158, 180, 0.1);
-      cursor: pointer;
-      border-radius: 8px;
-    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: rgba(150, 158, 180, 0.1);
+    border-radius: 8px;
+  }
+}
+
+.room-detail-content {
+  background-color: #fff;
+  border-radius: 8px;
 }
-.roomInfo-container {
+
+.room-detail.h5 {
+  .detail-footer {
     display: flex;
     flex-direction: column;
-    gap: 20px;
-  .roomInfo-content {
+    gap: 10px;
+    margin-top: 16px;
+
+    .footer-button {
+      font-size: 16px;
+      font-weight: 500;
+      border-radius: 6px;
+    }
+  }
+}
+
+.invite-member-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  padding: 20px 12px 36px;
+  background-color: #fff;
+  border-radius: 18px 18px 0 0;
+
+  .invite-member-close {
     display: flex;
-    min-width: 300px;
-    align-items: stretch;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    .roomInfo-title {
-      flex-basis: 18%;
-      color: #4F586B;
+    justify-content: center;
+    padding-bottom: 12px;
+    text-align: center;
+  }
+
+  .invite-member-header {
+    margin-bottom: 12px;
+    font-size: 18px;
+    font-weight: 500;
+    color: #4f586b;
+  }
+}
+
+.schedule-room-operate {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .ellipsis,
+  .link {
+    width: 30px;
+    height: 30px;
+    margin-right: 6px;
+    color: var(--active-color-1);
+
+    &:hover {
+      background: rgba(150, 158, 180, 0.1);
+      border-radius: 4px;
     }
-    .roomInfo-item {
-      overflow: hidden;
-      max-width: 360px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      color: #4F586B;
-      font-weight: 500;
+  }
+
+  .operate-list {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 96px;
+    padding: 20px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: var(--operation-box-shadow);
+
+    &::before {
+      position: absolute;
+      width: 0;
+      content: '';
+      border-top: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-bottom: 10px solid #fff;
+      border-left: 10px solid transparent;
     }
-    .copy-container {
+
+    .operate-item {
       display: flex;
+      justify-content: center;
+      height: 20px;
+      color: #6b758a;
       cursor: pointer;
-      color: var(--active-color-2);
-      margin-left: 6px;
-      .copy {
-        width: 20px;
-        height: 20px;
+
+      .operate-text {
+        font-size: 14px;
+        white-space: nowrap;
+      }
+
+      &:not(:first-child) {
+        margin-top: 20px;
+      }
+
+      &:hover {
+        color: var(--active-color-1);
       }
     }
-    .roomInfo-status {
-      margin-left: 10px;
+
+    .cancel-text {
+      color: var(--red-color-2);
+
+      &:hover {
+        color: var(--red-color-2);
+      }
     }
   }
-}
 
-.invite-member {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    margin-top: 10px;
-  .invite-member-container {
-    display: flex;
-    min-width: 400px;
-    align-items: stretch;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    color: #4F586B;
-    .invite-member-title {
-      flex-basis: 18%;
+  .down {
+    top: 50px;
+    right: 74px;
+
+    &::before {
+      top: -20px;
+      right: 60px;
     }
-    .invite-member-content {
-      font-weight: 500;
-      max-width: 360px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+
+    &::after {
+      top: -20px;
+      left: 0;
     }
-    .copy {
-      width: 20px;
-      height: 20px;
-      cursor: pointer;
-      color: var(--active-color-1);
-      margin-left: 8px;
+  }
+
+  .up {
+    right: 74px;
+    bottom: 50px;
+
+    &::before {
+      right: 60px;
+      bottom: -20px;
+      transform: rotate(180deg);
+    }
+
+    &::after {
+      bottom: -20px;
+      left: 0;
     }
   }
 }
+
 .schedule-detail-closed {
-  color: #4F586B;
+  color: #4f586b;
 }
+
 .button {
   margin-left: 10px;
 }
+
 .status-not-start {
   color: var(--font-color-10);
 }
+
 .status-running {
   color: var(--active-color-1);
 }
+
 .status-finished {
-  color: #B2BBD1;
+  color: #b2bbd1;
+}
+
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.hidden {
+  opacity: 0;
 }
 </style>