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

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

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

src/views/film/after-editing/editing/index.vue

@@ -1,31 +1,68 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  getStaticImage,
+  IMAGE_PATHS,
+} from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { GuideSteps, type GuideStep } from '@/components/Guide'
-import { Video } from '@/components'
 import { useFilmStore } from '@/stores'
 
 const router = useRouter()
 const film = useFilmStore()
 
+const completionIcon = (completed: boolean) =>
+  getStaticImage(`midterm/${completed ? '完成' : '未完成'}.png`)
+
+const editingItems = computed(() => [
+  {
+    image: 'film/after-editing/剪辑初始',
+    videoKey: 'start',
+    onClick: goStart,
+    class:
+      'absolute left-[0px] bottom-[42%] translate-y-1/2 bg-cover bg-center bg-no-repeat',
+  },
+  {
+    image: 'film/after-editing/节奏型剪辑',
+    videoKey: 'rhythm',
+    onClick: goRhythm,
+    class: 'absolute right-[0px] top-[160px] bg-cover bg-center bg-no-repeat',
+  },
+  {
+    image: 'film/after-editing/声音转场',
+    videoKey: 'soundTransition',
+    onClick: goSoundTransition,
+    class: 'absolute right-[42px] top-[410px] bg-cover bg-center bg-no-repeat',
+  },
+  {
+    image: 'film/after-editing/快切',
+    videoKey: 'cut',
+    onClick: goCut,
+    class: 'absolute right-[520px] top-[580px] bg-cover bg-center bg-no-repeat',
+  },
+  {
+    image: 'film/after-editing/关联剪辑',
+    videoKey: 'association',
+    onClick: goAssociation,
+    class:
+      'absolute right-[42px] bottom-[270px] bg-cover bg-center bg-no-repeat',
+  },
+  {
+    image: 'film/after-editing/连续剪辑',
+    videoKey: 'continuity',
+    onClick: goContinuity,
+    class:
+      'absolute right-[42px] bottom-[16px] bg-cover bg-center bg-no-repeat',
+  },
+])
+
 const handleClose = () => {
   router.back()
 }
 
-// 剪辑介绍视频 URL（暂时用其他视频代替）
-const introVideoUrl = getPublicPath('video/on-site/xianchangpaishe_yanshipaishe.mp4')
-
-// 视频播放状态
-const videoEnded = ref(true)
-const videoPlaying = ref(false)
-
-// 视频播放完成
-const handleVideoEnded = () => {
-  videoEnded.value = true
-}
-
 const goStart = () => {
   router.push({ name: 'FilmEditingStart' })
 }
