修复非桌面端布局遮罩层的遮挡状态;修复后台首页组件渲染问题
This commit is contained in:
@@ -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
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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`,
|
||||
|
||||
Reference in New Issue
Block a user