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

src/components/ProgressBar/ProgressBar.vue

@@ -8,9 +8,9 @@
     <!-- 主进度条 -->
     <div class="progress-bar">
       <!-- 中间步骤指示器 -->
-      <div class="steps-section" v-if="currentStep > 0">
+      <div class="steps-section" v-if="currentStep > 0 || completedStep > 0">
         <!-- 标题区域 -->
-        <div class="absolute top-0 left-40" v-if="currentStep > 0">
+        <div class="absolute top-0 left-40" v-if="currentStep > 0 || completedStep > 0">
           <img
             v-if="moduleName === 'vlog'"
             :src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.TITLE)"
@@ -51,11 +51,7 @@
                 :src="currentStep === index ? steps[index].nameSelect : steps[index].nameselectNot"
                 alt=""
               /> -->
-              <div
-                class="flex items-center"
-                :class="canComplete ? 'cursor-not-allowed' : 'cursor-pointer'"
-                @click="handleStepClick(index + 1)"
-              >
+              <div class="flex items-center cursor-pointer" @click="handleStepClick(index + 1)">
                 <span
                   :class="[
                     'font-bold text-4xl ',
@@ -63,7 +59,8 @@
                   ]"
                   >{{ step.name }}</span
                 >
-                <img v-if="canComplete" src="@/assets/images/midterm/完成.png" alt="" />
+                <!-- 图标 -->
+                <img v-if="isStepCompleted(index)" src="@/assets/images/midterm/完成.png" alt="" />
                 <img
                   v-else
                   :class="['ml-2', currentStep === index + 1 && 'filter-blue']"
@@ -72,9 +69,10 @@
                 />
               </div>
 
+              <!-- 连接线 -->
               <template v-if="index < 2">
                 <img
-                  v-if="canComplete"
+                  v-if="isStepCompleted(index + 1)"
                   class="step-ellipsis"
                   src="@/assets/images/midterm/进度装饰（已完成.png"
                   alt=""
@@ -125,7 +123,9 @@ import { getStaticImage, IMAGE_PATHS } from '@/utils'
 
 // 定义组件属性
 interface Props {
-  /** 当前步骤索引 (0-3) */
+  /** 已完成的最大步骤编号 (1-4)，表示已完成到第几步。1=前期准备, 2=中期拍摄, 3=后期剪辑, 4=实战操作台 */
+  completedStep?: number
+  /** 当前选中的步骤索引 (1-3)，对应进度条显示的三个步骤 */
   currentStep?: number
   moduleName?: 'film' | 'vlog' | 'interview'
 }
@@ -138,19 +138,34 @@ interface Emits {
   stepChange: [number]
   /** v-model:currentStep 双向绑定时触发 */
   'update:currentStep': [number]
+  /** v-model:completedStep 双向绑定时触发 */
+  'update:completedStep': [number]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  currentStep: 0,
+  completedStep: 0,
+  currentStep: 1,
   moduleName: 'vlog'
 })
 
 const [currentStep] = useModel(props, 'currentStep')
+const [completedStep] = useModel(props, 'completedStep')
 
 const emit = defineEmits<Emits>()
 
-// 计算属性：是否可以完成（当前在最后一步）
-const canComplete = computed(() => props.currentStep > steps.length)
+// 计算属性：是否可以完成（前3步都已完成，解锁实战操作台）
+// 步骤：1=前期准备, 2=中期拍摄, 3=后期剪辑, 4=实战操作台
+// 当 completedStep >= 3（即完成第3步）时，解锁右侧完成按钮
+const canComplete = computed(() => props.completedStep >= 3)
+
+// 判断步骤是否已完成
+const isStepCompleted = (stepIndex: number) => {
+  // stepIndex 是数组索引 (0, 1, 2)，对应步骤编号 (1, 2, 3)
+  // completedStep 是已完成的最大步骤编号 (1-4)
+  // 如果 completedStep >= stepIndex + 1，说明该步骤已完成
+  const stepNumber = stepIndex + 1
+  return props.completedStep >= stepNumber
+}
 
 // 处理完成按钮点击
 const handleComplete = () => {
@@ -160,7 +175,6 @@ const handleComplete = () => {
 }
 
 const handleStepClick = (index: number) => {
-  if (canComplete.value) return
   currentStep.value = index
   emit('stepChange', index)
 }
@@ -189,8 +203,12 @@ const steps = [
 
 // 获取步骤状态
 const getStepStatus = (stepIndex: number) => {
-  if (stepIndex < props.currentStep) return 'completed'
-  if (stepIndex === props.currentStep) return 'current'
+  const stepNumber = stepIndex + 1 // 转换为步骤编号 (1, 2, 3)
+  // 如果已完成，返回 completed
+  if (props.completedStep >= stepNumber) return 'completed'
+  // 如果当前选中，返回 current
+  if (props.currentStep === stepNumber) return 'current'
+  // 否则返回 locked
   return 'locked'
 }
 </script>