dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: add Top20 button to market chart fullscreen toolbar

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-08 16:37:05 +08:00
parent 5fb4a10638
commit 947b58084d
3 changed files with 76 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.css
+25 -1
View File
@@ -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
+29 -10
View File
@@ -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);
});
manual_trading_hub/static/index.html
+22 -7
View File
@@ -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-meta" class="market-vol-rank-meta">加载中…</div>
<ol id="market-vol-rank-list" class="market-vol-rank-list"></ol>
<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">
@@ -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>