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

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

@@ -7,7 +7,7 @@ import { Video } from '@/components'
 import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
 import video1 from '/video/new/xsdh_rhxzgt_batch.mp4'
 import video2 from '/video/new/xsdh_jzgtf_batch.mp4'
-
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 const router = useRouter()
 const props = defineProps<{
   label: string
@@ -17,6 +17,8 @@ const props = defineProps<{
 const playing = ref(false)
 const status = ref(false)
 
+const guideStepIndex = ref(0)
+
 // 步骤导航数据
 const navigationSteps = ref([
   {
@@ -94,7 +96,7 @@ onMounted(() => {})
     />
     <!-- 步骤导航按钮 -->
     <button
-      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
+      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200 step-navigation-btn"
       @click="showStepNavigation = true"
       title="步骤导航"
     >
@@ -137,6 +139,38 @@ onMounted(() => {})
       @step-click="handleStepClick"
       @close="handleStepNavigationClose"
     />
+
+    <GuideSteps
+      :visible="true"
+      :highlight-selector="guideStepIndex === 3 ? '.step-navigation-btn' : ''"
+      position-offset-y="85%"
+      @step-change="(_: any, index: number) => (guideStepIndex = index)"
+    >
+      <GuideStepsItem>你有没有过这样的感觉？画面里什么都有，却不知道重点在哪里？</GuideStepsItem>
+      <GuideStepsItem>很多时候，不是内容不够好，而是需要有构图思维。</GuideStepsItem>
+      <GuideStepsItem>所谓构图，就是在画面中对元素进行选择、取舍和安排</GuideStepsItem>
+      <GuideStepsItem>
+        <div class="flex flex-wrap items-center justify-start">
+          <div>一起来看看吧~</div>
+          <div class="text-yellow-400">
+            点击<button
+              class="w-10 h-10 bg-blue-500/80 hover:bg-blue-500 rounded-full inline-flex items-center justify-center text-white transition-all duration-200"
+              title="步骤导航"
+            >
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path
+                  d="M3 4H17M3 8H17M3 12H17M3 16H17"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+            可以切换不同的学习内容！
+          </div>
+        </div>
+      </GuideStepsItem>
+    </GuideSteps>
   </div>
 </template>