Add recursive search option for folder filtering and enhance search UI

static/css/style.css

@@ -847,6 +847,9 @@ body.modal-open {
     width: 250px;
     margin-left: auto;
     flex-shrink: 0; /* 防止搜索框被压缩 */
+    display: flex;
+    align-items: center;
+    gap: 4px;
 }
 
 /* 调整搜索框样式以匹配其他控件 */
@@ -869,7 +872,7 @@ body.modal-open {
 
 .search-icon {
     position: absolute;
-    right: 12px;
+    right: calc(32px + 8px); /* 调整位置，留出toggle按钮的空间 */
     top: 50%;
     transform: translateY(-50%);
     color: oklch(var(--text-color) / 0.5);
@@ -877,6 +880,36 @@ body.modal-open {
     line-height: 1; /* 防止图标影响容器高度 */
 }
 
+.search-mode-toggle {
+    background: var(--lora-surface);
+    border: 1px solid oklch(65% 0.02 256);
+    border-radius: var(--border-radius-sm);
+    color: var(--text-color);
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.search-mode-toggle:hover {
+    background: var(--lora-accent);
+    color: white;
+}
+
+.search-mode-toggle.active {
+    background: var(--lora-accent);
+    color: white;
+}
+
+.search-mode-toggle i {
+    font-size: 0.9em;
+}
+
 .corner-controls {
     position: fixed;
     top: 20px;
@@ -1049,7 +1082,7 @@ body.modal-open {
 }
 
 .back-to-top:hover {
-    background: var(--lora-accent);
+    background: var (--lora-accent);
     color: white;
     transform: translateY(-2px);
 }

static/js/api/loraApi.js

@@ -15,8 +15,12 @@ export async function loadMoreLoras() {
             sort_by: state.sortBy
         });
         
+        // 使用 state 中的 searchManager 获取递归搜索状态
+        const isRecursiveSearch = state.searchManager?.isRecursiveSearch ?? false;
+        
         if (state.activeFolder !== null) {
             params.append('folder', state.activeFolder);
+            params.append('recursive', isRecursiveSearch.toString());
         }
 
         // Add search parameters if there's a search term
@@ -251,4 +255,4 @@ export async function refreshLoras() {
         state.loadingManager.hide();
         state.loadingManager.restoreProgressBar();
     }
-} 
+}

static/js/state/index.js

@@ -6,5 +6,6 @@ export const state = {
     activeFolder: null,
     loadingManager: null,
     observer: null,
-    previewVersions: new Map()
-}; 
+    previewVersions: new Map(),
+    searchManager: null  // 添加 searchManager
+};

static/js/utils/search.js

@@ -5,14 +5,52 @@ import { showToast } from './uiHelpers.js';
 
 export class SearchManager {
     constructor() {
+        // Initialize search manager
         this.searchInput = document.getElementById('searchInput');
+        this.searchModeToggle = document.getElementById('searchModeToggle');
         this.searchDebounceTimeout = null;
         this.currentSearchTerm = '';
         this.isSearching = false;
+        this.isRecursiveSearch = false;
+        
+        // Add this instance to state
+        state.searchManager = this;
         
         if (this.searchInput) {
             this.searchInput.addEventListener('input', this.handleSearch.bind(this));
         }
+
+        if (this.searchModeToggle) {
+            // Initialize toggle state from localStorage or default to false
+            this.isRecursiveSearch = localStorage.getItem('recursiveSearch') === 'true';
+            this.updateToggleUI();
+
+            this.searchModeToggle.addEventListener('click', () => {
+                this.isRecursiveSearch = !this.isRecursiveSearch;
+                localStorage.setItem('recursiveSearch', this.isRecursiveSearch);
+                this.updateToggleUI();
+                
+                // Rerun search if there's an active search term
+                if (this.currentSearchTerm) {
+                    this.performSearch(this.currentSearchTerm);
+                }
+            });
+        }
+    }
+
+    updateToggleUI() {
+        if (this.searchModeToggle) {
+            this.searchModeToggle.classList.toggle('active', this.isRecursiveSearch);
+            this.searchModeToggle.title = this.isRecursiveSearch 
+                ? 'Recursive folder search (including subfolders)' 
+                : 'Current folder search only';
+            
+            // Update the icon to indicate the mode
+            const icon = this.searchModeToggle.querySelector('i');
+            if (icon) {
+                icon.className = this.isRecursiveSearch ? 'fas fa-folder-tree' : 'fas fa-folder';
+            }
+        }
     }
 
     handleSearch(event) {
@@ -53,8 +91,11 @@ export class SearchManager {
             url.searchParams.set('search', searchTerm);
             url.searchParams.set('fuzzy', 'true');
 
+            // Always send folder parameter if there is an active folder
             if (state.activeFolder) {
                 url.searchParams.set('folder', state.activeFolder);
+                // Add recursive parameter when recursive search is enabled
+                url.searchParams.set('recursive', this.isRecursiveSearch.toString());
             }
 
             const response = await fetch(url);
@@ -85,4 +126,4 @@ export class SearchManager {
             state.loadingManager.hide();
         }
     }
-} 
+}