fix(hub): stop instance iframe nav flash after account status badge

Load account_risk_badge.css before body paint, skip redundant hub theme re-apply, remove iframe hide overlay, and disable badge transitions in hub embed. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-17 19:36:48 +08:00
parent 6520234bd8
commit d8dccb8606
9 changed files with 48 additions and 75 deletions
@@ -3,8 +3,9 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-<script src="/static/instance_theme.js?v=7"></script>
-    <link rel="stylesheet" href="/static/instance_theme_early.css?v=2">
+<script src="/static/instance_theme.js?v=8"></script>
+    <link rel="stylesheet" href="/static/instance_theme_early.css?v=3">
+    <link rel="stylesheet" href="/static/account_risk_badge.css?v=2">

    <meta name="theme-color" content="#0b0d14">
    <meta name="apple-mobile-web-app-title" content="监控">
@@ -236,7 +237,6 @@
        .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
    </style>
    <link rel="stylesheet" href="/static/instance_theme.css?v=14">
-    <link rel="stylesheet" href="/static/account_risk_badge.css?v=1">

 </head>
 <body data-page="{{ page }}">
@@ -3,8 +3,9 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-<script src="/static/instance_theme.js?v=7"></script>
-    <link rel="stylesheet" href="/static/instance_theme_early.css?v=2">
+<script src="/static/instance_theme.js?v=8"></script>
+    <link rel="stylesheet" href="/static/instance_theme_early.css?v=3">
+    <link rel="stylesheet" href="/static/account_risk_badge.css?v=2">

    <meta name="theme-color" content="#0b0d14">
    <meta name="apple-mobile-web-app-title" content="监控">
@@ -236,7 +237,6 @@
        .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
    </style>
    <link rel="stylesheet" href="/static/instance_theme.css?v=14">
-    <link rel="stylesheet" href="/static/account_risk_badge.css?v=1">

 </head>
 <body data-page="{{ page }}">
@@ -3,8 +3,9 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-<script src="/static/instance_theme.js?v=7"></script>
-    <link rel="stylesheet" href="/static/instance_theme_early.css?v=2">
+<script src="/static/instance_theme.js?v=8"></script>
+    <link rel="stylesheet" href="/static/instance_theme_early.css?v=3">
+    <link rel="stylesheet" href="/static/account_risk_badge.css?v=2">

    <meta name="theme-color" content="#0b0d14">
    <meta name="apple-mobile-web-app-title" content="监控">
@@ -236,7 +237,6 @@
        .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
    </style>
    <link rel="stylesheet" href="/static/instance_theme.css?v=14">
-    <link rel="stylesheet" href="/static/account_risk_badge.css?v=1">

 </head>
 <body data-page="{{ page }}">
@@ -3,8 +3,9 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-<script src="/static/instance_theme.js?v=7"></script>
-    <link rel="stylesheet" href="/static/instance_theme_early.css?v=2">
+<script src="/static/instance_theme.js?v=8"></script>
+    <link rel="stylesheet" href="/static/instance_theme_early.css?v=3">
+    <link rel="stylesheet" href="/static/account_risk_badge.css?v=2">

    <meta name="theme-color" content="#0b0d14">
    <meta name="apple-mobile-web-app-title" content="监控">
@@ -236,7 +237,6 @@
        .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
    </style>
    <link rel="stylesheet" href="/static/instance_theme.css?v=14">
-    <link rel="stylesheet" href="/static/account_risk_badge.css?v=1">

 </head>
 <body data-page="{{ page }}">
@@ -1092,10 +1092,6 @@ body.market-chart-fs-open {
  background: var(--bg);
 }

-.instance-frame-shell.is-instance-nav-loading .instance-frame {
-  visibility: hidden;
-}
-
 .exchange-fullscreen {
  position: fixed;
  inset: 0;
@@ -371,11 +371,6 @@
    return j.url;
  }

-  function setInstanceFrameNavLoading(loading) {
-    const shell = document.getElementById("instance-frame-shell");
-    if (shell) shell.classList.toggle("is-instance-nav-loading", !!loading);
-  }
-
  async function openInstance(exchangeId, nextPath, opts) {
    const options = opts || {};
    const newTab = !!options.newTab;
@@ -428,10 +423,7 @@
      );
      instanceFrameUrl = url;
      const frame = document.getElementById("instance-frame");
-      if (frame) {
-        setInstanceFrameNavLoading(true);
-        frame.src = url;
-      }
+      if (frame) frame.src = url;
    } catch (e) {
      showToast(String(e), true);
    }
@@ -448,7 +440,6 @@
    closeExchangeFullscreen();
    instanceFrameUrl = url;
    if (titleEl) titleEl.textContent = title || "实例";
-    setInstanceFrameNavLoading(true);
    frame.src = url;
    shell.classList.remove("hidden");
    shell.setAttribute("aria-hidden", "false");
@@ -456,6 +447,7 @@
    if (frame.dataset.themeSyncBound !== "1") {
      frame.dataset.themeSyncBound = "1";
      frame.addEventListener("load", function syncInstanceFrameTheme() {
+        requestAnimationFrame(() => {
          try {
            if (globalThis.HubTheme && typeof HubTheme.get === "function" && frame.contentWindow) {
              frame.contentWindow.postMessage(
@@ -465,6 +457,7 @@
            }
          } catch (_) {}
        });
+      });
    }
  }

