@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.2

package/lib/components/ScheduleConference/ScheduleRoomControl.vue2.js

@@ -4,46 +4,57 @@ const Vue = require("vue");
 const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
 require("../../services/main.js");
 const roomService = require("../../services/roomService.js");
+const index$1 = require("../../utils/common/logger/index.js");
 const index = require("../../locales/index.js");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
+require("@tencentcloud/tui-core");
+const environment = require("../../utils/environment.js");
 const useRoomInfoHooks = require("../RoomHeader/RoomInfo/useRoomInfoHooks.js");
 const SvgIcon = require("../common/base/SvgIcon.vue.js");
-const index$1 = require("../common/base/Dialog/index.vue.js");
+const index$3 = require("../common/base/Dialog/index.vue.js");
 const EllipsisIcon = require("../common/icons/EllipsisIcon.vue.js");
-const CopyIcon = require("../common/icons/CopyIcon.vue.js");
+const ChevronRight = require("../common/icons/ChevronRight.vue.js");
+const ArrowDown = require("../common/icons/ArrowDown.vue.js");
 const LinkIcon = require("../common/icons/LinkIcon.vue.js");
 const SuccessIcon = require("../common/icons/SuccessIcon.vue.js");
 const WarningIcon = require("../common/icons/WarningIcon.vue.js");
 const Button = require("../common/base/Button.vue.js");
 const vClickOutside = require("../../directives/vClickOutside.js");
-const ScheduleConferencePanel = require("./ScheduleConferencePanel.vue.js");
+const index$2 = require("./ScheduleConferencePanel/index.vue.js");
 const utils = require("../../utils/utils.js");
 const basic = require("../../stores/basic.js");
 const pinia = require("pinia");
