<script lang="ts" setup>
|
import { useThemeStore } from '@/store/modules/theme';
|
import { $t } from '@/locales';
|
|
defineOptions({ name: 'SearchResult' });
|
|
interface Props {
|
options: App.Global.Menu[];
|
}
|
|
defineProps<Props>();
|
|
interface Emits {
|
(e: 'enter'): void;
|
}
|
|
const emit = defineEmits<Emits>();
|
|
const theme = useThemeStore();
|
|
const active = defineModel<string>('path', { required: true });
|
|
async function handleMouseEnter(item: App.Global.Menu) {
|
active.value = item.routePath;
|
}
|
|
function handleTo() {
|
emit('enter');
|
}
|
</script>
|
|
<template>
|
<NScrollbar>
|
<div class="pb-12px">
|
<template v-for="item in options" :key="item.routePath">
|
<div
|
class="mt-8px h-56px flex-y-center cursor-pointer justify-between rounded-4px bg-#e5e7eb px-14px dark:bg-dark"
|
:style="{
|
background: item.routePath === active ? theme.themeColor : '',
|
color: item.routePath === active ? '#fff' : ''
|
}"
|
@click="handleTo"
|
@mouseenter="handleMouseEnter(item)"
|
>
|
<component :is="item.icon" />
|
<span class="ml-5px flex-1">
|
{{ (item.i18nKey && $t(item.i18nKey)) || item.label }}
|
</span>
|
<icon-ant-design-enter-outlined class="icon mr-3px p-2px text-20px" />
|
</div>
|
</template>
|
</div>
|
</NScrollbar>
|
</template>
|
|
<style lang="scss" scoped></style>
|
