diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css index 8a3f04b..8aca927 100644 --- a/manual_trading_hub/static/app.css +++ b/manual_trading_hub/static/app.css @@ -5569,6 +5569,7 @@ body.funds-fullscreen-open { gap: 10px; padding: 12px; min-height: 100%; + min-height: 0; } .archive-period-bar { flex-wrap: wrap; @@ -5606,20 +5607,43 @@ body.funds-fullscreen-open { font-size: 0.82rem; } .archive-stats-bar { - padding: 10px 12px; + padding: 0; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--inset-surface); font-size: 0.82rem; color: var(--text); line-height: 1.45; - display: flex; - flex-direction: column; - gap: 4px; + overflow: auto; } -.archive-stats-sub { - font-size: 0.78rem; +.archive-stats-table { + width: 100%; + border-collapse: collapse; + font-size: 0.8rem; +} +.archive-stats-table th, +.archive-stats-table td { + padding: 7px 10px; + border-bottom: 1px solid var(--border-soft); + text-align: left; + white-space: nowrap; +} +.archive-stats-table th { color: var(--muted); + font-weight: 500; + background: var(--inset-surface); +} +.archive-stats-table tr:last-child td { + border-bottom: none; +} +.archive-stats-table tr.archive-stats-total td { + background: color-mix(in srgb, var(--accent) 6%, transparent); +} +.archive-stats-table .pnl-pos { + color: #22c55e; +} +.archive-stats-table .pnl-neg { + color: #ef4444; } .archive-acc-section { border: 1px solid var(--border-soft); @@ -5648,10 +5672,24 @@ body.funds-fullscreen-open { .archive-chart-section > :not(summary) { padding: 0 10px 10px; } +.archive-trades-section { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; +} .archive-trades-section > .archive-trades { border: none; border-radius: 0; - max-height: 380px; + flex: 1 1 auto; + min-height: 0; + max-height: none; +} +#page-archive.is-chart-open .archive-trades-section > .archive-trades { + flex: 0 0 auto; +} +#page-archive:not(.is-chart-open) .archive-trades-section > .archive-trades { + min-height: calc(100vh - 420px); } .archive-chart-toolbar { flex-wrap: wrap; @@ -5712,7 +5750,6 @@ body.funds-fullscreen-open { } .archive-trades { overflow: auto; - max-height: 380px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--panel); diff --git a/manual_trading_hub/static/archive.js b/manual_trading_hub/static/archive.js index 1ea47e3..ed3effd 100644 --- a/manual_trading_hub/static/archive.js +++ b/manual_trading_hub/static/archive.js @@ -35,7 +35,9 @@ const elChartHost = document.getElementById("archive-chart"); const elMarkAuto = document.getElementById("archive-mark-auto"); const elTrades = document.getElementById("archive-trades"); + const elTradesSection = document.getElementById("archive-trades-section"); const ARCHIVE_MARK_AUTO_KEY = "hubArchiveMarkAuto"; + const TRADES_VISIBLE_ROWS_CHART_OPEN = 10; const TF_MS = { "5m": 5 * 60_000, @@ -269,12 +271,30 @@ return !!(elChartSection && elChartSection.open); } + function syncTradesLayout() { + const open = isChartOpen(); + if (page) page.classList.toggle("is-chart-open", open); + if (elTradesSection) elTradesSection.classList.toggle("is-chart-open", open); + if (!elTrades) return; + if (open) { + const head = elTrades.querySelector("thead tr"); + const row = elTrades.querySelector("tbody tr"); + if (head && row) { + const h = head.offsetHeight + row.offsetHeight * TRADES_VISIBLE_ROWS_CHART_OPEN; + elTrades.style.maxHeight = h + "px"; + } + } else { + elTrades.style.maxHeight = ""; + } + } + function setChartOpen(on) { if (!elChartSection) return; elChartSection.open = !!on; if (elBtnChartToggle) { elBtnChartToggle.classList.toggle("is-active", !!on); } + syncTradesLayout(); if (!on) { destroyChart(); return; @@ -359,50 +379,59 @@ if (cur) elExchange.value = cur; } + function renderStatsRow(label, e, isTotal) { + const openN = e.open_count || 0; + const sickN = e.sick_count || 0; + const sickShare = e.sick_pct != null ? e.sick_pct : openN ? Math.round((sickN / openN) * 1000) / 10 : 0; + const rowCls = isTotal ? ' class="archive-stats-total"' : ""; + return ( + "
| 范围 | 开仓 | 犯病 | 犯病占比 | 盈亏 | 剔除犯病盈亏 | " + + "
|---|