From e92fdda1d5fc5d2c8fdf3ea8e081339ac37bbf76 Mon Sep 17 00:00:00 2001
From: Zhilin Liu <zhilin7@qq.com>
Date: Sat, 13 Jan 2024 22:01:00 +0800
Subject: [PATCH] refactor: MenuWrapper to ButtonGroup (#59)

---
 .../{MenuWrapper.vue => ButtonGroup.vue}       |  2 +-
 .../ToolBar/components/Draw/Tools.vue          |  6 +++---
 .../ToolBar/components/Home/Clipboard.vue      |  6 +++---
 .../ToolBar/components/Home/Delete.vue         |  6 +++---
 .../ToolBar/components/Home/Draw.vue           |  6 +++---
 .../ToolBar/components/Home/Edit.vue           |  6 +++---
 .../ToolBar/components/Home/FontStyle.vue      |  6 +++---
 .../ToolBar/components/Home/Paragraph.vue      |  6 +++---
 .../ToolBar/components/Home/Slides.vue         |  6 +++---
 .../ToolBar/components/Home/UndoRedo.vue       |  6 +++---
 .../ToolBar/components/Insert/Comments.vue     | 14 ++++++++++----
 .../ToolBar/components/Insert/Footer.vue       | 18 ++++++++++++------
 .../ToolBar/components/Insert/Illustration.vue |  6 +++---
 .../ToolBar/components/Insert/Link.vue         | 18 ++++++++++++------
 .../ToolBar/components/Insert/Media.vue        | 12 ++++++------
 .../ToolBar/components/Insert/Picture.vue      |  6 +++---
 .../ToolBar/components/Insert/Slides.vue       |  6 +++---
 .../ToolBar/components/Insert/Symbol.vue       | 12 ++++++------
 .../ToolBar/components/Insert/Table.vue        |  6 +++---
 .../ToolBar/components/Insert/Text.vue         |  6 +++---
 .../components/SlideShow/StartSlideShow.vue    |  6 +++---
 21 files changed, 92 insertions(+), 74 deletions(-)
 rename src/UserInterface/ToolBar/components/{MenuWrapper.vue => ButtonGroup.vue} (93%)

diff --git a/src/UserInterface/ToolBar/components/MenuWrapper.vue b/src/UserInterface/ToolBar/components/ButtonGroup.vue
similarity index 93%
rename from src/UserInterface/ToolBar/components/MenuWrapper.vue
rename to src/UserInterface/ToolBar/components/ButtonGroup.vue
index efc8e5e..c9e205c 100644
--- a/src/UserInterface/ToolBar/components/MenuWrapper.vue
+++ b/src/UserInterface/ToolBar/components/ButtonGroup.vue
@@ -7,6 +7,6 @@ const { name } = defineProps<{
 <template>
   <div class="inline-flex flex-col-reverse justify-between items-center px-2 border-r">
     <div class="text-2xs">{{ name }}</div>
-    <slot />
+    <slot></slot>
   </div>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Draw/Tools.vue b/src/UserInterface/ToolBar/components/Draw/Tools.vue
index 7086820..ef16849 100644
--- a/src/UserInterface/ToolBar/components/Draw/Tools.vue
+++ b/src/UserInterface/ToolBar/components/Draw/Tools.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { Pencil } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { toolBox } from '@Kernel/index'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.draw.tools.title')">
+  <ButtonGroup :name="$t('ToolBar.draw.tools.title')">
     <button class="menu-btn flex flex-col items-center" @click="toolBox.events.toolChange.emit('Pen')">
       <Pencil theme="outline" size="32" fill="#333" :strokeWidth="2" />
       <span class="text-xs mt-1">{{ $t('ToolBar.draw.tools.pen') }}</span>
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Home/Clipboard.vue b/src/UserInterface/ToolBar/components/Home/Clipboard.vue
index df7e924..129dbbe 100644
--- a/src/UserInterface/ToolBar/components/Home/Clipboard.vue
+++ b/src/UserInterface/ToolBar/components/Home/Clipboard.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Notepad, CuttingOne, CopyOne, Format } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.clipboard.title')">
+  <ButtonGroup :name="$t('ToolBar.home.clipboard.title')">
     <div class="flex">
       <button class="menu-btn flex flex-col items-center justify-center">
         <notepad theme="two-tone" size="32" :fill="['#C43E1C', '#FFF']" :strokeWidth="2" />
@@ -25,5 +25,5 @@ import MenuWrapper from '../MenuWrapper.vue'
         </button>
       </div>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Home/Delete.vue b/src/UserInterface/ToolBar/components/Home/Delete.vue
index aaf8ad6..c32de32 100644
--- a/src/UserInterface/ToolBar/components/Home/Delete.vue
+++ b/src/UserInterface/ToolBar/components/Home/Delete.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Close } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { selectionManager, slideManager } from '@Kernel/index'
 import { shallowRef } from 'vue'
 
