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

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { Video } from '@/components'
 
 const router = useRouter()
@@ -53,11 +54,18 @@ const goContinuity = () => {
     <!-- 背景 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+      :style="{ backgroundImage: getBackgroundImage('film/after-editing/剪辑底图') }"
     ></div>
 
+    <!-- 标题 -->
+    <img
+      class="absolute left-0 top-6"
+      :src="getStaticImage('film/after-editing/剪辑标题')"
+      alt=""
+    />
+
     <!-- 视频播放区域 -->
-    <div v-if="!videoEnded" class="absolute inset-0 flex items-center justify-center">
+    <!-- <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"
@@ -72,10 +80,10 @@ const goContinuity = () => {
           @ended="handleVideoEnded"
         />
       </div>
-    </div>
+    </div> -->
 
     <!-- 内容卡片 + 按钮 -->
-    <div
+    <!-- <div
       v-if="videoEnded"
       class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none"
     >
@@ -84,7 +92,6 @@ const goContinuity = () => {
       >
         <div class="flex items-baseline justify-between gap-6">
           <h1 class="text-5xl font-extrabold tracking-wide">剪辑</h1>
-          <!-- <span class="text-3xl opacity-80">从不同维度练习你的剪辑技巧</span> -->
         </div>
         <p class="text-2xl leading-8 opacity-90">
           选择下面任意一个练习模块，进入对应的剪辑场景，按提示完成小任务，逐步建立自己的剪辑手感和创作节奏。
@@ -121,6 +128,26 @@ const goContinuity = () => {
           </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" />
     </div>
 
     <!-- 关闭 -->
@@ -129,6 +156,10 @@ const goContinuity = () => {
       :image="IMAGE_PATHS.COMPONENTS.BACK"
       @click="handleClose"
     />
+
+    <GuideSteps :visible="true" position-offset-y="85%">
+      <GuideStepsItem>选择任意图片按钮，进入对应拍摄场景！</GuideStepsItem>
+    </GuideSteps>
   </div>
 </template>