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

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

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

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"