From edbe90f8a0f39268ca962cdb04efe7e8f27478e2 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Thu, 26 Nov 2020 10:46:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=BF=E7=85=A7and=20design=E7=BB=99?=
 =?UTF-8?q?=E5=9E=82=E7=9B=B4=E5=AF=BC=E8=88=AA=E8=8F=9C=E5=8D=95=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=BA=86inlineIndent=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/Menu/MenuItem.vue               |  9 ++--
 .../component/Menu/Submenu.vue                |  2 +-
 .../component/Menu/mixin.js                   | 53 +++++++++++++++++++
 vue/src/asset/style/element-ui.scss           |  2 +-
 vue/src/asset/style/variables.scss            |  7 ++-
 vue/src/component/menu/NavMenu/index.vue      |  3 ++
 vue/src/component/menu/NavMenu/item.vue       | 15 ++++--
 vue/src/component/menu/NavMenu/style.scss     |  2 +-
 vue/src/layout/component/Aside/style.scss     |  2 +-
 vue/src/layout/component/Logo.vue             |  2 +-
 10 files changed, 82 insertions(+), 15 deletions(-)
 create mode 100644 vue/element-ui-personal/component/Menu/mixin.js

diff --git a/vue/element-ui-personal/component/Menu/MenuItem.vue b/vue/element-ui-personal/component/Menu/MenuItem.vue
index 3670ba6..cbe6fa7 100644
--- a/vue/element-ui-personal/component/Menu/MenuItem.vue
+++ b/vue/element-ui-personal/component/Menu/MenuItem.vue
@@ -13,8 +13,7 @@
             <div slot="content">
                 <slot name="title"/>
             </div>
-            <div
-                style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
+            <div :style="iconContainerStyle">
                 <slot/>
             </div>
         </el-tooltip>
@@ -27,7 +26,7 @@
 </template>
 
 <script>
-import MenuMixin from 'element-ui/packages/menu/src/menu-mixin'
+import MenuMixin from './mixin'
 import Emitter from 'element-ui/lib/mixins/emitter'
 
 export default {
@@ -46,6 +45,10 @@ export default {
     computed: {
         active() {
             return this.index === this.rootMenu.activeIndex
+        },
+
+        iconContainerStyle() {
+            return `position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 ${this.inlineIndent}px;`
         }
     },
 
diff --git a/vue/element-ui-personal/component/Menu/Submenu.vue b/vue/element-ui-personal/component/Menu/Submenu.vue
index a2d8a0d..f83a589 100644
--- a/vue/element-ui-personal/component/Menu/Submenu.vue
+++ b/vue/element-ui-personal/component/Menu/Submenu.vue
@@ -1,5 +1,5 @@
 <script type="text/jsx">
-import MenuMixin from 'element-ui/packages/menu/src/menu-mixin'
+import MenuMixin from './mixin'
 import Emitter from 'element-ui/lib/mixins/emitter'
 import Popper from 'element-ui/lib/utils/vue-popper'
 
diff --git a/vue/element-ui-personal/component/Menu/mixin.js b/vue/element-ui-personal/component/Menu/mixin.js
new file mode 100644
index 0000000..71201c5
--- /dev/null
+++ b/vue/element-ui-personal/component/Menu/mixin.js
@@ -0,0 +1,53 @@
+/**
+ * 在原基础上增加了 inlineIndent 属性，用于确定每级节点的单位缩进距离
+ */
+export default {
+    inject: ['rootMenu'],
+
+    props: {
+        inlineIndent: {type: Number, default: 20}
+    },
+
+    computed: {
+        indexPath() {
+            const path = [this.index]
+            let parent = this.$parent
+            while (parent.$options.componentName !== 'ElMenu') {
+                if (parent.index) {
+                    path.unshift(parent.index)
+                }
+                parent = parent.$parent
+            }
+            return path
+        },
+
+        parentMenu() {
+            let parent = this.$parent
+            while (
+                parent &&
+                ['ElMenu', 'ElSubmenu'].indexOf(parent.$options.componentName) === -1
+                ) {
+                parent = parent.$parent
+            }
+            return parent
+        },
+
+        paddingStyle() {
+            if (this.rootMenu.mode !== 'vertical') return {}
+
+            let padding = this.inlineIndent
+
+            if (!this.rootMenu.collapse) {
+                let parent = this.$parent
+                while (parent && parent.$options.componentName !== 'ElMenu') {
+                    if (parent.$options.componentName === 'ElSubmenu') {
+                        padding += this.inlineIndent
+                    }
+                    parent = parent.$parent
+                }
+            }
+
+            return {'padding-left': `${padding}px`}
+        }
+    }
+}
diff --git a/vue/src/asset/style/element-ui.scss b/vue/src/asset/style/element-ui.scss
index fba9c17..ce94831 100644
--- a/vue/src/asset/style/element-ui.scss
+++ b/vue/src/asset/style/element-ui.scss
@@ -141,7 +141,7 @@
 
         .el-menu-item,
         .el-submenu__title {
-            padding: 0 20px;
+            padding: 0 $menu-padding;
         }
     }
 
diff --git a/vue/src/asset/style/variables.scss b/vue/src/asset/style/variables.scss
index 0e8de92..36b29f7 100644
--- a/vue/src/asset/style/variables.scss
+++ b/vue/src/asset/style/variables.scss
@@ -48,9 +48,11 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 }
 
 //菜单中icon的大小
