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

2026-01-20 17:54:05 +08:00
1 parent e9a1fee27f
commit c4c9be9d35
@@ -5,11 +5,6 @@ import ImgButton from '@/components/Button/ImgButton.vue'
 import { GuideSteps, GuideStepsItem, StepNavigation } from '@/components/Guide'
 import { Video, QuestionQuiz, type Question } from '@/components'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
-import second from '/video/vlog_renwuqujing_jichujingbieyunyong.mp4'
-import third from '/video/vlog_renwuqujing_huamiangoutu.mp4'
-import fourth from '/video/vlog_renwuqujing_jiaobencehua.mp4'
-import five from '/video/vlog_renwuqujing_zhuapai.mp4'
-import six from '/video/vlog_renwuqujing_jianjipingjie.mp4'
 import { useFilmStore } from '@/stores'

 const router = useRouter()
@@ -21,6 +16,9 @@ const visibleGuide = ref(true)

 const visibleGuide2 = ref(true)

+// 引导步骤索引
+const guideStepIndex = ref(0)
+
 // 受控播放开关（用于切换到下一个视频时自动播放）
 const playing = ref(false)
 const status = ref(false)
@@ -39,53 +37,54 @@ const navigationSteps = ref([
  {
    id: 'step1',
    label: '后期制作',
-    content: '遮幅',
-    type: 'post' as const
+    content: '遮幅'
  },
  {
    id: 'step2',
    label: '拍摄执行',
-    content: '光线',
-    type: 'post' as const
+    content: '光线'
  },
  {
    id: 'step3',
    label: '拍摄执行',
-    content: '虚实',
-    type: 'shooting' as const
+    content: '虚实'
  },
  {
    id: 'step4',
    label: '拍摄执行',
-    content: '特写镜头',
-    type: 'post' as const
+    content: '特写镜头'
  },
  {
    id: 'step5',
    label: '拍摄执行',
-    content: '分镜头',
-    type: 'post' as const
+    content: '分镜头'
  },
  {
    id: 'step5',
    label: '后期制作',
-    content: '滤镜',
-    type: 'post' as const
+    content: '滤镜'
  },
  {
    id: 'step5',
    label: '拍摄执行',
-    content: '同期声',
-    type: 'post' as const
+    content: '同期声'
  }
 ])

 // 步骤导航相关状态
 const showStepNavigation = ref(false)
-const currentNavigationStep = ref(1) // 对应视频索引，从0开始
+const currentNavigationStep = ref(0) // 对应视频索引，从0开始

 // 视频列表
-const videoList = [second, third, fourth, five, six, five, six]
+const videoList = [
+  getPublicPath('video/film/dygmk_zf_batch.mp4'),
+  getPublicPath('video/film/dygmk_gx_batch.mp4'),
+  getPublicPath('video/film/dygmk_xs_batch.mp4'),
+  getPublicPath('video/film/dygmk_txjt_batch.mp4'),
+  getPublicPath('video/film/dygmk_fjt_batch.mp4'),
+  getPublicPath('video/film/dygmk_lj_batch.mp4'),
+  getPublicPath('video/film/dygmk_tqs_batch.mp4')
+]
 const currentVideoIndex = ref(0)

 // 题目数据：虚实（index 2）和分镜头（index 4）
