shared: add independent IPv4 and IPv6 collection [CI]

web/display/src/pages/Compare.tsx

@@ -1,5 +1,6 @@
 import { Star } from 'lucide-react'
 import { useMemo } from 'react'
+import { IpVersionPicker, ipVersionOf } from '@shared/ipVersions'
 import { useSearchParams } from 'react-router-dom'
 import { api } from '@shared/api/client'
 import type { CompareDto, OverviewDto, OverviewLineDto } from '@shared/api/types'
@@ -54,15 +55,16 @@ interface Cell {
 
 export function Compare() {
   const [params, setParams] = useSearchParams()
+  const ipVersion = ipVersionOf(params.get('ip_version'))
   const range: PresetValue = isPreset(params.get('range')) ? (params.get('range') as PresetValue) : '1d'
   const metric = METRICS.find((m) => m.id === params.get('metric')) ?? METRICS[0]
-  const picked = useMemo(() => (params.get('lines') ?? '').split(',').filter(Boolean), [params])
+  const picked = useMemo(() => (params.get('lines') ?? '').split(',').filter((id) => id && id.endsWith('~ipv6') === (ipVersion === 'ipv6')), [params, ipVersion])
 
-  const overview = useQuery(() => api.get<OverviewDto>('/api/public/overview', { range, metrics: metric.id }), [range, metric.id], 15_000)
+  const overview = useQuery(() => api.get<OverviewDto>('/api/public/overview', { range, metrics: metric.id, ip_version: ipVersion }), [range, metric.id, ipVersion], 15_000)
 
   // 矩阵：行是 Agent，列是 Probe；每一列内部排名（同一个 Probe 看出去，哪个 Agent 的线路好）
   const matrix = useMemo(() => {
-    const lines = overview.data?.lines ?? []
+    const lines = (overview.data?.lines ?? []).filter((l) => ipVersionOf(l.ip_version) === ipVersion)
     const probes = [...new Map(lines.map((l) => [l.probe_id, l.probe_name])).entries()].sort((a, b) => a[1].localeCompare(b[1]))
     const agents = [...new Map(lines.map((l) => [l.agent_id, l.name])).entries()].sort((a, b) => a[1].localeCompare(b[1]))
     const byProbe = new Map<string, Cell[]>()
@@ -79,7 +81,7 @@ export function Compare() {
       byProbe.set(probeId, cells)
     }
     return { probes, agents, byProbe }
-  }, [overview.data, metric])
+  }, [overview.data, metric, ipVersion])
 
   // 默认选每个 Probe 里最好的那条线路（最多 6 条）
   const defaults = useMemo(() => {
@@ -123,6 +125,7 @@ export function Compare() {
         <h1>线路对比</h1>
         <p className="sub">同一个指标，在每个 Probe 看出去，哪个 Agent 的线路更好。</p>
         <div className="toolbar">
+          <IpVersionPicker value={ipVersion} onChange={(v) => update({ ip_version: v, lines: null })} />
           <Segmented options={PRESETS.map((p) => ({ value: p.value, label: p.label }))} value={range} onChange={(v) => update({ range: v })} />
           <select className="select" style={{ width: 'auto' }} value={metric.id} onChange={(e) => update({ metric: e.target.value })}>
             {METRICS.map((x) => (

web/display/src/pages/Line.tsx

@@ -1,5 +1,6 @@
 import { ChevronLeft } from 'lucide-react'
 import { useMemo } from 'react'
+import { IP_VERSIONS, lineIdFor } from '@shared/ipVersions'
 import { Link, useParams, useSearchParams } from 'react-router-dom'
 import { api } from '@shared/api/client'
 import type { LineDto, TestDto } from '@shared/api/types'
@@ -245,7 +246,7 @@ export function Line() {
   return (
     <main className="page">
       <div className="crumbs">
-        <Link to="/" className="row">
+        <Link to={id.endsWith('~ipv6') ? '/?ip_version=ipv6' : '/'} className="row">
           <ChevronLeft size={16} />
           总览
         </Link>
@@ -256,6 +257,18 @@ export function Line() {
           {line.data?.name ?? '线路'}
           {line.data ? <span className="muted" style={{ fontWeight: 400 }}> → {line.data.probe_name}</span> : null}
         </h1>
+        <div className="row" style={{ marginTop: 12 }}>
+          {IP_VERSIONS.map((v) => {
+            const query = new URLSearchParams(params)
+            query.set('ip_version', v.value)
+            return (
+              <Link key={v.value} className={`btn small${(id.endsWith('~ipv6') ? 'ipv6' : 'ipv4') === v.value ? ' primary' : ''}`} to={`/line/${encodeURIComponent(lineIdFor(id, v.value))}?${query.toString()}`}>
+                {v.label}
+              </Link>
+            )
+          })}
+          {line.data && !line.data.ipv6_available && id.endsWith('~ipv6') ? <span className="muted">此 Agent 未配置 IPv6 地址</span> : null}
+        </div>
         {line.data ? (
           <div className="row wrap" style={{ marginTop: 12 }}>
             <Dot tone={line.data.online && line.data.probe_connected ? 'ok' : line.data.online ? 'warn' : 'bad'} />

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">