<script lang="ts" setup>
|
import type { BreadcrumbStyleType } from '@vben/types';
|
|
import type { IBreadcrumb } from '@vben-core/shadcn-ui';
|
|
import { computed } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { $t } from '@vben/locales';
|
|
import { VbenBreadcrumbView } from '@vben-core/shadcn-ui';
|
|
const JNPF_ROUTE_TITLE_QUERY = 'jnpfTitle';
|
|
interface Props {
|
hideWhenOnlyOne?: boolean;
|
showHome?: boolean;
|
showIcon?: boolean;
|
type?: BreadcrumbStyleType;
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
showHome: false,
|
showIcon: false,
|
type: 'normal',
|
});
|
|
const route = useRoute();
|
const router = useRouter();
|
|
function getJnpfRouteTitle(query?: Record<string, any>) {
|
const value = query?.[JNPF_ROUTE_TITLE_QUERY];
|
const title = Array.isArray(value) ? value[0] : value;
|
if (title === undefined || title === null || title === '') return '';
|
const titleString = String(title);
|
try {
|
return decodeURIComponent(titleString);
|
} catch {
|
return titleString;
|
}
|
}
|
|
const breadcrumbs = computed((): IBreadcrumb[] => {
|
const matched = route.matched;
|
const customTitle = getJnpfRouteTitle(route.query);
|
|
const resultBreadcrumb: IBreadcrumb[] = [];
|
|
for (const [index, match] of matched.entries()) {
|
const { meta, path } = match;
|
const { hideChildrenInMenu, hideInBreadcrumb, icon, title, i18nCode = '' } = meta || {};
|
if (hideInBreadcrumb || hideChildrenInMenu || !path) {
|
continue;
|
}
|
|
resultBreadcrumb.push({
|
icon,
|
path: path || route.path,
|
title: index === matched.length - 1 && customTitle ? customTitle : i18nCode ? $t(i18nCode, title) : title,
|
});
|
}
|
if (props.showHome) {
|
resultBreadcrumb.unshift({
|
icon: 'mdi:home-outline',
|
isHome: true,
|
path: '/',
|
});
|
}
|
if (props.hideWhenOnlyOne && resultBreadcrumb.length === 1) {
|
return [];
|
}
|
|
return resultBreadcrumb;
|
});
|
|
function handleSelect(path: string) {
|
router.push(path);
|
}
|
</script>
|
<template>
|
<VbenBreadcrumbView :breadcrumbs="breadcrumbs" :show-icon="showIcon" :style-type="type" class="ml-2" @select="handleSelect" />
|
</template>
|
