diff --git a/src/components/GlobalComponent/Breadcrumb.jsx b/src/components/GlobalComponent/Breadcrumb.jsx
index 229ab12..711faac 100644
--- a/src/components/GlobalComponent/Breadcrumb.jsx
+++ b/src/components/GlobalComponent/Breadcrumb.jsx
@@ -1,9 +1,8 @@
import React, { useState, useEffect } from 'react';
import { Breadcrumb } from 'antd';
-import { CloseOutlined } from '@ant-design/icons';
-import { history, useLocation, matchRoutes } from '@umijs/max';
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { history, useLocation } from '@umijs/max';
import './breadcrumb.less';
-import routes from '../../../config/routes';
const CustomBreadcrumb = () => {
// 从sessionStorage初始化面包屑数据,与Vue实例保持一致
@@ -15,6 +14,24 @@ const CustomBreadcrumb = () => {
const location = useLocation();
+ // 递归搜索window.dynamicRoute中匹配当前路径的路由项
+ const findMatchedRoute = (routes, pathname) => {
+ for (const route of routes) {
+ // 检查当前路由项是否匹配
+ if (route.key === pathname) {
+ return route;
+ }
+ // 如果有子路由,递归搜索
+ if (route.children && route.children.length > 0) {
+ const matchedChild = findMatchedRoute(route.children, pathname);
+ if (matchedChild) {
+ return matchedChild;
+ }
+ }
+ }
+ return null;
+ };
+
// 获取当前路由的真实信息
const getCurrentRoute = () => {
const pathname = location.pathname || '/';
@@ -22,23 +39,22 @@ const CustomBreadcrumb = () => {
console.log('当前路径:', pathname);
- // 使用matchRoutes匹配当前路径与路由配置
- const matchedRoutes = matchRoutes(routes, pathname);
-
- console.log('匹配的路由:', matchedRoutes);
-
- // 如果有匹配的路由,获取最深层的匹配路由信息
- if (matchedRoutes && matchedRoutes.length > 0) {
- const matchedRoute = matchedRoutes[matchedRoutes.length - 1]; // 获取最深层的匹配路由
- const routeConfig = matchedRoute.route;
+ // 使用自定义函数在window.dynamicRoute中匹配当前路径
+ let matchedRoute = null;
+ if (window.dynamicRoute && Array.isArray(window.dynamicRoute)) {
+ matchedRoute = findMatchedRoute(window.dynamicRoute, pathname);
+ }
- console.log('匹配的路由配置:', routeConfig);
+ console.log('匹配的路由:', matchedRoute);
- // 根据路由配置文件,直接使用routeConfig.name作为标题,这样可以确保名称正确显示
- const routeTitle = routeConfig.name || '未知页面';
+ // 如果有匹配的路由,获取路由信息
+ if (matchedRoute) {
+ // 使用route.label作为标题,route.key作为路径标识符
+ const routeTitle = matchedRoute.label || '未知页面';
+ const routeKey = matchedRoute.key || pathname;
return {
- name: routeConfig.name || pathname.replace(/\//g, '_').slice(1) || 'home',
+ name: routeKey.replace(/\//g, '_').slice(1) || 'home',
path: pathname,
href,
fullPath: href,
@@ -49,18 +65,37 @@ const CustomBreadcrumb = () => {
};
}
- // 手动处理特殊情况,确保即使matchRoutes不工作,也能显示正确的路由名称
- const pathSegments = pathname.split('/').filter(Boolean);
- const lastSegment = pathSegments[pathSegments.length - 1] || 'home';
+ // 如果没有从window.dynamicRoute中匹配到路由,使用原来的逻辑处理
+ // 将路径按照/分割,获取最后一段作为名称
+ const parts = pathname.split('/').filter(Boolean);
+
+ // 根路径处理
+ if (parts.length === 0) {
+ return {
+ name: 'home',
+ path: pathname,
+ href,
+ fullPath: href,
+ meta: {
+ title: '首页',
+ affix: true
+ }
+ };
+ }
+
+ // 获取最后一段作为页面名称
+ const lastPart = parts[parts.length - 1];
+
+ // 使用最后一段作为标题
+ const routeTitle = lastPart || '未知页面';
- // 直接返回路径的最后一段作为名称
return {
- name: lastSegment,
+ name: lastPart.replace(/\//g, '_') || 'home',
path: pathname,
href,
fullPath: href,
meta: {
- title: lastSegment === 'home' ? '首页' : lastSegment,
+ title: routeTitle,
affix: pathname === '/'
}
};
@@ -214,8 +249,8 @@ const CustomBreadcrumb = () => {
className={`breadcrumb-item ${item.name === currentRouterName ? 'breadcrumb-item-active' : ''}`}
>
- {item.title}
- {item.title}
+ {
e.stopPropagation();
diff --git a/src/components/GlobalComponent/breadcrumb.less b/src/components/GlobalComponent/breadcrumb.less
index acd336f..8efef5b 100644
--- a/src/components/GlobalComponent/breadcrumb.less
+++ b/src/components/GlobalComponent/breadcrumb.less
@@ -47,9 +47,10 @@
.breadcrumb-item {
height: 32px;
padding: 0 12px;
- border-radius: 16px;
- background-color: #fff;
- border: 1px solid #E8E8E8;
+ border-radius: 8px;
+ // 使用rgba格式设置带透明度的背景色,最后一个参数0.13表示13%的透明度
+ background-color: rgba(186, 186, 186, 0.13);
+ // border: 1px solid #E8E8E8;
margin-right: 8px;
display: flex;
align-items: center;
@@ -91,8 +92,8 @@
// 面包屑项选中状态样式
.breadcrumb-item-active {
- background-color: #ECF2FF;
- border-color: #0056FF;
+ background-color: rgba(94, 121, 246, 0.13);
+ // border-color: #0056FF;
.ant-breadcrumb-link {
color: #0056FF !important;
@@ -100,6 +101,12 @@
}
}
+// 面包屑文本选中状态样式 - 对应第252行代码中的条件样式
+.breadcrumb-item-text-active {
+ color: #0056FF !important;
+ font-weight: 500;
+}
+
// 面包屑项内容容器
.breadcrumb-item-content {
display: flex;
@@ -112,17 +119,22 @@
// 面包屑项文本样式
.breadcrumb-item-text {
- font-size: 14px;
+ font-weight: 500;
+ font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
+
+ .breadcrumb-item-text-active {
+ color: #0056FF !important;
+ }
}
// 关闭图标样式
.breadcrumb-close-icon {
font-size: 14px;
- color: #7D9CD8;
+ // color: #7D9CD8;
margin-left: 8px;
display: flex;
align-items: center;