增加导航栏

onchain_scout_gate/static/app.js

@@ -262,59 +262,62 @@ function renderDailyReport(payload) {
   `;
 }
 
-const PANEL_FOLD_STORAGE_KEY = "matrix_panel_fold_v1";
+const SECTION_NAV_STORAGE = "matrix_section_nav_v1";
 
-function initPanelFolds() {
+function isNavSectionActive(navId) {
-  let saved = {};
+  const sec = document.querySelector(`.matrix-nav-section[data-nav-id="${navId}"]`);
-  try {
+  return !!(sec && sec.classList.contains("is-nav-active"));
-    const raw = localStorage.getItem(PANEL_FOLD_STORAGE_KEY);
+}
-    if (raw) saved = JSON.parse(raw);
-  } catch (_) {
-    saved = {};
-  }
 
-  function applyFold(panel, folded) {
+function initSectionNav() {
-    const toggle = panel.querySelector(".matrix-panel-fold-toggle");
+  const nav = document.getElementById("sectionNav");
-    if (folded) {
+  if (!nav) return;
-      panel.classList.add("is-folded");
+  const buttons = nav.querySelectorAll(".matrix-nav-item[data-nav-id]");
-      if (toggle) toggle.setAttribute("aria-expanded", "false");
+  const sections = document.querySelectorAll(".matrix-nav-section[data-nav-id]");
-    } else {
+
-      panel.classList.remove("is-folded");
+  function activate(navId, opts = {}) {
-      if (toggle) toggle.setAttribute("aria-expanded", "true");
+    const scrollTop = opts.scrollTop !== false;
+    buttons.forEach((b) => b.classList.toggle("is-active", b.dataset.navId === navId));
+    sections.forEach((s) => s.classList.toggle("is-nav-active", s.dataset.navId === navId));
+    try {
+      sessionStorage.setItem(SECTION_NAV_STORAGE, navId);
+    } catch (_) {
+      /* ignore */
+    }
+    if (scrollTop) {
+      nav.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+    try {
+      const url = `#${navId}`;
+      if (location.hash !== url) history.replaceState(null, "", url);
+    } catch (_) {
+      /* ignore */
     }
   }
 
