From 574ad0e6629dcd90d6cbdf9088a97233b89c4e9f Mon Sep 17 00:00:00 2001
From: Eamon-meng <17516219072@163.com>
Date: Mon, 27 Apr 2026 17:08:41 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E4=B9=B0=E9=A1=B5=E9=9D=A2=20&=20IP?=
 =?UTF-8?q?=E6=8F=90=E5=8F=96=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 src/components/composites/extract/index.tsx   | 47 ++++++++++-----
 .../composites/purchase/long/center.tsx       | 59 +++++++++----------
 .../composites/purchase/long/form.tsx         |  2 +-
 .../purchase/shared/billing-method-field.tsx  | 18 +++---
 .../composites/purchase/short/center.tsx      | 59 +++++++++----------
 .../composites/purchase/short/form.tsx        |  2 +-
 7 files changed, 102 insertions(+), 87 deletions(-)

diff --git a/package.json b/package.json
index acf4d44..987247e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lanhu-web",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "private": true,
   "scripts": {
     "dev": "next dev -H 0.0.0.0 --turbopack",
diff --git a/src/components/composites/extract/index.tsx b/src/components/composites/extract/index.tsx
index 90fcf02..496d1a3 100644
--- a/src/components/composites/extract/index.tsx
+++ b/src/components/composites/extract/index.tsx
@@ -71,7 +71,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 +83,7 @@ export default function Extract(props: ExtractProps) {
             <span>添加白名单</span>
             <ArrowRight className="size-4"/>
           </Link>
-        </Alert>
+        </Alert> */}
 
         <FormFields/>
       </CardSection>
@@ -494,6 +494,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)]">
@@ -604,25 +606,40 @@ function ApplyLink() {
   }
 
   return (
-    <div className={merge(
-      `flex flex-col gap-4`,
-      `rounded-lg`,
-    )}>
-      <h4>API 链接</h4>
+    <div className="flex flex-col gap-3 rounded-lg">
+      <Alert variant="warn" className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <CircleAlert className="size-4 shrink-0"/>
+          <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>
 
-      {/* 展示链接地址 */}
-      <div className="bg-secondary p-4 rounded-md break-all">
+      <Alert className="flex items-center justify-between">
+        <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-4">
-        <Button type="button" onClick={() => submit('copy')}>
-          <CopyIcon/>
+      <div className="flex gap-3">
+        <Button type="button" onClick={() => submit('copy')} className="gap-1">
+          <CopyIcon className="size-4"/>
           <span>复制链接</span>
         </Button>
-        <Button type="button" onClick={() => submit('open')}>
-          <ExternalLinkIcon/>
+        <Button type="button" onClick={() => submit('open')} className="gap-1">
+          <ExternalLinkIcon className="size-4"/>
           <span>打开链接</span>
         </Button>
       </div>
diff --git a/src/components/composites/purchase/long/center.tsx b/src/components/composites/purchase/long/center.tsx
index 0b2914c..460a6c5 100644
--- a/src/components/composites/purchase/long/center.tsx
+++ b/src/components/composites/purchase/long/center.tsx
@@ -81,6 +81,35 @@ export default function Center({skuData}: {
   return (
     <Card className="flex-auto p-6 flex flex-col gap-10 relative">
       <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'>
@@ -129,36 +158,6 @@ export default function Center({skuData}: {
         )}
       </FormField>
 
-      {/* 套餐时效 */}
-      {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>
-      )}
-
       {/* 每日提取上限/购买数量 */}
       {type === '1' ? (
         <NumberStepperField
diff --git a/src/components/composites/purchase/long/form.tsx b/src/components/composites/purchase/long/form.tsx
index f314ee7..6004dc0 100644
--- a/src/components/composites/purchase/long/form.tsx
+++ b/src/components/composites/purchase/long/form.tsx
@@ -20,7 +20,7 @@ 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'
diff --git a/src/components/composites/purchase/shared/billing-method-field.tsx b/src/components/composites/purchase/shared/billing-method-field.tsx
index 4dc7e26..003aeeb 100644
--- a/src/components/composites/purchase/shared/billing-method-field.tsx
+++ b/src/components/composites/purchase/shared/billing-method-field.tsx
@@ -34,15 +34,6 @@ export function BillingMethodField(props: {
           }}
           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
@@ -53,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>
diff --git a/src/components/composites/purchase/short/center.tsx b/src/components/composites/purchase/short/center.tsx
index e9483c5..9343f4e 100644
--- a/src/components/composites/purchase/short/center.tsx
+++ b/src/components/composites/purchase/short/center.tsx
@@ -82,6 +82,35 @@ export default function Center({
   return (
     <Card className="flex-auto p-6 flex flex-col gap-10 relative">
       <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'>
@@ -133,36 +162,6 @@ export default function Center({
         )}
       </FormField>
 
-      {/* 套餐时效 */}
-      {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>
-      )}
-
       {/* 每日提取上限/购买数量 */}
       {type === '1' ? (
         <NumberStepperField
diff --git a/src/components/composites/purchase/short/form.tsx b/src/components/composites/purchase/short/form.tsx
index f1b07c2..4f0dd43 100644
--- a/src/components/composites/purchase/short/form.tsx
+++ b/src/components/composites/purchase/short/form.tsx
@@ -20,7 +20,7 @@ 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'