修改颜色

EOEFANS · Jan 16, 2023 · 5417cf3 · 5417cf3
1 parent 3484dc1
commit 5417cf3
Show file tree

Hide file tree

Showing 13 changed files with 212 additions and 66 deletions.
diff --git a/src/components/proview/themePreview.tsx b/src/components/proview/themePreview.tsx
@@ -1,10 +1,49 @@
+//@ts-nocheck
 import React from "react";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { ReactChildrenType } from "./type";
+declare module "@mui/material/styles" {
+  interface Palette {
+    palette: {
+      luzao: Palette["primary"];
+      minuo: Palette["primary"];
+      waner: Palette["primary"];
+      yumo: Palette["primary"];
+      youen: Palette["primary"];
+      yituo: Palette["primary"];
+    };
+  }
+  interface PaletteOptions {
+    luzao: Palette["primary"];
+    minuo: Palette["primary"];
+    waner: Palette["primary"];
+    yumo: Palette["primary"];
+    youen: Palette["primary"];
+    yituo: Palette["primary"];
+  }
+}
+declare module "@mui/material/Button" {
+  interface ButtonPropsColorOverrides {
+    luzao: true;
+    minuo: true;
+    waner: true;
+    yumo: true;
+    youen: true;
+    yituo: true;
+  }
+}
 const theme = createTheme({
   typography: {
     fontFamily: "Proxima Soft",
   },
+  palette: {
+    luzao: { main: "#3dff9e", contrastText: "#fff" },
+    minuo: { main: "#f068B0", contrastText: "#fff" },
+    waner: { main: "#1eafe4", contrastText: "#fff" },
+    yumo: { main: "#b77fdd", contrastText: "#fff" },
+    youen: { main: "#EB6346", contrastText: "#fff" },
+    yituo: { main: "#49d4ba", contrastText: "#fff" },
+  },
 });
 
 const MUIThemePreview = ({ children }: ReactChildrenType) => {

diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx
@@ -5,21 +5,15 @@ import LOGO from "./logo";
 import RightSide from "./rightSide";
 import Search from "./search";
 export default function Header() {
-  const { focused } = useSearchFocus();
+  // const { focused } = useSearchFocus();
   return (
-    <Flipped flipId={"list"} spring={"veryGentle"}>
-      <header
-        className={styles["header"]}
-        style={{
-          justifyContent: focused ? "center" : "space-between",
-          height: focused ? "100px" : "40px",
-        }}
-      >
-        {!focused && <LOGO />}
+    // <Flipped flipId={"list"} spring={"veryGentle"}>
+    <header className={styles["header"]}>
+      {/* {!focused && <LOGO />}
         <Search />
-        {!focused && <RightSide />}
-      </header>
-    </Flipped>
+        {!focused && <RightSide />} */}
+      <LOGO />
+    </header>
+    // </Flipped>
   );
 }
-//todo 换掉header
diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx
@@ -9,6 +9,7 @@ import styles from "./layout.module.less";
 export default function Layout() {
   const showed = useAppSelector(selectNavMoreShowed),
     { focused } = useSearchFocus();
+
   return (
     <>
       <Flipper
@@ -18,12 +19,7 @@ export default function Layout() {
         className={styles["container"]}
       >
         <Header />
-        <nav
-          className='feedContainer'
-          style={{
-            paddingTop: "40px",
-          }}
-        >
+        <nav className='feedContainer'>
           <Header_Nav />
         </nav>
         <Flipped flipId={"list"} spring={"veryGentle"}>

diff --git a/src/routers/layout/layout.module.less b/src/routers/layout/layout.module.less
@@ -1,16 +1,37 @@
 .container {
     position: relative;
+
 }
 
 .header {
     max-width: 1440px;
     margin: 0 auto;
     display: flex;
     align-items: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
+    justify-content: center;
     background-color: #fff;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &>a:only-child {
+        display: block;
+        position: relative;
+
+        h1 {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            white-space: nowrap;
+            //todo 根据应援色修改
+        }
+    }
 }
diff --git a/src/routers/layout/logo.tsx b/src/routers/layout/logo.tsx
@@ -1,16 +1,62 @@
-import { Link } from "@mui/material";
-
+import { FC } from "react";
+import { Link } from "react-router-dom";
+import styles from "./layout.module.less";
 export default function LOGO() {
   return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-      }}
-    >
-      <Link href='/' underline='none' color='inherit'>
-        <span>EOEfans</span>
+    <div className={styles["logo"]}>
+      <Link to='/'>
+        <h1>EOEfans-web端</h1>
+        <Yituo width={"220px"} height={"125px"} />
       </Link>
     </div>
   );
 }
