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();

src/routers/layout/nav/tools.ts

@@ -3,17 +3,20 @@ import { useMemo, useState } from "react";
 import { getLocalStorage } from "../tools";
 //todo 将数据加密
 export function useNavList(): [
-  NavListItemType[],
-  React.Dispatch<React.SetStateAction<NavListItemType[]>>
+  NavQueryItemType[],
+  React.Dispatch<React.SetStateAction<NavQueryItemType[]>>
 ] {
   const nav_ok_lists = useMemo(() => {
-    const local_lists = getLocalStorage("navTagLists", [] as NavListItemType[]);
+    const local_lists = getLocalStorage(
+      "navTagLists",
+      [] as NavQueryItemType[]
+    );
     if (PassNavList(local_lists)) {
       return local_lists;
     }
-    return nav_tag_list;
+    return query_nav_list;
   }, []);
-  const [navLists, setLists] = useState<NavListItemType[]>(nav_ok_lists);
+  const [navLists, setLists] = useState<NavQueryItemType[]>(nav_ok_lists);
   return [navLists, setLists];
 }
 // 判断类型
@@ -30,8 +33,8 @@ function checkPropertyType<T extends { [k: string]: any }>(
 ) {
   return input.hasOwnProperty(property) && typeof input[property] === type;
 }
-//检测从localstorage提取的list是否满足条件
-function PassNavList(lists: NavListItemType[]) {
+//检测从localstorage提取的querylist是否满足条件
+function PassNavList(lists: NavQueryItemType[]) {
   if (
     lists.length > 0 &&
     lists.every((item) => {
@@ -93,92 +96,98 @@ export type NavQueryItemType = {
   cancelable: boolean;
 };
 export type NavListItemType = NavQueryItemType | NavRouterItemType;
-
 const nav_tag_list = [
-  {
-    type: "router",
-    pathname: "photo",
-    name: "图片",
-  },
-  {
-    type: "router",
-    pathname: "video",
-    name: "视频",
-  },
-  {
-    type: "query",
-    query: "所有二创",
-    queryType: "q",
-    queryString: "",
-  },
-  {
-    type: "query",
-    query: "露早",
-    queryType: "q",
-    queryString: "露早",
-  },
-  {
-    type: "query",
-    query: "柚恩",
-    queryType: "q",
-    queryString: "柚恩",
-  },
-  {
-    type: "query",
-    query: "莞儿",
-    queryType: "q",
-    queryString: "莞儿",
-  },
-  {
-    type: "query",
-    query: "米诺",
-    queryType: "q",
-    queryString: "米诺",
-  },
-  {
-    type: "query",
-    query: "虞莫",
-    queryType: "q",
-    queryString: "虞莫",
-  },
-  {
-    type: "query",
-    query: "动画分区",
-    queryType: "tname",
-    queryString: "animation",
-  },
-  {
-    type: "query",
-    query: "音乐分区",
-    queryType: "tname",
-    queryString: "music",
-  },
-  {
-    type: "query",
-    query: "舞蹈分区",
-    queryType: "tname",
-    queryString: "dance",
-  },
-  {
-    type: "query",
-    query: "游戏分区",
-    queryType: "tname",
-    queryString: "delicacy",
-  },
-  {
-    type: "query",
-    query: "鬼畜分区",
-    queryType: "tname",
-    queryString: "guichu",
-  },
-  {
-    type: "query",
-    query: "其他分区",
-    queryType: "tname",
-    queryString: "other",
-  },
-].map((item) => ({
-  ...item,
-  id: nanoid(3),
-  cancelable: false,
-})) as NavListItemType[];
+    {
+      type: "router",
+      pathname: "photo",
+      name: "图片",
+    },
+    {
+      type: "router",
+      pathname: "video",
+      name: "视频",
+    },
+    {
+      type: "query",
+      query: "所有二创",
+      queryType: "q",
+      queryString: "",
+    },
+    {
+      type: "query",
+      query: "露早",
+      queryType: "q",
+      queryString: "露早",
+    },
+    {
+      type: "query",
+      query: "柚恩",
+      queryType: "q",
+      queryString: "柚恩",
+    },
+    {
+      type: "query",
+      query: "莞儿",
+      queryType: "q",
+      queryString: "莞儿",
+    },
+    {
+      type: "query",
+      query: "米诺",
+      queryType: "q",
+      queryString: "米诺",
+    },
+    {
+      type: "query",
+      query: "虞莫",
+      queryType: "q",
+      queryString: "虞莫",
+    },
+    {
+      type: "query",
+      query: "动画分区",
+      queryType: "tname",
+      queryString: "animation",
+    },
+    {
+      type: "query",
+      query: "音乐分区",
+      queryType: "tname",
+      queryString: "music",
+    },
+    {
+      type: "query",
+      query: "舞蹈分区",
+      queryType: "tname",
+      queryString: "dance",
+    },
+    {
+      type: "query",
+      query: "游戏分区",
+      queryType: "tname",
+      queryString: "delicacy",
+    },
+    {
+      type: "query",
+      query: "鬼畜分区",
+      queryType: "tname",
+      queryString: "guichu",
+    },
+    {
+      type: "query",
+      query: "其他分区",
+      queryType: "tname",
+      queryString: "other",
+    },
+  ].map((item) => ({
+    ...item,
+    id: nanoid(3),
+    cancelable: false,
+  })) as NavListItemType[],
+  query_nav_list = nav_tag_list.filter(
+    (item) => item.type === "query"
+  ) as NavQueryItemType[];
+
+export const router_nav_list = nav_tag_list.filter(
+  (item) => item.type === "router"
+) as NavRouterItemType[];

src/routers/layout/rightSide/index.tsx

@@ -0,0 +1,13 @@
+import { Avatar } from "@mui/material";
+
+export default function RightSide() {
+  return (
+    <Avatar
+      sx={{
+        marginLeft: "auto",
+      }}
+    >
+      Data
+    </Avatar>
+  );
+}

src/routers/layout/routernav/index.tsx

@@ -0,0 +1,29 @@
+import { Button, ButtonGroup, Stack } from "@mui/material";
+import { useMemo } from "react";
+import { NavLink } from "react-router-dom";
+import { useRouterList } from "./tools";
+
+export default function RouterNav() {
+  const routerlists = useRouterList(),
+    routerRes = useMemo(
+      () =>
+        routerlists.map((item) => (
+          <NavLink to={item.pathname} key={item.id}>
+            <Button>{item.name}</Button>
+          </NavLink>
+        )),
+      [routerlists]
+    );
+  return (
+    <Stack direction='row'>
+      <ButtonGroup
+        variant='text'
+        sx={{
+          alignItems: "center",
+        }}
+      >
+        {routerRes}
+      </ButtonGroup>
+    </Stack>
+  );
+}

src/routers/layout/routernav/tools.ts

@@ -0,0 +1,6 @@
+import { NavRouterItemType, router_nav_list } from "../nav/tools";
+import { useState } from "react";
+export function useRouterList(): NavRouterItemType[] {
+  const [list, _] = useState<NavRouterItemType[]>(router_nav_list);
+  return list;
+}

src/routers/video/item/index.tsx

@@ -33,7 +33,7 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
             "coin",
             "share",
             "like",
-            "updated_at",
+            "pubdate",
             "danmaku",
             "duration"
           )}
@@ -46,7 +46,7 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
           data,
           "title",
           "name",
-          "updated_at",
+          "pubdate",
           "bvid",
           "coin",
           "favorite",
@@ -57,3 +57,4 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
     </section>
   );
 };
