增加QA提示

src/components/masonry/index.tsx

@@ -24,7 +24,7 @@ export default function Masonry() {
   ]);
   useEffect(() => {
     fetchMoreItemsHandler(0, 20, []);
-    console.log("effect");
+    // console.log("effect");
   }, [fetchMoreItemsHandler]);
   return (
     <div

src/routers/layout/layout.module.less

@@ -17,99 +17,4 @@
     display: flex;
     align-items: center;
     background-color: #fff;
-}
-
-.logo {
-    display: flex;
-    align-items: center;
-    flex-flow: row-reverse nowrap;
-    padding: 5px 0;
-
-    a {
-        color: inherit;
-        text-decoration: none;
-    }
-
-
-
-    h1 {
-        margin: 0;
-        white-space: nowrap;
-        position: relative;
-        padding-right: 30px;
-    }
-
-}
-
-.modal {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #fff;
-    border-radius: 4px;
-    padding: 15px 10px;
-    max-width: 400px;
-    width: 90%;
-
-
-
-
-    ul {
-        display: flex;
-        flex-flow: column nowrap;
-        max-height: 60vh;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-
-    li {
-        margin: 10px;
-        list-style: none;
-        box-sizing: border-box;
-
-        &>p:not(:last-of-type) {
-            margin-bottom: 12px;
-            color: grey;
-        }
-
-        &>p {
-            display: flex;
-
-            strong {
-                flex: 0 0 25px;
-            }
-        }
-
-
-    }
-}
-
-
-.line_text {
-    width: 100%;
-    // color: #a2a9b6;
-    border: 0;
-    font-size: 14px;
-    padding: 1em 0;
-    position: relative;
-    -webkit-mask-image: linear-gradient(to right,
-            transparent,
-            black,
-            transparent);
-    mask-image: linear-gradient(to right, transparent, black, transparent);
-
-    &::before {
-        content: attr(data-content);
-        position: absolute;
-        padding: 0 1ch;
-        line-height: 1px;
-        border: solid #d0d0d5;
-        border-width: 0 99vw;
-        width: fit-content;
-        /* for 不支持fit-content浏览器 */
-        white-space: nowrap;
-        left: 50%;
-        transform: translateX(-50%);
-    }
 }

src/routers/layout/logo/index.tsx

@@ -0,0 +1,71 @@
+import { Button, Badge } from "@mui/material";
+import { useState, useMemo, FC } from "react";
+import { H1, Explain, Yituo } from "./modal";
+import styles from "./logo.module.less";
+import { Storage } from "../tools";
+
+const QAStorage = new Storage("QAUpdate");
+//暂时先这样
+const _qa_update_time = `2023-2-2`;
+const useCheckQANews = () => {
+  const local_qa_value = useMemo(() => {
+    return QAStorage.getLocalStorage("");
+  }, []);
+  const [shouldShowNews, set] = useState(local_qa_value !== _qa_update_time),
+    handlerReadedNews = () => {
+      QAStorage.setLocalstorage(_qa_update_time);
+      set(() => false);
+    };
+  return [shouldShowNews, handlerReadedNews] as [boolean, () => void];
+};
+
+export default function LOGO() {
+  const [open, set] = useState(false);
+  const [shouldShowNews, handlerReadedNews] = useCheckQANews();
+  const handlerClick = () => {
+    set((open) => !open);
+    handlerReadedNews();
+  };
+  return (
+    <div className={styles["logo"]}>
+      <H1>
+        EOEfans-web端
+        <Button
+          onClick={handlerClick}
+          sx={{
+            padding: "0",
+            minWidth: "initial",
+            position: "absolute",
+            transform: "translate(5px,-5px)",
+            width: "20px",
+          }}
+        >
+          QA
+          <Show_news visible={!shouldShowNews} />
+        </Button>
+        <Explain open={open} handlerClick={handlerClick} />
+      </H1>
+      <Yituo width={"64px"} height={"30px"} />
+    </div>
+  );
+}
+
+const Show_news: FC<{ visible: boolean }> = ({ visible }) => (
+  <Badge
+    color='info'
+    variant='dot'
+    overlap='circular'
+    badgeContent=' '
+    sx={{
+      transform: "translate(5px,-5px)",
+    }}
+    invisible={visible}
+  >
+    <div
+      style={{
+        width: "0px",
+        height: "0px",
+      }}
+    ></div>
+  </Badge>
+);