动态更新面包屑导航

README.md

@@ -0,0 +1,123 @@
+# 动态面包屑导航实现说明
+
+## 功能介绍
+
+本项目实现了动态修改页面面包屑名称的功能，特别适用于新增和修改页面共用一个组件的场景。通过 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`）