diff --git a/docs/更新说明.md b/docs/更新说明.md index ecf2f29..4c6c6da 100644 --- a/docs/更新说明.md +++ b/docs/更新说明.md @@ -5,6 +5,15 @@ --- +## 2026-07-29 — 资金条:USDT/USDC 两行 + 居中对齐 + +### 变更 + +1. 资金账户 / 交易账户改为 USDT、USDC 上下两行显示。 +2. 资金条各列文字居中;字号对齐 crypto_monitor 统计条(标签约 0.72rem,数值约 0.95rem)。 + +--- + ## 2026-07-29 — 资金口径对齐 OKX:仅资金↔交易 ### 变更 diff --git a/frontend/src/components/FundsBar.tsx b/frontend/src/components/FundsBar.tsx index 56d6c5b..49620ee 100644 --- a/frontend/src/components/FundsBar.tsx +++ b/frontend/src/components/FundsBar.tsx @@ -26,11 +26,31 @@ function fmtU(n: number | null | undefined) { return `${n.toFixed(2)}U`; } +function fmtUsdc(n: number | null | undefined) { + if (n == null || Number.isNaN(n)) return "—"; + return `${n.toFixed(2)} USDC`; +} + function pnlClass(n: number | null | undefined) { if (n == null || Number.isNaN(n) || n === 0) return ""; return n > 0 ? "pos-pnl-profit" : "pos-pnl-loss"; } +function DualCcy({ + usdt, + usdc, +}: { + usdt: number | null | undefined; + usdc: number | null | undefined; +}) { + return ( +
+
{fmtU(usdt)}
+
{fmtUsdc(usdc)}
+
+ ); +} + export default function FundsBar() { const [s, setS] = useState(null); @@ -80,26 +100,24 @@ export default function FundsBar() { : "—"} -
+
总资金
{fmtU(s.total_funds)}
-
+
资金账户
-
- {s.funding_label || fmtU(s.funding_usdt)} -
+
-
+
交易账户
-
- {s.trading_label || fmtU(s.trading_usdt)} -
+
-
+
实时盈亏
- {s.realtime_pnl == null ? "—" : fmtU(s.realtime_pnl)} + {s.realtime_pnl == null + ? "—" + : `${s.realtime_pnl > 0 ? "+" : ""}${fmtU(s.realtime_pnl)}`}
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 0334029..292caee 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -191,55 +191,67 @@ input { display: flex; flex-wrap: nowrap; gap: 0; - padding: 2px 0 4px; + padding: 4px 0 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; + align-items: stretch; + min-height: 56px; } .funds-item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; flex: 1 1 0; min-width: 72px; - padding: 4px 10px; + padding: 4px 8px; border-right: 1px solid var(--line); + text-align: center; } .funds-item:first-child { - padding-left: 0; + padding-left: 4px; } .funds-item:last-child { border-right: none; - padding-right: 0; + padding-right: 4px; } .funds-item--primary .funds-value { color: var(--accent); + font-size: 1.02rem; + font-weight: 700; } .funds-label { - font-size: 11px; + font-size: 0.72rem; color: var(--muted); line-height: 1.2; - margin-bottom: 2px; + margin-bottom: 6px; white-space: nowrap; } .funds-value { - font-size: 13px; + font-size: 0.95rem; font-weight: 600; - line-height: 1.25; + line-height: 1.3; white-space: nowrap; + color: var(--text); } -.funds-item--money .funds-value { - font-size: 16px; - font-weight: 700; - letter-spacing: 0.01em; +.funds-dual { + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; } -.funds-item--money .funds-label { - font-size: 12px; +.funds-value--sub { + font-size: 0.95rem; + font-weight: 600; } .funds-item--pnl .funds-value {