+//todo 修改卡片样式

src/routers/video/item/videoinfo.tsx

@@ -9,19 +9,9 @@ import { VideoRouterImageCardType } from "../videotype";
 import { BiliIcon, CoinIcon } from "./icon";
 import styles from "./item.module.less";
 export const VideoInfo: FC<
-  Pick<
-    VideoRouterImageCardType,
-    | "title"
-    | "name"
-    | "updated_at"
-    | "bvid"
-    | "coin"
-    | "favorite"
-    | "like"
-    | "face"
-  >
+  Pick<VideoRouterImageCardType, "title" | "name" | "pubdate" | "bvid" | "face">
 > = (props) => {
-  const { title, name, bvid, updated_at, coin, like, favorite, face } = props;
+  const { title, name, bvid, pubdate, face } = props;
   const matchsmSize = useScreenMatchSize("sm");
   return (
     <div className={styles["video-info"]}>
@@ -42,9 +32,9 @@ export const VideoInfo: FC<
         <div className={styles["video-up-desc"]}>
           <Link underline='none' color='inherit'>
             <span title={name}>{name}</span>
-            {matchsmSize && <span>{getrealtiveTime(updated_at * 1000)}</span>}
+            {matchsmSize && <span>{getrealtiveTime(pubdate * 1000)}</span>}
           </Link>
-          {matchsmSize && (
+          {/* {matchsmSize && (
             <div className={styles["video-up-desc-data"]}>
               <span title='点赞数'>
                 <ThumbUpSharpIcon fontSize='small' htmlColor='#707070' />{" "}
@@ -58,7 +48,7 @@ export const VideoInfo: FC<
                 {getFixedNumber(favorite)}
               </span>
             </div>
-          )}
+          )} */}
         </div>
       </div>
     </div>

src/routers/video/masonry.tsx

@@ -41,7 +41,7 @@ export default function VideoMasonry(props: { q?: string }) {
             "coin",
             "share",
             "like",
-            "updated_at",
+            "pubdate",
             "danmaku",
             "duration",
             "favorite",

src/routers/video/videotype.ts

@@ -20,7 +20,7 @@ export type VideoRouterImageCardType = Pick<
   | "coin"
   | "share"
   | "like"
-  | "updated_at"
+  | "pubdate"
   | "danmaku"
   | "duration"
   | "favorite"

tsconfig.json

@@ -20,7 +20,8 @@
       "@utils/*": ["src/utils/*"],
       "@components/*": ["src/components/*"],
       "@store/*": ["src/store/*"],
-      "@routers/*": ["src/routers/*"]
+      "@routers/*": ["src/routers/*"],
+      "@assets/*": ["src/assets/*"]
     }
   },
   "include": ["src"]

vite.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
       "@components": path.resolve(__dirname, "src/components"),
       "@store": path.resolve(__dirname, "src/store"),
       "@routers": path.resolve(__dirname, "src/routers"),
+      "@assets": path.resolve(__dirname, "src/assets"),
     },
   },
   plugins: [