提取IP添加主机格式选项功能

Co-authored-by: Copilot <copilot@github.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanhu-web",
-  "version": "1.6.0",
+  "version": "1.12.0",
   "private": true,
   "scripts": {
     "dev": "next dev -H 0.0.0.0 --turbopack",

publish.ps1

@@ -9,8 +9,8 @@ if ($confrim -ne "y") {
     exit 0
 }
 
-docker build -t repo.lanhuip.com:8554/lanhu/web:latest .
+docker build -t repo.lanhuip.com/lanhu/web:latest .
-docker build -t repo.lanhuip.com:8554/lanhu/web:$($args[0]) .
+docker build -t repo.lanhuip.com/lanhu/web:$($args[0]) .
 
-docker push repo.lanhuip.com:8554/lanhu/web:latest
+docker push repo.lanhuip.com/lanhu/web:latest
-docker push repo.lanhuip.com:8554/lanhu/web:$($args[0])
+docker push repo.lanhuip.com/lanhu/web:$($args[0])

src/actions/balance.ts

@@ -0,0 +1,14 @@
+'use server'
+import {Balance} from '@/lib/models'
+import {callByUser} from '@/actions/base'
+import {PageRecord} from '@/lib/api'
+
+export async function listBalances(params: {
+  page?: number
+  size?: number
+  bill_no?: string
+  created_at_start?: Date
+  created_at_end?: Date
+}) {
+  return await callByUser<PageRecord<Balance>>('/api/balance/page', params)
+}

src/actions/base.ts

@@ -2,6 +2,7 @@
 import {API_BASE_URL, ApiResponse, CLIENT_ID, CLIENT_SECRET} from '@/lib/api'
 import {add, isBefore} from 'date-fns'
 import {cookies, headers} from 'next/headers'
+import {redirect} from 'next/navigation'
 import {cache} from 'react'
 
 export type TokenResp = {
@@ -106,7 +107,6 @@ const _callByUser = cache(async <R = undefined>(
 // ======================
 
 async function call<R = undefined>(url: string, body: RequestInit['body'], auth?: string): Promise<ApiResponse<R>> {
-  let response: Response
   try {
     const reqHeaders = await headers()
     const reqIP = reqHeaders.get('x-forwarded-for')
@@ -118,15 +118,14 @@ async function call<R = undefined>(url: string, body: RequestInit['body'], auth?
     if (reqIP) callHeaders['X-Forwarded-For'] = reqIP
     if (reqUA) callHeaders['User-Agent'] = reqUA
 
-    response = await fetch(url, {
+    const response = await fetch(url, {
       method: 'POST',
       headers: callHeaders,
       body,
     })
-  }
+
-  catch (e) {
+    if (response.status === 401) {
-    console.error('后端请求失败', url, (e as Error).message)
+      return redirect('/login?redirect=' + encodeURIComponent(url.replace(API_BASE_URL, '')))
-    throw new Error(`请求失败，网络错误`)
     }
 
     const type = response.headers.get('Content-Type') ?? 'text/plain'
@@ -168,6 +167,11 @@ async function call<R = undefined>(url: string, body: RequestInit['body'], auth?
 
     throw new Error(`无法解析响应数据，未处理的 Content-Type: ${type}`)
   }
+  catch (e) {
+    console.error('后端请求失败', url, (e as Error).message)
+    throw new Error(`请求失败，网络错误`)
+  }
+}
 
 // 导出
 export {

src/actions/channel.ts

@@ -17,6 +17,7 @@ export async function listChannels(props: {
 }
 
 type CreateChannelsResp = {
+  ip: string
   host: string
   port: string
   username?: string
@@ -31,6 +32,7 @@ export async function createChannels(params: {
   prov?: string
   city?: string
   isp?: number
+  host_format?: number
 }) {
-  return callByUser<CreateChannelsResp[]>('/api/channel/create', params)
+  return callPublic<CreateChannelsResp[]>('/api/channel/create', params)
 }

src/actions/resource.ts

@@ -103,3 +103,10 @@ export async function getPriceHome(props: CreateResourceReq) {
     discounted?: string
   }>('/api/resource/price', props)
 }
+
+export async function updateCheckip(props: {
+  id: number
+  checkip: boolean
+}) {
+  return callByUser('/api/resource/update/checkip', props)
+}

src/app/(api)/proxies/route.ts

@@ -23,6 +23,7 @@ export async function GET(req: NextRequest) {
     const prov = params.get('a') || undefined
     const city = params.get('b') || undefined
     const isp = params.get('s') || undefined
+    const hostFormat = params.get('rh') || 'domain'
 
     const result = await createChannels({
       resource_id: Number(resource_id),
@@ -32,7 +33,9 @@ export async function GET(req: NextRequest) {
       prov,
       city,
       isp: Number(isp),
+      host_format: hostFormat === 'domain' ? 1 : 2,
     })
+
     if (!result.success) {
       throw new Error(result.message)
     }
@@ -46,10 +49,32 @@ export async function GET(req: NextRequest) {
 
     switch (format) {
     case 'json':
-      return NextResponse.json(result.data)
+      if (hostFormat === 'domain') {
+        const domainFormatData = result.data.map(item => ({
+          host: item.host,
+          port: item.port,
+          ...(item.username && item.password ? {username: item.username, password: item.password} : {}),
+        }))
+        return NextResponse.json(domainFormatData)
+      }
+      else {
+        const ipFormatData = result.data.map(item => ({
+          ip: item.ip,
+          port: item.port,
+          ...(item.username && item.password ? {username: item.username, password: item.password} : {}),
+        }))
+        return NextResponse.json(ipFormatData)
+      }
     case 'text':
       const text = result.data.map((item) => {
-        const list = [item.host, item.port]
+        let hostValue: string
+        if (hostFormat === 'domain') {
+          hostValue = item.host
+        }
+        else {
+          hostValue = item.ip
+        }
+        const list = [hostValue, String(item.port)]
         if (item.username && item.password) {
           list.push(item.username)
           list.push(item.password)

src/app/(auth)/login/login-card.tsx

@@ -6,7 +6,7 @@ import {Card, CardContent} from '@/components/ui/card'
 import {Form, FormField} from '@/components/ui/form'
 import {Label} from '@/components/ui/label'
 import {Tabs, TabsList, TabsTrigger} from '@/components/ui/tabs'
-import {EyeClosedIcon, EyeIcon} from 'lucide-react'
+import {EyeClosedIcon, EyeIcon, HomeIcon} from 'lucide-react'
 import {useState, ReactNode, useEffect, Suspense} from 'react'
 import zod from 'zod'
 import {useForm, useFormContext, useWatch} from 'react-hook-form'
@@ -16,6 +16,7 @@ import {useRouter} from 'next/navigation'
 import {login, LoginMode} from '@/actions/auth'
 import {useProfileStore} from '@/components/stores/profile'
 import dynamic from 'next/dynamic'
+import Link from 'next/link'
 
 const smsSchema = zod.object({
   username: zod.string().length(11, '请输入正确的手机号码'),
@@ -88,6 +89,16 @@ export default function LoginCard() {
   const [showPwd, setShowPwd] = useState(false)
 
   return (
+    <div className="relative flex flex-col items-center">
+      <div className="relative w-96 mx-4">
+        <Link
+          href="/"
+          className="absolute -top-8 right-0 inline-flex items-center text-sm transition-colors px-10"
+        >
+          <HomeIcon size={18} className="mr-1"/>
+          返回首页
+        </Link>
+      </div>
       <Card className="w-96 mx-4 shadow-lg relative z-20 py-8">
         <CardContent className="px-8">
           {/* 登录方式切换 */}
@@ -193,6 +204,7 @@ export default function LoginCard() {
           </Form>
         </CardContent>
       </Card>
+    </div>
   )
 }
 

src/app/(home)/custom/page.tsx

@@ -237,7 +237,7 @@ export default function CustomPage() {
         <section className="relative rounded-lg overflow-hidden h-48 lg:h-56">
           <Image
             src={group}
-            alt="免费试用背景"
+            alt="立即试用背景"
             fill
             className="object-cover"
             priority
@@ -251,9 +251,9 @@ export default function CustomPage() {
                 className={merge(
                   'bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md whitespace-nowrap',
                 )}
-                onClick={() => router.push('/login')}
+                onClick={() => router.push('/product')}
               >
-                免费试用
+                立即试用
               </Button>
             </div>
           </div>

src/app/(home)/docs/(product)/api-docs/page.md

@@ -14,7 +14,8 @@
 | b      | string   | 否   | 归属地城市。默认全局随机                                                                                                   |
 | s      | string   | 否   | 归属地运营商。默认全局随机                                                                                                 |
 | d      | string   | 否   | 是否去重：1 - 是，0 -  否。默认为是                                                                                        |
-| rt     | string   | 否   | 返回类型：1 - TXT，2 - JSON。默认 TXT                                                                                      |
+| rt     | string   | 否   | 返回类型：1 - TXT，2 - JSON。默认 TXT  
+| rh     | string   | 否   | 返回时主机字段的格式：1 - 域名，2 - IP。默认为域名                                                                             |
 | rs     | number[] | 否   | 返回时要使用的分隔符，值为该字符的 ascii 编码，可以有多个字符，多个字符用半角逗号连接。默认为 13,10，即回车 + 换行（\r\n） |
 | rb     | number[] | 否   | 返回时要使用的换行符，值为该字符的 ascii 编码，可以有多个字符，多个字符用半角逗号连接。默认为 124，即垂直线（ \| ）        |
 | n      | number   | 否   | 提取数量。默认为 1                                                                                                         |
@@ -33,7 +34,7 @@
 | password | string | 代理服务器密码（仅在认证类型为密码时返回）   |
 
 
-## 示例
+## 示例1：
 
 ### 请求示例
 
@@ -65,3 +66,36 @@ GET https://lanhuip.com/api/extract?i=1&t=2&a=广东省&b=广州市&s=移动&d=1
   }
 ]
 ```
+
+## 示例2：
+
+### 请求示例
+
+```http   
+GET https://lanhuip.com/api/extract?i=24&t=1&a=广东省&b=广州市&d=1&rt=text&rh=ip&rs=124&rb=13%2C10&n=1
+```
+
+### 响应示例
+
+```json
+[
+  {
+    "ip": "127.0.0.1",
+    "port": 20000,
+    "username": "user1",
+    "password": "pass1"
+  },
+  {
+    "ip": "127.0.0.1",
+    "port": 20001,
+    "username": "user2",
+    "password": "pass2"
+  },
+  {
+    "ip": "127.0.0.1",
+    "port": 20002,
+    "username": "user3",
+    "password": "pass3"
+  }
+]
+```

src/app/admin/_components/addr.tsx

@@ -10,13 +10,13 @@ export default function Addr({channel}: {
   const expired = isBefore(channel.expired_at, new Date())
 
   return (
-    <div className={`${expired ? 'text-weak' : ''}`}>
+    <>
       <span>{ip}:{port}</span>
       {expired && (
-        <Badge variant="secondary">
+        <Badge className="ml-2 bg-orange-100 text-orange-700 hover:bg-orange-100 dark:bg-orange-900/30 dark:text-orange-400">
           已过期
         </Badge>
       )}
-    </div>
+    </>
   )
 }

src/app/admin/balance/layout.tsx

@@ -0,0 +1,16 @@
+import {ReactNode} from 'react'
+import {Metadata} from 'next'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: '余额管理 - 蓝狐代理',
+  }
+}
+
+export type PurchaseLayoutProps = {
+  children: ReactNode
+}
+
+export default async function PurchaseLayout(props: PurchaseLayoutProps) {
+  return props.children
+}

src/app/admin/balance/page.tsx

@@ -0,0 +1,235 @@
+'use client'
+import {useCallback, useEffect, useState} from 'react'
+import {PageRecord} from '@/lib/api'
+import {Balance} from '@/lib/models'
+import {useStatus} from '@/lib/states'
+import {Search, Eraser} from 'lucide-react'
+import {Button} from '@/components/ui/button'
+import DataTable from '@/components/data-table'
+import {format} from 'date-fns'
+import DatePicker from '@/components/date-picker'
+import {Form, FormField} from '@/components/ui/form'
+import {useForm} from 'react-hook-form'
+import zod from 'zod'
+import {zodResolver} from '@hookform/resolvers/zod'
+import {Label} from '@/components/ui/label'
+import Page from '@/components/page'
+import {CheckCircle, AlertCircle} from 'lucide-react'
+import {Input} from '@/components/ui/input'
+import {listBalances} from '@/actions/balance'
+
+const filterSchema = zod.object({
+  created_at_start: zod.date().optional(),
+  created_at_end: zod.date().optional(),
+  bill_no: zod.string().optional(),
+})
+type FilterSchema = zod.infer<typeof filterSchema>
+
+export type BalancePageProps = {}
+
+export default function BalancePage(props: BalancePageProps) {
+  const [status, setStatus] = useStatus()
+  const [data, setData] = useState<PageRecord<Balance>>({
+    page: 1,
+    size: 10,
+    total: 0,
+    list: [],
+  })
+
+  const form = useForm<FilterSchema>({
+    resolver: zodResolver(filterSchema),
+    defaultValues: {
+      bill_no: '',
+      created_at_start: undefined,
+      created_at_end: undefined,
+    },
+  })
+
+  const onSubmit = async (value: FilterSchema) => {
+    await refresh(1, data.size)
+  }
+
+  const refresh = useCallback(async (page: number, size: number) => {
+    setStatus('load')
+    try {
+      const created_at_start = form.getValues('created_at_start')
+      const created_at_end = form.getValues('created_at_end')
+      const bill_no = form.getValues('bill_no')
+
+      const res = await listBalances({
+        page, size,
+        created_at_start,
+        created_at_end,
+        bill_no: bill_no || undefined,
+      })
+
+      if (res.success) {
+        setData(res.data)
+        setStatus('done')
+      }
+      else {
+        throw new Error('Failed to load bills')
+      }
+    }
+    catch (e) {
+      setStatus('fail')
+    }
+  }, [form, setStatus])
+
+  useEffect(() => {
+    refresh(1, 10).then()
+  }, [refresh])
+
+  return (
+    <Page>
+      <section className="flex justify-between flex-wrap">
+        <Form form={form} handler={form.handleSubmit(onSubmit)} className="flex-auto flex flex-wrap gap-4 items-end">
+          <FormField name="bill_no" label={<span className="text-sm">账单编号</span>}>
+            {({id, field}) => {
+              return <Input {...field} id={id} className="h-9"/>
+            }}
+          </FormField>
+          <div className="flex flex-col gap-2">
+            <Label className="text-sm">创建时间</Label>
+            <div className="flex items-center">
+              <FormField name="created_at_start">
+                {({field}) => {
+                  const dateValue = typeof field.value === 'string' && field.value ? new Date(field.value) : undefined
+                  return (
+                    <DatePicker
+                      placeholder="选择开始时间"
+                      {...field}
+                      format="yyyy-MM-dd"
+                    />
+                  )
+                }
+                }
+              </FormField>
+              <span className="px-1">-</span>
+              <FormField name="created_at_end">
+                {({field}) => (
+                  <DatePicker
+                    placeholder="选择结束时间"
+                    {...field}
+                    format="yyyy-MM-dd"
+                  />
+                )
+                }
+              </FormField>
+            </div>
+          </div>
+          <Button className="h-9" type="submit">
+            <Search/>
+            <span>筛选</span>
+          </Button>
+          <Button
+            theme="outline"
+            className="h-9"
+            type="button"
+            onClick={() => {
+              form.reset()
+              refresh(1, data.size)
+            }}
+          >
+            <Eraser/>
+            <span>重置</span>
+          </Button>
+        </Form>
+      </section>
+
+      <DataTable
+        data={data.list}
+        status={status}
+        pagination={{
+          total: data.total,
+          page: data.page,
+          size: data.size,
+          onPageChange: async (page: number) => {
+            await refresh(page, data.size)
+          },
+          onSizeChange: async (size: number) => {
+            await refresh(data.page, size)
+          },
+        }}
+        columns={[
+          {accessorKey: 'bill_no', header: `账单编号`,
+            accessorFn: row => row.bill?.bill_no || '',
+          },
+          {
+            accessorKey: 'status',
+            header: `状态`,
+            cell: ({row}) => {
+              const trade = row.original.trade
+              if (![1, 2, 3, 4, 5].includes(trade?.method)) {
+                return (
+                  <div className="flex items-center gap-2">
+                    <CheckCircle size={16} className="text-done"/>
+                    <span>已完成</span>
+                  </div>
+                )
+              }
+              if (!trade) return <span>-</span>
+              return (
+                <div className="flex items-center gap-2">
+                  {trade?.status === 1 ? (
+                    <CheckCircle size={16} className="text-done"/>
+                  ) : trade?.status === 2 ? (
+                    <AlertCircle size={16} className="text-weak"/>
+                  ) : trade?.status === 3 ? (
+                    <AlertCircle size={16} className="text-fail"/>
+                  ) : null}
+                  <span>
+                    {trade?.status === 1 ? '已完成'
+                      : trade?.status === 2 ? '已取消'
+                        : trade?.status === 3 ? '已退款' : '-'}
+                  </span>
+                </div>
+              )
+            },
+          },
+          {
+            accessorKey: 'amount',
+            header: '变动金额',
+            cell: ({row}) => {
+              const amount = row.original.amount
+              const isPositive = Number(amount) > 0
+              return (
+                <div className="flex items-center gap-1">
+                  <span
+                    className={`font-semibold ${
+                      isPositive ? 'text-green-600' : 'text-red-600'
+                    }`}
+                  >
+                    {isPositive ? '+' : ''}
+                    {Number(amount).toFixed(2)}
+                  </span>
+                </div>
+              )
+            },
+          },
+          {
+            header: '余额变化',
+            accessorKey: 'balance_prev',
+            cell: ({row}) => (
+              <div className="flex items-center gap-2">
+                <span className="text-gray-500 text-sm">¥{Number(row.original.balance_prev).toFixed(2)}</span>
+                <span className="text-muted-foreground">→</span>
+                <span>¥{Number(row.original.balance_curr).toFixed(2)}</span>
+              </div>
+            ),
+          },
+          {
+            header: '备注',
+            accessorKey: 'remark',
+          },
+          {
+            header: '创建时间',
+            accessorKey: 'created_at',
+            cell: ({row}) =>
+              format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm'),
+          },
+        ]}
+      />
+    </Page>
+  )
+}

src/app/admin/channels/page.tsx

@@ -192,7 +192,7 @@ export default function ChannelsPage(props: ChannelsPageProps) {
                         <span >白名单</span>
                         <div className="flex flex-wrap gap-1 max-w-[200px]">
                           {channel.whitelists.split(',').map((ip, index) => (
-                            <Badge key={index} variant="secondary">
+                            <Badge key={index} className="bg-green-100 text-green-700 hover:bg-green-100 dark:bg-green-900/30 dark:text-green-400">
                               {ip.trim()}
                             </Badge >
                           ))}
@@ -201,7 +201,7 @@ export default function ChannelsPage(props: ChannelsPageProps) {
                     ) : hasAuth ? (
                       <div className="flex flex-col">
                         <span>账号密码</span>
-                        <Badge variant="secondary">
+                        <Badge className="bg-blue-100 text-blue-700 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400">
                           {channel.username}:{channel.password}
                         </Badge >
                       </div>

src/app/admin/clients.tsx

@@ -6,7 +6,7 @@ import {RealnameAuthDialog} from '@/components/composites/dialogs/realname-auth-
 import UserCenter from '@/components/composites/user-center'
 import {Button} from '@/components/ui/button'
 import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@/components/ui/tooltip'
-import {Archive, ArchiveRestore, Eye, HardDriveUpload, IdCard, LockKeyhole, Package, PanelLeftCloseIcon, PanelLeftOpenIcon, ShoppingCart, UserRound, UserRoundPen, Wallet} from 'lucide-react'
+import {Archive, ArchiveRestore, CircleDollarSign, Eye, HardDriveUpload, IdCard, LockKeyhole, MessageCircleMoreIcon, Package, PanelLeftCloseIcon, PanelLeftOpenIcon, ShoppingCart, UserRound, UserRoundPen, Wallet} from 'lucide-react'
 import {merge} from '@/lib/utils'
 import logoAvatar from '@/assets/logo-avatar.svg'
 import logoText from '@/assets/logo-text.svg'
@@ -93,7 +93,8 @@ function ContentResolved() {
 export function Header() {
   const navbar = useLayoutStore(store => store.navbar)
   const toggleNavbar = useLayoutStore(store => store.toggleNavbar)
-
+  const profile = use(useProfileStore(store => store.profile))
+  const showRealnameAuth = profile?.id_type === 0
   return (
     <header className={merge(
       `flex-none h-16 overflow-hidden`,
@@ -103,25 +104,53 @@ export function Header() {
       <div className="flex-auto flex items-center gap-2">
         <Button
           theme="ghost"
-          className="w-9 h-9 ml-4 md:ml-0"
+          className="h-9 ml-4 md:ml-0"
           onClick={toggleNavbar}>
-          {navbar
+          {navbar ? (
-            ? <PanelLeftCloseIcon/>
+            <>
-            : <PanelLeftOpenIcon/>
+              <PanelLeftCloseIcon/>
-          }
+              <span className="text-foreground/90">关闭菜单</span>
+            </>
+          ) : (
+            <>
+              <PanelLeftOpenIcon/>
+              <span className="text-foreground/90">打开菜单</span>
+            </>
+          )}
         </Button>
-        <span className="max-md:hidden">
+        <span className="max-md:hidden">欢迎来到，蓝狐代理</span>
-          欢迎来到，蓝狐代理
+        <div className="max-md:hidden h-5 w-px bg-gray-300 mx-2"/>
-        </span>
+        {showRealnameAuth ? (
+          <Link
+            href="/admin/identify"
+            className="max-md:hidden flex items-center gap-1.5 text-sm text-blue-600 hover:text-blue-800 transition-colors"
+          >
+            <IdCard size={16}/>
+            <span>实名认证</span>
+          </Link>
+        ) : (
+          <Link
+            href=""
+            className="max-md:hidden flex items-center gap-1.5 text-sm text-green-400 hover:text-green-400 transition-colors"
+          >
+            <IdCard size={16}/>
+            <span>已实名</span>
+          </Link>
+        )}
+        <div className="max-md:hidden h-5 w-px bg-gray-300 mx-2"/>
+        <a
+          href="https://wpa1.qq.com/K0s0cvwf?_type=wpa&qidian=true"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="max-md:hidden flex items-center gap-1.5 text-sm text-blue-600 hover:text-blue-800 transition-colors mr-2"
+        >
+          <MessageCircleMoreIcon size={16}/>
+          <span>联系专属客服</span>
+        </a>
       </div>
 
-      {/* right */}
+      <div className="flex-none flex items-center justify-end pr-4 max-md:hidden gap-3">
-      <div className="flex-none flex items-center justify-end pr-4 max-md:hidden gap-2">
+        <Link href="/" className="flex-none h-16 flex items-center justify-center text-sm">
-        <Link
-          href="/"
-          className={merge(
-            `flex-none h-16 flex items-center justify-center`,
-          )}>
           返回首页
         </Link>
         <Suspense>
@@ -176,12 +205,13 @@ export function Navbar() {
         <TooltipProvider>
           <NavItem href="/admin" icon={<UserRound size={20}/>} label="账户总览" expand={navbar}/>
           <NavTitle label="快速开始"/>
-          <NavItem href="/admin/identify" icon={<IdCard size={20}/>} label="实名认证" expand={navbar}/>
+          {/* <NavItem href="/admin/identify" icon={<IdCard size={20}/>} label="实名认证" expand={navbar}/> */}
           <NavItem href="/admin/whitelist" icon={<LockKeyhole size={20}/>} label="白名单" expand={navbar}/>
           <NavItem href="/admin/purchase" icon={<ShoppingCart size={20}/>} label="购买套餐" expand={navbar}/>
           <NavItem href="/admin/extract" icon={<HardDriveUpload size={20}/>} label="提取 IP" expand={navbar}/>
           <NavTitle label="个人中心"/>
           <NavItem href="/admin/profile" icon={<UserRoundPen size={20}/>} label="基本信息" expand={navbar}/>
+          <NavItem href="/admin/balance" icon={<CircleDollarSign size={20}/>} label="余额管理" expand={navbar}/>
           <NavItem href="/admin/bills" icon={<Wallet size={20}/>} label="我的账单" expand={navbar}/>
           <NavTitle label="资源管理"/>
           <NavItem href="/admin/resources" icon={<Package size={20}/>} label="我的套餐" expand={navbar}/>

src/app/admin/layout.tsx

@@ -1,4 +1,4 @@
-import {ReactNode} from 'react'
+import {ReactNode, Suspense} from 'react'
 import {Shell, Content, Header, Navbar, Mask} from './clients'
 
 export default function Template(props: {
@@ -13,7 +13,9 @@ export default function Template(props: {
         </div>
 
         <div className="col-start-2 row-start-1 bg-card overflow-hidden relative z-20">
+          <Suspense>
             <Header/>
+          </Suspense>
         </div>
 
         <svg className="col-start-2 row-start-2 w-full h-full z-20 pointer-events-none" preserveAspectRatio="none">

src/app/admin/resources/_components/list.tsx

@@ -8,7 +8,7 @@ import zod from 'zod'
 import {toast} from 'sonner'
 import {useStatus} from '@/lib/states'
 import {ExtraResp} from '@/lib/api'
-import {listResourceLong, listResourceShort} from '@/actions/resource'
+import {listResourceLong, listResourceShort, updateCheckip} from '@/actions/resource'
 import DataTable from '@/components/data-table'
 import {ColumnDef} from '@tanstack/react-table'
 import {Resource} from '@/lib/models/resource'
@@ -21,6 +21,7 @@ import {
   isValidResourceType,
   ResourceTypeBadge,
 } from './utils'
+import {Button} from '@/components/ui/button'
 
 const filterSchema = zod.object({
   resource_no: zod.string().optional().default(''),
@@ -130,11 +131,31 @@ export default function ResourceList({resourceType}: ResourceListProps) {
     })
   }
 
+  const handleCheckipChange = async (id: number, currentCheckip: boolean) => {
+    try {
+      const result = await updateCheckip({
+        id: id,
+        checkip: !currentCheckip,
+      })
+
+      if (result.success) {
+        toast.success(`IP检查已${!currentCheckip ? '启用' : '停用'}`)
+        await refresh(data.page, data.size)
+      }
+      else {
+        throw new Error(result.message || '操作失败')
+      }
+    }
+    catch (e) {
+      toast.error(e instanceof Error ? e.message : '更新IP检查状态失败')
+    }
+  }
+
   // 表格列定义
   const columns = useMemo<ColumnDef<Resource<1> | Resource<2>>[]>(() => {
     const resourceKey = isLong ? 'long' : 'short'
 
-    const baseColumns: ColumnDef<Resource<1> | Resource<2>>[] = [
+    const baseColumns = ([
       {
         header: '套餐编号',
         cell: ({row}) => {
@@ -218,7 +239,11 @@ export default function ResourceList({resourceType}: ResourceListProps) {
       {
         header: '开通时间',
         cell: ({row}) => formatDateTime(row.original.created_at),
-      },
+      }, // 短效资源增加到期时间列
+      !isLong ? {
+        header: '到期时间',
+        cell: ({row}) => formatDateTime((row.original as Resource<1>).short.expire_at),
+      } : undefined,
       {
         header: '状态',
         cell: ({row}) => {
@@ -230,15 +255,22 @@ export default function ResourceList({resourceType}: ResourceListProps) {
           )
         },
       },
-    ]
+      {
-
+        header: '操作',
-    // 短效资源增加到期时间列
+        cell: ({row}) => {
-    if (!isLong) {
+          const checkip = row.original.checkip
-      baseColumns.push({
+          return (
-        header: '到期时间',
+            <Button
-        cell: ({row}) => formatDateTime((row.original as Resource<1>).short.expire_at),
+              theme={checkip ? 'fail' : 'default'}
-      })
+              className="h-7 px-3 text-sm"
-    }
+              onClick={() => handleCheckipChange(row.original.id, row.original.checkip)}
+            >
+              {checkip ? '停用IP检查' : '启用IP检查'}
+            </Button>
+          )
+        },
+      },
+    ] satisfies ((ColumnDef<Resource<1> | Resource<2>> | undefined)[])).filter(Boolean) as ColumnDef<Resource<1> | Resource<2>>[]
 
     return baseColumns
   }, [isLong])

src/components/composites/extract/index.tsx

@@ -9,7 +9,7 @@ import {Button} from '@/components/ui/button'
 import {useForm, useFormContext, useWatch} from 'react-hook-form'
 import {Alert, AlertTitle} from '@/components/ui/alert'
 import {ArrowRight, Box, CircleAlert, CopyIcon, ExternalLinkIcon, LinkIcon, Loader, Plus, Timer} from 'lucide-react'
-import {memo, ReactNode, useEffect, useRef, useState} from 'react'
+import {memo, ReactNode, Suspense, use, useEffect, useRef, useState} from 'react'
 import {useStatus} from '@/lib/states'
 import {allResource} from '@/actions/resource'
 import {Resource} from '@/lib/models'
@@ -28,10 +28,11 @@ const schema = z.object({
   city: z.string().optional(),
   regionType: z.enum(['unlimited', 'specific']).default('unlimited'),
   isp: z.enum(['all', '1', '2', '3'], {required_error: '请选择运营商'}),
-  proto: z.enum(['all', '1', '2', '3'], {required_error: '请选择协议'}),
+  proto: z.enum(['all', '1', '2'], {required_error: '请选择协议'}),
   authType: z.enum(['1', '2'], {required_error: '请选择认证方式'}),
   distinct: z.enum(['1', '0'], {required_error: '请选择去重选项'}),
   format: z.enum(['text', 'json'], {required_error: '请选择导出格式'}),
+  hostFormat: z.enum(['domain', 'ip'], {required_error: '请选择主机格式'}),
   separator: z.string({required_error: '请选择分隔符'}),
   breaker: z.string({required_error: '请选择换行符'}),
   count: z.number({required_error: '请输入有效的数量'}).min(1),
@@ -53,6 +54,7 @@ export default function Extract(props: ExtractProps) {
       authType: '1',
       count: 1,
       distinct: '1',
+      hostFormat: 'domain',
       format: 'text',
       breaker: '13,10',
       separator: '124',
@@ -71,7 +73,7 @@ export default function Extract(props: ExtractProps) {
       )}
     >
       <CardSection>
-        <Alert variant="warn" className="flex items-center justify-between">
+        {/* <Alert variant="warn" className="flex items-center justify-between">
           <span className="flex items-center gap-2">
             <CircleAlert/>
             <AlertTitle className="flex text-gray-900">提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
@@ -83,7 +85,7 @@ export default function Extract(props: ExtractProps) {
             <span>添加白名单</span>
             <ArrowRight className="size-4"/>
           </Link>
-        </Alert>
+        </Alert> */}
 
         <FormFields/>
       </CardSection>
@@ -113,7 +115,9 @@ const FormFields = memo(() => {
   return (
     <div className="flex flex-col gap-6 items-stretch max-w-[calc(160px*4+1rem*3)]">
       {/* 选择套餐 */}
+      <Suspense>
         <SelectResource/>
+      </Suspense>
 
       {/* 地区筛选 */}
       <SelectRegion/>
@@ -161,12 +165,12 @@ const FormFields = memo(() => {
               <RadioGroupItem value="1" id={`${id}-v-http`} className="mr-2"/>
               <span>HTTP</span>
             </FormLabel>
-            <FormLabel htmlFor={`${id}-v-https`} className="px-3 h-10 border rounded-md flex items-center text-sm">
+            {/* <FormLabel htmlFor={`${id}-v-https`} className="px-3 h-10 border rounded-md flex items-center text-sm">
               <RadioGroupItem value="2" id={`${id}-v-https`} className="mr-2"/>
               <span>HTTPS</span>
-            </FormLabel>
+            </FormLabel> */}
             <FormLabel htmlFor={`${id}-v-socks5`} className="px-3 h-10 border rounded-md flex items-center text-sm">
-              <RadioGroupItem value="3" id={`${id}-v-socks5`} className="mr-2"/>
+              <RadioGroupItem value="2" id={`${id}-v-socks5`} className="mr-2"/>
               <span>SOCKS5</span>
             </FormLabel>
           </RadioGroup>
@@ -231,6 +235,26 @@ const FormFields = memo(() => {
         )}
       </FormField>
 
+      {/* 主机格式 */}
+      <FormField name="hostFormat" className="md:max-w-[calc(160px*2+1rem)]" label="主机格式" classNames={{label: 'max-md:text-sm'}}>
+        {({id, field}) => (
+          <RadioGroup
+            onValueChange={field.onChange}
+            defaultValue={field.value}
+            className="flex gap-4"
+          >
+            <FormLabel htmlFor={`${id}-v-domain`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
+              <RadioGroupItem value="domain" id={`${id}-v-domain`} className="mr-2"/>
+              <span>域名</span>
+            </FormLabel>
+            <FormLabel htmlFor={`${id}-v-ip`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
+              <RadioGroupItem value="ip" id={`${id}-v-ip`} className="mr-2"/>
+              <span>IP</span>
+            </FormLabel>
+          </RadioGroup>
+        )}
+      </FormField>
+
       {/* 分隔符 */}
       <FormField name="separator" className="md:max-w-[calc(160px*3+1rem*2)]" label="分隔符" classNames={{label: 'max-md:text-sm'}}>
         {({id, field}) => (
@@ -332,8 +356,13 @@ FormFields.displayName = 'FormFields'
 function SelectResource() {
   const [resources, setResources] = useState<Resource[]>([])
   const [status, setStatus] = useStatus()
-  const profile = useProfileStore(state => state.profile)
+  const profile = use(useProfileStore(store => store.profile))
   const getResources = async () => {
+    if (!profile) {
+      setStatus('done')
+      setResources([])
+      return
+    }
     setStatus('load')
     try {
       const resp = await allResource()
@@ -352,7 +381,7 @@ function SelectResource() {
   useEffect(() => {
     getResources().then()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [profile])
 
   return (
     <FormField name="resource" className="md:max-w-[calc(160px*2+1rem)]" label="选择套餐" classNames={{label: 'max-md:text-sm'}}>
@@ -372,12 +401,10 @@ function SelectResource() {
               </div>
             ) : !profile ? (
               <div className="p-4 flex gap-1 items-center">
-                <Loader className="animate-spin" size={20}/>
+                <span className="text-gray-600">请先登录账号，<Link href="/login" className="text-blue-600 hover:text-blue-700 font-medium">去登录</Link></span>
-                <span>请先登录账号，<Link href="/login" className="text-blue-600 hover:underline">去登录</Link></span>
               </div>
             ) : resources.length === 0 ? (
               <div className="p-4 flex gap-1 items-center">
-                <Loader className="animate-spin" size={20}/>
                 <span>暂无可用套餐</span>
               </div>
             ) : (
@@ -489,6 +516,8 @@ function SelectRegion() {
   const regionType = useWatch({control, name: 'regionType'})
   const prov = useWatch({control, name: 'prov'})
   const city = useWatch({control, name: 'city'})
+  console.log(regionType, 'regionType')
+  console.log(prov, 'prov', city, 'city')
 
   return (
     <div className="flex flex-col gap-4 md:max-w-[calc(160px*2+1rem)]">
@@ -599,25 +628,40 @@ function ApplyLink() {
   }
 
   return (
-    <div className={merge(
+    <div className="flex flex-col gap-3 rounded-lg">
-      `flex flex-col gap-4`,
+      <Alert variant="warn" className="flex items-center justify-between">
-      `rounded-lg`,
+        <div className="flex items-center gap-2">
-    )}>
+          <CircleAlert className="size-4 shrink-0"/>
-      <h4>API 链接</h4>
+          <AlertTitle className="text-orange-600">
+            提取 IP 前需要将本机 IP 添加到白名单后才可使用
+          </AlertTitle>
+        </div>
+        <Link href="/admin/whitelist" className="flex-none text-orange-600 font-medium flex items-center gap-1">
+          <span>添加白名单</span>
+          <ArrowRight className="size-4"/>
+        </Link>
+      </Alert>
 
-      {/* 展示链接地址 */}
+      <Alert className="flex items-center justify-between">
-      <div className="bg-secondary p-4 rounded-md break-all">
+        <div className="flex items-center gap-2">
+          <CircleAlert className="size-4 shrink-0"/>
+          <AlertTitle>端口同时支持 socks5 和 http 协议</AlertTitle>
+        </div>
+        <div className="w-[88px]"/>
+      </Alert>
+      <h4 className="text-base font-medium">API 链接</h4>
+
+      <div className="bg-gray-100 rounded-md p-4 break-all font-mono text-sm">
         {link(form.getValues())}
       </div>
 
-      {/* 操作 */}
+      <div className="flex gap-3">
-      <div className="flex gap-4">
+        <Button type="button" onClick={() => submit('copy')} className="gap-1">
-        <Button type="button" onClick={() => submit('copy')}>
+          <CopyIcon className="size-4"/>
-          <CopyIcon/>
           <span>复制链接</span>
         </Button>
-        <Button type="button" onClick={() => submit('open')}>
+        <Button type="button" onClick={() => submit('open')} className="gap-1">
-          <ExternalLinkIcon/>
+          <ExternalLinkIcon className="size-4"/>
           <span>打开链接</span>
         </Button>
       </div>
@@ -626,7 +670,7 @@ function ApplyLink() {
 }
 
 function link(values: Schema) {
-  const {resource, prov, city, isp, proto, authType, distinct, format: formatType, separator, breaker, count} = values
+  const {resource, prov, city, isp, proto, authType, distinct, format: formatType, hostFormat, separator, breaker, count} = values
 
   const sp = new URLSearchParams()
   if (resource) sp.set('i', String(resource))
@@ -638,6 +682,7 @@ function link(values: Schema) {
   if (isp != 'all') sp.set('s', isp)
   sp.set('d', distinct)
   sp.set('rt', formatType)
+  sp.set('rh', hostFormat)
   sp.set('rs', separator)
   sp.set('rb', breaker)
   sp.set('n', String(count))

src/components/composites/payment/payment-modal.tsx

@@ -17,21 +17,21 @@ export type PaymentModalProps = {
 export function PaymentModal(props: PaymentModalProps) {
   // 手动关闭时的处理
   const handleClose = async () => {
-    try {
+    // try {
-      const res = await payClose({
+    //   const res = await payClose({
-        trade_no: props.inner_no,
+    //     trade_no: props.inner_no,
-        method: props.method,
+    //     method: props.method,
-      })
+    //   })
-      if (!res.success) {
+    //   if (!res.success) {
-        throw new Error(res.message)
+    //     throw new Error(res.message)
-      }
+    //   }
-    }
+    // }
-    catch (error) {
+    // catch (error) {
-      console.error('关闭订单失败:', error)
+    //   console.error('关闭订单失败:', error)
-    }
+    // }
-    finally {
+    // finally {
     props.onClose?.()
-    }
+    // }
   }
 
   // SSE处理方式检查支付状态

src/components/composites/purchase/long/center.tsx

@@ -3,18 +3,18 @@ import {FormField} from '@/components/ui/form'
 import {RadioGroup} from '@/components/ui/radio-group'
 import FormOption from '@/components/composites/purchase/option'
 import {Schema} from '@/components/composites/purchase/long/form'
-import {useEffect} from 'react'
+import {useEffect, useMemo} from 'react'
 import {useFormContext, useWatch} from 'react-hook-form'
 import {Card} from '@/components/ui/card'
 import {BillingMethodField} from '../shared/billing-method-field'
 import {FeatureList} from '../shared/feature-list'
 import {NumberStepperField} from '../shared/number-stepper-field'
-import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
+import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuCountMin, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
 
 export default function Center({skuData}: {
   skuData: PurchaseSkuData
 }) {
-  const {setValue} = useFormContext<Schema>()
+  const {setValue, getValues} = useFormContext<Schema>()
   const type = useWatch<Schema>({name: 'type'}) as Schema['type']
   const live = useWatch<Schema>({name: 'live'}) as Schema['live']
   const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
@@ -26,18 +26,35 @@ export default function Center({skuData}: {
     ? getAvailablePurchaseExpires(skuData, {mode: type, live})
     : []
 
+  const currentCountMin = useMemo(() => {
+    if (!type || !live) return 0
+    const expireValue = type === '1' ? expire : '0'
+    const countMin = getPurchaseSkuCountMin(skuData, {
+      mode: type,
+      live,
+      expire: expireValue,
+    })
+    return countMin
+  }, [type, live, expire, skuData])
+
+  useEffect(() => {
+    if (currentCountMin <= 0) return
+    const targetField = type === '1' ? 'daily_limit' : 'quota'
+    const currentValue = getValues(targetField)
+    if (currentValue !== currentCountMin) {
+      setValue(targetField, currentCountMin, {shouldValidate: true})
+    }
+  }, [currentCountMin, type, setValue, getValues])
+
   useEffect(() => {
     const nextType = modeList.includes(type) ? type : modeList[0]
-
     if (!nextType) {
       return
     }
-
     if (nextType !== type) {
       setValue('type', nextType)
       return
     }
-
     const nextLiveList = nextType === '1'
       ? getAvailablePurchaseLives(skuData, {mode: nextType, expire})
       : getAvailablePurchaseLives(skuData, {mode: nextType})
@@ -62,14 +79,45 @@ export default function Center({skuData}: {
   }, [expire, live, modeList, setValue, skuData, type])
 
   return (
-    <Card className="flex-auto p-6 flex flex-col gap-6 relative">
+    <Card className="flex-auto p-6 flex flex-col gap-10 relative">
+      <div className="text-center -mb-10">支持 HTTP、socks5 双协议代理</div>
       <BillingMethodField modeList={modeList} timeDailyLimit={100}/>
+      {/* 套餐时效 */}
+      {type === '1' && (
+        <FormField name="expire" label="套餐有效时间" description="有效时间内可用于提取 IP">
+          {({id, field}) => (
+            <RadioGroup
+              id={id}
+              value={field.value}
+              onValueChange={(value) => {
+                field.onChange(value)
+
+                const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
+                if (!nextLiveList.includes(live) && nextLiveList[0]) {
+                  setValue('live', nextLiveList[0])
+                }
+              }}
+              className="flex gap-4 flex-wrap">
+              {expireList.map(day => (
+                <FormOption
+                  key={day}
+                  id={`${id}-${day}`}
+                  value={day}
+                  label={`${day} 天`}
+                  compare={field.value}
+                />
+              ))}
+            </RadioGroup>
+          )}
+        </FormField>
+      )}
 
       {/* IP 时效 */}
       <FormField<Schema, 'live'>
-        className="space-y-4"
         name="live"
-        label="IP 时效">
+        label="IP 有效时间"
+        description="提取出的 IP 可用时间"
+      >
         {({id, field}) => (
           <RadioGroup
             id={id}
@@ -111,49 +159,21 @@ export default function Center({skuData}: {
         )}
       </FormField>
 
-      {/* 套餐时效 */}
-      {type === '1' && (
-        <FormField className="space-y-4" name="expire" label="套餐时效">
-          {({id, field}) => (
-            <RadioGroup
-              id={id}
-              value={field.value}
-              onValueChange={(value) => {
-                field.onChange(value)
-
-                const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
-                if (!nextLiveList.includes(live) && nextLiveList[0]) {
-                  setValue('live', nextLiveList[0])
-                }
-              }}
-              className="flex gap-4 flex-wrap">
-              {expireList.map(day => (
-                <FormOption
-                  key={day}
-                  id={`${id}-${day}`}
-                  value={day}
-                  label={`${day} 天`}
-                  compare={field.value}
-                />
-              ))}
-            </RadioGroup>
-          )}
-        </FormField>
-      )}
-
       {/* 每日提取上限/购买数量 */}
       {type === '1' ? (
         <NumberStepperField
           name="daily_limit"
-          label="每日提取上限"
+          label="IP 每日提取上限"
-          min={100}
+          description="本套餐每日可提取 IP 的最大数量"
+          min={currentCountMin}
           step={100}
         />
       ) : (
         <NumberStepperField
           name="quota"
-          label="IP 购买数量"
+          label="IP 总提取上限"
-          min={500}
+          description="本套餐总计可提取 IP 的最大数量"
+          min={currentCountMin}
           step={100}
         />
       )}

src/components/composites/purchase/long/form.tsx

@@ -5,26 +5,31 @@ import {Form} from '@/components/ui/form'
 import * as z from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {ProductItem} from '@/actions/product'
-import {getAvailablePurchaseExpires, getAvailablePurchaseLives, parsePurchaseSkuList} from '../shared/sku'
+import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuCountMin, parsePurchaseSkuList} from '../shared/sku'
 import {PurchaseSidePanel} from '../shared/side-panel'
 
 const schema = z.object({
   type: z.enum(['1', '2']).default('2'),
   live: z.string(),
-  quota: z.number().min(500, '购买数量不能少于 500 个'),
+  quota: z.number().min(1, '购买数量不能少于 1 个'),
   expire: z.string(),
-  daily_limit: z.number().min(100, '每日限额不能少于 100 个'),
+  daily_limit: z.number().min(1, '每日限额不能少于 1 个'),
   pay_type: z.enum(['wechat', 'alipay', 'balance']),
 })
 export type Schema = z.infer<typeof schema>
 
 export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
   const skuData = parsePurchaseSkuList('long', skuList)
-  const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
+  const defaultMode = skuData.modeList.includes('1') ? '1' : '2'
   const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
   const defaultExpire = defaultMode === '1'
     ? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
     : '0'
+  const defaultCountMin = getPurchaseSkuCountMin(skuData, {
+    mode: defaultMode,
+    live: defaultLive,
+    expire: defaultExpire,
+  })
 
   const form = useForm<Schema>({
     resolver: zodResolver(schema),
@@ -32,8 +37,8 @@ export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
       type: defaultMode,
       live: defaultLive,
       expire: defaultExpire,
-      quota: 500,
+      quota: defaultCountMin,
-      daily_limit: 100,
+      daily_limit: defaultCountMin,
       pay_type: 'balance', // 余额支付
     },
   })

src/components/composites/purchase/shared/billing-method-field.tsx

@@ -11,7 +11,7 @@ export function BillingMethodField(props: {
   modeList: PurchaseMode[]
   timeDailyLimit: number
 }) {
-  const {setValue} = useFormContext<PurchaseFormValues>()
+  const {setValue, getValues} = useFormContext<PurchaseFormValues>()
 
   return (
     <FormField<PurchaseFormValues, 'type'>
@@ -30,20 +30,10 @@ export function BillingMethodField(props: {
               setValue('expire', '0')
               return
             }
-
+            setValue('expire', getValues('expire') || '0')
-            setValue('daily_limit', props.timeDailyLimit)
           }}
           className="flex gap-4 max-md:flex-col"
         >
-          {props.modeList.includes('2') && (
-            <FormOption
-              id={`${id}-2`}
-              value="2"
-              label="包量套餐"
-              description="适用于短期或不定期高提取业务场景"
-              compare={field.value}
-            />
-          )}
 
           {props.modeList.includes('1') && (
             <FormOption
@@ -54,6 +44,15 @@ export function BillingMethodField(props: {
               compare={field.value}
             />
           )}
+          {props.modeList.includes('2') && (
+            <FormOption
+              id={`${id}-2`}
+              value="2"
+              label="包量套餐"
+              description="适用于短期或不定期高提取业务场景"
+              compare={field.value}
+            />
+          )}
         </RadioGroup>
       )}
     </FormField>

src/components/composites/purchase/shared/number-stepper-field.tsx

@@ -12,6 +12,7 @@ type PurchaseStepperFieldName = 'quota' | 'daily_limit'
 type NumberStepperFieldProps = {
   name: PurchaseStepperFieldName
   label: string
+  description?: string
   min: number
   step: number
 }
@@ -25,7 +26,7 @@ export function NumberStepperField(props: NumberStepperFieldProps) {
 
   return (
     <FormField<PurchaseFormValues, PurchaseStepperFieldName>
-      className="space-y-4"
+      description={props.description}
       name={props.name}
       label={props.label}
     >
@@ -49,6 +50,9 @@ export function NumberStepperField(props: NumberStepperFieldProps) {
               className="w-40 h-10 border border-gray-200 rounded-sm text-center"
               min={props.min}
               step={props.step}
+              onInvalid={(e) => {
+                e.preventDefault()
+              }}
               onBlur={(event) => {
                 field.onBlur()
                 const nextValue = Number(event.target.value)

src/components/composites/purchase/shared/side-panel.tsx

@@ -14,6 +14,7 @@ import {ExtraResp} from '@/lib/api'
 import {formatPurchaseLiveLabel} from './sku'
 import {User} from '@/lib/models'
 import {PurchaseFormValues} from './form-values'
+import {IdCard} from 'lucide-react'
 
 const emptyPrice: ExtraResp<typeof getPrice> = {
   price: '0.00',
@@ -107,6 +108,7 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
         <span className="text-xl text-orange-500">￥{discountedPrice}</span>
       </p>
       {profile ? (
+        profile.id_type !== 0 ? (
           <>
             <FieldPayment balance={profile.balance}/>
             <Pay
@@ -116,9 +118,23 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
               resource={resource}
             />
           </>
+        ) : (
+          <div className="flex flex-col gap-3">
+            <p className="text-sm text-gray-500">
+              根据监管要求，您需要完成实名认证后才能支付。
+            </p>
+            <Link
+              href="/admin/identify"
+              className={buttonVariants()}
+            >
+              <IdCard size={16} className="mr-1"/>
+              去实名认证
+            </Link>
+          </div>
+        )
       ) : (
         <Link href="/login" className={buttonVariants()}>
-          登录后支付
+          去支付
         </Link>
       )}
     </Card>

src/components/composites/purchase/shared/sku.ts

@@ -7,11 +7,13 @@ export type PurchaseSkuItem = {
   live: string
   expire: string
   price: string
+  count_min: number
 }
 
 export type PurchaseSkuData = {
   items: PurchaseSkuItem[]
   priceMap: Map<string, string>
+  countMinMap: Map<string, number>
   modeList: PurchaseMode[]
   liveList: string[]
   expireList: string[]
@@ -24,6 +26,7 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
 
   const items: PurchaseSkuItem[] = []
   const priceMap = new Map<string, string>()
+  const countMinMap = new Map<string, number>()
   const modeSet = new Set<PurchaseMode>()
   const liveSet = new Set<number>()
   const expireSet = new Set<number>()
@@ -45,6 +48,8 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
       live: liveValue,
       expire: expireValue,
     })
+    const countMin = typeof sku.count_min === 'number' ? sku.count_min : Number(sku.count_min) || 0
+    countMinMap.set(code, countMin)
 
     items.push({
       code,
@@ -52,6 +57,7 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
       live: liveValue,
       expire: expireValue,
       price: sku.price,
+      count_min: countMin,
     })
     priceMap.set(code, sku.price)
     modeSet.add(mode)
@@ -75,6 +81,7 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
   return {
     items,
     priceMap,
+    countMinMap,
     modeList: (['2', '1'] as const).filter(mode => modeSet.has(mode)),
     liveList: sortNumericValues(liveSet),
     expireList: sortNumericValues(expireSet),
@@ -163,3 +170,11 @@ export function formatPurchaseLiveLabel(live: string, kind: PurchaseKind) {
 
   return `${minutes} 分钟`
 }
+
+export function getPurchaseSkuCountMin(
+  skuData: PurchaseSkuData,
+  props: {mode: PurchaseMode, live: string, expire: string},
+): number {
+  const key = getPurchaseSkuKey(props)
+  return skuData.countMinMap.get(key) ?? 0
+}

src/components/composites/purchase/short/center.tsx

@@ -2,21 +2,21 @@
 import {FormField} from '@/components/ui/form'
 import {RadioGroup} from '@/components/ui/radio-group'
 import FormOption from '@/components/composites/purchase/option'
-import {useEffect} from 'react'
+import {useEffect, useMemo} from 'react'
 import {useFormContext, useWatch} from 'react-hook-form'
 import {Schema} from '@/components/composites/purchase/short/form'
 import {Card} from '@/components/ui/card'
 import {BillingMethodField} from '../shared/billing-method-field'
 import {FeatureList} from '../shared/feature-list'
 import {NumberStepperField} from '../shared/number-stepper-field'
-import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
+import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuCountMin, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
 
 export default function Center({
   skuData,
 }: {
   skuData: PurchaseSkuData
 }) {
-  const {setValue} = useFormContext<Schema>()
+  const {setValue, getValues} = useFormContext<Schema>()
   const type = useWatch<Schema>({name: 'type'}) as Schema['type']
   const live = useWatch<Schema>({name: 'live'}) as Schema['live']
   const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
@@ -28,6 +28,22 @@ export default function Center({
     ? getAvailablePurchaseExpires(skuData, {mode: type, live})
     : []
 
+  const currentCountMin = useMemo(() => {
+    if (!type || !live) return 0
+    const expireValue = type === '1' ? expire : '0'
+    return getPurchaseSkuCountMin(skuData, {mode: type, live, expire: expireValue})
+  }, [type, live, expire, skuData])
+
+  useEffect(() => {
+    if (currentCountMin <= 0) return
+
+    const targetField = type === '1' ? 'daily_limit' : 'quota'
+    const currentValue = getValues(targetField)
+
+    if (currentValue !== currentCountMin) {
+      setValue(targetField, currentCountMin, {shouldValidate: true})
+    }
+  }, [currentCountMin, type, setValue, getValues])
   useEffect(() => {
     const nextType = modeList.includes(type) ? type : modeList[0]
 
@@ -64,14 +80,45 @@ export default function Center({
   }, [expire, live, modeList, setValue, skuData, type])
 
   return (
-    <Card className="flex-auto p-6 flex flex-col gap-6 relative">
+    <Card className="flex-auto p-6 flex flex-col gap-10 relative">
+      <div className="text-center -mb-10">支持 HTTP、socks5 双协议代理</div>
       <BillingMethodField modeList={modeList} timeDailyLimit={2000}/>
+      {/* 套餐时效 */}
+      {type === '1' && (
+        <FormField name="expire" label="套餐有效时间" description="有效时间内可用于提取 IP">
+          {({id, field}) => (
+            <RadioGroup
+              id={id}
+              value={field.value}
+              onValueChange={(value) => {
+                field.onChange(value)
+
+                const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
+                if (!nextLiveList.includes(live) && nextLiveList[0]) {
+                  setValue('live', nextLiveList[0])
+                }
+              }}
+              className="flex gap-4 flex-wrap">
+              {expireList.map(day => (
+                <FormOption
+                  key={day}
+                  id={`${id}-${day}`}
+                  value={day}
+                  label={`${day} 天`}
+                  compare={field.value}
+                />
+              ))}
+            </RadioGroup>
+          )}
+        </FormField>
+      )}
 
       {/* IP 时效 */}
       <FormField<Schema, 'live'>
-        className="space-y-4"
         name="live"
-        label="IP 时效">
+        label="IP 有效时间"
+        description="提取出的 IP 可用时间"
+      >
         {({id, field}) => (
           <RadioGroup
             id={id}
@@ -116,49 +163,21 @@ export default function Center({
         )}
       </FormField>
 
-      {/* 套餐时效 */}
-      {type === '1' && (
-        <FormField className="space-y-4" name="expire" label="套餐时效">
-          {({id, field}) => (
-            <RadioGroup
-              id={id}
-              value={field.value}
-              onValueChange={(value) => {
-                field.onChange(value)
-
-                const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
-                if (!nextLiveList.includes(live) && nextLiveList[0]) {
-                  setValue('live', nextLiveList[0])
-                }
-              }}
-              className="flex gap-4 flex-wrap">
-              {expireList.map(day => (
-                <FormOption
-                  key={day}
-                  id={`${id}-${day}`}
-                  value={day}
-                  label={`${day} 天`}
-                  compare={field.value}
-                />
-              ))}
-            </RadioGroup>
-          )}
-        </FormField>
-      )}
-
       {/* 每日提取上限/购买数量 */}
       {type === '1' ? (
         <NumberStepperField
           name="daily_limit"
-          label="每日提取上限"
+          label="IP 每日提取上限"
-          min={2000}
+          description="本套餐每日可提取 IP 的最大数量"
+          min={currentCountMin}
           step={1000}
         />
       ) : (
         <NumberStepperField
           name="quota"
-          label="IP 购买数量"
+          label="IP 总提取上限"
-          min={10000}
+          description="本套餐总计可提取 IP 的最大数量"
+          min={currentCountMin}
           step={5000}
         />
       )}

src/components/composites/purchase/short/form.tsx

@@ -5,26 +5,31 @@ import {Form} from '@/components/ui/form'
 import * as z from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {ProductItem} from '@/actions/product'
-import {getAvailablePurchaseExpires, getAvailablePurchaseLives, parsePurchaseSkuList} from '../shared/sku'
+import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuCountMin, parsePurchaseSkuList} from '../shared/sku'
 import {PurchaseSidePanel} from '../shared/side-panel'
 
 const schema = z.object({
   type: z.enum(['1', '2']).default('2'),
   live: z.string(),
-  quota: z.number().min(10000, '购买数量不能少于 10000 个'),
+  quota: z.number(),
   expire: z.string(),
-  daily_limit: z.number().min(2000, '每日限额不能少于 2000 个'),
+  daily_limit: z.number(),
   pay_type: z.enum(['wechat', 'alipay', 'balance']).default('balance'),
 })
 export type Schema = z.infer<typeof schema>
 
 export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
   const skuData = parsePurchaseSkuList('short', skuList)
-  const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
+  const defaultMode = skuData.modeList.includes('1') ? '1' : '2'
   const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
   const defaultExpire = defaultMode === '1'
     ? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
     : '0'
+  const defaultCountMin = getPurchaseSkuCountMin(skuData, {
+    mode: defaultMode,
+    live: defaultLive,
+    expire: defaultExpire,
+  })
 
   const form = useForm<Schema>({
     resolver: zodResolver(schema),
@@ -32,8 +37,8 @@ export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
       type: defaultMode,
       live: defaultLive,
       expire: defaultExpire,
-      quota: 10_000, // >= 10000,
+      quota: defaultCountMin,
-      daily_limit: 2_000, // >= 2000
+      daily_limit: defaultCountMin,
       pay_type: 'balance', // 余额支付
     },
   })

src/components/free-trial.tsx

@@ -26,7 +26,7 @@ function Resolved(props: {
         router.push(profile ? '/admin/purchase' : '/product')
       }}
     >
-      免费试用
+      立即试用
     </button>
   )
 }
@@ -42,7 +42,7 @@ function Pending(props: {
         router.push('/product')
       }}
     >
-      免费试用
+      立即试用
     </button>
   )
 }

src/components/ui/form.tsx

@@ -80,18 +80,6 @@ function FormField<
             )
           }
 
-          {/* control */}
-          <Slot
-            data-slot="form-control"
-            aria-invalid={!!fieldState.error}
-            aria-describedby={
-              !!fieldState.error
-                ? `${id}-description`
-                : `${id}-description ${id}-message`
-            }>
-            {props.children({id, field, fieldState, formState})}
-          </Slot>
-
           {/* description */}
           {!!props.description && (
             <FormDescription
@@ -105,6 +93,18 @@ function FormField<
             </FormDescription>
           )}
 
+          {/* control */}
+          <Slot
+            data-slot="form-control"
+            aria-invalid={!!fieldState.error}
+            aria-describedby={
+              !!fieldState.error
+                ? `${id}-description`
+                : `${id}-description ${id}-message`
+            }>
+            {props.children({id, field, fieldState, formState})}
+          </Slot>
+
           {/* message */}
           {!fieldState.error ? null : (
             <FormMessage id={`${id}-message`} error={fieldState.error} className={props.classNames?.message}/>

src/lib/models/models.ts

@@ -39,6 +39,17 @@ export type Bill = {
   refund: Refund
   resource: Resource
 }
+export type Balance = {
+  id: number
+  resource_id: number
+  bill_no: string
+  amount: number
+  created_at: Date
+  trade: Trade
+  balance_prev: number
+  balance_curr: number
+  bill: Bill
+}
 
 export type Trade = {
   id: number

src/lib/models/product-sku.ts

@@ -1,6 +1,7 @@
 export type ProductSku = {
   id: number
   code: string
+  count_min: number
   name: string
   price: string
   price_min: string

src/lib/models/resource.ts

@@ -29,6 +29,7 @@ export type Resource<T extends 1 | 2 = 1 | 2> = {
   active: boolean
   created_at: Date
   updated_at: Date
+  checkip: boolean
 } & (
   T extends 1 ? {
     type: 1