fix: some custom render

examples/App.vue

 <template>
-  <a-config-provider :getPopupContainer="getPopupContainer">
+  <a-config-provider :get-popup-container="getPopupContainer">
     <router-view />
   </a-config-provider>
 </template>
@@ -12,15 +12,14 @@ export default defineComponent({
   setup() {
     const getPopupContainer = (el: Element, dialogContext: any) => {
       if (dialogContext) {
-          return dialogContext.getDialogWrap();
-        } else {
-          return document.body;
-        }
-    }
+        return dialogContext.getDialogWrap();
+      }
+      return document.body;
+    };
     return {
       getPopupContainer,
-    }
-  }
+    };
+  },
 });
 </script>
 

examples/layouts/BasicLayout.vue

@@ -4,14 +4,30 @@
     v-model:selectedKeys="baseState.selectedKeys"
     v-model:openKeys="baseState.openKeys"
     v-bind="state"
+    :collapsed-button-render="false"
+    :breadcrumb="{ routes: breadcrumb }"
   >
-    <template #collapsedButtonRender>
-      <a-button>abc</a-button>
+    <!-- only work layout `Side` -->
+    <template #headerContentRender>
+      <a :style="{ margin: '0 8px', fontSize: '20px' }" @click="handleCollapsed">
+        <MenuUnfoldOutlined v-if="baseState.collapsed" />
+        <MenuFoldOutlined v-else />
+      </a>
+      <span>some..</span>
     </template>
     <!-- custom right-content -->
     <template #rightContentRender>
       <span style="color: #0f0">right</span>
     </template>
+    <!-- custom breadcrumb itemRender  -->
+    <template #breadcrumbRender="{ route, params, routes, paths }">
+      <span v-if="routes.indexOf(route) === routes.length - 1">
+        {{ route.breadcrumbName }}
+      </span>
+      <router-link v-else :to="{ path: paths.join('/'), params }">
+        {{ route.breadcrumbName }}
+      </router-link>
+    </template>
     <!-- content begin -->
     <router-view />
     <!-- content end -->
@@ -41,7 +57,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, watchEffect } from 'vue';
+import { computed, defineComponent, reactive, watchEffect } from 'vue';
 import { useRouter } from 'vue-router';
 import { Button, Switch, Select, Space } from 'ant-design-vue';
 import { getMenuData, clearMenuItem, FooterToolbar } from '@ant-design-vue/pro-layout';
@@ -61,8 +77,8 @@ export default defineComponent({
   },
   setup() {
     const router = useRouter();
-    const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
 
+    const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
     const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
       selectedKeys: [],
       openKeys: [],
@@ -75,19 +91,39 @@ export default defineComponent({
       splitMenus: false,
       title: 'ProLayout',
       logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
-      navTheme: 'light',
+      navTheme: 'dark',
       layout: 'mix',
     });
+    const breadcrumb = computed(() =>
+      router.currentRoute.value.matched.concat().map(item => {
+        return {
+          path: item.path,
+          breadcrumbName: item.meta.title || '',
+        };
+      }),
+    );
 
+    const handleCollapsed = () => {
+      baseState.collapsed = !baseState.collapsed;
+    };
     watchEffect(() => {
       if (router.currentRoute) {
-        baseState.selectedKeys = router.currentRoute.value.matched.concat().map(r => r.path);
+        const matched = router.currentRoute.value.matched.concat();
+        baseState.selectedKeys = matched.map(r => r.path);
+        baseState.openKeys = matched
+          .filter(r => r.path !== router.currentRoute.value.path)
+          .map(r => r.path);
+
+        console.log('baseState', baseState);
       }
     });
     return {
       i18n,
       baseState,
       state,
+      breadcrumb,
+
+      handleCollapsed,
     };
   },
 });

examples/layouts/RouteView.vue

+<template>
+  <router-view />
+</template>

examples/main.ts

