From b2f14528a901f9bd185ded531cdc00d043c6471d Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Mon, 6 Apr 2026 00:45:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9C=B0=E5=9B=BE=E6=B8=B2?=
 =?UTF-8?q?=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/index.html | 127 ++++++++++++++++++++++++++--------------------
 public/js/app.js  |  48 +++++++++++-------
 2 files changed, 100 insertions(+), 75 deletions(-)

diff --git a/public/index.html b/public/index.html
index 1423d67..461fb4e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -205,8 +205,10 @@
               </h2>
             </div>
             <div class="chart-legend">
-              <span class="legend-item" id="legendRx" style="cursor: pointer;" title="点击切换 接收 (RX) 显示/隐藏"><span class="legend-dot legend-rx"></span>接收 (RX)</span>
-              <span class="legend-item" id="legendTx" style="cursor: pointer;" title="点击切换 发送 (TX) 显示/隐藏"><span class="legend-dot legend-tx"></span>发送 (TX)</span>
+              <span class="legend-item" id="legendRx" style="cursor: pointer;" title="点击切换 接收 (RX) 显示/隐藏"><span
+                  class="legend-dot legend-rx"></span>接收 (RX)</span>
+              <span class="legend-item" id="legendTx" style="cursor: pointer;" title="点击切换 发送 (TX) 显示/隐藏"><span
+                  class="legend-dot legend-tx"></span>发送 (TX)</span>
               <span class="legend-item disabled" id="legendP95" style="cursor: pointer;" title="点击切换 P95 线显示/隐藏">
                 <span class="legend-dot legend-p95"></span>95计费 (<span id="p95LabelText">上行</span>)
               </span>
@@ -252,7 +254,8 @@
             </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;">
+                <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>
@@ -291,8 +294,8 @@
             </h2>
             <div class="chart-header-right">
               <div class="search-box">
-                <input type="search" id="serverSearchFilter" name="q-filter-server" placeholder="检索服务器名称..." autocomplete="one-time-code"
-                  spellcheck="false">
+                <input type="search" id="serverSearchFilter" name="q-filter-server" placeholder="检索服务器名称..."
+                  autocomplete="one-time-code" spellcheck="false">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                   stroke-linejoin="round" class="search-icon">
                   <circle cx="11" cy="11" r="8"></circle>
@@ -370,15 +373,16 @@
               <h3>添加数据源</h3>
               <div class="form-row">
                 <div class="form-group" style="flex: 0.8;">
-                   <label for="sourceType">类型</label>
-                   <select id="sourceType" style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); outline: none;">
-                      <option value="prometheus">Prometheus</option>
-                      <option value="blackbox">Blackbox Exporter</option>
-                   </select>
+                  <label for="sourceType">类型</label>
+                  <select id="sourceType"
+                    style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); outline: none;">
+                    <option value="prometheus">Prometheus</option>
+                    <option value="blackbox">Blackbox Exporter</option>
+                  </select>
                 </div>
                 <div class="form-group" style="flex: 1;">
-                   <label for="sourceName">名称</label>
-                   <input type="text" id="sourceName" placeholder="例：生产环境" autocomplete="off">
+                  <label for="sourceName">名称</label>
+                  <input type="text" id="sourceName" placeholder="例：生产环境" autocomplete="off">
                 </div>
                 <div class="form-group form-group-wide">
                   <label for="sourceUrl">URL 地址</label>
@@ -390,11 +394,14 @@
                   <label for="sourceDesc">描述 (可选)</label>
                   <input type="text" id="sourceDesc" placeholder="数据源描述" autocomplete="off">
                 </div>
-                <div class="form-group" id="serverSourceOption" style="display: flex; align-items: flex-end; padding-bottom: 8px;">
-                   <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap;">
-                      <input type="checkbox" id="isServerSource" checked style="width: 16px; height: 16px; accent-color: var(--accent-indigo);">
-                      <span>用于服务器展示</span>
-                   </label>
+                <div class="form-group" id="serverSourceOption"
+                  style="display: flex; align-items: flex-end; padding-bottom: 8px;">
+                  <label
+                    style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap;">
+                    <input type="checkbox" id="isServerSource" checked
+                      style="width: 16px; height: 16px; accent-color: var(--accent-indigo);">
+                    <span>用于服务器展示</span>
+                  </label>
                 </div>
                 <div class="form-actions">
                   <button class="btn btn-test" id="btnTest">测试连接</button>
