shared: add independent IPv4 and IPv6 collection [CI]

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'} />