@@ -56,20 +93,20 @@ const editingCompleteSteps: GuideStep[] = [
     id: 'editing-complete-step1',
     content:
       '刚才我们提到的剪辑方式，并不是孤立存在的技巧，而是针对不同问题的解决方案。所以，理解剪辑逻辑才是最重要的！',
-    audioSrc: getPublicPath('audio/py_4_018.MP3')
-  }
+    audioSrc: getPublicPath('audio/py_4_018.MP3'),
+  },
 ]
 
 const showEditingCompleteGuide = ref(false)
 
 watch(
   () => film.allEditingVideosWatched,
-  watched => {
+  (watched) => {
     if (watched && film.isGuideFilmEditingComplete) {
       showEditingCompleteGuide.value = true
     }
   },
-  { immediate: true }
+  { immediate: true },
 )
 
 const handleEditingCompleteGuideDone = () => {
@@ -83,7 +120,9 @@ const handleEditingCompleteGuideDone = () => {
     <!-- 背景 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage('film/after-editing/剪辑底图') }"
+      :style="{
+        backgroundImage: getBackgroundImage('film/after-editing/剪辑底图'),
+      }"
     ></div>
 
     <!-- 标题 -->
@@ -93,90 +132,20 @@ const handleEditingCompleteGuideDone = () => {
       alt=""
     />
 
-    <!-- 视频播放区域 -->
-    <!-- <div v-if="!videoEnded" class="absolute inset-0 flex items-center justify-center">
-      <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
-        <Video
-          class="w-full h-full"
-          :src="introVideoUrl"
-          v-model="videoPlaying"
-          :muted="false"
-          :volume="1"
-          :controls="true"
-          :hideNativeControls="true"
-          :autoplay="true"
-          :show-center-play-icon="true"
-          @ended="handleVideoEnded"
-        />
-      </div>
-    </div> -->
-
-    <!-- 内容卡片 + 按钮 -->
-    <!-- <div
-      v-if="videoEnded"
-      class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none"
+    <div
+      v-for="item in editingItems"
+      :key="item.videoKey"
+      :class="item.class"
     >
-      <div
-        class="max-w-screen-2xl w-full bg-black/35 rounded-3xl border border-white/15 p-16 space-y-10 text-white pointer-events-auto"
-      >
-        <div class="flex items-baseline justify-between gap-6">
-          <h1 class="text-5xl font-extrabold tracking-wide">剪辑</h1>
-        </div>
-        <p class="text-2xl leading-8 opacity-90">
-          选择下面任意一个练习模块，进入对应的剪辑场景，按提示完成小任务，逐步建立自己的剪辑手感和创作节奏。
-        </p>
-
-        <div class="grid grid-cols-3 gap-10">
-          <button type="button" class="onsite-btn" @click="goStart">
-            <span class="onsite-btn-title">剪辑从哪里开始</span>
-            <span class="onsite-btn-desc">通过不同的剪辑起点，营造不同的叙事效果。</span>
-          </button>
-          <button type="button" class="onsite-btn" @click="goRhythm">
-            <span class="onsite-btn-title">节奏型剪辑</span>
-            <span class="onsite-btn-desc">通过剪辑节奏控制画面节奏，营造紧张感或舒缓感。</span>
-          </button>
-
-          <button type="button" class="onsite-btn" @click="goSoundTransition">
-            <span class="onsite-btn-title">声音转场</span>
-            <span class="onsite-btn-desc">利用相似声音连接不同场景，实现自然的转场效果。</span>
-          </button>
-
-          <button type="button" class="onsite-btn" @click="goCut">
-            <span class="onsite-btn-title">快切</span>
-            <span class="onsite-btn-desc">通过精准的切块技巧，提升画面的节奏感和连贯性。</span>
-          </button>
-
-          <button type="button" class="onsite-btn" @click="goAssociation">
-            <span class="onsite-btn-title">关联剪辑</span>
-            <span class="onsite-btn-desc">通过画面元素的关联性，建立场景之间的逻辑联系。</span>
-          </button>
-
-          <button type="button" class="onsite-btn" @click="goContinuity">
-            <span class="onsite-btn-title">连续剪辑</span>
-            <span class="onsite-btn-desc">保持动作和空间的连续性，让画面过渡更加自然流畅。</span>
-          </button>
-        </div>
-      </div>
-    </div> -->
-
-    <div class="absolute left-[0px] bottom-[42%] translate-y-1/2 bg-cover bg-center bg-no-repeat">
-      <ImgButton :image="'film/after-editing/剪辑初始'" @click="goStart" />
-    </div>
-    <div class="absolute right-[0px] top-[160px] bg-cover bg-center bg-no-repeat">
-      <ImgButton :image="'film/after-editing/节奏型剪辑'" @click="goRhythm" />
-    </div>
-    <div class="absolute right-[42px] top-[410px] bg-cover bg-center bg-no-repeat">
-      <ImgButton :image="'film/after-editing/声音转场'" @click="goSoundTransition" />
-    </div>
-    <div class="absolute right-[520px] top-[580px] bg-cover bg-center bg-no-repeat">
-      <ImgButton :image="'film/after-editing/快切'" @click="goCut" />
-    </div>
-    <div class="absolute right-[42px] bottom-[270px] bg-cover bg-center bg-no-repeat">
-      <ImgButton :image="'film/after-editing/关联剪辑'" @click="goAssociation" />
-    </div>
-
-    <div class="absolute right-[42px] bottom-[16px] bg-cover bg-center bg-no-repeat">
-      <ImgButton :image="'film/after-editing/连续剪辑'" @click="goContinuity" />
+      <ImgButton
+        :image="item.image"
+        @click="item.onClick"
+      />
+      <img
+        class="pointer-events-none absolute left-0 top-0 z-10 h-12 w-12"
+        :src="completionIcon(film.editingVideosWatched[item.videoKey] === true)"
+        alt=""
+      />
     </div>
 
     <!-- 关闭 -->