优化导航菜单

Author: hooray

src/layouts/components/Menu/item.vue

@@ -29,13 +29,6 @@ const isItemActive = computed(() => {
   return isActived.value && (!props.subMenu || rootMenu.isMenuPopup)
 })
 
-// 缩进样式
-const indentStyle = computed(() => {
-  return !rootMenu.isMenuPopup
-    ? `padding-left: ${20 * (props.level ?? 0)}px`
-    : ''
-})
-
 defineExpose({
   ref: itemRef,
 })
@@ -68,11 +61,13 @@ defineExpose({
           }"
         >
           <div
-            class="inline-flex flex-1 items-center justify-center gap-[12px]" :class="{
+            class="inline-flex flex-1 items-center justify-center gap-[12px] pl-[calc(var(--indent-level)*20px)]" :class="{
               'flex-col': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
               'gap-1!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
               'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
-            }" :style="indentStyle"
+            }" :style="{
+              '--indent-level': !rootMenu.isMenuPopup ? props.level ?? 0 : 0,
+            }"
           >
             <FaIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" class="menu-item-container-icon size-5 transition-transform group-hover-scale-120" />
             <span

src/layouts/components/Menu/sub.vue

@@ -102,16 +102,7 @@ const transitionClass = computed(() => {
 })
 
 const hasChildren = computed(() => {
-  let flag = true
-  if (props.menu.children) {
-    if (props.menu.children.every((item: any) => item.meta?.menu === false)) {
-      flag = false
-    }
-  }
-  else {
-    flag = false
-  }
-  return flag
+  return props.menu.children?.some((item: any) => item.meta?.menu !== false) ?? false
 })
 
 function handleClick() {