feat: 提示词

src/views/film/work/index.vue

@@ -4,7 +4,7 @@ import { ref, computed } from 'vue'
 import { getBackgroundImage, IMAGE_PATHS, getStaticImage } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
-import { GuideSteps } from '@/components/Guide'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { useRouter } from 'vue-router'
 import { useScale } from '@/composables/useScale'
 import { ImagePreview } from '@/components'
@@ -23,15 +23,6 @@ const workSideSwitcherRef = ref<InstanceType<typeof WorkSideSwitcher>>()
 const isGuideFilmTask = computed(() => film.isGuideFilmTask)
 const isFilmUnlock = computed(() => film.isFilmUnlock)
 
-//引导步骤
-const steps = [
-  {
-    id: 'step1',
-    content: '经常听到有人赞叹：“这个镜头真高级。”'
-  },
-  { id: 'step2', content: '那么什么样的镜头才算是好镜头？又是什么让画面显得更高级？' }
-]
-
 //切换图片
 const sideSwitcherItems = ref([
   {
@@ -152,6 +143,21 @@ function openImages(urls: string[], startIndex = 0) {
         :src="getStaticImage(currentItem?.image || '')"
         alt=""
       />
+
+      <!-- <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
+        <div
+          class="w-40 h-40 pointer-events-auto rounded-full bg-black/50 backdrop-blur-sm flex items-center justify-center cursor-pointer hover:bg-black/70 transition-colors"
+        >
+          <svg
+            class="w-22 h-22 text-white ml-1"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M8 5v14l11-7z" />
+          </svg>
+        </div>
+      </div> -->
     </div>
 
     <!-- 左侧选项切换 -->
@@ -174,7 +180,6 @@ function openImages(urls: string[], startIndex = 0) {
     <!-- 引导与高亮 -->
     <GuideSteps
       v-if="isGuideFilmTask"
-      :steps="steps"
       :highlight-selector="currentHighlight"
       :highlight-padding="12"
       :highlight-radius="20"
@@ -182,7 +187,20 @@ function openImages(urls: string[], startIndex = 0) {
       @complete="handleGuideComplete"
       @skip="handleGuideComplete"
       position-offset-y="85%"
-    />
+    >
+      <GuideStepsItem>
+        点击右侧【案例赏析】、【专业剖析】、【思路提点】，可以切换不同内容
+      </GuideStepsItem>
+      <GuideStepsItem>
+        <div class="flex items-center justify-start">
+          请点击 &nbsp;<img
+            class="w-16"
+            :src="getStaticImage('film/sx')"
+            alt=""
+          />&nbsp;，进入案例赏析！
+        </div>
+      </GuideStepsItem>
+    </GuideSteps>
 
     <!-- 引导词按钮 -->
     <ImgButton