This commit is contained in:
薇薇安 2026-01-15 23:00:28 +08:00
parent 9513f94760
commit 3a07c55281
2 changed files with 149 additions and 54 deletions

View File

@ -243,38 +243,104 @@ const TradeList = () => {
<th>交易对</th>
<th>方向</th>
<th>数量</th>
<th>保证金</th>
<th>入场价</th>
<th>出场价</th>
<th>盈亏</th>
<th>盈亏比例</th>
<th>状态</th>
<th>平仓类型</th>
<th>时间</th>
</tr>
</thead>
<tbody>
{trades.map(trade => (
{trades.map(trade => {
// entry_value_usdtleverage使/
const entryValue = trade.entry_value_usdt !== undefined
? parseFloat(trade.entry_value_usdt)
: (parseFloat(trade.quantity || 0) * parseFloat(trade.entry_price || 0))
const leverage = parseFloat(trade.leverage || 10)
const margin = leverage > 0 ? entryValue / leverage : 0
// /
const pnl = parseFloat(trade.pnl || 0)
const pnlPercent = margin > 0 ? (pnl / margin) * 100 : 0
//
const formatTime = (timeStr) => {
if (!timeStr) return '-'
try {
const date = new Date(timeStr)
if (isNaN(date.getTime())) return timeStr
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
timeZone: 'Asia/Shanghai'
})
} catch (e) {
return timeStr
}
}
return (
<tr key={trade.id}>
<td>{trade.symbol}</td>
<td className={trade.side === 'BUY' ? 'buy' : 'sell'}>{trade.side}</td>
<td>{parseFloat(trade.quantity).toFixed(4)}</td>
<td>{margin.toFixed(2)} USDT</td>
<td>{parseFloat(trade.entry_price).toFixed(4)}</td>
<td>{trade.exit_price ? parseFloat(trade.exit_price).toFixed(4) : '-'}</td>
<td className={parseFloat(trade.pnl) >= 0 ? 'positive' : 'negative'}>
{parseFloat(trade.pnl).toFixed(2)} USDT
<td className={pnl >= 0 ? 'positive' : 'negative'}>
{pnl.toFixed(2)} USDT
</td>
<td className={pnlPercent >= 0 ? 'positive' : 'negative'}>
{pnlPercent >= 0 ? '+' : ''}{pnlPercent.toFixed(2)}%
</td>
<td>
<span className={`status ${trade.status}`}>{trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'}</span>
</td>
<td>{trade.exit_reason_display || '-'}</td>
<td>{new Date(trade.entry_time).toLocaleString('zh-CN')}</td>
<td>{formatTime(trade.entry_time)}</td>
</tr>
))}
)
})}
</tbody>
</table>
{/* 移动端卡片 */}
<div className="trades-cards">
{trades.map(trade => (
{trades.map(trade => {
//
const entryValue = trade.entry_value_usdt !== undefined
? parseFloat(trade.entry_value_usdt)
: (parseFloat(trade.quantity || 0) * parseFloat(trade.entry_price || 0))
const leverage = parseFloat(trade.leverage || 10)
const margin = leverage > 0 ? entryValue / leverage : 0
const pnl = parseFloat(trade.pnl || 0)
const pnlPercent = margin > 0 ? (pnl / margin) * 100 : 0
//
const formatTime = (timeStr) => {
if (!timeStr) return '-'
try {
const date = new Date(timeStr)
if (isNaN(date.getTime())) return timeStr
return date.toLocaleString('zh-CN', {
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
timeZone: 'Asia/Shanghai'
})
} catch (e) {
return timeStr
}
}
return (
<div key={trade.id} className="trade-card">
<div className="trade-card-header">
<span className="trade-card-symbol">{trade.symbol}</span>
@ -287,6 +353,10 @@ const TradeList = () => {
<span className="trade-card-label">数量</span>
<span className="trade-card-value">{parseFloat(trade.quantity).toFixed(4)}</span>
</div>
<div className="trade-card-field">
<span className="trade-card-label">保证金</span>
<span className="trade-card-value">{margin.toFixed(2)} USDT</span>
</div>
<div className="trade-card-field">
<span className="trade-card-label">入场价</span>
<span className="trade-card-value">{parseFloat(trade.entry_price).toFixed(4)}</span>
@ -297,8 +367,14 @@ const TradeList = () => {
</div>
<div className="trade-card-field">
<span className="trade-card-label">盈亏</span>
<span className={`trade-card-value ${parseFloat(trade.pnl) >= 0 ? 'positive' : 'negative'}`}>
{parseFloat(trade.pnl).toFixed(2)} USDT
<span className={`trade-card-value ${pnl >= 0 ? 'positive' : 'negative'}`}>
{pnl.toFixed(2)} USDT
</span>
</div>
<div className="trade-card-field">
<span className="trade-card-label">盈亏比例</span>
<span className={`trade-card-value ${pnlPercent >= 0 ? 'positive' : 'negative'}`}>
{pnlPercent >= 0 ? '+' : ''}{pnlPercent.toFixed(2)}%
</span>
</div>
{trade.exit_reason_display && (
@ -309,13 +385,14 @@ const TradeList = () => {
)}
</div>
<div className="trade-card-footer">
<span>{new Date(trade.entry_time).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</span>
<span>{formatTime(trade.entry_time)}</span>
{trade.exit_time && (
<span>平仓: {new Date(trade.exit_time).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</span>
<span>平仓: {formatTime(trade.exit_time)}</span>
)}
</div>
</div>
))}
)
})}
</div>
</>
)}

View File

@ -104,6 +104,24 @@ function RecommendationsViewer() {
};
const formatTime = (timeStr) => {
if (!timeStr) return '-'
try {
const date = new Date(timeStr)
if (isNaN(date.getTime())) return timeStr
// 使
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
timeZone: 'Asia/Shanghai' // 使
})
} catch (e) {
return timeStr
}
}
if (!timeStr) return '-';
try {
const date = new Date(timeStr);