修改提取IP页面请求参数文档

.env.example

@@ -1,4 +1,4 @@
 # 开发环境配置
-API_BASE_URL=http://192.168.3.42:8080
+API_BASE_URL=http://192.168.0.15:8080
 CLIENT_ID=web
 CLIENT_SECRET=web

bun.lock

@@ -35,6 +35,7 @@
         "lucide-react": "^0.479.0",
         "next": "^16.0.10",
         "next-themes": "^0.4.6",
+        "photoswipe": "^5.4.4",
         "qrcode": "^1.5.4",
         "react": "^19.2.1",
         "react-day-picker": "8.10.1",
@@ -1164,6 +1165,8 @@
 
     "path-parse": ["path-parse@1.0.7", "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
 
+    "photoswipe": ["photoswipe@5.4.4", "https://registry.npmmirror.com/photoswipe/-/photoswipe-5.4.4.tgz", {}, "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA=="],
+
     "picocolors": ["picocolors@1.1.1", "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "picomatch": ["picomatch@4.0.3", "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanhu-web",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "private": true,
   "scripts": {
     "dev": "next dev -H 0.0.0.0 --turbopack",
@@ -41,6 +41,7 @@
     "lucide-react": "^0.479.0",
     "next": "^16.0.10",
     "next-themes": "^0.4.6",
+    "photoswipe": "^5.4.4",
     "qrcode": "^1.5.4",
     "react": "^19.2.1",
     "react-day-picker": "8.10.1",

src/actions/article.ts

@@ -0,0 +1,12 @@
+'use server'
+
+import {callByDevice} from './base'
+import {ArticleDetail, ArticleNavGroup} from '@/lib/models/article'
+
+export async function getArticleNav(params: {}) {
+  return await callByDevice<ArticleNavGroup[]>('/api/article/nav', params)
+}
+
+export async function getArticleDetail(params: {id: number}) {
+  return await callByDevice<ArticleDetail>('/api/article/get', params)
+}

src/actions/base.ts

@@ -1,6 +1,7 @@
 'use server'
 import {API_BASE_URL, ApiResponse, CLIENT_ID, CLIENT_SECRET} from '@/lib/api'
 import {add, isBefore} from 'date-fns'
+import {isRedirectError} from 'next/dist/client/components/redirect-error'
 import {cookies, headers} from 'next/headers'
 import {redirect} from 'next/navigation'
 import {cache} from 'react'
@@ -125,7 +126,7 @@ async function call<R = undefined>(url: string, body: RequestInit['body'], auth?
     })
 
     if (response.status === 401) {
-      return redirect('/login?redirect=' + encodeURIComponent(url.replace(API_BASE_URL, '')))
+      return redirect('/login')
     }
 
     const type = response.headers.get('Content-Type') ?? 'text/plain'
@@ -169,6 +170,9 @@ async function call<R = undefined>(url: string, body: RequestInit['body'], auth?
   }
   catch (e) {
     console.error('后端请求失败', url, (e as Error).message)
+    if (isRedirectError(e)) {
+      throw e
+    }
     throw new Error(`请求失败，网络错误`)
   }
 }

src/actions/batch.ts

@@ -3,6 +3,11 @@ import {PageRecord} from '@/lib/api'
 import {Batch} from '@/lib/models/batch'
 import {callByUser} from './base'
 
-export async function pageBatch(props: {page: number, size: number}) {
+export async function pageBatch(props: {
+  page: number
+  size: number
+  time_start?: Date
+  time_end?: Date
+  resource_no?: string}) {
   return callByUser<PageRecord<Batch>>('/api/batch/page', props)
 }

src/actions/channel.ts

@@ -29,10 +29,36 @@ export async function createChannels(params: {
   protocol: number
   auth_type: number
   count: number
-  prov?: string
-  city?: string
+  // prov?: string
+  area_id?: number
   isp?: number
   host_format?: number
 }) {
   return callPublic<CreateChannelsResp[]>('/api/channel/create', params)
 }
+
+export async function createChannelsV2(params: {
+  resource_no: string
+  protocol: number
+  auth_type: number
+  count: number
+  prov?: string
+  city?: string
+  isp?: number
+  host_format?: number
+}) {
+  return callPublic<CreateChannelsResp[]>('/api/channel/create/v2', params)
+}
+
+export async function createChannelsV3(params: {
+  resource_no: string
+  protocol: number
+  auth_type: number
+  count: number
+  // prov?: string
+  area_id?: number
+  isp?: number
+  host_format?: number
+}) {
+  return callPublic<CreateChannelsResp[]>('/api/channel/create/v3', params)
+}

src/actions/resource.ts

@@ -80,12 +80,14 @@ export async function completeResource(props: {
 }) {
   return callByUser('/api/trade/complete', props)
 }
-
+type PayCloseData = {
+  status: 0 | 1 | 2
+}
 export async function payClose(props: {
   trade_no: string
   method: number
 }) {
-  return callByUser('/api/trade/cancel', props)
+  return callByUser<PayCloseData>('/api/trade/finish', props)
 }
 
 export async function getPrice(props: CreateResourceReq) {
@@ -110,3 +112,7 @@ export async function updateCheckip(props: {
 }) {
   return callByUser('/api/resource/update/checkip', props)
 }
+
+export async function getAreaList(props: {}) {
+  return callByUser('/api/area/list', props)
+}

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

@@ -1,11 +1,13 @@
 import {NextRequest, NextResponse} from 'next/server'
-import {createChannels} from '@/actions/channel'
+import {createChannels, createChannelsV3} from '@/actions/channel'
 
 export async function GET(req: NextRequest) {
   const params = req.nextUrl.searchParams
+
   try {
-    const resource_id = params.get('i')
-    if (!resource_id) {
+    const resourceParam = params.get('i')
+
+    if (!resourceParam) {
       throw new Error('需要指定资源ID')
     }
     let protocol = params.get('x')
@@ -20,22 +22,19 @@ export async function GET(req: NextRequest) {
     if (!count) {
       throw new Error('需要指定通道创建数量')
     }
-    const prov = params.get('a') || undefined
-    const city = params.get('b') || undefined
+    const area_id = 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),
+    const result = await createChannelsV3({
+      resource_no: resourceParam,
       auth_type: Number(auth_type),
       protocol: Number(protocol),
       count: Number(count),
-      prov,
-      city,
+      area_id: Number(area_id),
       isp: Number(isp),
       host_format: hostFormat === 'domain' ? 1 : 2,
     })
-
     if (!result.success) {
       throw new Error(result.message)
     }

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

@@ -0,0 +1,93 @@
+import {NextRequest, NextResponse} from 'next/server'
+import {createChannels, createChannelsV2, createChannelsV3} from '@/actions/channel'
+
+export async function GET(req: NextRequest) {
+  const params = req.nextUrl.searchParams
+
+  try {
+    const resourceParam = params.get('i')
+
+    if (!resourceParam) {
+      throw new Error('需要指定资源ID')
+    }
+    let protocol = params.get('x')
+    if (!protocol) {
+      protocol = '1'
+    }
+    const auth_type = params.get('t')
+    if (!auth_type) {
+      throw new Error('需要指定认证类型')
+    }
+    const count = params.get('n')
+    if (!count) {
+      throw new Error('需要指定通道创建数量')
+    }
+    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 createChannelsV2({
+      resource_no: resourceParam,
+      auth_type: Number(auth_type),
+      protocol: Number(protocol),
+      count: Number(count),
+      prov,
+      city,
+      isp: Number(isp),
+      host_format: hostFormat === 'domain' ? 1 : 2,
+    })
+
+    if (!result.success) {
+      throw new Error(result.message)
+    }
+
+    const format = params.get('rt')
+    const rBreaker = params.get('rb') || '13,10'
+    const rSeparator = params.get('rs') || '124'
+
+    const breaker = rBreaker.split(',').map(code => String.fromCharCode(parseInt(code))).join('')
+    const separator = rSeparator.split(',').map(code => String.fromCharCode(parseInt(code))).join('')
+
+    switch (format) {
+    case 'json':
+      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) => {
+        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)
+        }
+        return list.join(separator)
+      }).join(breaker)
+      return new NextResponse(text)
+    }
+  }
+  catch (error) {
+    console.error('Error creating channels:', error)
+    return NextResponse.json({error: (error as Error).message})
+  }
+}

src/app/(auth)/privacyPolicy/layout.tsx

@@ -0,0 +1,17 @@
+import {ReactNode} from 'react'
+import {Metadata} from 'next'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: '隐私政策',
+    description: '蓝狐代理隐私政策 - 了解我们如何收集、使用和保护您的个人信息',
+    openGraph: {
+      title: '隐私政策',
+      description: '蓝狐代理隐私政策 - 了解我们如何收集、使用和保护您的个人信息',
+    },
+  }
+}
+
+export default function PrivacyPolicyLayout({children}: {children: ReactNode}) {
+  return children
+}

src/app/(auth)/userAgreement/layout.tsx

@@ -0,0 +1,17 @@
+import {ReactNode} from 'react'
+import {Metadata} from 'next'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: '用户协议',
+    description: '蓝狐代理用户服务协议 - 使用服务前请仔细阅读用户协议条款',
+    openGraph: {
+      title: '用户协议',
+      description: '蓝狐代理用户服务协议 - 使用服务前请仔细阅读用户协议条款',
+    },
+  }
+}
+
+export default function UserAgreementLayout({children}: {children: ReactNode}) {
+  return children
+}

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

@@ -1,9 +1,34 @@
+import {Metadata} from 'next'
+import {siteConfig} from '@/config/site'
 import {HeroSection} from './hero-section'
 import {StatsSection} from './stats-section'
 import {ProductTypesSection} from './product-types-section'
 import {AdvantagesSection} from './advantages-section'
 import {ArticlesSection} from './articles-section'
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: siteConfig.name,
+    description: siteConfig.description,
+    openGraph: {
+      title: siteConfig.name,
+      description: siteConfig.description,
+      url: siteConfig.url,
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: siteConfig.name,
+        },
+      ],
+    },
+    alternates: {
+      canonical: siteConfig.url,
+    },
+  }
+}
+
 export default function Home() {
   return (
     <main className="flex flex-col gap-16 lg:gap-32 pb-16 lg:pb-32 bg-white">

src/app/(home)/account-management/page.tsx

@@ -1,4 +1,6 @@
+import {Metadata} from 'next'
 import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import {siteConfig} from '@/config/site'
 import bannerImg from './_assets/banner.webp'
 import solutionImg from './_assets/solution-main.webp'
 import value1Img from './_assets/value-1.webp'
@@ -46,6 +48,28 @@ const config: ScenePageConfig = {
   },
 }
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: config.banner.title,
+    description: config.banner.description,
+    openGraph: {
+      title: config.banner.title,
+      description: config.banner.description,
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: config.banner.title,
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/account-management`,
+    },
+  }
+}
+
 export default function AccountManagementPage() {
   return <ScenePage {...config}/>
 }

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

@@ -1,4 +1,6 @@
+import {Metadata} from 'next'
 import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import {siteConfig} from '@/config/site'
 import bannerImg from './_assets/banner.webp'
 import solutionImg from './_assets/solution-main.webp'
 import value1Img from './_assets/value-1.webp'
@@ -46,6 +48,28 @@ const config: ScenePageConfig = {
   },
 }
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: config.banner.title,
+    description: config.banner.description,
+    openGraph: {
+      title: config.banner.title,
+      description: config.banner.description,
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: config.banner.title,
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/advertising`,
+    },
+  }
+}
+
 export default function AdvertisingPage() {
   return <ScenePage {...config}/>
 }

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

@@ -1,3 +1,5 @@
+import {Metadata} from 'next'
+import {siteConfig} from '@/config/site'
 import BreadCrumb from '@/components/bread-crumb'
 import Wrap from '@/components/wrap'
 import Extract from '@/components/composites/extract'
