feat(web): 线路详情页的时间轴、EWMA 平滑和加载进度

- 先选日期，再在连续 48 小时（或 24 小时）的丢包缩略图上拖选区；选区可以跨零点，
  点轴或刻度时离得近的端点贴过去，悬停预览会动的端点；没有数据的时段画成斜纹
- 刻度下方的时长快捷档：30 分钟、1 小时、3 小时、6 小时、12 小时、整天
- 指标卡片平铺，丢包等标明 UDP/TCP；图表按 UDP、TCP、评分分组
- 图表数据刷新时原地更新（不再整张重建），毫秒到 1 秒以上显示成秒
- EWMA 平滑开关（关/轻/中/重），原始数据以淡线垫底
- 数据加载时卡片上显示进度条和占位；useQuery 区分定时刷新和用户触发的加载
- 前端可以在页面里指定后端地址和令牌（配合后端 Monitor__CorsOrigins）

web/shared/theme/base.css

@@ -635,3 +635,68 @@ pre.code {
   margin-right: 6px;
   vertical-align: middle;
 }
+
+/* ── 组件上的加载进度条：贴着卡片的上边缘，流动的渐变 ── */
+.has-loading {
+  position: relative;
+  overflow: hidden;
+}
+
+.loading-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.loading-bar i {
+  display: block;
+  width: 40%;
+  height: 100%;
+  border-radius: 3px;
+  background: var(--chart-1);
+  animation: loading-bar-slide 1.1s ease-in-out infinite;
+}
+
+@keyframes loading-bar-slide {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(250%);
+  }
+}
+
+/* 还没有数据时的占位 */
+.skeleton {
+  position: relative;
+  overflow: hidden;
+  min-height: 72px;
+  border-radius: var(--r-card);
+  background: var(--app-card);
+}
+
+.skeleton.chart {
+  min-height: 260px;
+}
+
+.skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 16px 16px auto;
+  height: 12px;
+  width: 40%;
+  border-radius: 6px;
+  background: var(--app-card-inset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-bar i {
+    animation: none;
+    width: 100%;
+  }
+}