feat(menu): menu item supports flip(#6392)

* fix(menu): 修复菜单子项定位样式切换逻辑

* refactor: 移除 submenu 中的类型断言

* chore: stash changelog [ci skip]

* chore: update CHANGELOG

---------

Co-authored-by: tdesign-bot <tdesign@tencent.com>
Co-authored-by: wū yāng <uyarnchen@gmail.com>

Author: 3 people

packages/components/menu/submenu.tsx

@@ -77,6 +77,18 @@ export default defineComponent({
       }
     };
 
+    const handlePlacementChange = ({ placement }: { placement: string }) => {
+      const spacerEl = popupWrapperRef.value;
+      if (!spacerEl) return;
+
+      const prefixClassName = `${classPrefix.value}-menu__spacer`;
+      const isBottom = placement.startsWith('bottom');
+      const isTop = placement.startsWith('top');
+
+      spacerEl.classList.toggle(`${prefixClassName}--bottom`, isBottom);
+      spacerEl.classList.toggle(`${prefixClassName}--top`, isTop);
+    };
+
     const classes = computed(() => [
       `${classPrefix.value}-submenu`,
       {
@@ -265,7 +277,9 @@ export default defineComponent({
           ref={popupWrapperRef}
           class={[
             `${classPrefix.value}-menu__spacer`,
-            `${classPrefix.value}-menu__spacer--${!isNested.value && isHead ? 'top' : 'left'}`,
+            {
+              [`${classPrefix.value}-menu__spacer--left`]: isNested.value || !isHead,
+            },
           ]}
           onMouseenter={handleEnterPopup}
           onMouseleave={handleMouseLeavePopup}
@@ -278,13 +292,31 @@ export default defineComponent({
         content: () => popupWrapper,
       };
 
+      // 合并 popperOptions，保留原有的 modifiers
+      const existingModifiers = (props.popupProps?.popperOptions as any)?.modifiers || [];
+      const popperOptions = {
+        ...(props.popupProps?.popperOptions ?? {}),
+        modifiers: [
+          {
+            name: 'onPlacementChange',
+            enabled: true,
+            phase: 'main',
+            fn: ({ state }: any) => {
+              handlePlacementChange({ placement: state.placement });
+            },
+          },
+          ...existingModifiers,
+        ],
+      };
+
       const realPopup = (
         <Popup
           {...(props.popupProps ?? {})}
           overlayInnerClassName={[...overlayInnerClassName.value]}
           overlayClassName={[...overlayClassName.value]}
           visible={popupVisible.value}
           placement={placement}
+          popperOptions={popperOptions}
           v-slots={slots}
         >
           <div ref={submenuRef} class={submenuClass.value}>

packages/tdesign-vue-next/.changelog/pr-6392.md

@@ -0,0 +1,6 @@
+---
+pr_number: 6392
+contributor: RSS1102
+---
+
+- feat(menu): 支持菜单面板在空间不足时的自动反转 @RSS1102 ([#6392](https://github.com/Tencent/tdesign-vue-next/pull/6392))