From 90ce00ba7e5c2b1b0a9d39336904365ddaf0bbfe Mon Sep 17 00:00:00 2001
From: Zhilin Liu <zhilin7@qq.com>
Date: Mon, 15 Jan 2024 15:16:03 +0800
Subject: [PATCH] refactor: ToolButton

---
 .../ToolBar/components/Home/Clipboard.vue     | 12 ++++++----
 .../ToolBar/components/Home/Delete.vue        | 11 +++++----
 .../ToolBar/components/Home/Draw.vue          | 16 ++++++++-----
 .../ToolBar/components/Home/Slides.vue        | 12 ++++++----
 .../components/Insert/Illustration.vue        | 13 +++++++----
 .../ToolBar/components/Insert/Picture.vue     | 20 +++++++++++-----
 .../ToolBar/components/Insert/Slides.vue      | 11 +++++----
 .../ToolBar/components/Insert/Table.vue       | 14 ++++++-----
 .../ToolBar/components/Insert/Text.vue        | 23 +++++++++++--------
 .../ToolBar/components/ToolButton.vue         | 23 +++++++++++++++++++
 10 files changed, 106 insertions(+), 49 deletions(-)
 create mode 100644 src/UserInterface/ToolBar/components/ToolButton.vue

diff --git a/src/UserInterface/ToolBar/components/Home/Clipboard.vue b/src/UserInterface/ToolBar/components/Home/Clipboard.vue
index f76c7e3..7360ae1 100644
--- a/src/UserInterface/ToolBar/components/Home/Clipboard.vue
+++ b/src/UserInterface/ToolBar/components/Home/Clipboard.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { Notepad, CuttingOne, CopyOne, Format } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
+import ToolButton from '../ToolButton.vue'
 </script>
 
 <template>
   <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" />
-        <span class="text-xs mt-1">{{ $t('ToolBar.home.clipboard.paste') }}</span>
-      </button>
+      <ToolButton>
+        <template #icon>
+          <Notepad theme="two-tone" size="32" :fill="['#C43E1C', '#FFF']" :strokeWidth="2" />
+        </template>
+        <template #name>{{ $t('ToolBar.home.clipboard.paste') }}</template>
+      </ToolButton>
+
       <div class="flex flex-col justify-center">
         <button class="menu-btn py-0 pb-[2px] text-left">
           <cutting-one theme="two-tone" size="18" :fill="['#333', '#83BEEC']" :strokeWidth="2" />
diff --git a/src/UserInterface/ToolBar/components/Home/Delete.vue b/src/UserInterface/ToolBar/components/Home/Delete.vue
index 63c26c1..1d55e56 100644
--- a/src/UserInterface/ToolBar/components/Home/Delete.vue
+++ b/src/UserInterface/ToolBar/components/Home/Delete.vue
@@ -3,6 +3,7 @@ import { Close } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
 import { selectionManager, slideManager } from '@Kernel/index'
 import { shallowRef } from 'vue'
