Implement search

static/css/style.css

@@ -875,4 +875,63 @@ body.modal-open .toast-info {
 /* 使用已有的loading-spinner样式 */
 .initialization-notice .loading-spinner {
     margin-bottom: var(--space-2);
+}
+
+/* Search Container Styles */
+.controls {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    margin-bottom: var(--space-2);
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: nowrap; /* 防止内容换行 */
+    width: 100%; /* 确保占满容器宽度 */
+}
+
+.search-container {
+    position: relative;
+    width: 250px;
+    margin-left: auto;
+    flex-shrink: 0; /* 防止搜索框被压缩 */
+}
+
+/* 调整搜索框样式以匹配其他控件 */
+.search-container input {
+    width: 100%;
+    padding: 6px 32px 6px 12px;
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-sm);
+    background: var(--lora-surface);
+    color: var(--text-color);
+    font-size: 0.9em;
+    height: 32px;
+    box-sizing: border-box; /* 确保padding不会增加总宽度 */
+}
+
+.search-icon {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: oklch(var(--text-color) / 0.5);
+    pointer-events: none;
+    line-height: 1; /* 防止图标影响容器高度 */
+}
+
+@media (max-width: 768px) {
+    .actions {
+        flex-wrap: wrap;
+        gap: var(--space-1);
+    }
+    
+    .search-container {
+        width: 100%;
+        order: -1; /* 在移动端将搜索框移到顶部 */
+        margin-left: 0;
+    }
 }

static/js/api/loraApi.js

@@ -199,13 +199,17 @@ export async function replacePreview(filePath) {
     input.click();
 }
 
-function appendLoraCards(loras) {
+export function appendLoraCards(loras) {
     const grid = document.getElementById('loraGrid');
     const sentinel = document.getElementById('scroll-sentinel');
     
     loras.forEach(lora => {
         const card = createLoraCard(lora);
-        grid.insertBefore(card, sentinel);
+        if (sentinel) {
+            grid.insertBefore(card, sentinel);
+        } else {
+            grid.appendChild(card);
+        }
     });
 }
 

static/js/main.js

@@ -7,6 +7,7 @@ import { loadMoreLoras, fetchCivitai, deleteModel, replacePreview, resetAndReloa
 import { showToast, lazyLoadImages, restoreFolderFilter, initTheme, toggleTheme, toggleFolder, copyTriggerWord } from './utils/uiHelpers.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { showDeleteModal, confirmDelete, closeDeleteModal } from './utils/modalUtils.js';
+import { SearchManager } from './utils/search.js';
 
 // Export all functions that need global access
 window.loadMoreLoras = loadMoreLoras;
@@ -33,20 +34,7 @@ document.addEventListener('DOMContentLoaded', () => {
     restoreFolderFilter();
     initializeLoraCards();
     initTheme();
-
-    // Search handler
-    const searchHandler = debounce(term => {
-        document.querySelectorAll('.lora-card').forEach(card => {
-            card.style.display = [card.dataset.name, card.dataset.folder]
-                .some(text => text.toLowerCase().includes(term)) 
-                ? 'block' 
-                : 'none';
-        });
-    }, 250);
-
-    document.getElementById('searchInput')?.addEventListener('input', e => {
-        searchHandler(e.target.value.toLowerCase());
-    });
+    window.searchManager = new SearchManager();
 });
 
 // Initialize event listeners

static/js/utils/search.js

@@ -0,0 +1,87 @@
+import { appendLoraCards } from '../api/loraApi.js';
+import { state } from '../state/index.js';
+import { resetAndReload } from '../api/loraApi.js';
+import { showToast } from './uiHelpers.js';
+
+export class SearchManager {
+    constructor() {
+        this.searchInput = document.getElementById('searchInput');
+        this.searchDebounceTimeout = null;
+        this.currentSearchTerm = '';
+        this.isSearching = false;
+        
+        if (this.searchInput) {
+            this.searchInput.addEventListener('input', this.handleSearch.bind(this));
+        }
+    }
+
+    handleSearch(event) {
+        if (this.searchDebounceTimeout) {
+            clearTimeout(this.searchDebounceTimeout);
+        }
+
+        this.searchDebounceTimeout = setTimeout(async () => {
+            const searchTerm = event.target.value.trim().toLowerCase();
+            
+            if (searchTerm !== this.currentSearchTerm && !this.isSearching) {
+                this.currentSearchTerm = searchTerm;
+                await this.performSearch(searchTerm);
+            }
+        }, 250);
+    }
+
+    async performSearch(searchTerm) {
+        const grid = document.getElementById('loraGrid');
+        
+        if (!searchTerm) {
+            state.currentPage = 1;
+            await resetAndReload();
+            return;
+        }
+
+        try {
+            this.isSearching = true;
+            state.loadingManager.showSimpleLoading('Searching...');
+
+            state.currentPage = 1;
+            state.hasMore = true;
+
+            const url = new URL('/api/loras', window.location.origin);
+            url.searchParams.set('page', '1');
+            url.searchParams.set('page_size', '20');
+            url.searchParams.set('sort_by', state.sortBy);
+            url.searchParams.set('search', searchTerm);
+
+            if (state.activeFolder) {
+                url.searchParams.set('folder', state.activeFolder);
+            }
+
+            const response = await fetch(url);
+            
+            if (!response.ok) {
+                throw new Error('Search failed');
+            }
+
+            const data = await response.json();
+            
+            if (searchTerm === this.currentSearchTerm) {
+                grid.innerHTML = '';
+                
+                if (data.items.length === 0) {
+                    grid.innerHTML = '<div class="no-results">No matching loras found</div>';
+                    state.hasMore = false;
+                } else {
+                    appendLoraCards(data.items);
+                    state.hasMore = state.currentPage < data.total_pages;
+                    state.currentPage++;
+                }
+            }
+        } catch (error) {
+            console.error('Search error:', error);
+            showToast('Search failed', 'error');
+        } finally {
+            this.isSearching = false;
+            state.loadingManager.hide();
+        }
+    }
+}