diff --git a/src/components/Common/Breadcrumb.vue b/src/components/Common/Breadcrumb.vue index aed7848..8ce3339 100644 --- a/src/components/Common/Breadcrumb.vue +++ b/src/components/Common/Breadcrumb.vue @@ -8,17 +8,10 @@ - {{ - item.title || item.name - }} - {{ item.title || item.name }} + {{ item.title }} @@ -28,84 +21,30 @@ import { computed } from "vue"; import { useRoute } from "vue-router"; import { menuConfig } from "../../constants/menuConfig.js"; -// 更簡潔的選單查找與麵包屑組裝 -function findMenuItem(route) { - for (const menu of menuConfig) { - for (const child of menu.children) { - // 靜態路由、名稱 - if (child.routeName === route.name || child.path === route.path) { - return { parent: menu, item: child }; - } - // 動態路由(如 /plant/:id) - if ( - child.routeName === "PlantInfo" && - route.path && - route.path.startsWith("/plant/") - ) { - return { parent: menu, item: child }; +const route = useRoute(); + +function findBreadcrumbs(menu, route, path = []) { + for (const item of menu) { + const currentPath = [...path, { title: item.title, name: item.routeName || null }]; + if (item.routeName === route.name) { + if (item.params) { + const paramsMatch = Object.keys(item.params).every(key => item.params[key] == route.params[key]); + if (paramsMatch) { + return currentPath; + } + } else { + return currentPath; } } + if (item.children) { + const result = findBreadcrumbs(item.children, route, currentPath); + if (result) return result; + } } return null; } -function buildBreadcrumb(route) { - const match = findMenuItem(route); - if (!match) return []; - const crumbs = [ - { - name: match.parent.title, - title: match.parent.title, - path: null, - meta: { title: match.parent.title }, - }, - ]; - let itemTitle = match.item.title; - if (route.name === "PlantInfo" && route.params.id) { - const plantNames = { - "1": "四磺子坪", - "2": "宜蘭大清水", - "3": "宜蘭小清水", - }; - itemTitle = plantNames[route.params.id] || match.item.title; - } - crumbs.push({ - name: itemTitle, - title: itemTitle, - path: match.item.path, - meta: { title: itemTitle }, - }); - return crumbs; -} - -const route = useRoute(); - const breadcrumbs = computed(() => { - const menuBreadcrumbs = buildBreadcrumb(route); - if (menuBreadcrumbs.length > 0) { - return menuBreadcrumbs; - } - const matchedRoutes = route.matched.filter((r) => r.meta && r.meta.title); - if (matchedRoutes.length === 0) { - return []; - } - const currentRoute = matchedRoutes[matchedRoutes.length - 1]; - if (currentRoute.meta.parentTitle) { - return [ - { - title: currentRoute.meta.parentTitle, - path: null, - }, - { - title: currentRoute.meta.title, - path: currentRoute.path, - }, - ]; - } - return matchedRoutes.map((r) => ({ - title: r.meta.title, - name: r.name, - path: r.path, - })); + return findBreadcrumbs(menuConfig, route) || []; }); diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 94db2c8..fb1c03c 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -16,7 +16,7 @@ 結元能源 - +