mdm-client 1.0.3 → 1.0.5

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: () => ({}),
@@ -453,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 {
@@ -496,9 +530,9 @@ export default {
       // 布局数据
       currentLayout: "grid",
       currentRoomMode: "normal",
-      layoutList: ["grid", "rightSide"],
-      layoutLabels: ["宫格", "右侧边栏"],
-
+      layoutList: ["grid", "rightSide", "ring"],
+      layoutLabels: ["宫格", "右侧边栏", "环形"],
+      currentGridSize: 9,
       // 状态数据
       duration: 0,
       memberManageShow: false,
@@ -582,6 +616,15 @@ export default {
       durationInterval: null,
       footerInterval: null,
       unjoinParticipantInterval: null,
+      // 保存与会者画面旋转状态
+      rotateDegreeMap: new Map(),
+      // 当前聚焦画面
+      leaderShipFocus: ""
+    };
+  },
+  provide() {
+    return {
+      rotateDegreeMap: this.rotateDegreeMap,
     };
   },
   computed: {
@@ -594,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;
     },
@@ -621,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;
@@ -695,6 +792,33 @@ export default {
         });
       },
     },
+    meetingNum: {
+      handler(newVal) {
+        if (!newVal) return
+        try {
+          const key = `lk:ss_prefs:${newVal}`
+          const raw = sessionStorage.getItem(key)
+          if (!raw) return
+          const saved = JSON.parse(raw)
+          if (saved && typeof saved === 'object') {
+            if (saved.systemAudio === 'include' || saved.systemAudio === 'exclude') {
+              this.screenShareCaptureOption.systemAudio = saved.systemAudio
+            }
+            if (saved.resolution && typeof saved.resolution === 'object') {
+              const { width, height, frameRate } = saved.resolution
+              this.screenShareCaptureOption.resolution = {
+                width: width ?? 1920,
+                height: height ?? 1080,
+                frameRate: typeof frameRate === 'number' ? frameRate : 60,
+              }
+            }
+          }
+        } catch (err) {
+          // 忽略解析异常
+        }
+      },
+      immediate: true,
+    }
   },
   created() {
     this.showMessage = new ShowMessage();
@@ -714,14 +838,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;
@@ -868,12 +1126,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)) {
         // 本地为主持人
@@ -898,7 +1156,7 @@ export default {
         }
       }
 
-      return Math.min(optionCount, 8); // 限制最大选项数
+      return Math.min(optionCount, 9); // 限制最大选项数
     },
     // 弹窗定位工具函数
     calculateDialogPosition(event, options = {}) {
@@ -1366,12 +1624,12 @@ export default {
             const deviceCalls = this.deviceList
               .map(item => {
                 const id = item?.source === '监控' ? item?.monitorID : item?.equipmentID;
-                return id ? { dnis: id, name: item.label } : null;
+                return id ? { dnis: id, name: item.label, type: this.handleInviteType(item?.integrationType) } : null;
               })
               .filter(Boolean);
 
             if (deviceCalls.length > 0) {
-              this.liveClient.makeBatchCall(deviceCalls, 1)
+              this.liveClient.makeBatchCall(deviceCalls)
                 .then(() => {
                   this.showMessage.message('success', '监控设备批量外呼已发起');
                 })
@@ -1380,6 +1638,24 @@ export default {
                 });
             }
           }
+          // 拉取会议终端
+          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();
@@ -1475,18 +1751,44 @@ 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);
     },
