merge: bring line detail timeline into dev [CI SKIP]

.woodpecker/main-fastlane.yml

@@ -11,6 +11,8 @@ clone:
 when:
   - event: push
     branch: main
+  - event: pull_request_closed
+    branch: main
 
 concurrency: 1
 
@@ -19,6 +21,7 @@ steps:
     image: bash
     environment:
       NUGET_PACKAGES: /home/justme/.nuget/packages
+      GITEA_BASE: http://127.0.0.1:3100
       ZOT_REGISTRY: registry.oeo.one
       ZOT_USERNAME: justme
       ZOT_SECRET:

ci/main-fastlane.py

@@ -35,6 +35,9 @@ IGNORED_PARTS = {".git", ".release", "artifacts", "bin", "obj", "TestResults", "
 
 def read_changed_files() -> list[str]:
     raw = os.environ.get("CI_PIPELINE_FILES")
+    if os.environ.get("FASTLANE_FILES_FROM_PR_API") == "true":
+        value = json.loads(raw or "[]")
+        return [str(path).replace("\\", "/") for path in value]
     if raw:
         try:
             value = json.loads(raw)

ci/release-linux.sh

@@ -12,8 +12,9 @@ if [[ -n "$tag" ]]; then
   }
   version="${tag#v}"
 else
