From 7ef3f1381bc3af243a06de83640a57ac8b438138 Mon Sep 17 00:00:00 2001
From: master1lan <278457198@qq.com>
Date: Thu, 2 Mar 2023 13:26:53 +0800
Subject: [PATCH] =?UTF-8?q?:wheelchair:=20perf(custom):=20=E6=8F=90?=
 =?UTF-8?q?=E5=8F=96=E5=85=AC=E5=85=B1=E7=BB=84=E4=BB=B6=E5=92=8Chooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routers/layout/logo/index.tsx       |  2 +-
 src/routers/layout/rightMore/index.tsx  | 16 ++----
 src/routers/layout/routernav/index.tsx  |  4 +-
 src/routers/layout/search/pc/modal.tsx  |  1 +
 src/routers/layout/search/pc/search.tsx | 69 ++++++++++++++-----------
 src/utils/hooks/popover.ts              | 14 +++++
 6 files changed, 61 insertions(+), 45 deletions(-)
 create mode 100644 src/routers/layout/search/pc/modal.tsx
 create mode 100644 src/utils/hooks/popover.ts

diff --git a/src/routers/layout/logo/index.tsx b/src/routers/layout/logo/index.tsx
index 3e50378..903ffb7 100644
--- a/src/routers/layout/logo/index.tsx
+++ b/src/routers/layout/logo/index.tsx
@@ -101,8 +101,8 @@ export const AboutUSButton = () => {
       >
         关于本站
         <Show_news visible={!shouldShowNews} />
-        <Explain open={open} handlerClick={handlerClick as () => void} />
       </Button>
+      <Explain open={open} handlerClick={handlerClick as () => void} />
     </>
   );
 };
diff --git a/src/routers/layout/rightMore/index.tsx b/src/routers/layout/rightMore/index.tsx
index 208ca36..9d8991c 100644
--- a/src/routers/layout/rightMore/index.tsx
+++ b/src/routers/layout/rightMore/index.tsx
@@ -4,20 +4,10 @@ import LaunchIcon from "@mui/icons-material/Launch";
 import { Button, Link, Popover } from "@mui/material";
 import { TabProps } from "../routernav";
 import { AboutUSButton } from "../logo";