+//todo 修改logo
+
+const Yituo: FC<{
+  height: number | string;
+  width: number | string;
+}> = ({ height, width }) => (
+  <svg width={width} height={height} viewBox='0 0 524.739 295.223'>
+    <g id='Component_6_1' data-name='Component 6 – 1'>
+      <path
+        d='M352.413,1039.154s-18.184-28.564,0-43.279,66.674-109.064,219.936-45.01c0,0,102.175-44.145,120.359-64.919-2.6,0-8.659-33.758-23.379-40.683s-34.636-22.505-32.038-32.892,37.233-3.463,42.429,24.236c3.464,0,34.636,33.758,38.965,34.623.866,0,38.965-16.446,75.333,5.194,0,.866,27.708-22.505,22.513-53.666s25.111-28.564,25.111-28.564,31.172,19.908,0,42.414c0,1.731-27.709,41.548-19.916,56.263s35.5,43.279,32.038,73.575,12.988,7.79,12.988,7.79,7.793,17.312-5.2,16.446-13.854-6.059-13.854-6.059-6.927,105.6-83.991,104.736-34.636-17.312-126.42,0c-77.93,0-174.044-12.118-206.082-19.908.866,2.6-23.379-25.1-53.685-30.3Z'
+        transform='translate(-344.331 -794.141)'
+        fill='#7cff9d'
+      />
+      <path
+        d='M86.58,144.55S51.015,108.766,5.235,111.19C3.3,108.664-6.308,94.315,6.681,89.986s33.142,8.689,33.142,8.689,38.965,29.43,57.148,33.757,81.394,16.447,124.689-16.446,71.674-51.935,71.674-51.935,58.209-53.665,57.343,12.118c0,1.731-92.373,79.209-116.617,83.537a61.106,61.106,0,0,1-10.015.627C186.415,160.335,86.58,144.55,86.58,144.55ZM109.6,1.992c49.692-10.042,116.6,21.16,116.6,21.16a76.713,76.713,0,0,1-11.248.618C198.487,23.77,163.754,20.816,109.6,1.992Z'
+        transform='translate(2.939 133.952)'
+        fill='#f2b1d5'
+      />
+    </g>
+    <path
+      d='M673.749,901.355l6.638-5.38,12.378,9.146,17.042-19.547,6.458,7.532L695.456,918.57Z'
+      transform='translate(-229.019 -754.461)'
+    />
+    <path
+      d='M566.835,813.2c1.893,6.092,15.439,19.573,26.337,18.115,8.773-1.174-7.374-14.731-14.684-20.134a12.446,12.446,0,0,0-3.4-1.592S564.943,807.105,566.835,813.2Z'
+      transform='translate(-266.878 -791.232)'
+      fill='#c0738c'
+    />
+    <path
+      d='M7.037,8.731h0L0,3.234a4.737,4.737,0,1,1,7.038,5.5Z'
+      transform='matrix(0.999, -0.035, 0.035, 0.999, 307.123, 28.724)'
+    />
+    <ellipse
+      cx='14.21'
+      cy='14.205'
+      rx='14.21'
+      ry='14.205'
+      transform='translate(477.549 6.915)'
+      fill='#bd749f'
+    />
+    <ellipse
+      cx='5.413'
+      cy='5.411'
+      rx='5.413'
+      ry='5.411'
+      transform='translate(487.023 17.738)'
+    />
+  </svg>
+);
diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx
@@ -164,18 +164,29 @@ const NavTagChipItem: FC<NavQueryItemType> = memo((props) => {
       } else {
         dispatch(handerAddTag(props));
       }
-    };
+    },
+    //@ts-ignore
+    color = nameToColor[props.query] || "info";
   //todo 修改颜色,我感觉这个颜色应该会蛮难写的
   return (
     <Button
       variant={clicked ? "contained" : "outlined"}
-      color='info'
+      color={color}
       onClick={handerclick}
       sx={{
         wordBreak: "keep-all",
+        fontWeight: "600",
       }}
     >
       {props.query}
     </Button>
   );
 });
