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

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

src/views/vlog/midterm-shooting/shooting/index.vue

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { Overlay } from '@/components/Overlay'
 import { ImgButton } from '@/components/Button'
-import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
 import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
 import videoSrc from '/video/xinshou_jiuzhonggoutufa.mp4'
 import KnowledgeCard from '@/components/KnowledgeCard/KnowledgeCard.vue'
@@ -102,18 +102,24 @@ const back = () => {
         <ImgButton image="shooting/按钮-取景地B.png" @click="handleClickB" />
       </div>
       <div class="shooting-composition">
-        <ImgButton image="shooting/构图指南.png" @click="showModal = true" />
+        <ImgButton
+          class="shooting-composition-btn"
+          image="shooting/构图指南.png"
+          @click="showModal = true"
+        />
       </div>
     </div>
 
     <!-- 引导步骤 -->
     <GuideSteps
-      :highlight-selector="'.mybutton'"
+      :highlight-selector="'.shooting-composition-btn'"
       :highlight-padding="12"
       :highlight-radius="20"
-      position-offset-y="85%"
+      position-offset-y="60%"
     >
-      <GuideStepsItem> 在走进拍摄场景之前，我们先来查看一下构图指南。 </GuideStepsItem>
+      <GuideStepsItem :audio-src="getPublicPath('audio/py_2_014.MP3')">
+        在走进拍摄场景之前，我们先来回顾一下三种常见的构图方法。
+      </GuideStepsItem>
     </GuideSteps>
 
     <!-- 保存图片弹窗 -->