变更图标和title提示完善账户总览页面

2025-06-05 16:41:30 +08:00
parent 39975e4349
commit c17c17724f
18 changed files with 434 additions and 137 deletions
--- a/src/app/admin/(dashboard)/_client/charts.tsx
+++ b/src/app/admin/(dashboard)/_client/charts.tsx
@@ -0,0 +1,121 @@
+'use client'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import DashboardChart from "./chart"
+import Image from 'next/image'
+import soon from '../_assets/coming-soon.svg'
+import DatePicker from "@/components/date-picker"
+import { Card, CardHeader, CardTitle, CardContent } 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 mask from '../_assets/Mask group.webp'
+import {Button} from '@/components/ui/button'
+
+
+
+
+
+
+
+export default function Charts() {
+
+  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 formSchema = zod.object({
+    name: zod.string(),
+    age: zod.string(),
+  }) 
+
+  type FormValues = zod.infer<typeof formSchema>
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      age: '',
+    },
+  })
+
+  return (
+    <Card className={`col-start-1 row-start-3 col-span-3 row-span-2`}>
+      <CardContent className={`overflow-hidden`}>
+        <Tabs defaultValue={`dynamic`} className="h-full gap-4">
+          <TabsList>
+            <TabsTrigger value={`dynamic`} className={`data-[state=active]:text-primary`}>
+              {/* <Image src={mask} alt={`Mask group`} width={35} height={35} priority /> */}
+                动态 IP 套餐</TabsTrigger>
+            <TabsTrigger value={`static`} className={`data-[state=active]:text-primary`}>静态 IP 套餐</TabsTrigger>
+          </TabsList>
+          <Form 
+            // className="space-y-6" 
+            form={form} 
+            className={merge(
+              `grid grid-cols-3 gap-4 items-start`,
+            )}
+          >
+            <FormField 
+              name="username"
+              label={<span className={`w-full flex justify-end`}>套餐编号</span>}
+              className={`grid grid-cols-[70px_1fr] grid-rows-[auto_auto] `}
+              classNames={{
+                message: `col-start-2`,
+              }}
+            >
+              {({ field }) => (
+                <Input {...field} className={`w-52`}/>
+              )}
+            </FormField>
+            <div className={`flex items-center `} >
+              <FormField 
+                name={`create_after`}
+                label={<span className={`w-full flex justify-end`}>时间范围筛选</span>}
+                className={`grid grid-cols-[100px_1fr] `}
+                classNames={{
+                  message: `col-start-2`,
+                }}
+              >
+                {({ 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>
+              <Button className={'h-9 w-20'} type="submit">
+                <span>查询</span>
+              </Button>
+            </div> 
+          </Form>
+          <TabsContent value={`dynamic`} className={`overflow-hidden`}>
+            <DashboardChart />
+          </TabsContent>
+          <TabsContent value={`static`} className={`flex flex-col items-center justify-center gap-2`}>
+            <Image alt={`coming soon`} src={soon} />
+            <p>敬请期待</p>
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  )
+}