+import 'ant-design-vue/es/style';
+import { ConfigProvider } from 'ant-design-vue';
+
 import { createApp } from 'vue';
 import router from './router';
 import icons from './icons';
 import App from './App.vue';
-import { ConfigProvider }from 'ant-design-vue';
-import ProLayout, { PageContainer } from '../src';
 
-import 'ant-design-vue/es/style';
+import '../dist/style.less';
+import ProLayout, { PageContainer } from '../src'; // '../dist/pro-layout.es';
 
 const app = createApp(App);
 app.use(router);

examples/router.ts

 import { createRouter, createWebHistory } from 'vue-router';
 import type { RouteRecordRaw } from 'vue-router';
 import BasicLayout from './layouts/BasicLayout.vue';
+import RouteView from './layouts/RouteView.vue';
 
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'index',
-    meta: { title: '' },
+    meta: { title: 'Home' },
     component: BasicLayout,
-    redirect: '/monitor',
+    redirect: '/dashboard',
     children: [
       {
         path: '/dashboard',
         name: 'dashboard',
-        meta: { title: 'Dashboard', icon: 'SettingOutlined' },
-        component: () => import('./views/page1.vue'),
-      },
-      {
-        path: '/monitor',
-        name: 'monitor',
-        meta: { title: 'Monitor', icon: 'DatabaseOutlined' },
-        component: () => import('./views/page2.vue'),
+        meta: { title: 'Dashboard' },
+        redirect: '/dashboard/monitor',
+        component: RouteView,
+        children: [
+          {
+            path: 'workspace',
+            name: 'workspace',
+            meta: { title: 'Dashboard', icon: 'SettingOutlined' },
+            component: () => import('./views/page1.vue'),
+          },
+          {
+            path: 'monitor',
+            name: 'monitor',
+            meta: { title: 'Monitor', icon: 'DatabaseOutlined' },
+            component: () => import('./views/page2.vue'),
+          },
+        ],
       },
     ],
   },