@@ -477,7 +470,6 @@
    if (shell) {
      shell.classList.add("hidden");
      shell.setAttribute("aria-hidden", "true");
-      shell.classList.remove("is-instance-nav-loading");
    }
    document.body.classList.remove("hub-instance-frame-open");
  }
@@ -3140,23 +3132,6 @@
    const back = document.getElementById("instance-frame-back");
    const refresh = document.getElementById("instance-frame-refresh");
    const newTab = document.getElementById("instance-frame-newtab");
-    const frame = document.getElementById("instance-frame");
-    if (frame && frame.dataset.hubNavBound !== "1") {
-      frame.dataset.hubNavBound = "1";
-      frame.addEventListener("load", () => setInstanceFrameNavLoading(false));
-    }
-    if (!window.__hubInstanceFrameMsgBound) {
-      window.__hubInstanceFrameMsgBound = true;
-      window.addEventListener("message", (ev) => {
-        const d = ev.data;
-        if (!d || typeof d !== "object") return;
-        if (d.type === "instance-frame-navigating") {
-          setInstanceFrameNavLoading(true);
-        } else if (d.type === "instance-frame-ready" || d.type === "instance-theme-ready") {
-          setInstanceFrameNavLoading(false);
-        }
-      });
-    }
    if (back) back.onclick = () => closeInstanceFrame();
    if (refresh) refresh.onclick = () => refreshInstanceFrame();
    if (newTab) {
@@ -15,7 +15,7 @@
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
  <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-  <link rel="stylesheet" href="/assets/app.css?v=20260614-instance-frame-nav" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260614-instance-nav-v2" />
  <link rel="stylesheet" href="/assets/account_risk_badge.css?v=1" />
  <link rel="stylesheet" href="/assets/dashboard.css?v=20260612-dash-monitor-count" />
 </head>
@@ -654,6 +654,6 @@
  <script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script>
  <script src="/assets/ai_review_render.js?v=3"></script>
  <script src="/assets/time_close_ui.js?v=2"></script>
-  <script src="/assets/app.js?v=20260614-instance-frame-nav"></script>
+  <script src="/assets/app.js?v=20260614-instance-nav-v2"></script>
 </body>
 </html>
@@ -68,6 +68,11 @@ html[data-theme="light"] {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }

+/* 中控 iframe 内切页：避免徽章过渡动画造成 header 闪动 */
+html[data-hub-linked="1"] .header-row .risk-status-badge {
+  transition: none;
+}
+
 .risk-status-badge::before {
  content: "";
  width: 7px;
@@ -63,6 +63,7 @@
  }

  let _linkedTheme = null;
+  let _appliedTheme = null;

  function get() {
    if (isHubLinked()) {
@@ -191,13 +192,25 @@
    const options = opts || {};
    const linked = isHubLinked();
    const t = normalize(theme);
+    const root = document.documentElement;
+    const unchanged =
+      !options.force &&
+      _appliedTheme === t &&
+      root.getAttribute("data-theme") === t;
+    if (unchanged) {
+      return t;
+    }
+    _appliedTheme = t;
    if (linked) {
      _linkedTheme = t;
      writeLinkedThemeStorage(t);
-    } else if (!options.skipStore) {
+      root.setAttribute("data-hub-linked", "1");
+    } else {
+      root.removeAttribute("data-hub-linked");
+    }
+    if (!linked && !options.skipStore) {
      setStandalone(t);
    }
-    const root = document.documentElement;
    root.setAttribute("data-theme", t);
    const meta = document.querySelector('meta[name="theme-color"]');
    if (meta) meta.setAttribute("content", META[t]);
@@ -283,20 +296,6 @@
    apply(data.theme, { skipStore: true });
  }

-  function notifyParentFrameNavStart() {
-    if (!isHubLinked()) return;
-    try {
-      window.parent.postMessage({ type: "instance-frame-navigating", theme: get() }, "*");
-    } catch (_) {}
-  }
-
-  function notifyParentFrameReady() {
-    if (!isHubLinked()) return;
-    try {
-      window.parent.postMessage({ type: "instance-frame-ready" }, "*");
-    } catch (_) {}
-  }
-
  /** 中控 iframe 内：拦截顶栏导航，fetch 后 document.write 原地换页，避免 iframe 卸载白屏 */
  function initHubEmbedInFrameNav() {
    if (!isHubLinked()) return;
@@ -310,7 +309,6 @@

    async function navigateInFrame(href, opts) {
      const token = ++navToken;
-      notifyParentFrameNavStart();
      try {
        const r = await fetch(href, { credentials: "same-origin" });
        if (token !== navToken) return;
@@ -320,9 +318,6 @@
        }
        const html = await r.text();
        if (token !== navToken) return;
-        document.open();
-        document.write(html);
-        document.close();
        let path = href;
        try {
          const u = new URL(href, location.href);
@@ -330,6 +325,9 @@
        } catch (_) {}
        if (opts && opts.replace) history.replaceState(null, "", path);
        else history.pushState(null, "", path);
+        document.open();
+        document.write(html);
+        document.close();
      } catch (_) {
        if (token === navToken) location.href = href;
      }
@@ -368,7 +366,6 @@
      apply(get(), { skipStore: true });
      window.addEventListener("message", (ev) => initFromHubMessage(ev.data));
      initHubEmbedInFrameNav();
-      notifyParentFrameReady();
      try {
        window.parent.postMessage({ type: "instance-theme-ready" }, "*");
      } catch (_) {}