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

src/views/home/action.vue

@@ -7,13 +7,15 @@ import { ImgButton } from '@/components/Button'
 import { ModuleSwitcher } from './components/ModuleSwitcher'
 import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { useUserStore } from '@/stores'
+import { useUserStore, useFilmStore, useVlogStore } from '@/stores'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 
 //点击电视机按钮引导状态
 const status = ref(false)
-//点击新手导航节点引导状态
-const status2 = ref(true)
+const status2 = ref(false)
+const status3 = ref(false)
+
+const stepIndex = ref(0)
 
 const handleComplete = () => {
   status.value = false
@@ -21,6 +23,8 @@ const handleComplete = () => {
 
 const router = useRouter()
 const user = useUserStore()
+const film = useFilmStore()
+const vlog = useVlogStore()
 
 // 响应式状态
 const guideShow = ref(false)
@@ -48,6 +52,7 @@ const preloadImages = () => {
 
 // 事件处理函数
 const handleOpenGuide = () => {
+  status2.value = true
   guideShow.value = true
 }
 
@@ -91,6 +96,27 @@ const handleSkill = () => {
   })
 }
 
+// 清除所有与课程相关的缓存（Film / Vlog / User）
+const handleClearCache = () => {
+  // 直接通过 $patch 重置各模块的状态，避免热更新导致的方法缺失问题
+  film.$patch({
+    isGuideFilmTask: true,
+    hasShownGuideFilmTask: false,
+    isFilmUnlock: false,
+    FilmUnlockProgress: 0
+  })
+
+  vlog.$patch({
+    isGuideVlogTask: true,
+    isVlogUnlock: false,
+    vlogUnlockProgress: 0
+  })
+
+  user.$patch({
+    isGuideNewUser: true
+  })
+}
+
 // 新手导航数据
 const nodes = [
   {
@@ -141,6 +167,7 @@ const handleNodeClick = (node: any, event?: MouseEvent) => {
       showChildrenNodeId.value = null
     } else {
       showChildrenNodeId.value = node.id
+      status3.value = true
     }
   } else {
     // 如果点击的是没有子节点的节点，直接跳转
@@ -175,12 +202,36 @@ onUnmounted(() => {
 
 <template>
   <div class="w-full h-full relative">
+    <!-- 图片引导 -->
+    <div
+      class="absolute top-0 left-0 w-full h-full z-50"
+      v-if="stepIndex < 4 && isGuideNewUser"
+      @click="stepIndex++"
+    >
+      <img v-if="stepIndex === 0" :src="getStaticImage('home/1')" alt="" />
+      <img v-else-if="stepIndex === 1" :src="getStaticImage('home/2')" alt="" />
+      <img v-else-if="stepIndex === 2" :src="getStaticImage('home/3')" alt="" />
+      <img v-else-if="stepIndex === 3" :src="getStaticImage('home/4')" alt="" />
+      <div v-else class="absolute top-0 left-0 w-full h-full bg-black/50"></div>
+    </div>
+
     <!-- 背景图片 -->
     <div
       :class="['absolute inset-0 bg-cover bg-center bg-no-repeat']"
       :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION_BG) }"
     ></div>
 
+    <div
+      class="absolute top-4 left-4 flex items-center text-white text-xl bg-black/10 px-4 py-2 rounded-xl"
+    >
+      ！测试阶段友情提示：课程全部完成后，若需重新观看之前的内容，请按
+      <img
+        class="w-10 cursor-pointer mx-2"
+        src="@/assets/svg/clear.svg"
+        @click="handleClearCache"
+      />清空缓存。
+    </div>
+
     <!-- 选择模块 -->
     <div :class="['absolute left-0 top-[-140px] inset-0 z-[8] pointer-events-none']">
       <ModuleSwitcher v-model="selectedModule" @change="handleModuleChange" />
@@ -240,7 +291,7 @@ onUnmounted(() => {
           </div>
 
           <!-- 节点图表 -->
-          <div class="absolute inset-0 top-[60px]">
+          <div class="absolute inset-0 top-[60px] btn-items">
             <!-- 连线 (SVG) -->
             <svg class="absolute inset-0 w-full h-full pointer-events-none">
               <!-- 左侧装饰线 -> 节点1 -->
@@ -323,7 +374,7 @@ onUnmounted(() => {
               <!-- 子节点图标（当点击三大基础要素时显示） -->
               <div
                 v-if="node.hasChildren && showChildrenNodeId === node.id"
-                class="absolute -top-40 left-1/2 transform -translate-x-1/2 flex z-20"
+                class="absolute -top-40 left-1/2 transform -translate-x-1/2 flex z-20 btn"
               >
                 <div
                   v-for="childNode in node.children"
@@ -382,20 +433,11 @@ onUnmounted(() => {
       </GuideStepsItem>
     </GuideSteps>
 
-    <GuideSteps
-      v-if="status2"
-      highlight-mode="gradient"
-      highlight-selector=".newUserGuide"
-      position-offset-y="50%"
-      @complete="handleComplete"
-    >
-      <GuideStepsItem>
-        <div class="flex items-center justify-start">
-          欢迎来到《短视频达人养成记》课程，请点击下方
-          <img class="w-20" :src="getStaticImage('home/action/top')" alt="" />
-          开始学习！
-        </div>
-      </GuideStepsItem>
+    <GuideSteps :visible="status2" highlight-selector=".btn-items" position-offset-y="20%">
+      <GuideStepsItem> 选择任意节点开始学习 </GuideStepsItem>
+    </GuideSteps>
+    <GuideSteps :visible="status3" highlight-selector=".btn" position-offset-y="20%">
+      <GuideStepsItem> 选择任意要素开始学习 </GuideStepsItem>
     </GuideSteps>
   </div>
 </template>