ui: add Top20 button to market chart fullscreen toolbar

Co-authored-by: Cursor <cursoragent@cursor.com>

manual_trading_hub/static/app.css

@@ -2800,6 +2800,10 @@ body.login-page {
   display: none;
 }
 
+.market-fs-field.market-field-symbol .market-symbol-wrap {
+  min-width: 180px;
+}
+
 .market-fs-field span {
   font-size: 0.68rem;
   color: var(--muted);
@@ -2966,8 +2970,16 @@ body.login-page {
   color: var(--accent);
 }
 
-.market-vol-rank-sheet {
+.market-vol-rank-anchor {
   margin: -6px 0 12px;
+}
+
+.market-vol-rank-anchor:empty,
+.market-vol-rank-anchor-fs:empty {
+  display: none;
+}
+
+.market-vol-rank-sheet {
   padding: 10px 12px 8px;
   border: 1px solid var(--border-soft);
   border-radius: var(--radius);
@@ -2975,6 +2987,18 @@ body.login-page {
   box-shadow: var(--glow);
 }
 
+.market-chart-wrap .market-vol-rank-sheet {
+  margin: 0;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  box-shadow: none;
+}
+
+.market-chart-wrap.is-fullscreen .market-vol-rank-sheet {
+  background: var(--chart-bar-bg);
+}
+
 .market-vol-rank-sheet.hidden {
   display: none;
 }

manual_trading_hub/static/chart.js

@@ -92,7 +92,10 @@
   const elVolRankMeta = document.getElementById("market-vol-rank-meta");
   const elVolRankList = document.getElementById("market-vol-rank-list");
   const elVolRankBtn = document.getElementById("market-vol-rank-btn");
+  const elFsVolRankBtn = document.getElementById("market-fs-vol-rank-btn");
   const elVolRankSheet = document.getElementById("market-vol-rank-sheet");
+  const elVolRankAnchor = document.getElementById("market-vol-rank-anchor");
+  const elVolRankAnchorFs = document.getElementById("market-vol-rank-anchor-fs");
   const elTf = document.getElementById("market-timeframe");
   const elRefresh = document.getElementById("market-refresh");
   const elStatus = document.getElementById("market-status");
@@ -952,6 +955,7 @@
       if (chartFullscreen) elFsExit.classList.remove("hidden");
       else elFsExit.classList.add("hidden");
     }
+    mountVolRankSheet(chartFullscreen);
     if (chartFullscreen) {
       populateFsExchangeOptions();
       syncFsToolbarFromMain();
@@ -2617,29 +2621,43 @@
     void postChartUnwatch();
   }
 
+  function mountVolRankSheet(forFullscreen) {
+    if (!elVolRankSheet) return;
+    const anchor = forFullscreen ? elVolRankAnchorFs : elVolRankAnchor;
+    if (!anchor || elVolRankSheet.parentElement === anchor) return;
+    anchor.appendChild(elVolRankSheet);
+  }
+
+  function setVolRankBtnActive(btn, on) {
+    if (!btn) return;
+    btn.classList.toggle("is-active", on);
+    btn.setAttribute("aria-expanded", on ? "true" : "false");
+  }
+
   function setVolRankSheetOpen(open) {
     const on = !!open;
     if (elVolRankSheet) {
       elVolRankSheet.classList.toggle("hidden", !on);
       elVolRankSheet.setAttribute("aria-hidden", on ? "false" : "true");
     }
-    if (elVolRankBtn) {
+    setVolRankBtnActive(elVolRankBtn, on);
-      elVolRankBtn.classList.toggle("is-active", on);
+    setVolRankBtnActive(elFsVolRankBtn, on);
-      elVolRankBtn.setAttribute("aria-expanded", on ? "true" : "false");
-    }
     if (on) void loadVolumeRank();
   }
 
   function bindVolRankPanel() {
-    if (!elVolRankBtn) return;
+    function toggleVolRankSheet() {
-    elVolRankBtn.addEventListener("click", function () {
       const open = elVolRankSheet && elVolRankSheet.classList.contains("hidden");
       setVolRankSheetOpen(open);
-    });
+    }
+    if (elVolRankBtn) elVolRankBtn.addEventListener("click", toggleVolRankSheet);
+    if (elFsVolRankBtn) elFsVolRankBtn.addEventListener("click", toggleVolRankSheet);
     document.addEventListener("pointerdown", function (ev) {
       if (!elVolRankSheet || elVolRankSheet.classList.contains("hidden")) return;
       const t = ev.target;
-      if (elVolRankSheet.contains(t) || (elVolRankBtn && elVolRankBtn.contains(t))) return;
+      if (elVolRankSheet.contains(t)) return;
+      if (elVolRankBtn && elVolRankBtn.contains(t)) return;
+      if (elFsVolRankBtn && elFsVolRankBtn.contains(t)) return;
       setVolRankSheetOpen(false);
     });
   }
@@ -2694,8 +2712,9 @@
         (row.volume_label || "") +
         "</span>";
       btn.addEventListener("click", function () {
-        if (!elSymbol || !row.symbol) return;
+        if (!row.symbol) return;
-        elSymbol.value = row.symbol;
+        if (elSymbol) elSymbol.value = row.symbol;
+        if (elFsSymbol) elFsSymbol.value = row.symbol;
         setVolRankSheetOpen(false);
         loadChart(false);
       });

manual_trading_hub/static/index.html

@@ -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=20260608-market-vol-rank-v4" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260608-market-vol-rank-v5" />
 </head>
 <body>
   <div class="app-bg" aria-hidden="true"></div>
@@ -115,9 +115,11 @@
         <span id="market-bar-countdown" class="toolbar-meta market-countdown"></span>
         <span id="market-updated" class="toolbar-meta"></span>
       </div>
-      <div id="market-vol-rank-sheet" class="market-vol-rank-sheet hidden" aria-hidden="true">
+      <div id="market-vol-rank-anchor" class="market-vol-rank-anchor">
-        <div id="market-vol-rank-meta" class="market-vol-rank-meta">加载中…</div>
+        <div id="market-vol-rank-sheet" class="market-vol-rank-sheet hidden" aria-hidden="true">
-        <ol id="market-vol-rank-list" class="market-vol-rank-list"></ol>
+          <div id="market-vol-rank-meta" class="market-vol-rank-meta">加载中…</div>
+          <ol id="market-vol-rank-list" class="market-vol-rank-list"></ol>
+        </div>
       </div>
       <p id="market-status" class="market-status"></p>
       <div id="market-chart-wrap" class="market-chart-wrap">
@@ -152,9 +154,21 @@
               <span>交易所</span>
               <select id="market-fs-exchange"></select>
             </label>
-            <label class="market-field market-fs-field">
+            <label class="market-field market-fs-field market-field-symbol">
               <span>币种</span>
-              <input id="market-fs-symbol" type="text" placeholder="BTC/USDT" autocomplete="off" />
+              <div class="market-symbol-wrap">
+                <input id="market-fs-symbol" type="text" placeholder="BTC/USDT" autocomplete="off" />
+                <button
+                  type="button"
+                  id="market-fs-vol-rank-btn"
+                  class="market-vol-rank-btn"
+                  title="昨日成交额 Top20（每早8点更新）"
+                  aria-expanded="false"
+                  aria-controls="market-vol-rank-sheet"
+                >
+                  Top20
+                </button>
+              </div>
             </label>
             <label class="market-field market-fs-field">
               <span>周期</span>
@@ -172,6 +186,7 @@
             <button type="button" id="market-fs-load" class="primary">加载</button>
           </div>
         </div>
+        <div id="market-vol-rank-anchor-fs" class="market-vol-rank-anchor-fs" aria-hidden="true"></div>
         <div id="market-pos-panel" class="market-pos-panel hidden" aria-label="持仓标记">
           <div class="market-pos-row">
             <span id="mkt-pos-side" class="market-pos-side"></span>
@@ -402,7 +417,7 @@
   <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_draw.js?v=20260608-market-vol-rank"></script>
-  <script src="/assets/chart.js?v=20260608-market-vol-rank-v4"></script>
+  <script src="/assets/chart.js?v=20260608-market-vol-rank-v5"></script>
   <script src="/assets/archive.js?v=20260607-hub-archive-v6"></script>
   <script src="/assets/ai_review_render.js?v=2"></script>
   <script src="/assets/app.js?v=20260607-hub-archive-v1"></script>