初步设定搜索栏动画

readme.md

@@ -34,7 +34,7 @@ $ npm run preview
 - [x] 基础 tag 栏展示
 - [x] tag 栏用户自定义排序
 - [x] tag 栏放缩动画
-- [x] 根据tag栏进行重新查询
+- [x] 根据 tag 栏进行重新查询
 
 ## TODO
 
@@ -43,6 +43,7 @@ $ npm run preview
 - [ ] UI 设计
 - [ ] 搜索功能
 - [ ] 图片加载序列
+- [ ] header 栏根据滚动进行显示隐藏
 
 ### 现在还没定论的
 

src/components/proview/searchFocus.tsx

@@ -0,0 +1,33 @@
+import { useState, useContext, createContext } from "react";
+import { ReactChildrenType } from "./type";
+
+type SearchcontextType = {
+  focused: boolean;
+  bind: {
+    onFocus: () => void;
+    onBlur: () => void;
+  };
+};
+
+const SearchFocusContext = createContext<SearchcontextType>({
+  focused: false,
+  bind: {
+    onFocus() {},
+    onBlur() {},
+  },
+});
+
+const SearchFocuspreview = ({ children }: ReactChildrenType) => {
+  const [focused, set] = useState<boolean>(false),
+    onFocus = () => set(true),
+    onBlur = () => set(false);
+  return (
+    <SearchFocusContext.Provider value={{ focused, bind: { onBlur, onFocus } }}>
+      {children}
+    </SearchFocusContext.Provider>
+  );
+};
+
+export const useSearchFocus = () => useContext(SearchFocusContext);
+
+export default SearchFocuspreview;

src/main.tsx

@@ -16,6 +16,7 @@ import "./normalize.css";
 import "loading-attribute-polyfill";
 import "whatwg-fetch";
 import "./index.less";
