优化时间点

public/index.html

@@ -479,7 +479,7 @@
                   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>
+                      <label>探测用服务器</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>

public/js/chart.js

@@ -330,7 +330,7 @@ class MetricChart {
     this.data = { timestamps: [], values: [], series: null };
     this.unit = unit; // '%', 'B/s', etc.
     this.dpr = window.devicePixelRatio || 1;
-    this.padding = { top: 10, right: 10, bottom: 20, left: 60 };
+    this.padding = { top: 10, right: 10, bottom: 35, left: 60 };
     this.animProgress = 0;
 
     this.prevMaxVal = 0;
@@ -462,6 +462,20 @@ class MetricChart {
       ctx.fillText(label, p.left - 8, y + 3);
     }
 
+    // X-axis Timeline
+    ctx.fillStyle = '#5a6380';
+    ctx.font = '9px "JetBrains Mono", monospace';
+    ctx.textAlign = 'center';
+    const labelInterval = Math.max(1, Math.floor(len / 5));
+    for (let i = 0; i < len; i += labelInterval) {
+      const x = getX(i);
+      ctx.fillText(formatTime(timestamps[i]), x, h - 8);
+    }
+    // Always show last label if not already shown
+    if ((len - 1) % labelInterval !== 0) {
+      ctx.fillText(formatTime(timestamps[len - 1]), getX(len - 1), h - 8);
+    }
+
     if (series) {
       // Draw Stacked Area
       const modes = [