动态生成购买套餐 & 取消初次进后台修改密码的弹窗 & 添加总折扣字段 & 发布v1.5.0版本

.env.example

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

.github/copilot-instructions.md

@@ -122,7 +122,7 @@ type UserProfile = ExtraResp<typeof getProfile>
 ## 环境变量
 
 需要配置:
-- `NEXT_PUBLIC_API_BASE_URL` - 后端 API 地址
+- `API_BASE_URL` - 后端 API 地址
 - `CLIENT_ID`, `CLIENT_SECRET` - OAuth2 设备认证凭据
 
 ## 部署

.gitignore

@@ -31,7 +31,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
+.env
 
 # vercel
 .vercel

.husky/pre-commit

@@ -1 +1 @@
-bun run lint
+#bun run lint

.npmrc

@@ -1,2 +1 @@
-http-proxy=http://localhost:10808
-registry=https://registry.npmmirror.com
+registry=https://registry.npmmirror.com

.vscode/settings.json

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

Dockerfile

@@ -1,11 +1,10 @@
-FROM oven/bun:1.2.19-alpine AS base
+FROM oven/bun:1.3.2-alpine AS base
 
 # 依赖缓存阶段
 FROM base AS deps
 WORKDIR /app
 
-COPY package.json bun.lock ./
-RUN bun config set registry https://registry.npmmirror.com
+COPY package.json bun.lock .npmrc ./
 RUN bun install --frozen-lockfile
 
 # 构建阶段
@@ -17,6 +16,7 @@ COPY . .
 
 ENV NEXT_TELEMETRY_DISABLED=1
 
+RUN mv .env.example .env
 RUN bun run build
 
 # 生产阶段
@@ -32,6 +32,7 @@ RUN adduser --system --uid 1001 nextjs
 COPY --from=builder /app/public ./public
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+RUN rm .env
 
 USER nextjs
 

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": "portal",
-  "version": "0.1.0",
+  "name": "lanhu-web",
+  "version": "1.5.0",
   "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 repo.lanhuip.com:8554/lanhu/web:latest .
+docker build -t repo.lanhuip.com:8554/lanhu/web:$($args[0]) .
+
+docker push repo.lanhuip.com:8554/lanhu/web:latest
+docker push repo.lanhuip.com:8554/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'
-
-type TokenResp = {
-  access_token: string
-  refresh_token: string
-  expires_in: number
-  token_type: string
-  scope?: string
-}
+import {callByDevice, callByUser, TokenResp} from '@/actions/base'
 
 export type LoginMode = 'phone_code' | 'password'
 

src/actions/base.ts

@@ -1,8 +1,23 @@
 '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
+}
+
+export async function getApiUrl() {
+  return {
+    success: true,
+    data: API_BASE_URL,
+  } satisfies ApiResponse<string>
+}
 
 // ======================
 // public
