mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-25 00:39:49 +00:00
[feat] Add search functionality to Media Asset Panel (#6691)
## Summary Add search functionality to the Media Asset Panel, allowing users to search for assets by filename. ## Changes ### 1. Search Feature - Added SearchBox component to AssetsSidebarTab header - Implemented fuzzy search using Fuse.js - Works in both Imported and Generated tabs - Search also available in folder view ### 2. New Composable: `useMediaAssetFiltering` - Location: `src/platform/assets/composables/useMediaAssetFiltering.ts` - Encapsulates search logic in a reusable composable - Extensible structure for future filter and sort features - Debounced search (50ms) ### 3. UX Improvements - Search query automatically clears when switching tabs - Search query automatically clears when exiting folder view ## Testing - ✅ TypeScript type check passed - ✅ ESLint/Oxlint passed - ✅ Lint-staged pre-commit hooks passed ## Modified Files - `src/components/sidebar/tabs/AssetsSidebarTab.vue` - Added SearchBox - `src/platform/assets/composables/useMediaAssetFiltering.ts` - New file - `src/locales/en/main.json` - Added i18n key (`sideToolbar.searchAssets`) ## Future Plans - Add filter functionality (file type, date, etc.) - Add sort functionality - Switch to server-side search for OSS/Cloud (after Asset API and Job API release) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6691-feat-Add-search-functionality-to-Media-Asset-Panel-2ab6d73d3650817b8b95f3450179524f) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
37
src/platform/assets/composables/useMediaAssetFiltering.ts
Normal file
37
src/platform/assets/composables/useMediaAssetFiltering.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
import Fuse from 'fuse.js'
|
||||
import { computed, ref } from 'vue'
|
||||
import type { Ref } from 'vue'
|
||||
|
||||
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
|
||||
|
||||
/**
|
||||
* Media Asset Filtering composable
|
||||
* Manages search, filter, and sort for media assets
|
||||
*/
|
||||
export function useMediaAssetFiltering(assets: Ref<AssetItem[]>) {
|
||||
const searchQuery = ref('')
|
||||
const debouncedSearchQuery = refDebounced(searchQuery, 50)
|
||||
|
||||
const fuseOptions = {
|
||||
keys: ['name'],
|
||||
threshold: 0.4,
|
||||
includeScore: true
|
||||
}
|
||||
|
||||
const fuse = computed(() => new Fuse(assets.value, fuseOptions))
|
||||
|
||||
const filteredAssets = computed(() => {
|
||||
if (!debouncedSearchQuery.value.trim()) {
|
||||
return assets.value
|
||||
}
|
||||
|
||||
const results = fuse.value.search(debouncedSearchQuery.value)
|
||||
return results.map((result) => result.item)
|
||||
})
|
||||
|
||||
return {
|
||||
searchQuery,
|
||||
filteredAssets
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user