feat(frontend): Phase 1 UX foundation — react-router v6 + responsive AppShell

Atomic foundation for the consensus-approved UX modernization (makes the
platform URL-addressable, refresh-safe, and mobile-usable for hospital demos).

- Migrate hand-rolled useState page switching → react-router v6 (routes.tsx,
  thin App.tsx auth gate, NavLink SideNav, lazy+Suspense per route)
- Add responsive AppShell: persistent rail (lg:) ⇄ off-canvas drawer + hamburger
  (<lg); kills hardcoded ml-[200px]; usable at 375px
- Add ui primitive kit (Skeleton/LoadingState/EmptyState/Card/Panel/Segmented)
- Sweep all raw "加载中..." text loaders → skeleton primitives (G4)
- Centralize test ids (utils/testids.ts); rewrite e2e for URL nav (17/17 pass:
  deep-link, refresh-preserves-page, back, 375px drawer/no-scroll)
- Harden DemographicAnalysis against API shape mismatch (defensive normalize)
- gitignore playwright-report/ and test-results/

Gates: tsc --noEmit 0 · pnpm build ok · e2e 17/17 · grep 加载中 zero outside ui/

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/TopNav.tsx

@@ -1,7 +1,10 @@
 import { useState, useEffect } from 'react';
+import { TESTIDS } from '@/utils/testids';
 
 interface TopNavProps {
   onLogout?: () => void;
+  // 移动端汉堡按钮：切换侧栏抽屉。
+  onToggleMenu?: () => void;
 }
 
 function Clock() {
@@ -13,14 +16,27 @@ function Clock() {
   return <span>{time.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}</span>;
 }
 
-export function TopNav({ onLogout }: TopNavProps) {
-
+export function TopNav({ onLogout, onToggleMenu }: TopNavProps) {
   return (
-    <nav className="h-[52px] bg-bg-card border-b border-border flex items-center px-5 fixed top-0 left-0 right-0 z-50">
+    <nav className="h-[52px] bg-bg-card border-b border-border flex items-center px-5 z-50">
+      {onToggleMenu && (
+        <button
+          type="button"
+          onClick={onToggleMenu}
+          aria-label="打开菜单"
+          data-testid={TESTIDS.hamburger}
+          className="lg:hidden mr-3 -ml-1 w-9 h-9 flex items-center justify-center rounded-md text-text-secondary hover:bg-bg-hover transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </button>
+      )}
+
       <div className="flex items-center gap-3">
         <div className="w-7 h-7 bg-primary rounded-md flex items-center justify-center">
           <svg className="w-4 h-4 fill-white" viewBox="0 0 24 24">
-            <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z"/>
+            <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z" />
           </svg>
         </div>
         <span className="font-display font-semibold text-[15px] text-text-primary">
@@ -28,19 +44,19 @@ export function TopNav({ onLogout }: TopNavProps) {
         </span>
       </div>
 
-      <div className="w-px h-5 bg-border ml-4 mr-4" />
+      <div className="w-px h-5 bg-border ml-4 mr-4 hidden sm:block" />
 
-      <span className="text-[13px] text-text-secondary">
+      <span className="text-[13px] text-text-secondary hidden sm:inline">
         儿童呼吸道疾病风险监测预警平台
       </span>
 
       <div className="ml-auto flex items-center gap-5">
-        <span className="text-[12px] text-text-muted">
+        <span className="text-[12px] text-text-muted hidden sm:inline">
           <Clock />
         </span>
         <div className="flex items-center gap-2 text-[13px] text-text-secondary">
           <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
           </svg>
           admin
         </div>