feat: right-click menu supports multiple levels

src/components/ContextMenu/src/index.less

@@ -1,5 +1,28 @@
 @import (reference) '../../../design/index.less';
 
+.item-style() {
+  li {
+    display: inline-block;
+    width: 100%;
+    height: 46px !important;
+    margin: 0 !important;
+    line-height: 46px;
+
+    span {
+      line-height: 46px;
+    }
+
+    > div {
+      margin: 0 !important;
+    }
+
+    &:hover {
+      color: @text-color-base;
+      background: #eee;
+    }
+  }
+}
+
 .context-menu {
   position: fixed;
   top: 0;
@@ -18,32 +41,17 @@
   background-clip: padding-box;
   user-select: none;
 
-  &.hidden {
-    display: none !important;
+  .item-style();
+
+  .ant-divider {
+    margin: 0 0;
   }
 
-  &__item {
-    a {
-      display: inline-block;
-      width: 100%;
-      padding: 10px 14px;
-
-      &:hover {
-        color: @text-color-base;
-        background: #eee;
-      }
+  &__popup {
+    .ant-divider {
+      margin: 0 0;
     }
 
-    &.disabled {
-      a {
-        color: @disabled-color;
-        cursor: not-allowed;
-
-        &:hover {
-          color: @disabled-color;
-          background: unset;
-        }
-      }
-    }
+    .item-style();
   }
 }

src/components/ContextMenu/src/index.tsx

@@ -8,9 +8,13 @@ import {
   unref,
   onUnmounted,
 } from 'vue';
+
 import { props } from './props';
 import Icon from '/@/components/Icon';
+import { Menu, Divider } from 'ant-design-vue';
+
 import type { ContextMenuItem } from './types';
+
 import './index.less';
 const prefixCls = 'context-menu';
 export default defineComponent({
@@ -43,12 +47,13 @@ export default defineComponent({
         top: (body.clientHeight < y + menuHeight ? y - menuHeight : y) + 'px',
       };
     });
+
     function handleAction(item: ContextMenuItem, e: MouseEvent) {
+      state.show = false;
       const { handler, disabled } = item;
       if (disabled) {
         return;
       }
-      state.show = false;
       if (e) {
         e.stopPropagation();
         e.preventDefault();
@@ -61,31 +66,47 @@ export default defineComponent({
 
       const { showIcon } = props;
       return (
-        <span style="display: inline-block; width: 100%;">
+        <span style="display: inline-block; width: 100%;" onClick={handleAction.bind(null, item)}>
           {showIcon && icon && <Icon class="mr-2" icon={icon} />}
           <span>{label}</span>
         </span>
       );
     }
     function renderMenuItem(items: ContextMenuItem[]) {
-      return items.map((item) => {
-        const { disabled, label } = item;
+      return items.map((item, index) => {
+        const { disabled, label, children, divider = false } = item;
 
-        return (
-          <li class={`${prefixCls}__item ${disabled ? 'disabled' : ''}`} key={label}>
-            <a onClick={handleAction.bind(null, item)} style="color:#333;">
-              {renderContent(item)}
-            </a>
-          </li>
+        const DividerComp = divider ? <Divider key={`d-${index}`} /> : null;
+        if (!children || children.length === 0) {
+          return [
+            <Menu.Item disabled={disabled} class={`${prefixCls}__item`} key={label}>
+              {() => [renderContent(item)]}
+            </Menu.Item>,
+            DividerComp,
+          ];
+        }
+        return !state.show ? null : (
+          <Menu.SubMenu key={label} disabled={disabled} popupClassName={`${prefixCls}__popup `}>
+            {{
+              title: () => renderContent(item),
+              default: () => [renderMenuItem(children)],
+            }}
+          </Menu.SubMenu>
         );
       });
     }
     return () => {
       const { items } = props;
-      return (
-        <ul class={[prefixCls, !state.show && 'hidden']} ref={wrapRef} style={unref(getStyle)}>
-          {renderMenuItem(items)}
-        </ul>
+      return !state.show ? null : (
+        <Menu
+          inlineIndent={12}
+          mode="vertical"
+          class={[prefixCls]}
+          ref={wrapRef}
+          style={unref(getStyle)}
+        >
+          {() => renderMenuItem(items)}
+        </Menu>
       );
     };
   },