From af44e14f392abe745402732cb32ed0a14a4c7a4f Mon Sep 17 00:00:00 2001
From: jackyu66git <jackyu66@gmail.com>
Date: Mon, 4 May 2026 05:38:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=A4=E6=98=93=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E6=8C=89=E4=BA=A4=E6=98=93=E6=89=80+?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=8E=92=E5=BA=8F,=20=E5=8A=A0=E4=BB=93?=
 =?UTF-8?q?=E4=BD=8D=E5=88=97,=20=E5=A4=9A=E7=A9=BAPnl=E6=98=BE=E7=A4=BAUS?=
 =?UTF-8?q?D=E9=87=91=E9=A2=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.jsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a0a2ed1..5f2cd7a 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -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>