jssz-meeting-component 1.2.1 → 1.2.3

package/dist/index.esm.js

@@ -20339,7 +20339,7 @@ const MEETING_BROADCAST_TOPIC = "/meeting";
 const MEETING_SERVER_TOPIC = "/meeting/server";
 const DEFAULT_MQTT_PATH = "/mqtt";
 const DEFAULT_REQUEST_TIMEOUT_MS = 15e3;
-const MQTT_CLIENT_INSTANCE_STORAGE_KEY = "JS_MQTT_CLIENT_INSTANCE_ID";
+const MQTT_CLIENT_INSTANCE_STORAGE_KEY$1 = "JS_MQTT_CLIENT_INSTANCE_ID";
 let runtimeContext = null;
 let offBroadcastMessage = null;
 let offResponseMessage = null;
@@ -20380,7 +20380,6 @@ function normalizeBrokerUrl(baseUrl) {
     throw new Error("MQTT 初始化失败：mqttUrl 为空");
   }
   const normalizedScheme = trimmed.startsWith("tcp://") ? `mqtt://${trimmed.slice("tcp://".length)}` : trimmed;
-  console.log("normalizedScheme:", normalizedScheme);
   const withoutTrailingSlash = normalizedScheme.replace(/\/+$/g, "");
   if (withoutTrailingSlash.endsWith(DEFAULT_MQTT_PATH)) {
     return withoutTrailingSlash;
@@ -20422,12 +20421,12 @@ function buildResponseTopic(currentDevice) {
 }
 function getBrowserMqttInstanceId() {
   try {
-    const cached = sessionStorage.getItem(MQTT_CLIENT_INSTANCE_STORAGE_KEY);
+    const cached = sessionStorage.getItem(MQTT_CLIENT_INSTANCE_STORAGE_KEY$1);
     if (cached) {
       return cached;
     }
     const nextId = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID().replace(/-/g, "").slice(0, 12) : Math.random().toString(36).slice(2, 14);
-    sessionStorage.setItem(MQTT_CLIENT_INSTANCE_STORAGE_KEY, nextId);
+    sessionStorage.setItem(MQTT_CLIENT_INSTANCE_STORAGE_KEY$1, nextId);
     return nextId;
   } catch {
     return Math.random().toString(36).slice(2, 14);
@@ -36514,6 +36513,12 @@ function getCurrentMeetingTabId() {
   }
   return tabId;
 }
+function setMeetingTabIdForWindow(targetWindow, tabId) {
+  targetWindow.sessionStorage.setItem(TAB_ID_KEY, tabId);
+}
+function createMeetingTabId() {
+  return createTabId();
+}
 function getActiveMeetingOwner() {
   try {
     const raw = localStorage.getItem(ACTIVE_MEETING_OWNER_KEY);
@@ -37735,7 +37740,6 @@ const srtc = new Tn({
 });
 srtc.onNotifyChannelEvent = async (evt) => {
   var _a25, _b25, _c2, _d, _e, _f2, _g2, _h, _i2, _j, _k, _l2, _m;
-  console.log(evt);
   switch (evt.type) {
     case on.CONNECTION_QUALITY_CHANGED:
       handleConnectionQualityChanged(evt.data);
@@ -37895,8 +37899,45 @@ async function joinRoom() {
   const meetingInfo = JSON.parse(
     sessionStorage.getItem("JS_MEETING_INFO") || "{}"
   );
-  await srtc.join(meetingInfo.meetingToken);
-  await afterJoin();
+  try {
+    await srtc.join(meetingInfo.meetingToken);
+    await afterJoin();
+  } catch (error) {
+    await handleJoinRoomFailure(meetingInfo, error);
+    throw error;
+  }
+}
+async function handleJoinRoomFailure(meetingInfo, error) {
+  console.error("加入 SRTC 频道失败", error);
+  stopNetworkQualityMonitor();
+  await cleanupSessionMediaState();
+  if (meetingInfo == null ? void 0 : meetingInfo.meetingId) {
+    try {
+      await getMeetingLeave({
+        meetingId: meetingInfo.meetingId,
+        memberId: getUserId()
+      });
+    } catch (leaveError) {
+      console.error("SDK 入频道失败后的离会补偿失败", leaveError);
+    }
+  }
+  meetingStore$1.clearMembers();
+  try {
+    sessionStorage.removeItem(SELF_MEDIA_PREFS_KEY);
+  } catch (_2) {
+  }
+  clearActiveMeetingOwnership(
+    meetingInfo == null ? void 0 : meetingInfo.meetingId,
+    getCurrentMeetingTabId()
+  );
+  sessionStorage.removeItem("JS_MEETING_INFO");
+  sessionStorage.removeItem("joinTime");
+  joinTime.value = 0;
+  setCallStatus("end");
+  closeMeeting();
+  closeCall();
+  logoutRoomAction();
+  showNotification("加入音视频频道失败，已自动退出，请稍后重试", "error", 6e3);
 }
 async function afterJoin() {
   const _joinTime = sessionStorage.getItem("joinTime");
@@ -37919,7 +37960,6 @@ async function afterJoin() {
       item.videoLoadFailed = false;
     });
     for (const userinfo of Object.values(srtc.getUsersInfo(true))) {
-      console.log("userinfo", userinfo);
       await ensurePreferredRemoteVideo(userinfo);
     }
     scheduleMountTracks(0);
@@ -38761,8 +38801,13 @@ function handleMeetingEvent(event, data) {
       emitter.emit("injuryReport", data);
       break;
     case "2020":
+      console.log("2020", data);
       emitter.emit("onlineMember", data);
       break;
+    case "2099":
+      console.log("2099", data);
+      emitter.emit("meetingEnd", data);
+      break;
   }
 }
 function installMeetingMessageHandlers() {
@@ -40891,1484 +40936,1898 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 const DeviceSelector = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-ced67da8"]]);
-const _hoisted_1$o = {
-  key: 0,
-  class: "sos-flash-overlay"
-};
-const _hoisted_2$m = { class: "js-call-dialog-container" };
-const _hoisted_3$l = { class: "status-bar" };
-const _hoisted_4$j = { class: "status-left" };
-const _hoisted_5$g = {
-  key: 0,
-  class: "caller-info",
-  title: "来电人"
-};
-const _hoisted_6$f = {
-  class: "avatar",
-  style: { "width": "35px", "height": "35px", "font-size": "16px" }
+const _hoisted_1$o = ["title"];
+const _hoisted_2$m = {
+  class: "signal-bars",
+  "aria-hidden": "true"
 };
-const _hoisted_7$e = { class: "caller-text" };
-const _hoisted_8$d = { class: "caller-name" };
-const _hoisted_9$b = {
+const _hoisted_3$l = {
   key: 0,
-  class: "caller-number"
+  class: "signal-text"
 };
-const _hoisted_10$b = { class: "status-right" };
-const _hoisted_11$a = ["onClick"];
-const _hoisted_12$a = { class: "video-wrapper" };
-const _hoisted_13$8 = ["id"];
-const _hoisted_14$7 = { class: "avatar-container" };
-const _hoisted_15$6 = { class: "avatar" };
-const _hoisted_16$6 = { class: "video-loading-overlay" };
-const _hoisted_17$5 = { class: "video-loading-text" };
-const _hoisted_18$5 = { class: "video-loading-overlay failed" };
-const _hoisted_19$5 = ["disabled", "onClick"];
-const _hoisted_20$5 = { class: "video-meta" };
-const _hoisted_21$3 = { class: "member-name" };
-const _hoisted_22$3 = {
+const _hoisted_4$j = { class: "network-quality-popup-shell" };
+const _hoisted_5$g = { class: "popup-header" };
+const _hoisted_6$f = { class: "popup-header-actions" };
+const _hoisted_7$e = { class: "popup-summary" };
+const _hoisted_8$d = {
   key: 0,
-  class: "role-tag"
-};
-const _hoisted_23$3 = {
-  key: 1,
-  class: "video-empty"
+  class: "popup-reasons"
 };
-const _hoisted_24$3 = { class: "control-bar" };
+const _hoisted_9$b = { class: "popup-section" };
+const _hoisted_10$b = { class: "popup-grid" };
+const _hoisted_11$a = { class: "popup-item-label" };
+const _hoisted_12$a = { class: "popup-item-value" };
+const _hoisted_13$8 = { class: "popup-section" };
+const _hoisted_14$7 = { class: "popup-grid" };
+const _hoisted_15$6 = { class: "popup-item-label" };
+const _hoisted_16$6 = { class: "popup-item-value" };
+const _hoisted_17$5 = { class: "popup-header" };
+const _hoisted_18$5 = { class: "popup-header-actions" };
+const _hoisted_19$5 = { class: "popup-section-container" };
+const _hoisted_20$5 = ["onClick"];
+const _hoisted_21$3 = { class: "detail-section-main" };
+const _hoisted_22$3 = { class: "popup-section-title" };
+const _hoisted_23$3 = { class: "popup-section-count" };
+const _hoisted_24$3 = { class: "detail-section-icon" };
 const _hoisted_25$3 = {
   key: 0,
-  class: "call-duration"
+  class: "metric-card-list"
 };
-const _hoisted_26$3 = { id: "duration" };
-const _hoisted_27$3 = { class: "control-buttons" };
-const _hoisted_28$3 = {
+const _hoisted_26$3 = { class: "metric-card-header" };
+const _hoisted_27$3 = { class: "metric-card-title" };
+const _hoisted_28$3 = { class: "metric-card-subtitle" };
+const _hoisted_29$2 = { class: "metric-card-grid" };
+const _hoisted_30$2 = { class: "popup-item-label" };
+const _hoisted_31$1 = { class: "popup-item-value" };
+const _hoisted_32$1 = {
   key: 1,
-  class: "recording-button"
+  class: "popup-empty"
 };
-const DEFAULT_SUB_VIDEO_HEIGHT = 110;
-const DEFAULT_SUB_VIDEO_WIDTH = 190;
-const SUB_VIDEO_GAP = 12;
-const CONTROL_BAR_HEIGHT = 90;
-const STATUS_BAR_HEIGHT = 48;
 const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  __name: "call",
+  __name: "NetworkQualitySignal",
   props: {
     theme: { default: "dark" },
-    draggable: { type: Boolean, default: false },
-    taskId: {}
+    size: { default: "default" },
+    showText: { type: Boolean, default: false }
   },
   setup(__props) {
-    const { meState: meState2 } = storeToRefs(useMeetingStore());
     const props = __props;
-    const visible = callVisible;
+    const triggerRef = ref(null);
+    const showPopup = ref(false);
+    const advancedOpen = ref(false);
+    const collapsedSections = ref({});
+    const advancedDetails = ref();
+    let detailTimer = null;
     const themeClass = computed(() => `theme-${props.theme}`);
-    const showDeviceSelector = ref(false);
-    const currentDeviceType = ref("microphone");
-    const micRef = ref(null);
-    const cameraRef = ref(null);
-    const joinTimeObj = ref("");
-    let timer = null;
-    watch(
-      () => joinTime.value,
-      () => {
-        if (timer) {
-          clearInterval(timer);
-          timer = null;
-        }
-        if (joinTime.value) {
-          timer = setInterval(() => {
-            const now = +/* @__PURE__ */ new Date();
-            joinTimeObj.value = formatDuringObject((now - joinTime.value) / 1e3);
-          }, 1e3);
+    function formatValue(value, suffix = "", digits = 0) {
+      if (typeof value !== "number" || Number.isNaN(value)) return "--";
+      return `${value.toFixed(digits)}${suffix}`;
+    }
+    function formatMetricNumber(value, suffix = "", digits = 0) {
+      if (typeof value !== "number" || Number.isNaN(value)) return "--";
+      return `${value.toFixed(digits)}${suffix}`;
+    }
+    function formatBytes(value) {
+      if (typeof value !== "number" || Number.isNaN(value)) return "--";
+      if (value >= 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(2)} MB`;
+      if (value >= 1024) return `${(value / 1024).toFixed(1)} KB`;
+      return `${value.toFixed(0)} B`;
+    }
+    function formatDimension(width, height) {
+      if (!width || !height) return "--";
+      return `${width} x ${height}`;
+    }
+    function formatLossRate(value) {
+      if (typeof value !== "number" || Number.isNaN(value)) return "--";
+      return `${value.toFixed(1)}%`;
+    }
+    function formatMos(value) {
+      if (typeof value !== "number" || value <= 0 || Number.isNaN(value)) return "--";
+      return value.toFixed(1);
+    }
+    function formatUpdatedAt(timestamp) {
+      if (!timestamp) return "--";
+      const date = new Date(timestamp);
+      const hh = String(date.getHours()).padStart(2, "0");
+      const mm = String(date.getMinutes()).padStart(2, "0");
+      const ss = String(date.getSeconds()).padStart(2, "0");
+      return `${hh}:${mm}:${ss}`;
+    }
+    function formatReason(value) {
+      return value || "--";
+    }
+    function getMemberNameById(memberId) {
+      var _a25;
+      if (!memberId) return "";
+      const matched = members.value.find(
+        (member) => {
+          var _a26;
+          return ((_a26 = member == null ? void 0 : member.member) == null ? void 0 : _a26.memberId) === String(memberId);
         }
-      },
-      {
-        immediate: true
-      }
-    );
-    const isCalling = computed(() => callStatus.value === "calling");
-    const isReceiving = computed(() => callStatus.value === "receiving");
-    const isConnected = computed(() => callStatus.value === "connected");
-    const isListening = computed(() => callStatus.value === "listening");
-    const isForcibleInsertion = computed(
-      () => callStatus.value === "forcible-insertion"
-    );
-    const visibleMembers = computed(() => {
-      return members.value.filter(
-        (item) => item.roleType !== "4" && item.joinStaus === "1" && (!isListening.value || item.member.memberId !== getUserId())
       );
-    });
-    const hasForceInsertMember = computed(
-      () => visibleMembers.value.some((item) => item.roleType === "1")
-    );
-    const layoutClass = computed(() => {
-      if (visibleMembers.value.length <= 1) return "layout-single";
-      if (hasForceInsertMember.value) return "layout-three";
-      return "layout-two";
-    });
-    const mainMemberId = ref("");
-    const pickDefaultMainMember = (list) => {
-      if (!list.length) {
-        return "";
+      return ((_a25 = matched == null ? void 0 : matched.member) == null ? void 0 : _a25.name) || "";
+    }
+    function startDetailRefresh() {
+      stopDetailRefresh();
+      refreshAdvancedDetails();
+      detailTimer = window.setInterval(() => {
+        refreshAdvancedDetails();
+      }, 2e3);
+    }
+    function stopDetailRefresh() {
+      if (detailTimer !== null) {
+        window.clearInterval(detailTimer);
+        detailTimer = null;
       }
-      const remoteMember = list.find(
-        (item) => item.member.memberId !== getUserId()
+    }
+    function refreshAdvancedDetails() {
+      advancedDetails.value = readNetworkQualityMetricDetails();
+    }
+    function isSectionCollapsed(key) {
+      return collapsedSections.value[key] ?? false;
+    }
+    function toggleSection(key) {
+      collapsedSections.value[key] = !isSectionCollapsed(key);
+    }
+    function expandAllSections() {
+      collapsedSections.value = Object.fromEntries(
+        detailSections.value.map((section) => [section.key, false])
       );
-      return (remoteMember || list[0]).member.memberId;
-    };
-    watch(
-      visibleMembers,
-      (list) => {
-        if (!list.length) {
-          mainMemberId.value = "";
-          return;
-        }
-        const exists = list.some(
-          (item) => item.member.memberId === mainMemberId.value
-        );
-        if (!exists) {
-          mainMemberId.value = pickDefaultMainMember(list);
+    }
+    function collapseAllSections() {
+      collapsedSections.value = Object.fromEntries(
+        detailSections.value.map((section) => [section.key, true])
+      );
+    }
+    function toggleAllSections() {
+      if (allSectionsExpanded.value) {
+        collapseAllSections();
+        return;
+      }
+      expandAllSections();
+    }
+    function syncSectionCollapse(preserveExisting = true) {
+      const nextState = {};
+      for (const section of detailSections.value) {
+        if (preserveExisting && section.key in collapsedSections.value) {
+          nextState[section.key] = collapsedSections.value[section.key];
+          continue;
         }
-      },
-      { immediate: true, deep: true }
-    );
-    const mainMember = computed(() => {
-      if (!visibleMembers.value.length) return null;
-      if (!mainMemberId.value) {
-        return visibleMembers.value[0];
+        nextState[section.key] = false;
       }
-      return visibleMembers.value.find(
-        (item) => item.member.memberId === mainMemberId.value
-      ) || visibleMembers.value[0];
+      collapsedSections.value = nextState;
+    }
+    const activeBars = computed(() => {
+      if (networkQualityState.isOffline || networkQualityState.isStale) {
+        return 0;
+      }
+      return getNetworkSignalBars(networkQualityState.level);
     });
-    const secondaryMembers = computed(() => {
-      if (!mainMember.value) return [];
-      return visibleMembers.value.filter(
-        (item) => {
-          var _a25;
-          return item.member.memberId !== ((_a25 = mainMember.value) == null ? void 0 : _a25.member.memberId);
-        }
-      );
+    const allSectionsExpanded = computed(() => {
+      if (!detailSections.value.length) return true;
+      return detailSections.value.every((section) => !isSectionCollapsed(section.key));
     });
-    const subVideoPositions = computed(() => {
-      const positions = {};
-      secondaryMembers.value.forEach((member, index) => {
-        positions[member.member.memberId] = {
-          position: "absolute",
-          width: `${DEFAULT_SUB_VIDEO_WIDTH}px`,
-          height: `${DEFAULT_SUB_VIDEO_HEIGHT}px`,
-          right: "16px",
-          top: `${STATUS_BAR_HEIGHT + 16 + index * (DEFAULT_SUB_VIDEO_HEIGHT + SUB_VIDEO_GAP)}px`
-        };
-      });
-      return positions;
+    const reasonText = computed(() => {
+      if (!networkQualityState.reasons.length) return "";
+      return `可能原因：${networkQualityState.reasons.join("、")}`;
     });
-    const getVideoItemStyle = (memberId) => {
-      var _a25;
-      if (memberId === ((_a25 = mainMember.value) == null ? void 0 : _a25.member.memberId)) {
-        return {
-          position: "absolute",
-          top: `${STATUS_BAR_HEIGHT}px`,
-          right: "0px",
-          left: "0px",
-          bottom: `${CONTROL_BAR_HEIGHT}px`
-        };
+    const qualityItems = computed(() => [
+      { label: "总体质量", value: networkQualityState.label },
+      { label: "上行质量", value: networkQualityState.uplink },
+      { label: "下行质量", value: networkQualityState.downlink },
+      { label: "MOS", value: formatMos(networkQualityState.mos) },
+      { label: "最近更新", value: formatUpdatedAt(networkQualityState.updatedAt) },
+      {
+        label: "数据状态",
+        value: networkQualityState.isStale ? "已过期" : "实时"
       }
-      return subVideoPositions.value[memberId] || {};
-    };
-    const handleSwitchMain = (memberId) => {
-      if (memberId === mainMemberId.value) return;
-      mainMemberId.value = memberId;
-    };
-    watch(
-      () => {
-        var _a25;
-        return ((_a25 = mainMember.value) == null ? void 0 : _a25.member.memberId) || "";
-      },
-      (memberId) => {
-        const focusUid = memberId && memberId !== getUserId() ? memberId : null;
-        void setPreferredRemoteVideoFocus(focusUid);
-      },
-      { immediate: true }
-    );
-    const handleRetryVideo = async (user) => {
-      var _a25;
-      const memberId = (_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId;
-      if (!memberId || memberId === getUserId() || (user == null ? void 0 : user.videoRetrying)) return;
-      await retryRemoteVideoSubscription(memberId);
-    };
-    const statusText = computed(() => {
-      switch (callStatus.value) {
-        case "calling":
-          return "正在呼叫";
-        case "receiving":
-          return "正在接收呼叫";
-        case "connected":
-          return "通话中";
-        case "listening":
-          return "正在监听";
-        case "end":
-          return "通话结束";
-        default:
-          return "通话中";
+    ]);
+    const overviewItems = computed(() => {
+      const stats = networkQualityState.stats;
+      return [
+        { label: "上行 RTT", value: formatValue(stats == null ? void 0 : stats.rtt_up, " ms") },
+        { label: "下行 RTT", value: formatValue(stats == null ? void 0 : stats.rtt_down, " ms") },
+        { label: "上行码率", value: formatValue(stats == null ? void 0 : stats.bitrate_up, " kb/s") },
+        { label: "下行码率", value: formatValue(stats == null ? void 0 : stats.bitrate_down, " kb/s") },
+        { label: "上行丢包率", value: formatLossRate(stats == null ? void 0 : stats.lossrate_up) },
+        { label: "下行丢包率", value: formatLossRate(stats == null ? void 0 : stats.lossrate_down) },
+        {
+          label: "可用上行带宽",
+          value: formatValue(stats == null ? void 0 : stats.available_outgoing_bitrate, " kb/s")
+        },
+        {
+          label: "可用下行带宽",
+          value: formatValue(stats == null ? void 0 : stats.available_incoming_bitrate, " kb/s")
+        }
+      ];
+    });
+    function createAudioSendCard(item, index) {
+      const stats = (item == null ? void 0 : item.stats) || {};
+      return {
+        title: `本地音频 ${index + 1}`,
+        subtitle: (item == null ? void 0 : item.desc) || (stats == null ? void 0 : stats.streamId) || "发送轨道",
+        items: [
+          { label: "实时码率", value: formatMetricNumber(item == null ? void 0 : item.bitrate, " kb/s") },
+          { label: "音频电平", value: formatMetricNumber(item == null ? void 0 : item.db, " dBFS", 1) },
+          { label: "已发包数", value: formatMetricNumber(stats == null ? void 0 : stats.packetsSent) },
+          { label: "已发字节", value: formatBytes(stats == null ? void 0 : stats.bytesSent) },
+          { label: "远端丢包", value: formatMetricNumber(stats == null ? void 0 : stats.packetsLost) },
+          { label: "往返时延", value: formatMetricNumber(stats == null ? void 0 : stats.roundTripTime, " ms") },
+          { label: "远端抖动", value: formatMetricNumber(stats == null ? void 0 : stats.jitter, " ms") },
+          { label: "采样时间", value: formatUpdatedAt(stats == null ? void 0 : stats.timestamp) }
+        ]
+      };
+    }
+    function createVideoSendCard(item, index) {
+      const stats = (item == null ? void 0 : item.stats) || {};
+      return {
+        title: `本地视频 ${index + 1}`,
+        subtitle: (item == null ? void 0 : item.desc) || (stats == null ? void 0 : stats.rid) || (stats == null ? void 0 : stats.streamId) || "发送轨道",
+        items: [
+          { label: "实时码率", value: formatMetricNumber(item == null ? void 0 : item.bitrate, " kb/s") },
+          { label: "分辨率", value: formatDimension((item == null ? void 0 : item.width) || (stats == null ? void 0 : stats.frameWidth), (item == null ? void 0 : item.height) || (stats == null ? void 0 : stats.frameHeight)) },
+          { label: "帧率", value: formatMetricNumber((item == null ? void 0 : item.fps) || (stats == null ? void 0 : stats.framesPerSecond), " fps") },
+          { label: "已发帧数", value: formatMetricNumber(stats == null ? void 0 : stats.framesSent) },
+          { label: "目标码率", value: formatMetricNumber(stats == null ? void 0 : stats.targetBitrate, " bps") },
+          { label: "FIR/PLI/NACK", value: `${formatMetricNumber(stats == null ? void 0 : stats.firCount)}/${formatMetricNumber(stats == null ? void 0 : stats.pliCount)}/${formatMetricNumber(stats == null ? void 0 : stats.nackCount)}` },
+          { label: "重传包数", value: formatMetricNumber(stats == null ? void 0 : stats.retransmittedPacketsSent) },
+          { label: "受限原因", value: formatReason(stats == null ? void 0 : stats.qualityLimitationReason) },
+          { label: "分辨率变化", value: formatMetricNumber(stats == null ? void 0 : stats.qualityLimitationResolutionChanges) },
+          { label: "往返时延", value: formatMetricNumber(stats == null ? void 0 : stats.roundTripTime, " ms") },
+          { label: "采样时间", value: formatUpdatedAt(stats == null ? void 0 : stats.timestamp) }
+        ]
+      };
+    }
+    function createAudioRecvCard(item, index) {
+      const stats = (item == null ? void 0 : item.stats) || {};
+      return {
+        title: `远端音频 ${index + 1}`,
+        subtitle: (item == null ? void 0 : item.uid) || (item == null ? void 0 : item.desc) || (stats == null ? void 0 : stats.streamId) || "接收轨道",
+        items: [
+          { label: "实时码率", value: formatMetricNumber(item == null ? void 0 : item.bitrate, " kb/s") },
+          { label: "音频电平", value: formatMetricNumber(item == null ? void 0 : item.db, " dBFS", 1) },
+          { label: "已收包数", value: formatMetricNumber(stats == null ? void 0 : stats.packetsReceived) },
+          { label: "已收字节", value: formatBytes(stats == null ? void 0 : stats.bytesReceived) },
+          { label: "丢包数", value: formatMetricNumber(stats == null ? void 0 : stats.packetsLost) },
+          { label: "网络抖动", value: formatMetricNumber(stats == null ? void 0 : stats.jitter, " ms") },
+          { label: "缓冲均值", value: formatMetricNumber(stats == null ? void 0 : stats.jitterBufferAvgDelay, " ms") },
+          { label: "隐藏事件", value: formatMetricNumber(stats == null ? void 0 : stats.concealmentEvents) },
+          { label: "静音隐藏", value: formatMetricNumber(stats == null ? void 0 : stats.silentConcealmentEvents) },
+          { label: "采样时间", value: formatUpdatedAt(stats == null ? void 0 : stats.timestamp) }
+        ]
+      };
+    }
+    function createVideoRecvCard(item, index) {
+      const stats = (item == null ? void 0 : item.stats) || {};
+      const memberName = getMemberNameById(item == null ? void 0 : item.uid);
+      return {
+        title: `远端视频 ${index + 1}`,
+        subtitle: memberName || (item == null ? void 0 : item.uid) || (item == null ? void 0 : item.desc) || (stats == null ? void 0 : stats.mimeType) || "接收轨道",
+        items: [
+          { label: "实时码率", value: formatMetricNumber(item == null ? void 0 : item.bitrate, " kb/s") },
+          { label: "分辨率", value: formatDimension((item == null ? void 0 : item.width) || (stats == null ? void 0 : stats.frameWidth), (item == null ? void 0 : item.height) || (stats == null ? void 0 : stats.frameHeight)) },
+          { label: "帧率", value: formatMetricNumber((item == null ? void 0 : item.fps) || (stats == null ? void 0 : stats.framesPerSecond), " fps") },
+          { label: "已收包数", value: formatMetricNumber(stats == null ? void 0 : stats.packetsReceived) },
+          { label: "已收字节", value: formatBytes(stats == null ? void 0 : stats.bytesReceived) },
+          { label: "丢包数", value: formatMetricNumber(stats == null ? void 0 : stats.packetsLost) },
+          { label: "接收/解码帧", value: `${formatMetricNumber(stats == null ? void 0 : stats.framesReceived)}/${formatMetricNumber(stats == null ? void 0 : stats.framesDecoded)}` },
+          { label: "丢帧数", value: formatMetricNumber(stats == null ? void 0 : stats.framesDropped) },
+          { label: "FIR/PLI/NACK", value: `${formatMetricNumber(stats == null ? void 0 : stats.firCount)}/${formatMetricNumber(stats == null ? void 0 : stats.pliCount)}/${formatMetricNumber(stats == null ? void 0 : stats.nackCount)}` },
+          { label: "缓冲均值", value: formatMetricNumber(stats == null ? void 0 : stats.jitterBufferAvgDelay, " ms") },
+          { label: "解码器", value: formatReason(stats == null ? void 0 : stats.decoderImplementation) },
+          { label: "MIME", value: formatReason(stats == null ? void 0 : stats.mimeType) },
+          { label: "采样时间", value: formatUpdatedAt(stats == null ? void 0 : stats.timestamp) }
+        ]
+      };
+    }
+    const detailSections = computed(() => {
+      const details = advancedDetails.value;
+      return [
+        {
+          key: "local-audio",
+          title: "本地音频发送",
+          cards: ((details == null ? void 0 : details.local_audios) || []).map(createAudioSendCard)
+        },
+        {
+          key: "local-video",
+          title: "本地视频发送",
+          cards: ((details == null ? void 0 : details.local_videos) || []).map(createVideoSendCard)
+        },
+        {
+          key: "remote-audio",
+          title: "远端音频接收",
+          cards: ((details == null ? void 0 : details.remote_audios) || []).map(createAudioRecvCard)
+        },
+        {
+          key: "remote-video",
+          title: "远端视频接收",
+          cards: ((details == null ? void 0 : details.remote_videos) || []).map(createVideoRecvCard)
+        }
+      ];
+    });
+    watch(showPopup, (visible) => {
+      if (visible) {
+        refreshNetworkQualitySnapshot(false);
+        if (advancedOpen.value) {
+          syncSectionCollapse();
+          startDetailRefresh();
+        }
+        return;
+      }
+      stopDetailRefresh();
+      advancedOpen.value = false;
+      collapsedSections.value = {};
+      advancedDetails.value = void 0;
+    });
+    watch(advancedOpen, (open2) => {
+      if (!showPopup.value) return;
+      if (open2) {
+        syncSectionCollapse(false);
+        startDetailRefresh();
+      } else {
+        stopDetailRefresh();
+        advancedDetails.value = void 0;
       }
     });
-    const callerInfo = ref({});
     watch(
-      () => callStatus.value,
+      detailSections,
       () => {
-        try {
-          const info = JSON.parse(
-            sessionStorage.getItem("JS_MEETING_INFO") || "{}"
-          );
-          callerInfo.value = info || {};
-        } catch {
-          callerInfo.value = {};
-        }
+        if (!advancedOpen.value) return;
+        syncSectionCollapse();
       },
-      { immediate: true }
+      { deep: true }
     );
-    const onChange = async (type) => {
-      switch (type) {
-        case RoomModalSelectType.microphoneClick:
-          if (micOperationBusy.value) return;
-          if (isAuthority.value) {
-            showNotification(alertMsg, "warning", 5e3);
-            return;
-          }
-          if (meState2.value.microPhoneState === "1") {
-            await closeMic();
-          } else {
-            await openMic();
-          }
-          break;
-        case RoomModalSelectType.cameraClick:
-          if (cameraOperationBusy.value) return;
-          if (isAuthority.value) {
-            alert(alertMsg);
-            return;
-          }
-          if (meState2.value.cameraState === "1") {
-            await closeCamera();
-          } else {
-            await openCamera();
-          }
-          break;
-        case RoomModalSelectType.acceptClick:
-          acceptCall();
-          break;
-        case RoomModalSelectType.endClick:
-          endCall();
-          break;
-      }
-    };
-    const acceptCall = () => {
-      const meetingInfo = JSON.parse(
-        sessionStorage.getItem("JS_MEETING_INFO") || "{}"
-      );
-      setCallStatus("connected");
-      stopSosFlash();
-      getAnswerCall({
-        meetingId: meetingInfo.meetingId,
-        memberId: getUserId(),
-        cameraStatus: "0",
-        audioStatus: "0"
-      }).then(() => {
-        return getJoinCall({
-          meetingId: meetingInfo.meetingId,
-          memberId: getUserId(),
-          cameraStatus: "0",
-          audioStatus: "0"
-        });
-      }).then((resp) => {
-        if (resp && resp.code === 200) {
-          sessionStorage.setItem("JS_MEETING_INFO", JSON.stringify(resp.data));
-          console.log("拨打电话", resp.data.meetingToken);
-          setTimeout(() => {
-            joinRoom();
-          }, 100);
-          stopRingtone();
-          recordMeeting("start");
-        }
-      }).catch((err) => {
-        console.error("接听失败", err);
-        setCallStatus("end");
-      });
-    };
-    const endCall = async () => {
-      visible.value = false;
-      stopSosFlash();
-      const meetingInfo = JSON.parse(
-        sessionStorage.getItem("JS_MEETING_INFO") || "{}"
-      );
-      setCallStatus("end");
-      try {
-        const res = await getHangUpCall({
-          meetingId: meetingInfo.meetingId,
-          memberId: getUserId()
-        });
-        if (res.code === 200) {
-          await logoutRoomAction();
-          clearTimer();
-          recordMeeting("stop");
-        }
-      } catch (err) {
-        console.error("挂断失败", err);
-        await logoutRoomAction();
-      }
-    };
-    const stopMonitoring = async () => {
-      visible.value = false;
-      const meetingInfo = JSON.parse(
-        sessionStorage.getItem("JS_MEETING_INFO") || "{}"
-      );
-      try {
-        const res = await getMeetingLeave({
-          meetingId: meetingInfo.meetingId,
-          memberId: getUserId()
-        });
-        if (res.code === 200) {
-          await logoutRoomAction();
-          clearTimer();
-        }
-      } catch (err) {
-        console.error("离开失败", err);
-        await logoutRoomAction();
-      }
-    };
-    const clearTimer = () => {
-      if (timer) {
-        clearInterval(timer);
-        timer = null;
-      }
-    };
-    const recordMeeting = (newState) => {
-      const meetingInfo = JSON.parse(
-        sessionStorage.getItem("JS_MEETING_INFO") || "{}"
-      );
-      let params = {
-        meetingId: meetingInfo.meetingId,
-        memberId: getUserId(),
-        cmd: newState
-      };
-      getMcuCtrl(params).then(() => {
-      }).catch(() => {
-      });
-    };
-    const toggleDeviceSelector = (deviceType) => {
-      currentDeviceType.value = deviceType;
-      showDeviceSelector.value = !showDeviceSelector.value;
-    };
-    watch(
-      () => visible.value,
-      (newValue) => {
-        if (newValue) {
-          showDeviceSelector.value = false;
-        }
-      }
-    );
-    onMounted(() => {
-    });
     onUnmounted(() => {
-      if (timer) {
-        clearInterval(timer);
-        timer = null;
-      }
+      stopDetailRefresh();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(Teleport, { to: "body" }, [
-        unref(sosFlashVisible) ? (openBlock(), createElementBlock("div", _hoisted_1$o)) : createCommentVNode("", true),
-        unref(visible) ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: normalizeClass(["js-dialog-overlay", themeClass.value])
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["network-quality-signal", [`size-${_ctx.size}`]])
+      }, [
+        createElementVNode("button", {
+          ref_key: "triggerRef",
+          ref: triggerRef,
+          type: "button",
+          class: normalizeClass(["network-quality-trigger", [
+            `is-${unref(networkQualityState).level}`,
+            {
+              "is-alert": unref(networkQualityState).isOffline || unref(networkQualityState).isStale
+            }
+          ]]),
+          title: unref(networkQualityState).summary,
+          onClick: _cache[0] || (_cache[0] = ($event) => showPopup.value = !showPopup.value)
         }, [
-          createElementVNode("div", _hoisted_2$m, [
-            createElementVNode("div", _hoisted_3$l, [
-              createElementVNode("div", _hoisted_4$j, [
-                isReceiving.value && callerInfo.value ? (openBlock(), createElementBlock("div", _hoisted_5$g, [
-                  createElementVNode("div", _hoisted_6$f, toDisplayString(unref(getUserAvatar)(callerInfo.value)), 1),
-                  createElementVNode("div", _hoisted_7$e, [
-                    createElementVNode("div", _hoisted_8$d, toDisplayString(callerInfo.value.memberName || "未知来电"), 1),
-                    callerInfo.value.shortNumber ? (openBlock(), createElementBlock("div", _hoisted_9$b, " 分机：" + toDisplayString(callerInfo.value.shortNumber), 1)) : createCommentVNode("", true)
+          createElementVNode("span", _hoisted_2$m, [
+            (openBlock(), createElementBlock(Fragment, null, renderList(4, (index) => {
+              return createElementVNode("span", {
+                key: index,
+                class: normalizeClass(["signal-bar", { active: index <= activeBars.value }])
+              }, null, 2);
+            }), 64))
+          ]),
+          _ctx.showText ? (openBlock(), createElementBlock("span", _hoisted_3$l, toDisplayString(unref(networkQualityState).label), 1)) : createCommentVNode("", true)
+        ], 10, _hoisted_1$o),
+        createVNode(SmartPopup, {
+          visible: showPopup.value,
+          "onUpdate:visible": _cache[3] || (_cache[3] = ($event) => showPopup.value = $event),
+          trigger: triggerRef.value,
+          gap: 12
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_4$j, [
+              createElementVNode("div", {
+                class: normalizeClass(["network-quality-popup network-quality-main", themeClass.value])
+              }, [
+                createElementVNode("div", _hoisted_5$g, [
+                  _cache[4] || (_cache[4] = createElementVNode("div", { class: "popup-title" }, "网络详情", -1)),
+                  createElementVNode("div", _hoisted_6$f, [
+                    createElementVNode("button", {
+                      type: "button",
+                      class: "advanced-toggle",
+                      onClick: _cache[1] || (_cache[1] = withModifiers(($event) => advancedOpen.value = !advancedOpen.value, ["stop"]))
+                    }, toDisplayString(advancedOpen.value ? "关闭高级模式" : "打开高级模式"), 1),
+                    createElementVNode("div", {
+                      class: normalizeClass(["popup-status", `is-${unref(networkQualityState).level}`])
+                    }, toDisplayString(unref(networkQualityState).label), 3)
                   ])
-                ])) : createCommentVNode("", true)
-              ]),
-              createElementVNode("div", _hoisted_10$b, [
-                createElementVNode("span", null, toDisplayString(statusText.value), 1)
-              ])
-            ]),
-            createElementVNode("div", {
-              class: normalizeClass(["video-container", layoutClass.value])
-            }, [
-              visibleMembers.value.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(visibleMembers.value, (user) => {
-                var _a25, _b25;
-                return openBlock(), createElementBlock("div", {
-                  key: user.member.memberId,
-                  class: normalizeClass(["video-item", {
-                    "is-main": ((_a25 = mainMember.value) == null ? void 0 : _a25.member.memberId) === user.member.memberId,
-                    "is-secondary": ((_b25 = mainMember.value) == null ? void 0 : _b25.member.memberId) !== user.member.memberId
-                  }]),
-                  style: normalizeStyle(getVideoItemStyle(user.member.memberId)),
-                  onClick: ($event) => handleSwitchMain(user.member.memberId)
-                }, [
-                  createElementVNode("div", _hoisted_12$a, [
-                    withDirectives(createElementVNode("div", {
-                      id: unref(getUserId)() === user.member.memberId ? "my-video" : `other-${user.member.memberId}`,
-                      class: "video-slot"
-                    }, null, 8, _hoisted_13$8), [
-                      [vShow, (user == null ? void 0 : user.cameraStatus) === "1"]
-                    ]),
-                    withDirectives(createElementVNode("div", _hoisted_14$7, [
-                      createElementVNode("div", _hoisted_15$6, toDisplayString(unref(getUserAvatar)(user)), 1)
-                    ], 512), [
-                      [vShow, (user == null ? void 0 : user.cameraStatus) !== "1"]
-                    ]),
-                    withDirectives(createElementVNode("div", _hoisted_16$6, [
-                      _cache[6] || (_cache[6] = createElementVNode("div", { class: "video-loading-spinner" }, null, -1)),
-                      createElementVNode("div", _hoisted_17$5, toDisplayString((user == null ? void 0 : user.videoRetrying) ? "重新加载中..." : "加载中..."), 1)
-                    ], 512), [
-                      [vShow, (user == null ? void 0 : user.loading) && (user == null ? void 0 : user.cameraStatus) === "1"]
-                    ]),
-                    withDirectives(createElementVNode("div", _hoisted_18$5, [
-                      _cache[7] || (_cache[7] = createElementVNode("div", { class: "video-loading-text" }, "视频加载失败", -1)),
+                ]),
+                createElementVNode("div", _hoisted_7$e, toDisplayString(unref(networkQualityState).summary), 1),
+                reasonText.value ? (openBlock(), createElementBlock("div", _hoisted_8$d, toDisplayString(reasonText.value), 1)) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_9$b, [
+                  _cache[5] || (_cache[5] = createElementVNode("div", { class: "popup-section-title" }, "质量概览", -1)),
+                  createElementVNode("div", _hoisted_10$b, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(qualityItems.value, (item) => {
+                      return openBlock(), createElementBlock("div", {
+                        key: item.label,
+                        class: "popup-item"
+                      }, [
+                        createElementVNode("div", _hoisted_11$a, toDisplayString(item.label), 1),
+                        createElementVNode("div", _hoisted_12$a, toDisplayString(item.value), 1)
+                      ]);
+                    }), 128))
+                  ])
+                ]),
+                createElementVNode("div", _hoisted_13$8, [
+                  _cache[6] || (_cache[6] = createElementVNode("div", { class: "popup-section-title" }, "网络指标", -1)),
+                  createElementVNode("div", _hoisted_14$7, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(overviewItems.value, (item) => {
+                      return openBlock(), createElementBlock("div", {
+                        key: item.label,
+                        class: "popup-item"
+                      }, [
+                        createElementVNode("div", _hoisted_15$6, toDisplayString(item.label), 1),
+                        createElementVNode("div", _hoisted_16$6, toDisplayString(item.value), 1)
+                      ]);
+                    }), 128))
+                  ])
+                ])
+              ], 2),
+              advancedOpen.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass(["network-quality-popup network-quality-advanced", themeClass.value]),
+                onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+                }, ["stop"]))
+              }, [
+                createElementVNode("div", _hoisted_17$5, [
+                  _cache[7] || (_cache[7] = createElementVNode("div", { class: "popup-title" }, "高级模式", -1)),
+                  createElementVNode("div", _hoisted_18$5, [
+                    createElementVNode("button", {
+                      type: "button",
+                      class: "advanced-mini-btn",
+                      onClick: toggleAllSections
+                    }, toDisplayString(allSectionsExpanded.value ? "全部收起" : "全部展开"), 1)
+                  ])
+                ]),
+                createElementVNode("div", _hoisted_19$5, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(detailSections.value, (section) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: section.key,
+                      class: "popup-section"
+                    }, [
                       createElementVNode("button", {
                         type: "button",
-                        class: "video-retry-button",
-                        disabled: user == null ? void 0 : user.videoRetrying,
-                        onClick: withModifiers(($event) => handleRetryVideo(user), ["stop"])
-                      }, toDisplayString((user == null ? void 0 : user.videoRetrying) ? "重新加载中..." : "重新加载"), 9, _hoisted_19$5)
-                    ], 512), [
-                      [vShow, (user == null ? void 0 : user.videoLoadFailed) && (user == null ? void 0 : user.cameraStatus) === "1"]
-                    ]),
-                    createElementVNode("div", _hoisted_20$5, [
-                      createElementVNode("span", _hoisted_21$3, toDisplayString(user.member.name || "未知成员"), 1),
-                      user.member.memberId === unref(getUserId)() ? (openBlock(), createElementBlock("span", _hoisted_22$3, "（我）")) : createCommentVNode("", true)
-                    ])
-                  ])
-                ], 14, _hoisted_11$a);
-              }), 128)) : (openBlock(), createElementBlock("div", _hoisted_23$3, [..._cache[8] || (_cache[8] = [
-                createElementVNode("span", null, "等待成员加入...", -1)
-              ])]))
-            ], 2),
-            createElementVNode("div", _hoisted_24$3, [
-              isConnected.value ? (openBlock(), createElementBlock("div", _hoisted_25$3, [
-                createElementVNode("span", _hoisted_26$3, toDisplayString(joinTimeObj.value), 1)
-              ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_27$3, [
-                isConnected.value || isForcibleInsertion.value ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  ref_key: "micRef",
-                  ref: micRef
-                }, [
-                  createElementVNode("button", {
-                    class: normalizeClass(["control-btn", { "is-disabled": unref(micOperationBusy) }]),
-                    onClick: _cache[0] || (_cache[0] = ($event) => onChange(unref(RoomModalSelectType).microphoneClick))
-                  }, [
-                    createVNode(SvgIcon, {
-                      name: unref(meState2).microPhoneState == "1" ? "MicrophoneIcon" : "MicrophoneSlashIcon",
-                      size: 20
-                    }, null, 8, ["name"]),
-                    _cache[9] || (_cache[9] = createElementVNode("span", null, "麦克风", -1))
-                  ], 2),
-                  createElementVNode("div", {
-                    class: normalizeClass(["device-dropdown-trigger", { "is-disabled": unref(micOperationBusy) }]),
-                    onClick: _cache[1] || (_cache[1] = ($event) => toggleDeviceSelector("microphone"))
-                  }, [
-                    createVNode(SvgIcon, {
-                      name: "TriangleIcon",
-                      size: 9
-                    })
-                  ], 2)
-                ], 512)) : createCommentVNode("", true),
-                isReceiving.value ? (openBlock(), createElementBlock("button", {
-                  key: 1,
-                  class: "accept-call-btn",
-                  onClick: acceptCall
-                }, [
-                  createVNode(SvgIcon, {
-                    name: "PhoneIcon",
-                    size: 21
-                  }),
-                  _cache[10] || (_cache[10] = createElementVNode("span", null, "接听", -1))
-                ])) : createCommentVNode("", true),
-                isCalling.value || isReceiving.value || isConnected.value ? (openBlock(), createElementBlock("button", {
-                  key: 2,
-                  class: "end-call-btn",
-                  onClick: endCall
-                }, [
-                  createVNode(SvgIcon, {
-                    name: "HandUpIcon",
-                    size: 21,
-                    "color-class": "handUp"
-                  }),
-                  createElementVNode("span", null, toDisplayString(isReceiving.value ? "拒绝" : "挂断"), 1)
-                ])) : createCommentVNode("", true),
-                isListening.value ? (openBlock(), createElementBlock("button", {
-                  key: 3,
-                  class: "end-call-btn",
-                  onClick: stopMonitoring
-                }, [
-                  createVNode(SvgIcon, {
-                    name: "HandUpIcon",
-                    size: 21,
-                    "color-class": "handUp"
-                  }),
-                  _cache[11] || (_cache[11] = createElementVNode("span", null, "结束监听", -1))
-                ])) : createCommentVNode("", true),
-                isForcibleInsertion.value ? (openBlock(), createElementBlock("button", {
-                  key: 4,
-                  class: "end-call-btn",
-                  onClick: stopMonitoring
-                }, [
-                  createVNode(SvgIcon, {
-                    name: "HandUpIcon",
-                    size: 20
-                  }),
-                  _cache[12] || (_cache[12] = createElementVNode("span", null, "退出通话", -1))
-                ])) : createCommentVNode("", true),
-                isConnected.value || isForcibleInsertion.value ? (openBlock(), createElementBlock("div", {
-                  key: 5,
-                  ref_key: "cameraRef",
-                  ref: cameraRef
-                }, [
-                  createElementVNode("button", {
-                    class: normalizeClass(["control-btn", { "is-disabled": unref(cameraOperationBusy) }]),
-                    onClick: _cache[2] || (_cache[2] = ($event) => onChange(unref(RoomModalSelectType).cameraClick))
-                  }, [
-                    createVNode(SvgIcon, {
-                      name: unref(meState2).cameraState == "1" ? "CameraIcon" : "CameraSlashIcon",
-                      size: 20
-                    }, null, 8, ["name"]),
-                    _cache[13] || (_cache[13] = createElementVNode("span", null, "摄像头", -1))
-                  ], 2),
-                  createElementVNode("div", {
-                    class: normalizeClass(["device-dropdown-trigger", { "is-disabled": unref(cameraOperationBusy) }]),
-                    onClick: _cache[3] || (_cache[3] = ($event) => toggleDeviceSelector("camera"))
-                  }, [
-                    createVNode(SvgIcon, {
-                      name: "TriangleIcon",
-                      size: 9
-                    })
-                  ], 2)
-                ], 512)) : createCommentVNode("", true)
-              ]),
-              isConnected.value ? (openBlock(), createElementBlock("div", _hoisted_28$3, [
-                createVNode(SvgIcon, {
-                  name: "TranscribeIcon",
-                  size: 22
-                }),
-                _cache[14] || (_cache[14] = createElementVNode("span", null, "录制中", -1))
-              ])) : createCommentVNode("", true)
+                        class: normalizeClass(["detail-section-toggle", { collapsed: isSectionCollapsed(section.key) }]),
+                        onClick: ($event) => toggleSection(section.key)
+                      }, [
+                        createElementVNode("span", _hoisted_21$3, [
+                          createElementVNode("span", _hoisted_22$3, toDisplayString(section.title), 1),
+                          createElementVNode("span", _hoisted_23$3, "(" + toDisplayString(section.cards.length) + ")", 1)
+                        ]),
+                        createElementVNode("span", _hoisted_24$3, toDisplayString(isSectionCollapsed(section.key) ? "展开" : "收起"), 1)
+                      ], 10, _hoisted_20$5),
+                      !isSectionCollapsed(section.key) && section.cards.length ? (openBlock(), createElementBlock("div", _hoisted_25$3, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(section.cards, (card) => {
+                          return openBlock(), createElementBlock("div", {
+                            key: card.title,
+                            class: "metric-card"
+                          }, [
+                            createElementVNode("div", _hoisted_26$3, [
+                              createElementVNode("div", _hoisted_27$3, toDisplayString(card.title), 1),
+                              createElementVNode("div", _hoisted_28$3, toDisplayString(card.subtitle), 1)
+                            ]),
+                            createElementVNode("div", _hoisted_29$2, [
+                              (openBlock(true), createElementBlock(Fragment, null, renderList(card.items, (item) => {
+                                return openBlock(), createElementBlock("div", {
+                                  key: `${card.title}-${item.label}`,
+                                  class: "metric-card-item"
+                                }, [
+                                  createElementVNode("div", _hoisted_30$2, toDisplayString(item.label), 1),
+                                  createElementVNode("div", _hoisted_31$1, toDisplayString(item.value), 1)
+                                ]);
+                              }), 128))
+                            ])
+                          ]);
+                        }), 128))
+                      ])) : !isSectionCollapsed(section.key) ? (openBlock(), createElementBlock("div", _hoisted_32$1, "暂无数据")) : createCommentVNode("", true)
+                    ]);
+                  }), 128))
+                ])
+              ], 2)) : createCommentVNode("", true)
             ])
           ]),
-          createVNode(SmartPopup, {
-            visible: showDeviceSelector.value,
-            "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => showDeviceSelector.value = $event),
-            trigger: currentDeviceType.value == "microphone" ? micRef.value : cameraRef.value,
-            gap: 10
-          }, {
-            default: withCtx(() => [
-              createVNode(DeviceSelector, {
-                "device-type": currentDeviceType.value,
-                theme: _ctx.theme,
-                onClose: _cache[4] || (_cache[4] = ($event) => showDeviceSelector.value = false)
-              }, null, 8, ["device-type", "theme"])
-            ]),
-            _: 1
-          }, 8, ["visible", "trigger"])
-        ], 2)) : createCommentVNode("", true)
-      ]);
+          _: 1
+        }, 8, ["visible", "trigger"])
+      ], 2);
     };
   }
 });
-const JSCall = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-e1585009"]]);
-const _hoisted_1$n = { class: "js-dialog-header-title" };
-const _hoisted_2$l = { class: "js-dialog-header-actions" };
+const NetworkQualitySignal = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-3378006f"]]);
+const _hoisted_1$n = { class: "network-copy" };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  __name: "meeting-header",
+  __name: "netWorkStatus",
   props: {
-    theme: {},
-    isMaximized: { type: Boolean }
+    theme: { default: "dark" }
   },
-  emits: ["onChange"],
-  setup(__props, { emit: __emit }) {
+  setup(__props) {
     const props = __props;
-    const { meState: meState2 } = storeToRefs(useMeetingStore());
-    const meetingInfo = computed(() => {
-      return JSON.parse(sessionStorage.getItem("JS_MEETING_INFO") || "{}");
+    const themeClass = computed(() => `theme-${props.theme}`);
+    const displayLabel = computed(() => {
+      if (networkQualityState.isStale) {
+        return "网络检测中";
+      }
+      return networkQualityState.label;
     });
-    const emit = __emit;
-    const closeRef = ref(null);
-    const showCloseConfirm = ref(false);
-    const themeClass = computed(() => `theme-${props.theme || "dark"}`);
-    ref(false);
-    const handleCloseClick = async () => {
-      showCloseConfirm.value = !showCloseConfirm.value;
-    };
-    const handleEndMeeting = () => {
-      showCloseConfirm.value = false;
-      emit("onChange", RoomModalSelectType.endClick);
-    };
-    const handleLeaveMeeting = () => {
-      showCloseConfirm.value = false;
-      emit("onChange", RoomModalSelectType.leaveClick);
-    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["js-dialog-header", themeClass.value])
+        class: normalizeClass(["network-situation", themeClass.value])
       }, [
-        createElementVNode("div", _hoisted_1$n, toDisplayString(meetingInfo.value.meetingName), 1),
-        createElementVNode("div", _hoisted_2$l, [
-          createElementVNode("div", {
-            title: "最小化",
-            onClick: _cache[0] || (_cache[0] = ($event) => emit("onChange", unref(RoomModalSelectType).minimizeClick))
-          }, [
-            createVNode(SvgIcon, {
-              name: "MinimizeIcon",
-              size: 16
-            })
-          ]),
-          createElementVNode("div", {
-            ref_key: "closeRef",
-            ref: closeRef,
-            title: "关闭",
-            onClick: handleCloseClick
-          }, [
-            createVNode(SvgIcon, {
-              name: "CloseIcon",
-              size: 17
-            })
-          ], 512)
-        ]),
-        createVNode(SmartPopup, {
-          visible: showCloseConfirm.value,
-          "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => showCloseConfirm.value = $event),
-          trigger: closeRef.value,
-          gap: 10
-        }, {
-          default: withCtx(() => [
-            createElementVNode("div", {
-              class: normalizeClass(["close-confirm-dropdown", themeClass.value])
-            }, [
-              unref(meState2).roleType == "1" ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: "close-confirm-option danger",
-                onClick: withModifiers(handleEndMeeting, ["stop"])
-              }, " 结束会议 ")) : createCommentVNode("", true),
-              createElementVNode("div", {
-                class: "close-confirm-option simple",
-                onClick: withModifiers(handleLeaveMeeting, ["stop"])
-              }, " 离开会议 "),
-              createElementVNode("div", {
-                class: "close-confirm-option simple",
-                onClick: _cache[1] || (_cache[1] = ($event) => showCloseConfirm.value = false)
-              }, " 取消 ")
-            ], 2)
-          ]),
-          _: 1
-        }, 8, ["visible", "trigger"])
+        createVNode(NetworkQualitySignal, {
+          theme: _ctx.theme,
+          size: "compact"
+        }, null, 8, ["theme"]),
+        createElementVNode("div", _hoisted_1$n, [
+          createElementVNode("span", {
+            class: normalizeClass(["network-label", `is-${unref(networkQualityState).level}`])
+          }, toDisplayString(displayLabel.value), 3)
+        ])
       ], 2);
     };
   }
 });
-const MeetingHeader = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-28fc3b9d"]]);
-const _hoisted_1$m = ["title"];
-const _hoisted_2$k = {
-  class: "signal-bars",
-  "aria-hidden": "true"
+const NetWorkStatus = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-565d8abd"]]);
+const _hoisted_1$m = {
+  key: 0,
+  class: "sos-flash-overlay"
 };
-const _hoisted_3$k = {
+const _hoisted_2$l = { class: "js-call-dialog-container" };
+const _hoisted_3$k = { class: "status-bar" };
+const _hoisted_4$i = { class: "status-left" };
+const _hoisted_5$f = {
   key: 0,
-  class: "signal-text"
+  class: "caller-info",
+  title: "来电人"
+};
+const _hoisted_6$e = {
+  class: "avatar",
+  style: { "width": "35px", "height": "35px", "font-size": "16px" }
 };
-const _hoisted_4$i = { class: "network-quality-popup-shell" };
-const _hoisted_5$f = { class: "popup-header" };
-const _hoisted_6$e = { class: "popup-header-actions" };
-const _hoisted_7$d = { class: "popup-summary" };
-const _hoisted_8$c = {
+const _hoisted_7$d = { class: "caller-text" };
+const _hoisted_8$c = { class: "caller-name" };
+const _hoisted_9$a = {
   key: 0,
-  class: "popup-reasons"
+  class: "caller-number"
+};
+const _hoisted_10$a = { class: "status-right" };
+const _hoisted_11$9 = ["onClick"];
+const _hoisted_12$9 = { class: "video-wrapper" };
+const _hoisted_13$7 = ["id"];
+const _hoisted_14$6 = { class: "avatar-container" };
+const _hoisted_15$5 = { class: "avatar" };
+const _hoisted_16$5 = { class: "video-loading-overlay" };
+const _hoisted_17$4 = { class: "video-loading-text" };
+const _hoisted_18$4 = { class: "video-loading-overlay failed" };
+const _hoisted_19$4 = ["disabled", "onClick"];
+const _hoisted_20$4 = { class: "video-meta" };
+const _hoisted_21$2 = { class: "member-name" };
+const _hoisted_22$2 = {
+  key: 0,
+  class: "role-tag"
+};
+const _hoisted_23$2 = {
+  key: 1,
+  class: "video-empty"
 };
-const _hoisted_9$a = { class: "popup-section" };
-const _hoisted_10$a = { class: "popup-grid" };
-const _hoisted_11$9 = { class: "popup-item-label" };
-const _hoisted_12$9 = { class: "popup-item-value" };
-const _hoisted_13$7 = { class: "popup-section" };
-const _hoisted_14$6 = { class: "popup-grid" };
-const _hoisted_15$5 = { class: "popup-item-label" };
-const _hoisted_16$5 = { class: "popup-item-value" };
-const _hoisted_17$4 = { class: "popup-header" };
-const _hoisted_18$4 = { class: "popup-header-actions" };
-const _hoisted_19$4 = { class: "popup-section-container" };
-const _hoisted_20$4 = ["onClick"];
-const _hoisted_21$2 = { class: "detail-section-main" };
-const _hoisted_22$2 = { class: "popup-section-title" };
-const _hoisted_23$2 = { class: "popup-section-count" };
-const _hoisted_24$2 = { class: "detail-section-icon" };
+const _hoisted_24$2 = { class: "control-bar" };
 const _hoisted_25$2 = {
   key: 0,
-  class: "metric-card-list"
+  class: "call-duration"
 };
-const _hoisted_26$2 = { class: "metric-card-header" };
-const _hoisted_27$2 = { class: "metric-card-title" };
-const _hoisted_28$2 = { class: "metric-card-subtitle" };
-const _hoisted_29$2 = { class: "metric-card-grid" };
-const _hoisted_30$2 = { class: "popup-item-label" };
-const _hoisted_31$1 = { class: "popup-item-value" };
-const _hoisted_32$1 = {
+const _hoisted_26$2 = { id: "duration" };
+const _hoisted_27$2 = { class: "control-buttons" };
+const _hoisted_28$2 = {
   key: 1,
-  class: "popup-empty"
+  class: "recording-button"
 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  __name: "NetworkQualitySignal",
-  props: {
+const DEFAULT_SUB_VIDEO_HEIGHT = 110;
+const DEFAULT_SUB_VIDEO_WIDTH = 190;
+const SUB_VIDEO_GAP = 12;
+const CONTROL_BAR_HEIGHT = 90;
+const STATUS_BAR_HEIGHT = 48;
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  __name: "call",
+  props: {
     theme: { default: "dark" },
-    size: { default: "default" },
-    showText: { type: Boolean, default: false }
+    draggable: { type: Boolean, default: false },
+    taskId: {}
   },
   setup(__props) {
+    const { meState: meState2 } = storeToRefs(useMeetingStore());
     const props = __props;
-    const triggerRef = ref(null);
-    const showPopup = ref(false);
-    const advancedOpen = ref(false);
-    const collapsedSections = ref({});
-    const advancedDetails = ref();
-    let detailTimer = null;
+    const visible = callVisible;
     const themeClass = computed(() => `theme-${props.theme}`);
-    function formatValue(value, suffix = "", digits = 0) {
-      if (typeof value !== "number" || Number.isNaN(value)) return "--";
-      return `${value.toFixed(digits)}${suffix}`;
-    }
-    function formatMetricNumber(value, suffix = "", digits = 0) {
-      if (typeof value !== "number" || Number.isNaN(value)) return "--";
-      return `${value.toFixed(digits)}${suffix}`;
-    }
-    function formatBytes(value) {
-      if (typeof value !== "number" || Number.isNaN(value)) return "--";
-      if (value >= 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(2)} MB`;
-      if (value >= 1024) return `${(value / 1024).toFixed(1)} KB`;
-      return `${value.toFixed(0)} B`;
-    }
-    function formatDimension(width, height) {
-      if (!width || !height) return "--";
-      return `${width} x ${height}`;
-    }
-    function formatLossRate(value) {
-      if (typeof value !== "number" || Number.isNaN(value)) return "--";
-      return `${value.toFixed(1)}%`;
-    }
-    function formatMos(value) {
-      if (typeof value !== "number" || value <= 0 || Number.isNaN(value)) return "--";
-      return value.toFixed(1);
-    }
-    function formatUpdatedAt(timestamp) {
-      if (!timestamp) return "--";
-      const date = new Date(timestamp);
-      const hh = String(date.getHours()).padStart(2, "0");
-      const mm = String(date.getMinutes()).padStart(2, "0");
-      const ss = String(date.getSeconds()).padStart(2, "0");
-      return `${hh}:${mm}:${ss}`;
-    }
-    function formatReason(value) {
-      return value || "--";
-    }
-    function getMemberNameById(memberId) {
-      var _a25;
-      if (!memberId) return "";
-      const matched = members.value.find(
-        (member) => {
-          var _a26;
-          return ((_a26 = member == null ? void 0 : member.member) == null ? void 0 : _a26.memberId) === String(memberId);
+    const showDeviceSelector = ref(false);
+    const currentDeviceType = ref("microphone");
+    const micRef = ref(null);
+    const cameraRef = ref(null);
+    const joinTimeObj = ref("");
+    let timer = null;
+    watch(
+      () => joinTime.value,
+      () => {
+        if (timer) {
+          clearInterval(timer);
+          timer = null;
         }
-      );
-      return ((_a25 = matched == null ? void 0 : matched.member) == null ? void 0 : _a25.name) || "";
-    }
-    function startDetailRefresh() {
-      stopDetailRefresh();
-      refreshAdvancedDetails();
-      detailTimer = window.setInterval(() => {
-        refreshAdvancedDetails();
-      }, 2e3);
-    }
-    function stopDetailRefresh() {
-      if (detailTimer !== null) {
-        window.clearInterval(detailTimer);
-        detailTimer = null;
+        if (joinTime.value) {
+          timer = setInterval(() => {
+            const now = +/* @__PURE__ */ new Date();
+            joinTimeObj.value = formatDuringObject((now - joinTime.value) / 1e3);
+          }, 1e3);
+        }
+      },
+      {
+        immediate: true
       }
-    }
-    function refreshAdvancedDetails() {
-      advancedDetails.value = readNetworkQualityMetricDetails();
-    }
-    function isSectionCollapsed(key) {
-      return collapsedSections.value[key] ?? false;
-    }
-    function toggleSection(key) {
-      collapsedSections.value[key] = !isSectionCollapsed(key);
-    }
-    function expandAllSections() {
-      collapsedSections.value = Object.fromEntries(
-        detailSections.value.map((section) => [section.key, false])
-      );
-    }
-    function collapseAllSections() {
-      collapsedSections.value = Object.fromEntries(
-        detailSections.value.map((section) => [section.key, true])
+    );
+    const isCalling = computed(() => callStatus.value === "calling");
+    const isReceiving = computed(() => callStatus.value === "receiving");
+    const isConnected = computed(() => callStatus.value === "connected");
+    const isListening = computed(() => callStatus.value === "listening");
+    const isForcibleInsertion = computed(
+      () => callStatus.value === "forcible-insertion"
+    );
+    const visibleMembers = computed(() => {
+      return members.value.filter(
+        (item) => item.roleType !== "4" && item.joinStaus === "1" && (!isListening.value || item.member.memberId !== getUserId())
       );
-    }
-    function toggleAllSections() {
-      if (allSectionsExpanded.value) {
-        collapseAllSections();
-        return;
+    });
+    const hasForceInsertMember = computed(
+      () => visibleMembers.value.some((item) => item.roleType === "1")
+    );
+    const layoutClass = computed(() => {
+      if (visibleMembers.value.length <= 1) return "layout-single";
+      if (hasForceInsertMember.value) return "layout-three";
+      return "layout-two";
+    });
+    const mainMemberId = ref("");
+    const pickDefaultMainMember = (list) => {
+      if (!list.length) {
+        return "";
       }
-      expandAllSections();
-    }
-    function syncSectionCollapse(preserveExisting = true) {
-      const nextState = {};
-      for (const section of detailSections.value) {
-        if (preserveExisting && section.key in collapsedSections.value) {
-          nextState[section.key] = collapsedSections.value[section.key];
-          continue;
+      const remoteMember = list.find(
+        (item) => item.member.memberId !== getUserId()
+      );
+      return (remoteMember || list[0]).member.memberId;
+    };
+    watch(
+      visibleMembers,
+      (list) => {
+        if (!list.length) {
+          mainMemberId.value = "";
+          return;
         }
-        nextState[section.key] = false;
-      }
-      collapsedSections.value = nextState;
-    }
-    const activeBars = computed(() => {
-      if (networkQualityState.isOffline || networkQualityState.isStale) {
-        return 0;
+        const exists = list.some(
+          (item) => item.member.memberId === mainMemberId.value
+        );
+        if (!exists) {
+          mainMemberId.value = pickDefaultMainMember(list);
+        }
+      },
+      { immediate: true, deep: true }
+    );
+    const mainMember = computed(() => {
+      if (!visibleMembers.value.length) return null;
+      if (!mainMemberId.value) {
+        return visibleMembers.value[0];
       }
-      return getNetworkSignalBars(networkQualityState.level);
+      return visibleMembers.value.find(
+        (item) => item.member.memberId === mainMemberId.value
+      ) || visibleMembers.value[0];
     });
-    const allSectionsExpanded = computed(() => {
-      if (!detailSections.value.length) return true;
-      return detailSections.value.every((section) => !isSectionCollapsed(section.key));
+    const secondaryMembers = computed(() => {
+      if (!mainMember.value) return [];
+      return visibleMembers.value.filter(
+        (item) => {
+          var _a25;
+          return item.member.memberId !== ((_a25 = mainMember.value) == null ? void 0 : _a25.member.memberId);
+        }
+      );
     });
-    const reasonText = computed(() => {
-      if (!networkQualityState.reasons.length) return "";
-      return `可能原因：${networkQualityState.reasons.join("、")}`;
+    const subVideoPositions = computed(() => {
+      const positions = {};
+      secondaryMembers.value.forEach((member, index) => {
+        positions[member.member.memberId] = {
+          position: "absolute",
+          width: `${DEFAULT_SUB_VIDEO_WIDTH}px`,
+          height: `${DEFAULT_SUB_VIDEO_HEIGHT}px`,
+          right: "16px",
+          top: `${STATUS_BAR_HEIGHT + 16 + index * (DEFAULT_SUB_VIDEO_HEIGHT + SUB_VIDEO_GAP)}px`
+        };
+      });
+      return positions;
     });
-    const qualityItems = computed(() => [
-      { label: "总体质量", value: networkQualityState.label },
-      { label: "上行质量", value: networkQualityState.uplink },
-      { label: "下行质量", value: networkQualityState.downlink },
-      { label: "MOS", value: formatMos(networkQualityState.mos) },
-      { label: "最近更新", value: formatUpdatedAt(networkQualityState.updatedAt) },
-      {
-        label: "数据状态",
-        value: networkQualityState.isStale ? "已过期" : "实时"
+    const getVideoItemStyle = (memberId) => {
+      var _a25;
+      if (memberId === ((_a25 = mainMember.value) == null ? void 0 : _a25.member.memberId)) {
+        return {
+          position: "absolute",
+          top: `${STATUS_BAR_HEIGHT}px`,
+          right: "0px",
+          left: "0px",
+          bottom: `${CONTROL_BAR_HEIGHT}px`
+        };
       }
-    ]);
-    const overviewItems = computed(() => {
-      const stats = networkQualityState.stats;
-      return [
-        { label: "上行 RTT", value: formatValue(stats == null ? void 0 : stats.rtt_up, " ms") },
-        { label: "下行 RTT", value: formatValue(stats == null ? void 0 : stats.rtt_down, " ms") },
-        { label: "上行码率", value: formatValue(stats == null ? void 0 : stats.bitrate_up, " kb/s") },
-        { label: "下行码率", value: formatValue(stats == null ? void 0 : stats.bitrate_down, " kb/s") },
-        { label: "上行丢包率", value: formatLossRate(stats == null ? void 0 : stats.lossrate_up) },
-        { label: "下行丢包率", value: formatLossRate(stats == null ? void 0 : stats.lossrate_down) },
-        {
-          label: "可用上行带宽",
-          value: formatValue(stats == null ? void 0 : stats.available_outgoing_bitrate, " kb/s")
-        },
-        {
-          label: "可用下行带宽",
-          value: formatValue(stats == null ? void 0 : stats.available_incoming_bitrate, " kb/s")
-        }
-      ];
-    });
-    function createAudioSendCard(item, index) {
-      const stats = (item == null ? void 0 : item.stats) || {};
-      return {
-        title: `本地音频 ${index + 1}`,
-        subtitle: (item == null ? void 0 : item.desc) || (stats == null ? void 0 : stats.streamId) || "发送轨道",
-        items: [
-          { label: "实时码率", value: formatMetricNumber(item == null ? void 0 : item.bitrate, " kb/s") },
-          { label: "音频电平", value: formatMetricNumber(item == null ? void 0 : item.db, " dBFS", 1) },
-          { label: "已发包数", value: formatMetricNumber(stats == null ? void 0 : stats.packetsSent) },
-          { label: "已发字节", value: formatBytes(stats == null ? void 0 : stats.bytesSent) },
-          { label: "远端丢包", value: formatMetricNumber(stats == null ? void 0 : stats.packetsLost) },
-          { label: "往返时延", value: formatMetricNumber(stats == null ? void 0 : stats.roundTripTime, " ms") },
-          { label: "远端抖动", value: formatMetricNumber(stats == null ? void 0 : stats.jitter, " ms") },
-          { label: "采样时间", value: formatUpdatedAt(stats == null ? void 0 : stats.timestamp) }
-        ]
-      };
-    }
-    function createVideoSendCard(item, index) {
-      const stats = (item == null ? void 0 : item.stats) || {};
-      return {
-        title: `本地视频 ${index + 1}`,
-        subtitle: (item == null ? void 0 : item.desc) || (stats == null ? void 0 : stats.rid) || (stats == null ? void 0 : stats.streamId) || "发送轨道",
-        items: [
-          { label: "实时码率", value: formatMetricNumber(item == null ? void 0 : item.bitrate, " kb/s") },
-          { label: "分辨率", value: formatDimension((item == null ? void 0 : item.width) || (stats == null ? void 0 : stats.frameWidth), (item == null ? void 0 : item.height) || (stats == null ? void 0 : stats.frameHeight)) },
-          { label: "帧率", value: formatMetricNumber((item == null ? void 0 : item.fps) || (stats == null ? void 0 : stats.framesPerSecond), " fps") },
-          { label: "已发帧数", value: formatMetricNumber(stats == null ? void 0 : stats.framesSent) },
-          { label: "目标码率", value: formatMetricNumber(stats == null ? void 0 : stats.targetBitrate, " bps") },
-          { label: "FIR/PLI/NACK", value: `${formatMetricNumber(stats == null ? void 0 : stats.firCount)}/${formatMetricNumber(stats == null ? void 0 : stats.pliCount)}/${formatMetricNumber(stats == null ? void 0 : stats.nackCount)}` },
-          { label: "重传包数", value: formatMetricNumber(stats == null ? void 0 : stats.retransmittedPacketsSent) },
-          { label: "受限原因", value: formatReason(stats == null ? void 0 : stats.qualityLimitationReason) },
-          { label: "分辨率变化", value: formatMetricNumber(stats == null ? void 0 : stats.qualityLimitationResolutionChanges) },
-          { label: "往返时延", value: formatMetricNumber(stats == null ? void 0 : stats.roundTripTime, " ms") },
-          { label: "采样时间", value: formatUpdatedAt(stats == null ? void 0 : stats.timestamp) }
-        ]
-      };
-    }
-    function createAudioRecvCard(item, index) {
-      const stats = (item == null ? void 0 : item.stats) || {};
-      return {
-        title: `远端音频 ${index + 1}`,
-        subtitle: (item == null ? void 0 : item.uid) || (item == null ? void 0 : item.desc) || (stats == null ? void 0 : stats.streamId) || "接收轨道",
-        items: [
-          { label: "实时码率", value: formatMetricNumber(item == null ? void 0 : item.bitrate, " kb/s") },
-          { label: "音频电平", value: formatMetricNumber(item == null ? void 0 : item.db, " dBFS", 1) },
-          { label: "已收包数", value: formatMetricNumber(stats == null ? void 0 : stats.packetsReceived) },
-          { label: "已收字节", value: formatBytes(stats == null ? void 0 : stats.bytesReceived) },
-          { label: "丢包数", value: formatMetricNumber(stats == null ? void 0 : stats.packetsLost) },
-          { label: "网络抖动", value: formatMetricNumber(stats == null ? void 0 : stats.jitter, " ms") },
-          { label: "缓冲均值", value: formatMetricNumber(stats == null ? void 0 : stats.jitterBufferAvgDelay, " ms") },
-          { label: "隐藏事件", value: formatMetricNumber(stats == null ? void 0 : stats.concealmentEvents) },
-          { label: "静音隐藏", value: formatMetricNumber(stats == null ? void 0 : stats.silentConcealmentEvents) },
-          { label: "采样时间", value: formatUpdatedAt(stats == null ? void 0 : stats.timestamp) }
-        ]
-      };
-    }
-    function createVideoRecvCard(item, index) {
-      const stats = (item == null ? void 0 : item.stats) || {};
-      const memberName = getMemberNameById(item == null ? void 0 : item.uid);
-      return {
-        title: `远端视频 ${index + 1}`,
-        subtitle: memberName || (item == null ? void 0 : item.uid) || (item == null ? void 0 : item.desc) || (stats == null ? void 0 : stats.mimeType) || "接收轨道",
-        items: [
-          { label: "实时码率", value: formatMetricNumber(item == null ? void 0 : item.bitrate, " kb/s") },
-          { label: "分辨率", value: formatDimension((item == null ? void 0 : item.width) || (stats == null ? void 0 : stats.frameWidth), (item == null ? void 0 : item.height) || (stats == null ? void 0 : stats.frameHeight)) },
-          { label: "帧率", value: formatMetricNumber((item == null ? void 0 : item.fps) || (stats == null ? void 0 : stats.framesPerSecond), " fps") },
-          { label: "已收包数", value: formatMetricNumber(stats == null ? void 0 : stats.packetsReceived) },
-          { label: "已收字节", value: formatBytes(stats == null ? void 0 : stats.bytesReceived) },
-          { label: "丢包数", value: formatMetricNumber(stats == null ? void 0 : stats.packetsLost) },
-          { label: "接收/解码帧", value: `${formatMetricNumber(stats == null ? void 0 : stats.framesReceived)}/${formatMetricNumber(stats == null ? void 0 : stats.framesDecoded)}` },
-          { label: "丢帧数", value: formatMetricNumber(stats == null ? void 0 : stats.framesDropped) },
-          { label: "FIR/PLI/NACK", value: `${formatMetricNumber(stats == null ? void 0 : stats.firCount)}/${formatMetricNumber(stats == null ? void 0 : stats.pliCount)}/${formatMetricNumber(stats == null ? void 0 : stats.nackCount)}` },
-          { label: "缓冲均值", value: formatMetricNumber(stats == null ? void 0 : stats.jitterBufferAvgDelay, " ms") },
-          { label: "解码器", value: formatReason(stats == null ? void 0 : stats.decoderImplementation) },
-          { label: "MIME", value: formatReason(stats == null ? void 0 : stats.mimeType) },
-          { label: "采样时间", value: formatUpdatedAt(stats == null ? void 0 : stats.timestamp) }
-        ]
-      };
-    }
-    const detailSections = computed(() => {
-      const details = advancedDetails.value;
-      return [
-        {
-          key: "local-audio",
-          title: "本地音频发送",
-          cards: ((details == null ? void 0 : details.local_audios) || []).map(createAudioSendCard)
-        },
-        {
-          key: "local-video",
-          title: "本地视频发送",
-          cards: ((details == null ? void 0 : details.local_videos) || []).map(createVideoSendCard)
-        },
-        {
-          key: "remote-audio",
-          title: "远端音频接收",
-          cards: ((details == null ? void 0 : details.remote_audios) || []).map(createAudioRecvCard)
-        },
-        {
-          key: "remote-video",
-          title: "远端视频接收",
-          cards: ((details == null ? void 0 : details.remote_videos) || []).map(createVideoRecvCard)
-        }
-      ];
-    });
-    watch(showPopup, (visible) => {
-      if (visible) {
-        refreshNetworkQualitySnapshot(false);
-        if (advancedOpen.value) {
-          syncSectionCollapse();
-          startDetailRefresh();
-        }
-        return;
-      }
-      stopDetailRefresh();
-      advancedOpen.value = false;
-      collapsedSections.value = {};
-      advancedDetails.value = void 0;
-    });
-    watch(advancedOpen, (open2) => {
-      if (!showPopup.value) return;
-      if (open2) {
-        syncSectionCollapse(false);
-        startDetailRefresh();
-      } else {
-        stopDetailRefresh();
-        advancedDetails.value = void 0;
+      return subVideoPositions.value[memberId] || {};
+    };
+    const handleSwitchMain = (memberId) => {
+      if (memberId === mainMemberId.value) return;
+      mainMemberId.value = memberId;
+    };
+    watch(
+      () => {
+        var _a25;
+        return ((_a25 = mainMember.value) == null ? void 0 : _a25.member.memberId) || "";
+      },
+      (memberId) => {
+        const focusUid = memberId && memberId !== getUserId() ? memberId : null;
+        void setPreferredRemoteVideoFocus(focusUid);
+      },
+      { immediate: true }
+    );
+    const handleRetryVideo = async (user) => {
+      var _a25;
+      const memberId = (_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId;
+      if (!memberId || memberId === getUserId() || (user == null ? void 0 : user.videoRetrying)) return;
+      await retryRemoteVideoSubscription(memberId);
+    };
+    const statusText = computed(() => {
+      switch (callStatus.value) {
+        case "calling":
+          return "正在呼叫";
+        case "receiving":
+          return "正在接收呼叫";
+        case "connected":
+          return "通话中";
+        case "listening":
+          return "正在监听";
+        case "end":
+          return "通话结束";
+        default:
+          return "通话中";
       }
     });
+    const callerInfo = ref({});
     watch(
-      detailSections,
+      () => callStatus.value,
       () => {
-        if (!advancedOpen.value) return;
-        syncSectionCollapse();
+        try {
+          const info = JSON.parse(
+            sessionStorage.getItem("JS_MEETING_INFO") || "{}"
+          );
+          callerInfo.value = info || {};
+        } catch {
+          callerInfo.value = {};
+        }
       },
-      { deep: true }
+      { immediate: true }
     );
-    onUnmounted(() => {
-      stopDetailRefresh();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["network-quality-signal", [`size-${_ctx.size}`]])
-      }, [
-        createElementVNode("button", {
-          ref_key: "triggerRef",
-          ref: triggerRef,
-          type: "button",
-          class: normalizeClass(["network-quality-trigger", [
-            `is-${unref(networkQualityState).level}`,
-            {
-              "is-alert": unref(networkQualityState).isOffline || unref(networkQualityState).isStale
-            }
-          ]]),
-          title: unref(networkQualityState).summary,
-          onClick: _cache[0] || (_cache[0] = ($event) => showPopup.value = !showPopup.value)
-        }, [
-          createElementVNode("span", _hoisted_2$k, [
-            (openBlock(), createElementBlock(Fragment, null, renderList(4, (index) => {
-              return createElementVNode("span", {
-                key: index,
-                class: normalizeClass(["signal-bar", { active: index <= activeBars.value }])
-              }, null, 2);
-            }), 64))
-          ]),
-          _ctx.showText ? (openBlock(), createElementBlock("span", _hoisted_3$k, toDisplayString(unref(networkQualityState).label), 1)) : createCommentVNode("", true)
-        ], 10, _hoisted_1$m),
-        createVNode(SmartPopup, {
-          visible: showPopup.value,
-          "onUpdate:visible": _cache[3] || (_cache[3] = ($event) => showPopup.value = $event),
-          trigger: triggerRef.value,
-          gap: 12
-        }, {
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_4$i, [
-              createElementVNode("div", {
-                class: normalizeClass(["network-quality-popup network-quality-main", themeClass.value])
-              }, [
-                createElementVNode("div", _hoisted_5$f, [
-                  _cache[4] || (_cache[4] = createElementVNode("div", { class: "popup-title" }, "网络详情", -1)),
-                  createElementVNode("div", _hoisted_6$e, [
-                    createElementVNode("button", {
-                      type: "button",
-                      class: "advanced-toggle",
-                      onClick: _cache[1] || (_cache[1] = withModifiers(($event) => advancedOpen.value = !advancedOpen.value, ["stop"]))
-                    }, toDisplayString(advancedOpen.value ? "关闭高级模式" : "打开高级模式"), 1),
-                    createElementVNode("div", {
-                      class: normalizeClass(["popup-status", `is-${unref(networkQualityState).level}`])
-                    }, toDisplayString(unref(networkQualityState).label), 3)
-                  ])
-                ]),
-                createElementVNode("div", _hoisted_7$d, toDisplayString(unref(networkQualityState).summary), 1),
-                reasonText.value ? (openBlock(), createElementBlock("div", _hoisted_8$c, toDisplayString(reasonText.value), 1)) : createCommentVNode("", true),
-                createElementVNode("div", _hoisted_9$a, [
-                  _cache[5] || (_cache[5] = createElementVNode("div", { class: "popup-section-title" }, "质量概览", -1)),
-                  createElementVNode("div", _hoisted_10$a, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(qualityItems.value, (item) => {
-                      return openBlock(), createElementBlock("div", {
-                        key: item.label,
-                        class: "popup-item"
-                      }, [
-                        createElementVNode("div", _hoisted_11$9, toDisplayString(item.label), 1),
-                        createElementVNode("div", _hoisted_12$9, toDisplayString(item.value), 1)
-                      ]);
-                    }), 128))
-                  ])
-                ]),
-                createElementVNode("div", _hoisted_13$7, [
-                  _cache[6] || (_cache[6] = createElementVNode("div", { class: "popup-section-title" }, "网络指标", -1)),
-                  createElementVNode("div", _hoisted_14$6, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(overviewItems.value, (item) => {
-                      return openBlock(), createElementBlock("div", {
-                        key: item.label,
-                        class: "popup-item"
-                      }, [
-                        createElementVNode("div", _hoisted_15$5, toDisplayString(item.label), 1),
-                        createElementVNode("div", _hoisted_16$5, toDisplayString(item.value), 1)
-                      ]);
-                    }), 128))
-                  ])
-                ])
-              ], 2),
-              advancedOpen.value ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: normalizeClass(["network-quality-popup network-quality-advanced", themeClass.value]),
-                onClick: _cache[2] || (_cache[2] = withModifiers(() => {
-                }, ["stop"]))
-              }, [
-                createElementVNode("div", _hoisted_17$4, [
-                  _cache[7] || (_cache[7] = createElementVNode("div", { class: "popup-title" }, "高级模式", -1)),
-                  createElementVNode("div", _hoisted_18$4, [
-                    createElementVNode("button", {
-                      type: "button",
-                      class: "advanced-mini-btn",
-                      onClick: toggleAllSections
-                    }, toDisplayString(allSectionsExpanded.value ? "全部收起" : "全部展开"), 1)
-                  ])
-                ]),
-                createElementVNode("div", _hoisted_19$4, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(detailSections.value, (section) => {
-                    return openBlock(), createElementBlock("div", {
-                      key: section.key,
-                      class: "popup-section"
-                    }, [
-                      createElementVNode("button", {
-                        type: "button",
-                        class: normalizeClass(["detail-section-toggle", { collapsed: isSectionCollapsed(section.key) }]),
-                        onClick: ($event) => toggleSection(section.key)
-                      }, [
-                        createElementVNode("span", _hoisted_21$2, [
-                          createElementVNode("span", _hoisted_22$2, toDisplayString(section.title), 1),
-                          createElementVNode("span", _hoisted_23$2, "(" + toDisplayString(section.cards.length) + ")", 1)
-                        ]),
-                        createElementVNode("span", _hoisted_24$2, toDisplayString(isSectionCollapsed(section.key) ? "展开" : "收起"), 1)
-                      ], 10, _hoisted_20$4),
-                      !isSectionCollapsed(section.key) && section.cards.length ? (openBlock(), createElementBlock("div", _hoisted_25$2, [
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(section.cards, (card) => {
-                          return openBlock(), createElementBlock("div", {
-                            key: card.title,
-                            class: "metric-card"
-                          }, [
-                            createElementVNode("div", _hoisted_26$2, [
-                              createElementVNode("div", _hoisted_27$2, toDisplayString(card.title), 1),
-                              createElementVNode("div", _hoisted_28$2, toDisplayString(card.subtitle), 1)
-                            ]),
-                            createElementVNode("div", _hoisted_29$2, [
-                              (openBlock(true), createElementBlock(Fragment, null, renderList(card.items, (item) => {
-                                return openBlock(), createElementBlock("div", {
-                                  key: `${card.title}-${item.label}`,
-                                  class: "metric-card-item"
-                                }, [
-                                  createElementVNode("div", _hoisted_30$2, toDisplayString(item.label), 1),
-                                  createElementVNode("div", _hoisted_31$1, toDisplayString(item.value), 1)
-                                ]);
-                              }), 128))
-                            ])
-                          ]);
-                        }), 128))
-                      ])) : !isSectionCollapsed(section.key) ? (openBlock(), createElementBlock("div", _hoisted_32$1, "暂无数据")) : createCommentVNode("", true)
-                    ]);
-                  }), 128))
-                ])
-              ], 2)) : createCommentVNode("", true)
-            ])
-          ]),
-          _: 1
-        }, 8, ["visible", "trigger"])
-      ], 2);
-    };
-  }
-});
-const NetworkQualitySignal = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-3378006f"]]);
-const _hoisted_1$l = { class: "network-copy" };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  __name: "netWorkStatus",
-  props: {
-    theme: { default: "dark" }
-  },
-  setup(__props) {
-    const props = __props;
-    const themeClass = computed(() => `theme-${props.theme}`);
-    const displayLabel = computed(() => {
-      if (networkQualityState.isStale) {
-        return "网络检测中";
+    const onChange = async (type) => {
+      switch (type) {
+        case RoomModalSelectType.microphoneClick:
+          if (micOperationBusy.value) return;
+          if (isAuthority.value) {
+            showNotification(alertMsg, "warning", 5e3);
+            return;
+          }
+          if (meState2.value.microPhoneState === "1") {
+            await closeMic();
+          } else {
+            await openMic();
+          }
+          break;
+        case RoomModalSelectType.cameraClick:
+          if (cameraOperationBusy.value) return;
+          if (isAuthority.value) {
+            alert(alertMsg);
+            return;
+          }
+          if (meState2.value.cameraState === "1") {
+            await closeCamera();
+          } else {
+            await openCamera();
+          }
+          break;
+        case RoomModalSelectType.acceptClick:
+          acceptCall();
+          break;
+        case RoomModalSelectType.endClick:
+          endCall();
+          break;
       }
-      return networkQualityState.label;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["network-situation", themeClass.value])
-      }, [
-        createVNode(NetworkQualitySignal, {
-          theme: _ctx.theme,
-          size: "compact"
-        }, null, 8, ["theme"]),
-        createElementVNode("div", _hoisted_1$l, [
-          createElementVNode("span", {
-            class: normalizeClass(["network-label", `is-${unref(networkQualityState).level}`])
-          }, toDisplayString(displayLabel.value), 3)
-        ])
-      ], 2);
     };
-  }
-});
-const NetWorkStatus = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-e8e23036"]]);
-const _hoisted_1$k = { class: "js-dialog-content-inner" };
-const _hoisted_2$j = { class: "js-dialog-content-inner-left" };
-const _hoisted_3$j = { class: "js-dialog-content-inner-right" };
-const _hoisted_4$h = { class: "grid-layout" };
-const _hoisted_5$e = ["onClick"];
-const _hoisted_6$d = {
-  key: 0,
-  class: "host-tag"
-};
-const _hoisted_7$c = ["id"];
-const _hoisted_8$b = { class: "avatar-container" };
-const _hoisted_9$9 = { class: "video-loading-overlay" };
-const _hoisted_10$9 = { class: "video-loading-text" };
-const _hoisted_11$8 = { class: "video-loading-overlay failed" };
-const _hoisted_12$8 = ["disabled", "onClick"];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  __name: "meeting-content",
-  props: {
-    layout: { default: "grid-9" },
-    isFullscreen: { type: Boolean },
-    joinTime: { default: 0 },
-    theme: { default: "dark" }
-  },
-  emits: ["layout-change", "toggle-fullscreen"],
-  setup(__props, { emit: __emit }) {
-    const speakingUserName = ref("");
-    emitter.on("speakingUserName", (name2) => {
-      speakingUserName.value = name2;
-    });
-    const props = __props;
-    const userId = getUserId();
-    const joinTimeObj = ref("");
-    const speakerId = ref(null);
-    const lastGridLayout = ref("grid-9");
-    const getUserName2 = (user) => {
-      var _a25, _b25, _c2;
-      return ((_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId) == userId ? `(我)${(_b25 = user == null ? void 0 : user.member) == null ? void 0 : _b25.name}` : ((_c2 = user == null ? void 0 : user.member) == null ? void 0 : _c2.name) || "未知用户";
+    const acceptCall = () => {
+      const meetingInfo = JSON.parse(
+        sessionStorage.getItem("JS_MEETING_INFO") || "{}"
+      );
+      setCallStatus("connected");
+      stopSosFlash();
+      getAnswerCall({
+        meetingId: meetingInfo.meetingId,
+        memberId: getUserId(),
+        cameraStatus: "0",
+        audioStatus: "0"
+      }).then(() => {
+        return getJoinCall({
+          meetingId: meetingInfo.meetingId,
+          memberId: getUserId(),
+          cameraStatus: "0",
+          audioStatus: "0"
+        });
+      }).then((resp) => {
+        if (resp && resp.code === 200) {
+          sessionStorage.setItem("JS_MEETING_INFO", JSON.stringify(resp.data));
+          console.log("拨打电话", resp.data.meetingToken);
+          setTimeout(() => {
+            joinRoom();
+          }, 100);
+          stopRingtone();
+          recordMeeting("start");
+        }
+      }).catch((err) => {
+        console.error("接听失败", err);
+        setCallStatus("end");
+      });
     };
-    const layoutClass = computed(() => `layout-${props.layout}`);
-    const allJoinedMembers = computed(() => {
-      return members.value.filter((user) => (user == null ? void 0 : user.joinStaus) == "1");
-    });
-    const speakerUser = computed(() => {
-      if (!speakerId.value) return allJoinedMembers.value[0];
-      return allJoinedMembers.value.find(
-        (user) => {
-          var _a25;
-          return ((_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId) === speakerId.value;
+    const endCall = async () => {
+      visible.value = false;
+      stopSosFlash();
+      const meetingInfo = JSON.parse(
+        sessionStorage.getItem("JS_MEETING_INFO") || "{}"
+      );
+      setCallStatus("end");
+      try {
+        const res = await getHangUpCall({
+          meetingId: meetingInfo.meetingId,
+          memberId: getUserId()
+        });
+        if (res.code === 200) {
+          await logoutRoomAction();
+          clearTimer();
+          recordMeeting("stop");
         }
-      ) || allJoinedMembers.value[0];
-    });
-    const preferredRemoteVideoFocusId = computed(() => {
-      var _a25, _b25;
-      if (props.layout !== "speaker") return null;
-      const focusedUid = (_b25 = (_a25 = speakerUser.value) == null ? void 0 : _a25.member) == null ? void 0 : _b25.memberId;
-      return focusedUid && focusedUid !== userId ? focusedUid : null;
-    });
-    const filteredMembers = computed(() => {
-      return allJoinedMembers.value;
-    });
-    const setSpeaker = (user) => {
-      var _a25;
-      speakerId.value = (_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId;
-      if (props.layout !== "speaker") {
-        emit("layout-change", "speaker");
+      } catch (err) {
+        console.error("挂断失败", err);
+        await logoutRoomAction();
       }
     };
-    const clearSpeaker = () => {
-      if (props.layout === "speaker") {
-        emit("layout-change", lastGridLayout.value);
+    const stopMonitoring = async () => {
+      visible.value = false;
+      const meetingInfo = JSON.parse(
+        sessionStorage.getItem("JS_MEETING_INFO") || "{}"
+      );
+      try {
+        const res = await getMeetingLeave({
+          meetingId: meetingInfo.meetingId,
+          memberId: getUserId()
+        });
+        if (res.code === 200) {
+          await logoutRoomAction();
+          clearTimer();
+        }
+      } catch (err) {
+        console.error("离开失败", err);
+        await logoutRoomAction();
       }
     };
-    const handleRetryVideo = async (user) => {
-      var _a25;
-      const memberId = (_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId;
-      if (!memberId || memberId === userId || (user == null ? void 0 : user.videoRetrying)) return;
-      await retryRemoteVideoSubscription(memberId);
-    };
-    const handleFullscreenClick = () => {
-      emit("toggle-fullscreen");
+    const clearTimer = () => {
+      if (timer) {
+        clearInterval(timer);
+        timer = null;
+      }
+    };
+    const recordMeeting = (newState) => {
+      const meetingInfo = JSON.parse(
+        sessionStorage.getItem("JS_MEETING_INFO") || "{}"
+      );
+      let params = {
+        meetingId: meetingInfo.meetingId,
+        memberId: getUserId(),
+        cmd: newState
+      };
+      getMcuCtrl(params).then(() => {
+      }).catch(() => {
+      });
+    };
+    const toggleDeviceSelector = (deviceType) => {
+      currentDeviceType.value = deviceType;
+      showDeviceSelector.value = !showDeviceSelector.value;
     };
-    const emit = __emit;
-    let timer = null;
-    watch(
-      () => props.layout,
-      (layout) => {
-        if (layout !== "speaker") {
-          lastGridLayout.value = layout;
-        }
-      },
-      { immediate: true }
-    );
     watch(
-      () => props.joinTime,
-      () => {
-        if (timer) {
-          clearInterval(timer);
-          timer = null;
-        }
-        if (props.joinTime) {
-          timer = setInterval(() => {
-            const now = +/* @__PURE__ */ new Date();
-            joinTimeObj.value = formatDuringObject((now - props.joinTime) / 1e3);
-          }, 1e3);
+      () => visible.value,
+      (newValue) => {
+        if (newValue) {
+          showDeviceSelector.value = false;
         }
-      },
-      {
-        immediate: true
       }
     );
-    onMounted(async () => {
-      await nextTick();
-      setTimeout(() => {
-        mountTracks();
-      }, 100);
+    onMounted(() => {
     });
-    watch(
-      () => members.value.length,
-      async (len, prevLen) => {
-        if (!len || len === prevLen) return;
-        await nextTick();
-        setTimeout(() => mountTracks(), 0);
-      },
-      { flush: "post" }
-    );
-    watch(
-      preferredRemoteVideoFocusId,
-      (focusedUid) => {
-        void setPreferredRemoteVideoFocus(focusedUid);
-      },
-      { immediate: true }
-    );
     onUnmounted(() => {
-      void setPreferredRemoteVideoFocus(null);
       if (timer) {
         clearInterval(timer);
         timer = null;
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", _hoisted_1$k, [
-          createElementVNode("div", _hoisted_2$j, [
-            createVNode(NetWorkStatus, { theme: _ctx.theme }, null, 8, ["theme"]),
-            createElementVNode("span", null, "正在讲话：" + toDisplayString(speakingUserName.value || "无"), 1)
-          ]),
-          createElementVNode("div", _hoisted_3$j, [
-            createElementVNode("span", null, toDisplayString(joinTimeObj.value), 1),
-            createVNode(SvgIcon, {
-              name: _ctx.isFullscreen ? "NoFullscreenIcon" : "FullscreenIcon",
-              class: "icon-inactive",
-              onClick: handleFullscreenClick
-            }, null, 8, ["name"])
-          ])
-        ]),
-        createElementVNode("div", {
-          class: normalizeClass(["js-dialog-content", [layoutClass.value, { "is-fullscreen-layout": _ctx.isFullscreen }]])
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        unref(sosFlashVisible) ? (openBlock(), createElementBlock("div", _hoisted_1$m)) : createCommentVNode("", true),
+        unref(visible) ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(["js-dialog-overlay", themeClass.value])
         }, [
-          createElementVNode("div", _hoisted_4$h, [
-            !unref(members).length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, renderList(12, (n2) => {
-              return createElementVNode("div", {
-                key: n2,
-                class: "skeleton grid-item"
-              }, [
-                createVNode(Skeleton)
-              ]);
-            }), 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(filteredMembers.value, (user) => {
-              var _a25, _b25, _c2, _d, _e, _f2, _g2, _h, _i2, _j, _k, _l2, _m, _n, _o, _p, _q, _r2, _s, _t2, _u, _v, _w2, _x2;
-              return openBlock(), createElementBlock("div", {
-                key: user == null ? void 0 : user.member.memberId,
-                class: normalizeClass(["grid-item", {
-                  "is-speaker": _ctx.layout === "speaker" && ((_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId) === ((_c2 = (_b25 = speakerUser.value) == null ? void 0 : _b25.member) == null ? void 0 : _c2.memberId),
-                  "is-hidden": _ctx.layout === "speaker" && ((_d = user == null ? void 0 : user.member) == null ? void 0 : _d.memberId) !== ((_f2 = (_e = speakerUser.value) == null ? void 0 : _e.member) == null ? void 0 : _f2.memberId)
-                }]),
-                onClick: ($event) => {
-                  var _a26, _b26, _c3;
-                  return _ctx.layout === "speaker" && ((_a26 = user == null ? void 0 : user.member) == null ? void 0 : _a26.memberId) === ((_c3 = (_b26 = speakerUser.value) == null ? void 0 : _b26.member) == null ? void 0 : _c3.memberId) ? clearSpeaker() : setSpeaker(user);
-                }
-              }, [
-                createElementVNode("div", {
-                  class: normalizeClass(["video-container", {
-                    small: _ctx.layout === "speaker" && ((_g2 = user == null ? void 0 : user.member) == null ? void 0 : _g2.memberId) !== ((_i2 = (_h = speakerUser.value) == null ? void 0 : _h.member) == null ? void 0 : _i2.memberId)
-                  }])
+          createElementVNode("div", _hoisted_2$l, [
+            createElementVNode("div", _hoisted_3$k, [
+              createElementVNode("div", _hoisted_4$i, [
+                createElementVNode("div", null, [
+                  createVNode(NetWorkStatus, { theme: _ctx.theme }, null, 8, ["theme"])
+                ]),
+                isReceiving.value && callerInfo.value ? (openBlock(), createElementBlock("div", _hoisted_5$f, [
+                  createElementVNode("div", _hoisted_6$e, toDisplayString(unref(getUserAvatar)(callerInfo.value)), 1),
+                  createElementVNode("div", _hoisted_7$d, [
+                    createElementVNode("div", _hoisted_8$c, toDisplayString(callerInfo.value.memberName || "未知来电"), 1),
+                    callerInfo.value.shortNumber ? (openBlock(), createElementBlock("div", _hoisted_9$a, " 分机：" + toDisplayString(callerInfo.value.shortNumber), 1)) : createCommentVNode("", true)
+                  ])
+                ])) : createCommentVNode("", true)
+              ]),
+              createElementVNode("div", _hoisted_10$a, [
+                createElementVNode("span", null, toDisplayString(statusText.value), 1)
+              ])
+            ]),
+            createElementVNode("div", {
+              class: normalizeClass(["video-container", layoutClass.value])
+            }, [
+              visibleMembers.value.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(visibleMembers.value, (user) => {
+                var _a25, _b25;
+                return openBlock(), createElementBlock("div", {
+                  key: user.member.memberId,
+                  class: normalizeClass(["video-item", {
+                    "is-main": ((_a25 = mainMember.value) == null ? void 0 : _a25.member.memberId) === user.member.memberId,
+                    "is-secondary": ((_b25 = mainMember.value) == null ? void 0 : _b25.member.memberId) !== user.member.memberId
+                  }]),
+                  style: normalizeStyle(getVideoItemStyle(user.member.memberId)),
+                  onClick: ($event) => handleSwitchMain(user.member.memberId)
                 }, [
-                  user.roleType === "1" ? (openBlock(), createElementBlock("div", _hoisted_6$d, "主持人")) : createCommentVNode("", true),
-                  withDirectives((openBlock(), createElementBlock("div", {
-                    id: unref(userId) === (user == null ? void 0 : user.member.memberId) ? "my-video" : `other-${user == null ? void 0 : user.member.memberId}`,
-                    key: unref(userId) === (user == null ? void 0 : user.member.memberId) ? "my-video" : `other-${user == null ? void 0 : user.member.memberId}`,
-                    class: "video-element"
-                  }, null, 8, _hoisted_7$c)), [
-                    [
-                      vShow,
-                      ((user == null ? void 0 : user.cameraStatus) ?? "0") == "1" || ((user == null ? void 0 : user.shareScreenStatus) ?? "0") == "1"
-                    ]
-                  ]),
-                  withDirectives(createElementVNode("div", _hoisted_8$b, [
-                    createElementVNode("div", {
-                      class: normalizeClass(["avatar", {
-                        large: _ctx.layout === "speaker" && ((_j = user == null ? void 0 : user.member) == null ? void 0 : _j.memberId) === ((_l2 = (_k = speakerUser.value) == null ? void 0 : _k.member) == null ? void 0 : _l2.memberId),
-                        small: _ctx.layout === "speaker" && ((_m = user == null ? void 0 : user.member) == null ? void 0 : _m.memberId) !== ((_o = (_n = speakerUser.value) == null ? void 0 : _n.member) == null ? void 0 : _o.memberId)
-                      }])
-                    }, toDisplayString(unref(getUserAvatar)(user)), 3)
-                  ], 512), [
-                    [
-                      vShow,
-                      ((user == null ? void 0 : user.cameraStatus) ?? "0") == "0" && ((user == null ? void 0 : user.shareScreenStatus) ?? "0") == "0"
-                    ]
-                  ]),
-                  withDirectives(createElementVNode("div", _hoisted_9$9, [
-                    _cache[0] || (_cache[0] = createElementVNode("div", { class: "video-loading-spinner" }, null, -1)),
-                    createElementVNode("div", _hoisted_10$9, toDisplayString((user == null ? void 0 : user.videoRetrying) ? "重新加载中..." : "加载中..."), 1)
-                  ], 512), [
-                    [
-                      vShow,
-                      (user == null ? void 0 : user.loading) && (((user == null ? void 0 : user.cameraStatus) ?? "0") == "1" || ((user == null ? void 0 : user.shareScreenStatus) ?? "0") == "1")
-                    ]
-                  ]),
-                  withDirectives(createElementVNode("div", _hoisted_11$8, [
-                    _cache[1] || (_cache[1] = createElementVNode("div", { class: "video-loading-text" }, "视频加载失败", -1)),
-                    createElementVNode("button", {
-                      type: "button",
-                      class: "video-retry-button",
-                      disabled: user == null ? void 0 : user.videoRetrying,
-                      onClick: withModifiers(($event) => handleRetryVideo(user), ["stop"])
-                    }, toDisplayString((user == null ? void 0 : user.videoRetrying) ? "重新加载中..." : "重新加载"), 9, _hoisted_12$8)
-                  ], 512), [
-                    [
-                      vShow,
-                      (user == null ? void 0 : user.videoLoadFailed) && (((user == null ? void 0 : user.cameraStatus) ?? "0") == "1" || ((user == null ? void 0 : user.shareScreenStatus) ?? "0") == "1")
-                    ]
-                  ]),
-                  user.roleType !== "5" ? (openBlock(), createElementBlock("div", {
-                    key: 1,
-                    class: normalizeClass(["status-indicators", {
-                      large: _ctx.layout === "speaker" && ((_p = user == null ? void 0 : user.member) == null ? void 0 : _p.memberId) === ((_r2 = (_q = speakerUser.value) == null ? void 0 : _q.member) == null ? void 0 : _r2.memberId),
-                      small: _ctx.layout === "speaker" && ((_s = user == null ? void 0 : user.member) == null ? void 0 : _s.memberId) !== ((_u = (_t2 = speakerUser.value) == null ? void 0 : _t2.member) == null ? void 0 : _u.memberId)
-                    }])
+                  createElementVNode("div", _hoisted_12$9, [
+                    withDirectives(createElementVNode("div", {
+                      id: unref(getUserId)() === user.member.memberId ? "my-video" : `other-${user.member.memberId}`,
+                      class: "video-slot"
+                    }, null, 8, _hoisted_13$7), [
+                      [vShow, (user == null ? void 0 : user.cameraStatus) === "1"]
+                    ]),
+                    withDirectives(createElementVNode("div", _hoisted_14$6, [
+                      createElementVNode("div", _hoisted_15$5, toDisplayString(unref(getUserAvatar)(user)), 1)
+                    ], 512), [
+                      [vShow, (user == null ? void 0 : user.cameraStatus) !== "1"]
+                    ]),
+                    withDirectives(createElementVNode("div", _hoisted_16$5, [
+                      _cache[6] || (_cache[6] = createElementVNode("div", { class: "video-loading-spinner" }, null, -1)),
+                      createElementVNode("div", _hoisted_17$4, toDisplayString((user == null ? void 0 : user.videoRetrying) ? "重新加载中..." : "加载中..."), 1)
+                    ], 512), [
+                      [vShow, (user == null ? void 0 : user.loading) && (user == null ? void 0 : user.cameraStatus) === "1"]
+                    ]),
+                    withDirectives(createElementVNode("div", _hoisted_18$4, [
+                      _cache[7] || (_cache[7] = createElementVNode("div", { class: "video-loading-text" }, "视频加载失败", -1)),
+                      createElementVNode("button", {
+                        type: "button",
+                        class: "video-retry-button",
+                        disabled: user == null ? void 0 : user.videoRetrying,
+                        onClick: withModifiers(($event) => handleRetryVideo(user), ["stop"])
+                      }, toDisplayString((user == null ? void 0 : user.videoRetrying) ? "重新加载中..." : "重新加载"), 9, _hoisted_19$4)
+                    ], 512), [
+                      [vShow, (user == null ? void 0 : user.videoLoadFailed) && (user == null ? void 0 : user.cameraStatus) === "1"]
+                    ]),
+                    createElementVNode("div", _hoisted_20$4, [
+                      createElementVNode("span", _hoisted_21$2, toDisplayString(user.member.name || "未知成员"), 1),
+                      user.member.memberId === unref(getUserId)() ? (openBlock(), createElementBlock("span", _hoisted_22$2, "（我）")) : createCommentVNode("", true)
+                    ])
+                  ])
+                ], 14, _hoisted_11$9);
+              }), 128)) : (openBlock(), createElementBlock("div", _hoisted_23$2, [..._cache[8] || (_cache[8] = [
+                createElementVNode("span", null, "等待成员加入...", -1)
+              ])]))
+            ], 2),
+            createElementVNode("div", _hoisted_24$2, [
+              isConnected.value ? (openBlock(), createElementBlock("div", _hoisted_25$2, [
+                createElementVNode("span", _hoisted_26$2, toDisplayString(joinTimeObj.value), 1)
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_27$2, [
+                isConnected.value || isForcibleInsertion.value ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  ref_key: "micRef",
+                  ref: micRef
+                }, [
+                  createElementVNode("button", {
+                    class: normalizeClass(["control-btn", { "is-disabled": unref(micOperationBusy) }]),
+                    onClick: _cache[0] || (_cache[0] = ($event) => onChange(unref(RoomModalSelectType).microphoneClick))
                   }, [
-                    createElementVNode("div", {
-                      class: normalizeClass(["indicator mic", (user == null ? void 0 : user.audioStatus) == "1" ? "on" : "off"])
-                    }, [
-                      createVNode(SvgIcon, {
-                        name: (user == null ? void 0 : user.audioStatus) == "1" ? "MicrophoneIcon" : "MicrophoneSlashIcon",
-                        size: 13
-                      }, null, 8, ["name"])
-                    ], 2),
-                    createElementVNode("div", {
-                      class: normalizeClass(["indicator cam", (user == null ? void 0 : user.cameraStatus) == "1" ? "on" : "off"])
-                    }, [
-                      createVNode(SvgIcon, {
-                        name: (user == null ? void 0 : user.cameraStatus) == "1" ? "CameraIcon" : "CameraSlashIcon",
-                        size: 13
-                      }, null, 8, ["name"])
-                    ], 2)
-                  ], 2)) : createCommentVNode("", true),
+                    createVNode(SvgIcon, {
+                      name: unref(meState2).microPhoneState == "1" ? "MicrophoneIcon" : "MicrophoneSlashIcon",
+                      size: 20
+                    }, null, 8, ["name"]),
+                    _cache[9] || (_cache[9] = createElementVNode("span", null, "麦克风", -1))
+                  ], 2),
                   createElementVNode("div", {
-                    class: normalizeClass(["user-name", {
-                      small: _ctx.layout === "speaker" && ((_v = user == null ? void 0 : user.member) == null ? void 0 : _v.memberId) !== ((_x2 = (_w2 = speakerUser.value) == null ? void 0 : _w2.member) == null ? void 0 : _x2.memberId)
-                    }])
-                  }, toDisplayString(getUserName2(user)), 3)
-                ], 2)
-              ], 10, _hoisted_5$e);
-            }), 128))
-          ])
-        ], 2)
-      ], 64);
-    };
-  }
-});
+                    class: normalizeClass(["device-dropdown-trigger", { "is-disabled": unref(micOperationBusy) }]),
+                    onClick: _cache[1] || (_cache[1] = ($event) => toggleDeviceSelector("microphone"))
+                  }, [
+                    createVNode(SvgIcon, {
+                      name: "TriangleIcon",
+                      size: 9
+                    })
+                  ], 2)
+                ], 512)) : createCommentVNode("", true),
+                isReceiving.value ? (openBlock(), createElementBlock("button", {
+                  key: 1,
+                  class: "accept-call-btn",
+                  onClick: acceptCall
+                }, [
+                  createVNode(SvgIcon, {
+                    name: "PhoneIcon",
+                    size: 21
+                  }),
+                  _cache[10] || (_cache[10] = createElementVNode("span", null, "接听", -1))
+                ])) : createCommentVNode("", true),
+                isCalling.value || isReceiving.value || isConnected.value ? (openBlock(), createElementBlock("button", {
+                  key: 2,
+                  class: "end-call-btn",
+                  onClick: endCall
+                }, [
+                  createVNode(SvgIcon, {
+                    name: "HandUpIcon",
+                    size: 21,
+                    "color-class": "handUp"
+                  }),
+                  createElementVNode("span", null, toDisplayString(isReceiving.value ? "拒绝" : "挂断"), 1)
+                ])) : createCommentVNode("", true),
+                isListening.value ? (openBlock(), createElementBlock("button", {
+                  key: 3,
+                  class: "end-call-btn",
+                  onClick: stopMonitoring
+                }, [
+                  createVNode(SvgIcon, {
+                    name: "HandUpIcon",
+                    size: 21,
+                    "color-class": "handUp"
+                  }),
+                  _cache[11] || (_cache[11] = createElementVNode("span", null, "结束监听", -1))
+                ])) : createCommentVNode("", true),
+                isForcibleInsertion.value ? (openBlock(), createElementBlock("button", {
+                  key: 4,
+                  class: "end-call-btn",
+                  onClick: stopMonitoring
+                }, [
+                  createVNode(SvgIcon, {
+                    name: "HandUpIcon",
+                    size: 20
+                  }),
+                  _cache[12] || (_cache[12] = createElementVNode("span", null, "退出通话", -1))
+                ])) : createCommentVNode("", true),
+                isConnected.value || isForcibleInsertion.value ? (openBlock(), createElementBlock("div", {
+                  key: 5,
+                  ref_key: "cameraRef",
+                  ref: cameraRef
+                }, [
+                  createElementVNode("button", {
+                    class: normalizeClass(["control-btn", { "is-disabled": unref(cameraOperationBusy) }]),
+                    onClick: _cache[2] || (_cache[2] = ($event) => onChange(unref(RoomModalSelectType).cameraClick))
+                  }, [
+                    createVNode(SvgIcon, {
+                      name: unref(meState2).cameraState == "1" ? "CameraIcon" : "CameraSlashIcon",
+                      size: 20
+                    }, null, 8, ["name"]),
+                    _cache[13] || (_cache[13] = createElementVNode("span", null, "摄像头", -1))
+                  ], 2),
+                  createElementVNode("div", {
+                    class: normalizeClass(["device-dropdown-trigger", { "is-disabled": unref(cameraOperationBusy) }]),
+                    onClick: _cache[3] || (_cache[3] = ($event) => toggleDeviceSelector("camera"))
+                  }, [
+                    createVNode(SvgIcon, {
+                      name: "TriangleIcon",
+                      size: 9
+                    })
+                  ], 2)
+                ], 512)) : createCommentVNode("", true)
+              ]),
+              isConnected.value ? (openBlock(), createElementBlock("div", _hoisted_28$2, [
+                createVNode(SvgIcon, {
+                  name: "TranscribeIcon",
+                  size: 22
+                }),
+                _cache[14] || (_cache[14] = createElementVNode("span", null, "录制中", -1))
+              ])) : createCommentVNode("", true)
+            ])
+          ]),
+          createVNode(SmartPopup, {
+            visible: showDeviceSelector.value,
+            "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => showDeviceSelector.value = $event),
+            trigger: currentDeviceType.value == "microphone" ? micRef.value : cameraRef.value,
+            gap: 10
+          }, {
+            default: withCtx(() => [
+              createVNode(DeviceSelector, {
+                "device-type": currentDeviceType.value,
+                theme: _ctx.theme,
+                onClose: _cache[4] || (_cache[4] = ($event) => showDeviceSelector.value = false)
+              }, null, 8, ["device-type", "theme"])
+            ]),
+            _: 1
+          }, 8, ["visible", "trigger"])
+        ], 2)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const JSCall = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-5c880aa1"]]);
+const HANDOFF_SOURCE_TAB_ID_KEY = "JS_MEETING_MQTT_HANDOFF_SOURCE_TAB_ID";
+const HANDOFF_TARGET_TAB_ID_KEY = "JS_MEETING_MQTT_HANDOFF_TARGET_TAB_ID";
+const HANDOFF_ID_KEY = "JS_MEETING_MQTT_HANDOFF_ID";
+const RECONNECT_SIGNAL_KEY = "JS_MEETING_MQTT_RECONNECT_SIGNAL";
+const TARGET_HEARTBEAT_KEY = "JS_MEETING_MQTT_HANDOFF_HEARTBEAT";
+const TARGET_TAB_STATUS_KEY = "JS_MEETING_NEW_TAB_STATUS";
+const TARGET_HEARTBEAT_INTERVAL_MS = 1e3;
+const RECONNECT_CHECK_DELAY_MS = 1500;
+const TARGET_TAB_STATUS_CLOSED = 0;
+const TARGET_TAB_STATUS_OPEN = 1;
+let installed = false;
+let closeSignalSent = false;
+let heartbeatTimer = null;
+let lastHandledReconnectSignalTs = 0;
+let leaveRequestSent = false;
+function createRandomId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID().replace(/-/g, "").slice(0, 12);
+  }
+  return Math.random().toString(36).slice(2, 14);
+}
+function safeSessionStorageGetItem(key) {
+  try {
+    return sessionStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function safeLocalStorageSetItem(key, value) {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function safeLocalStorageGetItem(key) {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function getMeetingMqttHandoffContext() {
+  const sourceTabId = safeSessionStorageGetItem(HANDOFF_SOURCE_TAB_ID_KEY) || "";
+  const targetTabId = safeSessionStorageGetItem(HANDOFF_TARGET_TAB_ID_KEY) || "";
+  const handoffId = safeSessionStorageGetItem(HANDOFF_ID_KEY) || "";
+  if (!sourceTabId || !targetTabId || !handoffId) {
+    return null;
+  }
+  return {
+    sourceTabId,
+    targetTabId,
+    handoffId
+  };
+}
+function readTargetHeartbeat() {
+  const raw = safeLocalStorageGetItem(TARGET_HEARTBEAT_KEY);
+  if (!raw) {
+    return null;
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    if (!(parsed == null ? void 0 : parsed.targetTabId) || !(parsed == null ? void 0 : parsed.handoffId) || !(parsed == null ? void 0 : parsed.ts)) {
+      return null;
+    }
+    return {
+      targetTabId: parsed.targetTabId,
+      handoffId: parsed.handoffId,
+      ts: Number(parsed.ts)
+    };
+  } catch {
+    return null;
+  }
+}
+function writeTargetHeartbeat(context) {
+  safeLocalStorageSetItem(
+    TARGET_HEARTBEAT_KEY,
+    JSON.stringify({
+      targetTabId: context.targetTabId,
+      handoffId: context.handoffId,
+      ts: Date.now()
+    })
+  );
+}
+function writeTargetTabStatus(status, context) {
+  safeLocalStorageSetItem(
+    TARGET_TAB_STATUS_KEY,
+    JSON.stringify({
+      sourceTabId: context.sourceTabId,
+      targetTabId: context.targetTabId,
+      handoffId: context.handoffId,
+      status,
+      ts: Date.now()
+    })
+  );
+}
+function sendReconnectSignal(context) {
+  if (closeSignalSent) {
+    return;
+  }
+  closeSignalSent = true;
+  console.warn("[MQTT_HANDOFF] 目标页关闭，通知来源页恢复 MQTT", {
+    sourceTabId: context.sourceTabId,
+    targetTabId: context.targetTabId,
+    handoffId: context.handoffId
+  });
+  safeLocalStorageSetItem(
+    RECONNECT_SIGNAL_KEY,
+    JSON.stringify({
+      ...context,
+      ts: Date.now()
+    })
+  );
+}
+function stopTargetHeartbeat() {
+  if (heartbeatTimer) {
+    clearInterval(heartbeatTimer);
+    heartbeatTimer = null;
+  }
+}
+function startTargetHeartbeat() {
+  const context = getMeetingMqttHandoffContext();
+  if (!context) {
+    return;
+  }
+  const currentTabId = getCurrentMeetingTabId();
+  if (currentTabId !== context.targetTabId) {
+    return;
+  }
+  closeSignalSent = false;
+  console.info("[MQTT_HANDOFF] 目标页心跳已启动", {
+    sourceTabId: context.sourceTabId,
+    targetTabId: context.targetTabId,
+    handoffId: context.handoffId
+  });
+  writeTargetTabStatus(TARGET_TAB_STATUS_OPEN, context);
+  writeTargetHeartbeat(context);
+  stopTargetHeartbeat();
+  heartbeatTimer = setInterval(() => {
+    writeTargetHeartbeat(context);
+  }, TARGET_HEARTBEAT_INTERVAL_MS);
+}
+function notifySourceTabForReconnect() {
+  const context = getMeetingMqttHandoffContext();
+  if (!context) {
+    return;
+  }
+  const currentTabId = getCurrentMeetingTabId();
+  if (currentTabId !== context.targetTabId) {
+    return;
+  }
+  sendReconnectSignal(context);
+}
+function shouldWarnBeforeUnload() {
+  const context = getMeetingMqttHandoffContext();
+  if (!context) {
+    return false;
+  }
+  const currentTabId = getCurrentMeetingTabId();
+  return currentTabId === context.targetTabId;
+}
+function buildMeetingLeavePayload() {
+  try {
+    const meetingInfo = JSON.parse(sessionStorage.getItem("JS_MEETING_INFO") || "{}");
+    const meetingId = String((meetingInfo == null ? void 0 : meetingInfo.meetingId) || "").trim();
+    const memberId = String(getUserId() || "").trim();
+    if (!meetingId || !memberId) {
+      return null;
+    }
+    return { meetingId, memberId, force: true };
+  } catch {
+    return null;
+  }
+}
+function sendMeetingLeaveOnClose() {
+  if (leaveRequestSent) {
+    return;
+  }
+  const payload = buildMeetingLeavePayload();
+  if (!payload) {
+    return;
+  }
+  leaveRequestSent = true;
+  const body = JSON.stringify(payload);
+  const token = getSdkToken();
+  const authHeader = token ? { Authorization: `Bearer ${token}` } : {};
+  const requestUrl = "/meeting/api/v2/meeting/leave";
+  try {
+    fetch(requestUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json, text/plain, */*",
+        "X-Requested-With": "XMLHttpRequest",
+        ...authHeader
+      },
+      body,
+      keepalive: true,
+      credentials: "same-origin"
+    }).catch(() => {
+    });
+    console.warn("[MQTT_HANDOFF] 页面关闭触发离会请求(keepalive)", payload);
+  } catch {
+  }
+  try {
+    if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
+      const beaconData = new Blob([body], { type: "application/json" });
+      const sent = navigator.sendBeacon(requestUrl, beaconData);
+      console.warn("[MQTT_HANDOFF] 页面关闭触发离会请求(beacon)", {
+        ...payload,
+        sent
+      });
+    }
+  } catch {
+  }
+}
+function shouldReconnectForSignal(signal) {
+  const currentTabId = getCurrentMeetingTabId();
+  if (!signal.sourceTabId || signal.sourceTabId !== currentTabId) {
+    return false;
+  }
+  const latestHeartbeat = readTargetHeartbeat();
+  if (!latestHeartbeat) {
+    return true;
+  }
+  if (latestHeartbeat.targetTabId !== signal.targetTabId) {
+    return true;
+  }
+  if (latestHeartbeat.handoffId !== signal.handoffId) {
+    return true;
+  }
+  return latestHeartbeat.ts <= signal.ts;
+}
+function createMeetingMqttHandoffId() {
+  return `mqtt_handoff_${Date.now()}_${createRandomId()}`;
+}
+function setMeetingMqttHandoffForWindow(targetWindow, context) {
+  targetWindow.sessionStorage.setItem(
+    HANDOFF_SOURCE_TAB_ID_KEY,
+    context.sourceTabId
+  );
+  targetWindow.sessionStorage.setItem(
+    HANDOFF_TARGET_TAB_ID_KEY,
+    context.targetTabId
+  );
+  targetWindow.sessionStorage.setItem(HANDOFF_ID_KEY, context.handoffId);
+}
+function installMeetingMqttHandoffBridge(onReconnectRequested) {
+  if (installed || typeof window === "undefined") {
+    return;
+  }
+  installed = true;
+  startTargetHeartbeat();
+  window.addEventListener("storage", (event) => {
+    if (event.key !== RECONNECT_SIGNAL_KEY || !event.newValue) {
+      return;
+    }
+    let signal = null;
+    try {
+      signal = JSON.parse(event.newValue);
+    } catch {
+      return;
+    }
+    if (!(signal == null ? void 0 : signal.sourceTabId) || !signal.targetTabId || !signal.handoffId) {
+      return;
+    }
+    const signalTs = Number(signal.ts);
+    if (!signalTs || signalTs <= lastHandledReconnectSignalTs) {
+      return;
+    }
+    lastHandledReconnectSignalTs = signalTs;
+    console.warn("[MQTT_HANDOFF] 收到 MQTT 恢复信号，等待确认目标页是否真的关闭", {
+      sourceTabId: signal.sourceTabId,
+      targetTabId: signal.targetTabId,
+      handoffId: signal.handoffId,
+      signalTs
+    });
+    window.setTimeout(() => {
+      if (!shouldReconnectForSignal(signal)) {
+        console.info("[MQTT_HANDOFF] 忽略 MQTT 恢复，本次更像是目标页刷新/重载", {
+          sourceTabId: signal.sourceTabId,
+          targetTabId: signal.targetTabId,
+          handoffId: signal.handoffId
+        });
+        return;
+      }
+      console.warn("[MQTT_HANDOFF] 确认目标页已关闭，准备恢复来源页 MQTT", {
+        sourceTabId: signal.sourceTabId,
+        targetTabId: signal.targetTabId,
+        handoffId: signal.handoffId
+      });
+      void onReconnectRequested();
+    }, RECONNECT_CHECK_DELAY_MS);
+  });
+  window.addEventListener("beforeunload", (event) => {
+    if (!shouldWarnBeforeUnload()) {
+      return;
+    }
+    event.preventDefault();
+    event.returnValue = "";
+  });
+  window.addEventListener("pagehide", (event) => {
+    const context = getMeetingMqttHandoffContext();
+    const shouldHandleTargetTabClose = !!context && getCurrentMeetingTabId() === context.targetTabId;
+    if (shouldHandleTargetTabClose && context) {
+      writeTargetTabStatus(TARGET_TAB_STATUS_CLOSED, context);
+      sendMeetingLeaveOnClose();
+    }
+    stopTargetHeartbeat();
+    if (event.persisted) {
+      return;
+    }
+    notifySourceTabForReconnect();
+  });
+}
+const _hoisted_1$l = { class: "js-dialog-header-title" };
+const _hoisted_2$k = { class: "js-dialog-header-actions" };
+const MQTT_CLIENT_INSTANCE_STORAGE_KEY = "JS_MQTT_CLIENT_INSTANCE_ID";
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "meeting-header",
+  props: {
+    theme: {},
+    isMaximized: { type: Boolean }
+  },
+  emits: ["onChange"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const { meState: meState2 } = storeToRefs(useMeetingStore());
+    const meetingInfo = computed(() => {
+      return JSON.parse(sessionStorage.getItem("JS_MEETING_INFO") || "{}");
+    });
+    const emit = __emit;
+    const closeRef = ref(null);
+    const showCloseConfirm = ref(false);
+    const SESSION_STORAGE_KEYS_TO_CLONE = [
+      "JS_MEETING_INFO",
+      "JS_SDK_TOKEN",
+      "JS_SDK_TOKEN_EXPIRY",
+      "JS_USER_ID",
+      "JS_USER_NAME",
+      "JS_SELF_MEDIA_PREFS",
+      "JS_SERVER_TIMESTAMP",
+      "joinTime",
+      "JS_INCOMING_CALL_INFO",
+      "isSosActive"
+    ];
+    const themeClass = computed(() => `theme-${props.theme || "dark"}`);
+    const hasOpenedNewTab = ref(false);
+    const getNewTabFlagFromLocation = () => {
+      if (typeof window === "undefined") return false;
+      const searchParams = new URLSearchParams(window.location.search || "");
+      if (searchParams.get("newTab") === "true") return true;
+      const hash = window.location.hash || "";
+      const hashQueryIndex = hash.indexOf("?");
+      if (hashQueryIndex === -1) return false;
+      const hashQuery = hash.slice(hashQueryIndex + 1);
+      const hashParams = new URLSearchParams(hashQuery);
+      return hashParams.get("newTab") === "true";
+    };
+    const showOpenNewTabButton = computed(() => {
+      if (hasOpenedNewTab.value) return false;
+      return !getNewTabFlagFromLocation();
+    });
+    const createMqttInstanceId = () => {
+      if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+        return crypto.randomUUID().replace(/-/g, "").slice(0, 12);
+      }
+      return Math.random().toString(36).slice(2, 14);
+    };
+    const copySessionToNewTab = (targetWindow) => {
+      SESSION_STORAGE_KEYS_TO_CLONE.forEach((key) => {
+        const value = sessionStorage.getItem(key);
+        if (value === null) {
+          targetWindow.sessionStorage.removeItem(key);
+          return;
+        }
+        targetWindow.sessionStorage.setItem(key, value);
+      });
+    };
+    const handleOpenNewTab = async () => {
+      var _a25;
+      hasOpenedNewTab.value = true;
+      const currentMeetingId = (_a25 = meetingInfo.value) == null ? void 0 : _a25.meetingId;
+      const newTab = window.open("", "_blank");
+      if (!newTab) {
+        hasOpenedNewTab.value = false;
+        showNotification("打开新标签页失败，请允许弹窗权限。", "warning", 5e3);
+        return;
+      }
+      try {
+        const sourceTabId = getCurrentMeetingTabId();
+        const nextTabId = createMeetingTabId();
+        const handoffId = createMeetingMqttHandoffId();
+        copySessionToNewTab(newTab);
+        setMeetingMqttHandoffForWindow(newTab, {
+          sourceTabId,
+          targetTabId: nextTabId,
+          handoffId
+        });
+        newTab.sessionStorage.setItem(
+          MQTT_CLIENT_INSTANCE_STORAGE_KEY,
+          createMqttInstanceId()
+        );
+        setMeetingTabIdForWindow(newTab, nextTabId);
+        if (currentMeetingId) {
+          claimActiveMeetingOwnership(currentMeetingId, nextTabId);
+        }
+        let url = window.location.href;
+        if (url.includes("home") || url.includes("surveillance")) {
+          url = url.replace("home", "command");
+          url = url.replace("surveillance", "command");
+        }
+        newTab.location.replace(url + "?newTab=true");
+        resetMeetingMQTT();
+        await logoutRoomAction();
+        closeMeeting();
+      } catch (error) {
+        hasOpenedNewTab.value = false;
+        console.error("Failed to open meeting in a new tab:", error);
+        showNotification("New tab initialized with a fallback page open.", "warning", 5e3);
+      }
+    };
+    const handleCloseClick = async () => {
+      showCloseConfirm.value = !showCloseConfirm.value;
+    };
+    const handleEndMeeting = () => {
+      showCloseConfirm.value = false;
+      emit("onChange", RoomModalSelectType.endClick);
+    };
+    const handleLeaveMeeting = () => {
+      showCloseConfirm.value = false;
+      emit("onChange", RoomModalSelectType.leaveClick);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["js-dialog-header", themeClass.value])
+      }, [
+        createElementVNode("div", _hoisted_1$l, toDisplayString(meetingInfo.value.meetingName), 1),
+        createElementVNode("div", _hoisted_2$k, [
+          showOpenNewTabButton.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            title: "新打开标签页",
+            onClick: handleOpenNewTab
+          }, [
+            createVNode(SvgIcon, {
+              name: "OpenNewTabIcon",
+              size: 16
+            })
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            title: "最小化",
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("onChange", unref(RoomModalSelectType).minimizeClick))
+          }, [
+            createVNode(SvgIcon, {
+              name: "MinimizeIcon",
+              size: 16
+            })
+          ]),
+          createElementVNode("div", {
+            ref_key: "closeRef",
+            ref: closeRef,
+            title: "关闭",
+            onClick: handleCloseClick
+          }, [
+            createVNode(SvgIcon, {
+              name: "CloseIcon",
+              size: 17
+            })
+          ], 512)
+        ]),
+        createVNode(SmartPopup, {
+          visible: showCloseConfirm.value,
+          "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => showCloseConfirm.value = $event),
+          trigger: closeRef.value,
+          gap: 10
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(["close-confirm-dropdown", themeClass.value])
+            }, [
+              unref(meState2).roleType == "1" ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "close-confirm-option danger",
+                onClick: withModifiers(handleEndMeeting, ["stop"])
+              }, " 结束会议 ")) : createCommentVNode("", true),
+              createElementVNode("div", {
+                class: "close-confirm-option simple",
+                onClick: withModifiers(handleLeaveMeeting, ["stop"])
+              }, " 离开会议 "),
+              createElementVNode("div", {
+                class: "close-confirm-option simple",
+                onClick: _cache[1] || (_cache[1] = ($event) => showCloseConfirm.value = false)
+              }, " 取消 ")
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["visible", "trigger"])
+      ], 2);
+    };
+  }
+});
+const MeetingHeader = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-2299cd2f"]]);
+const _hoisted_1$k = { class: "js-dialog-content-inner" };
+const _hoisted_2$j = { class: "js-dialog-content-inner-left" };
+const _hoisted_3$j = { class: "js-dialog-content-inner-right" };
+const _hoisted_4$h = { class: "grid-layout" };
+const _hoisted_5$e = ["onClick"];
+const _hoisted_6$d = {
+  key: 0,
+  class: "host-tag"
+};
+const _hoisted_7$c = ["id"];
+const _hoisted_8$b = { class: "avatar-container" };
+const _hoisted_9$9 = { class: "video-loading-overlay" };
+const _hoisted_10$9 = { class: "video-loading-text" };
+const _hoisted_11$8 = { class: "video-loading-overlay failed" };
+const _hoisted_12$8 = ["disabled", "onClick"];
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  __name: "meeting-content",
+  props: {
+    layout: { default: "grid-9" },
+    isFullscreen: { type: Boolean },
+    joinTime: { default: 0 },
+    theme: { default: "dark" }
+  },
+  emits: ["layout-change", "toggle-fullscreen"],
+  setup(__props, { emit: __emit }) {
+    const speakingUserName = ref("");
+    emitter.on("speakingUserName", (name2) => {
+      speakingUserName.value = name2;
+    });
+    const props = __props;
+    const userId = getUserId();
+    const joinTimeObj = ref("");
+    const speakerId = ref(null);
+    const lastGridLayout = ref("grid-9");
+    const getUserName2 = (user) => {
+      var _a25, _b25, _c2;
+      return ((_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId) == userId ? `(我)${(_b25 = user == null ? void 0 : user.member) == null ? void 0 : _b25.name}` : ((_c2 = user == null ? void 0 : user.member) == null ? void 0 : _c2.name) || "未知用户";
+    };
+    const layoutClass = computed(() => `layout-${props.layout}`);
+    const allJoinedMembers = computed(() => {
+      return members.value.filter((user) => (user == null ? void 0 : user.joinStaus) == "1");
+    });
+    const speakerUser = computed(() => {
+      if (!speakerId.value) return allJoinedMembers.value[0];
+      return allJoinedMembers.value.find(
+        (user) => {
+          var _a25;
+          return ((_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId) === speakerId.value;
+        }
+      ) || allJoinedMembers.value[0];
+    });
+    const preferredRemoteVideoFocusId = computed(() => {
+      var _a25, _b25;
+      if (props.layout !== "speaker") return null;
+      const focusedUid = (_b25 = (_a25 = speakerUser.value) == null ? void 0 : _a25.member) == null ? void 0 : _b25.memberId;
+      return focusedUid && focusedUid !== userId ? focusedUid : null;
+    });
+    const filteredMembers = computed(() => {
+      return allJoinedMembers.value;
+    });
+    const setSpeaker = (user) => {
+      var _a25;
+      speakerId.value = (_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId;
+      if (props.layout !== "speaker") {
+        emit("layout-change", "speaker");
+      }
+    };
+    const clearSpeaker = () => {
+      if (props.layout === "speaker") {
+        emit("layout-change", lastGridLayout.value);
+      }
+    };
+    const handleRetryVideo = async (user) => {
+      var _a25;
+      const memberId = (_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId;
+      if (!memberId || memberId === userId || (user == null ? void 0 : user.videoRetrying)) return;
+      await retryRemoteVideoSubscription(memberId);
+    };
+    const handleFullscreenClick = () => {
+      emit("toggle-fullscreen");
+    };
+    const emit = __emit;
+    let timer = null;
+    watch(
+      () => props.layout,
+      (layout) => {
+        if (layout !== "speaker") {
+          lastGridLayout.value = layout;
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => props.joinTime,
+      () => {
+        if (timer) {
+          clearInterval(timer);
+          timer = null;
+        }
+        if (props.joinTime) {
+          timer = setInterval(() => {
+            const now = +/* @__PURE__ */ new Date();
+            joinTimeObj.value = formatDuringObject((now - props.joinTime) / 1e3);
+          }, 1e3);
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    onMounted(async () => {
+      await nextTick();
+      setTimeout(() => {
+        mountTracks();
+      }, 100);
+    });
+    watch(
+      () => members.value.length,
+      async (len, prevLen) => {
+        if (!len || len === prevLen) return;
+        await nextTick();
+        setTimeout(() => mountTracks(), 0);
+      },
+      { flush: "post" }
+    );
+    watch(
+      preferredRemoteVideoFocusId,
+      (focusedUid) => {
+        void setPreferredRemoteVideoFocus(focusedUid);
+      },
+      { immediate: true }
+    );
+    onUnmounted(() => {
+      void setPreferredRemoteVideoFocus(null);
+      if (timer) {
+        clearInterval(timer);
+        timer = null;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1$k, [
+          createElementVNode("div", _hoisted_2$j, [
+            createVNode(NetWorkStatus, { theme: _ctx.theme }, null, 8, ["theme"]),
+            createElementVNode("span", null, "正在讲话：" + toDisplayString(speakingUserName.value || "无"), 1)
+          ]),
+          createElementVNode("div", _hoisted_3$j, [
+            createElementVNode("span", null, toDisplayString(joinTimeObj.value), 1),
+            createVNode(SvgIcon, {
+              name: _ctx.isFullscreen ? "NoFullscreenIcon" : "FullscreenIcon",
+              class: "icon-inactive",
+              onClick: handleFullscreenClick
+            }, null, 8, ["name"])
+          ])
+        ]),
+        createElementVNode("div", {
+          class: normalizeClass(["js-dialog-content", [layoutClass.value, { "is-fullscreen-layout": _ctx.isFullscreen }]])
+        }, [
+          createElementVNode("div", _hoisted_4$h, [
+            !unref(members).length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, renderList(12, (n2) => {
+              return createElementVNode("div", {
+                key: n2,
+                class: "skeleton grid-item"
+              }, [
+                createVNode(Skeleton)
+              ]);
+            }), 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(filteredMembers.value, (user) => {
+              var _a25, _b25, _c2, _d, _e, _f2, _g2, _h, _i2, _j, _k, _l2, _m, _n, _o, _p, _q, _r2, _s, _t2, _u, _v, _w2, _x2;
+              return openBlock(), createElementBlock("div", {
+                key: user == null ? void 0 : user.member.memberId,
+                class: normalizeClass(["grid-item", {
+                  "is-speaker": _ctx.layout === "speaker" && ((_a25 = user == null ? void 0 : user.member) == null ? void 0 : _a25.memberId) === ((_c2 = (_b25 = speakerUser.value) == null ? void 0 : _b25.member) == null ? void 0 : _c2.memberId),
+                  "is-hidden": _ctx.layout === "speaker" && ((_d = user == null ? void 0 : user.member) == null ? void 0 : _d.memberId) !== ((_f2 = (_e = speakerUser.value) == null ? void 0 : _e.member) == null ? void 0 : _f2.memberId)
+                }]),
+                onClick: ($event) => {
+                  var _a26, _b26, _c3;
+                  return _ctx.layout === "speaker" && ((_a26 = user == null ? void 0 : user.member) == null ? void 0 : _a26.memberId) === ((_c3 = (_b26 = speakerUser.value) == null ? void 0 : _b26.member) == null ? void 0 : _c3.memberId) ? clearSpeaker() : setSpeaker(user);
+                }
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(["video-container", {
+                    small: _ctx.layout === "speaker" && ((_g2 = user == null ? void 0 : user.member) == null ? void 0 : _g2.memberId) !== ((_i2 = (_h = speakerUser.value) == null ? void 0 : _h.member) == null ? void 0 : _i2.memberId)
+                  }])
+                }, [
+                  user.roleType === "1" ? (openBlock(), createElementBlock("div", _hoisted_6$d, "主持人")) : createCommentVNode("", true),
+                  withDirectives((openBlock(), createElementBlock("div", {
+                    id: unref(userId) === (user == null ? void 0 : user.member.memberId) ? "my-video" : `other-${user == null ? void 0 : user.member.memberId}`,
+                    key: unref(userId) === (user == null ? void 0 : user.member.memberId) ? "my-video" : `other-${user == null ? void 0 : user.member.memberId}`,
+                    class: "video-element"
+                  }, null, 8, _hoisted_7$c)), [
+                    [
+                      vShow,
+                      ((user == null ? void 0 : user.cameraStatus) ?? "0") == "1" || ((user == null ? void 0 : user.shareScreenStatus) ?? "0") == "1"
+                    ]
+                  ]),
+                  withDirectives(createElementVNode("div", _hoisted_8$b, [
+                    createElementVNode("div", {
+                      class: normalizeClass(["avatar", {
+                        large: _ctx.layout === "speaker" && ((_j = user == null ? void 0 : user.member) == null ? void 0 : _j.memberId) === ((_l2 = (_k = speakerUser.value) == null ? void 0 : _k.member) == null ? void 0 : _l2.memberId),
+                        small: _ctx.layout === "speaker" && ((_m = user == null ? void 0 : user.member) == null ? void 0 : _m.memberId) !== ((_o = (_n = speakerUser.value) == null ? void 0 : _n.member) == null ? void 0 : _o.memberId)
+                      }])
+                    }, toDisplayString(unref(getUserAvatar)(user)), 3)
+                  ], 512), [
+                    [
+                      vShow,
+                      ((user == null ? void 0 : user.cameraStatus) ?? "0") == "0" && ((user == null ? void 0 : user.shareScreenStatus) ?? "0") == "0"
+                    ]
+                  ]),
+                  withDirectives(createElementVNode("div", _hoisted_9$9, [
+                    _cache[0] || (_cache[0] = createElementVNode("div", { class: "video-loading-spinner" }, null, -1)),
+                    createElementVNode("div", _hoisted_10$9, toDisplayString((user == null ? void 0 : user.videoRetrying) ? "重新加载中..." : "加载中..."), 1)
+                  ], 512), [
+                    [
+                      vShow,
+                      (user == null ? void 0 : user.loading) && (((user == null ? void 0 : user.cameraStatus) ?? "0") == "1" || ((user == null ? void 0 : user.shareScreenStatus) ?? "0") == "1")
+                    ]
+                  ]),
+                  withDirectives(createElementVNode("div", _hoisted_11$8, [
+                    _cache[1] || (_cache[1] = createElementVNode("div", { class: "video-loading-text" }, "视频加载失败", -1)),
+                    createElementVNode("button", {
+                      type: "button",
+                      class: "video-retry-button",
+                      disabled: user == null ? void 0 : user.videoRetrying,
+                      onClick: withModifiers(($event) => handleRetryVideo(user), ["stop"])
+                    }, toDisplayString((user == null ? void 0 : user.videoRetrying) ? "重新加载中..." : "重新加载"), 9, _hoisted_12$8)
+                  ], 512), [
+                    [
+                      vShow,
+                      (user == null ? void 0 : user.videoLoadFailed) && (((user == null ? void 0 : user.cameraStatus) ?? "0") == "1" || ((user == null ? void 0 : user.shareScreenStatus) ?? "0") == "1")
+                    ]
+                  ]),
+                  user.roleType !== "5" ? (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: normalizeClass(["status-indicators", {
+                      large: _ctx.layout === "speaker" && ((_p = user == null ? void 0 : user.member) == null ? void 0 : _p.memberId) === ((_r2 = (_q = speakerUser.value) == null ? void 0 : _q.member) == null ? void 0 : _r2.memberId),
+                      small: _ctx.layout === "speaker" && ((_s = user == null ? void 0 : user.member) == null ? void 0 : _s.memberId) !== ((_u = (_t2 = speakerUser.value) == null ? void 0 : _t2.member) == null ? void 0 : _u.memberId)
+                    }])
+                  }, [
+                    createElementVNode("div", {
+                      class: normalizeClass(["indicator mic", (user == null ? void 0 : user.audioStatus) == "1" ? "on" : "off"])
+                    }, [
+                      createVNode(SvgIcon, {
+                        name: (user == null ? void 0 : user.audioStatus) == "1" ? "MicrophoneIcon" : "MicrophoneSlashIcon",
+                        size: 13
+                      }, null, 8, ["name"])
+                    ], 2),
+                    createElementVNode("div", {
+                      class: normalizeClass(["indicator cam", (user == null ? void 0 : user.cameraStatus) == "1" ? "on" : "off"])
+                    }, [
+                      createVNode(SvgIcon, {
+                        name: (user == null ? void 0 : user.cameraStatus) == "1" ? "CameraIcon" : "CameraSlashIcon",
+                        size: 13
+                      }, null, 8, ["name"])
+                    ], 2)
+                  ], 2)) : createCommentVNode("", true),
+                  createElementVNode("div", {
+                    class: normalizeClass(["user-name", {
+                      small: _ctx.layout === "speaker" && ((_v = user == null ? void 0 : user.member) == null ? void 0 : _v.memberId) !== ((_x2 = (_w2 = speakerUser.value) == null ? void 0 : _w2.member) == null ? void 0 : _x2.memberId)
+                    }])
+                  }, toDisplayString(getUserName2(user)), 3)
+                ], 2)
+              ], 10, _hoisted_5$e);
+            }), 128))
+          ])
+        ], 2)
+      ], 64);
+    };
+  }
+});
 const MeetingContent = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-2e24401b"]]);
 const _hoisted_1$j = { class: "js-dialog-footer" };
 const _hoisted_2$i = { class: "js-dialog-footer-group js-dialog-footer-left" };
@@ -42984,16 +43443,18 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                       ], 10, _hoisted_15$4)) : createCommentVNode("", true)
                     ], 8, _hoisted_14$5)) : createCommentVNode("", true)
                   ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                    createVNode(SvgIcon, {
+                    member.roleType !== "5" ? (openBlock(), createBlock(SvgIcon, {
+                      key: 0,
                       name: (member == null ? void 0 : member.audioStatus) == "1" ? "MicrophoneIcon" : "MicrophoneSlashIcon",
                       size: 18,
                       "color-class": "device-icon"
-                    }, null, 8, ["name"]),
-                    createVNode(SvgIcon, {
+                    }, null, 8, ["name"])) : createCommentVNode("", true),
+                    member.roleType !== "5" ? (openBlock(), createBlock(SvgIcon, {
+                      key: 1,
                       name: (member == null ? void 0 : member.cameraStatus) == "1" ? "CameraIcon" : "CameraSlashIcon",
                       size: 18,
                       "color-class": "device-icon"
-                    }, null, 8, ["name"])
+                    }, null, 8, ["name"])) : createCommentVNode("", true)
                   ], 64))
                 ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                   unref(meState2).roleType == "1" ? (openBlock(), createElementBlock("button", {
@@ -43023,7 +43484,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ManageMembers = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-497b82f0"]]);
+const ManageMembers = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-0768f591"]]);
 const _hoisted_1$h = { class: "chat-container" };
 const _hoisted_2$g = { class: "chat-content" };
 const _hoisted_3$g = { class: "chat-meta" };
@@ -44832,23 +45293,26 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       await nextTick();
       mountTracks();
     };
-    const handleFullscreen = () => {
-      isFullscreen.value = !isFullscreen.value;
-      if (isFullscreen.value) {
-        const fullscreenRoot = document.querySelector(
-          ".js-dialog-overlay"
-        );
-        if (fullscreenRoot) {
-          fullscreenRoot.requestFullscreen().catch(() => {
-            isFullscreen.value = false;
-          });
-        }
-      } else {
-        if (document.fullscreenElement) {
-          document.exitFullscreen().catch(() => {
-            isFullscreen.value = true;
-          });
+    const fullscreenOperationBusy = ref(false);
+    const handleFullscreen = async () => {
+      if (fullscreenOperationBusy.value) return;
+      fullscreenOperationBusy.value = true;
+      try {
+        if (!document.fullscreenElement) {
+          const fullscreenRoot = document.querySelector(
+            ".js-dialog-overlay"
+          );
+          if (!fullscreenRoot) return;
+          await fullscreenRoot.requestFullscreen();
+          isFullscreen.value = true;
+        } else {
+          await document.exitFullscreen();
+          isFullscreen.value = false;
         }
+      } catch {
+        isFullscreen.value = !!document.fullscreenElement;
+      } finally {
+        fullscreenOperationBusy.value = false;
       }
     };
     const handleInvite = (arr) => {
@@ -45077,7 +45541,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const JSMeeting = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-44a89d89"]]);
+const JSMeeting = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-2efb7c64"]]);
 const _hoisted_1$8 = { class: "modal" };
 const _hoisted_2$8 = { class: "modal-header" };
 const _hoisted_3$8 = { class: "tab-header" };
@@ -46984,333 +47448,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         style: { "color": "#2f86ff" }
                       })
                     ]),
-                    createElementVNode("div", _hoisted_30, [
-                      withDirectives(createElementVNode("input", {
-                        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => microphoneVolume.value = $event),
-                        type: "range",
-                        min: "0",
-                        max: "100",
-                        class: "volume-slider",
-                        style: normalizeStyle(`background: linear-gradient(to right, #2f86ff ${microphoneVolume.value}%, rgba(255, 255, 255, 0.08) ${microphoneVolume.value}%)`)
-                      }, null, 4), [
-                        [vModelText, microphoneVolume.value]
-                      ])
-                    ])
-                  ])
-                ])
-              ]))
-            ])
-          ])
-        ])), [
-          [_directive_draggable, { handle: ".header" }]
-        ])
-      ], 2)) : createCommentVNode("", true);
-    };
-  }
-});
-const JSSettings = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-27234687"]]);
-function scheduleJoinRoom() {
-  setTimeout(() => {
-    try {
-      joinRoom();
-    } catch (error) {
-      console.error("恢复后无法加入通话/会议", error);
-    }
-  }, 1e3);
-}
-const HANDOFF_SOURCE_TAB_ID_KEY = "JS_MEETING_MQTT_HANDOFF_SOURCE_TAB_ID";
-const HANDOFF_TARGET_TAB_ID_KEY = "JS_MEETING_MQTT_HANDOFF_TARGET_TAB_ID";
-const HANDOFF_ID_KEY = "JS_MEETING_MQTT_HANDOFF_ID";
-const RECONNECT_SIGNAL_KEY = "JS_MEETING_MQTT_RECONNECT_SIGNAL";
-const TARGET_HEARTBEAT_KEY = "JS_MEETING_MQTT_HANDOFF_HEARTBEAT";
-const TARGET_TAB_STATUS_KEY = "JS_MEETING_NEW_TAB_STATUS";
-const TARGET_HEARTBEAT_INTERVAL_MS = 1e3;
-const RECONNECT_CHECK_DELAY_MS = 1500;
-const TARGET_TAB_STATUS_CLOSED = 0;
-const TARGET_TAB_STATUS_OPEN = 1;
-let installed = false;
-let closeSignalSent = false;
-let heartbeatTimer = null;
-let lastHandledReconnectSignalTs = 0;
-let leaveRequestSent = false;
-function safeSessionStorageGetItem(key) {
-  try {
-    return sessionStorage.getItem(key);
-  } catch {
-    return null;
-  }
-}
-function safeLocalStorageSetItem(key, value) {
-  try {
-    localStorage.setItem(key, value);
-  } catch {
-  }
-}
-function safeLocalStorageGetItem(key) {
-  try {
-    return localStorage.getItem(key);
-  } catch {
-    return null;
-  }
-}
-function getMeetingMqttHandoffContext() {
-  const sourceTabId = safeSessionStorageGetItem(HANDOFF_SOURCE_TAB_ID_KEY) || "";
-  const targetTabId = safeSessionStorageGetItem(HANDOFF_TARGET_TAB_ID_KEY) || "";
-  const handoffId = safeSessionStorageGetItem(HANDOFF_ID_KEY) || "";
-  if (!sourceTabId || !targetTabId || !handoffId) {
-    return null;
-  }
-  return {
-    sourceTabId,
-    targetTabId,
-    handoffId
-  };
-}
-function readTargetHeartbeat() {
-  const raw = safeLocalStorageGetItem(TARGET_HEARTBEAT_KEY);
-  if (!raw) {
-    return null;
-  }
-  try {
-    const parsed = JSON.parse(raw);
-    if (!(parsed == null ? void 0 : parsed.targetTabId) || !(parsed == null ? void 0 : parsed.handoffId) || !(parsed == null ? void 0 : parsed.ts)) {
-      return null;
-    }
-    return {
-      targetTabId: parsed.targetTabId,
-      handoffId: parsed.handoffId,
-      ts: Number(parsed.ts)
+                    createElementVNode("div", _hoisted_30, [
+                      withDirectives(createElementVNode("input", {
+                        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => microphoneVolume.value = $event),
+                        type: "range",
+                        min: "0",
+                        max: "100",
+                        class: "volume-slider",
+                        style: normalizeStyle(`background: linear-gradient(to right, #2f86ff ${microphoneVolume.value}%, rgba(255, 255, 255, 0.08) ${microphoneVolume.value}%)`)
+                      }, null, 4), [
+                        [vModelText, microphoneVolume.value]
+                      ])
+                    ])
+                  ])
+                ])
+              ]))
+            ])
+          ])
+        ])), [
+          [_directive_draggable, { handle: ".header" }]
+        ])
+      ], 2)) : createCommentVNode("", true);
     };
