feat: 添加思维导图支持，更新引导步骤组件，优化视频播放与学习进度追踪功能

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

@@ -4,10 +4,14 @@ import { useRouter } from 'vue-router'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { Overlay } from '@/components/Overlay'
 import { ImgButton } from '@/components/Button'
-import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
 import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
-import videoSrc from '/video/xinshou_jiuzhonggoutufa.mp4'
+import videoSrc from '/video/new/xsdh_jzgtf_batch.mp4'
 import KnowledgeCard from '@/components/KnowledgeCard/FilmKnowledgeCard.vue'
+import { Video } from '@/components'
+import { useFilmStore } from '@/stores'
+
+const film = useFilmStore()
 
 type Btn = {
   key: string
@@ -19,6 +23,58 @@ type Btn = {
 
 const router = useRouter()
 
+const steps = ref([
+  {
+    id: '1',
+    content: '哇，徐汇滨江真的超适合取景！一起看看可以运用哪些构图方法吧~',
+    highlightSelector: '.btn-1'
+  },
+  {
+    id: '2',
+    content: '跟随箭头指引，一键解锁取景地',
+    highlightSelector: '.btn-2'
+  },
+  {
+    id: '3',
+    content: '跟随箭头指引，一键解锁取景地',
+    highlightSelector: '.btn-3'
+  }
+])
+
+const currentIdx = ref<number>(0)
+const handleStepChange = (_: any, index: number) => {
+  currentIdx.value = index
+}
+
+const currentHighlight = computed(() => {
+  return steps.value[currentIdx.value]?.highlightSelector
+})
+
+const guideSteps = ref([
+  {
+    id: '1',
+    content: '点击框架构图，查看构图方法',
+    highlightSelector: '.btn-item-1'
+  },
+  {
+    id: '2',
+    content: '点击对称构图，查看构图方法',
+    highlightSelector: '.btn-item-2'
+  },
+  {
+    id: '3',
+    content: '点击引导线构图，查看构图方法',
+    highlightSelector: '.btn-item-3'
+  }
+])
+const currentIndex = ref<number>(0)
+const handleGuideStepChange = (_: any, index: number) => {
+  currentIndex.value = index
+}
+const currentHighlightSelector = computed(() => {
+  return guideSteps.value[currentIndex.value ?? 0]?.highlightSelector
+})
+
 const showModal = ref(false)
 
 const showModal2 = ref(false)
@@ -34,24 +90,24 @@ const currentItem = ref<Btn>({
 const btnList = ref<Btn[]>([
   {
     key: '1',
-    name: '引导线构图',
+    name: '框架构图',
     btnImage: 'film/shooting/框架构图',
-    desc: '引导线构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用',
-    images: ['film/shooting/05引导线构图_底图', 'film/shooting/06引导线构图_底图']
+    desc: '框架构图是拍摄时用“框架”把主体框起来，可以让画面更加有空间感及层次感，并且使用也并不复杂，比如镜子、门窗、山洞等，也可以说是光影框等。',
+    images: ['film/shooting/01框架构图_底图', 'film/shooting/02框架构图_底图']
   },
   {
     key: '2',
     name: '对称构图',
     btnImage: 'film/shooting/对称构图',
-    desc: '对称构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调',
+    desc: '对称构图是通过画面中轴线（水平 / 垂直）两侧元素镜像分布的构图方式，属于平衡类构图。它借对称的视觉均衡感，让画面显规整、稳定，同时强化主体秩序与美感。拍摄可找天然对称景物（如建筑、倒影），或调整角度让元素对称；略有不对称可后期微调，适合展现建筑、对称静物等规整场景。',
     images: ['film/shooting/03对称构图_底图', 'film/shooting/04对称构图_底图']
   },
   {
     key: '3',
-    name: '框架构图',
+    name: '引导线构图',
     btnImage: 'film/shooting/引导线构图',
-    desc: '框架构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。',
-    images: ['film/shooting/01框架构图_底图', 'film/shooting/02框架构图_底图']
+    desc: '引导线构图的关键在于引导线，借助环境中的引导线，把观者注意力集中到引导线上，营造画面纵深效果，我们日常拍摄中常见的引导线有:马路及其延伸(马路线、栏杆、走廊)',
+    images: ['film/shooting/05引导线构图_底图', 'film/shooting/06引导线构图_底图']
   }
 ])
 
@@ -78,6 +134,7 @@ const handleClickB = () => {
   router.push({ name: 'FilmFilmingLocationB' })
 }
 const back = () => {
+  film.setFilmUnlockProgress(3)
   // 跳转设备准备
   router.back()
 }
@@ -87,7 +144,7 @@ const back = () => {
     <!-- 背景图片 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+      :style="{ backgroundImage: getBackgroundImage('film/shooting/底图') }"
     ></div>
 
     <div class="shooting-title">
@@ -97,24 +154,25 @@ const back = () => {
       <ImgButton image="shooting/返回.png" @click="back" />
     </div>
     <div class="absolute left-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
-      <ImgButton image="film/shooting/龙美术馆入口.png" @click="handleClickA" />
+      <ImgButton class="btn-2" image="film/shooting/龙美术馆入口.png" @click="handleClickA" />
     </div>
     <div class="absolute right-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
-      <ImgButton image="film/shooting/油罐艺术公园入口.png" @click="handleClickB" />
+      <ImgButton class="btn-3" image="film/shooting/油罐艺术公园入口.png" @click="handleClickB" />
     </div>
-    <div class="shooting-composition">
+    <div class="shooting-composition btn-1">
       <ImgButton image="shooting/构图指南.png" @click="showModal = true" />
     </div>
 
     <!-- 引导步骤 -->
     <GuideSteps
-      :highlight-selector="'.mybutton'"
+      :visible="true"
+      :steps="steps"
+      :highlight-selector="currentHighlight"
       :highlight-padding="12"
       :highlight-radius="20"
-      position-offset-y="85%"
-    >
-      <GuideStepsItem> 哇，徐汇滨江真的超适合取景！一起看看可以运用哪些构图方法吧~ </GuideStepsItem>
-    </GuideSteps>
+      position-offset-y="20%"
+      @step-change="handleStepChange"
+    />
 
     <!-- 保存图片弹窗 -->
     <Overlay
@@ -137,21 +195,38 @@ const back = () => {
       <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 left-28 top-[calc(50%-40px)] -translate-y-1/2">
+        <ImgButton image="shooting/新手导航-视频回顾" @click="showModal3 = true" />
+        <div
+          class="absolute left-[40%] top-[42%] -translate-x-1/2 -translate-y-1/2 z-10 animate-bounce pointer-events-none"
+        >
+          <img class="w-32" :src="getStaticImage('work/小手')" alt="" />
+          <span class="text-white text-2xl font-bold ml-5">点击进入</span>
+        </div>
+      </div>
 
       <div class="absolute top-[30%] right-10">
         <ImgButton
           v-for="item in btnList"
           :key="item.key"
+          :class="`btn-item-${item.key}`"
           :image="item.btnImage"
           @click="handleClick(item)"
         />
       </div>
 
+      <GuideSteps
+        :visible="true"
+        :steps="guideSteps"
+        :keyboard-navigation="true"
+        :highlight-selector="currentHighlightSelector"
+        :highlight-padding="12"
+        :highlight-radius="16"
+        position-offset-y="85%"
+        @step-change="handleGuideStepChange"
+        @complete="currentIndex = 0"
+      />
+
       <!-- 知识卡片 -->
       <KnowledgeCard
         v-if="showModal2 && currentItem.key"
@@ -164,7 +239,7 @@ const back = () => {
       />
       <!-- 视频 -->
       <Overlay :visible="showModal3" :clickable="false">
-        <video :src="videoSrc" controls></video>
+        <Video :src="videoSrc" controls :volume="1" :muted="false"></Video>
         <!-- 返回 -->
         <ImgButton
           class="absolute right-0 top-0 z-10"