feat: 完善视频学习进度缓存

完善新手导航和三大创作模块的视频完成缓存、未完成提示与学习进度计算，确保进度按实际学习资源完成情况更新。

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

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { getBackgroundImage, getPublicPath, 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'
@@ -11,6 +16,54 @@ const filmStore = useFilmStore()
 const guideKey = 'film-onsite-intro'
 const showGuide = ref(!filmStore.guideShown[guideKey])
 
+const completionIcon = (completed: boolean) =>
+  getStaticImage(`midterm/${completed ? '完成' : '未完成'}.png`)
+
+const onsiteItems = computed(() => [
+  {
+    image: 'film/on-site/延时拍摄',
+    routeName: 'FilmOnsiteTimeLapse',
+    onClick: goTimeLapse,
+    class:
+      'absolute left-[100px] top-[210px] w-[446px] h-[273px] bg-cover bg-center bg-no-repeat',
+  },
+  {
+    image: 'film/on-site/滑轨拍摄',
+    routeName: 'FilmOnsiteSlider',
+    onClick: goSlider,
+    class:
+      'absolute left-[640px] top-[240px] w-[541px] h-[273px] bg-cover bg-center bg-no-repeat',
+  },
+  {
+    image: 'film/on-site/慢门拍摄-白天',
+    routeName: 'FilmOnsiteSlowShutterDay',
+    onClick: goSlowShutterDay,
+    class:
+      'absolute right-[0px] top-[220px] w-[541px] h-[273px] bg-cover bg-center bg-no-repeat',
+  },
+  {
+    image: 'film/on-site/慢门拍摄-夜间.png',
+    routeName: 'FilmOnsiteSlowShutterNight',
+    onClick: goSlowShutterNight,
+    class:
+      'absolute right-[0px] bottom-[160px] w-[541px] h-[273px] bg-cover bg-center bg-no-repeat',
+  },
+  {
+    image: 'film/on-site/低角度拍摄',
+    routeName: 'FilmOnsiteLowAngle',
+    onClick: goLowAngle,
+    class:
+      'absolute left-[100px] bottom-[80px] w-[446px] h-[273px] bg-cover bg-center bg-no-repeat',
+  },
+  {
+    image: 'film/on-site/创作随机性',
+    routeName: 'FilmOnsiteRandom',
+    onClick: goRandom,
+    class:
+      'absolute left-[700px] bottom-[40px] w-[446px] h-[273px] bg-cover bg-center bg-no-repeat',
+  },
+])
+
 if (showGuide.value) {
   filmStore.markGuideShown(guideKey)
 }
@@ -53,86 +106,27 @@ const goRandom = () => {
     ></div>
 
     <!-- 标题 -->
-    <img class="absolute left-0 top-0" :src="getStaticImage('film/on-site/标题.png')" alt="" />
+    <img
+      class="absolute left-0 top-0"
+      :src="getStaticImage('film/on-site/标题.png')"
+      alt=""
+    />
 
     <div
-      class="absolute left-[100px] top-[210px] w-[446px] h-[273px] bg-cover bg-center bg-no-repeat"
+      v-for="item in onsiteItems"
+      :key="item.routeName"
+      :class="item.class"
     >
-      <ImgButton :image="'film/on-site/延时拍摄'" @click="goTimeLapse" />
+      <ImgButton
+        :image="item.image"
+        @click="item.onClick"
+      />
+      <img
+        class="pointer-events-none absolute left-6 top-2 z-10 h-12 w-12"
+        :src="completionIcon(filmStore.viewed[item.routeName] === true)"
+        alt=""
+      />
     </div>
-    <div
-      class="absolute left-[640px] top-[240px] w-[541px] h-[273px] bg-cover bg-center bg-no-repeat"
-    >
-      <ImgButton :image="'film/on-site/滑轨拍摄'" @click="goSlider" />
-    </div>
-    <div
-      class="absolute right-[0px] top-[220px] w-[541px] h-[273px] bg-cover bg-center bg-no-repeat"
-    >
-      <ImgButton :image="'film/on-site/慢门拍摄-白天'" @click="goSlowShutterDay" />
-    </div>
-    <div
-      class="absolute right-[0px] bottom-[160px] w-[541px] h-[273px] bg-cover bg-center bg-no-repeat"
-    >
-      <ImgButton :image="'film/on-site/慢门拍摄-夜间.png'" @click="goSlowShutterNight" />
-    </div>
-
-    <div
-      class="absolute left-[100px] bottom-[80px] w-[446px] h-[273px] bg-cover bg-center bg-no-repeat"
-    >
-      <ImgButton :image="'film/on-site/低角度拍摄'" @click="goLowAngle" />
-    </div>
-    <div
-      class="absolute left-[700px] bottom-[40px] w-[446px] h-[273px] bg-cover bg-center bg-no-repeat"
-    >
-      <ImgButton :image="'film/on-site/创作随机性'" @click="goRandom" />
-    </div>
-
-    <!-- 内容卡片 + 按钮 -->
-    <!-- <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
-      <div
-        class="max-w-screen-2xl w-full bg-black/35 rounded-3xl border border-white/15 p-16 space-y-10 text-white pointer-events-auto"
-      >
-        <div class="flex items-baseline justify-between gap-6">
-          <h1 class="text-5xl font-extrabold tracking-wide">现场拍摄</h1>
-          <span class="text-3xl opacity-80">从不同维度练习你的镜头语言</span>
-        </div>
-        <p class="text-2xl leading-8 opacity-90">
-          选择下面任意一个练习模块，进入对应的现场拍摄场景，按提示完成小任务，逐步建立自己的拍摄手感和创作节奏。
-        </p>
-
-        <div class="grid grid-cols-3 gap-10">
-          <button type="button" class="onsite-btn" @click="goTimeLapse">
-            <span class="onsite-btn-title">延时拍摄</span>
-            <span class="onsite-btn-desc">记录时间流动，让平凡场景变得有节奏、有变化。</span>
-          </button>
-
-          <button type="button" class="onsite-btn" @click="goSlider">
-            <span class="onsite-btn-title">滑轨拍摄</span>
-            <span class="onsite-btn-desc">通过平稳移动镜头，营造空间感和叙事推进感。</span>
-          </button>
-
-          <button type="button" class="onsite-btn" @click="goSlowShutterDay">
-            <span class="onsite-btn-title">慢门拍摄 · 白天</span>
-            <span class="onsite-btn-desc">在白天环境下练习慢门，营造水流、车流等运动轨迹。</span>
-          </button>
-
-          <button type="button" class="onsite-btn" @click="goSlowShutterNight">
-            <span class="onsite-btn-title">慢门拍摄 · 夜晚</span>
-            <span class="onsite-btn-desc">利用城市灯光，拍出具有节奏感和氛围感的夜景画面。</span>
-          </button>
-
-          <button type="button" class="onsite-btn" @click="goLowAngle">
-            <span class="onsite-btn-title">低角度拍摄</span>
-            <span class="onsite-btn-desc">从低视角观察世界，突出主体气势，改变日常视角。</span>
-          </button>
-
-          <button type="button" class="onsite-btn" @click="goRandom">
-            <span class="onsite-btn-title">创作随机性</span>
-            <span class="onsite-btn-desc">跟随直觉自由取景，捕捉那些意料之外的画面惊喜。</span>
-          </button>
-        </div>
-      </div>
-    </div> -->
 
     <!-- 关闭 -->
     <ImgButton
@@ -142,7 +136,10 @@ const goRandom = () => {
     />
   </div>
 
-  <GuideSteps :visible="showGuide" position-offset-y="85%">
+  <GuideSteps
+    :visible="showGuide"
+    position-offset-y="85%"
+  >
     <GuideStepsItem :audio-src="getPublicPath('audio/py_4_016.MP3')">
       接下来进入核心拍摄环节，我们依次来学习！
     </GuideStepsItem>

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

@@ -11,8 +11,10 @@ import {
   getStaticImage,
   IMAGE_PATHS,
 } from '@/utils'
+import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
+const filmStore = useFilmStore()
 
 const handleBack = () => {
   router.back()
@@ -53,6 +55,7 @@ const showSummaryStep = ref(false)
 // 答题完成，进入交互三（总结）
 const handleQuestionsComplete = () => {
   showSummaryStep.value = true
+  filmStore.markViewed('FilmOnsiteLowAngle')
 }
 </script>
 

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

@@ -4,8 +4,10 @@ import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
 import { Video } from '@/components'
 import { getPublicPath, IMAGE_PATHS } from '@/utils'
+import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
+const filmStore = useFilmStore()
 
 const handleBack = () => {
   router.back()
@@ -16,10 +18,16 @@ const randomVideoUrl = getPublicPath('video/film/on-site/dygmk_czsjx_batch.mp4')
 
 // 视频播放状态
 const videoPlaying = ref(false)
+
+const handleVideoEnded = () => {
+  filmStore.markViewed('FilmOnsiteRandom')
+}
 </script>
 
 <template>
-  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+  <div
+    class="relative w-full h-full flex items-center justify-center overflow-hidden"
+  >
     <!-- 视频播放区域 -->
     <div class="w-full h-full">
       <Video
@@ -31,6 +39,7 @@ const videoPlaying = ref(false)
         :controls="true"
         :hideNativeControls="true"
         :autoplay="true"
+        @ended="handleVideoEnded"
       />
     </div>
 

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

@@ -7,8 +7,10 @@ import QuestionQuiz, {
   type Question,
 } from '@/components/QuestionQuiz/QuestionQuiz.vue'
 import { getPublicPath, IMAGE_PATHS } from '@/utils'
+import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
+const filmStore = useFilmStore()
 
 const handleBack = () => {
   router.back()
@@ -54,6 +56,7 @@ const questions = ref<Question[]>([
 // 答题完成
 const handleQuestionsComplete = () => {
   showQuiz.value = false // 答题成功后关闭答题窗口
+  filmStore.markViewed('FilmOnsiteSlider')
 }
 </script>
 

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

@@ -11,8 +11,10 @@ import {
   getStaticImage,
   IMAGE_PATHS,
 } from '@/utils'
+import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
+const filmStore = useFilmStore()
 
 const handleBack = () => {
   router.back()
@@ -55,6 +57,7 @@ const showSummaryStep = ref(false)
 // 答题完成，进入交互三（总结）
 const handleQuestionsComplete = () => {
   showSummaryStep.value = true
+  filmStore.markViewed('FilmOnsiteSlowShutterDay')
 }
 </script>
 

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

@@ -4,18 +4,26 @@ import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
 import { Video } from '@/components'
 import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
+const filmStore = useFilmStore()
 
 const handleBack = () => {
   router.back()
 }
 
 // 慢门拍摄夜晚视频 URL（暂时用其他视频代替）
-const slowShutterNightVideoUrl = getPublicPath('video/film/on-site/dygmk_mmps_batch.mp4')
+const slowShutterNightVideoUrl = getPublicPath(
+  'video/film/on-site/dygmk_mmps_batch.mp4',
+)
 
 // 视频播放状态
 const videoPlaying = ref(false)
+
+const handleVideoEnded = () => {
+  filmStore.markViewed('FilmOnsiteSlowShutterNight')
+}
 </script>
 
 <template>
@@ -37,6 +45,7 @@ const videoPlaying = ref(false)
         :controls="true"
         :hideNativeControls="true"
         :autoplay="true"
+        @ended="handleVideoEnded"
       />
     </div>
 

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

@@ -7,8 +7,10 @@ import QuestionQuiz, {
   type Question,
 } from '@/components/QuestionQuiz/QuestionQuiz.vue'
 import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
+const filmStore = useFilmStore()
 
 // 延时拍摄视频 URL（占位，后续可替换）
 const timeLapseVideoUrl = getPublicPath(
@@ -57,6 +59,7 @@ const videoPlaying = ref(false) // 视频播放状态
 // 答题完成，进入交互三（视频）
 const handleQuestionsComplete = () => {
   showObserveStep.value = true
+  filmStore.markViewed('FilmOnsiteTimeLapse')
 }
 </script>
 
@@ -137,7 +140,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"
     />