From 74c3248045b221ed8713492a041fec744f26d770 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 16 Jul 2023 16:02:03 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=20defineProps=20?=
 =?UTF-8?q?=E8=AF=AD=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CheckboxButton.vue             |  9 ++-
 src/components/ColorPicker/Alpha.vue          | 11 ++--
 src/components/ColorPicker/Checkboard.vue     | 21 +++----
 src/components/ColorPicker/EditableInput.vue  | 11 ++--
 src/components/ColorPicker/Hue.vue            | 16 ++----
 src/components/ColorPicker/Saturation.vue     | 16 ++----
 src/components/ColorPicker/index.vue          |  9 ++-
 src/components/Contextmenu/MenuContent.vue    | 15 ++---
 src/components/Contextmenu/index.vue          | 26 +++------
 src/components/FileInput.vue                  | 10 ++--
 src/components/FullscreenSpin.vue             | 15 ++---
 src/components/LaTeXEditor/FormulaContent.vue | 19 ++-----
 src/components/LaTeXEditor/SymbolContent.vue  |  9 +--
 src/components/LaTeXEditor/index.vue          |  9 ++-
 src/components/MoveablePanel.vue              | 37 ++++--------
 src/components/WritingBoard.vue               | 41 +++++---------
 src/views/Editor/Canvas/AlignmentLine.vue     | 26 +++------
 src/views/Editor/Canvas/EditableElement.vue   | 31 +++-------
 src/views/Editor/Canvas/MouseSelection.vue    | 32 +++--------
 .../Editor/Canvas/Operate/BorderLine.vue      | 15 ++---
 .../Canvas/Operate/CommonElementOperate.vue   | 26 +++------
 .../Canvas/Operate/ImageElementOperate.vue    | 26 +++------
 .../Canvas/Operate/LineElementOperate.vue     | 21 ++-----
 .../Editor/Canvas/Operate/LinkHandler.vue     | 21 ++-----
 .../Canvas/Operate/MultiSelectOperate.vue     | 16 ++----
 .../Editor/Canvas/Operate/ResizeHandler.vue   | 16 ++----
 .../Canvas/Operate/ShapeElementOperate.vue    | 31 +++-------
 .../Canvas/Operate/TableElementOperate.vue    | 26 +++------
 .../Canvas/Operate/TextElementOperate.vue     | 26 +++------
 src/views/Editor/Canvas/Operate/index.vue     | 56 +++++--------------
 src/views/Editor/Canvas/Ruler.vue             | 11 ++--
 .../Editor/CanvasTool/ShapeItemThumbnail.vue  | 10 +---
 src/views/Editor/Remark/index.vue             |  9 +--
 .../ChartStylePanel/ChartDataEditor.vue       | 11 ++--
 .../Editor/Toolbar/common/ColorButton.vue     |  9 +--
 .../Editor/Toolbar/common/ElementOutline.vue  |  9 ++-
 .../Editor/Toolbar/common/TextColorButton.vue |  9 +--
 src/views/Mobile/MobileEditor/Header.vue      | 10 +---
 .../MobileEditor/MobileEditableElement.vue    | 21 ++-----
 .../Mobile/MobileEditor/MobileOperate.vue     | 26 +++------
 src/views/Mobile/MobileEditor/index.vue       | 11 ++--
 src/views/Mobile/MobilePlayer.vue             | 11 ++--
 src/views/Mobile/MobilePreview.vue            | 11 ++--
 src/views/Screen/BaseView.vue                 | 11 ++--
 src/views/Screen/CountdownTimer.vue           | 15 ++---
 src/views/Screen/PresenterView.vue            | 11 ++--
 src/views/Screen/ScreenElement.vue            | 31 +++-------
 src/views/Screen/ScreenSlide.vue              | 31 +++-------
 src/views/Screen/ScreenSlideList.vue          | 31 +++-------
 src/views/Screen/SlideThumbnails.vue          | 10 +---
 src/views/Screen/WritingBoardTool.vue         | 25 +++------
 .../ThumbnailSlide/ThumbnailElement.vue       | 16 ++----
 src/views/components/ThumbnailSlide/index.vue | 21 +++----
 .../element/AudioElement/AudioPlayer.vue      | 25 +++------
 .../element/AudioElement/BaseAudioElement.vue | 11 ++--
 .../AudioElement/ScreenAudioElement.vue       | 11 ++--
 .../components/element/AudioElement/index.vue | 20 ++-----
 .../element/ChartElement/BaseChartElement.vue | 11 ++--
 .../components/element/ChartElement/Chart.vue | 48 ++++------------
 .../ChartElement/ScreenChartElement.vue       | 10 +---
 .../components/element/ChartElement/index.vue | 19 ++-----
 .../components/element/ElementOutline.vue     | 20 ++-----
 .../element/ImageElement/BaseImageElement.vue | 11 ++--
 .../element/ImageElement/ImageClipHandler.vue | 45 ++++-----------
 .../ImageOutline/ImageEllipseOutline.vue      | 20 ++-----
 .../ImageOutline/ImagePolygonOutline.vue      | 25 +++------
 .../ImageOutline/ImageRectOutline.vue         | 25 +++------
 .../ImageElement/ImageOutline/index.vue       | 11 ++--
 .../components/element/ImageElement/index.vue | 20 ++-----
 .../element/LatexElement/BaseLatexElement.vue | 10 +---
 .../components/element/LatexElement/index.vue | 19 ++-----
 .../element/LineElement/BaseLineElement.vue   | 11 ++--
 .../element/LineElement/LinePointMarker.vue   | 30 +++-------
 .../components/element/LineElement/index.vue  | 20 ++-----
 .../components/element/ProsemirrorEditor.vue  | 35 ++++--------
 .../element/ShapeElement/BaseShapeElement.vue | 11 ++--
 .../element/ShapeElement/GradientDefs.vue     | 30 +++-------
 .../components/element/ShapeElement/index.vue | 20 ++-----
 .../element/TableElement/BaseTableElement.vue | 10 +---
 .../element/TableElement/CustomTextarea.vue   |  9 ++-
 .../element/TableElement/EditableTable.vue    | 40 ++++---------
 .../element/TableElement/StaticTable.vue      | 40 ++++---------
 .../components/element/TableElement/index.vue | 20 ++-----
 .../element/TextElement/BaseTextElement.vue   | 11 ++--
 .../components/element/TextElement/index.vue  | 20 ++-----
 .../element/VideoElement/BaseVideoElement.vue | 10 +---
 .../VideoElement/ScreenVideoElement.vue       | 11 ++--
 .../VideoElement/VideoPlayer/index.vue        | 30 +++-------
 .../components/element/VideoElement/index.vue | 19 ++-----
 89 files changed, 524 insertions(+), 1217 deletions(-)

diff --git a/src/components/CheckboxButton.vue b/src/components/CheckboxButton.vue
index 7cc160c8..97da8d1e 100644
--- a/src/components/CheckboxButton.vue
+++ b/src/components/CheckboxButton.vue
@@ -5,11 +5,10 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  checked: {
-    type: Boolean,
-    default: false,
-  },
+withDefaults(defineProps<{
+  checked?: boolean
+}>(), {
+  checked: false,
 })
 </script>
 
diff --git a/src/components/ColorPicker/Alpha.vue b/src/components/ColorPicker/Alpha.vue
index 8817e287..6856c6b6 100644
--- a/src/components/ColorPicker/Alpha.vue
+++ b/src/components/ColorPicker/Alpha.vue
@@ -17,17 +17,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onUnmounted, PropType, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 
 import Checkboard from './Checkboard.vue'
 import { ColorFormats } from 'tinycolor2'
 
