help_admin/src/Main.tsx

import React from "react";
import {Button, Nav, Navbar} from "react-bootstrap";
import {Manager} from "./Manager";
import {User} from "./User";
import {Active} from "./Active";
import {Cookies} from "react-cookie";
import {manager_cookie} from "./account/PropCookie";
import {fontEnd} from "./api";

/**
 * 菜单标记
 */
enum Menu {
    manager,
    user,
    active
}

/**
 * 主菜单
 */
export class Main extends React.Component<
    {
        cookies:Cookies;
        logout:Function;
    },
    {
        menu:Menu;
        subMenu:JSX.Element
    }>{

    constructor(props: Readonly<any>) {
        super(props);
        //默认菜单
        this.state={
            menu:Menu.manager,
            subMenu:<Manager cookies={this.props.cookies}/>
        }
    }

    //获取菜单名颜色
    getMenuColor(menu:Menu){
        if(this.state.menu===menu){
            return {
                color:"white",
                backgroundColor:"blue"
            }
        }else{
            return {
                color:"blue",
                backgroundColor: "white"
            }
        }
    }

    //切换菜单
    changeMenu(menu:Menu){
        this.setState({
            menu:menu
        })

        switch (menu) {
            case Menu.manager:
                this.setState({
                    subMenu:<Manager cookies={this.props.cookies}/>
                });break;
            case Menu.user:
                this.setState({
                    subMenu:<User/>
                });break;
            case Menu.active:
                this.setState({
                    subMenu:<Active/>
                });break;
        }
    }



    render() {


        return (
            <div>
                <Navbar bg="light">
                    <Navbar.Brand>互联网+互助平台</Navbar.Brand>
                    <Nav variant="pills" defaultActiveKey="index" className="w-100">
                        <Nav.Item className="col-2">
                            <Nav.Link style={this.getMenuColor(Menu.manager)} onClick={()=>this.changeMenu(Menu.manager)}>管理员管理</Nav.Link>
                        </Nav.Item>
                        <Nav.Item className="col-2">
                            <Nav.Link style={this.getMenuColor(Menu.user)} onClick={()=>this.changeMenu(Menu.user)}>用户管理</Nav.Link>
                        </Nav.Item>
                        <Nav.Item className="col-2">
                            <Nav.Link style={this.getMenuColor(Menu.active)} onClick={()=>this.changeMenu(Menu.active)}>活动管理</Nav.Link>
                        </Nav.Item>
                        <Navbar.Text>
                            欢迎管理员{this.props.cookies.get(manager_cookie)}登录
                        </Navbar.Text>
                        <Button variant="outline-info" className="ml-3" onClick={()=>window.location.href=fontEnd}>切换前台</Button>
                        <Button variant="outline-primary" className="ml-3" onClick={()=>this.props.logout()}>注销登录</Button>
                    </Nav>
                </Navbar>
                {this.state.subMenu}
            </div>

        )
    }
}