重构：模块化项目结构，分离配置、路由、摄像头管理器，添加健康检查，更新Dockerfile和启动脚本

static/js/app.js

@@ -0,0 +1,105 @@
+// 多摄像头监控系统前端逻辑
+
+function refreshCamera(cameraId) {
+    const frame = document.getElementById(`frame-${cameraId}`);
+    const status = document.getElementById(`status-${cameraId}`);
+    
+    status.textContent = '🔄 刷新中...';
+    
+    // 添加时间戳避免缓存
+    const originalSrc = frame.src.split('?')[0];
+    frame.src = originalSrc + `?t=${Date.now()}`;
+    
+    setTimeout(() => {
+        status.textContent = '✅ 在线';
+    }, 2000);
+}
+
+function refreshAllCameras() {
+    document.querySelectorAll('.camera-status').forEach(status => {
+        status.textContent = '🔄 刷新中...';
+    });
+    
+    for (let i = 1; i <= 6; i++) {
+        refreshCamera(i);
+    }
+}
+
+function toggleFullscreen(cameraId) {
+    const frame = document.getElementById(`frame-${cameraId}`);
+    
+    if (!document.fullscreenElement) {
+        if (frame.requestFullscreen) {
+            frame.requestFullscreen();
+        } else if (frame.webkitRequestFullscreen) {
+            frame.webkitRequestFullscreen();
+        } else if (frame.msRequestFullscreen) {
+            frame.msRequestFullscreen();
+        }
+    } else {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+    }
+}
+
+function switchCameraNumber(cameraId, cameraNumber) {
+    const frame = document.getElementById(`frame-${cameraId}`);
+    const controls = document.getElementById(`controls-${cameraId}`);
+    const buttons = controls.querySelectorAll('.selector-btn');
+    
+    // 更新按钮状态
+    buttons.forEach(btn => {
+        btn.classList.remove('active');
+    });
+    event.target.classList.add('active');
+    
+    // 更新摄像头URL
+    const currentUrl = frame.src;
+    const baseUrl = currentUrl.split('?')[0];
+    const params = new URLSearchParams(currentUrl.split('?')[1]);
+    const room = params.get('room');
+    
+    // 构建新的URL
+    let newUrl;
+    if (cameraNumber === 'mixed') {
+        newUrl = `${baseUrl}?room=${room}&camera=mixed&t=${Date.now()}`;
+    } else {
+        newUrl = `${baseUrl}?room=${room}&camera=camera-${cameraNumber}&t=${Date.now()}`;
+    }
+    frame.src = newUrl;
+    
+    // 更新状态显示
+    const status = document.getElementById(`status-${cameraId}`);
+    status.textContent = '🔄 切换中...';
+    
+    setTimeout(() => {
+        status.textContent = '✅ 在线';
+    }, 1000);
+}
+
+function updateCurrentTime() {
+    const now = new Date();
+    const timeString = now.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+    });
+    document.getElementById('currentTime').textContent = timeString;
+}
+
+// 每秒更新当前时间
+setInterval(updateCurrentTime, 1000);
+
+// 页面加载时更新时间
+window.onload = function() {
+    updateCurrentTime();
+};