去除用户信息的邮箱显示

README.md

@@ -1,7 +1,13 @@
 ## TODO
 
+分离公共 api 接口 env 定义
+
+统一前端基础库（类型，api）
+
 购买页固定套餐
 
+优惠问题
+
 ### 禁止直接依赖 form
 
 `\[(.*,)?form(,.*)?\]`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanhu-web",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev -H 0.0.0.0 --turbopack",
@@ -74,5 +74,5 @@
     "typescript": "^5.9.3",
     "babel-plugin-react-compiler": "^1.0.0"
   },
-  "packageManager": "bun@1.2.19"
+  "packageManager": "bun@1.3.2"
 }

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/client/browser-proxy"
+        />
+
+        <ArticleCard
+          icon={<Smartphone className="w-12 h-12"/>}
+          title="Windows10 代理配置"
+          description="详细图文教程，帮助你在 Windows 系统中设置代理"
+          href="/docs/client/windows10-proxy"
+        />
+
+        <ArticleCard
+          icon={<HelpCircle className="w-12 h-12"/>}
+          title="常见问题总览"
+          description="解决使用过程中遇到的各类问题，快速找到答案"
+          href="/docs/faqs/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`,
+          `bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
+        ].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

@@ -23,6 +23,15 @@ export default function HelpMenu() {
       />
       <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)/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/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/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.tsx

@@ -8,41 +8,36 @@ type Props = {
   collapsed?: boolean
 }
 
-// 菜单配置 - 扁平结构，支持分组
+// 菜单配置
 const MENU_ITEMS = [
   {
-    group: '官网教程',
+    group: '产品文档',
     items: [
-      {key: 'browser-proxy', label: '浏览器设置代理教程'},
-      {key: 'package-operations', label: '套餐续费、合并、修改时效、补重操作'},
-      {key: 'fixed-package', label: '长效固定套餐操作手册'},
-    ],
-  },
-  {
-    group: '客户端教程',
-    items: [
-      {key: 'ios-proxy', label: 'iOS设置代理教程'},
-      {key: 'windows10-proxy', label: 'Windows10电脑设置代理教程'},
-      {key: 'android-proxy', label: '安卓手机设置代理教程'},
+      {key: 'product-overview', label: '产品介绍'},
+      {key: 'choose-product', label: '如何选择产品'},
+      {key: 'why-verify', label: '为什么需要实名认证'},
+      {key: 'city-lines', label: '有哪些城市线路'},
+      {key: 'api-docs', label: 'ip提取接口文档'},
+      // 服务条款
     ],
   },
   {
     group: '操作指南',
     items: [
-      {key: 'win7-proxy', label: 'Windows7电脑设置代理教程'},
-      {key: 'mac-proxy', label: 'MAC设置代理教程'},
-      {key: 'firefox-proxy', label: '火狐浏览器设置代理'},
-      {key: 'socks5-usage', label: 'Socks5代理使用教程'},
-      {key: 'http-notes', label: '使用 HTTP 代理注意事项'},
-      {key: 'official-tutorial', label: '浏览器设置代理教程'},
+      {key: 'profile-settings', label: '修改个人信息和重置密码'},
+      {key: 'whitelist-guide', label: '如何添加白名单'},
+      {key: 'verify-guide', label: '如何进行实名认证'},
+      {key: 'extract-link', label: '如何生成提取链接'},
+      {key: 'payment-records', label: '查看支付和使用记录'},
     ],
   },
   {
-    group: '产品介绍',
+    group: '客户端教程',
     items: [
-      {key: 'product-overview', label: '产品概述'},
-      {key: 'product-features', label: '产品功能'},
-      {key: 'product-cert', label: '实名认证与证书'},
+      {key: 'browser-proxy', label: '浏览器设置代理教程'},
+      {key: 'ios-proxy', label: 'iOS设置代理教程'},
+      {key: 'android-proxy', label: '安卓手机设置代理教程'},
+      {key: 'windows10-proxy', label: 'Windows10设置代理教程'},
     ],
   },
   {
@@ -50,19 +45,15 @@ const MENU_ITEMS = [
     items: [
       {key: 'faq-general', label: '常见问题总览'},
       {key: 'faq-billing', label: '计费与套餐问题'},
+      // 业务场景集成方案
+      // 故障排查
     ],
   },
   {
     group: '新闻资讯',
     items: [
       {key: 'news-latest', label: '了解代理服务器的工作原理'},
-      {key: 'news-announce', label: '公告'},
-    ],
-  },
-  {
-    group: '其他',
-    items: [
-      {key: 'online-ip-proxy', label: '在线 IP 代理地址'},
+      {key: 'news-announce', label: '网站公告'},
     ],
   },
 ]

src/app/(home)/docs/socks5-usage/page.mdx

@@ -1,29 +0,0 @@
-# 使用 Socks5 代理上网
-
-Socks5 是一种网络代理协议，用于在计算机之间传递数据，同时提供匿名性和安全性。
-
-## Socks5 代理的优点
-
-1. **更高的安全性**：Socks5 协议支持加密传输，可以确保数据在传输过程中的安全性。
-2. **更高的匿名性**：Socks5 协议支持 UDP 和 TCP 流量代理，并且支持不同的身份验证方式，可以帮助用户隐藏真实 IP 地址，保护隐私。
-3. **更高的灵活性**：Socks5 代理可以让应用程序无需修改代码即可使用代理 IP，同时支持多种身份验证方式和传输协议，提高了灵活性和可用性。
-
-## Socks5 代理工作流程
-
-1. 用户向代理服务器发送连接请求。
-2. 代理服务器收到连接请求后，根据用户请求的目标地址和端口，向目标服务器发起连接请求。
-3. 目标服务器收到代理服务器的连接请求后，回复确认连接。
-4. 代理服务器收到目标服务器的确认连接后，将数据转发给目标服务器。
-5. 目标服务器接收到数据后，将数据返回给代理服务器。
-6. 代理服务器收到数据后，将数据转发给用户。
-
-在这个过程中，Socks5 代理服务器起到了中间传输的作用，将用户的请求转发给目标服务器，并将目标服务器的响应返回给用户。由于传输过程中使用的是代理服务器的 IP 地址和端口号，所以用户的真实 IP 地址和端口号得到了隐藏。
-
-## 配置方法概览
-
-| 方法 | 适用场景 | 复杂度 | 持久性 |
-|------|----------|--------|--------|
-| 手动设置 | 单用户临时使用 | 低 | 重启浏览器失效 |
-| 自动代理(PAC) | 企业环境 | 中 | 永久 |
-| 扩展程序 | 灵活切换规则 | 高 | 永久 |
-| 系统级代理 | 全局代理 | 低 | 系统重启失效 |

src/app/(home)/docs/win7-proxy/page.md

@@ -1,37 +0,0 @@
-# Windows7 电脑设置代理教程
-
-## 🚀 30秒快速设置法
-
-### 第一步：打开设置面板
-1. 按 `Win` + `R` 打开运行框
-2. 输入 `inetcpl.cpl`
-3. 按回车
-
-### 第二步：配置代理
-1. 点击顶部 **"连接"** 标签
-2. 点击右下角 **"局域网设置"** 按钮
-3. **勾选** "为LAN使用代理服务器"
-4. 填写代理信息：
-   - **地址**：`proxy.example.com` 或 `192.168.1.100`
-   - **端口**：`8080` 或 `3128`
-5. 点击两次 **"确定"** 保存
-
-### 第三步：测试验证
-打开浏览器访问任意网站，检查是否正常
-
-## 🌐 浏览器专用代理方案
-
-### Chrome / Edge / Firefox 推荐方案
-```javascript
-// 最佳实践：使用代理管理扩展
-// 1. 安装 SwitchyOmega 或 Proxy SwitchySharp
-// 2. 配置代理服务器信息
-// 3. 一键切换，不影响系统设置
-
-// 配置示例
-const proxyConfig = {
-  type: 'HTTP',      // 或 HTTPS / SOCKS5
-  host: 'proxy.company.com',
-  port: 8080,
-  bypassList: ['localhost', '*.internal']  // 例外列表
-};

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