@@ -5,6 +7,28 @@ import HomePage from '@/components/home/page'
 
 export type CollectPageProps = {}
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: 'IP提取',
+    description: '短效/长效IP提取，高可用性代理IP，支持API调用，即时获取全国各地代理IP，适用于数据采集、网络测试等场景',
+    openGraph: {
+      title: 'IP提取',
+      description: '短效/长效IP提取，高可用性代理IP，支持API调用，即时获取全国各地代理IP',
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: 'IP提取',
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/collect`,
+    },
+  }
+}
+
 export default function CollectPage(props: CollectPageProps) {
   return (
     // <main className="mt-20 flex flex-col gap-4">

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

@@ -0,0 +1,264 @@
+'use client'
+import {useState} from 'react'
+import Image from 'next/image'
+import {useRouter} from 'next/navigation'
+import {useForm} from 'react-hook-form'
+import {zodResolver} from '@hookform/resolvers/zod'
+import {z} from 'zod'
+import {toast} from 'sonner'
+import HomePage from '@/components/home/page'
+import Wrap from '@/components/wrap'
+import {Form, FormField} from '@/components/ui/form'
+import {Input} from '@/components/ui/input'
+import {Button} from '@/components/ui/button'
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
+import {merge} from '@/lib/utils'
+import {submitInquiry} from '@/actions/inquiry'
+import group from './_assets/Group.webp'
+import SelfDesc from '@/components/features/self-desc'
+
+const formSchema = z.object({
+  company: z.string().min(2, '企业名称至少2个字符'),
+  name: z.string().min(2, '联系人姓名至少2个字符'),
+  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的11位手机号码'),
+  usage: z.string().min(1, '请选择您需要的用量'),
+  purpose: z.string().min(2, '请输入用途说明').max(200, '用途说明不超过200字符'),
+})
+
+type FormValues = z.infer<typeof formSchema>
+
+export default function CustomPage() {
+  const router = useRouter()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      company: '',
+      name: '',
+      phone: '',
+      usage: '',
+      purpose: '',
+    },
+  })
+
+  const onSubmit = async (data: FormValues) => {
+    setIsSubmitting(true)
+    try {
+      const result = await submitInquiry(data)
+      if (result.success) {
+        toast.success('提交成功！我们的专属顾问会在24小时内联系您')
+        form.reset()
+      }
+      else {
+        toast.error(result.message || '提交失败，请稍后重试')
+      }
+    }
+    catch (error) {
+      toast.error('网络错误，请稍后重试')
+    }
+    finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const scrollToForm = () => {
+    const formElement = document.getElementById('inquiry-form')
+    if (formElement) {
+      formElement.scrollIntoView({behavior: 'smooth', block: 'start'})
+    }
+  }
+
+  return (
+    <HomePage
+      path={[
+        {label: '业务定制', href: '/custom'},
+      ]}
+    >
+      <Wrap className="flex flex-col gap-16">
+        {/* 1. 顶部介绍区 */}
+        <SelfDesc onInquiry={() => {
+          document.getElementById('inquiry-form')?.scrollIntoView({behavior: 'smooth', block: 'start'})
+        }}/>
+
+        {/* 2. 表单区 */}
+        <section id="inquiry-form" className="bg-white rounded-lg p-6 lg:p-12">
+          <div className="text-center mb-8 lg:mb-12">
+            <h2 className="text-2xl lg:text-3xl font-semibold">业务定制</h2>
+            <p className="text-gray-500 mt-2 text-sm lg:text-base">
+              请填写您的企业信息，我们的专属顾问将在24小时内与您联系
+            </p>
+          </div>
+          <Form form={form} handler={form.handleSubmit(onSubmit)}>
+            <div className="mx-auto max-w-2xl space-y-6">
+              {/* 企业名称 */}
+              <FormField name="companyName">
+                {({id, field}) => (
+                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
+                    <label
+                      htmlFor={id}
+                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
+                    >
+                      <span className="text-red-500">*</span>
+                      <span>企业名称</span>
+                    </label>
+                    <div className="flex-1 lg:max-w-md">
+                      <Input
+                        {...field}
+                        id={id}
+                        placeholder="请输入企业名称"
+                        disabled={isSubmitting}
+                        aria-required="true"
+                      />
+                    </div>
+                  </div>
+                )}
+              </FormField>
+
+              {/* 联系人姓名 */}
+              <FormField name="contactName">
+                {({id, field}) => (
+                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
+                    <label
+                      htmlFor={id}
+                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
+                    >
+                      <span className="text-red-500">*</span>
+                      <span>联系人姓名</span>
+                    </label>
+                    <div className="flex-1 lg:max-w-md">
+                      <Input
+                        {...field}
+                        id={id}
+                        placeholder="请输入联系人姓名"
+                        disabled={isSubmitting}
+                        aria-required="true"
+                      />
+                    </div>
+                  </div>
+                )}
+              </FormField>
+
+              {/* 联系人手机号码 */}
+              <FormField name="phone">
+                {({id, field}) => (
+                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
+                    <label
+                      htmlFor={id}
+                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
+                    >
+                      <span className="text-red-500">*</span>
+                      <span>联系人手机号</span>
+                    </label>
+                    <div className="flex-1 lg:max-w-md">
+                      <Input
+                        {...field}
+                        id={id}
+                        type="tel"
+                        placeholder="请输入11位手机号码"
+                        disabled={isSubmitting}
+                        aria-required="true"
+                      />
+                    </div>
+                  </div>
+                )}
+              </FormField>
+
+              {/* 每月需求用量 */}
+              <FormField name="monthlyUsage">
+                {({id, field}) => (
+                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
+                    <label
+                      htmlFor={id}
+                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
+                    >
+                      <span className="text-red-500">*</span>
+                      <span>每月需求用量</span>
+                    </label>
+                    <div className="flex-1 lg:max-w-md">
+                      <Select
+                        onValueChange={field.onChange}
+                        value={field.value}
+                        disabled={isSubmitting}
+                      >
+                        <SelectTrigger id={id} aria-required="true">
+                          <SelectValue placeholder="请选择您需要的用量"/>
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="less20">小于20万</SelectItem>
+                          <SelectItem value="20-100">20万~100万</SelectItem>
+                          <SelectItem value="100-500">100万~500万</SelectItem>
+                          <SelectItem value="more500">大于500万</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                )}
+              </FormField>
+
+              {/* 用途 */}
+              <FormField name="purpose">
+                {({id, field}) => (
+                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
+                    <label
+                      htmlFor={id}
+                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
+                    >
+                      <span className="text-red-500">*</span>
+                      <span>用途</span>
+                    </label>
+                    <div className="flex-1 lg:max-w-md">
+                      <Input
+                        {...field}
+                        id={id}
+                        placeholder="请输入用途，例如：数据采集、市场调研等"
+                        disabled={isSubmitting}
+                        aria-required="true"
+                      />
+                    </div>
+                  </div>
+                )}
+              </FormField>
+
+              <div className="pt-4 flex justify-center">
+                <Button
+                  type="submit"
+                  className="bg-blue-600 hover:bg-blue-700 px-12 py-2.5"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? '提交中...' : '提交'}
+                </Button>
+              </div>
+            </div>
+          </Form>
+        </section>
+
+        {/* 3. 底部引导区 */}
+        <section className="relative rounded-lg overflow-hidden h-48 lg:h-56">
+          <Image
+            src={group}
+            alt="立即试用背景"
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-full max-w-4xl px-6 flex flex-col lg:flex-row items-center gap-4 lg:gap-10 justify-center lg:justify-between">
+              <div className="text-blue-600 font-bold text-xl lg:text-2xl text-center lg:text-left">
+                现在注册，免费领取5000IP
+              </div>
+              <Button
+                className={merge(
+                  'bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md whitespace-nowrap',
+                )}
+                onClick={() => router.push('/product')}
+              >
+                立即试用
+              </Button>
+            </div>
+          </div>
+        </section>
+      </Wrap>
+    </HomePage>
+  )
+}

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

@@ -1,264 +1,27 @@
-'use client'
-import {useState} from 'react'
-import Image from 'next/image'
-import {useRouter} from 'next/navigation'
-import {useForm} from 'react-hook-form'
-import {zodResolver} from '@hookform/resolvers/zod'
-import {z} from 'zod'
-import {toast} from 'sonner'
-import HomePage from '@/components/home/page'
-import Wrap from '@/components/wrap'
-import {Form, FormField} from '@/components/ui/form'
-import {Input} from '@/components/ui/input'
-import {Button} from '@/components/ui/button'
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
-import {merge} from '@/lib/utils'
-import {submitInquiry} from '@/actions/inquiry'
-import group from './_assets/Group.webp'
-import SelfDesc from '@/components/features/self-desc'
+import {Metadata} from 'next'
+import {siteConfig} from '@/config/site'
+import CustomPage from './_client'
 
-const formSchema = z.object({
-  company: z.string().min(2, '企业名称至少2个字符'),
-  name: z.string().min(2, '联系人姓名至少2个字符'),
-  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的11位手机号码'),
-  usage: z.string().min(1, '请选择您需要的用量'),
-  purpose: z.string().min(2, '请输入用途说明').max(200, '用途说明不超过200字符'),
-})
-
-type FormValues = z.infer<typeof formSchema>
-
-export default function CustomPage() {
-  const router = useRouter()
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  const form = useForm<FormValues>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      company: '',
-      name: '',
-      phone: '',
-      usage: '',
-      purpose: '',
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: '业务定制',
+    description: '蓝狐代理为您提供企业级代理IP定制服务，专属顾问1对1服务，量身打造代理解决方案，满足企业个性化需求',
+    openGraph: {
+      title: '业务定制',
+      description: '蓝狐代理为您提供企业级代理IP定制服务，专属顾问1对1服务，量身打造代理解决方案',
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: '业务定制',
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/custom`,
     },
-  })
-
-  const onSubmit = async (data: FormValues) => {
-    setIsSubmitting(true)
-    try {
-      const result = await submitInquiry(data)
-      if (result.success) {
-        toast.success('提交成功！我们的专属顾问会在24小时内联系您')
-        form.reset()
-      }
-      else {
-        toast.error(result.message || '提交失败，请稍后重试')
-      }
-    }
-    catch (error) {
-      toast.error('网络错误，请稍后重试')
-    }
-    finally {
-      setIsSubmitting(false)
-    }
   }
-
-  const scrollToForm = () => {
-    const formElement = document.getElementById('inquiry-form')
-    if (formElement) {
-      formElement.scrollIntoView({behavior: 'smooth', block: 'start'})
-    }
-  }
-
-  return (
-    <HomePage
-      path={[
-        {label: '业务定制', href: '/custom'},
-      ]}
-    >
-      <Wrap className="flex flex-col gap-16">
-        {/* 1. 顶部介绍区 */}
-        <SelfDesc onInquiry={() => {
-          document.getElementById('inquiry-form')?.scrollIntoView({behavior: 'smooth', block: 'start'})
-        }}/>
-
-        {/* 2. 表单区 */}
-        <section id="inquiry-form" className="bg-white rounded-lg p-6 lg:p-12">
-          <div className="text-center mb-8 lg:mb-12">
-            <h2 className="text-2xl lg:text-3xl font-semibold">业务定制</h2>
-            <p className="text-gray-500 mt-2 text-sm lg:text-base">
-              请填写您的企业信息，我们的专属顾问将在24小时内与您联系
-            </p>
-          </div>
-          <Form form={form} handler={form.handleSubmit(onSubmit)}>
-            <div className="mx-auto max-w-2xl space-y-6">
-              {/* 企业名称 */}
-              <FormField name="companyName">
-                {({id, field}) => (
-                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
-                    <label
-                      htmlFor={id}
-                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
-                    >
-                      <span className="text-red-500">*</span>
-                      <span>企业名称</span>
-                    </label>
-                    <div className="flex-1 lg:max-w-md">
-                      <Input
-                        {...field}
-                        id={id}
-                        placeholder="请输入企业名称"
-                        disabled={isSubmitting}
-                        aria-required="true"
-                      />
-                    </div>
-                  </div>
-                )}
-              </FormField>
-
-              {/* 联系人姓名 */}
-              <FormField name="contactName">
-                {({id, field}) => (
-                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
-                    <label
-                      htmlFor={id}
-                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
-                    >
-                      <span className="text-red-500">*</span>
-                      <span>联系人姓名</span>
-                    </label>
-                    <div className="flex-1 lg:max-w-md">
-                      <Input
-                        {...field}
-                        id={id}
-                        placeholder="请输入联系人姓名"
-                        disabled={isSubmitting}
-                        aria-required="true"
-                      />
-                    </div>
-                  </div>
-                )}
-              </FormField>
-
-              {/* 联系人手机号码 */}
-              <FormField name="phone">
-                {({id, field}) => (
-                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
-                    <label
-                      htmlFor={id}
-                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
-                    >
-                      <span className="text-red-500">*</span>
-                      <span>联系人手机号</span>
-                    </label>
-                    <div className="flex-1 lg:max-w-md">
-                      <Input
-                        {...field}
-                        id={id}
-                        type="tel"
-                        placeholder="请输入11位手机号码"
-                        disabled={isSubmitting}
-                        aria-required="true"
-                      />
-                    </div>
-                  </div>
-                )}
-              </FormField>
-
-              {/* 每月需求用量 */}
-              <FormField name="monthlyUsage">
-                {({id, field}) => (
-                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
-                    <label
-                      htmlFor={id}
-                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
-                    >
-                      <span className="text-red-500">*</span>
-                      <span>每月需求用量</span>
-                    </label>
-                    <div className="flex-1 lg:max-w-md">
-                      <Select
-                        onValueChange={field.onChange}
-                        value={field.value}
-                        disabled={isSubmitting}
-                      >
-                        <SelectTrigger id={id} aria-required="true">
-                          <SelectValue placeholder="请选择您需要的用量"/>
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="less20">小于20万</SelectItem>
-                          <SelectItem value="20-100">20万~100万</SelectItem>
-                          <SelectItem value="100-500">100万~500万</SelectItem>
-                          <SelectItem value="more500">大于500万</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                )}
-              </FormField>
-
-              {/* 用途 */}
-              <FormField name="purpose">
-                {({id, field}) => (
-                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
-                    <label
-                      htmlFor={id}
-                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
-                    >
-                      <span className="text-red-500">*</span>
-                      <span>用途</span>
-                    </label>
-                    <div className="flex-1 lg:max-w-md">
-                      <Input
-                        {...field}
-                        id={id}
-                        placeholder="请输入用途，例如：数据采集、市场调研等"
-                        disabled={isSubmitting}
-                        aria-required="true"
-                      />
-                    </div>
-                  </div>
-                )}
-              </FormField>
-
-              <div className="pt-4 flex justify-center">
-                <Button
-                  type="submit"
-                  className="bg-blue-600 hover:bg-blue-700 px-12 py-2.5"
-                  disabled={isSubmitting}
-                >
-                  {isSubmitting ? '提交中...' : '提交'}
-                </Button>
-              </div>
-            </div>
-          </Form>
-        </section>
-
-        {/* 3. 底部引导区 */}
-        <section className="relative rounded-lg overflow-hidden h-48 lg:h-56">
-          <Image
-            src={group}
-            alt="立即试用背景"
-            fill
-            className="object-cover"
-            priority
-          />
-          <div className="absolute inset-0 flex items-center justify-center">
-            <div className="w-full max-w-4xl px-6 flex flex-col lg:flex-row items-center gap-4 lg:gap-10 justify-center lg:justify-between">
-              <div className="text-blue-600 font-bold text-xl lg:text-2xl text-center lg:text-left">
-                现在注册，免费领取5000IP
-              </div>
-              <Button
-                className={merge(
-                  'bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md whitespace-nowrap',
-                )}
-                onClick={() => router.push('/product')}
-              >
-                立即试用
-              </Button>
-            </div>
-          </div>
-        </section>
-      </Wrap>
-    </HomePage>
-  )
 }