+import { usePopoverConfig } from "@utils/hooks/popover";
 export default function PCRightMore() {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
-    null
-  );
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
+  const { open, anchorEl, handleClick, handleClose } =
+    usePopoverConfig<HTMLButtonElement>();
   return (
     <div className='flex justify-end items-center gap-2 max-md:gap-0 whitespace-nowrap'>
       <AboutUSButton />
diff --git a/src/routers/layout/routernav/index.tsx b/src/routers/layout/routernav/index.tsx
index df9dcb5..f4e672c 100644
--- a/src/routers/layout/routernav/index.tsx
+++ b/src/routers/layout/routernav/index.tsx
@@ -10,12 +10,12 @@ export const RouterList: (TabProps & { startICon: ReactElement })[] = [
   {
     label: "视频",
     to: "/video",
-    startICon: <VideoLibraryIcon fontSize='inherit' />,
+    startICon: <VideoLibraryIcon fontSize='inherit' color='inherit' />,
   },
   {
     label: "图片",
     to: "/photo",
-    startICon: <PhotoIcon fontSize='inherit' />,
+    startICon: <PhotoIcon fontSize='inherit' color='inherit' />,
   },
 ];
 
diff --git a/src/routers/layout/search/pc/modal.tsx b/src/routers/layout/search/pc/modal.tsx
new file mode 100644
index 0000000..b3ad8b7
--- /dev/null
+++ b/src/routers/layout/search/pc/modal.tsx
@@ -0,0 +1 @@
+export default function PCSearchAdvanceLikeModal() {}
diff --git a/src/routers/layout/search/pc/search.tsx b/src/routers/layout/search/pc/search.tsx
index 7c87a4f..bf3129e 100644
--- a/src/routers/layout/search/pc/search.tsx
+++ b/src/routers/layout/search/pc/search.tsx
@@ -7,7 +7,6 @@ import { useBackRef, useSearchMode } from "./hooks";
 import { useNavigate } from "react-router-dom";
 import { FC, forwardRef, useRef } from "react";
 export default function Search() {
-  const [tag] = useURLParams(["tag"]);
   const inputRef = useRef<HTMLInputElement>(null);
   const { focused, bind } = useSearchFocus();
   const { onFocus, onBlur } = bind;
@@ -15,7 +14,6 @@ export default function Search() {
   const navigate = useNavigate(),
     handlerSubmit = () => {
       const value = inputRef.current!.value;
-      console.log(`current input value ${value}`);
       navigate(`/search?tag=${value}`);
       onBlur();
     };
@@ -35,22 +33,7 @@ export default function Search() {
           }  duration-300 relative`}
         >
           {searchMode === "搜索tag" && (
-            <>
-              <input
-                ref={inputRef}
-                className='mx-4 my-2 focus-within:outline-none flex-grow'
-                placeholder='尝试搜索些啥？'
-                autoComplete='off'
-                defaultValue={tag}
-                maxLength={20}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    handlerSubmit();
-                  }
-                }}
-              />
-              <SearchButton onSubmit={handlerSubmit} />
-            </>
+            <NormalSearch ref={inputRef} onFinish={handlerSubmit} />
           )}
           {searchMode === "搜索更多" && <AdvanceSearch />}
         </div>
@@ -62,20 +45,48 @@ export default function Search() {
 const SearchButton: FC<{ onSubmit?: () => void }> = ({ onSubmit }) => {
   const { focused } = useSearchFocus();
   return (
-    <button
-      type='submit'
-      className={`${
-        styles["search-button"]
-      } bg-red-700 transition-all duration-250 mr-2 ${
-        focused ? "p-3 text-2xl" : "p-2 text-xl"
-      }`}
-      onClick={onSubmit}
-    >
-      <SearchIcon color='inherit' fontSize='inherit' />
-    </button>
+    <>
+      <button
+        type='submit'
+        className={`${
+          styles["search-button"]
+        } bg-red-700 transition-all duration-250 mr-2 ${
+          focused ? "p-3 text-2xl" : "p-2 text-xl"
+        }`}
+        onClick={onSubmit}
+      >
+        <SearchIcon color='inherit' fontSize='inherit' />
+      </button>
+    </>
   );
 };
 
+//普通搜索
+const NormalSearch = forwardRef<HTMLInputElement, { onFinish: () => void }>(
+  function Search(props, ref) {
+    const [tag] = useURLParams(["tag"]);
+    return (
+      <>
+        <input
+          ref={ref}
+          className='mx-4 my-2 focus-within:outline-none flex-grow'
+          placeholder='尝试搜索些啥？'
+          autoComplete='off'
+          defaultValue={tag}
+          maxLength={20}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              props.onFinish();
+            }
+          }}
+        />
+        <SearchButton onSubmit={props.onFinish} />
+      </>
+    );
+  }
+);
+
+//高级搜索
 const AdvanceSearch = forwardRef(function Advance(props, ref) {
   const [tag, name] = useURLParams(["tag", "name"]);
   const { focused, bind } = useSearchFocus(),
diff --git a/src/utils/hooks/popover.ts b/src/utils/hooks/popover.ts
new file mode 100644
index 0000000..46a054c
--- /dev/null
+++ b/src/utils/hooks/popover.ts
@@ -0,0 +1,14 @@
+import React from "react";
+
+export function usePopoverConfig<T>() {
+  const [anchorEl, setAnchorEl] = React.useState<T | null>(null);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      //@ts-ignore
+      setAnchorEl(event.currentTarget);
+    },
+    handleClose = () => {
+      setAnchorEl(null);
+    };
+  const open = Boolean(anchorEl);
+  return { anchorEl, handleClick, handleClose, open };
+}