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

Lay out plan as strategy left and stacked position cards right.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-25 09:39:04 +08:00
parent 8a148f8c2b
commit 12a6365fc9
2 changed files with 128 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Plan.tsx
+77 -73
View File
@@ -171,82 +171,86 @@ export default function PlanPage() {
{busy ? <span className="meta">{busy}…</span> : null}
</div>
<div className="card plan-summary" style={{ marginBottom: 12 }}>
<div className="plan-metrics">
<div className="kv">
<span>策略</span>
<span>
{plan?.running ? (
<span className="status-running">启动中</span>
) : (
<span className="status-stopped">已停</span>
)}
<span className="mono">
{" "}
· {phaseLabel} · 已完成 {plan?.rounds_done ?? 0} 组
</span>
</span>
</div>
<div className="kv">
<span>选约条件</span>
<span className="mono">
剩余≥{fmt(plan?.min_option_hours, 0)}h · 期权杠杆≥{fmt(plan?.min_option_leverage, 0)}x
</span>
</div>
<div className="kv">
<span>休息</span>
<span className="mono">
{plan?.rest_left_sec ? `${plan.rest_left_sec}s / ${plan.rest_seconds}s` : "—"}
</span>
</div>
<div className="kv">
<span>权益 / 杠杆</span>
<span className="mono">
{fmt(plan?.ledger?.equity)} / 可用 {fmt(plan?.ledger?.available)} ·{" "}
{fmt(plan?.leverage, 0)}x
</span>
</div>
<div className="kv">
<span>当前组</span>
<span className="mono">{pos?.group_id || "—"}</span>
</div>
<div className="kv">
<span>信号方向</span>
<span className="mono">{biasTag}</span>
</div>
<div className="kv">
<span>出场规则</span>
<span className="mono">{exitRuleLabel}</span>
</div>
<div className="kv">
<span>净盈利 / 目标</span>
<span className="mono">
<span className={pnlClass(open ? netPnl : null)}>
{open ? fmt(netPnl) : "—"}
</span>
{" / "}
{open || exitMode === "fixed_usdt" ? fmt(exitTarget) : "—"}
</span>
</div>
<div className="kv">
<span>永续浮盈</span>
<span className={`mono ${pnlClass(pos?.perp_upl)}`}>{fmt(pos?.perp_upl)}</span>
</div>
<div className="kv">
<span>期权浮盈</span>
<span className={`mono ${pnlClass(pos?.option_upl)}`}>{fmt(pos?.option_upl)}</span>
</div>
{plan?.last_error ? (
<div className="kv kv-span">
<span>最近错误</span>
<span className="err" style={{ margin: 0 }}>
{plan.last_error}
</span>
<div className="plan-board">
<div className="card plan-strategy">
<h3 className="plan-panel-title">策略</h3>
<div className="plan-metrics">
<div className="kv">
<span>状态</span>
<span>
{plan?.running ? (
<span className="status-running">启动中</span>
) : (
<span className="status-stopped">已停</span>
)}
<span className="mono">
{" "}
· {phaseLabel} · 已完成 {plan?.rounds_done ?? 0} 组
</span>
</span>
</div>
<div className="kv">
<span>选约条件</span>
<span className="mono">
剩余≥{fmt(plan?.min_option_hours, 0)}h · 期权杠杆≥
{fmt(plan?.min_option_leverage, 0)}x
</span>
</div>
<div className="kv">
<span>休息</span>
<span className="mono">
{plan?.rest_left_sec ? `${plan.rest_left_sec}s / ${plan.rest_seconds}s` : "—"}
</span>
</div>
<div className="kv">
<span>权益 / 杠杆</span>
<span className="mono">
{fmt(plan?.ledger?.equity)} / 可用 {fmt(plan?.ledger?.available)} ·{" "}
{fmt(plan?.leverage, 0)}x
</span>
</div>
<div className="kv">
<span>当前组</span>
<span className="mono">{pos?.group_id || "—"}</span>
</div>
<div className="kv">
<span>信号方向</span>
<span className="mono">{biasTag}</span>
</div>
<div className="kv">
<span>出场规则</span>
<span className="mono">{exitRuleLabel}</span>
</div>
<div className="kv">
<span>净盈利 / 目标</span>
<span className="mono">
<span className={pnlClass(open ? netPnl : null)}>
{open ? fmt(netPnl) : "—"}
</span>
{" / "}
{open || exitMode === "fixed_usdt" ? fmt(exitTarget) : "—"}
</span>
</div>
<div className="kv">
<span>永续浮盈</span>
<span className={`mono ${pnlClass(pos?.perp_upl)}`}>{fmt(pos?.perp_upl)}</span>
</div>
<div className="kv">
<span>期权浮盈</span>
<span className={`mono ${pnlClass(pos?.option_upl)}`}>{fmt(pos?.option_upl)}</span>
</div>
{plan?.last_error ? (
<div className="kv">
<span>最近错误</span>
<span className="err" style={{ margin: 0 }}>
{plan.last_error}
</span>
</div>
) : null}
</div>
) : null}
</div>
<div className="pos-embed-grid">
<div className="plan-positions">
{open ? (
<>
<div className="pos-card">
frontend/src/styles/app.css
+51 -21
View File
@@ -232,38 +232,68 @@ input {
min-width: 0;
}
/* 计划摘要：宽屏多列紧凑排布，避免标签与数值被拉成整行空洞 */
.plan-metrics {
/* 计划页：左策略 + 右上下持仓，两侧顶底对齐 */
.plan-board {
display: grid;
grid-template-columns: 1fr;
column-gap: 28px;
row-gap: 0;
justify-content: start;
grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
gap: 12px;
align-items: stretch;
margin-bottom: 12px;
}
.plan-panel-title {
margin: 0 0 10px;
font-size: 14px;
font-weight: 600;
color: var(--muted);
}
.plan-strategy {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.plan-metrics {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.plan-metrics .kv {
min-width: 0;
}
.plan-metrics .kv-span {
grid-column: 1 / -1;
.plan-positions {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
height: 100%;
}
@media (min-width: 720px) {
.plan-metrics {
grid-template-columns: repeat(2, minmax(240px, 360px));
.plan-positions .pos-card,
.plan-positions .pos-empty {
flex: 1 1 0;
display: flex;
flex-direction: column;
min-height: 0;
}
.plan-positions .pos-grid {
margin-top: auto;
}
@media (max-width: 960px) {
.plan-board {
grid-template-columns: 1fr;
}
}
@media (min-width: 1200px) {
.plan-metrics {
grid-template-columns: repeat(3, minmax(240px, 340px));
}
}
@media (min-width: 1600px) {
.plan-metrics {
grid-template-columns: repeat(4, minmax(220px, 300px));
.plan-positions .pos-card,
.plan-positions .pos-empty {
flex: 0 0 auto;
}
}