♿ perf(custom): 增加pc端搜索动态效果

src/routers/layout/header.tsx

@@ -24,19 +24,20 @@ export default function Header() {
 
 const ReactiveHeader = memo(() => {
   return (
-    <header className='border-t-2 border-b-2 pt-4 pb-4'>
+    <header className='border-y-2 relative z-10'>
+      {/* 手机端 */}
       <div className='hidden max-md:flex justify-between ml-8 mr-8'>
         <Yituo width={"64px"} height={"30px"} />
         <RouterNav />
       </div>
-      <Header_content className={`${styles["header"]}`}>
-        <div className='flex-shrink-0 flex-grow basis-40 max-md:hidden'>
+      <Header_content className={`${styles["header"]} h-20`}>
+        <div className='flex-shrink-0 flex-grow basis-40 max-md:hidden relative z-10'>
           <LOGO />
         </div>
-        <div className='flex-1 max-md:ml-6 max-md:mr-6'>
+        <div className='flex-grow-0 flex-shrink basis-80 h-12 max-md:mx-6 '>
           <Search />
         </div>
-        <div className='text-gray-400 text-end flex-shrink-0 flex-grow basis-40 max-md:hidden'>
+        <div className='text-gray-400 text-end flex-shrink-0 flex-grow basis-40 max-md:hidden relative z-10'>
           敬请期待
         </div>
       </Header_content>

src/routers/layout/index.tsx

@@ -1,7 +1,6 @@
 import { Flipped, Flipper } from "react-flip-toolkit";
 import { Outlet, useMatch } from "react-router-dom";
 import Header from "./header";
-import Header_Nav from "./nav";
 import { useAppSelector } from "@store/hooks";
 import { selectNavMoreShowed } from "@store/device/index";
 import styles from "./layout.module.less";
@@ -42,11 +41,3 @@ const NavContent = () => {
     </Flipped>
   );
 };
-
-const OldNav = () => (
-  <Flipped flipId={"list"}>
-    <nav className={"feedContainer " + styles["nav"]}>
-      <Header_Nav />
-    </nav>
-  </Flipped>
-);

src/routers/layout/search/index.tsx

@@ -1,43 +1,16 @@
-import SearchSharpIcon from "@mui/icons-material/SearchSharp";
 import { Form, useLocation, useNavigate } from "react-router-dom";
-import styles from "./search.module.less";
-import { useSearchFocus } from "@components/proview/searchFocus";
-import { Flipped } from "react-flip-toolkit";
-import SearchIcon from "@mui/icons-material/Search";
-import { useURLParams } from "@utils/hooks/url";
+import PCSearch from "./pc";
 // todo 增加高级搜索以及手机端的搜索
 export default function Search() {
   const navigate = useNavigate();
   const handlerSubmit = () => {
     const value = (document.getElementById("q") as HTMLInputElement).value;
     navigate(`/search?tag=${value}`);
   };
-  const [tag] = useURLParams(["tag"]);
   return (
     <>
-      <div
-        className={`${styles["search-box"]} bg-white max-w-full box-border ml-6 mr-6 w-72 max-md:m-0 max-md:w-full max-md:flex-row-reverse`}
-      >
-        <input
-          className='pl-2 pr-2 focus-within:outline-none flex-grow'
-          placeholder='尝试搜索些啥？'
-          autoComplete='off'
-          id='q'
-          defaultValue={tag}
-          onKeyDown={(event) => {
-            if (event.key === "Enter") {
-              handlerSubmit();
-            }
-          }}
-        />
-
-        <button
-          type='submit'
-          className={`${styles["search-button"]} bg-red-700 text-white w-8 h-8 flex justify-center items-center max-md:bg-white max-md:text-gray-900`}
-          onClick={handlerSubmit}
-        >
-          <SearchIcon color='inherit' fontSize='small' />
-        </button>
+      <div className='visible max-md:hidden'>
+        <PCSearch />
       </div>
     </>
   );

src/routers/layout/search/pc/hooks.tsx

@@ -0,0 +1,14 @@
+import {
+  changeSearchMode,
+  SelectModeType,
+  selectSearchMode,
+} from "@store/device";
+import { useAppDispatch, useAppSelector } from "@store/hooks";
+
+export const useSearchMode = () => {
+  const searchMode = useAppSelector(selectSearchMode);
+  const dispatch = useAppDispatch(),
+    handlerChangeSearchMode = (name: SelectModeType) =>
+      dispatch(changeSearchMode(name));
+  return { searchMode, handlerChangeSearchMode };
+};

src/routers/layout/search/pc/index.tsx

@@ -0,0 +1,35 @@
+import React, { useRef } from "react";
+import { useSearchFocus } from "@components/proview/searchFocus";
+import styles from "../search.module.less";
+import { FC, useEffect } from "react";
+import SelectModeCom from "./selectModeNav";
+import Search from "./search";
+
+export default function NormalSearch() {
+  const { focused, bind } = useSearchFocus(),
+    { onBlur } = bind;
+  const contentRef = useRef();
+  useEffect(() => {
+    if (focused) {
+      window.addEventListener("scroll", onBlur, {
+        once: true,
+      });
+    }
+  }, [focused]);
+  return (
+    <div
+      className={`${
+        focused ? `` : `-translate-y-20`
+      } absolute left-0 top-0 w-full flex transition-transform duration-300 flex-col justify-center items-center`}
+    >
+      <SelectModeCom />
+      <Search />
+      <div
+        className={`self-stretch h-screen bg-black opacity-50 ${
+          focused ? "visible" : "hidden"
+        }`}
+        onClick={onBlur}
+      ></div>
+    </div>
+  );
+}

src/routers/layout/search/pc/search.tsx

@@ -0,0 +1,57 @@
+import { useSearchFocus } from "@components/proview/searchFocus";
+import { useURLParams } from "@utils/hooks/url";
+import SearchIcon from "@mui/icons-material/Search";
+import styles from "../search.module.less";
+import { useSearchMode } from "./hooks";
+import { useNavigate } from "react-router-dom";
+export default function Search() {
+  const [tag] = useURLParams(["tag"]);
+  const searchId = `pcSearch`;
+  const { focused, bind } = useSearchFocus();
+  const { onFocus, onBlur } = bind;
+  const { searchMode, handlerChangeSearchMode } = useSearchMode();
+  const navigate = useNavigate(),
+    handlerSubmit = () => {
+      const value = (document.getElementById(searchId) as HTMLInputElement)
+        .value;
+      navigate(`/search?tag=${value}`);
+      onBlur();
+    };
+  return (
+    <>
+      <div
+        className={`basis-20 flex items-center transition-all duration-300 bg-white border-b self-stretch ${
+          focused ? "pb-4" : "pb-0"
+        }`}
+      >
+        <div
+          onClick={!focused ? onFocus : undefined}
+          className={`${styles["search-box"]} ${
+            focused ? styles["focus"] : ""
+          } max-md:m-0 duration-300 max-md:flex-row-reverse `}
+        >
+          <input
+            className='mx-4 focus-within:outline-none flex-grow'
+            placeholder='尝试搜索些啥？'
+            autoComplete='off'
+            defaultValue={tag}
+            maxLength={20}
+            id={searchId}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                handlerSubmit();
+              }
+            }}
+          />
+          <button
+            type='submit'
+            className={`${styles["search-button"]} bg-red-700 max-md:bg-white max-md:text-gray-900 `}
+            onClick={handlerSubmit}
+          >
+            <SearchIcon color='inherit' fontSize='small' />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

src/routers/layout/search/pc/selectModeNav.tsx

@@ -0,0 +1,41 @@
+import { selectModeList } from "@store/device";
+import { FC } from "react";
+import styles from "../search.module.less";
+import { useSearchMode } from "./hooks";
+/**
+ * 搜索模式选择
+ */
+export default function SelectModeCom() {
+  const { searchMode, handlerChangeSearchMode } = useSearchMode();
+  return (
+    <div
+      className={`flex gap-2 justify-center basis-20 items-center bg-white max-w-full`}
+    >
+      {selectModeList.map((item, key) => (
+        <SelectButton
+          key={key}
+          label={item}
+          selected={item === searchMode}
+          onChange={handlerChangeSearchMode.bind(null, item)}
+        />
+      ))}
+    </div>
+  );
+}
+
+type SelectButtonType = {
+  selected: boolean;
+  label: string;
+  onChange: () => void;
+};
+
+const SelectButton: FC<SelectButtonType> = ({ selected, label, onChange }) => {
+  return (
+    <div
+      className={`${styles["pc-search"]} ${selected ? styles["active"] : ``}`}
+      onClick={onChange}
+    >
+      <button className={`w-16 h-5 mx-4 my-2`}>{label}</button>
+    </div>
+  );
+};

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

@@ -1,93 +1,56 @@
-// .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;
-//         }
-//     }
-// }
-
-
 .search-box {
     box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 5%);
     border-radius: 40px;
     border: 1px solid #DDD;
     padding: 7px;
     display: flex;
+    background-color: white;
+    max-width: 100%;
+    box-sizing: border-box;
+    justify-content: space-between;
+    align-items: stretch;
+    margin: auto;
+    width: 288px;
+
+    &.focus {
+        width: 850px;
+        height: 65px;
+    }
 
     .search-button {
         border-radius: 40px;
+        cursor: pointer;
+        padding: 8px;
+        color: white;
+        position: relative;
+        margin: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+    }
+}
+
+.pc-search {
+    transition-duration: 300ms;
+    display: flex;
+    flex-direction: column;
+
+    &::after {
+        content: '';
+        width: 64px;
+        margin: 0 auto;
+        height: 2px;
+        background-color: currentColor;
+        transform: scaleX(0);
+        transition: transform 200ms ease;
+    }
+
+    &:hover::after {
+        transform: scaleX(1);
+    }
+
+    &.active::after {
+        transform: scaleX(1);
     }
 }