@tmagic/editor 1.0.0-rc.1 → 1.0.0-rc.10

package/dist/types/src/Editor.vue.d.ts

@@ -3,7 +3,7 @@ import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { MoveableOptions } from '@tmagic/stage';
-import type { ComponentGroup, MenuBarData, Services, SideBarData, StageRect } from './type';
+import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
 declare const _default: DefineComponent<{
     /** 页面初始值 */
     modelValue: {
@@ -20,6 +20,14 @@ declare const _default: DefineComponent<{
     sidebar: {
         type: PropType<SideBarData>;
     };
+    layerContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
+    stageContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
     /** 顶部工具栏配置 */
     menu: {
         type: PropType<MenuBarData>;
@@ -34,6 +42,8 @@ declare const _default: DefineComponent<{
     };
     /** 中间工作区域中画布通过iframe渲染时的页面url */
     runtimeUrl: StringConstructor;
+    /** 选中时是否自动滚动到可视区域 */
+    autoScrollIntoView: BooleanConstructor;
     /** 组件的属性配置表单的dsl */
     propsConfigs: {
         type: PropType<Record<string, FormConfig>>;
@@ -52,6 +62,9 @@ declare const _default: DefineComponent<{
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
         type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
+        default: () => (core?: StageCore | undefined) => {
+            container: HTMLElement | null | undefined;
+        };
     };
     /** 编辑器初始化时默认选中的组件ID */
     defaultSelected: {
@@ -59,10 +72,18 @@ declare const _default: DefineComponent<{
     };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
+        default: (el: HTMLElement) => boolean;
     };
     stageRect: {
         type: PropType<StageRect>;
     };
+    codeOptions: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    updateDragEl: {
+        type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
+    };
 }, Services, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("props-panel-mounted" | "update:modelValue")[], "props-panel-mounted" | "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     /** 页面初始值 */
     modelValue: {
@@ -79,6 +100,14 @@ declare const _default: DefineComponent<{
     sidebar: {
         type: PropType<SideBarData>;
     };
+    layerContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
+    stageContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
     /** 顶部工具栏配置 */
     menu: {
         type: PropType<MenuBarData>;
@@ -93,6 +122,8 @@ declare const _default: DefineComponent<{
     };
     /** 中间工作区域中画布通过iframe渲染时的页面url */
     runtimeUrl: StringConstructor;
+    /** 选中时是否自动滚动到可视区域 */
+    autoScrollIntoView: BooleanConstructor;
     /** 组件的属性配置表单的dsl */
     propsConfigs: {
         type: PropType<Record<string, FormConfig>>;
@@ -111,6 +142,9 @@ declare const _default: DefineComponent<{
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
         type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
+        default: () => (core?: StageCore | undefined) => {
+            container: HTMLElement | null | undefined;
+        };
     };
     /** 编辑器初始化时默认选中的组件ID */
     defaultSelected: {
@@ -118,19 +152,33 @@ declare const _default: DefineComponent<{
     };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
+        default: (el: HTMLElement) => boolean;
     };
     stageRect: {
         type: PropType<StageRect>;
     };
+    codeOptions: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    updateDragEl: {
+        type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
+    };
 }>> & {
     "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     menu: MenuBarData;
+    layerContentMenu: MenuItem[];
+    stageContentMenu: MenuItem[];
+    codeOptions: Record<string, any>;
     modelValue: MApp;
     componentGroupList: ComponentGroup[];
+    autoScrollIntoView: boolean;
     propsConfigs: Record<string, FormConfig>;
     propsValues: Record<string, MNode>;
     eventMethodList: Record<string, any>;
+    moveableOptions: MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions);
+    canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
 }>;
 export default _default;

package/dist/types/src/fields/Code.vue.d.ts

@@ -16,9 +16,9 @@ declare const _default: DefineComponent<Readonly<{
 }>>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    name: any;
-    config: any;
-    model: any;
-    prop: any;
+    readonly name?: any;
+    readonly config?: any;
+    readonly model?: any;
+    readonly prop?: any;
 }>;
 export default _default;

package/dist/types/src/fields/CodeLink.vue.d.ts

@@ -20,9 +20,7 @@ declare const _default: DefineComponent<{
     };
 }, {
     modelValue: Ref<{
-        form: {
-            [x: string]: any;
-        };
+        form: Record<string, any>;
     }>;
     formConfig: ComputedRef<{
         text: string;

package/dist/types/src/layouts/Framework.vue.d.ts

@@ -1,11 +1,23 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
 import type { MApp } from '@tmagic/schema';
 import { GetColumnWidth } from '../type';
-declare const _default: DefineComponent<{}, {
+declare const _default: DefineComponent<{
+    codeOptions: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}, {
     root: ComputedRef<MApp | undefined>;
     pageLength: ComputedRef<number>;
     showSrc: ComputedRef<boolean | undefined>;
     columnWidth: ComputedRef<GetColumnWidth | undefined>;
     saveCode(value: string): void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    codeOptions: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>>, {
+    codeOptions: Record<string, any>;
+}>;
 export default _default;

package/dist/types/src/layouts/PropsPanel.vue.d.ts

@@ -1,9 +1,7 @@
 import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { FormValue } from '@tmagic/form';
 declare const _default: DefineComponent<{}, {
-    values: Ref<{
-        [x: string]: any;
-        [x: number]: any;
-    }>;
+    values: Ref<FormValue>;
     configForm: Ref<any>;
     curFormConfig: any;
     propsPanelSize: ComputedRef<unknown>;

package/dist/types/src/layouts/workspace/Workspace.vue.d.ts

@@ -1,31 +1,7 @@
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
 import type { MPage } from '@tmagic/schema';
-import type { MoveableOptions } from '@tmagic/stage';
-import StageCore from '@tmagic/stage';
-declare const _default: DefineComponent<{
-    runtimeUrl: StringConstructor;
-    render: {
-        type: PropType<() => HTMLDivElement>;
-    };
-    moveableOptions: {
-        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
-    };
-    canSelect: {
-        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
-    };
-}, {
+declare const _default: DefineComponent<{}, {
     workspace: Ref<HTMLDivElement | undefined>;
     page: ComputedRef<MPage | undefined>;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
-    runtimeUrl: StringConstructor;
-    render: {
-        type: PropType<() => HTMLDivElement>;
-    };
-    moveableOptions: {
-        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
-    };
-    canSelect: {
-        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
-    };
-}>>, {}>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/services/BaseService.d.ts

@@ -27,7 +27,7 @@ import { EventEmitter } from 'events';
  *    editorService.afterAdd();
  *   }
  *
- * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after最后一个参数则是原方法的return值;
+ * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值;
  * 如需终止后续方法调用可以return new Error();
  *
  * 方法2：

package/dist/types/src/services/history.d.ts

@@ -15,24 +15,7 @@ export interface HistoryState {
 declare class History extends BaseService {
     state: {
         pageId?: Id | undefined;
-        pageSteps: {
-            [x: string]: {
-                pushElement: (element: StepValue) => void;
-                canUndo: () => boolean;
-                undo: () => StepValue | null;
-                canRedo: () => boolean;
-                redo: () => StepValue | null;
-                getCurrentElement: () => StepValue | null;
-            };
-            [x: number]: {
-                pushElement: (element: StepValue) => void;
-                canUndo: () => boolean;
-                undo: () => StepValue | null;
-                canRedo: () => boolean;
-                redo: () => StepValue | null;
-                getCurrentElement: () => StepValue | null;
-            };
-        };
+        pageSteps: Record<Id, UndoRedo<StepValue>>;
         canRedo: boolean;
         canUndo: boolean;
     };

package/dist/types/src/services/props.d.ts

@@ -1,5 +1,5 @@
 import type { FormConfig } from '@tmagic/form';
-import type { MNode } from '@tmagic/schema';
+import type { MNode, MPage } from '@tmagic/schema';
 import BaseService from './BaseService';
 declare class Props extends BaseService {
     private state;
@@ -29,7 +29,13 @@ declare class Props extends BaseService {
      * @param type 组件类型
      * @returns 组件初始值
      */
-    getPropsValue(type: string, defaultValue?: {}): Promise<any>;
+    getPropsValue(type: string, defaultValue?: Record<string, any>): Promise<any>;
+    createId(type: string | number): Promise<string>;
+    /**
+     * 将组件与组件的子元素配置中的id都设置成一个新的ID
+     * @param {Object} config 组件配置
+     */
+    setNewItemId(config: MNode, parent?: MPage): Promise<void>;
 }
 export declare type PropsService = Props;
 declare const _default: Props;

package/dist/types/src/type.d.ts

@@ -2,6 +2,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
+import type { MoveableOptions } from '@tmagic/stage';
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -21,6 +22,14 @@ export interface Services {
     componentListService: ComponentListService;
     uiService: UiService;
 }
+export interface StageOptions {
+    runtimeUrl: string;
+    autoScrollIntoView: boolean;
+    render: () => HTMLDivElement;
+    moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
+    canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
+    updateDragEl: (el: HTMLDivElement) => void;
+}
 export interface StoreState {
     root: MApp | null;
     page: MPage | null;

package/dist/types/src/utils/editor.d.ts

@@ -2,7 +2,6 @@ import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { Layout } from '../type';
 export declare const COPY_STORAGE_KEY = "$MagicEditorCopyData";
-export declare const generateId: (type: string | number) => string;
 /**
  * 获取所有页面配置
  * @param app DSL跟节点
@@ -27,11 +26,6 @@ export declare const generatePageName: (pageNameList: string[]) => string;
  * @returns {string}
  */
 export declare const generatePageNameByApp: (app: MApp) => string;
-/**
- * 将组件与组件的子元素配置中的id都设置成一个新的ID
- * @param {Object} config 组件配置
- */
-export declare const setNewItemId: (config: MNode, parent?: MPage | undefined) => void;
 /**
  * @param {Object} node
  * @returns {boolean}

package/dist/types/src/utils/props.d.ts

@@ -41,9 +41,16 @@ export declare const DEFAULT_CONFIG: FormConfig;
  * @param type 组件类型
  * @returns Object
  */
-export declare const getDefaultPropsValue: (type: string) => {
+export declare const getDefaultPropsValue: (type: string, id: string) => {
     type: string;
     id: string;
     style: {};
     name: string;
+    items: never[];
+} | {
+    type: string;
+    id: string;
+    style: {};
+    name: string;
+    items?: undefined;
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.10",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -22,9 +22,7 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build",
-    "test": "jest --maxWorkers=8",
-    "test:coverage": "jest --maxWorkers=16 --coverage"
+    "build": "vite build"
   },
   "engines": {
     "node": ">=14"
@@ -43,42 +41,43 @@
     "typescript"
   ],
   "dependencies": {
+    "@babel/core": "^7.18.0",
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-rc.1",
-    "@tmagic/form": "^1.0.0-rc.1",
-    "@tmagic/schema": "^1.0.0-rc.1",
-    "@tmagic/stage": "^1.0.0-rc.1",
-    "@tmagic/utils": "^1.0.0-rc.1",
+    "@tmagic/core": "1.0.0-rc.10",
+    "@tmagic/form": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/stage": "1.0.0-rc.10",
+    "@tmagic/utils": "1.0.0-rc.10",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.0",
     "events": "^3.3.0",
+    "gesto": "^1.7.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.2.0"
   },
+  "peerDependencies": {
+    "@tmagic/form": "1.0.0-rc.10",
+    "element-plus": "^2.2.0",
+    "monaco-editor": "^0.32.1",
+    "vue": "^3.2.0"
+  },
   "devDependencies": {
     "@types/events": "^3.0.0",
-    "@types/jest": "^26.0.23",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.2.0",
-    "@vue/test-utils": "^2.0.0-rc.20",
-    "@vue/vue3-jest": "^27.0.0-alpha.4",
-    "jest": "^27.5.1",
-    "jest-serializer-vue": "^2.0.2",
-    "jest-transform-stub": "^2.0.0",
+    "@vue/test-utils": "^2.0.0",
     "sass": "^1.35.1",
-    "ts-jest": "^27.1.4",
     "typescript": "^4.3.4",
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
-  },
-  "gitHead": "3b647794d087888bfec9772f54356fa48c0b6d90"
+  }
 }

package/src/Editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <framework>
+  <framework :code-options="codeOptions">
     <template #nav>
       <slot name="nav" :editorService="editorService"><nav-menu :data="menu"></nav-menu></slot>
     </template>
@@ -12,12 +12,7 @@
 
     <template #workspace :editorService="editorService">
       <slot name="workspace">
-        <workspace
-          :runtime-url="runtimeUrl"
-          :render="render"
-          :moveable-options="moveableOptions"
-          :can-select="canSelect"
-        >
+        <workspace>
           <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
           <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
           <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
@@ -36,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted, PropType, provide, toRaw, watch } from 'vue';
+import { defineComponent, onUnmounted, PropType, provide, reactive, toRaw, watch } from 'vue';
 
 import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
@@ -55,7 +50,7 @@ import eventsService from '@editor/services/events';
 import historyService from '@editor/services/history';
 import propsService from '@editor/services/props';
 import uiService from '@editor/services/ui';
-import type { ComponentGroup, MenuBarData, Services, SideBarData, StageRect } from '@editor/type';
+import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from '@editor/type';
 
 export default defineComponent({
   name: 'm-editor',
@@ -87,6 +82,16 @@ export default defineComponent({
       type: Object as PropType<SideBarData>,
     },
 
+    layerContentMenu: {
+      type: Array as PropType<MenuItem[]>,
+      default: () => [],
+    },
+
+    stageContentMenu: {
+      type: Array as PropType<MenuItem[]>,
+      default: () => [],
+    },
+
     /** 顶部工具栏配置 */
     menu: {
       type: Object as PropType<MenuBarData>,
@@ -101,6 +106,9 @@ export default defineComponent({
     /** 中间工作区域中画布通过iframe渲染时的页面url */
     runtimeUrl: String,
 
+    /** 选中时是否自动滚动到可视区域 */
+    autoScrollIntoView: Boolean,
+
     /** 组件的属性配置表单的dsl */
     propsConfigs: {
       type: Object as PropType<Record<string, FormConfig>>,
@@ -122,6 +130,9 @@ export default defineComponent({
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
       type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
+      default: () => (core?: StageCore) => ({
+        container: core?.renderer?.contentWindow?.document.getElementById('app'),
+      }),
     },
 
     /** 编辑器初始化时默认选中的组件ID */
@@ -131,11 +142,21 @@ export default defineComponent({
 
     canSelect: {
       type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+      default: (el: HTMLElement) => Boolean(el.id),
     },
 
     stageRect: {
       type: [String, Object] as PropType<StageRect>,
     },
+
+    codeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    updateDragEl: {
+      type: Function as PropType<(el: HTMLDivElement, target: HTMLElement) => void>,
+    },
   },
 
   emits: ['props-panel-mounted', 'update:modelValue'],
@@ -228,6 +249,20 @@ export default defineComponent({
 
     provide('services', services);
 
+    provide('layerContentMenu', props.layerContentMenu);
+    provide('stageContentMenu', props.stageContentMenu);
+    provide(
+      'stageOptions',
+      reactive({
+        runtimeUrl: props.runtimeUrl,
+        autoScrollIntoView: props.autoScrollIntoView,
+        render: props.render,
+        moveableOptions: props.moveableOptions,
+        canSelect: props.canSelect,
+        updateDragEl: props.updateDragEl,
+      }),
+    );
+
     return services;
   },
 });

package/src/components/ContentMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
+  <div v-if="menuData.length && visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
     <div>
       <tool-button
         v-for="(item, index) in menuData"
@@ -11,13 +11,19 @@
       ></tool-button>
     </div>
     <teleport to="body">
-      <content-menu class="sub-menu" ref="subMenu" :menu-data="subMenuData"></content-menu>
+      <content-menu
+        class="sub-menu"
+        ref="subMenu"
+        :menu-data="subMenuData"
+        :is-sub-menu="true"
+        @hide="hide"
+      ></content-menu>
     </teleport>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, PropType, ref } from 'vue';
+import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref } from 'vue';
 
 import { MenuButton, MenuItem } from '@editor/type';
 
@@ -31,9 +37,16 @@ export default defineComponent({
       type: Array as PropType<MenuItem[]>,
       default: () => [],
     },
+
+    isSubMenu: {
+      type: Boolean,
+      default: false,
+    },
   },
 
-  setup() {
+  emits: ['hide', 'show'],
+
+  setup(props, { emit }) {
     const menu = ref<HTMLDivElement>();
     const subMenu = ref<any>();
     const visible = ref(false);
@@ -44,20 +57,35 @@ export default defineComponent({
     });
 
     const hide = () => {
+      if (!visible.value) return;
+
       visible.value = false;
+      subMenu.value?.hide();
+
+      emit('hide');
+    };
+
+    const hideHandler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | undefined;
+      if (!visible.value || !target) {
+        return;
+      }
+      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+        return;
+      }
+      hide();
     };
 
     onMounted(() => {
-      globalThis.addEventListener(
-        'mousedown',
-        (e: MouseEvent) => {
-          if (!visible.value || (e.target && menu.value?.contains(e.target as HTMLElement))) {
-            return;
-          }
-          hide();
-        },
-        true,
-      );
+      if (props.isSubMenu) return;
+
+      globalThis.addEventListener('mousedown', hideHandler, true);
+    });
+
+    onUnmounted(() => {
+      if (props.isSubMenu) return;
+
+      globalThis.removeEventListener('mousedown', hideHandler, true);
     });
 
     return {
@@ -70,21 +98,26 @@ export default defineComponent({
       hide,
 
       show(e: MouseEvent) {
-        visible.value = true;
+        // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
+        setTimeout(() => {
+          visible.value = true;
+
+          nextTick(() => {
+            const menuHeight = menu.value?.clientHeight || 0;
 
-        nextTick(() => {
-          const menuHeight = menu.value?.clientHeight || 0;
+            let top = e.clientY;
+            if (menuHeight + e.clientY > document.body.clientHeight) {
+              top = document.body.clientHeight - menuHeight;
+            }
 
-          let top = e.clientY;
-          if (menuHeight + e.clientY > document.body.clientHeight) {
-            top = document.body.clientHeight - menuHeight;
-          }
+            menuStyle.value = {
+              top: `${top}px`,
+              left: `${e.clientX}px`,
+            };
 
-          menuStyle.value = {
-            top: `${top}px`,
-            left: `${e.clientX}px`,
-          };
-        });
+            emit('show');
+          });
+        }, 300);
       },
 
       showSubMenu(item: MenuItem) {