feat: 完善课程引导与实战评价体验

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

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

@@ -2,13 +2,18 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
-import { Video, QuestionQuiz, type Question } from '@/components'
+import { Video } from '@/components'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
 import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
 
 const router = useRouter()
 
 // 延时拍摄视频 URL（占位，后续可替换）
-const timeLapseVideoUrl = getPublicPath('video/film/on-site/xianchangpaishe_yanshipaishe.mp4')
+const timeLapseVideoUrl = getPublicPath(
+  'video/film/on-site/xianchangpaishe_yanshipaishe.mp4',
+)
 
 const handleBack = () => {
   router.back()
@@ -19,29 +24,31 @@ const questions = ref<Question[]>([
   {
     id: 1,
     title: '观察判断',
-    description: '如果你只用一条普通视频来拍这个场景，你觉得画面最难被感知的是什么？',
+    description:
+      '如果你只用一条普通视频来拍这个场景，你觉得画面最难被感知的是什么？',
     options: [
       { id: 'a', label: '建筑的外形结构' },
       { id: 'b', label: '天空的颜色' },
       { id: 'c', label: '时间的变化' },
-      { id: 'd', label: '画面的清晰度' }
+      { id: 'd', label: '画面的清晰度' },
     ],
     correctOptionId: 'c',
-    mediaSrc: 'film/on-site/延时拍摄jh_1.png' // 占位：请按需替换为真实图片
+    mediaSrc: 'film/on-site/延时拍摄jh_1.png', // 占位：请按需替换为真实图片
   },
   {
     id: 2,
     title: '方法选择',
-    description: '如果希望在很短时间内，让观众明显感知“时间正在流动”，你会选择哪种拍摄方式？',
+    description:
+      '如果希望在很短时间内，让观众明显感知“时间正在流动”，你会选择哪种拍摄方式？',
     options: [
       { id: 'a', label: '手持拍摄' },
       { id: 'b', label: '慢动作拍摄' },
       { id: 'c', label: '延时拍摄' },
-      { id: 'd', label: '推拉镜头' }
+      { id: 'd', label: '推拉镜头' },
     ],
     correctOptionId: 'c',
-    mediaSrc: 'film/on-site/延时拍摄jh_1.png' // 占位：请按需替换为真实图片
-  }
+    mediaSrc: 'film/on-site/延时拍摄jh_1.png', // 占位：请按需替换为真实图片
+  },
 ])
 
 const showObserveStep = ref(false)
@@ -79,7 +86,9 @@ const handleQuestionsComplete = () => {
           <!-- 总结文本内容 -->
           <div class="w-2/6 text-2xl leading-10 opacity-90 space-y-3">
             <h2 class="text-4xl font-bold mb-4 leading-relaxed">总结</h2>
-            <p>在这个延时画面中，注意天空变化与光影移动的节奏，它们在短时间内被连续呈现出来。</p>
+            <p>
+              在这个延时画面中，注意天空变化与光影移动的节奏，它们在短时间内被连续呈现出来。
+            </p>
 
             <p>
               <span>延时拍摄的主要目的</span>