refactor: script setup 语法重构

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   root: true,
   env: {
     node: true,
+    'vue/setup-compiler-macros': true,
   },
   extends: [
     'plugin:vue/vue3-essential',
@@ -60,6 +61,7 @@ module.exports = {
     'no-useless-return': 'error',
     'array-bracket-spacing': 'error',
     'no-useless-escape': 'off',
+    'no-unused-vars': 'off',
     'no-eval': 'error',
     'no-var': 'error',
     'no-with': 'error',
@@ -73,6 +75,10 @@ module.exports = {
         '{}': false,
       },
     }],
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    'vue/multi-word-component-names': 'off',
+    'vue/no-reserved-component-names': 'off',
   },
   overrides: [
     {

package-lock.json

@@ -7007,37 +7007,112 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "7.20.0",
+      "version": "9.1.0",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.20.0.tgz?cache=0&sync_timestamp=1635570504787&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-plugin-vue%2Fdownload%2Feslint-plugin-vue-7.20.0.tgz",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-9.1.0.tgz",
-      "integrity": "sha1-mMIYhaa/3wcTw6kpV6Wv6q7tklM=",
+      "integrity": "sha512-EPCeInPicQ/YyfOWJDr1yfEeSNoFCMzUus107lZyYi37xejdOolNzS5MXGXp8+9bkoKZMdv/1AcZzQebME6r+g==",
       "dev": true,
       "requires": {
-        "eslint-utils": "^2.1.0",
+        "eslint-utils": "^3.0.0",
         "natural-compare": "^1.4.0",
-        "semver": "^6.3.0",
+        "nth-check": "^2.0.1",
-        "vue-eslint-parser": "^7.10.0"
+        "postcss-selector-parser": "^6.0.9",
+        "semver": "^7.3.5",
+        "vue-eslint-parser": "^9.0.1",
+        "xml-name-validator": "^4.0.0"
       },
       "dependencies": {
-        "eslint-utils": {
+        "acorn": {
-          "version": "2.1.0",
+          "version": "8.7.1",
-          "resolved": "https://registry.nlark.com/eslint-utils/download/eslint-utils-2.1.0.tgz",
+          "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.7.1.tgz",
-          "integrity": "sha1-0t5eA0JOcH3BDHQGjd7a5wh0Gyc=",
+          "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+          "dev": true
+        },
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
           "dev": true,
           "requires": {
-            "eslint-visitor-keys": "^1.1.0"
+            "ms": "2.1.2"
+          }
+        },
+        "eslint-scope": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-7.1.1.tgz",
+          "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^5.2.0"
           }
         },
         "eslint-visitor-keys": {
-          "version": "1.3.0",
+          "version": "3.3.0",
-          "resolved": "https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-1.3.0.tgz?cache=0&sync_timestamp=1636378420914&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-1.3.0.tgz",
+          "resolved": "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
-          "integrity": "sha1-MOvR73wv3/AcOk8VEESvJfqwUj4=",
+          "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
           "dev": true
         },
-        "semver": {
+        "espree": {
-          "version": "6.3.0",
+          "version": "9.3.2",
-          "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1616463550093&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz",
+          "resolved": "https://registry.npmmirror.com/espree/-/espree-9.3.2.tgz",
-          "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
+          "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+          "dev": true,
+          "requires": {
+            "acorn": "^8.7.1",
+            "acorn-jsx": "^5.3.2",
+            "eslint-visitor-keys": "^3.3.0"
+          }
+        },
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
           "dev": true
+        },
+        "nth-check": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
+          "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+          "dev": true,
+          "requires": {
+            "boolbase": "^1.0.0"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "6.0.10",
+          "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+          "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^3.0.0",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "vue-eslint-parser": {
+          "version": "9.0.2",
+          "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-9.0.2.tgz",
+          "integrity": "sha512-uCPQwTGjOtAYrwnU+76pYxalhjsh7iFBsHwBqDHiOPTxtICDaraO4Szw54WFTNZTAEsgHHzqFOu1mmnBOBRzDA==",
+          "dev": true,
+          "requires": {
+            "debug": "^4.3.4",
+            "eslint-scope": "^7.1.1",
+            "eslint-visitor-keys": "^3.3.0",
+            "espree": "^9.3.1",
+            "esquery": "^1.4.0",
+            "lodash": "^4.17.21",
+            "semver": "^7.3.6"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "7.3.7",
+              "resolved": "https://registry.npmmirror.com/semver/-/semver-7.3.7.tgz",
+              "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+              "dev": true,
+              "requires": {
+                "lru-cache": "^6.0.0"
+              }
+            }
+          }
         }
       }
     },
@@ -17370,6 +17445,12 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xml-name-validator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "dev": true
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.nlark.com/xtend/download/xtend-4.0.2.tgz",

package.json

@@ -73,7 +73,7 @@
     "@vue/test-utils": "^2.0.0-0",
     "babel-plugin-import": "^1.13.3",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.1.0",
+    "eslint-plugin-vue": "^9.1.0",
     "husky": "^7.0.2",
     "less": "^4.1.1",
     "less-loader": "^7.1.0",

src/App.vue

@@ -1,11 +1,11 @@
 <template>
   <Screen v-if="screening" />
-  <Editor v-else-if="isPC" />
+  <Editor v-else-if="_isPC" />
   <Mobile v-else />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onMounted } from 'vue'
+import { onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useScreenStore, useMainStore, useSnapshotStore } from '@/store'
 import { LOCALSTORAGE_KEY_DISCARDED_DB } from '@/configs/storage'
@@ -15,14 +15,8 @@ import Editor from './views/Editor/index.vue'
 import Screen from './views/Screen/index.vue'
 import Mobile from './views/Mobile/index.vue'
 
-export default defineComponent({
+const _isPC = isPC()
-  name: 'app',
+
-  components: {
-    Editor,
-    Screen,
-    Mobile,
-  },
-  setup() {
 const mainStore = useMainStore()
 const snapshotStore = useSnapshotStore()
 const { databaseId } = storeToRefs(mainStore)
@@ -47,13 +41,6 @@ export default defineComponent({
   const newDiscardedDB = JSON.stringify(discardedDBList)
   localStorage.setItem(LOCALSTORAGE_KEY_DISCARDED_DB, newDiscardedDB)
 })
-
-    return {
-      screening,
-      isPC: isPC(),
-    }
-  },
-})
 </script>
 
 <style lang="scss">

src/components/CheckboxButton.vue

@@ -4,17 +4,12 @@
   </button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