@@ -454,46 +461,55 @@
                   <option value="both">统计上行+下行 (Sum)</option>
                 </select>
               </div>
-              <h3 style="margin-top: 30px; border-top: 1px solid var(--border-color); padding-top: 20px;">Blackbox 延迟连线管理</h3>
+              <h3 style="margin-top: 30px; border-top: 1px solid var(--border-color); padding-top: 20px;">Blackbox
+                延迟连线管理</h3>
               <div class="latency-routes-manager">
-                  <!-- Add Route Form -->
-                  <div class="add-route-mini-form" style="background: rgba(255,255,255,0.02); padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-color);">
-                      <div class="form-row">
-                          <div class="form-group" style="flex: 1.5;">
-                              <label>数据源 (Blackbox)</label>
-                              <select id="routeSourceSelect" style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);">
-                                  <option value="">-- 选择数据源 --</option>
-                              </select>
-                          </div>
-                          <div class="form-group">
-                              <label>起航点</label>
-                              <input type="text" id="routeSourceInput" placeholder="例：China">
-                          </div>
-                          <div class="form-group">
-                              <label>目的地</label>
-                              <input type="text" id="routeDestInput" placeholder="例：United States">
-                          </div>
-                      </div>
-                      <div class="form-row" style="margin-top: 10px; align-items: flex-end;">
-                          <div class="form-group" style="flex: 2;">
-                              <label>Blackbox 探测目标 (IP 或 域名)</label>
-                              <input type="text" id="routeTargetInput" placeholder="例：1.1.1.1 或 google.com">
-                          </div>
-                          <div class="form-actions" style="padding-bottom: 0; display: flex; gap: 8px;">
-                              <button class="btn btn-add" id="btnAddRoute" style="padding: 10px 24px;">添加线路</button>
-                              <button class="btn btn-test" id="btnCancelEditRoute" style="display: none; padding: 10px 15px; background: rgba(0,0,0,0.3);">取消</button>
-                          </div>
-                      </div>
+                <!-- Add Route Form -->
+                <div class="add-route-mini-form"
+                  style="background: rgba(255,255,255,0.02); padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-color);">
+                  <div class="form-row">
+                    <div class="form-group" style="flex: 1.5;">
+                      <label>数据源 (Blackbox)</label>
+                      <select id="routeSourceSelect"
+                        style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);">
+                        <option value="">-- 选择数据源 --</option>
+                      </select>
+                    </div>
+                    <div class="form-group">
+                      <label>起航点</label>
+                      <input type="text" id="routeSourceInput" placeholder="例：China">
+                    </div>
+                    <div class="form-group">
+                      <label>目的地</label>
+                      <input type="text" id="routeDestInput" placeholder="例：United States">
+                    </div>
                   </div>
-                  
-                  <!-- Routes List -->
-                  <div class="latency-routes-list-container">
-                      <h4 style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase;; margin-bottom: 10px;">已配置线路</h4>
-                      <div id="latencyRoutesList" class="latency-routes-list" style="display: flex; flex-direction: column; gap: 10px;">
-                          <!-- Routes will be injected here -->
-                          <div class="route-empty" style="text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.85rem; background: rgba(0,0,0,0.1); border-radius: 8px;">暂无线路</div>
-                      </div>
+                  <div class="form-row" style="margin-top: 10px; align-items: flex-end;">
+                    <div class="form-group" style="flex: 2;">
+                      <label>Blackbox 探测目标 (IP 或 域名)</label>
+                      <input type="text" id="routeTargetInput" placeholder="例：1.1.1.1 或 google.com">
+                    </div>
+                    <div class="form-actions" style="padding-bottom: 0; display: flex; gap: 8px;">
+                      <button class="btn btn-add" id="btnAddRoute" style="padding: 10px 24px;">添加线路</button>
+                      <button class="btn btn-test" id="btnCancelEditRoute"
+                        style="display: none; padding: 10px 15px; background: rgba(0,0,0,0.3);">取消</button>
+                    </div>
                   </div>
