From e91dcc8c028fbcf291235fbe783016789b9c61b3 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Sun, 5 Apr 2026 18:30:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/style.css | 2 +-
 public/js/app.js     | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 1c07166..7d104cf 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1288,7 +1288,7 @@ input:checked+.slider:before {
 
 .detail-info-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: var(--border-color);
   margin-top: 10px;
diff --git a/public/js/app.js b/public/js/app.js
index 2990574..a8d7712 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -950,10 +950,10 @@
                 <div class="chart-controls">
                     <div class="time-range-group">
                         <div class="time-range-selector">
-                            <button class="time-range-btn active" onclick="loadMetricHistory('${m.key}', '1h', event)">1h</button>
+                            <button class="time-range-btn ${m.key !== 'networkTrend' ? 'active' : ''}" onclick="loadMetricHistory('${m.key}', '1h', event)">1h</button>
                             <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '6h', event)">6h</button>
                             <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '12h', event)">12h</button>
-                            <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '24h', event)">24h</button>
+                            <button class="time-range-btn ${m.key === 'networkTrend' ? 'active' : ''}" onclick="loadMetricHistory('${m.key}', '24h', event)">24h</button>
                         </div>
                         <div class="custom-range-selector">
                             <input type="text" class="custom-range-input" id="custom-range-${m.key}" placeholder="相对范围 (如: 2h)" onkeydown="if(event.key==='Enter') loadCustomMetricHistory('${m.key}', event)">
@@ -1015,7 +1015,8 @@
     if (!wasActive) {
       el.classList.add('active');
       // Initial load
-      loadMetricHistory(metricKey, '1h');
+      const defaultRange = metricKey === 'networkTrend' ? '24h' : '1h';
+      loadMetricHistory(metricKey, defaultRange);
     }
   };