From 5007cd9f51384719de8d889fa45afadbafbfa61d Mon Sep 17 00:00:00 2001
From: Eamon <17516219072@163.com>
Date: Tue, 25 Aug 2026 18:32:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A6=96=E9=A1=B5=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=20&=20=E9=A6=96=E9=A1=B5=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/logo.png                             | Bin 0 -> 5183 bytes
 src/home/_components/header/common.tsx      | 382 ++++++++++++++------
 src/home/_components/header/menu-mobile.tsx | 182 ++++++++++
 src/home/header.tsx                         |  85 ++++-
 src/home/index.tsx                          | 257 +++++++++++--
 src/lib/hooks/useMediaQuery.ts              |  36 ++
 6 files changed, 788 insertions(+), 154 deletions(-)
 create mode 100644 public/logo.png
 create mode 100644 src/home/_components/header/menu-mobile.tsx
 create mode 100644 src/lib/hooks/useMediaQuery.ts

diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..b10583c7a7ba5b6d0d9ca32473b4bbf986caeb7c
GIT binary patch
literal 5183
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

literal 0
HcmV?d00001

diff --git a/src/home/_components/header/common.tsx b/src/home/_components/header/common.tsx
index b4bbe04..1196685 100644
--- a/src/home/_components/header/common.tsx
+++ b/src/home/_components/header/common.tsx
@@ -1,12 +1,15 @@
+import { ArrowUp, ChevronDown, ChevronUp } from "lucide-react"
 import { useState } from "react"
+import { cn } from "@/lib/utils"
 import gzh from "../assets/gzh.webp"
