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

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

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

src/views/film/midterm-shooting/on-site/index.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
+const filmStore = useFilmStore()
+const guideKey = 'film-onsite-intro'
+const showGuide = ref(!filmStore.guideShown[guideKey])
+
+if (showGuide.value) {
+  filmStore.markGuideShown(guideKey)
+}
 
 const handleClose = () => {
   router.back()
@@ -133,8 +142,10 @@ const goRandom = () => {
     />
   </div>
 
-  <GuideSteps :visible="true" position-offset-y="85%">
-    <GuideStepsItem>选择任意图片按钮，进入对应拍摄场景！</GuideStepsItem>
+  <GuideSteps :visible="showGuide" position-offset-y="85%">
+    <GuideStepsItem :audio-src="getPublicPath('audio/py_4_016.MP3')">
+      接下来进入核心拍摄环节，我们依次来学习！
+    </GuideStepsItem>
   </GuideSteps>
 </template>
 

src/views/film/midterm-shooting/on-site/low-angle.vue

@@ -36,7 +36,7 @@ const questions = ref<Question[]>([
       { id: 'd', label: '让画面信息量变得更多' }
     ],
     correctOptionId: 'b',
-    mediaSrc: getPublicPath('video/on-site/xianchangpaishe_dijiaodu.mp4')
+    mediaSrc: getPublicPath('video/film/on-site/xianchangpaishe_dijiaodu.mp4')
   }
 ])
 
@@ -101,7 +101,7 @@ const handleQuestionsComplete = () => {
 
     <!-- 返回按钮 -->
     <ImgButton
-      class="absolute right-0 top-0 z-20"
+      class="absolute right-0 top-0 z-50"
       :image="IMAGE_PATHS.COMPONENTS.BACK"
       @click="handleBack"
     />

src/views/film/midterm-shooting/on-site/random.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
 import { Video } from '@/components'
-import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+import { getPublicPath, IMAGE_PATHS } from '@/utils'
 
 const router = useRouter()
 
@@ -12,7 +12,7 @@ const handleBack = () => {
 }
 
 // 创作随机性视频 URL（暂时用其他视频代替）
-const randomVideoUrl = getPublicPath('video/on-site/dygmk_czsjx_batch.mp4')
+const randomVideoUrl = getPublicPath('video/film/on-site/dygmk_czsjx_batch.mp4')
 
 // 视频播放状态
 const videoPlaying = ref(false)
@@ -20,14 +20,8 @@ const videoPlaying = ref(false)
 
 <template>
   <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
-    <!-- 背景 -->
-    <div
-      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
-    ></div>
-
     <!-- 视频播放区域 -->
-    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+    <div class="w-full h-full">
       <Video
         class="w-full h-full"
         :src="randomVideoUrl"

src/views/film/midterm-shooting/on-site/slider.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
 import { Video, QuestionQuiz, type Question } from '@/components'
-import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+import { getPublicPath, IMAGE_PATHS } from '@/utils'
 
 const router = useRouter()
 
@@ -12,7 +12,7 @@ const handleBack = () => {
 }
 
 // 滑轨拍摄视频 URL
-const sliderVideoUrl = getPublicPath('video/on-site/dygmk_hgydjt_batch.mp4')
+const sliderVideoUrl = getPublicPath('video/film/on-site/dygmk_hgydjt_batch.mp4')
 
 // 视频播放状态
 const videoEnded = ref(false)
@@ -53,35 +53,27 @@ const handleQuestionsComplete = () => {
 
 <template>
   <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
-    <!-- 背景 -->
-    <div
-      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
-    ></div>
-
     <!-- 视频播放区域 -->
-    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
-      <Video
-        class="w-full h-full"
-        :src="sliderVideoUrl"
-        v-model="videoPlaying"
-        :muted="false"
-        :volume="1"
-        :controls="true"
-        :hideNativeControls="true"
-        :autoplay="true"
-        @ended="handleVideoEnded"
-      >
-        <template #overlay>
-          <QuestionQuiz
-            v-if="showQuiz"
-            :show-question-number="false"
-            :questions="questions"
-            @complete="handleQuestionsComplete"
-          />
-        </template>
-      </Video>
-    </div>
+    <Video
+      class="w-full h-full"
+      :src="sliderVideoUrl"
+      v-model="videoPlaying"
+      :muted="false"
+      :volume="1"
+      :controls="true"
+      :hideNativeControls="true"
+      :autoplay="true"
+      @ended="handleVideoEnded"
+    >
+      <template #overlay>
+        <QuestionQuiz
+          v-if="showQuiz"
+          :show-question-number="false"
+          :questions="questions"
+          @complete="handleQuestionsComplete"
+        />
+      </template>
+    </Video>
 
     <!-- 返回按钮 -->
     <ImgButton

src/views/film/midterm-shooting/on-site/slow-shutter-day.vue

@@ -36,7 +36,7 @@ const questions = ref<Question[]>([
       { id: 'c', label: '使用连拍模式' }
     ],
     correctOptionId: 'b',
-    mediaSrc: getPublicPath('video/on-site/xianchangpaishe_baitianmanmen.mp4')
+    mediaSrc: getPublicPath('video/film/on-site/xianchangpaishe_baitianmanmen.mp4')
   }
 ])
 

