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

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

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

src/views/vlog/midterm-shooting/shooting/index.vue

@@ -1,24 +1,15 @@
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
-import { Overlay } from '@/components/Overlay'
 import { ImgButton } from '@/components/Button'
-import { Video } from '@/components/Video'
-import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+import { getBackgroundImage, getPublicPath } from '@/utils'
 import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
 import videoSrc from '/video/xinshou_jiuzhonggoutufa.mp4'
 import KnowledgeCard from '@/components/KnowledgeCard/KnowledgeCard.vue'
+import CompositionGuide from '@/components/CompositionGuide.vue'
 import { useVlogStore } from '@/stores/modules/vlog'
 
-type Btn = {
-  key: string
-  name: string
-  btnImage: string
-  images: string[]
-  desc: string
-}
-
 const router = useRouter()
 const vlogStore = useVlogStore()
 const guideKey = 'vlog-shooting-intro'
@@ -30,17 +21,7 @@ if (showIntroGuide.value) {
 
 const showModal = ref(false)
 
-const showModal2 = ref(false)
-const showModal3 = ref(false)
-const currentItem = ref<Btn>({
-  key: '',
-  name: '',
-  btnImage: '',
-  images: [],
-  desc: '',
-})
-
-const btnList = ref<Btn[]>([
+const btnList = ref([
   {
     key: '1',
     name: '居中构图',
@@ -64,30 +45,13 @@ const btnList = ref<Btn[]>([
   },
 ])
 
-const handleModalClose = () => {
-  showModal.value = false
-}
-
-const handleClick = (item: any) => {
-  currentItem.value = item
-  showModal2.value = true
-}
-const currentCompositionKey = computed(() => {
-  const k = currentItem.value.key
-  if (k === '1' || k === '2' || k === '3') return k
-  return '1'
-})
-
 const handleClickA = () => {
-  // 跳转设备准备
   router.push({ name: 'VlogFilmingLocationA' })
 }
 const handleClickB = () => {
-  // 跳转设备准备
   router.push({ name: 'VlogFilmingLocationB' })
 }
 const back = () => {
-  // 跳转设备准备
   router.back()
 }
 </script>
@@ -100,18 +64,20 @@ const back = () => {
         backgroundImage: getBackgroundImage('vlog/shooting/实地取景底图'),
       }"
     >
-      <div class="shooting-title">
+      <div class="absolute top-0 left-0">
         <img
           :src="shootingtitle"
           alt=""
         />
       </div>
-      <div class="shooting-return">
+
+      <div class="absolute top-0 right-0">
         <ImgButton
           image="shooting/返回.png"
           @click="back"
         />
       </div>
+
       <div class="absolute left-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
         <ImgButton
           image="vlog/shooting/热带植物馆-入口.png"
@@ -124,7 +90,7 @@ const back = () => {
           @click="handleClickB"
         />
       </div>
-      <div class="shooting-composition btn-1">
+      <div class="absolute bottom-4 left-4 btn-1">
         <ImgButton
           image="shooting/构图指南.png"
           @click="showModal = true"
@@ -145,118 +111,14 @@ const back = () => {
       </GuideStepsItem>
     </GuideSteps>
 
-    <!-- 保存图片弹窗 -->
-    <Overlay
+    <!-- 构图指南弹窗 -->
+    <CompositionGuide
       :visible="showModal"
-      :clickable="false"
-      :customStyle="{
-        backgroundImage: getBackgroundImage('shooting/构图指南底图'),
-      }"
-      customClass="inset-0 bg-cover bg-center bg-no-repeat"
-      contentClass="relative w-full h-full"
-    >
-      <!-- 返回 -->
-      <ImgButton
-        class="absolute right-0 top-0 z-10"
-        :image="IMAGE_PATHS.COMPONENTS.BACK"
-        @click="handleModalClose"
-      />
-
-      <!-- 构图指南 -->
-      <ImgButton
-        class="absolute left-0 top-0 z-10"
-        image="shooting/标题-构图指南"
-      />
-
-      <!-- 新手导航视频 -->
-      <ImgButton
-        class="absolute left-28 top-[calc(50%-40px)] -translate-y-1/2"
-        image="shooting/新手导航-视频回顾"
-        @click="showModal3 = true"
-      />
-
-      <div class="absolute top-[30%] right-10">
-        <ImgButton
-          v-for="item in btnList"
-          :key="item.key"
-          :image="item.btnImage"
-          @click="handleClick(item)"
-        />
-      </div>
-
-      <!-- 知识卡片 -->
-      <KnowledgeCard
-        v-if="showModal2 && currentItem.key"
-        :visible="showModal2"
-        :title="currentItem.name"
-        :desc="currentItem.desc"
-        :images="currentItem.images"
-        :compositionKey="currentCompositionKey"
-        @close="showModal2 = false"
-      />
-      <!-- 视频 -->
-      <Overlay
-        :visible="showModal3"
-        :clickable="false"
-      >
-        <Video
-          :src="videoSrc"
-          controls
-          :volume="1"
-          :muted="false"
-        ></Video>
-        <!-- 返回 -->
-        <ImgButton
-          class="absolute right-0 top-0 z-10"
-          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
-          @click="showModal3 = false"
-        />
-      </Overlay>
-    </Overlay>
+      bg-image="shooting/构图指南底图"
+      :btn-list="btnList"
+      :knowledge-card-component="KnowledgeCard"
+      :video-src="videoSrc"
+      @close="showModal = false"
+    />
   </div>
 </template>
-<style lang="less" scoped>
-.shooting-bg {
-  position: absolute;
-
-  .shooting-title {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .shooting-return {
-    position: absolute;
-    right: -90%;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .shooting-left {
-    position: absolute;
-    left: 16%;
-    top: 50%;
-    width: 100%;
-    height: 100%;
-  }
-
-  .shooting-right {
-    position: absolute;
-    right: -55%;
-    top: 50%;
-    width: 100%;
-    height: 100%;
-  }
-
-  .shooting-composition {
-    position: absolute;
-    left: 24px;
-    bottom: -90%;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>