更新菜单栏中的帮助中心教程和产品介绍的相关文档

2025-12-15 11:48:40 +08:00
parent 26ea796b4d
commit 56adde8aa0
28 changed files with 368 additions and 208 deletions
--- a/src/app/(auth)/privacyPolicy/page.tsx
+++ b/src/app/(auth)/privacyPolicy/page.tsx
--- a/src/app/(auth)/userAgreement/page.tsx
+++ b/src/app/(auth)/userAgreement/page.tsx
--- a/src/app/(home)/docs/layout.tsx
+++ b/src/app/(home)/docs/layout.tsx
@@ -1,11 +1,9 @@
 import BreadCrumb from '@/components/bread-crumb'
 import Wrap from '@/components/wrap'
-import {ReactNode} from 'react'
+import {Children} from '@/lib/utils'
 import Sidebar from './sidebar'

-export default function HelpLayout(props: {
-  children: ReactNode
-}) {
+export default function DocsLayout(props: Children) {
  return (
    <main className="mt-20 flex flex-col gap-4">
      <Wrap className="flex flex-col py-8 gap-8">
@@ -14,7 +12,7 @@ export default function HelpLayout(props: {
        ]}/>
        <div className="flex gap-6">
          <Sidebar/>
-          <div className="flex-1 bg-white  rounded p-6 min-h-[420px]">
+          <div className="flex-1 bg-white  rounded-lg p-6 min-h-[420px]">
            {props.children}
          </div>
        </div>
--- a/src/app/(home)/docs/sidebar.tsx
+++ b/src/app/(home)/docs/sidebar.tsx
@@ -1,7 +1,7 @@
 'use client'
-import React, {useState, useMemo, useCallback, useEffect} from 'react'
+import {useState, useMemo, useCallback} from 'react'
 import Link from 'next/link'
-import {useParams, usePathname, useSearchParams} from 'next/navigation'
+import {useParams, usePathname} from 'next/navigation'
 import {ChevronRight} from 'lucide-react'

 type Props = {
@@ -61,7 +61,7 @@ const MENU_CONFIG = {
      title: '新闻资讯',
      sectionKey: 'news',
      items: [
-        {key: 'news-latest', label: '最新动态'},
+        {key: 'news-latest', label: '了解代理服务器的工作原理'},
        {key: 'news-announce', label: '公告'},
      ],
    },
@@ -170,7 +170,7 @@ export default function Sidebar({collapsed = false}: Props) {
  }, [category])

  return (
-    <aside className={`bg-white border rounded p-3 transition-all duration-200 shrink-0 ${collapsed ? 'w-20' : 'w-72'}`}>
+    <aside className={`bg-white rounded-lg p-3 transition-all duration-200 shrink-0 ${collapsed ? 'w-20' : 'w-72'}`}>
      <nav className="space-y-2">
        {MENU.map(section => (
          <div key={section.title}>
--- a/src/app/(home)/docs/win7-proxy/page.md
+++ b/src/app/(home)/docs/win7-proxy/page.md
@@ -0,0 +1,37 @@
+# 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']  // 例外列表
+};
--- a/src/app/(home)/help/features/[section]/[key]/page.tsx
+++ b/src/app/(home)/help/features/[section]/[key]/page.tsx
@@ -1,60 +0,0 @@
-import Wrap from '@/components/wrap'
-
-interface Props {
-  params: Promise<{section: string, key: string}>
-}
-
-// 根据 key 返回对应的组件
-async function getContentComponent(key: string) {
-  switch (key) {
-  case 'faq-general':
-    const {default: FaqGeneral} = await import('@/docs/faq-general.mdx')
-    return FaqGeneral
-  case 'product-overview':
-    const {default: ProductOverview} = await import('@/docs/product-overview.mdx')
-    return ProductOverview
-  case 'news-latest':
-    const {default: NewsLatest} = await import('@/docs/news-latest.mdx')
-    return NewsLatest
-  default:
-    return null
-  }
-}
-
-// 标题
-function getTitle(key: string) {
-  const titleMap: Record<string, string> = {
-    'faq-general': '常见问题总览',
-    'faq-billing': '计费与套餐问题',
-    'product-overview': '产品概述',
-    'product-features': '产品功能',
-    'news-latest': '最新动态',
-    'news-announce': '公告',
-  }
-  return titleMap[key] || '功能'
-}
-
-export default async function FeatureContentPage({params}: Props) {
-  const {key} = await params
-
-  // 动态获取组件
-  const Content = await getContentComponent(key)
-  const title = getTitle(key)
-
-  return (
-    <main>
-      <Wrap className="flex flex-col">
-        <div className="flex">
-          {Content ? (
-            <Content/>
-          ) : (
-            <div>
-              <h2 className="text-2xl font-semibold mb-4">{title}</h2>
-              <p className="text-slate-600">此页面内容开发中...</p>
-            </div>
-          )}
-        </div>
-      </Wrap>
-    </main>
-  )
-}
--- a/src/app/(home)/help/tutorials/[section]/[key]/page.tsx
+++ b/src/app/(home)/help/tutorials/[section]/[key]/page.tsx
@@ -1,69 +0,0 @@
-import Wrap from '@/components/wrap'
-
-// 只导入真正需要的 MDX 文件（按需导入，避免一次性导入太多）
-interface Props {
-  params: Promise<{section: string, key: string}>
-}
-
-// 根据 key 返回对应的组件
-async function getContentComponent(key: string) {
-  switch (key) {
-  case 'browser-proxy':
-    const {default: BrowserProxy} = await import('@/docs/browser-proxy.mdx')
-    return BrowserProxy
-  case 'package-operations':
-    const {default: PackageOperations} = await import('@/docs/package-operations.mdx')
-    return PackageOperations
-  case 'ios-proxy':
-    const {default: IosProxy} = await import('@/docs/ios-proxy.mdx')
-    return IosProxy
-  case 'windows7-proxy':
-    const {default: Windows7Proxy} = await import('@/docs/windows7-proxy.mdx')
-    return Windows7Proxy
-  default:
-    return null
-  }
-}
-
-// 标题
-function getTitle(key: string) {
-  const titleMap: Record<string, string> = {
-    'browser-proxy': '浏览器设置代理教程',
-    'package-operations': '套餐续费、合并、修改时效、补重操作',
-    'fixed-package': '长效固定套餐操作手册',
-    'ios-proxy': 'iOS设置代理教程',
-    'windows10-proxy': 'Windows10电脑设置代理教程',
-    'android-proxy': '安卓手机设置代理教程',
-    'windows7-proxy': 'Windows7电脑设置代理教程',
-    'mac-proxy': 'MAC设置代理教程',
-    'firefox-proxy': '火狐浏览器怎么设置HTTP/Socks5代理服务器',
-    'socks5-usage': '怎么使用Socks5代理IP上网',
-    'http-notes': '使用HTTP代理注意的点',
-  }
-  return titleMap[key] || '教程'
-}
-
-export default async function TutorialContentPage({params}: Props) {
-  const {key} = await params
-
-  // 动态获取组件
-  const Content = await getContentComponent(key)
-  const title = getTitle(key)
-
-  return (
-    <main>
-      <Wrap className="flex flex-col">
-        <div className="flex">
-          {Content ? (
-            <Content/>
-          ) : (
-            <div>
-              <h2 className="text-2xl font-semibold mb-4">{title}</h2>
-              <p className="text-slate-600">此页面内容开发中...</p>
-            </div>
-          )}
-        </div>
-      </Wrap>
-    </main>
-  )
-}
--- a/src/components/composites/purchase/pay.tsx
+++ b/src/components/composites/purchase/pay.tsx
@@ -10,12 +10,12 @@ import {toast} from 'sonner'
 import {useRouter} from 'next/navigation'
 import {completeResource, createResource, prepareResource} from '@/actions/resource'
 import {
-  usePlatformType,
  TradeMethod,
  TradeMethodDecoration,
 } from '@/lib/models/trade'
 import {PaymentModal} from '@/components/composites/payment/payment-modal'
 import {PaymentProps} from '@/components/composites/payment/type'
+import {usePlatformType} from '@/lib/hooks'

 export type PayProps = {
  method: 'alipay' | 'wechat' | 'balance'
--- a/src/components/composites/recharge/index.tsx
+++ b/src/components/composites/recharge/index.tsx
@@ -20,7 +20,6 @@ import {useProfileStore} from '@/components/stores-provider'
 import {merge} from '@/lib/utils'
 import {
  TradePlatform,
-  usePlatformType,
  TradeMethod,
  TradeMethodDecoration,
 } from '@/lib/models/trade'
@@ -29,6 +28,7 @@ import Image from 'next/image'
 import wechat from '@/components/composites/purchase/_assets/wechat.svg'
 import alipay from '@/components/composites/purchase/_assets/alipay.svg'
 import {PaymentProps} from '@/components/composites/payment/type'
+import {usePlatformType} from '@/lib/hooks'

 const schema = zod.object({
  method: zod.enum(['alipay', 'wechat']),
--- a/src/docs/android-proxy.mdx
+++ b/src/docs/android-proxy.mdx
@@ -1,4 +1,9 @@
 # 安卓手机设置代理教程

-在安卓设备上代理一般通过 Wi‑Fi 配置或使用支持代理的客户端 App。
- Wi‑Fi → 长按网络 → 修改网络 → 高级选项 → 代理
+1、打开设置，进入WLAN
+
+2、选择已连接的WIFI网络,点小箭头进入设置页面
+
+3、将代理设置为“手动”，填写主机名，端口信息，点击右上角保存
+
+4、打开手机浏览器搜索IP地址查询，若查询结果和设置的代理IP一致，则代理设置成功
--- a/src/docs/browser-proxy.mdx
+++ b/src/docs/browser-proxy.mdx
@@ -1,10 +1,42 @@
-# 浏览器设置代理教程
+# 浏览器代理设置教程（IE浏览器版）

-本指南演示如何在常见浏览器中设置 HTTP/Socks5 代理。
+## 概述
+本教程详细介绍如何在 **Internet Explorer（IE）浏览器** 中设置HTTP代理。按照以下步骤操作，您可以在几分钟内完成代理配置，实现网络访问地址的变更。

-## Chrome / Edge
-1. 打开设置 → 系统 → 打开代理设置
-2. 按照运营商提供的代理地址和端口填写
+## 详细步骤

-## 注意
-请确保代理地址与端口正确，并启用认证（如需要）。
+### 第一步：打开浏览器设置
+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浏览器
+立即生效: 是
--- a/src/docs/faq-billing.mdx
+++ b/src/docs/faq-billing.mdx
@@ -1,3 +1,3 @@
 # 计费与套餐问题

-计费相关常见问题（占位）。
+敬请期待~
--- a/src/docs/faq-general.mdx
+++ b/src/docs/faq-general.mdx
@@ -1,3 +1,21 @@
 # 常见问题（总览）

-常见问题汇总（占位）。
+
+> 本文介绍如何在Firefox中配置静态和动态代理IP
+
+## 静态代理配置
+
+### 手动设置
+1. **打开设置**：`about:preferences#general`
+2. **网络设置** → **设置**
+3. 选择 **手动代理配置**
+
+```json
+{
+  "HTTP代理": "45.76.123.89",
+  "端口": "8080",
+  "SSL代理": "45.76.123.89",
+  "端口": "8080",
+  "SOCKS主机": "45.76.123.89",
+  "端口": "1080"
+}
--- a/src/docs/firefox-proxy.mdx
+++ b/src/docs/firefox-proxy.mdx
@@ -1,3 +1,27 @@
-# Firefox 设置 HTTP/Socks5 代理
+# Firefox 设置 HTTP/Socks5 代理 

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

-本页介绍长效固定套餐的购买、续费与管理。
+一、打开官网产品订购页，选择固定IP套餐，平台支持按需选择全国城市/地区，套餐按照周/月/双月/季/年售卖；

- 购买流程
- 配置说明
- 常见问题
+二、套餐购买成功后，直接点击进入【个人中心】-【IP管理】-【固定IP】tab处，即可看到你所购买的套餐详情，您可以通过重置、查询、导出等操作具体查看；
+
+三、打开电脑设置中的【代理服务器配置】，输入您的套餐中的IP地址&端口号并点击保存
+
+四、打开游览器，输入账号&密码即可连接成功；查询本机IP地址，即可看到
--- a/src/docs/ios-proxy.mdx
+++ b/src/docs/ios-proxy.mdx
@@ -1,6 +1,30 @@
 # iOS 设置代理教程
+本教程详细指导您在 iPhone 和 iPad 上配置代理服务器的完整步骤。
+# 开始前的准备
+在开始配置前，请确保您已获得以下信息：
+- **代理服务器地址**（如：proxy.example.com 或 192.168.1.100）
+- **端口号**（如：8080、8888）
+- 如需认证：**用户名和密码**
+- 企业网络可能需要的 **自动配置脚本 URL**

-指导在 iPhone / iPad 上设置 HTTP/Socks5 代理的步骤。
+## 📱 Wi-Fi 网络代理设置（主要方式）

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

-系统偏好设置 → 网络 → 高级 → 代理，按需选择 HTTP/SOCKS 并填写地址。
+## 📱 Wi-Fi 网络代理设置（主要方式）
+
+### 第一步：进入网络设置
+1. 打开 **"设置"** 应用
+2. 点击 **"无线局域网"**（Wi-Fi）
+3. 确保已连接到需要设置代理的 Wi-Fi 网络
+4. 点击当前 Wi-Fi 名称右侧的 **蓝色信息图标 (ⓘ)**
+
+### 第二步：找到代理配置选项
+1. 在 Wi-Fi 详细信息页面中向下滑动
+2. 找到 **"配置代理"** 选项（通常在页面底部）
+3. 默认状态为 **"关闭"**
+
+### 第三步：选择代理模式
+点击"配置代理"，您会看到三种选项：
+
+```yaml
+# 模式选择说明
+关闭: 不使用代理
+自动: 使用自动配置脚本（.pac文件）
+手动: 手动输入代理服务器信息
--- a/src/docs/news-announce.mdx
+++ b/src/docs/news-announce.mdx
@@ -1,3 +1,3 @@
 # 公告

-公告占位页。
+敬请期待~
--- a/src/docs/news-latest.mdx
+++ b/src/docs/news-latest.mdx
@@ -1,3 +1,24 @@
-# 最新动态
+# 了解代理服务器的工作原理

-新闻资讯占位页。
+在网络通信中，代理服务器是一个重要的中间实体，充当了客户端和目标服务器之间的中转站。它既能够提供安全性和隐私保护，又能够改善网络性能和访问控制。那么，究竟代理服务器是如何工作的呢？接下来就让我们一起深入了解。
+
+1. 缓存和性能优化
+代理服务器可以缓存已经请求过的资源，例如网页、图片和视频等，这样当其他客户端再次请求同样的资源时，代理服务器可以直接返回缓存中的副本，从而减少了向目标服务器发起请求的次数，提高了整体的访问速度和响应效率。
+
+2. 访问控制和过滤
+
+通过代理服务器，管理员可以限制特定用户或IP地址的访问权限。代理服务器可以设置访问规则，如阻止特定的URL、域名或协议，或者需要用户进行身份验证才能访问特定资源。这对于企业内部网络安全管理和家庭网络控制都非常有用。
+
+3. 隐私保护和匿名访问
+
+代理服务器可以帮助用户隐藏真实的IP地址，提供匿名访问互联网的功能。在使用代理服务器时，用户的所有请求都会经过代理服务器转发，目标服务器无法直接获取到用户的真实身份信息，从而保护了用户的隐私。
+
+配置代理服务器的方法
+
+1. 客户端配置
+
+在大多数操作系统中，配置代理服务器的方法都相对简单。首先，打开网络设置选项，并找到代理服务器的设置项。根据你的需求，选择手动配置代理或者自动获取代理设置。如果你知道代理服务器的IP地址和端口号，将其填入相应的字段中即可。如果你需要身份验证或其他特殊设置，也可以在相应的位置进行配置。
+
+2. 代理服务器配置
+
+代理服务器的配置则相对复杂一些，需要一定的网络知识和技术能力。首先，选择一款适合你需求的代理服务器软件，例如常用的Squid、Nginx等。然后，根据软件的文档和指南，按照要求进行安装和基本配置。在进行详细配置时，你可以根据实际需求进行设置，如缓存大小、访问规则、安全认证等。
--- a/src/docs/package-operations.mdx
+++ b/src/docs/package-operations.mdx
@@ -1,7 +1,29 @@
-# 套餐续费 / 合并 / 修改时效 / 补重 操作
+# 套餐续费、合并、修改时效、补量操作

-说明如何在控制台进行套餐续费、合并以及调整时效等操作。
+一、套餐续费

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

-产品功能列表与说明（占位）。
+产品功能列表与说明部分待完善，敬请期待。
--- a/src/docs/product-overview.mdx
+++ b/src/docs/product-overview.mdx
@@ -1,3 +1,3 @@
 # 产品概述

-这里展示产品概述内容，示例占位文本。可替换为真实文档。
+暂未产品概述，后期会补充内容，敬请期待。
--- a/src/docs/socks5-usage.mdx
+++ b/src/docs/socks5-usage.mdx
@@ -1,3 +1,43 @@
 # 使用 Socks5 代理上网

-介绍 Socks5 与 HTTP 代理的区别以及如何在客户端配置 Socks5。
+Firefox 提供了多种代理设置方式，支持 HTTP/HTTPS 和 SOCKS5 协议。本教程将详细介绍各种配置方法。
+
+## 配置方法概览
+
+| 方法 | 适用场景 | 复杂度 | 持久性 |
+|------|----------|--------|--------|
+| 手动设置 | 单用户临时使用 | 低 | 重启浏览器失效 |
+| 自动代理(PAC) | 企业环境 | 中 | 永久 |
+| 扩展程序 | 灵活切换规则 | 高 | 永久 |
+| 系统级代理 | 全局代理 | 低 | 系统重启失效 |
+
+## 手动代理设置
+
+### 打开代理设置页面
+
+1. **点击菜单按钮**（右上角三横线）
+2. 选择 **设置**（或直接访问 `about:preferences`）
+3. 滚动到页面底部
+4. 点击 **网络设置** → **设置**
+
+```javascript
+// 快速访问代理设置的地址
+about:preferences#general
+// 或直接
+about:preferences
+SOCKS5代理IP是一种网络代理协议，用于在计算机之间传递数据，同时提供匿名性和安全性。SOCKS5协议可以让应用程序通过一个中间服务器，使用另一个主机上的网络资源，实现代理访问，从而隐藏客户端的真实IP地址。
+与其他代理协议不同，SOCKS5代理协议可以支持不同的身份验证方式，包括用户名/密码身份验证和GSSAPI身份验证。SOCKS5协议还可以提供UDP和TCP流量代理，使得应用程序可以在不改变代码的情况下使用代理IP。
+SOCKS5代理IP的主要优点包括：
+1、更高的安全性：SOCKS5协议支持加密传输，可以确保数据在传输过程中的安全性。
+2、更高的匿名性：SOCKS5协议支持UDP和TCP流量代理，并且支持不同的身份验证方式，可以帮助用户隐藏真实IP地址，保护隐私。
+3、更高的灵活性：SOCKS5代理可以让应用程序无需修改代码即可使用代理IP，同时支持多种身份验证方式和传输协议，提高了灵活性和可用性。
+总之，SOCKS5代理IP是一种高安全性和高匿名性的代理协议，可以帮助用户隐藏真实IP地址并保护隐私，同时提高灵活性和可用性。
+
+SOCKS5代理的流程如下：
+1、用户向代理服务器发送连接请求。
+2、代理服务器收到连接请求后，根据用户请求的目标地址和端口，向目标服务器发起连接请求。
+3、目标服务器收到代理服务器的连接请求后，回复确认连接。
+4、代理服务器收到目标服务器的确认连接后，将数据转发给目标服务器。
+5、目标服务器接收到数据后，将数据返回给代理服务器。
+6、代理服务器收到数据后，将数据转发给用户。
+在这个过程中，SOCKS5代理服务器起到了中间传输的作用，将用户的请求转发给目标服务器，并将目标服务器的响应返回给用户。由于传输过程中使用的是代理服务器的IP地址和端口号，所以用户的真实IP地址和端口号得到了隐藏。
--- a/src/docs/windows10-proxy.mdx
+++ b/src/docs/windows10-proxy.mdx
@@ -1,5 +1,7 @@
 # Windows10 电脑设置代理教程

- 打开 设置 → 网络和 Internet → 代理
- 填写手动代理服务器地址和端口
- 保存并测试连接
+1、点击桌面右下角网络连接图标，选择“网络和Internet设置”选项
+
+2、点击“代理”，将“使用代理服务器”设置为开，输入地址和端口后保存
+
+3、浏览器打开百度，输入IP地址查询，若查询结果和设置的代理IP一致，则代理设置成功S
--- a/src/docs/windows7-proxy.mdx
+++ b/src/docs/windows7-proxy.mdx
@@ -1,3 +1,37 @@
 # 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']  // 例外列表
+};
--- a/src/lib/hooks/index.ts
+++ b/src/lib/hooks/index.ts
@@ -0,0 +1,32 @@
+import {useEffect, useState} from 'react'
+import {TradePlatform} from '@/lib/models/trade'
+
+// 设备检测Hook
+export const usePlatformType = (): TradePlatform => {
+  // 在SSR环境下返回默认值
+  const [platform, setPlatform] = useState<TradePlatform>(() => {
+    if (typeof window === 'undefined') return TradePlatform.Desktop
+    return window.matchMedia('(max-width: 768px)').matches
+      ? TradePlatform.Mobile
+      : TradePlatform.Desktop
+  })
+
+  useEffect(() => {
+    // 确保在客户端执行
+    if (typeof window === 'undefined') return
+
+    const checkPlatform = () => {
+      const isMobile = window.matchMedia('(max-width: 768px)').matches
+      setPlatform(isMobile ? TradePlatform.Mobile : TradePlatform.Desktop)
+    }
+
+    const mediaQuery = window.matchMedia('(max-width: 768px)')
+    mediaQuery.addEventListener('change', checkPlatform)
+
+    return () => {
+      mediaQuery.removeEventListener('change', checkPlatform)
+    }
+  }, [])
+
+  return platform
+}
--- a/src/lib/models/trade.ts
+++ b/src/lib/models/trade.ts
@@ -1,6 +1,4 @@
-'use client'
 import {StaticImageData} from 'next/image'
-import {useEffect, useState} from 'react'
 import wechat from '@/components/composites/purchase/_assets/wechat.svg'
 import alipay from '@/components/composites/purchase/_assets/alipay.svg'

@@ -51,33 +49,3 @@ export type PaymentMethodConfig = {
    text: string
  }
 }
-
-// 设备检测Hook
-export const usePlatformType = (): TradePlatform => {
-  // 在SSR环境下返回默认值
-  const [platform, setPlatform] = useState<TradePlatform>(() => {
-    if (typeof window === 'undefined') return TradePlatform.Desktop
-    return window.matchMedia('(max-width: 768px)').matches
-      ? TradePlatform.Mobile
-      : TradePlatform.Desktop
-  })
-
-  useEffect(() => {
-    // 确保在客户端执行
-    if (typeof window === 'undefined') return
-
-    const checkPlatform = () => {
-      const isMobile = window.matchMedia('(max-width: 768px)').matches
-      setPlatform(isMobile ? TradePlatform.Mobile : TradePlatform.Desktop)
-    }
-
-    const mediaQuery = window.matchMedia('(max-width: 768px)')
-    mediaQuery.addEventListener('change', checkPlatform)
-
-    return () => {
-      mediaQuery.removeEventListener('change', checkPlatform)
-    }
-  }, [])
-
-  return platform
-}
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1,5 +1,8 @@
+import {ReactNode} from 'react'
 import {ClassNameValue, twMerge} from 'tailwind-merge'

 export function merge(...inputs: ClassNameValue[]) {
  return twMerge(inputs)
 }
+
+export type Children = {children: ReactNode}