src/views/film/midterm-shooting/on-site/slow-shutter-night.vue

@@ -12,14 +12,14 @@ const handleBack = () => {
 }
 
 // 慢门拍摄夜晚视频 URL（暂时用其他视频代替）
-const slowShutterNightVideoUrl = getPublicPath('video/on-site/dygmk_mmps_batch.mp4')
+const slowShutterNightVideoUrl = getPublicPath('video/film/on-site/dygmk_mmps_batch.mp4')
 
 // 视频播放状态
 const videoPlaying = ref(false)
 </script>
 
 <template>
-  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+  <div class="relative w-full h-full overflow-hidden">
     <!-- 背景 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
@@ -27,7 +27,7 @@ const videoPlaying = ref(false)
     ></div>
 
     <!-- 视频播放区域 -->
-    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+    <div class="w-full h-full">
       <Video
         class="w-full h-full"
         :src="slowShutterNightVideoUrl"

src/views/film/midterm-shooting/on-site/time-lapse.vue

@@ -8,7 +8,7 @@ import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
 const router = useRouter()
 
 // 延时拍摄视频 URL（占位，后续可替换）
-const timeLapseVideoUrl = getPublicPath('video/on-site/xianchangpaishe_yanshipaishe.mp4')
+const timeLapseVideoUrl = getPublicPath('video/film/on-site/xianchangpaishe_yanshipaishe.mp4')
 
 const handleBack = () => {
   router.back()
@@ -81,15 +81,32 @@ const handleQuestionsComplete = () => {
             <h2 class="text-4xl font-bold mb-4 leading-relaxed">总结</h2>
             <p>在这个延时画面中，注意天空变化与光影移动的节奏，它们在短时间内被连续呈现出来。</p>
 
-            <p><span>延时拍摄的主要目的</span>，<span>是交代时间流逝与环境状态</span>。</p>
             <p>
-              <span>这里的拍摄对象是江边的建筑群与天空</span
-              >。<span>通过固定机位的连续拍摄</span>，<span>将原本需要较长时间才能观察到的</span
-              ><span>天空变化和光影移动</span>，<span>压缩到一个较短的镜头中呈现</span>。
+              <span>延时拍摄的主要目的</span>
+              ，
+              <span>是交代时间流逝与环境状态</span>
+              。
             </p>
             <p>
-              <span>这种处理方式</span
-              >，<span>非常适合放置在视频片头阶段</span>，<span>用于快速建立时间感与空间环境</span>，<span>而不会占用过多时长</span>。
+              <span>这里的拍摄对象是江边的建筑群与天空</span>
+              。
+              <span>通过固定机位的连续拍摄</span>
+              ，
+              <span>将原本需要较长时间才能观察到的</span>
+              <span>天空变化和光影移动</span>
+              ，
+              <span>压缩到一个较短的镜头中呈现</span>
+              。
+            </p>
+            <p>
+              <span>这种处理方式</span>
+              ，
+              <span>非常适合放置在视频片头阶段</span>
+              ，
+              <span>用于快速建立时间感与空间环境</span>
+              ，
+              <span>而不会占用过多时长</span>
+              。
             </p>
           </div>
           <div