shared: add independent IPv4 and IPv6 collection [CI]

web/display/src/pages/Overview.tsx

@@ -9,6 +9,7 @@ import { fmtBytes, fmtSpeed, fmtUptime, pct, useHosts, type HostItem } from '../
 import { Flag, IspIcon, useNodeInfos } from '@shared/nodes'
 import { OsIcon } from '@shared/osIcon'
 import { PageError } from '../lib'
+import { IpVersionPicker, ipVersionOf } from '@shared/ipVersions'
 import { LineStrips, OVERVIEW_RANGES, type OverviewRange } from '../LineStrips'
 
 const METRICS = ['rtt.p50', 'loss.total', 'loss.up', 'loss.down', 'tcp.rtt.p50', 'tcp.retrans'].join(',')
@@ -153,6 +154,7 @@ export function Overview() {
   const infos = useNodeInfos()
   // 近多久的汇总和走势：3 / 6 / 12 小时，记在链接里（?range=6h）
   const [params, setParams] = useSearchParams()
+  const ipVersion = ipVersionOf(params.get('ip_version'))
   const range: OverviewRange = OVERVIEW_RANGES.find((r) => r.value === params.get('range'))?.value ?? '3h'
   const setRange = (v: OverviewRange) =>
     setParams(
@@ -164,12 +166,13 @@ export function Overview() {
       },
       { replace: true },
     )
-  const { data, error, loading } = useQuery(() => api.get<OverviewDto>('/api/public/overview', { range, metrics: METRICS }), [range], 10_000)
+  const { data, error, loading } = useQuery(() => api.get<OverviewDto>('/api/public/overview', { range, metrics: METRICS, ip_version: ipVersion }), [range, ipVersion], 10_000)
 
   const probes = useMemo(() => [...new Set((data?.lines ?? []).map((l) => l.probe_name))].sort(), [data])
   const cards = useMemo(() => {
     const byAgent = new Map<string, AgentCard>()
     for (const l of data?.lines ?? []) {
+      if (ipVersionOf(l.ip_version) !== ipVersion) continue
       if (probe && l.probe_name !== probe) continue
       const card = byAgent.get(l.agent_id) ?? { id: l.agent_id, name: l.name, labels: l.labels, online: l.online, lines: [] }
       card.lines.push(l)
@@ -190,7 +193,7 @@ export function Overview() {
       if (y === null) return -1
       return x - y
     })
-  }, [data, probe, sort])
+  }, [data, probe, sort, ipVersion])
 
   const online = cards.filter((c) => c.online).length
 
@@ -203,6 +206,7 @@ export function Overview() {
           <span className={`live-dot ${live ? 'on' : ''}`} title={live ? '实时更新中' : '实时连接中断，正在重连'} />
         </p>
         <div className="toolbar">
+          <IpVersionPicker value={ipVersion} onChange={(v) => { const next = new URLSearchParams(params); next.set('ip_version', v); setProbe(''); setParams(next, { replace: true }) }} />
           {probes.length > 1 ? <Segmented options={[{ value: '', label: '全部 Probe' }, ...probes.map((p) => ({ value: p, label: p }))]} value={probe} onChange={setProbe} /> : null}
           <span className="right row">
             <Segmented<OverviewRange> options={OVERVIEW_RANGES.map((r) => ({ value: r.value, label: `近 ${r.label}` }))} value={range} onChange={setRange} />
@@ -225,7 +229,7 @@ export function Overview() {
       {data ? (
         cards.length === 0 ? (
           <div className="card" style={{ marginTop: 24 }}>
-            <Empty>还没有线路</Empty>
+            <Empty>{ipVersion === 'ipv6' ? '还没有 IPv6 线路，请在管理端配置 Agent 的 IPv6 地址' : '还没有线路'}</Empty>
           </div>
         ) : (
           <div className="cards">