Restore strategy/positions height sync and shared market columns.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
+121
-118
@@ -171,8 +171,8 @@ export default function PlanPage() {
|
||||
{busy ? <span className="meta">{busy}…</span> : null}
|
||||
</div>
|
||||
|
||||
<div className="plan-board">
|
||||
<div className="plan-col">
|
||||
<div className="plan-shell">
|
||||
<div className="plan-board">
|
||||
<div className="card plan-strategy">
|
||||
<h3 className="plan-panel-title">策略</h3>
|
||||
<div className="plan-metrics">
|
||||
@@ -251,6 +251,125 @@ export default function PlanPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="plan-positions">
|
||||
{open ? (
|
||||
<>
|
||||
<div className="pos-card">
|
||||
<div className="pos-card-head">
|
||||
<div className="pos-card-symbol">
|
||||
<strong>{pos?.perp_inst_id || "ETH-USDT-SWAP"}</strong>
|
||||
<span
|
||||
className={
|
||||
pos?.perp_side === "long"
|
||||
? "pos-side-badge pos-side-long"
|
||||
: "pos-side-badge pos-side-short"
|
||||
}
|
||||
>
|
||||
{pos?.perp_side === "long" ? "做多" : "做空"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pos-meta">
|
||||
<span className="pos-meta-item">永续持仓</span>
|
||||
<span className="pos-meta-item">组 {pos?.group_id}</span>
|
||||
<span className="pos-meta-item mono">
|
||||
数量 {fmt(pos?.perp_qty_eth, 2)} ETH
|
||||
</span>
|
||||
<span className="pos-meta-item mono">
|
||||
{fmt(pos?.leverage ?? plan?.leverage, 0)}x
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-grid">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓价</span>
|
||||
<span className="pos-value mono">{fmt(pos?.perp_entry_px)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">可平价</span>
|
||||
<span className="pos-value mono">{fmt(pos?.perp_mark_px)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">浮盈亏</span>
|
||||
<span className={`pos-value mono ${pnlClass(pos?.perp_upl)}`}>
|
||||
{fmt(pos?.perp_upl)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">保证金</span>
|
||||
<span className="pos-value mono">{fmt(pos?.perp_margin)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">名义价值</span>
|
||||
<span className="pos-value mono">{fmt(pos?.perp_notional)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">波动比例</span>
|
||||
<span className="pos-value mono">{fmt(movePct, 2)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pos-card">
|
||||
<div className="pos-card-head">
|
||||
<div className="pos-card-symbol">
|
||||
<strong>{pos?.option_inst_id || "期权"}</strong>
|
||||
<span
|
||||
className={
|
||||
pos?.option_side === "call"
|
||||
? "pos-side-badge pos-side-long"
|
||||
: "pos-side-badge pos-side-short"
|
||||
}
|
||||
>
|
||||
{pos?.option_side === "call" ? "看涨 Call" : "看跌 Put"}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`pos-countdown mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
|
||||
title="到期倒计时"
|
||||
>
|
||||
{countdown}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pos-meta">
|
||||
<span className="pos-meta-item">期权持仓</span>
|
||||
<span className="pos-meta-item">到期 {pos?.expiry_ymd || "—"}</span>
|
||||
<span className="pos-meta-item">行权 {fmt(pos?.strike, 0)}</span>
|
||||
<span className="pos-meta-item mono">
|
||||
{fmt(pos?.option_qty_eth, 2)} ETH · {fmt(pos?.option_qty_contracts, 0)} 张
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-grid">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓均价</span>
|
||||
<span className="pos-value mono">{fmt(pos?.option_entry_px)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">标记/买一</span>
|
||||
<span className="pos-value mono">{fmt(pos?.option_mark_px)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">浮盈亏</span>
|
||||
<span className={`pos-value mono ${pnlClass(pos?.option_upl)}`}>
|
||||
{fmt(pos?.option_upl)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">初始权利金</span>
|
||||
<span className="pos-value mono">{fmt(pos?.initial_premium)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="pos-empty">永续持仓 · 暂无</div>
|
||||
<div className="pos-empty">期权持仓 · 暂无</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="plan-market">
|
||||
<div className="card">
|
||||
<h3 className="plan-panel-title">永续行情</h3>
|
||||
<div className="kv">
|
||||
@@ -266,122 +385,6 @@ export default function PlanPage() {
|
||||
<span className="mono">{fmt(snap?.index_px)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="plan-col plan-positions">
|
||||
{open ? (
|
||||
<>
|
||||
<div className="pos-card">
|
||||
<div className="pos-card-head">
|
||||
<div className="pos-card-symbol">
|
||||
<strong>{pos?.perp_inst_id || "ETH-USDT-SWAP"}</strong>
|
||||
<span
|
||||
className={
|
||||
pos?.perp_side === "long"
|
||||
? "pos-side-badge pos-side-long"
|
||||
: "pos-side-badge pos-side-short"
|
||||
}
|
||||
>
|
||||
{pos?.perp_side === "long" ? "做多" : "做空"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pos-meta">
|
||||
<span className="pos-meta-item">永续持仓</span>
|
||||
<span className="pos-meta-item">组 {pos?.group_id}</span>
|
||||
<span className="pos-meta-item mono">数量 {fmt(pos?.perp_qty_eth, 2)} ETH</span>
|
||||
<span className="pos-meta-item mono">
|
||||
{fmt(pos?.leverage ?? plan?.leverage, 0)}x
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-grid">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓价</span>
|
||||
<span className="pos-value mono">{fmt(pos?.perp_entry_px)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">可平价</span>
|
||||
<span className="pos-value mono">{fmt(pos?.perp_mark_px)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">浮盈亏</span>
|
||||
<span className={`pos-value mono ${pnlClass(pos?.perp_upl)}`}>
|
||||
{fmt(pos?.perp_upl)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">保证金</span>
|
||||
<span className="pos-value mono">{fmt(pos?.perp_margin)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">名义价值</span>
|
||||
<span className="pos-value mono">{fmt(pos?.perp_notional)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">波动比例</span>
|
||||
<span className="pos-value mono">{fmt(movePct, 2)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pos-card">
|
||||
<div className="pos-card-head">
|
||||
<div className="pos-card-symbol">
|
||||
<strong>{pos?.option_inst_id || "期权"}</strong>
|
||||
<span
|
||||
className={
|
||||
pos?.option_side === "call"
|
||||
? "pos-side-badge pos-side-long"
|
||||
: "pos-side-badge pos-side-short"
|
||||
}
|
||||
>
|
||||
{pos?.option_side === "call" ? "看涨 Call" : "看跌 Put"}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`pos-countdown mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
|
||||
title="到期倒计时"
|
||||
>
|
||||
{countdown}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pos-meta">
|
||||
<span className="pos-meta-item">期权持仓</span>
|
||||
<span className="pos-meta-item">到期 {pos?.expiry_ymd || "—"}</span>
|
||||
<span className="pos-meta-item">行权 {fmt(pos?.strike, 0)}</span>
|
||||
<span className="pos-meta-item mono">
|
||||
{fmt(pos?.option_qty_eth, 2)} ETH · {fmt(pos?.option_qty_contracts, 0)} 张
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-grid">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓均价</span>
|
||||
<span className="pos-value mono">{fmt(pos?.option_entry_px)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">标记/买一</span>
|
||||
<span className="pos-value mono">{fmt(pos?.option_mark_px)}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">浮盈亏</span>
|
||||
<span className={`pos-value mono ${pnlClass(pos?.option_upl)}`}>
|
||||
{fmt(pos?.option_upl)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">初始权利金</span>
|
||||
<span className="pos-value mono">{fmt(pos?.initial_premium)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="pos-empty">永续持仓 · 暂无</div>
|
||||
<div className="pos-empty">期权持仓 · 暂无</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="card">
|
||||
<h3 className="plan-panel-title">
|
||||
期权 ATM {snap?.pair ? `@ ${snap.pair.strike}` : ""}
|
||||
|
||||
+37
-12
@@ -232,22 +232,28 @@ input {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 计划页：左右两列对齐（策略+行情 | 持仓+ATM） */
|
||||
.plan-board {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
/* 计划页：上排策略|持仓顶底对齐；下排行情同列宽对齐 */
|
||||
.plan-shell {
|
||||
--plan-cols: minmax(280px, 1fr) minmax(320px, 1.15fr);
|
||||
--plan-gap: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--plan-gap);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.plan-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
.plan-board,
|
||||
.plan-market {
|
||||
display: grid;
|
||||
grid-template-columns: var(--plan-cols);
|
||||
gap: var(--plan-gap);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.plan-board {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.plan-panel-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
@@ -258,12 +264,15 @@ input {
|
||||
.plan-strategy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plan-metrics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -271,11 +280,22 @@ input {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.plan-positions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--plan-gap);
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.plan-positions .pos-card,
|
||||
.plan-positions .pos-empty {
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pos-countdown {
|
||||
@@ -288,8 +308,13 @@ input {
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.plan-board {
|
||||
grid-template-columns: 1fr;
|
||||
.plan-shell {
|
||||
--plan-cols: 1fr;
|
||||
}
|
||||
|
||||
.plan-positions .pos-card,
|
||||
.plan-positions .pos-empty {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.pos-countdown {
|
||||
|
||||
Reference in New Issue
Block a user