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

2025-04-08 11:21:58 +08:00
parent a2c18a1be8
commit ba07c79b04
42 changed files with 1481 additions and 666 deletions
--- a/src/actions/auth/auth.ts
+++ b/src/actions/auth/auth.ts
@@ -0,0 +1,105 @@
+'use server'
+import {cookies} from 'next/headers'
+import {ApiResponse} from '@/lib/api'
+import {AuthContext} from '@/lib/auth'
+import {User} from '@/lib/models'
+import {callByDevice, callByUser, getUserToken} from '@/actions/base'
+
+export interface LoginParams {
+  username: string
+  password: string
+  remember?: boolean
+}
+
+type LoginResp = {
+  access_token: string
+  refresh_token: string
+  expires: number
+  auth: AuthContext
+  profile: User
+}
+
+export async function login(props: LoginParams): Promise<ApiResponse> {
+  // 尝试登录
+  const result = await callByDevice<LoginResp>('/api/auth/login/sms', {
+    username: props.username,
+    password: props.password,
+    remember: props.remember ?? false,
+  })
+  if (!result.success) {
+    return result
+  }
+  const data = result.data
+
+  // 保存到 cookies
+  const current = Math.floor(Date.now() / 1000)
+  const future = data.expires - current
+
+  const cookieStore = await cookies()
+  cookieStore.set('auth_token', data.access_token, {
+    httpOnly: true,
+    sameSite: 'strict',
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: Math.max(future, 0),
+  })
+  cookieStore.set('auth_refresh', data.refresh_token, {
+    httpOnly: true,
+    sameSite: 'strict',
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: 7 * 24 * 3600,
+  })
+  cookieStore.set('auth_info', JSON.stringify(data.auth), {
+    httpOnly: true,
+    sameSite: 'strict',
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: 7 * 24 * 3600,
+  })
+  cookieStore.set('auth_profile', JSON.stringify(data.profile), {
+    httpOnly: true,
+    sameSite: 'strict',
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: 7 * 24 * 3600,
+  })
+
+  return {
+    success: true,
+    data: undefined,
+  }
+}
+
+export async function getProfile(refresh: boolean = false) {
+  const cookie = await cookies()
+
+  // 获取缓存的用户信息
+  if (!refresh) {
+    const profile = cookie.get('auth_profile')?.value
+    if (profile) {
+      return JSON.parse(profile) as User
+    }
+  }
+
+  // 获取缓存的 token
+  let token: string
+  try {
+    token = await getUserToken()
+  }
+  catch (e) {
+    return null
+  }
+
+  // 如果没有缓存，则请求用户信息
+  const result = await callByUser<User>('/api/user/get/token', {token})
+  if (!result.success) {
+    return null
+  }
+
+  // 保存用户信息到cookie
+  cookie.set('auth_profile', JSON.stringify(result.data), {
+    httpOnly: true,
+    sameSite: 'strict',
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: 7 * 24 * 3600,
+  })
+
+  return result.data
+}
--- a/src/actions/auth/login.ts
+++ b/src/actions/auth/login.ts
@@ -1,66 +0,0 @@
-'use server'
-import {cookies} from 'next/headers'
-import {ApiResponse, call} from '@/lib/api'
-import {AuthContext} from '@/lib/auth'
-
-export interface LoginParams {
-  username: string
-  password: string
-  remember?: boolean
-}
-
-type LoginResp = {
-  access_token: string
-  refresh_token: string
-  expires: number
-  auth: AuthContext
-}
-
-export async function login(props: LoginParams): Promise<ApiResponse> {
-  try {
-    // 尝试登录
-    const result = await call<LoginResp>('/api/auth/login/sms', {
-      username: props.username,
-      password: props.password,
-      remember: props.remember ?? false,
-    })
-    if (!result.success) {
-      return result
-    }
-    const data = result.data
-
-    // 计算过期时间
-    const current = Math.floor(Date.now() / 1000)
-    const future = data.expires - current
-
-    // 保存到 cookies
-    console.log("token!!!!", data)
-    const cookieStore = await cookies()
-    cookieStore.set('auth_token', data.access_token, {
-      httpOnly: true,
-      sameSite: 'strict',
-      secure: process.env.NODE_ENV === 'production',
-      maxAge: Math.max(future, 0),
-    })
-    cookieStore.set('auth_refresh', data.refresh_token, {
-      httpOnly: true,
-      sameSite: 'strict',
-      secure: process.env.NODE_ENV === 'production',
-      maxAge: 7 * 24 * 3600,
-    })
-    cookieStore.set('auth_info', JSON.stringify(data.auth), {
-      httpOnly: true,
-      sameSite: 'strict',
-      secure: process.env.NODE_ENV === 'production',
-      maxAge: Math.max(future, 0),
-    })
-
-    return {
-      success: true,
-      data: undefined,
-    }
-  }
-  catch (e) {
-    throw new Error('请求登陆失败', {cause: e})
-  }
-}
--- a/src/actions/auth/verify.ts
+++ b/src/actions/auth/verify.ts
@@ -2,7 +2,8 @@
 // 验证验证码函数
 import {cookies} from 'next/headers'
 import crypto from 'crypto'
-import {ApiResponse, call} from '@/lib/api'
+import {ApiResponse} from '@/lib/api'
+import { callByDevice } from '@/actions/base'


 export interface VerifyParams {
@@ -30,7 +31,7 @@ export default async function verify(props: VerifyParams): Promise<ApiResponse>
    }

    // 请求发送短信
-    return await call('/api/auth/verify/sms', {
+    return await callByDevice('/api/auth/verify/sms', {
      phone: props.phone,
      purpose: 0,
    })
--- a/src/actions/base.ts
+++ b/src/actions/base.ts
@@ -0,0 +1,289 @@
+'use server'
+import {API_BASE_URL, CLIENT_ID, CLIENT_SECRET, ApiResponse, UnauthorizedError} from '@/lib/api'
+import {cookies} from 'next/headers'
+import {redirect} from 'next/navigation'
+
+// OAuth令牌缓存
+interface TokenCache {
+  token: string
+  expires: number // 过期时间戳
+}
+
+// ======================
+// region device token
+// ======================
+
+let tokenCache: TokenCache | null = null
+
+// 获取OAuth2访问令牌
+async function getDeviceToken(forceRefresh = false): Promise<string> {
+  try {
+    // 检查缓存的令牌是否可用
+    if (!forceRefresh && tokenCache && tokenCache.expires > Date.now()) {
+      return tokenCache.token
+    }
+
+    const addr = `${API_BASE_URL}/api/auth/token`
+    const body = {
+      client_id: CLIENT_ID,
+      client_secret: CLIENT_SECRET,
+      grant_type: 'client_credentials',
+    }
+
+    const response = await fetch(addr, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    })
+
+    if (!response.ok) {
+      throw new Error(`OAuth token request failed: ${response.status} ${await response.text()}`)
+    }
+
+    const data = await response.json()
+
+    // 缓存令牌和过期时间
+    // 通常后端会返回expires_in（秒为单位）
+    tokenCache = {
+      token: data.access_token,
+      expires: Date.now() + data.expires_in * 1000,
+    }
+
+    return tokenCache.token
+  }
+  catch (error) {
+    console.error('Failed to get access token:', error)
+    throw new Error('认证服务暂时不可用')
+  }
+}
+
+// 通用的API调用函数
+async function callByDevice<R = undefined>(endpoint: string, data: unknown): Promise<ApiResponse<R>> {
+  try {
+    // 发送请求
+    let accessToken = getDeviceToken()
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${await accessToken}`,
+      },
+      body: JSON.stringify(data),
+    }
+    let response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)
+
+    // 如果返回401未授权，尝试刷新令牌并重试一次
+    if (response.status === 401) {
+      accessToken = getDeviceToken(true) // 强制刷新令牌
+
+      // 使用新令牌重试请求
+      requestOptions.headers['Authorization'] = `Bearer ${await accessToken}`
+      response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)
+    }
+
+    // 检查响应状态
+    if (!response.ok) {
+      console.log('响应不成功', `status=${response.status}`, await response.text())
+      return {
+        success: false,
+        status: response.status,
+        message: '请求失败',
+      }
+    }
+
+    // 检查响应状态
+    return handleResponse(response)
+  }
+  catch (e) {
+    console.error('API call failed:', e)
+    throw new Error('服务调用失败', {cause: e})
+  }
+}
+
+
+// endregion
+
+// ======================
+// region user token
+// ======================
+
+async function getUserToken(refresh = false): Promise<string> {
+  // 从 cookie 中获取用户令牌
+  const cookie = await cookies()
+  const userToken = cookie.get('auth_token')?.value
+  const userRefresh = cookie.get('auth_refresh')?.value
+
+  // 检查缓存的令牌是否可用
+  if (!refresh && userToken) {
+    return userToken
+  }
+
+  // 如果没有刷新令牌，抛出异常
+  if (!userRefresh) {
+    throw UnauthorizedError
+  }
+
+  // 请求刷新访问令牌
+  const addr = `${API_BASE_URL}/api/auth/token`
+  const body = {
+    grant_type: 'refresh_token',
+    client_id: CLIENT_ID,
+    client_secret: CLIENT_SECRET,
+    refresh_token: userRefresh,
+  }
+
+  const response = await fetch(addr, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  })
+
+  if (!response.ok) {
+    console.log('刷新令牌失败', `status=${response.status}`, await response.text())
+    throw UnauthorizedError
+  }
+
+  // 保存新的用户令牌到 cookie
+  const data = await response.json()
+  const nextAccessToken = data.access_token
+  const nextRefreshToken = data.refresh_token
+  const expiresIn = data.expires_in
+
+  cookie.set('auth_token', nextAccessToken, {
+    httpOnly: true,
+    sameSite: 'strict',
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: Math.max(expiresIn, 0),
+  })
+  cookie.set('auth_refresh', nextRefreshToken, {
+    httpOnly: true,
+    sameSite: 'strict',
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: 7 * 24 * 3600, // 7天
+  })
+
+  return nextAccessToken
+}
+
+// 使用用户令牌的API调用函数
+async function callByUser<R = undefined>(
+  endpoint: string,
+  data: unknown,
+): Promise<ApiResponse<R>> {
+  try {
+    let token = await getUserToken()
+
+    // 发送请求
+    let response: Response
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`,
+      },
+      body: JSON.stringify(data),
+    }
+
+    response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)
+
+    if (response.status === 401) {
+      token = await getUserToken(true)
+      requestOptions.headers['Authorization'] = `Bearer ${token}`
+      response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)
+    }
+
+    // 检查响应状态
+    if (!response.ok) {
+      const body = await response.text()
+      console.log('响应不成功', `status=${response.status}`, body)
+
+      if (response.status === 401) {
+        return redirect('/login')
+      }
+
+      if (response.status >= 400 && response.status < 500) {
+        return {
+          status: response.status,
+          success: false,
+          message: body,
+        }
+      }
+
+      if (response.status >= 500) {
+        return {
+          status: response.status,
+          success: false,
+          message: '服务器错误',
+        }
+      }
+
+      return {
+        status: response.status,
+        success: false,
+        message: `请求失败，status = ${response.status}`,
+      }
+    }
+
+    return handleResponse(response)
+  }
+  catch (e) {
+    console.error('API call with user token failed:', e)
+    throw new Error('服务调用失败', {cause: e})
+  }
+}
+
+// endregion
+
+// 统一响应解析
+async function handleResponse<R = undefined>(response: Response): Promise<ApiResponse<R>> {
+
+  // 解析响应数据
+  const type = response.headers.get('Content-Type') ?? 'text/plain'
+  if (type.indexOf('application/json') !== -1) {
+    const json = await response.json()
+    if (!response.ok) {
+      console.log('响应不成功', `status=${response.status}`, json)
+      return {
+        success: false,
+        status: response.status,
+        message: json.message || '请求失败',
+      }
+    }
+    return {
+      success: true,
+      data: json,
+    }
+  }
+  else if (type.indexOf('text/plain') !== -1) {
+    const text = await response.text()
+    if (!response.ok) {
+      console.log('响应不成功', `status=${response.status}`, text)
+      return {
+        success: false,
+        status: response.status,
+        message: text || '请求失败',
+      }
+    }
+    return {
+      success: true,
+      data: undefined as unknown as R, // 强转类型，考虑优化
+    }
+  }
+  else {
+    throw new Error(`无法解析响应数据，未处理的 Content-Type: ${type}`)
+  }
+}
+
+// 预定义错误
+
+// 导出
+export {
+  getDeviceToken,
+  getUserToken,
+  callByDevice,
+  callByUser,
+}
--- a/src/actions/fake/tradeCallback.ts
+++ b/src/actions/fake/tradeCallback.ts
@@ -0,0 +1,3 @@
+export async function tradeCallbackByAlipay() {
+
+}
--- a/src/actions/resource.ts
+++ b/src/actions/resource.ts
@@ -0,0 +1,27 @@
+'use server'
+
+import {callByUser} from '@/actions/base'
+
+async function createResourceByBalance(props: {
+  type: number
+  live: number
+  quota: number
+  expire: number
+  daily_limit: number
+}) {
+  return await callByUser('/api/resource/create/balance', props)
+}
+
+async function createResourceByAlipay() {
+  throw new Error('Not implemented')
+}
+
+async function createResourceByWechat() {
+  throw new Error('Not implemented')
+}
+
+export {
+  createResourceByBalance,
+  createResourceByAlipay,
+  createResourceByWechat,
+}
--- a/src/actions/trade.ts
+++ b/src/actions/trade.ts
@@ -0,0 +1,27 @@
+'use server'
+
+import { callByUser } from "@/actions/base"
+
+export async function tradeRecharge(props: {
+  amount: number
+  method: string
+}) {
+
+  let method: number
+  switch (props.method) {
+    case 'alipay':
+      method = 1
+      break
+    case 'wechat':
+      method = 2
+      break
+    default:
+      throw new Error(`${props.method} is not a valid method`)
+  }
+
+  return await callByUser('/api/trade/create', {
+    subject: '余额充值',
+    amount: Number(props.amount * 100),
+    method: method,
+  })
+}
--- a/src/actions/whitelist.ts
+++ b/src/actions/whitelist.ts
@@ -1,5 +1,6 @@
 'use server'
