From 81aa70b20cfd9bd66e45f87cb2d09ad9fd42e893 Mon Sep 17 00:00:00 2001
From: master1lan <278457198@qq.com>
Date: Wed, 18 Jan 2023 17:25:05 +0800
Subject: [PATCH] version 0.01

---
 src/components/image/image.module.less |  6 ++-
 src/routers/layout/index.tsx           | 16 ++++--
 src/routers/layout/layout.module.less  | 31 ++++++++----
 src/routers/layout/logo.tsx            | 35 +++++++++++--
 src/routers/layout/nav/index.tsx       | 69 ++++++++++++++------------
 src/routers/layout/nav/nav.module.less |  2 +-
 src/routers/layout/nav/tools.ts        | 10 ++--
 src/routers/video/index.tsx            |  3 +-
 src/routers/video/masonry.tsx          | 14 ++++--
 src/routers/video/tools.ts             |  2 +-
 src/store/index.ts                     |  2 +
 src/store/loading/index.ts             | 41 +++++++++++++++
 src/utils/fetch/index.ts               |  2 +-
 13 files changed, 169 insertions(+), 64 deletions(-)
 create mode 100644 src/store/loading/index.ts

diff --git a/src/components/image/image.module.less b/src/components/image/image.module.less
index 48f3088..33ed9ed 100644
--- a/src/components/image/image.module.less
+++ b/src/components/image/image.module.less
@@ -5,6 +5,7 @@
     outline: 0.5px solid rgba(0, 0, 0, .05);
     height: 100%;
 
+
     &>img {
         width: 100%;
         height: 100%;
@@ -14,6 +15,9 @@
         transition: transform .3s linear;
         aspect-ratio: 16/9;
 
-        &:hover {}
+        &:hover {
+            transition: filter .3s ease-in-out;
+            filter: brightness(.8);
+        }
     }
 }
\ No newline at end of file
diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx
index 843dfd8..3f5ab14 100644
--- a/src/routers/layout/index.tsx
+++ b/src/routers/layout/index.tsx
@@ -17,12 +17,20 @@ export default function Layout() {
         decisionData={showed}
         spring={"veryGentle"}
         className={styles["container"]}
+        staggerConfig={{
+          default: {
+            reverse: false,
+            speed: 0.8,
+          },
+        }}
       >
         <Header />
-        <nav className='feedContainer'>
-          <Header_Nav />
-        </nav>
-        <Flipped flipId={"list"} spring={"veryGentle"}>
+        <Flipped flipId={"list"}>
+          <nav className={"feedContainer " + styles["nav"]}>
+            <Header_Nav />
+          </nav>
+        </Flipped>
+        <Flipped flipId={"container"} spring={"veryGentle"}>
           <main>
             <section
             // className=
diff --git a/src/routers/layout/layout.module.less b/src/routers/layout/layout.module.less
index 2bf8a2b..851856c 100644
--- a/src/routers/layout/layout.module.less
+++ b/src/routers/layout/layout.module.less
@@ -3,12 +3,19 @@
 
 }
 
+.nav {
+    // position: sticky;
+    // top: 0;
+    z-index: 1000;
+
+}
+
 .header {
     max-width: 1440px;
     margin: 0 auto;
+    padding-top: 10px;
     display: flex;
     align-items: center;
-    justify-content: center;
     background-color: #fff;
 }
 
