79 lines
3.1 KiB
JavaScript
79 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import AppBar from '@mui/material/AppBar';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Box from '@mui/material/Box';
|
|
import Container from '@mui/material/Container';
|
|
import Menu from '@mui/material/Menu';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Toolbar from '@mui/material/Toolbar';
|
|
import Typography from '@mui/material/Typography';
|
|
import logo from './assets/logo.png';
|
|
import styles from './AppBar.module.css';
|
|
import { Stack, CssBaseline } from '@mui/material';
|
|
import { useCookies } from 'react-cookie';
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export default function () {
|
|
const avatarUrl = useSelector(state => state.user.avatarUrl);
|
|
const nickName = useSelector(state => state.user.nickName);
|
|
const [cookies, setCookie, removeCookie] = useCookies(['accessToken']);
|
|
const navigate = useNavigate();
|
|
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
|
const handleOpenUserMenu = (event) => {
|
|
setAnchorElUser(event.currentTarget);
|
|
};
|
|
const handleCloseUserMenu = () => {
|
|
setAnchorElUser(null);
|
|
};
|
|
|
|
const onLogout = () => {
|
|
removeCookie("accessToken");
|
|
handleCloseUserMenu();
|
|
navigate("/login");
|
|
}
|
|
|
|
|
|
return <AppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} position="sticky" color='black'>
|
|
<CssBaseline />
|
|
<Container maxWidth={false} >
|
|
<Toolbar disableGutters variant="dense">
|
|
<Stack direction="row" sx={{ flexGrow: 1 }}>
|
|
<img className={styles.titleIcon} src={logo} />
|
|
<Typography variant='h6' sx={{ color: "#FFFFFF" }}>纽曼AI语记</Typography>
|
|
</Stack>
|
|
<Box sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}} >
|
|
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
|
<Avatar alt={nickName} src={avatarUrl} />
|
|
</IconButton>
|
|
<Typography sx={{ color: "#FFFFFF", paddingLeft: 2 }}>{nickName}</Typography>
|
|
<Menu
|
|
sx={{ mt: '45px' }}
|
|
id="menu-appbar"
|
|
anchorEl={anchorElUser}
|
|
anchorOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
keepMounted
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
open={Boolean(anchorElUser)}
|
|
onClose={handleCloseUserMenu}
|
|
>
|
|
<MenuItem onClick={onLogout}>
|
|
<Typography textAlign="center">退出</Typography>
|
|
</MenuItem>
|
|
|
|
</Menu>
|
|
</Box>
|
|
</Toolbar>
|
|
</Container>
|
|
</AppBar>
|
|
} |