更新订单详情显示字段名称

.vscode/settings.json

@@ -7,4 +7,7 @@
     "[json]": {
         "editor.defaultFormatter": "vscode.json-language-features"
     },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    },
 }

README.md

@@ -1,40 +1,113 @@
 ## TODO
 
+分离公共 api 接口 env 定义
+
+统一前端基础库（类型，api）
+
 购买页固定套餐
 
-### 禁止直接依赖 form
-
-`\[(.*,)?form(,.*)?\]`
-
-### 次要
-
-业务定制页面每月需求用量，可选项需要确认是否合理
-
-页头高度降低
-
-帮助中心文档优化
-
-考虑重新组织导航栏
-- 产品购买
-- 提取 IP
-- 业务场景
-- 帮助中心
-- 大客户定制
-
-购买与提取手机端优化，尽量一页展示全部
-
-全部替换封装时间范围组件，检查结束时间字段手机端适配问题（需要尾部对齐）
-
-迁移到 tanstack form
-
-页尾链接完善跳转地址
-
 树组件优化
 
-### 架构改进
+## 目录结构
 
-考虑使用 swr 或 react query 来代替直接的服务端 react cache 缓存以及客户端 zustand 缓存，以将服务端请求的数据能够水合到客户端，避免重复请求
+```
+├── node_modules/       # 项目依赖包
+├── public/             # 静态资源（如 favicon、图片等，可直接通过根路径访问）
+├── src/                # 源代码目录
+│   ├── actions/        # 服务端操作或 API 逻辑（如 Server Actions）
+│   ├── app/            # Next.js 13+ App Router 目录，存放页面、布局、路由等
+|   |  ├── (api)/       # API 路由目录
+|   |  ├── (auth)/      # 认证相关页面
+|   |  ├── (home)/      # 首页模块
+|   |  ├── admin/       # 管理后台模块
+|   |       ├── effects.tsx           # 全局副作用/状态管理（如 Redux、SWR 初始化）
+|   |       ├── favicon.ico           # 网站图标
+|   |       ├── globals.css           # 全局样式
+|   |       └── layout.tsx            # 根布局组件（所有页面共享的布局结构）
+|   | 
+│   ├── assets/         # 项目资源文件（如图片、字体、样式等）
+│   ├── components/     # 可复用的 React 组件
+│   ├── lib/            # 工具函数、配置、服务等
+│   ├── mdx-components.tsx # MDX 组件配置
+│   └── proxy.ts        # 代理配置（如 API 代理）
+├── .dockerignore       # Docker 忽略文件
+├── .env                # 环境变量文件
+├── .gitignore          # Git 忽略文件
+├── .npmrc              # npm 配置
+├── bun.lock            # Bun 包管理器锁文件
+├── components.json     # 组件库配置（如 shadcn/ui）
+├── Dockerfile          # Docker 构建配置
+├── eslint.config.mjs   # ESLint 代码检查配置
+├── next-env.d.ts       # Next.js 类型声明
+├── next.config.ts      # Next.js 配置文件
+├── package.json        # 项目依赖和脚本
+├── postcss.config.mjs  # PostCSS 配置
+├── publish.ps1         # PowerShell 发布脚本
+├── README.md           # 项目说明文档
+└── tsconfig.json       # TypeScript 配置
+```
 
-### 需要确认
+## 技术栈
+| 类别 | 场景/库名 | 推荐方案/用途 |
+| :--- | :--- | :--- |
+| **状态管理** | 简单跨组件通信 | React Context |
+| | 复杂全局状态 | Zustand + persist |
+| | 服务端状态 | TanStack Query |
+| | 表单状态 | React Hook Form |
+| | 路由状态 | Next.js 内置 (useSearchParams, useParams) |
+| **核心框架** | Next.js | 服务框架 (React 全栈框架) |
+| **UI / 样式体系** | shadcn/ui | UI 组件库 |
+| | Radix UI | 无样式基础 UI 组件原语 |
+| | Tailwind CSS | CSS 框架 (原子化 CSS) |
+| | lucide-react | 图标库 |
+| **表单与数据验证** | React Hook Form | 表单状态管理及验证 |
+| | Zod | 数据验证与类型推断 |
+| **数据管理与通信** | Zustand | 全局状态管理库 |
+| | TanStack Query | 服务端状态管理 (数据请求、缓存) |
+| | TanStack Table | 无头 UI 表格库 |
+| **图表可视化** | Recharts | 图表库 |
+| **工具库** | date-fns | 日期时间处理库 |
+| | qrcode | QR 码生成库 |
 
-页面内操作是否需要关联到 url 上，以在使用后退功能时返回到上一次操作
+## 搭建开发环境
+
+项目基于 bun 运行，bun 是一个 typescript 原生的运行时环境，用于代替 nodejs，可以带来更高的性能提升。
+
+1. 拉取项目：`git clone https://43.226.58.254:53000/lanhu/web`
+2. 安装依赖包：`bun install`
+3. 创建环境变量文件 .env，复制 .env.example 中的内容到 .env，并根据实际情况修改
+4. 运行项目 `bun run dev`
+
+## 构建项目 & 版本管理
+
+1. 在 package.json 文件中修改版本号
+2. 构建并上传镜像, 终端运行 `./publish.ps1 <版本号>`
+3. 终端执行成功后在 `https://43.226.58.254:53000/lanhu/web` 发布最新版本
+
+生产环境的项目部署通过单独的部署脚本进行管理，前端开发上线只需要构建以及发布版本，无需考虑部署问题。
+
+## 开发规范 & 主要业务逻辑
+
+原型图：https://lanhuapp.com/link/#/invite?sid=lxgnSyga    
+
+### 快速创建前台新页面
+
+wrap.tsx ：新页面间距复用组件
+page.tsx：新页面统一布局
+stores：共享状态组件
+
+### 数据流与状态管理： 组件间通信方式
+
+- 通信方式：Props 父传子 / 回调函数 子传父 / Context 跨组件 useContext() / Zustand Store 全局状态管理useStore() / URL 参数 页面间状态共享 useSearchParams()
+路由与导航: 路由使用的Next.js App Router 架构 Server Actions  实现。
+
+### 认证与权限控制：登录流程-路由守卫(中间件)
+
+### 支付流程实现： 支付二维码生成
+
+### SSE 支付状态监听
+
+## 注意事项
+
+- 图片使用 Next.js Image 组件自动优化
+- 动态导入 (next/dynamic) 实现纯客户端组件

bun.lock

@@ -45,6 +45,7 @@
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
         "tailwindcss-animate": "^1.0.7",
+        "vaul": "^1.1.2",
         "zod": "^3.25.76",
         "zustand": "^5.0.9",
       },
