From 9a339a52a94c4b0c719bd419124971cc37e0c763 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Tue, 3 Oct 2023 17:22:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9B=BF=E6=8D=A2Button=E3=80=81Ra?=
 =?UTF-8?q?dioButton=E3=80=81NumberInput?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button.vue                     | 10 +++++++
 src/components/ButtonGroup.vue                |  2 +-
 src/components/NumberInput.vue                |  4 ++-
 src/views/Editor/Canvas/LinkDialog.vue        |  6 ++--
 src/views/Editor/CanvasTool/MediaInput.vue    |  2 +-
 .../Editor/CanvasTool/TableGenerator.vue      | 10 +++----
 src/views/Editor/ExportDialog/ExportImage.vue |  9 +++---
 src/views/Editor/ExportDialog/ExportJSON.vue  |  3 +-
 src/views/Editor/ExportDialog/ExportPDF.vue   | 15 +++++-----
 src/views/Editor/ExportDialog/ExportPPTX.vue  |  8 ++---
 .../ExportDialog/ExportSpecificFile.vue       |  8 ++---
 src/views/Editor/SearchPanel.vue              |  2 +-
 src/views/Editor/SelectPanel.vue              |  2 +-
 .../Editor/Toolbar/ElementAnimationPanel.vue  |  8 ++---
 .../Editor/Toolbar/ElementPositionPanel.vue   | 29 +++++++++----------
 .../ChartStylePanel/ChartDataEditor.vue       |  3 +-
 .../ChartStylePanel/index.vue                 |  8 ++---
 .../ElementStylePanel/ImageStylePanel.vue     | 21 +++++++-------
 .../ElementStylePanel/LatexStylePanel.vue     | 12 ++++----
 .../ElementStylePanel/LineStylePanel.vue      |  6 ++--
 .../ElementStylePanel/MultiStylePanel.vue     | 18 ++++++------
 .../ElementStylePanel/ShapeStylePanel.vue     | 21 +++++++-------
 .../ElementStylePanel/TableStylePanel.vue     | 17 +++++------
 .../ElementStylePanel/TextStylePanel.vue      | 23 +++++++--------
 .../ElementStylePanel/VideoStylePanel.vue     |  2 +-
 .../Editor/Toolbar/MultiPositionPanel.vue     |  5 ++--
 .../Editor/Toolbar/SlideAnimationPanel.vue    |  3 +-
 src/views/Editor/Toolbar/SlideDesignPanel.vue |  2 +-
 .../Editor/Toolbar/common/ColorButton.vue     |  4 +--
 .../Editor/Toolbar/common/ElementOutline.vue  |  8 ++---
 .../Editor/Toolbar/common/TextColorButton.vue |  4 +--
 .../Mobile/MobileEditor/ElementToolbar.vue    | 17 +++++------
 .../Mobile/MobileEditor/SlideToolbar.vue      |  5 ++--
 33 files changed, 143 insertions(+), 154 deletions(-)

diff --git a/src/components/Button.vue b/src/components/Button.vue
index 607edffd..d3509bc4 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -8,6 +8,7 @@
       'primary': !disabled && type === 'primary',
       'checkbox': !disabled && type === 'checkbox',
       'radio': !disabled && type === 'radio',
+      'small': size === 'small',
     }"
     @click="handleClick()"
   >
