add router search

.vscode/settings.json

@@ -8,7 +8,7 @@
     "source.fixAll.eslint": true
   },
   "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "Vue.volar"
   },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

src/App.vue

@@ -3,8 +3,7 @@ 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'
+import routerSearch from '@/components/RouterSearch/index.vue'
-
 
 const { getPrefixCls } = useDesign()
 const prefixCls = getPrefixCls('app')
@@ -26,11 +25,12 @@ setDefaultTheme()
 <template>
   <ConfigGlobal :size="currentSize">
     <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
-    <routerSearch/>
+    <routerSearch />
   </ConfigGlobal>
 </template>
 <style lang="scss">
 $prefix-cls: #{$namespace}-app;
+
 .size {
   width: 100%;
   height: 100%;

src/components/RouterSearch/index.vue

@@ -6,7 +6,7 @@
       remote
       placeholder="请输入菜单内容"
       :remote-method="remoteMethod"
-            style="width: 100%;"
+      style="width: 100%"
       @change="handleChange"
     >
       <el-option
@@ -22,15 +22,16 @@
 <script setup lang="ts">
 const router = useRouter() // 路由对象
 const showSearch = ref(false) // 是否显示弹框
-const value:Ref = ref('') // 用户输入的值
+const value: Ref = ref('') // 用户输入的值
 
 const routers = router.getRoutes() // 路由对象
-const options = computed(() => { // 提示选项
+const options = computed(() => {
-    if(!value.value) {
+  // 提示选项
+  if (!value.value) {
     return []
   }
-    const list = routers.filter((item:any) => {
+  const list = routers.filter((item: any) => {
-        if(item.meta.title?.indexOf(value.value) > -1  || item.path.indexOf(value.value) > -1) {
+    if (item.meta.title?.indexOf(value.value) > -1 || item.path.indexOf(value.value) > -1) {
       return true
     }
   })
@@ -42,14 +43,13 @@ const options = computed(() => { // 提示选项
   })
 })
 
-
 function remoteMethod(data) {
   // 这里可以执行相应的操作（例如打开搜索框等）
   value.value = data
 }
 
 function handleChange(path) {
-    router.push({path})
+  router.push({ path })
 }
 
 onMounted(() => {