更新用户总览图表，删除多余的console.log

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

@@ -1,24 +1,20 @@
 'use client'
-import {Tabs, TabsList, TabsTrigger, TabsContent} from '@/components/ui/tabs'
-import Image from 'next/image'
-import soon from '../_assets/coming-soon.svg'
 import DatePicker from '@/components/date-picker'
-import {Card, CardContent} from '@/components/ui/card'
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card'
 import {Form, FormField} from '@/components/ui/form'
-import {Input} from '@/components/ui/input'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {useForm} from 'react-hook-form'
 import zod from 'zod'
-import {merge} from '@/lib/utils'
+import {compareAsc, format, addDays} from 'date-fns'
 import {Button} from '@/components/ui/button'
 import {useState} from 'react'
 import {statisticsResourceUsage} from '@/actions/dashboard'
 import {ExtraResp} from '@/lib/api'
 import {toast} from 'sonner'
-import {compareAsc, format, subDays} from 'date-fns'
-import {Label} from '@/components/ui/label'
 import {ChartConfig, ChartContainer} from '@/components/ui/chart'
 import {CartesianGrid, XAxis, YAxis, Tooltip, Area, AreaChart, Legend} from 'recharts'
+import mask from '../_assets/Mask group.webp'
+import Image from 'next/image'
 
 type ChartsProps = {
   initialData?: ExtraResp<typeof statisticsResourceUsage>
@@ -27,38 +23,38 @@ type ChartsProps = {
 export default function Charts({initialData}: ChartsProps) {
   // const [submittedData, setSubmittedData] = useState<ExtraReq<typeof listAccount>>()
   const [submittedData, setSubmittedData] = useState<ExtraResp<typeof statisticsResourceUsage>>(initialData || [])
-  const formSchema = zod.object({
-    resource_no: zod.string().optional(),
-    create_after: zod.date().optional(),
-    create_before: zod.date().optional(),
+  const filterSchema = zod.object({
+    time_start: zod.date().optional(),
+    time_end: zod.date().optional(),
   })
-  type FormValues = zod.infer<typeof formSchema>
+  type FilterSchema = zod.infer<typeof filterSchema>
 
-  const form = useForm<FormValues>({
-    resolver: zodResolver(formSchema),
+  const filterForm = useForm<FilterSchema>({
+    resolver: zodResolver(filterSchema),
     defaultValues: {
+      time_start: undefined,
+      time_end: undefined,
     },
   })
-  const handler = form.handleSubmit(
-    async (value) => {
-      const today = new Date()
-      const sevenDaysAgo = subDays(today, 7)
-      const res = {
-        resource_no: value.resource_no ?? '',
-        create_after: value.create_after ?? sevenDaysAgo,
-        create_before: value.create_before ?? today,
-      }
+  const handler = filterForm.handleSubmit(async () => {
+    const {time_start, time_end} = filterForm.getValues()
 
-      const resp = await statisticsResourceUsage(res)
-      if (!resp.success) {
-        toast.error('接口请求失败：' + resp.message)
-        return
-      }
-      if (!resp.data || resp.data.length === 0) {
-        toast.info('没有查询到相关数据')
-        setSubmittedData([])
-        return
-      }
+    const params = {
+      time_start: time_start,
+      time_end: time_end ? addDays(time_end, 1) : undefined,
+    }
+    const resp = await statisticsResourceUsage(params)
+    if (!resp.success) {
+      toast.error('接口请求失败：' + resp.message)
+      return
+    }
+
+    if (!resp.data || resp.data.length === 0) {
+      toast.info('没有查询到相关数据')
+      setSubmittedData([])
+      return
+    }
+    if (resp.success && resp.data) {
       const formattedData = resp.data.map(item => ({
         ...item,
         date: item.date,
@@ -66,61 +62,60 @@ export default function Charts({initialData}: ChartsProps) {
       }))
       formattedData.sort((a, b) => compareAsc(a.date, b.date))
       setSubmittedData(formattedData)
-    },
-  )
+    }
+    else {
+      throw new Error('获取数据失败')
+    }
+  })
 
   return (
     <Card className="h-full">
-      <CardContent className="overflow-hidden">
-        <Tabs defaultValue="dynamic" className="h-full gap-4">
-          <TabsList className="h-9">
-            <TabsTrigger value="dynamic" className="data-[state=active]:text-primary">
-              短效动态
-            </TabsTrigger>
-            <TabsTrigger value="static" className="data-[state=active]:text-primary">
-              长效动态
-            </TabsTrigger>
-          </TabsList>
-          <Form<FormValues> className={merge(`flex items-end gap-4 flex-wrap`)} handler={handler} form={form} >
-            <div className="flex flex-col gap-2">
-              <Label className="text-sm">时间范围筛选</Label>
-              <div className="flex items-center">
-                <FormField name="create_after">
-                  {({field}) => (
-                    <DatePicker
-                      {...field}
-                      className="w-36"
-                      placeholder="开始时间"
-                      format="yyyy-MM-dd"
-                    />
-                  )}
-                </FormField>
-                <span className="px-1">-</span>
-                <FormField name="create_before">
-                  {({field}) => (
-                    <DatePicker
-                      {...field}
-                      className="w-36"
-                      placeholder="结束时间"
-                      format="yyyy-MM-dd"
-                    />
-                  )}
-                </FormField>
-              </div>
+      <CardContent className="overflow-hidden flex flex-col">
+        <CardHeader className="flex-none">
+          <CardTitle>
+            <Image src={mask} alt="Mask group" priority/>
+            每日动态套餐
+          </CardTitle>
+        </CardHeader>
+        <Form form={filterForm} handler={handler} className="flex-none flex flex-wrap justify-end mb-4 gap-4">
+          <fieldset className="flex flex-col gap-2 items-start">
+            <div className="flex gap-1 items-center">
+              <FormField<FilterSchema, 'time_start'> name="time_start">
+                {({field}) => (
+                  <DatePicker
+                    placeholder="选择开始时间"
+                    {...field}
+                    format="yyyy-MM-dd"
+                  />
+                )}
+              </FormField>
+              <span>-</span>
+              <FormField<FilterSchema, 'time_end'> name="time_end">
+                {({field}) => (
+                  <DatePicker
+                    placeholder="选择结束时间"
+                    {...field}
+                    format="yyyy-MM-dd"
+                  />
+                )}
+              </FormField>
             </div>
-            <div className="flex gap-4">
-              <Button className="h-9" type="submit">
-                <span>查询</span>
-              </Button>
-            </div>
-          </Form>
-          <TabsContent value="dynamic" className="overflow-hidden">
-            {submittedData && <DashboardChart data={submittedData}/>}
-          </TabsContent>
-          <TabsContent value="static" className="flex flex-col items-center justify-center gap-2">
-            <LongChart/>
-          </TabsContent>
-        </Tabs>
+          </fieldset>
+          <Button className="h-9" type="submit">查询</Button>
+          <Button
+            theme="outline"
+            className="h-9"
+            onClick={() => {
+              filterForm.reset({
+                time_start: undefined,
+                time_end: undefined,
+              })
+              handler()
+            }}>
+            重置
+          </Button>
+        </Form>
+        {submittedData && <DashboardChart data={submittedData}/>}
       </CardContent>
     </Card>
   )
@@ -151,7 +146,7 @@ function DashboardChart(props: DashboardChartProps) {
     }
   })
   return (
-    <ChartContainer config={config} className="w-full h-full">
+    <ChartContainer config={config} className="w-full flex-auto overflow-hidden">
       <AreaChart data={chartData} margin={{top: 0, right: 20, left: 0, bottom: 0}}>
         <CartesianGrid vertical={false}/>
         <XAxis
@@ -178,33 +173,3 @@ function DashboardChart(props: DashboardChartProps) {
     </ChartContainer>
   )
 }
-
-function LongChart() {
-  return (
-    <ChartContainer config={config} className="w-full h-full">
-      <AreaChart margin={{top: 0, right: 20, left: 0, bottom: 0}}>
-        <CartesianGrid vertical={false}/>
-        <XAxis
-          dataKey="formattedTime"
-          tickLine={false}
-        />
-        <YAxis tickLine={false}/>
-        <Tooltip
-          animationDuration={100}
-          // labelFormatter={value => `日期: ${chartData.find(item => item.formattedTime === value)?.fullDate || value}`}
-          formatter={value => [`${value}`, '套餐使用量']}
-        />
-        <Area
-          type="monotone"
-          dataKey="count"
-          stroke="#8884d8"
-          fill="#8884d8"
-          fillOpacity={0.2}
-          strokeWidth={2}
-          name="套餐使用量"
-        />
-        <Legend/>
-      </AreaChart>
-    </ChartContainer>
-  )
-}