header修改v0.1

src/components/proview/themePreview.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { ReactChildrenType } from "./type";
+const theme = createTheme({
+  typography: {
+    fontFamily: "Proxima Soft",
+  },
+});
+
+const MUIThemePreview = ({ children }: ReactChildrenType) => {
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+export default MUIThemePreview;

src/index.less

@@ -8,4 +8,19 @@
     margin: 0 auto;
     padding: 0 8px;
     max-width: 1200px;
+}
+
+@font-face {
+    font-family: 'Proxima Soft';
+    src: local('Proxima Soft Regular'), local('Proxima-Soft-Regular'),
+        url('@assets/font/ProximaSoft-Regular.woff2') format('woff2'),
+        url('@assets/font/ProximaSoft-Regular.woff') format('woff'),
+        url('@assets/font/ProximaSoft-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+body,
+html {
+    font-family: 'Proxima Soft';
 }

src/main.tsx

@@ -14,6 +14,7 @@ import "./normalize.css";
 import "loading-attribute-polyfill";
 import "whatwg-fetch";
 import NavShowProview from "@components/proview/navShow";
+import MUIThemePreview from "@components/proview/themePreview";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -30,7 +31,7 @@ const router = createBrowserRouter([
           {
             //默认页面
             index: true,
-            element: <VideoPage />,
+            element: <PhotoPage />,
           },
           {
             // video瀑布流展示页面
@@ -52,7 +53,9 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <ScreenProview>
     <TagSelectProview>
       <NavShowProview>
-        <RouterProvider router={router} />
+        <MUIThemePreview>
+          <RouterProvider router={router} />
+        </MUIThemePreview>
       </NavShowProview>
     </TagSelectProview>
   </ScreenProview>

src/routers/layout/header.tsx

@@ -1,17 +1,29 @@
 import SearchSharpIcon from "@mui/icons-material/SearchSharp";
 import { Form } from "react-router-dom";
+import { Unstable_Grid2 as Grid } from "@mui/material";
 import Header_Nav from "./nav";
 import styles from "./layout.module.less";
 import { useFocus } from "./hooks";
+import RouterNav from "./routernav";
+import LOGO from "./logo";
+import RightSide from "./rightSide";
 export default function Header() {
   return (
     <header className={styles["header"]}>
-      <Search />
+      <LOGO />
+      <nav className={styles["nav"]}>
+        <RouterNav />
+        <div className={styles["nav-right"]}>
+          <Search />
+          <RightSide />
+        </div>
+      </nav>
 
       <Header_Nav />
     </header>
   );
 }
+//todo 换掉header
 //todo 添加搜索
 function Search() {
   const { focused, bind } = useFocus();

src/routers/layout/layout.module.less

@@ -74,4 +74,22 @@
             background-color: #f1f2f3;
         }
     }
+}
+
+.header {
+    max-width: 1440px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+
+    .nav {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+
+        &-right {
+            display: flex;
+            align-items: center;
+        }
+    }
 }

src/routers/layout/logo.tsx

@@ -0,0 +1,16 @@
+import { Link } from "@mui/material";
+
+export default function LOGO() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+      }}
+    >
+      <Link href='/' underline='none' color='inherit'>
+        <span>EOEfans</span>
+      </Link>
+    </div>
+  );
+}

src/routers/layout/nav/index.tsx

@@ -2,7 +2,6 @@ import { Chip, Stack } from "@mui/material";
 import { useInView } from "react-intersection-observer";
 import SegmentIcon from "@mui/icons-material/Segment";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
-import { NavLink } from "react-router-dom";
 import {
   DndContext,
   closestCenter,
@@ -18,12 +17,7 @@ import { restrictToParentElement } from "@dnd-kit/modifiers";
 import styles from "./nav.module.less";
 import { FC, useState, useMemo, memo } from "react";
 import { Flipped } from "react-flip-toolkit";
-import {
-  NavListItemType,
-  NavRouterItemType,
-  NavQueryItemType,
-  useNavList,
-} from "./tools";
+import { NavQueryItemType, useNavList } from "./tools";
 import { setLocalstorage } from "../tools";
 import { useTagsSelected } from "@components/proview/tagSelect";
 import { useNavShowed } from "../../../components/proview/navShow";
@@ -129,7 +123,7 @@ const NavInViewItem = () => {
   );
 };
 
-const NavItem: FC<NavListItemType> = memo((props) => {
+const NavItem: FC<NavQueryItemType> = memo((props) => {
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({ id: props.id });
   const style = {
@@ -139,31 +133,12 @@ const NavItem: FC<NavListItemType> = memo((props) => {
   return (
     <Flipped flipId={props.id} spring={"veryGentle"} translate>
       <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-        {props.type === "router" ? (
-          <NavRouterChipItem {...props} />
-        ) : (
-          <NavTagChipItem {...props} />
-        )}
+        <NavTagChipItem {...props} />
       </div>
     </Flipped>
   );
 });
 
-const NavRouterChipItem: FC<NavRouterItemType> = memo((props) => (
-  <NavLink
-    to={props.pathname}
-    className={({ isActive, isPending }) =>
-      `${styles["navlink"]} ${isActive ? styles["navlink-active"] : ""}`
-    }
-  >
-    <Chip
-      className={styles["navstack-filter-tag"]}
-      label={props.name}
-      clickable
-    />
-  </NavLink>
-));
-
 const NavTagChipItem: FC<NavQueryItemType> = memo((props) => {
   const [clicked, setClick] = useState<boolean>(false),
     { handerAddTag, handerDeleteTag } = useTagsSelected();