@@ -1,7 +0,0 @@
-# Windows10 电脑设置代理教程
-
-1、点击桌面右下角网络连接图标，选择"网络和Internet设置"选项
-
-2、点击"代理"，将"使用代理服务器"设置为开，输入地址和端口后保存
-
-3、浏览器打开百度，输入IP地址查询，若查询结果和设置的代理IP一致，则代理设置成功

src/app/(home)/footer.tsx

@@ -41,7 +41,7 @@ export default function Footer(props: FooterProps) {
             items={[
               {name: `产品订购`, href: `/product`},
               {name: `获取代理`, href: `/collect`},
-              {name: `帮助中心`, href: `/docs/faq-general`},
+              {name: `帮助中心`, href: `/docs/faqs/faq-general`},
               {name: `企业服务`, href: `/custom`},
             ]}
           />
@@ -69,9 +69,9 @@ export default function Footer(props: FooterProps) {
           <SiteNavList
             title="帮助文档"
             items={[
-              {name: `产品功能`, href: `/docs/product-features`},
-              {name: `使用教程`, href: `/docs/browser-proxy`},
-              {name: `行业资讯`, href: `/docs/news-latest`},
+              {name: `产品功能`, href: `/docs/product/product-features`},
+              {name: `使用教程`, href: `/docs/client/browser-proxy`},
+              {name: `行业资讯`, href: `/docs/news/news-latest`},
             ]}
           />
         </div>

src/app/(home)/page.tsx

@@ -1,266 +0,0 @@
-import {ReactNode} from 'react'
-import Wrap from '@/components/wrap'
-import Image, {StaticImageData} from 'next/image'
-import Link from 'next/link'
-import check_main from '@/assets/check-main.svg'
-import banner from './_assets/banner.webp'
-import map from './_assets/map.webp'
-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'
-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'
-import FreeTrial from '@/components/free-trial'
-import {BookOpen, Smartphone, Settings, HelpCircle, Newspaper, FileText} from 'lucide-react'
-
-export default function Home() {
-  return (
-    <main className="flex flex-col gap-16 lg:gap-32 pb-16 lg:pb-32 bg-white">
-
-      {/* banner */}
-      <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`,
-            `bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
-          ].join(' ')}/>
-        </Wrap>
-      </section>
-
-      {/* 数据展示 */}
-      <Section 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]"/>
-
-      </Section>
-
-      {/* 优势 1 */}
-      <Section title="HTTP安全合规的代理IP资源池">
-        <ul
-          className={[
-            `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8`,
-          ].join(' ')}>
-          <Sec3Item
-            icon={s1_1}
-            title="短期动态IP池"
-            terms={[
-              {icon: s1_check, text: `IP时效3-30分钟(可定制)`},
-              {icon: s1_check, text: `支持高并发提取`},
-            ]}/>
-          <Sec3Item
-            icon={s1_2}
-            title="长期静态IP池"
-            terms={[
-              {icon: s1_check, text: `IP覆盖全国各地`},
-              {icon: s1_check, text: `平均响应时长：0.03s`},
-            ]}/>
-          <Sec3Item
-            icon={s1_3}
-            title="固定IP池"
-            terms={[
-              {icon: s1_check, text: `稳定长输不掉线`},
-              {icon: s1_check, text: `全国热门静态IP线路`},
-            ]}/>
-          <Sec3Item
-            icon={s1_4}
-            title="企业级定制池"
-            terms={[
-              {icon: s1_check, text: `可视化监控设计`},
-              {icon: s1_check, text: `技术团队现场支持`},
-            ]}/>
-        </ul>
-      </Section>
-
-      {/* 优势 2 */}
-      <Section title="HTTP 产品优势">
-        <div className="flex gap-36">
-          <ul className="flex-1 flex flex-col gap-6">
-            <Sec4Item icon={s4_1_1} title="安全合规" description="国内三大运营商支持"/>
-            <Sec4Item icon={s4_1_2} title="稳定链接" description="IP纯净度高达99.9%"/>
-            <Sec4Item icon={s4_1_3} title="超匿名性" description="稳定传输，保护隐私安全"/>
-          </ul>
-          <Image src={s4_1_main} alt="s2-1-main" className="w-0 flex-1 object-contain max-lg:hidden"/>
-        </div>
-
-        <div className="flex gap-36">
-          <Image src={s4_2_main} alt="s2-1-main" className="w-0 flex-1 object-contain max-lg:hidden"/>
-          <ul className="flex-1 flex flex-col gap-6">
-            <Sec4Item icon={s4_2_1} title="API接口文档" description="与第三方软件轻松集成"/>
-            <Sec4Item icon={s4_2_2} title="多种编程语言代码" description="C语言、GO语言、Python..."/>
-            <Sec4Item icon={s4_2_3} title="双重认证方式" description="API提取+账密认证"/>
-          </ul>
-        </div>
-      </Section>
-
-      {/* 推荐文章 */}
-      <Section 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>
-      </Section>
-    </main>
-  )
-}
-
-function Section(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>
-  )
-}
-
-function Sec3Item(props: {
-  icon: StaticImageData
-  title: string
-  terms: {
-    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="s1-1" 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.terms.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>
-  )
-}
-
-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>
-  )
-}
-
-function Sec4Item(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="s2-1-1" 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/admin/(dashboard)/_client/userCenter.tsx

@@ -26,7 +26,7 @@ export default async function UserCenter() {
     <Card className="h-full">
       <CardContent className="flex-auto flex flex-col justify-between gap-4">
         <div className="flex flex-col gap-1">
-          <p>{profile.username?.trim() || profile.email || profile.phone}</p>
+          <p>{profile.username?.trim() || profile.phone }</p>
           <p className="text-sm text-weak">{`最后登录：${format(profile.last_login, 'yyyy-MM-dd HH:mm')}`}</p>
         </div>
         <div className={merge(
@@ -59,7 +59,7 @@ export default async function UserCenter() {
               </>
             )}
         </div>
-        <div className="flex flex-col gap-1">
+        {/* <div className="flex flex-col gap-1">
           <h4 className="text-sm text-weak">账户余额</h4>
           <div className="flex justify-between items-baseline">
             <p className="text-xl text-accent">
@@ -68,7 +68,7 @@ export default async function UserCenter() {
             </p>
             <RechargeModal/>
           </div>
-        </div>
+        </div> */}
         <div className="flex flex-col gap-3">
           <h4 className="text-sm text-weak">快捷入口</h4>
           <div className="flex justify-around gap-2">

src/app/admin/profile/clients.tsx

@@ -78,7 +78,7 @@ export function BasicForm(props: {
 }) {
   const schema = z.object({
     username: z.string(),
-    email: z.string().email('请输入正确的邮箱'),
+    email: z.string(),
     contact_qq: z.string(),
     contact_wechat: z.string(),
   })

src/app/admin/profile/page.tsx

@@ -35,9 +35,9 @@ export default async function ProfilePage(props: ProfilePageProps) {
         {/* 块信息 */}
         <div className="flex gap-4 max-md:flex-col max-sm:flex-col">
 
-          <Card className="flex-1 ">
+          {/* <Card className="flex-1 ">
             <CardHeader>
-              <CardTitle className="font-normal">帐号余额（元）</CardTitle>
+              <CardTitle className="font-normal">账户余额（元）</CardTitle>
             </CardHeader>
             <CardContent className="flex-auto flex justify-between items-center px-8">
               <p className="text-xl">{user.balance}</p>
@@ -45,6 +45,16 @@ export default async function ProfilePage(props: ProfilePageProps) {
                 trigger: `h-10 px-6`,
               }}/>
             </CardContent>
+          </Card> */}
+
+          <Card className="flex-1 ">
+            <CardHeader>
+              <CardTitle className="font-normal">修改密码</CardTitle>
+            </CardHeader>
+            <CardContent className="flex-auto flex justify-between items-center px-8">
+              <p>{user.phone}</p>
+              <ChangePasswordDialog triggerClassName="w-24 h-9"/>
+            </CardContent>
           </Card>
 
           <Card className="flex-1">
@@ -79,17 +89,6 @@ export default async function ProfilePage(props: ProfilePageProps) {
         </div>
 
         <div className="flex-none rounded-lg bg-white p-4 flex max-sm:flex-col flex-col gap-8">
-
-          {/* 安全信息 */}
-          <div className="flex flex-col gap-4">
-            <h3 className="font-normal">安全信息</h3>
-            <div className="flex gap-4 items-center">
-              <p>{user.phone}</p>
-              <ChangePasswordDialog triggerClassName="w-24 h-9"/>
-            </div>
-          </div>
-
-          {/* 基本信息 */}
           <BasicForm profile={user}/>
         </div>
       </div>

src/app/layout.tsx

@@ -7,6 +7,7 @@ import {ProfileStoreProvider} from '@/components/stores/profile'
 import {LayoutStoreProvider} from '@/components/stores/layout'
 import {ClientStoreProvider} from '@/components/stores/client'
 import {getProfile} from '@/actions/auth'
+import Script from 'next/script'
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
@@ -24,6 +25,7 @@ export default async function RootLayout(props: Readonly<{
           <Effects>{props.children}</Effects>
         </StoreProviders>
         <Toaster position="top-center" richColors expand/>
+        <Script id="qd2852138148beb7882a4a6a3e5ff5b569436003e7dc" src="https://wp.qiye.qq.com/qidian/2852138148/beb7882a4a6a3e5ff5b569436003e7dc" async defer></Script>
       </body>
     </html>
   )

src/components/composites/extract/index.tsx

@@ -18,7 +18,7 @@ import {toast} from 'sonner'
 import {merge} from '@/lib/utils'
 import {Combobox} from '@/components/ui/combobox'
 import cities from './_assets/cities.json'
-import ExtractDocs from './extract.mdx'
+import ExtractDocs from '@/app/(home)/docs/product/api-docs/page.md'
 import Link from 'next/link'
 import {useProfileStore} from '@/components/stores/profile'
 

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

@@ -172,7 +172,7 @@ function BalanceOrLogin(props: {
             onValueChange={field.onChange}
             className="flex flex-col gap-3">
 
-            <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
+            {/* <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
               <p className="flex items-center gap-3">
                 <Image src={balance} alt="余额icon"/>
                 <span className="text-sm text-gray-500">账户余额</span>
@@ -181,16 +181,16 @@ function BalanceOrLogin(props: {
                 <span className="text-xl">{profile?.balance}</span>
                 <RechargeModal/>
               </p>
-            </div>
+            </div> */}
 
-            <FormOption
+            {/* <FormOption
               id={`${id}-balance`}
               value="balance"
               compare={field.value}
               className="p-3 w-full flex-row gap-2 justify-center">
               <Image src={balance} alt="余额 icon"/>
               <span>余额</span>
-            </FormOption>
+            </FormOption> */}
             <FormOption
               id={`${id}-wechat`}
               value="wechat"

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

@@ -173,7 +173,7 @@ function BalanceOrLogin(props: {
             onValueChange={field.onChange}
             className="flex flex-col gap-3">
 
-            <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
+            {/* <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
               <p className="flex items-center gap-3">
                 <Image src={balance} alt="余额icon"/>
                 <span className="text-sm text-gray-500">账户余额</span>
@@ -182,16 +182,16 @@ function BalanceOrLogin(props: {
                 <span className="text-xl">{profile.balance}</span>
                 <RechargeModal/>
               </p>
-            </div>
+            </div> */}
 
-            <FormOption
+            {/* <FormOption
               id={`${id}-balance`}
               value="balance"
               compare={field.value}
               className="p-3 w-full flex-row gap-2 justify-center">
               <Image src={balance} alt="余额 icon"/>
               <span>余额</span>
-            </FormOption>
+            </FormOption> */}
             <FormOption
               id={`${id}-wechat`}
               value="wechat"