初始化：静态菜单版 数据大屏管理系统，对接KLPL3数据库

src/layout/components/Breadcrumb/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="breadcrumb-wrapper">
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <template v-for="item in levelList" :key="item.path">
+        <el-breadcrumb-item v-if="item.meta?.title && (item.meta.breadcrumb === undefined || item.meta.breadcrumb === true)" :to="item.path !== route.path ? { path: item.path } : ''">
+          {{ item.meta.title }}
+        </el-breadcrumb-item>
+      </template>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const levelList = computed(() => {
+  const matched = route.matched.filter(item => item.meta?.title)
+  return matched
+})
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb-wrapper {
+  background: #ffffff;
+  padding: 10px 20px;
+  border-bottom: 1px solid #e4e4e4;
+  margin-top: 48px;
+}
+
+:deep(.el-breadcrumb) {
+  font-size: 13px;
+}
+
+:deep(.el-breadcrumb__item) {
+  color: #666666;
+
+  &:hover {
+    color: #4a90d9;
+  }
+}
+
+:deep(.el-breadcrumb__item:last-child) {
+  color: #333333;
+  font-weight: 500;
+}
+
+:deep(.el-breadcrumb__separator) {
+  color: #cccccc;
+  margin: 0 8px;
+}
+</style>