From 623e3d527f20135a61e0691d0bf079798b3b3d47 Mon Sep 17 00:00:00 2001
From: Eamon <17516219072@163.com>
Date: Wed, 19 Aug 2026 13:45:18 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=AB=8B=E5=8D=B3=E8=B4=AD?=
 =?UTF-8?q?=E4=B9=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/home/product/buy.tsx        | 1057 +++++++++++--------------------
 src/home/softDownload/index.tsx |    2 +-
 2 files changed, 355 insertions(+), 704 deletions(-)

diff --git a/src/home/product/buy.tsx b/src/home/product/buy.tsx
index 9411583..463da99 100644
--- a/src/home/product/buy.tsx
+++ b/src/home/product/buy.tsx
@@ -1,15 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useState } from "react"
 import { useLocation, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
-import type { CreateOrderData } from "@/api/order"
-import { checkPayStatus, createOrder, createTestAccount } from "@/api/order"
+import { createOrder } from "@/api/order"
 import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  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"
@@ -23,6 +16,9 @@ import {
 import Wrap from "@/components/wrap"
 import type { Product } from "@/lib/models/product"
 import { cn } from "@/lib/utils"
+import alipay from "../_assets/alipay.svg"
+import balance from "../_assets/balance.svg"
+import wechat from "../_assets/wechat.svg"
 
 // ============ 工具函数 ============
 function randomChars(length: number): string {
@@ -42,46 +38,7 @@ function randomDigits(length: number): string {
   return result
 }
 
-// ============ 类型定义 ============
-type PaymentState = {
-  orderData: CreateOrderData
-  polling: boolean
-}
-
-// ============ 子组件 ============
-
-// 价格卡片组件
-function PriceCard({ product, isTest }: { product: Product; isTest: boolean }) {
-  return (
-    <div className="bg-linear-to-r from-orange-50 to-amber-50 rounded-2xl p-5 mb-6 flex text-center border border-orange-100/60">
-      <div className="flex items-center gap-4">
-        <span className="text-sm text-gray-500">套餐价格</span>
-        {isTest ? (
-          <span className="text-3xl font-bold text-green-500">免费</span>
-        ) : (
-          <div className="flex items-end gap-2">
-            <span className="text-3xl font-bold text-orange-500">
-              ¥{product.price.toFixed(2)}
-            </span>
-            {product.originalPrice !== undefined &&
-              product.originalPrice > product.price && (
-                <span className="text-sm text-gray-400 line-through mb-0.5">
-                  ¥{product.originalPrice.toFixed(2)}
-                </span>
-              )}
-          </div>
-        )}
-      </div>
-      {product.duration && (
-        <span className="text-sm text-gray-500 bg-white/60 px-4 py-1.5 rounded-full">
-          {product.duration}
-        </span>
-      )}
-    </div>
-  )
-}
-
-// 模式切换 Tab 组件
+// ============ 模式切换 Tab ============
 function ModeTabs({
   mode,
   onModeChange,
@@ -90,10 +47,10 @@ function ModeTabs({
   onModeChange: (mode: "single" | "batch") => void
 }) {
   return (
-    <div className="flex bg-gray-50 rounded-xl p-1 mb-6">
+    <div className="flex bg-gray-50 rounded-xl p-1 w-48">
       <button
         className={cn(
-          "flex-1 py-2.5 text-sm font-medium rounded-lg transition-all cursor-pointer",
+          "flex-1 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer",
           mode === "single"
             ? "bg-white text-blue-600 shadow-sm"
             : "text-gray-500 hover:text-gray-700",
@@ -104,7 +61,7 @@ function ModeTabs({
       </button>
       <button
         className={cn(
-          "flex-1 py-2.5 text-sm font-medium rounded-lg transition-all cursor-pointer",
+          "flex-1 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer",
           mode === "batch"
             ? "bg-white text-blue-600 shadow-sm"
             : "text-gray-500 hover:text-gray-700",
@@ -117,29 +74,31 @@ function ModeTabs({
   )
 }
 
-// 连接数选择器组件
+// ============ 连接设备数选择器 ============
 function ConnectCountSelector({
   value,
   onChange,
   label,
   hint,
+  disabled,
 }: {
   value: number
   onChange: (value: number) => void
   label: string
   hint?: string
+  disabled?: boolean
 }) {
   return (
-    <div>
-      <Label className="text-sm font-medium text-gray-700 mb-2 block">
-        {label}
+    <div className="flex items-center gap-6">
+      <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+        {label}：
       </Label>
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-4 flex-1">
         <Button
           variant="outline"
           size="icon"
-          className="h-10 w-10 rounded-full"
-          disabled={value <= 1}
+          className="h-8 w-8 rounded-full"
+          disabled={disabled || value <= 1}
           onClick={() => onChange(Math.max(1, value - 1))}
         >
           <svg
@@ -156,13 +115,14 @@ function ConnectCountSelector({
             />
           </svg>
         </Button>
-        <span className="w-12 text-center text-xl font-semibold text-gray-700">
+        <span className="w-8 text-center text-lg font-semibold text-gray-700">
           {value}
         </span>
         <Button
           variant="outline"
           size="icon"
-          className="h-10 w-10 rounded-full"
+          className="h-8 w-8 rounded-full"
+          disabled={disabled}
           onClick={() => onChange(value + 1)}
         >
           <svg
@@ -179,292 +139,42 @@ function ConnectCountSelector({
             />
           </svg>
         </Button>
-        {hint && <span className="text-xs text-gray-400 ml-1">{hint}</span>}
+        {hint && <span className="text-xs text-gray-400">{hint}</span>}
       </div>
     </div>
   )
 }
 
-// 余额展示组件
-function BalanceDisplay({ balance }: { balance: number }) {
-  return (
-    <div className="flex items-center justify-between py-3 px-5 bg-gray-50/80 rounded-xl border border-gray-100">
-      <span className="text-sm text-gray-600">余额</span>
-      <div className="flex items-center gap-4">
-        <span className="text-sm text-gray-600">
-          当前账户余额
-          <span className="font-bold text-orange-500 ml-1">
-            ¥{balance.toFixed(2)}
-          </span>
-        </span>
-        <Button
-          variant="link"
-          className="text-sm text-blue-500 p-0 h-auto font-medium"
-        >
-          去充值 →
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-// 支付方式选择组件
-function PaymentMethodSelector({
-  value,
-  onChange,
-}: {
-  value: string
-  onChange: (value: string) => void
-}) {
-  return (
-    <div>
-      <Label className="text-sm font-medium text-gray-700 mb-2 block">
-        支付方式
-      </Label>
-      <RadioGroup value={value} onValueChange={onChange} className="flex gap-6">
-        <div className="flex items-center gap-2">
-          <RadioGroupItem value="100" id="alipay" />
-          <Label
-            htmlFor="alipay"
-            className="cursor-pointer text-sm text-gray-700"
-          >
-            支付宝
-          </Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem value="70" id="wechat" />
-          <Label
-            htmlFor="wechat"
-            className="cursor-pointer text-sm text-gray-700"
-          >
-            微信
-          </Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem value="1" id="balance" />
-          <Label
-            htmlFor="balance"
-            className="cursor-pointer text-sm text-gray-700"
-          >
-            余额
-          </Label>
-        </div>
-      </RadioGroup>
-    </div>
-  )
-}
-
-// 金额汇总组件
-function PriceSummary({ total }: { total: number }) {
-  return (
-    <div className="border-t border-gray-100 pt-4 mt-2 space-y-1.5">
-      <div className="flex justify-between text-sm">
-        <span className="text-gray-500">总金额</span>
-        <span className="font-medium text-gray-800">¥{total.toFixed(2)}</span>
-      </div>
-      <div className="flex justify-between">
-        <span className="text-gray-500">应付款</span>
-        <span className="text-2xl font-bold text-orange-500">
-          ¥{total.toFixed(2)}
-        </span>
-      </div>
-    </div>
-  )
-}
-
-// 表单操作按钮组件
-function FormActions({
-  onBack,
-  onSubmit,
-  submitText,
-  submitting,
-}: {
-  onBack: () => void
-  onSubmit: () => void
-  submitText: string
-  submitting: boolean
-}) {
-  return (
-    <div className="flex gap-3 pt-4">
-      <Button
-        variant="outline"
-        className="flex-1 h-12 rounded-xl text-base border-gray-200 hover:bg-gray-50"
-        onClick={onBack}
-      >
-        上一步
-      </Button>
-      <Button
-        className="flex-1 h-12 rounded-xl text-base bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 hover:shadow-lg hover:shadow-blue-200/50 transition-all"
-        onClick={onSubmit}
-        disabled={submitting}
-      >
-        {submitting ? "提交中..." : submitText}
-      </Button>
-    </div>
-  )
-}
-
-// 优惠券选择组件
+// ============ 优惠券选择器 ============
 function CouponSelector() {
   return (
-    <div>
-      <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
-        选择优惠券
+    <div className="flex items-center gap-6">
+      <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+        选择优惠券：
       </Label>
       <Select>
-        <SelectTrigger className="h-12 rounded-xl">
+        <SelectTrigger className="h-10 rounded-xl border-gray-200 flex-1 max-w-xs">
           <SelectValue placeholder="请选择优惠券" />
         </SelectTrigger>
         <SelectContent>
           <SelectItem value="none">暂无可用优惠券</SelectItem>
         </SelectContent>
       </Select>
+      <span className="text-xs text-gray-400 whitespace-nowrap">
+        淘宝每次下单获得优惠券
+      </span>
     </div>
   )
 }
 
-// ============ 单个注册表单组件 ============
-function SingleRegisterForm({
-  account,
-  setAccount,
-  pwd,
-  setPwd,
-  connectCount,
-  setConnectCount,
-  payType,
-  setPayType,
-  isTest,
-  isDayCard,
-  isNormalPackage,
-  total,
-  submitting,
-  onBack,
-  onSubmit,
-}: {
-  product: Product
-  account: string
-  setAccount: (v: string) => void
-  pwd: string
-  setPwd: (v: string) => void
-  connectCount: number
-  setConnectCount: (v: number) => void
-  payType: string
-  setPayType: (v: string) => void
-  isTest: boolean
-  isDayCard: boolean
-  isNormalPackage: boolean
-  total: number
-  submitting: boolean
-  onBack: () => void
-  onSubmit: () => void
-}) {
+// ============ 批量注册说明 ============
+function BatchInfo() {
   return (
-    <div className="space-y-5">
-      {/* 天卡提示 */}
-      {isDayCard && (
-        <div className="text-sm text-orange-500 text-center font-medium bg-orange-50 py-2.5 rounded-xl border border-orange-100">
-          ⚠️ 天卡不支持退款，请谨慎购买
-        </div>
-      )}
-
-      <div className="flex">
-        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
-          IP产品账号
-        </Label>
-        <Input
-          value={account}
-          onChange={e => setAccount(e.target.value)}
-          placeholder="4-10位字母或数字"
-          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
-        />
-        <p className="text-xs text-gray-400 mt-1.5">4至10位字母或数字或组合</p>
-      </div>
-
-      {/* IP密码 */}
-      <div className="flex">
-        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
-          IP产品密码
-        </Label>
-        <Input
-          value={pwd}
-          onChange={e => setPwd(e.target.value)}
-          placeholder="1-10位字母或数字"
-          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
-        />
-        <p className="text-xs text-gray-400 mt-1.5">1至10位字母或数字或组合</p>
-      </div>
-
-      {isNormalPackage && (
-        <>
-          <ConnectCountSelector
-            value={connectCount}
-            onChange={setConnectCount}
-            label="连接设备数"
-            hint="一个账号可同时在线设备数"
-          />
-
-          <CouponSelector />
-
-          <BalanceDisplay balance={10.0} />
-
-          <PaymentMethodSelector value={payType} onChange={setPayType} />
-
-          <PriceSummary total={total} />
-        </>
-      )}
-
-      <FormActions
-        onBack={onBack}
-        onSubmit={onSubmit}
-        submitText={isTest ? "领取试用" : "确认支付"}
-        submitting={submitting}
-      />
-    </div>
-  )
-}
-
-// ============ 批量注册表单组件 ============
-function BatchRegisterForm({
-  batchAccount,
-  setBatchAccount,
-  batchStart,
-  setBatchStart,
-  batchCount,
-  setBatchCount,
-  batchPwd,
-  setBatchPwd,
-  batchConnectCount,
-  setBatchConnectCount,
-  batchPayType,
-  setBatchPayType,
-  batchPreview,
-  total,
-  submitting,
-  onBack,
-  onSubmit,
-}: {
-  batchAccount: string
-  setBatchAccount: (v: string) => void
-  batchStart: number
-  setBatchStart: (v: number) => void
-  batchCount: number
-  setBatchCount: (v: number) => void
-  batchPwd: string
-  setBatchPwd: (v: string) => void
-  batchConnectCount: number
-  setBatchConnectCount: (v: number) => void
-  batchPayType: string
-  setBatchPayType: (v: string) => void
-  batchPreview: string
-  total: number
-  submitting: boolean
-  onBack: () => void
-  onSubmit: () => void
-}) {
-  return (
-    <div className="space-y-5">
-      {/* 批量说明 */}
-      <div className="text-sm text-gray-600 leading-relaxed p-4 bg-blue-50/70 rounded-xl border border-blue-100">
+    <div className="flex items-start gap-6">
+      <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28 pt-1">
+        说明：
+      </Label>
+      <div className="flex-1 text-sm text-gray-600 leading-relaxed p-2 bg-blue-50/70 rounded-xl border border-blue-100">
         <p>
           批量注册的账号会使用【账号前缀】+【开始数】+【个数】顺序进行注册，
         </p>
@@ -476,199 +186,35 @@ function BatchRegisterForm({
           </span>
         </p>
       </div>
-
-      {/* IP账号前缀 */}
-      <div>
-        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
-          IP账号前缀
-        </Label>
-        <Input
-          value={batchAccount}
-          onChange={e => setBatchAccount(e.target.value)}
-          placeholder="3-8位字母或数字"
-          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
-        />
-        <p className="text-xs text-gray-400 mt-1.5">3至8位字母或数字或组合</p>
-      </div>
-
-      {/* 开始号 */}
-      <div>
-        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
-          开始号
-        </Label>
-        <Input
-          type="number"
-          value={batchStart}
-          onChange={e =>
-            setBatchStart(Number.parseInt(e.target.value, 10) || 1)
-          }
-          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
-        />
-        <p className="text-xs text-gray-400 mt-1.5">本批次账号的起始账号</p>
-      </div>
-
-      {/* 注册个数 */}
-      <div>
-        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
-          注册个数
-        </Label>
-        <Input
-          type="number"
-          value={batchCount}
-          onChange={e =>
-            setBatchCount(
-              Math.min(500, Number.parseInt(e.target.value, 10) || 1),
-            )
-          }
-          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
-        />
-        <p className="text-xs text-gray-400 mt-1.5">本批次的账号个数</p>
-      </div>
-
-      {/* 账号预览 */}
-      {batchPreview && (
-        <div className="text-sm text-gray-600 p-3.5 bg-gray-50/80 rounded-xl border border-gray-100">
-          即将生成的账号：
-          <span className="font-medium text-gray-800">{batchPreview}</span>
-        </div>
-      )}
-
-      {/* IP密码 */}
-      <div>
-        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
-          IP产品密码
-        </Label>
-        <Input
-          value={batchPwd}
-          onChange={e => setBatchPwd(e.target.value)}
-          placeholder="1-10位字母或数字"
-          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
-        />
-        <p className="text-xs text-gray-400 mt-1.5">1至10位字母或数字或组合</p>
-      </div>
-
-      <ConnectCountSelector
-        value={batchConnectCount}
-        onChange={setBatchConnectCount}
-        label="单账号连接设备数"
-        hint="每个账号可同时在线设备的数量"
-      />
-
-      <CouponSelector />
-
-      <BalanceDisplay balance={10.0} />
-
-      <PaymentMethodSelector value={batchPayType} onChange={setBatchPayType} />
-
-      <PriceSummary total={total} />
-
-      <FormActions
-        onBack={onBack}
-        onSubmit={onSubmit}
-        submitText="确认支付"
-        submitting={submitting}
-      />
     </div>
   )
 }
 
-// ============ 支付弹窗组件 ============
-function PaymentDialog({
-  payment,
-  onClose,
-}: {
-  payment: PaymentState | null
-  onClose: () => void
-}) {
-  if (!payment) return null
-
-  const isWechat = payment.orderData.OrderInfo.PayType === 70
-
-  return (
-    <Dialog open onOpenChange={onClose}>
-      <DialogContent className="max-w-md rounded-2xl">
-        <DialogHeader>
-          <DialogTitle className="text-center text-lg">
-            {isWechat ? "微信支付" : "支付宝支付"} ｜ 收银台
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-4 pt-2">
-          <div className="flex justify-center">
-            {isWechat ? (
-              <img
-                src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.orderData.PayData)}`}
-                alt="微信支付二维码"
-                className="w-50 h-50 rounded-xl"
-              />
-            ) : (
-              <div
-                // biome-ignore lint/security/noDangerouslySetInnerHtml: 支付宝表单由后端返回
-                dangerouslySetInnerHTML={{
-                  __html: payment.orderData.PayData,
-                }}
-              />
-            )}
-          </div>
-
-          <div className="border-t border-gray-100 pt-3 space-y-1.5 text-sm">
-            <div className="flex justify-between">
-              <span className="text-gray-500">收款方</span>
-              <span className="font-medium">聚IP</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-500">金额</span>
-              <span className="font-bold text-orange-500">
-                ¥{payment.orderData.OrderInfo.OtherPayAmount}
-              </span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-500">下单时间</span>
-              <span className="text-gray-600">
-                {payment.orderData.OrderInfo.CreateTime}
-              </span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-500">订单号</span>
-              <span className="text-xs text-gray-500">
-                {payment.orderData.OrderInfo.OrderNo}
-              </span>
-            </div>
-          </div>
-
-          <p className="text-xs text-center text-gray-400">
-            支付完成后将自动关闭此窗口
-          </p>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
+// ============ 主页面 ============
 export default function BuyPage() {
   const location = useLocation()
   const navigate = useNavigate()
   const product = location.state?.product as Product | undefined
 
-  // 状态
+  // 模式
   const [mode, setMode] = useState<"single" | "batch">("single")
+
+  // 单个注册
   const [account, setAccount] = useState("")
   const [pwd, setPwd] = useState("")
   const [connectCount, setConnectCount] = useState(1)
-  const [payType, setPayType] = useState("100")
-  const [submitting, setSubmitting] = useState(false)
-  const [payment, setPayment] = useState<PaymentState | null>(null)
-  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
+  // 批量注册
   const [batchAccount, setBatchAccount] = useState("")
+  const [batchPwd, setBatchPwd] = useState("")
   const [batchStart, setBatchStart] = useState(1)
   const [batchCount, setBatchCount] = useState(1)
-  const [batchPwd, setBatchPwd] = useState("")
   const [batchConnectCount, setBatchConnectCount] = useState(1)
-  const [batchPayType, setBatchPayType] = useState("100")
 
-  // 初始化
-  useEffect(() => {
+  const [payType, setPayType] = useState("100")
+  const [submitting, setSubmitting] = useState(false)
+
+  useState(() => {
     if (!product) {
       navigate("/product", { replace: true })
       return
@@ -677,64 +223,28 @@ export default function BuyPage() {
     const pw = randomDigits(3)
     setAccount(acct)
     setPwd(pw)
-    setConnectCount(1)
-    setPayType("100")
-    setMode("single")
-
     setBatchAccount(randomChars(3))
-    setBatchStart(1)
-    setBatchCount(1)
     setBatchPwd(pw)
-    setBatchConnectCount(1)
-    setBatchPayType("100")
-  }, [product, navigate])
-
-  // 清理轮询
-  useEffect(() => {
-    return () => {
-      if (pollRef.current) clearInterval(pollRef.current)
-    }
-  }, [])
-
-  const stopPolling = useCallback(() => {
-    if (pollRef.current) {
-      clearInterval(pollRef.current)
-      pollRef.current = null
-    }
-  }, [])
-
-  const startPolling = useCallback(
-    (orderNo: string) => {
-      stopPolling()
-      pollRef.current = setInterval(async () => {
-        const result = await checkPayStatus(orderNo)
-        if (result.success && result.data === 1) {
-          stopPolling()
-          setPayment(null)
-          toast.success("支付成功！")
-        }
-      }, 3000)
-    },
-    [stopPolling],
-  )
+  })
 
   if (!product) return null
 
-  // 计算属性
-  const price = product.price
   const packageId = Number(product.id)
   const isTest = product.isTest ?? false
   const isDayCard = product.card === "天"
-  const showTabs = !isTest && !isDayCard
   const isNormalPackage = !isTest && !isDayCard
 
-  const singleTotal = price * connectCount
-  const batchTotal = price * batchConnectCount * batchCount
+  // 天卡固定连接数为1
+  const displayConnectCount = isDayCard ? 1 : connectCount
+  const singleTotal = product.price * displayConnectCount
+  const batchTotal = product.price * batchConnectCount * batchCount
+  const total = mode === "single" ? singleTotal : batchTotal
 
+  // 批量预览
   const batchPreview = (() => {
     if (!batchAccount) return ""
     const end = batchStart + batchCount - 1
-    if (batchCount <= 3) {
+    if (batchCount <= 4) {
       const items: string[] = []
       for (let i = batchStart; i <= end; i++) {
         items.push(`${batchAccount}${i}`)
@@ -744,39 +254,51 @@ export default function BuyPage() {
     return `${batchAccount}${batchStart}, ${batchAccount}${batchStart + 1}, ${batchAccount}${batchStart + 2}...${batchAccount}${end}`
   })()
 
-  // 支付处理函数
-  const handleSinglePay = async () => {
-    if (!account.trim() || !pwd.trim()) {
-      toast.error("账号和密码不能为空")
-      return
+  const handlePay = async () => {
+    if (mode === "single") {
+      if (!account.trim() || !pwd.trim()) {
+        toast.error("账号和密码不能为空")
+        return
+      }
+    } else {
+      if (!batchAccount.trim() || !batchPwd.trim()) {
+        toast.error("账号前缀和密码不能为空")
+        return
+      }
+      if (batchCount > 500) {
+        toast.error("一次最多注册500个")
+        return
+      }
     }
+
     setSubmitting(true)
     try {
-      const oPayType = isTest ? 0 : Number(payType)
+      const oPayType = Number(payType)
       const useBalance = oPayType === 1 ? 1 : 0
       const payChannel = oPayType === 70 ? 30 : 50
 
-      const result = await createOrder({
+      const params = {
         PackageId: packageId,
-        OrderType: 1,
-        Account: account.trim(),
-        Pwd: pwd.trim(),
-        ConnectCount: connectCount,
+        OrderType: mode === "single" ? 1 : 2,
+        Account: mode === "single" ? account.trim() : batchAccount.trim(),
+        Pwd: mode === "single" ? pwd.trim() : batchPwd.trim(),
+        ConnectCount:
+          mode === "single" ? displayConnectCount : batchConnectCount,
         CouponId: 0,
         UseAccountAmount: useBalance,
         OPayType: oPayType,
         PayChannel: payChannel,
-        Price: price,
-      })
+        Price: product.price,
+        ...(mode === "batch" && {
+          MinPostfix: batchStart,
+          MaxPostfix: batchCount,
+        }),
+      }
+
+      const result = await createOrder(params as any)
 
       if (result.success) {
-        if (result.data === "00") {
-          toast.success("购买成功！")
-        } else {
-          const orderData = result.data as CreateOrderData
-          setPayment({ orderData, polling: true })
-          startPolling(orderData.OrderInfo.OrderNo)
-        }
+        toast.success("购买成功！")
       } else {
         toast.error(result.message)
       }
@@ -787,149 +309,278 @@ export default function BuyPage() {
     }
   }
 
-  const handleBatchPay = async () => {
-    if (!batchAccount.trim() || !batchPwd.trim()) {
-      toast.error("账号前缀和密码不能为空")
-      return
-    }
-    if (batchCount > 500) {
-      toast.error("一次最多注册500个")
-      return
-    }
-    setSubmitting(true)
-    try {
-      const oPayType = Number(batchPayType)
-      const useBalance = oPayType === 1 ? 1 : 0
-      const payChannel = oPayType === 70 ? 30 : 50
-
-      const result = await createOrder({
-        PackageId: packageId,
-        OrderType: 2,
-        Account: batchAccount.trim(),
-        Pwd: batchPwd.trim(),
-        ConnectCount: batchConnectCount,
-        MinPostfix: batchStart,
-        MaxPostfix: batchCount,
-        CouponId: 0,
-        UseAccountAmount: useBalance,
-        OPayType: oPayType,
-        PayChannel: payChannel,
-        Price: price,
-      })
-
-      if (result.success) {
-        if (result.data === "00") {
-          toast.success("购买成功！")
-        } else {
-          const orderData = result.data as CreateOrderData
-          setPayment({ orderData, polling: true })
-          startPolling(orderData.OrderInfo.OrderNo)
-        }
-      } else {
-        toast.error(result.message)
-      }
-    } catch {
-      toast.error("网络错误，请重试")
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  const handleTestClaim = async () => {
-    if (!account.trim() || !pwd.trim()) {
-      toast.error("账号和密码不能为空")
-      return
-    }
-    setSubmitting(true)
-    try {
-      const result = await createTestAccount({
-        ProductId: product.productId,
-        PackageId: packageId,
-        Account: account.trim(),
-        Pwd: pwd.trim(),
-      })
-      if (result.success) {
-        toast.success("领取成功")
-        navigate(-1)
-      } else {
-        toast.error(result.message)
-      }
-    } catch {
-      toast.error("网络错误，请重试")
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  const handleClosePayment = () => {
-    stopPolling()
-    setPayment(null)
-  }
-
   const handleBack = () => navigate(-1)
 
-  // 判断单个表单的提交处理
-  const handleSingleSubmit = isTest ? handleTestClaim : handleSinglePay
+  // 判断是否显示Tab（普通产品才显示）
+  const showTabs = isNormalPackage
 
   return (
-    <Wrap className="bg-white min-h-screen">
-      <div className="text-center mt-20">
-        <h4 className="text-2xl font-bold text-gray-800">{product.title}</h4>
-        <p className="text-sm text-amber-600 mb-6">
-          请务必选好所需物品，换货会产生费用
-        </p>
+    <Wrap className="bg-white min-h-screen flex items-start justify-center pt-16">
+      <div className="w-full max-w-2xl px-8">
+        {/* 标题 */}
+        <div className="text-center mb-6 space-y-2">
+          <h4 className="text-2xl font-bold">
+            <span className="text-gray-800">{product.title}</span>
+            <span className="text-orange-500 ml-2">¥{total.toFixed(2)}</span>
+          </h4>
+          <p className="text-sm text-amber-600">
+            请务必选好所需物品，换货会产生费用
+          </p>
+        </div>
+
+        {/* Tab 切换 */}
+        {showTabs && (
+          <div className="flex justify-center mb-3">
+            <ModeTabs mode={mode} onModeChange={setMode} />
+          </div>
+        )}
+
+        <div className="space-y-5 mb-20">
+          {mode === "single" ? (
+            // ====== 单个注册 ======
+            <>
+              {/* IP产品账号 */}
+              <div className="flex items-center gap-6">
+                <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+                  IP产品账号：
+                </Label>
+                <Input
+                  value={account}
+                  onChange={e => setAccount(e.target.value)}
+                  placeholder="4-10位字母或数字"
+                  className="h-10 rounded-xl border-gray-200 flex-1"
+                />
+                <span className="text-xs text-gray-400 whitespace-nowrap">
+                  4至10位字母或数字或组合
+                </span>
+              </div>
+
+              {/* IP产品密码 */}
+              <div className="flex items-center gap-6">
+                <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+                  IP产品密码：
+                </Label>
+                <Input
+                  value={pwd}
+                  onChange={e => setPwd(e.target.value)}
+                  placeholder="1-10位字母或数字"
+                  className="h-10 rounded-xl border-gray-200 flex-1"
+                />
+                <span className="text-xs text-gray-400 whitespace-nowrap">
+                  1至10位字母或数字或组合
+                </span>
+              </div>
+
+              {/* 连接设备数：测试卡不显示，天卡显示但禁用 */}
+              {!isTest && (
+                <ConnectCountSelector
+                  value={displayConnectCount}
+                  onChange={setConnectCount}
+                  label="连接设备数"
+                  hint="一个账号可同时在线设备数"
+                  disabled={isDayCard}
+                />
+              )}
+            </>
+          ) : (
+            // ====== 批量注册 ======
+            <>
+              {/* 批量说明 */}
+              <BatchInfo />
+
+              {/* IP账号前缀 */}
+              <div className="flex items-center gap-6">
+                <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+                  IP账号前缀：
+                </Label>
+                <Input
+                  value={batchAccount}
+                  onChange={e => setBatchAccount(e.target.value)}
+                  placeholder="3-8位字母或数字"
+                  className="h-10 rounded-xl border-gray-200 flex-1"
+                />
+                <span className="text-xs text-gray-400 whitespace-nowrap">
+                  3至8位字母或数字或组合
+                </span>
+              </div>
+
+              {/* 开始号 */}
+              <div className="flex items-center gap-6">
+                <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+                  开始号：
+                </Label>
+                <Input
+                  type="number"
+                  value={batchStart}
+                  onChange={e =>
+                    setBatchStart(Number.parseInt(e.target.value, 10) || 1)
+                  }
+                  className="h-10 rounded-xl border-gray-200 flex-1 max-w-32"
+                />
+                <span className="text-xs text-gray-400">
+                  本批次账号的起始账号
+                </span>
+              </div>
+
+              {/* 注册个数 */}
+              <div className="flex items-center gap-6">
+                <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+                  注册个数：
+                </Label>
+                <Input
+                  type="number"
+                  value={batchCount}
+                  onChange={e =>
+                    setBatchCount(
+                      Math.min(500, Number.parseInt(e.target.value, 10) || 1),
+                    )
+                  }
+                  className="h-10 rounded-xl border-gray-200 flex-1 max-w-32"
+                />
+              </div>
+
+              {/* 账号预览 */}
+              {batchPreview && (
+                <div className="flex items-center gap-6">
+                  <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+                    即将生成的账号：
+                  </Label>
+                  <span className="text-sm text-gray-700 font-medium">
+                    {batchPreview}
+                  </span>
+                </div>
+              )}
+
+              {/* IP产品密码 */}
+              <div className="flex items-center gap-6">
+                <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+                  IP产品密码：
+                </Label>
+                <Input
+                  value={batchPwd}
+                  onChange={e => setBatchPwd(e.target.value)}
+                  placeholder="1-10位字母或数字"
+                  className="h-10 rounded-xl border-gray-200 flex-1"
+                />
+                <span className="text-xs text-gray-400 whitespace-nowrap">
+                  1至10位字母或数字或组合
+                </span>
+              </div>
+
+              {/* 单账号连接设备数 */}
+              <ConnectCountSelector
+                value={batchConnectCount}
+                onChange={setBatchConnectCount}
+                label="单账号连接设备数"
+                hint="每个账号可同时在线设备的数量"
+              />
+            </>
+          )}
+
+          {/* 优惠券 */}
+          {!isTest && <CouponSelector />}
+
+          {/* 余额 */}
+          <div className="flex items-center gap-6">
+            <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+              余额：
+            </Label>
+            <div className="flex items-center gap-2 flex-1">
+              <span className="text-sm text-gray-600">
+                当前账户余额
+                <span className="font-bold text-orange-500 ml-1">¥10.00</span>
+              </span>
+              <Button
+                variant="link"
+                className="text-sm text-blue-500 p-0 h-auto font-medium"
+                onClick={() => navigate("/admin")}
+              >
+                去充值
+              </Button>
+            </div>
+          </div>
+
+          {/* 支付方式 */}
+          <div className="flex items-center gap-6">
+            <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+              支付方式：
+            </Label>
+            <RadioGroup
+              value={payType}
+              onValueChange={setPayType}
+              className="flex gap-8"
+            >
+              <div className="flex items-center gap-2">
+                <RadioGroupItem value="100" id="alipay" />
+                <Label
+                  htmlFor="alipay"
+                  className="cursor-pointer text-sm text-gray-700 flex items-center gap-1.5"
+                >
+                  <img src={alipay} alt="支付宝" className="w-5 h-5" />
+                  支付宝
+                </Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <RadioGroupItem value="70" id="wechat" />
+                <Label
+                  htmlFor="wechat"
+                  className="cursor-pointer text-sm text-gray-700 flex items-center gap-1.5"
+                >
+                  <img src={wechat} alt="微信" className="w-5 h-5" />
+                  微信
+                </Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <RadioGroupItem value="1" id="balance" />
+                <Label
+                  htmlFor="balance"
+                  className="cursor-pointer text-sm text-gray-700 flex items-center gap-1.5"
+                >
+                  <img src={balance} alt="余额" className="w-5 h-5" />
+                  余额
+                </Label>
+              </div>
+            </RadioGroup>
+          </div>
+
+          {/* 总金额 / 应付款 */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-6">
+              <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+                总金额：
+              </Label>
+              <span className="font-medium text-gray-800">
+                ¥{total.toFixed(2)}
+              </span>
+            </div>
+            <div className="flex items-center gap-6">
+              <Label className="text-sm font-medium text-gray-700 whitespace-nowrap w-28">
+                应付款：
+              </Label>
+              <span className="text-xl font-bold text-orange-500">
+                ¥{total.toFixed(2)}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex gap-4">
+            <Button
+              variant="outline"
+              className="flex-1 h-12 rounded-xl text-base border-gray-200 hover:bg-gray-50"
+              onClick={handleBack}
+            >
+              上一步
+            </Button>
+            <Button
+              className="flex-1 h-12 rounded-xl text-base bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 transition-all"
+              onClick={handlePay}
+              disabled={submitting}
+            >
+              {submitting ? "提交中..." : "确认支付"}
+            </Button>
+          </div>
+        </div>
       </div>
-
-      {/* 价格卡片 */}
-      <PriceCard product={product} isTest={isTest} />
-
-      {/* Tab 切换 */}
-      {showTabs && <ModeTabs mode={mode} onModeChange={setMode} />}
-
-      {/* 表单内容 */}
-      {!showTabs || mode === "single" ? (
-        <SingleRegisterForm
-          product={product}
-          account={account}
-          setAccount={setAccount}
-          pwd={pwd}
-          setPwd={setPwd}
-          connectCount={connectCount}
-          setConnectCount={setConnectCount}
-          payType={payType}
-          setPayType={setPayType}
-          isTest={isTest}
-          isDayCard={isDayCard}
-          isNormalPackage={isNormalPackage}
-          total={singleTotal}
-          submitting={submitting}
-          onBack={handleBack}
-          onSubmit={handleSingleSubmit}
-        />
-      ) : (
-        <BatchRegisterForm
-          batchAccount={batchAccount}
-          setBatchAccount={setBatchAccount}
-          batchStart={batchStart}
-          setBatchStart={setBatchStart}
-          batchCount={batchCount}
-          setBatchCount={setBatchCount}
-          batchPwd={batchPwd}
-          setBatchPwd={setBatchPwd}
-          batchConnectCount={batchConnectCount}
-          setBatchConnectCount={setBatchConnectCount}
-          batchPayType={batchPayType}
-          setBatchPayType={setBatchPayType}
-          batchPreview={batchPreview}
-          total={batchTotal}
-          submitting={submitting}
-          onBack={handleBack}
-          onSubmit={handleBatchPay}
-        />
-      )}
-
-      {/* 支付弹窗 */}
-      <PaymentDialog payment={payment} onClose={handleClosePayment} />
     </Wrap>
   )
 }
diff --git a/src/home/softDownload/index.tsx b/src/home/softDownload/index.tsx
index 62ddc8a..289f245 100644
--- a/src/home/softDownload/index.tsx
+++ b/src/home/softDownload/index.tsx
@@ -23,7 +23,7 @@ export default function SoftDownloadPage() {
   )
 
   return (
-    <Wrap className="flex flex-col gap-6 mt-30 bg-white">
+    <Wrap className="flex flex-col gap-6 mt-20 bg-white">
       <div className="grid grid-cols-3">
         <div></div>
         <h3 className="text-3xl font-bold text-gray-800 text-center">