mdm-client 1.0.2 → 1.0.4

package/src/components/LiveMultipleMeeting/LiveMultipleMeeting.vue

@@ -43,10 +43,12 @@
           <LayoutSwitch
             v-if="layoutSwitchShow"
             :currentLayout="currentLayout"
+            :current-grid-size="currentGridSize"
             :layoutList="layoutList"
             :layoutLabels="layoutLabels"
             :currentRoomMode="currentRoomMode"
             @setLayout="manualSetLayout"
+            @setGridSize="setGridSize"
             @mouseenter.native="layoutSwitchShow = true"
             @mouseleave.native="layoutSwitchShow = false"
           ></LayoutSwitch>
@@ -86,6 +88,12 @@
             @screenShareOptionChange="screenShareOptionChange"
             @stopScreenShare="stopScreenShare"
           ></ScreenShareBoard>
+          <LeadershipFocus
+            v-if="isLeaderShipFocusShow"
+            :participant="curLeadershipFocus"
+            :local-metadata="localMetadata"
+            @moreClick="leaderShipMoreClick"
+            @microphoneClick="leaderShipMicroClick"></LeadershipFocus>
         </div>
 
         <!-- 会议控制栏 -->
@@ -321,6 +329,7 @@
       :participants="participants"
       :meetingHost="meetingHost"
       :meetingCoHost="meetingCoHost"
+      :leaderShipFocus="leaderShipFocus"
       @close="moreDialogShow = false"
       @setToBlur="setMemberBlur"
       @removeFromBlur="removeCurBlur"
@@ -335,14 +344,17 @@
       @remove="removeMember"
       @setToCoHost="setToCoHost"
       @removeFromCoHost="removeFromCoHost"
+      @openLeadershipFocus="openLeadershipFocus"
+      @closeLeadershipFocus="closeLeadershipFocus"
     >
     </MoreOptionDialog>
     <AddressBook
-      :inviteList="inviteList"
       :baseUrl="baseUrl"
       :token="token"
+      :tab-list="addressBookTabList"
       @appendInvitePeople="appendInvitePeople"
       @appendInviteDevice="appendInviteDevice"
+      @appendInviteTerminal="appendInviteTerminal"
     ></AddressBook>
     <UpdateNameDialog @updateNameConfirm="updateNameConfirm"></UpdateNameDialog>
     <SettingDialog
@@ -375,7 +387,9 @@ import SelectSpecialDialog from "../other/selectSpecialDialog.vue";
 import ScreenShareBoard from "../other/screenShareBoard.vue";
 import SettingDialog from "../other/settingDialog.vue";
 import CustomLayout from "../other/customLayout.vue";
+import LeadershipFocus from "../other/leadershipFocus.vue";
 
