feat: 添加 Husky 和 commit 限制配置

src/views/home/action.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { ModuleSwitcher } from '@/components/ModuleSwitcher'
+import { computed, ref, onMounted } from 'vue'
+
+// 响应式状态
+const status = ref(false)
+const guideShow = ref(false)
+const selectedModule = ref<'vlog' | 'film' | 'interview'>('vlog')
+const isImageLoading = ref(false)
+
+// 预加载图片映射
+const imageMap = {
+  vlog: IMAGE_PATHS.ACTION.VIDEO1,
+  film: IMAGE_PATHS.ACTION.VIDEO2,
+  interview: IMAGE_PATHS.ACTION.VIDEO3
+}
+
+// 预加载所有图片
+const preloadImages = () => {
+  const imageUrls = Object.values(imageMap).map(path => getBackgroundImage(path))
+  imageUrls.forEach(url => {
+    const img = new Image()
+    img.src = url
+  })
+}
+
+// 事件处理函数
+const handleOpenGuide = () => {
+  guideShow.value = true
+}
+
+const handleCloseGuide = () => {
+  guideShow.value = false
+  status.value = true
+}
+
+const handleModuleChange = (module: 'vlog' | 'film' | 'interview') => {
+  if (selectedModule.value === module) return
+
+  isImageLoading.value = true
+  selectedModule.value = module
+
+  // 模拟图片加载完成
+  setTimeout(() => {
+    isImageLoading.value = false
+  }, 100)
+}
+
+// 计算属性
+const selectedImage = computed(() => {
+  return getBackgroundImage(imageMap[selectedModule.value])
+})
+
+// 生命周期
+onMounted(() => {
+  preloadImages()
+})
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片 -->
+    <div
+      :class="['absolute inset-0 bg-cover bg-center bg-no-repeat', status ? 'z-0' : 'z-10']"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION_BG) }"
+    ></div>
+
+    <!-- 选择模块 -->
+    <div class="absolute left-0 top-[-140px] inset-0 z-10">
+      <ModuleSwitcher v-model="selectedModule" @change="handleModuleChange" />
+    </div>
+
+    <!-- 电视机 -->
+    <div
+      class="absolute w-[765px] h-[768px] right-0 top-0 z-0 transition-opacity duration-200"
+      :class="{ 'opacity-50': isImageLoading }"
+      :style="{ backgroundImage: selectedImage }"
+    ></div>
+
+    <ImgButton
+      v-if="status"
+      :image="IMAGE_PATHS.ACTION.SKILLS_BTN"
+      class="absolute bottom-0 right-0 z-30"
+    />
+
+    <!-- 新手指导遮罩 -->
+    <div v-if="!status" class="absolute inset-0 bg-black/50 z-10"></div>
+
+    <!-- 新手指导 -->
+    <div
+      class="absolute bottom-0 left-0 w-full h-[497px] bg-cover bg-center bg-no-repeat z-20 pointer-events-none"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BTN) }"
+      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"
+        @click="handleOpenGuide"
+      ></div>
+    </div>
+
+    <div
+      class="cursor-pointer absolute bottom-0 left-0 w-full h-[911px] bg-cover bg-center bg-no-repeat z-40"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BG) }"
+      v-else
+    >
+      <ImgButton
+        :image="IMAGE_PATHS.ACTION.DOWN"
+        class="absolute top-60 right-1/2 translate-x-1/2"
+        @click="handleCloseGuide"
+      />
+    </div>
+
+    <!-- <GuideSteps @complete="handleComplete" @skip="handleSkip">
+			<GuideStepsItem>欢迎来到短视频达人应用！我是你的导学小龙</GuideStepsItem>
+			<GuideStepsItem>
+				现在让我们一起走进
+				<em class="text-red-500">Vlog</em>
+				的世界。简单说，
+				<em class="text-red-500">Vlog</em>
+				就是用视频记录生活的一种方式--它像一本会动的日记能把我们身边的小事、瞬间的心情，通过镜头变得生动又具体。
+			</GuideStepsItem>
+		</GuideSteps> -->
+  </div>
+</template>