# 动态面包屑导航实现说明

## 功能介绍

本项目实现了动态修改页面面包屑名称的功能，特别适用于新增和修改页面共用一个组件的场景。通过 dva 状态管理，可以在具体页面中动态设置面包屑导航的最后一级显示文本。

## 实现原理

1. 通过 `breadcrumb` 模型管理面包屑状态
2. 使用 `connect` 将 `breadcrumb` 状态连接到布局组件
3. 在页面组件中根据不同条件（如是否有 id 参数）来动态设置面包屑名称

## 代码结构

- `src/models/breadcrumb.ts` - 面包屑状态模型
- `src/layouts/BasicLayout.tsx` - 支持动态面包屑的布局组件

## 使用示例

### 实际项目中的使用方式 (supplierAnnualTemplateManageAdd.tsx)

```tsx
import React, { useEffect } from 'react';
import { useIntl, connect } from 'umi';
import type { Dispatch } from 'umi';
import type { BreadcrumbState } from '@/models/breadcrumb';

// 组件 props 接口定义
interface PageProps extends ConnectProps {
  breadcrumb: BreadcrumbState; // dva model状态
  dispatch: Dispatch; // dva dispatch方法
}

const YourPage: React.FC<PageProps> = ({ dispatch }) => {
  const intl = useIntl();
  const location = useLocation();
  
  // 设置面包屑名称
  useEffect(() => {
    if (location.state?.editData?.id && dispatch) {
      // 编辑模式，设置编辑相关的面包屑
      dispatch({
        type: 'breadcrumb/updateBreadcrumbName',
        payload: intl.formatMessage({ id: "yourNamespace.add.edit" }),
      });
    } else {
      // 新增模式，设置新增相关的面包屑
      dispatch({
        type: 'breadcrumb/updateBreadcrumbName',
        payload: intl.formatMessage({ id: "yourNamespace.add.title" }),
      });
    }

    // 组件卸载时重置面包屑
    return () => {
      dispatch({
        type: 'breadcrumb/resetBreadcrumb',
      });
    };
  }, [dispatch, intl, location]);
  
  // 页面其他内容...
  return (
    <div>
      {/* 页面内容... */}
    </div>
  );
};

// 将dva model中的状态映射到组件props
export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbState }) => ({
  breadcrumb,
}))(YourPage);
```

### 关键实现点

1. 在页面组件中通过 connect 连接到 dva 状态：

```tsx
// 将dva model中的状态映射到组件props
export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbState }) => ({
  breadcrumb,
}))(YourPage);
```

2. 在 useEffect 中动态设置面包屑名称：

```tsx
useEffect(() => {
  // 根据条件设置不同的面包屑名称
  if (location.state?.editData?.id) {
    dispatch({
      type: 'breadcrumb/updateBreadcrumbName',
      payload: intl.formatMessage({ id: "yourNamespace.add.edit" }),
    });
  } else {
    dispatch({
      type: 'breadcrumb/updateBreadcrumbName',
      payload: intl.formatMessage({ id: "yourNamespace.add.title" }),
    });
  }

  // 组件卸载时重置面包屑
  return () => {
    dispatch({
      type: 'breadcrumb/resetBreadcrumb',
    });
  };
}, [dispatch, intl, location]);
```

## 注意事项

1. **payload 必须是字符串**：传递给 `updateBreadcrumbName` action 的 payload 必须是字符串类型，不能是对象或 React 组件
   - 正确：`payload: intl.formatMessage({ id: "menu.edit" })`
   - 错误：`payload: { breadcrumbName: <FormattedMessage id="menu.edit" /> }`

2. **重置面包屑**：确保在组件卸载时调用 `resetBreadcrumb` 以重置面包屑状态

3. **国际化处理**：使用 `intl.formatMessage()` 方法处理国际化文本，不要在 payload 中直接使用 FormattedMessage 组件

4. **依赖项管理**：确保 useEffect 的依赖项包含 `dispatch`, `intl` 和用于条件判断的变量（如 `location`）