lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 13 Activity

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

Browse Source
This commit is contained in:
Eamon-meng
2025-06-10 12:51:35 +08:00
parent 0f34b938e5
commit 87d638c3fe
3 changed files with 79 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/admin/(dashboard)/_client/charts.tsx
View File

@@ -4,23 +4,21 @@ import DashboardChart from './chart'
import Image from 'next/image' import Image from 'next/image'
import soon from '../_assets/coming-soon.svg' import soon from '../_assets/coming-soon.svg'
import DatePicker from '@/components/date-picker' 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 {Form, FormField} from '@/components/ui/form'
import {Input} from '@/components/ui/input' import {Input} from '@/components/ui/input'
import {zodResolver} from '@hookform/resolvers/zod' import {zodResolver} from '@hookform/resolvers/zod'
import {useForm} from 'react-hook-form' import {useForm} from 'react-hook-form'
import zod from 'zod' import zod from 'zod'
import {merge} from '@/lib/utils' import {merge} from '@/lib/utils'
import mask from '../_assets/Mask group.webp'
import {Button} from '@/components/ui/button' import {Button} from '@/components/ui/button'
import {useStatus} from '@/lib/states'
import {useState} from 'react' import {useState} from 'react'
import {useSearchParams} from 'next/navigation'
import {log} from 'console'
import {listAccount} from '@/actions/dashboard' import {listAccount} from '@/actions/dashboard'
import {ExtraReq, ExtraResp} from '@/lib/api' import {ExtraResp} from '@/lib/api'
import {toast} from 'sonner' import {toast} from 'sonner'
import {addDays, format} from 'date-fns' import {addDays, format} from 'date-fns'
import {Label} from '@/components/ui/label'
export default function Charts() { export default function Charts() {
const dateStr = '2025-03-05' const dateStr = '2025-03-05'
const dateStrA = '2024-03-05' const dateStrA = '2024-03-05'
@@ -80,42 +78,27 @@ export default function Charts() {
) )
return ( return (
<Card className="col-start-1 row-start-3 col-span-3 row-span-2"> <Card className="h-full">
<CardContent className="overflow-hidden"> <CardContent className="overflow-hidden">
<Tabs defaultValue="dynamic" className="h-full gap-4"> <Tabs defaultValue="dynamic" className="h-full gap-4">
<TabsList> <TabsList>
<TabsTrigger value="dynamic" className="data-[state=active]:text-primary"> <TabsTrigger value="dynamic" className="data-[state=active]:text-primary">
{/* <Image src={mask} alt={`Mask group`} width={35} height={35} priority /> */}
动态 IP 套餐 动态 IP 套餐
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="static" className="data-[state=active]:text-primary">静态 IP 套餐</TabsTrigger> <TabsTrigger value="static" className="data-[state=active]:text-primary">静态 IP 套餐</TabsTrigger>
</TabsList> </TabsList>
<Form<FormValues> <Form<FormValues> className={merge(`flex items-end gap-4 flex-wrap`)} handler={handler} form={form} >
className={merge(`grid grid-cols-3 gap-4 items-start`)} <div>
handler={handler} <FormField name="resource_no" label={<span className="text-sm">套餐编号</span>} >
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}) => ( {({field}) => (
<Input {...field} className="w-52 "/> <Input {...field} className="w-52 "/>
)} )}
</FormField> </FormField>
<div className={`flex items-center `} > </div>
<FormField <div className="flex flex-col gap-2">
name="create_after" <Label className="text-sm">时间范围筛选</Label>
label={<span className="w-full flex justify-end">时间范围筛选</span>} <div className="flex items-center">
className={`grid grid-cols-[100px_1fr] `} <FormField name="create_after">
classNames={{
message: `col-start-2`,
}}
>
{({field}) => ( {({field}) => (
<DatePicker <DatePicker
{...field} {...field}
@@ -140,6 +123,7 @@ export default function Charts() {
<span>查询</span> <span>查询</span>
</Button> </Button>
</div> </div>
</div>
</Form> </Form>
<TabsContent value="dynamic" className="overflow-hidden"> <TabsContent value="dynamic" className="overflow-hidden">
{submittedData && <DashboardChart data={submittedData}/>} {submittedData && <DashboardChart data={submittedData}/>}

6
src/app/admin/(dashboard)/_client/userCenter.tsx
View File

@@ -1,5 +1,5 @@
import Image from 'next/image' 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 {getProfile} from '@/actions/auth'
import {format} from 'date-fns' import {format} from 'date-fns'
import {CheckCircleIcon, CircleAlertIcon} from 'lucide-react' import {CheckCircleIcon, CircleAlertIcon} from 'lucide-react'
@@ -23,8 +23,8 @@ async function UserCenter() {
const profile = resp.data const profile = resp.data
return ( return (
<Card className="col-start-4 row-start-1 row-span-2"> <Card className="h-full">
<CardContent className="flex-auto flex flex-col justify-between"> <CardContent className="flex-auto flex flex-col justify-between gap-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<p>{profile.phone}</p> <p>{profile.phone}</p>
<p className="text-sm text-weak">{`最后登录：${format(profile.last_login, 'yyyy-MM-dd HH:mm')}`}</p> <p className="text-sm text-weak">{`最后登录：${format(profile.last_login, 'yyyy-MM-dd HH:mm')}`}</p>

59
src/app/admin/(dashboard)/page.tsx
View File

@@ -30,16 +30,17 @@ export default async function DashboardPage(props: DashboardPageProps) {
return ( return (
<Page className={merge( <Page className={merge(
`flex-auto grid`, `flex-auto grid`,
`grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_300px]`, `grid-cols-1`,
`grid-rows-[150px_200px_minmax(150px,1fr)_minmax(150px,1fr)]`, `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 */} {/* banner */}
<section className="col-start-1 row-start-1 col-span-3 relative rounded-lg overflow-hidden"> <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 object-cover"/> <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"> <div className="flex flex-col absolute inset-0 justify-center px-8 gap-1">
<h3 className="text-2xl text-primary font-medium">代理IP资源，先测后买</h3> <h3 className="text-2xl text-balance text-primary font-medium">代理IP资源，先测后买</h3>
<p className="text-primary font-medium">短效/长效/固定IP代理，一站式服务</p> <p className="text-primary text-balance font-medium">短效/长效/固定IP代理，一站式服务</p>
</div> </div>
</section> </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>
{/* 信息 */} {/* 信息 */}
<div className=" md:col-start-4 md:row-start-1 md:row-span-2">
<UserCenter/> <UserCenter/>
</div>
{/* 通知 */} {/* 通知 */}
<div className="md:col-start-4 md:row-start-3 md:row-span-2">
{initData && ( {initData && (
<Announcements list={initData.list}/> <Announcements list={initData.list}/>
)} )}
</div>
</Page> </Page>
) )
@@ -75,14 +80,12 @@ type DashboardChartProps = {
} }
function Pins(props: DashboardChartProps) { function Pins(props: DashboardChartProps) {
return ( 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> <CardHeader>
<CardTitle> <CardTitle>
<Image src={mask} alt="Mask group" width={35} height={35} priority/> <Image src={mask} alt="Mask group" priority/>
{' '}
短效动态套餐 短效动态套餐
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
@@ -91,52 +94,49 @@ function Pins(props: DashboardChartProps) {
<h4>包时</h4> <h4>包时</h4>
<p className="flex flex-col items-end"> <p className="flex flex-col items-end">
<span className="text-sm text-weak">当日可提取数量</span> <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> </p>
</div> </div>
<div className="border-b"></div> <div className="border-b"></div>
<div className="flex-1 flex items-center justify-between"> <div className="flex-1 flex items-center justify-between">
<h4>包量</h4> <h4 className="text-balance">包量</h4>
<p className="flex flex-col items-end"> <p className="flex flex-col items-end">
<span className="text-sm text-weak">剩余可提取数量</span> <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> </p>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
{/* 长效 */} {/* 长效 */}
<Card className="col-start-2 row-start-2"> <Card className="flex-1">
<CardHeader> <CardHeader>
<CardTitle> <CardTitle>
<Image src={mask} alt="Mask group" width={35} height={35} priority/> <Image src={mask} alt="Mask group" priority/>
{' '}
长效动态套餐 长效动态套餐
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="flex-auto flex flex-col gap-2"> <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"> <div className="flex-1 flex items-center justify-between">
<h4>包时</h4> <h4 className="text-balance">包时</h4>
<p className="flex flex-col items-end"> <p className="flex flex-col items-end">
<span className="text-sm text-weak" >当日可提取数量</span> <span className="text-sm text-weak" >当日可提取数量</span>
<span className="text-lg">{props.long_term}</span> <span className="text-sm">{props.long_term}</span>
</p> </p>
</div> </div>
<div className="border-b"></div> <div className="border-b"></div>
<div className="flex-1 flex items-center justify-between"> <div className="flex-1 flex items-center justify-between">
<h4>包量</h4> <h4 className="text-balance">包量</h4>
<p className="flex flex-col items-end"> <p className="flex flex-col items-end">
<span className="text-sm text-weak">剩余可提取数量</span> <span className="text-sm text-weak">剩余可提取数量</span>
<span className="text-lg">{props.long_term_monthly}</span> <span className="text-sm">{props.long_term_monthly}</span>
</p> </p>
</div> </div>
</CardContent> </CardContent>
</Card> </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"> <CardHeader className="px-4">
<CardTitle>固定IP套餐</CardTitle> <CardTitle>固定IP套餐</CardTitle>
</CardHeader> </CardHeader>
@@ -145,7 +145,8 @@ function Pins(props: DashboardChartProps) {
<p>敬请期待</p> <p>敬请期待</p>
</CardContent> </CardContent>
</Card> </Card>
</>
</div>
) )
} }
@@ -158,17 +159,17 @@ type Props = {
} }
function Announcements(props: Props) { function Announcements(props: Props) {
return ( return (
<Card className="col-start-4 row-start-3 row-span-2"> <Card className="h-full">
<CardHeader> <CardHeader>
<div className="flex justify-between gap-2"> <div className="flex justify-between gap-2">
<CardTitle>公告</CardTitle> <CardTitle>公告</CardTitle>
<span className="text-sm text-weak">查看更多</span> <span className="text-sm text-primary font-medium">查看更多</span>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="flex-auto p-0"> <CardContent className="flex-auto p-0">
{!props.list.length {!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}/> <Image alt="coming soon" src={soon}/>
<p>暂无公告</p> <p>暂无公告</p>
</div> </div>