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

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

@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { useFilmStore } from '@/stores'
+
+const film = useFilmStore()
 
 const router = useRouter()
 
 const handleClose = () => {
+  film.setFilmUnlockProgress(3)
   router.back()
 }
 
@@ -39,11 +44,46 @@ const goRandom = () => {
     <!-- 背景 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+      :style="{ backgroundImage: getBackgroundImage('film/on-site/现场拍摄') }"
     ></div>
 
+    <!-- 标题 -->
+    <img class="absolute left-0 top-0" :src="getStaticImage('film/on-site/标题.png')" alt="" />
+
+    <div
+      class="absolute left-[100px] top-[210px] w-[446px] h-[273px] bg-cover bg-center bg-no-repeat"
+    >
+      <ImgButton :image="'film/on-site/延时拍摄'" @click="goTimeLapse" />
+    </div>
+    <div
+      class="absolute left-[640px] top-[240px] w-[541px] h-[273px] bg-cover bg-center bg-no-repeat"
+    >
+      <ImgButton :image="'film/on-site/滑轨拍摄'" @click="goSlider" />
+    </div>
+    <div
+      class="absolute right-[0px] top-[220px] w-[541px] h-[273px] bg-cover bg-center bg-no-repeat"
+    >
+      <ImgButton :image="'film/on-site/慢门拍摄-白天'" @click="goSlowShutterDay" />
+    </div>
+    <div
+      class="absolute right-[0px] bottom-[160px] w-[541px] h-[273px] bg-cover bg-center bg-no-repeat"
+    >
+      <ImgButton :image="'film/on-site/慢门拍摄-夜间.png'" @click="goSlowShutterNight" />
+    </div>
+
+    <div
+      class="absolute left-[100px] bottom-[80px] w-[446px] h-[273px] bg-cover bg-center bg-no-repeat"
+    >
+      <ImgButton :image="'film/on-site/低角度拍摄'" @click="goLowAngle" />
+    </div>
+    <div
+      class="absolute left-[700px] bottom-[40px] w-[446px] h-[273px] bg-cover bg-center bg-no-repeat"
+    >
+      <ImgButton :image="'film/on-site/创作随机性'" @click="goRandom" />
+    </div>
+
     <!-- 内容卡片 + 按钮 -->
-    <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
+    <!-- <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
       <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"
       >
@@ -87,7 +127,7 @@ const goRandom = () => {
           </button>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <!-- 关闭 -->
     <ImgButton
@@ -96,6 +136,10 @@ const goRandom = () => {
       @click="handleClose"
     />
   </div>
+
+  <GuideSteps :visible="true" position-offset-y="85%">
+    <GuideStepsItem>选择任意图片按钮，进入对应拍摄场景！</GuideStepsItem>
+  </GuideSteps>
 </template>
 
 <style scoped>