feat(components): add GlobalSearch components

src/layouts/modules/global-search/components/search-modal.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { computed, ref, shallowRef } from 'vue';
+import { useRouter } from 'vue-router';
+import { onKeyStroke, useDebounceFn } from '@vueuse/core';
+import { useRouteStore } from '@/store/modules/route';
+import { useAppStore } from '@/store/modules/app';
+import { $t } from '@/locales';
+import SearchResult from './search-result.vue';
+import SearchFooter from './search-footer.vue';
+
+defineOptions({ name: 'SearchModal' });
+
+const appStore = useAppStore();
+const isMobile = computed(() => appStore.isMobile);
+const router = useRouter();
+const routeStore = useRouteStore();
+
+const keyword = ref('');
+const activePath = ref('');
+const resultOptions = shallowRef<App.Global.Menu[]>([]);
+
+const handleSearch = useDebounceFn(search, 300);
+
+const modelShow = defineModel<boolean>('show', { required: true });
+
+/** 查询 */
+function search() {
+  resultOptions.value = routeStore.searchMenus.filter(menu => {
+    const trimKeyword = keyword.value.toLocaleLowerCase().trim();
+    const title = (menu.i18nKey ? $t(menu.i18nKey) : menu.label).toLocaleLowerCase();
+    return trimKeyword && title.includes(trimKeyword);
+  });
+  activePath.value = resultOptions.value[0]?.routePath ?? '';
+}
+
+function handleClose() {
+  modelShow.value = false;
+  /** 延时处理防止用户看到某些操作 */
+  setTimeout(() => {
+    resultOptions.value = [];
+    keyword.value = '';
+  }, 200);
+}
+
+/** key up */
+function handleUp() {
+  const { length } = resultOptions.value;
+  if (length === 0) return;
+  const index = resultOptions.value.findIndex(item => item.routePath === activePath.value);
+  if (index === 0) {
+    activePath.value = resultOptions.value[length - 1].routePath;
+  } else {
+    activePath.value = resultOptions.value[index - 1].routePath;
+  }
+}
+
+/** key down */
+function handleDown() {
+  const { length } = resultOptions.value;
+  if (length === 0) return;
+  const index = resultOptions.value.findIndex(item => item.routePath === activePath.value);
+  if (index + 1 === length) {
+    activePath.value = resultOptions.value[0].routePath;
+  } else {
+    activePath.value = resultOptions.value[index + 1].routePath;
+  }
+}
+
+/** key enter */
+function handleEnter(e: Event | undefined) {
+  const { length } = resultOptions.value;
+  if (length === 0 || activePath.value === '') return;
+  e?.preventDefault();
+  handleClose();
+  router.push(activePath.value);
+}
+
+onKeyStroke('Escape', handleClose);
+onKeyStroke('Enter', handleEnter);
+onKeyStroke('ArrowUp', handleUp);
+onKeyStroke('ArrowDown', handleDown);
+</script>
+
+<template>
+  <n-modal
+    v-model:show="modelShow"
+    :segmented="{ footer: 'soft' }"
+    :closable="false"
+    preset="card"
+    auto-focus
+    footer-style="padding: 0; margin: 0"
+    class="fixed left-0 right-0"
+    :class="[isMobile ? 'size-full top-0px rounded-0' : 'w-630px top-50px']"
+    @after-leave="handleClose"
+  >
+    <n-input-group>
+      <n-input v-model:value="keyword" clearable placeholder="请输入关键词搜索" @input="handleSearch">
+        <template #prefix>
+          <icon-uil-search class="text-15px text-#c2c2c2" />
+        </template>
+      </n-input>
+      <n-button v-if="isMobile" type="primary" ghost @click="handleClose">取消</n-button>
+    </n-input-group>
+
+    <div class="mt-20px">
+      <n-empty v-if="resultOptions.length === 0" description="暂无搜索结果" />
+      <SearchResult v-else v-model:path="activePath" :options="resultOptions" @enter="handleEnter" />
+    </div>
+    <template #footer>
+      <SearchFooter v-if="!isMobile" />
+    </template>
+  </n-modal>
+</template>
+
+<style lang="scss" scoped></style>