perf: 右键菜单优化（带子菜单的菜单项可点）

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;
   }

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()
     }

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.TOP) },
-            { text: '置底层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.BOTTOM) },
-            { divider: true },
             { 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) },
           ],
         },