feat: node info, build info and acrylic web theme

Squash of recent dev work: return_session login, backend switcher, line detail timeline, overview strips, node platform/country/ISP info with flags and icons, build info (version, tag, time) behind site.show_build, and the acrylic display theme.
2026-10-06 21:24:25 +08:00
1 parent 10634bdd80
commit 14b0de3544
@@ -0,0 +1,143 @@
+import { useRef, useState, type MouseEvent } from 'react'
+import { api } from '@shared/api/client'
+import type { SeriesDto } from '@shared/api/types'
+import { fmtMs, fmtPct } from '@shared/format'
+import { useQuery } from '@shared/hooks'
+
+/** 总览卡片可以看的时长，以及每一格的长度（格数约 36～48，太多就挤了）。 */
+export const OVERVIEW_RANGES = [
+  { value: '3h', label: '3 小时', hours: 3, step: '5m', stepMin: 5 },
+  { value: '6h', label: '6 小时', hours: 6, step: '10m', stepMin: 10 },
+  { value: '12h', label: '12 小时', hours: 12, step: '15m', stepMin: 15 },
+] as const
+
+export type OverviewRange = (typeof OVERVIEW_RANGES)[number]['value']
+
+type Level = 'ok' | 'warn' | 'bad' | 'none'
+
+const levelOf = (loss: number | null | undefined): Level => (loss === null || loss === undefined ? 'none' : loss <= 0.5 ? 'ok' : loss < 3 ? 'warn' : 'bad')
+
+const clock = (ms: number) => new Date(ms).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false })
+
+interface StripProps {
+  /** 左上：什么延迟（UDP 延迟 p50）。 */
+  rttLabel: string
+  rtt: number | null | undefined
+  /** 右上：丢包还是重传。 */
+  badLabel: string
+  bad: number | null | undefined
+  badHint?: string
+  /** 每 5 分钟一格：这一格的丢包（重传）率、延迟。 */
+  t: number[]
+  badSeries: (number | null)[]
+  ready: boolean
+  /** 提示里这一格的「丢包」叫什么。 */
+  tipBad: string
+  /** 没有数据时占位的格数，和每格长度的说明（「每 5 分钟」）。 */
+  cells: number
+  stepText: string
+  hoursText: string
+  /** 悬停的那一格（UDP 和 TCP 共用）；`null` = 没有。 */
+  hover: number | null
+}
+
+/**
+ * 一排小格（每 5 分钟一格，按这 5 分钟的丢包率着色：绿 / 黄 / 红 / 灰 = 没有数据）
+ * 尽量轻。
+ */
+function Strip({ rttLabel, rtt, badLabel, bad, badHint, t, badSeries, ready, cells, stepText, hoursText, hover }: StripProps) {
+  return (
+    <div className="udp-strip">
+      <div className="udp-head">
+        <span className="udp-title">
+          {rttLabel} <b className="num">{fmtMs(rtt)}</b>
+        </span>
+        <span className="udp-title" title={badHint}>
+          {badLabel} <b className={`udp-rate num ${levelOf(bad)}`}>{fmtPct(bad)}</b>
+        </span>
+      </div>
+      <div className="bars" role="img" aria-label={`近 ${hoursText}每 ${stepText}的${badLabel}情况`}>
+        {(ready ? badSeries : Array.from({ length: cells }, () => null)).map((v, i) => (
+          <span key={t[i] ?? i} className={`bar ${ready ? levelOf(v) : 'none'}${hover === i ? ' on' : ''}`} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface Props {
+  lineId: string
+  range: OverviewRange
+  /** 近 3 小时的汇总（左上、右上的数字）。 */
+  m: Record<string, number | null | undefined>
+}
+
+/** 一条线路近一段时间的 UDP 和 TCP：各是一排小格，共用一次请求。 */
+export function LineStrips({ lineId, range, m }: Props) {
+  const info = OVERVIEW_RANGES.find((r) => r.value === range) ?? OVERVIEW_RANGES[0]
+  const series = useQuery(
+    () => api.get<SeriesDto>(`/api/public/lines/${encodeURIComponent(lineId)}/series`, { range: info.value, anchor: 'latest', step: info.step, preset: 'udp,tcp', metrics: 'loss.total,rtt.p50,tcp.retrans,tcp.rtt.p50' }),
+    [lineId, info.value],
+    30_000,
+  )
+  const s = series.data
+  const t = s?.t ?? []
+  const col = (key: string): (number | null)[] => s?.values[key] ?? []
+  // 悬停的那一格：UDP 和 TCP 的时间轴一样，所以同一格同时高亮；提示弹在卡片右侧，一次展示这段时间的 UDP 和 TCP
+  const [hover, setHover] = useState<number | null>(null)
+  const last = useRef<number | null>(null) // 提示收回去的动画期间，内容还要留着
+  if (hover !== null) last.current = hover
+  const shown = hover ?? last.current
+  // 整块线路区域都能触发：按鼠标横向位置对应到小格（UDP 和 TCP 的小格一样宽，量第一排就行），不用精确指到小格上
+  const box = useRef<HTMLDivElement>(null)
+  const onMove = (e: MouseEvent<HTMLDivElement>) => {
+    const bars = box.current?.querySelector('.bars')
+    if (!s || t.length < 1 || !bars) return
+    const r = bars.getBoundingClientRect()
+    setHover(Math.min(t.length - 1, Math.max(0, Math.floor(((e.clientX - r.left) / r.width) * t.length))))
+  }
+  const common = { t, ready: Boolean(s), cells: Math.round((info.hours * 60) / info.stepMin), stepText: `${info.stepMin} 分钟`, hoursText: `${info.hours} 小时`, hover }
+  const at = shown !== null && t[shown] !== undefined ? shown : null
+  return (
+    <div className="strips" ref={box} onMouseMove={onMove} onMouseLeave={() => setHover(null)}>
+      <Strip
+        {...common}
+        rttLabel="UDP 延迟 p50"
+        rtt={m['rtt.p50']}
+        badLabel="丢包"
+        bad={m['loss.total']}
+        badHint={`上行丢包 ${fmtPct(m['loss.up'])}　下行丢包 ${fmtPct(m['loss.down'])}`}
+        badSeries={col('loss.total')}
+        tipBad="丢包"
+      />
+      <Strip {...common} rttLabel="TCP RTT p50" rtt={m['tcp.rtt.p50']} badLabel="重传" bad={m['tcp.retrans']} badSeries={col('tcp.retrans')} tipBad="重传" />
+      <div className={`pop num${hover !== null && at !== null ? ' open' : ''}`} role="tooltip" aria-hidden={hover === null}>
+        {at !== null ? (
+          <>
+            <b className="pop-time">
+              {clock(t[at])}–{clock(t[at] + info.stepMin * 60_000)}
+            </b>
+            <div className="pop-group">
+              <span className="pop-name">UDP</span>
+              <span>
+                丢包 <em className={levelOf(col('loss.total')[at])}>{fmtPct(col('loss.total')[at])}</em>
+              </span>
+              <span>
+                延迟 p50 <em>{fmtMs(col('rtt.p50')[at])}</em>
+              </span>
+            </div>
+            <div className="pop-group">
+              <span className="pop-name">TCP</span>
+              <span>
+                重传 <em className={levelOf(col('tcp.retrans')[at])}>{fmtPct(col('tcp.retrans')[at])}</em>
+              </span>
+              <span>
+                RTT p50 <em>{fmtMs(col('tcp.rtt.p50')[at])}</em>
+              </span>
+            </div>
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}