feat: 添加 Husky 和 commit 限制配置

src/views/guide/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="guide-page w-full h-full relative">
+    <GuideSteps
+      ref="guideStepsRef"
+      :steps="guideSteps"
+      @complete="handleGuideComplete"
+      @skip="handleGuideSkip"
+      @step-change="handleStepChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import GuideSteps from '@/components/Guide/GuideSteps.vue'
+
+const router = useRouter()
+const guideStepsRef = ref()
+
+// 引导步骤配置
+const guideSteps = [
+  {
+    id: 'welcome',
+    title: '欢迎使用短视频达人！',
+    content: '试着用这些方法记录身边的小事，你会发现，原来平凡的日子里有这么多值得捕捉的瞬间。',
+    nextText: '开始学习'
+  },
+  {
+    id: 'music',
+    title: '音乐选择',
+    content: '选和主题匹配的音乐，烘托氛围又不抢戏。好的音乐能让你的视频更有感染力。',
+    nextText: '了解详情'
+  },
+  {
+    id: 'shooting',
+    title: '动态拍摄',
+    content: '掌握运镜技巧，让画面更有动感。从静态到动态，让你的视频更生动有趣。',
+    nextText: '开始体验'
+  },
+  {
+    id: 'complete',
+    title: '准备就绪！',
+    content: '太棒了！你已经了解了拍摄的基本技巧。现在可以开始创作你的第一个短视频作品了！',
+    nextText: '开始创作'
+  }
+]
+
+// 处理引导完成
+const handleGuideComplete = () => {
+  console.log('引导完成')
+  // 可以跳转到主页面或保存引导状态
+  router.push('/home')
+}
+
+// 处理跳过引导
+const handleGuideSkip = () => {
+  console.log('跳过引导')
+  router.push('/home')
+}
+
+// 处理步骤变化
+const handleStepChange = (step: { title: string }, index: number) => {
+  console.log('步骤变化:', step.title, index)
+}
+</script>
+
+<style scoped>
+.guide-page {
+  @apply bg-black;
+}
+</style>

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>

src/views/home/index.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.HOME_BG) }"
+    ></div>
+    <!-- 按钮 -->
+    <!-- 开始拍摄 -->
+    <div class="absolute right-[580px] bottom-[290px]">
+      <ImgButton :image="IMAGE_PATHS.BUTTONS.START_FILMING" :path="{ name: 'Action' }" />
+    </div>
+    <!-- 课程框架 -->
+    <div class="absolute right-0 bottom-40">
+      <ImgButton :image="IMAGE_PATHS.BUTTONS.COURSE_FRAME" />
+    </div>
+    <!-- 操作指引 -->
+    <div class="absolute right-0 bottom-0">
+      <ImgButton :image="IMAGE_PATHS.BUTTONS.OPERATE_GUIDE" :path="{ name: 'Guide' }" />
+    </div>
+  </div>
+</template>