feat: 新增函数式调用消息通知方法，登陆成功后弹出欢迎语

CHANGELOG.md

 ## 0.2.0  
-  - feature：退出登录时根据当前所在环境跳转至不同登陆页
+  - feature
+    退出登录时根据当前所在环境跳转至不同登陆页   
+    新增 message 弹窗函数式调用方法  
+    登陆成功后，右上角弹出欢迎语 “欢迎您！xxx”

src/common/MessageBox.tsx

+import React from "react";
+import { Snackbar, Alert, AlertProps, SnackbarProps } from "@mui/material";
+
+export interface MessageBoxProps {
+  type: AlertProps["severity"];
+  anchorOrigin?: SnackbarProps["anchorOrigin"];
+  duration?: number;
+}
+
+const MessageBox: React.FC<MessageBoxProps> = ({
+  type,
+  duration = 4000,
+  anchorOrigin = { vertical:'top', horizontal:'right' },
+  children,
+}) => {
+  const [open, setOpen] = React.useState(true);
+
+  const handleClose = (
+    event?: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpen(false);
+  };
+  return (
+    <Snackbar open={open} autoHideDuration={duration} anchorOrigin={anchorOrigin} onClose={handleClose}>
+      <Alert onClose={handleClose} severity={type}>
+        {children}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default MessageBox;

src/screens/LoginPage/LoginPage.tsx

@@ -41,6 +41,7 @@ import MainError from "../Console/Common/MainError/MainError";
 import { encodeFileName } from "../../common/utils";
 import { LockIcon, LoginMinIOLogo, UsersIcon } from "../../icons";
 import { spacingUtils } from "../Console/Common/FormComponents/common/styleLibrary";
+import message from '../../utils/message';
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -346,6 +347,7 @@ const Login = ({
           targetPath = `${localStorage.getItem("redirect-path")}`;
           localStorage.setItem("redirect-path", "");
         }
+        message.success(`欢迎您！${accessKey}`);
         history.push(targetPath);
       })
       .catch((err) => {

src/utils/message.tsx

+import MessageBox, { MessageBoxProps } from "../common/MessageBox";
+import ReactDom from "react-dom";
+import React from "react";
+
+type Message = string | React.ReactNode;
+
+type Options = Omit<MessageBoxProps, 'type'>
+
+type MessageRenderOptions = MessageBoxProps & { message: Message;};
+
+const messageRender = ({
+  type,
+  duration,
+  message,
+}: MessageRenderOptions) => {
+  const dom = document.createElement('div');
+  document.body.appendChild(dom);
+  ReactDom.render(
+    <MessageBox type={type} duration={duration}>
+      {message}
+    </MessageBox>,
+    dom
+  );
+};
+
+class MessageNotion {
+  info(message: Message, options?: Options) {
+    messageRender({
+      type: "info",
+      message,
+      ...options,
+    });
+  }
+
+  success(message: Message, options?: Options) {
+    messageRender({
+      type: "success",
+      message,
+      ...options,
+    });
+  }
+
+  error(message: Message, options?: Options) {
+    messageRender({
+      type: "error",
+      message,
+      ...options,
+    });
+  }
+
+  warning(message: Message, options?: Options) {
+    messageRender({
+      type: "warning",
+      message,
+      ...options,
+    });
+  }
+}
+export default new MessageNotion();