fix: breadcrumbRender

examples/demo/form.tsx

 import { defineComponent } from 'vue';
 import { useRoute } from 'vue-router';
+import { PageContainer } from '../../src';
 
 export default defineComponent({
   setup() {
     const route = useRoute();
     return () => (
-      <div>
+      <PageContainer>
         <h1>Form: {route.meta.title}</h1>
         <pre>{JSON.stringify(route.meta, null, 4)}</pre>
-      </div>
+      </PageContainer>
     );
   },
 });

examples/index.tsx

 import 'ant-design-vue/dist/antd.less';
 import { createApp, defineComponent, watch, ref, watchEffect, onMounted } from 'vue';
-import { createRouter, createWebHashHistory, useRoute, useRouter, RouteRecord } from 'vue-router';
+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, FormatMessage } from '../src/';
+import { default as ProLayout, FooterToolbar, WaterMark, getMenuData } from '../src/';
 import { globalState as state } from './state';
 import './demo.less';
 
@@ -27,11 +27,6 @@ const i18n = (key: string): string => {
   return locales[key] || key;
 };
 
-const getMenuData = (routes: RouteRecord[]) => {
-  const childrenRoute = routes.find(route => route.path === '/');
-  return childrenRoute?.children || [];
-};
-
 const BasicLayout = defineComponent({
   name: 'BasicLayout',
   inheritAttrs: false,
@@ -39,7 +34,7 @@ const BasicLayout = defineComponent({
     const { getRoutes } = useRouter();
     const route = useRoute();
 
-    const menuData = getMenuData(getRoutes());
+    const { menuData, breadcrumb } = getMenuData(getRoutes());
 
     const updateSelectedMenu = () => {
       const matched = route.matched.concat().map(item => item.path);
@@ -82,6 +77,7 @@ const BasicLayout = defineComponent({
         siderWidth={state.sideWidth}
         splitMenus={state.splitMenus}
         menuData={menuData}
+        breadcrumbData={breadcrumb}
         collapsed={state.collapsed}
         openKeys={state.openKeys}
         selectedKeys={state.selectedKeys}
@@ -108,6 +104,13 @@ const BasicLayout = defineComponent({
             {state.collapsed && state.layout !== 'mix' ? null : <h1>Pro Preview</h1>}
           </a>
         )}
+        breadcrumbRender={({ route: r, routes, paths }) =>
+          routes.indexOf(r) === routes.length - 1 ? (
+            <span>{r.breadcrumbName}</span>
+          ) : (
+            <RouterLink to={{ path: `/${paths.join('/')}` }}>{r.breadcrumbName}</RouterLink>
+          )
+        }
         // {...{
         //   'onUpdate:collapsed': noop,
         //   'onUpdate:openKeys': noop,

package.json

@@ -23,6 +23,7 @@
   },
   "peerDependencies": {
     "ant-design-vue": "^2.0.0",
+    "vue-router": "^4.0.3",
     "vue": ">=3.0.0"
   },
   "devDependencies": {

src/BasicLayout.tsx

@@ -2,7 +2,7 @@ import { computed, CSSProperties, reactive, unref, provide, defineComponent, toR
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import { withInstall } from 'ant-design-vue/es/_util/type';
-import { getPrefixCls, RouteContextProps } from './RouteContext';
+import { BreadcrumbProps, getPrefixCls, RouteContextProps } from './RouteContext';
 import { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu';
 import { WrapContent } from './WrapContent';
 import { default as Header, HeaderViewProps } from './Header';
@@ -32,6 +32,10 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
 
     headerRender?: WithFalse<(props: any /* HeaderProps */) => CustomRender>;
 
+    breadcrumbRender?: WithFalse<BreadcrumbProps['itemRender']>;
+
+    breadcrumbData?: BreadcrumbProps['routes'];
+
     colSize?: string;
     /**
      * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
@@ -116,6 +120,9 @@ const ProLayout = defineComponent({
     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(
         {
@@ -141,6 +148,10 @@ const ProLayout = defineComponent({
     const routeContext: RouteContextProps = reactive({
       getPrefixCls,
       i18n: props.locale || ((t: string) => t),
+      breadcrumb: {
+        routes: propRefs.breadcrumbData,
+        itemRender: breadcrumbRender,
+      },
       contentWidth: 'Fluid',
       layout: propRefs.layout,
       navTheme: propRefs.navTheme,

src/PageContainer/index.tsx

@@ -148,11 +148,13 @@ const defaultPageHeaderRender = (
   if (!title && title !== false) {
     pageHeaderTitle = value.title;
   }
+  console.log('value.breadcrumb', value.breadcrumb);
   // inject value
   return (
     <PageHeader
       title={pageHeaderTitle}
       {...restProps}
+      breadcrumb={{ routes: value.breadcrumb?.routes, itemRender: value.breadcrumb?.itemRender }}
       footer={renderFooter({
         ...restProps,
         tabList,
@@ -219,4 +221,6 @@ const PageContainer: FunctionalComponent<PageContainerProps> = (props, { slots }
   );
 };
 
+PageContainer.displayName = 'page-container';
+
 export default withInstall(PageContainer);

src/RouteContext.tsx

 import { InjectionKey, reactive, VNodeChild } from 'vue';
 import { createContext, useContext } from './hooks/context';
-import { MenuDataItem } from './typings';
+import { MenuDataItem, CustomRender } from './typings';
 import { PureSettings } from './defaultSettings';
 export interface Route {
   path: string;
@@ -18,7 +18,7 @@ export interface BreadcrumbProps {
     params: any;
     routes: Array<Route>;
     paths: Array<string>;
-  }) => VNodeChild;
+  }) => CustomRender;
 }
 
 export type BreadcrumbListReturn = Pick<

src/WaterMark/index.tsx

@@ -142,11 +142,11 @@ const WaterMark: FC<WaterMarkProps> = (props, { slots }) => {
       style={{
         position: 'relative',
       }}
-      class={wrapperCls}
+      class={wrapperCls.value}
     >
       {slots.default?.()}
       <div
-        class={waterMakrCls}
+        class={waterMakrCls.value}
         style={{
           zIndex,
           position: 'absolute',

src/WrapContent.tsx

@@ -16,6 +16,9 @@ export interface WrapContentProps {
 }
 
 export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slots, attrs }) => {
+  if (props.isChildrenLayout) {
+    return slots.default?.();
+  }
   const { getPrefixCls } = toRefs(useRouteContext());
   const prefixCls = getPrefixCls.value('basicLayout');
   const classNames = computed(() => {
@@ -33,3 +36,4 @@ export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slot
 };
 
 WrapContent.inheritAttrs = false;
+WrapContent.displayName = 'wrap-content';

src/index.ts

 export * from './RouteContext';
 export * from './typings';
+export * from './utils/getMenuData';
 export { createContext, useContext, ContextType, CreateContext } from './hooks/context';
 export { default as FooterToolbar } from './FooterToolbar';
 export { default as GlobalFooter } from './GlobalFooter';
@@ -12,7 +13,7 @@ export { WrapContent } from './WrapContent';
 //   ProProviderData,
 // } from './ProProvider';
 export { default as PageContainer } from './PageContainer';
-export { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu/index';
+export { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu';
 export {
   default as BaseMenu,
   BaseMenuProps,

src/utils/getMenuData.ts

+import { RouteRecordRaw } from 'vue-router';
+
+export type MenuData = {
+  menuData: RouteRecordRaw[];
+  breadcrumb: Record<string, any>;
+};
+
+const formatRelativePath = (
+  routes: RouteRecordRaw[],
+  breadcrumb: Record<string, any>,
+  parent?: RouteRecordRaw,
+): RouteRecordRaw[] => {
+  // 计算路由绝对路径
+  return routes.map(route => {
+    if (route.path.startsWith('/')) {
+      return route;
+    }
+    if (parent) {
+      route.path = `${parent.path || ''}/${route.path}`;
+    } else {
+      route.path = `/${route.path}`;
+    }
+    route.path = route.path.replace('//', '/');
+    // format children routes
+    if (route.children && route.children.length > 0) {
+      route.children = formatRelativePath(route.children, route);
+    }
+    breadcrumb[`${route.path}`] = route;
+    return route;
+  });
+};
+
+export const getMenuData = (routes: RouteRecordRaw[]): MenuData => {
+  const childrenRoute = routes.find(route => route.path === '/');
+  const breadcrumb: Record<string, any> = {};
+  return {
+    menuData: formatRelativePath(childrenRoute?.children || ([] as RouteRecordRaw[]), breadcrumb),
+    breadcrumb,
+  };
+};