diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 8115f1c4..76672144 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -16,7 +16,7 @@
-
+
@@ -58,7 +58,7 @@
-
+
diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts
index 41dd6832..076b3406 100644
--- a/packages/editor/src/editorProps.ts
+++ b/packages/editor/src/editorProps.ts
@@ -74,6 +74,7 @@ export interface EditorProps {
collectorOptions?: CustomTargetOptions;
guidesOptions?: Partial;
disabledMultiSelect?: boolean;
+ customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
}
export const defaultEditorProps = {
diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index cefec9f0..417a7ddd 100644
--- 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: {},
diff --git a/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue b/packages/editor/src/layouts/sidebar/layer/LayerMenu.vue
index ca5b55fd..70a8f664 100644
--- 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(() => {
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);
diff --git a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
index cdb3d14c..9c16afdc 100644
--- a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
@@ -34,7 +34,12 @@
-
+
@@ -65,6 +70,7 @@ defineOptions({
defineProps<{
layerContentMenu: (MenuButton | MenuComponent)[];
+ customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
}>();
const services = inject('services');
diff --git a/packages/editor/src/layouts/workspace/Workspace.vue b/packages/editor/src/layouts/workspace/Workspace.vue
index 178849b1..3c41b32b 100644
--- a/packages/editor/src/layouts/workspace/Workspace.vue
+++ b/packages/editor/src/layouts/workspace/Workspace.vue
@@ -3,7 +3,11 @@
-
+
@@ -32,6 +36,7 @@ defineOptions({
defineProps<{
stageContentMenu: (MenuButton | MenuComponent)[];
+ customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
}>();
const services = inject('services');
diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue
index 956cb69a..700b2524 100644
--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue
@@ -25,7 +25,12 @@
-
+
@@ -52,6 +57,7 @@ defineOptions({
defineProps<{
stageContentMenu: (MenuButton | MenuComponent)[];
+ customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
}>();
let stage: StageCore | null = null;
diff --git a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
index 83b926f6..5ff4770c 100644
--- 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');
@@ -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,