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

src/components/Description/src/index.tsx

@@ -23,6 +23,7 @@ export default defineComponent({
         ...unref(propsRef),
       };
     });
+
     const getProps = computed(() => {
       const opt = {
         ...props,
@@ -31,12 +32,14 @@ export default defineComponent({
       };
       return opt;
     });
+
     /**
      * @description: 是否使用标题
      */
     const useWrapper = computed(() => {
       return !!unref(getMergeProps).title;
     });
+
     /**
      * @description: 获取配置Collapse
      */
@@ -49,6 +52,7 @@ export default defineComponent({
         };
       }
     );
+
     /**
      * @description:设置desc
      */
@@ -57,9 +61,11 @@ export default defineComponent({
       const mergeProps = deepMerge(unref(propsRef) || {}, descProps);
       propsRef.value = cloneDeep(mergeProps);
     }
+
     const methods: DescInstance = {
       setDescProps,
     };
+
     emit('register', methods);
 
     // 防止换行
@@ -95,6 +101,7 @@ export default defineComponent({
 
         const width = contentMinWidth;
         return (
+          // @ts-ignore
           <Descriptions.Item label={renderLabel(item)} key={field} span={span}>
             {() =>
               contentMinWidth ? (
@@ -113,13 +120,15 @@ export default defineComponent({
         );
       });
     }
+
     const renderDesc = () => {
       return (
-        <Descriptions class={`${prefixCls}`} {...{ ...attrs, ...unref(getProps) }}>
+        <Descriptions class={`${prefixCls}`} {...{ ...attrs, ...(unref(getProps) as any) }}>
           {() => renderItem()}
         </Descriptions>
       );
     };
+
     const renderContainer = () => {
       const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>;
       // 减少dom层级

src/components/Description/src/useDescription.ts

@@ -10,7 +10,7 @@ export function useDescription(props?: Partial<DescOptions>): UseDescReturnType
   const descRef = ref<DescInstance | null>(null);
   const loadedRef = ref(false);
 
-  function getDescription(instance: DescInstance) {
+  function register(instance: DescInstance) {
     if (unref(loadedRef) && isProdMode()) {
       return;
     }
@@ -18,10 +18,11 @@ export function useDescription(props?: Partial<DescOptions>): UseDescReturnType
     props && instance.setDescProps(props);
     loadedRef.value = true;
   }
+
   const methods: DescInstance = {
     setDescProps: (descProps: Partial<DescOptions>): void => {
       unref(descRef)!.setDescProps(descProps);
     },
   };
-  return [getDescription, methods];
+  return [register, methods];
 }

src/components/Icon/index.tsx

@@ -32,6 +32,7 @@ export default defineComponent({
       const { icon, prefix } = props;
       return `${prefix ? prefix + ':' : ''}${icon}`;
     });
+
     const update = async () => {
       const el = unref(elRef);
       if (el) {
@@ -67,6 +68,7 @@ export default defineComponent({
     });
 
     watch(() => props.icon, update, { flush: 'post' });
+
     onMounted(update);
 
     return () => (

src/components/Menu/src/BasicMenu.tsx

@@ -55,6 +55,7 @@ export default defineComponent({
       }
       return menuState.openKeys;
     });
+
     // menu外层样式
     const getMenuWrapStyle = computed((): any => {
       const { showLogo, search } = props;
@@ -130,6 +131,7 @@ export default defineComponent({
       menuState.selectedKeys = [path];
       emit('menuClick', menu);
     }
+
     function handleMenuChange() {
       const { flatItems } = props;
       if (!unref(flatItems) || flatItems.length === 0) {

src/components/Menu/src/useSearchInput.ts

@@ -48,9 +48,11 @@ export function useSearchInput({
     openKeys = es6Unique(openKeys);
     menuState.openKeys = openKeys;
   }
+
   // 搜索框点击
   function handleInputClick(e: any): void {
     emit('clickSearchInput', e);
   }
+
   return { handleInputChange, handleInputClick };
 }

src/components/Preview/src/index.tsx

@@ -219,6 +219,7 @@ export default defineComponent({
         </div>
       );
     };
+
     const renderIndex = () => {
       if (!unref(getIsMultipleImage)) {
         return null;