变量声明优化

src/App.vue

@@ -86,5 +86,6 @@ export default defineComponent({
   right: 0;
   background-color: #fff;
   padding: 10px;
+  z-index: -1;
 }
 </style>

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

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

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

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

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

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

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

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

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)

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

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)

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

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

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)
 

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

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)

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

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)

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)

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)

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

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

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

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

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

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

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

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

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

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)

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)

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

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)