diff --git a/src/App.vue b/src/App.vue
index 58ba95a5..6abf1e08 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -86,5 +86,6 @@ export default defineComponent({
   right: 0;
   background-color: #fff;
   padding: 10px;
+  z-index: -1;
 }
 </style>
\ No newline at end of file
diff --git a/src/hooks/useAlignElementToCanvas.ts b/src/hooks/useAlignElementToCanvas.ts
index cef27a59..4a6fe937 100644
--- a/src/hooks/useAlignElementToCanvas.ts
+++ b/src/hooks/useAlignElementToCanvas.ts
@@ -1,4 +1,4 @@
-import { Ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { PPTElement, Slide } from '@/types/slides'
@@ -10,8 +10,8 @@ export default () => {
   const store = useStore<State>()
 
   const activeElementIdList = computed(() => store.state.activeElementIdList)
-  const activeElementList: Ref<PPTElement[]> = computed(() => store.getters.activeElementList)
-  const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+  const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)
+  const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const alignElementToCanvas = (command: ElementAlignCommand) => {
     const viewportWidth = VIEWPORT_SIZE
diff --git a/src/hooks/useCombineElement.ts b/src/hooks/useCombineElement.ts
index 683d3160..a9b68b8d 100644
--- a/src/hooks/useCombineElement.ts
+++ b/src/hooks/useCombineElement.ts
@@ -1,4 +1,4 @@
-import { Ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { PPTElement, Slide } from '@/types/slides'
@@ -8,8 +8,8 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 export default () => {
   const store = useStore<State>()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
-  const activeElementList: Ref<PPTElement[]> = computed(() => store.getters.activeElementList)
-  const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+  const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)
+  const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
diff --git a/src/hooks/useCopyAndPasteElement.ts b/src/hooks/useCopyAndPasteElement.ts
index 4766cdc2..0f124e3e 100644
--- a/src/hooks/useCopyAndPasteElement.ts
+++ b/src/hooks/useCopyAndPasteElement.ts
@@ -1,4 +1,4 @@
-import { Ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { PPTElement } from '@/types/slides'
@@ -11,7 +11,7 @@ import useDeleteElement from './useDeleteElement'
 export default () => {
   const store = useStore<State>()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
-  const activeElementList: Ref<PPTElement[]> = computed(() => store.getters.activeElementList)
+  const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)
 
   const { pasteTextClipboardData } = usePasteTextClipboardData()
   const { deleteElement } = useDeleteElement()
diff --git a/src/hooks/useDeleteElement.ts b/src/hooks/useDeleteElement.ts
index 76f15731..e640529f 100644
--- a/src/hooks/useDeleteElement.ts
+++ b/src/hooks/useDeleteElement.ts
@@ -1,4 +1,4 @@
-import { Ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { Slide } from '@/types/slides'
@@ -7,7 +7,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 export default () => {
   const store = useStore<State>()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
-  const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+  const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
diff --git a/src/hooks/useLockElement.ts b/src/hooks/useLockElement.ts
index dbde675a..bdddfafb 100644
--- a/src/hooks/useLockElement.ts
+++ b/src/hooks/useLockElement.ts
@@ -1,5 +1,5 @@
 import { useStore } from 'vuex'
-import { Ref, computed } from 'vue'
+import { computed } from 'vue'
 import { State, MutationTypes } from '@/store'
 import { PPTElement, Slide } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -7,7 +7,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 export default () => {
   const store = useStore<State>()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
-  const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+  const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
diff --git a/src/hooks/useMoveElement.ts b/src/hooks/useMoveElement.ts
index d2b4701a..a420e57c 100644
--- a/src/hooks/useMoveElement.ts
+++ b/src/hooks/useMoveElement.ts
@@ -1,4 +1,4 @@
-import { Ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { Slide } from '@/types/slides'
@@ -8,7 +8,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 export default () => {
   const store = useStore<State>()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
-  const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+  const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
diff --git a/src/hooks/useOrderElement.ts b/src/hooks/useOrderElement.ts
index 8f1fca5e..3f287615 100644
--- a/src/hooks/useOrderElement.ts
+++ b/src/hooks/useOrderElement.ts
@@ -1,4 +1,4 @@
-import { Ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { PPTElement, Slide } from '@/types/slides'
@@ -7,7 +7,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default () => {
   const store = useStore<State>()
-  const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+  const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
diff --git a/src/hooks/usePasteTextClipboardData.ts b/src/hooks/usePasteTextClipboardData.ts
index f9c1a91d..64856a5e 100644
--- a/src/hooks/usePasteTextClipboardData.ts
+++ b/src/hooks/usePasteTextClipboardData.ts
@@ -1,4 +1,4 @@
-import { computed, Ref } from 'vue'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { decrypt } from '@/utils/crypto'
@@ -13,7 +13,7 @@ interface PasteTextClipboardDataOptions {
 
 export default () => {
   const store = useStore<State>()
-  const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+  const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
diff --git a/src/hooks/useSelectAllElement.ts b/src/hooks/useSelectAllElement.ts
index 87d70adb..9d288c07 100644
--- a/src/hooks/useSelectAllElement.ts
+++ b/src/hooks/useSelectAllElement.ts
@@ -1,11 +1,11 @@
-import { Ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { Slide } from '@/types/slides'
 
 export default () => {
   const store = useStore<State>()
-  const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+  const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const selectAllElement = () => {
     const unlockedElements = currentSlide.value.elements.filter(el => !el.lock)
diff --git a/src/hooks/useSlideHandler.ts b/src/hooks/useSlideHandler.ts
index c3be9de4..0ac92648 100644
--- a/src/hooks/useSlideHandler.ts
+++ b/src/hooks/useSlideHandler.ts
@@ -1,4 +1,4 @@
-import { Ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { Slide } from '@/types/slides'
@@ -14,7 +14,7 @@ export default () => {
   const store = useStore<State>()
   const slideIndex = computed(() => store.state.slideIndex)
   const slidesLength = computed(() => store.state.slides.length)
-  const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+  const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { pasteTextClipboardData } = usePasteTextClipboardData()
   const { addHistorySnapshot } = useHistorySnapshot()
diff --git a/src/views/Editor/Canvas/ElementCreateSelection.vue b/src/views/Editor/Canvas/ElementCreateSelection.vue
index 6d2aa194..534577b9 100644
--- a/src/views/Editor/Canvas/ElementCreateSelection.vue
+++ b/src/views/Editor/Canvas/ElementCreateSelection.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, reactive, Ref, ref } from 'vue'
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 
@@ -36,7 +36,7 @@ export default defineComponent({
   name: 'element-create-selection',
   setup(props, { emit }) {
     const store = useStore<State>()
-    const ctrlOrShiftKeyActive: Ref<boolean> = computed(() => store.getters.ctrlOrShiftKeyActive)
+    const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
     const creatingElement = computed(() => store.state.creatingElement)
 
     const start = ref<[number, number] | null>(null)
diff --git a/src/views/Editor/Canvas/GridLines.vue b/src/views/Editor/Canvas/GridLines.vue
index 70d76072..0ca5e593 100644
--- a/src/views/Editor/Canvas/GridLines.vue
+++ b/src/views/Editor/Canvas/GridLines.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, Ref } from 'vue'
+import { defineComponent, computed } from 'vue'
 import { useStore } from 'vuex'
 import tinycolor from 'tinycolor2'
 import { State } from '@/store'
@@ -27,7 +27,7 @@ export default defineComponent({
   setup() {
     const store = useStore<State>()
     const canvasScale = computed(() => store.state.canvasScale)
-    const background: Ref<SlideBackground | undefined> = computed(() => store.getters.currentSlide.background)
+    const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide.background)
 
     const gridColor = computed(() => {
       if(!background.value || background.value.type === 'image') return 'rgba(100, 100, 100, 0.5)'
diff --git a/src/views/Editor/Canvas/Operate/index.vue b/src/views/Editor/Canvas/Operate/index.vue
index 4e3544f5..3ad755b3 100644
--- a/src/views/Editor/Canvas/Operate/index.vue
+++ b/src/views/Editor/Canvas/Operate/index.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, Ref } from 'vue'
+import { defineComponent, PropType, computed } from 'vue'
 import { useStore } from 'vuex'
 import { State } from '@/store'
 import { ElementTypes, PPTElement, Slide } from '@/types/slides'
@@ -82,7 +82,7 @@ export default defineComponent({
     const store = useStore<State>()
     const canvasScale = computed(() => store.state.canvasScale)
     const toolbarState = computed(() => store.state.toolbarState)
-    const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+    const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
     const currentOperateComponent = computed(() => {
       const elementTypeMap = {
diff --git a/src/views/Editor/Canvas/SlideBackground.vue b/src/views/Editor/Canvas/SlideBackground.vue
index 42bdd1b1..3f924896 100644
--- a/src/views/Editor/Canvas/SlideBackground.vue
+++ b/src/views/Editor/Canvas/SlideBackground.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { Ref, computed, defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useStore } from 'vuex'
 import { State } from '@/store'
 import { SlideBackground } from '@/types/slides'
@@ -23,7 +23,7 @@ export default defineComponent({
   setup() {
     const store = useStore<State>()
     const showGridLines = computed(() => store.state.showGridLines)
-    const background: Ref<SlideBackground | undefined> = computed(() => store.getters.currentSlide.background)
+    const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide.background)
 
     const { backgroundStyle } = useSlideBackgroundStyle(background)
 
diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts
index 83686046..6b1d9c22 100644
--- a/src/views/Editor/Canvas/hooks/useScaleElement.ts
+++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts
@@ -91,7 +91,7 @@ export default (
 ) => {
   const store = useStore<State>()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
-  const ctrlOrShiftKeyActive: Ref<boolean> = computed(() => store.getters.ctrlOrShiftKeyActive)
+  const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
   const canvasScale = computed(() => store.state.canvasScale)
 
   const { addHistorySnapshot } = useHistorySnapshot()
diff --git a/src/views/Editor/Canvas/hooks/useSelectElement.ts b/src/views/Editor/Canvas/hooks/useSelectElement.ts
index ee5c9efb..d9e1d2a7 100644
--- a/src/views/Editor/Canvas/hooks/useSelectElement.ts
+++ b/src/views/Editor/Canvas/hooks/useSelectElement.ts
@@ -13,7 +13,7 @@ export default (
   const activeElementIdList = computed(() => store.state.activeElementIdList)
   const handleElementId = computed(() => store.state.handleElementId)
   const editorAreaFocus = computed(() => store.state.editorAreaFocus)
-  const ctrlOrShiftKeyActive: Ref<boolean> = computed(() => store.getters.ctrlOrShiftKeyActive)
+  const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
 
   const selectElement = (e: MouseEvent, element: PPTElement, canMove = true) => {
     if(!editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, true)
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index 7d9a9b8e..12ba9e12 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -75,7 +75,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, provide, Ref, ref, watch, watchEffect } from 'vue'
+import { computed, defineComponent, provide, ref, watch, watchEffect } from 'vue'
 import { useStore } from 'vuex'
 import throttle from 'lodash/throttle'
 import { State, MutationTypes } from '@/store'
@@ -125,7 +125,7 @@ export default defineComponent({
     const handleElementId = computed(() => store.state.handleElementId)
     const editorAreaFocus = computed(() => store.state.editorAreaFocus)
     const ctrlKeyState = computed(() => store.state.ctrlKeyState)
-    const ctrlOrShiftKeyActive: Ref<boolean> = computed(() => store.getters.ctrlOrShiftKeyActive)
+    const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
 
     const viewportRef = ref<HTMLElement>()
     const isShowGridLines = ref(false)
@@ -134,7 +134,7 @@ export default defineComponent({
     const activeGroupElementId = ref('')
     watch(handleElementId, () => activeGroupElementId.value = '')
 
-    const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+    const currentSlide = computed<Slide>(() => store.getters.currentSlide)
     const elementList = ref<PPTElement[]>([])
     const setLocalElementList = () => {
       elementList.value = currentSlide.value ? JSON.parse(JSON.stringify(currentSlide.value.elements)) : []
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index 035757f0..60692a47 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -67,7 +67,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, Ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { PPTAnimation, PPTElement, Slide } from '@/types/slides'
@@ -91,9 +91,9 @@ export default defineComponent({
   },
   setup() {
     const store = useStore<State>()
-    const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)
-    const currentSlideAnimations: Ref<PPTAnimation[] | null> = computed(() => store.getters.currentSlideAnimations)
-    const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+    const handleElement = computed<PPTElement>(() => store.getters.handleElement)
+    const currentSlideAnimations = computed<PPTAnimation[] | null>(() => store.getters.currentSlideAnimations)
+    const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
     const hoverPreviewAnimation = ref('')
     const animationPoolVisible = ref(false)
diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index 0c9aba08..3a667ba0 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -133,7 +133,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, Ref, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import round from 'lodash/round'
 import { MutationTypes, State } from '@/store'
@@ -147,7 +147,7 @@ export default defineComponent({
   name: 'element-positopn-panel',
   setup() {
     const store = useStore<State>()
-    const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)
+    const handleElement = computed<PPTElement>(() => store.getters.handleElement)
 
     const left = ref(0)
     const top = ref(0)
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index b1f491a1..0b2f2372 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -118,7 +118,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { IBarChartOptions, ILineChartOptions, IPieChartOptions } from 'chartist'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
@@ -139,7 +139,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore<State>()
-    const handleElement: Ref<PPTChartElement> = computed(() => store.getters.handleElement)
+    const handleElement = computed<PPTChartElement>(() => store.getters.handleElement)
 
     const chartDataEditorVisible = ref(false)
     const themePoolVisible = ref(false)
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
index 96043976..54cb290c 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
@@ -92,7 +92,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, Ref, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { PPTImageElement } from '@/types/slides'
@@ -165,7 +165,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore<State>()
-    const handleElement: Ref<PPTImageElement> = computed(() => store.getters.handleElement)
+    const handleElement = computed<PPTImageElement>(() => store.getters.handleElement)
 
     const clipPanelVisible = ref(false)
 
@@ -174,7 +174,7 @@ export default defineComponent({
       y: 0,
     })
 
-    const filterOptions: Ref<FilterOption[]> = ref(JSON.parse(JSON.stringify(defaultFilters)))
+    const filterOptions = ref<FilterOption[]>(JSON.parse(JSON.stringify(defaultFilters)))
 
     watch(handleElement, () => {
       if(!handleElement.value) return
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
index 7b61861b..ddef8474 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { PPTLineElement } from '@/types/slides'
@@ -80,7 +80,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore<State>()
-    const handleElement: Ref<PPTLineElement> = computed(() => store.getters.handleElement)
+    const handleElement = computed<PPTLineElement>(() => store.getters.handleElement)
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index 371de7e1..26debc69 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, Ref, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { PPTShapeElement, ShapeGradient } from '@/types/slides'
@@ -99,7 +99,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore<State>()
-    const handleElement: Ref<PPTShapeElement> = computed(() => store.getters.handleElement)
+    const handleElement = computed<PPTShapeElement>(() => store.getters.handleElement)
 
     const fill = ref<string>()
     const gradient = ref<ShapeGradient>()
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index e45eb38a..a63fd6de 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -199,7 +199,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onUnmounted, Ref, ref, watch } from 'vue'
+import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { PPTTextElement } from '@/types/slides'
@@ -220,7 +220,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore<State>()
-    const handleElement: Ref<PPTTextElement> = computed(() => store.getters.handleElement)
+    const handleElement = computed<PPTTextElement>(() => store.getters.handleElement)
 
     const fill = ref<string>()
     const lineHeight = ref<number>()
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/index.vue
index 1eaf00a3..6855168a 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/index.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useStore } from 'vuex'
 import { State } from '@/store'
 import { ElementTypes, PPTElement } from '@/types/slides'
@@ -23,7 +23,7 @@ export default defineComponent({
   name: 'element-style-panel',
   setup() {
     const store = useStore<State>()
-    const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)
+    const handleElement = computed<PPTElement>(() => store.getters.handleElement)
 
     const currentPanelComponent = computed(() => {
       if(!handleElement.value) return null
diff --git a/src/views/Editor/Toolbar/MultiPositionPanel.vue b/src/views/Editor/Toolbar/MultiPositionPanel.vue
index da510c8a..4e40af34 100644
--- a/src/views/Editor/Toolbar/MultiPositionPanel.vue
+++ b/src/views/Editor/Toolbar/MultiPositionPanel.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { PPTElement, Slide } from '@/types/slides'
@@ -47,8 +47,8 @@ export default defineComponent({
   setup() {
     const store = useStore<State>()
     const activeElementIdList = computed(() => store.state.activeElementIdList)
-    const activeElementList: Ref<PPTElement[]> = computed(() => store.getters.activeElementList)
-    const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+    const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)
+    const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
     const { addHistorySnapshot } = useHistorySnapshot()
     const { combineElements, uncombineElements } = useCombineElement()
diff --git a/src/views/Editor/Toolbar/SlideAnimationPanel.vue b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
index f808caff..1d9c0d56 100644
--- a/src/views/Editor/Toolbar/SlideAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { Slide } from '@/types/slides'
@@ -28,7 +28,7 @@ export default defineComponent({
   setup() {
     const store = useStore<State>()
     const slides = computed(() => store.state.slides)
-    const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+    const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
     const currentTurningMode = computed(() => currentSlide.value.turningMode || 'slideY')
 
diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue
index 88ddca2d..5ae80883 100644
--- a/src/views/Editor/Toolbar/SlideStylePanel.vue
+++ b/src/views/Editor/Toolbar/SlideStylePanel.vue
@@ -99,7 +99,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { Slide, SlideBackground } from '@/types/slides'
@@ -116,7 +116,7 @@ export default defineComponent({
   setup() {
     const store = useStore<State>()
     const slides = computed(() => store.state.slides)
-    const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+    const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
     const background = computed(() => {
       if(!currentSlide.value.background) {
diff --git a/src/views/Editor/Toolbar/common/ElementOpacity.vue b/src/views/Editor/Toolbar/common/ElementOpacity.vue
index ff18d375..2d182271 100644
--- a/src/views/Editor/Toolbar/common/ElementOpacity.vue
+++ b/src/views/Editor/Toolbar/common/ElementOpacity.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { PPTElement } from '@/types/slides'
@@ -25,7 +25,7 @@ export default defineComponent({
   name: 'element-opacity',
   setup() {
     const store = useStore<State>()
-    const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)
+    const handleElement = computed<PPTElement>(() => store.getters.handleElement)
 
     const opacity = ref<number>()
 
diff --git a/src/views/Editor/Toolbar/common/ElementOutline.vue b/src/views/Editor/Toolbar/common/ElementOutline.vue
index 25d37536..4ac56e83 100644
--- a/src/views/Editor/Toolbar/common/ElementOutline.vue
+++ b/src/views/Editor/Toolbar/common/ElementOutline.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { PPTElement, PPTElementOutline } from '@/types/slides'
@@ -61,7 +61,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore<State>()
-    const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)
+    const handleElement = computed<PPTElement>(() => store.getters.handleElement)
 
     const outline = ref<PPTElementOutline>()
     const hasOutline = ref(false)
diff --git a/src/views/Editor/Toolbar/common/ElementShadow.vue b/src/views/Editor/Toolbar/common/ElementShadow.vue
index 2a67ea8e..4751af0a 100644
--- a/src/views/Editor/Toolbar/common/ElementShadow.vue
+++ b/src/views/Editor/Toolbar/common/ElementShadow.vue
@@ -57,7 +57,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { PPTElement, PPTElementShadow } from '@/types/slides'
@@ -72,7 +72,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore<State>()
-    const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)
+    const handleElement = computed<PPTElement>(() => store.getters.handleElement)
 
     const shadow = ref<PPTElementShadow>()
     const hasShadow = ref(false)
diff --git a/src/views/Screen/ScreenElement.vue b/src/views/Screen/ScreenElement.vue
index b4d34479..270b546c 100644
--- a/src/views/Screen/ScreenElement.vue
+++ b/src/views/Screen/ScreenElement.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, Ref } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 import { useStore } from 'vuex'
 import { State } from '@/store'
 import { ElementTypes, PPTElement, Slide } from '@/types/slides'
@@ -54,7 +54,7 @@ export default defineComponent({
     })
 
     const store = useStore<State>()
-    const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+    const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
     const needWaitAnimation = computed(() => {
       const animations = currentSlide.value.animations || []
diff --git a/src/views/Screen/index.vue b/src/views/Screen/index.vue
index 86f55464..40af03b1 100644
--- a/src/views/Screen/index.vue
+++ b/src/views/Screen/index.vue
@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, provide, Ref, ref } from 'vue'
+import { computed, defineComponent, onMounted, onUnmounted, provide, ref } from 'vue'
 import { useStore } from 'vuex'
 import throttle from 'lodash/throttle'
 import { MutationTypes, State } from '@/store'
@@ -86,7 +86,7 @@ export default defineComponent({
     const store = useStore<State>()
     const slides = computed(() => store.state.slides)
     const slideIndex = computed(() => store.state.slideIndex)
-    const currentSlide: Ref<Slide> = computed(() => store.getters.currentSlide)
+    const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
     const slideWidth = ref(0)
     const slideHeight = ref(0)