-const props = defineProps({
-  value: {
-    type: Object as PropType<ColorFormats.RGBA>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  value: ColorFormats.RGBA
+}>()
 
 const emit = defineEmits<{
   (event: 'colorChange', payload: ColorFormats.RGBA): void
diff --git a/src/components/ColorPicker/Checkboard.vue b/src/components/ColorPicker/Checkboard.vue
index 64d8f213..461559e3 100644
--- a/src/components/ColorPicker/Checkboard.vue
+++ b/src/components/ColorPicker/Checkboard.vue
@@ -5,19 +5,14 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-const props = defineProps({
-  size: {
-    type: Number,
-    default: 8,
-  },
-  white: {
-    type: String,
-    default: '#fff',
-  },
-  grey: {
-    type: String,
-    default: '#e6e6e6',
-  },
+const props = withDefaults(defineProps<{
+  size?: number
+  white?: string
+  grey?: string
+}>(), {
+  size: 8,
+  white: '#fff',
+  grey: '#e6e6e6',
 })
 
 interface CheckboardCache {
diff --git a/src/components/ColorPicker/EditableInput.vue b/src/components/ColorPicker/EditableInput.vue
index 614a7363..cd34fd67 100644
--- a/src/components/ColorPicker/EditableInput.vue
+++ b/src/components/ColorPicker/EditableInput.vue
@@ -9,15 +9,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import tinycolor, { ColorFormats } from 'tinycolor2'
 
-const props = defineProps({
-  value: {
-    type: Object as PropType<ColorFormats.RGBA>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  value: ColorFormats.RGBA
+}>()
 
 const emit = defineEmits<{
   (event: 'colorChange', payload: ColorFormats.RGBA): void
diff --git a/src/components/ColorPicker/Hue.vue b/src/components/ColorPicker/Hue.vue
index c3d52a92..768f698e 100644
--- a/src/components/ColorPicker/Hue.vue
+++ b/src/components/ColorPicker/Hue.vue
@@ -16,19 +16,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onUnmounted, PropType, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import tinycolor, { ColorFormats } from 'tinycolor2'
 
-const props = defineProps({
-  value: {
-    type: Object as PropType<ColorFormats.RGBA>,
-    required: true,
-  },
-  hue: {
-    type: Number,
-    required: true,
-  },
-})
+const props = defineProps<{
+  value: ColorFormats.RGBA
+  hue: number
+}>()
 
 const emit = defineEmits<{
   (event: 'colorChange', payload: ColorFormats.HSLA): void
diff --git a/src/components/ColorPicker/Saturation.vue b/src/components/ColorPicker/Saturation.vue
index d9cacbec..3c7e0a8e 100644
--- a/src/components/ColorPicker/Saturation.vue
+++ b/src/components/ColorPicker/Saturation.vue
@@ -19,20 +19,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onUnmounted, PropType, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import tinycolor, { ColorFormats } from 'tinycolor2'
 import { throttle, clamp } from 'lodash'
 
-const props = defineProps({
-  value: {
-    type: Object as PropType<ColorFormats.RGBA>,
-    required: true,
-  },
-  hue: {
-    type: Number,
-    required: true,
-  },
-})
+const props = defineProps<{
+  value: ColorFormats.RGBA
+  hue: number
+}>()
 
 const emit = defineEmits<{
   (event: 'colorChange', payload: ColorFormats.HSVA): void
diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index 1b5588a1..93012c45 100644
--- a/src/components/ColorPicker/index.vue
+++ b/src/components/ColorPicker/index.vue
@@ -89,11 +89,10 @@ import EditableInput from './EditableInput.vue'
 
 import { message } from 'ant-design-vue'
 
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '#e86b99',
-  },
+const props = withDefaults(defineProps<{
+  modelValue?: string
+}>(), {
+  modelValue: '#e86b99',
 })
 
 const emit = defineEmits<{
diff --git a/src/components/Contextmenu/MenuContent.vue b/src/components/Contextmenu/MenuContent.vue
index d2d0c514..530cb848 100644
--- a/src/components/Contextmenu/MenuContent.vue
+++ b/src/components/Contextmenu/MenuContent.vue
@@ -31,19 +31,12 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { ContextmenuItem } from './types'
 
-defineProps({
-  menus: {
-    type: Array as PropType<ContextmenuItem[]>,
-    required: true,
-  },
-  handleClickMenuItem: {
-    type: Function,
-    required: true,
-  },
-})
+defineProps<{
+  menus: ContextmenuItem[]
+  handleClickMenuItem: (item: ContextmenuItem) => void
+}>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Contextmenu/index.vue b/src/components/Contextmenu/index.vue
index 64a517fb..0ac5dd83 100644
--- a/src/components/Contextmenu/index.vue
+++ b/src/components/Contextmenu/index.vue
@@ -21,29 +21,17 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { ContextmenuItem, Axis } from './types'
 
 import MenuContent from './MenuContent.vue'
 
-const props = defineProps({
-  axis: {
-    type: Object as PropType<Axis>,
-    required: true,
-  },
-  el: {
-    type: Object as PropType<HTMLElement>,
-    required: true,
-  },
-  menus: {
-    type: Array as PropType<ContextmenuItem[]>,
-    required: true,
-  },
-  removeContextmenu: {
-    type: Function,
-    required: true,
-  },
-})
+const props = defineProps<{
+  axis: Axis
+  el: HTMLElement
+  menus: ContextmenuItem[]
+  removeContextmenu: () => void
+}>()
 
 const style = computed(() => {
   const MENU_WIDTH = 170
diff --git a/src/components/FileInput.vue b/src/components/FileInput.vue
index c49ab10d..9be9204a 100644
--- a/src/components/FileInput.vue
+++ b/src/components/FileInput.vue
@@ -14,12 +14,10 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-
-defineProps({
-  accept: {
-    type: String,
-    default: 'image/*',
-  },
+withDefaults(defineProps<{
+  accept?: string
+}>(), {
+  accept: 'image/*',
 })
 
 const emit = defineEmits<{
diff --git a/src/components/FullscreenSpin.vue b/src/components/FullscreenSpin.vue
index 062f8198..020810dc 100644
--- a/src/components/FullscreenSpin.vue
+++ b/src/components/FullscreenSpin.vue
@@ -8,15 +8,12 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  tip: {
-    type: String,
-    default: '',
-  },
+withDefaults(defineProps<{
+  loading?: boolean
+  tip?: string
+}>(), {
+  loading: false,
+  tip: '',
 })
 </script>
 
diff --git a/src/components/LaTeXEditor/FormulaContent.vue b/src/components/LaTeXEditor/FormulaContent.vue
index 9e5e3aaa..6b87e1e8 100644
--- a/src/components/LaTeXEditor/FormulaContent.vue
+++ b/src/components/LaTeXEditor/FormulaContent.vue
@@ -23,20 +23,11 @@
 import { computed, ref, watch } from 'vue'
 import { hfmath } from './hfmath'
 
-const props = defineProps({
-  latex: {
-    type: String,
-    required: true,
-  },
-  width: {
-    type: Number,
-    required: true,
-  },
-  height: {
-    type: Number,
-    required: true,
-  },
-})
+const props = defineProps<{
+  latex: string
+  width: number
+  height: number
+}>()
 
 const box = ref({ x: 0, y: 0, w: 0, h: 0 })
 const pathd = ref('')
diff --git a/src/components/LaTeXEditor/SymbolContent.vue b/src/components/LaTeXEditor/SymbolContent.vue
index 45a419f4..96e86a21 100644
--- a/src/components/LaTeXEditor/SymbolContent.vue
+++ b/src/components/LaTeXEditor/SymbolContent.vue
@@ -6,12 +6,9 @@
 import { computed } from 'vue'
 import { hfmath } from './hfmath'
 
-const props = defineProps({
-  latex: {
-    type: String,
-    required: true,
-  },
-})
+const props = defineProps<{
+  latex: string
+}>()
 
 const svg = computed(() => {
   const eq = new hfmath(props.latex)
diff --git a/src/components/LaTeXEditor/index.vue b/src/components/LaTeXEditor/index.vue
index 6c25f4ff..3e578a8d 100644
--- a/src/components/LaTeXEditor/index.vue
+++ b/src/components/LaTeXEditor/index.vue
@@ -97,11 +97,10 @@ interface LatexResult {
   h: number
 }
 
-const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
+const props = withDefaults(defineProps<{
+  value?: string
+}>(), {
+  value: '',
 })
 
 const emit = defineEmits<{
diff --git a/src/components/MoveablePanel.vue b/src/components/MoveablePanel.vue
index f55f49b5..64f375ff 100644
--- a/src/components/MoveablePanel.vue
+++ b/src/components/MoveablePanel.vue
@@ -28,31 +28,18 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
 
-const props = defineProps({
-  width: {
-    type: Number,
-    required: true,
-  },
-  height: {
-    type: Number,
-    required: true,
-  },
-  left: {
-    type: Number,
-    default: 10,
-  },
-  top: {
-    type: Number,
-    default: 10,
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  moveable: {
-    type: Boolean,
-    default: true,
-  },
+const props = withDefaults(defineProps<{
+  width: number
+  height: number
+  left?: number
+  top?: number
+  title?: string
+  moveable?: boolean
+}>(), {
+  left: 10,
+  top: 10,
+  title: '',
+  moveable: true,
 })
 
 const emit = defineEmits<{
diff --git a/src/components/WritingBoard.vue b/src/components/WritingBoard.vue
index 141690f6..8e737c78 100644
--- a/src/components/WritingBoard.vue
+++ b/src/components/WritingBoard.vue
@@ -55,33 +55,22 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-const props = defineProps({
-  color: {
-    type: String,
-    default: '#ffcc00',
-  },
-  model: {
-    type: String as PropType<'pen' | 'eraser' | 'mark'>,
-    default: 'pen',
-  },
-  blackboard: {
-    type: Boolean,
-    default: false,
-  },
-  penSize: {
-    type: Number,
-    default: 6,
-  },
-  markSize: {
-    type: Number,
-    default: 24,
-  },
-  rubberSize: {
-    type: Number,
-    default: 80,
-  },
+const props = withDefaults(defineProps<{
+  color?: string
+  model?: 'pen' | 'eraser' | 'mark'
+  blackboard?: boolean
+  penSize?: number
+  markSize?: number
+  rubberSize?: number
+}>(), {
+  color: '#ffcc00',
+  model: 'pen',
+  blackboard: false,
+  penSize: 6,
+  markSize: 24,
+  rubberSize: 80,
 })
 
 const emit = defineEmits<{
diff --git a/src/views/Editor/Canvas/AlignmentLine.vue b/src/views/Editor/Canvas/AlignmentLine.vue
index 422dd57a..3d622a2e 100644
--- a/src/views/Editor/Canvas/AlignmentLine.vue
+++ b/src/views/Editor/Canvas/AlignmentLine.vue
@@ -5,27 +5,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { AlignmentLineAxis } from '@/types/edit'
 
-const props = defineProps({
-  type: {
-    type: String as PropType<'vertical' | 'horizontal'>,
-    required: true,
-  },
-  axis: {
-    type: Object as PropType<AlignmentLineAxis>,
-    required: true,
-  },
-  length: {
-    type: Number,
-    required: true,
-  },
-  canvasScale: {
-    type: Number,
-    required: true,
-  },
-})
+const props = defineProps<{
+  type: 'vertical' | 'horizontal'
+  axis: AlignmentLineAxis
+  length: number
+  canvasScale: number
+}>()
 
 // 吸附对齐线的位置
 const left = computed(() => props.axis.x * props.canvasScale + 'px')
diff --git a/src/views/Editor/Canvas/EditableElement.vue b/src/views/Editor/Canvas/EditableElement.vue
index a2430f2e..72a2b53d 100644
--- a/src/views/Editor/Canvas/EditableElement.vue
+++ b/src/views/Editor/Canvas/EditableElement.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { ElementTypes, PPTElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 
@@ -41,28 +41,13 @@ import LatexElement from '@/views/components/element/LatexElement/index.vue'
 import VideoElement from '@/views/components/element/VideoElement/index.vue'
 import AudioElement from '@/views/components/element/AudioElement/index.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTElement>,
-    required: true,
-  },
-  elementIndex: {
-    type: Number,
-    required: true,
-  },
-  isMultiSelect: {
-    type: Boolean,
-    required: true,
-  },
-  selectElement: {
-    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTElement, canMove?: boolean) => void>,
-    required: true,
-  },
-  openLinkDialog: {
-    type: Function as PropType<() => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTElement
+  elementIndex: number
+  isMultiSelect: boolean
+  selectElement: (e: MouseEvent | TouchEvent, element: PPTElement, canMove?: boolean) => void
+  openLinkDialog: () => void
+}>()
 
 const currentElementComponent = computed<unknown>(() => {
   const elementTypeMap = {
diff --git a/src/views/Editor/Canvas/MouseSelection.vue b/src/views/Editor/Canvas/MouseSelection.vue
index 71902ede..065747df 100644
--- a/src/views/Editor/Canvas/MouseSelection.vue
+++ b/src/views/Editor/Canvas/MouseSelection.vue
@@ -10,31 +10,13 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  top: {
-    type: Number,
-    required: true,
-  },
-  left: {
-    type: Number,
-    required: true,
-  },
-  width: {
-    type: Number,
-    required: true,
-  },
-  height: {
-    type: Number,
-    required: true,
-  },
-  quadrant: {
-    type: Number,
-    required: true,
-    validator(value: number) {
-      return [1, 2, 3, 4].includes(value)
-    },
-  },
-})
+defineProps<{
+  top: number
+  left: number
+  width: number
+  height: number
+  quadrant: 1 | 2 | 3 | 4
+}>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/Operate/BorderLine.vue b/src/views/Editor/Canvas/Operate/BorderLine.vue
index bf585f5a..ae4a4b27 100644
--- a/src/views/Editor/Canvas/Operate/BorderLine.vue
+++ b/src/views/Editor/Canvas/Operate/BorderLine.vue
@@ -3,18 +3,13 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { OperateBorderLines } from '@/types/edit'
 
-defineProps({
-  type: {
-    type: String as PropType<OperateBorderLines>,
-    required: true,
-  },
-  isWide: {
-    type: Boolean,
-    default: false,
-  },
+withDefaults(defineProps<{
+  type: OperateBorderLines
+  isWide?: boolean
+}>(), {
+  isWide: false
 })
 </script>
 
diff --git a/src/views/Editor/Canvas/Operate/CommonElementOperate.vue b/src/views/Editor/Canvas/Operate/CommonElementOperate.vue
index fc288292..1820e39b 100644
--- a/src/views/Editor/Canvas/Operate/CommonElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/CommonElementOperate.vue
@@ -34,7 +34,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTShapeElement, PPTVideoElement, PPTLatexElement, PPTAudioElement } from '@/types/slides'
@@ -47,24 +47,12 @@ import BorderLine from './BorderLine.vue'
 
 type PPTElement = PPTShapeElement | PPTVideoElement | PPTLatexElement | PPTAudioElement
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTElement>,
-    required: true,
-  },
-  handlerVisible: {
-    type: Boolean,
-    required: true,
-  },
-  rotateElement: {
-    type: Function as PropType<(element: PPTElement) => void>,
-    required: true,
-  },
-  scaleElement: {
-    type: Function as PropType<(e: MouseEvent, element: PPTElement, command: OperateResizeHandlers) => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTElement
+  handlerVisible: boolean
+  rotateElement: (element: PPTElement) => void
+  scaleElement: (e: MouseEvent, element: PPTElement, command: OperateResizeHandlers) => void
+}>()
 
 const { canvasScale } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue b/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
index 4c8e4874..949e973d 100644
--- a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
@@ -33,7 +33,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTImageElement } from '@/types/slides'
@@ -44,24 +44,12 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTImageElement>,
-    required: true,
-  },
-  handlerVisible: {
-    type: Boolean,
-    required: true,
-  },
-  rotateElement: {
-    type: Function as PropType<(element: PPTImageElement) => void>,
-    required: true,
-  },
-  scaleElement: {
-    type: Function as PropType<(e: MouseEvent, element: PPTImageElement, command: OperateResizeHandlers) => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTImageElement
+  handlerVisible: boolean
+  rotateElement: (element: PPTImageElement) => void
+  scaleElement: (e: MouseEvent, element: PPTImageElement, command: OperateResizeHandlers) => void
+}>()
 
 const { canvasScale, clipingImageElementId } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/Canvas/Operate/LineElementOperate.vue b/src/views/Editor/Canvas/Operate/LineElementOperate.vue
index 65707a4f..a621d6df 100644
--- a/src/views/Editor/Canvas/Operate/LineElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/LineElementOperate.vue
@@ -40,7 +40,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTLineElement } from '@/types/slides'
@@ -48,20 +48,11 @@ import { OperateLineHandlers } from '@/types/edit'
 
 import ResizeHandler from './ResizeHandler.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTLineElement>,
-    required: true,
-  },
-  handlerVisible: {
-    type: Boolean,
-    required: true,
-  },
-  dragLineElement: {
-    type: Function as PropType<(e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTLineElement
+  handlerVisible: boolean
+  dragLineElement: (e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void
+}>()
 
 const { canvasScale } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/Canvas/Operate/LinkHandler.vue b/src/views/Editor/Canvas/Operate/LinkHandler.vue
index cfde85e1..48d69970 100644
--- a/src/views/Editor/Canvas/Operate/LinkHandler.vue
+++ b/src/views/Editor/Canvas/Operate/LinkHandler.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElement, PPTElementLink } from '@/types/slides'
@@ -19,20 +19,11 @@ import useLink from '@/hooks/useLink'
 
 import { Divider } from 'ant-design-vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTElement>,
-    required: true,
-  },
-  link: {
-    type: Object as PropType<PPTElementLink>,
-    required: true,
-  },
-  openLinkDialog: {
-    type: Function as PropType<() => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTElement
+  link: PPTElementLink
+  openLinkDialog: () => void
+}>()
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
diff --git a/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue b/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
index ce09c760..66ed3d9b 100644
--- a/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
+++ b/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, PropType, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTElement } from '@/types/slides'
@@ -32,16 +32,10 @@ import useCommonOperate from '../hooks/useCommonOperate'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-const props = defineProps({
-  elementList: {
-    type: Array as PropType<PPTElement[]>,
-    required: true,
-  },
-  scaleMultiElement: {
-    type: Function as PropType<(e: MouseEvent, range: MultiSelectRange, command: OperateResizeHandlers) => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementList: PPTElement[]
+  scaleMultiElement: (e: MouseEvent, range: MultiSelectRange, command: OperateResizeHandlers) => void
+}>()
 
 const { activeElementIdList, canvasScale } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/Canvas/Operate/ResizeHandler.vue b/src/views/Editor/Canvas/Operate/ResizeHandler.vue
index e4614cff..df797f07 100644
--- a/src/views/Editor/Canvas/Operate/ResizeHandler.vue
+++ b/src/views/Editor/Canvas/Operate/ResizeHandler.vue
@@ -3,18 +3,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { OperateResizeHandlers } from '@/types/edit'
 
-const props = defineProps({
-  type: {
-    type: String as PropType<OperateResizeHandlers>,
-    default: '',
-  },
-  rotate: {
-    type: Number,
-    default: 0,
-  },
+const props = withDefaults(defineProps<{
+  type: OperateResizeHandlers
+  rotate?: number
+}>(), {
+  rotate: 0,
 })
 
 const rotateClassName = computed(() => {
diff --git a/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue b/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
index 106e84a0..791db60c 100644
--- a/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
@@ -39,7 +39,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTShapeElement } from '@/types/slides'
@@ -51,28 +51,13 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTShapeElement>,
-    required: true,
-  },
-  handlerVisible: {
-    type: Boolean,
-    required: true,
-  },
-  rotateElement: {
-    type: Function as PropType<(element: PPTShapeElement) => void>,
-    required: true,
-  },
-  scaleElement: {
-    type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandlers) => void>,
-    required: true,
-  },
-  moveShapeKeypoint: {
-    type: Function as PropType<(e: MouseEvent, element: PPTShapeElement) => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTShapeElement
+  handlerVisible: boolean
+  rotateElement: (element: PPTShapeElement) => void
+  scaleElement: (e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandlers) => void
+  moveShapeKeypoint: (e: MouseEvent, element: PPTShapeElement) => void
+}>()
 
 const { canvasScale } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/Canvas/Operate/TableElementOperate.vue b/src/views/Editor/Canvas/Operate/TableElementOperate.vue
index 0487c236..8661e9b3 100644
--- a/src/views/Editor/Canvas/Operate/TableElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/TableElementOperate.vue
@@ -33,7 +33,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTTableElement } from '@/types/slides'
@@ -44,24 +44,12 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTTableElement>,
-    required: true,
-  },
-  handlerVisible: {
-    type: Boolean,
-    required: true,
-  },
-  rotateElement: {
-    type: Function as PropType<(element: PPTTableElement) => void>,
-    required: true,
-  },
-  scaleElement: {
-    type: Function as PropType<(e: MouseEvent, element: PPTTableElement, command: OperateResizeHandlers) => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTTableElement
+  handlerVisible: boolean
+  rotateElement: (element: PPTTableElement) => void
+  scaleElement: (e: MouseEvent, element: PPTTableElement, command: OperateResizeHandlers) => void
+}>()
 
 const { canvasScale } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/Canvas/Operate/TextElementOperate.vue b/src/views/Editor/Canvas/Operate/TextElementOperate.vue
index 38c169f8..dd6e18d7 100644
--- a/src/views/Editor/Canvas/Operate/TextElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/TextElementOperate.vue
@@ -33,7 +33,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTTextElement } from '@/types/slides'
@@ -44,24 +44,12 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTTextElement>,
-    required: true,
-  },
-  handlerVisible: {
-    type: Boolean,
-    required: true,
-  },
-  rotateElement: {
-    type: Function as PropType<(element: PPTTextElement) => void>,
-    required: true,
-  },
-  scaleElement: {
-    type: Function as PropType<(e: MouseEvent, element: PPTTextElement, command: OperateResizeHandlers) => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTTextElement
+  handlerVisible: boolean
+  rotateElement: (element: PPTTextElement) => void
+  scaleElement: (e: MouseEvent, element: PPTTextElement, command: OperateResizeHandlers) => void
+}>()
 
 const { canvasScale } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/Canvas/Operate/index.vue b/src/views/Editor/Canvas/Operate/index.vue
index 52fa9148..6877dcd3 100644
--- a/src/views/Editor/Canvas/Operate/index.vue
+++ b/src/views/Editor/Canvas/Operate/index.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, computed } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { ElementTypes, PPTElement, PPTLineElement, PPTVideoElement, PPTAudioElement, PPTShapeElement } from '@/types/slides'
@@ -52,48 +52,18 @@ import TableElementOperate from './TableElementOperate.vue'
 import CommonElementOperate from './CommonElementOperate.vue'
 import LinkHandler from './LinkHandler.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTElement>,
-    required: true,
-  },
-  isSelected: {
-    type: Boolean,
-    required: true,
-  },
-  isActive: {
-    type: Boolean,
-    required: true,
-  },
-  isActiveGroupElement: {
-    type: Boolean,
-    required: true,
-  },
-  isMultiSelect: {
-    type: Boolean,
-    required: true,
-  },
-  rotateElement: {
-    type: Function as PropType<(element: Exclude<PPTElement, PPTLineElement | PPTVideoElement | PPTAudioElement>) => void>,
-    required: true,
-  },
-  scaleElement: {
-    type: Function as PropType<(e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void>,
-    required: true,
-  },
-  dragLineElement: {
-    type: Function as PropType<(e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void>,
-    required: true,
-  },
-  moveShapeKeypoint: {
-    type: Function as PropType<(e: MouseEvent, element: PPTShapeElement) => void>,
-    required: true,
-  },
-  openLinkDialog: {
-    type: Function as PropType<() => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTElement
+  isSelected: boolean
+  isActive: boolean
+  isActiveGroupElement: boolean
+  isMultiSelect: boolean
+  rotateElement: (element: Exclude<PPTElement, PPTLineElement | PPTVideoElement | PPTAudioElement>) => void
+  scaleElement: (e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void
+  dragLineElement: (e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void
+  moveShapeKeypoint: (e: MouseEvent, element: PPTShapeElement) => void
+  openLinkDialog: () => void
+}>()
 
 const { canvasScale, toolbarState } = storeToRefs(useMainStore())
 const { formatedAnimations } = storeToRefs(useSlidesStore())
diff --git a/src/views/Editor/Canvas/Ruler.vue b/src/views/Editor/Canvas/Ruler.vue
index 5ac69f03..3d7b636c 100644
--- a/src/views/Editor/Canvas/Ruler.vue
+++ b/src/views/Editor/Canvas/Ruler.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 
@@ -48,12 +48,9 @@ interface ViewportStyles {
   height: number
 }
 
-const props = defineProps({
-  viewportStyles: {
-    type: Object as PropType<ViewportStyles>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  viewportStyles: ViewportStyles
+}>()
 
 const { canvasScale } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/CanvasTool/ShapeItemThumbnail.vue b/src/views/Editor/CanvasTool/ShapeItemThumbnail.vue
index 4d897c9e..f840629c 100644
--- a/src/views/Editor/CanvasTool/ShapeItemThumbnail.vue
+++ b/src/views/Editor/CanvasTool/ShapeItemThumbnail.vue
@@ -27,15 +27,11 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { ShapePoolItem } from '@/configs/shapes'
 
-defineProps({
-  shape: {
-    type: Object as PropType<ShapePoolItem>,
-    required: true,
-  },
-})
+defineProps<{
+  shape: ShapePoolItem
+}>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Remark/index.vue b/src/views/Editor/Remark/index.vue
index aa494058..eb0bf3ee 100644
--- a/src/views/Editor/Remark/index.vue
+++ b/src/views/Editor/Remark/index.vue
@@ -17,12 +17,9 @@ import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 
-const props = defineProps({
-  height: {
-    type: Number,
-    required: true,
-  },
-})
+const props = defineProps<{
+  height: number
+}>()
 
 const emit = defineEmits<{
   (event: 'update:height', payload: number): void
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
index 0c1edcb7..dd019c2c 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
@@ -55,19 +55,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, PropType, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { ChartData } from '@/types/slides'
 import { KEYS } from '@/configs/hotkey'
 import { pasteCustomClipboardString, pasteExcelClipboardString } from '@/utils/clipboard'
 
 import { Button } from 'ant-design-vue'
 
-const props = defineProps({
-  data: {
-    type: Object as PropType<ChartData>,
-    required: true,
-  }
-})
+const props = defineProps<{
+  data: ChartData
+}>()
 
 const emit = defineEmits<{
   (event: 'save', payload: ChartData): void
diff --git a/src/views/Editor/Toolbar/common/ColorButton.vue b/src/views/Editor/Toolbar/common/ColorButton.vue
index 3da4509d..66bd5250 100644
--- a/src/views/Editor/Toolbar/common/ColorButton.vue
+++ b/src/views/Editor/Toolbar/common/ColorButton.vue
@@ -10,12 +10,9 @@
 <script lang="ts" setup>
 import { Button } from 'ant-design-vue'
 
-defineProps({
-  color: {
-    type: String,
-    required: true,
-  },
-})
+defineProps<{
+  color: string
+}>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/common/ElementOutline.vue b/src/views/Editor/Toolbar/common/ElementOutline.vue
index f10d5e92..c602b7aa 100644
--- a/src/views/Editor/Toolbar/common/ElementOutline.vue
+++ b/src/views/Editor/Toolbar/common/ElementOutline.vue
@@ -62,11 +62,10 @@ import {
 } from 'ant-design-vue'
 const SelectOption = Select.Option
 
-defineProps({
-  fixed: {
-    type: Boolean,
-    default: false,
-  },
+withDefaults(defineProps<{
+  fixed?: boolean
+}>(), {
+  fixed: false,
 })
 
 const slidesStore = useSlidesStore()
diff --git a/src/views/Editor/Toolbar/common/TextColorButton.vue b/src/views/Editor/Toolbar/common/TextColorButton.vue
index 7055a24d..9c8bbee9 100644
--- a/src/views/Editor/Toolbar/common/TextColorButton.vue
+++ b/src/views/Editor/Toolbar/common/TextColorButton.vue
@@ -10,12 +10,9 @@
 <script lang="ts" setup>
 import { Button } from 'ant-design-vue'
 
-defineProps({
-  color: {
-    type: String,
-    required: true,
-  },
-})
+defineProps<{
+  color: string
+}>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Mobile/MobileEditor/Header.vue b/src/views/Mobile/MobileEditor/Header.vue
index 59b1aacd..7ea3e331 100644
--- a/src/views/Mobile/MobileEditor/Header.vue
+++ b/src/views/Mobile/MobileEditor/Header.vue
@@ -9,18 +9,14 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSnapshotStore } from '@/store'
 import { Mode } from '@/types/mobile'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-defineProps({
-  changeMode: {
-    type: Function as PropType<(mode: Mode) => void>,
-    required: true,
-  },
-})
+defineProps<{
+  changeMode: (mode: Mode) => void
+}>()
 
 const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
 const { redo, undo } = useHistorySnapshot()
diff --git a/src/views/Mobile/MobileEditor/MobileEditableElement.vue b/src/views/Mobile/MobileEditor/MobileEditableElement.vue
index 46e57c7e..399d5fc9 100644
--- a/src/views/Mobile/MobileEditor/MobileEditableElement.vue
+++ b/src/views/Mobile/MobileEditor/MobileEditableElement.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { ElementTypes, PPTElement } from '@/types/slides'
 
 import ImageElement from '@/views/components/element/ImageElement/index.vue'
@@ -28,20 +28,11 @@ import LatexElement from '@/views/components/element/LatexElement/index.vue'
 import VideoElement from '@/views/components/element/VideoElement/index.vue'
 import AudioElement from '@/views/components/element/AudioElement/index.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTElement>,
-    required: true,
-  },
-  elementIndex: {
-    type: Number,
-    required: true,
-  },
-  selectElement: {
-    type: Function as PropType<(e: TouchEvent, element: PPTElement, canMove?: boolean) => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTElement
+  elementIndex: number
+  selectElement: (e: TouchEvent, element: PPTElement, canMove?: boolean) => void
+}>()
 
 const currentElementComponent = computed<unknown>(() => {
   const elementTypeMap = {
diff --git a/src/views/Mobile/MobileEditor/MobileOperate.vue b/src/views/Mobile/MobileEditor/MobileOperate.vue
index b8692c9a..0e77492e 100644
--- a/src/views/Mobile/MobileEditor/MobileOperate.vue
+++ b/src/views/Mobile/MobileEditor/MobileOperate.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, computed } from 'vue'
+import { computed } from 'vue'
 import { PPTElement, PPTLineElement } from '@/types/slides'
 import useCommonOperate from '@/views/Editor/Canvas/hooks/useCommonOperate'
 import { OperateResizeHandlers } from '@/types/edit'
@@ -38,24 +38,12 @@ import { OperateResizeHandlers } from '@/types/edit'
 import BorderLine from '@/views/Editor/Canvas/Operate/BorderLine.vue'
 import ResizeHandler from '@/views/Editor/Canvas/Operate/ResizeHandler.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<Exclude<PPTElement, PPTLineElement>>,
-    required: true,
-  },
-  isSelected: {
-    type: Boolean,
-    required: true,
-  },
-  canvasScale: {
-    type: Number,
-    required: true,
-  },
-  scaleElement: {
-    type: Function as PropType<(e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: Exclude<PPTElement, PPTLineElement>
+  isSelected: boolean
+  canvasScale: number
+  scaleElement: (e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void
+}>()
 
 const rotate = computed(() => 'rotate' in props.elementInfo ? props.elementInfo.rotate : 0)
 
diff --git a/src/views/Mobile/MobileEditor/index.vue b/src/views/Mobile/MobileEditor/index.vue
index b460a06c..cd51f951 100644
--- a/src/views/Mobile/MobileEditor/index.vue
+++ b/src/views/Mobile/MobileEditor/index.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, PropType, ref, watchEffect } from 'vue'
+import { computed, onMounted, ref, watchEffect } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElement } from '@/types/slides'
@@ -58,12 +58,9 @@ import SlideToolbar from './SlideToolbar.vue'
 import ElementToolbar from './ElementToolbar.vue'
 import Header from './Header.vue'
 
-defineProps({
-  changeMode: {
-    type: Function as PropType<(mode: Mode) => void>,
-    required: true,
-  },
-})
+defineProps<{
+  changeMode: (mode: Mode) => void
+}>()
 
 const slidesStore = useSlidesStore()
 const mainStore = useMainStore()
diff --git a/src/views/Mobile/MobilePlayer.vue b/src/views/Mobile/MobilePlayer.vue
index 5946d62a..66e65bca 100644
--- a/src/views/Mobile/MobilePlayer.vue
+++ b/src/views/Mobile/MobilePlayer.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, PropType, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Mode } from '@/types/mobile'
@@ -60,12 +60,9 @@ import { Mode } from '@/types/mobile'
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import MobileThumbnails from './MobileThumbnails.vue'
 
-defineProps({
-  changeMode: {
-    type: Function as PropType<(mode: Mode) => void>,
-    required: true,
-  },
-})
+defineProps<{
+  changeMode: (mode: Mode) => void
+}>()
 
 const slidesStore = useSlidesStore()
 const { slides, slideIndex, currentSlide, viewportRatio } = storeToRefs(slidesStore)
diff --git a/src/views/Mobile/MobilePreview.vue b/src/views/Mobile/MobilePreview.vue
index 91aaeb11..f83b8a62 100644
--- a/src/views/Mobile/MobilePreview.vue
+++ b/src/views/Mobile/MobilePreview.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useLoadSlides from '@/hooks/useLoadSlides'
@@ -27,12 +27,9 @@ import { Mode } from '@/types/mobile'
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import { Divider } from 'ant-design-vue'
 
-defineProps({
-  changeMode: {
-    type: Function as PropType<(mode: Mode) => void>,
-    required: true,
-  },
-})
+defineProps<{
+  changeMode: (mode: Mode) => void
+}>()
 
 const { slides } = storeToRefs(useSlidesStore())
 const { slidesLoadLimit } = useLoadSlides()
diff --git a/src/views/Screen/BaseView.vue b/src/views/Screen/BaseView.vue
index de3d33f6..b17aaf1a 100644
--- a/src/views/Screen/BaseView.vue
+++ b/src/views/Screen/BaseView.vue
@@ -67,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref } from 'vue'
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
@@ -83,12 +83,9 @@ import WritingBoardTool from './WritingBoardTool.vue'
 import CountdownTimer from './CountdownTimer.vue'
 import { Tooltip } from 'ant-design-vue'
 
-const props = defineProps({
-  changeViewMode: {
-    type: Function as PropType<(mode: 'base' | 'presenter') => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  changeViewMode: (mode: 'base' | 'presenter') => void
+}>()
 
 const { slides, slideIndex } = storeToRefs(useSlidesStore())
 
diff --git a/src/views/Screen/CountdownTimer.vue b/src/views/Screen/CountdownTimer.vue
index 0fedd5d2..7c442c0c 100644
--- a/src/views/Screen/CountdownTimer.vue
+++ b/src/views/Screen/CountdownTimer.vue
@@ -47,15 +47,12 @@ import { fillDigit } from '@/utils/common'
 
 import MoveablePanel from '@/components/MoveablePanel.vue'
 
-defineProps({
-  left: {
-    type: Number,
-    default: 5,
-  },
-  top: {
-    type: Number,
-    default: 5,
-  },
+withDefaults(defineProps<{
+  left?: number
+  top?: number
+}>(), {
+  left: 5,
+  top: 5,
 })
 
 const emit = defineEmits<{
diff --git a/src/views/Screen/PresenterView.vue b/src/views/Screen/PresenterView.vue
index 7453e441..0b435def 100644
--- a/src/views/Screen/PresenterView.vue
+++ b/src/views/Screen/PresenterView.vue
@@ -77,7 +77,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch, PropType } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
@@ -95,12 +95,9 @@ import WritingBoardTool from './WritingBoardTool.vue'
 import CountdownTimer from './CountdownTimer.vue'
 import { Divider } from 'ant-design-vue'
 
-const props = defineProps({
-  changeViewMode: {
-    type: Function as PropType<(mode: 'base' | 'presenter') => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  changeViewMode: (mode: 'base' | 'presenter') => void
+}>()
 
 const { slides, slideIndex, viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
 
diff --git a/src/views/Screen/ScreenElement.vue b/src/views/Screen/ScreenElement.vue
index 61cc7330..d026a1fe 100644
--- a/src/views/Screen/ScreenElement.vue
+++ b/src/views/Screen/ScreenElement.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { ElementTypes, PPTElement } from '@/types/slides'
@@ -35,28 +35,13 @@ import BaseLatexElement from '@/views/components/element/LatexElement/BaseLatexE
 import ScreenVideoElement from '@/views/components/element/VideoElement/ScreenVideoElement.vue'
 import ScreenAudioElement from '@/views/components/element/AudioElement/ScreenAudioElement.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTElement>,
-    required: true,
-  },
-  elementIndex: {
-    type: Number,
-    required: true,
-  },
-  animationIndex: {
-    type: Number,
-    required: true,
-  },
-  turnSlideToId: {
-    type: Function as PropType<(id: string) => void>,
-    required: true,
-  },
-  manualExitFullscreen: {
-    type: Function as PropType<() => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTElement
+  elementIndex: number
+  animationIndex: number
+  turnSlideToId: (id: string) => void
+  manualExitFullscreen: () => void
+}>()
 
 const currentElementComponent = computed<unknown>(() => {
   const elementTypeMap = {
diff --git a/src/views/Screen/ScreenSlide.vue b/src/views/Screen/ScreenSlide.vue
index 24cf6dbd..718f1fa3 100644
--- a/src/views/Screen/ScreenSlide.vue
+++ b/src/views/Screen/ScreenSlide.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType, provide } from 'vue'
+import { computed, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Slide } from '@/types/slides'
@@ -31,28 +31,13 @@ import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
 import ScreenElement from './ScreenElement.vue'
 
-const props = defineProps({
-  slide: {
-    type: Object as PropType<Slide>,
-    required: true,
-  },
-  scale: {
-    type: Number,
-    required: true,
-  },
-  animationIndex: {
-    type: Number,
-    required: true,
-  },
-  turnSlideToId: {
-    type: Function as PropType<(id: string) => void>,
-    required: true,
-  },
-  manualExitFullscreen: {
-    type: Function as PropType<() => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  slide: Slide
+  scale: number
+  animationIndex: number
+  turnSlideToId: (id: string) => void
+  manualExitFullscreen: () => void
+}>()
 
 const { viewportRatio } = storeToRefs(useSlidesStore())
 
diff --git a/src/views/Screen/ScreenSlideList.vue b/src/views/Screen/ScreenSlideList.vue
index d0f15d73..05c28abd 100644
--- a/src/views/Screen/ScreenSlideList.vue
+++ b/src/views/Screen/ScreenSlideList.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType, provide } from 'vue'
+import { computed, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { injectKeySlideScale } from '@/types/injectKey'
@@ -43,28 +43,13 @@ import { VIEWPORT_SIZE } from '@/configs/canvas'
 
 import ScreenSlide from './ScreenSlide.vue'
 
-const props = defineProps({
-  slideWidth: {
-    type: Number,
-    required: true,
-  },
-  slideHeight: {
-    type: Number,
-    required: true,
-  },
-  animationIndex: {
-    type: Number,
-    required: true,
-  },
-  turnSlideToId: {
-    type: Function as PropType<(id: string) => void>,
-    required: true,
-  },
-  manualExitFullscreen: {
-    type: Function as PropType<() => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  slideWidth: number
+  slideHeight: number
+  animationIndex: number
+  turnSlideToId: (id: string) => void
+  manualExitFullscreen: () => void
+}>()
 
 const { slides, slideIndex, currentSlide } = storeToRefs(useSlidesStore())
 
diff --git a/src/views/Screen/SlideThumbnails.vue b/src/views/Screen/SlideThumbnails.vue
index 8c15444c..fa7c8cc2 100644
--- a/src/views/Screen/SlideThumbnails.vue
+++ b/src/views/Screen/SlideThumbnails.vue
@@ -18,19 +18,15 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useLoadSlides from '@/hooks/useLoadSlides'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
-const props = defineProps({
-  turnSlideToIndex: {
-    type: Function as PropType<(index: number) => void>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  turnSlideToIndex: (index: number) => void
+}>()
 
 const emit = defineEmits<{
   (event: 'close'): void
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index efea7676..ae191473 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -104,23 +104,14 @@ const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d
 
 type WritingBoardModel = 'pen' | 'mark' | 'eraser'
 
-defineProps({
-  slideWidth: {
-    type: Number,
-    required: true,
-  },
-  slideHeight: {
-    type: Number,
-    required: true,
-  },
-  left: {
-    type: Number,
-    default: -5,
-  },
-  top: {
-    type: Number,
-    default: -5,
-  },
+withDefaults(defineProps<{
+  slideWidth: number
+  slideHeight: number
+  left?: number
+  top?: number
+}>(), {
+  left: -5,
+  top: -5,
 })
 
 const emit = defineEmits<{
diff --git a/src/views/components/ThumbnailSlide/ThumbnailElement.vue b/src/views/components/ThumbnailSlide/ThumbnailElement.vue
index 50ec8be7..9d2c323f 100644
--- a/src/views/components/ThumbnailSlide/ThumbnailElement.vue
+++ b/src/views/components/ThumbnailSlide/ThumbnailElement.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { ElementTypes, PPTElement } from '@/types/slides'
 
 import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue'
@@ -28,16 +28,10 @@ import BaseLatexElement from '@/views/components/element/LatexElement/BaseLatexE
 import BaseVideoElement from '@/views/components/element/VideoElement/BaseVideoElement.vue'
 import BaseAudioElement from '@/views/components/element/AudioElement/BaseAudioElement.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTElement>,
-    required: true,
-  },
-  elementIndex: {
-    type: Number,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTElement
+  elementIndex: number
+}>()
 
 const currentElementComponent = computed<unknown>(() => {
   const elementTypeMap = {
diff --git a/src/views/components/ThumbnailSlide/index.vue b/src/views/components/ThumbnailSlide/index.vue
index 90a4d112..9efb327f 100644
--- a/src/views/components/ThumbnailSlide/index.vue
+++ b/src/views/components/ThumbnailSlide/index.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType, provide } from 'vue'
+import { computed, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Slide } from '@/types/slides'
@@ -37,19 +37,12 @@ import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
 import ThumbnailElement from './ThumbnailElement.vue'
 
-const props = defineProps({
-  slide: {
-    type: Object as PropType<Slide>,
-    required: true,
-  },
-  size: {
-    type: Number,
-    required: true,
-  },
-  visible: {
-    type: Boolean,
-    default: true,
-  },
+const props = withDefaults(defineProps<{
+  slide: Slide
+  size: number
+  visible?: boolean
+}>(), {
+  visible: true,
 })
 
 const { viewportRatio } = storeToRefs(useSlidesStore())
diff --git a/src/views/components/element/AudioElement/AudioPlayer.vue b/src/views/components/element/AudioElement/AudioPlayer.vue
index 3a6f4931..b3174491 100644
--- a/src/views/components/element/AudioElement/AudioPlayer.vue
+++ b/src/views/components/element/AudioElement/AudioPlayer.vue
@@ -76,23 +76,14 @@
 import { computed, ref } from 'vue'
 import { message } from 'ant-design-vue'
 
-const props = defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  loop: {
-    type: Boolean,
-    required: true,
-  },
-  autoplay: {
-    type: Boolean,
-    default: false,
-  },
-  scale: {
-    type: Number,
-    default: 1,
-  },
+const props = withDefaults(defineProps<{
+  src: string
+  loop: boolean
+  autoplay?: boolean
+  scale?: number
+}>(), {
+  autoplay: false,
+  scale: 1,
 })
 
 const secondToTime = (second = 0) => {
diff --git a/src/views/components/element/AudioElement/BaseAudioElement.vue b/src/views/components/element/AudioElement/BaseAudioElement.vue
index 601fe22b..68353028 100644
--- a/src/views/components/element/AudioElement/BaseAudioElement.vue
+++ b/src/views/components/element/AudioElement/BaseAudioElement.vue
@@ -25,15 +25,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { PPTAudioElement } from '@/types/slides'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTAudioElement>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTAudioElement
+}>()
 
 const audioIconSize = computed(() => {
   return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
diff --git a/src/views/components/element/AudioElement/ScreenAudioElement.vue b/src/views/components/element/AudioElement/ScreenAudioElement.vue
index dff12d2a..e348176e 100644
--- a/src/views/components/element/AudioElement/ScreenAudioElement.vue
+++ b/src/views/components/element/AudioElement/ScreenAudioElement.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, PropType, ref } from 'vue'
+import { computed, inject, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { PPTAudioElement } from '@/types/slides'
@@ -45,12 +45,9 @@ import { VIEWPORT_SIZE } from '@/configs/canvas'
 
 import AudioPlayer from './AudioPlayer.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTAudioElement>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTAudioElement
+}>()
 
 const { viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
 
diff --git a/src/views/components/element/AudioElement/index.vue b/src/views/components/element/AudioElement/index.vue
index 3d880de2..9f7de871 100644
--- a/src/views/components/element/AudioElement/index.vue
+++ b/src/views/components/element/AudioElement/index.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTAudioElement } from '@/types/slides'
@@ -49,19 +49,11 @@ import { VIEWPORT_SIZE } from '@/configs/canvas'
 
 import AudioPlayer from './AudioPlayer.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTAudioElement>,
-    required: true,
-  },
-  selectElement: {
-    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTAudioElement, canMove?: boolean) => void>,
-    required: true,
-  },
-  contextmenus: {
-    type: Function as PropType<() => ContextmenuItem[] | null>,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTAudioElement
+  selectElement: (e: MouseEvent | TouchEvent, element: PPTAudioElement, canMove?: boolean) => void
+  contextmenus: () => ContextmenuItem[] | null
+}>()
 
 const { canvasScale, handleElementId } = storeToRefs(useMainStore())
 const { viewportRatio } = storeToRefs(useSlidesStore())
diff --git a/src/views/components/element/ChartElement/BaseChartElement.vue b/src/views/components/element/ChartElement/BaseChartElement.vue
index d689155a..a5ff389c 100644
--- a/src/views/components/element/ChartElement/BaseChartElement.vue
+++ b/src/views/components/element/ChartElement/BaseChartElement.vue
@@ -40,19 +40,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, PropType, ref } from 'vue'
+import { computed, inject, ref } from 'vue'
 import { PPTChartElement } from '@/types/slides'
 import { injectKeySlideScale } from '@/types/injectKey'
 
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
 import Chart from './Chart.vue'
 
-defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTChartElement>,
-    required: true,
-  },
-})
+defineProps<{
+  elementInfo: PPTChartElement
+}>()
 
 const slideScale = inject(injectKeySlideScale) || ref(1)
 
diff --git a/src/views/components/element/ChartElement/Chart.vue b/src/views/components/element/ChartElement/Chart.vue
index fbbcad75..ab7c445d 100644
--- a/src/views/components/element/ChartElement/Chart.vue
+++ b/src/views/components/element/ChartElement/Chart.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, PropType, ref, watch } from 'vue'
+import { computed, inject, onMounted, ref, watch } from 'vue'
 import tinycolor from 'tinycolor2'
 import { BarChart, LineChart, PieChart } from 'chartist'
 import { ChartData, ChartOptions, ChartType } from '@/types/slides'
@@ -35,41 +35,17 @@ import { injectKeySlideScale } from '@/types/injectKey'
 
 import 'chartist/dist/index.css'
 
-const props = defineProps({
-  width: {
-    type: Number,
-    required: true,
-  },
-  height: {
-    type: Number,
-    required: true,
-  },
-  type: {
-    type: String as PropType<ChartType>,
-    required: true,
-  },
-  data: {
-    type: Object as PropType<ChartData>,
-    required: true,
-  },
-  options: {
-    type: Object as PropType<ChartOptions>,
-  },
-  themeColor: {
-    type: Array as PropType<string[]>,
-    required: true,
-  },
-  legends: {
-    type: Array as PropType<string[]>,
-    required: true,
-  },
-  gridColor: {
-    type: String,
-  },
-  legend: {
-    type: String as PropType<'' | 'top' | 'bottom'>,
-  },
-})
+const props = defineProps<{
+  width: number
+  height: number
+  type: ChartType
+  data: ChartData
+  themeColor: string[]
+  legends: string[]
+  options?: ChartOptions
+  gridColor?: string
+  legend?: '' | 'top' | 'bottom'
+}>()
 
 const chartRef = ref<HTMLElement>()
 const slideScale = inject(injectKeySlideScale) || ref(1)
diff --git a/src/views/components/element/ChartElement/ScreenChartElement.vue b/src/views/components/element/ChartElement/ScreenChartElement.vue
index e55d954e..50355c79 100644
--- a/src/views/components/element/ChartElement/ScreenChartElement.vue
+++ b/src/views/components/element/ChartElement/ScreenChartElement.vue
@@ -3,15 +3,11 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { PPTChartElement } from '@/types/slides'
 
 import BaseChartElement from './BaseChartElement.vue'
 
-defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTChartElement>,
-    required: true,
-  },
-})
+defineProps<{
+  elementInfo: PPTChartElement
+}>()
 </script>
diff --git a/src/views/components/element/ChartElement/index.vue b/src/views/components/element/ChartElement/index.vue
index b0245401..85da0952 100644
--- a/src/views/components/element/ChartElement/index.vue
+++ b/src/views/components/element/ChartElement/index.vue
@@ -44,7 +44,6 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { PPTChartElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import emitter, { EmitterEvents } from '@/utils/emitter'
@@ -52,19 +51,11 @@ import emitter, { EmitterEvents } from '@/utils/emitter'
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
 import Chart from './Chart.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTChartElement>,
-    required: true,
-  },
-  selectElement: {
-    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTChartElement, canMove?: boolean) => void>,
-    required: true,
-  },
-  contextmenus: {
-    type: Function as PropType<() => ContextmenuItem[] | null>,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTChartElement
+  selectElement: (e: MouseEvent | TouchEvent, element: PPTChartElement, canMove?: boolean) => void
+  contextmenus: () => ContextmenuItem[] | null
+}>()
 
 const handleSelectElement = (e: MouseEvent | TouchEvent) => {
   if (props.elementInfo.lock) return
diff --git a/src/views/components/element/ElementOutline.vue b/src/views/components/element/ElementOutline.vue
index 63b40e86..9203cebd 100644
--- a/src/views/components/element/ElementOutline.vue
+++ b/src/views/components/element/ElementOutline.vue
@@ -20,24 +20,16 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, toRef } from 'vue'
+import { toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
 
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
-const props = defineProps({
-  width: {
-    type: Number,
-    required: true,
-  },
-  height: {
-    type: Number,
-    required: true,
-  },
-  outline: {
-    type: Object as PropType<PPTElementOutline>
-  },
-})
+const props = defineProps<{
+  width: number
+  height: number
+  outline?: PPTElementOutline
+}>()
 
 const {
   outlineWidth,
diff --git a/src/views/components/element/ImageElement/BaseImageElement.vue b/src/views/components/element/ImageElement/BaseImageElement.vue
index 94ff89ee..5c2541f6 100644
--- a/src/views/components/element/ImageElement/BaseImageElement.vue
+++ b/src/views/components/element/ImageElement/BaseImageElement.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { PPTImageElement } from '@/types/slides'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 import useElementFlip from '@/views/components/element/hooks/useElementFlip'
@@ -57,12 +57,9 @@ import useFilter from './useFilter'
 
 import ImageOutline from './ImageOutline/index.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTImageElement>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTImageElement
+}>()
 
 const shadow = computed(() => props.elementInfo.shadow)
 const { shadowStyle } = useElementShadow(shadow)
diff --git a/src/views/components/element/ImageElement/ImageClipHandler.vue b/src/views/components/element/ImageElement/ImageClipHandler.vue
index f6bb6232..e35f3416 100644
--- a/src/views/components/element/ImageElement/ImageClipHandler.vue
+++ b/src/views/components/element/ImageElement/ImageClipHandler.vue
@@ -66,46 +66,23 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, PropType, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useKeyboardStore } from '@/store'
 import { KEYS } from '@/configs/hotkey'
 import { ImageClipedEmitData, OperateResizeHandlers } from '@/types/edit'
 import { ImageClipDataRange, ImageElementClip } from '@/types/slides'
 
-const props = defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  clipData: {
-    type: Object as PropType<ImageElementClip>,
-  },
-  clipPath: {
-    type: String,
-    required: true,
-  },
-  width: {
-    type: Number,
-    required: true,
-  },
-  height: {
-    type: Number,
-    required: true,
-  },
-  top: {
-    type: Number,
-    required: true,
-  },
-  left: {
-    type: Number,
-    required: true,
-  },
-  rotate: {
-    type: Number,
-    required: true,
-  },
-})
+const props = defineProps<{
+  src: string
+  clipPath: string
+  width: number
+  height: number
+  top: number
+  left: number
+  rotate: number
+  clipData?: ImageElementClip
+}>()
 
 const emit = defineEmits<{
   (event: 'clip', payload: ImageClipedEmitData | null): void
diff --git a/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue
index 7b88c394..7c27a69c 100644
--- a/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue
+++ b/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue
@@ -23,23 +23,15 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, toRef } from 'vue'
+import { toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
-const props = defineProps({
-  width: {
-    type: Number,
-    required: true,
-  },
-  height: {
-    type: Number,
-    required: true,
-  },
-  outline: {
-    type: Object as PropType<PPTElementOutline>
-  },
-})
+const props = defineProps<{
+  width: number
+  height: number
+  outline?: PPTElementOutline
+}>()
 
 const {
   outlineWidth,
diff --git a/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue
index 62514f6c..1210086c 100644
--- a/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue
+++ b/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue
@@ -20,27 +20,16 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, toRef } from 'vue'
+import { toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
-const props = defineProps({
-  width: {
-    type: Number,
-    required: true,
-  },
-  height: {
-    type: Number,
-    required: true,
-  },
-  outline: {
-    type: Object as PropType<PPTElementOutline>
-  },
-  createPath: {
-    type: Function,
-    required: true,
-  },
-})
+const props = defineProps<{
+  width: number
+  height: number
+  createPath: (width: number, height: number) => string
+  outline?: PPTElementOutline
+}>()
 
 const {
   outlineWidth,
diff --git a/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue
index d08a6f8a..c45e0a4f 100644
--- a/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue
+++ b/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue
@@ -23,26 +23,17 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, toRef } from 'vue'
+import { toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
-const props = defineProps({
-  width: {
-    type: Number,
-    required: true,
-  },
-  height: {
-    type: Number,
-    required: true,
-  },
-  outline: {
-    type: Object as PropType<PPTElementOutline>
-  },
-  radius: {
-    type: String,
-    default: '0',
-  },
+const props = withDefaults(defineProps<{
+  width: number
+  height: number
+  outline?: PPTElementOutline
+  radius?: string
+}>(), {
+  radius: '0',
 })
 
 const {
diff --git a/src/views/components/element/ImageElement/ImageOutline/index.vue b/src/views/components/element/ImageElement/ImageOutline/index.vue
index f6f98ac2..2ec429df 100644
--- a/src/views/components/element/ImageElement/ImageOutline/index.vue
+++ b/src/views/components/element/ImageElement/ImageOutline/index.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { PPTImageElement } from '@/types/slides'
 import useClipImage from '../useClipImage'
 
@@ -32,12 +32,9 @@ import ImageRectOutline from './ImageRectOutline.vue'
 import ImageEllipseOutline from './ImageEllipseOutline.vue'
 import ImagePolygonOutline from './ImagePolygonOutline.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTImageElement>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTImageElement
+}>()
 
 const clip = computed(() => props.elementInfo.clip)
 const { clipShape } = useClipImage(clip)
diff --git a/src/views/components/element/ImageElement/index.vue b/src/views/components/element/ImageElement/index.vue
index 1b7fdbc4..cd9bf675 100644
--- a/src/views/components/element/ImageElement/index.vue
+++ b/src/views/components/element/ImageElement/index.vue
@@ -66,7 +66,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { ImageElementClip, PPTImageElement } from '@/types/slides'
@@ -81,19 +81,11 @@ import useFilter from './useFilter'
 import ImageOutline from './ImageOutline/index.vue'
 import ImageClipHandler from './ImageClipHandler.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTImageElement>,
-    required: true,
-  },
-  selectElement: {
-    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTImageElement, canMove?: boolean) => void>,
-    required: true,
-  },
-  contextmenus: {
-    type: Function as PropType<() => ContextmenuItem[] | null>,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTImageElement
+  selectElement: (e: MouseEvent | TouchEvent, element: PPTImageElement, canMove?: boolean) => void
+  contextmenus: () => ContextmenuItem[] | null
+}>()
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
diff --git a/src/views/components/element/LatexElement/BaseLatexElement.vue b/src/views/components/element/LatexElement/BaseLatexElement.vue
index cc3e7d90..ae859b53 100644
--- a/src/views/components/element/LatexElement/BaseLatexElement.vue
+++ b/src/views/components/element/LatexElement/BaseLatexElement.vue
@@ -35,15 +35,11 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { PPTLatexElement } from '@/types/slides'
 
-defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTLatexElement>,
-    required: true,
-  },
-})
+defineProps<{
+  elementInfo: PPTLatexElement
+}>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/LatexElement/index.vue b/src/views/components/element/LatexElement/index.vue
index 0c5ea448..89036005 100644
--- a/src/views/components/element/LatexElement/index.vue
+++ b/src/views/components/element/LatexElement/index.vue
@@ -42,24 +42,15 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { PPTLatexElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import emitter, { EmitterEvents } from '@/utils/emitter'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTLatexElement>,
-    required: true,
-  },
-  selectElement: {
-    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTLatexElement, canMove?: boolean) => void>,
-    required: true,
-  },
-  contextmenus: {
-    type: Function as PropType<() => ContextmenuItem[] | null>,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTLatexElement
+  selectElement: (e: MouseEvent | TouchEvent, element: PPTLatexElement, canMove?: boolean) => void
+  contextmenus: () => ContextmenuItem[] | null
+}>()
 
 const handleSelectElement = (e: MouseEvent | TouchEvent) => {
   if (props.elementInfo.lock) return
diff --git a/src/views/components/element/LineElement/BaseLineElement.vue b/src/views/components/element/LineElement/BaseLineElement.vue
index ff29046b..1c964ea1 100644
--- a/src/views/components/element/LineElement/BaseLineElement.vue
+++ b/src/views/components/element/LineElement/BaseLineElement.vue
@@ -48,19 +48,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { PPTLineElement } from '@/types/slides'
 import { getLineElementPath } from '@/utils/element'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
 import LinePointMarker from './LinePointMarker.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTLineElement>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTLineElement
+}>()
 
 const shadow = computed(() => props.elementInfo.shadow)
 const { shadowStyle } = useElementShadow(shadow)
diff --git a/src/views/components/element/LineElement/LinePointMarker.vue b/src/views/components/element/LineElement/LinePointMarker.vue
index 233280b7..3ce315f6 100644
--- a/src/views/components/element/LineElement/LinePointMarker.vue
+++ b/src/views/components/element/LineElement/LinePointMarker.vue
@@ -17,29 +17,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  position: {
-    type: String as PropType<'start' | 'end'>,
-    required: true,
-  },
-  type: {
-    type: String as PropType<'dot' | 'arrow'>,
-    required: true,
-  },
-  color: {
-    type: String,
-  },
-  baseSize: {
-    type: Number,
-    required: true,
-  },
-})
+const props = defineProps<{
+  id: string
+  position: 'start' | 'end'
+  type: 'dot' | 'arrow'
+  baseSize: number
+  color?: string
+}>()
 
 const pathMap = {
   dot: 'm0 5a5 5 0 1 0 10 0a5 5 0 1 0 -10 0z',
diff --git a/src/views/components/element/LineElement/index.vue b/src/views/components/element/LineElement/index.vue
index 4715c598..31764162 100644
--- a/src/views/components/element/LineElement/index.vue
+++ b/src/views/components/element/LineElement/index.vue
@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { PPTLineElement } from '@/types/slides'
 import { getLineElementPath } from '@/utils/element'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
@@ -68,19 +68,11 @@ import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
 import LinePointMarker from './LinePointMarker.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTLineElement>,
-    required: true,
-  },
-  selectElement: {
-    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTLineElement, canMove?: boolean) => void>,
-    required: true,
-  },
-  contextmenus: {
-    type: Function as PropType<() => ContextmenuItem[] | null>,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTLineElement
+  selectElement: (e: MouseEvent | TouchEvent, element: PPTLineElement, canMove?: boolean) => void
+  contextmenus: () => ContextmenuItem[] | null
+}>()
 
 const handleSelectElement = (e: MouseEvent | TouchEvent) => {
   if (props.elementInfo.lock) return
diff --git a/src/views/components/element/ProsemirrorEditor.vue b/src/views/components/element/ProsemirrorEditor.vue
index be5fe303..777a9252 100644
--- a/src/views/components/element/ProsemirrorEditor.vue
+++ b/src/views/components/element/ProsemirrorEditor.vue
@@ -22,31 +22,16 @@ import { indentCommand } from '@/utils/prosemirror/commands/setTextIndent'
 import { toggleList } from '@/utils/prosemirror/commands/toggleList'
 import { TextFormatPainterKeys } from '@/types/edit'
 
-const props = defineProps({
-  elementId: {
-    type: String,
-    required: true,
-  },
-  defaultColor: {
-    type: String,
-    required: true,
-  },
-  defaultFontName: {
-    type: String,
-    required: true,
-  },
-  editable: {
-    type: Boolean,
-    default: false,
-  },
-  value: {
-    type: String,
-    required: true,
-  },
-  autoFocus: {
-    type: Boolean,
-    default: false,
-  },
+const props = withDefaults(defineProps<{
+  elementId: string
+  defaultColor: string
+  defaultFontName: string
+  value: string
+  editable?: boolean
+  autoFocus?: boolean
+}>(), {
+  editable: false,
+  autoFocus: false,
 })
 
 const emit = defineEmits<{
diff --git a/src/views/components/element/ShapeElement/BaseShapeElement.vue b/src/views/components/element/ShapeElement/BaseShapeElement.vue
index d867c027..0aa9160b 100644
--- a/src/views/components/element/ShapeElement/BaseShapeElement.vue
+++ b/src/views/components/element/ShapeElement/BaseShapeElement.vue
@@ -61,7 +61,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { PPTShapeElement, ShapeText } from '@/types/slides'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
@@ -69,12 +69,9 @@ import useElementFlip from '@/views/components/element/hooks/useElementFlip'
 
 import GradientDefs from './GradientDefs.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTShapeElement>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTShapeElement
+}>()
 
 const outline = computed(() => props.elementInfo.outline)
 const { outlineWidth, outlineStyle, outlineColor } = useElementOutline(outline)
diff --git a/src/views/components/element/ShapeElement/GradientDefs.vue b/src/views/components/element/ShapeElement/GradientDefs.vue
index 51174d1f..4e76a757 100644
--- a/src/views/components/element/ShapeElement/GradientDefs.vue
+++ b/src/views/components/element/ShapeElement/GradientDefs.vue
@@ -19,27 +19,13 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
-
-defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  type: {
-    type: String as PropType<'linear' | 'radial'>,
-  },
-  color1: {
-    type: String,
-    required: true,
-  },
-  color2: {
-    type: String,
-    required: true,
-  },
-  rotate: {
-    type: Number,
-    default: 0,
-  },
+withDefaults(defineProps<{
+  id: string
+  type: 'linear' | 'radial'
+  color1: string
+  color2: string
+  rotate?: number
+}>(), {
+  rotate: 0,
 })
 </script>
\ No newline at end of file
diff --git a/src/views/components/element/ShapeElement/index.vue b/src/views/components/element/ShapeElement/index.vue
index 424b6853..60706ca2 100644
--- a/src/views/components/element/ShapeElement/index.vue
+++ b/src/views/components/element/ShapeElement/index.vue
@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, PropType, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTShapeElement, ShapeText } from '@/types/slides'
@@ -91,19 +91,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import GradientDefs from './GradientDefs.vue'
 import ProsemirrorEditor from '@/views/components/element/ProsemirrorEditor.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTShapeElement>,
-    required: true,
-  },
-  selectElement: {
-    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTShapeElement, canMove?: boolean) => void>,
-    required: true,
-  },
-  contextmenus: {
-    type: Function as PropType<() => ContextmenuItem[] | null>,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTShapeElement
+  selectElement: (e: MouseEvent | TouchEvent, element: PPTShapeElement, canMove?: boolean) => void
+  contextmenus: () => ContextmenuItem[] | null
+}>()
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
diff --git a/src/views/components/element/TableElement/BaseTableElement.vue b/src/views/components/element/TableElement/BaseTableElement.vue
index 165129f5..7e216ada 100644
--- a/src/views/components/element/TableElement/BaseTableElement.vue
+++ b/src/views/components/element/TableElement/BaseTableElement.vue
@@ -26,17 +26,13 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { PPTTableElement } from '@/types/slides'
 
 import StaticTable from './StaticTable.vue'
 
-defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTTableElement>,
-    required: true,
-  },
-})
+defineProps<{
+  elementInfo: PPTTableElement
+}>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/TableElement/CustomTextarea.vue b/src/views/components/element/TableElement/CustomTextarea.vue
index dce29b79..f0dad954 100644
--- a/src/views/components/element/TableElement/CustomTextarea.vue
+++ b/src/views/components/element/TableElement/CustomTextarea.vue
@@ -14,11 +14,10 @@
 import { onBeforeUnmount, ref, watch } from 'vue'
 import { pasteCustomClipboardString, pasteExcelClipboardString } from '@/utils/clipboard'
 
-const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
+const props = withDefaults(defineProps<{
+  value?: string
+}>(), {
+  value: '',
 })
 
 const emit = defineEmits<{
diff --git a/src/views/components/element/TableElement/EditableTable.vue b/src/views/components/element/TableElement/EditableTable.vue
index 573968df..a5f806f7 100644
--- a/src/views/components/element/TableElement/EditableTable.vue
+++ b/src/views/components/element/TableElement/EditableTable.vue
@@ -67,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { debounce, isEqual } from 'lodash'
 import { storeToRefs } from 'pinia'
 import { nanoid } from 'nanoid'
@@ -81,34 +81,16 @@ import useSubThemeColor from './useSubThemeColor'
 
 import CustomTextarea from './CustomTextarea.vue'
 
-const props = defineProps({
-  data: {
-    type: Array as PropType<TableCell[][]>,
-    required: true,
-  },
-  width: {
-    type: Number,
-    required: true,
-  },
-  cellMinHeight: {
-    type: Number,
-    required: true,
-  },
-  colWidths: {
-    type: Array as PropType<number[]>,
-    required: true,
-  },
-  outline: {
-    type: Object as PropType<PPTElementOutline>,
-    required: true,
-  },
-  theme: {
-    type: Object as PropType<TableTheme>,
-  },
-  editable: {
-    type: Boolean,
-    default: true,
-  },
+const props = withDefaults(defineProps<{
+  data: TableCell[][]
+  width: number
+  cellMinHeight: number
+  colWidths: number[]
+  outline: PPTElementOutline
+  theme?: TableTheme
+  editable?: boolean
+}>(), {
+  editable: true,
 })
 
 const emit = defineEmits<{
diff --git a/src/views/components/element/TableElement/StaticTable.vue b/src/views/components/element/TableElement/StaticTable.vue
index d749d804..a51b3462 100644
--- a/src/views/components/element/TableElement/StaticTable.vue
+++ b/src/views/components/element/TableElement/StaticTable.vue
@@ -41,40 +41,22 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { PPTElementOutline, TableCell, TableTheme } from '@/types/slides'
 import { getTextStyle, formatText } from './utils'
 import useHideCells from './useHideCells'
 import useSubThemeColor from './useSubThemeColor'
 
-const props = defineProps({
-  data: {
-    type: Array as PropType<TableCell[][]>,
-    required: true,
-  },
-  width: {
-    type: Number,
-    required: true,
-  },
-  cellMinHeight: {
-    type: Number,
-    required: true,
-  },
-  colWidths: {
-    type: Array as PropType<number[]>,
-    required: true,
-  },
-  outline: {
-    type: Object as PropType<PPTElementOutline>,
-    required: true,
-  },
-  theme: {
-    type: Object as PropType<TableTheme>,
-  },
-  editable: {
-    type: Boolean,
-    default: true,
-  },
+const props = withDefaults(defineProps<{
+  data: TableCell[][]
+  width: number
+  cellMinHeight: number
+  colWidths: number[]
+  outline: PPTElementOutline
+  theme?: TableTheme
+  editable?: boolean
+}>(), {
+  editable: true,
 })
 
 const colSizeList = ref<number[]>([])
diff --git a/src/views/components/element/TableElement/index.vue b/src/views/components/element/TableElement/index.vue
index bd17f88b..8d0261aa 100644
--- a/src/views/components/element/TableElement/index.vue
+++ b/src/views/components/element/TableElement/index.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTTableElement, TableCell } from '@/types/slides'
@@ -55,19 +55,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import EditableTable from './EditableTable.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTTableElement>,
-    required: true,
-  },
-  selectElement: {
-    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTTableElement, canMove?: boolean) => void>,
-    required: true,
-  },
-  contextmenus: {
-    type: Function as PropType<() => ContextmenuItem[] | null>,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTTableElement
+  selectElement: (e: MouseEvent | TouchEvent, element: PPTTableElement, canMove?: boolean) => void
+  contextmenus: () => ContextmenuItem[] | null
+}>()
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
diff --git a/src/views/components/element/TextElement/BaseTextElement.vue b/src/views/components/element/TextElement/BaseTextElement.vue
index 94c0856f..ce6f604b 100644
--- a/src/views/components/element/TextElement/BaseTextElement.vue
+++ b/src/views/components/element/TextElement/BaseTextElement.vue
@@ -43,18 +43,15 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, computed, StyleValue } from 'vue'
+import { computed, StyleValue } from 'vue'
 import { PPTTextElement } from '@/types/slides'
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
 
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTTextElement>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTTextElement
+}>()
 
 const shadow = computed(() => props.elementInfo.shadow)
 const { shadowStyle } = useElementShadow(shadow)
diff --git a/src/views/components/element/TextElement/index.vue b/src/views/components/element/TextElement/index.vue
index a6597856..95947264 100644
--- a/src/views/components/element/TextElement/index.vue
+++ b/src/views/components/element/TextElement/index.vue
@@ -61,7 +61,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { debounce } from 'lodash'
 import { useMainStore, useSlidesStore } from '@/store'
@@ -73,19 +73,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
 import ProsemirrorEditor from '@/views/components/element/ProsemirrorEditor.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTTextElement>,
-    required: true,
-  },
-  selectElement: {
-    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTTextElement, canMove?: boolean) => void>,
-    required: true,
-  },
-  contextmenus: {
-    type: Function as PropType<() => ContextmenuItem[] | null>,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTTextElement
+  selectElement: (e: MouseEvent | TouchEvent, element: PPTTextElement, canMove?: boolean) => void
+  contextmenus: () => ContextmenuItem[] | null
+}>()
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
diff --git a/src/views/components/element/VideoElement/BaseVideoElement.vue b/src/views/components/element/VideoElement/BaseVideoElement.vue
index b33ff06e..0150d992 100644
--- a/src/views/components/element/VideoElement/BaseVideoElement.vue
+++ b/src/views/components/element/VideoElement/BaseVideoElement.vue
@@ -19,15 +19,11 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { PPTVideoElement } from '@/types/slides'
 
-defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTVideoElement>,
-    required: true,
-  },
-})
+defineProps<{
+  elementInfo: PPTVideoElement
+}>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/VideoElement/ScreenVideoElement.vue b/src/views/components/element/VideoElement/ScreenVideoElement.vue
index b5cbd75a..f291f51c 100644
--- a/src/views/components/element/VideoElement/ScreenVideoElement.vue
+++ b/src/views/components/element/VideoElement/ScreenVideoElement.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, PropType, ref } from 'vue'
+import { computed, inject, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { PPTVideoElement } from '@/types/slides'
@@ -34,12 +34,9 @@ import { injectKeySlideId, injectKeySlideScale } from '@/types/injectKey'
 
 import VideoPlayer from './VideoPlayer/index.vue'
 
-defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTVideoElement>,
-    required: true,
-  },
-})
+defineProps<{
+  elementInfo: PPTVideoElement
+}>()
 
 const { currentSlide } = storeToRefs(useSlidesStore())
 
diff --git a/src/views/components/element/VideoElement/VideoPlayer/index.vue b/src/views/components/element/VideoElement/VideoPlayer/index.vue
index 0da92162..153d8278 100644
--- a/src/views/components/element/VideoElement/VideoPlayer/index.vue
+++ b/src/views/components/element/VideoElement/VideoPlayer/index.vue
@@ -118,27 +118,15 @@
 import { computed, ref } from 'vue'
 import useMSE from './useMSE'
 
-const props = defineProps({
-  width: {
-    type: Number,
-    required: true,
-  },
-  height: {
-    type: Number,
-    required: true,
-  },
-  src: {
-    type: String,
-    required: true,
-  },
-  poster: {
-    type: String,
-    default: '',
-  },
-  scale: {
-    type: Number,
-    default: 1,
-  },
+const props = withDefaults(defineProps<{
+  width: number
+  height: number
+  src: string
+  poster?: string
+  scale?: number
+}>(), {
+  poster: '',
+  scale: 1,
 })
 
 const secondToTime = (second = 0) => {
diff --git a/src/views/components/element/VideoElement/index.vue b/src/views/components/element/VideoElement/index.vue
index 64b2e30d..f22cacab 100644
--- a/src/views/components/element/VideoElement/index.vue
+++ b/src/views/components/element/VideoElement/index.vue
@@ -38,7 +38,6 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTVideoElement } from '@/types/slides'
@@ -46,19 +45,11 @@ import { ContextmenuItem } from '@/components/Contextmenu/types'
 
 import VideoPlayer from './VideoPlayer/index.vue'
 
-const props = defineProps({
-  elementInfo: {
-    type: Object as PropType<PPTVideoElement>,
-    required: true,
-  },
-  selectElement: {
-    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTVideoElement, canMove?: boolean) => void>,
-    required: true,
-  },
-  contextmenus: {
-    type: Function as PropType<() => ContextmenuItem[] | null>,
-  },
-})
+const props = defineProps<{
+  elementInfo: PPTVideoElement
+  selectElement: (e: MouseEvent | TouchEvent, element: PPTVideoElement, canMove?: boolean) => void
+  contextmenus: () => ContextmenuItem[] | null
+}>()
 
 const { canvasScale } = storeToRefs(useMainStore())