完善产品购买页面，抽取公共组件，优化导航链接

src/app/admin/(dashboard)/page.tsx

@@ -3,7 +3,7 @@ export type DashboardPageProps = {}
 export default async function DashboardPage(props: DashboardPageProps) {
 
   return (
-    <main className={`flex-auto overflow-hidden grid grid-cols-4 grid-rows-4 p-4 pt-0 gap-4`}>
+    <main className={`flex-auto overflow-hidden grid grid-cols-4 grid-rows-4 gap-4 mr-4 mb-4`}>
       {/* banner */}
       <section className={`col-start-1 row-start-1 col-span-3 bg-red-200`}>
 

src/app/admin/extract/page.tsx

@@ -0,0 +1,10 @@
+import {ReactNode} from 'react'
+
+export type ExtractPageProps = {
+}
+
+export default async function ExtractPage(props: ExtractPageProps) {
+  return (
+    <main></main>
+  )
+}

src/app/admin/identify/page.tsx

@@ -0,0 +1,39 @@
+import {Button} from '@/components/ui/button'
+import banner from './_assets/banner.webp'
+import personal from './_assets/personal.webp'
+import Image from 'next/image'
+
+export type IdentifyPageProps = {}
+
+export default async function IdentifyPage(props: IdentifyPageProps) {
+  return (
+    <main className={`flex-auto flex items-stretch gap-4 pb-4 pr-4`}>
+      <div className={`flex-3/4 flex flex-col bg-white rounded-lg overflow-hidden gap-16`}>
+
+        {/* banner */}
+        <section className={`flex-none basis-40 relative flex flex-col gap-4 pl-8 justify-center`}>
+          <Image src={banner} alt={`背景图`} aria-hidden className={`absolute inset-0 w-full h-full object-cover`}/>
+          <h3 className={`text-lg font-bold z-10 relative`}>蓝狐HTTP邀请您参与【先测后买】服务</h3>
+          <p className={`text-sm text-gray-600 z-10 relative`}>为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
+        </section>
+
+        <div className={`flex-auto flex justify-center items-start`}>
+          {/* 个人认证 */}
+          <section className={`w-96 bg-gray-50 p-8 rounded-md flex flex-col gap-4 items-center`}>
+            <Image src={personal} alt={`个人认证`}/>
+            <div>
+              <h3 className={`text-center text-lg font-bold`}>个人认证</h3>
+              <p className={`text-sm text-gray-600`}>平台授权支付宝安全认证，不会泄露您的认证信息</p>
+            </div>
+            <Button className={`w-full`}>去认证</Button>
+          </section>
+        </div>
+      </div>
+
+      <section className={`flex-1/4 flex flex-col bg-white rounded-lg`}>
+        <h3>操作引导</h3>
+        <p>为响应国家相关规定，使用HTTP代理需完成实名认证。认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证</p>
+      </section>
+    </main>
+  )
+}

src/app/admin/layout.tsx

@@ -2,22 +2,30 @@ 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'
+import {getProfile} from '@/actions/auth/auth'
+import {redirect} from 'next/navigation'
 
 export type DashboardLayoutProps = {
   children: ReactNode
 }
 
 export default async function DashboardLayout(props: DashboardLayoutProps) {
+
+  const profile = await getProfile()
+  if (!profile) {
+    return redirect('/login')
+  }
+
   return (
-    <div className={`h-screen flex flex-col overflow-hidden`}>
+    <div className={`h-screen flex flex-col overflow-hidden min-w-7xl overflow-y-hidden relative`}>
       {/* background */}
-      <div className={`-z-10 relative`}>
+      <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>
 
       {/* content */}
@@ -43,20 +51,20 @@ export default async function DashboardLayout(props: DashboardLayoutProps) {
           `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`}/>
+          <NavItem href={'/admin'} icon={`🏠`} label={`账户总览`}/>
           <NavTitle label={`个人信息`}/>
-          <NavItem href={`/admin/profile`} icon={`📝`} label={`个人信息修改`}/>
-          <NavItem href={`/admin/bill`} icon={`💰`} label={`我的账单`}/>
+          <NavItem href={`/admin`} icon={`📝`} label={`修改信息`}/>
           <NavItem href={`/admin/identify`} icon={`🆔`} label={`实名认证`}/>
           <NavItem href={`/admin/whitelist`} icon={`🔒`} label={`白名单`}/>
+          <NavItem href={`/admin`} icon={`💰`} label={`我的账单`}/>
+          <NavTitle label={`套餐管理`}/>
+          <NavItem href={`/admin/purchase`} icon={`🛒`} label={`购买套餐`}/>
+          <NavItem href={`/admin`} 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>
 
         {props.children}
@@ -85,7 +93,7 @@ function NavItem(props: {
       `px-4 py-2 flex items-center rounded-md`,
       `hover:bg-gray-100`,
     )} href={props.href}>
-      {props.icon}
+      <span className={`w-6 h-6 flex items-center justify-center`}>{props.icon}</span>
       <span className={`ml-2`}>{props.label}</span>
     </Link>
   )

src/app/admin/purchase/page.tsx

@@ -0,0 +1,11 @@
+import Purchase from '@/components/composites/purchase'
+
+export type PurchasePageProps = {}
+
+export default async function PurchasePage(props: PurchasePageProps) {
+  return (
+    <main className={`flex-auto mb-4 mr-4`}>
+      <Purchase/>
+    </main>
+  )
+}

src/app/admin/resources/page.tsx

@@ -0,0 +1,12 @@
+import {ReactNode} from 'react'
+
+export type ResourcesPageProps = {
+}
+
+export default async function ResourcesPage(props: ResourcesPageProps) {
+  return (
+    <main>
+
+    </main>
+  )
+}