AnimationManager/admin/js/resource-manager/search-bar.js

// 搜索栏模块（复制自 client/js/disk/search-bar.js）

class ResourceManagerSearchBar {
    constructor(options = {}) {
        this.input = options.input;
        this.clearButton = options.clearButton;
        this.fileList = options.fileList;
        this.emptyState = options.emptyState;
        this.getResources = options.getResources || (() => []);
        this.renderAll = options.renderAll || (() => {});
        this.createFileItem = options.createFileItem || (() => null);
        this.noResultMessage = options.noResultMessage || '没有找到匹配的文件';
        
        this.isSearching = false;
        
        this.init();
    }

    init() {
        if (!this.input) return;
        
        this.input.addEventListener('input', () => this.handleSearch());
        this.input.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                this.clear();
            }
        });
        
        if (this.clearButton) {
            this.clearButton.addEventListener('click', () => this.clear());
        }
    }

    async handleSearch() {
        const keyword = this.input.value.trim().toLowerCase();
        
        if (!keyword) {
            this.clear({ noRender: false });
            return;
        }
        
        this.isSearching = true;
        this.showClearButton();
        
        // 获取资源列表（可能是异步的）
        let resources = this.getResources();
        if (resources instanceof Promise) {
            resources = await resources;
        }
        
        // 过滤匹配的资源
        const filtered = resources.filter(resource => {
            const name = (resource.name || '').toLowerCase();
            return name.includes(keyword);
        });
        
        this.renderSearchResults(filtered);
    }

    renderSearchResults(resources) {
        if (!this.fileList) return;
        
        this.fileList.innerHTML = '';
        
        if (resources.length === 0) {
            if (this.emptyState) {
                this.emptyState.classList.add('show');
                const p = this.emptyState.querySelector('p');
                if (p) p.textContent = this.noResultMessage;
            }
            return;
        }
        
        if (this.emptyState) {
            this.emptyState.classList.remove('show');
        }
        
        resources.forEach(resource => {
            const item = this.createFileItem(resource);
            if (item) {
                this.fileList.appendChild(item);
            }
        });
    }

    clear(options = {}) {
        const { noRender = false } = options;
        
        this.input.value = '';
        this.isSearching = false;
        this.hideClearButton();
        
        if (!noRender) {
            this.renderAll();
        }
    }

    showClearButton() {
        if (this.clearButton) {
            this.clearButton.style.display = 'flex';
        }
    }

    hideClearButton() {
        if (this.clearButton) {
            this.clearButton.style.display = 'none';
        }
    }
}