@ant-design/icons#PieChartOutlined JavaScript Examples

render() {
        const {Title, Number, Color} = this.props;
        return (
             <Col sm={{span: 24}} md={{span: 8}} xl={{span: 8}} xxl={{span: 6}}>
                 <Card
                     style={{background: Color, margin: 10}}
                     actions={[
                         <PieChartOutlined key="statistics" />,
                         <EditOutlined key="details" />
                     ]}
                 >
                     <Row type={'flex'} justify={'center'}>
                         <Col>
                             <Row type={'flex'} justify={'center'}>
                                 <Typography.Title style={{color: '#ffffff', fontSize: '1.8em'}}>
                                     {Title}
                                 </Typography.Title>
                             </Row>
                             <Row type={'flex'} justify={'end'}>
                                 <Typography.Title style={{color: '#ffffff', fontSize: '2em'}}>
                                     {Number}
                                 </Typography.Title>
                             </Row>
                         </Col>
                     </Row>
                 </Card>
             </Col>

        );
    }

render() {
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} defaultOpenKeys={['sub1']}>
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              Option 1
            </Menu.Item>
            <Menu.Item key="2" icon={<DesktopOutlined />}>
              Option 2
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="User">
              <Menu.Item key="3">Tom</Menu.Item>
              <Menu.Item key="4">Bill</Menu.Item>
              <Menu.Item key="5">Alex</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
              <Menu.Item key="6">Team 1</Menu.Item>
              <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu>
            <Menu.Item key="9" icon={<FileOutlined />} />
          </Menu>
        </Sider>
        <Layout>
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    );
  }

render() {
    const { collapsed } = this.state;
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              Option 1
            </Menu.Item>
            <Menu.Item key="2" icon={<DesktopOutlined />}>
              Option 2
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="User">
              <Menu.Item key="3">Tom</Menu.Item>
              <Menu.Item key="4">Bill</Menu.Item>
              <Menu.Item key="5">Alex</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
              <Menu.Item key="6">Team 1</Menu.Item>
              <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu>
            <Menu.Item key="9" icon={<FileOutlined />}>
              Files
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              Bill is a cat.
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }

render() {
    return (
      <div style={{ width: 256 }}>
        <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
          {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
        </Button>
        <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
        >
          <Menu.Item key="1" icon={<PieChartOutlined />}>
            Option 1
          </Menu.Item>
          <Menu.Item key="2" icon={<DesktopOutlined />}>
            Option 2
          </Menu.Item>
          <Menu.Item key="3" icon={<ContainerOutlined />}>
            Option 3
          </Menu.Item>
          <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
            <Menu.Item key="5">Option 5</Menu.Item>
            <Menu.Item key="6">Option 6</Menu.Item>
            <Menu.Item key="7">Option 7</Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
            <Menu.Item key="9">Option 9</Menu.Item>
            <Menu.Item key="10">Option 10</Menu.Item>
            <SubMenu key="sub3" title="Submenu">
              <Menu.Item key="11">Option 11</Menu.Item>
              <Menu.Item key="12">Option 12</Menu.Item>
            </SubMenu>
          </SubMenu>
        </Menu>
      </div>
    );
  }

function App({ user, loggedIn, logoutUser, getProfile }) {
  useInjectSaga({ key: 'login', saga });

  useEffect(() => {
    if (!loggedIn) getProfile();
  });

  const [collapsed, setCollapsed] = useState(true);

  const siderMenu = loggedIn ? (
    <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}>
      <div style={logoStyle} />
      <Menu
        theme="dark"
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['profile']}
        mode="inline"
      >
        <Menu.Item key="home" icon={<PieChartOutlined />}>
          <Link to="/">Dashboard</Link>
        </Menu.Item>
        <Menu.Item key="experiments" icon={<DesktopOutlined />}>
          <Link to="/experiments">My experiments</Link>
        </Menu.Item>
        <SubMenu
          key="profile"
          icon={<UserOutlined />}
          title={`${user.username}`}
        >
          <Menu.Item key="logout" onClick={logoutUser}>
            Logout
          </Menu.Item>
        </SubMenu>
      </Menu>
    </Sider>
  ) : (
    ''
  );

  return (
    <div>
      <Helmet
        titleTemplate="%s - QiskitFlow"
        defaultTitle="QiskitFlow. Reproducible quantum experiments."
      >
        <meta
          name="description"
          content="QiskitFlow. Reproducible quantum experiments."
        />
      </Helmet>
      <Layout style={{ minHeight: '100vh' }}>
        {siderMenu}
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            <Link to="/" style={{ padding: '0 24px', fontSize: 24 }}>
              QiskitFlow
            </Link>
          </Header>
          <Content style={{ margin: '16px 16px' }}>
            <div
              className="site-layout-background"
              style={{ padding: 24, minHeight: 360, background: '#fff' }}
            >
              <Switch>
                <Route exact path="/" component={HomePage} />
                <PrivateRoute
                  exact
                  authed
                  path="/experiments"
                  component={ExperimentsList}
                />
                <PrivateRoute
                  authed
                  path="/experiments/:experimentId"
                  component={ExperimentRunsList}
                />
                <PrivateRoute
                  authed
                  path="/runs/:id"
                  component={Run}
                />
                <Route path="" component={NotFoundPage} />
              </Switch>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>QiskitFlow ©2021</Footer>
        </Layout>
      </Layout>
    </div>
  );
}

