fix: mix menu

.eslintrc.js

@@ -19,10 +19,10 @@ module.exports = {
     '@typescript-eslint/no-inferrable-types': 0,
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/no-var-requires': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }],
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },

examples/index.tsx

@@ -17,13 +17,17 @@ const BasicLayout = defineComponent({
       openKeys: ['/dashboard'],
       setOpenKeys: (keys: string[]) => (state.openKeys = keys),
       selectedKeys: ['/welcome'],
-      setSelectedKeys: (keys: string[]) => (state.selectedKeys = keys),
+      setSelectedKeys: (keys: string[]) => {
+        console.log('keys', keys);
+        state.selectedKeys = keys;
+      },
 
       isMobile: false,
       fixSiderbar: false,
       fixedHeader: false,
       menuData: menus,
       sideWidth: 208,
+      splitMenus: true,
       hasSideMenu: true,
       hasHeader: true,
       hasFooterToolbar: false,
@@ -52,9 +56,8 @@ const BasicLayout = defineComponent({
       <RouteContextProvider value={state}>
         <ProLayout
           v-model={[state.collapsed, 'collapsed']}
-          title={'Pro Layout'}
-          layout={'side'}
-          navTheme={'dark'}
+          layout={'mix'}
+          navTheme={'light'}
           i18n={(key: string) => key}
           isMobile={state.isMobile}
           fixSiderbar={state.fixSiderbar}
@@ -63,6 +66,7 @@ const BasicLayout = defineComponent({
           primaryColor={'#1890ff'}
           contentStyle={{ minHeight: '300px' }}
           siderWidth={state.sideWidth}
+          splitMenus={state.splitMenus}
           v-slots={{
             rightContentRender: () => (
               <div style="color: #FFF;margin-right: 16px;">
@@ -72,7 +76,7 @@ const BasicLayout = defineComponent({
             menuHeaderRender: () => (
               <a>
                 <img src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg" />
-                {state.collapsed ? null : <h1>Pro Layout</h1>}
+                {state.collapsed ? null : <h1>Pro Preview</h1>}
               </a>
             ),
           }}

package.json

 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.3",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "sideEffects": false,

src/BasicLayout.tsx

@@ -111,6 +111,8 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots,
   };
   const rightContentRender = getComponentOrSlot(props, slots, 'rightContentRender') as any;
   const customHeaderRender = getComponentOrSlot(props, slots, 'headerRender');
+  const menuHeaderRenderFunc = props['menuHeaderRender'];
+  const menuHeaderRenderSlot = slots['menuHeaderRender'];
   const headerDom = headerRender(
     {
       ...props,
@@ -123,6 +125,8 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots,
       // onOpenChange: handleOpenChange,
       customHeaderRender,
       rightContentRender,
+      headerTitleRender:
+        menuHeaderRenderFunc || (menuHeaderRenderSlot && (() => menuHeaderRenderSlot())),
       theme: (navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
     },
     matchMenuKeys,
@@ -131,8 +135,6 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots,
   const footerRender = getComponentOrSlot(props, slots, 'footerRender');
   const menuRender = getComponentOrSlot(props, slots, 'menuRender');
   // const menuHeaderRender = getComponentOrSlot(props, slots, 'menuHeaderRender');
-  const menuHeaderRenderFunc = props['menuHeaderRender'];
-  const menuHeaderRenderSlot = slots['menuHeaderRender'];
 
   return (
     <ProProvider i18n={defaultI18nRender}>

src/Header.tsx

@@ -4,8 +4,9 @@ import Layout from 'ant-design-vue/es/layout';
 
 import { GlobalHeader, GlobalHeaderProps } from './GlobalHeader';
 import { TopNavHeader } from './TopNavHeader';
+import { useRouteContext } from './RouteContext';
 import { RenderVNodeType, WithFalse } from './typings';
-import { clearMenuItem } from './utils';
+import { flatMap } from './utils';
 import './Header.less';
 
 const { Header } = Layout;
@@ -75,12 +76,13 @@ export const HeaderView = defineComponent({
       onCollapse,
     } = toRefs(props);
     console.log('HeaderView', props);
-    const isTop = computed(() => props.layout === 'top');
+    const context = useRouteContext();
+    const isTop = computed(() => props.layout === 'top' || props.layout === 'mix');
     const needFixedHeader = computed(() => fixedHeader.value || layout.value === 'mix');
     const needSettingWidth = computed(
       () => needFixedHeader.value && hasSiderMenu.value && !isTop.value && !isMobile.value,
     );
-    const clearMenuData = computed(() => clearMenuItem(props.menuData || []));
+    const clearMenuData = computed(() => (context.menuData && flatMap(context.menuData)) || []);
     const className = computed(() => {
       return {
         [`${prefixCls.value}-fixed-header`]: needFixedHeader.value,
@@ -93,6 +95,7 @@ export const HeaderView = defineComponent({
           {headerContentRender && headerContentRender.value && headerContentRender.value(props)}
         </GlobalHeader>
       );
+      console.log('renderContent', isTop.value, clearMenuData.value);
       if (isTop.value && !isMobile.value) {
         defaultDom = (
           <TopNavHeader

src/SiderMenu/SiderMenu.tsx

@@ -8,8 +8,9 @@ import { WithFalse, RenderVNodeType } from '../typings';
 import { SiderProps } from './typings';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import { useProProvider } from '../ProProvider';
-import './index.less';
 import { useRouteContext } from '../RouteContext';
+import { getMenuFirstChildren } from '../utils';
+import './index.less';
 
 const { Sider } = Layout;
 
@@ -116,14 +117,21 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
       [`${baseClassName}-fixed`]: context.fixSiderbar,
     };
   });
+  const hasSide = computed(() => props.layout === 'mix' && context.splitMenus);
+  const flatMenuData = computed(
+    () => hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]),
+  );
   // call menuHeaderRender
   const headerDom = defaultRenderLogoAndTitle(props);
   const extraDom = menuExtraRender && menuExtraRender(props);
+  if (hasSide.value && flatMenuData.value.length === 0) {
+    return null;
+  }
   const defaultMenuDom = (
     <BaseMenu
       theme={navTheme === 'realDark' ? 'dark' : navTheme}
       mode="inline"
-      menuData={context.menuData}
+      menuData={hasSide.value ? flatMenuData.value : context.menuData}
       collapsed={props.collapsed}
       openKeys={context.openKeys}
       selectedKeys={context.selectedKeys}

src/TopNavHeader/index.tsx

@@ -55,6 +55,7 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = props => {
     contentWidth,
     rightContentRender,
     layout,
+    menuData,
   } = props;
   const context = useRouteContext();
   const prefixCls = `${propPrefixCls || 'ant-pro'}-top-nav-header`;
@@ -83,16 +84,16 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = props => {
             theme={props.theme === 'realDark' ? 'dark' : props.theme}
             mode={props.mode}
             collapsed={props.collapsed}
-            menuData={context.menuData}
+            menuData={menuData}
             openKeys={context.openKeys}
             selectedKeys={context.selectedKeys}
             class={{ 'top-nav-menu': props.mode === 'horizontal' }}
             {...{
               'onUpdate:openKeys': ($event: string[]) => {
-                context.onOpenKeys($event);
+                context.setOpenKeys($event);
               },
               'onUpdate:selectedKeys': ($event: any) => {
-                context.onSelectedKeys($event);
+                context.setSelectedKeys($event);
               },
             }}
           />

src/utils/index.ts

@@ -41,14 +41,31 @@ export function clearMenuItem(menusData: MenuDataItem[]): MenuDataItem[] {
             children: clearMenuItem(finalItem.children),
           };
         }
-        // children 为空就直接删掉
         delete finalItem.children;
       }
+      console.log('finalItem', finalItem);
       return finalItem;
     })
     .filter(item => item) as MenuDataItem[];
 }
 
+export function flatMap(menusData: MenuDataItem[]): MenuDataItem[] {
+  return menusData
+    .map(item => {
+      const finalItem = { ...item };
+      if (!finalItem.name || finalItem.meta?.hideInMenu) {
+        return null;
+      }
+      delete finalItem.children;
+      return finalItem;
+    })
+    .filter(item => item);
+}
+
+export function getMenuFirstChildren(menus: MenuDataItem[], key: string) {
+  return (menus[menus.findIndex(menu => menu.path === key)] || {}).children;
+}
+
 export const PropRenderType = {
   type: [Function, Boolean],
   default: () => undefined,