feat: 完善课程学习与技能树体验

完善课程资源、学习进度与技能树解锁体验，统一视频播放与引导相关交互。

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/views/basic-elements/camera-movement/index.vue

@@ -5,7 +5,12 @@ import ImgButton from '@/components/Button/ImgButton.vue'
 import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import UnfinishedLearningPrompt from '@/components/UnfinishedLearningPrompt'
 import { Video } from '@/components'
-import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+import {
+  getPublicPath,
+  getStaticImage,
+  IMAGE_PATHS,
+  getVideoPoster,
+} from '@/utils'
 // 运镜初识 - 暂时用运镜的基本方式代替
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { useBasicElementsStore } from '@/stores/modules/basic-elements'
@@ -123,10 +128,7 @@ const handleVideoChange = () => {
     return
   }
 
-  nextTick(() => {
-    // 使用受控播放来触发下一个视频自动播放
-    playing.value = true
-  })
+  playing.value = true
 }
 
 const handleClose = () => {
@@ -146,9 +148,7 @@ const onEnded = () => {
 const handleStepClick = (index: number) => {
   currentVideoIndex.value = index
   currentNavigationStep.value = index
-  nextTick(() => {
-    playing.value = true
-  })
+  playing.value = true
 }
 
 const handleStepNavigationClose = () => {
@@ -205,6 +205,7 @@ onBeforeRouteLeave((to) => {
 
     <Video
       :src="currentVideo"
+      :poster="getVideoPoster(currentVideo)"
       v-model="playing"
       :muted="false"
       :volume="1"
@@ -226,7 +227,6 @@ onBeforeRouteLeave((to) => {
     <!-- 步骤导航抽屉 -->
     <StepNavigation
       :visible="showStepNavigation"
-      :background-image="getStaticImage('work/vlog背景全屏待定')"
       :steps="navigationSteps"
       :current-step-index="currentNavigationStep"
       :completed-steps="completedNavigationSteps"
@@ -262,7 +262,7 @@ onBeforeRouteLeave((to) => {
         当我们将画面稳定之后，就来到了镜头语言。
       </GuideStepsItem>
       <GuideStepsItem :audio-src="getPublicPath('audio/py_1_017.MP3')">
-        同一个场景，用不同运镜，表达就不一样。跟着我，去了解5种基础运镜吧~
+        同一个场景，用不同运镜，表达就不一样。跟着我，去了解5种基础运镜吧！
       </GuideStepsItem>
     </GuideSteps>
   </div>