ui: add Top20 button to market chart fullscreen toolbar
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
elVolRankBtn.classList.toggle("is-active", on);
|
||||
elVolRankBtn.setAttribute("aria-expanded", on ? "true" : "false");
|
||||
}
|
||||
setVolRankBtnActive(elVolRankBtn, on);
|
||||
setVolRankBtnActive(elFsVolRankBtn, on);
|
||||
if (on) void loadVolumeRank();
|
||||
}
|
||||
|
||||
function bindVolRankPanel() {
|
||||
if (!elVolRankBtn) return;
|
||||
elVolRankBtn.addEventListener("click", function () {
|
||||
function toggleVolRankSheet() {
|
||||
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;
|
||||
elSymbol.value = row.symbol;
|
||||
if (!row.symbol) return;
|
||||
if (elSymbol) elSymbol.value = row.symbol;
|
||||
if (elFsSymbol) elFsSymbol.value = row.symbol;
|
||||
setVolRankSheetOpen(false);
|
||||
loadChart(false);
|
||||
});
|
||||
|
||||
@@ -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,10 +115,12 @@
|
||||
<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-anchor" class="market-vol-rank-anchor">
|
||||
<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>
|
||||
</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线详情">
|
||||
@@ -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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user