dekun
110 lines
3.6 KiB
TypeScript
110 lines
3.6 KiB
TypeScript
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;
|
|
funding_usdc?: number | null;
|
|
trading_usdc?: number | null;
|
|
funding_label?: string;
|
|
trading_label?: string;
|
|
realtime_pnl: number | null;
|
|
usdc_usdt_rate?: number;
|
|
perp_inst_id?: string;
|
|
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-shell">
|
|
<div className="funds-bar-inner">
|
|
<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 funds-item--money">
|
|
<div className="funds-label">总资金</div>
|
|
<div className="funds-value mono">{fmtU(s.total_funds)}</div>
|
|
</div>
|
|
<div className="funds-item funds-item--money">
|
|
<div className="funds-label">资金账户</div>
|
|
<div className="funds-value mono">
|
|
{s.funding_label || fmtU(s.funding_usdt)}
|
|
</div>
|
|
</div>
|
|
<div className="funds-item funds-item--money">
|
|
<div className="funds-label">交易账户</div>
|
|
<div className="funds-value mono">
|
|
{s.trading_label || fmtU(s.trading_usdt)}
|
|
</div>
|
|
</div>
|
|
<div className="funds-item funds-item--pnl funds-item--money">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|