-import {callWithUserToken, PageRecord} from '@/lib/api'
+import { PageRecord} from '@/lib/api'
+import { callByUser } from '@/actions/base'

 type Whitelist = {
  id: number
@@ -13,7 +14,7 @@ async function listWhitelist(props: {
  page: number
  size: number
 }) {
-  return await callWithUserToken<PageRecord<Whitelist>>('/api/whitelist/list', props)
+  return await callByUser<PageRecord<Whitelist>>('/api/whitelist/list', props)
 }

 async function createWhitelist(props: {
@@ -21,7 +22,7 @@ async function createWhitelist(props: {
  remark?: string
 }) {
  console.log(props)
-  return await callWithUserToken('/api/whitelist/create', props)
+  return await callByUser('/api/whitelist/create', props)
 }

 async function updateWhitelist(props: {
@@ -30,13 +31,13 @@ async function updateWhitelist(props: {
  remark?: string
 }) {
  console.log(props)
-  return await callWithUserToken('/api/whitelist/update', props)
+  return await callByUser('/api/whitelist/update', props)
 }

 async function removeWhitelist(props: {
  id: number
 }[]) {
-  return await callWithUserToken('/api/whitelist/remove', props)
+  return await callByUser('/api/whitelist/remove', props)
 }

 export {
--- a/src/app/(auth)/login/_assets/bg.webp
+++ b/src/app/(auth)/login/_assets/bg.webp
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -1,11 +1,10 @@
 'use client'
-import {useState, useCallback, useRef} from 'react'
+import {useState, useCallback, useRef, useContext} from 'react'
 import {Input} from '@/components/ui/input'
 import {Button} from '@/components/ui/button'
 import {Checkbox} from '@/components/ui/checkbox'
 import {merge} from '@/lib/utils'
 import Image from 'next/image'
-import logo from '@/assets/logo.webp'
 import {
  Card,
  CardHeader,
@@ -21,11 +20,13 @@ import {useForm} from 'react-hook-form'
 import zod from 'zod'
 import Captcha from './captcha'
 import verify from '@/actions/auth/verify'
-import {login} from '@/actions/auth/login'
+import {login} from '@/actions/auth/auth'
 import {useRouter} from 'next/navigation'
 import {toast} from 'sonner'
 import {ApiResponse} from '@/lib/api'
 import {Label} from '@/components/ui/label'
+import logo from '@/assets/logo.webp'
+import bg from './_assets/bg.webp'

 export type LoginPageProps = {}

@@ -162,7 +163,7 @@ export default function LoginPage(props: LoginPageProps) {

      if (result.success) {
        // 登录成功
-        toast.success('登陆成功', {
+        toast.success('登录成功', {
          description: '欢迎回来！',
        })

@@ -190,10 +191,12 @@ export default function LoginPage(props: LoginPageProps) {
  return (
    <main className={merge(
      `relative`,
-      `h-screen w-screen xl:pr-64 bg-[url(/login/bg.webp)] bg-cover bg-left`,
+      `h-screen w-screen xl:pr-64 bg-cover bg-left`,
      `flex justify-center xl:justify-end items-center`,
    )}>
-      <Image src={logo} alt={`logo`} height={64} className={`absolute top-8 left-8`}/>
+      <Image src={bg} alt={`背景图`} fill priority className={`absolute -z-10 object-cover`}/>
+
+      <Image src={logo} alt={`logo`} priority height={64} className={`absolute top-8 left-8`}/>

      {/* 登录表单 */}
      <Card className="w-96 mx-4 shadow-lg">
--- a/src/app/(root)/@header/_server/user-center.tsx
+++ b/src/app/(root)/@header/_server/user-center.tsx
@@ -33,7 +33,7 @@ export default async function UserCenter(props: UserCenterProps) {
          </Link>
        </>
        : <>
-          <Link href={`/admin/dashboard`}>
+          <Link href={`/admin`}>
            <Button variant={`gradient`}>
              进入控制台
            </Button>
--- a/src/app/(root)/product/_client/combo.tsx
+++ b/src/app/(root)/product/_client/combo.tsx
@@ -1,43 +0,0 @@
-'use client'
-import {useState} from 'react'
-
-export function Combo(props: {
-  name: string
-  level?: {
-    number: number
-    discount: number
-  }[]
-}) {
-
-  const [open, setOpen] = useState(false)
-
-  return (
-    <li>
-      <p className={`flex justify-between items-center`}>
-        <span>{props.name}</span>
-        <button
-          className={`text-gray-500 text-sm`}
-          onClick={() => setOpen(!open)}
-        >
-          {open ? '收起' : '展开'}
-        </button>
-      </p>
-      {props.level && (
-        <ul className={[
-          `flex flex-col gap-3 overflow-hidden`,
-          `transition-[opacity,padding,max-height] transition-discrete duration-200 ease-in-out`,
-          open
-            ? 'delay-[0s, 0s] opacity-100 py-3 max-h-80'
-            : 'delay-[0s, 0.2s] opacity-0 p-0 max-h-0',
-        ].join(' ')}>
-          {props.level.map((item, index) => (
-            <li key={index} className={`flex flex-row justify-between items-center`}>
-              <span className={`text-gray-500 text-sm`}>{item.number}</span>
-              <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>赠送 {item.discount} %</span>
-            </li>
-          ))}
-        </ul>
-      )}
-    </li>
-  )
-}
--- a/src/app/(root)/product/page.tsx
+++ b/src/app/(root)/product/page.tsx
@@ -1,265 +1,19 @@
 import BreadCrumb from '@/components/bread-crumb'
 import Wrap from '@/components/wrap'
-import {Combo} from '@/app/(root)/product/_client/combo'
-
+import Purchase from '@/components/composites/purchase'

 export type ProductPageProps = {}

 export default function ProductPage(props: ProductPageProps) {
  return (
    <main className={`mt-20`}>
-      <Wrap className="flex flex-col py-8 gap-8">
+      <Wrap className="flex flex-col py-8 gap-4">
        <BreadCrumb items={[
          {label: '产品中心', href: '/product'},
        ]}/>
-
-        <ul role={`tablist`} className={`flex justify-center items-stretch bg-white rounded-lg`}>
-          <li role={`tab`}>
-            <button className={`h-14 px-8 text-lg`}>短效动态套餐</button>
-          </li>
-          <li role={`tab`}>
-            <button className={`h-14 px-8 text-lg`}>长效静态套餐</button>
-          </li>
-          <li role={`tab`}>
-            <button className={`h-14 px-8 text-lg`}>固定套餐</button>
-          </li>
-          <li role={`tab`}>
-            <button className={`h-14 px-8 text-lg`}>定制套餐</button>
-          </li>
-        </ul>
-
-        <section role={`tabpanel`} className={`flex flex-row bg-white rounded-lg`}>
-          <Left/>
-          <Center/>
-          <Right/>
-        </section>
+        <Purchase/>
      </Wrap>
    </main>
  )
 }

-function Left() {
-  return (
-    <div className="flex-none basis-56 p-8 flex flex-col gap-4">
-      <img src={`/product/banner.webp`} alt={`banner`} className={`w-full`}/>
-      <h3 className={`text-lg`}>包量套餐</h3>
-      <ul className={`flex flex-col gap-3`}>
-        <Combo name={`3分钟`} level={[
-          {number: 30000, discount: 10},
-          {number: 80000, discount: 20},
-          {number: 200000, discount: 30},
-          {number: 450000, discount: 40},
-          {number: 1000000, discount: 50},
-          {number: 1600000, discount: 65},
-        ]}/>
-        <Combo name={`5分钟`} level={[
-          {number: 30000, discount: 10},
-          {number: 80000, discount: 20},
-          {number: 200000, discount: 30},
-          {number: 450000, discount: 40},
-          {number: 1000000, discount: 50},
-          {number: 1600000, discount: 65},
-        ]}/>
-        <Combo name={`10分钟`} level={[
-          {number: 30000, discount: 10},
-          {number: 80000, discount: 20},
-          {number: 200000, discount: 30},
-          {number: 450000, discount: 40},
-          {number: 1000000, discount: 50},
-          {number: 1600000, discount: 65},
-        ]}/>
-        <Combo name={`15分钟`} level={[
-          {number: 30000, discount: 10},
-          {number: 80000, discount: 20},
-          {number: 200000, discount: 30},
-          {number: 450000, discount: 40},
-          {number: 1000000, discount: 50},
-          {number: 1600000, discount: 65},
-        ]}/>
-        <Combo name={`30分钟`} level={[
-          {number: 30000, discount: 10},
-          {number: 80000, discount: 20},
-          {number: 200000, discount: 30},
-          {number: 450000, discount: 40},
-          {number: 1000000, discount: 50},
-          {number: 1600000, discount: 65},
-        ]}/>
-      </ul>
-      <div className={`border-b border-gray-200`}></div>
-      <h3 className={`text-lg`}>包时套餐</h3>
-      <ul className={`flex flex-col gap-3`}>
-        <li className={`flex justify-between`}>
-          <span className={`text-sm text-gray-500`}>7天</span>
-          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>9折</span>
-        </li>
-        <li className={`flex justify-between`}>
-          <span className={`text-sm text-gray-500`}>30天</span>
-          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>8折</span>
-        </li>
-        <li className={`flex justify-between`}>
-          <span className={`text-sm text-gray-500`}>90天</span>
-          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>7折</span>
-        </li>
-        <li className={`flex justify-between`}>
-          <span className={`text-sm text-gray-500`}>180天</span>
-          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>6折</span>
-        </li>
-        <li className={`flex justify-between`}>
-          <span className={`text-sm text-gray-500`}>360天</span>
-          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>5折</span>
-        </li>
-      </ul>
-    </div>
-  )
-}
-
-function Center() {
-  return (
-    <div className={`flex-auto p-8 flex flex-col relative gap-8`}>
-
-      <div className={`space-y-4`}>
-        <h3>计费方式</h3>
-        <div className={`grid grid-cols-2 auto-cols-fr place-items-stretch gap-4`}>
-          <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col items-start gap-2 cursor-pointer`}>
-            <h4>包量套餐</h4>
-            <p className={`text-sm text-gray-500`}>适用于短期或不定期高提取业务场景</p>
-          </button>
-          <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col items-start gap-2 cursor-pointer`}>
-            <h4>包时套餐</h4>
-            <p className={`text-sm text-gray-500`}>适用于每日提取量稳定的业务场景</p>
-          </button>
-        </div>
-      </div>
-
-      <div className={`space-y-4`}>
-        <h3>IP 时效</h3>
-        <div className={`grid grid-cols-5 auto-cols-fr place-items-stretch gap-4`}>
-          <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
-            <span>3 分钟</span>
-            <span className={`text-sm text-gray-500`}>￥0.005/IP</span>
-          </button>
-          <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
-            <span>3 分钟</span>
-            <span className={`text-sm text-gray-500`}>￥0.005/IP</span>
-          </button>
-          <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
-            <span>3 分钟</span>
-            <span className={`text-sm text-gray-500`}>￥0.005/IP</span>
-          </button>
-          <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
-            <span>3 分钟</span>
-            <span className={`text-sm text-gray-500`}>￥0.005/IP</span>
-          </button>
-          <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
-            <span>3 分钟</span>
-            <span className={`text-sm text-gray-500`}>￥0.005/IP</span>
-          </button>
-        </div>
-      </div>
-
-      {/* 赠送 IP 数 */}
-      <div className={`space-y-4`}>
-        <h3>赠送IP总数</h3>
-        <div className={`flex gap-4`}>
-          <button className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}>-</button>
-          <input type="number" className={`w-40 h-10 border border-gray-200 rounded-sm`}/>
-          <button className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}>+</button>
-        </div>
-      </div>
-
-      {/* 产品特性 */}
-      <div className={`space-y-6`}>
-        <h3>产品特性</h3>
-        <div className={`grid grid-cols-3 auto-rows-fr gap-y-6`}>
-          <p className={`flex gap-2 items-center`}>
-            <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>支持高并发提取</span>
-          </p>
-          <p className={`flex gap-2 items-center`}>
-            <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
-          </p>
-          <p className={`flex gap-2 items-center`}>
-            <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
-          </p>
-          <p className={`flex gap-2 items-center`}>
-            <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>完备的API接口</span>
-          </p>
-          <p className={`flex gap-2 items-center`}>
-            <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
-          </p>
-          <p className={`flex gap-2 items-center`}>
-            <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
-          </p>
-          <p className={`flex gap-2 items-center`}>
-            <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>完备的API接口</span>
-          </p>
-          <p className={`flex gap-2 items-center`}>
-            <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
-          </p>
-          <p className={`flex gap-2 items-center`}>
-            <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
-            <span className={`text-sm text-gray-500`}>每日去重量：500万</span>
-          </p>
-        </div>
-      </div>
-
-      {/* 左右的边框 */}
-      <div className={`absolute inset-0 my-8 border-l border-r border-gray-200 pointer-events-none`}></div>
-    </div>
-  )
-}
-
-function Right() {
-  return (
-    <div className={`flex-none basis-80 p-8 flex flex-col gap-4`}>
-      <h3>订单详情</h3>
-      <ul className={`flex flex-col gap-4`}>
-        <li className={`flex justify-between items-center`}>
-          <span className={`text-sm text-gray-500`}>套餐名称</span>
-          <span className={`text-sm`}>包量套餐</span>
-        </li>
-        <li className={`flex justify-between items-center`}>
-          <span className={`text-sm text-gray-500`}>套餐时长</span>
-          <span className={`text-sm`}>3分钟</span>
-        </li>
-        <li className={`flex justify-between items-center`}>
-          <span className={`text-sm text-gray-500`}>购买 IP 量</span>
-          <span className={`text-sm`}>1000个</span>
-        </li>
-        <li className={`flex justify-between items-center`}>
-          <span className={`text-sm text-gray-500`}>实到 IP 量</span>
-          <span className={`text-sm`}>1000个</span>
-        </li>
-        <li className={`flex justify-between items-center`}>
-          <span className={`text-sm text-gray-500`}>原价</span>
-          <span className={`text-sm`}>￥50</span>
-        </li>
-      </ul>
-      <div className={`border-b border-gray-200`}></div>
-      <p className={`flex justify-between items-center`}>
-        <span>实付价格</span>
-        <span className={`text-xl text-orange-500`}>￥50</span>
-      </p>
-      <div className={`flex gap-4`}>
-        <button className={`flex-1 p-3 bg-blue-50 border border-blue-500 rounded-lg flex justify-center items-center gap-2`}>
-          <img src={`/product/alipay.svg`} alt={`alipay`} className={`w-5 h-5`}/>
-          <span className={`text-sm`}>支付宝</span>
-        </button>
-        <button className={`flex-1 p-3 bg-blue-50 border border-blue-500 rounded-lg flex justify-center items-center gap-2`}>
-          <img src={`/product/wechat.svg`} alt={`wechat`} className={`w-5 h-5`}/>
-          <span className={`text-sm`}>微信</span>
-        </button>
-      </div>
-      <button className={`mt-4 h-12 bg-blue-500 text-white rounded-lg`}>
-        立即支付
-      </button>
-    </div>
-  )
-}
--- a/src/app/(temp)/pay/page.tsx
+++ b/src/app/(temp)/pay/page.tsx
@@ -0,0 +1,17 @@
+import {Button} from '@/components/ui/button'
+import Link from 'next/link'
+
+export type PayPageProps = {}
+
+export default async function PayPage(props: PayPageProps) {
+  return (
+    <div className={`w-screen h-screen items-center justify-start pt-60 flex flex-col gap-8`}>
+      <div className={`w-36 h-36 bg-gray-50 rounded-lg flex items-center justify-center`}>
+        模拟支付页
+      </div>
+      <Link href={'/admin/resources'} className={`p-4 bg-blue-500 text-white rounded-md`}>
+        模拟支付成功
+      </Link>
+    </div>
+  )
+}
--- a/src/app/admin/(dashboard)/page.tsx
+++ b/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`}>

--- a/src/app/admin/extract/page.tsx
+++ b/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>
+  )
+}
--- a/src/app/admin/identify/_assets/banner.webp
+++ b/src/app/admin/identify/_assets/banner.webp
--- a/src/app/admin/identify/_assets/personal.webp
+++ b/src/app/admin/identify/_assets/personal.webp
--- a/src/app/admin/identify/page.tsx
+++ b/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>
+  )
+}
--- a/src/app/admin/layout.tsx
+++ b/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>
  )
--- a/src/app/admin/purchase/page.tsx
+++ b/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>
+  )
+}
--- a/src/app/admin/resources/page.tsx
+++ b/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>
+  )
+}
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -18,8 +18,8 @@
  --secondary-foreground: oklch(0.21 0.034 264.665);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
+  --accent: oklch(0.769 0.188 70.08);
+  --accent-foreground: oklch(0.985 0.002 247.839);
  --destructive: oklch(0.64 0.1597 25);
  --destructive-foreground: oklch(0.985 0.002 247.839);
  --border: oklch(0.928 0.006 264.531);
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,8 @@ import {Metadata} from 'next'
 import './globals.css'
 import localFont from 'next/font/local'
 import {Toaster} from '@/components/ui/sonner'
+import AuthProvider from '@/components/providers/AuthProvider'
+import {getProfile} from '@/actions/auth/auth'

 const font = localFont({
  src: './NotoSansSC-VariableFont_wght.ttf',
@@ -13,7 +15,7 @@ export const metadata: Metadata = {
  description: 'Generated by create next app',
 }

-export default function RootLayout({
+export default async function RootLayout({
  children,
 }: Readonly<{
  children: ReactNode
@@ -21,8 +23,10 @@ export default function RootLayout({
  return (
    <html lang="zh-Cn">
      <body className={`${font.className}`}>
-        {children}
-        <Toaster position={'top-center'}/>
+        <AuthProvider>
+          {children}
+        </AuthProvider>
+        <Toaster position={'top-center'} richColors expand/>
      </body>
    </html>
  )
--- a/src/components/composites/_assets/alipay.svg
+++ b/src/components/composites/_assets/alipay.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_98_223)">
+<path d="M20.001 13.692V3.845C20.0005 2.82523 19.5951 1.8474 18.8739 1.12641C18.1527 0.405415 17.1748 0.000264944 16.155 0L3.845 0C2.82541 0.000529935 1.84772 0.405797 1.12676 1.12676C0.405797 1.84772 0.000529935 2.82541 0 3.845V16.155C0.000265092 17.1747 0.405447 18.1525 1.12647 18.8735C1.84749 19.5946 2.82532 19.9997 3.845 20H16.155C17.057 19.9994 17.9301 19.682 18.622 19.1034C19.3139 18.5248 19.7808 17.7216 19.941 16.834C18.921 16.392 14.501 14.484 12.198 13.384C10.446 15.507 8.61 16.781 5.844 16.781C3.078 16.781 1.231 15.077 1.453 12.991C1.599 11.623 2.538 9.386 6.615 9.769C8.765 9.971 9.748 10.372 11.501 10.951C11.954 10.119 12.331 9.204 12.617 8.231H4.845V7.461H8.691V6.077H4V5.23H8.69V3.235C8.69 3.235 8.732 2.923 9.077 2.923H11V5.23H16V6.078H11V7.46H15.079C14.7272 8.91647 14.1692 10.3152 13.422 11.614C14.607 12.044 20 13.692 20 13.692H20.001ZM5.538 15.461C2.615 15.461 2.153 13.616 2.308 12.845C2.461 12.077 3.308 11.075 4.933 11.075C6.8 11.075 8.473 11.553 10.481 12.531C9.071 14.367 7.338 15.461 5.538 15.461Z" fill="#00A5F1"/>
+</g>
+<defs>
+<clipPath id="clip0_98_223">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/components/composites/_assets/balance.svg
+++ b/src/components/composites/_assets/balance.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99996 0C4.4771 0 0 4.47714 0 10C0 15.5229 4.47712 20 9.99996 20C15.5228 20 19.9999 15.5228 19.9999 10C19.9999 4.47716 15.5228 0 9.99996 0ZM7.05159 4.29727C7.78297 3.68016 9.40572 4.98294 9.97711 4.93723C10.5485 4.98294 12.1713 3.68016 12.9026 4.29727C13.634 4.91437 12.017 6.325 12.017 6.325H7.93688C7.93688 6.325 6.32021 4.91437 7.05159 4.29727ZM12.1713 7.05639C12.1713 7.25852 12.0077 7.42208 11.8056 7.42208H8.14866C7.9465 7.42208 7.78297 7.25852 7.78297 7.05639C7.78297 6.85425 7.9465 6.6907 8.14866 6.6907H11.8056C12.0077 6.6907 12.1713 6.85425 12.1713 7.05639ZM9.97711 15.8251C7.14941 15.8251 4.85744 16.0801 4.85744 13.6881C4.85744 11.9096 6.12522 9.10908 7.93688 7.78775H12.017C13.829 9.10911 15.0968 11.9096 15.0968 13.6881C15.0968 16.0801 12.8048 15.8251 9.97711 15.8251Z" fill="#FF6B00"/>
+<path d="M10.0331 10.4641C10.1948 10.4641 10.321 10.5147 10.4125 10.6152C10.504 10.7158 10.5501 10.8605 10.5501 11.0487H11.5651C11.5651 10.7314 11.457 10.4759 11.2417 10.2807C11.0263 10.0854 10.7292 9.96605 10.3514 9.92196V9.375H9.82754V9.91174C9.43225 9.94399 9.11936 10.0511 8.88808 10.2334C8.65681 10.4157 8.54116 10.6486 8.54116 10.9315C8.54116 11.2434 8.6553 11.4833 8.88429 11.6511C9.11333 11.8189 9.46855 11.969 9.94998 12.1013C10.1714 12.1846 10.3249 12.268 10.4103 12.3519C10.4956 12.4358 10.5387 12.5498 10.5387 12.6939C10.5387 12.8349 10.4972 12.9473 10.4126 13.0322C10.3279 13.1167 10.1971 13.1592 10.0188 13.1592C9.82683 13.1592 9.6726 13.1113 9.55846 13.0167C9.44432 12.922 9.38689 12.7634 9.38689 12.5412H8.39678L8.38921 12.5541C8.37939 12.915 8.50335 13.1888 8.7611 13.3755C9.01882 13.5621 9.35064 13.6712 9.75495 13.7035V14.2043H10.2825V13.7009C10.6778 13.6686 10.9892 13.5653 11.2167 13.3894C11.4442 13.2136 11.5583 12.9801 11.5583 12.6887C11.5583 12.3783 11.4411 12.1352 11.2076 11.9588C10.974 11.7824 10.6234 11.6334 10.1563 11.5113C9.92274 11.4183 9.76476 11.3317 9.68312 11.2521C9.60152 11.1725 9.56073 11.0665 9.55995 10.9348C9.55995 10.7922 9.597 10.6781 9.6703 10.5927C9.74364 10.5072 9.86457 10.4641 10.0331 10.4641Z" fill="#FF6B00"/>
+</svg>
--- a/src/components/composites/_assets/banner.webp
+++ b/src/components/composites/_assets/banner.webp
--- a/src/components/composites/_assets/check.svg
+++ b/src/components/composites/_assets/check.svg
@@ -0,0 +1,10 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_98_189)">
+<path d="M3.46154 0H14.5385C15.4565 0 16.337 0.364697 16.9861 1.01386C17.6353 1.66303 18 2.54348 18 3.46154V14.5385C18 15.4565 17.6353 16.337 16.9861 16.9861C16.337 17.6353 15.4565 18 14.5385 18H3.46154C2.54348 18 1.66303 17.6353 1.01386 16.9861C0.364697 16.337 0 15.4565 0 14.5385L0 3.46154C0 2.54348 0.364697 1.66303 1.01386 1.01386C1.66303 0.364697 2.54348 0 3.46154 0ZM3.46154 1.38462C2.9107 1.38462 2.38243 1.60343 1.99293 1.99293C1.60343 2.38243 1.38462 2.9107 1.38462 3.46154V14.5385C1.38462 14.8112 1.43834 15.0813 1.54271 15.3333C1.64709 15.5852 1.80007 15.8142 1.99293 16.0071C2.18579 16.1999 2.41475 16.3529 2.66673 16.4573C2.91872 16.5617 3.18879 16.6154 3.46154 16.6154H14.5385C14.8112 16.6154 15.0813 16.5617 15.3333 16.4573C15.5852 16.3529 15.8142 16.1999 16.0071 16.0071C16.1999 15.8142 16.3529 15.5852 16.4573 15.3333C16.5617 15.0813 16.6154 14.8112 16.6154 14.5385V3.46154C16.6154 3.18879 16.5617 2.91872 16.4573 2.66673C16.3529 2.41475 16.1999 2.18579 16.0071 1.99293C15.8142 1.80007 15.5852 1.64709 15.3333 1.54271C15.0813 1.43834 14.8112 1.38462 14.5385 1.38462H3.46154ZM13.743 5.92338C13.8041 5.98151 13.8531 6.0511 13.8873 6.12818C13.9214 6.20526 13.9401 6.28831 13.9421 6.3726C13.9442 6.45689 13.9296 6.54076 13.8993 6.61941C13.8689 6.69806 13.8233 6.76996 13.7652 6.831L8.50085 12.3348C8.49877 12.3376 8.49392 12.339 8.48977 12.3432L8.48285 12.3528C8.44477 12.3902 8.39977 12.4096 8.35615 12.4359C8.32846 12.4512 8.307 12.474 8.27862 12.4858C8.20213 12.5178 8.12007 12.5345 8.03714 12.5347C7.95421 12.5349 7.87205 12.5188 7.79538 12.4872C7.77323 12.4782 7.75523 12.4588 7.73308 12.447C7.68462 12.4214 7.63477 12.3972 7.59185 12.357C7.58838 12.3542 7.587 12.3494 7.58285 12.3452C7.57938 12.3432 7.57592 12.3418 7.57315 12.339L4.92162 9.58638C4.86293 9.5258 4.81679 9.45421 4.78585 9.37574C4.75491 9.29727 4.73978 9.21346 4.74132 9.12912C4.74287 9.04479 4.76106 8.96159 4.79485 8.8843C4.82864 8.80702 4.87737 8.73717 4.93823 8.67877C4.99877 8.62 5.07035 8.57379 5.14882 8.5428C5.2273 8.5118 5.31113 8.49664 5.3955 8.49819C5.47986 8.49973 5.56308 8.51795 5.64037 8.5518C5.71766 8.58564 5.78749 8.63444 5.84585 8.69538L8.03354 10.9648L12.834 5.94415C12.8923 5.88305 12.9621 5.83404 13.0393 5.79992C13.1166 5.7658 13.1998 5.74724 13.2842 5.74532C13.3686 5.74339 13.4526 5.75812 13.5313 5.78868C13.6101 5.81923 13.682 5.86501 13.743 5.92338Z" fill="#2470F9"/>
+</g>
+<defs>
+<clipPath id="clip0_98_189">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/components/composites/_assets/wechat.svg
+++ b/src/components/composites/_assets/wechat.svg
@@ -0,0 +1,16 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_98_228)">
+<path d="M3.6 0H16.4C18.8 0 20 1.2 20 3.6V16.4C20 18.8 18.8 20 16.4 20H3.6C1.2 20 0 18.8 0 16.4V3.6C0 1.2 1.2 0 3.6 0Z" fill="#28D846"/>
+<path d="M12.9534 7.94922C10.4386 7.94922 8.39999 9.65422 8.39999 11.7574C8.39999 13.8606 10.4386 15.5656 12.9534 15.5656C13.5434 15.5658 14.1294 15.4683 14.6876 15.2772L15.9912 15.9716L15.8158 14.7192C16.3212 14.4045 16.7403 13.969 17.0355 13.452C17.3307 12.9349 17.4927 12.3526 17.5068 11.7574C17.5066 9.65422 15.468 7.94922 12.9534 7.94922Z" fill="white"/>
+<path d="M7.89999 3.80078C10.576 3.80078 12.7884 5.44078 13.2938 7.61478C12.3402 7.53638 7.39379 8.06938 8.17939 12.9148C7.46839 12.9168 6.49939 12.8856 5.80539 12.6518L4.23059 13.4912L4.44259 11.9784C3.21699 11.1678 2.39999 9.86418 2.39999 8.40078C2.39999 5.86078 4.86239 3.80078 7.89999 3.80078Z" fill="white"/>
+<path d="M5.39999 6.88016C5.39999 7.07111 5.47585 7.25425 5.61088 7.38927C5.7459 7.5243 5.92904 7.60016 6.11999 7.60016C6.31095 7.60016 6.49408 7.5243 6.62911 7.38927C6.76414 7.25425 6.83999 7.07111 6.83999 6.88016C6.83999 6.6892 6.76414 6.50607 6.62911 6.37104C6.49408 6.23601 6.31095 6.16016 6.11999 6.16016C5.92904 6.16016 5.7459 6.23601 5.61088 6.37104C5.47585 6.50607 5.39999 6.6892 5.39999 6.88016Z" fill="#28D846"/>
+<path d="M9 6.88016C9 7.07111 9.07586 7.25425 9.21088 7.38927C9.34591 7.5243 9.52904 7.60016 9.72 7.60016C9.91096 7.60016 10.0941 7.5243 10.2291 7.38927C10.3641 7.25425 10.44 7.07111 10.44 6.88016C10.44 6.6892 10.3641 6.50607 10.2291 6.37104C10.0941 6.23601 9.91096 6.16016 9.72 6.16016C9.52904 6.16016 9.34591 6.23601 9.21088 6.37104C9.07586 6.50607 9 6.6892 9 6.88016Z" fill="#28D846"/>
+<path d="M10.8 10.64C10.8 10.8097 10.8674 10.9725 10.9874 11.0925C11.1075 11.2126 11.2702 11.28 11.44 11.28C11.6097 11.28 11.7725 11.2126 11.8925 11.0925C12.0126 10.9725 12.08 10.8097 12.08 10.64C12.08 10.4703 12.0126 10.3075 11.8925 10.1875C11.7725 10.0674 11.6097 10 11.44 10C11.2702 10 11.1075 10.0674 10.9874 10.1875C10.8674 10.3075 10.8 10.4703 10.8 10.64Z" fill="#28D846"/>
+<path d="M13.84 10.64C13.84 10.8097 13.9074 10.9725 14.0274 11.0925C14.1475 11.2126 14.3103 11.28 14.48 11.28C14.6497 11.28 14.8125 11.2126 14.9325 11.0925C15.0526 10.9725 15.12 10.8097 15.12 10.64C15.12 10.4703 15.0526 10.3075 14.9325 10.1875C14.8125 10.0674 14.6497 10 14.48 10C14.3103 10 14.1475 10.0674 14.0274 10.1875C13.9074 10.3075 13.84 10.4703 13.84 10.64Z" fill="#28D846"/>
+</g>
+<defs>
+<clipPath id="clip0_98_228">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/components/composites/_client/center.tsx
+++ b/src/components/composites/_client/center.tsx
@@ -0,0 +1,218 @@
+'use client'
+import {FormField} from '@/components/ui/form'
+import {RadioGroup} from '@/components/ui/radio-group'
+import {Input} from '@/components/ui/input'
+import {Button} from '@/components/ui/button'
+import {Minus, Plus} from 'lucide-react'
+import {PurchaseFormContext, Schema} from '@/components/composites/_client/form'
+import {useContext} from 'react'
+import FormOption from '@/components/composites/_client/option'
+import Image from 'next/image'
+import check from '../_assets/check.svg'
+
+export default function Center() {
+
+  const form = useContext(PurchaseFormContext)?.form
+  if (!form) {
+    throw new Error(`Center component must be used within PurchaseFormContext`)
+  }
+
+  const watchType = form.watch('type')
+
+  return (
+    <div className={`flex-auto p-8 flex flex-col gap-8 relative`}>
+
+      {/* 计费方式 */}
+      <FormField
+        className={`flex flex-col gap-4`}
+        name={`type`}
+        label={`计费方式`}>
+        {({id, field}) => (
+          <RadioGroup
+            id={id}
+            defaultValue={field.value}
+            onValueChange={field.onChange}
+            className={`flex gap-4`}>
+
+            <FormOption
+              id={`${id}-2`}
+              value="2"
+              label="包量套餐"
+              description="适用于短期或不定期高提取业务场景"
+              compare={field.value}/>
+
+            <FormOption
+              id={`${id}-1`}
+              value="1"
+              label="包时套餐"
+              description="适用于每日提取量稳定的业务场景"
+              compare={field.value}/>
+
+          </RadioGroup>
+        )}
+      </FormField>
+
+      {/* IP 时效 */}
+      <FormField
+        className={`space-y-4`}
+        name={`live`}
+        label={`IP 时效`}>
+        {({id, field}) => (
+          <RadioGroup
+            id={id}
+            defaultValue={field.value}
+            onValueChange={field.onChange}
+            className={`flex gap-4 flex-wrap`}>
+
+            <FormOption id={`${id}-3`} value="3" label="3 分钟" description="￥0.005/IP" compare={field.value}/>
+            <FormOption id={`${id}-5`} value="5" label="5 分钟" description="￥0.007/IP" compare={field.value}/>
+            <FormOption id={`${id}-10`} value="10" label="10 分钟" description="￥0.010/IP" compare={field.value}/>
+            <FormOption id={`${id}-20`} value="20" label="20 分钟" description="￥0.015/IP" compare={field.value}/>
+            <FormOption id={`${id}-30`} value="30" label="30 分钟" description="￥0.020/IP" compare={field.value}/>
+          </RadioGroup>
+        )}
+      </FormField>
+
+      {/* 根据套餐类型显示不同表单项 */}
+      {watchType === '2' ? (
+        /* 包量：IP 购买数量 */
+        <FormField
+          className={`space-y-4`}
+          name={`quota`}
+          label={`IP 购买数量`}>
+          {({id, field}) => (
+            <div className={`flex gap-2 items-center`}>
+              <Button
+                variant={`outline`}
+                type="button"
+                className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                onClick={() => form.setValue('quota', Math.max(10_000, Number(field.value) - 5_000))}
+                disabled={Number(field.value) === 10_000}>
+                <Minus/>
+              </Button>
+              <Input
+                {...field}
+                id={id}
+                type="number"
+                className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
+                min={10_000}
+                step={5_000}
+              />
+              <Button
+                variant={`outline`}
+                type="button"
+                className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                onClick={() => form.setValue('quota', Number(field.value) + 5_000)}>
+                <Plus/>
+              </Button>
+            </div>
+          )}
+        </FormField>
+      ) : (
+        <>
+          {/* 包时：套餐时效 */}
+          <FormField
+            className={`space-y-4`}
+            name={`expire`}
+            label={`套餐时效`}>
+            {({id, field}) => (
+              <RadioGroup
+                id={id}
+                defaultValue={field.value}
+                onValueChange={field.onChange}
+                className={`flex gap-4 flex-wrap`}>
+
+                <FormOption id={`${id}-7`} value="7" label="7天" compare={field.value}/>
+                <FormOption id={`${id}-15`} value="15" label="15天" compare={field.value}/>
+                <FormOption id={`${id}-30`} value="30" label="30天" compare={field.value}/>
+                <FormOption id={`${id}-90`} value="90" label="90天" compare={field.value}/>
+                <FormOption id={`${id}-180`} value="180" label="180天" compare={field.value}/>
+                <FormOption id={`${id}-365`} value="365" label="365天" compare={field.value}/>
+              </RadioGroup>
+            )}
+          </FormField>
+
+          {/* 包时：每日提取上限 */}
+          <FormField
+            className={`space-y-4`}
+            name={`daily_limit`}
+            label={`每日提取上限`}>
+            {({id, field}) => (
+              <div className={`flex gap-2 items-center`}>
+                <Button
+                  variant={`outline`}
+                  type="button"
+                  className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                  onClick={() => form.setValue('daily_limit', Math.max(2_000, Number(field.value) - 1_000))}
+                  disabled={Number(field.value) === 2_000}>
+                  <Minus/>
+                </Button>
+                <Input
+                  {...field}
+                  id={id}
+                  type="number"
+                  className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
+                  min={2_000}
+                  step={1_000}
+                />
+                <Button
+                  variant={`outline`}
+                  type="button"
+                  className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
+                  onClick={() => form.setValue('daily_limit', Number(field.value) + 1_000)}>
+                  <Plus/>
+                </Button>
+              </div>
+            )}
+          </FormField>
+        </>
+      )}
+
+      {/* 产品特性 */}
+      <div className={`space-y-6`}>
+        <h3>产品特性</h3>
+        <div className={`grid grid-cols-3 auto-rows-fr gap-y-6`}>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>支持高并发提取</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>完备的API接口</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
+          </p>
+          <p className={`flex gap-2 items-center`}>
+            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
+            <span className={`text-sm text-gray-500`}>每日去重量：500万</span>
+          </p>
+        </div>
+      </div>
+
+      {/* 左右的边框 */}
+      <div className={`absolute inset-0 my-8 border-l border-r border-gray-200 pointer-events-none`}></div>
+    </div>
+  )
+}
--- a/src/components/composites/_client/form.tsx
+++ b/src/components/composites/_client/form.tsx
@@ -0,0 +1,103 @@
+'use client'
+import {createContext, useContext} from 'react'
+import {useForm, UseFormReturn} from 'react-hook-form'
+import Center from '@/components/composites/_client/center'
+import Right from '@/components/composites/_client/right'
+import Left from '@/components/composites/_client/left'
+import {Form} from '@/components/ui/form'
+import * as z from 'zod'
+import {zodResolver} from '@hookform/resolvers/zod'
+import {createResourceByBalance} from '@/actions/resource'
+import {toast} from 'sonner'
+import {useRouter} from 'next/navigation'
+import {AuthContext} from '@/components/providers/AuthProvider'
+
+// 定义表单验证架构
+const schema = z.object({
+  type: z.enum(['1', '2']).default('2'),
+  live: z.enum(['3', '5', '10', '20', '30']),
+  quota: z.number().min(10000, '购买数量不能少于10000个'),
+  expire: z.enum(['7', '15', '30', '90', '180', '365']),
+  daily_limit: z.number().min(2000, '每日限额不能少于2000个'),
+  pay_type: z.enum(['wechat', 'alipay', 'balance']),
+})
+
+// 从架构中推断类型
+export type Schema = z.infer<typeof schema>
+
+type PurchaseFormContextType = {
+  form: UseFormReturn<Schema>
+}
+
+export const PurchaseFormContext = createContext<PurchaseFormContextType | undefined>(undefined)
+
+export type PurchaseFormProps = {}
+
+export default function PurchaseForm(props: PurchaseFormProps) {
+  console.log('PurchaseForm render')
+  const authCtx = useContext(AuthContext)
+
+  const form = useForm<Schema>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      type: '2', // 默认为包量套餐
+      live: '3', // 分钟
+      quota: 10_000, // >= 10000
+      expire: '30', // 天
+      daily_limit: 2_000, // >= 2000
+      pay_type: 'balance', // 余额支付
+    },
+  })
+
+  const router = useRouter()
+
+  const toExtract = () => {
+    router.push('/admin/extract')
+  }
+
+  const onSubmit = async (value: Schema) => {
+    try {
+      const resp = await createResourceByBalance({
+        type: Number(value.type),
+        live: Number(value.live) * 60,
+        quota: Number(value.quota),
+        expire: Number(value.expire) * 24 * 3600,
+        daily_limit: Number(value.daily_limit),
+      })
+
+      if (!resp.success) {
+        throw new Error(resp.message)
+      }
+
+      toast.success('购买成功', {
+        duration: 10 * 1000,
+        closeButton: true,
+        action: {
+          label: `去提取`,
+          onClick: toExtract,
+        },
+      })
+
+      await authCtx.refreshProfile()
+    }
+    catch (e) {
+      console.log(e)
+      toast.error('购买失败', {
+        description: (e as Error).message,
+      })
+    }
+  }
+
+  return (
+    <section role={`tabpanel`} className={`bg-white rounded-lg`}>
+      <Form form={form} onSubmit={onSubmit} className={`flex flex-row`}>
+        <PurchaseFormContext.Provider value={{form}}>
+          <Left/>
+          <Center/>
+          <Right/>
+        </PurchaseFormContext.Provider>
+      </Form>
+    </section>
+  )
+}
+
--- a/src/components/composites/_client/left.tsx
+++ b/src/components/composites/_client/left.tsx
@@ -0,0 +1,124 @@
+'use client'
+import {useState} from 'react'
+import Image from 'next/image'
+import banner from '@/components/composites/_assets/banner.webp'
+
+export type LeftProps = {
+}
+
+export default function Left(props: LeftProps) {
+  return (
+    <div className="flex-none basis-56 p-8 flex flex-col gap-4">
+      <Image src={banner} alt={`banner`} className={`w-full`}/>
+      <h3 className={`text-lg`}>包量套餐</h3>
+      <ul className={`flex flex-col gap-3`}>
+        <Combo name={`3分钟`} level={[
+          {number: 30000, discount: 10},
+          {number: 80000, discount: 20},
+          {number: 200000, discount: 30},
+          {number: 450000, discount: 40},
+          {number: 1000000, discount: 50},
+          {number: 1600000, discount: 65},
+        ]}/>
+        <Combo name={`5分钟`} level={[
+          {number: 30000, discount: 10},
+          {number: 80000, discount: 20},
+          {number: 200000, discount: 30},
+          {number: 450000, discount: 40},
+          {number: 1000000, discount: 50},
+          {number: 1600000, discount: 65},
+        ]}/>
+        <Combo name={`10分钟`} level={[
+          {number: 30000, discount: 10},
+          {number: 80000, discount: 20},
+          {number: 200000, discount: 30},
+          {number: 450000, discount: 40},
+          {number: 1000000, discount: 50},
+          {number: 1600000, discount: 65},
+        ]}/>
+        <Combo name={`15分钟`} level={[
+          {number: 30000, discount: 10},
+          {number: 80000, discount: 20},
+          {number: 200000, discount: 30},
+          {number: 450000, discount: 40},
+          {number: 1000000, discount: 50},
+          {number: 1600000, discount: 65},
+        ]}/>
+        <Combo name={`30分钟`} level={[
+          {number: 30000, discount: 10},
+          {number: 80000, discount: 20},
+          {number: 200000, discount: 30},
+          {number: 450000, discount: 40},
+          {number: 1000000, discount: 50},
+          {number: 1600000, discount: 65},
+        ]}/>
+      </ul>
+      <div className={`border-b border-gray-200`}></div>
+      <h3 className={`text-lg`}>包时套餐</h3>
+      <ul className={`flex flex-col gap-3`}>
+        <li className={`flex justify-between`}>
+          <span className={`text-sm text-gray-500`}>7天</span>
+          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>9折</span>
+        </li>
+        <li className={`flex justify-between`}>
+          <span className={`text-sm text-gray-500`}>30天</span>
+          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>8折</span>
+        </li>
+        <li className={`flex justify-between`}>
+          <span className={`text-sm text-gray-500`}>90天</span>
+          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>7折</span>
+        </li>
+        <li className={`flex justify-between`}>
+          <span className={`text-sm text-gray-500`}>180天</span>
+          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>6折</span>
+        </li>
+        <li className={`flex justify-between`}>
+          <span className={`text-sm text-gray-500`}>360天</span>
+          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>5折</span>
+        </li>
+      </ul>
+    </div>
+  )
+}
+
+function Combo(props: {
+  name: string
+  level?: {
+    number: number
+    discount: number
+  }[]
+}) {
+
+  const [open, setOpen] = useState(false)
+
+  return (
+    <li>
+      <p className={`flex justify-between items-center`}>
+        <span>{props.name}</span>
+        <button
+          className={`text-gray-500 text-sm`}
+          onClick={() => setOpen(!open)}
+        >
+          {open ? '收起' : '展开'}
+        </button>
+      </p>
+      {props.level && (
+        <ul className={[
+          `flex flex-col gap-3 overflow-hidden`,
+          `transition-[opacity,padding,max-height] transition-discrete duration-200 ease-in-out`,
+          open
+            ? 'delay-[0s, 0s] opacity-100 py-3 max-h-80'
+            : 'delay-[0s, 0.2s] opacity-0 p-0 max-h-0',
+        ].join(' ')}>
+          {props.level.map((item, index) => (
+            <li key={index} className={`flex flex-row justify-between items-center`}>
+              <span className={`text-gray-500 text-sm`}>{item.number}</span>
+              <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>赠送 {item.discount} %</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </li>
+  )
+}
+
--- a/src/components/composites/_client/option.tsx
+++ b/src/components/composites/_client/option.tsx
@@ -0,0 +1,34 @@
+'use client'
+import {FormLabel} from '@/components/ui/form'
+import {merge} from '@/lib/utils'
+import {RadioGroupItem} from '@/components/ui/radio-group'
+import {ReactNode} from 'react'
+
+export type FormOptionProps = {
+  id: string
+  value: string
+  label?: string
+  description?: string
+  compare: string
+  className?: string
+  children?: ReactNode
+}
+
+export default function FormOption(props: FormOptionProps) {
+  return <>
+    <FormLabel
+      htmlFor={props.id}
+      className={merge(
+        `transition-colors duration-150 ease-in-out`,
+        `px-6 py-4 border rounded-md flex flex-col gap-2 cursor-pointer`,
+        props.compare === props.value ? `bg-primary/10 border-primary` : `border-gray-200`,
+        props.className,
+      )}>
+      {props.children ? props.children : <>
+        <span>{props.label}</span>
+        {props.description && <p className={`text-sm text-gray-500`}>{props.description}</p>}
+      </>}
+    </FormLabel>
+    <RadioGroupItem id={props.id} value={props.value} className={`hidden`}/>
+  </>
+}
--- a/src/components/composites/_client/recharge.tsx
+++ b/src/components/composites/_client/recharge.tsx
@@ -0,0 +1,155 @@
+'use client'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {Button} from '@/components/ui/button'
+import {Form, FormField} from '@/components/ui/form'
+import {useForm} from 'react-hook-form'
+import zod from 'zod'
+import FormOption from '@/components/composites/_client/option'
+import {RadioGroup} from '@/components/ui/radio-group'
+import Image from 'next/image'
+import wechat from '../_assets/wechat.svg'
+import alipay from '../_assets/alipay.svg'
+import {zodResolver} from '@hookform/resolvers/zod'
+import {tradeRecharge} from '@/actions/trade'
+import {toast} from 'sonner'
+import {useRouter} from 'next/navigation'
+
+const schema = zod.object({
+  method: zod.enum(['alipay', 'wechat']),
+  amount: zod.number().min(1, '充值金额必须大于 0'),
+})
+
+type Schema = zod.infer<typeof schema>
+
+export type RechargeModelProps = {}
+
+export default function RechargeModal(props: RechargeModelProps) {
+
+  const form = useForm<Schema>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      method: 'alipay',
+      amount: 50,
+    },
+  })
+
+  const router = useRouter()
+
+  const onSubmit = async (data: Schema) => {
+    try {
+      const resp = await tradeRecharge(data)
+      if (!resp.success) {
+        throw new Error(resp.message)
+      }
+
+      // todo 跳转支付页
+      router.push('/pay')
+    }
+    catch (e) {
+      toast.error(`充值失败`, {
+        description: (e as Error).message,
+      })
+    }
+  }
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant={`accent`} type={`button`} className={`px-4 h-8`}>去充值</Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogTitle className={`flex flex-col gap-2`}>
+          充值中心
+        </DialogTitle>
+
+        <Form form={form} onSubmit={onSubmit} className={`flex flex-col gap-8`}>
+
+          {/* 充值额度 */}
+          <FormField<Schema> name={`amount`} label={`充值额度`} className={`flex flex-col gap-4`}>
+            {({id, field}) => (
+              <RadioGroup
+                id={id}
+                defaultValue={String(field.value)}
+                onValueChange={v => field.onChange(Number(v))}
+                className={`flex flex-col gap-2`}>
+
+                <div className={`flex items-center gap-2`}>
+                  <FormOption
+                    id={`${id}-20`} value={`20`} label={`20元`}
+                    compare={String(field.value)}
+                    className={`flex-1`}
+                  />
+                  <FormOption
+                    id={`${id}-50`} value={`50`} label={`50元`}
+                    compare={String(field.value)}
+                    className={`flex-1`}
+                  />
+                  <FormOption
+                    id={`${id}-100`} value={`100`} label={`100元`}
+                    compare={String(field.value)}
+                    className={`flex-1`}
+                  />
+                </div>
+
+                <div className={`flex items-center gap-2`}>
+                  <FormOption
+                    id={`${id}-200`} value={`200`} label={`200元`}
+                    compare={String(field.value)}
+                    className={`flex-1`}
+                  />
+                  <FormOption
+                    id={`${id}-500`} value={`500`} label={`500元`}
+                    compare={String(field.value)}
+                    className={`flex-1`}
+                  />
+                  <FormOption
+                    id={`${id}-1000`} value={`1000`} label={`1000元`}
+                    compare={String(field.value)}
+                    className={`flex-1`}
+                  />
+                </div>
+              </RadioGroup>
+            )}
+          </FormField>
+
+          {/* 支付方式 */}
+          <FormField name={`method`} label={`支付方式`} className={`flex flex-col gap-4`}>
+            {({id, field}) => (
+              <RadioGroup
+                id={id}
+                defaultValue={field.value}
+                onValueChange={field.onChange}
+                className={`flex gap-2`}>
+                <FormOption
+                  id={`${id}-alipay`} value={`alipay`}
+                  compare={field.value}
+                  className={`flex-1 flex-row justify-center items-center`}>
+                  <Image src={alipay} alt={`支付宝 logo`} className={`w-6 h-6`}/>
+                  <span>支付宝</span>
+                </FormOption>
+                <FormOption
+                  id={`${id}-wechat`} value={`wechat`}
+                  compare={field.value}
+                  className={`flex-1 flex-row justify-center items-center`}>
+                  <Image src={wechat} alt={`微信 logo`} className={`w-6 h-6`}/>
+                  <span>微信</span>
+                </FormOption>
+              </RadioGroup>
+            )}
+          </FormField>
+
+          <DialogFooter className={`!flex !flex-row !justify-center`}>
+            <Button className={`px-8 h-12 text-lg`}>立即支付</Button>
+          </DialogFooter>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/src/components/composites/_client/right.tsx
+++ b/src/components/composites/_client/right.tsx
@@ -0,0 +1,128 @@
+'use client'
+import {useContext} from 'react'
+import {PurchaseFormContext} from '@/components/composites/_client/form'
+import {RadioGroup} from '@/components/ui/radio-group'
+import {FormField} from '@/components/ui/form'
+import FormOption from '@/components/composites/_client/option'
+import Image from 'next/image'
+import alipay from '../_assets/alipay.svg'
+import wechat from '../_assets/wechat.svg'
+import balance from '../_assets/balance.svg'
+import {Button} from '@/components/ui/button'
+import {AuthContext} from '@/components/providers/AuthProvider'
+import RechargeModal from '@/components/composites/_client/recharge'
+
+export type RightProps = {}
+
+export default function Right(props: RightProps) {
+  console.log('Right render')
+
+  const authCtx = useContext(AuthContext)
+  const profile = authCtx.profile
+
+  const form = useContext(PurchaseFormContext)?.form
+  if (!form) {
+    throw new Error(`Center component must be used within PurchaseFormContext`)
+  }
+
+  const watchType = form.watch('type')
+  const watchLive = form.watch('live')
+  const watchQuota = form.watch('quota')
+  const watchExpire = form.watch('expire')
+  const watchDailyLimit = form.watch('daily_limit')
+
+  return (
+    <div className={`flex-none basis-80 p-6 flex flex-col gap-6`}>
+      <h3>订单详情</h3>
+      <ul className={`flex flex-col gap-3`}>
+        <li className={`flex justify-between items-center`}>
+          <span className={`text-sm text-gray-500`}>套餐名称</span>
+          <span className={`text-sm`}>
+            {watchType === '2' ? `包量套餐` : `包时套餐`}
+          </span>
+        </li>
+        <li className={`flex justify-between items-center`}>
+          <span className={`text-sm text-gray-500`}>IP 时效</span>
+          <span className={`text-sm`}>
+            {watchLive}分钟
+          </span>
+        </li>
+        {watchType === '2' ? (
+          <li className={`flex justify-between items-center`}>
+            <span className={`text-sm text-gray-500`}>购买 IP 量</span>
+            <span className={`text-sm`}>
+              {watchQuota}个
+            </span>
+          </li>
+        ) : <>
+          <li className={`flex justify-between items-center`}>
+            <span className={`text-sm text-gray-500`}>套餐时长</span>
+            <span className={`text-sm`}>
+              {watchExpire}天
+            </span>
+          </li>
+          <li className={`flex justify-between items-center`}>
+            <span className={`text-sm text-gray-500`}>每日限额</span>
+            <span className={`text-sm`}>
+              {watchDailyLimit}个
+            </span>
+          </li>
+        </>}
+      </ul>
+      <div className={`border-b border-gray-200`}></div>
+      <p className={`flex justify-between items-center`}>
+        <span>价格</span>
+        <span className={`text-xl text-orange-500`}>￥--</span>
+      </p>
+      <FormField name={`pay_type`} label={`支付方式`} className={`flex flex-col gap-6`}>
+        {({id, field}) => (
+          <RadioGroup
+            id={id}
+            defaultValue={field.value}
+            onValueChange={field.onChange}
+            className={`flex flex-col gap-3`}>
+            <div className={`w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md`}>
+              <p className={`flex items-center gap-3`}>
+                <Image src={balance} alt={`余额icon`}/>
+                <span className={`text-sm text-gray-500`}>账户余额</span>
+              </p>
+              <p className={`flex justify-between items-center`}>
+                <span className={`text-xl`}>{profile?.balance}</span>
+                <RechargeModal/>
+              </p>
+
+            </div>
+            <FormOption
+              id={`${id}-balance`}
+              value={`balance`}
+              compare={field.value}
+              className={`p-3 w-full flex-row gap-2 justify-center`}>
+              <Image src={balance} alt={`余额 icon`}/>
+              <span>余额</span>
+            </FormOption>
+            <FormOption
+              id={`${id}-wechat`}
+              value={`wechat`}
+              compare={field.value}
+              className={`p-3 w-full flex-row gap-2 justify-center`}>
+              <Image src={wechat} alt={`微信 logo`}/>
+              <span>微信</span>
+            </FormOption>
+            <FormOption
+              id={`${id}-alipay`}
+              value={`alipay`}
+              compare={field.value}
+              className={`p-3 w-full flex-row gap-2 justify-center`}>
+              <Image src={alipay} alt={`支付宝 logo`}/>
+              <span>支付宝</span>
+            </FormOption>
+          </RadioGroup>
+        )}
+      </FormField>
+      <Button className={`mt-4 h-12`} type="submit">
+        立即支付
+      </Button>
+    </div>
+  )
+}
+
--- a/src/components/composites/purchase.tsx
+++ b/src/components/composites/purchase.tsx
@@ -0,0 +1,27 @@
+import PurchaseForm from '@/components/composites/_client/form'
+
+export type PurchaseProps = {}
+
+export default async function Purchase(props: PurchaseProps) {
+
+  return (
+    <div className="flex flex-col gap-4">
+      <ul role={`tablist`} className={`flex justify-center items-stretch bg-white rounded-lg`}>
+        <li role={`tab`}>
+          <button className={`h-14 px-8 text-lg`}>短效动态套餐</button>
+        </li>
+        <li role={`tab`}>
+          <button className={`h-14 px-8 text-lg`}>长效静态套餐</button>
+        </li>
+        <li role={`tab`}>
+          <button className={`h-14 px-8 text-lg`}>固定套餐</button>
+        </li>
+        <li role={`tab`}>
+          <button className={`h-14 px-8 text-lg`}>定制套餐</button>
+        </li>
+      </ul>
+      <PurchaseForm/>
+    </div>
+  )
+}
+
--- a/src/components/providers/AuthProvider.tsx
+++ b/src/components/providers/AuthProvider.tsx
@@ -0,0 +1,41 @@
+'use client'
+import {User} from '@/lib/models'
+import {createContext, ReactNode, useEffect, useState} from 'react'
+import {getProfile} from '@/actions/auth/auth'
+
+type AuthContentType = {
+  profile: User | null
+  refreshProfile: () => Promise<void>
+}
+
+export const AuthContext = createContext<AuthContentType>({
+  profile: null,
+  refreshProfile: async () => {
+    throw new Error('Not implemented')
+  },
+})
+
+export type ProfileProviderProps = {
+  children: ReactNode
+}
+
+export default function AuthProvider(props: ProfileProviderProps) {
+
+  const [profile, setProfile] = useState<User | null>(null)
+
+  const refreshProfile = async () => {
+    setProfile(await getProfile(true))
+  }
+
+  useEffect(() => {
+    refreshProfile().then()
+  }, [])
+
+  return (
+    <AuthContext.Provider value={{
+      profile, refreshProfile,
+    }}>
+      {props.children}
+    </AuthContext.Provider>
+  )
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -3,7 +3,7 @@ import {Slot} from '@radix-ui/react-slot'
 import {merge} from '@/lib/utils'

 type ButtonProps = React.ComponentProps<'button'> & {
-  variant?: 'default' | 'outline' | 'gradient' | 'danger'
+  variant?: 'default' | 'outline' | 'gradient' | 'danger' | 'accent'
 }

 function Button(rawProps: ButtonProps) {
@@ -22,9 +22,10 @@ function Button(rawProps: ButtonProps) {
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        {
          gradient: 'bg-gradient-to-r from-blue-400 to-cyan-300 text-white ring-offset-2',
-          default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-          danger: 'bg-destructive text-white shadow-xs hover:bg-destructive/90',
-          outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+          accent: 'bg-accent text-accent-foreground hover:bg-accent/90',
+          danger: 'bg-destructive text-white hover:bg-destructive/90',
+          outline: 'border bg-background hover:bg-secondary hover:text-secondary-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        }[variant ?? 'default'],
        className,
      )}
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -28,7 +28,11 @@ function Form<T extends FieldValues>(rawProps: FormProps<T>) {

  return (
    <FormProvider {...form}>
-      <form {...props} onSubmit={form.handleSubmit(onSubmit)}>
+      <form {...props} onSubmit={event => {
+        event.preventDefault()
+        form.handleSubmit(onSubmit)(event)
+        event.stopPropagation()
+      }}>
        {children}
      </form>
    </FormProvider>
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,277 +1,12 @@
 // API工具函数

 // 定义后端服务URL和OAuth2配置
-import {cookies} from 'next/headers'
-import {redirect} from 'next/navigation'
-
 const API_BASE_URL = process.env.API_BASE_URL
 const CLIENT_ID = process.env.CLIENT_ID
 const CLIENT_SECRET = process.env.CLIENT_SECRET

-// OAuth令牌缓存
-interface TokenCache {
-  token: string
-  expires: number // 过期时间戳
-}
-
-// ======================
-// region device token
-// ======================
-
-let tokenCache: TokenCache | null = null
-
-// 获取OAuth2访问令牌
-export async function getAccessToken(forceRefresh = false): Promise<string> {
-  try {
-    // 检查缓存的令牌是否可用
-    if (!forceRefresh && tokenCache && tokenCache.expires > Date.now()) {
-      return tokenCache.token
-    }
-
-    const addr = `${API_BASE_URL}/api/auth/token`
-    const body = {
-      client_id: CLIENT_ID,
-      client_secret: CLIENT_SECRET,
-      grant_type: 'client_credentials',
-    }
-
-    const response = await fetch(addr, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(body),
-    })
-
-    if (!response.ok) {
-      throw new Error(`OAuth token request failed: ${response.status} ${await response.text()}`)
-    }
-
-    const data = await response.json()
-
-    // 缓存令牌和过期时间
-    // 通常后端会返回expires_in（秒为单位）
-    tokenCache = {
-      token: data.access_token,
-      expires: Date.now() + data.expires_in * 1000,
-    }
-
-    return tokenCache.token
-  }
-  catch (error) {
-    console.error('Failed to get access token:', error)
-    throw new Error('认证服务暂时不可用')
-  }
-}
-
-// 通用的API调用函数
-export async function call<R = undefined>(endpoint: string, data: unknown): Promise<ApiResponse<R>> {
-  try {
-    // 发送请求
-    let accessToken = getAccessToken()
-    const requestOptions = {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${await accessToken}`,
-      },
-      body: JSON.stringify(data),
-    }
-    let response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)
-
-    // 如果返回401未授权，尝试刷新令牌并重试一次
-    if (response.status === 401) {
-      accessToken = getAccessToken(true) // 强制刷新令牌
-
-      // 使用新令牌重试请求
-      requestOptions.headers['Authorization'] = `Bearer ${await accessToken}`
-      response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)
-    }
-
-    // 检查响应状态
-    if (!response.ok) {
-      console.log('响应不成功', `status=${response.status}`, await response.text())
-      return {
-        success: false,
-        status: response.status,
-        message: '请求失败',
-      }
-    }
-
-    // 检查响应状态
-    return handleResponse(response)
-  }
-  catch (e) {
-    console.error('API call failed:', e)
-    throw new Error('服务调用失败', {cause: e})
-  }
-}
-
-
-// endregion
-
-// ======================
-// region user token
-// ======================
-
-async function getUserToken(refresh = false): Promise<string> {
-  // 从 cookie 中获取用户令牌
-  const cookie = await cookies()
-  const userToken = cookie.get('auth_token')?.value
-  const userRefresh = cookie.get('auth_refresh')?.value
-
-  // 检查缓存的令牌是否可用
-  if (!refresh && userToken) {
-    return userToken
-  }
-
-  // 如果没有刷新令牌，抛出异常
-  if (!userRefresh) {
-    throw UnauthorizedError
-  }
-
-  // 请求刷新访问令牌
-  const addr = `${API_BASE_URL}/api/auth/token`
-  const body = {
-    grant_type: 'refresh_token',
-    client_id: CLIENT_ID,
-    client_secret: CLIENT_SECRET,
-    refresh_token: userRefresh,
-  }
-
-  const response = await fetch(addr, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(body),
-  })
-
-  if (!response.ok) {
-    console.log('刷新令牌失败', `status=${response.status}`, await response.text())
-    throw UnauthorizedError
-  }
-
-  // 保存新的用户令牌到 cookie
-  const data = await response.json()
-  const nextAccessToken = data.access_token
-  const nextRefreshToken = data.refresh_token
-  const expiresIn = data.expires_in
-
-  cookie.set('auth_token', nextAccessToken, {
-    httpOnly: true,
-    sameSite: 'strict',
-    secure: process.env.NODE_ENV === 'production',
-    maxAge: Math.max(expiresIn, 0),
-  })
-  cookie.set('auth_refresh', nextRefreshToken, {
-    httpOnly: true,
-    sameSite: 'strict',
-    secure: process.env.NODE_ENV === 'production',
-    maxAge: 7 * 24 * 3600, // 7天
-  })
-
-  return nextAccessToken
-}
-
-// 使用用户令牌的API调用函数
-export async function callWithUserToken<R = undefined>(
-  endpoint: string,
-  data: unknown,
-): Promise<ApiResponse<R>> {
-  try {
-    let token = await getUserToken()
-
-    // 发送请求
-    let response: Response
-    const requestOptions = {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${token}`,
-      },
-      body: JSON.stringify(data),
-    }
-
-    response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)
-
-    if (response.status === 401) {
-      token = await getUserToken(true)
-      requestOptions.headers['Authorization'] = `Bearer ${token}`
-      response = await fetch(`${API_BASE_URL}${endpoint}`, requestOptions)
-    }
-
-    // 检查响应状态
-    if (!response.ok) {
-      if (response.status === 401) {
-        throw UnauthorizedError
-      }
-
-      console.log('响应不成功', `status=${response.status}`, await response.text())
-      return {
-        success: false,
-        status: response.status,
-        message: '请求失败',
-      }
-    }
-
-    return handleResponse(response)
-  }
-  catch (e) {
-    // 重定向到登录页面
-    if (e === UnauthorizedError) {
-      redirect('/login')
-    }
-
-    console.error('API call with user token failed:', e)
-    throw new Error('服务调用失败', {cause: e})
-  }
-}
-
-// endregion
-
-// 统一响应解析
-async function handleResponse<R = undefined>(response: Response): Promise<ApiResponse<R>> {
-
-  // 解析响应数据
-  const type = response.headers.get('Content-Type') ?? 'text/plain'
-  if (type.indexOf('application/json') !== -1) {
-    const json = await response.json()
-    if (!response.ok) {
-      console.log('响应不成功', `status=${response.status}`, json)
-      return {
-        success: false,
-        status: response.status,
-        message: json.message || '请求失败',
-      }
-    }
-    return {
-      success: true,
-      data: json,
-    }
-  }
-  else if (type.indexOf('text/plain') !== -1) {
-    const text = await response.text()
-    if (!response.ok) {
-      console.log('响应不成功', `status=${response.status}`, text)
-      return {
-        success: false,
-        status: response.status,
-        message: text || '请求失败',
-      }
-    }
-    return {
-      success: true,
-      data: undefined as unknown as R, // 强转类型，考虑优化
-    }
-  }
-  else {
-    throw new Error(`无法解析响应数据，未处理的 Content-Type: ${type}`)
-  }
-}
-
 // 统一的API响应类型
-export type ApiResponse<T = undefined> = {
+type ApiResponse<T = undefined> = {
  success: false
  status: number
  message: string
@@ -280,11 +15,21 @@ export type ApiResponse<T = undefined> = {
  data: T
 }

-export type PageRecord<T = unknown> = {
+type PageRecord<T = unknown> = {
  total: number
  page: number
  size: number
  list: T[]
 }

-export const UnauthorizedError = new Error('未授权访问')
+// 预定义错误
+const UnauthorizedError = new Error('未授权访问')
+
+export {
+  API_BASE_URL,
+  CLIENT_ID,
+  CLIENT_SECRET,
+  type ApiResponse,
+  type PageRecord,
+  UnauthorizedError,
+}
--- a/src/lib/models.ts
+++ b/src/lib/models.ts
@@ -0,0 +1,25 @@
+type User = {
+  id: number
+  admin_id: number
+  phone: string
+  username: string
+  email: string
+  name: string
+  avatar: string
+  status: number
+  balance: number
+  id_type: number
+  id_no: string
+  id_token: string
+  contact_qq: string
+  contact_wechat: string
+  last_login: Date
+  last_login_host: string
+  last_login_agent: string
+  created_at: Date
+  updated_at: Date
+}
+
+export type {
+  User,
+}