feat: 完善视频学习进度缓存

完善新手导航和三大创作模块的视频完成缓存、未完成提示与学习进度计算，确保进度按实际学习资源完成情况更新。

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

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

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { computed, nextTick, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { onBeforeRouteLeave, useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
 import StepNavigation from '@/components/Guide/StepNavigation.vue'
+import UnfinishedLearningPrompt from '@/components/UnfinishedLearningPrompt'
 import { Video } from '@/components'
 import QuestionQuiz, {
   type Question,
@@ -76,11 +77,35 @@ const navigationSteps = ref([
 
 // 步骤导航相关状态
 const showStepNavigation = ref(false)
+const showUnfinishedPrompt = ref(false)
+const pendingLeavePath = ref<string | null>(null)
+const allowRouteLeave = ref(false)
 const currentNavigationStep = ref(0) // 对应视频索引，从0开始
 
 // 视频列表
 const currentVideoIndex = ref(0)
 
+const getLearningVideoKey = (index: number) =>
+  `basic-light:${navigationSteps.value[index]?.id ?? index}`
+
+const completedNavigationSteps = computed(() =>
+  navigationSteps.value.map(
+    (_, index) =>
+      basicElementsStore.learningVideosWatched[getLearningVideoKey(index)] ===
+      true,
+  ),
+)
+
+const hasUnfinishedLearningVideos = computed(() =>
+  completedNavigationSteps.value.some((completed) => !completed),
+)
+
+const markCurrentLearningVideoWatched = () => {
+  basicElementsStore.markLearningVideoWatched(
+    getLearningVideoKey(currentVideoIndex.value),
+  )
+}
+
 //按顺序播放
 const currentVideo = computed(
   () => navigationSteps.value[currentVideoIndex.value].videoUrl,
@@ -98,7 +123,7 @@ const getQuestionsForVideo = (index: number): Question[] => {
         id: 1,
         title: '',
         description:
-          '(单选)同一条街道,在不同时间拍摄,哪一张画面更适合表现"温暖、舒服的日常感"?',
+          '【单选题】同一条街道,在不同时间拍摄,哪一张画面更适合表现"温暖、舒服的日常感"?',
         options: [
           {
             id: 'a',
@@ -153,6 +178,8 @@ const handlePlay = () => {
 }
 
 const onEnded = () => {
+  markCurrentLearningVideoWatched()
+
   // 检查是否是"拍摄的黄金时间"（index 2）
   if (currentVideoIndex.value === 2) {
     // 暂停播放并显示答题窗口
@@ -186,6 +213,25 @@ const handleQuestionsComplete = () => {
   // 答题完成后继续播放下一个视频
   handleVideoChange()
 }
+
+const handleContinueLearning = () => {
+  showUnfinishedPrompt.value = false
+  pendingLeavePath.value = null
+}
+
+const handleConfirmLeave = () => {
+  if (!pendingLeavePath.value) return
+  allowRouteLeave.value = true
+  showUnfinishedPrompt.value = false
+  router.push(pendingLeavePath.value)
+}
+
+onBeforeRouteLeave((to) => {
+  if (allowRouteLeave.value || !hasUnfinishedLearningVideos.value) return true
+  pendingLeavePath.value = to.fullPath
+  showUnfinishedPrompt.value = true
+  return false
+})
 </script>
 
 <template>
@@ -248,10 +294,17 @@ const handleQuestionsComplete = () => {
       :background-image="getStaticImage('work/vlog背景全屏待定')"
       :steps="navigationSteps"
       :current-step-index="currentNavigationStep"
+      :completed-steps="completedNavigationSteps"
       @step-click="handleStepClick"
       @close="handleStepNavigationClose"
     />
 
+    <UnfinishedLearningPrompt
+      :visible="showUnfinishedPrompt"
+      @continue="handleContinueLearning"
+      @leave="handleConfirmLeave"
+    />
+
     <!-- 引导与高亮 -->
 
     <GuideSteps