新增路由搜索功能

Author: wangding

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">

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>