feat: 完善模块引导与学习进度体验

统一引导提示的持久化控制，补充学习进度入口与模块资源，避免用户返回页面时重复触发提示。

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

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

@@ -156,9 +156,12 @@ const capturePhoto = async () => {
   <div class="w-full h-full">
     <div
       class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
-      :style="{ backgroundImage: getBackgroundImage('shooting/取景地模糊背景.png') }"
+      :style="{ backgroundImage: getBackgroundImage('interview/shooting/操场-模糊.png') }"
     >
-      <ImgButton image="shooting/标题-取景地a.png" class="title-button absolute left-0" />
+      <ImgButton
+        image="interview/shooting/操场-侧边标题.png"
+        class="title-button absolute left-0"
+      />
       <ImgButton image="shooting/返回.png" class="back-button absolute right-0" @click="back" />
 
       <StartOverlay v-if="!start" @start="start = true" />
@@ -186,7 +189,7 @@ const capturePhoto = async () => {
                 'cursor-grabbing': isDragging
               }"
               :style="{ transform: getTransform() }"
-              src="@/assets/images/shooting/取景大图.png"
+              src="@/assets/images/interview/shooting/操场-清晰.png"
               alt=""
               crossorigin="anonymous"
               @mousedown="startDrag"

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

@@ -101,12 +101,15 @@ const handleComplete = () => {
       class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
       :style="{
         backgroundImage: start
-          ? getBackgroundImage('shooting/取景大图.png')
-          : getBackgroundImage('shooting/取景地模糊背景.png')
+          ? getBackgroundImage('interview/shooting/教学楼-清晰.png')
+          : getBackgroundImage('interview/shooting/教学楼-模糊.png')
       }"
     >
       <!-- 标题 -->
-      <ImgButton image="shooting/标题-取景地b.png" class="title-button absolute left-0" />
+      <ImgButton
+        image="interview/shooting/教学楼-侧边标题.png"
+        class="title-button absolute left-0"
+      />
 
       <!-- 返回按钮 -->
       <ImgButton
@@ -123,7 +126,7 @@ const handleComplete = () => {
         <img
           ref="backgroundImage"
           class="absolute inset-0 w-full h-full object-cover pointer-events-none opacity-0"
-          src="@/assets/images/shooting/取景大图.png"
+          src="@/assets/images/interview/shooting/教学楼-清晰.png"
           alt=""
           crossorigin="anonymous"
         />

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

@@ -4,10 +4,11 @@ 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'
+import { useInterviewStore } from '@/stores/modules/interview'
 
 type Btn = {
   key: string
@@ -18,6 +19,13 @@ type Btn = {
 }
 
 const router = useRouter()
+const interviewStore = useInterviewStore()
+const guideKey = 'interview-shooting-intro'
+const showIntroGuide = ref(!interviewStore.guideShown[guideKey])
+
+if (showIntroGuide.value) {
+  interviewStore.markGuideShown(guideKey)
+}
 
 const showModal = ref(false)
 
@@ -87,7 +95,7 @@ const back = () => {
     <!-- 背景图片 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+      :style="{ backgroundImage: getBackgroundImage('interview/shooting/实地取景底图') }"
     >
       <div class="shooting-title">
         <img :src="shootingtitle" alt="" />
@@ -95,25 +103,28 @@ const back = () => {
       <div class="shooting-return">
         <ImgButton image="shooting/返回.png" @click="back" />
       </div>
-      <div class="shooting-left">
-        <ImgButton image="shooting/按钮-取景地A.png" @click="handleClickA" />
+      <div class="absolute left-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
+        <ImgButton image="interview/shooting/操场-入口.png" @click="handleClickA" />
       </div>
-      <div class="shooting-right">
-        <ImgButton image="shooting/按钮-取景地B.png" @click="handleClickB" />
+      <div class="absolute right-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
+        <ImgButton image="interview/shooting/教学楼-入口.png" @click="handleClickB" />
       </div>
       <div class="shooting-composition">
-        <ImgButton image="shooting/构图指南.png" @click="showModal = true" />
+        <ImgButton class="mybutton" image="shooting/构图指南.png" @click="showModal = true" />
       </div>
     </div>
 
     <!-- 引导步骤 -->
     <GuideSteps
+      v-if="showIntroGuide"
       :highlight-selector="'.mybutton'"
       :highlight-padding="12"
       :highlight-radius="20"
-      position-offset-y="85%"
+      position-offset-y="30%"
     >
-      <GuideStepsItem> 在走进拍摄场景之前，我们先来查看一下构图指南。 </GuideStepsItem>
+      <GuideStepsItem :audio-src="getPublicPath('audio/py_3_009.MP3')">
+        同一个地点，站位不同、构图不同，画面质感就完全不同。
+      </GuideStepsItem>
     </GuideSteps>
 
     <!-- 保存图片弹窗 -->