From 16acbc63333fe49ef4287b19d24667200f1eddad Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Fri, 17 Jun 2022 17:28:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20script=20setup=20=E8=AF=AD=E6=B3=95?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  |    6 +
 package-lock.json                             |  117 +-
 package.json                                  |    2 +-
 src/App.vue                                   |   57 +-
 src/components/CheckboxButton.vue             |   15 +-
 src/components/CheckboxButtonGroup.vue        |    6 +-
 src/components/ColorPicker/Alpha.vue          |  114 +-
 src/components/ColorPicker/Checkboard.vue     |   49 +-
 src/components/ColorPicker/EditableInput.vue  |   50 +-
 src/components/ColorPicker/Hue.vue            |  152 +--
 src/components/ColorPicker/Saturation.vue     |  132 +-
 src/components/ColorPicker/index.vue          |  305 ++---
 src/components/Contextmenu/MenuContent.vue    |   23 +-
 src/components/Contextmenu/index.vue          |  102 +-
 src/components/FileInput.vue                  |   51 +-
 src/components/FullscreenSpin.vue             |   23 +-
 src/components/LaTeXEditor/FormulaContent.vue |   76 +-
 src/components/LaTeXEditor/SymbolContent.vue  |   36 +-
 src/components/LaTeXEditor/index.vue          |  122 +-
 src/components/WritingBoard.vue               |  551 ++++----
 src/hooks/useExport.ts                        |    2 +-
 src/shims-vue.d.ts                            |    2 +
 src/views/Editor/Canvas/AlignmentLine.vue     |   64 +-
 src/views/Editor/Canvas/EditableElement.vue   |  283 ++--
 .../Editor/Canvas/ElementCreateSelection.vue  |  319 +++--
 src/views/Editor/Canvas/GridLines.vue         |   69 +-
 src/views/Editor/Canvas/LinkDialog.vue        |  104 +-
 src/views/Editor/Canvas/MouseSelection.vue    |   53 +-
 .../Editor/Canvas/Operate/BorderLine.vue      |   23 +-
 .../Canvas/Operate/CommonElementOperate.vue   |   69 +-
 .../Canvas/Operate/ImageElementOperate.vue    |   69 +-
 .../Canvas/Operate/LineElementOperate.vue     |  139 +-
 .../Editor/Canvas/Operate/LinkHandler.vue     |   46 +-
 .../Canvas/Operate/MultiSelectOperate.vue     |   90 +-
 .../Editor/Canvas/Operate/ResizeHandler.vue   |   54 +-
 .../Editor/Canvas/Operate/RotateHandler.vue   |    6 +-
 .../Canvas/Operate/ShapeElementOperate.vue    |   64 +-
 .../Canvas/Operate/TableElementOperate.vue    |   70 +-
 .../Canvas/Operate/TextElementOperate.vue     |   66 +-
 src/views/Editor/Canvas/Operate/index.vue     |  148 +-
 src/views/Editor/Canvas/Ruler.vue             |   28 +-
 .../Editor/Canvas/ViewportBackground.vue      |   25 +-
 src/views/Editor/Canvas/index.vue             |  322 ++---
 src/views/Editor/CanvasTool/ChartPool.vue     |   24 +-
 src/views/Editor/CanvasTool/LinePool.vue      |   29 +-
 src/views/Editor/CanvasTool/MediaInput.vue    |   56 +-
 src/views/Editor/CanvasTool/ShapePool.vue     |   26 +-
 .../Editor/CanvasTool/TableGenerator.vue      |   67 +-
 src/views/Editor/CanvasTool/index.vue         |  160 +--
 src/views/Editor/EditorHeader/HotkeyDoc.vue   |   16 +-
 src/views/Editor/EditorHeader/index.vue       |   64 +-
 src/views/Editor/ExportDialog/ExportImage.vue |   74 +-
 src/views/Editor/ExportDialog/ExportJSON.vue  |   24 +-
 src/views/Editor/ExportDialog/ExportPDF.vue   |   57 +-
 src/views/Editor/ExportDialog/ExportPPTX.vue  |   50 +-
 .../ExportDialog/ExportSpecificFile.vue       |   46 +-
 src/views/Editor/ExportDialog/index.vue       |   54 +-
 src/views/Editor/Remark/index.vue             |   99 +-
 src/views/Editor/Thumbnails/LayoutPool.vue    |   27 +-
 src/views/Editor/Thumbnails/index.vue         |  344 +++--
 .../Editor/Toolbar/ElementAnimationPanel.vue  |  371 +++--
 .../Editor/Toolbar/ElementPositionPanel.vue   |  210 ++-
 .../ElementStylePanel/AudioStylePanel.vue     |   41 +-
 .../ChartStylePanel/ChartDataEditor.vue       |  449 +++----
 .../ChartStylePanel/index.vue                 |  249 ++--
 .../ElementStylePanel/ImageStylePanel.vue     |  299 ++---
 .../ElementStylePanel/LatexStylePanel.vue     |   72 +-
 .../ElementStylePanel/LineStylePanel.vue      |   50 +-
 .../ElementStylePanel/MultiStylePanel.vue     |  184 ++-
 .../ElementStylePanel/ShapeStylePanel.vue     |  179 ++-
 .../ElementStylePanel/TableStylePanel.vue     |  389 +++---
 .../ElementStylePanel/TextStylePanel.vue      |  193 ++-
 .../ElementStylePanel/VideoStylePanel.vue     |   45 +-
 .../Toolbar/ElementStylePanel/index.vue       |   30 +-
 .../Editor/Toolbar/MultiPositionPanel.vue     |   41 +-
 .../Editor/Toolbar/SlideAnimationPanel.vue    |   66 +-
 src/views/Editor/Toolbar/SlideDesignPanel.vue |  281 ++--
 src/views/Editor/Toolbar/SymbolPanel.vue      |   36 +-
 .../Editor/Toolbar/common/ColorButton.vue     |   15 +-
 .../Editor/Toolbar/common/ElementFilter.vue   |   96 +-
 .../Editor/Toolbar/common/ElementFlip.vue     |   47 +-
 .../Editor/Toolbar/common/ElementOpacity.vue  |   42 +-
 .../Editor/Toolbar/common/ElementOutline.vue  |   92 +-
 .../Editor/Toolbar/common/ElementShadow.vue   |   73 +-
 src/views/Editor/Toolbar/index.vue            |  114 +-
 src/views/Editor/index.vue                    |   36 +-
 .../Mobile/MobileEditor/ElementToolbar.vue    |  150 +--
 src/views/Mobile/MobileEditor/Header.vue      |   29 +-
 .../MobileEditor/MobileEditableElement.vue    |   64 +-
 .../Mobile/MobileEditor/MobileOperate.vue     |   68 +-
 .../Mobile/MobileEditor/SlideToolbar.vue      |  105 +-
 src/views/Mobile/MobileEditor/index.vue       |  145 +-
 src/views/Mobile/MobilePlayer.vue             |  147 +-
 src/views/Mobile/MobilePreview.vue            |   42 +-
 src/views/Mobile/MobileThumbnails.vue         |   30 +-
 src/views/Mobile/index.vue                    |   32 +-
 src/views/Screen/BaseView.vue                 |  207 ++-
 src/views/Screen/PresenterView.vue            |  235 ++--
 src/views/Screen/ScreenElement.vue            |  159 +--
 src/views/Screen/ScreenSlide.vue              |   69 +-
 src/views/Screen/ScreenSlideList.vue          |   64 +-
 src/views/Screen/SlideThumbnails.vue          |   54 +-
 src/views/Screen/WritingBoardTool.vue         |  104 +-
 src/views/Screen/index.vue                    |   42 +-
 .../ThumbnailSlide/ThumbnailElement.vue       |   56 +-
 src/views/components/ThumbnailSlide/index.vue |   54 +-
 .../element/AudioElement/AudioPlayer.vue      |  357 +++--
 .../element/AudioElement/BaseAudioElement.vue |   26 +-
 .../AudioElement/ScreenAudioElement.vue       |  108 +-
 .../components/element/AudioElement/index.vue |  111 +-
 .../element/ChartElement/BaseChartElement.vue |   35 +-
 .../components/element/ChartElement/Chart.vue |  243 ++--
 .../ChartElement/ScreenChartElement.vue       |   18 +-
 .../components/element/ChartElement/index.vue |   57 +-
 .../components/element/ElementOutline.vue     |   47 +-
 .../element/ImageElement/BaseImageElement.vue |   53 +-
 .../element/ImageElement/ImageClipHandler.vue |  948 +++++++------
 .../ImageOutline/ImageEllipseOutline.vue      |   46 +-
 .../ImageOutline/ImagePolygonOutline.vue      |   54 +-
 .../ImageOutline/ImageRectOutline.vue         |   54 +-
 .../ImageElement/ImageOutline/index.vue       |   31 +-
 .../components/element/ImageElement/index.vue |  178 ++-
 .../element/LatexElement/BaseLatexElement.vue |   15 +-
 .../components/element/LatexElement/index.vue |   55 +-
 .../element/LineElement/BaseLineElement.vue   |   55 +-
 .../element/LineElement/LinePointMarker.vue   |   64 +-
 .../components/element/LineElement/index.vue  |   88 +-
 .../components/element/ProsemirrorEditor.vue  |  443 +++---
 .../element/ShapeElement/BaseShapeElement.vue |   64 +-
 .../element/ShapeElement/GradientDefs.vue     |   45 +-
 .../components/element/ShapeElement/index.vue |  169 +--
 .../element/TableElement/BaseTableElement.vue |   18 +-
 .../element/TableElement/CustomTextarea.vue   |  132 +-
 .../element/TableElement/EditableTable.vue    | 1196 ++++++++---------
 .../element/TableElement/StaticTable.vue      |   93 +-
 .../components/element/TableElement/index.vue |  240 ++--
 .../element/TextElement/BaseTextElement.vue   |   40 +-
 .../components/element/TextElement/index.vue  |  160 +--
 .../element/VideoElement/BaseVideoElement.vue |   15 +-
 .../VideoElement/ScreenVideoElement.vue       |   38 +-
 .../VideoElement/VideoPlayer/index.vue        |  430 +++---
 .../components/element/VideoElement/index.vue |   52 +-
 vue.config.js                                 |    2 +
 143 files changed, 7408 insertions(+), 9249 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index fbf4959c..9d47cc17 100644
--- a/.eslintrc.js
+++ b/.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: [
     {
diff --git a/package-lock.json b/package-lock.json
index dc61b78f..7b69e04c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7007,37 +7007,112 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "7.20.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",
-      "integrity": "sha1-mMIYhaa/3wcTw6kpV6Wv6q7tklM=",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-9.1.0.tgz",
+      "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",
-        "vue-eslint-parser": "^7.10.0"
+        "nth-check": "^2.0.1",
+        "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": {
-          "version": "2.1.0",
-          "resolved": "https://registry.nlark.com/eslint-utils/download/eslint-utils-2.1.0.tgz",
-          "integrity": "sha1-0t5eA0JOcH3BDHQGjd7a5wh0Gyc=",
+        "acorn": {
+          "version": "8.7.1",
+          "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.7.1.tgz",
+          "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",
-          "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",
-          "integrity": "sha1-MOvR73wv3/AcOk8VEESvJfqwUj4=",
+          "version": "3.3.0",
+          "resolved": "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+          "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
           "dev": true
         },
-        "semver": {
-          "version": "6.3.0",
-          "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",
-          "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
+        "espree": {
+          "version": "9.3.2",
+          "resolved": "https://registry.npmmirror.com/espree/-/espree-9.3.2.tgz",
+          "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",
diff --git a/package.json b/package.json
index 0aeb4378..51570400 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index 20815ee3..905e23dd 100644
--- a/src/App.vue
+++ b/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">
-import { defineComponent, onMounted } from 'vue'
+<script lang="ts" setup>
+import { onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useScreenStore, useMainStore, useSnapshotStore } from '@/store'
 import { LOCALSTORAGE_KEY_DISCARDED_DB } from '@/configs/storage'
@@ -15,44 +15,31 @@ import Editor from './views/Editor/index.vue'
 import Screen from './views/Screen/index.vue'
 import Mobile from './views/Mobile/index.vue'
 
-export default defineComponent({
-  name: 'app',
-  components: {
-    Editor,
-    Screen,
-    Mobile,
-  },
-  setup() {
-    const mainStore = useMainStore()
-    const snapshotStore = useSnapshotStore()
-    const { databaseId } = storeToRefs(mainStore)
-    const { screening } = storeToRefs(useScreenStore())
+const _isPC = isPC()
 
-    if (process.env.NODE_ENV === 'production') {
-      window.onbeforeunload = () => false
-    }
+const mainStore = useMainStore()
+const snapshotStore = useSnapshotStore()
+const { databaseId } = storeToRefs(mainStore)
+const { screening } = storeToRefs(useScreenStore())
 
-    onMounted(() => {
-      snapshotStore.initSnapshotDatabase()
-      mainStore.setAvailableFonts()
-    })
+if (process.env.NODE_ENV === 'production') {
+  window.onbeforeunload = () => false
+}
 
-    // 应用注销时向 localStorage 中记录下本次 indexedDB 的数据库ID，用于之后清除数据库
-    window.addEventListener('unload', () => {
-      const discardedDB = localStorage.getItem(LOCALSTORAGE_KEY_DISCARDED_DB)
-      const discardedDBList: string[] = discardedDB ? JSON.parse(discardedDB) : []
+onMounted(() => {
+  snapshotStore.initSnapshotDatabase()
+  mainStore.setAvailableFonts()
+})
 
-      discardedDBList.push(databaseId.value)
+// 应用注销时向 localStorage 中记录下本次 indexedDB 的数据库ID，用于之后清除数据库
+window.addEventListener('unload', () => {
+  const discardedDB = localStorage.getItem(LOCALSTORAGE_KEY_DISCARDED_DB)
+  const discardedDBList: string[] = discardedDB ? JSON.parse(discardedDB) : []
 
-      const newDiscardedDB = JSON.stringify(discardedDBList)
-      localStorage.setItem(LOCALSTORAGE_KEY_DISCARDED_DB, newDiscardedDB)
-    })
+  discardedDBList.push(databaseId.value)
 
-    return {
-      screening,
-      isPC: isPC(),
-    }
-  },
+  const newDiscardedDB = JSON.stringify(discardedDBList)
+  localStorage.setItem(LOCALSTORAGE_KEY_DISCARDED_DB, newDiscardedDB)
 })
 </script>
 
diff --git a/src/components/CheckboxButton.vue b/src/components/CheckboxButton.vue
index 69bdb11b..64c11b36 100644
--- a/src/components/CheckboxButton.vue
+++ b/src/components/CheckboxButton.vue
@@ -4,16 +4,11 @@
   </button>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'checkbox-button',
-  props: {
-    checked: {
-      type: Boolean,
-      default: false,
-    },
+<script lang="ts" setup>
+defineProps({
+  checked: {
+    type: Boolean,
+    default: false,
   },
 })
 </script>
diff --git a/src/components/CheckboxButtonGroup.vue b/src/components/CheckboxButtonGroup.vue
index a57b6642..98379200 100644
--- a/src/components/CheckboxButtonGroup.vue
+++ b/src/components/CheckboxButtonGroup.vue
@@ -4,12 +4,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 
-export default defineComponent({
-  name: 'checkbox-button-group',
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ColorPicker/Alpha.vue b/src/components/ColorPicker/Alpha.vue
index df3472b5..8817e287 100644
--- a/src/components/ColorPicker/Alpha.vue
+++ b/src/components/ColorPicker/Alpha.vue
@@ -16,75 +16,63 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onUnmounted, PropType, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, onUnmounted, PropType, ref } from 'vue'
 
 import Checkboard from './Checkboard.vue'
 import { ColorFormats } from 'tinycolor2'
 
-export default defineComponent({
-  name: 'alpha',
-  components: {
-    Checkboard,
-  },
-  emits: ['colorChange'],
-  props: {
-    value: {
-      type: Object as PropType<ColorFormats.RGBA>,
-      required: true,
-    },
-  },
-  setup(props, { emit }) {
-    const color = computed(() => props.value)
-    
-    const gradientColor = computed(() => {
-      const rgbaStr = [color.value.r, color.value.g, color.value.b].join(',')
-      return `linear-gradient(to right, rgba(${rgbaStr}, 0) 0%, rgba(${rgbaStr}, 1) 100%)`
-    })
-
-    const alphaRef = ref<HTMLElement>()
-    const handleChange = (e: MouseEvent) => {
-      e.preventDefault()
-      if (!alphaRef.value) return
-      const containerWidth = alphaRef.value.clientWidth
-      const xOffset = alphaRef.value.getBoundingClientRect().left + window.pageXOffset
-      const left = e.pageX - xOffset
-      let a
-
-      if (left < 0) a = 0
-      else if (left > containerWidth) a = 1
-      else a = Math.round(left * 100 / containerWidth) / 100
-
-      if (color.value.a !== a) {
-        emit('colorChange', {
-          r: color.value.r,
-          g: color.value.g,
-          b: color.value.b,
-          a: a,
-        })
-      }
-    }
-
-    const unbindEventListeners = () => {
-      window.removeEventListener('mousemove', handleChange)
-      window.removeEventListener('mouseup', unbindEventListeners)
-    }
-    const handleMouseDown = (e: MouseEvent) => {
-      handleChange(e)
-      window.addEventListener('mousemove', handleChange)
-      window.addEventListener('mouseup', unbindEventListeners)
-    }
-
-    onUnmounted(unbindEventListeners)
-
-    return {
-      alphaRef,
-      gradientColor,
-      handleMouseDown,
-      color,
-    }
+const props = defineProps({
+  value: {
+    type: Object as PropType<ColorFormats.RGBA>,
+    required: true,
   },
 })
+
+const emit = defineEmits<{
+  (event: 'colorChange', payload: ColorFormats.RGBA): void
+}>()
+
+const color = computed(() => props.value)
+    
+const gradientColor = computed(() => {
+  const rgbaStr = [color.value.r, color.value.g, color.value.b].join(',')
+  return `linear-gradient(to right, rgba(${rgbaStr}, 0) 0%, rgba(${rgbaStr}, 1) 100%)`
+})
+
+const alphaRef = ref<HTMLElement>()
+const handleChange = (e: MouseEvent) => {
+  e.preventDefault()
+  if (!alphaRef.value) return
+  const containerWidth = alphaRef.value.clientWidth
+  const xOffset = alphaRef.value.getBoundingClientRect().left + window.pageXOffset
+  const left = e.pageX - xOffset
+  let a
+
+  if (left < 0) a = 0
+  else if (left > containerWidth) a = 1
+  else a = Math.round(left * 100 / containerWidth) / 100
+
+  if (color.value.a !== a) {
+    emit('colorChange', {
+      r: color.value.r,
+      g: color.value.g,
+      b: color.value.b,
+      a: a,
+    })
+  }
+}
+
+const unbindEventListeners = () => {
+  window.removeEventListener('mousemove', handleChange)
+  window.removeEventListener('mouseup', unbindEventListeners)
+}
+const handleMouseDown = (e: MouseEvent) => {
+  handleChange(e)
+  window.addEventListener('mousemove', handleChange)
+  window.addEventListener('mouseup', unbindEventListeners)
+}
+onUnmounted(unbindEventListeners)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ColorPicker/Checkboard.vue b/src/components/ColorPicker/Checkboard.vue
index 66a617c5..07fbcba2 100644
--- a/src/components/ColorPicker/Checkboard.vue
+++ b/src/components/ColorPicker/Checkboard.vue
@@ -2,8 +2,23 @@
   <div class="checkerboard" :style="bgStyle"></div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 8,
+  },
+  white: {
+    type: String,
+    default: '#fff',
+  },
+  grey: {
+    type: String,
+    default: '#e6e6e6',
+  },
+})
 
 const checkboardCache = {}
 
@@ -32,33 +47,9 @@ 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,
-    }
-  },
+const bgStyle = computed(() => {
+  const checkboard = getCheckboard(props.white, props.grey, props.size)
+  return { backgroundImage: `url(${checkboard})` }
 })
 </script>
 
diff --git a/src/components/ColorPicker/EditableInput.vue b/src/components/ColorPicker/EditableInput.vue
index 2b192006..614a7363 100644
--- a/src/components/ColorPicker/EditableInput.vue
+++ b/src/components/ColorPicker/EditableInput.vue
@@ -8,38 +8,32 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import tinycolor, { ColorFormats } from 'tinycolor2'
 
-export default defineComponent({
-  name: 'editable-input',
-  emits: ['colorChange'],
-  props: {
-    value: {
-      type: Object as PropType<ColorFormats.RGBA>,
-      required: true,
-    },
-  },
-  setup(props, { emit }) {
-    const val = computed(() => {
-      let _hex = ''
-      if (props.value.a < 1) _hex = tinycolor(props.value).toHex8String().toUpperCase()
-      else _hex = tinycolor(props.value).toHexString().toUpperCase()
-      return _hex.replace('#', '')
-    })
-
-    const handleInput = (e: Event) => {
-      const value = (e.target as HTMLInputElement).value
-      if (value.length >= 6) emit('colorChange', tinycolor(value).toRgb())
-    }
-
-    return {
-      val,
-      handleInput,
-    }
+const props = defineProps({
+  value: {
+    type: Object as PropType<ColorFormats.RGBA>,
+    required: true,
   },
 })
+
+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()
+  else _hex = tinycolor(props.value).toHexString().toUpperCase()
+  return _hex.replace('#', '')
+})
+
+const handleInput = (e: Event) => {
+  const value = (e.target as HTMLInputElement).value
+  if (value.length >= 6) emit('colorChange', tinycolor(value).toRgb())
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ColorPicker/Hue.vue b/src/components/ColorPicker/Hue.vue
index b95c06d9..c3d52a92 100644
--- a/src/components/ColorPicker/Hue.vue
+++ b/src/components/ColorPicker/Hue.vue
@@ -15,91 +15,83 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onUnmounted, PropType, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, onUnmounted, PropType, ref, watch } from 'vue'
 import tinycolor, { ColorFormats } from 'tinycolor2'
 
-export default defineComponent({
-  name: 'hue',
-  emits: ['colorChange'],
-  props: {
-    value: {
-      type: Object as PropType<ColorFormats.RGBA>,
-      required: true,
-    },
-    hue: {
-      type: Number,
-      required: true,
-    },
+const props = defineProps({
+  value: {
+    type: Object as PropType<ColorFormats.RGBA>,
+    required: true,
   },
-  setup(props, { emit }) {
-    const oldHue = ref(0)
-    const pullDirection = ref('')
-    
-    const color = computed(() => {
-      const hsla = tinycolor(props.value).toHsl()
-      if (props.hue !== -1) hsla.h = props.hue
-      return hsla
-    })
-
-    const pointerLeft = computed(() => {
-      if (color.value.h === 0 && pullDirection.value === 'right') return '100%'
-      return color.value.h * 100 / 360 + '%'
-    })
-
-    watch(() => props.value, () => {
-      const hsla = tinycolor(props.value).toHsl()
-      const h = hsla.s === 0 ? props.hue : hsla.h
-      if (h !== 0 && h - oldHue.value > 0) pullDirection.value = 'right'
-      if (h !== 0 && h - oldHue.value < 0) pullDirection.value = 'left'
-      oldHue.value = h
-    })
-
-    const hueRef = ref<HTMLElement>()
-    const handleChange = (e: MouseEvent) => {
-      e.preventDefault()
-      if (!hueRef.value) return
-
-      const containerWidth = hueRef.value.clientWidth
-      const xOffset = hueRef.value.getBoundingClientRect().left + window.pageXOffset
-      const left = e.pageX - xOffset
-      let h, percent
-      
-      if (left < 0) h = 0
-      else if (left > containerWidth) h = 360
-      else {
-        percent = left * 100 / containerWidth
-        h = 360 * percent / 100
-      }
-      if (props.hue === -1 || color.value.h !== h) {
-        emit('colorChange', {
-          h,
-          l: color.value.l,
-          s: color.value.s,
-          a: color.value.a,
-        })
-      }
-    }
-
-    const unbindEventListeners = () => {
-      window.removeEventListener('mousemove', handleChange)
-      window.removeEventListener('mouseup', unbindEventListeners)
-    }
-    const handleMouseDown = (e: MouseEvent) => {
-      handleChange(e)
-      window.addEventListener('mousemove', handleChange)
-      window.addEventListener('mouseup', unbindEventListeners)
-    }
-
-    onUnmounted(unbindEventListeners)
-
-    return {
-      hueRef,
-      handleMouseDown,
-      pointerLeft,
-    }
+  hue: {
+    type: Number,
+    required: true,
   },
 })
+
+const emit = defineEmits<{
+  (event: 'colorChange', payload: ColorFormats.HSLA): void
+}>()
+
+const oldHue = ref(0)
+const pullDirection = ref('')
+
+const color = computed(() => {
+  const hsla = tinycolor(props.value).toHsl()
+  if (props.hue !== -1) hsla.h = props.hue
+  return hsla
+})
+
+const pointerLeft = computed(() => {
+  if (color.value.h === 0 && pullDirection.value === 'right') return '100%'
+  return color.value.h * 100 / 360 + '%'
+})
+
+watch(() => props.value, () => {
+  const hsla = tinycolor(props.value).toHsl()
+  const h = hsla.s === 0 ? props.hue : hsla.h
+  if (h !== 0 && h - oldHue.value > 0) pullDirection.value = 'right'
+  if (h !== 0 && h - oldHue.value < 0) pullDirection.value = 'left'
+  oldHue.value = h
+})
+
+const hueRef = ref<HTMLElement>()
+const handleChange = (e: MouseEvent) => {
+  e.preventDefault()
+  if (!hueRef.value) return
+
+  const containerWidth = hueRef.value.clientWidth
+  const xOffset = hueRef.value.getBoundingClientRect().left + window.pageXOffset
+  const left = e.pageX - xOffset
+  let h, percent
+  
+  if (left < 0) h = 0
+  else if (left > containerWidth) h = 360
+  else {
+    percent = left * 100 / containerWidth
+    h = 360 * percent / 100
+  }
+  if (props.hue === -1 || color.value.h !== h) {
+    emit('colorChange', {
+      h,
+      l: color.value.l,
+      s: color.value.s,
+      a: color.value.a,
+    })
+  }
+}
+
+const unbindEventListeners = () => {
+  window.removeEventListener('mousemove', handleChange)
+  window.removeEventListener('mouseup', unbindEventListeners)
+}
+const handleMouseDown = (e: MouseEvent) => {
+  handleChange(e)
+  window.addEventListener('mousemove', handleChange)
+  window.addEventListener('mouseup', unbindEventListeners)
+}
+onUnmounted(unbindEventListeners)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ColorPicker/Saturation.vue b/src/components/ColorPicker/Saturation.vue
index 076d56fe..d9cacbec 100644
--- a/src/components/ColorPicker/Saturation.vue
+++ b/src/components/ColorPicker/Saturation.vue
@@ -18,83 +18,73 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onUnmounted, PropType, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, onUnmounted, PropType, ref } from 'vue'
 import tinycolor, { ColorFormats } from 'tinycolor2'
 import { throttle, clamp } from 'lodash'
 
-export default defineComponent({
-  name: 'saturation',
-  emits: ['colorChange'],
-  props: {
-    value: {
-      type: Object as PropType<ColorFormats.RGBA>,
-      required: true,
-    },
-    hue: {
-      type: Number,
-      required: true,
-    },
+const props = defineProps({
+  value: {
+    type: Object as PropType<ColorFormats.RGBA>,
+    required: true,
   },
-  setup(props, { emit }) {
-    const color = computed(() => {
-      const hsva = tinycolor(props.value).toHsv()
-      if (props.hue !== -1) hsva.h = props.hue
-      return hsva
-    })
-
-    const bgColor = computed(() => `hsl(${color.value.h}, 100%, 50%)`)
-    const pointerTop = computed(() => (-(color.value.v * 100) + 1) + 100 + '%')
-    const pointerLeft = computed(() => color.value.s * 100 + '%')
-
-    const emitChangeEvent = throttle(function(param) {
-      emit('colorChange', param)
-    }, 20, { leading: true, trailing: false })
-
-    const saturationRef = ref<HTMLElement>()
-    const handleChange = (e: MouseEvent) => {
-      e.preventDefault()
-      if (!saturationRef.value) return
-      
-      const containerWidth = saturationRef.value.clientWidth
-      const containerHeight = saturationRef.value.clientHeight
-      const xOffset = saturationRef.value.getBoundingClientRect().left + window.pageXOffset
-      const yOffset = saturationRef.value.getBoundingClientRect().top + window.pageYOffset
-      const left = clamp(e.pageX - xOffset, 0, containerWidth)
-      const top = clamp(e.pageY - yOffset, 0, containerHeight)
-      const saturation = left / containerWidth
-      const bright = clamp(-(top / containerHeight) + 1, 0, 1)
-
-      emitChangeEvent({
-        h: color.value.h,
-        s: saturation,
-        v: bright,
-        a: color.value.a,
-      })
-    }
-
-    
-    const unbindEventListeners = () => {
-      window.removeEventListener('mousemove', handleChange)
-      window.removeEventListener('mouseup', unbindEventListeners)
-    }
-    const handleMouseDown = (e: MouseEvent) => {
-      handleChange(e)
-      window.addEventListener('mousemove', handleChange)
-      window.addEventListener('mouseup', unbindEventListeners)
-    }
-
-    onUnmounted(unbindEventListeners)
-
-    return {
-      saturationRef,
-      bgColor,
-      handleMouseDown,
-      pointerTop,
-      pointerLeft,
-    }
+  hue: {
+    type: Number,
+    required: true,
   },
 })
+
+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
+  return hsva
+})
+
+const bgColor = computed(() => `hsl(${color.value.h}, 100%, 50%)`)
+const pointerTop = computed(() => (-(color.value.v * 100) + 1) + 100 + '%')
+const pointerLeft = computed(() => color.value.s * 100 + '%')
+
+const emitChangeEvent = throttle(function(param: ColorFormats.HSVA) {
+  emit('colorChange', param)
+}, 20, { leading: true, trailing: false })
+
+const saturationRef = ref<HTMLElement>()
+const handleChange = (e: MouseEvent) => {
+  e.preventDefault()
+  if (!saturationRef.value) return
+  
+  const containerWidth = saturationRef.value.clientWidth
+  const containerHeight = saturationRef.value.clientHeight
+  const xOffset = saturationRef.value.getBoundingClientRect().left + window.pageXOffset
+  const yOffset = saturationRef.value.getBoundingClientRect().top + window.pageYOffset
+  const left = clamp(e.pageX - xOffset, 0, containerWidth)
+  const top = clamp(e.pageY - yOffset, 0, containerHeight)
+  const saturation = left / containerWidth
+  const bright = clamp(-(top / containerHeight) + 1, 0, 1)
+
+  emitChangeEvent({
+    h: color.value.h,
+    s: saturation,
+    v: bright,
+    a: color.value.a,
+  })
+}
+
+
+const unbindEventListeners = () => {
+  window.removeEventListener('mousemove', handleChange)
+  window.removeEventListener('mouseup', unbindEventListeners)
+}
+const handleMouseDown = (e: MouseEvent) => {
+  handleChange(e)
+  window.addEventListener('mousemove', handleChange)
+  window.addEventListener('mouseup', unbindEventListeners)
+}
+onUnmounted(unbindEventListeners)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index 555b638f..dd59ba3c 100644
--- a/src/components/ColorPicker/index.vue
+++ b/src/components/ColorPicker/index.vue
@@ -72,8 +72,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+<script lang="ts" setup>
+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,170 +143,138 @@ 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,
+const hue = ref(-1)
+const recentColors = ref<string[]>([])
+
+const color = computed({
+  get() {
+    return tinycolor(props.modelValue).toRgb()
   },
-  emits: ['update:modelValue'],
-  props: {
-    modelValue: {
-      type: String,
-      default: '#e86b99',
-    },
-  },
-  setup(props, { emit }) {
-    const hue = ref(-1)
-    const recentColors = ref<string[]>([])
-
-    const color = computed({
-      get() {
-        return tinycolor(props.modelValue).toRgb()
-      },
-      set(rgba: ColorFormats.RGBA) {
-        const rgbaString = `rgba(${[rgba.r, rgba.g, rgba.b, rgba.a].join(',')})`
-        emit('update:modelValue', rgbaString)
-      },
-    })
-
-    const presetColors = getPresetColors()
-
-    const currentColor = computed(() => {
-      return `rgba(${[color.value.r, color.value.g, color.value.b, color.value.a].join(',')})`
-    })
-
-    const selectPresetColor = (colorString: string) => {
-      hue.value = tinycolor(colorString).toHsl().h
-      emit('update:modelValue', colorString)
-    }
-
-    // 每次选择非预设颜色时，需要将该颜色加入到最近使用列表中
-    const updateRecentColorsCache = debounce(function() {
-      const _color = tinycolor(color.value).toRgbString()
-      if (!recentColors.value.includes(_color)) {
-        recentColors.value = [_color, ...recentColors.value]
-
-        const maxLength = 10
-        if (recentColors.value.length > maxLength) {
-          recentColors.value = recentColors.value.slice(0, maxLength)
-        }
-      }
-    }, 300, { trailing: true })
-
-    onMounted(() => {
-      const recentColorsCache = localStorage.getItem(RECENT_COLORS)
-      if (recentColorsCache) recentColors.value = JSON.parse(recentColorsCache)
-    })
-
-    watch(recentColors, () => {
-      const recentColorsCache = JSON.stringify(recentColors.value)
-      localStorage.setItem(RECENT_COLORS, recentColorsCache)
-    })
-
-    const changeColor = (value: ColorFormats.RGBA | ColorFormats.HSLA | ColorFormats.HSVA) => {
-      if ('h' in value) {
-        hue.value = value.h
-        color.value = tinycolor(value).toRgb()
-      }
-      else {
-        hue.value = tinycolor(value).toHsl().h
-        color.value = value
-      }
-
-      updateRecentColorsCache()
-    }
-
-    const pickColor = () => {
-      const targetRef: HTMLElement | null = document.querySelector('.canvas')
-      if (!targetRef) return
-
-      const maskRef = document.createElement('div')
-      maskRef.style.cssText = 'position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; cursor: wait;'
-      document.body.appendChild(maskRef)
-
-      const colorBlockRef = document.createElement('div')
-      colorBlockRef.style.cssText = 'position: absolute; top: -100px; left: -100px; width: 16px; height: 16px; border: 1px solid #000; z-index: 999'
-      maskRef.appendChild(colorBlockRef)
-
-      const { left, top, width, height } = targetRef.getBoundingClientRect()
-
-      const filter = (node: HTMLElement) => {
-        if (node.tagName && node.tagName.toUpperCase() === 'FOREIGNOBJECT') return false
-        if (node.classList && node.classList.contains('operate')) return false
-        return true
-      }
-
-      toCanvas(targetRef, { filter, fontEmbedCSS: '', width, height, canvasWidth: width, canvasHeight: height, pixelRatio: 1 }).then(canvasRef => {
-        canvasRef.style.cssText = `position: absolute; top: ${top}px; left: ${left}px; cursor: crosshair;`
-        maskRef.style.cursor = 'default'
-        maskRef.appendChild(canvasRef)
-
-        const ctx = canvasRef.getContext('2d')
-        if (!ctx) return
-
-        let currentColor = ''
-        const handleMousemove = (e: MouseEvent) => {
-          const x = e.x
-          const y = e.y
-
-          const mouseX = x - left
-          const mouseY = y - top
-
-          const [r, g, b, a] = ctx.getImageData(mouseX, mouseY, 1, 1).data
-          currentColor = `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(2)})`
-
-          colorBlockRef.style.left = x + 10 + 'px'
-          colorBlockRef.style.top = y + 10 + 'px'
-          colorBlockRef.style.backgroundColor = currentColor
-        }
-        const handleMouseleave = () => {
-          currentColor = ''
-          colorBlockRef.style.left = '-100px'
-          colorBlockRef.style.top = '-100px'
-          colorBlockRef.style.backgroundColor = ''
-        }
-        const handleMousedown = (e: MouseEvent) => {
-          if (currentColor && e.button === 0) {
-            const tColor = tinycolor(currentColor)
-            hue.value = tColor.toHsl().h
-            color.value = tColor.toRgb()
-
-            updateRecentColorsCache()
-          }
-          document.body.removeChild(maskRef)
-          
-          canvasRef.removeEventListener('mousemove', handleMousemove)
-          canvasRef.removeEventListener('mouseleave', handleMouseleave)
-          window.removeEventListener('mousedown', handleMousedown)
-        }
-
-        canvasRef.addEventListener('mousemove', handleMousemove)
-        canvasRef.addEventListener('mouseleave', handleMouseleave)
-        window.addEventListener('mousedown', handleMousedown)
-      }).catch(() => {
-        message.error('取色吸管初始化失败')
-        document.body.removeChild(maskRef)
-      })
-    }
-
-    return {
-      themeColors,
-      standardColors,
-      presetColors,
-      color,
-      hue,
-      currentColor,
-      changeColor,
-      selectPresetColor,
-      recentColors,
-      pickColor,
-    }
+  set(rgba: ColorFormats.RGBA) {
+    const rgbaString = `rgba(${[rgba.r, rgba.g, rgba.b, rgba.a].join(',')})`
+    emit('update:modelValue', rgbaString)
   },
 })
+
+const presetColors = getPresetColors()
+
+const currentColor = computed(() => {
+  return `rgba(${[color.value.r, color.value.g, color.value.b, color.value.a].join(',')})`
+})
+
+const selectPresetColor = (colorString: string) => {
+  hue.value = tinycolor(colorString).toHsl().h
+  emit('update:modelValue', colorString)
+}
+
+// 每次选择非预设颜色时，需要将该颜色加入到最近使用列表中
+const updateRecentColorsCache = debounce(function() {
+  const _color = tinycolor(color.value).toRgbString()
+  if (!recentColors.value.includes(_color)) {
+    recentColors.value = [_color, ...recentColors.value]
+
+    const maxLength = 10
+    if (recentColors.value.length > maxLength) {
+      recentColors.value = recentColors.value.slice(0, maxLength)
+    }
+  }
+}, 300, { trailing: true })
+
+onMounted(() => {
+  const recentColorsCache = localStorage.getItem(RECENT_COLORS)
+  if (recentColorsCache) recentColors.value = JSON.parse(recentColorsCache)
+})
+
+watch(recentColors, () => {
+  const recentColorsCache = JSON.stringify(recentColors.value)
+  localStorage.setItem(RECENT_COLORS, recentColorsCache)
+})
+
+const changeColor = (value: ColorFormats.RGBA | ColorFormats.HSLA | ColorFormats.HSVA) => {
+  if ('h' in value) {
+    hue.value = value.h
+    color.value = tinycolor(value).toRgb()
+  }
+  else {
+    hue.value = tinycolor(value).toHsl().h
+    color.value = value
+  }
+
+  updateRecentColorsCache()
+}
+
+const pickColor = () => {
+  const targetRef: HTMLElement | null = document.querySelector('.canvas')
+  if (!targetRef) return
+
+  const maskRef = document.createElement('div')
+  maskRef.style.cssText = 'position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; cursor: wait;'
+  document.body.appendChild(maskRef)
+
+  const colorBlockRef = document.createElement('div')
+  colorBlockRef.style.cssText = 'position: absolute; top: -100px; left: -100px; width: 16px; height: 16px; border: 1px solid #000; z-index: 999'
+  maskRef.appendChild(colorBlockRef)
+
+  const { left, top, width, height } = targetRef.getBoundingClientRect()
+
+  const filter = (node: HTMLElement) => {
+    if (node.tagName && node.tagName.toUpperCase() === 'FOREIGNOBJECT') return false
+    if (node.classList && node.classList.contains('operate')) return false
+    return true
+  }
+
+  toCanvas(targetRef, { filter, fontEmbedCSS: '', width, height, canvasWidth: width, canvasHeight: height, pixelRatio: 1 }).then(canvasRef => {
+    canvasRef.style.cssText = `position: absolute; top: ${top}px; left: ${left}px; cursor: crosshair;`
+    maskRef.style.cursor = 'default'
+    maskRef.appendChild(canvasRef)
+
+    const ctx = canvasRef.getContext('2d')
+    if (!ctx) return
+
+    let currentColor = ''
+    const handleMousemove = (e: MouseEvent) => {
+      const x = e.x
+      const y = e.y
+
+      const mouseX = x - left
+      const mouseY = y - top
+
+      const [r, g, b, a] = ctx.getImageData(mouseX, mouseY, 1, 1).data
+      currentColor = `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(2)})`
+
+      colorBlockRef.style.left = x + 10 + 'px'
+      colorBlockRef.style.top = y + 10 + 'px'
+      colorBlockRef.style.backgroundColor = currentColor
+    }
+    const handleMouseleave = () => {
+      currentColor = ''
+      colorBlockRef.style.left = '-100px'
+      colorBlockRef.style.top = '-100px'
+      colorBlockRef.style.backgroundColor = ''
+    }
+    const handleMousedown = (e: MouseEvent) => {
+      if (currentColor && e.button === 0) {
+        const tColor = tinycolor(currentColor)
+        hue.value = tColor.toHsl().h
+        color.value = tColor.toRgb()
+
+        updateRecentColorsCache()
+      }
+      document.body.removeChild(maskRef)
+      
+      canvasRef.removeEventListener('mousemove', handleMousemove)
+      canvasRef.removeEventListener('mouseleave', handleMouseleave)
+      window.removeEventListener('mousedown', handleMousedown)
+    }
+
+    canvasRef.addEventListener('mousemove', handleMousemove)
+    canvasRef.addEventListener('mouseleave', handleMouseleave)
+    window.addEventListener('mousedown', handleMousedown)
+  }).catch(() => {
+    message.error('取色吸管初始化失败')
+    document.body.removeChild(maskRef)
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Contextmenu/MenuContent.vue b/src/components/Contextmenu/MenuContent.vue
index 8aef745c..d2d0c514 100644
--- a/src/components/Contextmenu/MenuContent.vue
+++ b/src/components/Contextmenu/MenuContent.vue
@@ -30,21 +30,18 @@
   </ul>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 import { ContextmenuItem } from './types'
 
-export default defineComponent({
-  name: 'menu-content',
-  props: {
-    menus: {
-      type: Array as PropType<ContextmenuItem[]>,
-      required: true,
-    },
-    handleClickMenuItem: {
-      type: Function,
-      required: true,
-    },
+defineProps({
+  menus: {
+    type: Array as PropType<ContextmenuItem[]>,
+    required: true,
+  },
+  handleClickMenuItem: {
+    type: Function,
+    required: true,
   },
 })
 </script>
diff --git a/src/components/Contextmenu/index.vue b/src/components/Contextmenu/index.vue
index f2ba0705..64a517fb 100644
--- a/src/components/Contextmenu/index.vue
+++ b/src/components/Contextmenu/index.vue
@@ -20,71 +20,59 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { ContextmenuItem, Axis } from './types'
 
 import MenuContent from './MenuContent.vue'
 
-export default defineComponent({
-  name: 'contextmenu',
-  components: {
-    MenuContent,
+const props = defineProps({
+  axis: {
+    type: Object as PropType<Axis>,
+    required: true,
   },
-  props: {
-    axis: {
-      type: Object as PropType<Axis>,
-      required: true,
-    },
-    el: {
-      type: Object as PropType<HTMLElement>,
-      required: true,
-    },
-    menus: {
-      type: Array as PropType<ContextmenuItem[]>,
-      required: true,
-    },
-    removeContextmenu: {
-      type: Function,
-      required: true,
-    },
+  el: {
+    type: Object as PropType<HTMLElement>,
+    required: true,
   },
-  setup(props) {
-    const style = computed(() => {
-      const MENU_WIDTH = 170
-      const MENU_HEIGHT = 30
-      const DIVIDER_HEIGHT = 11
-      const PADDING = 5
-
-      const { x, y } = props.axis
-      const menuCount = props.menus.filter(menu => !(menu.divider || menu.hide)).length
-      const dividerCount = props.menus.filter(menu => menu.divider).length
-
-      const menuWidth = MENU_WIDTH
-      const menuHeight = menuCount * MENU_HEIGHT + dividerCount * DIVIDER_HEIGHT + PADDING * 2
-
-      const screenWidth = document.body.clientWidth
-      const screenHeight = document.body.clientHeight
-
-      return {
-        left: screenWidth <= x + menuWidth ? x - menuWidth : x,
-        top: screenHeight <= y + menuHeight ? y - menuHeight : y,
-      }
-    })
-
-    const handleClickMenuItem = (item: ContextmenuItem) => {
-      if (item.disable) return
-      if (item.children && !item.handler) return
-      if (item.handler) item.handler(props.el)
-      props.removeContextmenu()
-    }
-
-    return {
-      style,
-      handleClickMenuItem,
-    }
+  menus: {
+    type: Array as PropType<ContextmenuItem[]>,
+    required: true,
+  },
+  removeContextmenu: {
+    type: Function,
+    required: true,
   },
 })
+
+const style = computed(() => {
+  const MENU_WIDTH = 170
+  const MENU_HEIGHT = 30
+  const DIVIDER_HEIGHT = 11
+  const PADDING = 5
+
+  const { x, y } = props.axis
+  const menuCount = props.menus.filter(menu => !(menu.divider || menu.hide)).length
+  const dividerCount = props.menus.filter(menu => menu.divider).length
+
+  const menuWidth = MENU_WIDTH
+  const menuHeight = menuCount * MENU_HEIGHT + dividerCount * DIVIDER_HEIGHT + PADDING * 2
+
+  const screenWidth = document.body.clientWidth
+  const screenHeight = document.body.clientHeight
+
+  return {
+    left: screenWidth <= x + menuWidth ? x - menuWidth : x,
+    top: screenHeight <= y + menuHeight ? y - menuHeight : y,
+  }
+})
+
+const handleClickMenuItem = (item: ContextmenuItem) => {
+  if (item.disable) return
+  if (item.children && !item.handler) return
+  if (item.handler) item.handler(props.el)
+  props.removeContextmenu()
+}
 </script>
 
 <style lang="scss">
diff --git a/src/components/FileInput.vue b/src/components/FileInput.vue
index 5e6af4c9..60c5eaad 100644
--- a/src/components/FileInput.vue
+++ b/src/components/FileInput.vue
@@ -12,38 +12,31 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { ref } from 'vue'
 
-export default defineComponent({
-  name: 'file-input',
-  emits: ['change'],
-  props: {
-    accept: {
-      type: String,
-      default: 'image/*',
-    },
-  },
-  setup(props, { emit }) {
-    const inputRef = ref<HTMLInputElement>()
-
-    const handleClick = () => {
-      if (!inputRef.value) return
-      inputRef.value.value = ''
-      inputRef.value.click()
-    }
-    const handleChange = (e: Event) => {
-      const files = (e.target as HTMLInputElement).files
-      if (files) emit('change', files)
-    }
-
-    return {
-      handleClick,
-      handleChange,
-      inputRef,
-    }
+const props = defineProps({
+  accept: {
+    type: String,
+    default: 'image/*',
   },
 })
+
+const emit = defineEmits<{
+  (event: 'change', payload: FileList): void
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+
+const handleClick = () => {
+  if (!inputRef.value) return
+  inputRef.value.value = ''
+  inputRef.value.click()
+}
+const handleChange = (e: Event) => {
+  const files = (e.target as HTMLInputElement).files
+  if (files) emit('change', files)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/FullscreenSpin.vue b/src/components/FullscreenSpin.vue
index 528d9ec8..a9fcdeda 100644
--- a/src/components/FullscreenSpin.vue
+++ b/src/components/FullscreenSpin.vue
@@ -2,20 +2,15 @@
   <div class="fullscreen-spin" v-if="loading"><Spin :tip="tip" size="large" /></div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'fullscreen-spin',
-  props: {
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    tip: {
-      type: String,
-      default: '',
-    },
+<script lang="ts" setup>
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  tip: {
+    type: String,
+    default: '',
   },
 })
 </script>
diff --git a/src/components/LaTeXEditor/FormulaContent.vue b/src/components/LaTeXEditor/FormulaContent.vue
index 635c07e9..9e5e3aaa 100644
--- a/src/components/LaTeXEditor/FormulaContent.vue
+++ b/src/components/LaTeXEditor/FormulaContent.vue
@@ -19,53 +19,43 @@
   </svg>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
 import { hfmath } from './hfmath'
 
-export default defineComponent({
-  name: 'formula-content',
-  props: {
-    latex: {
-      type: String,
-      required: true,
-    },
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
+const props = defineProps({
+  latex: {
+    type: String,
+    required: true,
   },
-  setup(props) {
-    const box = ref({ x: 0, y: 0, w: 0, h: 0 })
-    const pathd = ref('')
-
-    watch(() => props.latex, () => {
-      const eq = new hfmath(props.latex)
-      pathd.value = eq.pathd({})
-      box.value = eq.box({})
-    }, { immediate: true })
-
-    const scale = computed(() => {
-      const boxW = box.value.w + 32
-      const boxH = box.value.h + 32
-
-      if (boxW > props.width || boxH > props.height) {
-        if (boxW / boxH > props.width / props.height) return props.width / boxW
-        return props.height / boxH
-      }
-      return 1
-    })
-
-    return {
-      box,
-      pathd,
-      scale,
-    }
+  width: {
+    type: Number,
+    required: true,
   },
+  height: {
+    type: Number,
+    required: true,
+  },
+})
+
+const box = ref({ x: 0, y: 0, w: 0, h: 0 })
+const pathd = ref('')
+
+watch(() => props.latex, () => {
+  const eq = new hfmath(props.latex)
+  pathd.value = eq.pathd({})
+  box.value = eq.box({})
+}, { immediate: true })
+
+const scale = computed(() => {
+  const boxW = box.value.w + 32
+  const boxH = box.value.h + 32
+
+  if (boxW > props.width || boxH > props.height) {
+    if (boxW / boxH > props.width / props.height) return props.width / boxW
+    return props.height / boxH
+  }
+  return 1
 })
 </script>
 
diff --git a/src/components/LaTeXEditor/SymbolContent.vue b/src/components/LaTeXEditor/SymbolContent.vue
index 0204117e..45a419f4 100644
--- a/src/components/LaTeXEditor/SymbolContent.vue
+++ b/src/components/LaTeXEditor/SymbolContent.vue
@@ -2,30 +2,22 @@
   <div class="symbol-content" v-html="svg"></div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
 import { hfmath } from './hfmath'
 
-export default defineComponent({
-  name: 'symbol-content',
-  props: {
-    latex: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const svg = computed(() => {
-      const eq = new hfmath(props.latex)
-      return eq.svg({
-        SCALE_X: 10,
-        SCALE_Y: 10,
-      })
-    })
-
-    return {
-      svg,
-    }
+const props = defineProps({
+  latex: {
+    type: String,
+    required: true,
   },
 })
+
+const svg = computed(() => {
+  const eq = new hfmath(props.latex)
+  return eq.svg({
+    SCALE_X: 10,
+    SCALE_Y: 10,
+  })
+})
 </script>
diff --git a/src/components/LaTeXEditor/index.vue b/src/components/LaTeXEditor/index.vue
index b4709dac..1ec0e4ec 100644
--- a/src/components/LaTeXEditor/index.vue
+++ b/src/components/LaTeXEditor/index.vue
@@ -65,8 +65,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
 import { hfmath } from './hfmath'
 import { FORMULA_LIST, SYMBOL_LIST } from '@/configs/latex'
 
@@ -83,72 +83,64 @@ const tabs: Tab[] = [
   { label: '预置公式', value: 'formula' },
 ]
 
-export default defineComponent({
-  name: 'latex-editor',
-  emits: ['update', 'close'],
-  components: {
-    FormulaContent,
-    SymbolContent,
-  },
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-  setup(props, { emit }) {
-    const latex = ref('')
-    const toolbarState = ref<'symbol' | 'formula'>('symbol')
-    const textAreaRef = ref<HTMLTextAreaElement>()
+interface LatexResult {
+  latex: string
+  path: string
+  w: number
+  h: number
+}
 
-    const selectedSymbolKey = ref(SYMBOL_LIST[0].type)
-    const symbolPool = computed(() => {
-      const selectedSymbol = SYMBOL_LIST.find(item => item.type === selectedSymbolKey.value)
-      return selectedSymbol?.children || []
-    })
-
-    onMounted(() => {
-      if (props.value) latex.value = props.value
-    })
-
-    const update = () => {
-      if (!latex.value) return
-
-      const eq = new hfmath(latex.value)
-      const pathd = eq.pathd({})
-      const box = eq.box({})
-      
-      emit('update', {
-        latex: latex.value,
-        path: pathd,
-        w: box.w + 32,
-        h: box.h + 32,
-      })
-    }
-
-    const close = () => emit('close')
-
-    const insertSymbol = (latex: string) => {
-      if (!textAreaRef.value) return
-      textAreaRef.value.focus()
-      document.execCommand('insertText', false, latex)
-    }
-
-    return {
-      tabs,
-      latex,
-      toolbarState,
-      selectedSymbolKey,
-      formulaList: FORMULA_LIST,
-      symbolList: SYMBOL_LIST,
-      symbolPool,
-      textAreaRef,
-      update,
-      close,
-      insertSymbol,
-    }
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
   },
 })
+
+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>()
+
+const selectedSymbolKey = ref(SYMBOL_LIST[0].type)
+const symbolPool = computed(() => {
+  const selectedSymbol = SYMBOL_LIST.find(item => item.type === selectedSymbolKey.value)
+  return selectedSymbol?.children || []
+})
+
+onMounted(() => {
+  if (props.value) latex.value = props.value
+})
+
+const update = () => {
+  if (!latex.value) return
+
+  const eq = new hfmath(latex.value)
+  const pathd = eq.pathd({})
+  const box = eq.box({})
+  
+  emit('update', {
+    latex: latex.value,
+    path: pathd,
+    w: box.w + 32,
+    h: box.h + 32,
+  })
+}
+
+const close = () => emit('close')
+
+const insertSymbol = (latex: string) => {
+  if (!textAreaRef.value) return
+  textAreaRef.value.focus()
+  document.execCommand('insertText', false, latex)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/WritingBoard.vue b/src/components/WritingBoard.vue
index a4a988f1..fe7e9bbd 100644
--- a/src/components/WritingBoard.vue
+++ b/src/components/WritingBoard.vue
@@ -55,294 +55,277 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
 import { throttle } from 'lodash'
 
-export default defineComponent({
-  name: 'writing-board',
-  props: {
-    color: {
-      type: String,
-      default: '#ffcc00',
-    },
-    model: {
-      type: String as PropType<'pen' | 'eraser' | 'mark'>,
-      default: 'pen',
-    },
-    blackboard: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#ffcc00',
   },
-  setup(props) {
-    let ctx: CanvasRenderingContext2D | null = null
-    const writingBoardRef = ref<HTMLElement>()
-    const canvasRef = ref<HTMLCanvasElement>()
-
-    const penSize = ref(6)
-    const rubberSize = ref(80)
-    const markSize = ref(24)
-
-    let lastPos = {
-      x: 0,
-      y: 0,
-    }
-    let isMouseDown = false
-    let lastTime = 0
-    let lastLineWidth = -1
-
-    // 鼠标位置坐标：用于画笔或橡皮位置跟随
-    const mouse = ref({
-      x: 0,
-      y: 0,
-    })
-    
-    // 鼠标是否处在画布范围内：处在范围内才会显示画笔或橡皮
-    const mouseInCanvas = ref(false)
-
-    // 监听更新canvas尺寸
-    const canvasWidth = ref(0)
-    const canvasHeight = ref(0)
-
-    const widthScale = computed(() => canvasRef.value ? canvasWidth.value / canvasRef.value.width : 1)
-    const heightScale = computed(() => canvasRef.value ? canvasHeight.value / canvasRef.value.height : 1)
-
-    const updateCanvasSize = () => {
-      if (!writingBoardRef.value) return
-      canvasWidth.value = writingBoardRef.value.clientWidth
-      canvasHeight.value = writingBoardRef.value.clientHeight
-    }
-    const resizeObserver = new ResizeObserver(updateCanvasSize)
-    onMounted(() => {
-      if (writingBoardRef.value) resizeObserver.observe(writingBoardRef.value)
-    })
-    onUnmounted(() => {
-      if (writingBoardRef.value) resizeObserver.unobserve(writingBoardRef.value)
-    })
-
-    // 初始化画布
-    const initCanvas = () => {
-      if (!canvasRef.value || !writingBoardRef.value) return
-
-      ctx = canvasRef.value.getContext('2d')
-      if (!ctx) return
-
-      canvasRef.value.width = writingBoardRef.value.clientWidth
-      canvasRef.value.height = writingBoardRef.value.clientHeight
-
-      ctx.lineCap = 'round'
-      ctx.lineJoin = 'round'
-    }
-    onMounted(initCanvas)
-
-    // 切换画笔模式时，更新 canvas ctx 配置
-    const updateCtx = () => {
-      if (!ctx) return
-      if (props.model === 'mark') {
-        ctx.globalCompositeOperation = 'xor'
-        ctx.globalAlpha = 0.5
-      }
-      else if (props.model === 'pen') {
-        ctx.globalCompositeOperation = 'source-over'
-        ctx.globalAlpha = 1
-      }
-    }
-    watch(() => props.model, updateCtx)
-
-    // 绘制画笔墨迹方法
-    const draw = (posX: number, posY: number, lineWidth: number) => {
-      if (!ctx) return
-
-      const lastPosX = lastPos.x
-      const lastPosY = lastPos.y
-
-      ctx.lineWidth = lineWidth
-      ctx.strokeStyle = props.color
-      ctx.beginPath()
-      ctx.moveTo(lastPosX, lastPosY)
-      ctx.lineTo(posX, posY)
-      ctx.stroke()
-      ctx.closePath()
-    }
-
-    // 擦除墨迹方法
-    const erase = (posX: number, posY: number) => {
-      if (!ctx || !canvasRef.value) return
-      const lastPosX = lastPos.x
-      const lastPosY = lastPos.y
-
-      const radius = rubberSize.value / 2
-
-      const sinRadius = radius * Math.sin(Math.atan((posY - lastPosY) / (posX - lastPosX)))
-      const cosRadius = radius * Math.cos(Math.atan((posY - lastPosY) / (posX - lastPosX)))
-      const rectPoint1: [number, number] = [lastPosX + sinRadius, lastPosY - cosRadius]
-      const rectPoint2: [number, number] = [lastPosX - sinRadius, lastPosY + cosRadius]
-      const rectPoint3: [number, number] = [posX + sinRadius, posY - cosRadius]
-      const rectPoint4: [number, number] = [posX - sinRadius, posY + cosRadius]
-
-      ctx.save()
-      ctx.beginPath()
-      ctx.arc(posX, posY, radius, 0, Math.PI * 2)
-      ctx.clip()
-      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
-      ctx.restore()
-
-      ctx.save()
-      ctx.beginPath()
-      ctx.moveTo(...rectPoint1)
-      ctx.lineTo(...rectPoint3)
-      ctx.lineTo(...rectPoint4)
-      ctx.lineTo(...rectPoint2)
-      ctx.closePath()
-      ctx.clip()
-      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
-      ctx.restore()
-    }
-
-    // 计算鼠标两次移动之间的距离
-    const getDistance = (posX: number, posY: number) => {
-      const lastPosX = lastPos.x
-      const lastPosY = lastPos.y
-      return Math.sqrt((posX - lastPosX) * (posX - lastPosX) + (posY - lastPosY) * (posY - lastPosY))
-    }
-
-    // 根据鼠标两次移动之间的距离s和时间t计算绘制速度，速度越快，墨迹越细
-    const getLineWidth = (s: number, t: number) => {
-      const maxV = 10
-      const minV = 0.1
-      const maxWidth = penSize.value
-      const minWidth = 3
-      const v = s / t
-      let lineWidth
-
-      if (v <= minV) lineWidth = maxWidth
-      else if (v >= maxV) lineWidth = minWidth
-      else lineWidth = maxWidth - v / maxV * maxWidth
-
-      if (lastLineWidth === -1) return lineWidth
-      return lineWidth * 1 / 3 + lastLineWidth * 2 / 3
-    }
-
-    // 路径操作
-    const handleMove = (x: number, y: number) => {
-      const time = new Date().getTime()
-
-      if (props.model === 'pen') {
-        const s = getDistance(x, y)
-        const t = time - lastTime
-        const lineWidth = getLineWidth(s, t)
-
-        draw(x, y, lineWidth)
-        lastLineWidth = lineWidth
-      }
-      else if (props.model === 'mark') draw(x, y, markSize.value)
-      else erase(x, y)
-
-      lastPos = { x, y }
-      lastTime = new Date().getTime()
-    }
-
-    // 获取鼠标在canvas中的相对位置
-    const getMouseOffsetPosition = (e: MouseEvent | TouchEvent) => {
-      if (!canvasRef.value) return [0, 0]
-      const event = e instanceof MouseEvent ? e : e.changedTouches[0]
-      const canvasRect = canvasRef.value.getBoundingClientRect()
-      const x = event.pageX - canvasRect.x
-      const y = event.pageY - canvasRect.y
-      return [x, y]
-    }
-
-    // 处理鼠标（触摸）事件
-    // 准备开始绘制/擦除墨迹（落笔）
-    const handleMousedown = (e: MouseEvent | TouchEvent) => {
-      const [mouseX, mouseY] = getMouseOffsetPosition(e)
-      const x = mouseX / widthScale.value
-      const y = mouseY / heightScale.value
-
-      isMouseDown = true
-      lastPos = { x, y }
-      lastTime = new Date().getTime()
-
-      if (!(e instanceof MouseEvent)) {
-        mouse.value = { x: mouseX, y: mouseY }
-        mouseInCanvas.value = true
-      }
-    }
-
-    // 开始绘制/擦除墨迹（移动）
-    const handleMousemove = (e: MouseEvent | TouchEvent) => {
-      const [mouseX, mouseY] = getMouseOffsetPosition(e)
-      const x = mouseX / widthScale.value
-      const y = mouseY / heightScale.value
-
-      mouse.value = { x: mouseX, y: mouseY }
-
-      if (isMouseDown) handleMove(x, y)
-    }
-
-    // 结束绘制/擦除墨迹（停笔）
-    const handleMouseup = () => {
-      if (!isMouseDown) return
-      isMouseDown = false
-    }
-
-    // 清空画布
-    const clearCanvas = () => {
-      if (!ctx || !canvasRef.value) return
-      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
-    }
-
-    // 获取 DataURL
-    const getImageDataURL = () => {
-      return canvasRef.value?.toDataURL()
-    }
-    
-    // 设置 DataURL（绘制图片到 canvas）
-    const setImageDataURL = (imageDataURL: string) => {
-      const img = new Image()
-      img.src = imageDataURL
-      img.onload = () => {
-        if (!ctx) return
-        ctx.drawImage(img, 0, 0)
-      }
-    }
-
-    // 滚动鼠标滚轮，调整笔触大小
-    const mousewheelListener = throttle(function(e: WheelEvent) {
-      if (props.model === 'eraser') {
-        if (e.deltaY < 0 && rubberSize.value < 200) rubberSize.value += 20
-        else if (e.deltaY > 0 && rubberSize.value > 20) rubberSize.value -= 20
-      }
-      if (props.model === 'pen') {
-        if (e.deltaY < 0 && penSize.value < 10) penSize.value += 2
-        else if (e.deltaY > 0 && penSize.value > 4) penSize.value -= 2
-      }
-      if (props.model === 'mark') {
-        if (e.deltaY < 0 && markSize.value < 40) markSize.value += 4
-        else if (e.deltaY > 0 && markSize.value > 16) markSize.value -= 4
-      }
-    }, 300, { leading: true, trailing: false })
-
-    return {
-      mouse,
-      mouseInCanvas,
-      penSize,
-      rubberSize,
-      markSize,
-      writingBoardRef,
-      canvasRef,
-      canvasWidth,
-      canvasHeight,
-      handleMousedown,
-      handleMousemove,
-      handleMouseup,
-      clearCanvas,
-      getImageDataURL,
-      setImageDataURL,
-      mousewheelListener,
-    }
+  model: {
+    type: String as PropType<'pen' | 'eraser' | 'mark'>,
+    default: 'pen',
   },
+  blackboard: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+let ctx: CanvasRenderingContext2D | null = null
+const writingBoardRef = ref<HTMLElement>()
+const canvasRef = ref<HTMLCanvasElement>()
+
+const penSize = ref(6)
+const rubberSize = ref(80)
+const markSize = ref(24)
+
+let lastPos = {
+  x: 0,
+  y: 0,
+}
+let isMouseDown = false
+let lastTime = 0
+let lastLineWidth = -1
+
+// 鼠标位置坐标：用于画笔或橡皮位置跟随
+const mouse = ref({
+  x: 0,
+  y: 0,
+})
+
+// 鼠标是否处在画布范围内：处在范围内才会显示画笔或橡皮
+const mouseInCanvas = ref(false)
+
+// 监听更新canvas尺寸
+const canvasWidth = ref(0)
+const canvasHeight = ref(0)
+
+const widthScale = computed(() => canvasRef.value ? canvasWidth.value / canvasRef.value.width : 1)
+const heightScale = computed(() => canvasRef.value ? canvasHeight.value / canvasRef.value.height : 1)
+
+const updateCanvasSize = () => {
+  if (!writingBoardRef.value) return
+  canvasWidth.value = writingBoardRef.value.clientWidth
+  canvasHeight.value = writingBoardRef.value.clientHeight
+}
+const resizeObserver = new ResizeObserver(updateCanvasSize)
+onMounted(() => {
+  if (writingBoardRef.value) resizeObserver.observe(writingBoardRef.value)
+})
+onUnmounted(() => {
+  if (writingBoardRef.value) resizeObserver.unobserve(writingBoardRef.value)
+})
+
+// 初始化画布
+const initCanvas = () => {
+  if (!canvasRef.value || !writingBoardRef.value) return
+
+  ctx = canvasRef.value.getContext('2d')
+  if (!ctx) return
+
+  canvasRef.value.width = writingBoardRef.value.clientWidth
+  canvasRef.value.height = writingBoardRef.value.clientHeight
+
+  ctx.lineCap = 'round'
+  ctx.lineJoin = 'round'
+}
+onMounted(initCanvas)
+
+// 切换画笔模式时，更新 canvas ctx 配置
+const updateCtx = () => {
+  if (!ctx) return
+  if (props.model === 'mark') {
+    ctx.globalCompositeOperation = 'xor'
+    ctx.globalAlpha = 0.5
+  }
+  else if (props.model === 'pen') {
+    ctx.globalCompositeOperation = 'source-over'
+    ctx.globalAlpha = 1
+  }
+}
+watch(() => props.model, updateCtx)
+
+// 绘制画笔墨迹方法
+const draw = (posX: number, posY: number, lineWidth: number) => {
+  if (!ctx) return
+
+  const lastPosX = lastPos.x
+  const lastPosY = lastPos.y
+
+  ctx.lineWidth = lineWidth
+  ctx.strokeStyle = props.color
+  ctx.beginPath()
+  ctx.moveTo(lastPosX, lastPosY)
+  ctx.lineTo(posX, posY)
+  ctx.stroke()
+  ctx.closePath()
+}
+
+// 擦除墨迹方法
+const erase = (posX: number, posY: number) => {
+  if (!ctx || !canvasRef.value) return
+  const lastPosX = lastPos.x
+  const lastPosY = lastPos.y
+
+  const radius = rubberSize.value / 2
+
+  const sinRadius = radius * Math.sin(Math.atan((posY - lastPosY) / (posX - lastPosX)))
+  const cosRadius = radius * Math.cos(Math.atan((posY - lastPosY) / (posX - lastPosX)))
+  const rectPoint1: [number, number] = [lastPosX + sinRadius, lastPosY - cosRadius]
+  const rectPoint2: [number, number] = [lastPosX - sinRadius, lastPosY + cosRadius]
+  const rectPoint3: [number, number] = [posX + sinRadius, posY - cosRadius]
+  const rectPoint4: [number, number] = [posX - sinRadius, posY + cosRadius]
+
+  ctx.save()
+  ctx.beginPath()
+  ctx.arc(posX, posY, radius, 0, Math.PI * 2)
+  ctx.clip()
+  ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+  ctx.restore()
+
+  ctx.save()
+  ctx.beginPath()
+  ctx.moveTo(...rectPoint1)
+  ctx.lineTo(...rectPoint3)
+  ctx.lineTo(...rectPoint4)
+  ctx.lineTo(...rectPoint2)
+  ctx.closePath()
+  ctx.clip()
+  ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+  ctx.restore()
+}
+
+// 计算鼠标两次移动之间的距离
+const getDistance = (posX: number, posY: number) => {
+  const lastPosX = lastPos.x
+  const lastPosY = lastPos.y
+  return Math.sqrt((posX - lastPosX) * (posX - lastPosX) + (posY - lastPosY) * (posY - lastPosY))
+}
+
+// 根据鼠标两次移动之间的距离s和时间t计算绘制速度，速度越快，墨迹越细
+const getLineWidth = (s: number, t: number) => {
+  const maxV = 10
+  const minV = 0.1
+  const maxWidth = penSize.value
+  const minWidth = 3
+  const v = s / t
+  let lineWidth
+
+  if (v <= minV) lineWidth = maxWidth
+  else if (v >= maxV) lineWidth = minWidth
+  else lineWidth = maxWidth - v / maxV * maxWidth
+
+  if (lastLineWidth === -1) return lineWidth
+  return lineWidth * 1 / 3 + lastLineWidth * 2 / 3
+}
+
+// 路径操作
+const handleMove = (x: number, y: number) => {
+  const time = new Date().getTime()
+
+  if (props.model === 'pen') {
+    const s = getDistance(x, y)
+    const t = time - lastTime
+    const lineWidth = getLineWidth(s, t)
+
+    draw(x, y, lineWidth)
+    lastLineWidth = lineWidth
+  }
+  else if (props.model === 'mark') draw(x, y, markSize.value)
+  else erase(x, y)
+
+  lastPos = { x, y }
+  lastTime = new Date().getTime()
+}
+
+// 获取鼠标在canvas中的相对位置
+const getMouseOffsetPosition = (e: MouseEvent | TouchEvent) => {
+  if (!canvasRef.value) return [0, 0]
+  const event = e instanceof MouseEvent ? e : e.changedTouches[0]
+  const canvasRect = canvasRef.value.getBoundingClientRect()
+  const x = event.pageX - canvasRect.x
+  const y = event.pageY - canvasRect.y
+  return [x, y]
+}
+
+// 处理鼠标（触摸）事件
+// 准备开始绘制/擦除墨迹（落笔）
+const handleMousedown = (e: MouseEvent | TouchEvent) => {
+  const [mouseX, mouseY] = getMouseOffsetPosition(e)
+  const x = mouseX / widthScale.value
+  const y = mouseY / heightScale.value
+
+  isMouseDown = true
+  lastPos = { x, y }
+  lastTime = new Date().getTime()
+
+  if (!(e instanceof MouseEvent)) {
+    mouse.value = { x: mouseX, y: mouseY }
+    mouseInCanvas.value = true
+  }
+}
+
+// 开始绘制/擦除墨迹（移动）
+const handleMousemove = (e: MouseEvent | TouchEvent) => {
+  const [mouseX, mouseY] = getMouseOffsetPosition(e)
+  const x = mouseX / widthScale.value
+  const y = mouseY / heightScale.value
+
+  mouse.value = { x: mouseX, y: mouseY }
+
+  if (isMouseDown) handleMove(x, y)
+}
+
+// 结束绘制/擦除墨迹（停笔）
+const handleMouseup = () => {
+  if (!isMouseDown) return
+  isMouseDown = false
+}
+
+// 清空画布
+const clearCanvas = () => {
+  if (!ctx || !canvasRef.value) return
+  ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+}
+
+// 获取 DataURL
+const getImageDataURL = () => {
+  return canvasRef.value?.toDataURL()
+}
+
+// 设置 DataURL（绘制图片到 canvas）
+const setImageDataURL = (imageDataURL: string) => {
+  const img = new Image()
+  img.src = imageDataURL
+  img.onload = () => {
+    if (!ctx) return
+    ctx.drawImage(img, 0, 0)
+  }
+}
+
+// 滚动鼠标滚轮，调整笔触大小
+const mousewheelListener = throttle(function(e: WheelEvent) {
+  if (props.model === 'eraser') {
+    if (e.deltaY < 0 && rubberSize.value < 200) rubberSize.value += 20
+    else if (e.deltaY > 0 && rubberSize.value > 20) rubberSize.value -= 20
+  }
+  if (props.model === 'pen') {
+    if (e.deltaY < 0 && penSize.value < 10) penSize.value += 2
+    else if (e.deltaY > 0 && penSize.value > 4) penSize.value -= 2
+  }
+  if (props.model === 'mark') {
+    if (e.deltaY < 0 && markSize.value < 40) markSize.value += 4
+    else if (e.deltaY > 0 && markSize.value > 16) markSize.value -= 4
+  }
+}, 300, { leading: true, trailing: false })
+
+defineExpose({
+  clearCanvas,
+  getImageDataURL,
+  setImageDataURL,
 })
 </script>
 
diff --git a/src/hooks/useExport.ts b/src/hooks/useExport.ts
index c5088c35..38f77c78 100644
--- a/src/hooks/useExport.ts
+++ b/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()
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 2b97bd96..1fa2c801 100644
--- a/src/shims-vue.d.ts
+++ b/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>
diff --git a/src/views/Editor/Canvas/AlignmentLine.vue b/src/views/Editor/Canvas/AlignmentLine.vue
index 9e20a515..422dd57a 100644
--- a/src/views/Editor/Canvas/AlignmentLine.vue
+++ b/src/views/Editor/Canvas/AlignmentLine.vue
@@ -4,47 +4,37 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, PropType, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { AlignmentLineAxis } from '@/types/edit'
 
-export default defineComponent({
-  name: 'alignment-line',
-  props: {
-    type: {
-      type: String as PropType<'vertical' | 'horizontal'>,
-      required: true,
-    },
-    axis: {
-      type: Object as PropType<AlignmentLineAxis>,
-      required: true,
-    },
-    length: {
-      type: Number,
-      required: true,
-    },
-    canvasScale: {
-      type: Number,
-      required: true,
-    },
+const props = defineProps({
+  type: {
+    type: String as PropType<'vertical' | 'horizontal'>,
+    required: true,
   },
-  setup(props) {
-    // 吸附对齐线的位置
-    const left = computed(() => props.axis.x * props.canvasScale + 'px')
-    const top = computed(() => props.axis.y * props.canvasScale + 'px')
-
-    // 吸附对齐线的长度
-    const sizeStyle = computed(() => {
-      if (props.type === 'vertical') return { height: props.length * props.canvasScale + 'px' }
-      return { width: props.length * props.canvasScale + 'px' }
-    })
-
-    return {
-      left,
-      top,
-      sizeStyle,
-    }
+  axis: {
+    type: Object as PropType<AlignmentLineAxis>,
+    required: true,
   },
+  length: {
+    type: Number,
+    required: true,
+  },
+  canvasScale: {
+    type: Number,
+    required: true,
+  },
+})
+
+// 吸附对齐线的位置
+const left = computed(() => props.axis.x * props.canvasScale + 'px')
+const top = computed(() => props.axis.y * props.canvasScale + 'px')
+
+// 吸附对齐线的长度
+const sizeStyle = computed(() => {
+  if (props.type === 'vertical') return { height: props.length * props.canvasScale + 'px' }
+  return { width: props.length * props.canvasScale + 'px' }
 })
 </script>
 
diff --git a/src/views/Editor/Canvas/EditableElement.vue b/src/views/Editor/Canvas/EditableElement.vue
index ab5a44e7..849f3984 100644
--- a/src/views/Editor/Canvas/EditableElement.vue
+++ b/src/views/Editor/Canvas/EditableElement.vue
@@ -16,8 +16,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { ElementTypes, PPTElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 
@@ -41,151 +41,142 @@ 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({
-  name: 'editable-element',
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTElement>,
-      required: true,
-    },
-    elementIndex: {
-      type: Number,
-      required: true,
-    },
-    isMultiSelect: {
-      type: Boolean,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTElement, canMove?: boolean) => void>,
-      required: true,
-    },
-    openLinkDialog: {
-      type: Function as PropType<() => void>,
-      required: true,
-    },
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTElement>,
+    required: true,
   },
-  setup(props) {
-    const currentElementComponent = computed(() => {
-      const elementTypeMap = {
-        [ElementTypes.IMAGE]: ImageElement,
-        [ElementTypes.TEXT]: TextElement,
-        [ElementTypes.SHAPE]: ShapeElement,
-        [ElementTypes.LINE]: LineElement,
-        [ElementTypes.CHART]: ChartElement,
-        [ElementTypes.TABLE]: TableElement,
-        [ElementTypes.LATEX]: LatexElement,
-        [ElementTypes.VIDEO]: VideoElement,
-        [ElementTypes.AUDIO]: AudioElement,
-      }
-      return elementTypeMap[props.elementInfo.type] || null
-    })
-
-    const { orderElement } = useOrderElement()
-    const { alignElementToCanvas } = useAlignElementToCanvas()
-    const { combineElements, uncombineElements } = useCombineElement()
-    const { deleteElement } = useDeleteElement()
-    const { lockElement, unlockElement } = useLockElement()
-    const { copyElement, pasteElement, cutElement } = useCopyAndPasteElement()
-    const { selectAllElement } = useSelectAllElement()
-
-    const contextmenus = (): ContextmenuItem[] => {
-      if (props.elementInfo.lock) {
-        return [{
-          text: '解锁', 
-          handler: () => unlockElement(props.elementInfo),
-        }]
-      }
-
-      return [
-        {
-          text: '剪切',
-          subText: 'Ctrl + X',
-          handler: cutElement,
-        },
-        {
-          text: '复制',
-          subText: 'Ctrl + C',
-          handler: copyElement,
-        },
-        {
-          text: '粘贴',
-          subText: 'Ctrl + V',
-          handler: pasteElement,
-        },
-        { divider: true },
-        {
-          text: '水平居中',
-          handler: () => alignElementToCanvas(ElementAlignCommands.HORIZONTAL),
-          children: [
-            { text: '水平垂直居中', handler: () => alignElementToCanvas(ElementAlignCommands.CENTER), },
-            { text: '水平居中', handler: () => alignElementToCanvas(ElementAlignCommands.HORIZONTAL) },
-            { text: '左对齐', handler: () => alignElementToCanvas(ElementAlignCommands.LEFT) },
-            { text: '右对齐', handler: () => alignElementToCanvas(ElementAlignCommands.RIGHT) },
-          ],
-        },
-        {
-          text: '垂直居中',
-          handler: () => alignElementToCanvas(ElementAlignCommands.VERTICAL),
-          children: [
-            { text: '水平垂直居中', handler: () => alignElementToCanvas(ElementAlignCommands.CENTER) },
-            { text: '垂直居中', handler: () => alignElementToCanvas(ElementAlignCommands.VERTICAL) },
-            { text: '顶部对齐', handler: () => alignElementToCanvas(ElementAlignCommands.TOP) },
-            { text: '底部对齐', handler: () => alignElementToCanvas(ElementAlignCommands.BOTTOM) },
-          ],
-        },
-        { divider: true },
-        {
-          text: '置于顶层',
-          disable: props.isMultiSelect && !props.elementInfo.groupId,
-          handler: () => orderElement(props.elementInfo, ElementOrderCommands.TOP),
-          children: [
-            { text: '置于顶层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.TOP) },
-            { text: '上移一层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.UP) },
-          ],
-        },
-        {
-          text: '置于底层',
-          disable: props.isMultiSelect && !props.elementInfo.groupId,
-          handler: () => orderElement(props.elementInfo, ElementOrderCommands.BOTTOM),
-          children: [
-            { text: '置于底层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.BOTTOM) },
-            { text: '下移一层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.DOWN) },
-          ],
-        },
-        { divider: true },
-        {
-          text: '设置链接',
-          handler: props.openLinkDialog,
-        },
-        {
-          text: props.elementInfo.groupId ? '取消组合' : '组合',
-          subText: 'Ctrl + G',
-          handler: props.elementInfo.groupId ? uncombineElements : combineElements,
-          hide: !props.isMultiSelect,
-        },
-        {
-          text: '全选',
-          subText: 'Ctrl + A',
-          handler: selectAllElement,
-        },
-        {
-          text: '锁定',
-          subText: 'Ctrl + L',
-          handler: lockElement,
-        },
-        {
-          text: '删除',
-          subText: 'Delete',
-          handler: deleteElement,
-        },
-      ]
-    }
-
-    return {
-      currentElementComponent,
-      contextmenus,
-    }
+  elementIndex: {
+    type: Number,
+    required: true,
+  },
+  isMultiSelect: {
+    type: Boolean,
+    required: true,
+  },
+  selectElement: {
+    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTElement, canMove?: boolean) => void>,
+    required: true,
+  },
+  openLinkDialog: {
+    type: Function as PropType<() => void>,
+    required: true,
   },
 })
+
+const currentElementComponent = computed(() => {
+  const elementTypeMap = {
+    [ElementTypes.IMAGE]: ImageElement,
+    [ElementTypes.TEXT]: TextElement,
+    [ElementTypes.SHAPE]: ShapeElement,
+    [ElementTypes.LINE]: LineElement,
+    [ElementTypes.CHART]: ChartElement,
+    [ElementTypes.TABLE]: TableElement,
+    [ElementTypes.LATEX]: LatexElement,
+    [ElementTypes.VIDEO]: VideoElement,
+    [ElementTypes.AUDIO]: AudioElement,
+  }
+  return elementTypeMap[props.elementInfo.type] || null
+})
+
+const { orderElement } = useOrderElement()
+const { alignElementToCanvas } = useAlignElementToCanvas()
+const { combineElements, uncombineElements } = useCombineElement()
+const { deleteElement } = useDeleteElement()
+const { lockElement, unlockElement } = useLockElement()
+const { copyElement, pasteElement, cutElement } = useCopyAndPasteElement()
+const { selectAllElement } = useSelectAllElement()
+
+const contextmenus = (): ContextmenuItem[] => {
+  if (props.elementInfo.lock) {
+    return [{
+      text: '解锁', 
+      handler: () => unlockElement(props.elementInfo),
+    }]
+  }
+
+  return [
+    {
+      text: '剪切',
+      subText: 'Ctrl + X',
+      handler: cutElement,
+    },
+    {
+      text: '复制',
+      subText: 'Ctrl + C',
+      handler: copyElement,
+    },
+    {
+      text: '粘贴',
+      subText: 'Ctrl + V',
+      handler: pasteElement,
+    },
+    { divider: true },
+    {
+      text: '水平居中',
+      handler: () => alignElementToCanvas(ElementAlignCommands.HORIZONTAL),
+      children: [
+        { text: '水平垂直居中', handler: () => alignElementToCanvas(ElementAlignCommands.CENTER), },
+        { text: '水平居中', handler: () => alignElementToCanvas(ElementAlignCommands.HORIZONTAL) },
+        { text: '左对齐', handler: () => alignElementToCanvas(ElementAlignCommands.LEFT) },
+        { text: '右对齐', handler: () => alignElementToCanvas(ElementAlignCommands.RIGHT) },
+      ],
+    },
+    {
+      text: '垂直居中',
+      handler: () => alignElementToCanvas(ElementAlignCommands.VERTICAL),
+      children: [
+        { text: '水平垂直居中', handler: () => alignElementToCanvas(ElementAlignCommands.CENTER) },
+        { text: '垂直居中', handler: () => alignElementToCanvas(ElementAlignCommands.VERTICAL) },
+        { text: '顶部对齐', handler: () => alignElementToCanvas(ElementAlignCommands.TOP) },
+        { text: '底部对齐', handler: () => alignElementToCanvas(ElementAlignCommands.BOTTOM) },
+      ],
+    },
+    { divider: true },
+    {
+      text: '置于顶层',
+      disable: props.isMultiSelect && !props.elementInfo.groupId,
+      handler: () => orderElement(props.elementInfo, ElementOrderCommands.TOP),
+      children: [
+        { text: '置于顶层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.TOP) },
+        { text: '上移一层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.UP) },
+      ],
+    },
+    {
+      text: '置于底层',
+      disable: props.isMultiSelect && !props.elementInfo.groupId,
+      handler: () => orderElement(props.elementInfo, ElementOrderCommands.BOTTOM),
+      children: [
+        { text: '置于底层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.BOTTOM) },
+        { text: '下移一层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.DOWN) },
+      ],
+    },
+    { divider: true },
+    {
+      text: '设置链接',
+      handler: props.openLinkDialog,
+    },
+    {
+      text: props.elementInfo.groupId ? '取消组合' : '组合',
+      subText: 'Ctrl + G',
+      handler: props.elementInfo.groupId ? uncombineElements : combineElements,
+      hide: !props.isMultiSelect,
+    },
+    {
+      text: '全选',
+      subText: 'Ctrl + A',
+      handler: selectAllElement,
+    },
+    {
+      text: '锁定',
+      subText: 'Ctrl + L',
+      handler: lockElement,
+    },
+    {
+      text: '删除',
+      subText: 'Delete',
+      handler: deleteElement,
+    },
+  ]
+}
 </script>
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/ElementCreateSelection.vue b/src/views/Editor/Canvas/ElementCreateSelection.vue
index 5d9db396..5f6221db 100644
--- a/src/views/Editor/Canvas/ElementCreateSelection.vue
+++ b/src/views/Editor/Canvas/ElementCreateSelection.vue
@@ -25,195 +25,184 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useKeyboardStore } from '@/store'
+import { CreateElementSelectionData } from '@/types/edit'
 
-export default defineComponent({
-  name: 'element-create-selection',
-  emits: ['created'],
-  setup(props, { emit }) {
-    const mainStore = useMainStore()
-    const { creatingElement } = storeToRefs(mainStore)
-    const { ctrlOrShiftKeyActive } = storeToRefs(useKeyboardStore())
+const emit = defineEmits<{
+  (event: 'created', payload: CreateElementSelectionData): void
+}>()
 
-    const start = ref<[number, number]>()
-    const end = ref<[number, number]>()
+const mainStore = useMainStore()
+const { creatingElement } = storeToRefs(mainStore)
+const { ctrlOrShiftKeyActive } = storeToRefs(useKeyboardStore())
 
-    const selectionRef = ref<HTMLElement>()
-    const offset = ref({
-      x: 0,
-      y: 0,
-    })
-    onMounted(() => {
-      if (!selectionRef.value) return
-      const { x, y } = selectionRef.value.getBoundingClientRect()
-      offset.value = { x, y }
-    })
+const start = ref<[number, number]>()
+const end = ref<[number, number]>()
 
-    // 鼠标拖动创建元素生成位置大小
-    // 获取范围的起始位置和终点位置
-    const createSelection = (e: MouseEvent) => {
-      let isMouseDown = true
+const selectionRef = ref<HTMLElement>()
+const offset = ref({
+  x: 0,
+  y: 0,
+})
+onMounted(() => {
+  if (!selectionRef.value) return
+  const { x, y } = selectionRef.value.getBoundingClientRect()
+  offset.value = { x, y }
+})
 
-      const startPageX = e.pageX
-      const startPageY = e.pageY
-      start.value = [startPageX, startPageY]
+// 鼠标拖动创建元素生成位置大小
+// 获取范围的起始位置和终点位置
+const createSelection = (e: MouseEvent) => {
+  let isMouseDown = true
 
-      document.onmousemove = e => {
-        if (!creatingElement.value || !isMouseDown) return
+  const startPageX = e.pageX
+  const startPageY = e.pageY
+  start.value = [startPageX, startPageY]
 
-        let currentPageX = e.pageX
-        let currentPageY = e.pageY
+  document.onmousemove = e => {
+    if (!creatingElement.value || !isMouseDown) return
 
-        // 按住Ctrl键或者Shift键时：
-        // 对于非线条元素需要锁定宽高比例，对于线条元素需要锁定水平或垂直方向
-        if (ctrlOrShiftKeyActive.value) {
-          const moveX = currentPageX - startPageX
-          const moveY = currentPageY - startPageY
+    let currentPageX = e.pageX
+    let currentPageY = e.pageY
 
-          // 水平和垂直方向的拖动距离，后面以拖动距离较大的方向为基础计算另一方向的数据
-          const absX = Math.abs(moveX)
-          const absY = Math.abs(moveY)
+    // 按住Ctrl键或者Shift键时：
+    // 对于非线条元素需要锁定宽高比例，对于线条元素需要锁定水平或垂直方向
+    if (ctrlOrShiftKeyActive.value) {
+      const moveX = currentPageX - startPageX
+      const moveY = currentPageY - startPageY
 
-          if (creatingElement.value.type === 'shape') {
+      // 水平和垂直方向的拖动距离，后面以拖动距离较大的方向为基础计算另一方向的数据
+      const absX = Math.abs(moveX)
+      const absY = Math.abs(moveY)
 
-            // 判断是否为反向拖动：从左上到右下为正向操作，此外所有情况都是反向操作
-            const isOpposite = (moveY > 0 && moveX < 0) || (moveY < 0 && moveX > 0)
+      if (creatingElement.value.type === 'shape') {
 
-            if (absX > absY) {
-              currentPageY = isOpposite ? startPageY - moveX : startPageY + moveX
-            }
-            else {
-              currentPageX = isOpposite ? startPageX - moveY : startPageX + moveY
-            }
-          }
+        // 判断是否为反向拖动：从左上到右下为正向操作，此外所有情况都是反向操作
+        const isOpposite = (moveY > 0 && moveX < 0) || (moveY < 0 && moveX > 0)
 
-          else if (creatingElement.value.type === 'line') {
-            if (absX > absY) currentPageY = startPageY
-            else currentPageX = startPageX
-          }
-        }
-
-        end.value = [currentPageX, currentPageY]
-      }
-
-      document.onmouseup = e => {
-        document.onmousemove = null
-        document.onmouseup = null
-
-        if (e.button === 2) {
-          setTimeout(() => mainStore.setCreatingElement(null), 0)
-          return
-        }
-
-        isMouseDown = false
-
-        const endPageX = e.pageX
-        const endPageY = e.pageY
-
-        const minSize = 30
-
-        if (
-          creatingElement.value?.type === 'line' &&
-          (Math.abs(endPageX - startPageX) >= minSize || Math.abs(endPageY - startPageY) >= minSize)
-        ) {
-          emit('created', {
-            start: start.value,
-            end: end.value,
-          })
-        }
-        else if (
-          creatingElement.value?.type !== 'line' &&
-          (Math.abs(endPageX - startPageX) >= minSize && Math.abs(endPageY - startPageY) >= minSize)
-        ) {
-          emit('created', {
-            start: start.value,
-            end: end.value,
-          })
+        if (absX > absY) {
+          currentPageY = isOpposite ? startPageY - moveX : startPageY + moveX
         }
         else {
-          const defaultSize = 200
-          const minX = Math.min(endPageX, startPageX)
-          const minY = Math.min(endPageY, startPageY)
-          const maxX = Math.max(endPageX, startPageX)
-          const maxY = Math.max(endPageY, startPageY)
-          const offsetX = maxX - minX >= minSize ? maxX - minX : defaultSize
-          const offsetY = maxY - minY >= minSize ? maxY - minY : defaultSize
-          emit('created', {
-            start: [minX, minY],
-            end: [minX + offsetX, minY + offsetY],
-          })
+          currentPageX = isOpposite ? startPageX - moveY : startPageX + moveY
         }
       }
+
+      else if (creatingElement.value.type === 'line') {
+        if (absX > absY) currentPageY = startPageY
+        else currentPageX = startPageX
+      }
     }
 
-    // 绘制线条的路径相关数据（仅当绘制元素类型为线条时使用）
-    const lineData = computed(() => {
-      if (!start.value || !end.value) return null
-      if (!creatingElement.value || creatingElement.value.type !== 'line') return null
+    end.value = [currentPageX, currentPageY]
+  }
 
-      const [_startX, _startY] = start.value
-      const [_endX, _endY] = end.value
-      const minX = Math.min(_startX, _endX)
-      const maxX = Math.max(_startX, _endX)
-      const minY = Math.min(_startY, _endY)
-      const maxY = Math.max(_startY, _endY)
+  document.onmouseup = e => {
+    document.onmousemove = null
+    document.onmouseup = null
 
-      const svgWidth = maxX - minX >= 24 ? maxX - minX : 24
-      const svgHeight = maxY - minY >= 24 ? maxY - minY : 24
-
-      const startX = _startX === minX ? 0 : maxX - minX
-      const startY = _startY === minY ? 0 : maxY - minY
-      const endX = _endX === minX ? 0 : maxX - minX
-      const endY = _endY === minY ? 0 : maxY - minY
-
-      const path = `M${startX}, ${startY} L${endX}, ${endY}`
-
-      return {
-        svgWidth,
-        svgHeight,
-        startX,
-        startY,
-        endX,
-        endY,
-        path,
-      }
-    })
-
-    // 根据生成范围的起始位置和终点位置，计算元素创建时的位置和大小
-    const position = computed(() => {
-      if (!start.value || !end.value) return {}
-
-      const [startX, startY] = start.value
-      const [endX, endY] = end.value
-      const minX = Math.min(startX, endX)
-      const maxX = Math.max(startX, endX)
-      const minY = Math.min(startY, endY)
-      const maxY = Math.max(startY, endY)
-
-      const width = maxX - minX
-      const height = maxY - minY
-
-      return {
-        left: minX - offset.value.x + 'px',
-        top: minY - offset.value.y + 'px',
-        width: width + 'px',
-        height: height + 'px',
-      }
-    })
-
-    return {
-      selectionRef,
-      start,
-      end,
-      creatingElement,
-      createSelection,
-      lineData,
-      position,
+    if (e.button === 2) {
+      setTimeout(() => mainStore.setCreatingElement(null), 0)
+      return
     }
-  },
+
+    isMouseDown = false
+
+    const endPageX = e.pageX
+    const endPageY = e.pageY
+
+    const minSize = 30
+
+    if (
+      creatingElement.value?.type === 'line' &&
+      (Math.abs(endPageX - startPageX) >= minSize || Math.abs(endPageY - startPageY) >= minSize)
+    ) {
+      emit('created', {
+        start: start.value!,
+        end: end.value!,
+      })
+    }
+    else if (
+      creatingElement.value?.type !== 'line' &&
+      (Math.abs(endPageX - startPageX) >= minSize && Math.abs(endPageY - startPageY) >= minSize)
+    ) {
+      emit('created', {
+        start: start.value!,
+        end: end.value!,
+      })
+    }
+    else {
+      const defaultSize = 200
+      const minX = Math.min(endPageX, startPageX)
+      const minY = Math.min(endPageY, startPageY)
+      const maxX = Math.max(endPageX, startPageX)
+      const maxY = Math.max(endPageY, startPageY)
+      const offsetX = maxX - minX >= minSize ? maxX - minX : defaultSize
+      const offsetY = maxY - minY >= minSize ? maxY - minY : defaultSize
+      emit('created', {
+        start: [minX, minY],
+        end: [minX + offsetX, minY + offsetY],
+      })
+    }
+  }
+}
+
+// 绘制线条的路径相关数据（仅当绘制元素类型为线条时使用）
+const lineData = computed(() => {
+  if (!start.value || !end.value) return null
+  if (!creatingElement.value || creatingElement.value.type !== 'line') return null
+
+  const [_startX, _startY] = start.value
+  const [_endX, _endY] = end.value
+  const minX = Math.min(_startX, _endX)
+  const maxX = Math.max(_startX, _endX)
+  const minY = Math.min(_startY, _endY)
+  const maxY = Math.max(_startY, _endY)
+
+  const svgWidth = maxX - minX >= 24 ? maxX - minX : 24
+  const svgHeight = maxY - minY >= 24 ? maxY - minY : 24
+
+  const startX = _startX === minX ? 0 : maxX - minX
+  const startY = _startY === minY ? 0 : maxY - minY
+  const endX = _endX === minX ? 0 : maxX - minX
+  const endY = _endY === minY ? 0 : maxY - minY
+
+  const path = `M${startX}, ${startY} L${endX}, ${endY}`
+
+  return {
+    svgWidth,
+    svgHeight,
+    startX,
+    startY,
+    endX,
+    endY,
+    path,
+  }
+})
+
+// 根据生成范围的起始位置和终点位置，计算元素创建时的位置和大小
+const position = computed(() => {
+  if (!start.value || !end.value) return {}
+
+  const [startX, startY] = start.value
+  const [endX, endY] = end.value
+  const minX = Math.min(startX, endX)
+  const maxX = Math.max(startX, endX)
+  const minY = Math.min(startY, endY)
+  const maxY = Math.max(startY, endY)
+
+  const width = maxX - minX
+  const height = maxY - minY
+
+  return {
+    left: minX - offset.value.x + 'px',
+    top: minY - offset.value.y + 'px',
+    width: width + 'px',
+    height: height + 'px',
+  }
 })
 </script>
 
diff --git a/src/views/Editor/Canvas/GridLines.vue b/src/views/Editor/Canvas/GridLines.vue
index cbf0f193..13a0853d 100644
--- a/src/views/Editor/Canvas/GridLines.vue
+++ b/src/views/Editor/Canvas/GridLines.vue
@@ -13,55 +13,44 @@
   </svg>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
+<script lang="ts" setup>
+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())
+const { canvasScale } = storeToRefs(useMainStore())
+const { currentSlide, viewportRatio } = storeToRefs(useSlidesStore())
 
-    const background = computed<SlideBackground | undefined>(() => currentSlide.value?.background)
+const background = computed<SlideBackground | undefined>(() => currentSlide.value?.background)
 
-    // 计算网格线的颜色，避免与背景的颜色太接近
-    const gridColor = computed(() => {
-      const bgColor = background.value?.color || '#fff'
-      const colorList = ['#000', '#fff']
-      return tinycolor.mostReadable(bgColor, colorList, { includeFallbackColors: true }).setAlpha(.5).toRgbString()
-    })
-
-    const gridSize = 50
-
-    // 计算网格路径
-    const getPath = () => {
-      const maxX = VIEWPORT_SIZE
-      const maxY = VIEWPORT_SIZE * viewportRatio.value
-
-      let path = ''
-      for (let i = 0; i <= Math.floor(maxY / gridSize); i++) {
-        path += `M0 ${i * gridSize} L${maxX} ${i * gridSize} `
-      }
-      for (let i = 0; i <= Math.floor(maxX / gridSize); i++) {
-        path += `M${i * gridSize} 0 L${i * gridSize} ${maxY} `
-      }
-      return path
-    }
-
-    return {
-      canvasScale,
-      gridColor,
-      width: VIEWPORT_SIZE,
-      height: VIEWPORT_SIZE * viewportRatio.value,
-      path: getPath(),
-    }
-  },
+// 计算网格线的颜色，避免与背景的颜色太接近
+const gridColor = computed(() => {
+  const bgColor = background.value?.color || '#fff'
+  const colorList = ['#000', '#fff']
+  return tinycolor.mostReadable(bgColor, colorList, { includeFallbackColors: true }).setAlpha(.5).toRgbString()
 })
+
+const gridSize = 50
+
+// 计算网格路径
+const getPath = () => {
+  const maxX = VIEWPORT_SIZE
+  const maxY = VIEWPORT_SIZE * viewportRatio.value
+
+  let path = ''
+  for (let i = 0; i <= Math.floor(maxY / gridSize); i++) {
+    path += `M0 ${i * gridSize} L${maxX} ${i * gridSize} `
+  }
+  for (let i = 0; i <= Math.floor(maxX / gridSize); i++) {
+    path += `M${i * gridSize} 0 L${i * gridSize} ${maxY} `
+  }
+  return path
+}
+
+const path = getPath()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/LinkDialog.vue b/src/views/Editor/Canvas/LinkDialog.vue
index cae07d37..93333c83 100644
--- a/src/views/Editor/Canvas/LinkDialog.vue
+++ b/src/views/Editor/Canvas/LinkDialog.vue
@@ -37,8 +37,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElementLink } from '@/types/slides'
@@ -52,70 +52,54 @@ interface TabItem {
   label: string
 }
 
-export default defineComponent({
-  name: 'link-dialog',
-  emits: ['close'],
-  components: {
-    ThumbnailSlide,
-  },
-  setup(props, { emit }) {
-    const { handleElement } = storeToRefs(useMainStore())
-    const { slides } = storeToRefs(useSlidesStore())
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
 
-    const type = ref<TypeKey>('web')
-    const address = ref('')
-    const slideId = ref('')
+const { handleElement } = storeToRefs(useMainStore())
+const { slides } = storeToRefs(useSlidesStore())
 
-    slideId.value = slides.value[0].id
+const type = ref<TypeKey>('web')
+const address = ref('')
+const slideId = ref('')
 
-    const selectedSlide = computed(() => {
-      if (!slideId.value) return null
+slideId.value = slides.value[0].id
 
-      return slides.value.find(item => item.id === slideId.value) || null
-    })
+const selectedSlide = computed(() => {
+  if (!slideId.value) return null
 
-    const tabs: TabItem[] = [
-      { key: 'web', label: '网页链接' },
-      { key: 'slide', label: '幻灯片页面' },
-    ]
-
-    const { setLink } = useLink()
-
-    onMounted(() => {
-      if (handleElement.value?.link) {
-        if (handleElement.value.link.type === 'web') address.value = handleElement.value.link.target
-        else if (handleElement.value.link.type === 'slide') slideId.value = handleElement.value.link.target
-
-        type.value = handleElement.value.link.type
-      }
-    })
-
-    const close = () => emit('close')
-
-    const save = () => {
-      const link: PPTElementLink = {
-        type: type.value,
-        target: type.value === 'web' ? address.value : slideId.value,
-      }
-      if (handleElement.value) {
-        const success = setLink(handleElement.value, link)
-        if (success) close()
-        else address.value = ''
-      }
-    }
-
-    return {
-      slides,
-      tabs,
-      type,
-      address,
-      slideId,
-      selectedSlide,
-      close,
-      save,
-    }
-  },
+  return slides.value.find(item => item.id === slideId.value) || null
 })
+
+const tabs: TabItem[] = [
+  { key: 'web', label: '网页链接' },
+  { key: 'slide', label: '幻灯片页面' },
+]
+
+const { setLink } = useLink()
+
+onMounted(() => {
+  if (handleElement.value?.link) {
+    if (handleElement.value.link.type === 'web') address.value = handleElement.value.link.target
+    else if (handleElement.value.link.type === 'slide') slideId.value = handleElement.value.link.target
+
+    type.value = handleElement.value.link.type
+  }
+})
+
+const close = () => emit('close')
+
+const save = () => {
+  const link: PPTElementLink = {
+    type: type.value,
+    target: type.value === 'web' ? address.value : slideId.value,
+  }
+  if (handleElement.value) {
+    const success = setLink(handleElement.value, link)
+    if (success) close()
+    else address.value = ''
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/MouseSelection.vue b/src/views/Editor/Canvas/MouseSelection.vue
index b3c77d8e..71902ede 100644
--- a/src/views/Editor/Canvas/MouseSelection.vue
+++ b/src/views/Editor/Canvas/MouseSelection.vue
@@ -9,36 +9,31 @@
   ></div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'mouse-selection',
-  props: {
-    top: {
-      type: Number,
-      required: true,
+<script lang="ts" setup>
+defineProps({
+  top: {
+    type: Number,
+    required: true,
+  },
+  left: {
+    type: Number,
+    required: true,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  quadrant: {
+    type: Number,
+    required: true,
+    validator(value: number) {
+      return [1, 2, 3, 4].includes(value)
     },
-    left: {
-      type: Number,
-      required: true,
-    },
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    quadrant: {
-      type: Number,
-      required: true,
-      validator(value: number) {
-        return [1, 2, 3, 4].includes(value)
-      },
-    },
-  }
+  },
 })
 </script>
 
diff --git a/src/views/Editor/Canvas/Operate/BorderLine.vue b/src/views/Editor/Canvas/Operate/BorderLine.vue
index a492526d..bf585f5a 100644
--- a/src/views/Editor/Canvas/Operate/BorderLine.vue
+++ b/src/views/Editor/Canvas/Operate/BorderLine.vue
@@ -2,21 +2,18 @@
   <div :class="['border-line', type, { 'wide': isWide }]"></div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 import { OperateBorderLines } from '@/types/edit'
 
-export default defineComponent({
-  name: 'border-line',
-  props: {
-    type: {
-      type: String as PropType<OperateBorderLines>,
-      required: true,
-    },
-    isWide: {
-      type: Boolean,
-      default: false,
-    },
+defineProps({
+  type: {
+    type: String as PropType<OperateBorderLines>,
+    required: true,
+  },
+  isWide: {
+    type: Boolean,
+    default: false,
   },
 })
 </script>
diff --git a/src/views/Editor/Canvas/Operate/CommonElementOperate.vue b/src/views/Editor/Canvas/Operate/CommonElementOperate.vue
index 49b4ca2d..cbdd1dc8 100644
--- a/src/views/Editor/Canvas/Operate/CommonElementOperate.vue
+++ b/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,47 +47,30 @@ import BorderLine from './BorderLine.vue'
 
 type PPTElement = PPTShapeElement | PPTVideoElement | PPTLatexElement | PPTAudioElement
 
-export default defineComponent({
-  name: 'common-element-operate',
-  inheritAttrs: false,
-  components: {
-    RotateHandler,
-    ResizeHandler,
-    BorderLine,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTElement>,
-      required: true,
-    },
-    handlerVisible: {
-      type: Boolean,
-      required: true,
-    },
-    rotateElement: {
-      type: Function as PropType<(element: PPTElement) => void>,
-      required: true,
-    },
-    scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTElement, command: OperateResizeHandlers) => void>,
-      required: true,
-    },
+  handlerVisible: {
+    type: Boolean,
+    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)
-
-    const cannotRotate = computed(() => ['video', 'audio'].includes(props.elementInfo.type))
-
-    return {
-      scaleWidth,
-      resizeHandlers,
-      borderLines,
-      cannotRotate,
-    }
+  rotateElement: {
+    type: Function as PropType<(element: PPTElement) => void>,
+    required: true,
+  },
+  scaleElement: {
+    type: Function as PropType<(e: MouseEvent, element: PPTElement, command: OperateResizeHandlers) => void>,
+    required: true,
   },
 })
+
+const { 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)
+
+const cannotRotate = computed(() => ['video', 'audio'].includes(props.elementInfo.type))
 </script>
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue b/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
index d299290f..4c8e4874 100644
--- a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
+++ b/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,49 +44,32 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-export default defineComponent({
-  name: 'image-element-operate',
-  inheritAttrs: false,
-  components: {
-    RotateHandler,
-    ResizeHandler,
-    BorderLine,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTImageElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTImageElement>,
-      required: true,
-    },
-    handlerVisible: {
-      type: Boolean,
-      required: true,
-    },
-    rotateElement: {
-      type: Function as PropType<(element: PPTImageElement) => void>,
-      required: true,
-    },
-    scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTImageElement, command: OperateResizeHandlers) => void>,
-      required: true,
-    },
+  handlerVisible: {
+    type: Boolean,
+    required: true,
   },
-  setup(props) {
-    const { canvasScale, clipingImageElementId } = storeToRefs(useMainStore())
-
-    const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)
-
-    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,
-    }
+  rotateElement: {
+    type: Function as PropType<(element: PPTImageElement) => void>,
+    required: true,
+  },
+  scaleElement: {
+    type: Function as PropType<(e: MouseEvent, element: PPTImageElement, command: OperateResizeHandlers) => void>,
+    required: true,
   },
 })
+
+const { canvasScale, clipingImageElementId } = storeToRefs(useMainStore())
+
+const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)
+
+const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
+const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
+const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/Operate/LineElementOperate.vue b/src/views/Editor/Canvas/Operate/LineElementOperate.vue
index ea0f9d95..65707a4f 100644
--- a/src/views/Editor/Canvas/Operate/LineElementOperate.vue
+++ b/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,89 +48,74 @@ import { OperateLineHandlers } from '@/types/edit'
 
 import ResizeHandler from './ResizeHandler.vue'
 
-export default defineComponent({
-  name: 'line-element-operate',
-  inheritAttrs: false,
-  components: {
-    ResizeHandler,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTLineElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTLineElement>,
-      required: true,
-    },
-    handlerVisible: {
-      type: Boolean,
-      required: true,
-    },
-    dragLineElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void>,
-      required: true,
-    },
+  handlerVisible: {
+    type: Boolean,
+    required: true,
   },
-  setup(props) {
-    const { canvasScale } = storeToRefs(useMainStore())
+  dragLineElement: {
+    type: Function as PropType<(e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void>,
+    required: true,
+  },
+})
 
-    const svgWidth = computed(() => Math.max(props.elementInfo.start[0], props.elementInfo.end[0]))
-    const svgHeight = computed(() => Math.max(props.elementInfo.start[1], props.elementInfo.end[1]))
+const { canvasScale } = storeToRefs(useMainStore())
 
-    const resizeHandlers = computed(() => {
-      const handlers = [
-        {
-          handler: OperateLineHandlers.START,
-          style: {
-            left: props.elementInfo.start[0] * canvasScale.value + 'px',
-            top: props.elementInfo.start[1] * canvasScale.value + 'px',
-          }
-        },
-        {
-          handler: OperateLineHandlers.END,
-          style: {
-            left: props.elementInfo.end[0] * canvasScale.value + 'px',
-            top: props.elementInfo.end[1] * canvasScale.value + 'px',
-          }
-        },
-      ]
+const svgWidth = computed(() => Math.max(props.elementInfo.start[0], props.elementInfo.end[0]))
+const svgHeight = computed(() => Math.max(props.elementInfo.start[1], props.elementInfo.end[1]))
 
-      if (props.elementInfo.curve || props.elementInfo.broken) {
-        const ctrlHandler = (props.elementInfo.curve || props.elementInfo.broken) as [number, number]
-
-        handlers.push({
-          handler: OperateLineHandlers.C,
-          style: {
-            left: ctrlHandler[0] * canvasScale.value + 'px',
-            top: ctrlHandler[1] * canvasScale.value + 'px',
-          }
-        })
+const resizeHandlers = computed(() => {
+  const handlers = [
+    {
+      handler: OperateLineHandlers.START,
+      style: {
+        left: props.elementInfo.start[0] * canvasScale.value + 'px',
+        top: props.elementInfo.start[1] * canvasScale.value + 'px',
       }
-      else if (props.elementInfo.cubic) {
-        const [ctrlHandler1, ctrlHandler2] = props.elementInfo.cubic
-        handlers.push({
-          handler: OperateLineHandlers.C1,
-          style: {
-            left: ctrlHandler1[0] * canvasScale.value + 'px',
-            top: ctrlHandler1[1] * canvasScale.value + 'px',
-          }
-        })
-        handlers.push({
-          handler: OperateLineHandlers.C2,
-          style: {
-            left: ctrlHandler2[0] * canvasScale.value + 'px',
-            top: ctrlHandler2[1] * canvasScale.value + 'px',
-          }
-        })
+    },
+    {
+      handler: OperateLineHandlers.END,
+      style: {
+        left: props.elementInfo.end[0] * canvasScale.value + 'px',
+        top: props.elementInfo.end[1] * canvasScale.value + 'px',
       }
+    },
+  ]
 
-      return handlers
+  if (props.elementInfo.curve || props.elementInfo.broken) {
+    const ctrlHandler = (props.elementInfo.curve || props.elementInfo.broken) as [number, number]
+
+    handlers.push({
+      handler: OperateLineHandlers.C,
+      style: {
+        left: ctrlHandler[0] * canvasScale.value + 'px',
+        top: ctrlHandler[1] * canvasScale.value + 'px',
+      }
     })
+  }
+  else if (props.elementInfo.cubic) {
+    const [ctrlHandler1, ctrlHandler2] = props.elementInfo.cubic
+    handlers.push({
+      handler: OperateLineHandlers.C1,
+      style: {
+        left: ctrlHandler1[0] * canvasScale.value + 'px',
+        top: ctrlHandler1[1] * canvasScale.value + 'px',
+      }
+    })
+    handlers.push({
+      handler: OperateLineHandlers.C2,
+      style: {
+        left: ctrlHandler2[0] * canvasScale.value + 'px',
+        top: ctrlHandler2[1] * canvasScale.value + 'px',
+      }
+    })
+  }
 
-    return {
-      svgWidth,
-      svgHeight,
-      canvasScale,
-      resizeHandlers,
-    }
-  },
+  return handlers
 })
 </script>
 
diff --git a/src/views/Editor/Canvas/Operate/LinkHandler.vue b/src/views/Editor/Canvas/Operate/LinkHandler.vue
index 07c92da9..34c8505c 100644
--- a/src/views/Editor/Canvas/Operate/LinkHandler.vue
+++ b/src/views/Editor/Canvas/Operate/LinkHandler.vue
@@ -10,43 +10,31 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+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({
-  name: 'link-handler',
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTElement>,
-      required: true,
-    },
-    link: {
-      type: Object as PropType<PPTElementLink>,
-      required: true,
-    },
-    openLinkDialog: {
-      type: Function as PropType<() => void>,
-      required: true,
-    },
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTElement>,
+    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,
-    }
+  link: {
+    type: Object as PropType<PPTElementLink>,
+    required: true,
+  },
+  openLinkDialog: {
+    type: Function as PropType<() => void>,
+    required: true,
   },
 })
+
+const { canvasScale } = storeToRefs(useMainStore())
+const { removeLink } = useLink()
+const height = computed(() => props.elementInfo.type === 'line' ? 0 : props.elementInfo.height)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue b/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
index 69c2cbac..ce09c760 100644
--- a/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
+++ b/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
@@ -20,8 +20,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref, PropType, watchEffect } from 'vue'
+<script lang="ts" setup>
+import { computed, ref, PropType, watchEffect } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTElement } from '@/types/slides'
@@ -32,65 +32,49 @@ import useCommonOperate from '../hooks/useCommonOperate'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-export default defineComponent({
-  name: 'multi-select-operate',
-  components: {
-    ResizeHandler,
-    BorderLine,
+const props = defineProps({
+  elementList: {
+    type: Array as PropType<PPTElement[]>,
+    required: true,
   },
-  props: {
-    elementList: {
-      type: Array as PropType<PPTElement[]>,
-      required: true,
-    },
-    scaleMultiElement: {
-      type: Function as PropType<(e: MouseEvent, range: MultiSelectRange, command: OperateResizeHandlers) => void>,
-      required: true,
-    },
+  scaleMultiElement: {
+    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)))
+const { activeElementIdList, canvasScale } = storeToRefs(useMainStore())
 
-    const range = ref({
-      minX: 0,
-      maxX: 0,
-      minY: 0,
-      maxY: 0,
-    })
+const localActiveElementList = computed(() => props.elementList.filter(el => activeElementIdList.value.includes(el.id)))
 
-    // 根据多选元素整体在画布中的范围，计算边框线和缩放点的位置信息
-    const width = computed(() => (range.value.maxX - range.value.minX) * canvasScale.value)
-    const height = computed(() => (range.value.maxY - range.value.minY) * canvasScale.value)
-    const { resizeHandlers, borderLines } = useCommonOperate(width, height)
+const range = ref({
+  minX: 0,
+  maxX: 0,
+  minY: 0,
+  maxY: 0,
+})
 
-    // 计算多选元素整体在画布中的范围
-    const setRange = () => {
-      const { minX, maxX, minY, maxY } = getElementListRange(localActiveElementList.value)
-      range.value = { minX, maxX, minY, maxY }
-    }
-    watchEffect(setRange)
+// 根据多选元素整体在画布中的范围，计算边框线和缩放点的位置信息
+const width = computed(() => (range.value.maxX - range.value.minX) * canvasScale.value)
+const height = computed(() => (range.value.maxY - range.value.minY) * canvasScale.value)
+const { resizeHandlers, borderLines } = useCommonOperate(width, height)
 
-    // 禁用多选状态下缩放：仅未旋转的图片和形状可以在多选状态下缩放
-    const disableResize = computed(() => {
-      return localActiveElementList.value.some(item => {
-        if (
-          (item.type === 'image' || item.type === 'shape') && 
-          !item.rotate
-        ) return false
-        return true
-      })
-    })
+// 计算多选元素整体在画布中的范围
+const setRange = () => {
+  const { minX, maxX, minY, maxY } = getElementListRange(localActiveElementList.value)
+  range.value = { minX, maxX, minY, maxY }
+}
+watchEffect(setRange)
 
-    return {
-      range,
-      canvasScale,
-      borderLines,
-      disableResize,
-      resizeHandlers,
-    }
-  },
+// 禁用多选状态下缩放：仅未旋转的图片和形状可以在多选状态下缩放
+const disableResize = computed(() => {
+  return localActiveElementList.value.some(item => {
+    if (
+      (item.type === 'image' || item.type === 'shape') && 
+      !item.rotate
+    ) return false
+    return true
+  })
 })
 </script>
 
diff --git a/src/views/Editor/Canvas/Operate/ResizeHandler.vue b/src/views/Editor/Canvas/Operate/ResizeHandler.vue
index 20a74336..e4614cff 100644
--- a/src/views/Editor/Canvas/Operate/ResizeHandler.vue
+++ b/src/views/Editor/Canvas/Operate/ResizeHandler.vue
@@ -2,41 +2,33 @@
   <div :class="['resize-handler', rotateClassName, type]"></div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { OperateResizeHandlers } from '@/types/edit'
 
-export default defineComponent({
-  name: 'resize-handler',
-  props: {
-    type: {
-      type: String as PropType<OperateResizeHandlers>,
-      default: '',
-    },
-    rotate: {
-      type: Number,
-      default: 0,
-    },
+const props = defineProps({
+  type: {
+    type: String as PropType<OperateResizeHandlers>,
+    default: '',
   },
-  setup(props) {
-    const rotateClassName = computed(() => {
-      const prefix = 'rotate-'
-      const rotate = props.rotate
-      if (rotate > -22.5 && rotate <= 22.5) return prefix + 0
-      else if (rotate > 22.5 && rotate <= 67.5) return prefix + 45
-      else if (rotate > 67.5 && rotate <= 112.5) return prefix + 90
-      else if (rotate > 112.5 && rotate <= 157.5) return prefix + 135
-      else if (rotate > 157.5 || rotate <= -157.5) return prefix + 0
-      else if (rotate > -157.5 && rotate <= -112.5) return prefix + 45
-      else if (rotate > -112.5 && rotate <= -67.5) return prefix + 90
-      else if (rotate > -67.5 && rotate <= -22.5) return prefix + 135
-      return prefix + 0
-    })
+  rotate: {
+    type: Number,
+    default: 0,
+  },
+})
 
-    return {
-      rotateClassName,
-    }
-  },
+const rotateClassName = computed(() => {
+  const prefix = 'rotate-'
+  const rotate = props.rotate
+  if (rotate > -22.5 && rotate <= 22.5) return prefix + 0
+  else if (rotate > 22.5 && rotate <= 67.5) return prefix + 45
+  else if (rotate > 67.5 && rotate <= 112.5) return prefix + 90
+  else if (rotate > 112.5 && rotate <= 157.5) return prefix + 135
+  else if (rotate > 157.5 || rotate <= -157.5) return prefix + 0
+  else if (rotate > -157.5 && rotate <= -112.5) return prefix + 45
+  else if (rotate > -112.5 && rotate <= -67.5) return prefix + 90
+  else if (rotate > -67.5 && rotate <= -22.5) return prefix + 135
+  return prefix + 0
 })
 </script>
 
diff --git a/src/views/Editor/Canvas/Operate/RotateHandler.vue b/src/views/Editor/Canvas/Operate/RotateHandler.vue
index 4be0cf6c..49456706 100644
--- a/src/views/Editor/Canvas/Operate/RotateHandler.vue
+++ b/src/views/Editor/Canvas/Operate/RotateHandler.vue
@@ -2,10 +2,8 @@
   <div class="rotate-handler"></div>
 </template>
 
-<script lang="ts">
-export default {
-  name: 'rotate-handler',
-}
+<script lang="ts" setup>
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue b/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
index 154780c5..58787564 100644
--- a/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
+++ b/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,44 +44,28 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-export default defineComponent({
-  name: 'shape-element-operate',
-  inheritAttrs: false,
-  components: {
-    RotateHandler,
-    ResizeHandler,
-    BorderLine,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTShapeElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTShapeElement>,
-      required: true,
-    },
-    handlerVisible: {
-      type: Boolean,
-      required: true,
-    },
-    rotateElement: {
-      type: Function as PropType<(element: PPTShapeElement) => void>,
-      required: true,
-    },
-    scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandlers) => void>,
-      required: true,
-    },
+  handlerVisible: {
+    type: Boolean,
+    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,
-    }
+  rotateElement: {
+    type: Function as PropType<(element: PPTShapeElement) => void>,
+    required: true,
+  },
+  scaleElement: {
+    type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandlers) => void>,
+    required: true,
   },
 })
+
+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)
 </script>
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/Operate/TableElementOperate.vue b/src/views/Editor/Canvas/Operate/TableElementOperate.vue
index 68770308..4a2ca4b0 100644
--- a/src/views/Editor/Canvas/Operate/TableElementOperate.vue
+++ b/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,47 +44,31 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-export default defineComponent({
-  name: 'table-element-operate',
-  inheritAttrs: false,
-  components: {
-    RotateHandler,
-    ResizeHandler,
-    BorderLine,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTTableElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTTableElement>,
-      required: true,
-    },
-    handlerVisible: {
-      type: Boolean,
-      required: true,
-    },
-    rotateElement: {
-      type: Function as PropType<(element: PPTTableElement) => void>,
-      required: true,
-    },
-    scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTTableElement, command: OperateResizeHandlers) => void>,
-      required: true,
-    },
+  handlerVisible: {
+    type: Boolean,
+    required: true,
   },
-  setup(props) {
-    const { canvasScale } = storeToRefs(useMainStore())
-
-    const outlineWidth = computed(() => props.elementInfo.outline.width || 1)
-
-    const scaleWidth = computed(() => (props.elementInfo.width + outlineWidth.value) * canvasScale.value)
-    const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
-
-    const { textElementResizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
-
-    return {
-      scaleWidth,
-      textElementResizeHandlers,
-      borderLines,
-    }
+  rotateElement: {
+    type: Function as PropType<(element: PPTTableElement) => void>,
+    required: true,
+  },
+  scaleElement: {
+    type: Function as PropType<(e: MouseEvent, element: PPTTableElement, command: OperateResizeHandlers) => void>,
+    required: true,
   },
 })
+
+const { canvasScale } = storeToRefs(useMainStore())
+
+const outlineWidth = computed(() => props.elementInfo.outline.width || 1)
+
+const scaleWidth = computed(() => (props.elementInfo.width + outlineWidth.value) * canvasScale.value)
+const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
+
+const { textElementResizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
 </script>
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/Operate/TextElementOperate.vue b/src/views/Editor/Canvas/Operate/TextElementOperate.vue
index 0cab5eaa..b11a51c0 100644
--- a/src/views/Editor/Canvas/Operate/TextElementOperate.vue
+++ b/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,45 +44,29 @@ import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
-export default defineComponent({
-  name: 'text-element-operate',
-  inheritAttrs: false,
-  components: {
-    RotateHandler,
-    ResizeHandler,
-    BorderLine,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTTextElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTTextElement>,
-      required: true,
-    },
-    handlerVisible: {
-      type: Boolean,
-      required: true,
-    },
-    rotateElement: {
-      type: Function as PropType<(element: PPTTextElement) => void>,
-      required: true,
-    },
-    scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTTextElement, command: OperateResizeHandlers) => void>,
-      required: true,
-    },
+  handlerVisible: {
+    type: Boolean,
+    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,
-    }
+  rotateElement: {
+    type: Function as PropType<(element: PPTTextElement) => void>,
+    required: true,
+  },
+  scaleElement: {
+    type: Function as PropType<(e: MouseEvent, element: PPTTextElement, command: OperateResizeHandlers) => void>,
+    required: true,
   },
 })
+
+const { 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)
 </script>
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/Operate/index.vue b/src/views/Editor/Canvas/Operate/index.vue
index f9e54494..4efc9cea 100644
--- a/src/views/Editor/Canvas/Operate/index.vue
+++ b/src/views/Editor/Canvas/Operate/index.vue
@@ -36,8 +36,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, computed } from 'vue'
+<script lang="ts" setup>
+import { PropType, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { ElementTypes, PPTElement, PPTLineElement, PPTVideoElement, PPTAudioElement } from '@/types/slides'
@@ -51,90 +51,74 @@ import TableElementOperate from './TableElementOperate.vue'
 import CommonElementOperate from './CommonElementOperate.vue'
 import LinkHandler from './LinkHandler.vue'
 
-export default defineComponent({
-  name: 'operate',
-  components: {
-    LinkHandler,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTElement>,
-      required: true,
-    },
-    isSelected: {
-      type: Boolean,
-      required: true,
-    },
-    isActive: {
-      type: Boolean,
-      required: true,
-    },
-    isActiveGroupElement: {
-      type: Boolean,
-      required: true,
-    },
-    isMultiSelect: {
-      type: Boolean,
-      required: true,
-    },
-    rotateElement: {
-      type: Function as PropType<(element: Exclude<PPTElement, PPTLineElement | PPTVideoElement | PPTAudioElement>) => void>,
-      required: true,
-    },
-    scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void>,
-      required: true,
-    },
-    dragLineElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void>,
-      required: true,
-    },
-    openLinkDialog: {
-      type: Function as PropType<() => void>,
-      required: true,
-    },
+  isSelected: {
+    type: Boolean,
+    required: true,
   },
-  setup(props) {
-    const { canvasScale, toolbarState } = storeToRefs(useMainStore())
-    const { formatedAnimations } = storeToRefs(useSlidesStore())
-
-    const currentOperateComponent = computed(() => {
-      const elementTypeMap = {
-        [ElementTypes.IMAGE]: ImageElementOperate,
-        [ElementTypes.TEXT]: TextElementOperate,
-        [ElementTypes.SHAPE]: ShapeElementOperate,
-        [ElementTypes.LINE]: LineElementOperate,
-        [ElementTypes.TABLE]: TableElementOperate,
-        [ElementTypes.CHART]: CommonElementOperate,
-        [ElementTypes.LATEX]: CommonElementOperate,
-        [ElementTypes.VIDEO]: CommonElementOperate,
-        [ElementTypes.AUDIO]: CommonElementOperate,
-      }
-      return elementTypeMap[props.elementInfo.type] || null
-    })
-
-    const elementIndexListInAnimation = computed(() => {
-      const indexList = []
-      for (let i = 0; i < formatedAnimations.value.length; i++) {
-        const elIds = formatedAnimations.value[i].animations.map(item => item.elId)
-        if (elIds.includes(props.elementInfo.id)) indexList.push(i)
-      }
-      return indexList
-    })
-
-    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,
-    }
+  isActive: {
+    type: Boolean,
+    required: true,
+  },
+  isActiveGroupElement: {
+    type: Boolean,
+    required: true,
+  },
+  isMultiSelect: {
+    type: Boolean,
+    required: true,
+  },
+  rotateElement: {
+    type: Function as PropType<(element: Exclude<PPTElement, PPTLineElement | PPTVideoElement | PPTAudioElement>) => void>,
+    required: true,
+  },
+  scaleElement: {
+    type: Function as PropType<(e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void>,
+    required: true,
+  },
+  dragLineElement: {
+    type: Function as PropType<(e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void>,
+    required: true,
+  },
+  openLinkDialog: {
+    type: Function as PropType<() => void>,
+    required: true,
   },
 })
+
+const { canvasScale, toolbarState } = storeToRefs(useMainStore())
+const { formatedAnimations } = storeToRefs(useSlidesStore())
+
+const currentOperateComponent = computed(() => {
+  const elementTypeMap = {
+    [ElementTypes.IMAGE]: ImageElementOperate,
+    [ElementTypes.TEXT]: TextElementOperate,
+    [ElementTypes.SHAPE]: ShapeElementOperate,
+    [ElementTypes.LINE]: LineElementOperate,
+    [ElementTypes.TABLE]: TableElementOperate,
+    [ElementTypes.CHART]: CommonElementOperate,
+    [ElementTypes.LATEX]: CommonElementOperate,
+    [ElementTypes.VIDEO]: CommonElementOperate,
+    [ElementTypes.AUDIO]: CommonElementOperate,
+  }
+  return elementTypeMap[props.elementInfo.type] || null
+})
+
+const elementIndexListInAnimation = computed(() => {
+  const indexList = []
+  for (let i = 0; i < formatedAnimations.value.length; i++) {
+    const elIds = formatedAnimations.value[i].animations.map(item => item.elId)
+    if (elIds.includes(props.elementInfo.id)) indexList.push(i)
+  }
+  return indexList
+})
+
+const rotate = computed(() => 'rotate' in props.elementInfo ? props.elementInfo.rotate : 0)
+const height = computed(() => 'height' in props.elementInfo ? props.elementInfo.height : 0)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/Ruler.vue b/src/views/Editor/Canvas/Ruler.vue
index ceb1bc6d..9ad60109 100644
--- a/src/views/Editor/Canvas/Ruler.vue
+++ b/src/views/Editor/Canvas/Ruler.vue
@@ -36,8 +36,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 
@@ -48,25 +48,17 @@ interface ViewportStyles {
   height: number
 }
 
-export default defineComponent({
-  props: {
-    viewportStyles: {
-      type: Object as PropType<ViewportStyles>,
-      required: true,
-    },
+const props = defineProps({
+  viewportStyles: {
+    type: Object as PropType<ViewportStyles>,
+    required: true,
   },
-  setup(props) {
-    const { canvasScale } = storeToRefs(useMainStore())
+})
 
-    const markerSize = computed(() => {
-      return props.viewportStyles.width * canvasScale.value / 10
-    })
+const { canvasScale } = storeToRefs(useMainStore())
 
-    return {
-      canvasScale,
-      markerSize,
-    }
-  },
+const markerSize = computed(() => {
+  return props.viewportStyles.width * canvasScale.value / 10
 })
 </script>
 
diff --git a/src/views/Editor/Canvas/ViewportBackground.vue b/src/views/Editor/Canvas/ViewportBackground.vue
index 22582735..dcd36d57 100644
--- a/src/views/Editor/Canvas/ViewportBackground.vue
+++ b/src/views/Editor/Canvas/ViewportBackground.vue
@@ -7,32 +7,19 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script lang="ts" setup>
+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 { showGridLines } = storeToRefs(useMainStore())
+const { currentSlide } = storeToRefs(useSlidesStore())
+const background = computed<SlideBackground | undefined>(() => currentSlide.value?.background)
 
-    const { backgroundStyle } = useSlideBackgroundStyle(background)
-
-    return {
-      showGridLines,
-      backgroundStyle,
-    }
-  },
-})
+const { backgroundStyle } = useSlideBackgroundStyle(background)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index 1bd54a14..a3c59cfa 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -91,8 +91,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, provide, ref, watch, watchEffect } from 'vue'
+<script lang="ts" setup>
+import { onMounted, provide, ref, watch, watchEffect } from 'vue'
 import { throttle } from 'lodash'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
@@ -130,192 +130,146 @@ 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,
-      activeGroupElementId,
-      handleElementId,
-      editorAreaFocus,
-      showGridLines,
-      showRuler,
-      creatingElement,
-      canvasScale,
-    } = storeToRefs(mainStore)
-    const { currentSlide } = storeToRefs(useSlidesStore())
-    const { ctrlKeyState, spaceKeyState } = storeToRefs(useKeyboardStore())
+const mainStore = useMainStore()
+const {
+  activeElementIdList,
+  activeGroupElementId,
+  handleElementId,
+  editorAreaFocus,
+  showGridLines,
+  showRuler,
+  creatingElement,
+  canvasScale,
+} = storeToRefs(mainStore)
+const { currentSlide } = storeToRefs(useSlidesStore())
+const { ctrlKeyState, spaceKeyState } = storeToRefs(useKeyboardStore())
 
-    const viewportRef = ref<HTMLElement>()
-    const alignmentLines = ref<AlignmentLineProps[]>([])
+const viewportRef = ref<HTMLElement>()
+const alignmentLines = ref<AlignmentLineProps[]>([])
 
-    const linkDialogVisible = ref(false)
-    const openLinkDialog = () => linkDialogVisible.value = true
+const linkDialogVisible = ref(false)
+const openLinkDialog = () => linkDialogVisible.value = true
 
-    watch(handleElementId, () => {
-      mainStore.setActiveGroupElementId('')
-    })
-
-    const elementList = ref<PPTElement[]>([])
-    const setLocalElementList = () => {
-      elementList.value = currentSlide.value ? JSON.parse(JSON.stringify(currentSlide.value.elements)) : []
-    }
-    watchEffect(setLocalElementList)
-
-    const canvasRef = ref<HTMLElement>()
-    const { dragViewport, viewportStyles } = useViewportSize(canvasRef)
-
-    useDropImageOrText(canvasRef)
-
-    const { mouseSelection, mouseSelectionVisible, mouseSelectionQuadrant, updateMouseSelection } = useMouseSelection(elementList, viewportRef)
-
-    const { dragElement } = useDragElement(elementList, alignmentLines, canvasScale)
-    const { dragLineElement } = useDragLineElement(elementList)
-    const { selectElement } = useSelectElement(elementList, dragElement)
-    const { scaleElement, scaleMultiElement } = useScaleElement(elementList, alignmentLines, canvasScale)
-    const { rotateElement } = useRotateElement(elementList, viewportRef)
-
-    const { selectAllElement } = useSelectAllElement()
-    const { deleteAllElements } = useDeleteElement()
-    const { pasteElement } = useCopyAndPasteElement()
-    const { enterScreeningFromStart } = useScreening()
-    const { updateSlideIndex } = useSlideHandler()
-
-    // 组件渲染时，如果存在元素焦点，需要清除
-    // 这种情况存在于：有焦点元素的情况下进入了放映模式，再退出时，需要清除原先的焦点（因为可能已经切换了页面）
-    onMounted(() => {
-      if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
-    })
-
-    // 点击画布的空白区域：清空焦点元素、设置画布焦点、清除文字选区
-    const handleClickBlankArea = (e: MouseEvent) => {
-      mainStore.setActiveElementIdList([])
-
-      if (!spaceKeyState.value) updateMouseSelection(e)
-      else dragViewport(e)
-
-      if (!editorAreaFocus.value) mainStore.setEditorareaFocus(true)
-      removeAllRanges()
-    }
-
-    // 移除画布编辑区域焦点
-    const removeEditorAreaFocus = () => {
-      if (editorAreaFocus.value) mainStore.setEditorareaFocus(false)
-    }
-
-    // 滚动鼠标
-    const { scaleCanvas } = useScaleCanvas()
-    const throttleScaleCanvas = throttle(scaleCanvas, 100, { leading: true, trailing: false })
-    const throttleUpdateSlideIndex = throttle(updateSlideIndex, 300, { leading: true, trailing: false })
-
-    const handleMousewheelCanvas = (e: WheelEvent) => {
-      e.preventDefault()
-
-      // 按住Ctrl键时：缩放画布
-      if (ctrlKeyState.value) {
-        if (e.deltaY > 0) throttleScaleCanvas('-')
-        else if (e.deltaY < 0) throttleScaleCanvas('+')
-      }
-      // 上下翻页
-      else {
-        if (e.deltaY > 0) throttleUpdateSlideIndex(KEYS.DOWN)
-        else if (e.deltaY < 0) throttleUpdateSlideIndex(KEYS.UP)
-      }
-    }
-
-    // 开关网格线
-    const toggleGridLines = () => {
-      mainStore.setGridLinesState(!showGridLines.value)
-    }
-
-    // 开关标尺
-    const toggleRuler = () => {
-      mainStore.setRulerState(!showRuler.value)
-    }
-
-    // 在鼠标绘制的范围插入元素
-    const { insertElementFromCreateSelection } = useInsertFromCreateSelection(viewportRef)
-
-    const contextmenus = (): ContextmenuItem[] => {
-      return [
-        {
-          text: '粘贴',
-          subText: 'Ctrl + V',
-          handler: pasteElement,
-        },
-        {
-          text: '全选',
-          subText: 'Ctrl + A',
-          handler: selectAllElement,
-        },
-        {
-          text: '网格线',
-          subText: showGridLines.value ? '√' : '',
-          handler: toggleGridLines,
-        },
-        {
-          text: '标尺',
-          subText: showRuler.value ? '√' : '',
-          handler: toggleRuler,
-        },
-        {
-          text: '重置当前页',
-          handler: deleteAllElements,
-        },
-        { divider: true },
-        {
-          text: '幻灯片放映',
-          subText: 'F5',
-          handler: enterScreeningFromStart,
-        },
-      ]
-    }
-
-    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,
-    }
-  },
+watch(handleElementId, () => {
+  mainStore.setActiveGroupElementId('')
 })
+
+const elementList = ref<PPTElement[]>([])
+const setLocalElementList = () => {
+  elementList.value = currentSlide.value ? JSON.parse(JSON.stringify(currentSlide.value.elements)) : []
+}
+watchEffect(setLocalElementList)
+
+const canvasRef = ref<HTMLElement>()
+const { dragViewport, viewportStyles } = useViewportSize(canvasRef)
+
+useDropImageOrText(canvasRef)
+
+const { mouseSelection, mouseSelectionVisible, mouseSelectionQuadrant, updateMouseSelection } = useMouseSelection(elementList, viewportRef)
+
+const { dragElement } = useDragElement(elementList, alignmentLines, canvasScale)
+const { dragLineElement } = useDragLineElement(elementList)
+const { selectElement } = useSelectElement(elementList, dragElement)
+const { scaleElement, scaleMultiElement } = useScaleElement(elementList, alignmentLines, canvasScale)
+const { rotateElement } = useRotateElement(elementList, viewportRef)
+
+const { selectAllElement } = useSelectAllElement()
+const { deleteAllElements } = useDeleteElement()
+const { pasteElement } = useCopyAndPasteElement()
+const { enterScreeningFromStart } = useScreening()
+const { updateSlideIndex } = useSlideHandler()
+
+// 组件渲染时，如果存在元素焦点，需要清除
+// 这种情况存在于：有焦点元素的情况下进入了放映模式，再退出时，需要清除原先的焦点（因为可能已经切换了页面）
+onMounted(() => {
+  if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
+})
+
+// 点击画布的空白区域：清空焦点元素、设置画布焦点、清除文字选区
+const handleClickBlankArea = (e: MouseEvent) => {
+  mainStore.setActiveElementIdList([])
+
+  if (!spaceKeyState.value) updateMouseSelection(e)
+  else dragViewport(e)
+
+  if (!editorAreaFocus.value) mainStore.setEditorareaFocus(true)
+  removeAllRanges()
+}
+
+// 移除画布编辑区域焦点
+const removeEditorAreaFocus = () => {
+  if (editorAreaFocus.value) mainStore.setEditorareaFocus(false)
+}
+
+// 滚动鼠标
+const { scaleCanvas } = useScaleCanvas()
+const throttleScaleCanvas = throttle(scaleCanvas, 100, { leading: true, trailing: false })
+const throttleUpdateSlideIndex = throttle(updateSlideIndex, 300, { leading: true, trailing: false })
+
+const handleMousewheelCanvas = (e: WheelEvent) => {
+  e.preventDefault()
+
+  // 按住Ctrl键时：缩放画布
+  if (ctrlKeyState.value) {
+    if (e.deltaY > 0) throttleScaleCanvas('-')
+    else if (e.deltaY < 0) throttleScaleCanvas('+')
+  }
+  // 上下翻页
+  else {
+    if (e.deltaY > 0) throttleUpdateSlideIndex(KEYS.DOWN)
+    else if (e.deltaY < 0) throttleUpdateSlideIndex(KEYS.UP)
+  }
+}
+
+// 开关网格线
+const toggleGridLines = () => {
+  mainStore.setGridLinesState(!showGridLines.value)
+}
+
+// 开关标尺
+const toggleRuler = () => {
+  mainStore.setRulerState(!showRuler.value)
+}
+
+// 在鼠标绘制的范围插入元素
+const { insertElementFromCreateSelection } = useInsertFromCreateSelection(viewportRef)
+
+const contextmenus = (): ContextmenuItem[] => {
+  return [
+    {
+      text: '粘贴',
+      subText: 'Ctrl + V',
+      handler: pasteElement,
+    },
+    {
+      text: '全选',
+      subText: 'Ctrl + A',
+      handler: selectAllElement,
+    },
+    {
+      text: '网格线',
+      subText: showGridLines.value ? '√' : '',
+      handler: toggleGridLines,
+    },
+    {
+      text: '标尺',
+      subText: showRuler.value ? '√' : '',
+      handler: toggleRuler,
+    },
+    {
+      text: '重置当前页',
+      handler: deleteAllElements,
+    },
+    { divider: true },
+    {
+      text: '幻灯片放映',
+      subText: 'F5',
+      handler: enterScreeningFromStart,
+    },
+  ]
+}
+
+provide(injectKeySlideScale, canvasScale)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/CanvasTool/ChartPool.vue b/src/views/Editor/CanvasTool/ChartPool.vue
index 405933b8..53a9df64 100644
--- a/src/views/Editor/CanvasTool/ChartPool.vue
+++ b/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({
-  name: 'chart-pool',
-  emits: ['select'],
-  setup(props, { emit }) {
-    const chartList: PresetChartType[] = ['bar', 'horizontalBar', 'line', 'area', 'scatter', 'pie', 'ring']
+const emit = defineEmits<{
+  (event: 'select', payload: PresetChartType): void
+}>()
 
-    const selectChart = (chart: PresetChartType) => {
-      emit('select', chart)
-    }
+const chartList: PresetChartType[] = ['bar', 'horizontalBar', 'line', 'area', 'scatter', 'pie', 'ring']
 
-    return {
-      chartList,
-      selectChart,
-    }
-  },
-})
+const selectChart = (chart: PresetChartType) => {
+  emit('select', chart)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/CanvasTool/LinePool.vue b/src/views/Editor/CanvasTool/LinePool.vue
index fc5eb2f5..af0acf44 100644
--- a/src/views/Editor/CanvasTool/LinePool.vue
+++ b/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">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import { LINE_LIST, LinePoolItem } from '@/configs/lines'
 
 import LinePointMarker from '@/views/components/element/LineElement/LinePointMarker.vue'
 
-export default defineComponent({
-  name: 'line-pool',
-  emits: ['select'],
-  components: {
-    LinePointMarker,
-  },
-  setup(props, { emit }) {
-    const lineList = LINE_LIST
+const emit = defineEmits<{
+  (event: 'select', payload: LinePoolItem): void
+}>()
 
-    const selectLine = (line: LinePoolItem) => {
-      emit('select', line)
-    }
-
-    return {
-      lineList,
-      selectLine,
-    }
-  },
-})
+const selectLine = (line: LinePoolItem) => {
+  emit('select', line)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/CanvasTool/MediaInput.vue b/src/views/Editor/CanvasTool/MediaInput.vue
index 95cc5b48..d60cd455 100644
--- a/src/views/Editor/CanvasTool/MediaInput.vue
+++ b/src/views/Editor/CanvasTool/MediaInput.vue
@@ -28,8 +28,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { ref } from 'vue'
 import { message } from 'ant-design-vue'
 
 type TypeKey = 'video' | 'audio'
@@ -38,43 +38,33 @@ interface TabItem {
   label: string
 }
 
-export default defineComponent({
-  name: 'media-input',
-  emits: ['insertVideo', 'insertAudio', 'close'],
-  setup(props, { emit }) {
-    const type = ref<TypeKey>('video')
+const emit = defineEmits<{
+  (event: 'insertVideo', payload: string): void
+  (event: 'insertAudio', payload: string): void
+  (event: 'close'): void
+}>()
 
-    const videoSrc = ref('https://mazwai.com/videvo_files/video/free/2019-01/small_watermarked/181004_04_Dolphins-Whale_06_preview.webm')
-    const audioSrc = ref('https://freesound.org/data/previews/614/614107_11861866-lq.mp3')
+const type = ref<TypeKey>('video')
 
-    const tabs: TabItem[] = [
-      { key: 'video', label: '视频' },
-      { key: 'audio', label: '音频' },
-    ]
+const videoSrc = ref('https://mazwai.com/videvo_files/video/free/2019-01/small_watermarked/181004_04_Dolphins-Whale_06_preview.webm')
+const audioSrc = ref('https://freesound.org/data/previews/614/614107_11861866-lq.mp3')
 
-    const insertVideo = () => {
-      if (!videoSrc.value) return message.error('请先输入正确的视频地址')
-      emit('insertVideo', videoSrc.value)
-    }
+const tabs: TabItem[] = [
+  { key: 'video', label: '视频' },
+  { key: 'audio', label: '音频' },
+]
 
-    const insertAudio = () => {
-      if (!audioSrc.value) return message.error('请先输入正确的音频地址')
-      emit('insertAudio', audioSrc.value)
-    }
+const insertVideo = () => {
+  if (!videoSrc.value) return message.error('请先输入正确的视频地址')
+  emit('insertVideo', videoSrc.value)
+}
 
-    const close = () => emit('close')
+const insertAudio = () => {
+  if (!audioSrc.value) return message.error('请先输入正确的音频地址')
+  emit('insertAudio', audioSrc.value)
+}
 
-    return {
-      type,
-      videoSrc,
-      audioSrc,
-      tabs,
-      insertVideo,
-      insertAudio,
-      close,
-    }
-  },
-})
+const close = () => emit('close')
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/CanvasTool/ShapePool.vue b/src/views/Editor/CanvasTool/ShapePool.vue
index 3a11fa36..66a53364 100644
--- a/src/views/Editor/CanvasTool/ShapePool.vue
+++ b/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">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import { SHAPE_LIST, ShapePoolItem } from '@/configs/shapes'
 
-export default defineComponent({
-  name: 'shape-pool',
-  emits: ['select'],
-  setup(props, { emit }) {
-    const shapeList = SHAPE_LIST
+const emit = defineEmits<{
+  (event: 'select', payload: ShapePoolItem): void
+}>()
 
-    const selectShape = (shape: ShapePoolItem) => {
-      emit('select', shape)
-    }
-
-    return {
-      shapeList,
-      selectShape,
-    }
-  },
-})
+const selectShape = (shape: ShapePoolItem) => {
+  emit('select', shape)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/CanvasTool/TableGenerator.vue b/src/views/Editor/CanvasTool/TableGenerator.vue
index f36e623f..576ac91d 100644
--- a/src/views/Editor/CanvasTool/TableGenerator.vue
+++ b/src/views/Editor/CanvasTool/TableGenerator.vue
@@ -51,49 +51,42 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-
+<script lang="ts" setup>
+import { ref } from 'vue'
 import { message } from 'ant-design-vue'
 
-export default defineComponent({
-  name: 'table-generator',
-  emits: ['insert', 'close'],
-  setup(props, { emit }) {
-    const endCell = ref<number[]>([])
-    const customRow = ref(3)
-    const customCol = ref(3)
-    const isCustom = ref(false)
+interface InsertData {
+  row: number
+  col: number
+}
 
-    const handleClickTable = () => {
-      if (!endCell.value.length) return
-      const [row, col] = endCell.value
-      emit('insert', { row, col })
-    }
+const emit = defineEmits<{
+  (event: 'insert', payload: InsertData): void
+  (event: 'close'): void
+}>()
 
-    const insertCustomTable = () => {
-      if (customRow.value < 1 || customRow.value > 20) return message.warning('行数/列数必须在0~20之间！')
-      if (customCol.value < 1 || customCol.value > 20) return message.warning('行数/列数必须在0~20之间！')
-      emit('insert', { row: customRow.value, col: customCol.value })
-      isCustom.value = false
-    }
+const endCell = ref<number[]>([])
+const customRow = ref(3)
+const customCol = ref(3)
+const isCustom = ref(false)
 
-    const close = () => {
-      emit('close')
-      isCustom.value = false
-    }
+const handleClickTable = () => {
+  if (!endCell.value.length) return
+  const [row, col] = endCell.value
+  emit('insert', { row, col })
+}
 
-    return {
-      endCell,
-      customRow,
-      customCol,
-      handleClickTable,
-      insertCustomTable,
-      isCustom,
-      close,
-    }
-  },
-})
+const insertCustomTable = () => {
+  if (customRow.value < 1 || customRow.value > 20) return message.warning('行数/列数必须在0~20之间！')
+  if (customCol.value < 1 || customCol.value > 20) return message.warning('行数/列数必须在0~20之间！')
+  emit('insert', { row: customRow.value, col: customCol.value })
+  isCustom.value = false
+}
+
+const close = () => {
+  emit('close')
+  isCustom.value = false
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue
index 96519757..7bf0d852 100644
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@@ -106,8 +106,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSnapshotStore } from '@/store'
 import { getImageDataURL } from '@/utils/image'
@@ -124,115 +124,73 @@ 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())
+const mainStore = useMainStore()
+const { creatingElement } = storeToRefs(mainStore)
+const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
 
-    const { redo, undo } = useHistorySnapshot()
+const { redo, undo } = useHistorySnapshot()
 
-    const {
-      scaleCanvas,
-      setCanvasScalePercentage,
-      resetCanvas,
-      canvasScalePercentage,
-    } = useScaleCanvas()
-    
-    const canvasScalePresetList = [200, 150, 100, 80, 50]
-    const canvasScaleVisible = ref(false)
+const {
+  scaleCanvas,
+  setCanvasScalePercentage,
+  resetCanvas,
+  canvasScalePercentage,
+} = useScaleCanvas()
 
-    const applyCanvasPresetScale = (value: number) => {
-      setCanvasScalePercentage(value)
-      canvasScaleVisible.value = false
-    }
+const canvasScalePresetList = [200, 150, 100, 80, 50]
+const canvasScaleVisible = ref(false)
 
-    const {
-      createImageElement,
-      createChartElement,
-      createTableElement,
-      createLatexElement,
-      createVideoElement,
-      createAudioElement,
-    } = useCreateElement()
+const applyCanvasPresetScale = (value: number) => {
+  setCanvasScalePercentage(value)
+  canvasScaleVisible.value = false
+}
 
-    const insertImageElement = (files: File[]) => {
-      const imageFile = files[0]
-      if (!imageFile) return
-      getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
-    }
+const {
+  createImageElement,
+  createChartElement,
+  createTableElement,
+  createLatexElement,
+  createVideoElement,
+  createAudioElement,
+} = useCreateElement()
 
-    const shapePoolVisible = ref(false)
-    const linePoolVisible = ref(false)
-    const chartPoolVisible = ref(false)
-    const tableGeneratorVisible = ref(false)
-    const mediaInputVisible = ref(false)
-    const latexEditorVisible = ref(false)
+const insertImageElement = (files: FileList) => {
+  const imageFile = files[0]
+  if (!imageFile) return
+  getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
+}
 
-    // 绘制文字范围
-    const drawText = () => {
-      mainStore.setCreatingElement({
-        type: 'text',
-      })
-    }
+const shapePoolVisible = ref(false)
+const linePoolVisible = ref(false)
+const chartPoolVisible = ref(false)
+const tableGeneratorVisible = ref(false)
+const mediaInputVisible = ref(false)
+const latexEditorVisible = ref(false)
 
-    // 绘制形状范围
-    const drawShape = (shape: ShapePoolItem) => {
-      mainStore.setCreatingElement({
-        type: 'shape',
-        data: shape,
-      })
-      shapePoolVisible.value = false
-    }
+// 绘制文字范围
+const drawText = () => {
+  mainStore.setCreatingElement({
+    type: 'text',
+  })
+}
 
-    // 绘制线条路径
-    const drawLine = (line: LinePoolItem) => {
-      mainStore.setCreatingElement({
-        type: 'line',
-        data: line,
-      })
-      linePoolVisible.value = false
-    }
+// 绘制形状范围
+const drawShape = (shape: ShapePoolItem) => {
+  mainStore.setCreatingElement({
+    type: 'shape',
+    data: shape,
+  })
+  shapePoolVisible.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,
-    }
-  },
-})
+// 绘制线条路径
+const drawLine = (line: LinePoolItem) => {
+  mainStore.setCreatingElement({
+    type: 'line',
+    data: line,
+  })
+  linePoolVisible.value = false
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/EditorHeader/HotkeyDoc.vue b/src/views/Editor/EditorHeader/HotkeyDoc.vue
index c62b5ab0..7f617b5c 100644
--- a/src/views/Editor/EditorHeader/HotkeyDoc.vue
+++ b/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">
-import { defineComponent } from 'vue'
-import { HOTKEY_DOC } from '@/configs/hotkey'
-
-export default defineComponent({
-  name: 'hotkey-doc',
-  setup() {
-    return {
-      hotkeys: HOTKEY_DOC,
-    }
-  },
-})
+<script lang="ts" setup>
+import { HOTKEY_DOC } from '@/configs/hotkey' 
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index cf8b6878..1d5e8db7 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -78,8 +78,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import useScreening from '@/hooks/useScreening'
@@ -89,55 +89,29 @@ 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)
+const mainStore = useMainStore()
+const { showGridLines, showRuler } = storeToRefs(mainStore)
 
-    const { enterScreening, enterScreeningFromStart } = useScreening()
-    const { createSlide, deleteSlide, resetSlides } = useSlideHandler()
-    const { redo, undo } = useHistorySnapshot()
-    const { importSpecificFile } = useExport()
+const { enterScreening, enterScreeningFromStart } = useScreening()
+const { createSlide, deleteSlide, resetSlides } = useSlideHandler()
+const { redo, undo } = useHistorySnapshot()
+const { importSpecificFile } = useExport()
 
-    const setDialogForExport = mainStore.setDialogForExport
+const setDialogForExport = mainStore.setDialogForExport
 
-    const toggleGridLines = () => {
-      mainStore.setGridLinesState(!showGridLines.value)
-    }
+const toggleGridLines = () => {
+  mainStore.setGridLinesState(!showGridLines.value)
+}
 
-    const toggleRuler = () => {
-      mainStore.setRulerState(!showRuler.value)
-    }
+const toggleRuler = () => {
+  mainStore.setRulerState(!showRuler.value)
+}
 
-    const hotkeyDrawerVisible = ref(false)
+const hotkeyDrawerVisible = ref(false)
 
-    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,
-    }
-  },
-})
+const goIssues = () => {
+  window.open('https://github.com/pipipi-pikachu/PPTist/issues')
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/ExportDialog/ExportImage.vue b/src/views/Editor/ExportDialog/ExportImage.vue
index dd2eaf8e..e34a3f0a 100644
--- a/src/views/Editor/ExportDialog/ExportImage.vue
+++ b/src/views/Editor/ExportDialog/ExportImage.vue
@@ -75,62 +75,44 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+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({
-  name: 'export-img-dialog',
-  components: {
-    ThumbnailSlide,
-  },
-  setup(props, { emit }) {
-    const { slides, currentSlide } = storeToRefs(useSlidesStore())
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
 
-    const imageThumbnailsRef = ref<HTMLElement>()
-    const rangeType = ref<'all' | 'current' | 'custom'>('all')
-    const range = ref<[number, number]>([1, slides.value.length])
-    const format = ref<'jpeg' | 'png'>('jpeg')
-    const quality = ref(1)
-    const ignoreWebfont = ref(true)
+const { slides, currentSlide } = storeToRefs(useSlidesStore())
 
-    const renderSlides = computed(() => {
-      if (rangeType.value === 'all') return slides.value
-      if (rangeType.value === 'current') return [currentSlide.value]
-      return slides.value.filter((item, index) => {
-        const [min, max] = range.value
-        return index >= min - 1 && index <= max - 1
-      })
-    })
+const imageThumbnailsRef = ref<HTMLElement>()
+const rangeType = ref<'all' | 'current' | 'custom'>('all')
+const range = ref<[number, number]>([1, slides.value.length])
+const format = ref<'jpeg' | 'png'>('jpeg')
+const quality = ref(1)
+const ignoreWebfont = ref(true)
 
-    const close = () => emit('close')
-
-    const { exportImage, exporting } = useExport()
-
-    const expImage = () => {
-      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,
-    }
-  },
+const renderSlides = computed(() => {
+  if (rangeType.value === 'all') return slides.value
+  if (rangeType.value === 'current') return [currentSlide.value]
+  return slides.value.filter((item, index) => {
+    const [min, max] = range.value
+    return index >= min - 1 && index <= max - 1
+  })
 })
+
+const close = () => emit('close')
+
+const { exportImage, exporting } = useExport()
+
+const expImage = () => {
+  if (!imageThumbnailsRef.value) return
+  exportImage(imageThumbnailsRef.value, format.value, quality.value, ignoreWebfont.value)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/ExportDialog/ExportJSON.vue b/src/views/Editor/ExportDialog/ExportJSON.vue
index 142336e5..412a010a 100644
--- a/src/views/Editor/ExportDialog/ExportJSON.vue
+++ b/src/views/Editor/ExportDialog/ExportJSON.vue
@@ -11,28 +11,18 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
-export default defineComponent({
-  name: 'export-json-dialog',
-  setup(props, { emit }) {
-    const close = () => emit('close')
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
 
-    const { slides } = storeToRefs(useSlidesStore())
-
-    const { exportJSON } = useExport()
-    
-    return {
-      slides,
-      exportJSON,
-      close,
-    }
-  },
-})
+const { slides } = storeToRefs(useSlidesStore())
+const { exportJSON } = useExport()
+const close = () => emit('close')
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/ExportDialog/ExportPDF.vue b/src/views/Editor/ExportDialog/ExportPDF.vue
index 67cdd236..fa9a3435 100644
--- a/src/views/Editor/ExportDialog/ExportPDF.vue
+++ b/src/views/Editor/ExportDialog/ExportPDF.vue
@@ -60,51 +60,36 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+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({
-  name: 'export-pdf-dialog',
-  components: {
-    ThumbnailSlide,
-  },
-  setup(props, { emit }) {
-    const { slides, currentSlide } = storeToRefs(useSlidesStore())
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
 
-    const pdfThumbnailsRef = ref<HTMLElement>()
-    const rangeType = ref<'all' | 'current'>('all')
-    const count = ref(1)
-    const padding = ref(true)
+const { slides, currentSlide } = storeToRefs(useSlidesStore())
 
-    const close = () => emit('close')
+const pdfThumbnailsRef = ref<HTMLElement>()
+const rangeType = ref<'all' | 'current'>('all')
+const count = ref(1)
+const padding = ref(true)
 
-    const expPDF = () => {
-      if (!pdfThumbnailsRef.value) return
-      const pageSize = {
-        width: 1600,
-        height: rangeType.value === 'all' ? 900 * count.value : 900,
-        margin: padding.value ? 50 : 0,
-      }
-      print(pdfThumbnailsRef.value, pageSize)
-    }
-    
-    return {
-      pdfThumbnailsRef,
-      slides,
-      currentSlide,
-      rangeType,
-      count,
-      padding,
-      expPDF,
-      close,
-    }
-  },
-})
+const close = () => emit('close')
+
+const expPDF = () => {
+  if (!pdfThumbnailsRef.value) return
+  const pageSize = {
+    width: 1600,
+    height: rangeType.value === 'all' ? 900 * count.value : 900,
+    margin: padding.value ? 50 : 0,
+  }
+  print(pdfThumbnailsRef.value, pageSize)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/ExportDialog/ExportPPTX.vue b/src/views/Editor/ExportDialog/ExportPPTX.vue
index 1f81c95a..978c4f86 100644
--- a/src/views/Editor/ExportDialog/ExportPPTX.vue
+++ b/src/views/Editor/ExportDialog/ExportPPTX.vue
@@ -39,46 +39,34 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
-export default defineComponent({
-  name: 'export-pptx-dialog',
-  setup(props, { emit }) {
-    const { slides, currentSlide } = storeToRefs(useSlidesStore())
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
 
-    const rangeType = ref<'all' | 'current' | 'custom'>('all')
-    const range = ref<[number, number]>([1, slides.value.length])
-    const masterOverwrite = ref(true)
+const { slides, currentSlide } = storeToRefs(useSlidesStore())
 
-    const selectedSlides = computed(() => {
-      if (rangeType.value === 'all') return slides.value
-      if (rangeType.value === 'current') return [currentSlide.value]
-      return slides.value.filter((item, index) => {
-        const [min, max] = range.value
-        return index >= min - 1 && index <= max - 1
-      })
-    })
+const { exportPPTX, exporting } = useExport()
 
-    const close = () => emit('close')
+const rangeType = ref<'all' | 'current' | 'custom'>('all')
+const range = ref<[number, number]>([1, slides.value.length])
+const masterOverwrite = ref(true)
 
-    const { exportPPTX, exporting } = useExport()
-    
-    return {
-      slides,
-      rangeType,
-      range,
-      masterOverwrite,
-      exporting,
-      selectedSlides,
-      exportPPTX,
-      close,
-    }
-  },
+const selectedSlides = computed(() => {
+  if (rangeType.value === 'all') return slides.value
+  if (rangeType.value === 'current') return [currentSlide.value]
+  return slides.value.filter((item, index) => {
+    const [min, max] = range.value
+    return index >= min - 1 && index <= max - 1
+  })
 })
+
+const close = () => emit('close')
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/ExportDialog/ExportSpecificFile.vue b/src/views/Editor/ExportDialog/ExportSpecificFile.vue
index 96445d4e..d32f842a 100644
--- a/src/views/Editor/ExportDialog/ExportSpecificFile.vue
+++ b/src/views/Editor/ExportDialog/ExportSpecificFile.vue
@@ -34,43 +34,33 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
-export default defineComponent({
-  name: 'export-pptist-dialog',
-  setup(props, { emit }) {
-    const { slides, currentSlide } = storeToRefs(useSlidesStore())
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
 
-    const rangeType = ref<'all' | 'current' | 'custom'>('all')
-    const range = ref<[number, number]>([1, slides.value.length])
+const { slides, currentSlide } = storeToRefs(useSlidesStore())
 
-    const selectedSlides = computed(() => {
-      if (rangeType.value === 'all') return slides.value
-      if (rangeType.value === 'current') return [currentSlide.value]
-      return slides.value.filter((item, index) => {
-        const [min, max] = range.value
-        return index >= min - 1 && index <= max - 1
-      })
-    })
+const { exportSpecificFile } = useExport()
 
-    const close = () => emit('close')
+const rangeType = ref<'all' | 'current' | 'custom'>('all')
+const range = ref<[number, number]>([1, slides.value.length])
 
-    const { exportSpecificFile } = useExport()
-    
-    return {
-      slides,
-      rangeType,
-      range,
-      selectedSlides,
-      exportSpecificFile,
-      close,
-    }
-  },
+const selectedSlides = computed(() => {
+  if (rangeType.value === 'all') return slides.value
+  if (rangeType.value === 'current') return [currentSlide.value]
+  return slides.value.filter((item, index) => {
+    const [min, max] = range.value
+    return index >= min - 1 && index <= max - 1
+  })
 })
+
+const close = () => emit('close')
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/ExportDialog/index.vue b/src/views/Editor/ExportDialog/index.vue
index ac54da17..2bb32718 100644
--- a/src/views/Editor/ExportDialog/index.vue
+++ b/src/views/Editor/ExportDialog/index.vue
@@ -15,8 +15,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { DialogForExportTypes } from '@/types/export'
@@ -32,40 +32,28 @@ interface TabItem {
   label: string
 }
 
-export default defineComponent({
-  name: 'export-dialog',
-  setup() {
-    const mainStore = useMainStore()
-    const { dialogForExport } = storeToRefs(mainStore)
+const mainStore = useMainStore()
+const { dialogForExport } = storeToRefs(mainStore)
 
-    const setDialogForExport = mainStore.setDialogForExport
+const setDialogForExport = mainStore.setDialogForExport
 
-    const tabs: TabItem[] = [
-      { key: 'pptist', label: '导出 pptist 文件' },
-      { key: 'pptx', label: '导出 PPTX' },
-      { key: 'image', label: '导出图片' },
-      { key: 'json', label: '导出 JSON' },
-      { key: 'pdf', label: '打印 / 导出 PDF' },
-    ]
+const tabs: TabItem[] = [
+  { key: 'pptist', label: '导出 pptist 文件' },
+  { key: 'pptx', label: '导出 PPTX' },
+  { key: 'image', label: '导出图片' },
+  { key: 'json', label: '导出 JSON' },
+  { key: 'pdf', label: '打印 / 导出 PDF' },
+]
 
-    const currentDialogComponent = computed(() => {
-      const dialogMap = {
-        'image': ExportImage,
-        'json': ExportJSON,
-        'pdf': ExportPDF,
-        'pptx': ExportPPTX,
-        'pptist': ExportSpecificFile,
-      }
-      return dialogMap[dialogForExport.value] || null
-    })
-
-    return {
-      currentDialogComponent,
-      tabs,
-      dialogForExport,
-      setDialogForExport,
-    }
-  },
+const currentDialogComponent = computed(() => {
+  const dialogMap = {
+    'image': ExportImage,
+    'json': ExportJSON,
+    'pdf': ExportPDF,
+    'pptx': ExportPPTX,
+    'pptist': ExportSpecificFile,
+  }
+  return dialogMap[dialogForExport.value] || null
 })
 </script>
 
diff --git a/src/views/Editor/Remark/index.vue b/src/views/Editor/Remark/index.vue
index 830bfe92..aa494058 100644
--- a/src/views/Editor/Remark/index.vue
+++ b/src/views/Editor/Remark/index.vue
@@ -12,64 +12,57 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 
-export default defineComponent({
-  name: 'remark',
-  emits: ['update:height'],
-  props: {
-    height: {
-      type: Number,
-      required: true,
-    },
-  },
-  setup(props, { emit }) {
-    const slidesStore = useSlidesStore()
-    const { currentSlide } = storeToRefs(slidesStore)
-    
-    const remark = computed(() => currentSlide.value?.remark || '')
-
-    const handleInput = (e: Event) => {
-      const value = (e.target as HTMLTextAreaElement).value
-      slidesStore.updateSlide({ remark: value })
-    }
-
-    const resize = (e: MouseEvent) => {
-      let isMouseDown = true
-      const startPageY = e.pageY
-      const originHeight = props.height
-
-      document.onmousemove = e => {
-        if (!isMouseDown) return
-
-        const currentPageY = e.pageY
-
-        const moveY = currentPageY - startPageY
-        let newHeight = -moveY + originHeight
-
-        if (newHeight < 40) newHeight = 40
-        if (newHeight > 120) newHeight = 120
-
-        emit('update:height', newHeight)
-      }
-
-      document.onmouseup = () => {
-        isMouseDown = false
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    }
-
-    return {
-      remark,
-      handleInput,
-      resize,
-    }
+const props = defineProps({
+  height: {
+    type: Number,
+    required: true,
   },
 })
+
+const emit = defineEmits<{
+  (event: 'update:height', payload: number): void
+}>()
+
+const slidesStore = useSlidesStore()
+const { currentSlide } = storeToRefs(slidesStore)
+
+const remark = computed(() => currentSlide.value?.remark || '')
+
+const handleInput = (e: Event) => {
+  const value = (e.target as HTMLTextAreaElement).value
+  slidesStore.updateSlide({ remark: value })
+}
+
+const resize = (e: MouseEvent) => {
+  let isMouseDown = true
+  const startPageY = e.pageY
+  const originHeight = props.height
+
+  document.onmousemove = e => {
+    if (!isMouseDown) return
+
+    const currentPageY = e.pageY
+
+    const moveY = currentPageY - startPageY
+    let newHeight = -moveY + originHeight
+
+    if (newHeight < 40) newHeight = 40
+    if (newHeight > 120) newHeight = 120
+
+    emit('update:height', newHeight)
+  }
+
+  document.onmouseup = () => {
+    isMouseDown = false
+    document.onmousemove = null
+    document.onmouseup = null
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Thumbnails/LayoutPool.vue b/src/views/Editor/Thumbnails/LayoutPool.vue
index 85e35f31..0a6d7b50 100644
--- a/src/views/Editor/Thumbnails/LayoutPool.vue
+++ b/src/views/Editor/Thumbnails/LayoutPool.vue
@@ -11,33 +11,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Slide } from '@/types/slides'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
-export default defineComponent({
-  name: 'layout-pool',
-  emits: ['select'],
-  components: {
-    ThumbnailSlide,
-  },
-  setup(props, { emit }) {
-    const { layouts } = storeToRefs(useSlidesStore())
+const emit = defineEmits<{
+  (event: 'select', payload: Slide): void
+}>()
 
-    const selectSlideTemplate = (slide: Slide) => {
-      emit('select', slide)
-    }
+const { layouts } = storeToRefs(useSlidesStore())
 
-    return {
-      layouts,
-      selectSlideTemplate,
-    }
-  },
-})
+const selectSlideTemplate = (slide: Slide) => {
+  emit('select', slide)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue
index 69bd57de..2d76ec82 100644
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -43,8 +43,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
 import { fillDigit } from '@/utils/common'
@@ -57,209 +57,183 @@ 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()
-    const { selectedSlidesIndex: _selectedSlidesIndex, thumbnailsFocus } = storeToRefs(mainStore)
-    const { slides, slideIndex } = storeToRefs(slidesStore)
-    const { ctrlKeyState, shiftKeyState } = storeToRefs(keyboardStore)
+const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const keyboardStore = useKeyboardStore()
+const { selectedSlidesIndex: _selectedSlidesIndex, thumbnailsFocus } = storeToRefs(mainStore)
+const { slides, slideIndex } = storeToRefs(slidesStore)
+const { ctrlKeyState, shiftKeyState } = storeToRefs(keyboardStore)
 
-    const { slidesLoadLimit } = useLoadSlides()
+const { slidesLoadLimit } = useLoadSlides()
 
-    const selectedSlidesIndex = computed(() => [..._selectedSlidesIndex.value, slideIndex.value])
+const selectedSlidesIndex = computed(() => [..._selectedSlidesIndex.value, slideIndex.value])
 
-    const presetLayoutPopoverVisible = ref(false)
+const presetLayoutPopoverVisible = ref(false)
 
-    const {
-      copySlide,
-      pasteSlide,
-      createSlide,
-      createSlideByTemplate,
-      copyAndPasteSlide,
-      deleteSlide,
-      cutSlide,
-      selectAllSlide,
-    } = useSlideHandler()
+const {
+  copySlide,
+  pasteSlide,
+  createSlide,
+  createSlideByTemplate,
+  copyAndPasteSlide,
+  deleteSlide,
+  cutSlide,
+  selectAllSlide,
+} = useSlideHandler()
 
-    // 切换页面
-    const changSlideIndex = (index: number) => {
-      mainStore.setActiveElementIdList([])
+// 切换页面
+const changSlideIndex = (index: number) => {
+  mainStore.setActiveElementIdList([])
 
-      if (slideIndex.value === index) return
-      slidesStore.updateSlideIndex(index)
+  if (slideIndex.value === index) return
+  slidesStore.updateSlideIndex(index)
+}
+
+// 点击缩略图
+const handleClickSlideThumbnail = (e: MouseEvent, index: number) => {
+  const isMultiSelected = selectedSlidesIndex.value.length > 1
+
+  if (isMultiSelected && selectedSlidesIndex.value.includes(index) && e.button !== 0) return
+
+  // 按住Ctrl键，点选幻灯片，再次点击已选中的页面则取消选中
+  if (ctrlKeyState.value) {
+    if (slideIndex.value === index) {
+      if (!isMultiSelected) return
+
+      const newSelectedSlidesIndex = selectedSlidesIndex.value.filter(item => item !== index)
+      mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
+      changSlideIndex(selectedSlidesIndex.value[0])
     }
-
-    // 点击缩略图
-    const handleClickSlideThumbnail = (e: MouseEvent, index: number) => {
-      const isMultiSelected = selectedSlidesIndex.value.length > 1
-
-      if (isMultiSelected && selectedSlidesIndex.value.includes(index) && e.button !== 0) return
-
-      // 按住Ctrl键，点选幻灯片，再次点击已选中的页面则取消选中
-      if (ctrlKeyState.value) {
-        if (slideIndex.value === index) {
-          if (!isMultiSelected) return
-
-          const newSelectedSlidesIndex = selectedSlidesIndex.value.filter(item => item !== index)
-          mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
-          changSlideIndex(selectedSlidesIndex.value[0])
-        }
-        else {
-          if (selectedSlidesIndex.value.includes(index)) {
-            const newSelectedSlidesIndex = selectedSlidesIndex.value.filter(item => item !== index)
-            mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
-          }
-          else {
-            const newSelectedSlidesIndex = [...selectedSlidesIndex.value, index]
-            mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
-            changSlideIndex(index)
-          }
-        }
+    else {
+      if (selectedSlidesIndex.value.includes(index)) {
+        const newSelectedSlidesIndex = selectedSlidesIndex.value.filter(item => item !== index)
+        mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
       }
-      // 按住Shift键，选择范围内的全部幻灯片
-      else if (shiftKeyState.value) {
-        if (slideIndex.value === index && !isMultiSelected) return
-
-        let minIndex = Math.min(...selectedSlidesIndex.value)
-        let maxIndex = index
-
-        if (index < minIndex) {
-          maxIndex = Math.max(...selectedSlidesIndex.value)
-          minIndex = index
-        }
-
-        const newSelectedSlidesIndex = []
-        for (let i = minIndex; i <= maxIndex; i++) newSelectedSlidesIndex.push(i)
+      else {
+        const newSelectedSlidesIndex = [...selectedSlidesIndex.value, index]
         mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
         changSlideIndex(index)
       }
-      // 正常切换页面
-      else {
-        mainStore.updateSelectedSlidesIndex([])
-        changSlideIndex(index)
-      }
+    }
+  }
+  // 按住Shift键，选择范围内的全部幻灯片
+  else if (shiftKeyState.value) {
+    if (slideIndex.value === index && !isMultiSelected) return
+
+    let minIndex = Math.min(...selectedSlidesIndex.value)
+    let maxIndex = index
+
+    if (index < minIndex) {
+      maxIndex = Math.max(...selectedSlidesIndex.value)
+      minIndex = index
     }
 
-    // 设置缩略图工具栏聚焦状态（只有聚焦状态下，该部分的快捷键才能生效）
-    const setThumbnailsFocus = (focus: boolean) => {
-      if (thumbnailsFocus.value === focus) return
-      mainStore.setThumbnailsFocus(focus)
+    const newSelectedSlidesIndex = []
+    for (let i = minIndex; i <= maxIndex; i++) newSelectedSlidesIndex.push(i)
+    mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
+    changSlideIndex(index)
+  }
+  // 正常切换页面
+  else {
+    mainStore.updateSelectedSlidesIndex([])
+    changSlideIndex(index)
+  }
+}
 
-      if (!focus) mainStore.updateSelectedSlidesIndex([])
-    }
+// 设置缩略图工具栏聚焦状态（只有聚焦状态下，该部分的快捷键才能生效）
+const setThumbnailsFocus = (focus: boolean) => {
+  if (thumbnailsFocus.value === focus) return
+  mainStore.setThumbnailsFocus(focus)
 
-    // 拖拽调整顺序后进行数据的同步
-    const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
-      const { newIndex, oldIndex } = eventData
-      if (oldIndex === newIndex) return
+  if (!focus) mainStore.updateSelectedSlidesIndex([])
+}
 
-      const _slides = JSON.parse(JSON.stringify(slides.value))
-      const _slide = _slides[oldIndex]
-      _slides.splice(oldIndex, 1)
-      _slides.splice(newIndex, 0, _slide)
-      slidesStore.setSlides(_slides)
-      slidesStore.updateSlideIndex(newIndex)
-    }
+// 拖拽调整顺序后进行数据的同步
+const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
+  const { newIndex, oldIndex } = eventData
+  if (oldIndex === newIndex) return
 
-    const { enterScreening, enterScreeningFromStart } = useScreening()
+  const _slides = JSON.parse(JSON.stringify(slides.value))
+  const _slide = _slides[oldIndex]
+  _slides.splice(oldIndex, 1)
+  _slides.splice(newIndex, 0, _slide)
+  slidesStore.setSlides(_slides)
+  slidesStore.updateSlideIndex(newIndex)
+}
 
-    const contextmenusThumbnails = (): ContextmenuItem[] => {
-      return [
-        {
-          text: '粘贴',
-          subText: 'Ctrl + V',
-          handler: pasteSlide,
-        },
-        {
-          text: '全选',
-          subText: 'Ctrl + A',
-          handler: selectAllSlide,
-        },
-        {
-          text: '新建页面',
-          subText: 'Enter',
-          handler: createSlide,
-        },
-        {
-          text: '幻灯片放映',
-          subText: 'F5',
-          handler: enterScreeningFromStart,
-        },
-      ]
-    }
+const { enterScreening, enterScreeningFromStart } = useScreening()
 
-    const contextmenusThumbnailItem = (): ContextmenuItem[] => {
-      return [
-        {
-          text: '剪切',
-          subText: 'Ctrl + X',
-          handler: cutSlide,
-        },
-        {
-          text: '复制',
-          subText: 'Ctrl + C',
-          handler: copySlide,
-        },
-        {
-          text: '粘贴',
-          subText: 'Ctrl + V',
-          handler: pasteSlide,
-        },
-        {
-          text: '全选',
-          subText: 'Ctrl + A',
-          handler: selectAllSlide,
-        },
-        { divider: true },
-        {
-          text: '新建页面',
-          subText: 'Enter',
-          handler: createSlide,
-        },
-        {
-          text: '复制页面',
-          subText: 'Ctrl + D',
-          handler: copyAndPasteSlide,
-        },
-        {
-          text: '删除页面',
-          subText: 'Delete',
-          handler: () => deleteSlide(),
-        },
-        { divider: true },
-        {
-          text: '从当前放映',
-          subText: 'Shift + F5',
-          handler: enterScreening,
-        },
-      ]
-    }
+const contextmenusThumbnails = (): ContextmenuItem[] => {
+  return [
+    {
+      text: '粘贴',
+      subText: 'Ctrl + V',
+      handler: pasteSlide,
+    },
+    {
+      text: '全选',
+      subText: 'Ctrl + A',
+      handler: selectAllSlide,
+    },
+    {
+      text: '新建页面',
+      subText: 'Enter',
+      handler: createSlide,
+    },
+    {
+      text: '幻灯片放映',
+      subText: 'F5',
+      handler: enterScreeningFromStart,
+    },
+  ]
+}
 
-    return {
-      slides,
-      slideIndex,
-      selectedSlidesIndex,
-      presetLayoutPopoverVisible,
-      slidesLoadLimit,
-      createSlide,
-      createSlideByTemplate,
-      setThumbnailsFocus,
-      handleClickSlideThumbnail,
-      contextmenusThumbnails,
-      contextmenusThumbnailItem,
-      fillDigit,
-      handleDragEnd,
-    }
-  },
-})
+const contextmenusThumbnailItem = (): ContextmenuItem[] => {
+  return [
+    {
+      text: '剪切',
+      subText: 'Ctrl + X',
+      handler: cutSlide,
+    },
+    {
+      text: '复制',
+      subText: 'Ctrl + C',
+      handler: copySlide,
+    },
+    {
+      text: '粘贴',
+      subText: 'Ctrl + V',
+      handler: pasteSlide,
+    },
+    {
+      text: '全选',
+      subText: 'Ctrl + A',
+      handler: selectAllSlide,
+    },
+    { divider: true },
+    {
+      text: '新建页面',
+      subText: 'Enter',
+      handler: createSlide,
+    },
+    {
+      text: '复制页面',
+      subText: 'Ctrl + D',
+      handler: copyAndPasteSlide,
+    },
+    {
+      text: '删除页面',
+      subText: 'Delete',
+      handler: () => deleteSlide(),
+    },
+    { divider: true },
+    {
+      text: '从当前放映',
+      subText: 'Shift + F5',
+      handler: enterScreening,
+    },
+  ]
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index a3fde63e..bcca288c 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -30,9 +30,9 @@
                     <div 
                       class="animation-box"
                       :class="[
-                        `${prefix}animated`,
-                        `${prefix}fast`,
-                        hoverPreviewAnimation === item.value && `${prefix}${item.value}`,
+                        `${ANIMATION_CLASS_PREFIX}animated`,
+                        `${ANIMATION_CLASS_PREFIX}fast`,
+                        hoverPreviewAnimation === item.value && `${ANIMATION_CLASS_PREFIX}${item.value}`,
                       ]"
                     >{{item.name}}</div>
                   </div>
@@ -113,8 +113,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
 import { nanoid } from 'nanoid'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
@@ -157,204 +157,175 @@ 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)
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId } = storeToRefs(useMainStore())
+const { currentSlide, formatedAnimations, currentSlideAnimations } = storeToRefs(slidesStore)
 
-    const tabs: TabItem[] = [
-      { key: 'in', label: '入场' },
-      { key: 'out', label: '退场' },
-      { key: 'attention', label: '强调' },
-    ]
-    const activeTab = ref('in')
+const tabs: TabItem[] = [
+  { key: 'in', label: '入场' },
+  { key: 'out', label: '退场' },
+  { key: 'attention', label: '强调' },
+]
+const activeTab = ref('in')
 
-    watch(() => handleElementId.value, () => {
-      animationPoolVisible.value = false
-    })
-
-    const hoverPreviewAnimation = ref('')
-    const animationPoolVisible = ref(false)
-
-    const { addHistorySnapshot } = useHistorySnapshot()
-
-    // 当前页面的动画列表
-    const animationSequence = computed(() => {
-      const animationSequence = []
-      for (let i = 0; i < formatedAnimations.value.length; i++) {
-        const item = formatedAnimations.value[i]
-        for (let j = 0; j < item.animations.length; j++) {
-          const animation = item.animations[j]
-          const el = currentSlide.value.elements.find(el => el.id === animation.elId)
-          if (!el) continue
-
-          const elType = ELEMENT_TYPE_ZH[el.type]
-          const animationEffect = animationEffects[animation.effect]
-          animationSequence.push({
-            ...animation,
-            index: j === 0 ? i + 1 : '',
-            elType,
-            animationEffect,
-          })
-        }
-      }
-      return animationSequence
-    })
-
-    // 当前选中元素的入场动画信息
-    const handleElementAnimation = computed(() => {
-      const animations = currentSlideAnimations.value
-      const animation = animations.filter(item => item.elId === handleElementId.value)
-      return animation || []
-    })
-
-    // 删除元素动画
-    const deleteAnimation = (id: string) => {
-      const animations = currentSlideAnimations.value.filter(item => item.id !== id)
-      slidesStore.updateSlide({ animations })
-      addHistorySnapshot()
-    }
-
-    // 拖拽修改动画顺序后同步数据
-    const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
-      const { newIndex, oldIndex } = eventData
-      if (oldIndex === newIndex) return
-
-      const animations: PPTAnimation[] = JSON.parse(JSON.stringify(currentSlideAnimations.value))
-      const animation = animations[oldIndex]
-      animations.splice(oldIndex, 1)
-      animations.splice(newIndex, 0, animation)
-      
-      slidesStore.updateSlide({ animations })
-      addHistorySnapshot()
-    }
-
-    // 执行动画预览
-    const runAnimation = (elId: string, effect: string, duration: number) => {
-      const elRef = document.querySelector(`#editable-element-${elId} [class^=editable-element-]`)
-      if (elRef) {
-        const animationName = `${ANIMATION_CLASS_PREFIX}${effect}`
-        document.documentElement.style.setProperty('--animate-duration', `${duration}ms`)
-        elRef.classList.add(`${ANIMATION_CLASS_PREFIX}animated`, animationName)
-
-        const handleAnimationEnd = () => {
-          document.documentElement.style.removeProperty('--animate-duration')
-          elRef.classList.remove(`${ANIMATION_CLASS_PREFIX}animated`, animationName)
-        }
-        elRef.addEventListener('animationend', handleAnimationEnd, { once: true })
-      }
-    }
-
-    // 修改元素动画持续时间
-    const updateElementAnimationDuration = (id: string, duration: number) => {
-      if (duration < 100 || duration > 5000) return
-
-      const animations = currentSlideAnimations.value.map(item => {
-        if (item.id === id) return { ...item, duration }
-        return item
-      })
-      slidesStore.updateSlide({ animations })
-      addHistorySnapshot()
-    }
-
-    // 修改触发方式
-    const updateElementAnimationTrigger = (id: string, trigger: 'click' | 'meantime' | 'auto') => {
-      const animations = currentSlideAnimations.value.map(item => {
-        if (item.id === id) return { ...item, trigger }
-        return item
-      })
-      slidesStore.updateSlide({ animations })
-      addHistorySnapshot()
-    }
-
-    // 修改元素动画，并执行一次预览
-    const updateElementAnimation = (type: AnimationType, effect: string) => {
-      const animations = currentSlideAnimations.value.map(item => {
-        if (item.id === handleAnimationId.value) return { ...item, type, effect }
-        return item
-      })
-      slidesStore.updateSlide({ animations })
-      animationPoolVisible.value = false
-      addHistorySnapshot()
-
-      const animationItem = currentSlideAnimations.value.find(item => item.elId === handleElementId.value)
-      const duration = animationItem?.duration || ANIMATION_DEFAULT_DURATION
-
-      runAnimation(handleElementId.value, effect, duration)
-    }
-
-    const handleAnimationId = ref('')
-    // 添加元素动画，并执行一次预览
-    const addAnimation = (type: AnimationType, effect: string) => {
-      if (handleAnimationId.value) {
-        updateElementAnimation(type, effect)
-        return
-      }
-
-      const animations: PPTAnimation[] = JSON.parse(JSON.stringify(currentSlideAnimations.value))
-      animations.push({
-        id: nanoid(10),
-        elId: handleElementId.value,
-        type,
-        effect,
-        duration: ANIMATION_DEFAULT_DURATION,
-        trigger: ANIMATION_DEFAULT_TRIGGER,
-      })
-      slidesStore.updateSlide({ animations })
-      animationPoolVisible.value = false
-      addHistorySnapshot()
-
-      runAnimation(handleElementId.value, effect, ANIMATION_DEFAULT_DURATION)
-    }
-
-    // 动画选择面板打开600ms后再移除遮罩层，否则打开面板后迅速滑入鼠标预览会导致抖动
-    const popoverMaskHide = ref(false)
-    const handlePopoverVisibleChange = (visible: boolean) => {
-      if (visible) {
-        setTimeout(() => popoverMaskHide.value = true, 600)
-      }
-      else popoverMaskHide.value = false
-    }
-
-    const openAnimationPool = (elementId: string) => {
-      animationPoolVisible.value = true
-      handleAnimationId.value = elementId
-      handlePopoverVisibleChange(true)
-    }
-
-    return {
-      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,
-    }
-  },
+watch(() => handleElementId.value, () => {
+  animationPoolVisible.value = false
 })
+
+const hoverPreviewAnimation = ref('')
+const animationPoolVisible = ref(false)
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+// 当前页面的动画列表
+const animationSequence = computed(() => {
+  const animationSequence = []
+  for (let i = 0; i < formatedAnimations.value.length; i++) {
+    const item = formatedAnimations.value[i]
+    for (let j = 0; j < item.animations.length; j++) {
+      const animation = item.animations[j]
+      const el = currentSlide.value.elements.find(el => el.id === animation.elId)
+      if (!el) continue
+
+      const elType = ELEMENT_TYPE_ZH[el.type]
+      const animationEffect = animationEffects[animation.effect]
+      animationSequence.push({
+        ...animation,
+        index: j === 0 ? i + 1 : '',
+        elType,
+        animationEffect,
+      })
+    }
+  }
+  return animationSequence
+})
+
+// 当前选中元素的入场动画信息
+const handleElementAnimation = computed(() => {
+  const animations = currentSlideAnimations.value
+  const animation = animations.filter(item => item.elId === handleElementId.value)
+  return animation || []
+})
+
+// 删除元素动画
+const deleteAnimation = (id: string) => {
+  const animations = currentSlideAnimations.value.filter(item => item.id !== id)
+  slidesStore.updateSlide({ animations })
+  addHistorySnapshot()
+}
+
+// 拖拽修改动画顺序后同步数据
+const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
+  const { newIndex, oldIndex } = eventData
+  if (oldIndex === newIndex) return
+
+  const animations: PPTAnimation[] = JSON.parse(JSON.stringify(currentSlideAnimations.value))
+  const animation = animations[oldIndex]
+  animations.splice(oldIndex, 1)
+  animations.splice(newIndex, 0, animation)
+  
+  slidesStore.updateSlide({ animations })
+  addHistorySnapshot()
+}
+
+// 执行动画预览
+const runAnimation = (elId: string, effect: string, duration: number) => {
+  const elRef = document.querySelector(`#editable-element-${elId} [class^=editable-element-]`)
+  if (elRef) {
+    const animationName = `${ANIMATION_CLASS_PREFIX}${effect}`
+    document.documentElement.style.setProperty('--animate-duration', `${duration}ms`)
+    elRef.classList.add(`${ANIMATION_CLASS_PREFIX}animated`, animationName)
+
+    const handleAnimationEnd = () => {
+      document.documentElement.style.removeProperty('--animate-duration')
+      elRef.classList.remove(`${ANIMATION_CLASS_PREFIX}animated`, animationName)
+    }
+    elRef.addEventListener('animationend', handleAnimationEnd, { once: true })
+  }
+}
+
+// 修改元素动画持续时间
+const updateElementAnimationDuration = (id: string, duration: number) => {
+  if (duration < 100 || duration > 5000) return
+
+  const animations = currentSlideAnimations.value.map(item => {
+    if (item.id === id) return { ...item, duration }
+    return item
+  })
+  slidesStore.updateSlide({ animations })
+  addHistorySnapshot()
+}
+
+// 修改触发方式
+const updateElementAnimationTrigger = (id: string, trigger: 'click' | 'meantime' | 'auto') => {
+  const animations = currentSlideAnimations.value.map(item => {
+    if (item.id === id) return { ...item, trigger }
+    return item
+  })
+  slidesStore.updateSlide({ animations })
+  addHistorySnapshot()
+}
+
+// 修改元素动画，并执行一次预览
+const updateElementAnimation = (type: AnimationType, effect: string) => {
+  const animations = currentSlideAnimations.value.map(item => {
+    if (item.id === handleAnimationId.value) return { ...item, type, effect }
+    return item
+  })
+  slidesStore.updateSlide({ animations })
+  animationPoolVisible.value = false
+  addHistorySnapshot()
+
+  const animationItem = currentSlideAnimations.value.find(item => item.elId === handleElementId.value)
+  const duration = animationItem?.duration || ANIMATION_DEFAULT_DURATION
+
+  runAnimation(handleElementId.value, effect, duration)
+}
+
+const handleAnimationId = ref('')
+// 添加元素动画，并执行一次预览
+const addAnimation = (type: AnimationType, effect: string) => {
+  if (handleAnimationId.value) {
+    updateElementAnimation(type, effect)
+    return
+  }
+
+  const animations: PPTAnimation[] = JSON.parse(JSON.stringify(currentSlideAnimations.value))
+  animations.push({
+    id: nanoid(10),
+    elId: handleElementId.value,
+    type,
+    effect,
+    duration: ANIMATION_DEFAULT_DURATION,
+    trigger: ANIMATION_DEFAULT_TRIGGER,
+  })
+  slidesStore.updateSlide({ animations })
+  animationPoolVisible.value = false
+  addHistorySnapshot()
+
+  runAnimation(handleElementId.value, effect, ANIMATION_DEFAULT_DURATION)
+}
+
+// 动画选择面板打开600ms后再移除遮罩层，否则打开面板后迅速滑入鼠标预览会导致抖动
+const popoverMaskHide = ref(false)
+const handlePopoverVisibleChange = (visible: boolean) => {
+  if (visible) {
+    setTimeout(() => popoverMaskHide.value = true, 600)
+  }
+  else popoverMaskHide.value = false
+}
+
+const openAnimationPool = (elementId: string) => {
+  animationPoolVisible.value = true
+  handleAnimationId.value = elementId
+  handlePopoverVisibleChange(true)
+}
+
+const animations = {
+  in: ENTER_ANIMATIONS,
+  out: EXIT_ANIMATIONS,
+  attention: ATTENTION_ANIMATIONS,
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index 05a269e6..31b2c753 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/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.BOTTOM)"><IconBringToFrontOne 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>
     </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.DOWN)"><IconSentToBack 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>
     </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,129 +131,101 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, Ref, ref, watch } from 'vue'
+<script lang="ts" setup>
+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())
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId } = storeToRefs(useMainStore())
 
-    const left = ref(0)
-    const top = ref(0)
-    const width = ref(0)
-    const height = ref(0)
-    const rotate = ref(0)
-    const fixedRatio = ref(false)
+const left = ref(0)
+const top = ref(0)
+const width = ref(0)
+const height = ref(0)
+const rotate = ref(0)
+const fixedRatio = ref(false)
 
-    const minSize = computed(() => {
-      if (!handleElement.value) return 20
-      return MIN_SIZE[handleElement.value.type] || 20
-    })
-
-    watch(handleElement, () => {
-      if (!handleElement.value) return
-
-      left.value = round(handleElement.value.left, 1)
-      top.value = round(handleElement.value.top, 1)
-
-      fixedRatio.value = 'fixedRatio' in handleElement.value && !!handleElement.value.fixedRatio
-
-      if (handleElement.value.type !== 'line') {
-        width.value = round(handleElement.value.width, 1)
-        height.value = round(handleElement.value.height, 1)
-        rotate.value = 'rotate' in handleElement.value && handleElement.value.rotate !== undefined ? round(handleElement.value.rotate, 1) : 0
-      }
-    }, { deep: true, immediate: true })
-
-    const { orderElement } = useOrderElement()
-    const { alignElementToCanvas } = useAlignElementToCanvas()
-
-    const { addHistorySnapshot } = useHistorySnapshot()
-
-    // 设置元素位置
-    const updateLeft = (value: number) => {
-      const props = { left: value }
-      slidesStore.updateElement({ id: handleElementId.value, props })
-      addHistorySnapshot()
-    }
-    const updateTop = (value: number) => {
-      const props = { top: value }
-      slidesStore.updateElement({ id: handleElementId.value, props })
-      addHistorySnapshot()
-    }
-
-    // 设置元素宽度、高度、旋转角度
-    const updateWidth = (value: number) => {
-      const props = { width: value }
-      slidesStore.updateElement({ id: handleElementId.value, props })
-      addHistorySnapshot()
-    }
-    const updateHeight = (value: number) => {
-      const props = { height: value }
-      slidesStore.updateElement({ id: handleElementId.value, props })
-      addHistorySnapshot()
-    }
-    const updateRotate = (value: number) => {
-      const props = { rotate: value }
-      slidesStore.updateElement({ id: handleElementId.value, props })
-      addHistorySnapshot()
-    }
-
-    // 固定元素的宽高比
-    const updateFixedRatio = (value: boolean) => {
-      const props = { fixedRatio: value }
-      slidesStore.updateElement({ id: handleElementId.value, props })
-      addHistorySnapshot()
-    }
-
-    // 将元素旋转45度（顺时针或逆时针）
-    const updateRotate45 = (command: '+' | '-') => {
-      let _rotate = Math.floor(rotate.value / 45) * 45
-      if (command === '+') _rotate = _rotate + 45
-      else if (command === '-') _rotate = _rotate - 45
-
-      if (_rotate < -180) _rotate = -180
-      if (_rotate > 180) _rotate = 180
-
-      const props = { rotate: _rotate }
-      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,
-    }
-  },
+const minSize = computed(() => {
+  if (!handleElement.value) return 20
+  return MIN_SIZE[handleElement.value.type] || 20
 })
+
+watch(handleElement, () => {
+  if (!handleElement.value) return
+
+  left.value = round(handleElement.value.left, 1)
+  top.value = round(handleElement.value.top, 1)
+
+  fixedRatio.value = 'fixedRatio' in handleElement.value && !!handleElement.value.fixedRatio
+
+  if (handleElement.value.type !== 'line') {
+    width.value = round(handleElement.value.width, 1)
+    height.value = round(handleElement.value.height, 1)
+    rotate.value = 'rotate' in handleElement.value && handleElement.value.rotate !== undefined ? round(handleElement.value.rotate, 1) : 0
+  }
+}, { deep: true, immediate: true })
+
+const { orderElement } = useOrderElement()
+const { alignElementToCanvas } = useAlignElementToCanvas()
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+// 设置元素位置
+const updateLeft = (value: number) => {
+  const props = { left: value }
+  slidesStore.updateElement({ id: handleElementId.value, props })
+  addHistorySnapshot()
+}
+const updateTop = (value: number) => {
+  const props = { top: value }
+  slidesStore.updateElement({ id: handleElementId.value, props })
+  addHistorySnapshot()
+}
+
+// 设置元素宽度、高度、旋转角度
+const updateWidth = (value: number) => {
+  const props = { width: value }
+  slidesStore.updateElement({ id: handleElementId.value, props })
+  addHistorySnapshot()
+}
+const updateHeight = (value: number) => {
+  const props = { height: value }
+  slidesStore.updateElement({ id: handleElementId.value, props })
+  addHistorySnapshot()
+}
+const updateRotate = (value: number) => {
+  const props = { rotate: value }
+  slidesStore.updateElement({ id: handleElementId.value, props })
+  addHistorySnapshot()
+}
+
+// 固定元素的宽高比
+const updateFixedRatio = (value: boolean) => {
+  const props = { fixedRatio: value }
+  slidesStore.updateElement({ id: handleElementId.value, props })
+  addHistorySnapshot()
+}
+
+// 将元素旋转45度（顺时针或逆时针）
+const updateRotate45 = (command: '+' | '-') => {
+  let _rotate = Math.floor(rotate.value / 45) * 45
+  if (command === '+') _rotate = _rotate + 45
+  else if (command === '-') _rotate = _rotate - 45
+
+  if (_rotate < -180) _rotate = -180
+  if (_rotate > 180) _rotate = 180
+
+  const props = { rotate: _rotate }
+  slidesStore.updateElement({ id: handleElementId.value, props })
+  addHistorySnapshot()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
index 09d24f71..6b780e9a 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
+++ b/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">
-import { defineComponent, Ref } from 'vue'
+<script lang="ts" setup>
+import { Ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTAudioElement } from '@/types/slides'
@@ -44,29 +44,18 @@ 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 slidesStore = useSlidesStore()
+const { handleElement } = storeToRefs(useMainStore())
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const handleAudioElement = handleElement as Ref<PPTAudioElement>
 
-    const updateAudio = (props: Partial<PPTAudioElement>) => {
-      if (!handleElement.value) return
-      slidesStore.updateElement({ id: handleElement.value.id, props })
-      addHistorySnapshot()
-    }
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    return {
-      handleElement: handleElement as Ref<PPTAudioElement>,
-      updateAudio,
-    }
-  }
-})
+const updateAudio = (props: Partial<PPTAudioElement>) => {
+  if (!handleElement.value) return
+  slidesStore.updateElement({ id: handleElement.value.id, props })
+  addHistorySnapshot()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
index e23146f4..cb38e80a 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
@@ -54,246 +54,233 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'
+<script lang="ts" setup>
+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 props = defineProps({
+  data: {
+    type: Object as PropType<ChartData>,
+    required: true,
+  }
+})
+
+const emit = defineEmits<{
+  (event: 'save', payload: ChartData): void
+  (event: 'close'): void
+}>()
+
 const CELL_WIDTH = 100
 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 selectedRange = ref([0, 0])
-    const tempRangeSize = ref({ width: 0, height: 0 })
-    const focusCell = ref<[number, number] | null>(null)
+const selectedRange = ref([0, 0])
+const tempRangeSize = ref({ width: 0, height: 0 })
+const focusCell = ref<[number, number] | null>(null)
 
-    // 当前选区的边框线条位置
-    const rangeLines = computed(() => {
-      const width = selectedRange.value[0] * CELL_WIDTH
-      const height = selectedRange.value[1] * CELL_HEIGHT
-      return [
-        { type: 't', style: {width: width + 'px'} },
-        { type: 'b', style: {top: height + 'px', width: width + 'px'} },
-        { type: 'l', style: {height: height + 'px'} },
-        { type: 'r', style: {left: width + 'px', height: height + 'px'} },
-      ]
-    })
-
-    // 当前选区的缩放点位置
-    const resizablePointStyle = computed(() => {
-      const width = selectedRange.value[0] * CELL_WIDTH
-      const height = selectedRange.value[1] * CELL_HEIGHT
-      return { left: width + 'px', top: height + 'px' }
-    })
-
-    // 初始化图表数据：将数据格式化并填充到DOM
-    const initData = () => {
-      const _data: string[][] = []
-
-      const { labels, legends, series } = props.data
-      const rowCount = labels.length
-      const colCount = series.length
-
-      _data.push(['', ...legends])
-      for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
-        const row = [labels[rowIndex]]
-        for (let colIndex = 0; colIndex < colCount; colIndex++) {
-          row.push(series[colIndex][rowIndex] + '')
-        }
-        _data.push(row)
-      }
-
-      for (let rowIndex = 0; rowIndex < rowCount + 1; rowIndex++) {
-        for (let colIndex = 0; colIndex < colCount + 1; colIndex++) {
-          const inputRef = document.querySelector(`#cell-${rowIndex}-${colIndex}`) as HTMLInputElement
-          if (!inputRef) continue
-          inputRef.value = _data[rowIndex][colIndex] + ''
-        }
-      }
-
-      selectedRange.value = [colCount + 1, rowCount + 1]
-    }
-
-    onMounted(initData)
-
-    // 快捷键监听：回车移动焦点到下一行
-    const moveNextRow = () => {
-      if (!focusCell.value) return
-
-      const [rowIndex, colIndex] = focusCell.value
-      const inputRef = document.querySelector(`#cell-${rowIndex + 1}-${colIndex}`) as HTMLInputElement
-      inputRef && inputRef.focus()
-    }
-
-    const keyboardListener = (e: KeyboardEvent) => {
-      const key = e.key.toUpperCase()
-      if (key === KEYS.ENTER) moveNextRow()
-    }
-
-    onMounted(() => {
-      document.addEventListener('keydown', keyboardListener)
-    })
-    onUnmounted(() => {
-      document.removeEventListener('keydown', keyboardListener)
-    })
-
-    // 获取当前图表DOM中的数据，整理格式化后传递出去
-    const getTableData = () => {
-      const [col, row] = selectedRange.value
-
-      const labels: string[] = []
-      const legends: string[] = []
-      const series: number[][] = []
-
-      // 第一行为系列名，第一列为项目名，实际数据从第二行第二列开始
-      for (let rowIndex = 1; rowIndex < row; rowIndex++) {
-        let labelsItem = `类别${rowIndex}`
-        const labelInputRef = document.querySelector(`#cell-${rowIndex}-0`) as HTMLInputElement
-        if (labelInputRef && labelInputRef.value) labelsItem = labelInputRef.value
-        labels.push(labelsItem)
-      }
-      for (let colIndex = 1; colIndex < col; colIndex++) {
-        let legendsItem = `系列${colIndex}`
-        const labelInputRef = document.querySelector(`#cell-0-${colIndex}`) as HTMLInputElement
-        if (labelInputRef && labelInputRef.value) legendsItem = labelInputRef.value
-        legends.push(legendsItem)
-      }
-
-      for (let colIndex = 1; colIndex < col; colIndex++) {
-        const seriesItem = []
-        for (let rowIndex = 1; rowIndex < row; rowIndex++) {
-          const valueInputRef = document.querySelector(`#cell-${rowIndex}-${colIndex}`) as HTMLInputElement
-          let value = 0
-          if (valueInputRef && valueInputRef.value && !!(+valueInputRef.value)) {
-            value = +valueInputRef.value
-          }
-          seriesItem.push(value)
-        }
-        series.push(seriesItem)
-      }
-
-      emit('save', { labels, legends, series })
-    }
-
-    // 清空表格数据
-    const clear = () => {
-      for (let rowIndex = 1; rowIndex < 31; rowIndex++) {
-        for (let colIndex = 1; colIndex < 7; colIndex++) {
-          const inputRef = document.querySelector(`#cell-${rowIndex}-${colIndex}`) as HTMLInputElement
-          if (!inputRef) continue
-          inputRef.value = ''
-        }
-      }
-    }
-
-    // 自定义粘贴事件（尝试读取剪贴板中的表格数据）
-    const handlePaste = (e: ClipboardEvent, rowIndex: number, colIndex: number) => {
-      e.preventDefault()
-
-      if (!e.clipboardData) return
-
-      const clipboardDataFirstItem = e.clipboardData.items[0]
-
-      if (clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
-        clipboardDataFirstItem.getAsString(text => {
-          const clipboardData = pasteCustomClipboardString(text)
-          if (typeof clipboardData === 'object') return
- 
-          const excelData = pasteExcelClipboardString(text)
-          if (excelData) {
-            const maxRow = rowIndex + excelData.length
-            const maxCol = colIndex + excelData[0].length
-            for (let i = rowIndex; i < maxRow; i++) {
-              for (let j = colIndex; j < maxCol; j++) {
-                const inputRef = document.querySelector(`#cell-${i}-${j}`) as HTMLInputElement
-                if (!inputRef) continue
-                inputRef.value = excelData[i - rowIndex][j - colIndex]
-              }
-            }
-          }
-        })
-      }
-    }
-
-    // 关闭图表数据编辑器
-    const closeEditor = () => emit('close')
-
-    // 鼠标拖拽修改选中的数据范围
-    const changeSelectRange = (e: MouseEvent) => {
-      let isMouseDown = true
-
-      const startPageX = e.pageX
-      const startPageY = e.pageY
-
-      const originWidth = selectedRange.value[0] * CELL_WIDTH
-      const originHeight = selectedRange.value[1] * CELL_HEIGHT
-
-      document.onmousemove = e => {
-        if (!isMouseDown) return
-
-        const currentPageX = e.pageX
-        const currentPageY = e.pageY
-
-        const x = currentPageX - startPageX
-        const y = currentPageY - startPageY
-
-        const width = originWidth + x
-        const height = originHeight + y
-
-        tempRangeSize.value = { width, height }
-      }
-
-      document.onmouseup = e => {
-        isMouseDown = false
-        document.onmousemove = null
-        document.onmouseup = null
-
-        const endPageX = e.pageX
-        const endPageY = e.pageY
-
-        if (startPageX === endPageX && startPageY === endPageY) return
-
-        // 拖拽结束时，范围超过格子一半自动扩大到下一格（如拖动到一格半多的位置，会自动扩展到两格，横竖都同理）
-        let width = tempRangeSize.value.width
-        let height = tempRangeSize.value.height
-        if (width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)
-        if (height % CELL_HEIGHT > CELL_HEIGHT * 0.5) height = height + (CELL_HEIGHT - height % CELL_HEIGHT)
-
-        let row = Math.round(height / CELL_HEIGHT)
-        let col = Math.round(width / CELL_WIDTH)
-
-        if (row < 3) row = 3
-        if (col < 2) col = 2
-
-        selectedRange.value = [col, row]
-        tempRangeSize.value = { width: 0, height: 0 }
-      }
-    }
-
-    return {
-      tempRangeSize,
-      rangeLines,
-      resizablePointStyle,
-      selectedRange,
-      focusCell,
-      changeSelectRange,
-      getTableData,
-      closeEditor,
-      clear,
-      handlePaste,
-    }
-  },
+// 当前选区的边框线条位置
+const rangeLines = computed(() => {
+  const width = selectedRange.value[0] * CELL_WIDTH
+  const height = selectedRange.value[1] * CELL_HEIGHT
+  return [
+    { type: 't', style: {width: width + 'px'} },
+    { type: 'b', style: {top: height + 'px', width: width + 'px'} },
+    { type: 'l', style: {height: height + 'px'} },
+    { type: 'r', style: {left: width + 'px', height: height + 'px'} },
+  ]
 })
+
+// 当前选区的缩放点位置
+const resizablePointStyle = computed(() => {
+  const width = selectedRange.value[0] * CELL_WIDTH
+  const height = selectedRange.value[1] * CELL_HEIGHT
+  return { left: width + 'px', top: height + 'px' }
+})
+
+// 初始化图表数据：将数据格式化并填充到DOM
+const initData = () => {
+  const _data: string[][] = []
+
+  const { labels, legends, series } = props.data
+  const rowCount = labels.length
+  const colCount = series.length
+
+  _data.push(['', ...legends])
+  for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+    const row = [labels[rowIndex]]
+    for (let colIndex = 0; colIndex < colCount; colIndex++) {
+      row.push(series[colIndex][rowIndex] + '')
+    }
+    _data.push(row)
+  }
+
+  for (let rowIndex = 0; rowIndex < rowCount + 1; rowIndex++) {
+    for (let colIndex = 0; colIndex < colCount + 1; colIndex++) {
+      const inputRef = document.querySelector(`#cell-${rowIndex}-${colIndex}`) as HTMLInputElement
+      if (!inputRef) continue
+      inputRef.value = _data[rowIndex][colIndex] + ''
+    }
+  }
+
+  selectedRange.value = [colCount + 1, rowCount + 1]
+}
+
+onMounted(initData)
+
+// 快捷键监听：回车移动焦点到下一行
+const moveNextRow = () => {
+  if (!focusCell.value) return
+
+  const [rowIndex, colIndex] = focusCell.value
+  const inputRef = document.querySelector(`#cell-${rowIndex + 1}-${colIndex}`) as HTMLInputElement
+  inputRef && inputRef.focus()
+}
+
+const keyboardListener = (e: KeyboardEvent) => {
+  const key = e.key.toUpperCase()
+  if (key === KEYS.ENTER) moveNextRow()
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', keyboardListener)
+})
+onUnmounted(() => {
+  document.removeEventListener('keydown', keyboardListener)
+})
+
+// 获取当前图表DOM中的数据，整理格式化后传递出去
+const getTableData = () => {
+  const [col, row] = selectedRange.value
+
+  const labels: string[] = []
+  const legends: string[] = []
+  const series: number[][] = []
+
+  // 第一行为系列名，第一列为项目名，实际数据从第二行第二列开始
+  for (let rowIndex = 1; rowIndex < row; rowIndex++) {
+    let labelsItem = `类别${rowIndex}`
+    const labelInputRef = document.querySelector(`#cell-${rowIndex}-0`) as HTMLInputElement
+    if (labelInputRef && labelInputRef.value) labelsItem = labelInputRef.value
+    labels.push(labelsItem)
+  }
+  for (let colIndex = 1; colIndex < col; colIndex++) {
+    let legendsItem = `系列${colIndex}`
+    const labelInputRef = document.querySelector(`#cell-0-${colIndex}`) as HTMLInputElement
+    if (labelInputRef && labelInputRef.value) legendsItem = labelInputRef.value
+    legends.push(legendsItem)
+  }
+
+  for (let colIndex = 1; colIndex < col; colIndex++) {
+    const seriesItem = []
+    for (let rowIndex = 1; rowIndex < row; rowIndex++) {
+      const valueInputRef = document.querySelector(`#cell-${rowIndex}-${colIndex}`) as HTMLInputElement
+      let value = 0
+      if (valueInputRef && valueInputRef.value && !!(+valueInputRef.value)) {
+        value = +valueInputRef.value
+      }
+      seriesItem.push(value)
+    }
+    series.push(seriesItem)
+  }
+
+  emit('save', { labels, legends, series })
+}
+
+// 清空表格数据
+const clear = () => {
+  for (let rowIndex = 1; rowIndex < 31; rowIndex++) {
+    for (let colIndex = 1; colIndex < 7; colIndex++) {
+      const inputRef = document.querySelector(`#cell-${rowIndex}-${colIndex}`) as HTMLInputElement
+      if (!inputRef) continue
+      inputRef.value = ''
+    }
+  }
+}
+
+// 自定义粘贴事件（尝试读取剪贴板中的表格数据）
+const handlePaste = (e: ClipboardEvent, rowIndex: number, colIndex: number) => {
+  e.preventDefault()
+
+  if (!e.clipboardData) return
+
+  const clipboardDataFirstItem = e.clipboardData.items[0]
+
+  if (clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
+    clipboardDataFirstItem.getAsString(text => {
+      const clipboardData = pasteCustomClipboardString(text)
+      if (typeof clipboardData === 'object') return
+ 
+      const excelData = pasteExcelClipboardString(text)
+      if (excelData) {
+        const maxRow = rowIndex + excelData.length
+        const maxCol = colIndex + excelData[0].length
+        for (let i = rowIndex; i < maxRow; i++) {
+          for (let j = colIndex; j < maxCol; j++) {
+            const inputRef = document.querySelector(`#cell-${i}-${j}`) as HTMLInputElement
+            if (!inputRef) continue
+            inputRef.value = excelData[i - rowIndex][j - colIndex]
+          }
+        }
+      }
+    })
+  }
+}
+
+// 关闭图表数据编辑器
+const closeEditor = () => emit('close')
+
+// 鼠标拖拽修改选中的数据范围
+const changeSelectRange = (e: MouseEvent) => {
+  let isMouseDown = true
+
+  const startPageX = e.pageX
+  const startPageY = e.pageY
+
+  const originWidth = selectedRange.value[0] * CELL_WIDTH
+  const originHeight = selectedRange.value[1] * CELL_HEIGHT
+
+  document.onmousemove = e => {
+    if (!isMouseDown) return
+
+    const currentPageX = e.pageX
+    const currentPageY = e.pageY
+
+    const x = currentPageX - startPageX
+    const y = currentPageY - startPageY
+
+    const width = originWidth + x
+    const height = originHeight + y
+
+    tempRangeSize.value = { width, height }
+  }
+
+  document.onmouseup = e => {
+    isMouseDown = false
+    document.onmousemove = null
+    document.onmouseup = null
+
+    const endPageX = e.pageX
+    const endPageY = e.pageY
+
+    if (startPageX === endPageX && startPageY === endPageY) return
+
+    // 拖拽结束时，范围超过格子一半自动扩大到下一格（如拖动到一格半多的位置，会自动扩展到两格，横竖都同理）
+    let width = tempRangeSize.value.width
+    let height = tempRangeSize.value.height
+    if (width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)
+    if (height % CELL_HEIGHT > CELL_HEIGHT * 0.5) height = height + (CELL_HEIGHT - height % CELL_HEIGHT)
+
+    let row = Math.round(height / CELL_HEIGHT)
+    let col = Math.round(width / CELL_WIDTH)
+
+    if (row < 3) row = 3
+    if (col < 2) col = 2
+
+    selectedRange.value = [col, row]
+    tempRangeSize.value = { width: 0, height: 0 }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index f54c821f..9e94ed31 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/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">
-import { defineComponent, onUnmounted, Ref, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { onUnmounted, Ref, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { ChartData, ChartOptions, PPTChartElement } from '@/types/slides'
@@ -178,165 +178,132 @@ 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 mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId } = storeToRefs(mainStore)
+const { theme } = storeToRefs(slidesStore)
 
-    const chartDataEditorVisible = ref(false)
-    const presetThemesVisible = ref(false)
-    const presetThemeColorHoverIndex = ref<[number, number]>([-1, -1])
+const handleChartElement = handleElement as Ref<PPTChartElement>
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const chartDataEditorVisible = ref(false)
+const presetThemesVisible = ref(false)
+const presetThemeColorHoverIndex = ref<[number, number]>([-1, -1])
 
-    const fill = ref<string>('#000')
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    const themeColor = ref<string[]>([])
-    const gridColor = ref('')
-    const legend = ref('')
+const fill = ref<string>('#000')
 
-    const lineSmooth = ref(true)
-    const showLine = ref(true)
-    const showArea = ref(false)
-    const horizontalBars = ref(false)
-    const donut = ref(false)
-    const stackBars = ref(false)
+const themeColor = ref<string[]>([])
+const gridColor = ref('')
+const legend = ref('')
 
-    watch(handleElement, () => {
-      if (!handleElement.value || handleElement.value.type !== 'chart') return
-      fill.value = handleElement.value.fill || '#fff'
+const lineSmooth = ref(true)
+const showLine = ref(true)
+const showArea = ref(false)
+const horizontalBars = ref(false)
+const donut = ref(false)
+const stackBars = ref(false)
 
-      if (handleElement.value.options) {
-        const {
-          lineSmooth: _lineSmooth,
-          showLine: _showLine,
-          showArea: _showArea,
-          horizontalBars: _horizontalBars,
-          donut: _donut,
-          stackBars: _stackBars,
-        } = handleElement.value.options
+watch(handleElement, () => {
+  if (!handleElement.value || handleElement.value.type !== 'chart') return
+  fill.value = handleElement.value.fill || '#fff'
 
-        if (_lineSmooth !== undefined) lineSmooth.value = _lineSmooth as boolean
-        if (_showLine !== undefined) showLine.value = _showLine
-        if (_showArea !== undefined) showArea.value = _showArea
-        if (_horizontalBars !== undefined) horizontalBars.value = _horizontalBars
-        if (_donut !== undefined) donut.value = _donut
-        if (_stackBars !== undefined) stackBars.value = _stackBars
-      }
+  if (handleElement.value.options) {
+    const {
+      lineSmooth: _lineSmooth,
+      showLine: _showLine,
+      showArea: _showArea,
+      horizontalBars: _horizontalBars,
+      donut: _donut,
+      stackBars: _stackBars,
+    } = handleElement.value.options
 
-      themeColor.value = handleElement.value.themeColor
-      gridColor.value = handleElement.value.gridColor || '#333'
-      legend.value = handleElement.value.legend || ''
-    }, { deep: true, immediate: true })
+    if (_lineSmooth !== undefined) lineSmooth.value = _lineSmooth as boolean
+    if (_showLine !== undefined) showLine.value = _showLine
+    if (_showArea !== undefined) showArea.value = _showArea
+    if (_horizontalBars !== undefined) horizontalBars.value = _horizontalBars
+    if (_donut !== undefined) donut.value = _donut
+    if (_stackBars !== undefined) stackBars.value = _stackBars
+  }
 
-    const updateElement = (props: Partial<PPTChartElement>) => {
-      slidesStore.updateElement({ id: handleElementId.value, props })
-      addHistorySnapshot()
-    }
+  themeColor.value = handleElement.value.themeColor
+  gridColor.value = handleElement.value.gridColor || '#333'
+  legend.value = handleElement.value.legend || ''
+}, { deep: true, immediate: true })
 
-    // 设置图表数据
-    const updateData = (data: ChartData) => {
-      chartDataEditorVisible.value = false
-      updateElement({ data })
-    }
+const updateElement = (props: Partial<PPTChartElement>) => {
+  slidesStore.updateElement({ id: handleElementId.value, props })
+  addHistorySnapshot()
+}
 
-    // 设置填充色
-    const updateFill = (value: string) => {
-      updateElement({ fill: value })
-    }
+// 设置图表数据
+const updateData = (data: ChartData) => {
+  chartDataEditorVisible.value = false
+  updateElement({ data })
+}
 
-    // 设置其他选项：柱状图转条形图、折线图转面积图、折线图转散点图、饼图转环形图、折线图开关平滑曲线
-    const updateOptions = (optionProps: ChartOptions) => {
-      const _handleElement = handleElement.value as PPTChartElement
+// 设置填充色
+const updateFill = (value: string) => {
+  updateElement({ fill: value })
+}
 
-      const newOptions = { ..._handleElement.options, ...optionProps }
-      updateElement({ options: newOptions })
-    }
+// 设置其他选项：柱状图转条形图、折线图转面积图、折线图转散点图、饼图转环形图、折线图开关平滑曲线
+const updateOptions = (optionProps: ChartOptions) => {
+  const _handleElement = handleElement.value as PPTChartElement
 
-    // 设置主题色
-    const updateTheme = (color: string, index: number) => {
-      const props = {
-        themeColor: themeColor.value.map((c, i) => i === index ? color : c),
-      }
-      updateElement(props)
-    }
+  const newOptions = { ..._handleElement.options, ...optionProps }
+  updateElement({ options: newOptions })
+}
 
-    // 添加主题色
-    const addThemeColor = () => {
-      const props = {
-        themeColor: [...themeColor.value, theme.value.themeColor],
-      }
-      updateElement(props)
-    }
+// 设置主题色
+const updateTheme = (color: string, index: number) => {
+  const props = {
+    themeColor: themeColor.value.map((c, i) => i === index ? color : c),
+  }
+  updateElement(props)
+}
 
-    // 使用预置主题配色
-    const applyPresetTheme = (colors: string[], index: number) => {
-      const themeColor = colors.slice(0, index + 1)
-      updateElement({ themeColor })
-      presetThemesVisible.value = false
-    }
+// 添加主题色
+const addThemeColor = () => {
+  const props = {
+    themeColor: [...themeColor.value, theme.value.themeColor],
+  }
+  updateElement(props)
+}
 
-    // 删除主题色
-    const deleteThemeColor = (index: number) => {
-      const props = {
-        themeColor: themeColor.value.filter((c, i) => i !== index),
-      }
-      updateElement(props)
-    }
+// 使用预置主题配色
+const applyPresetTheme = (colors: string[], index: number) => {
+  const themeColor = colors.slice(0, index + 1)
+  updateElement({ themeColor })
+  presetThemesVisible.value = false
+}
 
-    // 设置网格颜色
-    const updateGridColor = (gridColor: string) => {
-      updateElement({ gridColor })
-    }
+// 删除主题色
+const deleteThemeColor = (index: number) => {
+  const props = {
+    themeColor: themeColor.value.filter((c, i) => i !== index),
+  }
+  updateElement(props)
+}
 
-    // 设置图例位置/不显示
-    const updateLegend = (legend: '' | 'top' | 'bottom') => {
-      updateElement({ legend })
-    }
+// 设置网格颜色
+const updateGridColor = (gridColor: string) => {
+  updateElement({ gridColor })
+}
 
-    const openDataEditor = () => chartDataEditorVisible.value = true
+// 设置图例位置/不显示
+const updateLegend = (legend: '' | 'top' | 'bottom') => {
+  updateElement({ legend })
+}
 
-    emitter.on(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
-    onUnmounted(() => {
-      emitter.off(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
-    })
+const openDataEditor = () => chartDataEditorVisible.value = true
 
-    return {
-      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,
-    }
-  },
+emitter.on(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
+onUnmounted(() => {
+  emitter.off(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
 })
+
+// handleElement: handleElement as Ref<PPTChartElement>,
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
index a79e7bfd..6c3adc11 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
+++ b/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">
-import { defineComponent, Ref, ref } from 'vue'
+<script lang="ts" setup>
+import { Ref, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTImageElement, SlideBackground } from '@/types/slides'
@@ -105,175 +105,154 @@ 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 mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId } = storeToRefs(mainStore)
+const { currentSlide } = storeToRefs(slidesStore)
 
-    const clipPanelVisible = ref(false)
+const handleImageElement = handleElement as Ref<PPTImageElement>
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const clipPanelVisible = ref(false)
 
-    // 打开自由裁剪
-    const clipImage = () => {
-      mainStore.setClipingImageElementId(handleElementId.value)
-      clipPanelVisible.value = false
+const { addHistorySnapshot } = useHistorySnapshot()
+
+// 打开自由裁剪
+const clipImage = () => {
+  mainStore.setClipingImageElementId(handleElementId.value)
+  clipPanelVisible.value = false
+}
+
+// 获取原始图片的位置大小
+const getImageElementDataBeforeClip = () => {
+  const _handleElement = handleElement.value as PPTImageElement
+
+  // 图片当前的位置大小和裁剪范围
+  const imgWidth = _handleElement.width
+  const imgHeight = _handleElement.height
+  const imgLeft = _handleElement.left
+  const imgTop = _handleElement.top
+  const originClipRange: [[number, number], [number, number]] = _handleElement.clip ? _handleElement.clip.range : [[0, 0], [100, 100]]
+
+  const originWidth = imgWidth / ((originClipRange[1][0] - originClipRange[0][0]) / 100)
+  const originHeight = imgHeight / ((originClipRange[1][1] - originClipRange[0][1]) / 100)
+  const originLeft = imgLeft - originWidth * (originClipRange[0][0] / 100)
+  const originTop = imgTop - originHeight * (originClipRange[0][1] / 100)
+
+  return {
+    originClipRange,
+    originWidth,
+    originHeight,
+    originLeft,
+    originTop,
+  }
+}
+
+// 预设裁剪
+const presetImageClip = (shape: string, ratio = 0) => {
+  const _handleElement = handleElement.value as PPTImageElement
+
+  const {
+    originClipRange,
+    originWidth,
+    originHeight,
+    originLeft,
+    originTop,
+  } = getImageElementDataBeforeClip()
+  
+  // 纵横比裁剪（形状固定为矩形）
+  if (ratio) {
+    const imageRatio = originHeight / originWidth
+
+    const min = 0
+    const max = 100
+    let range: [[number, number], [number, number]]
+
+    if (imageRatio > ratio) {
+      const distance = ((1 - ratio / imageRatio) / 2) * 100
+      range = [[min, distance], [max, max - distance]]
     }
-
-    // 获取原始图片的位置大小
-    const getImageElementDataBeforeClip = () => {
-      const _handleElement = handleElement.value as PPTImageElement
-
-      // 图片当前的位置大小和裁剪范围
-      const imgWidth = _handleElement.width
-      const imgHeight = _handleElement.height
-      const imgLeft = _handleElement.left
-      const imgTop = _handleElement.top
-      const originClipRange: [[number, number], [number, number]] = _handleElement.clip ? _handleElement.clip.range : [[0, 0], [100, 100]]
-
-      const originWidth = imgWidth / ((originClipRange[1][0] - originClipRange[0][0]) / 100)
-      const originHeight = imgHeight / ((originClipRange[1][1] - originClipRange[0][1]) / 100)
-      const originLeft = imgLeft - originWidth * (originClipRange[0][0] / 100)
-      const originTop = imgTop - originHeight * (originClipRange[0][1] / 100)
-
-      return {
-        originClipRange,
-        originWidth,
-        originHeight,
-        originLeft,
-        originTop,
-      }
+    else {
+      const distance = ((1 - imageRatio / ratio) / 2) * 100
+      range = [[distance, min], [max - distance, max]]
     }
+    slidesStore.updateElement({
+      id: handleElementId.value,
+      props: {
+        clip: { ..._handleElement.clip, shape, range },
+        left: originLeft + originWidth * (range[0][0] / 100),
+        top: originTop + originHeight * (range[0][1] / 100),
+        width: originWidth * (range[1][0] - range[0][0]) / 100,
+        height: originHeight * (range[1][1] - range[0][1]) / 100,
+      },
+    })
+  }
+  // 形状裁剪（保持当前裁剪范围）
+  else {
+    slidesStore.updateElement({
+      id: handleElementId.value,
+      props: {
+        clip: { ..._handleElement.clip, shape, range: originClipRange }
+      },
+    })
+  }
+  clipImage()
+  addHistorySnapshot()
+}
 
-    // 预设裁剪
-    const presetImageClip = (shape: string, ratio = 0) => {
-      const _handleElement = handleElement.value as PPTImageElement
+// 替换图片（保持当前的样式）
+const replaceImage = (files: FileList) => {
+  const imageFile = files[0]
+  if (!imageFile) return
+  getImageDataURL(imageFile).then(dataURL => {
+    const props = { src: dataURL }
+    slidesStore.updateElement({ id: handleElementId.value, props })
+  })
+  addHistorySnapshot()
+}
 
-      const {
-        originClipRange,
-        originWidth,
-        originHeight,
-        originLeft,
-        originTop,
-      } = getImageElementDataBeforeClip()
-      
-      // 纵横比裁剪（形状固定为矩形）
-      if (ratio) {
-        const imageRatio = originHeight / originWidth
+// 重置图片：清除全部样式
+const resetImage = () => {
+  const _handleElement = handleElement.value as PPTImageElement
 
-        const min = 0
-        const max = 100
-        let range: [[number, number], [number, number]]
+  if (_handleElement.clip) {
+    const {
+      originWidth,
+      originHeight,
+      originLeft,
+      originTop,
+    } = getImageElementDataBeforeClip()
 
-        if (imageRatio > ratio) {
-          const distance = ((1 - ratio / imageRatio) / 2) * 100
-          range = [[min, distance], [max, max - distance]]
-        }
-        else {
-          const distance = ((1 - imageRatio / ratio) / 2) * 100
-          range = [[distance, min], [max - distance, max]]
-        }
-        slidesStore.updateElement({
-          id: handleElementId.value,
-          props: {
-            clip: { ..._handleElement.clip, shape, range },
-            left: originLeft + originWidth * (range[0][0] / 100),
-            top: originTop + originHeight * (range[0][1] / 100),
-            width: originWidth * (range[1][0] - range[0][0]) / 100,
-            height: originHeight * (range[1][1] - range[0][1]) / 100,
-          },
-        })
-      }
-      // 形状裁剪（保持当前裁剪范围）
-      else {
-        slidesStore.updateElement({
-          id: handleElementId.value,
-          props: {
-            clip: { ..._handleElement.clip, shape, range: originClipRange }
-          },
-        })
-      }
-      clipImage()
-      addHistorySnapshot()
-    }
+    slidesStore.updateElement({
+      id: handleElementId.value,
+      props: {
+        left: originLeft,
+        top: originTop,
+        width: originWidth,
+        height: originHeight,
+      },
+    })
+  }
 
-    // 替换图片（保持当前的样式）
-    const replaceImage = (files: File[]) => {
-      const imageFile = files[0]
-      if (!imageFile) return
-      getImageDataURL(imageFile).then(dataURL => {
-        const props = { src: dataURL }
-        slidesStore.updateElement({ id: handleElementId.value, props })
-      })
-      addHistorySnapshot()
-    }
+  slidesStore.removeElementProps({
+    id: handleElementId.value,
+    propName: ['clip', 'outline', 'flip', 'shadow', 'filters'],
+  })
+  addHistorySnapshot()
+}
 
-    // 重置图片：清除全部样式
-    const resetImage = () => {
-      const _handleElement = handleElement.value as PPTImageElement
+// 将图片设置为背景
+const setBackgroundImage = () => {
+  const _handleElement = handleElement.value as PPTImageElement
 
-      if (_handleElement.clip) {
-        const {
-          originWidth,
-          originHeight,
-          originLeft,
-          originTop,
-        } = getImageElementDataBeforeClip()
-
-        slidesStore.updateElement({
-          id: handleElementId.value,
-          props: {
-            left: originLeft,
-            top: originTop,
-            width: originWidth,
-            height: originHeight,
-          },
-        })
-      }
-
-      slidesStore.removeElementProps({
-        id: handleElementId.value,
-        propName: ['clip', 'outline', 'flip', 'shadow', 'filters'],
-      })
-      addHistorySnapshot()
-    }
-
-    // 将图片设置为背景
-    const setBackgroundImage = () => {
-      const _handleElement = handleElement.value as PPTImageElement
-
-      const background: SlideBackground = {
-        ...currentSlide.value.background,
-        type: 'image',
-        image: _handleElement.src,
-        imageSize: 'cover',
-      }
-      slidesStore.updateSlide({ background })
-      addHistorySnapshot()
-    }
-
-    return {
-      clipPanelVisible,
-      shapeClipPathOptions,
-      ratioClipOptions,
-      handleElement: handleElement as Ref<PPTImageElement>,
-      clipImage,
-      presetImageClip,
-      replaceImage,
-      resetImage,
-      setBackgroundImage,
-    }
-  },
-})
+  const background: SlideBackground = {
+    ...currentSlide.value.background,
+    type: 'image',
+    image: _handleElement.src,
+    imageSize: 'cover',
+  }
+  slidesStore.updateSlide({ background })
+  addHistorySnapshot()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
index cad459a9..26df4d85 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
+++ b/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">
-import { defineComponent, onUnmounted, Ref, ref } from 'vue'
+<script lang="ts" setup>
+import { onUnmounted, Ref, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTLatexElement } from '@/types/slides'
@@ -54,50 +54,36 @@ 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 slidesStore = useSlidesStore()
+const { handleElement } = storeToRefs(useMainStore())
 
-    const latexEditorVisible = ref(false)
+const handleLatexElement = handleElement as Ref<PPTLatexElement>
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const latexEditorVisible = ref(false)
 
-    const updateLatex = (props: Partial<PPTLatexElement>) => {
-      if (!handleElement.value) return
-      slidesStore.updateElement({ id: handleElement.value.id, props })
-      addHistorySnapshot()
-    }
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    const updateLatexData = (data: { path: string; latex: string; w: number; h: number; }) => {
-      updateLatex({
-        path: data.path,
-        latex: data.latex,
-        width: data.w,
-        height: data.h,
-        viewBox: [data.w, data.h],
-      })
-    }
+const updateLatex = (props: Partial<PPTLatexElement>) => {
+  if (!handleElement.value) return
+  slidesStore.updateElement({ id: handleElement.value.id, props })
+  addHistorySnapshot()
+}
 
-    const openLatexEditor = () => latexEditorVisible.value = true
+const updateLatexData = (data: { path: string; latex: string; w: number; h: number; }) => {
+  updateLatex({
+    path: data.path,
+    latex: data.latex,
+    width: data.w,
+    height: data.h,
+    viewBox: [data.w, data.h],
+  })
+}
 
-    emitter.on(EmitterEvents.OPEN_LATEX_EDITOR, openLatexEditor)
-    onUnmounted(() => {
-      emitter.off(EmitterEvents.OPEN_LATEX_EDITOR, openLatexEditor)
-    })
+const openLatexEditor = () => latexEditorVisible.value = true
 
-    return {
-      handleElement: handleElement as Ref<PPTLatexElement>,
-      latexEditorVisible,
-      updateLatex,
-      updateLatexData,
-    }
-  }
+emitter.on(EmitterEvents.OPEN_LATEX_EDITOR, openLatexEditor)
+onUnmounted(() => {
+  emitter.off(EmitterEvents.OPEN_LATEX_EDITOR, openLatexEditor)
 })
 </script>
 
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
index 1e9ebf03..1c4f5115 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
+++ b/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]" 
-        @change="value => updateLine({ points: [value as 'arrow' | 'dot', handleElement.points[1]] })"
+        :value="handleLineElement.points[0]" 
+        @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]" 
-        @change="value => updateLine({ points: [handleElement.points[0], value as 'arrow' | 'dot'] })"
+        :value="handleLineElement.points[1]" 
+        @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">
-import { defineComponent, Ref } from 'vue'
+<script lang="ts" setup>
+import { Ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTLineElement } from '@/types/slides'
@@ -72,30 +72,18 @@ 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 slidesStore = useSlidesStore()
+const { handleElement } = storeToRefs(useMainStore())
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const handleLineElement = handleElement as Ref<PPTLineElement>
 
-    const updateLine = (props: Partial<PPTLineElement>) => {
-      if (!handleElement.value) return
-      slidesStore.updateElement({ id: handleElement.value.id, props })
-      addHistorySnapshot()
-    }
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    return {
-      handleElement: handleElement as Ref<PPTLineElement>,
-      updateLine,
-    }
-  }
-})
+const updateLine = (props: Partial<PPTLineElement>) => {
+  if (!handleElement.value) return
+  slidesStore.updateElement({ id: handleElement.value.id, props })
+  addHistorySnapshot()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
index 05be9a58..88b03345 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
+++ b/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">
-import { defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElement, PPTElementOutline, TableCell } from '@/types/slides'
@@ -152,118 +152,96 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from '../common/ColorButton.vue'
 
-const webFonts = WEB_FONTS
+const slidesStore = useSlidesStore()
+const { richTextAttrs, availableFonts, activeElementList } = storeToRefs(useMainStore())
 
-export default defineComponent({
-  name: 'multi-style-panel',
-  components: {
-    ColorButton,
-  },
-  setup() {
-    const slidesStore = useSlidesStore()
-    const { richTextAttrs, availableFonts, activeElementList } = storeToRefs(useMainStore())
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const updateElement = (id: string, props: Partial<PPTElement>) => {
+  slidesStore.updateElement({ id, props })
+  addHistorySnapshot()
+}
 
-    const updateElement = (id: string, props: Partial<PPTElement>) => {
-      slidesStore.updateElement({ id, props })
-      addHistorySnapshot()
-    }
+const fontSizeOptions = [
+  '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
+  '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px',
+  '80px', '88px', '96px', '104px', '112px', '120px',
+]
 
-    const fontSizeOptions = [
-      '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
-      '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px',
-      '80px', '88px', '96px', '104px', '112px', '120px',
-    ]
+const fill = ref('#fff')
+const outline = ref<PPTElementOutline>({
+  width: 0,
+  color: '#fff',
+  style: 'solid',
+})
 
-    const fill = ref('#fff')
-    const outline = ref<PPTElementOutline>({
-      width: 0,
-      color: '#fff',
-      style: 'solid',
-    })
+// 批量修改填充色（表格元素为单元格填充、音频元素为图标颜色）
+const updateFill = (value: string) => {
+  for (const el of activeElementList.value) {
+    if (
+      el.type === 'text' ||
+      el.type === 'shape' ||
+      el.type === 'chart'
+    ) updateElement(el.id, { fill: value })
 
-    // 批量修改填充色（表格元素为单元格填充、音频元素为图标颜色）
-    const updateFill = (value: string) => {
-      for (const el of activeElementList.value) {
-        if (
-          el.type === 'text' ||
-          el.type === 'shape' ||
-          el.type === 'chart'
-        ) updateElement(el.id, { fill: value })
-
-        if (el.type === 'table') {
-          const data: TableCell[][] = JSON.parse(JSON.stringify(el.data))
-          for (let i = 0; i < data.length; i++) {
-            for (let j = 0; j < data[i].length; j++) {
-              const style = data[i][j].style || {}
-              data[i][j].style = { ...style, backcolor: value }
-            }
-          }
-          updateElement(el.id, { data })
-        }
-
-        if (el.type === 'audio') updateElement(el.id, { color: value })
-      }
-      fill.value = value
-    }
-
-    // 修改边框/线条样式
-    const updateOutline = (outlineProps: Partial<PPTElementOutline>) => {
-
-      for (const el of activeElementList.value) {
-        if (
-          el.type === 'text' ||
-          el.type === 'image' ||
-          el.type === 'shape' ||
-          el.type === 'table' ||
-          el.type === 'chart'
-        ) {
-          const outline = el.outline || { width: 2, color: '#000', style: 'solid' }
-          const props = { outline: { ...outline, ...outlineProps } }
-          updateElement(el.id, props)
-        }
-
-        if (el.type === 'line') updateElement(el.id, outlineProps)
-      }
-      outline.value = { ...outline.value, ...outlineProps }
-    }
-
-    // 修改文字样式
-    const updateFontStyle = (command: string, value: string) => {
-      for (const el of activeElementList.value) {
-        if (el.type === 'text' || (el.type === 'shape' && el.text?.content)) {
-          emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { target: el.id, action: { command, value } })
-        }
-        if (el.type === 'table') {
-          const data: TableCell[][] = JSON.parse(JSON.stringify(el.data))
-          for (let i = 0; i < data.length; i++) {
-            for (let j = 0; j < data[i].length; j++) {
-              const style = data[i][j].style || {}
-              data[i][j].style = { ...style, [command]: value }
-            }
-          }
-          updateElement(el.id, { data })
-        }
-        if (el.type === 'latex' && command === 'color') {
-          updateElement(el.id, { color: value })
+    if (el.type === 'table') {
+      const data: TableCell[][] = JSON.parse(JSON.stringify(el.data))
+      for (let i = 0; i < data.length; i++) {
+        for (let j = 0; j < data[i].length; j++) {
+          const style = data[i][j].style || {}
+          data[i][j].style = { ...style, backcolor: value }
         }
       }
+      updateElement(el.id, { data })
     }
 
-    return {
-      webFonts,
-      richTextAttrs,
-      availableFonts,
-      fontSizeOptions,
-      fill,
-      outline,
-      updateFill,
-      updateOutline,
-      updateFontStyle,
+    if (el.type === 'audio') updateElement(el.id, { color: value })
+  }
+  fill.value = value
+}
+
+// 修改边框/线条样式
+const updateOutline = (outlineProps: Partial<PPTElementOutline>) => {
+
+  for (const el of activeElementList.value) {
+    if (
+      el.type === 'text' ||
+      el.type === 'image' ||
+      el.type === 'shape' ||
+      el.type === 'table' ||
+      el.type === 'chart'
+    ) {
+      const outline = el.outline || { width: 2, color: '#000', style: 'solid' }
+      const props = { outline: { ...outline, ...outlineProps } }
+      updateElement(el.id, props)
+    }
+
+    if (el.type === 'line') updateElement(el.id, outlineProps)
+  }
+  outline.value = { ...outline.value, ...outlineProps }
+}
+
+// 修改文字样式
+const updateFontStyle = (command: string, value: string) => {
+  for (const el of activeElementList.value) {
+    if (el.type === 'text' || (el.type === 'shape' && el.text?.content)) {
+      emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { target: el.id, action: { command, value } })
+    }
+    if (el.type === 'table') {
+      const data: TableCell[][] = JSON.parse(JSON.stringify(el.data))
+      for (let i = 0; i < data.length; i++) {
+        for (let j = 0; j < data[i].length; j++) {
+          const style = data[i][j].style || {}
+          data[i][j].style = { ...style, [command]: value }
+        }
+      }
+      updateElement(el.id, { data })
+    }
+    if (el.type === 'latex' && command === 'color') {
+      updateElement(el.id, { color: value })
     }
   }
-})
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index 9f9e91be..46b69388 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/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">
-import { defineComponent, Ref, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTShapeElement, ShapeGradient, ShapeText } from '@/types/slides'
@@ -237,109 +237,80 @@ import ElementShadow from '../common/ElementShadow.vue'
 import ElementFlip from '../common/ElementFlip.vue'
 import ColorButton from '../common/ColorButton.vue'
 
-const webFonts = WEB_FONTS
+const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId, richTextAttrs, availableFonts } = storeToRefs(mainStore)
 
-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', 
-      rotate: 0,
-      color: ['#fff', '#fff'],
-    })
-    const fillType = ref('fill')
-    const textAlign = ref('middle')
-
-    watch(handleElement, () => {
-      if (!handleElement.value || handleElement.value.type !== 'shape') return
-
-      fill.value = handleElement.value.fill || '#fff'
-      gradient.value = handleElement.value.gradient || { type: 'linear', rotate: 0, color: [fill.value, '#fff'] }
-      fillType.value = handleElement.value.gradient ? 'gradient' : 'fill'
-      textAlign.value = handleElement.value?.text?.align || 'middle'
-    }, { deep: true, immediate: true })
-
-    const { addHistorySnapshot } = useHistorySnapshot()
-
-    const updateElement = (props: Partial<PPTShapeElement>) => {
-      slidesStore.updateElement({ id: handleElementId.value, props })
-      addHistorySnapshot()
-    }
-
-    // 设置填充类型：渐变、纯色
-    const updateFillType = (type: 'gradient' | 'fill') => {
-      if (type === 'fill') {
-        slidesStore.removeElementProps({ id: handleElementId.value, propName: 'gradient' })
-        addHistorySnapshot()
-      }
-      else updateElement({ gradient: gradient.value })
-    }
-
-    // 设置渐变填充
-    const updateGradient = (gradientProps: Partial<ShapeGradient>) => {
-      if (!gradient.value) return
-      const _gradient: ShapeGradient = { ...gradient.value, ...gradientProps }
-      updateElement({ gradient: _gradient })
-    }
-
-    // 设置填充色
-    const updateFill = (value: string) => {
-      updateElement({ fill: value })
-    }
-
-    const updateTextAlign = (align: 'top' | 'middle' | 'bottom') => {
-      const _handleElement = handleElement.value as PPTShapeElement
-      
-      const defaultText: ShapeText = {
-        content: '',
-        defaultFontName: '微软雅黑',
-        defaultColor: '#000',
-        align: 'middle',
-      }
-      const _text = _handleElement.text || defaultText
-      updateElement({ text: { ..._text, align } })
-    }
-
-    const fontSizeOptions = [
-      '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
-      '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px',
-      '80px', '88px', '96px', '104px', '112px', '120px',
-    ]
-
-    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,
-    }
-  },
+const fill = ref<string>('#000')
+const gradient = ref<ShapeGradient>({
+  type: 'linear', 
+  rotate: 0,
+  color: ['#fff', '#fff'],
 })
+const fillType = ref('fill')
+const textAlign = ref('middle')
+
+watch(handleElement, () => {
+  if (!handleElement.value || handleElement.value.type !== 'shape') return
+
+  fill.value = handleElement.value.fill || '#fff'
+  gradient.value = handleElement.value.gradient || { type: 'linear', rotate: 0, color: [fill.value, '#fff'] }
+  fillType.value = handleElement.value.gradient ? 'gradient' : 'fill'
+  textAlign.value = handleElement.value?.text?.align || 'middle'
+}, { deep: true, immediate: true })
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const updateElement = (props: Partial<PPTShapeElement>) => {
+  slidesStore.updateElement({ id: handleElementId.value, props })
+  addHistorySnapshot()
+}
+
+// 设置填充类型：渐变、纯色
+const updateFillType = (type: 'gradient' | 'fill') => {
+  if (type === 'fill') {
+    slidesStore.removeElementProps({ id: handleElementId.value, propName: 'gradient' })
+    addHistorySnapshot()
+  }
+  else updateElement({ gradient: gradient.value })
+}
+
+// 设置渐变填充
+const updateGradient = (gradientProps: Partial<ShapeGradient>) => {
+  if (!gradient.value) return
+  const _gradient: ShapeGradient = { ...gradient.value, ...gradientProps }
+  updateElement({ gradient: _gradient })
+}
+
+// 设置填充色
+const updateFill = (value: string) => {
+  updateElement({ fill: value })
+}
+
+const updateTextAlign = (align: 'top' | 'middle' | 'bottom') => {
+  const _handleElement = handleElement.value as PPTShapeElement
+  
+  const defaultText: ShapeText = {
+    content: '',
+    defaultFontName: '微软雅黑',
+    defaultColor: '#000',
+    align: 'middle',
+  }
+  const _text = _handleElement.text || defaultText
+  updateElement({ text: { ..._text, align } })
+}
+
+const fontSizeOptions = [
+  '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
+  '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px',
+  '80px', '88px', '96px', '104px', '112px', '120px',
+]
+
+const emitRichTextCommand = (command: string, value?: string) => {
+  emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index 2f274b90..c317b6af 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/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">
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { nanoid } from 'nanoid'
 import { useMainStore, useSlidesStore } from '@/store'
@@ -197,24 +197,63 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ElementOutline from '../common/ElementOutline.vue'
 import ColorButton from '../common/ColorButton.vue'
 
-const webFonts = WEB_FONTS
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId, selectedTableCells: selectedCells, availableFonts } = storeToRefs(useMainStore())
+const themeColor = computed(() => slidesStore.theme.themeColor)
 
-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)
-    
-    const fontSizeOptions = [
-      '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
-    ]
+const fontSizeOptions = [
+  '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
+]
 
-    const textAttrs = ref({
+const textAttrs = ref({
+  bold: false,
+  em: false,
+  underline: false,
+  strikethrough: false,
+  color: '#000',
+  backcolor: '#000',
+  fontsize: '12px',
+  fontname: '微软雅黑',
+  align: 'left',
+})
+
+const theme = ref<TableTheme>()
+const hasTheme = ref(false)
+const rowCount = ref(0)
+const colCount = ref(0)
+const minRowCount = ref(0)
+const minColCount = ref(0)
+
+watch(handleElement, () => {
+  if (!handleElement.value || handleElement.value.type !== 'table') return
+  
+  theme.value = handleElement.value.theme
+  hasTheme.value = !!theme.value
+
+  rowCount.value = handleElement.value.data.length
+  colCount.value = handleElement.value.data[0].length
+
+  minRowCount.value = handleElement.value.data.length
+  minColCount.value = handleElement.value.data[0].length
+}, { deep: true, immediate: true })
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+// 更新当前选中单元格的文本样式状态
+const updateTextAttrState = () => {
+  if (!handleElement.value || handleElement.value.type !== 'table') return
+
+  let rowIndex = 0
+  let colIndex = 0
+  if (selectedCells.value.length) {
+    const selectedCell = selectedCells.value[0]
+    rowIndex = +selectedCell.split('_')[0]
+    colIndex = +selectedCell.split('_')[1]
+  }
+  const style = handleElement.value.data[rowIndex][colIndex].style
+
+  if (!style) {
+    textAttrs.value = {
       bold: false,
       em: false,
       underline: false,
@@ -224,200 +263,132 @@ export default defineComponent({
       fontsize: '12px',
       fontname: '微软雅黑',
       align: 'left',
-    })
-
-    const theme = ref<TableTheme>()
-    const hasTheme = ref(false)
-    const rowCount = ref(0)
-    const colCount = ref(0)
-    const minRowCount = ref(0)
-    const minColCount = ref(0)
-
-    watch(handleElement, () => {
-      if (!handleElement.value || handleElement.value.type !== 'table') return
-      
-      theme.value = handleElement.value.theme
-      hasTheme.value = !!theme.value
-
-      rowCount.value = handleElement.value.data.length
-      colCount.value = handleElement.value.data[0].length
-
-      minRowCount.value = handleElement.value.data.length
-      minColCount.value = handleElement.value.data[0].length
-    }, { deep: true, immediate: true })
-
-    const { addHistorySnapshot } = useHistorySnapshot()
-
-    // 更新当前选中单元格的文本样式状态
-    const updateTextAttrState = () => {
-      if (!handleElement.value || handleElement.value.type !== 'table') return
-
-      let rowIndex = 0
-      let colIndex = 0
-      if (selectedCells.value.length) {
-        const selectedCell = selectedCells.value[0]
-        rowIndex = +selectedCell.split('_')[0]
-        colIndex = +selectedCell.split('_')[1]
-      }
-      const style = handleElement.value.data[rowIndex][colIndex].style
-
-      if (!style) {
-        textAttrs.value = {
-          bold: false,
-          em: false,
-          underline: false,
-          strikethrough: false,
-          color: '#000',
-          backcolor: '#000',
-          fontsize: '12px',
-          fontname: '微软雅黑',
-          align: 'left',
-        }
-      }
-      else {
-        textAttrs.value = {
-          bold: !!style.bold,
-          em: !!style.em,
-          underline: !!style.underline,
-          strikethrough: !!style.strikethrough,
-          color: style.color || '#000',
-          backcolor: style.backcolor || '#000',
-          fontsize: style.fontsize || '12px',
-          fontname: style.fontname || '微软雅黑',
-          align: style.align || 'left',
-        }
-      }
     }
-
-    onMounted(() => {
-      if (selectedCells.value.length) updateTextAttrState()
-    })
-
-    watch(selectedCells, updateTextAttrState)
-
-    const updateElement = (props: Partial<PPTTableElement>) => {
-      slidesStore.updateElement({ id: handleElementId.value, props })
-      addHistorySnapshot()
+  }
+  else {
+    textAttrs.value = {
+      bold: !!style.bold,
+      em: !!style.em,
+      underline: !!style.underline,
+      strikethrough: !!style.strikethrough,
+      color: style.color || '#000',
+      backcolor: style.backcolor || '#000',
+      fontsize: style.fontsize || '12px',
+      fontname: style.fontname || '微软雅黑',
+      align: style.align || 'left',
     }
+  }
+}
 
-    // 设置单元格内容文本样式
-    const updateTextAttrs = (textAttrProp: Partial<TableCellStyle>) => {
-      const _handleElement = handleElement.value as PPTTableElement
-
-      const data: TableCell[][] = JSON.parse(JSON.stringify(_handleElement.data))
-
-      for (let i = 0; i < data.length; i++) {
-        for (let j = 0; j < data[i].length; j++) {
-          if (!selectedCells.value.length || selectedCells.value.includes(`${i}_${j}`)) {
-            const style = data[i][j].style || {}
-            data[i][j].style = { ...style, ...textAttrProp }
-          }
-        }
-      }
-      updateElement({ data })
-      updateTextAttrState()
-    }
-
-    // 更新表格主题：主题色、标题行、汇总行、第一列、最后一列
-    const updateTheme = (themeProp: Partial<TableTheme>) => {
-      if (!theme.value) return
-      const _theme = { ...theme.value, ...themeProp }
-      updateElement({ theme: _theme })
-    }
-
-    // 开启/关闭表格主题
-    const toggleTheme = (checked: boolean) => {
-      if (checked) {
-        const props = {
-          theme: {
-            color: themeColor.value,
-            rowHeader: true,
-            rowFooter: false,
-            colHeader: false,
-            colFooter: false,
-          }
-        }
-        updateElement(props)
-      }
-      else {
-        slidesStore.removeElementProps({ id: handleElementId.value, propName: 'theme' })
-        addHistorySnapshot()
-      }
-    }
-
-    // 设置表格行数
-    const setTableRow = (value: number) => {
-      const _handleElement = handleElement.value as PPTTableElement
-      const rowCount = _handleElement.data.length
-
-      if (value > rowCount) {
-        const rowCells: TableCell[] = new Array(colCount.value).fill({ id: nanoid(10), colspan: 1, rowspan: 1, text: '' })
-        const newTableCells: TableCell[][] = new Array(value - rowCount).fill(rowCells)
-  
-        const tableCells: TableCell[][] = JSON.parse(JSON.stringify(_handleElement.data))
-        tableCells.push(...newTableCells)
-  
-        updateElement({ data: tableCells })
-      }
-      else {
-        const tableCells: TableCell[][] = _handleElement.data.slice(0, value)
-        updateElement({ data: tableCells })
-      }
-    }
-
-    // 设置表格列数
-    const setTableCol = (value: number) => {
-      const _handleElement = handleElement.value as PPTTableElement
-      const colCount = _handleElement.data[0].length
-
-      let tableCells = _handleElement.data
-      let colSizeList = _handleElement.colWidths.map(item => item * _handleElement.width)
-
-      if (value > colCount) {
-        tableCells = tableCells.map(item => {
-          const cells: TableCell[] = new Array(value - colCount).fill({ id: nanoid(10), colspan: 1, rowspan: 1, text: '' })
-          item.push(...cells)
-          return item
-        })
-  
-        const newColSizeList: number[] = new Array(value - colCount).fill(100)
-        colSizeList.push(...newColSizeList)
-      }
-      else {
-        tableCells = tableCells.map(item => item.slice(0, value))
-        colSizeList = colSizeList.slice(0, value)
-      }
-
-      const width = colSizeList.reduce((a, b) => a + b)
-      const colWidths = colSizeList.map(item => item / width)
-
-      const props = {
-        width,
-        data: tableCells,
-        colWidths,
-      }
-      updateElement(props)
-    }
-
-    return {
-      availableFonts,
-      fontSizeOptions,
-      textAttrs,
-      updateTextAttrs,
-      theme,
-      rowCount,
-      colCount,
-      minRowCount,
-      minColCount,
-      hasTheme,
-      toggleTheme,
-      updateTheme,
-      setTableRow,
-      setTableCol,
-      webFonts,
-    }
-  },
+onMounted(() => {
+  if (selectedCells.value.length) updateTextAttrState()
 })
+
+watch(selectedCells, updateTextAttrState)
+
+const updateElement = (props: Partial<PPTTableElement>) => {
+  slidesStore.updateElement({ id: handleElementId.value, props })
+  addHistorySnapshot()
+}
+
+// 设置单元格内容文本样式
+const updateTextAttrs = (textAttrProp: Partial<TableCellStyle>) => {
+  const _handleElement = handleElement.value as PPTTableElement
+
+  const data: TableCell[][] = JSON.parse(JSON.stringify(_handleElement.data))
+
+  for (let i = 0; i < data.length; i++) {
+    for (let j = 0; j < data[i].length; j++) {
+      if (!selectedCells.value.length || selectedCells.value.includes(`${i}_${j}`)) {
+        const style = data[i][j].style || {}
+        data[i][j].style = { ...style, ...textAttrProp }
+      }
+    }
+  }
+  updateElement({ data })
+  updateTextAttrState()
+}
+
+// 更新表格主题：主题色、标题行、汇总行、第一列、最后一列
+const updateTheme = (themeProp: Partial<TableTheme>) => {
+  if (!theme.value) return
+  const _theme = { ...theme.value, ...themeProp }
+  updateElement({ theme: _theme })
+}
+
+// 开启/关闭表格主题
+const toggleTheme = (checked: boolean) => {
+  if (checked) {
+    const props = {
+      theme: {
+        color: themeColor.value,
+        rowHeader: true,
+        rowFooter: false,
+        colHeader: false,
+        colFooter: false,
+      }
+    }
+    updateElement(props)
+  }
+  else {
+    slidesStore.removeElementProps({ id: handleElementId.value, propName: 'theme' })
+    addHistorySnapshot()
+  }
+}
+
+// 设置表格行数
+const setTableRow = (value: number) => {
+  const _handleElement = handleElement.value as PPTTableElement
+  const rowCount = _handleElement.data.length
+
+  if (value > rowCount) {
+    const rowCells: TableCell[] = new Array(colCount.value).fill({ id: nanoid(10), colspan: 1, rowspan: 1, text: '' })
+    const newTableCells: TableCell[][] = new Array(value - rowCount).fill(rowCells)
+  
+    const tableCells: TableCell[][] = JSON.parse(JSON.stringify(_handleElement.data))
+    tableCells.push(...newTableCells)
+  
+    updateElement({ data: tableCells })
+  }
+  else {
+    const tableCells: TableCell[][] = _handleElement.data.slice(0, value)
+    updateElement({ data: tableCells })
+  }
+}
+
+// 设置表格列数
+const setTableCol = (value: number) => {
+  const _handleElement = handleElement.value as PPTTableElement
+  const colCount = _handleElement.data[0].length
+
+  let tableCells = _handleElement.data
+  let colSizeList = _handleElement.colWidths.map(item => item * _handleElement.width)
+
+  if (value > colCount) {
+    tableCells = tableCells.map(item => {
+      const cells: TableCell[] = new Array(value - colCount).fill({ id: nanoid(10), colspan: 1, rowspan: 1, text: '' })
+      item.push(...cells)
+      return item
+    })
+  
+    const newColSizeList: number[] = new Array(value - colCount).fill(100)
+    colSizeList.push(...newColSizeList)
+  }
+  else {
+    tableCells = tableCells.map(item => item.slice(0, value))
+    colSizeList = colSizeList.slice(0, value)
+  }
+
+  const width = colSizeList.reduce((a, b) => a + b)
+  const colWidths = colSizeList.map(item => item / width)
+
+  const props = {
+    width,
+    data: tableCells,
+    colWidths,
+  }
+  updateElement(props)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index 9e1628a4..45217df8 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/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">
-import { defineComponent, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTTextElement } from '@/types/slides'
@@ -358,136 +358,95 @@ const presetStyles = [
   },
 ]
 
-const webFonts = WEB_FONTS
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId, richTextAttrs, availableFonts } = storeToRefs(useMainStore())
 
-export default defineComponent({
-  name: 'text-style-panel',
-  components: {
-    ElementOpacity,
-    ElementOutline,
-    ElementShadow,
-    ColorButton,
-  },
-  setup() {
-    const slidesStore = useSlidesStore()
-    const { handleElement, handleElementId, richTextAttrs, availableFonts } = storeToRefs(useMainStore())
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const updateElement = (props: Partial<PPTTextElement>) => {
+  slidesStore.updateElement({ id: handleElementId.value, props })
+  addHistorySnapshot()
+}
 
-    const updateElement = (props: Partial<PPTTextElement>) => {
-      slidesStore.updateElement({ id: handleElementId.value, props })
-      addHistorySnapshot()
-    }
+const fill = ref<string>('#000')
+const lineHeight = ref<number>()
+const wordSpace = ref<number>()
+const textIndent = ref<number>()
+const paragraphSpace = ref<number>()
 
-    const fill = ref<string>('#000')
-    const lineHeight = ref<number>()
-    const wordSpace = ref<number>()
-    const textIndent = ref<number>()
-    const paragraphSpace = ref<number>()
+watch(handleElement, () => {
+  if (!handleElement.value || handleElement.value.type !== 'text') return
 
-    watch(handleElement, () => {
-      if (!handleElement.value || handleElement.value.type !== 'text') return
+  fill.value = handleElement.value.fill || '#fff'
+  lineHeight.value = handleElement.value.lineHeight || 1.5
+  wordSpace.value = handleElement.value.wordSpace || 0
+  textIndent.value = handleElement.value.textIndent || 0
+  paragraphSpace.value = handleElement.value.paragraphSpace === undefined ? 5 : handleElement.value.paragraphSpace
+}, { deep: true, immediate: true })
 
-      fill.value = handleElement.value.fill || '#fff'
-      lineHeight.value = handleElement.value.lineHeight || 1.5
-      wordSpace.value = handleElement.value.wordSpace || 0
-      textIndent.value = handleElement.value.textIndent || 0
-      paragraphSpace.value = handleElement.value.paragraphSpace === undefined ? 5 : handleElement.value.paragraphSpace
-    }, { deep: true, immediate: true })
+const fontSizeOptions = [
+  '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
+  '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px',
+  '80px', '88px', '96px', '104px', '112px', '120px',
+]
+const lineHeightOptions = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0]
+const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 6, 8, 10]
+const textIndentOptions = [0, 48, 96, 144, 192, 240, 288, 336]
+const paragraphSpaceOptions = [0, 5, 10, 15, 20, 25, 30, 40, 50, 80]
 
-    const fontSizeOptions = [
-      '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
-      '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px',
-      '80px', '88px', '96px', '104px', '112px', '120px',
-    ]
-    const lineHeightOptions = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0]
-    const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 6, 8, 10]
-    const textIndentOptions = [0, 48, 96, 144, 192, 240, 288, 336]
-    const paragraphSpaceOptions = [0, 5, 10, 15, 20, 25, 30, 40, 50, 80]
+// 设置行高
+const updateLineHeight = (value: number) => {
+  updateElement({ lineHeight: value })
+}
 
-    // 设置行高
-    const updateLineHeight = (value: number) => {
-      updateElement({ lineHeight: value })
-    }
+// 设置段间距
+const updateParagraphSpace = (value: number) => {
+  updateElement({ paragraphSpace: value })
+}
 
-    // 设置段间距
-    const updateParagraphSpace = (value: number) => {
-      updateElement({ paragraphSpace: value })
-    }
+// 设置字间距
+const updateWordSpace = (value: number) => {
+  updateElement({ wordSpace: value })
+}
 
-    // 设置字间距
-    const updateWordSpace = (value: number) => {
-      updateElement({ wordSpace: value })
-    }
+// 设置首行缩进
+const updateTextIndent = (value: number) => {
+  updateElement({ textIndent: value })
+}
 
-    // 设置首行缩进
-    const updateTextIndent = (value: number) => {
-      updateElement({ textIndent: value })
-    }
+// 设置文本框填充
+const updateFill = (value: string) => {
+  updateElement({ fill: value })
+}
 
-    // 设置文本框填充
-    const updateFill = (value: string) => {
-      updateElement({ fill: value })
-    }
+// 发射富文本设置命令
+const emitRichTextCommand = (command: string, value?: string) => {
+  emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
+}
 
-    // 发射富文本设置命令
-    const emitRichTextCommand = (command: string, value?: string) => {
-      emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
-    }
+// 发射富文本设置命令（批量）
+const emitBatchRichTextCommand = (action: RichTextAction[]) => {
+  emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action })
+}
 
-    // 发射富文本设置命令（批量）
-    const emitBatchRichTextCommand = (action: RichTextAction[]) => {
-      emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action })
-    }
+// 设置富文本超链接
+const link = ref('')
+const linkPopoverVisible = ref(false)
 
-    // 设置富文本超链接
-    const link = ref('')
-    const linkPopoverVisible = ref(false)
+watch(richTextAttrs, () => linkPopoverVisible.value = false)
 
-    watch(richTextAttrs, () => linkPopoverVisible.value = false)
-
-    const openLinkPopover = () => {
-      link.value = richTextAttrs.value.link
-      linkPopoverVisible.value = true
-    }
-    const updateLink = (link?: string) => {
-      if (link) {
-        const linkRegExp = /^(https?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/
-        if (!linkRegExp.test(link)) return message.error('不是正确的网页链接地址')
-      }
-      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,
-    }
-  },
-})
+const openLinkPopover = () => {
+  link.value = richTextAttrs.value.link
+  linkPopoverVisible.value = true
+}
+const updateLink = (link?: string) => {
+  if (link) {
+    const linkRegExp = /^(https?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/
+    if (!linkRegExp.test(link)) return message.error('不是正确的网页链接地址')
+  }
+  emitRichTextCommand('link', link)
+  linkPopoverVisible.value = false
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
index 8a9460fd..8fc9b935 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
+++ b/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,42 +14,33 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+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 slidesStore = useSlidesStore()
+const { handleElement } = storeToRefs(useMainStore())
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const handleVideoElement = handleElement as Ref<PPTVideoElement>
 
-    const updateVideo = (props: Partial<PPTVideoElement>) => {
-      if (!handleElement.value) return
-      slidesStore.updateElement({ id: handleElement.value.id, props })
-      addHistorySnapshot()
-    }
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    // 设置视频预览封面
-    const setVideoPoster = (files: File[]) => {
-      const imageFile = files[0]
-      if (!imageFile) return
-      getImageDataURL(imageFile).then(dataURL => updateVideo({ poster: dataURL }))
-    }
+const updateVideo = (props: Partial<PPTVideoElement>) => {
+  if (!handleElement.value) return
+  slidesStore.updateElement({ id: handleElement.value.id, props })
+  addHistorySnapshot()
+}
 
-    return {
-      handleElement,
-      updateVideo,
-      setVideoPoster,
-    }
-  }
-})
+// 设置视频预览封面
+const setVideoPoster = (files: FileList) => {
+  const imageFile = files[0]
+  if (!imageFile) return
+  getImageDataURL(imageFile).then(dataURL => updateVideo({ poster: dataURL }))
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/index.vue
index 53d6e8eb..a252a940 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/index.vue
@@ -4,8 +4,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { ElementTypes } from '@/types/slides'
@@ -33,26 +33,16 @@ const panelMap = {
   [ElementTypes.AUDIO]: AudioStylePanel,
 }
 
-export default defineComponent({
-  name: 'element-style-panel',
-  setup() {
-    const { activeElementIdList, activeElementList, handleElement, activeGroupElementId } = storeToRefs(useMainStore())
+const { activeElementIdList, activeElementList, handleElement, activeGroupElementId } = storeToRefs(useMainStore())
 
-    const currentPanelComponent = computed(() => {
-      if (activeElementIdList.value.length > 1) {
-        if (!activeGroupElementId.value) return MultiStylePanel
+const currentPanelComponent = computed(() => {
+  if (activeElementIdList.value.length > 1) {
+    if (!activeGroupElementId.value) return MultiStylePanel
 
-        const activeGroupElement = activeElementList.value.find(item => item.id === activeGroupElementId.value)
-        return activeGroupElement ? (panelMap[activeGroupElement.type] || null) : null
-      }
+    const activeGroupElement = activeElementList.value.find(item => item.id === activeGroupElementId.value)
+    return activeGroupElement ? (panelMap[activeGroupElement.type] || null) : null
+  }
 
-      return handleElement.value ? (panelMap[handleElement.value.type] || null) : null
-    })
-
-    return {
-      handleElement,
-      currentPanelComponent,
-    }
-  },
+  return handleElement.value ? (panelMap[handleElement.value.type] || null) : null
 })
 </script>
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/MultiPositionPanel.vue b/src/views/Editor/Toolbar/MultiPositionPanel.vue
index 80b99847..707e1824 100644
--- a/src/views/Editor/Toolbar/MultiPositionPanel.vue
+++ b/src/views/Editor/Toolbar/MultiPositionPanel.vue
@@ -36,42 +36,25 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 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()
-    const { displayItemCount, uniformHorizontalDisplay, uniformVerticalDisplay } = useUniformDisplayElement()
+const { canCombine, combineElements, uncombineElements } = useCombineElement()
+const { alignActiveElement } = useAlignActiveElement()
+const { alignElementToCanvas } = useAlignElementToCanvas()
+const { displayItemCount, uniformHorizontalDisplay, uniformVerticalDisplay } = useUniformDisplayElement()
 
-    // 多选元素对齐，需要先判断当前所选中的元素状态：
-    // 如果所选元素为一组组合元素，则将它对齐到画布；
-    // 如果所选元素不是组合元素或不止一组元素（即当前为可组合状态），则将这多个（多组）元素相互对齐。
-    const alignElement = (command: ElementAlignCommands) => {
-      if (canCombine.value) alignActiveElement(command)
-      else alignElementToCanvas(command)
-    }
-
-    return {
-      canCombine,
-      displayItemCount,
-      combineElements,
-      uncombineElements,
-      uniformHorizontalDisplay,
-      uniformVerticalDisplay,
-      alignElement,
-      ElementAlignCommands,
-    }
-  },
-})
+// 多选元素对齐，需要先判断当前所选中的元素状态：
+// 如果所选元素为一组组合元素，则将它对齐到画布；
+// 如果所选元素不是组合元素或不止一组元素（即当前为可组合状态），则将这多个（多组）元素相互对齐。
+const alignElement = (command: ElementAlignCommands) => {
+  if (canCombine.value) alignActiveElement(command)
+  else alignElementToCanvas(command)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/SlideAnimationPanel.vue b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
index a77b76a0..163e77b3 100644
--- a/src/views/Editor/Toolbar/SlideAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
@@ -16,8 +16,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { TurningMode } from '@/types/slides'
@@ -28,50 +28,38 @@ interface Animations {
   value: TurningMode
 }
 
-export default defineComponent({
-  name: 'slide-animation-panel',
-  setup() {
-    const slidesStore = useSlidesStore()
-    const { slides, currentSlide } = storeToRefs(slidesStore)
+const slidesStore = useSlidesStore()
+const { slides, currentSlide } = storeToRefs(slidesStore)
 
-    const currentTurningMode = computed(() => currentSlide.value.turningMode || 'slideY')
+const currentTurningMode = computed(() => currentSlide.value.turningMode || 'slideY')
 
-    const animations: Animations[] = [
-      { label: '无', value: 'no' },
-      { label: '淡入淡出', value: 'fade' },
-      { label: '左右推移', value: 'slideX' },
-      { label: '上下推移', value: 'slideY' },
-    ]
+const animations: Animations[] = [
+  { label: '无', value: 'no' },
+  { label: '淡入淡出', value: 'fade' },
+  { label: '左右推移', value: 'slideX' },
+  { label: '上下推移', value: 'slideY' },
+]
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    // 修改播放时的切换页面方式
-    const updateTurningMode = (mode: TurningMode) => {
-      if (mode === currentTurningMode.value) return
-      slidesStore.updateSlide({ turningMode: mode })
-      addHistorySnapshot()
-    }
-
-    // 将当前页的切换页面方式应用到全部页面
-    const applyAllSlide = () => {
-      const newSlides = slides.value.map(slide => {
-        return {
-          ...slide,
-          turningMode: currentSlide.value.turningMode,
-        }
-      })
-      slidesStore.setSlides(newSlides)
-      addHistorySnapshot()
-    }
+// 修改播放时的切换页面方式
+const updateTurningMode = (mode: TurningMode) => {
+  if (mode === currentTurningMode.value) return
+  slidesStore.updateSlide({ turningMode: mode })
+  addHistorySnapshot()
+}
 
+// 将当前页的切换页面方式应用到全部页面
+const applyAllSlide = () => {
+  const newSlides = slides.value.map(slide => {
     return {
-      currentTurningMode,
-      animations,
-      updateTurningMode,
-      applyAllSlide,
+      ...slide,
+      turningMode: currentSlide.value.turningMode,
     }
-  },
-})
+  })
+  slidesStore.setSlides(newSlides)
+  addHistorySnapshot()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue
index 6b74f35a..43da7c2d 100644
--- a/src/views/Editor/Toolbar/SlideDesignPanel.vue
+++ b/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">
-import { computed, defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { Slide, SlideBackground, SlideTheme } from '@/types/slides'
@@ -203,169 +203,140 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ColorButton from './common/ColorButton.vue'
 import { getImageDataURL } from '@/utils/image'
 
-const themes = PRESET_THEMES
-const webFonts = WEB_FONTS
+const slidesStore = useSlidesStore()
+const { availableFonts } = storeToRefs(useMainStore())
+const { slides, currentSlide, viewportRatio, theme } = storeToRefs(slidesStore)
 
-export default defineComponent({
-  name: 'slide-design-panel',
-  components: {
-    ColorButton,
-  },
-  setup() {
-    const slidesStore = useSlidesStore()
-    const { availableFonts } = storeToRefs(useMainStore())
-    const { slides, currentSlide, viewportRatio, theme } = storeToRefs(slidesStore)
+const background = computed(() => {
+  if (!currentSlide.value.background) {
+    return {
+      type: 'solid',
+      value: '#fff',
+    } as SlideBackground
+  }
+  return currentSlide.value.background
+})
 
-    const background = computed(() => {
-      if (!currentSlide.value.background) {
-        return {
-          type: 'solid',
-          value: '#fff',
-        } as SlideBackground
+const { addHistorySnapshot } = useHistorySnapshot()
+
+// 设置背景模式：纯色、图片、渐变色
+const updateBackgroundType = (type: 'solid' | 'image' | 'gradient') => {
+  if (type === 'solid') {
+    const newBackground: SlideBackground = {
+      ...background.value,
+      type: 'solid',
+      color: background.value.color || '#fff',
+    }
+    slidesStore.updateSlide({ background: newBackground })
+  }
+  else if (type === 'image') {
+    const newBackground: SlideBackground = {
+      ...background.value,
+      type: 'image',
+      image: background.value.image || '',
+      imageSize: background.value.imageSize || 'cover',
+    }
+    slidesStore.updateSlide({ background: newBackground })
+  }
+  else {
+    const newBackground: SlideBackground = {
+      ...background.value,
+      type: 'gradient',
+      gradientType: background.value.gradientType || 'linear',
+      gradientColor: background.value.gradientColor || ['#fff', '#fff'],
+      gradientRotate: background.value.gradientRotate || 0,
+    }
+    slidesStore.updateSlide({ background: newBackground })
+  }
+  addHistorySnapshot()
+}
+
+// 设置背景图片
+const updateBackground = (props: Partial<SlideBackground>) => {
+  slidesStore.updateSlide({ background: { ...background.value, ...props } })
+  addHistorySnapshot()
+}
+
+// 上传背景图片
+const uploadBackgroundImage = (files: FileList) => {
+  const imageFile = files[0]
+  if (!imageFile) return
+  getImageDataURL(imageFile).then(dataURL => updateBackground({ image: dataURL }))
+}
+
+// 应用当前页背景到全部页面
+const applyBackgroundAllSlide = () => {
+  const newSlides = slides.value.map(slide => {
+    return {
+      ...slide,
+      background: currentSlide.value.background,
+    }
+  })
+  slidesStore.setSlides(newSlides)
+  addHistorySnapshot()
+}
+
+// 设置主题
+const updateTheme = (themeProps: Partial<SlideTheme>) => {
+  slidesStore.setTheme(themeProps)
+}
+
+// 将当前主题应用到全部页面
+const applyThemeAllSlide = () => {
+  const newSlides: Slide[] = JSON.parse(JSON.stringify(slides.value))
+  const { themeColor, backgroundColor, fontColor, fontName } = theme.value
+
+  for (const slide of newSlides) {
+    if (!slide.background || slide.background.type !== 'image') {
+      slide.background = {
+        ...slide.background,
+        type: 'solid',
+        color: backgroundColor
       }
-      return currentSlide.value.background
-    })
+    }
 
-    const { addHistorySnapshot } = useHistorySnapshot()
-
-    // 设置背景模式：纯色、图片、渐变色
-    const updateBackgroundType = (type: 'solid' | 'image' | 'gradient') => {
-      if (type === 'solid') {
-        const newBackground: SlideBackground = {
-          ...background.value,
-          type: 'solid',
-          color: background.value.color || '#fff',
-        }
-        slidesStore.updateSlide({ background: newBackground })
+    const elements = slide.elements
+    for (const el of elements) {
+      if (el.type === 'shape') el.fill = themeColor
+      else if (el.type === 'line') el.color = themeColor
+      else if (el.type === 'text') {
+        el.defaultColor = fontColor
+        el.defaultFontName = fontName
+        if (el.fill) el.fill = themeColor
       }
-      else if (type === 'image') {
-        const newBackground: SlideBackground = {
-          ...background.value,
-          type: 'image',
-          image: background.value.image || '',
-          imageSize: background.value.imageSize || 'cover',
-        }
-        slidesStore.updateSlide({ background: newBackground })
-      }
-      else {
-        const newBackground: SlideBackground = {
-          ...background.value,
-          type: 'gradient',
-          gradientType: background.value.gradientType || 'linear',
-          gradientColor: background.value.gradientColor || ['#fff', '#fff'],
-          gradientRotate: background.value.gradientRotate || 0,
-        }
-        slidesStore.updateSlide({ background: newBackground })
-      }
-      addHistorySnapshot()
-    }
-
-    // 设置背景图片
-    const updateBackground = (props: Partial<SlideBackground>) => {
-      slidesStore.updateSlide({ background: { ...background.value, ...props } })
-      addHistorySnapshot()
-    }
-
-    // 上传背景图片
-    const uploadBackgroundImage = (files: File[]) => {
-      const imageFile = files[0]
-      if (!imageFile) return
-      getImageDataURL(imageFile).then(dataURL => updateBackground({ image: dataURL }))
-    }
-
-    // 应用当前页背景到全部页面
-    const applyBackgroundAllSlide = () => {
-      const newSlides = slides.value.map(slide => {
-        return {
-          ...slide,
-          background: currentSlide.value.background,
-        }
-      })
-      slidesStore.setSlides(newSlides)
-      addHistorySnapshot()
-    }
-
-    // 设置主题
-    const updateTheme = (themeProps: Partial<SlideTheme>) => {
-      slidesStore.setTheme(themeProps)
-    }
-
-    // 将当前主题应用到全部页面
-    const applyThemeAllSlide = () => {
-      const newSlides: Slide[] = JSON.parse(JSON.stringify(slides.value))
-      const { themeColor, backgroundColor, fontColor, fontName } = theme.value
-
-      for (const slide of newSlides) {
-        if (!slide.background || slide.background.type !== 'image') {
-          slide.background = {
-            ...slide.background,
-            type: 'solid',
-            color: backgroundColor
-          }
-        }
-
-        const elements = slide.elements
-        for (const el of elements) {
-          if (el.type === 'shape') el.fill = themeColor
-          else if (el.type === 'line') el.color = themeColor
-          else if (el.type === 'text') {
-            el.defaultColor = fontColor
-            el.defaultFontName = fontName
-            if (el.fill) el.fill = themeColor
-          }
-          else if (el.type === 'table') {
-            if (el.theme) el.theme.color = themeColor
-            for (const rowCells of el.data) {
-              for (const cell of rowCells) {
-                if (cell.style) {
-                  cell.style.color = fontColor
-                  cell.style.fontname = fontName
-                }
-              }
+      else if (el.type === 'table') {
+        if (el.theme) el.theme.color = themeColor
+        for (const rowCells of el.data) {
+          for (const cell of rowCells) {
+            if (cell.style) {
+              cell.style.color = fontColor
+              cell.style.fontname = fontName
             }
           }
-          else if (el.type === 'chart') {
-            el.themeColor = [themeColor]
-            el.gridColor = fontColor
-          }
-          else if (el.type === 'latex') el.color = fontColor
-          else if (el.type === 'audio') el.color = themeColor
         }
       }
-      slidesStore.setSlides(newSlides)
-      addHistorySnapshot()
+      else if (el.type === 'chart') {
+        el.themeColor = [themeColor]
+        el.gridColor = fontColor
+      }
+      else if (el.type === 'latex') el.color = fontColor
+      else if (el.type === 'audio') el.color = themeColor
     }
+  }
+  slidesStore.setSlides(newSlides)
+  addHistorySnapshot()
+}
 
-    // 是否显示预设主题
-    const showPresetThemes = ref(true)
-    const togglePresetThemesVisible = () => {
-      showPresetThemes.value = !showPresetThemes.value
-    }
+// 是否显示预设主题
+const showPresetThemes = ref(true)
+const togglePresetThemesVisible = () => {
+  showPresetThemes.value = !showPresetThemes.value
+}
 
-    // 设置画布尺寸（宽高比例）
-    const updateViewportRatio = (value: number) => {
-      slidesStore.setViewportRatio(value)
-    }
-
-    return {
-      availableFonts,
-      background,
-      updateBackgroundType,
-      updateBackground,
-      uploadBackgroundImage,
-      applyBackgroundAllSlide,
-      themes,
-      theme,
-      webFonts,
-      updateTheme,
-      applyThemeAllSlide,
-      viewportRatio,
-      updateViewportRatio,
-      showPresetThemes,
-      togglePresetThemesVisible,
-    }
-  },
-})
+// 设置画布尺寸（宽高比例）
+const updateViewportRatio = (value: number) => {
+  slidesStore.setViewportRatio(value)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/SymbolPanel.vue b/src/views/Editor/Toolbar/SymbolPanel.vue
index 3686406d..c79e6483 100644
--- a/src/views/Editor/Toolbar/SymbolPanel.vue
+++ b/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">
-import { computed, defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
 import { SYMBOL_LIST } from '@/configs/symbol'
 import emitter, { EmitterEvents } from '@/utils/emitter'
 
-const symbolPoolList = SYMBOL_LIST
-
-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)
-      return selectedSymbol?.children || []
-    })
-
-    const selectSymbol = (value: string) => {
-      emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command: 'insert', value } })
-    }
-
-    return {
-      symbolPoolList,
-      symbolPool,
-      selectedSymbolKey,
-      selectSymbol,
-    }
-  },
+const selectedSymbolKey = ref(SYMBOL_LIST[0].key)
+const symbolPool = computed(() => {
+  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 } })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/common/ColorButton.vue b/src/views/Editor/Toolbar/common/ColorButton.vue
index d4baff0d..131df430 100644
--- a/src/views/Editor/Toolbar/common/ColorButton.vue
+++ b/src/views/Editor/Toolbar/common/ColorButton.vue
@@ -7,16 +7,11 @@
   </Button>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'color-button',
-  props: {
-    color: {
-      type: String,
-      required: true,
-    },
+<script lang="ts" setup>
+defineProps({
+  color: {
+    type: String,
+    required: true,
   },
 })
 </script>
diff --git a/src/views/Editor/Toolbar/common/ElementFilter.vue b/src/views/Editor/Toolbar/common/ElementFilter.vue
index 2ac76352..fa064e33 100644
--- a/src/views/Editor/Toolbar/common/ElementFilter.vue
+++ b/src/views/Editor/Toolbar/common/ElementFilter.vue
@@ -25,8 +25,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTImageElement } from '@/types/slides'
@@ -52,63 +52,51 @@ 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())
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId } = storeToRefs(useMainStore())
 
-    const filterOptions = ref<FilterOption[]>(JSON.parse(JSON.stringify(defaultFilters)))
-    const hasFilters = ref(false)
+const filterOptions = ref<FilterOption[]>(JSON.parse(JSON.stringify(defaultFilters)))
+const hasFilters = ref(false)
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    watch(handleElement, () => {
-      if (!handleElement.value || handleElement.value.type !== 'image') return
-      
-      const filters = handleElement.value.filters
-      if (filters) {
-        filterOptions.value = defaultFilters.map(item => {
-          if (filters[item.key] !== undefined) return { ...item, value: parseInt(filters[item.key]) }
-          return item
-        })
-        hasFilters.value = true
-      }
-      else {
-        filterOptions.value = JSON.parse(JSON.stringify(defaultFilters))
-        hasFilters.value = false
-      }
-    }, { deep: true, immediate: true })
+watch(handleElement, () => {
+  if (!handleElement.value || handleElement.value.type !== 'image') return
+  
+  const filters = handleElement.value.filters
+  if (filters) {
+    filterOptions.value = defaultFilters.map(item => {
+      if (filters[item.key] !== undefined) return { ...item, value: parseInt(filters[item.key]) }
+      return item
+    })
+    hasFilters.value = true
+  }
+  else {
+    filterOptions.value = JSON.parse(JSON.stringify(defaultFilters))
+    hasFilters.value = false
+  }
+}, { deep: true, immediate: true })
 
-    // 设置滤镜
-    const updateFilter = (filter: FilterOption, value: number) => {
-      const _handleElement = handleElement.value as PPTImageElement
-      
-      const originFilters = _handleElement.filters || {}
-      const filters = { ...originFilters, [filter.key]: `${value}${filter.unit}` }
-      slidesStore.updateElement({ id: handleElementId.value, props: { filters } })
-      addHistorySnapshot()
-    }
+// 设置滤镜
+const updateFilter = (filter: FilterOption, value: number) => {
+  const _handleElement = handleElement.value as PPTImageElement
+  
+  const originFilters = _handleElement.filters || {}
+  const filters = { ...originFilters, [filter.key]: `${value}${filter.unit}` }
+  slidesStore.updateElement({ id: handleElementId.value, props: { filters } })
+  addHistorySnapshot()
+}
 
-    const toggleFilters = (checked: boolean) => {
-      if (!handleElement.value) return
-      if (checked) {
-        slidesStore.updateElement({ id: handleElement.value.id, props: { filters: {} } })
-      }
-      else {
-        slidesStore.removeElementProps({ id: handleElement.value.id, propName: 'filters' })
-      }
-      addHistorySnapshot()
-    }
-
-    return {
-      filterOptions,
-      hasFilters,
-      toggleFilters,
-      updateFilter,
-    }
-  },
-})
+const toggleFilters = (checked: boolean) => {
+  if (!handleElement.value) return
+  if (checked) {
+    slidesStore.updateElement({ id: handleElement.value.id, props: { filters: {} } })
+  }
+  else {
+    slidesStore.removeElementProps({ id: handleElement.value.id, propName: 'filters' })
+  }
+  addHistorySnapshot()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/common/ElementFlip.vue b/src/views/Editor/Toolbar/common/ElementFlip.vue
index 2c3d1b39..49c37f28 100644
--- a/src/views/Editor/Toolbar/common/ElementFlip.vue
+++ b/src/views/Editor/Toolbar/common/ElementFlip.vue
@@ -15,44 +15,33 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+<script lang="ts" setup>
+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())
+const slidesStore = useSlidesStore()
+const { handleElement } = storeToRefs(useMainStore())
 
-    const flipH = ref(false)
-    const flipV = ref(false)
+const flipH = ref(false)
+const flipV = ref(false)
 
-    watch(handleElement, () => {
-      if (handleElement.value && (handleElement.value.type === 'image' || handleElement.value.type === 'shape')) {
-        flipH.value = !!handleElement.value.flipH
-        flipV.value = !!handleElement.value.flipV
-      }
-    }, { deep: true, immediate: true })
+watch(handleElement, () => {
+  if (handleElement.value && (handleElement.value.type === 'image' || handleElement.value.type === 'shape')) {
+    flipH.value = !!handleElement.value.flipH
+    flipV.value = !!handleElement.value.flipV
+  }
+}, { deep: true, immediate: true })
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    const updateFlip = (flipProps: ImageOrShapeFlip) => {
-      if (!handleElement.value) return
-      slidesStore.updateElement({ id: handleElement.value.id, props: flipProps })
-      addHistorySnapshot()
-    }
-
-    return {
-      flipH,
-      flipV,
-      updateFlip,
-    }
-  },
-})
+const updateFlip = (flipProps: ImageOrShapeFlip) => {
+  if (!handleElement.value) return
+  slidesStore.updateElement({ id: handleElement.value.id, props: flipProps })
+  addHistorySnapshot()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/common/ElementOpacity.vue b/src/views/Editor/Toolbar/common/ElementOpacity.vue
index 14ac2897..66eec393 100644
--- a/src/views/Editor/Toolbar/common/ElementOpacity.vue
+++ b/src/views/Editor/Toolbar/common/ElementOpacity.vue
@@ -14,40 +14,30 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+<script lang="ts" setup>
+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())
+const slidesStore = useSlidesStore()
+const { handleElement } = storeToRefs(useMainStore())
 
-    const opacity = ref<number>(1)
+const opacity = ref<number>(1)
 
-    watch(handleElement, () => {
-      if (!handleElement.value) return
-      opacity.value = 'opacity' in handleElement.value && handleElement.value.opacity !== undefined ? handleElement.value.opacity : 1
-    }, { deep: true, immediate: true })
+watch(handleElement, () => {
+  if (!handleElement.value) return
+  opacity.value = 'opacity' in handleElement.value && handleElement.value.opacity !== undefined ? handleElement.value.opacity : 1
+}, { deep: true, immediate: true })
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    const updateOpacity = (value: number) => {
-      if (!handleElement.value) return
-      const props = { opacity: value }
-      slidesStore.updateElement({ id: handleElement.value.id, props })
-      addHistorySnapshot()
-    }
-
-    return {
-      opacity,
-      updateOpacity,
-    }
-  },
-})
+const updateOpacity = (value: number) => {
+  if (!handleElement.value) return
+  const props = { opacity: value }
+  slidesStore.updateElement({ id: handleElement.value.id, props })
+  addHistorySnapshot()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/common/ElementOutline.vue b/src/views/Editor/Toolbar/common/ElementOutline.vue
index 9ab10810..bb8ca79b 100644
--- a/src/views/Editor/Toolbar/common/ElementOutline.vue
+++ b/src/views/Editor/Toolbar/common/ElementOutline.vue
@@ -45,8 +45,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElementOutline } from '@/types/slides'
@@ -54,59 +54,45 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from './ColorButton.vue'
 
-export default defineComponent({
-  name: 'element-outline',
-  components: {
-    ColorButton,
-  },
-  props: {
-    fixed: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup() {
-    const slidesStore = useSlidesStore()
-    const { handleElement } = storeToRefs(useMainStore())
-
-    const outline = ref<PPTElementOutline>()
-    const hasOutline = ref(false)
-
-    watch(handleElement, () => {
-      if (!handleElement.value) return
-      outline.value = 'outline' in handleElement.value ? handleElement.value.outline : undefined
-      hasOutline.value = !!outline.value
-    }, { deep: true, immediate: true })
-
-    const { addHistorySnapshot } = useHistorySnapshot()
-
-    const updateOutline = (outlineProps: Partial<PPTElementOutline>) => {
-      if (!handleElement.value) return
-      const props = { outline: { ...outline.value, ...outlineProps } }
-      slidesStore.updateElement({ id: handleElement.value.id, props })
-      addHistorySnapshot()
-    }
-
-    const toggleOutline = (checked: boolean) => {
-      if (!handleElement.value) return
-      if (checked) {
-        const _outline: PPTElementOutline = { width: 2, color: '#000', style: 'solid' }
-        slidesStore.updateElement({ id: handleElement.value.id, props: { outline: _outline } })
-      }
-      else {
-        slidesStore.removeElementProps({ id: handleElement.value.id, propName: 'outline' })
-      }
-      addHistorySnapshot()
-    }
-
-    return {
-      outline,
-      hasOutline,
-      toggleOutline,
-      updateOutline,
-    }
+defineProps({
+  fixed: {
+    type: Boolean,
+    default: false,
   },
 })
+
+const slidesStore = useSlidesStore()
+const { handleElement } = storeToRefs(useMainStore())
+
+const outline = ref<PPTElementOutline>()
+const hasOutline = ref(false)
+
+watch(handleElement, () => {
+  if (!handleElement.value) return
+  outline.value = 'outline' in handleElement.value ? handleElement.value.outline : undefined
+  hasOutline.value = !!outline.value
+}, { deep: true, immediate: true })
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const updateOutline = (outlineProps: Partial<PPTElementOutline>) => {
+  if (!handleElement.value) return
+  const props = { outline: { ...outline.value, ...outlineProps } }
+  slidesStore.updateElement({ id: handleElement.value.id, props })
+  addHistorySnapshot()
+}
+
+const toggleOutline = (checked: boolean) => {
+  if (!handleElement.value) return
+  if (checked) {
+    const _outline: PPTElementOutline = { width: 2, color: '#000', style: 'solid' }
+    slidesStore.updateElement({ id: handleElement.value.id, props: { outline: _outline } })
+  }
+  else {
+    slidesStore.removeElementProps({ id: handleElement.value.id, propName: 'outline' })
+  }
+  addHistorySnapshot()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/common/ElementShadow.vue b/src/views/Editor/Toolbar/common/ElementShadow.vue
index 38a41a22..4a08d85d 100644
--- a/src/views/Editor/Toolbar/common/ElementShadow.vue
+++ b/src/views/Editor/Toolbar/common/ElementShadow.vue
@@ -56,8 +56,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElementShadow } from '@/types/slides'
@@ -65,53 +65,38 @@ 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())
+const slidesStore = useSlidesStore()
+const { handleElement } = storeToRefs(useMainStore())
 
-    const shadow = ref<PPTElementShadow>()
-    const hasShadow = ref(false)
+const shadow = ref<PPTElementShadow>()
+const hasShadow = ref(false)
 
-    watch(handleElement, () => {
-      if (!handleElement.value) return
-      shadow.value = 'shadow' in handleElement.value ? handleElement.value.shadow : undefined
-      hasShadow.value = !!shadow.value
-    }, { deep: true, immediate: true })
+watch(handleElement, () => {
+  if (!handleElement.value) return
+  shadow.value = 'shadow' in handleElement.value ? handleElement.value.shadow : undefined
+  hasShadow.value = !!shadow.value
+}, { deep: true, immediate: true })
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    const updateShadow = (shadowProps: Partial<PPTElementShadow>) => {
-      if (!handleElement.value || !shadow.value) return
-      const _shadow = { ...shadow.value, ...shadowProps }
-      slidesStore.updateElement({ id: handleElement.value.id, props: { shadow: _shadow } })
-      addHistorySnapshot()
-    }
+const updateShadow = (shadowProps: Partial<PPTElementShadow>) => {
+  if (!handleElement.value || !shadow.value) return
+  const _shadow = { ...shadow.value, ...shadowProps }
+  slidesStore.updateElement({ id: handleElement.value.id, props: { shadow: _shadow } })
+  addHistorySnapshot()
+}
 
-    const toggleShadow = (checked: boolean) => {
-      if (!handleElement.value) return
-      if (checked) {
-        const _shadow: PPTElementShadow = { h: 1, v: 1, blur: 2, color: '#000' }
-        slidesStore.updateElement({ id: handleElement.value.id, props: { shadow: _shadow } })
-      }
-      else {
-        slidesStore.removeElementProps({ id: handleElement.value.id, propName: 'shadow' })
-      }
-      addHistorySnapshot()
-    }
-
-    return {
-      shadow,
-      hasShadow,
-      toggleShadow,
-      updateShadow,
-    }
-  },
-})
+const toggleShadow = (checked: boolean) => {
+  if (!handleElement.value) return
+  if (checked) {
+    const _shadow: PPTElementShadow = { h: 1, v: 1, blur: 2, color: '#000' }
+    slidesStore.updateElement({ id: handleElement.value.id, props: { shadow: _shadow } })
+  }
+  else {
+    slidesStore.removeElementProps({ id: handleElement.value.id, propName: 'shadow' })
+  }
+  addHistorySnapshot()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue
index f53cc1f0..e8a4dd48 100644
--- a/src/views/Editor/Toolbar/index.vue
+++ b/src/views/Editor/Toolbar/index.vue
@@ -15,8 +15,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { ToolbarStates } from '@/types/toolbar'
@@ -34,74 +34,62 @@ interface ElementTabs {
   value: ToolbarStates
 }
 
-export default defineComponent({
-  name: 'toolbar',
-  setup() {
-    const mainStore = useMainStore()
-    const { activeElementIdList, handleElement, toolbarState } = storeToRefs(mainStore)
+const mainStore = useMainStore()
+const { activeElementIdList, handleElement, toolbarState } = storeToRefs(mainStore)
 
-    const elementTabs = computed<ElementTabs[]>(() => {
-      if (handleElement.value?.type === 'text') {
-        return [
-          { label: '样式', value: ToolbarStates.EL_STYLE },
-          { label: '符号', value: ToolbarStates.SYMBOL },
-          { label: '位置', value: ToolbarStates.EL_POSITION },
-          { label: '动画', value: ToolbarStates.EL_ANIMATION },
-        ]
-      }
-      return [
-        { label: '样式', value: ToolbarStates.EL_STYLE },
-        { label: '位置', value: ToolbarStates.EL_POSITION },
-        { label: '动画', value: ToolbarStates.EL_ANIMATION },
-      ]
-    })
-    const slideTabs = [
-      { label: '设计', value: ToolbarStates.SLIDE_DESIGN },
-      { label: '切换', value: ToolbarStates.SLIDE_ANIMATION },
+const elementTabs = computed<ElementTabs[]>(() => {
+  if (handleElement.value?.type === 'text') {
+    return [
+      { label: '样式', value: ToolbarStates.EL_STYLE },
+      { label: '符号', value: ToolbarStates.SYMBOL },
+      { label: '位置', value: ToolbarStates.EL_POSITION },
       { label: '动画', value: ToolbarStates.EL_ANIMATION },
     ]
-    const multiSelectTabs = [
-      { label: '样式', value: ToolbarStates.EL_STYLE },
-      { label: '位置', value: ToolbarStates.MULTI_POSITION },
-    ]
+  }
+  return [
+    { label: '样式', value: ToolbarStates.EL_STYLE },
+    { label: '位置', value: ToolbarStates.EL_POSITION },
+    { label: '动画', value: ToolbarStates.EL_ANIMATION },
+  ]
+})
+const slideTabs = [
+  { label: '设计', value: ToolbarStates.SLIDE_DESIGN },
+  { label: '切换', value: ToolbarStates.SLIDE_ANIMATION },
+  { label: '动画', value: ToolbarStates.EL_ANIMATION },
+]
+const multiSelectTabs = [
+  { label: '样式', value: ToolbarStates.EL_STYLE },
+  { label: '位置', value: ToolbarStates.MULTI_POSITION },
+]
 
-    const setToolbarState = (value: ToolbarStates) => {
-      mainStore.setToolbarState(value)
-    }
+const setToolbarState = (value: ToolbarStates) => {
+  mainStore.setToolbarState(value)
+}
 
-    const currentTabs = computed(() => {
-      if (!activeElementIdList.value.length) return slideTabs
-      else if (activeElementIdList.value.length > 1) return multiSelectTabs
-      return elementTabs.value
-    })
+const currentTabs = computed(() => {
+  if (!activeElementIdList.value.length) return slideTabs
+  else if (activeElementIdList.value.length > 1) return multiSelectTabs
+  return elementTabs.value
+})
 
-    watch(currentTabs, () => {
-      const currentTabsValue: ToolbarStates[] = currentTabs.value.map(tab => tab.value)
-      if (!currentTabsValue.includes(toolbarState.value)) {
-        mainStore.setToolbarState(currentTabsValue[0])
-      }
-    })
+watch(currentTabs, () => {
+  const currentTabsValue: ToolbarStates[] = currentTabs.value.map(tab => tab.value)
+  if (!currentTabsValue.includes(toolbarState.value)) {
+    mainStore.setToolbarState(currentTabsValue[0])
+  }
+})
 
-    const currentPanelComponent = computed(() => {
-      const panelMap = {
-        [ToolbarStates.EL_STYLE]: ElementStylePanel,
-        [ToolbarStates.EL_POSITION]: ElementPositionPanel,
-        [ToolbarStates.EL_ANIMATION]: ElementAnimationPanel,
-        [ToolbarStates.SLIDE_DESIGN]: SlideDesignPanel,
-        [ToolbarStates.SLIDE_ANIMATION]: SlideAnimationPanel,
-        [ToolbarStates.MULTI_POSITION]: MultiPositionPanel,
-        [ToolbarStates.SYMBOL]: SymbolPanel,
-      }
-      return panelMap[toolbarState.value] || null
-    })
-
-    return {
-      toolbarState,
-      currentTabs,
-      setToolbarState,
-      currentPanelComponent,
-    }
-  },
+const currentPanelComponent = computed(() => {
+  const panelMap = {
+    [ToolbarStates.EL_STYLE]: ElementStylePanel,
+    [ToolbarStates.EL_POSITION]: ElementPositionPanel,
+    [ToolbarStates.EL_ANIMATION]: ElementAnimationPanel,
+    [ToolbarStates.SLIDE_DESIGN]: SlideDesignPanel,
+    [ToolbarStates.SLIDE_ANIMATION]: SlideAnimationPanel,
+    [ToolbarStates.MULTI_POSITION]: MultiPositionPanel,
+    [ToolbarStates.SYMBOL]: SymbolPanel,
+  }
+  return panelMap[toolbarState.value] || null
 })
 </script>
 
diff --git a/src/views/Editor/index.vue b/src/views/Editor/index.vue
index 042accd8..4bdb6bb6 100644
--- a/src/views/Editor/index.vue
+++ b/src/views/Editor/index.vue
@@ -29,8 +29,8 @@
   </Modal>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import useGlobalHotkey from '@/hooks/useGlobalHotkey'
@@ -44,34 +44,14 @@ 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('')
+const mainStore = useMainStore()
+const { dialogForExport } = storeToRefs(mainStore)
+const closeExportDialog = () => mainStore.setDialogForExport('')
 
-    const remarkHeight = ref(40)
+const remarkHeight = ref(40)
 
-    useGlobalHotkey()
-    usePasteEvent()
-
-    return {
-      remarkHeight,
-      dialogForExport,
-      closeExportDialog,
-    }
-  },
-})
+useGlobalHotkey()
+usePasteEvent()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Mobile/MobileEditor/ElementToolbar.vue b/src/views/Mobile/MobileEditor/ElementToolbar.vue
index c1049160..28b8ba57 100644
--- a/src/views/Mobile/MobileEditor/ElementToolbar.vue
+++ b/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.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.DOWN)"><IconSentToBack 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.UP)"><IconBringToFront 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">
-import { defineComponent, Ref, ref } from 'vue'
+<script lang="ts" setup>
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElement, TableCell } from '@/types/slides'
@@ -139,100 +139,78 @@ 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)
+const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId, richTextAttrs } = storeToRefs(mainStore)
 
-    const { addHistorySnapshot } = useHistorySnapshot()
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    const updateElement = (id: string, props: Partial<PPTElement>) => {
-      slidesStore.updateElement({ id, props })
-      addHistorySnapshot()
-    }
+const updateElement = (id: string, props: Partial<PPTElement>) => {
+  slidesStore.updateElement({ id, props })
+  addHistorySnapshot()
+}
 
-    const tabs: TabItem[] = [
-      { key: 'style', label: '样式' },
-      { key: 'common', label: '布局' },
-    ]
-    const activeTab = ref('common')
+const tabs: TabItem[] = [
+  { key: 'style', label: '样式' },
+  { key: 'common', label: '布局' },
+]
+const activeTab = ref('common')
 
-    const { orderElement } = useOrderElement()
-    const { alignElementToCanvas } = useAlignElementToCanvas()
-    const { addElementsFromData } = useAddSlidesOrElements()
-    const { deleteElement } = useDeleteElement()
+const { orderElement } = useOrderElement()
+const { alignElementToCanvas } = useAlignElementToCanvas()
+const { addElementsFromData } = useAddSlidesOrElements()
+const { deleteElement } = useDeleteElement()
 
-    const copyElement = () => {
-      const element: PPTElement = JSON.parse(JSON.stringify(handleElement.value))
-      addElementsFromData([element])
-    }
+const copyElement = () => {
+  const element: PPTElement = JSON.parse(JSON.stringify(handleElement.value))
+  addElementsFromData([element])
+}
 
-    const emitRichTextCommand = (command: string, value?: string) => {
-      emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
-    }
+const emitRichTextCommand = (command: string, value?: string) => {
+  emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
+}
 
-    const updateFontColor = (color: string) => {
-      if (!handleElement.value) return
-      if (handleElement.value.type === 'text' || (handleElement.value.type === 'shape' && handleElement.value.text?.content)) {
-        emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command: 'color', value: color } })
-      }
-      if (handleElement.value.type === 'table') {
-        const data: TableCell[][] = JSON.parse(JSON.stringify(handleElement.value.data))
-        for (let i = 0; i < data.length; i++) {
-          for (let j = 0; j < data[i].length; j++) {
-            const style = data[i][j].style || {}
-            data[i][j].style = { ...style, color }
-          }
-        }
-        updateElement(handleElementId.value, { data })
-      }
-      if (handleElement.value.type === 'latex') {
-        updateElement(handleElementId.value, { color })
+const updateFontColor = (color: string) => {
+  if (!handleElement.value) return
+  if (handleElement.value.type === 'text' || (handleElement.value.type === 'shape' && handleElement.value.text?.content)) {
+    emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command: 'color', value: color } })
+  }
+  if (handleElement.value.type === 'table') {
+    const data: TableCell[][] = JSON.parse(JSON.stringify(handleElement.value.data))
+    for (let i = 0; i < data.length; i++) {
+      for (let j = 0; j < data[i].length; j++) {
+        const style = data[i][j].style || {}
+        data[i][j].style = { ...style, color }
       }
     }
+    updateElement(handleElementId.value, { data })
+  }
+  if (handleElement.value.type === 'latex') {
+    updateElement(handleElementId.value, { color })
+  }
+}
 
-    const updateFill = (color: string) => {
-      if (!handleElement.value) return
-      if (
-        handleElement.value.type === 'text' ||
-        handleElement.value.type === 'shape' ||
-        handleElement.value.type === 'chart'
-      ) updateElement(handleElementId.value, { fill: color })
+const updateFill = (color: string) => {
+  if (!handleElement.value) return
+  if (
+    handleElement.value.type === 'text' ||
+    handleElement.value.type === 'shape' ||
+    handleElement.value.type === 'chart'
+  ) updateElement(handleElementId.value, { fill: color })
 
-      if (handleElement.value.type === 'table') {
-        const data: TableCell[][] = JSON.parse(JSON.stringify(handleElement.value.data))
-        for (let i = 0; i < data.length; i++) {
-          for (let j = 0; j < data[i].length; j++) {
-            const style = data[i][j].style || {}
-            data[i][j].style = { ...style, backcolor: color }
-          }
-        }
-        updateElement(handleElementId.value, { data })
+  if (handleElement.value.type === 'table') {
+    const data: TableCell[][] = JSON.parse(JSON.stringify(handleElement.value.data))
+    for (let i = 0; i < data.length; i++) {
+      for (let j = 0; j < data[i].length; j++) {
+        const style = data[i][j].style || {}
+        data[i][j].style = { ...style, backcolor: color }
       }
-
-      if (handleElement.value.type === 'audio') updateElement(handleElementId.value, { color })
     }
+    updateElement(handleElementId.value, { data })
+  }
 
-    return {
-      handleElement: handleElement as Ref<PPTElement>,
-      tabs,
-      activeTab,
-      richTextAttrs,
-      colors,
-      orderElement,
-      alignElementToCanvas,
-      copyElement,
-      deleteElement,
-      emitRichTextCommand,
-      updateFontColor,
-      updateFill,
-      ElementOrderCommands,
-      ElementAlignCommands,
-    }
-  },
-})
+  if (handleElement.value.type === 'audio') updateElement(handleElementId.value, { color })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Mobile/MobileEditor/Header.vue b/src/views/Mobile/MobileEditor/Header.vue
index 5ce3d781..417c5732 100644
--- a/src/views/Mobile/MobileEditor/Header.vue
+++ b/src/views/Mobile/MobileEditor/Header.vue
@@ -8,33 +8,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSnapshotStore } from '@/store'
 import { Mode } from '@/types/mobile'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-export default defineComponent({
-  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,
-    }
+defineProps({
+  changeMode: {
+    type: Function as PropType<(mode: Mode) => void>,
+    required: true,
   },
 })
+
+const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
+const { redo, undo } = useHistorySnapshot()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Mobile/MobileEditor/MobileEditableElement.vue b/src/views/Mobile/MobileEditor/MobileEditableElement.vue
index 244f14b4..397c5c1d 100644
--- a/src/views/Mobile/MobileEditor/MobileEditableElement.vue
+++ b/src/views/Mobile/MobileEditor/MobileEditableElement.vue
@@ -14,8 +14,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { ElementTypes, PPTElement } from '@/types/slides'
 
 import ImageElement from '@/views/components/element/ImageElement/index.vue'
@@ -28,41 +28,33 @@ 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({
-  name: 'mobile-editable-element',
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTElement>,
-      required: true,
-    },
-    elementIndex: {
-      type: Number,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: TouchEvent, element: PPTElement, canMove?: boolean) => void>,
-      required: true,
-    },
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTElement>,
+    required: true,
   },
-  setup(props) {
-    const currentElementComponent = computed(() => {
-      const elementTypeMap = {
-        [ElementTypes.IMAGE]: ImageElement,
-        [ElementTypes.TEXT]: TextElement,
-        [ElementTypes.SHAPE]: ShapeElement,
-        [ElementTypes.LINE]: LineElement,
-        [ElementTypes.CHART]: ChartElement,
-        [ElementTypes.TABLE]: TableElement,
-        [ElementTypes.LATEX]: LatexElement,
-        [ElementTypes.VIDEO]: VideoElement,
-        [ElementTypes.AUDIO]: AudioElement,
-      }
-      return elementTypeMap[props.elementInfo.type] || null
-    })
-
-    return {
-      currentElementComponent,
-    }
+  elementIndex: {
+    type: Number,
+    required: true,
+  },
+  selectElement: {
+    type: Function as PropType<(e: TouchEvent, element: PPTElement, canMove?: boolean) => void>,
+    required: true,
   },
 })
+
+const currentElementComponent = computed(() => {
+  const elementTypeMap = {
+    [ElementTypes.IMAGE]: ImageElement,
+    [ElementTypes.TEXT]: TextElement,
+    [ElementTypes.SHAPE]: ShapeElement,
+    [ElementTypes.LINE]: LineElement,
+    [ElementTypes.CHART]: ChartElement,
+    [ElementTypes.TABLE]: TableElement,
+    [ElementTypes.LATEX]: LatexElement,
+    [ElementTypes.VIDEO]: VideoElement,
+    [ElementTypes.AUDIO]: AudioElement,
+  }
+  return elementTypeMap[props.elementInfo.type] || null
+})
 </script>
\ No newline at end of file
diff --git a/src/views/Mobile/MobileEditor/MobileOperate.vue b/src/views/Mobile/MobileEditor/MobileOperate.vue
index 21217d1f..b8692c9a 100644
--- a/src/views/Mobile/MobileEditor/MobileOperate.vue
+++ b/src/views/Mobile/MobileEditor/MobileOperate.vue
@@ -29,8 +29,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, computed } from 'vue'
+<script lang="ts" setup>
+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,48 +38,36 @@ 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({
-  name: 'mobile-operate',
-  components: {
-    BorderLine,
-    ResizeHandler,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<Exclude<PPTElement, PPTLineElement>>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<Exclude<PPTElement, PPTLineElement>>,
-      required: true,
-    },
-    isSelected: {
-      type: Boolean,
-      required: true,
-    },
-    canvasScale: {
-      type: Number,
-      required: true,
-    },
-    scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void>,
-      required: true,
-    },
+  isSelected: {
+    type: Boolean,
+    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,
-      textElementResizeHandlers,
-    } = useCommonOperate(scaleWidth, scaleHeight)
-
-    return {
-      rotate,
-      borderLines,
-      resizeHandlers: props.elementInfo.type === 'text' || props.elementInfo.type === 'table' ? textElementResizeHandlers : resizeHandlers,
-    }
+  canvasScale: {
+    type: Number,
+    required: true,
+  },
+  scaleElement: {
+    type: Function as PropType<(e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void>,
+    required: true,
   },
 })
+
+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,
+  textElementResizeHandlers,
+} = useCommonOperate(scaleWidth, scaleHeight)
+
+const resizeHandlers = props.elementInfo.type === 'text' || props.elementInfo.type === 'table' ? textElementResizeHandlers : _resizeHandlers
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Mobile/MobileEditor/SlideToolbar.vue b/src/views/Mobile/MobileEditor/SlideToolbar.vue
index d8a370ce..00f42f47 100644
--- a/src/views/Mobile/MobileEditor/SlideToolbar.vue
+++ b/src/views/Mobile/MobileEditor/SlideToolbar.vue
@@ -29,8 +29,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useSlideHandler from '@/hooks/useSlideHandler'
@@ -41,75 +41,56 @@ 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)
+const slidesStore = useSlidesStore()
+const { viewportRatio, currentSlide } = storeToRefs(slidesStore)
 
-    const { createSlide, copyAndPasteSlide, deleteSlide, } = useSlideHandler()
-    const { createTextElement, createImageElement, createShapeElement } = useCreateElement()
+const { createSlide, copyAndPasteSlide, deleteSlide, } = useSlideHandler()
+const { createTextElement, createImageElement, createShapeElement } = useCreateElement()
 
-    const insertTextElement = () => {
-      const width = 400
-      const height = 56
+const insertTextElement = () => {
+  const width = 400
+  const height = 56
 
-      createTextElement({
-        left: (VIEWPORT_SIZE - width) / 2,
-        top: (VIEWPORT_SIZE * viewportRatio.value - height) / 2,
-        width,
-        height,
-      }, '<p><span style=\"font-size: 24px\">新添加文本</span></p>')
-    }
+  createTextElement({
+    left: (VIEWPORT_SIZE - width) / 2,
+    top: (VIEWPORT_SIZE * viewportRatio.value - height) / 2,
+    width,
+    height,
+  }, '<p><span style=\"font-size: 24px\">新添加文本</span></p>')
+}
 
-    const insertImageElement = (files: File[]) => {
-      if (!files || !files[0]) return
-      getImageDataURL(files[0]).then(dataURL => createImageElement(dataURL))
-    }
+const insertImageElement = (files: FileList) => {
+  if (!files || !files[0]) return
+  getImageDataURL(files[0]).then(dataURL => createImageElement(dataURL))
+}
 
-    const insertShapeElement = (type: 'square' | 'round') => {
-      const square: ShapePoolItem = {
-        viewBox: [200, 200],
-        path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z',
-      }
-      const round: ShapePoolItem = {
-        viewBox: [200, 200],
-        path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z',
-      }
-      const shape = { square, round }
+const insertShapeElement = (type: 'square' | 'round') => {
+  const square: ShapePoolItem = {
+    viewBox: [200, 200],
+    path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z',
+  }
+  const round: ShapePoolItem = {
+    viewBox: [200, 200],
+    path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z',
+  }
+  const shape = { square, round }
 
-      const size = 200
+  const size = 200
 
-      createShapeElement({
-        left: (VIEWPORT_SIZE - size) / 2,
-        top: (VIEWPORT_SIZE * viewportRatio.value - size) / 2,
-        width: size,
-        height: size,
-      }, shape[type])
-    }
+  createShapeElement({
+    left: (VIEWPORT_SIZE - size) / 2,
+    top: (VIEWPORT_SIZE * viewportRatio.value - size) / 2,
+    width: size,
+    height: size,
+  }, shape[type])
+}
 
-    const remark = computed(() => currentSlide.value?.remark || '')
+const remark = computed(() => currentSlide.value?.remark || '')
 
-    const handleInputMark = (e: Event) => {
-      const value = (e.target as HTMLTextAreaElement).value
-      slidesStore.updateSlide({ remark: value })
-    }
-
-    return {
-      remark,
-      createSlide,
-      copyAndPasteSlide,
-      deleteSlide,
-      insertTextElement,
-      insertImageElement,
-      insertShapeElement,
-      handleInputMark,
-    }
-  },
-})
+const handleInputMark = (e: Event) => {
+  const value = (e.target as HTMLTextAreaElement).value
+  slidesStore.updateSlide({ remark: value })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Mobile/MobileEditor/index.vue b/src/views/Mobile/MobileEditor/index.vue
index 57708408..b460a06c 100644
--- a/src/views/Mobile/MobileEditor/index.vue
+++ b/src/views/Mobile/MobileEditor/index.vue
@@ -39,8 +39,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref, watchEffect } from 'vue'
+<script lang="ts" setup>
+import { computed, onMounted, PropType, ref, watchEffect } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElement } from '@/types/slides'
@@ -58,92 +58,65 @@ import SlideToolbar from './SlideToolbar.vue'
 import ElementToolbar from './ElementToolbar.vue'
 import Header from './Header.vue'
 
-export default defineComponent({
-  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)
-    const { activeElementIdList, handleElement } = storeToRefs(mainStore)
-
-    const contentRef = ref<HTMLElement>()
-
-    const alignmentLines = ref<AlignmentLineProps[]>([])
-
-    const background = computed(() => currentSlide.value.background)
-    const { backgroundStyle } = useSlideBackgroundStyle(background)
-
-    const canvasScale = computed(() => {
-      if (!contentRef.value) return 1
-      const contentWidth = contentRef.value.clientWidth
-      const contentheight = contentRef.value.clientHeight
-
-      const contentRatio = contentheight / contentWidth
-      if (contentRatio >= viewportRatio.value) return (contentWidth - 20) / VIEWPORT_SIZE
-      return (contentheight - 20) / viewportRatio.value / VIEWPORT_SIZE
-    })
-
-    onMounted(() => {
-      if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
-      if (slideIndex.value !== 0) slidesStore.updateSlideIndex(0)
-    })
-
-    const viewportStyles = computed(() => ({
-      width: VIEWPORT_SIZE * canvasScale.value + 'px',
-      height: VIEWPORT_SIZE * viewportRatio.value * canvasScale.value + 'px',
-    }))
-
-    const elementList = ref<PPTElement[]>([])
-    const setLocalElementList = () => {
-      elementList.value = currentSlide.value ? JSON.parse(JSON.stringify(currentSlide.value.elements)) : []
-    }
-    watchEffect(setLocalElementList)
-
-    const { dragElement } = useDragElement(elementList, alignmentLines, canvasScale)
-    const { scaleElement } = useScaleElement(elementList, alignmentLines, canvasScale)
-
-    const selectElement = (e: TouchEvent, element: PPTElement, startMove = true) => {
-      if (!activeElementIdList.value.includes(element.id)) {
-        mainStore.setActiveElementIdList([element.id])
-        mainStore.setHandleElementId(element.id)
-      }
-      if (startMove) dragElement(e, element)
-    }
-
-    const handleClickBlankArea = () => {
-      mainStore.setActiveElementIdList([])
-    }
-
-    return {
-      contentRef,
-      slideIndex,
-      elementList,
-      canvasScale,
-      viewportStyles,
-      backgroundStyle,
-      activeElementIdList,
-      alignmentLines,
-      selectElement,
-      handleClickBlankArea,
-      scaleElement,
-      handleElement,
-    }
+defineProps({
+  changeMode: {
+    type: Function as PropType<(mode: Mode) => void>,
+    required: true,
   },
 })
+
+const slidesStore = useSlidesStore()
+const mainStore = useMainStore()
+const { slideIndex, currentSlide, viewportRatio } = storeToRefs(slidesStore)
+const { activeElementIdList, handleElement } = storeToRefs(mainStore)
+
+const contentRef = ref<HTMLElement>()
+
+const alignmentLines = ref<AlignmentLineProps[]>([])
+
+const background = computed(() => currentSlide.value.background)
+const { backgroundStyle } = useSlideBackgroundStyle(background)
+
+const canvasScale = computed(() => {
+  if (!contentRef.value) return 1
+  const contentWidth = contentRef.value.clientWidth
+  const contentheight = contentRef.value.clientHeight
+
+  const contentRatio = contentheight / contentWidth
+  if (contentRatio >= viewportRatio.value) return (contentWidth - 20) / VIEWPORT_SIZE
+  return (contentheight - 20) / viewportRatio.value / VIEWPORT_SIZE
+})
+
+onMounted(() => {
+  if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
+  if (slideIndex.value !== 0) slidesStore.updateSlideIndex(0)
+})
+
+const viewportStyles = computed(() => ({
+  width: VIEWPORT_SIZE * canvasScale.value + 'px',
+  height: VIEWPORT_SIZE * viewportRatio.value * canvasScale.value + 'px',
+}))
+
+const elementList = ref<PPTElement[]>([])
+const setLocalElementList = () => {
+  elementList.value = currentSlide.value ? JSON.parse(JSON.stringify(currentSlide.value.elements)) : []
+}
+watchEffect(setLocalElementList)
+
+const { dragElement } = useDragElement(elementList, alignmentLines, canvasScale)
+const { scaleElement } = useScaleElement(elementList, alignmentLines, canvasScale)
+
+const selectElement = (e: TouchEvent, element: PPTElement, startMove = true) => {
+  if (!activeElementIdList.value.includes(element.id)) {
+    mainStore.setActiveElementIdList([element.id])
+    mainStore.setHandleElementId(element.id)
+  }
+  if (startMove) dragElement(e, element)
+}
+
+const handleClickBlankArea = () => {
+  mainStore.setActiveElementIdList([])
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Mobile/MobilePlayer.vue b/src/views/Mobile/MobilePlayer.vue
index 07e3a807..5946d62a 100644
--- a/src/views/Mobile/MobilePlayer.vue
+++ b/src/views/Mobile/MobilePlayer.vue
@@ -51,8 +51,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, onMounted, PropType, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Mode } from '@/types/mobile'
@@ -60,89 +60,70 @@ import { Mode } from '@/types/mobile'
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import MobileThumbnails from './MobileThumbnails.vue'
 
-export default defineComponent({
-  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)
-
-    const toolVisible = ref(false)
-
-    const playerSize = ref({ width: 0, height: 0 })
-
-    onMounted(() => {
-      if (slideIndex.value !== 0) slidesStore.updateSlideIndex(0)
-
-      playerSize.value = {
-        width: document.body.clientHeight,
-        height: document.body.clientWidth,
-      }
-    })
-
-    const slideSize = computed(() => {
-      const playerRatio = playerSize.value.height / playerSize.value.width
-
-      let slideWidth = 0
-      let slideHeight = 0
-
-      if (playerRatio >= viewportRatio.value) {
-        slideWidth = playerSize.value.width
-        slideHeight = slideWidth * viewportRatio.value
-      }
-      else {
-        slideHeight = playerSize.value.height
-        slideWidth = slideHeight / viewportRatio.value
-      }
-
-      return {
-        width: slideWidth,
-        height: slideHeight,
-      }
-    })
-
-    const touchInfo = ref<{ x: number; y: number; } | null>(null)
-    const touchStartListener = (e: TouchEvent) => {
-      touchInfo.value = {
-        x: e.changedTouches[0].pageX,
-        y: e.changedTouches[0].pageY,
-      }
-    }
-    const touchEndListener = (e: TouchEvent) => {
-      if (!touchInfo.value) return
-
-      const offsetY = Math.abs(touchInfo.value.y - e.changedTouches[0].pageY)
-      const offsetX = e.changedTouches[0].pageX - touchInfo.value.x
-
-      if ( Math.abs(offsetX) > offsetY && Math.abs(offsetX) > 50 ) {
-        touchInfo.value = null
-
-        if (offsetX < 0 && slideIndex.value > 0) slidesStore.updateSlideIndex(slideIndex.value - 1)
-        if (offsetX > 0 && slideIndex.value < slides.value.length - 1) slidesStore.updateSlideIndex(slideIndex.value + 1)
-      }
-    }
-
-    return {
-      slides,
-      slideIndex,
-      currentSlide,
-      playerSize,
-      slideSize,
-      toolVisible,
-      touchStartListener,
-      touchEndListener,
-    }
+defineProps({
+  changeMode: {
+    type: Function as PropType<(mode: Mode) => void>,
+    required: true,
   },
 })
+
+const slidesStore = useSlidesStore()
+const { slides, slideIndex, currentSlide, viewportRatio } = storeToRefs(slidesStore)
+
+const toolVisible = ref(false)
+
+const playerSize = ref({ width: 0, height: 0 })
+
+onMounted(() => {
+  if (slideIndex.value !== 0) slidesStore.updateSlideIndex(0)
+
+  playerSize.value = {
+    width: document.body.clientHeight,
+    height: document.body.clientWidth,
+  }
+})
+
+const slideSize = computed(() => {
+  const playerRatio = playerSize.value.height / playerSize.value.width
+
+  let slideWidth = 0
+  let slideHeight = 0
+
+  if (playerRatio >= viewportRatio.value) {
+    slideWidth = playerSize.value.width
+    slideHeight = slideWidth * viewportRatio.value
+  }
+  else {
+    slideHeight = playerSize.value.height
+    slideWidth = slideHeight / viewportRatio.value
+  }
+
+  return {
+    width: slideWidth,
+    height: slideHeight,
+  }
+})
+
+const touchInfo = ref<{ x: number; y: number; } | null>(null)
+const touchStartListener = (e: TouchEvent) => {
+  touchInfo.value = {
+    x: e.changedTouches[0].pageX,
+    y: e.changedTouches[0].pageY,
+  }
+}
+const touchEndListener = (e: TouchEvent) => {
+  if (!touchInfo.value) return
+
+  const offsetY = Math.abs(touchInfo.value.y - e.changedTouches[0].pageY)
+  const offsetX = e.changedTouches[0].pageX - touchInfo.value.x
+
+  if ( Math.abs(offsetX) > offsetY && Math.abs(offsetX) > 50 ) {
+    touchInfo.value = null
+
+    if (offsetX < 0 && slideIndex.value > 0) slidesStore.updateSlideIndex(slideIndex.value - 1)
+    if (offsetX > 0 && slideIndex.value < slides.value.length - 1) slidesStore.updateSlideIndex(slideIndex.value + 1)
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Mobile/MobilePreview.vue b/src/views/Mobile/MobilePreview.vue
index 38964d34..cd73b036 100644
--- a/src/views/Mobile/MobilePreview.vue
+++ b/src/views/Mobile/MobilePreview.vue
@@ -17,8 +17,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, onMounted, ref } from 'vue'
+<script lang="ts" setup>
+import { PropType, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useLoadSlides from '@/hooks/useLoadSlides'
@@ -26,36 +26,22 @@ import { Mode } from '@/types/mobile'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
-export default defineComponent({
-  name: 'mobile-preview',
-  components: {
-    ThumbnailSlide,
+const props = defineProps({
+  changeMode: {
+    type: Function as PropType<(mode: Mode) => void>,
+    required: true,
   },
-  props: {
-    changeMode: {
-      type: Function as PropType<(mode: Mode) => void>,
-      required: true,
-    },
-  },
-  setup() {
-    const { slides } = storeToRefs(useSlidesStore())
-    const { slidesLoadLimit } = useLoadSlides()
+})
 
-    const mobileRef = ref<HTMLElement>()
-    const screenWidth = ref(0)
+const { slides } = storeToRefs(useSlidesStore())
+const { slidesLoadLimit } = useLoadSlides()
 
-    onMounted(() => {
-      if (!mobileRef.value) return
-      screenWidth.value = mobileRef.value.clientWidth
-    })
+const mobileRef = ref<HTMLElement>()
+const screenWidth = ref(0)
 
-    return {
-      slides,
-      slidesLoadLimit,
-      mobileRef,
-      screenWidth,
-    }
-  },
+onMounted(() => {
+  if (!mobileRef.value) return
+  screenWidth.value = mobileRef.value.clientWidth
 })
 </script>
 
diff --git a/src/views/Mobile/MobileThumbnails.vue b/src/views/Mobile/MobileThumbnails.vue
index 94565808..5d97a4be 100644
--- a/src/views/Mobile/MobileThumbnails.vue
+++ b/src/views/Mobile/MobileThumbnails.vue
@@ -13,36 +13,20 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 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)
+const slidesStore = useSlidesStore()
+const { slides, slideIndex } = storeToRefs(slidesStore)
 
-    const { slidesLoadLimit } = useLoadSlides()
-    const changeSlideIndex = (index: number) => {
-      slidesStore.updateSlideIndex(index)
-    }
-
-    return {
-      slides,
-      slideIndex,
-      slidesLoadLimit,
-      changeSlideIndex,
-    }
-  },
-})
+const { slidesLoadLimit } = useLoadSlides()
+const changeSlideIndex = (index: number) => {
+  slidesStore.updateSlideIndex(index)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Mobile/index.vue b/src/views/Mobile/index.vue
index ae3b43ac..0acb71ed 100644
--- a/src/views/Mobile/index.vue
+++ b/src/views/Mobile/index.vue
@@ -7,35 +7,25 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+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 mode = ref<Mode>('preview')
     
-    const changeMode = (_mode: Mode) => mode.value = _mode
-    
-    const currentComponent = computed(() => {
-      const componentMap = {
-        'editor': MobileEditor,
-        'player': MobilePlayer,
-        'preview': MobilePreview,
-      }
-      return componentMap[mode.value] || null
-    })
+const changeMode = (_mode: Mode) => mode.value = _mode
 
-    return {
-      currentComponent,
-      changeMode,
-    }
-  },
+const currentComponent = computed(() => {
+  const componentMap = {
+    'editor': MobileEditor,
+    'player': MobilePlayer,
+    'preview': MobilePreview,
+  }
+  return componentMap[mode.value] || null
 })
 </script>
 
diff --git a/src/views/Screen/BaseView.vue b/src/views/Screen/BaseView.vue
index aac32b87..e2682557 100644
--- a/src/views/Screen/BaseView.vue
+++ b/src/views/Screen/BaseView.vue
@@ -58,8 +58,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, ref } from 'vue'
+<script lang="ts" setup>
+import { PropType, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
@@ -73,126 +73,93 @@ import ScreenSlideList from './ScreenSlideList.vue'
 import SlideThumbnails from './SlideThumbnails.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
 
-export default defineComponent({
-  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 {
-      autoPlayTimer,
-      autoPlay,
-      closeAutoPlay,
-      mousewheelListener,
-      touchStartListener,
-      touchEndListener,
-      turnPrevSlide,
-      turnNextSlide,
-      turnSlideToIndex,
-      turnSlideToId,
-      execPrev,
-      execNext,
-      animationIndex,
-    } = useExecPlay()
-
-    const { slideWidth, slideHeight } = useSlideSize()
-    const { exitScreening } = useScreening()
-    const { fullscreenState, manualExitFullscreen } = useFullscreen()
-
-    const rightToolsVisible = ref(false)
-    const writingBoardToolVisible = ref(false)
-    const slideThumbnailModelVisible = ref(false)
-    const laserPen = ref(false)
-
-    const contextmenus = (): ContextmenuItem[] => {
-      return [
-        {
-          text: '上一页',
-          subText: '↑ ←',
-          disable: slideIndex.value <= 0,
-          handler: () => turnPrevSlide(),
-        },
-        {
-          text: '下一页',
-          subText: '↓ →',
-          disable: slideIndex.value >= slides.value.length - 1,
-          handler: () => turnNextSlide(),
-        },
-        {
-          text: '第一页',
-          disable: slideIndex.value === 0,
-          handler: () => turnSlideToIndex(0),
-        },
-        {
-          text: '最后一页',
-          disable: slideIndex.value === slides.value.length - 1,
-          handler: () => turnSlideToIndex(slides.value.length - 1),
-        },
-        { divider: true },
-        {
-          text: '显示工具栏',
-          handler: () => rightToolsVisible.value = true,
-        },
-        {
-          text: '查看所有幻灯片',
-          handler: () => slideThumbnailModelVisible.value = true,
-        },
-        {
-          text: '画笔工具',
-          handler: () => writingBoardToolVisible.value = true,
-        },
-        {
-          text: '演讲者视图',
-          handler: () => props.changeViewMode('presenter'),
-        },
-        { divider: true },
-        {
-          text: autoPlayTimer.value ? '取消自动放映' : '自动放映',
-          handler: autoPlayTimer.value ? closeAutoPlay : autoPlay,
-        },
-        {
-          text: '结束放映',
-          subText: 'ESC',
-          handler: exitScreening,
-        },
-      ]
-    }
-
-    return {
-      slides,
-      slideIndex,
-      slideWidth,
-      slideHeight,
-      mousewheelListener,
-      touchStartListener,
-      touchEndListener,
-      animationIndex,
-      contextmenus,
-      execPrev,
-      execNext,
-      turnSlideToIndex,
-      turnSlideToId,
-      slideThumbnailModelVisible,
-      writingBoardToolVisible,
-      rightToolsVisible,
-      fullscreenState,
-      exitScreening,
-      enterFullscreen,
-      manualExitFullscreen,
-      laserPen,
-    }
+const props = defineProps({
+  changeViewMode: {
+    type: Function as PropType<(mode: 'base' | 'presenter') => void>,
+    required: true,
   },
 })
+
+const { slides, slideIndex } = storeToRefs(useSlidesStore())
+
+const {
+  autoPlayTimer,
+  autoPlay,
+  closeAutoPlay,
+  mousewheelListener,
+  touchStartListener,
+  touchEndListener,
+  turnPrevSlide,
+  turnNextSlide,
+  turnSlideToIndex,
+  turnSlideToId,
+  execPrev,
+  execNext,
+  animationIndex,
+} = useExecPlay()
+
+const { slideWidth, slideHeight } = useSlideSize()
+const { exitScreening } = useScreening()
+const { fullscreenState, manualExitFullscreen } = useFullscreen()
+
+const rightToolsVisible = ref(false)
+const writingBoardToolVisible = ref(false)
+const slideThumbnailModelVisible = ref(false)
+const laserPen = ref(false)
+
+const contextmenus = (): ContextmenuItem[] => {
+  return [
+    {
+      text: '上一页',
+      subText: '↑ ←',
+      disable: slideIndex.value <= 0,
+      handler: () => turnPrevSlide(),
+    },
+    {
+      text: '下一页',
+      subText: '↓ →',
+      disable: slideIndex.value >= slides.value.length - 1,
+      handler: () => turnNextSlide(),
+    },
+    {
+      text: '第一页',
+      disable: slideIndex.value === 0,
+      handler: () => turnSlideToIndex(0),
+    },
+    {
+      text: '最后一页',
+      disable: slideIndex.value === slides.value.length - 1,
+      handler: () => turnSlideToIndex(slides.value.length - 1),
+    },
+    { divider: true },
+    {
+      text: '显示工具栏',
+      handler: () => rightToolsVisible.value = true,
+    },
+    {
+      text: '查看所有幻灯片',
+      handler: () => slideThumbnailModelVisible.value = true,
+    },
+    {
+      text: '画笔工具',
+      handler: () => writingBoardToolVisible.value = true,
+    },
+    {
+      text: '演讲者视图',
+      handler: () => props.changeViewMode('presenter'),
+    },
+    { divider: true },
+    {
+      text: autoPlayTimer.value ? '取消自动放映' : '自动放映',
+      handler: autoPlayTimer.value ? closeAutoPlay : autoPlay,
+    },
+    {
+      text: '结束放映',
+      subText: 'ESC',
+      handler: exitScreening,
+    },
+  ]
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Screen/PresenterView.vue b/src/views/Screen/PresenterView.vue
index cc2602e0..306067fd 100644
--- a/src/views/Screen/PresenterView.vue
+++ b/src/views/Screen/PresenterView.vue
@@ -71,8 +71,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, nextTick, ref, watch, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, nextTick, ref, watch, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
@@ -88,142 +88,105 @@ import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import ScreenSlideList from './ScreenSlideList.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
 
-export default defineComponent({
-  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>()
-    const thumbnailsRef = ref<HTMLElement>()
-    const writingBoardToolVisible = ref(false)
-    const laserPen = ref(false)
-
-    const {
-      mousewheelListener,
-      touchStartListener,
-      touchEndListener,
-      turnPrevSlide,
-      turnNextSlide,
-      turnSlideToIndex,
-      turnSlideToId,
-      animationIndex,
-    } = useExecPlay()
-
-    const { slideWidth, slideHeight } = useSlideSize(slideListWrapRef)
-    const { exitScreening } = useScreening()
-    const { slidesLoadLimit } = useLoadSlides()
-    const { fullscreenState, manualExitFullscreen } = useFullscreen()
-
-    const remarkFontSize = ref(16)
-    const currentSlideRemark = computed(() => {
-      return parseText2Paragraphs(currentSlide.value.remark || '无备注')
-    })
-
-    const handleMousewheelThumbnails = (e: WheelEvent) => {
-      if (!thumbnailsRef.value) return
-      thumbnailsRef.value.scrollBy(e.deltaY, 0)
-    }
-
-    const setRemarkFontSize = (fontSize: number) => {
-      if (fontSize < 12 || fontSize > 40) return
-      remarkFontSize.value = fontSize
-    }
-
-    watch(slideIndex, () => {
-      nextTick(() => {
-        if (!thumbnailsRef.value) return
-
-        const activeThumbnailRef: HTMLElement | null = thumbnailsRef.value.querySelector('.thumbnail.active')
-        if (!activeThumbnailRef) return
-
-        const width = thumbnailsRef.value.offsetWidth
-        const offsetLeft = activeThumbnailRef.offsetLeft
-        thumbnailsRef.value.scrollTo({ left: offsetLeft - width / 2, behavior: 'smooth' })
-      })
-    })
-
-    const contextmenus = (): ContextmenuItem[] => {
-      return [
-        {
-          text: '上一页',
-          subText: '↑ ←',
-          disable: slideIndex.value <= 0,
-          handler: () => turnPrevSlide(),
-        },
-        {
-          text: '下一页',
-          subText: '↓ →',
-          disable: slideIndex.value >= slides.value.length - 1,
-          handler: () => turnNextSlide(),
-        },
-        {
-          text: '第一页',
-          disable: slideIndex.value === 0,
-          handler: () => turnSlideToIndex(0),
-        },
-        {
-          text: '最后一页',
-          disable: slideIndex.value === slides.value.length - 1,
-          handler: () => turnSlideToIndex(slides.value.length - 1),
-        },
-        { divider: true },
-        {
-          text: '画笔工具',
-          handler: () => writingBoardToolVisible.value = true,
-        },
-        {
-          text: '普通视图',
-          handler: () => props.changeViewMode('base'),
-        },
-        { divider: true },
-        {
-          text: '结束放映',
-          subText: 'ESC',
-          handler: exitScreening,
-        },
-      ]
-    }
-
-    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,
-    }
+const props = defineProps({
+  changeViewMode: {
+    type: Function as PropType<(mode: 'base' | 'presenter') => void>,
+    required: true,
   },
 })
+
+const { slides, slideIndex, viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
+
+const slideListWrapRef = ref<HTMLElement>()
+const thumbnailsRef = ref<HTMLElement>()
+const writingBoardToolVisible = ref(false)
+const laserPen = ref(false)
+
+const {
+  mousewheelListener,
+  touchStartListener,
+  touchEndListener,
+  turnPrevSlide,
+  turnNextSlide,
+  turnSlideToIndex,
+  turnSlideToId,
+  animationIndex,
+} = useExecPlay()
+
+const { slideWidth, slideHeight } = useSlideSize(slideListWrapRef)
+const { exitScreening } = useScreening()
+const { slidesLoadLimit } = useLoadSlides()
+const { fullscreenState, manualExitFullscreen } = useFullscreen()
+
+const remarkFontSize = ref(16)
+const currentSlideRemark = computed(() => {
+  return parseText2Paragraphs(currentSlide.value.remark || '无备注')
+})
+
+const handleMousewheelThumbnails = (e: WheelEvent) => {
+  if (!thumbnailsRef.value) return
+  thumbnailsRef.value.scrollBy(e.deltaY, 0)
+}
+
+const setRemarkFontSize = (fontSize: number) => {
+  if (fontSize < 12 || fontSize > 40) return
+  remarkFontSize.value = fontSize
+}
+
+watch(slideIndex, () => {
+  nextTick(() => {
+    if (!thumbnailsRef.value) return
+
+    const activeThumbnailRef: HTMLElement | null = thumbnailsRef.value.querySelector('.thumbnail.active')
+    if (!activeThumbnailRef) return
+
+    const width = thumbnailsRef.value.offsetWidth
+    const offsetLeft = activeThumbnailRef.offsetLeft
+    thumbnailsRef.value.scrollTo({ left: offsetLeft - width / 2, behavior: 'smooth' })
+  })
+})
+
+const contextmenus = (): ContextmenuItem[] => {
+  return [
+    {
+      text: '上一页',
+      subText: '↑ ←',
+      disable: slideIndex.value <= 0,
+      handler: () => turnPrevSlide(),
+    },
+    {
+      text: '下一页',
+      subText: '↓ →',
+      disable: slideIndex.value >= slides.value.length - 1,
+      handler: () => turnNextSlide(),
+    },
+    {
+      text: '第一页',
+      disable: slideIndex.value === 0,
+      handler: () => turnSlideToIndex(0),
+    },
+    {
+      text: '最后一页',
+      disable: slideIndex.value === slides.value.length - 1,
+      handler: () => turnSlideToIndex(slides.value.length - 1),
+    },
+    { divider: true },
+    {
+      text: '画笔工具',
+      handler: () => writingBoardToolVisible.value = true,
+    },
+    {
+      text: '普通视图',
+      handler: () => props.changeViewMode('base'),
+    },
+    { divider: true },
+    {
+      text: '结束放映',
+      subText: 'ESC',
+      handler: exitScreening,
+    },
+  ]
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Screen/ScreenElement.vue b/src/views/Screen/ScreenElement.vue
index 7cdfb898..4efc099c 100644
--- a/src/views/Screen/ScreenElement.vue
+++ b/src/views/Screen/ScreenElement.vue
@@ -19,8 +19,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { ElementTypes, PPTElement } from '@/types/slides'
@@ -35,92 +35,81 @@ 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({
-  name: 'screen-element',
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTElement>,
-      required: true,
-    },
-    elementIndex: {
-      type: Number,
-      required: true,
-    },
-    animationIndex: {
-      type: Number,
-      required: true,
-    },
-    turnSlideToId: {
-      type: Function as PropType<(id: string) => void>,
-      required: true,
-    },
-    manualExitFullscreen: {
-      type: Function as PropType<() => void>,
-      required: true,
-    },
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTElement>,
+    required: true,
   },
-  setup(props) {
-    const currentElementComponent = computed(() => {
-      const elementTypeMap = {
-        [ElementTypes.IMAGE]: BaseImageElement,
-        [ElementTypes.TEXT]: BaseTextElement,
-        [ElementTypes.SHAPE]: BaseShapeElement,
-        [ElementTypes.LINE]: BaseLineElement,
-        [ElementTypes.CHART]: ScreenChartElement,
-        [ElementTypes.TABLE]: BaseTableElement,
-        [ElementTypes.LATEX]: BaseLatexElement,
-        [ElementTypes.VIDEO]: ScreenVideoElement,
-        [ElementTypes.AUDIO]: ScreenAudioElement,
-      }
-      return elementTypeMap[props.elementInfo.type] || null
-    })
-
-    const { formatedAnimations, theme } = storeToRefs(useSlidesStore())
-
-    // 判断元素是否需要等待执行入场动画：等待执行入场的元素需要先隐藏
-    const needWaitAnimation = computed(() => {
-      // 该元素在本页动画序列中的位置
-      const elementIndexInAnimation = formatedAnimations.value.findIndex(item => {
-        const elIds = item.animations.map(item => item.elId)
-        return elIds.includes(props.elementInfo.id)
-      })
-
-      // 该元素未设置过动画
-      if (elementIndexInAnimation === -1) return false
-
-      // 若该元素已执行过动画，都无须隐藏
-      // 具体来说：若已执行的最后一个动画为入场，显然无须隐藏；若已执行的最后一个动画为退场，由于保留了退场动画结束状态，也无需额外隐藏
-      if (elementIndexInAnimation < props.animationIndex) return false
-
-      // 若该元素未执行过动画，获取其将要执行的第一个动画
-      // 若将要执行的第一个动画为入场，则需要隐藏，否则无须隐藏
-      const firstAnimation = formatedAnimations.value[elementIndexInAnimation].animations.find(item => item.elId === props.elementInfo.id)
-      if (firstAnimation?.type === 'in') return true
-      return false
-    })
-
-    // 打开元素绑定的超链接
-    const openLink = () => {
-      const link = props.elementInfo.link
-      if (!link) return
-
-      if (link.type === 'web') {
-        props.manualExitFullscreen()
-        window.open(link.target)
-      }
-      else if (link.type === 'slide') {
-        props.turnSlideToId(link.target)
-      }
-    }
-
-    return {
-      currentElementComponent,
-      needWaitAnimation,
-      theme,
-      openLink,
-    }
+  elementIndex: {
+    type: Number,
+    required: true,
+  },
+  animationIndex: {
+    type: Number,
+    required: true,
+  },
+  turnSlideToId: {
+    type: Function as PropType<(id: string) => void>,
+    required: true,
+  },
+  manualExitFullscreen: {
+    type: Function as PropType<() => void>,
+    required: true,
   },
 })
+
+const currentElementComponent = computed(() => {
+  const elementTypeMap = {
+    [ElementTypes.IMAGE]: BaseImageElement,
+    [ElementTypes.TEXT]: BaseTextElement,
+    [ElementTypes.SHAPE]: BaseShapeElement,
+    [ElementTypes.LINE]: BaseLineElement,
+    [ElementTypes.CHART]: ScreenChartElement,
+    [ElementTypes.TABLE]: BaseTableElement,
+    [ElementTypes.LATEX]: BaseLatexElement,
+    [ElementTypes.VIDEO]: ScreenVideoElement,
+    [ElementTypes.AUDIO]: ScreenAudioElement,
+  }
+  return elementTypeMap[props.elementInfo.type] || null
+})
+
+const { formatedAnimations, theme } = storeToRefs(useSlidesStore())
+
+// 判断元素是否需要等待执行入场动画：等待执行入场的元素需要先隐藏
+const needWaitAnimation = computed(() => {
+  // 该元素在本页动画序列中的位置
+  const elementIndexInAnimation = formatedAnimations.value.findIndex(item => {
+    const elIds = item.animations.map(item => item.elId)
+    return elIds.includes(props.elementInfo.id)
+  })
+
+  // 该元素未设置过动画
+  if (elementIndexInAnimation === -1) return false
+
+  // 若该元素已执行过动画，都无须隐藏
+  // 具体来说：若已执行的最后一个动画为入场，显然无须隐藏；若已执行的最后一个动画为退场，由于保留了退场动画结束状态，也无需额外隐藏
+  if (elementIndexInAnimation < props.animationIndex) return false
+
+  // 若该元素未执行过动画，获取其将要执行的第一个动画
+  // 若将要执行的第一个动画为入场，则需要隐藏，否则无须隐藏
+  const firstAnimation = formatedAnimations.value[elementIndexInAnimation].animations.find(item => item.elId === props.elementInfo.id)
+  if (firstAnimation?.type === 'in') return true
+  return false
+})
+
+// 打开元素绑定的超链接
+const openLink = () => {
+  const link = props.elementInfo.link
+  if (!link) return
+
+  if (link.type === 'web') {
+    props.manualExitFullscreen()
+    window.open(link.target)
+  }
+  else if (link.type === 'slide') {
+    props.turnSlideToId(link.target)
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Screen/ScreenSlide.vue b/src/views/Screen/ScreenSlide.vue
index 09e51b31..24cf6dbd 100644
--- a/src/views/Screen/ScreenSlide.vue
+++ b/src/views/Screen/ScreenSlide.vue
@@ -20,8 +20,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, PropType, defineComponent, provide } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Slide } from '@/types/slides'
@@ -31,49 +31,36 @@ import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
 import ScreenElement from './ScreenElement.vue'
 
-export default defineComponent({
-  name: 'screen-slide',
-  components: {
-    ScreenElement,
+const props = defineProps({
+  slide: {
+    type: Object as PropType<Slide>,
+    required: true,
   },
-  props: {
-    slide: {
-      type: Object as PropType<Slide>,
-      required: true,
-    },
-    scale: {
-      type: Number,
-      required: true,
-    },
-    animationIndex: {
-      type: Number,
-      required: true,
-    },
-    turnSlideToId: {
-      type: Function as PropType<(id: string) => void>,
-      required: true,
-    },
-    manualExitFullscreen: {
-      type: Function as PropType<() => void>,
-      required: true,
-    },
+  scale: {
+    type: Number,
+    required: true,
   },
-  setup(props) {
-    const { viewportRatio } = storeToRefs(useSlidesStore())
-
-    const background = computed(() => props.slide.background)
-    const { backgroundStyle } = useSlideBackgroundStyle(background)
-
-    const slideId = computed(() => props.slide.id)
-    provide(injectKeySlideId, slideId)
-
-    return {
-      backgroundStyle,
-      VIEWPORT_SIZE,
-      viewportRatio,
-    }
+  animationIndex: {
+    type: Number,
+    required: true,
+  },
+  turnSlideToId: {
+    type: Function as PropType<(id: string) => void>,
+    required: true,
+  },
+  manualExitFullscreen: {
+    type: Function as PropType<() => void>,
+    required: true,
   },
 })
+
+const { viewportRatio } = storeToRefs(useSlidesStore())
+
+const background = computed(() => props.slide.background)
+const { backgroundStyle } = useSlideBackgroundStyle(background)
+
+const slideId = computed(() => props.slide.id)
+provide(injectKeySlideId, slideId)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Screen/ScreenSlideList.vue b/src/views/Screen/ScreenSlideList.vue
index 87cbdf8d..d0f15d73 100644
--- a/src/views/Screen/ScreenSlideList.vue
+++ b/src/views/Screen/ScreenSlideList.vue
@@ -34,8 +34,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, provide } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { injectKeySlideScale } from '@/types/injectKey'
@@ -43,47 +43,33 @@ import { VIEWPORT_SIZE } from '@/configs/canvas'
 
 import ScreenSlide from './ScreenSlide.vue'
 
-export default defineComponent({
-  name: 'screen-slide-list',
-  components: {
-    ScreenSlide,
+const props = defineProps({
+  slideWidth: {
+    type: Number,
+    required: true,
   },
-  props: {
-    slideWidth: {
-      type: Number,
-      required: true,
-    },
-    slideHeight: {
-      type: Number,
-      required: true,
-    },
-    animationIndex: {
-      type: Number,
-      required: true,
-    },
-    turnSlideToId: {
-      type: Function as PropType<(id: string) => void>,
-      required: true,
-    },
-    manualExitFullscreen: {
-      type: Function as PropType<() => void>,
-      required: true,
-    },
+  slideHeight: {
+    type: Number,
+    required: true,
   },
-  setup(props) {
-    const { slides, slideIndex, currentSlide } = storeToRefs(useSlidesStore())
-
-    const scale = computed(() => props.slideWidth / VIEWPORT_SIZE)
-    provide(injectKeySlideScale, scale)
-
-    return {
-      slides,
-      slideIndex,
-      currentSlide,
-      scale,
-    }
+  animationIndex: {
+    type: Number,
+    required: true,
+  },
+  turnSlideToId: {
+    type: Function as PropType<(id: string) => void>,
+    required: true,
+  },
+  manualExitFullscreen: {
+    type: Function as PropType<() => void>,
+    required: true,
   },
 })
+
+const { slides, slideIndex, currentSlide } = storeToRefs(useSlidesStore())
+
+const scale = computed(() => props.slideWidth / VIEWPORT_SIZE)
+provide(injectKeySlideScale, scale)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Screen/SlideThumbnails.vue b/src/views/Screen/SlideThumbnails.vue
index aa23868d..49c19884 100644
--- a/src/views/Screen/SlideThumbnails.vue
+++ b/src/views/Screen/SlideThumbnails.vue
@@ -17,47 +17,35 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useLoadSlides from '@/hooks/useLoadSlides'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
-export default defineComponent({
-  name: 'slide-thumbnails',
-  emits: ['close'],
-  components: {
-    ThumbnailSlide,
-  },
-  props: {
-    turnSlideToIndex: {
-      type: Function as PropType<(index: number) => void>,
-      required: true,
-    },
-  },
-  setup(props, { emit }) {
-    const { slides, slideIndex } = storeToRefs(useSlidesStore())
-
-    const { slidesLoadLimit } = useLoadSlides()
-
-    const close = () => emit('close')
-
-    const turnSlide = (index: number) => {
-      props.turnSlideToIndex(index)
-      close()
-    }
-
-    return {
-      slides,
-      slideIndex,
-      slidesLoadLimit,
-      turnSlide,
-      close,
-    }
+const props = defineProps({
+  turnSlideToIndex: {
+    type: Function as PropType<(index: number) => void>,
+    required: true,
   },
 })
+
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
+const { slides, slideIndex } = storeToRefs(useSlidesStore())
+
+const { slidesLoadLimit } = useLoadSlides()
+
+const close = () => emit('close')
+
+const turnSlide = (index: number) => {
+  props.turnSlideToIndex(index)
+  close()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index 4770cadd..f262f017 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -47,76 +47,60 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, ref, StyleValue } from 'vue'
+<script lang="ts" setup>
+import { PropType, ref, StyleValue } from 'vue'
 import WritingBoard from '@/components/WritingBoard.vue'
 
 const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c', '#ffff3a']
 
 type WritingBoardModel = 'pen' | 'mark' | 'eraser'
 
-export default defineComponent({
-  name: 'writing-board-tool',
-  emits: ['close'],
-  components: {
-    WritingBoard,
+defineProps({
+  slideWidth: {
+    type: Number,
+    required: true,
   },
-  props: {
-    slideWidth: {
-      type: Number,
-      required: true,
-    },
-    slideHeight: {
-      type: Number,
-      required: true,
-    },
-    position: {
-      type: Object as PropType<StyleValue>,
-      default: () => ({
-        right: '5px',
-        bottom: '5px',
-      })
-    },
+  slideHeight: {
+    type: Number,
+    required: true,
   },
-  setup(props, { emit }) {
-    const writingBoardRef = ref()
-    const writingBoardColor = ref('#e2534d')
-    const writingBoardModel = ref<WritingBoardModel>('pen')
-    const blackboard = ref(false)
-
-    const changeModel = (model: WritingBoardModel) => {
-      writingBoardModel.value = model
-    }
-
-    // 清除画布上的墨迹
-    const clearCanvas = () => {
-      writingBoardRef.value.clearCanvas()
-    }
-
-    // 修改画笔颜色，如果当前处于橡皮状态则先切换到画笔状态
-    const changeColor = (color: string) => {
-      if (writingBoardModel.value === 'eraser') writingBoardModel.value = 'pen'
-      writingBoardColor.value = color
-    }
-    
-    // 关闭写字板
-    const closeWritingBoard = () => {
-      emit('close')
-    }
-
-    return {
-      writingBoardRef,
-      writingBoardColors,
-      writingBoardColor,
-      writingBoardModel,
-      blackboard,
-      changeModel,
-      clearCanvas,
-      changeColor,
-      closeWritingBoard,
-    }
+  position: {
+    type: Object as PropType<StyleValue>,
+    default: () => ({
+      right: '5px',
+      bottom: '5px',
+    })
   },
 })
+
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
+const writingBoardRef = ref()
+const writingBoardColor = ref('#e2534d')
+const writingBoardModel = ref<WritingBoardModel>('pen')
+const blackboard = ref(false)
+
+const changeModel = (model: WritingBoardModel) => {
+  writingBoardModel.value = model
+}
+
+// 清除画布上的墨迹
+const clearCanvas = () => {
+  writingBoardRef.value.clearCanvas()
+}
+
+// 修改画笔颜色，如果当前处于橡皮状态则先切换到画笔状态
+const changeColor = (color: string) => {
+  if (writingBoardModel.value === 'eraser') writingBoardModel.value = 'pen'
+  writingBoardColor.value = color
+}
+
+// 关闭写字板
+const closeWritingBoard = () => {
+  emit('close')
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Screen/index.vue b/src/views/Screen/index.vue
index 05ba76a5..b965d438 100644
--- a/src/views/Screen/index.vue
+++ b/src/views/Screen/index.vue
@@ -5,44 +5,30 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue'
 import { KEYS } from '@/configs/hotkey'
 import useScreening from '@/hooks/useScreening'
 
 import BaseView from './BaseView.vue'
 import PresenterView from './PresenterView.vue'
 
-export default defineComponent({
-  name: 'pptist-screen',
-  components: {
-    BaseView,
-    PresenterView,
-  },
-  setup() {
-    const viewMode = ref<'base' | 'presenter'>('base')
+const viewMode = ref<'base' | 'presenter'>('base')
 
-    const changeViewMode = (mode: 'base' | 'presenter') => {
-      viewMode.value = mode
-    }
+const changeViewMode = (mode: 'base' | 'presenter') => {
+  viewMode.value = mode
+}
 
-    const { exitScreening } = useScreening()
+const { exitScreening } = useScreening()
 
-    // 快捷键退出放映
-    const keydownListener = (e: KeyboardEvent) => {
-      const key = e.key.toUpperCase()
-      if (key === KEYS.ESC) exitScreening()
-    }
+// 快捷键退出放映
+const keydownListener = (e: KeyboardEvent) => {
+  const key = e.key.toUpperCase()
+  if (key === KEYS.ESC) exitScreening()
+}
 
-    onMounted(() => document.addEventListener('keydown', keydownListener))
-    onUnmounted(() => document.removeEventListener('keydown', keydownListener))
-
-    return {
-      viewMode,
-      changeViewMode,
-    }
-  },
-})
+onMounted(() => document.addEventListener('keydown', keydownListener))
+onUnmounted(() => document.removeEventListener('keydown', keydownListener))
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/ThumbnailSlide/ThumbnailElement.vue b/src/views/components/ThumbnailSlide/ThumbnailElement.vue
index 82be8a01..cb69af72 100644
--- a/src/views/components/ThumbnailSlide/ThumbnailElement.vue
+++ b/src/views/components/ThumbnailSlide/ThumbnailElement.vue
@@ -14,8 +14,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { ElementTypes, PPTElement } from '@/types/slides'
 
 import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue'
@@ -28,37 +28,29 @@ import BaseLatexElement from '@/views/components/element/LatexElement/BaseLatexE
 import BaseVideoElement from '@/views/components/element/VideoElement/BaseVideoElement.vue'
 import BaseAudioElement from '@/views/components/element/AudioElement/BaseAudioElement.vue'
 
-export default defineComponent({
-  name: 'base-element',
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTElement>,
-      required: true,
-    },
-    elementIndex: {
-      type: Number,
-      required: true,
-    },
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTElement>,
+    required: true,
   },
-  setup(props) {
-    const currentElementComponent = computed(() => {
-      const elementTypeMap = {
-        [ElementTypes.IMAGE]: BaseImageElement,
-        [ElementTypes.TEXT]: BaseTextElement,
-        [ElementTypes.SHAPE]: BaseShapeElement,
-        [ElementTypes.LINE]: BaseLineElement,
-        [ElementTypes.CHART]: BaseChartElement,
-        [ElementTypes.TABLE]: BaseTableElement,
-        [ElementTypes.LATEX]: BaseLatexElement,
-        [ElementTypes.VIDEO]: BaseVideoElement,
-        [ElementTypes.AUDIO]: BaseAudioElement,
-      }
-      return elementTypeMap[props.elementInfo.type] || null
-    })
-
-    return {
-      currentElementComponent,
-    }
+  elementIndex: {
+    type: Number,
+    required: true,
   },
 })
+
+const currentElementComponent = computed(() => {
+  const elementTypeMap = {
+    [ElementTypes.IMAGE]: BaseImageElement,
+    [ElementTypes.TEXT]: BaseTextElement,
+    [ElementTypes.SHAPE]: BaseShapeElement,
+    [ElementTypes.LINE]: BaseLineElement,
+    [ElementTypes.CHART]: BaseChartElement,
+    [ElementTypes.TABLE]: BaseTableElement,
+    [ElementTypes.LATEX]: BaseLatexElement,
+    [ElementTypes.VIDEO]: BaseVideoElement,
+    [ElementTypes.AUDIO]: BaseAudioElement,
+  }
+  return elementTypeMap[props.elementInfo.type] || null
+})
 </script>
\ No newline at end of file
diff --git a/src/views/components/ThumbnailSlide/index.vue b/src/views/components/ThumbnailSlide/index.vue
index 78868f67..eb0dc11d 100644
--- a/src/views/components/ThumbnailSlide/index.vue
+++ b/src/views/components/ThumbnailSlide/index.vue
@@ -26,8 +26,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, PropType, defineComponent, provide } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Slide } from '@/types/slides'
@@ -37,42 +37,28 @@ import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
 import ThumbnailElement from './ThumbnailElement.vue'
 
-export default defineComponent({
-  name: 'thumbnail-slide',
-  components: {
-    ThumbnailElement,
+const props = defineProps({
+  slide: {
+    type: Object as PropType<Slide>,
+    required: true,
   },
-  props: {
-    slide: {
-      type: Object as PropType<Slide>,
-      required: true,
-    },
-    size: {
-      type: Number,
-      required: true,
-    },
-    visible: {
-      type: Boolean,
-      default: true,
-    },
+  size: {
+    type: Number,
+    required: true,
   },
-  setup(props) {
-    const { viewportRatio } = storeToRefs(useSlidesStore())
-
-    const background = computed(() => props.slide.background)
-    const { backgroundStyle } = useSlideBackgroundStyle(background)
-
-    const scale = computed(() => props.size / VIEWPORT_SIZE)
-    provide(injectKeySlideScale, scale)
-
-    return {
-      scale,
-      backgroundStyle,
-      VIEWPORT_SIZE,
-      viewportRatio,
-    }
+  visible: {
+    type: Boolean,
+    default: true,
   },
 })
+
+const { viewportRatio } = storeToRefs(useSlidesStore())
+
+const background = computed(() => props.slide.background)
+const { backgroundStyle } = useSlideBackgroundStyle(background)
+
+const scale = computed(() => props.size / VIEWPORT_SIZE)
+provide(injectKeySlideScale, scale)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/AudioElement/AudioPlayer.vue b/src/views/components/element/AudioElement/AudioPlayer.vue
index a924266f..3a6f4931 100644
--- a/src/views/components/element/AudioElement/AudioPlayer.vue
+++ b/src/views/components/element/AudioElement/AudioPlayer.vue
@@ -72,10 +72,29 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
 import { message } from 'ant-design-vue'
 
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  loop: {
+    type: Boolean,
+    required: true,
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  scale: {
+    type: Number,
+    default: 1,
+  },
+})
+
 const secondToTime = (second = 0) => {
   if (second === 0 || isNaN(second)) return '00:00'
 
@@ -90,234 +109,184 @@ const getBoundingClientRectViewLeft = (element: HTMLElement) => {
   return element.getBoundingClientRect().left
 }
 
-export default defineComponent({
-  name: 'audio-player',
-  props: {
-    src: {
-      type: String,
-      required: true,
-    },
-    loop: {
-      type: Boolean,
-      required: true,
-    },
-    autoplay: {
-      type: Boolean,
-      default: false,
-    },
-    scale: {
-      type: Number,
-      default: 1,
-    },
-  },
-  setup(props) {
-    const audioRef = ref<HTMLAudioElement>()
-    const playBarWrap = ref<HTMLElement>()
-    const volumeBarRef = ref<HTMLElement>()
+const audioRef = ref<HTMLAudioElement>()
+const playBarWrap = ref<HTMLElement>()
+const volumeBarRef = ref<HTMLElement>()
 
-    const volume = ref(0.5)
-    const paused = ref(true)
-    const currentTime = ref(0)
-    const duration = ref(0)
-    const loaded = ref(0)
+const volume = ref(0.5)
+const paused = ref(true)
+const currentTime = ref(0)
+const duration = ref(0)
+const loaded = ref(0)
 
-    const playBarTimeVisible = ref(false)
-    const playBarTime = ref('00:00')
-    const playBarTimeLeft = ref('0')
+const playBarTimeVisible = ref(false)
+const playBarTime = ref('00:00')
+const playBarTimeLeft = ref('0')
 
-    const ptime = computed(() => secondToTime(currentTime.value))
-    const dtime = computed(() => secondToTime(duration.value))
-    const playedBarWidth = computed(() => currentTime.value / duration.value * 100 + '%')
-    const loadedBarWidth = computed(() => loaded.value / duration.value * 100 + '%')
-    const volumeBarWidth = computed(() => volume.value * 100 + '%')
+const ptime = computed(() => secondToTime(currentTime.value))
+const dtime = computed(() => secondToTime(duration.value))
+const playedBarWidth = computed(() => currentTime.value / duration.value * 100 + '%')
+const loadedBarWidth = computed(() => loaded.value / duration.value * 100 + '%')
+const volumeBarWidth = computed(() => volume.value * 100 + '%')
 
-    const seek = (time: number) => {
-      if (!audioRef.value) return
+const seek = (time: number) => {
+  if (!audioRef.value) return
 
-      time = Math.max(time, 0)
-      time = Math.min(time, duration.value)
+  time = Math.max(time, 0)
+  time = Math.min(time, duration.value)
 
-      audioRef.value.currentTime = time
-      currentTime.value = time
-    }
+  audioRef.value.currentTime = time
+  currentTime.value = time
+}
 
-    const play = () => {
-      if (!audioRef.value) return
+const play = () => {
+  if (!audioRef.value) return
 
-      paused.value = false
-      audioRef.value.play()
-    }
+  paused.value = false
+  audioRef.value.play()
+}
 
-    const pause = () => {
-      if (!audioRef.value) return
+const pause = () => {
+  if (!audioRef.value) return
 
-      paused.value = true
-      audioRef.value.pause()
-    }
+  paused.value = true
+  audioRef.value.pause()
+}
 
-    const toggle = () => {
-      if (paused.value) play() 
-      else pause()
-    }
+const toggle = () => {
+  if (paused.value) play() 
+  else pause()
+}
 
-    const setVolume = (percentage: number) => {
-      if (!audioRef.value) return
+const setVolume = (percentage: number) => {
+  if (!audioRef.value) return
 
-      percentage = Math.max(percentage, 0)
-      percentage = Math.min(percentage, 1)
+  percentage = Math.max(percentage, 0)
+  percentage = Math.min(percentage, 1)
 
-      audioRef.value.volume = percentage
-      volume.value = percentage
-      if (audioRef.value.muted && percentage !== 0) audioRef.value.muted = false
-    }
+  audioRef.value.volume = percentage
+  volume.value = percentage
+  if (audioRef.value.muted && percentage !== 0) audioRef.value.muted = false
+}
 
-    const handleDurationchange = () => {
-      duration.value = audioRef.value?.duration || 0
-    }
+const handleDurationchange = () => {
+  duration.value = audioRef.value?.duration || 0
+}
 
-    const handleTimeupdate = () => {
-      currentTime.value = audioRef.value?.currentTime || 0
-    }
+const handleTimeupdate = () => {
+  currentTime.value = audioRef.value?.currentTime || 0
+}
 
-    const handlePlayed = () => {
-      paused.value = false
-    }
+const handlePlayed = () => {
+  paused.value = false
+}
 
-    const handleEnded = () => {
-      if (!props.loop) pause()
-      else {
-        seek(0)
-        play()
-      }
-    }
+const handleEnded = () => {
+  if (!props.loop) pause()
+  else {
+    seek(0)
+    play()
+  }
+}
 
-    const handleProgress = () => {
-      loaded.value = audioRef.value?.buffered.length ? audioRef.value.buffered.end(audioRef.value.buffered.length - 1) : 0
-    }
+const handleProgress = () => {
+  loaded.value = audioRef.value?.buffered.length ? audioRef.value.buffered.end(audioRef.value.buffered.length - 1) : 0
+}
 
-    const handleError = () => message.error('视频加载失败')
+const handleError = () => message.error('视频加载失败')
 
-    const thumbMove = (e: MouseEvent | TouchEvent) => {
-      if (!audioRef.value || !playBarWrap.value) return
-      const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
-      let percentage = (clientX - getBoundingClientRectViewLeft(playBarWrap.value)) / playBarWrap.value.clientWidth
-      percentage = Math.max(percentage, 0)
-      percentage = Math.min(percentage, 1)
-      const time = percentage * duration.value
+const thumbMove = (e: MouseEvent | TouchEvent) => {
+  if (!audioRef.value || !playBarWrap.value) return
+  const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
+  let percentage = (clientX - getBoundingClientRectViewLeft(playBarWrap.value)) / playBarWrap.value.clientWidth
+  percentage = Math.max(percentage, 0)
+  percentage = Math.min(percentage, 1)
+  const time = percentage * duration.value
 
-      audioRef.value.currentTime = time
-      currentTime.value = time
-    }
+  audioRef.value.currentTime = time
+  currentTime.value = time
+}
 
-    const thumbUp = (e: MouseEvent | TouchEvent) => {
-      if (!audioRef.value || !playBarWrap.value) return
+const thumbUp = (e: MouseEvent | TouchEvent) => {
+  if (!audioRef.value || !playBarWrap.value) return
 
-      const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
-      let percentage = (clientX - getBoundingClientRectViewLeft(playBarWrap.value)) / playBarWrap.value.clientWidth
-      percentage = Math.max(percentage, 0)
-      percentage = Math.min(percentage, 1)
-      const time = percentage * duration.value
+  const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
+  let percentage = (clientX - getBoundingClientRectViewLeft(playBarWrap.value)) / playBarWrap.value.clientWidth
+  percentage = Math.max(percentage, 0)
+  percentage = Math.min(percentage, 1)
+  const time = percentage * duration.value
 
-      audioRef.value.currentTime = time
-      currentTime.value = time
+  audioRef.value.currentTime = time
+  currentTime.value = time
 
-      document.removeEventListener('mousemove', thumbMove)
-      document.removeEventListener('touchmove', thumbMove)
-      document.removeEventListener('mouseup', thumbUp)
-      document.removeEventListener('touchend', thumbUp)
-    }
+  document.removeEventListener('mousemove', thumbMove)
+  document.removeEventListener('touchmove', thumbMove)
+  document.removeEventListener('mouseup', thumbUp)
+  document.removeEventListener('touchend', thumbUp)
+}
 
-    const handleMousedownPlayBar = () => {
-      document.addEventListener('mousemove', thumbMove)
-      document.addEventListener('touchmove', thumbMove)
-      document.addEventListener('mouseup', thumbUp)
-      document.addEventListener('touchend', thumbUp)
-    }
+const handleMousedownPlayBar = () => {
+  document.addEventListener('mousemove', thumbMove)
+  document.addEventListener('touchmove', thumbMove)
+  document.addEventListener('mouseup', thumbUp)
+  document.addEventListener('touchend', thumbUp)
+}
 
-    const volumeMove = (e: MouseEvent | TouchEvent) => {
-      if (!volumeBarRef.value) return
-      const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
-      const percentage = (clientX - getBoundingClientRectViewLeft(volumeBarRef.value) - 5.5) / 35
-      setVolume(percentage)
-    }
+const volumeMove = (e: MouseEvent | TouchEvent) => {
+  if (!volumeBarRef.value) return
+  const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
+  const percentage = (clientX - getBoundingClientRectViewLeft(volumeBarRef.value)) / 45
+  setVolume(percentage)
+}
 
-    const volumeUp = () => {
-      document.removeEventListener('mousemove', volumeMove)
-      document.removeEventListener('touchmove', volumeMove)
-      document.removeEventListener('mouseup', volumeUp)
-      document.removeEventListener('touchend', volumeUp)
-    }
+const volumeUp = () => {
+  document.removeEventListener('mousemove', volumeMove)
+  document.removeEventListener('touchmove', volumeMove)
+  document.removeEventListener('mouseup', volumeUp)
+  document.removeEventListener('touchend', volumeUp)
+}
 
-    const handleMousedownVolumeBar = () => {
-      document.addEventListener('mousemove', volumeMove)
-      document.addEventListener('touchmove', volumeMove)
-      document.addEventListener('mouseup', volumeUp)
-      document.addEventListener('touchend', volumeUp)
-    }
+const handleMousedownVolumeBar = () => {
+  document.addEventListener('mousemove', volumeMove)
+  document.addEventListener('touchmove', volumeMove)
+  document.addEventListener('mouseup', volumeUp)
+  document.addEventListener('touchend', volumeUp)
+}
 
-    const handleClickVolumeBar = (e: MouseEvent) => {
-      if (!volumeBarRef.value) return
-      const percentage = (e.clientX - getBoundingClientRectViewLeft(volumeBarRef.value) - 5.5) / 35
-      setVolume(percentage)
-    }
+const handleClickVolumeBar = (e: MouseEvent) => {
+  if (!volumeBarRef.value) return
+  const percentage = (e.clientX - getBoundingClientRectViewLeft(volumeBarRef.value)) / 45
+  setVolume(percentage)
+}
 
-    const handleMousemovePlayBar = (e: MouseEvent) => {
-      if (duration.value && playBarWrap.value) {
-        const px = playBarWrap.value.getBoundingClientRect().left
-        const tx = e.clientX - px
-        if (tx < 0 || tx > playBarWrap.value.offsetWidth) return
+const handleMousemovePlayBar = (e: MouseEvent) => {
+  if (duration.value && playBarWrap.value) {
+    const px = playBarWrap.value.getBoundingClientRect().left
+    const tx = e.clientX - px
+    if (tx < 0 || tx > playBarWrap.value.offsetWidth) return
 
-        const time = duration.value * (tx / playBarWrap.value.offsetWidth)
-        playBarTimeLeft.value = `${tx - (time >= 3600 ? 25 : 20)}px`
-        playBarTime.value = secondToTime(time)
-        playBarTimeVisible.value = true
-      }
-    }
+    const time = duration.value * (tx / playBarWrap.value.offsetWidth)
+    playBarTimeLeft.value = `${tx - (time >= 3600 ? 25 : 20)}px`
+    playBarTime.value = secondToTime(time)
+    playBarTimeVisible.value = true
+  }
+}
 
-    const toggleVolume = () => {
-      if (!audioRef.value) return
+const toggleVolume = () => {
+  if (!audioRef.value) return
 
-      if (audioRef.value.muted) {
-        audioRef.value.muted = false
-        setVolume(0.5)
-      }
-      else {
-        audioRef.value.muted = true
-        setVolume(0)
-      }
-    }
+  if (audioRef.value.muted) {
+    audioRef.value.muted = false
+    setVolume(0.5)
+  }
+  else {
+    audioRef.value.muted = true
+    setVolume(0)
+  }
+}
 
-    return {
-      audioRef,
-      playBarWrap,
-      volumeBarRef,
-      volume,
-      paused,
-      ptime,
-      dtime,
-      playBarTime,
-      playBarTimeVisible,
-      playBarTimeLeft,
-      playedBarWidth,
-      loadedBarWidth,
-      volumeBarWidth,
-      play,
-      pause,
-      toggle,
-      setVolume,
-      handleDurationchange,
-      handleTimeupdate,
-      handlePlayed,
-      handleEnded,
-      handleProgress,
-      handleError,
-      handleMousedownPlayBar,
-      handleMousedownVolumeBar,
-      handleClickVolumeBar,
-      handleMousemovePlayBar,
-      toggleVolume,
-    }
-  },
+defineExpose({
+  toggle,
 })
 </script>
 
diff --git a/src/views/components/element/AudioElement/BaseAudioElement.vue b/src/views/components/element/AudioElement/BaseAudioElement.vue
index 7576b7ce..601fe22b 100644
--- a/src/views/components/element/AudioElement/BaseAudioElement.vue
+++ b/src/views/components/element/AudioElement/BaseAudioElement.vue
@@ -24,27 +24,19 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { PPTAudioElement } from '@/types/slides'
 
-export default defineComponent({
-  name: 'base-element-audio',
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTAudioElement>,
-      required: true,
-    },
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTAudioElement>,
+    required: true,
   },
-  setup(props) {
-    const audioIconSize = computed(() => {
-      return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
-    })
+})
 
-    return {
-      audioIconSize,
-    }
-  },
+const audioIconSize = computed(() => {
+  return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
 })
 </script>
 
diff --git a/src/views/components/element/AudioElement/ScreenAudioElement.vue b/src/views/components/element/AudioElement/ScreenAudioElement.vue
index 6f72c318..b99cc05e 100644
--- a/src/views/components/element/AudioElement/ScreenAudioElement.vue
+++ b/src/views/components/element/AudioElement/ScreenAudioElement.vue
@@ -35,8 +35,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, inject, PropType, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { PPTAudioElement } from '@/types/slides'
@@ -45,68 +45,52 @@ import { VIEWPORT_SIZE } from '@/configs/canvas'
 
 import AudioPlayer from './AudioPlayer.vue'
 
-export default defineComponent({
-  name: 'screen-element-audio',
-  components: {
-    AudioPlayer,
-  },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTAudioElement>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
-
-    const scale = inject(injectKeySlideScale) || ref(1)
-    const slideId = inject(injectKeySlideId) || ref('')
-
-    const inCurrentSlide = computed(() => currentSlide.value.id === slideId.value)
-
-    const audioIconSize = computed(() => {
-      return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
-    })
-    const audioPlayerPosition = computed(() => {
-      const canvasWidth = VIEWPORT_SIZE
-      const canvasHeight = VIEWPORT_SIZE * viewportRatio.value
-
-      const audioWidth = 280 / scale.value
-      const audioHeight = 50 / scale.value
-
-      const elWidth = props.elementInfo.width
-      const elHeight = props.elementInfo.height
-      const elLeft = props.elementInfo.left
-      const elTop = props.elementInfo.top
-
-      let left = 0
-      let top = elHeight
-      
-      if (elLeft + audioWidth >= canvasWidth) left = elWidth - audioWidth
-      if (elTop + elHeight + audioHeight >= canvasHeight) top = -audioHeight
-
-      return {
-        left: left + 'px',
-        top: top + 'px',
-      }
-    })
-
-    const audioPlayerRef = ref()
-    const toggle = () => {
-      if (!audioPlayerRef.value) return
-      audioPlayerRef.value.toggle()
-    }
-
-    return {
-      scale,
-      inCurrentSlide,
-      audioIconSize,
-      audioPlayerPosition,
-      audioPlayerRef,
-      toggle,
-    }
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTAudioElement>,
+    required: true,
   },
 })
+
+const { viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
+
+const scale = inject(injectKeySlideScale) || ref(1)
+const slideId = inject(injectKeySlideId) || ref('')
+
+const inCurrentSlide = computed(() => currentSlide.value.id === slideId.value)
+
+const audioIconSize = computed(() => {
+  return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
+})
+const audioPlayerPosition = computed(() => {
+  const canvasWidth = VIEWPORT_SIZE
+  const canvasHeight = VIEWPORT_SIZE * viewportRatio.value
+
+  const audioWidth = 280 / scale.value
+  const audioHeight = 50 / scale.value
+
+  const elWidth = props.elementInfo.width
+  const elHeight = props.elementInfo.height
+  const elLeft = props.elementInfo.left
+  const elTop = props.elementInfo.top
+
+  let left = 0
+  let top = elHeight
+  
+  if (elLeft + audioWidth >= canvasWidth) left = elWidth - audioWidth
+  if (elTop + elHeight + audioHeight >= canvasHeight) top = -audioHeight
+
+  return {
+    left: left + 'px',
+    top: top + 'px',
+  }
+})
+
+const audioPlayerRef = ref()
+const toggle = () => {
+  if (!audioPlayerRef.value) return
+  audioPlayerRef.value.toggle()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/AudioElement/index.vue b/src/views/components/element/AudioElement/index.vue
index fbc62487..3d880de2 100644
--- a/src/views/components/element/AudioElement/index.vue
+++ b/src/views/components/element/AudioElement/index.vue
@@ -39,8 +39,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTAudioElement } from '@/types/slides'
@@ -49,71 +49,56 @@ import { VIEWPORT_SIZE } from '@/configs/canvas'
 
 import AudioPlayer from './AudioPlayer.vue'
 
-export default defineComponent({
-  name: 'editable-element-audio',
-  components: {
-    AudioPlayer,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTAudioElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTAudioElement>,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTAudioElement, canMove?: boolean) => void>,
-      required: true,
-    },
-    contextmenus: {
-      type: Function as PropType<() => ContextmenuItem[] | null>,
-    },
+  selectElement: {
+    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTAudioElement, canMove?: boolean) => void>,
+    required: true,
   },
-  setup(props) {
-    const { canvasScale, handleElementId } = storeToRefs(useMainStore())
-    const { viewportRatio } = storeToRefs(useSlidesStore())
-
-    const audioIconSize = computed(() => {
-      return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
-    })
-    const audioPlayerPosition = computed(() => {
-      const canvasWidth = VIEWPORT_SIZE
-      const canvasHeight = VIEWPORT_SIZE * viewportRatio.value
-
-      const audioWidth = 280 / canvasScale.value
-      const audioHeight = 50 / canvasScale.value
-
-      const elWidth = props.elementInfo.width
-      const elHeight = props.elementInfo.height
-      const elLeft = props.elementInfo.left
-      const elTop = props.elementInfo.top
-
-      let left = 0
-      let top = elHeight
-      
-      if (elLeft + audioWidth >= canvasWidth) left = elWidth - audioWidth
-      if (elTop + elHeight + audioHeight >= canvasHeight) top = -audioHeight
-
-      return {
-        left: left + 'px',
-        top: top + 'px',
-      }
-    })
-
-    const handleSelectElement = (e: MouseEvent | TouchEvent) => {
-      if (props.elementInfo.lock) return
-      e.stopPropagation()
-
-      props.selectElement(e, props.elementInfo)
-    }
-
-    return {
-      canvasScale,
-      handleElementId,
-      audioIconSize,
-      audioPlayerPosition,
-      handleSelectElement,
-    }
+  contextmenus: {
+    type: Function as PropType<() => ContextmenuItem[] | null>,
   },
 })
+
+const { canvasScale, handleElementId } = storeToRefs(useMainStore())
+const { viewportRatio } = storeToRefs(useSlidesStore())
+
+const audioIconSize = computed(() => {
+  return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
+})
+const audioPlayerPosition = computed(() => {
+  const canvasWidth = VIEWPORT_SIZE
+  const canvasHeight = VIEWPORT_SIZE * viewportRatio.value
+
+  const audioWidth = 280 / canvasScale.value
+  const audioHeight = 50 / canvasScale.value
+
+  const elWidth = props.elementInfo.width
+  const elHeight = props.elementInfo.height
+  const elLeft = props.elementInfo.left
+  const elTop = props.elementInfo.top
+
+  let left = 0
+  let top = elHeight
+  
+  if (elLeft + audioWidth >= canvasWidth) left = elWidth - audioWidth
+  if (elTop + elHeight + audioHeight >= canvasHeight) top = -audioHeight
+
+  return {
+    left: left + 'px',
+    top: top + 'px',
+  }
+})
+
+const handleSelectElement = (e: MouseEvent | TouchEvent) => {
+  if (props.elementInfo.lock) return
+  e.stopPropagation()
+
+  props.selectElement(e, props.elementInfo)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/ChartElement/BaseChartElement.vue b/src/views/components/element/ChartElement/BaseChartElement.vue
index 76bc9da2..d689155a 100644
--- a/src/views/components/element/ChartElement/BaseChartElement.vue
+++ b/src/views/components/element/ChartElement/BaseChartElement.vue
@@ -39,38 +39,25 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, inject, PropType, ref } from 'vue'
 import { PPTChartElement } from '@/types/slides'
 import { injectKeySlideScale } from '@/types/injectKey'
 
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
 import Chart from './Chart.vue'
 
-export default defineComponent({
-  name: 'base-element-chart',
-  components: {
-    ElementOutline,
-    Chart,
-  },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTChartElement>,
-      required: true,
-    },
-  },
-  setup() {
-    const slideScale = inject(injectKeySlideScale) || ref(1)
-
-    const needScaleSize = computed(() => slideScale.value < 1)
-    const zoom = computed(() => needScaleSize.value ? 1 / slideScale.value : 1)
-
-    return {
-      needScaleSize,
-      zoom,
-    }
+defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTChartElement>,
+    required: true,
   },
 })
+
+const slideScale = inject(injectKeySlideScale) || ref(1)
+
+const needScaleSize = computed(() => slideScale.value < 1)
+const zoom = computed(() => needScaleSize.value ? 1 / slideScale.value : 1)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/ChartElement/Chart.vue b/src/views/components/element/ChartElement/Chart.vue
index dac59cb7..714a1467 100644
--- a/src/views/components/element/ChartElement/Chart.vue
+++ b/src/views/components/element/ChartElement/Chart.vue
@@ -26,8 +26,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, onMounted, PropType, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, inject, onMounted, PropType, ref, watch } from 'vue'
 import { upperFirst } from 'lodash'
 import tinycolor from 'tinycolor2'
 import Chartist, {
@@ -40,134 +40,123 @@ import { injectKeySlideScale } from '@/types/injectKey'
 
 import 'chartist/dist/scss/chartist.scss'
 
-export default defineComponent({
-  name: 'chart',
-  props: {
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    type: {
-      type: String as PropType<ChartType>,
-      required: true,
-    },
-    data: {
-      type: Object as PropType<ChartData>,
-      required: true,
-    },
-    options: {
-      type: Object as PropType<ChartOptions>,
-    },
-    themeColor: {
-      type: Array as PropType<string[]>,
-      required: true,
-    },
-    legends: {
-      type: Array as PropType<string[]>,
-      required: true,
-    },
-    gridColor: {
-      type: String,
-    },
-    legend: {
-      type: String as PropType<'' | 'top' | 'bottom'>,
-    },
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
   },
-  setup(props) {
-    const chartRef = ref<HTMLElement>()
-    const slideScale = inject(injectKeySlideScale) || ref(1)
-
-    let chart: IChartistLineChart | IChartistBarChart | IChartistPieChart | undefined
-
-    const chartHeight = computed(() => {
-      if (props.legend) return props.height - 20
-      return props.height
-    })
-
-    const getDataAndOptions = () => {
-      const propsOptopns = props.options || {}
-      const options = {
-        ...propsOptopns,
-        width: props.width * slideScale.value,
-        height: chartHeight.value * slideScale.value,
-      }
-      const data = props.type === 'pie' ? { ...props.data, series: props.data.series[0] } : props.data
-      return { data, options }
-    }
-
-    const renderChart = () => {
-      if (!chartRef.value) return
-
-      const type = upperFirst(props.type)
-      const { data, options } = getDataAndOptions()
-      chart = new Chartist[type](chartRef.value, data, options)
-    }
-
-    const updateChart = () => {
-      if (!chart) {
-        renderChart()
-        return
-      }
-      const { data, options } = getDataAndOptions()
-      chart.update(data, options)
-    }
-
-    watch([
-      () => props.width,
-      () => props.height,
-      () => props.data,
-      () => props.options,
-      slideScale,
-    ], updateChart)
-
-    onMounted(renderChart)
-
-    const themeColors = computed(() => {
-      let colors: string[] = []
-      if (props.themeColor.length >= 10) colors = props.themeColor
-      else if (props.themeColor.length === 1) colors = tinycolor(props.themeColor[0]).analogous(10).map(color => color.toHexString())
-      else {
-        const len = props.themeColor.length
-        const supplement = tinycolor(props.themeColor[len - 1]).analogous(10 + 1 - len).map(color => color.toHexString())
-        colors = [...props.themeColor.slice(0, len - 1), ...supplement]
-      }
-      return colors
-    })
-
-    // 更新主题配色：
-    // 如果当前所设置的主题色数小于10，剩余部分获取最后一个主题色的相近颜色作为配色
-    const updateTheme = () => {
-      if (!chartRef.value) return
-
-      for (let i = 0; i < 10; i++) {
-        chartRef.value.style.setProperty(`--theme-color-${i + 1}`, themeColors.value[i])
-      }
-    }
-
-    watch(themeColors, updateTheme)
-    onMounted(updateTheme)
-
-    // 更新网格颜色，包括坐标的文字部分
-    const updateGridColor = () => {
-      if (!chartRef.value) return
-      if (props.gridColor) chartRef.value.style.setProperty(`--grid-color`, props.gridColor)
-    }
-
-    watch(() => props.gridColor, updateGridColor)
-    onMounted(updateGridColor)
-
-    return {
-      chartHeight,
-      themeColors,
-      slideScale,
-      chartRef,
-    }
+  height: {
+    type: Number,
+    required: true,
+  },
+  type: {
+    type: String as PropType<ChartType>,
+    required: true,
+  },
+  data: {
+    type: Object as PropType<ChartData>,
+    required: true,
+  },
+  options: {
+    type: Object as PropType<ChartOptions>,
+  },
+  themeColor: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+  legends: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+  gridColor: {
+    type: String,
+  },
+  legend: {
+    type: String as PropType<'' | 'top' | 'bottom'>,
   },
 })
+
+const chartRef = ref<HTMLElement>()
+const slideScale = inject(injectKeySlideScale) || ref(1)
+
+let chart: IChartistLineChart | IChartistBarChart | IChartistPieChart | undefined
+
+const chartHeight = computed(() => {
+  if (props.legend) return props.height - 20
+  return props.height
+})
+
+const getDataAndOptions = () => {
+  const propsOptopns = props.options || {}
+  const options = {
+    ...propsOptopns,
+    width: props.width * slideScale.value,
+    height: chartHeight.value * slideScale.value,
+  }
+  const data = props.type === 'pie' ? { ...props.data, series: props.data.series[0] } : props.data
+  return { data, options }
+}
+
+const renderChart = () => {
+  if (!chartRef.value) return
+
+  const type = upperFirst(props.type)
+  const { data, options } = getDataAndOptions()
+  chart = new Chartist[type](chartRef.value, data, options)
+}
+
+const updateChart = () => {
+  if (!chart) {
+    renderChart()
+    return
+  }
+  const { data, options } = getDataAndOptions()
+  chart.update(data, options)
+}
+
+watch([
+  () => props.width,
+  () => props.height,
+  () => props.data,
+  () => props.options,
+  slideScale,
+], updateChart)
+
+onMounted(renderChart)
+
+const themeColors = computed(() => {
+  let colors: string[] = []
+  if (props.themeColor.length >= 10) colors = props.themeColor
+  else if (props.themeColor.length === 1) colors = tinycolor(props.themeColor[0]).analogous(10).map(color => color.toHexString())
+  else {
+    const len = props.themeColor.length
+    const supplement = tinycolor(props.themeColor[len - 1]).analogous(10 + 1 - len).map(color => color.toHexString())
+    colors = [...props.themeColor.slice(0, len - 1), ...supplement]
+  }
+  return colors
+})
+
+// 更新主题配色：
+// 如果当前所设置的主题色数小于10，剩余部分获取最后一个主题色的相近颜色作为配色
+const updateTheme = () => {
+  if (!chartRef.value) return
+
+  for (let i = 0; i < 10; i++) {
+    chartRef.value.style.setProperty(`--theme-color-${i + 1}`, themeColors.value[i])
+  }
+}
+
+watch(themeColors, updateTheme)
+onMounted(updateTheme)
+
+// 更新网格颜色，包括坐标的文字部分
+const updateGridColor = () => {
+  if (!chartRef.value) return
+  if (props.gridColor) chartRef.value.style.setProperty(`--grid-color`, props.gridColor)
+}
+
+watch(() => props.gridColor, updateGridColor)
+onMounted(updateGridColor)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/ChartElement/ScreenChartElement.vue b/src/views/components/element/ChartElement/ScreenChartElement.vue
index b33a1707..e55d954e 100644
--- a/src/views/components/element/ChartElement/ScreenChartElement.vue
+++ b/src/views/components/element/ChartElement/ScreenChartElement.vue
@@ -2,22 +2,16 @@
   <BaseChartElement class="screen-element-chart" :elementInfo="elementInfo" />
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 import { PPTChartElement } from '@/types/slides'
 
 import BaseChartElement from './BaseChartElement.vue'
 
-export default defineComponent({
-  name: 'screen-element-chart',
-  components: {
-    BaseChartElement,
-  },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTChartElement>,
-      required: true,
-    },
+defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTChartElement>,
+    required: true,
   },
 })
 </script>
diff --git a/src/views/components/element/ChartElement/index.vue b/src/views/components/element/ChartElement/index.vue
index 8fd37232..b0245401 100644
--- a/src/views/components/element/ChartElement/index.vue
+++ b/src/views/components/element/ChartElement/index.vue
@@ -43,8 +43,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 import { PPTChartElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import emitter, { EmitterEvents } from '@/utils/emitter'
@@ -52,43 +52,30 @@ import emitter, { EmitterEvents } from '@/utils/emitter'
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
 import Chart from './Chart.vue'
 
-export default defineComponent({
-  name: 'editable-element-chart',
-  components: {
-    ElementOutline,
-    Chart,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTChartElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTChartElement>,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTChartElement, canMove?: boolean) => void>,
-      required: true,
-    },
-    contextmenus: {
-      type: Function as PropType<() => ContextmenuItem[] | null>,
-    },
+  selectElement: {
+    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTChartElement, canMove?: boolean) => void>,
+    required: true,
   },
-  setup(props) {
-    const handleSelectElement = (e: MouseEvent | TouchEvent) => {
-      if (props.elementInfo.lock) return
-      e.stopPropagation()
-
-      props.selectElement(e, props.elementInfo)
-    }
-
-    const openDataEditor = () => {
-      emitter.emit(EmitterEvents.OPEN_CHART_DATA_EDITOR)
-    }
-
-    return {
-      handleSelectElement,
-      openDataEditor,
-    }
+  contextmenus: {
+    type: Function as PropType<() => ContextmenuItem[] | null>,
   },
 })
+
+const handleSelectElement = (e: MouseEvent | TouchEvent) => {
+  if (props.elementInfo.lock) return
+  e.stopPropagation()
+
+  props.selectElement(e, props.elementInfo)
+}
+
+const openDataEditor = () => {
+  emitter.emit(EmitterEvents.OPEN_CHART_DATA_EDITOR)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/ElementOutline.vue b/src/views/components/element/ElementOutline.vue
index 6850adb6..63b40e86 100644
--- a/src/views/components/element/ElementOutline.vue
+++ b/src/views/components/element/ElementOutline.vue
@@ -19,40 +19,31 @@
 	</svg>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, toRef } from 'vue'
+<script lang="ts" setup>
+import { PropType, toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
+
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
-export default defineComponent({
-  name: 'element-outline',
-  props: {
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    outline: {
-      type: Object as PropType<PPTElementOutline>
-    },
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
   },
-  setup(props) {
-    const {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    } = useElementOutline(toRef(props, 'outline'))
-
-    return {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    }
+  height: {
+    type: Number,
+    required: true,
+  },
+  outline: {
+    type: Object as PropType<PPTElementOutline>
   },
 })
+
+const {
+  outlineWidth,
+  outlineStyle,
+  outlineColor,
+} = useElementOutline(toRef(props, 'outline'))
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/ImageElement/BaseImageElement.vue b/src/views/components/element/ImageElement/BaseImageElement.vue
index c759bbf0..78c44f84 100644
--- a/src/views/components/element/ImageElement/BaseImageElement.vue
+++ b/src/views/components/element/ImageElement/BaseImageElement.vue
@@ -40,8 +40,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { PPTImageElement } from '@/types/slides'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 import useElementFlip from '@/views/components/element/hooks/useElementFlip'
@@ -50,40 +50,25 @@ import useFilter from './useFilter'
 
 import ImageOutline from './ImageOutline/index.vue'
 
-export default defineComponent({
-  name: 'base-element-image',
-  components: {
-    ImageOutline,
-  },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTImageElement>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const shadow = computed(() => props.elementInfo.shadow)
-    const { shadowStyle } = useElementShadow(shadow)
-
-    const flipH = computed(() => props.elementInfo.flipH)
-    const flipV = computed(() => props.elementInfo.flipV)
-    const { flipStyle } = useElementFlip(flipH, flipV)
-    
-    const clip = computed(() => props.elementInfo.clip)
-    const { clipShape, imgPosition } = useClipImage(clip)
-
-    const filters = computed(() => props.elementInfo.filters)
-    const { filter } = useFilter(filters)
-
-    return {
-      imgPosition,
-      filter,
-      flipStyle,
-      shadowStyle,
-      clipShape,
-    }
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTImageElement>,
+    required: true,
   },
 })
+
+const shadow = computed(() => props.elementInfo.shadow)
+const { shadowStyle } = useElementShadow(shadow)
+
+const flipH = computed(() => props.elementInfo.flipH)
+const flipV = computed(() => props.elementInfo.flipV)
+const { flipStyle } = useElementFlip(flipH, flipV)
+
+const clip = computed(() => props.elementInfo.clip)
+const { clipShape, imgPosition } = useClipImage(clip)
+
+const filters = computed(() => props.elementInfo.filters)
+const { filter } = useFilter(filters)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/ImageElement/ImageClipHandler.vue b/src/views/components/element/ImageElement/ImageClipHandler.vue
index 3852d9c7..f6bb6232 100644
--- a/src/views/components/element/ImageElement/ImageClipHandler.vue
+++ b/src/views/components/element/ImageElement/ImageClipHandler.vue
@@ -65,496 +65,482 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, PropType, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useKeyboardStore } from '@/store'
 import { KEYS } from '@/configs/hotkey'
 import { ImageClipedEmitData, OperateResizeHandlers } from '@/types/edit'
 import { ImageClipDataRange, ImageElementClip } from '@/types/slides'
 
-export default defineComponent({
-  name: 'image-clip-handler',
-  emits: ['clip'],
-  props: {
-    src: {
-      type: String,
-      required: true,
-    },
-    clipData: {
-      type: Object as PropType<ImageElementClip>,
-    },
-    clipPath: {
-      type: String,
-      required: true,
-    },
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    top: {
-      type: Number,
-      required: true,
-    },
-    left: {
-      type: Number,
-      required: true,
-    },
-    rotate: {
-      type: Number,
-      required: true,
-    },
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
   },
-  setup(props, { emit }) {
-    const { canvasScale } = storeToRefs(useMainStore())
-    const { ctrlOrShiftKeyActive } = storeToRefs(useKeyboardStore())
-
-    const clipWrapperPositionStyle = ref({
-      top: '0',
-      left: '0',
-    })
-    const isSettingClipRange = ref(false)
-    const currentRange = ref<ImageClipDataRange | null>(null)
-
-    // 获取裁剪区域信息（裁剪区域占原图的宽高比例，处在原图中的位置）
-    const getClipDataTransformInfo = () => {
-      const [start, end] = props.clipData ? props.clipData.range : [[0, 0], [100, 100]]
-
-      const widthScale = (end[0] - start[0]) / 100
-      const heightScale = (end[1] - start[1]) / 100
-      const left = start[0] / widthScale
-      const top = start[1] / heightScale
-
-      return { widthScale, heightScale, left, top }
-    }
-    
-    // 底层图片位置大小（遮罩区域图片）
-    const imgPosition = computed(() => {
-      const { widthScale, heightScale, left, top } = getClipDataTransformInfo()
-      return {
-        left: -left,
-        top: -top,
-        width: 100 / widthScale,
-        height: 100 / heightScale,
-      }
-    })
-
-    // 底层图片位置大小样式（遮罩区域图片）
-    const bottomImgPositionStyle = computed(() => {
-      return {
-        top: imgPosition.value.top + '%',
-        left: imgPosition.value.left + '%',
-        width: imgPosition.value.width + '%',
-        height: imgPosition.value.height + '%',
-      }
-    })
-
-    // 顶层图片容器位置大小（裁剪高亮区域）
-    const topImgWrapperPosition = ref({
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0,
-    })
-
-    // 顶层图片容器位置大小样式（裁剪高亮区域）
-    const topImgWrapperPositionStyle = computed(() => {
-      const { top, left, width, height } = topImgWrapperPosition.value
-      return {
-        top: top + '%',
-        left: left + '%',
-        width: width + '%',
-        height: height + '%',
-      }
-    })
-
-    // 顶层图片位置大小样式（裁剪区域图片）
-    const topImgPositionStyle = computed(() => {
-      const bottomWidth = imgPosition.value.width
-      const bottomHeight = imgPosition.value.height
-      
-      const { top, left, width, height } = topImgWrapperPosition.value
-      
-      return {
-        left: -left * (100 / width) + '%',
-        top: -top * (100 / height) + '%',
-        width: bottomWidth / width * 100 + '%',
-        height: bottomHeight / height * 100 + '%',
-      }
-    })
-
-    // 初始化裁剪位置信息
-    const initClipPosition = () => {
-      const { left, top } = getClipDataTransformInfo()
-      topImgWrapperPosition.value = {
-        left: left,
-        top: top,
-        width: 100,
-        height: 100,
-      }
-      
-      clipWrapperPositionStyle.value = {
-        top: -top + '%',
-        left: -left + '%',
-      }
-    }
-
-    // 执行裁剪：计算裁剪后的图片位置大小和裁剪信息，并将数据同步出去
-    const handleClip = () => {
-      if (isSettingClipRange.value) return
-
-      if (!currentRange.value) {
-        emit('clip', null)
-        return
-      }
-
-      const { left, top } = getClipDataTransformInfo()
-
-      const position = {
-        left: (topImgWrapperPosition.value.left - left) / 100 * props.width,
-        top: (topImgWrapperPosition.value.top - top) / 100 * props.height,
-        width: (topImgWrapperPosition.value.width - 100) / 100 * props.width,
-        height: (topImgWrapperPosition.value.height - 100) / 100 * props.height,
-      }
-
-      const clipedEmitData: ImageClipedEmitData = {
-        range: currentRange.value,
-        position,
-      }
-      emit('clip', clipedEmitData)
-    }
-
-    // 快捷键监听：回车确认裁剪
-    const keyboardListener = (e: KeyboardEvent) => {
-      const key = e.key.toUpperCase()
-      if (key === KEYS.ENTER) handleClip()
-    }
-
-    onMounted(() => {
-      initClipPosition()
-      document.addEventListener('keydown', keyboardListener)
-    })
-    onUnmounted(() => {
-      document.removeEventListener('keydown', keyboardListener)
-    })
-
-    // 计算并更新裁剪区域范围数据
-    const updateRange = () => {
-      const retPosition = {
-        left: parseInt(topImgPositionStyle.value.left),
-        top: parseInt(topImgPositionStyle.value.top),
-        width: parseInt(topImgPositionStyle.value.width),
-        height: parseInt(topImgPositionStyle.value.height),
-      }
-
-      const widthScale = 100 / retPosition.width
-      const heightScale = 100 / retPosition.height
-
-      const start: [number, number] = [
-        -retPosition.left * widthScale,
-        -retPosition.top * heightScale,
-      ]
-      const end: [number, number] = [
-        widthScale * 100 + start[0],
-        heightScale * 100 + start[1],
-      ]
-
-      currentRange.value = [start, end]
-    }
-
-    // 移动裁剪区域
-    const moveClipRange = (e: MouseEvent) => {
-      isSettingClipRange.value = true
-      let isMouseDown = true
-
-      const startPageX = e.pageX
-      const startPageY = e.pageY
-      const bottomPosition = imgPosition.value
-      const originPositopn = { ...topImgWrapperPosition.value }
-
-      document.onmousemove = e => {
-        if (!isMouseDown) return
-
-        const currentPageX = e.pageX
-        const currentPageY = e.pageY
-
-        let moveX = (currentPageX - startPageX) / canvasScale.value / props.width * 100
-        let moveY = (currentPageY - startPageY) / canvasScale.value / props.height * 100
-
-        if (props.rotate > 45 && props.rotate < 135) {
-          moveX = (currentPageY - startPageY) / canvasScale.value / props.width * 100
-          moveY = -(currentPageX - startPageX) / canvasScale.value / props.height * 100
-        }
-        if ((props.rotate >= 135 && props.rotate <= 180) || (props.rotate >= -180 && props.rotate <= -135)) {
-          moveX = -moveX
-          moveY = -moveY
-        }
-        if (props.rotate > -135 && props.rotate < -45) {
-          moveX = -(currentPageY - startPageY) / canvasScale.value / props.width * 100
-          moveY = (currentPageX - startPageX) / canvasScale.value / props.height * 100
-        }
-
-        let targetLeft = originPositopn.left + moveX
-        let targetTop = originPositopn.top + moveY
-
-        if (targetLeft < 0) targetLeft = 0
-        else if (targetLeft + originPositopn.width > bottomPosition.width) {
-          targetLeft = bottomPosition.width - originPositopn.width
-        }
-        if (targetTop < 0) targetTop = 0
-        else if (targetTop + originPositopn.height > bottomPosition.height) {
-          targetTop = bottomPosition.height - originPositopn.height
-        }
-        
-        topImgWrapperPosition.value = {
-          ...topImgWrapperPosition.value,
-          left: targetLeft,
-          top: targetTop,
-        }
-      }
-
-      document.onmouseup = () => {
-        isMouseDown = false
-        document.onmousemove = null
-        document.onmouseup = null
-
-        updateRange()
-
-        setTimeout(() => {
-          isSettingClipRange.value = false
-        }, 0)
-      }
-    }
-
-    // 缩放裁剪区域
-    const scaleClipRange = (e: MouseEvent, type: OperateResizeHandlers) => {
-      isSettingClipRange.value = true
-      let isMouseDown = true
-
-      const minWidth = 50 / props.width * 100
-      const minHeight = 50 / props.height * 100
-      
-      const startPageX = e.pageX
-      const startPageY = e.pageY
-      const bottomPosition = imgPosition.value
-      const originPositopn = { ...topImgWrapperPosition.value }
-
-      const aspectRatio = topImgWrapperPosition.value.width / topImgWrapperPosition.value.height
-
-      document.onmousemove = e => {
-        if (!isMouseDown) return
-
-        const currentPageX = e.pageX
-        const currentPageY = e.pageY
-
-        let moveX = (currentPageX - startPageX) / canvasScale.value / props.width * 100
-        let moveY = (currentPageY - startPageY) / canvasScale.value / props.height * 100
-
-        if (props.rotate > 45 && props.rotate < 135) {
-          moveX = (currentPageY - startPageY) / canvasScale.value / props.width * 100
-          moveY = -(currentPageX - startPageX) / canvasScale.value / props.height * 100
-        }
-        if ((props.rotate >= 135 && props.rotate <= 180) || (props.rotate >= -180 && props.rotate <= -135)) {
-          moveX = -moveX
-          moveY = -moveY
-        }
-        if (props.rotate > -135 && props.rotate < -45) {
-          moveX = -(currentPageY - startPageY) / canvasScale.value / props.width * 100
-          moveY = (currentPageX - startPageX) / canvasScale.value / props.height * 100
-        }
-
-        if (ctrlOrShiftKeyActive.value) {
-          if (type === OperateResizeHandlers.RIGHT_BOTTOM || type === OperateResizeHandlers.LEFT_TOP) moveY = moveX / aspectRatio
-          if (type === OperateResizeHandlers.LEFT_BOTTOM || type === OperateResizeHandlers.RIGHT_TOP) moveY = -moveX / aspectRatio
-        }
-
-        let targetLeft, targetTop, targetWidth, targetHeight
-
-        if (type === OperateResizeHandlers.LEFT_TOP) {
-          if (originPositopn.left + moveX < 0) {
-            moveX = -originPositopn.left
-          }
-          if (originPositopn.top + moveY < 0) {
-            moveY = -originPositopn.top
-          }
-          if (originPositopn.width - moveX < minWidth) {
-            moveX = originPositopn.width - minWidth
-          }
-          if (originPositopn.height - moveY < minHeight) {
-            moveY = originPositopn.height - minHeight
-          }
-          targetWidth = originPositopn.width - moveX
-          targetHeight = originPositopn.height - moveY
-          targetLeft = originPositopn.left + moveX
-          targetTop = originPositopn.top + moveY
-        }
-        else if (type === OperateResizeHandlers.RIGHT_TOP) {
-          if (originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
-            moveX = bottomPosition.width - (originPositopn.left + originPositopn.width)
-          }
-          if (originPositopn.top + moveY < 0) {
-            moveY = -originPositopn.top
-          }
-          if (originPositopn.width + moveX < minWidth) {
-            moveX = minWidth - originPositopn.width
-          }
-          if (originPositopn.height - moveY < minHeight) {
-            moveY = originPositopn.height - minHeight
-          }
-          targetWidth = originPositopn.width + moveX
-          targetHeight = originPositopn.height - moveY
-          targetLeft = originPositopn.left
-          targetTop = originPositopn.top + moveY
-        }
-        else if (type === OperateResizeHandlers.LEFT_BOTTOM) {
-          if (originPositopn.left + moveX < 0) {
-            moveX = -originPositopn.left
-          }
-          if (originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
-            moveY = bottomPosition.height - (originPositopn.top + originPositopn.height)
-          }
-          if (originPositopn.width - moveX < minWidth) {
-            moveX = originPositopn.width - minWidth
-          }
-          if (originPositopn.height + moveY < minHeight) {
-            moveY = minHeight - originPositopn.height
-          }
-          targetWidth = originPositopn.width - moveX
-          targetHeight = originPositopn.height + moveY
-          targetLeft = originPositopn.left + moveX
-          targetTop = originPositopn.top
-        }
-        else if (type === OperateResizeHandlers.RIGHT_BOTTOM) {
-          if (originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
-            moveX = bottomPosition.width - (originPositopn.left + originPositopn.width)
-          }
-          if (originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
-            moveY = bottomPosition.height - (originPositopn.top + originPositopn.height)
-          }
-          if (originPositopn.width + moveX < minWidth) {
-            moveX = minWidth - originPositopn.width
-          }
-          if (originPositopn.height + moveY < minHeight) {
-            moveY = minHeight - originPositopn.height
-          }
-          targetWidth = originPositopn.width + moveX
-          targetHeight = originPositopn.height + moveY
-          targetLeft = originPositopn.left
-          targetTop = originPositopn.top
-        }
-        else if (type === OperateResizeHandlers.TOP) {
-          if (originPositopn.top + moveY < 0) {
-            moveY = -originPositopn.top
-          }
-          if (originPositopn.height - moveY < minHeight) {
-            moveY = originPositopn.height - minHeight
-          }
-          targetWidth = originPositopn.width
-          targetHeight = originPositopn.height - moveY
-          targetLeft = originPositopn.left
-          targetTop = originPositopn.top + moveY
-        }
-        else if (type === OperateResizeHandlers.BOTTOM) {
-          if (originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
-            moveY = bottomPosition.height - (originPositopn.top + originPositopn.height)
-          }
-          if (originPositopn.height + moveY < minHeight) {
-            moveY = minHeight - originPositopn.height
-          }
-          targetWidth = originPositopn.width
-          targetHeight = originPositopn.height + moveY
-          targetLeft = originPositopn.left
-          targetTop = originPositopn.top
-        }
-        else if (type === OperateResizeHandlers.LEFT) {
-          if (originPositopn.left + moveX < 0) {
-            moveX = -originPositopn.left
-          }
-          if (originPositopn.width - moveX < minWidth) {
-            moveX = originPositopn.width - minWidth
-          }
-          targetWidth = originPositopn.width - moveX
-          targetHeight = originPositopn.height
-          targetLeft = originPositopn.left + moveX
-          targetTop = originPositopn.top
-        }
-        else {
-          if (originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
-            moveX = bottomPosition.width - (originPositopn.left + originPositopn.width)
-          }
-          if (originPositopn.width + moveX < minWidth) {
-            moveX = minWidth - originPositopn.width
-          }
-          targetHeight = originPositopn.height
-          targetWidth = originPositopn.width + moveX
-          targetLeft = originPositopn.left
-          targetTop = originPositopn.top
-        }
-
-        topImgWrapperPosition.value = {
-          left: targetLeft,
-          top: targetTop,
-          width: targetWidth,
-          height: targetHeight,
-        }
-      }
-
-      document.onmouseup = () => {
-        isMouseDown = false
-        document.onmousemove = null
-        document.onmouseup = null
-
-        updateRange()
-
-        setTimeout(() => isSettingClipRange.value = false, 0)
-      }
-    }
-
-    const rotateClassName = computed(() => {
-      const prefix = 'rotate-'
-      const rotate = props.rotate
-      if (rotate > -22.5 && rotate <= 22.5) return prefix + 0
-      else if (rotate > 22.5 && rotate <= 67.5) return prefix + 45
-      else if (rotate > 67.5 && rotate <= 112.5) return prefix + 90
-      else if (rotate > 112.5 && rotate <= 157.5) return prefix + 135
-      else if (rotate > 157.5 || rotate <= -157.5) return prefix + 0
-      else if (rotate > -157.5 && rotate <= -112.5) return prefix + 45
-      else if (rotate > -112.5 && rotate <= -67.5) return prefix + 90
-      else if (rotate > -67.5 && rotate <= -22.5) return prefix + 135
-      return prefix + 0
-    })
-
-    const cornerPoint = [
-      OperateResizeHandlers.LEFT_TOP,
-      OperateResizeHandlers.RIGHT_TOP,
-      OperateResizeHandlers.LEFT_BOTTOM,
-      OperateResizeHandlers.RIGHT_BOTTOM,
-    ]
-    const edgePoints = [
-      OperateResizeHandlers.TOP,
-      OperateResizeHandlers.BOTTOM,
-      OperateResizeHandlers.LEFT,
-      OperateResizeHandlers.RIGHT,
-    ]
-
-    return {
-      clipWrapperPositionStyle,
-      bottomImgPositionStyle,
-      topImgWrapperPositionStyle,
-      topImgPositionStyle,
-      rotateClassName,
-      edgePoints,
-      cornerPoint,
-      handleClip,
-      moveClipRange,
-      scaleClipRange,
-    }
+  clipData: {
+    type: Object as PropType<ImageElementClip>,
+  },
+  clipPath: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  top: {
+    type: Number,
+    required: true,
+  },
+  left: {
+    type: Number,
+    required: true,
+  },
+  rotate: {
+    type: Number,
+    required: true,
   },
 })
+
+const emit = defineEmits<{
+  (event: 'clip', payload: ImageClipedEmitData | null): void
+}>()
+
+const { canvasScale } = storeToRefs(useMainStore())
+const { ctrlOrShiftKeyActive } = storeToRefs(useKeyboardStore())
+
+const clipWrapperPositionStyle = ref({
+  top: '0',
+  left: '0',
+})
+const isSettingClipRange = ref(false)
+const currentRange = ref<ImageClipDataRange | null>(null)
+
+// 获取裁剪区域信息（裁剪区域占原图的宽高比例，处在原图中的位置）
+const getClipDataTransformInfo = () => {
+  const [start, end] = props.clipData ? props.clipData.range : [[0, 0], [100, 100]]
+
+  const widthScale = (end[0] - start[0]) / 100
+  const heightScale = (end[1] - start[1]) / 100
+  const left = start[0] / widthScale
+  const top = start[1] / heightScale
+
+  return { widthScale, heightScale, left, top }
+}
+
+// 底层图片位置大小（遮罩区域图片）
+const imgPosition = computed(() => {
+  const { widthScale, heightScale, left, top } = getClipDataTransformInfo()
+  return {
+    left: -left,
+    top: -top,
+    width: 100 / widthScale,
+    height: 100 / heightScale,
+  }
+})
+
+// 底层图片位置大小样式（遮罩区域图片）
+const bottomImgPositionStyle = computed(() => {
+  return {
+    top: imgPosition.value.top + '%',
+    left: imgPosition.value.left + '%',
+    width: imgPosition.value.width + '%',
+    height: imgPosition.value.height + '%',
+  }
+})
+
+// 顶层图片容器位置大小（裁剪高亮区域）
+const topImgWrapperPosition = ref({
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+})
+
+// 顶层图片容器位置大小样式（裁剪高亮区域）
+const topImgWrapperPositionStyle = computed(() => {
+  const { top, left, width, height } = topImgWrapperPosition.value
+  return {
+    top: top + '%',
+    left: left + '%',
+    width: width + '%',
+    height: height + '%',
+  }
+})
+
+// 顶层图片位置大小样式（裁剪区域图片）
+const topImgPositionStyle = computed(() => {
+  const bottomWidth = imgPosition.value.width
+  const bottomHeight = imgPosition.value.height
+  
+  const { top, left, width, height } = topImgWrapperPosition.value
+  
+  return {
+    left: -left * (100 / width) + '%',
+    top: -top * (100 / height) + '%',
+    width: bottomWidth / width * 100 + '%',
+    height: bottomHeight / height * 100 + '%',
+  }
+})
+
+// 初始化裁剪位置信息
+const initClipPosition = () => {
+  const { left, top } = getClipDataTransformInfo()
+  topImgWrapperPosition.value = {
+    left: left,
+    top: top,
+    width: 100,
+    height: 100,
+  }
+  
+  clipWrapperPositionStyle.value = {
+    top: -top + '%',
+    left: -left + '%',
+  }
+}
+
+// 执行裁剪：计算裁剪后的图片位置大小和裁剪信息，并将数据同步出去
+const handleClip = () => {
+  if (isSettingClipRange.value) return
+
+  if (!currentRange.value) {
+    emit('clip', null)
+    return
+  }
+
+  const { left, top } = getClipDataTransformInfo()
+
+  const position = {
+    left: (topImgWrapperPosition.value.left - left) / 100 * props.width,
+    top: (topImgWrapperPosition.value.top - top) / 100 * props.height,
+    width: (topImgWrapperPosition.value.width - 100) / 100 * props.width,
+    height: (topImgWrapperPosition.value.height - 100) / 100 * props.height,
+  }
+
+  const clipedEmitData: ImageClipedEmitData = {
+    range: currentRange.value,
+    position,
+  }
+  emit('clip', clipedEmitData)
+}
+
+// 快捷键监听：回车确认裁剪
+const keyboardListener = (e: KeyboardEvent) => {
+  const key = e.key.toUpperCase()
+  if (key === KEYS.ENTER) handleClip()
+}
+
+onMounted(() => {
+  initClipPosition()
+  document.addEventListener('keydown', keyboardListener)
+})
+onUnmounted(() => {
+  document.removeEventListener('keydown', keyboardListener)
+})
+
+// 计算并更新裁剪区域范围数据
+const updateRange = () => {
+  const retPosition = {
+    left: parseInt(topImgPositionStyle.value.left),
+    top: parseInt(topImgPositionStyle.value.top),
+    width: parseInt(topImgPositionStyle.value.width),
+    height: parseInt(topImgPositionStyle.value.height),
+  }
+
+  const widthScale = 100 / retPosition.width
+  const heightScale = 100 / retPosition.height
+
+  const start: [number, number] = [
+    -retPosition.left * widthScale,
+    -retPosition.top * heightScale,
+  ]
+  const end: [number, number] = [
+    widthScale * 100 + start[0],
+    heightScale * 100 + start[1],
+  ]
+
+  currentRange.value = [start, end]
+}
+
+// 移动裁剪区域
+const moveClipRange = (e: MouseEvent) => {
+  isSettingClipRange.value = true
+  let isMouseDown = true
+
+  const startPageX = e.pageX
+  const startPageY = e.pageY
+  const bottomPosition = imgPosition.value
+  const originPositopn = { ...topImgWrapperPosition.value }
+
+  document.onmousemove = e => {
+    if (!isMouseDown) return
+
+    const currentPageX = e.pageX
+    const currentPageY = e.pageY
+
+    let moveX = (currentPageX - startPageX) / canvasScale.value / props.width * 100
+    let moveY = (currentPageY - startPageY) / canvasScale.value / props.height * 100
+
+    if (props.rotate > 45 && props.rotate < 135) {
+      moveX = (currentPageY - startPageY) / canvasScale.value / props.width * 100
+      moveY = -(currentPageX - startPageX) / canvasScale.value / props.height * 100
+    }
+    if ((props.rotate >= 135 && props.rotate <= 180) || (props.rotate >= -180 && props.rotate <= -135)) {
+      moveX = -moveX
+      moveY = -moveY
+    }
+    if (props.rotate > -135 && props.rotate < -45) {
+      moveX = -(currentPageY - startPageY) / canvasScale.value / props.width * 100
+      moveY = (currentPageX - startPageX) / canvasScale.value / props.height * 100
+    }
+
+    let targetLeft = originPositopn.left + moveX
+    let targetTop = originPositopn.top + moveY
+
+    if (targetLeft < 0) targetLeft = 0
+    else if (targetLeft + originPositopn.width > bottomPosition.width) {
+      targetLeft = bottomPosition.width - originPositopn.width
+    }
+    if (targetTop < 0) targetTop = 0
+    else if (targetTop + originPositopn.height > bottomPosition.height) {
+      targetTop = bottomPosition.height - originPositopn.height
+    }
+    
+    topImgWrapperPosition.value = {
+      ...topImgWrapperPosition.value,
+      left: targetLeft,
+      top: targetTop,
+    }
+  }
+
+  document.onmouseup = () => {
+    isMouseDown = false
+    document.onmousemove = null
+    document.onmouseup = null
+
+    updateRange()
+
+    setTimeout(() => {
+      isSettingClipRange.value = false
+    }, 0)
+  }
+}
+
+// 缩放裁剪区域
+const scaleClipRange = (e: MouseEvent, type: OperateResizeHandlers) => {
+  isSettingClipRange.value = true
+  let isMouseDown = true
+
+  const minWidth = 50 / props.width * 100
+  const minHeight = 50 / props.height * 100
+  
+  const startPageX = e.pageX
+  const startPageY = e.pageY
+  const bottomPosition = imgPosition.value
+  const originPositopn = { ...topImgWrapperPosition.value }
+
+  const aspectRatio = topImgWrapperPosition.value.width / topImgWrapperPosition.value.height
+
+  document.onmousemove = e => {
+    if (!isMouseDown) return
+
+    const currentPageX = e.pageX
+    const currentPageY = e.pageY
+
+    let moveX = (currentPageX - startPageX) / canvasScale.value / props.width * 100
+    let moveY = (currentPageY - startPageY) / canvasScale.value / props.height * 100
+
+    if (props.rotate > 45 && props.rotate < 135) {
+      moveX = (currentPageY - startPageY) / canvasScale.value / props.width * 100
+      moveY = -(currentPageX - startPageX) / canvasScale.value / props.height * 100
+    }
+    if ((props.rotate >= 135 && props.rotate <= 180) || (props.rotate >= -180 && props.rotate <= -135)) {
+      moveX = -moveX
+      moveY = -moveY
+    }
+    if (props.rotate > -135 && props.rotate < -45) {
+      moveX = -(currentPageY - startPageY) / canvasScale.value / props.width * 100
+      moveY = (currentPageX - startPageX) / canvasScale.value / props.height * 100
+    }
+
+    if (ctrlOrShiftKeyActive.value) {
+      if (type === OperateResizeHandlers.RIGHT_BOTTOM || type === OperateResizeHandlers.LEFT_TOP) moveY = moveX / aspectRatio
+      if (type === OperateResizeHandlers.LEFT_BOTTOM || type === OperateResizeHandlers.RIGHT_TOP) moveY = -moveX / aspectRatio
+    }
+
+    let targetLeft, targetTop, targetWidth, targetHeight
+
+    if (type === OperateResizeHandlers.LEFT_TOP) {
+      if (originPositopn.left + moveX < 0) {
+        moveX = -originPositopn.left
+      }
+      if (originPositopn.top + moveY < 0) {
+        moveY = -originPositopn.top
+      }
+      if (originPositopn.width - moveX < minWidth) {
+        moveX = originPositopn.width - minWidth
+      }
+      if (originPositopn.height - moveY < minHeight) {
+        moveY = originPositopn.height - minHeight
+      }
+      targetWidth = originPositopn.width - moveX
+      targetHeight = originPositopn.height - moveY
+      targetLeft = originPositopn.left + moveX
+      targetTop = originPositopn.top + moveY
+    }
+    else if (type === OperateResizeHandlers.RIGHT_TOP) {
+      if (originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
+        moveX = bottomPosition.width - (originPositopn.left + originPositopn.width)
+      }
+      if (originPositopn.top + moveY < 0) {
+        moveY = -originPositopn.top
+      }
+      if (originPositopn.width + moveX < minWidth) {
+        moveX = minWidth - originPositopn.width
+      }
+      if (originPositopn.height - moveY < minHeight) {
+        moveY = originPositopn.height - minHeight
+      }
+      targetWidth = originPositopn.width + moveX
+      targetHeight = originPositopn.height - moveY
+      targetLeft = originPositopn.left
+      targetTop = originPositopn.top + moveY
+    }
+    else if (type === OperateResizeHandlers.LEFT_BOTTOM) {
+      if (originPositopn.left + moveX < 0) {
+        moveX = -originPositopn.left
+      }
+      if (originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
+        moveY = bottomPosition.height - (originPositopn.top + originPositopn.height)
+      }
+      if (originPositopn.width - moveX < minWidth) {
+        moveX = originPositopn.width - minWidth
+      }
+      if (originPositopn.height + moveY < minHeight) {
+        moveY = minHeight - originPositopn.height
+      }
+      targetWidth = originPositopn.width - moveX
+      targetHeight = originPositopn.height + moveY
+      targetLeft = originPositopn.left + moveX
+      targetTop = originPositopn.top
+    }
+    else if (type === OperateResizeHandlers.RIGHT_BOTTOM) {
+      if (originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
+        moveX = bottomPosition.width - (originPositopn.left + originPositopn.width)
+      }
+      if (originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
+        moveY = bottomPosition.height - (originPositopn.top + originPositopn.height)
+      }
+      if (originPositopn.width + moveX < minWidth) {
+        moveX = minWidth - originPositopn.width
+      }
+      if (originPositopn.height + moveY < minHeight) {
+        moveY = minHeight - originPositopn.height
+      }
+      targetWidth = originPositopn.width + moveX
+      targetHeight = originPositopn.height + moveY
+      targetLeft = originPositopn.left
+      targetTop = originPositopn.top
+    }
+    else if (type === OperateResizeHandlers.TOP) {
+      if (originPositopn.top + moveY < 0) {
+        moveY = -originPositopn.top
+      }
+      if (originPositopn.height - moveY < minHeight) {
+        moveY = originPositopn.height - minHeight
+      }
+      targetWidth = originPositopn.width
+      targetHeight = originPositopn.height - moveY
+      targetLeft = originPositopn.left
+      targetTop = originPositopn.top + moveY
+    }
+    else if (type === OperateResizeHandlers.BOTTOM) {
+      if (originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
+        moveY = bottomPosition.height - (originPositopn.top + originPositopn.height)
+      }
+      if (originPositopn.height + moveY < minHeight) {
+        moveY = minHeight - originPositopn.height
+      }
+      targetWidth = originPositopn.width
+      targetHeight = originPositopn.height + moveY
+      targetLeft = originPositopn.left
+      targetTop = originPositopn.top
+    }
+    else if (type === OperateResizeHandlers.LEFT) {
+      if (originPositopn.left + moveX < 0) {
+        moveX = -originPositopn.left
+      }
+      if (originPositopn.width - moveX < minWidth) {
+        moveX = originPositopn.width - minWidth
+      }
+      targetWidth = originPositopn.width - moveX
+      targetHeight = originPositopn.height
+      targetLeft = originPositopn.left + moveX
+      targetTop = originPositopn.top
+    }
+    else {
+      if (originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
+        moveX = bottomPosition.width - (originPositopn.left + originPositopn.width)
+      }
+      if (originPositopn.width + moveX < minWidth) {
+        moveX = minWidth - originPositopn.width
+      }
+      targetHeight = originPositopn.height
+      targetWidth = originPositopn.width + moveX
+      targetLeft = originPositopn.left
+      targetTop = originPositopn.top
+    }
+
+    topImgWrapperPosition.value = {
+      left: targetLeft,
+      top: targetTop,
+      width: targetWidth,
+      height: targetHeight,
+    }
+  }
+
+  document.onmouseup = () => {
+    isMouseDown = false
+    document.onmousemove = null
+    document.onmouseup = null
+
+    updateRange()
+
+    setTimeout(() => isSettingClipRange.value = false, 0)
+  }
+}
+
+const rotateClassName = computed(() => {
+  const prefix = 'rotate-'
+  const rotate = props.rotate
+  if (rotate > -22.5 && rotate <= 22.5) return prefix + 0
+  else if (rotate > 22.5 && rotate <= 67.5) return prefix + 45
+  else if (rotate > 67.5 && rotate <= 112.5) return prefix + 90
+  else if (rotate > 112.5 && rotate <= 157.5) return prefix + 135
+  else if (rotate > 157.5 || rotate <= -157.5) return prefix + 0
+  else if (rotate > -157.5 && rotate <= -112.5) return prefix + 45
+  else if (rotate > -112.5 && rotate <= -67.5) return prefix + 90
+  else if (rotate > -67.5 && rotate <= -22.5) return prefix + 135
+  return prefix + 0
+})
+
+const cornerPoint = [
+  OperateResizeHandlers.LEFT_TOP,
+  OperateResizeHandlers.RIGHT_TOP,
+  OperateResizeHandlers.LEFT_BOTTOM,
+  OperateResizeHandlers.RIGHT_BOTTOM,
+]
+const edgePoints = [
+  OperateResizeHandlers.TOP,
+  OperateResizeHandlers.BOTTOM,
+  OperateResizeHandlers.LEFT,
+  OperateResizeHandlers.RIGHT,
+]
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue
index ab02ca20..7b88c394 100644
--- a/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue
+++ b/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue
@@ -22,40 +22,30 @@
 	</svg>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, toRef } from 'vue'
+<script lang="ts" setup>
+import { PropType, toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
-export default defineComponent({
-  name: 'image-ellipse-outline',
-  props: {
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    outline: {
-      type: Object as PropType<PPTElementOutline>
-    },
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
   },
-  setup(props) {
-    const {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    } = useElementOutline(toRef(props, 'outline'))
-
-    return {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    }
+  height: {
+    type: Number,
+    required: true,
+  },
+  outline: {
+    type: Object as PropType<PPTElementOutline>
   },
 })
+
+const {
+  outlineWidth,
+  outlineStyle,
+  outlineColor,
+} = useElementOutline(toRef(props, 'outline'))
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue
index e483e690..62514f6c 100644
--- a/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue
+++ b/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue
@@ -19,44 +19,34 @@
 	</svg>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, toRef } from 'vue'
+<script lang="ts" setup>
+import { PropType, toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
-export default defineComponent({
-  name: 'image-polygon-outline',
-  props: {
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    outline: {
-      type: Object as PropType<PPTElementOutline>
-    },
-    createPath: {
-      type: Function,
-      required: true,
-    },
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
   },
-  setup(props) {
-    const {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    } = useElementOutline(toRef(props, 'outline'))
-
-    return {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    }
+  height: {
+    type: Number,
+    required: true,
+  },
+  outline: {
+    type: Object as PropType<PPTElementOutline>
+  },
+  createPath: {
+    type: Function,
+    required: true,
   },
 })
+
+const {
+  outlineWidth,
+  outlineStyle,
+  outlineColor,
+} = useElementOutline(toRef(props, 'outline'))
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue
index 48bffd18..d08a6f8a 100644
--- a/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue
+++ b/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue
@@ -22,44 +22,34 @@
 	</svg>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, toRef } from 'vue'
+<script lang="ts" setup>
+import { PropType, toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
-export default defineComponent({
-  name: 'image-rect-outline',
-  props: {
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    outline: {
-      type: Object as PropType<PPTElementOutline>
-    },
-    radius: {
-      type: String,
-      default: '0',
-    },
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
   },
-  setup(props) {
-    const {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    } = useElementOutline(toRef(props, 'outline'))
-
-    return {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    }
+  height: {
+    type: Number,
+    required: true,
+  },
+  outline: {
+    type: Object as PropType<PPTElementOutline>
+  },
+  radius: {
+    type: String,
+    default: '0',
   },
 })
+
+const {
+  outlineWidth,
+  outlineStyle,
+  outlineColor,
+} = useElementOutline(toRef(props, 'outline'))
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/ImageElement/ImageOutline/index.vue b/src/views/components/element/ImageElement/ImageOutline/index.vue
index bb668b63..2debf54b 100644
--- a/src/views/components/element/ImageElement/ImageOutline/index.vue
+++ b/src/views/components/element/ImageElement/ImageOutline/index.vue
@@ -23,8 +23,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { PPTImageElement } from '@/types/slides'
 import useClipImage from '../useClipImage'
 
@@ -32,26 +32,13 @@ import ImageRectOutline from './ImageRectOutline.vue'
 import ImageEllipseOutline from './ImageEllipseOutline.vue'
 import ImagePolygonOutline from './ImagePolygonOutline.vue'
 
-export default defineComponent({
-  name: 'image-outline',
-  components: {
-    ImageRectOutline,
-    ImageEllipseOutline,
-    ImagePolygonOutline,
-  },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTImageElement>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const clip = computed(() => props.elementInfo.clip)
-    const { clipShape } = useClipImage(clip)
-
-    return {
-      clipShape,
-    }
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTImageElement>,
+    required: true,
   },
 })
+
+const clip = computed(() => props.elementInfo.clip)
+const { clipShape } = useClipImage(clip)
 </script>
\ No newline at end of file
diff --git a/src/views/components/element/ImageElement/index.vue b/src/views/components/element/ImageElement/index.vue
index 2180ebba..409b61eb 100644
--- a/src/views/components/element/ImageElement/index.vue
+++ b/src/views/components/element/ImageElement/index.vue
@@ -58,8 +58,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { ImageElementClip, PPTImageElement } from '@/types/slides'
@@ -74,107 +74,87 @@ import useFilter from './useFilter'
 import ImageOutline from './ImageOutline/index.vue'
 import ImageClipHandler from './ImageClipHandler.vue'
 
-export default defineComponent({
-  name: 'editable-element-image',
-  components: {
-    ImageOutline,
-    ImageClipHandler,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTImageElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTImageElement>,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTImageElement, canMove?: boolean) => void>,
-      required: true,
-    },
-    contextmenus: {
-      type: Function as PropType<() => ContextmenuItem[] | null>,
-    },
+  selectElement: {
+    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTImageElement, canMove?: boolean) => void>,
+    required: true,
   },
-  setup(props) {
-    const mainStore = useMainStore()
-    const slidesStore = useSlidesStore()
-    const { clipingImageElementId } = storeToRefs(mainStore)
-
-    const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)
-
-    const { addHistorySnapshot } = useHistorySnapshot()
-
-    const shadow = computed(() => props.elementInfo.shadow)
-    const { shadowStyle } = useElementShadow(shadow)
-
-    const flipH = computed(() => props.elementInfo.flipH)
-    const flipV = computed(() => props.elementInfo.flipV)
-    const { flipStyle } = useElementFlip(flipH, flipV)
-
-    const clip = computed(() => props.elementInfo.clip)
-    const { clipShape, imgPosition } = useClipImage(clip)
-
-    const filters = computed(() => props.elementInfo.filters)
-    const { filter } = useFilter(filters)
-
-    const handleSelectElement = (e: MouseEvent | TouchEvent) => {
-      if (props.elementInfo.lock) return
-      e.stopPropagation()
-      props.selectElement(e, props.elementInfo)
-    }
-
-    const handleClip = (data: ImageClipedEmitData) => {
-      mainStore.setClipingImageElementId('')
-      
-      if (!data) return
-
-      const { range, position } = data
-      const originClip: ImageElementClip = props.elementInfo.clip || { shape: 'rect', range: [[0, 0], [100, 100]] }
-
-      const left = props.elementInfo.left + position.left
-      const top = props.elementInfo.top + position.top
-      const width = props.elementInfo.width + position.width
-      const height = props.elementInfo.height + position.height
-
-      let centerOffsetX = 0
-      let centerOffsetY = 0
-
-      if (props.elementInfo.rotate) {
-        const centerX = (left + width / 2) - (props.elementInfo.left + props.elementInfo.width / 2)
-        const centerY = -((top + height / 2) - (props.elementInfo.top + props.elementInfo.height / 2))
-
-        const radian = -props.elementInfo.rotate * Math.PI / 180
-
-        const rotatedCenterX = centerX * Math.cos(radian) - centerY * Math.sin(radian)
-        const rotatedCenterY = centerX * Math.sin(radian) + centerY * Math.cos(radian)
-
-        centerOffsetX = rotatedCenterX - centerX
-        centerOffsetY = -(rotatedCenterY - centerY)
-      }
-
-      const _props = {
-        clip: { ...originClip, range },
-        left: left + centerOffsetX,
-        top: top + centerOffsetY,
-        width,
-        height,
-      }
-      slidesStore.updateElement({ id: props.elementInfo.id, props: _props })
-      
-      addHistorySnapshot()
-    }
-
-    return {
-      isCliping,
-      handleClip,
-      clipingImageElementId,
-      shadowStyle,
-      handleSelectElement,
-      clipShape,
-      imgPosition,
-      filter,
-      flipStyle,
-    }
+  contextmenus: {
+    type: Function as PropType<() => ContextmenuItem[] | null>,
   },
 })
+
+const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { clipingImageElementId } = storeToRefs(mainStore)
+
+const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const shadow = computed(() => props.elementInfo.shadow)
+const { shadowStyle } = useElementShadow(shadow)
+
+const flipH = computed(() => props.elementInfo.flipH)
+const flipV = computed(() => props.elementInfo.flipV)
+const { flipStyle } = useElementFlip(flipH, flipV)
+
+const clip = computed(() => props.elementInfo.clip)
+const { clipShape, imgPosition } = useClipImage(clip)
+
+const filters = computed(() => props.elementInfo.filters)
+const { filter } = useFilter(filters)
+
+const handleSelectElement = (e: MouseEvent | TouchEvent) => {
+  if (props.elementInfo.lock) return
+  e.stopPropagation()
+  props.selectElement(e, props.elementInfo)
+}
+
+const handleClip = (data: ImageClipedEmitData | null) => {
+  mainStore.setClipingImageElementId('')
+  
+  if (!data) return
+
+  const { range, position } = data
+  const originClip: ImageElementClip = props.elementInfo.clip || { shape: 'rect', range: [[0, 0], [100, 100]] }
+
+  const left = props.elementInfo.left + position.left
+  const top = props.elementInfo.top + position.top
+  const width = props.elementInfo.width + position.width
+  const height = props.elementInfo.height + position.height
+
+  let centerOffsetX = 0
+  let centerOffsetY = 0
+
+  if (props.elementInfo.rotate) {
+    const centerX = (left + width / 2) - (props.elementInfo.left + props.elementInfo.width / 2)
+    const centerY = -((top + height / 2) - (props.elementInfo.top + props.elementInfo.height / 2))
+
+    const radian = -props.elementInfo.rotate * Math.PI / 180
+
+    const rotatedCenterX = centerX * Math.cos(radian) - centerY * Math.sin(radian)
+    const rotatedCenterY = centerX * Math.sin(radian) + centerY * Math.cos(radian)
+
+    centerOffsetX = rotatedCenterX - centerX
+    centerOffsetY = -(rotatedCenterY - centerY)
+  }
+
+  const _props = {
+    clip: { ...originClip, range },
+    left: left + centerOffsetX,
+    top: top + centerOffsetY,
+    width,
+    height,
+  }
+  slidesStore.updateElement({ id: props.elementInfo.id, props: _props })
+  
+  addHistorySnapshot()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/LatexElement/BaseLatexElement.vue b/src/views/components/element/LatexElement/BaseLatexElement.vue
index 29783408..cc3e7d90 100644
--- a/src/views/components/element/LatexElement/BaseLatexElement.vue
+++ b/src/views/components/element/LatexElement/BaseLatexElement.vue
@@ -34,17 +34,14 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 import { PPTLatexElement } from '@/types/slides'
 
-export default defineComponent({
-  name: 'base-element-latex',
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTLatexElement>,
-      required: true,
-    },
+defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTLatexElement>,
+    required: true,
   },
 })
 </script>
diff --git a/src/views/components/element/LatexElement/index.vue b/src/views/components/element/LatexElement/index.vue
index 718df5e4..0c5ea448 100644
--- a/src/views/components/element/LatexElement/index.vue
+++ b/src/views/components/element/LatexElement/index.vue
@@ -41,45 +41,36 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 import { PPTLatexElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import emitter, { EmitterEvents } from '@/utils/emitter'
 
-export default defineComponent({
-  name: 'editable-element-latex',
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTLatexElement>,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTLatexElement, canMove?: boolean) => void>,
-      required: true,
-    },
-    contextmenus: {
-      type: Function as PropType<() => ContextmenuItem[] | null>,
-    },
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTLatexElement>,
+    required: true,
   },
-  setup(props) {
-    const handleSelectElement = (e: MouseEvent | TouchEvent) => {
-      if (props.elementInfo.lock) return
-      e.stopPropagation()
-
-      props.selectElement(e, props.elementInfo)
-    }
-
-    const openLatexEditor = () => {
-      emitter.emit(EmitterEvents.OPEN_LATEX_EDITOR)
-    }
-
-    return {
-      handleSelectElement,
-      openLatexEditor,
-    }
+  selectElement: {
+    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTLatexElement, canMove?: boolean) => void>,
+    required: true,
+  },
+  contextmenus: {
+    type: Function as PropType<() => ContextmenuItem[] | null>,
   },
 })
+
+const handleSelectElement = (e: MouseEvent | TouchEvent) => {
+  if (props.elementInfo.lock) return
+  e.stopPropagation()
+
+  props.selectElement(e, props.elementInfo)
+}
+
+const openLatexEditor = () => {
+  emitter.emit(EmitterEvents.OPEN_LATEX_EDITOR)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/LineElement/BaseLineElement.vue b/src/views/components/element/LineElement/BaseLineElement.vue
index f1016618..ff29046b 100644
--- a/src/views/components/element/LineElement/BaseLineElement.vue
+++ b/src/views/components/element/LineElement/BaseLineElement.vue
@@ -47,52 +47,37 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { PPTLineElement } from '@/types/slides'
 import { getLineElementPath } from '@/utils/element'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
 import LinePointMarker from './LinePointMarker.vue'
 
-export default defineComponent({
-  name: 'base-element-line',
-  components: {
-    LinePointMarker,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTLineElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTLineElement>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const shadow = computed(() => props.elementInfo.shadow)
-    const { shadowStyle } = useElementShadow(shadow)
+})
 
-    const svgWidth = computed(() => {
-      const width = Math.abs(props.elementInfo.start[0] - props.elementInfo.end[0])
-      return width < 24 ? 24 : width
-    })
-    const svgHeight = computed(() => {
-      const height = Math.abs(props.elementInfo.start[1] - props.elementInfo.end[1])
-      return height < 24 ? 24 : height
-    })
+const shadow = computed(() => props.elementInfo.shadow)
+const { shadowStyle } = useElementShadow(shadow)
 
-    const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10, 5' : '0, 0')
+const svgWidth = computed(() => {
+  const width = Math.abs(props.elementInfo.start[0] - props.elementInfo.end[0])
+  return width < 24 ? 24 : width
+})
+const svgHeight = computed(() => {
+  const height = Math.abs(props.elementInfo.start[1] - props.elementInfo.end[1])
+  return height < 24 ? 24 : height
+})
 
-    const path = computed(() => {
-      return getLineElementPath(props.elementInfo)
-    })
+const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10, 5' : '0, 0')
 
-    return {
-      shadowStyle,
-      svgWidth,
-      svgHeight,
-      lineDashArray,
-      path,
-    }
-  },
+const path = computed(() => {
+  return getLineElementPath(props.elementInfo)
 })
 </script>
 
diff --git a/src/views/components/element/LineElement/LinePointMarker.vue b/src/views/components/element/LineElement/LinePointMarker.vue
index 1a74fea9..51b9f122 100644
--- a/src/views/components/element/LineElement/LinePointMarker.vue
+++ b/src/views/components/element/LineElement/LinePointMarker.vue
@@ -16,8 +16,30 @@
 	</marker>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  position: {
+    type: String as PropType<'start' | 'end'>,
+    required: true,
+  },
+  type: {
+    type: String as PropType<'dot' | 'arrow'>,
+    required: true,
+  },
+  color: {
+    type: String,
+  },
+  baseSize: {
+    type: Number,
+    required: true,
+  },
+})
 
 const pathMap = {
   dot: 'm0 5a5 5 0 1 0 10 0a5 5 0 1 0 -10 0z',
@@ -28,39 +50,7 @@ const rotateMap = {
   'arrow-end': 0,
 }
 
-export default defineComponent({
-  name: 'line-point-marker',
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    position: {
-      type: String as PropType<'start' | 'end'>,
-      required: true,
-    },
-    type: {
-      type: String as PropType<'dot' | 'arrow'>,
-      required: true,
-    },
-    color: {
-      type: String,
-    },
-    baseSize: {
-      type: Number,
-      required: true,
-    },
-  },
-  setup(props) {
-    const path = computed(() => pathMap[props.type])
-    const rotate = computed(() => rotateMap[`${props.type}-${props.position}`] || 0)
-    const size = computed(() => props.baseSize < 2 ? 2 : props.baseSize)
-
-    return {
-      path,
-      rotate,
-      size,
-    }
-  },
-})
+const path = computed(() => pathMap[props.type])
+const rotate = computed(() => rotateMap[`${props.type}-${props.position}`] || 0)
+const size = computed(() => props.baseSize < 2 ? 2 : props.baseSize)
 </script>
\ No newline at end of file
diff --git a/src/views/components/element/LineElement/index.vue b/src/views/components/element/LineElement/index.vue
index 47ccac55..4715c598 100644
--- a/src/views/components/element/LineElement/index.vue
+++ b/src/views/components/element/LineElement/index.vue
@@ -59,8 +59,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { PPTLineElement } from '@/types/slides'
 import { getLineElementPath } from '@/utils/element'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
@@ -68,60 +68,44 @@ import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
 import LinePointMarker from './LinePointMarker.vue'
 
-export default defineComponent({
-  name: 'editable-element-shape',
-  components: {
-    LinePointMarker,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTLineElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTLineElement>,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTLineElement, canMove?: boolean) => void>,
-      required: true,
-    },
-    contextmenus: {
-      type: Function as PropType<() => ContextmenuItem[] | null>,
-    },
+  selectElement: {
+    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTLineElement, canMove?: boolean) => void>,
+    required: true,
   },
-  setup(props) {
-    const handleSelectElement = (e: MouseEvent | TouchEvent) => {
-      if (props.elementInfo.lock) return
-      e.stopPropagation()
-
-      props.selectElement(e, props.elementInfo)
-    }
-    
-    const shadow = computed(() => props.elementInfo.shadow)
-    const { shadowStyle } = useElementShadow(shadow)
-
-    const svgWidth = computed(() => {
-      const width = Math.abs(props.elementInfo.start[0] - props.elementInfo.end[0])
-      return width < 24 ? 24 : width
-    })
-    const svgHeight = computed(() => {
-      const height = Math.abs(props.elementInfo.start[1] - props.elementInfo.end[1])
-      return height < 24 ? 24 : height
-    })
-
-    const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10 6' : '0 0')
-
-    const path = computed(() => {
-      return getLineElementPath(props.elementInfo)
-    })
-
-    return {
-      handleSelectElement,
-      shadowStyle,
-      svgWidth,
-      svgHeight,
-      lineDashArray,
-      path,
-    }
+  contextmenus: {
+    type: Function as PropType<() => ContextmenuItem[] | null>,
   },
 })
+
+const handleSelectElement = (e: MouseEvent | TouchEvent) => {
+  if (props.elementInfo.lock) return
+  e.stopPropagation()
+
+  props.selectElement(e, props.elementInfo)
+}
+
+const shadow = computed(() => props.elementInfo.shadow)
+const { shadowStyle } = useElementShadow(shadow)
+
+const svgWidth = computed(() => {
+  const width = Math.abs(props.elementInfo.start[0] - props.elementInfo.end[0])
+  return width < 24 ? 24 : width
+})
+const svgHeight = computed(() => {
+  const height = Math.abs(props.elementInfo.start[1] - props.elementInfo.end[1])
+  return height < 24 ? 24 : height
+})
+
+const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10 6' : '0 0')
+
+const path = computed(() => {
+  return getLineElementPath(props.elementInfo)
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/ProsemirrorEditor.vue b/src/views/components/element/ProsemirrorEditor.vue
index a45fb954..84d98be9 100644
--- a/src/views/components/element/ProsemirrorEditor.vue
+++ b/src/views/components/element/ProsemirrorEditor.vue
@@ -5,8 +5,8 @@
   ></div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { debounce } from 'lodash'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
@@ -19,238 +19,235 @@ import { alignmentCommand } from '@/utils/prosemirror/commands/setTextAlign'
 import { indentCommand } from '@/utils/prosemirror/commands/setTextIndent'
 import { toggleList } from '@/utils/prosemirror/commands/toggleList'
 
-export default defineComponent({
-  name: 'prosemirror-editor',
-  emits: ['update', 'focus', 'blur'],
-  props: {
-    elementId: {
-      type: String,
-      required: true,
-    },
-    defaultColor: {
-      type: String,
-      required: true,
-    },
-    defaultFontName: {
-      type: String,
-      required: true,
-    },
-    editable: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: String,
-      required: true,
-    },
-    autoFocus: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  elementId: {
+    type: String,
+    required: true,
   },
-  setup(props, { emit }) {
-    const mainStore = useMainStore()
-    const { handleElementId } = storeToRefs(mainStore)
+  defaultColor: {
+    type: String,
+    required: true,
+  },
+  defaultFontName: {
+    type: String,
+    required: true,
+  },
+  editable: {
+    type: Boolean,
+    default: false,
+  },
+  value: {
+    type: String,
+    required: true,
+  },
+  autoFocus: {
+    type: Boolean,
+    default: false,
+  },
+})
 
-    const editorViewRef = ref<HTMLElement>()
-    let editorView: EditorView
+const emit = defineEmits<{
+  (event: 'update', payload: string): void
+  (event: 'focus'): void
+  (event: 'blur'): void
+}>()
 
-    // 富文本的各种交互事件监听：
-    // 聚焦时取消全局快捷键事件
-    // 输入文字时同步数据到vuex
-    // 点击鼠标和键盘时同步富文本状态到工具栏
-    const handleInput = debounce(function() {
-      emit('update', editorView.dom.innerHTML)
-    }, 300, { trailing: true })
+const mainStore = useMainStore()
+const { handleElementId } = storeToRefs(mainStore)
 
-    const handleFocus = () => {
-      mainStore.setDisableHotkeysState(true)
-      emit('focus')
+const editorViewRef = ref<HTMLElement>()
+let editorView: EditorView
+
+// 富文本的各种交互事件监听：
+// 聚焦时取消全局快捷键事件
+// 输入文字时同步数据到vuex
+// 点击鼠标和键盘时同步富文本状态到工具栏
+const handleInput = debounce(function() {
+  emit('update', editorView.dom.innerHTML)
+}, 300, { trailing: true })
+
+const handleFocus = () => {
+  mainStore.setDisableHotkeysState(true)
+  emit('focus')
+}
+
+const handleBlur = () => {
+  mainStore.setDisableHotkeysState(false)
+  emit('blur')
+}
+
+const handleClick = debounce(function() {
+  const attrs = getTextAttrs(editorView, {
+    color: props.defaultColor,
+    fontname: props.defaultFontName,
+  })
+  mainStore.setRichtextAttrs(attrs)
+}, 30, { trailing: true })
+
+const handleKeydown = () => {
+  handleInput()
+  handleClick()
+}
+
+// 将富文本内容同步到DOM
+const textContent = computed(() => props.value)
+watch(textContent, () => {
+  if (!editorView) return
+  if (editorView.hasFocus()) return
+
+  const { doc, tr } = editorView.state
+  editorView.dispatch(tr.replaceRangeWith(0, doc.content.size, createDocument(textContent.value)))
+})
+
+// 打开/关闭编辑器的编辑模式
+watch(() => props.editable, () => {
+  editorView.setProps({ editable: () => props.editable })
+})
+
+// Prosemirror编辑器的初始化和卸载
+onMounted(() => {
+  editorView = initProsemirrorEditor((editorViewRef.value as Element), textContent.value, {
+    handleDOMEvents: {
+      focus: handleFocus,
+      blur: handleBlur,
+      keydown: handleKeydown,
+      click: handleClick,
+    },
+    editable: () => props.editable,
+  })
+  if (props.autoFocus) editorView.focus()
+})
+onUnmounted(() => {
+  editorView && editorView.destroy()
+})
+
+// 执行富文本命令（可以是一个或多个）
+// 部分命令在执行前先判断当前选区是否为空，如果选区为空先进行全选操作
+const execCommand = ({ target, action }: RichTextCommand) => {
+  if (!target && handleElementId.value !== props.elementId) return
+  if (target && target !== props.elementId) return
+
+  const actions = ('command' in action) ? [action] : action
+
+  for (const item of actions) {
+    if (item.command === 'fontname' && item.value) {
+      const mark = editorView.state.schema.marks.fontname.create({ fontname: item.value })
+      autoSelectAll(editorView)
+      addMark(editorView, mark)
     }
-
-    const handleBlur = () => {
-      mainStore.setDisableHotkeysState(false)
-      emit('blur')
+    else if (item.command === 'fontsize' && item.value) {
+      const mark = editorView.state.schema.marks.fontsize.create({ fontsize: item.value })
+      autoSelectAll(editorView)
+      addMark(editorView, mark)
     }
-
-    const handleClick = debounce(function() {
-      const attrs = getTextAttrs(editorView, {
-        color: props.defaultColor,
-        fontname: props.defaultFontName,
-      })
-      mainStore.setRichtextAttrs(attrs)
-    }, 30, { trailing: true })
-
-    const handleKeydown = () => {
-      handleInput()
-      handleClick()
+    else if (item.command === 'fontsize-add') {
+      const step = item.value ? +item.value : 2
+      autoSelectAll(editorView)
+      const fontsize = getFontsize(editorView) + step + 'px'
+      const mark = editorView.state.schema.marks.fontsize.create({ fontsize })
+      addMark(editorView, mark)
     }
-
-    // 将富文本内容同步到DOM
-    const textContent = computed(() => props.value)
-    watch(textContent, () => {
-      if (!editorView) return
-      if (editorView.hasFocus()) return
-
-      const { doc, tr } = editorView.state
-      editorView.dispatch(tr.replaceRangeWith(0, doc.content.size, createDocument(textContent.value)))
-    })
-
-    // 打开/关闭编辑器的编辑模式
-    watch(() => props.editable, () => {
-      editorView.setProps({ editable: () => props.editable })
-    })
-
-    // Prosemirror编辑器的初始化和卸载
-    onMounted(() => {
-      editorView = initProsemirrorEditor((editorViewRef.value as Element), textContent.value, {
-        handleDOMEvents: {
-          focus: handleFocus,
-          blur: handleBlur,
-          keydown: handleKeydown,
-          click: handleClick,
-        },
-        editable: () => props.editable,
-      })
-      if (props.autoFocus) editorView.focus()
-    })
-    onUnmounted(() => {
-      editorView && editorView.destroy()
-    })
-    
-    // 执行富文本命令（可以是一个或多个）
-    // 部分命令在执行前先判断当前选区是否为空，如果选区为空先进行全选操作
-    const execCommand = ({ target, action }: RichTextCommand) => {
-      if (!target && handleElementId.value !== props.elementId) return
-      if (target && target !== props.elementId) return
-
-      const actions = ('command' in action) ? [action] : action
-
-      for (const item of actions) {
-        if (item.command === 'fontname' && item.value) {
-          const mark = editorView.state.schema.marks.fontname.create({ fontname: item.value })
-          autoSelectAll(editorView)
-          addMark(editorView, mark)
-        }
-        else if (item.command === 'fontsize' && item.value) {
-          const mark = editorView.state.schema.marks.fontsize.create({ fontsize: item.value })
-          autoSelectAll(editorView)
-          addMark(editorView, mark)
-        }
-        else if (item.command === 'fontsize-add') {
-          const step = item.value ? +item.value : 2
-          autoSelectAll(editorView)
-          const fontsize = getFontsize(editorView) + step + 'px'
-          const mark = editorView.state.schema.marks.fontsize.create({ fontsize })
-          addMark(editorView, mark)
-        }
-        else if (item.command === 'fontsize-reduce') {
-          const step = item.value ? +item.value : 2
-          autoSelectAll(editorView)
-          let fontsize = getFontsize(editorView) - step
-          if (fontsize < 12) fontsize = 12
-          const mark = editorView.state.schema.marks.fontsize.create({ fontsize: fontsize + 'px' })
-          addMark(editorView, mark)
-        }
-        else if (item.command === 'color' && item.value) {
-          const mark = editorView.state.schema.marks.forecolor.create({ color: item.value })
-          autoSelectAll(editorView)
-          addMark(editorView, mark)
-        }
-        else if (item.command === 'backcolor' && item.value) {
-          const mark = editorView.state.schema.marks.backcolor.create({ backcolor: item.value })
-          autoSelectAll(editorView)
-          addMark(editorView, mark)
-        }
-        else if (item.command === 'bold') {
-          autoSelectAll(editorView)
-          toggleMark(editorView.state.schema.marks.strong)(editorView.state, editorView.dispatch)
-        }
-        else if (item.command === 'em') {
-          autoSelectAll(editorView)
-          toggleMark(editorView.state.schema.marks.em)(editorView.state, editorView.dispatch)
-        }
-        else if (item.command === 'underline') {
-          autoSelectAll(editorView)
-          toggleMark(editorView.state.schema.marks.underline)(editorView.state, editorView.dispatch)
-        }
-        else if (item.command === 'strikethrough') {
-          autoSelectAll(editorView)
-          toggleMark(editorView.state.schema.marks.strikethrough)(editorView.state, editorView.dispatch)
-        }
-        else if (item.command === 'subscript') {
-          toggleMark(editorView.state.schema.marks.subscript)(editorView.state, editorView.dispatch)
-        }
-        else if (item.command === 'superscript') {
-          toggleMark(editorView.state.schema.marks.superscript)(editorView.state, editorView.dispatch)
-        }
-        else if (item.command === 'blockquote') {
-          wrapIn(editorView.state.schema.nodes.blockquote)(editorView.state, editorView.dispatch)
-        }
-        else if (item.command === 'code') {
-          toggleMark(editorView.state.schema.marks.code)(editorView.state, editorView.dispatch)
-        }
-        else if (item.command === 'align' && item.value) {
-          alignmentCommand(editorView, item.value)
-        }
-        else if (item.command === 'indent' && item.value) {
-          indentCommand(editorView, +item.value)
-        }
-        else if (item.command === 'bulletList') {
-          const { bullet_list: bulletList, list_item: listItem } = editorView.state.schema.nodes
-          toggleList(bulletList, listItem)(editorView.state, editorView.dispatch)
-        }
-        else if (item.command === 'orderedList') {
-          const { ordered_list: orderedList, list_item: listItem } = editorView.state.schema.nodes
-          toggleList(orderedList, listItem)(editorView.state, editorView.dispatch)
-        }
-        else if (item.command === 'clear') {
-          autoSelectAll(editorView)
-          const { $from, $to } = editorView.state.selection
-          editorView.dispatch(editorView.state.tr.removeMark($from.pos, $to.pos))
-        }
-        else if (item.command === 'link') {
-          const markType = editorView.state.schema.marks.link
-          const { from, to } = editorView.state.selection
-          const result = findNodesWithSameMark(editorView.state.doc, from, to, markType)
-          if (result) {
-            if (item.value) {
-              const mark = editorView.state.schema.marks.link.create({ href: item.value, title: item.value })
-              addMark(editorView, mark, { from: result.from.pos, to: result.to.pos + 1 })
-            }
-            else editorView.dispatch(editorView.state.tr.removeMark(result.from.pos, result.to.pos + 1, markType))
-          }
-          else if (markActive(editorView.state, markType)) {
-            if (item.value) {
-              const mark = editorView.state.schema.marks.link.create({ href: item.value, title: item.value })
-              addMark(editorView, mark)
-            }
-            else toggleMark(markType)(editorView.state, editorView.dispatch)
-          }
-          else if (item.value) {
-            autoSelectAll(editorView)
-            toggleMark(markType, { href: item.value, title: item.value })(editorView.state, editorView.dispatch)
-          }
-        }
-        else if (item.command === 'insert' && item.value) {
-          editorView.dispatch(editorView.state.tr.insertText(item.value))
+    else if (item.command === 'fontsize-reduce') {
+      const step = item.value ? +item.value : 2
+      autoSelectAll(editorView)
+      let fontsize = getFontsize(editorView) - step
+      if (fontsize < 12) fontsize = 12
+      const mark = editorView.state.schema.marks.fontsize.create({ fontsize: fontsize + 'px' })
+      addMark(editorView, mark)
+    }
+    else if (item.command === 'color' && item.value) {
+      const mark = editorView.state.schema.marks.forecolor.create({ color: item.value })
+      autoSelectAll(editorView)
+      addMark(editorView, mark)
+    }
+    else if (item.command === 'backcolor' && item.value) {
+      const mark = editorView.state.schema.marks.backcolor.create({ backcolor: item.value })
+      autoSelectAll(editorView)
+      addMark(editorView, mark)
+    }
+    else if (item.command === 'bold') {
+      autoSelectAll(editorView)
+      toggleMark(editorView.state.schema.marks.strong)(editorView.state, editorView.dispatch)
+    }
+    else if (item.command === 'em') {
+      autoSelectAll(editorView)
+      toggleMark(editorView.state.schema.marks.em)(editorView.state, editorView.dispatch)
+    }
+    else if (item.command === 'underline') {
+      autoSelectAll(editorView)
+      toggleMark(editorView.state.schema.marks.underline)(editorView.state, editorView.dispatch)
+    }
+    else if (item.command === 'strikethrough') {
+      autoSelectAll(editorView)
+      toggleMark(editorView.state.schema.marks.strikethrough)(editorView.state, editorView.dispatch)
+    }
+    else if (item.command === 'subscript') {
+      toggleMark(editorView.state.schema.marks.subscript)(editorView.state, editorView.dispatch)
+    }
+    else if (item.command === 'superscript') {
+      toggleMark(editorView.state.schema.marks.superscript)(editorView.state, editorView.dispatch)
+    }
+    else if (item.command === 'blockquote') {
+      wrapIn(editorView.state.schema.nodes.blockquote)(editorView.state, editorView.dispatch)
+    }
+    else if (item.command === 'code') {
+      toggleMark(editorView.state.schema.marks.code)(editorView.state, editorView.dispatch)
+    }
+    else if (item.command === 'align' && item.value) {
+      alignmentCommand(editorView, item.value)
+    }
+    else if (item.command === 'indent' && item.value) {
+      indentCommand(editorView, +item.value)
+    }
+    else if (item.command === 'bulletList') {
+      const { bullet_list: bulletList, list_item: listItem } = editorView.state.schema.nodes
+      toggleList(bulletList, listItem)(editorView.state, editorView.dispatch)
+    }
+    else if (item.command === 'orderedList') {
+      const { ordered_list: orderedList, list_item: listItem } = editorView.state.schema.nodes
+      toggleList(orderedList, listItem)(editorView.state, editorView.dispatch)
+    }
+    else if (item.command === 'clear') {
+      autoSelectAll(editorView)
+      const { $from, $to } = editorView.state.selection
+      editorView.dispatch(editorView.state.tr.removeMark($from.pos, $to.pos))
+    }
+    else if (item.command === 'link') {
+      const markType = editorView.state.schema.marks.link
+      const { from, to } = editorView.state.selection
+      const result = findNodesWithSameMark(editorView.state.doc, from, to, markType)
+      if (result) {
+        if (item.value) {
+          const mark = editorView.state.schema.marks.link.create({ href: item.value, title: item.value })
+          addMark(editorView, mark, { from: result.from.pos, to: result.to.pos + 1 })
         }
+        else editorView.dispatch(editorView.state.tr.removeMark(result.from.pos, result.to.pos + 1, markType))
+      }
+      else if (markActive(editorView.state, markType)) {
+        if (item.value) {
+          const mark = editorView.state.schema.marks.link.create({ href: item.value, title: item.value })
+          addMark(editorView, mark)
+        }
+        else toggleMark(markType)(editorView.state, editorView.dispatch)
+      }
+      else if (item.value) {
+        autoSelectAll(editorView)
+        toggleMark(markType, { href: item.value, title: item.value })(editorView.state, editorView.dispatch)
       }
-
-      editorView.focus()
-      handleInput()
-      handleClick()
     }
-
-    emitter.on(EmitterEvents.RICH_TEXT_COMMAND, execCommand)
-    onUnmounted(() => {
-      emitter.off(EmitterEvents.RICH_TEXT_COMMAND, execCommand)
-    })
-
-    return {
-      editorViewRef,
+    else if (item.command === 'insert' && item.value) {
+      editorView.dispatch(editorView.state.tr.insertText(item.value))
     }
-  },
+  }
+
+  editorView.focus()
+  handleInput()
+  handleClick()
+}
+
+emitter.on(EmitterEvents.RICH_TEXT_COMMAND, execCommand)
+onUnmounted(() => {
+  emitter.off(EmitterEvents.RICH_TEXT_COMMAND, execCommand)
 })
 </script>
 
diff --git a/src/views/components/element/ShapeElement/BaseShapeElement.vue b/src/views/components/element/ShapeElement/BaseShapeElement.vue
index 85dc5263..d867c027 100644
--- a/src/views/components/element/ShapeElement/BaseShapeElement.vue
+++ b/src/views/components/element/ShapeElement/BaseShapeElement.vue
@@ -60,8 +60,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { PPTShapeElement, ShapeText } from '@/types/slides'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
@@ -69,49 +69,33 @@ import useElementFlip from '@/views/components/element/hooks/useElementFlip'
 
 import GradientDefs from './GradientDefs.vue'
 
-export default defineComponent({
-  name: 'base-element-shape',
-  components: {
-    GradientDefs,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTShapeElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTShapeElement>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const outline = computed(() => props.elementInfo.outline)
-    const { outlineWidth, outlineStyle, outlineColor } = useElementOutline(outline)
-    
-    const shadow = computed(() => props.elementInfo.shadow)
-    const { shadowStyle } = useElementShadow(shadow)
+})
 
-    const flipH = computed(() => props.elementInfo.flipH)
-    const flipV = computed(() => props.elementInfo.flipV)
-    const { flipStyle } = useElementFlip(flipH, flipV)
+const outline = computed(() => props.elementInfo.outline)
+const { outlineWidth, outlineStyle, outlineColor } = useElementOutline(outline)
 
-    const text = computed<ShapeText>(() => {
-      const defaultText: ShapeText = {
-        content: '',
-        defaultFontName: '微软雅黑',
-        defaultColor: '#000',
-        align: 'middle',
-      }
-      if (!props.elementInfo.text) return defaultText
+const shadow = computed(() => props.elementInfo.shadow)
+const { shadowStyle } = useElementShadow(shadow)
 
-      return props.elementInfo.text
-    })
+const flipH = computed(() => props.elementInfo.flipH)
+const flipV = computed(() => props.elementInfo.flipV)
+const { flipStyle } = useElementFlip(flipH, flipV)
 
-    return {
-      shadowStyle,
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-      flipStyle,
-      text,
-    }
-  },
+const text = computed<ShapeText>(() => {
+  const defaultText: ShapeText = {
+    content: '',
+    defaultFontName: '微软雅黑',
+    defaultColor: '#000',
+    align: 'middle',
+  }
+  if (!props.elementInfo.text) return defaultText
+
+  return props.elementInfo.text
 })
 </script>
 
diff --git a/src/views/components/element/ShapeElement/GradientDefs.vue b/src/views/components/element/ShapeElement/GradientDefs.vue
index 97285462..51174d1f 100644
--- a/src/views/components/element/ShapeElement/GradientDefs.vue
+++ b/src/views/components/element/ShapeElement/GradientDefs.vue
@@ -18,31 +18,28 @@
   </radialGradient>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 
-export default defineComponent({
-  name: 'gradient-defs',
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String as PropType<'linear' | 'radial'>,
-    },
-    color1: {
-      type: String,
-      required: true,
-    },
-    color2: {
-      type: String,
-      required: true,
-    },
-    rotate: {
-      type: Number,
-      default: 0,
-    },
+defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String as PropType<'linear' | 'radial'>,
+  },
+  color1: {
+    type: String,
+    required: true,
+  },
+  color2: {
+    type: String,
+    required: true,
+  },
+  rotate: {
+    type: Number,
+    default: 0,
   },
 })
 </script>
\ No newline at end of file
diff --git a/src/views/components/element/ShapeElement/index.vue b/src/views/components/element/ShapeElement/index.vue
index 48f9898e..47e11384 100644
--- a/src/views/components/element/ShapeElement/index.vue
+++ b/src/views/components/element/ShapeElement/index.vue
@@ -78,8 +78,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTShapeElement, ShapeText } from '@/types/slides'
@@ -92,103 +92,82 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import GradientDefs from './GradientDefs.vue'
 import ProsemirrorEditor from '@/views/components/element/ProsemirrorEditor.vue'
 
-export default defineComponent({
-  name: 'editable-element-shape',
-  components: {
-    GradientDefs,
-    ProsemirrorEditor,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTShapeElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTShapeElement>,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTShapeElement, canMove?: boolean) => void>,
-      required: true,
-    },
-    contextmenus: {
-      type: Function as PropType<() => ContextmenuItem[] | null>,
-    },
+  selectElement: {
+    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTShapeElement, canMove?: boolean) => void>,
+    required: true,
   },
-  setup(props) {
-    const mainStore = useMainStore()
-    const slidesStore = useSlidesStore()
-    const { handleElementId } = storeToRefs(mainStore)
-
-    const { addHistorySnapshot } = useHistorySnapshot()
-
-    const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
-      if (props.elementInfo.lock) return
-      e.stopPropagation()
-
-      props.selectElement(e, props.elementInfo, canMove)
-    }
-
-    const outline = computed(() => props.elementInfo.outline)
-    const { outlineWidth, outlineStyle, outlineColor } = useElementOutline(outline)
-    
-    const shadow = computed(() => props.elementInfo.shadow)
-    const { shadowStyle } = useElementShadow(shadow)
-
-    const flipH = computed(() => props.elementInfo.flipH)
-    const flipV = computed(() => props.elementInfo.flipV)
-    const { flipStyle } = useElementFlip(flipH, flipV)
-
-    const editable = ref(false)
-    
-    watch(handleElementId, () => {
-      if (handleElementId.value !== props.elementInfo.id) {
-        if (editable.value) editable.value = false
-      }
-    })
-
-    const text = computed<ShapeText>(() => {
-      const defaultText: ShapeText = {
-        content: '',
-        defaultFontName: '微软雅黑',
-        defaultColor: '#000',
-        align: 'middle',
-      }
-      if (!props.elementInfo.text) return defaultText
-
-      return props.elementInfo.text
-    })
-
-    const updateText = (content: string) => {
-      const _text = { ...text.value, content }
-      slidesStore.updateElement({
-        id: props.elementInfo.id, 
-        props: { text: _text },
-      })
-      
-      addHistorySnapshot()
-    }
-
-    const checkEmptyText = () => {
-      if (!props.elementInfo.text) return
-
-      const pureText = props.elementInfo.text.content.replaceAll(/<[^>]+>/g, '')
-      if (!pureText) {
-        slidesStore.removeElementProps({ id: props.elementInfo.id, propName: 'text' })
-        addHistorySnapshot()
-      }
-    }
-
-    return {
-      shadowStyle,
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-      flipStyle,
-      editable,
-      text,
-      handleSelectElement,
-      updateText,
-      checkEmptyText,
-    }
+  contextmenus: {
+    type: Function as PropType<() => ContextmenuItem[] | null>,
   },
 })
+
+const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { handleElementId } = storeToRefs(mainStore)
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
+  if (props.elementInfo.lock) return
+  e.stopPropagation()
+
+  props.selectElement(e, props.elementInfo, canMove)
+}
+
+const outline = computed(() => props.elementInfo.outline)
+const { outlineWidth, outlineStyle, outlineColor } = useElementOutline(outline)
+
+const shadow = computed(() => props.elementInfo.shadow)
+const { shadowStyle } = useElementShadow(shadow)
+
+const flipH = computed(() => props.elementInfo.flipH)
+const flipV = computed(() => props.elementInfo.flipV)
+const { flipStyle } = useElementFlip(flipH, flipV)
+
+const editable = ref(false)
+
+watch(handleElementId, () => {
+  if (handleElementId.value !== props.elementInfo.id) {
+    if (editable.value) editable.value = false
+  }
+})
+
+const text = computed<ShapeText>(() => {
+  const defaultText: ShapeText = {
+    content: '',
+    defaultFontName: '微软雅黑',
+    defaultColor: '#000',
+    align: 'middle',
+  }
+  if (!props.elementInfo.text) return defaultText
+
+  return props.elementInfo.text
+})
+
+const updateText = (content: string) => {
+  const _text = { ...text.value, content }
+  slidesStore.updateElement({
+    id: props.elementInfo.id, 
+    props: { text: _text },
+  })
+  
+  addHistorySnapshot()
+}
+
+const checkEmptyText = () => {
+  if (!props.elementInfo.text) return
+
+  const pureText = props.elementInfo.text.content.replaceAll(/<[^>]+>/g, '')
+  if (!pureText) {
+    slidesStore.removeElementProps({ id: props.elementInfo.id, propName: 'text' })
+    addHistorySnapshot()
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/TableElement/BaseTableElement.vue b/src/views/components/element/TableElement/BaseTableElement.vue
index 2cd09e61..f798b8ad 100644
--- a/src/views/components/element/TableElement/BaseTableElement.vue
+++ b/src/views/components/element/TableElement/BaseTableElement.vue
@@ -24,22 +24,16 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 import { PPTTableElement } from '@/types/slides'
 
 import StaticTable from './StaticTable.vue'
 
-export default defineComponent({
-  name: 'base-element-table',
-  components: {
-    StaticTable,
-  },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTTableElement>,
-      required: true,
-    },
+defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTTableElement>,
+    required: true,
   },
 })
 </script>
diff --git a/src/views/components/element/TableElement/CustomTextarea.vue b/src/views/components/element/TableElement/CustomTextarea.vue
index b847bf3a..7a6dc41b 100644
--- a/src/views/components/element/TableElement/CustomTextarea.vue
+++ b/src/views/components/element/TableElement/CustomTextarea.vue
@@ -9,91 +9,83 @@
   ></div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onUnmounted, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { onUnmounted, ref, watch } from 'vue'
 import { pasteCustomClipboardString, pasteExcelClipboardString } from '@/utils/clipboard'
 
-export default defineComponent({
-  name: 'custom-textarea',
-  emits: ['updateValue', 'insertExcelData'],
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-    contenteditable: {
-      type: [Boolean, String],
-      default: false,
-    },
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
   },
-  setup(props, { emit }) {
-    const textareaRef = ref<HTMLElement>()
-    const text = ref('')
-    const isFocus = ref(false)
+  contenteditable: {
+    type: [Boolean, String],
+    default: false,
+  },
+})
 
-    // 自定义v-modal，同步数据
-    // 当文本框聚焦时，不执行数据同步
-    watch(() => props.value, () => {
-      if (isFocus.value) return
-      text.value = props.value
-      if (textareaRef.value) textareaRef.value.innerHTML = props.value
-    }, { immediate: true })
+const emit = defineEmits<{
+  (event: 'updateValue', payload: string): void
+  (event: 'insertExcelData', payload: string[][]): void
+}>()
 
-    const handleInput = () => {
-      if (!textareaRef.value) return
-      const text = textareaRef.value.innerHTML
-      emit('updateValue', text)
-    }
+const textareaRef = ref<HTMLElement>()
+const text = ref('')
+const isFocus = ref(false)
 
-    // 聚焦时更新焦点标记，并监听粘贴事件
-    const handleFocus = () => {
-      isFocus.value = true
+// 自定义v-modal，同步数据
+// 当文本框聚焦时，不执行数据同步
+watch(() => props.value, () => {
+  if (isFocus.value) return
+  text.value = props.value
+  if (textareaRef.value) textareaRef.value.innerHTML = props.value
+}, { immediate: true })
 
-      if (!textareaRef.value) return
-      textareaRef.value.onpaste = (e: ClipboardEvent) => {
-        e.preventDefault()
-        if (!e.clipboardData) return
+const handleInput = () => {
+  if (!textareaRef.value) return
+  const text = textareaRef.value.innerHTML
+  emit('updateValue', text)
+}
 
-        const clipboardDataFirstItem = e.clipboardData.items[0]
+// 聚焦时更新焦点标记，并监听粘贴事件
+const handleFocus = () => {
+  isFocus.value = true
 
-        if (clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
-          clipboardDataFirstItem.getAsString(text => {
-            const clipboardData = pasteCustomClipboardString(text)
-            if (typeof clipboardData === 'object') return
+  if (!textareaRef.value) return
+  textareaRef.value.onpaste = (e: ClipboardEvent) => {
+    e.preventDefault()
+    if (!e.clipboardData) return
+
+    const clipboardDataFirstItem = e.clipboardData.items[0]
+
+    if (clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
+      clipboardDataFirstItem.getAsString(text => {
+        const clipboardData = pasteCustomClipboardString(text)
+        if (typeof clipboardData === 'object') return
  
-            const excelData = pasteExcelClipboardString(text)
-            if (excelData) {
-              emit('insertExcelData', excelData)
-              if (textareaRef.value) textareaRef.value.innerHTML = excelData[0][0]
-              return
-            }
-
-            emit('updateValue', text)
-            document.execCommand('insertText', false, text)
-          })
+        const excelData = pasteExcelClipboardString(text)
+        if (excelData) {
+          emit('insertExcelData', excelData)
+          if (textareaRef.value) textareaRef.value.innerHTML = excelData[0][0]
+          return
         }
-      }
-    }
 
-    // 失焦时更新焦点标记，清除粘贴事件监听
-    const handleBlur = () => {
-      isFocus.value = false
-      if (textareaRef.value) textareaRef.value.onpaste = null
+        emit('updateValue', text)
+        document.execCommand('insertText', false, text)
+      })
     }
+  }
+}
 
-    // 清除粘贴事件监听
-    onUnmounted(() => {
-      if (textareaRef.value) textareaRef.value.onpaste = null
-    })
+// 失焦时更新焦点标记，清除粘贴事件监听
+const handleBlur = () => {
+  isFocus.value = false
+  if (textareaRef.value) textareaRef.value.onpaste = null
+}
 
-    return {
-      textareaRef,
-      handleFocus,
-      handleInput,
-      handleBlur,
-      text,
-    }
-  },
+// 清除粘贴事件监听
+onUnmounted(() => {
+  if (textareaRef.value) textareaRef.value.onpaste = null
 })
 </script>
 
diff --git a/src/views/components/element/TableElement/EditableTable.vue b/src/views/components/element/TableElement/EditableTable.vue
index b0acb84e..2f05507e 100644
--- a/src/views/components/element/TableElement/EditableTable.vue
+++ b/src/views/components/element/TableElement/EditableTable.vue
@@ -65,8 +65,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
 import { debounce, isEqual } from 'lodash'
 import { storeToRefs } from 'pinia'
 import { nanoid } from 'nanoid'
@@ -80,618 +80,594 @@ import useSubThemeColor from './useSubThemeColor'
 
 import CustomTextarea from './CustomTextarea.vue'
 
-export default defineComponent({
-  name: 'editable-table',
-  emits: ['change', 'changeColWidths', 'changeSelectedCells'],
-  components: {
-    CustomTextarea,
+const props = defineProps({
+  data: {
+    type: Array as PropType<TableCell[][]>,
+    required: true,
   },
-  props: {
-    data: {
-      type: Array as PropType<TableCell[][]>,
-      required: true,
-    },
-    width: {
-      type: Number,
-      required: true,
-    },
-    colWidths: {
-      type: Array as PropType<number[]>,
-      required: true,
-    },
-    outline: {
-      type: Object as PropType<PPTElementOutline>,
-      required: true,
-    },
-    theme: {
-      type: Object as PropType<TableTheme>,
-    },
-    editable: {
-      type: Boolean,
-      default: true,
-    },
+  width: {
+    type: Number,
+    required: true,
   },
-  setup(props, { emit }) {
-    const { canvasScale } = storeToRefs(useMainStore())
-    
-    const isStartSelect = ref(false)
-    const startCell = ref<number[]>([])
-    const endCell = ref<number[]>([])
-
-    const tableCells = computed<TableCell[][]>({
-      get() {
-        return props.data
-      },
-      set(newData) {
-        emit('change', newData)
-      },
-    })
-
-    // 主题辅助色
-    const theme = computed(() => props.theme)
-    const { subThemeColor } = useSubThemeColor(theme)
-
-    // 计算表格每一列的列宽和总宽度
-    const colSizeList = ref<number[]>([])
-    const totalWidth = computed(() => colSizeList.value.reduce((a, b) => a + b))
-    watch([
-      () => props.colWidths,
-      () => props.width,
-    ], () => {
-      colSizeList.value = props.colWidths.map(item => item * props.width)
-    }, { immediate: true })
-    
-    // 清除全部单元格的选中状态
-    // 表格处于不可编辑状态时也需要清除
-    const removeSelectedCells = () => {
-      startCell.value = []
-      endCell.value = []
-    }
-
-    watch(() => props.editable, () => {
-      if (!props.editable) removeSelectedCells()
-    })
-
-    // 用于拖拽列宽的操作节点位置
-    const dragLinePosition = computed(() => {
-      const dragLinePosition: number[] = []
-      for (let i = 1; i < colSizeList.value.length + 1; i++) {
-        const pos = colSizeList.value.slice(0, i).reduce((a, b) => (a + b))
-        dragLinePosition.push(pos)
-      }
-      return dragLinePosition
-    })
-
-    // 无效的单元格位置（被合并的单元格位置）集合
-    const cells = computed(() => props.data)
-    const { hideCells } = useHideCells(cells)
-
-    // 当前选中的单元格集合
-    const selectedCells = computed(() => {
-      if (!startCell.value.length) return []
-      const [startX, startY] = startCell.value
-
-      if (!endCell.value.length) return [`${startX}_${startY}`]
-      const [endX, endY] = endCell.value
-
-      if (startX === endX && startY === endY) return [`${startX}_${startY}`]
-
-      const selectedCells = []
-
-      const minX = Math.min(startX, endX)
-      const minY = Math.min(startY, endY)
-      const maxX = Math.max(startX, endX)
-      const maxY = Math.max(startY, endY)
-
-      for (let i = 0; i < tableCells.value.length; i++) {
-        const rowCells = tableCells.value[i]
-        for (let j = 0; j < rowCells.length; j++) {
-          if (i >= minX && i <= maxX && j >= minY && j <= maxY) selectedCells.push(`${i}_${j}`)
-        }
-      }
-      return selectedCells
-    })
-
-    watch(selectedCells, (value, oldValue) => {
-      if (isEqual(value, oldValue)) return
-      emit('changeSelectedCells', selectedCells.value)
-    })
-
-    // 当前激活的单元格：当且仅当只有一个选中单元格时，该单元格为激活的单元格
-    const activedCell = computed(() => {
-      if (selectedCells.value.length > 1) return null
-      return selectedCells.value[0]
-    })
-
-    // 当前选中的单元格位置范围
-    const selectedRange = computed(() => {
-      if (!startCell.value.length) return null
-      const [startX, startY] = startCell.value
-
-      if (!endCell.value.length) return { row: [startX, startX], col: [startY, startY] }
-      const [endX, endY] = endCell.value
-
-      if (startX === endX && startY === endY) return { row: [startX, startX], col: [startY, startY] }
-
-      const minX = Math.min(startX, endX)
-      const minY = Math.min(startY, endY)
-      const maxX = Math.max(startX, endX)
-      const maxY = Math.max(startY, endY)
-
-      return {
-        row: [minX, maxX],
-        col: [minY, maxY],
-      }
-    })
-
-    // 设置选中单元格状态（鼠标点击或拖选）
-    const handleMouseup = () => isStartSelect.value = false
-
-    const handleCellMousedown = (e: MouseEvent, rowIndex: number, colIndex: number) => {
-      if (e.button === 0) {
-        endCell.value = []
-        isStartSelect.value = true
-        startCell.value = [rowIndex, colIndex]
-      }
-    }
-
-    const handleCellMouseenter = (rowIndex: number, colIndex: number) => {
-      if (!isStartSelect.value) return
-      endCell.value = [rowIndex, colIndex]
-    }
-
-    onMounted(() => {
-      document.addEventListener('mouseup', handleMouseup)
-    })
-    onUnmounted(() => {
-      document.removeEventListener('mouseup', handleMouseup)
-    })
-
-    // 判断某位置是否为无效单元格（被合并掉的位置）
-    const isHideCell = (rowIndex: number, colIndex: number) => hideCells.value.includes(`${rowIndex}_${colIndex}`)
-
-    // 选中指定的列
-    const selectCol = (index: number) => {
-      const maxRow = tableCells.value.length - 1
-      startCell.value = [0, index]
-      endCell.value = [maxRow, index]
-    }
-
-    // 选中指定的行
-    const selectRow = (index: number) => {
-      const maxCol = tableCells.value[index].length - 1
-      startCell.value = [index, 0]
-      endCell.value = [index, maxCol]
-    }
-
-    // 选中全部单元格
-    const selectAll = () => {
-      const maxRow = tableCells.value.length - 1
-      const maxCol = tableCells.value[maxRow].length - 1
-      startCell.value = [0, 0]
-      endCell.value = [maxRow, maxCol]
-    }
-
-    // 删除一行
-    const deleteRow = (rowIndex: number) => {
-      const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
-
-      const targetCells = tableCells.value[rowIndex]
-      const hideCellsPos = []
-      for (let i = 0; i < targetCells.length; i++) {
-        if (isHideCell(rowIndex, i)) hideCellsPos.push(i)
-      }
-      
-      for (const pos of hideCellsPos) {
-        for (let i = rowIndex; i >= 0; i--) {
-          if (!isHideCell(i, pos)) {
-            _tableCells[i][pos].rowspan = _tableCells[i][pos].rowspan - 1
-            break
-          }
-        }
-      }
-
-      _tableCells.splice(rowIndex, 1)
-      tableCells.value = _tableCells
-    }
-
-    // 删除一列
-    const deleteCol = (colIndex: number) => {
-      const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
-
-      const hideCellsPos = []
-      for (let i = 0; i < tableCells.value.length; i++) {
-        if (isHideCell(i, colIndex)) hideCellsPos.push(i)
-      }
-
-      for (const pos of hideCellsPos) {
-        for (let i = colIndex; i >= 0; i--) {
-          if (!isHideCell(pos, i)) {
-            _tableCells[pos][i].colspan = _tableCells[pos][i].colspan - 1
-            break
-          }
-        }
-      }
-
-      tableCells.value = _tableCells.map(item => {
-        item.splice(colIndex, 1)
-        return item
-      })
-      colSizeList.value.splice(colIndex, 1)
-      emit('changeColWidths', colSizeList.value)
-    }
-    
-    // 插入一行
-    const insertRow = (rowIndex: number) => {
-      const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
-
-      const rowCells: TableCell[] = []
-      for (let i = 0; i < _tableCells[0].length; i++) {
-        rowCells.push({
-          colspan: 1,
-          rowspan: 1,
-          text: '',
-          id: nanoid(10),
-        })
-      }
-
-      _tableCells.splice(rowIndex, 0, rowCells)
-      tableCells.value = _tableCells
-    }
-
-    // 插入一列
-    const insertCol = (colIndex: number) => {
-      tableCells.value = tableCells.value.map(item => {
-        const cell = {
-          colspan: 1,
-          rowspan: 1,
-          text: '',
-          id: nanoid(10),
-        }
-        item.splice(colIndex, 0, cell)
-        return item
-      })
-      colSizeList.value.splice(colIndex, 0, 100)
-      emit('changeColWidths', colSizeList.value)
-    }
-
-    // 填充指定的行/列数
-    const fillTable = (rowCount: number, colCount: number) => {
-      let _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
-      const defaultCell = { colspan: 1, rowspan: 1, text: '' }
-      
-      if (rowCount) {
-        const newRows = []
-        for (let i = 0; i < rowCount; i++) {
-          const rowCells: TableCell[] = []
-          for (let j = 0; j < _tableCells[0].length; j++) {
-            rowCells.push({
-              ...defaultCell,
-              id: nanoid(10),
-            })
-          }
-          newRows.push(rowCells)
-        }
-        _tableCells = [..._tableCells, ...newRows]
-      }
-      if (colCount) {
-        _tableCells = _tableCells.map(item => {
-          const cells: TableCell[] = []
-          for (let i = 0; i < colCount; i++) {
-            const cell = {
-              ...defaultCell,
-              id: nanoid(10),
-            }
-            cells.push(cell)
-          }
-          return [...item, ...cells]
-        })
-        colSizeList.value = [...colSizeList.value, ...new Array(colCount).fill(100)]
-        emit('changeColWidths', colSizeList.value)
-      }
-
-      tableCells.value = _tableCells
-    }
-    
-    // 合并单元格
-    const mergeCells = () => {
-      const [startX, startY] = startCell.value
-      const [endX, endY] = endCell.value
-
-      const minX = Math.min(startX, endX)
-      const minY = Math.min(startY, endY)
-      const maxX = Math.max(startX, endX)
-      const maxY = Math.max(startY, endY)
-
-      const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
-      
-      _tableCells[minX][minY].rowspan = maxX - minX + 1
-      _tableCells[minX][minY].colspan = maxY - minY + 1
-
-      tableCells.value = _tableCells
-      removeSelectedCells()
-    }
-
-    // 拆分单元格
-    const splitCells = (rowIndex: number, colIndex: number) => {
-      const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
-      _tableCells[rowIndex][colIndex].rowspan = 1
-      _tableCells[rowIndex][colIndex].colspan = 1
-
-      tableCells.value = _tableCells
-      removeSelectedCells()
-    }
-
-    // 鼠标拖拽调整列宽
-    const handleMousedownColHandler = (e: MouseEvent, colIndex: number) => {
-      removeSelectedCells()
-      let isMouseDown = true
-
-      const originWidth = colSizeList.value[colIndex]
-      const startPageX = e.pageX
-
-      const minWidth = 50
-
-      document.onmousemove = e => {
-        if (!isMouseDown) return
-        
-        const moveX = (e.pageX - startPageX) / canvasScale.value
-        const width = originWidth + moveX < minWidth ? minWidth : Math.round(originWidth + moveX)
-
-        colSizeList.value[colIndex] = width
-      }
-      document.onmouseup = () => {
-        isMouseDown = false
-        document.onmousemove = null
-        document.onmouseup = null
-
-        emit('changeColWidths', colSizeList.value)
-      }
-    }
-
-    // 清空选中单元格内的文字
-    const clearSelectedCellText = () => {
-      const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
-
-      for (let i = 0; i < _tableCells.length; i++) {
-        for (let j = 0; j < _tableCells[i].length; j++) {
-          if (selectedCells.value.includes(`${i}_${j}`)) {
-            _tableCells[i][j].text = ''
-          }
-        }
-      }
-      tableCells.value = _tableCells
-    }
-
-    // 将焦点移动到下一个单元格
-    // 当前行右边有单元格时，焦点右移
-    // 当前行右边无单元格（已处在行末），且存在下一行时，焦点移动至下一行行首
-    // 当前行右边无单元格（已处在行末），且不存在下一行（已处在最后一行）时，新建一行并将焦点移动至下一行行首
-    const tabActiveCell = () => {
-      const getNextCell = (i: number, j: number): [number, number] | null => {
-        if (!tableCells.value[i]) return null
-        if (!tableCells.value[i][j]) return getNextCell(i + 1, 0)
-        if (isHideCell(i, j)) return getNextCell(i, j + 1)
-        return [i, j]
-      }
-
-      endCell.value = []
-
-      const nextRow = startCell.value[0]
-      const nextCol = startCell.value[1] + 1
-
-      const nextCell = getNextCell(nextRow, nextCol)
-      if (!nextCell) {
-        insertRow(nextRow + 1)
-        startCell.value = [nextRow + 1, 0]
-      }
-      else startCell.value = nextCell
-
-      // 移动焦点后自动聚焦文本
-      nextTick(() => {
-        const textRef = document.querySelector('.cell-text.active') as HTMLInputElement
-        if (textRef) textRef.focus()
-      })
-    }
-
-    // 表格快捷键监听
-    const keydownListener = (e: KeyboardEvent) => {
-      if (!props.editable || !selectedCells.value.length) return
-
-      const key = e.key.toUpperCase()
-      if (selectedCells.value.length < 2) {
-        if (key === KEYS.TAB) {
-          e.preventDefault()
-          tabActiveCell()
-        }
-        if (e.ctrlKey && key === KEYS.UP) {
-          e.preventDefault()
-          const rowIndex = +selectedCells.value[0].split('_')[0]
-          insertRow(rowIndex)
-        }
-        if (e.ctrlKey && key === KEYS.DOWN) {
-          e.preventDefault()
-          const rowIndex = +selectedCells.value[0].split('_')[0]
-          insertRow(rowIndex + 1)
-        }
-        if (e.ctrlKey && key === KEYS.LEFT) {
-          e.preventDefault()
-          const colIndex = +selectedCells.value[0].split('_')[1]
-          insertCol(colIndex)
-        }
-        if (e.ctrlKey && key === KEYS.RIGHT) {
-          e.preventDefault()
-          const colIndex = +selectedCells.value[0].split('_')[1]
-          insertCol(colIndex + 1)
-        }
-      }
-      else if (key === KEYS.DELETE) {
-        clearSelectedCellText()
-      }
-    }
-
-    onMounted(() => {
-      document.addEventListener('keydown', keydownListener)
-    })
-    onUnmounted(() => {
-      document.removeEventListener('keydown', keydownListener)
-    })
-
-    // 单元格文字输入时更新表格数据
-    const handleInput = debounce(function(value, rowIndex, colIndex) {
-      tableCells.value[rowIndex][colIndex].text = value
-      emit('change', tableCells.value)
-    }, 300, { trailing: true })
-
-    // 插入来自Excel的数据，表格的行/列数不够时自动补足
-    const insertExcelData = (data: string[][], rowIndex: number, colIndex: number) => {
-      const maxRow = data.length
-      const maxCol = data[0].length
-
-      let fillRowCount = 0
-      let fillColCount = 0
-      if (rowIndex + maxRow > tableCells.value.length) fillRowCount = rowIndex + maxRow - tableCells.value.length
-      if (colIndex + maxCol > tableCells.value[0].length) fillColCount = colIndex + maxCol - tableCells.value[0].length
-      if (fillRowCount || fillColCount) fillTable(fillRowCount, fillColCount)
-
-      nextTick(() => {
-        for (let i = 0; i < maxRow; i++) {
-          for (let j = 0; j < maxCol; j++) {
-            if (tableCells.value[rowIndex + i][colIndex + j]) {
-              tableCells.value[rowIndex + i][colIndex + j].text = data[i][j]
-            }
-          }
-        }
-        emit('change', tableCells.value)
-      })
-    }
-
-    // 获取有效的单元格（排除掉被合并的单元格）
-    const getEffectiveTableCells = () => {
-      const effectiveTableCells = []
-
-      for (let i = 0; i < tableCells.value.length; i++) {
-        const rowCells = tableCells.value[i]
-        const _rowCells = []
-        for (let j = 0; j < rowCells.length; j++) {
-          if (!isHideCell(i, j)) _rowCells.push(rowCells[j])
-        }
-        if (_rowCells.length) effectiveTableCells.push(_rowCells)
-      }
-
-      return effectiveTableCells
-    }
-
-    // 检查是否可以删除行和列：有效的行/列数大于1
-    const checkCanDeleteRowOrCol = () => {
-      const effectiveTableCells = getEffectiveTableCells()
-      const canDeleteRow = effectiveTableCells.length > 1
-      const canDeleteCol = effectiveTableCells[0].length > 1
-
-      return { canDeleteRow, canDeleteCol }
-    }
-
-    // 检查是否可以合并或拆分
-    // 必须多选才可以合并
-    // 必须单选且所选单元格为合并单元格才可以拆分
-    const checkCanMergeOrSplit = (rowIndex: number, colIndex: number) => {
-      const isMultiSelected = selectedCells.value.length > 1
-      const targetCell = tableCells.value[rowIndex][colIndex]
-
-      const canMerge = isMultiSelected
-      const canSplit = !isMultiSelected && (targetCell.rowspan > 1 || targetCell.colspan > 1)
-
-      return { canMerge, canSplit }
-    }
-
-    const contextmenus = (el: HTMLElement): ContextmenuItem[] => {
-      const cellIndex = el.dataset.cellIndex as string
-      const rowIndex = +cellIndex.split('_')[0]
-      const colIndex = +cellIndex.split('_')[1]
-
-      if (!selectedCells.value.includes(`${rowIndex}_${colIndex}`)) {
-        startCell.value = [rowIndex, colIndex]
-        endCell.value = []
-      }
-
-      const { canMerge, canSplit } = checkCanMergeOrSplit(rowIndex, colIndex)
-      const { canDeleteRow, canDeleteCol } = checkCanDeleteRowOrCol()
-
-      return [
-        {
-          text: '插入列',
-          children: [
-            { text: '到左侧', handler: () => insertCol(colIndex) },
-            { text: '到右侧', handler: () => insertCol(colIndex + 1) },
-          ],
-        },
-        {
-          text: '插入行',
-          children: [
-            { text: '到上方', handler: () => insertRow(rowIndex) },
-            { text: '到下方', handler: () => insertRow(rowIndex + 1) },
-          ],
-        },
-        {
-          text: '删除列',
-          disable: !canDeleteCol,
-          handler: () => deleteCol(colIndex),
-        },
-        {
-          text: '删除行',
-          disable: !canDeleteRow,
-          handler: () => deleteRow(rowIndex),
-        },
-        { divider: true },
-        {
-          text: '合并单元格',
-          disable: !canMerge,
-          handler: mergeCells,
-        },
-        {
-          text: '取消合并单元格',
-          disable: !canSplit,
-          handler: () => splitCells(rowIndex, colIndex),
-        },
-        { divider: true },
-        {
-          text: '选中当前列',
-          handler: () => selectCol(colIndex),
-        },
-        {
-          text: '选中当前行',
-          handler: () => selectRow(rowIndex),
-        },
-        {
-          text: '选中全部单元格',
-          handler: selectAll,
-        },
-      ]
-    }
-
-    return {
-      getTextStyle,
-      dragLinePosition,
-      tableCells,
-      colSizeList,
-      totalWidth,
-      hideCells,
-      selectedCells,
-      activedCell,
-      selectedRange,
-      handleCellMousedown,
-      handleCellMouseenter,
-      selectCol,
-      selectRow,
-      handleMousedownColHandler,
-      contextmenus,
-      handleInput,
-      insertExcelData,
-      subThemeColor,
-      formatText,
-    }
+  colWidths: {
+    type: Array as PropType<number[]>,
+    required: true,
+  },
+  outline: {
+    type: Object as PropType<PPTElementOutline>,
+    required: true,
+  },
+  theme: {
+    type: Object as PropType<TableTheme>,
+  },
+  editable: {
+    type: Boolean,
+    default: true,
   },
 })
+
+const emit = defineEmits<{
+  (event: 'change', payload: TableCell[][]): void
+  (event: 'changeColWidths', payload: number[]): void
+  (event: 'changeSelectedCells', payload: string[]): void
+}>()
+
+const { canvasScale } = storeToRefs(useMainStore())
+    
+const isStartSelect = ref(false)
+const startCell = ref<number[]>([])
+const endCell = ref<number[]>([])
+
+const tableCells = computed<TableCell[][]>({
+  get() {
+    return props.data
+  },
+  set(newData) {
+    emit('change', newData)
+  },
+})
+
+// 主题辅助色
+const theme = computed(() => props.theme)
+const { subThemeColor } = useSubThemeColor(theme)
+
+// 计算表格每一列的列宽和总宽度
+const colSizeList = ref<number[]>([])
+const totalWidth = computed(() => colSizeList.value.reduce((a, b) => a + b))
+watch([
+  () => props.colWidths,
+  () => props.width,
+], () => {
+  colSizeList.value = props.colWidths.map(item => item * props.width)
+}, { immediate: true })
+
+// 清除全部单元格的选中状态
+// 表格处于不可编辑状态时也需要清除
+const removeSelectedCells = () => {
+  startCell.value = []
+  endCell.value = []
+}
+
+watch(() => props.editable, () => {
+  if (!props.editable) removeSelectedCells()
+})
+
+// 用于拖拽列宽的操作节点位置
+const dragLinePosition = computed(() => {
+  const dragLinePosition: number[] = []
+  for (let i = 1; i < colSizeList.value.length + 1; i++) {
+    const pos = colSizeList.value.slice(0, i).reduce((a, b) => (a + b))
+    dragLinePosition.push(pos)
+  }
+  return dragLinePosition
+})
+
+// 无效的单元格位置（被合并的单元格位置）集合
+const cells = computed(() => props.data)
+const { hideCells } = useHideCells(cells)
+
+// 当前选中的单元格集合
+const selectedCells = computed(() => {
+  if (!startCell.value.length) return []
+  const [startX, startY] = startCell.value
+
+  if (!endCell.value.length) return [`${startX}_${startY}`]
+  const [endX, endY] = endCell.value
+
+  if (startX === endX && startY === endY) return [`${startX}_${startY}`]
+
+  const selectedCells = []
+
+  const minX = Math.min(startX, endX)
+  const minY = Math.min(startY, endY)
+  const maxX = Math.max(startX, endX)
+  const maxY = Math.max(startY, endY)
+
+  for (let i = 0; i < tableCells.value.length; i++) {
+    const rowCells = tableCells.value[i]
+    for (let j = 0; j < rowCells.length; j++) {
+      if (i >= minX && i <= maxX && j >= minY && j <= maxY) selectedCells.push(`${i}_${j}`)
+    }
+  }
+  return selectedCells
+})
+
+watch(selectedCells, (value, oldValue) => {
+  if (isEqual(value, oldValue)) return
+  emit('changeSelectedCells', selectedCells.value)
+})
+
+// 当前激活的单元格：当且仅当只有一个选中单元格时，该单元格为激活的单元格
+const activedCell = computed(() => {
+  if (selectedCells.value.length > 1) return null
+  return selectedCells.value[0]
+})
+
+// 当前选中的单元格位置范围
+const selectedRange = computed(() => {
+  if (!startCell.value.length) return null
+  const [startX, startY] = startCell.value
+
+  if (!endCell.value.length) return { row: [startX, startX], col: [startY, startY] }
+  const [endX, endY] = endCell.value
+
+  if (startX === endX && startY === endY) return { row: [startX, startX], col: [startY, startY] }
+
+  const minX = Math.min(startX, endX)
+  const minY = Math.min(startY, endY)
+  const maxX = Math.max(startX, endX)
+  const maxY = Math.max(startY, endY)
+
+  return {
+    row: [minX, maxX],
+    col: [minY, maxY],
+  }
+})
+
+// 设置选中单元格状态（鼠标点击或拖选）
+const handleMouseup = () => isStartSelect.value = false
+
+const handleCellMousedown = (e: MouseEvent, rowIndex: number, colIndex: number) => {
+  if (e.button === 0) {
+    endCell.value = []
+    isStartSelect.value = true
+    startCell.value = [rowIndex, colIndex]
+  }
+}
+
+const handleCellMouseenter = (rowIndex: number, colIndex: number) => {
+  if (!isStartSelect.value) return
+  endCell.value = [rowIndex, colIndex]
+}
+
+onMounted(() => {
+  document.addEventListener('mouseup', handleMouseup)
+})
+onUnmounted(() => {
+  document.removeEventListener('mouseup', handleMouseup)
+})
+
+// 判断某位置是否为无效单元格（被合并掉的位置）
+const isHideCell = (rowIndex: number, colIndex: number) => hideCells.value.includes(`${rowIndex}_${colIndex}`)
+
+// 选中指定的列
+const selectCol = (index: number) => {
+  const maxRow = tableCells.value.length - 1
+  startCell.value = [0, index]
+  endCell.value = [maxRow, index]
+}
+
+// 选中指定的行
+const selectRow = (index: number) => {
+  const maxCol = tableCells.value[index].length - 1
+  startCell.value = [index, 0]
+  endCell.value = [index, maxCol]
+}
+
+// 选中全部单元格
+const selectAll = () => {
+  const maxRow = tableCells.value.length - 1
+  const maxCol = tableCells.value[maxRow].length - 1
+  startCell.value = [0, 0]
+  endCell.value = [maxRow, maxCol]
+}
+
+// 删除一行
+const deleteRow = (rowIndex: number) => {
+  const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
+
+  const targetCells = tableCells.value[rowIndex]
+  const hideCellsPos = []
+  for (let i = 0; i < targetCells.length; i++) {
+    if (isHideCell(rowIndex, i)) hideCellsPos.push(i)
+  }
+  
+  for (const pos of hideCellsPos) {
+    for (let i = rowIndex; i >= 0; i--) {
+      if (!isHideCell(i, pos)) {
+        _tableCells[i][pos].rowspan = _tableCells[i][pos].rowspan - 1
+        break
+      }
+    }
+  }
+
+  _tableCells.splice(rowIndex, 1)
+  tableCells.value = _tableCells
+}
+
+// 删除一列
+const deleteCol = (colIndex: number) => {
+  const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
+
+  const hideCellsPos = []
+  for (let i = 0; i < tableCells.value.length; i++) {
+    if (isHideCell(i, colIndex)) hideCellsPos.push(i)
+  }
+
+  for (const pos of hideCellsPos) {
+    for (let i = colIndex; i >= 0; i--) {
+      if (!isHideCell(pos, i)) {
+        _tableCells[pos][i].colspan = _tableCells[pos][i].colspan - 1
+        break
+      }
+    }
+  }
+
+  tableCells.value = _tableCells.map(item => {
+    item.splice(colIndex, 1)
+    return item
+  })
+  colSizeList.value.splice(colIndex, 1)
+  emit('changeColWidths', colSizeList.value)
+}
+
+// 插入一行
+const insertRow = (rowIndex: number) => {
+  const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
+
+  const rowCells: TableCell[] = []
+  for (let i = 0; i < _tableCells[0].length; i++) {
+    rowCells.push({
+      colspan: 1,
+      rowspan: 1,
+      text: '',
+      id: nanoid(10),
+    })
+  }
+
+  _tableCells.splice(rowIndex, 0, rowCells)
+  tableCells.value = _tableCells
+}
+
+// 插入一列
+const insertCol = (colIndex: number) => {
+  tableCells.value = tableCells.value.map(item => {
+    const cell = {
+      colspan: 1,
+      rowspan: 1,
+      text: '',
+      id: nanoid(10),
+    }
+    item.splice(colIndex, 0, cell)
+    return item
+  })
+  colSizeList.value.splice(colIndex, 0, 100)
+  emit('changeColWidths', colSizeList.value)
+}
+
+// 填充指定的行/列数
+const fillTable = (rowCount: number, colCount: number) => {
+  let _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
+  const defaultCell = { colspan: 1, rowspan: 1, text: '' }
+  
+  if (rowCount) {
+    const newRows = []
+    for (let i = 0; i < rowCount; i++) {
+      const rowCells: TableCell[] = []
+      for (let j = 0; j < _tableCells[0].length; j++) {
+        rowCells.push({
+          ...defaultCell,
+          id: nanoid(10),
+        })
+      }
+      newRows.push(rowCells)
+    }
+    _tableCells = [..._tableCells, ...newRows]
+  }
+  if (colCount) {
+    _tableCells = _tableCells.map(item => {
+      const cells: TableCell[] = []
+      for (let i = 0; i < colCount; i++) {
+        const cell = {
+          ...defaultCell,
+          id: nanoid(10),
+        }
+        cells.push(cell)
+      }
+      return [...item, ...cells]
+    })
+    colSizeList.value = [...colSizeList.value, ...new Array(colCount).fill(100)]
+    emit('changeColWidths', colSizeList.value)
+  }
+
+  tableCells.value = _tableCells
+}
+
+// 合并单元格
+const mergeCells = () => {
+  const [startX, startY] = startCell.value
+  const [endX, endY] = endCell.value
+
+  const minX = Math.min(startX, endX)
+  const minY = Math.min(startY, endY)
+  const maxX = Math.max(startX, endX)
+  const maxY = Math.max(startY, endY)
+
+  const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
+  
+  _tableCells[minX][minY].rowspan = maxX - minX + 1
+  _tableCells[minX][minY].colspan = maxY - minY + 1
+
+  tableCells.value = _tableCells
+  removeSelectedCells()
+}
+
+// 拆分单元格
+const splitCells = (rowIndex: number, colIndex: number) => {
+  const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
+  _tableCells[rowIndex][colIndex].rowspan = 1
+  _tableCells[rowIndex][colIndex].colspan = 1
+
+  tableCells.value = _tableCells
+  removeSelectedCells()
+}
+
+// 鼠标拖拽调整列宽
+const handleMousedownColHandler = (e: MouseEvent, colIndex: number) => {
+  removeSelectedCells()
+  let isMouseDown = true
+
+  const originWidth = colSizeList.value[colIndex]
+  const startPageX = e.pageX
+
+  const minWidth = 50
+
+  document.onmousemove = e => {
+    if (!isMouseDown) return
+    
+    const moveX = (e.pageX - startPageX) / canvasScale.value
+    const width = originWidth + moveX < minWidth ? minWidth : Math.round(originWidth + moveX)
+
+    colSizeList.value[colIndex] = width
+  }
+  document.onmouseup = () => {
+    isMouseDown = false
+    document.onmousemove = null
+    document.onmouseup = null
+
+    emit('changeColWidths', colSizeList.value)
+  }
+}
+
+// 清空选中单元格内的文字
+const clearSelectedCellText = () => {
+  const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
+
+  for (let i = 0; i < _tableCells.length; i++) {
+    for (let j = 0; j < _tableCells[i].length; j++) {
+      if (selectedCells.value.includes(`${i}_${j}`)) {
+        _tableCells[i][j].text = ''
+      }
+    }
+  }
+  tableCells.value = _tableCells
+}
+
+// 将焦点移动到下一个单元格
+// 当前行右边有单元格时，焦点右移
+// 当前行右边无单元格（已处在行末），且存在下一行时，焦点移动至下一行行首
+// 当前行右边无单元格（已处在行末），且不存在下一行（已处在最后一行）时，新建一行并将焦点移动至下一行行首
+const tabActiveCell = () => {
+  const getNextCell = (i: number, j: number): [number, number] | null => {
+    if (!tableCells.value[i]) return null
+    if (!tableCells.value[i][j]) return getNextCell(i + 1, 0)
+    if (isHideCell(i, j)) return getNextCell(i, j + 1)
+    return [i, j]
+  }
+
+  endCell.value = []
+
+  const nextRow = startCell.value[0]
+  const nextCol = startCell.value[1] + 1
+
+  const nextCell = getNextCell(nextRow, nextCol)
+  if (!nextCell) {
+    insertRow(nextRow + 1)
+    startCell.value = [nextRow + 1, 0]
+  }
+  else startCell.value = nextCell
+
+  // 移动焦点后自动聚焦文本
+  nextTick(() => {
+    const textRef = document.querySelector('.cell-text.active') as HTMLInputElement
+    if (textRef) textRef.focus()
+  })
+}
+
+// 表格快捷键监听
+const keydownListener = (e: KeyboardEvent) => {
+  if (!props.editable || !selectedCells.value.length) return
+
+  const key = e.key.toUpperCase()
+  if (selectedCells.value.length < 2) {
+    if (key === KEYS.TAB) {
+      e.preventDefault()
+      tabActiveCell()
+    }
+    if (e.ctrlKey && key === KEYS.UP) {
+      e.preventDefault()
+      const rowIndex = +selectedCells.value[0].split('_')[0]
+      insertRow(rowIndex)
+    }
+    if (e.ctrlKey && key === KEYS.DOWN) {
+      e.preventDefault()
+      const rowIndex = +selectedCells.value[0].split('_')[0]
+      insertRow(rowIndex + 1)
+    }
+    if (e.ctrlKey && key === KEYS.LEFT) {
+      e.preventDefault()
+      const colIndex = +selectedCells.value[0].split('_')[1]
+      insertCol(colIndex)
+    }
+    if (e.ctrlKey && key === KEYS.RIGHT) {
+      e.preventDefault()
+      const colIndex = +selectedCells.value[0].split('_')[1]
+      insertCol(colIndex + 1)
+    }
+  }
+  else if (key === KEYS.DELETE) {
+    clearSelectedCellText()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', keydownListener)
+})
+onUnmounted(() => {
+  document.removeEventListener('keydown', keydownListener)
+})
+
+// 单元格文字输入时更新表格数据
+const handleInput = debounce(function(value, rowIndex, colIndex) {
+  tableCells.value[rowIndex][colIndex].text = value
+  emit('change', tableCells.value)
+}, 300, { trailing: true })
+
+// 插入来自Excel的数据，表格的行/列数不够时自动补足
+const insertExcelData = (data: string[][], rowIndex: number, colIndex: number) => {
+  const maxRow = data.length
+  const maxCol = data[0].length
+
+  let fillRowCount = 0
+  let fillColCount = 0
+  if (rowIndex + maxRow > tableCells.value.length) fillRowCount = rowIndex + maxRow - tableCells.value.length
+  if (colIndex + maxCol > tableCells.value[0].length) fillColCount = colIndex + maxCol - tableCells.value[0].length
+  if (fillRowCount || fillColCount) fillTable(fillRowCount, fillColCount)
+
+  nextTick(() => {
+    for (let i = 0; i < maxRow; i++) {
+      for (let j = 0; j < maxCol; j++) {
+        if (tableCells.value[rowIndex + i][colIndex + j]) {
+          tableCells.value[rowIndex + i][colIndex + j].text = data[i][j]
+        }
+      }
+    }
+    emit('change', tableCells.value)
+  })
+}
+
+// 获取有效的单元格（排除掉被合并的单元格）
+const getEffectiveTableCells = () => {
+  const effectiveTableCells = []
+
+  for (let i = 0; i < tableCells.value.length; i++) {
+    const rowCells = tableCells.value[i]
+    const _rowCells = []
+    for (let j = 0; j < rowCells.length; j++) {
+      if (!isHideCell(i, j)) _rowCells.push(rowCells[j])
+    }
+    if (_rowCells.length) effectiveTableCells.push(_rowCells)
+  }
+
+  return effectiveTableCells
+}
+
+// 检查是否可以删除行和列：有效的行/列数大于1
+const checkCanDeleteRowOrCol = () => {
+  const effectiveTableCells = getEffectiveTableCells()
+  const canDeleteRow = effectiveTableCells.length > 1
+  const canDeleteCol = effectiveTableCells[0].length > 1
+
+  return { canDeleteRow, canDeleteCol }
+}
+
+// 检查是否可以合并或拆分
+// 必须多选才可以合并
+// 必须单选且所选单元格为合并单元格才可以拆分
+const checkCanMergeOrSplit = (rowIndex: number, colIndex: number) => {
+  const isMultiSelected = selectedCells.value.length > 1
+  const targetCell = tableCells.value[rowIndex][colIndex]
+
+  const canMerge = isMultiSelected
+  const canSplit = !isMultiSelected && (targetCell.rowspan > 1 || targetCell.colspan > 1)
+
+  return { canMerge, canSplit }
+}
+
+const contextmenus = (el: HTMLElement): ContextmenuItem[] => {
+  const cellIndex = el.dataset.cellIndex as string
+  const rowIndex = +cellIndex.split('_')[0]
+  const colIndex = +cellIndex.split('_')[1]
+
+  if (!selectedCells.value.includes(`${rowIndex}_${colIndex}`)) {
+    startCell.value = [rowIndex, colIndex]
+    endCell.value = []
+  }
+
+  const { canMerge, canSplit } = checkCanMergeOrSplit(rowIndex, colIndex)
+  const { canDeleteRow, canDeleteCol } = checkCanDeleteRowOrCol()
+
+  return [
+    {
+      text: '插入列',
+      children: [
+        { text: '到左侧', handler: () => insertCol(colIndex) },
+        { text: '到右侧', handler: () => insertCol(colIndex + 1) },
+      ],
+    },
+    {
+      text: '插入行',
+      children: [
+        { text: '到上方', handler: () => insertRow(rowIndex) },
+        { text: '到下方', handler: () => insertRow(rowIndex + 1) },
+      ],
+    },
+    {
+      text: '删除列',
+      disable: !canDeleteCol,
+      handler: () => deleteCol(colIndex),
+    },
+    {
+      text: '删除行',
+      disable: !canDeleteRow,
+      handler: () => deleteRow(rowIndex),
+    },
+    { divider: true },
+    {
+      text: '合并单元格',
+      disable: !canMerge,
+      handler: mergeCells,
+    },
+    {
+      text: '取消合并单元格',
+      disable: !canSplit,
+      handler: () => splitCells(rowIndex, colIndex),
+    },
+    { divider: true },
+    {
+      text: '选中当前列',
+      handler: () => selectCol(colIndex),
+    },
+    {
+      text: '选中当前行',
+      handler: () => selectRow(rowIndex),
+    },
+    {
+      text: '选中全部单元格',
+      handler: selectAll,
+    },
+  ]
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/TableElement/StaticTable.vue b/src/views/components/element/TableElement/StaticTable.vue
index f8f088ff..ef332506 100644
--- a/src/views/components/element/TableElement/StaticTable.vue
+++ b/src/views/components/element/TableElement/StaticTable.vue
@@ -43,67 +43,54 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType, ref, watch } from 'vue'
 import { PPTElementOutline, TableCell, TableTheme } from '@/types/slides'
 import { getTextStyle, formatText } from './utils'
 import useHideCells from './useHideCells'
 import useSubThemeColor from './useSubThemeColor'
 
-export default defineComponent({
-  name: 'static-table',
-  props: {
-    data: {
-      type: Array as PropType<TableCell[][]>,
-      required: true,
-    },
-    width: {
-      type: Number,
-      required: true,
-    },
-    colWidths: {
-      type: Array as PropType<number[]>,
-      required: true,
-    },
-    outline: {
-      type: Object as PropType<PPTElementOutline>,
-      required: true,
-    },
-    theme: {
-      type: Object as PropType<TableTheme>,
-    },
-    editable: {
-      type: Boolean,
-      default: true,
-    },
+const props = defineProps({
+  data: {
+    type: Array as PropType<TableCell[][]>,
+    required: true,
   },
-  setup(props) {
-    const colSizeList = ref<number[]>([])
-    const totalWidth = computed(() => colSizeList.value.reduce((a, b) => a + b))
-
-    watch([
-      () => props.colWidths,
-      () => props.width,
-    ], () => {
-      colSizeList.value = props.colWidths.map(item => item * props.width)
-    }, { immediate: true })
-
-    const cells = computed(() => props.data)
-    const { hideCells } = useHideCells(cells)
-
-    const theme = computed(() => props.theme)
-    const { subThemeColor } = useSubThemeColor(theme)
-
-    return {
-      colSizeList,
-      totalWidth,
-      hideCells,
-      getTextStyle,
-      formatText,
-      subThemeColor,
-    }
+  width: {
+    type: Number,
+    required: true,
+  },
+  colWidths: {
+    type: Array as PropType<number[]>,
+    required: true,
+  },
+  outline: {
+    type: Object as PropType<PPTElementOutline>,
+    required: true,
+  },
+  theme: {
+    type: Object as PropType<TableTheme>,
+  },
+  editable: {
+    type: Boolean,
+    default: true,
   },
 })
+
+const colSizeList = ref<number[]>([])
+const totalWidth = computed(() => colSizeList.value.reduce((a, b) => a + b))
+
+watch([
+  () => props.colWidths,
+  () => props.width,
+], () => {
+  colSizeList.value = props.colWidths.map(item => item * props.width)
+}, { immediate: true })
+
+const cells = computed(() => props.data)
+const { hideCells } = useHideCells(cells)
+
+const theme = computed(() => props.theme)
+const { subThemeColor } = useSubThemeColor(theme)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/TableElement/index.vue b/src/views/components/element/TableElement/index.vue
index e4bbdc10..f11bcffb 100644
--- a/src/views/components/element/TableElement/index.vue
+++ b/src/views/components/element/TableElement/index.vue
@@ -44,8 +44,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTTableElement, TableCell } from '@/types/slides'
@@ -54,137 +54,119 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import EditableTable from './EditableTable.vue'
 
-export default defineComponent({
-  name: 'editable-element-table',
-  components: {
-    EditableTable,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTTableElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTTableElement>,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTTableElement, canMove?: boolean) => void>,
-      required: true,
-    },
-    contextmenus: {
-      type: Function as PropType<() => ContextmenuItem[] | null>,
-    },
+  selectElement: {
+    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTTableElement, canMove?: boolean) => void>,
+    required: true,
   },
-  setup(props) {
-    const mainStore = useMainStore()
-    const slidesStore = useSlidesStore()
-    const { canvasScale, handleElementId, isScaling } = storeToRefs(mainStore)
-    
-    const elementRef = ref<HTMLElement>()
-
-    const { addHistorySnapshot } = useHistorySnapshot()
-
-    const handleSelectElement = (e: MouseEvent | TouchEvent) => {
-      if (props.elementInfo.lock) return
-      e.stopPropagation()
-
-      props.selectElement(e, props.elementInfo)
-    }
-
-    // 更新表格的可编辑状态，表格处于编辑状态时需要禁用全局快捷键
-    const editable = ref(false)
-
-    watch(handleElementId, () => {
-      if (handleElementId.value !== props.elementInfo.id) editable.value = false
-    })
-
-    watch(editable, () => {
-      mainStore.setDisableHotkeysState(editable.value)
-    })
-
-    const startEdit = () => {
-      if (!props.elementInfo.lock) editable.value = true
-    }
-
-    // 监听表格元素的尺寸变化，当高度变化时，更新高度到vuex
-    // 如果高度变化时正处在缩放操作中，则等待缩放操作结束后再更新
-    const realHeightCache = ref(-1)
-
-    watch(isScaling, () => {
-      if (handleElementId.value !== props.elementInfo.id) return
-
-      if (isScaling.value) editable.value = false
-
-      if (!isScaling.value && realHeightCache.value !== -1) {
-        slidesStore.updateElement({
-          id: props.elementInfo.id,
-          props: { height: realHeightCache.value },
-        })
-        realHeightCache.value = -1
-      }
-    })
-
-    const updateTableElementHeight = (entries: ResizeObserverEntry[]) => {
-      const contentRect = entries[0].contentRect
-      if (!elementRef.value) return
-
-      const realHeight = contentRect.height
-
-      if (props.elementInfo.height !== realHeight) {
-        if (!isScaling.value) {
-          slidesStore.updateElement({
-            id: props.elementInfo.id,
-            props: { height: realHeight },
-          })
-        }
-        else realHeightCache.value = realHeight
-      }
-    }
-
-    const resizeObserver = new ResizeObserver(updateTableElementHeight)
-
-    onMounted(() => {
-      if (elementRef.value) resizeObserver.observe(elementRef.value)
-    })
-    onUnmounted(() => {
-      if (elementRef.value) resizeObserver.unobserve(elementRef.value)
-    })
-
-    // 更新表格内容数据
-    const updateTableCells = (data: TableCell[][]) => {
-      slidesStore.updateElement({
-        id: props.elementInfo.id, 
-        props: { data },
-      })
-      addHistorySnapshot()
-    }
-
-    // 更新表格的列宽数据
-    const updateColWidths = (widths: number[]) => {
-      const width = widths.reduce((a, b) => a + b)
-      const colWidths = widths.map(item => item / width)
-
-      slidesStore.updateElement({
-        id: props.elementInfo.id, 
-        props: { width, colWidths },
-      })
-      addHistorySnapshot()
-    }
-
-    // 更新表格当前选中的单元格
-    const updateSelectedCells = (cells: string[]) => {
-      nextTick(() => mainStore.setSelectedTableCells(cells))
-    }
-
-    return {
-      elementRef,
-      canvasScale,
-      handleSelectElement,
-      updateTableCells,
-      updateColWidths,
-      editable,
-      startEdit,
-      updateSelectedCells,
-    }
+  contextmenus: {
+    type: Function as PropType<() => ContextmenuItem[] | null>,
   },
 })
+
+const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { canvasScale, handleElementId, isScaling } = storeToRefs(mainStore)
+
+const elementRef = ref<HTMLElement>()
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const handleSelectElement = (e: MouseEvent | TouchEvent) => {
+  if (props.elementInfo.lock) return
+  e.stopPropagation()
+
+  props.selectElement(e, props.elementInfo)
+}
+
+// 更新表格的可编辑状态，表格处于编辑状态时需要禁用全局快捷键
+const editable = ref(false)
+
+watch(handleElementId, () => {
+  if (handleElementId.value !== props.elementInfo.id) editable.value = false
+})
+
+watch(editable, () => {
+  mainStore.setDisableHotkeysState(editable.value)
+})
+
+const startEdit = () => {
+  if (!props.elementInfo.lock) editable.value = true
+}
+
+// 监听表格元素的尺寸变化，当高度变化时，更新高度到vuex
+// 如果高度变化时正处在缩放操作中，则等待缩放操作结束后再更新
+const realHeightCache = ref(-1)
+
+watch(isScaling, () => {
+  if (handleElementId.value !== props.elementInfo.id) return
+
+  if (isScaling.value) editable.value = false
+
+  if (!isScaling.value && realHeightCache.value !== -1) {
+    slidesStore.updateElement({
+      id: props.elementInfo.id,
+      props: { height: realHeightCache.value },
+    })
+    realHeightCache.value = -1
+  }
+})
+
+const updateTableElementHeight = (entries: ResizeObserverEntry[]) => {
+  const contentRect = entries[0].contentRect
+  if (!elementRef.value) return
+
+  const realHeight = contentRect.height
+
+  if (props.elementInfo.height !== realHeight) {
+    if (!isScaling.value) {
+      slidesStore.updateElement({
+        id: props.elementInfo.id,
+        props: { height: realHeight },
+      })
+    }
+    else realHeightCache.value = realHeight
+  }
+}
+
+const resizeObserver = new ResizeObserver(updateTableElementHeight)
+
+onMounted(() => {
+  if (elementRef.value) resizeObserver.observe(elementRef.value)
+})
+onUnmounted(() => {
+  if (elementRef.value) resizeObserver.unobserve(elementRef.value)
+})
+
+// 更新表格内容数据
+const updateTableCells = (data: TableCell[][]) => {
+  slidesStore.updateElement({
+    id: props.elementInfo.id, 
+    props: { data },
+  })
+  addHistorySnapshot()
+}
+
+// 更新表格的列宽数据
+const updateColWidths = (widths: number[]) => {
+  const width = widths.reduce((a, b) => a + b)
+  const colWidths = widths.map(item => item / width)
+
+  slidesStore.updateElement({
+    id: props.elementInfo.id, 
+    props: { width, colWidths },
+  })
+  addHistorySnapshot()
+}
+
+// 更新表格当前选中的单元格
+const updateSelectedCells = (cells: string[]) => {
+  nextTick(() => mainStore.setSelectedTableCells(cells))
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/TextElement/BaseTextElement.vue b/src/views/components/element/TextElement/BaseTextElement.vue
index 019b516c..ea1553a8 100644
--- a/src/views/components/element/TextElement/BaseTextElement.vue
+++ b/src/views/components/element/TextElement/BaseTextElement.vue
@@ -38,39 +38,27 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, computed, StyleValue } from 'vue'
+<script lang="ts" setup>
+import { PropType, computed, StyleValue } from 'vue'
 import { PPTTextElement } from '@/types/slides'
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
 
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
-export default defineComponent({
-  name: 'base-element-text',
-  components: {
-    ElementOutline,
-  },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTTextElement>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const shadow = computed(() => props.elementInfo.shadow)
-    const { shadowStyle } = useElementShadow(shadow)
-
-    const cssVar = computed(() => ({
-      '--textIndent': `${props.elementInfo.textIndent || 0}px`,
-      '--paragraphSpace': `${props.elementInfo.paragraphSpace === undefined ? 5 : props.elementInfo.paragraphSpace}px`,
-    } as StyleValue))
-
-    return {
-      shadowStyle,
-      cssVar,
-    }
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTTextElement>,
+    required: true,
   },
 })
+
+const shadow = computed(() => props.elementInfo.shadow)
+const { shadowStyle } = useElementShadow(shadow)
+
+const cssVar = computed(() => ({
+  '--textIndent': `${props.elementInfo.textIndent || 0}px`,
+  '--paragraphSpace': `${props.elementInfo.paragraphSpace === undefined ? 5 : props.elementInfo.paragraphSpace}px`,
+} as StyleValue))
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/TextElement/index.vue b/src/views/components/element/TextElement/index.vue
index 59612255..a5946b74 100644
--- a/src/views/components/element/TextElement/index.vue
+++ b/src/views/components/element/TextElement/index.vue
@@ -57,8 +57,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTTextElement } from '@/types/slides'
@@ -69,112 +69,96 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
 import ProsemirrorEditor from '@/views/components/element/ProsemirrorEditor.vue'
 
-export default defineComponent({
-  name: 'editable-element-text',
-  components: {
-    ElementOutline,
-    ProsemirrorEditor,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTTextElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTTextElement>,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTTextElement, canMove?: boolean) => void>,
-      required: true,
-    },
-    contextmenus: {
-      type: Function as PropType<() => ContextmenuItem[] | null>,
-    },
+  selectElement: {
+    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTTextElement, canMove?: boolean) => void>,
+    required: true,
   },
-  setup(props) {
-    const mainStore = useMainStore()
-    const slidesStore = useSlidesStore()
-    const { handleElementId, isScaling } = storeToRefs(mainStore)
-    
-    const { addHistorySnapshot } = useHistorySnapshot()
+  contextmenus: {
+    type: Function as PropType<() => ContextmenuItem[] | null>,
+  },
+})
 
-    const elementRef = ref<HTMLElement>()
+const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { handleElementId, isScaling } = storeToRefs(mainStore)
 
-    const shadow = computed(() => props.elementInfo.shadow)
-    const { shadowStyle } = useElementShadow(shadow)
+const { addHistorySnapshot } = useHistorySnapshot()
 
-    const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
-      if (props.elementInfo.lock) return
-      e.stopPropagation()
+const elementRef = ref<HTMLElement>()
 
-      props.selectElement(e, props.elementInfo, canMove)
-    }
+const shadow = computed(() => props.elementInfo.shadow)
+const { shadowStyle } = useElementShadow(shadow)
 
-    // 监听文本元素的尺寸变化，当高度变化时，更新高度到vuex
-    // 如果高度变化时正处在缩放操作中，则等待缩放操作结束后再更新
-    const realHeightCache = ref(-1)
+const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
+  if (props.elementInfo.lock) return
+  e.stopPropagation()
 
-    watch(isScaling, () => {
-      if (handleElementId.value !== props.elementInfo.id) return
+  props.selectElement(e, props.elementInfo, canMove)
+}
 
-      if (!isScaling.value && realHeightCache.value !== -1) {
-        slidesStore.updateElement({
-          id: props.elementInfo.id,
-          props: { height: realHeightCache.value },
-        })
-        realHeightCache.value = -1
-      }
+// 监听文本元素的尺寸变化，当高度变化时，更新高度到vuex
+// 如果高度变化时正处在缩放操作中，则等待缩放操作结束后再更新
+const realHeightCache = ref(-1)
+
+watch(isScaling, () => {
+  if (handleElementId.value !== props.elementInfo.id) return
+
+  if (!isScaling.value && realHeightCache.value !== -1) {
+    slidesStore.updateElement({
+      id: props.elementInfo.id,
+      props: { height: realHeightCache.value },
     })
+    realHeightCache.value = -1
+  }
+})
 
-    const updateTextElementHeight = (entries: ResizeObserverEntry[]) => {
-      const contentRect = entries[0].contentRect
-      if (!elementRef.value) return
+const updateTextElementHeight = (entries: ResizeObserverEntry[]) => {
+  const contentRect = entries[0].contentRect
+  if (!elementRef.value) return
 
-      const realHeight = contentRect.height
+  const realHeight = contentRect.height
 
-      if (props.elementInfo.height !== realHeight) {
-        if (!isScaling.value) {
-          slidesStore.updateElement({
-            id: props.elementInfo.id,
-            props: { height: realHeight },
-          })
-        }
-        else realHeightCache.value = realHeight
-      }
-    }
-    const resizeObserver = new ResizeObserver(updateTextElementHeight)
-
-    onMounted(() => {
-      if (elementRef.value) resizeObserver.observe(elementRef.value)
-    })
-    onUnmounted(() => {
-      if (elementRef.value) resizeObserver.unobserve(elementRef.value)
-    })
-
-    const updateContent = (content: string) => {
+  if (props.elementInfo.height !== realHeight) {
+    if (!isScaling.value) {
       slidesStore.updateElement({
         id: props.elementInfo.id,
-        props: { content },
+        props: { height: realHeight },
       })
-      
-      addHistorySnapshot()
     }
+    else realHeightCache.value = realHeight
+  }
+}
+const resizeObserver = new ResizeObserver(updateTextElementHeight)
 
-    const checkEmptyText = () => {
-      const pureText = props.elementInfo.content.replaceAll(/<[^>]+>/g, '')
-      if (!pureText) slidesStore.deleteElement(props.elementInfo.id)
-    }
+onMounted(() => {
+  if (elementRef.value) resizeObserver.observe(elementRef.value)
+})
+onUnmounted(() => {
+  if (elementRef.value) resizeObserver.unobserve(elementRef.value)
+})
 
-    const isHandleElement = computed(() => handleElementId.value === props.elementInfo.id)
-    watch(isHandleElement, () => {
-      if (!isHandleElement.value) checkEmptyText()
-    })
+const updateContent = (content: string) => {
+  slidesStore.updateElement({
+    id: props.elementInfo.id,
+    props: { content },
+  })
+  
+  addHistorySnapshot()
+}
 
-    return {
-      elementRef,
-      shadowStyle,
-      updateContent,
-      handleSelectElement,
-      checkEmptyText,
-    }
-  },
+const checkEmptyText = () => {
+  const pureText = props.elementInfo.content.replaceAll(/<[^>]+>/g, '')
+  if (!pureText) slidesStore.deleteElement(props.elementInfo.id)
+}
+
+const isHandleElement = computed(() => handleElementId.value === props.elementInfo.id)
+watch(isHandleElement, () => {
+  if (!isHandleElement.value) checkEmptyText()
 })
 </script>
 
diff --git a/src/views/components/element/VideoElement/BaseVideoElement.vue b/src/views/components/element/VideoElement/BaseVideoElement.vue
index 4bb1bf51..b33ff06e 100644
--- a/src/views/components/element/VideoElement/BaseVideoElement.vue
+++ b/src/views/components/element/VideoElement/BaseVideoElement.vue
@@ -18,17 +18,14 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 import { PPTVideoElement } from '@/types/slides'
 
-export default defineComponent({
-  name: 'base-element-video',
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTVideoElement>,
-      required: true,
-    },
+defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTVideoElement>,
+    required: true,
   },
 })
 </script>
diff --git a/src/views/components/element/VideoElement/ScreenVideoElement.vue b/src/views/components/element/VideoElement/ScreenVideoElement.vue
index 0cad6c14..e9df219c 100644
--- a/src/views/components/element/VideoElement/ScreenVideoElement.vue
+++ b/src/views/components/element/VideoElement/ScreenVideoElement.vue
@@ -25,8 +25,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, inject, PropType, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { PPTVideoElement } from '@/types/slides'
@@ -34,31 +34,19 @@ import { injectKeySlideId, injectKeySlideScale } from '@/types/injectKey'
 
 import VideoPlayer from './VideoPlayer/index.vue'
 
-export default defineComponent({
-  name: 'screen-element-video',
-  components: {
-    VideoPlayer,
-  },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTVideoElement>,
-      required: true,
-    },
-  },
-  setup() {
-    const { currentSlide } = storeToRefs(useSlidesStore())
-
-    const scale = inject(injectKeySlideScale) || ref(1)
-    const slideId = inject(injectKeySlideId) || ref('')
-
-    const inCurrentSlide = computed(() => currentSlide.value.id === slideId.value)
-
-    return {
-      scale,
-      inCurrentSlide,
-    }
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTVideoElement>,
+    required: true,
   },
 })
+
+const { currentSlide } = storeToRefs(useSlidesStore())
+
+const scale = inject(injectKeySlideScale) || ref(1)
+const slideId = inject(injectKeySlideId) || ref('')
+
+const inCurrentSlide = computed(() => currentSlide.value.id === slideId.value)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/components/element/VideoElement/VideoPlayer/index.vue b/src/views/components/element/VideoElement/VideoPlayer/index.vue
index 5122b5f2..bd0b0a75 100644
--- a/src/views/components/element/VideoElement/VideoPlayer/index.vue
+++ b/src/views/components/element/VideoElement/VideoPlayer/index.vue
@@ -112,11 +112,34 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
 import useMSE from './useMSE'
 import { message } from 'ant-design-vue'
 
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  src: {
+    type: String,
+    required: true,
+  },
+  poster: {
+    type: String,
+    default: '',
+  },
+  scale: {
+    type: Number,
+    default: 1,
+  },
+})
+
 const secondToTime = (second = 0) => {
   if (second === 0 || isNaN(second)) return '00:00'
 
@@ -131,280 +154,213 @@ const getBoundingClientRectViewLeft = (element: HTMLElement) => {
   return element.getBoundingClientRect().left
 }
 
-export default defineComponent({
-  name: 'video-player',
-  props: {
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    src: {
-      type: String,
-      required: true,
-    },
-    poster: {
-      type: String,
-      default: '',
-    },
-    scale: {
-      type: Number,
-      default: 1,
-    },
-  },
-  setup(props) {
-    const videoRef = ref<HTMLVideoElement>()
-    const playBarWrap = ref<HTMLElement>()
-    const volumeBarRef = ref<HTMLElement>()
+const videoRef = ref<HTMLVideoElement>()
+const playBarWrap = ref<HTMLElement>()
+const volumeBarRef = ref<HTMLElement>()
 
-    const volume = ref(0.5)
-    const paused = ref(true)
-    const currentTime = ref(0)
-    const duration = ref(0)
-    const loaded = ref(0)
-    const loop = ref(false)
-    const bezelTransition = ref(false)
-    const playbackRate = ref(1)
+const volume = ref(0.5)
+const paused = ref(true)
+const currentTime = ref(0)
+const duration = ref(0)
+const loaded = ref(0)
+const loop = ref(false)
+const bezelTransition = ref(false)
+const playbackRate = ref(1)
 
-    const playBarTimeVisible = ref(false)
-    const playBarTime = ref('00:00')
-    const playBarTimeLeft = ref('0')
+const playBarTimeVisible = ref(false)
+const playBarTime = ref('00:00')
+const playBarTimeLeft = ref('0')
 
-    const ptime = computed(() => secondToTime(currentTime.value))
-    const dtime = computed(() => secondToTime(duration.value))
-    const playedBarWidth = computed(() => currentTime.value / duration.value * 100 + '%')
-    const loadedBarWidth = computed(() => loaded.value / duration.value * 100 + '%')
-    const volumeBarWidth = computed(() => volume.value * 100 + '%')
+const ptime = computed(() => secondToTime(currentTime.value))
+const dtime = computed(() => secondToTime(duration.value))
+const playedBarWidth = computed(() => currentTime.value / duration.value * 100 + '%')
+const loadedBarWidth = computed(() => loaded.value / duration.value * 100 + '%')
+const volumeBarWidth = computed(() => volume.value * 100 + '%')
 
-    const speedMenuVisible = ref(false)
-    const speedOptions = [
-      { label: '2x', value: 2 },
-      { label: '1.5x', value: 1.5 },
-      { label: '1.25x', value: 1.25 },
-      { label: '1x', value: 1 },
-      { label: '0.75x', value: 0.75 },
-      { label: '0.5x', value: 0.5 },
-    ]
+const speedMenuVisible = ref(false)
+const speedOptions = [
+  { label: '2x', value: 2 },
+  { label: '1.5x', value: 1.5 },
+  { label: '1.25x', value: 1.25 },
+  { label: '1x', value: 1 },
+  { label: '0.75x', value: 0.75 },
+  { label: '0.5x', value: 0.5 },
+]
 
-    const seek = (time: number) => {
-      if (!videoRef.value) return
+const seek = (time: number) => {
+  if (!videoRef.value) return
 
-      time = Math.max(time, 0)
-      time = Math.min(time, duration.value)
+  time = Math.max(time, 0)
+  time = Math.min(time, duration.value)
 
-      videoRef.value.currentTime = time
-      currentTime.value = time
-    }
+  videoRef.value.currentTime = time
+  currentTime.value = time
+}
 
-    const play = () => {
-      if (!videoRef.value) return
+const play = () => {
+  if (!videoRef.value) return
 
-      paused.value = false
-      videoRef.value.play()
-      bezelTransition.value = true
-    }
+  paused.value = false
+  videoRef.value.play()
+  bezelTransition.value = true
+}
 
-    const pause = () => {
-      if (!videoRef.value) return
+const pause = () => {
+  if (!videoRef.value) return
 
-      paused.value = true
-      videoRef.value.pause()
-      bezelTransition.value = true
-    }
+  paused.value = true
+  videoRef.value.pause()
+  bezelTransition.value = true
+}
 
-    const toggle = () => {
-      if (paused.value) play() 
-      else pause()
-    }
+const toggle = () => {
+  if (paused.value) play() 
+  else pause()
+}
 
-    const setVolume = (percentage: number) => {
-      if (!videoRef.value) return
+const setVolume = (percentage: number) => {
+  if (!videoRef.value) return
 
-      percentage = Math.max(percentage, 0)
-      percentage = Math.min(percentage, 1)
+  percentage = Math.max(percentage, 0)
+  percentage = Math.min(percentage, 1)
 
-      videoRef.value.volume = percentage
-      volume.value = percentage
-      if (videoRef.value.muted && percentage !== 0) videoRef.value.muted = false
-    }
+  videoRef.value.volume = percentage
+  volume.value = percentage
+  if (videoRef.value.muted && percentage !== 0) videoRef.value.muted = false
+}
 
-    const speed = (rate: number) => {
-      if (videoRef.value) videoRef.value.playbackRate = rate
-      playbackRate.value = rate
-    }
+const speed = (rate: number) => {
+  if (videoRef.value) videoRef.value.playbackRate = rate
+  playbackRate.value = rate
+}
 
-    const handleDurationchange = () => {
-      duration.value = videoRef.value?.duration || 0
-    }
+const handleDurationchange = () => {
+  duration.value = videoRef.value?.duration || 0
+}
 
-    const handleTimeupdate = () => {
-      currentTime.value = videoRef.value?.currentTime || 0
-    }
+const handleTimeupdate = () => {
+  currentTime.value = videoRef.value?.currentTime || 0
+}
 
-    const handleEnded = () => {
-      if (!loop.value) pause()
-      else {
-        seek(0)
-        play()
-      }
-    }
+const handleEnded = () => {
+  if (!loop.value) pause()
+  else {
+    seek(0)
+    play()
+  }
+}
 
-    const handleProgress = () => {
-      loaded.value = videoRef.value?.buffered.length ? videoRef.value.buffered.end(videoRef.value.buffered.length - 1) : 0
-    }
+const handleProgress = () => {
+  loaded.value = videoRef.value?.buffered.length ? videoRef.value.buffered.end(videoRef.value.buffered.length - 1) : 0
+}
 
-    const handleError = () => message.error('视频加载失败')
+const handleError = () => message.error('视频加载失败')
 
-    const thumbMove = (e: MouseEvent | TouchEvent) => {
-      if (!videoRef.value || !playBarWrap.value) return
-      const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
-      let percentage = (clientX - getBoundingClientRectViewLeft(playBarWrap.value)) / playBarWrap.value.clientWidth
-      percentage = Math.max(percentage, 0)
-      percentage = Math.min(percentage, 1)
-      const time = percentage * duration.value
+const thumbMove = (e: MouseEvent | TouchEvent) => {
+  if (!videoRef.value || !playBarWrap.value) return
+  const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
+  let percentage = (clientX - getBoundingClientRectViewLeft(playBarWrap.value)) / playBarWrap.value.clientWidth
+  percentage = Math.max(percentage, 0)
+  percentage = Math.min(percentage, 1)
+  const time = percentage * duration.value
 
-      videoRef.value.currentTime = time
-      currentTime.value = time
-    }
+  videoRef.value.currentTime = time
+  currentTime.value = time
+}
 
-    const thumbUp = (e: MouseEvent | TouchEvent) => {
-      if (!videoRef.value || !playBarWrap.value) return
+const thumbUp = (e: MouseEvent | TouchEvent) => {
+  if (!videoRef.value || !playBarWrap.value) return
 
-      const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
-      let percentage = (clientX - getBoundingClientRectViewLeft(playBarWrap.value)) / playBarWrap.value.clientWidth
-      percentage = Math.max(percentage, 0)
-      percentage = Math.min(percentage, 1)
-      const time = percentage * duration.value
+  const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
+  let percentage = (clientX - getBoundingClientRectViewLeft(playBarWrap.value)) / playBarWrap.value.clientWidth
+  percentage = Math.max(percentage, 0)
+  percentage = Math.min(percentage, 1)
+  const time = percentage * duration.value
 
-      videoRef.value.currentTime = time
-      currentTime.value = time
+  videoRef.value.currentTime = time
+  currentTime.value = time
 
-      document.removeEventListener('mousemove', thumbMove)
-      document.removeEventListener('touchmove', thumbMove)
-      document.removeEventListener('mouseup', thumbUp)
-      document.removeEventListener('touchend', thumbUp)
-    }
+  document.removeEventListener('mousemove', thumbMove)
+  document.removeEventListener('touchmove', thumbMove)
+  document.removeEventListener('mouseup', thumbUp)
+  document.removeEventListener('touchend', thumbUp)
+}
 
-    const handleMousedownPlayBar = () => {
-      document.addEventListener('mousemove', thumbMove)
-      document.addEventListener('touchmove', thumbMove)
-      document.addEventListener('mouseup', thumbUp)
-      document.addEventListener('touchend', thumbUp)
-    }
+const handleMousedownPlayBar = () => {
+  document.addEventListener('mousemove', thumbMove)
+  document.addEventListener('touchmove', thumbMove)
+  document.addEventListener('mouseup', thumbUp)
+  document.addEventListener('touchend', thumbUp)
+}
 
-    const volumeMove = (e: MouseEvent | TouchEvent) => {
-      if (!volumeBarRef.value) return
-      const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
-      const percentage = (clientX - getBoundingClientRectViewLeft(volumeBarRef.value) - 5.5) / 35
-      setVolume(percentage)
-    }
+const volumeMove = (e: MouseEvent | TouchEvent) => {
+  if (!volumeBarRef.value) return
+  const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
+  const percentage = (clientX - getBoundingClientRectViewLeft(volumeBarRef.value)) / 45
+  setVolume(percentage)
+}
 
-    const volumeUp = () => {
-      document.removeEventListener('mousemove', volumeMove)
-      document.removeEventListener('touchmove', volumeMove)
-      document.removeEventListener('mouseup', volumeUp)
-      document.removeEventListener('touchend', volumeUp)
-    }
+const volumeUp = () => {
+  document.removeEventListener('mousemove', volumeMove)
+  document.removeEventListener('touchmove', volumeMove)
+  document.removeEventListener('mouseup', volumeUp)
+  document.removeEventListener('touchend', volumeUp)
+}
 
-    const handleMousedownVolumeBar = () => {
-      document.addEventListener('mousemove', volumeMove)
-      document.addEventListener('touchmove', volumeMove)
-      document.addEventListener('mouseup', volumeUp)
-      document.addEventListener('touchend', volumeUp)
-    }
+const handleMousedownVolumeBar = () => {
+  document.addEventListener('mousemove', volumeMove)
+  document.addEventListener('touchmove', volumeMove)
+  document.addEventListener('mouseup', volumeUp)
+  document.addEventListener('touchend', volumeUp)
+}
 
-    const handleClickVolumeBar = (e: MouseEvent) => {
-      if (!volumeBarRef.value) return
-      const percentage = (e.clientX - getBoundingClientRectViewLeft(volumeBarRef.value) - 5.5) / 35
-      setVolume(percentage)
-    }
+const handleClickVolumeBar = (e: MouseEvent) => {
+  if (!volumeBarRef.value) return
+  const percentage = (e.clientX - getBoundingClientRectViewLeft(volumeBarRef.value)) / 45
+  setVolume(percentage)
+}
 
-    const handleMousemovePlayBar = (e: MouseEvent) => {
-      if (duration.value && playBarWrap.value) {
-        const px = playBarWrap.value.getBoundingClientRect().left
-        const tx = e.clientX - px
-        if (tx < 0 || tx > playBarWrap.value.offsetWidth) return
+const handleMousemovePlayBar = (e: MouseEvent) => {
+  if (duration.value && playBarWrap.value) {
+    const px = playBarWrap.value.getBoundingClientRect().left
+    const tx = e.clientX - px
+    if (tx < 0 || tx > playBarWrap.value.offsetWidth) return
 
-        const time = duration.value * (tx / playBarWrap.value.offsetWidth)
-        playBarTimeLeft.value = `${tx - (time >= 3600 ? 25 : 20)}px`
-        playBarTime.value = secondToTime(time)
-        playBarTimeVisible.value = true
-      }
-    }
+    const time = duration.value * (tx / playBarWrap.value.offsetWidth)
+    playBarTimeLeft.value = `${tx - (time >= 3600 ? 25 : 20)}px`
+    playBarTime.value = secondToTime(time)
+    playBarTimeVisible.value = true
+  }
+}
 
-    const toggleVolume = () => {
-      if (!videoRef.value) return
+const toggleVolume = () => {
+  if (!videoRef.value) return
 
-      if (videoRef.value.muted) {
-        videoRef.value.muted = false
-        setVolume(0.5)
-      }
-      else {
-        videoRef.value.muted = true
-        setVolume(0)
-      }
-    }
+  if (videoRef.value.muted) {
+    videoRef.value.muted = false
+    setVolume(0.5)
+  }
+  else {
+    videoRef.value.muted = true
+    setVolume(0)
+  }
+}
 
-    const toggleLoop = () => {
-      loop.value = !loop.value
-    }
+const toggleLoop = () => {
+  loop.value = !loop.value
+}
 
-    const autoHideControllerTimer = ref(-1)
-    const hideController = ref(false)
-    const autoHideController = () => {
-      hideController.value = false
-      clearTimeout(autoHideControllerTimer.value)
-      autoHideControllerTimer.value = setTimeout(() => {
-        if (videoRef.value?.played.length) hideController.value = true
-      }, 3000)
-    }
-    
-    useMSE(props.src, videoRef)
+const autoHideControllerTimer = ref(-1)
+const hideController = ref(false)
+const autoHideController = () => {
+  hideController.value = false
+  clearTimeout(autoHideControllerTimer.value)
+  autoHideControllerTimer.value = setTimeout(() => {
+    if (videoRef.value?.played.length) hideController.value = true
+  }, 3000)
+}
 
-    return {
-      videoRef,
-      playBarWrap,
-      volumeBarRef,
-      volume,
-      loop,
-      paused,
-      ptime,
-      dtime,
-      playBarTime,
-      playBarTimeVisible,
-      playBarTimeLeft,
-      playedBarWidth,
-      loadedBarWidth,
-      volumeBarWidth,
-      hideController,
-      bezelTransition,
-      playbackRate,
-      speedMenuVisible,
-      speedOptions,
-      seek,
-      play,
-      pause,
-      toggle,
-      setVolume,
-      speed,
-      handleDurationchange,
-      handleTimeupdate,
-      handleEnded,
-      handleProgress,
-      handleMousedownPlayBar,
-      handleMousedownVolumeBar,
-      handleClickVolumeBar,
-      handleMousemovePlayBar,
-      toggleVolume,
-      toggleLoop,
-      autoHideController,
-      handleError,
-    }
-  },
-})
+useMSE(props.src, videoRef)
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/components/element/VideoElement/index.vue b/src/views/components/element/VideoElement/index.vue
index ece7a3db..64b2e30d 100644
--- a/src/views/components/element/VideoElement/index.vue
+++ b/src/views/components/element/VideoElement/index.vue
@@ -37,8 +37,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTVideoElement } from '@/types/slides'
@@ -46,40 +46,28 @@ import { ContextmenuItem } from '@/components/Contextmenu/types'
 
 import VideoPlayer from './VideoPlayer/index.vue'
 
-export default defineComponent({
-  name: 'editable-element-video',
-  components: {
-    VideoPlayer,
+const props = defineProps({
+  elementInfo: {
+    type: Object as PropType<PPTVideoElement>,
+    required: true,
   },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTVideoElement>,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTVideoElement, canMove?: boolean) => void>,
-      required: true,
-    },
-    contextmenus: {
-      type: Function as PropType<() => ContextmenuItem[] | null>,
-    },
+  selectElement: {
+    type: Function as PropType<(e: MouseEvent | TouchEvent, element: PPTVideoElement, canMove?: boolean) => void>,
+    required: true,
   },
-  setup(props) {
-    const { canvasScale } = storeToRefs(useMainStore())
-
-    const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
-      if (props.elementInfo.lock) return
-      e.stopPropagation()
-
-      props.selectElement(e, props.elementInfo, canMove)
-    }
-
-    return {
-      canvasScale,
-      handleSelectElement,
-    }
+  contextmenus: {
+    type: Function as PropType<() => ContextmenuItem[] | null>,
   },
 })
+
+const { canvasScale } = storeToRefs(useMainStore())
+
+const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
+  if (props.elementInfo.lock) return
+  e.stopPropagation()
+
+  props.selectElement(e, props.elementInfo, canMove)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/vue.config.js b/vue.config.js
index 61508416..6e097f49 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const StyleLintPlugin = require('stylelint-webpack-plugin')
 
 module.exports = {