修复登录注册验证码bug

更新登录功能
完善购买产品二级路由页面
2026-08-14 16:30:41 +08:00 · 2026-08-13 18:28:20 +08:00 · 2026-08-12 13:49:04 +08:00
34 changed files with 3803 additions and 1204 deletions
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
-VITE_API_BASE_URL=http://192.168.3.42:8080
+VITE_API_BASE_URL=
 VITE_CLIENT_ID=web
 VITE_CLIENT_SECRET=web
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,158 @@
+# juip-web - AI 开发助手指南
+
+## 项目概述
+
+Vite + React 19 纯 SPA 代理服务站点，包含公开营销页与用户管理后台。使用 Bun 运行时、react-router-dom 7 路由、Tailwind CSS 4、shadcn/ui (radix-nova 风格)、sonner 提示、biome 代码规范。
+
+**核心业务**: IP 代理产品展示与购买、订单支付、短信验证码注册登录、后台资源/通道/白名单管理
+
+## 架构模式
+
+### 三层数据流架构
+
+1. **API 层** (`src/api/*.ts`) - 所有后端调用统一入口
+   - 每个文件对应一个业务域 (auth, order, product, verify, captcha)
+   - 通过 `base.ts` 的三种调用模式访问后端:
+     - `callPublic()` - 无需认证的公开接口
+     - `callByDevice()` - 使用 CLIENT_ID/CLIENT_SECRET 的设备级认证
+     - `callByUser()` - 使用用户会话 token 的用户级认证
+   - 所有调用返回统一的 `ApiResponse<T>` 类型
+   - 后端存在两套响应约定，`base.ts` 自动识别:
+     - 裸 JSON (OAuth2 接口、`/script/linedata/*.php` 等) - 原样返回
+     - 会员接口信封 `{Code, Message, Data}` - 顶层有 `Code` 字段时自动解包: `Code === 10000` 成功返回 `Data`/`data`，否则转 `success: false` + `Message`
+
+2. **会话状态** (`src/api/token.ts`) - 令牌存取唯一入口
+   - 登录后 token/userInfo 由后端 Set-Cookie 下发，经 `apiLogin` 镜像到 localStorage
+   - `setSession()` / `clearSession()` 统一派发 `auth-change` 事件驱动 UI 重渲染
+   - UI 组件 (header/authGuard) 通过 `isAuthed()` 读取登录态，禁止直接读 localStorage
+   - 401 时 user 模式自动 `clearSession()`，device 模式自动清缓存重取设备令牌
+
+3. **UI 层** - 业务域 API 函数供组件直接调用
+   - 公开页组件位于 `src/home/*`，后台位于 `src/admin/*`
+   - `/admin` 路由由 `AuthGuard` 保护，未登录重定向 `/login?redirect=`
+
+### API 层使用示例
+
+```typescript
+// 业务域文件: src/api/xxx.ts
+import type { ApiResponse } from "@/lib/api"
+import { callByUser, callPublic } from "./base"
+
+// 1. 公开接口 (GET 自动并发去重)
+const resp = await callPublic<{ token: string; base64: string }>(
+  "/api/captcha/get",
+  undefined,
+  "GET",
+)
+
+// 2. 设备级认证 (client_credentials 令牌模块内单飞缓存，提前 60s 过期)
+const resp2 = await callByDevice<{ access_token: string }>(
+  "/api/auth/token",
+  { grant_type: "client_credentials" },
+)
+
+// 3. 用户级认证 (读取会话 token，401 自动清会话)
+const resp3 = await callByUser<CreateOrderData>("/product/CreateOrder", data)
+const resp4 = await callByUser<number>(
+  `/product/IsPay?orderNo=${orderNo}`,
+  undefined,
+  "GET",
+)
+
+// 4. Code 信封接口 (顶层有 Code 字段自动解包，Code === 10000 成功)
+const resp5 = await callPublic("/user/ApiLogin", {
+  Logincode: "xxx",
+  Password: "xxx",
+})
+const resp6 = await callPublic<ProductItem[]>(
+  "/product/ApiProductActive",
+  undefined,
+  "GET",
+)
+
+// 5. 统一响应处理
+if (resp.success) {
+  console.log(resp.data) // 强类型 T
+} else {
+  console.error(resp.status, resp.message)
+}
+```
+
+### 组件调用示例
+
+```typescript
+import { fetchProducts } from "@/api/product"
+import { toast } from "sonner"
+
+const result = await fetchProducts()
+if (result.success) {
+  setProducts(result.data)
+} else {
+  toast.error(result.message)
+}
+```
+
+## 路由组织
+
+- `/` - 公开站点 (LayoutPage 统一头部/底部): 首页、`/product`(+`/buy`/`/http`/`/routeros`)、`/ipline`、`/softdownload`、`/help`、`/client`
+- `/login` - 登录/注册 (tab 状态经 `location.state.tab` 切换)
+- `/admin` - 用户后台 (AuthGuard 保护): dashboard、channels、whitelist、funds、product/long、product/short
+
+路由定义集中在 `src/routers/index.tsx`。
+
+## 开发工作流
+
+### 命令速查
+
+```bash
+bun install               # 安装依赖
+bun dev                   # 开发服务器 (vite --host)
+bun run build             # 生产构建 (tsc -b && vite build)
+bun run lint              # biome 检查并自动修复
+```
+
+### 代码规范 (biome)
+
+- 无分号、双引号、2 空格缩进、单参数箭头函数省略括号
+- import 自动排序 (organizeImports)
+- `noNonNullAssertion` 为 error，禁用 `!` 断言
+- 提交前运行 `bun run lint`
+
+### 组件开发模式
+
+**shadcn/ui 组件** (`src/components/ui/*.tsx`)
+- 通过 CLI 添加: `bunx shadcn@latest add <component>`
+- 类名合并使用 `cn()` (来自 `@/lib/utils`)
+
+**业务组件**
+- `src/components/composites/*` - 复杂对话框等
+- `src/components/*` - 通用组件 (wrap 布局容器、authGuard 路由守卫、data-table、page)
+
+**表单**: react-hook-form + zod 校验
+
+**提示**: 统一使用 sonner (`toast.success / toast.error`)
+
+## 项目特定约定
+
+### 类型定义
+
+- 后端响应统一为 `ApiResponse<T>` (定义于 `src/lib/api.ts`):
+  - 成功: `{success: true, data: T}`
+  - 失败: `{success: false, status?: number, message: string}`
+- 请求/响应业务类型定义在对应业务域 API 文件中 (如 `src/api/order.ts` 的 `CreateOrderRequest`)
+- UI 展示模型位于 `src/lib/models/*`
+
+### 环境变量 (见 `.env`)
+
+- `VITE_API_BASE_URL` - 后端地址 (留空表示同源，登录 Cookie 自动携带)
+- `VITE_CLIENT_ID` / `VITE_CLIENT_SECRET` - OAuth2 设备认证凭据 (当前均为 `web`)
+
+## 关键文件参考
+
+- [src/api/base.ts](src/api/base.ts) - API 调用核心 (三模式 + Code 信封适配 + GET 去重 + 设备令牌缓存)
+- [src/api/token.ts](src/api/token.ts) - 会话状态存取与 auth-change 事件
+- [src/api/auth.ts](src/api/auth.ts) - 登录/注册/退出业务域
+- [src/lib/api.ts](src/lib/api.ts) - ApiResponse 类型与后端配置
+- [src/routers/index.tsx](src/routers/index.tsx) - 全部路由定义
+- [src/components/authGuard.tsx](src/components/authGuard.tsx) - 后台路由守卫
+- [src/home/header.tsx](src/home/header.tsx) - 登录态响应式更新 (auth-change/focus 事件)
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,14 @@
 import { RouterProvider } from "react-router-dom"
+import { Toaster } from "@/components/ui/sonner"
 import { router } from "./routers"

 function App() {
-  return <RouterProvider router={router} />
+  return (
+    <>
+      <RouterProvider router={router} />
+      <Toaster position="top-center" richColors expand />
+    </>
+  )
 }

 export default App
--- a/src/admin/clients.tsx
+++ b/src/admin/clients.tsx
@@ -17,6 +17,7 @@ import {
 } from "lucide-react"
 import { type ReactNode, useState } from "react"
 import { Link } from "react-router-dom"
+import ProfileOrLogin from "@/components/profileOrLogin"
 import { Button } from "@/components/ui/button"
 import {
  Tooltip,
@@ -100,22 +101,12 @@ export function Header() {
      <AdminNavMenu />

      <div className="flex-none flex items-center justify-end pr-4 max-md:hidden gap-3">
-        {/* <Link
-          to="/"
-          className="flex-none h-16 flex items-center justify-center text-sm"
-        >
-          返回首页
-        </Link> */}
-        <UserCenter />
+        <ProfileOrLogin />
      </div>
    </header>
  )
 }

-function UserCenter() {
-  return <div className="flex items-center gap-2">用户</div>
-}
-
 export function Navbar() {
  const { navbar } = useLayout()

--- a/src/admin/nav-menu.tsx
+++ b/src/admin/nav-menu.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useRef, useState } from "react"
 import { createPortal } from "react-dom"
