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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-09 09:53:06 +08:00
1 parent 6f8252472f
commit 1f8723aabd
@@ -2,8 +2,15 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
-import { QuestionQuiz, type Question } from '@/components'
-import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  getStaticImage,
+  IMAGE_PATHS,
+} from '@/utils'

 const router = useRouter()

@@ -16,14 +23,15 @@ const questions = ref<Question[]>([
  {
    id: 1,
    title: '画面感受判断',
-    description: '如果你身处滨江岸边，看到一位正在打太极的老人，你会选择哪个角度拍摄？',
+    description:
+      '如果你身处滨江岸边，看到一位正在打太极的老人，你会选择哪个角度拍摄？',
    options: [
      { id: 'a', label: '平视拍摄' },
      { id: 'b', label: '俯拍' },
-      { id: 'c', label: '低角度仰拍' }
+      { id: 'c', label: '低角度仰拍' },
    ],
    correctOptionId: '', // 引导题，没有正确答案，任意选择都可进入下一题
-    mediaSrc: 'film/on-site/低角度拍摄jh_1.png'
+    mediaSrc: 'film/on-site/低角度拍摄jh_1.png',
  },
  {
    id: 2,
@@ -33,11 +41,11 @@ const questions = ref<Question[]>([
      { id: 'a', label: '放大了人物的真实身高' },
      { id: 'b', label: '强化了人物动作的力量感与气势' },
      { id: 'c', label: '让背景元素显得更加丰富' },
-      { id: 'd', label: '让画面信息量变得更多' }
+      { id: 'd', label: '让画面信息量变得更多' },
    ],
    correctOptionId: 'b',
-    mediaSrc: getPublicPath('video/film/on-site/xianchangpaishe_dijiaodu.mp4')
-  }
+    mediaSrc: getPublicPath('video/film/on-site/xianchangpaishe_dijiaodu.mp4'),
+  },
 ])

 const showSummaryStep = ref(false)
@@ -2,7 +2,10 @@
 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 { getPublicPath, IMAGE_PATHS } from '@/utils'

 const router = useRouter()
@@ -12,7 +15,9 @@ const handleBack = () => {
 }

 // 滑轨拍摄视频 URL
-const sliderVideoUrl = getPublicPath('video/film/on-site/dygmk_hgydjt_batch.mp4')
+const sliderVideoUrl = getPublicPath(
+  'video/film/on-site/dygmk_hgydjt_batch.mp4',
+)

 // 视频播放状态
 const videoEnded = ref(false)
@@ -34,15 +39,16 @@ const questions = ref<Question[]>([
    options: [
      {
        id: 'a',
-        label: '人物正对镜头说话，背景简单，镜头静止人物正对镜头说话，背景简单，镜头静止'
+        label:
+          '人物正对镜头说话，背景简单，镜头静止人物正对镜头说话，背景简单，镜头静止',
      },
      { id: 'b', label: '人物站在窗边，前景有栏杆或墙体，镜头缓慢横向移动' },
-      { id: 'c', label: '人物快速奔跑，摄影师跟着移动拍摄' }
+      { id: 'c', label: '人物快速奔跑，摄影师跟着移动拍摄' },
    ],
    correctOptionId: 'b',
    explanation:
-      '滑轨镜头的价值，不在"动"，而在稳定、克制地交代空间关系。当前景—人物—背景同时存在时，缓慢的横向移动，会让画面产生层次和叙事感，而不是分散注意力。'
-  }
+      '滑轨镜头的价值，不在"动"，而在稳定、克制地交代空间关系。当前景—人物—背景同时存在时，缓慢的横向移动，会让画面产生层次和叙事感，而不是分散注意力。',
+  },
 ])

 // 答题完成
@@ -52,7 +58,9 @@ const handleQuestionsComplete = () => {
 </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"
+  >
    <!-- 视频播放区域 -->
    <Video
      class="w-full h-full"
@@ -2,8 +2,15 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
-import { QuestionQuiz, type Question } from '@/components'
-import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  getStaticImage,
+  IMAGE_PATHS,
+} from '@/utils'

 const router = useRouter()

@@ -19,11 +26,12 @@ const questions = ref<Question[]>([
    description: '在这个白天场景中，画面里的运动变化，是否容易被直接观察到？',
    options: [
      { id: 'a', label: '是，变化本身已经很清楚' },
-      { id: 'b', label: '否，变化存在，但不容易被完整感知' }
+      { id: 'b', label: '否，变化存在，但不容易被完整感知' },
    ],
    correctOptionId: 'b',
    mediaSrc: 'film/on-site/白天慢门jh_1.png',
-    explanation: '白天光照条件下，许多运动变化存在于连续时间中，并不容易被单帧画面完整呈现。'
+    explanation:
+      '白天光照条件下，许多运动变化存在于连续时间中，并不容易被单帧画面完整呈现。',
  },
  {
    id: 2,
@@ -33,11 +41,13 @@ const questions = ref<Question[]>([
    options: [
      { id: 'a', label: '提高 ISO' },
      { id: 'b', label: '加装 ND 镜片，降低快门速度' },
-      { id: 'c', label: '使用连拍模式' }
+      { id: 'c', label: '使用连拍模式' },
    ],
    correctOptionId: 'b',
-    mediaSrc: getPublicPath('video/film/on-site/xianchangpaishe_baitianmanmen.mp4')
-  }
+    mediaSrc: getPublicPath(
+      'video/film/on-site/xianchangpaishe_baitianmanmen.mp4',
+    ),
+  },
 ])

 const showSummaryStep = ref(false)
@@ -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>