refactor: 优化配置管理和异常处理

- 添加YAML配置文件支持
- 改进camera_manager异常处理
- 添加类型提示和URL验证
- 完善依赖注入支持测试
- 新增健康检查API端点

static/css/style.css

@@ -64,6 +64,67 @@ body {
     border-color: #4CAF50;
     z-index: 10;
 }
+/* 全屏模式下的样式 */
+.camera-item:fullscreen {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #000;
+    border: none;
+}
+.camera-item:fullscreen .camera-frame-container {
+    flex: 1;
+    height: auto;
+}
+.camera-item:fullscreen .camera-controls-combined {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.7);
+    padding: 10px 20px;
+    border-radius: 25px;
+    z-index: 9999;
+}
+.camera-item:fullscreen .camera-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+}
+
+/* WebKit浏览器全屏支持 */
+.camera-item:-webkit-full-screen {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #000;
+    border: none;
+}
+.camera-item:-webkit-full-screen .camera-frame-container {
+    flex: 1;
+    height: auto;
+}
+.camera-item:-webkit-full-screen .camera-controls-combined {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.7);
+    padding: 10px 20px;
+    border-radius: 25px;
+    z-index: 9999;
+}
+.camera-item:-webkit-full-screen .camera-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+}
 .camera-header {
     background: #3a3a3a;
     padding: 8px 12px;
@@ -124,6 +185,12 @@ body {
 .cam-btn-fullscreen:hover {
     background: #F57C00;
 }
+.cam-btn-exit-fullscreen {
+    background: #f44336;
+}
+.cam-btn-exit-fullscreen:hover {
+    background: #d32f2f;
+}
 .camera-controls-combined {
     background: #3a3a3a;
     padding: 6px;

static/js/app.js

@@ -26,15 +26,16 @@ function refreshAllCameras() {
 }
 
 function toggleFullscreen(cameraId) {
-    const frame = document.getElementById(`frame-${cameraId}`);
+    const cameraItem = document.getElementById(`camera-${cameraId}`);
     
     if (!document.fullscreenElement) {
-        if (frame.requestFullscreen) {
-            frame.requestFullscreen();
-        } else if (frame.webkitRequestFullscreen) {
-            frame.webkitRequestFullscreen();
-        } else if (frame.msRequestFullscreen) {
-            frame.msRequestFullscreen();
+        // 全屏相机容器而不是iframe
+        if (cameraItem.requestFullscreen) {
+            cameraItem.requestFullscreen();
+        } else if (cameraItem.webkitRequestFullscreen) {
+            cameraItem.webkitRequestFullscreen();
+        } else if (cameraItem.msRequestFullscreen) {
+            cameraItem.msRequestFullscreen();
         }
     } else {
         if (document.exitFullscreen) {
@@ -47,6 +48,41 @@ function toggleFullscreen(cameraId) {
     }
 }
 
+// 监听全屏变化事件
+document.addEventListener('fullscreenchange', handleFullscreenChange);
+document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+document.addEventListener('msfullscreenchange', handleFullscreenChange);
+
+function handleFullscreenChange() {
+    // 获取所有相机
+    for (let i = 1; i <= 6; i++) {
+        const fullscreenBtn = document.getElementById(`fullscreen-btn-${i}`);
+        const exitFullscreenBtn = document.getElementById(`exit-fullscreen-btn-${i}`);
+        
+        if (fullscreenBtn && exitFullscreenBtn) {
+            if (document.fullscreenElement) {
+                // 进入全屏时，隐藏全屏按钮，显示退出按钮
+                fullscreenBtn.style.display = 'none';
+                exitFullscreenBtn.style.display = 'inline-block';
+            } else {
+                // 退出全屏时，显示全屏按钮，隐藏退出按钮
+                fullscreenBtn.style.display = 'inline-block';
+                exitFullscreenBtn.style.display = 'none';
+            }
+        }
+    }
+}
+
+function exitFullscreen() {
+    if (document.exitFullscreen) {
+        document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+    }
+}
+
 function switchCameraNumber(event, cameraId, cameraNumber) {
     const frame = document.getElementById(`frame-${cameraId}`);
     const controls = document.getElementById(`controls-${cameraId}`);