From 1586be52bfc9a036a1e085b227da5c73c2ddb19c Mon Sep 17 00:00:00 2001
From: HexWarrior6 <3083512469@qq.com>
Date: Fri, 14 Nov 2025 13:00:25 +0800
Subject: [PATCH] feat(search-page): optimize search history styling and add
 delete functionality

---
 frontend/src/components/SearchArticles.tsx | 32 ++++++++--
 frontend/src/styles/SearchPage.module.scss | 72 ++++++++++++++++++----
 2 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/SearchArticles.tsx b/frontend/src/components/SearchArticles.tsx
index 9fbbad9..56e3690 100644
--- a/frontend/src/components/SearchArticles.tsx
+++ b/frontend/src/components/SearchArticles.tsx
@@ -114,8 +114,8 @@ const SearchArticles: React.FC = () => {
     if (keywords.trim()) {
       setSearchHistory(prev => {
         const newHistory = prev.filter(item => item.toLowerCase() !== keywords.trim().toLowerCase());
-        // Limit history to 10 items
-        return [keywords.trim(), ...newHistory].slice(0, 10);
+        // Limit history to 5 items to match the UI
+        return [keywords.trim(), ...newHistory].slice(0, 5);
       });
     }
 
@@ -269,14 +269,24 @@ const SearchArticles: React.FC = () => {
                             </button>
                           </div>
                           <ul className={styles.historyList}>
-                            {searchHistory.map((item, index) => (
+                            {searchHistory.slice(0, 5).map((item, index) => (  // Only show first 5 items
                               <li
                                 key={index}
                                 className={styles.historyItem}
                                 onClick={() => handleHistoryItemClick(item)}
                               >
-                                <span className={styles.historyIcon}>🕒</span>
                                 <span className={styles.historyText}>{item}</span>
+                                <button
+                                  className={styles.removeHistoryButton}
+                                  onClick={(e) => {
+                                    e.stopPropagation(); // Prevent triggering the parent onClick
+                                    // Filter by the actual item value, not by index, to handle removal correctly
+                                    setSearchHistory(prev => prev.filter(historyItem => historyItem !== item));
+                                  }}
+                                  aria-label={`Remove ${item} from history`}
+                                >
+                                  ×
+                                </button>
                               </li>
                             ))}
                           </ul>
@@ -328,14 +338,24 @@ const SearchArticles: React.FC = () => {
                         </button>
                       </div>
                       <ul className={styles.historyList}>
-                        {searchHistory.map((item, index) => (
+                        {searchHistory.slice(0, 5).map((item, index) => (  // Only show first 5 items
                           <li
                             key={index}
                             className={styles.historyItem}
                             onClick={() => handleHistoryItemClick(item)}
                           >
-                            <span className={styles.historyIcon}>🕒</span>
                             <span className={styles.historyText}>{item}</span>
+                            <button
+                              className={styles.removeHistoryButton}
+                              onClick={(e) => {
+                                e.stopPropagation(); // Prevent triggering the parent onClick
+                                // Filter by the actual item value, not by index, to handle removal correctly
+                                setSearchHistory(prev => prev.filter(historyItem => historyItem !== item));
+                              }}
+                              aria-label={`Remove ${item} from history`}
+                            >
+                              ×
+                            </button>
                           </li>
                         ))}
                       </ul>
diff --git a/frontend/src/styles/SearchPage.module.scss b/frontend/src/styles/SearchPage.module.scss
index b7cfd70..f35907b 100644
--- a/frontend/src/styles/SearchPage.module.scss
+++ b/frontend/src/styles/SearchPage.module.scss
@@ -185,27 +185,30 @@
   border-radius: 8px;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   z-index: 1000; /* Higher z-index to appear above parent */
-  max-height: 300px;
+  max-height: 120px; /* Reduced height to ~2/3 of original, account for header and one line */
   overflow-y: auto;
+  min-width: 300px; /* Ensure minimum width for horizontal layout */
 }
 
 .historyHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem; /* Reduced padding */
   border-bottom: 1px solid #e5e7eb;
   font-weight: 600;
   color: #374151;
   background-color: #f9fafb;
   border-radius: 8px 8px 0 0;
+  font-size: 0.875rem; /* Slightly smaller font */
 }
 
 .noHistoryMessage {
-  padding: 1rem;
+  padding: 0.75rem;
   text-align: center;
   color: #6b7280;
   font-style: italic;
+  font-size: 0.875rem; /* Match the header font size */
 }
 
 .clearHistoryButton {
@@ -213,8 +216,8 @@
   border: none;
   color: #3b82f6;
   cursor: pointer;
-  font-size: 0.875rem;
-  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem; /* Smaller font */
+  padding: 0.125rem 0.25rem; /* Reduced padding */
   border-radius: 4px;
 
   &:hover {
@@ -225,24 +228,67 @@
 .historyList {
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: 0.5rem; /* Reduced from 0.75rem */
+  display: flex;
+  flex-wrap: nowrap; /* Only allow one line */
+  gap: 0.5rem;
+  overflow-x: auto; /* Allow horizontal scrolling if needed */
+  overflow-y: hidden;
+  max-height: 40px; /* Restrict to one line */
+  /* Add a subtle gradient to indicate scrollable content */
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #c5c5c5;
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #a0a0a0;
+  }
 }
 
 .historyItem {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem; /* Reduced padding */
   cursor: pointer;
-  border-bottom: 1px solid #f3f4f6;
+  background-color: #f3f4f6;
+  border-radius: 20px; /* Pill shape */
   transition: background-color 0.15s;
+  font-size: 0.8125rem; /* Slightly smaller font */
+  border: 1px solid #d1d5db;
 
   &:hover {
-    background-color: #f9fafb;
+    background-color: #e5e7eb;
   }
+}
 
-  &:last-child {
-    border-bottom: none;
+.removeHistoryButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: none;
+  background-color: #9ca3af; /* Gray background */
+  color: white;
+  cursor: pointer;
+  font-size: 10px;
+  line-height: 1;
+  padding: 0;
+
+  &:hover {
+    background-color: #6b7280; /* Darker gray on hover */
   }
 }