+let ringResizeObserver = null;
 export default {
   name: "LiveMultipleMeeting",
   components: {
@@ -394,6 +408,7 @@ export default {
     ScreenShareBoard,
     SettingDialog,
     CustomLayout,
+    LeadershipFocus
   },
   props: {
     tempMeetingName: {
@@ -425,6 +440,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    meetingTerminals: {
+      type: Array,
+      default: () => [],
+    },
     userData: {
       type: Object,
       default: () => ({}),
@@ -441,18 +460,10 @@ export default {
       type: String,
       default: "launch",
     },
-    isCustomizeMiniInvitations: {
-      type: Boolean,
-      default: false,
-    },
     miniPagePath: {
       type: String,
       default: "",
     },
-    defaultInviteWay: {
-      type: String,
-      default: "identity",
-    },
     isInMeeting: {
       type: Boolean,
       default: false,
@@ -461,6 +472,21 @@ export default {
       type: String,
       default: "",
     },
+    // 通讯录可见的标签页配置
+    addressBookTabList: {
+      type: Array,
+      default: () => ["组织架构", "人员", "会议终端", "volte", "设备", "监控", "常用分组"],
+    },
+    // 语音激励开关
+    isVoiceMotivationOpen: {
+      type: Boolean,
+      default: false,
+    },
+    // 镜像开关
+    isMirror: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -504,9 +530,9 @@ export default {
       // 布局数据
       currentLayout: "grid",
       currentRoomMode: "normal",
-      layoutList: ["grid", "rightSide"],
-      layoutLabels: ["宫格", "右侧边栏"],
-
+      layoutList: ["grid", "rightSide", "ring"],
+      layoutLabels: ["宫格", "右侧边栏", "环形"],
+      currentGridSize: 9,
       // 状态数据
       duration: 0,
       memberManageShow: false,
@@ -590,6 +616,15 @@ export default {
       durationInterval: null,
       footerInterval: null,
       unjoinParticipantInterval: null,
+      // 保存与会者画面旋转状态
+      rotateDegreeMap: new Map(),
+      // 当前聚焦画面
+      leaderShipFocus: ""
+    };
+  },
+  provide() {
+    return {
+      rotateDegreeMap: this.rotateDegreeMap,
     };
   },
   computed: {
@@ -602,12 +637,33 @@ export default {
     participantIdentities() {
       return this.participantNum > 0 ? this.participants.map((item) => item.identity) : [];
     },
+    isLeaderShipFocusShow() {
+      if (!this.leaderShipFocus) {
+        return false
+      }
+      if (this.participantNum <= 0) {
+        return false
+      }
+      if (this.participantIdentities.includes(this.leaderShipFocus)) {
+        return true
+      }
+    },
+    curLeadershipFocus() {
+      if (this.participantNum <= 0 || !this.leaderShipFocus) {
+        return {}
+      } else {
+        return this.participants.find(item => item.identity === this.leaderShipFocus)
+      }
+    },
     inviteNum() {
       return this.inviteList.length;
     },
     deviceNum() {
       return this.deviceList.length;
     },
+    terminalNum() {
+      return this.meetingTerminals.length;
+    },
     invitedNum() {
       return this.tempInvitedList?.length || 0;
     },
@@ -629,22 +685,55 @@ export default {
         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";
+          // 当前为宫格布局时, 不同与会者数量对应不同样式
+          if (this.currentGridSize === 9) {
+            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 {
+              return 'grid5'
+            }
+          } else if (this.currentGridSize === 16) {
+            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 <= 16) {
+              return 'grid6'
+            } else {
+              return 'grid6'
+            }
+          } else if (this.currentGridSize === 25) {
+            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 <= 16) {
+              return 'grid6'
+            } else if (this.participantNum <= 25) {
+              return 'grid7'
+            } else {
+              return 'grid7'
+            }
           }
         } else {
           return this.currentLayout;
@@ -722,14 +811,148 @@ export default {
     }
     this.setPageFooterVisible(5);
     this.initGlobleEvent();
+    // 观察#room尺寸变化，动态同步环形布局顶部高度
+    this.observeRoomResizeForRing();
+    // 首次挂载后尝试同步一次高度
+    requestAnimationFrame(() => this.updateRingTopHeight());
   },
   beforeDestroy() {
     this.stopUnjoinParticipantPolling();
     this.dispatchLiveClientEvent();
     this.removeGlobleEvent();
+    // 清理observer或事件监听
+    if (ringResizeObserver) {
+      try { ringResizeObserver.disconnect(); } catch (e) {}
+      ringResizeObserver = null;
+    } else {
+      window.removeEventListener('resize', this.updateRingTopHeight);
+    }
     this.liveClient = null;
   },
   methods: {
+    handleInviteType(integrationType = 0) {
+      // 根据integrationType返回对应的makeCall的type参数
+      switch (Number(integrationType)) {
+        case 0:
+          return 1
+        case 1:
+          return 2
+        case 2:
+          return 3
+        default:
+          return 1
+      }
+    },
+    leaderShipMoreClick(e) {
+      // 动态计算选项数量以获得精确的弹窗高度
+      const optionCount = this.getOptionCount(e.identity)
+
+      // 使用工具函数计算弹窗位置（使用真实的MoreOptionDialog尺寸）
+      this.optionDialogOffset = this.calculateDialogPosition(e.event, {
+        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
+      }
+    },
+    async leaderShipMicroClick() {
+      await this.liveClient.changeParticipantMicrophoneStatus(e.identity, e.isMuted)
+    },
+    // 聚焦画面
+    async openLeadershipFocus(identity) {
+      await this.liveClient.openLeadershipFocus(identity)
+    },
+    // 取消聚焦画面
+    async closeLeadershipFocus(identity) {
+      await this.liveClient.closeLeadershipFocus(identity)
+    },
+    updateRingTopHeight() {
+      try {
+        const room = document.getElementById('room');
+        if (!room) return;
+        const ringTop = room.querySelector('.layout-ring-top');
+        if (!ringTop) return;
+        // 使用clientHeight以获得包含内边距的可见高度
+        const roomHeight = room.clientHeight;
+        // 设置明确像素高度，覆盖CSS百分比或flex计算值
+        ringTop.style.height = roomHeight + 'px';
+      } catch (e) {
+        console.warn('updateRingTopHeight error:', e);
+      }
+    },
+    observeRoomResizeForRing() {
+      const room = document.getElementById('room');
+      if (!room) return;
+      // 优先使用ResizeObserver，实时响应容器尺寸变化
+      if ('ResizeObserver' in window) {
+        ringResizeObserver = new ResizeObserver(() => {
+          this.updateRingTopHeight();
+        });
+        ringResizeObserver.observe(room);
+      } else {
+        // 回退到window resize
+        window.addEventListener('resize', this.updateRingTopHeight);
+      }
+    },
+    setGridSize(size) {
+      this.currentGridSize = size;
+    },
+    // 根据identity和度数应用到video元素和旋转按钮的样式/属性
+    applyRotation(identity, degree) {
+      try {
+        const norm = ((degree % 360) + 360) % 360; // 归一化到0-359
+        // 更新video元素的transform和objectFit
+        const videoElm = document.getElementById(`video-${identity}`);
+        if (videoElm) {
+          videoElm.style.transformOrigin = 'center center';
+          // 针对90/270度，居中并以高度为基准适配，避免布局“怪异”
+          if (norm === 90 || norm === 270) {
+            const parent = videoElm.parentElement;
+            if (parent) {
+              const rect = parent.getBoundingClientRect();
+              // 旋转后使可视区域与父容器宽高贴合：宽高对调为父容器的高/宽
+              videoElm.style.top = '50%';
+              videoElm.style.left = '50%';
+              videoElm.style.width = `${rect.height}px`;
+              videoElm.style.height = `${rect.width}px`;
+              videoElm.style.transform = `translate(-50%, -50%) rotate(${norm}deg)`;
+              // 使用cover确保充满父容器（必要时会稍作裁剪）
+              videoElm.style.objectFit = 'cover';
+            }
+          } else {
+            // 0/180度直接占满容器
+            videoElm.style.top = '0';
+            videoElm.style.left = '0';
+            videoElm.style.width = '100%';
+            videoElm.style.height = '100%';
+            videoElm.style.transform = `rotate(${norm}deg)`;
+            videoElm.style.objectFit = 'contain';
+          }
+        }
+
+        // 更新旋转按钮的class以反映当前角度（1..4）
+        const rotateElm = document.getElementById(`rotate-${identity}`);
+        if (rotateElm) {
+          let clsIndex = 1;
+          if (norm === 0) clsIndex = 1;
+          else if (norm === 90) clsIndex = 2;
+          else if (norm === 180) clsIndex = 3;
+          else if (norm === 270) clsIndex = 4;
+          rotateElm.className = `rotate-icon rotate-icon${clsIndex}`;
+        }
+      } catch (err) {
+        // 忽略DOM异常
+        console.error('applyRotation error', err);
+      }
+    },
     // DOM操作管理函数
     async batchUpdateStates(updateFn) {
       this.isBatchUpdating = true;
@@ -876,12 +1099,12 @@ export default {
     // 计算MoreOptionDialog选项数量的辅助函数
     getOptionCount(identity) {
       const participantItem = this.getUserItemByIdentity(identity);
-      if (!participantItem || !participantItem.metadata) return 8; // 默认最大选项数
+      if (!participantItem || !participantItem.metadata) return 9; // 默认最大选项数
 
       const metadata = participantItem.metadata;
       const isLocalParticipant = identity === this.localIdentity;
 
-      let optionCount = 3; // 基础选项：设为主屏、麦克风、摄像头
+      let optionCount = 4; // 基础选项：设为主屏、麦克风、摄像头、聚焦画面
 
       if (this.judgeParticipantIsHost(this.localIdentity)) {
         // 本地为主持人
@@ -906,7 +1129,7 @@ export default {
         }
       }
 
-      return Math.min(optionCount, 8); // 限制最大选项数
+      return Math.min(optionCount, 9); // 限制最大选项数
     },
     // 弹窗定位工具函数
     calculateDialogPosition(event, options = {}) {
@@ -1120,16 +1343,16 @@ export default {
       if (this.inviteNum <= 0) {
         this.inviteList.push(userItem);
       } else {
-        if (this.judgePersonIsInvited(userItem.id) < 0) {
+        if (this.judgePersonIsInvited(userItem.phone) < 0) {
           this.inviteList.push(userItem);
         }
       }
     },
     // 判断是否已经在邀请列表中
-    judgePersonIsInvited(id) {
+    judgePersonIsInvited(phone) {
       if (this.inviteNum > 0) {
         let index = this.inviteList.findIndex((item) => {
-          return item.id === id;
+          return item.phone === phone;
         });
         return index;
       } else {
@@ -1367,16 +1590,45 @@ export default {
         this.$emit("meetingStart");
         if (this.joinType == "launch") {
           // 发送邀请信息
-          this.sendInviteMessage([], this.defaultInviteWay == "mini" ? 3 : 0);
+          this.sendInviteMessage([]);
           // 拉取监控设备
-          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);
-              }
-            });
+          // 使用批量外呼替换逐条外呼
+          if (this.deviceNum > 0 && this.deviceList) {
+            const deviceCalls = this.deviceList
+              .map(item => {
+                const id = item?.source === '监控' ? item?.monitorID : item?.equipmentID;
+                return id ? { dnis: id, name: item.label, type: this.handleInviteType(item?.integrationType) } : null;
+              })
+              .filter(Boolean);
+
+            if (deviceCalls.length > 0) {
+              this.liveClient.makeBatchCall(deviceCalls)
+                .then(() => {
+                  this.showMessage.message('success', '监控设备批量外呼已发起');
+                })
+                .catch(err => {
+                  this.showMessage.message('error', `批量拉取监控设备失败: ${err?.message || err}`);
+                });
+            }
+          }
+          // 拉取会议终端
+          if (this.terminalNum > 0 && this.meetingTerminals) {
+            const terminalCalls = this.meetingTerminals
+              .map(item => {
+                return item?.id ? { dnis: item.id, name: item.label, type: 4 } : null
+              })
+              .filter(Boolean)
+            if (terminalCalls.length > 0) {
+              this.liveClient
+                .makeBatchCall(terminalCalls)
+                .then(() => {
+                  this.showMessage.message('success', '会议终端批量外呼已发起')
+                })
+                .catch(err => {
+                  this.showMessage.message('error', `批量拉取会议终端失败: ${err?.message || err}`)
+                })
+            }
+          }
         }
         // 启动获取未入会和邀请人员轮询
         this.startUnjoinParticipantPolling();
@@ -1472,10 +1724,48 @@ export default {
             }
           });
           if (maxAudioLevelIndex >= 0) {
-            this.switchActiveSpeakerToFirst(e[maxAudioLevelIndex]);
+            this.highlightCurrentSpeaker(e[maxAudioLevelIndex])
+            if (this.isVoiceMotivationOpen) {
+              this.switchActiveSpeakerToFirst(e[maxAudioLevelIndex])
+            }
+          } else {
+            this.highlightCurrentSpeaker(-1)
           }
+        } else {
+          this.highlightCurrentSpeaker(-1)
         }
       });
+      this.liveClient.on("resMeetingRefresh", this.handleResMeetingRefresh);
+    },
+    // 高亮当前与会者
+    highlightCurrentSpeaker(speaker) {
+      const participantElms = document.querySelectorAll('#room .participant')
+      if (speaker === -1) {
+        if (participantElms.length > 0) {
+          participantElms.forEach(elm => {
+            elm.style.border = 'none'
+          })
+        }
+      } else if (speaker && speaker.identity) {
+        const speakerElm = document.getElementById(`participant-${speaker.identity}`)
+        if (participantElms.length > 0) {
+          participantElms.forEach(elm => {
+            elm.style.border = 'none'
+          })
+        }
+        speakerElm && (speakerElm.style.border = '2px solid #95ec69')
+      }
+    },
+    handleResMeetingRefresh(e) {
+      console.log('resMeetingRefresh事件触发', e);
+
+      if (e.includes("queryAllInvite") || e.includes("queryUnjoined")) {
+        console.log('this', this, this.getUnjoinParticipant);
+
+        this.getUnjoinParticipant();
+        this.queryAllInviteParticipant();
+        this.startUnjoinParticipantPolling();
+      }
     },
     handleRoomDataReceived(e) {
       switch (e.topic) {
@@ -1617,7 +1907,7 @@ export default {
         } else {
           this.meetingCoHost = [];
         }
-
+        this.leaderShipFocus = metadata.leaderShipFocus;
         this.roomMetadata = metadata;
 
         // 批量设置关键状态
@@ -1693,6 +1983,7 @@ export default {
           this.meetingCoHost = [];
         }
 
+        this.leaderShipFocus = metadata.leaderShipFocus;
         this.roomMetadata = metadata;
 
         // 批量设置关键状态
@@ -1765,73 +2056,200 @@ export default {
         clearInterval(this.unjoinParticipantInterval);
         this.unjoinParticipantInterval = null;
       }
-
-      // 立即执行一次
-      this.getUnjoinParticipant();
-      this.queryAllInviteParticipant();
       // 设置5秒间隔的轮询
       this.unjoinParticipantInterval = setInterval(() => {
         this.getUnjoinParticipant();
         this.queryAllInviteParticipant();
-      }, 6000);
+      }, 30000);
     },
     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();
+    sendInviteMessage(tempList = []) {
+      // 确定使用的邀请列表
+      const inviteList = tempList.length <= 0 ? this.tempInviteList : tempList;
+      
+      if (!inviteList || inviteList.length <= 0) {
+        console.log('没有邀请人员');
+        return;
+      }
+
+      // 去重处理：按 phone 字段去重，按优先级保留
+      const deduplicatedList = [];
+      const phoneMap = new Map();
+
+      // 定义优先级：人员 > 组织架构/外部 > volte > 常用分组 > 未知
+      const getPriority = (source) => {
+        if (source === '人员') return 1;
+        if (source === '组织架构' || source === '外部') return 2;
+        if (source === 'volte') return 3;
+        if (source === '常用分组') return 4;
+        return 5; // 未知类型优先级最低
+      };
+
+      // 第一轮：处理非常用分组的项目，建立 phoneMap
+      inviteList.forEach((item, index) => {
+        const phone = item.phone;
+        if (!phone) {
+          // 没有 phone 字段的直接加入
+          deduplicatedList.push(item);
+          return;
+        }
+
+        // 如果是常用分组，先跳过，后续单独处理
+        if (item.source === '常用分组') {
+          return;
+        }
+
+        const existing = phoneMap.get(phone);
+        if (!existing) {
+          // 第一次遇到这个 phone
+          phoneMap.set(phone, { item, index });
+        } else {
+          // 已存在相同 phone，比较优先级
+          const existingPriority = getPriority(existing.item.source);
+          const currentPriority = getPriority(item.source);
+          
+          if (currentPriority < existingPriority) {
+            // 当前项优先级更高，替换
+            phoneMap.set(phone, { item, index });
+          } else if (currentPriority === existingPriority && index < existing.index) {
+            // 优先级相同，保留顺序靠前的
+            phoneMap.set(phone, { item, index });
+          }
+          // 否则保持原有的
+        }
+      });
+
+      // 第二轮：处理常用分组项目，根据 original 字段分类
+      const commonGroupItems = inviteList.filter(item => item.source === '常用分组');
+      commonGroupItems.forEach((item, index) => {
+        const phone = item.phone;
+        if (!phone) {
+          // 没有 phone 字段的直接加入
+          deduplicatedList.push(item);
+          return;
+        }
+
+        // 如果 phone 已经在 phoneMap 中，跳过（已有更高优先级的项）
+        if (phoneMap.has(phone)) {
+          return;
+        }
+
+        // 根据 original 字段确定实际的 source
+        let actualSource = item.original;
+        
+        // 如果 original 字段无效，默认为组织架构
+        if (!actualSource || !['人员', '组织架构', 'volte', '外部'].includes(actualSource)) {
+          actualSource = '组织架构';
+        }
+
+        // 创建新的项目，使用 original 作为实际 source
+        const processedItem = {
+          ...item,
+          source: actualSource
+        };
+
+        // 添加到 phoneMap
+        phoneMap.set(phone, { item: processedItem, index: index + inviteList.length });
+      });
+
+      // 将去重后的项添加到结果列表
+      phoneMap.forEach(({ item }) => {
+        if (!deduplicatedList.find(existing => existing.phone === item.phone)) {
+          deduplicatedList.push(item);
+        }
+      });
+
+      // 按 source 分组处理
+      const personList = [];
+      const orgAndExternalList = [];
+      const volteList = [];
+
+      deduplicatedList.forEach(item => {
+        if (item.source === '人员') {
+          personList.push(item);
+        } else if (item.source === '组织架构' || item.source === '外部') {
+          orgAndExternalList.push(item);
+        } else if (item.source === 'volte') {
+          volteList.push(item);
+        }
+      });
+
+      // 发送邀请
+      const promises = [];
+
+      // 处理人员邀请（invitationMethod = 0）
+      if (personList.length > 0) {
+        const personInviteData = personList.map(item => ({
+          userName: item.label,
+          identity: item?.loginCode ? item.loginCode : item.phone,
+          phone: item.phone
+        }));
+        
+        promises.push(
+          this.liveClient.inviteParticipant(this.meetingNum, personInviteData, false, 0)
+            .then(res => {
+              if (res.code === 200) {
+                personList.forEach(item => this.addToInviteList(item));
               } else {
-                this.showMessage.message("error", res?.msg);
+                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);
-            }
-          });
+            })
+            .catch(err => {
+              this.showMessage.message("error", `邀请人员失败: ${err.message}`);
+            })
+        );
+      }
+
+      // 处理组织架构和外部邀请（invitationMethod = 3）
+      if (orgAndExternalList.length > 0) {
+        const orgInviteData = orgAndExternalList.map(item => ({
+          userName: item.label,
+          identity: item?.loginCode ? item.loginCode : item.phone,
+          phone: item.phone
+        }));
+        
+        promises.push(
+          this.liveClient.inviteParticipant(this.meetingNum, orgInviteData, false, 3)
+            .then(res => {
+              if (res.code === 200) {
+                orgAndExternalList.forEach(item => this.addToInviteList(item));
+              } else {
+                this.showMessage.message("error", `邀请组织/外部人员失败: ${res?.msg}`);
+              }
+            })
+            .catch(err => {
+              this.showMessage.message("error", `邀请组织/外部人员失败: ${err.message}`);
+            })
+        );
       }
+
+      // 处理 volte 呼叫
+      if (volteList.length > 0) {
+        // 构建批量外呼数据
+        const volteCalls = volteList.map(item => ({
+          dnis: item.phone,
+          name: item.label,
+          type: 0
+        }));
+        
+        promises.push(
+          this.liveClient.makeBatchCall(volteCalls)
+            .then(() => {
+              volteList.forEach(item => this.addToInviteList(item));
+            })
+            .catch(err => {
+              this.showMessage.message("error", `批量呼叫失败: ${err.message}`);
+            })
+        );
+      }
+
+      // 等待所有邀请完成后更新列表
+      Promise.allSettled(promises).then(() => {
+        // 可以在这里添加统一的后续处理，如刷新邀请列表
+      });
     },
     queryAllInviteParticipant() {
       this.liveClient.getAllInviteParticipant(this.meetingNum).then((res) => {
@@ -1856,9 +2274,9 @@ export default {
         roomNum: this.meetingNum,
         cameraStatus: this.isCameraEnabled,
         microphoneStatus: this.isMicrophoneEnabled,
-        audioDeviceId: this.activeDevice.audioInputDevice,
-        videoDeviceId: this.activeDevice.videoDevice,
-        outputDeviceId: this.activeDevice.audioOutputDevice,
+        audioDeviceId: this.tempActiveDevice.audioInputDevice,
+        videoDeviceId: this.tempActiveDevice.videoDevice,
+        outputDeviceId: this.tempActiveDevice.audioOutputDevice,
       };
       let tempActiveDevice = null;
       try {
@@ -1992,36 +2410,83 @@ export default {
           </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>
-        `;
+        if (videoItem.metadata?.platformID == 5) {
+          videoDom.innerHTML = `
+            <video id="video-${
+              videoItem.identity
+            }" class="p-video" autoplay webkit-playsinline playsinline x5-video-player-type="h5"></video>
+            <div id="loadingIndicator-${videoItem.identity}" class="loadingIndicator">
+              <div class="loading-icon"></div>
+              <div class="loading-text">视频流加载中...</div>
+            </div>
+            <div id="signal-${videoItem.identity}" class="signal-icon signal-icon-good"></div>
+            <div id="more-${videoItem.identity}" class="more-icon"></div>
+            <div id="bitrate-${videoItem.identity}" class="bitrate-indicator"></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="signal-${videoItem.identity}" class="signal-icon signal-icon-good"></div>
+            <div id="more-${videoItem.identity}" class="more-icon"></div>
+            <div id="bitrate-${videoItem.identity}" class="bitrate-indicator"></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>
-        `;
+        if (videoItem.metadata?.platformID == 5) {
+          videoDom.innerHTML = `
+            <video id="video-${
+              videoItem.identity
+            }" class="p-video" autoplay webkit-playsinline playsinline x5-video-player-type="h5"></video>
+            <div id="loadingIndicator-${videoItem.identity}" class="loadingIndicator">
+              <div class="loading-icon"></div>
+              <div class="loading-text">视频流加载中...</div>
+            </div>
+            <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 id="bitrate-${videoItem.identity}" class="bitrate-indicator"></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 id="bitrate-${videoItem.identity}" class="bitrate-indicator"></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;
     },
@@ -2170,6 +2635,57 @@ export default {
               layoutRightSideEle.appendChild(videoDiv);
             }
           }
+        } else if (this.currentLayout === 'ring') {
+          // 环形布局：确保容器存在并将与会者放入合适位置
+          let layoutRing = document.querySelector('#room .layout-ring');
+          let layoutRingTop = layoutRing?.querySelector('.layout-ring-top');
+          let layoutRingBottom = layoutRing?.querySelector('.layout-ring-bottom');
+          let ringCenter = layoutRing?.querySelector('.ring-center');
+
+          // 如果容器不存在（可能由于时序问题），创建它
+          if (!layoutRing || !layoutRingTop || !layoutRingBottom || !ringCenter) {
+            layoutRing = document.createElement('div');
+            layoutRing.className = 'layout-ring';
+            layoutRingTop = document.createElement('div');
+            layoutRingTop.className = 'layout-ring-top';
+            layoutRingBottom = document.createElement('div');
+            layoutRingBottom.className = 'layout-ring-bottom';
+            // 创建12个环槽位
+            for (let i = 0; i < 12; i++) {
+              const slot = document.createElement('div');
+              slot.className = 'ring-slot';
+              layoutRingTop.appendChild(slot);
+            }
+            ringCenter = document.createElement('div');
+            ringCenter.className = 'ring-center';
+            layoutRingTop.appendChild(ringCenter);
+            layoutRing.appendChild(layoutRingTop);
+            layoutRing.appendChild(layoutRingBottom);
+      container.insertBefore(layoutRing, container.firstChild ?? null);
+      // 确保环形顶部高度与#room一致
+      requestAnimationFrame(() => this.updateRingTopHeight());
+          }
+
+          const appendToFirstEmptySlot = (el) => {
+            const slots = layoutRingTop.querySelectorAll('.ring-slot');
+            for (let i = 0; i < slots.length; i++) {
+              if (!slots[i].firstChild) {
+                slots[i].appendChild(el);
+                return true;
+              }
+            }
+            return false;
+          };
+
+          // 主持人优先放置在中心；否则进入第一个空槽；都满了则放到底部
+          if (this.curHostIdentity && videoItem.identity === this.curHostIdentity) {
+            ringCenter.appendChild(videoDiv);
+          } else {
+            const placed = appendToFirstEmptySlot(videoDiv);
+            if (!placed) {
+              layoutRingBottom.appendChild(videoDiv);
+            }
+          }
         }
       }
       return container;
@@ -2197,6 +2713,25 @@ export default {
         videoDiv = this.constructParticipantDom(videoItem);
         // 构建会议室布局
         container = this.constructRoomLayout(container, videoDiv, videoItem);
+
+        // 显示与会者画面加载中状态
+        let videoElm = document.getElementById(`video-${videoItem.identity}`)
+        let loadingIndicatorElm = document.getElementById(`loadingIndicator-${videoItem.identity}`)
+        if (videoItem.metadata?.platformID == 5 && videoElm && loadingIndicatorElm) {
+          setTimeout(() => {
+            loadingIndicatorElm.style.display = 'none'
+          }, 2000)
+        }
+        if (videoItem.metadata?.platformID == 4 && videoElm && loadingIndicatorElm) {
+          setTimeout(() => {
+            loadingIndicatorElm.style.display = 'none'
+          }, 4000)
+        }
+
+        // 本地与会者镜像处理
+        if (videoItem.isLocal) {
+          videoElm && this.isMirror && (videoElm.style.transform = 'rotateY(180deg)')
+        }
         // 添加到participant数组
         this.addToParticipantList(videoItem);
       }
@@ -2211,6 +2746,8 @@ export default {
       let signalElm = document.getElementById(`signal-${videoItem.identity}`);
       // 与会者更多操作按钮元素
       let moreElm = document.getElementById(`more-${videoItem.identity}`);
+      // 与会者画面旋转按钮元素
+      let rotateElm = document.getElementById(`rotate-${videoItem.identity}`)
       // 声明麦克风按钮点击事件回调
       const unableMicrophone = () => {
         this.liveClient.changeParticipantMicrophoneStatus(videoItem.identity, true);
@@ -2225,6 +2762,8 @@ export default {
         const currentMoreElm = document.getElementById(`more-${videoItem.identity}`);
         currentSignalElm && (currentSignalElm.style.visibility = "visible");
         currentMoreElm && (currentMoreElm.style.visibility = "visible");
+        const currentRotateElm = document.getElementById(`rotate-${videoItem.identity}`);
+        currentRotateElm && (currentRotateElm.style.visibility = "visible");
       };
       const signalAndMoreHide = () => {
         // 每次执行时重新获取最新的元素
@@ -2232,6 +2771,8 @@ export default {
         const currentMoreElm = document.getElementById(`more-${videoItem.identity}`);
         currentSignalElm && (currentSignalElm.style.visibility = "hidden");
         currentMoreElm && (currentMoreElm.style.visibility = "hidden");
+        const currentRotateElm = document.getElementById(`rotate-${videoItem.identity}`);
+        currentRotateElm && (currentRotateElm.style.visibility = "hidden");
       };
       // 声明操作按钮元素点击事件回调
       const moreElmClick = (event) => {
@@ -2254,6 +2795,13 @@ export default {
           this.moreDialogShow = true;
         }
       };
+      // 旋转按钮点击事件：顺时针旋转90度（并居中适配）
+      const rotateElmClick = () => {
+        const current = this.rotateDegreeMap.get(videoItem.identity) || 0;
+        const next = (current + 90) % 360;
+        this.rotateDegreeMap.set(videoItem.identity, next);
+        this.applyRotation(videoItem.identity, next);
+      };
       // 为麦克风元素绑定事件
       if (microElm && videoItem.isMicrophoneEnabled) {
         microElm.className = "microphone microphone-active";
@@ -2281,12 +2829,47 @@ export default {
       if (moreElm) {
         moreElm.onclick = moreElmClick;
       }
+      if (rotateElm) {
+        rotateElm.onclick = rotateElmClick;
+      }
       if (signalElm) {
         if (videoItem.connectionQuality === "excellent" || videoItem.connectionQuality === "good") {
           signalElm.className = "signal-icon signal-icon-good";
         } else {
           signalElm.className = "signal-icon signal-icon-poor";
         }
+        // 为信号图标绑定鼠标悬停事件，显示码率信息
+        signalElm.onmouseenter = () => {
+          const bitrateElm = document.getElementById(`bitrate-${videoItem.identity}`)
+          if (bitrateElm) {
+            const bitrate = this.liveClient.getParticipantBitrate(videoItem.identity)
+            console.log('bitrate', bitrate)
+            if (bitrate !== null) {
+              bitrateElm.innerText = `${bitrate} kbps`
+              bitrateElm.style.display = 'block'
+            }
+          }
+        }
+        signalElm.onmouseleave = () => {
+          const bitrateElm = document.getElementById(`bitrate-${videoItem.identity}`)
+          if (bitrateElm) {
+            bitrateElm.style.display = 'none'
+          }
+        }
+      }
+      // 根据platformID设定元素样式
+      if (
+        videoItem.metadata?.platformID == 1 ||
+        videoItem.metadata?.platformID == 4 ||
+        videoItem.metadata?.platformID == 7
+      ) {
+        videoElm && (videoElm.style.objectFit = 'contain')
+      } else {
+        if (videoItem?.source == 'camera') {
+          videoElm && (videoElm.style.objectFit = 'cover')
+        } else {
+          videoElm && (videoElm.style.objectFit = 'contain')
+        }
       }
       let screenShareElm = document.getElementById(`screenshare-${videoItem.identity}`);
       // 与会者dom元素内部样式重新渲染（摄像头或屏幕共享切换后）
@@ -2336,6 +2919,15 @@ export default {
             signalElm.className = "signal-icon signal-icon-poor";
           }
           videoDiv.appendChild(signalElm);
+
+          // 构建码率显示元素
+          let bitrateElm = document.getElementById(`bitrate-${identity}`)
+          if (!bitrateElm) {
+            bitrateElm = document.createElement('div')
+            bitrateElm.id = `bitrate-${videoItem.identity}`
+            bitrateElm.className = 'bitrate-indicator'
+            videoDiv.appendChild(bitrateElm)
+          }
         }
         // if (!moreElm) {
         //   // 构建更多操作按钮元素
@@ -2358,6 +2950,28 @@ export default {
             moreElm = null;
           }
         }
+        // 仅在platformID为4展示旋转按钮（对所有与会者可见）
+        if (videoItem.metadata?.platformID === 4) {
+          if (!rotateElm) {
+            rotateElm = document.createElement('div');
+            rotateElm.id = `rotate-${videoItem.identity}`;
+            rotateElm.className = 'rotate-icon rotate-icon1';
+            videoDiv && videoDiv.appendChild(rotateElm);
+            rotateElm.onclick = rotateElmClick;
+          }
+          // 初始化map中度数（如果不存在）并应用到元素
+          if (!this.rotateDegreeMap.has(videoItem.identity)) {
+            this.rotateDegreeMap.set(videoItem.identity, 0);
+          }
+          this.applyRotation(videoItem.identity, this.rotateDegreeMap.get(videoItem.identity));
+        } else {
+          // 如果不是platformID 4，移除旋转按钮及map记录
+          if (rotateElm) {
+            try { videoDiv.removeChild(rotateElm); } catch(e) {}
+            rotateElm = null;
+          }
+          this.rotateDegreeMap.delete(videoItem.identity);
+        }
       } else {
         if (!boardElm) {
           // 之前为屏幕共享状态或摄像头开启状态
@@ -2391,6 +3005,11 @@ export default {
         this.removeFromParticipantList(videoItem.identity);
         this.filterParticipantList();
 
+        // 清理可能存在的旋转状态
+        if (this.rotateDegreeMap.has(videoItem.identity)) {
+          this.rotateDegreeMap.delete(videoItem.identity);
+        }
+
         // 处理焦点用户离开的情况
         if (this.curBlurIdentity === videoItem.identity) {
           console.log("焦点用户离开会议:", videoItem.identity);
@@ -2418,18 +3037,6 @@ export default {
           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" &&
@@ -2538,6 +3145,10 @@ export default {
       // 更新与会者数组
       this.addToParticipantList(videoItem);
       this.filterParticipantList();
+      // 每次render时，如果该用户在rotateDegreeMap中，则应用其旋转到video元素（确保DOM更新后生效）
+      if (this.rotateDegreeMap.has(videoItem.identity)) {
+        this.applyRotation(videoItem.identity, this.rotateDegreeMap.get(videoItem.identity));
+      }
       // 与会者结束共享，切换回到之前布局（仅主持人执行）
       if (this.currentRoomMode === "normal" && this.judgeParticipantIsHost(this.localIdentity)) {
         console.log(
@@ -2750,7 +3361,73 @@ export default {
 
           if (oldLayout === "grid" && newLayout === "ring") {
             // 从宫格布局切换到环状布局
-            // TODO: 实现环状布局逻辑
+            // 实现环形布局：上半部分为4x4网格（中心2x2为主持人独占），其余12个位置按从上到下、从左到右顺序填充；
+            // 超过13人的用户放到下半部分按4x4顺序排列
+
+            // 清理可能残留的环形容器
+            const existingRing = document.querySelector('#room .layout-ring');
+            if (existingRing) {
+              console.warn('发现残留的环形布局容器，正在清理');
+              existingRing.remove();
+            }
+
+            // 创建环形布局容器
+            const layoutRing = document.createElement('div');
+            layoutRing.className = 'layout-ring';
+
+            const layoutRingTop = document.createElement('div');
+            layoutRingTop.className = 'layout-ring-top';
+
+            const layoutRingBottom = document.createElement('div');
+            layoutRingBottom.className = 'layout-ring-bottom';
+
+            // 按照4x4网格的顺序，但排除中心2x2的位置（索引 5,6,9,10），插入12个slot
+            const slotOrder = [0,1,2,3,4,7,8,11,12,13,14,15];
+            slotOrder.forEach((pos, idx) => {
+              const slot = document.createElement('div');
+              slot.className = 'ring-slot';
+              slot.dataset.pos = String(pos);
+              layoutRingTop.appendChild(slot);
+            });
+
+            // 中央占位，用于主持人占据2x2
+            const ringCenter = document.createElement('div');
+            ringCenter.className = 'ring-center';
+            layoutRingTop.appendChild(ringCenter);
+
+            // 将元素从主容器中收集并按规则分配到环形布局
+            const participantElements = Array.from(container.children).filter(child => child.classList && child.classList.contains('participant') && child.id && child.id.startsWith('participant-'));
+
+            // 将主持人放到center，其余依序填充top slots，溢出进入bottom
+            let filledCount = 0;
+            participantElements.forEach((child) => {
+              try {
+                const id = child.id.replace('participant-', '');
+                if (this.curHostIdentity && id === this.curHostIdentity) {
+                  ringCenter.appendChild(child);
+                } else {
+                  if (filledCount < 12) {
+                    const slot = layoutRingTop.querySelectorAll('.ring-slot')[filledCount];
+                    slot && slot.appendChild(child);
+                    filledCount++;
+                  } else {
+                    layoutRingBottom.appendChild(child);
+                  }
+                }
+              } catch (err) {
+                console.error('分配参与者到环形布局时出错', err);
+              }
+            });
+
+            layoutRing.appendChild(layoutRingTop);
+            layoutRing.appendChild(layoutRingBottom);
+
+            // 清理主容器中可能存在的非participant占位元素（避免重复）
+            // 移除原有非布局容器元素
+            // 插入新的环形布局
+            container.insertBefore(layoutRing, container.firstChild ?? null);
+            // 切换到环形后，同步一次顶部高度
+            requestAnimationFrame(() => this.updateRingTopHeight());
           }
 
           if (oldLayout === "grid" && newLayout === "downLSide") {
@@ -2798,6 +3475,178 @@ export default {
             // 添加其他元素
             container.appendChild(fragment);
           }
+          // 从焦点布局切换到环形布局
+          if (oldLayout === 'rightSide' && newLayout === 'ring') {
+            // 将右侧/左侧容器拆解回主容器，然后重用 grid->ring 的逻辑
+            let layoutRightSideEle = document.querySelector('#room .layout-rightside');
+            let layoutLeftSideEle = document.querySelector('#room .layout-leftside');
+
+            // 把左右容器内的元素移动回主容器顺序（左侧优先）
+            const moveChildrenToContainer = (ele) => {
+              if (!ele) return;
+              let child = null;
+              while ((child = ele.firstChild)) {
+                container.appendChild(child);
+              }
+              if (container.contains(ele)) container.removeChild(ele);
+            };
+            moveChildrenToContainer(layoutLeftSideEle);
+            moveChildrenToContainer(layoutRightSideEle);
+
+            // 触发自身来走 grid->ring 分支，通过重新调用 executeLayoutChange 从 container 状态转换
+            // 为避免递归/竞态，我们直接调用 the grid->ring block by setting variables here.
+            // 简化做法：复制 grid->ring behavior here
+            const existingRing = document.querySelector('#room .layout-ring');
+            if (existingRing) existingRing.remove();
+            const layoutRing = document.createElement('div');
+            layoutRing.className = 'layout-ring';
+            const layoutRingTop = document.createElement('div');
+            layoutRingTop.className = 'layout-ring-top';
+            const layoutRingBottom = document.createElement('div');
+            layoutRingBottom.className = 'layout-ring-bottom';
+            const slotOrder = [0,1,2,3,4,7,8,11,12,13,14,15];
+            slotOrder.forEach((pos) => {
+              const slot = document.createElement('div');
+              slot.className = 'ring-slot';
+              slot.dataset.pos = String(pos);
+              layoutRingTop.appendChild(slot);
+            });
+            const ringCenter = document.createElement('div');
+            ringCenter.className = 'ring-center';
+            layoutRingTop.appendChild(ringCenter);
+            const participantElements = Array.from(container.children).filter(child => child.classList && child.classList.contains('participant') && child.id && child.id.startsWith('participant-'));
+            let filledCount = 0;
+            participantElements.forEach((child) => {
+              const id = child.id.replace('participant-', '');
+              if (this.curHostIdentity && id === this.curHostIdentity) {
+                ringCenter.appendChild(child);
+              } else {
+                if (filledCount < 12) {
+                  const slot = layoutRingTop.querySelectorAll('.ring-slot')[filledCount];
+                  slot && slot.appendChild(child);
+                  filledCount++;
+                } else {
+                  layoutRingBottom.appendChild(child);
+                }
+              }
+            });
+            layoutRing.appendChild(layoutRingTop);
+            layoutRing.appendChild(layoutRingBottom);
+            container.insertBefore(layoutRing, container.firstChild ?? null);
+            // 右侧边栏 -> 环形：创建后同步高度
+            requestAnimationFrame(() => this.updateRingTopHeight());
+          }
+
+          // 从环形布局切换到宫格布局
+          if (oldLayout === 'ring' && newLayout === 'grid') {
+            const layoutRing = document.querySelector('#room .layout-ring');
+            if (layoutRing) {
+              const top = layoutRing.querySelector('.layout-ring-top');
+              const bottom = layoutRing.querySelector('.layout-ring-bottom');
+              // 将top中的slot里的参与者按slot顺序移动回主容器
+              if (top) {
+                const slots = top.querySelectorAll('.ring-slot');
+                slots.forEach(slot => {
+                  while (slot.firstChild) {
+                    container.appendChild(slot.firstChild);
+                  }
+                  slot.remove();
+                });
+                const center = top.querySelector('.ring-center');
+                if (center) {
+                  while (center.firstChild) {
+                    container.appendChild(center.firstChild);
+                  }
+                  center.remove();
+                }
+              }
+              if (bottom) {
+                while (bottom.firstChild) {
+                  container.appendChild(bottom.firstChild);
+                }
+              }
+              layoutRing.remove();
+            }
+          }
+
+          // 从环形布局切换到焦点布局
+          if (oldLayout === 'ring' && newLayout === 'rightSide') {
+            // 先把ring拆平回主容器，再复用 rightSide creation logic
+            const layoutRing = document.querySelector('#room .layout-ring');
+            if (layoutRing) {
+              const top = layoutRing.querySelector('.layout-ring-top');
+              const bottom = layoutRing.querySelector('.layout-ring-bottom');
+              if (top) {
+                const slots = top.querySelectorAll('.ring-slot');
+                slots.forEach(slot => {
+                  while (slot.firstChild) {
+                    container.appendChild(slot.firstChild);
+                  }
+                });
+                const center = top.querySelector('.ring-center');
+                if (center) {
+                  while (center.firstChild) {
+                    container.appendChild(center.firstChild);
+                  }
+                }
+              }
+              if (bottom) {
+                while (bottom.firstChild) {
+                  container.appendChild(bottom.firstChild);
+                }
+              }
+              layoutRing.remove();
+            }
+
+            // 现在容器已被平铺，复用已有 grid->rightSide 代码 path by creating left/right containers
+            let layoutRightSideEle = document.createElement('div');
+            layoutRightSideEle.className = 'layout-rightside';
+            let layoutLeftSideEle = document.createElement('div');
+            layoutLeftSideEle.className = 'layout-leftside';
+
+            // 确定焦点用户 - 优先级：当前焦点用户 > 主持人 > 本地用户
+            let focusVideoItem = null;
+            let blurDom = null;
+            if (this.curBlurIdentity) {
+              focusVideoItem = getUserItemByIdentity(this.curBlurIdentity);
+              if (focusVideoItem) blurDom = document.getElementById(`participant-${focusVideoItem.identity}`);
+            }
+            if (!blurDom && this.curHostIdentity) {
+              focusVideoItem = getUserItemByIdentity(this.curHostIdentity);
+              if (focusVideoItem) blurDom = document.getElementById(`participant-${focusVideoItem.identity}`);
+            }
+            if (!blurDom) {
+              focusVideoItem = getLocalParticipant();
+              if (focusVideoItem) blurDom = document.getElementById(`participant-${focusVideoItem.identity}`);
+            }
+
+            if (blurDom) {
+              if (layoutLeftSideEle.hasChildNodes()) {
+                let child;
+                while ((child = layoutLeftSideEle.firstChild)) {
+                  layoutRightSideEle.appendChild(child);
+                }
+              }
+              layoutLeftSideEle.appendChild(blurDom);
+
+              // 将剩余元素移动到右侧
+              if (container.hasChildNodes()) {
+                let child;
+                while ((child = container.firstElementChild)) {
+                  if (child && child !== layoutLeftSideEle && child !== layoutRightSideEle) {
+                    layoutRightSideEle.appendChild(child);
+                  } else {
+                    if (child) container.removeChild(child);
+                  }
+                }
+              }
+
+              container.insertBefore(layoutLeftSideEle, container.firstChild ?? null);
+              container.appendChild(layoutRightSideEle);
+            } else {
+              this.showMessage.warning('无法找到有效的焦点用户');
+            }
+          }
         }
       });
     },
@@ -2897,7 +3746,6 @@ export default {
       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);
@@ -3137,12 +3985,12 @@ export default {
     },
     async openCamera(e) {
       if (this.liveClient) {
-        await this.liveClient.changeParticipantCameraStatus(e, true);
+        await this.liveClient.changeParticipantCameraStatus(e, false);
       }
     },
     async closeCamera(e) {
       if (this.liveClient) {
-        await this.liveClient.changeParticipantCameraStatus(e, false);
+        await this.liveClient.changeParticipantCameraStatus(e, true);
       }
     },
     async setToHost(e) {
@@ -3188,35 +4036,49 @@ export default {
         e.forEach((item) => {
           this.addToInviteList(item);
         });
+        this.sendInviteMessage(e)
       }
-      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);
-        });
+        // 构建批量外呼参数并一次性发起
+        const deviceCalls = e
+          .map(item => {
+            const id = item?.equipmentID || item?.monitorID
+            return id ? { dnis: id, name: item.label, type: this.handleInviteType(item?.integrationType) } : null
+          })
+          .filter(Boolean)
+
+        if (deviceCalls.length > 0) {
+          try {
+            await this.liveClient.makeBatchCall(deviceCalls)
+            this.showMessage.message('success', '已发起通讯录设备批量外呼')
+          } catch (err) {
+            this.showMessage.message('error', `通讯录设备批量外呼失败: ${err?.message || err}`)
+          }
+        }
+      }
+    },
+    async appendInviteTerminal(e) {
+      console.log('通讯录邀请会议终端', e)
+      if (e && e.length > 0) {
+        // 构建批量外呼参数并一次性发起
+        const terminalCalls = e
+          .map(item => {
+            const id = item?.id
+            return id ? { dnis: id, name: item.label, type: 4 } : null
+          })
+          .filter(Boolean)
+
+        if (terminalCalls.length > 0) {
+          try {
+            await this.liveClient.makeBatchCall(terminalCalls)
+            this.showMessage.message('success', '已发起会议终端批量外呼')
+          } catch (err) {
+            this.showMessage.message('error', `会议终端批量外呼失败: ${err?.message || err}`)
+          }
+        }
       }
     },
     async updateNameConfirm(e) {
@@ -3248,7 +4110,30 @@ export default {
         type,
       });
     },
+    dispatchLocalTrack(kind = '') {
+      if (this.participantNum > 0) {
+        let index = this.participants.findIndex(item => item.isLocal)
+        if (index !== -1) {
+          let localVideoTrack = this.participants[index]?.videoTrack
+          let localAudioTrack = this.participants[index]?.audioTrack
+          if (!kind) {
+            localVideoTrack?.detach()
+            localVideoTrack?.stop()
+            localAudioTrack?.detach()
+            localAudioTrack?.stop()
+          } else if (kind === 'video') {
+            localVideoTrack?.detach()
+            localVideoTrack?.stop()
+          } else if (kind === 'audio') {
+            localAudioTrack?.detach()
+            localAudioTrack?.stop()
+          }
+        }
+      }
+    },
     async chooseVideoDevice(e) {
+      this.dispatchLocalTrack('video')
+      await this.sleep(100)
       await this.changeActiveDevice("videoinput", e);
       this.videoSelectShow = false;
     },
@@ -3309,17 +4194,18 @@ export default {
     },
     appendInvite(e, inviteWay) {
       let tempList = [];
-      let tempDeviceList = [];
+      let tempDeviceList = []
+      let tempTerminalList = []
       let index = -1;
       if (e && e.length > 0) {
         e.forEach((item) => {
-          if (item.source == "人员") {
+          if(item.source == "人员") {
             if (this.invitedNum > 0) {
               index = this.tempInvitedList.findIndex((ele) => {
-                if (item?.loginCode) {
-                  return ele.identity === item.loginCode;
+                if(item?.loginCode) {
+                  return ele.identity === item.loginCode
                 } else {
-                  return ele.identity === item.phone;
+                  return ele.identity === item.phone
                 }
               });
               if (index < 0) {
@@ -3330,32 +4216,129 @@ export default {
               tempList.push(item);
             }
             this.addToInviteList(item);
-          } else {
-            tempDeviceList.push(item);
+          } else if (item.source == '设备' || item.source == '监控') {
+            tempDeviceList.push(item)
+          } else if (item.source == '会议终端') {
+            tempTerminalList.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);
-            }
+        console.log("本次追加邀请会议终端", tempTerminalList);
+        // 追加邀请人员
+        if(tempList.length > 0) {
+          const promises = [];
+          if(inviteWay == "identity") {
+            const applicationInviteData = tempList.map(item => {
+              return {
+                userName: item?.label || item?.userName || '未知用户',
+                identity: item?.loginCode || item.phone,
+                phone: item.phone,
+              }
+            })
+            promises.push(
+              this.liveClient.inviteParticipant(this.meetingNum, applicationInviteData, false, 0)
+                .then(res => {
+                  if (res.code === 200) {
+                    console.log("邀请用户成功", applicationInviteData);
+                  } else {
+                    this.showMessage.message("error", `邀请用户失败: ${res?.msg}`);
+                  }
+                })
+                .catch(err => {
+                  this.showMessage.message("error", `邀请用户失败: ${err.message}`);
+                })
+            );
+          } else if(inviteWay == "volte") {
+            const volteCalls = tempList.map(item => {
+              return {
+                dnis: item.phone,
+                name: item?.label || item?.userName || '未知用户',
+                type: 0,
+              }
+            })
+            promises.push(
+              this.liveClient.makeBatchCall(volteCalls)
+                .then(() => {
+                  console.log("批量呼叫成功", volteCalls);
+                })
+                .catch(err => {
+                  this.showMessage.message("error", `批量呼叫失败: ${err.message}`);
+                })
+            );
+          } else if(inviteWay == "mini") {
+            const miniInviteData = tempList.map(item => {
+              return {
+                userName: item?.label || item?.userName || '未知用户',
+                phone: item.phone,
+                identity: item?.loginCode || item.phone,
+              }
+            })
+            promises.push(
+              this.liveClient.inviteParticipant(this.meetingNum, miniInviteData, false, 3)
+                .then(res => {
+                  if (res.code === 200) {
+                    console.log("邀请用户成功", miniInviteData);
+                  } else {
+                    this.showMessage.message("error", `邀请用户失败: ${res?.msg}`);
+                  }
+                })
+                .catch(err => {
+                  this.showMessage.message("error", `邀请用户失败: ${err.message}`);
+                })
+            )
+          }
+          Promise.allSettled(promises).then(() => {
+            // 添加邀请成功后统一的后续处理
           });
         }
+        // 追加邀请设备
+        if (tempDeviceList && tempDeviceList.length > 0) {
+          const deviceCalls = tempDeviceList
+            .map(item => {
+              const id = item?.source === '监控' ? item?.monitorID : item?.equipmentID;
+              return id ? { dnis: id, name: item.label, type: this.handleInviteType(item?.integrationType) } : null;
+            })
+            .filter(Boolean);
+
+          if (deviceCalls.length > 0) {
+            this.liveClient.makeBatchCall(deviceCalls)
+              .then(() => {
+                this.showMessage.message('success', '监控设备批量外呼已发起');
+              })
+              .catch(err => {
+                this.showMessage.message('error', `批量拉取监控设备失败: ${err?.message || err}`);
+              });
+          }
+        }
+        // 追加邀请终端
+        if (tempTerminalList.length > 0) {
+          const terminalCalls = tempTerminalList
+            .map(item => {
+              return item?.id ? { dnis: item.id, name: item.label, type: 4 } : null
+            })
+            .filter(Boolean)
+          if (terminalCalls.length > 0) {
+            this.liveClient
+              .makeBatchCall(terminalCalls)
+              .then(() => {
+                this.showMessage.message('success', '会议终端批量外呼已发起')
+              })
+              .catch(err => {
+                this.showMessage.message('error', `批量拉取会议终端失败: ${err?.message || err}`)
+              })
+          }
+        }
       }
     },
-    pullMonitorDevice(monitorID, monitorName) {
+    pullMonitorDevice(monitorID, monitorName, integrationType = 0) {
       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);
+            this.liveClient.makeCall(monitorName, monitorID, this.handleInviteType(integrationType));
           }
         } else {
           this.showMessage.message("error", "获取监控设备进会状态失败");
@@ -3365,51 +4348,138 @@ export default {
 
     async sendAppendInviteMessage(uninviteList = []) {
       // 政协项目新增
-      if (this.isCustomizeMiniInvitations) {
-        this.$emit("inviteMessageSend", {
-          inviteUserList: uninviteList,
-          meetingName: this.meetingName,
-          meetingNum: this.meetingNum,
-          fromUser: this.userData.username,
+      if (uninviteList.length > 0) {
+        // 按 platformID 分组处理
+        const platformGroup = {
+          '1_2': [], // platformID 为 1 或 2
+          '7': [],   // platformID 为 7
+          '4': [],    // platformID 为 4
+          '8': []    // platformID 为 8
+        };
+
+        uninviteList.forEach(item => {
+          const { userName, identity, phone, platformID } = item;
+          
+          if (platformID === 30) {
+            platformGroup['1_2'].push({ userName, identity, phone });
+          } else if (platformID === 7) {
+            platformGroup['7'].push({ userName, identity, phone });
+          } else if (platformID === 4) {
+            platformGroup['4'].push({ userName, identity, phone });
+          } else if (platformID === 8) {
+            platformGroup['8'].push({ userName, identity, phone });
+          }
         });
-      } else {
-        if (uninviteList.length > 0) {
-          this.liveClient
-            .inviteParticipant(
-              this.meetingNum,
-              uninviteList.map((item) => {
-                return {
-                  userName: item.userName,
-                  identity: item.identity,
-                  phone: item.phone,
-                };
+
+        const promises = [];
+
+        // 处理 platformID 为 1 或 2 的邀请（invitationMethod = 0）
+        if (platformGroup['1_2'].length > 0) {
+          promises.push(
+            this.liveClient.inviteParticipant(this.meetingNum, platformGroup['1_2'], false, 0)
+              .then(res => {
+                if (res.code === 200) {
+                  platformGroup['1_2'].forEach(item => {
+                    const inviteItem = uninviteList.find(u => u.identity === item.identity);
+                    if (inviteItem) this.addToInviteList(inviteItem);
+                  });
+                } else {
+                  this.showMessage.message("error", `邀请用户失败 (platformID 1/2): ${res?.msg}`);
+                }
               })
-            )
-            .then((res) => {
-              if (res.code == 200) {
-                this.showMessage.message("success", "成功发送邀请");
-                this.getUnjoinParticipant();
-              } else {
-                this.showMessage.message("error", res?.msg);
-              }
-            });
+              .catch(err => {
+                this.showMessage.message("error", `邀请用户失败 (platformID 1/2): ${err.message}`);
+              })
+          );
+        }
+
+        // 处理 platformID 为 7 的邀请（invitationMethod = 3）
+        if (platformGroup['7'].length > 0) {
+          promises.push(
+            this.liveClient.inviteParticipant(this.meetingNum, platformGroup['7'], false, 3)
+              .then(res => {
+                if (res.code === 200) {
+                  platformGroup['7'].forEach(item => {
+                    const inviteItem = uninviteList.find(u => u.identity === item.identity);
+                    if (inviteItem) this.addToInviteList(inviteItem);
+                  });
+                } else {
+                  this.showMessage.message("error", `邀请用户失败 (platformID 7): ${res?.msg}`);
+                }
+              })
+              .catch(err => {
+                this.showMessage.message("error", `邀请用户失败 (platformID 7): ${err.message}`);
+              })
+          );
+        }
+
+        // 处理 platformID 为 4 的呼叫
+        if (platformGroup['4'].length > 0) {
+          // 构建批量外呼数据
+          const volteCalls = platformGroup['4'].map(item => ({
+            dnis: item.phone,
+            name: item.userName,
+            type: 0
+          }));
+          
+          promises.push(
+            this.liveClient.makeBatchCall(volteCalls)
+              .then(() => {
+                platformGroup['4'].forEach(item => {
+                  const inviteItem = uninviteList.find(u => u.identity === item.identity);
+                  if (inviteItem) this.addToInviteList(inviteItem);
+                });
+              })
+              .catch(err => {
+                this.showMessage.message("error", `批量呼叫失败 (platformID 4): ${err.message}`);
+              })
+          );
         }
+
+        // 处理 platformID 为 8 的呼叫
+        if (platformGroup['8'].length > 0) {
+          // 构建批量外呼数据
+          const terminalCalls = platformGroup['8'].map(item => ({
+            dnis: item.phone,
+            name: item.userName,
+            type: 4
+          }))
+
+          promises.push(
+            this.liveClient
+              .makeBatchCall(terminalCalls)
+              .then(() => {
+                this.showMessage.message('success', '已发起终端批量外呼')
+              })
+              .catch(err => {
+                this.showMessage.message('error', `批量呼叫失败 (platformID 8): ${err.message}`)
+              })
+          )
+        }
+
+        // 等待所有邀请完成后更新列表
+        Promise.allSettled(promises).then(() => {
+          // 可以在这里添加统一的后续处理，如刷新邀请列表
+        });
       }
     },
     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", "当前功能暂未实现");
-      }
+      this.liveClient.inviteParticipant(this.meetingNum, [{
+        userName: num,
+        phone: num,
+        identity: num,
+      }], false, 3).then(res => {
+        if (res.code === 200) {
+          this.showMessage.message("success", "成功邀请小程序用户");
+        } else {
+          this.showMessage.message("error", `邀请小程序用户失败: ${res?.msg}`);
+        }
+      }).catch(err => {
+        this.showMessage.message("error", `邀请小程序用户失败: ${err.message}`);
+      });
     },
     sleep(waitTimeInMs) {
       return new Promise((resolve) => setTimeout(resolve, waitTimeInMs));
@@ -3910,6 +4980,64 @@ export default {
             }
           }
 
+          if (this.currentLayout === 'ring') {
+            // 从环形布局到点调模式：先拆解环形容器，将参与者恢复到主容器，然后按照点调规则分配
+            const layoutRing = document.querySelector('#room .layout-ring');
+            if (layoutRing) {
+              const ringTop = layoutRing.querySelector('.layout-ring-top');
+              const ringBottom = layoutRing.querySelector('.layout-ring-bottom');
+              const ringCenter = layoutRing.querySelector('.ring-center');
+              // 先将center、slots、bottom中的参与者移动回主容器
+              if (ringTop) {
+                const slots = ringTop.querySelectorAll('.ring-slot');
+                slots.forEach(slot => {
+                  while (slot.firstChild) {
+                    container.appendChild(slot.firstChild);
+                  }
+                });
+                if (ringCenter) {
+                  while (ringCenter.firstChild) {
+                    container.appendChild(ringCenter.firstChild);
+                  }
+                }
+              }
+              if (ringBottom) {
+                while (ringBottom.firstChild) {
+                  container.appendChild(ringBottom.firstChild);
+                }
+              }
+              layoutRing.remove();
+            }
+
+            // 收集参与者元素
+            const participantElements = Array.from(container.children).filter(child => 
+              child.classList && child.classList.contains('participant') && child.id && child.id.startsWith('participant-')
+            );
+
+            // 分配到点调容器：主持人优先到center[0]，焦点到center[1]（如果存在且不同），其余进入top/bottom/other
+            // 注意：pointTurnCenter已有两个占位符 placeHolderElm1, placeHolderElm2
+            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}` && this.curBlurIdentity !== this.curHostIdentity) {
+                // 焦点用户放在中心第二个位置（若不同于主持人）
+                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);
+                }
+              }
+            });
+          }
           // 添加点调容器之前的最终检查
           const remainingLayoutElements = container.querySelectorAll(
             ".layout-leftside, .layout-rightside, .point-turn-top, .point-turn-center, .point-turn-bottom, .point-turn-other"
@@ -4078,6 +5206,92 @@ export default {
             container.insertBefore(layoutLeftSideEle, container.firstChild ?? null);
             container.appendChild(layoutRightSideEle);
           }
+
+          if (this.currentLayout === 'ring') {
+            // 从点调模式到环形布局：创建环形容器，将与会者分配到center/slots/bottom
+            const existingRing = document.querySelector('#room .layout-ring');
+            if (existingRing) {
+              existingRing.remove();
+            }
+            const layoutRing = document.createElement('div');
+            layoutRing.className = 'layout-ring';
+            const layoutRingTop = document.createElement('div');
+            layoutRingTop.className = 'layout-ring-top';
+            const layoutRingBottom = document.createElement('div');
+            layoutRingBottom.className = 'layout-ring-bottom';
+            // 创建12个槽位
+            for (let i = 0; i < 12; i++) {
+              const slot = document.createElement('div');
+              slot.className = 'ring-slot';
+              layoutRingTop.appendChild(slot);
+            }
+            const ringCenter = document.createElement('div');
+            ringCenter.className = 'ring-center';
+            layoutRingTop.appendChild(ringCenter);
+
+            // 将点调容器中的参与者按顺序分配：center(主持人 -> 焦点)、再从top、bottom、other依序填充slots；超出放到bottom
+            const collect = (ele) => (ele ? Array.from(ele.children).filter(c => c.id && c.classList.contains('participant')) : []);
+            const topList = collect(pointTurnTop);
+            const centerList = collect(pointTurnCenter);
+            const bottomList = collect(pointTurnBottom);
+            const otherList = collect(pointTurnOther);
+
+            // 先处理中心：主持人在center首位，若有焦点且不同于主持人，作为第二位
+            let hostEl = centerList.find(c => this.curHostIdentity && c.id === `participant-${this.curHostIdentity}`);
+            if (!hostEl) {
+              // 尝试从其它列表找到主持人
+              hostEl = [...topList, ...bottomList, ...otherList].find(c => this.curHostIdentity && c.id === `participant-${this.curHostIdentity}`);
+              if (hostEl && hostEl.parentElement) hostEl.parentElement.removeChild(hostEl); 
+            }
+            if (hostEl) {
+              ringCenter.appendChild(hostEl);
+            }
+            let blurEl = null;
+            if (this.curBlurIdentity && this.curBlurIdentity !== this.curHostIdentity) {
+              blurEl = centerList.find(c => c.id === `participant-${this.curBlurIdentity}`)
+                || topList.find(c => c.id === `participant-${this.curBlurIdentity}`)
+                || bottomList.find(c => c.id === `participant-${this.curBlurIdentity}`)
+                || otherList.find(c => c.id === `participant-${this.curBlurIdentity}`);
+              if (blurEl && blurEl.parentElement) {
+                blurEl.parentElement.removeChild(blurEl);
+                // 注意：ring 只在中心留主持人，焦点不会占用中心，因此将其回到 slots 序列，不放中心
+              }
+            }
+
+            // 构建顺序序列：top -> bottom -> other（去除已被拿走的host/blur）
+            const rest = [...topList, ...bottomList, ...otherList].filter(el => el !== hostEl && el !== blurEl);
+            const slots = layoutRingTop.querySelectorAll('.ring-slot');
+            let filled = 0;
+            // 先将可能存在的焦点用户放在第一个可用槽（如果存在）
+            if (blurEl) {
+              if (filled < slots.length) {
+                slots[filled++].appendChild(blurEl);
+              } else {
+                layoutRingBottom.appendChild(blurEl);
+              }
+            }
+            // 填充剩余slots
+            for (const el of rest) {
+              if (filled < slots.length) {
+                slots[filled++].appendChild(el);
+              } else {
+                layoutRingBottom.appendChild(el);
+              }
+            }
+
+            // 清理点调容器并挂载环容器
+            const removeIfChild = (ele) => { if (ele && container.contains(ele)) container.removeChild(ele); };
+            removeIfChild(pointTurnTop);
+            removeIfChild(pointTurnCenter);
+            removeIfChild(pointTurnBottom);
+            removeIfChild(pointTurnOther);
+
+            layoutRing.appendChild(layoutRingTop);
+            layoutRing.appendChild(layoutRingBottom);
+            container.insertBefore(layoutRing, container.firstChild ?? null);
+            // 点调 -> 环形：创建后同步高度
+            requestAnimationFrame(() => this.updateRingTopHeight());
+          }
         }
       });
     },
@@ -4113,10 +5327,11 @@ export default {
             this.liveClient.off(eventName);
           });
         }
+        this.liveClient.off("resMeetingRefresh", this.handleResMeetingRefresh);
       }
-    },
+    }
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -4300,7 +5515,7 @@ export default {
         align-items: center;
         justify-content: space-between;
         position: absolute;
-        z-index: 100;
+        z-index: 2100;
         bottom: -66px;
         left: 0;
         transition: all 0.2s ease;