diff --git a/frontend/src/pages/Plan.tsx b/frontend/src/pages/Plan.tsx index 065bb41..2335646 100644 --- a/frontend/src/pages/Plan.tsx +++ b/frontend/src/pages/Plan.tsx @@ -172,85 +172,103 @@ export default function PlanPage() {
-
-

策略

-
-
- 状态 - - {plan?.running ? ( - 启动中 - ) : ( - 已停 - )} - - {" "} - · {phaseLabel} · 已完成 {plan?.rounds_done ?? 0} 组 - - -
-
- 选约条件 - - 剩余≥{fmt(plan?.min_option_hours, 0)}h · 期权杠杆≥ - {fmt(plan?.min_option_leverage, 0)}x - -
-
- 休息 - - {plan?.rest_left_sec ? `${plan.rest_left_sec}s / ${plan.rest_seconds}s` : "—"} - -
-
- 权益 / 杠杆 - - {fmt(plan?.ledger?.equity)} / 可用 {fmt(plan?.ledger?.available)} ·{" "} - {fmt(plan?.leverage, 0)}x - -
-
- 当前组 - {pos?.group_id || "—"} -
-
- 信号方向 - {biasTag} -
-
- 出场规则 - {exitRuleLabel} -
-
- 净盈利 / 目标 - - - {open ? fmt(netPnl) : "—"} - - {" / "} - {open || exitMode === "fixed_usdt" ? fmt(exitTarget) : "—"} - -
-
- 永续浮盈 - {fmt(pos?.perp_upl)} -
-
- 期权浮盈 - {fmt(pos?.option_upl)} -
- {plan?.last_error ? ( +
+
+

策略

+
- 最近错误 - - {plan.last_error} + 状态 + + {plan?.running ? ( + 启动中 + ) : ( + 已停 + )} + + {" "} + · {phaseLabel} · 已完成 {plan?.rounds_done ?? 0} 组 +
- ) : null} +
+ 选约条件 + + 剩余≥{fmt(plan?.min_option_hours, 0)}h · 期权杠杆≥ + {fmt(plan?.min_option_leverage, 0)}x + +
+
+ 休息 + + {plan?.rest_left_sec ? `${plan.rest_left_sec}s / ${plan.rest_seconds}s` : "—"} + +
+
+ 权益 / 杠杆 + + {fmt(plan?.ledger?.equity)} / 可用 {fmt(plan?.ledger?.available)} ·{" "} + {fmt(plan?.leverage, 0)}x + +
+
+ 当前组 + {pos?.group_id || "—"} +
+
+ 信号方向 + {biasTag} +
+
+ 出场规则 + {exitRuleLabel} +
+
+ 净盈利 / 目标 + + + {open ? fmt(netPnl) : "—"} + + {" / "} + {open || exitMode === "fixed_usdt" ? fmt(exitTarget) : "—"} + +
+
+ 永续浮盈 + {fmt(pos?.perp_upl)} +
+
+ 期权浮盈 + {fmt(pos?.option_upl)} +
+ {plan?.last_error ? ( +
+ 最近错误 + + {plan.last_error} + +
+ ) : null} +
+
+ +
+

永续行情

+
+ 买一 + {fmt(snap?.perp?.bid)} +
+
+ 卖一 + {fmt(snap?.perp?.ask)} +
+
+ 指数 + {fmt(snap?.index_px)} +
-
+
{open ? ( <>
@@ -320,6 +338,12 @@ export default function PlanPage() { {pos?.option_side === "call" ? "看涨 Call" : "看跌 Put"}
+
+ {countdown} +
期权持仓 @@ -330,14 +354,6 @@ export default function PlanPage() {
-
- 到期倒计时 - - {countdown} - -
开仓均价 {fmt(pos?.option_entry_px)} @@ -365,44 +381,27 @@ export default function PlanPage() {
期权持仓 · 暂无
)} -
-
-
-
-

永续

-
- 买一 - {fmt(snap?.perp?.bid)} -
-
- 卖一 - {fmt(snap?.perp?.ask)} -
-
- 指数 - {fmt(snap?.index_px)} -
-
-
-

- 期权 ATM {snap?.pair ? `@ ${snap.pair.strike}` : ""} -

-
- Call 卖一/买一 - - {fmt(snap?.call?.ask)} / {fmt(snap?.call?.bid)} - -
-
- Put 卖一/买一 - - {fmt(snap?.put?.ask)} / {fmt(snap?.put?.bid)} - -
-
- 到期 - {snap?.pair?.expiry_ymd || "—"} +
+

+ 期权 ATM {snap?.pair ? `@ ${snap.pair.strike}` : ""} +

+
+ Call 卖一/买一 + + {fmt(snap?.call?.ask)} / {fmt(snap?.call?.bid)} + +
+
+ Put 卖一/买一 + + {fmt(snap?.put?.ask)} / {fmt(snap?.put?.bid)} + +
+
+ 到期 + {snap?.pair?.expiry_ymd || "—"} +
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index a6b5b5a..639ce59 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -232,15 +232,22 @@ input { min-width: 0; } -/* 计划页:左策略 + 右上下持仓,两侧顶底对齐 */ +/* 计划页:左右两列对齐(策略+行情 | 持仓+ATM) */ .plan-board { display: grid; - grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr); + grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr); gap: 12px; - align-items: stretch; + align-items: start; margin-bottom: 12px; } +.plan-col { + display: flex; + flex-direction: column; + gap: 12px; + min-width: 0; +} + .plan-panel-title { margin: 0 0 10px; font-size: 14px; @@ -251,14 +258,12 @@ input { .plan-strategy { display: flex; flex-direction: column; - height: 100%; min-height: 0; } .plan-metrics { display: flex; flex-direction: column; - flex: 1; min-height: 0; } @@ -266,24 +271,20 @@ input { min-width: 0; } -.plan-positions { - display: flex; - flex-direction: column; - gap: 10px; - min-height: 0; - height: 100%; -} - .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; +.pos-countdown { + flex: 0 0 auto; + font-size: 0.82rem; + font-weight: 600; + color: #e8ecf4; + white-space: nowrap; + margin-left: auto; } @media (max-width: 960px) { @@ -291,9 +292,9 @@ input { grid-template-columns: 1fr; } - .plan-positions .pos-card, - .plan-positions .pos-empty { - flex: 0 0 auto; + .pos-countdown { + margin-left: 0; + width: 100%; } }