+
+export default CustomPage

src/app/(home)/data-capture/page.tsx

@@ -1,4 +1,6 @@
+import {Metadata} from 'next'
 import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import {siteConfig} from '@/config/site'
 import bannerImg from './_assets/banner.webp'
 import solutionImg from './_assets/solution-main.webp'
 import value1Img from './_assets/value-1.webp'
@@ -46,6 +48,28 @@ const config: ScenePageConfig = {
   },
 }
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: config.banner.title,
+    description: config.banner.description,
+    openGraph: {
+      title: config.banner.title,
+      description: config.banner.description,
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: config.banner.title,
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/data-capture`,
+    },
+  }
+}
+
 export default function DataCapturePage() {
   return <ScenePage {...config}/>
 }

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

@@ -2,20 +2,17 @@
 
 ## 请求方式
 
-`GET https://lanhuip.com/api/extract`
+`GET https://lanhuip.com/proxies/v2`
 
 ## 请求参数
 
 | 参数名 | 类型     | 必填 | 描述                                                                                                                       |
 |--------|----------|------|----------------------------------------------------------------------------------------------------------------------------|
-| i      | number   | 是   | 用于提取的套餐 ID                                                                                                          |
+| i      | string   | 是   | 用于提取的套餐 ID                                                                                                          |
 | t      | number   | 是   | 认证类型：1 - 白名单，2 - 密码                                                                                             |
-| a      | string   | 否   | 归属地省份。默认全局随机                                                                                                   |
-| b      | string   | 否   | 归属地城市。默认全局随机                                                                                                   |
-| s      | string   | 否   | 归属地运营商。默认全局随机                                                                                                 |
-| d      | string   | 否   | 是否去重：1 - 是，0 -  否。默认为是                                                                                        |
-| rt     | string   | 否   | 返回类型：1 - TXT，2 - JSON。默认 TXT  
-| rh     | string   | 否   | 返回时主机字段的格式：1 - 域名，2 - IP。默认为域名                                                                             |
+| a      | string   | 否   | 归属地省份，直接传省份名称，例如：广东，默认或不传时为不限                                                                                            |
+| b      | string   | 否   | 归属地城市，直接传城市名称，例如：上海，默认或不传时为不限                                                                                                  |
+| rt     | string   | 否   | 返回类型：1 - TXT，2 - JSON。默认 TXT                                                                              |
 | rs     | number[] | 否   | 返回时要使用的分隔符，值为该字符的 ascii 编码，可以有多个字符，多个字符用半角逗号连接。默认为 13,10，即回车 + 换行（\r\n） |
 | rb     | number[] | 否   | 返回时要使用的换行符，值为该字符的 ascii 编码，可以有多个字符，多个字符用半角逗号连接。默认为 124，即垂直线（ \| ）        |
 | n      | number   | 否   | 提取数量。默认为 1                                                                                                         |
@@ -39,7 +36,7 @@
 ### 请求示例
 
 ```http   
-GET https://lanhuip.com/api/extract?i=1&t=2&a=广东省&b=广州市&s=移动&d=1&rt=2&n=3
+GET https://lanhuip.com/proxies/v2?i=1&t=2&a=广东省&b=广州市&s=移动&d=1&rt=2&n=3
 ```
 
 ### 响应示例
@@ -72,7 +69,7 @@ GET https://lanhuip.com/api/extract?i=1&t=2&a=广东省&b=广州市&s=移动&d=1
 ### 请求示例
 
 ```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
+GET https://lanhuip.com/proxies/v2?i=24&t=1&a=广东省&b=广州市&d=1&rt=text&rh=ip&rs=124&rb=13%2C10&n=1
 ```
 
 ### 响应示例

src/app/(home)/docs/[groupCode]/[articleId]/article-viewer.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import {useEffect, useRef} from 'react'
+import 'photoswipe/style.css'
+
+export default function ArticleViewer({content}: {content: string}) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const handleClick = async (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      if (target.tagName !== 'IMG') return
+      if (!container.contains(target)) return
+
+      const allImages = Array.from(container.querySelectorAll('img'))
+      const slides: Array<{src: string, width: number, height: number}> = []
+      let clickedIndex = 0
+
+      allImages.forEach((img) => {
+        const src = img.getAttribute('src')
+        if (!src) return
+        if (img === target) clickedIndex = slides.length
+        slides.push({
+          src,
+          width: img.naturalWidth || 1600,
+          height: img.naturalHeight || 1200,
+        })
+      })
+
+      if (slides.length === 0) return
+
+      const {default: PhotoSwipe} = await import('photoswipe')
+      const pswp = new PhotoSwipe({
+        dataSource: slides,
+        index: clickedIndex,
+        bgOpacity: 0.85,
+        spacing: 0.12,
+        zoom: true,
+      })
+      pswp.init()
+    }
+
+    container.addEventListener('click', handleClick)
+    return () => {
+      container.removeEventListener('click', handleClick)
+    }
+  }, [content])
+
+  return (
+    <div
+      ref={containerRef}
+      className="prose prose-slate max-w-none [&_img]:cursor-zoom-in"
+      dangerouslySetInnerHTML={{__html: content}}
+    />
+  )
+}

src/app/(home)/docs/[groupCode]/[articleId]/page.tsx

@@ -0,0 +1,60 @@
+import {notFound} from 'next/navigation'
+import {Suspense} from 'react'
+import {getArticleDetail} from '@/actions/article'
+import {formatDate} from '@/lib/utils/date'
+import ArticleViewer from './article-viewer'
+
+interface ArticlePageProps {
+  params: Promise<{groupCode: string, articleId: string}>
+}
+
+function ArticleLoadingSkeleton() {
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="mb-6 pb-4 border-b">
+        <div className="h-8 bg-gray-200 rounded animate-pulse mb-4 w-3/4"/>
+        <div className="h-4 bg-gray-100 rounded animate-pulse w-1/3"/>
+      </div>
+      <div className="space-y-3">
+        {[1, 2, 3, 4].map(i => (
+          <div key={i} className="h-4 bg-gray-100 rounded animate-pulse"/>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+async function ArticleContent(props: ArticlePageProps) {
+  const params = await props.params
+
+  const resp = await getArticleDetail({id: Number(params.articleId)})
+
+  if (!resp.success || !resp.data) {
+    notFound()
+  }
+
+  const article = resp.data
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="mb-6 pb-4 border-b">
+        <h1 className="text-2xl md:text-3xl font-bold text-slate-900 mb-2">
+          {article.title}
+        </h1>
+        <div className="flex items-center gap-4 text-sm text-slate-500">
+          <span>更新日期：{formatDate(article.updated_at, 'YYYY-MM-DD HH:mm:ss')}</span>
+        </div>
+      </div>
+
+      <ArticleViewer content={article.content || ''}/>
+    </div>
+  )
+}
+
+export default function ArticlePage(props: ArticlePageProps) {
+  return (
+    <Suspense fallback={<ArticleLoadingSkeleton/>}>
+      <ArticleContent params={props.params}/>
+    </Suspense>
+  )
+}

src/app/(home)/docs/layout.tsx

@@ -3,13 +3,14 @@ import {Children} from '@/lib/utils'
 import Sidebar from './sidebar'
 import HomePage from '@/components/home/page'
 import SidebarDrawer from './sidebar-drawer'
+import {Suspense} from 'react'
 
 export default function DocsLayout(props: Children) {
   return (
     <HomePage path={[{label: '帮助中心', href: '/docs'}]}>
       <Wrap className="flex gap-3 flex-col md:flex-row">
         <SidebarDrawer/>
-        <Sidebar className="hidden md:block w-68"/>
+        <Suspense> <Sidebar className="hidden md:block w-68"/></Suspense>
         <div className="flex-1 bg-white rounded-lg p-4 md:p-6 min-h-[420px]">
           {props.children}
         </div>

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

@@ -1,3 +1,28 @@
+import {Metadata} from 'next'
+import {siteConfig} from '@/config/site'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: '帮助中心',
+    description: '蓝狐代理帮助中心 - 产品使用教程、常见问题解答、行业资讯、代理IP设置指南',
+    openGraph: {
+      title: '帮助中心',
+      description: '蓝狐代理帮助中心 - 产品使用教程、常见问题解答、行业资讯',
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: '帮助中心',
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/docs`,
+    },
+  }
+}
+
 export default function DocsIndexPage() {
   return (
     <div className="text-center text-slate-500 py-12">

src/app/(home)/docs/sidebar.tsx

@@ -1,59 +1,11 @@
 'use client'
-import {useState, useMemo, useCallback} from 'react'
+import {useState, useEffect, useMemo} from 'react'
 import Link from 'next/link'
 import {usePathname} from 'next/navigation'
 import {ChevronRight} from 'lucide-react'
 import {merge} from '@/lib/utils'
-
-// 菜单配置
-const MENU_ITEMS = [
-  {
-    group: '产品文档',
-    items: [
-      {key: 'product-overview', label: '产品介绍'},
-      {key: 'choose-product', label: '如何选择产品'},
-      {key: 'why-verify', label: '为什么需要实名认证'},
-      {key: 'city-lines', label: '有哪些城市线路'},
-      {key: 'api-docs', label: 'ip提取接口文档'},
-      // 服务条款
-    ],
-  },
-  {
-    group: '操作指南',
-    items: [
-      {key: 'profile-settings', label: '修改个人信息和重置密码'},
-      {key: 'whitelist-guide', label: '如何添加白名单'},
-      {key: 'verify-guide', label: '如何进行实名认证'},
-      {key: 'extract-link', label: '如何生成提取链接'},
-      {key: 'payment-records', label: '查看支付和使用记录'},
-    ],
-  },
-  {
-    group: '客户端教程',
-    items: [
-      {key: 'browser-proxy', label: '浏览器设置代理教程'},
-      {key: 'ios-proxy', label: 'iOS设置代理教程'},
-      {key: 'android-proxy', label: '安卓手机设置代理教程'},
-      {key: 'windows10-proxy', label: 'Windows10设置代理教程'},
-    ],
-  },
-  {
-    group: '常见问题',
-    items: [
-      {key: 'faq-general', label: '常见问题总览'},
-      {key: 'faq-billing', label: '计费与套餐问题'},
-      // 业务场景集成方案
-      // 故障排查
-    ],
-  },
-  {
-    group: '新闻资讯',
-    items: [
-      {key: 'news-latest', label: '了解代理服务器的工作原理'},
-      {key: 'news-announce', label: '网站公告'},
-    ],
-  },
-]
+import {getArticleNav} from '@/actions/article'
+import type {ArticleNavGroup} from '@/lib/models/article'
 
 type Props = {
   className?: string
@@ -62,88 +14,126 @@ type Props = {
 
 export default function Sidebar({className, onClose}: Props) {
   const pathname = usePathname()
+  const [navGroups, setNavGroups] = useState<ArticleNavGroup[]>([])
+  const [loading, setLoading] = useState(true)
+  const [manualExpanded, setManualExpanded] = useState<Record<string, boolean>>({})
 
-  // 获取当前文档 key
-  const getCurrentKey = useCallback(() => {
-    const parts = pathname?.split('/') || []
-    return parts[2] || ''
-  }, [pathname])
+  useEffect(() => {
+    const loadNav = async () => {
+      const resp = await getArticleNav({})
+      if (resp.success) {
+        setNavGroups(resp.data || [])
+      }
+      setLoading(false)
+    }
+    loadNav()
+  }, [])
 
-  const currentKey = getCurrentKey()
+  const parts = pathname?.split('/') || []
+  const currentArticleId = parts[3]
 
-  // 展开/收起状态
-  const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({})
-
-  // 初始化：自动展开包含当前活跃项的分组
-  const initialExpandedGroups = useMemo(() => {
+  const autoExpanded = useMemo(() => {
     const result: Record<string, boolean> = {}
-    MENU_ITEMS.forEach((section, index) => {
-      const hasActive = section.items.some(item => item.key === currentKey)
-      if (hasActive || index === 0) {
-        result[section.group] = true
+
+    if (navGroups.length === 0) return result
+
+    let activeGroupCode: string | null = null
+    navGroups.forEach((group) => {
+      const hasActive = group.articles.some(
+        article => String(article.id) === currentArticleId,
+      )
+      if (hasActive) {
+        activeGroupCode = group.code
       }
     })
+
+    result[navGroups[0].code] = true
+
+    if (activeGroupCode && activeGroupCode !== navGroups[0].code) {
+      result[activeGroupCode] = true
+    }
+
     return result
-  }, [currentKey])
+  }, [navGroups, currentArticleId])
 
-  // 合并自动展开和用户手动切换
-  const finalExpandedGroups = useMemo(() => {
-    return {...initialExpandedGroups, ...expandedGroups}
-  }, [initialExpandedGroups, expandedGroups])
+  const expandedGroups = useMemo(() => {
+    return {...autoExpanded, ...manualExpanded}
+  }, [autoExpanded, manualExpanded])
 
-  const toggleGroup = (group: string) => {
-    setExpandedGroups(prev => ({
+  const toggleGroup = (groupCode: string) => {
+    setManualExpanded(prev => ({
       ...prev,
-      [group]: !finalExpandedGroups[group],
+      [groupCode]: !expandedGroups[groupCode],
     }))
   }
 
-  const getItemHref = (key: string) => `/docs/${key}`
+  const getActiveArticleId = () => {
+    return currentArticleId || ''
+  }
+
+  if (loading) {
+    return (
+      <aside className={merge('bg-white rounded-lg p-3', className)}>
+        <div className="space-y-2">
+          {[1, 2, 3].map(i => (
+            <div key={i} className="h-10 bg-gray-100 rounded animate-pulse"/>
+          ))}
+        </div>
+      </aside>
+    )
+  }
+
+  if (navGroups.length === 0) {
+    return (
+      <aside className={merge('bg-white rounded-lg p-3', className)}>
+        <div className="text-center text-slate-400 py-4">
+          暂无文档
+        </div>
+      </aside>
+    )
+  }
 
   return (
-    <aside
-      className={merge(`bg-white rounded-lg p-3 transition-all duration-200 shrink-0`, className)}
-    >
+    <aside className={merge('bg-white rounded-lg p-3 transition-all duration-200 shrink-0', className)}>
       <nav className="space-y-2">
-        {MENU_ITEMS.map(section => (
-          <div key={section.group}>
+        {navGroups.map(group => (
+          <div key={group.code}>
             <div
-              onClick={() => toggleGroup(section.group)}
+              onClick={() => toggleGroup(group.code)}
               className={`flex items-center gap-2 cursor-pointer px-3 py-2 rounded-sm transition-colors ${
-                finalExpandedGroups[section.group] && 'bg-blue-50'
+                expandedGroups[group.code] && 'bg-blue-50'
               }`}
             >
               <div
                 className={`w-4 flex items-center justify-center text-sm text-slate-400 transform transition-transform ${
-                  finalExpandedGroups[section.group] ? 'rotate-90' : ''
+                  expandedGroups[group.code] ? 'rotate-90' : ''
                 }`}
               >
                 <ChevronRight size={16}/>
               </div>
-
               <div className="text-lg font-semibold text-slate-900">
-                {section.group}
+                {group.name}
               </div>
             </div>
 
-            {finalExpandedGroups[section.group] && (
+            {expandedGroups[group.code] && (
               <ul className="mt-1 text-base">
-                {section.items.map((item) => {
-                  const isActive = currentKey === item.key
-                  const href = getItemHref(item.key)
+                {group.articles.map((article) => {
+                  const isActive = getActiveArticleId() === String(article.id)
+                  const href = `/docs/${group.code}/${article.id}`
 
                   return (
-                    <li key={item.key}>
+                    <li key={article.id}>
                       <Link
                         href={href}
                         onClick={() => onClose?.()}
                         className={`block pl-8 py-2 text-base cursor-pointer transition-colors ${
                           isActive
-                            ? 'bg-blue-50 font-semibold'
+                            ? 'bg-blue-50 font-semibold text-blue-600'
                             : 'text-slate-700 hover:text-slate-900 hover:bg-slate-50'
                         }`}
                       >
-                        {item.label}
+                        {article.title}
                       </Link>
                     </li>
                   )

src/app/(home)/e-commerce/page.tsx

@@ -1,4 +1,6 @@
+import {Metadata} from 'next'
 import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import {siteConfig} from '@/config/site'
 import bannerImg from './_assets/banner.webp'
 import solutionImg from './_assets/solution-main.webp'
 import value1Img from './_assets/value-1.webp'
@@ -46,6 +48,28 @@ const config: ScenePageConfig = {
   },
 }
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: config.banner.title,
+    description: config.banner.description,
+    openGraph: {
+      title: config.banner.title,
+      description: config.banner.description,
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: config.banner.title,
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/e-commerce`,
+    },
+  }
+}
+
 export default function ECommercePage() {
   return <ScenePage {...config}/>
 }

src/app/(home)/market-research/page.tsx

@@ -1,4 +1,6 @@
+import {Metadata} from 'next'
 import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import {siteConfig} from '@/config/site'
 import bannerImg from './_assets/banner.webp'
 import solutionImg from './_assets/solution-main.webp'
 import value1Img from './_assets/value-1.webp'
@@ -46,6 +48,28 @@ const config: ScenePageConfig = {
   },
 }
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: config.banner.title,
+    description: config.banner.description,
+    openGraph: {
+      title: config.banner.title,
+      description: config.banner.description,
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: config.banner.title,
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/market-research`,
+    },
+  }
+}
+
 export default function MarketResearchPage() {
   return <ScenePage {...config}/>
 }

src/app/(home)/network-testing/page.tsx

@@ -1,4 +1,6 @@
+import {Metadata} from 'next'
 import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import {siteConfig} from '@/config/site'
 import bannerImg from './_assets/banner.webp'
 import solutionImg from './_assets/solution-main.webp'
 import value1Img from './_assets/value-1.webp'
@@ -46,6 +48,28 @@ const config: ScenePageConfig = {
   },
 }
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: config.banner.title,
+    description: config.banner.description,
+    openGraph: {
+      title: config.banner.title,
+      description: config.banner.description,
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: config.banner.title,
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/network-testing`,
+    },
+  }
+}
+
 export default function NetworkTestingPage() {
   return <ScenePage {...config}/>
 }

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

