From d1f07a0e936a0b95fb61887cffb4cba273f6b0bf Mon Sep 17 00:00:00 2001
From: freedakgmail <freedak.gemini@gmail.com>
Date: Sat, 1 Aug 2026 15:09:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=80=81=E5=8A=BF=E6=84=9F=E7=9F=A5?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0=20MonthPicker=20=E6=9C=88?=
 =?UTF-8?q?=E4=BB=BD=E5=88=87=E6=8D=A2(4=E4=B8=AAAPI=E5=85=A8=E9=83=A8?=
 =?UTF-8?q?=E4=BC=A0month)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/SituationalAwarenessPage.tsx | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/client/src/pages/SituationalAwarenessPage.tsx b/client/src/pages/SituationalAwarenessPage.tsx
index 4fe75e9..226cb91 100644
--- a/client/src/pages/SituationalAwarenessPage.tsx
+++ b/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>
-        <h1 className="text-xl font-bold">态势感知</h1>
-        <p className="mt-0.5 text-xs text-muted-foreground">门店健康度 · 自动化预警 · 跨模块关联 · 趋势预测</p>
+      <div className="flex items-center justify-between">
+        <div>
+          <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 === 'alerts' && <AlertsTab />}
-      {tab === 'correlation' && <CorrelationTab navigate={navigate} />}
-      {tab === 'forecast' && <ForecastTab />}
+      {tab === 'health' && <HealthScoreTab navigate={navigate} month={month} />}
+      {tab === 'alerts' && <AlertsTab month={month} />}
+      {tab === 'correlation' && <CorrelationTab navigate={navigate} month={month} />}
+      {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'],
-    queryFn: () => api.get('/situational-awareness/health-score'),
+    queryKey: ['sa-health-score', month],
+    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'],
-    queryFn: () => api.get('/situational-awareness/alerts'),
+    queryKey: ['sa-alerts', month],
+    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'],
-    queryFn: () => api.get('/situational-awareness/correlation'),
+    queryKey: ['sa-correlation', month],
+    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'],
-    queryFn: () => api.get('/situational-awareness/forecast'),
+    queryKey: ['sa-forecast', month],
+    queryFn: () => api.get('/situational-awareness/forecast', { params: { month } }),
     staleTime: 5 * 60 * 1000,
   })