feat(components): add GlobalSearch components

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

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { useThemeStore } from '@/store/modules/theme';
+import { $t } from '@/locales';
+
+defineOptions({ name: 'SearchResult' });
+
+interface Props {
+  options: App.Global.Menu[];
+}
+
+defineProps<Props>();
+
+interface Emits {
+  (e: 'enter'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const theme = useThemeStore();
+
+const active = defineModel<string>('path', { required: true });
+
+/** 鼠标移入 */
+async function handleMouse(item: App.Global.Menu) {
+  active.value = item.routePath;
+}
+
+function handleTo() {
+  emit('enter');
+}
+</script>
+
+<template>
+  <n-scrollbar>
+    <div class="pb-12px">
+      <template v-for="item in options" :key="item.routePath">
+        <div
+          class="mt-8px h-56px flex-y-center cursor-pointer justify-between rounded-4px bg-#e5e7eb px-14px dark:bg-dark"
+          :style="{
+            background: item.routePath === active ? theme.themeColor : '',
+            color: item.routePath === active ? '#fff' : ''
+          }"
+          @click="handleTo"
+          @mouseenter="handleMouse(item)"
+        >
+          <component :is="item.icon" />
+          <span class="ml-5px flex-1">
+            {{ (item.i18nKey && $t(item.i18nKey)) || item.label }}
+          </span>
+          <icon-ant-design-enter-outlined class="icon mr-3px p-2px text-20px" />
+        </div>
+      </template>
+    </div>
+  </n-scrollbar>
+</template>
+
+<style lang="scss" scoped></style>