From 671f498f16b8043ffd2f3497cf052e3b5811513d Mon Sep 17 00:00:00 2001
From: shinya <kobayashi_shinya@outlook.com>
Date: Thu, 21 Aug 2025 13:07:18 +0800
Subject: [PATCH] feat: add clear search input button

---
 src/app/search/page.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 2492d5f..3a19f5a 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -633,9 +633,25 @@ function SearchPageClient() {
                 onChange={handleInputChange}
                 onFocus={handleInputFocus}
                 placeholder='搜索电影、电视剧...'
-                className='w-full h-12 rounded-lg bg-gray-50/80 py-3 pl-10 pr-4 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-400 focus:bg-white border border-gray-200/50 shadow-sm dark:bg-gray-800 dark:text-gray-300 dark:placeholder-gray-500 dark:focus:bg-gray-700 dark:border-gray-700'
+                className='w-full h-12 rounded-lg bg-gray-50/80 py-3 pl-10 pr-12 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-400 focus:bg-white border border-gray-200/50 shadow-sm dark:bg-gray-800 dark:text-gray-300 dark:placeholder-gray-500 dark:focus:bg-gray-700 dark:border-gray-700'
               />
 
+              {/* 清除按钮 */}
+              {searchQuery && (
+                <button
+                  type='button'
+                  onClick={() => {
+                    setSearchQuery('');
+                    setShowSuggestions(false);
+                    document.getElementById('searchInput')?.focus();
+                  }}
+                  className='absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors dark:text-gray-500 dark:hover:text-gray-300'
+                  aria-label='清除搜索内容'
+                >
+                  <X className='h-5 w-5' />
+                </button>
+              )}
+
               {/* 搜索建议 */}
               <SearchSuggestions
                 query={searchQuery}