fix: support breadcrumb props

examples/demo/form.tsx

@@ -1,12 +1,16 @@
 import { defineComponent } from 'vue';
 import { useRoute } from 'vue-router';
-import { PageContainer } from '../../src';
+import { PageContainer, Route } from '../../src';
 
 export default defineComponent({
   setup() {
     const route = useRoute();
     return () => (
-      <PageContainer>
+      <PageContainer
+        breadcrumb={{
+          routes: [{ path: '/', breadcrumbName: 'home' }] as Route[],
+        }}
+      >
         <h1>Form: {route.meta.title}</h1>
         <pre>{JSON.stringify(route.meta, null, 4)}</pre>
       </PageContainer>

examples/index.tsx

@@ -1,9 +1,9 @@
 import 'ant-design-vue/dist/antd.less';
-import { createApp, defineComponent, watch, ref, watchEffect, onMounted } from 'vue';
+import { createApp, defineComponent, watch, ref, watchEffect, onMounted, computed } from 'vue';
 import { createRouter, createWebHashHistory, useRoute, useRouter, RouterLink } from 'vue-router';
 import { Avatar, Button, Space, Select, Switch } from 'ant-design-vue';
 import { UserOutlined } from '@ant-design/icons-vue';
-import { default as ProLayout, FooterToolbar, WaterMark, getMenuData } from '../src/';
+import { default as ProLayout, FooterToolbar, WaterMark, getMenuData, Route } from '../src/';
 import { globalState as state } from './state';
 import './demo.less';
 
@@ -34,7 +34,12 @@ const BasicLayout = defineComponent({
     const { getRoutes } = useRouter();
     const route = useRoute();
 
-    const { menuData, breadcrumb } = getMenuData(getRoutes());
+    const { menuData } = getMenuData(getRoutes());
+    const breadcrumb = computed(() =>
+      route.matched.concat().map(item => {
+        return { path: item.path, breadcrumbName: item.meta.title } as Route;
+      }),
+    );
 
     const updateSelectedMenu = () => {
       const matched = route.matched.concat().map(item => item.path);
@@ -77,7 +82,6 @@ const BasicLayout = defineComponent({
         siderWidth={state.sideWidth}
         splitMenus={state.splitMenus}
         menuData={menuData}
-        breadcrumbData={breadcrumb}
         collapsed={state.collapsed}
         openKeys={state.openKeys}
         selectedKeys={state.selectedKeys}
@@ -106,16 +110,14 @@ const BasicLayout = defineComponent({
         )}
         breadcrumbRender={({ route: r, routes, paths }) =>
           routes.indexOf(r) === routes.length - 1 ? (
-            <span>{r.breadcrumbName}</span>
+            <span>{i18n(r.breadcrumbName)}</span>
           ) : (
-            <RouterLink to={{ path: `/${paths.join('/')}` }}>{r.breadcrumbName}</RouterLink>
+            <RouterLink to={{ path: `/${paths.join('/')}` }}>{i18n(r.breadcrumbName)}</RouterLink>
           )
         }
-        // {...{
-        //   'onUpdate:collapsed': noop,
-        //   'onUpdate:openKeys': noop,
-        //   'onUpdate:selectedKeys': noop,
-        // }}
+        breadcrumb={{
+          routes: breadcrumb.value,
+        }}
       >
         <WaterMark content="Ant Design Pro of Vue">
           <router-view />
@@ -277,7 +279,7 @@ const router = createRouter({
     {
       path: '/',
       name: 'index',
-      meta: { title: '' },
+      meta: { title: 'home' },
       redirect: '/welcome',
       component: BasicLayout,
       children: routes,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.5",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "repository": {

src/BasicLayout.tsx

@@ -34,7 +34,7 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
 
     breadcrumbRender?: WithFalse<BreadcrumbProps['itemRender']>;
 
-    breadcrumbData?: BreadcrumbProps['routes'];
+    breadcrumb?: BreadcrumbProps;
 
     colSize?: string;
     /**
@@ -119,9 +119,7 @@ const ProLayout = defineComponent({
     const menuHeaderRender = getCustomRender(props, slots, 'menuHeaderRender');
     const footerRender = getCustomRender(props, slots, 'footerRender');
     // const menuRender = getCustomRender(props, slots, 'menuRender');
-
     const breadcrumbRender = getCustomRender(props, slots, 'breadcrumbRender');
-    console.log('breadcrumbRender', breadcrumbRender);
 
     const headerDom = computed(() =>
       headerRender(
@@ -148,10 +146,12 @@ const ProLayout = defineComponent({
     const routeContext: RouteContextProps = reactive({
       getPrefixCls,
       i18n: props.locale || ((t: string) => t),
-      breadcrumb: {
-        routes: propRefs.breadcrumbData,
-        itemRender: breadcrumbRender,
-      },
+      breadcrumb: computed(() => {
+        return {
+          ...props.breadcrumb,
+          itemRender: breadcrumbRender,
+        };
+      }),
       contentWidth: 'Fluid',
       layout: propRefs.layout,
       navTheme: propRefs.navTheme,
@@ -241,8 +241,10 @@ ProLayout.props = {
   menuItemRender: PropRenderType,
   /* 自定义拥有子菜单菜单项的 render 方法 */
   subMenuItemRender: PropRenderType,
-  /* 自定义面包屑的数据 */
+  /* 自定义面包屑的渲染 注意:优先级比 PageContainer props 低 */
   breadcrumbRender: PropRenderType,
+  /* 自定义面包屑的完整数据 注意:优先级比 PageContainer props 低 */
+  breadcrumb: PropTypes.object,
 
   // Event
   onMenuHeaderClick: PropTypes.func,

src/PageContainer/index.tsx

@@ -1,4 +1,4 @@
-import { FunctionalComponent, VNodeChild, ref } from 'vue';
+import { FunctionalComponent, VNodeChild, ref, unref } from 'vue';
 /* replace antd ts define */
 import { TabPaneProps } from './interfaces/TabPane';
 import { TabBarExtraContent, TabsProps } from './interfaces/Tabs';
@@ -148,13 +148,16 @@ const defaultPageHeaderRender = (
   if (!title && title !== false) {
     pageHeaderTitle = value.title;
   }
-  console.log('value.breadcrumb', value.breadcrumb);
   // inject value
   return (
     <PageHeader
       title={pageHeaderTitle}
+      // 拉高了 直接传递 props 的优先级
+      breadcrumb={{
+        routes: unref(value.breadcrumb?.routes),
+        itemRender: value.breadcrumb?.itemRender,
+      }}
       {...restProps}
-      breadcrumb={{ routes: value.breadcrumb?.routes, itemRender: value.breadcrumb?.itemRender }}
       footer={renderFooter({
         ...restProps,
         tabList,

src/RouteContext.tsx

@@ -1,4 +1,4 @@
-import { InjectionKey, reactive, VNodeChild } from 'vue';
+import { InjectionKey, reactive } from 'vue';
 import { createContext, useContext } from './hooks/context';
 import { MenuDataItem, CustomRender } from './typings';
 import { PureSettings } from './defaultSettings';
@@ -12,7 +12,7 @@ export interface BreadcrumbProps {
   prefixCls?: string;
   routes?: Route[];
   params?: any;
-  separator?: VNodeChild;
+  separator?: CustomRender;
   itemRender?: (opts: {
     route: Route;
     params: any;