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(
+  defineProps<{
     layerContentMenu: (MenuButton | MenuComponent)[];
-}>();
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    layerContentMenu: () => [],
+    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
+  },
+);
 
 const emit = defineEmits<{
   'collapse-all': [];
@@ -82,7 +89,9 @@ const getSubMenuData = computed<MenuButton[]>(() => {
   return [];
 });
 
-const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
+const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
+  props.customContentMenu(
+    [
       {
         type: 'button',
         text: '全部折叠',
@@ -104,7 +113,10 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
       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,7 +40,9 @@ 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: '水平居中',
@@ -108,7 +118,10 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
         },
       },
       ...props.stageContentMenu,
-]);
+    ],
+    'viewer',
+  ),
+);
 
 watch(
   parent,