Colorize control detail modal net PnL and leg upl (green/red).

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-30 11:12:12 +08:00
parent a317822f7a
commit 75e89ca442
2 changed files with 30 additions and 4 deletions
+15 -4
View File
@@ -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>
+15
View File
@@ -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;
}