feat: 提示词

src/views/film/video/index.vue

@@ -2,9 +2,9 @@
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { GuideSteps, StepNavigation } from '@/components/Guide'
+import { GuideSteps, GuideStepsItem, StepNavigation } from '@/components/Guide'
 import { Video, QuestionQuiz, type Question } from '@/components'
-import { getStaticImage, IMAGE_PATHS } from '@/utils'
+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'
@@ -17,6 +17,10 @@ const route = useRoute()
 
 const film = useFilmStore()
 
+const visibleGuide = ref(true)
+
+const visibleGuide2 = ref(true)
+
 // 受控播放开关（用于切换到下一个视频时自动播放）
 const playing = ref(false)
 const status = ref(false)
@@ -34,43 +38,43 @@ const steps = ref([
 const navigationSteps = ref([
   {
     id: 'step1',
-    label: '',
+    label: '后期制作',
     content: '遮幅',
-    type: 'shooting' as const
+    type: 'post' as const
   },
   {
     id: 'step2',
-    label: '',
+    label: '拍摄执行',
     content: '光线',
-    type: 'shooting' as const
+    type: 'post' as const
   },
   {
     id: 'step3',
-    label: '',
+    label: '拍摄执行',
     content: '虚实',
-    type: 'planning' as const
-  },
-  {
-    id: 'step4',
-    label: '',
-    content: '特写镜头',
     type: 'shooting' as const
   },
+  {
+    id: 'step4',
+    label: '拍摄执行',
+    content: '特写镜头',
+    type: 'post' as const
+  },
   {
     id: 'step5',
-    label: '',
+    label: '拍摄执行',
     content: '分镜头',
     type: 'post' as const
   },
   {
     id: 'step5',
-    label: '',
+    label: '后期制作',
     content: '滤镜',
     type: 'post' as const
   },
   {
     id: 'step5',
-    label: '',
+    label: '拍摄执行',
     content: '同期声',
     type: 'post' as const
   }
@@ -140,7 +144,7 @@ const getQuestionsForVideo = (index: number): Question[] => {
 //按顺序播放
 const currentVideo = computed(() => videoList[currentVideoIndex.value])
 const resolvedSrc = computed(() => {
-  if (key.value === 'case') return '/video/anlishangxi_meishi_xiaoyuanzi.mp4'
+  if (key.value === 'case') return getPublicPath('video/anlishangxi_meishi_xiaoyuanzi.mp4')
   if (key.value === 'profession') return currentVideo.value
   return ''
 })
@@ -248,11 +252,11 @@ onMounted(() => {
     <!-- 步骤导航按钮 -->
     <button
       v-if="key === 'profession'"
-      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-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="步骤导航"
     >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <svg width="35" height="35" viewBox="0 0 20 20" fill="none">
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
@@ -293,7 +297,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
@@ -304,6 +308,52 @@ onMounted(() => {
     @step-click="handleStepClick"
     @close="handleStepNavigationClose"
   />
+
+  <!-- 引导与高亮 -->
+  <GuideSteps
+    highlight-selector=""
+    v-if="visibleGuide && key === 'profession'"
+    position-offset-y="85%"
+  >
+    <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>
+
+  <!-- 引导与高亮 -->
+  <GuideSteps highlight-selector="" v-if="visibleGuide2 && key === 'idea'" position-offset-y="85%">
+    <GuideStepsItem>
+      一个好镜头，既要好看，又要好懂 ——
+      既有视觉吸引力，又能把信息清晰地传达出来。当这些条件被满足，一个镜头就有了“高级感”。
+    </GuideStepsItem>
+    <GuideStepsItem>
+      而优秀的短视频，就是靠无数这样的好镜头累积而成的。接下来，我们就以徐汇滨江为例，一起动手练习如何拍出属于它的意义与故事吧！
+    </GuideStepsItem>
+  </GuideSteps>
 </template>
 
 <style scoped>