diff --git a/src/home/product/http.tsx b/src/home/product/http.tsx
new file mode 100644
index 0000000..ce81017
--- /dev/null
+++ b/src/home/product/http.tsx
@@ -0,0 +1,817 @@
+import { useState } from "react"
+import { Toaster, toast } from "sonner"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import Wrap from "@/components/wrap"
+import { cn } from "@/lib/utils"
+import alipay from "../_assets/alipay.svg"
+import wechat from "../_assets/wechat.svg"
+
+const TABS = [
+ { id: "prepaid", label: "预储值" },
+ { id: "unlimited", label: "短效无限量" },
+ { id: "daily", label: "短效包天" },
+ { id: "volume", label: "短效包量" },
+ { id: "game", label: "长效游戏" },
+]
+
+const PREPAID_PLANS = [
+ { amount: 200, bonus: "5%", total: 210, tag: "送 ￥5%" },
+ { amount: 500, bonus: "10%", total: 550, tag: "送 ￥10%" },
+ { amount: 1000, bonus: "15%", total: 1150, tag: "送 ￥15%" },
+]
+
+const PREPAID_PLANS_LARGE = [
+ { amount: 2000, bonus: "20%", total: 2400, tag: "多送20%" },
+ { amount: 5000, bonus: "25%", total: 6250, tag: "多送25%" },
+ { amount: 10000, bonus: "30%", total: 13000, tag: "多送30%" },
+]
+
+const DURATION_OPTIONS = [
+ { value: "5", label: "1~5分钟" },
+ { value: "25", label: "5~25分钟" },
+ { value: "180", label: "25分钟~3小时" },
+ { value: "360", label: "3小时~6小时" },
+]
+
+const PERIOD_OPTIONS = [
+ { value: "1", label: "按天" },
+ { value: "7", label: "按周" },
+ { value: "30", label: "按月" },
+ { value: "90", label: "按季" },
+]
+
+const IP_AMOUNT_OPTIONS = [
+ { value: 5000, label: "每日最多使用 5,000 个IP" },
+ { value: 10000, label: "每日最多使用 10,000 个IP" },
+ { value: 30000, label: "每日最多使用 30,000 个IP" },
+ { value: 50000, label: "每日最多使用 50,000 个IP" },
+ { value: 100000, label: "每日最多使用 100,000 个IP" },
+]
+
+const VOLUME_AMOUNTS = [1, 10, 20, 50, 80, 100, 200, 500, 1000]
+
+const BANDWIDTH_OPTIONS = [
+ { value: "1", label: "1M" },
+ { value: "2", label: "2M" },
+ { value: "5", label: "5M" },
+ { value: "10", label: "10M" },
+]
+
+export default function HttpPage() {
+ const [activeTab, setActiveTab] = useState("prepaid")
+ const [customAmount, setCustomAmount] = useState("")
+ const [customIpAmount, setCustomIpAmount] = useState("")
+
+ const [duration, setDuration] = useState(DURATION_OPTIONS[0].value)
+ const [period, setPeriod] = useState(PERIOD_OPTIONS[0].value)
+ const [periodCount, setPeriodCount] = useState(1)
+ const [whitelistCount, setWhitelistCount] = useState(1)
+ const [ipAmount, setIpAmount] = useState(5000)
+ const [volumeAmount, setVolumeAmount] = useState(1)
+ const [bandwidth, setBandwidth] = useState(BANDWIDTH_OPTIONS[0].value)
+
+ // 支付弹窗状态
+ const [payDialogOpen, setPayDialogOpen] = useState(false)
+ const [payMethod, setPayMethod] = useState("2")
+ const [isRecharge] = useState(true)
+ const [isLoading, setIsLoading] = useState(false)
+
+ // 计算价格
+ const calculatePrice = () => {
+ // 根据不同的 tab 计算价格
+ let price = 0
+ switch (activeTab) {
+ case "prepaid":
+ price = Number(customAmount) || 0
+ break
+ case "unlimited":
+ // 简化计算
+ price = whitelistCount * periodCount * 0.5
+ break
+ case "daily":
+ price = ipAmount * periodCount * 0.01
+ break
+ case "volume":
+ price = volumeAmount || Number(customAmount) || 0
+ break
+ case "game":
+ price = periodCount * 5
+ break
+ default:
+ price = 0
+ }
+ return Number(price.toFixed(2))
+ }
+
+ const totalPrice = calculatePrice()
+
+ // 处理支付
+ const handlePay = () => {
+ setIsLoading(true)
+ // 模拟支付请求
+ setTimeout(() => {
+ setIsLoading(false)
+ setPayDialogOpen(false)
+ toast.success(`支付成功！支付金额：¥${totalPrice.toFixed(2)}`)
+ }, 1500)
+ }
+
+ // 打开支付弹窗
+ const openPayDialog = () => {
+ if (totalPrice <= 0) {
+ toast.error("请输入有效的充值金额")
+ return
+ }
+ setPayDialogOpen(true)
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+ 套餐多元，自主选择，城市覆盖广性价比高，服务态度都说好
+
+
+ 预存享超值优惠 海量IP池随心用
+
+
+
+
+
+
+ {TABS.map(tab => (
+ -
+
+
+ ))}
+
+
+ {activeTab === "prepaid" && (
+
+ )}
+
+ {activeTab === "unlimited" && (
+
+
+ 适用于每天需要大量高匿IP的用户使用，支持HTTP(S)、S5协议，IP可通过API获得集成在程序或软件中使用
+
+
+
+ 点击前往购买新http/socks5产品、IP池更大、网速更快
+
+
+
+
+
+ {DURATION_OPTIONS.map(opt => (
+ setDuration(opt.value)}
+ >
+ {opt.label}
+
+ ))}
+
+
+
+
+
+ {PERIOD_OPTIONS.map(opt => (
+ setPeriod(opt.value)}
+ >
+ {opt.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ setWhitelistCount(v)}
+ min={1}
+ max={1000}
+ />
+
+ 您的白名单上限{whitelistCount}个，
+ {whitelistCount === 1 ? (
+
+ 价格无折扣
+
+ ) : whitelistCount <= 5 ? (
+
+ {11 - whitelistCount}折
+
+ ) : (
+ 6折
+ )}
+
+
+
+
+
+
+ )}
+
+ {activeTab === "daily" && (
+
+
+ 适用于每天需要大量高匿IP的用户使用，支持HTTP(S)、S5协议，IP可通过API获得集成在程序或软件中使用
+
+
+
+ 点击前往购买新http/socks5产品、IP池更大、网速更快
+
+
+
+
+
+ {IP_AMOUNT_OPTIONS.map(opt => (
+ setIpAmount(opt.value)}
+ className="justify-center"
+ >
+ {opt.label}
+
+ ))}
+
+
+
+ 每日最多使用
+ setCustomIpAmount(e.target.value)}
+ placeholder="IP数"
+ className="w-28 h-7 inline-block text-center"
+ />
+ 个IP
+
+
+
+
+
+
+ {DURATION_OPTIONS.map(opt => (
+ setDuration(opt.value)}
+ >
+ {opt.label}
+
+ ))}
+
+
+
+
+
+ {PERIOD_OPTIONS.slice(0, 3).map(opt => (
+ setPeriod(opt.value)}
+ >
+ {opt.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ )}
+
+ {activeTab === "volume" && (
+
+
+ 提取免费，使用才扣费。节约成本，按使用次数扣费
+
+
+
+ 点击前往购买新http/socks5产品、IP池更大、网速更快
+
+
+
+
+
+ {VOLUME_AMOUNTS.map(amount => (
+ setVolumeAmount(amount)}
+ className="justify-center"
+ >
+ {amount}元
+
+ ))}
+
+
+
+ 自定义
+ setCustomAmount(e.target.value)}
+ placeholder="金额"
+ className="w-28 h-7 inline-block text-center"
+ />
+ 元
+
+
+
+
+
+
+ {DURATION_OPTIONS.map(opt => (
+ setDuration(opt.value)}
+ >
+ {opt.label}
+
+ ))}
+
+
+
+
+
+ 可使用{" "}
+
+ {Math.floor(
+ (volumeAmount || customAmount
+ ? Number(customAmount || volumeAmount)
+ : 0) * 100,
+ )}
+ {" "}
+ 个IP，有效期1年，提取免费，使用才扣费。
+
+
+
+
+
+ )}
+
+ {activeTab === "game" && (
+
+
+ 高匿 · 高质 · 长效 · 稳定 · HTTP · SOCKS5
+
+
+
+
+ 国内游戏
+ 国际游戏
+
+
+
+
+
+ 共享线路
+ 独享游戏
+
+
+
+
+
+ 普通线路
+ 电信
+ 移动
+ 联通
+
+
+
+
+
+ {BANDWIDTH_OPTIONS.map(opt => (
+ setBandwidth(opt.value)}
+ >
+ {opt.label}
+
+ ))}
+
+
+
+
+
+ {PERIOD_OPTIONS.map(opt => (
+ setPeriod(opt.value)}
+ >
+ {opt.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ )
+}
+
+function PrepaidCardCustom({
+ amount,
+ onAmountChange,
+ onPay,
+}: {
+ amount: string
+ onAmountChange: (v: string) => void
+ onPay: () => void
+}) {
+ return (
+
+
+
+ ￥
+ onAmountChange(e.target.value)}
+ className="inline-block w-24 h-auto text-2xl font-bold text-center border-0 border-b-2 border-blue-200 rounded-none focus-visible:ring-0 px-0 mx-1"
+ placeholder="金额"
+ min="1"
+ />
+
+
+
+ 实到{amount || "1"}H币
+
+
+
+ - 国内长效月卡低至9.9元
+ - 国际长效月卡低至10元
+ - 多充多送更超值
+ - 省时省力更方便
+ - 支持购买任意套餐
+
+
+
+
+ )
+}
+function PrepaidCard({
+ plan,
+ onPay,
+}: {
+ plan: { amount: number; bonus: string; total: number; tag: string }
+ onPay: () => void
+}) {
+ return (
+
+
+ {plan.tag}
+
+
+ ￥{plan.amount}
+
+ 实到{plan.total}H币
+
+
+ - 国内长效月卡低至9.9元
+ - 国际长效月卡低至10元
+ - 多充多送更超值
+ - 省时省力更方便
+ - 支持购买任意套餐
+
+
+
+
+ )
+}
+
+function PrepaidCardLarge({
+ plan,
+ onPay,
+}: {
+ plan: { amount: number; bonus: string; total: number; tag: string }
+ onPay: () => void
+}) {
+ return (
+
+
+ {plan.tag}
+
+
+ ￥{plan.amount}
+ 实到{plan.total}H币
+
+
+
+ )
+}
+
+function OptionBox({
+ label,
+ children,
+}: {
+ label: string
+ children: React.ReactNode
+}) {
+ return (
+
+
+
{label}
+ {children}
+
+
+ )
+}
+
+function OptionBtn({
+ active = false,
+ onClick,
+ className,
+ children,
+}: {
+ active?: boolean
+ onClick?: () => void
+ className?: string
+ children: React.ReactNode
+}) {
+ return (
+
+ )
+}
+
+function Stepper({
+ value,
+ unit,
+ onChange,
+ min = 1,
+ max,
+}: {
+ value: number
+ unit: string
+ onChange: (v: number) => void
+ min?: number
+ max?: number
+}) {
+ return (
+
+
+
+ {value}
+ {unit}
+
+
+
+ )
+}
+
+function PriceBar({ price, onPay }: { price: number; onPay: () => void }) {
+ return (
+
+
+
+ 价格：¥{price.toFixed(2)}
+
+
+
+
+ )
+}
diff --git a/src/home/product/index.tsx b/src/home/product/index.tsx
index 62f95ab..19e8635 100644
--- a/src/home/product/index.tsx
+++ b/src/home/product/index.tsx
@@ -11,7 +11,7 @@ import PurchaseInfo from "./purchaseInfo"
const TAB_ALIAS: Record
= {
short: "dynamic",
long: "dynamic",
- global: "dynamic",
+ http: "http",
tunnel: "dynamic",
exclusive: "static",
}
diff --git a/src/home/product/productGrid.tsx b/src/home/product/productGrid.tsx
index 91f39a4..f1b8e66 100644
--- a/src/home/product/productGrid.tsx
+++ b/src/home/product/productGrid.tsx
@@ -15,9 +15,13 @@ export default function ProductGrid({ products }: ProductGridProps) {
className="relative overflow-visible rounded-xl shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-6 flex flex-col min-h-60"
>
{product.tag && (
-
-
- {product.tag}
+
+
+
+
+ {product.tag}
+
+
)}
diff --git a/src/home/product/routeros.tsx b/src/home/product/routeros.tsx
new file mode 100644
index 0000000..c90bdf4
--- /dev/null
+++ b/src/home/product/routeros.tsx
@@ -0,0 +1,408 @@
+import { useState } from "react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import Wrap from "@/components/wrap"
+import { cn } from "@/lib/utils"
+import alipay from "../_assets/alipay.svg"
+import balance from "../_assets/balance.svg"
+import wechat from "../_assets/wechat.svg"
+
+const PRODUCT_VARIANTS = [
+ {
+ id: 1,
+ name: "Mikrotik百兆5G双频-1拖40",
+ describe: "千兆双频",
+ price: 299,
+ lineprice: 399,
+ src: "https://gd4.alicdn.com/imgextra/i2/2212500574675/O1CN015GmSuk1kPCJNLBMl9_!!2212500574675.jpg_400x400.jpg",
+ },
+ {
+ id: 2,
+ name: "ros系统千兆5G双频版-1拖40",
+ describe: "千兆双频增强",
+ price: 399,
+ lineprice: 499,
+ src: "https://mp4.juip.com/%E8%B7%AF%E7%94%B1%E5%99%A8.png",
+ },
+ {
+ id: 3,
+ name: "热销款-ros系统千兆5G双频版1拖30",
+ describe: "企业级性能",
+ price: 499,
+ lineprice: 599,
+ src: "https://gd1.alicdn.com/imgextra/i2/2212500574675/O1CN010VprRs1kPCJG5ks8l_!!2212500574675.jpg_400x400.jpg",
+ },
+ {
+ id: 4,
+ name: "Mikrotik千兆5G双频版-1拖30",
+ describe: "五口千兆",
+ price: 599,
+ lineprice: 699,
+ src: "https://gd1.alicdn.com/imgextra/i2/2212500574675/O1CN010VprRs1kPCJG5ks8l_!!2212500574675.jpg_400x400.jpg",
+ },
+ {
+ id: 5,
+ name: "千兆5G双频PRO版-1拖60",
+ describe: "五口千兆",
+ price: 599,
+ lineprice: 699,
+ src: "https://gd4.alicdn.com/imgextra/i4/2212500574675/O1CN01blV7JL1kPCJcWJgyY_!!2212500574675.jpg_400x400.jpg",
+ },
+ {
+ id: 6,
+ name: "千兆5G旗舰版-1拖100",
+ describe: "五口千兆",
+ price: 599,
+ lineprice: 699,
+ src: "https://gd1.alicdn.com/imgextra/i3/2212500574675/O1CN01DdOPmM1kPCJHFrtcS_!!2212500574675.jpg_400x400.jpg",
+ },
+ {
+ id: 7,
+ name: "全协议千兆双频软路由一拖100+AP",
+ describe: "五口千兆",
+ price: 599,
+ lineprice: 699,
+ src: "https://mp4.juip.com/%E5%85%A8%E5%8D%8F%E8%AE%AE%E5%8D%83%E5%85%86%E5%8F%8C%E9%A2%91%E8%BD%AF%E8%B7%AF%E7%94%B1%E4%B8%80%E6%8B%96100%2BAP%20.jpg",
+ },
+]
+
+const PAYMENT_METHODS = [
+ { id: "alipay", label: "支付宝支付", icon: alipay },
+ { id: "wechat", label: "微信支付", icon: wechat },
+ { id: "balance", label: "余额支付", icon: balance },
+]
+
+const SPECS = [
+ [
+ { label: "品牌", value: "Mikrotik" },
+ { label: "售后服务", value: "店铺三包" },
+ { label: "无线传输速率", value: "1000Mbps" },
+ { label: "是否无线", value: "是" },
+ { label: "适用场景", value: "中小企业/游戏路由" },
+ ],
+ [
+ { label: "型号", value: "AC2" },
+ { label: "USB接口", value: "1个" },
+ { label: "无线速度", value: "1167M" },
+ { label: "上市时间", value: "2012-08-22" },
+ ],
+ [
+ { label: "成色", value: "全新" },
+ { label: "有线传输率", value: "千兆端口" },
+ { label: "无线频率", value: "2.4G&5G" },
+ { label: "版本类型", value: "中国大陆" },
+ { label: "保修期", value: "1年" },
+ ],
+]
+
+export default function RouterosPage() {
+ const [selectedVariant, setSelectedVariant] = useState(0)
+ const [payMethod, setPayMethod] = useState("alipay")
+ const [userInfo, setUserInfo] = useState({
+ name: "",
+ phone: "",
+ address: "",
+ })
+ const [showModal, setShowModal] = useState(false)
+
+ const product = PRODUCT_VARIANTS[selectedVariant]
+
+ return (
+
+
+
+
+ 
+
+
+ {PRODUCT_VARIANTS.map((variant, index) => (
+
+ ))}
+
+
+
+
+
+ ros千兆软路由 一拖100矩阵 抖音快手单机单IP 魔硬软改 工作室试玩
+
+
+
+
+
+ 商品信息
+ {product.name}
+
+
+ 价格
+
+ ¥{product.lineprice}
+
+
+
+ 会员价
+
+ ¥{product.price}
+
+
+
+ {product.describe}
+
+
+
+
+
+
+
+ {PRODUCT_VARIANTS.map((variant, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ 收货人
+
+
+ {userInfo.name || "未设置"}
+
+
+
+
+ 电话号码
+
+
+ {userInfo.phone || "未设置"}
+
+
+
+
+ 收货地址
+
+
+ {userInfo.address || "未设置"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 产品规格
+
+
+ {SPECS.map((col, colIdx) => (
+
+
+ {col.map((spec, idx) => (
+
+ {spec.label}
+
+ {spec.value}
+
+
+ ))}
+
+
+ ))}
+
+
+
+ 产品展示
+
+
+ {[
+ "https://img.alicdn.com/imgextra/i4/2212500574675/O1CN01RYiT0X1kPCJFZqcIn_!!2212500574675.jpg",
+ "https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01K3pAdS1kPCJFZr5Pv_!!2212500574675.jpg",
+ "https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01fLjEYo1kPCJMaaMkj_!!2212500574675.jpg",
+ "https://img.alicdn.com/imgextra/i1/2212500574675/O1CN01TN50Rn1kPCJCp9gBl_!!2212500574675.jpg",
+ "https://img.alicdn.com/imgextra/i1/2212500574675/O1CN018Iy0Xg1kPCJJP5Zn5_!!2212500574675.jpg",
+ "https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01fQQIT81kPCJLg5xrB_!!2212500574675.png",
+ "https://img.alicdn.com/imgextra/i3/2212500574675/O1CN01oAjpI01kPCJGyE0JZ_!!2212500574675.png",
+ "https://img.alicdn.com/imgextra/i3/2212500574675/O1CN01unvVq91kPCJFZq52D_!!2212500574675.png",
+ ].map((src, index) => (
+
+ 
+
+ ))}
+
+
+ )
+}
diff --git a/src/routers/index.tsx b/src/routers/index.tsx
index 41608c1..25398be 100644
--- a/src/routers/index.tsx
+++ b/src/routers/index.tsx
@@ -14,6 +14,8 @@ import IpLinePage from "@/home/ipLine"
import LayoutPage from "@/home/layout"
import LoginPage from "@/home/login"
import ProductPage from "@/home/product"
+import HttpPage from "@/home/product/http"
+import RouterosPage from "@/home/product/routeros"
import SoftDownloadPage from "@/home/softDownload"
export const router = createBrowserRouter([
{
@@ -22,6 +24,8 @@ export const router = createBrowserRouter([
children: [
{ index: true, element:
},
{ path: "product", element:
},
+ { path: "product/http", element:
},
+ { path: "product/routeros", element:
},
{ path: "ipline", element:
},
{ path: "softdownload", element:
},
{ path: "help", element:
},