选择套餐配置链接&更新账户总览数据展示

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

@@ -21,28 +21,20 @@ import {ChartConfig, ChartContainer} from '@/components/ui/chart'
 import {CartesianGrid, XAxis, YAxis, Tooltip, Area, AreaChart, Legend} from 'recharts'
 
 type ChartDataItem = {
-  time: Date
+  date: string
   count: number
-  count2: 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>>(
-    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 [submittedData, setSubmittedData] = useState<ExtraResp<typeof listAccount>>(initialData || [])
   const formSchema = zod.object({
-    resource_no: zod.string().min(11, '请输入正确的套餐编号').max(11, '请输入正确的套餐编号').optional(),
+    resource_no: zod.string().optional(),
     create_after: zod.date().optional(),
     create_before: zod.date().optional(),
   })
@@ -55,26 +47,34 @@ export default function Charts({initialData}: ChartsProps) {
   })
   const handler = form.handleSubmit(
     async (value) => {
-      console.log(value, 'value')
+      // 获取当前日期
+      const today = new Date()
+      // 计算7天前的日期
+      const sevenDaysAgo = new Date()
+      sevenDaysAgo.setDate(today.getDate() - 3)
       const res = {
         resource_no: value.resource_no ?? '',
-        create_after: value.create_after ?? new Date(),
-        create_before: value.create_before ?? new Date(),
+        create_after: value.create_after ?? sevenDaysAgo,
+        create_before: value.create_before ?? today,
       }
+
       const resp = await listAccount(res)
       if (!resp.success) {
         toast.error('接口请求失败：' + resp.message)
         return
       }
-      resp.data.map((_, i) => {
-        let time = new Date()
-        time = addDays(time, i)
-        return {
-          time: format(time, `YYYY年-MM月-dd日`),
-          count: Math.floor(Math.random() * 100) + 1,
-        }
-      })
-      setSubmittedData(resp.data)
+      if (!resp.data || resp.data.length === 0) {
+        toast.info('没有查询到相关数据')
+        setSubmittedData([])
+        return
+      }
+      const formattedData = resp.data.map(item => ({
+        ...item,
+        date: item.date,
+        count: item.count,
+      }))
+
+      setSubmittedData(formattedData)
     },
   )
 
@@ -146,10 +146,6 @@ const config = {
     label: `套餐使用量`,
     color: `var(--color-primary)`,
   },
-  count2: {
-    label: `次套餐使用量`,
-    color: `#82ca9d`,
-  },
 } satisfies ChartConfig
 
 type DashboardChartProps = {
@@ -157,26 +153,27 @@ type DashboardChartProps = {
 }
 
 function DashboardChart(props: DashboardChartProps) {
-  const chartData = props.data.map(item => ({
-    ...item,
-    formattedTime: format(new Date(item.time), 'MM-dd'),
-  }))
+  const chartData = props.data.map((item) => {
+    const date = new Date(item.date.split('T')[0])
+    return {
+      ...item,
+      formattedTime: format(date, 'MM-dd'),
+      fullDate: format(date, 'yyyy-MM-dd'),
+    }
+  })
   return (
     <ChartContainer config={config} className="w-full h-full">
       <AreaChart data={chartData} margin={{top: 0, right: 20, left: 0, bottom: 0}}>
         <CartesianGrid vertical={false}/>
         <XAxis
-          dataKey="formattedTime" // 使用预处理后的字段
+          dataKey="formattedTime"
           tickLine={false}
         />
         <YAxis tickLine={false}/>
         <Tooltip
           animationDuration={100}
-          labelFormatter={value => `日期: ${format(new Date(value), 'yyyy-MM-dd')}`}
-          formatter={(value, name) => {
-            const displayName = name === 'count' ? '主套餐使用量' : '次套餐使用量'
-            return [`${value}`, displayName]
-          }}
+          labelFormatter={value => `日期: ${chartData.find(item => item.formattedTime === value)?.fullDate || value}`}
+          formatter={value => [`${value}`, '套餐使用量']}
         />
         <Area
           type="monotone"
@@ -185,16 +182,7 @@ function DashboardChart(props: DashboardChartProps) {
           fill="#8884d8"
           fillOpacity={0.2}
           strokeWidth={2}
-          name="主套餐使用量"
-        />
-        <Area
-          type="monotone"
-          dataKey="count2"
-          stroke="#82ca9d"
-          fill="#82ca9d"
-          fillOpacity={0.2}
-          strokeWidth={2}
-          name="次套餐使用量"
+          name="套餐使用量"
         />
         <Legend/>
       </AreaChart>

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

@@ -9,12 +9,12 @@ import Charts from './_client/charts'
 import UserCenter from './_client/userCenter'
 import soon from './_assets/coming-soon.svg'
 import mask from './_assets/Mask group.webp'
+import {Button} from '@/components/ui/button'
 
 export type DashboardPageProps = {}
 
 export default async function DashboardPage(props: DashboardPageProps) {
   const resp = await listInitialization()
-  console.log(resp, 'respresprespresprespresp')
   if (!resp.success) {
     return (
       <div className="col-start-4 row-start-3 row-span-2 flex justify-center items-center">
@@ -23,16 +23,7 @@ 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`,
@@ -169,7 +160,12 @@ function Announcements(props: Props) {
       <CardHeader>
         <div className="flex justify-between  gap-2">
           <CardTitle>公告</CardTitle>
-          <span className="text-sm text-primary font-medium">查看更多</span>
+          {/* <Button
+            theme="text"
+            className="text-sm text-primary font-medium hover:text-primary bg-transparent border-none p-0 cursor-pointer"
+          >
+            查看更多
+          </Button> */}
         </div>
       </CardHeader>
       <CardContent className="flex-auto p-0">