super_video/src/views/vlog/work/index.vue

<script lang="tsx" name="Work" setup>
defineOptions({ name: 'Work' })
import { ref, computed } from 'vue'
import { getBackgroundImage, IMAGE_PATHS, getStaticImage } from '@/utils'
import { ImgButton } from '@/components/Button'
import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
import { GuideSteps, type GuideStep } from '@/components/Guide'
import { useRouter } from 'vue-router'
import { useScale } from '@/composables/useScale'
import { ImagePreview } from '@/components'
import { useVlogStore } from '@/stores'

const router = useRouter()

const vlog = useVlogStore()

type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'

const selected = ref<WorkTab>('case')
const stepIndex = ref(0)
const workSideSwitcherRef = ref<InstanceType<typeof WorkSideSwitcher>>()

const isGuideVlogTask = computed(() => vlog.isGuideVlogTask)
const isVlogUnlock = computed(() => vlog.isVlogUnlock)

//引导步骤
const steps = [
  {
    id: 'step1',
    content:
      '现在我们要一起走进 Vlog 的世界。简单说，Vlog 就是用视频记录生活的一种方式 —— 它像一本会动的日记，能把我们身边的小事、瞬间的心情，通过镜头变得生动又具体。'
  },
  { id: 'step2', content: '接下来，我们就通过一个具体的案例，看看 Vlog 是怎么“捕捉美好” 的吧。' }
]

//切换图片
const sideSwitcherItems = ref([
  {
    key: 'vlog',
    description: '记录身边的美好',
    image: 'work/vlog背景全屏待定'
  },
  {
    key: 'case',
    description: '案例赏析-桂花酒酿小圆子',
    image: 'work/案例背景待定'
  },
  {
    key: 'profession',
    description: '专业剖析-桂花酒酿小圆子',
    image: 'work/专业剖析小屏'
  },
  {
    key: 'idea',
    description: '思路提点-桂花酒酿小圆子',
    image: 'work/思路提点小屏'
  }
])

//当前选中的item
const currentItem = computed(() => {
  return sideSwitcherItems.value.find(item => item.key === selected.value)
})

const currentHighlight = computed(() =>
  stepIndex.value === 0 ? '.img-switch-item--case' : '.work-border'
)

const handleStepChange = (_step: GuideStep | null, index: number) => {
  stepIndex.value = index
}

const handleSideSwitcherChange = (value: WorkTab) => {
  if (selected.value === value) return
}

const handleImageClick = () => {
  const currentItem = workSideSwitcherRef.value?.items.find(item => item.key === selected.value)
  router.push({
    name: 'VlogVideo',
    query: {
      image: currentItem?.activeImage || '',
      key: selected.value,
      label: currentItem?.label || ''
    }
  })
}

const handleClose = () => {
  router.push({ name: 'Vlog' })
}

const handleWorkClick = () => {
  if (!isVlogUnlock.value) return
  openImages([getStaticImage('work/桂花酒酿小圆子')])
}
const handleGuideComplete = () => {
  vlog.setIsGuideVlogTask(false)
}

const handleOpenGuide = () => {
  stepIndex.value = 0
  vlog.setIsGuideVlogTask(true)
}

const { scale, offsetX, offsetY } = useScale()

function openImages(urls: string[], startIndex = 0) {
  ImagePreview({
    images: urls,
    startIndex,
    maskClosable: true,
    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
  })
}
</script>

<template>
  <div class="w-full h-full relative">
    <!-- 背景图片-center -->
    <div
      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.BG) }"
    ></div>

    <!-- 关闭 -->
    <ImgButton
      class="absolute right-0 top-0"
      :image="IMAGE_PATHS.COMPONENTS.CLOSE"
      @click="handleClose"
    />

    <!-- border图片 -->
    <div
      class="work-border absolute top-[140px] left-24 inset-0 bg-cover bg-center bg-no-repeat z-10 w-[1360px] h-[800px] p-10"
      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.BORDER) }"
    >
      <div
        class="flex items-center pl-16 w-[1357px] h-[265px] absolute -bottom-16 left-0 bg-cover bg-center bg-no-repeat z-20"
        :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.TITLE) }"
      >
        <span
          class="mt-24 text-white font-bold text-6xl [text-shadow:0_2px_4px_rgba(0,0,0,0.2),0_0_6px_rgba(0,207,255,0.9),0_0_14px_rgba(0,207,255,0.7)]"
        >
          {{ currentItem?.description }}</span
        >
      </div>
      <img
        @click="handleImageClick"
        class="rounded-[62px] cursor-pointer"
        :src="getStaticImage(currentItem?.image || '')"
        alt=""
      />
    </div>

    <!-- 左侧选项切换 -->
    <div class="absolute right-0 top-60 z-20">
      <WorkSideSwitcher
        ref="workSideSwitcherRef"
        v-model="selected"
        @change="handleSideSwitcherChange"
        :item-class="'w-[359px] h-[96px]'"
      />
    </div>

    <!-- 任务取景按钮 -->
    <ImgButton
      class="absolute right-14 bottom-10"
      :image="isVlogUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
      @click="handleWorkClick"
    />

    <!-- 引导与高亮 -->
    <GuideSteps
      v-if="isGuideVlogTask"
      :steps="steps"
      :highlight-selector="currentHighlight"
      :highlight-padding="12"
      :highlight-radius="20"
      @step-change="handleStepChange"
      @complete="handleGuideComplete"
      @skip="handleGuideComplete"
      position-offset-y="85%"
    />

    <!-- 引导词按钮 -->
    <ImgButton
      class="absolute w-[120px] bottom-0 right-0 z-10"
      image="components/long"
      @click="handleOpenGuide"
    />
  </div>
</template>