1

frontend/src/components/StatsDashboard.jsx

@@ -728,7 +728,8 @@ const StatsDashboard = () => {
                         <div className="entry-time">开仓时间: {formatEntryTime(trade.entry_time)}</div>
                       )}
                     </div>
-                    <div className="stop-take-info">
+                    <div className="trade-protection-col">
+                      <div className="stop-take-info">
                         <div className="stop-loss-info">
                           止损: <span className="negative">-{stopLossPercent.toFixed(2)}%</span>
                           <span className="stop-note">(of margin)</span>
@@ -753,23 +754,39 @@ const StatsDashboard = () => {
                         )}
                       </div>
                       
-                      {/* 显示币安实际挂单信息 */}
+                      {/* 显示币安实际挂单信息 (优化版) */}
                       {trade.open_orders && trade.open_orders.length > 0 && (
-                        <div className="open-orders-info" style={{ marginTop: '8px', borderTop: '1px dashed #eee', paddingTop: '6px' }}>
-                          <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px', fontWeight: 'bold' }}>条件单 (Binance):</div>
-                          {trade.open_orders.map(order => (
-                            <div key={order.orderId} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', marginBottom: '4px', paddingLeft: '8px' }}>
-                              <span className={order.side === 'BUY' ? 'positive' : 'negative'} style={{ fontWeight: '500' }}>
-                                {order.type.replace('_MARKET', '')}
-                              </span>
-                              <span style={{ fontFamily: 'monospace' }}>
-                                {order.type.includes('STOP') ? `触发价: ${fmtPrice(order.stopPrice)}` : `价格: ${fmtPrice(order.price)}`}
-                              </span>
-                              <span style={{ color: '#999', fontSize: '11px' }}>{order.status}</span>
-                            </div>
-                          ))}
+                        <div className="open-orders-compact">
+                          <div className="open-orders-label">
+                            <span>Binance 挂单</span>
+                            <span style={{fontSize: '10px', fontWeight: 'normal', color: '#adb5bd'}}>({trade.open_orders.length})</span>
+                          </div>
+                          <div className="order-badges">
+                            {trade.open_orders.map(order => {
+                              // 判断类型
+                              const isSL = order.type.includes('STOP')
+                              const isTP = order.type.includes('TAKE_PROFIT')
+                              
+                              // 简化显示文本
+                              let typeLabel = order.type.replace('_MARKET', '')
+                              if (isSL) typeLabel = '止损'
+                              else if (isTP) typeLabel = '止盈'
+                              
+                              // 价格
+                              const priceVal = order.stopPrice > 0 ? order.stopPrice : order.price
+                              
+                              return (
+                                <div key={order.orderId} className={`order-badge ${isSL ? 'sl' : isTP ? 'tp' : 'other'}`}>
+                                  <span className="badge-type">{typeLabel}</span>
+                                  <span className="badge-price">{fmtPrice(priceVal)}</span>
+                                  {order.reduceOnly && <span className="badge-tag">R</span>}
+                                </div>
+                              )
+                            })}
+                          </div>
                         </div>
                       )}
+                    </div>
 
                     <div className="trade-actions">
                       <div className={`trade-pnl ${parseFloat(trade.pnl || 0) >= 0 ? 'positive' : 'negative'}`}>