@@ -26,6 +41,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 +55,20 @@ const _callByDevice = cache(async <R = undefined>(
   endpoint: string,
   data?: string,
 ): Promise<ApiResponse<R>> => {
-  // 获取设备令牌
-  if (!CLIENT_ID || !CLIENT_SECRET) {
-    return {
-      success: false,
-      status: 401,
-      message: '未配置 CLIENT_ID 或 CLIENT_SECRET',
+  if (!token || !token_expire || isBefore(token_expire, new Date())) {
+    const basic = Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString('base64url')
+    const resp = await call<TokenResp>(`${API_BASE_URL}/api/auth/token`, JSON.stringify({
+      grant_type: 'client_credentials',
+    }), `Basic ${basic}`)
+    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 +169,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/channel.ts

@@ -32,5 +32,5 @@ export async function createChannels(params: {
   city?: string
   isp?: number
 }) {
-  return callPublic<CreateChannelsResp[]>('/api/channel/create', params)
+  return callByUser<CreateChannelsResp[]>('/api/channel/create', params)
 }

src/actions/product.ts

@@ -0,0 +1,12 @@
+import {callByUser, callPublic} from './base'
+import {Product} from '@/lib/models/product'
+
+export type ProductItem = Product
+
+export async function listProduct(props: {}) {
+  return callByUser<Product[]>('/api/product/list', props)
+}
+
+export async function listProductHome(props: {}) {
+  return callPublic<Product[]>('/api/product/list', props)
+}

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
@@ -89,7 +91,7 @@ export async function payClose(props: {
 export async function getPrice(props: CreateResourceReq) {
   return callByDevice<{
     price: string
-    discounted_price?: string
-    discounted?: number
+    actual?: string
+    discounted?: string
   }>('/api/resource/price', props)
 }

src/actions/user.ts

@@ -38,16 +38,16 @@ export async function Identify(props: {
 }
 
 export async function update(props: {
-  username: string
-  email: string
-  contact_qq: string
-  contact_wechat: string
+  username?: string
+  email?: string
+  contact_qq?: string
+  contact_wechat?: string
 }) {
   return await callByUser('/api/user/update', props)
 }
 
 export async function updatePassword(props: {
-  phone: string
+  // phone: string
   code: string
   password: string
 }) {

src/actions/verify.ts

@@ -1,6 +1,6 @@
 'use server'
 import {ApiResponse} from '@/lib/api'
-import {callByDevice} from '@/actions/base'
+import {callByDevice, callByUser} from '@/actions/base'
 import {getCap} from '@/lib/cap'
 
 export async function sendSMS(props: {
@@ -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,
     })
@@ -38,3 +38,35 @@ export async function sendSMS(props: {
     throw new Error('验证码验证失败', {cause: error})
   }
 }
+
+export async function updateSendSMS(props: {
+  captcha: string
+}): Promise<ApiResponse> {
+  try {
+    // 人机验证
+    if (!props.captcha?.length) {
+      return {
+        success: false,
+        status: 400,
+        message: '请输入验证码',
+      }
+    }
+
+    const cap = await getCap()
+    const valid = await cap.validateToken(props.captcha)
+    if (!valid) {
+      return {
+        success: false,
+        status: 400,
+        message: '验证码错误或已过期',
+      }
+    }
+
+    // 请求发送短信
+    return await callByUser('/api/verify/sms/password', {})
+  }
+  catch (error) {
+    console.error('验证码验证失败:', error)
+    throw new Error('验证码验证失败', {cause: error})
+  }
+}

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

@@ -2,9 +2,8 @@ import {NextRequest, NextResponse} from 'next/server'
 import {createChannels} from '@/actions/channel'
 
 export async function GET(req: NextRequest) {
+  const params = req.nextUrl.searchParams
   try {
-    const params = req.nextUrl.searchParams
-
     const resource_id = params.get('i')
     if (!resource_id) {
       throw new Error('需要指定资源ID')

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

@@ -15,8 +15,7 @@ import {toast} from 'sonner'
 import {useRouter} from 'next/navigation'
 import {login, LoginMode} from '@/actions/auth'
 import {useProfileStore} from '@/components/stores/profile'
-import SendMsg from '@/components/send-msg'
-import '@cap.js/widget'
+import dynamic from 'next/dynamic'
 
 const smsSchema = zod.object({
   username: zod.string().length(11, '请输入正确的手机号码'),
@@ -35,20 +34,12 @@ export type LoginSchema = zod.infer<typeof smsSchema | typeof pwdSchema>
 export default function LoginCard() {
   const router = useRouter()
   const refreshProfile = useProfileStore(store => store.refreshProfile)
-  const [mode, setMode] = useState<LoginMode>('phone_code')
+  const [mode, setMode] = useState<LoginMode>('password')
   const [submitting, setSubmitting] = useState(false)
 
   const updateLoginMode = (mode: LoginMode) => {
     sessionStorage.setItem('login_mode', mode)
   }
-
-  useEffect(() => {
-    const mode = sessionStorage.getItem('login_mode')
-    if (mode) {
-      setMode(mode as LoginMode)
-    }
-  }, [])
-
   const form = useForm<LoginSchema>({
     resolver: zodResolver(mode === 'phone_code' ? smsSchema : pwdSchema),
     defaultValues: {
@@ -56,7 +47,16 @@ export default function LoginCard() {
       password: '',
       remember: false,
     },
+    mode: 'onChange',
   })
+
+  useEffect(() => {
+    const savedMode = sessionStorage.getItem('login_mode') as LoginMode
+    if (savedMode && savedMode === 'phone_code') {
+      setMode(savedMode)
+    }
+  }, [])
+
   const handler = form.handleSubmit(async (data) => {
     setSubmitting(true)
     try {
@@ -94,13 +94,14 @@ export default function LoginCard() {
         <Tabs
           value={mode}
           onValueChange={(val) => {
-            setMode(val as typeof mode)
-            form.reset({username: form.getValues('username'), password: '', remember: false})
+            setMode(val as LoginMode)
+            form.reset({username: '', password: '', remember: false})
+            form.clearErrors()
           }}
           className="mb-6">
           <TabsList className="w-full p-0 bg-white">
             <Tab value="password">密码登录</Tab>
-            <Tab value="phone_code">验证码登录</Tab>
+            <Tab value="phone_code">验证码登录/注册</Tab>
           </TabsList>
         </Tabs>
         <Form<LoginSchema> className="space-y-6" form={form} handler={handler}>
@@ -125,6 +126,7 @@ export default function LoginCard() {
                     className="h-10"
                     placeholder="请输入验证码"
                     autoComplete="one-time-code"
+                    disabled={submitting}
                   />
                   <SendMsgByUsername/>
                 </div>
@@ -138,11 +140,12 @@ export default function LoginCard() {
                     placeholder="至少6位密码，需包含字母和数字"
                     autoComplete="current-password"
                     minLength={6}
+                    disabled={submitting}
                   />
                   <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 ? '隐藏密码' : '显示密码'}
                   >
@@ -163,6 +166,7 @@ export default function LoginCard() {
                   id={id}
                   checked={field.value}
                   onCheckedChange={field.onChange}
+                  disabled={submitting}
                 />
                 <div className="space-y-1 leading-none">
                   <Label>保持登录</Label>
@@ -211,3 +215,5 @@ function SendMsgByUsername() {
   const phone = useWatch({control, name: 'username'})
   return <SendMsg phone={phone}/>
 }
+
+const SendMsg = dynamic(() => import('@/components/send-msg'), {ssr: false})

src/app/(auth)/privacyPolicy/privacyPolicy.mdx

@@ -1,19 +1,19 @@
 #                             隐私政策
-神龙HTTP（以下或简称"我们"）尊重并保护用户信息，并将以高度的责任感和谨慎的态度对待这些信息。当您使用神龙HTTP提供的代理服务时，我们将根据本隐私政策来收集、处理及分享您的信息。我们希望通过本隐私政策向您清晰地说明我们如何处理您的信息。因此，我们建议您完整阅读本隐私政策，以便了解如何保护您的隐私权。如果您有任何疑问、意见或建议，可以通过神龙HTTP提供的联系方式与我们联系。本政策将帮助您了解以下内容：
+蓝狐HTTP（以下或简称"我们"）尊重并保护用户信息，并将以高度的责任感和谨慎的态度对待这些信息。当您使用蓝狐HTTP提供的代理服务时，我们将根据本隐私政策来收集、处理及分享您的信息。我们希望通过本隐私政策向您清晰地说明我们如何处理您的信息。因此，我们建议您完整阅读本隐私政策，以便了解如何保护您的隐私权。如果您有任何疑问、意见或建议，可以通过蓝狐HTTP提供的联系方式与我们联系。本政策将帮助您了解以下内容：
 
 一、适用范围
 
-1.1 本隐私政策适用于神龙HTTP网站提供的所有服务。服务包括提供页面浏览、网站登录服务，以及通过神龙HTTP网站提供的网络服务。
+1.1 本隐私政策适用于蓝狐HTTP网站提供的所有服务。服务包括提供页面浏览、网站登录服务，以及通过蓝狐HTTP网站提供的网络服务。
 
 1.2 本隐私政策不适用于其他第三方提供的服务。
 
-1.3 特别说明，如果您使用神龙HTTP的网络服务为您的用户提供服务，您的业务数据归您所有，您应当与您的用户另行约定隐私政策。
+1.3 特别说明，如果您使用蓝狐HTTP的网络服务为您的用户提供服务，您的业务数据归您所有，您应当与您的用户另行约定隐私政策。
 
 二、用户信息的收集和使用
 
 2.1 协助您成为我们的会员
 
-2.1.1 当您在神龙HTTP网站创建账户时，您需要选择会员身份类型（个人、企业），并向我们提供会员名、单位名称及联系人姓名（用于账户实名认证及开票抬头）、设置并确认您的登录密码、可用电子邮箱、所在区域（国家、省份、城市），以及您在中国境内的手机号码。您提供的手机号码将用于注册、登录、绑定账户、找回密码，并作为您与神龙HTTP联系的方式之一，接收相关业务通知或进行业务沟通。
+2.1.1 当您在蓝狐HTTP网站创建账户时，您需要选择会员身份类型（个人、企业），并向我们提供会员名、单位名称及联系人姓名（用于账户实名认证及开票抬头）、设置并确认您的登录密码、可用电子邮箱、所在区域（国家、省份、城市），以及您在中国境内的手机号码。您提供的手机号码将用于注册、登录、绑定账户、找回密码，并作为您与蓝狐HTTP联系的方式之一，接收相关业务通知或进行业务沟通。
 
 2.1.2 如果您仅需使用浏览、搜索等基本服务，您无需注册成为我们的会员及提供上述信息。
 
@@ -23,11 +23,11 @@
 
 2.2.2 在您使用服务过程中，我们会根据您在注册、登录账号及使用产品时授予的权限，接收并记录您所使用的设备相关信息（如设备型号、操作系统版本、浏览器cookies、唯一设备标识符等软硬件特征信息）、设备所在位置相关信息（如IP地址、MAC地址、GPS位置以及能够提供相关信息的Wi-Fi接入点、蓝牙和基站等传感器信息）。我们可能会将这些信息与您的账户信息关联，以便在不同设备上为您提供一致的服务。
 
-2.2.3 日志信息：当您使用我们的网站或代理IP服务时，我们会自动收集您对我们服务的详细使用情况，作为有关网络日志保存（例如：您进入神龙HTTP站的搜索查询内容、登录账号、IP地址、浏览器类型、电信运营商、使用的语言、访问日期及代理IP使用中的详细日志信息等）。
+2.2.3 日志信息：当您使用我们的网站或代理IP服务时，我们会自动收集您对我们服务的详细使用情况，作为有关网络日志保存（例如：您进入蓝狐HTTP站的搜索查询内容、登录账号、IP地址、浏览器类型、电信运营商、使用的语言、访问日期及代理IP使用中的详细日志信息等）。
 
 2.2.4 请注意，单独的设备信息、日志信息等是无法识别特定自然人身份的信息。如果我们将其与个人信息结合使用，则在结合使用期间，这类非个人信息将被视为个人信息，除取得您授权或法律法规另有规定外，我们会将该类个人信息做匿名化、去标识化处理。
 
-2.2.5 用户账户的支持信息：基于您使用神龙HTTP服务而产生的咨询记录、保障记录和针对用户故障的排障过程（如通信或通话记录），我们将通过记录、分析这些信息以便更及时响应您的帮助请求，以及用于改进服务。
+2.2.5 用户账户的支持信息：基于您使用蓝狐HTTP服务而产生的咨询记录、保障记录和针对用户故障的排障过程（如通信或通话记录），我们将通过记录、分析这些信息以便更及时响应您的帮助请求，以及用于改进服务。
 
 2.3 我们出于如下目的使用您提交及我们收集的用户信息：
 
@@ -37,7 +37,7 @@
 
 2.3.3 在法律法规允许的前提下，向您推荐产品；
 
-2.3.4 为提高您使用我们及我们关联公司、合作伙伴提供服务的安全性，保护您或其他用户或公众的人身财产安全免遭侵害，更好地预防钓鱼网站、欺诈、网络漏洞、计算机病毒、网络攻击、网络侵入等安全风险，更准确地识别违反法律法规或神龙HTTP相关协议、规则的情况，我们可能使用您的会员信息、并整合设备信息、有关网络日志以及我们关联公司、合作伙伴分享的信息，来进行判断账户及交易风险、进行身份验证、安全事件的检测及防范，并依法采取必要的记录、审计、分析、处置措施；
+2.3.4 为提高您使用我们及我们关联公司、合作伙伴提供服务的安全性，保护您或其他用户或公众的人身财产安全免遭侵害，更好地预防钓鱼网站、欺诈、网络漏洞、计算机病毒、网络攻击、网络侵入等安全风险，更准确地识别违反法律法规或蓝狐HTTP相关协议、规则的情况，我们可能使用您的会员信息、并整合设备信息、有关网络日志以及我们关联公司、合作伙伴分享的信息，来进行判断账户及交易风险、进行身份验证、安全事件的检测及防范，并依法采取必要的记录、审计、分析、处置措施；
 
 2.3.5 如超出收集用户信息时所声明的目的或超出具有直接或合理关联的范围后使用用户信息前，我们会再次向您告知并征得您的明确同意。
 
@@ -53,7 +53,7 @@
 
 3.1.2 在法定情形下的共享：我们可能会根据法律法规规定、诉讼、仲裁解决需要，或按行政、司法机关依法提出的要求，对外共享您的用户信息；
 
-3.1.3 为了促成交易或协助解决争议，某些情况下只有共享您的用户信息，才能促成交易或处理您与他人的纠纷或争议，例如，在神龙HTTP上创建的某一交易中，如交易任何一方履行或部分履行了交易义务并提出信息披露请求的，神龙HTTP有权决定向该用户提供其交易对方的联络方式等必要信息，以促成交易的完成；
+3.1.3 为了促成交易或协助解决争议，某些情况下只有共享您的用户信息，才能促成交易或处理您与他人的纠纷或争议，例如，在蓝狐HTTP上创建的某一交易中，如交易任何一方履行或部分履行了交易义务并提出信息披露请求的，蓝狐HTTP有权决定向该用户提供其交易对方的联络方式等必要信息，以促成交易的完成；
 
 3.2 转让
 
@@ -69,7 +69,7 @@
 
 3.3.1 获得您明确同意或基于您的主动选择，我们可能会公开披露您的用户信息；
 
-3.3.2 或为保护神龙HTTP平台及其关联公司用户或公众的人身财产安全免遭侵害，我们可能依据适用的法律或神龙HTTP平台相关协议、规则披露关于您的用户信息。
+3.3.2 或为保护蓝狐HTTP平台及其关联公司用户或公众的人身财产安全免遭侵害，我们可能依据适用的法律或蓝狐HTTP平台相关协议、规则披露关于您的用户信息。
 
 3.4 共享、转让、公开披露用户信息时事先征得授权同意的例外
 
@@ -91,21 +91,21 @@
 
 4.1 用户业务数据
 
-4.1.1 您通过神龙HTTP提供的代理IP服务，从事加工、存储、上传、下载、分发以及通过其他方式处理的数据，均为您的用户业务数据，您完全拥有您的用户业务数据。作为代理IP服务提供商，我们只会严格执行您的指示处理您的业务数据，除按与您协商一致或执行明确的法律法规要求外，我们不会对您的业务数据进行任何非授权的使用或披露。
+4.1.1 您通过蓝狐HTTP提供的代理IP服务，从事加工、存储、上传、下载、分发以及通过其他方式处理的数据，均为您的用户业务数据，您完全拥有您的用户业务数据。作为代理IP服务提供商，我们只会严格执行您的指示处理您的业务数据，除按与您协商一致或执行明确的法律法规要求外，我们不会对您的业务数据进行任何非授权的使用或披露。
 
 4.1.2 您应对您的用户业务数据来源及内容负责，我们提醒您谨慎判断数据来源及内容的合法性。因您的用户业务数据内容违反法律法规、部门规章或国家政策而造成的全部结果及责任均由您自行承担。
 
 4.2 公开信息
 
-4.2.1 公开信息是指您公开分享的任何信息，任何人都可以在使用和未使用神龙HTTP网站服务期间查看或访问这些信息。
+4.2.1 公开信息是指您公开分享的任何信息，任何人都可以在使用和未使用蓝狐HTTP网站服务期间查看或访问这些信息。
 
-4.2.2 在使用神龙HTTP网站时，如您发现自己的个人信息泄露，尤其是您的账户或密码发生泄露，请您立即联络神龙HTTP客服，以便我们采取相应措施。
+4.2.2 在使用蓝狐HTTP网站时，如您发现自己的个人信息泄露，尤其是您的账户或密码发生泄露，请您立即联络蓝狐HTTP客服，以便我们采取相应措施。
 
 五、用户信息的管理
 
-5.1 您可以登录神龙HTTP网站查看您填写提交的基本业务信息（基本资料）和联系人等信息。
+5.1 您可以登录蓝狐HTTP网站查看您填写提交的基本业务信息（基本资料）和联系人等信息。
 
-5.2 您在神龙HTTP注册账号并完成实名认证以后，为保障您在平台的合法权益，我们将不支持任何形式变更实名认证的操作，充分有效保障账户的安全与一致性。
+5.2 您在蓝狐HTTP注册账号并完成实名认证以后，为保障您在平台的合法权益，我们将不支持任何形式变更实名认证的操作，充分有效保障账户的安全与一致性。
 
 5.3 在以下情形中，您可以向我们提出删除用户信息的请求：
 
@@ -119,7 +119,7 @@
 
 六、Cookie 和同类技术的使用
 
-6.1 为确保网站正常运转、为您获得更轻松的访问体验、向您推荐您可能感兴趣的内容，我们会在您的计算机或移动设备上存储名为 Cookie 的小数据文件。Cookie 通常包含标识符、站点名称以及一些号码和字符。神龙HTTP只能读取神龙HTTP提供的cookies。
+6.1 为确保网站正常运转、为您获得更轻松的访问体验、向您推荐您可能感兴趣的内容，我们会在您的计算机或移动设备上存储名为 Cookie 的小数据文件。Cookie 通常包含标识符、站点名称以及一些号码和字符。蓝狐HTTP只能读取蓝狐HTTP提供的cookies。
 
 七、用户信息的安全
 
@@ -135,7 +135,7 @@
 
 7.6 我们将收集到的您的用户信息存放在中华人民共和国境内，如在符合适用法律规定的情形下因业务需要向境外传输个人信息的，我们会事先征得您的同意，并向您告知用户信息出境的目的、接收方、安全保障措施、安全风险等情况。
 
-7.7 如出现神龙HTTP产品和服务停止运营的情形，我们会采取合理措施保护您用户信息安全，包括及时停止继续收集用户信息的活动；停止运营的通知将以逐一送达或公告的形式通知用户；并对所持有的个人信息进行删除或匿名化处理等。
+7.7 如出现蓝狐HTTP产品和服务停止运营的情形，我们会采取合理措施保护您用户信息安全，包括及时停止继续收集用户信息的活动；停止运营的通知将以逐一送达或公告的形式通知用户；并对所持有的个人信息进行删除或匿名化处理等。
 
 八、未成年人用户信息的特别约定
 

src/app/(auth)/userAgreement/userAgreement.mdx

@@ -1,19 +1,19 @@
 #                                                     用户协议
-神龙HTTP（以下或简称"我们"）尊重并保护用户信息，并将以高度的责任感和谨慎的态度对待这些信息。当您使用神龙HTTP提供的代理服务时，我们将根据本隐私政策来收集、处理及分享您的信息。我们希望通过本隐私政策向您清晰地说明我们如何处理您的信息。因此，我们建议您完整阅读本隐私政策，以便了解如何保护您的隐私权。如果您有任何疑问、意见或建议，可以通过神龙HTTP提供的联系方式与我们联系。本政策将帮助您了解以下内容：
+蓝狐HTTP（以下或简称"我们"）尊重并保护用户信息，并将以高度的责任感和谨慎的态度对待这些信息。当您使用蓝狐HTTP提供的代理服务时，我们将根据本隐私政策来收集、处理及分享您的信息。我们希望通过本隐私政策向您清晰地说明我们如何处理您的信息。因此，我们建议您完整阅读本隐私政策，以便了解如何保护您的隐私权。如果您有任何疑问、意见或建议，可以通过蓝狐HTTP提供的联系方式与我们联系。本政策将帮助您了解以下内容：
 
 一、适用范围
 
-1.1 本隐私政策适用于神龙HTTP网站提供的所有服务。服务包括提供页面浏览、网站登录服务，以及通过神龙HTTP网站提供的网络服务。
+1.1 本隐私政策适用于蓝狐HTTP网站提供的所有服务。服务包括提供页面浏览、网站登录服务，以及通过蓝狐HTTP网站提供的网络服务。
 
 1.2 本隐私政策不适用于其他第三方提供的服务。
 
-1.3 特别说明，如果您使用神龙HTTP的网络服务为您的用户提供服务，您的业务数据归您所有，您应当与您的用户另行约定隐私政策。
+1.3 特别说明，如果您使用蓝狐HTTP的网络服务为您的用户提供服务，您的业务数据归您所有，您应当与您的用户另行约定隐私政策。
 
 二、用户信息的收集和使用
 
 2.1 协助您成为我们的会员
 
-2.1.1 当您在神龙HTTP网站创建账户时，您需要选择会员身份类型（个人、企业），并向我们提供会员名、单位名称及联系人姓名（用于账户实名认证及开票抬头）、设置并确认您的登录密码、可用电子邮箱、所在区域（国家、省份、城市），以及您在中国境内的手机号码。您提供的手机号码将用于注册、登录、绑定账户、找回密码，并作为您与神龙HTTP联系的方式之一，接收相关业务通知或进行业务沟通。
+2.1.1 当您在蓝狐HTTP网站创建账户时，您需要选择会员身份类型（个人、企业），并向我们提供会员名、单位名称及联系人姓名（用于账户实名认证及开票抬头）、设置并确认您的登录密码、可用电子邮箱、所在区域（国家、省份、城市），以及您在中国境内的手机号码。您提供的手机号码将用于注册、登录、绑定账户、找回密码，并作为您与蓝狐HTTP联系的方式之一，接收相关业务通知或进行业务沟通。
 
 2.1.2 如果您仅需使用浏览、搜索等基本服务，您无需注册成为我们的会员及提供上述信息。
 
@@ -23,11 +23,11 @@
 
 2.2.2 在您使用服务过程中，我们会根据您在注册、登录账号及使用产品时授予的权限，接收并记录您所使用的设备相关信息（如设备型号、操作系统版本、浏览器cookies、唯一设备标识符等软硬件特征信息）、设备所在位置相关信息（如IP地址、MAC地址、GPS位置以及能够提供相关信息的Wi-Fi接入点、蓝牙和基站等传感器信息）。我们可能会将这些信息与您的账户信息关联，以便在不同设备上为您提供一致的服务。
 
-2.2.3 日志信息：当您使用我们的网站或代理IP服务时，我们会自动收集您对我们服务的详细使用情况，作为有关网络日志保存（例如：您进入神龙HTTP站的搜索查询内容、登录账号、IP地址、浏览器类型、电信运营商、使用的语言、访问日期及代理IP使用中的详细日志信息等）。
+2.2.3 日志信息：当您使用我们的网站或代理IP服务时，我们会自动收集您对我们服务的详细使用情况，作为有关网络日志保存（例如：您进入蓝狐HTTP站的搜索查询内容、登录账号、IP地址、浏览器类型、电信运营商、使用的语言、访问日期及代理IP使用中的详细日志信息等）。
 
 2.2.4 请注意，单独的设备信息、日志信息等是无法识别特定自然人身份的信息。如果我们将其与个人信息结合使用，则在结合使用期间，这类非个人信息将被视为个人信息，除取得您授权或法律法规另有规定外，我们会将该类个人信息做匿名化、去标识化处理。
 
-2.2.5 用户账户的支持信息：基于您使用神龙HTTP服务而产生的咨询记录、保障记录和针对用户故障的排障过程（如通信或通话记录），我们将通过记录、分析这些信息以便更及时响应您的帮助请求，以及用于改进服务。
+2.2.5 用户账户的支持信息：基于您使用蓝狐HTTP服务而产生的咨询记录、保障记录和针对用户故障的排障过程（如通信或通话记录），我们将通过记录、分析这些信息以便更及时响应您的帮助请求，以及用于改进服务。
 
 2.3 我们出于如下目的使用您提交及我们收集的用户信息：
 
@@ -37,7 +37,7 @@
 
 2.3.3 在法律法规允许的前提下，向您推荐产品；
 
-2.3.4 为提高您使用我们及我们关联公司、合作伙伴提供服务的安全性，保护您或其他用户或公众的人身财产安全免遭侵害，更好地预防钓鱼网站、欺诈、网络漏洞、计算机病毒、网络攻击、网络侵入等安全风险，更准确地识别违反法律法规或神龙HTTP相关协议、规则的情况，我们可能使用您的会员信息、并整合设备信息、有关网络日志以及我们关联公司、合作伙伴分享的信息，来进行判断账户及交易风险、进行身份验证、安全事件的检测及防范，并依法采取必要的记录、审计、分析、处置措施；
+2.3.4 为提高您使用我们及我们关联公司、合作伙伴提供服务的安全性，保护您或其他用户或公众的人身财产安全免遭侵害，更好地预防钓鱼网站、欺诈、网络漏洞、计算机病毒、网络攻击、网络侵入等安全风险，更准确地识别违反法律法规或蓝狐HTTP相关协议、规则的情况，我们可能使用您的会员信息、并整合设备信息、有关网络日志以及我们关联公司、合作伙伴分享的信息，来进行判断账户及交易风险、进行身份验证、安全事件的检测及防范，并依法采取必要的记录、审计、分析、处置措施；
 
 2.3.5 如超出收集用户信息时所声明的目的或超出具有直接或合理关联的范围后使用用户信息前，我们会再次向您告知并征得您的明确同意。
 
@@ -53,7 +53,7 @@
 
 3.1.2 在法定情形下的共享：我们可能会根据法律法规规定、诉讼、仲裁解决需要，或按行政、司法机关依法提出的要求，对外共享您的用户信息；
 
-3.1.3 为了促成交易或协助解决争议，某些情况下只有共享您的用户信息，才能促成交易或处理您与他人的纠纷或争议，例如，在神龙HTTP上创建的某一交易中，如交易任何一方履行或部分履行了交易义务并提出信息披露请求的，神龙HTTP有权决定向该用户提供其交易对方的联络方式等必要信息，以促成交易的完成；
+3.1.3 为了促成交易或协助解决争议，某些情况下只有共享您的用户信息，才能促成交易或处理您与他人的纠纷或争议，例如，在蓝狐HTTP上创建的某一交易中，如交易任何一方履行或部分履行了交易义务并提出信息披露请求的，蓝狐HTTP有权决定向该用户提供其交易对方的联络方式等必要信息，以促成交易的完成；
 
 3.2 转让
 
@@ -69,7 +69,7 @@
 
 3.3.1 获得您明确同意或基于您的主动选择，我们可能会公开披露您的用户信息；
 
-3.3.2 或为保护神龙HTTP平台及其关联公司用户或公众的人身财产安全免遭侵害，我们可能依据适用的法律或神龙HTTP平台相关协议、规则披露关于您的用户信息。
+3.3.2 或为保护蓝狐HTTP平台及其关联公司用户或公众的人身财产安全免遭侵害，我们可能依据适用的法律或蓝狐HTTP平台相关协议、规则披露关于您的用户信息。
 
 3.4 共享、转让、公开披露用户信息时事先征得授权同意的例外
 
@@ -91,21 +91,21 @@
 
 4.1 用户业务数据
 
-4.1.1 您通过神龙HTTP提供的代理IP服务，从事加工、存储、上传、下载、分发以及通过其他方式处理的数据，均为您的用户业务数据，您完全拥有您的用户业务数据。作为代理IP服务提供商，我们只会严格执行您的指示处理您的业务数据，除按与您协商一致或执行明确的法律法规要求外，我们不会对您的业务数据进行任何非授权的使用或披露。
+4.1.1 您通过蓝狐HTTP提供的代理IP服务，从事加工、存储、上传、下载、分发以及通过其他方式处理的数据，均为您的用户业务数据，您完全拥有您的用户业务数据。作为代理IP服务提供商，我们只会严格执行您的指示处理您的业务数据，除按与您协商一致或执行明确的法律法规要求外，我们不会对您的业务数据进行任何非授权的使用或披露。
 
 4.1.2 您应对您的用户业务数据来源及内容负责，我们提醒您谨慎判断数据来源及内容的合法性。因您的用户业务数据内容违反法律法规、部门规章或国家政策而造成的全部结果及责任均由您自行承担。
 
 4.2 公开信息
 
-4.2.1 公开信息是指您公开分享的任何信息，任何人都可以在使用和未使用神龙HTTP网站服务期间查看或访问这些信息。
+4.2.1 公开信息是指您公开分享的任何信息，任何人都可以在使用和未使用蓝狐HTTP网站服务期间查看或访问这些信息。
 
-4.2.2 在使用神龙HTTP网站时，如您发现自己的个人信息泄露，尤其是您的账户或密码发生泄露，请您立即联络神龙HTTP客服，以便我们采取相应措施。
+4.2.2 在使用蓝狐HTTP网站时，如您发现自己的个人信息泄露，尤其是您的账户或密码发生泄露，请您立即联络蓝狐HTTP客服，以便我们采取相应措施。
 
 五、用户信息的管理
 
-5.1 您可以登录神龙HTTP网站查看您填写提交的基本业务信息（基本资料）和联系人等信息。
+5.1 您可以登录蓝狐HTTP网站查看您填写提交的基本业务信息（基本资料）和联系人等信息。
 
-5.2 您在神龙HTTP注册账号并完成实名认证以后，为保障您在平台的合法权益，我们将不支持任何形式变更实名认证的操作，充分有效保障账户的安全与一致性。
+5.2 您在蓝狐HTTP注册账号并完成实名认证以后，为保障您在平台的合法权益，我们将不支持任何形式变更实名认证的操作，充分有效保障账户的安全与一致性。
 
 5.3 在以下情形中，您可以向我们提出删除用户信息的请求：
 
@@ -119,7 +119,7 @@
 
 六、Cookie 和同类技术的使用
 
-6.1 为确保网站正常运转、为您获得更轻松的访问体验、向您推荐您可能感兴趣的内容，我们会在您的计算机或移动设备上存储名为 Cookie 的小数据文件。Cookie 通常包含标识符、站点名称以及一些号码和字符。神龙HTTP只能读取神龙HTTP提供的cookies。
+6.1 为确保网站正常运转、为您获得更轻松的访问体验、向您推荐您可能感兴趣的内容，我们会在您的计算机或移动设备上存储名为 Cookie 的小数据文件。Cookie 通常包含标识符、站点名称以及一些号码和字符。蓝狐HTTP只能读取蓝狐HTTP提供的cookies。
 
 七、用户信息的安全
 
@@ -135,7 +135,7 @@
 
 7.6 我们将收集到的您的用户信息存放在中华人民共和国境内，如在符合适用法律规定的情形下因业务需要向境外传输个人信息的，我们会事先征得您的同意，并向您告知用户信息出境的目的、接收方、安全保障措施、安全风险等情况。
 
-7.7 如出现神龙HTTP产品和服务停止运营的情形，我们会采取合理措施保护您用户信息安全，包括及时停止继续收集用户信息的活动；停止运营的通知将以逐一送达或公告的形式通知用户；并对所持有的个人信息进行删除或匿名化处理等。
+7.7 如出现蓝狐HTTP产品和服务停止运营的情形，我们会采取合理措施保护您用户信息安全，包括及时停止继续收集用户信息的活动；停止运营的通知将以逐一送达或公告的形式通知用户；并对所持有的个人信息进行删除或匿名化处理等。
 
 八、未成年人用户信息的特别约定
 

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=long'},
+          {lead: '短效/长效 IP 提取', href: '/collect?type=short'},
+          // {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'
-import HelpMenu from './menu-help'
-import SolutionMenu from './menu-solution'
+'use client'
+
+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="flex flex-col gap-4">
-        <ProductMenu/>
+    <div className="h-full flex flex-col bg-white">
+      <div className="flex items-center justify-between px-4 h-16 border-b border-gray-100">
+        {/* 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="帮助中心"/>
-        <HelpMenu/>
-      </div>
-      <div className="flex flex-col gap-4">
-        <MenuTitle title="业务场景"/>
-        <SolutionMenu/>
+
+      <div className="flex-1 overflow-y-auto px-4 py-6 space-y-8">
+        <div className="space-y-3">
+          <h3 className="text-sm font-semibold text-gray-500 tracking-wide">
+            产品订购
+          </h3>
+          <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">
-      {props.title}
-    </h3>
+    <div className="space-y-3">
+      <h3 className="text-sm font-semibold text-gray-500 tracking-wide">
+        {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,13 +1,17 @@
 'use client'
-import {ReactNode, useContext, useState} from 'react'
+import {ReactNode, useContext, useEffect, 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'
+import {Product} from '@/lib/models/product'
+import {listProductHome} from '@/actions/product'
 
+export type ProductItem = Product
 type TabType = 'domestic' | 'oversea'
 
 export default function ProductMenu() {
@@ -52,33 +56,51 @@ export function Tab(props: {
 }
 
 export function Domestic(props: {}) {
+  const [productList, setProductList] = useState<Product[]>([])
+  useEffect(() => {
+    const fetchProducts = async () => {
+      const res = await listProductHome({})
+      if (res.success) {
+        setProductList(res.data)
+      }
+    }
+    fetchProducts()
+  }, [])
+  const shortProduct = productList.find(p => p.name?.includes('短效') || p.code === 'short')
+  const longProduct = productList.find(p => p.name?.includes('长效') || p.code === 'long')
+
   return (
-    <section role="tabpanel" className="flex-auto flex flex-col lg:flex-row justify-evenly gap-3 lg:gap-0">
-      <div className="w-full lg:w-64 flex flex-col">
-        <FragmentTitle img={prod} text="短效 IP"/>
-        <DomesticLink
-          label="短效动态 IP"
-          desc="全国 300+ 城市级定位节点，IP 池资源充足，自动高频切换。适用于数据采集、市场调研、SEO 优化等高并发场景。稳定可靠，响应迅速，助力业务高效运转。"
-          href="/product?type=short"
-          discount={45}
-        />
-      </div>
-      <div className="w-full lg:w-64 flex flex-col">
-        <FragmentTitle img={prod} text="长效 IP"/>
-        <DomesticLink
-          label="长效动态 IP"
-          desc="IP 存活时长可达数小时至数天，连接稳定不掉线。适用于账号养号、社交运营、电商管理等需要持续在线的场景。优质线路保障，为您的长期业务保驾护航。"
-          href="/product?type=long"
-          discount={45}
-        />
-      </div>
-      <div className="w-full lg:w-64 flex flex-col">
-        <FragmentTitle img={custom} text="业务定制"/>
-        <DomesticLink
-          label="优质/企业/精选IP"
-          desc="超 1000 家企业共同信赖之选！大客户经理全程 1 对 1 沟通，随时为您排忧解难，提供 24 小时不间断支持"
-          href="/custom"
-        />
+    <section role="tabpanel" className="flex-auto">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        <div className="grid grid-cols-1 gap-3">
+          {shortProduct && (
+            <ProductCard
+              icon={prod}
+              label="短效动态 IP"
+              discount="最低4.5折"
+              desc="全国 300+ 城市级定位节点，IP 池资源充足，自动高频切换。适用于数据采集、市场调研、SEO 优化等高并发场景。稳定可靠，响应迅速，助力业务高效运转。"
+              href={`/product?type=${shortProduct.code}`}
+            />
+          )}
+          {longProduct && (
+            <ProductCard
+              icon={prod}
+              label="长效动态 IP"
+              discount="最低4.5折"
+              desc="IP 存活时长可达数小时至数天，连接稳定不掉线。适用于账号养号、社交运营、电商管理等需要持续在线的场景。优质线路保障，为您的长期业务保驾护航。"
+              href={`/product?type=${longProduct.code}`}
+            />
+          )}
+        </div>
+        <div className="flex flex-col gap-3">
+          <ProductCard
+            icon={custom}
+            label="业务定制"
+            discount="1V1 专属服务"
+            desc="超 1000 家企业共同信赖之选！大客户经理全程 1 对 1 沟通，随时为您排忧解难，提供 24 小时不间断支持"
+            href="/custom"
+          />
+        </div>
       </div>
     </section>
   )
@@ -92,11 +114,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 +139,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}>
-      <p className="flex gap-2">
-        <span>{props.label}</span>
-        {props.discount && (
-          <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
-            折扣 {props.discount}%
-          </span>
-        )}
-      </p>
-      <p className="text-gray-400 text-sm">
-        {props.desc}
-      </p>
+      onClick={onClick}
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex-none">
+          <Image src={props.icon} alt="" width={30} height={30}/>
+        </div>
+        <div className="flex-1">
+          <div className="flex items-center justify-between gap-3">
+            <span className="font-bold">{props.label}</span>
+            <span className="text-xs font-medium text-orange-600 bg-orange-50 px-2 py-1 rounded-full">
+              {props.discount}
+            </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地址，即可看到