Align OO Call/Put position cards with per-leg mark, size, leverage.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -320,10 +320,16 @@ export type PlanState = {
|
||||
premium_gap?: number;
|
||||
hedge_mode?: string;
|
||||
option2_inst_id?: string;
|
||||
option2_side?: string;
|
||||
option2_upl?: number;
|
||||
option2_entry_px?: number;
|
||||
option2_qty_eth?: number;
|
||||
option2_qty_contracts?: number;
|
||||
option2_mark_px?: number | null;
|
||||
option2_bid_sz?: number | null;
|
||||
option2_leverage?: number | null;
|
||||
strike2?: number | null;
|
||||
initial_premium2?: number;
|
||||
};
|
||||
residuals?: {
|
||||
group_id: string;
|
||||
|
||||
+338
-202
@@ -652,217 +652,353 @@ export default function PlanPage() {
|
||||
<div className="plan-positions">
|
||||
{open ? (
|
||||
<>
|
||||
{plan?.hedge_mode === "option_option" ||
|
||||
pos?.hedge_mode === "option_option" ||
|
||||
pos?.option2_inst_id ? (
|
||||
<div className="pos-card">
|
||||
<div className="pos-card-head">
|
||||
<div className="pos-card-symbol">
|
||||
<strong>
|
||||
{pos?.option_inst_id || "Call"}
|
||||
</strong>
|
||||
<span className="pos-side-badge pos-side-long">
|
||||
看涨 Call
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pos-meta">
|
||||
<span className="pos-meta-item">期期 · Call</span>
|
||||
<span className="pos-meta-item">组 {pos?.group_id}</span>
|
||||
<span className="pos-meta-item mono">
|
||||
数量 {fmt(pos?.option_qty_eth, 1)} ETH
|
||||
</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 ${pnlClass(pos?.option_upl)}`}
|
||||
{isOo ? (
|
||||
<>
|
||||
<div className="pos-card">
|
||||
<div className="pos-card-head">
|
||||
<div className="pos-card-symbol">
|
||||
<strong>{pos?.option_inst_id || "Call"}</strong>
|
||||
<span className="pos-side-badge pos-side-long">
|
||||
看涨 Call
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`pos-countdown mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
|
||||
title="到期倒计时"
|
||||
>
|
||||
{fmt(pos?.option_upl)}
|
||||
{countdown}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pos-meta">
|
||||
<span className="pos-meta-item">期期 · Call</span>
|
||||
<span className="pos-meta-item">
|
||||
到期 {pos?.expiry_ymd || "—"}
|
||||
</span>
|
||||
<span className="pos-meta-item">
|
||||
行权{" "}
|
||||
{pos?.strike != null
|
||||
? Math.round(Number(pos.strike))
|
||||
: "—"}
|
||||
</span>
|
||||
<span className="pos-meta-item mono">
|
||||
{fmt(pos?.option_qty_eth, 2)} ETH ·{" "}
|
||||
{fmt(pos?.option_qty_contracts, 0)} 张
|
||||
</span>
|
||||
<span
|
||||
className="pos-meta-item mono"
|
||||
title="开仓指数÷开仓均价"
|
||||
>
|
||||
杠杆 {fmt(pos?.option_leverage, 0)}x
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">行权价</span>
|
||||
<span className="pos-value mono">
|
||||
{fmt(pos?.strike, 0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">持仓时长</span>
|
||||
<span className="pos-value mono">
|
||||
{holdDurationLabel}
|
||||
</span>
|
||||
<div className="pos-grid">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓均价</span>
|
||||
<span className="pos-value mono">
|
||||
{fmtExPx("option", pos?.option_entry_px)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">买一</span>
|
||||
<span className="pos-value mono">
|
||||
{fmtBidLiqEx(
|
||||
"option",
|
||||
pos?.option_mark_px,
|
||||
pos?.option_bid_sz,
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">
|
||||
{plan?.mode === "LIVE" ? "净盈亏" : "浮盈亏"}
|
||||
</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 className="pos-time-row">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓时间</span>
|
||||
<span className="pos-value mono">{openTimeLabel}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">持仓时长</span>
|
||||
<span className="pos-value mono">
|
||||
{holdDurationLabel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<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">
|
||||
{fmtExPx("perp", pos?.perp_entry_px)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">可平价</span>
|
||||
<span className="pos-value mono">
|
||||
{fmtExPx("perp", 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 className="pos-time-row">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓时间</span>
|
||||
<span className="pos-value mono">{openTimeLabel}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">持仓时长</span>
|
||||
<span className="pos-value mono">{holdDurationLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pos-card">
|
||||
<div className="pos-card-head">
|
||||
<div className="pos-card-symbol">
|
||||
<strong>
|
||||
{plan?.hedge_mode === "option_option" ||
|
||||
pos?.option2_inst_id
|
||||
? pos?.option2_inst_id || "Put"
|
||||
: pos?.option_inst_id || "期权"}
|
||||
</strong>
|
||||
<span
|
||||
className={
|
||||
plan?.hedge_mode === "option_option" ||
|
||||
pos?.option2_inst_id ||
|
||||
pos?.option_side === "call"
|
||||
? "pos-side-badge pos-side-long"
|
||||
: "pos-side-badge pos-side-short"
|
||||
}
|
||||
>
|
||||
{plan?.hedge_mode === "option_option" ||
|
||||
pos?.option2_inst_id
|
||||
? "看跌 Put"
|
||||
: 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">
|
||||
行权{" "}
|
||||
{pos?.strike != null
|
||||
? Math.round(Number(pos.strike))
|
||||
: "—"}
|
||||
</span>
|
||||
<span className="pos-meta-item mono">
|
||||
{fmt(pos?.option_qty_eth, 2)} ETH · {fmt(pos?.option_qty_contracts, 0)} 张
|
||||
</span>
|
||||
<span className="pos-meta-item mono" title="开仓指数÷开仓均价">
|
||||
杠杆 {fmt(pos?.option_leverage, 0)}x
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-grid">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓均价</span>
|
||||
<span className="pos-value mono">
|
||||
{fmtExPx("option", pos?.option_entry_px)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">买一</span>
|
||||
<span className="pos-value mono">
|
||||
{fmtBidLiqEx(
|
||||
"option",
|
||||
pos?.option_mark_px,
|
||||
pos?.option_bid_sz,
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">
|
||||
{plan?.mode === "LIVE" ? "净盈亏" : "浮盈亏"}
|
||||
</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 className="pos-time-row">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓时间</span>
|
||||
<span className="pos-value mono">{openTimeLabel}</span>
|
||||
<div className="pos-card">
|
||||
<div className="pos-card-head">
|
||||
<div className="pos-card-symbol">
|
||||
<strong>{pos?.option2_inst_id || "Put"}</strong>
|
||||
<span className="pos-side-badge pos-side-long">
|
||||
看跌 Put
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`pos-countdown mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
|
||||
title="到期倒计时"
|
||||
>
|
||||
{countdown}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">持仓时长</span>
|
||||
<span className="pos-value mono">{holdDurationLabel}</span>
|
||||
<div className="pos-meta">
|
||||
<span className="pos-meta-item">期期 · Put</span>
|
||||
<span className="pos-meta-item">
|
||||
到期 {pos?.expiry_ymd || "—"}
|
||||
</span>
|
||||
<span className="pos-meta-item">
|
||||
行权{" "}
|
||||
{pos?.strike2 != null
|
||||
? Math.round(Number(pos.strike2))
|
||||
: "—"}
|
||||
</span>
|
||||
<span className="pos-meta-item mono">
|
||||
{fmt(pos?.option2_qty_eth, 2)} ETH ·{" "}
|
||||
{fmt(pos?.option2_qty_contracts, 0)} 张
|
||||
</span>
|
||||
<span
|
||||
className="pos-meta-item mono"
|
||||
title="开仓指数÷开仓均价"
|
||||
>
|
||||
杠杆 {fmt(pos?.option2_leverage, 0)}x
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-grid">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓均价</span>
|
||||
<span className="pos-value mono">
|
||||
{fmtExPx("option", pos?.option2_entry_px)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">买一</span>
|
||||
<span className="pos-value mono">
|
||||
{fmtBidLiqEx(
|
||||
"option",
|
||||
pos?.option2_mark_px,
|
||||
pos?.option2_bid_sz,
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">
|
||||
{plan?.mode === "LIVE" ? "净盈亏" : "浮盈亏"}
|
||||
</span>
|
||||
<span
|
||||
className={`pos-value mono ${pnlClass(pos?.option2_upl)}`}
|
||||
>
|
||||
{fmt(pos?.option2_upl)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">初始权利金</span>
|
||||
<span className="pos-value mono">
|
||||
{fmt(pos?.initial_premium2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-time-row">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓时间</span>
|
||||
<span className="pos-value mono">{openTimeLabel}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">持仓时长</span>
|
||||
<span className="pos-value mono">
|
||||
{holdDurationLabel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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">
|
||||
{fmtExPx("perp", pos?.perp_entry_px)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">可平价</span>
|
||||
<span className="pos-value mono">
|
||||
{fmtExPx("perp", 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 className="pos-time-row">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓时间</span>
|
||||
<span className="pos-value mono">{openTimeLabel}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">持仓时长</span>
|
||||
<span className="pos-value mono">
|
||||
{holdDurationLabel}
|
||||
</span>
|
||||
</div>
|
||||
</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">
|
||||
行权{" "}
|
||||
{pos?.strike != null
|
||||
? Math.round(Number(pos.strike))
|
||||
: "—"}
|
||||
</span>
|
||||
<span className="pos-meta-item mono">
|
||||
{fmt(pos?.option_qty_eth, 2)} ETH ·{" "}
|
||||
{fmt(pos?.option_qty_contracts, 0)} 张
|
||||
</span>
|
||||
<span
|
||||
className="pos-meta-item mono"
|
||||
title="开仓指数÷开仓均价"
|
||||
>
|
||||
杠杆 {fmt(pos?.option_leverage, 0)}x
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-grid">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓均价</span>
|
||||
<span className="pos-value mono">
|
||||
{fmtExPx("option", pos?.option_entry_px)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">买一</span>
|
||||
<span className="pos-value mono">
|
||||
{fmtBidLiqEx(
|
||||
"option",
|
||||
pos?.option_mark_px,
|
||||
pos?.option_bid_sz,
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">
|
||||
{plan?.mode === "LIVE" ? "净盈亏" : "浮盈亏"}
|
||||
</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 className="pos-time-row">
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">开仓时间</span>
|
||||
<span className="pos-value mono">{openTimeLabel}</span>
|
||||
</div>
|
||||
<div className="pos-cell">
|
||||
<span className="pos-label">持仓时长</span>
|
||||
<span className="pos-value mono">
|
||||
{holdDurationLabel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : isOo ? (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user