Add OKX-style funds bar with USDT/USDC convert and transfer.

SIM uses multi-wallet balances; LIVE hits OKX asset/account APIs and spot USDC-USDT swap. Funds strip hides sim labeling. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-29 17:06:13 +08:00
parent 1c75db4a19
commit 5c3bd4b654
13 changed files with 1020 additions and 6 deletions
@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useState } from "react";
+import { apiFetch } from "../api/client";
+
+export type FundsSummary = {
+  ok: boolean;
+  exchange: string;
+  trading_day: string;
+  total_trades: number;
+  win_rate: number;
+  profit_loss_ratio: number | null;
+  total_funds: number | null;
+  funding_usdt: number | null;
+  trading_usdt: number | null;
+  options_funding_label: string;
+  options_trading_label: string;
+  realtime_pnl: number | null;
+  usdc_usdt_rate?: number;
+  detail?: string;
+};
+
+function fmtU(n: number | null | undefined) {
+  if (n == null || Number.isNaN(n)) return "—";
+  return `${n.toFixed(2)}U`;
+}
+
+function pnlClass(n: number | null | undefined) {
+  if (n == null || Number.isNaN(n) || n === 0) return "";
+  return n > 0 ? "pos-pnl-profit" : "pos-pnl-loss";
+}
+
+export default function FundsBar() {
+  const [s, setS] = useState<FundsSummary | null>(null);
+
+  const load = useCallback(() => {
+    apiFetch<FundsSummary>("/api/funds/summary")
+      .then(setS)
+      .catch(() => {
+        /* 顶栏静默失败，避免刷屏 */
+      });
+  }, []);
+
+  useEffect(() => {
+    load();
+    const t = window.setInterval(load, 5000);
+    return () => window.clearInterval(t);
+  }, [load]);
+
+  if (!s?.ok) return null;
+
+  return (
+    <div className="funds-bar" aria-label="资金与统计">
+      <div className="funds-item funds-item--primary">
+        <div className="funds-label">交易所</div>
+        <div className="funds-value">{s.exchange || "—"}</div>
+      </div>
+      <div className="funds-item">
+        <div className="funds-label">交易日</div>
+        <div className="funds-value mono">{s.trading_day}</div>
+      </div>
+      <div className="funds-item funds-item--primary">
+        <div className="funds-label">总交易</div>
+        <div className="funds-value mono">{s.total_trades}</div>
+      </div>
+      <div className="funds-item">
+        <div className="funds-label">胜率</div>
+        <div className="funds-value mono">
+          {(s.win_rate * 100).toFixed(0)}%
+        </div>
+      </div>
+      <div className="funds-item" title="平均盈利 ÷ 平均亏损">
+        <div className="funds-label">盈亏比</div>
+        <div className="funds-value mono">
+          {s.profit_loss_ratio != null ? s.profit_loss_ratio.toFixed(2) : "—"}
+        </div>
+      </div>
+      <div className="funds-item">
+        <div className="funds-label">总资金</div>
+        <div className="funds-value mono">{fmtU(s.total_funds)}</div>
+      </div>
+      <div className="funds-item">
+        <div className="funds-label">资金账户</div>
+        <div className="funds-value mono">{fmtU(s.funding_usdt)}</div>
+      </div>
+      <div className="funds-item">
+        <div className="funds-label">交易账户</div>
+        <div className="funds-value mono">{fmtU(s.trading_usdt)}</div>
+      </div>
+      <div className="funds-item">
+        <div className="funds-label">期权资金账户</div>
+        <div className="funds-value mono">{s.options_funding_label}</div>
+      </div>
+      <div className="funds-item">
+        <div className="funds-label">期权交易账户</div>
+        <div className="funds-value mono">{s.options_trading_label}</div>
+      </div>
+      <div className="funds-item funds-item--pnl">
+        <div className="funds-label">实时盈亏</div>
+        <div className={`funds-value mono ${pnlClass(s.realtime_pnl)}`}>
+          {s.realtime_pnl == null ? "—" : fmtU(s.realtime_pnl)}
+        </div>
+      </div>
+    </div>
+  );
+}