ui: show Top20 rank sheet below toolbar instead of over chart

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

manual_trading_hub/static/app.css

@@ -2628,9 +2628,6 @@ body.login-page {
   flex-wrap: wrap;
   gap: 10px;
   align-items: flex-end;
-  position: relative;
-  z-index: 60;
-  overflow: visible;
 }
 
 .market-field {
@@ -2931,16 +2928,11 @@ body.login-page {
   pointer-events: auto;
 }
 
-.market-field-symbol {
-  overflow: visible;
-}
-
 .market-field-symbol .market-symbol-wrap {
   display: flex;
   align-items: stretch;
   gap: 6px;
   min-width: 0;
-  overflow: visible;
 }
 
 .market-field-symbol .market-symbol-wrap > input {
@@ -2948,53 +2940,43 @@ body.login-page {
   min-width: 120px;
 }
 
-.market-vol-rank {
+.market-vol-rank-btn {
-  position: relative;
   flex: 0 0 auto;
-  overflow: visible;
-}
-
-.market-toolbar:has(.market-vol-rank[open]) {
-  z-index: 1300;
-}
-
-.market-vol-rank > summary {
-  list-style: none;
-  cursor: pointer;
-  height: 100%;
   min-height: 34px;
   padding: 0 10px;
-  display: inline-flex;
-  align-items: center;
   border: 1px solid var(--border-soft);
   border-radius: 6px;
   background: var(--inset-surface);
   color: var(--accent);
   font-size: 0.78rem;
   font-weight: 600;
+  font-family: var(--font);
   white-space: nowrap;
+  cursor: pointer;
 }
 
-.market-vol-rank > summary::-webkit-details-marker {
+.market-vol-rank-btn:hover {
-  display: none;
-}
-
-.market-vol-rank[open] > summary {
   border-color: rgba(0, 255, 157, 0.35);
   background: rgba(0, 255, 157, 0.08);
 }
 
-.market-vol-rank-panel {
+.market-vol-rank-btn.is-active {
-  position: fixed;
+  border-color: rgba(0, 255, 157, 0.45);
-  z-index: 1310;
+  background: rgba(0, 255, 157, 0.12);
-  width: min(320px, 72vw);
+  color: var(--accent);
-  max-height: min(420px, 70vh);
+}
-  overflow: auto;
+
+.market-vol-rank-sheet {
+  margin: -6px 0 12px;
+  padding: 10px 12px 8px;
   border: 1px solid var(--border-soft);
-  border-radius: 8px;
+  border-radius: var(--radius);
-  background: var(--panel-bg, #1a1f2e);
+  background: var(--panel);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
+  box-shadow: var(--glow);
-  padding: 8px 0 6px;
+}
+
+.market-vol-rank-sheet.hidden {
+  display: none;
 }
 
 .market-vol-rank-meta {
@@ -3008,6 +2990,11 @@ body.login-page {
   margin: 0;
   padding: 0;
   list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: 2px 12px;
+  max-height: 200px;
+  overflow: auto;
 }
 
 .market-vol-rank-item {

manual_trading_hub/static/chart.js

@@ -91,9 +91,8 @@
   const elSymbol = document.getElementById("market-symbol");
   const elVolRankMeta = document.getElementById("market-vol-rank-meta");
   const elVolRankList = document.getElementById("market-vol-rank-list");
-  const elVolRankDetails = document.getElementById("market-vol-rank");
+  const elVolRankBtn = document.getElementById("market-vol-rank-btn");
-  const elVolRankPanel =
+  const elVolRankSheet = document.getElementById("market-vol-rank-sheet");
-    elVolRankDetails && elVolRankDetails.querySelector(".market-vol-rank-panel");
   const elTf = document.getElementById("market-timeframe");
   const elRefresh = document.getElementById("market-refresh");
   const elStatus = document.getElementById("market-status");
@@ -2618,30 +2617,31 @@
     void postChartUnwatch();
   }
 
-  function positionVolRankPanel() {
+  function setVolRankSheetOpen(open) {
-    if (!elVolRankDetails || !elVolRankPanel || !elVolRankDetails.open) return;
+    const on = !!open;
-    const summary = elVolRankDetails.querySelector("summary");
+    if (elVolRankSheet) {
-    if (!summary) return;
+      elVolRankSheet.classList.toggle("hidden", !on);
-    const rect = summary.getBoundingClientRect();
+      elVolRankSheet.setAttribute("aria-hidden", on ? "false" : "true");
-    const panelW = elVolRankPanel.offsetWidth || 300;
+    }
-    let left = rect.right - panelW;
+    if (elVolRankBtn) {
-    left = Math.max(8, Math.min(left, window.innerWidth - panelW - 8));
+      elVolRankBtn.classList.toggle("is-active", on);
-    const top = rect.bottom + 4;
+      elVolRankBtn.setAttribute("aria-expanded", on ? "true" : "false");
-    const maxH = Math.min(420, window.innerHeight - top - 12);
+    }
-    elVolRankPanel.style.left = left + "px";
+    if (on) void loadVolumeRank();
-    elVolRankPanel.style.top = top + "px";
-    elVolRankPanel.style.maxHeight = Math.max(180, maxH) + "px";
   }
 
   function bindVolRankPanel() {
-    if (!elVolRankDetails) return;
+    if (!elVolRankBtn) return;
-    elVolRankDetails.addEventListener("toggle", function () {
+    elVolRankBtn.addEventListener("click", function () {
-      if (elVolRankDetails.open) {
+      const open = elVolRankSheet && elVolRankSheet.classList.contains("hidden");
-        requestAnimationFrame(positionVolRankPanel);
+      setVolRankSheetOpen(open);
-      }
+    });
+    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;
+      setVolRankSheetOpen(false);
     });
-    window.addEventListener("resize", positionVolRankPanel);
-    window.addEventListener("scroll", positionVolRankPanel, true);
   }
 
   function renderVolumeRank(data) {
@@ -2696,15 +2696,12 @@
       btn.addEventListener("click", function () {
         if (!elSymbol || !row.symbol) return;
         elSymbol.value = row.symbol;
-        if (elVolRankDetails) elVolRankDetails.open = false;
+        setVolRankSheetOpen(false);
         loadChart(false);
       });
       li.appendChild(btn);
       elVolRankList.appendChild(li);
     });
-    if (elVolRankDetails && elVolRankDetails.open) {
-      requestAnimationFrame(positionVolRankPanel);
-    }
   }
 
   async function loadVolumeRank(forceRefresh) {
@@ -2745,7 +2742,6 @@
     readQuery();
     applyDefaults();
     updateExchangeDisplay();
-    void loadVolumeRank();
   }
 
   async function loadChart(force, options) {
@@ -2886,7 +2882,9 @@
         updateExchangeDisplay();
         syncFsToolbarFromMain();
         lastViewKey = "";
-        void loadVolumeRank();
+        if (elVolRankSheet && !elVolRankSheet.classList.contains("hidden")) {
+          void loadVolumeRank();
+        }
         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-v3" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260608-market-vol-rank-v4" />
 </head>
 <body>
   <div class="app-bg" aria-hidden="true"></div>
@@ -84,13 +84,16 @@
           <span>币种</span>
           <div class="market-symbol-wrap">
             <input id="market-symbol" type="text" value="BTC/USDT" placeholder="BTC/USDT" autocomplete="off" />
-            <details id="market-vol-rank" class="market-vol-rank">
+            <button
-              <summary title="昨日成交额 Top20（每早8点更新）">Top20</summary>
+              type="button"
-              <div class="market-vol-rank-panel">
+              id="market-vol-rank-btn"
-                <div id="market-vol-rank-meta" class="market-vol-rank-meta">加载中…</div>
+              class="market-vol-rank-btn"
-                <ol id="market-vol-rank-list" class="market-vol-rank-list"></ol>
+              title="昨日成交额 Top20（每早8点更新）"
-              </div>
+              aria-expanded="false"
-            </details>
+              aria-controls="market-vol-rank-sheet"
+            >
+              Top20
+            </button>
           </div>
         </label>
         <label class="market-field">
@@ -112,6 +115,10 @@
         <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-meta" class="market-vol-rank-meta">加载中…</div>
+        <ol id="market-vol-rank-list" class="market-vol-rank-list"></ol>
+      </div>
       <p id="market-status" class="market-status"></p>
       <div id="market-chart-wrap" class="market-chart-wrap">
         <div class="market-ohlcv-bar" aria-label="K线详情">
@@ -395,7 +402,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-v3"></script>
+  <script src="/assets/chart.js?v=20260608-market-vol-rank-v4"></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>