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} {busy ? <span className="meta">{busy}…</span> : null}
</div> </div>
<div className="card plan-summary" style={{ marginBottom: 12 }}> <div className="plan-board">
<div className="plan-metrics"> <div className="card plan-strategy">
<div className="kv"> <h3 className="plan-panel-title">策略</h3>
<span>策略</span> <div className="plan-metrics">
<span> <div className="kv">
{plan?.running ? ( <span>状态</span>
<span className="status-running">启动中</span> <span>
) : ( {plan?.running ? (
<span className="status-stopped">已停</span> <span className="status-running">启动中</span>
)} ) : (
<span className="mono"> <span className="status-stopped">已停</span>
{" "} )}
· {phaseLabel} · 已完成 {plan?.rounds_done ?? 0} 组 <span className="mono">
</span> {" "}
</span> · {phaseLabel} · 已完成 {plan?.rounds_done ?? 0} 组
</div> </span>
<div className="kv"> </span>
<span>选约条件</span> </div>
<span className="mono"> <div className="kv">
剩余≥{fmt(plan?.min_option_hours, 0)}h · 期权杠杆≥{fmt(plan?.min_option_leverage, 0)}x <span>选约条件</span>
</span> <span className="mono">
</div> 剩余≥{fmt(plan?.min_option_hours, 0)}h · 期权杠杆≥
<div className="kv"> {fmt(plan?.min_option_leverage, 0)}x
<span>休息</span> </span>
<span className="mono"> </div>
{plan?.rest_left_sec ? `${plan.rest_left_sec}s / ${plan.rest_seconds}s` : "—"} <div className="kv">
</span> <span>休息</span>
</div> <span className="mono">
<div className="kv"> {plan?.rest_left_sec ? `${plan.rest_left_sec}s / ${plan.rest_seconds}s` : "—"}
<span>权益 / 杠杆</span> </span>
<span className="mono"> </div>
{fmt(plan?.ledger?.equity)} / 可用 {fmt(plan?.ledger?.available)} ·{" "} <div className="kv">
{fmt(plan?.leverage, 0)}x <span>权益 / 杠杆</span>
</span> <span className="mono">
</div> {fmt(plan?.ledger?.equity)} / 可用 {fmt(plan?.ledger?.available)} ·{" "}
<div className="kv"> {fmt(plan?.leverage, 0)}x
<span>当前组</span> </span>
<span className="mono">{pos?.group_id || "—"}</span> </div>
</div> <div className="kv">
<div className="kv"> <span>当前组</span>
<span>信号方向</span> <span className="mono">{pos?.group_id || "—"}</span>
<span className="mono">{biasTag}</span> </div>
</div> <div className="kv">
<div className="kv"> <span>信号方向</span>
<span>出场规则</span> <span className="mono">{biasTag}</span>
<span className="mono">{exitRuleLabel}</span> </div>
</div> <div className="kv">
<div className="kv"> <span>出场规则</span>
<span>净盈利 / 目标</span> <span className="mono">{exitRuleLabel}</span>
<span className="mono"> </div>
<span className={pnlClass(open ? netPnl : null)}> <div className="kv">
{open ? fmt(netPnl) : "—"} <span>净盈利 / 目标</span>
</span> <span className="mono">
{" / "} <span className={pnlClass(open ? netPnl : null)}>
{open || exitMode === "fixed_usdt" ? fmt(exitTarget) : "—"} {open ? fmt(netPnl) : "—"}
</span> </span>
</div> {" / "}
<div className="kv"> {open || exitMode === "fixed_usdt" ? fmt(exitTarget) : "—"}
<span>永续浮盈</span> </span>
<span className={`mono ${pnlClass(pos?.perp_upl)}`}>{fmt(pos?.perp_upl)}</span> </div>
</div> <div className="kv">
<div className="kv"> <span>永续浮盈</span>
<span>期权浮盈</span> <span className={`mono ${pnlClass(pos?.perp_upl)}`}>{fmt(pos?.perp_upl)}</span>
<span className={`mono ${pnlClass(pos?.option_upl)}`}>{fmt(pos?.option_upl)}</span> </div>
</div> <div className="kv">
{plan?.last_error ? ( <span>期权浮盈</span>
<div className="kv kv-span"> <span className={`mono ${pnlClass(pos?.option_upl)}`}>{fmt(pos?.option_upl)}</span>
<span>最近错误</span> </div>
<span className="err" style={{ margin: 0 }}> {plan?.last_error ? (
{plan.last_error} <div className="kv">
</span> <span>最近错误</span>
<span className="err" style={{ margin: 0 }}>
{plan.last_error}
</span>
</div>
) : null}
</div> </div>
) : null}
</div> </div>
<div className="pos-embed-grid"> <div className="plan-positions">
{open ? ( {open ? (
<> <>
<div className="pos-card"> <div className="pos-card">
frontend/src/styles/app.css
+51 -21
View File
@@ -232,38 +232,68 @@ input {
min-width: 0; min-width: 0;
} }
/* 计划摘要：宽屏多列紧凑排布，避免标签与数值被拉成整行空洞 */ /* 计划页：左策略 + 右上下持仓，两侧顶底对齐 */
.plan-metrics { .plan-board {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
column-gap: 28px; gap: 12px;
row-gap: 0; align-items: stretch;
justify-content: start; 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 { .plan-metrics .kv {
min-width: 0; min-width: 0;
} }
.plan-metrics .kv-span { .plan-positions {
grid-column: 1 / -1; display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
height: 100%;
} }
@media (min-width: 720px) { .plan-positions .pos-card,
.plan-metrics { .plan-positions .pos-empty {
grid-template-columns: repeat(2, minmax(240px, 360px)); 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-positions .pos-card,
.plan-metrics { .plan-positions .pos-empty {
grid-template-columns: repeat(3, minmax(240px, 340px)); flex: 0 0 auto;
}
}
@media (min-width: 1600px) {
.plan-metrics {
grid-template-columns: repeat(4, minmax(220px, 300px));
} }
} }