From f5c2051226bcb5c84e913aaeb54cc374bed1bde0 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Sun, 15 Feb 2026 14:20:11 +0800
Subject: [PATCH] u

---
 frontend/paper-trading.html | 110 ++++++++++++++++++++++++++++++++++--
 1 file changed, 106 insertions(+), 4 deletions(-)
diff --git a/frontend/paper-trading.html b/frontend/paper-trading.html
index 86efb74..7fcf81a 100644
--- a/frontend/paper-trading.html
+++ b/frontend/paper-trading.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI 自动交易 - Tradus</title>
+    <title>Tradus Auto Trading | Based on AI Agent</title>
     <link rel="stylesheet" href="/static/css/style.css">
     <style>
         /* 覆盖全局 #app 样式 */
@@ -549,6 +549,104 @@
             font-size: 11px;
             opacity: 0.8;
         }
+
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .trading-page {
+                padding: 10px;
+            }
+
+            .trading-container {
+                min-width: auto;
+                max-width: 100%;
+            }
+
+            .trading-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 12px;
+            }
+
+            .trading-title {
+                font-size: 18px;
+            }
+
+            .trading-title span {
+                display: block;
+                font-size: 14px;
+            }
+
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 10px;
+            }
+
+            .stat-card {
+                padding: 12px;
+            }
+
+            .stat-value {
+                font-size: 18px;
+            }
+
+            .tabs {
+                overflow-x: auto;
+                -webkit-overflow-scrolling: touch;
+            }
+
+            .tab {
+                padding: 10px 16px;
+                font-size: 13px;
+                white-space: nowrap;
+            }
+
+            /* 表格横向滚动 */
+            .table-wrapper {
+                overflow-x: auto;
+                -webkit-overflow-scrolling: touch;
+            }
+
+            .orders-table {
+                min-width: 800px;
+            }
+
+            .orders-table th,
+            .orders-table td {
+                padding: 10px 12px;
+                font-size: 13px;
+            }
+
+            .position-summary {
+                flex-wrap: wrap;
+                gap: 16px;
+            }
+
+            .summary-item {
+                min-width: calc(50% - 8px);
+            }
+
+            .grade-stats {
+                grid-template-columns: 1fr;
+            }
+
+            .monitor-status span {
+                display: none;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .trading-title {
+                font-size: 16px;
+            }
+
+            .stat-value {
+                font-size: 16px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -559,7 +657,7 @@
                 <div class="sticky-header">
                     <!-- 头部 -->
                     <div class="trading-header">
-                        <h1 class="trading-title">AI 自动交易 <span>Auto Trading</span></h1>
+                        <h1 class="trading-title">AI 自动化交易 <span>| AI Agent Trading System</span></h1>
                         <div style="display: flex; align-items: center; gap: 12px;">
                             <div class="monitor-status">
                                 <div class="monitor-dot" :class="{ running: monitorRunning }"></div>
@@ -662,7 +760,8 @@
                         </svg>
                         <p>暂无活跃订单</p>
                     </div>
-                    <table v-else class="orders-table">
+                    <div v-else class="table-wrapper">
+                        <table class="orders-table">
                         <thead>
                             <tr>
                                 <th>订单ID</th>
@@ -729,6 +828,7 @@
                             </tr>
                         </tbody>
                     </table>
+                    </div>
                 </div>
 
                 <!-- 历史订单 -->
@@ -740,7 +840,8 @@
                         </svg>
                         <p>暂无历史订单</p>
                     </div>
-                    <table v-else class="orders-table">
+                    <div v-else class="table-wrapper">
+                        <table class="orders-table">
                         <thead>
                             <tr>
                                 <th>订单ID</th>
@@ -773,6 +874,7 @@
                             </tr>
                         </tbody>
                     </table>
+                    </div>
                 </div>
 
                 <!-- 详细统计 -->
