GHHub/src/views/App.jsx

import { Outlet, Link, useHref, useLocation } from "react-router-dom";
import { useEffect } from "react";
import { observer } from "mobx-react";
import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col, Alert, App as AntApp } from "antd";
import { DownOutlined } from "@ant-design/icons";
import "antd/dist/reset.css";
import AppLogo from "@/assets/logo-gh.png";
import { useStore } from "@/stores/StoreContext.js";

const { Header, Content, Footer } = Layout;
const items = [
	{
		label: (
      <Link to="/account/change-password">Change password</Link>
		),
		key: "0",
	},
	{
		label: (
			<a target="_blank" rel="noopener noreferrer" href="#">
				Privacy
			</a>
		),
		key: "1",
	},
	{
		type: "divider",
	},
	{
		label: (
			<a target="_blank" rel="noopener noreferrer" href="#">
				Logout
			</a>
		),
		key: "3",
	},
];
function App() {
	const { authStore } = useStore();

	const href = useHref();

	let location = useLocation();
	useEffect(() => {
		// Check location
		console.info("location.pathname: " + location.pathname);
	}, [location]);

	const {
		token: { colorBgContainer },
	} = theme.useToken();

	return (
		<ConfigProvider
			theme={{
				token: {
					colorPrimary: "#00b96b",
				},
				algorithm: theme.defaultAlgorithm,
			}}>
			<AntApp>
				<Layout
					style={{
						minHeight: "100vh",
					}}>
					<Header className="header" style={{ position: "sticky", top: 0, zIndex: 1, width: "100%" }}>
						<Row gutter={{ md: 24 }} justify="end">
							<Col span={20}>
								<img src={AppLogo} className="logo" alt="App logo" />
								<Menu
									theme="dark"
									mode="horizontal"
									defaultSelectedKeys={[href]}
									items={[
										{ key: "/reservation/newest", label: <Link to="/reservation/newest">Reservation</Link> },
										{ key: "/feedback", label: <Link to="/feedback">Feedback</Link> },
										{ key: "/invoice", label: <Link to="/invoice">Invoice</Link> },
										{ key: "/notice", label: <Link to="/notice">Notice</Link> },
									]}
								/>
							</Col>
							<Col span={4}>
								<Dropdown
									menu={{
										items,
									}}>
									<a onClick={e => e.preventDefault()}>
										<Space>
											{authStore.login.username}
											<DownOutlined />
										</Space>
									</a>
								</Dropdown>
							</Col>
						</Row>
					</Header>

					<Alert message="公告 查看后不再显示，或者一直显示，或者放到页面底部" description="" type="info" banner closable />

					<Content
						style={{
							padding: 24,
							margin: 0,
							minHeight: 280,
							background: colorBgContainer,
						}}>
						<Outlet />
					</Content>
					<Footer></Footer>
				</Layout>
			</AntApp>
		</ConfigProvider>
	);
}

export default observer(App);