💥

web/src/components/Layout.js

@@ -0,0 +1,70 @@
+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;