perf(Header): 组件拆分

src/components/Header/Auth.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { parseCookies } from 'nookies';
+import { useShallow } from 'zustand/react/shallow';
+
+import HeaderAvatar from './HeaderAvatar';
+
+import { LoginModal } from '@/components';
+import useUserStore from '@/store/user';
+
+export default function Auth() {
+  const { token } = parseCookies();
+  const { showLogin, setShowLogin } = useUserStore(
+    useShallow((state) => ({
+      showLogin: state.showLogin,
+      setShowLogin: state.setShowLogin,
+    })),
+  );
+
+  return (
+    <div>
+      {!!token ? (
+        <HeaderAvatar className="ml-[40px]" />
+      ) : (
+        <div>
+          <button
+            className="w-[74px] h-[36px] ml-[40px] border-[#000] border-[1.5px] rounded-[60px] text-[17px] hover:bg-brand hover:border-brand hover:text-[#fff] "
+            onClick={() => setShowLogin(true)}
+          >
+            登录
+          </button>
+        </div>
+      )}
+      {/* 登录框 */}
+      {showLogin && <LoginModal />}
+    </div>
+  );
+}

src/components/Header/Header.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import Auth from './Auth';
+import Nav from './Nav';
+
+import { Logo } from '@/components';
+
+export default function Header({ className }: { className?: string }) {
+  return (
+    <header className={`w-full h-[80px] z-2 ${className}`}>
+      <div className="relative w-[1200px] h-full mx-auto flex items-center justify-between">
+        <Logo />
+        <div className="h-full flex items-center">
+          <Nav />
+          <Auth />
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/Header/Nav.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export default function Nav() {
+  const pathName = usePathname();
+  const menuList = [
+    {
+      name: '首页',
+      path: '/',
+    },
+    {
+      name: 'APP下载',
+      path: '/download',
+    },
+    {
+      name: '关于我们',
+      path: '/about',
+    },
+  ];
+
+  return (
+    <nav>
+      <ul className="flex flex-row items-center space-x-[40px]">
+        {menuList.map(({ name, path }) => (
+          <li
+            key={path}
+            className={`text-[18px] leading-[25.2px] font-medium hover:text-[rgba(0,0,0,0.95)] ${pathName === path ? 'text-[rgba(0,0,0,0.95)]' : 'text-[rgba(0,0,0,0.4)]'}`}
+          >
+            <Link href={path}>{name}</Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

src/components/Header/index.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { useShallow } from 'zustand/react/shallow';
-
-import HeaderAvatar from './HeaderAvatar';
-
-import { Logo, LoginModal } from '@/components';
-import useUserStore from '@/store/user';
-
-export default function Header({ className }: { className?: string }) {
-  const { userInfo, showLogin, setShowLogin } = useUserStore(
-    useShallow((state) => ({
-      userInfo: state.userInfo,
-      showLogin: state.showLogin,
-      setShowLogin: state.setShowLogin,
-    })),
-  );
-  const pathName = usePathname();
-  const [redirect, setRedirect] = useState<string>('');
-  const menuList = [
-    {
-      name: '首页',
-      path: '/',
-    },
-    {
-      name: 'APP下载',
-      path: '/download',
-    },
-    {
-      name: '关于我们',
-      path: '/about',
-    },
-  ];
-
-  // 登录重定向
-  useEffect(() => {
-    const searchParams = new URLSearchParams(window.location.search);
-    const redirectParam = searchParams.get('redirect');
-    setRedirect(redirectParam || '');
-    if (!userInfo.id && redirectParam) {
-      setShowLogin(true);
-    }
-  }, [pathName]);
-
-  return (
-    <header className={`w-full h-[80px] z-2 ${className}`}>
-      <div className="relative w-[1200px] h-full mx-auto flex items-center justify-between">
-        <Logo />
-        <div className="h-full flex flex-row items-center">
-          <ul className="flex flex-row items-center space-x-[40px]">
-            {menuList.map(({ name, path }) => (
-              <li
-                key={path}
-                className={`text-[18px] leading-[25.2px] font-medium hover:text-[rgba(0,0,0,0.95)] ${pathName === path ? 'text-[rgba(0,0,0,0.95)]' : 'text-[rgba(0,0,0,0.4)]'}`}
-              >
-                <Link href={path}>{name}</Link>
-              </li>
-            ))}
-          </ul>
-
-          {/* 登录按钮/头像 */}
-          {!!userInfo.id ? (
-            <HeaderAvatar className="ml-[40px]" />
-          ) : (
-            <button
-              className="w-[74px] h-[36px] ml-[40px] border-[#000] border-[1.5px] rounded-[60px] text-[17px] hover:bg-brand hover:border-brand hover:text-[#fff] "
-              onClick={() => setShowLogin(true)}
-            >
-              登录
-            </button>
-          )}
-        </div>
-
-        {/* 登录框 */}
-        {showLogin && <LoginModal redirect={redirect} />}
-      </div>
-    </header>
-  );
-}