function Dashboard() {
  // Layout and Menu
  const { Content, Sider } = Layout;
  const { SubMenu } = Menu;

  // report an issue preventDefault
  const preventDefault = (event) => {
    event.preventDefault();
    window.location.href =
      "https://github.com/abhishekpatel946/Smart-Vehicle-Fleet-Manager/issues/new/choose";
  };

  // snakbar state
  const [vehicleAddSuccess, setvehicleAddSuccess] = React.useState(false);
  const [vehicleAddError, setvehicleAddError] = React.useState(false);
  const [maintainanceAddSuccess, setmaintainanceAddSuccess] = React.useState(
    false
  );
  const [maintainanceAddError, setmaintainanceAddError] = React.useState(false);
  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setvehicleAddSuccess(false);
    setvehicleAddError(false);
    setmaintainanceAddSuccess(false);
    setmaintainanceAddError(false);
  };

  // vehicleId & vehicleName for addVehicle
  const [vehicleNAME, setVehicleNAME] = useState("");
  const [vehicleID, setVehicleID] = useState("");

  // vehicleName, dateTime & cost for maintenace
  const [vehicleRegNumber, setVehicleRegNumber] = useState("");
  const [date, setDate] = useState(moment().toString());
  const [cost, setCost] = useState("");

  // set date
  const onDateChange = (val) => {
    setDate(val);
  };

  const [collapseState, setCollapseState] = useState(false);
  const onCollapse = (collapsed) => {
    setCollapseState({ collapsed });
  };

  // form onSubmit handler
  const submitHandler = (event) => {
    event.preventDefault();
    event.target.className += " was-validated";
  };

  // fetch vehicle model & regid
  // const [vehicleInfo, setVehicleInfo] = useState([]);
  // let vehicleModel = "";
  // let vehicleModelId = "";
  // db.collection("data")
  //   .doc("MP10ME7969")
  //   .get()
  //   .then((snapshot) => {
  //     const currentInfo = [];
  //     snapshot.forEach((doc) => {
  //       currentInfo.push(doc.data());
  //     });
  //     setVehicleInfo(currentInfo);
  //   });
  // vehicleInfo.forEach((data) => {
  //   vehicleModel = data.vehicleId;
  //   vehicleModelId = data.vehicleName;
  // });

  // fetch moduleState
  const [moduleState, setModuleState] = useState([]);
  let liveState = false;
  db.collection("data")
    .doc("MP10ME7969")
    .collection("module_state")
    .onSnapshot((docs) => {
      const currentState = [];
      docs.forEach((doc) => {
        currentState.push(doc.data());
      });
      setModuleState(currentState);
    });

  moduleState.forEach((data) => {
    liveState = data.state;
  });

  // form vehicleRegister submitHandler
  const vehicleRegister = (event) => {
    if (vehicleID && vehicleNAME) {
      // check if the doc are already available in the DB... then just give the warning to the user!

      // create a doc in DB with vehicleID and set it fields
      db.collection("data").doc(vehicleID).set({
        vehicleId: vehicleID,
        vehicleName: vehicleNAME,
      });

      // create a dummy collection for newly created vehicleID
      db.collection("data").doc(vehicleID).collection("fuel").doc().set({
        id: "0",
        amount: "0",
        timestamp: "0",
      });
      db.collection("data").doc(vehicleID).collection("fuel_refill").doc().set({
        id: "0",
        amount: "0",
        timestamp: "0",
      });
      db.collection("data")
        .doc(vehicleID)
        .collection("maintainance")
        .doc()
        .set({
          id: "0",
          amount: "0",
          timestamp: "0",
        });
      db.collection("data").doc(vehicleID).collection("overspeed").doc().set({
        id: "0",
        speed: "0",
        timestamp: "0",
      });
      db.collection("data").doc(vehicleID).collection("speed").doc().set({
        id: "0",
        speed: "0",
        timestamp: "0",
      });
      db.collection("data")
        .doc(vehicleID)
        .collection("accident_alert")
        .doc()
        .set({
          id: "0",
          accident: "0",
          geolocation_lat: "0",
          geolocation_long: "0",
          timestamp: "0",
        });
      db.collection("data")
        .doc(vehicleID)
        .collection("fuel_theft_alert")
        .doc()
        .set({
          id: "0",
          fuelTheft: "0",
          geolocation_lat: "0",
          geolocation_long: "0",
          timestamp: "0",
        });
      db.collection("data")
        .doc(vehicleID)
        .collection("module_state")
        .doc()
        .set({
          state: "0",
        });

      // success mgs for the all are right
      setvehicleAddError(false);
      setmaintainanceAddSuccess(false);
      setmaintainanceAddError(false);
      setvehicleAddSuccess(true);

      // set it to defualt to state
      setVehicleNAME("");
      setVehicleID("");
    } else {
      // alert("Both the fields are mandatory!!!");
      setvehicleAddSuccess(false);
      setmaintainanceAddSuccess(false);
      setmaintainanceAddError(false);
      setvehicleAddError(true);
    }
  };

  // from vehicleMaintenace submitHandler
  const addCost = (event) => {
    // store maintainance-cost into database
    db.collection("data")
      .doc(vehicleRegNumber)
      .collection("maintainance")
      .add({
        id: vehicleRegNumber,
        cose: cost,
        timestamp: date,
      })
      .then(function () {
        // success mgs for the all are right
        setvehicleAddSuccess(false);
        setvehicleAddError(false);
        setmaintainanceAddError(false);
        setmaintainanceAddSuccess(true);
      })
      .catch(function (error) {
        setvehicleAddSuccess(false);
        setvehicleAddError(false);
        setmaintainanceAddSuccess(false);
        setmaintainanceAddError(true);
      });
  };

  // render() {
  return (
    <Layout id="header">
      {/* Header Section */}
      <HeaderLayout className="header" />
      <Layout style={{ minHeight: "100vh" }}>
        <Sider
          collapsible
          collapsed={collapseState.collapsed}
          onCollapse={onCollapse}
        >
          <div className="logo" />
          <Menu
            theme="dark"
            defaultSelectedKeys={["stats"]}
            defaultOpenKeys={["track"]}
            mode="inline"
          >
            <Menu.Item key="stats" icon={<PieChartOutlined />}>
              Stats
            </Menu.Item>
            <SubMenu key="track" icon={<DesktopOutlined />} title="Track">
              <Menu.Item key="speed">
                <Link href="#speedSection">Speed</Link>
              </Menu.Item>
              <Menu.Item key="fuel">
                <Link href="#fuelSection">Fuel</Link>
              </Menu.Item>
              <Menu.Item key="fuel_refill">
                <Link href="#fuelRefillSection">Fuel Refill</Link>
              </Menu.Item>
              <Menu.Item key="overspeeding">
                <Link href="#overSpeedingSection">OverSpeeding</Link>
              </Menu.Item>
              <Menu.Item key="maintainance">
                <Link href="#maintainanceSection">Maintainance</Link>
              </Menu.Item>
            </SubMenu>
            <Menu.Item
              key="accidentAlert"
              icon={<NotificationsActiveOutlinedIcon />}
            >
              <Link href="#accidentAlertSection">Accident alert</Link>
            </Menu.Item>
            <Menu.Item
              key="fuelTheftAlert"
              icon={<NotificationImportantIcon />}
            >
              <Link href="#fuelTheftAlertSection">FuelTheft alert</Link>
            </Menu.Item>
            <Menu.Item key="addVehicle" icon={<LocalTaxiIcon />}>
              <Link href="#addVehicleSection">Add Vehicle</Link>
            </Menu.Item>
            <Menu.Item key="addMaintainance" icon={<PostAddIcon />}>
              <Link href="#addVehicleSection">Add Maintainance</Link>
            </Menu.Item>
            <Menu.Item key="reportIssue" icon={<ReportProblemOutlinedIcon />}>
              <Link
                href="https://github.com/abhishekpatel946/Smart-Vehicle-Fleet-Manager/issues/new/choose"
                onClick={preventDefault}
              >
                Report an issue
              </Link>
            </Menu.Item>
          </Menu>
        </Sider>

        {/* Breadcrum Naming */}
        <Layout className="site-layout">
          <Content style={{ margin: "0 16px" }}>
            <Breadcrumb style={{ margin: "16px 0" }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Dashboard</Breadcrumb.Item>
              <div>
                <p className="h6 text-left mb-1">
                  Status : {liveState ? "Active" : "Inactive"}
                  {/* {vehicleModel}
                  {vehicleModelId} */}
                </p>
              </div>
            </Breadcrumb>
            <div
              className="site-layout-background"
              style={{ padding: 24, minHeight: 560 }}
            >
              {/* Speed Section */}
              <Divider orientation="left" id="speedSection">
                Speed area
              </Divider>
              <MDBContainer>
                <SpeedLog />
              </MDBContainer>

              {/* Fuel Section */}
              <Divider orientation="left" id="fuelSection">
                Fuel area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <FuelLog />
                </MDBRow>
              </MDBContainer>

              {/* OverSpeeding Section */}
              <Divider orientation="left" id="overSpeedingSection">
                OverSpeeding area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <OverSpeedLog />
                </MDBRow>
              </MDBContainer>

              {/* Fuel Refill Section */}
              <Divider orientation="left" id="fuelRefillSection">
                Fuel Refill area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <FuelRefillLog />
                </MDBRow>
              </MDBContainer>

              {/* Maintainence Section */}
              <Divider orientation="left" id="maintainanceSection">
                Maintainance area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <MaintainenceLog />
                </MDBRow>
              </MDBContainer>

              {/* Accident Section */}
              <Divider orientation="left" id="accidentAlertSection">
                Accident Alert area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <AccidentAlert />
                </MDBRow>
              </MDBContainer>

              {/* FuelTheft Section */}
              <Divider orientation="left" id="fuelTheftAlertSection">
                FuelTheft Alert area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <FuelTheftAlert />
                </MDBRow>
              </MDBContainer>

              {/* addVehicle Section */}
              <Divider orientation="left" id="addVehicleSection">
                Add Vehicle
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <MDBCol md="6">
                    <form
                      className="needs-validation"
                      onSubmit={submitHandler}
                      noValidate
                    >
                      <p className="h5 text-center mb-4">Register Vehicle</p>
                      <div className="grey-text">
                        <MDBInput
                          className="addVehicle_vehicleNAME"
                          name="vehicleNAME"
                          onChange={(event) =>
                            setVehicleNAME(event.target.value)
                          }
                          value={vehicleNAME}
                          label="Your vehicle name"
                          icon="car"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                        <MDBInput
                          className="addVehicle_vehicleID"
                          name="vehicleID"
                          onChange={(event) => setVehicleID(event.target.value)}
                          value={vehicleID}
                          label="Your vechile reg. number"
                          icon="registered"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                      </div>
                      <div className="text-center">
                        <MDBBtn outline type="submit" onClick={vehicleRegister}>
                          Register
                          <MDBIcon className="ml-1" />
                        </MDBBtn>
                      </div>
                    </form>
                  </MDBCol>
                  <MDBCol md="6">
                    <form
                      className="needs-validation"
                      onSubmit={submitHandler}
                      noValidate
                    >
                      <p className="h5 text-center mb-4">
                        Register Maintainance
                      </p>
                      <div className="grey-text">
                        <MDBInput
                          className="addVehicle_vehicleNAME"
                          name="vehicleName"
                          onChange={(event) =>
                            setVehicleRegNumber(event.target.value)
                          }
                          value={vehicleRegNumber}
                          label="Your vehicle Reg number"
                          icon="registered"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                        <div>
                          <MuiPickersUtilsProvider utils={DateFnsUtils}>
                            <KeyboardDatePicker
                              disableToolbar
                              fullWidth
                              variant="inline"
                              format="dd/MM/yyyy"
                              margin="normal"
                              id="date-picker-inline"
                              label="DD/MM/YYYY"
                              value={date}
                              onChange={onDateChange}
                              KeyboardButtonProps={{
                                "aria-label": "change date",
                              }}
                            />
                          </MuiPickersUtilsProvider>
                        </div>
                        <MDBInput
                          className="addVehicle_vehicleID"
                          name="cost"
                          onChange={(event) => setCost(event.target.value)}
                          value={cost}
                          label="Your mainatenace cost..."
                          icon="rupee-sign"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                      </div>
                      <div className="text-center">
                        <MDBBtn outline type="submit" onClick={addCost}>
                          Add Cost
                          <MDBIcon className="ml-1" />
                        </MDBBtn>
                      </div>
                    </form>
                  </MDBCol>
                </MDBRow>
              </MDBContainer>

              {/* back to top */}
              <Link href="#header">
                <Button
                  // ghost
                  icon={<NavigationIcon />}
                  style={{
                    float: "right",
                    margin: "auto 20px 10px 20px",
                  }}
                >
                  {" "}
                  Back to top{" "}
                </Button>
              </Link>

              {/* End */}
            </div>
          </Content>

          {/* snakbar notifiers */}
          <Snackbar
            open={vehicleAddSuccess}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="success">
              Vehicle added successfully.
            </Alert>
          </Snackbar>
          <Snackbar
            open={vehicleAddError}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="error">
              All the field's are mendatory!!!
            </Alert>
          </Snackbar>
          <Snackbar
            open={maintainanceAddSuccess}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="success">
              Maintainance added successfully.
            </Alert>
          </Snackbar>
          <Snackbar
            open={maintainanceAddError}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="error">
              All the field's are mendatory!!!
            </Alert>
          </Snackbar>

          {/* footer */}
          <FooterLayout />
        </Layout>
      </Layout>
    </Layout>
  );
}