@@ -22,14 +29,14 @@
     }
 
     &>a:only-child {
-        display: block;
+        display: flex;
         position: relative;
+        flex-flow: row-reverse nowrap;
+        align-items: center;
+        padding: 5px 0;
 
         h1 {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
+            margin: 0;
             white-space: nowrap;
 
             button {
@@ -50,14 +57,16 @@
     padding: 15px 10px;
     max-width: 400px;
     width: 90%;
-    max-height: 400px;
-    overflow-y: auto;
-    overflow-x: hidden;
 
-    //todo 优化fq
+
+
+
     ul {
         display: flex;
         flex-flow: column nowrap;
+        max-height: 60vh;
+        overflow-y: auto;
+        overflow-x: hidden;
     }
 
     li {
@@ -67,7 +76,7 @@
 
         &>p:not(:last-of-type) {
             margin-bottom: 12px;
-
+            color: grey;
         }
 
         &>p {
diff --git a/src/routers/layout/logo.tsx b/src/routers/layout/logo.tsx
index a5c3f40..b7e1f59 100644
--- a/src/routers/layout/logo.tsx
+++ b/src/routers/layout/logo.tsx
@@ -1,4 +1,4 @@
-import { Button, Modal } from "@mui/material";
+import { Button, Modal, styled } from "@mui/material";
 import { FC, useState } from "react";
 import { Link } from "react-router-dom";
 import styles from "./layout.module.less";
@@ -9,7 +9,7 @@ export default function LOGO() {
   return (
     <div className={styles["logo"]}>
       <Link to='/'>
-        <h1>
+        <H1>
           EOEfans-web端
           <Button onClick={handlerClick} sx={{ padding: "0" }}>
             QA
@@ -45,6 +45,27 @@ export default function LOGO() {
                     </span>
                   </p>
                 </li>
+                <li>
+                  <p>
+                    <strong>Q: </strong>
+                    <span>露早tag为什么不是应援色？</span>
+                  </p>
+                  <p>
+                    <strong>A: </strong>
+                    <span>
+                      露早GOGO的应援色为
+                      <span
+                        style={{
+                          color: "#3dff9e",
+                        }}
+                      >
+                        #3dff9e
+                      </span>
+                      ,tag字面显示不明显，所以更换为黑露早形态的
+                      <span style={{ color: "#A0191D" }}>#A0191D</span>
+                    </span>
+                  </p>
+                </li>
               </ul>
               <Button
                 sx={{
@@ -58,12 +79,18 @@ export default function LOGO() {
               </Button>
             </div>
           </Modal>
-        </h1>
-        <Yituo width={"220px"} height={"125px"} />
+        </H1>
+        <Yituo width={"64px"} height={"30px"} />
       </Link>
     </div>
   );
 }
+const H1 = styled("h1")(({ theme }) => ({
+  fontSize: "24px",
+  [theme.breakpoints.down("sm")]: {
+    fontSize: "15px",
+  },
+}));
 
 //todo 修改logo
 
diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx
index 8cbeaa7..d17645d 100644
--- a/src/routers/layout/nav/index.tsx
+++ b/src/routers/layout/nav/index.tsx
@@ -1,4 +1,5 @@
-import { Button, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
+import Button from "@mui/lab/LoadingButton";
 import { useInView } from "react-intersection-observer";
 import SegmentIcon from "@mui/icons-material/Segment";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
@@ -17,11 +18,11 @@ import { restrictToParentElement } from "@dnd-kit/modifiers";
 import styles from "./nav.module.less";
 import { FC, useMemo, memo } from "react";
 import { Flipped } from "react-flip-toolkit";
-import { NavQueryItemType, useNavList } from "./tools";
-import { NavStorage } from "./tools";
+import { NavQueryItemType, useNavList, NavStorage } from "./tools";
 import { useAppSelector, useAppDispatch } from "@store/hooks";
 import { changeNavMoreShowed, selectNavMoreShowed } from "@store/device/index";
-import { getVersion } from "../../../utils/index";
+import { getVersion } from "@utils/index";
+import { selectVideoLoadingState } from "@store/loading/index";
 import {
   handerAddTag,
   handerDeleteTag,
@@ -75,31 +76,29 @@ export default function Header_Nav() {
     [navLists]
   );
   return (
-    <Flipped flipId={"list"} spring={"veryGentle"}>
-      <div className={styles["nav"]}>
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={handleDragEnd}
-          modifiers={[restrictToParentElement]}
-        >
-          <Flipped inverseFlipId='list'>
-            <Stack
-              direction='row'
-              alignItems='center'
-              className={`${styles["navstack"]}`}
-              style={{
-                flexWrap: showed ? "wrap" : "nowrap",
-              }}
-              data-showed={showed}
-            >
-              <SortableContext items={navLists}>{ComRes}</SortableContext>
-              <NavInViewItem />
-            </Stack>
-          </Flipped>
-        </DndContext>
-      </div>
-    </Flipped>
+    <div className={styles["nav"]}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+        modifiers={[restrictToParentElement]}
+      >
+        <Flipped inverseFlipId='list'>
+          <Stack
+            direction='row'
+            alignItems='center'
+            className={`${styles["navstack"]}`}
+            style={{
+              flexWrap: showed ? "wrap" : "nowrap",
+            }}
+            data-showed={showed}
+          >
+            <SortableContext items={navLists}>{ComRes}</SortableContext>
+            <NavInViewItem />
+          </Stack>
+        </Flipped>
+      </DndContext>
+    </div>
   );
 }
 
@@ -145,7 +144,7 @@ const NavItem: FC<NavQueryItemType> = memo((props) => {
     transition,
   };
   return (
-    <Flipped flipId={props.id} spring={"veryGentle"} translate>
+    <Flipped flipId={props.id} spring={"veryGentle"}>
       <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
         <NavTagChipItem {...props} />
       </div>
@@ -165,18 +164,24 @@ const NavTagChipItem: FC<NavQueryItemType> = memo((props) => {
         dispatch(handerAddTag(props));
       }
     },
+    isVideoFetching = useAppSelector(selectVideoLoadingState),
     //@ts-ignore
     color = nameToColor[props.query] || "info";
-  //todo 修改颜色,我感觉这个颜色应该会蛮难写的
   return (
     <Button
       variant={clicked ? "contained" : "outlined"}
       color={color}
       onClick={handerclick}
+      loading={isVideoFetching}
       sx={{
         wordBreak: "keep-all",
         fontWeight: "600",
-        // padding: "1px 10px",
+        fontSize: {
+          xs: "12px",
+          sm: "14px",
+        },
+        padding: "1px 10px",
+        verticalAlign: "center",
       }}
     >
       {props.query}
diff --git a/src/routers/layout/nav/nav.module.less b/src/routers/layout/nav/nav.module.less
index 14d1a20..9e58db2 100644
--- a/src/routers/layout/nav/nav.module.less
+++ b/src/routers/layout/nav/nav.module.less
@@ -1,7 +1,7 @@
 .nav {
     position: relative;
     overflow: hidden;
-    margin: 10px 0;
+    padding: 10px 0;
     background-color: #fff;
 
     .navstack {
diff --git a/src/routers/layout/nav/tools.ts b/src/routers/layout/nav/tools.ts
index dfa2830..3de3859 100644
--- a/src/routers/layout/nav/tools.ts
+++ b/src/routers/layout/nav/tools.ts
@@ -116,31 +116,31 @@ const nav_tag_list_no_id: Omit<NavQueryItemType, "id" | "cancelable">[] = [
       type: "query",
       query: "露早",
       queryType: "q",
-      queryString: "露早",
+      queryString: "露早+露早GOGO",
     },
     {
       type: "query",
       query: "柚恩",
       queryType: "q",
-      queryString: "柚恩",
+      queryString: "柚恩+柚恩不加糖",
     },
     {
       type: "query",
       query: "莞儿",
       queryType: "q",
-      queryString: "莞儿",
+      queryString: "莞儿+莞儿睡不醒",
     },
     {
       type: "query",
       query: "米诺",
       queryType: "q",
-      queryString: "米诺",
+      queryString: "米诺+米诺高分少女",
     },
     {
       type: "query",
       query: "虞莫",
       queryType: "q",
-      queryString: "虞莫",
+      queryString: "虞莫+虞莫MOMO",
     },
     {
       type: "query",
diff --git a/src/routers/video/index.tsx b/src/routers/video/index.tsx
index ca4cadc..088d2d4 100644
--- a/src/routers/video/index.tsx
+++ b/src/routers/video/index.tsx
@@ -12,11 +12,12 @@ export default function VideoPage() {
       ?.queryString as ValueOf<Pick<VideoRouterMasonryType, "copyright">>,
     order = activeTags.find((item) => item.queryType === "order")
       ?.queryString as ValueOf<Pick<VideoRouterMasonryType, "order">>,
-    q = activeTags
+    q_not_tag = activeTags
       .filter((item) => item.queryType === "q")
       .reduceRight((pre, cur, index, arr) => {
         return `${cur.queryString}${index < arr.length - 1 ? "+" : ""}${pre}`;
       }, ""),
+    q = q_not_tag.length > 1 ? `tag.${q_not_tag}` : q_not_tag,
     props = { tname, copyright, order, q };
   return (
     <>
diff --git a/src/routers/video/masonry.tsx b/src/routers/video/masonry.tsx
index b75b9d6..803bb8d 100644
--- a/src/routers/video/masonry.tsx
+++ b/src/routers/video/masonry.tsx
@@ -7,6 +7,11 @@ import { Skeleton } from "@mui/material";
 import { nanoid } from "nanoid";
 import styles from "./video.module.less";
 import { fetchVideohnadler, PickVideoRouterImageCardType } from "./tools";
+import { useAppSelector, useAppDispatch } from "@store/hooks";
+import {
+  changeLoading,
+  selectVideoLoadingState,
+} from "../../store/loading/index";
 /**
  * @description 该组件负责渲染视频图片的瀑布流
  */
@@ -14,7 +19,10 @@ export default function VideoMasonry(props: VideoRouterMasonryType) {
   const [lists, setLists] = useState<
     (VideoRouterImageCardType & { id: string })[]
   >([]);
-  const [isLoading, setLoading] = useState<boolean>(true);
+  const isLoading = useAppSelector(selectVideoLoadingState),
+    dispatch = useAppDispatch(),
+    handerChangeLoading = (state: boolean) =>
+      dispatch(changeLoading({ stateName: "videoIsLoading", Tostate: state }));
   useEffect(() => {
     // 在内部定义fetchHandler，保证拿到的是同步的
     const fetchHandler = async (page: number = 1) => {
@@ -38,8 +46,8 @@ export default function VideoMasonry(props: VideoRouterMasonryType) {
       ]);
     };
     setLists([]);
-    setLoading(true);
-    fetchHandler(1).then(() => setLoading(false));
+    handerChangeLoading(true);
+    fetchHandler(1).then(() => handerChangeLoading(false));
   }, [props]);
   return (
     <div className='feedContainer'>
diff --git a/src/routers/video/tools.ts b/src/routers/video/tools.ts
index c97a786..12c1f43 100644
--- a/src/routers/video/tools.ts
+++ b/src/routers/video/tools.ts
@@ -8,7 +8,7 @@ export const fetchVideohnadler = async (
   props: VideoRouterMasonryType
 ) => {
   const res = await fetchVideos({
-    order: "view",
+    order: "score",
     ...props,
     page,
   });
diff --git a/src/store/index.ts b/src/store/index.ts
index 7ab70f6..f5714e7 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,10 +1,12 @@
 import { configureStore } from "@reduxjs/toolkit";
 import device from "./device";
 import ActiveTags from "./tags";
+import loading from "./loading";
 const store = configureStore({
   reducer: {
     device,
     ActiveTags,
+    loading,
   },
 });
 export default store;
diff --git a/src/store/loading/index.ts b/src/store/loading/index.ts
new file mode 100644
index 0000000..b220a74
--- /dev/null
+++ b/src/store/loading/index.ts
@@ -0,0 +1,41 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+import type { RootState } from "..";
+
+interface LoadingState {
+  /**
+   * @description 视频接口是否正在获取
+   */
+  videoIsLoading: boolean;
+}
+interface IchangeLoadingItem {
+  stateName: keyof LoadingState;
+  Tostate?: boolean;
+}
+
+const initialState: LoadingState = {
+  videoIsLoading: true,
+};
+export const LoadingSlice = createSlice({
+  name: "loading",
+  initialState,
+  reducers: {
+    /**
+     *
+     */
+    changeLoading: (state, action: PayloadAction<IchangeLoadingItem>) => {
+      const { stateName, Tostate } = action.payload;
+      if (typeof action.payload.Tostate === "boolean") {
+        state[stateName] = Tostate as boolean;
+      } else {
+        state[stateName] = !state[stateName];
+      }
+    },
+  },
+});
+
+export const { changeLoading } = LoadingSlice.actions;
+export const selectVideoLoadingState = (state: RootState) =>
+  state.loading.videoIsLoading;
+
+export default LoadingSlice.reducer;
diff --git a/src/utils/fetch/index.ts b/src/utils/fetch/index.ts
index 02625a6..2949e74 100644
--- a/src/utils/fetch/index.ts
+++ b/src/utils/fetch/index.ts
@@ -10,7 +10,7 @@ export function fetchVideos(
   params: IFetchVideoParams
 ): Promise<RFetchVideoRes> {
   const fetchUrl = `/v1/video-interface/advanced-search?order=${
-    params.order || "view"
+    params.order || "score"
   }&page=${params.page}${
     params.copyright ? `&copyright=${params.copyright}` : ""
   }