shared: add independent IPv4 and IPv6 collection [CI]

web/display/src/App.tsx

@@ -1,20 +1,28 @@
 import { BuildFooter } from './BuildFooter'
-import { NavLink, Navigate, Route, Routes } from 'react-router-dom'
+import { NavLink, Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom'
 import { SourceButton, ThemeToggle } from '@shared/ui'
 import { Compare } from './pages/Compare'
 import { Line } from './pages/Line'
 import { Overview } from './pages/Overview'
 
+function LineRoute() {
+  const { id } = useParams()
+  return <Line key={id} />
+}
+
 export function App() {
+  const location = useLocation()
+  const ipv6 = location.pathname.endsWith('~ipv6') || new URLSearchParams(location.search).get('ip_version') === 'ipv6'
+  const familyQuery = ipv6 ? '?ip_version=ipv6' : ''
   return (
     <>
       <header className="topbar">
         <div className="inner">
           <nav className="topnav">
-            <NavLink to="/" end className={({ isActive }) => (isActive ? 'active' : '')}>
+            <NavLink to={`/${familyQuery}`} end className={({ isActive }) => (isActive ? 'active' : '')}>
               总览
             </NavLink>
-            <NavLink to="/compare" className={({ isActive }) => (isActive ? 'active' : '')}>
+            <NavLink to={`/compare${familyQuery}`} className={({ isActive }) => (isActive ? 'active' : '')}>
               对比
             </NavLink>
             <a href="/admin/">管理</a>
@@ -25,7 +33,7 @@ export function App() {
       </header>
       <Routes>
         <Route path="/" element={<Overview />} />
-        <Route path="/line/:id" element={<Line />} />
+        <Route path="/line/:id" element={<LineRoute />} />
         <Route path="/compare" element={<Compare />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>