-  document.querySelectorAll(".matrix-panel-fold[data-fold-id]").forEach((panel) => {
+  let initial = "gemma-funnel";
-    const id = panel.dataset.foldId;
+  const hash = (location.hash || "").replace(/^#/, "");
-    const defaultOpen = panel.dataset.foldDefault === "open";
+  if (hash && document.querySelector(`.matrix-nav-section[data-nav-id="${hash}"]`)) {
-    let folded;
+    initial = hash;
-    if (Object.prototype.hasOwnProperty.call(saved, id)) {
+  } else {
-      folded = saved[id] === true;
+    try {
-    } else {
+      const saved = sessionStorage.getItem(SECTION_NAV_STORAGE);
-      folded = !defaultOpen;
+      if (saved && document.querySelector(`.matrix-nav-section[data-nav-id="${saved}"]`)) {
-    }
+        initial = saved;
-    applyFold(panel, folded);
-
-    const toggle = panel.querySelector(".matrix-panel-fold-toggle");
-    if (!toggle) return;
-
-    const onToggle = (e) => {
-      if (e.target.closest("[data-fold-ignore]")) return;
-      const willFold = !panel.classList.contains("is-folded");
-      applyFold(panel, willFold);
-      saved[id] = willFold;
-      try {
-        localStorage.setItem(PANEL_FOLD_STORAGE_KEY, JSON.stringify(saved));
-      } catch (_) {
-        /* ignore quota */
       }
-    };
+    } catch (_) {
+      /* ignore */
+    }
+  }
+  activate(initial, { scrollTop: false });
 
-    toggle.addEventListener("click", onToggle);
+  buttons.forEach((btn) => {
-    toggle.addEventListener("keydown", (e) => {
+    btn.addEventListener("click", () => {
-      if (e.key === "Enter" || e.key === " ") {
+      const id = btn.dataset.navId;
-        e.preventDefault();
+      if (!id) return;
-        onToggle(e);
+      activate(id);
+      if (id === "scan-layers" || id === "runtime-logs" || id === "telemetry") {
+        refresh();
       }
     });
   });
@@ -430,11 +433,6 @@ async function saveDailyReportSettings() {
   }
 }
 
-function isPanelFolded(foldId) {
-  const panel = document.querySelector(`.matrix-panel-fold[data-fold-id="${foldId}"]`);
-  return !!(panel && panel.classList.contains("is-folded"));
-}
-
 async function refresh() {
   if (document.visibilityState !== "visible") return;
   const mobileLite = isMobileLite();
@@ -452,7 +450,7 @@ async function refresh() {
 
     const statusPre = document.getElementById("status");
     const cf = document.getElementById("config");
-    if (!mobileLite) {
+    if (!mobileLite || isNavSectionActive("telemetry")) {
       if (statusPre) {
         const st = pretty(status);
         if (statusPre.textContent !== st) statusPre.textContent = st;
@@ -512,7 +510,7 @@ async function refresh() {
     const watchRows = allAlerts.filter((a) => (a.details && a.details.signal_level) === "WATCH");
     const triggerRows = allAlerts.filter((a) => (a.details && a.details.signal_level) === "TRIGGER");
 
-    if (!mobileLite || !isPanelFolded("scan-layers")) {
+    if (isNavSectionActive("scan-layers")) {
       renderItems("watchAlerts", watchRows, (a) => `
       <div class="matrix-row-title"><strong>${a.symbol}</strong> <span class="matrix-dim">${escapeHtml(a.chain || "")}</span></div>
       <div>级别: ${(a.details && a.details.signal_level) || "N/A"}</div>
@@ -541,7 +539,7 @@ async function refresh() {
     }
     }
 
-    if (!mobileLite || !isPanelFolded("runtime-logs")) {
+    if (isNavSectionActive("runtime-logs")) {
       renderItems("logs", logs.items || [], (l) => `
       <div><strong class="matrix-log-lvl-${(l.level || "").toLowerCase()}">[${l.level}]</strong> ${escapeHtml(l.message)}</div>
       <div class="time">${formatIsoToBeijing(l.created_at)}</div>
@@ -877,7 +875,7 @@ tickClock();
 setInterval(tickClock, 1000);
 initMatrixRain();
 initFunnelWindowControls();
-initPanelFolds();
+initSectionNav();
 refresh();
 const REFRESH_MS = isMobileLite() ? 10000 : 4000;
 setInterval(refresh, REFRESH_MS);

onchain_scout_gate/static/style.css

@@ -885,6 +885,70 @@ pre {
     background: linear-gradient(180deg, rgba(0, 30, 28, 0.65), transparent);
 }
 
+.matrix-section-nav {
+    position: sticky;
+    top: 0;
+    z-index: 85;
+    margin: 0 auto;
+    width: 100%;
+    max-width: min(1760px, 100%);
+    padding: 0 0 10px;
+    background: linear-gradient(180deg, rgba(0, 12, 10, 0.97) 70%, rgba(0, 12, 10, 0.85));
+    border-bottom: 1px solid rgba(0, 255, 213, 0.2);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+.matrix-section-nav-inner {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 8px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    padding: 4px 2px 6px;
+}
+
+.matrix-nav-item {
+    flex: 0 0 auto;
+    font-family: inherit;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    padding: 10px 14px;
+    border-radius: 2px;
+    border: 1px solid rgba(0, 255, 213, 0.28);
+    background: rgba(0, 20, 18, 0.75);
+    color: #7dffc8;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.matrix-nav-item:hover {
+    border-color: rgba(0, 255, 213, 0.55);
+    color: #b8fff0;
+}
+
+.matrix-nav-item.is-active {
+    border-color: rgba(255, 0, 170, 0.55);
+    background: linear-gradient(135deg, rgba(0, 255, 213, 0.18), rgba(255, 0, 170, 0.12));
+    color: #e8fff9;
+    box-shadow: 0 0 16px rgba(0, 255, 213, 0.15);
+}
+
+.matrix-nav-section {
+    display: none;
+}
+
+.matrix-nav-section.is-nav-active {
+    display: block;
+}
+
+.matrix-panel-body {
+    margin-top: 4px;
+}
+
 .matrix-title-wrap {
     position: relative;
 }
@@ -1527,6 +1591,17 @@ body.matrix-theme {
         padding: 8px 10px;
     }
 
+    .matrix-section-nav {
+        top: 0;
+        padding-bottom: 8px;
+    }
+
+    .matrix-nav-item {
+        font-size: 10px;
+        padding: 10px 12px;
+        min-height: 40px;
+    }
+
     .matrix-main {
         padding: 12px 0 24px;
         gap: 14px;

onchain_scout_gate/templates/dashboard.html

@@ -87,16 +87,27 @@
             </div>
         </header>
 
+        <nav class="matrix-section-nav" id="sectionNav" aria-label="功能导航">
+            <div class="matrix-section-nav-inner">
+                <button type="button" class="matrix-nav-item is-active" data-nav-id="gemma-funnel">GEMMA4 漏斗</button>
+                <button type="button" class="matrix-nav-item" data-nav-id="key-monitor">关键位监控</button>
+                <button type="button" class="matrix-nav-item" data-nav-id="daily-report">每日晨报</button>
+                <button type="button" class="matrix-nav-item" data-nav-id="symbol-blocklist">监控黑名单</button>
+                <button type="button" class="matrix-nav-item" data-nav-id="order-executors">下单执行器</button>
+                <button type="button" class="matrix-nav-item" data-nav-id="intraday-rules">策略寄存器</button>
+                <button type="button" class="matrix-nav-item" data-nav-id="scan-layers">全市场扫描</button>
+                <button type="button" class="matrix-nav-item" data-nav-id="telemetry">系统遥测</button>
+                <button type="button" class="matrix-nav-item" data-nav-id="runtime-logs">运行日志</button>
+            </div>
+        </nav>
+
         <main class="matrix-main matrix-crt-inner">
-            <section class="matrix-panel matrix-panel-hero matrix-panel-chrome matrix-panel-fold" data-fold-id="gemma-funnel" data-fold-default="open">
+            <section class="matrix-panel matrix-panel-hero matrix-panel-chrome matrix-nav-section is-nav-active" id="nav-gemma-funnel" data-nav-id="gemma-funnel">
-                <div class="matrix-panel-head matrix-panel-head-row matrix-panel-fold-toggle" role="button" tabindex="0" aria-expanded="true">
+                <div class="matrix-panel-head matrix-panel-head-row">
                     <h2>// GEMMA 漏斗 · 优先矩阵</h2>
-                    <span class="matrix-fold-head-right">
+                    <span class="matrix-chip matrix-chip-magenta">LIVE FEED</span>
-                        <span class="matrix-chip matrix-chip-magenta">LIVE FEED</span>
-                        <span class="matrix-fold-chevron" aria-hidden="true">▼</span>
-                    </span>
                 </div>
-                <div class="matrix-panel-fold-body">
+                <div class="matrix-panel-body">
                 <div class="matrix-hero-radar" aria-hidden="true">
                     <div class="matrix-hero-radar-grid"></div>
                     <div class="matrix-hero-radar-sweep"></div>
@@ -115,15 +126,12 @@
                 </div>
             </section>
 
-            <section class="matrix-panel matrix-panel-chrome matrix-panel-fold" id="keyMonitorPanel" data-fold-id="key-monitor" data-fold-default="open">
+            <section class="matrix-panel matrix-panel-chrome matrix-nav-section" id="keyMonitorPanel" data-nav-id="key-monitor">
-                <div class="matrix-panel-head matrix-panel-head-row matrix-panel-fold-toggle" role="button" tabindex="0" aria-expanded="true">
+                <div class="matrix-panel-head matrix-panel-head-row">
                     <h2>// 关键位突破监控</h2>
-                    <span class="matrix-fold-head-right">
+                    <span class="matrix-chip matrix-dim">人工录入 · 5m 门控</span>
-                        <span class="matrix-chip matrix-dim">人工录入 · 5m 门控</span>
-                        <span class="matrix-fold-chevron" aria-hidden="true">▼</span>
-                    </span>
                 </div>
-                <div class="matrix-panel-fold-body">
+                <div class="matrix-panel-body">
                 <p class="matrix-hint">GEMMA 漏斗仅供参考；在此录入上/下沿。箱体突破与收敛突破均支持「标准突破」或「趋势突破」（无 1.5H 方案）。</p>
                 <p id="keyMonitorRule" class="matrix-hint matrix-dim">// 规则加载中…</p>
                 <div class="matrix-form-row matrix-form-row-wrap">
@@ -166,15 +174,12 @@
                 </div>
             </section>
 
-            <section class="matrix-panel matrix-panel-chrome matrix-panel-fold" data-fold-id="daily-report" data-fold-default="closed">
+            <section class="matrix-panel matrix-panel-chrome matrix-nav-section" id="nav-daily-report" data-nav-id="daily-report">
-                <div class="matrix-panel-head matrix-panel-head-row matrix-panel-fold-toggle" role="button" tabindex="0" aria-expanded="false">
+                <div class="matrix-panel-head matrix-panel-head-row">
                     <h2>// 每日晨报 · 昨日复盘</h2>
-                    <span class="matrix-fold-head-right">
+                    <button type="button" id="runDailyReportBtn" class="matrix-btn ghost">立即生成</button>
-                        <button type="button" id="runDailyReportBtn" class="matrix-btn ghost" data-fold-ignore>立即生成</button>
-                        <span class="matrix-fold-chevron" aria-hidden="true">▼</span>
-                    </span>
                 </div>
-                <div class="matrix-panel-fold-body">
+                <div class="matrix-panel-body">
                 <div class="matrix-form-row">
                     <label>晨报开关</label>
                     <input id="dailyReportEnabledInput" type="checkbox" />
@@ -192,15 +197,12 @@
                 </div>
             </section>
 
-            <section class="matrix-panel matrix-panel-chrome matrix-panel-fold" data-fold-id="symbol-blocklist" data-fold-default="closed">
+            <section class="matrix-panel matrix-panel-chrome matrix-nav-section" id="nav-symbol-blocklist" data-nav-id="symbol-blocklist">
-                <div class="matrix-panel-head matrix-panel-head-row matrix-panel-fold-toggle" role="button" tabindex="0" aria-expanded="false">
+                <div class="matrix-panel-head matrix-panel-head-row">
                     <h2>// 监控黑名单 · base</h2>
-                    <span class="matrix-fold-head-right">
+                    <span class="matrix-chip matrix-dim" id="symbolBlocklistCountChip">0 条规则</span>
-                        <span class="matrix-chip matrix-dim" id="symbolBlocklistCountChip">0 条规则</span>
-                        <span class="matrix-fold-chevron" aria-hidden="true">▼</span>
-                    </span>
                 </div>
-                <div class="matrix-panel-fold-body">
+                <div class="matrix-panel-body">
                 <p class="matrix-hint">
                     Gate USDT 永续左侧 base（每行一个或逗号分隔），如 <code>XAU</code> <code>XAUT</code> <code>XAG</code>；<code>all_swaps</code> 与
                     <code>watchlist</code> 均会在入池后剔除。保存后下一轮扫描生效。
@@ -220,15 +222,12 @@
                 </div>
             </section>
 
-            <section class="matrix-panel matrix-panel-chrome matrix-panel-fold" id="orderExecutorsPanel" data-fold-id="order-executors" data-fold-default="closed">
+            <section class="matrix-panel matrix-panel-chrome matrix-nav-section" id="orderExecutorsPanel" data-nav-id="order-executors">
-                <div class="matrix-panel-head matrix-panel-head-row matrix-panel-fold-toggle" role="button" tabindex="0" aria-expanded="false">
+                <div class="matrix-panel-head matrix-panel-head-row">
                     <h2>// 下单执行器 · 转发链</h2>
-                    <span class="matrix-fold-head-right">
+                    <span class="matrix-chip matrix-dim">仅扫描端维护 · 同一信号广播</span>
-                        <span class="matrix-chip matrix-dim">仅扫描端维护 · 同一信号广播</span>
-                        <span class="matrix-fold-chevron" aria-hidden="true">▼</span>
-                    </span>
                 </div>
-                <div class="matrix-panel-fold-body">
+                <div class="matrix-panel-body">
                 <p class="matrix-hint">
                     关键位门控通过且计划 RR 达标后，向列表中<strong>已启用</strong>的执行器 POST <code>/v1/signal</code>（单一 SL/TP，与录入方案一致）。
                     各执行器自行配置 Gate API、盈亏比、移动保本等；<strong>不支持执行器反向注册</strong>。
@@ -258,12 +257,11 @@
                 </div>
             </section>
 
-            <section class="matrix-panel matrix-panel-chrome matrix-panel-fold" data-fold-id="intraday-rules" data-fold-default="closed">
+            <section class="matrix-panel matrix-panel-chrome matrix-nav-section" id="nav-intraday-rules" data-nav-id="intraday-rules">
-                <div class="matrix-panel-head matrix-panel-fold-toggle" role="button" tabindex="0" aria-expanded="false">
+                <div class="matrix-panel-head">
                     <h2>// 策略寄存器 · 5m</h2>
-                    <span class="matrix-fold-chevron" aria-hidden="true">▼</span>
                 </div>
-                <div class="matrix-panel-fold-body">
+                <div class="matrix-panel-body">
                 <p class="matrix-hint">全市场雷达：横盘 + 5m 突破 + 放量 · 仅参考推送 · 正式下单请用「关键位突破监控」</p>
                 <div class="matrix-form-row">
                     <label>横盘时长(h)</label>
@@ -286,13 +284,12 @@
                 </div>
             </section>
 
-            <section class="matrix-panel matrix-panel-chrome matrix-panel-fold" data-fold-id="scan-layers" data-fold-default="closed">
+            <section class="matrix-panel matrix-panel-chrome matrix-nav-section" id="nav-scan-layers" data-nav-id="scan-layers">
-                <div class="matrix-panel-head matrix-panel-fold-toggle" role="button" tabindex="0" aria-expanded="false">
+                <div class="matrix-panel-head">
                     <h2>// 全市场扫描 · 观察层 / 触发层</h2>
-                    <span class="matrix-fold-chevron" aria-hidden="true">▼</span>
                 </div>
-                <div class="matrix-panel-fold-body">
+                <div class="matrix-panel-body">
-                <p class="matrix-hint matrix-dim">自动箱体雷达 · 默认折叠 · 与关键位下单无关</p>
+                <p class="matrix-hint matrix-dim">自动箱体雷达 · 与关键位下单无关</p>
                 <div class="matrix-two-col">
                     <div class="matrix-panel matrix-panel-chrome matrix-panel-nested">
                         <div class="matrix-panel-head"><h2>// 观察层 · WATCH</h2></div>
@@ -306,12 +303,11 @@
                 </div>
             </section>
 
-            <section class="matrix-panel matrix-panel-wide matrix-panel-chrome matrix-panel-fold" data-fold-id="telemetry" data-fold-default="closed">
+            <section class="matrix-panel matrix-panel-wide matrix-panel-chrome matrix-nav-section" id="nav-telemetry" data-nav-id="telemetry">
-                <div class="matrix-panel-head matrix-panel-fold-toggle" role="button" tabindex="0" aria-expanded="false">
+                <div class="matrix-panel-head">
                     <h2>// 系统遥测</h2>
-                    <span class="matrix-fold-chevron" aria-hidden="true">▼</span>
                 </div>
-                <div class="matrix-panel-fold-body">
+                <div class="matrix-panel-body">
                 <div class="matrix-split">
                     <pre id="status" class="matrix-pre matrix-pre-glow"></pre>
                     <pre id="config" class="matrix-pre matrix-pre-glow"></pre>
@@ -319,12 +315,11 @@
                 </div>
             </section>
 
-            <section class="matrix-panel matrix-panel-wide matrix-panel-chrome matrix-panel-fold" data-fold-id="runtime-logs" data-fold-default="closed">
+            <section class="matrix-panel matrix-panel-wide matrix-panel-chrome matrix-nav-section" id="nav-runtime-logs" data-nav-id="runtime-logs">
-                <div class="matrix-panel-head matrix-panel-fold-toggle" role="button" tabindex="0" aria-expanded="false">
+                <div class="matrix-panel-head">
                     <h2>// 运行日志</h2>
-                    <span class="matrix-fold-chevron" aria-hidden="true">▼</span>
                 </div>
-                <div class="matrix-panel-fold-body">
+                <div class="matrix-panel-body">
                 <div id="logs" class="matrix-list matrix-list-logs"></div>
                 </div>
             </section>