jack/exchange-monitor-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 交易详情订单按交易所+时间排序, 加仓位列, 多空Pnl显示USD金额

Browse Source
This commit is contained in:
jackyu66git
2026-05-04 05:38:08 +08:00
parent a9a21de5a2
commit af44e14f39
1 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+17 -6
View File
@@ -448,6 +448,17 @@ function TradeDetailModal({ trade, orders, onClose }) {
const dur = closed ? Math.round((closed - opened) / 1000) + 's' : '-'
const pnlCls = trade.NetPnl > 0 ? 'text-green' : trade.NetPnl < 0 ? 'text-red' : ''
// Sort orders: by Exchange ascending, then by CreatedAt ascending
const sortedOrders = [...(orders || [])].sort((a, b) => {
const exCmp = (a.Exchange || '').localeCompare(b.Exchange || '')
if (exCmp !== 0) return exCmp
return new Date(a.CreatedAt) - new Date(b.CreatedAt)
})
// Compute USD PnL per leg: AmountUSD * Pnl% / 100
const longPnlUSD = trade.AmountUSD && trade.LongPnl != null ? trade.AmountUSD * trade.LongPnl / 100 : null
const shortPnlUSD = trade.AmountUSD && trade.ShortPnl != null ? trade.AmountUSD * trade.ShortPnl / 100 : null
return (
<div className="modal-overlay" onClick={handleOverlayClick}>
<div className="modal-content">
@@ -488,13 +499,13 @@ function TradeDetailModal({ trade, orders, onClose }) {
<h3>多仓 {trade.LongExchange || '-'}</h3>
<div className="detail-row"><span className="label">入场价</span><span className="value">${(trade.LongEntry || 0).toFixed(6)}</span></div>
<div className="detail-row"><span className="label">出场价</span><span className="value">${(trade.LongExit || 0).toFixed(6)}</span></div>
<div className="detail-row"><span className="label">盈亏</span><span className={'value ' + (trade.LongPnl > 0 ? 'text-green' : trade.LongPnl < 0 ? 'text-red' : '')}>{trade.LongPnl != null ? trade.LongPnl.toFixed(4) + '%' : '-'}</span></div>
<div className="detail-row"><span className="label">盈亏</span><span className={'value ' + (trade.LongPnl > 0 ? 'text-green' : trade.LongPnl < 0 ? 'text-red' : '')}>{trade.LongPnl != null ? trade.LongPnl.toFixed(4) + '%' : '-'} {longPnlUSD != null ? <span style={{fontSize:11,opacity:0.8}}>(${longPnlUSD.toFixed(4)})</span> : null}</span></div>
</div>
<div className="detail-section">
<h3>空仓 {trade.ShortExchange || '-'}</h3>
<div className="detail-row"><span className="label">入场价</span><span className="value">${(trade.ShortEntry || 0).toFixed(6)}</span></div>
<div className="detail-row"><span className="label">出场价</span><span className="value">${(trade.ShortExit || 0).toFixed(6)}</span></div>
<div className="detail-row"><span className="label">盈亏</span><span className={'value ' + (trade.ShortPnl > 0 ? 'text-green' : trade.ShortPnl < 0 ? 'text-red' : '')}>{trade.ShortPnl != null ? trade.ShortPnl.toFixed(4) + '%' : '-'}</span></div>
<div className="detail-row"><span className="label">盈亏</span><span className={'value ' + (trade.ShortPnl > 0 ? 'text-green' : trade.ShortPnl < 0 ? 'text-red' : '')}>{trade.ShortPnl != null ? trade.ShortPnl.toFixed(4) + '%' : '-'} {shortPnlUSD != null ? <span style={{fontSize:11,opacity:0.8}}>(${shortPnlUSD.toFixed(4)})</span> : null}</span></div>
</div>
<div className="detail-section detail-section-full">
<h3>净收益</h3>
@@ -509,16 +520,16 @@ function TradeDetailModal({ trade, orders, onClose }) {
<h3>订单明细 ({orders.length})</h3>
<table className="detail-orders">
<thead>
<tr><th>类型</th><th>方向</th><th>交易所</th><th>价格</th><th>数量</th><th>手续费</th><th>订单ID</th></tr>
<tr><th>交易所</th><th>类型</th><th>方向</th><th>价格</th><th>仓位</th><th>手续费</th><th>订单ID</th></tr>
</thead>
<tbody>
{orders.map((o, i) => (
{sortedOrders.map((o, i) => (
<tr key={i}>
<td>{o.Exchange}</td>
<td>{o.Type === 'entry' ? '开仓' : o.Type === 'exit' ? '平仓' : o.Type === 'scale' ? '加仓' : o.Type}</td>
<td>{o.Side === 'buy' ? '买' : '卖'}</td>
<td>{o.Exchange}</td>
<td>${(o.Price || 0).toFixed(6)}</td>
<td>{o.Size || '-'}</td>
<td className="text-right">{o.Size != null ? Number(o.Size).toFixed(4) : '-'}</td>
<td>{o.Fee != null ? '$' + (o.Fee).toFixed(4) : '-'}</td>
<td>{o.OrderID ? o.OrderID.substring(0, 12) + '...' : '-'}</td>
</tr>