JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-07-15 15:51:07 +08:00
Code Issues 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'"> <template v-else-if="data.type === 'button'">
<TMagicTooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip"> <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"> <template #icon v-if="data.icon">
<MIcon :icon="data.icon"></MIcon> <MIcon :icon="data.icon"></MIcon>
</template> </template>
@ -21,7 +21,7 @@
</TMagicButton> </TMagicButton>
</TMagicTooltip> </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"> <template #icon v-if="data.icon">
<MIcon :icon="data.icon"></MIcon> <MIcon :icon="data.icon"></MIcon>
</template> </template>

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

@ -51,6 +51,7 @@
type: 'button', type: 'button',
text: '删除', text: '删除',
icon: Delete, icon: Delete,
buttonProps: { type: 'danger' },
handler: () => remove(item), handler: () => remove(item),
}" }"
></ToolButton> ></ToolButton>
@ -72,7 +73,7 @@ import { computed, ref, useTemplateRef, watch } from 'vue';
import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue'; import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
import { type Id, type MPage, type MPageFragment, NodeType } from '@tmagic/core'; 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 ToolButton from '@editor/components/ToolButton.vue';
import { useServices } from '@editor/hooks/use-services'; 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); editorService.remove(node);
}; };

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

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

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

@ -392,6 +392,9 @@ export interface MenuButton {
items?: MenuButton[]; items?: MenuButton[];
/** 唯一标识，用于高亮 */ /** 唯一标识，用于高亮 */
id?: string | number; id?: string | number;
buttonProps?: {
type?: string;
};
} }
// #endregion MenuButton // #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'; import PageBar from '@editor/layouts/page-bar/PageBar.vue';
const { messageBoxConfirm } = vi.hoisted(() => ({ messageBoxConfirm: vi.fn(async () => undefined) }));
const editorState = { const editorState = {
page: ref<any>({ id: 'p1' }), page: ref<any>({ id: 'p1' }),
root: ref<any>({ root: ref<any>({
@ -120,6 +122,7 @@ vi.mock('@tmagic/design', () => ({
return () => h('div', { class: 'fake-popover' }, [slots.reference?.(), slots.default?.()]); return () => h('div', { class: 'fake-popover' }, [slots.reference?.(), slots.default?.()]);
}, },
}), }),
tMagicMessageBox: { confirm: messageBoxConfirm },
})); }));
beforeEach(() => { beforeEach(() => {
@ -171,6 +174,7 @@ describe('PageBar.vue', () => {
const wrapper = factory(); const wrapper = factory();
const removeBtn = wrapper.findAll('.remove')[0]; const removeBtn = wrapper.findAll('.remove')[0];
await removeBtn.trigger('click'); await removeBtn.trigger('click');
expect(messageBoxConfirm).toHaveBeenCalledWith('确定删除该页面吗？');
expect(editorService.remove).toHaveBeenCalled(); expect(editorService.remove).toHaveBeenCalled();
}); });