占位背景测试完成

WebApp/client/public/onebyone/renderer.js

@@ -303,6 +303,20 @@ class UIRenderer {
             }
         }
 
+        // Host端：同步更新participant grid中tile的占位背景
+        // 通过 media-state-changed 信令驱动（比视频轨道事件更可靠）
+        const participantGrid = this.elements.participantGrid;
+        if (participantGrid && !participantGrid.classList.contains('hidden')) {
+            const shouldShowParticipantPlaceholder = !remoteUser.mediaState.video;
+            const tiles = participantGrid.querySelectorAll('[data-participant-id]');
+            tiles.forEach(tile => {
+                const placeholder = tile.querySelector('.participant-video-placeholder');
+                if (placeholder) {
+                    toggleElement(placeholder, shouldShowParticipantPlaceholder);
+                }
+            });
+        }
+
         // 渲染说话状态
         if (this.elements.remoteSpeakingIndicator) {
             toggleElement(this.elements.remoteSpeakingIndicator, remoteUser.mediaState.isSpeaking);
@@ -422,6 +436,19 @@ class UIRenderer {
             video.id = `participantVideo_${connectionId}`;
             tile.appendChild(video);
 
+            // 参与者视频关闭时的占位背景（复用 remoteVideoPlaceholder 样式）
+            const placeholder = document.createElement('div');
+            placeholder.className = 'participant-video-placeholder absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900/80 to-purple-900/80 hidden';
+            placeholder.innerHTML = `
+                <div class="text-center">
+                    <div class="w-20 h-20 rounded-full bg-indigo-700/50 flex items-center justify-center mx-auto mb-3">
+                        <i class="fas fa-video-slash text-2xl text-white/70"></i>
+                    </div>
+                    <p class="text-white text-sm font-medium">摄像头已关闭</p>
+                </div>
+            `;
+            tile.appendChild(placeholder);
+
             // 参与者名称标签
             const label = document.createElement('div');
             label.className = 'absolute bottom-3 left-3 glass px-3 py-1 rounded-full text-xs flex items-center gap-2';