⚡ feat(custom): 添加一键清除历史记录功能

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

@@ -3,6 +3,7 @@ import HistoryToggleOffIcon from "@mui/icons-material/HistoryToggleOff";
 import TagIcon from "@mui/icons-material/Tag";
 import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
 import { Popper } from "@mui/material";
+import ClearAllIcon from "@mui/icons-material/ClearAll";
 import { Storage } from "@routers/layout/tools";
 import { useURLParams } from "@utils/hooks/url";
 import { FC, ReactElement, useEffect, useMemo, useState } from "react";
@@ -24,6 +25,7 @@ export const addPCTagHistory = (value: string) => {
     [value, ...oldHistory.filter((item) => item !== value)].slice(0, 5)
   );
 };
+const clearPCTagHistory = () => PCTagStorage.clearLocalstorage();
 const usePCTagHistory = () => {
   const local_history: renderSuggestItemLists = PCTagStorage.getLocalStorage(
     []
@@ -64,6 +66,24 @@ const useSuggestOption = (open: boolean) => {
   return [fixedOpen];
 };
 
+const HistoryTitleItem: FC<{ onClear: () => void }> = ({ onClear }) => {
+  return (
+    <>
+      <p>
+        <HistoryToggleOffIcon fontSize='inherit' />
+        历史记录
+      </p>
+      <p
+        onClick={onClear}
+        className='cursor-pointer text-sm text-gray-500 ml-2'
+      >
+        <ClearAllIcon fontSize='inherit' />
+        清除记录
+      </p>
+    </>
+  );
+};
+
 export const PCTagSuggest: FC<PCTagSuggestProps> = ({
   open,
   ClickCallback,
@@ -74,12 +94,7 @@ export const PCTagSuggest: FC<PCTagSuggestProps> = ({
   return (
     <SuggestPopper open={fixedOpen}>
       <SuggestItem
-        title={
-          <>
-            <HistoryToggleOffIcon fontSize='inherit' />
-            历史记录
-          </>
-        }
+        title={<HistoryTitleItem onClear={clearPCTagHistory} />}
         dataList={history_tag}
         feedbackMsg='暂无数据'
         clickCallBack={ClickCallback}
@@ -107,6 +122,7 @@ export const addPCNameHistory = (value: string) => {
     [value, ...oldHistory.filter((item) => item !== value)].slice(0, 5)
   );
 };
+const clearPCNameHistory = () => PCNameStorage.clearLocalstorage();
 const usePCNameHistory = () => {
   const local_history: renderSuggestItemLists = PCNameStorage.getLocalStorage(
     []
@@ -123,12 +139,7 @@ export const PCNameSuggest: FC<PCTagSuggestProps> = ({
   return (
     <SuggestPopper open={fixedOpen}>
       <SuggestItem
-        title={
-          <>
-            <HistoryToggleOffIcon fontSize='inherit' />
-            历史记录
-          </>
-        }
+        title={<HistoryTitleItem onClear={clearPCNameHistory} />}
         dataList={history_name}
         feedbackMsg='暂无数据'
         clickCallBack={ClickCallback}