风险与内控管理优化: 异常账单服务端分页/筛选/收银员搜索/合计, 收银员TOP15按异常账单数排序, 双击跳转明细, MonthPicker靠右, 侧边栏底部间距

client/src/pages/RevenuePage.tsx

@@ -7,6 +7,8 @@ import { LoadingSpinner } from '@/components/LoadingSpinner'
 import { CollapsibleSection } from '@/components/CollapsibleSection'
 import { formatNumber, formatCurrency, formatPercent } from '@/lib/utils'
 import { BarChart3, TrendingDown, Users, Receipt } from 'lucide-react'
+import { MonthPicker } from '@/components/MonthPicker'
+import { useState } from 'react'
 
 const CHANNEL_COLORS: Record<string, string> = {
   wechat: '#07c160',
@@ -23,22 +25,23 @@ const CHANNEL_COLORS: Record<string, string> = {
 
 export function RevenuePage() {
   const navigate = useNavigate()
+  const [month, setMonth] = useState('2026-04')
 
   const { data: dailyData, isLoading: dailyLoading } = useQuery({
-    queryKey: ['revenue/daily-summary'],
-    queryFn: () => api.get('/revenue/daily-summary'),
+    queryKey: ['revenue/daily-summary', month],
+    queryFn: () => api.get('/revenue/daily-summary', { params: { month } }),
   })
   const { data: channelData, isLoading: channelLoading } = useQuery({
-    queryKey: ['revenue/channel'],
-    queryFn: () => api.get('/revenue/channel'),
+    queryKey: ['revenue/channel', month],
+    queryFn: () => api.get('/revenue/channel', { params: { month } }),
   })
   const { data: mealPeriodData, isLoading: mealLoading } = useQuery({
-    queryKey: ['revenue/meal-period'],
-    queryFn: () => api.get('/revenue/meal-period'),
+    queryKey: ['revenue/meal-period', month],
+    queryFn: () => api.get('/revenue/meal-period', { params: { month } }),
   })
   const { data: storeRankingData, isLoading: rankLoading } = useQuery({
-    queryKey: ['revenue/store-ranking'],
-    queryFn: () => api.get('/revenue/store-ranking'),
+    queryKey: ['revenue/store-ranking', month],
+    queryFn: () => api.get('/revenue/store-ranking', { params: { month } }),
   })
 
   const pageLoading = dailyLoading || channelLoading || mealLoading || rankLoading
@@ -138,12 +141,15 @@ export function RevenuePage() {
   return (
     <div className="space-y-4">
       {/* 标题 */}
-      <div className="flex items-center gap-2">
-        <BarChart3 className="text-blue-500" size={24} />
-        <div>
-          <h1 className="text-xl font-bold">营收分析</h1>
-          <p className="mt-0.5 text-xs text-muted-foreground">收入结构 · 渠道分布 · 时段分析 · 门店排名 · 2026年4月</p>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <BarChart3 className="text-blue-500" size={24} />
+          <div>
+            <h1 className="text-xl font-bold">营收分析</h1>
+            <p className="mt-0.5 text-xs text-muted-foreground">收入结构 · 渠道分布 · 时段分析 · 门店排名</p>
+          </div>
         </div>
+        <MonthPicker month={month} onChange={setMonth} />
       </div>
 
       {/* 核心指标 */}