From d7d650c5f915b37899f87192684daaedfb700484 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Sun, 5 Apr 2026 22:39:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=B8=B2=E6=9F=93=E7=AE=97?=
 =?UTF-8?q?=E6=B3=95=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/style.css | 24 ++++++++++++++++--------
 public/js/app.js     |  8 ++++----
 public/js/chart.js   | 20 ++++++++++++--------
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 3fcd38c..c6d4dac 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -154,6 +154,8 @@ body {
   z-index: 0;
   pointer-events: none;
   animation: glowFloat 20s ease-in-out infinite;
+  will-change: transform, opacity;
+  transform: translateZ(0);
 }
 
 .bg-glow-1 {
@@ -188,19 +190,19 @@ body {
 
   0%,
   100% {
-    transform: translate(0, 0) scale(1);
+    transform: translate3d(0, 0, 0) scale(1);
   }
 
   25% {
-    transform: translate(30px, -30px) scale(1.05);
+    transform: translate3d(30px, -30px, 0) scale(1.05);
   }
 
   50% {
-    transform: translate(-20px, 20px) scale(0.95);
+    transform: translate3d(-20px, 20px, 0) scale(0.95);
   }
 
   75% {
-    transform: translate(25px, 15px) scale(1.02);
+    transform: translate3d(25px, 15px, 0) scale(1.02);
   }
 }
 
@@ -222,8 +224,8 @@ body {
   justify-content: space-between;
   padding: 0 28px;
   background: rgba(10, 14, 26, 0.85);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  backdrop-filter: blur(12px) saturate(150%);
+  -webkit-backdrop-filter: blur(12px) saturate(150%);
   border-bottom: 1px solid var(--border-color);
 }
 
@@ -278,6 +280,8 @@ body {
 
 .dot-pulse {
   animation: pulse 2s ease-in-out infinite;
+  will-change: opacity, box-shadow;
+  transform: translateZ(0);
 }
 
 @keyframes pulse {
@@ -451,7 +455,9 @@ input:checked+.slider:before {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transform: translateZ(0);
   transition: all 0.3s ease;
   overflow: hidden;
 }
@@ -618,7 +624,9 @@ input:checked+.slider:before {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transform: translateZ(0);
   overflow: hidden;
   transition: all 0.3s ease;
 }
diff --git a/public/js/app.js b/public/js/app.js
index 08a1f7d..6be2819 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -511,12 +511,12 @@
                 coordinateSystem: 'geo',
                 geoIndex: 0,
                 showEffectOn: 'render',
-                rippleEffect: { brushType: 'stroke', scale: 4, period: 4 },
-                symbolSize: 6,
+                rippleEffect: { brushType: 'stroke', scale: 3, period: 6 },
+                symbolSize: 5,
                 itemStyle: {
                     color: '#06b6d4',
-                    shadowBlur: 10,
-                    shadowColor: '#06b6d4'
+                    shadowBlur: 3,
+                    shadowColor: 'rgba(6, 182, 212, 0.5)'
                 },
                 data: []
             }]
diff --git a/public/js/chart.js b/public/js/chart.js
index 08d09bf..05ce6b0 100644
--- a/public/js/chart.js
+++ b/public/js/chart.js
@@ -234,7 +234,7 @@ class AreaChart {
   drawArea(ctx, values, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) {
     if (!values || values.length === 0) return;
 
-    const useSimple = len > 500;
+    const useSimple = len > 250;
 
     // Fill
     ctx.beginPath();
@@ -469,16 +469,20 @@ class MetricChart {
         });
 
     } else {
-        // Draw Single Line Path
+        const useSimple = len > 250;
         ctx.beginPath();
         ctx.moveTo(getX(0), getY(values[0]));
         for (let i = 1; i < len; i++) {
-            const prevX = getX(i - 1);
-            const currX = getX(i);
-            const prevY = getY(values[i - 1]);
-            const currY = getY(values[i]);
-            const midX = (prevX + currX) / 2;
-            ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
+            if (useSimple) {
+                ctx.lineTo(getX(i), getY(values[i]));
+            } else {
+                const prevX = getX(i - 1);
+                const currX = getX(i);
+                const prevY = getY(values[i - 1]);
+                const currY = getY(values[i]);
+                const midX = (prevX + currX) / 2;
+                ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
+            }
         }
         
         // Stroke