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 [isOpenAuth, setIsOpenAuth] = useState(false)
    const [isRegister, setIsRegister] = 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="user" className="bp5-minimal" text="登录 / 注册" onClick={() => setIsOpenAuth(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={isOpenAuth}
                title={
                    <>
                        <a onClick={() => setIsRegister(false)}>登陆</a> / <a onClick={() => setIsRegister(true)}>注册</a>
                    </>
                }
                icon="info-sign"
                onClose={() => setIsOpenAuth(false)}
            >
                {isRegister && (
                    <Register>
                        {{
                            Wrapper: ({ children }: { children: ReactNode }) => <DialogBody>{children}</DialogBody>,
                            Default: ({ children }: { children: ReactNode }) => (
                                <DialogFooter
                                    actions={
                                        <>
                                            {children}
                                            <Button text="合起" onClick={() => setIsOpenAuth(false)} />
                                        </>
                                    }
                                />
                            ),
                        }}
                    </Register>
                )}
                {!isRegister && (
                    <Login>
                        {{
                            Wrapper: ({ children }: { children: ReactNode }) => <DialogBody>{children}</DialogBody>,
                            Default: ({ children }: { children: ReactNode }) => (
                                <DialogFooter
                                    actions={
                                        <>
                                            {children}
                                            <Button text="合起" onClick={() => setIsOpenAuth(false)} />
                                        </>
                                    }
                                />
                            ),
                        }}
                    </Login>
                )}
            </Dialog>
        </PageWrapper>
    )
}

export { BaseLayout }
export default BaseLayout