♿ perf(custom): 添加初版重构页面

页面还未完全适配手机端

src/components/proview/type.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
 
 export type ReactChildrenType = {
-  children: ReactElement;
+  children: ReactElement | ReactElement[];
 };

src/main.tsx

@@ -19,6 +19,7 @@ import "./index.less";
 // sentry
 import * as Sentry from "@sentry/react";
 import { BrowserTracing } from "@sentry/tracing";
+import SearchPage, { loader as SearchLoader } from "@routers/search";
 if (!isdev && isrelease) {
   Sentry.init({
     dsn: "https://086f27258cce4d28aacc8c2719a683fb@sentry.vtb.link/3",
@@ -59,6 +60,12 @@ const router = createBrowserRouter([
             path: "photo",
             element: <PhotoPage />,
           },
+          {
+            //视频搜索展示页面
+            path: "search",
+            element: <SearchPage />,
+            loader: SearchLoader,
+          },
         ],
       },
     ],

src/routers/layout/header.tsx

@@ -1,12 +1,14 @@
 import styles from "./layout.module.less";
 import LOGO from "./logo";
-import RouterNav from "./routernav";
 import { useAppDispatch } from "@store/hooks";
 import { useLocation } from "react-router-dom";
-import { useEffect, useMemo } from "react";
+import { memo, useEffect } from "react";
 import { changeLoadingCauseByUrl } from "@store/loading";
 import { routerNameToLoading } from "@utils/router";
 import { styled } from "@mui/material";
+import Search from "./search";
+import { Yituo } from "./logo/modal";
+import RouterNav from "./routernav/index";
 export default function Header() {
   const dispatch = useAppDispatch(),
     location = useLocation();
@@ -17,21 +19,32 @@ export default function Header() {
       })
     );
   }, [location.pathname]);
