From 69fa8df1adab0a87e33c22a1cbf4dfae24367a2b 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?=
 <mxp131011@qq.com>
Date: Fri, 13 Mar 2026 18:02:33 +0800
Subject: [PATCH] =?UTF-8?q?fix(meeting-room):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=9C=AC=E5=9C=B0=E8=A7=86=E9=A2=91=E6=9C=AA=E6=AD=A3=E7=A1=AE?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E7=9A=84=E9=97=AE=E9=A2=98=E5=B9=B6=E6=94=B9?=
 =?UTF-8?q?=E8=BF=9B=E6=8E=A7=E5=88=B6=E6=A0=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复本地视频流在特定条件下未正确渲染到播放器元素的问题，通过添加 ensureLocalVideoPlaying 函数并在 selfWindowUid 变化时调用。
同时重构控制栏样式，将其改为绝对定位并更新颜色、间距和悬停效果，以提升视觉一致性和用户体验。
---
 .../meeting-room/meeting-room-student.vue     | 102 +++++++++++++-----
 1 file changed, 74 insertions(+), 28 deletions(-)

diff --git a/src/views/meeting/meeting-room/meeting-room-student.vue b/src/views/meeting/meeting-room/meeting-room-student.vue
index 719f67d..8350434 100644
--- a/src/views/meeting/meeting-room/meeting-room-student.vue
+++ b/src/views/meeting/meeting-room/meeting-room-student.vue
@@ -361,6 +361,21 @@
     }
   }
 
+  const ensureLocalVideoPlaying = async () => {
+    await nextTick();
+    const el = document.getElementById('player-local');
+    if (!el) {
+      return;
+    }
+    if (el.querySelector('video')) {
+      return;
+    }
+    const track = meeting.localUser.videoTrack;
+    if (track) {
+      track.play(el);
+    }
+  };
+
   watch(
     () => primaryUid.value,
     (uid) => {
@@ -372,6 +387,18 @@
     { immediate: true }
   );
 
+  watch(
+    () => selfWindowUid.value,
+    (uid) => {
+      if (!uid) {
+        ensureLocalVideoPlaying();
+      } else {
+        ensurePrimaryVideoPlaying(uid);
+      }
+    },
+    { immediate: true }
+  );
+
   watch(
     () => meeting.remoteUsers.value.length,
     () => {
@@ -755,7 +782,8 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    padding: 16px;
+    padding: 15px;
+    padding-top: 0;
     overflow: hidden;
   }
 
@@ -834,56 +862,74 @@
   }
 
   .control-bar {
+    position: absolute;
+    bottom: 13px;
+    left: 50%;
+    z-index: 10;
     display: flex;
-    gap: 14px;
+    gap: 20px;
+    align-items: center;
     justify-content: center;
-    width: 100%;
-    padding: 14px 16px 18px;
+    padding: 16px;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 12px;
+    transform: translateX(-50%);
   }
 
   .control-btn {
-    display: inline-flex;
-    gap: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
     align-items: center;
-    justify-content: center;
     padding: 10px 16px;
-    color: #ffffff;
+    color: var(--el-color-primary);
     cursor: pointer;
-    background: rgba(0, 0, 0, 0.65);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 14px;
-    transition: all 0.2s ease;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--el-color-primary-light-7);
+    border-radius: 12px;
+    transition: all 0.3s ease;
 
-    &:hover {
-      background: rgba(0, 0, 0, 0.78);
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    .btn-text {
+      font-size: 13px;
+      color: var(--el-color-primary);
     }
 
     &:disabled {
       cursor: not-allowed;
       opacity: 0.6;
+      transform: none !important;
+    }
+
+    &:not(:disabled):hover {
+      background: rgba(255, 255, 255, 0.2);
+      transform: translateY(-2px);
     }
 
     &.active {
-      background: rgba(102, 126, 234, 0.85);
-      border-color: rgba(102, 126, 234, 0.55);
+      color: var(--el-color-primary);
+      background: var(--el-color-primary-light-9);
     }
 
     &.danger {
-      background: rgba(239, 68, 68, 0.85);
-      border-color: rgba(239, 68, 68, 0.55);
+      color: var(--el-color-danger);
+      background: var(--el-color-danger-light-9);
+      border: 1px solid var(--el-color-danger-light-7);
+
+      .btn-text {
+        color: var(--el-color-danger);
+      }
+
+      &:hover {
+        background: var(--el-color-danger-light-7);
+      }
     }
   }
 
-  .btn-text {
-    font-size: 13px;
-    font-weight: 600;
-  }
-
-  .control-btn :deep(svg) {
-    width: 18px;
-    height: 18px;
-  }
-
   .player-wrapper :deep(video) {
     width: 100%;
     height: 100%;