-$menu-icon-size: 16px;
+$menu-icon-size: 14px;
 //菜单中icon和文字的距离
 $menu-icon-text-gap: 10px;
+//菜单的padding
+$menu-padding: $menu-icon-size + $menu-icon-text-gap;
 //暗色菜单的背景色
 $menu-dark-background: #304156;
 //暗色子级菜单的背景色
@@ -69,7 +71,7 @@ $menu-text-dark-hover-color: rgba(255, 255, 255, 1);
 //侧边栏宽度
 $aside-width: 208px;
 //侧边栏折叠时的宽度
-$aside-collapse-width: $menu-icon-size + 20px * 2;
+$aside-collapse-width: $menu-icon-size + $menu-padding * 2;
 
 //头部导航栏高度
 $nav-height: 48px;
@@ -98,4 +100,5 @@ $dialog-top: 100px;
     warning: $--color-warning;
     pageViewMargin: $page-view-margin;
     dialogTop: $dialog-top;
+    menuPadding:$menu-padding;
 }
diff --git a/vue/src/component/menu/NavMenu/index.vue b/vue/src/component/menu/NavMenu/index.vue
index 01a3378..7a67d0e 100644
--- a/vue/src/component/menu/NavMenu/index.vue
+++ b/vue/src/component/menu/NavMenu/index.vue
@@ -1,4 +1,5 @@
 <script type="text/jsx">
