miracle/auto_trade_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
薇薇安 2026-01-16 14:19:27 +08:00
parent 48e657e8cc
commit 6d1f45ac9a
1 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/TradeList.jsx
View File

@ -83,6 +83,9 @@ const TradeList = () => {
return ( return (
<div className="trade-list"> <div className="trade-list">
<h2>交易记录</h2> <h2>交易记录</h2>
<p style={{ color: '#666', fontSize: '14px', marginTop: '-10px', marginBottom: '20px' }}>
说明：每条记录代表一笔完整的交易（开仓+平仓），统计总盈亏时每条记录只计算一次
</p>
{/* 筛选面板 */} {/* 筛选面板 */}
<div className="filter-panel"> <div className="filter-panel">
@ -212,6 +215,7 @@ const TradeList = () => {
<div className="stat-card"> <div className="stat-card">
<div className="stat-label">总交易数</div> <div className="stat-label">总交易数</div>
<div className="stat-value">{stats.total_trades}</div> <div className="stat-value">{stats.total_trades}</div>
<div style={{ fontSize: '12px', color: '#999', marginTop: '4px' }}>（已平仓的完整交易）</div>
</div> </div>
<div className="stat-card"> <div className="stat-card">
<div className="stat-label">胜率</div> <div className="stat-label">胜率</div>
@ -240,6 +244,7 @@ const TradeList = () => {
<table className="trades-table"> <table className="trades-table">
<thead> <thead>
<tr> <tr>
<th>交易ID</th>
<th>交易对</th> <th>交易对</th>
<th>方向</th> <th>方向</th>
<th>数量</th> <th>数量</th>
@ -250,8 +255,7 @@ const TradeList = () => {
<th>盈亏比例</th> <th>盈亏比例</th>
<th>状态</th> <th>状态</th>
<th>平仓类型</th> <th>平仓类型</th>
<th>开仓订单号</th> <th>币安订单号</th>
<th>平仓订单号</th>
<th>入场时间</th> <th>入场时间</th>
<th>平仓时间</th> <th>平仓时间</th>
</tr> </tr>
@ -288,8 +292,20 @@ const TradeList = () => {
} }
} }
// 格式化订单号显示
const formatOrderIds = () => {
const entry = trade.entry_order_id || '-'
const exit = trade.exit_order_id || '-'
if (entry === '-' && exit === '-') return '-'
if (entry !== '-' && exit !== '-') {
return `开仓: ${entry} / 平仓: ${exit}`
}
return entry !== '-' ? `开仓: ${entry}` : `平仓: ${exit}`
}
return ( return (
<tr key={trade.id}> <tr key={trade.id}>
<td style={{ fontSize: '12px', color: '#999' }}>#{trade.id}</td>
<td>{trade.symbol}</td> <td>{trade.symbol}</td>
<td className={trade.side === 'BUY' ? 'buy' : 'sell'}>{trade.side}</td> <td className={trade.side === 'BUY' ? 'buy' : 'sell'}>{trade.side}</td>
<td>{parseFloat(trade.quantity).toFixed(4)}</td> <td>{parseFloat(trade.quantity).toFixed(4)}</td>
@ -306,8 +322,7 @@ const TradeList = () => {
<span className={`status ${trade.status}`}>{trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'}</span> <span className={`status ${trade.status}`}>{trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'}</span>
</td> </td>
<td>{trade.exit_reason_display || '-'}</td> <td>{trade.exit_reason_display || '-'}</td>
<td className="order-id">{trade.entry_order_id || '-'}</td> <td className="order-id" style={{ fontSize: '12px' }}>{formatOrderIds()}</td>
<td className="order-id">{trade.exit_order_id || '-'}</td>
<td>{formatTime(trade.entry_time)}</td> <td>{formatTime(trade.entry_time)}</td>
<td>{trade.exit_time ? formatTime(trade.exit_time) : '-'}</td> <td>{trade.exit_time ? formatTime(trade.exit_time) : '-'}</td>
</tr> </tr>
@ -350,6 +365,7 @@ const TradeList = () => {
<div key={trade.id} className="trade-card"> <div key={trade.id} className="trade-card">
<div className="trade-card-header"> <div className="trade-card-header">
<span className="trade-card-symbol">{trade.symbol}</span> <span className="trade-card-symbol">{trade.symbol}</span>
<span style={{ fontSize: '11px', color: '#999', marginLeft: '8px' }}>交易ID: #{trade.id}</span>
<span className={`trade-card-side ${trade.side === 'BUY' ? 'buy' : 'sell'} status ${trade.status}`}> <span className={`trade-card-side ${trade.side === 'BUY' ? 'buy' : 'sell'} status ${trade.status}`}>
{trade.side === 'BUY' ? '买入' : '卖出'} · {trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'} {trade.side === 'BUY' ? '买入' : '卖出'} · {trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'}
</span> </span>
@ -389,16 +405,14 @@ const TradeList = () => {
<span className="trade-card-value">{trade.exit_reason_display}</span> <span className="trade-card-value">{trade.exit_reason_display}</span>
</div> </div>
)} )}
{trade.entry_order_id && ( {(trade.entry_order_id || trade.exit_order_id) && (
<div className="trade-card-field"> <div className="trade-card-field">
<span className="trade-card-label">开仓订单号</span> <span className="trade-card-label">币安订单号</span>
<span className="trade-card-value order-id">{trade.entry_order_id}</span> <span className="trade-card-value order-id" style={{ fontSize: '12px' }}>
</div> {trade.entry_order_id ? `开仓: ${trade.entry_order_id}` : ''}
)} {trade.entry_order_id && trade.exit_order_id ? ' / ' : ''}
{trade.exit_order_id && ( {trade.exit_order_id ? `平仓: ${trade.exit_order_id}` : ''}
<div className="trade-card-field"> </span>
<span className="trade-card-label">平仓订单号</span>
<span className="trade-card-value order-id">{trade.exit_order_id}</span>
</div> </div>
)} )}
</div> </div>