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

.env.example

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

bun.lock

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanhu-web",
-  "version": "1.12.0",
+  "version": "1.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/batch.ts

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

src/actions/channel.ts

@@ -29,10 +29,23 @@ export async function createChannels(params: {
   protocol: number
   auth_type: number
   count: number
-  prov?: string
+  // prov?: string
-  city?: 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')
+    const resourceParam = params.get('i')
-    if (!resource_id) {
+
+    if (!resourceParam) {
       throw new Error('需要指定资源ID')
     }
     let protocol = params.get('x')
@@ -20,21 +22,49 @@ export async function GET(req: NextRequest) {
     if (!count) {
       throw new Error('需要指定通道创建数量')
     }
-    const prov = params.get('a') || undefined
+    // const prov = params.get('a') || undefined
-    const city = params.get('b') || undefined
+    const area_id = params.get('b') || undefined
     const isp = params.get('s') || undefined
     const hostFormat = params.get('rh') || 'domain'
+    const isNumeric = /^\d+$/.test(resourceParam)
 
-    const result = await createChannels({
+    let result
-      resource_id: Number(resource_id),
+    if (!isNumeric) {
-      auth_type: Number(auth_type),
+      console.log(area_id, 'area_id', params.get('b'), 'params.get')
-      protocol: Number(protocol),
+
-      count: Number(count),
+      result = await createChannelsV3({
-      prov,
+        resource_no: resourceParam,
-      city,
+        auth_type: Number(auth_type),
-      isp: Number(isp),
+        protocol: Number(protocol),
-      host_format: hostFormat === 'domain' ? 1 : 2,
+        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,
+      })
+    }
 
     if (!result.success) {
       throw new Error(result.message)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,264 +1,27 @@
-'use client'
+import {Metadata} from 'next'
-import {useState} from 'react'
+import {siteConfig} from '@/config/site'
-import Image from 'next/image'
+import CustomPage from './_client'
-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({
+export async function generateMetadata(): Promise<Metadata> {
-  company: z.string().min(2, '企业名称至少2个字符'),
+  return {
-  name: z.string().min(2, '联系人姓名至少2个字符'),
+    title: '业务定制',
-  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的11位手机号码'),
+    description: '蓝狐代理为您提供企业级代理IP定制服务，专属顾问1对1服务，量身打造代理解决方案，满足企业个性化需求',
-  usage: z.string().min(1, '请选择您需要的用量'),
+    openGraph: {
-  purpose: z.string().min(2, '请输入用途说明').max(200, '用途说明不超过200字符'),
+      title: '业务定制',
-})
+      description: '蓝狐代理为您提供企业级代理IP定制服务，专属顾问1对1服务，量身打造代理解决方案',
-
+      images: [
-type FormValues = z.infer<typeof formSchema>
+        {
-
+          url: siteConfig.ogImage.url,
-export default function CustomPage() {
+          width: siteConfig.ogImage.width,
-  const router = useRouter()
+          height: siteConfig.ogImage.height,
-  const [isSubmitting, setIsSubmitting] = useState(false)
+          alt: '业务定制',
-
+        },
-  const form = useForm<FormValues>({
+      ],
-    resolver: zodResolver(formSchema),
+    },
-    defaultValues: {
+    alternates: {
-      company: '',
+      canonical: `${siteConfig.url}/custom`,
-      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>
-  )
 }
+
+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/[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'
-
+import {getArticleNav} from '@/actions/article'
-// 菜单配置
+import type {ArticleNavGroup} from '@/lib/models/article'
-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: '网站公告'},
-    ],
-  },
-]
 
 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
+  useEffect(() => {
-  const getCurrentKey = useCallback(() => {
+    const loadNav = async () => {
-    const parts = pathname?.split('/') || []
+      const resp = await getArticleNav({})
-    return parts[2] || ''
+      if (resp.success) {
-  }, [pathname])
+        setNavGroups(resp.data || [])
+      }
+      setLoading(false)
+    }
+    loadNav()
+  }, [])
 
-  const currentKey = getCurrentKey()
+  const parts = pathname?.split('/') || []
+  const currentArticleId = parts[3]
 
-  // 展开/收起状态
+  const autoExpanded = useMemo(() => {
-  const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({})
-
-  // 初始化：自动展开包含当前活跃项的分组
-  const initialExpandedGroups = useMemo(() => {
     const result: Record<string, boolean> = {}
-    MENU_ITEMS.forEach((section, index) => {
+
-      const hasActive = section.items.some(item => item.key === currentKey)
+    if (navGroups.length === 0) return result
-      if (hasActive || index === 0) {
+
-        result[section.group] = true
+    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 expandedGroups = useMemo(() => {
-  const finalExpandedGroups = useMemo(() => {
+    return {...autoExpanded, ...manualExpanded}
-    return {...initialExpandedGroups, ...expandedGroups}
+  }, [autoExpanded, manualExpanded])
-  }, [initialExpandedGroups, expandedGroups])
 
-  const toggleGroup = (group: string) => {
+  const toggleGroup = (groupCode: string) => {
-    setExpandedGroups(prev => ({
+    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
+    <aside className={merge('bg-white rounded-lg p-3 transition-all duration-200 shrink-0', className)}>
-      className={merge(`bg-white rounded-lg p-3 transition-all duration-200 shrink-0`, className)}
-    >
       <nav className="space-y-2">
-        {MENU_ITEMS.map(section => (
+        {navGroups.map(group => (
-          <div key={section.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) => {
+                {group.articles.map((article) => {
-                  const isActive = currentKey === item.key
+                  const isActive = getActiveArticleId() === String(article.id)
-                  const href = getItemHref(item.key)
+                  const href = `/docs/${group.code}/${article.id}`
 
                   return (
-                    <li key={item.key}>
+                    <li key={article.id}>
                       <Link
                         href={href}
                         onClick={() => onClose?.()}
                         className={`block pl-8 py-2 text-base cursor-pointer transition-colors ${
                           isActive
-                            ? 'bg-blue-50 font-semibold'
+                            ? 'bg-blue-50 font-semibold text-blue-600'
                             : 'text-slate-700 hover:text-slate-900 hover:bg-slate-50'
                         }`}
                       >
-                        {item.label}
+                        {article.title}
                       </Link>
                     </li>
                   )

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

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

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

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

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

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

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

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

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

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

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

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

src/app/admin/balance/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {useCallback, useEffect, useState} from 'react'
+import {Suspense, useCallback, useEffect, useState} from 'react'
 import {PageRecord} from '@/lib/api'
 import {Balance} from '@/lib/models'
 import {useStatus} from '@/lib/states'
@@ -136,100 +136,101 @@ export default function BalancePage(props: BalancePageProps) {
           </Button>
         </Form>
       </section>
-
+      <Suspense>
-      <DataTable
+        <DataTable
-        data={data.list}
+          data={data.list}
-        status={status}
+          status={status}
-        pagination={{
+          pagination={{
-          total: data.total,
+            total: data.total,
-          page: data.page,
+            page: data.page,
-          size: data.size,
+            size: data.size,
-          onPageChange: async (page: number) => {
+            onPageChange: async (page: number) => {
-            await refresh(page, data.size)
+              await refresh(page, data.size)
-          },
+            },
-          onSizeChange: async (size: number) => {
+            onSizeChange: async (size: number) => {
-            await refresh(data.page, size)
+              await refresh(data.page, size)
-          },
+            },
-        }}
+          }}
-        columns={[
+          columns={[
-          {accessorKey: 'bill_no', header: `账单编号`,
+            {accessorKey: 'bill_no', header: `账单编号`,
-            accessorFn: row => row.bill?.bill_no || '',
+              accessorFn: row => row.bill?.bill_no || '',
-          },
+            },
-          {
+            {
-            accessorKey: 'status',
+              accessorKey: 'status',
-            header: `状态`,
+              header: `状态`,
-            cell: ({row}) => {
+              cell: ({row}) => {
-              const trade = row.original.trade
+                const trade = row.original.trade
-              if (![1, 2, 3, 4, 5].includes(trade?.method)) {
+                if (![1, 2, 3, 4, 5].includes(trade?.method)) {
+                  return (
+                    <div className="flex items-center gap-2">
+                      <CheckCircle size={16} className="text-done"/>
+                      <span>已完成</span>
+                    </div>
+                  )
+                }
+                if (!trade) return <span>-</span>
                 return (
                   <div className="flex items-center gap-2">
-                    <CheckCircle size={16} className="text-done"/>
+                    {trade?.status === 1 ? (
-                    <span>已完成</span>
+                      <CheckCircle size={16} className="text-done"/>
+                    ) : trade?.status === 2 ? (
+                      <AlertCircle size={16} className="text-weak"/>
+                    ) : trade?.status === 3 ? (
+                      <AlertCircle size={16} className="text-fail"/>
+                    ) : null}
+                    <span>
+                      {trade?.status === 1 ? '已完成'
+                        : trade?.status === 2 ? '已取消'
+                          : trade?.status === 3 ? '已退款' : '-'}
+                    </span>
                   </div>
                 )
-              }
+              },
-              if (!trade) return <span>-</span>
+            },
-              return (
+            {
+              accessorKey: 'amount',
+              header: '变动金额',
+              cell: ({row}) => {
+                const amount = row.original.amount
+                const isPositive = Number(amount) > 0
+                return (
+                  <div className="flex items-center gap-1">
+                    <span
+                      className={`font-semibold ${
+                        isPositive ? 'text-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">
-                  {trade?.status === 1 ? (
+                  <span className="text-gray-500 text-sm">¥{Number(row.original.balance_prev).toFixed(2)}</span>
-                    <CheckCircle size={16} className="text-done"/>
+                  <span className="text-muted-foreground">→</span>
-                  ) : trade?.status === 2 ? (
+                  <span>¥{Number(row.original.balance_curr).toFixed(2)}</span>
-                    <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>
-              )
+              ),
             },
-          },
+            {
-          {
+              header: '备注',
-            accessorKey: 'amount',
+              accessorKey: 'remark',
-            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: '创建时间',
-            header: '余额变化',
+              accessorKey: 'created_at',
-            accessorKey: 'balance_prev',
+              cell: ({row}) =>
-            cell: ({row}) => (
+                format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm:ss'),
-              <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>
+      </Suspense>
-              </div>
-            ),
-          },
-          {
-            header: '备注',
-            accessorKey: 'remark',
-          },
-          {
-            header: '创建时间',
-            accessorKey: 'created_at',
-            cell: ({row}) =>
-              format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm'),
-          },
-        ]}
-      />
     </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
+      <Suspense>
-        data={data.list}
+        <DataTable
-        status={status}
+          data={data.list}
-        pagination={{
+          status={status}
-          total: data.total,
+          pagination={{
-          page: data.page,
+            total: data.total,
-          size: data.size,
+            page: data.page,
-          onPageChange: async (page: number) => {
+            size: data.size,
-            await refresh(page, 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>
-              )
             },
-          },
+            onSizeChange: async (size: number) => {
-          {
+              await refresh(data.page, size)
-            accessorKey: 'status',
+            },
-            header: `状态`,
+          }}
-            cell: ({row}) => {
+          columns={[
-              const trade = row.original.trade
+            {
-              if (![1, 2, 3, 4, 5].includes(trade?.method)) {
+              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: 'status',
-            accessorKey: 'amount',
+              header: `状态`,
-            header: '支付信息',
+              cell: ({row}) => {
-            cell: ({row}) => {
+                const trade = row.original.trade
-              const amount = typeof row.original.amount === 'string'
+                if (![1, 2, 3, 4, 5].includes(trade?.method)) {
-                ? parseFloat(row.original.amount)
+                  return (
-                : row.original.amount || 0
+                    <div className="flex items-center gap-2">
-              const trade = row.original.trade
+                      <CheckCircle size={16} className="text-done"/>
-              const paymentMethodMap = {
+                      <span>已完成</span>
-                1: '支付宝*',
+                    </div>
-                2: '微信*',
+                  )
-                3: '其他',
+                }
-                4: '支付宝',
+                if (!trade) return <span>-</span>
-                5: '微信',
+                return (
-              }
+                  <div className="flex items-center gap-2">
-              const paymentMethod = trade ? paymentMethodMap[trade.method as keyof typeof paymentMethodMap] || '余额' : '余额'
+                    {trade?.status === 1 ? (
-              return (
+                      <CheckCircle size={16} className="text-done"/>
-                <div className="flex gap-1">
+                    ) : trade?.status === 2 ? (
-                  <span className="text-sm">
+                      <AlertCircle size={16} className="text-weak"/>
-                    {paymentMethod}
+                    ) : trade?.status === 3 ? (
-                  </span>
+                      <AlertCircle size={16} className="text-fail"/>
-                  <span className={amount > 0 ? 'text-green-500' : 'text-orange-500'}>
+                    ) : null}
-                    ￥{amount.toFixed(2)}
+                    <span>
-                  </span>
+                      {trade?.status === 1 ? '已完成'
-                </div>
+                        : trade?.status === 2 ? '已取消'
-              )
+                          : trade?.status === 3 ? '已退款' : '-'}
+                    </span>
+                  </div>
+                )
+              },
             },
-          },
+            {
-          {
+              accessorKey: 'amount',
-            accessorKey: 'platform',
+              header: '支付信息',
-            header: '支付平台',
+              cell: ({row}) => {
-            cell: ({row}) => {
+                const amount = typeof row.original.amount === 'string'
-              const trade = row.original.trade
+                  ? parseFloat(row.original.amount)
-              if (!trade) return <span>-</span>
+                  : row.original.amount || 0
-              return (
+                const trade = row.original.trade
-                <div className="flex items-center gap-2">
+                const paymentMethodMap = {
-                  {trade.platform === 1 ? (
+                  1: '支付宝*',
-                    <>
+                  2: '微信*',
-                      <span>电脑网站</span>
+                  3: '其他',
-                    </>
+                  4: '支付宝',
-                  ) : trade.platform === 2 ? (
+                  5: '微信',
-                    <>
+                }
-                      <span>手机网站</span>
+                const paymentMethod = trade ? paymentMethodMap[trade.method as keyof typeof paymentMethodMap] || '余额' : '余额'
-                    </>
+                return (
-                  ) : (
+                  <div className="flex gap-1">
-                    <span>-</span>
+                    <span className="text-sm">
-                  )}
+                      {paymentMethod}
-                </div>
+                    </span>
-              )
+                    <span className={amount > 0 ? 'text-green-500' : 'text-orange-500'}>
+                      ￥{amount.toFixed(2)}
+                    </span>
+                  </div>
+                )
+              },
             },
-          },
+            {
-          {
+              accessorKey: 'platform',
-            accessorKey: 'created_at', header: '创建时间', cell: ({row}) => (
+              header: '支付平台',
-              format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm')
+              cell: ({row}) => {
-            ),
+                const trade = row.original.trade
-          },
+                if (!trade) return <span>-</span>
-          // {
+                return (
-          //   accessorKey: 'action', header: `操作`, cell: item => (
+                  <div className="flex items-center gap-2">
-          //     <div className="flex gap-2">
+                    {trade.platform === 1 ? (
-          //       -
+                      <>
-          //     </div>
+                        <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/record/page.tsx

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

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

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

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

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

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

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

src/app/admin/whitelist/page.tsx

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

src/app/globals.css

@@ -156,8 +156,25 @@
   }
 }
 
-/* highlight.js 样式覆盖 */
+/* highlight.js 样式覆盖 - 确保代码块高亮在前台正常显示 */
-pre code.hljs {
+.prose pre {
-    background: inherit;
+  background: #2b2b2b;
-    padding: 0;
+  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,19 +11,18 @@ 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'),
@@ -73,20 +72,6 @@ export default function Extract(props: ExtractProps) {
       )}
     >
       <CardSection>
-        {/* <Alert variant="warn" className="flex items-center justify-between">
-          <span className="flex items-center gap-2">
-            <CircleAlert/>
-            <AlertTitle className="flex text-gray-900">提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
-          </span>
-          <Link
-            href="/admin/whitelist"
-            className="flex-none  text-orange-600 font-medium ml-2 flex gap-0.5 items-center"
-          >
-            <span>添加白名单</span>
-            <ArrowRight className="size-4"/>
-          </Link>
-        </Alert> */}
-
         <FormFields/>
       </CardSection>
 
@@ -388,7 +373,7 @@ function SelectResource() {
       {({field}) => (
         <Select
           value={field.value ? String(field.value) : undefined}
-          onValueChange={value => field.onChange(Number(value))}
+          onValueChange={value => field.onChange(value)}
         >
           <SelectTrigger className="min-h-10 h-auto w-full">
             <SelectValue placeholder="选择套餐"/>
@@ -412,7 +397,7 @@ function SelectResource() {
                 {resources.map(resource => (
                   <SelectItem
                     key={resource.id}
-                    value={String(resource.id)}
+                    value={String(resource.resource_no)}
                     className="p-3">
                     <div className="flex flex-col gap-2 w-72">
                       {resource.type === 1 && resource.short.type === 1 && (
@@ -427,7 +412,7 @@ function SelectResource() {
                           <div className="flex justify-between gap-2 text-xs text-weak">
                             <span>
                               到期时间：
-                              {format(resource.short.expire_at, 'yyyy-MM-dd HH:mm')}
+                              {format(resource.short.expire_at, 'yyyy-MM-dd HH:mm:ss')}
                             </span>
                             <span>{intlFormatDistance(resource.short.expire_at, new Date())}</span>
                           </div>
@@ -469,7 +454,7 @@ function SelectResource() {
                           <div className="flex justify-between gap-2 text-xs text-weak">
                             <span>
                               到期时间：
-                              {format(resource.long.expire_at, 'yyyy-MM-dd HH:mm')}
+                              {format(resource.long.expire_at, 'yyyy-MM-dd HH:mm:ss')}
                             </span>
                             <span>{intlFormatDistance(resource.long.expire_at, new Date())}</span>
                           </div>
@@ -511,13 +496,62 @@ function SelectResource() {
   )
 }
 
+type AreaItem = {
+  id: number
+  parent_id: number
+  level: number
+  name: string
+  created_at: string
+  updated_at: string
+}
+
+function AreaTree(flatList: AreaItem[]) {
+  const provinces = flatList.filter(item => item.level === 1)
+  const cities = flatList.filter(item => item.level === 2)
+
+  return provinces.map(prov => ({
+    value: String(prov.id),
+    label: prov.name,
+    children: cities
+      .filter(city => city.parent_id === prov.id)
+      .map(city => ({
+        value: String(city.id),
+        label: city.name,
+      })),
+  }))
+}
+
 function SelectRegion() {
   const {control, setValue} = useFormContext<Schema>()
   const regionType = useWatch({control, name: 'regionType'})
   const prov = useWatch({control, name: 'prov'})
   const city = useWatch({control, name: 'city'})
-  console.log(regionType, 'regionType')
+  const [options, setOptions] = useState<ReturnType<typeof AreaTree>>([])
-  console.log(prov, 'prov', city, 'city')
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (regionType === 'specific') {
+      const fetchData = async () => {
+        setLoading(true)
+        try {
+          const req = await getAreaList({})
+          console.log(req, 'req')
+
+          if (req.success && req.data) {
+            setOptions(AreaTree(req.data))
+          }
+        }
+        catch (error) {
+          toast.error('无法选择区域')
+        }
+        finally {
+          setLoading(false)
+        }
+      }
+
+      fetchData()
+    }
+  }, [regionType])
 
   return (
     <div className="flex flex-col gap-4 md:max-w-[calc(160px*2+1rem)]">
@@ -547,15 +581,22 @@ function SelectRegion() {
       </FormField>
 
       {regionType === 'specific' && (
-        <Combobox
+        loading ? (
-          placeholder="请选择地区"
+          <div className="flex gap-2 items-center">
-          options={cities.options}
+            <Loader className="animate-spin" size={16}/>
-          value={[prov || '', city || '']}
+            <span className="text-sm text-weak">加载地区数据中...</span>
-          onChange={(value) => {
+          </div>
-            setValue('prov', value[0])
+        ) : (
-            setValue('city', value[1])
+          <Combobox
-          }}
+            placeholder="请选择地区"
-        />
+            options={options}
+            value={[prov || '', city || '']}
+            onChange={(value) => {
+              setValue('prov', value[0] || '')
+              setValue('city', value[1] || '')
+            }}
+          />
+        )
       )}
     </div>
   )
@@ -671,12 +712,13 @@ function ApplyLink() {
 
 function link(values: Schema) {
   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)
@@ -696,9 +738,9 @@ function name(resource: Resource) {
     // 短效套餐
     switch (resource.short.type) {
     case 1:
-      return `短效包时 ${resource.short.live} 分钟`
+      return `${resource.short?.sku?.name}`
     case 2:
-      return `短效包量 ${resource.short.live} 分钟`
+      return `${resource.short?.sku?.name}`
     }
     break
 
@@ -706,9 +748,9 @@ function name(resource: Resource) {
     // 长效套餐
     switch (resource.long.type) {
     case 1:
-      return `长效包时 ${resource.long.live} 小时`
+      return `${resource.long?.sku?.name}`
     case 2:
-      return `长效包量 ${resource.long.live} 小时`
+      return `${resource.long?.sku?.name}`
     }
     break
   }

src/components/composites/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 ? (
@@ -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) {
+        if (response.success) {
-          throw new Error(response.message || '获取价格失败')
+          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/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/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/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"
+  ]
+}