💄 style(custom): 修改中部栏，将导航栏收缩至蛞蝓右边，header栏右边将承载更多内容

src/routers/layout/header.tsx

@@ -7,6 +7,7 @@ import { changeLoadingCauseByUrl } from "@store/loading";
 import { routerNameToLoading } from "@utils/router";
 import { styled } from "@mui/material";
 import Search from "./search";
+import PCRightMore from "./rightMore/index";
 export default function Header() {
   const dispatch = useAppDispatch(),
     location = useLocation();
@@ -22,7 +23,7 @@ export default function Header() {
 
 const ReactiveHeader = memo(() => {
   return (
-    <header className='z-10 max-md:border-b-2 sticky top-0 bg-white'>
+    <header className='z-10 sticky top-0 bg-white'>
       {/* 手机端 */}
       <div className='hidden max-sm:flex px-6 pb-3 pt-4'>
         <Search />
@@ -35,8 +36,8 @@ const ReactiveHeader = memo(() => {
         <div className='flex-grow-0 flex-shrink basis-80 h-12 max-md:mx-6 '>
           <Search />
         </div>
-        <div className='text-gray-400 text-end flex-shrink-0 flex-grow basis-40 relative z-10'>
-          敬请期待
+        <div className=' text-end flex-shrink-0 flex-grow basis-40 relative z-10'>
+          <PCRightMore />
         </div>
       </Header_content>
     </header>

src/routers/layout/index.tsx

@@ -6,7 +6,7 @@ import { selectNavMoreShowed } from "@store/device/index";
 import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
 import { Link } from "@mui/material";
 import styles from "./layout.module.less";
-import MidContent from "./midcontent";
+import Header_Nav from "./nav";
 export default function Layout() {
   const showed = useAppSelector(selectNavMoreShowed);
   return (
@@ -27,7 +27,9 @@ export default function Layout() {
           <ImportTantInfo />
         </div>
         <Header />
-        <NavContent />
+        <div className='px-2 flex justify-center'>
+          <Header_Nav />
+        </div>
         <Flipped flipId={"container"} spring={"veryGentle"}>
           <main className='feedContainer'>
             <Outlet />
@@ -50,8 +52,3 @@ export const ImportTantInfo = () => (
     </Link>
   </>
 );
-
-const NavContent = () => {
-  const isSearchPage = useMatch(`/search`) !== null;
-  return <div className='max-sm:hidden'>{!isSearchPage && <MidContent />}</div>;
-};

src/routers/layout/logo/index.tsx

@@ -1,10 +1,12 @@
-import { Button, Badge } from "@mui/material";
+import { Button, Badge, Menu, MenuItem } from "@mui/material";
 import { useState, useMemo, FC } from "react";
-import { H1, Explain, Yituo } from "./modal";
+import { Explain, Yituo } from "./modal";
 import styles from "./logo.module.less";
 import { Storage } from "../tools";
 import { useScreenSize } from "@components/proview/screenSize";
-
+import { Link, useMatch } from "react-router-dom";
+import { RouterList } from "../routernav/index";
+import React from "react";
 const QAStorage = new Storage("QAUpdate");
 //暂时先这样
 const _qa_update_time = `2023-3-1`;
@@ -21,36 +23,100 @@ const useCheckQANews = () => {
 };
 
 export default function LOGO() {
+  const { lg } = useScreenSize();
+  return (
+    <div className={`${styles["logo"]}`}>
+      <Yituo width={"64px"} height={"30px"} />
+      <div className='max-md:font-medium flex items-center gap-2 max-lg:flex-col'>
+        {lg && <LGRouterListAndQA />}
+        {!lg && <RouterListAndQA />}
+      </div>
+    </div>
+  );
+}
+
+const LGRouterListAndQA = () => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null),
+    handleClick = (event: React.MouseEvent<HTMLButtonElement>) =>
+      setAnchorEl(event.currentTarget),
+    handleClose = () => setAnchorEl(null);
+  const open = Boolean(anchorEl);
+  return (
+    <>
+      <div>
+        <Button
+          id='basic-button'
+          aria-controls={open ? "basic-menu" : undefined}
+          aria-haspopup='true'
+          aria-expanded={open ? "true" : undefined}
+          onClick={handleClick}
+        >
+          导航
+        </Button>
+        <Menu
+          id='basic-menu'
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+          elevation={2}
+        >
+          <MenuItem sx={{ ":hover": { backgroundColor: "white" } }}>
+            <QAButton />
+          </MenuItem>
+          {RouterList.slice(0, 2).map((item) => (
+            <MenuItem
+              onClick={handleClose}
+              key={item.label}
+              sx={{ ":hover": { backgroundColor: "white" } }}
+            >
+              <Link
+                to={item.to}
+                className='px-4 py-2 text-center rounded-sm bg-white text-gray-800 transition-all duration-300 hover:bg-gray-200 '
+              >
+                {item.label + "站"}
+              </Link>
+            </MenuItem>
+          ))}
+        </Menu>
+      </div>
+    </>
+  );
+};
+const QAButton = () => {
   const [open, set] = useState(false);
   const [shouldShowNews, handlerReadedNews] = useCheckQANews();
-  const handlerClick = () => {
+  const handlerClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
     set((open) => !open);
     handlerReadedNews();
   };
-  const { md } = useScreenSize();
   return (
-    <div className={`${styles["logo"]}`}>
-      <Yituo width={"64px"} height={"30px"} />
-      <H1 className='max-md:font-medium'>
-        {!md ? `eoefans-web端` : `eoefans`}
-        <Button
-          onClick={handlerClick}
-          sx={{
-            padding: "0",
-            minWidth: "initial",
-            position: "absolute",
-            transform: "translate(5px,-5px)",
-            width: "20px",
-          }}
+    <>
+      <Button onClick={handlerClick} className='px-4 py-2 max-[1200px]:w-full'>
+        QA
+        <Show_news visible={!shouldShowNews} />
+        <Explain open={open} handlerClick={handlerClick as () => void} />
+      </Button>
+    </>
+  );
+};
+
+const RouterListAndQA = () => {
+  return (
+    <>
+      <QAButton />
+      {RouterList.slice(0, 2).map((item) => (
+        <Link
+          key={item.label}
+          to={item.to}
+          className='px-4 py-2 text-center rounded-sm bg-white text-gray-800 transition-all duration-300 hover:bg-gray-200 '
         >
-          QA
-          <Show_news visible={!shouldShowNews} />
-        </Button>
-        <Explain open={open} handlerClick={handlerClick} />
-      </H1>
-    </div>
+          {item.label + "站"}
+        </Link>
+      ))}
+    </>
   );
-}
+};
 
 const Show_news: FC<{ visible: boolean }> = ({ visible }) => (
   <Badge

src/routers/layout/logo/modal.tsx

@@ -1,4 +1,4 @@
-import { Button, Link, Modal, styled } from "@mui/material";
+import { Button, Link, Modal } from "@mui/material";
 import { Link as Rlink } from "react-router-dom";
 import { FC, ReactElement } from "react";
 import styles from "./logo.module.less";
@@ -26,13 +26,6 @@ export const Explain: FC<{ open: boolean; handlerClick: () => void }> = (
   </>
 );
 
-export const H1 = styled("h1")(({ theme }) => ({
-  fontSize: "24px",
-  [theme.breakpoints.down("md")]: {
-    fontSize: "15px",
-  },
-}));
-
 const QALists: { question: ReactElement; answer: ReactElement }[] = [
   {
     question: <>露早tag为什么不是应援色？</>,
@@ -104,6 +97,7 @@ export const QA = () => (
 export const Yituo: FC<{
   height: number | string;
   width: number | string;
+  children?: ReactElement;
 }> = ({ height, width }) => (
   <Rlink to={"/"}>
     <svg width={width} height={height} viewBox='0 0 524.739 295.223'>