购买页面 & IP提取页面样式调整

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>