81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<!-- Breadcrumb and Title -->
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h1 class="text-lg font-medium">{{ displayTitle }}</h1>
|
|
<div class="text-xs breadcrumbs">
|
|
<ul>
|
|
<li v-for="(item, index) in breadcrumbItems" :key="index">
|
|
<template v-if="item.path">
|
|
<a
|
|
:href="item.path"
|
|
class="text-gray-500"
|
|
>
|
|
{{ item.name }}
|
|
</a>
|
|
</template>
|
|
<template v-else>
|
|
<span class="text-gray-500">{{ item.name }}</span>
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: null // 默认为null，将从路由中获取
|
|
},
|
|
// Optional custom breadcrumb items
|
|
customBreadcrumbs: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
const route = useRoute();
|
|
|
|
// Generate breadcrumb items based on current route
|
|
// 生成面包屑项
|
|
const breadcrumbItems = computed(() => {
|
|
if (props.customBreadcrumbs.length > 0) {
|
|
return props.customBreadcrumbs;
|
|
}
|
|
|
|
// 获取当前路径并分割成段
|
|
const pathSegments = route.path.split('/').filter(segment => segment);
|
|
|
|
return pathSegments.map((segment, index) => {
|
|
const name = segment.charAt(0).toUpperCase() + segment.slice(1);
|
|
|
|
// 对于最后一段，不设置链接
|
|
if (index === pathSegments.length - 1) {
|
|
return { name, path: '' };
|
|
}
|
|
|
|
// 创建到此段的路径
|
|
const path = '/' + pathSegments.slice(0, index + 1).join('/');
|
|
return { name, path };
|
|
});
|
|
});
|
|
|
|
// 显示的标题：如果提供了自定义标题则使用，否则使用当前路径的最后一段
|
|
const displayTitle = computed(() => {
|
|
if (props.title) {
|
|
return props.title;
|
|
}
|
|
|
|
const pathSegments = route.path.split('/').filter(segment => segment);
|
|
if (pathSegments.length > 0) {
|
|
const lastSegment = pathSegments[pathSegments.length - 1];
|
|
return lastSegment.charAt(0).toUpperCase() + lastSegment.slice(1);
|
|
}
|
|
|
|
return 'Dashboard';
|
|
});
|
|
</script> |