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

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

src/views/basic-elements/camera-movement/index.vue

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
 import { StepNavigation } from '@/components/Guide'
 import { Video } from '@/components'
-import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 // 运镜初识 - 暂时用运镜的基本方式代替
 import video1 from '/video/new/xinshou_yunjingdejibenfangshi.mp4'
 import video2 from '/video/new/xinshou_zhengquedeshoujipaishe.mp4'
@@ -20,6 +20,23 @@ const props = defineProps<{
 const playing = ref(false)
 const status = ref(false)
 
+const showCameraMovementGuide = ref(false)
+const cameraMovementGuideShown = ref(false)
+
+const handleIntroGuideComplete = () => {
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
+const handleCameraMovementGuideComplete = () => {
+  showCameraMovementGuide.value = false
+  cameraMovementGuideShown.value = true
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
 // 步骤导航数据
 const navigationSteps = ref([
   // {
@@ -60,6 +77,14 @@ const handleVideoChange = () => {
     status.value = true
     return
   }
+
+  // 切到“运镜的基本方式”（index 1）时，先暂停并展示引导对话
+  if (currentVideoIndex.value === 1 && !cameraMovementGuideShown.value) {
+    playing.value = false
+    showCameraMovementGuide.value = true
+    return
+  }
+
   nextTick(() => {
     // 使用受控播放来触发下一个视频自动播放
     playing.value = true
@@ -145,9 +170,26 @@ const handleStepNavigationClose = () => {
       @close="handleStepNavigationClose"
     />
 
-    <GuideSteps :visible="true" position-offset-y="85%">
-      <GuideStepsItem>想拍出好的视频效果，画面稳定性是最基本的要求。</GuideStepsItem>
-      <GuideStepsItem>接下来，我们来学习正确的持机方式和拍摄姿势。</GuideStepsItem>
+    <GuideSteps :visible="true" position-offset-y="85%" @complete="handleIntroGuideComplete">
+      <GuideStepsItem :audio-src="getPublicPath('audio/py_1_014.MP3')">
+        想拍出好的视频效果，画面稳定性是最基本的要求。
+      </GuideStepsItem>
+      <GuideStepsItem :audio-src="getPublicPath('audio/py_1_015.MP3')">
+        接下来，我们来学习正确的持机方式和拍摄姿势。
+      </GuideStepsItem>
+    </GuideSteps>
+
+    <GuideSteps
+      v-if="showCameraMovementGuide"
+      position-offset-y="85%"
+      @complete="handleCameraMovementGuideComplete"
+    >
+      <GuideStepsItem :audio-src="getPublicPath('audio/py_1_016.MP3')">
+        当我们将画面稳定之后，就来到了镜头语言。
+      </GuideStepsItem>
+      <GuideStepsItem :audio-src="getPublicPath('audio/py_1_017.MP3')">
+        同一个场景，用不同运镜，表达就不一样。跟着我，去了解5种基础运镜吧~
+      </GuideStepsItem>
     </GuideSteps>
   </div>
 </template>