+
+const nameToColor = {
+  露早: "luzao",
+  柚恩: "youen",
+  莞儿: "waner",
+  米诺: "minuo",
+  虞莫: "yumo",
+};
diff --git a/src/routers/layout/nav/nav.module.less b/src/routers/layout/nav/nav.module.less
@@ -9,6 +9,7 @@
         scrollbar-width: none;
         -ms-overflow-style: none;
 
+
         &::-webkit-scrollbar {
             display: none;
         }

diff --git a/src/routers/layout/nav/tools.ts b/src/routers/layout/nav/tools.ts
@@ -19,6 +19,10 @@ export function useNavList(): [
       version: getVersion(),
       res: [],
     } as DnavStorage);
+    if (!local_lists.version) {
+      return query_nav_list;
+    }
+    //todo 修改逻辑
     if (parseFloat(local_lists.version) < parseFloat(getVersion())) {
       return query_nav_list;
     }

diff --git a/src/routers/video/masonry.tsx b/src/routers/video/masonry.tsx
@@ -1,5 +1,3 @@
-import { fetchVideos } from "@utils/fetch";
-import { Pick } from "@utils/index";
 import { useState, useEffect, FC, memo } from "react";
 import { VideoRouterImageCardType, VideoRouterMasonryType } from "./videotype";
 import { Unstable_Grid2 as Grid } from "@mui/material";
@@ -8,6 +6,7 @@ import { VideoRouterImageCard } from "./item";
 import { Skeleton } from "@mui/material";
 import { nanoid } from "nanoid";
 import styles from "./video.module.less";
+import { fetchVideohnadler, PickVideoRouterImageCardType } from "./tools";
 /**
  * @description 该组件负责渲染视频图片的瀑布流
  */
@@ -19,34 +18,11 @@ export default function VideoMasonry(props: VideoRouterMasonryType) {
   useEffect(() => {
     // 在内部定义fetchHandler，保证拿到的是同步的
     const fetchHandler = async (page: number = 1) => {
-      const res = await fetchVideos({
-          ...props,
-          order: "view",
-          page,
-        }),
-        data = res.data.result;
+      const data = await fetchVideohnadler(page, props);
       setLists((lists) => [
         ...lists,
         ...data.map((item, index) => {
-          const itemRes: VideoRouterImageCardType = Pick(
-            item,
-            "title",
-            "bvid",
-            "name",
-            "tname",
-            "copyright",
-            "pic",
-            "tag",
-            "view",
-            "coin",
-            "share",
-            "like",
-            "pubdate",
-            "danmaku",
-            "duration",
-            "favorite",
-            "face"
-          );
+          const itemRes = PickVideoRouterImageCardType(item);
           if (index === data.length - 3) {
             return {
               ...itemRes,
@@ -83,6 +59,7 @@ export default function VideoMasonry(props: VideoRouterMasonryType) {
             sm: 6,
             xs: 4,
           }}
+          className={styles["container"]}
         >
           {lists.map((item) => (
             <MemoItems key={item.id} {...item} />

diff --git a/src/routers/video/tools.ts b/src/routers/video/tools.ts
@@ -0,0 +1,46 @@
+import { VideoRouterMasonryType, VideoRouterImageCardType } from "./videotype";
+import { fetchVideos } from "@utils/fetch/index";
+import message from "@components/message";
+import { Pick } from "@utils/index";
+
+export const fetchVideohnadler = async (
+  page: number = 1,
+  props: VideoRouterMasonryType
+) => {
+  const res = await fetchVideos({
+    order: "view",
+    ...props,
+    page,
+  });
+  if (res.code === 400) {
+    message.info("参数错误,请尝试其他tag");
+    return [];
+  } else if (res.data.result.length < 1) {
+    message.info("没有更多数据了,请尝试其他tag");
+  }
+  return res.data.result;
+};
+
+export function PickVideoRouterImageCardType<
+  T extends VideoRouterImageCardType
+>(item: T): VideoRouterImageCardType {
+  return Pick(
+    item,
+    "title",
+    "bvid",
+    "name",
+    "tname",
+    "copyright",
+    "pic",
+    "tag",
+    "view",
+    "coin",
+    "share",
+    "like",
+    "pubdate",
+    "danmaku",
+    "duration",
+    "favorite",
+    "face"
+  );
+}
diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less
@@ -11,4 +11,15 @@
     &>span:last-of-type {
         margin-left: 5px;
     }
+}
+
+.container:empty {
+    display: flex;
+    justify-content: center;
+
+    &::before {
+        margin-top: 50px;
+        content: "暂无数据";
+        color: #c1c1c1;
+    }
 }