@@ -1,7 +1,9 @@
+import {Suspense} from 'react'
+import {Metadata} from 'next'
+import {siteConfig} from '@/config/site'
 import BreadCrumb from '@/components/bread-crumb'
 import Wrap from '@/components/wrap'
 import Purchase, {TabType} from '@/components/composites/purchase'
-import {Suspense} from 'react'
 import HomePage from '@/components/home/page'
 
 export type ProductPageProps = {
@@ -10,6 +12,28 @@ export type ProductPageProps = {
   }>
 }
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: '产品中心',
+    description: '为您的业务提供多样化代理产品 - 短效代理、长效代理、固定IP代理、SOCKS5代理，高可用性、低延迟',
+    openGraph: {
+      title: '产品中心',
+      description: '为您的业务提供多样化代理产品 - 短效代理、长效代理、固定IP代理、SOCKS5代理，高可用性、低延迟',
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: '产品中心',
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/product`,
+    },
+  }
+}
+
 export default function ProductPage(props: ProductPageProps) {
   return (
     <HomePage path={[

src/app/(home)/seo-optimization/page.tsx

@@ -1,4 +1,6 @@
+import {Metadata} from 'next'
 import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import {siteConfig} from '@/config/site'
 import bannerImg from './_assets/banner.webp'
 import solutionImg from './_assets/solution-main.webp'
 import value1Img from './_assets/value-1.webp'
@@ -46,6 +48,28 @@ const config: ScenePageConfig = {
   },
 }
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: config.banner.title,
+    description: config.banner.description,
+    openGraph: {
+      title: config.banner.title,
+      description: config.banner.description,
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: config.banner.title,
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/seo-optimization`,
+    },
+  }
+}
+
 export default function SeoOptimizationPage() {
   return <ScenePage {...config}/>
 }

src/app/(home)/social-media/page.tsx

@@ -1,4 +1,6 @@
+import {Metadata} from 'next'
 import ScenePage, {ScenePageConfig} from '@/components/scene-page'
+import {siteConfig} from '@/config/site'
 import bannerImg from './_assets/banner.webp'
 import solutionImg from './_assets/solution-main.webp'
 import value1Img from './_assets/value-1.webp'
@@ -46,6 +48,28 @@ const config: ScenePageConfig = {
   },
 }
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: config.banner.title,
+    description: config.banner.description,
+    openGraph: {
+      title: config.banner.title,
+      description: config.banner.description,
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: config.banner.title,
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/social-media`,
+    },
+  }
+}
+
 export default function SocialMediaPage() {
   return <ScenePage {...config}/>
 }

src/app/admin/balance/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {useCallback, useEffect, useState} from 'react'
+import {Suspense, useCallback, useEffect, useState} from 'react'
 import {PageRecord} from '@/lib/api'
 import {Balance} from '@/lib/models'
 import {useStatus} from '@/lib/states'
@@ -136,100 +136,101 @@ export default function BalancePage(props: BalancePageProps) {
           </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)) {
+      <Suspense>
+        <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">
-                    <CheckCircle size={16} className="text-done"/>
-                    <span>已完成</span>
+                    {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>
                 )
-              }
-              if (!trade) return <span>-</span>
-              return (
+              },
+            },
+            {
+              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-red-600' : 'text-green-600'
+                      }`}
+                    >
+                      {isPositive ? '+' : ''}
+                      {Number(amount).toFixed(2)}
+                    </span>
+                  </div>
+                )
+              },
+            },
+            {
+              header: '余额变化',
+              accessorKey: 'balance_prev',
+              cell: ({row}) => (
                 <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>
+                  <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>
-              )
+              ),
             },
-          },
-          {
-            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: 'remark',
             },
-          },
-          {
-            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'),
-          },
-        ]}
-      />
+            {
+              header: '创建时间',
+              accessorKey: 'created_at',
+              cell: ({row}) =>
+                format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm:ss'),
+            },
+          ]}
+        />
+      </Suspense>
     </Page>
   )
 }

src/app/admin/bills/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {useCallback, useEffect, useState} from 'react'
+import {Suspense, useCallback, useEffect, useState} from 'react'
 import {PageRecord} from '@/lib/api'
 import {Bill} from '@/lib/models'
 import {useStatus} from '@/lib/states'
