fix(meeting-room): 修复本地视频未正确播放的问题并改进控制栏样式

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

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: 16px;
-    padding: 14px 16px 18px;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 12px;
+    transform: translateX(-50%);
   }
 
   .control-btn {
-    display: inline-flex;
+    display: flex;
-    gap: 10px;
+    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);
+    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    border: 1px solid var(--el-color-primary-light-7);
-    border-radius: 14px;
+    border-radius: 12px;
-    transition: all 0.2s ease;
+    transition: all 0.3s ease;
 
-    &:hover {
+    svg {
-      background: rgba(0, 0, 0, 0.78);
+      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);
+      color: var(--el-color-primary);
-      border-color: rgba(102, 126, 234, 0.55);
+      background: var(--el-color-primary-light-9);
     }
 
     &.danger {
-      background: rgba(239, 68, 68, 0.85);
+      color: var(--el-color-danger);
-      border-color: rgba(239, 68, 68, 0.55);
+      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%;