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

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

web/shared/hooks.ts

@@ -5,6 +5,8 @@ export interface QueryState<T> {
   data: T | undefined
   error: ApiError | Error | undefined
   loading: boolean
+  /** 正在加载，而且不是定时刷新引起的（第一次加载、换了条件）：用来显示进度条，定时刷新不打扰用户。 */
+  busy: boolean
   reload: () => void
 }
 
@@ -14,17 +16,23 @@ export function useQuery<T>(fetcher: () => Promise<T>, deps: unknown[], interval
   const [error, setError] = useState<ApiError | Error>()
   const [loading, setLoading] = useState(true)
   const [tick, setTick] = useState(0)
+  const [silent, setSilent] = useState(false)
+  const lastTick = useRef(0)
   const fetcherRef = useRef(fetcher)
   fetcherRef.current = fetcher
 
   useEffect(() => {
     let alive = true
+    // 只有 tick 变了（定时刷新、reload）才算静默刷新；条件变了是用户能感觉到的加载
+    setSilent(lastTick.current !== tick)
+    lastTick.current = tick
     setLoading(true)
     fetcherRef
       .current()
       .then((value) => {
         if (!alive) return
-        setData(value)
+        // 轮询取到一模一样的数据时保持原来的对象，依赖它的图表不会白白重建（那是闪烁的来源）
+        setData((previous) => (previous !== undefined && JSON.stringify(previous) === JSON.stringify(value) ? previous : value))
         setError(undefined)
       })
       .catch((e: unknown) => {
@@ -46,7 +54,7 @@ export function useQuery<T>(fetcher: () => Promise<T>, deps: unknown[], interval
   }, [intervalMs])
 
   const reload = useCallback(() => setTick((t) => t + 1), [])
-  return { data, error, loading, reload }
+  return { data, error, loading, busy: loading && !silent, reload }
 }
 
 export type Theme = 'light' | 'dark'