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) => (