sidebar = () => {
  return (
    <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
      <Menu.Item key="1">
        <Link to={{ pathname: "/" }}>
          <HomeOutlined />
          <span>首页</span>
        </Link>
      </Menu.Item>
      <Menu.Item key="5">
        <Link to={{ pathname: "/user-management" }}>
          <UserOutlined />
          <span>用户管理</span>
        </Link>
      </Menu.Item>
      <SubMenu
        key="sub1"
        title={
          <span>
            <FileOutlined />
            <span>文件管理</span>
          </span>
        }
      >
        <Menu.Item key="sub1-1">
          <Link to={{ pathname: "/file/list" }}>
            <OrderedListOutlined />
            <span>文件列表</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub1-2">
          <Link to={{ pathname: "/file/add" }}>
            <UploadOutlined />
            <span>文件上传</span>
          </Link>
        </Menu.Item>
      </SubMenu>
      <SubMenu
        key="sub2"
        title={
          <span>
            <DashboardOutlined />
            <span>可视化图表</span>
          </span>
        }
      >
        <Menu.Item key="sub2-1">
          <Link to={{ pathname: "/charts/line-chart" }}>
            <LineChartOutlined />
            <span>折线图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-2">
          <Link to={{ pathname: "/charts/bar-chart" }}>
            <BarChartOutlined />
            <span>柱状图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-3">
          <Link to={{ pathname: "/charts/pie-chart" }}>
            <PieChartOutlined />
            <span>饼状图</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub5"
        title={
          <span>
            <FileExcelOutlined />
            <span>Excel表格</span>
          </span>
        }
      >
        <Menu.Item key="sub5-1">
          <Link to={{ pathname: "/excel/export-csv" }}>
            <ExportOutlined />
            <span>Export csv</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub4"
        title={
          <span>
            <EditOutlined />
            <span>文本编辑器</span>
          </span>
        }
      >
        <Menu.Item key="sub4-1">
          <Link to={{ pathname: "/rich-text-editor" }}>
            <Html5Outlined />
            <span>富文本编辑器</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub4-2">
          <Link to={{ pathname: "/md-editor" }}>
            <FileMarkdownOutlined />
            <span>Markdown编辑器</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub3"
        title={
          <span>
            <BugOutlined />
            <span>错误页面</span>
          </span>
        }
      >
        <Menu.Item key="sub3-1">
          <Link to={{ pathname: "/not-found" }}>
            <InboxOutlined />
            <span>404</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub3-2">
          <Link to={{ pathname: "/not-allow" }}>
            <StopOutlined />
            <span>403</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <Menu.Item key="6">
        <a
          href="https://github.com/cnscorpions/React-Nest-Admin"
          target="_blank"
          rel="noopener noreferrer"
        >
          <GithubOutlined />
          <span>Github</span>
        </a>
      </Menu.Item>
    </Menu>
  );
}