给页面整体添加动态效果

package.json

@@ -50,7 +50,7 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "terser": ">=5.4.0 <6.0.0",
     "typescript": "^4.9.3",
-    "vite": "^4.0.0",
+    "vite": "4.0.3",
     "vite-plugin-compression": "^0.5.1"
   }
 }

readme.md

@@ -23,34 +23,39 @@ $ npm run build
 $ npm run preview
 ```
 
+## 时间线
+
+- 15 号->完成整体布局
+- 22 号->上线
+
 ## 已完成功能
 
-- [x] 二创图feed流
+- [x] 二创图 feed 流
 - [x] 滚动加载
-- [x] 基础tag栏展示
-- [x] tag栏用户自定义排序
+- [x] 基础 tag 栏展示
+- [x] tag 栏用户自定义排序
 - [x] 视频接口测通
+- [x] tag 栏放缩动画
 
 ## TODO
 
 ### 急急急
 
-- [ ] 总体layout布局
-- [ ] 总体font-family，各种layout下font-size等全局属性的设定
-- [ ] tag栏放缩动画
-- [ ] 理解完视频接口的q等属性特点
+- [ ] 总体 layout 布局
+- [ ] 总体 font-family，各种 layout 下 font-size 等全局属性的设定
+- [ ] 理解完视频接口的 q 等属性特点
+- [ ] UI 设计
 
 ### 现在还没定论的
 
 - [ ] 图片接口还没有出
 - [ ] 二创图瀑布流页面
-- [ ] UI设计
 - [ ] 接口测试
 - [ ] 封闭测试
 
 ### 后续有空可以添加的
 
 - [ ] 主题设置
-- [ ] 跳转app
+- [ ] 跳转 app
 - [ ] 用户系统
 - [ ] 拉黑

src/components/proview/imageSize.tsx

@@ -1,21 +1,13 @@
-import {
-  useContext,
-  useState,
-  createContext,
-  useEffect,
-  ReactElement,
-} from "react";
+import { useContext, useState, createContext, useEffect } from "react";
 import { thorttleFn } from "@utils/index";
+import { ReactChildrenType } from "./type";
 export const image_order_width = 200;
 
 const ImageContext = createContext<{ isShouldchangeSize: boolean }>({
   isShouldchangeSize: false,
 });
 
-type ImageProviewProps = {
-  children: ReactElement;
-};
-const ImageShouldResizeProview = ({ children }: ImageProviewProps) => {
+const ImageShouldResizeProview = ({ children }: ReactChildrenType) => {
   const [isShouldchangeSize, setIs] = useState<boolean>(false);
   useEffect(() => {
     const handleWindowResize = () => {

src/components/proview/navShow.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, useState } from "react";
+import { Flipper } from "react-flip-toolkit";
+import { ReactChildrenType } from "./type";
+
+const NavContext = createContext({
+  showed: false,
+  handlerChangeShow: () => {},
+});
+const NavShowProview = ({ children }: ReactChildrenType) => {
+  const [showed, set] = useState(false),
+    handlerChangeShow = () => set((showed) => !showed);
+  return (
+    <NavContext.Provider value={{ showed, handlerChangeShow }}>
+      <Flipper flipKey={showed} decisionData={showed} spring={"veryGentle"}>
+        {children}
+      </Flipper>
+    </NavContext.Provider>
+  );
+};
+
+export const useNavShowed = () => useContext(NavContext);
+
+export default NavShowProview;

src/components/proview/screenSize.tsx

@@ -1,12 +1,7 @@
 import { Breakpoint } from "@mui/material";
 import { useScreenMatchSize } from "@utils/hooks/match";
-import {
-  useContext,
-  useState,
-  createContext,
-  useEffect,
-  ReactElement,
-} from "react";
+import { ReactChildrenType } from "./type";
+import { useContext, createContext } from "react";
 const size_list: Breakpoint[] = ["lg", "md", "sm", "xs"];
 
 const ScreenContext = createContext<ScreenContextType>(
@@ -22,11 +17,8 @@ type ScreenContextType = {
   sm: boolean;
   xs: boolean;
 };
-type ProviewProps = {
-  children: ReactElement;
-};
 
-const ScreenProview = ({ children }: ProviewProps) => {
+const ScreenProview = ({ children }: ReactChildrenType) => {
   const ScreenSize: ScreenContextType = size_list.reduce((preObj, size) => {
     //@ts-ignore
     preObj[size] = useScreenMatchSize(size);

src/components/proview/tagSelect.tsx

@@ -1,16 +1,7 @@
 import { NavQueryItemType } from "@routers/layout/nav/tools";
-import {
-  useContext,
-  useState,
-  createContext,
-  useEffect,
-  ReactElement,
-  useReducer,
-} from "react";
+import { ReactChildrenType } from "./type";
+import { useContext, createContext, useReducer } from "react";
 
-type TagSelectProps = {
-  children: ReactElement;
-};
 interface TagStates {
   tags: NavQueryItemType[];
 }
@@ -43,7 +34,7 @@ function reducer(state: TagStates, action: TagsAction) {
       return state;
   }
 }
-const TagSelectProview = ({ children }: TagSelectProps) => {
+const TagSelectProview = ({ children }: ReactChildrenType) => {
   const [tags, tagsDispath] = useReducer(reducer, {
       tags: [] as NavQueryItemType[],
     }),

src/components/proview/type.tsx

@@ -0,0 +1,5 @@
+import { ReactElement } from "react";
+
+export type ReactChildrenType = {
+  children: ReactElement;
+};

src/index.less

@@ -8,10 +8,4 @@
     margin: 0 auto;
     padding: 0 8px;
     max-width: 1200px;
-
-    // .element-item {
-    //     min-width: 200px;
-    //     box-sizing: border-box;
-    //     padding: 0 5px;
-    // }
 }

src/main.tsx

@@ -1,24 +1,19 @@
-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 ScreenProview from "@components/proview/screenSize";
 import TagSelectProview from "@components/proview/tagSelect";
-// const ReadPage = lazy(() => import("./routers/read")),
-//   Layout = lazy(() => import("./routers/layout")),
-//   PhotoPage = lazy(() => import("./routers/photo")),
-//   ErrorPage = lazy(() => import("./routers/error"));
 
 //ployfill
 import "intersection-observer";
 import "./normalize.css";
 import "loading-attribute-polyfill";
 import "whatwg-fetch";
+import NavShowProview from "@components/proview/navShow";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -35,18 +30,13 @@ const router = createBrowserRouter([
           {
             //默认页面
             index: true,
-            element: <PhotoPage />,
+            element: <VideoPage />,
           },
           {
             // video瀑布流展示页面
             path: "video",
             element: <VideoPage />,
           },
-          {
-            // 二创文章瀑布流展示页面
-            path: "read",
-            element: <ReadPage />,
-          },
           {
             // 二创图片瀑布流展示页面
             path: "photo",
@@ -59,14 +49,11 @@ const router = createBrowserRouter([
 ]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  // <React.StrictMode>
-  // <Suspense>
   <ScreenProview>
     <TagSelectProview>
-      <RouterProvider router={router} />
+      <NavShowProview>
+        <RouterProvider router={router} />
+      </NavShowProview>
     </TagSelectProview>
   </ScreenProview>
-  // </Suspense>
-
-  // </React.StrictMode>
 );

src/routers/layout/header.tsx

@@ -1,13 +1,5 @@
 import SearchSharpIcon from "@mui/icons-material/SearchSharp";
-import {
-  Outlet,
-  NavLink,
-  useLoaderData,
-  Form,
-  redirect,
-  useLocation,
-  useSubmit,
-} from "react-router-dom";
+import { Form } from "react-router-dom";
 import Header_Nav from "./nav";
 import styles from "./layout.module.less";
 import { useFocus } from "./hooks";

src/routers/layout/index.tsx

@@ -1,24 +1,19 @@
-import {
-  Outlet,
-  NavLink,
-  useLoaderData,
-  Form,
-  redirect,
-  useNavigation,
-  useSubmit,
-} from "react-router-dom";
+import { Flipped } from "react-flip-toolkit";
+import { Outlet } from "react-router-dom";
 import Header from "./header";
 export default function Layout() {
   return (
     <>
       <Header />
-      <main>
-        <section
-        // className=
-        >
-          <Outlet />
-        </section>
-      </main>
+      <Flipped flipId={"list"} spring={"veryGentle"}>
+        <main>
+          <section
+          // className=
+          >
+            <Outlet />
+          </section>
+        </main>
+      </Flipped>
     </>
   );
 }

src/routers/layout/layout.module.less

@@ -1,8 +1,3 @@
-.header {
-    // transition: height 1s linear;
-}
-
-
 .search-box {
     position: relative;
     margin: 0 8px;