✨: menu组件新增childSpacing属性添加与父菜单的间距以更好的进行视觉分辨。

package/component/src/component/menu/index.less

@@ -309,3 +309,8 @@
     background-color: transparent;
   }
 }
+
+.layui-nav-child-spacing .layui-nav-item .layui-nav-child {
+  padding-left: 10px;
+  box-sizing: border-box;
+}

package/component/src/component/menu/index.vue

@@ -17,6 +17,7 @@ export interface LayMenuProps {
   level?: boolean | string;
   collapse?: boolean | string;
   collapseTransition?: boolean | string;
+  childSpacing?: boolean;
 }
 
 const emit = defineEmits([
@@ -35,6 +36,7 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   level: true,
   collapse: false,
   collapseTransition: true,
+  childSpacing: false,
 });
 
 const isTree = computed(() => props.tree);
@@ -91,6 +93,7 @@ provide("isCollapseTransition", isCollapseTransition);
       tree ? 'layui-nav-tree' : '',
       theme === 'dark' ? 'layui-nav-dark' : 'layui-nav-light',
       collapse ? 'layui-nav-collapse' : '',
+      childSpacing ? 'layui-nav-child-spacing' : '',
     ]"
   >
     <slot></slot>

package/document/src/document/zh-CN/components/menu.md

@@ -487,6 +487,7 @@ export default {
 | level               | 菜单层级       | `true` `false` |
 | collapse            | 折叠状态       | `true` `false` |
 | collapse-transition  | 折叠动画       | `true` `false` |
+| child-spacing       | 子菜单增加间距  | `true` `false` |
 
 :::