修复非桌面端布局遮罩层的遮挡状态;修复后台首页组件渲染问题

This commit is contained in:
2025-06-20 15:29:18 +08:00
parent 9cd5710da1
commit b295fea52f
3 changed files with 35 additions and 37 deletions

View File

@@ -1,33 +0,0 @@
import {ChartConfig, ChartContainer} from '@/components/ui/chart'
import {Area, AreaChart, Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis} from 'recharts'
import {addDays, format} from 'date-fns'
import {listAccount} from '@/actions/dashboard'
import {ExtraReq, ExtraResp} from '@/lib/api'
const config = {
count: {
label: `套餐使用量`,
color: `var(--color-primary)`,
},
} satisfies ChartConfig
type DashboardChartProps = {
data: ExtraResp<typeof listAccount>
}
async function DashboardChart(props: DashboardChartProps) {
return (
<ChartContainer config={config} className="w-full h-full">
<AreaChart data={props.data} margin={{top: 0, right: 20, left: 0, bottom: 0}}>
<CartesianGrid vertical={false}/>
<XAxis dataKey="time" tickLine={false}/>
<XAxis dataKey="time" tickLine={false}/>
<YAxis tickLine={false}/>
<Tooltip animationDuration={100}/>
<Area dataKey="count" radius={20} className="fill-[var(--color-primary)]"/>
<Area dataKey="count" radius={20} className="fill-[var(--color-primary)]"/>
</AreaChart>
</ChartContainer>
)
}
export default DashboardChart

View File

@@ -1,6 +1,5 @@
'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'
@@ -18,6 +17,8 @@ import {ExtraResp} from '@/lib/api'
import {toast} from 'sonner'
import {addDays, format} from 'date-fns'
import {Label} from '@/components/ui/label'
import {ChartConfig, ChartContainer} from '@/components/ui/chart'
import {CartesianGrid, XAxis, YAxis, Tooltip, Area, AreaChart} from 'recharts'
export default function Charts() {
const dateStr = '2025-03-05'
@@ -84,9 +85,11 @@ export default function Charts() {
<Tabs defaultValue="dynamic" className="h-full gap-4">
<TabsList className="h-9">
<TabsTrigger value="dynamic" className="data-[state=active]:text-primary">
IP
</TabsTrigger>
<TabsTrigger value="static" className="data-[state=active]:text-primary">
</TabsTrigger>
<TabsTrigger value="static" className="data-[state=active]:text-primary"> IP </TabsTrigger>
</TabsList>
<Form<FormValues> className={merge(`flex items-end gap-4 flex-wrap`)} handler={handler} form={form} >
<FormField name="resource_no" label={<span className="text-sm"></span>}>
@@ -138,3 +141,30 @@ export default function Charts() {
</Card>
)
}
const config = {
count: {
label: `套餐使用量`,
color: `var(--color-primary)`,
},
} satisfies ChartConfig
type DashboardChartProps = {
data: ExtraResp<typeof listAccount>
}
function DashboardChart(props: DashboardChartProps) {
return (
<ChartContainer config={config} className="w-full h-full">
<AreaChart data={props.data} margin={{top: 0, right: 20, left: 0, bottom: 0}}>
<CartesianGrid vertical={false}/>
<XAxis dataKey="time" tickLine={false}/>
<XAxis dataKey="time" tickLine={false}/>
<YAxis tickLine={false}/>
<Tooltip animationDuration={100}/>
<Area dataKey="count" radius={20} className="fill-[var(--color-primary)]"/>
<Area dataKey="count" radius={20} className="fill-[var(--color-primary)]"/>
</AreaChart>
</ChartContainer>
)
}

View File

@@ -49,10 +49,11 @@ export default function Layout(props: AdminLayoutProps) {
<rect width="100%" height="100%" className="fill-card" mask="url(#top-left-rounded-mask)"/>
</svg>
{/* 遮罩层 */}
<div
data-expand={navbar}
className={merge(
`md:hidden`,
`lg:hidden`,
`transition-opacity duration-300 ease-in-out`,
`col-start-1 row-start-1 col-span-2 row-span-2 bg-black/50 z-10`,
`data-[expand=true]:opacity-100 data-[expand=false]:opacity-0`,