feat(editor): 新增自定义右键菜单函数配置

packages/editor/src/Editor.vue

@@ -16,7 +16,7 @@
 
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
-        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu">
+        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu" :custom-content-menu="customContentMenu">
           <template #layer-panel-header>
             <slot name="layer-panel-header"></slot>
           </template>
@@ -58,7 +58,7 @@
 
     <template #workspace>
       <slot name="workspace" :editorService="editorService">
-        <Workspace :stage-content-menu="stageContentMenu">
+        <Workspace :stage-content-menu="stageContentMenu" :custom-content-menu="customContentMenu">
           <template #stage><slot name="stage"></slot></template>
           <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>

packages/editor/src/editorProps.ts

@@ -74,6 +74,7 @@ export interface EditorProps {
   collectorOptions?: CustomTargetOptions;
   guidesOptions?: Partial<GuidesOptions>;
   disabledMultiSelect?: boolean;
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }
 
 export const defaultEditorProps = {

packages/editor/src/layouts/sidebar/Sidebar.vue

@@ -160,6 +160,7 @@ const props = withDefaults(
   defineProps<{
     data: SideBarData;
     layerContentMenu: (MenuButton | MenuComponent)[];
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
   }>(),
   {
     data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block', 'data-source'] }),
@@ -187,6 +188,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '已选组件',
       props: {
         layerContentMenu: props.layerContentMenu,
+        customContentMenu: props.customContentMenu,
       },
       component: LayerPanel,
       slots: {},

packages/editor/src/layouts/sidebar/layer/LayerMenu.vue

@@ -17,9 +17,16 @@ defineOptions({
   name: 'MEditorLayerMenu',
 });
 
-const props = defineProps<{
+const props = withDefaults(
-  layerContentMenu: (MenuButton | MenuComponent)[];
+  defineProps<{
-}>();
+    layerContentMenu: (MenuButton | MenuComponent)[];
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    layerContentMenu: () => [],
+    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
+  },
+);
 
 const emit = defineEmits<{
   'collapse-all': [];
@@ -82,29 +89,34 @@ const getSubMenuData = computed<MenuButton[]>(() => {
   return [];
 });
 
-const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
+const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
-  {
+  props.customContentMenu(
-    type: 'button',
+    [
-    text: '全部折叠',
+      {
-    icon: FolderMinusIcon,
+        type: 'button',
-    display: () => isPage(node.value),
+        text: '全部折叠',
-    handler: () => {
+        icon: FolderMinusIcon,
-      emit('collapse-all');
+        display: () => isPage(node.value),
-    },
+        handler: () => {
-  },
+          emit('collapse-all');
-  {
+        },
-    type: 'button',
+      },
-    text: '新增',
+      {
-    icon: markRaw(Plus),
+        type: 'button',
-    display: () => node.value?.items && nodes.value?.length === 1,
+        text: '新增',
-    items: getSubMenuData.value,
+        icon: markRaw(Plus),
-  },
+        display: () => node.value?.items && nodes.value?.length === 1,
-  useCopyMenu(),
+        items: getSubMenuData.value,
-  usePasteMenu(),
+      },
-  useDeleteMenu(),
+      useCopyMenu(),
-  useMoveToMenu(services),
+      usePasteMenu(),
-  ...props.layerContentMenu,
+      useDeleteMenu(),
-]);
+      useMoveToMenu(services),
+      ...props.layerContentMenu,
+    ],
+    'layer',
+  ),
+);
 
 const show = (e: MouseEvent) => {
   menu.value?.show(e);

packages/editor/src/layouts/sidebar/layer/LayerPanel.vue

@@ -34,7 +34,12 @@
     </Tree>
 
     <Teleport to="body">
-      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu" @collapse-all="collapseAllHandler"></LayerMenu>
+      <LayerMenu
+        ref="menu"
+        :layer-content-menu="layerContentMenu"
+        :custom-content-menu="customContentMenu"
+        @collapse-all="collapseAllHandler"
+      ></LayerMenu>
     </Teleport>
   </TMagicScrollbar>
 </template>
@@ -65,6 +70,7 @@ defineOptions({
 
 defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }>();
 
 const services = inject<Services>('services');

packages/editor/src/layouts/workspace/Workspace.vue

@@ -3,7 +3,11 @@
     <Breadcrumb></Breadcrumb>
 
     <slot name="stage">
-      <MagicStage v-if="page" :stage-content-menu="stageContentMenu"></MagicStage>
+      <MagicStage
+        v-if="page"
+        :stage-content-menu="stageContentMenu"
+        :custom-content-menu="customContentMenu"
+      ></MagicStage>
     </slot>
 
     <slot name="workspace-content"></slot>
@@ -32,6 +36,7 @@ defineOptions({
 
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }>();
 
 const services = inject<Services>('services');

packages/editor/src/layouts/workspace/viewer/Stage.vue

@@ -25,7 +25,12 @@
     <NodeListMenu></NodeListMenu>
 
     <Teleport to="body">
-      <ViewerMenu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></ViewerMenu>
+      <ViewerMenu
+        ref="menu"
+        :is-multi-select="isMultiSelect"
+        :stage-content-menu="stageContentMenu"
+        :custom-content-menu="customContentMenu"
+      ></ViewerMenu>
     </Teleport>
   </ScrollViewer>
 </template>
@@ -52,6 +57,7 @@ defineOptions({
 
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }>();
 
 let stage: StageCore | null = null;

packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue

@@ -19,8 +19,16 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
+  defineProps<{
-  { isMultiSelect: false },
+    isMultiSelect?: boolean;
+    stageContentMenu: (MenuButton | MenuComponent)[];
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    isMultiSelect: false,
+    stageContentMenu: () => [],
+    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
+  },
 );
 
 const services = inject<Services>('services');
@@ -32,83 +40,88 @@ const node = computed(() => editorService?.get('node'));
 const nodes = computed(() => editorService?.get('nodes'));
 const parent = computed(() => editorService?.get('parent'));
 
-const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
+const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
-  {
+  props.customContentMenu(
-    type: 'button',
+    [
-    text: '水平居中',
+      {
-    icon: markRaw(CenterIcon),
+        type: 'button',
-    display: () => canCenter.value,
+        text: '水平居中',
-    handler: () => {
+        icon: markRaw(CenterIcon),
-      if (!nodes.value) return;
+        display: () => canCenter.value,
-      editorService?.alignCenter(nodes.value);
+        handler: () => {
-    },
+          if (!nodes.value) return;
-  },
+          editorService?.alignCenter(nodes.value);
-  useCopyMenu(),
+        },
-  usePasteMenu(menu),
+      },
-  {
+      useCopyMenu(),
-    type: 'divider',
+      usePasteMenu(menu),
-    direction: 'horizontal',
+      {
-    display: () => {
+        type: 'divider',
-      if (!node.value) return false;
+        direction: 'horizontal',
-      return !isPage(node.value);
+        display: () => {
-    },
+          if (!node.value) return false;
-  },
+          return !isPage(node.value);
-  {
+        },
-    type: 'button',
+      },
-    text: '上移一层',
+      {
-    icon: markRaw(Top),
+        type: 'button',
-    display: () => !isPage(node.value) && !props.isMultiSelect,
+        text: '上移一层',
-    handler: () => {
+        icon: markRaw(Top),
-      editorService?.moveLayer(1);
+        display: () => !isPage(node.value) && !props.isMultiSelect,
-    },
+        handler: () => {
-  },
+          editorService?.moveLayer(1);
-  {
+        },
-    type: 'button',
+      },
-    text: '下移一层',
+      {
-    icon: markRaw(Bottom),
+        type: 'button',
-    display: () => !isPage(node.value) && !props.isMultiSelect,
+        text: '下移一层',
-    handler: () => {
+        icon: markRaw(Bottom),
-      editorService?.moveLayer(-1);
+        display: () => !isPage(node.value) && !props.isMultiSelect,
-    },
+        handler: () => {
-  },
+          editorService?.moveLayer(-1);
-  {
+        },
-    type: 'button',
+      },
-    text: '置顶',
+      {
-    icon: markRaw(Top),
+        type: 'button',
-    display: () => !isPage(node.value) && !props.isMultiSelect,
+        text: '置顶',
-    handler: () => {
+        icon: markRaw(Top),
-      editorService?.moveLayer(LayerOffset.TOP);
+        display: () => !isPage(node.value) && !props.isMultiSelect,
-    },
+        handler: () => {
-  },
+          editorService?.moveLayer(LayerOffset.TOP);
-  {
+        },
-    type: 'button',
+      },
-    text: '置底',
+      {
-    icon: markRaw(Bottom),
+        type: 'button',
-    display: () => !isPage(node.value) && !props.isMultiSelect,
+        text: '置底',
-    handler: () => {
+        icon: markRaw(Bottom),
-      editorService?.moveLayer(LayerOffset.BOTTOM);
+        display: () => !isPage(node.value) && !props.isMultiSelect,
-    },
+        handler: () => {
-  },
+          editorService?.moveLayer(LayerOffset.BOTTOM);
-  useMoveToMenu(services),
+        },
-  {
+      },
-    type: 'divider',
+      useMoveToMenu(services),
-    direction: 'horizontal',
+      {
-    display: () => !isPage(node.value) && !props.isMultiSelect,
+        type: 'divider',
-  },
+        direction: 'horizontal',
-  useDeleteMenu(),
+        display: () => !isPage(node.value) && !props.isMultiSelect,
-  {
+      },
-    type: 'divider',
+      useDeleteMenu(),
-    direction: 'horizontal',
+      {
-  },
+        type: 'divider',
-  {
+        direction: 'horizontal',
-    type: 'button',
+      },
-    text: '清空参考线',
+      {
-    handler: () => {
+        type: 'button',
-      editorService?.get('stage')?.clearGuides();
+        text: '清空参考线',
-    },
+        handler: () => {
-  },
+          editorService?.get('stage')?.clearGuides();
-  ...props.stageContentMenu,
+        },
-]);
+      },
+      ...props.stageContentMenu,
+    ],
+    'viewer',
+  ),
+);
 
 watch(
   parent,