feat(10-09): add global keydown handler to App.vue — /, Escape, U, N shortcuts live
- Add routeViewRef = ref(null) and bind to <router-view ref="routeViewRef"> - Add onKeydown handler: guards INPUT/TEXTAREA/SELECT/contenteditable; routes / → focusSearch, Escape → clearSearch, U/u → triggerUpload, N/n → startNewFolder - Chain document.addEventListener on onMounted, removeEventListener on onUnmounted - Add double optional chaining (?.) in StorageBrowser.triggerUpload and focusSearch so stubs don't throw in tests - 9 keyboard shortcut tests GREEN; full suite 190 passing 0 failures
This commit is contained in:
+28
-3
@@ -3,14 +3,14 @@
|
||||
<div v-else class="flex h-screen overflow-hidden">
|
||||
<AppSidebar />
|
||||
<main class="flex-1 overflow-y-auto">
|
||||
<router-view />
|
||||
<router-view ref="routeViewRef" />
|
||||
</main>
|
||||
</div>
|
||||
<ToastContainer />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import AppSidebar from './components/layout/AppSidebar.vue'
|
||||
import AuthLayout from './layouts/AuthLayout.vue'
|
||||
@@ -19,5 +19,30 @@ import { useTopicsStore } from './stores/topics.js'
|
||||
|
||||
const route = useRoute()
|
||||
const topicsStore = useTopicsStore()
|
||||
onMounted(() => topicsStore.fetchTopics())
|
||||
const routeViewRef = ref(null)
|
||||
|
||||
function onKeydown(e) {
|
||||
const tag = document.activeElement?.tagName
|
||||
if (['INPUT', 'TEXTAREA', 'SELECT'].includes(tag) || document.activeElement?.isContentEditable) return
|
||||
|
||||
if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
|
||||
e.preventDefault()
|
||||
routeViewRef.value?.focusSearch?.()
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
routeViewRef.value?.clearSearch?.()
|
||||
}
|
||||
if (e.key === 'u' || e.key === 'U') {
|
||||
routeViewRef.value?.triggerUpload?.()
|
||||
}
|
||||
if (e.key === 'n' || e.key === 'N') {
|
||||
routeViewRef.value?.startNewFolder?.()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
topicsStore.fetchTopics()
|
||||
document.addEventListener('keydown', onKeydown)
|
||||
})
|
||||
onUnmounted(() => document.removeEventListener('keydown', onKeydown))
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user