@quicktvui/web-cli 3.0.0 → 3.1.1

package/templates/dev-renderer.html

@@ -121,7 +121,7 @@
       left: 0;
       right: 0;
       z-index: 99998;
-      background: rgba(0, 0, 0, 0.8);
+      background: rgba(0, 0, 0, 0.2);
       color: #aaa;
       font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
       font-size: 12px;
@@ -289,10 +289,175 @@
 
     // ========== SSE 热更新 ==========
     var sseConnected = false;
+    var sse = null;
+    var sseLeaderHeartbeat = null;
+    var sseLeaderPoller = null;
+    var sseTabId = 'qt-dev-tab-' + Date.now() + '-' + Math.random().toString(36).slice(2);
+    var sseLeaderKey = 'quicktvui-dev-sse-leader';
+    var sseLeaderTtl = 10000;
+    // 仅处理当前页面加载后发生的刷新事件，避免前后台切换时重放旧事件误刷新。
+    var pageLoadedAt = Date.now();
     // 页面加载后的冷却期：这段时间内忽略 bundle-update 事件
     // 防止 SSE 重连后收到缓存的旧 bundle-update 导致无限刷新
     var sseCooldownUntil = Date.now() + 3000; // 3 秒冷却期
 
+    function isStaleReloadEvent(data) {
+      if (!data || typeof data.timestamp !== 'number') return false;
+      return data.timestamp <= pageLoadedAt;
+    }
+
+    function readSseLeader() {
+      try {
+        var raw = localStorage.getItem(sseLeaderKey);
+        return raw ? JSON.parse(raw) : null;
+      } catch (e) {
+        return null;
+      }
+    }
+
+    function isSseLeaderAlive(leader) {
+      return !!(leader && leader.tabId && (Date.now() - leader.ts) < sseLeaderTtl);
+    }
+
+    function writeSseLeader() {
+      try {
+        localStorage.setItem(sseLeaderKey, JSON.stringify({
+          tabId: sseTabId,
+          ts: Date.now(),
+          href: window.location.href
+        }));
+      } catch (e) {
+        console.warn('[Dev] Failed to write SSE leader lock:', e);
+      }
+    }
+
+    function clearSseLeader() {
+      var leader = readSseLeader();
+      if (leader && leader.tabId === sseTabId) {
+        try {
+          localStorage.removeItem(sseLeaderKey);
+        } catch (e) {
+          console.warn('[Dev] Failed to clear SSE leader lock:', e);
+        }
+      }
+    }
+
+    function startSseHeartbeat() {
+      if (sseLeaderHeartbeat) return;
+      writeSseLeader();
+      sseLeaderHeartbeat = setInterval(function() {
+        writeSseLeader();
+      }, Math.max(2000, Math.floor(sseLeaderTtl / 2)));
+    }
+
+    function stopSseHeartbeat() {
+      if (sseLeaderHeartbeat) {
+        clearInterval(sseLeaderHeartbeat);
+        sseLeaderHeartbeat = null;
+      }
+    }
+
+    function closeSse(reason) {
+      stopSseHeartbeat();
+      if (sse) {
+        sse.close();
+        sse = null;
+      }
+      if (sseConnected) {
+        console.log('[Dev] SSE closed:', reason || 'manual');
+      }
+      sseConnected = false;
+    }
+
+    function shouldOwnSse() {
+      return document.visibilityState !== 'hidden' &&
+        (typeof document.hasFocus !== 'function' || document.hasFocus());
+    }
+
+    function becomeSseLeader() {
+      writeSseLeader();
+      startSseHeartbeat();
+      if (!sse) {
+        console.log('[Dev] SSE leader acquired by current tab');
+        connectSse();
+      }
+    }
+
+    function connectSse() {
+      if (sse || !window.__BUNDLE_CONFIG__ || !window.__BUNDLE_CONFIG__.watch) return;
+      try {
+        sse = new EventSource(window.__BUNDLE_CONFIG__.sseEndpoint);
+        sse.onopen = function() {
+          sseConnected = true;
+          console.log('[Dev] SSE connected');
+          updateStatus('ready', '已连接 - 等待变化');
+        };
+        sse.onmessage = function(e) {
+          try {
+            var data = JSON.parse(e.data);
+            console.log('[Dev] SSE event:', data.type, data);
+            if (data.type === 'connected') {
+              updateStatus('ready', '开发服务器已连接');
+            } else if (data.type === 'bundle-update') {
+              if (isStaleReloadEvent(data)) {
+                console.log('[Dev] Ignoring stale bundle-update', data.timestamp, '<=', pageLoadedAt);
+                updateStatus('ready', '构建完成');
+                return;
+              }
+              if (Date.now() < sseCooldownUntil) {
+                console.log('[Dev] Ignoring bundle-update during cooldown');
+                updateStatus('ready', '构建完成');
+                return;
+              }
+              updateStatus('building', 'Bundle 更新中...');
+              setTimeout(function() { location.reload(); }, 300);
+            } else if (data.type === 'full-reload') {
+              if (isStaleReloadEvent(data)) {
+                console.log('[Dev] Ignoring stale full-reload', data.timestamp, '<=', pageLoadedAt);
+                return;
+              }
+              if (Date.now() < sseCooldownUntil) {
+                console.log('[Dev] Ignoring full-reload during cooldown');
+                return;
+              }
+              updateStatus('building', '正在刷新...');
+              setTimeout(function() { location.reload(); }, 300);
+            } else if (data.type === 'build-status') {
+              if (data.status === 'building') {
+                updateStatus('building', data.message || '构建中...');
+              } else if (data.status === 'ready') {
+                updateStatus('ready', data.message || '构建完成');
+              } else if (data.status === 'error') {
+                updateStatus('error', data.message || '构建失败');
+              }
+            }
+          } catch (ex) {
+            console.error('[Dev] SSE parse error:', ex);
+          }
+        };
+        sse.onerror = function() {
+          sseConnected = false;
+          console.log('[Dev] SSE disconnected, retrying...');
+          updateStatus('building', 'SSE 断开，重连中...');
+        };
+      } catch (e) {
+        console.error('[Dev] SSE init error:', e);
+      }
+    }
+
+    function updateSseLeadership() {
+      if (!window.__BUNDLE_CONFIG__ || !window.__BUNDLE_CONFIG__.watch) return;
+
+      // 前台页优先：当前可见且有焦点的标签页主动接管 SSE。
+      if (!shouldOwnSse()) {
+        clearSseLeader();
+        closeSse('tab inactive');
+        return;
+      }
+
+      becomeSseLeader();
+    }
+
     // ========== CORS 代理 ==========
     // 在 web-cli dev 模式下，拦截所有跨域 fetch/XHR/Image 请求，
     // 转换为 /proxy/ 路径由 DevServer 代理转发，解决浏览器 CORS 限制
