feat(fe): add F3 search button and keyboard shortcut to ModelList page filter bar

This commit is contained in:
2026-08-15 22:25:12 +09:00
parent fe96bae516
commit 135d0fdded
2 changed files with 27 additions and 0 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 81 KiB

@@ -53,13 +53,33 @@ const filterModel = reactive({
phase: '',
})
const isSearching = ref(false)
const handleSearchTrigger = () => {
isSearching.value = true
screenState.value = 'LOADING'
setTimeout(() => {
screenState.value = 'READY'
isSearching.value = false
}, 300)
}
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'F3') {
e.preventDefault()
handleSearchTrigger()
}
}
onMounted(() => {
screenState.value = 'LOADING'
setTimeout(() => {
screenState.value = 'READY'
}, 500)
window.addEventListener('keydown', handleKeyDown)
})
const filteredModels = computed(() => {
return models.value.filter(m => {
const matchesSearch = m.name.toLowerCase().includes(filterModel.search.toLowerCase())
@@ -123,6 +143,13 @@ const handleRetry = () => {
<option value="Validate">Validate</option>
<option value="Review">Review</option>
</select>
<KsButton
label="🔍 조회 [F3]"
variant="primary"
size="sm"
aria-label="모델 목록 조회"
@click="handleSearchTrigger"
/>
</section>
</template>