MBreadcrumb 组件文档

组件概述

MBreadcrumb 是一个增强型面包屑导航组件，结合了 Ant Design 的 Breadcrumb 和 Affix 组件，提供固定定位的面包屑导航和可定制的操作按钮区域。

组件属性 (Props)

IMBreadcrumbProps

属性名	类型	默认值	描述
routes	RouteItem[]	-	面包屑导航的路由配置数组
customItems	IRowItem[]	-	自定义操作按钮配置数组（使用 ItemsRow 组件渲染）
style	React.CSSProperties	-	容器 div 的行内样式
className	string	-	容器 div 的额外类名
offsetTop	number	64	Affix 组件距离顶部的偏移量（像素）
mainAppBaseUrl	string	-	主应用基础 URL，用于构建完整路由路径
microAppName	string	-	微应用名称，用于构建完整路由路径

RouteItem (路由项配置)

属性名	类型	描述
name	string	路由显示名称
url	string	路由路径（可选）

使用示例

基本用法

<MBreadcrumb
    routes={[{ name: '首页', url: '/' }, { name: '用户管理', url: '/users' }, { name: '用户详情' }]}
/>

带操作按钮

<MBreadcrumb
  routes={[...]}
  customItems={[
    { label: '编辑', type: 'primary', onClick: handleEdit },
    { label: '删除', type: 'default', onClick: handleDelete }
  ]}
/>

自定义样式和定位

<MBreadcrumb
  routes={[...]}
  className="custom-breadcrumb"
  style={{ marginBottom: 16 }}
  offsetTop={80}
/>

微前端场景使用

<MBreadcrumb
    routes={[
        { name: '主应用', url: '/' },
        { name: '订单模块', url: '/orders' },
    ]}
    mainAppBaseUrl='/main-app'
    microAppName='order-app'
/>

功能特性

• 固定定位：通过 Affix 组件实现滚动时固定定位
• 路由生成：自动处理主应用和微应用的路由拼接
• 响应式滚动：监听滚动事件并更新 Affix 位置
• 主题支持：通过 CompThemeProvider 支持主题配置
• 操作按钮区：右侧可配置自定义操作按钮

CSS 类名结构

组件生成的 HTML 结构包含以下类名：

• 容器: m-breadcrumb
• 卡片容器: m-breadcrumb-container
• 卡片内容: m-breadcrumb-body
• 面包屑区域: m-breadcrumb-inner-breadcrumb
• 操作按钮容器: m-breadcrumb-custom-item-wrapper

可以通过这些类名来自定义样式：

/* 自定义面包屑容器样式 */
.m-breadcrumb {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    &-container {
        padding: 12px 24px;
    }

    /* 自定义面包屑文字大小 */
    &-inner-breadcrumb {
        font-size: 16px !important;
    }
}

方法说明

• getUrl(url: string)
• 处理路由 URL 的方法，用于拼接主应用和微应用的基础路径：
• 去除 URL 开头的斜杠
• 拼接顺序：mainAppBaseUrl + microAppName + cleanedUrl
• 过滤空值并添加前导斜杠

示例：

getUrl('/users');
// 输入: '/users'
// 输出: '/main-app/order-app/users'
// (当 mainAppBaseUrl='/main-app' 且 microAppName='order-app')

注意事项

• 组件内部监听了 scroll 事件，确保在组件卸载时正确移除监听器
• 使用 Affix 组件需要确保父容器有足够的空间和正确的定位上下文
• customItems 属性将传递给 ItemsRow 组件渲染
• 当 url 为空时，面包屑项将渲染为纯文本而非链接