+import cssVariables from '@/asset/style/variables.scss'
 import Item from './item'
 
 export default {
@@ -40,6 +41,7 @@ export default {
         } = context
 
         const themeClassName = `el-menu--${theme}`
+        const inlineIndent = parseFloat(cssVariables.menuPadding)
 
         let items = children || menus.map(m => (
             <Item
@@ -47,6 +49,7 @@ export default {
                 popper-class={themeClassName}
                 show-parent={showParentOnCollapse}
                 collapse={collapse}
+                inline-indent={inlineIndent}
                 show-icon-max-depth={showIconMaxDepth}
             />
         ))
diff --git a/vue/src/component/menu/NavMenu/item.vue b/vue/src/component/menu/NavMenu/item.vue
index b455a50..09eacbc 100644
--- a/vue/src/component/menu/NavMenu/item.vue
+++ b/vue/src/component/menu/NavMenu/item.vue
@@ -30,17 +30,17 @@ function getOnlyChild(menu) {
     return null
 }
 
-function renderSingleMenu(h, {index, icon, title}) {
+function renderSingleMenu(h, {index, inlineIndent, icon, title}) {
     return (
-        <el-menu-item key={index} index={index}>
+        <el-menu-item key={index} index={index} inline-indent={inlineIndent}>
             <MenuItemContent icon={icon} title={title}/>
         </el-menu-item>
     )
 }
 
-function renderSubMenu(h, {index, icon, title, popperClass, children}) {
+function renderSubMenu(h, {index, inlineIndent, icon, title, popperClass, children}) {
     return (
-        <el-submenu key={index} index={index} popper-class={popperClass}>
+        <el-submenu key={index} index={index} inline-indent={inlineIndent} popper-class={popperClass}>
             <MenuItemContent slot="title" icon={icon} title={title}/>
             {children}
         </el-submenu>
@@ -57,7 +57,7 @@ function renderChildrenWithParentMenu(h, {icon, title, children}) {
 }
 
 function renderMenu(h, props) {
-    const {menu, popperClass, showParent, collapse, showIconMaxDepth, depth = 1} = props
+    const {menu, inlineIndent, popperClass, showParent, collapse, showIconMaxDepth, depth = 1} = props
 
     const onlyOneChild = getOnlyChild(menu)
 
@@ -67,6 +67,7 @@ function renderMenu(h, props) {
         const {fullPath, meta: {icon, title}} = onlyOneChild
         return renderSingleMenu(h, {
             index: fullPath,
+            inlineIndent,
             icon: getIcon({icon, showIconMaxDepth, depth}),
             title
         })
@@ -86,6 +87,7 @@ function renderMenu(h, props) {
 
     return renderSubMenu(h, {
         index: menu.fullPath,
+        inlineIndent,
         icon: getIcon({icon, showIconMaxDepth, depth}),
         title,
         popperClass,
@@ -106,6 +108,9 @@ export default {
         //折叠时的展开菜单是否显示父级
         showParent: Boolean,
 
+        //向左缩进的单位距离
+        inlineIndent: Number,
+
         //是否为折叠状态
         collapse: Boolean,
 
diff --git a/vue/src/component/menu/NavMenu/style.scss b/vue/src/component/menu/NavMenu/style.scss
index 1cca17a..2ac8816 100644
--- a/vue/src/component/menu/NavMenu/style.scss
+++ b/vue/src/component/menu/NavMenu/style.scss
@@ -45,7 +45,7 @@
             //菜单文字的最大宽度
             > .menu-item-content {
                 //侧边栏宽度、菜单左右padding、左侧图标宽度、距离左右的距离、右侧图标宽度
-                max-width: $aside-width - 20px * 2 - $menu-icon-size - $menu-icon-text-gap * 2 - 12px;
+                max-width: $aside-width - $menu-padding * 2 - $menu-icon-size - $menu-icon-text-gap * 2 - 12px;
             }
         }
 
diff --git a/vue/src/layout/component/Aside/style.scss b/vue/src/layout/component/Aside/style.scss
index 0d88fcf..7760c68 100644
--- a/vue/src/layout/component/Aside/style.scss
+++ b/vue/src/layout/component/Aside/style.scss
@@ -59,7 +59,7 @@
 .sub-sidebar-title {
     height: $nav-height;
     line-height: $nav-height;
-    padding-left: 20px;
+    padding-left: $menu-padding;
     font-size: 16px;
 }
 
diff --git a/vue/src/layout/component/Logo.vue b/vue/src/layout/component/Logo.vue
index 72a8893..1701835 100644
--- a/vue/src/layout/component/Logo.vue
+++ b/vue/src/layout/component/Logo.vue
@@ -34,7 +34,7 @@ $logoSize: 30px;
     width: 100%;
     height: $nav-height;
     line-height: $nav-height;
-    padding-left: 20px;
+    padding-left: $menu-padding;
 
     .logo-link {
         display: block;