@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/es/components/ScheduleConference/ScheduleRoomControl.vue2.mjs

@@ -1,7 +1,8 @@
-import { defineComponent, ref, computed, withDirectives, openBlock, createElementBlock, createElementVNode, toDisplayString, unref, createCommentVNode, normalizeClass, createVNode, Fragment, renderList, vShow, withCtx, createTextVNode, createBlock, nextTick, pushScopeId, popScopeId } from "vue";
+import { defineComponent, ref, computed, onMounted, openBlock, createElementBlock, withDirectives, createElementVNode, toDisplayString, unref, createBlock, createCommentVNode, normalizeClass, Fragment, renderList, vShow, createVNode, withCtx, createTextVNode, createSlots, withModifiers, nextTick, pushScopeId, popScopeId } from "vue";
 import { TUIConferenceStatus } from "@tencentcloud/tuiroom-engine-electron";
 import "../../services/main.mjs";
 import { roomService } from "../../services/roomService.mjs";
+import logger from "../../utils/common/logger/index.mjs";
 import { useI18n } from "../../locales/index.mjs";
 import "mitt";
 import "../../services/manager/roomActionManager.mjs";
@@ -9,39 +10,48 @@ import useRoomInfo from "../RoomHeader/RoomInfo/useRoomInfoHooks.mjs";
 import SvgIcon from "../common/base/SvgIcon.vue.mjs";
 import Dialog from "../common/base/Dialog/index.vue.mjs";
 import EllipsisIcon from "../common/icons/EllipsisIcon.vue.mjs";
-import copyIcon from "../common/icons/CopyIcon.vue.mjs";
+import ChevronRight from "../common/icons/ChevronRight.vue.mjs";
+import ArrowDown from "../common/icons/ArrowDown.vue.mjs";
 import LinkIcon from "../common/icons/LinkIcon.vue.mjs";
 import SuccessIcon from "../common/icons/SuccessIcon.vue.mjs";
 import WarningIcon from "../common/icons/WarningIcon.vue.mjs";
 import TuiButton from "../common/base/Button.vue.mjs";
 import vClickOutside from "../../directives/vClickOutside.mjs";
-import ScheduleConferencePanel from "./ScheduleConferencePanel.vue.mjs";
-import { getUrlWithRoomId } from "../../utils/utils.mjs";
+import ScheduleConferencePanel from "./ScheduleConferencePanel/index.vue.mjs";
+import { convertSecondsToHMS, getUrlWithRoomId } from "../../utils/utils.mjs";
 import { useBasicStore } from "../../stores/basic.mjs";
 import { storeToRefs } from "pinia";
-const _withScopeId = (n) => (pushScopeId("data-v-8b752e7f"), n = n(), popScopeId(), n);
+import { isMobile } from "../../utils/environment.mjs";
+import ConferenceDetail from "./ConferenceDetail.vue.mjs";
+import InvitePanel from "./InvitePanel.vue.mjs";
+import PanelContainer from "./PanelContainer.vue.mjs";
+const _withScopeId = (n) => (pushScopeId("data-v-e29cbb1f"), n = n(), popScopeId(), n);
 const _hoisted_1 = { class: "schedule-room-control" };
-const _hoisted_2 = { class: "schedule-room-info" };
-const _hoisted_3 = ["title"];
+const _hoisted_2 = ["title"];
+const _hoisted_3 = { class: "schedule-title-text" };
 const _hoisted_4 = { class: "schedule-content" };
 const _hoisted_5 = { class: "schedule-content-time" };
 const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "segregation-level" }, null, -1));
 const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "segregation-vertical" }, null, -1));
-const _hoisted_8 = { class: "schedule-content-roomId" };
+const _hoisted_8 = { class: "schedule-content-room-id" };
 const _hoisted_9 = {
   key: 0,
   class: "segregation-vertical"
 };
 const _hoisted_10 = ["onClick"];
 const _hoisted_11 = ["onClick"];
