75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
import React from 'react';
|
||
import { formatDateTime } from '../../utils/formatters';
|
||
|
||
export default function ExplainTradesSection({
|
||
tickerTrades,
|
||
selectedSymbol,
|
||
isOpen,
|
||
onToggle,
|
||
}) {
|
||
const sideLabel = (value) => {
|
||
if (value === 'LONG') return '做多';
|
||
if (value === 'SHORT') return '做空';
|
||
return value || '-';
|
||
};
|
||
|
||
return (
|
||
<div className="section">
|
||
<div className="section-header">
|
||
<h2 className="section-title">成交记录</h2>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
|
||
<div style={{ fontSize: 11, color: '#666666' }}>
|
||
{tickerTrades.length} 笔与 {selectedSymbol} 相关的交易
|
||
</div>
|
||
<button
|
||
onClick={onToggle}
|
||
style={{
|
||
border: '1px solid #111111',
|
||
background: isOpen ? '#111111' : '#ffffff',
|
||
color: isOpen ? '#ffffff' : '#111111',
|
||
padding: '7px 10px',
|
||
fontFamily: 'inherit',
|
||
fontSize: 11,
|
||
fontWeight: 700,
|
||
cursor: 'pointer'
|
||
}}
|
||
>
|
||
{isOpen ? '收起成交记录' : `展开成交记录 ${tickerTrades.length}`}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{tickerTrades.length === 0 ? (
|
||
<div className="empty-state">该股票暂无成交记录</div>
|
||
) : !isOpen ? (
|
||
<div className="empty-state">成交记录默认收起，需要时再展开查看。</div>
|
||
) : (
|
||
<div className="table-wrapper">
|
||
<table className="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>方向</th>
|
||
<th>数量</th>
|
||
<th>价格</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{tickerTrades.slice(0, 10).map((trade, index) => (
|
||
<tr key={trade.id || `${trade.ticker}-${trade.timestamp}-${index}`}>
|
||
<td>{formatDateTime(trade.timestamp)}</td>
|
||
<td style={{ fontWeight: 700, color: trade.side === 'LONG' ? '#00C853' : trade.side === 'SHORT' ? '#FF1744' : '#000000' }}>
|
||
{sideLabel(trade.side)}
|
||
</td>
|
||
<td>{trade.qty}</td>
|
||
<td>${Number(trade.price).toFixed(2)}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|