From 2ebb38c843104f181151e2119f5bd4ca964d829a Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Wed, 25 Feb 2026 21:22:37 +0800
Subject: [PATCH] 1

---
 frontend/paper-trading.html | 121 +++++++++++++++++++++++++-----------
 1 file changed, 83 insertions(+), 38 deletions(-)

diff --git a/frontend/paper-trading.html b/frontend/paper-trading.html
index 724fbcf..773ae74 100644
--- a/frontend/paper-trading.html
+++ b/frontend/paper-trading.html
@@ -301,6 +301,52 @@
             color: #ff4444;
         }
 
+        /* 核心指标网格 - 突出显示 */
+        .core-metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+
+        .core-metric-card {
+            background: var(--bg-secondary);
+            border: 2px solid var(--border);
+            border-radius: 12px;
+            padding: 24px 20px;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+
+        .core-metric-card:hover {
+            border-color: var(--accent);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(0, 255, 65, 0.15);
+        }
+
+        .core-metric-label {
+            font-size: 13px;
+            color: var(--text-secondary);
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .core-metric-value {
+            font-size: 32px;
+            font-weight: 700;
+            font-feature-settings: 'tnum';
+            font-variant-numeric: tabular-nums;
+        }
+
+        .core-metric-value.positive {
+            color: var(--accent);
+        }
+
+        .core-metric-value.negative {
+            color: #ff4444;
+        }
+
         /* 按等级统计 - 优化样式 */
         .grade-stats {
             display: grid;
@@ -698,6 +744,15 @@
                 min-width: calc(50% - 8px);
             }
 
+            .core-metrics-grid {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 12px;
+            }
+
+            .core-metric-value {
+                font-size: 24px;
+            }
+
             .grade-stats {
                 grid-template-columns: 1fr;
             }
@@ -1322,11 +1377,35 @@
 
                 <!-- 详细统计 -->
                 <div v-if="activeTab === 'stats'">
-                    <!-- 总体指标汇总 -->
-                    <div class="grade-stats" style="margin-bottom: 30px;">
+                    <!-- 核心指标 - 突出显示 -->
+                    <div class="core-metrics-grid">
+                        <div class="core-metric-card">
+                            <div class="core-metric-label">累计收益率</div>
+                            <div class="core-metric-value" :class="totalReturn >= 0 ? 'positive' : 'negative'">
+                                {{ totalReturn >= 0 ? '+' : '' }}{{ totalReturn.toFixed(2) }}%
+                            </div>
+                        </div>
+                        <div class="core-metric-card">
+                            <div class="core-metric-label">最大回撤</div>
+                            <div class="core-metric-value" :class="stats.max_drawdown <= 0 ? 'negative' : 'positive'">
+                                {{ stats.max_drawdown ? stats.max_drawdown.toFixed(2) : '0.00' }}%
+                            </div>
+                        </div>
+                        <div class="core-metric-card">
+                            <div class="core-metric-label">胜率</div>
+                            <div class="core-metric-value">{{ stats.win_rate.toFixed(1) }}%</div>
+                        </div>
+                        <div class="core-metric-card">
+                            <div class="core-metric-label">盈亏比</div>
+                            <div class="core-metric-value">{{ stats.profit_factor === Infinity ? '∞' : stats.profit_factor.toFixed(2) }}</div>
+                        </div>
+                    </div>
+
+                    <!-- 详细数据 -->
+                    <div class="grade-stats" style="margin-top: 30px;">
                         <div class="grade-card">
                             <div class="grade-card-header">
-                                <span class="grade-card-title">交易统计</span>
+                                <span class="grade-card-title">交易详情</span>
                             </div>
                             <div class="grade-card-stats">
                                 <div class="grade-stat-row">
@@ -1341,21 +1420,6 @@
                                     <span class="grade-stat-label">亏损交易</span>
                                     <span class="negative">{{ stats.losing_trades }}</span>
                                 </div>
-                                <div class="grade-stat-row">
-                                    <span class="grade-stat-label">胜率</span>
-                                    <span>{{ stats.win_rate.toFixed(1) }}%</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="grade-card">
-                            <div class="grade-card-header">
-                                <span class="grade-card-title">盈亏指标</span>
-                            </div>
-                            <div class="grade-card-stats">
-                                <div class="grade-stat-row">
-                                    <span class="grade-stat-label">盈亏比</span>
-                                    <span>{{ stats.profit_factor === Infinity ? '∞' : stats.profit_factor.toFixed(2) }}</span>
-                                </div>
                                 <div class="grade-stat-row">
                                     <span class="grade-stat-label">最佳交易</span>
                                     <span class="positive">{{ stats.best_trade.toFixed(2) }}%</span>
@@ -1368,28 +1432,9 @@
                         </div>
                         <div class="grade-card">
                             <div class="grade-card-header">
-                                <span class="grade-card-title">风险指标</span>
+                                <span class="grade-card-title">收益分析</span>
                             </div>
                             <div class="grade-card-stats">
-                                <div class="grade-stat-row">
-                                    <span class="grade-stat-label">最大回撤</span>
-                                    <span :class="stats.max_drawdown <= 0 ? 'negative' : 'positive'">
-                                        {{ stats.max_drawdown ? stats.max_drawdown.toFixed(2) : '0.00' }}%
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="grade-card">
-                            <div class="grade-card-header">
-                                <span class="grade-card-title">收益统计</span>
-                            </div>
-                            <div class="grade-card-stats">
-                                <div class="grade-stat-row">
-                                    <span class="grade-stat-label">累计收益率</span>
-                                    <span :class="totalReturn >= 0 ? 'positive' : 'negative'">
-                                        {{ totalReturn >= 0 ? '+' : '' }}{{ totalReturn.toFixed(2) }}%
-                                    </span>
-                                </div>
                                 <div class="grade-stat-row">
                                     <span class="grade-stat-label">盈利天数</span>
                                     <span class="positive">{{ profitableDays }}</span>