+import SearchFocuspreview from "@components/proview/searchFocus";
 
 const router = createBrowserRouter([
   {
@@ -54,9 +55,11 @@ const router = createBrowserRouter([
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <ScreenProview>
     <MUIThemePreview>
-      <Provider store={store}>
-        <RouterProvider router={router} />
-      </Provider>
+      <SearchFocuspreview>
+        <Provider store={store}>
+          <RouterProvider router={router} />
+        </Provider>
+      </SearchFocuspreview>
     </MUIThemePreview>
   </ScreenProview>
 );

src/routers/layout/header.tsx

@@ -1,46 +1,25 @@
-import SearchSharpIcon from "@mui/icons-material/SearchSharp";
-import { Form } from "react-router-dom";
+import { useSearchFocus } from "@components/proview/searchFocus";
+import { Flipped } from "react-flip-toolkit";
 import styles from "./layout.module.less";
-import { useFocus } from "./hooks";
 import LOGO from "./logo";
 import RightSide from "./rightSide";
+import Search from "./search";
 export default function Header() {
+  const { focused } = useSearchFocus();
   return (
-    <header className={styles["header"]}>
-      <LOGO />
-      <Search />
-      <RightSide />
-    </header>
+    <Flipped flipId={"list"} spring={"veryGentle"}>
+      <header
+        className={styles["header"]}
+        style={{
+          justifyContent: focused ? "center" : "space-between",
+          height: focused ? "100px" : "40px",
+        }}
+      >
+        {!focused && <LOGO />}
+        <Search />
+        {!focused && <RightSide />}
+      </header>
+    </Flipped>
   );
 }
 //todo 换掉header
-//todo 添加搜索
-function Search() {
-  const { focused, bind } = useFocus();
-  return (
-    <>
-      <div className={styles["search-box"]}>
-        <Form
-          role='search'
-          className={`${styles["search-form"]} ${
-            focused ? styles["form-active"] : ""
-          }`}
-        >
-          <div className={styles["search-content"]}>
-            <input
-              {...bind}
-              type='text'
-              autoComplete='off'
-              maxLength={50}
-              className={styles["search-input"]}
-              placeholder='尝试在这里搜索些什么'
-            />
-          </div>
-          <div className={styles["search-btn"]}>
-            <SearchSharpIcon />
-          </div>
-        </Form>
-      </div>
-    </>
-  );
-}

src/routers/layout/index.tsx

@@ -4,13 +4,26 @@ import Header from "./header";
 import Header_Nav from "./nav";
 import { useAppSelector } from "@store/hooks";
 import { selectNavMoreShowed } from "@store/device/index";
+import { useSearchFocus } from "@components/proview/searchFocus";
+import styles from "./layout.module.less";
 export default function Layout() {
-  const showed = useAppSelector(selectNavMoreShowed);
+  const showed = useAppSelector(selectNavMoreShowed),
+    { focused } = useSearchFocus();
   return (
     <>
-      <Flipper flipKey={showed} decisionData={showed} spring={"veryGentle"}>
+      <Flipper
+        flipKey={`${showed}-${focused}`}
+        decisionData={showed}
+        spring={"veryGentle"}
+        className={styles["container"]}
+      >
         <Header />
-        <nav className='feedContainer'>
+        <nav
+          className='feedContainer'
+          style={{
+            paddingTop: "40px",
+          }}
+        >
           <Header_Nav />
         </nav>
         <Flipped flipId={"list"} spring={"veryGentle"}>

src/routers/layout/layout.module.less

@@ -1,86 +1,16 @@
-.search-box {
+.container {
     position: relative;
-    margin: 0 8px;
-    min-width: 180px;
-    max-width: 500px;
-
-    .search-form {
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-        height: 40px;
-        opacity: .9;
-        transition: background-color .3s;
-        background-color: #f1f2f3;
-        border: 1px solid #E3E5E7;
-
-        &:hover {
-            background-color: #fff;
-        }
-
-        .search-content {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            position: relative;
-            padding: 0 8px;
-            margin-right: 8px;
-            height: 32px;
-            border: 2px solid transparent;
-            border-radius: 6px;
-
-            .search-input {
-                flex: 1;
-                overflow: hidden;
-                padding-right: 8px;
-                border: none;
-                background-color: transparent;
-                box-shadow: none;
-                font-size: 14px;
-                line-height: 20px;
-                color: #61666D;
-
-                &:focus-visible {
-                    outline: none;
-                }
-            }
-        }
-
-        .search-btn {
-            display: flex;
-            margin: 0;
-            padding: 0;
-            align-items: center;
-            justify-content: center;
-            width: 32px;
-            height: 32px;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: background-color .3s;
-
-            &:hover {
-                background-color: #E3E5E7;
-            }
-        }
-    }
-
-    .form-active {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        background-color: #fff;
-
-        .search-content {
-            background-color: #f1f2f3;
-        }
-    }
 }
 
 .header {
     max-width: 1440px;
     margin: 0 auto;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    background-color: #fff;
 }

src/routers/layout/search/index.tsx

@@ -0,0 +1,36 @@
+import SearchSharpIcon from "@mui/icons-material/SearchSharp";
+import { Form } from "react-router-dom";
+import styles from "./search.module.less";
+import { useSearchFocus } from "@components/proview/searchFocus";
+import { Flipped } from "react-flip-toolkit";
+export default function Search() {
+  const { focused, bind } = useSearchFocus();
+  return (
+    <>
+      <Flipped flipId={"search-box"} spring={"veryGentle"}>
+        <div className={styles["search-box"]}>
+          <Form
+            role='search'
+            className={`${styles["search-form"]} ${
+              focused ? styles["form-active"] : ""
+            }`}
+          >
+            <div className={styles["search-content"]}>
+              <input
+                {...bind}
+                type='text'
+                autoComplete='off'
+                maxLength={50}
+                className={styles["search-input"]}
+                placeholder='尝试在这里搜索些什么'
+              />
+            </div>
+            <div className={styles["search-btn"]}>
+              <SearchSharpIcon />
+            </div>
+          </Form>
+        </div>
+      </Flipped>
+    </>
+  );
+}

src/routers/layout/search/search.module.less

@@ -0,0 +1,80 @@
+.search-box {
+    position: relative;
+    z-index: 10;
+    margin: 0 8px;
+    min-width: 180px;
+    max-width: 500px;
+    width: 100%;
+
+    .search-form {
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        height: 40px;
+        opacity: .9;
+        transition: background-color .3s;
+        background-color: #f1f2f3;
+        border: 1px solid #E3E5E7;
+
+        &:hover {
+            background-color: #fff;
+        }
+
+        .search-content {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            position: relative;
+            padding: 0 8px;
+            margin-right: 8px;
+            height: 32px;
+            border: 2px solid transparent;
+            border-radius: 6px;
+
+            .search-input {
+                flex: 1;
+                overflow: hidden;
+                padding-right: 8px;
+                border: none;
+                background-color: transparent;
+                box-shadow: none;
+                font-size: 14px;
+                line-height: 20px;
+                color: #61666D;
+
+                &:focus-visible {
+                    outline: none;
+                }
+            }
+        }
+
+        .search-btn {
+            display: flex;
+            margin: 0;
+            padding: 0;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background-color .3s;
+
+            &:hover {
+                background-color: #E3E5E7;
+            }
+        }
+    }
+
+    .form-active {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        background-color: #fff;
+
+
+        .search-content {
+            background-color: #f1f2f3;
+        }
+    }
+}