-import phone from "../assets/phone.webp"
-import qq from "../assets/qq.webp"
-import top from "../assets/top.webp"
-import wx from "../assets/wx.webp"
+import phoneImg from "../assets/phone.webp"
+import qqImg from "../assets/qq.webp"
+import topImg from "../assets/top.webp"
+import wxImg from "../assets/wx.webp"
 
 export default function Common() {
   const [activePopup, setActivePopup] = useState<"gzh" | "tel" | null>(null)
+  const [isExpanded, setIsExpanded] = useState(false)
 
   // QQ点击跳转
   const handleQQClick = () => {
@@ -20,118 +23,277 @@ export default function Common() {
   }
 
   return (
-    <div className="fixed right-4 bottom-20 z-50 flex flex-col w-18 overflow-visible rounded-xl shadow-lg bg-linear-to-b from-blue-700 to-cyan-300">
-      {/* QQ */}
-      <div
-        onClick={handleQQClick}
-        onKeyDown={e => {
-          if (e.key === "Enter" || e.key === " ") {
-            handleQQClick()
-          }
-        }}
-        role="button"
-        tabIndex={0}
-        className="flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
-      >
-        <img src={qq} alt="QQ" className="w-7 h-7 object-contain" />
-        <span className="text-xs mt-1.5">QQ</span>
+    <>
+      {/* ========== 桌面端 ========== */}
+      <div className="hidden md:flex fixed right-4 bottom-20 z-50 flex-col w-18 overflow-visible rounded-xl shadow-lg bg-linear-to-b from-blue-700 to-cyan-300">
+        <div
+          onClick={handleQQClick}
+          onKeyDown={e => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleQQClick()
+            }
+          }}
+          role="button"
+          tabIndex={0}
+          className="flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
+        >
+          <img src={qqImg} alt="QQ" className="w-7 h-7 object-contain" />
+          <span className="text-xs mt-1.5">QQ</span>
+        </div>
+
+        <div
+          onClick={handleWxClick}
+          onKeyDown={e => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleWxClick()
+            }
+          }}
+          role="button"
+          tabIndex={0}
+          className="flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
+        >
+          <img src={wxImg} alt="微信" className="w-7 h-7 object-contain" />
+          <span className="text-xs mt-1.5">微信</span>
+        </div>
+
+        <div
+          className="relative flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
+          role="button"
+          tabIndex={0}
+          aria-haspopup="true"
+          aria-expanded={activePopup === "gzh"}
+          onMouseEnter={() => setActivePopup("gzh")}
+          onMouseLeave={() => setActivePopup(null)}
+          onFocus={() => setActivePopup("gzh")}
+          onBlur={() => setActivePopup(null)}
+          onKeyDown={e => {
+            if (e.key === "Enter" || e.key === " ") {
+              setActivePopup(prev => (prev === "gzh" ? null : "gzh"))
+            }
+          }}
+        >
+          <img src={gzh} alt="公众号" className="w-7 h-7 object-contain" />
+          <span className="text-xs mt-1.5">公众号</span>
+          {activePopup === "gzh" && (
+            <div className="absolute right-full mr-3 bottom-0 bg-white rounded-lg shadow-xl p-4 w-48 text-center border border-gray-100">
+              <img
+                src="/img/ewm.png"
+                alt="公众号二维码"
+                className="w-full aspect-square object-contain"
+              />
+              <p className="text-orange-500 text-xs mt-2">
+                实时响应 在线时间 8:30-23:00
+              </p>
+              <p className="text-orange-500 text-xs">
+                关注公众号可获取免费的到期提醒服务
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div
+          className="relative flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
+          role="button"
+          tabIndex={0}
+          aria-haspopup="true"
+          aria-expanded={activePopup === "tel"}
+          onMouseEnter={() => setActivePopup("tel")}
+          onMouseLeave={() => setActivePopup(null)}
+          onFocus={() => setActivePopup("tel")}
+          onBlur={() => setActivePopup(null)}
+          onKeyDown={e => {
+            if (e.key === "Enter" || e.key === " ") {
+              setActivePopup(prev => (prev === "tel" ? null : "tel"))
+            }
+          }}
+        >
+          <img src={phoneImg} alt="电话" className="w-7 h-7 object-contain" />
+          <span className="text-xs mt-1.5">电话</span>
+          {activePopup === "tel" && (
+            <div className="absolute right-full mr-3 bottom-0 bg-white rounded-lg shadow-xl p-4 w-48 text-center border border-gray-100">
+              <p className="font-bold text-lg text-gray-800">400 800 9925</p>
+              <p className="text-sm text-gray-600">实时接通</p>
+              <p className="text-xs text-gray-500 mt-1">
+                电话值班时间 8:30-23:00
+              </p>
+            </div>
+          )}
+        </div>
+
+        <button
+          onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+          className="flex flex-col items-center justify-center py-2 text-white hover:bg-white/10 transition-colors"
+        >
+          <img src={topImg} alt="回到顶部" className="w-7 h-7 object-contain" />
+          <span className="text-xs mt-1.5">回到顶部</span>
+        </button>
       </div>
 
-      {/* 微信 */}
-      <div
-        onClick={handleWxClick}
-        onKeyDown={e => {
-          if (e.key === "Enter" || e.key === " ") {
-            handleWxClick()
-          }
-        }}
-        role="button"
-        tabIndex={0}
-        className="flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
-      >
-        <img src={wx} alt="微信" className="w-7 h-7 object-contain" />
-        <span className="text-xs mt-1.5">微信</span>
-      </div>
-
-      {/* 公众号 */}
-      <div
-        className="relative flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
-        role="button"
-        tabIndex={0}
-        aria-haspopup="true"
-        aria-expanded={activePopup === "gzh"}
-        onMouseEnter={() => setActivePopup("gzh")}
-        onMouseLeave={() => setActivePopup(null)}
-        onFocus={() => setActivePopup("gzh")}
-        onBlur={() => setActivePopup(null)}
-        onKeyDown={e => {
-          if (e.key === "Enter" || e.key === " ") {
-            // toggle popup with keyboard
-            setActivePopup(prev => (prev === "gzh" ? null : "gzh"))
-          }
-        }}
-      >
-        <img src={gzh} alt="公众号" className="w-7 h-7 object-contain" />
-        <span className="text-xs mt-1.5">公众号</span>
-
-        {/* 公众号悬浮弹窗 */}
-        {activePopup === "gzh" && (
-          <div className="absolute right-full mr-3 bottom-0 bg-white rounded-lg shadow-xl p-4 w-48 text-center border border-gray-100">
-            <img
-              src="/img/ewm.png"
-              alt="公众号二维码"
-              className="w-full aspect-square object-contain"
-            />
-            <p className="text-orange-500 text-xs mt-2">
-              实时响应 在线时间 8:30-23:00
-            </p>
-            <p className="text-orange-500 text-xs">
-              关注公众号可获取免费的到期提醒服务
-            </p>
+      {/* ========== 移动端：底部折叠面板 ========== */}
+      <div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
+        {/* 折叠面板 */}
+        <div
+          className={cn(
+            "bg-white shadow-2xl rounded-t-2xl transition-all duration-300 ease-in-out",
+            isExpanded ? "max-h-[80vh]" : "max-h-14",
+          )}
+        >
+          {/* 拖拽条*/}
+          <div
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="flex flex-col items-center justify-center py-2.5 cursor-pointer hover:bg-gray-50 transition-colors rounded-t-2xl"
+          >
+            <div className="w-10 h-1 bg-gray-300 rounded-full" />
+            <div className="flex items-center gap-2 mt-1">
+              <span className="text-xs text-gray-500">
+                {isExpanded ? "收起" : "联系我们"}
+              </span>
+              {isExpanded ? (
+                <ChevronDown className="w-4 h-4 text-gray-400" />
+              ) : (
+                <ChevronUp className="w-4 h-4 text-gray-400" />
+              )}
+            </div>
           </div>
-        )}
-      </div>
 
-      {/* 电话 */}
-      <div
-        className="relative flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
-        role="button"
-        tabIndex={0}
-        aria-haspopup="true"
-        aria-expanded={activePopup === "tel"}
-        onMouseEnter={() => setActivePopup("tel")}
-        onMouseLeave={() => setActivePopup(null)}
-        onFocus={() => setActivePopup("tel")}
-        onBlur={() => setActivePopup(null)}
-        onKeyDown={e => {
-          if (e.key === "Enter" || e.key === " ") {
-            setActivePopup(prev => (prev === "tel" ? null : "tel"))
-          }
-        }}
-      >
-        <img src={phone} alt="电话" className="w-7 h-7 object-contain" />
-        <span className="text-xs mt-1.5">电话</span>
+          {/* 展开内容 */}
+          <div
+            className={cn(
+              "overflow-hidden transition-all duration-300",
+              isExpanded ? "max-h-[70vh] opacity-100" : "max-h-0 opacity-0",
+            )}
+          >
+            <div className="px-4 pb-6 pt-2 space-y-3">
+              {/* QQ */}
+              <div
+                onClick={handleQQClick}
+                className="flex items-center gap-4 p-3 bg-blue-50 rounded-xl hover:bg-blue-100 transition-colors cursor-pointer"
+              >
+                <div className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
+                  <img
+                    src={qqImg}
+                    alt="QQ"
+                    className="w-6 h-6 object-contain"
+                  />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-gray-800">QQ客服</p>
+                  <p className="text-xs text-gray-500">点击立即咨询</p>
+                </div>
+              </div>
 
-        {/* 电话悬浮弹窗 */}
-        {activePopup === "tel" && (
-          <div className="absolute right-full mr-3 bottom-0 bg-white rounded-lg shadow-xl p-4 w-48 text-center border border-gray-100">
-            <p className="font-bold text-lg text-gray-800">400 800 9925</p>
-            <p className="text-sm text-gray-600">实时接通</p>
-            <p className="text-xs text-gray-500 mt-1">
-              电话值班时间 8:30-23:00
-            </p>
+              {/* 微信 */}
+              <div
+                onClick={handleWxClick}
+                className="flex items-center gap-4 p-3 bg-green-50 rounded-xl hover:bg-green-100 transition-colors cursor-pointer"
+              >
+                <div className="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center">
+                  <img
+                    src={wxImg}
+                    alt="微信"
+                    className="w-6 h-6 object-contain"
+                  />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-gray-800">微信客服</p>
+                  <p className="text-xs text-gray-500">点击立即咨询</p>
+                </div>
+              </div>
+
+              {/* 公众号 */}
+              <div
+                onClick={() =>
+                  setActivePopup(activePopup === "gzh" ? null : "gzh")
+                }
+                className="flex items-center gap-4 p-3 bg-purple-50 rounded-xl hover:bg-purple-100 transition-colors cursor-pointer"
+              >
+                <div className="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center">
+                  <img
+                    src={gzh}
+                    alt="公众号"
+                    className="w-6 h-6 object-contain"
+                  />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-gray-800">公众号</p>
+                  <p className="text-xs text-gray-500">点击查看二维码</p>
+                </div>
+                <ChevronUp
+                  className={cn(
+                    "w-5 h-5 text-purple-500 transition-transform",
+                    activePopup === "gzh" ? "rotate-180" : "",
+                  )}
+                />
+              </div>
+
+              {/* 公众号二维码展开 */}
+              {activePopup === "gzh" && (
+                <div className="p-4 bg-gray-50 rounded-xl text-center">
+                  <img
+                    src="/img/ewm.png"
+                    alt="公众号二维码"
+                    className="w-40 h-40 mx-auto object-contain"
+                  />
+                  <p className="text-orange-500 text-xs mt-2">
+                    实时响应 在线时间 8:30-23:00
+                  </p>
+                  <p className="text-orange-500 text-xs">
+                    关注公众号可获取免费的到期提醒服务
+                  </p>
+                </div>
+              )}
+
+              {/* 电话 */}
+              <div
+                onClick={() =>
+                  setActivePopup(activePopup === "tel" ? null : "tel")
+                }
+                className="flex items-center gap-4 p-3 bg-orange-50 rounded-xl hover:bg-orange-100 transition-colors cursor-pointer"
+              >
+                <div className="w-10 h-10 rounded-full bg-orange-500 flex items-center justify-center">
+                  <img
+                    src={phoneImg}
+                    alt="电话"
+                    className="w-6 h-6 object-contain"
+                  />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-gray-800">电话客服</p>
+                  <p className="text-xs text-gray-500">点击查看号码</p>
+                </div>
+                <ChevronUp
+                  className={cn(
+                    "w-5 h-5 text-orange-500 transition-transform",
+                    activePopup === "tel" ? "rotate-180" : "",
+                  )}
+                />
+              </div>
+
+              {/* 电话展开 */}
+              {activePopup === "tel" && (
+                <div className="p-4 bg-gray-50 rounded-xl text-center">
+                  <p className="font-bold text-2xl text-gray-800">
+                    400 800 9925
+                  </p>
+                  <p className="text-sm text-gray-600 mt-1">实时接通</p>
+                  <p className="text-xs text-gray-500 mt-1">
+                    电话值班时间 8:30-23:00
+                  </p>
+                </div>
+              )}
+
+              {/* 回到顶部 */}
+              <button
+                onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+                className="flex items-center justify-center gap-2 w-full p-3 bg-gray-100 rounded-xl hover:bg-gray-200 transition-colors"
+              >
+                <ArrowUp className="w-4 h-4 text-gray-600" />
+                <span className="text-sm text-gray-600">回到顶部</span>
+              </button>
+            </div>
           </div>
-        )}
+        </div>
       </div>
-
-      {/* 回到顶部 */}
-      <button
-        onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
-        className="flex flex-col items-center justify-center py-2 text-white hover:bg-white/10 transition-colors"
-      >
-        <img src={top} alt="回到顶部" className="w-7 h-7 object-contain" />
-        <span className="text-xs mt-1.5">回到顶部</span>
-      </button>
-    </div>
+    </>
   )
 }
