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

<script lang="ts" setup>
import { computed, nextTick, onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ImgButton from '@/components/Button/ImgButton.vue'
import { GuideSteps, StepNavigation } from '@/components/Guide'
import { Video } from '@/components'
import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
import second from '/video/vlog_renwuqujing_jichujingbieyunyong.mp4'
import third from '/video/vlog_renwuqujing_huamiangoutu.mp4'
import fourth from '/video/vlog_renwuqujing_jiaobencehua.mp4'
import five from '/video/vlog_renwuqujing_zhuapai.mp4'
import six from '/video/vlog_renwuqujing_jianjipingjie.mp4'
import { useVlogStore } from '@/stores'

const router = useRouter()
const route = useRoute()

const vlog = useVlogStore()

// 受控播放开关（用于切换到下一个视频时自动播放）
const playing = ref(false)
const status = ref(false)

//引导步骤
const ideaSteps = [
  {
    id: 'idea-step1',
    content: '一条优秀的 Vlog，往往不是记录"大事"，而是认真记录生活里的小事。',
    audioSrc: getPublicPath('audio/py_2_004.MP3')
  },
  {
    id: 'idea-step2',
    content: '试着把刚才学到的方法用起来，你会发现，原来平凡的日子里，也藏着许多值得被记录的瞬间。',
    audioSrc: getPublicPath('audio/py_2_005.MP3')
  }
]

const steps = ref<{ id: string; content: string; audioSrc?: string }[]>([
  {
    id: 'step1',
    content: '试着用这些方法记录身边的小事，你会发现，原来平凡的日子里有这么多值得捕捉的瞬间。'
  }
])

// 步骤导航数据
const navigationSteps = ref([
  {
    id: 'step1',
    label: '拍摄执行',
    content: '基础景别应用',
    type: 'shooting' as const
  },
  {
    id: 'step2',
    label: '拍摄执行',
    content: '画面构图',
    type: 'shooting' as const
  },
  {
    id: 'step3',
    label: '内容策划',
    content: '简单脚本策划',
    type: 'planning' as const
  },
  {
    id: 'step4',
    label: '拍摄执行',
    content: '动态事件跟拍与抓拍',
    type: 'shooting' as const
  },
  {
    id: 'step5',
    label: '后期制作',
    content: '素材导入、剪辑拼接',
    type: 'post' as const
  }
])

// 步骤导航相关状态
const showStepNavigation = ref(false)
const currentNavigationStep = ref(0) // 对应视频索引，从0开始

// 视频列表
const videoList = [second, third, fourth, five, six]
const currentVideoIndex = ref(0)

//按顺序播放
const currentVideo = computed(() => videoList[currentVideoIndex.value])
const resolvedSrc = computed(() => {
  if (key.value === 'case') return getPublicPath('video/anlishangxi_meishi_xiaoyuanzi.mp4')
  if (key.value === 'profession') return currentVideo.value
  return ''
})
const handleVideoChange = () => {
  if (currentVideoIndex.value < videoList.length - 1) {
    currentVideoIndex.value++
    currentNavigationStep.value = currentVideoIndex.value
  } else {
    // status.value = true
    // steps.value = [
    //   {
    //     id: 'step1',
    //     content: '恭喜你，已完成专业剖析的学习，点击【查看脚本】回顾视频脚本吧!'
    //   }
    // ]
    return
  }
  nextTick(() => {
    // 使用受控播放来触发下一个视频自动播放
    playing.value = true
  })
}

const handleClose = () => {
  if (key.value === 'idea') {
    if (vlog.vlogUnlockProgress === 0) vlog.setVlogUnlockProgress(1)
    router.push({
      name: 'Vlog',
      query: { guide: 'return' }
    })
    return
  }
  router.back()
}

const image = computed(() => route.query.image as string)
const key = computed(() => route.query.key as string)
const label = computed(() => route.query.label as string)

// 示例：简单锚点配置（可按需替换为真实题目数据）
// const anchors = ref([
//   {
//     id: 'example-1',
//     time: 5,
//     meta: {
//       title: '第 1 个锚点示例',
//       options: ['继续观看']
//     }
//   }
// ])

const onEnded = () => {
  if (key.value === 'profession') handleVideoChange()
}

const handleComplete = () => {
  if (key.value === 'profession') {
    if (!vlog.isVlogUnlock) vlog.setIsVlogUnlock(true)
    router.push({
      name: 'VlogWork'
    })
  }
}

// 步骤导航事件处理
const handleStepClick = (index: number) => {
  currentVideoIndex.value = index
  currentNavigationStep.value = index
  nextTick(() => {
    playing.value = true
  })
}

const handleStepNavigationClose = () => {
  showStepNavigation.value = false
}

onMounted(() => {
  if (key.value === 'idea') {
    steps.value = ideaSteps
    status.value = true
  }
})
</script>

<template>
  <div class="w-full h-full relative bg-white/10">
    <template v-if="key !== 'case' && key !== 'profession'">
      <div
        :class="[
          'absolute left-4 top-4 z-10 w-[359px] h-[96px] bg-cover bg-center',
          'flex justify-center items-center'
        ]"
        :style="{ backgroundImage: getBackgroundImage(image) }"
      >
        <span
          :class="['ml-6 text-white [text-shadow:5px_5px_5px_rgba(0,0,0,0.4)] text-5xl font-bold']"
        >
          {{ label }}
        </span>
      </div>
      <!-- <ImgButton class="absolute left-4 top-4 z-10" :image="image"></ImgButton> -->
      <ImgButton
        class="absolute right-0 top-0 z-10"
        :image="IMAGE_PATHS.COMPONENTS.BACK"
        @click="handleClose"
      />
    </template>
    <!-- 步骤导航按钮 -->
    <button
      v-if="key === 'profession'"
      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
      @click="showStepNavigation = true"
      title="步骤导航"
    >
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <path
          d="M3 4H17M3 8H17M3 12H17M3 16H17"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
        />
      </svg>
    </button>

    <div v-if="key === 'vlog'" :src="image">
      <img :src="getStaticImage('work/vlog背景全屏待定')" alt="" />
    </div>
    <Video
      v-else-if="key === 'case' || key === 'profession'"
      :src="resolvedSrc"
      v-model="playing"
      :muted="false"
      :volume="1"
      :controls="true"
      :hideNativeControls="true"
      :anchors="[]"
      @ended="onEnded"
    >
      <!-- <template #anchor="{ anchor, resume, unmute }">
        <div class="absolute inset-0 bg-black/50 flex items-center justify-center text-white">
          <div class="bg-black/80 rounded-lg p-4 w-[320px]">
            <div class="mb-3 font-bold">
              {{ anchor.meta?.title || `锚点：${anchor.id}` }}
            </div>
            <div class="space-y-2">
              <button
                v-for="opt in anchor.meta?.options || []"
                :key="opt"
                class="w-full py-2 rounded bg-white/10 hover:bg-white/20"
                @click="resume()"
              >
                {{ opt }}
              </button>
            </div>
            <div class="mt-4 flex justify-end gap-2 text-xs opacity-70">
              <button @click="unmute()">取消静音并继续</button>
              <button @click="resume()">直接继续播放</button>
            </div>
          </div>
        </div>
      </template> -->
      <template v-slot:overlay>
        <!-- <div
          :class="[
            'absolute left-4 top-4 z-10 pointer-events-auto w-[359px] h-[96px] bg-cover bg-center',
            'flex justify-center items-center'
          ]"
          :style="{ backgroundImage: getBackgroundImage(image) }"
        >
          <span
            :class="[
              'ml-6 text-white [text-shadow:5px_5px_5px_rgba(0,0,0,0.4)] text-5xl font-bold'
            ]"
          >
            {{ label }}
          </span>
        </div> -->
        <!-- <ImgButton
          class="absolute left-4 top-4 z-10 pointer-events-auto"
          :image="image"
        ></ImgButton> -->
        <ImgButton
          class="absolute right-0 top-0 z-10 pointer-events-auto"
          :image="IMAGE_PATHS.COMPONENTS.BACK"
          @click="handleClose"
        />
      </template>
    </Video>
    <div v-else-if="key === 'idea'" :src="image">
      <img :src="getStaticImage('work/思路提点全屏')" alt="" />
    </div>
  </div>

  <!-- 引导与高亮 -->
  <GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" />

  <!-- 步骤导航抽屉 -->
  <StepNavigation
    :visible="showStepNavigation && key === 'profession'"
    :background-image="getStaticImage('work/vlog背景全屏待定')"
    :steps="navigationSteps"
    :current-step-index="currentNavigationStep"
    @step-click="handleStepClick"
    @close="handleStepNavigationClose"
  />
</template>

<style scoped>
video {
  width: 100%;
  height: 100%;
  /* 核心：保持视频比例，多余部分被裁剪 */
  object-fit: cover;
}
</style>