From fb20a12b02e4e6c731157f98507d8758d30359a0 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Thu, 4 Jun 2026 20:13:03 +0800
Subject: [PATCH] fix(hub): show monitor page instead of overlapping market
 page

page-market id contained substring monitor so setActiveNav kept both pages visible and hid the grid.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 manual_trading_hub/static/app.js     | 28 ++++++++++++++++++++++------
 manual_trading_hub/static/index.html |  2 +-
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/manual_trading_hub/static/app.js b/manual_trading_hub/static/app.js
index cc16f95..6b9d1ef 100644
--- a/manual_trading_hub/static/app.js
+++ b/manual_trading_hub/static/app.js
@@ -537,13 +537,24 @@
     return "monitor";
   }
 
+  function pageElementId(page) {
+    if (page === "settings") return "page-settings";
+    if (page === "market") return "page-market";
+    return "page-monitor";
+  }
+
   function setActiveNav() {
     const page = currentPage();
+    const pageId = pageElementId(page);
     document.querySelectorAll(".top-nav a").forEach((a) => {
-      a.classList.toggle("active", a.getAttribute("href").includes(page));
+      const href = (a.getAttribute("href") || "").split("?")[0];
+      a.classList.toggle(
+        "active",
+        href === "/" + page || (page === "monitor" && (href === "/" || href === "/monitor"))
+      );
     });
     document.querySelectorAll(".page").forEach((el) => {
-      el.classList.toggle("hidden", !el.id.includes(page));
+      el.classList.toggle("hidden", el.id !== pageId);
     });
     if (page === "monitor") startMonitorPoll();
     else stopMonitorPoll();
@@ -1140,10 +1151,15 @@
     const mobileTiles = isMobileLayout() && !expandedExchangeId;
     const displayRows = mobileTiles ? sortRowsForMobileDashboard(rows) : rows;
     box.classList.toggle("grid-monitor-tiles", mobileTiles);
-    box.innerHTML =
-      displayRows
-        .map((r) => (mobileTiles ? renderMonitorTile(r) : renderMonitorCard(r)))
-        .join("") || '<div class="err">无已启用账户</div>';
+    try {
+      box.innerHTML =
+        displayRows
+          .map((r) => (mobileTiles ? renderMonitorTile(r) : renderMonitorCard(r)))
+          .join("") || '<div class="err">无已启用账户</div>';
+    } catch (err) {
+      console.error("renderMonitorGrid", err);
+      box.innerHTML = `<div class="err">监控区渲染失败：${esc(String(err && err.message ? err.message : err))}</div>`;
+    }
     syncMonitorGridColumns(box, displayRows.length);
     bindMonitorInteractions(box);
 
diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html
index 15ef894..fa69188 100644
--- a/manual_trading_hub/static/index.html
+++ b/manual_trading_hub/static/index.html
@@ -250,6 +250,6 @@
   <div id="toast"></div>
   <script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
   <script src="/assets/chart.js?v=20260604-market-pnl-calc"></script>
-  <script src="/assets/app.js?v=20260604-market-pnl-calc"></script>
+  <script src="/assets/app.js?v=20260604-page-nav-fix"></script>
 </body>
 </html>