<!-- 全局搜索组件 -->
|
<template>
|
<div class="layout-search">
|
<ElDialog
|
v-model="showSearchDialog"
|
width="600"
|
:show-close="false"
|
:lock-scroll="false"
|
modal-class="search-modal"
|
@close="closeSearchDialog"
|
>
|
<ElInput
|
v-model.trim="searchVal"
|
:placeholder="$t('search.placeholder')"
|
@input="search"
|
@blur="searchBlur"
|
ref="searchInput"
|
:prefix-icon="Search"
|
class="h-12"
|
>
|
<template #suffix>
|
<div
|
class="h-4.5 flex-cc rounded border border-g-300 dark:!bg-g-200/50 !bg-box px-1.5 text-g-500"
|
>
|
<ArtSvgIcon icon="fluent:arrow-enter-left-20-filled" />
|
</div>
|
</template>
|
</ElInput>
|
<ElScrollbar class="mt-5" max-height="370px" ref="searchResultScrollbar" always>
|
<div class="result w-full" v-show="searchResult.length">
|
<div
|
class="box !mt-0 c-p text-base leading-none"
|
v-for="(item, index) in searchResult"
|
:key="index"
|
>
|
<div
|
class="mt-2 h-12 flex-cb rounded-custom-sm bg-g-200/80 px-4 text-sm text-g-700"
|
:class="isHighlighted(index) ? 'highlighted !bg-theme/70 !text-white' : ''"
|
@click="searchGoPage(item)"
|
@mouseenter="highlightOnHover(index)"
|
>
|
{{ formatMenuTitle(item.meta.title) }}
|
<ArtSvgIcon v-show="isHighlighted(index)" icon="fluent:arrow-enter-left-20-filled" />
|
</div>
|
</div>
|
</div>
|
|
<div v-show="!searchVal && searchResult.length === 0 && historyResult.length > 0">
|
<p class="text-xs text-g-500">{{ $t('search.historyTitle') }}</p>
|
<div class="mt-1.5 w-full">
|
<div
|
class="box mt-2 h-12 c-p flex-cb rounded-custom-sm bg-g-200/80 px-4 text-sm text-g-800"
|
v-for="(item, index) in historyResult"
|
:key="index"
|
:class="
|
historyHIndex === index
|
? 'highlighted !bg-theme/70 !text-white [&_.selected-icon]:!text-white'
|
: ''
|
"
|
@click="searchGoPage(item)"
|
@mouseenter="highlightOnHoverHistory(index)"
|
>
|
{{ formatMenuTitle(item.meta.title) }}
|
<div
|
class="size-5 selected-icon select-none rounded-full text-g-500 flex-cc c-p"
|
@click.stop="deleteHistory(index)"
|
>
|
<ArtSvgIcon icon="ri:close-large-fill" class="text-xs" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</ElScrollbar>
|
|
<template #footer>
|
<div class="dialog-footer box-border flex-c border-t-d pt-4.5 pb-1">
|
<div class="flex-cc">
|
<ArtSvgIcon icon="fluent:arrow-enter-left-20-filled" class="keyboard" />
|
<span class="mr-3.5 text-xs text-g-700">{{ $t('search.selectKeydown') }}</span>
|
</div>
|
<div class="flex-c">
|
<ArtSvgIcon icon="ri:arrow-up-wide-fill" class="keyboard" />
|
<ArtSvgIcon icon="ri:arrow-down-wide-fill" class="keyboard" />
|
<span class="mr-3.5 text-xs text-g-700">{{ $t('search.switchKeydown') }}</span>
|
</div>
|
<div class="flex-c">
|
<i class="keyboard !w-8 flex-cc"><p class="text-[10px] font-medium">ESC</p></i>
|
<span class="mr-3.5 text-xs text-g-700">{{ $t('search.exitKeydown') }}</span>
|
</div>
|
</div>
|
</template>
|
</ElDialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { Search } from '@element-plus/icons-vue'
|
|
import { useUserStore } from '@/store/modules/user'
|
import { mittBus } from '@/utils/sys'
|
import { useMenuStore } from '@/store/modules/menu'
|
import { formatMenuTitle } from '@/utils/router'
|
import { handleMenuJump } from '@/utils/navigation'
|
defineOptions({ name: 'ArtGlobalSearch' })
|
const userStore = useUserStore()
|
const { menuList } = storeToRefs(useMenuStore())
|
const showSearchDialog = ref(false)
|
const searchVal = ref('')
|
const searchResult = ref([])
|
const historyMaxLength = 10
|
const { searchHistory: historyResult } = storeToRefs(userStore)
|
const searchInput = ref(null)
|
const highlightedIndex = ref(0)
|
const historyHIndex = ref(0)
|
const searchResultScrollbar = ref()
|
const isKeyboardNavigating = ref(false)
|
onMounted(() => {
|
mittBus.on('openSearchDialog', openSearchDialog)
|
document.addEventListener('keydown', handleKeydown)
|
})
|
onUnmounted(() => {
|
document.removeEventListener('keydown', handleKeydown)
|
})
|
const handleKeydown = (event) => {
|
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
|
const isCommandKey = isMac ? event.metaKey : event.ctrlKey
|
if (isCommandKey && event.key.toLowerCase() === 'k') {
|
event.preventDefault()
|
showSearchDialog.value = true
|
focusInput()
|
}
|
if (showSearchDialog.value) {
|
if (event.key === 'ArrowUp') {
|
event.preventDefault()
|
highlightPrevious()
|
} else if (event.key === 'ArrowDown') {
|
event.preventDefault()
|
highlightNext()
|
} else if (event.key === 'Enter') {
|
event.preventDefault()
|
selectHighlighted()
|
} else if (event.key === 'Escape') {
|
event.preventDefault()
|
showSearchDialog.value = false
|
}
|
}
|
}
|
const focusInput = () => {
|
setTimeout(() => {
|
searchInput.value?.focus()
|
}, 100)
|
}
|
const search = (val) => {
|
if (val) {
|
searchResult.value = flattenAndFilterMenuItems(menuList.value, val)
|
} else {
|
searchResult.value = []
|
}
|
}
|
const flattenAndFilterMenuItems = (items, val) => {
|
const lowerVal = val.toLowerCase()
|
const result = []
|
const flattenAndMatch = (item) => {
|
if (item.meta?.isHide) return
|
const lowerItemTitle = formatMenuTitle(item.meta.title).toLowerCase()
|
if (item.children && item.children.length > 0) {
|
item.children.forEach(flattenAndMatch)
|
return
|
}
|
if (
|
lowerItemTitle.includes(lowerVal) &&
|
((item.path && item.path.trim()) || item.meta.link || item.meta.isIframe)
|
) {
|
result.push({ ...item, children: void 0 })
|
}
|
}
|
items.forEach(flattenAndMatch)
|
return result
|
}
|
const highlightPrevious = () => {
|
isKeyboardNavigating.value = true
|
if (searchVal.value) {
|
highlightedIndex.value =
|
(highlightedIndex.value - 1 + searchResult.value.length) % searchResult.value.length
|
scrollToHighlightedItem()
|
} else {
|
historyHIndex.value =
|
(historyHIndex.value - 1 + historyResult.value.length) % historyResult.value.length
|
scrollToHighlightedHistoryItem()
|
}
|
setTimeout(() => {
|
isKeyboardNavigating.value = false
|
}, 100)
|
}
|
const highlightNext = () => {
|
isKeyboardNavigating.value = true
|
if (searchVal.value) {
|
highlightedIndex.value = (highlightedIndex.value + 1) % searchResult.value.length
|
scrollToHighlightedItem()
|
} else {
|
historyHIndex.value = (historyHIndex.value + 1) % historyResult.value.length
|
scrollToHighlightedHistoryItem()
|
}
|
setTimeout(() => {
|
isKeyboardNavigating.value = false
|
}, 100)
|
}
|
const scrollToHighlightedItem = () => {
|
nextTick(() => {
|
if (!searchResultScrollbar.value || !searchResult.value.length) return
|
const scrollWrapper = searchResultScrollbar.value.wrapRef
|
if (!scrollWrapper) return
|
const highlightedElements = scrollWrapper.querySelectorAll('.result .box')
|
if (!highlightedElements[highlightedIndex.value]) return
|
const highlightedElement = highlightedElements[highlightedIndex.value]
|
const itemHeight = highlightedElement.offsetHeight
|
const scrollTop = scrollWrapper.scrollTop
|
const containerHeight = scrollWrapper.clientHeight
|
const itemTop = highlightedElement.offsetTop
|
const itemBottom = itemTop + itemHeight
|
if (itemTop < scrollTop) {
|
searchResultScrollbar.value.setScrollTop(itemTop)
|
} else if (itemBottom > scrollTop + containerHeight) {
|
searchResultScrollbar.value.setScrollTop(itemBottom - containerHeight)
|
}
|
})
|
}
|
const scrollToHighlightedHistoryItem = () => {
|
nextTick(() => {
|
if (!searchResultScrollbar.value || !historyResult.value.length) return
|
const scrollWrapper = searchResultScrollbar.value.wrapRef
|
if (!scrollWrapper) return
|
const historyItems = scrollWrapper.querySelectorAll('.history-result .box')
|
if (!historyItems[historyHIndex.value]) return
|
const highlightedElement = historyItems[historyHIndex.value]
|
const itemHeight = highlightedElement.offsetHeight
|
const scrollTop = scrollWrapper.scrollTop
|
const containerHeight = scrollWrapper.clientHeight
|
const itemTop = highlightedElement.offsetTop
|
const itemBottom = itemTop + itemHeight
|
if (itemTop < scrollTop) {
|
searchResultScrollbar.value.setScrollTop(itemTop)
|
} else if (itemBottom > scrollTop + containerHeight) {
|
searchResultScrollbar.value.setScrollTop(itemBottom - containerHeight)
|
}
|
})
|
}
|
const selectHighlighted = () => {
|
if (searchVal.value && searchResult.value.length) {
|
searchGoPage(searchResult.value[highlightedIndex.value])
|
} else if (!searchVal.value && historyResult.value.length) {
|
searchGoPage(historyResult.value[historyHIndex.value])
|
}
|
}
|
const isHighlighted = (index) => {
|
return highlightedIndex.value === index
|
}
|
const searchBlur = () => {
|
highlightedIndex.value = 0
|
}
|
const searchGoPage = (item) => {
|
showSearchDialog.value = false
|
addHistory(item)
|
handleMenuJump(item)
|
searchVal.value = ''
|
searchResult.value = []
|
}
|
const updateHistory = () => {
|
if (Array.isArray(historyResult.value)) {
|
userStore.setSearchHistory(historyResult.value)
|
}
|
}
|
const addHistory = (item) => {
|
const itemKey = item.path || String(item.meta.link || '')
|
const hasItemIndex = historyResult.value.findIndex(
|
(historyItem) => (historyItem.path || String(historyItem.meta.link || '')) === itemKey
|
)
|
if (hasItemIndex !== -1) {
|
historyResult.value.splice(hasItemIndex, 1)
|
} else if (historyResult.value.length >= historyMaxLength) {
|
historyResult.value.pop()
|
}
|
const cleanedItem = { ...item }
|
delete cleanedItem.children
|
delete cleanedItem.meta.authList
|
historyResult.value.unshift(cleanedItem)
|
updateHistory()
|
}
|
const deleteHistory = (index) => {
|
historyResult.value.splice(index, 1)
|
updateHistory()
|
}
|
const openSearchDialog = () => {
|
showSearchDialog.value = true
|
focusInput()
|
}
|
const closeSearchDialog = () => {
|
searchVal.value = ''
|
searchResult.value = []
|
highlightedIndex.value = 0
|
historyHIndex.value = 0
|
}
|
const highlightOnHover = (index) => {
|
if (!isKeyboardNavigating.value && searchVal.value) {
|
highlightedIndex.value = index
|
}
|
}
|
const highlightOnHoverHistory = (index) => {
|
if (!isKeyboardNavigating.value && !searchVal.value) {
|
historyHIndex.value = index
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.layout-search {
|
:deep(.search-modal) {
|
background-color: rgb(0 0 0 / 20%);
|
}
|
|
:deep(.el-dialog__body) {
|
padding: 5px 0 0 !important;
|
}
|
|
:deep(.el-dialog__header) {
|
padding: 0;
|
}
|
|
.el-input {
|
:deep(.el-input__wrapper) {
|
background-color: var(--art-gray-200);
|
border: 1px solid var(--default-border-dashed);
|
border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
|
box-shadow: none;
|
}
|
|
:deep(.el-input__inner) {
|
color: var(--art-gray-800) !important;
|
}
|
}
|
}
|
|
.dark .layout-search {
|
.el-input {
|
:deep(.el-input__wrapper) {
|
background-color: #333;
|
border: 1px solid #4c4d50;
|
}
|
}
|
|
:deep(.search-modal) {
|
background-color: rgb(23 23 26 / 60%);
|
backdrop-filter: none;
|
}
|
|
:deep(.el-dialog) {
|
background-color: #252526;
|
}
|
}
|
</style>
|
|
<style scoped>
|
@reference '@styles/core/tailwind.css';
|
|
.keyboard {
|
@apply mr-2
|
box-border
|
h-5
|
w-5.5
|
rounded
|
border
|
border-g-400
|
px-1
|
text-g-500
|
shadow-[0_2px_0_var(--default-border-dashed)]
|
last-of-type:mr-1.5;
|
}
|
</style>
|
