封装 Header 和 Navbar 组件，调整用户界面

src/app/admin/layout.tsx

@@ -1,11 +1,9 @@
 import {ReactNode} from 'react'
-import Image from 'next/image'
-import logo from '@/assets/logo.webp'
-import Profile from '@/app/admin/_server/profile'
 import {merge} from '@/lib/utils'
-import Link from 'next/link'
 import {redirect} from 'next/navigation'
 import {getProfile} from '@/actions/auth/auth'
+import Header from './_client/header'
+import Navbar from '@/app/admin/_client/navbar'
 
 export type DashboardLayoutProps = {
   children: ReactNode
@@ -13,88 +11,31 @@ export type DashboardLayoutProps = {
 
 export default async function DashboardLayout(props: DashboardLayoutProps) {
 
+  // ======================
+  // profile
+  // ======================
+
   const user = await getProfile()
   if (!user) {
     return redirect(`/login?redirect=${encodeURIComponent('/admin')}`)
   }
 
+  // ======================
+  // render
+  // ======================
+
   return (
-    <div className={`h-screen flex flex-col overflow-hidden min-w-7xl overflow-y-hidden relative`}>
-      {/* background */}
-      <div className={`-z-10 absolute inset-0 overflow-hidden`}>
-        <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 className={`absolute w-[2000px] h-[2000px] left-[calc(50%-1000px)] -bottom-[1000px] bg-radial from-blue-50 from-10% to-transparent to-50%`}></div>
-      </div>
+    <div className={merge(
+      `h-screen bg-card overflow-hidden min-w-7xl overflow-y-hidden`,
+      `flex items-stretch`,
+    )}>
 
-      {/* content */}
-      <header className={`flex-none basis-20 flex items-stretch`}>
-        {/* logo */}
-        <div className={`flex-none basis-60 flex items-center justify-center`}>
-          <Link href={'/'}><Image src={logo} alt={`logo`} height={40}/></Link>
-        </div>
-
-        {/* title */}
-        <div className={`flex-auto overflow-hidden flex items-center pl-4`}>
-          欢迎来到，蓝狐代理
-        </div>
-
-        {/* profile */}
-        <div className={`flex-none basis-80 flex items-center justify-end pr-4`}>
-          <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'} icon={`🏠`} label={`账户总览`}/>
-          <NavTitle label={`个人信息`}/>
-          <NavItem href={`/admin/profile`} icon={`📝`} label={`个人中心`}/>
-          <NavItem href={`/admin/identify`} icon={`🆔`} label={`实名认证`}/>
-          <NavItem href={`/admin/whitelist`} icon={`🔒`} label={`白名单`}/>
-          <NavItem href={`/admin/bills`} icon={`💰`} label={`我的账单`}/>
-          <NavTitle label={`套餐管理`}/>
-          <NavItem href={`/admin/purchase`} icon={`🛒`} label={`购买套餐`}/>
-          <NavItem href={`/admin/resources`} icon={`📦`} label={`我的套餐`}/>
-          <NavTitle label={`IP 管理`}/>
-          <NavItem href={`/admin/extract`} icon={`📤`} label={`IP提取`}/>
-          <NavItem href={`/admin`} icon={`📜`} label={`IP提取记录`}/>
-          <NavItem href={`/admin`} icon={`👁️`} label={`查看提取IP`}/>
-          <NavItem href={`/admin`} icon={`🗂️`} label={`查看使用IP`}/>
-        </nav>
+      <Navbar/>
 
+      <div className={`flex-auto flex flex-col items-stretch`}>
+        <Header/>
         {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}>
-      <span className={`w-6 h-6 flex items-center justify-center`}>{props.icon}</span>
-      <span className={`ml-2`}>{props.label}</span>
-    </Link>
-  )
-}