<template>
  <div class="breadcrumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <router-link to="/homePage">首页</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.path">
        <router-link :to="item.path">{{ item.title }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  import { useRoute } from 'vue-router'

  const route = useRoute()
  const breadcrumbList = ref([])

  // 生成面包屑数据
  const generateBreadcrumb = matchedRoutes => {
    return matchedRoutes
      .filter(route => route.meta?.menuName && route.path !== '/homePage')
      .map(route => ({
        path: route.path,
        title: route.meta?.menuName || route.name || '未知页面'
      }))
  }

  watch(
    () => route.matched,
    newVal => {
      breadcrumbList.value = generateBreadcrumb(newVal)
    },
    { immediate: true }
  )
</script>

<style scoped lang="less">
  .breadcrumb {
    margin-bottom: 16px;
    padding: 8px 0;
    border-radius: 4px;
  }
</style>
