feat: small

src/main.tsx

@@ -20,7 +20,7 @@ import zhCN from "antd/locale/zh_CN";
 import React from "react";
 import ReactDOM from "react-dom/client";
 
-import { NeosRouter } from "./ui/Neos";
+import { NeosRouter } from "./ui/NeosRouter";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement

src/ui/Layout/index.module.scss

@@ -4,7 +4,7 @@
   height: var(--height);
   display: flex;
   flex-wrap: wrap;
-  align-content: center;
+  align-items: center;
   padding: 0 2rem;
   gap: 1.5rem;
   box-sizing: border-box;
@@ -19,6 +19,18 @@
     text-decoration: none;
     font-size: 0.825rem;
     line-height: var(--height);
-    // height: fit-content;
+    transition: 0.3s;
+    &:hover {
+      opacity: 0.8;
+    }
+    &:global(.active) {
+      box-shadow: 0px -2px 0 0 white inset;
+    }
   }
 }
+
+.profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}

src/ui/Layout/index.tsx

@@ -4,10 +4,12 @@ import { NavLink, Outlet, type LoaderFunction } from "react-router-dom";
 import { useConfig } from "@/config";
 import { accountStore, type User } from "@/stores";
 
-const NeosConfig = useConfig();
 import styles from "./index.module.scss";
 import { getCookie, CookieKeys } from "@/ui/Shared";
+import { Avatar } from "antd";
+import { useSnapshot } from "valtio";
 
+const NeosConfig = useConfig();
 export const loader: LoaderFunction = () => {
   const user = getCookie<User>(CookieKeys.USER);
   if (user) accountStore.login(user);
@@ -15,6 +17,7 @@ export const loader: LoaderFunction = () => {
 };
 
 export const Component = () => {
+  // TODO 根据是否登录，显示内容
   return (
     <>
       <nav className={styles.navbar}>
@@ -28,9 +31,17 @@ export const Component = () => {
         <NavLink to="/match">匹配</NavLink>
         <NavLink to="/build">组卡</NavLink>
         <span style={{ flexGrow: 1 }} />
-        <NavLink to="/profile">个人中心</NavLink>
+        <span className={styles.profile}>
+          <NeosAvatar />
+          <NavLink to="/profile">个人中心</NavLink>
+        </span>
       </nav>
       <Outlet />
     </>
   );
 };
+
+const NeosAvatar = () => {
+  const { user } = useSnapshot(accountStore);
+  return <Avatar size="small" src={user?.avatar_url} />;
+};

src/ui/Neos.tsx → src/ui/NeosRouter.tsx

@@ -36,7 +36,7 @@ const _router = createBrowserRouter([
       },
       {
         path: "/profile",
-        lazy: () => import("./Profile"),
+        lazy: () => import("./NewProfile"),
       },
       {
         path: "/waitroom/:ip/:player/:passWd",

src/ui/NewProfile/index.tsx

+export const Component = () => <>profile</>;
+Component.displayName = "Build";