mdm-client 1.0.0

package/src/components/LiveMultipleMeeting/LiveMultipleMeeting.vue

@@ -0,0 +1,4469 @@
+<template>
+  <div class="meeting-room" id="multiple-meeting" ref="rootElm">
+    <!-- 会议顶部栏 -->
+    <div class="meeting-room-top-bar" v-drag="'multiple-meeting'">
+      <div class="bar-group">
+        <div class="meeting-theme">
+          <span style="white-space: nowrap">会议主题</span>
+        </div>
+        <div class="meeting-name" @click="themeDialogShow = !themeDialogShow">
+          <span class="meeting-name-text">{{ meetingName }}</span>
+          <div
+            :class="['meeting-name-icon', { 'meeting-name-icon-expanded': themeDialogShow }]"
+          ></div>
+          <ThemeDialog
+            v-if="themeDialogShow"
+            :meetingName="meetingName"
+            :meetingNum="meetingNum"
+            :meetingCreator="meetingHost.ownerName"
+          ></ThemeDialog>
+        </div>
+      </div>
+      <div class="meeting-duration">
+        <div class="meeting-duration-logo"></div>
+        <span>{{ meetingDuration }}</span>
+      </div>
+      <div class="bar-group">
+        <div
+          class="btn custom-layout"
+          v-if="judgeParticipantIsHost(localIdentity) || judgeParticipantIsCoHost(localIdentity)"
+          @click="customLayoutShow = !customLayoutShow"
+        ></div>
+        <span
+          v-if="judgeParticipantIsHost(localIdentity) || judgeParticipantIsCoHost(localIdentity)"
+          class="bar-group-text"
+          @click="customLayoutShow = !customLayoutShow"
+          >自定义布局</span
+        >
+        <div
+          :class="['btn', layoutSwitchShow ? 'layout-active' : 'layout']"
+          @click="layoutSwitchShow = !layoutSwitchShow"
+          v-if="judgeParticipantIsHost(localIdentity) || judgeParticipantIsCoHost(localIdentity)"
+        >
+          <LayoutSwitch
+            v-if="layoutSwitchShow"
+            :currentLayout="currentLayout"
+            :layoutList="layoutList"
+            :layoutLabels="layoutLabels"
+            :currentRoomMode="currentRoomMode"
+            @setLayout="manualSetLayout"
+            @mouseenter.native="layoutSwitchShow = true"
+            @mouseleave.native="layoutSwitchShow = false"
+          ></LayoutSwitch>
+        </div>
+        <span
+          class="bar-group-text"
+          v-if="judgeParticipantIsHost(localIdentity) || judgeParticipantIsCoHost(localIdentity)"
+          >布局</span
+        >
+        <div class="btn slide-small" @click="minumDialog"></div>
+        <div class="btn full-screen" @click="switchFullScreen($event)"></div>
+        <div class="bar-group-split"></div>
+        <div
+          class="btn close-meeting-icon"
+          @click="isInMeeting ? openLeaveOptionDialog2() : exitPage()"
+        ></div>
+      </div>
+    </div>
+
+    <!-- 会议主体内容 -->
+    <div class="meeting-room-contain">
+      <div
+        :class="[
+          'meeting-room-contain-left',
+          { 'meeting-room-contain-left-slide': memberManageShow || chatShow },
+        ]"
+        v-drag="'multiple-meeting'"
+      >
+        <div
+          :class="['meeting', layout, { 'meeting-slide': pageFooterVisible }]"
+          id="room"
+          @mousemove="setPageFooterVisible(5, $event)"
+        >
+          <ScreenShareBoard
+            v-if="isScreenShareEnabled"
+            :screenShareCaptureOption="screenShareCaptureOption"
+            @screenShareOptionChange="screenShareOptionChange"
+            @stopScreenShare="stopScreenShare"
+          ></ScreenShareBoard>
+        </div>
+
+        <!-- 会议控制栏 -->
+        <div
+          :class="['meeting-control-bar', { 'meeting-control-bar-show': pageFooterVisible }]"
+          @mousemove="handleClick"
+        >
+          <!-- 控制按钮组 -->
+          <div class="bar-group">
+            <div class="custom-select">
+              <div
+                :class="['custom-select-btn', isMicrophoneEnabled ? 'mic-on' : 'mic-off']"
+                @click="changeLocalMicrophoneStatus"
+              ></div>
+              <div class="custom-select-right" @click="audioSelectShow = !audioSelectShow">
+                <div class="custom-select-right-text">麦克风</div>
+                <div class="arrow-icon"></div>
+              </div>
+              <SelectSpecialDialog
+                v-if="audioSelectShow"
+                dialogType="audio"
+                :audioDevices="audioDevicesRef"
+                :outputDevices="outputDevicesRef"
+                :activeDevice="activeDevice"
+                @chooseAudioInputDevice="chooseAudioInputDevice"
+                @chooseAudioOutputDevice="chooseAudioOutputDevice"
+                @detectMicroAndOutput="detectMicroAndOutput"
+                @openSettingDialog="openSettingDialog"
+              ></SelectSpecialDialog>
+            </div>
+            <div class="custom-select">
+              <div
+                :class="['custom-select-btn', isCameraEnabled ? 'cam-on' : 'cam-off']"
+                @click="changeLocalCameraStatus"
+              ></div>
+              <div class="custom-select-right" @click="videoSelectShow = !videoSelectShow">
+                <div class="custom-select-right-text">摄像头</div>
+                <div class="arrow-icon"></div>
+              </div>
+              <SelectSpecialDialog
+                v-if="videoSelectShow"
+                :videoDevices="videoDevicesRef"
+                :activeDevice="activeDevice"
+                dialogType="video"
+                @chooseVideoDevice="chooseVideoDevice"
+                @openSettingDialog="openSettingDialog"
+              >
+              </SelectSpecialDialog>
+            </div>
+          </div>
+
+          <!-- 功能按钮组 -->
+          <div class="bar-group">
+            <div
+              class="custom-select"
+              v-if="
+                judgeParticipantIsHost(localIdentity) || judgeParticipantIsCoHost(localIdentity)
+              "
+            >
+              <div class="custom-select-btn theme-icon"></div>
+              <div class="custom-select-right" @click="modeSelectShow = !modeSelectShow">
+                <div class="custom-select-right-text">会议模式</div>
+                <div class="arrow-icon"></div>
+              </div>
+              <SelectDialog
+                v-if="modeSelectShow"
+                :currentRoomMode="currentRoomMode"
+                dialogType="other"
+                @chooseOtherItem="chooseMeetingMode"
+                @close="modeSelectShow = false"
+              >
+              </SelectDialog>
+            </div>
+            <div
+              :class="['t-btn', { 't-btn-hide': isBtnTextHide }]"
+              v-if="!isScreenShareEnabled"
+              @click="changeScreenShareStatus"
+            >
+              <div class="t-btn-icon screen-share"></div>
+              <span>共享屏幕</span>
+            </div>
+            <div
+              :class="['t-btn', { 't-btn-hide': isBtnTextHide }]"
+              v-else
+              @click="changeScreenShareStatus"
+            >
+              <div class="t-btn-icon screen-share-off"></div>
+              <span>结束共享</span>
+            </div>
+            <div :class="['t-btn', { 't-btn-hide': isBtnTextHide }]" @click="chatShow = !chatShow">
+              <div class="t-btn-icon chat"></div>
+              <span>聊天</span>
+            </div>
+            <div
+              :class="['t-btn', { 't-btn-hide': isBtnTextHide }]"
+              v-if="!isRecording"
+              @click="startRecord"
+            >
+              <div class="t-btn-icon record"></div>
+              <span>录制</span>
+            </div>
+            <div :class="['t-btn', { 't-btn-hide': isBtnTextHide }]" v-else @click="stopRecord">
+              <div class="t-btn-icon record-off"></div>
+              <span>结束录制</span>
+            </div>
+            <template
+              v-if="
+                judgeParticipantIsHost(localIdentity) || judgeParticipantIsCoHost(localIdentity)
+              "
+            >
+              <div
+                :class="['t-btn', { 't-btn-hide': isBtnTextHide }]"
+                @click.self="inviteWaysSelectShow = !inviteWaysSelectShow"
+              >
+                <div
+                  class="t-btn-icon invite"
+                  @click.self="inviteWaysSelectShow = !inviteWaysSelectShow"
+                ></div>
+                <span @click.self="inviteWaysSelectShow = !inviteWaysSelectShow">邀请</span>
+                <SelectDialog
+                  v-if="inviteWaysSelectShow"
+                  :otherOptionList="inviteWaysList"
+                  dialogType="other"
+                  @chooseOtherItem="chooseInviteWay"
+                  @close="inviteWaysSelectShow = false"
+                ></SelectDialog>
+                <CallBoard
+                  v-if="callBoardShow"
+                  :position="callBoardOffset"
+                  @closeCallBoard="callBoardShow = false"
+                  @phoneCall="phoneCall"
+                  @miniCall="miniCall"
+                ></CallBoard>
+              </div>
+            </template>
+            <div
+              :class="['t-btn', { 't-btn-hide': isBtnTextHide }]"
+              @click="memberManageShow = !memberManageShow"
+            >
+              <div class="t-btn-icon member"></div>
+              <span>成员管理（{{ participantNum }}）</span>
+            </div>
+            <template
+              v-if="
+                judgeParticipantIsHost(localIdentity) || judgeParticipantIsCoHost(localIdentity)
+              "
+            >
+              <div
+                :class="['t-btn', { 't-btn-hide': isBtnTextHide }]"
+                @click="openSettingDialog('1')"
+              >
+                <div class="t-btn-icon setting"></div>
+                <span>设置</span>
+              </div>
+            </template>
+          </div>
+          <div class="exit-btn" @click="isInMeeting ? openLeaveOptionDialog($event) : exitPage()">
+            {{ judgeParticipantIsHost(localIdentity) ? "结束会议" : "离开会议" }}
+          </div>
+        </div>
+
+        <AppointDialog
+          v-if="appointDialogShow"
+          :participants="participants"
+          :meetingHost="meetingHost"
+          @appointHost="appointHost"
+          @closeDialog="appointDialogShow = false"
+        >
+        </AppointDialog>
+      </div>
+
+      <!-- 右侧边栏 -->
+      <div class="meeting-room-contain-right">
+        <MemberManage
+          ref="memeberManageRef"
+          v-if="memberManageShow"
+          :joinedList="joinedList"
+          :participants="participants"
+          :localIdentity="localIdentity"
+          :unJoinedList="unJoinedList"
+          :meetingNum="meetingNum"
+          :meetingName="meetingName"
+          :meetingHost="meetingHost"
+          :meetingCoHost="meetingCoHost"
+          @close="
+            memberManageShow = false;
+            moreDialogShow = false;
+          "
+          @closeMoreDialog="closeMoreDialog"
+          @participantCameraSwitch="switchParticipantCameraStatus"
+          @participantMicrophoneSwitch="switchParticipantMicrophoneStatus"
+          @allCameraClose="closeAllCamera"
+          @allMicrophoneClose="closeAllMicrophone"
+          @openMoreDialog="moreOptionClick"
+          @appendMemberInvite="appendMemberInvite"
+          @removeUnjoinItem="removeUnjoinItem"
+          @filterJoinedList="filterJoinedList"
+        ></MemberManage>
+        <ChatArea
+          ref="chatAreaRef"
+          v-if="chatShow"
+          :localIdentity="localIdentity"
+          :messageList="messageList"
+          :baseUrl="baseUrl"
+          :token="token"
+          @close="chatShow = false"
+          @messageSend="messageSend"
+        ></ChatArea>
+      </div>
+
+      <CustomLayout
+        v-if="customLayoutShow"
+        :participantList="participants"
+        :meetingNum="meetingNum"
+        @closeCustomLayout="customLayoutShow = false"
+      ></CustomLayout>
+    </div>
+
+    <!-- 弹窗组件 -->
+    <LeaveOptionDialog
+      v-if="leaveOptionShow"
+      :position="leaveOptionOffset"
+      @cancelMeeting="cancelMeeting"
+      @leaveMeeting="openAppointDialog"
+      @optionClose="leaveOptionShow = false"
+    ></LeaveOptionDialog>
+    <MoreOptionDialog
+      v-if="moreDialogShow"
+      :curBlur="curBlurIdentity"
+      :identity="optionIdentity"
+      :optionDialogOffset="optionDialogOffset"
+      :localIdentity="localIdentity"
+      :participants="participants"
+      :meetingHost="meetingHost"
+      :meetingCoHost="meetingCoHost"
+      @close="moreDialogShow = false"
+      @setToBlur="setMemberBlur"
+      @removeFromBlur="removeCurBlur"
+      @openMicro="openMicro"
+      @closeMicro="closeMicro"
+      @openCamera="openCamera"
+      @closeCamera="closeCamera"
+      @setToHost="setToHost"
+      @setToDeafness="setToDeafness"
+      @cancelDeafness="cancelDeafness"
+      @updateName="updateName"
+      @remove="removeMember"
+      @setToCoHost="setToCoHost"
+      @removeFromCoHost="removeFromCoHost"
+    >
+    </MoreOptionDialog>
+    <AddressBook
+      :inviteList="inviteList"
+      :baseUrl="baseUrl"
+      :token="token"
+      @appendInvitePeople="appendInvitePeople"
+      @appendInviteDevice="appendInviteDevice"
+    ></AddressBook>
+    <UpdateNameDialog @updateNameConfirm="updateNameConfirm"></UpdateNameDialog>
+    <SettingDialog
+      ref="settingDialogRef"
+      :activeDevice="activeDevice"
+      :audioDevices="audioDevicesRef"
+      :videoDevices="videoDevicesRef"
+      :outputDevices="outputDevicesRef"
+    ></SettingDialog>
+  </div>
+</template>
+
+<script>
+import LiveClient from "@/utils/livekit/live-client-esm";
+import { ShowMessage, calculateTime, mittBus } from "@/utils";
+import dayjs from "dayjs";
+import ThemeDialog from "../other/themeDialog.vue";
+import LayoutSwitch from "../other/layoutSwitch.vue";
+import SelectDialog from "../other/selectDialog.vue";
+import MemberManage from "../other/memberManage.vue";
+import ChatArea from "../other/chatArea.vue";
+import LeaveOptionDialog from "../other/leaveOptionDialog.vue";
+import AppointDialog from "../other/appointDialog.vue";
+import MoreOptionDialog from "../other/moreOptionDialog.vue";
+import CallBoard from "../other/callBoard.vue";
+import AddressBook from "../other/addressBook.vue";
+import UpdateNameDialog from "../other/updateNameDialog.vue";
+import SelectSpecialDialog from "../other/selectSpecialDialog.vue";
+import ScreenShareBoard from "../other/screenShareBoard.vue";
+import SettingDialog from "../other/settingDialog.vue";
+import CustomLayout from "../other/customLayout.vue";
+
+export default {
+  name: "LiveMultipleMeeting",
+  components: {
+    ThemeDialog,
+    LayoutSwitch,
+    SelectDialog,
+    MemberManage,
+    ChatArea,
+    LeaveOptionDialog,
+    AppointDialog,
+    MoreOptionDialog,
+    CallBoard,
+    AddressBook,
+    UpdateNameDialog,
+    SelectSpecialDialog,
+    ScreenShareBoard,
+    SettingDialog,
+    CustomLayout,
+  },
+  props: {
+    tempMeetingName: {
+      type: String,
+      default: "",
+    },
+    tempMeetingNum: {
+      type: String,
+      default: "",
+    },
+    tempCameraStatus: {
+      type: Boolean,
+    },
+    tempMicroStatus: {
+      type: Boolean,
+    },
+    tempOutputStatus: {
+      type: Boolean,
+    },
+    tempActiveDevice: {
+      type: Object,
+      default: () => ({}),
+    },
+    tempInviteList: {
+      type: Array,
+      default: () => [],
+    },
+    deviceList: {
+      type: Array,
+      default: () => [],
+    },
+    userData: {
+      type: Object,
+      default: () => ({}),
+    },
+    org: {
+      type: String,
+      default: "default",
+    },
+    token: {
+      type: String,
+      default: "",
+    },
+    joinType: {
+      type: String,
+      default: "launch",
+    },
+    isCustomizeMiniInvitations: {
+      type: Boolean,
+      default: false,
+    },
+    miniPagePath: {
+      type: String,
+      default: "",
+    },
+    defaultInviteWay: {
+      type: String,
+      default: "identity",
+    },
+    isInMeeting: {
+      type: Boolean,
+      default: false,
+    },
+    baseUrl: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      // 会议基础数据
+      meetingName: "",
+      meetingNum: "",
+      meetingHost: {
+        ownerId: "",
+        ownerName: "",
+      },
+      meetingCoHost: [],
+      roomMetadata: {},
+      localMetadata: {},
+      localIdentity: "",
+      localName: "",
+
+      // 参与者数据
+      inviteList: [],
+      tempInvitedList: [],
+      participants: [],
+      joinedList: [],
+      unJoinedList: [],
+      filterJoinVal: "",
+
+      // 设备数据
+      meetingQuality: "",
+      meetingTTL: "",
+      audioDevicesRef: [],
+      videoDevicesRef: [],
+      outputDevicesRef: [],
+      activeDevice: {
+        audioInputDevice: "",
+        audioOutputDevice: "",
+        videoDevice: "",
+      },
+
+      // 消息数据
+      messageList: [],
+      meetingWXLink: "",
+
+      // 布局数据
+      currentLayout: "grid",
+      currentRoomMode: "normal",
+      layoutList: ["grid", "rightSide"],
+      layoutLabels: ["宫格", "右侧边栏"],
+
+      // 状态数据
+      duration: 0,
+      memberManageShow: false,
+      chatShow: false,
+      themeDialogShow: false,
+      layoutSwitchShow: false,
+      audioSelectShow: false,
+      videoSelectShow: false,
+      modeSelectShow: false,
+      isMicrophoneEnabled: false,
+      isCameraEnabled: false,
+      isScreenShareEnabled: false,
+      isOutputEnabled: false,
+      isRecording: false,
+      recordStreamUrl: null,
+
+      // 技术数据
+      pageEventList: [],
+      trackList: [],
+      curBlurIdentity: "",
+      curHostIdentity: null,
+      moreDialogShow: false,
+      optionDialogOffset: {},
+      optionIdentity: "",
+      pageFooterVisible: false,
+      footerVisibleDuration: 3,
+      messageTemplate: "测试短信",
+      isDeleteRoom: false,
+      isLeaveRoom: false,
+      leaveOptionShow: false,
+      leaveOptionOffset: {},
+      appointDialogShow: false,
+      callBoardShow: false,
+      callBoardOffset: {},
+      isScreenShareChange: false,
+      screenShareChangeOldLayout: "",
+      isDurationCalc: true,
+      isFullScreen: false,
+      inviteWaysSelectShow: false,
+      inviteWaysList: [
+        {
+          label: "通讯录邀请",
+          value: "addressbook",
+        },
+        {
+          label: "电话呼叫",
+          value: "videoCall",
+        },
+      ],
+      screenShareCaptureOption: {
+        systemAudio: "exclude",
+        resolution: {
+          width: 1920,
+          height: 1080,
+          frameRate: 60,
+        },
+      },
+      screenShareChangeOldBlur: null,
+      isBatchUpdating: false,
+      isInitializing: false,
+      domOperationQueue: [],
+      watchEnabled: {
+        layout: true,
+        mode: true,
+        host: true,
+        blur: true,
+      },
+      customLayoutShow: false,
+      placeholderTemplate: `
+        <div class="board">
+          <div class="board-icon"></div>
+        </div>
+        <div class="describe">
+          <div class="identity">空缺席位</div>
+        </div>
+      `,
+      showMessage: null,
+      liveClient: null,
+      meetingInterval: null,
+      timeInterval: null,
+      durationInterval: null,
+      footerInterval: null,
+      unjoinParticipantInterval: null,
+    };
+  },
+  computed: {
+    meetingDuration() {
+      return calculateTime(this.duration);
+    },
+    participantNum() {
+      return this.participants.length;
+    },
+    participantIdentities() {
+      return this.participantNum > 0 ? this.participants.map((item) => item.identity) : [];
+    },
+    inviteNum() {
+      return this.inviteList.length;
+    },
+    deviceNum() {
+      return this.deviceList.length;
+    },
+    invitedNum() {
+      return this.tempInvitedList?.length || 0;
+    },
+    hasScreenShare() {
+      if (this.participantNum > 0) {
+        const index = this.participants.findIndex((item) => {
+          return item.isScreenShareEnabled;
+        });
+        return index;
+      } else {
+        return -1;
+      }
+    },
+    isBtnTextHide() {
+      return this.memberManageShow || this.chatShow;
+    },
+    layout() {
+      if (this.currentRoomMode === "pointTurn") {
+        return "point-turn";
+      } else {
+        if (this.currentLayout === "grid") {
+          if (this.participantNum <= 1) {
+            return "grid1";
+          } else if (this.participantNum <= 2) {
+            return "grid2";
+          } else if (this.participantNum <= 4) {
+            return "grid3";
+          } else if (this.participantNum <= 6) {
+            return "grid4";
+          } else if (this.participantNum <= 9) {
+            return "grid5";
+          } else if (this.participantNum <= 12) {
+            return "grid6";
+          } else if (this.participantNum <= 16) {
+            return "grid7";
+          } else {
+            return "grid8";
+          }
+        } else {
+          return this.currentLayout;
+        }
+      }
+    },
+  },
+  watch: {
+    footerVisibleDuration(newVal) {
+      if (newVal <= 0) {
+        this.pageFooterVisible = false;
+        if (this.footerInterval) {
+          clearInterval(this.footerInterval);
+        }
+      }
+    },
+    currentLayout: {
+      handler(newLayout, oldLayout) {
+        if (!this.watchEnabled.layout || this.isBatchUpdating) {
+          console.log("布局watch被禁用，跳过DOM操作");
+          return;
+        }
+        this.$nextTick(() => {
+          this.executeLayoutChange(newLayout, oldLayout);
+        });
+      },
+    },
+    curHostIdentity: {
+      handler(newVal, oldVal) {
+        if (!this.watchEnabled.host || this.isBatchUpdating) {
+          console.log("主持人watch被禁用，跳过DOM操作");
+          return;
+        }
+        this.$nextTick(() => {
+          this.executeHostChange(newVal, oldVal);
+        });
+      },
+    },
+    curBlurIdentity: {
+      handler(newVal, oldVal) {
+        if (!this.watchEnabled.blur || this.isBatchUpdating) {
+          console.log("焦点用户watch被禁用，跳过DOM操作");
+          return;
+        }
+        this.executeBlurChange(newVal, oldVal);
+      },
+    },
+    currentRoomMode: {
+      handler(newMode) {
+        if (!this.watchEnabled.mode || this.isBatchUpdating) {
+          console.log("模式watch被禁用，跳过DOM操作");
+          return;
+        }
+        this.$nextTick(() => {
+          this.executeModeChange(newMode);
+        });
+      },
+    },
+  },
+  created() {
+    this.showMessage = new ShowMessage();
+    this.liveClient = null;
+  },
+  async mounted() {
+    await this.getDeviceList();
+    this.initData();
+    if (this.joinType === "launch") {
+      this.initLiveClient();
+      this.liveClient.roomName = this.tempMeetingName;
+      await this.createRoom();
+    } else {
+      this.initLiveClient();
+      this.meetingNum = this.tempMeetingNum;
+      await this.joinRoom();
+    }
+    this.setPageFooterVisible(5);
+    this.initGlobleEvent();
+  },
+  beforeDestroy() {
+    this.stopUnjoinParticipantPolling();
+    this.dispatchLiveClientEvent();
+    this.removeGlobleEvent();
+    this.liveClient = null;
+  },
+  methods: {
+    // DOM操作管理函数
+    async batchUpdateStates(updateFn) {
+      this.isBatchUpdating = true;
+
+      // 暂停所有watch监听器的DOM操作
+      this.watchEnabled = {
+        layout: false,
+        mode: false,
+        host: false,
+        blur: false,
+      };
+
+      try {
+        // 执行状态更新
+        await updateFn();
+
+        this.$nextTick(async () => {
+          await this.processDOMQueue();
+        });
+      } finally {
+        // 重新启用watch监听器
+        this.watchEnabled = {
+          layout: true,
+          mode: true,
+          host: true,
+          blur: true,
+        };
+
+        this.isBatchUpdating = false;
+      }
+    },
+    // 处理DOM操作队列
+    async processDOMQueue() {
+      if (this.domOperationQueue.length === 0) return;
+
+      console.log("执行DOM操作队列，队列长度:", this.domOperationQueue.length);
+
+      // 根据操作类型和优先级排序
+      const sortedQueue = [...this.domOperationQueue].sort((a, b) => {
+        const priority = { mode: 1, layout: 2, host: 3, blur: 4 };
+        return priority[a.type] - priority[b.type];
+      });
+
+      // 清空队列
+      this.domOperationQueue = [];
+
+      // 依次执行DOM操作
+      for (const operation of sortedQueue) {
+        try {
+          console.log(`开始执行DOM操作: ${operation.type}`);
+          await operation.execute();
+          this.$nextTick(() => {
+            console.log(`DOM操作完成: ${operation.type}`);
+          });
+        } catch (error) {
+          console.error(`DOM操作执行失败:`, operation.type, error);
+          // 确保错误不会阻止后续操作
+          if (error.name === "NotFoundError" && error.message.includes("removeChild")) {
+            console.warn(`DOM元素已被移除，跳过此操作: ${operation.type}`);
+          } else {
+            console.error(`其他DOM操作错误:`, error);
+          }
+        }
+      }
+    },
+    // 添加DOM操作到队列
+    addDOMOperation(type, executeFn) {
+      // 移除同类型的旧操作，只保留最新的
+      this.domOperationQueue = this.domOperationQueue.filter((op) => op.type !== type);
+
+      // 添加操作到队列
+      this.domOperationQueue.push({
+        type,
+        execute: async () => {
+          try {
+            // 在执行前检查DOM容器是否存在
+            const container = document.getElementById("room");
+            if (!container) {
+              console.warn(`DOM容器不存在，跳过${type}操作`);
+              return;
+            }
+
+            // 执行实际的DOM操作
+            await executeFn();
+          } catch (error) {
+            console.error(`执行${type}DOM操作时发生错误:`, error);
+            throw error; // 重新抛出错误以便上层处理
+          }
+        },
+        timestamp: Date.now(),
+      });
+    },
+    // 动态等待与会者首次渲染完成
+    async waitForParticipantsRender() {
+      const minDelay = 1000; // 最小延迟1000ms，确保有时间开始渲染
+      const checkInterval = 100; // 每100ms检查一次
+      const stableTime = 300; // 稳定时间300ms，参与者数量不变则认为渲染完成
+      const maxWaitTime = 5000; // 最大等待5秒，避免无限等待
+
+      console.log(`开始动态等待，当前参与者数量: ${this.participantNum}`);
+
+      // 先等待最小延迟
+      await new Promise((resolve) => setTimeout(resolve, minDelay));
+
+      let lastParticipantNum = this.participantNum;
+      let stableStartTime = Date.now();
+      let totalStartTime = Date.now();
+
+      while (true) {
+        await new Promise((resolve) => setTimeout(resolve, checkInterval));
+
+        const currentParticipantNum = this.participantNum;
+        const currentTime = Date.now();
+
+        // 如果参与者数量发生变化，重置稳定计时器
+        if (currentParticipantNum !== lastParticipantNum) {
+          console.log(`参与者数量变化: ${lastParticipantNum} → ${currentParticipantNum}`);
+          lastParticipantNum = currentParticipantNum;
+          stableStartTime = currentTime;
+        }
+
+        // 检查是否达到稳定状态（参与者数量在stableTime内没有变化）
+        if (currentTime - stableStartTime >= stableTime) {
+          console.log(
+            `参与者数量稳定${stableTime}ms，当前数量: ${currentParticipantNum}，认为首次渲染完成`
+          );
+          break;
+        }
+
+        // 检查是否超过最大等待时间
+        if (currentTime - totalStartTime >= maxWaitTime) {
+          console.log(
+            `达到最大等待时间${maxWaitTime}ms，强制结束等待，当前参与者数量: ${currentParticipantNum}`
+          );
+          break;
+        }
+      }
+
+      const totalWaitTime = Date.now() - totalStartTime;
+      console.log(
+        `动态等待完成，总等待时间: ${totalWaitTime}ms，最终参与者数量: ${this.participantNum}`
+      );
+    },
+    // 计算MoreOptionDialog选项数量的辅助函数
+    getOptionCount(identity) {
+      const participantItem = this.getUserItemByIdentity(identity);
+      if (!participantItem || !participantItem.metadata) return 8; // 默认最大选项数
+
+      const metadata = participantItem.metadata;
+      const isLocalParticipant = identity === this.localIdentity;
+
+      let optionCount = 3; // 基础选项：设为主屏、麦克风、摄像头
+
+      if (this.judgeParticipantIsHost(this.localIdentity)) {
+        // 本地为主持人
+        if (metadata?.platformID == 2 || metadata?.platformID == 5 || metadata?.platformID == 6) {
+          // 设备
+          optionCount += isLocalParticipant ? 1 : 2; // 修改名称 + 移出会议(非本地)
+        } else if (metadata?.platformID == 4) {
+          // volte手机端
+          optionCount += isLocalParticipant ? 1 : 3; // 置聋 + 修改名称 + 移出会议(非本地)
+        } else {
+          // app手机端
+          optionCount += isLocalParticipant ? 1 : 5; // 置聋 + 设为主持人 + 联席主持人 + 修改名称 + 移出会议(非本地)
+        }
+      } else if (this.judgeParticipantIsCoHost(this.localIdentity)) {
+        // 本地为联席主持人
+        if (metadata?.platformID == 2 || metadata?.platformID == 5 || metadata?.platformID == 6) {
+          optionCount += isLocalParticipant ? 1 : 2;
+        } else if (metadata?.platformID == 4) {
+          optionCount += isLocalParticipant ? 1 : 3;
+        } else {
+          optionCount += isLocalParticipant ? 1 : 4; // 置聋 + 联席主持人 + 修改名称 + 移出会议(非本地)
+        }
+      }
+
+      return Math.min(optionCount, 8); // 限制最大选项数
+    },
+    // 弹窗定位工具函数
+    calculateDialogPosition(event, options = {}) {
+      const {
+        dialogWidth = 200,
+        dialogHeight = 300,
+        containerId = "multiple-meeting",
+        offsetX = 0,
+        offsetY = 20,
+        preferredPosition = "bottom-left", // 'bottom-left', 'bottom-right', 'top-left', 'top-right'
+        optionCount = null, // 动态计算高度的选项数量
+      } = options;
+
+      // 如果提供了选项数量，动态计算弹窗高度
+      let actualDialogHeight = dialogHeight;
+      if (optionCount && optionCount > 0) {
+        // MoreOptionDialog 每个选项36px高度 + 6px间距 + 8px padding (上下各4px)
+        actualDialogHeight = optionCount * 36 + (optionCount - 1) * 6 + 8;
+      }
+
+      // 获取容器的位置信息
+      const container = document.getElementById(containerId);
+      const containerRect = container ? container.getBoundingClientRect() : { left: 0, top: 0 };
+
+      // 计算相对于容器的坐标
+      const relativeX = event.clientX - containerRect.left;
+      const relativeY = event.clientY - containerRect.top;
+
+      // 获取容器尺寸
+      const containerWidth = container ? container.clientWidth : window.innerWidth;
+      const containerHeight = container ? container.clientHeight : window.innerHeight;
+
+      let left, top;
+
+      // 根据首选位置计算初始位置
+      switch (preferredPosition) {
+        case "bottom-right":
+          left = relativeX + offsetX;
+          top = relativeY + offsetY;
+          break;
+        case "top-left":
+          left = relativeX - dialogWidth - offsetX;
+          top = relativeY - actualDialogHeight - offsetY;
+          break;
+        case "top-right":
+          left = relativeX + offsetX;
+          top = relativeY - actualDialogHeight - offsetY;
+          break;
+        case "bottom-left":
+        default:
+          left = relativeX - dialogWidth - offsetX;
+          top = relativeY + offsetY;
+          break;
+      }
+
+      // 边界检查和自动调整
+      const margin = 10; // 距离边界的最小距离
+
+      // 检查左右边界
+      if (left < margin) {
+        left = relativeX + offsetX; // 切换到右侧
+      } else if (left + dialogWidth > containerWidth - margin) {
+        left = relativeX - dialogWidth - offsetX; // 切换到左侧
+        if (left < margin) {
+          left = containerWidth - dialogWidth - margin; // 贴右边界
+        }
+      }
+
+      // 检查上下边界
+      if (top < margin) {
+        top = relativeY + offsetY; // 切换到下方
+      } else if (top + actualDialogHeight > containerHeight - margin) {
+        top = relativeY - actualDialogHeight - offsetY; // 切换到上方
+        if (top < margin) {
+          top = margin; // 贴上边界
+        }
+      }
+
+      // 确保位置不为负数
+      left = Math.max(margin, left);
+      top = Math.max(margin, top);
+
+      return {
+        left: left + "px",
+        top: top + "px",
+      };
+    },
+    // 取消屏幕共享自动还原的逻辑
+    cancelScreenShareAutoRestore(reason) {
+      if (this.isScreenShareChange) {
+        console.log(`检测到屏幕共享期间${reason}，取消自动还原`);
+        this.isScreenShareChange = false;
+        this.screenShareChangeOldLayout = null;
+        this.screenShareChangeOldBlur = null;
+      }
+    },
+    // 手动切换布局（供LayoutSwitch组件调用）
+    async manualSetLayout(layout) {
+      // 仅主持人和联席主持人可以切换布局
+      if (
+        !this.judgeParticipantIsHost(this.localIdentity) &&
+        !this.judgeParticipantIsCoHost(this.localIdentity)
+      ) {
+        this.showMessage.message("warning", "仅主持人和联席主持人可以切换布局");
+        return;
+      }
+
+      // 手动切换布局时取消自动还原
+      this.cancelScreenShareAutoRestore("手动切换布局");
+
+      await this.setLayout(layout);
+    },
+    // 设置布局（内部使用，包括自动切换）
+    async setLayout(layout) {
+      // 仅主持人和联席主持人可以切换布局
+      if (
+        !this.judgeParticipantIsHost(this.localIdentity) &&
+        !this.judgeParticipantIsCoHost(this.localIdentity)
+      ) {
+        this.showMessage.message("warning", "仅主持人和联席主持人可以切换布局");
+        return;
+      }
+      await this.liveClient.setRoomLayout(layout);
+    },
+    // 判断与会者是否为主持人
+    judgeParticipantIsHost(identity) {
+      return this.meetingHost.ownerId === identity;
+    },
+    // 判断与会者是否为联席主持人
+    judgeParticipantIsCoHost(identity) {
+      if (this.meetingCoHost.length > 0) {
+        return this.meetingCoHost.some((item) => item.coHostId === identity);
+      } else {
+        return false;
+      }
+    },
+    // 判断是否已经在与会者列表中
+    judgeParticipantInMeeting(identity) {
+      if (this.participantNum > 0) {
+        let index = this.participants.findIndex((item) => {
+          return item.identity === identity;
+        });
+        if (index >= 0) {
+          return index;
+        } else {
+          return -1;
+        }
+      } else {
+        return -1;
+      }
+    },
+    // 添加用户到与会者列表
+    addToParticipantList(userItem) {
+      if (this.participantNum <= 0) {
+        this.participants.push(userItem);
+      } else {
+        const index = this.judgeParticipantInMeeting(userItem.identity);
+        if (index !== -1) {
+          // 更新数组中与会者
+          this.participants.splice(index, 1, userItem);
+        } else {
+          this.participants.push(userItem);
+        }
+      }
+    },
+    removeFromParticipantList(identity) {
+      if (this.participantNum > 0) {
+        let index = this.judgeParticipantInMeeting(identity);
+        if (index !== -1) {
+          this.participants.splice(index, 1);
+        }
+      }
+    },
+    // 查找匹配搜索值的与会者列表
+    filterParticipantList() {
+      this.joinedList = [];
+      this.participants.forEach((item) => {
+        if (item.name.includes(this.filterJoinVal)) {
+          this.joinedList.push({
+            identity: item?.identity,
+            name: item.name,
+            audioLevel: item.audioLevel,
+            isCameraEnabled: item.isCameraEnabled,
+            isLocal: item.isLocal,
+            isMicrophoneEnabled: item.isMicrophoneEnabled,
+            isScreenShareEnabled: item.isScreenShareEnabled,
+            isSpeaking: item.isSpeaking,
+            sid: item.sid,
+            metadata: item.metadata,
+          });
+        }
+      });
+    },
+    // 将用户从邀请列表中移除
+    removeFromInviteList(identity) {
+      if (this.inviteNum > 0) {
+        const index = this.inviteList.findIndex((item) => {
+          if (item?.loginCode) {
+            return item.loginCode === identity;
+          } else {
+            return item.phone === identity;
+          }
+        });
+        if (index !== -1) {
+          this.inviteList.splice(index, 1);
+        }
+      }
+    },
+    // 添加用户到邀请列表中
+    addToInviteList(userItem) {
+      if (this.inviteNum <= 0) {
+        this.inviteList.push(userItem);
+      } else {
+        if (this.judgePersonIsInvited(userItem.id) < 0) {
+          this.inviteList.push(userItem);
+        }
+      }
+    },
+    // 判断是否已经在邀请列表中
+    judgePersonIsInvited(id) {
+      if (this.inviteNum > 0) {
+        let index = this.inviteList.findIndex((item) => {
+          return item.id === id;
+        });
+        return index;
+      } else {
+        return -1;
+      }
+    },
+    // 判断是否有除自身外其他与会者共享屏幕
+    judgeOtherScreenShare(identity) {
+      if (this.participantNum > 0) {
+        const index = this.participants.findIndex((item) => {
+          return item.isScreenShareEnabled && item.identity !== identity;
+        });
+        return index;
+      } else {
+        return -1;
+      }
+    },
+    // 将消息添加到消息队列
+    addToMessageList(message) {
+      this.messageList.push(message);
+    },
+    // 根据与会者identity返回与会者
+    getUserItemByIdentity(identity) {
+      if (this.participantNum > 0) {
+        const index = this.participants.findIndex((item) => {
+          return item.identity === identity;
+        });
+        if (index > -1) {
+          return this.participants[index];
+        } else {
+          return null;
+        }
+      } else {
+        return null;
+      }
+    },
+    // 返回本地与会者
+    getLocalParticipant() {
+      if (this.participantNum > 0) {
+        const index = this.participants.findIndex((item) => {
+          return item.isLocal;
+        });
+        if (index > -1) {
+          return this.participants[index];
+        } else {
+          return null;
+        }
+      } else {
+        return null;
+      }
+    },
+
+    // 基础方法
+    async cancelMeeting() {
+      if (this.isFullScreen) {
+        this.isDeleteRoom = true;
+        this.leaveRoom();
+      } else {
+        this.$confirm("点击结束会议后会议将被解散，您确定要这么做么？", "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.isDeleteRoom = true;
+            this.leaveRoom();
+          })
+          .catch(() => {
+            void 0;
+          });
+      }
+    },
+
+    openAppointDialog() {
+      if (this.judgeParticipantIsHost(this.localIdentity)) {
+        if (this.participantNum <= 1) {
+          this.cancelMeeting();
+        } else {
+          const index = this.participants.findIndex((participant) => {
+            return (
+              (participant.metadata.platformID == 0 || participant.metadata.platformID == 1) &&
+              participant.identity !== this.localIdentity
+            );
+          });
+          if (index !== -1) {
+            this.appointDialogShow = true;
+          } else {
+            this.$confirm("当前会议没有pc端和app端与会者, 无法指派主持人, 将直接解散会议", "警告", {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning",
+            })
+              .then(() => {
+                this.isDeleteRoom = true;
+                this.leaveRoom();
+              })
+              .catch(() => {
+                void 0;
+              });
+          }
+        }
+      }
+    },
+    initData() {
+      this.participants = [];
+      this.isCameraEnabled = this.tempCameraStatus;
+      this.isMicrophoneEnabled = this.tempMicroStatus;
+      this.isOutputEnabled = this.tempOutputStatus;
+    },
+
+    async getDeviceList() {
+      try {
+        const { audioDevices, videoDevices, outputDevices } = await LiveClient.getDeviceList();
+        this.audioDevicesRef = audioDevices.map((item) => {
+          return {
+            label: item.label,
+            value: item.deviceId,
+          };
+        });
+        this.videoDevicesRef = videoDevices.map((item) => {
+          return {
+            label: item.label,
+            value: item.deviceId,
+          };
+        });
+        this.outputDevicesRef = outputDevices.map((item) => {
+          return {
+            label: item.label,
+            value: item.deviceId,
+          };
+        });
+      } catch (err) {
+        this.showMessage.message("error", "获取设备列表失败");
+      }
+    },
+    // 保存liveClient监听的事件到数组中，方便离开页面时解除绑定
+    addEventToList(eventName) {
+      if (this.pageEventList.indexOf(eventName) < 0) {
+        this.pageEventList.push(eventName);
+      }
+    },
+    clearPageInterval() {
+      if (this.meetingInterval) {
+        clearInterval(this.meetingInterval);
+        this.meetingInterval = null;
+      }
+      if (this.durationInterval) {
+        clearInterval(this.durationInterval);
+        this.durationInterval = null;
+      }
+      if (this.footerInterval) {
+        clearInterval(this.footerInterval);
+        this.footerInterval = null;
+      }
+      if (this.timeInterval) {
+        clearInterval(this.timeInterval);
+        this.timeInterval = null;
+      }
+      if (this.unjoinParticipantInterval) {
+        clearInterval(this.unjoinParticipantInterval);
+        this.unjoinParticipantInterval = null;
+      }
+    },
+    clearAllTrack() {
+      if (this.trackList.length > 0) {
+        this.trackList.forEach((track) => {
+          track?.detach();
+          track?.stop();
+        });
+      }
+    },
+    initLiveClientEvent() {
+      if (!this.liveClient) {
+        this.showMessage.message("error", "liveClient初始化失败");
+        return;
+      }
+      this.liveClient.on("errorAlert", (e) => {
+        console.log("errorAlert", e);
+        this.addEventToList("errorAlert");
+        if (e.severity == "high" || e.severity == "critical") {
+          if (e?.context?.originalMessage == "could not establish pc connection") {
+            this.showMessage.message("error", "无法建立连接，请检查udp端口是否启用");
+          } else {
+            this.showMessage.message("error", e.message);
+          }
+        }
+      });
+      this.liveClient.on("roomCreatedSuccess", async (e) => {
+        this.addEventToList("roomCreatedSuccess");
+        this.showMessage.message("success", "会议房间创建成功");
+        this.meetingNum = e;
+        await this.joinRoom();
+      });
+      this.liveClient.on("joinRoomError", (e) => {
+        this.addEventToList("joinRoomError");
+        console.error("加入房间失败", e.message);
+        this.$emit("meetingEnd");
+        if (e.message.includes("unknown websocket error")) {
+          this.showMessage.message("error", `加入房间失败: 请检查会议内websocket连接是否正常`);
+        } else if (e.message.includes("could not establish pc connection")) {
+          this.showMessage.message("error", `加入房间失败: 请检查udp端口是否启用`);
+        } else {
+          this.showMessage.message("error", `加入房间失败: ${e.message}`);
+        }
+      });
+      this.liveClient.on("roomMetadataChanged", (e) => {
+        const metadata = JSON.parse(e);
+        this.roomMetadataChange(metadata);
+      });
+      this.liveClient.on("roomDataReceived", (e) => {
+        this.addEventToList("roomDataReceived");
+        console.log("roomDataReceived", e);
+        this.handleRoomDataReceived(e);
+      });
+      this.liveClient.on("participantDataReceived", (e) => {
+        this.addEventToList("participantDataReceived");
+        console.log("participantDataReceived", e);
+      });
+      this.liveClient.on("roomConnected", async (e) => {
+        this.addEventToList("roomConnected");
+        if (this.liveClient.room) {
+          const metadata = JSON.parse(this.liveClient.room.metadata);
+          // 初始化部分会议信息
+          this.initRoomMetadata(metadata);
+        }
+        if (this.userData?.username) {
+          // 如果用户已经登录，则将入会名称修改为用户名
+          this.liveClient.updateParticipantName(this.userData.userId, this.userData.username);
+        }
+        this.meetingInterval = setInterval(() => {
+          this.meetingTTL = navigator.connection.rtt;
+        }, 1000);
+        console.log("joinType", this.joinType);
+        // 判断当前是发起者还是加入者，是发起者则发送邀请信息
+        this.$emit("meetingStart");
+        if (this.joinType == "launch") {
+          // 发送邀请信息
+          this.sendInviteMessage([], this.defaultInviteWay == "mini" ? 3 : 0);
+          // 拉取监控设备
+          this.deviceNum > 0 &&
+            this.deviceList.forEach((item) => {
+              if (item.source == "监控") {
+                this.pullMonitorDevice(item.monitorID, item.label);
+              } else if (item.source == "设备") {
+                this.pullMonitorDevice(item.equipmentID, item.label);
+              }
+            });
+        }
+        // 启动获取未入会和邀请人员轮询
+        this.startUnjoinParticipantPolling();
+      });
+      this.liveClient.on("roomDisconnected", () => {
+        this.addEventToList("roomDisconnected");
+        this.showMessage.message("info", "房间链接已断开");
+        this.$emit("meetingEnd");
+        this.stopUnjoinParticipantPolling();
+        this.clearPageInterval();
+        this.clearAllTrack();
+        if (this.isDeleteRoom) {
+          this.liveClient
+            .deleteRoom(this.meetingNum)
+            .then((res) => {
+              if (res.code == 200) {
+                this.exitPage();
+              } else {
+                this.showMessage.message("error", "删除会议失败");
+              }
+            })
+            .catch((err) => {
+              this.showMessage.message("error", "删除会议失败");
+              this.exitPage();
+            });
+        } else {
+          this.exitPage();
+        }
+      });
+      this.liveClient.on("localCameraChange", (e) => {
+        this.addEventToList("localCameraChange");
+        this.isCameraEnabled = e;
+        if (this.isCameraEnabled) {
+          this.showMessage.message("success", "摄像头已开启");
+        } else {
+          this.showMessage.message("success", "摄像头已关闭");
+        }
+      });
+      this.liveClient.on("localMicrophoneChange", (e) => {
+        this.addEventToList("localMicrophoneChange");
+        this.isMicrophoneEnabled = e;
+        if (this.isMicrophoneEnabled) {
+          this.showMessage.message("success", "麦克风已开启");
+        } else {
+          this.showMessage.message("success", "麦克风已关闭");
+        }
+      });
+      this.liveClient.on("localScreenShareChange", (e) => {
+        this.addEventToList("localScreenShareChange");
+        this.isScreenShareEnabled = e;
+        if (this.isScreenShareEnabled) {
+          this.showMessage.message("success", "屏幕共享已开启");
+        } else {
+          this.showMessage.message("success", "屏幕共享已关闭");
+        }
+      });
+      this.liveClient.on("startRecording", (e) => {
+        this.addEventToList("startRecording");
+        this.isRecording = true;
+        this.recordStreamUrl = e;
+        this.showMessage.message("success", "开始录制");
+      });
+      this.liveClient.on("stopRecording", (e) => {
+        this.addEventToList("stopRecording");
+        this.isRecording = false;
+        this.showMessage.message("success", "结束录制");
+      });
+      this.liveClient.on("mediaDeviceChange", (e) => {
+        this.addEventToList("mediaDeviceChange");
+        // showMessage.message("success", "设备切换成功");
+        console.log("设备类型" + e.kind, e.deviceId);
+        if (e.kind == "audioinput") {
+          this.activeDevice.audioInputDevice = e.deviceId;
+        } else if (e.kind == "videoinput") {
+          this.activeDevice.videoDevice = e.deviceId;
+        } else {
+          this.activeDevice.audioOutputDevice = e.deviceId;
+        }
+      });
+      this.liveClient.on("videoCallRender", (e) => {
+        this.addEventToList("videoCallRender");
+        this.renderVideoItem(e);
+      });
+      this.liveClient.on("activeSpeakerChange", (e) => {
+        this.addEventToList("activeSpeakerChange");
+        if (e.length > 0) {
+          let maxAudioLevel = 0,
+            maxAudioLevelIndex = -1;
+          e.forEach((speaker, index) => {
+            if (speaker.audioLevel > maxAudioLevel) {
+              maxAudioLevel = speaker.audioLevel;
+              maxAudioLevelIndex = index;
+            }
+          });
+          if (maxAudioLevelIndex >= 0) {
+            this.switchActiveSpeakerToFirst(e[maxAudioLevelIndex]);
+          }
+        }
+      });
+    },
+    handleRoomDataReceived(e) {
+      switch (e.topic) {
+        case "MsgEvent":
+          // 聊天消息
+          this.handleChatMessage(e);
+          break;
+        case "MuteEvent":
+          //  麦克风/摄像头/置聋/禁言消息
+          this.handleMuteMessage(e);
+          break;
+        case "UpdateNameEvent":
+          // 更新名称消息
+          this.handleUpdateNameMessage(e);
+          break;
+        case "HostEvent":
+          // 主持人/联席主持人消息
+          this.handleHostMessage(e);
+          break;
+        default:
+          break;
+      }
+    },
+    handleUpdateNameMessage(e) {
+      const message = JSON.parse(this.liveClient.decodeMessage(e.data));
+      console.log("更新名称消息", message);
+
+      if (message.operationSource === "1") {
+        this.showMessage.message("info", "主持人将您的名称更新为" + message.Name);
+      } else if (message.operationSource === "2") {
+        this.showMessage.message("info", "联席主持人将您的名称更新为" + message.Name);
+      }
+    },
+    handleHostMessage(e) {
+      const message = JSON.parse(this.liveClient.decodeMessage(e.data));
+      console.log("主持人/联席主持人消息", message);
+
+      const operationMessages = {
+        1: {
+          // 主持人
+          1: "您被设为主持人",
+          2: "您被移除主持人",
+        },
+        2: {
+          // 联席主持人
+          1: "您被设为联席主持人",
+          2: "您被移除联席主持人",
+        },
+      };
+
+      const messageText = operationMessages[message.input]?.[message.operationType];
+
+      if (messageText) {
+        this.showMessage.message("info", messageText);
+      }
+    },
+
+    handleChatMessage(e) {
+      const message = JSON.parse(this.liveClient.decodeMessage(e.data));
+      // message.timestamp = dayjs().format("HH:mm");
+      const messageHandled = {
+        origin: message.sendID,
+        fromName: message.senderNickname,
+        content: message.contentType == 1 ? message.content.content : message.content.sourcePath,
+        contentType: message.contentType,
+        timestamp: dayjs(new Date(message.sendTime)).format("HH:mm"),
+        srcList: message.contentType == 2 ? [message.content.sourcePath] : [],
+      };
+      console.log("聊天消息", messageHandled);
+      this.addToMessageList(messageHandled);
+    },
+    handleMuteMessage(e) {
+      const message = JSON.parse(this.liveClient.decodeMessage(e.data));
+      console.log("麦克风/摄像头/置聋/禁言消息", message);
+      // 定义操作类型和输入类型的映射
+      const operationMessages = {
+        1: {
+          // 主持人
+          1: {
+            // 请求打开
+            1: "主持人请求打开您的麦克风",
+            2: "主持人请求打开您的摄像头",
+            3: "主持人将您取消置聋",
+            4: "主持人将您取消禁言",
+          },
+          2: {
+            // 关闭
+            1: "主持人关闭您的麦克风",
+            2: "主持人关闭您的摄像头",
+            3: "主持人将您置聋",
+            4: "主持人将您禁言",
+          },
+        },
+        2: {
+          // 联席主持人
+          1: {
+            // 请求打开
+            1: "联席主持人请求打开您的麦克风",
+            2: "联席主持人请求打开您的摄像头",
+            3: "联席主持人将您取消置聋",
+            4: "联席主持人将您取消禁言",
+          },
+          2: {
+            // 关闭
+            1: "联席主持人关闭您的麦克风",
+            2: "联席主持人关闭您的摄像头",
+            3: "联席主持人将您置聋",
+            4: "联席主持人将您禁言",
+          },
+        },
+      };
+
+      const messageText =
+        operationMessages[message.operationSource]?.[message.operationType]?.[message.input];
+
+      if (messageText) {
+        this.showMessage.message("info", messageText);
+      }
+    },
+    async initRoomMetadata(metadata) {
+      console.log("roomMetadata", metadata);
+
+      // 标记为初始化状态
+      this.isInitializing = true;
+
+      await this.batchUpdateStates(async () => {
+        this.meetingName = metadata.roomTheme;
+        this.meetingHost = {
+          ownerId: metadata.ownerID,
+          ownerName: metadata?.ownerName ?? "暂无",
+        };
+
+        if (metadata.coHosts && metadata.coHosts.length > 0) {
+          this.meetingCoHost = metadata.coHosts.map((item) => {
+            return {
+              coHostId: item.coHostID,
+            };
+          });
+        } else {
+          this.meetingCoHost = [];
+        }
+
+        this.roomMetadata = metadata;
+
+        // 批量设置关键状态
+        const newHostIdentity = this.meetingHost.ownerId;
+        const newBlurIdentity = metadata.blurID;
+        const newLayout = metadata.frontLayout || "grid";
+        const newMode = metadata.roomMode || "normal";
+
+        // 记录变化，但先不触发watch
+        const changes = {
+          host: { old: this.curHostIdentity, new: newHostIdentity },
+          blur: { old: this.curBlurIdentity, new: newBlurIdentity },
+          layout: { old: this.currentLayout, new: newLayout },
+          mode: { old: this.currentRoomMode, new: newMode },
+        };
+
+        // 如果是加入会议，在设置新值前等待renderVideoItem首次渲染完成
+        if (this.joinType !== "launch") {
+          console.log("加入会议模式：动态等待renderVideoItem首次渲染完成，然后设置关键状态");
+          await this.waitForParticipantsRender();
+        }
+
+        // 设置新值
+        this.curHostIdentity = newHostIdentity;
+        this.curBlurIdentity = newBlurIdentity;
+        this.currentLayout = newLayout;
+        this.currentRoomMode = newMode;
+
+        // 添加需要的DOM操作到队列
+        if (changes.mode.old !== changes.mode.new) {
+          this.addDOMOperation("mode", () => this.executeModeChange(changes.mode.new));
+        }
+
+        if (changes.layout.old !== changes.layout.new) {
+          this.addDOMOperation("layout", () =>
+            this.executeLayoutChange(changes.layout.new, changes.layout.old)
+          );
+        }
+
+        if (changes.host.old !== changes.host.new) {
+          this.addDOMOperation("host", () =>
+            this.executeHostChange(changes.host.new, changes.host.old)
+          );
+        }
+
+        if (changes.blur.old !== changes.blur.new) {
+          this.addDOMOperation("blur", () =>
+            this.executeBlurChange(changes.blur.new, changes.blur.old)
+          );
+        }
+      });
+
+      this.isInitializing = false;
+      this.initRoomDuration(metadata);
+    },
+    async roomMetadataChange(metadata) {
+      console.log("roomMetadataChange", metadata);
+
+      await this.batchUpdateStates(async () => {
+        this.meetingName = metadata.roomTheme;
+        this.meetingHost = {
+          ownerId: metadata.ownerID,
+          ownerName: metadata?.ownerName ?? "暂无",
+        };
+
+        if (metadata.coHosts && metadata.coHosts.length > 0) {
+          this.meetingCoHost = metadata.coHosts.map((item) => {
+            return {
+              coHostId: item.coHostID,
+            };
+          });
+        } else {
+          this.meetingCoHost = [];
+        }
+
+        this.roomMetadata = metadata;
+
+        // 批量设置关键状态
+        const newHostIdentity = this.meetingHost.ownerId;
+        const newBlurIdentity = metadata.blurID;
+        const newLayout = metadata.frontLayout || "grid";
+        const newMode = metadata.roomMode || "normal";
+
+        // 记录变化
+        const changes = {
+          host: { old: this.curHostIdentity, new: newHostIdentity },
+          blur: { old: this.curBlurIdentity, new: newBlurIdentity },
+          layout: { old: this.currentLayout, new: newLayout },
+          mode: { old: this.currentRoomMode, new: newMode },
+        };
+
+        // 设置新值
+        this.curHostIdentity = newHostIdentity;
+        this.curBlurIdentity = newBlurIdentity;
+        this.currentLayout = newLayout;
+        this.currentRoomMode = newMode;
+
+        // 添加需要的DOM操作到队列
+        if (changes.mode.old !== changes.mode.new) {
+          this.addDOMOperation("mode", () => this.executeModeChange(changes.mode.new));
+        }
+
+        if (changes.layout.old !== changes.layout.new) {
+          this.addDOMOperation("layout", () =>
+            this.executeLayoutChange(changes.layout.new, changes.layout.old)
+          );
+        }
+
+        if (changes.host.old !== changes.host.new) {
+          this.addDOMOperation("host", () =>
+            this.executeHostChange(changes.host.new, changes.host.old)
+          );
+        }
+
+        if (changes.blur.old !== changes.blur.new) {
+          this.addDOMOperation("blur", () =>
+            this.executeBlurChange(changes.blur.new, changes.blur.old)
+          );
+        }
+      });
+
+      this.initRoomDuration(metadata);
+    },
+    initRoomDuration(metadata) {
+      if (this.isDurationCalc) {
+        if (this.durationInterval) {
+          clearInterval(this.durationInterval);
+          this.durationInterval = null;
+        }
+        this.durationInterval = setInterval(() => {
+          if (new Date(metadata.roomStartTime).getTime() > 0) {
+            this.duration = Math.floor(
+              (Date.now() - new Date(metadata.roomStartTime).getTime()) / 1000
+            );
+            this.isDurationCalc = false;
+          } else {
+            this.duration++;
+          }
+        }, 1000);
+      }
+    },
+    startUnjoinParticipantPolling() {
+      // 先清除可能存在的定时器
+      if (this.unjoinParticipantInterval) {
+        clearInterval(this.unjoinParticipantInterval);
+        this.unjoinParticipantInterval = null;
+      }
+
+      // 立即执行一次
+      this.getUnjoinParticipant();
+      this.queryAllInviteParticipant();
+      // 设置5秒间隔的轮询
+      this.unjoinParticipantInterval = setInterval(() => {
+        this.getUnjoinParticipant();
+        this.queryAllInviteParticipant();
+      }, 6000);
+    },
+    initLiveClient() {
+      this.liveClient = window["liveClient"];
+      this.initLiveClientEvent();
+    },
+    sendInviteMessage(tempList = [], inviteWay = 0) {
+      if (tempList.length <= 0) {
+        if (this.tempInviteList.length > 0) {
+          this.liveClient
+            .inviteParticipant(
+              this.meetingNum,
+              this.tempInviteList.map((item) => {
+                return {
+                  userName: item.label,
+                  identity: item?.loginCode ? item.loginCode : item.phone,
+                  phone: item.phone,
+                };
+              }),
+              false,
+              inviteWay
+            )
+            .then((res) => {
+              if (res.code == 200) {
+                this.showMessage.message("success", "成功发送邀请");
+                this.tempInviteList.forEach((item) => {
+                  this.addToInviteList(item);
+                });
+                this.getUnjoinParticipant();
+                this.queryAllInviteParticipant();
+              } else {
+                this.showMessage.message("error", res?.msg);
+              }
+            });
+        }
+      } else {
+        this.liveClient
+          .inviteParticipant(
+            this.meetingNum,
+            tempList.map((item) => {
+              return {
+                userName: item.label,
+                identity: item?.loginCode ? item.loginCode : item.phone,
+                phone: item.phone,
+              };
+            }),
+            false,
+            inviteWay
+          )
+          .then((res) => {
+            if (res.code == 200) {
+              this.showMessage.message("success", "成功发送邀请");
+              this.getUnjoinParticipant();
+              this.queryAllInviteParticipant();
+            } else {
+              this.showMessage.message("error", res?.msg);
+            }
+          });
+      }
+    },
+    queryAllInviteParticipant() {
+      this.liveClient.getAllInviteParticipant(this.meetingNum).then((res) => {
+        if (res.code == 200) {
+          this.tempInvitedList = res?.data || [];
+        } else {
+          this.showMessage.message("error", res?.msg);
+        }
+      });
+    },
+    async createRoom() {
+      if (!this.liveClient) {
+        return;
+      }
+      await this.liveClient.createRoom();
+    },
+
+    async joinRoom() {
+      let joinParam = {
+        echoCancellation: true,
+        noiseSuppression: true,
+        roomNum: this.meetingNum,
+        cameraStatus: this.isCameraEnabled,
+        microphoneStatus: this.isMicrophoneEnabled,
+        audioDeviceId: this.activeDevice.audioInputDevice,
+        videoDeviceId: this.activeDevice.videoDevice,
+        outputDeviceId: this.activeDevice.audioOutputDevice,
+      };
+      let tempActiveDevice = null;
+      try {
+        tempActiveDevice = await this.liveClient.joinRoom(joinParam);
+        if (this.activeDevice) {
+          this.activeDevice.audioInputDevice = tempActiveDevice?.audioInputDevice;
+          this.activeDevice.audioOutputDevice = tempActiveDevice?.audioOutputDevice;
+          this.activeDevice.videoDevice = tempActiveDevice?.videoInputDevice;
+          console.log("activeDevice:", this.activeDevice);
+        }
+      } catch (e) {
+        console.error("加入会议失败", e);
+      }
+    },
+    switchActiveSpeakerToFirst(speaker) {
+      if (speaker && speaker?.identity) {
+        const speakerElm = document.getElementById(`participant-${speaker.identity}`);
+        if (speakerElm) {
+          if (this.currentRoomMode === "pointTurn") {
+            // 当前为点调模式
+            if (
+              !(
+                speaker.identity === this.curHostIdentity ||
+                speaker.identity === this.curBlurIdentity
+              )
+            ) {
+              // 仅当讲话人不为当前主持人和焦点用户时切换
+              const pointTurnTop = document.querySelector("#room .point-turn-top");
+              const pointTurnBottom = document.querySelector("#room .point-turn-bottom");
+              const pointTurnOther = document.querySelector("#room .point-turn-other");
+              if (!pointTurnTop) {
+                return;
+              }
+              if (!pointTurnBottom) {
+                return;
+              }
+              if (!pointTurnOther) {
+                return;
+              }
+              if (speakerElm.parentElement) {
+                if (speakerElm.parentElement.className === "point-turn-top") {
+                  if (speakerElm.id === pointTurnTop.firstElementChild.id) {
+                    return;
+                  }
+                  pointTurnTop.insertBefore(speakerElm, pointTurnTop.firstChild ?? null);
+                } else if (speakerElm.parentElement.className === "point-turn-bottom") {
+                  if (document.querySelectorAll(".point-turn-top .participant").length >= 5) {
+                    pointTurnOther.insertBefore(
+                      pointTurnTop.lastElementChild,
+                      pointTurnOther.firstChild ?? null
+                    );
+                    pointTurnTop.insertBefore(speakerElm, pointTurnTop.firstChild ?? null);
+                    pointTurnBottom.insertBefore(
+                      pointTurnOther.firstChild,
+                      pointTurnBottom.firstChild ?? null
+                    );
+                  }
+                } else {
+                  if (document.querySelectorAll(".point-turn-top .participant").length >= 5) {
+                    if (document.querySelectorAll(".point-turn-bottom .participant").length >= 5) {
+                      pointTurnOther.insertBefore(
+                        pointTurnBottom.lastElementChild,
+                        pointTurnOther.firstChild ?? null
+                      );
+                      pointTurnBottom.insertBefore(
+                        pointTurnTop.lastElementChild,
+                        pointTurnBottom.firstChild ?? null
+                      );
+                      pointTurnTop.insertBefore(speakerElm, pointTurnTop.firstChild ?? null);
+                    }
+                  }
+                }
+              }
+            }
+          } else {
+            const container = document.getElementById("room");
+            if (this.currentLayout === "grid") {
+              // 当前为会议模式的常规布局
+              if (speakerElm.id === container.firstElementChild.id) {
+                return;
+              } else {
+                container.insertBefore(speakerElm, container.firstChild ?? null);
+              }
+            } else if (this.currentLayout === "rightSide") {
+              // 当前为会议模式的焦点布局
+              const layoutRightSideEle = document.querySelector("#room .layout-rightside");
+              const layoutLeftSideEle = document.querySelector("#room .layout-leftside");
+              if (!layoutLeftSideEle) {
+                return;
+              }
+              if (!layoutRightSideEle) {
+                return;
+              }
+              if (speaker.identity !== this.curBlurIdentity) {
+                if (
+                  speakerElm.id === layoutLeftSideEle.firstElementChild.id ||
+                  speakerElm.id === layoutRightSideEle.firstElementChild.id
+                ) {
+                  return;
+                } else {
+                  layoutRightSideEle.insertBefore(
+                    speakerElm,
+                    layoutRightSideEle.firstElementChild ?? null
+                  );
+                }
+              }
+            }
+          }
+        }
+      } else {
+        return;
+      }
+    },
+    constructParticipantDom(videoItem) {
+      let videoDom = document.createElement("div");
+      videoDom.id = `participant-${videoItem.identity}`;
+      videoDom.className = videoItem.isLocal ? "participant local" : "participant";
+      if (videoItem.isScreenShareEnabled) {
+        videoDom.innerHTML = `
+          <video id="video-${
+            videoItem.identity
+          }" class="p-video" autoplay webkit-playsinline playsinline x5-video-player-type="h5"></video>
+          <div id="screenshare-${videoItem.identity}" class="screen-share-suspension">
+            ${videoItem.name} 正在共享屏幕
+          </div>
+          <div class="describe">
+            <div id="microphone-${videoItem.identity}" class="microphone"></div>
+            <div id="${videoItem.identity}" class="identity">${
+          videoItem.isLocal ? videoItem.name + "(我)" : videoItem.name
+        }</div>
+          </div>
+        `;
+      } else if (videoItem.isCameraEnabled) {
+        videoDom.innerHTML = `
+          <video id="video-${
+            videoItem.identity
+          }" class="p-video" autoplay webkit-playsinline playsinline x5-video-player-type="h5"></video>
+          <div id="signal-${videoItem.identity}" class="signal-icon signal-icon-good"></div>
+          <div id="more-${videoItem.identity}" class="more-icon"></div>
+          <div class="describe">
+            <div id="microphone-${videoItem.identity}" class="microphone"></div>
+            <div id="${videoItem.identity}" class="identity">${
+          videoItem.isLocal ? videoItem.name + "(我)" : videoItem.name
+        }</div>
+          </div>
+        `;
+      } else {
+        videoDom.innerHTML = `
+          <video id="video-${
+            videoItem.identity
+          }" class="p-video" autoplay webkit-playsinline playsinline x5-video-player-type="h5"></video>
+          <div id="board-${videoItem.identity}" class="board">
+            <div class="board-icon"></div>
+          </div>
+          <div id="signal-${videoItem.identity}" class="signal-icon signal-icon-good"></div>
+          <div id="more-${videoItem.identity}" class="more-icon"></div>
+          <div class="describe">
+            <div id="microphone-${videoItem.identity}" class="microphone"></div>
+            <div id="${videoItem.identity}" class="identity">${
+          videoItem.isLocal ? videoItem.name + "(我)" : videoItem.name
+        }</div>
+          </div>
+        `;
+      }
+      return videoDom;
+    },
+    constructRoomLayout(container, videoDiv, videoItem) {
+      if (this.currentRoomMode === "pointTurn") {
+        // 点调模式下用户第一次入会
+        let pointTurnTop = document.querySelector("#room .point-turn-top");
+        let pointTurnCenter = document.querySelector("#room .point-turn-center");
+        let pointTurnBottom = document.querySelector("#room .point-turn-bottom");
+        let pointTurnOther = document.querySelector("#room .point-turn-other");
+        if (!pointTurnTop) {
+          pointTurnTop = document.createElement("div");
+          pointTurnTop.className = "point-turn-top";
+          container.insertBefore(pointTurnTop, container.firstChild ?? null);
+        }
+        if (!pointTurnCenter) {
+          pointTurnCenter = document.createElement("div");
+          pointTurnCenter.className = "point-turn-center";
+          container.appendChild(pointTurnCenter);
+        }
+        if (!pointTurnBottom) {
+          pointTurnBottom = document.createElement("div");
+          pointTurnBottom.className = "point-turn-bottom";
+          container.appendChild(pointTurnBottom);
+        }
+        if (!pointTurnOther) {
+          pointTurnOther = document.createElement("div");
+          pointTurnOther.className = "point-turn-other";
+          container.appendChild(pointTurnOther);
+        }
+        if (this.curHostIdentity === videoItem.identity) {
+          // 作为主持人入会
+          if (pointTurnCenter.hasChildNodes()) {
+            let placeHolderElms = document.querySelectorAll(".point-turn-center .participant");
+            if (placeHolderElms.length > 0) {
+              if (placeHolderElms.length === 1) {
+                pointTurnCenter.insertBefore(videoDiv, pointTurnCenter.firstChild ?? null);
+              } else {
+                if (!placeHolderElms[0].id) {
+                  pointTurnCenter.removeChild(placeHolderElms[0]);
+                  pointTurnCenter.insertBefore(videoDiv, pointTurnCenter.firstChild ?? null);
+                } else {
+                  if (document.querySelectorAll(".point-turn-top .participant").length >= 5) {
+                    if (document.querySelectorAll(".point-turn-bottom .participant").length >= 5) {
+                      pointTurnOther.appendChild(placeHolderElms[0]);
+                    } else {
+                      pointTurnBottom.appendChild(placeHolderElms[0]);
+                    }
+                  } else {
+                    pointTurnTop.appendChild(placeHolderElms[0]);
+                  }
+                  pointTurnCenter.insertBefore(videoDiv, pointTurnCenter.firstChild ?? null);
+                }
+              }
+            } else {
+              pointTurnCenter.insertBefore(videoDiv, pointTurnCenter.firstChild ?? null);
+            }
+          } else {
+            pointTurnCenter.appendChild(videoDiv);
+          }
+        } else if (this.curBlurIdentity === videoItem.identity) {
+          // 作为焦点视频用户入会
+          if (pointTurnCenter.hasChildNodes()) {
+            let placeHolderElms = document.querySelectorAll(".point-turn-center .participant");
+            if (placeHolderElms.length > 0) {
+              if (placeHolderElms.length === 1) {
+                pointTurnCenter.appendChild(videoDiv);
+              } else {
+                if (!placeHolderElms[1].id) {
+                  pointTurnCenter.removeChild(placeHolderElms[1]);
+                  pointTurnCenter.appendChild(videoDiv);
+                } else {
+                  if (document.querySelectorAll(".point-turn-top .participant").length >= 5) {
+                    if (document.querySelectorAll(".point-turn-bottom .participant").length >= 5) {
+                      pointTurnOther.appendChild(placeHolderElms[1]);
+                    } else {
+                      pointTurnBottom.appendChild(placeHolderElms[1]);
+                    }
+                  } else {
+                    pointTurnTop.appendChild(placeHolderElms[1]);
+                  }
+                  pointTurnCenter.appendChild(videoDiv);
+                }
+              }
+            } else {
+              pointTurnCenter.appendChild(videoDiv);
+            }
+          } else {
+            pointTurnCenter.appendChild(videoDiv);
+          }
+        } else {
+          // 作为普通与会者入会
+          if (document.querySelectorAll(".point-turn-top .participant").length >= 5) {
+            if (document.querySelectorAll(".point-turn-bottom .participant").length >= 5) {
+              pointTurnOther.appendChild(videoDiv);
+            } else {
+              pointTurnBottom.appendChild(videoDiv);
+            }
+          } else {
+            pointTurnTop.appendChild(videoDiv);
+          }
+        }
+      } else {
+        if (this.currentLayout === "grid") {
+          // 宫格布局
+          if (videoItem.isLocal) {
+            // 本地与会者插入到最前面
+            container.insertBefore(videoDiv, container.firstChild ?? null);
+          } else {
+            container.appendChild(videoDiv);
+          }
+        } else if (this.currentLayout === "rightSide") {
+          // 右侧边栏布局
+          // 1、初始化左右侧外层元素
+          let layoutRightSideEle = document.querySelector("#room .layout-rightside");
+          let layoutLeftSideEle = document.querySelector("#room .layout-leftside");
+          if (!layoutLeftSideEle) {
+            layoutLeftSideEle = document.createElement("div");
+            layoutLeftSideEle.className = "layout-leftside";
+            container.insertBefore(layoutLeftSideEle, container.firstChild ?? null);
+          }
+          if (!layoutRightSideEle) {
+            layoutRightSideEle = document.createElement("div");
+            layoutRightSideEle.className = "layout-rightside";
+            container.appendChild(layoutRightSideEle);
+          }
+          // 2、添加元素到左右侧外层元素
+          if (this.curBlurIdentity && this.curBlurIdentity === videoItem.identity) {
+            if (layoutLeftSideEle.hasChildNodes()) {
+              layoutRightSideEle.insertBefore(
+                layoutLeftSideEle.firstChild,
+                layoutRightSideEle.firstChild ?? null
+              );
+              layoutLeftSideEle.appendChild(videoDiv);
+            }
+          } else {
+            if (videoItem.isLocal) {
+              if (layoutLeftSideEle.hasChildNodes()) {
+                layoutRightSideEle.insertBefore(
+                  layoutLeftSideEle.firstChild,
+                  layoutRightSideEle.firstChild ?? null
+                );
+              }
+              layoutLeftSideEle.appendChild(videoDiv);
+            } else {
+              layoutRightSideEle.appendChild(videoDiv);
+            }
+          }
+        }
+      }
+      return container;
+    },
+    renderVideoItem(videoItem) {
+      console.log(`与会者渲染 ${videoItem.identity}`, videoItem);
+      // 是否本人
+      if (videoItem.isLocal) {
+        this.localIdentity = videoItem.identity;
+        this.localName = videoItem.name;
+        this.localMetadata = videoItem.metadata;
+        this.isCameraEnabled = videoItem.isCameraEnabled;
+        this.isMicrophoneEnabled = videoItem.isMicrophoneEnabled;
+        this.isScreenShareEnabled = videoItem.isScreenShareEnabled;
+      }
+      let container = document.getElementById("room");
+      if (!container) {
+        this.showMessage.message("error", "会议容器不存在");
+        return;
+      }
+      let videoDiv = document.getElementById(`participant-${videoItem.identity}`);
+      // 当与会者第一次入会
+      if (!videoDiv && !videoItem.remove) {
+        // 构建与会者dom元素
+        videoDiv = this.constructParticipantDom(videoItem);
+        // 构建会议室布局
+        container = this.constructRoomLayout(container, videoDiv, videoItem);
+        // 添加到participant数组
+        this.addToParticipantList(videoItem);
+      }
+      // 与会者状态变更
+      // 视频元素
+      let videoElm = document.getElementById(`video-${videoItem.identity}`);
+      // 摄像头关闭后展板元素
+      let boardElm = document.getElementById(`board-${videoItem.identity}`);
+      // 底部麦克风图标元素
+      let microElm = document.getElementById(`microphone-${videoItem.identity}`);
+      // 与会者网络状态图标元素
+      let signalElm = document.getElementById(`signal-${videoItem.identity}`);
+      // 与会者更多操作按钮元素
+      let moreElm = document.getElementById(`more-${videoItem.identity}`);
+      // 声明麦克风按钮点击事件回调
+      const unableMicrophone = () => {
+        this.liveClient.changeParticipantMicrophoneStatus(videoItem.identity, true);
+      };
+      const enableMicrophone = () => {
+        this.liveClient.changeParticipantMicrophoneStatus(videoItem.identity, false);
+      };
+      // 声明与会者元素鼠标事件回调
+      const signalAndMoreShow = () => {
+        // 每次执行时重新获取最新的元素
+        const currentSignalElm = document.getElementById(`signal-${videoItem.identity}`);
+        const currentMoreElm = document.getElementById(`more-${videoItem.identity}`);
+        currentSignalElm && (currentSignalElm.style.visibility = "visible");
+        currentMoreElm && (currentMoreElm.style.visibility = "visible");
+      };
+      const signalAndMoreHide = () => {
+        // 每次执行时重新获取最新的元素
+        const currentSignalElm = document.getElementById(`signal-${videoItem.identity}`);
+        const currentMoreElm = document.getElementById(`more-${videoItem.identity}`);
+        currentSignalElm && (currentSignalElm.style.visibility = "hidden");
+        currentMoreElm && (currentMoreElm.style.visibility = "hidden");
+      };
+      // 声明操作按钮元素点击事件回调
+      const moreElmClick = (event) => {
+        // 动态计算选项数量以获得精确的弹窗高度
+        const optionCount = this.getOptionCount(videoItem.identity);
+
+        // 使用工具函数计算弹窗位置（使用真实的MoreOptionDialog尺寸）
+        this.optionDialogOffset = this.calculateDialogPosition(event, {
+          dialogWidth: 130,
+          dialogHeight: 350, // 备用高度
+          optionCount: optionCount, // 动态计算精确高度
+          preferredPosition: "bottom-left",
+        });
+
+        if (this.optionIdentity === videoItem.identity && this.moreDialogShow) {
+          this.moreDialogShow = false;
+        } else {
+          this.moreDialogShow = false;
+          this.optionIdentity = videoItem.identity;
+          this.moreDialogShow = true;
+        }
+      };
+      // 为麦克风元素绑定事件
+      if (microElm && videoItem.isMicrophoneEnabled) {
+        microElm.className = "microphone microphone-active";
+        microElm.onclick = unableMicrophone;
+      } else if (microElm && !videoItem.isMicrophoneEnabled) {
+        microElm.className = "microphone microphone-inactive";
+        microElm.onclick = enableMicrophone;
+      }
+      // 为与会者元素绑定事件
+      if (videoDiv) {
+        videoDiv.onmouseenter = signalAndMoreShow;
+        videoDiv.onmouseleave = signalAndMoreHide;
+      }
+      // 根据视频宽高比设定元素样式
+      // if(videoItem?.dimensions) {
+      //   const { width, height } = videoItem.dimensions;
+      //   const ratio = width / height;
+      //   if(ratio > (1 / 1) && videoItem?.source == "camera") {
+      //     videoElm && (videoElm.style.objectFit = "cover");
+      //   } else {
+      //     videoElm && (videoElm.style.objectFit = "contain");
+      //   }
+      // }
+      // 为操作按钮元素绑定事件
+      if (moreElm) {
+        moreElm.onclick = moreElmClick;
+      }
+      if (signalElm) {
+        if (videoItem.connectionQuality === "excellent" || videoItem.connectionQuality === "good") {
+          signalElm.className = "signal-icon signal-icon-good";
+        } else {
+          signalElm.className = "signal-icon signal-icon-poor";
+        }
+      }
+      let screenShareElm = document.getElementById(`screenshare-${videoItem.identity}`);
+      // 与会者dom元素内部样式重新渲染（摄像头或屏幕共享切换后）
+      if (videoItem.isScreenShareEnabled) {
+        if (!screenShareElm) {
+          screenShareElm = document.createElement("div");
+          screenShareElm.id = `screenshare-${videoItem.identity}`;
+          screenShareElm.className = "screen-share-suspension";
+          screenShareElm.innerHTML = `${videoItem.name} 正在共享屏幕`;
+          videoDiv.appendChild(screenShareElm);
+        }
+        if (boardElm) {
+          // 之前为关闭摄像头状态，此时需要移除board元素
+          videoDiv.removeChild(boardElm);
+          boardElm = null;
+        }
+        // 去除信号图标元素和操作按钮元素
+        if (signalElm) {
+          videoDiv.removeChild(signalElm);
+          signalElm = null;
+        }
+        if (moreElm) {
+          videoDiv.removeChild(moreElm);
+          moreElm = null;
+        }
+      } else if (videoItem.isCameraEnabled) {
+        if (screenShareElm) {
+          // 之前为屏幕共享状态，此时需要移除screenshare元素
+          videoDiv.removeChild(screenShareElm);
+          screenShareElm = null;
+        }
+        if (boardElm) {
+          // 之前为关闭摄像头状态，此时需要移除board元素
+          videoDiv.removeChild(boardElm);
+          boardElm = null;
+        }
+        if (!signalElm) {
+          // 构建信号图标元素
+          signalElm = document.createElement("div");
+          signalElm.id = `signal-${videoItem.identity}`;
+          if (
+            videoItem.connectionQuality === "excellent" ||
+            videoItem.connectionQuality === "good"
+          ) {
+            signalElm.className = "signal-icon signal-icon-good";
+          } else {
+            signalElm.className = "signal-icon signal-icon-poor";
+          }
+          videoDiv.appendChild(signalElm);
+        }
+        // if (!moreElm) {
+        //   // 构建更多操作按钮元素
+        //   moreElm = document.createElement("div");
+        //   moreElm.id = `more-${videoItem.identity}`;
+        //   moreElm.className = "more-icon";
+        //   videoDiv.appendChild(moreElm);
+        // }
+        if (this.localMetadata?.isOwner || this.localMetadata?.isCoHost) {
+          if (!moreElm) {
+            moreElm = document.createElement("div");
+            moreElm.id = `more-${videoItem.identity}`;
+            moreElm.className = "more-icon";
+            videoDiv && videoDiv.appendChild(moreElm);
+            moreElm.onclick = moreElmClick;
+          }
+        } else {
+          if (moreElm) {
+            videoDiv.removeChild(moreElm);
+            moreElm = null;
+          }
+        }
+      } else {
+        if (!boardElm) {
+          // 之前为屏幕共享状态或摄像头开启状态
+          boardElm = document.createElement("div");
+          boardElm.id = `board-${videoItem.identity}`;
+          boardElm.className = "board";
+          let avatarElm = document.createElement("div");
+          avatarElm.className = "board-icon";
+          boardElm.appendChild(avatarElm);
+          if (videoDiv) {
+            videoDiv?.appendChild(boardElm);
+          }
+        }
+        if (screenShareElm) {
+          videoDiv.removeChild(screenShareElm);
+          screenShareElm = null;
+        }
+      }
+      // 当与会者断开会议链接即remove为true
+      if (videoItem.remove) {
+        console.log("参会者离开会议:", videoItem.identity);
+
+        if (videoElm) {
+          videoElm.srcObject = null;
+          videoElm.src = "";
+          videoElm.remove();
+        }
+        if (videoDiv) {
+          videoDiv.remove();
+        }
+        this.removeFromParticipantList(videoItem.identity);
+        this.filterParticipantList();
+
+        // 处理焦点用户离开的情况
+        if (this.curBlurIdentity === videoItem.identity) {
+          console.log("焦点用户离开会议:", videoItem.identity);
+          // 调用房间焦点用户移除方法
+          this.removeBlurParticipant();
+          if (this.currentRoomMode === "normal") {
+            // normal模式下，这里do nothing
+            void 0;
+          } else if (this.currentRoomMode === "pointTurn") {
+            // pointTurn模式下，在原本焦点用户所在的中间右侧位置添加占位符
+            // const pointTurnCenter = document.querySelector("#room .point-turn-center");
+            // if (pointTurnCenter && pointTurnCenter.children.length < 2) {
+            //   const placeHolderElm = document.createElement("div");
+            //   placeHolderElm.className = "participant";
+            //   placeHolderElm.innerHTML = placeholderTemplate;
+            //   pointTurnCenter.appendChild(placeHolderElm);
+            // }
+            // do nothing
+            void 0;
+          }
+        }
+
+        // 处理主持人离开的情况
+        if (videoItem.identity === this.curHostIdentity) {
+          this.curHostIdentity = null;
+          // 主持人离开后具体的逻辑处理放到watch中处理
+        }
+        // pointTurn模式下，主持人离开处理
+        // if (currentRoomMode.value === "pointTurn" && videoItem.identity === curHostIdentity.value) {
+        // 当前离开与会者为会议主持人
+        // const pointTurnCenter = document.querySelector("#room .point-turn-center");
+        // if (pointTurnCenter) {
+        //   // 会议中没有其他主持人，显示默认占位元素
+        //   const placeHolderElm = document.createElement("div");
+        //   placeHolderElm.className = "participant";
+        //   placeHolderElm.innerHTML = placeholderTemplate;
+        //   pointTurnCenter.insertBefore(placeHolderElm, pointTurnCenter.firstChild ?? null);
+        // }
+        // }
+        // pointTurn模式下的其他用户离开处理
+        if (
+          this.currentRoomMode === "pointTurn" &&
+          videoItem.identity !== this.curHostIdentity &&
+          videoItem.identity !== this.curBlurIdentity
+        ) {
+          // 当前离开为一般与会者，递补填充空位
+          const pointTurnTop = document.querySelector("#room .point-turn-top");
+          const pointTurnBottom = document.querySelector("#room .point-turn-bottom");
+          const pointTurnOther = document.querySelector("#room .point-turn-other");
+
+          if (pointTurnTop && pointTurnBottom && pointTurnOther) {
+            const pointTurnTopChildNum = pointTurnTop.children.length;
+            const pointTurnBottomChildNum = pointTurnBottom.children.length;
+            const pointTurnOtherChildNum = pointTurnOther.children.length;
+
+            if (pointTurnTopChildNum < 5) {
+              if (pointTurnBottomChildNum > 0) {
+                pointTurnTop.appendChild(pointTurnBottom.firstElementChild);
+              } else if (pointTurnOtherChildNum > 0) {
+                pointTurnTop.appendChild(pointTurnOther.firstChild);
+              }
+            } else if (pointTurnBottomChildNum < 5) {
+              if (pointTurnOtherChildNum > 0) {
+                pointTurnBottom.appendChild(pointTurnOther.firstChild);
+              }
+            }
+          }
+        }
+
+        // 音视频轨道绑定到video元素
+        if (videoItem?.videoTrack) {
+          videoItem.videoTrack.detach();
+        }
+        if (videoItem?.audioTrack) {
+          videoItem.audioTrack.detach();
+        }
+        return;
+      }
+      // 与会者屏幕共享布局切换
+      if (videoItem.isScreenShareEnabled) {
+        if (this.currentRoomMode === "pointTurn") {
+          // 点调模式下不做处理
+          void 0;
+        } else {
+          // 当前模式为常规会议模式，且仅当前用户为主持人时才进行布局操作
+          if (this.judgeParticipantIsHost(this.localIdentity)) {
+            if (this.currentLayout === "grid") {
+              if (this.judgeOtherScreenShare(videoItem.identity) !== -1) {
+                // 会议中存在其他人正在共享屏幕, 什么都不做
+                void 0;
+              } else {
+                // 会议中并无其他人共享屏幕，仅在未设置屏幕共享状态时保存布局状态
+                if (!this.isScreenShareChange) {
+                  this.isScreenShareChange = true;
+                  // 保存屏幕共享前的布局和焦点用户状态
+                  this.screenShareChangeOldLayout = this.currentLayout;
+                  this.screenShareChangeOldBlur = this.curBlurIdentity;
+                  console.log("开始屏幕共享，保存状态:", {
+                    oldLayout: this.screenShareChangeOldLayout,
+                    oldBlur: this.screenShareChangeOldBlur,
+                  });
+                }
+                // 设置屏幕共享用户为焦点
+                this.setMemberBlur(videoItem.identity);
+              }
+            } else if (this.currentLayout === "rightSide") {
+              if (this.judgeOtherScreenShare(videoItem.identity) !== -1) {
+                // 会议中存在其他人正在共享屏幕, 什么都不做
+                void 0;
+              } else {
+                // 会议中并无其他人共享屏幕，仅在未设置屏幕共享状态时保存布局状态
+                if (!this.isScreenShareChange) {
+                  this.isScreenShareChange = true;
+                  // 保存屏幕共享前的布局和焦点用户状态
+                  this.screenShareChangeOldLayout = this.currentLayout;
+                  this.screenShareChangeOldBlur = this.curBlurIdentity;
+                  console.log("开始屏幕共享，保存状态:", {
+                    oldLayout: this.screenShareChangeOldLayout,
+                    oldBlur: this.screenShareChangeOldBlur,
+                  });
+                }
+                // 设置屏幕共享用户为焦点
+                this.setMemberBlur(videoItem.identity);
+              }
+            }
+          }
+        }
+      }
+      // 网络质量监测
+      this.detectUserCommuniQuality();
+      // 音视频轨道绑定到video元素
+      if (videoItem?.videoTrack) {
+        videoItem.videoTrack.attach(videoElm);
+      }
+      if (!videoItem.isLocal) {
+        if (videoItem?.audioTrack) {
+          videoItem.audioTrack.attach(videoElm);
+        }
+      }
+      // 更新与会者名称
+      let nameDom = document.getElementById(videoItem.identity);
+      if (nameDom) {
+        nameDom.innerHTML = videoItem.isLocal ? videoItem.name + "(我)" : videoItem.name;
+      }
+      // 更新与会者数组
+      this.addToParticipantList(videoItem);
+      this.filterParticipantList();
+      // 与会者结束共享，切换回到之前布局（仅主持人执行）
+      if (this.currentRoomMode === "normal" && this.judgeParticipantIsHost(this.localIdentity)) {
+        console.log(
+          "normal模式下，主持人结束屏幕共享，准备还原布局",
+          this.hasScreenShare,
+          this.isScreenShareChange
+        );
+        if (this.hasScreenShare === -1 && this.isScreenShareChange) {
+          console.log("结束屏幕共享，准备还原布局:", {
+            oldLayout: this.screenShareChangeOldLayout,
+            oldBlur: this.screenShareChangeOldBlur,
+            currentLayout: this.currentLayout,
+          });
+
+          if (
+            this.screenShareChangeOldLayout &&
+            this.screenShareChangeOldLayout !== this.currentLayout
+          ) {
+            // 恢复到共享前的布局
+            console.log("还原布局:", this.screenShareChangeOldLayout);
+            this.setLayout(this.screenShareChangeOldLayout);
+          }
+          // 恢复到共享前的焦点用户
+          if (this.screenShareChangeOldBlur) {
+            console.log("还原焦点用户:", this.screenShareChangeOldBlur);
+            this.setMemberBlur(this.screenShareChangeOldBlur);
+          } else {
+            // 如果共享前没有焦点用户，则移除焦点
+            console.log("移除焦点用户");
+            this.removeBlurParticipant();
+          }
+          // 重置状态
+          console.log("重置屏幕共享状态");
+          this.isScreenShareChange = false;
+          this.screenShareChangeOldBlur = null;
+          this.screenShareChangeOldLayout = null;
+        }
+      }
+    },
+    async leaveRoom() {
+      if (!this.liveClient) {
+        return;
+      }
+      await this.liveClient.leaveRoom();
+    },
+
+    exitPage() {
+      this.isLeaveRoom = true;
+      this.$emit("multiMeetingClose");
+    },
+
+    setPageFooterVisible(time = 3, e) {
+      this.footerVisibleDuration = time;
+      this.pageFooterVisible = true;
+      if (this.footerInterval) {
+        clearInterval(this.footerInterval);
+      }
+      this.footerInterval = setInterval(() => {
+        if (this.footerVisibleDuration > 0) {
+          this.footerVisibleDuration--;
+        }
+      }, 1000);
+    },
+
+    // 暂时空实现，避免模板报错
+    minumDialog() {
+      if (!this.isInMeeting) {
+        this.showMessage.message("error", "请先进入会议");
+        return;
+      }
+      if (this.localIdentity) {
+        const index = this.participants.findIndex((item) => item.identity === this.localIdentity);
+        if (index < 0) {
+          this.showMessage.message("error", "获取本地与会者视频流失败");
+          return;
+        }
+        this.$emit("multiMeetingMinum", {
+          identity: this.localIdentity,
+          name: this.participants[index].name,
+          videoTrack: this.participants[index]?.videoTrack,
+        });
+        this.$refs.rootElm.style.visibility = "hidden";
+      } else {
+        this.showMessage.message("error", "获取本地与会者视频流失败");
+      }
+    },
+    resetDialog() {
+      this.$refs.rootElm.style.visibility = "visible";
+    },
+    async executeLayoutChange(newLayout, oldLayout) {
+      console.log("执行布局变化", newLayout, "->", oldLayout);
+      console.log("新布局", newLayout);
+      console.log("旧布局", oldLayout);
+      this.$nextTick(() => {
+        // 仅当会议模式下才可切换布局
+        if (this.currentRoomMode == "normal") {
+          let container = document.getElementById("room");
+          if (!container) {
+            this.showMessage.warning("会议容器不存在");
+            return;
+          }
+
+          if (oldLayout === "grid" && newLayout === "rightSide") {
+            // 从宫格布局切换到焦点布局
+
+            // 先清理可能残留的布局容器
+            const existingRightSide = document.querySelector("#room .layout-rightside");
+            const existingLeftSide = document.querySelector("#room .layout-leftside");
+            if (existingRightSide) {
+              console.warn("发现残留的右侧布局容器，正在清理");
+              existingRightSide.remove();
+            }
+            if (existingLeftSide) {
+              console.warn("发现残留的左侧布局容器，正在清理");
+              existingLeftSide.remove();
+            }
+
+            let layoutRightSideEle = document.querySelector("#room .layout-rightside");
+            let layoutLeftSideEle = document.querySelector("#room .layout-leftside");
+
+            // 创建布局容器
+            if (!layoutLeftSideEle) {
+              layoutLeftSideEle = document.createElement("div");
+              layoutLeftSideEle.className = "layout-leftside";
+            }
+            if (!layoutRightSideEle) {
+              layoutRightSideEle = document.createElement("div");
+              layoutRightSideEle.className = "layout-rightside";
+            }
+
+            let focusVideoItem = null;
+            let blurDom = null;
+
+            // 确定焦点用户 - 优先级：当前焦点用户 > 主持人 > 本地用户
+            if (this.curBlurIdentity) {
+              focusVideoItem = this.getUserItemByIdentity(this.curBlurIdentity);
+              if (focusVideoItem) {
+                blurDom = document.getElementById(`participant-${focusVideoItem.identity}`);
+              }
+            }
+
+            // 如果没有有效的焦点用户，设置主持人为焦点用户
+            if (!blurDom && this.curHostIdentity) {
+              focusVideoItem = this.getUserItemByIdentity(this.curHostIdentity);
+              if (focusVideoItem) {
+                blurDom = document.getElementById(`participant-${focusVideoItem.identity}`);
+                // 注意：这里不需要调用autoSetHostAsBlur()，因为curBlurIdentity的变化会触发watch监听器
+              }
+            }
+
+            // 如果主持人也不存在，则设置本地用户为焦点
+            if (!blurDom) {
+              focusVideoItem = this.getLocalParticipant();
+              if (focusVideoItem) {
+                blurDom = document.getElementById(`participant-${focusVideoItem.identity}`);
+              }
+            }
+
+            if (blurDom) {
+              // 清空左侧容器并移动其子元素到右侧
+              if (layoutLeftSideEle.hasChildNodes()) {
+                let child;
+                while ((child = layoutLeftSideEle.firstChild)) {
+                  if (child) {
+                    layoutRightSideEle.appendChild(child);
+                  }
+                }
+              }
+
+              // 将焦点用户放入左侧容器
+              layoutLeftSideEle.appendChild(blurDom);
+
+              // 将容器中的其他元素移动到右侧容器
+              if (container.hasChildNodes()) {
+                let child;
+                let maxIterations = container.children.length + 10; // 设置最大循环次数防止死循环
+                let iterations = 0;
+
+                while ((child = container.firstElementChild) && iterations < maxIterations) {
+                  iterations++;
+
+                  if (child && child !== layoutLeftSideEle && child !== layoutRightSideEle) {
+                    const prevFirstChild = container.firstElementChild;
+                    layoutRightSideEle.appendChild(child);
+
+                    // 检查元素是否成功移动，如果没有移动则强制退出循环
+                    if (container.firstElementChild === prevFirstChild) {
+                      console.warn("元素移动失败，强制退出循环", child);
+                      break;
+                    }
+                  } else {
+                    // 如果遇到布局容器本身，说明有问题，强制移除
+                    console.warn("发现布局容器残留，强制移除", child);
+                    container.removeChild(child);
+                  }
+                }
+
+                if (iterations >= maxIterations) {
+                  console.error("while循环达到最大次数，可能存在死循环");
+                }
+              }
+
+              // 将布局容器添加到主容器
+              container.insertBefore(layoutLeftSideEle, container.firstChild ?? null);
+              container.appendChild(layoutRightSideEle);
+            } else {
+              this.showMessage.warning("无法找到有效的焦点用户");
+            }
+          }
+
+          if (oldLayout === "grid" && newLayout === "ring") {
+            // 从宫格布局切换到环状布局
+            // TODO: 实现环状布局逻辑
+          }
+
+          if (oldLayout === "grid" && newLayout === "downLSide") {
+            // 从宫格布局切换到下L侧边栏布局
+            // TODO: 实现下L侧边栏布局逻辑
+          }
+
+          if (oldLayout === "rightSide" && newLayout === "grid") {
+            // 从焦点布局切换到宫格布局
+            let layoutRightSideEle = document.querySelector("#room .layout-rightside");
+            let layoutLeftSideEle = document.querySelector("#room .layout-leftside");
+            console.log("layoutSideEle", layoutRightSideEle, layoutLeftSideEle);
+
+            const fragment = document.createDocumentFragment();
+
+            // 处理右侧容器的元素
+            if (layoutRightSideEle && layoutRightSideEle.hasChildNodes()) {
+              let child;
+              while ((child = layoutRightSideEle.firstChild)) {
+                fragment.appendChild(child);
+              }
+              // 检查元素是否仍然是 container 的子元素，然后移除
+              if (container.contains(layoutRightSideEle)) {
+                container.removeChild(layoutRightSideEle);
+              } else {
+                console.warn("layoutRightSideEle is no longer a child of container");
+              }
+            }
+
+            // 处理左侧容器的元素（焦点用户）
+            if (layoutLeftSideEle && layoutLeftSideEle.hasChildNodes()) {
+              let child;
+              while ((child = layoutLeftSideEle.firstChild)) {
+                console.log("layoutLeftSideEleChild", layoutLeftSideEle, child);
+                container.insertBefore(child, container.firstChild ?? null);
+              }
+              // 检查元素是否仍然是 container 的子元素，然后移除
+              if (container.contains(layoutLeftSideEle)) {
+                container.removeChild(layoutLeftSideEle);
+              } else {
+                console.warn("layoutLeftSideEle is no longer a child of container");
+              }
+            }
+
+            // 添加其他元素
+            container.appendChild(fragment);
+          }
+        }
+      });
+    },
+    async switchFullScreen() {
+      if (
+        document.fullscreenElement ||
+        document.msFullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement
+          ? true
+          : false
+      ) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      } else {
+        this.$nextTick(() => {
+          if (this.$refs.rootElm.requestFullscreen) {
+            this.$refs.rootElm.requestFullscreen();
+          }
+        });
+      }
+    },
+    openLeaveOptionDialog(event) {
+      console.log('aaaaaaaaa');
+      
+      if (this.judgeParticipantIsHost(this.localIdentity)) {
+        if (this.leaveOptionShow) {
+          this.leaveOptionShow = false;
+        } else {
+          this.leaveOptionOffset = {
+            left: event.target.offsetLeft - 40 + "px",
+            bottom: event.target.offsetTop + 60 + "px",
+          };
+          this.leaveOptionShow = true;
+        }
+      } else {
+        this.isDeleteRoom = false;
+        this.leaveRoom();
+      }
+    },
+    openLeaveOptionDialog2(event) {
+      if (this.judgeParticipantIsHost(this.localIdentity)) {
+        if (this.leaveOptionShow) {
+          this.leaveOptionShow = false;
+        } else {
+          this.leaveOptionOffset = {
+            left: event.target.offsetLeft - 150 + "px",
+            bottom: event.target.offsetTop + 60 + "px",
+          };
+          this.leaveOptionShow = true;
+        }
+      } else {
+        this.isDeleteRoom = false;
+        this.leaveRoom();
+      }
+    },
+    closeMoreDialog() {
+      this.moreDialogShow = false;
+    },
+    getUnjoinParticipant() {
+      this.liveClient.getUnjoinParticipant(this.meetingNum).then((res) => {
+        if (res.code == 200) {
+          this.unJoinedList = res?.data || [];
+        } else {
+          this.showMessage.message("error", res?.msg);
+        }
+      });
+    },
+    moreOptionClick(e) {
+      // 动态计算选项数量以获得精确的弹窗高度
+      const optionCount = this.getOptionCount(e.identity);
+
+      // 使用工具函数计算弹窗位置（使用真实的MoreOptionDialog尺寸）
+      this.optionDialogOffset = this.calculateDialogPosition(e, {
+        dialogWidth: 130,
+        dialogHeight: 350, // 备用高度
+        optionCount: optionCount, // 动态计算精确高度
+        preferredPosition: "bottom-left",
+      });
+
+      if (this.optionIdentity === e.identity && this.moreDialogShow) {
+        this.moreDialogShow = false;
+      } else {
+        this.moreDialogShow = false;
+        this.optionIdentity = e.identity;
+        this.moreDialogShow = true;
+      }
+    },
+    removeUnjoinItem(item) {
+      this.liveClient.deleteUnjoinParticipant(this.meetingNum, item.identity).then((res) => {
+        if (res.code == 200) {
+          this.showMessage.message("success", "成功删除未入会人员");
+          this.getUnjoinParticipant();
+          this.removeFromInviteList(item.identity);
+        } else {
+          this.showMessage.message("error", res?.msg);
+        }
+      });
+    },
+    switchParticipantCameraStatus(e) {
+      if (this.liveClient) {
+        this.liveClient.changeParticipantCameraStatus(e.identity, e.isMute);
+      }
+    },
+    switchParticipantMicrophoneStatus(e) {
+      if (this.liveClient) {
+        this.liveClient.changeParticipantMicrophoneStatus(e.identity, e.isMute);
+      }
+    },
+    async closeAllCamera() {
+      if (this.liveClient) {
+        await this.liveClient.muteAllParticipants("2");
+      }
+    },
+    async closeAllMicrophone() {
+      if (this.liveClient) {
+        await this.liveClient.muteAllParticipants("1");
+      }
+    },
+    appendMemberInvite(e) {
+      this.sendAppendInviteMessage([e]);
+    },
+    async changeActiveDevice(kind, deviceId) {
+      if (!deviceId) {
+        this.showMessage.message("error", "设备id不存在");
+        return;
+      }
+      if (kind == "audioinput") {
+        await this.liveClient.changeAudioDevice(deviceId);
+      } else if (kind == "audiooutput") {
+        await this.liveClient.changeOutputDevice(deviceId);
+      } else if (kind == "videoinput") {
+        await this.liveClient.changeVideoDevice(deviceId);
+      } else {
+        return;
+      }
+    },
+    filterJoinedList(e) {
+      this.filterJoinVal = e;
+      this.filterParticipantList();
+    },
+    messageSend(e) {
+      const msg = {
+        content: e.content,
+        contentType: e.contentType,
+      };
+      this.liveClient.sendChatMessage(msg);
+    },
+    appointHost(e) {
+      this.liveClient
+        .setParticipantToHost(e.ownerId)
+        .then((res) => {
+          if (res.code == 200) {
+            this.showMessage.message("success", `成功指派 ${e.ownerName} 为主持人`);
+            this.isDeleteRoom = false;
+            this.leaveRoom();
+          } else {
+            this.showMessage.message("error", res?.msg);
+          }
+        })
+        .catch((err) => {
+          this.showMessage.message("error", `指派 ${e.ownerName} 失败`);
+        });
+    },
+    detectUserCommuniQuality() {
+      if (!this.liveClient || !this.liveClient?.room) {
+        return;
+      }
+      let quality = null;
+      switch (this.liveClient.room?.localParticipant.connectionQuality) {
+        case "excellent":
+        case "good":
+          quality = "良好";
+          break;
+        case "poor":
+          quality = "较差";
+          break;
+        case "lost":
+        case "unknown":
+          quality = "极差";
+          break;
+      }
+      this.meetingQuality = quality ?? "暂无";
+    },
+
+    async setMemberBlur(e) {
+      if (
+        !this.judgeParticipantIsHost(this.localIdentity) &&
+        !this.judgeParticipantIsCoHost(this.localIdentity)
+      ) {
+        // showMessage.message("warning", "仅主持人和联席主持人可以设置焦点");
+        return;
+      }
+
+      // 检查是否为手动设置焦点（非屏幕共享用户）且当前正在屏幕共享状态
+      // if (isScreenShareChange.value) {
+      //   const targetUser = getUserItemByIdentity(e);
+      //   if (!targetUser || !targetUser.isScreenShareEnabled) {
+      //     // 当前正在屏幕共享状态，但设置的焦点用户不是屏幕共享用户，说明是手动设置，取消自动还原
+      //     cancelScreenShareAutoRestore("手动设置焦点用户");
+      //   }
+      // }
+
+      if (this.currentRoomMode === "pointTurn") {
+        // 当前为点调模式
+        if (this.curHostIdentity && this.curHostIdentity === e) {
+          this.showMessage.message("info", "当前与会者已被设置为主持人，暂无法设为焦点");
+          return;
+        }
+        if (this.curBlurIdentity && this.curBlurIdentity === e) {
+          this.showMessage.message("info", "当前与会者已被设置为焦点");
+          return;
+        }
+
+        // 只设置焦点用户，布局切换逻辑交给 watch 处理
+        await this.liveClient.setBlurParticipant(e);
+      } else {
+        // 会议模式
+        if (this.curBlurIdentity && this.curBlurIdentity === e) {
+          this.showMessage.message("info", "当前与会者已被设置为焦点");
+          return;
+        }
+
+        // 只设置焦点用户，布局切换逻辑交给 watch 处理
+        await this.liveClient.setBlurParticipant(e);
+      }
+    },
+    removeCurBlur() {
+      // 仅主持人和联席主持人可以取消设为焦点
+      if (
+        !this.judgeParticipantIsHost(this.localIdentity) &&
+        !this.judgeParticipantIsCoHost(this.localIdentity)
+      ) {
+        this.showMessage.message("warning", "仅主持人和联席主持人可以取消设为焦点");
+        return;
+      }
+
+      if (!this.curBlurIdentity) {
+        this.showMessage.warning("当前没有焦点用户");
+        return;
+      }
+
+      // 如果当前正在屏幕共享状态且手动取消焦点，取消自动还原
+      this.cancelScreenShareAutoRestore("手动取消焦点用户");
+
+      const videoDiv = document.getElementById(`participant-${this.curBlurIdentity}`);
+      if (!videoDiv) {
+        this.showMessage.warning("焦点用户视频元素不存在:", this.curBlurIdentity);
+        this.removeBlurParticipant();
+        return;
+      }
+
+      if (this.currentRoomMode === "pointTurn") {
+        const pointTurnTop = document.querySelector("#room .point-turn-top");
+        const pointTurnCenter = document.querySelector("#room .point-turn-center");
+        const pointTurnBottom = document.querySelector("#room .point-turn-bottom");
+        const pointTurnOther = document.querySelector("#room .point-turn-other");
+
+        if (!pointTurnTop || !pointTurnCenter || !pointTurnBottom || !pointTurnOther) {
+          this.showMessage.warning("点调模式容器不存在");
+          return;
+        }
+
+        // 将焦点用户移动到合适的位置
+        if (pointTurnTop.children.length < 5) {
+          pointTurnTop.appendChild(videoDiv);
+        } else if (pointTurnBottom.children.length < 5) {
+          pointTurnBottom.appendChild(videoDiv);
+        } else {
+          pointTurnOther.appendChild(videoDiv);
+        }
+
+        // 在中心区域添加占位符
+        const placeHolderElm = document.createElement("div");
+        placeHolderElm.className = "participant";
+        placeHolderElm.innerHTML = this.placeholderTemplate;
+        pointTurnCenter.appendChild(placeHolderElm);
+      } else if (this.currentLayout === "rightSide") {
+        const layoutRightSideEle = document.querySelector("#room .layout-rightside");
+        const layoutLeftSideEle = document.querySelector("#room .layout-leftside");
+
+        if (!layoutLeftSideEle || !layoutRightSideEle) {
+          this.showMessage.warning("焦点布局容器不存在");
+          return;
+        }
+
+        // 将左侧容器的元素（焦点用户）移动到右侧容器
+        let child = null;
+        while ((child = layoutLeftSideEle.firstChild)) {
+          if (child) {
+            layoutRightSideEle.appendChild(child);
+          }
+        }
+      }
+
+      // 清空焦点用户标识
+      this.removeBlurParticipant();
+    },
+    async removeBlurParticipant() {
+      if (
+        this.judgeParticipantIsHost(this.localIdentity) ||
+        this.judgeParticipantIsCoHost(this.localIdentity)
+      ) {
+        try {
+          await this.liveClient.removeBlurParticipant();
+        } catch (err) {
+          console.error("删除焦点失败", err);
+        }
+      }
+    },
+    async autoSetHostAsBlur() {
+      if (!this.curBlurIdentity && this.curHostIdentity) {
+        try {
+          await this.liveClient.setBlurParticipant(this.curHostIdentity);
+          console.log("自动设置主持人为焦点用户:", this.curHostIdentity);
+        } catch (err) {
+          console.error("自动设置主持人为焦点失败", err);
+        }
+      }
+    },
+    async openMicro(e) {
+      if (this.liveClient) {
+        await this.liveClient.changeParticipantMicrophoneStatus(e, false);
+      }
+    },
+    async closeMicro(e) {
+      if (this.liveClient) {
+        await this.liveClient.changeParticipantMicrophoneStatus(e, true);
+      }
+    },
+    async openCamera(e) {
+      if (this.liveClient) {
+        await this.liveClient.changeParticipantCameraStatus(e, true);
+      }
+    },
+    async closeCamera(e) {
+      if (this.liveClient) {
+        await this.liveClient.changeParticipantCameraStatus(e, false);
+      }
+    },
+    async setToHost(e) {
+      if (this.judgeParticipantIsHost(e)) {
+        return;
+      } else {
+        await this.liveClient.setParticipantToHost(e);
+      }
+    },
+    async setToDeafness(e) {
+      if (this.liveClient) {
+        await this.liveClient.setParticipantDeafness(e);
+      }
+    },
+    async cancelDeafness(e) {
+      if (this.liveClient) {
+        await this.liveClient.cancelParticipantDeafness(e);
+      }
+    },
+    updateName(e) {
+      mittBus.emit("updateName", {
+        identity: e,
+      });
+    },
+    async removeMember(e) {
+      if (liveClient) {
+        await liveClient.moveoutParticipant(e);
+      }
+    },
+    async setToCoHost(e) {
+      if (this.liveClient) {
+        await this.liveClient.addCoHost(e);
+      }
+    },
+    async removeFromCoHost(e) {
+      if (this.liveClient) {
+        await this.liveClient.removeCoHost(e);
+      }
+    },
+    async appendInvitePeople(e) {
+      console.log("追加邀请", e);
+      if (e && e.length > 0) {
+        e.forEach((item) => {
+          this.addToInviteList(item);
+        });
+      }
+      let tempList = [];
+      let index = -1;
+      this.inviteList.forEach((item) => {
+        if (this.invitedNum > 0) {
+          index = this.tempInvitedList.findIndex((ele) => {
+            if (item?.loginCode) {
+              return ele.identity === item.loginCode;
+            } else {
+              return ele.identity === item.phone;
+            }
+          });
+          if (index < 0) {
+            // 当前人员尚未被邀请
+            tempList.push(item);
+          }
+        } else {
+          tempList.push(item);
+        }
+      });
+
+      this.sendInviteMessage(tempList, this.defaultInviteWay == "mini" ? 3 : 0);
+    },
+    async appendInviteDevice(e) {
+      console.log("通讯录邀请设备", e);
+      if (e && e.length > 0) {
+        e.forEach((item) => {
+          this.pullMonitorDevice(item?.equipmentID || item?.monitorID, item.label);
+        });
+      }
+    },
+    async updateNameConfirm(e) {
+      if (this.liveClient) {
+        await this.liveClient.updateParticipantName(e.identity, e.name);
+      }
+    },
+    async changeLocalMicrophoneStatus() {
+      await this.liveClient.changeMicrophoneStatus();
+    },
+    async changeLocalCameraStatus() {
+      await this.liveClient.changeCameraStatus();
+    },
+    async chooseAudioInputDevice(e) {
+      await this.changeActiveDevice("audioinput", e);
+      this.audioSelectShow = false;
+    },
+    async chooseAudioOutputDevice(e) {
+      await this.changeActiveDevice("audiooutput", e);
+      this.audioSelectShow = false;
+    },
+    detectMicroAndOutput() {
+      this.$refs.settingDialogRef.open({
+        type: "1",
+      });
+    },
+    openSettingDialog(type) {
+      this.$refs.settingDialogRef.open({
+        type,
+      });
+    },
+    async chooseVideoDevice(e) {
+      await this.changeActiveDevice("videoinput", e);
+      this.videoSelectShow = false;
+    },
+    async chooseMeetingMode(e) {
+      // 仅主持人和联席主持人可以切换会议模式
+      if (
+        !this.judgeParticipantIsHost(this.localIdentity) &&
+        !this.judgeParticipantIsCoHost(this.localIdentity)
+      ) {
+        this.showMessage.message("warning", "仅主持人和联席主持人可以切换会议模式");
+        return;
+      }
+      await this.liveClient.setRoomMode(e);
+      this.modeSelectShow = false;
+    },
+    async changeScreenShareStatus() {
+      if (this.judgeOtherScreenShare(this.localIdentity) > -1) {
+        this.showMessage.info("会议中存在其他人正在共享屏幕");
+        return;
+      }
+      await this.liveClient.changeScreenShareStatus(this.screenShareCaptureOption);
+    },
+    screenShareOptionChange(e) {
+      console.log("屏幕共享设置变更", e);
+    },
+    stopScreenShare() {
+      this.changeScreenShareStatus(this.screenShareCaptureOption);
+    },
+    async startRecord() {
+      await this.liveClient.startRecord();
+    },
+    async stopRecord() {
+      await this.liveClient.stopRecord();
+    },
+    openCallBoard() {
+      if (this.callBoardShow) {
+        this.callBoardShow = false;
+      } else {
+        this.callBoardShow = true;
+        // callBoardOffset.value = {
+        //   bottom: event.target.offsetTop + 50 + "px",
+        //   left: event.target.clientLeft - 122 + "px",
+        // };
+      }
+    },
+    chooseInviteWay(e) {
+      if (e === "addressbook") {
+        this.openAddressBook();
+      } else if (e === "videoCall") {
+        this.openCallBoard();
+      }
+    },
+    // 打开通讯录
+    openAddressBook() {
+      mittBus.emit("getaddressBookUser", {
+        isInner: true,
+      });
+    },
+    appendInvite(e, inviteWay) {
+      let tempList = [];
+      let tempDeviceList = [];
+      let index = -1;
+      if (e && e.length > 0) {
+        e.forEach((item) => {
+          if (item.source == "人员") {
+            if (this.invitedNum > 0) {
+              index = this.tempInvitedList.findIndex((ele) => {
+                if (item?.loginCode) {
+                  return ele.identity === item.loginCode;
+                } else {
+                  return ele.identity === item.phone;
+                }
+              });
+              if (index < 0) {
+                // 当前人员尚未被邀请
+                tempList.push(item);
+              }
+            } else {
+              tempList.push(item);
+            }
+            this.addToInviteList(item);
+          } else {
+            tempDeviceList.push(item);
+          }
+        });
+        console.log("本次追加邀请人员", tempList);
+        console.log("本次追加邀请设备", tempDeviceList);
+        this.sendInviteMessage(tempList, inviteWay == "mini" ? 3 : 0);
+        if (tempDeviceList.length > 0) {
+          tempDeviceList.forEach((item) => {
+            if (item.source == "设备") {
+              this.pullMonitorDevice(item.equipmentID, item.label);
+            } else if (item.source == "监控") {
+              this.pullMonitorDevice(item.monitorID, item.label);
+            }
+          });
+        }
+      }
+    },
+    pullMonitorDevice(monitorID, monitorName) {
+      this.liveClient.judgeUserInMeeting(this.meetingNum, monitorID).then((res) => {
+        if (res && res?.code == 200) {
+          if (res.data == 1) {
+            this.showMessage.message("error", "该监控设备已进入会议");
+            return;
+          } else {
+            this.liveClient.makeCall(monitorName, monitorID, 1);
+          }
+        } else {
+          this.showMessage.message("error", "获取监控设备进会状态失败");
+        }
+      });
+    },
+
+    async sendAppendInviteMessage(uninviteList = []) {
+      // 政协项目新增
+      if (this.isCustomizeMiniInvitations) {
+        this.$emit("inviteMessageSend", {
+          inviteUserList: uninviteList,
+          meetingName: this.meetingName,
+          meetingNum: this.meetingNum,
+          fromUser: this.userData.username,
+        });
+      } else {
+        if (uninviteList.length > 0) {
+          this.liveClient
+            .inviteParticipant(
+              this.meetingNum,
+              uninviteList.map((item) => {
+                return {
+                  userName: item.userName,
+                  identity: item.identity,
+                  phone: item.phone,
+                };
+              })
+            )
+            .then((res) => {
+              if (res.code == 200) {
+                this.showMessage.message("success", "成功发送邀请");
+                this.getUnjoinParticipant();
+              } else {
+                this.showMessage.message("error", res?.msg);
+              }
+            });
+        }
+      }
+    },
+    phoneCall(num) {
+      this.liveClient.makeCall(num, num);
+    },
+    async miniCall(num) {
+      if (this.isCustomizeMiniInvitations) {
+        this.$emit("miniInviteSend", {
+          inviteMobile: num,
+          fromUser: this.userData.username,
+          meetingName: this.meetingName,
+          meetingNum: this.meetingNum,
+        });
+      } else {
+        this.showMessage.message("info", "当前功能暂未实现");
+      }
+    },
+    sleep(waitTimeInMs) {
+      return new Promise((resolve) => setTimeout(resolve, waitTimeInMs));
+    },
+
+    handleClick() {
+      console.log("点击", this.footerInterval);
+      if (this.footerInterval) {
+        clearInterval(this.footerInterval);
+      }
+      this.pageFooterVisible = true;
+    },
+    clickAway(event) {
+      console.log("点击事件", event.target.className);
+      if (!event.target.className.includes("meeting-name")) {
+        this.themeDialogShow = false;
+      }
+      if (
+        !(
+          event.target.className.includes("exit-btn") ||
+          event.target.className.includes("close-meeting-icon")
+        )
+      ) {
+        this.leaveOptionShow = false;
+      }
+      if (
+        !(
+          event.target.className.includes("member-item") ||
+          event.target.className.includes("appoint-dialog") ||
+          event.target.className.includes("member-list") ||
+          event.target.className.includes("control-list-item")
+        )
+      ) {
+        this.appointDialogShow = false;
+      }
+      if (
+        !(
+          event.target.className.includes("icon-btn-option") ||
+          event.target.className.includes("more-icon")
+        )
+      ) {
+        this.moreDialogShow = false;
+      }
+    },
+    verifyLeavePage(event) {
+      console.log("beforeunload", event);
+      if (!this.isLeaveRoom) {
+        // 不是用户手动点击结束导致离开页面
+        event.preventDefault();
+      }
+    },
+    async executeHostChange(newVal, oldVal) {
+      console.log("执行主持人变化", newVal, "->", oldVal);
+      console.log("修改前主持人", oldVal);
+      console.log("修改后主持人", newVal);
+      if (!newVal) return;
+
+      // 如果新主持人与当前焦点用户相同，清空焦点用户
+      if (this.curBlurIdentity === newVal) {
+        console.log("新主持人与焦点用户相同，清空焦点用户");
+        this.removeBlurParticipant();
+      }
+      const hostVideoElm = document.getElementById(`participant-${newVal}`);
+
+      if (!hostVideoElm) {
+        console.error("主持人视频元素不存在:", newVal);
+        return;
+      }
+
+      if (this.currentRoomMode === "pointTurn") {
+        const pointTurnTop = document.querySelector("#room .point-turn-top");
+        const pointTurnCenter = document.querySelector("#room .point-turn-center");
+        const pointTurnBottom = document.querySelector("#room .point-turn-bottom");
+        const pointTurnOther = document.querySelector("#room .point-turn-other");
+
+        if (!pointTurnTop || !pointTurnCenter || !pointTurnBottom || !pointTurnOther) {
+          this.showMessage.warning("点调模式容器元素不存在");
+          return;
+        }
+
+        let pointTurnTopChildNum = pointTurnTop.children.length;
+        let pointTurnBottomChildNum = pointTurnBottom.children.length;
+        let pointTurnOtherChildNum = pointTurnOther.children.length;
+
+        if (pointTurnCenter.hasChildNodes()) {
+          let childNodes = pointTurnCenter.children;
+          console.log("childNodes", childNodes);
+
+          // 处理中心区域的第一个元素（如果存在且有ID）
+          if (childNodes[0] && childNodes[0].id) {
+            // 将原有元素移动到合适位置
+            if (pointTurnTopChildNum >= 5) {
+              if (pointTurnBottomChildNum >= 5) {
+                pointTurnOther.appendChild(childNodes[0]);
+              } else {
+                pointTurnBottom.appendChild(childNodes[0]);
+              }
+            } else {
+              pointTurnTop.appendChild(childNodes[0]);
+            }
+          } else if (childNodes[0] && !childNodes[0].id) {
+            // 移除占位符
+            pointTurnCenter.removeChild(childNodes[0]);
+          }
+
+          // 将新主持人移动到中心区域第一个位置
+          pointTurnCenter.insertBefore(hostVideoElm, pointTurnCenter.firstElementChild ?? null);
+
+          // 如果新主持人不是焦点用户，需要添加占位符
+          // if (newVal !== curBlurIdentity.value) {
+          //   let placeHolderElm = document.createElement("div");
+          //   placeHolderElm.className = "participant";
+          //   placeHolderElm.innerHTML = placeholderTemplate;
+          //   pointTurnCenter.appendChild(placeHolderElm);
+          // }
+        } else {
+          // 中心区域为空，直接添加主持人
+          pointTurnCenter.insertBefore(hostVideoElm, pointTurnCenter.firstElementChild ?? null);
+
+          // 如果新主持人不是焦点用户，需要添加占位符
+          // if (newVal !== curBlurIdentity.value) {
+          //   let placeHolderElm = document.createElement("div");
+          //   placeHolderElm.className = "participant";
+          //   placeHolderElm.innerHTML = placeholderTemplate;
+          //   pointTurnCenter.appendChild(placeHolderElm);
+          // }
+        }
+
+        // 递补填充空位
+        if (pointTurnTopChildNum < 5) {
+          if (pointTurnBottomChildNum > 0) {
+            pointTurnTop.appendChild(pointTurnBottom.firstElementChild);
+          } else if (pointTurnOtherChildNum > 0) {
+            pointTurnTop.appendChild(pointTurnOther.firstChild);
+          }
+        } else if (pointTurnBottomChildNum < 5) {
+          if (pointTurnOtherChildNum > 0) {
+            pointTurnBottom.appendChild(pointTurnOther.firstChild);
+          }
+        }
+      }
+    },
+    async executeBlurChange(newVal, oldVal) {
+      console.log("执行焦点用户变化", newVal, "->", oldVal);
+      console.log("修改前焦点用户", oldVal);
+      console.log("修改后焦点用户", newVal);
+
+      if (!newVal) {
+        if (this.currentRoomMode === "pointTurn") {
+          const pointTurnCenter = document.querySelector("#room .point-turn-center");
+          if (pointTurnCenter) {
+            if (pointTurnCenter.children.length < 2) {
+              // 此时中心区域有空位，直接添加占位符
+              const placeHolderElm = document.createElement("div");
+              placeHolderElm.className = "participant";
+              placeHolderElm.innerHTML = this.placeholderTemplate;
+              pointTurnCenter.appendChild(placeHolderElm);
+            } else {
+              // 此时中心区域已满，需要替换
+              const lastChild = pointTurnCenter.lastChild;
+              if (lastChild && lastChild.id) {
+                // 最后一个是真实用户，移动到其他位置，并使用占位符补位，优先移动到top，若top已满，则移动到bottom，若bottom已满，则移动到other
+                const pointTurnTop = document.querySelector("#room .point-turn-top");
+                const pointTurnBottom = document.querySelector("#room .point-turn-bottom");
+                const pointTurnOther = document.querySelector("#room .point-turn-other");
+                if (pointTurnTop && pointTurnTop.children.length < 5) {
+                  pointTurnTop.appendChild(lastChild);
+                } else if (pointTurnBottom && pointTurnBottom.children.length < 5) {
+                  pointTurnBottom.appendChild(lastChild);
+                } else if (pointTurnOther && pointTurnOther.children.length < 5) {
+                  pointTurnOther.appendChild(lastChild);
+                }
+                // 使用占位符补位
+                const placeHolderElm = document.createElement("div");
+                placeHolderElm.className = "participant";
+                placeHolderElm.innerHTML = this.placeholderTemplate;
+                pointTurnCenter.appendChild(placeHolderElm);
+              } else if (lastChild && !lastChild.id) {
+                // 最后一个是占位符，do nothing
+                void 0;
+              }
+            }
+          }
+        } else {
+          if (this.currentLayout === "grid") {
+            // 宫格布局下移除焦点用户，则do nothing
+            void 0;
+          } else if (this.currentLayout === "rightSide") {
+            // 焦点布局下移除焦点用户，则切换到宫格布局
+            this.setLayout("grid");
+          }
+        }
+      } else {
+        // 在点调模式下的处理
+        if (this.currentRoomMode === "pointTurn") {
+          // 如果焦点用户和主持人是同一人，需要特殊处理
+          if (this.curHostIdentity === newVal) {
+            console.log("焦点用户和主持人为同一人，无需额外处理");
+            return;
+          }
+
+          const pointTurnCenter = document.querySelector("#room .point-turn-center");
+          const videoDiv = document.getElementById(`participant-${newVal}`);
+
+          if (!pointTurnCenter) {
+            this.showMessage.warning("点调模式中心容器不存在");
+            return;
+          }
+
+          if (!videoDiv) {
+            this.showMessage.warning("焦点用户视频元素不存在:", newVal);
+            return;
+          }
+
+          let videoDivParentEle = videoDiv.parentElement;
+          console.log("焦点元素的父元素", videoDivParentEle, videoDivParentEle?.className);
+
+          if (pointTurnCenter.children.length < 2) {
+            // 中心区域有空位，直接添加
+            pointTurnCenter.appendChild(videoDiv);
+
+            // 从其他区域补充元素到原位置
+            if (videoDivParentEle && videoDivParentEle.className !== "point-turn-other") {
+              const pointTurnOther = document.querySelector("#room .point-turn-other");
+              if (pointTurnOther && pointTurnOther.children.length > 0) {
+                videoDivParentEle.appendChild(pointTurnOther.firstChild);
+              }
+            }
+          } else {
+            // 中心区域已满，需要替换
+            const lastChild = pointTurnCenter.lastChild;
+            if (lastChild && lastChild.id) {
+              // 最后一个是真实用户，移动到原位置
+              if (videoDivParentEle) {
+                videoDivParentEle.appendChild(lastChild);
+              }
+              pointTurnCenter.appendChild(videoDiv);
+            } else if (lastChild && !lastChild.id) {
+              // 最后一个是占位符，直接替换
+              pointTurnCenter.removeChild(lastChild);
+              pointTurnCenter.appendChild(videoDiv);
+
+              // 从其他区域补充元素
+              if (videoDivParentEle && videoDivParentEle.className !== "point-turn-other") {
+                const pointTurnOther = document.querySelector("#room .point-turn-other");
+                if (pointTurnOther && pointTurnOther.children.length > 0) {
+                  videoDivParentEle.appendChild(pointTurnOther.firstChild);
+                }
+              }
+            }
+          }
+        } else {
+          // 会议模式下的处理
+          console.log("11111");
+          if (this.currentLayout === "grid") {
+            console.log("222222");
+            // 在宫格布局下设置焦点用户，自动切换到焦点布局
+            console.log("在宫格布局下设置焦点用户，自动切换到焦点布局");
+            this.setLayout("rightSide");
+          } else if (this.currentLayout === "rightSide") {
+            // 在焦点布局下切换焦点用户
+            const layoutRightSideEle = document.querySelector("#room .layout-rightside");
+            const layoutLeftSideEle = document.querySelector("#room .layout-leftside");
+            const videoDiv = document.getElementById(`participant-${newVal}`);
+
+            if (!layoutLeftSideEle || !layoutRightSideEle) {
+              this.showMessage.warning("焦点布局容器不存在");
+              return;
+            }
+
+            if (!videoDiv) {
+              this.showMessage.warning("焦点用户视频元素不存在:", newVal);
+              return;
+            }
+
+            // 将左侧容器的元素移动到右侧
+            let child = null;
+            while ((child = layoutLeftSideEle.firstChild)) {
+              if (child) {
+                layoutRightSideEle.appendChild(child);
+              }
+            }
+
+            // 将新焦点用户放入左侧容器
+            layoutLeftSideEle.appendChild(videoDiv);
+          }
+        }
+      }
+    },
+    async executeModeChange(newMode) {
+      console.log("执行模式变化", newMode);
+      this.$nextTick(() => {
+        let container = document.getElementById("room");
+
+        if (!container) {
+          this.showMessage.warning("会议容器不存在");
+          return;
+        }
+
+        if (newMode === "pointTurn") {
+          // 会议模式切换到点调模式
+
+          // 首先检查并清理已存在的点调容器，防止嵌套问题
+          const existingPointTurnElements = container.querySelectorAll(
+            ".point-turn-top, .point-turn-center, .point-turn-bottom, .point-turn-other"
+          );
+
+          if (existingPointTurnElements.length > 0) {
+            console.log(
+              "发现已存在的点调容器，开始清理:",
+              Array.from(existingPointTurnElements).map((el) => el.className)
+            );
+
+            existingPointTurnElements.forEach((element) => {
+              if (container.contains(element)) {
+                console.log(`清理容器 ${element.className}，子元素数量:`, element.children.length);
+
+                // 将现有点调容器中的子元素移回主容器
+                const childrenToMove = Array.from(element.children);
+                childrenToMove.forEach((child) => {
+                  if (child.id) {
+                    console.log(`移动元素 ${child.id || child.className} 回主容器`);
+                    container.appendChild(child);
+                  } else {
+                    console.log(`移除占位符元素 ${child.className}`);
+                    child.remove();
+                  }
+                });
+
+                // 移除空的点调容器
+                container.removeChild(element);
+                console.log(`已移除容器 ${element.className}`);
+              }
+            });
+
+            console.log(
+              "点调容器清理完成，当前主容器子元素:",
+              Array.from(container.children).map((el) => el.className || el.id)
+            );
+          } else {
+            console.log("未发现已存在的点调容器，继续创建新布局");
+          }
+
+          // 初始化点调模式下元素
+          let pointTurnTop = document.createElement("div");
+          pointTurnTop.className = "point-turn-top";
+          let pointTurnCenter = document.createElement("div");
+          pointTurnCenter.className = "point-turn-center";
+          let pointTurnBottom = document.createElement("div");
+          pointTurnBottom.className = "point-turn-bottom";
+          let pointTurnOther = document.createElement("div");
+          pointTurnOther.className = "point-turn-other";
+
+          // 创建占位符元素
+          let placeHolderElm1 = document.createElement("div");
+          let placeHolderElm2 = document.createElement("div");
+          placeHolderElm1.className = "participant";
+          placeHolderElm1.innerHTML = this.placeholderTemplate;
+          placeHolderElm2.className = "participant";
+          placeHolderElm2.innerHTML = this.placeholderTemplate;
+
+          // 预先添加占位符
+          pointTurnCenter.appendChild(placeHolderElm1);
+          pointTurnCenter.appendChild(placeHolderElm2);
+
+          if (this.currentLayout === "grid") {
+            // 从宫格布局到点调模式
+            // 收集所有参与者元素，避免在循环中操作DOM结构导致的问题
+            const participantElements = Array.from(container.children).filter(
+              (child) =>
+                child.classList.contains("participant") && child.id.startsWith("participant-")
+            );
+
+            console.log(
+              "找到的参与者元素:",
+              participantElements.map((el) => el.id)
+            );
+
+            // 处理参与者元素分配到各个位置
+            participantElements.forEach((child) => {
+              if (this.curHostIdentity && child.id === `participant-${this.curHostIdentity}`) {
+                // 主持人放在中心区域第一个位置
+                pointTurnCenter.removeChild(placeHolderElm1);
+                pointTurnCenter.insertBefore(child, pointTurnCenter.firstChild ?? null);
+              } else if (
+                this.curBlurIdentity &&
+                child.id === `participant-${this.curBlurIdentity}`
+              ) {
+                if (this.curBlurIdentity === this.curHostIdentity) {
+                  // 当焦点用户和主持人为同一人，什么都不做
+                  void 0;
+                } else {
+                  // 焦点用户放在中心区域第二个位置
+                  pointTurnCenter.removeChild(placeHolderElm2);
+                  pointTurnCenter.appendChild(child);
+                }
+              } else {
+                // 其他用户按顺序放入top、bottom、other区域
+                if (pointTurnTop.children.length >= 5) {
+                  if (pointTurnBottom.children.length >= 5) {
+                    pointTurnOther.appendChild(child);
+                  } else {
+                    pointTurnBottom.appendChild(child);
+                  }
+                } else {
+                  pointTurnTop.appendChild(child);
+                }
+              }
+            });
+          }
+
+          if (this.currentLayout === "rightSide") {
+            // 从焦点布局到点调模式
+            let layoutRightSideEle = document.querySelector("#room .layout-rightside");
+            let layoutLeftSideEle = document.querySelector("#room .layout-leftside");
+
+            // 处理左侧容器（焦点用户）
+            if (layoutLeftSideEle) {
+              let child = null;
+              while ((child = layoutLeftSideEle.firstChild)) {
+                if (child) {
+                  if (this.curHostIdentity && child.id === `participant-${this.curHostIdentity}`) {
+                    // 主持人存在且当前与会者为主持人
+                    pointTurnCenter.removeChild(placeHolderElm1);
+                    pointTurnCenter.insertBefore(child, pointTurnCenter.firstChild ?? null);
+                  } else if (
+                    this.curBlurIdentity &&
+                    child.id === `participant-${this.curBlurIdentity}`
+                  ) {
+                    if (this.curBlurIdentity === this.curHostIdentity) {
+                      // 当焦点用户和主持人为同一人，什么都不做
+                      void 0;
+                    } else {
+                      pointTurnCenter.removeChild(placeHolderElm2);
+                      pointTurnCenter.appendChild(child);
+                    }
+                  } else {
+                    // 分配到其他区域
+                    if (pointTurnTop.children.length >= 5) {
+                      if (pointTurnBottom.children.length >= 5) {
+                        pointTurnOther.appendChild(child);
+                      } else {
+                        pointTurnBottom.appendChild(child);
+                      }
+                    } else {
+                      pointTurnTop.appendChild(child);
+                    }
+                  }
+                }
+              }
+              // 检查元素是否仍然是 container 的子元素，然后移除
+              if (container.contains(layoutLeftSideEle)) {
+                container.removeChild(layoutLeftSideEle);
+              } else {
+                console.warn("layoutLeftSideEle is no longer a child of container");
+              }
+            }
+
+            // 处理右侧容器
+            if (layoutRightSideEle) {
+              let child = null;
+              while ((child = layoutRightSideEle.firstChild)) {
+                if (child) {
+                  if (this.curHostIdentity && child.id === `participant-${this.curHostIdentity}`) {
+                    pointTurnCenter.removeChild(placeHolderElm1);
+                    pointTurnCenter.insertBefore(child, pointTurnCenter.firstChild ?? null);
+                  } else if (
+                    this.curBlurIdentity &&
+                    child.id === `participant-${this.curBlurIdentity}`
+                  ) {
+                    if (this.curBlurIdentity === this.curHostIdentity) {
+                      // 当焦点用户和主持人为同一人，什么都不做
+                      void 0;
+                    } else {
+                      pointTurnCenter.removeChild(placeHolderElm2);
+                      pointTurnCenter.appendChild(child);
+                    }
+                  } else {
+                    // 分配到其他区域
+                    if (pointTurnTop.children.length >= 5) {
+                      if (pointTurnBottom.children.length >= 5) {
+                        pointTurnOther.appendChild(child);
+                      } else {
+                        pointTurnBottom.appendChild(child);
+                      }
+                    } else {
+                      pointTurnTop.appendChild(child);
+                    }
+                  }
+                }
+              }
+              // 检查元素是否仍然是 container 的子元素，然后移除
+              if (container.contains(layoutRightSideEle)) {
+                container.removeChild(layoutRightSideEle);
+              } else {
+                console.warn("layoutRightSideEle is no longer a child of container");
+              }
+            }
+          }
+
+          // 添加点调容器之前的最终检查
+          const remainingLayoutElements = container.querySelectorAll(
+            ".layout-leftside, .layout-rightside, .point-turn-top, .point-turn-center, .point-turn-bottom, .point-turn-other"
+          );
+          if (remainingLayoutElements.length > 0) {
+            console.warn(
+              "发现遗留的布局元素，强制清理:",
+              Array.from(remainingLayoutElements).map((el) => el.className)
+            );
+            remainingLayoutElements.forEach((element) => {
+              if (container.contains(element)) {
+                // 将子元素移回主容器
+                Array.from(element.children).forEach((child) => {
+                  if (child.classList.contains("participant")) {
+                    container.appendChild(child);
+                  }
+                });
+                container.removeChild(element);
+              }
+            });
+          }
+
+          // 点调模式下元素添加到container下
+          console.log(
+            "添加点调容器到主容器，当前container子元素:",
+            Array.from(container.children).map((el) => el.className || el.tagName)
+          );
+
+          container.insertBefore(pointTurnTop, container.firstChild ?? null);
+          container.appendChild(pointTurnCenter);
+          container.appendChild(pointTurnBottom);
+          container.appendChild(pointTurnOther);
+
+          console.log("点调容器添加完成，最终结构:", {
+            containerChildren: Array.from(container.children).map((el) => el.className),
+            pointTurnTopChildren: Array.from(pointTurnTop.children).map(
+              (el) => el.className || el.id
+            ),
+            pointTurnCenterChildren: Array.from(pointTurnCenter.children).map(
+              (el) => el.className || el.id
+            ),
+            pointTurnBottomChildren: Array.from(pointTurnBottom.children).map(
+              (el) => el.className || el.id
+            ),
+            pointTurnOtherChildren: Array.from(pointTurnOther.children).map(
+              (el) => el.className || el.id
+            ),
+          });
+        } else {
+          // 点调模式切换到会议模式
+          let pointTurnTop = document.querySelector("#room .point-turn-top");
+          let pointTurnCenter = document.querySelector("#room .point-turn-center");
+          let pointTurnBottom = document.querySelector("#room .point-turn-bottom");
+          let pointTurnOther = document.querySelector("#room .point-turn-other");
+
+          console.log("currentLayout", this.currentLayout);
+
+          if (this.currentLayout === "grid") {
+            // 从点调模式到宫格布局
+            const processContainer = (containerEle) => {
+              if (!containerEle) {
+                console.warn("processContainer: containerEle is null");
+                return;
+              }
+
+              // 检查元素是否真的是 container 的子元素
+              if (!container.contains(containerEle)) {
+                console.warn("processContainer: containerEle is not a child of container");
+                return;
+              }
+
+              if (containerEle.children.length > 0) {
+                let child = null;
+                while ((child = containerEle.firstChild)) {
+                  if (child) {
+                    if (child.id) {
+                      // 有ID的是真实用户元素
+                      container.appendChild(child);
+                    } else {
+                      // 无ID的是占位符，直接移除
+                      child.remove();
+                    }
+                  }
+                }
+              }
+
+              // 再次检查元素是否仍然是 container 的子元素，然后移除
+              if (container.contains(containerEle)) {
+                container.removeChild(containerEle);
+              } else {
+                console.warn("processContainer: containerEle is no longer a child of container");
+              }
+            };
+
+            processContainer(pointTurnTop);
+            processContainer(pointTurnCenter);
+            processContainer(pointTurnBottom);
+            processContainer(pointTurnOther);
+          }
+
+          if (this.currentLayout === "rightSide") {
+            // 从点调模式到焦点布局
+            let layoutLeftSideEle = document.createElement("div");
+            layoutLeftSideEle.className = "layout-leftside";
+            let layoutRightSideEle = document.createElement("div");
+            layoutRightSideEle.className = "layout-rightside";
+
+            const processContainerForRightSide = (containerEle) => {
+              if (!containerEle) {
+                console.warn("processContainerForRightSide: containerEle is null");
+                return;
+              }
+
+              // 检查元素是否真的是 container 的子元素
+              if (!container.contains(containerEle)) {
+                console.warn(
+                  "processContainerForRightSide: containerEle is not a child of container"
+                );
+                return;
+              }
+
+              // 处理容器中的子元素（如果有的话）
+              if (containerEle.children.length > 0) {
+                let child = null;
+                while ((child = containerEle.firstChild)) {
+                  if (child) {
+                    if (child.id) {
+                      // 有ID的是真实用户元素
+                      if (
+                        this.curBlurIdentity &&
+                        child.id === `participant-${this.curBlurIdentity}`
+                      ) {
+                        layoutLeftSideEle.appendChild(child);
+                      } else if (
+                        this.localIdentity &&
+                        child.id === `participant-${this.localIdentity}`
+                      ) {
+                        layoutLeftSideEle.appendChild(child);
+                      } else {
+                        layoutRightSideEle.appendChild(child);
+                      }
+                    } else {
+                      // 无ID的是占位符，直接移除
+                      child.remove();
+                    }
+                  }
+                }
+              }
+
+              // 再次检查元素是否仍然是 container 的子元素，然后移除
+              if (container.contains(containerEle)) {
+                container.removeChild(containerEle);
+              } else {
+                console.warn(
+                  "processContainerForRightSide: containerEle is no longer a child of container"
+                );
+              }
+            };
+
+            processContainerForRightSide(pointTurnTop);
+            processContainerForRightSide(pointTurnCenter);
+            processContainerForRightSide(pointTurnBottom);
+            processContainerForRightSide(pointTurnOther);
+
+            // 添加布局容器
+            container.insertBefore(layoutLeftSideEle, container.firstChild ?? null);
+            container.appendChild(layoutRightSideEle);
+          }
+        }
+      });
+    },
+
+    initGlobleEvent() {
+      window.addEventListener("click", this.clickAway);
+      window.addEventListener("beforeunload", this.verifyLeavePage);
+      document.addEventListener("fullscreenchange", this.fullscreenChangeHandler);
+    },
+    removeGlobleEvent() {
+      window.removeEventListener("click", this.clickAway);
+      document.removeEventListener("fullscreenchange", this.fullscreenChangeHandler);
+    },
+    fullscreenChangeHandler() {
+      if (document.fullscreenElement) {
+        this.isFullScreen = true;
+      } else {
+        this.isFullScreen = false;
+      }
+    },
+
+    stopUnjoinParticipantPolling() {
+      if (this.unjoinParticipantInterval) {
+        clearInterval(this.unjoinParticipantInterval);
+        this.unjoinParticipantInterval = null;
+      }
+    },
+    dispatchLiveClientEvent() {
+      if (this.liveClient) {
+        if (this.pageEventList.length > 0) {
+          this.pageEventList.forEach((eventName) => {
+            console.log("解除绑定事件:", eventName);
+            this.liveClient.off(eventName);
+          });
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.meeting-room {
+  width: 1354px;
+  height: 916px;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  z-index: 2000;
+  overflow: hidden;
+  border-radius: 6px;
+
+  &-top-bar {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--dialog-title-bg);
+    padding: 0 20px;
+    border-bottom: 1px solid var(--dialog-border-color);
+
+    .bar-group {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+
+      .meeting-theme {
+        position: relative;
+        flex-shrink: 0;
+        text-align: center;
+        width: 80px;
+        height: 28px;
+        background: var(--theme-color);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 400;
+        font-size: 14px;
+        margin-right: 20px;
+        color: var(--theme-font-color);
+      }
+
+      .meeting-name {
+        cursor: pointer;
+        flex-shrink: 0;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        font-weight: 400;
+        font-size: 16px;
+        color: var(--theme-font-color);
+        position: relative;
+
+        &-text {
+          flex-shrink: 0;
+          white-space: nowrap;
+          margin-right: 12px;
+        }
+
+        &-icon {
+          flex-shrink: 0;
+          width: 10px;
+          height: 5px;
+          background: var(--ready-arrow-icon) no-repeat center / 140% 140%;
+          transition: transform 0.2s ease;
+          &-expanded {
+            transform: rotate(180deg);
+          }
+        }
+      }
+
+      .btn {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        position: relative;
+      }
+
+      .layout {
+        background: var(--meeting-layout-icon) no-repeat center / 100% 100%;
+
+        &-active {
+          background: var(--meeting-layout-icon) no-repeat center / 100% 100%;
+        }
+      }
+      .custom-layout {
+        background: var(--custom-layout-header-icon) no-repeat center / 100% 100%;
+      }
+      .slide-small {
+        background: var(--meeting-slide-small-icon) no-repeat center / 100% 100%;
+        margin-right: 12px;
+      }
+      .full-screen {
+        background: var(--call-fullscreen-icon) no-repeat center / 100% 100%;
+      }
+
+      .close-meeting-icon {
+        background: var(--close-icon) no-repeat center / 100% 100%;
+      }
+
+      &-text {
+        cursor: pointer;
+        font-weight: 400;
+        font-size: 12px;
+        color: var(--theme-font-color);
+        margin: 0 12px 0 6px;
+      }
+      &-split {
+        width: 1px;
+        height: 20px;
+        background: var(--dialog-border-color);
+        margin: 0 20px;
+      }
+    }
+
+    .meeting-duration {
+      font-weight: 500;
+      font-size: 16px;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: nowrap;
+
+      &-logo {
+        width: 16px;
+        height: 16px;
+        background: var(--call-duration-icon) no-repeat center / 100% 100%;
+        margin-right: 7px;
+      }
+
+      span {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  &-contain {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    position: relative;
+
+    &-left {
+      flex-shrink: 0;
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      &-slide {
+        width: calc(100% - 347px);
+      }
+
+      .meeting {
+        width: 100%;
+        height: 100%;
+        background: var(--meeting-bg);
+        padding: 5px;
+        overflow-y: auto;
+        position: relative;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        &-slide {
+          height: calc(100% - 66px);
+        }
+      }
+
+      .meeting-control-bar {
+        width: 100%;
+        height: 66px;
+        padding: 10px 20px 20px;
+        background: var(--dialog-bg);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: absolute;
+        z-index: 100;
+        bottom: -66px;
+        left: 0;
+        transition: all 0.2s ease;
+
+        &-show {
+          bottom: 0;
+        }
+
+        .bar-group {
+          display: flex;
+          align-items: center;
+          flex-wrap: nowrap;
+
+          .custom-select {
+            position: relative;
+            background: var(--ready-dialog-select-bg);
+            border-radius: 6px;
+            height: 36px;
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            padding: 0 12px;
+            cursor: pointer;
+            &:not(:last-child) {
+              margin-right: 12px;
+            }
+
+            &-btn {
+              width: 20px;
+              height: 20px;
+              margin-right: 6px;
+              position: relative;
+            }
+
+            &-right {
+              display: flex;
+              align-items: center;
+              flex-wrap: nowrap;
+              position: relative;
+              font-weight: 400;
+              font-size: 14px;
+              color: var(--theme-font-color);
+              cursor: pointer;
+              &-text {
+                white-space: nowrap;
+                flex: 1 0;
+                margin-right: 12px;
+              }
+              .arrow-icon {
+                width: 8px;
+                height: 4px;
+                flex: 1 0;
+                background: var(--ready-arrow-icon) no-repeat center / 100% 100%;
+              }
+            }
+
+            .mic-on {
+              background: var(--ready-mic-on-icon) no-repeat center / 100% 100%;
+            }
+
+            .mic-off {
+              background: url("../../assets/image/common/mic_off_small.png") no-repeat center / 100%
+                100%;
+            }
+
+            .cam-on {
+              background: var(--ready-cam-on-icon) no-repeat center / 100% 100%;
+            }
+
+            .cam-off {
+              background: url("../../assets/image/common/cam_off_small.png") no-repeat center / 100%
+                100%;
+            }
+
+            .theme-icon {
+              background: var(--meeting-mode-icon) no-repeat center / 100% 100%;
+            }
+          }
+
+          .t-btn {
+            position: relative;
+            cursor: pointer;
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            padding: 0 12px;
+            height: 36px;
+            background: var(--ready-dialog-select-bg);
+            border-radius: 6px;
+            font-weight: 400;
+            font-size: 14px;
+            color: var(--theme-font-color);
+
+            &:not(:last-child) {
+              margin-right: 12px;
+            }
+
+            span {
+              white-space: nowrap;
+            }
+
+            &-icon {
+              width: 20px;
+              height: 20px;
+              margin-right: 6px;
+            }
+            &-hide {
+              .t-btn-icon {
+                margin-right: 0;
+              }
+              span {
+                display: none;
+              }
+            }
+            .screen-share {
+              background: var(--meeting-share-icon) no-repeat center / 100% 100%;
+            }
+            .screen-share-off {
+              background: var(--meeting-share-icon) no-repeat center / 100% 100%;
+            }
+            .chat {
+              background: var(--meeting-chat-icon) no-repeat center / 100% 100%;
+            }
+            .record {
+              background: var(--meeting-record-icon) no-repeat center / 100% 100%;
+            }
+            .record-off {
+              background: var(--meeting-record-icon) no-repeat center / 100% 100%;
+            }
+            .invite {
+              background: var(--meeting-invite-icon) no-repeat center / 100% 100%;
+            }
+            .setting {
+              background: var(--meeting-setting-icon) no-repeat center / 100% 100%;
+            }
+            .member {
+              background: var(--meeting-member-icon) no-repeat center / 100% 100%;
+            }
+          }
+        }
+
+        .exit-btn {
+          cursor: pointer;
+          width: 112px;
+          height: 36px;
+          line-height: 36px;
+          background: var(--btn-danger-bg);
+          border-radius: 6px;
+          text-align: center;
+          font-weight: 500;
+          font-size: 16px;
+          color: #ffffff;
+          border: 1px solid var(--btn-danger-bg);
+        }
+      }
+    }
+
+    &-right {
+      flex-shrink: 0;
+      height: 100%;
+    }
+  }
+}
+</style>
+<style lang="scss">
+@import "./style/index.scss";
+</style>