-  const JSXRes = useMemo(
-    () => (
-      <Header_header className={styles["header"]}>
-        <LOGO />
+  return <ReactiveHeader />;
+}
+
+const ReactiveHeader = memo(() => {
+  return (
+    <header className='border-t-2 border-b-2 pt-4 pb-4'>
+      <div className='hidden max-md:flex justify-between ml-8 mr-8'>
+        <Yituo width={"64px"} height={"30px"} />
         <RouterNav />
-      </Header_header>
-    ),
-    []
+      </div>
+      <Header_content className={`${styles["header"]}`}>
+        <div className='flex-shrink-0 flex-grow basis-40 max-md:hidden'>
+          <LOGO />
+        </div>
+        <div className='flex-1 max-md:ml-6 max-md:mr-6'>
+          <Search />
+        </div>
+        <div className='text-gray-400 text-end flex-shrink-0 flex-grow basis-40 max-md:hidden'>
+          敬请期待
+        </div>
+      </Header_content>
+    </header>
   );
-  return <>{JSXRes}</>;
-}
-const Header_header = styled("header")(({ theme }) => ({
+});
+
+const Header_content = styled("div")(({ theme }) => ({
   flexDirection: "row",
-  [theme.breakpoints.down("sm")]: {
-    flexDirection: "row-reverse",
-    justifyContent: "flex-end",
-  },
+  justifyContent: "space-between",
 }));

src/routers/layout/index.tsx

@@ -1,10 +1,11 @@
 import { Flipped, Flipper } from "react-flip-toolkit";
-import { Outlet } from "react-router-dom";
+import { Outlet, useMatch } from "react-router-dom";
 import Header from "./header";
 import Header_Nav from "./nav";
 import { useAppSelector } from "@store/hooks";
 import { selectNavMoreShowed } from "@store/device/index";
 import styles from "./layout.module.less";
+import MidContent from "./midcontent";
 export default function Layout() {
   const showed = useAppSelector(selectNavMoreShowed);
   return (
@@ -22,11 +23,7 @@ export default function Layout() {
         }}
       >
         <Header />
-        <Flipped flipId={"list"}>
-          <nav className={"feedContainer " + styles["nav"]}>
-            <Header_Nav />
-          </nav>
-        </Flipped>
+        <NavContent />
         <Flipped flipId={"container"} spring={"veryGentle"}>
           <main className='feedContainer'>
             <Outlet />
@@ -36,3 +33,16 @@ export default function Layout() {
     </>
   );
 }
+
+const NavContent = () => {
+  const isSearchPage = useMatch(`/search`) !== null;
+  return <div className='max-md:hidden'>{!isSearchPage && <MidContent />}</div>;
+};
+
+const OldNav = () => (
+  <Flipped flipId={"list"}>
+    <nav className={"feedContainer " + styles["nav"]}>
+      <Header_Nav />
+    </nav>
+  </Flipped>
+);

src/routers/layout/layout.module.less

@@ -1,6 +1,5 @@
 .container {
     position: relative;
-
 }
 
 .nav {
@@ -13,7 +12,6 @@
 .header {
     max-width: 1440px;
     margin: 0 auto;
-    padding-top: 10px;
     display: flex;
     align-items: center;
     background-color: #fff;

src/routers/layout/logo/index.tsx

@@ -27,7 +27,7 @@ export default function LOGO() {
     handlerReadedNews();
   };
   return (
-    <div className={styles["logo"]}>
+    <div className={`${styles["logo"]}`}>
       <H1>
         EOEfans-web端
         <Button

src/routers/layout/logo/logo.module.less

@@ -3,6 +3,7 @@
     align-items: center;
     flex-flow: row-reverse nowrap;
     padding: 5px 0;
+    justify-content: flex-end;
 
     a {
         color: inherit;

src/routers/layout/midcontent/index.tsx

@@ -0,0 +1,81 @@
+import { Link } from "react-router-dom";
+import { Link as Mlink } from "@mui/material";
+import { RouterList } from "../routernav";
+import { TabProps } from "../routernav/index";
+import HeadNav from "../nav";
+import styles from "./midcontent.module.less";
+export default function MidContent() {
+  return (
+    <>
+      <div
+        className={`${styles["midcontent"]} flex justify-between mt-4 mb-4 gap-2`}
+      >
+        <LeftLinks />
+        <div className='flex-shrink flex-grow flex justify-center gap-2 flex-wrap'>
+          {/* todo修改这个玩意 */}
+          <HeadNav />
+        </div>
+        <RightLinks />
+      </div>
+    </>
+  );
+}
+
+const LeftLinks = () => (
+  <div className='flex items-center gap-2 basis-36 flex-shrink-0'>
+    {RouterList.map((item, key) => (
+      <Link
+        to={item.to}
+        key={key}
+        className='pl-4 pr-4 pt-2 pb-2 text-center bg-white text-gray-800 transition-all hover:bg-blue-100'
+      >
+        {item.label}
+      </Link>
+    ))}
+  </div>
+);
+`露早虞莫莞儿柚恩米诺`;
+const GroupLists: TabProps[] = [
+  {
+    label: "露早",
+    to: "1669777785",
+  },
+  {
+    label: "虞莫",
+    to: "1811071010",
+  },
+  {
+    label: "莞儿",
+    to: "1875044092",
+  },
+  {
+    label: "柚恩",
+    to: "1795147802",
+  },
+  {
+    label: "米诺",
+    to: "1778026586",
+  },
+  {
+    label: "官号",
+    to: "2018113152",
+  },
+];
+
+const RightLinks = () => (
+  <div className='grid grid-cols-3 gap-2 text-gray-600 basis-40 flex-shrink-0'>
+    {GroupLists.map((item, key) => (
+      <Mlink
+        href={`https://space.bilibili.com/${item.to}`}
+        target='_blank'
+        key={key}
+        underline='none'
+        color='inherit'
+        className='text-sm font-normal pl-2 pr-2 pt-1 pb-1 transition-colors hover:text-blue-400'
+        title={item.label}
+      >
+        {item.label}
+      </Mlink>
+    ))}
+  </div>
+);

src/routers/layout/midcontent/midcontent.module.less

@@ -0,0 +1,5 @@
+.midcontent {
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 0 16px;
+}

src/routers/layout/nav/index.tsx

@@ -116,7 +116,8 @@ export default function Header_Nav() {
             alignItems='center'
             className={`${styles["navstack"]}`}
             style={{
-              flexWrap: showed ? "wrap" : "nowrap",
+              // flexWrap: showed ? "wrap" : "nowrap",
+              flexWrap: "wrap",
             }}
             data-showed={showed}
           >