添加tag搜索

src/components/proview/tagSelect.tsx

@@ -0,0 +1,65 @@
+import { NavQueryItemType } from "@routers/layout/nav/tools";
+import {
+  useContext,
+  useState,
+  createContext,
+  useEffect,
+  ReactElement,
+  useReducer,
+} from "react";
+
+type TagSelectProps = {
+  children: ReactElement;
+};
+interface TagStates {
+  tags: NavQueryItemType[];
+}
+enum TagsActionKind {
+  INCREASE = "INCREASE",
+  DECREASE = "DECREASE",
+}
+interface TagsAction {
+  type: TagsActionKind;
+  payload: NavQueryItemType;
+}
+const TagSelectContext = createContext<
+  TagStates & {
+    handerAddTag: (item: NavQueryItemType) => void;
+    handerDeleteTag: (item: NavQueryItemType) => void;
+  }
+>({
+  tags: [],
+  handerAddTag: () => {},
+  handerDeleteTag: () => {},
+});
+function reducer(state: TagStates, action: TagsAction) {
+  const { type, payload } = action;
+  switch (type) {
+    case TagsActionKind.INCREASE:
+      return { tags: [...state.tags, payload] };
+    case TagsActionKind.DECREASE:
+      return { tags: state.tags.filter((item) => item.id !== payload.id) };
+    default:
+      return state;
+  }
+}
+const TagSelectProview = ({ children }: TagSelectProps) => {
+  const [tags, tagsDispath] = useReducer(reducer, {
+      tags: [] as NavQueryItemType[],
+    }),
+    handerAddTag = (item: NavQueryItemType) =>
+      tagsDispath({ type: TagsActionKind.INCREASE, payload: item }),
+    handerDeleteTag = (item: NavQueryItemType) =>
+      tagsDispath({ type: TagsActionKind.DECREASE, payload: item });
+  return (
+    <TagSelectContext.Provider
+      value={{ tags: tags.tags, handerAddTag, handerDeleteTag }}
+    >
+      {children}
+    </TagSelectContext.Provider>
+  );
+};
+
+export const useTagsSelected = () => useContext(TagSelectContext);
+
+export default TagSelectProview;

src/main.tsx

@@ -17,6 +17,7 @@ import ScreenProview from "@components/proview/screenSize";
 import "intersection-observer";
 import "./normalize.css";
 import "loading-attribute-polyfill";
+import TagSelectProview from "@components/proview/tagSelect";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -60,7 +61,9 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   // <React.StrictMode>
   // <Suspense>
   <ScreenProview>
-    <RouterProvider router={router} />
+    <TagSelectProview>
+      <RouterProvider router={router} />
+    </TagSelectProview>
   </ScreenProview>
   // </Suspense>
 

src/routers/layout/header.tsx

@@ -20,7 +20,7 @@ export default function Header() {
     </header>
   );
 }
