72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect } from 'react'
|
|
import { useSession } from 'next-auth/react'
|
|
import { useRouter } from 'next/navigation'
|
|
import Header from '@/components/Header'
|
|
import MonitorTab from '../_components/MonitorTab'
|
|
import { useToast } from '../_hooks/useToast'
|
|
import { cn } from '@/lib/ui-styles'
|
|
|
|
export default function MonitorPage() {
|
|
const { data: session, status } = useSession()
|
|
const router = useRouter()
|
|
const { toast, showToast, dismissToast } = useToast()
|
|
|
|
useEffect(() => {
|
|
if (status === 'unauthenticated') {
|
|
router.push('/login')
|
|
return
|
|
}
|
|
|
|
if (status === 'authenticated' && (session.user as any)?.role !== 'ADMIN') {
|
|
router.push('/')
|
|
}
|
|
}, [status, session, router])
|
|
|
|
if (status === 'loading') {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950">
|
|
<div className="text-sm text-slate-500 dark:text-slate-400">正在加载监控面板...</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!session) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-950">
|
|
<Header session={session} />
|
|
|
|
{toast && (
|
|
<div
|
|
role="status"
|
|
aria-live="polite"
|
|
className={cn(
|
|
'fixed top-6 left-1/2 -translate-x-1/2 z-[100] px-6 py-3 rounded-lg shadow-lg flex items-center gap-3',
|
|
toast.type === 'success' ? 'bg-emerald-500 text-white' : 'bg-red-500 text-white'
|
|
)}
|
|
>
|
|
<span>{toast.message}</span>
|
|
<button
|
|
onClick={dismissToast}
|
|
className="p-1 rounded-full hover:bg-white/20 transition-colors"
|
|
aria-label="关闭提示"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<MonitorTab showToast={showToast} />
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|