免费与菜单提示文字

package.json

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

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/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/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/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

@@ -103,25 +103,33 @@ 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>
+        <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>
       </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,7 +184,7 @@ 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}/>

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'
@@ -113,7 +113,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/>
@@ -332,8 +334,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 +359,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,8 +379,8 @@ function SelectResource() {
               </div>
             ) : !profile ? (
               <div className="p-4 flex gap-1 items-center">
-                <Loader className="animate-spin" size={20}/>
+                {/* <Loader className="animate-spin" size={20}/> */}
-                <span>请先登录账号，<Link href="/login" className="text-blue-600 hover:underline">去登录</Link></span>
+                <span className="text-gray-600">请先登录账号，<Link href="/login" className="text-blue-600 hover:text-blue-700 font-medium">去登录</Link></span>
               </div>
             ) : resources.length === 0 ? (
               <div className="p-4 flex gap-1 items-center">

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/index.tsx

@@ -30,6 +30,7 @@ export default function Purchase() {
       const res = profile
         ? await listProduct({})
         : await listProductHome({})
+      console.log(res, 'res')
 
       if (res.success) {
         setProductList(res.data)

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,6 +26,27 @@ export default function Center({skuData}: {
     ? 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 (type === '1') {
+      const current = getValues('daily_limit')
+      if (current < currentCountMin) {
+        setValue('daily_limit', currentCountMin)
+      }
+    }
+    else {
+      const current = getValues('quota')
+      if (current < currentCountMin) {
+        setValue('quota', currentCountMin)
+      }
+    }
+  }, [currentCountMin, type, setValue, getValues])
+
   useEffect(() => {
     const nextType = modeList.includes(type) ? type : modeList[0]
 
@@ -146,14 +167,14 @@ export default function Center({skuData}: {
         <NumberStepperField
           name="daily_limit"
           label="每日提取上限"
-          min={100}
+          min={currentCountMin || 100}
           step={100}
         />
       ) : (
         <NumberStepperField
           name="quota"
           label="IP 购买数量"
-          min={500}
+          min={currentCountMin || 500}
           step={100}
         />
       )}

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

@@ -5,7 +5,7 @@ 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({
@@ -25,6 +25,11 @@ export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
   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: defaultMode === '2' ? Math.max(defaultCountMin, 500) : 500,
-      daily_limit: 100,
+      daily_limit: defaultMode === '1' ? Math.max(defaultCountMin, 100) : 100,
       pay_type: 'balance', // 余额支付
     },
   })

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

@@ -49,6 +49,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,6 +118,20 @@ 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()}>
           登录后支付

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,22 @@
 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} = 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 +29,25 @@ 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 (type === '1') {
+      const current = getValues('daily_limit')
+      if (current < currentCountMin) {
+        setValue('daily_limit', currentCountMin)
+      }
+    }
+    else {
+      const current = getValues('quota')
+      if (current < currentCountMin) {
+        setValue('quota', currentCountMin)
+      }
+    }
+  }, [currentCountMin, type, setValue, getValues])
   useEffect(() => {
     const nextType = modeList.includes(type) ? type : modeList[0]
 
@@ -151,14 +171,14 @@ export default function Center({
         <NumberStepperField
           name="daily_limit"
           label="每日提取上限"
-          min={2000}
+          min={currentCountMin || 2000}
           step={1000}
         />
       ) : (
         <NumberStepperField
           name="quota"
           label="IP 购买数量"
-          min={10000}
+          min={currentCountMin || 10000}
           step={5000}
         />
       )}

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

@@ -5,7 +5,7 @@ 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({
@@ -25,15 +25,19 @@ export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
   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),
     defaultValues: {
       type: defaultMode,
       live: defaultLive,
       expire: defaultExpire,
-      quota: 10_000, // >= 10000,
+      quota: defaultMode === '2' ? defaultCountMin || 10000 : 10000,
-      daily_limit: 2_000, // >= 2000
+      daily_limit: defaultMode === '1' ? defaultCountMin || 2000 : 2000,
       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/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