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

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

src/views/basic-elements/basic-shooting-skills/index.vue

@@ -2,8 +2,12 @@
 import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { StepNavigation, GuideSteps, GuideStepsItem } from '@/components/Guide'
-import { Video, QuestionQuiz, type Question } from '@/components'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+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 { useBasicElementsStore } from '@/stores/modules/basic-elements'
 
@@ -27,44 +31,48 @@ const rawSteps = [
     id: 'step2',
     label: '摄影基础',
     content: '手机摄像头介绍',
-    videoUrl: getPublicPath('video/new/shooting-skills/xinshou_shoujishexiangtoujieshao.mp4'),
-    type: 'post' as const
+    videoUrl: getPublicPath(
+      'video/new/shooting-skills/xinshou_shoujishexiangtoujieshao.mp4',
+    ),
+    type: 'post' as const,
   },
   {
     id: 'step3',
     label: '摄影基础',
     content: '景别概念介绍',
     videoUrl: getPublicPath('video/new/shooting-skills/xsdh_jbgnjs_batch.mp4'),
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step4',
     label: '摄影基础',
     content: '手机慢动作',
     videoUrl: getPublicPath('video/new/shooting-skills/xsdh_sjmdz_batch.mp4'),
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step5',
     label: '摄影基础',
     content: '延时摄影',
     videoUrl: getPublicPath('video/new/shooting-skills/xsdh_yssy_batch.mp4'),
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step6',
     label: '摄影基础',
     content: '神奇的微距摄影',
     videoUrl: getPublicPath('video/new/shooting-skills/xsdh_sqdwjsy_batch.mp4'),
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step7',
     label: '摄影基础',
     content: '独具魅力的夜景摄影',
-    videoUrl: getPublicPath('video/new/shooting-skills/xsdh_djmldyjsy_batch.mp4'),
-    type: 'post' as const
-  }
+    videoUrl: getPublicPath(
+      'video/new/shooting-skills/xsdh_djmldyjsy_batch.mp4',
+    ),
+    type: 'post' as const,
+  },
 ]
 
 const navigationSteps = ref(rawSteps)
@@ -77,7 +85,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 1）、手机慢动作（index 2）、独具魅力的夜景摄影（index 5）
 const questions = ref<Question[]>([])
@@ -90,24 +100,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: 'c',
-        explanation: '全景更适合交代故事发生在哪里。'
-      }
+        explanation: '全景更适合交代故事发生在哪里。',
+      },
     ]
   }
 
@@ -117,30 +128,32 @@ const getQuestionsForVideo = (index: number): Question[] => {
       {
         id: 2,
         title: '',
-        description: '（多选题）下面这些拍摄场景中，哪些更适合使用"慢动作"来表现？',
+        description:
+          '（多选题）下面这些拍摄场景中，哪些更适合使用"慢动作"来表现？',
         options: [
           {
             id: 'a',
-            label: '城市街道上车水马龙，车辆快速穿行'
+            label: '城市街道上车水马龙，车辆快速穿行',
           },
           {
             id: 'b',
-            label: '甩头发、转身、跳跃等人物动作瞬间'
+            label: '甩头发、转身、跳跃等人物动作瞬间',
           },
           {
             id: 'c',
-            label: '水花飞溅、雨滴落地、浪花拍岸'
+            label: '水花飞溅、雨滴落地、浪花拍岸',
           },
           {
             id: 'd',
-            label: '风吹动衣摆、窗帘或树叶缓慢摆动'
-          }
+            label: '风吹动衣摆、窗帘或树叶缓慢摆动',
+          },
         ],
         isMultiple: true,
         correctOptionIds: ['b', 'c', 'd'],
         correctOptionId: '', // 多选题时此字段不使用
-        explanation: '更适合用慢动作表现的是 B、C、D，它们都包含了"瞬间细节"和"节奏变化"。'
-      }
+        explanation:
+          '更适合用慢动作表现的是 B、C、D，它们都包含了"瞬间细节"和"节奏变化"。',
+      },
     ]
   }
 
@@ -154,20 +167,20 @@ const getQuestionsForVideo = (index: number): Question[] => {
         options: [
           {
             id: 'a',
-            label: '哪里好看就拍哪里'
+            label: '哪里好看就拍哪里',
           },
           {
             id: 'b',
-            label: '设备越贵，画面越好'
+            label: '设备越贵，画面越好',
           },
           {
             id: 'c',
-            label: '在合适的时间，用合适的方式拍'
-          }
+            label: '在合适的时间，用合适的方式拍',
+          },
         ],
         correctOptionId: 'c',
-        explanation: '拍摄要学会判断时间、光线和方式。'
-      }
+        explanation: '拍摄要学会判断时间、光线和方式。',
+      },
     ]
   }
 
@@ -252,7 +265,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"