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

2025-11-04 10:49:51 +08:00 · 2023-12-18 20:37:10 +08:00 · 2023-12-18 20:37:10 +08:00 · 698c3451ff
commit 698c3451ff
parent 4ec0b69a8d
8 changed files with 155 additions and 110 deletions
--- a/packages/editor/src/Editor.vue
+++ b/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>
--- a/packages/editor/src/editorProps.ts
+++ b/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 = {
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/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: {},
--- a/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue
+++ b/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue
@ -17,9 +17,16 @@ defineOptions({
  name: 'MEditorLayerMenu',
 });

-const props = defineProps<{
-  layerContentMenu: (MenuButton | MenuComponent)[];
-}>();
+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,29 +89,34 @@ const getSubMenuData = computed<MenuButton[]>(() => {
  return [];
 });

-const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
-  {
-    type: 'button',
-    text: '全部折叠',
-    icon: FolderMinusIcon,
-    display: () => isPage(node.value),
-    handler: () => {
-      emit('collapse-all');
-    },
-  },
-  {
-    type: 'button',
-    text: '新增',
-    icon: markRaw(Plus),
-    display: () => node.value?.items && nodes.value?.length === 1,
-    items: getSubMenuData.value,
-  },
-  useCopyMenu(),
-  usePasteMenu(),
-  useDeleteMenu(),
-  useMoveToMenu(services),
-  ...props.layerContentMenu,
-]);
+const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
+  props.customContentMenu(
+    [
+      {
+        type: 'button',
+        text: '全部折叠',
+        icon: FolderMinusIcon,
+        display: () => isPage(node.value),
+        handler: () => {
+          emit('collapse-all');
+        },
+      },
+      {
+        type: 'button',
+        text: '新增',
+        icon: markRaw(Plus),
+        display: () => node.value?.items && nodes.value?.length === 1,
+        items: getSubMenuData.value,
+      },
+      useCopyMenu(),
+      usePasteMenu(),
+      useDeleteMenu(),
+      useMoveToMenu(services),
+      ...props.layerContentMenu,
+    ],
+    'layer',
+  ),
+);

 const show = (e: MouseEvent) => {
  menu.value?.show(e);
--- a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
+++ b/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');
--- a/packages/editor/src/layouts/workspace/Workspace.vue
+++ b/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');
--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/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;
--- a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
@ -19,8 +19,16 @@ defineOptions({
 });

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

 watch(
  parent,