feat: 对接各个视频数据

src/components/ProgressBar/ProgressBar.vue

@@ -12,6 +12,28 @@
         <!-- 标题区域 -->
         <div class="absolute top-0 left-40" v-if="currentStep > 0">
           <img
+            v-if="moduleName === 'vlog'"
+            :src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.TITLE)"
+            alt="制作变焦镜-我的志愿者手记"
+            class="title-image"
+          />
+
+          <img
+            v-else-if="moduleName === 'film'"
+            :src="getStaticImage('film/制作变焦镜-这里是徐汇滨江')"
+            alt="制作变焦镜-这里是徐汇滨江"
+            class="title-image"
+          />
+
+          <img
+            v-else-if="moduleName === 'interview'"
+            :src="getStaticImage('midterm/中期拍摄')"
+            alt="制作变焦镜-我的志愿者手记"
+            class="title-image"
+          />
+
+          <img
+            v-else
             :src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.TITLE)"
             alt="制作变焦镜-我的志愿者手记"
             class="title-image"
@@ -29,7 +51,11 @@
                 :src="currentStep === index ? steps[index].nameSelect : steps[index].nameselectNot"
                 alt=""
               /> -->
-              <div class="flex items-center">
+              <div
+                class="flex items-center"
+                :class="canComplete ? 'cursor-not-allowed' : 'cursor-pointer'"
+                @click="handleStepClick(index + 1)"
+              >
                 <span
                   :class="[
                     'font-bold text-4xl ',
@@ -67,6 +93,7 @@
       <div class="absolute top-0 left-40" v-else>
         <img
           :src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.UNLOCKED)"
+          draggable="false"
           alt="未解锁"
           class="icon-image"
         />
@@ -93,24 +120,33 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, useModel } from 'vue'
 import { getStaticImage, IMAGE_PATHS } from '@/utils'
 
 // 定义组件属性
 interface Props {
   /** 当前步骤索引 (0-3) */
   currentStep?: number
+  moduleName?: 'film' | 'vlog' | 'interview'
 }
+
 // 定义事件
 interface Emits {
   /** 点击完成按钮时触发 */
   complete: []
+  /** 修改步骤时触发 */
+  stepChange: [number]
+  /** v-model:currentStep 双向绑定时触发 */
+  'update:currentStep': [number]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  currentStep: 0
+  currentStep: 0,
+  moduleName: 'vlog'
 })
 
+const [currentStep] = useModel(props, 'currentStep')
+
 const emit = defineEmits<Emits>()
 
 // 计算属性：是否可以完成（当前在最后一步）
@@ -123,6 +159,12 @@ const handleComplete = () => {
   }
 }
 
+const handleStepClick = (index: number) => {
+  if (canComplete.value) return
+  currentStep.value = index
+  emit('stepChange', index)
+}
+
 // 步骤配置
 const steps = [
   {