refactor: 类型安全的provide/inject

src/types/injectKey.ts

@@ -0,0 +1,7 @@
+import { InjectionKey, Ref } from 'vue'
+
+export type SlideScale = Ref<number>
+export type SlideId = Ref<string>
+
+export const injectKeySlideScale: InjectionKey<SlideScale> = Symbol()
+export const injectKeySlideId: InjectionKey<SlideId> = Symbol()

src/views/Editor/Canvas/index.vue

@@ -94,6 +94,7 @@ import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import { PPTElement } from '@/types/slides'
 import { AlignmentLineProps } from '@/types/edit'
+import { injectKeySlideScale } from '@/types/injectKey'
 import { removeAllRanges } from '@/utils/selection'
 import { KEYS } from '@/configs/hotkey'
 
@@ -255,7 +256,7 @@ export default defineComponent({
       ]
     }
 
-    provide('slideScale', canvasScale)
+    provide(injectKeySlideScale, canvasScale)
 
     return {
       elementList,

src/views/Screen/ScreenSlide.vue

@@ -25,6 +25,7 @@ import { computed, PropType, defineComponent, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Slide } from '@/types/slides'
+import { injectKeySlideId } from '@/types/injectKey'
 import { VIEWPORT_SIZE } from '@/configs/canvas'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
@@ -64,7 +65,7 @@ export default defineComponent({
     const { backgroundStyle } = useSlideBackgroundStyle(background)
 
     const slideId = computed(() => props.slide.id)
-    provide('slideId', slideId)
+    provide(injectKeySlideId, slideId)
 
     return {
       backgroundStyle,

src/views/Screen/ScreenSlideList.vue

@@ -38,6 +38,7 @@
 import { computed, defineComponent, PropType, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
+import { injectKeySlideScale } from '@/types/injectKey'
 import { VIEWPORT_SIZE } from '@/configs/canvas'
 
 import ScreenSlide from './ScreenSlide.vue'
@@ -73,7 +74,7 @@ export default defineComponent({
     const { slides, slideIndex, currentSlide } = storeToRefs(useSlidesStore())
 
     const scale = computed(() => props.slideWidth / VIEWPORT_SIZE)
-    provide('slideScale', scale)
+    provide(injectKeySlideScale, scale)
 
     return {
       slides,

src/views/components/ThumbnailSlide/index.vue

@@ -31,6 +31,7 @@ import { computed, PropType, defineComponent, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { Slide } from '@/types/slides'
+import { injectKeySlideScale } from '@/types/injectKey'
 import { VIEWPORT_SIZE } from '@/configs/canvas'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
@@ -62,7 +63,7 @@ export default defineComponent({
     const { backgroundStyle } = useSlideBackgroundStyle(background)
 
     const scale = computed(() => props.size / VIEWPORT_SIZE)
-    provide('slideScale', scale)
+    provide(injectKeySlideScale, scale)
 
     return {
       scale,

src/views/components/element/AudioElement/ScreenAudioElement.vue

@@ -36,10 +36,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, ref, Ref } from 'vue'
+import { computed, defineComponent, inject, PropType, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { PPTAudioElement } from '@/types/slides'
+import { injectKeySlideId, injectKeySlideScale } from '@/types/injectKey'
 import { VIEWPORT_SIZE } from '@/configs/canvas'
 
 import AudioPlayer from './AudioPlayer.vue'
@@ -58,8 +59,8 @@ export default defineComponent({
   setup(props) {
     const { viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
 
-    const scale: Ref<number> = inject('slideScale') || ref(1)
+    const scale = inject(injectKeySlideScale) || ref(1)
-    const slideId: Ref<string> = inject('slideId') || ref('')
+    const slideId = inject(injectKeySlideId) || ref('')
 
     const inCurrentSlide = computed(() => currentSlide.value.id === slideId.value)
 

src/views/components/element/ChartElement/Chart.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, onMounted, PropType, ref, Ref, watch } from 'vue'
+import { computed, defineComponent, inject, onMounted, PropType, ref, watch } from 'vue'
 import { upperFirst } from 'lodash'
 import tinycolor from 'tinycolor2'
 import Chartist, {
@@ -39,6 +39,7 @@ import Chartist, {
   IPieChartOptions,
 } from 'chartist'
 import { ChartData, ChartType } from '@/types/slides'
+import { injectKeySlideScale } from '@/types/injectKey'
 
 import 'chartist/dist/scss/chartist.scss'
 
@@ -81,7 +82,7 @@ export default defineComponent({
   },
   setup(props) {
     const chartRef = ref<HTMLElement>()
-    const slideScale: Ref<number> = inject('slideScale') || ref(1)
+    const slideScale = inject(injectKeySlideScale) || ref(1)
 
     let chart: IChartistLineChart | IChartistBarChart | IChartistPieChart | undefined
 

src/views/components/element/VideoElement/ScreenVideoElement.vue

@@ -30,6 +30,7 @@ import { computed, defineComponent, inject, PropType, Ref, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { PPTVideoElement } from '@/types/slides'
+import { injectKeySlideId, injectKeySlideScale } from '@/types/injectKey'
 
 import VideoPlayer from './VideoPlayer/index.vue'
 
@@ -47,8 +48,8 @@ export default defineComponent({
   setup() {
     const { currentSlide } = storeToRefs(useSlidesStore())
 
-    const scale: Ref<number> = inject('slideScale') || ref(1)
+    const scale = inject(injectKeySlideScale) || ref(1)
-    const slideId: Ref<string> = inject('slideId') || ref('')
+    const slideId = inject(injectKeySlideId) || ref('')
 
     const inCurrentSlide = computed(() => currentSlide.value.id === slideId.value)