diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css
index 3238a93..271dc17 100644
--- a/manual_trading_hub/static/app.css
+++ b/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 {
- position: relative;
+.market-vol-rank-btn {
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 {
- display: none;
-}
-
-.market-vol-rank[open] > summary {
+.market-vol-rank-btn:hover {
border-color: rgba(0, 255, 157, 0.35);
background: rgba(0, 255, 157, 0.08);
}
-.market-vol-rank-panel {
- position: fixed;
- z-index: 1310;
- width: min(320px, 72vw);
- max-height: min(420px, 70vh);
- overflow: auto;
+.market-vol-rank-btn.is-active {
+ border-color: rgba(0, 255, 157, 0.45);
+ background: rgba(0, 255, 157, 0.12);
+ color: var(--accent);
+}
+
+.market-vol-rank-sheet {
+ margin: -6px 0 12px;
+ padding: 10px 12px 8px;
border: 1px solid var(--border-soft);
- border-radius: 8px;
- background: var(--panel-bg, #1a1f2e);
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
- padding: 8px 0 6px;
+ border-radius: var(--radius);
+ background: var(--panel);
+ box-shadow: var(--glow);
+}
+
+.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 {
diff --git a/manual_trading_hub/static/chart.js b/manual_trading_hub/static/chart.js
index b9d1019..39c235f 100644
--- a/manual_trading_hub/static/chart.js
+++ b/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 elVolRankPanel =
- elVolRankDetails && elVolRankDetails.querySelector(".market-vol-rank-panel");
+ const elVolRankBtn = document.getElementById("market-vol-rank-btn");
+ const elVolRankSheet = document.getElementById("market-vol-rank-sheet");
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() {
- if (!elVolRankDetails || !elVolRankPanel || !elVolRankDetails.open) return;
- const summary = elVolRankDetails.querySelector("summary");
- if (!summary) return;
- const rect = summary.getBoundingClientRect();
- const panelW = elVolRankPanel.offsetWidth || 300;
- let left = rect.right - panelW;
- left = Math.max(8, Math.min(left, window.innerWidth - panelW - 8));
- const top = rect.bottom + 4;
- const maxH = Math.min(420, window.innerHeight - top - 12);
- elVolRankPanel.style.left = left + "px";
- elVolRankPanel.style.top = top + "px";
- elVolRankPanel.style.maxHeight = Math.max(180, maxH) + "px";
+ function setVolRankSheetOpen(open) {
+ const on = !!open;
+ if (elVolRankSheet) {
+ elVolRankSheet.classList.toggle("hidden", !on);
+ elVolRankSheet.setAttribute("aria-hidden", on ? "false" : "true");
+ }
+ if (elVolRankBtn) {
+ elVolRankBtn.classList.toggle("is-active", on);
+ elVolRankBtn.setAttribute("aria-expanded", on ? "true" : "false");
+ }
+ if (on) void loadVolumeRank();
}
function bindVolRankPanel() {
- if (!elVolRankDetails) return;
- elVolRankDetails.addEventListener("toggle", function () {
- if (elVolRankDetails.open) {
- requestAnimationFrame(positionVolRankPanel);
- }
+ if (!elVolRankBtn) return;
+ elVolRankBtn.addEventListener("click", function () {
+ const open = elVolRankSheet && elVolRankSheet.classList.contains("hidden");
+ 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);
});
}
diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html
index eebb217..1472194 100644
--- a/manual_trading_hub/static/index.html
+++ b/manual_trading_hub/static/index.html
@@ -15,7 +15,7 @@
-
+
@@ -84,13 +84,16 @@
币种