From 1f4bdb79709a4f70ef7e638348ba5a94dfe9be98 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Sat, 4 Apr 2026 21:56:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B995=E5=B8=A6=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html  |  5 +++--
 public/js/app.js   | 16 +++++++++++-----
 public/js/chart.js |  3 ++-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index 426d335..00f67ae 100644
--- a/public/index.html
+++ b/public/index.html
@@ -206,12 +206,13 @@
                 </svg>
                 网络流量趋势 (24h)
               </h2>
-              <span class="title-time" id="gaugesTime"></span>
             </div>
             <div class="chart-legend">
               <span class="legend-item"><span class="legend-dot legend-rx"></span>接收 (RX)</span>
               <span class="legend-item"><span class="legend-dot legend-tx"></span>发送 (TX)</span>
-              <span class="legend-item"><span class="legend-dot legend-p95"></span>95计费 (P95)</span>
+              <span class="legend-item" id="legendP95" style="cursor: pointer;" title="点击切换 P95 线显示/隐藏">
+                <span class="legend-dot legend-p95"></span>95计费 (P95)
+              </span>
             </div>
           </div>
           <div class="chart-body">
diff --git a/public/js/app.js b/public/js/app.js
index b75087c..4576c51 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -59,8 +59,8 @@
     closeLoginModal: document.getElementById('closeLoginModal'),
     loginForm: document.getElementById('loginForm'),
     loginError: document.getElementById('loginError'),
-    gaugesTime: document.getElementById('gaugesTime'),
-    footerTime: document.getElementById('footerTime')
+    footerTime: document.getElementById('footerTime'),
+    legendP95: document.getElementById('legendP95')
   };
 
   // ---- State ----
@@ -116,6 +116,15 @@
       }
     });
 
+    // P95 Toggle
+    if (dom.legendP95) {
+      dom.legendP95.addEventListener('click', () => {
+        networkChart.showP95 = !networkChart.showP95;
+        dom.legendP95.classList.toggle('disabled', !networkChart.showP95);
+        networkChart.draw();
+      });
+    }
+
     // Check auth status
     checkAuthStatus();
 
@@ -262,9 +271,6 @@
 
   function updateGaugesTime() {
     const clockStr = formatClock();
-    if (dom.gaugesTime) {
-      dom.gaugesTime.textContent = clockStr;
-    }
     if (dom.footerTime) {
       dom.footerTime.textContent = clockStr;
     }
diff --git a/public/js/chart.js b/public/js/chart.js
index 01f21de..bed1c19 100644
--- a/public/js/chart.js
+++ b/public/js/chart.js
@@ -9,6 +9,7 @@ class AreaChart {
     this.data = { timestamps: [], rx: [], tx: [] };
     this.animProgress = 0;
     this.animFrame = null;
+    this.showP95 = true; 
     this.dpr = window.devicePixelRatio || 1;
     this.padding = { top: 20, right: 16, bottom: 32, left: 56 };
 
@@ -187,7 +188,7 @@ class AreaChart {
       '#06b6d4', len);
 
     // Draw P95 line
-    if (this.p95 && this.animProgress === 1) {
+    if (this.showP95 && this.p95 && this.animProgress === 1) {
       const p95Y = getY(this.p95);
       // Only draw if within visible range
       if (p95Y >= p.top && p95Y <= p.top + chartH) {