feat: 态势感知页面添加 MonthPicker 月份切换(4个API全部传month)

client/src/pages/SituationalAwarenessPage.tsx

@@ -11,6 +11,7 @@ import { LoadingSpinner } from '@/components/LoadingSpinner'
 import { Badge } from '@/components/Badge'
 import { formatCurrency, cn } from '@/lib/utils'
 import { Activity, AlertTriangle, Link2, TrendingUp } from 'lucide-react'
+import { MonthPicker } from '@/components/MonthPicker'
 
 const PAGE_SIZE = 20
 
@@ -48,13 +49,17 @@ const ALERT_TYPE_LABEL: Record<string, string> = {
 
 export function SituationalAwarenessPage() {
   const [tab, setTab] = useState('health')
+  const [month, setMonth] = useState('2026-04')
   const navigate = useNavigate()
 
   return (
     <div className="space-y-4">
-      <div>
+      <div className="flex items-center justify-between">
-        <h1 className="text-xl font-bold">态势感知</h1>
+        <div>
-        <p className="mt-0.5 text-xs text-muted-foreground">门店健康度 · 自动化预警 · 跨模块关联 · 趋势预测</p>
+          <h1 className="text-xl font-bold">态势感知</h1>
+          <p className="mt-0.5 text-xs text-muted-foreground">门店健康度 · 自动化预警 · 跨模块关联 · 趋势预测 · {month}</p>
+        </div>
+        <MonthPicker month={month} onChange={setMonth} />
       </div>
 
       {/* Tab 切换 */}
@@ -78,20 +83,20 @@ export function SituationalAwarenessPage() {
         })}
       </div>
 
-      {tab === 'health' && <HealthScoreTab navigate={navigate} />}
+      {tab === 'health' && <HealthScoreTab navigate={navigate} month={month} />}
-      {tab === 'alerts' && <AlertsTab />}
+      {tab === 'alerts' && <AlertsTab month={month} />}
-      {tab === 'correlation' && <CorrelationTab navigate={navigate} />}
+      {tab === 'correlation' && <CorrelationTab navigate={navigate} month={month} />}
-      {tab === 'forecast' && <ForecastTab />}
+      {tab === 'forecast' && <ForecastTab month={month} />}
     </div>
   )
 }
 
 // ============ Tab 1: 门店健康度综合评分 ============
 
-function HealthScoreTab({ navigate }: { navigate: (path: string) => void }) {
+function HealthScoreTab({ navigate, month }: { navigate: (path: string) => void; month: string }) {
   const { data, isLoading } = useQuery({
-    queryKey: ['sa-health-score'],
+    queryKey: ['sa-health-score', month],
-    queryFn: () => api.get('/situational-awareness/health-score'),
+    queryFn: () => api.get('/situational-awareness/health-score', { params: { month } }),
     staleTime: 5 * 60 * 1000,
   })
 
@@ -203,10 +208,10 @@ function HealthScoreTab({ navigate }: { navigate: (path: string) => void }) {
 
 // ============ Tab 2: 预警中心 ============
 
-function AlertsTab() {
+function AlertsTab({ month }: { month: string }) {
   const { data, isLoading } = useQuery({
-    queryKey: ['sa-alerts'],
+    queryKey: ['sa-alerts', month],
-    queryFn: () => api.get('/situational-awareness/alerts'),
+    queryFn: () => api.get('/situational-awareness/alerts', { params: { month } }),
     staleTime: 5 * 60 * 1000,
   })
 
@@ -335,10 +340,10 @@ function AlertList({ alerts }: { alerts: any[] }) {
 
 // ============ Tab 3: 跨模块关联分析 ============
 
-function CorrelationTab({ navigate }: { navigate: (path: string) => void }) {
+function CorrelationTab({ navigate, month }: { navigate: (path: string) => void; month: string }) {
   const { data, isLoading } = useQuery({
-    queryKey: ['sa-correlation'],
+    queryKey: ['sa-correlation', month],
-    queryFn: () => api.get('/situational-awareness/correlation'),
+    queryFn: () => api.get('/situational-awareness/correlation', { params: { month } }),
     staleTime: 5 * 60 * 1000,
   })
 
@@ -549,10 +554,10 @@ function CorrelationTab({ navigate }: { navigate: (path: string) => void }) {
 
 // ============ Tab 4: 趋势预测 ============
 
-function ForecastTab() {
+function ForecastTab({ month }: { month: string }) {
   const { data, isLoading } = useQuery({
-    queryKey: ['sa-forecast'],
+    queryKey: ['sa-forecast', month],
-    queryFn: () => api.get('/situational-awareness/forecast'),
+    queryFn: () => api.get('/situational-awareness/forecast', { params: { month } }),
     staleTime: 5 * 60 * 1000,
   })