Initial commit from Create vite

src/home/_components/header/common.tsx

@@ -0,0 +1,137 @@
+import { useState } from "react"
+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"
+
+export default function Common() {
+  const [activePopup, setActivePopup] = useState<"gzh" | "tel" | null>(null)
+
+  // QQ点击跳转
+  const handleQQClick = () => {
+    window.location.href =
+      "https://admin.qidian.qq.com/template/blue/mp/menu/qr-code-jump.html?linkType=0&env=ol&kfuin=2852138148&fid=299&key=f377ec024ca45115a03a7632c7bda230&cate=1&source=&isLBS=&isCustomEntry=&type=16&ftype=1&_type=wpa&qidian=true"
+  }
+
+  // 微信点击跳转
+  const handleWxClick = () => {
+    window.open("https://work.weixin.qq.com/kfid/kfc458bc58e79e5093f", "_blank")
+  }
+
+  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>
+
+      {/* 微信 */}
+      <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>
+        )}
+      </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>
+
+        {/* 电话悬浮弹窗 */}
+        {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={top} alt="回到顶部" className="w-7 h-7 object-contain" />
+        <span className="text-xs mt-1.5">回到顶部</span>
+      </button>
+    </div>
+  )
+}

src/home/_components/header/menu-client.tsx

@@ -0,0 +1,16 @@
+import { NavLink } from "react-router-dom"
+
+export default function MenuClient() {
+  return (
+    <NavLink
+      to="/client"
+      className={({ isActive }) =>
+        isActive
+          ? "text-blue-500 border-b-2 border-blue-500 py-1"
+          : "text-slate-700 py-1"
+      }
+    >
+      下载客户端
+    </NavLink>
+  )
+}

src/home/_components/header/menu-download.tsx

@@ -0,0 +1,16 @@
+import { NavLink } from "react-router-dom"
+
+export default function MenuDownload() {
+  return (
+    <NavLink
+      to="/soft-download"
+      className={({ isActive }) =>
+        isActive
+          ? "text-blue-500 border-b-2 border-blue-500 py-1"
+          : "text-slate-700 py-1"
+      }
+    >
+      软件下载
+    </NavLink>
+  )
+}

src/home/_components/header/menu-help.tsx

@@ -0,0 +1,16 @@
+import { NavLink } from "react-router-dom"
+
+export default function MenuHelp() {
+  return (
+    <NavLink
+      to="/help"
+      className={({ isActive }) =>
+        isActive
+          ? "text-blue-500 border-b-2 border-blue-500 py-1"
+          : "text-slate-700 py-1"
+      }
+    >
+      帮助/教程
+    </NavLink>
+  )
+}

src/home/_components/header/menu-ip.tsx

@@ -0,0 +1,16 @@
+import { NavLink } from "react-router-dom"
+
+export default function MenuIp() {
+  return (
+    <NavLink
+      to="/ip-line"
+      className={({ isActive }) =>
+        isActive
+          ? "text-blue-500 border-b-2 border-blue-500 py-1"
+          : "text-slate-700 py-1"
+      }
+    >
+      IP线路表
+    </NavLink>
+  )
+}

src/home/_components/header/menu-product.tsx

@@ -0,0 +1,16 @@
+import { NavLink } from "react-router-dom"
+
+export default function MenuProduct() {
+  return (
+    <NavLink
+      to="/product"
+      className={({ isActive }) =>
+        isActive
+          ? "text-blue-500 border-b-2 border-blue-500 py-1"
+          : "text-slate-700 py-1"
+      }
+    >
+      产品购买
+    </NavLink>
+  )
+}