From bc59157b9abb0aa1104ea588a772376767855cbe Mon Sep 17 00:00:00 2001 From: master1lan <278457198@qq.com> Date: Mon, 27 Feb 2023 17:17:48 +0800 Subject: [PATCH] =?UTF-8?q?:wheelchair:=20perf(custom):=20=E5=B9=B3?= =?UTF-8?q?=E6=9D=BF=E7=AB=AF=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=96=B0=E4=BB=A5?= =?UTF-8?q?=E5=8F=8A=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routers/layout/header.tsx | 2 +- src/routers/layout/index.tsx | 6 +- src/routers/layout/midcontent/index.tsx | 77 ++++++------ src/routers/layout/nav/index.tsx | 2 +- src/routers/layout/search/pc/pc.module.less | 10 +- src/routers/layout/search/pc/search.tsx | 122 ++++++++++++++++---- src/routers/search/index.tsx | 15 ++- 7 files changed, 162 insertions(+), 72 deletions(-) diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx index bec6693..294aae3 100644 --- a/src/routers/layout/header.tsx +++ b/src/routers/layout/header.tsx @@ -24,7 +24,7 @@ export default function Header() { const ReactiveHeader = memo(() => { return ( -
+
{/* 手机端 */}
diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx index aaeda9b..dc59ab5 100644 --- a/src/routers/layout/index.tsx +++ b/src/routers/layout/index.tsx @@ -35,9 +35,5 @@ export default function Layout() { const NavContent = () => { const isSearchPage = useMatch(`/search`) !== null; - return ( - -
{!isSearchPage && }
- - ); + return
{!isSearchPage && }
; }; diff --git a/src/routers/layout/midcontent/index.tsx b/src/routers/layout/midcontent/index.tsx index edfb591..03afbe3 100644 --- a/src/routers/layout/midcontent/index.tsx +++ b/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 ( <> + {/* 大屏 */}
-
+ +
+ +
+ + +
+ {/* ipad */} + ); } const LeftLinks = () => ( - -
- {RouterList.map((item, key) => ( - - {item.label} - - ))} -
- +
+ {RouterList.map((item, key) => ( + + {item.label} + + ))} +
); const GroupLists: TabProps[] = [ { @@ -64,21 +76,20 @@ const GroupLists: TabProps[] = [ ]; const RightLinks = () => ( - -
- {GroupLists.map((item, key) => ( - - {item.label} - - ))} -
- +
+ + {GroupLists.map((item, key) => ( + + {item.label} + + ))} +
); diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx index 43e3dbe..07fe43c 100644 --- a/src/routers/layout/nav/index.tsx +++ b/src/routers/layout/nav/index.tsx @@ -180,7 +180,7 @@ const NavItem: FC = memo( transition, }; return ( - +
diff --git a/src/routers/layout/search/pc/pc.module.less b/src/routers/layout/search/pc/pc.module.less index 2765acc..3337a75 100644 --- a/src/routers/layout/search/pc/pc.module.less +++ b/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 { diff --git a/src/routers/layout/search/pc/search.tsx b/src/routers/layout/search/pc/search.tsx index 59bc37a..bfac52e 100644 --- a/src/routers/layout/search/pc/search.tsx +++ b/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() {
{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(null), + tagRef = useRef(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"] }`} > -
- 作者 - -
- + {/* 等待接口更新 */} - {/*
*/} + +
+ ); +}); + +type AdvanceItemProps = { + title: string; + inputDefaultValue: string; + onSubmit: () => void; +}; + +const useBackRef = (ref: React.Ref) => { + const inputRef = useRef(null), + handerfocus = () => inputRef.current?.focus(); + //@ts-ignore + useImperativeHandle(ref, () => { + return { + getValue() { + return inputRef.current?.value; + }, + }; + }); + return { inputRef, handerfocus }; +}; + +const AdvanceSearchItem = forwardRef( + (props, ref) => { + const { inputRef, handerfocus } = useBackRef(ref); + return ( + <> +
+ {props.title} + { + if (event.key === "Enter") { + props.onSubmit(); + } + }} + /> +
+ + + ); + } +); +const AdvanceSearchLastItem = forwardRef< + HTMLInputElement, + AdvanceItemProps & { onSubmit: () => void } +>((props, ref) => { + const { inputRef, handerfocus } = useBackRef(ref); + return ( + <> +
- 标题 - -
- */} -
- tag - + {props.title} + { + if (event.key === "Enter") { + props.onSubmit(); + } + }} + />
- {}} /> +
-
+ ); }); diff --git a/src/routers/search/index.tsx b/src/routers/search/index.tsx index 3791d89..5769292 100644 --- a/src/routers/search/index.tsx +++ b/src/routers/search/index.tsx @@ -21,18 +21,23 @@ export type PromiseType = Promise; export type UnPromisify = T extends PromiseType ? U : never; type LoaderReturnType = UnPromisify>; 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([]); 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); };