diff --git a/frontend/src/pages/Plan.tsx b/frontend/src/pages/Plan.tsx index 2335646..874a803 100644 --- a/frontend/src/pages/Plan.tsx +++ b/frontend/src/pages/Plan.tsx @@ -171,8 +171,8 @@ export default function PlanPage() { {busy ? {busy}… : null} -
-
+
+

策略

@@ -251,6 +251,125 @@ export default function PlanPage() {
+
+ {open ? ( + <> +
+
+
+ {pos?.perp_inst_id || "ETH-USDT-SWAP"} + + {pos?.perp_side === "long" ? "做多" : "做空"} + +
+
+
+ 永续持仓 + 组 {pos?.group_id} + + 数量 {fmt(pos?.perp_qty_eth, 2)} ETH + + + {fmt(pos?.leverage ?? plan?.leverage, 0)}x + +
+
+
+ 开仓价 + {fmt(pos?.perp_entry_px)} +
+
+ 可平价 + {fmt(pos?.perp_mark_px)} +
+
+ 浮盈亏 + + {fmt(pos?.perp_upl)} + +
+
+ 保证金 + {fmt(pos?.perp_margin)} +
+
+ 名义价值 + {fmt(pos?.perp_notional)} +
+
+ 波动比例 + {fmt(movePct, 2)}% +
+
+
+ +
+
+
+ {pos?.option_inst_id || "期权"} + + {pos?.option_side === "call" ? "看涨 Call" : "看跌 Put"} + +
+
+ {countdown} +
+
+
+ 期权持仓 + 到期 {pos?.expiry_ymd || "—"} + 行权 {fmt(pos?.strike, 0)} + + {fmt(pos?.option_qty_eth, 2)} ETH · {fmt(pos?.option_qty_contracts, 0)} 张 + +
+
+
+ 开仓均价 + {fmt(pos?.option_entry_px)} +
+
+ 标记/买一 + {fmt(pos?.option_mark_px)} +
+
+ 浮盈亏 + + {fmt(pos?.option_upl)} + +
+
+ 初始权利金 + {fmt(pos?.initial_premium)} +
+
+
+ + ) : ( + <> +
永续持仓 · 暂无
+
期权持仓 · 暂无
+ + )} +
+
+ +

永续行情

@@ -266,122 +385,6 @@ export default function PlanPage() { {fmt(snap?.index_px)}
-
- -
- {open ? ( - <> -
-
-
- {pos?.perp_inst_id || "ETH-USDT-SWAP"} - - {pos?.perp_side === "long" ? "做多" : "做空"} - -
-
-
- 永续持仓 - 组 {pos?.group_id} - 数量 {fmt(pos?.perp_qty_eth, 2)} ETH - - {fmt(pos?.leverage ?? plan?.leverage, 0)}x - -
-
-
- 开仓价 - {fmt(pos?.perp_entry_px)} -
-
- 可平价 - {fmt(pos?.perp_mark_px)} -
-
- 浮盈亏 - - {fmt(pos?.perp_upl)} - -
-
- 保证金 - {fmt(pos?.perp_margin)} -
-
- 名义价值 - {fmt(pos?.perp_notional)} -
-
- 波动比例 - {fmt(movePct, 2)}% -
-
-
- -
-
-
- {pos?.option_inst_id || "期权"} - - {pos?.option_side === "call" ? "看涨 Call" : "看跌 Put"} - -
-
- {countdown} -
-
-
- 期权持仓 - 到期 {pos?.expiry_ymd || "—"} - 行权 {fmt(pos?.strike, 0)} - - {fmt(pos?.option_qty_eth, 2)} ETH · {fmt(pos?.option_qty_contracts, 0)} 张 - -
-
-
- 开仓均价 - {fmt(pos?.option_entry_px)} -
-
- 标记/买一 - {fmt(pos?.option_mark_px)} -
-
- 浮盈亏 - - {fmt(pos?.option_upl)} - -
-
- 初始权利金 - {fmt(pos?.initial_premium)} -
-
-
- - ) : ( - <> -
永续持仓 · 暂无
-
期权持仓 · 暂无
- - )} -

期权 ATM {snap?.pair ? `@ ${snap.pair.strike}` : ""} diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 639ce59..c30a107 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -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 {