-const _hoisted_12 = { class: "roomInfo-container" };
-const _hoisted_13 = { class: "roomInfo-title" };
-const _hoisted_14 = ["title"];
-const _hoisted_15 = ["onClick"];
-const _hoisted_16 = { key: 1 };
-const _hoisted_17 = { class: "invite-member" };
-const _hoisted_18 = { class: "invite-member-title" };
-const _hoisted_19 = ["title"];
+const _hoisted_12 = { class: "room-detail-content" };
+const _hoisted_13 = {
+  key: 0,
+  class: "room-detail h5"
+};
+const _hoisted_14 = { class: "detail-footer" };
+const _hoisted_15 = {
+  key: 1,
+  class: "invite-member-panel"
+};
+const _hoisted_16 = { class: "invite-member-header" };
+const _hoisted_17 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ScheduleRoomControl",
   props: {
@@ -54,7 +64,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["join-conference", "show-more"],
   setup(__props, { emit: __emit }) {
     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);
     const dropdownClass = ref("down");
@@ -65,6 +76,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const showRoomDetail = ref(false);
     const showRoomCancel = ref(false);
     const showRoomInvite = ref(false);
+    const roomInfo = ref();
     const props = __props;
     const { onCopy } = useRoomInfo();
     const statusMap = {
@@ -74,7 +86,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const getStatusTextAndClass = (status) => 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(() => {
+      var _a;
+      return !!((_a = roomInfo.value) == null ? void 0 : _a.password);
+    });
     const viewDetails = computed(() => ({
       key: "roomDetails",
       title: t("view details"),
@@ -107,38 +125,157 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       modifyRoom.value,
       cancelRoom.value
     ]);
-    const scheduleAttendeesInfo = computed(() => props.item.scheduleAttendees ? props.item.scheduleAttendees.map((attendee) => 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) => attendee.userName || attendee.userId
+      ).join("; ") : ""
+    );
+    const durationTime = computed(
+      () => props.item.scheduleEndTime - props.item.scheduleStartTime
+    );
     function getScheduleTime(timestamp) {
       const date = new Date(timestamp);
       const hours = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}`;
       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 },
-      {
-        title: "Room Time",
-        content: `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndDate} ${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 }
-    ]);
+    const scheduleRoomDetailList = computed(() => {
+      var _a;
+      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: `${(_a = roomInfo.value) == null ? void 0 : _a.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(() => {
+      var _a;
+      return [
+        {
+          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: !isMobile ? `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndDate} ${props.scheduleEndTime}` : `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndTime}`,
+          isShowCopyIcon: false,
+          isVisible: true
+        },
+        {
+          title: "Room ID",
+          content: props.item.basicRoomInfo.roomId,
+          isShowCopyIcon: true,
+          isVisible: true
+        },
+        {
+          title: "Room Password",
+          content: `${(_a = roomInfo.value) == null ? void 0 : _a.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) {
       return isSeatEnabled ? "On-stage Speaking Room" : "Free Speech Room";
     }
@@ -154,7 +291,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     async function handleDropDownPosition() {
       var _a, _b, _c;
-      const { top, bottom } = (_a = moreBtnRef.value) == null ? void 0 : _a.getBoundingClientRect();
+      await nextTick();
+      const { top, bottom } = ((_a = moreBtnRef.value) == null ? void 0 : _a.getBoundingClientRect()) || {};
       const { top: containerTop, bottom: containerBottom } = (_b = document.getElementById("scheduleRoomContainer")) == null ? void 0 : _b.getBoundingClientRect();
       if (!containerBottom || !containerTop) {
         return;
@@ -177,6 +315,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         dropdownClass.value = "up";
       }
     }
