From e9557b74954d1cd7a8c0b3055d52132fc46888eb Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 11 Apr 2021 10:14:07 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=88=E5=B8=A6=E5=AD=90=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E7=9A=84=E8=8F=9C=E5=8D=95=E9=A1=B9=E5=8F=AF=E7=82=B9=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Contextmenu/MenuContent.vue  | 26 ++++++++++++++++++++-
 src/components/Contextmenu/index.vue        |  3 ++-
 src/views/Editor/Canvas/EditableElement.vue | 15 ++++++++----
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/Contextmenu/MenuContent.vue b/src/components/Contextmenu/MenuContent.vue
index 6c4be4c4..1648f7d3 100644
--- a/src/components/Contextmenu/MenuContent.vue
+++ b/src/components/Contextmenu/MenuContent.vue
@@ -7,7 +7,14 @@
         @click.stop="handleClickMenuItem(menu)"
         :class="{'divider': menu.divider, 'disable': menu.disable}"
       >
-        <div class="menu-item-content" :class="{'has-children': menu.children}" v-if="!menu.divider">
+        <div 
+          class="menu-item-content" 
+          :class="{
+            'has-children': menu.children,
+            'has-handler': menu.handler,
+          }" 
+          v-if="!menu.divider"
+        >
           <span class="text">{{menu.text}}</span>
           <span class="sub-text" v-if="menu.subText && !menu.children">{{menu.subText}}</span>
 
@@ -72,6 +79,10 @@ $subMenuWidth: 120px;
     display: block;
   }
 
+  &:not(.disable):hover > .has-children.has-handler::after {
+    transform: scale(1);
+  }
+
   &:hover:not(.disable) {
     background-color: rgba($color: $themeColor, $alpha: .2);
   }
@@ -109,6 +120,19 @@ $subMenuWidth: 120px;
     top: 50%;
     transform: translateY(-50%) rotate(45deg);
   }
+  &.has-children.has-handler::after {
+    content: '';
+    display: inline-block;
+    width: 1px;
+    height: 24px;
+    background-color: #f1f1f1;
+    position: absolute;
+    right: 18px;
+    top: 3px;
+    transform: scale(0);
+    transition: transform .2s;
+  }
+
   .sub-text {
     opacity: 0.6;
   }
diff --git a/src/components/Contextmenu/index.vue b/src/components/Contextmenu/index.vue
index 6a1b262d..f2ba0705 100644
--- a/src/components/Contextmenu/index.vue
+++ b/src/components/Contextmenu/index.vue
@@ -73,7 +73,8 @@ export default defineComponent({
     })
 
     const handleClickMenuItem = (item: ContextmenuItem) => {
-      if (item.disable || item.children) return
+      if (item.disable) return
+      if (item.children && !item.handler) return
       if (item.handler) item.handler(props.el)
       props.removeContextmenu()
     }
diff --git a/src/views/Editor/Canvas/EditableElement.vue b/src/views/Editor/Canvas/EditableElement.vue
index f43c70ce..db043a2c 100644
--- a/src/views/Editor/Canvas/EditableElement.vue
+++ b/src/views/Editor/Canvas/EditableElement.vue
@@ -125,13 +125,20 @@ export default defineComponent({
           ],
         },
         {
-          text: '层级排序',
+          text: '置于顶层',
           disable: props.isMultiSelect && !props.elementInfo.groupId,
+          handler: () => orderElement(props.elementInfo, ElementOrderCommands.TOP),
           children: [
-            { text: '置顶层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.TOP) },
-            { text: '置底层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.BOTTOM) },
-            { divider: true },
+            { text: '置于顶层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.TOP) },
             { text: '上移一层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.UP) },
+          ],
+        },
+        {
+          text: '置于底层',
+          disable: props.isMultiSelect && !props.elementInfo.groupId,
+          handler: () => orderElement(props.elementInfo, ElementOrderCommands.BOTTOM),
+          children: [
+            { text: '置于底层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.BOTTOM) },
             { text: '下移一层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.DOWN) },
           ],
         },