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

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

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

src/views/basic-elements/composition/index.vue

@@ -4,11 +4,17 @@ import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
 import { StepNavigation } from '@/components/Guide'
 import { Video } from '@/components'
-import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
-import video1 from '/video/new/xsdh_rhxzgt_batch.mp4'
-import video2 from '/video/new/xsdh_jzgtf_batch.mp4'
+import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { useBasicElementsStore } from '@/stores/modules/basic-elements'
 const router = useRouter()
+const basicElementsStore = useBasicElementsStore()
+const introGuideKey = 'basic-composition-intro'
+const showIntroGuide = ref(!basicElementsStore.guideShown[introGuideKey])
+
+if (showIntroGuide.value) {
+  basicElementsStore.markGuideShown(introGuideKey)
+}
 const props = defineProps<{
   label: string
 }>()
@@ -25,12 +31,14 @@ const navigationSteps = ref([
     id: 'step1',
     label: '视觉素养',
     content: '如何选择构图',
+    videoUrl: getPublicPath('video/new/composition/xsdh_rhxzgt_batch.mp4'),
     type: 'planning' as const
   },
   {
     id: 'step2',
     label: '视觉素养',
     content: '九种经典构图方式',
+    videoUrl: getPublicPath('video/new/composition/xsdh_jzgtf_batch.mp4'),
     type: 'planning' as const
   }
 ])
@@ -40,13 +48,12 @@ const showStepNavigation = ref(false)
 const currentNavigationStep = ref(0) // 对应视频索引，从0开始
 
 // 视频列表
-const videoList = [video1, video2]
 const currentVideoIndex = ref(0)
 
 //按顺序播放
-const currentVideo = computed(() => videoList[currentVideoIndex.value])
+const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
 const handleVideoChange = () => {
-  if (currentVideoIndex.value < videoList.length - 1) {
+  if (currentVideoIndex.value < navigationSteps.value.length - 1) {
     currentVideoIndex.value++
     currentNavigationStep.value = currentVideoIndex.value
   } else {
@@ -149,7 +156,7 @@ onMounted(() => {})
     />
 
     <GuideSteps
-      :visible="true"
+      :visible="showIntroGuide"
       :highlight-selector="guideStepIndex === 3 ? '.step-navigation-btn' : ''"
       position-offset-y="85%"
       @step-change="(_: any, index: number) => (guideStepIndex = index)"