From b4ef771a39e8aed2c0d115957f25d9c31c5497ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?O=E6=98=B5=E7=A7=B0=E9=87=8D=E8=A6=81=E5=90=97O?= Date: Sat, 14 Mar 2026 12:29:12 +0800 Subject: [PATCH] =?UTF-8?q?fix(meeting):=20=E4=BF=AE=E5=A4=8D=E4=BC=9A?= =?UTF-8?q?=E8=AE=AE=E5=AE=A4=E5=AD=A6=E7=94=9F=E7=BD=91=E6=A0=BC=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E8=AE=A1=E7=AE=97=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修正 gridRows 和 gridCols 计算函数的命名与逻辑错误 - 调整学生人数与网格行列数的对应关系 - 添加 16:9 宽高比设置以统一视频显示比例 - 优化控制台日志输出的代码格式 - 修复加入会议时对已存在用户的处理逻辑 --- .../meeting-room/meeting-room-monitor.vue | 45 ++++++++++--------- .../meeting-room/meeting-room-student.vue | 18 +++++--- 2 files changed, 37 insertions(+), 26 deletions(-) diff --git a/src/views/meeting/meeting-room/meeting-room-monitor.vue b/src/views/meeting/meeting-room/meeting-room-monitor.vue index fc22aec..cb84b3e 100644 --- a/src/views/meeting/meeting-room/meeting-room-monitor.vue +++ b/src/views/meeting/meeting-room/meeting-room-monitor.vue @@ -149,29 +149,33 @@ }); /** - * 根据学生人数计算宫格排数（最多 4 排） - */ - const gridRows = computed(() => { - const count = studentUsers.value.length; - if (count <= 1) { - return 1; - } - if (count <= 4) { - return 2; - } - if (count <= 10) { - return 3; - } - return 4; - }); - - /** - * 根据学生人数与排数计算列数 + * 根据学生人数计算宫格列数 + * - 1 个学生：全屏 (1 列) + * - 2~4 个学生：2 列 + * - 5~9 个学生：3 列 + * - 10 个以上：4 列 */ const gridCols = computed(() => { const count = studentUsers.value.length; - const rows = gridRows.value || 1; - return Math.max(1, Math.ceil(count / rows)); + if (count <= 1) { + return 1; // 1 个学生，全屏显示 + } + if (count <= 4) { + return 2; // 2~4 个学生，2 列 + } + if (count <= 9) { + return 3; // 5~9 个学生，3 列 + } + return 4; // 10 个以上，4 列 + }); + + /** + * 根据学生人数与列数计算排数 + */ + const gridRows = computed(() => { + const count = studentUsers.value.length; + const cols = gridCols.value || 1; + return Math.max(1, Math.ceil(count / cols)); }); type MeetingWsPacket = Parameters[0]; @@ -452,6 +456,7 @@ overflow: hidden; background: rgba(0, 0, 0, 0.85); border-radius: 16px; + aspect-ratio: 16 / 9; // 设置 16:9 比例 } .player-wrapper { diff --git a/src/views/meeting/meeting-room/meeting-room-student.vue b/src/views/meeting/meeting-room/meeting-room-student.vue index 4363806..682958b 100644 --- a/src/views/meeting/meeting-room/meeting-room-student.vue +++ b/src/views/meeting/meeting-room/meeting-room-student.vue @@ -579,15 +579,18 @@ await meeting.initAndJoin(roomData); // ✅ 加入后先检查是否有已存在的远程用户 const existingUsers = meeting.client.value?.remoteUsers || []; - console.log('[学生端] 加入会议，已存在的远程用户:', existingUsers.map(u => u.uid)); - + console.log( + '[学生端] 加入会议，已存在的远程用户:', + existingUsers.map((u) => u.uid) + ); + // 等待 DOM 更新后再尝试播放视频 await nextTick(); setTimeout(() => { ensurePrimaryVideoPlaying(primaryUid.value); ensurePrimaryVideoPlaying(secondaryUid.value); // 如果有已存在的用户，也检查一下 - existingUsers.forEach(user => { + existingUsers.forEach((user) => { ensurePrimaryVideoPlaying(user.uid); }); }, 500); @@ -652,15 +655,18 @@ await meeting.initAndJoin(roomData); // ✅ 加入后先检查是否有已存在的远程用户 const existingUsers = meeting.client.value?.remoteUsers || []; - console.log('[学生端] 加入会议，已存在的远程用户:', existingUsers.map(u => u.uid)); - + console.log( + '[学生端] 加入会议，已存在的远程用户:', + existingUsers.map((u) => u.uid) + ); + // 等待 DOM 更新后再尝试播放视频 await nextTick(); setTimeout(() => { ensurePrimaryVideoPlaying(primaryUid.value); ensurePrimaryVideoPlaying(secondaryUid.value); // 如果有已存在的用户，也检查一下 - existingUsers.forEach(user => { + existingUsers.forEach((user) => { ensurePrimaryVideoPlaying(user.uid); }); }, 500);