@@ -411,56 +576,29 @@
     })();
 
     if (window.__BUNDLE_CONFIG__ && window.__BUNDLE_CONFIG__.watch) {
-      try {
-        var sse = new EventSource(window.__BUNDLE_CONFIG__.sseEndpoint);
-        sse.onopen = function() {
-          sseConnected = true;
-          console.log('[Dev] SSE connected');
-          updateStatus('ready', '已连接 - 等待变化');
-        };
-        sse.onmessage = function(e) {
-          try {
-            var data = JSON.parse(e.data);
-            console.log('[Dev] SSE event:', data.type, data);
-            if (data.type === 'connected') {
-              updateStatus('ready', '开发服务器已连接');
-            } else if (data.type === 'bundle-update') {
-              // 冷却期内忽略 bundle-update（可能是 SSE 重连后缓存的旧事件）
-              if (Date.now() < sseCooldownUntil) {
-                console.log('[Dev] Ignoring bundle-update during cooldown');
-                updateStatus('ready', '构建完成');
-                return;
-              }
-              updateStatus('building', 'Bundle 更新中...');
-              setTimeout(function() { location.reload(); }, 300);
-            } else if (data.type === 'full-reload') {
-              if (Date.now() < sseCooldownUntil) {
-                console.log('[Dev] Ignoring full-reload during cooldown');
-                return;
-              }
-              updateStatus('building', '正在刷新...');
-              setTimeout(function() { location.reload(); }, 300);
-            } else if (data.type === 'build-status') {
-              if (data.status === 'building') {
-                updateStatus('building', data.message || '构建中...');
-              } else if (data.status === 'ready') {
-                updateStatus('ready', data.message || '构建完成');
-              } else if (data.status === 'error') {
-                updateStatus('error', data.message || '构建失败');
-              }
-            }
-          } catch (ex) {
-            console.error('[Dev] SSE parse error:', ex);
+      updateSseLeadership();
+      sseLeaderPoller = setInterval(updateSseLeadership, 3000);
+      window.addEventListener('storage', function(event) {
+        if (event.key === sseLeaderKey) {
+          if (shouldOwnSse()) {
+            setTimeout(updateSseLeadership, 0);
+          } else {
+            closeSse('another tab owns SSE');
+            updateStatus('ready', '热更新由其他标签页持有');
           }
-        };
-        sse.onerror = function() {
-          sseConnected = false;
-          console.log('[Dev] SSE disconnected, retrying...');
-          updateStatus('building', 'SSE 断开，重连中...');
-        };
-      } catch (e) {
-        console.error('[Dev] SSE init error:', e);
-      }
+        }
+      });
+      window.addEventListener('focus', updateSseLeadership);
+      window.addEventListener('blur', updateSseLeadership);
+      document.addEventListener('visibilitychange', updateSseLeadership);
+      window.addEventListener('beforeunload', function() {
+        clearSseLeader();
+        closeSse('beforeunload');
+      });
+      window.addEventListener('pagehide', function() {
+        clearSseLeader();
+        closeSse('pagehide');
+      });
     }
 
     // ========== 自动添加 bundle 参数（如果 URL 中没有） ==========