@@ -98,8 +97,8 @@ const getQuestionsForVideo = (index: number): Question[] => {
    return [
      {
        id: 1,
-        title: '交互题 1',
-        description: '下面两个画面,哪一个更具电影叙事感?',
+        title: '',
+        description: '（单选题）下面两个画面,哪一个更具电影叙事感?',
        options: [
          {
            id: 'a',
@@ -121,8 +120,8 @@ const getQuestionsForVideo = (index: number): Question[] => {
    return [
      {
        id: 2,
-        title: '交互题2',
-        description: '下面哪一组镜头顺序,更符合电影叙事逻辑?',
+        title: '',
+        description: '（单选题）下面哪一组镜头顺序,更符合电影叙事逻辑?',
        options: [
          {
            id: 'a',
@@ -144,7 +143,7 @@ const getQuestionsForVideo = (index: number): Question[] => {
 //按顺序播放
 const currentVideo = computed(() => videoList[currentVideoIndex.value])
 const resolvedSrc = computed(() => {
-  if (key.value === 'case') return getPublicPath('video/anlishangxi_meishi_xiaoyuanzi.mp4')
+  if (key.value === 'case') return getPublicPath('video/film/dygmk_zbbwg_batch.mp4')
  if (key.value === 'profession') return currentVideo.value
  return ''
 })
@@ -169,6 +168,13 @@ const handleVideoChange = () => {
 }

 const handleClose = () => {
+  if (key.value === 'idea') {
+    film.setFilmUnlockProgress(1)
+    router.push({
+      name: 'Film'
+    })
+    return
+  }
  router.back()
 }

@@ -204,10 +210,10 @@ const handleComplete = () => {
      name: 'FilmWork'
    })
  } else {
-    if (film.FilmUnlockProgress == 0) film.setFilmUnlockProgress(1)
-    router.push({
-      name: 'Film'
-    })
+    // if (film.FilmUnlockProgress == 0) film.setFilmUnlockProgress(1)
+    // router.push({
+    //   name: 'Film'
+    // })
  }
 }

@@ -252,7 +258,7 @@ onMounted(() => {
    <!-- 步骤导航按钮 -->
    <button
      v-if="key === 'profession'"
-      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-20 h-20 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
+      class="step-navigation-btn absolute right-4 top-1/2 z-10 -translate-y-1/2 w-20 h-20 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
      @click="showStepNavigation = true"
      title="步骤导航"
    >
@@ -297,7 +303,7 @@ onMounted(() => {
  </div>

  <!-- 引导与高亮 -->
-  <!-- <GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" /> -->
+  <GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" />

  <!-- 步骤导航抽屉 -->
  <StepNavigation
@@ -311,9 +317,10 @@ onMounted(() => {

  <!-- 引导与高亮 -->
  <GuideSteps
-    highlight-selector=""
+    :highlight-selector="guideStepIndex === 2 ? '.step-navigation-btn' : ''"
    v-if="visibleGuide && key === 'profession'"
    position-offset-y="85%"
+    @step-change="(_: any, index: number) => (guideStepIndex = index)"
  >
    <GuideStepsItem>
      从刚才的案例可以看出，电影感画面自带一种独特的艺术魅力——或大气恢弘，扑朔迷离或充满故事感。
@@ -345,13 +352,19 @@ onMounted(() => {
  </GuideSteps>

  <!-- 引导与高亮 -->
-  <GuideSteps highlight-selector="" v-if="visibleGuide2 && key === 'idea'" position-offset-y="85%">
+  <GuideSteps
+    highlight-selector=""
+    v-if="visibleGuide2 && key === 'idea'"
+    position-offset-y="85%"
+    @complete="handleComplete"
+  >
    <GuideStepsItem>
-      一个好镜头，既要好看，又要好懂 ——
-      既有视觉吸引力，又能把信息清晰地传达出来。当这些条件被满足，一个镜头就有了“高级感”。
+      一个好镜头，既要好看，又要好懂 —— 既有视觉吸引力，又能把信息清晰地传达出来。
    </GuideStepsItem>
+    <GuideStepsItem> 当这些条件被满足，一个镜头就有了“高级感”。 </GuideStepsItem>
+    <GuideStepsItem> 而优秀的短视频，就是靠无数这样的好镜头累积而成的。 </GuideStepsItem>
    <GuideStepsItem>
-      而优秀的短视频，就是靠无数这样的好镜头累积而成的。接下来，我们就以徐汇滨江为例，一起动手练习如何拍出属于它的意义与故事吧！
+      接下来，我们就以徐汇滨江为例，一起动手练习如何拍出属于它的意义与故事吧！
    </GuideStepsItem>
  </GuideSteps>
 </template>