@@ -18,10 +18,10 @@ const removeBlock = () => {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.delete')">
+  <ButtonGroup :name="$t('ToolBar.home.delete')">
     <button class="menu-btn flex flex-col items-center" @click="removeBlock">
       <close theme="outline" size="32" fill="#ED3D3B" :strokeWidth="2" />
       <span class="text-xs mt-1">{{ $t('ToolBar.home.delete') }}</span>
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Home/Draw.vue b/src/UserInterface/ToolBar/components/Home/Draw.vue
index be08a4c..f1d4a81 100644
--- a/src/UserInterface/ToolBar/components/Home/Draw.vue
+++ b/src/UserInterface/ToolBar/components/Home/Draw.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Stickers, BackgroundColor, Copy, Platte, GraphicDesign, BringToFrontOne } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.drawing.title')">
+  <ButtonGroup :name="$t('ToolBar.home.drawing.title')">
     <div class="flex">
       <button class="menu-btn flex flex-col items-center justify-center">
         <graphic-design theme="two-tone" size="32" :fill="['#333', '#83BEEC']" :strokeWidth="1" />
@@ -33,5 +33,5 @@ import MenuWrapper from '../MenuWrapper.vue'
         </button>
       </div>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Home/Edit.vue b/src/UserInterface/ToolBar/components/Home/Edit.vue
index 675781f..bf32e4e 100644
--- a/src/UserInterface/ToolBar/components/Home/Edit.vue
+++ b/src/UserInterface/ToolBar/components/Home/Edit.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Search, DataSwitching } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.editing.title')">
+  <ButtonGroup :name="$t('ToolBar.home.editing.title')">
     <div class="flex flex-col">
       <button class="menu-btn py-0 pb-[2px] text-left">
         <search theme="outline" size="18" fill="#333" :strokeWidth="2" />
@@ -15,5 +15,5 @@ import MenuWrapper from '../MenuWrapper.vue'
         <span class="text-xs ml-1">{{ $t('ToolBar.home.editing.replace') }}</span>
       </button>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Home/FontStyle.vue b/src/UserInterface/ToolBar/components/Home/FontStyle.vue
index 2fb5282..0ef68a7 100644
--- a/src/UserInterface/ToolBar/components/Home/FontStyle.vue
+++ b/src/UserInterface/ToolBar/components/Home/FontStyle.vue
@@ -8,7 +8,7 @@ import {
   TextUnderline,
   Strikethrough,
 } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { richTextObserver, selectionManager } from '@Kernel/index'
 import { intersectAttributes } from '@Utils/intersectAttributes'
 import { ref } from 'vue'
