修改视频页面样式

src/components/image/index.tsx

@@ -82,18 +82,21 @@ export function ImageBasic({
 }: Omit<ImageProps, "width" | "height"> & {
   children?: ReactElement;
 }) {
-  const res = useLoading(url),
-    { isLoaded, success } = res,
+  const // res = useLoading(url),
+    //   { isLoaded, success } = res,
     real_fallback_url = fallbackUrl || DefaultFallbackUrl;
   const once_callback = useCallback(Once(callback!!), []);
   return (
     <InView>
       {({ inView, ref, entry }) => (
         <div ref={ref} className={styles.imgWrapper}>
           <img
-            src={isLoaded && success ? url : real_fallback_url}
+            src={
+              `${url}@672w_378h_1c_!web-search-common-cover` ||
+              real_fallback_url
+            }
             style={{
-              opacity: isLoaded ? 1.0 : 0.09,
+              opacity: 1.0 || 0.09,
             }}
             alt=''
           />

src/components/masonry/index.tsx

@@ -1,7 +1,6 @@
 import { FC, useState, useEffect, useCallback } from "react";
 import { Masonry as Masonic_masonry } from "masonic";
 import Image from "@components/image";
-import { FetchNewImages } from "@utils/faker/index";
 import { SingleRun, concurrencyRequest } from "@utils/index";
 import { fetchVideos } from "@utils/fetch";
 import { nanoid } from "nanoid";

src/main.tsx

@@ -1,14 +1,14 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import VideoPage from "./routers/video";
 import "./index.less";
-import ReadPage from "./routers/read";
-import Layout from "./routers/layout";
-import PhotoPage from "./routers/photo";
-import ErrorPage from "./routers/error";
 import "intersection-observer";
 import "./normalize.css";
+const ReadPage = lazy(() => import("./routers/read")),
+  Layout = lazy(() => import("./routers/layout")),
+  PhotoPage = lazy(() => import("./routers/photo")),
+  ErrorPage = lazy(() => import("./routers/error"));
 const router = createBrowserRouter([
   {
     path: "/",
@@ -50,7 +50,9 @@ const router = createBrowserRouter([
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   // <React.StrictMode>
-  <RouterProvider router={router} />
+  <Suspense>
+    <RouterProvider router={router} />
+  </Suspense>
 
   // </React.StrictMode>
 );

src/routers/layout/layout.module.less

@@ -76,9 +76,7 @@
     }
 }
 
-::-webkit-scrollbar {
-    display: none;
-}
+
 
 .nav {
     position: relative;
@@ -89,6 +87,11 @@
         overflow-x: auto;
         scrollbar-width: none;
         -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
         @itemWidth: 80px;
         @itemMarginHalfWidth: 8px;
         @itemMarginHalfHeight: 4px;
@@ -140,6 +143,4 @@
         z-index: 1;
         cursor: pointer;
     }
-}
-
-//todo 写好header
+}

src/routers/layout/nav.tsx

@@ -22,12 +22,11 @@ import { nanoid } from "nanoid";
 import styles from "./layout.module.less";
 import { FC, useState, useEffect, useMemo, memo } from "react";
 import { Pick } from "@utils/index";
-
+//todo 拆分组件
+//todo 修改文件夹
 export default function Header_Nav() {
   //todo 这里在loacalstorage中查找
   const [navLists, setLists] = useState<NavListItemType[]>(nav_tag_list);
-  //最后一个span是否可见
-  const { ref, inView } = useInView({ initialInView: true });
   //tag区是否展开
   const [showed, setShow] = useState(false);
   //拖拽事件绑定
@@ -86,29 +85,41 @@ export default function Header_Nav() {
           data-showed={showed}
         >
           <SortableContext items={navLists}>{ComRes}</SortableContext>
-          <span
-            ref={ref}
-            style={{
-              margin: 0,
-              width: "1px",
-            }}
-          ></span>
-          <div
-            className={styles["nav-right-show-btn"]}
-            onClick={() => setShow((showed) => !showed)}
-            style={{
-              display: inView ? "none" : "flex",
-            }}
-          >
-            <SegmentIcon fontSize='medium' />
-          </div>
+          <NavInViewItem handlerClick={() => setShow((show) => !show)} />
         </Stack>
       </DndContext>
     </div>
   );
 }
 
-const NavItem: FC<NavListItemType> = (props) => {
+const NavInViewItem: FC<{
+  handlerClick: React.MouseEventHandler<HTMLDivElement>;
+}> = ({ handlerClick }) => {
+  //最后一个span是否可见
+  const { ref, inView } = useInView({ initialInView: true });
+  return (
+    <>
+      <span
+        ref={ref}
+        style={{
+          margin: 0,
+          width: "1px",
+        }}
+      ></span>
+      <div
+        className={styles["nav-right-show-btn"]}
+        onClick={handlerClick}
+        style={{
+          display: inView ? "none" : "flex",
+        }}
+      >
+        <SegmentIcon fontSize='medium' />
+      </div>
+    </>
+  );
+};
+
+const NavItem: FC<NavListItemType> = memo((props) => {
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({ id: props.id });
   const style = {
@@ -126,7 +137,7 @@ const NavItem: FC<NavListItemType> = (props) => {
       )}
     </div>
   );
-};
+});
 
 const NavRouterChipItem: FC<Pick<NavRouterItemType, "pathname" | "name">> =
   memo((props) => (
@@ -162,8 +173,16 @@ type NavRouterItemType = {
   type: "router";
   pathname: string;
   name: string;
+  cancelable: boolean;
+};
+type NavQueryItemType = {
+  id: string;
+  type: "query";
+  query: string;
+  queryType: "q" | "tname" | "copyright";
+  queryString: string;
+  cancelable: boolean;
 };
-type NavQueryItemType = { id: string; type: "query"; query: string };
 type NavListItemType = NavQueryItemType | NavRouterItemType;
 
 const nav_tag_list = [
@@ -180,49 +199,77 @@ const nav_tag_list = [
   {
     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) })) as NavListItemType[];
+].map((item) => ({
+  ...item,
+  id: nanoid(3),
+  cancelable: false,
+})) as NavListItemType[];

src/routers/layout/tools.ts

@@ -0,0 +1,9 @@
+export function getLocalStorage<T>(searchName: string, defaultRes: T) {
+  if (!localStorage.getItem(searchName)) {
+    localStorage.setItem(searchName, JSON.stringify(defaultRes));
+  }
+  return JSON.parse(localStorage.getItem(searchName) as string);
+}
+export function setLocalstorage(itemName: string, targetRes: unknown): void {
+  localStorage.setItem(itemName, JSON.stringify(targetRes));
+}

src/routers/video/index.tsx

@@ -6,3 +6,5 @@ export default function VideoPage() {
     </>
   );
 }
+
+//todo 添加上拉刷新