diff --git a/frontend/src/components/StatsDashboard.css b/frontend/src/components/StatsDashboard.css index b3487d7..c8793e1 100644 --- a/frontend/src/components/StatsDashboard.css +++ b/frontend/src/components/StatsDashboard.css @@ -241,6 +241,63 @@ font-style: italic; } +.price-change { + font-weight: 600; + font-size: 0.9rem; + padding: 0.25rem 0.5rem; + border-radius: 4px; + display: inline-block; +} + +.price-change.positive { + color: #28a745; + background-color: #d4edda; +} + +.price-change.negative { + color: #dc3545; + background-color: #f8d7da; +} + +.stop-take-info { + display: flex; + flex-direction: column; + gap: 0.25rem; + margin-top: 0.5rem; + padding: 0.5rem; + background-color: #fff3cd; + border-radius: 4px; + border-left: 3px solid #ffc107; +} + +.stop-loss-info, +.take-profit-info { + font-size: 0.85rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.stop-loss-info .negative, +.take-profit-info .positive { + font-weight: 600; +} + +.stop-loss-info .negative { + color: #dc3545; +} + +.take-profit-info .positive { + color: #28a745; +} + +.stop-price, +.take-price { + color: #666; + font-size: 0.8rem; + font-style: italic; +} + .close-btn { padding: 0.5rem 1rem; background: #e74c3c; diff --git a/frontend/src/components/StatsDashboard.jsx b/frontend/src/components/StatsDashboard.jsx index 11c765c..9f52cd0 100644 --- a/frontend/src/components/StatsDashboard.jsx +++ b/frontend/src/components/StatsDashboard.jsx @@ -168,6 +168,46 @@ const StatsDashboard = () => { const leverage = parseFloat(trade.leverage || 1) const margin = leverage > 0 ? entryValueUsdt / leverage : 0 + // 计算价格涨跌比例、止损比例、止盈比例 + const entryPrice = parseFloat(trade.entry_price || 0) + const markPrice = parseFloat(trade.mark_price || entryPrice) + const side = trade.side || 'BUY' + + // 价格涨跌比例(当前价格相对于入场价) + let priceChangePercent = 0 + if (entryPrice > 0) { + if (side === 'BUY') { + priceChangePercent = ((markPrice - entryPrice) / entryPrice) * 100 + } else { + priceChangePercent = ((entryPrice - markPrice) / entryPrice) * 100 + } + } + + // 默认止损止盈比例(从配置获取,如果没有则使用默认值) + // 注意:这里使用默认值,实际止损止盈可能是动态计算的 + const defaultStopLossPercent = 3.0 // 默认3% + const defaultTakeProfitPercent = 5.0 // 默认5% + + // 计算止损价和止盈价(基于默认比例) + let stopLossPrice = 0 + let takeProfitPrice = 0 + if (side === 'BUY') { + stopLossPrice = entryPrice * (1 - defaultStopLossPercent / 100) + takeProfitPrice = entryPrice * (1 + defaultTakeProfitPercent / 100) + } else { + stopLossPrice = entryPrice * (1 + defaultStopLossPercent / 100) + takeProfitPrice = entryPrice * (1 - defaultTakeProfitPercent / 100) + } + + // 计算止损比例和止盈比例(相对于入场价) + const stopLossPercent = side === 'BUY' + ? ((entryPrice - stopLossPrice) / entryPrice) * 100 + : ((stopLossPrice - entryPrice) / entryPrice) * 100 + + const takeProfitPercent = side === 'BUY' + ? ((takeProfitPrice - entryPrice) / entryPrice) * 100 + : ((entryPrice - takeProfitPrice) / entryPrice) * 100 + // 格式化开仓时间为具体的年月日时分秒 const formatEntryTime = (timeStr) => { if (!timeStr) return null @@ -195,13 +235,31 @@ const StatsDashboard = () => {
数量: {parseFloat(trade.quantity || 0).toFixed(4)}
保证金: {margin.toFixed(2)} USDT
-
入场价: {parseFloat(trade.entry_price || 0).toFixed(4)}
+
入场价: {entryPrice.toFixed(4)}
{trade.mark_price && ( -
标记价: {parseFloat(trade.mark_price).toFixed(4)}
+
标记价: {markPrice.toFixed(4)}
)} {trade.leverage && (
杠杆: {trade.leverage}x
)} + + {/* 价格涨跌比例 */} +
= 0 ? 'positive' : 'negative'}`}> + 价格涨跌: {priceChangePercent >= 0 ? '+' : ''}{priceChangePercent.toFixed(2)}% +
+ + {/* 止损止盈比例 */} +
+
+ 止损比例: -{stopLossPercent.toFixed(2)}% + (价: {stopLossPrice.toFixed(4)}) +
+
+ 止盈比例: +{takeProfitPercent.toFixed(2)}% + (价: {takeProfitPrice.toFixed(4)}) +
+
+ {trade.entry_time && (
开仓时间: {formatEntryTime(trade.entry_time)}
)}