+    const invitePanelShow = ref(false);
     const joinConference = () => {
       var _a;
       emit("join-conference", {
@@ -187,6 +326,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     };
+    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;
@@ -194,175 +341,251 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       showRoomInvite.value = !showRoomInvite.value;
     }
     function copyRoomIdAndRoomLink() {
-      const invitation = `${props.item.basicRoomInfo.roomName}
-
-${t("Room Type")}: ${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}
-
-${t("Room Time")}: ${props.scheduleStartDate}${props.scheduleStartTime} - ${props.scheduleEndDate}${props.scheduleEndTime}
-
-${t("Room ID")}: ${props.item.basicRoomInfo.roomId}
-
-${t("Room Link")}: ${getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`;
+      var _a;
+      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")}: ${(_a = roomInfo.value) == null ? void 0 : _a.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);
+      }
+    });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
+      return openBlock(), createElementBlock("div", null, [
+        withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
           createElementVNode("div", {
-            class: "schedule-title",
-            title: _ctx.item.basicRoomInfo.roomName
-          }, toDisplayString(_ctx.item.basicRoomInfo.roomName), 9, _hoisted_3),
-          createElementVNode("div", _hoisted_4, [
-            createElementVNode("span", _hoisted_5, [
-              createElementVNode("span", null, toDisplayString(props.scheduleStartTime), 1),
-              _hoisted_6,
-              createElementVNode("span", null, toDisplayString(props.scheduleEndTime), 1)
-            ]),
-            _hoisted_7,
-            createElementVNode("span", _hoisted_8, toDisplayString(_ctx.item.basicRoomInfo.roomId), 1),
-            _ctx.item.status !== unref(TUIConferenceStatus).kConferenceStatusNotStarted ? (openBlock(), createElementBlock("i", _hoisted_9)) : createCommentVNode("", true),
-            createElementVNode("span", {
-              class: normalizeClass(["schedule-content-status", getStatusTextAndClass(_ctx.item.status).className])
-            }, toDisplayString(unref(t)(getStatusTextAndClass(_ctx.item.status).text)), 3)
-          ])
-        ]),
-        createElementVNode("div", {
-          ref_key: "moreBtnRef",
-          ref: moreBtnRef,
-          class: "schedule-room-operate"
-        }, [
-          createVNode(SvgIcon, {
-            class: "ellipsis",
-            icon: EllipsisIcon,
-            onClick: toggleClickMoreBtn
-          }),
-          withDirectives(createElementVNode("div", {
-            ref_key: "operateListRef",
-            ref: operateListRef,
-            class: normalizeClass(["operate-list", dropdownClass.value])
+            class: "schedule-room-info",
+            onClick: showDetail
           }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(moreControlList.value, (controlItem) => {
-              return openBlock(), createElementBlock(Fragment, {
-                key: controlItem.key
-              }, [
-                controlItem.visible ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: normalizeClass(["operate-item", { "cancel-text": controlItem.key === "cancelRoom" }]),
-                  onClick: ($event) => controlItem.func()
-                }, [
-                  createElementVNode("span", {
-                    class: "operate-text",
-                    onClick: controlItem.func
-                  }, toDisplayString(controlItem.title), 9, _hoisted_11)
-                ], 10, _hoisted_10)) : createCommentVNode("", true)
-              ], 64);
-            }), 128))
-          ], 2), [
-            [vShow, showMoreControl.value]
+            createElementVNode("div", {
+              class: "schedule-title",
+              title: _ctx.item.basicRoomInfo.roomName
+            }, [
+              createElementVNode("span", _hoisted_3, toDisplayString(_ctx.item.basicRoomInfo.roomName), 1),
+              unref(isMobile) ? (openBlock(), createBlock(SvgIcon, {
+                key: 0,
+                class: "schedule-title-icon",
+                icon: ChevronRight
+              })) : createCommentVNode("", true)
+            ], 8, _hoisted_2),
+            createElementVNode("div", _hoisted_4, [
+              createElementVNode("span", _hoisted_5, [
+                createElementVNode("span", null, toDisplayString(props.scheduleStartTime), 1),
+                _hoisted_6,
+                createElementVNode("span", null, toDisplayString(props.scheduleEndTime), 1)
+              ]),
+              _hoisted_7,
+              createElementVNode("span", _hoisted_8, toDisplayString(_ctx.item.basicRoomInfo.roomId), 1),
+              _ctx.item.status === unref(TUIConferenceStatus).kConferenceStatusRunning ? (openBlock(), createElementBlock("i", _hoisted_9)) : createCommentVNode("", true),
+              createElementVNode("span", {
+                class: normalizeClass(["schedule-content-status", getStatusTextAndClass(_ctx.item.status).className])
+              }, toDisplayString(unref(t)(getStatusTextAndClass(_ctx.item.status).text)), 3)
+            ])
           ]),
