From 33b3e5f54b1ec3cfbc5359c21027e4cd892b4e4a Mon Sep 17 00:00:00 2001 From: dekun Date: Fri, 17 Jul 2026 14:05:59 +0800 Subject: [PATCH] Keep calendar day trades inline and hide K-line by default. Show selected-day trades under the calendar without tab jumps, put trades first, and open the chart only via toolbar or row actions. Co-authored-by: Cursor --- manual_trading_hub/static/app.css | 35 +++++++++- manual_trading_hub/static/archive.js | 100 +++++++++++++++++++++++---- manual_trading_hub/static/index.html | 78 ++++++++++++--------- 3 files changed, 165 insertions(+), 48 deletions(-) diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css index 4fbefe9..a070160 100644 --- a/manual_trading_hub/static/app.css +++ b/manual_trading_hub/static/app.css @@ -8741,8 +8741,41 @@ body.funds-fullscreen-open { font-size: 0.76rem; color: var(--muted); } +.archive-calendar-day-trades { + margin-top: 12px; + border-top: 1px solid var(--border-soft); + padding-top: 12px; + display: flex; + flex-direction: column; + gap: 8px; +} +.archive-calendar-day-trades .archive-panel-head h3 { + margin: 0; + font-size: 0.9rem; +} +.archive-calendar-day-trades-body { + overflow: auto; + max-height: min(360px, 45vh); +} +.archive-chart-section { + display: flex; + flex-direction: column; + gap: 8px; + padding: 10px; + border: 1px solid var(--border-soft); + border-radius: 8px; + background: var(--inset-surface); + margin-bottom: 10px; +} +.archive-chart-section[hidden] { + display: none !important; +} +.archive-chart-title-row { + font-size: 0.78rem; + color: var(--muted); +} .archive-chart-section > :not(summary) { - padding: 0 10px 10px; + padding: 0; } .archive-trades-section { flex: 0 0 auto; diff --git a/manual_trading_hub/static/archive.js b/manual_trading_hub/static/archive.js index 402a8c7..2231372 100644 --- a/manual_trading_hub/static/archive.js +++ b/manual_trading_hub/static/archive.js @@ -43,6 +43,9 @@ const elQuoteDayTradesBody = document.getElementById("archive-quote-day-trades-body"); const elChartSection = document.getElementById("archive-chart-section"); const elChartTitle = document.getElementById("archive-chart-title"); + const elBtnChartClose = document.getElementById("archive-btn-chart-close"); + const elCalDayTradesMeta = document.getElementById("archive-calendar-day-trades-meta"); + const elCalDayTradesBody = document.getElementById("archive-calendar-day-trades-body"); const elTfTabs = document.getElementById("archive-tf-tabs"); const elViewMode = document.getElementById("archive-view-mode"); const elJumpAt = document.getElementById("archive-jump-at"); @@ -324,7 +327,7 @@ } function isChartOpen() { - return !!(elChartSection && elChartSection.open); + return !!(elChartSection && !elChartSection.hidden); } function syncTradesLayout() { @@ -346,12 +349,16 @@ function setChartOpen(on) { if (!elChartSection) return; - elChartSection.open = !!on; + const want = !!on; + elChartSection.hidden = !want; if (elBtnChartToggle) { - elBtnChartToggle.classList.toggle("is-active", !!on); + elBtnChartToggle.classList.toggle("is-active", want); + } + if (want && archiveContentTab !== "trades") { + setArchiveContentTab("trades"); } syncTradesLayout(); - if (!on) { + if (!want) { destroyChart(); return; } @@ -561,7 +568,6 @@ if (elQuoteDate) elQuoteDate.value = day; if (elFilterSick) elFilterSick.checked = false; syncPeriodUI(); - setArchiveContentTab("trades"); void loadDailyTrades(); }, }); @@ -999,6 +1005,7 @@ void loadQuoteDayTrades(); } else if (next === "calendar") { void loadCalendar(); + renderCalendarDayTrades(); } else if (next === "trades") { requestAnimationFrame(syncTradesLayout); } @@ -1714,6 +1721,75 @@ await switchToTrade(tr); } + function renderCalendarDayTrades() { + if (!elCalDayTradesBody) return; + const day = + selectedCalendarDay || + (periodMode === "today" && tradingDay) || + (elTradingDay && elTradingDay.value) || + ""; + if (elCalDayTradesMeta) { + elCalDayTradesMeta.textContent = + periodMode === "today" && day ? day + " · " + dailyTrades.length + " 笔" : ""; + } + if (periodMode !== "today" || !day) { + elCalDayTradesBody.innerHTML = + '

点击日历中的日期,在下方查看当日交易记录.

'; + return; + } + if (!dailyTrades.length) { + elCalDayTradesBody.innerHTML = + '

该日暂无交易记录.

'; + return; + } + elCalDayTradesBody.innerHTML = + '' + + "" + + "" + + dailyTrades + .map(function (t) { + const rowKey = tradeRowKey(t); + const tag = quoteTagLabel(t); + return ( + "" + + "" + + "" + + "" + + '" + + '" + + '" + + "" + + '' + ); + }) + .join("") + + "
交易所合约方向开仓平仓盈亏标签
" + + esc(tradeRowExchange(t)) + + "" + + esc(t.symbol || "—") + + "" + + esc(t.direction || "—") + + "' + + fmtDt(t.opened_at) + + "' + + fmtDt(t.closed_at) + + "' + + fmtPnl(t.pnl_amount) + + "" + + esc(tag) + + "
"; + elCalDayTradesBody.querySelectorAll(".archive-cal-chart-btn").forEach(function (btn) { + btn.addEventListener("click", function () { + const tr = findTradeByKey(btn.getAttribute("data-key")); + if (tr) void openTradeChart(tr); + }); + }); + } + function tradesPageCount() { return Math.max(1, Math.ceil((dailyTrades.length || 0) / TRADES_PAGE_SIZE)); } @@ -2000,6 +2076,7 @@ } renderStats(); renderTrades(); + renderCalendarDayTrades(); void loadCalendar(); if (archiveContentTab === "quotes") void loadQuoteDayTrades(); setStatus( @@ -2122,16 +2199,9 @@ } }); } - if (elChartSection) { - elChartSection.addEventListener("toggle", async function () { - if (elBtnChartToggle) elBtnChartToggle.classList.toggle("is-active", elChartSection.open); - syncTradesLayout(); - if (elChartSection.open) { - await ensureChartSelection(); - void loadChart(); - } else { - destroyChart(); - } + if (elBtnChartClose) { + elBtnChartClose.addEventListener("click", function () { + setChartOpen(false); }); } if (elQuoteForm) elQuoteForm.addEventListener("submit", submitQuoteForm); diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html index c181e9e..2b750e7 100644 --- a/manual_trading_hub/static/index.html +++ b/manual_trading_hub/static/index.html @@ -15,7 +15,7 @@ - + @@ -445,7 +445,7 @@