fix: BaseMenu menu-item class

examples/index.tsx

 import 'ant-design-vue/dist/antd.less';
-import { createApp, defineComponent, watch, ref } from 'vue';
+import { createApp, defineComponent, watch, ref, watchEffect, onMounted } from 'vue';
 import { createRouter, createWebHashHistory, useRoute, useRouter, RouteRecord } from 'vue-router';
 import { Avatar } from 'ant-design-vue';
 import { UserOutlined } from '@ant-design/icons-vue';
@@ -30,6 +30,14 @@ const BasicLayout = defineComponent({
     const menuData = getMenuData(getRoutes());
     globalState.menuData = menuData;
 
+    const updateSelectedMenu = () => {
+      const matched = route.matched.concat().map(item => item.path);
+      matched.shift();
+      state.selectedKeys = matched;
+    };
+
+    onMounted(() => {
+      // if sider collapsed, set openKeys is null.
       const cacheOpenKeys = ref<string[]>([]);
       watch(
         () => state.collapsed,
@@ -47,6 +55,12 @@ const BasicLayout = defineComponent({
         },
       );
 
+      // watch route
+      watchEffect(() => {
+        updateSelectedMenu();
+      });
+    });
+
     return () => (
       <RouteContextProvider value={state}>
         <ProLayout
@@ -67,11 +81,7 @@ const BasicLayout = defineComponent({
           {...{
             'onUpdate:collapsed': $event => (state.collapsed = $event),
             'onUpdate:openKeys': $event => (state.openKeys = $event),
-            'onUpdate:selectedKeys': () => {
-              const matched = route.matched.concat().map(item => item.path);
-              matched.shift();
-              state.selectedKeys = matched;
-            },
+            'onUpdate:selectedKeys': updateSelectedMenu,
           }}
           v-slots={{
             rightContentRender: () => (

src/SiderMenu/BaseMenu.tsx

@@ -167,12 +167,12 @@ class MenuUtil {
     const { prefixCls, i18n } = this.props;
     const menuTitle = (i18n && i18n(item.meta?.title)) || item.meta?.title;
     const defaultTitle = item?.meta.icon ? (
-      <span class={`${prefixCls}-menu-item`}>
       <CustomTag {...attrs} {...props}>
+        <span class={`${prefixCls}-menu-item`}>
           {!isChildren && <LazyIcon icon={item.meta.icon} />}
           <span class={`${prefixCls}-menu-item-title`}>{menuTitle}</span>
-        </CustomTag>
         </span>
+      </CustomTag>
     ) : (
       <span class={`${prefixCls}-menu-item`}>{menuTitle}</span>
     );

src/SiderMenu/index.less

@@ -9,7 +9,8 @@
   position: relative;
   background-color: @layout-sider-background;
   border-right: 0;
-  transition: background-color 0.3s;
+  transition: background-color 0.3s, min-width 0.3s,
+    max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   z-index: 9;
 
   &.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-item:not(:last-child),
@@ -108,6 +109,10 @@
     z-index: 10;
     min-height: 100%;
     box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+
+    span.@{ant-prefix}-pro-menu-item-title {
+      transition: none;
+    }
   }
 
   .@{ant-prefix}-layout-sider-children {