Welcome.jsx

import { useModel,history } from "@umijs/max";
import { useEffect, useState } from "react";
// @mui
import { Box, ListItemIcon, Typography } from "@mui/material";
// mock
import { styled } from "@mui/material/styles";
// components
import navConfig from "@/layouts/dashboard/nav/config";
import { doFetch } from "@/utils/doFetch";
import { useRequest } from "ahooks";
import { Badge, Card, Divider } from "antd";

const StyledNavItemIcon = styled(ListItemIcon)({
  width: 48,
  height: 48,
  color: "inherit",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  color:"#448ee2"
});

export default function Welcome() {
  const [navConfigs, setNavConfigs] = useState(navConfig);

  const {
    initialState: { nav, currentUser, menuNum },
    setInitialState,
  } = useModel("@@initialState");

  const { data } = useRequest(async () => {
    let res = await doFetch({ url: "/system/message", params: {} });
    let result = {};
    res?.data?.dataList?.map((it) => {
      result[it?.menu] = it?.count;
    });
    return result;
  });

  useEffect(() => {
    if (!data) {
      return;
    }
    setNavConfigs(() => {
      let news = navConfig?.map((it) => {
        return {
          ...it,
          children: it?.children?.map((item) => {
            const info =
              menuNum?.[item?.key ?? ""] === 0
                ? {}
                : menuNum?.[item?.key ?? ""]
                ? {
                    info: (
                      <div
                        style={{
                          marginRight: 12,
                          backgroundColor: "#ff4800",
                          width: 20,
                          height: 20,
                          textAlign: "center",
                          lineHeight: "20px",
                          color: "#fff",
                          borderRadius: 12,
                          fontSize: 12,
                        }}
                      >
                        {menuNum[item?.key ?? ""]}
                      </div>
                    ),
                  }
                : data[item?.key ?? ""]
                ? {
                    info: (
                      <div
                        style={{
                          marginRight: 12,
                          backgroundColor: "#ff4800",
                          width: 20,
                          height: 20,
                          textAlign: "center",
                          lineHeight: "20px",
                          color: "#fff",
                          borderRadius: 12,
                          fontSize: 12,
                        }}
                      >
                        {data[item?.key]}
                      </div>
                    ),
                  }
                : {};
            return {
              ...item,
              ...info,
            };
          }),
        };
      });
      if (currentUser?.type == 1) {
        return news?.filter((it) => {
          return it?.title === "管理中心";
        });
      } else if (currentUser?.type == 2) {
        return news?.filter((it) => {
          return it?.title === "教学中心";
        });
      } else {
        return news?.filter((it) => {
          return it?.title === "学习中心";
        });
      }
    });
  }, [data, currentUser?.type, menuNum]);

  console.log(navConfigs, currentUser);

  return (
    <Box p={2}>
      <Typography component={"h1"} align="center" fontSize={24}>
        你好<b style={{ fontSize: 24, padding: 8 }}>{currentUser?.name}</b>{" "}
        欢迎使用
      </Typography>
      <Divider style={{marginTop:48}}></Divider>
      <div style={{ display: "flex", gap: 16, justifyContent: "center",marginTop:60,flexWrap:"wrap" }}>
        {navConfigs?.[0]?.children?.map?.((it) => {
          return (
            <Badge>
              <Card hoverable className="center" style={{width:240}} onClick={()=>{
                history.push(it?.path)
              }}>
                <div className="center" style={{ padding: "20px 0",gap:12 }}>
                  <StyledNavItemIcon>{it?.icon}</StyledNavItemIcon>
                  <Typography align="center" fontSize={18}>{it?.title}</Typography>
                  <div style={{ width: 20, height: 20}}>{it?.info}</div>
                </div>
              </Card>
            </Badge>
          );
        })}
      </div>
    </Box>
  );
}