From 113af7dd5104f5f49515abd66f12f5e62098f7e2 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 11 Jun 2026 17:00:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E9=A1=B5=E9=9D=A2=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E5=89=8D=E5=A2=9E=E5=8A=A0=E7=A1=AE=E8=AE=A4=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=B9=B6=E6=94=AF=E6=8C=81=E5=8D=B1=E9=99=A9=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/components/ToolButton.vue               | 4 ++--
 packages/editor/src/layouts/page-bar/PageBar.vue            | 6 ++++--
 packages/editor/src/theme/page-bar.scss                     | 4 ----
 packages/editor/src/type.ts                                 | 3 +++
 packages/editor/tests/unit/layouts/page-bar/PageBar.spec.ts | 4 ++++
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/components/ToolButton.vue b/packages/editor/src/components/ToolButton.vue
index 14288541..095a7fb4 100644
--- a/packages/editor/src/components/ToolButton.vue
+++ b/packages/editor/src/components/ToolButton.vue
@@ -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>
diff --git a/packages/editor/src/layouts/page-bar/PageBar.vue b/packages/editor/src/layouts/page-bar/PageBar.vue
index e6b83b61..032c96f9 100644
--- a/packages/editor/src/layouts/page-bar/PageBar.vue
+++ b/packages/editor/src/layouts/page-bar/PageBar.vue
@@ -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);
 };
 
diff --git a/packages/editor/src/theme/page-bar.scss b/packages/editor/src/theme/page-bar.scss
index 766a6d73..91addcd8 100644
--- a/packages/editor/src/theme/page-bar.scss
+++ b/packages/editor/src/theme/page-bar.scss
@@ -102,10 +102,6 @@
     transition: all 0.2s ease 0s;
     padding: 5px 14px;
 
-    .tmagic-design-button {
-      color: $font-color;
-    }
-
     &:hover {
       background-color: $hover-color;
     }
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 01cad151..ddb47d67 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -392,6 +392,9 @@ export interface MenuButton {
   items?: MenuButton[];
   /** 唯一标识，用于高亮 */
   id?: string | number;
+  buttonProps?: {
+    type?: string;
+  };
 }
 // #endregion MenuButton
 
diff --git a/packages/editor/tests/unit/layouts/page-bar/PageBar.spec.ts b/packages/editor/tests/unit/layouts/page-bar/PageBar.spec.ts
index aaf06057..f78c7137 100644
--- a/packages/editor/tests/unit/layouts/page-bar/PageBar.spec.ts
+++ b/packages/editor/tests/unit/layouts/page-bar/PageBar.spec.ts
@@ -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();
   });