@@ -55,7 +55,7 @@ richTextObserver.on(async (newState) => {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.font.title')">
+  <ButtonGroup :name="$t('ToolBar.home.font.title')">
     <div class="max-w-[320px] flex flex-wrap items-center text-xs">
       <div class="mr-1 mt-1 mb-2">
         <select
@@ -129,5 +129,5 @@ richTextObserver.on(async (newState) => {
       <input type="color" @input="(event) => format('color', (event.target as HTMLInputElement).value)" />
       <input type="color" @input="(event) => format('background', (event.target as HTMLInputElement).value)" />
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Home/Paragraph.vue b/src/UserInterface/ToolBar/components/Home/Paragraph.vue
index d3eda88..7d1668c 100644
--- a/src/UserInterface/ToolBar/components/Home/Paragraph.vue
+++ b/src/UserInterface/ToolBar/components/Home/Paragraph.vue
@@ -10,7 +10,7 @@ import {
   AlignTextRight,
   AlignTextCenter,
 } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { AlignType, TextBoxBlock } from '@BlockHub/TextBoxBlock/TextBoxBlock'
 import { selectionManager } from '@Kernel/index'
 import { ref, shallowRef } from 'vue'
@@ -54,7 +54,7 @@ const updateAlign = (value: AlignType) => {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.paragraph.title')">
+  <ButtonGroup :name="$t('ToolBar.home.paragraph.title')">
     <div class="max-w-[170px] flex flex-wrap items-center text-xs pt-1">
       <!-- <button class="menu-btn">
         <list-checkbox theme="two-tone" size="24" :fill="['#333', '#43CCF8']" :strokeWidth="2" />
@@ -96,5 +96,5 @@ const updateAlign = (value: AlignType) => {
         <align-text-both size="24" :strokeWidth="2" />
       </button> -->
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Home/Slides.vue b/src/UserInterface/ToolBar/components/Home/Slides.vue
index 2c6c1da..7a38d5d 100644
--- a/src/UserInterface/ToolBar/components/Home/Slides.vue
+++ b/src/UserInterface/ToolBar/components/Home/Slides.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Slide, Copy } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { slideManager } from '@Kernel/index'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.slides.title')">
+  <ButtonGroup :name="$t('ToolBar.home.slides.title')">
     <div class="flex items-start">
       <button class="menu-btn flex flex-col items-center" @click="slideManager.insertSlide()">
         <Slide theme="multi-color" size="32" :fill="['#333', '#FFF', '#379E4E', '#379E4E']" :strokeWidth="2" />
@@ -16,5 +16,5 @@ import { slideManager } from '@Kernel/index'
         <span class="text-xs ml-1">{{ $t('ToolBar.home.slides.duplicate') }}</span>
       </button> -->
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Home/UndoRedo.vue b/src/UserInterface/ToolBar/components/Home/UndoRedo.vue
index c2bb6e9..ebc210c 100644
--- a/src/UserInterface/ToolBar/components/Home/UndoRedo.vue
+++ b/src/UserInterface/ToolBar/components/Home/UndoRedo.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { history } from '@Kernel/index'
 import { Undo, Redo } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 
 const canUndo = ref(false)
 const canRedo = ref(false)
@@ -13,7 +13,7 @@ history.events.update.on(() => {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.undo')">
+  <ButtonGroup :name="$t('ToolBar.home.undo')">
     <div class="flex flex-col">
       <button class="menu-btn" @click="history.undo" :disabled="!canUndo">
         <undo theme="outline" size="20" :strokeWidth="2" />
@@ -22,5 +22,5 @@ history.events.update.on(() => {
         <redo theme="outline" size="20" :strokeWidth="2" />
       </button>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Comments.vue b/src/UserInterface/ToolBar/components/Insert/Comments.vue
index 3d9a747..3403367 100644
--- a/src/UserInterface/ToolBar/components/Insert/Comments.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Comments.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
 import { Comment, Down } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.comments.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.comments.title')">
     <button class="flex flex-col items-center py-0 menu-btn">
-      <Comment class="mb-1" theme="multi-color" size="32" :fill="['#333', '#83beec', '#FFF', '#43CCF8']" :strokeWidth="2" />
+      <Comment
+        class="mb-1"
+        theme="multi-color"
+        size="32"
+        :fill="['#333', '#83beec', '#FFF', '#43CCF8']"
+        :strokeWidth="2"
+      />
       <span class="text-xs">{{ $t('ToolBar.insert.comments.btnName') }}</span>
       <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Footer.vue b/src/UserInterface/ToolBar/components/Insert/Footer.vue
index 22ae869..725c5ef 100644
--- a/src/UserInterface/ToolBar/components/Insert/Footer.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Footer.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import { DocDetail, Down } from '@icon-park/vue-next';
-import MenuWrapper from '../MenuWrapper.vue'
+import { DocDetail, Down } from '@icon-park/vue-next'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.footer.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.footer.title')">
     <button class="flex flex-col items-center py-0 menu-btn">
-      <DocDetail class="mb-1" theme="multi-color" size="32" :fill="['#333' ,'#83beec' ,'#FFF' ,'#43CCF8']" :strokeWidth="2"/>
+      <DocDetail
+        class="mb-1"
+        theme="multi-color"
+        size="32"
+        :fill="['#333', '#83beec', '#FFF', '#43CCF8']"
+        :strokeWidth="2"
+      />
       <span class="text-xs">{{ $t('ToolBar.insert.footer.title') }}</span>
-      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2"/>
+      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Illustration.vue b/src/UserInterface/ToolBar/components/Insert/Illustration.vue
index 3d0b2ed..4e34afd 100644
--- a/src/UserInterface/ToolBar/components/Insert/Illustration.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Illustration.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { GraphicDesign, PictureAlbum, Down, Outdoor, GameEmoji } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.illustration.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.illustration.title')">
     <div class="flex">
       <button class="flex flex-col items-center justify-center py-0 menu-btn">
         <GraphicDesign theme="two-tone" size="32" :fill="['#333', '#83BEEC']" :strokeWidth="1" />
@@ -25,5 +25,5 @@ import MenuWrapper from '../MenuWrapper.vue'
         <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
       </button>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Link.vue b/src/UserInterface/ToolBar/components/Insert/Link.vue
index 08a7b32..9f5fd08 100644
--- a/src/UserInterface/ToolBar/components/Insert/Link.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Link.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import { LinkTwo, Down } from '@icon-park/vue-next';
-import MenuWrapper from '../MenuWrapper.vue'
+import { LinkTwo, Down } from '@icon-park/vue-next'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.link.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.link.title')">
     <button class="flex flex-col items-center py-0 menu-btn">
-      <LinkTwo class="mb-1" theme="multi-color" size="32" :fill="['#333' ,'#83beec' ,'#FFF' ,'#43CCF8']" :strokeWidth="2"/>
+      <LinkTwo
+        class="mb-1"
+        theme="multi-color"
+        size="32"
+        :fill="['#333', '#83beec', '#FFF', '#43CCF8']"
+        :strokeWidth="2"
+      />
       <span class="text-xs">{{ $t('ToolBar.insert.link.title') }}</span>
-      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2"/>
+      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Media.vue b/src/UserInterface/ToolBar/components/Insert/Media.vue
index 3b508a9..55cccc1 100644
--- a/src/UserInterface/ToolBar/components/Insert/Media.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Media.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { Down, SpeakerOne, Video } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.media.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.media.title')">
     <div class="flex">
       <button class="flex flex-col items-center justify-center -mt-4 menu-btn">
-        <SpeakerOne theme="outline" size="32" fill="#333" :strokeWidth="2"/>
+        <SpeakerOne theme="outline" size="32" fill="#333" :strokeWidth="2" />
         <span class="mt-1 text-xs">{{ $t('ToolBar.insert.media.audio') }}</span>
       </button>
       <button class="flex flex-col items-center justify-center py-0 menu-btn">
-        <Video theme="outline" size="32" fill="#333" :strokeWidth="2"/>
+        <Video theme="outline" size="32" fill="#333" :strokeWidth="2" />
         <span class="mt-1 text-xs">{{ $t('ToolBar.insert.media.video') }}</span>
-        <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2"/>
+        <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
       </button>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Picture.vue b/src/UserInterface/ToolBar/components/Insert/Picture.vue
index c4ae44b..dfaac4d 100644
--- a/src/UserInterface/ToolBar/components/Insert/Picture.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Picture.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Pic, Down } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { pickFile } from '@Utils/pickFile'
 import { PictureBlock } from '@BlockHub/PictureBlock/PictureBlock'
 import { slideManager } from '@Kernel/index'
@@ -16,11 +16,11 @@ async function insertPicture() {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.picture.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.picture.title')">
     <button class="flex flex-col items-center py-0 menu-btn" @click="insertPicture">
       <Pic class="mb-1" theme="multi-color" size="32" :fill="['#333', '#83beec', '#FFF', '#43CCF8']" :strokeWidth="2" />
       <span class="text-xs">{{ $t('ToolBar.insert.picture.btnName') }}</span>
       <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Slides.vue b/src/UserInterface/ToolBar/components/Insert/Slides.vue
index c97ef18..81e5e0c 100644
--- a/src/UserInterface/ToolBar/components/Insert/Slides.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Slides.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { Slide } from '@icon-park/vue-next'
 import { slideManager } from '@Kernel/index'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.slides.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.slides.title')">
     <button class="menu-btn flex flex-col items-center" @click="slideManager.insertSlide()">
       <Slide theme="multi-color" size="32" :fill="['#333', '#FFF', '#379E4E', '#379E4E']" :strokeWidth="2" />
       <span class="text-xs mt-1">{{ $t('ToolBar.home.slides.add') }}</span>
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Symbol.vue b/src/UserInterface/ToolBar/components/Insert/Symbol.vue
index 1c7fed9..4faf262 100644
--- a/src/UserInterface/ToolBar/components/Insert/Symbol.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Symbol.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { Symbol, Down } from '@icon-park/vue-next';
-import MenuWrapper from '../MenuWrapper.vue'
+import { Symbol, Down } from '@icon-park/vue-next'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.symbol.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.symbol.title')">
     <button class="flex flex-col items-center py-0 menu-btn">
-      <Symbol class="mb-1" theme="outline" size="32" fill="#333" :strokeWidth="2"/>
+      <Symbol class="mb-1" theme="outline" size="32" fill="#333" :strokeWidth="2" />
       <span class="text-xs">{{ $t('ToolBar.insert.symbol.title') }}</span>
-      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2"/>
+      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Table.vue b/src/UserInterface/ToolBar/components/Insert/Table.vue
index fa3d68e..1928d11 100644
--- a/src/UserInterface/ToolBar/components/Insert/Table.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Table.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TableFile, Down } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { slideManager } from '@Kernel/index'
 import { TableBlock } from '@BlockHub/TableBlock/TableBlock'
 
@@ -11,11 +11,11 @@ const insertTable = () => {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.table.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.table.title')">
     <button class="flex flex-col items-center py-0 menu-btn" @click="insertTable">
       <TableFile class="mb-1" theme="outline" size="32" fill="#333" :strokeWidth="2" />
       <span class="text-xs">{{ $t('ToolBar.insert.table.title') }}</span>
       <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Text.vue b/src/UserInterface/ToolBar/components/Insert/Text.vue
index 1fdc25f..2198a97 100644
--- a/src/UserInterface/ToolBar/components/Insert/Text.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Text.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { TextRecognition } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { toolBox } from '@Kernel/index'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.textBox.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.textBox.title')">
     <button class="flex flex-col items-center py-0 menu-btn" @click="toolBox.events.toolChange.emit('TextBox')">
       <TextRecognition
         class="mb-1"
@@ -16,5 +16,5 @@ import { toolBox } from '@Kernel/index'
       />
       <span class="text-xs">{{ $t('ToolBar.insert.textBox.title') }}</span>
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/SlideShow/StartSlideShow.vue b/src/UserInterface/ToolBar/components/SlideShow/StartSlideShow.vue
index ee674f5..874ffb3 100644
--- a/src/UserInterface/ToolBar/components/SlideShow/StartSlideShow.vue
+++ b/src/UserInterface/ToolBar/components/SlideShow/StartSlideShow.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Ppt, SlideTwo } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { slideShowMode } from '@Kernel/index'
 
 const show = (mode: 'start' | 'current') => {
@@ -9,7 +9,7 @@ const show = (mode: 'start' | 'current') => {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.slideshow.startSlideShow.title')">
+  <ButtonGroup :name="$t('ToolBar.slideshow.startSlideShow.title')">
     <div class="flex items-start gap-[10px]">
       <button class="menu-btn flex flex-col items-center" @click="show('start')">
         <Ppt theme="outline" size="32" fill="#333" :strokeWidth="2" />
@@ -20,5 +20,5 @@ const show = (mode: 'start' | 'current') => {
         <span class="text-xs mt-1">{{ $t('ToolBar.slideshow.startSlideShow.current') }}</span>
       </button>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>