feat(fe): add F3 search button and keyboard shortcut to ModelList page filter bar
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 81 KiB |
@@ -53,13 +53,33 @@ const filterModel = reactive({
|
|||||||
phase: '',
|
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(() => {
|
onMounted(() => {
|
||||||
screenState.value = 'LOADING'
|
screenState.value = 'LOADING'
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
screenState.value = 'READY'
|
screenState.value = 'READY'
|
||||||
}, 500)
|
}, 500)
|
||||||
|
window.addEventListener('keydown', handleKeyDown)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
const filteredModels = computed(() => {
|
const filteredModels = computed(() => {
|
||||||
return models.value.filter(m => {
|
return models.value.filter(m => {
|
||||||
const matchesSearch = m.name.toLowerCase().includes(filterModel.search.toLowerCase())
|
const matchesSearch = m.name.toLowerCase().includes(filterModel.search.toLowerCase())
|
||||||
@@ -123,6 +143,13 @@ const handleRetry = () => {
|
|||||||
<option value="Validate">Validate</option>
|
<option value="Validate">Validate</option>
|
||||||
<option value="Review">Review</option>
|
<option value="Review">Review</option>
|
||||||
</select>
|
</select>
|
||||||
|
<KsButton
|
||||||
|
label="🔍 조회 [F3]"
|
||||||
|
variant="primary"
|
||||||
|
size="sm"
|
||||||
|
aria-label="모델 목록 조회"
|
||||||
|
@click="handleSearchTrigger"
|
||||||
|
/>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user