+defineProps({
-
-export default defineComponent({
-  name: 'checkbox-button',
-  props: {
   checked: {
     type: Boolean,
     default: false,
   },
-  },
 })
 </script>
 

src/components/CheckboxButtonGroup.vue

@@ -4,12 +4,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
 
-export default defineComponent({
-  name: 'checkbox-button-group',
-})
 </script>
 
 <style lang="scss" scoped>

src/components/ColorPicker/Alpha.vue

@@ -16,25 +16,23 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onUnmounted, PropType, ref } from 'vue'
+import { computed, onUnmounted, PropType, ref } from 'vue'
 
 import Checkboard from './Checkboard.vue'
 import { ColorFormats } from 'tinycolor2'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'alpha',
-  components: {
-    Checkboard,
-  },
-  emits: ['colorChange'],
-  props: {
   value: {
     type: Object as PropType<ColorFormats.RGBA>,
     required: true,
   },
-  },
+})
-  setup(props, { emit }) {
+
+const emit = defineEmits<{
+  (event: 'colorChange', payload: ColorFormats.RGBA): void
+}>()
+
 const color = computed(() => props.value)
     
 const gradientColor = computed(() => {
@@ -74,17 +72,7 @@ export default defineComponent({
   window.addEventListener('mousemove', handleChange)
   window.addEventListener('mouseup', unbindEventListeners)
 }
-
 onUnmounted(unbindEventListeners)
-
-    return {
-      alphaRef,
-      gradientColor,
-      handleMouseDown,
-      color,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/components/ColorPicker/Checkboard.vue

@@ -2,8 +2,23 @@
   <div class="checkerboard" :style="bgStyle"></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 8,
+  },
+  white: {
+    type: String,
+    default: '#fff',
+  },
+  grey: {
+    type: String,
+    default: '#e6e6e6',
+  },
+})
 
 const checkboardCache = {}
 
@@ -32,34 +47,10 @@ const getCheckboard = (white: string, grey: string, size: number) => {
   return checkboard
 }
 
-export default defineComponent({
-  name: 'checkboard',
-  emits: ['colorChange'],
-  props: {
-    size: {
-      type: Number,
-      default: 8,
-    },
-    white: {
-      type: String,
-      default: '#fff',
-    },
-    grey: {
-      type: String,
-      default: '#e6e6e6',
-    },
-  },
-  setup(props) {
 const bgStyle = computed(() => {
   const checkboard = getCheckboard(props.white, props.grey, props.size)
   return { backgroundImage: `url(${checkboard})` }
 })
-
-    return {
-      bgStyle,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/components/ColorPicker/EditableInput.vue

@@ -8,20 +8,21 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import tinycolor, { ColorFormats } from 'tinycolor2'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'editable-input',
-  emits: ['colorChange'],
-  props: {
   value: {
     type: Object as PropType<ColorFormats.RGBA>,
     required: true,
   },
-  },
+})
-  setup(props, { emit }) {
+
+const emit = defineEmits<{
+  (event: 'colorChange', payload: ColorFormats.RGBA): void
+}>()
+
 const val = computed(() => {
   let _hex = ''
   if (props.value.a < 1) _hex = tinycolor(props.value).toHex8String().toUpperCase()
@@ -33,13 +34,6 @@ export default defineComponent({
   const value = (e.target as HTMLInputElement).value
   if (value.length >= 6) emit('colorChange', tinycolor(value).toRgb())
 }
-
-    return {
-      val,
-      handleInput,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/components/ColorPicker/Hue.vue

@@ -15,14 +15,11 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onUnmounted, PropType, ref, watch } from 'vue'
+import { computed, onUnmounted, PropType, ref, watch } from 'vue'
 import tinycolor, { ColorFormats } from 'tinycolor2'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'hue',
-  emits: ['colorChange'],
-  props: {
   value: {
     type: Object as PropType<ColorFormats.RGBA>,
     required: true,
@@ -31,8 +28,12 @@ export default defineComponent({
     type: Number,
     required: true,
   },
-  },
+})
-  setup(props, { emit }) {
+
+const emit = defineEmits<{
+  (event: 'colorChange', payload: ColorFormats.HSLA): void
+}>()
+
 const oldHue = ref(0)
 const pullDirection = ref('')
 
@@ -90,16 +91,7 @@ export default defineComponent({
   window.addEventListener('mousemove', handleChange)
   window.addEventListener('mouseup', unbindEventListeners)
 }
-
 onUnmounted(unbindEventListeners)
-
-    return {
-      hueRef,
-      handleMouseDown,
-      pointerLeft,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/components/ColorPicker/Saturation.vue

@@ -18,15 +18,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onUnmounted, PropType, ref } from 'vue'
+import { computed, onUnmounted, PropType, ref } from 'vue'
 import tinycolor, { ColorFormats } from 'tinycolor2'
 import { throttle, clamp } from 'lodash'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'saturation',
-  emits: ['colorChange'],
-  props: {
   value: {
     type: Object as PropType<ColorFormats.RGBA>,
     required: true,
@@ -35,8 +32,12 @@ export default defineComponent({
     type: Number,
     required: true,
   },
-  },
+})
-  setup(props, { emit }) {
+
+const emit = defineEmits<{
+  (event: 'colorChange', payload: ColorFormats.HSVA): void
+}>()
+
 const color = computed(() => {
   const hsva = tinycolor(props.value).toHsv()
   if (props.hue !== -1) hsva.h = props.hue
@@ -47,7 +48,7 @@ export default defineComponent({
 const pointerTop = computed(() => (-(color.value.v * 100) + 1) + 100 + '%')
 const pointerLeft = computed(() => color.value.s * 100 + '%')
 
-    const emitChangeEvent = throttle(function(param) {
+const emitChangeEvent = throttle(function(param: ColorFormats.HSVA) {
   emit('colorChange', param)
 }, 20, { leading: true, trailing: false })
 
@@ -83,18 +84,7 @@ export default defineComponent({
   window.addEventListener('mousemove', handleChange)
   window.addEventListener('mouseup', unbindEventListeners)
 }
-
 onUnmounted(unbindEventListeners)
-
-    return {
-      saturationRef,
-      bgColor,
-      handleMouseDown,
-      pointerTop,
-      pointerLeft,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/components/ColorPicker/index.vue

@@ -72,8 +72,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import tinycolor, { ColorFormats } from 'tinycolor2'
 import { debounce } from 'lodash'
 import { toCanvas } from 'html-to-image'
@@ -86,6 +86,17 @@ import EditableInput from './EditableInput.vue'
 
 import { message } from 'ant-design-vue'
 
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '#e86b99',
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', payload: string): void
+}>()
+
 const RECENT_COLORS = 'RECENT_COLORS'
 
 const presetColorConfig = [
@@ -132,23 +143,6 @@ const getPresetColors = () => {
 const themeColors = ['#000000', '#ffffff', '#eeece1', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c']
 const standardColors = ['#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57', '#00afee', '#0071be', '#00215f', '#72349d']
 
-export default defineComponent({
-  name: 'color-picker',
-  components: {
-    Alpha,
-    Checkboard,
-    Hue,
-    Saturation,
-    EditableInput,
-  },
-  emits: ['update:modelValue'],
-  props: {
-    modelValue: {
-      type: String,
-      default: '#e86b99',
-    },
-  },
-  setup(props, { emit }) {
 const hue = ref(-1)
 const recentColors = ref<string[]>([])
 
@@ -281,21 +275,6 @@ export default defineComponent({
     document.body.removeChild(maskRef)
   })
 }
-
-    return {
-      themeColors,
-      standardColors,
-      presetColors,
-      color,
-      hue,
-      currentColor,
-      changeColor,
-      selectPresetColor,
-      recentColors,
-      pickColor,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/components/Contextmenu/MenuContent.vue

@@ -30,13 +30,11 @@
   </ul>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { PropType, defineComponent } from 'vue'
+import { PropType } from 'vue'
 import { ContextmenuItem } from './types'
 
-export default defineComponent({
+defineProps({
-  name: 'menu-content',
-  props: {
   menus: {
     type: Array as PropType<ContextmenuItem[]>,
     required: true,
@@ -45,7 +43,6 @@ export default defineComponent({
     type: Function,
     required: true,
   },
-  },
 })
 </script>
 

src/components/Contextmenu/index.vue

@@ -20,18 +20,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import { ContextmenuItem, Axis } from './types'
 
 import MenuContent from './MenuContent.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'contextmenu',
-  components: {
-    MenuContent,
-  },
-  props: {
   axis: {
     type: Object as PropType<Axis>,
     required: true,
@@ -48,8 +43,8 @@ export default defineComponent({
     type: Function,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const style = computed(() => {
   const MENU_WIDTH = 170
   const MENU_HEIGHT = 30
@@ -78,13 +73,6 @@ export default defineComponent({
   if (item.handler) item.handler(props.el)
   props.removeContextmenu()
 }
-
-    return {
-      style,
-      handleClickMenuItem,
-    }
-  },
-})
 </script>
 
 <style lang="scss">

src/components/FileInput.vue

@@ -12,19 +12,20 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
+import { ref } from 'vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'file-input',
-  emits: ['change'],
-  props: {
   accept: {
     type: String,
     default: 'image/*',
   },
-  },
+})
-  setup(props, { emit }) {
+
+const emit = defineEmits<{
+  (event: 'change', payload: FileList): void
+}>()
+
 const inputRef = ref<HTMLInputElement>()
 
 const handleClick = () => {
@@ -36,14 +37,6 @@ export default defineComponent({
   const files = (e.target as HTMLInputElement).files
   if (files) emit('change', files)
 }
-
-    return {
-      handleClick,
-      handleChange,
-      inputRef,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/components/FullscreenSpin.vue

@@ -2,12 +2,8 @@
   <div class="fullscreen-spin" v-if="loading"><Spin :tip="tip" size="large" /></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
+const props = defineProps({
-
-export default defineComponent({
-  name: 'fullscreen-spin',
-  props: {
   loading: {
     type: Boolean,
     default: false,
@@ -16,7 +12,6 @@ export default defineComponent({
     type: String,
     default: '',
   },
-  },
 })
 </script>
 

src/components/LaTeXEditor/FormulaContent.vue

@@ -19,13 +19,11 @@
   </svg>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { hfmath } from './hfmath'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'formula-content',
-  props: {
   latex: {
     type: String,
     required: true,
@@ -38,8 +36,8 @@ export default defineComponent({
     type: Number,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const box = ref({ x: 0, y: 0, w: 0, h: 0 })
 const pathd = ref('')
 
@@ -59,14 +57,6 @@ export default defineComponent({
   }
   return 1
 })
-
-    return {
-      box,
-      pathd,
-      scale,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/components/LaTeXEditor/SymbolContent.vue

@@ -2,19 +2,17 @@
   <div class="symbol-content" v-html="svg"></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { hfmath } from './hfmath'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'symbol-content',
-  props: {
   latex: {
     type: String,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const svg = computed(() => {
   const eq = new hfmath(props.latex)
   return eq.svg({
@@ -22,10 +20,4 @@ export default defineComponent({
     SCALE_Y: 10,
   })
 })
-
-    return {
-      svg,
-    }
-  },
-})
 </script>

src/components/LaTeXEditor/index.vue

@@ -65,8 +65,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { hfmath } from './hfmath'
 import { FORMULA_LIST, SYMBOL_LIST } from '@/configs/latex'
 
@@ -83,20 +83,28 @@ const tabs: Tab[] = [
   { label: '预置公式', value: 'formula' },
 ]
 
-export default defineComponent({
+interface LatexResult {
-  name: 'latex-editor',
+  latex: string
-  emits: ['update', 'close'],
+  path: string
-  components: {
+  w: number
-    FormulaContent,
+  h: number
-    SymbolContent,
+}
-  },
+
-  props: {
+const props = defineProps({
   value: {
     type: String,
     default: '',
   },
-  },
+})
-  setup(props, { emit }) {
+
+const emit = defineEmits<{
+  (event: 'update', payload: LatexResult): void
+  (event: 'close'): void
+}>()
+
+const formulaList = FORMULA_LIST
+const symbolList = SYMBOL_LIST
+
 const latex = ref('')
 const toolbarState = ref<'symbol' | 'formula'>('symbol')
 const textAreaRef = ref<HTMLTextAreaElement>()
@@ -133,22 +141,6 @@ export default defineComponent({
   textAreaRef.value.focus()
   document.execCommand('insertText', false, latex)
 }
-
-    return {
-      tabs,
-      latex,
-      toolbarState,
-      selectedSymbolKey,
-      formulaList: FORMULA_LIST,
-      symbolList: SYMBOL_LIST,
-      symbolPool,
-      textAreaRef,
-      update,
-      close,
-      insertSymbol,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/components/WritingBoard.vue

@@ -55,13 +55,11 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
 import { throttle } from 'lodash'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'writing-board',
-  props: {
   color: {
     type: String,
     default: '#ffcc00',
@@ -74,8 +72,8 @@ export default defineComponent({
     type: Boolean,
     default: false,
   },
-  },
+})
-  setup(props) {
+
 let ctx: CanvasRenderingContext2D | null = null
 const writingBoardRef = ref<HTMLElement>()
 const canvasRef = ref<HTMLCanvasElement>()
@@ -324,25 +322,10 @@ export default defineComponent({
   }
 }, 300, { leading: true, trailing: false })
 
-    return {
+defineExpose({
-      mouse,
-      mouseInCanvas,
-      penSize,
-      rubberSize,
-      markSize,
-      writingBoardRef,
-      canvasRef,
-      canvasWidth,
-      canvasHeight,
-      handleMousedown,
-      handleMousemove,
-      handleMouseup,
   clearCanvas,
   getImageDataURL,
   setImageDataURL,
-      mousewheelListener,
-    }
-  },
 })
 </script>
 

src/hooks/useExport.ts

@@ -62,7 +62,7 @@ export default () => {
   }
   
   // 导入pptist文件
-  const importSpecificFile = (files: File[], cover = false) => {
+  const importSpecificFile = (files: FileList, cover = false) => {
     const file = files[0]
 
     const reader = new FileReader()

src/shims-vue.d.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>

src/views/Editor/Canvas/AlignmentLine.vue

@@ -4,13 +4,11 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, PropType, defineComponent } from 'vue'
+import { computed, PropType } from 'vue'
 import { AlignmentLineAxis } from '@/types/edit'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'alignment-line',
-  props: {
   type: {
     type: String as PropType<'vertical' | 'horizontal'>,
     required: true,
@@ -27,8 +25,8 @@ export default defineComponent({
     type: Number,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 // 吸附对齐线的位置
 const left = computed(() => props.axis.x * props.canvasScale + 'px')
 const top = computed(() => props.axis.y * props.canvasScale + 'px')
@@ -38,14 +36,6 @@ export default defineComponent({
   if (props.type === 'vertical') return { height: props.length * props.canvasScale + 'px' }
   return { width: props.length * props.canvasScale + 'px' }
 })
-
-    return {
-      left,
-      top,
-      sizeStyle,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/EditableElement.vue

@@ -16,8 +16,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import { ElementTypes, PPTElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 
@@ -41,9 +41,7 @@ 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'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'editable-element',
-  props: {
   elementInfo: {
     type: Object as PropType<PPTElement>,
     required: true,
@@ -64,8 +62,8 @@ export default defineComponent({
     type: Function as PropType<() => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const currentElementComponent = computed(() => {
   const elementTypeMap = {
     [ElementTypes.IMAGE]: ImageElement,
@@ -181,11 +179,4 @@ export default defineComponent({
     },
   ]
 }
-
-    return {
-      currentElementComponent,
-      contextmenus,
-    }
-  },
-})
 </script>

src/views/Editor/Canvas/ElementCreateSelection.vue

@@ -25,15 +25,16 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useKeyboardStore } from '@/store'
+import { CreateElementSelectionData } from '@/types/edit'
+
+const emit = defineEmits<{
+  (event: 'created', payload: CreateElementSelectionData): void
+}>()
 
-export default defineComponent({
-  name: 'element-create-selection',
-  emits: ['created'],
-  setup(props, { emit }) {
 const mainStore = useMainStore()
 const { creatingElement } = storeToRefs(mainStore)
 const { ctrlOrShiftKeyActive } = storeToRefs(useKeyboardStore())
@@ -120,8 +121,8 @@ export default defineComponent({
       (Math.abs(endPageX - startPageX) >= minSize || Math.abs(endPageY - startPageY) >= minSize)
     ) {
       emit('created', {
-            start: start.value,
+        start: start.value!,
-            end: end.value,
+        end: end.value!,
       })
     }
     else if (
@@ -129,8 +130,8 @@ export default defineComponent({
       (Math.abs(endPageX - startPageX) >= minSize && Math.abs(endPageY - startPageY) >= minSize)
     ) {
       emit('created', {
-            start: start.value,
+        start: start.value!,
-            end: end.value,
+        end: end.value!,
       })
     }
     else {
@@ -203,18 +204,6 @@ export default defineComponent({
     height: height + 'px',
   }
 })
-
-    return {
-      selectionRef,
-      start,
-      end,
-      creatingElement,
-      createSelection,
-      lineData,
-      position,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/GridLines.vue

@@ -13,17 +13,14 @@
   </svg>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, computed } from 'vue'
+import { computed } from 'vue'
 import tinycolor from 'tinycolor2'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { VIEWPORT_SIZE } from '@/configs/canvas'
 import { SlideBackground } from '@/types/slides'
 
-export default defineComponent({
-  name: 'grid-lines',
-  setup() {
 const { canvasScale } = storeToRefs(useMainStore())
 const { currentSlide, viewportRatio } = storeToRefs(useSlidesStore())
 
@@ -53,15 +50,7 @@ export default defineComponent({
   return path
 }
 
-    return {
+const path = getPath()
-      canvasScale,
-      gridColor,
-      width: VIEWPORT_SIZE,
-      height: VIEWPORT_SIZE * viewportRatio.value,
-      path: getPath(),
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/LinkDialog.vue

@@ -37,8 +37,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElementLink } from '@/types/slides'
@@ -52,13 +52,10 @@ interface TabItem {
   label: string
 }
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'link-dialog',
+  (event: 'close'): void
-  emits: ['close'],
+}>()
-  components: {
+
-    ThumbnailSlide,
-  },
-  setup(props, { emit }) {
 const { handleElement } = storeToRefs(useMainStore())
 const { slides } = storeToRefs(useSlidesStore())
 
@@ -103,19 +100,6 @@ export default defineComponent({
     else address.value = ''
   }
 }
-
-    return {
-      slides,
-      tabs,
-      type,
-      address,
-      slideId,
-      selectedSlide,
-      close,
-      save,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/MouseSelection.vue

@@ -9,12 +9,8 @@
   ></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
+defineProps({
-
-export default defineComponent({
-  name: 'mouse-selection',
-  props: {
   top: {
     type: Number,
     required: true,
@@ -38,7 +34,6 @@ export default defineComponent({
       return [1, 2, 3, 4].includes(value)
     },
   },
-  }
 })
 </script>
 

src/views/Editor/Canvas/Operate/BorderLine.vue

@@ -2,13 +2,11 @@
   <div :class="['border-line', type, { 'wide': isWide }]"></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, PropType } from 'vue'
+import { PropType } from 'vue'
 import { OperateBorderLines } from '@/types/edit'
 
-export default defineComponent({
+defineProps({
-  name: 'border-line',
-  props: {
   type: {
     type: String as PropType<OperateBorderLines>,
     required: true,
@@ -17,7 +15,6 @@ export default defineComponent({
     type: Boolean,
     default: false,
   },
-  },
 })
 </script>
 

src/views/Editor/Canvas/Operate/CommonElementOperate.vue

@@ -28,7 +28,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTShapeElement, PPTVideoElement, PPTLatexElement, PPTAudioElement } from '@/types/slides'
@@ -41,15 +47,7 @@ import BorderLine from './BorderLine.vue'
 
 type PPTElement = PPTShapeElement | PPTVideoElement | PPTLatexElement | PPTAudioElement
 
-export default defineComponent({
+const props = defineProps({
-  name: 'common-element-operate',
-  inheritAttrs: false,
-  components: {
-    RotateHandler,
-    ResizeHandler,
-    BorderLine,
-  },
-  props: {
   elementInfo: {
     type: Object as PropType<PPTElement>,
     required: true,
@@ -66,8 +64,8 @@ export default defineComponent({
     type: Function as PropType<(e: MouseEvent, element: PPTElement, command: OperateResizeHandlers) => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { canvasScale } = storeToRefs(useMainStore())
 
 const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
@@ -75,13 +73,4 @@ export default defineComponent({
 const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
 
 const cannotRotate = computed(() => ['video', 'audio'].includes(props.elementInfo.type))
-
-    return {
-      scaleWidth,
-      resizeHandlers,
-      borderLines,
-      cannotRotate,
-    }
-  },
-})
 </script>

src/views/Editor/Canvas/Operate/ImageElementOperate.vue

@@ -27,7 +27,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTImageElement } from '@/types/slides'
@@ -38,15 +44,7 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'image-element-operate',
-  inheritAttrs: false,
-  components: {
-    RotateHandler,
-    ResizeHandler,
-    BorderLine,
-  },
-  props: {
   elementInfo: {
     type: Object as PropType<PPTImageElement>,
     required: true,
@@ -63,8 +61,8 @@ export default defineComponent({
     type: Function as PropType<(e: MouseEvent, element: PPTImageElement, command: OperateResizeHandlers) => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { canvasScale, clipingImageElementId } = storeToRefs(useMainStore())
 
 const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)
@@ -72,15 +70,6 @@ export default defineComponent({
 const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
 const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
 const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
-
-    return {
-      isCliping,
-      scaleWidth,
-      resizeHandlers,
-      borderLines,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/Operate/LineElementOperate.vue

@@ -34,7 +34,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTLineElement } from '@/types/slides'
@@ -42,13 +48,7 @@ import { OperateLineHandlers } from '@/types/edit'
 
 import ResizeHandler from './ResizeHandler.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'line-element-operate',
-  inheritAttrs: false,
-  components: {
-    ResizeHandler,
-  },
-  props: {
   elementInfo: {
     type: Object as PropType<PPTLineElement>,
     required: true,
@@ -61,8 +61,8 @@ export default defineComponent({
     type: Function as PropType<(e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { canvasScale } = storeToRefs(useMainStore())
 
 const svgWidth = computed(() => Math.max(props.elementInfo.start[0], props.elementInfo.end[0]))
@@ -117,15 +117,6 @@ export default defineComponent({
 
   return handlers
 })
-
-    return {
-      svgWidth,
-      svgHeight,
-      canvasScale,
-      resizeHandlers,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/Operate/LinkHandler.vue

@@ -10,16 +10,14 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTElement, PPTElementLink } from '@/types/slides'
 import useLink from '@/hooks/useLink'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'link-handler',
-  props: {
   elementInfo: {
     type: Object as PropType<PPTElement>,
     required: true,
@@ -32,21 +30,11 @@ export default defineComponent({
     type: Function as PropType<() => void>,
     required: true,
   },
-  },
-  setup(props) {
-    const { canvasScale } = storeToRefs(useMainStore())
-
-    const { removeLink } = useLink()
-
-    const height = computed(() => props.elementInfo.type === 'line' ? 0 : props.elementInfo.height)
-
-    return {
-      canvasScale,
-      height,
-      removeLink,
-    }
-  },
 })
+
+const { canvasScale } = storeToRefs(useMainStore())
+const { removeLink } = useLink()
+const height = computed(() => props.elementInfo.type === 'line' ? 0 : props.elementInfo.height)
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/Operate/MultiSelectOperate.vue

@@ -20,8 +20,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, ref, PropType, watchEffect } from 'vue'
+import { computed, ref, PropType, watchEffect } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTElement } from '@/types/slides'
@@ -32,13 +32,7 @@ import useCommonOperate from '../hooks/useCommonOperate'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'multi-select-operate',
-  components: {
-    ResizeHandler,
-    BorderLine,
-  },
-  props: {
   elementList: {
     type: Array as PropType<PPTElement[]>,
     required: true,
@@ -47,8 +41,8 @@ export default defineComponent({
     type: Function as PropType<(e: MouseEvent, range: MultiSelectRange, command: OperateResizeHandlers) => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { activeElementIdList, canvasScale } = storeToRefs(useMainStore())
 
 const localActiveElementList = computed(() => props.elementList.filter(el => activeElementIdList.value.includes(el.id)))
@@ -82,16 +76,6 @@ export default defineComponent({
     return true
   })
 })
-
-    return {
-      range,
-      canvasScale,
-      borderLines,
-      disableResize,
-      resizeHandlers,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/Operate/ResizeHandler.vue

@@ -2,13 +2,11 @@
   <div :class="['resize-handler', rotateClassName, type]"></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import { OperateResizeHandlers } from '@/types/edit'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'resize-handler',
-  props: {
   type: {
     type: String as PropType<OperateResizeHandlers>,
     default: '',
@@ -17,8 +15,8 @@ export default defineComponent({
     type: Number,
     default: 0,
   },
-  },
+})
-  setup(props) {
+
 const rotateClassName = computed(() => {
   const prefix = 'rotate-'
   const rotate = props.rotate
@@ -32,12 +30,6 @@ export default defineComponent({
   else if (rotate > -67.5 && rotate <= -22.5) return prefix + 135
   return prefix + 0
 })
-
-    return {
-      rotateClassName,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/Operate/RotateHandler.vue

@@ -2,10 +2,8 @@
   <div class="rotate-handler"></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-export default {
+
-  name: 'rotate-handler',
-}
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/Operate/ShapeElementOperate.vue

@@ -27,7 +27,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTShapeElement } from '@/types/slides'
@@ -38,15 +44,7 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'shape-element-operate',
-  inheritAttrs: false,
-  components: {
-    RotateHandler,
-    ResizeHandler,
-    BorderLine,
-  },
-  props: {
   elementInfo: {
     type: Object as PropType<PPTShapeElement>,
     required: true,
@@ -63,19 +61,11 @@ export default defineComponent({
     type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandlers) => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { canvasScale } = storeToRefs(useMainStore())
 
 const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
 const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
 const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
-
-    return {
-      scaleWidth,
-      resizeHandlers,
-      borderLines,
-    }
-  },
-})
 </script>

src/views/Editor/Canvas/Operate/TableElementOperate.vue

@@ -27,7 +27,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTTableElement } from '@/types/slides'
@@ -38,15 +44,7 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'table-element-operate',
-  inheritAttrs: false,
-  components: {
-    RotateHandler,
-    ResizeHandler,
-    BorderLine,
-  },
-  props: {
   elementInfo: {
     type: Object as PropType<PPTTableElement>,
     required: true,
@@ -63,8 +61,8 @@ export default defineComponent({
     type: Function as PropType<(e: MouseEvent, element: PPTTableElement, command: OperateResizeHandlers) => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { canvasScale } = storeToRefs(useMainStore())
 
 const outlineWidth = computed(() => props.elementInfo.outline.width || 1)
@@ -73,12 +71,4 @@ export default defineComponent({
 const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
 
 const { textElementResizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
-
-    return {
-      scaleWidth,
-      textElementResizeHandlers,
-      borderLines,
-    }
-  },
-})
 </script>

src/views/Editor/Canvas/Operate/TextElementOperate.vue

@@ -27,7 +27,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTTextElement } from '@/types/slides'
@@ -38,15 +44,7 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'text-element-operate',
-  inheritAttrs: false,
-  components: {
-    RotateHandler,
-    ResizeHandler,
-    BorderLine,
-  },
-  props: {
   elementInfo: {
     type: Object as PropType<PPTTextElement>,
     required: true,
@@ -63,20 +61,12 @@ export default defineComponent({
     type: Function as PropType<(e: MouseEvent, element: PPTTextElement, command: OperateResizeHandlers) => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { canvasScale } = storeToRefs(useMainStore())
 
 const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
 const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
 
 const { textElementResizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
-
-    return {
-      scaleWidth,
-      textElementResizeHandlers,
-      borderLines,
-    }
-  },
-})
 </script>

src/views/Editor/Canvas/Operate/index.vue

@@ -36,8 +36,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, PropType, computed } from 'vue'
+import { PropType, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { ElementTypes, PPTElement, PPTLineElement, PPTVideoElement, PPTAudioElement } from '@/types/slides'
@@ -51,12 +51,7 @@ import TableElementOperate from './TableElementOperate.vue'
 import CommonElementOperate from './CommonElementOperate.vue'
 import LinkHandler from './LinkHandler.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'operate',
-  components: {
-    LinkHandler,
-  },
-  props: {
   elementInfo: {
     type: Object as PropType<PPTElement>,
     required: true,
@@ -93,8 +88,8 @@ export default defineComponent({
     type: Function as PropType<() => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { canvasScale, toolbarState } = storeToRefs(useMainStore())
 const { formatedAnimations } = storeToRefs(useSlidesStore())
 
@@ -124,17 +119,6 @@ export default defineComponent({
 
 const rotate = computed(() => 'rotate' in props.elementInfo ? props.elementInfo.rotate : 0)
 const height = computed(() => 'height' in props.elementInfo ? props.elementInfo.height : 0)
-
-    return {
-      currentOperateComponent,
-      canvasScale,
-      toolbarState,
-      elementIndexListInAnimation,
-      rotate,
-      height,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/Ruler.vue

@@ -36,8 +36,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 
@@ -48,26 +48,18 @@ interface ViewportStyles {
   height: number
 }
 
-export default defineComponent({
+const props = defineProps({
-  props: {
   viewportStyles: {
     type: Object as PropType<ViewportStyles>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { canvasScale } = storeToRefs(useMainStore())
 
 const markerSize = computed(() => {
   return props.viewportStyles.width * canvasScale.value / 10
 })
-
-    return {
-      canvasScale,
-      markerSize,
-    }
-  },
-})
 </script>
 
 

src/views/Editor/Canvas/ViewportBackground.vue

@@ -7,32 +7,19 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { SlideBackground } from '@/types/slides'
 import GridLines from './GridLines.vue'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
-export default defineComponent({
-  name: 'viewport-background',
-  components: {
-    GridLines,
-  },
-  setup() {
 const { showGridLines } = storeToRefs(useMainStore())
 const { currentSlide } = storeToRefs(useSlidesStore())
 const background = computed<SlideBackground | undefined>(() => currentSlide.value?.background)
 
 const { backgroundStyle } = useSlideBackgroundStyle(background)
-
-    return {
-      showGridLines,
-      backgroundStyle,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/index.vue

@@ -91,8 +91,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onMounted, provide, ref, watch, watchEffect } from 'vue'
+import { onMounted, provide, ref, watch, watchEffect } from 'vue'
 import { throttle } from 'lodash'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
@@ -130,20 +130,6 @@ import MultiSelectOperate from './Operate/MultiSelectOperate.vue'
 import Operate from './Operate/index.vue'
 import LinkDialog from './LinkDialog.vue'
 
-export default defineComponent({
-  name: 'editor-canvas',
-  components: {
-    EditableElement,
-    MouseSelection,
-    ViewportBackground,
-    AlignmentLine,
-    Ruler,
-    ElementCreateSelection,
-    MultiSelectOperate,
-    Operate,
-    LinkDialog,
-  },
-  setup() {
 const mainStore = useMainStore()
 const {
   activeElementIdList,
@@ -284,38 +270,6 @@ export default defineComponent({
 }
 
 provide(injectKeySlideScale, canvasScale)
-
-    return {
-      elementList,
-      activeElementIdList,
-      handleElementId,
-      activeGroupElementId,
-      canvasRef,
-      viewportRef,
-      viewportStyles,
-      canvasScale,
-      mouseSelection,
-      mouseSelectionVisible,
-      mouseSelectionQuadrant,
-      creatingElement,
-      alignmentLines,
-      linkDialogVisible,
-      spaceKeyState,
-      showRuler,
-      openLinkDialog,
-      handleClickBlankArea,
-      removeEditorAreaFocus,
-      insertElementFromCreateSelection,
-      selectElement,
-      rotateElement,
-      scaleElement,
-      dragLineElement,
-      scaleMultiElement,
-      handleMousewheelCanvas,
-      contextmenus,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/CanvasTool/ChartPool.vue

@@ -14,26 +14,18 @@
   </ul>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { PresetChartType } from '@/types/slides'
-import { defineComponent } from 'vue'
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'chart-pool',
+  (event: 'select', payload: PresetChartType): void
-  emits: ['select'],
+}>()
-  setup(props, { emit }) {
+
 const chartList: PresetChartType[] = ['bar', 'horizontalBar', 'line', 'area', 'scatter', 'pie', 'ring']
 
 const selectChart = (chart: PresetChartType) => {
   emit('select', chart)
 }
-
-    return {
-      chartList,
-      selectChart,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/CanvasTool/LinePool.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="line-pool">
-    <div class="category" v-for="(item, i) in lineList" :key="item.type">
+    <div class="category" v-for="(item, i) in LINE_LIST" :key="item.type">
       <div class="category-name">{{item.type}}</div>
       <div class="line-list">
         <div class="line-item" v-for="(line, j) in item.children" :key="j">
@@ -48,31 +48,18 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
 import { LINE_LIST, LinePoolItem } from '@/configs/lines'
 
 import LinePointMarker from '@/views/components/element/LineElement/LinePointMarker.vue'
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'line-pool',
+  (event: 'select', payload: LinePoolItem): void
-  emits: ['select'],
+}>()
-  components: {
-    LinePointMarker,
-  },
-  setup(props, { emit }) {
-    const lineList = LINE_LIST
 
 const selectLine = (line: LinePoolItem) => {
   emit('select', line)
 }
-
-    return {
-      lineList,
-      selectLine,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/CanvasTool/MediaInput.vue

@@ -28,8 +28,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
+import { ref } from 'vue'
 import { message } from 'ant-design-vue'
 
 type TypeKey = 'video' | 'audio'
@@ -38,10 +38,12 @@ interface TabItem {
   label: string
 }
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'media-input',
+  (event: 'insertVideo', payload: string): void
-  emits: ['insertVideo', 'insertAudio', 'close'],
+  (event: 'insertAudio', payload: string): void
-  setup(props, { emit }) {
+  (event: 'close'): void
+}>()
+
 const type = ref<TypeKey>('video')
 
 const videoSrc = ref('https://mazwai.com/videvo_files/video/free/2019-01/small_watermarked/181004_04_Dolphins-Whale_06_preview.webm')
@@ -63,18 +65,6 @@ export default defineComponent({
 }
 
 const close = () => emit('close')
-
-    return {
-      type,
-      videoSrc,
-      audioSrc,
-      tabs,
-      insertVideo,
-      insertAudio,
-      close,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/CanvasTool/ShapePool.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="shape-pool">
-    <div class="category" v-for="item in shapeList" :key="item.type">
+    <div class="category" v-for="item in SHAPE_LIST" :key="item.type">
       <div class="category-name">{{item.type}}</div>
       <div class="shape-list">
         <div class="shape-item" v-for="(shape, index) in item.children" :key="index">
@@ -33,26 +33,16 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
 import { SHAPE_LIST, ShapePoolItem } from '@/configs/shapes'
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'shape-pool',
+  (event: 'select', payload: ShapePoolItem): void
-  emits: ['select'],
+}>()
-  setup(props, { emit }) {
-    const shapeList = SHAPE_LIST
 
 const selectShape = (shape: ShapePoolItem) => {
   emit('select', shape)
 }
-
-    return {
-      shapeList,
-      selectShape,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/CanvasTool/TableGenerator.vue

@@ -51,15 +51,20 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
+import { ref } from 'vue'
-
 import { message } from 'ant-design-vue'
 
-export default defineComponent({
+interface InsertData {
-  name: 'table-generator',
+  row: number
-  emits: ['insert', 'close'],
+  col: number
-  setup(props, { emit }) {
+}
+
+const emit = defineEmits<{
+  (event: 'insert', payload: InsertData): void
+  (event: 'close'): void
+}>()
+
 const endCell = ref<number[]>([])
 const customRow = ref(3)
 const customCol = ref(3)
@@ -82,18 +87,6 @@ export default defineComponent({
   emit('close')
   isCustom.value = false
 }
-
-    return {
-      endCell,
-      customRow,
-      customCol,
-      handleClickTable,
-      insertCustomTable,
-      isCustom,
-      close,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/CanvasTool/index.vue

@@ -106,8 +106,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSnapshotStore } from '@/store'
 import { getImageDataURL } from '@/utils/image'
@@ -124,17 +124,6 @@ import TableGenerator from './TableGenerator.vue'
 import MediaInput from './MediaInput.vue'
 import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
 
-export default defineComponent({
-  name: 'canvas-tool',
-  components: {
-    ShapePool,
-    LinePool,
-    ChartPool,
-    TableGenerator,
-    MediaInput,
-    LaTeXEditor,
-  },
-  setup() {
 const mainStore = useMainStore()
 const { creatingElement } = storeToRefs(mainStore)
 const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
@@ -165,7 +154,7 @@ export default defineComponent({
   createAudioElement,
 } = useCreateElement()
 
-    const insertImageElement = (files: File[]) => {
+const insertImageElement = (files: FileList) => {
   const imageFile = files[0]
   if (!imageFile) return
   getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
@@ -202,37 +191,6 @@ export default defineComponent({
   })
   linePoolVisible.value = false
 }
-
-    return {
-      scaleCanvas,
-      resetCanvas,
-      canvasScalePercentage,
-      canvasScaleVisible,
-      canvasScalePresetList,
-      applyCanvasPresetScale,
-      canUndo,
-      canRedo,
-      redo,
-      undo,
-      insertImageElement,
-      shapePoolVisible,
-      linePoolVisible,
-      chartPoolVisible,
-      tableGeneratorVisible,
-      mediaInputVisible,
-      latexEditorVisible,
-      creatingElement,
-      drawText,
-      drawShape,
-      drawLine,
-      createChartElement,
-      createTableElement,
-      createLatexElement,
-      createVideoElement,
-      createAudioElement,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/EditorHeader/HotkeyDoc.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="hotkey-doc">
-    <template v-for="item in hotkeys" :key="item.type">
+    <template v-for="item in HOTKEY_DOC" :key="item.type">
       <div class="title">{{item.type}}</div>
       <div class="hotkey-item" v-for="hotkey in item.children" :key="hotkey.label">
         <div class="label">{{hotkey.label}}</div>
@@ -10,18 +10,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
 import { HOTKEY_DOC } from '@/configs/hotkey' 
-
-export default defineComponent({
-  name: 'hotkey-doc',
-  setup() {
-    return {
-      hotkeys: HOTKEY_DOC,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/EditorHeader/index.vue

@@ -78,8 +78,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import useScreening from '@/hooks/useScreening'
@@ -89,12 +89,6 @@ import useExport from '@/hooks/useExport'
 
 import HotkeyDoc from './HotkeyDoc.vue'
 
-export default defineComponent({
-  name: 'editor-header',
-  components: {
-    HotkeyDoc,
-  },
-  setup() {
 const mainStore = useMainStore()
 const { showGridLines, showRuler } = storeToRefs(mainStore)
 
@@ -118,26 +112,6 @@ export default defineComponent({
 const goIssues = () => {
   window.open('https://github.com/pipipi-pikachu/PPTist/issues')
 }
-
-    return {
-      redo,
-      undo,
-      showGridLines,
-      showRuler,
-      hotkeyDrawerVisible,
-      importSpecificFile,
-      setDialogForExport,
-      enterScreening,
-      enterScreeningFromStart,
-      createSlide,
-      deleteSlide,
-      toggleGridLines,
-      toggleRuler,
-      resetSlides,
-      goIssues,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/ExportDialog/ExportImage.vue

@@ -75,20 +75,18 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'export-img-dialog',
+  (event: 'close'): void
-  components: {
+}>()
-    ThumbnailSlide,
+
-  },
-  setup(props, { emit }) {
 const { slides, currentSlide } = storeToRefs(useSlidesStore())
 
 const imageThumbnailsRef = ref<HTMLElement>()
@@ -115,22 +113,6 @@ export default defineComponent({
   if (!imageThumbnailsRef.value) return
   exportImage(imageThumbnailsRef.value, format.value, quality.value, ignoreWebfont.value)
 }
-    
-    return {
-      imageThumbnailsRef,
-      slides,
-      rangeType,
-      range,
-      format,
-      quality,
-      ignoreWebfont,
-      renderSlides,
-      exporting,
-      expImage,
-      close,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/ExportDialog/ExportJSON.vue

@@ -11,28 +11,18 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'export-json-dialog',
+  (event: 'close'): void
-  setup(props, { emit }) {
+}>()
-    const close = () => emit('close')
 
 const { slides } = storeToRefs(useSlidesStore())
-
 const { exportJSON } = useExport()
-    
+const close = () => emit('close')
-    return {
-      slides,
-      exportJSON,
-      close,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/ExportDialog/ExportPDF.vue

@@ -60,20 +60,18 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { print } from '@/utils/print'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'export-pdf-dialog',
+  (event: 'close'): void
-  components: {
+}>()
-    ThumbnailSlide,
+
-  },
-  setup(props, { emit }) {
 const { slides, currentSlide } = storeToRefs(useSlidesStore())
 
 const pdfThumbnailsRef = ref<HTMLElement>()
@@ -92,19 +90,6 @@ export default defineComponent({
   }
   print(pdfThumbnailsRef.value, pageSize)
 }
-    
-    return {
-      pdfThumbnailsRef,
-      slides,
-      currentSlide,
-      rangeType,
-      count,
-      padding,
-      expPDF,
-      close,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/ExportDialog/ExportPPTX.vue

@@ -39,17 +39,20 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'export-pptx-dialog',
+  (event: 'close'): void
-  setup(props, { emit }) {
+}>()
+
 const { slides, currentSlide } = storeToRefs(useSlidesStore())
 
+const { exportPPTX, exporting } = useExport()
+
 const rangeType = ref<'all' | 'current' | 'custom'>('all')
 const range = ref<[number, number]>([1, slides.value.length])
 const masterOverwrite = ref(true)
@@ -64,21 +67,6 @@ export default defineComponent({
 })
 
 const close = () => emit('close')
-
-    const { exportPPTX, exporting } = useExport()
-    
-    return {
-      slides,
-      rangeType,
-      range,
-      masterOverwrite,
-      exporting,
-      selectedSlides,
-      exportPPTX,
-      close,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/ExportDialog/ExportSpecificFile.vue

@@ -34,17 +34,20 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'export-pptist-dialog',
+  (event: 'close'): void
-  setup(props, { emit }) {
+}>()
+
 const { slides, currentSlide } = storeToRefs(useSlidesStore())
 
+const { exportSpecificFile } = useExport()
+
 const rangeType = ref<'all' | 'current' | 'custom'>('all')
 const range = ref<[number, number]>([1, slides.value.length])
 
@@ -58,19 +61,6 @@ export default defineComponent({
 })
 
 const close = () => emit('close')
-
-    const { exportSpecificFile } = useExport()
-    
-    return {
-      slides,
-      rangeType,
-      range,
-      selectedSlides,
-      exportSpecificFile,
-      close,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/ExportDialog/index.vue

@@ -15,8 +15,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { DialogForExportTypes } from '@/types/export'
@@ -32,9 +32,6 @@ interface TabItem {
   label: string
 }
 
-export default defineComponent({
-  name: 'export-dialog',
-  setup() {
 const mainStore = useMainStore()
 const { dialogForExport } = storeToRefs(mainStore)
 
@@ -58,15 +55,6 @@ export default defineComponent({
   }
   return dialogMap[dialogForExport.value] || null
 })
-
-    return {
-      currentDialogComponent,
-      tabs,
-      dialogForExport,
-      setDialogForExport,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Remark/index.vue

@@ -12,21 +12,22 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'remark',
-  emits: ['update:height'],
-  props: {
   height: {
     type: Number,
     required: true,
   },
-  },
+})
-  setup(props, { emit }) {
+
+const emit = defineEmits<{
+  (event: 'update:height', payload: number): void
+}>()
+
 const slidesStore = useSlidesStore()
 const { currentSlide } = storeToRefs(slidesStore)
 
@@ -62,14 +63,6 @@ export default defineComponent({
     document.onmouseup = null
   }
 }
-
-    return {
-      remark,
-      handleInput,
-      resize,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Thumbnails/LayoutPool.vue

@@ -11,33 +11,22 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Slide } from '@/types/slides'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'layout-pool',
+  (event: 'select', payload: Slide): void
-  emits: ['select'],
+}>()
-  components: {
+
-    ThumbnailSlide,
-  },
-  setup(props, { emit }) {
 const { layouts } = storeToRefs(useSlidesStore())
 
 const selectSlideTemplate = (slide: Slide) => {
   emit('select', slide)
 }
-
-    return {
-      layouts,
-      selectSlideTemplate,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Thumbnails/index.vue

@@ -43,8 +43,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
 import { fillDigit } from '@/utils/common'
@@ -57,14 +57,6 @@ import Draggable from 'vuedraggable'
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import LayoutPool from './LayoutPool.vue'
 
-export default defineComponent({
-  name: 'thumbnails',
-  components: {
-    Draggable,
-    ThumbnailSlide,
-    LayoutPool,
-  },
-  setup() {
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
 const keyboardStore = useKeyboardStore()
@@ -242,24 +234,6 @@ export default defineComponent({
     },
   ]
 }
-
-    return {
-      slides,
-      slideIndex,
-      selectedSlidesIndex,
-      presetLayoutPopoverVisible,
-      slidesLoadLimit,
-      createSlide,
-      createSlideByTemplate,
-      setThumbnailsFocus,
-      handleClickSlideThumbnail,
-      contextmenusThumbnails,
-      contextmenusThumbnailItem,
-      fillDigit,
-      handleDragEnd,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -30,9 +30,9 @@
                     <div 
                       class="animation-box"
                       :class="[
-                        `${prefix}animated`,
+                        `${ANIMATION_CLASS_PREFIX}animated`,
-                        `${prefix}fast`,
+                        `${ANIMATION_CLASS_PREFIX}fast`,
-                        hoverPreviewAnimation === item.value && `${prefix}${item.value}`,
+                        hoverPreviewAnimation === item.value && `${ANIMATION_CLASS_PREFIX}${item.value}`,
                       ]"
                     >{{item.name}}</div>
                   </div>
@@ -113,8 +113,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { nanoid } from 'nanoid'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
@@ -157,12 +157,6 @@ interface TabItem {
 
 const animationTypes: AnimationType[] = ['in', 'out', 'attention']
 
-export default defineComponent({
-  name: 'element-animation-panel',
-  components: {
-    Draggable,
-  },
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId } = storeToRefs(useMainStore())
 const { currentSlide, formatedAnimations, currentSlideAnimations } = storeToRefs(slidesStore)
@@ -327,34 +321,11 @@ export default defineComponent({
   handlePopoverVisibleChange(true)
 }
 
-    return {
+const animations = {
-      tabs,
-      activeTab,
-      handleAnimationId,
-      handleElement,
-      animationPoolVisible,
-      animationSequence,
-      hoverPreviewAnimation,
-      handleElementAnimation,
-      popoverMaskHide,
-      animations: {
   in: ENTER_ANIMATIONS,
   out: EXIT_ANIMATIONS,
   attention: ATTENTION_ANIMATIONS,
-      },
-      prefix: ANIMATION_CLASS_PREFIX,
-      animationTypes,
-      addAnimation,
-      deleteAnimation,
-      handleDragEnd,
-      runAnimation,
-      updateElementAnimationDuration,
-      updateElementAnimationTrigger,
-      handlePopoverVisibleChange,
-      openAnimationPool,
 }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementPositionPanel.vue

@@ -2,12 +2,12 @@
   <div class="element-positopn-panel">
     <div class="title">层级：</div>
     <ButtonGroup class="row">
-      <Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.TOP)"><IconSendToBack class="btn-icon" /> 置于顶层</Button>
+      <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.TOP)"><IconSendToBack class="btn-icon" /> 置于顶层</Button>
-      <Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.BOTTOM)"><IconBringToFrontOne class="btn-icon" /> 置于底层</Button>
+      <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.BOTTOM)"><IconBringToFrontOne class="btn-icon" /> 置于底层</Button>
     </ButtonGroup>
     <ButtonGroup class="row">
-      <Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.UP)"><IconBringToFront class="btn-icon" /> 上移一层</Button>
+      <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.UP)"><IconBringToFront class="btn-icon" /> 上移一层</Button>
-      <Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.DOWN)"><IconSentToBack class="btn-icon" /> 下移一层</Button>
+      <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)"><IconSentToBack class="btn-icon" /> 下移一层</Button>
     </ButtonGroup>
 
     <Divider />
@@ -61,7 +61,7 @@
       <div style="flex: 4;" class="label">Y</div>
     </div>
 
-    <template v-if="handleElement.type !== 'line'">
+    <template v-if="handleElement!.type !== 'line'">
       <div class="row">
         <div style="flex: 3;">大小：</div>
         <InputNumber
@@ -72,7 +72,7 @@
           @change="value => updateWidth(value as number)"
           style="flex: 4;"
         />
-        <template v-if="['image', 'shape', 'audio'].includes(handleElement.type)">
+        <template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)">
           <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="解除宽高比锁定" v-if="fixedRatio">
             <IconLock style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
           </Tooltip>
@@ -85,7 +85,7 @@
           :min="minSize"
           :max="800"
           :step="5"
-          :disabled="handleElement.type === 'text'" 
+          :disabled="handleElement!.type === 'text'" 
           :value="height" 
           @change="value => updateHeight(value as number)"
           style="flex: 4;"
@@ -99,7 +99,7 @@
       </div>
     </template>
 
-    <template v-if="!['line', 'video', 'audio'].includes(handleElement.type)">
+    <template v-if="!['line', 'video', 'audio'].includes(handleElement!.type)">
       <Divider />
 
       <div class="row">
@@ -131,21 +131,17 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, Ref, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { round } from 'lodash'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
-import { PPTElement } from '@/types/slides'
 import { ElementAlignCommands, ElementOrderCommands } from '@/types/edit'
 import { MIN_SIZE } from '@/configs/element'
 import useOrderElement from '@/hooks/useOrderElement'
 import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-export default defineComponent({
-  name: 'element-positopn-panel',
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId } = storeToRefs(useMainStore())
 
@@ -230,30 +226,6 @@ export default defineComponent({
   slidesStore.updateElement({ id: handleElementId.value, props })
   addHistorySnapshot()
 }
-
-    return {
-      handleElement: handleElement as Ref<PPTElement>,
-      orderElement,
-      alignElementToCanvas,
-      left,
-      top,
-      width,
-      height,
-      rotate,
-      fixedRatio,
-      minSize,
-      updateLeft,
-      updateTop,
-      updateWidth,
-      updateHeight,
-      updateRotate,
-      updateFixedRatio,
-      updateRotate45,
-      ElementOrderCommands,
-      ElementAlignCommands,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue

@@ -5,11 +5,11 @@
       <Popover trigger="click">
         <template #content>
           <ColorPicker
-            :modelValue="handleElement.color"
+            :modelValue="handleAudioElement.color"
             @update:modelValue="value => updateAudio({ color: value })"
           />
         </template>
-        <ColorButton :color="handleElement.color" style="flex: 3;" />
+        <ColorButton :color="handleAudioElement.color" style="flex: 3;" />
       </Popover>
     </div>
 
@@ -17,7 +17,7 @@
       <div style="flex: 2;">自动播放：</div>
       <div class="switch-wrapper" style="flex: 3;">
         <Switch 
-          :checked="handleElement.autoplay" 
+          :checked="handleAudioElement.autoplay" 
           @change="checked => updateAudio({ autoplay: checked as boolean })" 
         />
       </div>
@@ -27,7 +27,7 @@
       <div style="flex: 2;">循环播放：</div>
       <div class="switch-wrapper" style="flex: 3;">
         <Switch 
-          :checked="handleElement.loop" 
+          :checked="handleAudioElement.loop" 
           @change="checked => updateAudio({ loop: checked as boolean })" 
         />
       </div>
@@ -35,8 +35,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, Ref } from 'vue'
+import { Ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTAudioElement } from '@/types/slides'
@@ -44,15 +44,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from '../common/ColorButton.vue'
 
-export default defineComponent({
-  name: 'audio-style-panel',
-  components: {
-    ColorButton,
-  },
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
 
+const handleAudioElement = handleElement as Ref<PPTAudioElement>
+
 const { addHistorySnapshot } = useHistorySnapshot()
 
 const updateAudio = (props: Partial<PPTAudioElement>) => {
@@ -60,13 +56,6 @@ export default defineComponent({
   slidesStore.updateElement({ id: handleElement.value.id, props })
   addHistorySnapshot()
 }
-
-    return {
-      handleElement: handleElement as Ref<PPTAudioElement>,
-      updateAudio,
-    }
-  }
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue

@@ -54,25 +54,27 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'
+import { computed, onMounted, onUnmounted, PropType, ref } from 'vue'
 import { ChartData } from '@/types/slides'
 import { KEYS } from '@/configs/hotkey'
 import { pasteCustomClipboardString, pasteExcelClipboardString } from '@/utils/clipboard'
 
-const CELL_WIDTH = 100
+const props = defineProps({
-const CELL_HEIGHT = 32
-
-export default defineComponent({
-  name: 'chart-data-editor',
-  emits: ['save', 'close'],
-  props: {
   data: {
     type: Object as PropType<ChartData>,
     required: true,
   }
-  },
+})
-  setup(props, { emit }) {
+
+const emit = defineEmits<{
+  (event: 'save', payload: ChartData): void
+  (event: 'close'): void
+}>()
+
+const CELL_WIDTH = 100
+const CELL_HEIGHT = 32
+
 const selectedRange = ref([0, 0])
 const tempRangeSize = ref({ width: 0, height: 0 })
 const focusCell = ref<[number, number] | null>(null)
@@ -279,21 +281,6 @@ export default defineComponent({
     tempRangeSize.value = { width: 0, height: 0 }
   }
 }
-
-    return {
-      tempRangeSize,
-      rangeLines,
-      resizablePointStyle,
-      selectedRange,
-      focusCell,
-      changeSelectRange,
-      getTableData,
-      closeEditor,
-      clear,
-      handlePaste,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue

@@ -6,7 +6,7 @@
 
     <Divider />
 
-    <template v-if="handleElement.chartType === 'line'">
+    <template v-if="handleChartElement.chartType === 'line'">
       <div class="row">
         <Checkbox 
           @change="e => updateOptions({ showArea: e.target.checked })"
@@ -26,7 +26,7 @@
         >使用平滑曲线</Checkbox>
       </div>
     </template>
-    <div class="row" v-if="handleElement.chartType === 'bar'">
+    <div class="row" v-if="handleChartElement.chartType === 'bar'">
       <Checkbox 
         @change="e => updateOptions({ horizontalBars: e.target.checked })" 
         :checked="horizontalBars"
@@ -36,7 +36,7 @@
         :checked="stackBars"
       >堆叠样式</Checkbox>
     </div>
-    <div class="row" v-if="handleElement.chartType === 'pie'">
+    <div class="row" v-if="handleChartElement.chartType === 'pie'">
       <Checkbox 
         @change="e => updateOptions({ donut: e.target.checked })" 
         :checked="donut"
@@ -143,7 +143,7 @@
       destroyOnClose
     >
       <ChartDataEditor 
-        :data="handleElement.data"
+        :data="handleChartElement.data"
         @close="chartDataEditorVisible = false"
         @save="value => updateData(value)"
       />
@@ -151,8 +151,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onUnmounted, Ref, ref, watch } from 'vue'
+import { onUnmounted, Ref, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { ChartData, ChartOptions, PPTChartElement } from '@/types/slides'
@@ -178,19 +178,13 @@ const presetChartThemes = [
   ['#8a7ca8', '#e098c7', '#8fd3e8', '#71669e', '#cc70af', '#7cb4cc'],
 ]
 
-export default defineComponent({
-  name: 'chart-style-panel',
-  components: {
-    ElementOutline,
-    ChartDataEditor,
-    ColorButton,
-  },
-  setup() {
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId } = storeToRefs(mainStore)
 const { theme } = storeToRefs(slidesStore)
 
+const handleChartElement = handleElement as Ref<PPTChartElement>
+
 const chartDataEditorVisible = ref(false)
 const presetThemesVisible = ref(false)
 const presetThemeColorHoverIndex = ref<[number, number]>([-1, -1])
@@ -309,34 +303,7 @@ export default defineComponent({
   emitter.off(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
 })
 
-    return {
+// handleElement: handleElement as Ref<PPTChartElement>,
-      chartDataEditorVisible,
-      presetThemesVisible,
-      presetThemeColorHoverIndex,
-      handleElement: handleElement as Ref<PPTChartElement>,
-      updateData,
-      fill,
-      updateFill,
-      lineSmooth,
-      showLine,
-      showArea,
-      horizontalBars,
-      donut,
-      stackBars,
-      updateOptions,
-      themeColor,
-      gridColor,
-      legend,
-      updateTheme,
-      addThemeColor,
-      deleteThemeColor,
-      updateGridColor,
-      updateLegend,
-      presetChartThemes,
-      applyPresetTheme,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue

@@ -2,7 +2,7 @@
   <div class="image-style-panel">
     <div 
       class="origin-image"
-      :style="{ backgroundImage: `url(${handleElement.src})` }"
+      :style="{ backgroundImage: `url(${handleImageElement.src})` }"
     ></div>
 
     <ElementFlip />
@@ -57,8 +57,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, Ref, ref } from 'vue'
+import { Ref, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTImageElement, SlideBackground } from '@/types/slides'
@@ -105,20 +105,13 @@ const ratioClipOptions = [
   },
 ]
 
-export default defineComponent({
-  name: 'image-style-panel',
-  components: {
-    ElementOutline,
-    ElementShadow,
-    ElementFlip,
-    ElementFilter,
-  },
-  setup() {
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId } = storeToRefs(mainStore)
 const { currentSlide } = storeToRefs(slidesStore)
 
+const handleImageElement = handleElement as Ref<PPTImageElement>
+
 const clipPanelVisible = ref(false)
 
 const { addHistorySnapshot } = useHistorySnapshot()
@@ -207,7 +200,7 @@ export default defineComponent({
 }
 
 // 替换图片（保持当前的样式）
-    const replaceImage = (files: File[]) => {
+const replaceImage = (files: FileList) => {
   const imageFile = files[0]
   if (!imageFile) return
   getImageDataURL(imageFile).then(dataURL => {
@@ -260,20 +253,6 @@ export default defineComponent({
   slidesStore.updateSlide({ background })
   addHistorySnapshot()
 }
-
-    return {
-      clipPanelVisible,
-      shapeClipPathOptions,
-      ratioClipOptions,
-      handleElement: handleElement as Ref<PPTImageElement>,
-      clipImage,
-      presetImageClip,
-      replaceImage,
-      resetImage,
-      setBackgroundImage,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue

@@ -9,11 +9,11 @@
       <Popover trigger="click">
         <template #content>
           <ColorPicker
-            :modelValue="handleElement.color"
+            :modelValue="handleLatexElement.color"
             @update:modelValue="value => updateLatex({ color: value })"
           />
         </template>
-        <ColorButton :color="handleElement.color" style="flex: 3;" />
+        <ColorButton :color="handleLatexElement.color" style="flex: 3;" />
       </Popover>
     </div>
     <div class="row">
@@ -21,7 +21,7 @@
       <InputNumber 
         :min="1"
         :max="3"
-        :value="handleElement.strokeWidth" 
+        :value="handleLatexElement.strokeWidth" 
         @change="value => updateLatex({ strokeWidth: value as number })" 
         style="flex: 3;" 
       />
@@ -35,7 +35,7 @@
       destroyOnClose
     >
       <LaTeXEditor 
-        :value="handleElement.latex"
+        :value="handleLatexElement.latex"
         @close="latexEditorVisible = false"
         @update="data => { updateLatexData(data); latexEditorVisible = false }"
       />
@@ -43,8 +43,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onUnmounted, Ref, ref } from 'vue'
+import { onUnmounted, Ref, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTLatexElement } from '@/types/slides'
@@ -54,16 +54,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ColorButton from '../common/ColorButton.vue'
 import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
 
-export default defineComponent({
-  name: 'latex-style-panel',
-  components: {
-    ColorButton,
-    LaTeXEditor,
-  },
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
 
+const handleLatexElement = handleElement as Ref<PPTLatexElement>
+
 const latexEditorVisible = ref(false)
 
 const { addHistorySnapshot } = useHistorySnapshot()
@@ -90,15 +85,6 @@ export default defineComponent({
 onUnmounted(() => {
   emitter.off(EmitterEvents.OPEN_LATEX_EDITOR, openLatexEditor)
 })
-
-    return {
-      handleElement: handleElement as Ref<PPTLatexElement>,
-      latexEditorVisible,
-      updateLatex,
-      updateLatexData,
-    }
-  }
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue

@@ -4,7 +4,7 @@
       <div style="flex: 2;">线条样式：</div>
       <Select 
         style="flex: 3;" 
-        :value="handleElement.style" 
+        :value="handleLineElement.style" 
         @change="value => updateLine({ style: value as 'solid' | 'dashed' })"
       >
         <SelectOption value="solid">实线</SelectOption>
@@ -16,17 +16,17 @@
       <Popover trigger="click">
         <template #content>
           <ColorPicker
-            :modelValue="handleElement.color"
+            :modelValue="handleLineElement.color"
             @update:modelValue="value => updateLine({ color: value })"
           />
         </template>
-        <ColorButton :color="handleElement.color" style="flex: 3;" />
+        <ColorButton :color="handleLineElement.color" style="flex: 3;" />
       </Popover>
     </div>
     <div class="row">
       <div style="flex: 2;">线条宽度：</div>
       <InputNumber 
-        :value="handleElement.width" 
+        :value="handleLineElement.width" 
         @change="value => updateLine({ width: value as number })" 
         style="flex: 3;" 
       />
@@ -36,8 +36,8 @@
       <div style="flex: 2;">起点样式：</div>
       <Select 
         style="flex: 3;" 
-        :value="handleElement.points[0]" 
+        :value="handleLineElement.points[0]" 
-        @change="value => updateLine({ points: [value as 'arrow' | 'dot', handleElement.points[1]] })"
+        @change="value => updateLine({ points: [value as 'arrow' | 'dot', handleLineElement.points[1]] })"
       >
         <SelectOption value="">无</SelectOption>
         <SelectOption value="arrow">箭头</SelectOption>
@@ -48,8 +48,8 @@
       <div style="flex: 2;">终点样式：</div>
       <Select 
         style="flex: 3;" 
-        :value="handleElement.points[1]" 
+        :value="handleLineElement.points[1]" 
-        @change="value => updateLine({ points: [handleElement.points[0], value as 'arrow' | 'dot'] })"
+        @change="value => updateLine({ points: [handleLineElement.points[0], value as 'arrow' | 'dot'] })"
       >
         <SelectOption value="">无</SelectOption>
         <SelectOption value="arrow">箭头</SelectOption>
@@ -62,8 +62,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, Ref } from 'vue'
+import { Ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTLineElement } from '@/types/slides'
@@ -72,16 +72,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ElementShadow from '../common/ElementShadow.vue'
 import ColorButton from '../common/ColorButton.vue'
 
-export default defineComponent({
-  name: 'line-style-panel',
-  components: {
-    ElementShadow,
-    ColorButton,
-  },
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
 
+const handleLineElement = handleElement as Ref<PPTLineElement>
+
 const { addHistorySnapshot } = useHistorySnapshot()
 
 const updateLine = (props: Partial<PPTLineElement>) => {
@@ -89,13 +84,6 @@ export default defineComponent({
   slidesStore.updateElement({ id: handleElement.value.id, props })
   addHistorySnapshot()
 }
-
-    return {
-      handleElement: handleElement as Ref<PPTLineElement>,
-      updateLine,
-    }
-  }
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue

@@ -62,7 +62,7 @@
           </SelectOption>
         </SelectOptGroup>
         <SelectOptGroup label="在线字体">
-          <SelectOption v-for="font in webFonts" :key="font.value" :value="font.value">
+          <SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
             <span>{{font.label}}</span>
           </SelectOption>
         </SelectOptGroup>
@@ -141,8 +141,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElement, PPTElementOutline, TableCell } from '@/types/slides'
@@ -152,14 +152,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from '../common/ColorButton.vue'
 
-const webFonts = WEB_FONTS
-
-export default defineComponent({
-  name: 'multi-style-panel',
-  components: {
-    ColorButton,
-  },
-  setup() {
 const slidesStore = useSlidesStore()
 const { richTextAttrs, availableFonts, activeElementList } = storeToRefs(useMainStore())
 
@@ -250,20 +242,6 @@ export default defineComponent({
     }
   }
 }
-
-    return {
-      webFonts,
-      richTextAttrs,
-      availableFonts,
-      fontSizeOptions,
-      fill,
-      outline,
-      updateFill,
-      updateOutline,
-      updateFontStyle,
-    }
-  }
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue

@@ -71,7 +71,7 @@
     <ElementFlip />
     <Divider />
 
-    <template v-if="handleElement?.text?.content">
+    <template v-if="handleShapeElement.text?.content">
       <InputGroup compact class="row">
         <Select
           style="flex: 3;"
@@ -85,7 +85,7 @@
             </SelectOption>
           </SelectOptGroup>
           <SelectOptGroup label="在线字体">
-            <SelectOption v-for="font in webFonts" :key="font.value" :value="font.value">
+            <SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
               <span>{{font.label}}</span>
             </SelectOption>
           </SelectOptGroup>
@@ -222,8 +222,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, Ref, ref, watch } from 'vue'
+import { Ref, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTShapeElement, ShapeGradient, ShapeText } from '@/types/slides'
@@ -237,22 +237,12 @@ import ElementShadow from '../common/ElementShadow.vue'
 import ElementFlip from '../common/ElementFlip.vue'
 import ColorButton from '../common/ColorButton.vue'
 
-const webFonts = WEB_FONTS
-
-export default defineComponent({
-  name: 'shape-style-panel',
-  components: {
-    ElementOpacity,
-    ElementOutline,
-    ElementShadow,
-    ElementFlip,
-    ColorButton,
-  },
-  setup() {
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId, richTextAttrs, availableFonts } = storeToRefs(mainStore)
 
+const handleShapeElement = handleElement as Ref<PPTShapeElement>
+
 const fill = ref<string>('#000')
 const gradient = ref<ShapeGradient>({
   type: 'linear', 
@@ -321,25 +311,6 @@ export default defineComponent({
 const emitRichTextCommand = (command: string, value?: string) => {
   emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
 }
-
-    return {
-      fill,
-      gradient,
-      fillType,
-      textAlign,
-      richTextAttrs,
-      availableFonts,
-      fontSizeOptions,
-      webFonts,
-      handleElement: handleElement as Ref<PPTShapeElement>,
-      emitRichTextCommand,
-      updateFillType,
-      updateFill,
-      updateGradient,
-      updateTextAlign,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue

@@ -13,7 +13,7 @@
           </SelectOption>
         </SelectOptGroup>
         <SelectOptGroup label="在线字体">
-          <SelectOption v-for="font in webFonts" :key="font.value" :value="font.value">
+          <SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
             <span>{{font.label}}</span>
           </SelectOption>
         </SelectOptGroup>
@@ -185,8 +185,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { nanoid } from 'nanoid'
 import { useMainStore, useSlidesStore } from '@/store'
@@ -197,15 +197,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ElementOutline from '../common/ElementOutline.vue'
 import ColorButton from '../common/ColorButton.vue'
 
-const webFonts = WEB_FONTS
-
-export default defineComponent({
-  name: 'table-style-panel',
-  components: {
-    ElementOutline,
-    ColorButton,
-  },
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId, selectedTableCells: selectedCells, availableFonts } = storeToRefs(useMainStore())
 const themeColor = computed(() => slidesStore.theme.themeColor)
@@ -398,26 +389,6 @@ export default defineComponent({
   }
   updateElement(props)
 }
-
-    return {
-      availableFonts,
-      fontSizeOptions,
-      textAttrs,
-      updateTextAttrs,
-      theme,
-      rowCount,
-      colCount,
-      minRowCount,
-      minColCount,
-      hasTheme,
-      toggleTheme,
-      updateTheme,
-      setTableRow,
-      setTableCol,
-      webFonts,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -25,7 +25,7 @@
           </SelectOption>
         </SelectOptGroup>
         <SelectOptGroup label="在线字体">
-          <SelectOption v-for="font in webFonts" :key="font.value" :value="font.value">
+          <SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
             <span>{{font.label}}</span>
           </SelectOption>
         </SelectOptGroup>
@@ -270,8 +270,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTTextElement } from '@/types/slides'
@@ -358,17 +358,6 @@ const presetStyles = [
   },
 ]
 
-const webFonts = WEB_FONTS
-
-export default defineComponent({
-  name: 'text-style-panel',
-  components: {
-    ElementOpacity,
-    ElementOutline,
-    ElementShadow,
-    ColorButton,
-  },
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId, richTextAttrs, availableFonts } = storeToRefs(useMainStore())
 
@@ -458,36 +447,6 @@ export default defineComponent({
   emitRichTextCommand('link', link)
   linkPopoverVisible.value = false
 }
-
-    return {
-      fill,
-      lineHeight,
-      wordSpace,
-      textIndent,
-      paragraphSpace,
-      richTextAttrs,
-      availableFonts,
-      webFonts,
-      fontSizeOptions,
-      lineHeightOptions,
-      wordSpaceOptions,
-      textIndentOptions,
-      paragraphSpaceOptions,
-      updateLineHeight,
-      updateParagraphSpace,
-      updateWordSpace,
-      updateTextIndent,
-      updateFill,
-      emitRichTextCommand,
-      emitBatchRichTextCommand,
-      presetStyles,
-      link,
-      linkPopoverVisible,
-      openLinkPopover,
-      updateLink,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue

@@ -4,7 +4,7 @@
     <div class="background-image-wrapper">
       <FileInput @change="files => setVideoPoster(files)">
         <div class="background-image">
-          <div class="content" :style="{ backgroundImage: `url(${handleElement.poster})` }">
+          <div class="content" :style="{ backgroundImage: `url(${handleVideoElement.poster})` }">
             <IconPlus />
           </div>
         </div>
@@ -14,20 +14,19 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
+import { Ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTVideoElement } from '@/types/slides'
 import { getImageDataURL } from '@/utils/image'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-export default defineComponent({
-  name: 'video-style-panel',
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
 
+const handleVideoElement = handleElement as Ref<PPTVideoElement>
+
 const { addHistorySnapshot } = useHistorySnapshot()
 
 const updateVideo = (props: Partial<PPTVideoElement>) => {
@@ -37,19 +36,11 @@ export default defineComponent({
 }
 
 // 设置视频预览封面
-    const setVideoPoster = (files: File[]) => {
+const setVideoPoster = (files: FileList) => {
   const imageFile = files[0]
   if (!imageFile) return
   getImageDataURL(imageFile).then(dataURL => updateVideo({ poster: dataURL }))
 }
-
-    return {
-      handleElement,
-      updateVideo,
-      setVideoPoster,
-    }
-  }
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/ElementStylePanel/index.vue

@@ -4,8 +4,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { ElementTypes } from '@/types/slides'
@@ -33,9 +33,6 @@ const panelMap = {
   [ElementTypes.AUDIO]: AudioStylePanel,
 }
 
-export default defineComponent({
-  name: 'element-style-panel',
-  setup() {
 const { activeElementIdList, activeElementList, handleElement, activeGroupElementId } = storeToRefs(useMainStore())
 
 const currentPanelComponent = computed(() => {
@@ -48,11 +45,4 @@ export default defineComponent({
 
   return handleElement.value ? (panelMap[handleElement.value.type] || null) : null
 })
-
-    return {
-      handleElement,
-      currentPanelComponent,
-    }
-  },
-})
 </script>

src/views/Editor/Toolbar/MultiPositionPanel.vue

@@ -36,17 +36,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
 import { ElementAlignCommands } from '@/types/edit'
 import useCombineElement from '@/hooks/useCombineElement'
 import useAlignActiveElement from '@/hooks/useAlignActiveElement'
 import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useUniformDisplayElement from '@/hooks/useUniformDisplayElement'
 
-export default defineComponent({
-  name: 'multi-position-panel',
-  setup() {
 const { canCombine, combineElements, uncombineElements } = useCombineElement()
 const { alignActiveElement } = useAlignActiveElement()
 const { alignElementToCanvas } = useAlignElementToCanvas()
@@ -59,19 +55,6 @@ export default defineComponent({
   if (canCombine.value) alignActiveElement(command)
   else alignElementToCanvas(command)
 }
-
-    return {
-      canCombine,
-      displayItemCount,
-      combineElements,
-      uncombineElements,
-      uniformHorizontalDisplay,
-      uniformVerticalDisplay,
-      alignElement,
-      ElementAlignCommands,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/SlideAnimationPanel.vue

@@ -16,8 +16,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { TurningMode } from '@/types/slides'
@@ -28,9 +28,6 @@ interface Animations {
   value: TurningMode
 }
 
-export default defineComponent({
-  name: 'slide-animation-panel',
-  setup() {
 const slidesStore = useSlidesStore()
 const { slides, currentSlide } = storeToRefs(slidesStore)
 
@@ -63,15 +60,6 @@ export default defineComponent({
   slidesStore.setSlides(newSlides)
   addHistorySnapshot()
 }
-
-    return {
-      currentTurningMode,
-      animations,
-      updateTurningMode,
-      applyAllSlide,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/SlideDesignPanel.vue

@@ -122,7 +122,7 @@
           </SelectOption>
         </SelectOptGroup>
         <SelectOptGroup label="在线字体">
-          <SelectOption v-for="font in webFonts" :key="font.value" :value="font.value">
+          <SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
             <span>{{font.label}}</span>
           </SelectOption>
         </SelectOptGroup>
@@ -171,7 +171,7 @@
     <div class="theme-list" v-if="showPresetThemes">
       <div 
         class="theme-item" 
-        v-for="(item, index) in themes" 
+        v-for="(item, index) in PRESET_THEMES" 
         :key="index"
         :style="{ backgroundColor: item.background }"
         @click="updateTheme({
@@ -191,8 +191,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { Slide, SlideBackground, SlideTheme } from '@/types/slides'
@@ -203,15 +203,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ColorButton from './common/ColorButton.vue'
 import { getImageDataURL } from '@/utils/image'
 
-const themes = PRESET_THEMES
-const webFonts = WEB_FONTS
-
-export default defineComponent({
-  name: 'slide-design-panel',
-  components: {
-    ColorButton,
-  },
-  setup() {
 const slidesStore = useSlidesStore()
 const { availableFonts } = storeToRefs(useMainStore())
 const { slides, currentSlide, viewportRatio, theme } = storeToRefs(slidesStore)
@@ -267,7 +258,7 @@ export default defineComponent({
 }
 
 // 上传背景图片
-    const uploadBackgroundImage = (files: File[]) => {
+const uploadBackgroundImage = (files: FileList) => {
   const imageFile = files[0]
   if (!imageFile) return
   getImageDataURL(imageFile).then(dataURL => updateBackground({ image: dataURL }))
@@ -346,26 +337,6 @@ export default defineComponent({
 const updateViewportRatio = (value: number) => {
   slidesStore.setViewportRatio(value)
 }
-
-    return {
-      availableFonts,
-      background,
-      updateBackgroundType,
-      updateBackground,
-      uploadBackgroundImage,
-      applyBackgroundAllSlide,
-      themes,
-      theme,
-      webFonts,
-      updateTheme,
-      applyThemeAllSlide,
-      viewportRatio,
-      updateViewportRatio,
-      showPresetThemes,
-      togglePresetThemesVisible,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/SymbolPanel.vue

@@ -4,7 +4,7 @@
       <div 
         class="tab" 
         :class="{ 'active': selectedSymbolKey === item.key }" 
-        v-for="item in symbolPoolList" 
+        v-for="item in SYMBOL_LIST" 
         :key="item.key"
         @click="selectedSymbolKey = item.key"
       >{{item.label}}</div>
@@ -17,34 +17,20 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { SYMBOL_LIST } from '@/configs/symbol'
 import emitter, { EmitterEvents } from '@/utils/emitter'
 
-const symbolPoolList = SYMBOL_LIST
+const selectedSymbolKey = ref(SYMBOL_LIST[0].key)
-
-export default defineComponent({
-  name: 'symbol-panel',
-  setup() {
-    const selectedSymbolKey = ref(symbolPoolList[0].key)
 const symbolPool = computed(() => {
-      const selectedSymbol = symbolPoolList.find(item => item.key === selectedSymbolKey.value)
+  const selectedSymbol = SYMBOL_LIST.find(item => item.key === selectedSymbolKey.value)
   return selectedSymbol?.children || []
 })
 
 const selectSymbol = (value: string) => {
   emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command: 'insert', value } })
 }
-
-    return {
-      symbolPoolList,
-      symbolPool,
-      selectedSymbolKey,
-      selectSymbol,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/common/ColorButton.vue

@@ -7,17 +7,12 @@
   </Button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
+defineProps({
-
-export default defineComponent({
-  name: 'color-button',
-  props: {
   color: {
     type: String,
     required: true,
   },
-  },
 })
 </script>
 

src/views/Editor/Toolbar/common/ElementFilter.vue

@@ -25,8 +25,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTImageElement } from '@/types/slides'
@@ -52,9 +52,6 @@ const defaultFilters: FilterOption[] = [
   { label: '不透明度', key: 'opacity', default: 100, value: 100, unit: '%', max: 100, step: 5 },
 ]
 
-export default defineComponent({
-  name: 'element-filter',
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId } = storeToRefs(useMainStore())
 
@@ -100,15 +97,6 @@ export default defineComponent({
   }
   addHistorySnapshot()
 }
-
-    return {
-      filterOptions,
-      hasFilters,
-      toggleFilters,
-      updateFilter,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/common/ElementFlip.vue

@@ -15,16 +15,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { ImageOrShapeFlip } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-export default defineComponent({
-  name: 'element-flip',
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
 
@@ -45,14 +42,6 @@ export default defineComponent({
   slidesStore.updateElement({ id: handleElement.value.id, props: flipProps })
   addHistorySnapshot()
 }
-
-    return {
-      flipH,
-      flipV,
-      updateFlip,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/common/ElementOpacity.vue

@@ -14,15 +14,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-export default defineComponent({
-  name: 'element-opacity',
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
 
@@ -41,13 +38,6 @@ export default defineComponent({
   slidesStore.updateElement({ id: handleElement.value.id, props })
   addHistorySnapshot()
 }
-
-    return {
-      opacity,
-      updateOpacity,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/common/ElementOutline.vue

@@ -45,8 +45,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElementOutline } from '@/types/slides'
@@ -54,18 +54,13 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from './ColorButton.vue'
 
-export default defineComponent({
+defineProps({
-  name: 'element-outline',
-  components: {
-    ColorButton,
-  },
-  props: {
   fixed: {
     type: Boolean,
     default: false,
   },
-  },
+})
-  setup() {
+
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
 
@@ -98,15 +93,6 @@ export default defineComponent({
   }
   addHistorySnapshot()
 }
-
-    return {
-      outline,
-      hasOutline,
-      toggleOutline,
-      updateOutline,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/common/ElementShadow.vue

@@ -56,8 +56,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElementShadow } from '@/types/slides'
@@ -65,12 +65,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from './ColorButton.vue'
 
-export default defineComponent({
-  name: 'element-shadow',
-  components: {
-    ColorButton,
-  },
-  setup() {
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
 
@@ -103,15 +97,6 @@ export default defineComponent({
   }
   addHistorySnapshot()
 }
-
-    return {
-      shadow,
-      hasShadow,
-      toggleShadow,
-      updateShadow,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Toolbar/index.vue

@@ -15,8 +15,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, watch } from 'vue'
+import { computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { ToolbarStates } from '@/types/toolbar'
@@ -34,9 +34,6 @@ interface ElementTabs {
   value: ToolbarStates
 }
 
-export default defineComponent({
-  name: 'toolbar',
-  setup() {
 const mainStore = useMainStore()
 const { activeElementIdList, handleElement, toolbarState } = storeToRefs(mainStore)
 
@@ -94,15 +91,6 @@ export default defineComponent({
   }
   return panelMap[toolbarState.value] || null
 })
-
-    return {
-      toolbarState,
-      currentTabs,
-      setToolbarState,
-      currentPanelComponent,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/index.vue

@@ -29,8 +29,8 @@
   </Modal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import useGlobalHotkey from '@/hooks/useGlobalHotkey'
@@ -44,18 +44,6 @@ import Toolbar from './Toolbar/index.vue'
 import Remark from './Remark/index.vue'
 import ExportDialog from './ExportDialog/index.vue'
 
-export default defineComponent({
-  name: 'editor',
-  components: {
-    EditorHeader,
-    Canvas,
-    CanvasTool,
-    Thumbnails,
-    Toolbar,
-    Remark,
-    ExportDialog,
-  },
-  setup() {
 const mainStore = useMainStore()
 const { dialogForExport } = storeToRefs(mainStore)
 const closeExportDialog = () => mainStore.setDialogForExport('')
@@ -64,14 +52,6 @@ export default defineComponent({
 
 useGlobalHotkey()
 usePasteEvent()
-
-    return {
-      remarkHeight,
-      dialogForExport,
-      closeExportDialog,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Mobile/MobileEditor/ElementToolbar.vue

@@ -96,10 +96,10 @@
         <Divider style="margin: 20px 0;" />
 
         <ButtonGroup class="row">
-          <Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.TOP)"><IconSendToBack class="icon" /> 置顶</Button>
+          <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.TOP)"><IconSendToBack class="icon" /> 置顶</Button>
-          <Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.BOTTOM)"><IconBringToFrontOne class="icon" /> 置底</Button>
+          <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.BOTTOM)"><IconBringToFrontOne class="icon" /> 置底</Button>
-          <Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.UP)"><IconBringToFront class="icon" /> 上移</Button>
+          <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.UP)"><IconBringToFront class="icon" /> 上移</Button>
-          <Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.DOWN)"><IconSentToBack class="icon" /> 下移</Button>
+          <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)"><IconSentToBack class="icon" /> 下移</Button>
         </ButtonGroup>
         
         <Divider style="margin: 20px 0;" />
@@ -119,8 +119,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, Ref, ref } from 'vue'
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElement, TableCell } from '@/types/slides'
@@ -139,9 +139,6 @@ interface TabItem {
 
 const colors = ['#000000', '#ffffff', '#eeece1', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c', '#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57']
 
-export default defineComponent({
-  name: 'element-toolbar',
-  setup() {
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId, richTextAttrs } = storeToRefs(mainStore)
@@ -214,25 +211,6 @@ export default defineComponent({
 
   if (handleElement.value.type === 'audio') updateElement(handleElementId.value, { color })
 }
-
-    return {
-      handleElement: handleElement as Ref<PPTElement>,
-      tabs,
-      activeTab,
-      richTextAttrs,
-      colors,
-      orderElement,
-      alignElementToCanvas,
-      copyElement,
-      deleteElement,
-      emitRichTextCommand,
-      updateFontColor,
-      updateFill,
-      ElementOrderCommands,
-      ElementAlignCommands,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Mobile/MobileEditor/Header.vue

@@ -8,33 +8,22 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, PropType } from 'vue'
+import { PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSnapshotStore } from '@/store'
 import { Mode } from '@/types/mobile'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-export default defineComponent({
+defineProps({
-  name: 'mobile-editor-header',
-  props: {
   changeMode: {
     type: Function as PropType<(mode: Mode) => void>,
     required: true,
   },
-  },
+})
-  setup() {
+
 const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
 const { redo, undo } = useHistorySnapshot()
-
-    return {
-      redo,
-      undo,
-      canUndo,
-      canRedo,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Mobile/MobileEditor/MobileEditableElement.vue

@@ -14,8 +14,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import { ElementTypes, PPTElement } from '@/types/slides'
 
 import ImageElement from '@/views/components/element/ImageElement/index.vue'
@@ -28,9 +28,7 @@ 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'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'mobile-editable-element',
-  props: {
   elementInfo: {
     type: Object as PropType<PPTElement>,
     required: true,
@@ -43,8 +41,8 @@ export default defineComponent({
     type: Function as PropType<(e: TouchEvent, element: PPTElement, canMove?: boolean) => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const currentElementComponent = computed(() => {
   const elementTypeMap = {
     [ElementTypes.IMAGE]: ImageElement,
@@ -59,10 +57,4 @@ export default defineComponent({
   }
   return elementTypeMap[props.elementInfo.type] || null
 })
-
-    return {
-      currentElementComponent,
-    }
-  },
-})
 </script>

src/views/Mobile/MobileEditor/MobileOperate.vue

@@ -29,8 +29,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, PropType, computed } from 'vue'
+import { PropType, computed } from 'vue'
 import { PPTElement, PPTLineElement } from '@/types/slides'
 import useCommonOperate from '@/views/Editor/Canvas/hooks/useCommonOperate'
 import { OperateResizeHandlers } from '@/types/edit'
@@ -38,13 +38,7 @@ import { OperateResizeHandlers } from '@/types/edit'
 import BorderLine from '@/views/Editor/Canvas/Operate/BorderLine.vue'
 import ResizeHandler from '@/views/Editor/Canvas/Operate/ResizeHandler.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'mobile-operate',
-  components: {
-    BorderLine,
-    ResizeHandler,
-  },
-  props: {
   elementInfo: {
     type: Object as PropType<Exclude<PPTElement, PPTLineElement>>,
     required: true,
@@ -61,25 +55,19 @@ export default defineComponent({
     type: Function as PropType<(e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const rotate = computed(() => 'rotate' in props.elementInfo ? props.elementInfo.rotate : 0)
 
 const scaleWidth = computed(() => props.elementInfo.width * props.canvasScale)
 const scaleHeight = computed(() => props.elementInfo.height * props.canvasScale)
 const {
   borderLines,
-      resizeHandlers,
+  resizeHandlers: _resizeHandlers,
   textElementResizeHandlers,
 } = useCommonOperate(scaleWidth, scaleHeight)
 
-    return {
+const resizeHandlers = props.elementInfo.type === 'text' || props.elementInfo.type === 'table' ? textElementResizeHandlers : _resizeHandlers
-      rotate,
-      borderLines,
-      resizeHandlers: props.elementInfo.type === 'text' || props.elementInfo.type === 'table' ? textElementResizeHandlers : resizeHandlers,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Mobile/MobileEditor/SlideToolbar.vue

@@ -29,8 +29,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useSlideHandler from '@/hooks/useSlideHandler'
@@ -41,12 +41,6 @@ import { VIEWPORT_SIZE } from '@/configs/canvas'
 
 import MobileThumbnails from '../MobileThumbnails.vue'
 
-export default defineComponent({
-  name: 'slide-toolbar',
-  components: {
-    MobileThumbnails,
-  },
-  setup() {
 const slidesStore = useSlidesStore()
 const { viewportRatio, currentSlide } = storeToRefs(slidesStore)
 
@@ -65,7 +59,7 @@ export default defineComponent({
   }, '<p><span style=\"font-size: 24px\">新添加文本</span></p>')
 }
 
-    const insertImageElement = (files: File[]) => {
+const insertImageElement = (files: FileList) => {
   if (!files || !files[0]) return
   getImageDataURL(files[0]).then(dataURL => createImageElement(dataURL))
 }
@@ -97,19 +91,6 @@ export default defineComponent({
   const value = (e.target as HTMLTextAreaElement).value
   slidesStore.updateSlide({ remark: value })
 }
-
-    return {
-      remark,
-      createSlide,
-      copyAndPasteSlide,
-      deleteSlide,
-      insertTextElement,
-      insertImageElement,
-      insertShapeElement,
-      handleInputMark,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Mobile/MobileEditor/index.vue

@@ -39,8 +39,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onMounted, PropType, ref, watchEffect } from 'vue'
+import { computed, onMounted, PropType, ref, watchEffect } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElement } from '@/types/slides'
@@ -58,23 +58,13 @@ import SlideToolbar from './SlideToolbar.vue'
 import ElementToolbar from './ElementToolbar.vue'
 import Header from './Header.vue'
 
-export default defineComponent({
+defineProps({
-  name: 'mobile-editor',
-  components: {
-    AlignmentLine,
-    MobileEditableElement,
-    MobileOperate,
-    SlideToolbar,
-    ElementToolbar,
-    Header,
-  },
-  props: {
   changeMode: {
     type: Function as PropType<(mode: Mode) => void>,
     required: true,
   },
-  },
+})
-  setup() {
+
 const slidesStore = useSlidesStore()
 const mainStore = useMainStore()
 const { slideIndex, currentSlide, viewportRatio } = storeToRefs(slidesStore)
@@ -127,23 +117,6 @@ export default defineComponent({
 const handleClickBlankArea = () => {
   mainStore.setActiveElementIdList([])
 }
-
-    return {
-      contentRef,
-      slideIndex,
-      elementList,
-      canvasScale,
-      viewportStyles,
-      backgroundStyle,
-      activeElementIdList,
-      alignmentLines,
-      selectElement,
-      handleClickBlankArea,
-      scaleElement,
-      handleElement,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Mobile/MobilePlayer.vue

@@ -51,8 +51,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onMounted, PropType, ref } from 'vue'
+import { computed, onMounted, PropType, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Mode } from '@/types/mobile'
@@ -60,19 +60,13 @@ import { Mode } from '@/types/mobile'
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import MobileThumbnails from './MobileThumbnails.vue'
 
-export default defineComponent({
+defineProps({
-  name: 'mobile-player',
-  components: {
-    ThumbnailSlide,
-    MobileThumbnails,
-  },
-  props: {
   changeMode: {
     type: Function as PropType<(mode: Mode) => void>,
     required: true,
   },
-  },
+})
-  setup() {
+
 const slidesStore = useSlidesStore()
 const { slides, slideIndex, currentSlide, viewportRatio } = storeToRefs(slidesStore)
 
@@ -130,19 +124,6 @@ export default defineComponent({
     if (offsetX > 0 && slideIndex.value < slides.value.length - 1) slidesStore.updateSlideIndex(slideIndex.value + 1)
   }
 }
-
-    return {
-      slides,
-      slideIndex,
-      currentSlide,
-      playerSize,
-      slideSize,
-      toolVisible,
-      touchStartListener,
-      touchEndListener,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Mobile/MobilePreview.vue

@@ -17,8 +17,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, PropType, onMounted, ref } from 'vue'
+import { PropType, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useLoadSlides from '@/hooks/useLoadSlides'
@@ -26,18 +26,13 @@ import { Mode } from '@/types/mobile'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'mobile-preview',
-  components: {
-    ThumbnailSlide,
-  },
-  props: {
   changeMode: {
     type: Function as PropType<(mode: Mode) => void>,
     required: true,
   },
-  },
+})
-  setup() {
+
 const { slides } = storeToRefs(useSlidesStore())
 const { slidesLoadLimit } = useLoadSlides()
 
@@ -48,15 +43,6 @@ export default defineComponent({
   if (!mobileRef.value) return
   screenWidth.value = mobileRef.value.clientWidth
 })
-
-    return {
-      slides,
-      slidesLoadLimit,
-      mobileRef,
-      screenWidth,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Mobile/MobileThumbnails.vue

@@ -13,20 +13,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useLoadSlides from '@/hooks/useLoadSlides'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
-export default defineComponent({
-  name: 'mobile-thumbnails',
-  components: {
-    ThumbnailSlide,
-  },
-  setup() {
 const slidesStore = useSlidesStore()
 const { slides, slideIndex } = storeToRefs(slidesStore)
 
@@ -34,15 +27,6 @@ export default defineComponent({
 const changeSlideIndex = (index: number) => {
   slidesStore.updateSlideIndex(index)
 }
-
-    return {
-      slides,
-      slideIndex,
-      slidesLoadLimit,
-      changeSlideIndex,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Mobile/index.vue

@@ -7,17 +7,14 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { Mode } from '@/types/mobile'
 
 import MobileEditor from './MobileEditor/index.vue'
 import MobilePlayer from './MobilePlayer.vue'
 import MobilePreview from './MobilePreview.vue'
 
-export default defineComponent({
-  name: 'mobile',
-  setup() {
 const mode = ref<Mode>('preview')
     
 const changeMode = (_mode: Mode) => mode.value = _mode
@@ -30,13 +27,6 @@ export default defineComponent({
   }
   return componentMap[mode.value] || null
 })
-
-    return {
-      currentComponent,
-      changeMode,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Screen/BaseView.vue

@@ -58,8 +58,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, PropType, ref } from 'vue'
+import { PropType, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
@@ -73,20 +73,13 @@ import ScreenSlideList from './ScreenSlideList.vue'
 import SlideThumbnails from './SlideThumbnails.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'screen',
-  components: {
-    ScreenSlideList,
-    SlideThumbnails,
-    WritingBoardTool,
-  },
-  props: {
   changeViewMode: {
     type: Function as PropType<(mode: 'base' | 'presenter') => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { slides, slideIndex } = storeToRefs(useSlidesStore())
 
 const {
@@ -167,32 +160,6 @@ export default defineComponent({
     },
   ]
 }
-
-    return {
-      slides,
-      slideIndex,
-      slideWidth,
-      slideHeight,
-      mousewheelListener,
-      touchStartListener,
-      touchEndListener,
-      animationIndex,
-      contextmenus,
-      execPrev,
-      execNext,
-      turnSlideToIndex,
-      turnSlideToId,
-      slideThumbnailModelVisible,
-      writingBoardToolVisible,
-      rightToolsVisible,
-      fullscreenState,
-      exitScreening,
-      enterFullscreen,
-      manualExitFullscreen,
-      laserPen,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Screen/PresenterView.vue

@@ -71,8 +71,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, nextTick, ref, watch, PropType } from 'vue'
+import { computed, nextTick, ref, watch, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
@@ -88,20 +88,13 @@ import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import ScreenSlideList from './ScreenSlideList.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'presenter-view',
-  components: {
-    ScreenSlideList,
-    ThumbnailSlide,
-    WritingBoardTool,
-  },
-  props: {
   changeViewMode: {
     type: Function as PropType<(mode: 'base' | 'presenter') => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { slides, slideIndex, viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
 
 const slideListWrapRef = ref<HTMLElement>()
@@ -194,36 +187,6 @@ export default defineComponent({
     },
   ]
 }
-
-    return {
-      slides,
-      slideIndex,
-      viewportRatio,
-      remarkFontSize,
-      currentSlideRemark,
-      setRemarkFontSize,
-      slideListWrapRef,
-      thumbnailsRef,
-      slideWidth,
-      slideHeight,
-      animationIndex,
-      turnSlideToId,
-      mousewheelListener,
-      touchStartListener,
-      touchEndListener,
-      turnSlideToIndex,
-      contextmenus,
-      slidesLoadLimit,
-      handleMousewheelThumbnails,
-      exitScreening,
-      fullscreenState,
-      enterFullscreen,
-      manualExitFullscreen,
-      writingBoardToolVisible,
-      laserPen,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Screen/ScreenElement.vue

@@ -19,8 +19,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { ElementTypes, PPTElement } from '@/types/slides'
@@ -35,9 +35,7 @@ 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'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'screen-element',
-  props: {
   elementInfo: {
     type: Object as PropType<PPTElement>,
     required: true,
@@ -58,8 +56,8 @@ export default defineComponent({
     type: Function as PropType<() => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const currentElementComponent = computed(() => {
   const elementTypeMap = {
     [ElementTypes.IMAGE]: BaseImageElement,
@@ -112,15 +110,6 @@ export default defineComponent({
     props.turnSlideToId(link.target)
   }
 }
-
-    return {
-      currentElementComponent,
-      needWaitAnimation,
-      theme,
-      openLink,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Screen/ScreenSlide.vue

@@ -20,8 +20,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, PropType, defineComponent, provide } from 'vue'
+import { computed, PropType, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Slide } from '@/types/slides'
@@ -31,12 +31,7 @@ import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
 import ScreenElement from './ScreenElement.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'screen-slide',
-  components: {
-    ScreenElement,
-  },
-  props: {
   slide: {
     type: Object as PropType<Slide>,
     required: true,
@@ -57,8 +52,8 @@ export default defineComponent({
     type: Function as PropType<() => void>,
     required: true,
   },
-  },
+})
-  setup(props) {
+
 const { viewportRatio } = storeToRefs(useSlidesStore())
 
 const background = computed(() => props.slide.background)
@@ -66,14 +61,6 @@ export default defineComponent({
 
 const slideId = computed(() => props.slide.id)
 provide(injectKeySlideId, slideId)
-
-    return {
-      backgroundStyle,
-      VIEWPORT_SIZE,
-      viewportRatio,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>