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

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

src/views/basic-elements/light/index.vue

@@ -2,8 +2,11 @@
 import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { StepNavigation } from '@/components/Guide'
-import { Video, QuestionQuiz, type Question } from '@/components'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
+import { Video } from '@/components'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { GuideSteps } from '@/components/Guide'
 import GuideStepsItem from '@/components/Guide/GuideStepsItem.vue'
@@ -53,22 +56,22 @@ const navigationSteps = ref([
     label: '视觉素养',
     content: '光的基础认知',
     videoUrl: getPublicPath('video/new/light/xinshou_guangdejichurenzhi.mp4'),
-    type: 'planning' as const
+    type: 'planning' as const,
   },
   {
     id: 'step3',
     label: '视觉素养',
     content: '光的四大属性',
     videoUrl: getPublicPath('video/new/light/xinshou_guangdesidashuxing.mp4'),
-    type: 'planning' as const
+    type: 'planning' as const,
   },
   {
     id: 'step4',
     label: '视觉素养',
     content: '拍摄的黄金时间',
     videoUrl: getPublicPath('video/new/light/xsdh_psdhjsj_batch.mp4'),
-    type: 'planning' as const
-  }
+    type: 'planning' as const,
+  },
 ])
 
 // 步骤导航相关状态
@@ -79,7 +82,9 @@ const currentNavigationStep = ref(0) // 对应视频索引，从0开始
 const currentVideoIndex = ref(0)
 
 //按顺序播放
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 
 // 题目数据：拍摄的黄金时间（index 2）
 const questions = ref<Question[]>([])
@@ -92,24 +97,25 @@ const getQuestionsForVideo = (index: number): Question[] => {
       {
         id: 1,
         title: '',
-        description: '(单选)同一条街道,在不同时间拍摄,哪一张画面更适合表现"温暖、舒服的日常感"?',
+        description:
+          '(单选)同一条街道,在不同时间拍摄,哪一张画面更适合表现"温暖、舒服的日常感"?',
         options: [
           {
             id: 'a',
-            label: '正午直射光,阴影很硬,路面反光明显'
+            label: '正午直射光,阴影很硬,路面反光明显',
           },
           {
             id: 'b',
-            label: '傍晚低角度阳光,墙面被染成金色'
+            label: '傍晚低角度阳光,墙面被染成金色',
           },
           {
             id: 'c',
-            label: '夜晚路灯照明,光源复杂、色温混杂'
-          }
+            label: '夜晚路灯照明,光源复杂、色温混杂',
+          },
         ],
         correctOptionId: 'b',
-        explanation: '光线角度越低,画面柔和,情绪放大'
-      }
+        explanation: '光线角度越低,画面柔和,情绪放大',
+      },
     ]
   }
   return []
@@ -195,7 +201,12 @@ const handleQuestionsComplete = () => {
       @click="showStepNavigation = true"
       title="步骤导航"
     >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
@@ -243,9 +254,13 @@ const handleQuestionsComplete = () => {
 
     <!-- 引导与高亮 -->
 
-    <GuideSteps v-if="isGuide" position-offset-y="85%" @complete="handleComplete">
+    <GuideSteps
+      v-if="isGuide"
+      position-offset-y="85%"
+      @complete="handleComplete"
+    >
       <GuideStepsItem :audio-src="getPublicPath('audio/py_1_009.MP3')">
-        光是摄影的灵魂，摄影高手一定是用光的高手
+        光是摄影的灵魂，摄影高手一定是用光的高手。
       </GuideStepsItem>
       <GuideStepsItem :audio-src="getPublicPath('audio/py_1_010.MP3')">
         现在， 让我们一起去认识光、读懂光。