From cc345423c36f403707a757de926468e09d17f756 Mon Sep 17 00:00:00 2001
From: KickCashew <h1687204657@163.com>
Date: Sun, 2 Jun 2024 20:52:46 +0800
Subject: [PATCH] feat: Add keyboard shortcuts for global search functionality

---
 src/App.vue                                 |  3 ++
 src/layouts/modules/global-search/index.vue | 23 ++++++++++++++
 src/utils/event-bus.ts                      | 34 +++++++++++++++++++++
 src/utils/keyboard-shortcut.ts              | 31 +++++++++++++++++++
 4 files changed, 91 insertions(+)
 create mode 100644 src/utils/event-bus.ts
 create mode 100644 src/utils/keyboard-shortcut.ts

diff --git a/src/App.vue b/src/App.vue
index 22353307..1243f0ef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import { NConfigProvider, darkTheme } from 'naive-ui';
 import { useAppStore } from './store/modules/app';
 import { useThemeStore } from './store/modules/theme';
 import { naiveDateLocales, naiveLocales } from './locales/naive';
+import { useKeyboardShortcuts } from './utils/keyboard-shortcut';
 
 defineOptions({
   name: 'App'
@@ -21,6 +22,8 @@ const naiveLocale = computed(() => {
 const naiveDateLocale = computed(() => {
   return naiveDateLocales[appStore.locale];
 });
+
+useKeyboardShortcuts();
 </script>
 
 <template>
diff --git a/src/layouts/modules/global-search/index.vue b/src/layouts/modules/global-search/index.vue
index 95c2a7b1..04884bc3 100644
--- a/src/layouts/modules/global-search/index.vue
+++ b/src/layouts/modules/global-search/index.vue
@@ -1,11 +1,34 @@
 <script lang="ts" setup>
 import { useBoolean } from '@sa/hooks';
+import { onMounted, onUnmounted } from 'vue';
 import { $t } from '@/locales';
+import { useEventBus } from '@/utils/event-bus';
+import { useAppStore } from '@/store/modules/app';
 import SearchModal from './components/search-modal.vue';
 
 defineOptions({ name: 'GlobalSearch' });
 
 const { bool: show, toggle } = useBoolean();
+
+const eventBus = useEventBus();
+
+const appStore = useAppStore();
+
+const checkShow = () => {
+  if (show.value) return;
+  if (appStore.themeDrawerVisible) {
+    appStore.closeThemeDrawer();
+  }
+  toggle();
+};
+
+onMounted(() => {
+  eventBus.on('searchShortcutKey', checkShow);
+});
+
+onUnmounted(() => {
+  eventBus.off('searchShortcutKey', checkShow);
+});
 </script>
 
 <template>
diff --git a/src/utils/event-bus.ts b/src/utils/event-bus.ts
new file mode 100644
index 00000000..9da2b9c7
--- /dev/null
+++ b/src/utils/event-bus.ts
@@ -0,0 +1,34 @@
+import { reactive } from 'vue';
+
+type EventCallback = (...args: any[]) => void;
+
+interface EventBus {
+  on(event: string, callback: EventCallback): void;
+  off(event: string, callback: EventCallback): void;
+  emit(event: string, ...args: any[]): void;
+}
+
+const eventBus = reactive<{
+  events: { [key: string]: EventCallback[] };
+}>({
+  events: {}
+});
+
+export const useEventBus = (): EventBus => {
+  return {
+    on(event: string, callback: EventCallback) {
+      if (!eventBus.events[event]) {
+        eventBus.events[event] = [];
+      }
+      eventBus.events[event].push(callback);
+    },
+    off(event: string, callback: EventCallback) {
+      if (!eventBus.events[event]) return;
+      eventBus.events[event] = eventBus.events[event].filter(cb => cb !== callback);
+    },
+    emit(event: string, ...args: any[]) {
+      if (!eventBus.events[event]) return;
+      eventBus.events[event].forEach(callback => callback(...args));
+    }
+  };
+};
diff --git a/src/utils/keyboard-shortcut.ts b/src/utils/keyboard-shortcut.ts
new file mode 100644
index 00000000..6b0e01d3
--- /dev/null
+++ b/src/utils/keyboard-shortcut.ts
@@ -0,0 +1,31 @@
+import { onMounted, onUnmounted } from 'vue';
+import { useEventBus } from '@/utils/event-bus';
+
+type ShortcutHandler = (event: KeyboardEvent) => void;
+
+const useKeyboardShortcuts = () => {
+  const eventBus = useEventBus();
+
+  const shortcuts: { [key: string]: ShortcutHandler } = {
+    k: (event: KeyboardEvent) => {
+      event.preventDefault();
+      eventBus.emit('searchShortcutKey');
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.ctrlKey && shortcuts[event.key]) {
+      shortcuts[event.key](event);
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener('keydown', handleKeyDown);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeyDown);
+  });
+};
+
+export { useKeyboardShortcuts };