feat: 提示词

src/views/home/action.vue

@@ -1,10 +1,23 @@
 <script lang="ts" setup>
+defineOptions({
+  name: 'Action'
+})
 import { getBackgroundImage, IMAGE_PATHS, getStaticImage } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { ModuleSwitcher } from './components/ModuleSwitcher'
 import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+
+//点击电视机按钮引导状态
+const status = ref(false)
+//点击新手导航节点引导状态
+const status2 = ref(true)
+
+const handleComplete = () => {
+  status.value = false
+}
 
 const router = useRouter()
 const user = useUserStore()
@@ -46,6 +59,7 @@ const handleCloseGuide = () => {
 }
 
 const handleModuleChange = (module: 'vlog' | 'film' | 'interview') => {
+  status.value = true
   if (selectedModule.value === module) return
 
   isImageLoading.value = true
@@ -58,7 +72,8 @@ const handleModuleChange = (module: 'vlog' | 'film' | 'interview') => {
 }
 
 const handleClick = () => {
-  console.log(selectedModule.value.charAt(0).toUpperCase() + selectedModule.value.slice(1))
+  if (selectedModule.value === 'interview') return
+  // console.log(selectedModule.value.charAt(0).toUpperCase() + selectedModule.value.slice(1))
   router.push({
     //首字母大写
     name: selectedModule.value.charAt(0).toUpperCase() + selectedModule.value.slice(1)
@@ -173,7 +188,7 @@ onUnmounted(() => {
 
     <!-- 电视机 -->
     <div
-      class="absolute w-[765px] h-[768px] right-0 top-0 z-[5] transition-all duration-300 hover:scale-105 hover:brightness-110 cursor-pointer"
+      class="absolute w-[765px] h-[768px] right-0 top-0 z-[5] transition-all duration-300 hover:scale-105 hover:brightness-110 cursor-pointer tvGuide"
       :class="{ 'opacity-50': isImageLoading }"
       :style="{ backgroundImage: selectedImage }"
       @click.stop="handleClick"
@@ -197,7 +212,7 @@ onUnmounted(() => {
       v-if="!guideShow"
     >
       <div
-        class="absolute bottom-20 right-[calc(50%-20px)] translate-x-1/2 w-20 h-20 cursor-pointer pointer-events-auto"
+        class="absolute bottom-20 right-[calc(50%-20px)] translate-x-1/2 w-20 h-20 cursor-pointer pointer-events-auto newUserGuide"
         @click="handleOpenGuide"
       ></div>
     </div>
@@ -329,5 +344,58 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
+
+    <!-- 引导与高亮 -->
+    <GuideSteps
+      v-if="status"
+      highlight-mode="gradient"
+      highlight-selector=".tvGuide"
+      position-offset-y="85%"
+      @complete="handleComplete"
+    >
+      <GuideStepsItem>
+        <div
+          class="flex items-center justify-start"
+          v-if="selectedModule === 'interview' || selectedModule === 'vlog'"
+        >
+          [{{
+            selectedModule == 'interview'
+              ? '访谈-聆听与对话'
+              : selectedModule == 'vlog'
+                ? 'vlog-创作与表达'
+                : ''
+          }}]模块建设中...
+        </div>
+        <div class="flex items-center justify-start" v-else>
+          请点击<img
+            class="w-20"
+            :src="getStaticImage(imageMap[selectedModule])"
+            alt=""
+          />，继续学习[{{
+            selectedModule == 'film'
+              ? '电影-创作与表达'
+              : selectedModule == 'vlog'
+                ? 'vlog-创作与表达'
+                : ''
+          }}]模块！
+        </div>
+      </GuideStepsItem>
+    </GuideSteps>
+
+    <GuideSteps
+      v-if="status2"
+      highlight-mode="gradient"
+      highlight-selector=".newUserGuide"
+      position-offset-y="50%"
+      @complete="handleComplete"
+    >
+      <GuideStepsItem>
+        <div class="flex items-center justify-start">
+          欢迎来到《短视频达人养成记》课程，请点击下方
+          <img class="w-20" :src="getStaticImage('home/action/top')" alt="" />
+          开始学习！
+        </div>
+      </GuideStepsItem>
+    </GuideSteps>
   </div>
 </template>