update

frontend/paper-trading.html

@@ -18,13 +18,23 @@
             margin: 0 auto;
         }
 
+        /* 固定顶部区域 */
+        .sticky-header {
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            background: var(--bg-primary);
+            padding-bottom: 10px;
+        }
+
         .trading-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 30px;
-            padding-bottom: 20px;
+            margin-bottom: 20px;
+            padding: 10px 0 20px 0;
             border-bottom: 1px solid var(--border);
+            background: var(--bg-primary);
         }
 
         .trading-title {
@@ -57,7 +67,7 @@
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
             gap: 16px;
-            margin-bottom: 30px;
+            margin-bottom: 20px;
         }
 
         .stat-card {
@@ -453,6 +463,8 @@
     <div id="app">
         <div class="trading-page">
             <div class="trading-container">
+                <!-- 固定顶部区域 -->
+                <div class="sticky-header">
                     <!-- 头部 -->
                     <div class="trading-header">
                         <h1 class="trading-title">模拟交易 <span>Paper Trading</span></h1>
@@ -461,7 +473,7 @@
                                 <div class="monitor-dot" :class="{ running: monitorRunning }"></div>
                                 <span>{{ monitorRunning ? '监控中' : '未启动' }}</span>
                             </div>
-                        <button class="refresh-btn" @click="refreshData">刷新数据</button>
+                            <button class="refresh-btn" @click="manualRefresh">刷新数据</button>
                             <button class="reset-btn" @click="resetData">重置数据</button>
                         </div>
                     </div>
@@ -497,7 +509,7 @@
                     </div>
 
                     <!-- 实时价格 -->
-                <div v-if="Object.keys(latestPrices).length > 0" style="margin-bottom: 20px;">
+                    <div v-if="Object.keys(latestPrices).length > 0" style="margin-bottom: 15px;">
                         <div class="stat-label" style="margin-bottom: 8px;">实时价格</div>
                         <div class="price-list">
                             <div class="price-item" v-for="(price, symbol) in latestPrices" :key="symbol">
@@ -506,6 +518,7 @@
                             </div>
                         </div>
                     </div>
+                </div>
 
                 <!-- 标签页 -->
                 <div class="tabs">
@@ -714,7 +727,7 @@
             data() {
                 return {
                     activeTab: 'active',
-                    loading: false,
+                    loading: true,  // 只在首次加载时为 true
                     activeOrders: [],
                     historyOrders: [],
                     stats: {
@@ -731,14 +744,15 @@
                     },
                     monitorRunning: false,
                     latestPrices: {},
-                    refreshInterval: null
+                    refreshInterval: null,
+                    isFirstLoad: true
                 };
             },
             mounted() {
                 this.refreshData();
-                // 每3秒自动刷新（实时价格更新）
+                // 每3秒自动刷新（静默刷新，不显示 loading）
                 this.refreshInterval = setInterval(() => {
-                    this.refreshData();
+                    this.silentRefresh();
                 }, 3000);
             },
             beforeUnmount() {
@@ -747,8 +761,18 @@
                 }
             },
             methods: {
-                async refreshData() {
+                // 手动刷新（显示 loading）
+                async manualRefresh() {
                     this.loading = true;
+                    await this.refreshData();
+                },
+
+                // 静默刷新（不显示 loading）
+                async silentRefresh() {
+                    await this.refreshData();
+                },
+
+                async refreshData() {
                     try {
                         await Promise.all([
                             this.fetchActiveOrders(),
@@ -760,6 +784,7 @@
                         console.error('刷新数据失败:', e);
                     } finally {
                         this.loading = false;
+                        this.isFirstLoad = false;
                     }
                 },