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

src/views/film/practice/index.vue

@@ -5,6 +5,7 @@ import { ImgButton } from '@/components/Button'
 import { StarRating } from '@/components/Rating'
 import { useRouter } from 'vue-router'
 import BackToTopIcon from '@/assets/svg/back-to-top.svg'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 
 const router = useRouter()
 
@@ -32,6 +33,19 @@ const showSittingPerson = computed<boolean>(() => {
   return currentPage.value === 0 && !isScrollingBackToFirst.value
 })
 
+const visible = ref<boolean>(false)
+
+//每一页的引导词
+const steps = ref([
+  '欢迎来到实战操作台！ 这里的内容很丰富，滚动鼠标就能浏览到全部内容啦~',
+  '点击【我的创作笔记】，编写创作思路～',
+  '点击【查看】按钮，欣赏他人实战作品～'
+])
+
+const contentSteps = computed(() => {
+  return steps.value[currentPage.value]
+})
+
 /** 他人实战作品列表 */
 interface WorkItem {
   id: number
@@ -45,8 +59,8 @@ interface WorkItem {
 const worksList = ref<WorkItem[]>([
   {
     id: 1,
-    image: 'https://picsum.photos/400/300?random=1',
-    title: '作品名称',
+    image: getStaticImage('film/practice/学生案例'),
+    title: '学生案例',
     stars: 4,
     path: '/video/practice/film_anli1.mp4',
     description:
@@ -101,6 +115,7 @@ const smoothScrollTo = (toPage: number): void => {
     } else {
       isAnimating.value = false
       currentPage.value = toPage
+      visible.value = true
     }
   }
 
@@ -143,6 +158,7 @@ const handleWheel = (event: WheelEvent): void => {
 }
 
 onMounted(() => {
+  visible.value = true
   containerRef.value?.addEventListener('wheel', handleWheel, { passive: false })
 })
 
@@ -307,6 +323,10 @@ onUnmounted(() => {
         />
       </Transition>
     </div>
+
+    <GuideSteps v-if="visible" position-offset-y="70%" @complete="visible = false">
+      <GuideStepsItem>{{ contentSteps }}</GuideStepsItem>
+    </GuideSteps>
   </div>
 </template>