From 1cc0cd5f8d4f38684534259c28343b7b8abc67b8 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Fri, 26 Jun 2026 01:41:35 +0800
Subject: [PATCH] Flatten records visuals and show stats summary in one row.

Use transparent chart/table surfaces on records page; merge 14 stat metrics into a single compact card row.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 static/css/responsive.css | 37 +++++++++++++++++++++++++++++++++----
 static/js/equity_curve.js |  2 +-
 templates/base.html       | 26 +++++++++++++++-----------
 templates/records.html    |  2 +-
 templates/stats.html      | 38 +++++++++++++++++++++++++++++---------
 5 files changed, 79 insertions(+), 26 deletions(-)

diff --git a/static/css/responsive.css b/static/css/responsive.css
index f6cd56f..fc01c27 100644
--- a/static/css/responsive.css
+++ b/static/css/responsive.css
@@ -206,7 +206,9 @@ body {
     }
 
     .stat-grid-summary {
-        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
     }
 }
 
@@ -357,15 +359,39 @@ body {
     }
 
     .stat-grid,
-    .stat-grid-summary {
+    .stat-grid:not(.stat-grid-summary) {
         grid-template-columns: repeat(2, 1fr);
         gap: .65rem;
     }
 
+    .stat-grid-summary {
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+    }
+
+    .stat-grid-summary .stat-item {
+        flex: 0 0 auto;
+        min-width: 4.25rem;
+        padding: .35rem .15rem;
+    }
+
+    .stat-grid-summary .stat-item .label {
+        font-size: .58rem;
+    }
+
+    .stat-grid-summary .stat-item .value {
+        font-size: .72rem;
+    }
+
     .stat-item {
         padding: .75rem .5rem;
     }
 
+    .stat-grid-summary .stat-item {
+        padding: .35rem .15rem;
+    }
+
     .stat-item .value {
         font-size: 1.1rem;
     }
@@ -426,11 +452,14 @@ body {
 }
 
 @media (max-width: 479px) {
-    .stat-grid,
-    .stat-grid-summary {
+    .stat-grid:not(.stat-grid-summary) {
         grid-template-columns: 1fr 1fr;
     }
 
+    .stat-grid-summary .stat-item {
+        min-width: 3.75rem;
+    }
+
     .theme-switch-btn {
         padding: .35rem .55rem;
         font-size: .7rem;
diff --git a/static/js/equity_curve.js b/static/js/equity_curve.js
index 35e67cc..fcd5ee8 100644
--- a/static/js/equity_curve.js
+++ b/static/js/equity_curve.js
@@ -14,7 +14,7 @@
 
     function themeColors() {
         return {
-            bg: cssVar('--card-bg', '#0a0c16'),
+            bg: 'transparent',
             text: cssVar('--text-muted', '#7a82a0'),
             grid: cssVar('--table-border', 'rgba(76,194,255,.1)'),
             border: cssVar('--card-border', 'rgba(76,194,255,.22)'),
diff --git a/templates/base.html b/templates/base.html
index a1b4db0..d76944a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -430,10 +430,10 @@
             padding:.35rem .45rem;font-size:.78rem;border-radius:6px;width:100%;min-width:0;
         }
         .trade-table .cell-readonly{color:var(--text-primary)}
-        .records-equity-card .card-body{padding-top:0}
-        .records-equity-card #equity-curve-chart{background:transparent}
+        .records-equity-card .card-body{padding-top:0;background:transparent}
+        .records-equity-card #equity-curve-chart{background:transparent;border-radius:0}
         .records-trade-card{overflow:visible}
-        .records-trade-card .card-body{overflow:visible}
+        .records-trade-card .card-body{overflow:visible;background:transparent}
         .records-trade-card .trade-table-wrap{
             --rec-row-h:2.35rem;
             --rec-head-h:2.1rem;
@@ -446,22 +446,26 @@
             border-radius:0;
             background:transparent;
         }
+        .records-trade-card .trade-table th,
+        .records-trade-card .trade-table td{
+            background:transparent;
+        }
         .records-trade-card .trade-table thead th{
             position:sticky;
             top:0;
             z-index:2;
-            background:var(--card-bg);
+            background:transparent;
+            backdrop-filter:blur(12px);
+            -webkit-backdrop-filter:blur(12px);
             box-shadow:0 1px 0 var(--table-border);
         }
+        .records-trade-card .trade-table th:last-child,
+        .records-trade-card .trade-table td:last-child{
+            box-shadow:none;
+            background:transparent;
+        }
         .records-trade-card .trade-table thead th:last-child{
             z-index:5;
-            background:var(--card-bg);
-        }
-        .records-trade-card .trade-table tbody td{
-            background:var(--card-bg);
-        }
-        .records-trade-card .trade-table tbody td:last-child{
-            background:var(--card-bg);
         }
         .trade-actions{display:flex;gap:.35rem;flex-wrap:nowrap;align-items:center;min-width:230px;white-space:nowrap}
         .trade-actions a,.trade-actions button{flex-shrink:0;white-space:nowrap;font-size:.72rem;padding:.3rem .55rem;border-radius:6px;text-decoration:none;border:none;cursor:pointer;width:auto;min-width:0}
diff --git a/templates/records.html b/templates/records.html
index 929792e..f047a52 100644
--- a/templates/records.html
+++ b/templates/records.html
@@ -4,7 +4,7 @@
 <div class="card records-equity-card" style="margin-bottom:1.25rem">
     <h2>资金曲线</h2>
     <div class="card-body">
-        <div id="equity-curve-chart" style="width:100%;min-height:220px;border-radius:6px;overflow:hidden"></div>
+        <div id="equity-curve-chart" style="width:100%;min-height:220px;overflow:hidden"></div>
     </div>
 </div>
 
diff --git a/templates/stats.html b/templates/stats.html
index debcab1..80d5dc7 100644
--- a/templates/stats.html
+++ b/templates/stats.html
@@ -2,12 +2,12 @@
 {% block title %}统计分析 - 国内期货监控系统{% endblock %}
 {% block content %}
 
-<div class="stats-toolbar">
-    <span id="stats-updated" class="hint">正在加载统计…</span>
-    <button type="button" class="btn-secondary" id="stats-refresh-btn">重新计算</button>
-</div>
-
-<div class="stat-grid stat-grid-summary" id="stats-summary">
+<div class="card stats-summary-card">
+    <div class="stats-toolbar">
+        <span id="stats-updated" class="hint">正在加载统计…</span>
+        <button type="button" class="btn-secondary" id="stats-refresh-btn">重新计算</button>
+    </div>
+    <div class="stat-grid stat-grid-summary" id="stats-summary">
     <div class="stat-item"><div class="label">总交易次数</div><div class="value" data-k="total_trades">-</div></div>
     <div class="stat-item"><div class="label">胜率</div><div class="value" data-k="win_rate">-</div></div>
     <div class="stat-item"><div class="label">平均盈利</div><div class="value text-profit" data-k="avg_profit">-</div></div>
@@ -22,6 +22,7 @@
     <div class="stat-item"><div class="label">累计手续费</div><div class="value text-loss" data-k="total_fee">-</div></div>
     <div class="stat-item"><div class="label">情绪单数量</div><div class="value" data-k="emotion_count">-</div></div>
     <div class="stat-item"><div class="label">情绪单占比</div><div class="value" data-k="emotion_ratio">-</div></div>
+    </div>
 </div>
 
 <div class="card">
@@ -43,10 +44,29 @@
 </div>
 
 <style>
-.stats-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
-.stats-toolbar .btn-secondary{width:auto;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--input-border);background:var(--toggle-bg);color:var(--text-primary);cursor:pointer;font-size:.85rem}
+.stats-summary-card{margin-bottom:1.25rem}
+.stats-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem;flex-wrap:wrap}
+.stats-toolbar .btn-secondary{width:auto;padding:.45rem .85rem;border-radius:8px;border:1px solid var(--input-border);background:var(--toggle-bg);color:var(--text-primary);cursor:pointer;font-size:.78rem}
 .stats-toolbar .btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
-.stat-grid-summary{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
+.stat-grid-summary{
+    display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;
+    margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
+}
+.stat-grid-summary .stat-item{
+    flex:1 1 0;min-width:4.5rem;background:transparent;border:none;border-radius:0;
+    padding:.35rem .2rem;text-align:center;position:relative;overflow:visible;
+    border-right:1px solid var(--table-border);
+}
+.stat-grid-summary .stat-item:last-child{border-right:none}
+.stat-grid-summary .stat-item::before{display:none}
+.stat-grid-summary .stat-item:hover{transform:none;box-shadow:none}
+.stat-grid-summary .stat-item .label{
+    font-size:.62rem;line-height:1.25;color:var(--text-muted);white-space:nowrap;
+}
+.stat-grid-summary .stat-item .value{
+    font-size:.78rem;font-weight:600;color:var(--text-title);margin-top:.12rem;
+    font-variant-numeric:tabular-nums;white-space:nowrap;
+}
 .stats-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
 .stats-card-head h2{margin-bottom:0}
 .stats-view-field{width:auto;min-width:200px}