优化交互

2026-04-05 01:32:42 +08:00
parent bea8ed607e
commit 672ea11598
2 changed files with 96 additions and 76 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,8 @@
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
-  <script src="//unpkg.com/globe.gl"></script>
+  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
  <script>
    // Prevent theme flicker
    (function () {
@@ -244,7 +245,7 @@
                <circle cx="12" cy="12" r="10" />
                <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
              </svg>
-              全球节点分布
+              全球服务器分布 (3D Map)
            </h2>
          </div>
          <div class="globe-body" id="globeContainer"></div>
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -92,7 +92,7 @@
  let currentSourceFilter = 'all';
  let currentPage = 1;
  let pageSize = 20;
-  let myGlobe = null;
+  let myMap3D = null;

  // ---- Initialize ----
  function init() {
@@ -105,8 +105,8 @@
    // Network chart
    networkChart = new AreaChart(dom.networkCanvas);

-    // Initial globe
-    initGlobe();
+    // Initial map
+    initMap3D();

    // Event listeners
    dom.btnSettings.addEventListener('click', openSettings);
@@ -360,107 +360,126 @@
    }
  }

-  // ---- Global Globe ----
-  function initGlobe() {
+  // ---- Global 3D Map ----
+  async function initMap3D() {
    if (!dom.globeContainer) return;
    
-    if (typeof Globe !== 'function') {
-        console.warn('[Globe] Globe.gl library not loaded. 3D visualization will be disabled.');
-        dom.globeContainer.innerHTML = `
-            <div style="height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8rem; text-align: center; padding: 20px;">
-                Globe.gl 库加载失败<br>请检查网络连接或刷新页面
-            </div>
-        `;
+    if (typeof echarts === 'undefined') {
+        console.warn('[Map3D] ECharts library not loaded.');
+        dom.globeContainer.innerHTML = `<div class="chart-empty">地图库加载失败</div>`;
        return;
    }

    try {
-        const width = dom.globeContainer.clientWidth || 400;
-        const height = dom.globeContainer.clientHeight || 280;
+        // Fetch map data
+        const resp = await fetch('https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/json/world.json');
+        const worldJSON = await resp.json();
+        echarts.registerMap('world', worldJSON);

-        myGlobe = Globe()
-          (dom.globeContainer)
-          .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)
-          .atmosphereColor('#6366f1')
-          .atmosphereDaylightAlpha(0.1)
-          .pointsData([])
-          .pointColor(() => '#06b6d4')
-          .pointAltitude(0.05)
-          .pointRadius(0.8)
-          .pointsMerge(true)
-          .pointLabel(d => `
-            <div style="background: rgba(10, 14, 26, 0.9); padding: 8px 12px; border: 1px solid var(--accent-indigo); border-radius: 8px; backdrop-filter: blur(8px);">
-                <div style="font-weight: 700; color: #fff; margin-bottom: 4px;">${escapeHtml(d.job)}</div>
-                <div style="font-size: 0.75rem; color: var(--text-secondary);">${escapeHtml(d.city || '')}, ${escapeHtml(d.countryName || d.country || '')}</div>
-                <div style="font-size: 0.75rem; margin-top: 4px;">
-                    <span style="color: var(--accent-indigo);">BW:</span> ↓${formatBandwidth(d.netRx)} ↑${formatBandwidth(d.netTx)}
-                </div>
-            </div>
-          `);
-
-        // Resizing with initial dimensions
-        myGlobe.width(dom.globeContainer.clientWidth).height(dom.globeContainer.clientHeight);
-
-        const resizeObserver = new ResizeObserver(() => {
-            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 = 1.2; // Slightly faster for visual appeal
-        myGlobe.controls().enableZoom = false; 
+        myMap3D = echarts.init(dom.globeContainer);
+        
+        const option = {
+            backgroundColor: 'transparent',
+            tooltip: {
+                show: true,
+                trigger: 'item',
+                backgroundColor: 'rgba(10, 14, 26, 0.9)',
+                borderColor: 'var(--accent-indigo)',
+                textStyle: { color: '#fff', fontSize: 12 },
+                formatter: (params) => {
+                    const d = params.data;
+                    if (!d) return '';
+                    return `
+                        <div style="padding: 4px;">
+                            <div style="font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 4px; padding-bottom: 4px;">${escapeHtml(d.job)}</div>
+                            <div style="font-size: 0.75rem; color: var(--text-secondary);">${escapeHtml(d.city || '')}, ${escapeHtml(d.countryName || d.country || '')}</div>
+                            <div style="font-size: 0.75rem; margin-top: 4px;">
+                                <span style="color: var(--accent-cyan);">BW:</span> ↓${formatBandwidth(d.netRx)} ↑${formatBandwidth(d.netTx)}
+                            </div>
+                        </div>
+                    `;
+                }
+            },
+            geo3D: {
+                map: 'world',
+                shading: 'lambert',
+                environment: 'transparent',
+                light: {
+                    main: { intensity: 1.2, shadow: true, alpha: 45, beta: 45 },
+                    ambient: { intensity: 0.3 }
+                },
+                viewControl: {
+                    autoRotate: true,
+                    autoRotateSpeed: 5,
+                    distance: 80,
+                    alpha: 40,
+                    beta: 0
+                },
+                itemStyle: {
+                    color: '#1a1d2d',
+                    opacity: 1,
+                    borderWidth: 0.8,
+                    borderColor: '#2d334d'
+                },
+                emphasis: {
+                    itemStyle: { color: '#2d334d' }
+                },
+                regions: []
+            },
+            series: [{
+                type: 'scatter3D',
+                coordinateSystem: 'geo3D',
+                symbol: 'circle',
+                symbolSize: 8,
+                itemStyle: {
+                    color: '#06b6d4',
+                    opacity: 0.8,
+                    borderWidth: 0.5,
+                    borderColor: '#fff'
+                },
+                label: { show: false },
+                data: []
+            }]
+        };
+
+        myMap3D.setOption(option);
+
+        window.addEventListener('resize', () => myMap3D.resize());
        
-        // Initial data sync if available
        if (allServersData.length > 0) {
-            updateGlobe(allServersData);
+            updateMap3D(allServersData);
        }
    } catch (err) {
-        console.error('[Globe] Initialization failed:', err);
+        console.error('[Map3D] Initialization failed:', err);
    }
  }

-  function updateGlobe(servers) {
-    if (!myGlobe) return;
+  function updateMap3D(servers) {
+    if (!myMap3D) return;

-    // Filter servers with lat/lng
    const geoData = servers
        .filter(s => s.lat && s.lng)
        .map(s => ({
-            lat: s.lat,
-            lng: s.lng,
+            name: s.job,
+            value: [s.lng, s.lat, 2], // 2 is altitude
            job: s.job,
            city: s.city,
            country: s.country,
            countryName: s.countryName,
            netRx: s.netRx,
-            netTx: s.netTx,
-            size: Math.max(0.2, Math.min(1.5, (s.netRx + s.netTx) / 1024 / 1024 / 5)) // Scale by bandwidth (MB/s)
+            netTx: s.netTx
        }));

-    myGlobe.pointsData(geoData);
-    
+    myMap3D.setOption({
+        series: [{ data: 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
-    myGlobe.ringColor(() => '#6366f1');
-    myGlobe.ringMaxRadius(3);
-    myGlobe.ringPropagationSpeed(1);
-    myGlobe.ringRepeatPeriod(1000);
  }

  // ---- Update Dashboard ----
@@ -496,7 +515,7 @@
    renderFilteredServers();
    
    // Update globe
-    updateGlobe(data.servers || []);
+    updateMap3D(data.servers || []);

    // Flash animation
    if (previousMetrics) {