github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-06-11 18:02:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): 页面删除前增加确认弹窗并支持危险样式按钮

Browse Source
This commit is contained in:
roymondchen 2026-06-11 17:00:10 +08:00
parent 846f05e04d
commit 113af7dd51
5 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor/src/components/ToolButton.vue
View File

@ -13,7 +13,7 @@
<template v-else-if="data.type === 'button'">
<TMagicTooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
<TMagicButton size="small" link :disabled="disabled">
<TMagicButton size="small" link :disabled="disabled" v-bind="data.buttonProps || {}">
<template #icon v-if="data.icon">
<MIcon :icon="data.icon"></MIcon>
</template>
@ -21,7 +21,7 @@
</TMagicButton>
</TMagicTooltip>
<TMagicButton v-else size="small" link :disabled="disabled" :title="data.text">
<TMagicButton v-else size="small" link :disabled="disabled" :title="data.text" v-bind="data.buttonProps || {}">
<template #icon v-if="data.icon">
<MIcon :icon="data.icon"></MIcon>
</template>

6
packages/editor/src/layouts/page-bar/PageBar.vue
View File

@ -51,6 +51,7 @@
type: 'button',
text: '删除',
icon: Delete,
buttonProps: { type: 'danger' },
handler: () => remove(item),
}"
></ToolButton>
@ -72,7 +73,7 @@ import { computed, ref, useTemplateRef, watch } from 'vue';
import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
import { type Id, type MPage, type MPageFragment, NodeType } from '@tmagic/core';
import { TMagicIcon, TMagicPopover } from '@tmagic/design';
import { TMagicIcon, tMagicMessageBox, TMagicPopover } from '@tmagic/design';
import ToolButton from '@editor/components/ToolButton.vue';
import { useServices } from '@editor/hooks/use-services';
@ -140,7 +141,8 @@ const copy = (node: MPage | MPageFragment) => {
});
};
const remove = (node: MPage | MPageFragment) => {
const remove = async (node: MPage | MPageFragment) => {
await tMagicMessageBox.confirm('确定删除该页面吗？');
editorService.remove(node);
};

4
packages/editor/src/theme/page-bar.scss
View File

@ -102,10 +102,6 @@
transition: all 0.2s ease 0s;
padding: 5px 14px;
.tmagic-design-button {
color: $font-color;
}
&:hover {
background-color: $hover-color;
}

3
packages/editor/src/type.ts
View File

@ -392,6 +392,9 @@ export interface MenuButton {
items?: MenuButton[];
/** 唯一标识，用于高亮 */
id?: string | number;
buttonProps?: {
type?: string;
};
}
// #endregion MenuButton

4
packages/editor/tests/unit/layouts/page-bar/PageBar.spec.ts
View File

@ -9,6 +9,8 @@ import { mount } from '@vue/test-utils';
import PageBar from '@editor/layouts/page-bar/PageBar.vue';
const { messageBoxConfirm } = vi.hoisted(() => ({ messageBoxConfirm: vi.fn(async () => undefined) }));
const editorState = {
page: ref<any>({ id: 'p1' }),
root: ref<any>({
@ -120,6 +122,7 @@ vi.mock('@tmagic/design', () => ({
return () => h('div', { class: 'fake-popover' }, [slots.reference?.(), slots.default?.()]);
},
}),
tMagicMessageBox: { confirm: messageBoxConfirm },
}));
beforeEach(() => {
@ -171,6 +174,7 @@ describe('PageBar.vue', () => {
const wrapper = factory();
const removeBtn = wrapper.findAll('.remove')[0];
await removeBtn.trigger('click');
expect(messageBoxConfirm).toHaveBeenCalledWith('确定删除该页面吗？');
expect(editorService.remove).toHaveBeenCalled();
});