From 97187b246b94dd58cb585ebaed7e8644d2f00119 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 03 四月 2023 00:26:04 +0800 Subject: [PATCH] update 调整代码格式 --- src/components/HeaderSearch/index.vue | 246 ++++++++++++++++++++++++------------------------ 1 files changed, 123 insertions(+), 123 deletions(-) diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue index a8fc1c8..60ebb9d 100644 --- a/src/components/HeaderSearch/index.vue +++ b/src/components/HeaderSearch/index.vue @@ -1,126 +1,3 @@ -<script setup lang="ts"> -import Fuse from 'fuse.js' -import { getNormalPath } from '@/utils/ruoyi' -import { isHttp } from '@/utils/validate' -import usePermissionStore from '@/store/modules/permission' -import { RouteOption } from 'vue-router' - -type Router = Array<{ - path: string; - title: string[]; -}> - -const search = ref(''); -const options = ref<any>([]); -const searchPool = ref<Router>([]); -const show = ref(false); -const fuse = ref(); -const headerSearchSelectRef = ref(ElSelect); -const router = useRouter(); -const routes = computed(() => usePermissionStore().routes); - -const click = () => { - show.value = !show.value - if (show.value) { - headerSearchSelectRef.value && headerSearchSelectRef.value.focus() - } -}; -const close = () => { - headerSearchSelectRef.value && headerSearchSelectRef.value.blur() - options.value = [] - show.value = false -} -const change = (val: any) => { - const path = val.path; - if (isHttp(path)) { - // http(s):// 璺緞鏂扮獥鍙f墦寮� - const pindex = path.indexOf("http"); - window.open(path.substr(pindex, path.length), "_blank"); - } else { - router.push(path) - } - search.value = '' - options.value = [] - nextTick(() => { - show.value = false - }) -} -const initFuse = (list: Router) => { - fuse.value = new Fuse(list, { - shouldSort: true, - threshold: 0.4, - location: 0, - distance: 100, - minMatchCharLength: 1, - 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 -const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: string[] = []) => { - let res: Router = [] - routes.forEach(r => { - // skip hidden router - if (!r.hidden) { - 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] - } - if (r.meta && r.meta.title) { - data.title = [...data.title, r.meta.title]; - if (r.redirect !== 'noRedirect') { - // only push the routes with title - // special case: need to exclude parent router without redirect - res.push(data); - } - } - // recursive child routes - if (r.children) { - const tempRoutes = generateRoutes(r.children, data.path, data.title); - if (tempRoutes.length >= 1) { - res = [...res, ...tempRoutes]; - } - } - } - }) - return res; -} -const querySearch = (query: string) => { - if (query !== '') { - options.value = fuse.value.search(query) - } else { - options.value = [] - } -} - -onMounted(() => { - searchPool.value = generateRoutes(routes.value); -}) - -watchEffect(() => { - searchPool.value = generateRoutes(routes.value) -}) - -watch(show, (value) => { - if (value) { - document.body.addEventListener('click', close) - } else { - document.body.removeEventListener('click', close) - } -}) - -watch(searchPool, (list) => { - initFuse(list) -}) -</script> - <template> <div :class="{ 'show': show }" class="header-search"> <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" /> @@ -140,6 +17,129 @@ </div> </template> +<script setup lang="ts"> +import Fuse from 'fuse.js' +import { getNormalPath } from '@/utils/ruoyi' +import { isHttp } from '@/utils/validate' +import usePermissionStore from '@/store/modules/permission' +import { RouteOption } from 'vue-router' + +type Router = Array<{ + path: string; + title: string[]; +}> + +const search = ref(''); +const options = ref<any>([]); +const searchPool = ref<Router>([]); +const show = ref(false); +const fuse = ref(); +const headerSearchSelectRef = ref(ElSelect); +const router = useRouter(); +const routes = computed(() => usePermissionStore().routes); + +const click = () => { + show.value = !show.value + if (show.value) { + headerSearchSelectRef.value && headerSearchSelectRef.value.focus() + } +}; +const close = () => { + headerSearchSelectRef.value && headerSearchSelectRef.value.blur() + options.value = [] + show.value = false +} +const change = (val: any) => { + const path = val.path; + if (isHttp(path)) { + // http(s):// 璺緞鏂扮獥鍙f墦寮� + const pindex = path.indexOf("http"); + window.open(path.substr(pindex, path.length), "_blank"); + } else { + router.push(path) + } + search.value = '' + options.value = [] + nextTick(() => { + show.value = false + }) +} +const initFuse = (list: Router) => { + fuse.value = new Fuse(list, { + shouldSort: true, + threshold: 0.4, + location: 0, + distance: 100, + minMatchCharLength: 1, + 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 +const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: string[] = []) => { + let res: Router = [] + routes.forEach(r => { + // skip hidden router + if (!r.hidden) { + 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] + } + if (r.meta && r.meta.title) { + data.title = [...data.title, r.meta.title]; + if (r.redirect !== 'noRedirect') { + // only push the routes with title + // special case: need to exclude parent router without redirect + res.push(data); + } + } + // recursive child routes + if (r.children) { + const tempRoutes = generateRoutes(r.children, data.path, data.title); + if (tempRoutes.length >= 1) { + res = [...res, ...tempRoutes]; + } + } + } + }) + return res; +} +const querySearch = (query: string) => { + if (query !== '') { + options.value = fuse.value.search(query) + } else { + options.value = [] + } +} + +onMounted(() => { + searchPool.value = generateRoutes(routes.value); +}) + +watchEffect(() => { + searchPool.value = generateRoutes(routes.value) +}) + +watch(show, (value) => { + if (value) { + document.body.addEventListener('click', close) + } else { + document.body.removeEventListener('click', close) + } +}) + +watch(searchPool, (list) => { + initFuse(list) +}) +</script> + <style lang="scss" scoped> .header-search { font-size: 0 !important; -- Gitblit v1.9.3