feat: Initial CBPOA commit — 武汉儿童呼吸疾病风险评估系统

Context: Build a spatial risk assessment system correlating air quality
data with children's respiratory disease incidence across Wuhan.

Approach: FastAPI backend serving PostGIS spatial queries, React
frontend with Deck.gl maps, and a PyTorch SpatialTemporalGCN pipeline
for multi-day (1d/3d/7d) risk prediction.

Changes:
- backend/ — FastAPI API with auth (JWT), alerts, risk analysis,
  geocoded case data, grid statistics, and report endpoints
- frontend/ — React dashboard with interactive risk maps, alert
  monitoring, district comparison charts, and timeline player
- models/ — SpatialTemporalGCN model with trained weights and ONNX
  export for inference
- scripts/ — ETL pipeline for weather + medical data, grid generation,
  feature engineering, training, and daily inference
- deploy/ — Docker Compose configs for backend, frontend, and MLflow
- docs/ — API docs, deployment guide, user guide, and code review

Impact: Enables spatial risk visualization, alert monitoring, and
ML-driven health risk forecasting for environmental health teams.

frontend/src/components/SideNav.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+
+interface SideNavProps {
+  activePage: string;
+  onPageChange: (page: string) => void;
+  alertCount?: number;
+}
+
+export function SideNav({
+  activePage,
+  onPageChange,
+  alertCount = 0,
+}: SideNavProps) {
+  const [expanded, setExpanded] = useState<string | null>('monitoring');
+
+  const modules: { id: string; label: string; icon: React.ReactNode; items: { id: string; label: string }[] }[] = [
+    {
+      id: 'monitoring',
+      label: '监测',
+      icon: (
+        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/>
+        </svg>
+      ),
+      items: [
+        { id: 'monitoring', label: '监测面板' },
+      ],
+    },
+    {
+      id: 'alert',
+      label: '预警',
+      icon: (
+        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
+        </svg>
+      ),
+      items: [
+        { id: 'alerts', label: '预警地图' },
+      ],
+    },
+    {
+      id: 'analysis',
+      label: '分析',
+      icon: (
+        <svg className="w-4 h-4" fill="currentColor" 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-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
+        </svg>
+      ),
+      items: [
+        { id: 'trend-analysis', label: '趋势分析' },
+        { id: 'district-comparison', label: '区域对比' },
+        { id: 'insights', label: '智能洞察' },
+      ],
+    },
+  ];
+
+  const handleItemClick = (moduleId: string, itemId: string) => {
+    setExpanded(moduleId);
+    onPageChange(itemId);
+  };
+
+  const isActiveModule = (moduleId: string) => {
+    const module = modules.find(m => m.id === moduleId);
+    if (!module) return false;
+    return module.items.some(item => item.id === activePage);
+  };
+
+  return (
+    <aside className="w-[200px] bg-bg-card border-r border-border fixed top-[52px] left-0 bottom-0 overflow-y-auto py-4 px-2">
+      {modules.map((module) => (
+        <div key={module.id} className="mb-4">
+          <button
+            onClick={() => setExpanded(expanded === module.id ? null : module.id)}
+            className={`w-full flex items-center gap-[10px] px-3 py-[9px] rounded-md text-[14px] font-semibold transition-colors ${
+              isActiveModule(module.id)
+                ? 'bg-primary-muted text-primary'
+                : 'text-text-primary hover:bg-bg-hover'
+            }`}
+          >
+            <span className="w-4 h-4 flex items-center justify-center">
+              {module.icon}
+            </span>
+            <span>{module.label}</span>
+            {module.id === 'alert' && alertCount > 0 && (
+              <span className="ml-auto bg-danger-light text-danger text-[10px] font-semibold px-[5px] py-[2px] rounded">
+                {alertCount > 99 ? '99+' : alertCount}
+              </span>
+            )}
+          </button>
+
+          {expanded === module.id && (
+            <div className="mt-1 pl-7">
+              {module.items.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => handleItemClick(module.id, item.id)}
+                  className={`w-full text-left px-3 py-[7px] rounded text-[13px] font-medium transition-colors ${
+                    activePage === item.id
+                      ? 'bg-bg-active text-primary'
+                      : 'text-text-secondary hover:bg-bg-hover hover:text-text-primary'
+                  }`}
+                >
+                  {item.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+    </aside>
+  );
+}