-  [[ "${CI_PIPELINE_EVENT:-}" == push && "${CI_COMMIT_BRANCH:-}" == main ]] || {
-    echo "untagged image builds are restricted to pushes on main" >&2
+  [[ ("${CI_PIPELINE_EVENT:-}" == push && "${CI_COMMIT_BRANCH:-}" == main) || \
+     ("${CI_PIPELINE_EVENT:-}" == pull_request_closed && "${CI_COMMIT_BRANCH:-}" == main && "${FASTLANE_MERGED_PR:-}" == true) ]] || {
+    echo "untagged image builds are restricted to main pushes and merged PRs" >&2
     exit 2
   }
   version=main

ci/release-main-images.sh

@@ -2,15 +2,6 @@
 # Build and push only the linux/amd64 OCI images affected by a main push.
 set -euo pipefail
 
-[[ "${CI_PIPELINE_EVENT:-}" == push && "${CI_COMMIT_BRANCH:-}" == main ]] || {
-  echo "fast-lane images can only be published from a push to main" >&2
-  exit 2
-}
-[[ -n "${ZOT_USERNAME:-}" && -n "${ZOT_SECRET:-}" ]] || {
-  echo "Zot credentials are required" >&2
-  exit 2
-}
-
 root="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
 registry="${ZOT_REGISTRY:-registry.oeo.one}"
 work="$root/.release/main-fastlane"
@@ -20,6 +11,38 @@ export HOME="$buildah_home"
 export BUILDAH_HOME="$buildah_home"
 export REGISTRY_AUTH_FILE="$work/zot-auth.json"
 
+if [[ "${CI_PIPELINE_EVENT:-}" == pull_request_closed ]]; then
+  [[ "${CI_COMMIT_TARGET_BRANCH:-}" == main && -n "${CI_COMMIT_PULL_REQUEST:-}" ]] || {
+    echo "ignoring closed pull request outside main" >&2
+    exit 0
+  }
+  gitea_base="${GITEA_BASE:-http://127.0.0.1:3100}"
+  api="$gitea_base/api/v1/repos/justme/MyMonitor"
+  pr_json="$(curl --fail-with-body --silent --show-error "$api/pulls/$CI_COMMIT_PULL_REQUEST")"
+  read -r merged base_branch <<< "$(python3 -c 'import json,sys; p=json.load(sys.stdin); print(str(p.get("merged", False)).lower(), p.get("base", {}).get("ref", ""))' <<< "$pr_json")"
+  if [[ "$merged" != true || "$base_branch" != main ]]; then
+    echo "pull request $CI_COMMIT_PULL_REQUEST was closed without merging to main; skipping images"
+    exit 0
+  fi
+
+  export FASTLANE_MERGED_PR=true
+  export FASTLANE_FILES_FROM_PR_API=true
+  export CI_PIPELINE_FILES="$(curl --fail-with-body --silent --show-error \
+    "$api/pulls/$CI_COMMIT_PULL_REQUEST/files?limit=500" \
+    | python3 -c 'import json,sys; print(json.dumps([name for item in json.load(sys.stdin) for name in (item["filename"], item.get("previous_filename")) if name]))')"
+  git fetch "$gitea_base/justme/MyMonitor.git" main
+  git checkout --detach FETCH_HEAD
+  export CI_COMMIT_BRANCH=main
+elif [[ "${CI_PIPELINE_EVENT:-}" != push || "${CI_COMMIT_BRANCH:-}" != main ]]; then
+  echo "fast-lane images can only be published from a main push or a merged PR into main" >&2
+  exit 2
+fi
+
+[[ -n "${ZOT_USERNAME:-}" && -n "${ZOT_SECRET:-}" ]] || {
+  echo "Zot credentials are required" >&2
+  exit 2
+}
+
 targets="$(python3 "$root/ci/main-fastlane.py")"
 if [[ -z "$targets" ]]; then
   echo "no runtime image changes detected; skipping container builds"

docs/deployment.md

@@ -38,7 +38,7 @@ Compose 将容器端口只绑定到宿主机 `127.0.0.1:8080`，适合由同机
 
 Woodpecker 在 `vMAJOR.MINOR.PATCH` tag 上，由 Windows runner 使用 AotAnywhere 并行构建 Agent/Probe 的 Linux glibc、Linux musl、macOS 和 Windows 产物。Agent 包还包含一次性注册工具 `fleet-enroll`。Linux 归档带有安装脚本和 systemd/OpenWrt 单元；Windows 产物为 `.zip`，Linux/macOS 产物为 `.tar.gz`。Linux glibc 的 Agent 与 Probe 二进制还会打包为 OCI 镜像，支持 `linux/amd64` 和 `linux/arm64`；musl、macOS、Windows 仍通过对应平台归档分发。所有平台产物和 OCI 镜像发布成功后，CI 会创建对应的 Gitea Release，并附上压缩包和 SHA-256 校验文件。macOS 产物目前未签名/公证。安装说明见 [`../backend/agent/README.md`](../backend/agent/README.md) 与 [`../backend/probe/README.md`](../backend/probe/README.md)。
 
-推送到 `main` 会触发 Linux/amd64 快车道。CI 根据变更文件所在项目及 `.csproj` 的传递引用，只构建受影响的 Backend、Agent 或 Probe 镜像；Agent 镜像也包含 `fleet-enroll`。例如只改 Probe 时只构建 Probe；改动 `Monitor.Protocol` 等被多个程序引用的库时，会构建所有受影响镜像。结果推送到对应镜像的 `main` 和 `main-amd64` 标签，不改写 release 版本和 `latest`。只改 Web、文档或部署配置时不会构建容器。完整多架构和跨平台构建仍由版本 tag 流水线负责。
+推送到 `main` 或 feature PR 合入 `main` 后会触发 Linux/amd64 快车道；关闭但未合入的 PR 会跳过。CI 根据变更文件所在项目及 `.csproj` 的传递引用，只构建受影响的 Backend、Agent 或 Probe 镜像；Agent 镜像也包含 `fleet-enroll`。例如只改 Probe 时只构建 Probe；改动 `Monitor.Protocol` 等被多个程序引用的库时，会构建所有受影响镜像。结果推送到对应镜像的 `main` 和 `main-amd64` 标签，不改写 release 版本和 `latest`。只改 Web、文档或部署配置时，流程会正常完成但不会构建容器。完整多架构和跨平台构建仍由版本 tag 流水线负责。
 
 Agent 和 Probe 镜像分别发布为 `registry.oeo.one/monitor/monitor-agent:<version>` 与 `registry.oeo.one/monitor/monitor-probe:<version>`，包含 amd64、arm64 多架构索引；也可指定 `:<version>-amd64` 或 `:<version>-arm64`。稳定版本同时更新 `latest`。镜像以非 root 用户（UID/GID 1654）运行，默认读取 `/etc/monitor/agent.json` 或 `/etc/monitor/probe.json`。运行容器时挂载对应配置目录；Probe 还会在该目录写入 `agents.json`，因此目录需可由 1654 用户写入。Agent、Probe 需使用宿主网络以保持节点端口和测量流量行为，并按需添加 `NET_RAW` 能力以执行 ICMP 测量：
 

web/README.md

@@ -23,5 +23,8 @@ npm run lint:css               # 颜色只能写在 shared/theme/tokens.css，
 
 约定：
 - 展示端能拿到的主机数据只有汇总的数字（CPU、内存、磁盘占用，网卡累计流量与瞬时网速，运行时长），**没有 CPU 型号、主机名、网卡名，也没有任何 IP**——后端的公开接口不返回它们，Agent 也根本不采集。展示端不显示 Probe 的版本和来源地址（这些只在管理端）。
-- 时间范围（15 分钟 … 7 天）只在线路详情页；总览是卡片，Agent 主机状态通过 SSE（`/api/public/live?topics=hosts`）实时更新，其余每 10 秒刷新。
+- 线路详情页：先选**哪一天**（前一天 / 后一天 / 日期选择，URL 的 `day=YYYY-MM-DD`），下面是这一天的丢包缩略图，上面有可拖动的选区（拖空白处新建、拖两边调长短、拖中间平移；URL 的 `at=起_止`，单位是从选中那天 0 点算起的分钟，可以是负数或超过 1440）。缩略图的**刻度**缺省是 48 小时（连续两天，选区可以跨零点，比如晚高峰 20:00 到凌晨 02:00），也可以切成 24 小时（只看一天；URL 的 `span=24`，选区跨零点时自动用 48 小时）。刻度下方是**选区长度**：30 分钟、1 小时、3 小时、6 小时、12 小时、整天，点一下把选区设成这么长——今天且选区到现在为止的，继续看「最近一段」（实时刷新），否则保持选区的起点往后取。刻度上每小时一根短线，48 小时刻度每 3 小时标一个钟点（24 小时刻度每 2 小时），零点标日期；鼠标移到缩略图上会标出那个位置的时间；点一下空白处或者刻度下面的钟点：离那里近的端点（左端或右端）贴过去，另一个端点不动。鼠标停在轴上或刻度上时，会动的那个端点变色，它到目标位置之间染色：扩大是橙色，收缩是灰色。往日默认是整天；「整天」是本地时区的自然日。时间的文字不写「次日」，跨零点两头都写日期（2026年10月5日 21:06 – 2026年10月6日 02:31）。
+- 图表上方有 **EWMA 平滑**开关（关、轻 α=0.3、中 α=0.1、重 α=0.03；URL 的 `ewma=low|mid|high`）：开了之后每条线画成指数加权移动平均，原始数据以淡线垫在后面，缺口处断开；只在浏览器里算，不影响汇总的指标数字。
+- 图表在数据刷新（轮询、实时）时原地更新，不重建；拖选区时只在本地更新，松手才取数。
+- 总览是卡片，Agent 主机状态通过 SSE（`/api/public/live?topics=hosts`）实时更新，其余每 10 秒刷新。
 - 生产部署时，把 `display/dist` 放在站点根、`admin/dist` 放在 `/admin/` 下（同源，Cookie 和 CSRF 才能工作）。

web/display/src/Minimap.tsx

@@ -0,0 +1,258 @@
+import { useEffect, useMemo, useRef, useState, type PointerEvent } from 'react'
+import { LoadingBar } from '@shared/ui'
+import { fmtSpan } from './ranges'
+
+const MIN = 60_000
+/** 选区最短 5 分钟。 */
+const MIN_LEN = 5
+const EDGE_PX = 9
+
+interface Props {
+  /** 时间轴的起点（毫秒）。 */
+  domainStart: number
+  /** 时间轴的长度（分钟）：1440 或 2880（连续 48 小时，选区可以跨零点）。 */
+  domainMin: number
+  t: number[]
+  /** 丢包（缩略图画它）。 */
+  values: (number | null)[]
+  fromMs: number
+  toMs: number
+  onSelect: (fromMs: number, toMs: number) => void
+  /** 缩略图的数据正在加载。 */
+  loading?: boolean
+}
+
+type Mode = 'l' | 'r' | 'move' | 'new'
+interface Drag {
+  mode: Mode
+  anchor: number
+  from: number
+  to: number
+  moved: boolean
+}
+
+const hourOf = (ms: number) => new Date(ms).getHours()
+const dateOf = (ms: number) => `${new Date(ms).getMonth() + 1}/${new Date(ms).getDate()}`
+const clockOf = (ms: number) => `${String(new Date(ms).getHours()).padStart(2, '0')}:${String(new Date(ms).getMinutes()).padStart(2, '0')}`
+
+/**
+ * 连续 48 小时的缩略图（丢包），上面有一块可拖动的选区：
+ * 拖空白处新建，拖两边调长短，拖中间整体平移；选区可以跨过零点（晚高峰常常是 20:00 到凌晨 02:00）。
+ * 点一下空白处或者刻度下面的钟点：离那里近的端点贴过去，另一个端点不动；鼠标移上去会标出这个位置的时间。
+ * 拖动过程中只在这里本地更新，松手才通知外面（外面再去取数），所以不会闪。
+ */
+export function Minimap({ domainStart, domainMin, t, values, fromMs, toMs, onSelect, loading = false }: Props) {
+  const box = useRef<HTMLDivElement>(null)
+  const drag = useRef<Drag | null>(null)
+  const latest = useRef<[number, number] | null>(null)
+  const [live, setLive] = useState<[number, number] | null>(null)
+  const [held, setHeld] = useState<[number, number] | null>(null)
+  const [hover, setHover] = useState<number | null>(null)
+
+  const propFrom = Math.round((fromMs - domainStart) / MIN)
+  const propTo = Math.round((toMs - domainStart) / MIN)
+  // 松手之后到外面的状态更新完成之前，选区停在松手的位置，不跳回去
+  useEffect(() => {
+    if (held && propFrom === held[0] && propTo === held[1]) setHeld(null)
+  }, [propFrom, propTo, held])
+  useEffect(() => {
+    if (!held) return
+    const id = window.setTimeout(() => setHeld(null), 4000)
+    return () => window.clearTimeout(id)
+  }, [held])
+
+  const shown = live ?? held ?? [propFrom, propTo]
+  const from = Math.max(0, shown[0])
+  const to = Math.min(domainMin, shown[1])
+
+  const path = useMemo(() => {
+    let max = 5
+    for (const v of values) if (v !== null && v !== undefined && v > max) max = v
+    const points: { x: number; v: number }[] = []
+    for (let i = 0; i < t.length; i++) {
+      const v = values[i]
+      const x = (t[i] - domainStart) / (domainMin * MIN)
+      if (v !== null && v !== undefined && x >= 0 && x <= 1) points.push({ x, v })
+    }
+    if (points.length < 2) return ''
+    const first = points[0].x * 1000
+    const last = points[points.length - 1].x * 1000
+    return `M${first.toFixed(1)},60 ` + points.map((p) => `L${(p.x * 1000).toFixed(1)},${(58 - (Math.min(p.v, max) / max) * 54).toFixed(1)}`).join(' ') + ` L${last.toFixed(1)},60 Z`
+  }, [t, values, domainStart, domainMin])
+
+  // 有数据的时间段：其余（还没有数据的更早时间、中间的缺口、还没到的未来）画成灰色斜纹
+  const covered = useMemo(() => {
+    const step = t.length > 1 ? t[1] - t[0] : 2 * MIN
+    const segments: { x: number; w: number }[] = []
+    let start = -1
+    let last = -1
+    const flush = () => {
+      if (start >= 0) segments.push({ x: ((start - domainStart) / (domainMin * MIN)) * 1000, w: Math.max(2, ((last + step - start) / (domainMin * MIN)) * 1000) })
+      start = -1
+    }
+    for (let i = 0; i < t.length; i++) {
+      if (values[i] === null || values[i] === undefined) continue
+      if (start >= 0 && t[i] - last > step * 2.5) flush()
+      if (start < 0) start = t[i]
+      last = t[i]
+    }
+    flush()
+    return segments
+  }, [t, values, domainStart, domainMin])
+
+  // 刻度：每小时一个小短线；24 小时刻度每 2 小时、48 小时刻度每 3 小时标一个钟点；零点标日期
+  const ticks = useMemo(() => {
+    const labelEvery = domainMin <= 1440 ? 2 : 3
+    const list: { hour: number; frac: number; label: string | null; midnight: boolean }[] = []
+    for (let h = 0; h <= domainMin / 60; h += 1) {
+      const ms = domainStart + h * 3_600_000
+      const hour = hourOf(ms)
+      const labelled = h % labelEvery === 0 || hour === 0
+      list.push({ hour: h, frac: h / (domainMin / 60), label: !labelled ? null : hour === 0 ? dateOf(ms) : `${hour}时`, midnight: hour === 0 })
+    }
+    return list
+  }, [domainStart, domainMin])
+
+  const minuteAt = (e: PointerEvent) => {
+    const rect = box.current!.getBoundingClientRect()
+    return Math.min(domainMin, Math.max(0, ((e.clientX - rect.left) / rect.width) * domainMin))
+  }
+  const clamp = (a: number, b: number): [number, number] => {
+    let lo = Math.round(Math.min(a, b))
+    let hi = Math.round(Math.max(a, b))
+    if (hi - lo < MIN_LEN) hi = Math.min(domainMin, lo + MIN_LEN)
+    if (hi - lo < MIN_LEN) lo = hi - MIN_LEN
+    return [Math.max(0, lo), Math.min(domainMin, hi)]
+  }
+
+  const down = (e: PointerEvent) => {
+    if (e.button !== 0) return
+    const rect = box.current!.getBoundingClientRect()
+    const pxPerMin = rect.width / domainMin
+    const at = minuteAt(e)
+    let mode: Mode = 'new'
+    if (Math.abs(at - from) * pxPerMin <= EDGE_PX) mode = 'l'
+    else if (Math.abs(at - to) * pxPerMin <= EDGE_PX) mode = 'r'
+    else if (at > from && at < to) mode = 'move'
+    drag.current = { mode, anchor: at, from, to, moved: false }
+    latest.current = null
+    e.currentTarget.setPointerCapture(e.pointerId)
+    e.preventDefault()
+  }
+  const move = (e: PointerEvent) => {
+    const d = drag.current
+    if (!d) return
+    const at = minuteAt(e)
+    setHover(null)
+    if (!d.moved && Math.abs(at - d.anchor) * (box.current!.getBoundingClientRect().width / domainMin) < 3) return
+    d.moved = true
+    let next: [number, number]
+    if (d.mode === 'new') next = clamp(d.anchor, at)
+    else if (d.mode === 'l') next = clamp(at, d.to)
+    else if (d.mode === 'r') next = clamp(d.from, at)
+    else {
+      const len = d.to - d.from
+      const start = Math.min(domainMin - len, Math.max(0, d.from + (at - d.anchor)))
+      next = [Math.round(start), Math.round(start + len)]
+    }
+    latest.current = next
+    setLive(next)
+  }
+  const up = () => {
+    const d = drag.current
+    const result = latest.current
+    drag.current = null
+    latest.current = null
+    setLive(null)
+    if (d?.moved && result && (result[0] !== d.from || result[1] !== d.to)) {
+      setHeld(result)
+      onSelect(domainStart + result[0] * MIN, domainStart + result[1] * MIN)
+    } else if (d && !d.moved && (d.mode === 'new' || d.mode === 'move')) {
+      // 只是点了一下：离点的位置近的那个端点贴过去，另一个端点不动
+      snapTo(d.anchor, d.from, d.to)
+    }
+  }
+  /** 哪个端点离 `minute` 近，就把哪个端点移到那里（点在选区外面也一样），另一端不动。 */
+  const predict = (minute: number, a = from, b = to): { next: [number, number]; side: 'l' | 'r' } => {
+    const at = Math.round(minute)
+    return Math.abs(at - a) <= Math.abs(at - b) ? { next: clamp(at, b), side: 'l' } : { next: clamp(a, at), side: 'r' }
+  }
+  const snapTo = (minute: number, a = from, b = to) => {
+    const { next } = predict(minute, a, b)
+    if (next[0] === a && next[1] === b) return
+    setHeld(next)
+    onSelect(domainStart + next[0] * MIN, domainStart + next[1] * MIN)
+  }
+  // 点下去会动的是哪个端点：从那个端点到目标位置之间染色（扩大是一种颜色，收缩是另一种），那个端点也变色
+  const target = hover !== null && !live && !drag.current ? predict(hover) : null
+  const sweep = target
+    ? target.side === 'l'
+      ? { lo: Math.min(from, target.next[0]), hi: Math.max(from, target.next[0]), grow: target.next[0] < from, changed: target.next[0] !== from }
+      : { lo: Math.min(to, target.next[1]), hi: Math.max(to, target.next[1]), grow: target.next[1] > to, changed: target.next[1] !== to }
+    : null
+  const jumpTo = (tickHour: number) => snapTo(tickHour * 60)
+  const hoverMove = (e: PointerEvent) => {
+    if (drag.current) return
+    setHover(minuteAt(e))
+  }
+
+  const length = to - from
+
+  return (
+    <div className="minimap">
+      <div ref={box} className="track" onPointerDown={down} onPointerMove={(e) => { move(e); hoverMove(e) }} onPointerLeave={() => setHover(null)} onPointerUp={up} onPointerCancel={up} role="slider" aria-label="拖动选择时间段" aria-valuemin={0} aria-valuemax={domainMin} aria-valuenow={from} tabIndex={0}>
+        <LoadingBar active={loading} />
+        <svg viewBox="0 0 1000 60" preserveAspectRatio="none" aria-hidden="true">
+          {covered.map((c) => (
+            <rect key={c.x} className="has" x={c.x} y="0" width={c.w} height="60" />
+          ))}
+          <path d={path} />
+        </svg>
+        {ticks
+          .filter((x) => x.midnight)
+          .map((x) => (
+            <div key={x.frac} className="midnight" style={{ left: `${x.frac * 100}%` }} />
+          ))}
+        {sweep?.changed ? <div className={`sweep ${sweep.grow ? 'grow' : 'cut'}`} style={{ left: `${(sweep.lo / domainMin) * 100}%`, width: `${((sweep.hi - sweep.lo) / domainMin) * 100}%` }} /> : null}
+        <div className="sel" style={{ left: `${(from / domainMin) * 100}%`, width: `${(length / domainMin) * 100}%` }}>
+          <i className={`h l ${sweep?.changed && target?.side === 'l' ? `will ${sweep.grow ? 'grow' : 'cut'}` : ''}`} />
+          <i className={`h r ${sweep?.changed && target?.side === 'r' ? `will ${sweep.grow ? 'grow' : 'cut'}` : ''}`} />
+        </div>
+        {hover !== null && !live ? (
+          <>
+            <div className="guide" style={{ left: `${(hover / domainMin) * 100}%` }} />
+            <div className="guide-label num" style={{ left: `${Math.min(88, Math.max(0, (hover / domainMin) * 100 - 6))}%` }}>
+              {dateOf(domainStart + hover * MIN)} {clockOf(domainStart + hover * MIN)}
+            </div>
+          </>
+        ) : null}
+        <div className="ticks">
+          {ticks.map((x, i) => (
+            <button
+              key={x.hour}
+              type="button"
+              className={`tick ${x.label ? '' : 'minor'} ${x.midnight ? 'date' : ''}`}
+              style={{ left: `${x.frac * 100}%`, transform: i === 0 ? 'none' : i === ticks.length - 1 ? 'translateX(-100%)' : undefined }}
+              onPointerDown={(e) => e.stopPropagation()}
+              onPointerMove={(e) => {
+                // 停在刻度上：按这个钟点预览（不是鼠标所在的像素位置）
+                e.stopPropagation()
+                if (x.hour * 60 < domainMin) setHover(x.hour * 60)
+              }}
+              onClick={() => jumpTo(x.hour)}
+              title={`离 ${clockOf(domainStart + x.hour * 3_600_000)} 近的端点移到这里`}
+              tabIndex={-1}
+              disabled={x.hour * 60 >= domainMin}
+            >
+              {x.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="readout num">
+        {fmtSpan(domainStart + from * MIN, domainStart + to * MIN)}
+        <span className="faint"> · {length >= 60 ? `${Math.floor(length / 60)} 小时${length % 60 ? ` ${length % 60} 分` : ''}` : `${length} 分钟`}</span>
+      </div>
+    </div>
+  )
+}

web/display/src/display.css

@@ -276,14 +276,28 @@
 
 .line-link {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
+  gap: 4px 8px;
+  min-width: 0;
   padding: 6px 10px;
   border-radius: var(--r-control);
   background: var(--app-card-inset);
   color: var(--app-ink);
 }
 
+.line-link > .muted {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.line-link > .scores {
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
 .line-link:hover {
   text-decoration: none;
   background: var(--app-card-hover);
@@ -407,6 +421,37 @@
   flex-direction: column;
 }
 
+.day-pick {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: var(--r-control);
+  background: var(--app-card-inset);
+  color: var(--app-ink);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.day-pick:hover {
+  background: var(--app-card-hover);
+}
+
+.day-pick input {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
 /* ── 对比：每个 Probe 的最佳线路 + 矩阵 ── */
 .winners {
   margin-top: 24px;
@@ -460,3 +505,255 @@
 .cell svg {
   color: var(--app-ok);
 }
+
+/* ── 线路详情：指标平铺成一格一格 ── */
+.tiles {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+}
+
+.tiles > .stat,
+.tiles > .tile {
+  padding: 14px 16px;
+  border-radius: var(--r-card);
+  background: var(--app-card);
+}
+
+.tiles > .tile {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  grid-column: 1 / -1;
+}
+
+.tiles > .tile .k {
+  font-size: 12px;
+  color: var(--app-ink-faint);
+}
+
+.tiles .stat .v {
+  font-size: 22px;
+}
+
+.tiles > .tile .scores {
+  justify-content: flex-start;
+}
+
+/* ── 一天的缩略图和可拖动的选区 ── */
+.minimap {
+  --pick: var(--chart-1);
+  margin-top: 12px;
+}
+
+.minimap .track {
+  position: relative;
+  height: 60px;
+  margin-bottom: 18px;
+  border-radius: var(--r-control);
+  /* 没有数据的地方：灰色斜纹 */
+  background: repeating-linear-gradient(135deg, var(--app-card-inset) 0 5px, var(--app-card-hover) 5px 10px);
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+}
+
+.minimap svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--r-control);
+  overflow: hidden;
+}
+
+.minimap svg path {
+  fill: var(--app-bad);
+  opacity: 0.55;
+}
+
+.minimap svg rect.has {
+  fill: var(--app-card);
+}
+
+.minimap .sel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border: 2px solid var(--pick);
+  border-radius: var(--r-control);
+  background: color-mix(in srgb, var(--pick) 16%, transparent);
+  cursor: grab;
+}
+
+.minimap .sel .h {
+  position: absolute;
+  top: 12px;
+  bottom: 12px;
+  width: 6px;
+  border-radius: 3px;
+  background: var(--pick);
+  cursor: ew-resize;
+}
+
+.minimap .sel .h.l {
+  left: -4px;
+}
+
+.minimap .sel .h.r {
+  right: -4px;
+}
+
+.minimap .ticks {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 18px;
+}
+
+.minimap .tick {
+  position: absolute;
+  top: 0;
+  min-width: 16px;
+  height: 18px;
+  padding: 7px 2px 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--app-ink-faint);
+  font: inherit;
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  transform: translateX(-50%);
+}
+
+/* 刻度线：每小时一根，标了钟点的更长 */
+.minimap .tick::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 1px;
+  height: 4px;
+  background: var(--app-ink-faint);
+  opacity: 0.6;
+}
+
+.minimap .tick.minor::before {
+  height: 3px;
+  opacity: 0.35;
+}
+
+.minimap .tick:not(.minor)::before {
+  height: 6px;
+}
+
+.minimap .tick:hover:not(:disabled) {
+  background: var(--app-card-hover);
+  color: var(--app-ink);
+}
+
+.minimap .tick:disabled {
+  cursor: default;
+}
+
+.minimap .tick.date {
+  font-weight: 600;
+  color: var(--app-ink-muted);
+}
+
+.minimap .guide {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--app-ink-muted);
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.minimap .guide-label {
+  position: absolute;
+  top: 4px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: var(--app-ink);
+  color: var(--app-card);
+  font-size: 11px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.minimap .readout {
+  font-size: 12px;
+  color: var(--app-ink-muted);
+}
+
+.day-pick {
+  user-select: none;
+}
+
+.minimap .midnight {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--app-ink-faint);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+
+/* ── 线路详情的图表：按 UDP、TCP、评分分组，宽图占满一行 ── */
+.chart-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chart-section h2 {
+  margin: 8px 4px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--app-ink-muted);
+}
+
+.chart-section .chart-card.wide {
+  grid-column: 1 / -1;
+}
+
+.minimap .loading-bar {
+  z-index: 2;
+  border-radius: var(--r-control) var(--r-control) 0 0;
+}
+
+/* 点下去会动的端点：它到目标位置之间染色（扩大 = 强调色，收缩 = 灰色），端点本身也变色 */
+.minimap .sweep {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.minimap .sweep.grow {
+  background: color-mix(in srgb, var(--chart-2) 32%, transparent);
+}
+
+.minimap .sweep.cut {
+  background: color-mix(in srgb, var(--app-ink) 18%, transparent);
+}
+
+.minimap .sel .h {
+  transition: background-color 0.12s ease;
+}
+
+.minimap .sel .h.will.grow {
+  background: var(--chart-2);
+}
+
+.minimap .sel .h.will.cut {
+  background: var(--app-ink-muted);
+}

web/display/src/pages/Compare.tsx

@@ -20,9 +20,9 @@ interface MetricInfo {
 const METRICS: MetricInfo[] = [
   { id: 'rtt.p50', label: '延迟 p50', unit: 'ms', better: 'lower' },
   { id: 'rtt.p95', label: '延迟 p95', unit: 'ms', better: 'lower' },
-  { id: 'loss.total', label: '丢包', unit: '%', better: 'lower' },
-  { id: 'loss.up', label: '上行丢包', unit: '%', better: 'lower' },
-  { id: 'loss.down', label: '下行丢包', unit: '%', better: 'lower' },
+  { id: 'loss.total', label: 'UDP 丢包', unit: '%', better: 'lower' },
+  { id: 'loss.up', label: 'UDP 上行丢包', unit: '%', better: 'lower' },
+  { id: 'loss.down', label: 'UDP 下行丢包', unit: '%', better: 'lower' },
   { id: 'jitter.up.p95', label: '上行抖动', unit: 'ms', better: 'lower' },
   { id: 'jitter.down.p95', label: '下行抖动', unit: 'ms', better: 'lower' },
   { id: 'tcp.rtt.p50', label: 'TCP RTT p50', unit: 'ms', better: 'lower' },

web/display/src/pages/Line.tsx

@@ -2,14 +2,18 @@ import { ChevronLeft } from 'lucide-react'
 import { useMemo } from 'react'
 import { Link, useParams, useSearchParams } from 'react-router-dom'
 import { api } from '@shared/api/client'
-import type { LineDto, SeriesDto, TestDto } from '@shared/api/types'
+import type { LineDto, TestDto } from '@shared/api/types'
 import { TimeChart, type ChartSeries } from '@shared/charts/TimeChart'
 import { fmtAgo, fmtMbps, fmtMs, fmtNum, fmtPct, fmtTime } from '@shared/format'
 import { fmtBytes, useHosts } from '../live'
 import { useQuery } from '@shared/hooks'
-import { Chip, Dot, Spinner, Stat } from '@shared/ui'
+import { Chip, Dot, LoadingBar, Segmented, Spinner, Stat } from '@shared/ui'
 import { PageError, ScoreChips } from '../lib'
-import { availablePresets, defaultPreset, monthsWithData, PRESETS, RangePicker, resolveRange, SLICES, type PresetValue, type RangeState, type SliceValue } from '../ranges'
+import { Minimap } from '../Minimap'
+import { readSpec, usePeriod, usePeriodSeries, writeSpec } from '../periods'
+import { dayBounds, dayKey, RangePicker, WINDOWS, type WindowValue } from '../ranges'
+
+const MIN = 60_000
 
 function tone(value: number | null | undefined, good: number, poor: number): 'ok' | 'warn' | 'bad' | '' {
   if (value === null || value === undefined) return ''
@@ -23,70 +27,215 @@ interface HostSeries {
   values: Record<string, (number | null)[]>
 }
 
+/** 指标卡片：好坏的分界（越低越好）和显示格式。 */
+const TILES: { label: string; key: string; fmt: (v: number | null | undefined) => string; good?: number; poor?: number; unit?: string }[] = [
+  { label: 'UDP 延迟 p50', key: 'rtt.p50', fmt: fmtMs },
+  { label: 'UDP 延迟 p95', key: 'rtt.p95', fmt: fmtMs },
+  { label: 'UDP 丢包', key: 'loss.total', fmt: fmtPct, good: 0.5, poor: 3 },
+  { label: 'UDP 上行丢包', key: 'loss.up', fmt: fmtPct, good: 0.5, poor: 3 },
+  { label: 'UDP 下行丢包', key: 'loss.down', fmt: fmtPct, good: 0.5, poor: 3 },
+  { label: 'UDP 最长连续丢包', key: 'loss.run_max', fmt: fmtNum, unit: '包' },
+  { label: 'UDP 上行抖动 p95', key: 'jitter.up.p95', fmt: fmtMs },
+  { label: 'UDP 下行抖动 p95', key: 'jitter.down.p95', fmt: fmtMs },
+  { label: 'TCP RTT p50', key: 'tcp.rtt.p50', fmt: fmtMs },
+  { label: 'TCP RTT p99', key: 'tcp.rtt.p99', fmt: fmtMs },
+  { label: 'TCP RTT 最大', key: 'tcp.rtt.max', fmt: fmtMs },
+  { label: 'TCP 重传率', key: 'tcp.retrans', fmt: fmtPct, good: 0.5, poor: 3 },
+]
+
+interface ChartDef {
+  id: string
+  title: string
+  unit: string
+  zero?: boolean
+  fill?: boolean
+  series: { key: string; label: string; color: string; dash?: number[] }[]
+  group: 'udp' | 'tcp' | 'score'
+  /** 占满一行。 */
+  wide?: boolean
+}
+
+const GROUPS = [
+  { id: 'udp', title: 'UDP（往返探测）' },
+  { id: 'tcp', title: 'TCP' },
+  { id: 'score', title: '评分' },
+] as const
+
+const CHARTS: ChartDef[] = [
+  { id: 'rtt', title: '延迟', group: 'udp', wide: true, unit: 'ms', series: [{ key: 'rtt.p50', label: 'p50', color: '--chart-1' }, { key: 'rtt.p95', label: 'p95', color: '--chart-2' }, { key: 'rtt.p99', label: 'p99', color: '--chart-3' }] },
+  { id: 'loss', title: '丢包', group: 'udp', unit: '%', series: [{ key: 'loss.up', label: '上行', color: '--chart-2' }, { key: 'loss.down', label: '下行', color: '--chart-3' }, { key: 'loss.total', label: '合计', color: '--chart-1', dash: [4, 3] }] },
+  { id: 'jitter', title: '抖动（p95）', group: 'udp', unit: 'ms', series: [{ key: 'jitter.up.p95', label: '上行', color: '--chart-2' }, { key: 'jitter.down.p95', label: '下行', color: '--chart-1' }] },
+  { id: 'tcp', title: '往返时延（RTT）', group: 'tcp', unit: 'ms', series: [{ key: 'tcp.rtt.p50', label: 'p50', color: '--chart-1' }, { key: 'tcp.rtt.p95', label: 'p95', color: '--chart-2' }, { key: 'tcp.rtt.max', label: '最大', color: '--chart-3' }] },
+  { id: 'retrans', title: '重传率', group: 'tcp', unit: '%', fill: true, series: [{ key: 'tcp.retrans', label: '重传率', color: '--chart-3' }] },
+  { id: 'score', title: '综合评分', group: 'score', wide: true, unit: '', series: [{ key: 'score.reality', label: 'REALITY', color: '--chart-1' }, { key: 'score.hy2', label: 'Hy2', color: '--chart-2' }, { key: 'score.mc', label: 'MC', color: '--chart-4' }, { key: 'score.base', label: '综合', color: '--chart-5', dash: [4, 3] }] },
+]
+
+/** EWMA 平滑的力度：系数越小越平滑（s = α·x + (1−α)·s）。 */
+const EWMA = [
+  { value: 'off', label: '关', alpha: 0 },
+  { value: 'low', label: '轻', alpha: 0.3 },
+  { value: 'mid', label: '中', alpha: 0.1 },
+  { value: 'high', label: '重', alpha: 0.03 },
+] as const
+type EwmaValue = (typeof EWMA)[number]['value']
+
+/** 指数加权移动平均；缺口（没有数据）处断开，缺口后重新开始，不会把缺口两边连在一起。 */
+function ewma(values: (number | null)[], alpha: number): (number | null)[] {
+  let state: number | null = null
+  return values.map((v) => {
+    if (v === null || v === undefined) {
+      state = null
+      return null
+    }
+    state = state === null ? v : alpha * v + (1 - alpha) * state
+    return state
+  })
+}
+
+/** 主机状态：实时数据（SSE）每隔几秒来一次，只重绘这一块，不影响上面的图表。 */
+function HostCard({ agentId, range }: { agentId: string | undefined; range: string | null }) {
+  const history = useQuery(
+    () => (agentId && range ? api.get<HostSeries>(`/api/public/agents/${agentId}/host`, { range }) : Promise.resolve(undefined)),
+    [agentId, range],
+    30_000,
+  )
+  const { hosts } = useHosts()
+  const host = agentId ? hosts.get(agentId)?.host : undefined
+  const data = history.data
+  const charts = useMemo(
+    () =>
+      data
+        ? {
+            usage: [
+              { label: 'CPU', values: data.values['cpu'] ?? [], color: '--chart-1' },
+              { label: '内存', values: data.values['mem'] ?? [], color: '--chart-2' },
+              { label: '磁盘', values: data.values['disk'] ?? [], color: '--chart-4' },
+            ],
+            speed: [
+              { label: '上行', values: data.values['tx_bps'] ?? [], color: '--chart-2' },
+              { label: '下行', values: data.values['rx_bps'] ?? [], color: '--chart-1' },
+            ],
+          }
+        : undefined,
+    [data],
+  )
+  if (!host && !data) return null
+  return (
+    <div className="card">
+      <div className="card-title">主机状态</div>
+      {host ? (
+        <div className="grid stats">
+          <Stat label="CPU" value={host.cpu_percent === null ? '—' : host.cpu_percent.toFixed(0)} unit="%" />
+          <Stat label="内存" value={host.mem_total ? ((100 * (host.mem_used ?? 0)) / host.mem_total).toFixed(0) : '—'} unit="%" />
+          <Stat label="磁盘" value={host.disk_total ? ((100 * (host.disk_used ?? 0)) / host.disk_total).toFixed(0) : '—'} unit="%" />
+          <Stat label="累计流量 ↑ / ↓" value={`${fmtBytes(host.net_tx_total)} / ${fmtBytes(host.net_rx_total)}`} />
+        </div>
+      ) : null}
+      {data && charts ? (
+        <div className="grid cols-2" style={{ marginTop: 16 }}>
+          <TimeChart t={data.t} unit="%" series={charts.usage} />
+          <TimeChart t={data.t} unit=" B/s" series={charts.speed} />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
 export function Line() {
   const { id = '' } = useParams()
   const [params, setParams] = useSearchParams()
 
   const line = useQuery(() => api.get<LineDto>(`/api/public/lines/${encodeURIComponent(id)}`), [id], 15_000)
+  const ready = Boolean(line.data)
   const sinceMs = line.data?.data_since ? Date.parse(line.data.data_since) : null
   const nowMs = useMemo(() => Date.now(), [line.data])
-  const spanMs = sinceMs === null ? null : nowMs - sinceMs
+  const todayStart = dayBounds(nowMs).start
 
-  // 时间范围：只提供有数据的档位；URL 里的值如果超出了现有的数据就退回到默认
-  const wanted = params.get('range')
-  const available = availablePresets(spanMs)
-  const preset: PresetValue = PRESETS.some((x) => x.value === wanted) && available.some((x) => x.value === wanted) ? (wanted as PresetValue) : defaultPreset(spanMs)
-  const sliceParam = params.get('slice')
-  const state: RangeState = {
-    preset,
-    month: params.get('month'),
-    slice: SLICES.some((x) => x.value === sliceParam) ? (sliceParam as SliceValue) : 'all',
-    page: Math.max(0, Number(params.get('page') ?? 0) || 0),
-  }
-  const months = useMemo(() => monthsWithData(sinceMs, nowMs), [sinceMs, nowMs])
-  const resolved = resolveRange(state, months, nowMs)
-  const rangeKey = JSON.stringify(resolved.query)
-  const setRange = (next: RangeState) => {
-    const q = new URLSearchParams()
-    if (next.month) {
-      q.set('month', next.month)
-      if (next.slice !== 'all') q.set('slice', next.slice)
-      if (next.page > 0) q.set('page', String(next.page))
-    } else {
-      q.set('range', next.preset)
-    }
+  const spec = readSpec(params)
+  const period = usePeriod(id, ready, sinceMs, nowMs, spec)
+  const series = usePeriodSeries(id, ready, period)
+
+  const update = (fn: (q: URLSearchParams) => void) => {
+    const q = new URLSearchParams(params)
+    fn(q)
     setParams(q, { replace: true })
   }
+  const dayParam = (dayStart: number) => (dayStart === todayStart ? null : dayKey(dayStart))
+  const changeDay = (next: { dayStart: number; window: WindowValue | null }) =>
+    update((q) => writeSpec(q, { ...readSpec(q), day: dayParam(next.dayStart), range: next.window, at: null }))
+  const selectRange = (fromMs: number, toMs: number) =>
+    update((q) => {
+      const a = Math.round((fromMs - period.dayStart) / MIN)
+      const b = Math.round((toMs - period.dayStart) / MIN)
+      writeSpec(q, { ...readSpec(q), day: dayParam(period.dayStart), range: null, at: `${a}_${b}` })
+    })
+  /** 点了一档时长。看的是最新的（今天、选区到现在）就继续看「最近一段」；否则保持选区的起点，往后取这么长。 */
+  const pickLength = (w: WindowValue) =>
+    update((q) => {
+      const base = { ...readSpec(q), day: dayParam(period.dayStart) }
+      const info = WINDOWS.find((x) => x.value === w)!
+      if (w === 'day' || (period.isToday && (period.live || period.toMs >= nowMs - 2 * MIN))) {
+        writeSpec(q, { ...base, range: w, at: null })
+        return
+      }
+      const start = Math.min(period.fromMs, nowMs - info.ms)
+      const a = Math.round((start - period.dayStart) / MIN)
+      writeSpec(q, { ...base, range: null, at: `${a}_${a + info.ms / MIN}` })
+    })
+  const setScale = (scale: 24 | 48) =>
+    update((q) => {
+      const current = readSpec(q)
+      // 换回 24 小时：跨零点的选区放不下了，回到默认
+      writeSpec(q, { ...current, span: scale === 24 ? '24' : null, at: scale === 24 && period.domainMin > 1440 ? null : current.at })
+    })
 
-  const series = useQuery(
-    () => (line.data ? api.get<SeriesDto>(`/api/public/lines/${encodeURIComponent(id)}/series`, { ...resolved.query, preset: 'udp,tcp,scores' }) : Promise.resolve(undefined)),
-    [id, rangeKey, Boolean(line.data)],
-    state.month ? undefined : 10_000,
-  )
   const agentId = line.data?.agent_id
-  const hostHistory = useQuery(
-    () => (agentId && !state.month ? api.get<HostSeries>(`/api/public/agents/${agentId}/host`, { range: resolved.hostRange }) : Promise.resolve(undefined)),
-    [agentId, resolved.hostRange, Boolean(state.month)],
-    30_000,
-  )
-  const { hosts } = useHosts()
-  const host = agentId ? hosts.get(agentId)?.host : undefined
   const lastTestId = line.data?.last_test?.id
   const test = useQuery(() => (lastTestId ? api.get<TestDto>(`/api/public/tests/${lastTestId}`) : Promise.resolve(undefined)), [lastTestId])
 
+  const smooth = EWMA.find((x) => x.value === params.get('ewma')) ?? EWMA[0]
   const s = series.data
-  const col = (key: string): (number | null)[] => s?.values[key] ?? []
   const m = s?.summary.metrics ?? {}
   const gaps = useMemo(() => (s?.gaps ?? []).map((g) => ({ from: Date.parse(g.from), to: Date.parse(g.to) })), [s])
-  const t = s?.t ?? []
 
-  const chart = (title: string, unit: string, list: ChartSeries[], zero = true) =>
-    s && list.some((x) => x.values.some((v) => v !== null)) ? (
-      <div className="card chart-card">
-        <h3>{title}</h3>
-        <TimeChart t={t} series={list} unit={unit} gaps={gaps} zero={zero} />
+  // 图表只在数据变化时更新；别的状态（加载中、实时推送）变化不会让它们闪
+  const charts = useMemo(
+    () =>
+      s
+        ? GROUPS.map((group) => {
+            const cards = CHARTS.filter((def) => def.group === group.id).map((def) => {
+              const raw = def.series.map((x) => ({ x, values: s.values[x.key] ?? [] }))
+              // 开了 EWMA：原始数据画成淡线垫在后面，平滑后的线画在上面
+              const list: ChartSeries[] =
+                smooth.alpha > 0
+                  ? [
+                      ...raw.map(({ x, values }) => ({ label: `${x.label}（原始）`, values, color: x.color, faint: true })),
+                      ...raw.map(({ x, values }) => ({ label: x.label, values: ewma(values, smooth.alpha), color: x.color, dash: x.dash, fill: def.fill })),
+                    ]
+                  : raw.map(({ x, values }) => ({ label: x.label, values, color: x.color, dash: x.dash, fill: def.fill }))
+              if (!list.some((x) => x.values.some((v) => v !== null))) return null
+              return { def, node: <TimeChart t={s.t} series={list} unit={def.unit} gaps={gaps} zero={def.zero !== false} height={def.wide ? 260 : 220} /> }
+            })
+            return { group, cards: cards.filter((c): c is NonNullable<typeof c> => c !== null) }
+          }).filter((g) => g.cards.length > 0)
+        : [],
+    [s, gaps, smooth.alpha],
+  )
+  const loadingNow = !ready || series.busy
+  const chartSections = charts.map(({ group, cards }) => (
+    <section className="chart-section" key={group.id}>
+      <h2>{group.title}</h2>
+      <div className="grid cols-2">
+        {cards.map(({ def, node }) => (
+          <div className={`card chart-card has-loading ${def.wide ? 'wide' : ''}`} key={def.id}>
+            <LoadingBar active={loadingNow} />
+            <h3>{def.title}</h3>
+            {node}
+          </div>
+        ))}
       </div>
-    ) : null
+    </section>
+  ))
 
   const result = test.data?.result
   const peak = result?.metrics?.['tcp.bulk.peak.max']
@@ -112,108 +261,91 @@ export function Line() {
             {line.data.labels.map((x) => (
               <Chip key={x}>{x}</Chip>
             ))}
+            {series.loading && !s ? <Spinner /> : null}
           </div>
         ) : null}
-        <div className="toolbar">
-          <RangePicker state={state} onChange={setRange} sinceMs={sinceMs} nowMs={nowMs} />
-          <span className="right row">
-            <span className="muted">{resolved.label}</span>
-            {series.loading && !s ? <Spinner /> : null}
-          </span>
+        <div style={{ marginTop: 16 }}>
+          <RangePicker
+            dayStart={period.dayStart}
+            fromMs={period.fromMs}
+            toMs={period.toMs}
+            onChange={changeDay}
+            onWindow={pickLength}
+            scale={period.domainMin > 1440 ? 48 : 24}
+            onScale={setScale}
+            sinceMs={sinceMs}
+            nowMs={nowMs}
+            spanMs={period.spanMs}
+          >
+            <Minimap
+              domainStart={period.domainStart}
+              domainMin={period.domainMin}
+              t={period.overview.t}
+              values={period.overview.loss}
+              fromMs={period.fromMs}
+              toMs={period.toMs}
+              loading={!ready || period.busy}
+              onSelect={selectRange}
+            />
+          </RangePicker>
         </div>
       </section>
 
       <PageError error={line.error ?? series.error} />
 
+      {!s && (loadingNow || !line.error) && !series.error ? (
+        // 还没有数据：先摆出占位，每块上面有进度条
+        <div className="stack" style={{ marginTop: 24 }}>
+          <div className="tiles">
+            {Array.from({ length: 12 }, (_, i) => (
+              <div className="skeleton has-loading" key={i}>
+                <LoadingBar active />
+              </div>
+            ))}
+          </div>
+          <div className="skeleton chart has-loading">
+            <LoadingBar active />
+          </div>
+          <div className="grid cols-2">
+            {[0, 1].map((i) => (
+              <div className="skeleton chart has-loading" key={i}>
+                <LoadingBar active />
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
       {s ? (
         <div className="stack" style={{ marginTop: 24 }}>
-          <div className="card">
-            <div className="row wrap" style={{ justifyContent: 'space-between', gap: 24 }}>
-              <div className="grid stats grow">
-                <Stat label="延迟 p50" value={fmtMs(m['rtt.p50'])} />
-                <Stat label="延迟 p95" value={fmtMs(m['rtt.p95'])} />
-                <Stat label="丢包" value={fmtPct(m['loss.total'])} tone={tone(m['loss.total'], 0.5, 3)} />
-                <Stat label="上行丢包" value={fmtPct(m['loss.up'])} tone={tone(m['loss.up'], 0.5, 3)} />
-                <Stat label="下行丢包" value={fmtPct(m['loss.down'])} tone={tone(m['loss.down'], 0.5, 3)} />
-                <Stat label="抖动（上 / 下）" value={`${fmtMs(m['jitter.up.p95'])} / ${fmtMs(m['jitter.down.p95'])}`} />
-              </div>
+          <div className="tiles">
+            <div className="tile scores-tile has-loading">
+              <LoadingBar active={loadingNow} />
+              <span className="k">评分</span>
               <ScoreChips metrics={m} />
             </div>
-            <hr className="divider" />
-            <div className="grid stats">
-              <Stat label="TCP RTT p50" value={fmtMs(m['tcp.rtt.p50'])} />
-              <Stat label="TCP RTT p99" value={fmtMs(m['tcp.rtt.p99'])} />
-              <Stat label="TCP RTT 最大" value={fmtMs(m['tcp.rtt.max'])} />
-              <Stat label="TCP 重传" value={fmtPct(m['tcp.retrans'])} tone={tone(m['tcp.retrans'], 0.5, 3)} />
-              <Stat label="最长连续丢包" value={fmtNum(m['loss.run_max'])} unit="包" />
-              <Stat label="样本数（UDP / TCP）" value={`${fmtNum(s.summary.samples['udp_echo'])} / ${fmtNum(s.summary.samples['tcp_echo'])}`} />
-            </div>
-            {s.summary.coverage < 0.95 ? <p className="faint" style={{ marginTop: 12 }}>这个时间段的数据覆盖率是 {(s.summary.coverage * 100).toFixed(0)}%，阴影部分是没有数据的时段。</p> : null}
+            {TILES.map((t) => (
+              <Stat key={t.key} label={t.label} value={t.fmt(m[t.key])} unit={t.unit} tone={t.good !== undefined ? tone(m[t.key], t.good, t.poor ?? Infinity) : ''} />
+            ))}
           </div>
+          <p className="faint">
+            样本数：UDP {fmtNum(s.summary.samples['udp_echo'])} · TCP {fmtNum(s.summary.samples['tcp_echo'])}
+          </p>
+          {s.summary.coverage < 0.95 ? <p className="faint">这个时间段的数据覆盖率是 {(s.summary.coverage * 100).toFixed(0)}%，阴影部分是没有数据的时段。</p> : null}
 
-          <div className="grid cols-2">
-            {chart('延迟（UDP 往返）', 'ms', [
-              { label: 'p50', values: col('rtt.p50'), color: '--chart-1' },
-              { label: 'p95', values: col('rtt.p95'), color: '--chart-2' },
-              { label: 'p99', values: col('rtt.p99'), color: '--chart-3' },
-            ])}
-            {chart('丢包', '%', [
-              { label: '上行', values: col('loss.up'), color: '--chart-2' },
-              { label: '下行', values: col('loss.down'), color: '--chart-3' },
-              { label: '合计', values: col('loss.total'), color: '--chart-1', dash: [4, 3] },
-            ])}
-            {chart('抖动（p95）', 'ms', [
-              { label: '上行', values: col('jitter.up.p95'), color: '--chart-2' },
-              { label: '下行', values: col('jitter.down.p95'), color: '--chart-1' },
-            ])}
-            {chart('TCP 往返', 'ms', [
-              { label: 'p50', values: col('tcp.rtt.p50'), color: '--chart-1' },
-              { label: 'p95', values: col('tcp.rtt.p95'), color: '--chart-2' },
-              { label: '最大', values: col('tcp.rtt.max'), color: '--chart-3' },
-            ])}
-            {chart('TCP 重传', '%', [{ label: '重传率', values: col('tcp.retrans'), color: '--chart-3', fill: true }])}
-            {chart('综合评分', '', [
-              { label: 'REALITY', values: col('score.reality'), color: '--chart-1' },
-              { label: 'Hy2', values: col('score.hy2'), color: '--chart-2' },
-              { label: 'MC', values: col('score.mc'), color: '--chart-4' },
-              { label: '综合', values: col('score.base'), color: '--chart-5', dash: [4, 3] },
-            ])}
+          <div className="row" style={{ justifyContent: 'flex-end', gap: 8 }}>
+            <span className="faint" title="指数加权移动平均：把线条磨平，看清趋势；原始数据以淡线垫在后面">
+              EWMA 平滑
+            </span>
+            <Segmented<EwmaValue>
+              options={EWMA.map((x) => ({ value: x.value, label: x.label }))}
+              value={smooth.value}
+              onChange={(v) => update((q) => (v === 'off' ? q.delete('ewma') : q.set('ewma', v)))}
+            />
           </div>
+          {chartSections}
 
-          {host || hostHistory.data ? (
-            <div className="card">
-              <div className="card-title">主机状态</div>
-              {host ? (
-                <div className="grid stats">
-                  <Stat label="CPU" value={host.cpu_percent === null ? '—' : host.cpu_percent.toFixed(0)} unit="%" />
-                  <Stat label="内存" value={host.mem_total ? ((100 * (host.mem_used ?? 0)) / host.mem_total).toFixed(0) : '—'} unit="%" />
-                  <Stat label="磁盘" value={host.disk_total ? ((100 * (host.disk_used ?? 0)) / host.disk_total).toFixed(0) : '—'} unit="%" />
-                  <Stat label="累计流量 ↑ / ↓" value={`${fmtBytes(host.net_tx_total)} / ${fmtBytes(host.net_rx_total)}`} />
-                </div>
-              ) : null}
-              {hostHistory.data ? (
-                <div className="grid cols-2" style={{ marginTop: 16 }}>
-                  <TimeChart
-                    t={hostHistory.data.t}
-                    unit="%"
-                    series={[
-                      { label: 'CPU', values: hostHistory.data.values['cpu'] ?? [], color: '--chart-1' },
-                      { label: '内存', values: hostHistory.data.values['mem'] ?? [], color: '--chart-2' },
-                      { label: '磁盘', values: hostHistory.data.values['disk'] ?? [], color: '--chart-4' },
-                    ]}
-                  />
-                  <TimeChart
-                    t={hostHistory.data.t}
-                    unit=" B/s"
-                    series={[
-                      { label: '上行', values: hostHistory.data.values['tx_bps'] ?? [], color: '--chart-2' },
-                      { label: '下行', values: hostHistory.data.values['rx_bps'] ?? [], color: '--chart-1' },
-                    ]}
-                  />
-                </div>
-              ) : null}
-            </div>
-          ) : null}
+          <HostCard agentId={agentId} range={period.hostRange} />
 
           {test.data && result ? (
             <div className="card">

web/display/src/periods.ts

@@ -0,0 +1,182 @@
+import { useMemo } from 'react'
+import { api } from '@shared/api/client'
+import type { SeriesDto } from '@shared/api/types'
+import { useQuery } from '@shared/hooks'
+import { availableWindows, dayBounds, dayKey, defaultWindow, fmtDayLabel, fmtSpan, isWindow, parseDay, WINDOWS, type WindowValue } from './ranges'
+
+const MIN = 60_000
+const HOUR = 60 * MIN
+
+/** URL 里的一段时间：哪一天、快捷档位、或者拖出来的起止分钟（从当天 0 点算）。 */
+export interface PeriodSpec {
+  day: string | null
+  range: string | null
+  at: string | null
+  /** 缩略图的刻度：缺省连续 48 小时（可以跨零点）；`24` = 只看一天。 */
+  span: string | null
+}
+
+export function readSpec(params: URLSearchParams): PeriodSpec {
+  return { day: params.get('day'), range: params.get('range'), at: params.get('at'), span: params.get('span') }
+}
+
+export function writeSpec(params: URLSearchParams, spec: PeriodSpec) {
+  for (const [key, value] of [['day', spec.day], ['range', spec.range], ['at', spec.at], ['span', spec.span]] as const) {
+    if (value) params.set(key, value)
+    else params.delete(key)
+  }
+}
+
+/** `at=起_止`：从选中那天 0 点算起的分钟数，可以是负的（前一天晚上）或超过 1440（跨到后一天）；晚高峰常常跨零点。 */
+export function parseAt(at: string | null): [number, number] | null {
+  const m = /^(-?\d{1,5})_(-?\d{1,5})$/.exec(at ?? '')
+  if (!m) return null
+  const a = Number(m[1])
+  const b = Number(m[2])
+  return b > a && a >= -DOMAIN_MIN && b <= 2 * DOMAIN_MIN && b - a <= 2 * DOMAIN_MIN ? [a, b] : null
+}
+
+/** 缩略图的时间轴：连续的 48 小时，选区可以跨零点。 */
+export const DOMAIN_MIN = 1440
+export const DOMAIN_SPAN = 2 * DOMAIN_MIN
+
+export const fmtMinute = (minutes: number) => `${String(Math.floor(minutes / 60) % 24).padStart(2, '0')}:${String(minutes % 60).padStart(2, '0')}`
+
+const fmtClock = (ms: number) => new Date(ms).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false })
+
+export interface Period {
+  dayStart: number
+  isToday: boolean
+  /** 这一天里的数据概览（缩略图用）。 */
+  overview: { t: number[]; loss: (number | null)[]; rtt: (number | null)[] }
+  /** 缩略图时间轴的起点（毫秒）：往日是这一天 0 点起的 48 小时；今天是昨天 0 点起的 48 小时。 */
+  domainStart: number
+  /** 缩略图的刻度长度（分钟）：1440 或 2880。 */
+  domainMin: number
+  spanMs: number | null
+  dataFirst: number | null
+  available: WindowValue[]
+  /** 当前选中的快捷档位；拖出来的区间是 `null`。 */
+  win: WindowValue | null
+  /** 选中的区间（毫秒）：缩略图上的选区、也是对比时对齐的起点。 */
+  fromMs: number
+  toMs: number
+  query: Record<string, string>
+  hostRange: string | null
+  label: string
+  shortLabel: string
+  /** 缩略图的数据正在加载（不含定时刷新）。 */
+  busy: boolean
+  /** 今天、且是「最近一段」：会跟着最新数据刷新。 */
+  live: boolean
+}
+
+/**
+ * 把「哪一天 + 看多长或拖出的区间」变成这一段的取数参数和概览。
+ * 今天的快捷档位看最近一段（实时）；往日的快捷档位从这一天第一条记录所在的那一分钟起算。
+ */
+export function usePeriod(lineId: string, ready: boolean, sinceMs: number | null, nowMs: number, spec: PeriodSpec): Period {
+  const todayStart = dayBounds(nowMs).start
+  const firstDay = sinceMs === null ? todayStart : dayBounds(sinceMs).start
+  const dayStart = Math.min(Math.max(parseDay(spec.day) ?? todayStart, firstDay), todayStart)
+  const isToday = dayStart === todayStart
+  const bounds = dayBounds(dayStart)
+  const dayEnd = isToday ? nowMs : bounds.end
+
+  // 缩略图的数据：连续 48 小时（选区可以跨零点）；这一天自己的数据范围和档位从中截取
+  // 刻度：缺省连续 48 小时（选区可以跨零点）；用户选了 24 小时就只看这一天，除非选区本身跨了零点
+  const wantedAt = parseAt(spec.at)
+  const wide = spec.span !== '24' || (wantedAt !== null && (wantedAt[1] > DOMAIN_MIN || wantedAt[0] < 0))
+  const domainMin = wide ? DOMAIN_SPAN : DOMAIN_MIN
+  const before = (isToday && wide) || (wantedAt !== null && wantedAt[0] < 0) ? DOMAIN_MIN : 0
+  const domainStart = dayStart - before * MIN
+  const domainEnd = Math.min(domainStart + domainMin * MIN, nowMs)
+  const probe = useQuery(
+    () =>
+      ready
+        ? api.get<SeriesDto>(`/api/public/lines/${encodeURIComponent(lineId)}/series`, {
+            from: new Date(Math.max(domainStart, sinceMs === null ? domainStart : dayBounds(sinceMs).start)).toISOString(),
+            to: new Date(domainEnd).toISOString(),
+            step: wide ? '2m' : '1m',
+            preset: 'udp',
+            metrics: 'rtt.p50,loss.total',
+          })
+        : Promise.resolve(undefined),
+    [lineId, domainStart, domainMin, ready, isToday ? Math.floor(nowMs / MIN) : 0],
+  )
+  const overview = useMemo(() => {
+    const t = probe.data?.t ?? []
+    return { t, loss: probe.data?.values['loss.total'] ?? [], rtt: probe.data?.values['rtt.p50'] ?? [] }
+  }, [probe.data])
+
+  // 这一天自己的数据：第一条和最后一条记录
+  let firstIdx = -1
+  let lastIdx = -1
+  for (let i = 0; i < overview.t.length; i++) {
+    if (overview.t[i] < dayStart || overview.t[i] >= dayEnd) continue
+    if (overview.rtt[i] === null || overview.rtt[i] === undefined) continue
+    if (firstIdx < 0) firstIdx = i
+    lastIdx = i
+  }
+  const stepMs = overview.t.length > 1 ? overview.t[1] - overview.t[0] : MIN
+  const dataFirst = firstIdx >= 0 ? overview.t[firstIdx] : null
+  // 哪些长度可选：选区可以跨到前一天/后一天，所以看的是「从这里往前（今天）或往后（往日）一共有多少数据」，不是这一天自己有多少
+  const availSpan = isToday ? (sinceMs === null ? null : nowMs - sinceMs) : dataFirst === null ? null : nowMs - dataFirst
+  const available = availableWindows(availSpan)
+
+  const dayLabel = fmtDayLabel(dayStart, nowMs)
+  const at = wantedAt
+  const wanted = isWindow(spec.range) && available.includes(spec.range) ? spec.range : null
+  const win: WindowValue | null = at ? null : (wanted ?? defaultWindow(isToday, available))
+
+  let fromMs: number
+  let toMs: number
+  let query: Record<string, string>
+  let hostRange: string | null = null
+  let label: string
+  let live = false
+  if (at) {
+    fromMs = bounds.start + at[0] * MIN
+    toMs = Math.min(bounds.start + at[1] * MIN, nowMs)
+    if (toMs <= fromMs) toMs = fromMs + MIN
+    query = { from: new Date(fromMs).toISOString(), to: new Date(toMs).toISOString() }
+    label = fmtSpan(fromMs, toMs)
+  } else if (win === 'day') {
+    fromMs = bounds.start
+    toMs = dayEnd
+    query = { from: new Date(fromMs).toISOString(), to: new Date(toMs).toISOString() }
+    hostRange = isToday ? '24h' : null
+    label = `${dayLabel} 全天`
+  } else {
+    const info = WINDOWS.find((w) => w.value === win)!
+    if (isToday) {
+      // 今天：最近一段，以最新的数据为终点
+      const lastMs = lastIdx >= 0 ? overview.t[lastIdx] + stepMs : nowMs
+      toMs = Math.min(nowMs, lastMs)
+      fromMs = toMs - info.ms
+      query = { range: info.value, anchor: 'latest' }
+      hostRange = info.ms <= HOUR ? '1h' : info.value
+      label = `${dayLabel} 最近 ${info.label}`
+      live = true
+    } else {
+      // 往日：从这一天第一条记录所在的那一分钟起
+      fromMs = Math.floor((dataFirst ?? bounds.start) / MIN) * MIN
+      toMs = Math.min(fromMs + info.ms, bounds.end)
+      query = { from: new Date(fromMs).toISOString(), to: new Date(toMs).toISOString() }
+      label = `${dayLabel} ${fmtClock(fromMs)} 起 ${info.label}`
+    }
+  }
+  const shortLabel = fmtSpan(fromMs, toMs, true)
+  return { dayStart, isToday, domainStart, domainMin, overview, spanMs: availSpan, dataFirst, available, win, fromMs, toMs, query, hostRange, label, shortLabel, busy: probe.busy, live }
+}
+
+/** 这一段的序列；今天的「最近一段」会定时刷新。 */
+export function usePeriodSeries(lineId: string, ready: boolean, period: Period) {
+  return useQuery(
+    () => (ready ? api.get<SeriesDto>(`/api/public/lines/${encodeURIComponent(lineId)}/series`, { ...period.query, preset: 'udp,tcp,scores' }) : Promise.resolve(undefined)),
+    [lineId, JSON.stringify(period.query), ready],
+    period.isToday ? (period.win === 'day' ? 60_000 : 10_000) : undefined,
+  )
+}
+
+export { dayKey }

web/display/src/ranges.tsx

@@ -1,11 +1,12 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { useMemo } from 'react'
+import { useRef, type ReactNode } from 'react'
 import { Segmented } from '@shared/ui'
 
 const MIN = 60_000
-const DAY = 24 * 60 * MIN
+const HOUR = 60 * MIN
+const DAY = 24 * HOUR
 
-/** 线路详情页的时间范围：只提供这条线路“有数据”的档位。 */
+/** 对比页的时间范围：最近一段。 */
 export const PRESETS = [
   { value: '5m', label: '5 分钟', ms: 5 * MIN },
   { value: '15m', label: '15 分钟', ms: 15 * MIN },
@@ -19,172 +20,161 @@ export const PRESETS = [
 
 export type PresetValue = (typeof PRESETS)[number]['value']
 
-/** 进入某个月之后的切片：整月，或者从月初起按固定长度翻页。 */
-export const SLICES = [
-  { value: 'all', label: '整月', ms: 0 },
-  { value: '14d', label: '14 天', ms: 14 * DAY },
-  { value: '7d', label: '7 天', ms: 7 * DAY },
-  { value: '3d', label: '3 天', ms: 3 * DAY },
-  { value: '1d', label: '1 天', ms: DAY },
+/** 线路详情页：先选哪一天，再选这一天里看多长。`day` = 整个自然日。 */
+export const WINDOWS = [
+  { value: '30m', label: '30 分钟', ms: 30 * MIN },
+  { value: '1h', label: '1 小时', ms: HOUR },
+  { value: '3h', label: '3 小时', ms: 3 * HOUR },
+  { value: '6h', label: '6 小时', ms: 6 * HOUR },
+  { value: '12h', label: '12 小时', ms: 12 * HOUR },
+  { value: 'day', label: '整天', ms: DAY },
 ] as const
 
-export type SliceValue = (typeof SLICES)[number]['value']
+export type WindowValue = (typeof WINDOWS)[number]['value']
 
-/** 数据不足整档时允许 10% 的误差：29 分钟的数据算得上“30 分钟”。至少保留最小的一档。 */
-const TOLERANCE = 0.9
-
-export function availablePresets(spanMs: number | null) {
-  if (spanMs === null) return [PRESETS[0]]
-  const list = PRESETS.filter((p) => spanMs >= p.ms * TOLERANCE)
-  return list.length > 0 ? list : [PRESETS[0]]
-}
-
-/** 默认选“有数据的最大档”，但最长到 1 天（再长的范围图会很挤，用户可以自己点）。 */
-export function defaultPreset(spanMs: number | null): PresetValue {
-  const list = availablePresets(spanMs).filter((p) => p.ms <= DAY)
-  return list[list.length - 1]?.value ?? '5m'
-}
-
-export interface MonthInfo {
-  key: string // YYYY-MM
-  label: string
-  start: number
-  end: number // 不含
-}
+export const isWindow = (v: string | null): v is WindowValue => WINDOWS.some((w) => w.value === v)
 
 const pad = (n: number) => String(n).padStart(2, '0')
 
-export function monthOf(ms: number): MonthInfo {
+/** 本地时区的 YYYY-MM-DD。 */
+export function dayKey(ms: number): string {
   const d = new Date(ms)
-  const start = new Date(d.getFullYear(), d.getMonth(), 1).getTime()
-  const end = new Date(d.getFullYear(), d.getMonth() + 1, 1).getTime()
-  return { key: `${d.getFullYear()}-${pad(d.getMonth() + 1)}`, label: `${d.getFullYear()} 年 ${d.getMonth() + 1} 月`, start, end }
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
 }
 
-/** 从有数据的第一个月到当前月，新的在前。 */
-export function monthsWithData(sinceMs: number | null, nowMs: number): MonthInfo[] {
-  if (sinceMs === null) return []
-  const months: MonthInfo[] = []
-  let cursor = monthOf(sinceMs)
-  const last = monthOf(nowMs)
-  while (cursor.start <= last.start) {
-    months.push(cursor)
-    cursor = monthOf(cursor.end)
-  }
-  return months.reverse()
+export function parseDay(key: string | null): number | null {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(key ?? '')
+  if (!m) return null
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
+  return Number.isNaN(d.getTime()) ? null : d.getTime()
 }
 
-export interface RangeState {
-  /** 没有 month 就是“最近一段”。 */
-  preset: PresetValue
-  month: string | null
-  slice: SliceValue
-  page: number
-}
-
-export interface ResolvedRange {
-  query: { range?: string; from?: string; to?: string; anchor?: string }
-  /** 主机历史只支持 ≥ 1 小时的 range，这里给一个对应的值。 */
-  hostRange: string
-  label: string
-}
-
-const fmtDay = (ms: number) => {
+/** 本地时区这一天的 [起点, 终点)。 */
+export function dayBounds(ms: number): { start: number; end: number } {
   const d = new Date(ms)
-  return `${d.getMonth() + 1}/${d.getDate()}`
+  return { start: new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(), end: new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1).getTime() }
 }
 
-export function resolveRange(state: RangeState, months: MonthInfo[], nowMs: number): ResolvedRange {
-  if (!state.month) {
-    const hostRange = state.preset === '5m' || state.preset === '15m' || state.preset === '30m' ? '1h' : state.preset
-    return { query: { range: state.preset, anchor: 'latest' }, hostRange, label: PRESETS.find((p) => p.value === state.preset)?.label ?? state.preset }
-  }
-  const month = months.find((m) => m.key === state.month) ?? monthOf(nowMs)
-  const slice = SLICES.find((s) => s.value === state.slice) ?? SLICES[0]
-  const end = Math.min(month.end, nowMs)
-  let from = month.start
-  let to = end
-  if (slice.ms > 0) {
-    from = month.start + state.page * slice.ms
-    to = Math.min(from + slice.ms, end)
-  }
-  const spanDays = Math.max(1, Math.round((to - from) / DAY))
-  return {
-    query: { from: new Date(from).toISOString(), to: new Date(to).toISOString() },
-    hostRange: spanDays >= 30 ? '30d' : `${Math.max(1, spanDays)}d`,
-    label: slice.ms > 0 ? `${month.label} ${fmtDay(from)} – ${fmtDay(to - 1)}` : month.label,
-  }
+const clock = (ms: number) => `${pad(new Date(ms).getHours())}:${pad(new Date(ms).getMinutes())}`
+const fullDay = (ms: number) => `${new Date(ms).getFullYear()}年${new Date(ms).getMonth() + 1}月${new Date(ms).getDate()}日`
+const shortDay = (ms: number) => `${new Date(ms).getMonth() + 1}月${new Date(ms).getDate()}日`
+
+/** 一段时间的文字：同一天写一次日期（2026年10月5日 21:06–23:00），跨零点两头都写日期（2026年10月5日 21:06 – 2026年10月6日 02:31）。 */
+export function fmtSpan(fromMs: number, toMs: number, short = false): string {
+  const day = short ? shortDay : fullDay
+  const end = Math.max(fromMs, toMs - 1)
+  // 正好到次日 0 点的写成 24:00
+  return dayKey(fromMs) === dayKey(end) ? `${day(fromMs)} ${clock(fromMs)}–${clock(toMs) === '00:00' ? '24:00' : clock(toMs)}` : `${day(fromMs)} ${clock(fromMs)} – ${day(end)} ${clock(toMs)}`
 }
 
-/** 一个月里按固定长度能翻几页。 */
-function pagesIn(month: MonthInfo, sliceMs: number, nowMs: number, sinceMs: number | null): { first: number; last: number } {
-  const start = Math.max(month.start, sinceMs === null ? month.start : sinceMs - (sinceMs % DAY))
-  const end = Math.min(month.end, nowMs)
-  return { first: Math.max(0, Math.floor((start - month.start) / sliceMs)), last: Math.max(0, Math.ceil((end - month.start) / sliceMs) - 1) }
+export const fmtDayLabel = (startMs: number, nowMs: number) => {
+  const d = new Date(startMs)
+  const today = dayKey(startMs) === dayKey(nowMs)
+  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日${today ? '（今天）' : ''}`
+}
+
+/** 数据不足整档时允许 10% 的误差：29 分钟的数据算得上“30 分钟”。 */
+const TOLERANCE = 0.9
+
+/** 这一天里有多长的数据（毫秒），决定哪些档位可选；`null` = 这一天没有数据。 */
+export function availableWindows(spanMs: number | null): WindowValue[] {
+  if (spanMs === null) return []
+  const list = WINDOWS.filter((w) => w.value === 'day' || spanMs >= w.ms * TOLERANCE).map((w) => w.value)
+  return list.length > 0 ? list : ['day']
+}
+
+/** 默认：今天看最近 1 小时，往日看整天。 */
+export function defaultWindow(isToday: boolean, available: WindowValue[]): WindowValue {
+  if (!isToday) return 'day'
+  return available.includes('1h') ? '1h' : (available.filter((w) => w !== 'day').pop() ?? 'day')
 }
 
 interface Props {
-  state: RangeState
-  onChange: (next: RangeState) => void
+  /** 选中那天的 0 点（本地时区）。 */
+  dayStart: number
+  /** 选区（毫秒）：长度正好等于某一档时，那一档高亮。 */
+  fromMs: number
+  toMs: number
+  /** 换了一天（选区回到默认）。 */
+  onChange: (next: { dayStart: number; window: WindowValue | null }) => void
+  /** 点了一档时长：30 分钟、1 小时、3 小时、6 小时、12 小时、整天。 */
+  onWindow: (window: WindowValue) => void
+  /** 缩略图的刻度：24 小时（一天）或 48 小时（连续两天，可以跨零点）。 */
+  scale: 24 | 48
+  onScale: (scale: 24 | 48) => void
+  /** 这条线路最早有数据的时间；`null` = 没有数据。 */
   sinceMs: number | null
   nowMs: number
+  /** 这一天里数据的跨度（毫秒）；未知或没有数据是 `null`。 */
+  spanMs: number | null
+  /** 放在日期和档位下面（缩略图）。 */
+  children?: ReactNode
 }
 
-export function RangePicker({ state, onChange, sinceMs, nowMs }: Props) {
-  const spanMs = sinceMs === null ? null : nowMs - sinceMs
-  const presets = useMemo(() => availablePresets(spanMs), [spanMs])
-  const months = useMemo(() => monthsWithData(sinceMs, nowMs), [sinceMs, nowMs])
-  const month = state.month ? months.find((m) => m.key === state.month) : undefined
-  const monthLength = month ? Math.min(month.end, nowMs) - Math.max(month.start, sinceMs ?? month.start) : 0
-  const slices = SLICES.filter((s) => s.ms === 0 || monthLength >= s.ms * TOLERANCE)
-  const slice = SLICES.find((s) => s.value === state.slice) ?? SLICES[0]
-  const pages = month && slice.ms > 0 ? pagesIn(month, slice.ms, nowMs, sinceMs) : undefined
+export function RangePicker({ dayStart, fromMs, toMs, onChange, onWindow, scale, onScale, sinceMs, nowMs, spanMs, children }: Props) {
+  const picker = useRef<HTMLInputElement>(null)
+  const today = dayBounds(nowMs).start
+  const firstDay = sinceMs === null ? today : dayBounds(sinceMs).start
+  const available = availableWindows(spanMs)
+  const length = toMs - fromMs
+  const active: WindowValue = WINDOWS.find((w) => Math.abs(length - w.ms) < 1.5 * MIN)?.value ?? ('' as WindowValue)
+  const step = (days: number) => {
+    const d = new Date(dayStart)
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate() + days).getTime()
+  }
 
   return (
     <div className="range-picker">
       <div className="row wrap">
-        <Segmented
-          options={PRESETS.map((p) => {
-            const ok = presets.some((x) => x.value === p.value)
-            return { value: p.value, label: p.label, disabled: !ok, title: ok ? undefined : '这条线路的数据还没有这么长' }
-          })}
-          value={state.month ? ('' as PresetValue) : state.preset}
-          onChange={(v) => onChange({ ...state, preset: v, month: null, page: 0 })}
-        />
-        {months.length > 0 ? (
-          <select
-            className="select"
-            style={{ width: 'auto' }}
-            disabled={spanMs === null || spanMs < DAY}
-            title={spanMs !== null && spanMs >= DAY ? undefined : '数据超过 1 天之后可以按月查看'}
-            value={state.month ?? ''}
-            onChange={(e) => onChange({ ...state, month: e.target.value || null, slice: 'all', page: 0 })}
-            aria-label="按月查看"
-          >
-            <option value="">按月查看</option>
-            {months.map((m) => (
-              <option key={m.key} value={m.key}>
-                {m.label}
-              </option>
-            ))}
-          </select>
+        <span className="row" style={{ gap: 4 }}>
+          <button type="button" className="btn icon small" disabled={dayStart <= firstDay} onClick={() => onChange({ dayStart: step(-1), window: null })} aria-label="前一天">
+            <ChevronLeft size={16} />
+          </button>
+          <button type="button" className="day-pick" onClick={() => picker.current?.showPicker?.()}>
+            {fmtDayLabel(dayStart, nowMs)}
+            <input
+              ref={picker}
+              type="date"
+              value={dayKey(dayStart)}
+              min={dayKey(firstDay)}
+              max={dayKey(today)}
+              onChange={(e) => {
+                const picked = parseDay(e.target.value)
+                if (picked !== null) onChange({ dayStart: Math.min(Math.max(picked, firstDay), today), window: null })
+              }}
+              aria-hidden="true"
+              tabIndex={-1}
+            />
+          </button>
+          <button type="button" className="btn icon small" disabled={dayStart >= today} onClick={() => onChange({ dayStart: step(1), window: null })} aria-label="后一天">
+            <ChevronRight size={16} />
+          </button>
+        </span>
+        {dayStart !== today ? (
+          <button type="button" className="btn small" onClick={() => onChange({ dayStart: today, window: null })}>
+            回到今天
+          </button>
         ) : null}
       </div>
-      {month ? (
-        <div className="row wrap" style={{ marginTop: 12 }}>
-          <Segmented options={slices.map((s) => ({ value: s.value, label: s.label }))} value={state.slice} onChange={(v) => onChange({ ...state, slice: v, page: 0 })} />
-          {pages ? (
-            <span className="row" style={{ gap: 4 }}>
-              <button type="button" className="btn icon small" disabled={state.page <= pages.first} onClick={() => onChange({ ...state, page: state.page - 1 })} aria-label="上一段">
-                <ChevronLeft size={16} />
-              </button>
-              <button type="button" className="btn icon small" disabled={state.page >= pages.last} onClick={() => onChange({ ...state, page: state.page + 1 })} aria-label="下一段">
-                <ChevronRight size={16} />
-              </button>
-            </span>
-          ) : null}
-        </div>
-      ) : null}
+      {children}
+      <div className="row wrap" style={{ marginTop: 8, justifyContent: 'space-between' }}>
+        <Segmented
+          options={WINDOWS.map((w) => {
+            const ok = available.includes(w.value)
+            return { value: w.value, label: w.label, disabled: !ok, title: ok ? undefined : '这一天的数据没有这么长' }
+          })}
+          value={active}
+          onChange={onWindow}
+        />
+        <Segmented<'24' | '48'>
+          options={[
+            { value: '24', label: '24 小时刻度', title: '缩略图显示一天' },
+            { value: '48', label: '48 小时刻度', title: '缩略图显示连续两天，选区可以跨零点' },
+          ]}
+          value={String(scale) as '24' | '48'}
+          onChange={(v) => onScale(v === '48' ? 48 : 24)}
+        />
+      </div>
     </div>
   )
 }

web/shared/charts/TimeChart.tsx

@@ -9,6 +9,8 @@ export interface ChartSeries {
   color: string
   dash?: number[]
   fill?: boolean
+  /** 原始数据的淡线（开了 EWMA 平滑时垫在平滑线后面）：画细、画淡，图例和提示框里不出现。 */
+  faint?: boolean
 }
 
 interface Props {
@@ -22,14 +24,33 @@ interface Props {
   zero?: boolean
   /** 缺口：这些时间段用底色标出。 */
   gaps?: { from: number; to: number }[]
+  /** 为真时 `t` 是「从起点算起的毫秒数」而不是 Unix 毫秒：横轴显示 0:00、0:15…，用来把两段时间叠在一起比。 */
+  offset?: boolean
+}
+
+/** 偏移量（毫秒）→ h:mm:ss / m:ss。 */
+export function fmtOffset(ms: number): string {
+  const total = Math.round(ms / 1000)
+  const h = Math.floor(total / 3600)
+  const m = Math.floor((total % 3600) / 60)
+  const sec = total % 60
+  const two = (n: number) => String(n).padStart(2, '0')
+  return h > 0 ? `${h}:${two(m)}${sec ? ':' + two(sec) : ''}` : `${m}:${two(sec)}`
 }
 
 function cssVar(name: string): string {
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
 }
 
+/** 毫秒到 1 秒以上换成秒（30000ms → 30s），坐标轴和提示框都不会出现一长串数字。 */
+function withUnit(v: number, unit: string, digits?: number): string {
+  if (unit === 'ms' && Math.abs(v) >= 1000) return `${digits === undefined ? +(v / 1000).toFixed(1) : (v / 1000).toFixed(digits)}s`
+  return `${v}${unit}`
+}
+
 function formatValue(v: number | null | undefined, unit: string): string {
   if (v === null || v === undefined) return '—'
+  if (unit === 'ms' && Math.abs(v) >= 1000) return withUnit(v, unit, 2)
   const text = Math.abs(v) >= 100 ? v.toFixed(0) : Math.abs(v) >= 10 ? v.toFixed(1) : v.toFixed(2)
   return `${text}${unit}`
 }
@@ -40,12 +61,17 @@ function formatValue(v: number | null | undefined, unit: string): string {
  * - 在图上拖动选一段放大预览，双击或点「还原」恢复；数据刷新时保持放大的区间；
  * - 鼠标悬停显示这个时刻每条线的值。
  */
-export function TimeChart({ t, series, height = 220, unit = '', zero = true, gaps = [] }: Props) {
+export function TimeChart({ t, series, height = 220, unit = '', zero = true, gaps = [], offset = false }: Props) {
   const host = useRef<HTMLDivElement>(null)
   const tip = useRef<HTMLDivElement>(null)
   const plot = useRef<uPlot | null>(null)
   const zoom = useRef<{ min: number; max: number } | null>(null)
   const [zoomed, setZoomed] = useState(false)
+  // 数据变了（轮询、实时）只更新数据，不重建图：重建会闪一下，还会丢掉鼠标位置
+  const latest = useRef({ t, series, gaps })
+  latest.current = { t, series, gaps }
+  const structure = JSON.stringify([series.map((x) => [x.label, x.color, x.dash, x.fill, x.faint]), unit, zero, offset, height])
+  const dataOf = (): AlignedData => [latest.current.t.map((v) => v / 1000), ...latest.current.series.map((x) => x.values.map((v) => (v === null ? null : v)))]
 
   const reset = useCallback(() => {
     zoom.current = null
@@ -70,12 +96,12 @@ export function TimeChart({ t, series, height = 220, unit = '', zero = true, gap
         cursor: { drag: { x: true, y: false, setScale: false }, points: { size: 6 } },
         select: { show: true, left: 0, top: 0, width: 0, height: 0 },
         scales: {
-          x: { time: true, range: (_u, min, max) => (zoom.current ? [zoom.current.min, zoom.current.max] : [min, max]) },
+          x: { time: !offset, range: (_u, min, max) => (zoom.current ? [zoom.current.min, zoom.current.max] : [min, max]) },
           y: { range: (_u, min, max) => [zero ? Math.min(0, min) : min, max <= min ? min + 1 : max + (max - min) * 0.08] },
         },
         axes: [
-          { stroke: axis, grid: { stroke: grid, width: 1 }, ticks: { stroke: grid }, font },
-          { stroke: axis, grid: { stroke: grid, width: 1 }, ticks: { show: false }, font, size: 56, values: (_u, ticks) => ticks.map((v) => `${v}${unit}`) },
+          { stroke: axis, grid: { stroke: grid, width: 1 }, ticks: { stroke: grid }, font, ...(offset ? { values: (_u: uPlot, ticks: number[]) => ticks.map((v) => fmtOffset(v * 1000)) } : {}) },
+          { stroke: axis, grid: { stroke: grid, width: 1 }, ticks: { show: false }, font, size: 56, values: (_u, ticks) => ticks.map((v) => withUnit(v, unit)) },
         ],
         series: [
           {},
@@ -83,8 +109,8 @@ export function TimeChart({ t, series, height = 220, unit = '', zero = true, gap
             const color = cssVar(s.color)
             return {
               label: s.label,
-              stroke: color,
-              width: 1.8,
+              stroke: s.faint ? color + '55' : color,
+              width: s.faint ? 1 : 1.8,
               dash: s.dash,
               fill: s.fill ? color + '22' : undefined,
               spanGaps: false,
@@ -120,8 +146,8 @@ export function TimeChart({ t, series, height = 220, unit = '', zero = true, gap
                 return
               }
               const when = new Date(u.data[0][idx] * 1000)
-              const lines = [when.toLocaleString('zh-CN', { hour12: false, month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })]
-              for (let i = 0; i < series.length; i++) lines.push(`${series[i].label}  ${formatValue(u.data[i + 1][idx], unit)}`)
+              const lines = [offset ? `起点后 ${fmtOffset(u.data[0][idx] * 1000)}` : when.toLocaleString('zh-CN', { hour12: false, month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })]
+              for (let i = 0; i < latest.current.series.length; i++) if (!latest.current.series[i].faint) lines.push(`${latest.current.series[i].label}  ${formatValue(u.data[i + 1][idx], unit)}`)
               box.textContent = lines.join('\n')
               box.style.display = 'block'
               const width = box.offsetWidth
@@ -135,7 +161,7 @@ export function TimeChart({ t, series, height = 220, unit = '', zero = true, gap
               const { ctx } = u
               ctx.save()
               ctx.fillStyle = shade
-              for (const g of gaps) {
+              for (const g of latest.current.gaps) {
                 const x0 = Math.max(u.bbox.left, u.valToPos(g.from / 1000, 'x', true))
                 const x1 = Math.min(u.bbox.left + u.bbox.width, u.valToPos(g.to / 1000, 'x', true))
                 if (x1 > x0) ctx.fillRect(x0, u.bbox.top, x1 - x0, u.bbox.height)
@@ -145,8 +171,7 @@ export function TimeChart({ t, series, height = 220, unit = '', zero = true, gap
           ],
         },
       }
-      const data: AlignedData = [t.map((v) => v / 1000), ...series.map((s) => s.values.map((v) => (v === null ? null : v)))]
-      plot.current = new uPlot(options, data, el)
+      plot.current = new uPlot(options, dataOf(), el)
       // 把提示框放进绘图区，这样它的位置和光标是同一个坐标系
       if (tip.current) plot.current.over.appendChild(tip.current)
     }
@@ -161,12 +186,21 @@ export function TimeChart({ t, series, height = 220, unit = '', zero = true, gap
       plot.current?.destroy()
       plot.current = null
     }
-  }, [t, series, height, unit, zero, gaps, reset])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [structure, reset])
+
+  useEffect(() => {
+    const u = plot.current
+    if (!u) return
+    u.setData(dataOf(), !zoom.current)
+    u.redraw(false)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [t, series, gaps])
 
   return (
     <div className="chart-wrap">
       <div className="chart-legend">
-        {series.map((s) => (
+        {series.filter((s) => !s.faint).map((s) => (
           <span key={s.label}>
             <i style={{ background: `var(${s.color})` }} />
             {s.label}

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'

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%;
+  }
+}

web/shared/ui/index.tsx

@@ -218,6 +218,18 @@ export function ThemeToggle() {
   )
 }
 
+/**
+ * 组件上的加载进度条：放在卡片（`position: relative`）里，贴着上边缘。
+ * 数据在加载时流动，不加载时不占地方。
+ */
+export function LoadingBar({ active }: { active: boolean }) {
+  return active ? (
+    <div className="loading-bar" role="progressbar" aria-label="加载中">
+      <i />
+    </div>
+  ) : null
+}
+
 /** 数据源设置：默认连同源的后端；填了地址就连别的后端（跨域用 API 令牌，后端要放行这个前端的来源）。 */
 export function SourceButton({ tokenLabel = '只读令牌（站点私有时才需要）' }: { tokenLabel?: string }) {
   const [open, setOpen] = useState(false)