Colorize control detail modal net PnL and leg upl (green/red).
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -31,6 +31,12 @@ function fmt(v: unknown, digits = 4): string {
|
||||
return n.toFixed(digits);
|
||||
}
|
||||
|
||||
function pnlClass(v: unknown): string {
|
||||
const n = Number(v);
|
||||
if (!Number.isFinite(n) || n === 0) return "pnl-flat";
|
||||
return n > 0 ? "pnl-pos" : "pnl-neg";
|
||||
}
|
||||
|
||||
export default function MonitorPage() {
|
||||
const [nodes, setNodes] = useState<NodeCard[]>([]);
|
||||
const [err, setErr] = useState("");
|
||||
@@ -357,9 +363,14 @@ export default function MonitorPage() {
|
||||
<h4>持仓</h4>
|
||||
<p className="meta">
|
||||
状态:{String(detail.position.status || "flat")}
|
||||
{detail.position.net_pnl != null
|
||||
? ` · 净浮盈 ${fmt(detail.position.net_pnl, 2)} USDT`
|
||||
: ""}
|
||||
{detail.position.net_pnl != null ? (
|
||||
<>
|
||||
{" · 净浮盈 "}
|
||||
<span className={pnlClass(detail.position.net_pnl)}>
|
||||
{fmt(detail.position.net_pnl, 2)} USDT
|
||||
</span>
|
||||
</>
|
||||
) : null}
|
||||
{detail.position.expiry_ymd
|
||||
? ` · 到期 ${String(detail.position.expiry_ymd)} @ ${fmt(detail.position.strike, 0)}`
|
||||
: ""}
|
||||
@@ -387,7 +398,7 @@ export default function MonitorPage() {
|
||||
<td>{fmt(lg.qty, 4)}</td>
|
||||
<td>{fmt(lg.avg_px, 4)}</td>
|
||||
<td>{fmt(lg.mark_px, 4)}</td>
|
||||
<td>{fmt(lg.upl, 2)}</td>
|
||||
<td className={pnlClass(lg.upl)}>{fmt(lg.upl, 2)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
@@ -386,3 +386,18 @@ td {
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pnl-pos {
|
||||
color: var(--ok);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pnl-neg {
|
||||
color: var(--bad);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pnl-flat {
|
||||
color: var(--muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user