From 6768cdea0588478b0f0048676c8eb9d37dc61696 Mon Sep 17 00:00:00 2001
From: wangding <857299269.com>
Date: Mon, 29 May 2023 11:05:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=B7=AF=E7=94=B1=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           |  3 ++
 src/components/RouterSearch/index.vue | 76 +++++++++++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 src/components/RouterSearch/index.vue

diff --git a/src/App.vue b/src/App.vue
index 75edd24f..c40f767e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,8 @@ import { isDark } from '@/utils/is'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import routerSearch from '@/components/RouterSearch'
+
 
 const { getPrefixCls } = useDesign()
 const prefixCls = getPrefixCls('app')
@@ -24,6 +26,7 @@ setDefaultTheme()
 <template>
   <ConfigGlobal :size="currentSize">
     <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
+    <routerSearch/>
   </ConfigGlobal>
 </template>
 <style lang="scss">
diff --git a/src/components/RouterSearch/index.vue b/src/components/RouterSearch/index.vue
new file mode 100644
index 00000000..0f984ef7
--- /dev/null
+++ b/src/components/RouterSearch/index.vue
@@ -0,0 +1,76 @@
+<template>
+    <ElDialog v-model="showSearch" :show-close="false" title="菜单搜索">
+        <el-select
+            filterable
+            :reserve-keyword="false"
+            remote
+            placeholder="请输入菜单内容"
+            :remote-method="remoteMethod"
+            style="width: 100%;"
+            @change="handleChange"
+        >
+            <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+            />
+        </el-select>
+    </ElDialog>
+</template>
+
+<script setup lang="ts">
+const router = useRouter() // 路由对象
+const showSearch = ref(false) // 是否显示弹框
+const value:Ref = ref('') // 用户输入的值
+
+const routers = router.getRoutes() // 路由对象
+const options = computed(() => { // 提示选项
+    if(!value.value) {
+        return []
+    }
+    const list = routers.filter((item:any) => {
+        if(item.meta.title?.indexOf(value.value) > -1  || item.path.indexOf(value.value) > -1) {
+            return true
+        }
+    })
+    return list.map((item) => {
+        return {
+            label: `${item.meta.title}${item.path}`,
+            value: item.path
+        }
+    })
+})
+
+
+function remoteMethod(data) {
+    // 这里可以执行相应的操作（例如打开搜索框等）
+    value.value = data
+}
+
+function handleChange(path) {
+    router.push({path})
+}
+
+onMounted(() => {
+    window.addEventListener('keydown', listenKey)
+})
+
+onUnmounted(() => {
+    window.removeEventListener('keydown', listenKey)
+})
+
+// 监听 ctrl + k
+function listenKey(event) {
+    if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+        showSearch.value = !showSearch.value
+        // 这里可以执行相应的操作（例如打开搜索框等）
+    }
+}
+
+defineExpose({
+    openSearch: () => {
+        showSearch.value = true
+    }
+})
+</script>
\ No newline at end of file