71 lines
1.5 KiB
JavaScript
71 lines
1.5 KiB
JavaScript
import * as React from "react";
|
|
import { UsernameContext } from "./Login";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import {
|
|
CssBaseline,
|
|
Container,
|
|
Toolbar,
|
|
AppBar,
|
|
Typography,
|
|
Button,
|
|
Paper,
|
|
} from "@mui/material";
|
|
|
|
const LogoutButton = ({ username, setUsername }) => {
|
|
const text = username ? `${username} (点击登出)` : "登陆";
|
|
const navigator = useNavigate();
|
|
return (
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
onClick={() => {
|
|
if (username) {
|
|
setUsername("");
|
|
}
|
|
navigator("/login");
|
|
}}
|
|
>
|
|
{text}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
const Layout = ({ children }) => {
|
|
const locat = useLocation();
|
|
const navigator = useNavigate();
|
|
const { username, setUsername } = React.useContext(UsernameContext);
|
|
React.useEffect(() => {
|
|
if (!username) {
|
|
const { pathname } = locat;
|
|
if (pathname !== "/login") {
|
|
navigator(`/login?redir=${pathname}`);
|
|
}
|
|
}
|
|
}, []);
|
|
return (
|
|
<>
|
|
<header>
|
|
<CssBaseline />
|
|
<AppBar position="relative">
|
|
<Toolbar>
|
|
<Typography sx={{ flexGrow: 1 }} variant="h6">
|
|
ITSC
|
|
</Typography>
|
|
<LogoutButton username={username} setUsername={setUsername} />
|
|
</Toolbar>
|
|
</AppBar>
|
|
</header>
|
|
|
|
<main>
|
|
<Container maxWidth="sm" sx={{ mt: 3 }}>
|
|
<Paper sx={{ p: 2 }}>{children}</Paper>
|
|
</Container>
|
|
</main>
|
|
|
|
<footer></footer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Layout;
|