-          createVNode(SvgIcon, {
-            class: "link",
-            icon: LinkIcon,
-            onClick: toggleInviteRoom
-          }),
-          createVNode(TuiButton, {
-            size: "default",
-            onClick: joinConference
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("join")), 1)
-            ]),
-            _: 1
-          })
-        ], 512),
-        createVNode(ScheduleConferencePanel, {
-          visible: modifyDialogVisible.value,
-          "conference-info": props.item,
-          onInput: _cache[0] || (_cache[0] = ($event) => modifyDialogVisible.value = $event)
-        }, null, 8, ["visible", "conference-info"]),
-        createVNode(Dialog, {
-          modelValue: showRoomDetail.value,
-          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showRoomDetail.value = $event),
-          title: unref(t)("Room Details"),
-          modal: true,
-          "show-close": true,
-          "close-on-click-modal": true,
-          width: "540px",
-          "append-to-body": true
-        }, {
-          footer: withCtx(() => [
-            _ctx.item.status === unref(TUIConferenceStatus).kConferenceStatusNone ? (openBlock(), createBlock(TuiButton, {
+          createElementVNode("div", {
+            ref_key: "moreBtnRef",
+            ref: moreBtnRef,
+            class: "schedule-room-operate"
+          }, [
+            !unref(isMobile) ? (openBlock(), createBlock(SvgIcon, {
               key: 0,
-              class: "dialog-button",
+              class: "ellipsis",
+              icon: EllipsisIcon,
+              onClick: toggleClickMoreBtn
+            })) : createCommentVNode("", true),
+            withDirectives(createElementVNode("div", {
+              ref_key: "operateListRef",
+              ref: operateListRef,
+              class: normalizeClass([
+                "operate-list",
+                dropdownClass.value,
+                !showMoreControl.value ? "hidden" : ""
+              ])
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(moreControlList.value, (controlItem) => {
+                return openBlock(), createElementBlock(Fragment, null, [
+                  controlItem.visible ? (openBlock(), createElementBlock("div", {
+                    key: controlItem.key,
+                    class: normalizeClass(["operate-item", { "cancel-text": controlItem.key === "cancelRoom" }]),
+                    onClick: ($event) => controlItem.func()
+                  }, [
+                    createElementVNode("span", {
+                      class: "operate-text",
+                      onClick: controlItem.func
+                    }, toDisplayString(controlItem.title), 9, _hoisted_11)
+                  ], 10, _hoisted_10)) : createCommentVNode("", true)
+                ], 64);
+              }), 256))
+            ], 2), [
+              [vShow, showMoreControl.value]
+            ]),
+            !unref(isMobile) ? (openBlock(), createBlock(SvgIcon, {
+              key: 1,
+              class: "link",
+              icon: LinkIcon,
+              onClick: toggleInviteRoom
+            })) : createCommentVNode("", true),
+            createVNode(TuiButton, {
               size: "default",
-              disabled: ""
+              onClick: joinConference
             }, {
               default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(t)("The room is closed")), 1)
+                createTextVNode(toDisplayString(unref(t)("Join")), 1)
               ]),
               _: 1
-            })) : (openBlock(), createElementBlock("span", _hoisted_16, [
-              createVNode(TuiButton, {
-                class: "dialog-button",
-                size: "default",
-                onClick: joinConference
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(t)("Enter Now")), 1)
+            })
+          ], 512)
+        ])), [
+          [unref(vClickOutside), handleCloseOperate]
+        ]),
+        createVNode(PanelContainer, {
+          visible: showRoomDetail.value,
+          onInput: _cache[0] || (_cache[0] = ($event) => showRoomDetail.value = $event),
+          title: unref(t)("Room Details"),
+          editButtonText: modifyRoom.value.visible && unref(t)("Modify"),
+          width: "540px",
+          onEdit: modifyRoom.value.func
+        }, createSlots({
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_12, [
+              createVNode(ConferenceDetail, {
+                conferenceInfo: props.item,
+                scheduleRoomDetailList: scheduleRoomDetailList.value
+              }, null, 8, ["conferenceInfo", "scheduleRoomDetailList"])
+            ]),
+            unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_13, [
+              createElementVNode("div", _hoisted_14, [
+                createVNode(TuiButton, {
+                  type: "primary",
+                  round: false,
+                  plain: "",
+                  class: "footer-button",
+                  "custom-style": { width: "100%", padding: "10px", fontSize: "16px" },
+                  onClick: withModifiers(joinConference, ["stop"])
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("Join Room")), 1)
+                  ]),
+                  _: 1
+                }),
+                createVNode(TuiButton, {
+                  type: "primary",
+                  round: false,
+                  plain: "",
+                  class: "footer-button",
+                  "custom-style": { width: "100%", padding: "10px", fontSize: "16px" },
+                  onClick: withModifiers(toggleInvitePanelShow, ["stop"])
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("Invited members")), 1)
+                  ]),
+                  _: 1
+                }),
+                cancelRoom.value.visible ? (openBlock(), createBlock(TuiButton, {
+                  key: 0,
+                  type: "danger",
+                  round: false,
+                  plain: "",
+                  class: "footer-button",
+                  "custom-style": { width: "100%", padding: "10px", fontSize: "16px" },
+                  onClick: withModifiers(cancelRoom.value.func, ["stop"])
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("cancel room")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])) : createCommentVNode("", true)
+              ]),
+              invitePanelShow.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "mask",
+                onClick: withModifiers(toggleInvitePanelShow, ["stop"])
+              })) : createCommentVNode("", true),
+              invitePanelShow.value ? (openBlock(), createElementBlock("div", _hoisted_15, [
+                createElementVNode("div", {
+                  class: "invite-member-close",
+                  onClick: toggleInvitePanelShow
+                }, [
+                  createVNode(SvgIcon, { icon: ArrowDown })
                 ]),
-                _: 1
-              }),
-              createVNode(TuiButton, {
-                type: "primary",
+                createElementVNode("div", _hoisted_16, toDisplayString(unref(t)("Inviting members to join")), 1),
+                createVNode(InvitePanel, { scheduleInviteList: scheduleInviteList.value }, null, 8, ["scheduleInviteList"])
+              ])) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true)
+          ]),
+          _: 2
+        }, [
+          !unref(isMobile) ? {
+            name: "footer",
+            fn: withCtx(() => [
+              _ctx.item.status === unref(TUIConferenceStatus).kConferenceStatusNone ? (openBlock(), createBlock(TuiButton, {
+                key: 0,
+                class: "dialog-button",
                 size: "default",
-                class: "button",
-                onClick: toggleInviteRoom
+                disabled: ""
               }, {
                 default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(t)("Invited members")), 1)
+                  createTextVNode(toDisplayString(unref(t)("The room is closed")), 1)
                 ]),
                 _: 1
-              })
-            ]))
-          ]),
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_12, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(scheduleRoomDetailList.value, (item, index) => {
-                return withDirectives((openBlock(), createElementBlock("div", {
-                  key: index,
-                  class: "roomInfo-content"
-                }, [
-                  createElementVNode("span", _hoisted_13, toDisplayString(unref(t)(item.title)), 1),
-                  createElementVNode("span", {
-                    class: "roomInfo-item",
-                    title: item.content
-                  }, toDisplayString(item.content), 9, _hoisted_14),
-                  item.isShowCopyIcon ? (openBlock(), createElementBlock("span", {
-                    key: 0,
-                    class: "copy-container",
-                    onClick: ($event) => unref(onCopy)(item.content)
-                  }, [
-                    createVNode(SvgIcon, {
-                      class: "copy",
-                      icon: copyIcon
-                    })
-                  ], 8, _hoisted_15)) : createCommentVNode("", true),
-                  item.isShowStatus ? (openBlock(), createElementBlock("div", {
-                    key: 1,
-                    class: normalizeClass(["roomInfo-status", getStatusTextAndClass(item.status).className])
-                  }, toDisplayString(unref(t)(getStatusTextAndClass(item.status).text)), 3)) : createCommentVNode("", true)
-                ])), [
-                  [vShow, item.isVisible]
-                ]);
-              }), 128))
-            ])
-          ]),
-          _: 1
-        }, 8, ["modelValue", "title"]),
+              })) : (openBlock(), createElementBlock("span", _hoisted_17, [
+                createVNode(TuiButton, {
+                  class: "dialog-button",
+                  size: "default",
+                  onClick: joinConference
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("Enter Now")), 1)
+                  ]),
+                  _: 1
+                }),
+                createVNode(TuiButton, {
+                  type: "primary",
+                  size: "default",
+                  class: "button",
+                  onClick: toggleInviteRoom
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("Invited members")), 1)
+                  ]),
+                  _: 1
+                })
+              ]))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["visible", "title", "editButtonText", "onEdit"]),
+        createVNode(ScheduleConferencePanel, {
+          visible: modifyDialogVisible.value,
+          "conference-info": props.item,
+          onInput: _cache[1] || (_cache[1] = ($event) => modifyDialogVisible.value = $event)
+        }, null, 8, ["visible", "conference-info"]),
         createVNode(Dialog, {
           modelValue: showRoomCancel.value,
           "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showRoomCancel.value = $event),
@@ -372,7 +595,11 @@ ${t("Room Link")}: ${getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`;
           "close-on-click-modal": true,
           width: "480px",
           "append-to-body": true,
-          "title-icon": WarningIcon
+          "title-icon": WarningIcon,
+          cancelButton: unref(t)("No cancellation"),
+          confirmButton: unref(t)("cancel room"),
+          onConfirm: handleCancelSchedule,
+          onCancel: _cache[4] || (_cache[4] = ($event) => showRoomCancel.value = false)
         }, {
           footer: withCtx(() => [
             createElementVNode("span", null, [
@@ -403,11 +630,13 @@ ${t("Room Link")}: ${getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`;
             createElementVNode("span", null, toDisplayString(unref(t)("Other members will not be able to join after cancellation")), 1)
           ]),
           _: 1
-        }, 8, ["modelValue", "title"]),
+        }, 8, ["modelValue", "title", "cancelButton", "confirmButton"]),
         createVNode(Dialog, {
           modelValue: showRoomInvite.value,
-          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => showRoomInvite.value = $event),
-          title: unref(t)("sb invites you to join the conference", { name: unref(userName) || unref(userId) }),
+          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => showRoomInvite.value = $event),
+          title: unref(t)("sb invites you to join the conference", {
+            name: unref(userName) || unref(userId)
+          }),
           modal: true,
           "show-close": true,
           "close-on-click-modal": true,
