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/DistributionChart.tsx

@@ -0,0 +1,51 @@
+interface DistributionChartProps {
+  distribution: {
+    high: number;
+    medium_high: number;
+    medium: number;
+    medium_low: number;
+    low: number;
+  };
+}
+
+const LEVELS = [
+  { key: 'high', label: '高风险 (86-100%)', color: 'bg-danger' },
+  { key: 'medium_high', label: '中高风险 (71-85%)', color: 'bg-[#FB923C]' },
+  { key: 'medium', label: '中风险 (51-70%)', color: 'bg-warning' },
+  { key: 'medium_low', label: '中低风险 (31-50%)', color: 'bg-[#7DD3FC]' },
+  { key: 'low', label: '低风险 (0-30%)', color: 'bg-success' },
+];
+
+export function DistributionChart({ distribution }: DistributionChartProps) {
+  const total = Object.values(distribution).reduce((sum, val) => sum + val, 0);
+
+  return (
+    <div className="card p-4 h-fit">
+      <div className="text-[11px] font-medium text-text-muted uppercase tracking-wide mb-4">
+        风险等级分布
+      </div>
+
+      {LEVELS.map((level) => {
+        const value = distribution[level.key as keyof typeof distribution];
+        const percentage = total > 0 ? (value / total) * 100 : 0;
+
+        return (
+          <div key={level.key} className="mb-3.5 last:mb-0">
+            <div className="flex justify-between mb-1.5">
+              <span className="text-[12px] text-text-secondary">{level.label}</span>
+              <span className="text-[12px] font-semibold">
+                {value} ({percentage.toFixed(1)}%)
+              </span>
+            </div>
+            <div className="h-[5px] bg-bg-page rounded overflow-hidden">
+              <div
+                className={`h-full rounded ${level.color}`}
+                style={{ width: `${percentage}%` }}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}