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> |