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/ui/Segmented.tsx

@@ -0,0 +1,53 @@
+import { memo } from 'react';
+
+export const Segmented = memo(function Segmented<T extends string>({
+  options,
+  value,
+  onChange,
+  size = 'md',
+  testid,
+}: {
+  options: { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+  size?: 'sm' | 'md';
+  testid?: string;
+}): JSX.Element {
+  const sizeClasses = size === 'sm'
+    ? 'px-2.5 py-0.5 text-xs'
+    : 'px-3.5 py-1 text-[13px]';
+
+  return (
+    <div
+      data-testid={testid}
+      className="inline-flex items-center gap-0.5 rounded-full bg-bg-hover p-0.5"
+    >
+      {options.map((opt) => {
+        const isActive = opt.value === value;
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            data-testid={testid ? `${testid}-${opt.value}` : undefined}
+            onClick={() => onChange(opt.value)}
+            className={[
+              'rounded-full font-medium transition-colors',
+              sizeClasses,
+              isActive
+                ? 'bg-primary text-white shadow-sm'
+                : 'text-text-secondary hover:bg-bg-active',
+            ].join(' ')}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}) as <T extends string>(props: {
+  options: { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+  size?: 'sm' | 'md';
+  testid?: string;
+}) => JSX.Element;