feat: nav link2

src/ui/Layout/index.module.scss

@@ -32,12 +32,16 @@
     font-size: 0.825rem;
     line-height: var(--header-height);
     transition: 0.3s;
-    &:hover {
+    &:not(.disabled):hover {
       box-shadow: 0px 2px 0 0 white inset;
     }
     &:global(.active) {
       box-shadow: 0px 2px 0 0 white inset;
     }
+    &.disabled {
+      color: hsl(0, 0%, 50%);
+      cursor: not-allowed;
+    }
   }
 }
 

src/ui/Layout/index.tsx

 import { Avatar } from "antd";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import {
   type LoaderFunction,
   NavLink,
@@ -19,6 +19,7 @@ import {
   initSqlite,
   initWASM,
 } from "./utils";
+import classNames from "classnames";
 
 const NeosConfig = useConfig();
 
@@ -30,6 +31,20 @@ export const loader: LoaderFunction = async () => {
   return null;
 };
 
+const HeaderBtn: React.FC<
+  React.PropsWithChildren<{ to: string; disabled?: boolean }>
+> = ({ to, children, disabled = false }) => {
+  const Element = disabled ? "div" : NavLink;
+  return (
+    <Element
+      to={disabled ? "/" : to}
+      className={classNames(styles.link, { [styles.disabled]: disabled })}
+    >
+      {children}
+    </Element>
+  );
+};
+
 export const Component = () => {
   // 捕获SSO登录
   const location = useLocation();
@@ -37,7 +52,9 @@ export const Component = () => {
     location.search && handleSSOLogin(location.search);
   }, [location.search]);
 
-  // TODO 根据是否登录，显示内容
+  // 根据是否登录，显示内容
+  const logined = Boolean(useSnapshot(accountStore).user);
+
   const { pathname } = useLocation();
   const pathnamesHideHeader = ["/waitroom"];
   return (
@@ -56,21 +73,19 @@ export const Component = () => {
             />
           </a>
 
-          <NavLink to="/" className={styles.link}>
-            主页
-          </NavLink>
-          <NavLink to="/match" className={styles.link}>
+          <HeaderBtn to="/">主页</HeaderBtn>
+          <HeaderBtn to="/match" disabled={!logined}>
             匹配
-          </NavLink>
-          <NavLink to="/build" className={styles.link}>
+          </HeaderBtn>
+          <HeaderBtn to="/build" disabled={!logined}>
             组卡
-          </NavLink>
+          </HeaderBtn>
           <span style={{ flexGrow: 1 }} />
           <span className={styles.profile}>
             <NeosAvatar />
-            <NavLink to="/profile" className={styles.link}>
+            <HeaderBtn to="/profile" disabled={!logined}>
               个人中心
-            </NavLink>
+            </HeaderBtn>
           </span>
         </nav>
       )}