进一步优化算法引入Websocket

2026-04-05 22:45:23 +08:00
parent d7d650c5f9
commit 2a8cb32d47
6 changed files with 226 additions and 206 deletions
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -127,7 +127,9 @@ html {

 body {
  font-family: var(--font-sans);
-  background: var(--bg-primary);
+  background: radial-gradient(circle at 0% 0%, #1a1e2e 0%, #0a0e1a 45%),
+              radial-gradient(circle at 100% 100%, #151a2e 0%, #0a0e1a 45%);
+  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
@@ -146,65 +148,7 @@ body {
  pointer-events: none;
 }

-.bg-glow {
-  position: fixed;
-  border-radius: 50%;
-  filter: blur(120px);
-  opacity: 0.4;
-  z-index: 0;
-  pointer-events: none;
-  animation: glowFloat 20s ease-in-out infinite;
-  will-change: transform, opacity;
-  transform: translateZ(0);
-}
-
-.bg-glow-1 {
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
-  top: -200px;
-  left: -100px;
-  animation-delay: 0s;
-}
-
-.bg-glow-2 {
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, rgba(6, 182, 212, 0.12), transparent 70%);
-  bottom: -150px;
-  right: -100px;
-  animation-delay: -7s;
-}
-
-.bg-glow-3 {
-  width: 400px;
-  height: 400px;
-  background: radial-gradient(circle, rgba(168, 85, 247, 0.1), transparent 70%);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation-delay: -14s;
-}
-
-@keyframes glowFloat {
-
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-
-  25% {
-    transform: translate3d(30px, -30px, 0) scale(1.05);
-  }
-
-  50% {
-    transform: translate3d(-20px, 20px, 0) scale(0.95);
-  }
-
-  75% {
-    transform: translate3d(25px, 15px, 0) scale(1.02);
-  }
-}
+/* ---- Animated Background Classes Removed for Performance ---- */

 /* ---- App Container ---- */
 #app {
@@ -223,9 +167,7 @@ body {
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
-  background: rgba(10, 14, 26, 0.85);
-  backdrop-filter: blur(12px) saturate(150%);
-  -webkit-backdrop-filter: blur(12px) saturate(150%);
+  background: rgba(10, 14, 26, 0.95); /* More opaque, no filter */
  border-bottom: 1px solid var(--border-color);
 }

@@ -455,8 +397,9 @@ input:checked+.slider:before {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  /* backdrop-filter: blur(8px); */
+  /* -webkit-backdrop-filter: blur(8px); */
+  background: rgba(15, 22, 50, 0.9); /* More solid background for readability without blur */
  transform: translateZ(0);
  transition: all 0.3s ease;
  overflow: hidden;
@@ -624,8 +567,9 @@ input:checked+.slider:before {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  /* backdrop-filter: blur(8px); */
+  /* -webkit-backdrop-filter: blur(8px); */
+  background: rgba(15, 22, 50, 0.9); /* More solid background for readability without blur */
  transform: translateZ(0);
  overflow: hidden;
  transition: all 0.3s ease;
--- a/public/index.html
+++ b/public/index.html
@@ -38,11 +38,8 @@
 </head>

 <body>
-  <!-- Animated Background -->
+  <!-- Optimized Background -->
  <div class="bg-grid"></div>
-  <div class="bg-glow bg-glow-1"></div>
-  <div class="bg-glow bg-glow-2"></div>
-  <div class="bg-glow bg-glow-3"></div>

  <!-- App Container -->
  <div id="app">
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -305,10 +305,40 @@

    loadSiteSettings();

-    setInterval(fetchMetrics, REFRESH_INTERVAL);
+    // setInterval(fetchMetrics, REFRESH_INTERVAL); - Now using WebSockets
+    initWebSocket();
    setInterval(fetchNetworkHistory, NETWORK_HISTORY_INTERVAL);
  }

+  // ---- Real-time WebSocket ----
+  function initWebSocket() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}`;
+    const ws = new WebSocket(wsUrl);
+
+    ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        if (msg.type === 'overview') {
+          allServersData = msg.data.servers || [];
+          updateDashboard(msg.data);
+        }
+      } catch (err) {
+        console.error('WS Message Error:', err);
+      }
+    };
+
+    ws.onclose = () => {
+      console.log('WS connection closed. Reconnecting in 5s...');
+      setTimeout(initWebSocket, 5000);
+    };
+
+    ws.onerror = (err) => {
+      // Small silent error here to not alert the user constantly if server is down during maintenance
+      ws.close();
+    };
+  }
+
  // ---- Theme Switching ----
  function toggleTheme() {
    const theme = dom.themeToggle.checked ? 'light' : 'dark';
@@ -507,11 +537,9 @@
                }
            },
            series: [{
-                type: 'effectScatter',
+                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
-                showEffectOn: 'render',
-                rippleEffect: { brushType: 'stroke', scale: 3, period: 6 },
                symbolSize: 5,
                itemStyle: {
                    color: '#06b6d4',