账户总览页优化手机端适配问题

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

@@ -4,23 +4,21 @@ 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 {Card, 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'
-import {useStatus} from '@/lib/states'
 import {useState} from 'react'
-import {useSearchParams} from 'next/navigation'
-import {log} from 'console'
 import {listAccount} from '@/actions/dashboard'
-import {ExtraReq, ExtraResp} from '@/lib/api'
+import {ExtraResp} from '@/lib/api'
 import {toast} from 'sonner'
 import {addDays, format} from 'date-fns'
+import {Label} from '@/components/ui/label'
+
 export default function Charts() {
   const dateStr = '2025-03-05'
   const dateStrA = '2024-03-05'
@@ -80,65 +78,51 @@ export default function Charts() {
   )
 
   return (
-    <Card className="col-start-1 row-start-3 col-span-3 row-span-2">
+    <Card className="h-full">
       <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<FormValues>
-            className={merge(`grid grid-cols-3 gap-4 items-start`)}
-            handler={handler}
-            form={form}
-          >
-            <FormField
-              name="resource_no"
-              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`,
-                }}
-              >
+          <Form<FormValues> className={merge(`flex items-end gap-4 flex-wrap`)} handler={handler} form={form} >
+            <div>
+              <FormField name="resource_no" label={<span className="text-sm">套餐编号</span>} >
                 {({field}) => (
-                  <DatePicker
-                    {...field}
-                    className="w-36"
-                    placeholder="开始时间"
-                    format="yyyy-MM-dd"
-                  />
+                  <Input {...field} className="w-52 "/>
                 )}
               </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>
+            <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>
+                <Button className="h-9 w-20" type="submit">
+                  <span>查询</span>
+                </Button>
+              </div>
             </div>
           </Form>
           <TabsContent value="dynamic" className="overflow-hidden">