super_video/src/components/CompositionGuide.vue

<script lang="ts" setup>
import { ref, computed } from 'vue'
import type { Component } from 'vue'
import { Overlay } from '@/components/Overlay'
import { ImgButton } from '@/components/Button'
import { Video } from '@/components/Video'
import { GuideSteps, type GuideStep } from '@/components/Guide'
import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'

interface CompositionBtn {
  key: string
  name: string
  btnImage: string
  images: string[]
  desc: string
}

withDefaults(
  defineProps<{
    visible: boolean
    bgImage: string
    btnList: CompositionBtn[]
    knowledgeCardComponent: Component
    videoSrc: string
    guideSteps?: GuideStep[]
    showInternalGuide?: boolean
  }>(),
  {
    guideSteps: () => [],
    showInternalGuide: false,
  },
)

const emit = defineEmits<{
  close: []
}>()

const showKnowledgeCard = ref(false)
const showVideo = ref(false)
const currentItem = ref<CompositionBtn>({
  key: '',
  name: '',
  btnImage: '',
  images: [],
  desc: '',
})

const currentCompositionKey = computed(() => {
  const k = currentItem.value.key
  if (k === '1' || k === '2' || k === '3') return k
  return '1'
})

const handleClose = () => {
  emit('close')
}

const handleItemClick = (item: CompositionBtn) => {
  currentItem.value = item
  showKnowledgeCard.value = true
}
</script>

<template>
  <Overlay
    :visible="visible"
    :clickable="false"
    :customStyle="{ backgroundImage: getBackgroundImage(bgImage) }"
    customClass="inset-0 bg-cover bg-center bg-no-repeat"
    contentClass="relative w-full h-full"
  >
    <ImgButton
      class="absolute right-0 top-0 z-10"
      :image="IMAGE_PATHS.COMPONENTS.BACK"
      @click="handleClose"
    />

    <ImgButton
      class="absolute left-0 top-0 z-10"
      image="shooting/标题-构图指南"
    />

    <div class="absolute left-28 top-[calc(50%-40px)] -translate-y-1/2">
      <ImgButton
        image="shooting/新手导航-视频回顾"
        @click="showVideo = true"
      />
      <div
        class="absolute left-[38%] top-[50%] -translate-x-1/2 -translate-y-1/2 z-10 animate-bounce pointer-events-none"
      >
        <img
          class="w-40"
          :src="getStaticImage('work/小手')"
          alt=""
        />
      </div>
    </div>

    <div class="absolute top-[30%] right-10">
      <ImgButton
        v-for="item in btnList"
        :key="item.key"
        :class="`btn-item-${item.key}`"
        :image="item.btnImage"
        @click="handleItemClick(item)"
      />
    </div>

    <GuideSteps
      v-if="showInternalGuide && guideSteps.length > 0"
      :visible="showInternalGuide"
      :steps="guideSteps"
      :keyboard-navigation="true"
      :highlight-padding="12"
      :highlight-radius="16"
      position-offset-y="85%"
    />

    <component
      :is="knowledgeCardComponent"
      v-if="showKnowledgeCard && currentItem.key"
      :visible="showKnowledgeCard"
      :title="currentItem.name"
      :desc="currentItem.desc"
      :images="currentItem.images"
      :compositionKey="currentCompositionKey"
      @close="showKnowledgeCard = false"
    />

    <Overlay
      :visible="showVideo"
      :clickable="false"
    >
      <Video
        :src="videoSrc"
        controls
        :volume="1"
        :muted="false"
      />
      <ImgButton
        class="absolute right-0 top-0 z-10"
        :image="IMAGE_PATHS.COMPONENTS.CLOSE"
        @click="showVideo = false"
      />
    </Overlay>
  </Overlay>
</template>