-import { NavLink, useNavigate } from "react-router-dom"
+import { NavLink } from "react-router-dom"
+import ProductDropdown from "@/components/productDropdown"
 import { cn } from "@/lib/utils"

 export function AdminNavMenu() {
@@ -8,7 +9,7 @@ export function AdminNavMenu() {
    <nav className="flex-auto flex items-center justify-center gap-1 max-lg:hidden">
      <AdminNavItem to="/">首页</AdminNavItem>
      <AdminMenuItem text="产品购买">
-        <ProductDropdown />
+        <ProductDropdown size="sm" />
      </AdminMenuItem>
      <AdminNavItem to="/ipline">IP线路表</AdminNavItem>
      <AdminNavItem to="/softdownload">软件下载</AdminNavItem>
@@ -116,7 +117,7 @@ function AdminMenuItem({
          role="button"
          tabIndex={-1}
          className={cn(
-            "fixed transition-all duration-200 z-[9999]",
+            "fixed transition-all duration-200 z-9999",
            isOpen
              ? "opacity-100 visible translate-y-0"
              : "opacity-0 invisible -translate-y-2 pointer-events-none",
@@ -129,7 +130,7 @@ function AdminMenuItem({
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
-          <div className="bg-white rounded-xl shadow-2xl border border-gray-100/80 p-4 w-[560px]">
+          <div className="bg-white rounded-xl shadow-2xl border border-gray-100/80 p-4 w-140">
            {children}
          </div>
        </div>,
@@ -138,115 +139,3 @@ function AdminMenuItem({
    </div>
  )
 }
-
-function ProductDropdown() {
-  const navigate = useNavigate()
-
-  const handleClick = (path: string) => {
-    navigate(path)
-  }
-
-  return (
-    <div className="space-y-3">
-      <div className="grid grid-cols-3 gap-3">
-        <ProductCard
-          title="动静态IP"
-          desc="千万级动态短效IP，自动去重，高并发采集"
-          tag="热门"
-          onClick={() => handleClick("/product?tab=short")}
-        />
-        <ProductCard
-          title="新HTTP/S5"
-          desc="IP可用时长从数小时到365天全覆盖"
-          tag="稳定"
-          onClick={() => handleClick("/product?tab=long")}
-        />
-        <ProductCard
-          title="HTTP/S5"
-          desc="海量全球住宅优质IP，4G/5G真实手机IP"
-          tag="全球"
-          onClick={() => handleClick("/product?tab=global")}
-        />
-        <ProductCard
-          title="软路由成本价"
-          desc="云端自动切换IP，更易于调用与开发"
-          onClick={() => handleClick("/product?tab=tunnel")}
-        />
-        <ProductCard
-          title="动态Vps"
-          desc="IP独享，高带宽，灵活控制存活周期"
-          onClick={() => handleClick("/product?tab=exclusive")}
-        />
-        <ProductCard
-          title="静态独享IP"
-          desc="纯净IP，更符合跨境卖家需求的云主机"
-          onClick={() => handleClick("/product?tab=static")}
-        />
-      </div>
-
-      <div className="flex items-center flex-wrap gap-2 pt-2 border-t border-gray-100">
-        <span className="text-xs font-medium text-gray-400">热门推荐:</span>
-        <button
-          onClick={() => handleClick("/product?tab=short")}
-          className="text-xs text-blue-600 hover:underline whitespace-nowrap"
-        >
-          短效代理
-        </button>
-        <button
-          onClick={() => handleClick("/product?tab=global")}
-          className="text-xs text-blue-600 hover:underline whitespace-nowrap"
-        >
-          海外代理
-        </button>
-        <button
-          onClick={() => handleClick("/product?tab=tunnel")}
-          className="text-xs text-blue-600 hover:underline whitespace-nowrap"
-        >
-          隧道代理
-        </button>
-        <span className="text-xs text-gray-300">|</span>
-        <button
-          onClick={() => handleClick("/product")}
-          className="text-xs text-orange-500 hover:underline font-medium whitespace-nowrap"
-        >
-          业务定制 →
-        </button>
-      </div>
-    </div>
-  )
-}
-
-function ProductCard({
-  title,
-  desc,
-  tag,
-  onClick,
-}: {
-  title: string
-  desc: string
-  tag?: string
-  onClick: () => void
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className="group flex items-start gap-2 p-2 rounded-lg hover:bg-gray-50 transition-all cursor-pointer border border-transparent hover:border-blue-200 text-left w-full"
-    >
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-1.5 flex-wrap">
-          <span className="font-medium text-gray-800 group-hover:text-blue-600 transition-colors text-xs whitespace-nowrap">
-            {title}
-          </span>
-          {tag && (
-            <span className="text-[10px] bg-blue-100 text-blue-600 px-1.5 py-0.5 rounded-full shrink-0">
-              {tag}
-            </span>
-          )}
-        </div>
-        <p className="text-[11px] text-gray-500 mt-0.5 leading-relaxed line-clamp-2">
-          {desc}
-        </p>
-      </div>
-    </button>
-  )
-}
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -1,103 +1,72 @@
-import type { ApiResponse } from "@/lib/api"
-import { callByDevice, callByUser } from "./base"
+import { callPublic } from "./base"
+import { clearCookie, clearSession, readCookie, setSession } from "./token"

-export interface User {
-  id: number
-  username: string
-  loginCode: string
-  phone: string
-  name: string
-  wx: string
-  qq: string
-  taobao: string
-  email: string
-  restAmount: number
+function parseUserInfo(raw: string | null): unknown {
+  if (!raw) return null
+  let decoded = raw
+  try {
+    decoded = decodeURIComponent(raw)
+  } catch {
+    decoded = raw
+  }
+  try {
+    return JSON.parse(decoded)
+  } catch {
+    return decoded
+  }
 }

-export type LoginMode = "phone_code" | "password"
-
-export async function login(props: {
-  username: string
+export async function apiLogin(props: {
+  logincode: string
  password: string
-  remember: boolean
-  mode: LoginMode
-  code?: string
-  wx?: string
-  qq?: string
-}): Promise<ApiResponse> {
-  const result = await callByDevice<{
-    access_token: string
-    refresh_token: string
-    expires_in: number
-  }>("/api/auth/token", {
-    ...props,
-    grant_type: "password",
-    login_type: props.mode,
+}): Promise<{ success: boolean; message?: string }> {
+  const result = await callPublic<unknown>("/user/ApiLogin", {
+    Logincode: props.logincode,
+    Password: props.password,
  })

-  if (!result.success) return result
+  if (!result.success) {
+    return { success: false, message: result.message || "用户名或者密码不正确" }
+  }

-  const { access_token, refresh_token, expires_in } = result.data
-  localStorage.setItem("auth_token", access_token)
-  localStorage.setItem("auth_refresh", refresh_token)
-  localStorage.setItem(
-    "auth_expires_in",
-    String(Date.now() + expires_in * 1000),
-  )
+  // 通过响应头下发，优先读响应头，cookie 兜底
+  const token = result.headers?.token ?? readCookie("token")
+  const userInfoRaw = result.headers?.userinfo ?? readCookie("userInfo")

-  return { success: true, data: undefined }
+  if (!token) {
+    return { success: false, message: "登录成功但未获取到 token" }
+  }
+
+  setSession(token, parseUserInfo(userInfoRaw))
+
+  return { success: true }
+}
+
+export async function apiRegister(props: {
+  phone: string
+  password: string
+  code: string
+  wx?: string
+  qq?: string
+}): Promise<{ success: boolean; message?: string }> {
+  const result = await callPublic("/user/ApiRegist", {
+    Code: props.code,
+    Phone: props.phone,
+    Pwd: props.password,
+    QQ: props.qq ?? "",
+    Wx: props.wx ?? "",
+  })
+
+  if (!result.success) {
+    return { success: false, message: result.message }
+  }
+
+  return { success: true }
 }

 export async function logout() {
-  const accessToken = localStorage.getItem("auth_token")
-  const refreshToken = localStorage.getItem("auth_refresh")
-
-  if (accessToken && refreshToken) {
-    await callByUser("/api/auth/revoke", {
-      access_token: accessToken,
-      refresh_token: refreshToken,
-    })
-  }
-
-  localStorage.removeItem("auth_token")
-  localStorage.removeItem("auth_refresh")
-  localStorage.removeItem("auth_expires_in")
-
+  clearSession()
+  clearCookie("token")
+  clearCookie("userInfo")
  window.location.href = "/"
 }
-
-export async function getProfile() {
-  return await callByUser<User>("/api/auth/introspect")
-}
-
-export async function refreshAuth(): Promise<{
-  access_token: string
-  refresh_token: string
-} | null> {
-  const refreshToken = localStorage.getItem("auth_refresh")
-  if (!refreshToken) return null
-
-  const resp = await callByDevice<{
-    access_token: string
-    refresh_token: string
-    expires_in: number
-  }>(`/api/auth/token`, {
-    grant_type: "refresh_token",
-    refresh_token: refreshToken,
-  })
-
-  if (!resp.success) {
-    localStorage.removeItem("auth_refresh")
-    return null
-  }
-
-  const { access_token, refresh_token, expires_in } = resp.data
-  localStorage.setItem("auth_token", access_token)
-  localStorage.setItem("auth_refresh", refresh_token)
-  localStorage.setItem(
-    "auth_expires_in",
-    String(Date.now() + expires_in * 1000),
-  )
-
-  return { access_token, refresh_token }
-}
--- a/src/api/base.ts
+++ b/src/api/base.ts
@@ -3,53 +3,51 @@ import {
  type ApiResponse,
  CLIENT_ID,
  CLIENT_SECRET,
-  UnauthorizedError,
 } from "@/lib/api"
+import { clearSession, getUserToken } from "./token"

-let deviceToken: string | null = null
-let deviceTokenExpire: Date | null = null
+type CallMode = "public" | "device" | "user"

-async function call<T = undefined>(
+const DEFAULT_TIMEOUT = 15_000
+
+function captureHeaders(response: Response): Record<string, string> {
+  const headers: Record<string, string> = {}
+  response.headers.forEach((value, key) => {
+    headers[key.toLowerCase()] = value
+  })
+  return headers
+}
+
+async function request<R = undefined>(
  endpoint: string,
-  body?: string,
-  auth?: string,
-): Promise<ApiResponse<T>> {
+  init: {
+    method: "GET" | "POST"
+    body?: string
+    auth?: string
+    timeout?: number
+  },
+): Promise<ApiResponse<R>> {
+  const controller = new AbortController()
+  const timer = setTimeout(
+    () => controller.abort(),
+    init.timeout ?? DEFAULT_TIMEOUT,
+  )
+
  try {
-    const headers: HeadersInit = {
-      "Content-Type": "application/json",
+    const headers: HeadersInit = {}
+    if (init.body !== undefined) {
+      headers["Content-Type"] = "application/json"
    }
-    if (auth) headers["Authorization"] = auth
+    if (init.auth) headers.Authorization = init.auth

    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
-      method: "POST",
+      method: init.method,
      headers,
-      body,
+      body: init.body,
+      signal: controller.signal,
    })

-    if (response.status === 401) {
-      // 如果是 刷新Token 的接口本身报 401，说明 RefreshToken 彻底失效，直接抛出错误
-      if (
-        endpoint.includes("/auth/token") ||
-        endpoint.includes("/auth/revoke")
-      ) {
-        throw UnauthorizedError
-      }
-
-      // 动态引入 auth.ts 里的刷新函数，避免循环引用报错
-      const { refreshAuth } = await import("./auth")
-
-      // 尝试刷新 Token
-      const newTokens = await refreshAuth()
-
-      if (newTokens) {
-        // 刷新成功，用新 Token 重试当前请求（递归调用）
-        return call(endpoint, body, `Bearer ${newTokens.access_token}`)
-      } else {
-        // 刷新失败，抛出 401 错误，让上层处理跳转
-        throw UnauthorizedError
-      }
-    }
-
+    const responseHeaders = captureHeaders(response)
    const contentType = response.headers.get("Content-Type") ?? "text/plain"

    if (contentType.includes("text/plain")) {
@@ -61,11 +59,18 @@ async function call<T = undefined>(
          message: text || "请求失败",
        }
      }
-      return { success: true, data: undefined as T }
+      return { success: true, data: undefined as R, headers: responseHeaders }
    }

    if (contentType.includes("application/json")) {
-      const json = await response.json()
+      const json = (await response.json()) as R & {
+        message?: string
+        error_description?: string
+        Code?: number
+        Message?: string
+        Data?: unknown
+        data?: unknown
+      }
      if (!response.ok) {
        return {
          success: false,
@@ -73,86 +78,179 @@ async function call<T = undefined>(
          message: json.message || json.error_description || "请求失败",
        }
      }
-      return { success: true, data: json }
+
+      if (typeof json.Code === "number") {
+        if (json.Code === 10000) {
+          return {
+            success: true,
+            data: (json.Data ?? json.data ?? undefined) as R,
+            headers: responseHeaders,
+          }
+        }
+        return {
+          success: false,
+          status: response.status,
+          message: json.Message || "请求失败",
+        }
+      }
+
+      return { success: true, data: json, headers: responseHeaders }
    }

    throw new Error(`无法解析响应数据: ${contentType}`)
  } catch (e) {
+    if (controller.signal.aborted) {
+      return {
+        success: false,
+        status: 408,
+        message: "请求超时，请稍后重试",
+      }
+    }
    console.error("后端请求异常:", e)
    return {
      success: false,
      status: 500,
      message: (e as Error).message || "网络错误",
    }
+  } finally {
+    clearTimeout(timer)
  }
 }

-// ======================
-// Public
-// ======================
+let deviceToken: string | null = null
+let deviceTokenExpire = 0
+let deviceTokenPromise: Promise<string | null> | null = null
+
+async function acquireDeviceToken(): Promise<string | null> {
+  if (deviceToken && Date.now() < deviceTokenExpire) return deviceToken
+  if (!deviceTokenPromise) {
+    const basic = btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)
+    deviceTokenPromise = request<{
+      access_token: string
+      expires_in: number
+    }>("/api/auth/token", {
+      method: "POST",
+      body: JSON.stringify({ grant_type: "client_credentials" }),
+      auth: `Basic ${basic}`,
+    })
+      .then(resp => {
+        if (!resp.success) {
+          deviceToken = null
+          return null
+        }
+        deviceToken = resp.data.access_token
+        deviceTokenExpire = Date.now() + (resp.data.expires_in - 60) * 1000
+        return resp.data.access_token
+      })
+      .finally(() => {
+        deviceTokenPromise = null
+      })
+  }
+  return deviceTokenPromise
+}
+
+const inflight = new Map<string, Promise<ApiResponse<unknown>>>()
+
+function dedupGet<R>(
+  endpoint: string,
+  run: () => Promise<ApiResponse<R>>,
+): Promise<ApiResponse<R>> {
+  const existing = inflight.get(endpoint)
+  if (existing) return existing as Promise<ApiResponse<R>>
+  const promise = run().finally(() => inflight.delete(endpoint))
+  inflight.set(endpoint, promise)
+  return promise
+}
+
+async function call<R = undefined>(
+  mode: CallMode,
+  endpoint: string,
+  data?: unknown,
+  method: "GET" | "POST" = "POST",
+): Promise<ApiResponse<R>> {
+  const body = data === undefined ? undefined : JSON.stringify(data)
+
+  const run = async (): Promise<ApiResponse<R>> => {
+    const maxAttempts = mode === "device" ? 2 : 1
+
+    for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+      let auth: string | undefined
+      if (mode === "user") {
+        const token = getUserToken()
+        if (!token) {
+          return {
+            success: false,
+            status: 401,
+            message: "未登录或会话已过期",
+          }
+        }
+        auth = `Bearer ${token}`
+      } else if (mode === "device") {
+        if (attempt > 1) {
+          // 上次请求 401，强制作废旧 token 再重新获取
+          deviceToken = null
+          deviceTokenExpire = 0
+        }
+        const token = await acquireDeviceToken()
+        if (!token) {
+          return {
+            success: false,
+            status: 401,
+            message: "设备凭证获取失败",
+          }
+        }
+        auth = `Bearer ${token}`
+      }
+
+      const resp = await request<R>(endpoint, { method, body, auth })
+
+      if (!resp.success && resp.status === 401) {
+        if (mode === "user") {
+          clearSession()
+          return resp
+        }
+        if (mode === "device" && attempt < maxAttempts) {
+          continue
+        }
+      }
+      return resp
+    }
+
+    return {
+      success: false,
+      status: 401,
+      message: "请求未授权",
+    }
+  }
+
+  if (method === "GET" && data === undefined) {
+    return dedupGet<R>(endpoint, run)
+  }
+  return run()
+}
+
 async function callPublic<R = undefined>(
  endpoint: string,
  data?: unknown,
+  method: "GET" | "POST" = "POST",
 ): Promise<ApiResponse<R>> {
-  return call(endpoint, data ? JSON.stringify(data) : undefined)
+  return call<R>("public", endpoint, data, method)
 }

-// ======================
-// Device
-// ======================
 async function callByDevice<R = undefined>(
  endpoint: string,
  data?: unknown,
+  method: "GET" | "POST" = "POST",
 ): Promise<ApiResponse<R>> {
-  // 检查内存中的 Token 是否过期
-  if (!deviceToken || !deviceTokenExpire || new Date() >= deviceTokenExpire) {
-    // 用 btoa 生成 Basic 认证头
-    const basic = btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)
-    const resp = await call<{
-      access_token: string
-      expires_in: number
-    }>(
-      "/api/auth/token",
-      JSON.stringify({ grant_type: "client_credentials" }),
-      `Basic ${basic}`,
-    )
-
-    if (!resp.success) {
-      return resp
-    }
-    deviceToken = resp.data.access_token
-    // 提前 60 秒过期，防止临界点失效
-    deviceTokenExpire = new Date(
-      Date.now() + (resp.data.expires_in - 60) * 1000,
-    )
-  }
-
-  return call(
-    endpoint,
-    data ? JSON.stringify(data) : undefined,
-    `Bearer ${deviceToken}`,
-  )
+  return call<R>("device", endpoint, data, method)
 }

-// ======================
-// User
-// ======================
 async function callByUser<R = undefined>(
  endpoint: string,
  data?: unknown,
+  method: "GET" | "POST" = "POST",
 ): Promise<ApiResponse<R>> {
-  // 这里我们假设用户登录后的 Token 存在 localStorage 里
-  // 如果你是用 Cookie 存 Token，这里用 js-cookie 的 get 方法替换即可
-  const token = localStorage.getItem("auth_token")
-
-  if (!token) {
-    throw UnauthorizedError
-  }
-  return call(
-    endpoint,
-    data ? JSON.stringify(data) : undefined,
-    `Bearer ${token}`,
-  )
+  return call<R>("user", endpoint, data, method)
 }

 export { callByDevice, callByUser, callPublic }
--- a/src/lib/cap/index.ts
+++ b/src/lib/cap/index.ts
@@ -1,13 +1,9 @@
-import { callPublic } from "@/api/base"
+import { callPublic } from "./base"

-// 获取验证码
-// 假设你的后端接口为 /api/captcha/get，返回 { token: 'abc', base64: 'data:image/png...' }
 export async function getCaptcha() {
  return await callPublic<{ token: string; base64: string }>("/api/captcha/get")
 }

-// 校验验证码
-// 假设后端接口为 /api/captcha/verify，返回 { success: true/false }
 export async function verifyCaptcha(token: string, answer: string) {
  return await callPublic<boolean>("/api/captcha/verify", { token, answer })
 }
--- a/src/api/linedata.ts
+++ b/src/api/linedata.ts
@@ -0,0 +1,43 @@
+import type { ApiResponse } from "@/lib/api"
+import { callPublic } from "./base"
+
+export type LineItem = {
+  city: string | number
+  daikuan: string | number
+  name: string | number
+  nasname: string | number
+  online: string | number
+  supply: string | number
+}
+
+export type LineData = {
+  count: number | string
+  use_count: number | string
+  data: LineItem[]
+}
+
+export type LineSearchResult = {
+  data: LineItem[]
+}
+
+export async function fetchLineData(
+  product: number,
+): Promise<ApiResponse<LineData>> {
+  return await callPublic<LineData>(
+    `/script/linedata/display.php?product=${product}`,
+    undefined,
+    "GET",
+  )
+}
+
+export async function searchLineData(
+  productid: number,
+  info: string,
+): Promise<ApiResponse<LineSearchResult>> {
+  const query = `type=0&productid=${productid}&info=${encodeURIComponent(info)}`
+  return await callPublic<LineSearchResult>(
+    `/script/linedata/search.php?${query}`,
+    undefined,
+    "GET",
+  )
+}
--- a/src/api/order.ts
+++ b/src/api/order.ts
@@ -0,0 +1,64 @@
+import type { ApiResponse } from "@/lib/api"
+import { callByUser } from "./base"
+
+export type CreateOrderRequest = {
+  PackageId: number
+  OrderType: number
+  Account: string
+  Pwd: string
+  ConnectCount: number
+  MinPostfix?: number
+  MaxPostfix?: number
+  CouponId?: number
+  UseAccountAmount?: number
+  OPayType: number
+  PayChannel?: number
+  Price?: number
+}
+
+export type CreateTestAccountRequest = {
+  ProductId: number
+  PackageId: number
+  Account: string
+  Pwd: string
+}
+
+export type OrderInfo = {
+  OrderNo: string
+  OtherPayAmount: number
+  CreateTime: string
+  PayType: number
+}
+
+export type CreateOrderData = {
+  OrderInfo: OrderInfo
+  PayData: string
+}
+
+export async function createOrder(
+  data: CreateOrderRequest,
+): Promise<ApiResponse<CreateOrderData | string>> {
+  return await callByUser<CreateOrderData | string>(
+    "/product/CreateOrder",
+    data,
+  )
+}
+
+export async function createTestAccount(
+  data: CreateTestAccountRequest,
+): Promise<ApiResponse<string>> {
+  return await callByUser<string>(
+    "/api/course/v1/productaccount/CreateTestAccount",
+    data,
+  )
+}
+
+export async function checkPayStatus(
+  orderNo: string,
+): Promise<ApiResponse<number>> {
+  return await callByUser<number>(
+    `/product/IsPay?orderNo=${orderNo}`,
+    undefined,
+    "GET",
+  )
+}
--- a/src/api/product.ts
+++ b/src/api/product.ts
@@ -0,0 +1,11 @@
+import type { ApiResponse } from "@/lib/api"
+import type { ProductItem } from "@/lib/models/product"
+import { callPublic } from "./base"
+
+export async function fetchProducts(): Promise<ApiResponse<ProductItem[]>> {
+  return await callPublic<ProductItem[]>(
+    "/product/ApiProductActive",
+    undefined,
+    "GET",
+  )
+}
--- a/src/api/token.ts
+++ b/src/api/token.ts
@@ -0,0 +1,44 @@
+export const AUTH_EVENT = "auth-change"
+
+const TOKEN_KEY = "auth_token"
+const USER_KEY = "auth_user"
+
+export function readCookie(name: string): string | null {
+  const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))
+  return match ? decodeURIComponent(match[1]) : null
+}
+
+export function clearCookie(name: string) {
+  // biome-ignore lint/suspicious/noDocumentCookie: Cookie Store API 兼容性不足，标准做法是覆盖写入
+  document.cookie = `${name}=; max-age=0; path=/`
+}
+
+export function getUserToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY)
+}
+
+export function getUserInfo<T = unknown>(): T | null {
+  const raw = localStorage.getItem(USER_KEY)
+  if (!raw) return null
+  try {
+    return JSON.parse(raw) as T
+  } catch {
+    return null
+  }
+}
+
+export function isAuthed(): boolean {
+  return getUserToken() !== null
+}
+
+export function setSession(token: string, userInfo: unknown) {
+  localStorage.setItem(TOKEN_KEY, token)
+  localStorage.setItem(USER_KEY, JSON.stringify(userInfo))
+  window.dispatchEvent(new Event(AUTH_EVENT))
+}
+
+export function clearSession() {
+  localStorage.removeItem(TOKEN_KEY)
+  localStorage.removeItem(USER_KEY)
+  window.dispatchEvent(new Event(AUTH_EVENT))
+}
--- a/src/api/verify.ts
+++ b/src/api/verify.ts
@@ -1,15 +1,14 @@
 import type { ApiResponse } from "@/lib/api"
-import { callByDevice } from "./base"
+import { callPublic } from "./base"

 export type SMSPurpose = "User_Code" | "FindUser_Code" | "User_Login"

 export async function sendSMS(
  phone: string,
  purpose: SMSPurpose = "User_Code",
-): Promise<ApiResponse> {
-  return await callByDevice("/api/verify/sms", {
-    phone,
-    purpose,
+): Promise<ApiResponse<undefined>> {
+  return await callPublic("/user/SendPhonesCodevefy", {
    key: purpose,
+    phone,
  })
 }
--- a/src/components/authGuard.tsx
+++ b/src/components/authGuard.tsx
@@ -1,58 +1,17 @@
 import { useEffect, useState } from "react"
 import { Navigate, useLocation } from "react-router-dom"
-import { getProfile, refreshAuth } from "@/api/auth"
+import { AUTH_EVENT, isAuthed } from "@/api/token"

 export default function AuthGuard({ children }: { children: React.ReactNode }) {
  const location = useLocation()
-  const [isValid, setIsValid] = useState<boolean | null>(null)
+  const [isValid, setIsValid] = useState(isAuthed)

  useEffect(() => {
-    const checkAuth = async () => {
-      try {
-        const accessToken = localStorage.getItem("auth_token")
-        const refreshToken = localStorage.getItem("auth_refresh")
-
-        if (!accessToken && !refreshToken) {
-          setIsValid(false)
-          return
-        }
-
-        const profileResp = await getProfile()
-        if (profileResp.success) {
-          setIsValid(true)
-          return
-        }
-
-        if (refreshToken) {
-          const newTokens = await refreshAuth()
-          if (newTokens) {
-            setIsValid(true)
-            return
-          }
-        }
-
-        localStorage.removeItem("auth_token")
-        localStorage.removeItem("auth_refresh")
-        localStorage.removeItem("auth_expires_in")
-        setIsValid(false)
-      } catch {
-        localStorage.removeItem("auth_token")
-        localStorage.removeItem("auth_refresh")
-        localStorage.removeItem("auth_expires_in")
-        setIsValid(false)
-      }
-    }
-
-    checkAuth()
+    const update = () => setIsValid(isAuthed())
+    window.addEventListener(AUTH_EVENT, update)
+    return () => window.removeEventListener(AUTH_EVENT, update)
  }, [])

-  if (isValid === null)
-    return (
-      <div className="flex justify-center items-center h-screen">
-        验证身份中...
-      </div>
-    )
-
  if (!isValid) {
    return (
      <Navigate
--- a/src/components/composites/dialogs/editInfoDialog.tsx
+++ b/src/components/composites/dialogs/editInfoDialog.tsx
@@ -51,7 +51,7 @@ export function EditInfoDialog({

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[480px] p-6">
+      <DialogContent className="sm:max-w-120 p-6">
        <DialogHeader>
          <DialogTitle className="text-xl font-semibold text-center">
            编辑信息
--- a/src/components/productDropdown.tsx
+++ b/src/components/productDropdown.tsx
@@ -0,0 +1,184 @@
+import { useNavigate } from "react-router-dom"
+import { cn } from "@/lib/utils"
+
+const SIZE_STYLES = {
+  lg: {
+    wrap: "space-y-4",
+    grid: "grid-cols-3 gap-4",
+    card: "gap-3 p-3",
+    title: "text-sm",
+    titleGap: "gap-2",
+    desc: "text-xs mt-1",
+    tag: "px-2 py-0.5",
+    footer: "gap-3 pt-3",
+    footerLink: "text-sm",
+  },
+  sm: {
+    wrap: "space-y-3",
+    grid: "grid-cols-3 gap-3",
+    card: "gap-2 p-2",
+    title: "text-xs",
+    titleGap: "gap-1.5",
+    desc: "text-[11px] mt-0.5",
+    tag: "px-1.5 py-0.5",
+    footer: "gap-2 pt-2",
+    footerLink: "text-xs",
+  },
+} as const
+
+export default function ProductDropdown({
+  size = "lg",
+  onNavigate,
+}: {
+  size?: keyof typeof SIZE_STYLES
+  onNavigate?: () => void
+}) {
+  const navigate = useNavigate()
+  const s = SIZE_STYLES[size]
+
+  const handleClick = (path: string) => {
+    navigate(path)
+    onNavigate?.()
+  }
+
+  return (
+    <div className={s.wrap}>
+      <div className={cn("grid", s.grid)}>
+        <ProductCard
+          size={s}
+          title="动静态IP"
+          desc="千万级动态短效IP，自动去重，高并发采集"
+          tag="热门"
+          onClick={() => handleClick("/product?tab=short")}
+        />
+        <ProductCard
+          size={s}
+          title="新HTTP/S5"
+          desc="IP可用时长从数小时到365天全覆盖"
+          tag="稳定"
+          onClick={() => window.open("https://lanhuip.com", "_blank")}
+        />
+        <ProductCard
+          size={s}
+          title="HTTP/S5"
+          desc="海量全球住宅优质IP，4G/5G真实手机IP"
+          tag="全球"
+          onClick={() => handleClick("/product/http")}
+        />
+        <ProductCard
+          size={s}
+          title="软路由成本价"
+          desc="云端自动切换IP，更易于调用与开发"
+          onClick={() => handleClick("/product/routeros")}
+        />
+        <ProductCard
+          size={s}
+          title="动态Vps"
+          desc="IP独享，高带宽，灵活控制存活周期"
+          onClick={() => window.open("http://vps.juip.com", "_blank")}
+        />
+      </div>
+
+      <div
+        className={cn(
+          "flex items-center flex-wrap border-t border-gray-100",
+          s.footer,
+        )}
+      >
+        <span className="text-xs font-medium text-gray-400">热门推荐:</span>
+        <button
+          onClick={() => handleClick("/product?tab=short")}
+          className={cn(
+            "text-blue-600 hover:underline whitespace-nowrap",
+            s.footerLink,
+          )}
+        >
+          短效代理
+        </button>
+        <button
+          onClick={() => handleClick("/product?tab=global")}
+          className={cn(
+            "text-blue-600 hover:underline whitespace-nowrap",
+            s.footerLink,
+          )}
+        >
+          海外代理
+        </button>
+        <button
+          onClick={() => handleClick("/product?tab=tunnel")}
+          className={cn(
+            "text-blue-600 hover:underline whitespace-nowrap",
+            s.footerLink,
+          )}
+        >
+          隧道代理
+        </button>
+        <span className="text-xs text-gray-300">|</span>
+        <button
+          onClick={() => handleClick("/product")}
+          className={cn(
+            "text-orange-500 hover:underline font-medium whitespace-nowrap",
+            s.footerLink,
+          )}
+        >
+          业务定制 →
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function ProductCard({
+  size,
+  title,
+  desc,
+  tag,
+  onClick,
+}: {
+  size: (typeof SIZE_STYLES)[keyof typeof SIZE_STYLES]
+  title: string
+  desc: string
+  tag?: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "group flex items-start rounded-lg hover:bg-gray-50 transition-all cursor-pointer border border-transparent hover:border-blue-200 text-left w-full",
+        size.card,
+      )}
+    >
+      <div className="flex-1 min-w-0">
+        <div className={cn("flex items-center flex-wrap", size.titleGap)}>
+          <span
+            className={cn(
+              "font-medium text-gray-800 group-hover:text-blue-600 transition-colors whitespace-nowrap",
+              size.title,
+            )}
+          >
+            {title}
+          </span>
+          {tag && (
+            <span
+              className={cn(
+                "text-[10px] bg-blue-100 text-blue-600 rounded-full shrink-0",
+                size.tag,
+              )}
+            >
+              {tag}
+            </span>
+          )}
+        </div>
+        <p
+          className={cn(
+            "text-gray-500 leading-relaxed line-clamp-2",
+            size.desc,
+          )}
+        >
+          {desc}
+        </p>
+      </div>
+    </button>
+  )
+}
--- a/src/components/profileOrLogin.tsx
+++ b/src/components/profileOrLogin.tsx
@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react"
+import { NavLink, useNavigate } from "react-router-dom"
+import { logout } from "@/api/auth"
+import { AUTH_EVENT, isAuthed } from "@/api/token"
+
+export default function ProfileOrLogin() {
+  const [authed, setAuthed] = useState(isAuthed)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const update = () => setAuthed(isAuthed())
+    window.addEventListener("focus", update)
+    window.addEventListener(AUTH_EVENT, update)
+    return () => {
+      window.removeEventListener("focus", update)
+      window.removeEventListener(AUTH_EVENT, update)
+    }
+  }, [])
+
+  const handleLogout = async () => {
+    await logout()
+  }
+
+  if (authed) {
+    return (
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => navigate("/admin")}
+          className="w-24 h-12 flex items-center justify-center lg:text-lg text-slate-700 hover:text-blue-500 transition-colors"
+        >
+          <span>个人中心</span>
+        </button>
+        <button
+          onClick={handleLogout}
+          className={[
+            "w-20 lg:w-24 h-10 lg:h-12 bg-linear-to-r rounded-full flex items-center justify-center lg:text-lg text-white",
+            "transition-colors duration-200 ease-in-out",
+            "from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300",
+          ].join(" ")}
+        >
+          <span>退出登录</span>
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center">
+      <NavLink
+        to="/login"
+        state={{ tab: "login" }}
+        className="w-24 h-12 flex items-center justify-center lg:text-lg"
+      >
+        <span>登录</span>
+      </NavLink>
+      <NavLink
+        to="/login"
+        state={{ tab: "register" }}
+        className={[
+          "w-20 lg:w-24 h-10 lg:h-12 bg-linear-to-r rounded-full flex items-center justify-center lg:text-lg text-white",
+          "transition-colors duration-200 ease-in-out",
+          "from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300",
+        ].join(" ")}
+      >
+        <span>注册</span>
+      </NavLink>
+    </div>
+  )
+}
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,42 @@
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils/index"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid w-full gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4 items-center justify-center"
+      >
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
--- a/src/home/_assets/alipay.svg
+++ b/src/home/_assets/alipay.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_98_223)">
+<path d="M20.001 13.692V3.845C20.0005 2.82523 19.5951 1.8474 18.8739 1.12641C18.1527 0.405415 17.1748 0.000264944 16.155 0L3.845 0C2.82541 0.000529935 1.84772 0.405797 1.12676 1.12676C0.405797 1.84772 0.000529935 2.82541 0 3.845V16.155C0.000265092 17.1747 0.405447 18.1525 1.12647 18.8735C1.84749 19.5946 2.82532 19.9997 3.845 20H16.155C17.057 19.9994 17.9301 19.682 18.622 19.1034C19.3139 18.5248 19.7808 17.7216 19.941 16.834C18.921 16.392 14.501 14.484 12.198 13.384C10.446 15.507 8.61 16.781 5.844 16.781C3.078 16.781 1.231 15.077 1.453 12.991C1.599 11.623 2.538 9.386 6.615 9.769C8.765 9.971 9.748 10.372 11.501 10.951C11.954 10.119 12.331 9.204 12.617 8.231H4.845V7.461H8.691V6.077H4V5.23H8.69V3.235C8.69 3.235 8.732 2.923 9.077 2.923H11V5.23H16V6.078H11V7.46H15.079C14.7272 8.91647 14.1692 10.3152 13.422 11.614C14.607 12.044 20 13.692 20 13.692H20.001ZM5.538 15.461C2.615 15.461 2.153 13.616 2.308 12.845C2.461 12.077 3.308 11.075 4.933 11.075C6.8 11.075 8.473 11.553 10.481 12.531C9.071 14.367 7.338 15.461 5.538 15.461Z" fill="#00A5F1"/>
+</g>
+<defs>
+<clipPath id="clip0_98_223">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/home/_assets/balance.svg
+++ b/src/home/_assets/balance.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99996 0C4.4771 0 0 4.47714 0 10C0 15.5229 4.47712 20 9.99996 20C15.5228 20 19.9999 15.5228 19.9999 10C19.9999 4.47716 15.5228 0 9.99996 0ZM7.05159 4.29727C7.78297 3.68016 9.40572 4.98294 9.97711 4.93723C10.5485 4.98294 12.1713 3.68016 12.9026 4.29727C13.634 4.91437 12.017 6.325 12.017 6.325H7.93688C7.93688 6.325 6.32021 4.91437 7.05159 4.29727ZM12.1713 7.05639C12.1713 7.25852 12.0077 7.42208 11.8056 7.42208H8.14866C7.9465 7.42208 7.78297 7.25852 7.78297 7.05639C7.78297 6.85425 7.9465 6.6907 8.14866 6.6907H11.8056C12.0077 6.6907 12.1713 6.85425 12.1713 7.05639ZM9.97711 15.8251C7.14941 15.8251 4.85744 16.0801 4.85744 13.6881C4.85744 11.9096 6.12522 9.10908 7.93688 7.78775H12.017C13.829 9.10911 15.0968 11.9096 15.0968 13.6881C15.0968 16.0801 12.8048 15.8251 9.97711 15.8251Z" fill="#FF6B00"/>
+<path d="M10.0331 10.4641C10.1948 10.4641 10.321 10.5147 10.4125 10.6152C10.504 10.7158 10.5501 10.8605 10.5501 11.0487H11.5651C11.5651 10.7314 11.457 10.4759 11.2417 10.2807C11.0263 10.0854 10.7292 9.96605 10.3514 9.92196V9.375H9.82754V9.91174C9.43225 9.94399 9.11936 10.0511 8.88808 10.2334C8.65681 10.4157 8.54116 10.6486 8.54116 10.9315C8.54116 11.2434 8.6553 11.4833 8.88429 11.6511C9.11333 11.8189 9.46855 11.969 9.94998 12.1013C10.1714 12.1846 10.3249 12.268 10.4103 12.3519C10.4956 12.4358 10.5387 12.5498 10.5387 12.6939C10.5387 12.8349 10.4972 12.9473 10.4126 13.0322C10.3279 13.1167 10.1971 13.1592 10.0188 13.1592C9.82683 13.1592 9.6726 13.1113 9.55846 13.0167C9.44432 12.922 9.38689 12.7634 9.38689 12.5412H8.39678L8.38921 12.5541C8.37939 12.915 8.50335 13.1888 8.7611 13.3755C9.01882 13.5621 9.35064 13.6712 9.75495 13.7035V14.2043H10.2825V13.7009C10.6778 13.6686 10.9892 13.5653 11.2167 13.3894C11.4442 13.2136 11.5583 12.9801 11.5583 12.6887C11.5583 12.3783 11.4411 12.1352 11.2076 11.9588C10.974 11.7824 10.6234 11.6334 10.1563 11.5113C9.92274 11.4183 9.76476 11.3317 9.68312 11.2521C9.60152 11.1725 9.56073 11.0665 9.55995 10.9348C9.55995 10.7922 9.597 10.6781 9.6703 10.5927C9.74364 10.5072 9.86457 10.4641 10.0331 10.4641Z" fill="#FF6B00"/>
+</svg>
--- a/src/home/_assets/wechat.svg
+++ b/src/home/_assets/wechat.svg
@@ -0,0 +1,16 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_98_228)">
+<path d="M3.6 0H16.4C18.8 0 20 1.2 20 3.6V16.4C20 18.8 18.8 20 16.4 20H3.6C1.2 20 0 18.8 0 16.4V3.6C0 1.2 1.2 0 3.6 0Z" fill="#28D846"/>
+<path d="M12.9534 7.94922C10.4386 7.94922 8.39999 9.65422 8.39999 11.7574C8.39999 13.8606 10.4386 15.5656 12.9534 15.5656C13.5434 15.5658 14.1294 15.4683 14.6876 15.2772L15.9912 15.9716L15.8158 14.7192C16.3212 14.4045 16.7403 13.969 17.0355 13.452C17.3307 12.9349 17.4927 12.3526 17.5068 11.7574C17.5066 9.65422 15.468 7.94922 12.9534 7.94922Z" fill="white"/>
+<path d="M7.89999 3.80078C10.576 3.80078 12.7884 5.44078 13.2938 7.61478C12.3402 7.53638 7.39379 8.06938 8.17939 12.9148C7.46839 12.9168 6.49939 12.8856 5.80539 12.6518L4.23059 13.4912L4.44259 11.9784C3.21699 11.1678 2.39999 9.86418 2.39999 8.40078C2.39999 5.86078 4.86239 3.80078 7.89999 3.80078Z" fill="white"/>
+<path d="M5.39999 6.88016C5.39999 7.07111 5.47585 7.25425 5.61088 7.38927C5.7459 7.5243 5.92904 7.60016 6.11999 7.60016C6.31095 7.60016 6.49408 7.5243 6.62911 7.38927C6.76414 7.25425 6.83999 7.07111 6.83999 6.88016C6.83999 6.6892 6.76414 6.50607 6.62911 6.37104C6.49408 6.23601 6.31095 6.16016 6.11999 6.16016C5.92904 6.16016 5.7459 6.23601 5.61088 6.37104C5.47585 6.50607 5.39999 6.6892 5.39999 6.88016Z" fill="#28D846"/>
+<path d="M9 6.88016C9 7.07111 9.07586 7.25425 9.21088 7.38927C9.34591 7.5243 9.52904 7.60016 9.72 7.60016C9.91096 7.60016 10.0941 7.5243 10.2291 7.38927C10.3641 7.25425 10.44 7.07111 10.44 6.88016C10.44 6.6892 10.3641 6.50607 10.2291 6.37104C10.0941 6.23601 9.91096 6.16016 9.72 6.16016C9.52904 6.16016 9.34591 6.23601 9.21088 6.37104C9.07586 6.50607 9 6.6892 9 6.88016Z" fill="#28D846"/>
+<path d="M10.8 10.64C10.8 10.8097 10.8674 10.9725 10.9874 11.0925C11.1075 11.2126 11.2702 11.28 11.44 11.28C11.6097 11.28 11.7725 11.2126 11.8925 11.0925C12.0126 10.9725 12.08 10.8097 12.08 10.64C12.08 10.4703 12.0126 10.3075 11.8925 10.1875C11.7725 10.0674 11.6097 10 11.44 10C11.2702 10 11.1075 10.0674 10.9874 10.1875C10.8674 10.3075 10.8 10.4703 10.8 10.64Z" fill="#28D846"/>
+<path d="M13.84 10.64C13.84 10.8097 13.9074 10.9725 14.0274 11.0925C14.1475 11.2126 14.3103 11.28 14.48 11.28C14.6497 11.28 14.8125 11.2126 14.9325 11.0925C15.0526 10.9725 15.12 10.8097 15.12 10.64C15.12 10.4703 15.0526 10.3075 14.9325 10.1875C14.8125 10.0674 14.6497 10 14.48 10C14.3103 10 14.1475 10.0674 14.0274 10.1875C13.9074 10.3075 13.84 10.4703 13.84 10.64Z" fill="#28D846"/>
+</g>
+<defs>
+<clipPath id="clip0_98_228">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/home/header.tsx
+++ b/src/home/header.tsx
@@ -1,72 +1,10 @@
-import { useEffect, useRef, useState, useSyncExternalStore } from "react"
-import { NavLink, useNavigate } from "react-router-dom"
-import { logout } from "@/api/auth"
+import { useRef, useState, useSyncExternalStore } from "react"
+import { NavLink } from "react-router-dom"
+import ProductDropdown from "@/components/productDropdown"
+import ProfileOrLogin from "@/components/profileOrLogin"
 import Wrap from "@/components/wrap"
 import { cn } from "@/lib/utils"

-function ProfileOrLogin() {
-  const [authed, setAuthed] = useState(
-    () => !!localStorage.getItem("auth_token"),
-  )
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    const onFocus = () => setAuthed(!!localStorage.getItem("auth_token"))
-    window.addEventListener("focus", onFocus)
-    return () => window.removeEventListener("focus", onFocus)
-  }, [])
-
-  const handleLogout = async () => {
-    await logout()
-  }
-
-  if (authed) {
-    return (
-      <div className="flex items-center gap-2">
-        <button
-          onClick={() => navigate("/admin")}
-          className="w-24 h-12 flex items-center justify-center lg:text-lg text-slate-700 hover:text-blue-500 transition-colors"
-        >
-          <span>个人中心</span>
-        </button>
-        <button
-          onClick={handleLogout}
-          className={[
-            "w-20 lg:w-24 h-10 lg:h-12 bg-linear-to-r rounded-full flex items-center justify-center lg:text-lg text-white",
-            "transition-colors duration-200 ease-in-out",
-            "from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300",
-          ].join(" ")}
-        >
-          <span>退出登录</span>
-        </button>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex items-center">
-      <NavLink
-        to="/login"
-        state={{ tab: "login" }}
-        className="w-24 h-12 flex items-center justify-center lg:text-lg"
-      >
-        <span>登录</span>
-      </NavLink>
-      <NavLink
-        to="/login"
-        state={{ tab: "register" }}
-        className={[
-          "w-20 lg:w-24 h-10 lg:h-12 bg-linear-to-r rounded-full flex items-center justify-center lg:text-lg text-white",
-          "transition-colors duration-200 ease-in-out",
-          "from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300",
-        ].join(" ")}
-      >
-        <span>注册</span>
-      </NavLink>
-    </div>
-  )
-}
-
 export default function Header() {
  const scroll = useSyncExternalStore(
    callback => {
@@ -229,113 +167,3 @@ const MenuItem = ({
    </li>
  )
 }
-
-const ProductDropdown = ({ onNavigate }: { onNavigate: () => void }) => {
-  const navigate = useNavigate()
-
-  const handleClick = (path: string) => {
-    navigate(path)
-    onNavigate()
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="grid grid-cols-3 gap-4">
-        <ProductCard
-          title="动静态IP"
-          desc="千万级动态短效IP，自动去重，高并发采集"
-          tag="热门"
-          onClick={() => handleClick("/product?tab=short")}
-        />
-        <ProductCard
-          title="新HTTP/S5"
-          desc="IP可用时长从数小时到365天全覆盖"
-          tag="稳定"
-          onClick={() => handleClick("/product?tab=long")}
-        />
-        <ProductCard
-          title="HTTP/S5"
-          desc="海量全球住宅优质IP，4G/5G真实手机IP"
-          tag="全球"
-          onClick={() => handleClick("/product?tab=global")}
-        />
-        <ProductCard
-          title="软路由成本价"
-          desc="云端自动切换IP，更易于调用与开发"
-          onClick={() => handleClick("/product?tab=tunnel")}
-        />
-        <ProductCard
-          title="动态Vps"
-          desc="IP独享，高带宽，灵活控制存活周期"
-          onClick={() => handleClick("/product?tab=exclusive")}
-        />
-        <ProductCard
-          title="静态独享IP"
-          desc="纯净IP，更符合跨境卖家需求的云主机"
-          onClick={() => handleClick("/product?tab=static")}
-        />
-      </div>
-
-      <div className="flex items-center flex-wrap gap-3 pt-3 border-t border-gray-100">
-        <span className="text-xs font-medium text-gray-400">热门推荐:</span>
-        <button
-          onClick={() => handleClick("/product?tab=short")}
-          className="text-sm text-blue-600 hover:underline whitespace-nowrap"
-        >
-          短效代理
-        </button>
-        <button
-          onClick={() => handleClick("/product?tab=global")}
-          className="text-sm text-blue-600 hover:underline whitespace-nowrap"
-        >
-          海外代理
-        </button>
-        <button
-          onClick={() => handleClick("/product?tab=tunnel")}
-          className="text-sm text-blue-600 hover:underline whitespace-nowrap"
-        >
-          隧道代理
-        </button>
-        <span className="text-xs text-gray-300">|</span>
-        <button
-          onClick={() => handleClick("/product")}
-          className="text-sm text-orange-500 hover:underline font-medium whitespace-nowrap"
-        >
-          业务定制 →
-        </button>
-      </div>
-    </div>
-  )
-}
-const ProductCard = ({
-  title,
-  desc,
-  tag,
-  onClick,
-}: {
-  title: string
-  desc: string
-  tag?: string
-  onClick: () => void
-}) => (
-  <button
-    onClick={onClick}
-    className="group flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-all cursor-pointer border border-transparent hover:border-blue-200 text-left w-full"
-  >
-    <div className="flex-1 min-w-0">
-      <div className="flex items-center gap-2 flex-wrap">
-        <span className="font-medium text-gray-800 group-hover:text-blue-600 transition-colors text-sm whitespace-nowrap">
-          {title}
-        </span>
-        {tag && (
-          <span className="text-[10px] bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full shrink-0">
-            {tag}
-          </span>
-        )}
-      </div>
-      <p className="text-xs text-gray-500 mt-1 leading-relaxed line-clamp-2">
-        {desc}
-      </p>
-    </div>
-  </button>
-)
--- a/src/home/index.tsx
+++ b/src/home/index.tsx
@@ -138,8 +138,63 @@ export default function HomePage() {
              </p>
            </div>

-            <div className="flex mt-10 lg:mt-20 items-center justify-center">
-              <img src={s9} alt="图片" className="max-w-full h-auto" />
+            <div className="flex flex-col mt-10 lg:mt-20">
+              <div className="relative flex items-center justify-center">
+                <img src={s9} alt="图片" className="max-w-full h-auto" />
+                <div className="absolute left-0 top-0 w-[30%] h-full flex flex-col justify-between">
+                  <div className="text-left pr-4 pt-0">
+                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
+                      爬虫抓取
+                    </h4>
+                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
+                      3000W高匿名IP，可以轻松抓取企业信息、分类信息、房地产信息、电商信息
+                    </p>
+                  </div>
+                  <div className="text-left pr-4">
+                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
+                      数据采集
+                    </h4>
+                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
+                      用于大数据采集的多样化利用场景，快速采集SEO数据优化、金融理财、地域信息数据
+                    </p>
+                  </div>
+                  <div className="text-left pr-4 pb-0">
+                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
+                      营销推广
+                    </h4>
+                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
+                      论坛发帖、问答推广、网上购物、投票点赞等，根据渠道操作要求，定制IP完成营销推广
+                    </p>
+                  </div>
+                </div>
+
+                <div className="absolute right-0 top-0 w-[30%] h-full flex flex-col justify-between">
+                  <div className="text-right pl-4 pt-0">
+                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
+                      电子商务
+                    </h4>
+                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
+                      可帮助用户切换网络，模拟多个独立账号，有助于用户参与限时促销活动，避免购物效率低下的困扰
+                    </p>
+                  </div>
+                  <div className="text-right pl-4">
+                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
+                      游戏工作室
+                    </h4>
+                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
+                      保证IP稳定，不掉线，在有效时长内完成游戏试玩、升级、完成游戏工作室操作要求
+                    </p>
+                  </div>
+                  <div className="text-right pl-4 pb-0">
+                    <h4 className="text-sm lg:text-base font-semibold text-gray-800 mb-1">
+                      自媒体运营
+                    </h4>
+                    <p className="text-[10px] lg:text-xs text-gray-500 leading-relaxed">
+                      可帮助自媒体运营者维护账号独立性，为每个账号赋予独立IP，避免IP地址关联带来的负面影响
+                    </p>
+                  </div>
+                </div>
+              </div>
            </div>

            <div className="flex flex-col pt-12 lg:pt-24 ">
--- a/src/home/ipLine/index.tsx
+++ b/src/home/ipLine/index.tsx
@@ -1,72 +1,296 @@
-import { Button } from "@/components/ui/button"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { Toaster, toast } from "sonner"
+import { fetchLineData, type LineItem, searchLineData } from "@/api/linedata"
+import { fetchProducts } from "@/api/product"
 import Wrap from "@/components/wrap"
+import { cn } from "@/lib/utils"
+
+const REFRESH_INTERVAL = 5 * 60 * 1000
+
+type ProductOption = { id: number; name: string }
+
+type DisplayRow = {
+  item: LineItem
+  nameSpan: number
+  citySpan: number
+}
+
+function toText(value: string | number): string {
+  return value === null || value === undefined ? "" : String(value)
+}
+
+function onlineClass(value: string | number): string {
+  const text = toText(value)
+  if (!text) return "text-gray-400"
+  return text.includes("在线") || text.includes("正常")
+    ? "text-green-600"
+    : "text-red-500"
+}

 export default function IpLinePage() {
+  const [products, setProducts] = useState<ProductOption[]>([])
+  const [productId, setProductId] = useState<number | null>(null)
+  const [rows, setRows] = useState<LineItem[]>([])
+  const [count, setCount] = useState<number | string>(0)
+  const [useCount, setUseCount] = useState<number | string>(0)
+  const [keyword, setKeyword] = useState("")
+  const [searching, setSearching] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetchProducts().then(result => {
+      if (!result.success) {
+        setError(result.message)
+        setLoading(false)
+        return
+      }
+      const list = result.data
+        .filter(p => p.Product.OnLine === 1)
+        .sort((a, b) => a.Product.Sort - b.Product.Sort)
+        .map(p => ({ id: p.Product.Id, name: p.Product.Name }))
+      setProducts(list)
+      if (list[0]) {
+        setProductId(list[0].id)
+      } else {
+        setLoading(false)
+        setError(null)
+      }
+    })
+  }, [])
+
+  const loadDisplay = useCallback(async (pid: number) => {
+    setLoading(true)
+    setError(null)
+    const result = await fetchLineData(pid)
+    console.log(result, "resultresultresultresult")
+
+    if (result.success) {
+      setRows(result.data.data ?? [])
+      setCount(result.data.count ?? 0)
+      setUseCount(result.data.use_count ?? 0)
+    } else {
+      setRows([])
+      setCount(0)
+      setUseCount(0)
+      setError(result.message)
+    }
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    if (productId !== null) {
+      setSearching(false)
+      setKeyword("")
+      loadDisplay(productId)
+    }
+  }, [productId, loadDisplay])
+
+  useEffect(() => {
+    if (productId === null) return
+    const timer = setInterval(() => {
+      if (!searching) loadDisplay(productId)
+    }, REFRESH_INTERVAL)
+    return () => clearInterval(timer)
+  }, [productId, searching, loadDisplay])
+
+  const handleSearch = async () => {
+    if (productId === null) return
+    const info = keyword.trim()
+    if (!info) {
+      if (searching) {
+        setSearching(false)
+        await loadDisplay(productId)
+      }
+      return
+    }
+    setSearching(true)
+    setLoading(true)
+    setError(null)
+    const result = await searchLineData(productId, info)
+    if (result.success) {
+      setRows(result.data.data ?? [])
+    } else {
+      setRows([])
+      setError(result.message)
+    }
+    setLoading(false)
+  }
+
+  const handleCopy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      toast.success("复制成功")
+    } catch {
+      toast.error("复制失败，请手动复制")
+    }
+  }
+
+  const currentName = products.find(p => p.id === productId)?.name ?? ""
+
+  const handleExport = () => {
+    if (rows.length === 0) {
+      toast.error("暂无数据可导出")
+      return
+    }
+    const header = [
+      "产品",
+      "城市",
+      "运营商",
+      "服务器域名",
+      "带宽",
+      "服务器状态",
+    ]
+    const lines = [
+      header,
+      ...rows.map(r => [
+        toText(r.name),
+        toText(r.city),
+        toText(r.supply),
+        toText(r.nasname),
+        toText(r.daikuan),
+        toText(r.online),
+      ]),
+    ]
+    const csv = lines
+      .map(line => line.map(v => `"${v.replaceAll('"', '""')}"`).join(","))
+      .join("\r\n")
+    const blob = new Blob([`\uFEFF${csv}`], {
+      type: "text/csv;charset=utf-8",
+    })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = `${currentName || "IP线路表"}.csv`
+    a.click()
+    URL.revokeObjectURL(url)
+    toast.success("导出成功")
+  }
+
+  const displayRows = useMemo<DisplayRow[]>(() => {
+    const out: DisplayRow[] = []
+    let i = 0
+    while (i < rows.length) {
+      const item = rows[i]
+      let cityEnd = i + 1
+      while (
+        cityEnd < rows.length &&
+        rows[cityEnd].name === item.name &&
+        rows[cityEnd].city === item.city
+      ) {
+        cityEnd += 1
+      }
+      let nameEnd = cityEnd
+      while (nameEnd < rows.length && rows[nameEnd].name === item.name) {
+        nameEnd += 1
+      }
+      for (let k = i; k < cityEnd; k += 1) {
+        out.push({
+          item: rows[k],
+          nameSpan: k === i ? nameEnd - i : 0,
+          citySpan: k === i ? cityEnd - i : 0,
+        })
+      }
+      i = cityEnd
+    }
+    return out
+  }, [rows])
+
  return (
-    <Wrap className="flex flex-col gap-4 mt-30 max-w-6xl mx-auto px-4 pb-20">
-      <div className="grid grid-cols-3">
-        <div></div>
-        <h3 className="text-3xl font-bold text-gray-800 text-center">
-          IP线路表
-        </h3>
-        <div className="flex gap-4 text-sm justify-end items-end text-blue-500">
-          <a
-            href="/softDownload"
-            className="no-underline hover:text-blue-700 active:no-underline focus:no-underline"
-          >
-            下载客户端
-          </a>
-          <a
-            href="/help"
-            className="no-underline hover:text-blue-700 active:no-underline focus:no-underline"
-          >
-            教程&amp;帮助
-          </a>
+    <>
+      <Toaster position="top-center" richColors />
+      <Wrap className="flex flex-col gap-4 mt-30 max-w-6xl mx-auto px-4 pb-20">
+        <div className="grid grid-cols-3">
+          <div></div>
+          <h3 className="text-3xl font-bold text-gray-800 text-center">
+            IP线路表
+          </h3>
+          <div className="flex gap-4 text-sm justify-end items-end text-blue-500">
+            <a
+              href="/softDownload"
+              className="no-underline hover:text-blue-700 active:no-underline focus:no-underline"
+            >
+              下载客户端
+            </a>
+            <a
+              href="/help"
+              className="no-underline hover:text-blue-700 active:no-underline focus:no-underline"
+            >
+              教程&amp;帮助
+            </a>
+          </div>
        </div>
-      </div>

-      <ul className="flex justify-between gap-4 text-xs text-gray-600 px-2">
-        <li className="flex items-center gap-1.5">
-          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
-          线路表和账户必须为同一产品才能使用
-        </li>
-        <li className="flex items-center gap-1.5">
-          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
-          请优先选择客户端连接
-        </li>
-        <li className="flex items-center gap-1.5">
-          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
-          无对应客户端时，可通过线路表直连支持所有设备
-        </li>
-      </ul>
+        <ul className="flex justify-between gap-4 text-xs text-gray-600 px-2">
+          <li className="flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
+            线路表和账户必须为同一产品才能使用
+          </li>
+          <li className="flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
+            请优先选择客户端连接
+          </li>
+          <li className="flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
+            无对应客户端时，可通过线路表直连支持所有设备
+          </li>
+        </ul>

-      <div className="flex flex-wrap  items-center gap-3">
-        <Button className="px-6 py-1.5 rounded-full text-white bg-linear-to-r from-cyan-400 to-blue-500 shadow-md shadow-blue-200 font-medium">
-          极狐IP
-        </Button>
-        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
-          极光IP
-        </Button>
-        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
-          蘑菇IP
-        </Button>
-        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
-          麒麟IP
-        </Button>
-        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
-          猎豹IP
-        </Button>
-        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
-          水滴独享IP
-        </Button>
-        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
-          火狐静态IP
-        </Button>
-      </div>
+        <div className="flex flex-wrap items-center gap-3">
+          {products.map(p => (
+            <button
+              key={p.id}
+              onClick={() => setProductId(p.id)}
+              className={cn(
+                "px-6 py-1.5 rounded-full text-sm font-medium transition-colors cursor-pointer",
+                p.id === productId
+                  ? "text-white bg-linear-to-r from-cyan-400 to-blue-500 shadow-md shadow-blue-200"
+                  : "text-gray-600 border border-gray-200 hover:border-blue-400 bg-white",
+              )}
+            >
+              {p.name}
+            </button>
+          ))}
+        </div>

-      <div className="flex items-center justify-center gap-4 w-full">
-        <div className="relative w-1/2">
-          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+        <div className="flex items-center justify-center gap-4 w-full">
+          <div className="relative w-1/2">
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+            </div>
+            <input
+              type="text"
+              value={keyword}
+              onChange={e => setKeyword(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === "Enter") handleSearch()
+              }}
+              placeholder="请输入线路搜索信息，如：混拨"
+              className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-cyan-400 text-sm"
+            />
+          </div>
+          <button
+            onClick={handleSearch}
+            className="px-8 py-2 bg-linear-to-r from-cyan-400 to-blue-500 text-white rounded-full text-sm font-medium shadow-md shadow-blue-200 cursor-pointer hover:opacity-90"
+          >
+            搜索当前线路表
+          </button>
+          <button
+            onClick={handleExport}
+            className="flex items-center gap-1.5 px-4 py-2 border border-blue-400 text-blue-500 rounded text-sm bg-white hover:bg-blue-50 transition-colors cursor-pointer"
+          >
            <svg
              className="w-4 h-4"
              fill="none"
@@ -77,270 +301,156 @@ export default function IpLinePage() {
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
              />
            </svg>
+            导出
+          </button>
+        </div>
+
+        <div className="bg-orange-50 border border-orange-100 rounded-lg p-2 flex justify-center items-center gap-8 text-sm font-medium">
+          <div className="flex items-center gap-2 text-orange-500">
+            <span>L2TP密钥：</span>
+            <span className="text-orange-600">1234</span>
+          </div>
+          <div className="flex items-center gap-2 text-orange-500">
+            <span>STTP端口：</span>
+            <span className="text-orange-600">4430</span>
          </div>
-          <input
-            type="text"
-            placeholder="混拨"
-            className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-cyan-400 text-sm"
-          />
        </div>
-        <button className="px-8 py-2 bg-linear-to-r from-cyan-400 to-blue-500 text-white rounded-full text-sm font-medium shadow-md shadow-blue-200">
-          搜索当前线路表
-        </button>
-        <button className="flex items-center gap-1.5 px-4 py-2 border border-blue-400 text-blue-500 rounded text-sm bg-white hover:bg-blue-50 transition-colors">
-          <svg
-            className="w-4 h-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-            />
-          </svg>
-          导出
-        </button>
-      </div>

-      <div className="bg-orange-50 border border-orange-100 rounded-lg p-2 flex justify-center items-center gap-8 text-sm font-medium">
-        <div className="flex items-center gap-2 text-orange-500">
-          <span>L2TP密钥：</span>
-          <span className="text-orange-600">1234</span>
+        <div className="flex items-center gap-6 text-xs text-gray-600 px-1">
+          {searching ? (
+            <div className="flex items-center gap-2">
+              <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
+              <span>
+                搜索结果：
+                <span className="font-bold text-gray-800">{rows.length}条</span>
+              </span>
+            </div>
+          ) : (
+            <>
+              <div className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
+                <span>
+                  实时总线路：
+                  <span className="font-bold text-gray-800">{count}条</span>
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
+                <span>
+                  实时可用线路：
+                  <span className="font-bold text-gray-800">{useCount}条</span>
+                </span>
+              </div>
+            </>
+          )}
+          <div className="flex items-center gap-2">
+            <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
+            <span className="text-gray-400">
+              {currentName}- (每5分钟更新一次,禁止频繁访问！) :{" "}
+            </span>
+          </div>
        </div>
-        <div className="flex items-center gap-2 text-orange-500">
-          <span>STTP端口：</span>
-          <span className="text-orange-600">4430</span>
+
+        <div className="border border-gray-200 rounded overflow-hidden">
+          <table className="w-full text-center text-sm">
+            <thead className="bg-gray-50 border-b border-gray-200 text-gray-600 font-medium">
+              <tr>
+                <th className="py-3 px-4 border-r border-gray-200 w-24">
+                  产品
+                </th>
+                <th className="py-3 px-4 border-r border-gray-200 w-32">
+                  城市
+                </th>
+                <th className="py-3 px-4 border-r border-gray-200 w-48">
+                  运营商
+                </th>
+                <th className="py-3 px-4 border-r border-gray-200">
+                  服务器域名
+                </th>
+                <th className="py-3 px-4 border-r border-gray-200 w-24">
+                  带宽
+                </th>
+                <th className="py-3 px-4 w-24">服务器状态</th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-100">
+              {loading ? (
+                <tr>
+                  <td colSpan={6} className="py-10 text-gray-400">
+                    加载中...
+                  </td>
+                </tr>
+              ) : error && rows.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="py-10 text-gray-400">
+                    加载失败：{error}
+                    <button
+                      onClick={() =>
+                        productId !== null && loadDisplay(productId)
+                      }
+                      className="ml-3 text-blue-500 hover:underline cursor-pointer"
+                    >
+                      重试
+                    </button>
+                  </td>
+                </tr>
+              ) : rows.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="py-10 text-gray-400">
+                    {searching ? "未找到匹配线路" : "暂无线路数据"}
+                  </td>
+                </tr>
+              ) : (
+                displayRows.map((row, index) => (
+                  <tr key={`${row.item.name}-${row.item.nasname}-${index}`}>
+                    {row.nameSpan > 0 && (
+                      <td
+                        rowSpan={row.nameSpan}
+                        className="py-3 px-4 border-r border-gray-200 text-gray-500 align-top"
+                      >
+                        {toText(row.item.name) || "-"}
+                      </td>
+                    )}
+                    {row.citySpan > 0 && (
+                      <td
+                        rowSpan={row.citySpan}
+                        className="py-3 px-4 border-r border-gray-200 text-green-600 font-medium align-top"
+                      >
+                        {toText(row.item.city) || "-"}
+                      </td>
+                    )}
+                    <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
+                      {toText(row.item.supply) || "-"}
+                    </td>
+                    <td className="py-3 px-4 border-r border-gray-200">
+                      <span>{toText(row.item.nasname) || "-"}</span>
+                      {toText(row.item.nasname) && (
+                        <button
+                          onClick={() => handleCopy(toText(row.item.nasname))}
+                          className="ml-2 text-green-500 cursor-pointer hover:text-green-700"
+                        >
+                          复制
+                        </button>
+                      )}
+                    </td>
+                    <td className="py-3 px-4 border-r border-gray-200">
+                      {toText(row.item.daikuan) || "-"}
+                    </td>
+                    <td
+                      className={cn("py-3 px-4", onlineClass(row.item.online))}
+                    >
+                      {toText(row.item.online) || "-"}
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
        </div>
-      </div>
-
-      <div className="flex items-center gap-6 text-xs text-gray-600 px-1">
-        <div className="flex items-center gap-2">
-          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
-          <span>
-            实时总线路：<span className="font-bold text-gray-800">486条</span>
-          </span>
-        </div>
-        <div className="flex items-center gap-2">
-          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
-          <span>
-            实时可用线路：<span className="font-bold text-gray-800">486条</span>
-          </span>
-        </div>
-        <div className="flex items-center gap-2">
-          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
-          <span className="text-gray-400">
-            极狐IP- (每5分钟更新一次,禁止频繁访问！) :{" "}
-          </span>
-        </div>
-      </div>
-
-      <div className="border border-gray-200 rounded overflow-hidden">
-        <table className="w-full text-center text-sm">
-          <thead className="bg-gray-50 border-b border-gray-200 text-gray-600 font-medium">
-            <tr>
-              <th className="py-3 px-4 border-r border-gray-200 w-24">产品</th>
-              <th className="py-3 px-4 border-r border-gray-200 w-32">城市</th>
-              <th className="py-3 px-4 border-r border-gray-200 w-48">
-                运营商
-              </th>
-              <th className="py-3 px-4 border-r border-gray-200">服务器域名</th>
-              <th className="py-3 px-4 border-r border-gray-200 w-20">IP量</th>
-              <th className="py-3 px-4 border-r border-gray-200 w-24">
-                实时带宽
-              </th>
-              <th className="py-3 px-4 border-r border-gray-200 w-24">
-                维护状态
-              </th>
-              <th className="py-3 px-4 w-24">负载状态</th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-gray-100">
-            <tr>
-              <td
-                className="py-3 px-4 border-r border-gray-200 text-gray-500"
-                rowSpan={10}
-              >
-                极狐
-              </td>
-
-              <td
-                className="py-3 px-4 border-r border-gray-200 text-green-600 font-medium"
-                rowSpan={7}
-              >
-                全国
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
-                电信/联通/移动
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">
-                <span>hb1.jhip.net</span>
-                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
-                  复制
-                </span>
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">100M</td>
-              <td className="py-3 px-4 border-r border-gray-200">正常</td>
-              <td className="py-3 px-4 border-r border-gray-200"></td>
-              <td className="py-3 px-4"></td>
-            </tr>
-            <tr>
-              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
-                电信/联通/移动
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">
-                <span>hb2.jhip.net</span>
-                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
-                  复制
-                </span>
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">100M</td>
-              <td className="py-3 px-4 border-r border-gray-200">正常</td>
-              <td className="py-3 px-4 border-r border-gray-200"></td>
-              <td className="py-3 px-4"></td>
-            </tr>
-            <tr>
-              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
-                电信/联通/移动
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">
-                <span>hb3.jhip.net</span>
-                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
-                  复制
-                </span>
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">100M</td>
-              <td className="py-3 px-4 border-r border-gray-200">正常</td>
-              <td className="py-3 px-4 border-r border-gray-200"></td>
-              <td className="py-3 px-4"></td>
-            </tr>
-            <tr>
-              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
-                电信/联通/移动
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">
-                <span>hb4.jhip.net</span>
-                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
-                  复制
-                </span>
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">100M</td>
-              <td className="py-3 px-4 border-r border-gray-200">正常</td>
-              <td className="py-3 px-4 border-r border-gray-200"></td>
-              <td className="py-3 px-4"></td>
-            </tr>
-            <tr>
-              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
-                电信/联通/移动
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">
-                <span>hb5.jhip.net</span>
-                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
-                  复制
-                </span>
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">100M</td>
-              <td className="py-3 px-4 border-r border-gray-200">正常</td>
-              <td className="py-3 px-4 border-r border-gray-200"></td>
-              <td className="py-3 px-4"></td>
-            </tr>
-            <tr>
-              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
-                电信/联通/移动
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">
-                <span>hbdx2.jhip.net</span>
-                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
-                  复制
-                </span>
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">100M</td>
-              <td className="py-3 px-4 border-r border-gray-200">正常</td>
-              <td className="py-3 px-4 border-r border-gray-200"></td>
-              <td className="py-3 px-4"></td>
-            </tr>
-            <tr>
-              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
-                电信/联通/移动
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">
-                <span>hbdx1.jhip.net</span>
-                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
-                  复制
-                </span>
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">100M</td>
-              <td className="py-3 px-4 border-r border-gray-200">正常</td>
-              <td className="py-3 px-4 border-r border-gray-200"></td>
-              <td className="py-3 px-4"></td>
-            </tr>
-
-            <tr>
-              <td
-                className="py-3 px-4 border-r border-gray-200 text-green-600 font-medium"
-                rowSpan={2}
-              >
-                北京
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
-                电信/联通/移动
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">
-                <span>bj1.jhip.net</span>
-                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
-                  复制
-                </span>
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">100M</td>
-              <td className="py-3 px-4 border-r border-gray-200">正常</td>
-              <td className="py-3 px-4 border-r border-gray-200"></td>
-              <td className="py-3 px-4"></td>
-            </tr>
-            <tr>
-              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
-                电信/联通/移动
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">
-                <span>bj2.jhip.net</span>
-                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
-                  复制
-                </span>
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">100M</td>
-              <td className="py-3 px-4 border-r border-gray-200">正常</td>
-              <td className="py-3 px-4 border-r border-gray-200"></td>
-              <td className="py-3 px-4"></td>
-            </tr>
-
-            <tr>
-              <td
-                className="py-3 px-4 border-r border-gray-200 text-green-600 font-medium"
-                rowSpan={1}
-              >
-                上海
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
-                电信/联通/移动
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">
-                <span>sh1.jhip.net</span>
-                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
-                  复制
-                </span>
-              </td>
-              <td className="py-3 px-4 border-r border-gray-200">100M</td>
-              <td className="py-3 px-4 border-r border-gray-200">正常</td>
-              <td className="py-3 px-4 border-r border-gray-200"></td>
-              <td className="py-3 px-4"></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </Wrap>
+      </Wrap>
+    </>
  )
 }
--- a/src/home/login/index.tsx
+++ b/src/home/login/index.tsx
@@ -2,7 +2,7 @@ import { EyeIcon, EyeOffIcon } from "lucide-react"
 import { useEffect, useState } from "react"
 import { Link, useLocation, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
-import { login } from "@/api/auth"
+import { apiLogin, apiRegister } from "@/api/auth"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -87,15 +87,17 @@ function LoginForm() {
    }
    setSubmitting(true)
    try {
-      const resp = await login({
-        username: account,
+      const resp = await apiLogin({
+        logincode: account,
        password,
-        remember,
-        mode: "password",
      })
+      console.log(resp, "resp")
+
      if (resp.success) {
-        toast.success("登录成功")
-        navigate("/admin")
+        toast.success("登录成功", {
+          description: "欢迎回来！",
+        })
+        navigate("/")
      } else {
        toast.error(resp.message || "登录失败")
      }
@@ -110,12 +112,12 @@ function LoginForm() {
    <form className="space-y-4" onSubmit={handleSubmit}>
      <div className="space-y-1">
        <label htmlFor="account" className="text-sm font-medium text-gray-700">
-          账号
+          会员号
        </label>
        <Input
          id="account"
          type="text"
-          placeholder="请输入淘宝名/会员手机号码"
+          placeholder="请输入会员号"
          className="w-full"
          value={account}
          onChange={e => setAccount(e.target.value)}
@@ -129,7 +131,7 @@ function LoginForm() {
          <Input
            id="password"
            type={showPassword ? "text" : "password"}
-            placeholder="请输入密码（8-12位数字或字母组合）"
+            placeholder="请输入密码"
            className="w-full pr-10"
            value={password}
            onChange={e => setPassword(e.target.value)}
@@ -182,7 +184,6 @@ function LoginForm() {
 }

 function RegisterForm({ onSwitchToLogin }: { onSwitchToLogin: () => void }) {
-  const navigate = useNavigate()
  const [phone, setPhone] = useState("")
  const [smsCode, setSmsCode] = useState("")
  const [smsCountdown, setSmsCountdown] = useState(0)
@@ -237,12 +238,12 @@ function RegisterForm({ onSwitchToLogin }: { onSwitchToLogin: () => void }) {
      toast.error("请输入正确的手机号")
      return
    }
-    if (smsCode.length < 4 || smsCode.length > 6) {
+    if (smsCode.length < 3 || smsCode.length > 6) {
      toast.error("请输入短信验证码")
      return
    }
-    if (!/^[a-zA-Z0-9]{8,12}$/.test(newPassword)) {
-      toast.error("密码为8-12位数字或字母组合")
+    if (!newPassword.trim()) {
+      toast.error("请输入密码")
      return
    }
    if (!agreed) {
@@ -252,19 +253,17 @@ function RegisterForm({ onSwitchToLogin }: { onSwitchToLogin: () => void }) {

    setSubmitting(true)
    try {
-      const resp = await login({
-        username: phone,
+      const resp = await apiRegister({
+        phone,
        password: newPassword,
        code: smsCode,
-        remember: false,
-        mode: "phone_code",
        wx,
        qq,
      })

      if (resp.success) {
-        toast.success("注册成功")
-        navigate("/admin")
+        toast.success("注册成功，请登录")
+        onSwitchToLogin()
      } else {
        toast.error(resp.message || "注册失败")
      }
@@ -334,7 +333,7 @@ function RegisterForm({ onSwitchToLogin }: { onSwitchToLogin: () => void }) {
          <Input
            id="reg-password"
            type={showPassword ? "text" : "password"}
-            placeholder="请输入8-12位数字或字母组合"
+            placeholder="请输入密码"
            className="w-full pr-10"
            value={newPassword}
            onChange={e => setNewPassword(e.target.value)}
--- a/src/home/product/buy.tsx
+++ b/src/home/product/buy.tsx
@@ -0,0 +1,935 @@
+import { useCallback, useEffect, useRef, 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 { 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"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import Wrap from "@/components/wrap"
+import type { Product } from "@/lib/models/product"
+import { cn } from "@/lib/utils"
+
+// ============ 工具函数 ============
+function randomChars(length: number): string {
+  const chars = "abcdefghijklmnopqrstuvwxyz"
+  let result = ""
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return result
+}
+
+function randomDigits(length: number): string {
+  let result = ""
+  for (let i = 0; i < length; i++) {
+    result += Math.floor(Math.random() * 10).toString()
+  }
+  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 组件
+function ModeTabs({
+  mode,
+  onModeChange,
+}: {
+  mode: "single" | "batch"
+  onModeChange: (mode: "single" | "batch") => void
+}) {
+  return (
+    <div className="flex bg-gray-50 rounded-xl p-1 mb-6">
+      <button
+        className={cn(
+          "flex-1 py-2.5 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",
+        )}
+        onClick={() => onModeChange("single")}
+      >
+        单个注册
+      </button>
+      <button
+        className={cn(
+          "flex-1 py-2.5 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",
+        )}
+        onClick={() => onModeChange("batch")}
+      >
+        批量注册
+      </button>
+    </div>
+  )
+}
+
+// 连接数选择器组件
+function ConnectCountSelector({
+  value,
+  onChange,
+  label,
+  hint,
+}: {
+  value: number
+  onChange: (value: number) => void
+  label: string
+  hint?: string
+}) {
+  return (
+    <div>
+      <Label className="text-sm font-medium text-gray-700 mb-2 block">
+        {label}
+      </Label>
+      <div className="flex items-center gap-4">
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-10 w-10 rounded-full"
+          disabled={value <= 1}
+          onClick={() => onChange(Math.max(1, value - 1))}
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M20 12H4"
+            />
+          </svg>
+        </Button>
+        <span className="w-12 text-center text-xl font-semibold text-gray-700">
+          {value}
+        </span>
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-10 w-10 rounded-full"
+          onClick={() => onChange(value + 1)}
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 4v16m8-8H4"
+            />
+          </svg>
+        </Button>
+        {hint && <span className="text-xs text-gray-400 ml-1">{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">
+        选择优惠券
+      </Label>
+      <Select>
+        <SelectTrigger className="h-12 rounded-xl">
+          <SelectValue placeholder="请选择优惠券" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="none">暂无可用优惠券</SelectItem>
+        </SelectContent>
+      </Select>
+    </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
+}) {
+  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">
+        <p>
+          批量注册的账号会使用【账号前缀】+【开始数】+【个数】顺序进行注册，
+        </p>
+        <p className="mt-1">
+          如：注册账号前缀为【user】开始数为【2】个数为【10】，则注册的账号为：
+          <span className="text-blue-600 font-medium">
+            {" "}
+            user2，user3，user4，....user11
+          </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 [batchStart, setBatchStart] = useState(1)
+  const [batchCount, setBatchCount] = useState(1)
+  const [batchPwd, setBatchPwd] = useState("")
+  const [batchConnectCount, setBatchConnectCount] = useState(1)
+  const [batchPayType, setBatchPayType] = useState("100")
+
+  // 初始化
+  useEffect(() => {
+    if (!product) {
+      navigate("/product", { replace: true })
+      return
+    }
+    const acct = randomChars(2) + randomDigits(4)
+    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
+
+  const batchPreview = (() => {
+    if (!batchAccount) return ""
+    const end = batchStart + batchCount - 1
+    if (batchCount <= 3) {
+      const items: string[] = []
+      for (let i = batchStart; i <= end; i++) {
+        items.push(`${batchAccount}${i}`)
+      }
+      return items.join(", ")
+    }
+    return `${batchAccount}${batchStart}, ${batchAccount}${batchStart + 1}, ${batchAccount}${batchStart + 2}...${batchAccount}${end}`
+  })()
+
+  // 支付处理函数
+  const handleSinglePay = async () => {
+    if (!account.trim() || !pwd.trim()) {
+      toast.error("账号和密码不能为空")
+      return
+    }
+    setSubmitting(true)
+    try {
+      const oPayType = isTest ? 0 : Number(payType)
+      const useBalance = oPayType === 1 ? 1 : 0
+      const payChannel = oPayType === 70 ? 30 : 50
+
+      const result = await createOrder({
+        PackageId: packageId,
+        OrderType: 1,
+        Account: account.trim(),
+        Pwd: pwd.trim(),
+        ConnectCount: connectCount,
+        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 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
+
+  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>
+      </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>
+  )
+}
--- a/src/home/product/http.tsx
+++ 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 (
+    <>
+      <Toaster position="top-center" richColors />
+      <Wrap className="bg-white">
+        <section className="py-20">
+          <div className="text-center mb-6">
+            <h2 className="text-2xl font-bold text-gray-800">
+              <span className="block">
+                套餐多元，自主选择，城市覆盖广性价比高，服务态度都说好
+              </span>
+              <span className="block text-xl font-normal text-muted-foreground mt-2">
+                预存享超值优惠 海量IP池随心用
+              </span>
+            </h2>
+          </div>
+
+          <div className="max-w-6xl mx-auto px-4">
+            <ul className="flex gap-2 justify-center flex-wrap mb-6">
+              {TABS.map(tab => (
+                <li key={tab.id}>
+                  <button
+                    onClick={() => setActiveTab(tab.id)}
+                    className={cn(
+                      "px-6 py-2.5 rounded-md text-sm font-bold transition-all cursor-pointer",
+                      activeTab === tab.id
+                        ? "bg-linear-to-r from-blue-500 to-cyan-400 text-white shadow-sm"
+                        : "bg-gray-100 text-gray-600 hover:bg-gray-200",
+                    )}
+                  >
+                    {tab.label}
+                  </button>
+                </li>
+              ))}
+            </ul>
+
+            {activeTab === "prepaid" && (
+              <div>
+                <h3 className="text-center text-lg font-bold text-gray-700 mb-2">
+                  充的越多送的越多
+                </h3>
+                <p className="text-center mb-8">
+                  <a
+                    href="https://lanhuip.com"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-blue-500 hover:text-blue-600 underline"
+                  >
+                    点击前往购买新http/socks5产品、IP池更大、网速更快
+                  </a>
+                </p>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6 mt-8">
+                  <PrepaidCardCustom
+                    amount={customAmount}
+                    onAmountChange={setCustomAmount}
+                    onPay={openPayDialog}
+                  />
+                  {PREPAID_PLANS.map(plan => (
+                    <PrepaidCard
+                      key={plan.amount}
+                      plan={plan}
+                      onPay={openPayDialog}
+                    />
+                  ))}
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  {PREPAID_PLANS_LARGE.map(plan => (
+                    <PrepaidCardLarge
+                      key={plan.amount}
+                      plan={plan}
+                      onPay={openPayDialog}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {activeTab === "unlimited" && (
+              <div className="max-w-3xl mx-auto flex flex-col gap-3">
+                <p className="text-center text-sm  mb-4">
+                  适用于每天需要大量高匿IP的用户使用，支持HTTP(S)、S5协议，IP可通过API获得集成在程序或软件中使用
+                </p>
+                <p className="text-center">
+                  <a
+                    href="https://lanhuip.com"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-blue-500 hover:text-blue-600 underline"
+                  >
+                    点击前往购买新http/socks5产品、IP池更大、网速更快
+                  </a>
+                </p>
+
+                <OptionBox label="有效时长">
+                  <div className="flex flex-wrap gap-3">
+                    {DURATION_OPTIONS.map(opt => (
+                      <OptionBtn
+                        key={opt.value}
+                        active={duration === opt.value}
+                        onClick={() => setDuration(opt.value)}
+                      >
+                        {opt.label}
+                      </OptionBtn>
+                    ))}
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="套餐周期">
+                  <div className="flex flex-wrap gap-3">
+                    {PERIOD_OPTIONS.map(opt => (
+                      <OptionBtn
+                        key={opt.value}
+                        active={period === opt.value}
+                        onClick={() => setPeriod(opt.value)}
+                      >
+                        {opt.label}
+                      </OptionBtn>
+                    ))}
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="购买时长">
+                  <Stepper
+                    value={periodCount}
+                    unit="小时"
+                    onChange={setPeriodCount}
+                  />
+                </OptionBox>
+
+                <OptionBox label="白名单数量">
+                  <div className="flex items-center gap-4 flex-wrap">
+                    <Stepper
+                      value={whitelistCount}
+                      unit=""
+                      onChange={v => setWhitelistCount(v)}
+                      min={1}
+                      max={1000}
+                    />
+                    <span className="text-sm text-muted-foreground">
+                      您的白名单上限{whitelistCount}个，
+                      {whitelistCount === 1 ? (
+                        <span className="text-red-500">
+                          价格<span className="font-medium">无折扣</span>
+                        </span>
+                      ) : whitelistCount <= 5 ? (
+                        <span className="text-red-500 font-medium">
+                          {11 - whitelistCount}折
+                        </span>
+                      ) : (
+                        <span className="text-red-500 font-medium">6折</span>
+                      )}
+                    </span>
+                  </div>
+                </OptionBox>
+
+                <PriceBar price={totalPrice} onPay={openPayDialog} />
+              </div>
+            )}
+
+            {activeTab === "daily" && (
+              <div className="max-w-3xl mx-auto flex flex-col gap-3">
+                <p className="text-center text-sm">
+                  适用于每天需要大量高匿IP的用户使用，支持HTTP(S)、S5协议，IP可通过API获得集成在程序或软件中使用
+                </p>
+                <p className="text-center">
+                  <a
+                    href="https://lanhuip.com"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-blue-500 hover:text-blue-600 underline"
+                  >
+                    点击前往购买新http/socks5产品、IP池更大、网速更快
+                  </a>
+                </p>
+
+                <OptionBox label="选择每日可使用IP数">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                    {IP_AMOUNT_OPTIONS.map(opt => (
+                      <OptionBtn
+                        key={opt.value}
+                        active={ipAmount === opt.value}
+                        onClick={() => setIpAmount(opt.value)}
+                        className="justify-center"
+                      >
+                        {opt.label}
+                      </OptionBtn>
+                    ))}
+                  </div>
+                  <div className="mt-4 flex items-center gap-3 flex-wrap">
+                    <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border bg-white text-sm">
+                      每日最多使用
+                      <Input
+                        type="number"
+                        value={customIpAmount}
+                        onChange={e => setCustomIpAmount(e.target.value)}
+                        placeholder="IP数"
+                        className="w-28 h-7 inline-block text-center"
+                      />
+                      个IP
+                    </span>
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="有效时长">
+                  <div className="flex flex-wrap gap-3">
+                    {DURATION_OPTIONS.map(opt => (
+                      <OptionBtn
+                        key={opt.value}
+                        active={duration === opt.value}
+                        onClick={() => setDuration(opt.value)}
+                      >
+                        {opt.label}
+                      </OptionBtn>
+                    ))}
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="套餐周期">
+                  <div className="flex flex-wrap gap-3">
+                    {PERIOD_OPTIONS.slice(0, 3).map(opt => (
+                      <OptionBtn
+                        key={opt.value}
+                        active={period === opt.value}
+                        onClick={() => setPeriod(opt.value)}
+                      >
+                        {opt.label}
+                      </OptionBtn>
+                    ))}
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="购买时长">
+                  <Stepper
+                    value={periodCount}
+                    unit="天"
+                    onChange={setPeriodCount}
+                  />
+                </OptionBox>
+
+                <PriceBar price={totalPrice} onPay={openPayDialog} />
+              </div>
+            )}
+
+            {activeTab === "volume" && (
+              <div className="max-w-3xl mx-auto">
+                <h3 className="text-center text-lg font-bold text-gray-700">
+                  提取免费，使用才扣费。节约成本，按使用次数扣费
+                </h3>
+                <p className="text-center p-3">
+                  <a
+                    href="https://lanhuip.com"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-blue-500 hover:text-blue-600 underline"
+                  >
+                    点击前往购买新http/socks5产品、IP池更大、网速更快
+                  </a>
+                </p>
+
+                <OptionBox label="充值金额">
+                  <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+                    {VOLUME_AMOUNTS.map(amount => (
+                      <OptionBtn
+                        key={amount}
+                        active={volumeAmount === amount}
+                        onClick={() => setVolumeAmount(amount)}
+                        className="justify-center"
+                      >
+                        {amount}元
+                      </OptionBtn>
+                    ))}
+                  </div>
+                  <div className="mt-4 flex items-center gap-3 flex-wrap">
+                    <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border bg-white text-sm">
+                      自定义
+                      <Input
+                        type="number"
+                        value={customAmount}
+                        onChange={e => setCustomAmount(e.target.value)}
+                        placeholder="金额"
+                        className="w-28 h-7 inline-block text-center"
+                      />
+                      元
+                    </span>
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="有效时长">
+                  <div className="flex flex-wrap gap-3">
+                    {DURATION_OPTIONS.map(opt => (
+                      <OptionBtn
+                        key={opt.value}
+                        active={duration === opt.value}
+                        onClick={() => setDuration(opt.value)}
+                      >
+                        {opt.label}
+                      </OptionBtn>
+                    ))}
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="IP数量">
+                  <div className="text-sm text-muted-foreground">
+                    可使用{" "}
+                    <span className="text-xl font-bold text-blue-500">
+                      {Math.floor(
+                        (volumeAmount || customAmount
+                          ? Number(customAmount || volumeAmount)
+                          : 0) * 100,
+                      )}
+                    </span>{" "}
+                    个IP，有效期1年，提取免费，使用才扣费。
+                  </div>
+                </OptionBox>
+
+                <PriceBar price={totalPrice} onPay={openPayDialog} />
+              </div>
+            )}
+
+            {activeTab === "game" && (
+              <div className="max-w-3xl mx-auto space-y-5">
+                <h3 className="text-center text-lg font-bold text-gray-700">
+                  高匿 · 高质 · 长效 · 稳定 · HTTP · SOCKS5
+                </h3>
+
+                <OptionBox label="类型">
+                  <div className="flex flex-wrap gap-3">
+                    <OptionBtn active>国内游戏</OptionBtn>
+                    <OptionBtn>国际游戏</OptionBtn>
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="模式">
+                  <div className="flex flex-wrap gap-3">
+                    <OptionBtn active>共享线路</OptionBtn>
+                    <OptionBtn>独享游戏</OptionBtn>
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="运营商选择">
+                  <div className="flex flex-wrap gap-3">
+                    <OptionBtn active>普通线路</OptionBtn>
+                    <OptionBtn>电信</OptionBtn>
+                    <OptionBtn>移动</OptionBtn>
+                    <OptionBtn>联通</OptionBtn>
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="带宽">
+                  <div className="flex flex-wrap gap-3">
+                    {BANDWIDTH_OPTIONS.map(opt => (
+                      <OptionBtn
+                        key={opt.value}
+                        active={bandwidth === opt.value}
+                        onClick={() => setBandwidth(opt.value)}
+                      >
+                        {opt.label}
+                      </OptionBtn>
+                    ))}
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="套餐周期">
+                  <div className="flex flex-wrap gap-3">
+                    {PERIOD_OPTIONS.map(opt => (
+                      <OptionBtn
+                        key={opt.value}
+                        active={period === opt.value}
+                        onClick={() => setPeriod(opt.value)}
+                      >
+                        {opt.label}
+                      </OptionBtn>
+                    ))}
+                  </div>
+                </OptionBox>
+
+                <OptionBox label="IP数量">
+                  <Stepper
+                    value={periodCount}
+                    unit="个"
+                    onChange={setPeriodCount}
+                  />
+                </OptionBox>
+
+                <OptionBox label="购买时长">
+                  <Stepper
+                    value={whitelistCount}
+                    unit="天"
+                    onChange={setWhitelistCount}
+                  />
+                </OptionBox>
+
+                <PriceBar price={totalPrice} onPay={openPayDialog} />
+              </div>
+            )}
+          </div>
+        </section>
+
+        {/* 支付弹窗 */}
+        <Dialog open={payDialogOpen} onOpenChange={setPayDialogOpen}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle className="text-center">
+                待支付：¥{totalPrice.toFixed(2)}元
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="py-4">
+              {isRecharge ? (
+                <>
+                  <p className="text-sm text-gray-600 mb-4">选择支付方式：</p>
+                  <RadioGroup
+                    value={payMethod}
+                    onValueChange={setPayMethod}
+                    className="flex justify-center gap-8 py-4"
+                  >
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="2" id="alipay" />
+                      <Label
+                        htmlFor="alipay"
+                        className="flex items-center gap-2 cursor-pointer"
+                      >
+                        <img src={alipay} alt="支付宝" className="w-6 h-6" />
+                        支付宝支付
+                      </Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="3" id="wechat" />
+                      <Label
+                        htmlFor="wechat"
+                        className="flex items-center gap-2 cursor-pointer"
+                      >
+                        <img src={wechat} alt="微信" className="w-6 h-6" />
+                        微信支付
+                      </Label>
+                    </div>
+                  </RadioGroup>
+                </>
+              ) : (
+                <div className="text-center py-6">
+                  <p className="text-gray-600">
+                    个人剩余H币：{}
+                    <a href="/" className="text-blue-500 hover:underline ml-2">
+                      去充值
+                    </a>
+                  </p>
+                  <p className="text-gray-600 mt-2">
+                    本次支付H币：{totalPrice.toFixed(2)}
+                  </p>
+                </div>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button
+                onClick={handlePay}
+                disabled={isLoading}
+                className="w-full bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 py-3"
+              >
+                {isLoading ? "支付中..." : "立即支付"}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </Wrap>
+    </>
+  )
+}
+
+function PrepaidCardCustom({
+  amount,
+  onAmountChange,
+  onPay,
+}: {
+  amount: string
+  onAmountChange: (v: string) => void
+  onPay: () => void
+}) {
+  return (
+    <Card className="relative text-center border-0 shadow-md overflow-visible">
+      <CardContent className="pt-6 space-y-4">
+        <div className="text-3xl font-bold">
+          ￥
+          <Input
+            type="number"
+            value={amount || "1"}
+            onChange={e => 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"
+          />
+        </div>
+        <div className="py-3 px-4 bg-blue-50 rounded-lg">
+          <span className="text-blue-600 font-bold">
+            实到{amount || "1"}H币
+          </span>
+        </div>
+        <ul className="space-y-1 text-sm text-muted-foreground">
+          <li>国内长效月卡低至9.9元</li>
+          <li>国际长效月卡低至10元</li>
+          <li>多充多送更超值</li>
+          <li>省时省力更方便</li>
+          <li>支持购买任意套餐</li>
+        </ul>
+        <Button
+          onClick={onPay}
+          className="w-full rounded-md bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90"
+        >
+          自定义充值
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+function PrepaidCard({
+  plan,
+  onPay,
+}: {
+  plan: { amount: number; bonus: string; total: number; tag: string }
+  onPay: () => void
+}) {
+  return (
+    <Card className="relative text-center border-0 shadow-md overflow-visible">
+      <Badge className="absolute -top-3 right-4 bg-yellow-400 text-white hover:bg-yellow-400 border-0 text-xs px-3 py-0.5 z-10">
+        {plan.tag}
+      </Badge>
+      <CardContent className="pt-8 space-y-4">
+        <div className="text-3xl font-bold">￥{plan.amount}</div>
+        <div className="py-3 px-4 bg-blue-50 rounded-lg">
+          <span className="text-blue-600 font-bold">实到{plan.total}H币</span>
+        </div>
+        <ul className="space-y-1 text-sm text-muted-foreground">
+          <li>国内长效月卡低至9.9元</li>
+          <li>国际长效月卡低至10元</li>
+          <li>多充多送更超值</li>
+          <li>省时省力更方便</li>
+          <li>支持购买任意套餐</li>
+        </ul>
+        <Button
+          onClick={onPay}
+          className="w-full rounded-md bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90"
+        >
+          立即充值
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+function PrepaidCardLarge({
+  plan,
+  onPay,
+}: {
+  plan: { amount: number; bonus: string; total: number; tag: string }
+  onPay: () => void
+}) {
+  return (
+    <Card className="relative text-center border-0 shadow-md bg-white overflow-visible">
+      <Badge className="absolute -top-3 right-4 bg-yellow-400 text-white hover:bg-yellow-400 border-0 text-xs px-3 py-0.5 z-10">
+        {plan.tag}
+      </Badge>
+      <CardContent className="pt-8 pb-6 flex flex-col items-center gap-3">
+        <div className="text-3xl font-bold">￥{plan.amount}</div>
+        <p className="text-sm text-muted-foreground">实到{plan.total}H币</p>
+        <Button
+          onClick={onPay}
+          className="rounded-md bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 px-10"
+        >
+          立即充值
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+function OptionBox({
+  label,
+  children,
+}: {
+  label: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+      <div className="p-5">
+        <h5 className="text-sm font-medium text-gray-700 mb-4">{label}</h5>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function OptionBtn({
+  active = false,
+  onClick,
+  className,
+  children,
+}: {
+  active?: boolean
+  onClick?: () => void
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <Button
+      variant={active ? "default" : "outline"}
+      size="sm"
+      onClick={onClick}
+      className={cn(
+        "rounded-md text-sm font-medium transition-all",
+        active &&
+          "bg-linear-to-r from-blue-500 to-cyan-400 text-white border-transparent shadow-sm hover:opacity-90",
+        !active &&
+          "border-gray-200 bg-white text-gray-600 hover:border-blue-300 hover:text-blue-500",
+        className,
+      )}
+    >
+      {children}
+    </Button>
+  )
+}
+
+function Stepper({
+  value,
+  unit,
+  onChange,
+  min = 1,
+  max,
+}: {
+  value: number
+  unit: string
+  onChange: (v: number) => void
+  min?: number
+  max?: number
+}) {
+  return (
+    <span className="inline-flex items-center rounded-md border overflow-hidden">
+      <button
+        onClick={() => onChange(Math.max(min, value - 1))}
+        disabled={value <= min}
+        className="px-3 py-2 bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 disabled:opacity-40 transition-opacity cursor-pointer"
+      >
+        -
+      </button>
+      <span className="px-5 py-2 text-sm font-medium tabular-nums bg-white min-w-20 text-center">
+        {value}
+        {unit}
+      </span>
+      <button
+        onClick={() => onChange(max ? Math.min(max, value + 1) : value + 1)}
+        disabled={max !== undefined && value >= max}
+        className="px-3 py-2 bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 disabled:opacity-40 transition-opacity cursor-pointer"
+      >
+        +
+      </button>
+    </span>
+  )
+}
+
+function PriceBar({ price, onPay }: { price: number; onPay: () => void }) {
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+      <div className="p-5 flex items-center justify-between gap-4 flex-wrap">
+        <span className="text-sm font-medium text-gray-700">
+          价格：<span className="text-lg font-bold">¥{price.toFixed(2)}</span>
+        </span>
+        <Button
+          onClick={onPay}
+          size="lg"
+          className="rounded-md bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90"
+        >
+          实付 ¥{price.toFixed(2)}
+        </Button>
+      </div>
+    </div>
+  )
+}
--- a/src/home/product/index.tsx
+++ b/src/home/product/index.tsx
@@ -1,7 +1,9 @@
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useSearchParams } from "react-router-dom"
+import { fetchProducts } from "@/api/product"
 import Wrap from "@/components/wrap"
-import { PRODUCT_DATA } from "@/lib/models/product"
+import type { Tab } from "@/lib/models/product"
+import { transformToTabs } from "@/lib/models/product"
 import { cn } from "@/lib/utils"
 import ProductGrid from "./productGrid"
 import ProductSidebar from "./productSidebar"
@@ -11,52 +13,100 @@ import PurchaseInfo from "./purchaseInfo"
 const TAB_ALIAS: Record<string, string> = {
  short: "dynamic",
  long: "dynamic",
-  global: "dynamic",
+  http: "http",
  tunnel: "dynamic",
  exclusive: "static",
 }

 export default function ProductPage() {
  const [searchParams, setSearchParams] = useSearchParams()
-  const [activeVersionId, setActiveVersionId] = useState<string>("v1")
+  const [tabs, setTabs] = useState<Tab[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const [activeBrandId, setActiveBrandId] = useState("")
+  const [selectedVersionId, setSelectedVersionId] = useState("")
+  const initializedRef = useRef(false)
+
+  useEffect(() => {
+    fetchProducts().then(result => {
+      if (result.success) {
+        const newTabs = transformToTabs(result.data)
+        setTabs(newTabs)
+        if (!initializedRef.current && newTabs[0]?.brands[0]) {
+          setActiveBrandId(newTabs[0].brands[0].id)
+          initializedRef.current = true
+        }
+      } else {
+        setError(result.message)
+      }
+      setLoading(false)
+    })
+  }, [])

  const urlTab = searchParams.get("tab") || "dynamic"
  const activeTabId = TAB_ALIAS[urlTab] || urlTab
-  const activeBrandId = searchParams.get("brand") || ""

-  const currentTab =
-    PRODUCT_DATA.find(t => t.id === activeTabId) || PRODUCT_DATA[0]
+  const currentTab = tabs.find(t => t.id === activeTabId) || tabs[0]
  const currentBrand =
-    currentTab.brands.find(b => b.id === activeBrandId) || currentTab.brands[0]
+    currentTab?.brands.find(b => b.id === activeBrandId) ||
+    currentTab?.brands[0]
+
+  const effectiveVersionId =
+    selectedVersionId || currentBrand?.versions?.[0]?.id || ""

  const handleTabChange = (tabId: string) => {
-    const targetTab = PRODUCT_DATA.find(t => t.id === tabId)
+    setSearchParams({ tab: tabId })
+    const targetTab = tabs.find(t => t.id === tabId)
    const firstBrand = targetTab?.brands[0]
-    setSearchParams({ tab: tabId, brand: firstBrand?.id || "" })
-    setActiveVersionId("v1")
+    setActiveBrandId(firstBrand?.id || "")
+    setSelectedVersionId("")
  }

  const handleBrandSelect = (brandId: string) => {
-    setSearchParams({ tab: activeTabId, brand: brandId })
-    setActiveVersionId("v1")
+    setActiveBrandId(brandId)
+    setSelectedVersionId("")
  }

-  const getDisplayProducts = () => {
+  const displayProducts = (() => {
    if (!currentBrand) return []
-
    if (currentBrand.versions && currentBrand.versions.length > 0) {
-      return currentBrand.products.filter(p => p.version === activeVersionId)
+      return currentBrand.products.filter(p => p.version === effectiveVersionId)
    }
    return currentBrand.products
+  })()
+
+  const isPurchaseInfo = currentBrand?.id === "info"
+
+  if (loading) {
+    return (
+      <Wrap className="flex items-center justify-center pt-30 bg-white min-h-96">
+        <div className="text-gray-400">加载中...</div>
+      </Wrap>
+    )
+  }
+
+  if (error) {
+    return (
+      <Wrap className="flex items-center justify-center pt-30 bg-white min-h-96">
+        <div className="text-red-400">加载失败：{error}</div>
+      </Wrap>
+    )
+  }
+
+  if (tabs.length === 0) {
+    return (
+      <Wrap className="flex items-center justify-center pt-30 bg-white min-h-96">
+        <div className="text-gray-400">暂无产品数据</div>
+      </Wrap>
+    )
  }

-  const displayProducts = getDisplayProducts()
-  const isPurchaseInfo = currentBrand?.id === "info"
  return (
    <Wrap className="flex flex-col gap-16 pt-30 bg-white">
      <div className="flex flex-col">
        <ProductTabs
-          tabs={PRODUCT_DATA}
+          tabs={tabs}
          activeId={activeTabId}
          onTabChange={handleTabChange}
        />
@@ -73,7 +123,6 @@ export default function ProductPage() {
          <div className="flex-1 flex flex-col">
            {!isPurchaseInfo ? (
              <>
-                {" "}
                <div className="grid grid-cols-2 pl-3 text-sm gap-2 text-gray-600 leading-relaxed">
                  <ul className="space-y-2">
                    <li className="flex items-start gap-2">
@@ -105,10 +154,10 @@ export default function ProductPage() {
                      {currentBrand.versions.map(v => (
                        <button
                          key={v.id}
-                          onClick={() => setActiveVersionId(v.id)}
+                          onClick={() => setSelectedVersionId(v.id)}
                          className={cn(
                            "w-full py-2 rounded-full text-sm font-medium transition-all cursor-pointer text-center",
-                            activeVersionId === v.id
+                            effectiveVersionId === v.id
                              ? "bg-linear-to-r from-blue-500 to-cyan-400 text-white shadow-sm"
                              : "bg-gray-100 text-gray-600 hover:bg-gray-200",
                          )}
--- a/src/home/product/productGrid.tsx
+++ b/src/home/product/productGrid.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from "react-router-dom"
 import { Button } from "@/components/ui/button"
 import type { Product } from "@/lib/models/product"
 import vector from "../_assets/vector.webp"
@@ -7,6 +8,8 @@ type ProductGridProps = {
 }

 export default function ProductGrid({ products }: ProductGridProps) {
+  const navigate = useNavigate()
+
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-6 gap-6">
      {products.map(product => (
@@ -15,9 +18,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 && (
-            <div className="absolute -top-5 -right-5 flex items-center gap-1 text-xs font-bold px-3 py-1">
-              <img src={vector} alt="打折" />
-              {product.tag}
+            <div className="absolute -top-5 -right-5">
+              <div className="relative">
+                <img src={vector} alt="打折" />
+                <span className="absolute inset-0 flex items-center justify-center text-xs font-bold">
+                  {product.tag}
+                </span>
+              </div>
            </div>
          )}

@@ -68,6 +75,7 @@ export default function ProductGrid({ products }: ProductGridProps) {
            <Button
              variant="outline"
              className="w-full text-blue-500 border-blue-400 hover:bg-blue-50"
+              onClick={() => navigate("/product/buy", { state: { product } })}
            >
              立即购买
            </Button>
--- a/src/home/product/routeros.tsx
+++ 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 (
+    <Wrap className="flex flex-col gap-10 pt-30 pb-16 bg-white">
+      <div className="flex flex-col lg:flex-row gap-10">
+        <div className="lg:w-5/12">
+          <Card className="overflow-hidden border-0 shadow-md">
+            <img
+              src={product.src}
+              alt={product.name}
+              className="w-full aspect-square object-cover"
+            />
+          </Card>
+          <div className="flex gap-3 mt-4 flex-wrap">
+            {PRODUCT_VARIANTS.map((variant, index) => (
+              <button
+                key={variant.id}
+                onClick={() => setSelectedVariant(index)}
+                className={cn(
+                  "size-16 rounded-lg cursor-pointer border-2 transition-all overflow-hidden p-0 bg-white",
+                  index === selectedVariant
+                    ? "border-blue-500 shadow-md scale-105"
+                    : "border-gray-200 hover:border-blue-300",
+                )}
+              >
+                <img
+                  src={variant.src}
+                  alt={variant.name}
+                  className="w-full h-full object-cover"
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="lg:w-7/12 space-y-6">
+          <h4 className="text-2xl font-bold text-gray-800 leading-relaxed">
+            ros千兆软路由 一拖100矩阵 抖音快手单机单IP 魔硬软改 工作室试玩
+          </h4>
+
+          <Card className="bg-orange-50/60 border-0">
+            <CardContent className="space-y-3 pt-4">
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">商品信息</span>
+                <span className="font-bold text-gray-700">{product.name}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">价格</span>
+                <span className="line-through text-gray-400">
+                  ¥{product.lineprice}
+                </span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-muted-foreground text-sm">会员价</span>
+                <Badge
+                  variant="destructive"
+                  className="text-xl font-bold px-3 py-1 h-auto"
+                >
+                  ¥{product.price}
+                </Badge>
+              </div>
+              <div className="text-right text-sm text-muted-foreground">
+                {product.describe}
+              </div>
+            </CardContent>
+          </Card>
+
+          <div className="space-y-3">
+            <Label className="text-sm font-medium">颜色分类</Label>
+            <div className="flex flex-wrap gap-3">
+              {PRODUCT_VARIANTS.map((variant, index) => (
+                <Button
+                  key={variant.id}
+                  variant={index === selectedVariant ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setSelectedVariant(index)}
+                  className={cn(
+                    "rounded-full text-sm font-medium transition-all",
+                    index === selectedVariant &&
+                      "bg-linear-to-r from-blue-500 to-cyan-400 text-white border-transparent hover:opacity-90",
+                    index !== selectedVariant &&
+                      "border-gray-200 hover:border-blue-300",
+                  )}
+                >
+                  {variant.name}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="space-y-3">
+            <div className="flex items-center gap-4 text-sm">
+              <span className="text-muted-foreground w-20 shrink-0">
+                收货人
+              </span>
+              <span className="text-gray-800 font-medium">
+                {userInfo.name || "未设置"}
+              </span>
+            </div>
+            <div className="flex items-center gap-4 text-sm">
+              <span className="text-muted-foreground w-20 shrink-0">
+                电话号码
+              </span>
+              <span className="text-gray-800 font-medium">
+                {userInfo.phone || "未设置"}
+              </span>
+            </div>
+            <div className="flex items-center gap-4 text-sm">
+              <span className="text-muted-foreground w-20 shrink-0">
+                收货地址
+              </span>
+              <span className="text-gray-800 font-medium">
+                {userInfo.address || "未设置"}
+              </span>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="space-y-3">
+            <Label className="text-sm font-medium">支付方式</Label>
+            <div className="flex flex-wrap gap-3">
+              {PAYMENT_METHODS.map(method => (
+                <label
+                  key={method.id}
+                  className={cn(
+                    "flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium cursor-pointer border transition-all",
+                    payMethod === method.id
+                      ? "bg-blue-50 border-blue-400 text-blue-600"
+                      : "bg-white border-gray-200 text-muted-foreground hover:border-blue-300",
+                  )}
+                >
+                  <input
+                    type="radio"
+                    name="payMethod"
+                    value={method.id}
+                    checked={payMethod === method.id}
+                    onChange={() => setPayMethod(method.id)}
+                    className="hidden"
+                  />
+                  <img
+                    src={method.icon}
+                    alt={method.label}
+                    className="w-5 h-5"
+                  />
+                  <span>{method.label}</span>
+                </label>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex gap-4">
+            <Button
+              size="lg"
+              className="flex-1 rounded-full bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 font-bold"
+            >
+              立即购买
+            </Button>
+            <Button
+              variant="outline"
+              size="lg"
+              onClick={() => setShowModal(true)}
+              className="rounded-full"
+            >
+              修改收货信息
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div>
+        <h2 className="text-lg font-bold text-gray-800 mb-6 text-center">
+          产品规格
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {SPECS.map((col, colIdx) => (
+            <Card key={colIdx} className="border-0 bg-muted/30">
+              <CardContent className="space-y-2 pt-4">
+                {col.map((spec, idx) => (
+                  <div
+                    key={idx}
+                    className="flex justify-between text-sm py-1.5 border-b border-border/50 last:border-0"
+                  >
+                    <span className="text-muted-foreground">{spec.label}</span>
+                    <span className="text-foreground font-medium">
+                      {spec.value}
+                    </span>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <Separator />
+
+      <div>
+        <h2 className="text-lg font-bold text-gray-800 mb-6 text-center">
+          产品展示
+        </h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[
+            "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) => (
+            <Card
+              key={index}
+              className="overflow-hidden border-0 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
+            >
+              <img
+                src={src}
+                alt={`产品图${index + 1}`}
+                className="w-full aspect-square object-cover"
+              />
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <Dialog open={showModal} onOpenChange={setShowModal}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>修改收货信息</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">收货人</Label>
+              <Input
+                id="name"
+                value={userInfo.name}
+                onChange={e =>
+                  setUserInfo({ ...userInfo, name: e.target.value })
+                }
+                placeholder="请输入收货人"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="phone">电话</Label>
+              <Input
+                id="phone"
+                value={userInfo.phone}
+                onChange={e =>
+                  setUserInfo({ ...userInfo, phone: e.target.value })
+                }
+                placeholder="请输入电话"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="address">地址</Label>
+              <Input
+                id="address"
+                value={userInfo.address}
+                onChange={e =>
+                  setUserInfo({ ...userInfo, address: e.target.value })
+                }
+                placeholder="请输入地址"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowModal(false)}
+              className="rounded-full"
+            >
+              关闭
+            </Button>
+            <Button
+              onClick={() => setShowModal(false)}
+              className="rounded-full bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90"
+            >
+              提交更改
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Wrap>
+  )
+}
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,6 +1,5 @@
 // 定义后端服务URL和OAuth2配置
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL
-if (!API_BASE_URL) throw new Error("VITE_API_BASE_URL is not set")
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? ""

 const CLIENT_ID = import.meta.env.VITE_CLIENT_ID
 if (!CLIENT_ID) throw new Error("VITE_CLIENT_ID is not set")
@@ -12,40 +11,14 @@ if (!CLIENT_SECRET) throw new Error("VITE_CLIENT_SECRET is not set")
 type ApiResponse<T = undefined> =
  | {
      success: false
-      status: number
+      status?: number
      message: string
    }
  | {
      success: true
      data: T
+      // 响应头（key 统一小写），用于登录等场景从 header 取数据
+      headers?: Record<string, string>
    }

-type PageRecord<T = unknown> = {
-  total: number
-  page: number
-  size: number
-  list: T[]
-}
-
-//  工具类型：用于提取请求参数和返回数据
-type ExtraReq<T extends (...args: never) => unknown> = T extends (
-  ...args: infer P
-) => unknown
-  ? P[0]
-  : never
-type ExtraResp<T extends (...args: never) => unknown> =
-  Awaited<ReturnType<T>> extends ApiResponse<infer D> ? D : never
-
-// 预定义错误
-const UnauthorizedError = new Error("未授权访问")
-
-export {
-  API_BASE_URL,
-  type ApiResponse,
-  CLIENT_ID,
-  CLIENT_SECRET,
-  type ExtraReq,
-  type ExtraResp,
-  type PageRecord,
-  UnauthorizedError,
-}
+export { API_BASE_URL, type ApiResponse, CLIENT_ID, CLIENT_SECRET }
--- a/src/lib/models/product.ts
+++ b/src/lib/models/product.ts
@@ -5,6 +5,7 @@ export type Version = {

 export type Product = {
  id: string
+  productId: number
  title: string
  price: number
  desc?: string
@@ -14,6 +15,7 @@ export type Product = {
  duration?: string
  version?: string
  features?: string[]
+  isTest?: boolean
 }

 export type Brand = {
@@ -29,267 +31,109 @@ export type Tab = {
  brands: Brand[]
 }

-export const PRODUCT_DATA: Tab[] = [
-  {
-    id: "dynamic",
-    label: "动态独享IP",
-    brands: [
-      {
-        id: "fox",
-        name: "极狐IP(推荐)",
-        versions: [
-          { id: "v1", label: "尊享版-不限速" },
-          { id: "v2", label: "高级版-限速6M" },
-          { id: "v3", label: "普通版-限速2M" },
-        ],
-        products: [
-          {
-            id: "1",
-            title: "免费",
-            price: 0,
-            desc: "注册即送3次",
-            card: "测试卡",
-            duration: "1小时",
-            version: "v1",
-          },
-          {
-            id: "2",
-            title: "首单低至",
-            price: 0.1,
-            originalPrice: 0.1,
-            // card: "测试卡",
-            duration: "24小时",
-            version: "v1",
-          },
-          {
-            id: "3",
-            title: "周卡套餐",
-            price: 37.5,
-            tag: "8.5折",
-            originalPrice: 37.5,
-            // card: "周卡",
-            duration: "7天",
-            version: "v1",
-          },
-          {
-            id: "4",
-            title: "月卡套餐",
-            price: 78,
-            tag: "8.5折",
-            originalPrice: 80.0,
-            // card: "月卡",
-            duration: "30天",
-            version: "v2",
-          },
-          {
-            id: "5",
-            title: "季卡套餐",
-            price: 208,
-            tag: "8.5折",
-            originalPrice: 220.0,
-            // card: "季卡",
-            duration: "90天",
-            version: "v2",
-          },
-          {
-            id: "6",
-            title: "年卡套餐",
-            price: 770,
-            tag: "8.5折",
-            originalPrice: 800.0,
-            card: "年卡",
-            duration: "365天",
-            version: "v3",
-          },
-        ],
-      },
-      {
-        id: "aurora",
-        name: "极光IP(推荐)",
-        versions: [
-          { id: "v1", label: "尊享版-不限速" },
-          { id: "v2", label: "高级版-限速6M" },
-          { id: "v3", label: "普通版-限速2M" },
-        ],
-        products: [
-          {
-            id: "7",
-            title: "周卡套餐",
-            price: 37.5,
-            originalPrice: 37.5,
-            card: "周卡",
-            duration: "7天",
-            version: "v1",
-          },
-          {
-            id: "8",
-            title: "月卡套餐",
-            price: 78,
-            tag: "8.5折",
-            originalPrice: 80.0,
-            card: "月卡",
-            duration: "30天",
-            version: "v2",
-          },
-          {
-            id: "9",
-            title: "季卡套餐",
-            price: 208,
-            tag: "8.5折",
-            originalPrice: 220.0,
-            card: "季卡",
-            duration: "90天",
-            version: "v3",
-          },
-        ],
-      },
-      {
-        id: "mushroom",
-        name: "蘑菇IP",
-        products: [
-          {
-            id: "10",
-            title: "免费",
-            price: 0,
-            desc: "注册即送3次",
-            card: "测试卡",
-            duration: "1小时",
-          },
-          {
-            id: "11",
-            title: "首单低至",
-            price: 0.1,
-            originalPrice: 0.1,
-            // card: "测试卡",
-            duration: "24小时",
-          },
-          {
-            id: "12",
-            title: "周卡套餐",
-            price: 37.5,
-            originalPrice: 37.5,
-            // card: "周卡",
-            duration: "7天",
-          },
-        ],
-      },
-      {
-        id: "kylin",
-        name: "麒麟IP",
-        products: [
-          {
-            id: "13",
-            title: "测试卡",
-            price: 0.1,
-            card: "测试卡",
-            duration: "1小时",
-          },
-          {
-            id: "14",
-            title: "24小时套餐",
-            price: 37.5,
-            originalPrice: 37.5,
-            card: "24小时卡",
-            duration: "24小时",
-          },
-          {
-            id: "15",
-            title: "周卡套餐",
-            price: 37.5,
-            originalPrice: 37.5,
-            card: "周卡",
-            duration: "7天",
-          },
-        ],
-      },
-      {
-        id: "cheetah",
-        name: "猎豹IP",
-        products: [
-          {
-            id: "16",
-            title: "月卡套餐",
-            price: 78,
-            tag: "8.5折",
-            originalPrice: 80.0,
-            card: "月卡",
-            duration: "30天",
-          },
-          {
-            id: "17",
-            title: "季卡套餐",
-            price: 208,
-            tag: "8.5折",
-            originalPrice: 220.0,
-            card: "季卡",
-            duration: "90天",
-          },
-          {
-            id: "18",
-            title: "年卡套餐",
-            price: 770,
-            tag: "8.5折",
-            originalPrice: 800.0,
-            card: "年卡",
-            duration: "365天",
-          },
-        ],
-      },
-      {
-        id: "info",
-        name: "购买说明",
-        products: [],
-      },
-    ],
-  },
-  {
-    id: "static",
-    label: "静态IP",
-    brands: [
-      {
-        id: "drip",
-        name: "水滴独享IP",
-        products: [
-          {
-            id: "19",
-            title: "纯住宅池",
-            price: 50,
-            desc: "分散式真实住宅IP",
-            // card: "住宅卡",
-            features: [
-              "带宽充足，IP段优质分布广",
-              "适合对IP要求高的业务",
-              "IP 3-7天周期性变化",
-              "线路切换每天20次",
-            ],
-          },
-          {
-            id: "20",
-            title: "多拨池",
-            price: 60,
-            desc: "集中拨号住宅，带宽较高",
-            // card: "拨号卡",
-            features: [
-              "IP段较多，稳定性较高",
-              "IP 3-7天周期性变化",
-              "线路切换每天20次",
-            ],
-          },
-          {
-            id: "21",
-            title: "固定池",
-            price: 70,
-            desc: "天翼云节点",
-            // card: "固定卡",
-            features: ["IP段多IP不变化，稳定性高", "线路切换每日限制为20次"],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "single",
-    label: "单窗口单IP",
-    brands: [],
-  },
-]
+export type ProductItem = {
+  Product: {
+    Id: number
+    Name: string
+    Image: string
+    Sort: number
+    Content: string
+    Profile: string
+    TenantId: number
+    OnLine: number
+    ContentLine: string[]
+  }
+  Packages: PackageItem[]
+}
+
+export type PackageItem = {
+  Id: number
+  TenantId: number
+  ProductId: number
+  PackageType: number
+  Name: string
+  Title: string
+  Image: string
+  Status: number
+  Profile: string
+  Price: number
+  LinePrice: number
+  DayPrice: number
+  MinPrice: number
+  DayCount: number
+  OriginKey: string
+  OriginName: string
+  IsTest: number
+  DeleteTag: number
+}
+
+function extractTier(name: string): string {
+  const match = name.match(/\((.+?)\)$/)
+  return match ? match[1] : "默认"
+}
+
+export function transformToTabs(data: ProductItem[]): Tab[] {
+  const activeProducts = data.filter(p => p.Product.OnLine === 1)
+
+  activeProducts.sort((a, b) => a.Product.Sort - b.Product.Sort)
+  console.log(
+    activeProducts,
+    "activeProductsactiveProductsactiveProductsactiveProducts",
+  )
+
+  const brands: Brand[] = activeProducts.map(item => {
+    const activePackages = item.Packages.filter(pkg => pkg.Status === 1)
+
+    const tierMap = new Map<string, PackageItem[]>()
+    for (const pkg of activePackages) {
+      const tier = extractTier(pkg.Name)
+      if (!tierMap.has(tier)) tierMap.set(tier, [])
+      tierMap.get(tier)?.push(pkg)
+    }
+
+    const tiers = Array.from(tierMap.entries())
+
+    const versions: Version[] | undefined =
+      tiers.length > 1
+        ? tiers.map(([tier]) => ({ id: tier, label: tier }))
+        : undefined
+
+    const products: Product[] = []
+    for (const [tier, packages] of tiers) {
+      for (const pkg of packages) {
+        products.push({
+          id: pkg.Id.toString(),
+          productId: item.Product.Id,
+          title: pkg.Name,
+          price: pkg.Price,
+          originalPrice: pkg.LinePrice,
+          duration: pkg.Profile,
+          card: pkg.OriginName,
+          version: tier,
+          isTest: pkg.IsTest === 1,
+        })
+      }
+    }
+
+    return {
+      id: item.Product.Name,
+      name: item.Product.Name,
+      versions,
+      products,
+    }
+  })
+
+  brands.push({
+    id: "info",
+    name: "购买须知",
+    products: [],
+  })
+
+  return [
+    {
+      id: "dynamic",
+      label: "动态独享IP",
+      brands,
+    },
+  ]
+}
--- a/src/routers/index.tsx
+++ b/src/routers/index.tsx
@@ -14,6 +14,9 @@ import IpLinePage from "@/home/ipLine"
 import LayoutPage from "@/home/layout"
 import LoginPage from "@/home/login"
 import ProductPage from "@/home/product"
+import BuyPage from "@/home/product/buy"
+import HttpPage from "@/home/product/http"
+import RouterosPage from "@/home/product/routeros"
 import SoftDownloadPage from "@/home/softDownload"
 export const router = createBrowserRouter([
  {
@@ -22,6 +25,9 @@ export const router = createBrowserRouter([
    children: [
      { index: true, element: <HomePage /> },
      { path: "product", element: <ProductPage /> },
+      { path: "product/buy", element: <BuyPage /> },
+      { path: "product/http", element: <HttpPage /> },
+      { path: "product/routeros", element: <RouterosPage /> },
      { path: "ipline", element: <IpLinePage /> },
      { path: "softdownload", element: <SoftDownloadPage /> },
      { path: "help", element: <HelpPage /> },
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,4 +11,19 @@ export default defineConfig({
      "@": path.resolve(__dirname, "./src"),
    },
  },
+  server: {
+    proxy: {
+      "/api": "http://192.168.3.6:5000",
+      "/user": "http://192.168.3.6:5000",
+      "/product": {
+        target: "http://192.168.3.6:5000",
+        bypass(req) {
+          if (req.headers?.accept?.includes("text/html")) {
+            return "/index.html"
+          }
+        },
+      },
+      "/script": "http://192.168.3.6:5000",
+    },
+  },
 })
Author	SHA1	Message	Date
Eamon	1336a550fe	修复登录注册验证码bug	2026-08-14 16:30:41 +08:00
Eamon	4235458bea	更新登录功能	2026-08-13 18:28:20 +08:00
Eamon	115ee3bfeb	完善购买产品二级路由页面	2026-08-12 13:49:04 +08:00