feat: add avatarUrl to User interface; update HeaderUserbox to display username and email

Author: NarwhalChen

dashboard/src/contexts/AuthContext.tsx

@@ -16,6 +16,7 @@ import {
 interface User {
   email: string;
   username: string;
+  avatarUrl: string;
 }
 
 interface AuthContextValue {

dashboard/src/layouts/SidebarLayout/Header/Userbox/index.tsx

@@ -1,70 +1,65 @@
-import { useRef, useState } from 'react';
-
+import React, { FC, useRef, useState } from 'react';
 import { NavLink } from 'react-router-dom';
-
 import {
   Avatar,
   Box,
   Button,
   Divider,
   Hidden,
-  lighten,
   List,
   ListItem,
   ListItemText,
   Popover,
   Typography
 } from '@mui/material';
-
-import InboxTwoToneIcon from '@mui/icons-material/InboxTwoTone';
-import { styled } from '@mui/material/styles';
+import { styled, lighten } from '@mui/material/styles';
 import ExpandMoreTwoToneIcon from '@mui/icons-material/ExpandMoreTwoTone';
 import AccountBoxTwoToneIcon from '@mui/icons-material/AccountBoxTwoTone';
-import LockOpenTwoToneIcon from '@mui/icons-material/LockOpenTwoTone';
+import InboxTwoToneIcon from '@mui/icons-material/InboxTwoTone';
 import AccountTreeTwoToneIcon from '@mui/icons-material/AccountTreeTwoTone';
+import LockOpenTwoToneIcon from '@mui/icons-material/LockOpenTwoTone';
+import { useQuery } from '@apollo/client';
+import { GET_USER_INFO } from 'src/graphql/request';
+import { useAuth } from 'src/contexts/AuthContext';
 
 const UserBoxButton = styled(Button)(
   ({ theme }) => `
-        padding-left: ${theme.spacing(1)};
-        padding-right: ${theme.spacing(1)};
+    padding-left: ${theme.spacing(1)};
+    padding-right: ${theme.spacing(1)};
 `
 );
 
 const MenuUserBox = styled(Box)(
   ({ theme }) => `
-        background: ${theme.colors.alpha.black[5]};
-        padding: ${theme.spacing(2)};
+    background: ${theme.colors.alpha.black[5]};
+    padding: ${theme.spacing(2)};
 `
 );
 
 const UserBoxText = styled(Box)(
   ({ theme }) => `
-        text-align: left;
-        padding-left: ${theme.spacing(1)};
+    text-align: left;
+    padding-left: ${theme.spacing(1)};
 `
 );
 
 const UserBoxLabel = styled(Typography)(
   ({ theme }) => `
-        font-weight: ${theme.typography.fontWeightBold};
-        color: ${theme.palette.secondary.main};
-        display: block;
+    font-weight: ${theme.typography.fontWeightBold};
+    color: ${theme.palette.secondary.main};
+    display: block;
 `
 );
 
 const UserBoxDescription = styled(Typography)(
   ({ theme }) => `
-        color: ${lighten(theme.palette.secondary.main, 0.5)}
+    color: ${lighten(theme.palette.secondary.main, 0.5)};
 `
 );
 
-function HeaderUserbox() {
-  const user = {
-    name: 'Catherine Pike',
-    avatar: '/static/images/avatars/1.jpg',
-    jobtitle: 'Project Manager'
-  };
-
+export const HeaderUserbox = () => {
+  const { user, isLoading, logout } = useAuth();
+  console.log('user', user);
   const ref = useRef<any>(null);
   const [isOpen, setOpen] = useState<boolean>(false);
 
@@ -79,12 +74,13 @@ function HeaderUserbox() {
   return (
     <>
       <UserBoxButton color="secondary" ref={ref} onClick={handleOpen}>
-        <Avatar variant="rounded" alt={user.name} src={user.avatar} />
+        <Avatar variant="rounded" alt={user.username} src={user.avatarUrl} />
         <Hidden mdDown>
           <UserBoxText>
-            <UserBoxLabel variant="body1">{user.name}</UserBoxLabel>
+            <UserBoxLabel variant="body1">{user.username}</UserBoxLabel>
+            {/* 这里可根据需要展示 email 或其他信息 */}
             <UserBoxDescription variant="body2">
-              {user.jobtitle}
+              {user.email}
             </UserBoxDescription>
           </UserBoxText>
         </Hidden>
@@ -106,11 +102,11 @@ function HeaderUserbox() {
         }}
       >
         <MenuUserBox sx={{ minWidth: 210 }} display="flex">
-          <Avatar variant="rounded" alt={user.name} src={user.avatar} />
+          <Avatar variant="rounded" alt={user.username} src={user.avatarUrl} />
           <UserBoxText>
-            <UserBoxLabel variant="body1">{user.name}</UserBoxLabel>
+            <UserBoxLabel variant="body1">{user.username}</UserBoxLabel>
             <UserBoxDescription variant="body2">
-              {user.jobtitle}
+              {user.email}
             </UserBoxDescription>
           </UserBoxText>
         </MenuUserBox>
@@ -135,14 +131,12 @@ function HeaderUserbox() {
         </List>
         <Divider />
         <Box sx={{ m: 1 }}>
-          <Button color="primary" fullWidth>
+          <Button color="primary" fullWidth onClick={logout}>
             <LockOpenTwoToneIcon sx={{ mr: 1 }} />
             Sign out
           </Button>
         </Box>
       </Popover>
     </>
   );
-}
-
-export default HeaderUserbox;
+};

dashboard/src/layouts/SidebarLayout/Header/index.tsx

@@ -16,7 +16,7 @@ import { SidebarContext } from 'src/contexts/SidebarContext';
 import CloseTwoToneIcon from '@mui/icons-material/CloseTwoTone';
 
 import HeaderButtons from './Buttons';
-import HeaderUserbox from './Userbox';
+import { HeaderUserbox } from './Userbox';
 import HeaderMenu from './Menu';
 
 const HeaderWrapper = styled(Box)(