93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
|
import {ReactNode} from 'react'
|
|||
|
|
import Image from 'next/image'
|
|||
|
|
import logo from '@/assets/logo.webp'
|
|||
|
|
import Profile from '@/app/admin/_server/profile'
|
|||
|
|
import Wrap from '@/components/wrap'
|
|||
|
|
import {merge} from '@/lib/utils'
|
|||
|
|
import Link from 'next/link'
|
|||
|
|
|
|||
|
|
export type DashboardLayoutProps = {
|
|||
|
|
children: ReactNode
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default async function DashboardLayout(props: DashboardLayoutProps) {
|
|||
|
|
return (
|
|||
|
|
<div className={`h-screen flex flex-col overflow-hidden`}>
|
|||
|
|
{/* background */}
|
|||
|
|
<div className={`-z-10 relative`}>
|
|||
|
|
<div className={`absolute w-screen h-screen bg-gray-50`}></div>
|
|||
|
|
<div className={`absolute w-[2000px] h-[2000px] -left-[1000px] -top-[1000px] bg-radial from-blue-50 from-10% to-transparent to-50%`}></div>
|
|||
|
|
<div className={`absolute w-[2000px] h-[2000px] -right-[1000px] -top-[1000px] bg-radial from-blue-50 from-10% to-transparent to-50%`}></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* content */}
|
|||
|
|
<header className={`flex-none basis-20 flex items-stretch`}>
|
|||
|
|
{/* logo */}
|
|||
|
|
<div className={`flex-none basis-60 flex items-center justify-center`}>
|
|||
|
|
<Image src={logo} alt={`logo`} height={40}/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* title */}
|
|||
|
|
<div className={`flex-auto overflow-hidden flex items-center`}>
|
|||
|
|
欢迎来到，蓝狐代理
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* profile */}
|
|||
|
|
<div className={`flex-none basis-80 flex items-center justify-end`}>
|
|||
|
|
<Profile/>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div className={`flex-auto overflow-hidden flex items-stretch gap-4`}>
|
|||
|
|
<nav className={merge(
|
|||
|
|
`flex-none basis-60 rounded-tr-xl bg-white p-4`,
|
|||
|
|
`flex flex-col overflow-auto`,
|
|||
|
|
)}>
|
|||
|
|
<NavItem href={'/admin/dashboard'} icon={`🏠`} label={`账户总览`}/>
|
|||
|
|
<NavTitle label={`套餐管理`}/>
|
|||
|
|
<NavItem href={`/admin/package`} icon={`🛒`} label={`购买套餐`}/>
|
|||
|
|
<NavItem href={`/admin/package/my`} icon={`📦`} label={`我的套餐`}/>
|
|||
|
|
<NavTitle label={`IP 管理`}/>
|
|||
|
|
<NavItem href={`/admin/ip/extract`} icon={`📤`} label={`IP提取`}/>
|
|||
|
|
<NavItem href={`/admin/ip/extract/record`} icon={`📜`} label={`IP提取记录`}/>
|
|||
|
|
<NavItem href={`/admin/ip/view`} icon={`👁️`} label={`查看提取IP`}/>
|
|||
|
|
<NavItem href={`/admin/ip/view/used`} icon={`🗂️`} label={`查看使用IP`}/>
|
|||
|
|
<NavTitle label={`个人信息`}/>
|
|||
|
|
<NavItem href={`/admin/profile`} icon={`📝`} label={`个人信息修改`}/>
|
|||
|
|
<NavItem href={`/admin/bill`} icon={`💰`} label={`我的账单`}/>
|
|||
|
|
<NavItem href={`/admin/identify`} icon={`🆔`} label={`实名认证`}/>
|
|||
|
|
<NavItem href={`/admin/whitelist`} icon={`🔒`} label={`白名单`}/>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
{props.children}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function NavTitle(props: {
|
|||
|
|
label: string
|
|||
|
|
}) {
|
|||
|
|
return (
|
|||
|
|
<p className={`px-4 py-2 text-sm text-gray-500`}>
|
|||
|
|
{props.label}
|
|||
|
|
</p>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function NavItem(props: {
|
|||
|
|
href: string
|
|||
|
|
icon?: ReactNode
|
|||
|
|
label: string
|
|||
|
|
}) {
|
|||
|
|
return (
|
|||
|
|
<Link className={merge(
|
|||
|
|
`px-4 py-2 flex items-center rounded-md`,
|
|||
|
|
`hover:bg-gray-100`,
|
|||
|
|
)} href={props.href}>
|
|||
|
|
{props.icon}
|
|||
|
|
<span className={`ml-2`}>{props.label}</span>
|
|||
|
|
</Link>
|
|||
|
|
)
|
|||
|
|
}
|