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

src/views/film/work/index.vue

@@ -35,7 +35,7 @@ const sideSwitcherItems = ref([
     key: 'profession',
     name: '专业剖析',
     description: '物件春秋-上海钟表文化科普馆',
-    image: 'film/案件赏析小屏'
+    image: 'film/专业剖析'
   },
   {
     key: 'idea',
@@ -54,11 +54,7 @@ const currentHighlight = computed(() =>
   stepIndex.value === 0 ? '.img-switch-item--case' : '.work-border'
 )
 
-interface SimpleStep {
-  id: string
-  content: string
-}
-const handleStepChange = (_step: SimpleStep | null, index: number) => {
+const handleStepChange = (_: any, index: number) => {
   stepIndex.value = index
 }
 
@@ -84,7 +80,7 @@ const handleClose = () => {
 
 const handleWorkClick = () => {
   if (!isFilmUnlock.value) return
-  openImages([getStaticImage('work/桂花酒酿小圆子')])
+  openImages([getStaticImage('film/paishejiaoben')])
 }
 const handleGuideComplete = () => {
   film.setIsGuideFilmTask(false)
@@ -127,6 +123,22 @@ function openImages(urls: string[], startIndex = 0) {
       class="work-border absolute top-[140px] left-24 inset-0 bg-cover bg-center bg-no-repeat z-10 w-[1360px] h-[800px] p-10"
       :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.BORDER) }"
     >
+      <div class="relative w-full h-full">
+        <!-- 图片 -->
+        <img
+          @click="handleImageClick"
+          class="rounded-[62px] cursor-pointer"
+          :src="getStaticImage(currentItem?.image || '')"
+          alt=""
+        />
+        <!-- 手 -->
+        <div
+          class="absolute left-[46%] top-[40%] -translate-x-1/2 -translate-y-1/2 z-10 animate-bounce pointer-events-none"
+        >
+          <img class="w-40" :src="getStaticImage('work/小手')" alt="" />
+          <span class="text-white text-2xl font-bold ml-5">点击进入</span>
+        </div>
+      </div>
       <div
         class="flex items-center pl-16 w-[1357px] h-[265px] absolute -bottom-16 left-0 bg-cover bg-center bg-no-repeat z-20"
         :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.TITLE) }"
@@ -137,12 +149,6 @@ function openImages(urls: string[], startIndex = 0) {
           {{ currentItem?.description }}</span
         >
       </div>
-      <img
-        @click="handleImageClick"
-        class="rounded-[62px] cursor-pointer"
-        :src="getStaticImage(currentItem?.image || '')"
-        alt=""
-      />
 
       <!-- <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
         <div