mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-20 18:46:39 +08:00
116 lines
3.5 KiB
Vue
116 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, ref, shallowRef } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { onKeyStroke, useDebounceFn } from '@vueuse/core';
|
|
import { useRouteStore } from '@/store/modules/route';
|
|
import { useAppStore } from '@/store/modules/app';
|
|
import { $t } from '@/locales';
|
|
import SearchResult from './search-result.vue';
|
|
import SearchFooter from './search-footer.vue';
|
|
|
|
defineOptions({ name: 'SearchModal' });
|
|
|
|
const appStore = useAppStore();
|
|
const isMobile = computed(() => appStore.isMobile);
|
|
const router = useRouter();
|
|
const routeStore = useRouteStore();
|
|
|
|
const keyword = ref('');
|
|
const activePath = ref('');
|
|
const resultOptions = shallowRef<App.Global.Menu[]>([]);
|
|
|
|
const handleSearch = useDebounceFn(search, 300);
|
|
|
|
const modelShow = defineModel<boolean>('show', { required: true });
|
|
|
|
/** 查询 */
|
|
function search() {
|
|
resultOptions.value = routeStore.searchMenus.filter(menu => {
|
|
const trimKeyword = keyword.value.toLocaleLowerCase().trim();
|
|
const title = (menu.i18nKey ? $t(menu.i18nKey) : menu.label).toLocaleLowerCase();
|
|
return trimKeyword && title.includes(trimKeyword);
|
|
});
|
|
activePath.value = resultOptions.value[0]?.routePath ?? '';
|
|
}
|
|
|
|
function handleClose() {
|
|
modelShow.value = false;
|
|
/** 延时处理防止用户看到某些操作 */
|
|
setTimeout(() => {
|
|
resultOptions.value = [];
|
|
keyword.value = '';
|
|
}, 200);
|
|
}
|
|
|
|
/** key up */
|
|
function handleUp() {
|
|
const { length } = resultOptions.value;
|
|
if (length === 0) return;
|
|
const index = resultOptions.value.findIndex(item => item.routePath === activePath.value);
|
|
if (index === 0) {
|
|
activePath.value = resultOptions.value[length - 1].routePath;
|
|
} else {
|
|
activePath.value = resultOptions.value[index - 1].routePath;
|
|
}
|
|
}
|
|
|
|
/** key down */
|
|
function handleDown() {
|
|
const { length } = resultOptions.value;
|
|
if (length === 0) return;
|
|
const index = resultOptions.value.findIndex(item => item.routePath === activePath.value);
|
|
if (index + 1 === length) {
|
|
activePath.value = resultOptions.value[0].routePath;
|
|
} else {
|
|
activePath.value = resultOptions.value[index + 1].routePath;
|
|
}
|
|
}
|
|
|
|
/** key enter */
|
|
function handleEnter(e: Event | undefined) {
|
|
const { length } = resultOptions.value;
|
|
if (length === 0 || activePath.value === '') return;
|
|
e?.preventDefault();
|
|
handleClose();
|
|
router.push(activePath.value);
|
|
}
|
|
|
|
onKeyStroke('Escape', handleClose);
|
|
onKeyStroke('Enter', handleEnter);
|
|
onKeyStroke('ArrowUp', handleUp);
|
|
onKeyStroke('ArrowDown', handleDown);
|
|
</script>
|
|
|
|
<template>
|
|
<NModal
|
|
v-model:show="modelShow"
|
|
:segmented="{ footer: 'soft' }"
|
|
:closable="false"
|
|
preset="card"
|
|
auto-focus
|
|
footer-style="padding: 0; margin: 0"
|
|
class="fixed left-0 right-0"
|
|
:class="[isMobile ? 'size-full top-0px rounded-0' : 'w-630px top-50px']"
|
|
@after-leave="handleClose"
|
|
>
|
|
<NInputGroup>
|
|
<NInput v-model:value="keyword" clearable placeholder="请输入关键词搜索" @input="handleSearch">
|
|
<template #prefix>
|
|
<icon-uil-search class="text-15px text-#c2c2c2" />
|
|
</template>
|
|
</NInput>
|
|
<NButton v-if="isMobile" type="primary" ghost @click="handleClose">取消</NButton>
|
|
</NInputGroup>
|
|
|
|
<div class="mt-20px">
|
|
<NEmpty v-if="resultOptions.length === 0" description="暂无搜索结果" />
|
|
<SearchResult v-else v-model:path="activePath" :options="resultOptions" @enter="handleEnter" />
|
|
</div>
|
|
<template #footer>
|
|
<SearchFooter v-if="!isMobile" />
|
|
</template>
|
|
</NModal>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|