@@ -88,7 +88,7 @@ export default function BillsPage(props: BillsPageProps) {
         <div>
         </div>
 
-        <Form form={form} handler={form.handleSubmit(onSubmit)} className="flex items-end gap-4 flex-wrap">
+        <Form form={form} handler={form.handleSubmit(onSubmit)} className="flex-auto flex flex-wrap gap-4 items-end">
           <FormField name="type" label={<span className="text-sm">账单类型</span>}>
             {({id, field}) => (
               <Select value={field.value} onValueChange={field.onChange}>
@@ -141,158 +141,159 @@ export default function BillsPage(props: BillsPageProps) {
         </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: `账单编号`,
-          },
-          {
-            accessorKey: 'info',
-            header: `账单详情`,
-            cell: ({row}) => {
-              const bill = row.original
-              return (
-                <div className="flex items-center gap-2">
-                  {/* 类型展示 */}
-                  <div className="shrink-0">
-                    {bill.type === 1 && (
-                      <div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
-                        <CreditCard size={16}/>
-                        <span>消费</span>
-                      </div>
-                    )}
-                    {bill.type === 2 && (
-                      <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
-                        <CreditCard size={16}/>
-                        <span>退款</span>
-                      </div>
-                    )}
-                    {bill.type === 3 && (
-                      <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
-                        <CreditCard size={16}/>
-                        <span>充值</span>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* 账单详情 */}
-                  <div className="text-sm">
-                    {bill.info}
-                  </div>
-                </div>
-              )
+      <Suspense>
+        <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)
             },
-          },
-          {
-            accessorKey: 'status',
-            header: `状态`,
-            cell: ({row}) => {
-              const trade = row.original.trade
-              if (![1, 2, 3, 4, 5].includes(trade?.method)) {
+            onSizeChange: async (size: number) => {
+              await refresh(data.page, size)
+            },
+          }}
+          columns={[
+            {
+              accessorKey: 'bill_no', header: `账单编号`,
+            },
+            {
+              accessorKey: 'info',
+              header: `账单详情`,
+              cell: ({row}) => {
+                const bill = row.original
                 return (
                   <div className="flex items-center gap-2">
-                    <CheckCircle size={16} className="text-done"/>
-                    <span>已完成</span>
+                    {/* 类型展示 */}
+                    <div className="shrink-0">
+                      {bill.type === 1 && (
+                        <div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
+                          <CreditCard size={16}/>
+                          <span>消费</span>
+                        </div>
+                      )}
+                      {bill.type === 2 && (
+                        <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
+                          <CreditCard size={16}/>
+                          <span>退款</span>
+                        </div>
+                      )}
+                      {bill.type === 3 && (
+                        <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
+                          <CreditCard size={16}/>
+                          <span>充值</span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* 账单详情 */}
+                    <div className="text-sm">
+                      {bill.info}
+                    </div>
                   </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 = typeof row.original.amount === 'string'
-                ? parseFloat(row.original.amount)
-                : row.original.amount || 0
-              const trade = row.original.trade
-              const paymentMethodMap = {
-                1: '支付宝*',
-                2: '微信*',
-                3: '其他',
-                4: '支付宝',
-                5: '微信',
-              }
-              const paymentMethod = trade ? paymentMethodMap[trade.method as keyof typeof paymentMethodMap] || '余额' : '余额'
-              return (
-                <div className="flex gap-1">
-                  <span className="text-sm">
-                    {paymentMethod}
-                  </span>
-                  <span className={amount > 0 ? 'text-green-500' : 'text-orange-500'}>
-                    ￥{amount.toFixed(2)}
-                  </span>
-                </div>
-              )
+            {
+              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: 'platform',
-            header: '支付平台',
-            cell: ({row}) => {
-              const trade = row.original.trade
-              if (!trade) return <span>-</span>
-              return (
-                <div className="flex items-center gap-2">
-                  {trade.platform === 1 ? (
-                    <>
-                      <span>电脑网站</span>
-                    </>
-                  ) : trade.platform === 2 ? (
-                    <>
-                      <span>手机网站</span>
-                    </>
-                  ) : (
-                    <span>-</span>
-                  )}
-                </div>
-              )
+            {
+              accessorKey: 'amount',
+              header: '支付信息',
+              cell: ({row}) => {
+                const amount = typeof row.original.amount === 'string'
+                  ? parseFloat(row.original.amount)
+                  : row.original.amount || 0
+                const trade = row.original.trade
+                const paymentMethodMap = {
+                  1: '支付宝*',
+                  2: '微信*',
+                  3: '其他',
+                  4: '支付宝',
+                  5: '微信',
+                }
+                const paymentMethod = trade ? paymentMethodMap[trade.method as keyof typeof paymentMethodMap] || '余额' : '余额'
+                return (
+                  <div className="flex gap-1">
+                    <span className="text-sm">
+                      {paymentMethod}
+                    </span>
+                    <span className={amount > 0 ? 'text-green-500' : 'text-orange-500'}>
+                      ￥{amount.toFixed(2)}
+                    </span>
+                  </div>
+                )
+              },
             },
-          },
-          {
-            accessorKey: 'created_at', header: '创建时间', cell: ({row}) => (
-              format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm')
-            ),
-          },
-          // {
-          //   accessorKey: 'action', header: `操作`, cell: item => (
-          //     <div className="flex gap-2">
-          //       -
-          //     </div>
-          //   ),
-          // },
-        ]}
-      />
+            {
+              accessorKey: 'platform',
+              header: '支付平台',
+              cell: ({row}) => {
+                const trade = row.original.trade
+                if (!trade) return <span>-</span>
+                return (
+                  <div className="flex items-center gap-2">
+                    {trade.platform === 1 ? (
+                      <>
+                        <span>电脑网站</span>
+                      </>
+                    ) : trade.platform === 2 ? (
+                      <>
+                        <span>手机网站</span>
+                      </>
+                    ) : (
+                      <></>
+                    )}
+                  </div>
+                )
+              },
+            },
+            {
+              accessorKey: 'created_at',
+              header: '创建时间',
+              cell: ({row}) => {
+                const createdAt = row.original.created_at
+                if (!createdAt) return <span></span>
+                const date = new Date(createdAt)
+                if (isNaN(date.getTime())) return <span></span>
+                return format(date, 'yyyy-MM-dd HH:mm:ss')
+              },
+            },
+          ]}
+        />
+      </Suspense>
     </Page>
   )
 }

src/app/admin/channels/page.tsx

@@ -178,6 +178,21 @@ export default function ChannelsPage(props: ChannelsPageProps) {
               header: '代理地址',
               cell: ({row}) => <Addr channel={row.original}/>,
             },
+            {
+              header: '地区',
+              cell: ({row}) => {
+                const prov = row.original.filter_prov
+                const city = row.original.filter_city
+                const parts = []
+                if (prov && prov !== 'all') parts.push(prov)
+                if (city && city !== 'all') parts.push(city)
+                return (
+                  <div className="text-sm">
+                    {parts.length > 0 ? parts.join(' / ') : '不限'}
+                  </div>
+                )
+              },
+            },
             {
               header: '认证方式',
               cell: ({row}) => {
@@ -214,11 +229,35 @@ export default function ChannelsPage(props: ChannelsPageProps) {
             },
             {
               header: '提取时间',
-              cell: ({row}) => format(row.original.created_at, 'yyyy-MM-dd HH:mm'),
+              cell: ({row}) => {
+                const timeValue = row.original.created_at
+                if (!timeValue) return <div>-</div>
+
+                try {
+                  const date = new Date(timeValue)
+                  if (isNaN(date.getTime())) return <div>-</div>
+                  return <div>{format(date, 'yyyy-MM-dd HH:mm:ss')}</div>
+                }
+                catch {
+                  return <div>-</div>
+                }
+              },
             },
             {
               header: '过期时间',
-              cell: ({row}) => format(row.original.expired_at, 'yyyy-MM-dd HH:mm:ss'),
+              cell: ({row}) => {
+                const timeValue = row.original.expired_at
+                if (!timeValue) return <div>-</div>
+
+                try {
+                  const date = new Date(timeValue)
+                  if (isNaN(date.getTime())) return <div>-</div>
+                  return <div>{format(date, 'yyyy-MM-dd HH:mm:ss')}</div>
+                }
+                catch {
+                  return <div>-</div>
+                }
+              },
             },
           ]}
         />

src/app/admin/record/page.tsx

@@ -15,6 +15,7 @@ import DatePicker from '@/components/date-picker'
 import {Button} from '@/components/ui/button'
 import {EraserIcon, SearchIcon} from 'lucide-react'
 import {pageBatch} from '@/actions/batch'
+import {Input} from '@/components/ui/input'
 
 export type RecordPageProps = {}
 
@@ -34,6 +35,7 @@ export default function RecordPage(props: RecordPageProps) {
   const filterSchema = z.object({
     time_start: z.date().optional(),
     time_end: z.date().optional(),
+    resource_no: z.string().optional(),
   })
   type FilterSchema = z.infer<typeof filterSchema>
 
@@ -42,6 +44,7 @@ export default function RecordPage(props: RecordPageProps) {
     defaultValues: {
       time_start: undefined,
       time_end: undefined,
+      resource_no: '',
     },
   })
 
@@ -53,7 +56,9 @@ export default function RecordPage(props: RecordPageProps) {
       const result = await pageBatch({
         page,
         size,
-        ...filter,
+        time_start: filter.time_start,
+        time_end: filter.time_end,
+        resource_no: filter.resource_no || undefined,
       })
 
       if (result.success && result.data) {
@@ -88,12 +93,22 @@ export default function RecordPage(props: RecordPageProps) {
       <section className="flex justify-between">
         <div></div>
         <Form form={filterForm} handler={filterHandler} className="flex-auto flex flex-wrap gap-4 items-end">
+          <FormField name="resource_no" label={<span className="text-sm">套餐编号</span>}>
+            {({id, field}) => (
+              <Input
+                {...field}
+                id={id}
+                className="h-9"
+                value={field.value ?? ''}
+              />
+            )}
+          </FormField>
           <fieldset className="flex flex-col gap-2 items-start">
             <div>
-              <legend className="block text-sm">提取时间</legend>
+              <legend className="block text-sm">过期时间</legend>
             </div>
             <div className="flex gap-1 items-center">
-              <FormField<FilterSchema, 'time_start'> name="time_start">
+              <FormField<FilterSchema, 'time_start'> name="time_start" >
                 {({field}) => (
                   <DatePicker
                     placeholder="选择开始时间"
@@ -144,6 +159,10 @@ export default function RecordPage(props: RecordPageProps) {
           onSizeChange: size => fetchRecords(1, size),
         }}
         columns={[
+          {
+            header: '套餐编号',
+            accessorKey: 'resource.resource_no',
+          },
           {
             header: '批次号',
             cell: ({row}) => <div>{row.original.batch_no}</div>,
@@ -174,11 +193,6 @@ export default function RecordPage(props: RecordPageProps) {
             cell: ({row}) => <div>{row.original.count}</div>,
             accessorKey: 'count',
           },
-          // {
-          //   header: '资源数量',
-          //   cell: ({row}) => <div>{row.original.resource_id}</div>,
-          //   accessorKey: 'resource_id',
-          // },
           {
             header: '提取时间',
             cell: ({row}) => {

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

@@ -29,7 +29,7 @@ export default function ResourceFilter({form, onSubmit, onReset}: ResourceFilter
   const handler = form.handleSubmit(onSubmit)
 
   return (
-    <Form form={form} handler={handler} className="flex items-end gap-4 flex-wrap">
+    <Form form={form} handler={handler} className="flex-auto flex flex-wrap gap-4 items-end">
       <FormField name="resource_no" label={<span className="text-sm">套餐编号</span>}>
         {({id, field}) => (
           <Input {...field} id={id} className="h-9"/>

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

@@ -186,7 +186,7 @@ export default function ResourceList({resourceType}: ResourceListProps) {
           const live = resourceKey === 'long'
             ? (row.original as Resource<2>).long.live
             : (row.original as Resource<1>).short.live
-          return <span>{isLong ? `${live}小时` : `${live}分钟`}</span>
+          return <span>{isLong ? `${live}分钟` : `${live}分钟`}</span>
         },
       },
       {

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

@@ -44,7 +44,7 @@ export function ExpireBadge({expireAt}: {expireAt: Date}) {
 // 格式化日期
 export function formatDateTime(date: Date | null | undefined) {
   if (!date) return '-'
-  return format(date, 'yyyy-MM-dd HH:mm')
+  return format(date, 'yyyy-MM-dd HH:mm:ss')
 }
 
 // 计算今日使用量

src/app/admin/whitelist/page.tsx

@@ -269,7 +269,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
             header: `备注`, accessorKey: 'remark',
           },
           {
-            header: `添加时间`, cell: ({row}) => format(parseISO(row.original.created_at), 'yyyy-MM-dd HH:mm'),
+            header: `添加时间`, cell: ({row}) => format(parseISO(row.original.created_at), 'yyyy-MM-dd HH:mm:ss'),
           },
           {
             id: 'actions', header: `操作`, cell: ({row}) => (

src/app/globals.css

@@ -156,8 +156,25 @@
   }
 }
 
-/* highlight.js 样式覆盖 */
-pre code.hljs {
-    background: inherit;
-    padding: 0;
+/* highlight.js 样式覆盖 - 确保代码块高亮在前台正常显示 */
+.prose pre {
+  background: #2b2b2b;
+  color: #abb2bf;
+  border-radius: 0.5rem;
+  padding: 1rem 1.25rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.prose pre code {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+}
+
+.prose pre code.hljs {
+  background: inherit;
+  padding: 0;
 }

src/app/layout.tsx

@@ -1,19 +1,71 @@
 import './globals.css'
 import {ReactNode} from 'react'
-import {Metadata} from 'next'
+import {Metadata, Viewport} from 'next'
 import {Toaster} from '@/components/ui/sonner'
 import Effects from '@/app/effects'
 import {ProfileStoreProvider} from '@/components/stores/profile'
 import {LayoutStoreProvider} from '@/components/stores/layout'
 import {ClientStoreProvider} from '@/components/stores/client'
 import {getProfile} from '@/actions/auth'
-import Script from 'next/script'
 import {AppStoreProvider} from '@/components/stores/app'
 import {getApiUrl} from '@/actions/base'
+import {siteConfig} from '@/config/site'
+import {JsonLd} from '@/components/seo/json-ld'
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  themeColor: '#3b82f6',
+}
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
-    title: '蓝狐代理',
+    metadataBase: new URL(siteConfig.url),
+    title: {
+      default: siteConfig.name,
+      template: `%s`,
+    },
+    description: siteConfig.description,
+    keywords: siteConfig.keywords,
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        'index': true,
+        'follow': true,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
+    openGraph: {
+      type: 'website',
+      locale: siteConfig.locale,
+      url: siteConfig.url,
+      siteName: siteConfig.name,
+      title: siteConfig.name,
+      description: siteConfig.description,
+      images: [
+        {
+          url: siteConfig.ogImage.url,
+          width: siteConfig.ogImage.width,
+          height: siteConfig.ogImage.height,
+          alt: siteConfig.name,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: siteConfig.name,
+      description: siteConfig.description,
+      images: [siteConfig.ogImage.url],
+    },
+    alternates: {
+      canonical: siteConfig.url,
+    },
+    icons: {
+      icon: '/favicon.ico',
+    },
   }
 }
 
@@ -27,6 +79,16 @@ export default async function RootLayout(props: Readonly<{
           <Effects>{props.children}</Effects>
         </StoreProviders>
         <Toaster position="top-center" richColors expand/>
+        <JsonLd
+          schema={{
+            '@context': 'https://schema.org',
+            '@type': 'Organization',
+            '@id': `${siteConfig.url}/#organization`,
+            'name': siteConfig.name,
+            'url': siteConfig.url,
+            'description': siteConfig.description,
+          }}
+        />
       </body>
     </html>
   )

src/app/manifest.ts

@@ -0,0 +1,21 @@
+import {MetadataRoute} from 'next'
+import {siteConfig} from '@/config/site'
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: siteConfig.name,
+    short_name: siteConfig.shortName,
+    description: siteConfig.description,
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#ffffff',
+    theme_color: '#3b82f6',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: '48x48',
+        type: 'image/x-icon',
+      },
+    ],
+  }
+}

src/app/robots.ts

@@ -0,0 +1,18 @@
+import {MetadataRoute} from 'next'
+import {siteConfig} from '@/config/site'
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: [
+        '/api/',
+        '/admin/',
+        '/profile/',
+        '/settings/',
+      ],
+    },
+    sitemap: `${siteConfig.url}/sitemap.xml`,
+  }
+}

src/app/sitemap.ts

@@ -0,0 +1,178 @@
+import {MetadataRoute} from 'next'
+import {siteConfig} from '@/config/site'
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const baseUrl = siteConfig.url
+  const now = new Date()
+
+  return [
+    {
+      url: baseUrl,
+      lastModified: now,
+      changeFrequency: 'daily',
+      priority: 1.0,
+    },
+    {
+      url: `${baseUrl}/product`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.9,
+    },
+    {
+      url: `${baseUrl}/collect`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.8,
+    },
+    {
+      url: `${baseUrl}/custom`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/data-capture`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/e-commerce`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/market-research`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/seo-optimization`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/social-media`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/advertising`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/account-management`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/network-testing`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/docs`,
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.6,
+    },
+    {
+      url: `${baseUrl}/docs/product/city-lines`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/faqs/faq-general`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/faqs/faq-billing`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/client/android-proxy`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/client/browser-proxy`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/client/ios-proxy`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/client/windows10-proxy`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/news/news-announce`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/news/news-latest`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/operation/extract-link`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/operation/payment-records`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/operation/profile-settings`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/operation/verify-guide`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/docs/operation/whitelist-guide`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/login`,
+      lastModified: now,
+      changeFrequency: 'monthly',
+      priority: 0.3,
+    },
+  ]
+}

src/components/composites/extract/index.tsx

@@ -11,28 +11,27 @@ import {Alert, AlertTitle} from '@/components/ui/alert'
 import {ArrowRight, Box, CircleAlert, CopyIcon, ExternalLinkIcon, LinkIcon, Loader, Plus, Timer} from 'lucide-react'
 import {memo, ReactNode, Suspense, use, useEffect, useRef, useState} from 'react'
 import {useStatus} from '@/lib/states'
-import {allResource} from '@/actions/resource'
+import {allResource, getAreaList} from '@/actions/resource'
 import {Resource} from '@/lib/models'
 import {format, intlFormatDistance} from 'date-fns'
 import {toast} from 'sonner'
 import {merge} from '@/lib/utils'
 import {Combobox} from '@/components/ui/combobox'
-import cities from './_assets/cities.json'
 import ExtractDocs from '@/app/(home)/docs/(product)/api-docs/page.md'
 import Link from 'next/link'
 import {useProfileStore} from '@/components/stores/profile'
 
 const schema = z.object({
-  resource: z.number({required_error: '请选择套餐'}),
+  resource: z.string({required_error: '请选择套餐'}),
   prov: z.string().optional(),
   city: z.string().optional(),
   regionType: z.enum(['unlimited', 'specific']).default('unlimited'),
-  isp: z.enum(['all', '1', '2', '3'], {required_error: '请选择运营商'}),
+  // isp: 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: '请选择去重选项'}),
+  // distinct: z.enum(['1', '0'], {required_error: '请选择去重选项'}),
   format: z.enum(['text', 'json'], {required_error: '请选择导出格式'}),
-  hostFormat: z.enum(['domain', 'ip'], {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),
@@ -49,12 +48,12 @@ export default function Extract(props: ExtractProps) {
     resolver: zodResolver(schema),
     defaultValues: {
       regionType: 'unlimited',
-      isp: 'all',
+      // isp: 'all',
       proto: 'all',
       authType: '1',
       count: 1,
-      distinct: '1',
-      hostFormat: 'domain',
+      // distinct: '1',
+      // hostFormat: 'ip',
       format: 'text',
       breaker: '13,10',
       separator: '124',
@@ -73,20 +72,6 @@ export default function Extract(props: ExtractProps) {
       )}
     >
       <CardSection>
-        {/* <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>
-          </span>
-          <Link
-            href="/admin/whitelist"
-            className="flex-none  text-orange-600 font-medium ml-2 flex gap-0.5 items-center"
-          >
-            <span>添加白名单</span>
-            <ArrowRight className="size-4"/>
-          </Link>
-        </Alert> */}
-
         <FormFields/>
       </CardSection>
 
@@ -123,7 +108,7 @@ const FormFields = memo(() => {
       <SelectRegion/>
 
       {/* 运营商筛选 */}
-      <FormField name="isp" label="运营商筛选" classNames={{label: 'max-md:text-sm'}}>
+      {/* <FormField name="isp" label="运营商筛选" classNames={{label: 'max-md:text-sm'}}>
         {({id, field}) => (
           <RadioGroup
             onValueChange={field.onChange}
@@ -148,7 +133,7 @@ const FormFields = memo(() => {
             </FormLabel>
           </RadioGroup>
         )}
-      </FormField>
+      </FormField> */}
 
       {/* 协议类型 */}
       <FormField name="proto" label="协议类型" classNames={{label: 'max-md:text-sm'}}>
@@ -197,7 +182,7 @@ const FormFields = memo(() => {
       </FormField>
 
       {/* 去重选项 */}
-      <FormField name="distinct" className="md:max-w-[calc(160px*2+1rem)]" label="去重选项" classNames={{label: 'max-md:text-sm'}}>
+      {/* <FormField name="distinct" className="md:max-w-[calc(160px*2+1rem)]" label="去重选项" classNames={{label: 'max-md:text-sm'}}>
         {({id, field}) => (
           <RadioGroup
             onValueChange={field.onChange}
@@ -213,7 +198,7 @@ const FormFields = memo(() => {
             </FormLabel>
           </RadioGroup>
         )}
-      </FormField>
+      </FormField> */}
 
       {/* 导出格式 */}
       <FormField name="format" className="md:max-w-[calc(160px*2+1rem)]" label="导出格式" classNames={{label: 'max-md:text-sm'}}>
@@ -236,24 +221,24 @@ const FormFields = memo(() => {
       </FormField>
 
       {/* 主机格式 */}
-      <FormField name="hostFormat" className="md:max-w-[calc(160px*2+1rem)]" label="主机格式" classNames={{label: 'max-md:text-sm'}}>
+      {/* <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>
+            <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>
           </RadioGroup>
         )}
-      </FormField>
+      </FormField> */}
 
       {/* 分隔符 */}
       <FormField name="separator" className="md:max-w-[calc(160px*3+1rem*2)]" label="分隔符" classNames={{label: 'max-md:text-sm'}}>
@@ -388,7 +373,7 @@ function SelectResource() {
       {({field}) => (
         <Select
           value={field.value ? String(field.value) : undefined}
-          onValueChange={value => field.onChange(Number(value))}
+          onValueChange={value => field.onChange(value)}
         >
           <SelectTrigger className="min-h-10 h-auto w-full">
             <SelectValue placeholder="选择套餐"/>
@@ -412,7 +397,7 @@ function SelectResource() {
                 {resources.map(resource => (
                   <SelectItem
                     key={resource.id}
-                    value={String(resource.id)}
+                    value={String(resource.resource_no)}
                     className="p-3">
                     <div className="flex flex-col gap-2 w-72">
                       {resource.type === 1 && resource.short.type === 1 && (
@@ -427,7 +412,7 @@ function SelectResource() {
                           <div className="flex justify-between gap-2 text-xs text-weak">
                             <span>
                               到期时间：
-                              {format(resource.short.expire_at, 'yyyy-MM-dd HH:mm')}
+                              {format(resource.short.expire_at, 'yyyy-MM-dd HH:mm:ss')}
                             </span>
                             <span>{intlFormatDistance(resource.short.expire_at, new Date())}</span>
                           </div>
@@ -469,7 +454,7 @@ function SelectResource() {
                           <div className="flex justify-between gap-2 text-xs text-weak">
                             <span>
                               到期时间：
-                              {format(resource.long.expire_at, 'yyyy-MM-dd HH:mm')}
+                              {format(resource.long.expire_at, 'yyyy-MM-dd HH:mm:ss')}
                             </span>
                             <span>{intlFormatDistance(resource.long.expire_at, new Date())}</span>
                           </div>
@@ -511,13 +496,62 @@ function SelectResource() {
   )
 }
 
+type AreaItem = {
+  id: number
+  parent_id: number
+  level: number
+  name: string
+  created_at: string
+  updated_at: string
+}
+
+function AreaTree(flatList: AreaItem[]) {
+  const provinces = flatList.filter(item => item.level === 1)
+  const cities = flatList.filter(item => item.level === 2)
+
+  return provinces.map(prov => ({
+    value: String(prov.id),
+    label: prov.name,
+    children: cities
+      .filter(city => city.parent_id === prov.id)
+      .map(city => ({
+        value: String(city.id),
+        label: city.name,
+      })),
+  }))
+}
+
 function SelectRegion() {
   const {control, setValue} = useFormContext<Schema>()
   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')
+  const [options, setOptions] = useState<ReturnType<typeof AreaTree>>([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (regionType === 'specific') {
+      const fetchData = async () => {
+        setLoading(true)
+        try {
+          const req = await getAreaList({})
+          console.log(req, 'req')
+
+          if (req.success && req.data) {
+            setOptions(AreaTree(req.data))
+          }
+        }
+        catch (error) {
+          toast.error('无法选择区域')
+        }
+        finally {
+          setLoading(false)
+        }
+      }
+
+      fetchData()
+    }
+  }, [regionType])
 
   return (
     <div className="flex flex-col gap-4 md:max-w-[calc(160px*2+1rem)]">
@@ -547,15 +581,22 @@ function SelectRegion() {
       </FormField>
 
       {regionType === 'specific' && (
-        <Combobox
-          placeholder="请选择地区"
-          options={cities.options}
-          value={[prov || '', city || '']}
-          onChange={(value) => {
-            setValue('prov', value[0])
-            setValue('city', value[1])
-          }}
-        />
+        loading ? (
+          <div className="flex gap-2 items-center">
+            <Loader className="animate-spin" size={16}/>
+            <span className="text-sm text-weak">加载地区数据中...</span>
+          </div>
+        ) : (
+          <Combobox
+            placeholder="请选择地区"
+            options={options}
+            value={[prov || '', city || '']}
+            onChange={(value) => {
+              setValue('prov', value[0] || '')
+              setValue('city', value[1] || '')
+            }}
+          />
+        )
       )}
     </div>
   )
@@ -670,19 +711,20 @@ function ApplyLink() {
 }
 
 function link(values: Schema) {
-  const {resource, prov, city, isp, proto, authType, distinct, format: formatType, hostFormat, separator, breaker, count} = values
+  const {resource, prov, city, proto, authType, format: formatType, separator, breaker, count} = values
+  console.log(values, 'values')
 
   const sp = new URLSearchParams()
   if (resource) sp.set('i', String(resource))
   if (authType) sp.set('t', authType)
   if (proto != 'all') sp.set('x', proto)
-  if (prov) sp.set('a', prov)
+  if (prov) sp.set('b', prov)
   if (city) sp.set('b', city)
 
-  if (isp != 'all') sp.set('s', isp)
-  sp.set('d', distinct)
+  sp.set('s', 'all')
+  sp.set('d', '1')
   sp.set('rt', formatType)
-  sp.set('rh', hostFormat)
+  sp.set('rh', 'ip')
   sp.set('rs', separator)
   sp.set('rb', breaker)
   sp.set('n', String(count))
@@ -696,9 +738,9 @@ function name(resource: Resource) {
     // 短效套餐
     switch (resource.short.type) {
     case 1:
-      return `短效包时 ${resource.short.live} 分钟`
+      return `${resource.short?.sku?.name}`
     case 2:
-      return `短效包量 ${resource.short.live} 分钟`
+      return `${resource.short?.sku?.name}`
     }
     break
 
@@ -706,9 +748,9 @@ function name(resource: Resource) {
     // 长效套餐
     switch (resource.long.type) {
     case 1:
-      return `长效包时 ${resource.long.live} 小时`
+      return `${resource.long?.sku?.name}`
     case 2:
-      return `长效包量 ${resource.long.live} 小时`
+      return `${resource.long?.sku?.name}`
     }
     break
   }

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

@@ -8,7 +8,7 @@ import {payClose} from '@/actions/resource'
 import {useEffect} from 'react'
 import {UniversalDesktopPayment} from './universal-desktop-payment'
 import {useAppStore} from '@/components/stores/app'
-
+import {toast} from 'sonner'
 export type PaymentModalProps = {
   onConfirm: (showFail: boolean) => Promise<void>
   onClose: () => void
@@ -17,45 +17,49 @@ export type PaymentModalProps = {
 export function PaymentModal(props: PaymentModalProps) {
   // 手动关闭时的处理
   const handleClose = async () => {
-    // try {
-    //   const res = await payClose({
-    //     trade_no: props.inner_no,
-    //     method: props.method,
-    //   })
-    //   if (!res.success) {
-    //     throw new Error(res.message)
-    //   }
-    // }
-    // catch (error) {
-    //   console.error('关闭订单失败:', error)
-    // }
-    // finally {
-    props.onClose?.()
-    // }
+    try {
+      const res = await payClose({
+        trade_no: props.inner_no,
+        method: props.method,
+      })
+
+      if (!res.success) {
+        throw new Error(res.message || '请求失败')
+      }
+      if (res.data.status === 1) {
+        toast.success('已支付成功！')
+      }
+    }
+    catch (error) {
+      console.error('关闭订单失败:', error)
+    }
+    finally {
+      props.onClose?.()
+    }
   }
 
   // SSE处理方式检查支付状态
-  const apiUrl = useAppStore('apiUrl')
-  useEffect(() => {
-    const eventSource = new EventSource(
-      `${apiUrl}/api/trade/check?trade_no=${props.inner_no}&method=${props.method}`,
-    )
-    eventSource.onmessage = async (event) => {
-      switch (event.data) {
-      case '1':
-        props.onConfirm?.(true)
-      case '2':
-        props.onClose?.()
-      }
-    }
-    eventSource.onerror = (error) => {
-      console.error('SSE 连接错误:', error)
-    }
+  // const apiUrl = useAppStore('apiUrl')
+  // useEffect(() => {
+  //   const eventSource = new EventSource(
+  //     `${apiUrl}/api/trade/check?trade_no=${props.inner_no}&method=${props.method}`,
+  //   )
+  //   eventSource.onmessage = async (event) => {
+  //     switch (event.data) {
+  //     case '1':
+  //       props.onConfirm?.(true)
+  //     case '2':
+  //       props.onClose?.()
+  //     }
+  //   }
+  //   eventSource.onerror = (error) => {
+  //     console.error('SSE 连接错误:', error)
+  //   }
 
-    return () => {
-      eventSource.close()
-    }
-  }, [apiUrl, props])
+  //   return () => {
+  //     eventSource.close()
+  //   }
+  // }, [apiUrl, props])
 
   return (
     <Dialog

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

@@ -9,7 +9,7 @@ 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, getPurchaseSkuCountMin, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
+import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuCountMin, getPurchaseSkuDiscount, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
 
 export default function Center({skuData}: {
   skuData: PurchaseSkuData
@@ -18,7 +18,7 @@ export default function Center({skuData}: {
   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']
-  const {modeList, priceMap} = skuData
+  const {modeList, priceMap, discountMap} = skuData
   const liveList = type === '1'
     ? getAvailablePurchaseLives(skuData, {mode: type, expire})
     : getAvailablePurchaseLives(skuData, {mode: type})
@@ -134,7 +134,7 @@ export default function Center({skuData}: {
                 setValue('expire', nextExpireList[0])
               }
             }}
-            className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
+            className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
             {liveList.map((live) => {
               const priceExpire = type === '1' && !hasPurchaseSku(skuData, {mode: type, live, expire})
                 ? getAvailablePurchaseExpires(skuData, {mode: type, live})[0] || '0'
@@ -144,6 +144,11 @@ export default function Center({skuData}: {
                 live,
                 expire: priceExpire,
               })
+              const discount = getPurchaseSkuDiscount(discountMap, {
+                mode: type,
+                live,
+                expire: priceExpire,
+              })
               return (
                 <FormOption
                   key={live}
@@ -151,6 +156,8 @@ export default function Center({skuData}: {
                   value={live}
                   label={`${Number(live) / 60} 小时`}
                   description={price && `￥${price}/IP`}
+                  price={price}
+                  discount={discount}
                   compare={field.value}
                 />
               )

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('1') ? '1' : '2'
+  const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
   const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
   const defaultExpire = defaultMode === '1'
     ? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
@@ -46,7 +46,7 @@ export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
   return (
     <Form form={form} className="flex flex-col lg:flex-row gap-4">
       <Center skuData={skuData}/>
-      <PurchaseSidePanel kind="long"/>
+      <PurchaseSidePanel kind="long" skuData={skuData}/>
     </Form>
   )
 }

src/components/composites/purchase/option.tsx

@@ -9,12 +9,37 @@ export type FormOptionProps = {
   value: string
   label?: string
   description?: string
+  price?: string
+  discount?: number
   compare: string
   className?: string
   children?: ReactNode
 }
 
 export default function FormOption(props: FormOptionProps) {
+  // 安全地解析价格
+  const priceNum = props.price ? parseFloat(props.price) : NaN
+  const isValidPrice = !isNaN(priceNum) && priceNum > 0
+
+  const discount = typeof props.discount === 'number' ? props.discount : undefined
+  const hasDiscount = isValidPrice && discount !== undefined && discount < 100
+  const discountedPrice = hasDiscount ? priceNum * discount / 100 : null
+
+  const formatPrice = (price: number | string): string => {
+    const num = typeof price === 'string' ? parseFloat(price) : price
+    // 如果是 NaN 或无效值，返回空字符串
+    if (isNaN(num) || !isFinite(num)) return ''
+
+    const str = num.toString()
+    if (!str.includes('.')) return str
+
+    const decimal = str.split('.')[1]
+    if (/^0+$/.test(decimal)) return Math.floor(num).toString()
+    if (decimal.length <= 2) return str
+
+    return num.toFixed(4).replace(/\.?0+$/, '')
+  }
+
   return (
     <>
       <FormLabel
@@ -28,7 +53,24 @@ export default function FormOption(props: FormOptionProps) {
         {props.children ? props.children : (
           <>
             <span>{props.label}</span>
-            {props.description && <p className="text-sm text-gray-500">{props.description}</p>}
+            {props.description && !isValidPrice && (
+              <p className="text-sm text-gray-500">{props.description}</p>
+            )}
+            {isValidPrice && (
+              <div className="flex items-center flex-col">
+                {hasDiscount ? (
+                  <>
+                    <p className="text-sm  font-medium">￥{formatPrice(discountedPrice!)}/IP</p>
+                    <p className="text-sm text-gray-500 line-through">原价:{formatPrice(props.price!)}/IP</p>
+                    {/* <span className="text-xs font-medium text-orange-600 bg-orange-50 px-1.5 py-0.5 rounded-full">
+                      {props.discount}折
+                    </span> */}
+                  </>
+                ) : (
+                  <p className="text-sm">￥{formatPrice(props.price!)}/IP</p>
+                )}
+              </div>
+            )}
           </>
         )}
       </FormLabel>

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

@@ -34,16 +34,6 @@ export function BillingMethodField(props: {
           }}
           className="flex gap-4 max-md:flex-col"
         >
-
-          {props.modeList.includes('1') && (
-            <FormOption
-              id={`${id}-1`}
-              value="1"
-              label="包时套餐"
-              description="适用于每日提取量稳定的业务场景"
-              compare={field.value}
-            />
-          )}
           {props.modeList.includes('2') && (
             <FormOption
               id={`${id}-2`}
@@ -53,6 +43,15 @@ export function BillingMethodField(props: {
               compare={field.value}
             />
           )}
+          {props.modeList.includes('1') && (
+            <FormOption
+              id={`${id}-1`}
+              value="1"
+              label="包时套餐"
+              description="适用于每日提取量稳定的业务场景"
+              compare={field.value}
+            />
+          )}
         </RadioGroup>
       )}
     </FormField>

src/components/composites/purchase/shared/feature-list.tsx

@@ -11,7 +11,7 @@ const defaultFeatures = [
   'IP时效3-30分钟(可定制)',
   'IP资源定期筛选',
   '包量/包时计费方式',
-  '每日去重量：500万',
+  '每日去重量：50万',
 ]
 
 export function FeatureList(props: {

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

@@ -11,10 +11,11 @@ import {FieldPayment} from './field-payment'
 import {buildPurchaseResource, PurchaseKind, PurchaseSelection} from './resource'
 import {getPrice, getPriceHome} from '@/actions/resource'
 import {ExtraResp} from '@/lib/api'
-import {formatPurchaseLiveLabel} from './sku'
+import {formatPurchaseLiveLabel, getPurchaseSkuCountMin, PurchaseSkuData} from './sku'
 import {User} from '@/lib/models'
 import {PurchaseFormValues} from './form-values'
 import {IdCard} from 'lucide-react'
+import {Loader2} from 'lucide-react'
 
 const emptyPrice: ExtraResp<typeof getPrice> = {
   price: '0.00',
@@ -24,6 +25,7 @@ const emptyPrice: ExtraResp<typeof getPrice> = {
 
 export type PurchaseSidePanelProps = {
   kind: PurchaseKind
+  skuData: PurchaseSkuData
 }
 
 export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
@@ -43,7 +45,7 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
     expire,
     dailyLimit,
   }
-  const priceData = usePurchasePrice(profile, selection)
+  const {priceData, isLoading, isError} = usePurchasePrice(profile, selection, props.skuData)
   const {price, actual: discountedPrice = '0.00'} = priceData
   const totalDiscount = getTotalDiscount(price, discountedPrice)
   const hasDiscount = Number(totalDiscount) > 0
@@ -70,9 +72,13 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
             </li>
             <li className="flex justify-between items-center">
               <span className="text-sm text-gray-500">原价</span>
-              <span className="text-sm">￥{price}</span>
+              { isError ? (
+                <Loader2 className="h-4 w-4 animate-spin text-gray-400"/>
+              ) : (
+                <span className="text-sm">￥{price}</span>
+              )}
             </li>
-            {hasDiscount && (
+            {hasDiscount && !isError && (
               <li className="flex justify-between items-center">
                 <span className="text-sm text-gray-500">总折扣</span>
                 <span className="text-sm">-￥{totalDiscount}</span>
@@ -91,9 +97,13 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
             </li>
             <li className="flex justify-between items-center">
               <span className="text-sm text-gray-500">原价</span>
-              <span className="text-sm">￥{price}</span>
+              { isError ? (
+                <Loader2 className="h-4 w-4 animate-spin text-gray-400"/>
+              ) : (
+                <span className="text-sm">￥{price}</span>
+              )}
             </li>
-            {hasDiscount && (
+            {hasDiscount && !isError && (
               <li className="flex justify-between items-center">
                 <span className="text-sm text-gray-500">总折扣</span>
                 <span className="text-sm">-￥{totalDiscount}</span>
@@ -105,7 +115,11 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
       <div className="border-b border-gray-200"></div>
       <p className="flex justify-between items-center">
         <span>实付价格</span>
-        <span className="text-xl text-orange-500">￥{discountedPrice}</span>
+        { isError ? (
+          <Loader2 className="h-5 w-5 animate-spin text-orange-500"/>
+        ) : (
+          <span className="text-xl text-orange-500">￥{discountedPrice}</span>
+        )}
       </p>
       {profile ? (
         profile.id_type !== 0 ? (
@@ -141,15 +155,29 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
   )
 }
 
-function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
+function usePurchasePrice(profile: User | null, selection: PurchaseSelection, skuData: PurchaseSkuData) {
   const [priceData, setPriceData] = useState<ExtraResp<typeof getPrice>>(emptyPrice)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isError, setIsError] = useState(false)
   const requestIdRef = useRef(0)
   const {kind, mode, live, quota, expire, dailyLimit} = selection
 
   useEffect(() => {
     const requestId = ++requestIdRef.current
 
+    const expireValue = mode === '1' ? expire : '0'
+    const countMin = getPurchaseSkuCountMin(skuData, {mode, live, expire: expireValue})
+    const quantity = mode === '1' ? dailyLimit : quota
+    if (countMin > 0 && quantity < countMin) {
+      setIsLoading(false)
+      setIsError(false)
+      return
+    }
+
     const loadPrice = async () => {
+      setIsLoading(true)
+      setIsError(false)
+
       try {
         const resource = buildPurchaseResource({
           kind,
@@ -159,6 +187,7 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
           expire,
           dailyLimit,
         })
+
         const response = profile
           ? await getPrice(resource)
           : await getPriceHome(resource)
@@ -166,16 +195,17 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
         if (requestId !== requestIdRef.current) {
           return
         }
-
         if (!response.success) {
-          throw new Error(response.message || '获取价格失败')
+          throw new Error(response.message)
+        }
+        if (response.success) {
+          setPriceData({
+            price: response.data.price,
+            actual: response.data.actual ?? response.data.price ?? '0.00',
+            discounted: response.data.discounted ?? '0.00',
+          })
+          setIsError(false)
         }
-
-        setPriceData({
-          price: response.data.price,
-          actual: response.data.actual ?? response.data.price ?? '0.00',
-          discounted: response.data.discounted ?? '0.00',
-        })
       }
       catch (error) {
         if (requestId !== requestIdRef.current) {
@@ -184,13 +214,19 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
 
         console.error('获取价格失败:', error)
         setPriceData(emptyPrice)
+        setIsError(true)
+      }
+      finally {
+        if (requestId === requestIdRef.current) {
+          setIsLoading(false)
+        }
       }
     }
 
     loadPrice()
-  }, [dailyLimit, expire, kind, live, mode, profile, quota])
+  }, [dailyLimit, expire, kind, live, mode, profile, quota, skuData])
 
-  return priceData
+  return {priceData, isLoading, isError}
 }
 
 function getTotalDiscount(price: string, discountedPrice: string) {

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

@@ -8,12 +8,14 @@ export type PurchaseSkuItem = {
   expire: string
   price: string
   count_min: number
+  discount: number
 }
 
 export type PurchaseSkuData = {
   items: PurchaseSkuItem[]
   priceMap: Map<string, string>
   countMinMap: Map<string, number>
+  discountMap: Map<string, number>
   modeList: PurchaseMode[]
   liveList: string[]
   expireList: string[]
@@ -27,6 +29,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 discountMap = new Map<string, number>()
   const modeSet = new Set<PurchaseMode>()
   const liveSet = new Set<number>()
   const expireSet = new Set<number>()
@@ -51,6 +54,7 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
     const countMin = typeof sku.count_min === 'number' ? sku.count_min : Number(sku.count_min) || 0
     countMinMap.set(code, countMin)
 
+    const skuDiscount = sku.discount ?? 100
     items.push({
       code,
       mode,
@@ -58,8 +62,10 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
       expire: expireValue,
       price: sku.price,
       count_min: countMin,
+      discount: skuDiscount,
     })
     priceMap.set(code, sku.price)
+    discountMap.set(code, skuDiscount)
     modeSet.add(mode)
 
     liveSet.add(live)
@@ -82,6 +88,7 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
     items,
     priceMap,
     countMinMap,
+    discountMap,
     modeList: (['2', '1'] as const).filter(mode => modeSet.has(mode)),
     liveList: sortNumericValues(liveSet),
     expireList: sortNumericValues(expireSet),
@@ -157,6 +164,14 @@ export function getPurchaseSkuPrice(priceMap: Map<string, string>, props: {
   return priceMap.get(getPurchaseSkuKey(props))
 }
 
+export function getPurchaseSkuDiscount(discountMap: Map<string, number>, props: {
+  mode: PurchaseMode
+  live: string
+  expire: string
+}) {
+  return discountMap.get(getPurchaseSkuKey(props))
+}
+
 export function formatPurchaseLiveLabel(live: string, kind: PurchaseKind) {
   const minutes = Number(live)
 

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

@@ -9,7 +9,7 @@ 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, getPurchaseSkuCountMin, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
+import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuCountMin, getPurchaseSkuDiscount, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
 
 export default function Center({
   skuData,
@@ -20,7 +20,7 @@ export default function Center({
   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']
-  const {modeList, priceMap} = skuData
+  const {modeList, priceMap, discountMap} = skuData
   const liveList = type === '1'
     ? getAvailablePurchaseLives(skuData, {mode: type, expire})
     : getAvailablePurchaseLives(skuData, {mode: type})
@@ -135,7 +135,7 @@ export default function Center({
                 setValue('expire', nextExpireList[0])
               }
             }}
-            className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
+            className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
             {liveList.map((live) => {
               const priceExpire = type === '1' && !hasPurchaseSku(skuData, {mode: type, live, expire})
                 ? getAvailablePurchaseExpires(skuData, {mode: type, live})[0] || '0'
@@ -145,6 +145,11 @@ export default function Center({
                 live,
                 expire: priceExpire,
               })
+              const discount = getPurchaseSkuDiscount(discountMap, {
+                mode: type,
+                live,
+                expire: priceExpire,
+              })
               const minutes = Number(live)
               const hours = minutes / 60
               const label = minutes % 60 === 0 ? `${hours} 小时` : `${minutes} 分钟`
@@ -155,6 +160,8 @@ export default function Center({
                   value={live}
                   label={label}
                   description={price && `￥${price}/IP`}
+                  price={price}
+                  discount={discount}
                   compare={field.value}
                 />
               )

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('1') ? '1' : '2'
+  const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
   const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
   const defaultExpire = defaultMode === '1'
     ? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
@@ -42,11 +42,12 @@ export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
       pay_type: 'balance', // 余额支付
     },
   })
+  console.log(skuData, 'skuData')
 
   return (
     <Form form={form} className="flex flex-col lg:flex-row gap-4">
       <Center skuData={skuData}/>
-      <PurchaseSidePanel kind="short"/>
+      <PurchaseSidePanel kind="short" skuData={skuData}/>
     </Form>
   )
 }

src/components/seo/json-ld.tsx

@@ -0,0 +1,8 @@
+export function JsonLd({schema}: {schema: Record<string, unknown>}) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{__html: JSON.stringify(schema)}}
+    />
+  )
+}

src/components/ui/combobox.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import {CheckIcon, ChevronsUpDown} from 'lucide-react'
+import {CheckIcon, ChevronDown, ChevronRight, ChevronsUpDown} from 'lucide-react'
 
 import {merge} from '@/lib/utils'
 import {Button} from '@/components/ui/button'
@@ -10,7 +10,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
-import {ReactNode, useRef, useState} from 'react'
+import {ReactNode, useState} from 'react'
 import {Input} from '@/components/ui/input'
 
 type ComboboxItem = {
@@ -28,6 +28,7 @@ type ComboboxProps = {
   value?: string[]
   onChange?: (value: string[]) => void
   children?: React.ReactNode
+  searchPlaceholder?: string
 }
 
 export function Combobox(props: ComboboxProps) {
@@ -56,22 +57,51 @@ export function Combobox(props: ComboboxProps) {
   const [wait, setWait] = useState(false)
   const [filter, setFilter] = useState<string>('')
   const [filtered, setFiltered] = useState<ComboboxItem[]>([])
+  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set())
 
-  const onFilter = async () => {
+  const toggleExpand = (key: string) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) {
+        next.delete(key)
+      }
+      else {
+        next.add(key)
+      }
+      return next
+    })
+  }
+
+  const onSearch = async () => {
     if (wait) return
     const cond = filter.trim()
-    console.log('onFilter', cond)
     setWait(true)
     if (cond.length > 0) {
-      setFiltered(mapFilter(JSON.parse(JSON.stringify(props.options)), cond))
+      const result = mapFilter(JSON.parse(JSON.stringify(props.options)), cond)
+      setFiltered(result)
+      setExpandedKeys(collectAllKeys(result))
     }
     else {
       setFiltered(props.options)
+      setExpandedKeys(new Set())
     }
-    console.log('onFilter end')
     setWait(false)
   }
 
+  const collectAllKeys = (items: ComboboxItem[]): Set<string> => {
+    const keys = new Set<string>()
+    const walk = (list: ComboboxItem[]) => {
+      list.forEach((item) => {
+        if (item.children?.length) {
+          keys.add(item.value)
+          walk(item.children)
+        }
+      })
+    }
+    walk(items)
+    return keys
+  }
+
   const mapFilter = (items: ComboboxItem[], cond: string): ComboboxItem[] => {
     const nItems: ComboboxItem[] = []
     items.forEach((item) => {
@@ -97,6 +127,7 @@ export function Combobox(props: ComboboxProps) {
         if (status) {
           setFiltered(props.options)
           setFilter('')
+          setExpandedKeys(new Set())
         }
       }}>
       <PopoverTrigger asChild>
@@ -117,18 +148,18 @@ export function Combobox(props: ComboboxProps) {
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="p-0 rounded-lg w-[var(--radix-popover-trigger-width)] h-[var(--radix-popover-content-available-height)] flex flex-col overflow-hidden"
+        className="p-0 rounded-lg w-(--radix-popover-trigger-width) h-(--radix-popover-content-available-height) flex flex-col overflow-hidden"
         align="start"
         collisionPadding={6}
       >
         <div className="p-2 flex gap-2 flex-none">
           <Input
             className="h-9 placeholder:text-weak placeholder:text-sm"
-            placeholder="搜索地区"
+            placeholder={props.searchPlaceholder || '搜索地区'}
             value={filter}
             onChange={event => setFilter(event.target.value)}
           />
-          <Button className="h-9" onClick={onFilter} disabled={wait}>
+          <Button className="h-9" onClick={onSearch} disabled={wait}>
             搜索
           </Button>
         </div>
@@ -136,11 +167,13 @@ export function Combobox(props: ComboboxProps) {
           <OptionList
             options={filtered}
             value={values}
-            onChange={(value) => {
-              console.log(value.map(item => item.value))
-              props.onChange?.(value.map(item => item.value))
+            expandedKeys={expandedKeys}
+            onToggleExpand={toggleExpand}
+            onChange={(pathValue) => {
+              props.onChange?.(pathValue)
               setOpen(false)
-            }}/>
+            }}
+          />
         </div>
       </PopoverContent>
     </Popover>
@@ -150,51 +183,76 @@ export function Combobox(props: ComboboxProps) {
 function OptionList(props: {
   options: ComboboxItem[]
   value: string[]
-  onChange: (value: ComboboxItem[]) => void
-  path?: ComboboxItem[]
+  expandedKeys: Set<string>
+  onToggleExpand: (key: string) => void
+  onChange: (value: string[]) => void
+  path?: string[]
   depth?: number
 }) {
   const depth = props.depth || 0
-  const parent = props.path || []
-  const indent = depth * 16
+  const parentPath = props.path || []
 
   return (
-    <ul style={{
-      marginLeft: `${indent}px`,
-    }}>
+    <ul>
       {props.options.map((item, i) => {
-        const path = [...parent, item]
-        const pathValue = path.map(item => item.value)
-        const equal = pathValue.join(`.`) === props.value?.join('.')
+        const path = [...parentPath, item.value]
+        const hasChildren = !!item.children?.length
+        const expanded = props.expandedKeys.has(item.value)
+        const isCurrentLevel = path.length === props.value.filter(Boolean).length
+        const isActivePath = path.every((v, idx) => v === props.value[idx])
+
         return (
           <li key={i}>
-            <OptionItem key={`${i}`} item={item} active={equal} onChange={() => props.onChange?.(path)}/>
-            {item.children?.length
-              && <OptionList depth={depth + 1} options={item.children} value={props.value} path={path} onChange={props.onChange}/>
-            }
+            <div
+              className={merge(
+                `transition-colors duration-100 ease-in-out`,
+                `pr-4 py-2 rounded-md`,
+                `flex items-center gap-1`,
+                `hover:bg-muted hover:text-foreground cursor-pointer`,
+                isActivePath ? 'text-foreground' : 'text-muted-foreground',
+              )}
+              style={{paddingLeft: `${depth * 20 + 16}px`}}
+            >
+              {hasChildren ? (
+                <span
+                  className="flex-none cursor-pointer p-0.5 hover:bg-muted rounded shrink-0"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    props.onToggleExpand(item.value)
+                  }}
+                >
+                  {expanded
+                    ? <ChevronDown className="h-4 w-4"/>
+                    : <ChevronRight className="h-4 w-4"/>
+                  }
+                </span>
+              ) : (
+                <span className="w-5 shrink-0"/>
+              )}
+              <span
+                className="flex-1 min-w-0 truncate"
+                onClick={() => props.onChange(path)}
+              >
+                {item.label}
+              </span>
+              {isCurrentLevel && isActivePath && (
+                <CheckIcon className="h-4 w-4 shrink-0"/>
+              )}
+            </div>
+            {hasChildren && expanded && (
+              <OptionList
+                depth={depth + 1}
+                options={item.children!}
+                value={props.value}
+                expandedKeys={props.expandedKeys}
+                onToggleExpand={props.onToggleExpand}
+                onChange={props.onChange}
+                path={path}
+              />
+            )}
           </li>
         )
       })}
     </ul>
   )
 }
-
-function OptionItem(props: {
-  key: string
-  item: ComboboxItem
-  active: boolean
-  onChange?: () => void
-}) {
-  return (
-    <div
-      className={merge(
-        `transition-colors, duration-100 ease-in-out`,
-        `px-4 py-2 text-muted-foreground rounded-md`,
-        `flex justify-between items-center`,
-        `hover:bg-muted hover:text-foreground`,
-      )}
-      onClick={props.onChange}>
-      {props.item.label}
-    </div>
-  )
-}

src/config/site.ts

@@ -0,0 +1,20 @@
+export const siteConfig = {
+  name: '蓝狐代理',
+  shortName: '蓝狐代理',
+  url: (process.env.API_BASE_URL || 'https://lanhuip.com').replace(/\/$/, ''),
+  description: '蓝狐代理 - 稳定、高速、安全的代理服务，提供HTTP代理、SOCKS5代理、动态IP、静态IP、爬虫代理等产品，保护您的隐私，畅游互联网',
+  keywords: ['代理ip', '国内代理ip', 'http代理', '动态ip', '静态ip', '爬虫代理', '独享代理', 'socks5代理'],
+  author: '蓝狐团队',
+  locale: 'zh_CN',
+  social: {
+    twitter: '@lanhuproxy',
+    github: 'lanhu-proxy',
+  },
+  ogImage: {
+    url: '/og-image.jpg',
+    width: 1200,
+    height: 630,
+  },
+}
+
+export type SiteConfig = typeof siteConfig

src/lib/models/article.ts

@@ -0,0 +1,26 @@
+export type ArticleNavGroup = {
+  id: number
+  name: string
+  code: string
+  articles: ArticleNavItem[]
+}
+
+export type ArticleNavItem = {
+  id: number
+  title: string
+  updated_at: string
+}
+
+export type ArticleDetail = {
+  id: number
+  title: string
+  content: string
+  updated_at: string
+  group: ArticleGroupInfo
+}
+
+export type ArticleGroupInfo = {
+  id: number
+  name: string
+  code: string
+}

src/lib/models/models.ts

@@ -104,6 +104,8 @@ export type Channel = {
   expired_at: Date
   host: string
   batch_no: string
+  filter_prov: string
+  filter_city: string
 }
 export type Proxy = {
   id: number

src/lib/models/product-sku.ts

@@ -7,5 +7,6 @@ export type ProductSku = {
   price_min: string
   product_id: number
   discount_id: number
+  discount?: number
   status: number
 }

src/lib/models/resource.ts

@@ -8,6 +8,11 @@ type ResourceShort = {
   used: number
   daily: number
   last_at?: Date
+  sku?: sku
+}
+
+type sku = {
+  name: string
 }
 
 type ResourceLong = {
@@ -20,6 +25,7 @@ type ResourceLong = {
   used: number
   daily: number
   last_at?: Date
+  sku?: sku
 }
 
 export type Resource<T extends 1 | 2 = 1 | 2> = {

src/lib/utils/date.ts

@@ -0,0 +1,21 @@
+export function formatDate(
+  dateStr?: string | null,
+  format: string = 'YYYY-MM-DD',
+  fallback: string = '-',
+): string {
+  if (!dateStr) return fallback
+
+  const date = new Date(dateStr)
+  if (isNaN(date.getTime())) return fallback
+
+  const map: Record<string, string | number> = {
+    YYYY: date.getFullYear(),
+    MM: String(date.getMonth() + 1).padStart(2, '0'),
+    DD: String(date.getDate()).padStart(2, '0'),
+    HH: String(date.getHours()).padStart(2, '0'),
+    mm: String(date.getMinutes()).padStart(2, '0'),
+    ss: String(date.getSeconds()).padStart(2, '0'),
+  }
+
+  return format.replace(/YYYY|MM|DD|HH|mm|ss/g, matched => String(map[matched]))
+}

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,13 +17,16 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "incremental": true,
+    "allowArbitraryExtensions": true,
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
   "include": [
@@ -30,5 +37,7 @@
     ".next/dev/types/**/*.ts",
     "**/*.mts"
   ],
-  "exclude": ["node_modules"]
-}
+  "exclude": [
+    "node_modules"
+  ]
+}