refactor: 更新 defineProps 语法

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>
 

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

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 {

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

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

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

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<{

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>

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

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<{

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>
 

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('')

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)

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<{

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<{

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<{

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')

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 = {

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>

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>
 

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())
 

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())
 

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())
 

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()

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())
 

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(() => {

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())
 

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())
 

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())
 

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())

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())
 

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>

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

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

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>

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()

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>

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()

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 = {

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)
 

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()

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)

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()

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())
 

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<{

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())
 

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 = {

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())
 

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())
 

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

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<{

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 = {

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())

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) => {

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'

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())
 

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())

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)
 

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)

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>

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

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,

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)

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

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,

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,

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 {

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)

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()

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>

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

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)

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',

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

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<{

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)

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>

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()

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>

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<{

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<{

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[]>([])

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()

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)

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()

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>

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())
 

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) => {

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())