From 91211241797843e0367ff9795bf724c3cbaae814 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=82=85=E5=AD=90=E6=B9=98?= <fuzx@xmpaoyou.com>
Date: Tue, 11 Oct 2022 16:16:23 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E5=A4=9A=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7=E8=8F=9C=E5=8D=95=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E7=BC=A9=E8=BF=9B=EF=BC=8C=E9=BB=98=E8=AE=A4=E4=B8=BA=E4=B8=8D?=
 =?UTF-8?q?=E7=BC=A9=E8=BF=9B=EF=BC=8C=E5=8F=AF=E9=80=9A=E8=BF=87<lay-menu?=
 =?UTF-8?q?=20:indent=3D"true">=E5=BC=80=E5=90=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package/component/src/component/menu/index.less |  7 +------
 package/component/src/component/menu/index.vue  | 12 ++++++++++++
 package/component/src/component/menu/utils.ts   | 17 +++++++++++++++++
 .../component/src/component/menuItem/index.vue  |  3 +++
 .../component/src/component/subMenu/index.vue   | 14 +++++++++++++-
 5 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 package/component/src/component/menu/utils.ts

diff --git a/package/component/src/component/menu/index.less b/package/component/src/component/menu/index.less
index 44fd112f..40d0bc0b 100644
--- a/package/component/src/component/menu/index.less
+++ b/package/component/src/component/menu/index.less
@@ -183,6 +183,7 @@
 .layui-nav-tree .layui-nav-item {
   width: 100%;
   display: block;
+  box-sizing: border-box;
   line-height: 42px;
 }
 
@@ -196,12 +197,6 @@
   padding: 5px 23px 5px 23px;
 }
 
-/* 嵌套垂直导航缩进 */
-.layui-nav-child > .layui-nav-item > div > dl.layui-nav-child > li {
-  box-sizing: border-box;
-  padding-left: 10px;
-}
-
 .layui-nav-tree .layui-nav-item * {
   color: rgba(255, 255, 255, 0.7);
 }
diff --git a/package/component/src/component/menu/index.vue b/package/component/src/component/menu/index.vue
index 748c1bc3..e1e2aefa 100644
--- a/package/component/src/component/menu/index.vue
+++ b/package/component/src/component/menu/index.vue
@@ -18,6 +18,7 @@ export interface LayMenuProps {
   level?: boolean | string;
   collapse?: boolean | string;
   collapseTransition?: boolean | string;
+  indent?: boolean | string; // 菜单栏是否缩进
 }
 
 const emit = defineEmits([
@@ -36,6 +37,7 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   level: true,
   collapse: false,
   collapseTransition: true,
+  indent: false,
 });
 
 const isTree: ComputedRef<boolean> = computed(() => props.tree);
@@ -68,6 +70,15 @@ const selectedKey = computed({
   },
 });
 
+const indent = computed({
+  get() {
+    return props.indent;
+  },
+  set(val) {
+    // emit("update:indent", val);
+  },
+});
+
 watch(
   () => props.collapse,
   () => {
@@ -87,6 +98,7 @@ provide("openKeys", openKeys);
 provide("isCollapse", isCollapse);
 provide("isCollapseTransition", isCollapseTransition);
 provide("menuTheme", menuTheme);
+provide("indent", indent);
 </script>
 
 <template>
diff --git a/package/component/src/component/menu/utils.ts b/package/component/src/component/menu/utils.ts
new file mode 100644
index 00000000..3f3d0aa8
--- /dev/null
+++ b/package/component/src/component/menu/utils.ts
@@ -0,0 +1,17 @@
+// 处理菜单栏缩进
+export function indentHandle(obj: {
+  indent: boolean | string;
+  level: number;
+  basePadding?: number;
+}) {
+  const { indent, level, basePadding = 0 } = obj;
+  const least: number = level - 1; // 第一层不缩进
+  if (indent && least > 0) {
+    const px =
+      typeof indent === "boolean"
+        ? `${basePadding + 10 * least}px` // css样式表对<a>设定了23基础边距
+        : indent.replace(/\d+/g, (s) => (basePadding + least * +s).toString());
+    return `padding-left: ${px}`;
+  }
+  return "";
+}
diff --git a/package/component/src/component/menuItem/index.vue b/package/component/src/component/menuItem/index.vue
index e33cceed..97727895 100644
--- a/package/component/src/component/menuItem/index.vue
+++ b/package/component/src/component/menuItem/index.vue
@@ -8,6 +8,7 @@ export default {
 import { computed, ComputedRef, inject, ref, Ref, useSlots } from "vue";
 import { DropdownContext, dropdownInjectionKey } from "../dropdown/interface";
 import useLevel from "../menu/useLevel";
+import { indentHandle } from "../menu/utils";
 import LayTooltip from "../tooltip/index.vue";
 
 export interface LayMenuItemProps {
@@ -22,6 +23,7 @@ const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
 const isTree = inject("isTree") as ComputedRef<boolean>;
 const isCollapse = inject("isCollapse") as ComputedRef<boolean | string>;
 const theme = inject("menuTheme") as Ref<string>;
+const indent = inject("indent") as Ref<string | boolean>;
 const dropdownCtx = inject<DropdownContext | undefined>(
   dropdownInjectionKey,
   undefined
@@ -44,6 +46,7 @@ const needTooltip = computed(
   <li
     class="layui-nav-item"
     :class="[selectedKey === id ? 'layui-this' : '']"
+    :style="isTree && indentHandle({ indent, level })"
     @click="selectHandle()"
   >
     <template v-if="needTooltip">
diff --git a/package/component/src/component/subMenu/index.vue b/package/component/src/component/subMenu/index.vue
index f1a707cd..d67bfa54 100644
--- a/package/component/src/component/subMenu/index.vue
+++ b/package/component/src/component/subMenu/index.vue
@@ -8,6 +8,7 @@ export default {
 import { computed, inject, ref, Ref, useSlots, watchEffect } from "vue";
 import LayTransition from "../transition/index.vue";
 import SubMenuPopup from "./SubMenuPopup.vue";
+import { indentHandle } from "../menu/utils";
 import { provideLevel, default as useLevel } from "../menu/useLevel";
 
 export interface LaySubMenuProps {
@@ -22,6 +23,7 @@ const { level } = useLevel();
 const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
 const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
+const indent = inject("indent") as Ref<string | boolean>;
 const isCollapse: Ref<boolean | string> = inject("isCollapse") as Ref<
   boolean | string
 >;
@@ -70,7 +72,17 @@ const openHandle = function () {
 
 <template>
   <li v-if="!needPopup" class="layui-nav-item">
-    <a href="javascript:void(0)" @click="openHandle()">
+    <a
+      href="javascript:void(0)"
+      @click="openHandle()"
+      :style="
+        indentHandle({
+          indent,
+          level,
+          basePadding: 23,
+        })
+      "
+    >
       <!-- 图标 -->
       <i v-if="slots.icon" class="layui-sub-menu-icon">
         <slot name="icon"></slot>