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

2025-06-10 12:51:35 +08:00
parent 0f34b938e5
commit 87d638c3fe
3 changed files with 79 additions and 94 deletions
--- a/src/app/admin/(dashboard)/_client/charts.tsx
+++ b/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">
--- a/src/app/admin/(dashboard)/_client/userCenter.tsx
+++ b/src/app/admin/(dashboard)/_client/userCenter.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card'
+import {Card, CardContent} from '@/components/ui/card'
 import {getProfile} from '@/actions/auth'
 import {format} from 'date-fns'
 import {CheckCircleIcon, CircleAlertIcon} from 'lucide-react'
@@ -23,21 +23,21 @@ async function UserCenter() {

  const profile = resp.data
  return (
-    <Card className="col-start-4 row-start-1 row-span-2">
-      <CardContent className="flex-auto flex flex-col justify-between">
+    <Card className="h-full">
+      <CardContent className="flex-auto flex flex-col justify-between gap-4">
        <div className="flex flex-col gap-1">
          <p>{profile.phone}</p>
          <p className="text-sm text-weak">{`最后登录：${format(profile.last_login, 'yyyy-MM-dd HH:mm')}`}</p>
        </div>
        <div className={merge(
-          `flex justify-between  p-2 rounded-md`,
+          `flex justify-between p-2 rounded-md`,
          profile.id_token ? `bg-done-muted` : `bg-warn-muted`,
        )}
        >
          {profile.id_token
            ? (
              <>
-                <div className="flex gap-2 items-center">
+                <div className="flex gap-2 items-center ">
                  <CheckCircleIcon size={20} className="text-done"/>
                  <span>已实名</span>
                </div>
--- a/src/app/admin/(dashboard)/page.tsx
+++ b/src/app/admin/(dashboard)/page.tsx
@@ -30,16 +30,17 @@ export default async function DashboardPage(props: DashboardPageProps) {
  return (
    <Page className={merge(
      `flex-auto grid`,
-      `grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_300px]`,
-      `grid-rows-[150px_200px_minmax(150px,1fr)_minmax(150px,1fr)]`,
+      `grid-cols-1`,
+      `md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_300px]`,
+      `md:grid-rows-[150px_200px_minmax(150px,1fr)_minmax(150px,1fr)]`,
    )}
    >
      {/* banner */}
-      <section className="col-start-1 row-start-1 col-span-3 relative rounded-lg overflow-hidden">
-        <Image src={banner} alt="banner image" className="w-full h-full inset-0 absolute object-cover"/>
+      <section className="md:row-start-1 md:col-start-1 md:col-span-3 relative md:rounded-lg overflow-hidden hidden md:block">
+        <Image src={banner} alt="banner image" className="w-full h-full inset-0 absolute "/>
        <div className="flex flex-col absolute inset-0 justify-center px-8 gap-1">
-          <h3 className="text-2xl text-primary font-medium">代理IP资源，先测后买</h3>
-          <p className="text-primary font-medium">短效/长效/固定IP代理，一站式服务</p>
+          <h3 className="text-2xl text-balance text-primary font-medium">代理IP资源，先测后买</h3>
+          <p className="text-primary text-balance font-medium">短效/长效/固定IP代理，一站式服务</p>
        </div>
      </section>

@@ -54,15 +55,19 @@ export default async function DashboardPage(props: DashboardPageProps) {
      )}

      {/* 图表 */}
-      <Charts/>
+      <div className="col-start-1 row-start-3 col-span-3 row-span-2 hidden md:block"><Charts/></div>

      {/* 信息 */}
-      <UserCenter/>
+      <div className=" md:col-start-4 md:row-start-1 md:row-span-2">
+        <UserCenter/>
+      </div>

      {/* 通知 */}
-      {initData && (
-        <Announcements list={initData.list}/>
-      )}
+      <div className="md:col-start-4 md:row-start-3 md:row-span-2">
+        {initData && (
+          <Announcements list={initData.list}/>
+        )}
+      </div>

    </Page>
  )
@@ -75,14 +80,12 @@ type DashboardChartProps = {
 }
 function Pins(props: DashboardChartProps) {
  return (
-    <>
-
+    <div className="flex md:row-start-2 md:col-start-1 md:col-span-3 gap-4">
      {/* 短效 */}
-      <Card className="col-start-1 row-start-2 py-4">
+      <Card className="flex-1">
        <CardHeader>
          <CardTitle>
-            <Image src={mask} alt="Mask group" width={35} height={35} priority/>
-            {' '}
+            <Image src={mask} alt="Mask group" priority/>
            短效动态套餐
          </CardTitle>
        </CardHeader>
@@ -91,52 +94,49 @@ function Pins(props: DashboardChartProps) {
            <h4>包时</h4>
            <p className="flex flex-col items-end">
              <span className="text-sm text-weak">当日可提取数量</span>
-              <span className="text-lg">{props.short_term ? props.short_term : '1'}</span>
+              <span className="text-sm">{props.short_term ? props.short_term : '1'}</span>
            </p>
          </div>
          <div className="border-b"></div>
          <div className="flex-1 flex items-center justify-between">
-            <h4>包量</h4>
+            <h4 className="text-balance">包量</h4>
            <p className="flex flex-col items-end">
              <span className="text-sm text-weak">剩余可提取数量</span>
-              <span className="text-lg">{props.short_term_monthly}</span>
+              <span className="text-sm">{props.short_term_monthly}</span>
            </p>
          </div>
        </CardContent>
      </Card>

      {/* 长效 */}
-      <Card className="col-start-2 row-start-2">
+      <Card className="flex-1">
        <CardHeader>
          <CardTitle>
-            <Image src={mask} alt="Mask group" width={35} height={35} priority/>
-            {' '}
+            <Image src={mask} alt="Mask group" priority/>
            长效动态套餐
          </CardTitle>
        </CardHeader>
        <CardContent className="flex-auto flex flex-col gap-2">
-          {/* <Image alt={`coming soon`} src={soon} />
-        <p>敬请期待</p> */}
          <div className="flex-1 flex items-center justify-between">
-            <h4>包时</h4>
+            <h4 className="text-balance">包时</h4>
            <p className="flex flex-col items-end">
-              <span className="text-sm text-weak">当日可提取数量</span>
-              <span className="text-lg">{props.long_term}</span>
+              <span className="text-sm  text-weak" >当日可提取数量</span>
+              <span className="text-sm">{props.long_term}</span>
            </p>
          </div>
          <div className="border-b"></div>
          <div className="flex-1 flex items-center justify-between">
-            <h4>包量</h4>
+            <h4 className="text-balance">包量</h4>
            <p className="flex flex-col items-end">
-              <span className="text-sm text-weak">剩余可提取数量</span>
-              <span className="text-lg">{props.long_term_monthly}</span>
+              <span className="text-sm  text-weak">剩余可提取数量</span>
+              <span className="text-sm">{props.long_term_monthly}</span>
            </p>
          </div>
        </CardContent>
      </Card>

      {/* 固定 */}
-      <Card className="col-start-3 row-start-2 py-4">
+      <Card className="flex-1 py-4 h-full hidden xl:block ">
        <CardHeader className="px-4">
          <CardTitle>固定IP套餐</CardTitle>
        </CardHeader>
@@ -145,7 +145,8 @@ function Pins(props: DashboardChartProps) {
          <p>敬请期待</p>
        </CardContent>
      </Card>
-    </>
+
+    </div>
  )
 }

@@ -158,17 +159,17 @@ type Props = {
 }
 function Announcements(props: Props) {
  return (
-    <Card className="col-start-4 row-start-3 row-span-2">
+    <Card className="h-full">
      <CardHeader>
        <div className="flex justify-between  gap-2">
          <CardTitle>公告</CardTitle>
-          <span className="text-sm text-weak">查看更多</span>
+          <span className="text-sm text-primary font-medium">查看更多</span>
        </div>
      </CardHeader>
      <CardContent className="flex-auto p-0">
        {!props.list.length
          ? (
-            <div className="flex flex-col items-center justify-center gap-2 h-full">
+            <div className="flex flex-col items-center justify-center gap-8 ">
              <Image alt="coming soon" src={soon}/>
              <p>暂无公告</p>
            </div>