From 071b979c24e23a7b9a8f33f3829d93ee6bd79a34 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Sun, 16 Feb 2025 08:03:24 +0800
Subject: [PATCH] Add search clear button

---
 static/css/style.css               | 28 +++++++++++++++++++++--
 static/js/utils/search.js          | 36 ++++++++++++++++++++++++++++++
 templates/components/controls.html |  3 ++-
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 8005dfd5..4ee9dc8a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -854,7 +854,7 @@ body.modal-open {
 /* 调整搜索框样式以匹配其他控件 */
 .search-container input {
     width: 100%;
-    padding: 6px 32px 6px 12px;
+    padding: 6px 40px 6px 12px; /* 减小右侧padding */
     border: 1px solid oklch(65% 0.02 256); /* 更深的边框颜色，提高对比度 */
     border-radius: var(--border-radius-sm);
     background: var(--lora-surface);
@@ -871,7 +871,7 @@ body.modal-open {
 
 .search-icon {
     position: absolute;
-    right: calc(32px + 8px); /* 调整位置，留出toggle按钮的空间 */
+    right: 40px; /* 调整到toggle按钮左侧 */
     top: 50%;
     transform: translateY(-50%);
     color: oklch(var(--text-color) / 0.5);
@@ -879,6 +879,30 @@ body.modal-open {
     line-height: 1; /* 防止图标影响容器高度 */
 }
 
+/* 修改清空按钮样式 */
+.search-clear {
+    position: absolute;
+    right: 65px; /* 放到search-icon左侧 */
+    top: 50%;
+    transform: translateY(-50%);
+    color: oklch(var(--text-color) / 0.5);
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 4px 8px; /* 增加点击区域 */
+    display: none; /* 默认隐藏 */
+    line-height: 1;
+    transition: color 0.2s ease;
+}
+
+.search-clear:hover {
+    color: var(--lora-accent);
+}
+
+.search-clear.visible {
+    display: block;
+}
+
 .search-mode-toggle {
     background: var(--lora-surface);
     border: 1px solid oklch(65% 0.02 256);
diff --git a/static/js/utils/search.js b/static/js/utils/search.js
index be02d92a..682f0577 100644
--- a/static/js/utils/search.js
+++ b/static/js/utils/search.js
@@ -13,11 +13,18 @@ export class SearchManager {
         this.isSearching = false;
         this.isRecursiveSearch = false;
         
+        // Add clear button
+        this.createClearButton();
+        
         // Add this instance to state
         state.searchManager = this;
         
         if (this.searchInput) {
             this.searchInput.addEventListener('input', this.handleSearch.bind(this));
+            // Update clear button visibility on input
+            this.searchInput.addEventListener('input', () => {
+                this.updateClearButtonVisibility();
+            });
         }
 
         if (this.searchModeToggle) {
@@ -38,6 +45,35 @@ export class SearchManager {
         }
     }
 
+    createClearButton() {
+        // Create clear button
+        const clearButton = document.createElement('button');
+        clearButton.className = 'search-clear';
+        clearButton.innerHTML = '<i class="fas fa-times"></i>';
+        clearButton.title = 'Clear search';
+        
+        // Add click handler
+        clearButton.addEventListener('click', () => {
+            this.searchInput.value = '';
+            this.currentSearchTerm = '';
+            this.updateClearButtonVisibility();
+            resetAndReload();
+        });
+        
+        // Insert after search input
+        this.searchInput.parentNode.appendChild(clearButton);
+        this.clearButton = clearButton;
+        
+        // Set initial visibility
+        this.updateClearButtonVisibility();
+    }
+
+    updateClearButtonVisibility() {
+        if (this.clearButton) {
+            this.clearButton.classList.toggle('visible', this.searchInput.value.length > 0);
+        }
+    }
+
     updateToggleUI() {
         if (this.searchModeToggle) {
             this.searchModeToggle.classList.toggle('active', this.isRecursiveSearch);
diff --git a/templates/components/controls.html b/templates/components/controls.html
index 6771f4a8..455ac226 100644
--- a/templates/components/controls.html
+++ b/templates/components/controls.html
@@ -30,10 +30,11 @@
         </div>
         <div class="search-container">
             <input type="text" id="searchInput" placeholder="Search models..." />
+            <!-- 清空按钮将由JavaScript动态添加到这里 -->
+            <i class="fas fa-search search-icon"></i>
             <button class="search-mode-toggle" id="searchModeToggle" title="Toggle recursive search in folders">
                 <i class="fas fa-folder"></i>
             </button>
-            <i class="fas fa-search search-icon"></i>
         </div>
     </div>
 </div>
\ No newline at end of file