diff --git a/src/home/_components/header/menu-mobile.tsx b/src/home/_components/header/menu-mobile.tsx
new file mode 100644
index 0000000..18fe543
--- /dev/null
+++ b/src/home/_components/header/menu-mobile.tsx
@@ -0,0 +1,182 @@
+import { ChevronDown, X } from "lucide-react"
+import { useState } from "react"
+import { NavLink, useNavigate } from "react-router-dom"
+import { logout } from "@/api/auth"
+import { cn } from "@/lib/utils"
+
+export default function MobileMenu({
+  authed,
+  onClose,
+}: {
+  authed: boolean
+  onClose: () => void
+}) {
+  const navigate = useNavigate()
+  const [productOpen, setProductOpen] = useState(false)
+
+  const handleLogout = async () => {
+    await logout()
+  }
+
+  const go = (path: string) => {
+    onClose()
+    navigate(path)
+  }
+
+  const openExternal = (url: string) => {
+    onClose()
+    window.open(url, "_blank")
+  }
+
+  return (
+    <div className="lg:hidden fixed inset-0 z-50 flex">
+      <button
+        type="button"
+        aria-label="关闭菜单"
+        className="flex-1 bg-black/40 cursor-pointer"
+        onClick={onClose}
+      />
+
+      <div className="absolute left-0 top-0 bottom-0 w-72 max-w-[80vw] bg-white shadow-xl flex flex-col">
+        {/* 头部：logo + 关闭 */}
+        <div className="flex items-center justify-between px-4 h-16 border-b border-gray-100">
+          <NavLink to="/" onClick={onClose} className="flex items-center gap-2">
+            <img
+              src="/favicon.svg"
+              alt="聚IP"
+              className="w-8 h-8 object-contain"
+            />
+            <span className="text-xl font-bold bg-linear-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
+              聚IP
+            </span>
+          </NavLink>
+          <button
+            type="button"
+            aria-label="关闭菜单"
+            className="rounded-md p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors"
+            onClick={onClose}
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* 菜单项 */}
+        <div className="flex-1 overflow-y-auto px-4 py-6 space-y-1">
+          <MobileNavLink to="/" onNavigate={onClose}>
+            首页
+          </MobileNavLink>
+
+          {/* 二级菜单 */}
+          <div>
+            <button
+              type="button"
+              onClick={() => setProductOpen(!productOpen)}
+              className={cn(
+                "w-full flex items-center justify-between px-3 py-2.5 rounded-lg text-sm transition-colors",
+                productOpen
+                  ? "text-blue-600 font-medium"
+                  : "text-gray-700 hover:bg-gray-50",
+              )}
+            >
+              <span>产品订购</span>
+              <ChevronDown
+                className={cn(
+                  "w-4 h-4 transition-transform duration-200",
+                  productOpen && "rotate-180",
+                )}
+              />
+            </button>
+            {productOpen && (
+              <div className="pl-4 space-y-1">
+                <SubItem onClick={() => go("/product")}>动静态IP</SubItem>
+                <SubItem onClick={() => openExternal("https://lanhuip.com")}>
+                  新HTTP/S5
+                </SubItem>
+                <SubItem onClick={() => go("/product/http")}>HTTP/S5</SubItem>
+                <SubItem onClick={() => go("/product/routeros")}>
+                  软路由成本价
+                </SubItem>
+                <SubItem onClick={() => openExternal("http://vps.juip.com")}>
+                  动态Vps
+                </SubItem>
+              </div>
+            )}
+          </div>
+
+          <MobileNavLink to="/ipline" onNavigate={onClose}>
+            IP线路表
+          </MobileNavLink>
+          <MobileNavLink to="/softdownload" onNavigate={onClose}>
+            软件下载
+          </MobileNavLink>
+          <MobileNavLink to="/help" onNavigate={onClose}>
+            帮助/教程
+          </MobileNavLink>
+          <MobileNavLink to="/client" onNavigate={onClose}>
+            下载客户端
+          </MobileNavLink>
+
+          {authed && (
+            <>
+              <button
+                type="button"
+                onClick={() => go("/admin")}
+                className="w-full flex items-center px-3 py-2.5 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+              >
+                个人中心
+              </button>
+              <button
+                type="button"
+                onClick={handleLogout}
+                className="w-full flex items-center px-3 py-2.5 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+              >
+                退出
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const MobileNavLink = ({
+  to,
+  onNavigate,
+  children,
+}: {
+  to: string
+  onNavigate: () => void
+  children: React.ReactNode
+}) => (
+  <NavLink
+    to={to}
+    onClick={onNavigate}
+    className={({ isActive }) =>
+      cn(
+        "w-full flex items-center px-3 py-2.5 rounded-lg text-sm transition-colors",
+        isActive
+          ? "bg-blue-50 text-blue-600 font-medium"
+          : "text-gray-700 hover:bg-gray-50",
+      )
+    }
+  >
+    {children}
+  </NavLink>
+)
+
+const SubItem = ({
+  onClick,
+  children,
+}: {
+  onClick: () => void
+  children: React.ReactNode
+}) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className="w-full flex items-center px-3 py-2 rounded-lg text-xs text-gray-500 hover:bg-blue-50 hover:text-blue-600 transition-colors"
+  >
+    {children}
+  </button>
+)
diff --git a/src/home/header.tsx b/src/home/header.tsx
index a287846..4f402bd 100644
--- a/src/home/header.tsx
+++ b/src/home/header.tsx
@@ -1,11 +1,17 @@
-import { useRef, useState, useSyncExternalStore } from "react"
-import { NavLink } from "react-router-dom"
+import { Menu, User } from "lucide-react"
+import { useEffect, useRef, useState, useSyncExternalStore } from "react"
+import { NavLink, useNavigate } from "react-router-dom"
+import { AUTH_EVENT, isAuthed } from "@/api/token"
 import ProductDropdown from "@/components/productDropdown"
 import ProfileOrLogin from "@/components/profileOrLogin"
 import Wrap from "@/components/wrap"
+import { useMediaQuery } from "@/lib/hooks/useMediaQuery"
 import { cn } from "@/lib/utils"
+import MobileMenu from "./_components/header/menu-mobile"
 
 export default function Header() {
+  const navigate = useNavigate()
+  const isWideDesktop = useMediaQuery("(min-width: 80rem)")
   const scroll = useSyncExternalStore(
     callback => {
       window.addEventListener("scroll", callback)
@@ -22,6 +28,20 @@ export default function Header() {
   const handleEnter = () => setOpenMenu(true)
   const handleLeave = () => setOpenMenu(false)
 
+  // 移动端状态
+  const [mobileMenu, setMobileMenu] = useState(false)
+  const [authed, setAuthed] = useState(isAuthed)
+
+  useEffect(() => {
+    const update = () => setAuthed(isAuthed())
+    window.addEventListener("focus", update)
+    window.addEventListener(AUTH_EVENT, update)
+    return () => {
+      window.removeEventListener("focus", update)
+      window.removeEventListener(AUTH_EVENT, update)
+    }
+  }, [])
+
   return (
     <header className={cn("fixed top-0 left-0 w-screen z-50 flex flex-col")}>
       <div
@@ -33,8 +53,21 @@ export default function Header() {
             : `bg-transparent shadow-none`,
         )}
       >
-        <Wrap className="h-20 max-md:h-16 flex justify-between pl-15 pr-15">
-          <nav className="flex items-center justify-between gap-4 lg:gap-8">
+        <Wrap className="h-20 max-md:h-16 flex justify-between pl-15 pr-15 max-md:pl-4 max-md:pr-4">
+          <nav className="flex items-center gap-4 lg:gap-8">
+            {/* logo + 网站名称 */}
+            <NavLink to="/" className="flex items-center gap-2 shrink-0">
+              <img
+                src="/favicon.svg"
+                alt="聚IP"
+                className="w-10 h-10 max-md:w-8 max-md:h-8 object-contain"
+              />
+              <span className="text-2xl max-md:text-xl font-bold bg-linear-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
+                聚IP
+              </span>
+            </NavLink>
+
+            {/* 桌面端菜单 */}
             <ul className="h-full items-stretch hidden lg:flex">
               <NavItem to="/">首页</NavItem>
               <MenuItem
@@ -43,16 +76,50 @@ export default function Header() {
                 onMouseEnter={handleEnter}
                 onMouseLeave={handleLeave}
               >
-                <ProductDropdown onNavigate={() => setOpenMenu(false)} />
+                <ProductDropdown
+                  size={isWideDesktop ? "lg" : "sm"}
+                  onNavigate={() => setOpenMenu(false)}
+                />
               </MenuItem>
               <NavItem to="/ipline">IP线路表</NavItem>
               <NavItem to="/softdownload">软件下载</NavItem>
               <NavItem to="/help">帮助/教程</NavItem>
             </ul>
           </nav>
-          <ProfileOrLogin />
+
+          {/* 桌面端登录/注册 */}
+          <div className="max-lg:hidden flex items-center">
+            <ProfileOrLogin />
+          </div>
+
+          {/* 移动端：未登录显示用户图标+汉堡菜单，已登录仅显示汉堡菜单 */}
+          <div className="lg:hidden flex items-center gap-2">
+            {!authed && (
+              <button
+                type="button"
+                aria-label="登录/注册"
+                onClick={() => navigate("/login")}
+                className="p-2 text-slate-700 hover:text-blue-500 transition-colors cursor-pointer"
+              >
+                <User className="w-6 h-6" />
+              </button>
+            )}
+            <button
+              type="button"
+              aria-label="打开菜单"
+              onClick={() => setMobileMenu(true)}
+              className="p-2 text-slate-700 hover:text-blue-500 transition-colors cursor-pointer"
+            >
+              <Menu className="w-6 h-6" />
+            </button>
+          </div>
         </Wrap>
       </div>
+
+      {/* 移动端左侧菜单栏 */}
+      {mobileMenu && (
+        <MobileMenu authed={authed} onClose={() => setMobileMenu(false)} />
+      )}
     </header>
   )
 }
@@ -147,15 +214,11 @@ const MenuItem = ({
 
       <div
         className={cn(
-          "absolute top-full left-0 pt-3 w-screen max-w-4xl transition-all duration-200 z-50",
+          "fixed left-1/2 top-20 -translate-x-1/2 w-[min(56rem,calc(100vw-2rem))] transition-all duration-200 z-50",
           isOpen
             ? "opacity-100 visible translate-y-0"
             : "opacity-0 invisible -translate-y-2 pointer-events-none",
         )}
-        style={{
-          left: "50%",
-          transform: `translateX(-7%)`,
-        }}
       >
         <div className="bg-white rounded-xl shadow-2xl border border-gray-100/80 p-6 overflow-visible">
           {children}
diff --git a/src/home/index.tsx b/src/home/index.tsx
index 6fb2809..6920201 100644
--- a/src/home/index.tsx
+++ b/src/home/index.tsx
@@ -1,6 +1,9 @@
+import { ChevronLeft, ChevronRight } from "lucide-react"
 import type { ReactNode } from "react"
+import { useRef, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import Wrap from "@/components/wrap"
+import { useIsMobile } from "@/lib/hooks/useMediaQuery"
 import banner from "./_assets/banner.webp"
 import s1 from "./_assets/s1.webp"
 import s2 from "./_assets/s2.webp"
@@ -22,6 +25,35 @@ export default function HomePage() {
   const handleFreeTrial = () => {
     navigate("/login")
   }
+
+  const scrollContainerRef = useRef<HTMLUListElement>(null)
+  const [showLeftArrow, setShowLeftArrow] = useState(false)
+  const [showRightArrow, setShowRightArrow] = useState(true)
+  const isMobile = useIsMobile()
+
+  const scroll = (direction: "left" | "right") => {
+    if (!scrollContainerRef.current) return
+    const container = scrollContainerRef.current
+    const scrollAmount = container.clientWidth / 2
+    const newScrollLeft =
+      direction === "left"
+        ? container.scrollLeft - scrollAmount
+        : container.scrollLeft + scrollAmount
+    container.scrollTo({
+      left: newScrollLeft,
+      behavior: "smooth",
+    })
+  }
+
+  const handleScroll = () => {
+    if (!scrollContainerRef.current) return
+    const container = scrollContainerRef.current
+    setShowLeftArrow(container.scrollLeft > 10)
+    setShowRightArrow(
+      container.scrollLeft < container.scrollWidth - container.clientWidth - 10,
+    )
+  }
+
   return (
     <>
       <Common />
@@ -37,7 +69,7 @@ export default function HomePage() {
         />
 
         <Wrap className="relative pt-64 pb-48 max-md:pt-32 max-md:pb-24">
-          <h1 className="text-4xl md:text-5xl font-bold text-center md:text-left">
+          <h1 className="text-4xl md:text-5xl font-bold text-center md:text-left sm:text-left">
             聚集优质IP产品，尽在聚IP
           </h1>
           <p className="mt-6 text-gray-600 text-center md:text-left">
@@ -68,17 +100,69 @@ export default function HomePage() {
       <section className="w-full relative shadow-blue-50 bg-white">
         <Wrap className="relative pt-32 pb-48 max-md:pt-32 max-md:pb-24">
           <PageSection title="为什么我们是你的最佳选择">
-            <p className="text-gray-600 text-center text-sm">
+            <p className="text-gray-600 text-center text-sm hidden md:block">
               国内三大运营商正规授权，千万级代理IP资源，权威与品质的双重保障
             </p>
-            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 pt-16">
-              <ProductTypeCard icon={s1} title="全网产品最多，IP库最大" />
-              <ProductTypeCard icon={s2} title="支持全设备及协议" />
-              <ProductTypeCard icon={s3} title="用户独享宽带" />
-              <ProductTypeCard icon={s4} title="价低质优，免费测试" />
-              <ProductTypeCard icon={s5} title="专属化产品定制" />
-              <ProductTypeCard icon={s6} title="专业的服务团队" />
-            </ul>
+            <div className="relative pt-16">
+              {/* 左箭头 - 移动端显示 */}
+              {isMobile && showLeftArrow && (
+                <button
+                  onClick={() => scroll("left")}
+                  className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white/90 hover:bg-white rounded-full shadow-lg p-2 border border-gray-200 transition-all md:hidden"
+                >
+                  <ChevronLeft className="w-5 h-5 text-gray-600" />
+                </button>
+              )}
+
+              {/* 右箭头 - 移动端显示 */}
+              {isMobile && showRightArrow && (
+                <button
+                  onClick={() => scroll("right")}
+                  className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white/90 hover:bg-white rounded-full shadow-lg p-2 border border-gray-200 transition-all md:hidden"
+                >
+                  <ChevronRight className="w-5 h-5 text-gray-600" />
+                </button>
+              )}
+
+              {/* 左右渐变遮罩 - 移动端显示 */}
+              {isMobile && (
+                <>
+                  <div className="absolute left-0 top-0 bottom-0 w-12 bg-linear-to-r from-white to-transparent pointer-events-none z-5 md:hidden" />
+                  <div className="absolute right-0 top-0 bottom-0 w-12 bg-linear-to-r from-white to-transparent pointer-events-none z-5 md:hidden" />
+                </>
+              )}
+
+              {/* 滚动列表 */}
+              <ul
+                ref={scrollContainerRef}
+                onScroll={handleScroll}
+                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 overflow-x-auto scroll-smooth"
+                style={{
+                  gridTemplateColumns: "repeat(6, 1fr)",
+                  scrollbarWidth: "none",
+                  msOverflowStyle: "none",
+                }}
+              >
+                <li className="min-w-37.5">
+                  <ProductTypeCard icon={s1} title="全网产品最多，IP库最大" />
+                </li>
+                <li className="min-w-37.5">
+                  <ProductTypeCard icon={s2} title="支持全设备及协议" />
+                </li>
+                <li className="min-w-37.5">
+                  <ProductTypeCard icon={s3} title="用户独享宽带" />
+                </li>
+                <li className="min-w-37.5">
+                  <ProductTypeCard icon={s4} title="价低质优，免费测试" />
+                </li>
+                <li className="min-w-37.5">
+                  <ProductTypeCard icon={s5} title="专属化产品定制" />
+                </li>
+                <li className="min-w-37.5">
+                  <ProductTypeCard icon={s6} title="专业的服务团队" />
+                </li>
+              </ul>
+            </div>
             <div className="flex max-md:flex-col justify-between items-center gap-6 md:gap-10 mt-10 lg:mt-16 p-6 md:p-12 lg:p-20 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white">
               <div className="flex flex-col">
                 <h3 className="text-xl lg:text-2xl font-bold mb-4">
@@ -92,7 +176,7 @@ export default function HomePage() {
                 <img src={s7} alt="产品" className="w-20 h-20 rounded-lg" />
               </div>
             </div>
-            <div className="flex flex-col pt-12 lg:pt-24 ">
+            <div className="flex flex-col pt-12 lg:pt-24">
               <h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
                 海量地区，遍布全国的优质IP代理资源
               </h2>
@@ -100,36 +184,37 @@ export default function HomePage() {
                 遍布全国的代理服务器节点为用户提供智能帮助
               </p>
             </div>
+
             <div className="pt-10 lg:pt-20">
-              <ul className="shadow-[0_0_20px_4px] shadow-blue-50 p-8 flex max-lg:flex-col">
-                <li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4 ">
-                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
+              <ul className="grid grid-cols-2 lg:flex p-8 max-md:p-0 gap-4 lg:gap-0">
+                <li className="flex flex-col items-center justify-center lg:flex-1">
+                  <p className="text-3xl lg:text-4xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold">
                     10万+
                   </p>
-                  <p className="text-sm">全国节点覆盖</p>
+                  <p className="text-sm text-gray-600">全国节点覆盖</p>
                 </li>
-                <li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4">
-                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
+                <li className="flex flex-col items-center justify-center lg:flex-1">
+                  <p className="text-3xl lg:text-4xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold">
                     100万+
                   </p>
-                  <p className="text-sm">全国独享IP池</p>
+                  <p className="text-sm text-gray-600">全国独享IP池</p>
                 </li>
-                <li className="flex-1 flex flex-col items-center justify-center max-lg:mb-4">
-                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
+                <li className="flex flex-col items-center justify-center lg:flex-1">
+                  <p className="text-3xl lg:text-4xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold">
                     10万+
                   </p>
-                  <p className="text-sm">全国实时在线IP数</p>
+                  <p className="text-sm text-gray-600">全国实时在线IP数</p>
                 </li>
-                <li className="flex-1 flex flex-col items-center justify-center">
-                  <p className="mt-9 max-lg:mt-2 text-3xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">
+                <li className="flex flex-col items-center justify-center lg:flex-1">
+                  <p className="text-3xl lg:text-4xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold">
                     99%
                   </p>
-                  <p className="text-sm">IP可用率</p>
+                  <p className="text-sm text-gray-600">IP可用率</p>
                 </li>
               </ul>
             </div>
 
-            <div className="flex flex-col pt-12 lg:pt-24 ">
+            <div className="flex flex-col pt-12 lg:pt-24">
               <h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
                 满足您的多种业务需求
               </h2>
@@ -138,7 +223,65 @@ export default function HomePage() {
               </p>
             </div>
 
-            <div className="flex flex-col mt-10 lg:mt-20">
+            {/* ========== 移动端 ========== */}
+            <div className="grid grid-cols-2 gap-4 mt-10 lg:hidden">
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  爬虫抓取
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  3000W高匿名IP，可以轻松抓取企业信息、分类信息、房地产信息、电商信息
+                </p>
+              </div>
+
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  数据采集
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  用于大数据采集的多样化利用场景，快速采集SEO数据优化、金融理财、地域信息数据
+                </p>
+              </div>
+
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  营销推广
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  论坛发帖、问答推广、网上购物、投票点赞等，根据渠道操作要求，定制IP完成营销推广
+                </p>
+              </div>
+
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  电子商务
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  可帮助用户切换网络，模拟多个独立账号，有助于用户参与限时促销活动
+                </p>
+              </div>
+
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  游戏工作室
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  保证IP稳定，不掉线，在有效时长内完成游戏试玩、升级、完成游戏工作室操作要求
+                </p>
+              </div>
+
+              <div className="bg-white rounded-xl shadow-[0_0_20px_4px] shadow-blue-50 p-4">
+                <h4 className="text-sm font-semibold text-gray-800 mb-1">
+                  自媒体运营
+                </h4>
+                <p className="text-[10px] text-gray-500 leading-relaxed">
+                  可帮助自媒体运营者维护账号独立性，为每个账号赋予独立IP，避免IP地址关联
+                </p>
+              </div>
+            </div>
+
+            {/* ========== 桌面端 ========== */}
+            <div className="hidden lg: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">
@@ -197,16 +340,65 @@ export default function HomePage() {
               </div>
             </div>
 
-            <div className="flex flex-col pt-12 lg:pt-24 ">
+            <div className="flex flex-col pt-12 lg:pt-24">
               <h2 className="text-center text-2xl lg:text-3xl font-bold mb-6 lg:mb-16">
                 为您提供质量保障
               </h2>
               <p className="text-gray-600 text-center text-sm">
-                国内三大运营商正规授权，千万级代理IP资源，权威与品质的双重保障
+                国内三大运营商正规授权，权威与品质的双重保障
               </p>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-12 pt-20">
+            {/* 移动端 */}
+            <div className="flex flex-col gap-6 pt-10 md:hidden">
+              {/* 售前咨询 */}
+              <div className="flex items-start gap-4 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-xl p-5">
+                <div className="w-16 h-16 bg-blue-50 rounded-xl flex items-center justify-center shrink-0">
+                  <img src={s10} alt="售前咨询" className="w-10 h-10" />
+                </div>
+                <div>
+                  <h3 className="text-base font-bold text-gray-800 mb-1">
+                    售前咨询
+                  </h3>
+                  <p className="text-xs text-gray-600 leading-relaxed">
+                    注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关答疑
+                  </p>
+                </div>
+              </div>
+
+              {/* 售中服务 */}
+              <div className="flex items-start gap-4 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-xl p-5">
+                <div className="w-16 h-16 bg-blue-50 rounded-xl flex items-center justify-center shrink-0">
+                  <img src={s11} alt="售中服务" className="w-10 h-10" />
+                </div>
+                <div>
+                  <h3 className="text-base font-bold text-gray-800 mb-1">
+                    售中服务
+                  </h3>
+                  <p className="text-xs text-gray-600 leading-relaxed">
+                    全国100万+动态IP代理资源免费测试，先测后买让您安心使用
+                  </p>
+                </div>
+              </div>
+
+              {/* 售后保障 */}
+              <div className="flex items-start gap-4 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-xl p-5">
+                <div className="w-16 h-16 bg-blue-50 rounded-xl flex items-center justify-center shrink-0">
+                  <img src={s12} alt="售后保障" className="w-10 h-10" />
+                </div>
+                <div>
+                  <h3 className="text-base font-bold text-gray-800 mb-1">
+                    售后保障
+                  </h3>
+                  <p className="text-xs text-gray-600 leading-relaxed">
+                    1V1专属售后答疑，技术团队7*24小时在线支持提供专属解决方案
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* 桌面端 */}
+            <div className="hidden md:grid grid-cols-3 gap-12 pt-20">
               <div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
                 <div className="flex w-full mb-5 bg-blue-50 items-center justify-center">
                   <img src={s10} alt="售前咨询" className="p-6" />
@@ -215,8 +407,7 @@ export default function HomePage() {
                   售前咨询
                 </h2>
                 <p className="text-xs text-gray-600">
-                  注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关
-                  答疑
+                  注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关答疑
                 </p>
               </div>
               <div className="flex flex-col shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-8">
@@ -368,13 +559,13 @@ function PageSection(props: { title: string; children: ReactNode }) {
 
 function ProductTypeCard(props: { icon: string; title: string }) {
   return (
-    <li className="flex flex-col items-center gap-5 rounded-lg text-center gap-6">
+    <div className="flex flex-col items-center gap-5 rounded-lg text-center">
       <img
         src={props.icon}
         alt={props.title}
         className="w-20 h-20 object-cover"
       />
       <p className="text-sm">{props.title}</p>
-    </li>
+    </div>
   )
 }
diff --git a/src/lib/hooks/useMediaQuery.ts b/src/lib/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..fd7c032
--- /dev/null
+++ b/src/lib/hooks/useMediaQuery.ts
@@ -0,0 +1,36 @@
+import { useSyncExternalStore } from "react"
+
+const subscribeMediaQuery = (query: string) => (callback: () => void) => {
+  if (typeof window === "undefined") return () => {}
+  const mql = window.matchMedia(query)
+  mql.addEventListener("change", callback)
+  return () => mql.removeEventListener("change", callback)
+}
+
+const getMediaQuerySnapshot = (query: string) => () => {
+  if (typeof window === "undefined") return false
+  return window.matchMedia(query).matches
+}
+
+export function useMediaQuery(query: string): boolean {
+  return useSyncExternalStore(
+    subscribeMediaQuery(query),
+    getMediaQuerySnapshot(query),
+    () => false,
+  )
+}
+
+// 移动端：< 768px（对应 Tailwind md 断点以下）
+export function useIsMobile(): boolean {
+  return useMediaQuery("(max-width: 47.999rem)")
+}
+
+// 桌面端：>= 768px
+export function useIsDesktop(): boolean {
+  return useMediaQuery("(min-width: 48rem)")
+}
+
+// 窄桌面/平板横屏：< 1280px（对应 Tailwind xl 断点以下）
+export function useIsNarrowDesktop(): boolean {
+  return useMediaQuery("(max-width: 79.999rem)")
+}