From ea4410da0fcd20253b15b177c7f7383d27e9d52d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=87=E8=96=87=E5=AE=89?= <vivian@192.168.3.101>
Date: Wed, 4 Feb 2026 11:11:30 +0800
Subject: [PATCH] 1

---
 frontend/src/components/TradeList.css | 43 +++++++++++++++++++--
 frontend/src/components/TradeList.jsx | 54 +++++++++++++++++++++++----
 2 files changed, 86 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/TradeList.css b/frontend/src/components/TradeList.css
index 69f4f70..c13a1d8 100644
--- a/frontend/src/components/TradeList.css
+++ b/frontend/src/components/TradeList.css
@@ -306,16 +306,51 @@
   background-color: #f8f9fa;
 }
 
-.pnl-positive {
-  color: #4CAF50;
+/* 交易方向样式 */
+.trades-table td.buy {
+  color: #1976D2;
   font-weight: 500;
 }
 
-.pnl-negative {
-  color: #F44336;
+.trades-table td.sell {
+  color: #D32F2F;
   font-weight: 500;
 }
 
+.side-badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.side-badge.buy {
+  background: #E3F2FD;
+  color: #1976D2;
+}
+
+.side-badge.sell {
+  background: #FFEBEE;
+  color: #D32F2F;
+}
+
+/* 盈亏样式 */
+.trades-table td.positive,
+.stat-value.positive,
+.trade-card-value.positive {
+  color: #2e7d32; /* 更深一点的绿色，便于阅读 */
+  font-weight: 600;
+}
+
+.trades-table td.negative,
+.stat-value.negative,
+.trade-card-value.negative {
+  color: #c62828; /* 更深一点的红色 */
+  font-weight: 600;
+}
+
 .status-badge {
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
diff --git a/frontend/src/components/TradeList.jsx b/frontend/src/components/TradeList.jsx
index 539c2e6..576cd6f 100644
--- a/frontend/src/components/TradeList.jsx
+++ b/frontend/src/components/TradeList.jsx
@@ -207,6 +207,36 @@ const TradeList = () => {
     }
   }
 
+  // 兼容性复制函数
+  const fallbackCopyTextToClipboard = (text) => {
+    const textArea = document.createElement("textarea")
+    textArea.value = text
+    
+    // 避免滚动到底部
+    textArea.style.top = "0"
+    textArea.style.left = "0"
+    textArea.style.position = "fixed"
+    textArea.style.opacity = "0"
+    
+    document.body.appendChild(textArea)
+    textArea.focus()
+    textArea.select()
+    
+    try {
+      const successful = document.execCommand('copy')
+      if (successful) {
+        alert('统计数据已复制到剪贴板（可直接粘贴到Excel）')
+      } else {
+        alert('复制失败，请手动选择复制')
+      }
+    } catch (err) {
+      console.error('Fallback copy failed:', err)
+      alert('复制失败，您的浏览器不支持自动复制')
+    }
+    
+    document.body.removeChild(textArea)
+  }
+
   // 复制统计数据到剪贴板
   const handleCopyStats = (statsData) => {
     if (!statsData) return
@@ -233,12 +263,18 @@ const TradeList = () => {
     ]
     
     const text = lines.join('\n')
-    navigator.clipboard.writeText(text).then(() => {
-      alert('统计数据已复制到剪贴板（可直接粘贴到Excel）')
-    }).catch(err => {
-      console.error('Copy failed:', err)
-      alert('复制失败，请手动复制')
-    })
+    
+    // 优先尝试 Clipboard API
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(() => {
+        alert('统计数据已复制到剪贴板（可直接粘贴到Excel）')
+      }).catch(err => {
+        console.error('Clipboard API failed:', err)
+        fallbackCopyTextToClipboard(text)
+      })
+    } else {
+      fallbackCopyTextToClipboard(text)
+    }
   }
 
   if (loading) return <div className="loading">加载中...</div>
@@ -674,7 +710,11 @@ const TradeList = () => {
                     <tr key={trade.id}>
                       <td style={{ fontSize: '12px', color: '#999' }}>#{trade.id}</td>
                       <td>{trade.symbol}</td>
-                      <td className={trade.side === 'BUY' ? 'buy' : 'sell'}>{trade.side}</td>
+                      <td>
+                        <span className={`side-badge ${trade.side === 'BUY' ? 'buy' : 'sell'}`}>
+                          {trade.side === 'BUY' ? '做多' : '做空'}
+                        </span>
+                      </td>
                       <td>{parseFloat(trade.quantity).toFixed(4)}</td>
                       <td>{notional >= 0.01 ? notional.toFixed(2) : notional.toFixed(4)} USDT</td>
                       <td>{margin >= 0.01 ? margin.toFixed(2) : margin.toFixed(4)} USDT</td>