-    handleResMeetingRefresh: (e) => {
+    // 高亮当前与会者
+    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")) {
+
+      if (e.includes("queryAllInvite") || e.includes("queryUnjoined")) {
         console.log('this', this, this.getUnjoinParticipant);
-        
+
         this.getUnjoinParticipant();
         this.queryAllInviteParticipant();
         this.startUnjoinParticipantPolling();
@@ -1632,7 +1934,7 @@ export default {
         } else {
           this.meetingCoHost = [];
         }
-
+        this.leaderShipFocus = metadata.leaderShipFocus;
         this.roomMetadata = metadata;
 
         // 批量设置关键状态
@@ -1708,6 +2010,7 @@ export default {
           this.meetingCoHost = [];
         }
 
+        this.leaderShipFocus = metadata.leaderShipFocus;
         this.roomMetadata = metadata;
 
         // 批量设置关键状态
@@ -1955,7 +2258,8 @@ export default {
         // 构建批量外呼数据
         const volteCalls = volteList.map(item => ({
           dnis: item.phone,
-          name: item.label
+          name: item.label,
+          type: 0
         }));
         
         promises.push(
@@ -1997,9 +2301,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 {
@@ -2133,36 +2437,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;
     },
@@ -2311,6 +2662,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;
@@ -2338,6 +2740,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);
       }
@@ -2352,6 +2773,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);
@@ -2366,6 +2789,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 = () => {
         // 每次执行时重新获取最新的元素
@@ -2373,6 +2798,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) => {
@@ -2395,6 +2822,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";
@@ -2422,12 +2856,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元素内部样式重新渲染（摄像头或屏幕共享切换后）
@@ -2477,6 +2946,15 @@ export default {
             signalElm.className = "signal-icon signal-icon-poor";
           }
           videoDiv.appendChild(signalElm);
+
+          // 构建码率显示元素
+          let bitrateElm = document.getElementById(`bitrate-${videoItem.identity}`)
+          if (!bitrateElm) {
+            bitrateElm = document.createElement('div')
+            bitrateElm.id = `bitrate-${videoItem.identity}`
+            bitrateElm.className = 'bitrate-indicator'
+            videoDiv.appendChild(bitrateElm)
+          }
         }
         // if (!moreElm) {
         //   // 构建更多操作按钮元素
@@ -2499,6 +2977,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) {
           // 之前为屏幕共享状态或摄像头开启状态
@@ -2532,6 +3032,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);
@@ -2559,18 +3064,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" &&
@@ -2608,6 +3101,11 @@ export default {
         if (videoItem?.audioTrack) {
           videoItem.audioTrack.detach();
         }
+        if (videoItem?.screenShareAudioTrack) {
+          try {
+            videoItem.screenShareAudioTrack.detach()
+          } catch (e) {}
+        }
         return;
       }
       // 与会者屏幕共享布局切换
@@ -2670,6 +3168,32 @@ export default {
         if (videoItem?.audioTrack) {
           videoItem.audioTrack.attach(videoElm);
         }
+        // 屏幕共享系统音频：使用独立的隐藏 audio 元素，避免某些浏览器在多音轨时替换 video 的音频源
+        if (videoItem?.isScreenShareEnabled && videoItem?.screenShareAudioTrack) {
+          const audioHolderId = `screenshare-audio-${videoItem.identity}`
+          let audioHolder = document.getElementById(audioHolderId)
+          if (!audioHolder) {
+            audioHolder = document.createElement('audio')
+            audioHolder.id = audioHolderId
+            audioHolder.style.display = 'none'
+            audioHolder.setAttribute('playsinline', '')
+            audioHolder.autoplay = true
+            // 将隐藏audio元素插入到与会者容器，便于随与会者一起清理
+            videoDiv && videoDiv.appendChild(audioHolder)
+          }
+          try {
+            videoItem.screenShareAudioTrack.attach(audioHolder)
+          } catch (e) {
+            console.warn('屏幕共享系统音频附加失败', videoItem.identity, e)
+          }
+        } else {
+          // 如果当前不再共享屏幕，清理残留的隐藏 audio 元素
+          const orphanAudio = document.getElementById(`screenshare-audio-${videoItem.identity}`)
+          if (orphanAudio) {
+            try { videoItem.screenShareAudioTrack?.detach(orphanAudio) } catch (_) {}
+            orphanAudio.remove()
+          }
+        }
       }
       // 更新与会者名称
       let nameDom = document.getElementById(videoItem.identity);
@@ -2679,6 +3203,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(
@@ -2891,7 +3419,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") {
@@ -2939,6 +3533,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('无法找到有效的焦点用户');
+            }
+          }
         }
       });
     },
