feat: 完善访谈与vlog模块页面，重组设备与图片公共资源，新增音频管理与一班对接工具

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-05 15:41:41 +08:00
1 parent c4c9be9d35
commit fc9633f371
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton, Video } from '@/components'
+import { StepNavigation } from '@/components/Guide'
+import { IMAGE_PATHS, getPublicPath, getStaticImage } from '@/utils'
+
+const router = useRouter()
+const playing = ref(false)
+const showStepNavigation = ref(false)
+const currentVideoIndex = ref(0)
+
+const navigationSteps = [
+  {
+    id: 'q1-shoot-material',
+    label: '中期拍摄',
+    content: '素材怎么拍',
+    type: 'shooting' as const
+  },
+  {
+    id: 'q1-required-shots',
+    label: '中期拍摄',
+    content: '必拍镜头有哪些',
+    type: 'shooting' as const
+  },
+  {
+    id: 'q2-moving-shot',
+    label: '中期拍摄',
+    content: '移动镜头的作用',
+    type: 'shooting' as const
+  },
+  {
+    id: 'q2-close-up',
+    label: '中期拍摄',
+    content: '特写镜头的作用',
+    type: 'shooting' as const
+  }
+]
+
+const videoList = [
+  getPublicPath('video/on-site/dygmk_mmps_batch.mp4'),
+  getPublicPath('video/on-site/dygmk_hgydjt_batch.mp4'),
+  getPublicPath('video/on-site/dygmk_jzxjj_batch.mp4'),
+  getPublicPath('video/on-site/dygmk_czsjx_batch.mp4')
+]
+
+const currentVideo = computed(() => videoList[currentVideoIndex.value])
+
+const back = () => {
+  router.back()
+}
+
+const handleStepClick = (index: number) => {
+  currentVideoIndex.value = index
+  // showStepNavigation.value = false
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
+const handleStepNavigationClose = () => {
+  showStepNavigation.value = false
+}
+
+const handleEnded = () => {
+  if (currentVideoIndex.value >= videoList.length - 1) {
+    playing.value = false
+    return
+  }
+
+  currentVideoIndex.value++
+  nextTick(() => {
+    playing.value = true
+  })
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden bg-black">
+    <Video
+      :src="currentVideo"
+      v-model="playing"
+      :muted="false"
+      :volume="1"
+      :controls="true"
+      :hideNativeControls="true"
+      @ended="handleEnded"
+    >
+      <template #overlay>
+        <ImgButton
+          class="absolute right-0 top-0 z-20 pointer-events-auto"
+          :image="IMAGE_PATHS.COMPONENTS.BACK"
+          @click="back"
+        />
+        <button
+          class="absolute right-4 top-1/2 z-20 -translate-y-1/2 w-12 h-12 rounded-full bg-blue-500/80 text-white transition-all duration-200 hover:bg-blue-500 pointer-events-auto flex items-center justify-center"
+          title="资源列表"
+          @click="showStepNavigation = true"
+        >
+          <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>
+      </template>
+    </Video>
+
+    <StepNavigation
+      :visible="showStepNavigation"
+      :background-image="getStaticImage('work/vlog背景全屏待定')"
+      :steps="navigationSteps"
+      :current-step-index="currentVideoIndex"
+      @step-click="handleStepClick"
+      @close="handleStepNavigationClose"
+    />
+  </div>
+</template>