⚡ feat(custom): pc端搜索优化以及增加多数tag和名字

ISSUES CLOSED: #42
EOEFANS · Mar 5, 2023 · 5b711c5 · 5b711c5
1 parent b1a33ac
commit 5b711c5
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 46 deletions.
diff --git 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 (
     <div

diff --git a/src/routers/layout/search/pc/data.ts b/src/routers/layout/search/pc/data.ts
@@ -1,28 +1,16 @@
+import { TagLabelToValueObj } from "@utils/searchSuggestData/tag";
 import { phoneMoreNameAndFaceUrls } from "../phone/url";
 
 export type renderSuggestItemLists = { label: string; value: string }[];
 
 //tag列
-export const pcSuggestTagLists: renderSuggestItemLists = [
-  "莞儿睡不醒",
-  "露早GOGO",
-  "米诺高分少女",
-  "虞莫MOMO",
-  "柚恩不加糖",
-  "EOE组合",
-  "早莞在一起",
-  "莞柚引力",
-  "一莞米",
-  "虞舟唱莞",
-  "早柚",
-  "西米露",
-  "早有虞谋",
-  "米哈柚",
-  "虞香柚丝",
-  "米虞说的道理",
-  "虞米之乡",
-].map((item) => ({ 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
@@ -1,12 +1,20 @@
 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";
 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<HTMLDivElement>(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<HTMLInputElement>(null),
-    handlerFocus = () => inputRef.current?.focus();
-  //为什么需要一个
+  const inputRef = useRef<HTMLInputElement>(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<HTMLInputElement>("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 (
     <div className='flex-grow flex' onClick={handleClick}>
@@ -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<HTMLInputElement>(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) {
       {/* 等待接口更新 */}
       {/* <AdvanceSearchItem title={"标题"} inputDefaultValue={} /> */}
       <AdvanceSearchLastItem
-        title={focused ? "tag" : tag || "tag"}
-        inputDefaultValue={tag}
+        title={focused ? "tag" : mapedTag || "tag"}
+        inputDefaultValue={mapedTag}
         ref={tagRef}
         onSubmit={handlerSubmit}
         clickCallback={tagItemCallback}

diff --git a/src/routers/layout/search/pc/searchSuggest.tsx b/src/routers/layout/search/pc/searchSuggest.tsx
@@ -18,18 +18,24 @@ type PCTagSuggestProps = {
   ClickCallback: (value: string) => void;
 } & SuggestPopperProps;
 
-const PCTagStorage = new Storage<string[]>("pcTagHistorys");
-export const addPCTagHistory = (value: string) => {
+type SuggestStroageType = {
+  label: string;
+  value: string;
+};
+const PCTagStorage = new Storage<SuggestStroageType[]>(
+  "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<SuggestItemProps> = ({
   activeValue,
   feedbackMsg,
 }) => {
-  const isActive = (value: string) => value === activeValue;
   return (
     <section className='mb-6'>
       <header className='flex items-center gap-1 mb-6 text-sm text-gray-900 font-extrabold'>

diff --git a/src/routers/layout/search/phone/modal.tsx b/src/routers/layout/search/phone/modal.tsx
@@ -72,7 +72,6 @@ const MoreContentCom: FC<ModeComProps> = ({ 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
@@ -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
@@ -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<string, string>();
+Object.keys(TagLabelToValueObj).forEach((key) =>
+  TagLabelToValueMap.set(key, TagLabelToValueObj[key])
+);
+//根据tag的value搜索对应的label
+export const TagValueToLabelMap = new Map<string, string>();
+Object.keys(TagLabelToValueObj).forEach((key) =>
+  TagValueToLabelMap.set(TagLabelToValueObj[key], key)
+);