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>
 

src/views/film/practice/video/index.vue

@@ -3,10 +3,10 @@ import { useRouter } from 'vue-router'
 import { Video } from '@/components'
 import { ImgButton } from '@/components/Button'
 import { StarRating } from '@/components/Rating'
-import { IMAGE_PATHS, getBackgroundImage } from '@/utils'
+import { IMAGE_PATHS, getBackgroundImage, getPublicPath } from '@/utils'
 import { Overlay } from '@/components/Overlay'
 import { ref } from 'vue'
-
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 const router = useRouter()
 
 const props = defineProps({
@@ -71,12 +71,12 @@ const handleBack = (): void => {
       @click="handleBack"
     />
     <ImgButton
-      class="absolute right-0 bottom-10 z-50"
+      class="absolute right-0 bottom-10 z-50 btn-1"
       image="vlog/practice/评分"
       @click="showModal = true"
     />
     <Video
-      :src="decodeURIComponent(props.path)"
+      :src="getPublicPath(decodeURIComponent(props.path))"
       :volume="1"
       :muted="false"
       :controls="true"
@@ -125,5 +125,8 @@ const handleBack = (): void => {
         </div>
       </div>
     </Overlay>
+    <GuideSteps :visible="true" :highlight-selector="'.btn-1'" position-offset-y="60%">
+      <GuideStepsItem>点击这里可以给作品评分噢～</GuideStepsItem>
+    </GuideSteps>
   </div>
 </template>