@@ -3038,7 +3804,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);
@@ -3278,12 +4043,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) {
@@ -3335,9 +4100,43 @@ export default {
     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) {
@@ -3369,6 +4168,27 @@ 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) {
       await this.changeActiveDevice("videoinput", e);
       this.videoSelectShow = false;
@@ -3393,7 +4213,50 @@ export default {
       await this.liveClient.changeScreenShareStatus(this.screenShareCaptureOption);
     },
     screenShareOptionChange(e) {
-      console.log("屏幕共享设置变更", e);
+      if (!e) return
+      const { isFluencyPriority, systemAudioInclude } = e
+
+      // 1) 生效到当前响应式配置（将于下一次开始共享时使用；不对正在共享做自动重启）
+      this.screenShareCaptureOption.systemAudio = systemAudioInclude ? 'include' : 'exclude'
+      const targetFrameRate = isFluencyPriority ? 60 : 30
+      if (
+        !this.screenShareCaptureOption.resolution ||
+        typeof this.screenShareCaptureOption.resolution !== 'object'
+      ) {
+        this.screenShareCaptureOption.resolution = { width: 1920, height: 1080, frameRate: targetFrameRate }
+      } else {
+        this.screenShareCaptureOption.resolution.frameRate = targetFrameRate
+      }
+
+      // 2) 正在共享时尽量实时生效：
+      //    - 帧率：对现有轨道调用 applyConstraints(frameRate)
+      //    - 系统音频：单独发布/取消发布 ScreenShareAudio 轨道，避免影响视频轨道
+      // if (isScreenShareEnabled?.value) {
+      //   try {
+      //     const fr = screenShareCaptureOption?.resolution?.frameRate
+      //     if (typeof fr === 'number') {
+      //       await liveClient.updateScreenShareFrameRate(fr)
+      //     }
+      //   } catch (_) {}
+      //   try {
+      //     await liveClient.setScreenShareSystemAudio(systemAudioInclude)
+      //   } catch (_) {}
+      // }
+
+      // 3) 按会议号持久化（当前会话内保留，退出会议后不跨会保留）
+      const roomId = this.meetingNum
+      if (roomId) {
+        try {
+          const key = `lk:ss_prefs:${roomId}`
+          const toSave = {
+            systemAudio: this.screenShareCaptureOption.systemAudio,
+            resolution: { ...this.screenShareCaptureOption.resolution },
+          }
+          sessionStorage.setItem(key, JSON.stringify(toSave))
+        } catch (err) {
+          // 忽略持久化异常
+        }
+      }
     },
     stopScreenShare() {
       this.changeScreenShareStatus(this.screenShareCaptureOption);
@@ -3431,6 +4294,7 @@ export default {
     appendInvite(e, inviteWay) {
       let tempList = [];
       let tempDeviceList = []
+      let tempTerminalList = []
       let index = -1;
       if (e && e.length > 0) {
         e.forEach((item) => {
@@ -3451,12 +4315,15 @@ export default {
               tempList.push(item);
             }
             this.addToInviteList(item);
-          } else {
+          } else if (item.source == '设备' || item.source == '监控') {
             tempDeviceList.push(item)
+          } else if (item.source == '会议终端') {
+            tempTerminalList.push(item)
           }
         });
         console.log("本次追加邀请人员", tempList);
         console.log("本次追加邀请设备", tempDeviceList);
+        console.log("本次追加邀请会议终端", tempTerminalList);
         // 追加邀请人员
         if(tempList.length > 0) {
           const promises = [];
@@ -3485,7 +4352,8 @@ export default {
             const volteCalls = tempList.map(item => {
               return {
                 dnis: item.phone,
-                name: item?.label || item?.userName || '未知用户'
+                name: item?.label || item?.userName || '未知用户',
+                type: 0,
               }
             })
             promises.push(
@@ -3524,25 +4392,52 @@ export default {
           });
         }
         // 追加邀请设备
-        if(tempDeviceList.length > 0) {
-          tempDeviceList.forEach(item => {
-            if(item.source == "设备") {
-              pullMonitorDevice(item.equipmentID, item.label)
-            } else if(item.source == "监控") {
-              pullMonitorDevice(item.monitorID, item.label)
-            }
-          })
+        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", "获取监控设备进会状态失败");
@@ -3557,7 +4452,8 @@ export default {
         const platformGroup = {
           '1_2': [], // platformID 为 1 或 2
           '7': [],   // platformID 为 7
-          '4': []    // platformID 为 4
+          '4': [],    // platformID 为 4
+          '8': []    // platformID 为 8
         };
 
         uninviteList.forEach(item => {
@@ -3569,6 +4465,8 @@ export default {
             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 });
           }
         });
 
@@ -3619,7 +4517,8 @@ export default {
           // 构建批量外呼数据
           const volteCalls = platformGroup['4'].map(item => ({
             dnis: item.phone,
-            name: item.userName
+            name: item.userName,
+            type: 0
           }));
           
           promises.push(
@@ -3636,6 +4535,27 @@ export default {
           );
         }
 
+        // 处理 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(() => {
           // 可以在这里添加统一的后续处理，如刷新邀请列表
@@ -4159,6 +5079,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"
@@ -4327,6 +5305,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());
+          }
         }
       });
     },
@@ -4550,7 +5614,7 @@ export default {
         align-items: center;
         justify-content: space-between;
         position: absolute;
-        z-index: 100;
+        z-index: 4100;
         bottom: -66px;
         left: 0;
         transition: all 0.2s ease;