pptList/src/views/components/ThumbnailSlide/ThumbnailElement.vue

<template>
  <div
    class="base-element"
    :class="`base-element-${elementInfo.id}`"
    :style="{
      zIndex: elementIndex
    }"
  >
    <component :is="currentElementComponent" :elementInfo="elementInfo" target="thumbnail" />
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { ElementTypes, ElementSubtypeTypes, type PPTElement } from "@/types/slides"

import BaseImageElement from "@/views/components/element/ImageElement/BaseImageElement.vue"
import BaseTextElement from "@/views/components/element/TextElement/BaseTextElement.vue"
import BaseShapeElement from "@/views/components/element/ShapeElement/BaseShapeElement.vue"
import BaseLineElement from "@/views/components/element/LineElement/BaseLineElement.vue"
import BaseChartElement from "@/views/components/element/ChartElement/BaseChartElement.vue"
import BaseTableElement from "@/views/components/element/TableElement/BaseTableElement.vue"
import BaseLatexElement from "@/views/components/element/LatexElement/BaseLatexElement.vue"
import BaseVideoElement from "@/views/components/element/VideoElement/BaseVideoElement.vue"
import BaseAudioElement from "@/views/components/element/AudioElement/BaseAudioElement.vue"
import BaseCloudCoachElement from "@/views/components/element/cloudCoachElement/BaseCloudCoachElement.vue"
import BaseEnjoyElement from "@/views/components/element/enjoyElement/BaseEnjoyElement.vue"
import BaseListeningPracticeElement from "@/views/components/element/listeningPracticeElement/BaseListeningPracticeElement.vue"
import BaseRhythmPracticeElement from "@/views/components/element/rhythmPracticeElement/BaseRhythmPracticeElement.vue"

const props = defineProps<{
  elementInfo: PPTElement
  elementIndex: number
}>()

const currentElementComponent = computed<unknown>(() => {
  const elementTypeMap = {
    [ElementTypes.IMAGE]: BaseImageElement,
    [ElementTypes.TEXT]: BaseTextElement,
    [ElementTypes.SHAPE]: BaseShapeElement,
    [ElementTypes.LINE]: BaseLineElement,
    [ElementTypes.CHART]: BaseChartElement,
    [ElementTypes.TABLE]: BaseTableElement,
    [ElementTypes.LATEX]: BaseLatexElement,
    [ElementTypes.ELF]: null
  }
  const elementSubtypeMap = {
    [ElementSubtypeTypes.AUDIO]: BaseAudioElement,
    [ElementSubtypeTypes.VIDEO]: BaseVideoElement,
    [ElementSubtypeTypes.SING_PLAY]: BaseCloudCoachElement,
    [ElementSubtypeTypes.ENJOY]: BaseEnjoyElement,
    [ElementSubtypeTypes.LISTENING_PRACTICE]: BaseListeningPracticeElement,
    [ElementSubtypeTypes.RHYTHM_PRACTICE]: BaseRhythmPracticeElement
  }
  return elementTypeMap[props.elementInfo.type] || elementSubtypeMap[props.elementInfo.subtype] || null
})
</script>