diff --git a/src/components/masonry/index.tsx b/src/components/masonry/index.tsx index 5cd4871..3bbf9ea 100644 --- a/src/components/masonry/index.tsx +++ b/src/components/masonry/index.tsx @@ -24,7 +24,6 @@ export default function Masonry() { ]); useEffect(() => { fetchMoreItemsHandler(0, 20, []); - // console.log("effect"); }, [fetchMoreItemsHandler]); return (
({ label: item, value: item })); +export const pcSuggestTagLists: renderSuggestItemLists = Object.keys( + TagLabelToValueObj +).map((item) => ({ + label: item, + value: TagLabelToValueObj[item].split(".").join("+"), +})); //up列 export const pcSuggestNameLists: renderSuggestItemLists = phoneMoreNameAndFaceUrls; diff --git a/src/routers/layout/search/pc/search.tsx b/src/routers/layout/search/pc/search.tsx index d3b1768..2b1e83f 100644 --- a/src/routers/layout/search/pc/search.tsx +++ b/src/routers/layout/search/pc/search.tsx @@ -1,5 +1,4 @@ import { useSearchFocus } from "@components/proview/searchFocus"; -import HighlightOffIcon from "@mui/icons-material/HighlightOff"; import { useURLParams } from "@utils/hooks/url"; import SearchIcon from "@mui/icons-material/Search"; import styles from "../search.module.less"; @@ -7,6 +6,15 @@ import pcStyles from "./pc.module.less"; import { useBackRef, useSearchMode } from "./hooks"; import { useNavigate } from "react-router-dom"; import React, { FC, forwardRef, Fragment, ReactElement, useRef } from "react"; +import { usePopoverConfig } from "@utils/hooks/popover"; +import { + addPCNameHistory, + addPCTagHistory, + PCNameSuggest, + PCTagSuggest, +} from "./searchSuggest"; +import { InputWrapperContext } from "./context"; +import { TagValueToLabelMap } from "@utils/searchSuggestData/tag"; export default function Search() { const contentRef = useRef(null); const { focused, bind } = useSearchFocus(); @@ -79,23 +87,19 @@ const SearchButton: FC<{ onSubmit?: () => void }> = ({ onSubmit }) => { ); }; -import { usePopoverConfig } from "@utils/hooks/popover"; -import { - addPCNameHistory, - addPCTagHistory, - PCNameSuggest, - PCTagSuggest, -} from "./searchSuggest"; -import { InputWrapperContext } from "./context"; +//tag历史记录增加 +const handleAddTagHistory = (value: string) => { + const defindTag = TagValueToLabelMap.get(value.split("+").join(".")) || value; + addPCTagHistory({ label: defindTag, value }); +}; //普通搜索 const NormalSearch = () => { - const inputRef = useRef(null), - handlerFocus = () => inputRef.current?.focus(); - //为什么需要一个 + const inputRef = useRef(null); const { bind } = useSearchFocus(), { onBlur } = bind; - const [tag] = useURLParams(["tag"]); + const [tag] = useURLParams(["tag"]), + mapedTag = TagValueToLabelMap.get(tag.split(" ").join(".")) || tag; const { open, handleClick } = usePopoverConfig("target"); const navigate = useNavigate(), handlerNavigate = (value: string) => { @@ -109,7 +113,7 @@ const NormalSearch = () => { handerHistorySubmit = (value: string) => { inputRef.current!.value = value; handlerNavigate(value); - addPCTagHistory(value); + handleAddTagHistory(value); }; return (
@@ -121,7 +125,7 @@ const NormalSearch = () => { className='ml-8 mr-2 my-2 focus-within:outline-none flex-grow' placeholder='尝试搜索些啥？' autoComplete='off' - defaultValue={tag} + defaultValue={mapedTag} maxLength={20} onKeyDown={(event) => { if (event.key === "Enter") { @@ -137,7 +141,8 @@ const NormalSearch = () => { //高级搜索 const AdvanceSearch = forwardRef(function Advance(props, ref) { - const [tag, name] = useURLParams(["tag", "name"]); + const [tag, name] = useURLParams(["tag", "name"]), + mapedTag = TagValueToLabelMap.get(tag.split(" ").join(".")) || tag; const { focused, bind } = useSearchFocus(), { onBlur } = bind; const nameRef = useRef(null), @@ -157,7 +162,7 @@ const AdvanceSearch = forwardRef(function Advance(props, ref) { handlerTagHistorySubmit = (tag: string) => { tagRef.current!.value = tag; handlerNavigate(tag, getNameValue()); - addPCTagHistory(tag); + handleAddTagHistory(tag); }, handlerNameHistorySubmit = (name: string) => { nameRef.current!.value = name; @@ -195,8 +200,8 @@ const AdvanceSearch = forwardRef(function Advance(props, ref) { {/* 等待接口更新 */} {/* */} void; } & SuggestPopperProps; -const PCTagStorage = new Storage("pcTagHistorys"); -export const addPCTagHistory = (value: string) => { +type SuggestStroageType = { + label: string; + value: string; +}; +const PCTagStorage = new Storage( + "pcTagHistorys_standard" +); +export const addPCTagHistory = (item: SuggestStroageType) => { const oldHistory = PCTagStorage.getLocalStorage([]); PCTagStorage.setLocalstorage( - [value, ...oldHistory.filter((item) => item !== value)].slice(0, 5) + [item, ...oldHistory.filter((tag) => tag.label !== item.label)].slice(0, 5) ); }; const clearPCTagHistory = () => PCTagStorage.clearLocalstorage(); const usePCTagHistory = () => { const local_history: renderSuggestItemLists = PCTagStorage.getLocalStorage( [] - ).map((item) => ({ label: item, value: item })); + ); return local_history; }; @@ -210,7 +216,6 @@ const SuggestItem: FC = ({ activeValue, feedbackMsg, }) => { - const isActive = (value: string) => value === activeValue; return (
diff --git a/src/routers/layout/search/phone/modal.tsx b/src/routers/layout/search/phone/modal.tsx index 839c5b1..daf8dfd 100644 --- a/src/routers/layout/search/phone/modal.tsx +++ b/src/routers/layout/search/phone/modal.tsx @@ -72,7 +72,6 @@ const MoreContentCom: FC = ({ onClose }) => { const handlerSubmit = () => { const tag = tagInputRef.current!.value, name = nameInputRef.current!.value; - console.log({ tag, name }); navigate(`/search?tag=${tag}&name=${name}`); onClose(); }; diff --git a/src/routers/layout/search/phone/url.ts b/src/routers/layout/search/phone/url.ts index a8fdf56..0b8df3a 100644 --- a/src/routers/layout/search/phone/url.ts +++ b/src/routers/layout/search/phone/url.ts @@ -19,9 +19,43 @@ export const idolNameAndFaceUrls: NameAndFaceUrlsType = [ ]; export const lubozuFaceUrl = `https://i0.hdslb.com/bfs/face/4fb5beac7b6eff7981897176430df514b7201556.jpg@240w_240h_1c_1s.webp`; -const eoeGroupFaceUrl = `https://i0.hdslb.com/bfs/face/f0ac506bbfa4e4ce09729d424d28d2383e721ade.jpg@240w_240h_1c_1s.webp`; +const eoeGroupFaceUrl = `https://i0.hdslb.com/bfs/face/f0ac506bbfa4e4ce09729d424d28d2383e721ade.jpg@240w_240h_1c_1s.webp`, + lubozhouzuFaceUrl = `https://i2.hdslb.com/bfs/face/8c37937658e2da4fba8c7095f9eb678b4256c023.jpg@240w_240h_1c_1s.webp`; + +const extraNameAndFaceUrls: Pick< + NameAndFaceUrlsType[number], + "label" | "url" +>[] = [ + { label: "EOE组合", url: eoeGroupFaceUrl }, + { label: "哎呀米诺轴工作组", url: lubozhouzuFaceUrl }, + { + label: "EOE周报", + url: "https://i0.hdslb.com/bfs/face/6692782f35b58a693be18fad9383c4c47f2964d0.jpg@240w_240h_1c_1s.webp", + }, + { + label: "小莞熊周报", + url: "https://i2.hdslb.com/bfs/face/a8910c97dfe7e81dd75160d0ba14096d9d94568e.jpg@240w_240h_1c_1s.webp", + }, + { + label: "GOGO队周报", + url: "https://i2.hdslb.com/bfs/face/eb398793a93cdfc397ca25355c88c03305fe5083.jpg@240w_240h_1c_1s.webp", + }, + { + label: "米诺周报", + url: "https://i1.hdslb.com/bfs/face/6b63addacb87f872fd6596810b9158a2c7fe44fd.jpg@240w_240h_1c_1s.webp", + }, + { + label: "美人虞周报", + url: "https://i0.hdslb.com/bfs/face/3c82e5df2249307982fd9b06f587b5449f86a96a.jpg@240w_240h_1c_1s.webp", + }, + { + label: "柚恩周报", + url: "https://i2.hdslb.com/bfs/face/b504de6dffef09c2ab7b37d9684f874267788969.jpg@240w_240h_1c_1s.webp", + }, +]; export const phoneMoreNameAndFaceUrls: NameAndFaceUrlsType = [ { label: "录播组", url: lubozuFaceUrl, value: "哎呀米诺录播组" }, ...idolNameAndFaceUrls, { label: "EOE组合", url: eoeGroupFaceUrl, value: "EOE组合" }, + ...extraNameAndFaceUrls.map((item) => ({ ...item, value: item.label })), ]; diff --git a/src/utils/searchSuggestData/tag.tsx b/src/utils/searchSuggestData/tag.tsx new file mode 100644 index 0000000..e6cf74b --- /dev/null +++ b/src/utils/searchSuggestData/tag.tsx @@ -0,0 +1,32 @@ +/** + * tag的label和value对照表 + */ +export const TagLabelToValueObj: { [key: string]: string } = { + 莞儿: "莞儿.莞儿睡不醒.小莞熊在这里.莞儿有引力.莞儿生日快乐", + 露早: "露早.露早GOGO.GOGO队立大功！.露早的汪汪日记.露早生日快乐", + 米诺: "米诺.米诺高分少女.和米诺的对抗路日常.米诺与小恶魔的低语时刻.米诺生日快乐", + 虞莫: "虞莫.虞莫MOMO.虞与你在一起.么么莫莫宝.虞莫生日快乐", + 柚恩: "柚恩.柚恩不加糖.柚恩的蜜罐子.和柚恩的婚后生活.柚恩生日快乐", + EOE组合: "EOE.EOE的魔法盒.EOE的魔法森林", + 米哈柚: "米哈柚", + 早有虞谋: "早有虞谋", + 西米露: "西米露", + 虞香柚丝: "虞香柚丝", + 莞柚引力: "莞柚引力", + 早柚: "早柚.柚子露", + 早莞在一起: "早莞在一起", + 虞米之乡: "虞米之乡", + 虞舟唱莞: "虞舟唱莞", + 一莞米: "一莞米", +}; + +//根据tag的label搜索对应的value +export const TagLabelToValueMap = new Map(); +Object.keys(TagLabelToValueObj).forEach((key) => + TagLabelToValueMap.set(key, TagLabelToValueObj[key]) +); +//根据tag的value搜索对应的label +export const TagValueToLabelMap = new Map(); +Object.keys(TagLabelToValueObj).forEach((key) => + TagValueToLabelMap.set(TagLabelToValueObj[key], key) +);