refactor(@vben-core/menu-ui): normalize leaf menu item markup

packages/@core/ui-kit/menu-ui/src/components/menu-item.vue

@@ -84,22 +84,23 @@ onBeforeUnmount(() => {
 });
 </script>
 <template>
-  <a
-    :href="
-      (item.parentPaths.at(-1) ?? '') +
-      (item?.query ? `?${qs.stringify(item?.query)}` : '')
-    "
-    @click.prevent.stop="handleClick"
+  <li
+    :class="[
+      rootMenu.theme,
+      b(),
+      is('active', active),
+      is('disabled', disabled),
+      is('collapse-show-title', collapseShowTitle),
+    ]"
   >
-    <li
-      :class="[
-        rootMenu.theme,
-        b(),
-        is('active', active),
-        is('disabled', disabled),
-        is('collapse-show-title', collapseShowTitle),
-      ]"
+    <a
+      :class="e('link')"
+      :href="
+        (item.parentPaths.at(-1) ?? '') +
+        (item?.query ? `?${qs.stringify(item?.query)}` : '')
+      "
       role="menuitem"
+      @click.prevent.stop="handleClick"
     >
       <!-- -->
       <VbenTooltip
@@ -128,6 +129,6 @@ onBeforeUnmount(() => {
         <slot></slot>
         <slot name="title"></slot>
       </div>
-    </li>
-  </a>
+    </a>
+  </li>
 </template>

packages/@core/ui-kit/menu-ui/src/components/menu.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+// oxlint-disable no-unused-expressions
 import type { UseResizeObserverReturn } from '@vueuse/core';
 
 import type { SetupContext, VNodeArrayChildren } from 'vue';
@@ -752,6 +753,19 @@ $namespace: vben;
     }
   }
 
+  &__link {
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    padding: inherit;
+    color: inherit;
+    text-decoration: none;
+    border-radius: inherit;
+  }
+
   &.is-collapse-show-title {
     padding: 32px 0 !important;
     // margin: 4px 8px !important;