feat: 完善课程学习与技能树体验

完善课程资源、学习进度与技能树解锁体验，统一视频播放与引导相关交互。

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

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

@@ -47,6 +47,8 @@ const questions = ref<Question[]>([
     ],
     correctOptionId: 'b',
     mediaSrc: getPublicPath('video/film/on-site/xianchangpaishe_dijiaodu.mp4'),
+    explanation:
+      '低角度仰拍会让人物动作更有向上伸展和力量感，适合突出人物状态与气势；它并不是为了真实放大身高、增加背景或堆叠更多信息。',
   },
 ])
 
@@ -64,7 +66,7 @@ const handleQuestionsComplete = () => {
     <!-- 背景 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+      :style="{ backgroundImage: getBackgroundImage('film/on-site/现场拍摄') }"
     ></div>
 
     <!-- 交互一 & 交互二：选择题 -->

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 { getPublicPath, IMAGE_PATHS } from '@/utils'
+import { getPublicPath, IMAGE_PATHS, getVideoPoster } from '@/utils'
 import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
@@ -33,6 +33,7 @@ const handleVideoEnded = () => {
       <Video
         class="w-full h-full"
         :src="randomVideoUrl"
+        :poster="getVideoPoster(randomVideoUrl)"
         v-model="videoPlaying"
         :muted="false"
         :volume="1"

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

@@ -6,7 +6,7 @@ import { Video } from '@/components'
 import QuestionQuiz, {
   type Question,
 } from '@/components/QuestionQuiz/QuestionQuiz.vue'
-import { getPublicPath, IMAGE_PATHS } from '@/utils'
+import { getPublicPath, IMAGE_PATHS, getVideoPoster } from '@/utils'
 import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
@@ -68,6 +68,7 @@ const handleQuestionsComplete = () => {
     <Video
       class="w-full h-full"
       :src="sliderVideoUrl"
+      :poster="getVideoPoster(sliderVideoUrl)"
       v-model="videoPlaying"
       :muted="false"
       :volume="1"

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

@@ -49,6 +49,8 @@ const questions = ref<Question[]>([
     mediaSrc: getPublicPath(
       'video/film/on-site/xianchangpaishe_baitianmanmen.mp4',
     ),
+    explanation:
+      '白天环境光较强时，需要通过 ND 镜片减少进光量，才能降低快门速度并拉出运动轨迹。提高 ISO 会让画面更亮，连拍模式也不能形成慢门拖影效果。',
   },
 ])
 
@@ -66,7 +68,7 @@ const handleQuestionsComplete = () => {
     <!-- 背景 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+      :style="{ backgroundImage: getBackgroundImage('film/on-site/现场拍摄') }"
     ></div>
 
     <!-- 交互一 & 交互二：选择题 -->
@@ -115,7 +117,7 @@ const handleQuestionsComplete = () => {
 
     <!-- 返回按钮 -->
     <ImgButton
-      class="absolute right-0 top-0 z-20"
+      class="absolute right-0 top-0 z-30"
       :image="IMAGE_PATHS.COMPONENTS.BACK"
       @click="handleBack"
     />

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

@@ -3,7 +3,12 @@ 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 {
+  getBackgroundImage,
+  getPublicPath,
+  IMAGE_PATHS,
+  getVideoPoster,
+} from '@/utils'
 import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
@@ -31,7 +36,7 @@ const handleVideoEnded = () => {
     <!-- 背景 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+      :style="{ backgroundImage: getBackgroundImage('film/on-site/现场拍摄') }"
     ></div>
 
     <!-- 视频播放区域 -->
@@ -39,6 +44,7 @@ const handleVideoEnded = () => {
       <Video
         class="w-full h-full"
         :src="slowShutterNightVideoUrl"
+        :poster="getVideoPoster(slowShutterNightVideoUrl)"
         v-model="videoPlaying"
         :muted="false"
         :volume="1"

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

@@ -6,7 +6,12 @@ import { Video } from '@/components'
 import QuestionQuiz, {
   type Question,
 } from '@/components/QuestionQuiz/QuestionQuiz.vue'
-import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  IMAGE_PATHS,
+  getVideoPoster,
+} from '@/utils'
 import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
@@ -36,6 +41,8 @@ const questions = ref<Question[]>([
     ],
     correctOptionId: 'c',
     mediaSrc: 'film/on-site/延时拍摄jh_1.png', // 占位：请按需替换为真实图片
+    explanation:
+      '有些变化虽然一直存在，但在正常速度下，并不容易被观众明显感知。延时拍摄适合把时间中的连续变化压缩呈现，让时间流动变得更清楚。',
   },
   {
     id: 2,
@@ -50,6 +57,8 @@ const questions = ref<Question[]>([
     ],
     correctOptionId: 'c',
     mediaSrc: 'film/on-site/延时拍摄jh_1.png', // 占位：请按需替换为真实图片
+    explanation:
+      '延时拍摄能够压缩时间，让原本缓慢发生的变化在短时间内被清晰看到；手持、慢动作或推拉镜头都不能直接强化时间流逝感。',
   },
 ])
 
@@ -68,7 +77,7 @@ const handleQuestionsComplete = () => {
     <!-- 背景 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+      :style="{ backgroundImage: getBackgroundImage('film/on-site/现场拍摄') }"
     ></div>
 
     <!-- 交互一 & 交互二：选择题 -->
@@ -127,6 +136,7 @@ const handleQuestionsComplete = () => {
             <Video
               class="w-full h-full"
               :src="timeLapseVideoUrl"
+              :poster="getVideoPoster(timeLapseVideoUrl)"
               v-model="videoPlaying"
               :muted="false"
               :volume="1"