添加message组件

src/components/message/index.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
+import { nanoid } from "nanoid";
+import styles from "./message.module.less";
+import MessageContent, { MessageType } from "./message";
+
+type MessageFn = (text: string) => void;
+export interface Notice {
+  text: string;
+  key: string;
+  type: MessageType;
+}
+export interface MessageApi {
+  info: MessageFn;
+  success: MessageFn;
+  warning: MessageFn;
+  error: MessageFn;
+}
+
+//利用js特性获取内部操作函数
+let add: (message: Notice) => void;
+
+const MessageContainer = () => {
+  const [mgsList, setList] = useState<Notice[]>([]);
+  const timeout = 3000;
+  const remove = (msg: Notice) => {
+    const { key } = msg;
+    setList((prevList) =>
+      prevList.filter(({ key: itemKey }) => key !== itemKey)
+    );
+  };
+  add = (msg: Notice) => {
+    setList((prevList) => [...prevList, msg]);
+    setTimeout(() => {
+      remove(msg);
+    }, timeout);
+  };
+  return (
+    <>
+      {mgsList.map((msg) => (
+        <MessageContent {...msg} />
+      ))}
+    </>
+  );
+};
+//获得container
+const getContainer = () => {
+  const container = document.querySelector("#MessageWrapper");
+  if (!container) {
+    const _container = document.createElement("div");
+    _container.id = "MessageWrapper";
+    _container.className = styles.MessageWrapper;
+    document.body.appendChild(_container);
+    return _container;
+  }
+  return container;
+};
+const message = (function () {
+  if (typeof document !== "undefined") {
+    let container = createRoot(getContainer());
+    container.render(<MessageContainer />);
+  }
+  const msgType = (type: MessageType) => (text: string) => {
+    add({
+      text,
+      type,
+      key: nanoid(4),
+    });
+  };
+  return {
+    info: msgType("info"),
+  };
+})();
+
+export default message;

src/components/message/message.module.less

@@ -0,0 +1,43 @@
+.MessageWrapper {
+    position: fixed;
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    /* 消息提示的优先级应该是最高的！ */
+    z-index: 9999;
+}
+
+.message {
+    border-radius: 8px;
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 10px;
+    padding: 12px 24px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-flow: row nowrap;
+    animation: in 0.1s linear, out 0.1s linear 2.9s forwards;
+}
+
+
+@keyframes in {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes out {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+}

src/components/message/message.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react";
+import styles from "./message.module.less";
+export type MessageType = "info";
+
+export interface MessageProps {
+  text: string;
+  type: MessageType;
+}
+
+const MessageContent: FC<MessageProps> = (props: MessageProps) => {
+  const { text, type } = props;
+  return (
+    <div className={styles.message}>
+      <p>
+        <span>{text}</span>
+      </p>
+    </div>
+  );
+};
+
+export default MessageContent;

src/routers/layout.tsx

@@ -7,6 +7,7 @@ import {
   useNavigation,
   useSubmit,
 } from "react-router-dom";
+import message from "@components/message";
 export default function Layout() {
   const nav_lists = [
     {
@@ -24,7 +25,12 @@ export default function Layout() {
   ];
   return (
     <>
-      <header>首部</header>
+      <header>
+        <p>header</p>
+        <div>
+          <button onClick={() => message.info("测试info")}>test message</button>
+        </div>
+      </header>
       <main>
         <nav>
           <ul>