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

feat: market divergence scan tabs (4h/1d/1w) with Top20 MACD confluence colors

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-06 19:58:30 +08:00
parent 81f7a7c451
commit e62a3f3351
7 changed files with 999 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.css
+87
View File
@@ -4066,6 +4066,39 @@ body.login-page {
cursor: pointer;
}
.market-scan-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
flex: 0 0 auto;
}
.market-scan-tab {
flex: 0 0 auto;
min-height: 34px;
padding: 0 8px;
border: 1px solid var(--border-soft);
border-radius: 6px;
background: var(--inset-surface);
color: var(--muted);
font-size: 0.72rem;
font-weight: 600;
font-family: var(--font);
white-space: nowrap;
cursor: pointer;
}
.market-scan-tab:hover {
border-color: rgba(0, 255, 157, 0.35);
color: var(--text);
}
.market-scan-tab.is-active {
border-color: rgba(0, 255, 157, 0.45);
background: rgba(0, 255, 157, 0.12);
color: var(--accent);
}
.market-vol-rank-btn:hover {
border-color: rgba(0, 255, 157, 0.35);
background: rgba(0, 255, 157, 0.08);
@@ -4153,6 +4186,60 @@ body.login-page {
color: var(--accent);
}
.market-vol-rank-item.confluence-c1 {
border-left: 3px solid #6b8cae;
}
.market-vol-rank-item.confluence-c2 {
border-left: 3px solid #e6a23c;
}
.market-vol-rank-item.confluence-c3 {
border-left: 3px solid #ff4d8d;
}
.market-vol-rank-item.confluence-split {
border-left: 3px solid #8a8f98;
}
.market-vol-rank-item.is-div-scan {
grid-template-columns: auto 28px 1fr auto;
}
.market-vol-rank-badge {
padding: 1px 6px;
border-radius: 4px;
font-size: 0.62rem;
font-weight: 700;
white-space: nowrap;
}
.market-vol-rank-badge.confluence-c1 {
background: rgba(107, 140, 174, 0.22);
color: #9eb8d4;
}
.market-vol-rank-badge.confluence-c2 {
background: rgba(230, 162, 60, 0.2);
color: #f0c070;
}
.market-vol-rank-badge.confluence-c3 {
background: rgba(255, 77, 141, 0.18);
color: #ff8cb8;
}
.market-vol-rank-badge.confluence-split {
background: rgba(138, 143, 152, 0.22);
color: #b8bcc4;
}
.market-vol-rank-div {
font-size: 0.68rem;
color: var(--muted);
white-space: nowrap;
}
.market-vol-rank-no {
color: var(--muted);
font-variant-numeric: tabular-nums;
manual_trading_hub/static/chart.js
+137 -26
View File
@@ -154,11 +154,11 @@
const elSymbol = document.getElementById("market-symbol");
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");
let activeScanTab = "top20";
let scanSheetOpen = false;
const elTf = document.getElementById("market-timeframe");
const elRefresh = document.getElementById("market-refresh");
const elStatus = document.getElementById("market-status");
@@ -2965,6 +2965,19 @@
void postChartUnwatch();
}
function allScanTabButtons() {
return Array.prototype.slice.call(document.querySelectorAll(".market-scan-tab"));
}
function setActiveScanTab(tab) {
activeScanTab = tab || "top20";
allScanTabButtons().forEach(function (btn) {
const on = btn.getAttribute("data-scan-tab") === activeScanTab;
btn.classList.toggle("is-active", on);
btn.setAttribute("aria-selected", on ? "true" : "false");
});
}
function mountVolRankSheet(forFullscreen) {
if (!elVolRankSheet) return;
const anchor = forFullscreen ? elVolRankAnchorFs : elVolRankAnchor;
@@ -2972,40 +2985,142 @@
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) {
function setScanSheetOpen(open, tab) {
const on = !!open;
scanSheetOpen = on;
if (tab) setActiveScanTab(tab);
if (elVolRankSheet) {
elVolRankSheet.classList.toggle("hidden", !on);
elVolRankSheet.setAttribute("aria-hidden", on ? "false" : "true");
}
setVolRankBtnActive(elVolRankBtn, on);
setVolRankBtnActive(elFsVolRankBtn, on);
if (on) void loadVolumeRank();
if (on) void loadScanPanel(false);
}
function loadScanPanel(forceRefresh) {
if (activeScanTab === "top20") {
void loadVolumeRank(forceRefresh);
return;
}
void loadDivergenceScan(activeScanTab, forceRefresh);
}
function bindVolRankPanel() {
function toggleVolRankSheet() {
const open = elVolRankSheet && elVolRankSheet.classList.contains("hidden");
setVolRankSheetOpen(open);
}
if (elVolRankBtn) elVolRankBtn.addEventListener("click", toggleVolRankSheet);
if (elFsVolRankBtn) elFsVolRankBtn.addEventListener("click", toggleVolRankSheet);
allScanTabButtons().forEach(function (btn) {
btn.addEventListener("click", function () {
const tab = btn.getAttribute("data-scan-tab") || "top20";
if (scanSheetOpen && activeScanTab === tab) {
setScanSheetOpen(false);
return;
}
setScanSheetOpen(true, tab);
});
});
document.addEventListener("pointerdown", function (ev) {
if (!elVolRankSheet || elVolRankSheet.classList.contains("hidden")) return;
const t = ev.target;
if (elVolRankSheet.contains(t)) return;
if (elVolRankBtn && elVolRankBtn.contains(t)) return;
if (elFsVolRankBtn && elFsVolRankBtn.contains(t)) return;
setVolRankSheetOpen(false);
if (t && t.closest && t.closest(".market-scan-tabs")) return;
setScanSheetOpen(false);
});
}
function applyScanSymbolSelection(symbol, tabTf) {
if (!symbol) return;
if (elSymbol) elSymbol.value = symbol;
if (elFsSymbol) elFsSymbol.value = symbol;
if (tabTf && tabTf !== "top20") {
if (elTf) elTf.value = tabTf;
if (elFsTf) elFsTf.value = tabTf;
if (elIndMacd) elIndMacd.checked = true;
indicatorState.macd = true;
}
setScanSheetOpen(false);
loadChart(false);
}
function renderDivergenceScan(data) {
if (!elVolRankMeta || !elVolRankList) return;
elVolRankList.innerHTML = "";
const tabLabel = (data && data.tab_label) || "背离";
if (!data || !data.ok || !data.items || !data.items.length) {
elVolRankMeta.textContent =
(data && data.msg) ||
tabLabel + "：Top20 内暂无 MACD 背离（可点「清库重拉」后重试扫描）";
return;
}
const rankDate = data.rank_date || "—";
const updated = data.scanned_at || data.updated_at || "—";
let meta =
tabLabel +
" · Top20 内 MACD 档A · 交易日 " +
rankDate +
" · 扫描 " +
updated +
" · " +
data.items.length +
" 条";
elVolRankMeta.textContent = meta;
const curSym = (elSymbol && elSymbol.value.trim().toUpperCase()) || "";
const tabTf = data.tab || activeScanTab;
data.items.forEach(function (row) {
const li = document.createElement("li");
const btn = document.createElement("button");
btn.type = "button";
const css = row.confluence_css || "none";
btn.className = "market-vol-rank-item is-div-scan confluence-" + css;
if (row.symbol && row.symbol.toUpperCase() === curSym) {
btn.classList.add("is-active");
}
btn.dataset.symbol = row.symbol || "";
const dirLabel = row.is_split
? "分歧"
: row.tab_direction_label || row.direction_label || "";
const confLabel = row.is_split ? row.split_detail || "分歧" : row.confluence_kind || "";
const fresh = row.tab_freshness || "";
btn.innerHTML =
'<span class="market-vol-rank-badge confluence-' +
css +
'">' +
(confLabel || "—") +
'</span><span class="market-vol-rank-no">' +
(row.rank || "") +
'</span><span class="market-vol-rank-sym">' +
(row.symbol || "") +
'</span><span class="market-vol-rank-div">' +
dirLabel +
(fresh ? " · " + fresh : "") +
"</span>";
btn.addEventListener("click", function () {
applyScanSymbolSelection(row.symbol, tabTf);
});
li.appendChild(btn);
elVolRankList.appendChild(li);
});
}
async function loadDivergenceScan(tab, forceRefresh) {
const exKey = (elExchange && elExchange.value) || "";
if (!exKey || !elVolRankMeta) return;
elVolRankMeta.textContent = "扫描背离…";
if (elVolRankList) elVolRankList.innerHTML = "";
try {
let url =
"/api/chart/divergence-scan?exchange_key=" +
encodeURIComponent(exKey) +
"&tab=" +
encodeURIComponent(tab || "4h");
if (forceRefresh) url += "&refresh=1";
const r = await fetch(url, { credentials: "same-origin" });
const data = await r.json();
if (!r.ok) {
throw new Error((data && data.detail) || (data && data.msg) || "加载失败");
}
renderDivergenceScan(data);
} catch (e) {
renderDivergenceScan({ ok: false, msg: String(e.message || e), tab_label: tab });
}
}
function renderVolumeRank(data) {
if (!elVolRankMeta || !elVolRankList) return;
elVolRankList.innerHTML = "";
@@ -3056,11 +3171,7 @@
(row.volume_label || "") +
"</span>";
btn.addEventListener("click", function () {
if (!row.symbol) return;
if (elSymbol) elSymbol.value = row.symbol;
if (elFsSymbol) elFsSymbol.value = row.symbol;
setVolRankSheetOpen(false);
loadChart(false);
applyScanSymbolSelection(row.symbol, "top20");
});
li.appendChild(btn);
elVolRankList.appendChild(li);
manual_trading_hub/static/index.html
+13 -21
View File
@@ -258,16 +258,12 @@
<span>币种</span>
<div class="market-symbol-wrap">
<input id="market-symbol" type="text" value="BTC/USDT" placeholder="BTC/USDT" autocomplete="off" />
<button
type="button"
id="market-vol-rank-btn"
class="market-vol-rank-btn"
title="昨日成交额 Top20（每早8点更新）"
aria-expanded="false"
aria-controls="market-vol-rank-sheet"
>
Top20
</button>
<div class="market-scan-tabs" role="tablist" aria-label="成交额与背离筛选">
<button type="button" class="market-scan-tab is-active" data-scan-tab="top20" aria-selected="true">Top20</button>
<button type="button" class="market-scan-tab" data-scan-tab="4h" aria-selected="false">4h背离</button>
<button type="button" class="market-scan-tab" data-scan-tab="1d" aria-selected="false">日线背离</button>
<button type="button" class="market-scan-tab" data-scan-tab="1w" aria-selected="false">周线背离</button>
</div>
</div>
</label>
<label class="market-field">
@@ -342,16 +338,12 @@
<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 class="market-scan-tabs" role="tablist" aria-label="成交额与背离筛选">
<button type="button" class="market-scan-tab is-active" data-scan-tab="top20" aria-selected="true">Top20</button>
<button type="button" class="market-scan-tab" data-scan-tab="4h" aria-selected="false">4h背离</button>
<button type="button" class="market-scan-tab" data-scan-tab="1d" aria-selected="false">日线背离</button>
<button type="button" class="market-scan-tab" data-scan-tab="1w" aria-selected="false">周线背离</button>
</div>
</div>
</label>
<label class="market-field market-fs-field">
@@ -1148,7 +1140,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=20260609-market-day-split"></script>
<script src="/assets/chart.js?v=20260706-ema144"></script>
<script src="/assets/chart.js?v=20260706-div-scan"></script>
<script src="/assets/plan.js?v=20260614-plan-refresh"></script>
<script src="/assets/calculator.js?v=3"></script>
<script src="/assets/trade_stats_calendar.js?v=3"></script>