优化登录流程，添加白名单管理功能，调整页面布局与样式

src/app/admin/layout.tsx

@@ -0,0 +1,92 @@
+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>
+  )
+}