-
+//todo 添加搜索
 function Search() {
   const { focused, bind } = useFocus();
   return (

src/routers/layout/nav/index.tsx

@@ -29,9 +29,9 @@ import {
   useNavList,
 } from "./tools";
 import { setLocalstorage } from "../tools";
+import { useTagsSelected } from "@components/proview/tagSelect";
 //todo 拆分组件
 export default function Header_Nav() {
-  //todo 这里在loacalstorage中查找
   const [navLists, setLists] = useNavList();
   //tag区是否展开
   const [showed, setShow] = useState(false);
@@ -147,41 +147,50 @@ const NavItem: FC<NavListItemType> = memo((props) => {
     <Flipped flipId={props.id} spring={"veryGentle"} translate>
       <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
         {props.type === "router" ? (
-          <NavRouterChipItem
-            {...Pick(props as NavRouterItemType, "pathname", "name")}
-          />
+          <NavRouterChipItem {...props} />
         ) : (
-          <NavTagChipItem {...Pick(props as NavQueryItemType, "query")} />
+          <NavTagChipItem {...props} />
         )}
       </div>
     </Flipped>
   );
 });
 
-const NavRouterChipItem: FC<Pick<NavRouterItemType, "pathname" | "name">> =
-  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 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<Pick<NavQueryItemType, "query">> = memo((props) => {
-  const [clicked, setClick] = useState<boolean>(false);
+const NavTagChipItem: FC<NavQueryItemType> = memo((props) => {
+  const [clicked, setClick] = useState<boolean>(false),
+    { handerAddTag, handerDeleteTag } = useTagsSelected();
   return (
     <Chip
       className={styles["navstack-filter-tag"]}
       label={props.query}
       color={clicked ? "info" : "default"}
-      onClick={() => setClick((clicked) => !clicked)}
+      onClick={() =>
+        setClick((clicked) => {
+          //注意这里是要改变点击状态，所以应该反着来
+          //说明之前是点击状态，现在要取消点击
+          if (clicked) {
+            handerDeleteTag(props);
+          } else {
+            handerAddTag(props);
+          }
+          return !clicked;
+        })
+      }
     />
   );
 });

src/routers/video/index.tsx

@@ -1,10 +1,18 @@
 import VideoMasonry from "./masonry";
+import { useTagsSelected } from "@components/proview/tagSelect";
 export default function VideoPage() {
+  const { tags } = useTagsSelected(),
+    qlists = tags
+      .filter((item) => item.queryType === "q")
+      .reduceRight((pre, cur) => {
+        return `${cur.queryString}+${pre}`;
+      }, ""),
+    q = qlists.length < 1 ? undefined : `tag.${qlists}`;
   return (
     <>
-      <VideoMasonry />
+      <VideoMasonry q={q} />
     </>
   );
 }
-
+//todo 优化搜索设置
 //todo 添加上拉刷新

src/routers/video/masonry.tsx

@@ -11,18 +11,18 @@ import styles from "./video.module.less";
 /**
  * @description 该组件负责渲染视频图片的瀑布流
  */
-export default function VideoMasonry(props: any) {
+export default function VideoMasonry(props: { q?: string }) {
   const [lists, setLists] = useState<
     (VideoRouterImageCardType & { id: string })[]
   >([]);
   const [isLoading, setLoading] = useState<boolean>(true);
   useEffect(() => {
     // 在内部定义fetchHandler，保证拿到的是同步的
-    const fetchHandler = async (page: number = 1, ...resProps: any[]) => {
+    const fetchHandler = async (page: number = 1) => {
       const res = await fetchVideos({
           order: "view",
           page,
-          ...resProps,
+          q: props.q,
         }),
         data = res.data.result;
       // ,
@@ -71,7 +71,9 @@ export default function VideoMasonry(props: any) {
         }),
       ]);
     };
-    fetchHandler().then(() => setLoading(false));
+    setLists([]);
+    setLoading(true);
+    fetchHandler(1).then(() => setLoading(false));
   }, [props]);
   return (
     <div className='feedContainer'>

src/utils/fetch/index.ts

@@ -11,11 +11,12 @@ import { IFetchVideoParams, RFetchVideoRes } from "./fetchtype";
 export function fetchVideos(
   params: IFetchVideoParams
 ): Promise<RFetchVideoRes> {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(videoJson);
-    }, 1000);
-  });
+  console.log({ params });
+  // return new Promise((resolve) => {
+  //   setTimeout(() => {
+  //     resolve(videoJson);
+  //   }, 1000);
+  // });
   return fetch(
     `/v1/video-interface/advanced-search?order=${params.order}&page=${
       params.page

src/utils/time/index.ts

@@ -1,13 +1,22 @@
 import dayJs from "dayjs";
 import realtiveTime from "dayjs/plugin/relativeTime";
 import duration from "dayjs/plugin/duration";
+import isToday from "dayjs/plugin/isToday";
+import isYesterday from "dayjs/plugin/isYesterday";
 import "dayjs/locale/zh-cn";
 dayJs.locale("zh-cn");
 dayJs.extend(realtiveTime);
+dayJs.extend(isToday);
+dayJs.extend(isYesterday);
 dayJs.extend(duration);
-//todo 修改时间显示，1天前这种要改成具体的时间
 export default function getrealtiveTime(time: number): string {
-  return dayJs(time).fromNow();
+  const format_time = dayJs(time);
+  if (format_time.isToday()) {
+    return format_time.fromNow();
+  } else if (format_time.isYesterday()) {
+    return "昨天";
+  }
+  return format_time.format("M-D");
 }
 
 export function getVideoTime(time: string): string {

tsconfig.json

@@ -19,7 +19,8 @@
     "paths": {
       "@utils/*": ["src/utils/*"],
       "@components/*": ["src/components/*"],
-      "@store/*": ["src/store/*"]
+      "@store/*": ["src/store/*"],
+      "@routers/*": ["src/routers/*"]
     }
   },
   "include": ["src"]