From 648ead93b1712ceef7065ccc2c6570a4f7da4615 Mon Sep 17 00:00:00 2001 From: yupeng Date: Mon, 22 Sep 2025 10:52:10 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/GlobalComponent/Breadcrumb.jsx | 83 +++++++++++++------ .../GlobalComponent/breadcrumb.less | 26 ++++-- 2 files changed, 78 insertions(+), 31 deletions(-) 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;