fix: mix side

examples/layouts/BasicLayout.vue

@@ -20,11 +20,11 @@
       <span style="color: #0f0">right</span>
     </template>
     <!-- custom breadcrumb itemRender  -->
-    <template #breadcrumbRender="{ route, params, routes, paths }">
+    <template #breadcrumbRender="{ route, params, routes }">
       <span v-if="routes.indexOf(route) === routes.length - 1">
         {{ route.breadcrumbName }}
       </span>
-      <router-link v-else :to="{ path: paths.join('/'), params }">
+      <router-link v-else :to="{ path: route.path, params }">
         {{ route.breadcrumbName }}
       </router-link>
     </template>
@@ -77,8 +77,8 @@ export default defineComponent({
   },
   setup() {
     const router = useRouter();
-
     const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
+
     const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
       selectedKeys: [],
       openKeys: [],
@@ -88,7 +88,7 @@ export default defineComponent({
 
     const state = reactive({
       menuData,
-      splitMenus: false,
+      splitMenus: true,
       title: 'ProLayout',
       logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
       navTheme: 'dark',
@@ -109,12 +109,11 @@ export default defineComponent({
     watchEffect(() => {
       if (router.currentRoute) {
         const matched = router.currentRoute.value.matched.concat();
-        baseState.selectedKeys = matched.map(r => r.path);
+        console.log('matched', matched);
+        baseState.selectedKeys = matched.filter(r => r.name !== 'index').map(r => r.path);
         baseState.openKeys = matched
           .filter(r => r.path !== router.currentRoute.value.path)
           .map(r => r.path);
-
-        console.log('baseState', baseState);
       }
     });
     return {

examples/router.ts

@@ -32,6 +32,21 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      {
+        path: '/form',
+        name: 'form',
+        meta: { title: 'Form' },
+        redirect: '/form/basic-form',
+        component: RouteView,
+        children: [
+          {
+            path: 'basic-form',
+            name: 'basic-form',
+            meta: { title: 'Basic Form', icon: 'SettingOutlined' },
+            component: () => import('./views/page1.vue'),
+          },
+        ],
+      },
     ],
   },
 ];

package.json

@@ -29,7 +29,8 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview",
-    "build:types": "tsc -b --force tsconfig.esm.json"
+    "build:types": "tsc -b --force tsconfig.esm.json",
+    "prepublish": "yarn build && yarn build:types"
   },
   "peerDependencies": {
     "ant-design-vue": ">=2.2.0",

src/BasicLayout.tsx

@@ -4,9 +4,9 @@ import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import omit from 'omit.js';
+import { withInstall } from 'ant-design-vue/es/_util/type';
 import useMediaQuery from './hooks/useMediaQuery';
 
-import { withInstall } from 'ant-design-vue/es/_util/type';
 import { defaultSettingProps } from './defaultSettings';
 import { getPrefixCls, defaultRouteContext } from './RouteContext';
 import type { BreadcrumbProps } from './RouteContext';
@@ -79,6 +79,7 @@ export type BasicLayoutProps = Partial<ExtractPropTypes<typeof basicLayoutProps>
 
 const ProLayout = defineComponent({
   name: 'ProLayout',
+  props: basicLayoutProps,
   // inheritAttrs: false,
   emits: [
     'update:collapsed',
@@ -90,7 +91,6 @@ const ProLayout = defineComponent({
     'menuHeaderClick',
     'menuClick',
   ],
-  props: basicLayoutProps,
   setup(props, { emit, slots }) {
     const refProps = toRefs(props);
     const isTop = computed(() => props.layout === 'top');
@@ -172,7 +172,7 @@ const ProLayout = defineComponent({
     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 breadcrumbRender = props.breadcrumbRender || slots.breadcrumbRender;
 
     const headerDom = computed(() =>
       headerRender(
@@ -187,7 +187,7 @@ const ProLayout = defineComponent({
           onMenuHeaderClick,
           rightContentRender,
           headerTitleRender: menuHeaderRender,
-          headerContentRender: headerContentRender,
+          headerContentRender,
           headerRender: customHeaderRender,
           theme: (props.navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
         },
@@ -195,7 +195,6 @@ const ProLayout = defineComponent({
       ),
     );
 
-    console.log('refProps.breadcrumb', refProps.breadcrumb);
     const routeContext = reactive({
       getPrefixCls,
       // ...props,

src/SiderMenu/BaseMenu.tsx

@@ -190,12 +190,12 @@ class MenuUtil {
   };
 
   getMenuItem = (item: MenuDataItem) => {
-    const meta = Object.assign({}, item.meta);
+    const meta = { ...item.meta };
     const target = (meta.target || null) as string | null;
     const hasUrl = isUrl(item.path);
     const CustomTag: any = (target && 'a') || resolveComponent('router-link');
     const props = { to: { name: item.name } };
-    const attrs = hasUrl || target ? { ...item.meta, href: item.path, target: target } : {};
+    const attrs = hasUrl || target ? { ...item.meta, href: item.path, target } : {};
 
     const { prefixCls, locale } = this.props;
     const menuTitle = (locale && locale(item.meta?.title)) || item.meta?.title;
@@ -254,7 +254,6 @@ export default defineComponent({
     }) => {
       emit('click', args);
     };
-    console.log('openKeys', props.openKeys);
     return () => (
       <Menu
         key="Menu"

src/SiderMenu/SiderMenu.tsx

@@ -9,11 +9,11 @@ import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import 'ant-design-vue/es/menu/style';
 import Menu from 'ant-design-vue/es/menu';
+import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import BaseMenu, { baseMenuProps } from './BaseMenu';
 import { WithFalse, CustomRender } from '../typings';
 import { SiderProps } from './typings';
 import { defaultSettingProps } from '../defaultSettings';
-import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import { useRouteContext } from '../RouteContext';
 import { PropTypes, getMenuFirstChildren } from '../utils';
 import './index.less';
@@ -124,7 +124,8 @@ export const defaultRenderLogoAndTitle = (
   if (typeof renderFunction === 'function') {
     // when collapsed, no render title
     return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
-  } else if (Array.isArray(renderFunction)) {
+  }
+  if (Array.isArray(renderFunction)) {
     return <>{renderFunction}</>;
   }
   if (layout === 'mix' && renderKey === 'menuHeaderRender') {
@@ -176,6 +177,7 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
     () => ((props.layout === 'mix' || props.layout === 'side') && props.splitMenus) || false,
   );
   const flatMenuData = computed(() => {
+    console.log('context.selectedKeys[0]', context.selectedKeys[0]);
     return (hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0])) || [];
   });
   // call menuHeaderRender