-const _withScopeId = (n) => (Vue.pushScopeId("data-v-8b752e7f"), n = n(), Vue.popScopeId(), n);
+const ConferenceDetail = require("./ConferenceDetail.vue.js");
+const InvitePanel = require("./InvitePanel.vue.js");
+const PanelContainer = require("./PanelContainer.vue.js");
+const _withScopeId = (n) => (Vue.pushScopeId("data-v-e29cbb1f"), n = n(), Vue.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__ */ Vue.createElementVNode("i", { class: "segregation-level" }, null, -1));
 const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.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__ */ Vue.defineComponent({
   __name: "ScheduleRoomControl",
   props: {
@@ -56,7 +67,8 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   emits: ["join-conference", "show-more"],
   setup(__props, { emit: __emit }) {
     const basicStore = basic.useBasicStore();
-    const { userId, userName } = pinia.storeToRefs(basicStore);
+    const { userId, userName, isRoomLinkVisible } = pinia.storeToRefs(basicStore);
+    const roomLinkConfig = roomService.roomService.getComponentConfig("RoomLink");
     const { t } = index.useI18n();
     const showMoreControl = Vue.ref(false);
     const dropdownClass = Vue.ref("down");
@@ -67,6 +79,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const showRoomDetail = Vue.ref(false);
     const showRoomCancel = Vue.ref(false);
     const showRoomInvite = Vue.ref(false);
+    const roomInfo = Vue.ref();
     const props = __props;
     const { onCopy } = useRoomInfoHooks.default();
     const statusMap = {
@@ -76,7 +89,13 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       }
     };
     const getStatusTextAndClass = (status) => statusMap[status] || { text: "", className: "" };
-    const isOwner = Vue.computed(() => props.item.basicRoomInfo.ownerId === roomService.roomService.basicStore.userId && props.item.status === TUIRoomEngine.TUIConferenceStatus.kConferenceStatusNotStarted);
+    const isOwner = Vue.computed(
+      () => props.item.basicRoomInfo.ownerId === roomService.roomService.basicStore.userId && props.item.status === TUIRoomEngine.TUIConferenceStatus.kConferenceStatusNotStarted
+    );
+    const isShowPassword = Vue.computed(() => {
+      var _a;
+      return !!((_a = roomInfo.value) == null ? void 0 : _a.password);
+    });
     const viewDetails = Vue.computed(() => ({
       key: "roomDetails",
       title: t("view details"),
@@ -109,38 +128,157 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       modifyRoom.value,
       cancelRoom.value
     ]);
-    const scheduleAttendeesInfo = Vue.computed(() => props.item.scheduleAttendees ? props.item.scheduleAttendees.map((attendee) => attendee.userName || attendee.userId).join("; ") : "");
-    const durationTime = Vue.computed(() => props.item.scheduleEndTime - props.item.scheduleStartTime);
+    const scheduleAttendeesInfo = Vue.computed(
+      () => props.item.scheduleAttendees ? props.item.scheduleAttendees.map(
+        (attendee) => attendee.userName || attendee.userId
+      ).join("; ") : ""
+    );
+    const durationTime = Vue.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 = Vue.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 === TUIRoomEngine.TUIConferenceStatus.kConferenceStatusNone },
-      { title: "Duration of participation", content: getScheduleTime(durationTime.value), isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: props.item.status === TUIRoomEngine.TUIConferenceStatus.kConferenceStatusNone }
-    ]);
-    const scheduleInviteList = Vue.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: utils.getUrlWithRoomId(props.item.basicRoomInfo.roomId), isShowCopyIcon: true }
-    ]);
+    const scheduleRoomDetailList = Vue.computed(() => {
+      var _a;
+      const { hours, minutes } = utils.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: !environment.isMobile
+        },
+        {
+          title: "Starting time",
+          content: `${props.scheduleStartDate} ${props.scheduleStartTime}`,
+          isShowCopyIcon: false,
+          status: null,
+          isShowStatus: false,
+          isVisible: environment.isMobile
+        },
+        {
+          title: "Room duration",
+          content: hours ? `${hours}${t("hours")}${minutes ? ` ${minutes}${t("minutes")}` : ""}` : `${minutes}${t("minutes")}`,
+          isShowCopyIcon: false,
+          status: null,
+          isShowStatus: false,
+          isVisible: environment.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 === TUIRoomEngine.TUIConferenceStatus.kConferenceStatusNone
+        },
+        {
+          title: "Duration of participation",
+          content: getScheduleTime(durationTime.value),
+          isShowCopyIcon: false,
+          status: null,
+          isShowStatus: false,
+          isVisible: props.item.status === TUIRoomEngine.TUIConferenceStatus.kConferenceStatusNone
+        }
+      ];
+    });
+    const scheduleInviteList = Vue.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: !environment.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: utils.getUrlWithRoomId(props.item.basicRoomInfo.roomId),
+          isShowCopyIcon: environment.isMobile,
+          isVisible: isRoomLinkVisible.value && roomLinkConfig.visible
+        }
+      ];
+    });
     function getSeatModeDisplay(isSeatEnabled) {
       return isSeatEnabled ? "On-stage Speaking Room" : "Free Speech Room";
     }
@@ -156,7 +294,8 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     }
     async function handleDropDownPosition() {
       var _a, _b, _c;
-      const { top, bottom } = (_a = moreBtnRef.value) == null ? void 0 : _a.getBoundingClientRect();
+      await Vue.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;
@@ -179,6 +318,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         dropdownClass.value = "up";
       }
     }
+    const invitePanelShow = Vue.ref(false);
     const joinConference = () => {
       var _a;
       emit("join-conference", {
@@ -189,6 +329,14 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         }
       });
     };
