💄 style(custom): 添加pc端高级搜索样式

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

@@ -0,0 +1,63 @@
+.advanceSearch {
+    display: flex;
+    flex-grow: 1;
+
+    &.focus {
+        .itemPadding {
+            padding: 12px 32px;
+        }
+
+        span+input {
+            width: 100%;
+        }
+
+        .SearchItem:hover {
+            background-color: rgb(229, 231, 235);
+        }
+    }
+
+    &.blur {
+        transition: all 300ms ease;
+
+        .item {
+            align-items: center;
+            justify-content: center;
+
+            span+input {
+                height: 0%;
+                width: 0%;
+            }
+        }
+    }
+
+    .itemPadding {
+        transition: all 300ms ease;
+    }
+
+    .item {
+        display: flex;
+        flex-direction: column;
+
+        span {
+            padding-bottom: 2px;
+            font-size: 12px;
+            font-weight: 800;
+        }
+
+        span+input {
+            transition: all 300ms ease;
+            background-color: transparent;
+
+            &:focus-within {
+                outline: none;
+            }
+        }
+    }
+
+    .SearchItem {
+        flex-grow: 1;
+        display: flex;
+        border-radius: 40px;
+        // transition: all 300ms ease;
+    }
+}

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

@@ -2,8 +2,10 @@ 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 pcStyles from "./pc.module.less";
 import { useSearchMode } from "./hooks";
 import { useNavigate } from "react-router-dom";
+import { FC, forwardRef } from "react";
 export default function Search() {
   const [tag] = useURLParams(["tag"]);
   const searchId = `pcSearch`;
@@ -19,39 +21,96 @@ export default function Search() {
     };
   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 `}
+            focused ? styles["focus"] : "p-2"
+          } max-md:m-0 duration-300 max-md:flex-row-reverse relative`}
         >
-          <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>
+          {searchMode === "搜索tag" && (
+            <>
+              <input
+                className='mx-4 my-2 focus-within:outline-none flex-grow'
+                placeholder='尝试搜索些啥？'
+                autoComplete='off'
+                defaultValue={tag}
+                maxLength={20}
+                id={searchId}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    handlerSubmit();
+                  }
+                }}
+              />
+              <SearchButton onSubmit={handlerSubmit} />
+            </>
+          )}
+          {searchMode === "搜索更多" && <AdvanceSearch />}
         </div>
       </div>
     </>
   );
 }
+//通用按钮
+const SearchButton: FC<{ onSubmit?: () => void }> = ({ onSubmit }) => (
+  <button
+    type='submit'
+    className={`${styles["search-button"]} bg-red-700 max-md:bg-white max-md:text-gray-900 `}
+    onClick={onSubmit}
+  >
+    <SearchIcon color='inherit' fontSize='small' />
+  </button>
+);
+
+const AdvanceSearch = forwardRef(function Advance(props, ref) {
+  const [tag, name] = useURLParams(["tag", "name"]);
+  const { focused, bind } = useSearchFocus(),
+    { onBlur } = bind;
+  const navigate = useNavigate(),
+    handlerSubmit = () => {
+      // const value = (document.getElementById(searchId) as HTMLInputElement)
+      //   .value;
+      // navigate(`/search?tag=${value}`);
+      onBlur();
+    };
+  // tag.露早~name.L姓飞行玩家
+  return (
+    <div
+      className={`${pcStyles["advanceSearch"]} ${
+        !focused ? pcStyles["blur"] : pcStyles["focus"]
+      }`}
+    >
+      <div
+        className={`${pcStyles["SearchItem"]} ${pcStyles["itemPadding"]} ${pcStyles["item"]}`}
+      >
+        <span>作者</span>
+        <input autoComplete='off' defaultValue={name} />
+      </div>
+      <span className='border-r-2 h-8 self-center' />
+      {/* 等待接口更新 */}
+      {/* <div
+        className={`${pcStyles["SearchItem"]} ${pcStyles["itemPadding"]} ${pcStyles["item"]}`}
+      >
+        <span>标题</span>
+        <input autoComplete='off' />
+      </div>
+      <span className='border-r-2 h-8 self-center' /> */}
+      <div className={`${pcStyles["SearchItem"]} flex justify-between`}>
+        <div
+          className={`flex-grow ${pcStyles["itemPadding"]} ${pcStyles["item"]}`}
+        >
+          <span>tag</span>
+          <input autoComplete='off' defaultValue={tag} />
+        </div>
+        <SearchButton onSubmit={() => {}} />
+      </div>
+    </div>
+  );
+});

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

@@ -2,7 +2,6 @@
     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%;
@@ -17,6 +16,7 @@
         height: 65px;
     }
 
+
     .search-button {
         border-radius: 40px;
         cursor: pointer;