@@ -420,7 +649,7 @@ ${t("Room Link")}: ${getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`;
               createVNode(TuiButton, {
                 class: "dialog-button",
                 size: "default",
-                onClick: _cache[4] || (_cache[4] = ($event) => copyRoomIdAndRoomLink())
+                onClick: _cache[5] || (_cache[5] = ($event) => copyRoomIdAndRoomLink())
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref(t)("Copy the conference number and link")), 1)
@@ -430,31 +659,10 @@ ${t("Room Link")}: ${getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`;
             ])
           ]),
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_17, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(scheduleInviteList.value, (item, index) => {
-                return openBlock(), createElementBlock("div", {
-                  key: index,
-                  class: "invite-member-container"
-                }, [
-                  createElementVNode("span", _hoisted_18, toDisplayString(unref(t)(item.title)), 1),
-                  createElementVNode("span", {
-                    class: "invite-member-content",
-                    title: item.content
-                  }, toDisplayString(item.content), 9, _hoisted_19),
-                  item.isShowCopyIcon ? (openBlock(), createBlock(SvgIcon, {
-                    key: 0,
-                    class: "copy",
-                    icon: copyIcon,
-                    onClick: ($event) => unref(onCopy)(item.content)
-                  }, null, 8, ["onClick"])) : createCommentVNode("", true)
-                ]);
-              }), 128))
-            ])
+            createVNode(InvitePanel, { scheduleInviteList: scheduleInviteList.value }, null, 8, ["scheduleInviteList"])
           ]),
           _: 1
         }, 8, ["modelValue", "title"])
-      ])), [
-        [unref(vClickOutside), handleCloseOperate]
       ]);
     };
   }