feat(editor): 右键菜单兼容页面片

This commit is contained in:
roymondchen 2023-12-19 14:50:54 +08:00
parent 7b6dcedfad
commit 41a3b8c7c7
3 changed files with 11 additions and 11 deletions

View File

@ -6,7 +6,7 @@
import { computed, inject, markRaw, ref } from 'vue'; import { computed, inject, markRaw, ref } from 'vue';
import { Files, Plus } from '@element-plus/icons-vue'; import { Files, Plus } from '@element-plus/icons-vue';
import { isPage } from '@tmagic/utils'; import { isPage, isPageFragment } from '@tmagic/utils';
import ContentMenu from '@editor/components/ContentMenu.vue'; import ContentMenu from '@editor/components/ContentMenu.vue';
import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue'; import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue';
@ -96,7 +96,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
type: 'button', type: 'button',
text: '全部折叠', text: '全部折叠',
icon: FolderMinusIcon, icon: FolderMinusIcon,
display: () => isPage(node.value), display: () => isPage(node.value) || isPageFragment(node.value),
handler: () => { handler: () => {
emit('collapse-all'); emit('collapse-all');
}, },

View File

@ -7,7 +7,7 @@ import { computed, inject, markRaw, ref, watch } from 'vue';
import { Bottom, Top } from '@element-plus/icons-vue'; import { Bottom, Top } from '@element-plus/icons-vue';
import { NodeType } from '@tmagic/schema'; import { NodeType } from '@tmagic/schema';
import { isPage } from '@tmagic/utils'; import { isPage, isPageFragment } from '@tmagic/utils';
import ContentMenu from '@editor/components/ContentMenu.vue'; import ContentMenu from '@editor/components/ContentMenu.vue';
import CenterIcon from '@editor/icons/CenterIcon.vue'; import CenterIcon from '@editor/icons/CenterIcon.vue';
@ -60,14 +60,14 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
direction: 'horizontal', direction: 'horizontal',
display: () => { display: () => {
if (!node.value) return false; if (!node.value) return false;
return !isPage(node.value); return !isPage(node.value) && !isPageFragment(node.value);
}, },
}, },
{ {
type: 'button', type: 'button',
text: '上移一层', text: '上移一层',
icon: markRaw(Top), icon: markRaw(Top),
display: () => !isPage(node.value) && !props.isMultiSelect, display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
handler: () => { handler: () => {
editorService?.moveLayer(1); editorService?.moveLayer(1);
}, },
@ -76,7 +76,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
type: 'button', type: 'button',
text: '下移一层', text: '下移一层',
icon: markRaw(Bottom), icon: markRaw(Bottom),
display: () => !isPage(node.value) && !props.isMultiSelect, display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
handler: () => { handler: () => {
editorService?.moveLayer(-1); editorService?.moveLayer(-1);
}, },
@ -85,7 +85,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
type: 'button', type: 'button',
text: '置顶', text: '置顶',
icon: markRaw(Top), icon: markRaw(Top),
display: () => !isPage(node.value) && !props.isMultiSelect, display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
handler: () => { handler: () => {
editorService?.moveLayer(LayerOffset.TOP); editorService?.moveLayer(LayerOffset.TOP);
}, },
@ -94,7 +94,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
type: 'button', type: 'button',
text: '置底', text: '置底',
icon: markRaw(Bottom), icon: markRaw(Bottom),
display: () => !isPage(node.value) && !props.isMultiSelect, display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
handler: () => { handler: () => {
editorService?.moveLayer(LayerOffset.BOTTOM); editorService?.moveLayer(LayerOffset.BOTTOM);
}, },
@ -103,7 +103,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
{ {
type: 'divider', type: 'divider',
direction: 'horizontal', direction: 'horizontal',
display: () => !isPage(node.value) && !props.isMultiSelect, display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
}, },
useDeleteMenu(), useDeleteMenu(),
{ {

View File

@ -2,7 +2,7 @@ import { computed, markRaw, Ref } from 'vue';
import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue'; import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
import { Id, MContainer, NodeType } from '@tmagic/schema'; import { Id, MContainer, NodeType } from '@tmagic/schema';
import { isPage } from '@tmagic/utils'; import { isPage, isPageFragment } from '@tmagic/utils';
import ContentMenu from '@editor/components/ContentMenu.vue'; import ContentMenu from '@editor/components/ContentMenu.vue';
import type { MenuButton, Services } from '@editor/type'; import type { MenuButton, Services } from '@editor/type';
@ -15,7 +15,7 @@ export const useDeleteMenu = (): MenuButton => ({
icon: Delete, icon: Delete,
display: (services) => { display: (services) => {
const node = services?.editorService?.get('node'); const node = services?.editorService?.get('node');
return node?.type !== NodeType.ROOT && !isPage(node); return node?.type !== NodeType.ROOT && !isPage(node) && !isPageFragment(node);
}, },
handler: (services) => { handler: (services) => {
const nodes = services?.editorService?.get('nodes'); const nodes = services?.editorService?.get('nodes');