更新支付传参&首页接口&菜单栏导航后tab切换

src/app/admin/(dashboard)/_client/charts.tsx

@@ -18,34 +18,41 @@ import {toast} from 'sonner'
 import {addDays, format} from 'date-fns'
 import {Label} from '@/components/ui/label'
 import {ChartConfig, ChartContainer} from '@/components/ui/chart'
-import {CartesianGrid, XAxis, YAxis, Tooltip, Area, AreaChart} from 'recharts'
+import {CartesianGrid, XAxis, YAxis, Tooltip, Area, AreaChart, Legend} from 'recharts'
 
-export default function Charts() {
-  const dateStr = '2025-03-05'
-  const dateStrA = '2024-03-05'
-  const date = new Date(dateStr)
-  const dateA = new Date(dateStrA)
+type ChartDataItem = {
+  time: Date
+  count: number
+  count2: number
+}
+
+type ChartData = ChartDataItem[]
+
+type ChartsProps = {
+  initialData?: ExtraResp<typeof listAccount>
+}
+
+export default function Charts({initialData}: ChartsProps) {
   // const [submittedData, setSubmittedData] = useState<ExtraReq<typeof listAccount>>()
-  const [submittedData, setSubmittedData] = useState<ExtraResp<typeof listAccount>>([
-    {time: new Date(), count: 80},
-    {time: date, count: 100},
-    {time: dateA, count: 50},
-    // {time: `2023-10-03`, count: 80},
-    // {time: `2023-10-04`, count: 200},
-    // {time: `2023-10-05`, count: 150},
-  ])
-  const data = [
-    {time: `2023-10-01`, count: 100},
-    {time: `2023-10-02`, count: 50},
-    {time: `2023-10-03`, count: 80},
-    {time: `2023-10-04`, count: 200},
-    {time: `2023-10-05`, count: 150},
-  ]
-
+  const [submittedData, setSubmittedData] = useState<ExtraResp<typeof listAccount>>(
+    initialData || [
+      {time: new Date(), count: 80, count2: 64},
+      {time: new Date('2025-03-05'), count: 100, count2: 80},
+      {time: new Date('2024-03-05'), count: 50, count2: 40},
+    ],
+  )
   const formSchema = zod.object({
     resource_no: zod.string().min(11, '请输入正确的套餐编号').max(11, '请输入正确的套餐编号').optional(),
     create_after: zod.date().optional(),
     create_before: zod.date().optional(),
+  }).refine((data) => {
+    if (data.create_after && data.create_before) {
+      return data.create_before >= data.create_after
+    }
+    return true
+  }, {
+    message: '结束时间不得早于开始时间',
+    path: ['create_before'],
   })
   type FormValues = zod.infer<typeof formSchema>
 
@@ -147,6 +154,10 @@ const config = {
     label: `套餐使用量`,
     color: `var(--color-primary)`,
   },
+  count2: {
+    label: `次套餐使用量`,
+    color: `#82ca9d`,
+  },
 } satisfies ChartConfig
 
 type DashboardChartProps = {
@@ -154,16 +165,46 @@ type DashboardChartProps = {
 }
 
 function DashboardChart(props: DashboardChartProps) {
+  const chartData = props.data.map(item => ({
+    ...item,
+    formattedTime: format(new Date(item.time), 'MM-dd'),
+  }))
   return (
     <ChartContainer config={config} className="w-full h-full">
-      <AreaChart data={props.data} margin={{top: 0, right: 20, left: 0, bottom: 0}}>
+      <AreaChart data={chartData} margin={{top: 0, right: 20, left: 0, bottom: 0}}>
         <CartesianGrid vertical={false}/>
-        <XAxis dataKey="time" tickLine={false}/>
-        <XAxis dataKey="time" tickLine={false}/>
+        <XAxis
+          dataKey="formattedTime" // 使用预处理后的字段
+          tickLine={false}
+        />
         <YAxis tickLine={false}/>
-        <Tooltip animationDuration={100}/>
-        <Area dataKey="count" radius={20} className="fill-[var(--color-primary)]"/>
-        <Area dataKey="count" radius={20} className="fill-[var(--color-primary)]"/>
+        <Tooltip
+          animationDuration={100}
+          labelFormatter={value => `日期: ${format(new Date(value), 'yyyy-MM-dd')}`}
+          formatter={(value, name) => {
+            const displayName = name === 'count' ? '主套餐使用量' : '次套餐使用量'
+            return [`${value}`, displayName]
+          }}
+        />
+        <Area
+          type="monotone"
+          dataKey="count"
+          stroke="#8884d8"
+          fill="#8884d8"
+          fillOpacity={0.2}
+          strokeWidth={2}
+          name="主套餐使用量"
+        />
+        <Area
+          type="monotone"
+          dataKey="count2"
+          stroke="#82ca9d"
+          fill="#82ca9d"
+          fillOpacity={0.2}
+          strokeWidth={2}
+          name="次套餐使用量"
+        />
+        <Legend/>
       </AreaChart>
     </ChartContainer>
   )

src/app/admin/(dashboard)/page.tsx

@@ -23,7 +23,16 @@ export default async function DashboardPage(props: DashboardPageProps) {
     )
   }
   const initData = resp.data
-
+  // 添加模拟的 usage 数据（如果 API 返回的 usage 为 null）
+  // if (!initData.usage) {
+  //   initData.usage = [
+  //     {time: new Date('2025-03-01'), count: 100, count2: 80},
+  //     {time: new Date('2025-03-02'), count: 150, count2: 120},
+  //     {time: new Date('2025-03-03'), count: 80, count2: 64},
+  //     {time: new Date('2025-03-04'), count: 200, count2: 160},
+  //     {time: new Date('2025-03-05'), count: 120, count2: 96},
+  //   ]
+  // }
   return (
     <Page className={merge(
       `flex-auto grid`,
@@ -52,7 +61,7 @@ export default async function DashboardPage(props: DashboardPageProps) {
       )}
 
       {/* 图表 */}
-      <div className="col-start-1 row-start-3 col-span-3 row-span-2 hidden md:block"><Charts/></div>
+      <div className="col-start-1 row-start-3 col-span-3 row-span-2 hidden md:block"><Charts initialData={initData.usage}/></div>
 
       {/* 信息 */}
       <div className=" md:col-start-4 md:row-start-1 md:row-span-2">