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

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

src/views/interview/video/index.vue

@@ -2,7 +2,8 @@
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { GuideSteps, StepNavigation, type GuideStep } from '@/components/Guide'
+import { GuideSteps, type GuideStep } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import { Video } from '@/components'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { useInterviewStore } from '@/stores'
@@ -21,8 +22,9 @@ const steps = ref<GuideStep[]>([
   {
     id: 'step1',
     audioSrc: getPublicPath('audio/py_3_006.MP3'),
-    content: '刚才我们学习了访谈作品的核心拍摄技能，现在通过这张思维导图来回顾一下吧！'
-  }
+    content:
+      '刚才我们学习了访谈作品的核心拍摄技能，现在通过这张思维导图来回顾一下吧！',
+  },
 ])
 
 const introGuideSteps = computed<GuideStep[]>(() => {
@@ -31,8 +33,8 @@ const introGuideSteps = computed<GuideStep[]>(() => {
       {
         id: 'case-intro',
         audioSrc: getPublicPath('audio/py_3_003.MP3'),
-        content: '现在，让我们通过一段访谈案例，去看看同龄人心中的职业蓝图吧！'
-      }
+        content: '现在，让我们通过一段访谈案例，去看看同龄人心中的职业蓝图吧！',
+      },
     ]
   }
 
@@ -41,13 +43,14 @@ const introGuideSteps = computed<GuideStep[]>(() => {
       {
         id: 'profession-intro1',
         audioSrc: getPublicPath('audio/py_3_004.MP3'),
-        content: '看完作品后，你可能已经感受到了，一条访谈视频，好像并不是“坐着讲话”这么简单。'
+        content:
+          '看完作品后，你可能已经感受到了，一条访谈视频，好像并不是“坐着讲话”这么简单。',
       },
       {
         id: 'profession-intro2',
         audioSrc: getPublicPath('audio/py_3_005.MP3'),
-        content: '那么，让我们一起来拆解访谈作品的核心技能吧！'
-      }
+        content: '那么，让我们一起来拆解访谈作品的核心技能吧！',
+      },
     ]
   }
 
@@ -67,29 +70,29 @@ const navigationSteps = ref([
     label: '拍摄执行',
     content: '机位设置',
     videoUrl: getPublicPath('video/interview/work/ftmk_jwsz_batch.mp4'),
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'step2',
     label: '拍摄执行',
     content: '轴线原则',
     videoUrl: getPublicPath('video/interview/work/ftmk_zxyz_batch.mp4'),
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'step3',
     label: '内容策划',
     content: '镜头组接逻辑',
     videoUrl: getPublicPath('video/interview/work/ftmk_jtzjlj_batch.mp4'),
-    type: 'planning' as const
+    type: 'planning' as const,
   },
   {
     id: 'step4',
     label: '拍摄执行',
     content: '声音同步与收录',
     videoUrl: getPublicPath('video/interview/work/ftmk_sytbysl_batch.mp4'),
-    type: 'shooting' as const
-  }
+    type: 'shooting' as const,
+  },
 ])
 
 // 步骤导航相关状态
@@ -100,7 +103,9 @@ const currentNavigationStep = ref(1) // 对应视频索引，从0开始
 const currentVideoIndex = ref(0)
 
 //按顺序播放
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 const resolvedSrc = computed(() => {
   if (key.value === 'case') return '/video/interview/work/ft_zylt.mp4'
   if (key.value === 'profession') return currentVideo.value
@@ -131,7 +136,7 @@ const handleClose = () => {
     interview.setInterviewUnlockProgress(1)
     router.push({
       name: 'Interview',
-      query: { guide: 'return' }
+      query: { guide: 'return' },
     })
     return
   }
@@ -153,7 +158,7 @@ const handleComplete = () => {
   if (key.value === 'profession') {
     if (!interview.isInterviewUnlock) interview.setIsInterviewUnlock(true)
     router.push({
-      name: 'InterviewWork'
+      name: 'InterviewWork',
     })
   }
 }
@@ -179,7 +184,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="w-full h-full relative bg-white/10" @click="handleClick">
+  <div
+    class="w-full h-full relative bg-white/10"
+    @click="handleClick"
+  >
     <template v-if="key !== 'case' && key !== 'profession'">
       <ImgButton
         class="absolute right-0 top-0 z-10"
@@ -194,7 +202,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"
@@ -204,8 +217,14 @@ onMounted(() => {
       </svg>
     </button>
 
-    <div v-if="key === 'vlog'" :src="image">
-      <img :src="getStaticImage('work/vlog背景全屏待定')" alt="" />
+    <div
+      v-if="key === 'vlog'"
+      :src="image"
+    >
+      <img
+        :src="getStaticImage('work/vlog背景全屏待定')"
+        alt=""
+      />
     </div>
     <Video
       v-else-if="key === 'case' || key === 'profession'"
@@ -226,8 +245,14 @@ onMounted(() => {
         />
       </template>
     </Video>
-    <div v-else-if="key === 'idea'" :src="image">
-      <img :src="getStaticImage('interview/work/思路提点全屏')" alt="" />
+    <div
+      v-else-if="key === 'idea'"
+      :src="image"
+    >
+      <img
+        :src="getStaticImage('interview/work/思路提点全屏')"
+        alt=""
+      />
     </div>
   </div>
 
@@ -241,7 +266,12 @@ onMounted(() => {
   />
 
   <!-- 引导与高亮 -->
-  <GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" />
+  <GuideSteps
+    v-if="status"
+    :steps="steps"
+    position-offset-y="85%"
+    @complete="handleComplete"
+  />
 
   <!-- 步骤导航抽屉 -->
   <StepNavigation