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/pages/Insights.tsx

@@ -0,0 +1,198 @@
+import { useEffect } from 'react';
+import { useAnalysisStore } from '@/stores/analysisStore';
+import { ErrorBanner } from '@/components/ErrorBanner';
+import {
+  Lightbulb,
+  AlertTriangle,
+  CheckCircle,
+  Info,
+  XCircle,
+  TrendingUp,
+  TrendingDown,
+  Clock,
+} from 'lucide-react';
+
+const TYPE_CONFIG = {
+  warning: {
+    icon: AlertTriangle,
+    bg: 'bg-warning-light',
+    border: 'border-warning',
+    iconColor: 'text-warning',
+    badge: 'bg-warning text-white',
+  },
+  danger: {
+    icon: XCircle,
+    bg: 'bg-danger-light',
+    border: 'border-danger',
+    iconColor: 'text-danger',
+    badge: 'bg-danger text-white',
+  },
+  success: {
+    icon: CheckCircle,
+    bg: 'bg-success-light',
+    border: 'border-success',
+    iconColor: 'text-success',
+    badge: 'bg-success text-white',
+  },
+  info: {
+    icon: Info,
+    bg: 'bg-primary-muted',
+    border: 'border-primary',
+    iconColor: 'text-primary',
+    badge: 'bg-primary text-white',
+  },
+};
+
+export function Insights() {
+  const { insights, isLoading, error, clearError, fetchInsights } = useAnalysisStore();
+
+  useEffect(() => {
+    fetchInsights();
+  }, []);
+
+  const stats = insights
+    ? [
+        {
+          label: '总洞察数',
+          value: insights.total_insights,
+          icon: Lightbulb,
+          color: 'text-primary',
+          bg: 'bg-primary-muted',
+        },
+        {
+          label: '预警',
+          value: insights.warning_count + ((insights as any).danger_count || 0),
+          icon: AlertTriangle,
+          color: 'text-warning',
+          bg: 'bg-warning-light',
+        },
+        {
+          label: '正常',
+          value: insights.success_count,
+          icon: CheckCircle,
+          color: 'text-success',
+          bg: 'bg-success-light',
+        },
+        {
+          label: '信息',
+          value: insights.info_count,
+          icon: Info,
+          color: 'text-primary',
+          bg: 'bg-primary-muted',
+        },
+      ]
+    : [];
+
+  return (
+    <div>
+      {error && (
+        <ErrorBanner
+          error={error}
+          onRetry={() => { clearError(); fetchInsights(); }}
+          onDismiss={clearError}
+        />
+      )}
+      <div className="mb-5">
+        <h1 className="font-display text-[18px] font-semibold mb-1 flex items-center gap-2">
+          <Lightbulb className="w-5 h-5 text-primary" />
+          智能洞察
+        </h1>
+        <p className="text-[12px] text-text-muted">
+          基于数据分析自动生成的风险洞察与建议
+        </p>
+      </div>
+
+      {isLoading && (
+        <div className="mb-4 text-center py-8 bg-bg-card rounded-lg border border-border">
+          <span className="text-text-secondary">数据加载中...</span>
+        </div>
+      )}
+
+      {insights && (
+        <div className="grid grid-cols-4 gap-4 mb-4">
+          {stats.map((stat) => (
+            <div key={stat.label} className="card p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <div className={`w-8 h-8 rounded-lg ${stat.bg} flex items-center justify-center`}>
+                  <stat.icon className={`w-4 h-4 ${stat.color}`} />
+                </div>
+                <span className="text-[11px] font-medium text-text-muted uppercase tracking-wide">
+                  {stat.label}
+                </span>
+              </div>
+              <div className="font-display text-[26px] font-bold text-text-primary">
+                {stat.value}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {insights && (
+        <div className="grid grid-cols-2 gap-4">
+          {insights.cards.map((card) => {
+            const config = TYPE_CONFIG[card.type];
+            const Icon = config.icon;
+            return (
+              <div
+                key={card.id}
+                className={`card p-4 border-l-4 ${config.border} hover:shadow-md transition-shadow`}
+              >
+                <div className="flex items-start justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <div className={`w-8 h-8 rounded-lg ${config.bg} flex items-center justify-center`}>
+                      <Icon className={`w-4 h-4 ${config.iconColor}`} />
+                    </div>
+                    <div>
+                      <h3 className="text-[14px] font-semibold text-text-primary">
+                        {card.title}
+                      </h3>
+                      <span className="text-[11px] text-text-muted flex items-center gap-1">
+                        <Clock className="w-3 h-3" />
+                        {card.timestamp}
+                      </span>
+                    </div>
+                  </div>
+                  <span className={`text-[10px] font-semibold px-2 py-0.5 rounded ${config.badge}`}>
+                    {card.type === 'warning' ? '预警' : card.type === 'danger' ? '紧急' : card.type === 'success' ? '正常' : '信息'}
+                  </span>
+                </div>
+
+                <p className="text-[13px] text-text-secondary leading-relaxed mb-3">
+                  {card.description}
+                </p>
+
+                {card.metric && card.metricValue && (
+                  <div className="flex items-center gap-2 pt-3 border-t border-border">
+                    <span className="text-[12px] text-text-muted">{card.metric}:</span>
+                    <span className={`text-[14px] font-bold flex items-center gap-1 ${
+                      card.type === 'warning' || card.type === 'danger'
+                        ? 'text-danger'
+                        : card.type === 'success'
+                        ? 'text-success'
+                        : 'text-primary'
+                    }`}>
+                      {card.metricValue.includes('+') ? (
+                        <TrendingUp className="w-3.5 h-3.5" />
+                      ) : card.metricValue.includes('-') ? (
+                        <TrendingDown className="w-3.5 h-3.5" />
+                      ) : null}
+                      {card.metricValue}
+                    </span>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {!insights && !isLoading && (
+        <div className="card p-8 text-center">
+          <Lightbulb className="w-12 h-12 text-text-muted mx-auto mb-3" />
+          <p className="text-text-secondary">暂无洞察数据</p>
+        </div>
+      )}
+    </div>
+  );
+}