♿ perf(custom): 提取公共组件和hooks

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} />
     </>
   );
 };

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 />

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' />,
   },
 ];
 

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

@@ -0,0 +1 @@
+export default function PCSearchAdvanceLikeModal() {}

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

@@ -7,15 +7,13 @@ 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;
   const { searchMode } = useSearchMode();
   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(),

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 };
+}