点击tag搜索完成进度30%

src/routers/layout/nav/tools.ts

@@ -106,12 +106,6 @@ const nav_tag_list = [
       pathname: "video",
       name: "视频",
     },
-    {
-      type: "query",
-      query: "所有二创",
-      queryType: "q",
-      queryString: "",
-    },
     {
       type: "query",
       query: "露早",
@@ -172,12 +166,6 @@ const nav_tag_list = [
       queryType: "tname",
       queryString: "guichu",
     },
-    {
-      type: "query",
-      query: "其他分区",
-      queryType: "tname",
-      queryString: "other",
-    },
   ].map((item) => ({
     ...item,
     id: nanoid(3),
@@ -190,3 +178,4 @@ const nav_tag_list = [
 export const router_nav_list = nav_tag_list.filter(
   (item) => item.type === "router"
 ) as NavRouterItemType[];
+//todo 增加新的tag

src/routers/video/index.tsx

@@ -1,10 +1,24 @@
+import { useAppSelector } from "@store/hooks";
+import { selectActiveTags } from "@store/tags";
 import VideoMasonry from "./masonry";
+import { VideoRouterMasonryType } from "./videotype";
 
+type ValueOf<T> = T[keyof T];
 export default function VideoPage() {
+  const activeTags = useAppSelector(selectActiveTags),
+    tname = activeTags.find((item) => item.queryType === "tname")
+      ?.queryString as ValueOf<Pick<VideoRouterMasonryType, "tname">>,
+    copyright = activeTags.find((item) => item.queryType === "copyright")
+      ?.queryString as ValueOf<Pick<VideoRouterMasonryType, "copyright">>,
+    q = activeTags
+      .filter((item) => item.queryType === "q")
+      .reduceRight((pre, cur) => {
+        return `${cur.queryString}+${pre}`;
+      }, "");
   return (
     <>
-      <VideoMasonry />
+      <VideoMasonry tname={tname} copyright={copyright} />
     </>
   );
 }
-//todo 优化搜索设置
+//todo 重新写q

src/routers/video/item/videodata.tsx

@@ -1,5 +1,3 @@
-import { useScreenSize } from "@components/proview/screenSize";
-import SlideshowIcon from "@mui/icons-material/Slideshow";
 import SubjectSharpIcon from "@mui/icons-material/SubjectSharp";
 import { styled } from "@mui/material";
 import getFixedNumber from "@utils/number";

src/routers/video/masonry.tsx

@@ -1,7 +1,7 @@
 import { fetchVideos } from "@utils/fetch";
 import { Pick } from "@utils/index";
 import { useState, useEffect, FC, memo } from "react";
-import { VideoRouterImageCardType } from "./videotype";
+import { VideoRouterImageCardType, VideoRouterMasonryType } from "./videotype";
 import { Unstable_Grid2 as Grid } from "@mui/material";
 import ImageShouldResizeProview from "@components/proview/imageSize";
 import { VideoRouterImageCard } from "./item";
@@ -11,7 +11,7 @@ import styles from "./video.module.less";
 /**
  * @description 该组件负责渲染视频图片的瀑布流
  */
-export default function VideoMasonry(props: { q?: string }) {
+export default function VideoMasonry(props: VideoRouterMasonryType) {
   const [lists, setLists] = useState<
     (VideoRouterImageCardType & { id: string })[]
   >([]);
@@ -20,9 +20,9 @@ export default function VideoMasonry(props: { q?: string }) {
     // 在内部定义fetchHandler，保证拿到的是同步的
     const fetchHandler = async (page: number = 1) => {
       const res = await fetchVideos({
+          ...props,
           order: "view",
           page,
-          q: props.q,
         }),
         data = res.data.result;
       setLists((lists) => [

src/routers/video/videotype.ts

@@ -3,6 +3,7 @@
  */
 import { ImageProps } from "@components/image/imagetype";
 import { RFetchVideoRes } from "@utils/fetch/fetchtype";
+import { IFetchVideoParams } from "../../utils/fetch/fetchtype";
 
 /**
  * @description video路由瀑布流卡片参数
@@ -28,4 +29,6 @@ export type VideoRouterImageCardType = Pick<
 > &
   Omit<ImageProps, "url">;
 
-export type VideoRouterMasonryType = {};
+export type VideoRouterMasonryType = Partial<
+  Pick<IFetchVideoParams, "copyright" | "order" | "q" | "tname">
+>;

src/utils/fetch/index.ts

@@ -9,19 +9,21 @@ import { IFetchVideoParams, RFetchVideoRes } from "./fetchtype";
 export function fetchVideos(
   params: IFetchVideoParams
 ): Promise<RFetchVideoRes> {
-  // console.log({ params });
-  return fetch(
-    `/v1/video-interface/advanced-search?order=${params.order}&page=${
-      params.page
-    }&copyright=${params.copyright || 1}&q=${params.q || ""}${
-      params.tname && `&tname=${params.tname}`
-    }`,
-    {
-      method: "GET",
-      headers: {
-        "ocp-Apim-Subscription-Key": "3cc4284fbb864965a7a9ad0f28af8496",
-        origin: "https://portal.api.eoe.best",
-      },
-    }
-  ).then((response) => response.json() as Promise<RFetchVideoRes>);
+  const fetchUrl = `/v1/video-interface/advanced-search?order=${
+    params.order
+  }&page=${params.page}${
+    params.copyright ? `&copyright=${params.copyright}` : ""
+  }
+  ${params.q ? `&q=${params.q}` : ""}
+  ${params.tname ? `&tname=${params.tname}` : ""}`
+    .replace(/\s+/g, "")
+    .trim();
+  console.log({ fetchUrl });
+  return fetch(fetchUrl, {
+    method: "GET",
+    headers: {
+      "ocp-Apim-Subscription-Key": "3cc4284fbb864965a7a9ad0f28af8496",
+      origin: "https://portal.api.eoe.best",
+    },
+  }).then((response) => response.json() as Promise<RFetchVideoRes>);
 }