feat: strategy trade snapshots, DCA detail, and hub trend layout

Persist ended trend pullback and roll group snapshots to a unified records page; show replenishment tiers on instance and hub cards with horizontal single-position layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-04 10:45:27 +08:00
parent 1a6b5f55a1
commit 3fb2023efb
21 changed files with 665 additions and 44 deletions
+76 -7
View File
@@ -1375,15 +1375,84 @@ body.market-chart-fs-open {
color: #8fc8ff;
}
.exchange-fullscreen .hub-trend-plan-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
align-items: stretch;
.hub-trend-plan-card--horizontal {
display: flex;
flex-wrap: wrap;
gap: 14px 18px;
align-items: flex-start;
background: linear-gradient(145deg, rgba(12, 18, 32, 0.92), rgba(8, 12, 22, 0.88));
border-color: rgba(0, 212, 255, 0.22);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.exchange-fullscreen .hub-trend-plan-card {
height: 100%;
.hub-trend-plan-body {
flex: 1 1 320px;
min-width: 0;
}
.hub-trend-plan-side {
flex: 1 1 220px;
min-width: 200px;
max-width: 100%;
}
.hub-trend-dca-block {
padding: 8px 10px;
background: rgba(0, 0, 0, 0.22);
border: 1px solid var(--border-soft);
border-radius: 8px;
}
.hub-trend-dca-title {
font-size: 11px;
color: var(--muted);
margin-bottom: 6px;
}
.hub-trend-dca-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
}
.hub-trend-dca-table th,
.hub-trend-dca-table td {
padding: 4px 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
text-align: left;
}
.hub-trend-dca-table th {
color: var(--muted);
font-weight: 600;
}
.hub-trend-dca-table .dca-done {
color: var(--green);
}
.hub-trend-dca-table .dca-pending {
color: var(--muted);
}
.exchange-fullscreen .hub-trend-plan-list {
display: block;
max-width: 100%;
}
.exchange-fullscreen .hub-trend-plan-card--horizontal {
width: 100%;
}
.exchange-fullscreen .hub-trend-plan-metrics-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 10px 16px;
}
.exchange-fullscreen .hub-trend-plan-grid {
flex: 1 1 280px;
}
/* 顺势加仓 */
+56 -19
View File
@@ -1513,6 +1513,37 @@
return html;
}
function renderTrendDcaTable(t, tickMap) {
const levels = Array.isArray(t.dca_levels) ? t.dca_levels : [];
if (!levels.length) return "";
const sym = t.exchange_symbol || t.symbol || "";
const rows = levels
.map((lv) => {
const price =
lv.price != null && lv.price !== ""
? fmtSymbolPrice(lv.price, sym, tickMap)
: "—";
const amt =
lv.contracts != null && lv.contracts !== "" ? esc(String(lv.contracts)) : "—";
const stCls = lv.status === "done" ? "dca-done" : "dca-pending";
const label = lv.status_label || (lv.status === "done" ? "已补仓" : "待补仓");
return `<tr>
<td>${esc(lv.label || lv.leg_key || "—")}</td>
<td>${esc(price)}</td>
<td>${amt}</td>
<td class="${stCls}">${esc(label)}</td>
</tr>`;
})
.join("");
return `<div class="hub-trend-dca-block">
<div class="hub-trend-dca-title">补仓计划明细</div>
<table class="hub-trend-dca-table">
<thead><tr><th>档位</th><th>触发价</th><th>张数</th><th>状态</th></tr></thead>
<tbody>${rows}</tbody>
</table>
</div>`;
}
function renderTrendPlanCard(t, tickMap, pos) {
const sym = t.exchange_symbol || t.symbol || "";
const side = (t.direction || "long").toLowerCase();
@@ -1560,26 +1591,32 @@
<span>计划基数: ${baseTxt}</span>
<span>仓位占比: ${ratioTxt}</span>
</div>`;
return `<div class="hub-trend-plan-card hub-pos-card">
<div class="hub-trend-plan-head">
<span class="hub-trend-plan-title">#${esc(t.id)} ${esc(sym)} ${renderDirectionHtml(t.direction)}</span>
<span class="hub-trend-plan-status">${esc(t.status || "active")}</span>
const dcaHtml = renderTrendDcaTable(t, tickMap);
return `<div class="hub-trend-plan-card hub-pos-card hub-trend-plan-card--horizontal">
<div class="hub-trend-plan-body">
<div class="hub-trend-plan-head">
<span class="hub-trend-plan-title">#${esc(t.id)} ${esc(sym)} ${renderDirectionHtml(t.direction)}</span>
<span class="hub-trend-plan-status">${esc(t.status || "active")}</span>
</div>
<div class="hub-trend-plan-meta">
<span>来源: 趋势回调计划</span>
<span>风险: ${riskTxt}</span>
<span>${esc(trendAddZoneLabel(t.direction))} ${esc(addZone)}</span>
<span>已补仓 <strong>${legsTxt}</strong></span>
</div>
<div class="hub-trend-plan-metrics-row">
<div class="pos-grid hub-trend-plan-grid">
<div class="pos-cell"><span class="pos-label">均价</span><span class="pos-value">${esc(avg)}</span></div>
<div class="pos-cell"><span class="pos-label">止损</span><span class="pos-value">${esc(sl)}</span></div>
<div class="pos-cell"><span class="pos-label">止盈</span><span class="pos-value pos-tp-program">程序监控 · ${esc(tp)}</span></div>
<div class="pos-cell"><span class="pos-label">盈亏比</span><span class="pos-value">${esc(rrTxt)}</span></div>
<div class="pos-cell"><span class="pos-label">标记价</span><span class="pos-value">${esc(mark)}</span></div>
<div class="pos-cell"><span class="pos-label">浮盈亏</span>${pnlInner}</div>
</div>
${footHtml}
</div>
</div>
<div class="hub-trend-plan-meta">
<span>来源: 趋势回调计划</span>
<span>风险: ${riskTxt}</span>
<span>${esc(trendAddZoneLabel(t.direction))} ${esc(addZone)}</span>
<span>已补仓 <strong>${legsTxt}</strong></span>
</div>
<div class="pos-grid hub-trend-plan-grid">
<div class="pos-cell"><span class="pos-label">均价</span><span class="pos-value">${esc(avg)}</span></div>
<div class="pos-cell"><span class="pos-label">止损</span><span class="pos-value">${esc(sl)}</span></div>
<div class="pos-cell"><span class="pos-label">止盈</span><span class="pos-value pos-tp-program">程序监控 · ${esc(tp)}</span></div>
<div class="pos-cell"><span class="pos-label">盈亏比</span><span class="pos-value">${esc(rrTxt)}</span></div>
<div class="pos-cell"><span class="pos-label">标记价</span><span class="pos-value">${esc(mark)}</span></div>
<div class="pos-cell"><span class="pos-label">浮盈亏</span>${pnlInner}</div>
</div>
${footHtml}
${dcaHtml ? `<div class="hub-trend-plan-side">${dcaHtml}</div>` : ""}
</div>`;
}
+2 -2
View File
@@ -14,7 +14,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=20260604-hub-trend-metrics" />
<link rel="stylesheet" href="/assets/app.css?v=20260604-hub-trend-dca" />
</head>
<body>
<div class="app-bg" aria-hidden="true"></div>
@@ -235,6 +235,6 @@
<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.js?v=20260604-hub-trend-plan"></script>
<script src="/assets/app.js?v=20260604-hub-trend-metrics"></script>
<script src="/assets/app.js?v=20260604-hub-trend-dca"></script>
</body>
</html>