fix: side mix mode sidemenu err

examples/layouts/BasicLayout.vue

@@ -7,6 +7,12 @@
     :loading="loading"
     :breadcrumb="{ routes: breadcrumb }"
   >
+    <template #menuHeaderRender>
+      <a>
+        <img src="https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg" />
+        <h1>Pro Layout</h1>
+      </a>
+    </template>
     <!-- only work layout `Side` -->
     <template #headerContentRender>
       <a :style="{ margin: '0 8px', fontSize: '20px' }" @click="handleCollapsed">
@@ -111,9 +117,9 @@ export default defineComponent({
 
     const state = reactive({
       menuData,
-      splitMenus: true,
-      title: 'ProLayout',
-      logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
+      splitMenus: false,
+      // title: 'ProLayout',
+      // logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
       navTheme: 'dark',
       layout: 'mix',
     });
@@ -132,7 +138,6 @@ export default defineComponent({
     watchEffect(() => {
       if (router.currentRoute) {
         const matched = router.currentRoute.value.matched.concat();
-        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)

examples/router.ts

@@ -14,14 +14,14 @@ const routes: RouteRecordRaw[] = [
       {
         path: '/dashboard',
         name: 'dashboard',
-        meta: { title: 'Dashboard' },
+        meta: { title: 'Dashboard', icon: 'SettingOutlined' },
         redirect: '/dashboard/monitor',
         component: RouteView,
         children: [
           {
             path: 'workspace',
             name: 'workspace',
-            meta: { title: 'Dashboard', icon: 'SettingOutlined' },
+            meta: { title: 'Workspace' },
             component: () => import('./views/page1.vue'),
           },
           {
@@ -35,18 +35,24 @@ const routes: RouteRecordRaw[] = [
       {
         path: '/form',
         name: 'form',
-        meta: { title: 'Form' },
+        meta: { title: 'Form', icon: 'SettingOutlined' },
         redirect: '/form/basic-form',
         component: RouteView,
         children: [
           {
             path: 'basic-form',
             name: 'basic-form',
-            meta: { title: 'Basic Form', icon: 'SettingOutlined' },
+            meta: { title: 'Basic Form' },
             component: () => import('./views/page1.vue'),
           },
         ],
       },
+      {
+        path: '/single',
+        name: 'single',
+        meta: { title: 'Single', icon: 'SettingOutlined' },
+        component: () => import('./views/page1.vue'),
+      },
     ],
   },
 ];

package.json

@@ -39,6 +39,7 @@
   "dependencies": {
     "ant-design-vue": "^2.2.2",
     "lodash-es": "^4.17.21",
+    "omit.js": "^2.0.2",
     "vue": "^3.1.0",
     "vue-router": "^4.0.10"
   },

scripts/vite/less.ts

@@ -25,7 +25,6 @@ export default (): Plugin => {
       }
       const filePath = id.replace(src, output);
       maps.set(filePath, code);
-      console.log('filepath', filePath);
       return code;
     },
     async closeBundle() {

src/RouteContext.tsx

-import { InjectionKey, reactive } from 'vue';
+import { InjectionKey, provide, reactive, Ref } from 'vue';
 import { createContext, useContext } from './hooks/context';
 import { MenuDataItem, FormatMessage, WithFalse, CustomRender } from './typings';
 import { PureSettings } from './defaultSettings';
+
 export interface Route {
   path: string;
   breadcrumbName: string;
@@ -66,7 +67,6 @@ export const defaultRouteContext = reactive({
   locale: (t: string) => t,
   contentWidth: 'Fluid',
   hasFooterToolbar: false,
-  setHasFooterToolbar: (bool: boolean) => (defaultRouteContext.hasFooterToolbar = bool),
 });
 
 const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-context');
@@ -74,11 +74,12 @@ const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-con
 export const createRouteContext = () =>
   createContext<RouteContextProps>(routeContextInjectKey, 'RouteContext.Provider');
 
+export const provideRouteContext = (value: RouteContextProps | Ref<RouteContextProps>) => {
+  provide(routeContextInjectKey, value);
+};
+
 export const useRouteContext = () =>
-  useContext<Required<RouteContextProps>>(
-    'route-context' /* routeContextInjectKey */,
-    defaultRouteContext,
-  );
+  useContext<Required<RouteContextProps>>(routeContextInjectKey, defaultRouteContext);
 
 const Provider = createRouteContext();
 

src/SiderMenu/SiderMenu.tsx

@@ -11,6 +11,7 @@ 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 { warn } from '@/utils/base';
 import BaseMenu, { baseMenuProps } from './BaseMenu';
 import { WithFalse, CustomRender } from '../typings';
 import { SiderProps } from './typings';
@@ -121,6 +122,9 @@ export const defaultRenderLogoAndTitle = (
   }
   const logoDom = defaultRenderLogo(logo, logoStyle);
   const titleDom = <h1>{title}</h1>;
+  if (layout === 'mix' && renderKey === 'menuHeaderRender') {
+    return null;
+  }
   // call menuHeaderRender
   if (typeof renderFunction === 'function') {
     // when collapsed, no render title
@@ -129,9 +133,7 @@ export const defaultRenderLogoAndTitle = (
   if (Array.isArray(renderFunction)) {
     return <>{renderFunction}</>;
   }
-  if (layout === 'mix' && renderKey === 'menuHeaderRender') {
-    return null;
-  }
+
   return (
     <a>
       {logoDom}
@@ -176,7 +178,11 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
     };
   });
   const flatMenuData = computed(
-    () => (hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0])) || [],
+    () =>
+      (hasSide.value &&
+        hasSplitMenu.value &&
+        getMenuFirstChildren(context.menuData, context.selectedKeys[0])) ||
+      [],
   );
   const handleSelect = ($event: string[]) => {
     if (props.onSelect) {
@@ -190,7 +196,8 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
   // call menuHeaderRender
   const headerDom = defaultRenderLogoAndTitle(props);
   const extraDom = menuExtraRender && menuExtraRender(props);
-  if (hasSide.value && flatMenuData.value.length === 0) {
+
+  if (hasSplitMenu.value && flatMenuData.value.length === 0) {
     return null;
   }
   const defaultMenuDom = (

src/TopNavHeader/index.less

@@ -56,7 +56,7 @@
       display: inline-block;
       margin: 0 0 0 12px;
       color: @btn-primary-color;
-      font-weight: 400;
+      font-weight: 600;
       font-size: 16px;
       vertical-align: top;
     }
@@ -68,7 +68,7 @@
     .@{ant-prefix}-menu.@{ant-prefix}-menu-horizontal {
       height: 100%;
       border: none;
-      
+
       .@{ant-prefix}-menu-item {
         height: 100%;
       }

src/utils/base.ts

+export function warn(valid: boolean, message: string) {
+  // Support uglify
+  if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
+    console.error(`Warning: ${message}`);
+  }
+}
+
+export function warning(valid: boolean, message: string) {
+  warn(valid, `[@ant-design-vue/pro-layout] ${message}`);
+}

src/utils/index.ts

@@ -8,17 +8,6 @@ export { default as isImg } from './isImg';
 export { default as isNil } from './isNil';
 export { PropTypes };
 
-export function warn(valid: boolean, message: string) {
-  // Support uglify
-  if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
-    console.error(`Warning: ${message}`);
-  }
-}
-
-export function warning(valid: boolean, message: string) {
-  warn(valid, `[@ant-design-vue/pro-layout] ${message}`);
-}
-
 export function clearMenuItem(menusData: RouteRecord[] | RouteRecordRaw[]): RouteRecordRaw[] {
   return menusData
     .map((item: RouteRecord | RouteRecordRaw) => {

yarn.lock

@@ -2524,6 +2524,11 @@ omit.js@^2.0.0:
   resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f"
   integrity sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==
 
+omit.js@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npm.taobao.org/omit.js/download/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f"
+  integrity sha1-3ZuENvq5R6Xz/yFMslOGMeMT7C8=
+
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"