From 0b9ecbb6c93b8f2ed979ccf7e6514a5ad00455df Mon Sep 17 00:00:00 2001
From: MistyMoon <33083971+MistyMoonR@users.noreply.github.com>
Date: Wed, 12 Aug 2026 08:27:29 +0800
Subject: [PATCH] fix(@vben-core/menu-ui): menu badge overflow, font-size &
 default color (#8244)

* fix(@vben-core/menu-ui): menu badge ping ring clipped by overflow

The .vben-menu-item__content span rule applied the menu-title mixin
(overflow:hidden, for text ellipsis) to ALL descendant spans, including
the badge dot spans. This clipped the animate-ping expanding ring, so
the leaf-menu badge dot only pulsed (opacity fade) instead of pinging,
while the sub-menu (directory) badge pinged correctly because it lives
under .vben-sub-menu-content which has no such rule.

Fix: scope the menu-title mixin to the title span (.vben-menu__name)
and wrap the menu-item title slot accordingly.

* fix(@vben-core/menu-ui): allow custom font-size on sub-menu-content descendants

* fix(@vben-core/menu-ui): correct default badge variant color
---
 packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue | 2 +-
 packages/@core/ui-kit/menu-ui/src/components/menu-item.vue  | 4 +++-
 packages/@core/ui-kit/menu-ui/src/components/menu.vue       | 6 +-----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue b/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
index 9a329c50f..2d95ce608 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
@@ -14,7 +14,7 @@ interface Props extends MenuRecordBadgeRaw {
 const props = withDefaults(defineProps<Props>(), {});
 
 const variantsMap: Record<string, string> = {
-  default: 'bg-green-500',
+  default: 'bg-gray-500',
   destructive: 'bg-destructive',
   primary: 'bg-primary',
   success: 'bg-green-500',
diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue b/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
index 017026423..b36e94e89 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
@@ -131,7 +131,9 @@ onBeforeUnmount(() => {
         />
         <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" />
         <slot></slot>
-        <slot name="title"></slot>
+        <span v-if="$slots.title" :class="nsMenu.e('name')">
+          <slot name="title"></slot>
+        </span>
       </div>
     </a>
   </router-link>
diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
index 5d9f5780a..ef4702037 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -747,7 +747,7 @@ $namespace: vben;
     width: 100%;
     height: var(--menu-item-height);
 
-    span {
+    .#{$namespace}-menu__name {
       @include menu-title;
     }
   }
@@ -824,10 +824,6 @@ $namespace: vben;
 
   @include menu-item;
 
-  * {
-    font-size: inherit !important;
-  }
-
   &__icon-arrow {
     position: absolute;
     top: 50%;