-  } catch {
-    return null;
-  }
-}
-function writeTargetHeartbeat(context) {
-  safeLocalStorageSetItem(
-    TARGET_HEARTBEAT_KEY,
-    JSON.stringify({
-      targetTabId: context.targetTabId,
-      handoffId: context.handoffId,
-      ts: Date.now()
-    })
-  );
-}
-function writeTargetTabStatus(status, context) {
-  safeLocalStorageSetItem(
-    TARGET_TAB_STATUS_KEY,
-    JSON.stringify({
-      sourceTabId: context.sourceTabId,
-      targetTabId: context.targetTabId,
-      handoffId: context.handoffId,
-      status,
-      ts: Date.now()
-    })
-  );
-}
-function sendReconnectSignal(context) {
-  if (closeSignalSent) {
-    return;
-  }
-  closeSignalSent = true;
-  console.warn("[MQTT_HANDOFF] 目标页关闭，通知来源页恢复 MQTT", {
-    sourceTabId: context.sourceTabId,
-    targetTabId: context.targetTabId,
-    handoffId: context.handoffId
-  });
-  safeLocalStorageSetItem(
-    RECONNECT_SIGNAL_KEY,
-    JSON.stringify({
-      ...context,
-      ts: Date.now()
-    })
-  );
-}
-function stopTargetHeartbeat() {
-  if (heartbeatTimer) {
-    clearInterval(heartbeatTimer);
-    heartbeatTimer = null;
-  }
-}
-function startTargetHeartbeat() {
-  const context = getMeetingMqttHandoffContext();
-  if (!context) {
-    return;
-  }
-  const currentTabId = getCurrentMeetingTabId();
-  if (currentTabId !== context.targetTabId) {
-    return;
-  }
-  closeSignalSent = false;
-  console.info("[MQTT_HANDOFF] 目标页心跳已启动", {
-    sourceTabId: context.sourceTabId,
-    targetTabId: context.targetTabId,
-    handoffId: context.handoffId
-  });
-  writeTargetTabStatus(TARGET_TAB_STATUS_OPEN, context);
-  writeTargetHeartbeat(context);
-  stopTargetHeartbeat();
-  heartbeatTimer = setInterval(() => {
-    writeTargetHeartbeat(context);
-  }, TARGET_HEARTBEAT_INTERVAL_MS);
-}
-function notifySourceTabForReconnect() {
-  const context = getMeetingMqttHandoffContext();
-  if (!context) {
-    return;
-  }
-  const currentTabId = getCurrentMeetingTabId();
-  if (currentTabId !== context.targetTabId) {
-    return;
-  }
-  sendReconnectSignal(context);
-}
-function shouldWarnBeforeUnload() {
-  const context = getMeetingMqttHandoffContext();
-  if (!context) {
-    return false;
-  }
-  const currentTabId = getCurrentMeetingTabId();
-  return currentTabId === context.targetTabId;
-}
-function buildMeetingLeavePayload() {
-  try {
-    const meetingInfo = JSON.parse(sessionStorage.getItem("JS_MEETING_INFO") || "{}");
-    const meetingId = String((meetingInfo == null ? void 0 : meetingInfo.meetingId) || "").trim();
-    const memberId = String(getUserId() || "").trim();
-    if (!meetingId || !memberId) {
-      return null;
-    }
-    return { meetingId, memberId, force: true };
-  } catch {
-    return null;
-  }
-}
-function sendMeetingLeaveOnClose() {
-  if (leaveRequestSent) {
-    return;
   }
-  const payload = buildMeetingLeavePayload();
-  if (!payload) {
-    return;
-  }
-  leaveRequestSent = true;
-  const body = JSON.stringify(payload);
-  const token = getSdkToken();
-  const authHeader = token ? { Authorization: `Bearer ${token}` } : {};
-  const requestUrl = "/meeting/api/v2/meeting/leave";
-  try {
-    fetch(requestUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json, text/plain, */*",
-        "X-Requested-With": "XMLHttpRequest",
-        ...authHeader
-      },
-      body,
-      keepalive: true,
-      credentials: "same-origin"
-    }).catch(() => {
-    });
-    console.warn("[MQTT_HANDOFF] 页面关闭触发离会请求(keepalive)", payload);
-  } catch {
-  }
-  try {
-    if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
-      const beaconData = new Blob([body], { type: "application/json" });
-      const sent = navigator.sendBeacon(requestUrl, beaconData);
-      console.warn("[MQTT_HANDOFF] 页面关闭触发离会请求(beacon)", {
-        ...payload,
-        sent
-      });
-    }
-  } catch {
-  }
-}
-function shouldReconnectForSignal(signal) {
-  const currentTabId = getCurrentMeetingTabId();
-  if (!signal.sourceTabId || signal.sourceTabId !== currentTabId) {
-    return false;
-  }
-  const latestHeartbeat = readTargetHeartbeat();
-  if (!latestHeartbeat) {
-    return true;
-  }
-  if (latestHeartbeat.targetTabId !== signal.targetTabId) {
-    return true;
-  }
-  if (latestHeartbeat.handoffId !== signal.handoffId) {
-    return true;
-  }
-  return latestHeartbeat.ts <= signal.ts;
-}
-function installMeetingMqttHandoffBridge(onReconnectRequested) {
-  if (installed || typeof window === "undefined") {
-    return;
-  }
-  installed = true;
-  startTargetHeartbeat();
-  window.addEventListener("storage", (event) => {
-    if (event.key !== RECONNECT_SIGNAL_KEY || !event.newValue) {
-      return;
-    }
-    let signal = null;
+});
+const JSSettings = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-27234687"]]);
+function scheduleJoinRoom() {
+  setTimeout(() => {
     try {
-      signal = JSON.parse(event.newValue);
-    } catch {
-      return;
-    }
-    if (!(signal == null ? void 0 : signal.sourceTabId) || !signal.targetTabId || !signal.handoffId) {
-      return;
-    }
-    const signalTs = Number(signal.ts);
-    if (!signalTs || signalTs <= lastHandledReconnectSignalTs) {
-      return;
-    }
-    lastHandledReconnectSignalTs = signalTs;
-    console.warn("[MQTT_HANDOFF] 收到 MQTT 恢复信号，等待确认目标页是否真的关闭", {
-      sourceTabId: signal.sourceTabId,
-      targetTabId: signal.targetTabId,
-      handoffId: signal.handoffId,
-      signalTs
-    });
-    window.setTimeout(() => {
-      if (!shouldReconnectForSignal(signal)) {
-        console.info("[MQTT_HANDOFF] 忽略 MQTT 恢复，本次更像是目标页刷新/重载", {
-          sourceTabId: signal.sourceTabId,
-          targetTabId: signal.targetTabId,
-          handoffId: signal.handoffId
-        });
-        return;
-      }
-      console.warn("[MQTT_HANDOFF] 确认目标页已关闭，准备恢复来源页 MQTT", {
-        sourceTabId: signal.sourceTabId,
-        targetTabId: signal.targetTabId,
-        handoffId: signal.handoffId
-      });
-      void onReconnectRequested();
-    }, RECONNECT_CHECK_DELAY_MS);
-  });
-  window.addEventListener("beforeunload", (event) => {
-    if (!shouldWarnBeforeUnload()) {
-      return;
-    }
-    event.preventDefault();
-    event.returnValue = "";
-  });
-  window.addEventListener("pagehide", (event) => {
-    const context = getMeetingMqttHandoffContext();
-    const shouldHandleTargetTabClose = !!context && getCurrentMeetingTabId() === context.targetTabId;
-    if (shouldHandleTargetTabClose && context) {
-      writeTargetTabStatus(TARGET_TAB_STATUS_CLOSED, context);
-      sendMeetingLeaveOnClose();
-    }
-    stopTargetHeartbeat();
-    if (event.persisted) {
-      return;
+      joinRoom();
+    } catch (error) {
+      console.error("恢复后无法加入通话/会议", error);
     }
-    notifySourceTabForReconnect();
-  });
+  }, 1e3);
 }
 let authToken = null;
 async function restoreMeetingMqttConnection() {