From 37444eb6f434f3b503459daf520c4ef8d5dd2b26 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Sun, 5 Apr 2026 01:26:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=97=A0=E6=B3=95=E6=AD=A3?=
 =?UTF-8?q?=E5=B8=B8=E6=B8=B2=E6=9F=93=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/style.css |  6 +++---
 public/index.html    | 14 ++++++++++++++
 public/js/app.js     | 37 ++++++++++++++++++++++++++++---------
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 3b5b103..15511a0 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -586,7 +586,7 @@ input:checked+.slider:before {
 /* ---- Charts Section ---- */
 .charts-section {
   display: grid;
-  grid-template-columns: 3fr 2fr;
+  grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-bottom: 24px;
 }
@@ -761,8 +761,8 @@ input:checked+.slider:before {
 }
 
 .globe-body {
-  flex: 1;
-  min-height: 280px;
+  height: 280px; /* Match chart-body height exactly */
+  padding: 12px 22px;
   position: relative;
   overflow: hidden;
   cursor: grab;
diff --git a/public/index.html b/public/index.html
index ee9f3fb..69e1641 100644
--- a/public/index.html
+++ b/public/index.html
@@ -248,6 +248,20 @@
             </h2>
           </div>
           <div class="globe-body" id="globeContainer"></div>
+          <div class="chart-footer">
+            <div class="traffic-stat">
+              <span class="traffic-label">全球节点总数</span>
+              <span class="traffic-value" id="globeTotalNodes">0</span>
+            </div>
+            <div class="traffic-stat">
+              <span class="traffic-label">覆盖地区/国家</span>
+              <span class="traffic-value" id="globeTotalRegions">0</span>
+            </div>
+            <div class="traffic-stat">
+              <span class="traffic-label">实时活跃状态</span>
+              <span class="traffic-value" style="color: var(--accent-emerald);">Active</span>
+            </div>
+          </div>
         </div>
       </section>
 
diff --git a/public/js/app.js b/public/js/app.js
index 8e9c457..4e2c0f1 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -78,7 +78,9 @@
     confirmNewPasswordInput: document.getElementById('confirmNewPassword'),
     btnChangePassword: document.getElementById('btnChangePassword'),
     changePasswordMessage: document.getElementById('changePasswordMessage'),
-    globeContainer: document.getElementById('globeContainer')
+    globeContainer: document.getElementById('globeContainer'),
+    globeTotalNodes: document.getElementById('globeTotalNodes'),
+    globeTotalRegions: document.getElementById('globeTotalRegions')
   };
 
   // ---- State ----
@@ -373,9 +375,14 @@
     }
 
     try {
+        const width = dom.globeContainer.clientWidth || 400;
+        const height = dom.globeContainer.clientHeight || 280;
+
         myGlobe = Globe()
           (dom.globeContainer)
-          .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
+          .width(width)
+          .height(height)
+          .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
           .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
           .backgroundColor('rgba(0,0,0,0)')
           .showAtmosphere(true)
@@ -396,20 +403,25 @@
             </div>
           `);
 
-        // Resizing
+        // Resizing with initial dimensions
+        myGlobe.width(dom.globeContainer.clientWidth).height(dom.globeContainer.clientHeight);
+
         const resizeObserver = new ResizeObserver(() => {
-            if (myGlobe) {
-                const width = dom.globeContainer.clientWidth;
-                const height = dom.globeContainer.clientHeight;
-                myGlobe.width(width).height(height);
+            if (myGlobe && dom.globeContainer.clientWidth > 0) {
+                myGlobe.width(dom.globeContainer.clientWidth).height(dom.globeContainer.clientHeight);
             }
         });
         resizeObserver.observe(dom.globeContainer);
 
         // Initial view
         myGlobe.controls().autoRotate = true;
-        myGlobe.controls().autoRotateSpeed = 0.5;
-        myGlobe.controls().enableZoom = false; // Disable zoom to maintain dashboard feel
+        myGlobe.controls().autoRotateSpeed = 1.2; // Slightly faster for visual appeal
+        myGlobe.controls().enableZoom = false; 
+        
+        // Initial data sync if available
+        if (allServersData.length > 0) {
+            updateGlobe(allServersData);
+        }
     } catch (err) {
         console.error('[Globe] Initialization failed:', err);
     }
@@ -435,6 +447,13 @@
 
     myGlobe.pointsData(geoData);
     
+    // Update footer stats
+    if (dom.globeTotalNodes) dom.globeTotalNodes.textContent = geoData.length;
+    if (dom.globeTotalRegions) {
+        const regions = new Set(geoData.map(d => d.country)).size;
+        dom.globeTotalRegions.textContent = regions;
+    }
+    
     // Also add arcs for "traffic flow" if we have multiple servers
     // For now, let's just show rings or pulses for active traffic
     myGlobe.ringsData(geoData.filter(d => (d.netRx + d.netTx) > 1024 * 1024)); // Pulse for servers > 1MB/s