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>