+    const toggleInvitePanelShow = () => {
+      invitePanelShow.value = !invitePanelShow.value;
+    };
+    const showDetail = () => {
+      if (!environment.isMobile) return;
+      emit("show-more", { roomId: props.item.basicRoomInfo.roomId });
+      viewDetails.value.func();
+    };
     function toggleInviteRoom() {
       if (showRoomDetail.value) {
         showRoomDetail.value = false;
@@ -196,176 +344,252 @@ const _sfc_main = /* @__PURE__ */ Vue.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")}: ${utils.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")}: ${utils.getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`
+        );
+      }
+      const invitation = invitationList.join("\n");
       onCopy(invitation);
     }
     async function handleCancelSchedule() {
-      await roomService.roomService.scheduleConferenceManager.cancelConference({ roomId: props.item.basicRoomInfo.roomId });
+      await roomService.roomService.scheduleConferenceManager.cancelConference({
+        roomId: props.item.basicRoomInfo.roomId
+      });
       showRoomCancel.value = false;
+      showRoomDetail.value = false;
     }
+    Vue.onMounted(async () => {
+      try {
+        const roomInfoParams = {
+          roomId: props.item.basicRoomInfo.roomId,
+          roomType: props.item.basicRoomInfo.roomType
+        };
+        roomInfo.value = await roomService.roomService.fetchRoomInfo(roomInfoParams);
+      } catch (error) {
+        index$1.default.error("fetch roomInfo failed:", error);
+      }
+    });
     return (_ctx, _cache) => {
-      return Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-        Vue.createElementVNode("div", _hoisted_2, [
+      return Vue.openBlock(), Vue.createElementBlock("div", null, [
+        Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
           Vue.createElementVNode("div", {
-            class: "schedule-title",
-            title: _ctx.item.basicRoomInfo.roomName
-          }, Vue.toDisplayString(_ctx.item.basicRoomInfo.roomName), 9, _hoisted_3),
-          Vue.createElementVNode("div", _hoisted_4, [
-            Vue.createElementVNode("span", _hoisted_5, [
-              Vue.createElementVNode("span", null, Vue.toDisplayString(props.scheduleStartTime), 1),
-              _hoisted_6,
-              Vue.createElementVNode("span", null, Vue.toDisplayString(props.scheduleEndTime), 1)
-            ]),
-            _hoisted_7,
-            Vue.createElementVNode("span", _hoisted_8, Vue.toDisplayString(_ctx.item.basicRoomInfo.roomId), 1),
-            _ctx.item.status !== Vue.unref(TUIRoomEngine.TUIConferenceStatus).kConferenceStatusNotStarted ? (Vue.openBlock(), Vue.createElementBlock("i", _hoisted_9)) : Vue.createCommentVNode("", true),
-            Vue.createElementVNode("span", {
-              class: Vue.normalizeClass(["schedule-content-status", getStatusTextAndClass(_ctx.item.status).className])
-            }, Vue.toDisplayString(Vue.unref(t)(getStatusTextAndClass(_ctx.item.status).text)), 3)
-          ])
-        ]),
-        Vue.createElementVNode("div", {
-          ref_key: "moreBtnRef",
-          ref: moreBtnRef,
-          class: "schedule-room-operate"
-        }, [
-          Vue.createVNode(SvgIcon.default, {
-            class: "ellipsis",
-            icon: EllipsisIcon.default,
-            onClick: toggleClickMoreBtn
-          }),
-          Vue.withDirectives(Vue.createElementVNode("div", {
-            ref_key: "operateListRef",
-            ref: operateListRef,
-            class: Vue.normalizeClass(["operate-list", dropdownClass.value])
+            class: "schedule-room-info",
+            onClick: showDetail
           }, [
-            (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(moreControlList.value, (controlItem) => {
-              return Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, {
-                key: controlItem.key
-              }, [
-                controlItem.visible ? (Vue.openBlock(), Vue.createElementBlock("div", {
-                  key: 0,
-                  class: Vue.normalizeClass(["operate-item", { "cancel-text": controlItem.key === "cancelRoom" }]),
-                  onClick: ($event) => controlItem.func()
-                }, [
-                  Vue.createElementVNode("span", {
-                    class: "operate-text",
-                    onClick: controlItem.func
-                  }, Vue.toDisplayString(controlItem.title), 9, _hoisted_11)
-                ], 10, _hoisted_10)) : Vue.createCommentVNode("", true)
-              ], 64);
-            }), 128))
-          ], 2), [
-            [Vue.vShow, showMoreControl.value]
+            Vue.createElementVNode("div", {
+              class: "schedule-title",
+              title: _ctx.item.basicRoomInfo.roomName
+            }, [
+              Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(_ctx.item.basicRoomInfo.roomName), 1),
+              Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createBlock(SvgIcon.default, {
+                key: 0,
+                class: "schedule-title-icon",
+                icon: ChevronRight.default
+              })) : Vue.createCommentVNode("", true)
+            ], 8, _hoisted_2),
+            Vue.createElementVNode("div", _hoisted_4, [
+              Vue.createElementVNode("span", _hoisted_5, [
+                Vue.createElementVNode("span", null, Vue.toDisplayString(props.scheduleStartTime), 1),
+                _hoisted_6,
+                Vue.createElementVNode("span", null, Vue.toDisplayString(props.scheduleEndTime), 1)
+              ]),
+              _hoisted_7,
+              Vue.createElementVNode("span", _hoisted_8, Vue.toDisplayString(_ctx.item.basicRoomInfo.roomId), 1),
+              _ctx.item.status === Vue.unref(TUIRoomEngine.TUIConferenceStatus).kConferenceStatusRunning ? (Vue.openBlock(), Vue.createElementBlock("i", _hoisted_9)) : Vue.createCommentVNode("", true),
+              Vue.createElementVNode("span", {
+                class: Vue.normalizeClass(["schedule-content-status", getStatusTextAndClass(_ctx.item.status).className])
+              }, Vue.toDisplayString(Vue.unref(t)(getStatusTextAndClass(_ctx.item.status).text)), 3)
+            ])
           ]),
-          Vue.createVNode(SvgIcon.default, {
-            class: "link",
-            icon: LinkIcon.default,
-            onClick: toggleInviteRoom
-          }),
-          Vue.createVNode(Button.default, {
-            size: "default",
-            onClick: joinConference
-          }, {
-            default: Vue.withCtx(() => [
-              Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("join")), 1)
-            ]),
-            _: 1
-          })
-        ], 512),
-        Vue.createVNode(ScheduleConferencePanel.default, {
-          visible: modifyDialogVisible.value,
-          "conference-info": props.item,
-          onInput: _cache[0] || (_cache[0] = ($event) => modifyDialogVisible.value = $event)
-        }, null, 8, ["visible", "conference-info"]),
-        Vue.createVNode(index$1.default, {
-          modelValue: showRoomDetail.value,
-          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showRoomDetail.value = $event),
-          title: Vue.unref(t)("Room Details"),
-          modal: true,
-          "show-close": true,
-          "close-on-click-modal": true,
-          width: "540px",
-          "append-to-body": true
-        }, {
-          footer: Vue.withCtx(() => [
-            _ctx.item.status === Vue.unref(TUIRoomEngine.TUIConferenceStatus).kConferenceStatusNone ? (Vue.openBlock(), Vue.createBlock(Button.default, {
+          Vue.createElementVNode("div", {
+            ref_key: "moreBtnRef",
+            ref: moreBtnRef,
+            class: "schedule-room-operate"
+          }, [
+            !Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createBlock(SvgIcon.default, {
               key: 0,
-              class: "dialog-button",
+              class: "ellipsis",
+              icon: EllipsisIcon.default,
+              onClick: toggleClickMoreBtn
+            })) : Vue.createCommentVNode("", true),
+            Vue.withDirectives(Vue.createElementVNode("div", {
+              ref_key: "operateListRef",
+              ref: operateListRef,
+              class: Vue.normalizeClass([
+                "operate-list",
+                dropdownClass.value,
+                !showMoreControl.value ? "hidden" : ""
+              ])
+            }, [
+              (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(moreControlList.value, (controlItem) => {
+                return Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, [
+                  controlItem.visible ? (Vue.openBlock(), Vue.createElementBlock("div", {
+                    key: controlItem.key,
+                    class: Vue.normalizeClass(["operate-item", { "cancel-text": controlItem.key === "cancelRoom" }]),
+                    onClick: ($event) => controlItem.func()
+                  }, [
+                    Vue.createElementVNode("span", {
+                      class: "operate-text",
+                      onClick: controlItem.func
+                    }, Vue.toDisplayString(controlItem.title), 9, _hoisted_11)
+                  ], 10, _hoisted_10)) : Vue.createCommentVNode("", true)
+                ], 64);
+              }), 256))
+            ], 2), [
+              [Vue.vShow, showMoreControl.value]
+            ]),
+            !Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createBlock(SvgIcon.default, {
+              key: 1,
+              class: "link",
+              icon: LinkIcon.default,
+              onClick: toggleInviteRoom
+            })) : Vue.createCommentVNode("", true),
+            Vue.createVNode(Button.default, {
               size: "default",
-              disabled: ""
+              onClick: joinConference
             }, {
               default: Vue.withCtx(() => [
-                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("The room is closed")), 1)
+                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Join")), 1)
               ]),
               _: 1
-            })) : (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_16, [
-              Vue.createVNode(Button.default, {
-                class: "dialog-button",
-                size: "default",
-                onClick: joinConference
-              }, {
-                default: Vue.withCtx(() => [
-                  Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Enter Now")), 1)
+            })
+          ], 512)
+        ])), [
+          [Vue.unref(vClickOutside.default), handleCloseOperate]
+        ]),
+        Vue.createVNode(PanelContainer.default, {
+          visible: showRoomDetail.value,
+          onInput: _cache[0] || (_cache[0] = ($event) => showRoomDetail.value = $event),
+          title: Vue.unref(t)("Room Details"),
+          editButtonText: modifyRoom.value.visible && Vue.unref(t)("Modify"),
+          width: "540px",
+          onEdit: modifyRoom.value.func
+        }, Vue.createSlots({
+          default: Vue.withCtx(() => [
+            Vue.createElementVNode("div", _hoisted_12, [
+              Vue.createVNode(ConferenceDetail.default, {
+                conferenceInfo: props.item,
+                scheduleRoomDetailList: scheduleRoomDetailList.value
+              }, null, 8, ["conferenceInfo", "scheduleRoomDetailList"])
+            ]),
+            Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_13, [
+              Vue.createElementVNode("div", _hoisted_14, [
+                Vue.createVNode(Button.default, {
+                  type: "primary",
+                  round: false,
+                  plain: "",
+                  class: "footer-button",
+                  "custom-style": { width: "100%", padding: "10px", fontSize: "16px" },
+                  onClick: Vue.withModifiers(joinConference, ["stop"])
+                }, {
+                  default: Vue.withCtx(() => [
+                    Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Join Room")), 1)
+                  ]),
+                  _: 1
+                }),
+                Vue.createVNode(Button.default, {
+                  type: "primary",
+                  round: false,
+                  plain: "",
+                  class: "footer-button",
+                  "custom-style": { width: "100%", padding: "10px", fontSize: "16px" },
+                  onClick: Vue.withModifiers(toggleInvitePanelShow, ["stop"])
+                }, {
+                  default: Vue.withCtx(() => [
+                    Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Invited members")), 1)
+                  ]),
+                  _: 1
+                }),
+                cancelRoom.value.visible ? (Vue.openBlock(), Vue.createBlock(Button.default, {
+                  key: 0,
+                  type: "danger",
+                  round: false,
+                  plain: "",
+                  class: "footer-button",
+                  "custom-style": { width: "100%", padding: "10px", fontSize: "16px" },
+                  onClick: Vue.withModifiers(cancelRoom.value.func, ["stop"])
+                }, {
+                  default: Vue.withCtx(() => [
+                    Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("cancel room")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])) : Vue.createCommentVNode("", true)
+              ]),
+              invitePanelShow.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
+                key: 0,
+                class: "mask",
+                onClick: Vue.withModifiers(toggleInvitePanelShow, ["stop"])
+              })) : Vue.createCommentVNode("", true),
+              invitePanelShow.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_15, [
+                Vue.createElementVNode("div", {
+                  class: "invite-member-close",
+                  onClick: toggleInvitePanelShow
+                }, [
+                  Vue.createVNode(SvgIcon.default, { icon: ArrowDown.default })
                 ]),
-                _: 1
-              }),
-              Vue.createVNode(Button.default, {
-                type: "primary",
+                Vue.createElementVNode("div", _hoisted_16, Vue.toDisplayString(Vue.unref(t)("Inviting members to join")), 1),
+                Vue.createVNode(InvitePanel.default, { scheduleInviteList: scheduleInviteList.value }, null, 8, ["scheduleInviteList"])
+              ])) : Vue.createCommentVNode("", true)
+            ])) : Vue.createCommentVNode("", true)
+          ]),
+          _: 2
+        }, [
+          !Vue.unref(environment.isMobile) ? {
+            name: "footer",
+            fn: Vue.withCtx(() => [
+              _ctx.item.status === Vue.unref(TUIRoomEngine.TUIConferenceStatus).kConferenceStatusNone ? (Vue.openBlock(), Vue.createBlock(Button.default, {
+                key: 0,
+                class: "dialog-button",
                 size: "default",
-                class: "button",
-                onClick: toggleInviteRoom
+                disabled: ""
               }, {
                 default: Vue.withCtx(() => [
-                  Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Invited members")), 1)
+                  Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("The room is closed")), 1)
                 ]),
                 _: 1
-              })
-            ]))
-          ]),
-          default: Vue.withCtx(() => [
-            Vue.createElementVNode("div", _hoisted_12, [
-              (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(scheduleRoomDetailList.value, (item, index2) => {
-                return Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
-                  key: index2,
-                  class: "roomInfo-content"
-                }, [
-                  Vue.createElementVNode("span", _hoisted_13, Vue.toDisplayString(Vue.unref(t)(item.title)), 1),
-                  Vue.createElementVNode("span", {
-                    class: "roomInfo-item",
-                    title: item.content
-                  }, Vue.toDisplayString(item.content), 9, _hoisted_14),
-                  item.isShowCopyIcon ? (Vue.openBlock(), Vue.createElementBlock("span", {
-                    key: 0,
-                    class: "copy-container",
-                    onClick: ($event) => Vue.unref(onCopy)(item.content)
-                  }, [
-                    Vue.createVNode(SvgIcon.default, {
-                      class: "copy",
-                      icon: CopyIcon.default
-                    })
-                  ], 8, _hoisted_15)) : Vue.createCommentVNode("", true),
-                  item.isShowStatus ? (Vue.openBlock(), Vue.createElementBlock("div", {
-                    key: 1,
-                    class: Vue.normalizeClass(["roomInfo-status", getStatusTextAndClass(item.status).className])
-                  }, Vue.toDisplayString(Vue.unref(t)(getStatusTextAndClass(item.status).text)), 3)) : Vue.createCommentVNode("", true)
-                ])), [
-                  [Vue.vShow, item.isVisible]
-                ]);
-              }), 128))
-            ])
-          ]),
-          _: 1
-        }, 8, ["modelValue", "title"]),
-        Vue.createVNode(index$1.default, {
+              })) : (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_17, [
+                Vue.createVNode(Button.default, {
+                  class: "dialog-button",
+                  size: "default",
+                  onClick: joinConference
+                }, {
+                  default: Vue.withCtx(() => [
+                    Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Enter Now")), 1)
+                  ]),
+                  _: 1
+                }),
+                Vue.createVNode(Button.default, {
+                  type: "primary",
+                  size: "default",
+                  class: "button",
+                  onClick: toggleInviteRoom
+                }, {
+                  default: Vue.withCtx(() => [
+                    Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Invited members")), 1)
+                  ]),
+                  _: 1
+                })
+              ]))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["visible", "title", "editButtonText", "onEdit"]),
+        Vue.createVNode(index$2.default, {
+          visible: modifyDialogVisible.value,
+          "conference-info": props.item,
+          onInput: _cache[1] || (_cache[1] = ($event) => modifyDialogVisible.value = $event)
+        }, null, 8, ["visible", "conference-info"]),
+        Vue.createVNode(index$3.default, {
           modelValue: showRoomCancel.value,
           "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showRoomCancel.value = $event),
           title: Vue.unref(t)("Cancellation of scheduled rooms"),
@@ -374,7 +598,11 @@ ${t("Room Link")}: ${utils.getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`;
           "close-on-click-modal": true,
           width: "480px",
           "append-to-body": true,
-          "title-icon": WarningIcon.default
+          "title-icon": WarningIcon.default,
+          cancelButton: Vue.unref(t)("No cancellation"),
+          confirmButton: Vue.unref(t)("cancel room"),
+          onConfirm: handleCancelSchedule,
+          onCancel: _cache[4] || (_cache[4] = ($event) => showRoomCancel.value = false)
         }, {
           footer: Vue.withCtx(() => [
             Vue.createElementVNode("span", null, [
@@ -405,11 +633,13 @@ ${t("Room Link")}: ${utils.getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`;
             Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Other members will not be able to join after cancellation")), 1)
           ]),
           _: 1
-        }, 8, ["modelValue", "title"]),
-        Vue.createVNode(index$1.default, {
+        }, 8, ["modelValue", "title", "cancelButton", "confirmButton"]),
+        Vue.createVNode(index$3.default, {
           modelValue: showRoomInvite.value,
-          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => showRoomInvite.value = $event),
-          title: Vue.unref(t)("sb invites you to join the conference", { name: Vue.unref(userName) || Vue.unref(userId) }),
+          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => showRoomInvite.value = $event),
+          title: Vue.unref(t)("sb invites you to join the conference", {
+            name: Vue.unref(userName) || Vue.unref(userId)
+          }),
           modal: true,
           "show-close": true,
           "close-on-click-modal": true,
@@ -422,7 +652,7 @@ ${t("Room Link")}: ${utils.getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`;
               Vue.createVNode(Button.default, {
                 class: "dialog-button",
                 size: "default",
-                onClick: _cache[4] || (_cache[4] = ($event) => copyRoomIdAndRoomLink())
+                onClick: _cache[5] || (_cache[5] = ($event) => copyRoomIdAndRoomLink())
               }, {
                 default: Vue.withCtx(() => [
                   Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Copy the conference number and link")), 1)
@@ -432,31 +662,10 @@ ${t("Room Link")}: ${utils.getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`;
             ])
           ]),
           default: Vue.withCtx(() => [
-            Vue.createElementVNode("div", _hoisted_17, [
-              (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(scheduleInviteList.value, (item, index2) => {
-                return Vue.openBlock(), Vue.createElementBlock("div", {
-                  key: index2,
-                  class: "invite-member-container"
-                }, [
-                  Vue.createElementVNode("span", _hoisted_18, Vue.toDisplayString(Vue.unref(t)(item.title)), 1),
-                  Vue.createElementVNode("span", {
-                    class: "invite-member-content",
-                    title: item.content
-                  }, Vue.toDisplayString(item.content), 9, _hoisted_19),
-                  item.isShowCopyIcon ? (Vue.openBlock(), Vue.createBlock(SvgIcon.default, {
-                    key: 0,
-                    class: "copy",
-                    icon: CopyIcon.default,
-                    onClick: ($event) => Vue.unref(onCopy)(item.content)
-                  }, null, 8, ["onClick"])) : Vue.createCommentVNode("", true)
-                ]);
-              }), 128))
-            ])
+            Vue.createVNode(InvitePanel.default, { scheduleInviteList: scheduleInviteList.value }, null, 8, ["scheduleInviteList"])
           ]),
           _: 1
         }, 8, ["modelValue", "title"])
-      ])), [
-        [Vue.unref(vClickOutside.default), handleCloseOperate]
       ]);
     };
   }