提取IP页面地区筛选数据更新为调用后端接口返回

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

.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.10.0",
+  "version": "1.13.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/balance.ts

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

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

@@ -17,6 +17,7 @@ export async function listChannels(props: {
 }
 
 type CreateChannelsResp = {
+  ip: string
   host: string
   port: string
   username?: string
@@ -28,9 +29,23 @@ 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 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

@@ -110,3 +110,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,19 +22,50 @@ export async function GET(req: NextRequest) {
     if (!count) {
       throw new Error('需要指定通道创建数量')
     }
-    const prov = params.get('a') || undefined
-    const city = params.get('b') || undefined
+    // const prov = params.get('a') || undefined
+    const area_id = params.get('b') || undefined
     const isp = params.get('s') || undefined
+    const hostFormat = params.get('rh') || 'domain'
+    const isNumeric = /^\d+$/.test(resourceParam)
+
+    let result
+    if (!isNumeric) {
+      console.log(area_id, 'area_id', params.get('b'), 'params.get')
+
+      result = await createChannelsV3({
+        resource_no: resourceParam,
+        auth_type: Number(auth_type),
+        protocol: Number(protocol),
+        count: Number(count),
+        // prov,
+        area_id: Number(area_id),
+        isp: Number(isp),
+        host_format: hostFormat === 'domain' ? 1 : 2,
+      })
+      console.log({
+        resource_no: resourceParam,
+        auth_type: Number(auth_type),
+        protocol: Number(protocol),
+        count: Number(count),
+        // prov,
+        area_id: Number(area_id),
+        isp: Number(isp),
+        host_format: hostFormat === 'domain' ? 1 : 2,
+      })
+    }
+    else {
+      result = await createChannels({
+        resource_id: Number(resourceParam),
+        auth_type: Number(auth_type),
+        protocol: Number(protocol),
+        count: Number(count),
+        // prov,
+        area_id: Number(area_id),
+        isp: Number(isp),
+        host_format: hostFormat === 'domain' ? 1 : 2,
+      })
+    }
 
-    const result = await createChannels({
-      resource_id: Number(resource_id),
-      auth_type: Number(auth_type),
-      protocol: Number(protocol),
-      count: Number(count),
-      prov,
-      city,
-      isp: Number(isp),
-    })
     if (!result.success) {
       throw new Error(result.message)
     }
@@ -46,10 +79,32 @@ export async function GET(req: NextRequest) {
 
     switch (format) {
     case 'json':
-      return NextResponse.json(result.data)
+      if (hostFormat === 'domain') {
+        const domainFormatData = result.data.map(item => ({
+          host: item.host,
+          port: item.port,
+          ...(item.username && item.password ? {username: item.username, password: item.password} : {}),
+        }))
+        return NextResponse.json(domainFormatData)
+      }
+      else {
+        const ipFormatData = result.data.map(item => ({
+          ip: item.ip,
+          port: item.port,
+          ...(item.username && item.password ? {username: item.username, password: item.password} : {}),
+        }))
+        return NextResponse.json(ipFormatData)
+      }
     case 'text':
       const text = result.data.map((item) => {
-        const list = [item.host, item.port]
+        let hostValue: string
+        if (hostFormat === 'domain') {
+          hostValue = item.host
+        }
+        else {
+          hostValue = item.ip
+        }
+        const list = [hostValue, String(item.port)]
         if (item.username && item.password) {
           list.push(item.username)
           list.push(item.password)

src/app/(auth)/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

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

src/app/(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/layout.tsx

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

src/app/admin/balance/page.tsx

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

@@ -214,11 +214,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/clients.tsx

@@ -6,7 +6,7 @@ import {RealnameAuthDialog} from '@/components/composites/dialogs/realname-auth-
 import UserCenter from '@/components/composites/user-center'
 import {Button} from '@/components/ui/button'
 import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@/components/ui/tooltip'
-import {Archive, ArchiveRestore, Eye, HardDriveUpload, IdCard, LockKeyhole, MessageCircleMoreIcon, Package, PanelLeftCloseIcon, PanelLeftOpenIcon, ShoppingCart, UserRound, UserRoundPen, Wallet} from 'lucide-react'
+import {Archive, ArchiveRestore, CircleDollarSign, Eye, HardDriveUpload, IdCard, LockKeyhole, MessageCircleMoreIcon, Package, PanelLeftCloseIcon, PanelLeftOpenIcon, ShoppingCart, UserRound, UserRoundPen, Wallet} from 'lucide-react'
 import {merge} from '@/lib/utils'
 import logoAvatar from '@/assets/logo-avatar.svg'
 import logoText from '@/assets/logo-text.svg'
@@ -211,6 +211,7 @@ export function Navbar() {
           <NavItem href="/admin/extract" icon={<HardDriveUpload size={20}/>} label="提取 IP" expand={navbar}/>
           <NavTitle label="个人中心"/>
           <NavItem href="/admin/profile" icon={<UserRoundPen size={20}/>} label="基本信息" expand={navbar}/>
+          <NavItem href="/admin/balance" icon={<CircleDollarSign size={20}/>} label="余额管理" expand={navbar}/>
           <NavItem href="/admin/bills" icon={<Wallet size={20}/>} label="我的账单" expand={navbar}/>
           <NavTitle label="资源管理"/>
           <NavItem href="/admin/resources" icon={<Package size={20}/>} label="我的套餐" expand={navbar}/>

src/app/admin/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

@@ -150,7 +150,6 @@ export default function ResourceList({resourceType}: ResourceListProps) {
       toast.error(e instanceof Error ? e.message : '更新IP检查状态失败')
     }
   }
-  console.log(data.list, 'data.list')
 
   // 表格列定义
   const columns = useMemo<ColumnDef<Resource<1> | Resource<2>>[]>(() => {
@@ -187,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>
         },
       },
       {
@@ -262,7 +261,7 @@ export default function ResourceList({resourceType}: ResourceListProps) {
           const checkip = row.original.checkip
           return (
             <Button
-              theme="default"
+              theme={checkip ? 'fail' : 'default'}
               className="h-7 px-3 text-sm"
               onClick={() => handleCheckipChange(row.original.id, row.original.checkip)}
             >

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

@@ -34,7 +34,7 @@ type SchemaType = z.infer<typeof schema>
 
 export type WhitelistPageProps = {}
 
-const MAX_WHITELIST_COUNT = 10
+const MAX_WHITELIST_COUNT = 5
 
 export default function WhitelistPage(props: WhitelistPageProps) {
   const [wait, setWait] = useState(false)
@@ -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,27 +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: '请选择运营商'}),
-  proto: z.enum(['all', '1', '2', '3'], {required_error: '请选择协议'}),
+  proto: z.enum(['all', '1', '2'], {required_error: '请选择协议'}),
   authType: z.enum(['1', '2'], {required_error: '请选择认证方式'}),
   distinct: z.enum(['1', '0'], {required_error: '请选择去重选项'}),
   format: z.enum(['text', 'json'], {required_error: '请选择导出格式'}),
+  hostFormat: z.enum(['domain', 'ip'], {required_error: '请选择主机格式'}),
   separator: z.string({required_error: '请选择分隔符'}),
   breaker: z.string({required_error: '请选择换行符'}),
   count: z.number({required_error: '请输入有效的数量'}).min(1),
@@ -53,6 +53,7 @@ export default function Extract(props: ExtractProps) {
       authType: '1',
       count: 1,
       distinct: '1',
+      hostFormat: 'domain',
       format: 'text',
       breaker: '13,10',
       separator: '124',
@@ -71,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>
 
@@ -163,12 +150,12 @@ const FormFields = memo(() => {
               <RadioGroupItem value="1" id={`${id}-v-http`} className="mr-2"/>
               <span>HTTP</span>
             </FormLabel>
-            <FormLabel htmlFor={`${id}-v-https`} className="px-3 h-10 border rounded-md flex items-center text-sm">
+            {/* <FormLabel htmlFor={`${id}-v-https`} className="px-3 h-10 border rounded-md flex items-center text-sm">
               <RadioGroupItem value="2" id={`${id}-v-https`} className="mr-2"/>
               <span>HTTPS</span>
-            </FormLabel>
+            </FormLabel> */}
             <FormLabel htmlFor={`${id}-v-socks5`} className="px-3 h-10 border rounded-md flex items-center text-sm">
-              <RadioGroupItem value="3" id={`${id}-v-socks5`} className="mr-2"/>
+              <RadioGroupItem value="2" id={`${id}-v-socks5`} className="mr-2"/>
               <span>SOCKS5</span>
             </FormLabel>
           </RadioGroup>
@@ -233,6 +220,26 @@ const FormFields = memo(() => {
         )}
       </FormField>
 
+      {/* 主机格式 */}
+      <FormField name="hostFormat" className="md:max-w-[calc(160px*2+1rem)]" label="主机格式" classNames={{label: 'max-md:text-sm'}}>
+        {({id, field}) => (
+          <RadioGroup
+            onValueChange={field.onChange}
+            defaultValue={field.value}
+            className="flex gap-4"
+          >
+            <FormLabel htmlFor={`${id}-v-domain`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
+              <RadioGroupItem value="domain" id={`${id}-v-domain`} className="mr-2"/>
+              <span>域名</span>
+            </FormLabel>
+            <FormLabel htmlFor={`${id}-v-ip`} className="px-3 h-10 flex-1 border rounded-md flex items-center text-sm">
+              <RadioGroupItem value="ip" id={`${id}-v-ip`} className="mr-2"/>
+              <span>IP</span>
+            </FormLabel>
+          </RadioGroup>
+        )}
+      </FormField>
+
       {/* 分隔符 */}
       <FormField name="separator" className="md:max-w-[calc(160px*3+1rem*2)]" label="分隔符" classNames={{label: 'max-md:text-sm'}}>
         {({id, field}) => (
@@ -366,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="选择套餐"/>
@@ -390,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 && (
@@ -405,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>
@@ -447,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>
@@ -489,11 +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'})
+  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)]">
@@ -523,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>
   )
@@ -604,25 +669,40 @@ function ApplyLink() {
   }
 
   return (
-    <div className={merge(
-      `flex flex-col gap-4`,
-      `rounded-lg`,
-    )}>
-      <h4>API 链接</h4>
+    <div className="flex flex-col gap-3 rounded-lg">
+      <Alert variant="warn" className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <CircleAlert className="size-4 shrink-0"/>
+          <AlertTitle className="text-orange-600">
+            提取 IP 前需要将本机 IP 添加到白名单后才可使用
+          </AlertTitle>
+        </div>
+        <Link href="/admin/whitelist" className="flex-none text-orange-600 font-medium flex items-center gap-1">
+          <span>添加白名单</span>
+          <ArrowRight className="size-4"/>
+        </Link>
+      </Alert>
 
-      {/* 展示链接地址 */}
-      <div className="bg-secondary p-4 rounded-md break-all">
+      <Alert className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <CircleAlert className="size-4 shrink-0"/>
+          <AlertTitle>端口同时支持 socks5 和 http 协议</AlertTitle>
+        </div>
+        <div className="w-[88px]"/>
+      </Alert>
+      <h4 className="text-base font-medium">API 链接</h4>
+
+      <div className="bg-gray-100 rounded-md p-4 break-all font-mono text-sm">
         {link(form.getValues())}
       </div>
 
-      {/* 操作 */}
-      <div className="flex gap-4">
-        <Button type="button" onClick={() => submit('copy')}>
-          <CopyIcon/>
+      <div className="flex gap-3">
+        <Button type="button" onClick={() => submit('copy')} className="gap-1">
+          <CopyIcon className="size-4"/>
           <span>复制链接</span>
         </Button>
-        <Button type="button" onClick={() => submit('open')}>
-          <ExternalLinkIcon/>
+        <Button type="button" onClick={() => submit('open')} className="gap-1">
+          <ExternalLinkIcon className="size-4"/>
           <span>打开链接</span>
         </Button>
       </div>
@@ -631,18 +711,20 @@ function ApplyLink() {
 }
 
 function link(values: Schema) {
-  const {resource, prov, city, isp, proto, authType, distinct, format: formatType, separator, breaker, count} = values
+  const {resource, prov, city, isp, proto, authType, distinct, format: formatType, hostFormat, separator, breaker, count} = values
+  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('rt', formatType)
+  sp.set('rh', hostFormat)
   sp.set('rs', separator)
   sp.set('rb', breaker)
   sp.set('n', String(count))
@@ -656,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
 
@@ -666,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/purchase/long/center.tsx

@@ -79,14 +79,45 @@ export default function Center({skuData}: {
   }, [expire, live, modeList, setValue, skuData, type])
 
   return (
-    <Card className="flex-auto p-6 flex flex-col gap-6 relative">
+    <Card className="flex-auto p-6 flex flex-col gap-10 relative">
+      <div className="text-center -mb-10">支持 HTTP、socks5 双协议代理</div>
       <BillingMethodField modeList={modeList} timeDailyLimit={100}/>
+      {/* 套餐时效 */}
+      {type === '1' && (
+        <FormField name="expire" label="套餐有效时间" description="有效时间内可用于提取 IP">
+          {({id, field}) => (
+            <RadioGroup
+              id={id}
+              value={field.value}
+              onValueChange={(value) => {
+                field.onChange(value)
+
+                const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
+                if (!nextLiveList.includes(live) && nextLiveList[0]) {
+                  setValue('live', nextLiveList[0])
+                }
+              }}
+              className="flex gap-4 flex-wrap">
+              {expireList.map(day => (
+                <FormOption
+                  key={day}
+                  id={`${id}-${day}`}
+                  value={day}
+                  label={`${day} 天`}
+                  compare={field.value}
+                />
+              ))}
+            </RadioGroup>
+          )}
+        </FormField>
+      )}
 
       {/* IP 时效 */}
       <FormField<Schema, 'live'>
-        className="space-y-4"
         name="live"
-        label="IP 时效">
+        label="IP 有效时间"
+        description="提取出的 IP 可用时间"
+      >
         {({id, field}) => (
           <RadioGroup
             id={id}
@@ -128,48 +159,20 @@ export default function Center({skuData}: {
         )}
       </FormField>
 
-      {/* 套餐时效 */}
-      {type === '1' && (
-        <FormField className="space-y-4" name="expire" label="套餐时效">
-          {({id, field}) => (
-            <RadioGroup
-              id={id}
-              value={field.value}
-              onValueChange={(value) => {
-                field.onChange(value)
-
-                const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
-                if (!nextLiveList.includes(live) && nextLiveList[0]) {
-                  setValue('live', nextLiveList[0])
-                }
-              }}
-              className="flex gap-4 flex-wrap">
-              {expireList.map(day => (
-                <FormOption
-                  key={day}
-                  id={`${id}-${day}`}
-                  value={day}
-                  label={`${day} 天`}
-                  compare={field.value}
-                />
-              ))}
-            </RadioGroup>
-          )}
-        </FormField>
-      )}
-
       {/* 每日提取上限/购买数量 */}
       {type === '1' ? (
         <NumberStepperField
           name="daily_limit"
-          label="每日提取上限"
+          label="IP 每日提取上限"
+          description="本套餐每日可提取 IP 的最大数量"
           min={currentCountMin}
           step={100}
         />
       ) : (
         <NumberStepperField
           name="quota"
-          label="IP 购买数量"
+          label="IP 总提取上限"
+          description="本套餐总计可提取 IP 的最大数量"
           min={currentCountMin}
           step={100}
         />

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

@@ -20,7 +20,7 @@ export type Schema = z.infer<typeof schema>
 
 export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
   const skuData = parsePurchaseSkuList('long', skuList)
-  const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
+  const defaultMode = skuData.modeList.includes('1') ? '1' : '2'
   const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
   const defaultExpire = defaultMode === '1'
     ? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'

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

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

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

@@ -12,6 +12,7 @@ type PurchaseStepperFieldName = 'quota' | 'daily_limit'
 type NumberStepperFieldProps = {
   name: PurchaseStepperFieldName
   label: string
+  description?: string
   min: number
   step: number
 }
@@ -25,7 +26,7 @@ export function NumberStepperField(props: NumberStepperFieldProps) {
 
   return (
     <FormField<PurchaseFormValues, PurchaseStepperFieldName>
-      className="space-y-4"
+      description={props.description}
       name={props.name}
       label={props.label}
     >

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

@@ -15,6 +15,7 @@ import {formatPurchaseLiveLabel} 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',
@@ -43,7 +44,7 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
     expire,
     dailyLimit,
   }
-  const priceData = usePurchasePrice(profile, selection)
+  const {priceData, isLoading, isError} = usePurchasePrice(profile, selection)
   const {price, actual: discountedPrice = '0.00'} = priceData
   const totalDiscount = getTotalDiscount(price, discountedPrice)
   const hasDiscount = Number(totalDiscount) > 0
@@ -70,9 +71,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 +96,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 +114,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 ? (
@@ -134,7 +147,7 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
         )
       ) : (
         <Link href="/login" className={buttonVariants()}>
-          登录后支付
+          去支付
         </Link>
       )}
     </Card>
@@ -143,6 +156,8 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
 
 function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
   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
 
@@ -150,6 +165,9 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
     const requestId = ++requestIdRef.current
 
     const loadPrice = async () => {
+      setIsLoading(true)
+      setIsError(false)
+
       try {
         const resource = buildPurchaseResource({
           kind,
@@ -167,15 +185,14 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
           return
         }
 
-        if (!response.success) {
-          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 +201,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])
 
-  return priceData
+  return {priceData, isLoading, isError}
 }
 
 function getTotalDiscount(price: string, discountedPrice: string) {

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

@@ -80,14 +80,45 @@ export default function Center({
   }, [expire, live, modeList, setValue, skuData, type])
 
   return (
-    <Card className="flex-auto p-6 flex flex-col gap-6 relative">
+    <Card className="flex-auto p-6 flex flex-col gap-10 relative">
+      <div className="text-center -mb-10">支持 HTTP、socks5 双协议代理</div>
       <BillingMethodField modeList={modeList} timeDailyLimit={2000}/>
+      {/* 套餐时效 */}
+      {type === '1' && (
+        <FormField name="expire" label="套餐有效时间" description="有效时间内可用于提取 IP">
+          {({id, field}) => (
+            <RadioGroup
+              id={id}
+              value={field.value}
+              onValueChange={(value) => {
+                field.onChange(value)
+
+                const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
+                if (!nextLiveList.includes(live) && nextLiveList[0]) {
+                  setValue('live', nextLiveList[0])
+                }
+              }}
+              className="flex gap-4 flex-wrap">
+              {expireList.map(day => (
+                <FormOption
+                  key={day}
+                  id={`${id}-${day}`}
+                  value={day}
+                  label={`${day} 天`}
+                  compare={field.value}
+                />
+              ))}
+            </RadioGroup>
+          )}
+        </FormField>
+      )}
 
       {/* IP 时效 */}
       <FormField<Schema, 'live'>
-        className="space-y-4"
         name="live"
-        label="IP 时效">
+        label="IP 有效时间"
+        description="提取出的 IP 可用时间"
+      >
         {({id, field}) => (
           <RadioGroup
             id={id}
@@ -132,48 +163,20 @@ export default function Center({
         )}
       </FormField>
 
-      {/* 套餐时效 */}
-      {type === '1' && (
-        <FormField className="space-y-4" name="expire" label="套餐时效">
-          {({id, field}) => (
-            <RadioGroup
-              id={id}
-              value={field.value}
-              onValueChange={(value) => {
-                field.onChange(value)
-
-                const nextLiveList = getAvailablePurchaseLives(skuData, {mode: type, expire: value})
-                if (!nextLiveList.includes(live) && nextLiveList[0]) {
-                  setValue('live', nextLiveList[0])
-                }
-              }}
-              className="flex gap-4 flex-wrap">
-              {expireList.map(day => (
-                <FormOption
-                  key={day}
-                  id={`${id}-${day}`}
-                  value={day}
-                  label={`${day} 天`}
-                  compare={field.value}
-                />
-              ))}
-            </RadioGroup>
-          )}
-        </FormField>
-      )}
-
       {/* 每日提取上限/购买数量 */}
       {type === '1' ? (
         <NumberStepperField
           name="daily_limit"
-          label="每日提取上限"
+          label="IP 每日提取上限"
+          description="本套餐每日可提取 IP 的最大数量"
           min={currentCountMin}
           step={1000}
         />
       ) : (
         <NumberStepperField
           name="quota"
-          label="IP 购买数量"
+          label="IP 总提取上限"
+          description="本套餐总计可提取 IP 的最大数量"
           min={currentCountMin}
           step={5000}
         />

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

@@ -20,7 +20,7 @@ export type Schema = z.infer<typeof schema>
 
 export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
   const skuData = parsePurchaseSkuList('short', skuList)
-  const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
+  const defaultMode = skuData.modeList.includes('1') ? '1' : '2'
   const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
   const defaultExpire = defaultMode === '1'
     ? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'

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

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

src/config/site.ts

@@ -0,0 +1,20 @@
+export const siteConfig = {
+  name: '蓝狐代理',
+  shortName: '蓝狐代理',
+  url: (process.env.API_BASE_URL || 'https://prov.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

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

src/lib/models/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"
+  ]
+}