@@ -1399,6 +1400,8 @@
 
     "util-deprecate": ["util-deprecate@1.0.2", "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
+    "vaul": ["vaul@1.1.2", "https://registry.npmmirror.com/vaul/-/vaul-1.1.2.tgz", { "dependencies": { "@radix-ui/react-dialog": "^1.1.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA=="],
+
     "vfile": ["vfile@6.0.3", "https://registry.npmmirror.com/vfile/-/vfile-6.0.3.tgz", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
 
     "vfile-message": ["vfile-message@4.0.3", "https://registry.npmmirror.com/vfile-message/-/vfile-message-4.0.3.tgz", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanhu-web",
-  "version": "1.0.1",
+  "version": "1.2.3",
   "private": true,
   "scripts": {
     "dev": "next dev -H 0.0.0.0 --turbopack",
@@ -51,6 +51,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
     "zod": "^3.25.76",
     "zustand": "^5.0.9"
   },
@@ -74,5 +75,5 @@
     "typescript": "^5.9.3",
     "babel-plugin-react-compiler": "^1.0.0"
   },
-  "packageManager": "bun@1.2.19"
+  "packageManager": "bun@1.3.2"
 }

publish.ps1

@@ -0,0 +1,16 @@
+if (-not $args) {
+    Write-Error "需要指定版本号"
+    exit 1
+}
+
+$confrim = Read-Host "构建版本为 [web:$($args[0])]，是否继续？(y/n)"
+if ($confrim -ne "y") {
+    Write-Host "已取消构建"
+    exit 0
+}
+
+docker build -t 43.226.58.254:53000/lanhu/web:latest .
+docker build -t 43.226.58.254:53000/lanhu/web:$($args[0]) .
+
+docker push 43.226.58.254:53000/lanhu/web:latest
+docker push 43.226.58.254:53000/lanhu/web:$($args[0])

src/actions/auth.ts

@@ -2,15 +2,7 @@
 import {cookies} from 'next/headers'
 import {ApiResponse, UnauthorizedError} from '@/lib/api'
 import {User} from '@/lib/models'
-import {callByDevice, callByUser} from '@/actions/base'
+import {callByDevice, callByUser, TokenResp} from '@/actions/base'
-
-type TokenResp = {
-  access_token: string
-  refresh_token: string
-  expires_in: number
-  token_type: string
-  scope?: string
-}
 
 export type LoginMode = 'phone_code' | 'password'
 

src/actions/base.ts

@@ -1,8 +1,16 @@
 'use server'
 import {API_BASE_URL, ApiResponse, CLIENT_ID, CLIENT_SECRET} from '@/lib/api'
+import {add, isBefore} from 'date-fns'
 import {cookies, headers} from 'next/headers'
 import {cache} from 'react'
-import {redirect} from 'next/navigation'
+
+export type TokenResp = {
+  access_token: string
+  refresh_token: string
+  expires_in: number
+  token_type: string
+  scope?: string
+}
 
 // ======================
 // public
@@ -26,6 +34,9 @@ const _callPublic = cache(async <R = undefined>(
 // device
 // ======================
 
+let token: string | null = null
+let token_expire: Date | null = null
+
 async function callByDevice<R = undefined>(
   endpoint: string,
   data: unknown,
@@ -37,18 +48,20 @@ const _callByDevice = cache(async <R = undefined>(
   endpoint: string,
   data?: string,
 ): Promise<ApiResponse<R>> => {
-  // 获取设备令牌
+  if (!token || !token_expire || isBefore(token_expire, new Date())) {
-  if (!CLIENT_ID || !CLIENT_SECRET) {
+    const basic = Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString('base64url')
-    return {
+    const resp = await call<TokenResp>(`${API_BASE_URL}/api/auth/token`, JSON.stringify({
-      success: false,
+      grant_type: 'client_credentials',
-      status: 401,
+    }), `Basic ${basic}`)
-      message: '未配置 CLIENT_ID 或 CLIENT_SECRET',
+    if (!resp.success) {
+      return resp
     }
+    token = resp.data.access_token
+    token_expire = add(new Date(), {seconds: resp.data.expires_in})
   }
-  const token = Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString('base64url')
 
   // 发起请求
-  return call(`${API_BASE_URL}${endpoint}`, data, `Basic ${token}`)
+  return call(`${API_BASE_URL}${endpoint}`, data, `Bearer ${token}`)
 })
 
 // ======================
@@ -149,24 +162,6 @@ async function call<R = undefined>(url: string, body: RequestInit['body'], auth?
   throw new Error(`无法解析响应数据，未处理的 Content-Type: ${type}`)
 }
 
-async function postCall<R = undefined>(rawResp: Promise<ApiResponse<R>>) {
-  const header = await headers()
-  const pathname = header.get('x-pathname') || '/'
-  const resp = await rawResp
-
-  // 重定向到登录页
-  const match = [
-    RegExp(`^/admin.*`),
-  ].some(item => item.test(pathname))
-
-  if (match && !resp.success && resp.status === 401) {
-    console.log('🚗🚗🚗🚗🚗 非正常重定向 🚗🚗🚗🚗🚗')
-    redirect('/login?force=true')
-  }
-
-  return resp
-}
-
 // 导出
 export {
   callPublic,

src/actions/resource.ts

@@ -24,6 +24,7 @@ export async function listResourceShort(props: {
   size: number
   resource_no?: string
   type?: number
+  status?: number
   create_after?: Date
   create_before?: Date
   expire_after?: Date
@@ -37,6 +38,7 @@ export async function listResourceLong(props: {
   size: number
   resource_no?: string
   type?: number
+  status?: number
   create_after?: Date
   create_before?: Date
   expire_after?: Date

src/actions/verify.ts

@@ -28,7 +28,7 @@ export async function sendSMS(props: {
     }
 
     // 请求发送短信
-    return await callByDevice('/api/auth/verify/sms', {
+    return await callByDevice('/api/verify/sms', {
       phone: props.phone,
       purpose: 0,
     })

src/app/(auth)/login/login-card.tsx

@@ -141,7 +141,7 @@ export default function LoginCard() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 cursor-pointer"
                     onClick={() => setShowPwd(v => !v)}
                     aria-label={showPwd ? '隐藏密码' : '显示密码'}
                   >

src/app/(home)/(index)/advantages-section.tsx

@@ -0,0 +1,50 @@
+import Image, {StaticImageData} from 'next/image'
+import {PageSection} from './page-section'
+import s4_1_main from './_assets/s4-1-main.webp'
+import s4_2_main from './_assets/s4-2-main.webp'
+import s4_1_1 from './_assets/s4-1-1.webp'
+import s4_1_2 from './_assets/s4-1-2.webp'
+import s4_1_3 from './_assets/s4-1-3.webp'
+import s4_2_1 from './_assets/s4-2-1.webp'
+import s4_2_2 from './_assets/s4-2-2.webp'
+import s4_2_3 from './_assets/s4-2-3.webp'
+
+export function AdvantagesSection() {
+  return (
+    <PageSection title="HTTP 产品优势">
+      <div className="flex gap-36">
+        <ul className="flex-1 flex flex-col gap-6">
+          <AdvantageItem icon={s4_1_1} title="安全合规" description="国内三大运营商支持"/>
+          <AdvantageItem icon={s4_1_2} title="稳定链接" description="IP纯净度高达99.9%"/>
+          <AdvantageItem icon={s4_1_3} title="超匿名性" description="稳定传输，保护隐私安全"/>
+        </ul>
+        <Image src={s4_1_main} alt="产品优势展示" className="w-0 flex-1 object-contain max-lg:hidden"/>
+      </div>
+
+      <div className="flex gap-36">
+        <Image src={s4_2_main} alt="技术优势展示" className="w-0 flex-1 object-contain max-lg:hidden"/>
+        <ul className="flex-1 flex flex-col gap-6">
+          <AdvantageItem icon={s4_2_1} title="API接口文档" description="与第三方软件轻松集成"/>
+          <AdvantageItem icon={s4_2_2} title="多种编程语言代码" description="C语言、GO语言、Python..."/>
+          <AdvantageItem icon={s4_2_3} title="双重认证方式" description="API提取+账密认证"/>
+        </ul>
+      </div>
+    </PageSection>
+  )
+}
+
+function AdvantageItem(props: {
+  icon: StaticImageData
+  title: string
+  description: string
+}) {
+  return (
+    <li className="flex gap-8 items-center p-4 lg:p-8 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg">
+      <Image src={props.icon} alt={props.title} aria-hidden className="w-24 h-24 object-contain"/>
+      <div className="flex flex-col gap-3">
+        <h3 className="text-xl">{props.title}</h3>
+        <p>{props.description}</p>
+      </div>
+    </li>
+  )
+}

src/app/(home)/(index)/articles-section.tsx

@@ -0,0 +1,70 @@
+import {ReactNode} from 'react'
+import Link from 'next/link'
+import {PageSection} from './page-section'
+import {BookOpen, Smartphone, HelpCircle} from 'lucide-react'
+
+export function ArticlesSection() {
+  return (
+    <PageSection title="推荐文章">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <ArticleCard
+          icon={<BookOpen className="w-12 h-12"/>}
+          title="浏览器设置代理教程"
+          description="快速上手，5分钟学会在浏览器中配置代理服务器"
+          href="/docs/browser-proxy"
+        />
+
+        <ArticleCard
+          icon={<Smartphone className="w-12 h-12"/>}
+          title="Windows10 代理配置"
+          description="详细图文教程，帮助你在 Windows 系统中设置代理"
+          href="/docs/windows10-proxy"
+        />
+
+        <ArticleCard
+          icon={<HelpCircle className="w-12 h-12"/>}
+          title="常见问题总览"
+          description="解决使用过程中遇到的各类问题，快速找到答案"
+          href="/docs/faq-general"
+        />
+      </div>
+    </PageSection>
+  )
+}
+
+function ArticleCard(props: {
+  icon: ReactNode
+  title: string
+  description: string
+  href: string
+}) {
+  return (
+    <Link
+      href={props.href}
+      className={[
+        `group block p-8 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg bg-white`,
+        `transition-all duration-200`,
+      ].join(' ')}
+    >
+      <div className="flex flex-col items-center text-center gap-6">
+        <div className="p-4 rounded-xl bg-linear-to-br from-blue-500 to-cyan-400 text-white group-hover:scale-110 transition-transform">
+          {props.icon}
+        </div>
+
+        <div>
+          <h3 className="text-xl font-semibold mb-3 group-hover:text-blue-600 transition-colors">
+            {props.title}
+          </h3>
+          <p className="text-gray-500 text-sm leading-relaxed">
+            {props.description}
+          </p>
+        </div>
+
+        <div className="mt-2 text-blue-500 text-sm flex items-center gap-2 group-hover:gap-3 transition-all">
+          <span>了解更多</span>
+          <span className="text-lg">→</span>
+        </div>
+      </div>
+    </Link>
+  )
+}

src/app/(home)/(index)/hero-section.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image'
+import Wrap from '@/components/wrap'
+import FreeTrial from '@/components/free-trial'
+import banner from '../_assets/banner.webp'
+import check_main from '@/assets/check-main.svg'
+
+export function HeroSection() {
+  return (
+    <section className="w-full relative">
+      <Image src={banner} alt="banner" className="absolute inset-0 h-full object-cover"/>
+      <Wrap className="relative pt-64 pb-48 max-md:pt-32 max-md:pb-24">
+        <h1 className="text-4xl">安全，稳定，快速，合规的代理服务器</h1>
+        <p className="mt-10 text-gray-500">遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</p>
+
+        <div className="mt-24 max-md:mt-14 flex gap-8 max-md:flex-col">
+          <p className="flex gap-4 items-center">
+            <Image src={check_main} alt="checkbox" width={24} height={24}/>
+            <span className="lg:text-lg">全国200+城市节点</span>
+          </p>
+          <p className="flex gap-4 items-center">
+            <Image src={check_main} alt="checkbox" width={24} height={24}/>
+            <span className="lg:text-lg">300+城市级精准定位</span>
+          </p>
+          <p className="flex gap-4 items-center">
+            <Image src={check_main} alt="checkbox" width={24} height={24}/>
+            <span className="lg:text-lg">低延迟&高并发提取</span>
+          </p>
+        </div>
+
+        <FreeTrial className={[
+          `mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg cursor-pointer`,
+          `bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl cursor-pointer`,
+        ].join(' ')}/>
+      </Wrap>
+    </section>
+  )
+}

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

@@ -0,0 +1,15 @@
+import {ReactNode} from 'react'
+
+export function PageSection(props: {
+  title: string
+  children: ReactNode
+}) {
+  return (
+    <section>
+      <div className="max-w-[1232px] mx-auto px-4 flex flex-col items-stretch">
+        <h2 className="text-center text-3xl mb-8 lg:mb-24">{props.title}</h2>
+        {props.children}
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,17 @@
+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 default function Home() {
+  return (
+    <main className="flex flex-col gap-16 lg:gap-32 pb-16 lg:pb-32 bg-white">
+      <HeroSection/>
+      <StatsSection/>
+      <ProductTypesSection/>
+      <AdvantagesSection/>
+      <ArticlesSection/>
+    </main>
+  )
+}

src/app/(home)/(index)/product-types-section.tsx

@@ -0,0 +1,78 @@
+import Image, {StaticImageData} from 'next/image'
+import {PageSection} from './page-section'
+import s1_1 from './_assets/s1-1.webp'
+import s1_2 from './_assets/s1-2.webp'
+import s1_3 from './_assets/s1-3.webp'
+import s1_4 from './_assets/s1-4.webp'
+import s1_check from './_assets/s1-check.svg'
+
+export function ProductTypesSection() {
+  return (
+    <PageSection title="HTTP安全合规的代理IP资源池">
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+        <ProductTypeCard
+          icon={s1_1}
+          title="短期动态IP池"
+          features={[
+            {icon: s1_check, text: 'IP时效3-30分钟(可定制)'},
+            {icon: s1_check, text: '支持高并发提取'},
+          ]}
+        />
+        <ProductTypeCard
+          icon={s1_2}
+          title="长期静态IP池"
+          features={[
+            {icon: s1_check, text: 'IP覆盖全国各地'},
+            {icon: s1_check, text: '平均响应时长：0.03s'},
+          ]}
+        />
+        <ProductTypeCard
+          icon={s1_3}
+          title="固定IP池"
+          features={[
+            {icon: s1_check, text: '稳定长输不掉线'},
+            {icon: s1_check, text: '全国热门静态IP线路'},
+          ]}
+        />
+        <ProductTypeCard
+          icon={s1_4}
+          title="企业级定制池"
+          features={[
+            {icon: s1_check, text: '可视化监控设计'},
+            {icon: s1_check, text: '技术团队现场支持'},
+          ]}
+        />
+      </ul>
+    </PageSection>
+  )
+}
+
+function ProductTypeCard(props: {
+  icon: StaticImageData
+  title: string
+  features: {
+    icon: StaticImageData
+    text: string
+  }[]
+}) {
+  return (
+    <li
+      className={[
+        `p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`,
+        `max-md:items-center`,
+      ].join(' ')}>
+      <Image src={props.icon} alt={props.title} aria-hidden className="self-center w-44 h-44 object-cover"/>
+      <h3 className="text-xl">{props.title}</h3>
+      <div className="flex flex-col gap-3">
+        {props.features.map((item, index) => {
+          return (
+            <p key={index} className="text-sm text-gray-500 flex gap-3 items-center">
+              <Image src={item.icon} alt="check" aria-hidden className="w-5 h-5"/>
+              <span>{item.text}</span>
+            </p>
+          )
+        })}
+      </div>
+    </li>
+  )
+}

src/app/(home)/(index)/stats-section.tsx

@@ -0,0 +1,32 @@
+import Image from 'next/image'
+import {PageSection} from './page-section'
+import map from '../_assets/map.webp'
+
+export function StatsSection() {
+  return (
+    <PageSection title="覆盖全国的IP资源及超大的带宽线路">
+      <ul className="shadow-[0_0_20px_4px] shadow-blue-50 p-8 flex max-lg:flex-col">
+        <li className="flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200">
+          <p className="text-xl">全国城市线路数量</p>
+          <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">350+</p>
+          <div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
+        </li>
+        <li className="flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200">
+          <p className="text-xl">每日更新IP数量</p>
+          <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">1,350,129</p>
+          <div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
+        </li>
+        <li className="flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200">
+          <p className="text-xl">用户量</p>
+          <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">26,578</p>
+          <div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
+        </li>
+        <li className="flex-1 flex flex-col items-center justify-center">
+          <p className="text-xl">IP可用率</p>
+          <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">99%</p>
+        </li>
+      </ul>
+      <Image src={map} alt="map" className="w-[1200px]"/>
+    </PageSection>
+  )
+}

src/app/(home)/_components/header/menu-help.tsx

@@ -17,12 +17,21 @@ export default function HelpMenu() {
         icon={h01}
         title="提取 IP"
         items={[
-          {lead: '短效 IP 提取', href: '/collect?type=short'},
+          {lead: '短效/长效 IP 提取', href: '/collect?type=short'},
-          {lead: '长效 IP 提取', href: '/collect?type=long'},
+          // {lead: '长效 IP 提取', href: '/collect?type=long'},
         ]}
       />
       <Column
         icon={h02}
+        title="操作指南"
+        items={[
+          {lead: '修改信息', href: '/docs/profile-settings'},
+          {lead: '提取链接', href: '/docs/extract-link'},
+          {lead: '查看记录', href: '/docs/payment-records'},
+        ]}
+      />
+      <Column
+        icon={h03}
         title="平台教程"
         items={[
           {lead: 'iOS 设置', href: '/docs/ios-proxy'},
@@ -30,15 +39,6 @@ export default function HelpMenu() {
           {lead: 'Windows 设置', href: '/docs/windows10-proxy'},
         ]}
       />
-      <Column
-        icon={h03}
-        title="高级功能"
-        items={[
-          {lead: '套餐管理', href: '/docs/package-operations'},
-          {lead: 'Socks5 教程', href: '/docs/socks5-usage'},
-          {lead: '固定 IP 套餐', href: '/docs/fixed-package'},
-        ]}
-      />
       <Image src={banner} alt="banner" className="hidden lg:block"/>
     </Wrap>
   )

src/app/(home)/_components/header/menu-mobile.tsx

@@ -1,31 +1,296 @@
-import ProductMenu from './menu-product'
+'use client'
-import HelpMenu from './menu-help'
+
-import SolutionMenu from './menu-solution'
+import {useContext, useState} from 'react'
+import {useRouter} from 'next/navigation'
+import {X} from 'lucide-react'
+import {HeaderContext} from './common'
+import Image, {StaticImageData} from 'next/image'
+import prod from '@/assets/header/product/prod.svg'
+import custom from '@/assets/header/product/custom.svg'
+import s01 from '@/assets/header/solution/01.svg'
+import s02 from '@/assets/header/solution/02.svg'
+import s03 from '@/assets/header/solution/03.svg'
+import s04 from '@/assets/header/solution/04.svg'
+import s05 from '@/assets/header/solution/05.svg'
+import s06 from '@/assets/header/solution/06.svg'
+import s07 from '@/assets/header/solution/07.svg'
+import s08 from '@/assets/header/solution/08.svg'
+import h01 from '@/assets/header/help/01.svg'
+import h02 from '@/assets/header/help/02.svg'
+import h03 from '@/assets/header/help/03.svg'
+import {merge} from '@/lib/utils'
+import Link from 'next/link'
+import logo from '@/assets/logo.webp'
 
 export type MobileMenuProps = {}
 
 export default function MobileMenu(props: MobileMenuProps) {
+  const ctx = useContext(HeaderContext)
+  const router = useRouter()
+  const [productTab, setProductTab] = useState<'domestic' | 'oversea'>('domestic')
+
+  if (!ctx) {
+    throw new Error(`HeaderContext not found`)
+  }
+
+  const navigate = (href: string) => {
+    ctx.setMenu(false)
+    router.push(href)
+  }
+
   return (
-    <div className="flex flex-col gap-8">
+    <div className="h-full flex flex-col bg-white">
-      <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between px-4 h-16 border-b border-gray-100">
-        <ProductMenu/>
+        {/* logo */}
+        <Link href="/" className="flex items-center">
+          <Image src={logo} alt="logo" height={40} className="translate-y-0.5"/>
+        </Link>
+        <button
+          type="button"
+          className="rounded-md p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors"
+          onClick={() => ctx.setMenu(false)}
+          aria-label="关闭菜单"
+        >
+          <X className="h-5 w-5"/>
+        </button>
       </div>
-      <div className="flex flex-col gap-4">
+
-        <MenuTitle title="帮助中心"/>
+      <div className="flex-1 overflow-y-auto px-4 py-6 space-y-8">
-        <HelpMenu/>
+        <div className="space-y-3">
-      </div>
+          <h3 className="text-sm font-semibold text-gray-500 tracking-wide">
-      <div className="flex flex-col gap-4">
+            产品订购
-        <MenuTitle title="业务场景"/>
+          </h3>
-        <SolutionMenu/>
+          <div className="flex rounded-lg bg-gray-100">
+            <button
+              className={merge(
+                'flex-1 py-2.5 text-sm font-medium rounded-md transition-all',
+                productTab === 'domestic'
+                  ? 'bg-white text-blue-600 shadow-sm'
+                  : 'text-gray-600 hover:text-gray-900',
+              )}
+              onClick={() => setProductTab('domestic')}
+            >
+              国内代理
+            </button>
+            <button
+              className={merge(
+                'flex-1 py-2.5 text-sm font-medium rounded-md transition-all',
+                productTab === 'oversea'
+                  ? 'bg-white text-blue-600 shadow-sm'
+                  : 'text-gray-600 hover:text-gray-900',
+              )}
+              onClick={() => setProductTab('oversea')}
+            >
+              海外代理
+            </button>
+          </div>
+
+          {productTab === 'domestic' && (
+            <div className="space-y-2">
+              <ProductItem
+                icon={prod}
+                label="短效动态IP"
+                badge="最低4.5折"
+                href="/product?type=short"
+                onNavigate={navigate}
+              />
+              <ProductItem
+                icon={prod}
+                label="长效静态IP"
+                badge="最低4.5折"
+                href="/product?type=long"
+                onNavigate={navigate}
+              />
+              <ProductItem
+                icon={custom}
+                label="优质/企业/精选IP"
+                badge="专属定制"
+                href="/custom"
+                onNavigate={navigate}
+              />
+            </div>
+          )}
+
+          {productTab === 'oversea' && (
+            <div className="mt-4 p-4 bg-blue-50 rounded-lg">
+              <p className="text-sm text-blue-600 text-center">
+                更多海外节点即将上线，敬请期待～
+              </p>
+            </div>
+          )}
+        </div>
+
+        <MenuSection title="业务场景">
+          <div className="grid grid-cols-2 gap-3">
+            <SolutionItem
+              icon={s01}
+              label="数据采集"
+              href="/data-capture"
+              onNavigate={navigate}
+            />
+            <SolutionItem
+              icon={s02}
+              label="电商运营"
+              href="/e-commerce"
+              onNavigate={navigate}
+            />
+            <SolutionItem
+              icon={s03}
+              label="市场调研"
+              href="/market-research"
+              onNavigate={navigate}
+            />
+            <SolutionItem
+              icon={s04}
+              label="SEO优化"
+              href="/seo-optimization"
+              onNavigate={navigate}
+            />
+            <SolutionItem
+              icon={s05}
+              label="社交媒体"
+              href="/social-media"
+              onNavigate={navigate}
+            />
+            <SolutionItem
+              icon={s06}
+              label="广告投放"
+              href="/advertising"
+              onNavigate={navigate}
+            />
+            <SolutionItem
+              icon={s07}
+              label="账号管理"
+              href="/account-management"
+              onNavigate={navigate}
+            />
+            <SolutionItem
+              icon={s08}
+              label="网络测试"
+              href="/network-testing"
+              onNavigate={navigate}
+            />
+          </div>
+        </MenuSection>
+
+        <MenuSection title="帮助中心">
+          <div className="space-y-2">
+            <HelpItem
+              icon={h01}
+              label="短效IP提取"
+              onClick={() => navigate('/collect?type=short')}
+            />
+            <HelpItem
+              icon={h02}
+              label="操作指南"
+              onClick={() => navigate('/docs/profile-settings')}
+            />
+            <HelpItem
+              icon={h03}
+              label="平台教程"
+              onClick={() => navigate('/docs/ios-proxy')}
+            />
+          </div>
+        </MenuSection>
+
+        <div className="space-y-2 pt-2">
+          <OtherLink
+            label="业务定制"
+            href="/custom"
+            onNavigate={navigate}
+          />
+        </div>
       </div>
     </div>
   )
 }
 
-function MenuTitle(props: {title: string}) {
+function MenuSection(props: {title: string, children: React.ReactNode}) {
   return (
-    <h3 className="text-xl text-weak px-4">
+    <div className="space-y-3">
-      {props.title}
+      <h3 className="text-sm font-semibold text-gray-500 tracking-wide">
-    </h3>
+        {props.title}
+      </h3>
+      {props.children}
+    </div>
+  )
+}
+
+function ProductItem(props: {
+  icon: StaticImageData
+  label: string
+  badge?: string
+  href: string
+  onNavigate: (href: string) => void
+}) {
+  return (
+    <button
+      type="button"
+      className="w-full flex items-center gap-3 rounded-lg border border-gray-100 bg-white px-4 py-3 text-left transition-all hover:border-blue-200 hover:shadow-sm"
+      onClick={() => props.onNavigate(props.href)}
+    >
+      <div className="shrink-0 w-8 h-8 bg-linear-to-br from-blue-50 to-cyan-50 rounded-lg flex items-center justify-center">
+        <Image src={props.icon} alt="" width={20} height={20} className="opacity-80"/>
+      </div>
+      <span className="flex-1 font-medium text-sm text-gray-900">{props.label}</span>
+      {props.badge && (
+        <span className="text-xs text-orange-600 bg-orange-50 px-2 py-1 rounded-full">
+          {props.badge}
+        </span>
+      )}
+    </button>
+  )
+}
+
+function SolutionItem(props: {
+  icon: StaticImageData
+  label: string
+  href: string
+  onNavigate: (href: string) => void
+}) {
+  return (
+    <button
+      type="button"
+      className="flex flex-col items-center gap-2 p-3 rounded-lg border border-gray-100 hover:border-blue-200 hover:bg-blue-50/50 transition-all"
+      onClick={() => props.onNavigate(props.href)}
+    >
+      <div className="w-10 h-10 bg-linear-to-br from-blue-50 to-cyan-50 rounded-full flex items-center justify-center">
+        <Image src={props.icon} alt="" width={20} height={20} className="opacity-80"/>
+      </div>
+      <span className="text-xs font-medium text-gray-700">{props.label}</span>
+    </button>
+  )
+}
+
+function HelpItem(props: {
+  icon: StaticImageData
+  label: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-gray-50 transition-colors"
+      onClick={props.onClick}
+    >
+      <Image src={props.icon} alt="" width={20} height={20} className="opacity-70"/>
+      <span className="text-sm text-gray-700">{props.label}</span>
+    </button>
+  )
+}
+
+function OtherLink(props: {
+  label: string
+  href: string
+  onNavigate: (href: string) => void
+}) {
+  return (
+    <button
+      type="button"
+      className="w-full flex items-center px-3 py-2.5 text-sm text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+      onClick={() => props.onNavigate(props.href)}
+    >
+      {props.label}
+    </button>
   )
 }

src/app/(home)/_components/header/menu-product.tsx

@@ -1,12 +1,13 @@
 'use client'
 import {ReactNode, useContext, useState} from 'react'
 import Wrap from '@/components/wrap'
+import Image, {StaticImageData} from 'next/image'
 import Link from 'next/link'
 import {merge} from '@/lib/utils'
 import prod from '@/assets/header/product/prod.svg'
 import custom from '@/assets/header/product/custom.svg'
 import {useRouter} from 'next/navigation'
-import {FragmentTitle, HeaderContext} from './common'
+import {HeaderContext} from './common'
 
 type TabType = 'domestic' | 'oversea'
 
@@ -53,32 +54,33 @@ export function Tab(props: {
 
 export function Domestic(props: {}) {
   return (
-    <section role="tabpanel" className="flex-auto flex flex-col lg:flex-row justify-evenly gap-3 lg:gap-0">
+    <section role="tabpanel" className="flex-auto">
-      <div className="w-full lg:w-64 flex flex-col">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-        <FragmentTitle img={prod} text="短效 IP"/>
+        <div className="grid grid-cols-1 gap-3">
-        <DomesticLink
+          <ProductCard
-          label="短效动态 IP"
+            icon={prod}
-          desc="全国 300+ 城市级定位节点，IP 池资源充足，自动高频切换。适用于数据采集、市场调研、SEO 优化等高并发场景。稳定可靠，响应迅速，助力业务高效运转。"
+            label="短效动态 IP"
-          href="/product?type=short"
+            discount="最低4.5折"
-          discount={45}
+            desc="全国 300+ 城市级定位节点，IP 池资源充足，自动高频切换。适用于数据采集、市场调研、SEO 优化等高并发场景。稳定可靠，响应迅速，助力业务高效运转。"
-        />
+            href="/product?type=short"
-      </div>
+          />
-      <div className="w-full lg:w-64 flex flex-col">
+          <ProductCard
-        <FragmentTitle img={prod} text="长效 IP"/>
+            icon={prod}
-        <DomesticLink
+            label="长效静态 IP"
-          label="长效动态 IP"
+            discount="最低4.5折"
-          desc="IP 存活时长可达数小时至数天，连接稳定不掉线。适用于账号养号、社交运营、电商管理等需要持续在线的场景。优质线路保障，为您的长期业务保驾护航。"
+            desc="IP 存活时长可达数小时至数天，连接稳定不掉线。适用于账号养号、社交运营、电商管理等需要持续在线的场景。优质线路保障，为您的长期业务保驾护航。"
-          href="/product?type=long"
+            href="/product?type=long"
-          discount={45}
+          />
-        />
+        </div>
-      </div>
+        <div className="flex flex-col gap-3">
-      <div className="w-full lg:w-64 flex flex-col">
+          <ProductCard
-        <FragmentTitle img={custom} text="业务定制"/>
+            icon={custom}
-        <DomesticLink
+            label="业务定制"
-          label="优质/企业/精选IP"
+            discount="1V1 专属服务"
-          desc="超 1000 家企业共同信赖之选！大客户经理全程 1 对 1 沟通，随时为您排忧解难，提供 24 小时不间断支持"
+            desc="超 1000 家企业共同信赖之选！大客户经理全程 1 对 1 沟通，随时为您排忧解难，提供 24 小时不间断支持"
-          href="/custom"
+            href="/custom"
-        />
+          />
+        </div>
       </div>
     </section>
   )
@@ -92,11 +94,12 @@ export function Oversea(props: {}) {
   )
 }
 
-export function DomesticLink(props: {
+export function ProductCard(props: {
+  icon: StaticImageData
   label: string
+  discount: string
   desc: string
   href: string
-  discount?: number
 }) {
   const router = useRouter()
   const ctx = useContext(HeaderContext)
@@ -116,18 +119,24 @@ export function DomesticLink(props: {
         `transition-colors duration-150 ease-in-out`,
         `p-4 rounded-lg flex flex-col gap-1 hover:bg-blue-50`,
       )}
-      onClick={onClick}>
+      onClick={onClick}
-      <p className="flex gap-2">
+    >
-        <span>{props.label}</span>
+      <div className="flex items-start gap-3">
-        {props.discount && (
+        <div className="flex-none">
-          <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
+          <Image src={props.icon} alt="" width={30} height={30}/>
-            折扣 {props.discount}%
+        </div>
-          </span>
+        <div className="flex-1">
-        )}
+          <div className="flex items-center justify-between gap-3">
-      </p>
+            <span className="font-bold">{props.label}</span>
-      <p className="text-gray-400 text-sm">
+            <span className="text-xs font-medium text-orange-600 bg-orange-50 px-2 py-1 rounded-full">
-        {props.desc}
+              {props.discount}
-      </p>
+            </span>
+          </div>
+          <div className="mt-2 text-sm text-gray-400 space-y-1">
+            {props.desc}
+          </div>
+        </div>
+      </div>
     </Link>
   )
 }

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

@@ -16,7 +16,7 @@ export default function CollectPage(props: CollectPageProps) {
     //   </Wrap>
     // </main>
     <HomePage path={[
-      {label: '短效IP 提取', href: '/collect'},
+      {label: '短效/长效IP 提取', href: '/collect'},
     ]}>
       <Wrap>
         <Extract/>

src/app/(home)/docs/(client)/android-proxy/page.mdx

@@ -0,0 +1,30 @@
+import Image from 'next/image';
+import android from './images/android.webp';
+import android01 from './images/android01.webp';
+import android02 from './images/android02.webp';
+
+# 安卓手机设置代理教程
+1、打开设置，进入WLAN
+    <Image 
+     src={android}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+   />
+2、选择已连接的WIFI网络,点小箭头进入设置页面
+    <Image 
+     src={android01}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+   />
+3、将代理设置为“手动”，填写主机名，端口信息，点击右上角保存
+    <Image 
+     src={android02}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+   />
+4、打开手机浏览器搜索IP地址查询，若查询结果和设置的代理IP一致，则代理设置成功
+
+

src/app/(home)/docs/(client)/browser-proxy/page.mdx

@@ -0,0 +1,25 @@
+import Image from 'next/image';
+import ieConfig from './images/ieConfig.webp';
+import lanConfig from './images/lanConfig.webp';
+
+# 浏览器代理设置教程
+
+打开IE浏览器，选择“设置”，点击“Internet选项”，在弹出的“局域网LAN设置”中，代理服务器的复选框打上勾，并填写从蓝狐HTTP获取的ip地址及端口号，点击确定，刷新浏览器，浏览器的IP就改变了。
+
+1、打开IE浏览器，选择“设置”；
+  <Image 
+     src={ieConfig}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+   />
+2、点击“Internet选项”；
+
+3、弹出“Internet选项”弹窗，选择连接—局域网设置；
+   <Image 
+     src={lanConfig}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+   />
+4、在弹出的“局域网LAN设置”中，代理服务器的复选框打上勾，并填写从蓝狐代理获取的ip地址及端口。点击确定，即设置成功了。

src/app/(home)/docs/(client)/ios-proxy/page.mdx

@@ -0,0 +1,36 @@
+import Image from 'next/image';
+import Ios from './images/Ios.webp';
+import ioS2 from './images/ioS2.webp';
+import ios3 from './images/ios3.webp';
+
+
+# iOS 设置代理教程
+
+1、打开设置，选择无线局域网
+
+2、找到已连接的wifi，点击最右侧的小图标
+    <Image 
+     src={Ios}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />
+
+3、进入配置代理界面，选择“手动”
+    <Image 
+     src={ioS2}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />
+
+4、填写服务器、端口，点击右上角存储
+    <Image 
+     src={ios3}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />
+
+
+5、在浏览器搜索IP地址查询，若查询结果和设置的代理IP一致，则代理设置成

src/app/(home)/docs/(client)/windows10-proxy/page.mdx

@@ -0,0 +1,21 @@
+import Image from 'next/image';
+import win10 from './images/win10.webp';
+import win101 from './images/win101.webp';
+
+# Windows10 电脑设置代理教程
+
+1、点击桌面右下角网络连接图标，选择"网络和Internet设置"选项
+    <Image 
+     src={win10}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />
+2、点击"代理"，将"使用代理服务器"设置为开，输入地址和端口后保存
+    <Image 
+     src={win101}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />
+3、浏览器打开百度，输入IP地址查询，若查询结果和设置的代理IP一致，则代理设置成功

src/app/(home)/docs/(operation)/extract-link/page.mdx

@@ -0,0 +1,47 @@
+import Image from 'next/image';
+import extract from './images/extract.webp';
+import extract01 from './images/extract01.webp';
+import extract02 from './images/extract02.webp';
+import extract03 from './images/extract03.webp';
+import extract04 from './images/extract04.webp';
+
+# 如何生成提取链接
+
+一、 进入控制台，选择提取IP页面，提取链接，需要满足一下条件：
+   1. 添加白名单，
+   2. 必须实名认证
+
+    <Image 
+     src={extract}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+   />
+   <Image 
+     src={extract02}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+   /> 
+二、 选择套餐和其他选项以及选择数量后，点击打开链接
+    <Image 
+     src={extract01}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    /> 
+
+三、 自动生成提取链接
+   <Image 
+     src={extract03}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />
+    <Image 
+     src={extract04}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />
+

src/app/(home)/docs/(operation)/payment-records/page.mdx

@@ -0,0 +1,27 @@
+import Image from 'next/image';
+import pay from './images/pay.webp';
+import pay01 from './images/pay01.webp';
+import pay02 from './images/pay02.webp';
+
+# 查看支付和使用记录
+
+1.  进入控制台，选择我的账单，查看当前支付记录
+    <Image 
+     src={pay}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />   
+2.  选择我的套餐，查看当前长效/短效的状态和使用记录
+    <Image 
+     src={pay01}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />
+    <Image 
+     src={pay02}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />

src/app/(home)/docs/(operation)/profile-settings/page.mdx

@@ -0,0 +1,38 @@
+import Image from 'next/image';
+import modify from './images/modify.webp';
+import modify01 from './images/modify01.webp';
+import modify02 from './images/modify02.webp';
+import modify03 from './images/modify03.webp';
+
+# 修改个人信息和重置密码
+
+1. 进入控制台
+    <Image 
+     src={modify02}  
+     alt="IE浏览器设置"  
+     width={'100%'}         
+     margin-top={'0'}
+    />
+2. 点击个人中心的基本信息页面，选择修改密码按钮
+    <Image 
+     src={modify}  
+     alt="IE浏览器设置"  
+     width={'100%'}  
+     margin-top={'0'}
+    />
+3. 选择重置密码
+    <Image 
+     src={modify01}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />
+4.修改个人基本信息
+   <Image 
+     src={modify03}  
+     alt="IE浏览器设置" 
+     width={'100%'}  
+     margin-top={'0'}
+    />
+
+

src/app/(home)/docs/(operation)/verify-guide/page.mdx

@@ -0,0 +1,38 @@
+import Image from 'next/image';
+import verify04 from './images/verify04.webp';
+import verify01 from './images/verify01.webp';
+import verify02 from './images/verify02.webp';
+import verify03 from './images/verify03.webp';
+import verify05 from './images/verify05.webp';
+
+# 如何进行实名认证
+
+一、个人认证
+
+1. 进入控制台页面，选择立即认证
+   <Image 
+     src={verify05}  
+     alt="IE浏览器设置"  
+     width={'100%'}         
+     margin-top={'0'}
+    />
+   <Image 
+     src={verify04}  
+     alt="IE浏览器设置"  
+     width={'100%'}         
+     margin-top={'0'}
+    />
+2. 点击立即认证。
+    <Image 
+     src={verify02}  
+     alt="IE浏览器设置"  
+     width={'100%'}         
+     margin-top={'0'}
+    />
+3. 输入身份证姓名及身份证号码，生成二维码使用支付宝扫描认证。认证通过后，平台账户标记为“个人认证”。
+    <Image 
+     src={verify03}  
+     alt="IE浏览器设置"  
+     width={'100%'}         
+     margin-top={'0'}
+    />

src/app/(home)/docs/(operation)/whitelist-guide/page.mdx

@@ -0,0 +1,35 @@
+import Image from 'next/image';
+import whitelist from './images/whitelist.webp';
+import whitelist01 from './images/whitelist01.webp';
+import whitelist02 from './images/whitelist02.webp';
+import whitelist03 from './images/whitelist03.webp';
+
+# 如何添加白名单
+
+1. 进入控制台，选择白名单，点击添加白名单，或选择提取IP，点击添加白名单。
+   <Image 
+     src={whitelist}  
+     alt="IE浏览器设置"  
+     width={'100%'}         
+     margin-top={'0'}
+    />
+    <Image 
+     src={whitelist01}  
+     alt="IE浏览器设置"  
+     width={'100%'}         
+     margin-top={'0'}
+    />
+2. 填写白名单的IP地址/当前IP地址，点击保存。
+    <Image 
+     src={whitelist02}  
+     alt="IE浏览器设置"  
+     width={'100%'}         
+     margin-top={'0'}
+    />
+3. 生成白名单记录。 
+    <Image 
+     src={whitelist03}  
+     alt="IE浏览器设置"  
+     width={'100%'}         
+     margin-top={'0'}
+    />

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

@@ -0,0 +1,108 @@
+# 如何选择适合您的蓝狐代理产品
+
+## 1. 选型前言
+
+在构建网络业务架构时，选择正确的代理 IP 产品至关重要。错误的选择不仅会导致不必要的成本浪费，更可能因为网络稳定性或策略冲突引发业务中断。
+
+蓝狐 HTTP 提供多种类型的代理产品，每种产品都有其特定的技术特性和最佳适用区。本文档旨在帮助您从**业务场景**、**技术指标**及**预算成本**三个维度出发，快速定位最适合您需求的产品方案。
+
+**核心原则：不选最贵的，只选最匹配业务逻辑的。**
+
+---
+
+## 2. 维度一：根据业务场景选型（核心决策点）
+
+这是最直观的选型方式。请根据您的核心业务行为，对应选择：
+
+### 场景 A：海量数据采集与高并发防封
+如果您的业务涉及全网资讯抓取、电商全站商品监控或市场舆情监听，且目标网站具有严格的访问频率限制，您面临的主要挑战是 IP 封禁。
+
+*   **推荐产品**：**[短效动态 IP]**
+*   **核心理由**：
+    *   利用每日 **3000万+** 的海量 IP 池，每次请求更换一个新 IP。
+    *   IP 存活时间短（3-30分钟，支持低至 1分钟定制），完成任务即释放，最大程度降低关联风险。
+    *   秒级响应速度，支撑高并发吞吐。
+
+### 场景 B：账号运营与长流程交互
+如果您的业务是电商店铺管理、社交媒体账号维护，或者爬虫流程非常复杂（涉及登录、验证码识别、多页面跳转），您面临的主要挑战是保持会话状态不中断。
+
+*   **推荐产品**：**[长效静态 IP]**
+*   **核心理由**：
+    *   提供 **1-24小时**（可定制至 72小时）的稳定存活期。
+    *   确保在整个操作流程中 IP 地址保持不变，避免因 IP 跳变导致登录凭证失效或触发异地登录风控。
+    *   **99.83%** 的高可用率，保障业务连续性。
+
+### 场景 C：白名单授权与固定环境部署
+如果您的业务需要访问对安全性要求极高的接口（如支付网关、企业内部数据库），或者需要将 IP 加入防火墙白名单，您面临的主要挑战是身份的唯一性与固定性。
+
+*   **推荐产品**：**[固定 IP]**
+*   **核心理由**：
+    *   **永久固定**的 IP 地址，就像拥有了一台独立的服务器。
+    *   **独享带宽**资源，纯净度极高，彻底隔离其他用户的干扰。
+    *   适合作为长期的网络基础设施部署。
+
+---
+
+## 3. 维度二：根据 IP 生命周期选型（技术参数）
+
+对于技术研发团队，您可以根据代码逻辑中所需的请求生命周期来决策：
+
+*   **极短周期（小于 30分钟）**
+    *   **推荐选择**：**短效动态 IP**
+    *   **适用逻辑**：适用于无状态请求。即每一次网络请求都可以使用一个新的身份，用完即弃。
+    
+*   **中长周期（1小时 至 72小时）**
+    *   **推荐选择**：**长效静态 IP**
+    *   **适用逻辑**：适用于需要保持登录状态或上下文关联的请求。需要在一段时间内模拟同一个用户在网页上的连续操作。
+
+*   **永久周期（长期持有）**
+    *   **推荐选择**：**固定 IP**
+    *   **适用逻辑**：适用于身份绑定。例如需要配置在服务器防火墙规则中，长期使用该固定 IP 进行通信。
+
+---
+
+## 4. 维度三：根据成本与计费模式选型（预算控制）
+
+蓝狐 HTTP 提供灵活的计费方式，根据您的业务运行规律选择可大幅节省成本：
+
+### 1. 潮汐式 / 波动型业务
+*   **推荐模式**：**按量计费（资源包）**
+*   **适用情况**：业务量不稳定，偶尔运行一次任务，或者是开发测试阶段。
+*   **优势**：购买 IP 数量包，余额永久有效，用多少扣多少，无闲置浪费。
+*   **适用产品**：短效动态 IP、长效静态 IP。
+
+### 2. 持续性 / 平稳型业务
+*   **推荐模式**：**按时计费（包月/包年）**
+*   **适用情况**：机器 7*24 小时不停机运行，业务量巨大且稳定。
+*   **优势**：在有效期内**不限制提取 IP 的总次数**（仅受并发数限制）。对于高频调用场景，单次提取成本极低。
+*   **适用产品**：全系产品。
+
+---
+
+## 5. 进阶选型：何时需要“企业定制池”？
+
+如果标准产品无法满足您的需求，请检查是否符合以下特征。若符合，建议联系商务开通 **[企业定制池]** 服务：
+
+1.  **超大规模**：日均采集页面超过 **10万+**，或并发连接需求达到 **10万级**。
+2.  **极致隔离**：无法接受公有池哪怕 1% 的资源竞争，要求物理或逻辑上的完全隔离（IP 重复率控制在 2% 以内）。
+3.  **特殊策略**：需要非常规的 IP 时长（如精确指定 45分钟）或特定稀缺城市的资源。
+4.  **混合架构**：需要“基础包时 + 弹性按量”的混合计费模式来应对突发流量。
+
+---
+
+## 6. 快速选型对照表
+
+| 您的核心需求 | 推荐产品 | 推荐计费模式 | 关键优势 |
+| :--- | :--- | :--- | :--- |
+| **防封锁、高并发抓取** | **短效动态 IP** | 量大选包时，量小选按量 | 3000万池子，秒级切换 |
+| **保会话、账号运营** | **长效静态 IP** | 按需选择 | 24-72h 稳定在线，不掉线 |
+| **加白名单、独享环境** | **固定 IP** | 包月/包年 | 永久固定，独享带宽 |
+| **超大规模、特殊定制** | **企业定制池** | 混合计费 | 资源隔离，按需参数定制 |
+
+<!------->
+
+<!--### 相关链接
+*   [查看短效动态 IP 产品详情](URL_PLACEHOLDER_1)
+*   [查看长效静态 IP 产品详情](URL_PLACEHOLDER_2)
+*   [查看固定 IP 产品详情](URL_PLACEHOLDER_3)
+*   [联系企业定制顾问](URL_PLACEHOLDER_4)-->

src/app/(home)/docs/(product)/city-lines/page.mdx

@@ -0,0 +1,56 @@
+# 线路节点分布与运营商覆盖
+
+## 1. 覆盖概览
+
+蓝狐 HTTP 依托于每日 **3000万+** 的海量资源池，构建了覆盖中国大陆全境的高密度代理网络。我们的节点遍布全国 **31个** 省、直辖市及自治区，覆盖超过 **300个** 地级市，能够满足从一线城市到偏远地区的精细化采集需求。
+
+*   **地域范围**：中国大陆全境（不含港澳台地区）。
+*   **线路类型**：真实家庭宽带/基站网络，高匿名度。
+
+## 2. 区域分布详情
+
+我们在以下行政区域均部署有稳定的服务器节点：
+
+| 区域划分 | 覆盖省/直辖市/自治区 |
+| :--- | :--- |
+| **华北地区** | 北京、天津、河北、山西、内蒙古 |
+| **华东地区** | 上海、江苏、浙江、安徽、福建、江西、山东 |
+| **华南地区** | 广东、广西、海南 |
+| **华中地区** | 河南、湖北、湖南 |
+| **西南地区** | 重庆、四川、贵州、云南、西藏 |
+| **西北地区** | 陕西、甘肃、青海、宁夏、新疆 |
+| **东北地区** | 黑龙江、吉林、辽宁 |
+
+> **注意**：部分稀缺地区（如西藏、新疆等）的 IP 存活周期可能与热门地区略有差异，建议结合**长效静态 IP** 产品使用以获得更优体验。
+
+## 3. 运营商支持
+
+为满足业务合规测试及特定网络环境模拟的需求，我们支持对以下三大基础运营商（移动，联通，电信）线路进行精准筛选，用户可根据业务需求选择单一运营商，或使用默认的**全局混播模式**以获取最大的 IP 离散度。
+
+## 4. 如何指定城市与线路
+
+在调用 API 提取 IP 时，您可以通过增加 URL 参数来指定地理位置和运营商。
+
+### 接口参数说明
+参考 [API 提取文档](/api-docs)，使用以下参数控制筛选逻辑：
+
+*   `a` (String)：**省份名称**。例如：`四川省`、`上海市`。
+*   `b` (String)：**城市名称**。例如：`成都市`（需先指定省份 `a`）。
+*   `s` (String)：**运营商**。可选值：`电信`、`联通`、`移动`。
+
+### 调用示例
+
+**场景 A：需要“广东省 深圳市”的“移动”IP**
+```http
+GET https://lanhuip.com/api/extract?i=1&t=2&a=广东省&b=深圳市&s=移动
+```
+
+**场景 B：需要“浙江省”全境的任意运营商 IP**
+```http
+GET https://lanhuip.com/api/extract?i=1&t=2&a=浙江省
+```
+
+**场景 C：不限地区，仅筛选“电信”IP**
+```http
+GET https://lanhuip.com/api/extract?i=1&t=2&s=电信
+```

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

@@ -0,0 +1,105 @@
+# 蓝狐代理产品文档
+
+本文档旨在详细介绍蓝狐 HTTP 提供的全系代理 IP 产品特性、技术参数及适用业务场景。文档将从 IP 生命周期、网络稳定性及计费逻辑等维度对不同产品线进行深度解析，协助技术团队与业务部门根据实际需求构建网络解决方案。
+
+## 1. 产品体系概览
+
+蓝狐 HTTP 根据 IP 资源的时效长短、持有方式及资源独享性，将产品划分为四个主要类别。不同类别的产品在网络架构中承担着不同的角色，具体差异如下表所示：
+
+| 产品系列 | 资源特性 | 技术定位 | 典型应用架构 |
+| :--- | :--- | :--- | :--- |
+| **短效动态 IP** | 高频轮转、海量公网池 | 解决高并发请求下的 IP 封禁问题 | 分布式爬虫、大规模数据清洗 |
+| **长效静态 IP** | 长周期存活、高可用 | 维持长会话（Session）连接稳定性 | 自动化运营、API 接口同步 |
+| **固定 IP** | 永久固定、独享带宽 | 提供服务器级的网络白名单环境 | 支付网关访问、固定环境部署 |
+| **企业定制池** | 物理/逻辑隔离、参数定制 | 满足超大规模与特殊策略的业务 | AI 模型训练、全网监测系统 |
+
+---
+
+## 2. 短效动态 IP
+
+短效动态 IP 是基于大规模分布式网络构建的高频代理服务。该产品线的核心逻辑在于通过快速轮转 IP 地址，帮助用户在大规模数据采集场景下规避目标服务器的访问频率限制。
+
+### 2.1 技术特性与资源规模
+该产品依托于每日更新量超过 **3000万** 的庞大 IP 资源池，能够为业务提供极高的网络离散度。
+*   **高频轮转机制**：系统默认提供 3至30 分钟的 IP 存活周期，同时也支持低至 1 分钟的极速轮转定制，确保每个 IP 在完成单次或少量任务后即被释放，最大程度降低关联风险。
+*   **低延迟响应**：通过全国多节点部署，平均请求响应速度优化至 **0.03秒**。配合 **99.8%** 的连通率，能够显著提升高并发爬虫系统的吞吐量。
+*   **地域覆盖**：支持全国范围内的混播模式，亦可根据业务需求指定特定省份或城市的 IP 资源，满足本地化业务的数据采集需求。
+
+### 2.2 适用场景说明
+短效动态 IP 适用于对 IP 更换频率要求极高、单次连接时间较短的“无状态”或“短状态”业务：
+*   **公开数据采集**：如电商全站SKU抓取、新闻资讯聚合、社交媒体舆情监听。
+*   **市场竞品监控**：高频次访问竞争对手页面以获取价格、库存等变动信息。
+*   **业务合规测试**：模拟不同地区用户访问，验证广告投放策略或内容展示逻辑。
+
+### 2.3 计费模式解析
+针对不同规模的业务模型，提供两种计费逻辑：
+*   **按量计费（资源包）**：以提取 IP 数量为结算单位。该模式下资源包无使用期限限制，余额永久有效。适用于业务量波动较大、非全天候运行的项目。
+*   **按时计费（包时）**：以时间为结算单位。在有效期内不限制 IP 提取次数（受并发限制）。适用于业务量巨大且持续运行的 7*24 小时项目，单位成本更具优势。
+
+---
+
+## 3. 长效静态 IP
+
+与短效 IP 侧重于“躲避封锁”不同，长效静态 IP 旨在解决“连接稳定性”问题。该产品提供更长的 IP 存活周期，确保在执行复杂交互任务时网络标识保持不变。
+
+### 3.1 稳定性与存活周期
+长效静态 IP 强调连接的持久性，能够支持长周期的网络会话保持。
+*   **灵活的时效配置**：标准服务提供 1至24 小时的存活时长，针对特殊业务需求，系统支持定制长达 72 小时的超长效资源。
+*   **高可用保障**：每日提供超过 **10万** 个稳定在线的 IP 资源，可用率维持在 **99.83%** 以上。这种高稳定性对于需要维持 Cookie 或 Session 有效性的业务至关重要，能有效减少因 IP 变动导致的账号登出或验证中断。
+*   **精准属性匹配**：支持对热门地区或稀缺地区的精确筛选，满足特定地理位置的业务模拟需求。
+
+### 3.2 适用场景说明
+该产品适用于需要长时间保持登录状态或建立稳定信任关系的业务：
+*   **账号运营管理**：适用于跨境电商店铺管理、社交媒体账号的日常维护与互动。
+*   **API 数据对接**：用于需要一定时间内 IP 保持不变的第三方接口调用。
+*   **复杂交互爬虫**：针对需要多次跳转、验证码识别等复杂流程的采集任务，确保全流程在同一 IP 下完成。
+
+---
+
+## 4. 固定 IP
+
+固定 IP 产品提供类似于独立服务器或专线的网络体验。一旦订购，该 IP 地址将在整个服务周期内归属用户专有，且物理地址与网络标识保持绝对固定。
+
+### 4.1 独享性与安全性
+固定 IP 的核心价值在于其“独享”与“不变”的属性。
+*   **专属资源隔离**：不同于共享池，固定 IP 为用户独占资源，彻底消除了因其他用户的不当操作导致 IP 被连带封禁的风险。
+*   **服务器级配置**：标配 **4M** 独享带宽（支持按需扩容），提供 **99.83%** 的极高纯净度与稳定性。网络连接具备极高的抗干扰能力，适合对传输质量有严格要求的金融级业务。
+
+### 4.2 适用场景说明
+*   **白名单访问授权**：适用于需要向目标服务器（如内部数据库、合作方 API）提供固定 IP 进行防火墙白名单授权的场景。
+*   **高安全级别业务**：如金融支付接口调用、企业级账号的专属登录环境。
+*   **长期服务部署**：适用于需要长期挂机或部署固定网络服务的业务节点。
+
+---
+
+## 5. 企业级定制池
+
+面对大型企业或特殊垂直领域的复杂业务需求，标准化的公有池产品可能难以完全适配。企业级定制池服务通过构建物理或逻辑隔离的专属网络环境，提供全维度的资源定制能力。
+
+### 5.1 全栈定制与隔离架构
+*   **资源池隔离**：为企业客户构建独立的 IP 资源池，将 IP 重复率严格控制在 **≤2%**，有效避免公有池的资源竞争问题。
+*   **性能参数自定义**：企业可根据业务模型，对 IP 的带宽上限、并发连接数（支持 **10万级** 并发）、生存周期及地域分布进行全参数定义。
+*   **运维监控体系**：提供可视化的管理控制台，支持实时流量监控、用量统计及异常报警，配合 7*24 小时的技术专家团队响应，确保核心业务的连续性。
+
+### 5.2 合作与交付模式
+企业级服务采用灵活的交付与计费策略：
+*   **阶梯式定价**：根据日均采集规模（如日均处理 10万+ 页面）、带宽占用及定制化功能模块进行成本核算。
+*   **混合计费支持**：支持“基础包时 + 弹性按量”的混合计费架构，在保障基础业务成本可控的同时，灵活应对突发性的流量峰值。
+
+---
+
+## 6. 业务选型指南
+
+在选择合适的产品套餐时，建议从业务逻辑出发，按照以下三个维度进行评估：
+
+**1. 业务类型维度**
+*   若业务属于**离散型数据采集**，目标网站反爬策略严格，需频繁更换 IP，应选择 **短效动态 IP**。
+*   若业务涉及**账号登录与状态保持**，需要稳定的会话环境，应选择 **长效静态 IP**。
+*   若业务涉及**网络白名单授权**或极高安全性的独享需求，应选择 **固定 IP**。
+
+**2. 运行频率维度**
+*   **潮汐式业务**：业务量存在明显波峰波谷，建议选择 **按量计费**，避免闲置资源浪费。
+*   **持续性业务**：业务全天候稳定运行，建议选择 **按时计费（包月/包年）**，以获得更优的单位成本。
+
+**3. 采购规模维度**
+*   对于**大规模企业级应用**，建议直接申请 **企业定制池** 服务，通过专属资源池隔离与阶梯折扣，实现性能与成本的双重优化。

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

@@ -0,0 +1,57 @@
+# 为什么需要实名认证
+
+在蓝狐 HTTP 的服务体系中，实名认证不仅是一项必须履行的法律义务，更是保障平台 IP 资源纯净度、提升用户业务稳定性的核心风控手段。
+
+本文档将向您阐述实名认证的必要性，以及它如何切实保护您的账户安全与业务利益。
+
+## 1. 法律法规与合规义务
+
+根据《中华人民共和国网络安全法》、《中华人民共和国反电信网络诈骗法》及工信部相关规定，提供互联网接入服务（包括代理 IP 服务）的运营商必须落实用户实名制管理。
+
+*   **合规底线**：蓝狐 HTTP 严格执行“后台实名，前台自愿”的监管要求。所有接入中国大陆境内网络节点的用户，必须完成身份核验。
+*   **服务范围**：未完成实名认证的账户，将无法调用国内节点的短效动态 IP、长效静态 IP 及固定 IP 等资源。
+
+## 2. 提升 IP 资源纯净度与连通率
+
+实名认证是蓝狐构建高品质网络的“第一道防火墙”。通过严格的准入机制，我们能为您带来实质性的业务优势：
+
+### 2.1 净化短效动态 IP 池
+我们的短效动态 IP 产品依托于每日 3000万+ 的资源池。如果缺乏身份门槛，恶意用户（如网络攻击、电信诈骗、黑灰产）将滥用这些 IP，导致 IP 被目标网站（如电商平台、社交媒体）大面积拉黑。
+
+*   **认证带来的价值**：实名认证有效拦截了恶意行为者，确保您提取到的每一个 IP 都是“身家清白”的。这是我们将 IP 连通率维持在 **99.8%**、平均响应速度优化至 **0.03秒** 的基础保障。
+
+### 2.2 保障固定 IP 的独享稳定性
+对于使用固定 IP 或企业定制池的客户，您使用的是服务器级的独享带宽资源。
+
+*   **认证带来的价值**：如果您的网络“邻居”是违规用户，可能导致整个机房网段被运营商封禁或被防火墙降权。实名认证体系确保了所有入驻用户均为合规业务，为您提供一个安全、稳定、无连带风险的独享带宽环境。
+
+## 3. 账户资产安全保障
+
+对于开发者和企业用户，代理服务账号通常绑定了充值余额和重要的业务配置。
+
+*   **防止 API 盗刷**：若您的 API 提取链接或账号密码不慎泄露，恶意第三方可能会盗刷您的余额。实名认证信息是您证明账户所有权、申请冻结止损及找回账户的最高权限凭证。
+*   **权益纠纷处理**：在涉及发票开具、合同签订或业务纠纷时，实名信息是确认法律主体权益归属的唯一依据。
+
+## 4. 隐私保护与数据安全承诺
+
+蓝狐 HTTP 深知技术团队对数据隐私的敏感度。我们承诺以金融级的安全标准管理您的身份信息：
+
+*   **数据脱敏存储**：您的身份证件、营业执照等敏感信息仅用于系统底层的备案核验，采用 AES-256 高强度加密存储。
+*   **权限严格隔离**：实名认证数据与业务逻辑数据（如您的爬虫策略、访问日志）完全物理隔离。
+*   **绝不违规泄露**：我们承诺，除配合国家法定监管部门（如公安、网监）的协查要求外，绝不向任何第三方公司或个人提供您的实名信息。
+
+## 5. 常见问题
+
+**Q：我是企业用户，必须使用公司信息认证吗？**
+A：是的。为了便于后续开具企业发票及申请企业定制池服务，建议使用企业营业执照进行认证。
+
+**Q：实名认证审核需要多久？**
+A：通常情况下，系统会自动对接权威数据库进行校验，提交后即时生效。若涉及复杂资料（如海外企业认证），人工审核通常在 1-2 个工作日内完成。
+
+**Q：如果我不进行实名认证，可以使用服务吗？**
+A：根据监管要求，未认证账户将受到严格的功能限制，无法提取和使用国内代理节点，且无法进行充值操作。
+
+---
+
+**立即完成认证，解锁全能服务：**
+👉 [前往控制台 - 账号管理 - 实名认证](/admin/identify)

src/app/(home)/docs/android-proxy/page.mdx

@@ -1,9 +0,0 @@
-# 安卓手机设置代理教程
-
-1、打开设置，进入WLAN
-
-2、选择已连接的WIFI网络,点小箭头进入设置页面
-
-3、将代理设置为"手动"，填写主机名，端口信息，点击右上角保存
-
-4、打开手机浏览器搜索IP地址查询，若查询结果和设置的代理IP一致，则代理设置成功

src/app/(home)/docs/browser-proxy/page.mdx

@@ -1,43 +0,0 @@
-# 浏览器代理设置教程（IE浏览器版）
-
-## 概述
-本教程详细介绍如何在 **Internet Explorer（IE）浏览器** 中设置HTTP代理。按照以下步骤操作，您可以在几分钟内完成代理配置，实现网络访问地址的变更。
-
-## 详细步骤
-
-### 第一步：打开浏览器设置
-1. 启动 **Internet Explorer** 浏览器
-2. 点击右上角的 **齿轮图标**（工具菜单）
-3. 在下拉菜单中选择 **"Internet 选项"**
-
-### 第二步：进入连接设置
-1. 在弹出的 "Internet 选项" 窗口中
-2. 切换到 **"连接"** 标签页
-3. 点击右下角的 **"局域网设置"** 按钮
-
-### 第三步：配置代理服务器
-1. 在 "局域网(LAN)设置" 窗口中，找到 **代理服务器** 部分
-2. **勾选** "为 LAN 使用代理服务器"
-3. 填写代理信息：
-   - **地址**：输入从代理服务商（如蓝狐HTTP）获取的IP地址
-   - **端口**：输入对应的端口号
-4. （可选）如需设置高级选项：
-   - 点击 **"高级"** 按钮
-   - 可为不同协议（HTTP、HTTPS、FTP）单独设置代理
-   - 可配置例外列表（不使用代理的地址）
-
-### 第四步：保存并生效
-1. 点击 **"确定"** 保存局域网设置
-2. 再次点击 **"确定"** 关闭Internet选项窗口
-3. **刷新浏览器页面**（按F5或点击刷新按钮）
-4. 访问IP检测网站（如ip138.com）验证IP是否已更改
-
-## 配置示例
-```yaml
-# 代理配置参数示例（根据实际服务商提供的信息填写）
-代理类型: HTTP
-服务器地址: 110.123.45.67  # 替换为实际IP
-端口号: 8080               # 替换为实际端口
-使用范围: 当前IE浏览器
-立即生效: 是
-```

src/app/(home)/docs/firefox-proxy/page.mdx

@@ -1,28 +0,0 @@
-# Firefox 设置 HTTP/Socks5 代理
-
-Firefox 提供了多种代理设置方式，支持 HTTP/HTTPS 和 SOCKS5 协议。本教程将详细介绍各种配置方法。
-
-## 配置方法概览
-
-| 方法 | 适用场景 | 复杂度 | 持久性 |
-|------|----------|--------|--------|
-| 手动设置 | 单用户临时使用 | 低 | 重启浏览器失效 |
-| 自动代理(PAC) | 企业环境 | 中 | 永久 |
-| 扩展程序 | 灵活切换规则 | 高 | 永久 |
-| 系统级代理 | 全局代理 | 低 | 系统重启失效 |
-
-## 手动代理设置
-
-### 打开代理设置页面
-
-1. **点击菜单按钮**（右上角三横线）
-2. 选择 **设置**（或直接访问 `about:preferences`）
-3. 滚动到页面底部
-4. 点击 **网络设置** → **设置**
-
-```javascript
-// 快速访问代理设置的地址
-about:preferences#general
-// 或直接
-about:preferences
-```

src/app/(home)/docs/fixed-package/page.mdx

@@ -1,9 +0,0 @@
-# 长效固定套餐操作手册
-
-一、打开官网产品订购页，选择固定IP套餐，平台支持按需选择全国城市/地区，套餐按照周/月/双月/季/年售卖；
-
-二、套餐购买成功后，直接点击进入【个人中心】-【IP管理】-【固定IP】tab处，即可看到你所购买的套餐详情，您可以通过重置、查询、导出等操作具体查看；
-
-三、打开电脑设置中的【代理服务器配置】，输入您的套餐中的IP地址&端口号并点击保存
-
-四、打开游览器，输入账号&密码即可连接成功；查询本机IP地址，即可看到

src/app/(home)/docs/http-notes/page.mdx

@@ -1,5 +0,0 @@
-# 使用 HTTP 代理注意事项
-
-- 注意隐私与安全
-- 检查代理是否支持 HTTPS
-- 避免在不受信任网络输入敏感信息

src/app/(home)/docs/ios-proxy/page.mdx

@@ -1,35 +0,0 @@
-# iOS 设置代理教程
-
-本教程详细指导您在 iPhone 和 iPad 上配置代理服务器的完整步骤。
-
-## 开始前的准备
-
-在开始配置前，请确保您已获得以下信息：
-- **代理服务器地址**（如：proxy.example.com 或 192.168.1.100）
-- **端口号**（如：8080、8888）
-- 如需认证：**用户名和密码**
-- 企业网络可能需要的 **自动配置脚本 URL**
-
-## 📱 Wi-Fi 网络代理设置（主要方式）
-
-### 第一步：进入网络设置
-1. 打开 **"设置"** 应用
-2. 点击 **"无线局域网"**（Wi-Fi）
-3. 确保已连接到需要设置代理的 Wi-Fi 网络
-4. 点击当前 Wi-Fi 名称右侧的 **蓝色信息图标 (ⓘ)**
-
-### 第二步：找到代理配置选项
-1. 在 Wi-Fi 详细信息页面中向下滑动
-2. 找到 **"配置代理"** 选项（通常在页面底部）
-3. 默认状态为 **"关闭"**
-
-### 第三步：选择代理模式
-
-点击"配置代理"，您会看到三种选项：
-
-```yaml
-# 模式选择说明
-关闭: 不使用代理
-自动: 使用自动配置脚本（.pac文件）
-手动: 手动输入代理服务器信息
-```

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

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

src/app/(home)/docs/mac-proxy/page.mdx

@@ -1,37 +0,0 @@
-# macOS 设置代理教程
-
-本教程详细指导您在 macOS 上配置代理服务器的完整步骤。
-
-## 开始前的准备
-
-在开始配置前，请确保您已获得以下信息：
-- **代理服务器地址**（如：proxy.example.com 或 192.168.1.100）
-- **端口号**（如：8080、8888）
-- 如需认证：**用户名和密码**
-- 企业网络可能需要的 **自动配置脚本 URL**
-
-## 📱 Wi-Fi 网络代理设置（主要方式）
-
-### 第一步：进入网络设置
-1. 打开 **"系统设置"** 应用
-2. 点击 **"网络"** 或 **"Wi-Fi"**
-3. 确保已连接到需要设置代理的 Wi-Fi 网络
-4. 点击 **"详情"** 或 **"高级"**
-
-### 第二步：找到代理配置选项
-1. 在网络详细信息页面中找到 **"代理"** 选项
-2. 默认状态为 **"关闭"**
-
-### 第三步：选择代理模式
-
-点击"配置代理"，您会看到几种选项：
-
-```yaml
-# 模式选择说明
-关闭: 不使用代理
-自动代理发现: 自动发现代理
-自动代理配置: 使用自动配置脚本（.pac文件）
-网页代理(HTTP): 手动配置 HTTP 代理
-安全网页代理(HTTPS): 手动配置 HTTPS 代理
-SOCKS代理: 手动配置 SOCKS 代理
-```

src/app/(home)/docs/official-tutorial/page.mdx

@@ -1,11 +0,0 @@
-# 浏览器设置代理教程
-
-打开IE浏览器，选择"设置"，点击"Internet选项"，在弹出的"局域网LAN设置"中，代理服务器的复选框打上勾，并填写从蓝狐HTTP获取的ip地址及端口号，点击确定，刷新浏览器，浏览器的IP就改变了。
-
-1、打开IE浏览器，选择"设置"；
-
-2、点击"Internet选项"；
-
-3、弹出"Internet选项"弹窗，选择连接—局域网设置；
-
-4、在弹出的"局域网LAN设置"中，代理服务器的复选框打上勾，并填写从蓝狐HTTP代理获取的ip地址及端口。点击确定，即设置成功了。

src/app/(home)/docs/online-ip-proxy/page.mdx

@@ -1,3 +0,0 @@
-# 在线 IP 代理地址
-
-如何获取在线 IP 代理地址并在客户端或浏览器中配置和测试。

src/app/(home)/docs/package-operations/page.mdx

@@ -1,29 +0,0 @@
-# 套餐续费、合并、修改时效、补量操作
-
-一、套餐续费
-
-1.登录个人中心-套餐管理页面，选择对应购买的套餐类型，点击续费按钮；
-
-2.支付后，即可成功续费。专属定制套餐，按定制价格续费；官网购买的套餐，按官网最新的活动价格进行续费
-
-二、合并套餐（仅针对IP时效、套餐类型、IP类型完全一样的包量套餐）
-
-1.进入个人中心-套餐管理页面，选择对应购买的套餐类型，点击【合并套餐】；
-
-2.输入被合并的套餐ID，点击确定。合并成功后，被合并的包量套餐IP总量增加，合并的包量套餐变更为"用完"。
-
-三、修改时效
-
-1.进入个人中心-套餐管理页面，选择对应购买的套餐类型，点击管理下拉，选中【修改时效】；
-
-2.选择需要变更的IP时效，系统会自动换算出剩余IP总量。你也可以手动设置IP总量，多出的部分需要支付差价。
-
-（续费、合并、增量、定制的套餐无法修改时效）
-
-四、补量
-
-1.进入个个人中心-套餐管理页面，选择对应购买的包时套餐类型，选中【补量】按钮；
-
-2.每日补量数量可手动修改，支付成功后立即生效。
-
-（定制套餐无法补量，需要联系您的专属销售进行操作）

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

@@ -1,5 +1,8 @@
 export default function DocsIndexPage() {
   return (
-    <div></div>
+    <div className="text-center text-slate-500 py-12">
+      <p className="text-lg">欢迎来到帮助中心</p>
+      <p className="text-sm mt-2">请从左侧目录选择需要查看的文档</p>
+    </div>
   )
 }

src/app/(home)/docs/product-cert/page.mdx

@@ -1,3 +0,0 @@
-# 实名认证与证书
-
-关于实名认证、证书相关说明（占位）。

src/app/(home)/docs/product-features/page.mdx

@@ -1,3 +0,0 @@
-# 产品功能
-
-产品功能列表与说明部分待完善，敬请期待。

src/app/(home)/docs/product-overview/page.mdx

@@ -1,3 +0,0 @@
-# 产品概述
-
-暂未产品概述，后期会补充内容，敬请期待。

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

@@ -0,0 +1,37 @@
+'use client'
+import {useState} from 'react'
+import {Menu} from 'lucide-react'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from '@/components/ui/drawer'
+import Sidebar from './sidebar'
+
+export default function SidebarDrawer() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="md:hidden flex items-center justify-between bg-white rounded-lg p-3">
+      <span className="font-medium text-slate-900">帮助中心</span>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <button className="flex items-center gap-2 text-slate-600 hover:text-slate-900 p-1 cursor-pointer">
+            <Menu size={20}/>
+            <span className="text-sm">目录</span>
+          </button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <div className="mx-auto w-full max-w-sm">
+            <div className="px-4 py-3 border-b">
+              <h3 className="text-lg font-semibold text-slate-900">帮助中心</h3>
+            </div>
+            <div className="px-2 py-2 max-h-[70vh] overflow-y-auto">
+              <Sidebar onClose={() => setOpen(false)}/>
+            </div>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  )
+}