♿ perf(custom): 平板端样式更新以及适配

src/routers/layout/header.tsx

@@ -24,7 +24,7 @@ export default function Header() {
 
 const ReactiveHeader = memo(() => {
   return (
-    <header className='border-y-2 relative z-10'>
+    <header className='border-t-2 relative z-10 max-md:border-b-2'>
       {/* 手机端 */}
       <div className='hidden max-md:flex justify-between ml-8 mr-8'>
         <Yituo width={"64px"} height={"30px"} />

src/routers/layout/index.tsx

@@ -35,9 +35,5 @@ export default function Layout() {
 
 const NavContent = () => {
   const isSearchPage = useMatch(`/search`) !== null;
-  return (
-    <Flipped flipId={"list"}>
-      <div className='max-md:hidden'>{!isSearchPage && <MidContent />}</div>
-    </Flipped>
-  );
+  return <div className='max-md:hidden'>{!isSearchPage && <MidContent />}</div>;
 };

src/routers/layout/midcontent/index.tsx

@@ -3,38 +3,50 @@ import { Link as Mlink } from "@mui/material";
 import { RouterList } from "../routernav";
 import { TabProps } from "../routernav/index";
 import HeadNav from "../nav";
+import LaunchIcon from "@mui/icons-material/Launch";
 import styles from "./midcontent.module.less";
 import { Flipped } from "react-flip-toolkit";
 export default function MidContent() {
   return (
     <>
+      {/* 大屏 */}
       <div
-        className={`${styles["midcontent"]} flex justify-between my-4 gap-2 items-start`}
+        className={`${styles["midcontent"]} flex justify-between my-4 gap-2 items-start max-lg:hidden`}
       >
         <LeftLinks />
-        <div className='flex-shrink py-1 overflow-x-hidden px-8 max-lg:px-4'>
+        <Flipped flipId={"list"}>
+          <div className='flex-shrink py-1 overflow-x-hidden px-8 max-lg:px-4'>
+            <HeadNav />
+          </div>
+        </Flipped>
+        <RightLinks />
+      </div>
+      {/* ipad */}
+      <div className={`${styles["midcontent"]} hidden max-lg:block `}>
+        <div className='flex justify-between mt-2'>
+          <LeftLinks />
+          <RightLinks />
+        </div>
+        <div className='py-1 overflow-x-hidden px-8 max-lg:px-4'>
           <HeadNav />
         </div>
-        <RightLinks />
       </div>
     </>
   );
 }
 
 const LeftLinks = () => (
-  <Flipped inverseFlipId={`list`}>
-    <div className='flex items-center gap-2 basis-36 flex-shrink-0 h-14'>
-      {RouterList.map((item, key) => (
-        <Link
-          to={item.to}
-          key={key}
-          className='px-4 py-2 text-center rounded-sm bg-white text-gray-800 transition-all duration-300 hover:bg-gray-200'
-        >
-          {item.label}
-        </Link>
-      ))}
-    </div>
-  </Flipped>
+  <div className='flex items-center gap-2 basis-36 flex-shrink-0 h-14 max-lg:h-8'>
+    {RouterList.map((item, key) => (
+      <Link
+        to={item.to}
+        key={key}
+        className='px-4 py-2 text-center rounded-sm bg-white text-gray-800 transition-all duration-300 hover:bg-gray-200 max-lg:h-8 max-lg:leading-4'
+      >
+        {item.label}
+      </Link>
+    ))}
+  </div>
 );
 const GroupLists: TabProps[] = [
   {
@@ -64,21 +76,20 @@ const GroupLists: TabProps[] = [
 ];
 
 const RightLinks = () => (
-  <Flipped inverseFlipId={`list`}>
-    <div className='grid grid-cols-3 gap-2 text-gray-600 basis-40 flex-shrink-0'>
-      {GroupLists.map((item, key) => (
-        <Mlink
-          href={`https://space.bilibili.com/${item.to}`}
-          target='_blank'
-          key={key}
-          underline='none'
-          color='inherit'
-          className='text-sm font-normal pl-2 pr-2 pt-1 pb-1 transition-colors hover:text-blue-400'
-          title={item.label}
-        >
-          {item.label}
-        </Mlink>
-      ))}
-    </div>
-  </Flipped>
+  <div className='grid grid-cols-3 gap-2 text-gray-600 basis-40 flex-shrink-0 max-lg:gap-0 max-lg:grid-cols-7 max-lg:basis-1/2 max-lg:items-center'>
+    <LaunchIcon className='hidden max-lg:block ml-auto' fontSize='small' />
+    {GroupLists.map((item, key) => (
+      <Mlink
+        href={`https://space.bilibili.com/${item.to}`}
+        target='_blank'
+        key={key}
+        underline='none'
+        color='inherit'
+        className='text-sm font-normal px-2 py-1 transition-colors hover:text-blue-400 text-center max-lg:p-0 max-lg:h-8 max-lg:leading-8'
+        title={item.label}
+      >
+        {item.label}
+      </Mlink>
+    ))}
+  </div>
 );

src/routers/layout/nav/index.tsx

@@ -180,7 +180,7 @@ const NavItem: FC<VideoNavQueryItemType | PhotoNavQueryItemType> = memo(
       transition,
     };
     return (
-      <Flipped flipId={props.id as string} spring={"veryGentle"}>
+      <Flipped flipId={props.id as string} delayUntil='list'>
         <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
           <NavTagChipItem {...props} />
         </div>

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

@@ -23,6 +23,12 @@
             align-items: center;
             justify-content: center;
 
+            span {
+                transition: all 300ms ease;
+                font-size: 12px;
+                font-weight: 600;
+            }
+
             span+input {
                 height: 0%;
                 width: 0%;
@@ -40,8 +46,8 @@
 
         span {
             padding-bottom: 2px;
-            font-size: 12px;
-            font-weight: 800;
+            font-size: 14px;
+            font-weight: 400;
         }
 
         span+input {

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

@@ -5,13 +5,13 @@ 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";
+import { FC, forwardRef, useImperativeHandle, useRef } from "react";
 export default function Search() {
   const [tag] = useURLParams(["tag"]);
   const searchId = `pcSearch`;
   const { focused, bind } = useSearchFocus();
   const { onFocus, onBlur } = bind;
-  const { searchMode, handlerChangeSearchMode } = useSearchMode();
+  const { searchMode } = useSearchMode();
   const navigate = useNavigate(),
     handlerSubmit = () => {
       const value = (document.getElementById(searchId) as HTMLInputElement)
@@ -31,8 +31,8 @@ export default function Search() {
         <div
           onClick={!focused ? onFocus : undefined}
           className={`${styles["search-box"]} ${
-            focused ? styles["focus"] : "p-2"
-          } max-md:m-0 duration-300 max-md:flex-row-reverse relative`}
+            focused ? styles["focus"] : "py-1"
+          } px-2 max-md:m-0 duration-300 max-md:flex-row-reverse relative`}
         >
           {searchMode === "搜索tag" && (
             <>
@@ -73,11 +73,15 @@ const AdvanceSearch = forwardRef(function Advance(props, ref) {
   const [tag, name] = useURLParams(["tag", "name"]);
   const { focused, bind } = useSearchFocus(),
     { onBlur } = bind;
+  const nameRef = useRef<HTMLInputElement>(null),
+    tagRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate(),
     handlerSubmit = () => {
-      // const value = (document.getElementById(searchId) as HTMLInputElement)
-      //   .value;
-      // navigate(`/search?tag=${value}`);
+      //@ts-ignore
+      let tagValue = tagRef.current!.getValue(),
+        //@ts-ignore
+        nameValue = nameRef.current!.getValue();
+      navigate(`/search?tag=${tagValue}&name=${nameValue}`);
       onBlur();
     };
   // tag.露早~name.L姓飞行玩家
@@ -87,30 +91,98 @@ const AdvanceSearch = forwardRef(function Advance(props, ref) {
         !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' />
+      <AdvanceSearchItem
+        title={"作者"}
+        inputDefaultValue={name}
+        ref={nameRef}
+        onSubmit={handlerSubmit}
+      />
       {/* 等待接口更新 */}
-      {/* <div
-        className={`${pcStyles["SearchItem"]} ${pcStyles["itemPadding"]} ${pcStyles["item"]}`}
+      {/* <AdvanceSearchItem title={"标题"} inputDefaultValue={} /> */}
+      <AdvanceSearchLastItem
+        title={"tag"}
+        inputDefaultValue={tag}
+        ref={tagRef}
+        onSubmit={handlerSubmit}
+      />
+    </div>
+  );
+});
+
+type AdvanceItemProps = {
+  title: string;
+  inputDefaultValue: string;
+  onSubmit: () => void;
+};
+
+const useBackRef = (ref: React.Ref<HTMLInputElement>) => {
+  const inputRef = useRef<HTMLInputElement>(null),
+    handerfocus = () => inputRef.current?.focus();
+  //@ts-ignore
+  useImperativeHandle(ref, () => {
+    return {
+      getValue() {
+        return inputRef.current?.value;
+      },
+    };
+  });
+  return { inputRef, handerfocus };
+};
+
+const AdvanceSearchItem = forwardRef<HTMLInputElement, AdvanceItemProps>(
+  (props, ref) => {
+    const { inputRef, handerfocus } = useBackRef(ref);
+    return (
+      <>
+        <div
+          className={`${pcStyles["SearchItem"]} ${pcStyles["itemPadding"]} ${pcStyles["item"]}`}
+          onClick={handerfocus}
+        >
+          <span>{props.title}</span>
+          <input
+            ref={inputRef}
+            autoComplete='off'
+            defaultValue={props.inputDefaultValue}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                props.onSubmit();
+              }
+            }}
+          />
+        </div>
+        <span className='border-r-2 h-8 self-center' />
+      </>
+    );
+  }
+);
+const AdvanceSearchLastItem = forwardRef<
+  HTMLInputElement,
+  AdvanceItemProps & { onSubmit: () => void }
+>((props, ref) => {
+  const { inputRef, handerfocus } = useBackRef(ref);
+  return (
+    <>
+      <div
+        className={`${pcStyles["SearchItem"]} justify-between`}
+        onClick={handerfocus}
       >
-        <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} />
+          <span>{props.title}</span>
+          <input
+            ref={inputRef}
+            autoComplete='off'
+            defaultValue={props.inputDefaultValue}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                props.onSubmit();
+              }
+            }}
+          />
         </div>
-        <SearchButton onSubmit={() => {}} />
+        <SearchButton onSubmit={props.onSubmit} />
       </div>
-    </div>
+    </>
   );
 });

src/routers/search/index.tsx

@@ -21,18 +21,23 @@ export type PromiseType<T> = Promise<T>;
 export type UnPromisify<T> = T extends PromiseType<infer U> ? U : never;
 type LoaderReturnType = UnPromisify<ReturnType<typeof loader>>;
 export async function loader({ request }: LoaderType) {
-  const url = new URL(request.url),
-    tag = url.searchParams.get("tag");
+  let url = new URL(request.url),
+    tag = url.searchParams.get("tag"),
+    name = url.searchParams.get("name");
   let order = url.searchParams.get("order") as videoOrderType;
   if (!OrderArr.includes(order)) {
     order = "score";
   }
-  return [tag, order] as const;
+  !tag && (tag = "");
+  !name && (name = "");
+  return [tag, name, order] as const;
 }
 
 export default function SearchPage() {
   const loaderData = useLoaderData() as LoaderReturnType,
-    [tag, order] = loaderData;
+    [tagParam, nameParam, order] = loaderData;
+  {
+  }
   const [lists, setLists] = useState<VideoListType>([]);
   const { handerChangeLoading } = useChangeLoading("searchIsloading");
   useEffect(() => {
@@ -61,7 +66,7 @@ export default function SearchPage() {
     const fetchHandler = async (page: number = 1) => {
       const data = await fetchVideohandler(page, {
         order,
-        q: `tag.${tag}`,
+        q: `tag.${tagParam}~name.${nameParam}`,
       });
       handlerSetList(data, page + 1);
     };