fix: PageHeader title, menuHeaderRender

package.json

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

src/BasicLayout.tsx

@@ -71,6 +71,7 @@ const ProLayout = defineComponent({
     'openKeys',
     'select',
     'menuHeaderClick',
+    'menuClick',
   ],
   props: basicLayoutProps,
   setup(props, { emit, slots }) {
@@ -96,6 +97,9 @@ const ProLayout = defineComponent({
     const onMenuHeaderClick = (e: MouseEvent) => {
       emit('menuHeaderClick', e);
     };
+    const onMenuClick = (args: any) => {
+      emit('menuClick', args);
+    };
 
     const colSize = useMediaQuery();
     const isMobile = computed(
@@ -170,7 +174,7 @@ const ProLayout = defineComponent({
 
     const routeContext = reactive({
       getPrefixCls,
-      ...props,
+      // ...props,
       locale: refProps.locale,
       breadcrumb: computed(() => {
         return {
@@ -191,7 +195,9 @@ const ProLayout = defineComponent({
       openKeys: refProps.openKeys,
     });
 
-    const restProps = computed(() => omit(props, ['onCollapse', 'onOpenKeys', 'onSelect']));
+    const restProps = computed(() =>
+      omit(props, ['onCollapse', 'onOpenKeys', 'onSelect', 'onMenuClick', 'menuHeaderRender']),
+    );
     provide('route-context', routeContext);
 
     return () => (
@@ -209,6 +215,7 @@ const ProLayout = defineComponent({
                   onCollapse={onCollapse}
                   onSelect={onSelect}
                   onOpenKeys={onOpenKeys}
+                  onMenuClick={onMenuClick}
                 />
               )}
               <Layout style={genLayoutStyle}>

src/SiderMenu/BaseMenu.tsx

@@ -88,6 +88,8 @@ export const baseMenuProps = {
     type: [Function, Boolean] as PropType<CustomMenuRender['subMenuItemRender']>,
     default: () => false,
   },
+
+  onClick: [Function, Object] as PropType<(...args: any) => void>,
 };
 
 export type BaseMenuProps = ExtractPropTypes<typeof baseMenuProps>;
@@ -180,7 +182,6 @@ class MenuUtil {
           danger={item.meta?.danger}
           key={item.path}
           icon={item.meta?.icon && <LazyIcon icon={item.meta.icon} />}
-          // onClick={}
         >
           {this.getMenuItem(item)}
         </Menu.Item>
@@ -222,7 +223,7 @@ class MenuUtil {
 export default defineComponent({
   name: 'BaseMenu',
   props: baseMenuProps,
-  emits: ['update:openKeys', 'update:selectedKeys'],
+  emits: ['update:openKeys', 'update:selectedKeys', 'click'],
   setup(props, { emit }) {
     const menuUtil = new MenuUtil(props);
 
@@ -238,8 +239,13 @@ export default defineComponent({
     }): void => {
       emit('update:selectedKeys', params.selectedKeys);
     };
-    // TODO :: add `Menu` onClick custom handle.
-
+    const handleClick = (args: {
+      item: VNodeChild;
+      key: string | number;
+      keyPath: string | string[] | number | number[];
+    }) => {
+      emit('click', args);
+    };
     return () => (
       <Menu
         key="Menu"
@@ -252,6 +258,7 @@ export default defineComponent({
         // @ts-ignore
         onOpenChange={handleOpenChange}
         onSelect={handleSelect}
+        onClick={handleClick}
         {...props.menuProps}
       >
         {menuUtil.getNavMenuItems(props.menuData)}

src/SiderMenu/SiderMenu.tsx

@@ -77,6 +77,7 @@ export const siderMenuProps = {
 
   // events
   onMenuHeaderClick: PropTypes.func,
+  onMenuClick: PropTypes.func,
   onCollapse: {
     type: Function as PropType<(collapsed: boolean) => void>,
   },
@@ -120,9 +121,11 @@ export const defaultRenderLogoAndTitle = (
   const logoDom = defaultRenderLogo(logo, logoStyle);
   const titleDom = <h1>{title}</h1>;
   // call menuHeaderRender
-  if (renderFunction) {
+  if (typeof renderFunction === 'function') {
     // when collapsed, no render title
     return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
+  } else if (Array.isArray(renderFunction)) {
+    return <>{renderFunction}</>;
   }
   if (layout === 'mix' && renderKey === 'menuHeaderRender') {
     return null;
@@ -191,6 +194,7 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
       selectedKeys={context.selectedKeys}
       menuItemRender={props.menuItemRender}
       subMenuItemRender={props.subMenuItemRender}
+      onClick={props.onMenuClick}
       style={{
         width: '100%',
       }}

src/utils/index.ts

+import { Slots } from 'vue';
 import { MenuDataItem } from '../typings';
-export { getPropsSlot } from 'ant-design-vue/es/_util/props-util';
 export { default as PropTypes } from 'ant-design-vue/es/_util/vue-types';
 
 export { default as isUrl } from './isUrl';
@@ -61,6 +61,10 @@ export function getMenuFirstChildren(menus: MenuDataItem[], key?: string) {
     : (menus[menus.findIndex(menu => menu.path === key)] || {}).children || [];
 }
 
+export function getPropsSlot(slots: Slots, props: Record<string, any>, prop = 'default') {
+  return props[prop] ?? slots[prop]?.();
+}
+
 export const PropRenderType = {
   type: [Function, Boolean],
   default: () => undefined,