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

@@ -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',

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>

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%;