+import ToolButton from '../ToolButton.vue'
 
 const selectedBlocks = shallowRef(selectionManager.selectedBlocks)
 selectionManager.events.update.on(() => {
@@ -19,9 +20,11 @@ const removeBlock = () => {
 
 <template>
   <ButtonGroup :name="$t('ToolBar.home.delete')">
-    <button class="menu-btn flex flex-col items-center" @click="removeBlock" :disabled="selectedBlocks.length === 0">
-      <close theme="outline" size="32" fill="#ED3D3B" :strokeWidth="2" />
-      <span class="text-xs mt-1">{{ $t('ToolBar.home.delete') }}</span>
-    </button>
+    <ToolButton :clickHandler="removeBlock" :disabled="selectedBlocks.length === 0">
+      <template #icon>
+        <Close theme="outline" size="32" fill="#ED3D3B" :strokeWidth="2" />
+      </template>
+      <template #name>{{ $t('ToolBar.home.delete') }}</template>
+    </ToolButton>
   </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Home/Draw.vue b/src/UserInterface/ToolBar/components/Home/Draw.vue
index 88d5e25..55617e0 100644
--- a/src/UserInterface/ToolBar/components/Home/Draw.vue
+++ b/src/UserInterface/ToolBar/components/Home/Draw.vue
@@ -1,23 +1,27 @@
 <script setup lang="ts">
 import { Stickers, BackgroundColor, Copy, Platte, GraphicDesign, BringToFrontOne } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
+import ToolButton from '../ToolButton.vue'
 </script>
 
 <template>
   <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" />
-        <span class="text-xs mt-1">{{ $t('ToolBar.home.drawing.shapes') }}</span>
-      </button>
-      <button class="menu-btn flex flex-col items-center justify-center">
+      <ToolButton :clickHandler="() => {}">
+        <template #icon>
+          <GraphicDesign theme="two-tone" size="32" :fill="['#333', '#83BEEC']" :strokeWidth="1" />
+        </template>
+        <template #name>{{ $t('ToolBar.home.drawing.shapes') }}</template>
+      </ToolButton>
+
+      <!-- <button class="menu-btn flex flex-col items-center justify-center">
         <bring-to-front-one theme="two-tone" size="32" :fill="['#333', '#F8DB8F']" :strokeWidth="1" />
         <span class="text-xs mt-1">{{ $t('ToolBar.home.drawing.arrange') }}</span>
       </button>
       <button class="menu-btn flex flex-col items-center justify-center">
         <stickers theme="two-tone" size="32" :fill="['#333', '#DE6C00']" :strokeWidth="1" />
         <span class="text-xs mt-1">{{ $t('ToolBar.home.drawing.style') }}</span>
-      </button>
+      </button> -->
       <!-- <div class="flex flex-col">
         <button class="menu-btn py-0 pb-[2px] text-left">
           <background-color theme="two-tone" size="18" :fill="['#333', '#83BEEC']" :strokeWidth="2" />
diff --git a/src/UserInterface/ToolBar/components/Home/Slides.vue b/src/UserInterface/ToolBar/components/Home/Slides.vue
index 7a38d5d..c46856b 100644
--- a/src/UserInterface/ToolBar/components/Home/Slides.vue
+++ b/src/UserInterface/ToolBar/components/Home/Slides.vue
@@ -2,15 +2,19 @@
 import { Slide, Copy } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
 import { slideManager } from '@Kernel/index'
+import ToolButton from '../ToolButton.vue'
 </script>
 
 <template>
   <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" />
-        <span class="text-xs mt-1">{{ $t('ToolBar.home.slides.add') }}</span>
-      </button>
+      <ToolButton :clickHandler="() => slideManager.insertSlide()">
+        <template #icon>
+          <Slide theme="multi-color" size="32" :fill="['#333', '#FFF', '#379E4E', '#379E4E']" :strokeWidth="2" />
+        </template>
+        <template #name>{{ $t('ToolBar.home.slides.add') }}</template>
+      </ToolButton>
+
       <!-- <button class="menu-btn py-1">
         <copy theme="two-tone" size="18" :fill="['#333', '#DE6C00']" :strokeWidth="2" />
         <span class="text-xs ml-1">{{ $t('ToolBar.home.slides.duplicate') }}</span>
diff --git a/src/UserInterface/ToolBar/components/Insert/Illustration.vue b/src/UserInterface/ToolBar/components/Insert/Illustration.vue
index 3857066..b447e31 100644
--- a/src/UserInterface/ToolBar/components/Insert/Illustration.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Illustration.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import { GraphicDesign, PictureAlbum, Down, Outdoor, GameEmoji } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
+import ToolButton from '../ToolButton.vue'
 </script>
 
 <template>
   <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" />
-        <span class="mt-1 text-xs">{{ $t('ToolBar.insert.illustration.shapes') }}</span>
-        <!-- <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" /> -->
-      </button>
+      <ToolButton :clickHandler="() => {}">
+        <template #icon>
+          <GraphicDesign theme="two-tone" size="32" :fill="['#333', '#83BEEC']" :strokeWidth="1" />
+        </template>
+        <template #name>{{ $t('ToolBar.insert.illustration.shapes') }}</template>
+      </ToolButton>
+
       <!-- <button class="flex flex-col items-center justify-center py-0 -mt-4 menu-btn">
         <PictureAlbum theme="multi-color" size="32" :fill="['#333', '#83beec', '#FFF', '#43CCF8']" :strokeWidth="2" />
         <span class="mt-1 text-xs">{{ $t('ToolBar.insert.illustration.stockImages') }}</span>
diff --git a/src/UserInterface/ToolBar/components/Insert/Picture.vue b/src/UserInterface/ToolBar/components/Insert/Picture.vue
index 763b3cd..e39686a 100644
--- a/src/UserInterface/ToolBar/components/Insert/Picture.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Picture.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { Pic, Down } from '@icon-park/vue-next'
+import { Pic } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
 import { pickFile } from '@Utils/pickFile'
 import { PictureBlock } from '@BlockHub/PictureBlock/PictureBlock'
 import { slideManager } from '@Kernel/index'
+import ToolButton from '../ToolButton.vue'
 
 async function insertPicture() {
   const block = new PictureBlock(200, 200)
@@ -17,10 +18,17 @@ async function insertPicture() {
 
 <template>
   <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>
+    <ToolButton :clickHandler="insertPicture">
+      <template #icon>
+        <Pic
+          class="mb-1"
+          theme="multi-color"
+          size="32"
+          :fill="['#333', '#83beec', '#FFF', '#43CCF8']"
+          :strokeWidth="2"
+        />
+      </template>
+      <template #name>{{ $t('ToolBar.insert.picture.btnName') }}</template>
+    </ToolButton>
   </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Slides.vue b/src/UserInterface/ToolBar/components/Insert/Slides.vue
index 81e5e0c..31403d8 100644
--- a/src/UserInterface/ToolBar/components/Insert/Slides.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Slides.vue
@@ -2,13 +2,16 @@
 import { Slide } from '@icon-park/vue-next'
 import { slideManager } from '@Kernel/index'
 import ButtonGroup from '../ButtonGroup.vue'
+import ToolButton from '../ToolButton.vue'
 </script>
 
 <template>
   <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>
+    <ToolButton :clickHandler="() => slideManager.insertSlide()">
+      <template #icon>
+        <Slide theme="multi-color" size="32" :fill="['#333', '#FFF', '#379E4E', '#379E4E']" :strokeWidth="2" />
+      </template>
+      <template #name>{{ $t('ToolBar.home.slides.add') }}</template>
+    </ToolButton>
   </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Table.vue b/src/UserInterface/ToolBar/components/Insert/Table.vue
index 1928d11..03a5114 100644
--- a/src/UserInterface/ToolBar/components/Insert/Table.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Table.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { TableFile, Down } from '@icon-park/vue-next'
+import { TableFile } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
 import { slideManager } from '@Kernel/index'
 import { TableBlock } from '@BlockHub/TableBlock/TableBlock'
+import ToolButton from '../ToolButton.vue'
 
 const insertTable = () => {
   const block = new TableBlock(300, 200, 4, 3)
@@ -12,10 +13,11 @@ const insertTable = () => {
 
 <template>
   <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>
+    <ToolButton :clickHandler="insertTable" :hasMenu="true">
+      <template #icon>
+        <TableFile class="mb-1" theme="outline" size="32" fill="#333" :strokeWidth="2" />
+      </template>
+      <template #name>{{ $t('ToolBar.insert.table.title') }}</template>
+    </ToolButton>
   </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/Insert/Text.vue b/src/UserInterface/ToolBar/components/Insert/Text.vue
index 2198a97..833db13 100644
--- a/src/UserInterface/ToolBar/components/Insert/Text.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Text.vue
@@ -2,19 +2,22 @@
 import { TextRecognition } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
 import { toolBox } from '@Kernel/index'
+import ToolButton from '../ToolButton.vue'
 </script>
 
 <template>
   <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"
-        theme="multi-color"
-        size="32"
-        :fill="['#333', '#83beec', '#FFF', '#43CCF8']"
-        :strokeWidth="2"
-      />
-      <span class="text-xs">{{ $t('ToolBar.insert.textBox.title') }}</span>
-    </button>
+    <ToolButton :clickHandler="() => toolBox.events.toolChange.emit('TextBox')">
+      <template #icon>
+        <TextRecognition
+          class="mb-1"
+          theme="multi-color"
+          size="32"
+          :fill="['#333', '#83beec', '#FFF', '#43CCF8']"
+          :strokeWidth="2"
+        />
+      </template>
+      <template #name>{{ $t('ToolBar.insert.textBox.title') }}</template>
+    </ToolButton>
   </ButtonGroup>
 </template>
diff --git a/src/UserInterface/ToolBar/components/ToolButton.vue b/src/UserInterface/ToolBar/components/ToolButton.vue
new file mode 100644
index 0000000..b69d065
--- /dev/null
+++ b/src/UserInterface/ToolBar/components/ToolButton.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Down } from '@icon-park/vue-next'
+
+const { clickHandler } = defineProps<{
+  clickHandler?: (event: MouseEvent) => void
+  disabled?: boolean
+  hasMenu?: boolean
+}>()
+</script>
+
+<template>
+  <div class="tool-button">
+    <button class="menu-btn flex flex-col items-center" @click="clickHandler" :disabled="disabled">
+      <slot name="icon"></slot>
+      <span class="text-xs">
+        <slot name="name"></slot>
+      </span>
+      <Down v-if="hasMenu" class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
+    </button>
+
+    <slot name="menu"></slot>
+  </div>
+</template>