fix(web): recover pre-render boot failures

2026-07-16 06:04:30 +08:00
parent 4302fc8d45
commit 97fe1704a2
9 changed files with 196 additions and 20 deletions
--- a/vehicle-data-platform/apps/web/index.html
+++ b/vehicle-data-platform/apps/web/index.html
@@ -4,9 +4,55 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>车辆数据管理中台</title>
+    <style>
+      #platform-boot{display:grid;min-height:100vh;place-items:center;background:#f3f6fa;color:#1d2a3d;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}#platform-boot>div{display:grid;width:min(360px,calc(100vw - 40px));justify-items:center;border:1px solid #e1e8f1;border-radius:16px;background:#fff;padding:34px 28px;box-shadow:0 18px 55px rgba(22,43,75,.1);text-align:center}.platform-boot-mark{display:grid;width:44px;height:44px;place-items:center;border-radius:13px;background:#1268f3;color:#fff;font-size:20px;font-weight:800;box-shadow:0 9px 22px rgba(18,104,243,.22)}#platform-boot strong{margin-top:15px;font-size:18px}#platform-boot small{margin-top:8px;color:#758399;font-size:12px;line-height:1.6}#platform-boot button{height:40px;margin-top:20px;border:0;border-radius:8px;background:#1268f3;padding:0 18px;color:#fff;font-weight:700;cursor:pointer}#platform-boot.is-error .platform-boot-mark{background:#e5484d;box-shadow:0 9px 22px rgba(229,72,77,.2)}
+    </style>
  </head>
  <body>
-    <div id="root"></div>
+    <div id="root"><div id="platform-boot" role="status" aria-live="polite"><div><span class="platform-boot-mark">车</span><strong>车辆数据中台</strong><small>正在加载工作台…</small></div></div></div>
+    <script>
+      (() => {
+        const readyEvent = 'vehicle-platform:ready';
+        let settled = false;
+        const cleanup = () => {
+          window.clearTimeout(timer);
+          window.removeEventListener('error', fail, true);
+          window.removeEventListener('unhandledrejection', fail);
+          window.removeEventListener(readyEvent, ready);
+        };
+        const ready = () => { if (!settled) { settled = true; cleanup(); } };
+        const fail = () => {
+          if (settled) return;
+          const boot = document.getElementById('platform-boot');
+          if (!boot) { ready(); return; }
+          settled = true;
+          cleanup();
+          boot.classList.add('is-error');
+          boot.setAttribute('role', 'alert');
+          const title = boot.querySelector('strong');
+          const detail = boot.querySelector('small');
+          const card = boot.querySelector('div');
+          if (title) title.textContent = '平台启动失败';
+          if (detail) detail.textContent = '页面资源未能正常加载，请检查网络后重新获取最新版本。';
+          if (card) {
+            const retry = document.createElement('button');
+            retry.type = 'button';
+            retry.textContent = '重新加载最新版本';
+            retry.addEventListener('click', () => {
+              const target = new URL(window.location.href);
+              target.searchParams.set('__reload', String(Date.now()));
+              window.location.replace(target);
+            }, { once: true });
+            card.appendChild(retry);
+          }
+        };
+        window.addEventListener('error', fail, true);
+        window.addEventListener('unhandledrejection', fail);
+        window.addEventListener(readyEvent, ready, { once: true });
+        const timer = window.setTimeout(fail, 10_000);
+      })();
+    </script>
+    <noscript><div style="padding:24px;font-family:sans-serif">车辆数据中台需要启用 JavaScript 后访问。</div></noscript>
    <script src="/app-config.js"></script>
    <script type="module" src="/src/main.tsx"></script>
  </body>