my-react-app/src/layout/base.tsx

import { Alignment, Button, Dialog, DialogBody, DialogFooter, Menu, MenuDivider, MenuItem, Navbar, Popover } from "@blueprintjs/core"
import { ReactNode, useState } from "react"
import { NavLink, useHistory } from "react-router-dom"
import styled from "styled-components"
import { GlobalStyles } from "./GlobalStyles"
import { Notice } from "@/ui/Notice"
import { Markdown } from "@/ui/Markdown"
import { Register } from "@/ui/Register/Register"
import { Login } from "@/ui/Login/Login"

interface PageProps {
    children: ReactNode
}

const PageWrapper = styled.div`
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
`
const ContentWrapper = styled.div`
    position: relative;
    flex: 1;
    height: 0;
    overflow-x: hidden;
`

function BaseLayout(props: PageProps) {
    const [isOpen, setIsOpen] = useState(false)
    const [isOpenAbout, setIsOpenAbout] = useState(false)
    const [isOpenRegister, setIsOpenRegister] = useState(false)
    const [isOpenLogin, setIsOpenLogin] = useState(false)

    const router = useHistory()

    const about = `
> 人生如逆水行舟，不进则退。

    我来自一南方小镇，不善言辞，今作此小站，聊慰平生。

    如有意愿，欢迎联系。

[Github](https://github.com/npmrun)
    `

    return (
        <PageWrapper>
            <GlobalStyles />
            <Navbar>
                <Navbar.Group align={Alignment.LEFT}>
                    <Navbar.Heading>天涯行宫</Navbar.Heading>
                    <Navbar.Divider />
                    <NavLink to={"/home"} strict exact activeClassName="actived">
                        <Button className="bp5-minimal" icon="home" text="首页" />
                    </NavLink>
                    <Popover
                        isOpen={isOpen}
                        interactionKind="click"
                        onInteraction={isOpen => setIsOpen(isOpen)}
                        content={
                            <Menu>
                                <MenuItem icon="flow-review-branch" text="天涯笔记" disabled onClick={() => router.push("/project")} />
                                <MenuItem icon="third-party" text="全聚德" disabled onClick={() => router.push("/project/child")} />
                                <MenuDivider />
                                <MenuItem icon="document" text="文档">
                                    <MenuItem icon="build" text="CSS选择器示例" />
                                </MenuItem>
                                <MenuDivider />
                                <MenuItem icon="cog" text="其他">
                                    <MenuItem icon="build" text="CSS选择器示例" />
                                </MenuItem>
                            </Menu>
                        }
                        fill={true}
                        placement="bottom"
                    >
                        <Button className="bp5-minimal" icon="code" text="开源应用" rightIcon={isOpen ? "caret-down" : "caret-right"} />
                    </Popover>
                </Navbar.Group>
                <Navbar.Group align={Alignment.LEFT} style={{ marginLeft: "10px", maxWidth: "400px" }}>
                    <Notice />
                </Navbar.Group>
                <Navbar.Group align={Alignment.RIGHT}>
                    <Button icon="person" className="bp5-minimal" text="登录" onClick={() => setIsOpenLogin(true)} />
                    <Button icon="person" className="bp5-minimal" text="注册" onClick={() => setIsOpenRegister(true)} />
                    <Navbar.Divider />
                    {/* <NavLink to={"/about"}> */}
                    <Button onClick={() => setIsOpenAbout(true)} className="bp5-minimal" text="关于" />
                    {/* </NavLink> */}
                </Navbar.Group>
            </Navbar>
            <ContentWrapper>{props.children}</ContentWrapper>
            <Dialog isOpen={isOpenAbout} title="关于我" icon="info-sign" onClose={() => setIsOpenAbout(false)}>
                <DialogBody>
                    <Markdown>{about}</Markdown>
                    <Notice></Notice>
                </DialogBody>
                <DialogFooter actions={<Button intent="primary" text="合起" onClick={() => setIsOpenAbout(false)} />} />
            </Dialog>
            <Dialog isOpen={isOpenRegister} title="注册" icon="info-sign" onClose={() => setIsOpenRegister(false)}>
                <Register>
                    {{
                        Wrapper: ({ children }: { children: ReactNode }) => <DialogBody>{children}</DialogBody>,
                        Default: ({ children }: { children: ReactNode }) => (
                            <DialogFooter
                                actions={
                                    <>
                                        {children}
                                        <Button text="合起" onClick={() => setIsOpenRegister(false)} />
                                    </>
                                }
                            />
                        ),
                    }}
                </Register>
            </Dialog>
            <Dialog isOpen={isOpenLogin} title="注册" icon="info-sign" onClose={() => setIsOpenLogin(false)}>
                <div style={{padding: "20px"}}>
                    <Login></Login>
                </div>
            </Dialog>
        </PageWrapper>
    )
}

export { BaseLayout }
export default BaseLayout