fix(menu): 修复嵌套子菜单在父菜单关闭后意外触发的问题

Author: RSS1102

packages/components/menu/submenu.tsx

@@ -9,7 +9,6 @@ import {
   watch,
   Slots,
   toRefs,
-  reactive,
   nextTick,
   Transition,
 } from 'vue';
@@ -100,26 +99,24 @@ export default defineComponent({
       },
     ]);
 
-    provide<TdSubMenuInterface>(
-      'TdSubmenu',
-      reactive({
-        value,
-        addMenuItem: (item: TdMenuItem) => {
-          menuItems.value.push(item);
-          if (submenu) {
-            submenu.addMenuItem(item);
-          }
-        },
-        setSubPopup: (ref: HTMLElement) => {
-          subPopupRef.value = ref;
-        },
-        closeParentPopup: (e: MouseEvent) => {
-          const related = e.relatedTarget as HTMLElement;
-          if (loopInPopup(related)) return;
-          handleMouseLeavePopup(e);
-        },
-      }),
-    );
+    provide<TdSubMenuInterface>('TdSubmenu', {
+      value: value.value,
+      popupVisible,
+      addMenuItem: (item: TdMenuItem) => {
+        menuItems.value.push(item);
+        if (submenu) {
+          submenu.addMenuItem(item);
+        }
+      },
+      setSubPopup: (ref: HTMLElement) => {
+        subPopupRef.value = ref;
+      },
+      closeParentPopup: (e: MouseEvent) => {
+        const related = e.relatedTarget as HTMLElement;
+        if (loopInPopup(related)) return;
+        handleMouseLeavePopup(e);
+      },
+    });
 
     const passSubPopupRefToParent = (val: HTMLElement) => {
       if (isFunction(setSubPopup)) {
@@ -128,8 +125,31 @@ export default defineComponent({
     };
 
     // methods
-    const handleMouseEnter = () => {
+    const handleMouseEnter = (e?: MouseEvent) => {
       if (props.disabled) return;
+
+      // 如果是嵌套子菜单，检查父级 popup 是否可见
+      if (isNested.value && submenu?.popupVisible) {
+        if (!submenu.popupVisible.value) {
+          return;
+        }
+        // 如果父 popup 可见，还需要检查鼠标是否真的在父 popup 内
+        // 避免父 popup 延迟关闭时，鼠标已经移出但子菜单仍被触发
+        if (e && subPopupRef.value) {
+          const parentPopupRect = subPopupRef.value.getBoundingClientRect();
+          const { clientX, clientY } = e;
+          const isInParentPopup =
+            clientX >= parentPopupRect.left &&
+            clientX <= parentPopupRect.right &&
+            clientY >= parentPopupRect.top &&
+            clientY <= parentPopupRect.bottom;
+
+          if (!isInParentPopup) {
+            return;
+          }
+        }
+      }
+
       setTimeout(() => {
         if (!popupVisible.value) {
           open(props.value);

packages/components/menu/types.ts

@@ -28,4 +28,5 @@ export interface TdSubMenuInterface {
   addMenuItem?: (item: TdMenuItem) => void;
   setSubPopup?: (popupRef: HTMLElement) => void;
   closeParentPopup?: (e: MouseEvent) => void;
+  popupVisible?: Ref<boolean>;
 }