@@ -28,6 +38,5 @@ const routes: RouteRecordRaw[] = [
 
 export default createRouter({
   history: createWebHistory(),
-  routes: routes,
+  routes,
 });
-

examples/shims-vue.d.ts

 declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  import { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }

package.json

 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.1.0-alpha.4",
+  "version": "3.1.0-alpha.5",
   "license": "MIT",
   "files": [
     "dist",

src/BasicLayout.tsx

@@ -55,6 +55,10 @@ export const basicLayoutProps = {
     type: [Object, Function, Boolean] as PropType<WithFalse<BreadcrumbProps['itemRender']>>,
     default: () => {},
   },
+  headerContentRender: {
+    type: [Function, Object, Boolean] as PropType<WithFalse<() => CustomRender>>,
+    default: () => undefined,
+  },
   headerRender: {
     type: [Object, Function, Boolean] as PropType<
       WithFalse<(props: any /* HeaderProps */) => CustomRender>
@@ -148,7 +152,7 @@ const ProLayout = defineComponent({
     const headerRender = (
       p: BasicLayoutProps & {
         hasSiderMenu: boolean;
-        customHeaderRender: WithFalse<CustomRender>;
+        headerRender: WithFalse<CustomRender>;
         rightContentRender: WithFalse<CustomRender>;
       },
       matchMenuKeys?: string[],
@@ -158,14 +162,18 @@ const ProLayout = defineComponent({
       }
       return <Header {...p} matchMenuKeys={matchMenuKeys || []} />;
     };
-
-    const collapsedButtonRender = getPropsSlot(slots, props, 'collapsedButtonRender');
+    const collapsedButtonRender =
+      props.collapsedButtonRender === false
+        ? false
+        : getPropsSlot(slots, props, 'collapsedButtonRender');
+    const headerContentRender = getPropsSlot(slots, props, 'headerContentRender');
     const rightContentRender = getPropsSlot(slots, props, 'rightContentRender');
     const customHeaderRender = getPropsSlot(slots, props, 'headerRender');
     const menuHeaderRender = getPropsSlot(slots, props, 'menuHeaderRender');
     const footerRender = getPropsSlot(slots, props, 'footerRender');
     // const menuRender = getPropsSlot(slots, props, 'menuRender');
     const breadcrumbRender = props['breadcrumbRender'] || slots['breadcrumbRender'];
+
     const headerDom = computed(() =>
       headerRender(
         {
@@ -177,22 +185,24 @@ const ProLayout = defineComponent({
           onOpenKeys,
           onSelect,
           onMenuHeaderClick,
-          customHeaderRender,
           rightContentRender,
           headerTitleRender: menuHeaderRender,
+          headerContentRender: headerContentRender,
+          headerRender: customHeaderRender,
           theme: (props.navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
         },
         props.matchMenuKeys,
       ),
     );
 
+    console.log('refProps.breadcrumb', refProps.breadcrumb);
     const routeContext = reactive({
       getPrefixCls,
       // ...props,
       locale: refProps.locale.value || defaultRouteContext.locale,
       breadcrumb: computed(() => {
         return {
-          ...refProps.breadcrumb,
+          ...props.breadcrumb,
           itemRender: breadcrumbRender,
         };
       }),

src/GridContent/GridContent.less

-@import 'ant-design-vue/es/style/themes/default.less';
-
-@pro-layout-grid-content-prefix-cls: ~'@{ant-prefix}-pro-grid-content';
-
-.@{pro-layout-grid-content-prefix-cls} {
-  width: 100%;
-  &.wide {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-}
\ No newline at end of file

src/Header.tsx

@@ -58,6 +58,7 @@ export const HeaderView = defineComponent({
     const needFixedHeader = computed(
       () => fixedHeader.value || context.fixedHeader || layout.value === 'mix',
     );
+    const isMix = computed(() => layout.value === 'mix');
     const isTop = computed(() => layout.value === 'top');
     const needSettingWidth = computed(
       () => needFixedHeader.value && hasSiderMenu.value && !isTop.value && !isMobile.value,
@@ -76,7 +77,11 @@ export const HeaderView = defineComponent({
     const renderContent = () => {
       let defaultDom = (
         <GlobalHeader {...props} onCollapse={onCollapse.value} menuData={clearMenuData.value}>
-          {props.headerContentRender && props.headerContentRender(props)}
+          {!isMix.value
+            ? props.headerContentRender && typeof props.headerContentRender === 'function'
+              ? props.headerContentRender(props)
+              : props.headerContentRender
+            : null}
         </GlobalHeader>
       );
       if (isTop.value && !isMobile.value) {

src/PageContainer/index.tsx

@@ -210,7 +210,7 @@ const defaultPageHeaderRender = (
   }
 
   const breadcrumb = restProps.breadcrumb || {
-    routes: unref(value.breadcrumb?.routes),
+    routes: value.breadcrumb?.routes,
     itemRender: value.breadcrumb?.itemRender,
   };
   // inject value

src/SiderMenu/BaseMenu.tsx

@@ -254,6 +254,7 @@ export default defineComponent({
     }) => {
       emit('click', args);
     };
+    console.log('openKeys', props.openKeys);
     return () => (
       <Menu
         key="Menu"

src/SiderMenu/SiderMenu.tsx

@@ -172,7 +172,9 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
       [`${baseClassName}-fixed`]: context.fixSiderbar,
     };
   });
-  const hasSide = computed(() => (props.layout === 'mix' && props.splitMenus) || false);
+  const hasSide = computed(
+    () => ((props.layout === 'mix' || props.layout === 'side') && props.splitMenus) || false,
+  );
   const flatMenuData = computed(() => {
     return (hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0])) || [];
   });

src/shims-vue.d.ts

 declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  import { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }