顶部导航样式调整

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: lastSegment,
+        name: 'home',
         path: pathname,
         href,
         fullPath: href,
         meta: {
-        title: lastSegment === 'home' ? '首页' : lastSegment,
+          title: '首页',
+          affix: true
+        }
+      };
+    }
+
+    // 获取最后一段作为页面名称
+    const lastPart = parts[parts.length - 1];
+
+    // 使用最后一段作为标题
+    const routeTitle = lastPart || '未知页面';
+
+    return {
+      name: lastPart.replace(/\//g, '_') || 'home',
+      path: pathname,
+      href,
+      fullPath: href,
+      meta: {
+        title: routeTitle,
         affix: pathname === '/'
       }
     };
@@ -214,8 +249,8 @@ const CustomBreadcrumb = () => {
             className={`breadcrumb-item ${item.name === currentRouterName ? 'breadcrumb-item-active' : ''}`}
           >
             <span className="breadcrumb-item-content">
-              <span className="breadcrumb-item-text">{item.title}</span>
-              <CloseOutlined
+              <span className={`breadcrumb-item-text ${item.name === currentRouterName ? 'breadcrumb-item-text-active' : ''}`}>{item.title}</span>
+              <CloseCircleOutlined
                 className="breadcrumb-close-icon"
                 onClick={(e) => {
                   e.stopPropagation();

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;