win系统适配完成

frontend/index.html

@@ -27,35 +27,93 @@
     }
     @keyframes spin { to { transform: rotate(360deg); } }
     p { color: #4a5568; font-size: 14px; }
+    .status { color: #718096; font-size: 13px; margin-top: 12px; }
+    .retry-btn {
+      display: none;
+      margin-top: 16px;
+      padding: 8px 24px;
+      background: #2563eb;
+      color: #fff;
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+    .retry-btn:hover { background: #1d4ed8; }
+    .retry-btn.show { display: inline-block; }
   </style>
   <script>
-    // 等待 streamlit 服务就绪后跳转
     (function() {
+      var STREAMLIT_URL = 'http://localhost:8501';
       var retries = 0;
-      var maxRetries = 50;
-      function check() {
-        var xhr = new XMLHttpRequest();
-        xhr.open('GET', 'http://127.0.0.1:8501', true);
-        xhr.timeout = 2000;
-        xhr.onload = function() {
-          window.location.href = 'http://127.0.0.1:8501';
-        };
-        xhr.onerror = function() {
-          retries++;
-          if (retries < maxRetries) {
+      var maxRetries = 120;  // 最多等待 120 次（约 60 秒）
+      var interval = 500;    // 每 500ms 检查一次
+      var statusEl = null;
+      var retryBtn = null;
+
+      function showStatus(msg, isError) {
+        if (!statusEl) {
+          statusEl = document.createElement('p');
+          statusEl.className = 'status';
+          document.querySelector('.loader').appendChild(statusEl);
+        }
+        statusEl.textContent = msg;
+        if (isError) {
+          statusEl.style.color = '#dc2626';
+        } else {
+          statusEl.style.color = '#718096';
+        }
+        if (!retryBtn) {
+          retryBtn = document.createElement('button');
+          retryBtn.className = 'retry-btn';
+          retryBtn.textContent = '手动重试';
+          retryBtn.onclick = function() {
+            retries = 0;
+            retryBtn.classList.remove('show');
+            showStatus('正在重新连接...', false);
             setTimeout(check, 500);
-          }
-        };
-        xhr.ontimeout = function() {
-          retries++;
-          if (retries < maxRetries) {
-            setTimeout(check, 500);
-          }
-        };
-        xhr.send();
+          };
+          document.querySelector('.loader').appendChild(retryBtn);
+        }
+      }
+
+      function check() {
+        // 使用 fetch no-cors 模式检测端口是否可达
+        // no-cors: 请求成功则 resolve，连接失败则 reject
+        var controller = new AbortController();
+        var timeoutId = setTimeout(function() { controller.abort(); }, 3000);
+
+        fetch(STREAMLIT_URL, { mode: 'no-cors', signal: controller.signal })
+          .then(function() {
+            clearTimeout(timeoutId);
+            // 服务可达 → 跳转
+            showStatus('服务已就绪，正在进入...');
+            window.location.replace(STREAMLIT_URL);
+          })
+          .catch(function(err) {
+            clearTimeout(timeoutId);
+            retries++;
+            if (retries < maxRetries) {
+              showStatus('正在启动服务... (' + retries + '/' + maxRetries + ')');
+              setTimeout(check, interval);
+            } else {
+              showStatus('服务启动超时。请确认 Streamlit 已在 :8501 端口运行，或点击下方按钮重试。', true);
+              if (retryBtn) retryBtn.classList.add('show');
+            }
+          });
+      }
+
+      // 等待 DOM 就绪后再开始检测
+      function start() {
+        showStatus('正在启动服务...');
+        // 首次延迟 1.5 秒，给服务一点启动时间
+        setTimeout(check, 1500);
+      }
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+      } else {
+        start();
       }
-      // 等待 500ms 后开始轮询（给 streamlit 启动时间）
-      setTimeout(check, 500);
     })();
   </script>
 </head>