更新登录功能

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,108 +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={() => window.open("https://lanhuip.com", "_blank")}
-        />
-        <ProductCard
-          title="HTTP/S5"
-          desc="海量全球住宅优质IP，4G/5G真实手机IP"
-          tag="全球"
-          onClick={() => handleClick("/product/http")}
-        />
-        <ProductCard
-          title="软路由成本价"
-          desc="云端自动切换IP，更易于调用与开发"
-          onClick={() => handleClick("/product/routeros")}
-        />
-        <ProductCard
-          title="动态Vps"
-          desc="IP独享，高带宽，灵活控制存活周期"
-          onClick={() => window.open("http://vps.juip.com", "_blank")}
-        />
-      </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>
-)