From 2a8471738a0cd9b4e7dedc8ac951cc83a5f25e50 Mon Sep 17 00:00:00 2001 From: master1lan <278457198@qq.com> Date: Mon, 27 Feb 2023 23:26:09 +0800 Subject: [PATCH] =?UTF-8?q?:lipstick:=20style(custom):=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=89=8B=E6=9C=BA=E7=AB=AF=E6=99=AE=E9=80=9A=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.less | 18 +++ src/routers/layout/header.tsx | 2 - src/routers/layout/index.tsx | 4 +- src/routers/layout/search/index.tsx | 5 +- src/routers/layout/search/pc/hooks.tsx | 14 +++ src/routers/layout/search/pc/index.tsx | 1 - src/routers/layout/search/pc/search.tsx | 18 +-- src/routers/layout/search/phone/index.tsx | 33 ++++++ src/routers/layout/search/phone/item.tsx | 111 ++++++++++++++++++ src/routers/layout/search/phone/modal.tsx | 112 +++++++++++++++++++ src/routers/layout/search/phone/url.ts | 13 +++ src/routers/layout/search/search.module.less | 3 +- 12 files changed, 311 insertions(+), 23 deletions(-) create mode 100644 src/routers/layout/search/phone/item.tsx create mode 100644 src/routers/layout/search/phone/modal.tsx create mode 100644 src/routers/layout/search/phone/url.ts diff --git a/src/index.less b/src/index.less index 9a8bfaa..6c1b571 100644 --- a/src/index.less +++ b/src/index.less @@ -2,6 +2,24 @@ @tailwind components; @tailwind utilities; + +@layer utilities { + + /* Hide scrollbar for Chrome, Safari and Opera */ + .no-scrollbar::-webkit-scrollbar { + display: none; + } + + /* Hide scrollbar for IE, Edge and Firefox */ + .no-scrollbar { + -ms-overflow-style: none; + /* IE and Edge */ + scrollbar-width: none; + /* Firefox */ + } +} + + * { box-sizing: border-box; padding: 0; diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx index 0ad724c..4830508 100644 --- a/src/routers/layout/header.tsx +++ b/src/routers/layout/header.tsx @@ -7,7 +7,6 @@ import { changeLoadingCauseByUrl } from "@store/loading"; import { routerNameToLoading } from "@utils/router"; import { styled } from "@mui/material"; import Search from "./search"; -import RouterNav from "./routernav/index"; export default function Header() { const dispatch = useAppDispatch(), location = useLocation(); @@ -26,7 +25,6 @@ const ReactiveHeader = memo(() => {
{/* 手机端 */}
-
{/* pc端和平板端header部 */} diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx index 232dcb5..6d07e42 100644 --- a/src/routers/layout/index.tsx +++ b/src/routers/layout/index.tsx @@ -24,9 +24,9 @@ export default function Layout() {
- {/*
+
-
*/} +
diff --git a/src/routers/layout/search/index.tsx b/src/routers/layout/search/index.tsx index 4834466..f29a734 100644 --- a/src/routers/layout/search/index.tsx +++ b/src/routers/layout/search/index.tsx @@ -1,5 +1,6 @@ import { Form, useLocation, useNavigate } from "react-router-dom"; import PCSearch from "./pc"; +import PhoneSearch from "./phone"; // todo 增加高级搜索以及手机端的搜索 export default function Search() { const navigate = useNavigate(); @@ -12,7 +13,9 @@ export default function Search() {
-
+
+ +
); } diff --git a/src/routers/layout/search/pc/hooks.tsx b/src/routers/layout/search/pc/hooks.tsx index 7b4db49..e11d88d 100644 --- a/src/routers/layout/search/pc/hooks.tsx +++ b/src/routers/layout/search/pc/hooks.tsx @@ -4,6 +4,7 @@ import { selectSearchMode, } from "@store/device"; import { useAppDispatch, useAppSelector } from "@store/hooks"; +import { useRef, useImperativeHandle } from "react"; export const useSearchMode = () => { const searchMode = useAppSelector(selectSearchMode); @@ -12,3 +13,16 @@ export const useSearchMode = () => { dispatch(changeSearchMode(name)); return { searchMode, handlerChangeSearchMode }; }; +export 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 }; +}; diff --git a/src/routers/layout/search/pc/index.tsx b/src/routers/layout/search/pc/index.tsx index 3bd0eb0..395e89c 100644 --- a/src/routers/layout/search/pc/index.tsx +++ b/src/routers/layout/search/pc/index.tsx @@ -1,6 +1,5 @@ import React, { useRef } from "react"; import { useSearchFocus } from "@components/proview/searchFocus"; -import styles from "../search.module.less"; import { FC, useEffect } from "react"; import SelectModeCom from "./selectModeNav"; import Search from "./search"; diff --git a/src/routers/layout/search/pc/search.tsx b/src/routers/layout/search/pc/search.tsx index ec1307e..bbe8cbc 100644 --- a/src/routers/layout/search/pc/search.tsx +++ b/src/routers/layout/search/pc/search.tsx @@ -3,9 +3,9 @@ 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 { useBackRef, useSearchMode } from "./hooks"; import { useNavigate } from "react-router-dom"; -import { FC, forwardRef, useImperativeHandle, useRef } from "react"; +import { FC, forwardRef, useRef } from "react"; export default function Search() { const [tag] = useURLParams(["tag"]); const searchId = `pcSearch`; @@ -115,20 +115,6 @@ type AdvanceItemProps = { 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); diff --git a/src/routers/layout/search/phone/index.tsx b/src/routers/layout/search/phone/index.tsx index 7095d88..250a2dd 100644 --- a/src/routers/layout/search/phone/index.tsx +++ b/src/routers/layout/search/phone/index.tsx @@ -1,3 +1,36 @@ +import RouterNav from "@routers/layout/routernav"; +import SearchIcon from "@mui/icons-material/Search"; +import PhotoModalSearch from "./modal"; +import { useState } from "react"; export default function PhoneSearch() { // 这个只作为因子引出真实的界面，不应该承担任何搜索功能 + const [open, setModal] = useState(false); + const SearchProps = { + open, + onClose: () => { + setTimeout(() => { + setModal(false); + }, 150); + }, + }; + return ( +
+ {/* 点击这里向下拉取搜索栏 */} + +
+ +
+ 想看什么 + 点击这里·马上看到 +
+
+ +
+ ); } diff --git a/src/routers/layout/search/phone/item.tsx b/src/routers/layout/search/phone/item.tsx new file mode 100644 index 0000000..b5acf5f --- /dev/null +++ b/src/routers/layout/search/phone/item.tsx @@ -0,0 +1,111 @@ +import SearchIcon from "@mui/icons-material/Search"; +import { FC, forwardRef, useState } from "react"; +import { useBackRef } from "../pc/hooks"; +type PhoneSearchItemProps = { + defaultOpen: boolean; + inputDefaultValue: string; + onCompleteSearch: (() => void) | false; + nextCallback: () => void; + closeTitle: string; + closeValue: string; + UrlLists: { label: string; url: string }[]; +}; + +export const PhoneSearchItem = forwardRef< + HTMLInputElement, + PhoneSearchItemProps +>((props, ref) => { + const { + closeTitle, + closeValue, + inputDefaultValue, + onCompleteSearch, + nextCallback, + UrlLists, + } = props; + // todo 增加获取input值 + const [open, setOpen] = useState(props.defaultOpen); + const isActive = (label: string) => label === inputDefaultValue; + const { inputRef } = useBackRef(ref); + const handlerImgClick = (label: string) => { + if (onCompleteSearch) { + inputRef.current!.value = label; + onCompleteSearch(); + } else { + nextCallback(); + } + }; + return ( +
+ {!open && ( + + )} + {open && ( +
+
哪个标签?
+
+ + { + if (event.key === "Enter") { + onCompleteSearch && onCompleteSearch(); + } + }} + /> +
+
+ {UrlLists.map((item, index) => ( +
+ + + {item.label} + +
+ ))} +
+
+ )} +
+ ); +}); + +const CloseItem: FC<{ title: string; value: string; onClick: () => void }> = ({ + title, + value, + onClick, +}) => { + return ( +
+

{title}

+

{value}

+
+ ); +}; diff --git a/src/routers/layout/search/phone/modal.tsx b/src/routers/layout/search/phone/modal.tsx new file mode 100644 index 0000000..a372e5e --- /dev/null +++ b/src/routers/layout/search/phone/modal.tsx @@ -0,0 +1,112 @@ +import { Modal, Tab, Tabs } from "@mui/material"; +import { FC, useRef } from "react"; +import SearchIcon from "@mui/icons-material/Search"; +import { useSearchMode } from "../pc/hooks"; +import { PhoneSearchItem } from "./item"; +import { idolNameAndFaceUrls } from "./url"; +import { useURLParams } from "@utils/hooks/url"; +import { useNavigate } from "react-router-dom"; +type PhotoModalSearchProps = { + open: boolean; + onClose: () => void; +}; +export default function PhotoModalSearch(props: PhotoModalSearchProps) { + const { open, onClose } = props; + return ( + <> + + {/* 注意modal会把滚动条隐藏 */} +
+ {/* header */} +
+ + +
+ {/* content */} +
+ +
+
+ + + ); +} +type ModeComProps = { + onClose: () => void; +}; +const TagContentCom: FC = ({ onClose }) => { + const inputRef = useRef(null); + const [tag] = useURLParams(["tag"]); + const navigate = useNavigate(); + const handlerSubmit = () => { + //@ts-ignore + const value = inputRef.current!.getValue(); + navigate(`/search?tag=${value}`); + onClose(); + }; + const { searchMode } = useSearchMode(); + return ( +
+ {}} + closeTitle='标签' + closeValue={tag} + UrlLists={idolNameAndFaceUrls} + /> +
+ ); +}; + +// 选择栏 +const SearchHeader = () => { + const { searchMode, handlerChangeSearchMode } = useSearchMode(); + return ( + + + + + ); +}; +const CloseSVG: FC<{ onClose: () => void }> = ({ onClose }) => ( +
+ + + + +
+); diff --git a/src/routers/layout/search/phone/url.ts b/src/routers/layout/search/phone/url.ts new file mode 100644 index 0000000..cb5d755 --- /dev/null +++ b/src/routers/layout/search/phone/url.ts @@ -0,0 +1,13 @@ +export const yumoFaceURL = `https://i2.hdslb.com/bfs/face/139f2dbd62f9f9343c1ace6c1b49c38a630bf0c7.jpg@240w_240h_1c_1s.webp`; +export const youenFaceURL = `https://i2.hdslb.com/bfs/face/388bb9976a9957aa9370e153e43b60111ef7ae1f.jpg@240w_240h_1c_1s.webp`; +export const luzaoFaceURL = `https://i0.hdslb.com/bfs/face/5d699ce6f66ce4770092ba19fcf7caec82e8f736.jpg@240w_240h_1c_1s.webp`; +export const wanerFaceURL = `https://i1.hdslb.com/bfs/face/4d36b041654ef91a0b2f7f34ca9ade33cdbf837e.jpg@240w_240h_1c_1s.webp`; +export const minuoFaceURl = `https://i2.hdslb.com/bfs/face/3da6145e81745cabd1f79b9c61772f884e783b7e.jpg@240w_240h_1c_1s.webp`; + +export const idolNameAndFaceUrls: { label: string; url: string }[] = [ + { label: "露早", url: luzaoFaceURL }, + { label: "虞莫", url: yumoFaceURL }, + { label: "莞儿", url: wanerFaceURL }, + { label: "柚恩", url: youenFaceURL }, + { label: "米诺", url: minuoFaceURl }, +]; diff --git a/src/routers/layout/search/search.module.less b/src/routers/layout/search/search.module.less index 02cb76a..221976e 100644 --- a/src/routers/layout/search/search.module.less +++ b/src/routers/layout/search/search.module.less @@ -38,7 +38,8 @@ &::after { content: ''; - width: 64px; + width: 100%; + max-width: 64px; margin: 0 auto; height: 2px; background-color: currentColor;