地图支持放大

public/css/style.css

@@ -1982,4 +1982,67 @@ input:checked+.slider:before {
   .stat-cards {
     grid-template-columns: 1fr;
   }
+}
+
+/* ---- Globe Card Expansion ---- */
+.globe-card.expanded {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 95vw !important;
+    height: 90vh !important;
+    z-index: 2000;
+    box-shadow: 0 0 100px rgba(0, 0, 0, 0.8), 0 0 0 100vh rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(15px);
+    animation: globeExpand 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    margin: 0 !important;
+}
+
+@keyframes globeExpand {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -45%) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+.globe-card.expanded .globe-body {
+    height: calc(100% - 130px) !important;
+}
+
+.chart-header-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.btn-icon {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-color);
+    color: var(--text-muted);
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    transition: all 0.2s;
+    outline: none;
+}
+
+.btn-icon:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+    border-color: var(--accent-indigo);
+}
+
+.btn-icon.active {
+    color: var(--accent-indigo);
+    background: rgba(99, 102, 241, 0.1);
+    border-color: var(--accent-indigo);
 }

public/index.html

@@ -250,6 +250,13 @@
               </svg>
               全球服务器分布
             </h2>
+            <div class="chart-header-actions">
+              <button class="btn-icon" id="btnExpandGlobe" title="放大显示">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px;">
+                  <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
+                </svg>
+              </button>
+            </div>
           </div>
           <div class="globe-body" id="globeContainer"></div>
           <div class="chart-footer">

public/js/app.js

@@ -100,7 +100,9 @@
     detailPartitionsContainer: document.getElementById('detailPartitionsContainer'),
     detailPartitionsList: document.getElementById('detailPartitionsList'),
     partitionSummary: document.getElementById('partitionSummary'),
-    partitionHeader: document.getElementById('partitionHeader')
+    partitionHeader: document.getElementById('partitionHeader'),
+    globeCard: document.getElementById('globeCard'),
+    btnExpandGlobe: document.getElementById('btnExpandGlobe')
   };
 
   // ---- State ----
@@ -177,12 +179,31 @@
       dom.btnChangePassword.addEventListener('click', saveChangePassword);
     }
 
+    // Globe expansion
+    if (dom.btnExpandGlobe) {
+      dom.btnExpandGlobe.addEventListener('click', () => {
+        dom.globeCard.classList.toggle('expanded');
+        dom.btnExpandGlobe.classList.toggle('active');
+        if (myMap2D) {
+          // Multiple resizes to handle animation frames
+          setTimeout(() => myMap2D.resize(), 50);
+          setTimeout(() => myMap2D.resize(), 150);
+          setTimeout(() => myMap2D.resize(), 400);
+        }
+      });
+    }
+
     // Keyboard shortcut
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
         closeSettings();
         closeLoginModal();
         closeServerDetail();
+        if (dom.globeCard && dom.globeCard.classList.contains('expanded')) {
+          dom.globeCard.classList.remove('expanded');
+          dom.btnExpandGlobe.classList.remove('active');
+          if (myMap2D) setTimeout(() => myMap2D.resize(), 100);
+        }
       }
     });