From efce656fa181b1a7b3f742b2cf79853d25578fec Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Thu, 28 Sep 2023 21:53:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9B=BF=E6=8D=A2Slider=E3=80=81Sw?=
 =?UTF-8?q?itch=E3=80=81Checkbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/global.scss                 |  1 -
 src/components/Button.vue                     |  2 +-
 src/components/Checkbox.vue                   |  2 +-
 src/components/Input.vue                      |  1 -
 src/components/LaTeXEditor/index.vue          |  1 -
 src/components/Slider.vue                     | 68 +++++++++++--------
 src/components/Switch.vue                     | 17 +----
 src/views/Editor/CanvasTool/index.vue         |  4 +-
 src/views/Editor/EditorHeader/index.vue       |  4 +-
 src/views/Editor/ExportDialog/ExportImage.vue |  7 +-
 src/views/Editor/ExportDialog/ExportPDF.vue   |  5 +-
 src/views/Editor/ExportDialog/ExportPPTX.vue  | 16 ++---
 .../ExportDialog/ExportSpecificFile.vue       |  3 +-
 src/views/Editor/SearchPanel.vue              |  4 +-
 .../ElementStylePanel/AudioStylePanel.vue     | 11 +--
 .../ChartStylePanel/index.vue                 | 28 ++++----
 .../ElementStylePanel/ShapeStylePanel.vue     |  4 +-
 .../ElementStylePanel/TableStylePanel.vue     | 24 +++----
 .../Editor/Toolbar/MultiPositionPanel.vue     |  4 +-
 src/views/Editor/Toolbar/SlideDesignPanel.vue |  6 +-
 .../Toolbar/common/ElementColorMask.vue       | 16 ++---
 .../Editor/Toolbar/common/ElementFilter.vue   | 11 +--
 .../Editor/Toolbar/common/ElementOpacity.vue  |  5 +-
 .../Editor/Toolbar/common/ElementOutline.vue  |  6 +-
 .../Editor/Toolbar/common/ElementShadow.vue   | 16 ++---
 src/views/Screen/WritingBoardTool.vue         |  6 +-
 26 files changed, 123 insertions(+), 149 deletions(-)

diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index 7be371f9..6c1ba010 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -48,7 +48,6 @@ body {
 }
 
 body {
-  line-height: 1;
   font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
 
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 7137a8c0..607edffd 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -47,7 +47,7 @@ const handleClick = () => {
   color: $textColor;
   border-radius: $borderRadius;
   user-select: none;
-  letter-spacing: 2px;
+  letter-spacing: 1px;
   cursor: pointer;
 
   &.default {
diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
index 250b17df..4cc6703c 100644
--- a/src/components/Checkbox.vue
+++ b/src/components/Checkbox.vue
@@ -73,7 +73,7 @@ const handleChange = (e: Event) => {
   height: 16px;
   background-color: #fff;
   vertical-align: middle;
-  transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
+  transition: border-color .15s cubic-bezier(.71, -.46, .29, 1.46), background-color .15s cubic-bezier(.71, -.46, .29, 1.46);
   z-index: 1;
 
   &::after {
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 5a583de5..d99e9642 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -52,7 +52,6 @@ const focused = ref(false)
 
 const handleInput = (e: Event) => {
   emit('update:value', (e.target as HTMLInputElement).value)
-  emit('input', e)
 }
 const handleBlur = (e: Event) => {
   focused.value = false
diff --git a/src/components/LaTeXEditor/index.vue b/src/components/LaTeXEditor/index.vue
index caf02fd5..7e128878 100644
--- a/src/components/LaTeXEditor/index.vue
+++ b/src/components/LaTeXEditor/index.vue
@@ -220,7 +220,6 @@ const insertSymbol = (latex: string) => {
     margin-bottom: 5px;
   }
   .formula-item-content {
-    width: 246px;
     height: 60px;
     padding: 5px;
     display: flex;
diff --git a/src/components/Slider.vue b/src/components/Slider.vue
index 82fcf09e..b965f541 100644
--- a/src/components/Slider.vue
+++ b/src/components/Slider.vue
@@ -7,15 +7,15 @@
       </template>
       <template v-else>
         <div class="track" :style="{ width: `${end - start}%`, left: `${start}%` }"></div>
-        <div class="thumb" :style="{ left: `${start}%` }" :data-tooltip="tooltipValue"></div>
-        <div class="thumb" :style="{ left: `${end}%` }" :data-tooltip="tooltipValue"></div>
+        <div class="thumb" :style="{ left: `${start}%` }" :data-tooltip="tooltipRangeStartValue"></div>
+        <div class="thumb" :style="{ left: `${end}%` }" :data-tooltip="tooltipRangeEndValue"></div>
       </template>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import NP from 'number-precision'
 
 const getBoundingClientRectViewLeft = (element: HTMLElement) => {
@@ -46,9 +46,38 @@ const percentage = ref(0)
 const start = ref(0)
 const end = ref(0)
 const handler = ref<'start' | 'end'>('end')
-const tooltipValue = ref(0)
+
+const getNewValue = (percentage: number) => {
+  let diff = percentage / 100 * (props.max - props.min)
+  if (props.step >= 1) diff = Math.fround(diff)
+  else {
+    const str = props.step.toString()
+    const match = str.match(/^[0.]*([1-9])/)
+
+    if (match) {
+      const targetNumber = match[1]
+      const position = str.indexOf(targetNumber) - 1
+      if (position > 0) {
+        const accuracy = Math.pow(10, position)
+        diff = Math.fround(diff * accuracy) / accuracy
+      }
+    }
+  }
+  return NP.plus(diff, props.min)
+}
+
+const tooltipValue = computed(() => {
+  return getNewValue(percentage.value)
+})
+const tooltipRangeStartValue = computed(() => {
+  return getNewValue(start.value)
+})
+const tooltipRangeEndValue = computed(() => {
+  return getNewValue(end.value)
+})
 
 watch(() => props.value, () => {
+  if (props.max === props.min) return
   if (typeof props.value === 'number') {
     percentage.value = (props.value - props.min) / (props.max - props.min) * 100
   }
@@ -78,33 +107,12 @@ const getPercentage = (e: MouseEvent | TouchEvent) => {
   return _percentage
 }
 
-const getNewValue = (percentage: number) => {
-  let diff = percentage / 100 * (props.max - props.min)
-  if (props.step >= 1) diff = Math.fround(diff)
-  else {
-    const str = props.step.toString()
-    const match = str.match(/^[0.]*([1-9])/)
-
-    if (match) {
-      const targetNumber = match[1]
-      const position = str.indexOf(targetNumber) - 1
-      if (position > 0) {
-        const accuracy = Math.pow(10, position)
-        diff = Math.fround(diff * accuracy) / accuracy
-      }
-    }
-  }
-  return NP.plus(diff, props.min)
-}
-
 // 双滑块（范围）模式
 const updateRange = (e: MouseEvent | TouchEvent) => {
   const value = getPercentage(e)
 
   if (handler.value === 'start') start.value = value
   else end.value = value
-
-  tooltipValue.value = getNewValue(value)
 }
 
 const updateRangeEnd = (e: MouseEvent | TouchEvent) => {
@@ -127,7 +135,6 @@ const updateRangeEnd = (e: MouseEvent | TouchEvent) => {
 // 单滑块模式
 const updatePercentage = (e: MouseEvent | TouchEvent) => {
   percentage.value = getPercentage(e)
-  tooltipValue.value = getNewValue(percentage.value)
 }
 
 const updatePercentageEnd = (e: MouseEvent | TouchEvent) => {
@@ -207,6 +214,8 @@ const handleMousedown = (e: MouseEvent | TouchEvent) => {
 }
 
 .bar {
+  width: calc(100% - 10px);
+  margin-left: 5px;
   height: 4px;
   border-radius: 2px;
   position: relative;
@@ -234,6 +243,7 @@ const handleMousedown = (e: MouseEvent | TouchEvent) => {
   outline: 2px solid $themeColor;
   transform: translate(-50%, -50%);
   border-radius: 50%;
+  z-index: 100;
 
   &:hover, &:active {
     &::before, &::after {
@@ -243,18 +253,17 @@ const handleMousedown = (e: MouseEvent | TouchEvent) => {
 
   &::before {
     content: attr(data-tooltip);
-    min-width: 44px;
+    min-width: 28px;
     display: none;
     position: absolute;
     left: 50%;
     bottom: 24px;
     transform: translateX(-50%);
-    z-index: 1000;
     background-color: #262626;
     text-align: center;
     color: #fff;
     border-radius: 2px;
-    padding: 8px 5px;
+    padding: 6px 5px;
     font-size: 12px;
   }
   &::after {
@@ -264,7 +273,6 @@ const handleMousedown = (e: MouseEvent | TouchEvent) => {
     left: 50%;
     bottom: 15px;
     transform: translateX(-50%);
-    z-index: 1000;
     border: 5px solid transparent;
     border-top-color: #262626;
   }
diff --git a/src/components/Switch.vue b/src/components/Switch.vue
index f995986d..f086cf04 100644
--- a/src/components/Switch.vue
+++ b/src/components/Switch.vue
@@ -8,9 +8,6 @@
     @click="handleChange()"
   >
     <span class="switch-core"></span>
-    <span class="switch-text">
-      <slot></slot>
-    </span>
   </span>
 </template>
 
@@ -34,7 +31,8 @@ const handleChange = () => {
 
 <style lang="scss" scoped>
 .switch {
-  color: $textColor;
+  height: 20px;
+  display: inline-block;
   cursor: pointer;
 
   &:not(.disabled).active {
@@ -52,22 +50,11 @@ const handleChange = () => {
   &.disabled {
     cursor: default;
 
-    .switch-text {
-      color: #b7b7b7;
-    }
     .switch-core::after {
       background-color: #f5f5f5;
     }
   }
 }
-.switch-text {
-  margin-left: 5px;
-  display: inline-block;
-  height: 20px;
-  line-height: 20px;
-  font-size: 13px;
-  user-select: none;
-}
 .switch-core {
   margin: 0;
   display: inline-block;
diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue
index 59971cb3..141c660c 100644
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@@ -114,9 +114,7 @@ import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
 import FileInput from '@/components/FileInput.vue'
 import Modal from '@/components/Modal.vue'
 import Divider from '@/components/Divider.vue'
-import {
-  Popover,
-} from 'ant-design-vue'
+import { Popover } from 'ant-design-vue'
 
 const mainStore = useMainStore()
 const { creatingElement, creatingCustomShape } = storeToRefs(mainStore)
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index 29bb04b4..c2d03021 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -86,9 +86,7 @@ import FileInput from '@/components/FileInput.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 import Drawer from '@/components/Drawer.vue'
 import Input from '@/components/Input.vue'
-import {
-  Popover,
-} from 'ant-design-vue'
+import { Popover } from 'ant-design-vue'
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
diff --git a/src/views/Editor/ExportDialog/ExportImage.vue b/src/views/Editor/ExportDialog/ExportImage.vue
index 36c1210d..86fb7758 100644
--- a/src/views/Editor/ExportDialog/ExportImage.vue
+++ b/src/views/Editor/ExportDialog/ExportImage.vue
@@ -59,7 +59,7 @@
       <div class="row">
         <div class="title">忽略在线字体：</div>
         <div class="config-item">
-          <Switch v-model:checked="ignoreWebfont" v-tooltip="'导出时默认忽略在线字体，若您在幻灯片中使用了在线字体，且希望导出后保留相关样式，可选择关闭【忽略在线字体】选项，但要注意这将会增加导出用时。'" />
+          <Switch v-model:value="ignoreWebfont" v-tooltip="'导出时默认忽略在线字体，若您在幻灯片中使用了在线字体，且希望导出后保留相关样式，可选择关闭【忽略在线字体】选项，但要注意这将会增加导出用时。'" />
         </div>
       </div>
     </div>
@@ -81,10 +81,10 @@ import useExport from '@/hooks/useExport'
 
 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,
-  Slider,
-  Switch,
   Radio,
 } from 'ant-design-vue'
 const { Group: RadioGroup, Button: RadioButton } = Radio
@@ -156,7 +156,6 @@ const expImage = () => {
   .title {
     width: 100px;
     position: relative;
-    line-height: 1;
 
     &::after {
       content: attr(data-range);
diff --git a/src/views/Editor/ExportDialog/ExportPDF.vue b/src/views/Editor/ExportDialog/ExportPDF.vue
index ebaea74a..2d1a795d 100644
--- a/src/views/Editor/ExportDialog/ExportPDF.vue
+++ b/src/views/Editor/ExportDialog/ExportPDF.vue
@@ -45,7 +45,7 @@
       <div class="row">
         <div class="title">边缘留白：</div>
         <div class="config-item">
-          <Switch v-model:checked="padding" />
+          <Switch v-model:value="padding" />
         </div>
       </div>
       <div class="tip">
@@ -67,10 +67,10 @@ import { useSlidesStore } from '@/store'
 import { print } from '@/utils/print'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
+import Switch from '@/components/Switch.vue'
 import {
   Button,
   Select,
-  Switch,
   Radio,
 } from 'ant-design-vue'
 const { Group: RadioGroup, Button: RadioButton } = Radio
@@ -139,7 +139,6 @@ const expPDF = () => {
 
   .title {
     width: 100px;
-    line-height: 1;
   }
   .config-item {
     flex: 1;
diff --git a/src/views/Editor/ExportDialog/ExportPPTX.vue b/src/views/Editor/ExportDialog/ExportPPTX.vue
index b3f697f3..a223f586 100644
--- a/src/views/Editor/ExportDialog/ExportPPTX.vue
+++ b/src/views/Editor/ExportDialog/ExportPPTX.vue
@@ -26,21 +26,18 @@
       <div class="row">
         <div class="title">忽略音频/视频：</div>
         <div class="config-item">
-          <Switch v-model:checked="ignoreMedia" v-tooltip="'导出时默认忽略音视频，若您的幻灯片中存在音视频元素，且希望将其导出到PPTX文件中，可选择关闭【忽略音视频】选项，但要注意这将会大幅增加导出用时。'" />
+          <Switch v-model:value="ignoreMedia" v-tooltip="'导出时默认忽略音视频，若您的幻灯片中存在音视频元素，且希望将其导出到PPTX文件中，可选择关闭【忽略音视频】选项，但要注意这将会大幅增加导出用时。'" />
         </div>
       </div>
       <div class="row">
         <div class="title">覆盖默认母版：</div>
         <div class="config-item">
-          <Switch v-model:checked="masterOverwrite" />
+          <Switch v-model:value="masterOverwrite" />
         </div>
       </div>
 
       <div class="tip" v-if="!ignoreMedia">
-        提示：
-        1. 支持导出的视频格式：avi、mp4、m4v、mov、wmv；
-        2. 支持导出的音频格式：mp3、m4a、mp4、wav、wma；
-        3. 跨域资源无法导出。
+        提示：1. 支持导出格式：avi、mp4、mov、wmv、mp3、wav；2. 跨域资源无法导出。
       </div>
     </div>
     <div class="btns">
@@ -59,10 +56,10 @@ import { useSlidesStore } from '@/store'
 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,
-  Slider,
-  Switch,
   Radio,
 } from 'ant-design-vue'
 const { Group: RadioGroup, Button: RadioButton } = Radio
@@ -117,7 +114,6 @@ const selectedSlides = computed(() => {
   .title {
     width: 100px;
     position: relative;
-    line-height: 1;
 
     &::after {
       content: attr(data-range);
@@ -134,7 +130,7 @@ const selectedSlides = computed(() => {
     font-size: 12px;
     color: #aaa;
     line-height: 1.8;
-    margin-top: 20px;
+    margin-top: 10px;
   }
 }
 .btns {
diff --git a/src/views/Editor/ExportDialog/ExportSpecificFile.vue b/src/views/Editor/ExportDialog/ExportSpecificFile.vue
index ecd2d8ab..e655a7ed 100644
--- a/src/views/Editor/ExportDialog/ExportSpecificFile.vue
+++ b/src/views/Editor/ExportDialog/ExportSpecificFile.vue
@@ -40,9 +40,9 @@ import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
+import Slider from '@/components/Slider.vue'
 import {
   Button,
-  Slider,
   Radio,
 } from 'ant-design-vue'
 const { Group: RadioGroup, Button: RadioButton } = Radio
@@ -95,7 +95,6 @@ const selectedSlides = computed(() => {
   .title {
     width: 100px;
     position: relative;
-    line-height: 1;
 
     &::after {
       content: attr(data-range);
diff --git a/src/views/Editor/SearchPanel.vue b/src/views/Editor/SearchPanel.vue
index 0306bb27..8fe24eb2 100644
--- a/src/views/Editor/SearchPanel.vue
+++ b/src/views/Editor/SearchPanel.vue
@@ -38,9 +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 'ant-design-vue'
 
 type TypeKey = 'search' | 'replace'
 interface TabItem {
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
index a68cbf13..532934f1 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
@@ -17,8 +17,8 @@
       <div style="flex: 2;">自动播放：</div>
       <div class="switch-wrapper" style="flex: 3;">
         <Switch 
-          :checked="handleAudioElement.autoplay" 
-          @change="checked => updateAudio({ autoplay: checked as boolean })" 
+          :value="handleAudioElement.autoplay" 
+          @update:value="value => updateAudio({ autoplay: value })" 
         />
       </div>
     </div>
@@ -27,8 +27,8 @@
       <div style="flex: 2;">循环播放：</div>
       <div class="switch-wrapper" style="flex: 3;">
         <Switch 
-          :checked="handleAudioElement.loop" 
-          @change="checked => updateAudio({ loop: checked as boolean })" 
+          :value="handleAudioElement.loop" 
+          @update:value="value => updateAudio({ loop: value })" 
         />
       </div>
     </div>
@@ -44,7 +44,8 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from '../common/ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
-import { Popover, Switch } from 'ant-design-vue'
+import Switch from '@/components/Switch.vue'
+import { Popover } from 'ant-design-vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index 909303a9..b3e36e5c 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -9,37 +9,39 @@
     <template v-if="handleChartElement.chartType === 'line'">
       <div class="row">
         <Checkbox 
-          @change="e => updateOptions({ showArea: e.target.checked })"
-          :checked="showArea" 
+          @update:value="value => updateOptions({ showArea: value })"
+          :value="showArea" 
           style="flex: 1;"
         >面积图样式</Checkbox>
         <Checkbox 
-          @change="e => updateOptions({ showLine: !e.target.checked })"
-          :checked="!showLine" 
+          @update:value="value => updateOptions({ showLine: value })"
+          :value="!showLine" 
           style="flex: 1;"
         >散点图样式</Checkbox>
       </div>
       <div class="row">
         <Checkbox 
-          @change="e => updateOptions({ lineSmooth: e.target.checked })" 
-          :checked="lineSmooth"
+          @update:value="value => updateOptions({ lineSmooth: value })" 
+          :value="lineSmooth"
         >使用平滑曲线</Checkbox>
       </div>
     </template>
     <div class="row" v-if="handleChartElement.chartType === 'bar'">
       <Checkbox 
-        @change="e => updateOptions({ horizontalBars: e.target.checked })" 
-        :checked="horizontalBars"
+        @update:value="value => updateOptions({ horizontalBars: value })" 
+        :value="horizontalBars"
+        style="flex: 1;"
       >条形图样式</Checkbox>
       <Checkbox 
-        @change="e => updateOptions({ stackBars: e.target.checked })" 
-        :checked="stackBars"
+        @update:value="value => updateOptions({ stackBars: value })" 
+        :value="stackBars"
+        style="flex: 1;"
       >堆叠样式</Checkbox>
     </div>
     <div class="row" v-if="handleChartElement.chartType === 'pie'">
       <Checkbox 
-        @change="e => updateOptions({ donut: e.target.checked })" 
-        :checked="donut"
+        @update:value="value => updateOptions({ donut: value })" 
+        :value="donut"
       >环形图样式</Checkbox>
     </div>
 
@@ -159,11 +161,11 @@ import ChartDataEditor from './ChartDataEditor.vue'
 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,
   Popover,
   Select,
-  Checkbox,
 } from 'ant-design-vue'
 const ButtonGroup = Button.Group
 const SelectOption = Select.Option
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index 680407a5..e5ea1f0f 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -83,7 +83,7 @@
           :max="360"
           :step="15"
           :value="gradient.rotate"
-          @change="value => updateGradient({ rotate: value as number })" 
+          @update:value="value => updateGradient({ rotate: value as number })" 
         />
       </div>
     </template>
@@ -259,10 +259,10 @@ 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,
   Popover,
-  Slider,
   Select,
   Radio,
   Input,
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index affcc6a8..857a4d0d 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -122,8 +122,8 @@
       <div style="flex: 2;">启用主题表格：</div>
       <div class="switch-wrapper" style="flex: 3;">
         <Switch 
-          :checked="hasTheme" 
-          @change="checked => toggleTheme(checked as boolean)" 
+          :value="hasTheme" 
+          @update:value="value => toggleTheme(value)" 
         />
       </div>
     </div>
@@ -131,25 +131,25 @@
     <template v-if="theme">
       <div class="row">
         <Checkbox 
-          @change="e => updateTheme({ rowHeader: e.target.checked })" 
-          :checked="theme.rowHeader" 
+          @update:value="value => updateTheme({ rowHeader: value })" 
+          :value="theme.rowHeader" 
           style="flex: 1;"
         >标题行</Checkbox>
         <Checkbox 
-          @change="e => updateTheme({ rowFooter: e.target.checked })" 
-          :checked="theme.rowFooter" 
+          @update:value="value => updateTheme({ rowFooter: value })" 
+          :value="theme.rowFooter" 
           style="flex: 1;"
         >汇总行</Checkbox>
       </div>
       <div class="row">
         <Checkbox 
-          @change="e => updateTheme({ colHeader: e.target.checked })" 
-          :checked="theme.colHeader" 
+          @update:value="value => updateTheme({ colHeader: value })" 
+          :value="theme.colHeader" 
           style="flex: 1;"
         >第一列</Checkbox>
         <Checkbox 
-          @change="e => updateTheme({ colFooter: e.target.checked })" 
-          :checked="theme.colFooter" 
+          @update:value="value => updateTheme({ colFooter: value })" 
+          :value="theme.colFooter" 
           style="flex: 1;"
         >最后一列</Checkbox>
       </div>
@@ -185,12 +185,12 @@ 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,
   Popover,
   Select,
-  Switch,
-  Checkbox,
   Radio,
   Input,
 } from 'ant-design-vue'
diff --git a/src/views/Editor/Toolbar/MultiPositionPanel.vue b/src/views/Editor/Toolbar/MultiPositionPanel.vue
index 8766a0f4..d3563ac9 100644
--- a/src/views/Editor/Toolbar/MultiPositionPanel.vue
+++ b/src/views/Editor/Toolbar/MultiPositionPanel.vue
@@ -32,9 +32,7 @@ import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useUniformDisplayElement from '@/hooks/useUniformDisplayElement'
 import Divider from '@/components/Divider.vue'
 
-import {
-  Button,
-} from 'ant-design-vue'
+import { Button } from 'ant-design-vue'
 const ButtonGroup = Button.Group
 
 const { canCombine, combineElements, uncombineElements } = useCombineElement()
diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue
index 634f3a02..a32a60b2 100644
--- a/src/views/Editor/Toolbar/SlideDesignPanel.vue
+++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue
@@ -87,8 +87,8 @@
           :min="0"
           :max="360"
           :step="15"
-          :value="background.gradientRotate"
-          @change="value => updateBackground({ gradientRotate: value as number })" 
+          :value="background.gradientRotate || 0"
+          @update:value="value => updateBackground({ gradientRotate: value as number })" 
         />
       </div>
     </div>
@@ -212,10 +212,10 @@ import ColorButton from './common/ColorButton.vue'
 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,
   Popover,
-  Slider,
   Select,
 } from 'ant-design-vue'
 const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
diff --git a/src/views/Editor/Toolbar/common/ElementColorMask.vue b/src/views/Editor/Toolbar/common/ElementColorMask.vue
index 9013b1e1..2b9e82cb 100644
--- a/src/views/Editor/Toolbar/common/ElementColorMask.vue
+++ b/src/views/Editor/Toolbar/common/ElementColorMask.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="element-color-mask">
     <div class="row">
-      <div style="flex: 1;">重新着色（蒙版）：</div>
+      <div style="flex: 1;">着色（蒙版）：</div>
       <div class="switch-wrapper" style="flex: 1;">
         <Switch 
-          :checked="hasColorMask" 
-          @change="checked => toggleColorMask(checked as boolean)" 
+          :value="hasColorMask" 
+          @update:value="value => toggleColorMask(value)" 
         />
       </div>
     </div>
@@ -30,7 +30,7 @@
           :min="0"
           :step="0.05"
           :value="colorMask.opacity"
-          @change="value => updateColorMask({ opacity: value as number })"
+          @update:value="value => updateColorMask({ opacity: value as number })"
         />
       </div>
     </template>
@@ -46,11 +46,9 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from './ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
-import {
-  Popover,
-  Slider,
-  Switch,
-} from 'ant-design-vue'
+import Switch from '@/components/Switch.vue'
+import Slider from '@/components/Slider.vue'
+import { Popover } from 'ant-design-vue'
 
 const defaultColorMask = { color: 'transparent', opacity: 0.3 }
 
diff --git a/src/views/Editor/Toolbar/common/ElementFilter.vue b/src/views/Editor/Toolbar/common/ElementFilter.vue
index 9d1c4b2c..075cbcbc 100644
--- a/src/views/Editor/Toolbar/common/ElementFilter.vue
+++ b/src/views/Editor/Toolbar/common/ElementFilter.vue
@@ -4,8 +4,8 @@
       <div style="flex: 2;">启用滤镜：</div>
       <div class="switch-wrapper" style="flex: 3;">
         <Switch 
-          :checked="hasFilters" 
-          @change="checked => toggleFilters(checked as boolean)" 
+          :value="hasFilters" 
+          @update:value="value => toggleFilters(value)" 
         />
       </div>
     </div>
@@ -18,7 +18,7 @@
           :min="0"
           :step="filter.step"
           :value="filter.value"
-          @change="value => updateFilter(filter, value as number)"
+          @update:value="value => updateFilter(filter, value as number)"
         />
       </div>
     </div>
@@ -32,7 +32,8 @@ import { useMainStore, useSlidesStore } from '@/store'
 import type { ImageElementFilterKeys, PPTImageElement } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-import { Slider, Switch } from 'ant-design-vue'
+import Switch from '@/components/Switch.vue'
+import Slider from '@/components/Slider.vue'
 
 interface FilterOption {
   label: string
@@ -116,7 +117,7 @@ const toggleFilters = (checked: boolean) => {
   font-size: 12px;
 }
 .filter-item {
-  padding: 8px 0;
+  padding: 6px 0;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/views/Editor/Toolbar/common/ElementOpacity.vue b/src/views/Editor/Toolbar/common/ElementOpacity.vue
index 09155096..bdb01ff5 100644
--- a/src/views/Editor/Toolbar/common/ElementOpacity.vue
+++ b/src/views/Editor/Toolbar/common/ElementOpacity.vue
@@ -8,7 +8,7 @@
         :max="1"
         :step="0.1"
         :value="opacity"
-        @change="value => updateOpacity(value as number)" 
+        @update:value="value => updateOpacity(value as number)" 
       />
     </div>
   </div>
@@ -19,8 +19,7 @@ import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
-
-import { Slider } from 'ant-design-vue'
+import Slider from '@/components/Slider.vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/common/ElementOutline.vue b/src/views/Editor/Toolbar/common/ElementOutline.vue
index 0e5356a3..3e56fee5 100644
--- a/src/views/Editor/Toolbar/common/ElementOutline.vue
+++ b/src/views/Editor/Toolbar/common/ElementOutline.vue
@@ -4,8 +4,8 @@
       <div style="flex: 2;">启用边框：</div>
       <div class="switch-wrapper" style="flex: 3;">
         <Switch 
-          :checked="hasOutline" 
-          @change="checked => toggleOutline(checked as boolean)" 
+          :value="hasOutline" 
+          @update:value="value => toggleOutline(value)" 
         />
       </div>
     </div>
@@ -54,11 +54,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from './ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
+import Switch from '@/components/Switch.vue'
 import {
   InputNumber,
   Popover,
   Select,
-  Switch,
 } from 'ant-design-vue'
 const SelectOption = Select.Option
 
diff --git a/src/views/Editor/Toolbar/common/ElementShadow.vue b/src/views/Editor/Toolbar/common/ElementShadow.vue
index 574cdcba..b9a40600 100644
--- a/src/views/Editor/Toolbar/common/ElementShadow.vue
+++ b/src/views/Editor/Toolbar/common/ElementShadow.vue
@@ -3,7 +3,7 @@
     <div class="row">
       <div style="flex: 2;">启用阴影：</div>
       <div class="switch-wrapper" style="flex: 3;">
-        <Switch :checked="hasShadow" @change="checked => toggleShadow(checked as boolean)" />
+        <Switch :value="hasShadow" @update:value="value => toggleShadow(value)" />
       </div>
     </div>
     <template v-if="hasShadow && shadow">
@@ -15,7 +15,7 @@
           :max="10" 
           :step="1" 
           :value="shadow.h" 
-          @change="value => updateShadow({ h: value as number })"
+          @update:value="value => updateShadow({ h: value as number })"
         />
       </div>
       <div class="row">
@@ -26,7 +26,7 @@
           :max="10"
           :step="1"
           :value="shadow.v"
-          @change="value => updateShadow({ v: value as number })"
+          @update:value="value => updateShadow({ v: value as number })"
         />
       </div>
       <div class="row">
@@ -37,7 +37,7 @@
           :max="20"
           :step="1"
           :value="shadow.blur"
-          @change="value => updateShadow({ blur: value as number })"
+          @update:value="value => updateShadow({ blur: value as number })"
         />
       </div>
       <div class="row">
@@ -65,11 +65,9 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from './ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
-import {
-  Popover,
-  Slider,
-  Switch,
-} from 'ant-design-vue'
+import Switch from '@/components/Switch.vue'
+import Slider from '@/components/Slider.vue'
+import { Popover } from 'ant-design-vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index 39a6eeda..f795931c 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -94,10 +94,8 @@ import { db } from '@/utils/database'
 
 import WritingBoard from '@/components/WritingBoard.vue'
 import MoveablePanel from '@/components/MoveablePanel.vue'
-import {
-  Popover,
-  Slider,
-} from 'ant-design-vue'
+import Slider from '@/components/Slider.vue'
+import { Popover } from 'ant-design-vue'
 
 const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c', '#ffff3a']