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

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

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

@@ -2,7 +2,7 @@
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { StepNavigation } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import { Video } from '@/components'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
@@ -32,15 +32,15 @@ const navigationSteps = ref([
     label: '视觉素养',
     content: '如何选择构图',
     videoUrl: getPublicPath('video/new/composition/xsdh_rhxzgt_batch.mp4'),
-    type: 'planning' as const
+    type: 'planning' as const,
   },
   {
     id: 'step2',
     label: '视觉素养',
     content: '九种经典构图方式',
     videoUrl: getPublicPath('video/new/composition/xsdh_jzgtf_batch.mp4'),
-    type: 'planning' as const
-  }
+    type: 'planning' as const,
+  },
 ])
 
 // 步骤导航相关状态
@@ -51,7 +51,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,
+)
 const handleVideoChange = () => {
   if (currentVideoIndex.value < navigationSteps.value.length - 1) {
     currentVideoIndex.value++
@@ -115,7 +117,12 @@ onMounted(() => {})
       @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"
@@ -180,7 +187,12 @@ onMounted(() => {})
               class="w-10 h-10 bg-blue-500/80 hover:bg-blue-500 rounded-full inline-flex items-center justify-center text-white transition-all duration-200"
               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"