feat: 完善模块引导与学习进度体验

统一引导提示的持久化控制，补充学习进度入口与模块资源，避免用户返回页面时重复触发提示。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/views/film/practice/index.vue

@@ -6,8 +6,10 @@ 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'
+import { useFilmStore } from '@/stores/modules/film'
 
 const router = useRouter()
+const filmStore = useFilmStore()
 
 const TOTAL_PAGES = 3
 const PAGE_HEIGHT = 1080
@@ -34,6 +36,7 @@ const showSittingPerson = computed<boolean>(() => {
 })
 
 const visible = ref<boolean>(false)
+const guideKeyPrefix = 'film-practice-page'
 
 //每一页的引导词
 const steps = ref([
@@ -42,10 +45,18 @@ const steps = ref([
   '点击【查看】按钮，欣赏他人实战作品～'
 ])
 
+const currentGuideKey = computed(() => `${guideKeyPrefix}-${currentPage.value}`)
+
 const contentSteps = computed(() => {
   return steps.value[currentPage.value]
 })
 
+const showPageGuide = (): void => {
+  if (filmStore.guideShown[currentGuideKey.value]) return
+  visible.value = true
+  filmStore.markGuideShown(currentGuideKey.value)
+}
+
 /** 他人实战作品列表 */
 interface WorkItem {
   id: number
@@ -62,7 +73,7 @@ const worksList = ref<WorkItem[]>([
     image: getStaticImage('film/practice/学生案例'),
     title: '学生案例',
     stars: 4,
-    path: '/video/practice/film_anli1.mp4',
+    path: '/video/film/practice/film_anli1.mp4',
     description:
       '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
   }
@@ -115,7 +126,7 @@ const smoothScrollTo = (toPage: number): void => {
     } else {
       isAnimating.value = false
       currentPage.value = toPage
-      visible.value = true
+      showPageGuide()
     }
   }
 
@@ -158,7 +169,7 @@ const handleWheel = (event: WheelEvent): void => {
 }
 
 onMounted(() => {
-  visible.value = true
+  showPageGuide()
   containerRef.value?.addEventListener('wheel', handleWheel, { passive: false })
 })
 
@@ -333,11 +344,15 @@ onUnmounted(() => {
 <style scoped>
 /* 隐藏滚动条但保持可滚动 - 兼容主流浏览器 */
 .task-panel {
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE/Edge */
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE/Edge */
 }
+
 .task-panel::-webkit-scrollbar {
-  display: none; /* Chrome/Safari/Opera */
+  display: none;
+  /* Chrome/Safari/Opera */
 }
 
 /* 第一页人物动画容器 */

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

@@ -7,7 +7,15 @@ import { IMAGE_PATHS, getBackgroundImage, getPublicPath } from '@/utils'
 import { Overlay } from '@/components/Overlay'
 import { ref } from 'vue'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { useFilmStore } from '@/stores/modules/film'
 const router = useRouter()
+const filmStore = useFilmStore()
+const guideKey = 'film-practice-video-rating'
+const showGuide = ref(!filmStore.guideShown[guideKey])
+
+if (showGuide.value) {
+  filmStore.markGuideShown(guideKey)
+}
 
 const props = defineProps({
   path: {
@@ -125,7 +133,7 @@ const handleBack = (): void => {
         </div>
       </div>
     </Overlay>
-    <GuideSteps :visible="true" :highlight-selector="'.btn-1'" position-offset-y="60%">
+    <GuideSteps :visible="showGuide" :highlight-selector="'.btn-1'" position-offset-y="60%">
       <GuideStepsItem>点击这里可以给作品评分噢～</GuideStepsItem>
     </GuideSteps>
   </div>