refactor(web): navbar and avatar

shared/model/user.ts

@@ -3,6 +3,7 @@ import { request } from '../api/request';
 export interface UserLoginInfo {
   _id: string;
   email: string;
+  nickname: string;
   password: string;
   token: string;
   avatar: string | null;

web/src/components/Avatar.tsx

@@ -48,5 +48,3 @@ export const Avatar: React.FC<AvatarProps> = React.memo((props) => {
   );
 });
 Avatar.displayName = 'Avatar';
-
-export default Avatar;

web/src/routes/Main/Navbar.tsx

@@ -1,12 +1,61 @@
 import React from 'react';
 import { useAppSelector } from '../../hooks/useAppSelector';
+import { Icon } from '@iconify/react';
+import clsx, { ClassValue } from 'clsx';
+import { Avatar } from '../../components/Avatar';
+
+const NavbarNavItem: React.FC<{
+  className?: ClassValue;
+}> = React.memo((props) => {
+  return (
+    <div
+      className={clsx(
+        'w-10 h-10 hover:rounded-lg bg-gray-300 transition-all rounded-1/2 cursor-pointer flex items-center justify-center overflow-hidden',
+        props.className
+      )}
+    >
+      {props.children}
+    </div>
+  );
+});
+NavbarNavItem.displayName = 'NavbarNavItem';
 
 /**
  * 导航栏组件
  */
-const Navbar: React.FC = React.memo(() => {
+export const Navbar: React.FC = React.memo(() => {
   const userInfo = useAppSelector((state) => state.user.info);
 
-  return <div></div>;
+  return (
+    <div className="w-16 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1">
+      {/* Navbar */}
+      <div className="flex-1">
+        <NavbarNavItem>
+          <Avatar
+            shape="square"
+            size="large"
+            name={userInfo?.nickname}
+            src={userInfo?.avatar}
+          />
+        </NavbarNavItem>
+        <div className="h-px w-full bg-white mt-4 mb-4"></div>
+        <div className="space-y-2">
+          <NavbarNavItem />
+          <NavbarNavItem />
+          <NavbarNavItem />
+          <NavbarNavItem />
+          <NavbarNavItem className="bg-green-500">
+            <Icon className="text-3xl text-white" icon="mdi-plus" />
+          </NavbarNavItem>
+        </div>
+      </div>
+      <div>
+        <Icon
+          className="text-3xl text-white cursor-pointer"
+          icon="mdi-dots-horizontal"
+        />
+      </div>
+    </div>
+  );
 });
 Navbar.displayName = 'Navbar';

web/src/routes/Main/index.tsx

@@ -1,49 +1,13 @@
-import { Icon } from '@iconify/react';
-import clsx, { ClassValue } from 'clsx';
 import React from 'react';
+import { Navbar } from './Navbar';
 import { MainProvider } from './Provider';
 
-const NavbarNavItem: React.FC<{
-  className?: ClassValue;
-}> = React.memo((props) => {
-  return (
-    <div
-      className={clsx(
-        'w-10 h-10 hover:rounded-lg bg-gray-300 transition-all rounded-1/2 cursor-pointer flex items-center justify-center',
-        props.className
-      )}
-    >
-      {props.children}
-    </div>
-  );
-});
-
 export const MainRoute: React.FC = React.memo(() => {
   return (
     <div className="flex h-full">
       <MainProvider>
-        <div className="w-16 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1">
-          {/* Navbar */}
-          <div className="flex-1">
-            <NavbarNavItem />
-            <div className="h-px w-full bg-white mt-4 mb-4"></div>
-            <div className="space-y-2">
-              <NavbarNavItem />
-              <NavbarNavItem />
-              <NavbarNavItem />
-              <NavbarNavItem />
-              <NavbarNavItem className="bg-green-500">
-                <Icon className="text-3xl text-white" icon="mdi-plus" />
-              </NavbarNavItem>
-            </div>
-          </div>
-          <div>
-            <Icon
-              className="text-3xl text-white cursor-pointer"
-              icon="mdi-dots-horizontal"
-            />
-          </div>
-        </div>
+        <Navbar />
+
         <div className="w-56 bg-gray-800 p-2">
           {/* Sidebar */}
           <div className="w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded p-2">