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

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

src/views/basic-elements/composition/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/xsdh_rhxzgt_batch.mp4'
 import video2 from '/video/new/xsdh_jzgtf_batch.mp4'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
@@ -75,6 +75,8 @@ const onEnded = () => {
 const handleStepClick = (index: number) => {
   currentVideoIndex.value = index
   currentNavigationStep.value = index
+  // 先重置播放状态，确保 v-model 触发 watcher
+  playing.value = false
   nextTick(() => {
     playing.value = true
   })
@@ -84,6 +86,12 @@ const handleStepNavigationClose = () => {
   showStepNavigation.value = false
 }
 
+const handleIntroGuideComplete = () => {
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
 onMounted(() => {})
 </script>
 
@@ -145,15 +153,23 @@ onMounted(() => {})
       :highlight-selector="guideStepIndex === 3 ? '.step-navigation-btn' : ''"
       position-offset-y="85%"
       @step-change="(_: any, index: number) => (guideStepIndex = index)"
+      @complete="handleIntroGuideComplete"
     >
-      <GuideStepsItem>你有没有过这样的感觉？画面里什么都有，却不知道重点在哪里？</GuideStepsItem>
-      <GuideStepsItem>很多时候，不是内容不够好，而是需要有构图思维。</GuideStepsItem>
-      <GuideStepsItem>所谓构图，就是在画面中对元素进行选择、取舍和安排</GuideStepsItem>
-      <GuideStepsItem>
+      <GuideStepsItem :audio-src="getPublicPath('audio/py_1_005.MP3')">
+        你有没有过这样的感觉？画面里什么都有，却不知道重点在哪里？
+      </GuideStepsItem>
+      <GuideStepsItem :audio-src="getPublicPath('audio/py_1_006.MP3')">
+        很多时候，不是内容不够好，而是需要有构图思维。
+      </GuideStepsItem>
+      <GuideStepsItem :audio-src="getPublicPath('audio/py_1_007.MP3')">
+        所谓构图，就是在画面中对元素进行选择、取舍和安排
+      </GuideStepsItem>
+      <GuideStepsItem :audio-src="getPublicPath('audio/py_1_008.MP3')">
         <div class="flex flex-wrap items-center justify-start">
           <div>一起来看看吧~</div>
           <div class="text-yellow-400">
-            点击<button
+            点击
+            <button
               class="w-10 h-10 bg-blue-500/80 hover:bg-blue-500 rounded-full inline-flex items-center justify-center text-white transition-all duration-200"
               title="步骤导航"
             >