@@ -20,10 +21,12 @@ const props = withDefaults(defineProps<{
   checked?: boolean
   disabled?: boolean
   type?: 'default' | 'primary' | 'checkbox' | 'radio'
+  size?: 'small' | 'normal'
 }>(), {
   checked: false,
   disabled: false,
   type: 'default',
+  size: 'normal',
 })
 
 const emit = defineEmits<{
@@ -50,6 +53,13 @@ const handleClick = () => {
   letter-spacing: 1px;
   cursor: pointer;
 
+  &.small {
+    height: 24px;
+    line-height: 24px;
+    padding: 0 7px;
+    letter-spacing: 0;
+  }
+
   &.default {
     background-color: #fff;
     border: 1px solid #d9d9d9;
diff --git a/src/components/ButtonGroup.vue b/src/components/ButtonGroup.vue
index a527d096..3bfd491d 100644
--- a/src/components/ButtonGroup.vue
+++ b/src/components/ButtonGroup.vue
@@ -24,7 +24,7 @@
     }
 
     &:hover {
-      &.default + .button.default {
+      &.default + .button {
         border-left-color: $themeColor;
       }
     }
diff --git a/src/components/NumberInput.vue b/src/components/NumberInput.vue
index 75a338df..4dcd1427 100644
--- a/src/components/NumberInput.vue
+++ b/src/components/NumberInput.vue
@@ -70,11 +70,13 @@ watch(() => props.value, () => {
   if (props.value !== number.value) {
     number.value = props.value
   }
+}, {
+  immediate: true,
 })
 
 watch(number, () => {
   let value = +number.value
-  if (isNaN(value)) value = 0
+  if (isNaN(value)) value = props.min
   else if (value > props.max) value = props.max
   else if (value < props.min) value = props.min
 
diff --git a/src/views/Editor/Canvas/LinkDialog.vue b/src/views/Editor/Canvas/LinkDialog.vue
index bdb0314d..0934185b 100644
--- a/src/views/Editor/Canvas/LinkDialog.vue
+++ b/src/views/Editor/Canvas/LinkDialog.vue
@@ -48,10 +48,8 @@ import useLink from '@/hooks/useLink'
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import Tabs from '@/components/Tabs.vue'
 import Input from '@/components/Input.vue'
-import {
-  Button,
-  Select,
-} from 'ant-design-vue'
+import Button from '@/components/Button.vue'
+import { Select } from 'ant-design-vue'
 const SelectOption = Select.Option
 
 type TypeKey = 'web' | 'slide'
diff --git a/src/views/Editor/CanvasTool/MediaInput.vue b/src/views/Editor/CanvasTool/MediaInput.vue
index 8a419870..854d614d 100644
--- a/src/views/Editor/CanvasTool/MediaInput.vue
+++ b/src/views/Editor/CanvasTool/MediaInput.vue
@@ -26,10 +26,10 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { Button } from 'ant-design-vue'
 import message from '@/utils/message'
 import Tabs from '@/components/Tabs.vue'
 import Input from '@/components/Input.vue'
+import Button from '@/components/Button.vue'
 
 type TypeKey = 'video' | 'audio'
 interface TabItem {
diff --git a/src/views/Editor/CanvasTool/TableGenerator.vue b/src/views/Editor/CanvasTool/TableGenerator.vue
index b70f44a5..5af71e31 100644
--- a/src/views/Editor/CanvasTool/TableGenerator.vue
+++ b/src/views/Editor/CanvasTool/TableGenerator.vue
@@ -27,7 +27,7 @@
     <div class="custom" v-else>
       <div class="row">
         <div class="label" style="flex: 1;">行数：</div>
-        <InputNumber
+        <NumberInput
           :min="1"
           :max="20"
           v-model:value="customRow"
@@ -36,7 +36,7 @@
       </div>
       <div class="row">
         <div class="label" style="flex: 1;">列数：</div>
-        <InputNumber
+        <NumberInput
           :min="1"
           :max="20"
           v-model:value="customCol"
@@ -54,10 +54,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import message from '@/utils/message'
-import {
-  InputNumber,
-  Button,
-} from 'ant-design-vue'
+import Button from '@/components/Button.vue'
+import NumberInput from '@/components/NumberInput.vue'
 
 interface InsertData {
   row: number
diff --git a/src/views/Editor/ExportDialog/ExportImage.vue b/src/views/Editor/ExportDialog/ExportImage.vue
index 86fb7758..4547e141 100644
--- a/src/views/Editor/ExportDialog/ExportImage.vue
+++ b/src/views/Editor/ExportDialog/ExportImage.vue
@@ -83,11 +83,9 @@ import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 import Switch from '@/components/Switch.vue'
 import Slider from '@/components/Slider.vue'
-import {
-  Button,
-  Radio,
-} from 'ant-design-vue'
-const { Group: RadioGroup, Button: RadioButton } = Radio
+import Button from '@/components/Button.vue'
+import RadioButton from '@/components/RadioButton.vue'
+import RadioGroup from '@/components/RadioGroup.vue'
 
 const emit = defineEmits<{
   (event: 'close'): void
@@ -174,6 +172,7 @@ const expImage = () => {
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 1;
 
   .export {
     flex: 1;
diff --git a/src/views/Editor/ExportDialog/ExportJSON.vue b/src/views/Editor/ExportDialog/ExportJSON.vue
index 4c016a5b..0095eeac 100644
--- a/src/views/Editor/ExportDialog/ExportJSON.vue
+++ b/src/views/Editor/ExportDialog/ExportJSON.vue
@@ -15,8 +15,7 @@
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
-
-import { Button } from 'ant-design-vue'
+import Button from '@/components/Button.vue'
 
 const emit = defineEmits<{
   (event: 'close'): void
diff --git a/src/views/Editor/ExportDialog/ExportPDF.vue b/src/views/Editor/ExportDialog/ExportPDF.vue
index 2d1a795d..1577cc0e 100644
--- a/src/views/Editor/ExportDialog/ExportPDF.vue
+++ b/src/views/Editor/ExportDialog/ExportPDF.vue
@@ -27,8 +27,8 @@
           class="config-item"
           v-model:value="rangeType"
         >
-          <RadioButton style="width: 50%;" value="all">全部幻灯片</RadioButton>
-          <RadioButton style="width: 50%;" value="current">当前幻灯片</RadioButton>
+          <RadioButton style="width: 50%;" value="all">全部</RadioButton>
+          <RadioButton style="width: 50%;" value="current">当前页</RadioButton>
         </RadioGroup>
       </div>
       <div class="row">
@@ -68,12 +68,10 @@ import { print } from '@/utils/print'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import Switch from '@/components/Switch.vue'
-import {
-  Button,
-  Select,
-  Radio,
-} from 'ant-design-vue'
-const { Group: RadioGroup, Button: RadioButton } = Radio
+import Button from '@/components/Button.vue'
+import RadioButton from '@/components/RadioButton.vue'
+import RadioGroup from '@/components/RadioGroup.vue'
+import { Select } from 'ant-design-vue'
 const SelectOption = Select.Option
 
 const emit = defineEmits<{
@@ -157,6 +155,7 @@ const expPDF = () => {
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 1;
 
   .export {
     flex: 1;
diff --git a/src/views/Editor/ExportDialog/ExportPPTX.vue b/src/views/Editor/ExportDialog/ExportPPTX.vue
index a223f586..30131777 100644
--- a/src/views/Editor/ExportDialog/ExportPPTX.vue
+++ b/src/views/Editor/ExportDialog/ExportPPTX.vue
@@ -58,11 +58,9 @@ import useExport from '@/hooks/useExport'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 import Switch from '@/components/Switch.vue'
 import Slider from '@/components/Slider.vue'
-import {
-  Button,
-  Radio,
-} from 'ant-design-vue'
-const { Group: RadioGroup, Button: RadioButton } = Radio
+import Button from '@/components/Button.vue'
+import RadioButton from '@/components/RadioButton.vue'
+import RadioGroup from '@/components/RadioGroup.vue'
 
 const emit = defineEmits<{
   (event: 'close'): void
diff --git a/src/views/Editor/ExportDialog/ExportSpecificFile.vue b/src/views/Editor/ExportDialog/ExportSpecificFile.vue
index e655a7ed..7cd5cecc 100644
--- a/src/views/Editor/ExportDialog/ExportSpecificFile.vue
+++ b/src/views/Editor/ExportDialog/ExportSpecificFile.vue
@@ -41,11 +41,9 @@ import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
 import Slider from '@/components/Slider.vue'
-import {
-  Button,
-  Radio,
-} from 'ant-design-vue'
-const { Group: RadioGroup, Button: RadioButton } = Radio
+import Button from '@/components/Button.vue'
+import RadioButton from '@/components/RadioButton.vue'
+import RadioGroup from '@/components/RadioGroup.vue'
 
 const emit = defineEmits<{
   (event: 'close'): void
diff --git a/src/views/Editor/SearchPanel.vue b/src/views/Editor/SearchPanel.vue
index 8fe24eb2..200b94de 100644
--- a/src/views/Editor/SearchPanel.vue
+++ b/src/views/Editor/SearchPanel.vue
@@ -38,7 +38,7 @@ import MoveablePanel from '@/components/MoveablePanel.vue'
 import Tabs from '@/components/Tabs.vue'
 import Divider from '@/components/Divider.vue'
 import Input from '@/components/Input.vue'
-import { Button } from 'ant-design-vue'
+import Button from '@/components/Button.vue'
 
 type TypeKey = 'search' | 'replace'
 interface TabItem {
diff --git a/src/views/Editor/SelectPanel.vue b/src/views/Editor/SelectPanel.vue
index 7f35a614..3c947398 100644
--- a/src/views/Editor/SelectPanel.vue
+++ b/src/views/Editor/SelectPanel.vue
@@ -86,7 +86,7 @@ import useOrderElement from '@/hooks/useOrderElement'
 import { ElementOrderCommands } from '@/types/edit'
 
 import MoveablePanel from '@/components/MoveablePanel.vue'
-import { Button } from 'ant-design-vue'
+import Button from '@/components/Button.vue'
 
 const slidesStore = useSlidesStore()
 const mainStore = useMainStore()
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index 74d125f8..dd84f727 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -77,12 +77,12 @@
 
             <div class="config-item">
               <div style="flex: 3;">持续时长：</div>
-              <InputNumber 
+              <NumberInput 
                 :min="500"
                 :max="3000"
                 :step="500"
                 :value="element.duration" 
-                @change="value => updateElementAnimationDuration(element.id, value as number)" 
+                @update:value="value => updateElementAnimationDuration(element.id, value)" 
                 style="flex: 5;" 
               />
             </div>
@@ -127,10 +127,10 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import Tabs from '@/components/Tabs.vue'
 import Divider from '@/components/Divider.vue'
+import Button from '@/components/Button.vue'
 import Draggable from 'vuedraggable'
+import NumberInput from '@/components/NumberInput.vue'
 import {
-  InputNumber,
-  Button,
   Popover,
   Select,
 } from 'ant-design-vue'
diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index ba784ab4..8df19903 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -27,33 +27,33 @@
     <Divider />
 
     <div class="row">
-      <InputNumber
+      <NumberInput
         prefix="水平："
         :step="5"
         :value="left"
-        @change="value => updateLeft(value as number)"
+        @update:value="value => updateLeft(value)"
         style="flex: 4;"
       />
       <div style="flex: 1;"></div>
-      <InputNumber
+      <NumberInput
         prefix="垂直："
         :step="5"
         :value="top"
-        @change="value => updateTop(value as number)"
+        @update:value="value => updateTop(value)"
         style="flex: 4;"
       />
     </div>
 
     <template v-if="handleElement!.type !== 'line'">
       <div class="row">
-        <InputNumber
+        <NumberInput
           prefix="宽度："
           :min="minSize"
           :max="1500"
           :step="5"
           :disabled="isVerticalText"
           :value="width"
-          @change="value => updateWidth(value as number)"
+          @update:value="value => updateWidth(value)"
           style="flex: 4;"
         />
         <template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)">
@@ -61,14 +61,14 @@
           <IconUnlock style="flex: 1;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else />
         </template>
         <div style="flex: 1;" v-else></div>
-        <InputNumber 
+        <NumberInput 
           prefix="高度："
           :min="minSize"
           :max="800"
           :step="5"
           :disabled="isHorizontalText || handleElement!.type === 'table'" 
           :value="height" 
-          @change="value => updateHeight(value as number)"
+          @update:value="value => updateHeight(value)"
           style="flex: 4;"
         />
       </div>
@@ -78,13 +78,13 @@
       <Divider />
 
       <div class="row">
-        <InputNumber 
+        <NumberInput 
           prefix="旋转："
           :min="-180"
           :max="180"
           :step="5"
           :value="rotate" 
-          @change="value => updateRotate(value as number)" 
+          @update:value="value => updateRotate(value)" 
           style="flex: 8;" 
         />
         <div style="flex: 1;"></div>
@@ -107,12 +107,9 @@ import useOrderElement from '@/hooks/useOrderElement'
 import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import Divider from '@/components/Divider.vue'
-
-import {
-  InputNumber,
-  Button,
-} from 'ant-design-vue'
-const ButtonGroup = Button.Group
+import Button from '@/components/Button.vue'
+import ButtonGroup from '@/components/ButtonGroup.vue'
+import NumberInput from '@/components/NumberInput.vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
index ed1265af..faef4251 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
@@ -59,8 +59,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import type { ChartData } from '@/types/slides'
 import { KEYS } from '@/configs/hotkey'
 import { pasteCustomClipboardString, pasteExcelClipboardString } from '@/utils/clipboard'
-
-import { Button } from 'ant-design-vue'
+import Button from '@/components/Button.vue'
 
 const props = defineProps<{
   data: ChartData
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index b3e36e5c..e590d90b 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -118,12 +118,12 @@
             </div>
           </div>
         </template>
-        <Button class="no-padding" style="flex: 2;">推荐主题</Button>
+        <Button class="no-padding" style="width: 40%;">推荐主题</Button>
       </Popover>
       <Button 
         class="no-padding" 
         :disabled="themeColor.length >= 10" 
-        style="flex: 3;" 
+        style="width: 60%;" 
         @click="addThemeColor()"
       >
         <IconPlus class="btn-icon" /> 添加主题色
@@ -162,12 +162,12 @@ import ColorPicker from '@/components/ColorPicker/index.vue'
 import Modal from '@/components/Modal.vue'
 import Divider from '@/components/Divider.vue'
 import Checkbox from '@/components/Checkbox.vue'
+import Button from '@/components/Button.vue'
+import ButtonGroup from '@/components/ButtonGroup.vue'
 import {
-  Button,
   Popover,
   Select,
 } from 'ant-design-vue'
-const ButtonGroup = Button.Group
 const SelectOption = Select.Option
 
 const presetChartThemes = [
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
index b2974c61..5f888d70 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
@@ -8,7 +8,7 @@
     <ElementFlip />
 
     <ButtonGroup class="row">
-      <Button style="flex: 5;" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
+      <Button style="width: calc(100% / 6 * 5);" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
       <Popover trigger="click" v-model:open="clipPanelVisible">
         <template #content>
           <div class="clip">
@@ -24,12 +24,12 @@
               </div>
             </div>
 
-            <template v-for="type in ratioClipOptions" :key="type.label">
-              <div class="title" v-if="type.label">按{{type.label}}：</div>
+            <template v-for="typeItem in ratioClipOptions" :key="typeItem.label">
+              <div class="title" v-if="typeItem.label">按{{typeItem.label}}：</div>
               <ButtonGroup class="row">
                 <Button 
                   style="flex: 1;"
-                  v-for="item in type.children"
+                  v-for="item in typeItem.children"
                   :key="item.key"
                   @click="presetImageClip('rect', item.ratio)"
                 >{{item.key}}</Button>
@@ -37,7 +37,7 @@
             </template>
           </div>
         </template>
-        <Button class="no-padding" style="flex: 1;"><IconDown /></Button>
+        <Button class="popover-btn" style="width: calc(100% / 6);"><IconDown /></Button>
       </Popover>
     </ButtonGroup>
 
@@ -75,11 +75,9 @@ import ElementFilter from '../common/ElementFilter.vue'
 import ElementColorMask from '../common/ElementColorMask.vue'
 import FileInput from '@/components/FileInput.vue'
 import Divider from '@/components/Divider.vue'
-import {
-  Button,
-  Popover,
-} from 'ant-design-vue'
-const ButtonGroup = Button.Group
+import Button from '@/components/Button.vue'
+import ButtonGroup from '@/components/ButtonGroup.vue'
+import { Popover } from 'ant-design-vue'
 
 const shapeClipPathOptions = CLIPPATHS
 const ratioClipOptions = [
@@ -322,4 +320,7 @@ const setBackgroundImage = () => {
     background-color: #e1e1e1;
   }
 }
+.popover-btn {
+  padding: 0 3px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
index 05473aed..99bd775a 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
@@ -18,11 +18,11 @@
     </div>
     <div class="row">
       <div style="flex: 2;">粗细：</div>
-      <InputNumber 
+      <NumberInput 
         :min="1"
         :max="3"
         :value="handleLatexElement.strokeWidth" 
-        @change="value => updateLatex({ strokeWidth: value as number })" 
+        @update:value="value => updateLatex({ strokeWidth: value })" 
         style="flex: 3;" 
       />
     </div>
@@ -53,11 +53,9 @@ import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Modal from '@/components/Modal.vue'
 import Divider from '@/components/Divider.vue'
-import {
-  InputNumber,
-  Button,
-  Popover,
-} from 'ant-design-vue'
+import Button from '@/components/Button.vue'
+import NumberInput from '@/components/NumberInput.vue'
+import { Popover } from 'ant-design-vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
index 51ab8ebb..5c935eb3 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
@@ -25,9 +25,9 @@
     </div>
     <div class="row">
       <div style="flex: 2;">线条宽度：</div>
-      <InputNumber 
+      <NumberInput 
         :value="handleLineElement.width" 
-        @change="value => updateLine({ width: value as number })" 
+        @update:value="value => updateLine({ width: value })" 
         style="flex: 3;" 
       />
     </div>
@@ -73,8 +73,8 @@ import ElementShadow from '../common/ElementShadow.vue'
 import ColorButton from '../common/ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Divider from '@/components/Divider.vue'
+import NumberInput from '@/components/NumberInput.vue'
 import {
-  InputNumber,
   Popover,
   Select,
 } from 'ant-design-vue'
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
index e3fc8c5a..1a655fa1 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
@@ -40,9 +40,9 @@
     </div>
     <div class="row">
       <div style="flex: 2;">边框粗细：</div>
-      <InputNumber 
-        :value="outline.width"
-        @change="value => updateOutline({ width: value as number })" 
+      <NumberInput 
+        :value="outline.width || 0"
+        @update:value="value => updateOutline({ width: value })" 
         style="flex: 3;" 
       />
     </div>
@@ -118,7 +118,7 @@
       class="row" 
       button-style="solid" 
       :value="richTextAttrs.align"
-      @change="e => updateFontStyle('align', e.target.value)"
+      @update:value="value => updateFontStyle('align', value)"
     >
       <RadioButton value="left" style="flex: 1;" v-tooltip="'左对齐'"><IconAlignTextLeft /></RadioButton>
       <RadioButton value="center" style="flex: 1;" v-tooltip="'居中'"><IconAlignTextCenter /></RadioButton>
@@ -140,18 +140,18 @@ import ColorButton from '../common/ColorButton.vue'
 import TextColorButton from '../common/TextColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Divider from '@/components/Divider.vue'
+import Button from '@/components/Button.vue'
+import ButtonGroup from '@/components/ButtonGroup.vue'
+import RadioButton from '@/components/RadioButton.vue'
+import RadioGroup from '@/components/RadioGroup.vue'
+import NumberInput from '@/components/NumberInput.vue'
 import {
-  InputNumber,
-  Button,
   Popover,
   Select,
-  Radio,
   Input,
 } from 'ant-design-vue'
-const { Button: RadioButton, Group: RadioGroup } = Radio
 const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
 const InputGroup = Input.Group
-const ButtonGroup = Button.Group
 
 const slidesStore = useSlidesStore()
 const { richTextAttrs, availableFonts, activeElementList } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index e5ea1f0f..67d1fbc6 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -161,7 +161,7 @@
         ><IconFontSize />-</Button>
       </ButtonGroup>
 
-      <CheckboxButtonGroup class="row">
+      <ButtonGroup class="row">
         <CheckboxButton 
           style="flex: 1;"
           :checked="richTextAttrs.bold"
@@ -186,9 +186,9 @@
           v-tooltip="'删除线'"
           @click="emitRichTextCommand('strikethrough')"
         ><IconStrikethrough /></CheckboxButton>
-      </CheckboxButtonGroup>
+      </ButtonGroup>
 
-      <CheckboxButtonGroup class="row">
+      <ButtonGroup class="row">
         <CheckboxButton
           style="flex: 1;"
           v-tooltip="'清除格式'"
@@ -200,7 +200,7 @@
           v-tooltip="'格式刷'"
           @click="toggleFormatPainter()"
         ><IconFormatBrush /></CheckboxButton>
-      </CheckboxButtonGroup>
+      </ButtonGroup>
 
       <Divider  />
 
@@ -208,7 +208,7 @@
         class="row" 
         button-style="solid" 
         :value="richTextAttrs.align"
-        @change="e => emitRichTextCommand('align', e.target.value)"
+        @update:value="value => emitRichTextCommand('align', value)"
       >
         <RadioButton value="left" v-tooltip="'左对齐'" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
         <RadioButton value="center" v-tooltip="'居中'" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
@@ -219,7 +219,7 @@
         class="row" 
         button-style="solid" 
         :value="textAlign"
-        @change="e => updateTextAlign(e.target.value)"
+        @update:value="value => updateTextAlign(value as 'top' | 'middle' | 'bottom')"
       >
         <RadioButton value="top" v-tooltip="'顶对齐'" style="flex: 1;"><IconAlignTextTopOne /></RadioButton>
         <RadioButton value="middle" v-tooltip="'居中'" style="flex: 1;"><IconAlignTextMiddleOne /></RadioButton>
@@ -256,21 +256,20 @@ import ColorButton from '../common/ColorButton.vue'
 import TextColorButton from '../common/TextColorButton.vue'
 import ShapeItemThumbnail from '@/views/Editor/CanvasTool/ShapeItemThumbnail.vue'
 import CheckboxButton from '@/components/CheckboxButton.vue'
-import CheckboxButtonGroup from '@/components/ButtonGroup.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Divider from '@/components/Divider.vue'
 import Slider from '@/components/Slider.vue'
+import Button from '@/components/Button.vue'
+import ButtonGroup from '@/components/ButtonGroup.vue'
+import RadioButton from '@/components/RadioButton.vue'
+import RadioGroup from '@/components/RadioGroup.vue'
 import {
-  Button,
   Popover,
   Select,
-  Radio,
   Input,
 } from 'ant-design-vue'
-const { Group: RadioGroup, Button: RadioButton } = Radio
 const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
 const InputGroup = Input.Group
-const ButtonGroup = Button.Group
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index 857a4d0d..0d2692ae 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -55,7 +55,7 @@
       </Popover>
     </ButtonGroup>
 
-    <CheckboxButtonGroup class="row">
+    <ButtonGroup class="row">
       <CheckboxButton 
         style="flex: 1;"
         :checked="textAttrs.bold"
@@ -80,13 +80,13 @@
         v-tooltip="'删除线'"
         @click="updateTextAttrs({ strikethrough: !textAttrs.strikethrough })"
       ><IconStrikethrough /></CheckboxButton>
-    </CheckboxButtonGroup>
+    </ButtonGroup>
 
     <RadioGroup 
       class="row" 
       button-style="solid" 
       :value="textAttrs.align"
-      @change="e => updateTextAttrs({ align: e.target.value })"
+      @update:value="value => updateTextAttrs({ align: value as 'left' | 'center' | 'right' })"
     >
       <RadioButton value="left" v-tooltip="'左对齐'" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
       <RadioButton value="center" v-tooltip="'居中'" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
@@ -182,22 +182,21 @@ import ElementOutline from '../common/ElementOutline.vue'
 import ColorButton from '../common/ColorButton.vue'
 import TextColorButton from '../common/TextColorButton.vue'
 import CheckboxButton from '@/components/CheckboxButton.vue'
-import CheckboxButtonGroup from '@/components/ButtonGroup.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Divider from '@/components/Divider.vue'
 import Switch from '@/components/Switch.vue'
 import Checkbox from '@/components/Checkbox.vue'
+import Button from '@/components/Button.vue'
+import ButtonGroup from '@/components/ButtonGroup.vue'
+import RadioButton from '@/components/RadioButton.vue'
+import RadioGroup from '@/components/RadioGroup.vue'
 import {
-  Button,
   Popover,
   Select,
-  Radio,
   Input,
 } from 'ant-design-vue'
-const { Group: RadioGroup, Button: RadioButton } = Radio
 const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
 const InputGroup = Input.Group
-const ButtonGroup = Button.Group
 
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId, selectedTableCells: selectedCells, availableFonts } = storeToRefs(useMainStore())
@@ -412,7 +411,7 @@ const setTableCol = (value: number) => {
   align-items: center;
 
   .btn {
-    padding: 4px 8px;
+    padding: 0 8px;
   }
 
   .count-text {
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index 0286866a..34765c59 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -80,7 +80,7 @@
       ><IconFontSize />-</Button>
     </ButtonGroup>
 
-    <CheckboxButtonGroup class="row">
+    <ButtonGroup class="row">
       <CheckboxButton 
         style="flex: 1;"
         :checked="richTextAttrs.bold"
@@ -105,9 +105,9 @@
         v-tooltip="'删除线'"
         @click="emitRichTextCommand('strikethrough')"
       ><IconStrikethrough /></CheckboxButton>
-    </CheckboxButtonGroup>
+    </ButtonGroup>
 
-    <CheckboxButtonGroup class="row">
+    <ButtonGroup class="row">
       <CheckboxButton
         style="flex: 1;"
         :checked="richTextAttrs.superscript"
@@ -132,9 +132,9 @@
         v-tooltip="'引用'"
         @click="emitRichTextCommand('blockquote')"
       ><IconQuote /></CheckboxButton>
-    </CheckboxButtonGroup>
+    </ButtonGroup>
 
-    <CheckboxButtonGroup class="row">
+    <ButtonGroup class="row">
       <CheckboxButton
         style="flex: 1;"
         v-tooltip="'清除格式'"
@@ -163,7 +163,7 @@
           @click="openLinkPopover()"
         ><IconLinkOne /></CheckboxButton>
       </Popover>
-    </CheckboxButtonGroup>
+    </ButtonGroup>
 
     <Divider />
 
@@ -171,7 +171,7 @@
       class="row" 
       button-style="solid" 
       :value="richTextAttrs.align"
-      @change="e => emitRichTextCommand('align', e.target.value)"
+      @update:value="value => emitRichTextCommand('align', value)"
     >
       <RadioButton value="left" v-tooltip="'左对齐'" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
       <RadioButton value="center" v-tooltip="'居中'" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
@@ -317,21 +317,20 @@ import ElementShadow from '../common/ElementShadow.vue'
 import ColorButton from '../common/ColorButton.vue'
 import TextColorButton from '../common/TextColorButton.vue'
 import CheckboxButton from '@/components/CheckboxButton.vue'
-import CheckboxButtonGroup from '@/components/ButtonGroup.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Divider from '@/components/Divider.vue'
 import Input from '@/components/Input.vue'
+import Button from '@/components/Button.vue'
+import ButtonGroup from '@/components/ButtonGroup.vue'
+import RadioButton from '@/components/RadioButton.vue'
+import RadioGroup from '@/components/RadioGroup.vue'
 import {
-  Button,
   Popover,
   Select,
-  Radio,
   Input as AntInput,
 } from 'ant-design-vue'
-const { Group: RadioGroup, Button: RadioButton } = Radio
 const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
 const InputGroup = AntInput.Group
-const ButtonGroup = Button.Group
 
 // 注意，存在一个未知原因的BUG，如果文本加粗后文本框高度增加，画布的可视区域定位会出现错误
 // 因此在执行预置样式命令时，将加粗命令放在尽可能靠前的位置，避免字号增大后再加粗
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
index d4fb31f1..e8c11a64 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
@@ -23,7 +23,7 @@ import { getImageDataURL } from '@/utils/image'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import FileInput from '@/components/FileInput.vue'
-import { Button } from 'ant-design-vue'
+import Button from '@/components/Button.vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/MultiPositionPanel.vue b/src/views/Editor/Toolbar/MultiPositionPanel.vue
index d3563ac9..a1d98a1c 100644
--- a/src/views/Editor/Toolbar/MultiPositionPanel.vue
+++ b/src/views/Editor/Toolbar/MultiPositionPanel.vue
@@ -31,9 +31,8 @@ import useAlignActiveElement from '@/hooks/useAlignActiveElement'
 import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useUniformDisplayElement from '@/hooks/useUniformDisplayElement'
 import Divider from '@/components/Divider.vue'
-
-import { Button } from 'ant-design-vue'
-const ButtonGroup = Button.Group
+import Button from '@/components/Button.vue'
+import ButtonGroup from '@/components/ButtonGroup.vue'
 
 const { canCombine, combineElements, uncombineElements } = useCombineElement()
 const { alignActiveElement } = useAlignActiveElement()
diff --git a/src/views/Editor/Toolbar/SlideAnimationPanel.vue b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
index 5554153f..97f2ac4b 100644
--- a/src/views/Editor/Toolbar/SlideAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
@@ -24,8 +24,7 @@ import type { TurningMode } from '@/types/slides'
 import { SLIDE_ANIMATIONS } from '@/configs/animation'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import message from '@/utils/message'
-
-import { Button } from 'ant-design-vue'
+import Button from '@/components/Button.vue'
 
 const slidesStore = useSlidesStore()
 const { slides, currentSlide } = storeToRefs(slidesStore)
diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue
index a32a60b2..4946ab28 100644
--- a/src/views/Editor/Toolbar/SlideDesignPanel.vue
+++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue
@@ -213,8 +213,8 @@ import FileInput from '@/components/FileInput.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Divider from '@/components/Divider.vue'
 import Slider from '@/components/Slider.vue'
+import Button from '@/components/Button.vue'
 import {
-  Button,
   Popover,
   Select,
 } from 'ant-design-vue'
diff --git a/src/views/Editor/Toolbar/common/ColorButton.vue b/src/views/Editor/Toolbar/common/ColorButton.vue
index 66bd5250..17549460 100644
--- a/src/views/Editor/Toolbar/common/ColorButton.vue
+++ b/src/views/Editor/Toolbar/common/ColorButton.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Button } from 'ant-design-vue'
+import Button from '@/components/Button.vue'
 
 defineProps<{
   color: string
@@ -17,7 +17,7 @@ defineProps<{
 
 <style lang="scss" scoped>
 .color-btn {
-  display: flex;
+  display: flex !important;
   align-items: center;
   justify-content: center;
   padding: 0 !important;
diff --git a/src/views/Editor/Toolbar/common/ElementOutline.vue b/src/views/Editor/Toolbar/common/ElementOutline.vue
index 3e56fee5..13550a03 100644
--- a/src/views/Editor/Toolbar/common/ElementOutline.vue
+++ b/src/views/Editor/Toolbar/common/ElementOutline.vue
@@ -35,9 +35,9 @@
       </div>
       <div class="row">
         <div style="flex: 2;">边框粗细：</div>
-        <InputNumber 
-          :value="outline.width" 
-          @change="value => updateOutline({ width: value as number })" 
+        <NumberInput 
+          :value="outline.width || 0" 
+          @update:value="value => updateOutline({ width: value })" 
           style="flex: 3;" 
         />
       </div>
@@ -55,8 +55,8 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ColorButton from './ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Switch from '@/components/Switch.vue'
+import NumberInput from '@/components/NumberInput.vue'
 import {
-  InputNumber,
   Popover,
   Select,
 } from 'ant-design-vue'
diff --git a/src/views/Editor/Toolbar/common/TextColorButton.vue b/src/views/Editor/Toolbar/common/TextColorButton.vue
index 9c8bbee9..acd5642b 100644
--- a/src/views/Editor/Toolbar/common/TextColorButton.vue
+++ b/src/views/Editor/Toolbar/common/TextColorButton.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Button } from 'ant-design-vue'
+import Button from '@/components/Button.vue'
 
 defineProps<{
   color: string
@@ -17,7 +17,7 @@ defineProps<{
 
 <style lang="scss" scoped>
 .text-color-btn {
-  display: flex;
+  display: flex !important;
   flex-direction: column;
   justify-content: center;
   align-items: center;
diff --git a/src/views/Mobile/MobileEditor/ElementToolbar.vue b/src/views/Mobile/MobileEditor/ElementToolbar.vue
index 2dc06a12..72a418a7 100644
--- a/src/views/Mobile/MobileEditor/ElementToolbar.vue
+++ b/src/views/Mobile/MobileEditor/ElementToolbar.vue
@@ -12,7 +12,7 @@
 
     <div class="content">
       <div class="style" v-if="activeTab === 'style'">
-        <CheckboxButtonGroup class="row">
+        <ButtonGroup class="row">
           <CheckboxButton 
             style="flex: 1;"
             :checked="richTextAttrs.bold"
@@ -33,7 +33,7 @@
             :checked="richTextAttrs.strikethrough"
             @click="emitRichTextCommand('strikethrough')"
           ><IconStrikethrough /></CheckboxButton>
-        </CheckboxButtonGroup>
+        </ButtonGroup>
 
         <ButtonGroup class="row">
           <Button 
@@ -52,7 +52,7 @@
           class="row" 
           button-style="solid" 
           :value="richTextAttrs.align"
-          @change="e => emitRichTextCommand('align', e.target.value)"
+          @update:value="value => emitRichTextCommand('align', value)"
         >
           <RadioButton value="left" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
           <RadioButton value="center" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
@@ -133,15 +133,12 @@ import useAddSlidesOrElements from '@/hooks/useAddSlidesOrElements'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import CheckboxButton from '@/components/CheckboxButton.vue'
-import CheckboxButtonGroup from '@/components/ButtonGroup.vue'
 import Tabs from '@/components/Tabs.vue'
 import Divider from '@/components/Divider.vue'
-import {
-  Button,
-  Radio,
-} from 'ant-design-vue'
-const { Group: RadioGroup, Button: RadioButton } = Radio
-const ButtonGroup = Button.Group
+import Button from '@/components/Button.vue'
+import ButtonGroup from '@/components/ButtonGroup.vue'
+import RadioButton from '@/components/RadioButton.vue'
+import RadioGroup from '@/components/RadioGroup.vue'
 
 interface TabItem {
   key: 'style' | 'common'
diff --git a/src/views/Mobile/MobileEditor/SlideToolbar.vue b/src/views/Mobile/MobileEditor/SlideToolbar.vue
index 8cc73fe4..ee603aac 100644
--- a/src/views/Mobile/MobileEditor/SlideToolbar.vue
+++ b/src/views/Mobile/MobileEditor/SlideToolbar.vue
@@ -41,8 +41,8 @@ import { VIEWPORT_SIZE } from '@/configs/canvas'
 
 import MobileThumbnails from '../MobileThumbnails.vue'
 import FileInput from '@/components/FileInput.vue'
-import { Button } from 'ant-design-vue'
-const ButtonGroup = Button.Group
+import Button from '@/components/Button.vue'
+import ButtonGroup from '@/components/ButtonGroup.vue'
 
 const slidesStore = useSlidesStore()
 const { viewportRatio, currentSlide } = storeToRefs(slidesStore)
@@ -121,6 +121,7 @@ const handleInputMark = (e: Event) => {
     outline: 0;
     padding: 8px 10px;
     font-size: 12px;
+    box-sizing: border-box;
 
     @include absolute-0();
   }