delete alert style

src/components/HeaderSearch/index.vue

@@ -1,6 +1,10 @@
 <template>
-  <div :class="{ 'show': show }" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
+  <div :class="{ show: show }" class="header-search">
+    <svg-icon
+      class-name="search-icon"
+      icon-class="search"
+      @click.stop="click"
+    />
     <el-select
       ref="headerSearchSelectRef"
       v-model="search"
@@ -12,18 +16,23 @@
       class="header-search-select"
       @change="change"
     >
-      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
+      <el-option
+        v-for="option in options"
+        :key="option.item.path"
+        :value="option.item"
+        :label="option.item.title.join(' > ')"
+      />
     </el-select>
   </div>
 </template>
 
 <script setup>
-import Fuse from 'fuse.js'
-import { getNormalPath } from '@/utils/ruoyi'
-import { isHttp } from '@/utils/validate'
-import usePermissionStore from '@/store/modules/permission'
+import Fuse from "fuse.js";
+import { getNormalPath } from "@/utils/ruoyi";
+import { isHttp } from "@/utils/validate";
+import usePermissionStore from "@/store/modules/permission";
 
-const search = ref('');
+const search = ref("");
 const options = ref([]);
 const searchPool = ref([]);
 const show = ref(false);
@@ -33,15 +42,15 @@ const router = useRouter();
 const routes = computed(() => usePermissionStore().routes);
 
 function click() {
-  show.value = !show.value
+  show.value = !show.value;
   if (show.value) {
-    headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
+    headerSearchSelectRef.value && headerSearchSelectRef.value.focus();
   }
-};
+}
 function close() {
-  headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
-  options.value = []
-  show.value = false
+  headerSearchSelectRef.value && headerSearchSelectRef.value.blur();
+  options.value = [];
+  show.value = false;
 }
 function change(val) {
   const path = val.path;
@@ -50,14 +59,14 @@ function change(val) {
     const pindex = path.indexOf("http");
     window.open(path.substr(pindex, path.length), "_blank");
   } else {
-    router.push(path)
+    router.push(path);
   }
 
-  search.value = ''
-  options.value = []
+  search.value = "";
+  options.value = [];
   nextTick(() => {
-    show.value = false
-  })
+    show.value = false;
+  });
 }
 function initFuse(list) {
   fuse.value = new Fuse(list, {
@@ -66,79 +75,84 @@ function initFuse(list) {
     location: 0,
     distance: 100,
     minMatchCharLength: 1,
-    keys: [{
-      name: 'title',
-      weight: 0.7
-    }, {
-      name: 'path',
-      weight: 0.3
-    }]
-  })
+    keys: [
+      {
+        name: "title",
+        weight: 0.7,
+      },
+      {
+        name: "path",
+        weight: 0.3,
+      },
+    ],
+  });
 }
 // Filter out the routes that can be displayed in the sidebar
 // And generate the internationalized title
-function generateRoutes(routes, basePath = '', prefixTitle = []) {
-  let res = []
+function generateRoutes(routes, basePath = "", prefixTitle = []) {
+  let res = [];
 
   for (const r of routes) {
     // skip hidden router
-    if (r.hidden) { continue }
-    const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
+    if (r.hidden) {
+      continue;
+    }
+    const p = r.path.length > 0 && r.path[0] === "/" ? r.path : "/" + r.path;
     const data = {
       path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
-      title: [...prefixTitle]
-    }
+      title: [...prefixTitle],
+    };
 
     if (r.meta && r.meta.title) {
-      data.title = [...data.title, r.meta.title]
+      data.title = [...data.title, r.meta.title];
 
-      if (r.redirect !== 'noRedirect') {
+      if (r.redirect !== "noRedirect") {
         // only push the routes with title
         // special case: need to exclude parent router without redirect
-        res.push(data)
+        res.push(data);
       }
     }
 
     // recursive child routes
     if (r.children) {
-      const tempRoutes = generateRoutes(r.children, data.path, data.title)
+      const tempRoutes = generateRoutes(r.children, data.path, data.title);
       if (tempRoutes.length >= 1) {
-        res = [...res, ...tempRoutes]
+        res = [...res, ...tempRoutes];
       }
     }
   }
-  return res
+  return res;
 }
 function querySearch(query) {
-  if (query !== '') {
-    options.value = fuse.value.search(query)
+  if (query !== "") {
+    options.value = fuse.value.search(query);
   } else {
-    options.value = []
+    options.value = [];
   }
 }
 
 onMounted(() => {
   searchPool.value = generateRoutes(routes.value);
-})
+});
 
 watchEffect(() => {
-  searchPool.value = generateRoutes(routes.value)
-})
+  searchPool.value = generateRoutes(routes.value);
+});
 
 watch(show, (value) => {
   if (value) {
-    document.body.addEventListener('click', close)
+    document.body.addEventListener("click", close);
   } else {
-    document.body.removeEventListener('click', close)
+    document.body.removeEventListener("click", close);
   }
-})
+});
 
 watch(searchPool, (list) => {
-  initFuse(list)
-})
+  initFuse(list);
+});
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .header-search {
   font-size: 0 !important;
 
@@ -176,4 +190,4 @@ watch(searchPool, (list) => {
     }
   }
 }
-</style>
+</style>