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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/views/interview/midterm-shooting/equipment/index.vue

@@ -1,7 +1,7 @@
 <script lang="tsx" setup>
 import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
-import { GuideSteps, GuideStepsItem, type GuideStep } from '@/components/Guide'
-import { ref, computed } from 'vue'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
 
@@ -12,38 +12,59 @@ const back = () => {
   router.back()
 }
 const steps = [
-  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
-  { id: 'step2', content: '这是主要内容区域的边框' }
+  {
+    id: 'step1',
+    content: '先认识 Vlog：点击右侧「1.vlog初识」继续',
+    highlightSelector: '.img-switch-item--vlog'
+  },
+  {
+    id: 'step2',
+    content: '这是主要内容区域的边框',
+    highlightSelector: '.work-border'
+  }
 ]
-const stepIndex = ref(0)
 const hiddenbar = ref(false)
-const currentIndex = ref(0) // 当前显示的图片索引
-const selectedMenuIndex = ref(0) // 当前选中的菜单项索引
+const currentIndex = ref(0)
+const selectedMenuIndex = ref(0)
 
-// 菜单项数据
-const menuItems = ref([
-  { id: 'phone', name: '手机', disabled: false },
-  { id: 'phone-stand', name: '手机支架', disabled: true },
-  { id: 'bluetooth-remote', name: '蓝牙遥控器', disabled: true },
-  { id: 'stabilizer', name: '稳定器', disabled: true },
-  { id: 'props', name: '常用道具', disabled: true },
-  { id: 'phone-lens', name: '手机辅助箱头', disabled: true }
-])
+const equipmentItems = [
+  {
+    id: 'camera',
+    name: '相机 / 摄像机 / 微单',
+    productImages: [
+      getStaticImage('equipment/相机产品.png'),
+      getStaticImage('equipment/摄像机产品.png'),
+      getStaticImage('equipment/微单产品.png')
+    ],
+    title: getStaticImage('equipment/相机标题.png'),
+    text: getStaticImage('equipment/相机内容.png')
+  },
+  {
+    id: 'tripod',
+    name: '三脚架',
+    productImages: [getStaticImage('equipment/三角架产品.png')],
+    title: getStaticImage('equipment/三脚架标题.png'),
+    text: getStaticImage('equipment/三脚架内容.png')
+  },
+  {
+    id: 'light',
+    name: '灯光',
+    productImages: [
+      getStaticImage('equipment/led补光灯.png'),
+      getStaticImage('equipment/环形灯产品.png')
+    ],
+    title: getStaticImage('equipment/灯标题.png'),
+    text: getStaticImage('equipment/灯内容.png')
+  }
+]
 
-const phoneList = ref([
-  { phoneImg: getStaticImage('equipment/设备-手机1.png') },
-  { phoneImg: getStaticImage('equipment/设备-手机2.png') }
-])
+const menuItems = ref(
+  equipmentItems.map(item => ({ id: item.id, name: item.name, disabled: false }))
+)
 
-const platetitleList = ref([
-  { title: getStaticImage('equipment/标题-苹果.png') },
-  { title: getStaticImage('equipment/标题-安卓小米.png') }
-])
+const currentEquipment = computed(() => equipmentItems[selectedMenuIndex.value])
+const currentProductImages = computed(() => currentEquipment.value.productImages)
 
-const platetextList = ref([
-  { text: getStaticImage('equipment/内容-苹果.png') },
-  { text: getStaticImage('equipment/内容-安卓小米.png') }
-])
 const hiddenbarclick = () => {
   hiddenbar.value = !hiddenbar.value
 }
@@ -55,11 +76,12 @@ const selectMenuItem = (index: number, item: { id: string; name: string; disable
     return
   }
   selectedMenuIndex.value = index
+  currentIndex.value = 0
 }
 
 // 下一张图片
 const nextPhone = () => {
-  if (currentIndex.value < phoneList.value.length - 1) {
+  if (currentIndex.value < currentProductImages.value.length - 1) {
     currentIndex.value++
   }
 }
@@ -70,14 +92,6 @@ const prevPhone = () => {
     currentIndex.value--
   }
 }
-
-const handleStepChange = (_step: GuideStep | null, index: number) => {
-  stepIndex.value = index
-}
-
-const currentHighlight = computed(() =>
-  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
-)
 </script>
 <template>
   <div class="equipment-index">
@@ -139,12 +153,14 @@ const currentHighlight = computed(() =>
           <img src="@/assets/images/equipment/按钮-左滑.png" alt="" />
         </div>
         <div class="equipment-phoneImg">
-          <img :src="phoneList[currentIndex].phoneImg" alt="" />
+          <img :src="currentProductImages[currentIndex]" alt="" />
         </div>
         <div
           class="equipment-rightbutton"
           @click="nextPhone"
-          :style="{ visibility: currentIndex < phoneList.length - 1 ? 'visible' : 'hidden' }"
+          :style="{
+            visibility: currentIndex < currentProductImages.length - 1 ? 'visible' : 'hidden'
+          }"
         >
           <img src="@/assets/images/equipment/按钮-右滑.png" alt="" />
         </div>
@@ -155,11 +171,11 @@ const currentHighlight = computed(() =>
         </div>
 
         <div class="title">
-          <img :src="platetitleList[currentIndex].title" alt="" />
+          <img :src="currentEquipment.title" alt="" />
         </div>
         <div class="plate-content">
           <div class="text">
-            <img :src="platetextList[currentIndex].text" alt="" />
+            <img :src="currentEquipment.text" alt="" />
           </div>
         </div>
       </div>
@@ -176,10 +192,8 @@ const currentHighlight = computed(() =>
     <!-- 引导步骤 -->
     <GuideSteps
       :steps="steps"
-      :highlight-selector="currentHighlight"
       :highlight-padding="12"
       :highlight-radius="20"
-      @step-change="handleStepChange"
       position-offset-y="85%"
     >
       <GuideStepsItem>

src/views/interview/midterm-shooting/on-site/index.vue

@@ -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>

src/views/interview/midterm-shooting/shooting/filmingLocation-b/index.vue

@@ -9,7 +9,6 @@ import StartOverlay from '../components/StartOverlay.vue'
 import LoadingOverlay from '@/components/Loading/LoadingOverlay.vue'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { useRouter } from 'vue-router'
-import { useInterviewStore } from '@/stores'
 
 const router = useRouter()
 const start = ref(false)
@@ -90,7 +89,6 @@ const captureScene = async () => {
  */
 const handleComplete = () => {
   showGuide.value = false
-  useInterviewStore().setInterviewUnlockProgress(3)
   router.push({
     name: 'Interview'
   })
@@ -252,7 +250,7 @@ const handleComplete = () => {
 
     <!-- 引导步骤 -->
     <GuideSteps v-if="showGuide" positionOffsetY="80%" @complete="handleComplete">
-      <GuideStepsItem> 实地取景已全部完成，现在跟着我走进现场开始正式的拍摄吧~ </GuideStepsItem>
+      <GuideStepsItem>实地取景已全部完成，现在跟着我走进现场开始正式的拍摄吧~</GuideStepsItem>
     </GuideSteps>
   </div>
 </template>