frontend

frontend/src/components/dashboard/BreadcrumbHeader.vue

@@ -0,0 +1,81 @@
+<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>