+                </div>
+
+                <!-- Routes List -->
+                <div class="latency-routes-list-container">
+                  <h4
+                    style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase;; margin-bottom: 10px;">
+                    已配置线路</h4>
+                  <div id="latencyRoutesList" class="latency-routes-list"
+                    style="display: flex; flex-direction: column; gap: 10px;">
+                    <!-- Routes will be injected here -->
+                    <div class="route-empty"
+                      style="text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.85rem; background: rgba(0,0,0,0.1); border-radius: 8px;">
+                      暂无线路</div>
+                  </div>
+                </div>
               </div>
               <div class="form-actions" style="margin-top: 25px; display: flex; justify-content: flex-end;">
                 <button class="btn btn-add" id="btnSaveSiteSettings">保存基础设置</button>
@@ -547,8 +563,7 @@
             <!-- Metric Items are injected here -->
             <div class="detail-metrics-list" id="detailMetricsList"></div>
 
-            <div class="detail-partitions-container metric-item" id="detailPartitionsContainer"
-              style="display: none;">
+            <div class="detail-partitions-container metric-item" id="detailPartitionsContainer" style="display: none;">
               <div class="metric-item-header" id="partitionHeader">
                 <div class="metric-label-group">
                   <span class="metric-label">磁盘分区详情 (已挂载)</span>
diff --git a/public/js/app.js b/public/js/app.js
index 2cfafa6..996cc32 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -569,23 +569,32 @@
         const resp = await fetch('https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/json/world.json');
         const worldJSON = await resp.json();
         
-        // Transform to Pacific-centered: shift longitudes < -20 to 340-360 range
-        // This puts America on the right of Asia
+        // Transform to Pacific-centered correctly
+        const transformCoords = (coords) => {
+            if (!Array.isArray(coords)) return;
+            if (typeof coords[0] === 'number') return; // Point
+            if (typeof coords[0][0] === 'number') { // Ring
+                // Calculate average to decide if we should shift the whole ring
+                let sum = 0;
+                coords.forEach(pt => sum += pt[0]);
+                let avg = sum / coords.length;
+                if (avg < -20) {
+                    coords.forEach(pt => pt[0] += 360);
+                }
+                // Fix internal wrap-around jumps to keep polygons contiguous
+                for (let i = 1; i < coords.length; i++) {
+                    let prev = coords[i - 1][0];
+                    while (coords[i][0] - prev > 180) coords[i][0] -= 360;
+                    while (coords[i][0] - prev < -180) coords[i][0] += 360;
+                }
+            } else {
+                coords.forEach(transformCoords);
+            }
+        };
+
         worldJSON.features.forEach(feature => {
-            if (feature.geometry.type === 'Polygon') {
-                feature.geometry.coordinates.forEach(ring => {
-                    ring.forEach(coords => {
-                        if (coords[0] < -20) coords[0] += 360;
-                    });
-                });
-            } else if (feature.geometry.type === 'MultiPolygon') {
-                feature.geometry.coordinates.forEach(polygon => {
-                    polygon.forEach(ring => {
-                        ring.forEach(coords => {
-                            if (coords[0] < -20) coords[0] += 360;
-                        });
-                    });
-                });
+            if (feature.geometry && feature.geometry.coordinates) {
+                transformCoords(feature.geometry.coordinates);
             }
         });
         
@@ -625,19 +634,20 @@
             geo: {
                 map: 'world',
                 roam: true,
-                center: [165, 20], // Centered in Pacific
+                center: [160, 25], // Centered slightly better for global view
                 zoom: 1.1,
+                aspectScale: 0.85, // Adjust aspect ratio to reduce vertical stretching in northern regions
                 emphasis: {
                     label: { show: false },
                     itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' }
                 },
                 itemStyle: {
-                    areaColor: isLight ? '#eef0f5' : '#1a1d2d',
+                    areaColor: isLight ? '#f4f6fa' : '#1a1d2e',
                     borderColor: isLight ? '#cbd5e1' : '#2d334d',
                     borderWidth: 1
                 },
                 select: {
-                    itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' }
+                    itemStyle: { areaColor: isLight ? '#f4f8ff' : '#2d334d' }
                 }
             },
             series: [{