feat: 添加 Husky 和 commit 限制配置

src/App.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="app-container" :style="containerStyle">
+    <div class="app-content" :style="scaleStyle">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useScale } from '@/composables/useScale'
+
+// 使用等比例缩放hook
+const { scaleStyle } = useScale()
+
+// 容器样式
+const containerStyle = {
+  width: '100vw',
+  height: '100vh',
+  overflow: 'hidden',
+  position: 'relative' as const,
+  background: '#000'
+}
+</script>
+
+<style>
+#app {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/Button/ImgButton.vue

@@ -0,0 +1,26 @@
+<!-- 
+  按钮组件
+  传入背景图片
+ -->
+
+<template>
+  <img class="cursor-pointer" :src="getStaticImage(image)" @click="handleClick" />
+</template>
+
+<script lang="ts" setup>
+import { getStaticImage } from '@/utils'
+import { useRouter, type RouteLocationRaw } from 'vue-router'
+
+const router = useRouter()
+
+const props = defineProps<{
+  image: string
+  path?: RouteLocationRaw
+}>()
+
+const handleClick = () => {
+  if (props.path) {
+    router.push(props.path)
+  }
+}
+</script>

src/components/Button/index.ts

@@ -0,0 +1,3 @@
+import ImgButton from './ImgButton.vue'
+
+export { ImgButton }

src/components/Guide/GuideDragon.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="guide-dragon-container">
+    <!-- 背景图片 -->
+    <!-- <div
+			class="guide-bg absolute inset-0 bg-cover bg-center bg-no-repeat"
+			:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.GUIDE_DRAGON_BG) }"></div> -->
+
+    <!-- 导学小龙UI区域 -->
+    <div class="guide-ui absolute left-16 top-1/2 transform -translate-y-1/2">
+      <!-- 主UI面板 -->
+      <div class="guide-panel">
+        <!-- 标题区域 -->
+
+        <ImgButton
+          v-if="showSkip"
+          :image="IMAGE_PATHS.BUTTONS.ESCAPE"
+          @click="handleSkip"
+          class="skip-button"
+        />
+
+        <!-- 内容区域 -->
+        <div class="guide-content" @click="handleContinue">
+          <!-- <div class="content-icon">
+						<div class="icon-outer"></div>
+						<div class="icon-inner"></div>
+					</div> -->
+          <div class="content-text">
+            <slot>
+              <p>
+                试着用这些方法记录身边的小事，你会发现，原来平凡的日子里有这么多值得捕捉的瞬间。
+              </p>
+            </slot>
+          </div>
+        </div>
+
+        <!-- 进度指示器 -->
+        <div class="progress-indicator">
+          <div class="progress-dots">
+            <span
+              v-for="i in totalSteps"
+              :key="i"
+              class="progress-dot"
+              :class="{ active: i <= currentStep }"
+            ></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 小龙角色区域 -->
+    <div class="dragon-character absolute right-16 top-1/2 transform -translate-y-1/2">
+      <div class="dragon-container">
+        <!-- 小龙角色图片 -->
+        <img :src="getStaticImage(IMAGE_PATHS.GUIDE_PERSON)" alt="导学小龙" class="dragon-image" />
+        <!-- 发光效果 -->
+        <div class="dragon-glow"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getStaticImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+interface Props {
+  /** 是否显示跳过按钮 */
+  showSkip?: boolean
+  /** 当前步骤 */
+  currentStep?: number
+  /** 总步骤数 */
+  totalSteps?: number
+}
+
+interface Emits {
+  (e: 'next'): void
+  (e: 'skip'): void
+  (e: 'complete'): void
+}
+
+withDefaults(defineProps<Props>(), {
+  showSkip: true,
+  currentStep: 1,
+  totalSteps: 1
+})
+
+const emit = defineEmits<Emits>()
+
+// 处理跳过
+const handleSkip = () => {
+  try {
+    emit('skip')
+  } catch (error) {
+    console.error('GuideDragon handleSkip error:', error)
+  }
+}
+
+//继续
+const handleContinue = () => {
+  emit('next')
+}
+</script>
+
+<style scoped>
+.guide-dragon-container {
+  @apply w-full h-full relative overflow-hidden;
+}
+
+.guide-ui {
+  width: 80%;
+  z-index: 10;
+}
+
+.guide-panel {
+  @apply relative bg-white rounded-2xl shadow-2xl;
+  /* background: linear-gradient(135deg, #60a5fa 0%, #a855f7 100%);
+	border: 2px solid #60a5fa;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); */
+  width: 1547px;
+  height: 279px;
+  padding: 75px 30px 30px 120px;
+  background-image: url('../../assets/images/components/box.png');
+  background-color: rgba(0, 0, 0, 0); /* 背景完全透明 */
+}
+
+.guide-header {
+  @apply flex items-center justify-between p-4;
+}
+
+.header-button {
+  @apply relative px-4 py-2 rounded-lg;
+  background: linear-gradient(135deg, #60a5fa 0%, #06b6d4 100%);
+  border: 2px solid #60a5fa;
+}
+
+.header-text {
+  @apply text-white text-sm font-bold;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.skip-button {
+  @apply text-white text-sm underline hover:no-underline;
+  position: absolute;
+  right: 30px;
+  top: 35px;
+}
+
+.guide-content {
+  @apply flex items-start p-6 h-full;
+}
+
+.content-icon {
+  @apply relative mr-4 flex-shrink-0;
+}
+
+.icon-outer {
+  @apply w-6 h-6 rounded-full border-2 border-blue-400;
+  background: #60a5fa;
+}
+
+.icon-inner {
+  @apply absolute top-1 left-1 w-4 h-4 rounded-full;
+  background: #1e40af;
+}
+
+.content-text {
+  @apply text-white leading-relaxed font-bold text-4xl flex-1;
+}
+
+.progress-indicator {
+  @apply absolute bottom-6 right-6;
+}
+
+.progress-dots {
+  @apply flex space-x-2;
+}
+
+.progress-dot {
+  @apply w-2 h-2 rounded-full;
+  background: rgba(255, 255, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+.progress-dot.active {
+  background: #60a5fa;
+  box-shadow: 0 0 8px rgba(96, 165, 250, 0.6);
+}
+
+.dragon-character {
+  width: 250px;
+  height: 350px;
+  z-index: 5;
+}
+
+.dragon-container {
+  @apply w-full h-full relative;
+}
+
+.dragon-image {
+  @apply w-full h-full object-contain;
+  filter: drop-shadow(0 0 20px rgba(255, 255, 0, 0.3));
+}
+
+.dragon-glow {
+  @apply absolute inset-0 rounded-full;
+  background: radial-gradient(circle, rgba(255, 255, 0, 0.2) 0%, transparent 70%);
+  animation: glow 2s ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+  from {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0.8;
+    transform: scale(1.1);
+  }
+}
+
+/* 操作按钮样式已移除，因为不再需要底部按钮区域 */
+
+/* 动画效果 */
+.guide-dragon-container {
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.dragon-character {
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(-50%) translateY(0);
+  }
+  50% {
+    transform: translateY(-50%) translateY(-10px);
+  }
+}
+</style>

src/components/Guide/GuideSteps.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="guide-steps-container" v-if="show">
+    <GuideDragon
+      :show-skip="currentStep < totalSteps"
+      :current-step="currentStep"
+      :total-steps="totalSteps"
+      @next="handleNext"
+      @skip="handleSkip"
+      @complete="handleComplete"
+    >
+      <template #default>
+        <!-- 支持插槽形式的步骤内容 -->
+        <div v-if="useSlotMode">
+          <component
+            :is="currentStepComponent"
+            @continue="handleNext"
+            :is-last-step="currentStep >= totalSteps"
+            :current-step="currentStep"
+            :total-steps="totalSteps"
+          />
+        </div>
+        <!-- 兼容原有的配置形式 -->
+        <div v-else v-html="currentStepContent"></div>
+      </template>
+    </GuideDragon>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useSlots, onMounted, onUnmounted } from 'vue'
+import GuideDragon from './GuideDragon.vue'
+
+interface GuideStep {
+  id: string
+  title?: string
+  content: string
+  nextText?: string
+}
+
+interface Props {
+  /** 引导步骤配置 - 当使用插槽模式时可以为空 */
+  steps?: GuideStep[]
+  /** 是否自动开始 */
+  autoStart?: boolean
+  /** 是否启用键盘导航 */
+  keyboardNavigation?: boolean
+  /** 自动播放间隔时间（毫秒），0表示不自动播放 */
+  autoPlayInterval?: number
+}
+
+interface Emits {
+  (e: 'complete'): void
+  (e: 'skip'): void
+  (e: 'step-change', step: GuideStep | null, index: number): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  steps: () => [],
+  autoStart: true,
+  keyboardNavigation: true,
+  autoPlayInterval: 0
+})
+
+const emit = defineEmits<Emits>()
+
+const slots = useSlots()
+const show = ref(true)
+const currentStepIndex = ref(0)
+
+const useSlotMode = computed(() => {
+  return slots.default && slots.default().length > 0
+})
+
+const slotSteps = computed(() => {
+  if (!useSlotMode.value) return []
+  return slots.default?.() || []
+})
+const currentStep = computed(() => currentStepIndex.value + 1)
+const totalSteps = computed(() => {
+  return useSlotMode.value ? slotSteps.value.length : props.steps.length
+})
+
+const currentStepData = computed(() => {
+  if (useSlotMode.value) {
+    return null // 插槽模式不需要step数据
+  }
+  if (props.steps.length === 0) {
+    return null
+  }
+  return props.steps[currentStepIndex.value] || null
+})
+
+const currentStepComponent = computed(() => {
+  if (!useSlotMode.value) return null
+  return slotSteps.value[currentStepIndex.value] || null
+})
+
+const currentStepContent = computed(() => {
+  if (useSlotMode.value) return ''
+
+  const step = currentStepData.value
+  if (!step) return ''
+
+  if (!step.title) {
+    return `<p>${step.content}</p>`
+  }
+
+  return `
+		<h3 class="text-lg font-bold mb-2">${step.title}</h3>
+		<div class="leading-relaxed">${step.content}</div>
+	`
+})
+
+const handleNext = () => {
+  const maxSteps = useSlotMode.value ? slotSteps.value.length : props.steps.length
+  if (maxSteps === 0) {
+    handleComplete()
+    return
+  }
+
+  if (currentStepIndex.value < maxSteps - 1) {
+    currentStepIndex.value++
+    emit('step-change', currentStepData.value, currentStepIndex.value)
+  } else {
+    handleComplete()
+  }
+}
+
+const handleSkip = () => {
+  handleComplete()
+}
+
+const handleComplete = () => {
+  show.value = false
+  emit('complete')
+}
+
+const goToStep = (index: number) => {
+  const maxSteps = useSlotMode.value ? slotSteps.value.length : props.steps.length
+  if (maxSteps === 0) {
+    console.warn('GuideSteps goToStep: No steps available')
+    return
+  }
+
+  if (index >= 0 && index < maxSteps) {
+    currentStepIndex.value = index
+    emit('step-change', currentStepData.value, currentStepIndex.value)
+  } else {
+    console.warn('GuideSteps goToStep: Invalid step index', index, 'max:', maxSteps - 1)
+  }
+}
+
+const resetGuide = () => {
+  currentStepIndex.value = 0
+  show.value = true
+}
+
+// 键盘导航
+const handleKeydown = (event: KeyboardEvent) => {
+  if (!props.keyboardNavigation || !show.value) return
+
+  switch (event.key) {
+    case 'ArrowRight':
+    case ' ':
+      event.preventDefault()
+      handleNext()
+      break
+    case 'ArrowLeft':
+      event.preventDefault()
+      if (currentStepIndex.value > 0) {
+        currentStepIndex.value--
+        emit('step-change', currentStepData.value, currentStepIndex.value)
+      }
+      break
+    case 'Escape':
+      event.preventDefault()
+      handleSkip()
+      break
+  }
+}
+
+// 自动播放
+let autoPlayTimer: number | null = null
+
+const startAutoPlay = () => {
+  if (props.autoPlayInterval > 0) {
+    autoPlayTimer = window.setInterval(() => {
+      const maxSteps = useSlotMode.value ? slotSteps.value.length : props.steps.length
+      if (currentStepIndex.value < maxSteps - 1) {
+        handleNext()
+      } else {
+        stopAutoPlay()
+        handleComplete()
+      }
+    }, props.autoPlayInterval)
+  }
+}
+
+const stopAutoPlay = () => {
+  if (autoPlayTimer) {
+    clearInterval(autoPlayTimer)
+    autoPlayTimer = null
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+  if (props.autoStart && props.autoPlayInterval > 0) {
+    startAutoPlay()
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+  stopAutoPlay()
+})
+
+defineExpose({
+  goToStep,
+  resetGuide,
+  currentStep,
+  totalSteps,
+  startAutoPlay,
+  stopAutoPlay
+})
+</script>
+
+<style scoped>
+.guide-steps-container {
+  @apply w-full h-full relative;
+}
+</style>

src/components/Guide/GuideStepsItem.vue

@@ -0,0 +1,56 @@
+<template>
+  <span class="guide-steps-item">
+    <slot />
+    <ImgButton
+      v-if="!isLastStep"
+      :image="IMAGE_PATHS.BUTTONS.CONTINUE"
+      class="continue-button"
+      @click="handleContinue"
+    />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+// 步骤项容器组件，通过插槽传递内容
+
+interface Props {
+  isLastStep?: boolean
+  currentStep?: number
+  totalSteps?: number
+}
+
+withDefaults(defineProps<Props>(), {
+  isLastStep: false,
+  currentStep: 1,
+  totalSteps: 1
+})
+
+const emit = defineEmits<{
+  (e: 'continue'): void
+}>()
+
+const handleContinue = () => {
+  emit('continue')
+}
+</script>
+
+<style scoped>
+.guide-steps-item {
+  @apply inline;
+}
+.continue-button {
+  @apply inline-block ml-3;
+  vertical-align: middle;
+  transform: scale(0.8);
+}
+
+/* .continue-button:hover {
+	@apply transform scale-105;
+}
+
+.continue-button:active {
+	@apply transform scale-95;
+} */
+</style>

src/components/Guide/README.md

@@ -0,0 +1,309 @@
+# 引导组件使用说明
+
+## 组件概述
+
+基于你提供的背景图片设计，创建了一套完整的引导组件系统，包含导学小龙UI和步骤管理功能。
+
+## 组件结构
+
+```
+src/components/guide/
+├── GuideDragon.vue      # 导学小龙UI组件
+├── GuideSteps.vue       # 步骤管理组件
+├── index.ts            # 组件导出文件
+└── README.md           # 使用说明
+```
+
+## 组件功能
+
+### 1. GuideDragon 组件
+
+**功能特性：**
+
+- 基于1920\*1080设计稿的等比例缩放
+- 导学小龙UI区域（左侧）
+- 小龙角色区域（右侧）
+- 操作按钮区域（底部）
+- 支持自定义内容插槽
+- 响应式动画效果
+
+**Props：**
+
+```typescript
+interface Props {
+  showSkip?: boolean // 是否显示跳过按钮
+  nextButtonText?: string // 下一步按钮文本
+  currentStep?: number // 当前步骤
+  totalSteps?: number // 总步骤数
+}
+```
+
+**Events：**
+
+```typescript
+interface Emits {
+  (e: 'next'): void // 下一步事件
+  (e: 'skip'): void // 跳过事件
+  (e: 'complete'): void // 完成事件
+}
+```
+
+### 2. GuideSteps 组件
+
+**功能特性：**
+
+- 多步骤引导管理
+- 自动步骤切换
+- 自定义步骤内容
+- 步骤跳转功能
+- 引导重置功能
+
+**Props：**
+
+```typescript
+interface Props {
+  steps: GuideStep[] // 引导步骤配置
+  autoStart?: boolean // 是否自动开始
+}
+
+interface GuideStep {
+  id: string // 步骤ID
+  content: string // 步骤内容（支持HTML/()=>h()）
+  nextText?: string // 下一步按钮文本
+}
+```
+
+## 使用示例
+
+### 基础使用
+
+```vue
+<template>
+  <GuideDragon
+    :show-skip="true"
+    next-button-text="下一步"
+    @next="handleNext"
+    @skip="handleSkip"
+    @complete="handleComplete"
+  >
+    <h3>欢迎使用短视频达人！</h3>
+    <p>让我来为你介绍如何使用这个应用吧~</p>
+  </GuideDragon>
+</template>
+
+<script setup lang="ts">
+import { GuideDragon } from '@/components/guide'
+
+const handleNext = () => {
+  console.log('下一步')
+}
+
+const handleSkip = () => {
+  console.log('跳过')
+}
+
+const handleComplete = () => {
+  console.log('完成')
+}
+</script>
+```
+
+### 多步骤引导
+
+```vue
+<template>
+  <GuideSteps :steps="guideSteps" @complete="handleComplete" @skip="handleSkip" />
+</template>
+
+<script setup lang="ts">
+import { GuideSteps } from '@/components/guide'
+
+const guideSteps = [
+  {
+    id: 'welcome',
+    content: '欢迎来到短视频达人应用！我是你的导学小龙...',
+    nextText: '开始学习'
+  },
+  {
+    id: 'features',
+    content: '我们的应用包含以下核心功能...',
+    nextText: '了解详情'
+  }
+]
+
+const handleComplete = () => {
+  console.log('引导完成')
+}
+</script>
+```
+
+### 灵活的写法
+
+```vue
+<template>
+  <GuideSteps @complete="handleComplete" @skip="handleSkip">
+    <GuideStepsItem>欢迎来到短视频达人应用！我是你的导学小龙</GuideStepsItem>
+    <GuideStepsItem>
+      <p>
+        现在让我们一起走进
+        <em class="text-red">Vlog</em>
+        的世界。简单说，
+        <em class="text-red">Vlog</em>
+        就是用视频记录生活的一种方式--它像一本会动的日记能把我们身边的小事、瞬间的心情，通过镜头变得生动又具体。
+      </p>
+    </GuideStepsItem>
+  </GuideSteps>
+</template>
+
+<script setup lang="ts">
+import { GuideSteps, GuideStepsItem } from '@/components/guide'
+
+const handleComplete = () => {
+  console.log('引导完成')
+}
+</script>
+```
+
+### 高级用法
+
+```vue
+<template>
+  <GuideSteps
+    @complete="handleComplete"
+    @skip="handleSkip"
+    :keyboard-navigation="true"
+    :auto-play-interval="3000"
+  >
+    <GuideStepsItem>欢迎来到短视频达人应用！</GuideStepsItem>
+    <GuideStepsItem>这里是第二个步骤</GuideStepsItem>
+    <GuideStepsItem>最后一步</GuideStepsItem>
+  </GuideSteps>
+</template>
+
+<script setup lang="ts">
+import { GuideSteps, GuideStepsItem } from '@/components/guide'
+
+const handleComplete = () => {
+  console.log('引导完成')
+}
+
+const handleSkip = () => {
+  console.log('跳过引导')
+}
+</script>
+```
+
+## 组件特性
+
+### 1. 双模式支持
+
+- **配置模式**: 通过 `steps` 属性传递步骤配置
+- **插槽模式**: 通过 `<GuideStepsItem>` 组件定义步骤内容
+
+### 2. 键盘导航
+
+- 支持方向键导航（左右箭头）
+- 空格键前进，ESC键跳过
+- 可配置是否启用键盘导航
+
+### 3. 自动播放
+
+- 支持自动播放模式
+- 可配置播放间隔时间
+- 自动播放时支持暂停和恢复
+
+### 4. 智能按钮显示
+
+- 自动在每页内容后添加"继续"按钮
+- 最后一页不显示"继续"按钮
+- 按钮与文字在同一行，不换行
+
+### 5. 响应式设计
+
+- 基于useScale hook的等比例缩放
+- 适配不同屏幕尺寸
+- 保持设计稿比例
+
+### 6. 动画效果
+
+- 淡入动画
+- 小龙角色弹跳动画
+- 平滑过渡效果
+
+### 7. 视觉设计
+
+- 渐变背景色
+- 圆角边框设计
+- 阴影效果
+- 现代化UI风格
+
+## Props 说明
+
+### GuideSteps Props
+
+| 属性名             | 类型        | 默认值 | 说明                                      |
+| ------------------ | ----------- | ------ | ----------------------------------------- |
+| steps              | GuideStep[] | []     | 引导步骤配置（插槽模式时可省略）          |
+| autoStart          | boolean     | true   | 是否自动开始                              |
+| keyboardNavigation | boolean     | true   | 是否启用键盘导航                          |
+| autoPlayInterval   | number      | 0      | 自动播放间隔时间（毫秒），0表示不自动播放 |
+
+### GuideStep 接口
+
+```typescript
+interface GuideStep {
+  id: string
+  title?: string
+  content: string
+  nextText?: string
+}
+```
+
+## Events 说明
+
+| 事件名      | 参数                                     | 说明           |
+| ----------- | ---------------------------------------- | -------------- |
+| complete    | -                                        | 引导完成时触发 |
+| skip        | -                                        | 跳过引导时触发 |
+| step-change | (step: GuideStep \| null, index: number) | 步骤变更时触发 |
+
+## 方法说明
+
+通过 ref 可以调用以下方法：
+
+| 方法名        | 参数            | 说明             |
+| ------------- | --------------- | ---------------- |
+| goToStep      | (index: number) | 跳转到指定步骤   |
+| resetGuide    | -               | 重置引导到第一步 |
+| startAutoPlay | -               | 开始自动播放     |
+| stopAutoPlay  | -               | 停止自动播放     |
+
+## 路由集成
+
+引导页面已集成到路由系统中：
+
+```typescript
+// 路由配置
+{
+  path: '/guide',
+  name: 'Guide',
+  component: () => import('@/views/guide/index.vue'),
+  meta: {
+    title: '使用引导'
+  }
+}
+```
+
+## 注意事项
+
+1. **图片资源**：需要将背景图片放置在 `src/assets/images/guide/` 目录下
+2. **样式兼容**：组件使用Tailwind CSS，确保项目已正确配置
+3. **响应式**：组件会自动适配不同屏幕尺寸
+4. **自定义内容**：支持HTML格式的内容，注意XSS安全
+
+## 扩展功能
+
+- 可以添加更多动画效果
+- 支持自定义小龙角色图片
+- 可以集成音效和语音提示
+- 支持引导进度保存和恢复

src/components/Guide/index.ts

@@ -0,0 +1,15 @@
+// 引导组件导出
+export { default as GuideDragon } from './GuideDragon.vue'
+export { default as GuideSteps } from './GuideSteps.vue'
+export { default as GuideStepsItem } from './GuideStepsItem.vue'
+
+// 类型导出
+export type {
+  GuideStep,
+  GuideDragonProps,
+  GuideStepsProps,
+  GuideDragonEmits,
+  GuideStepsEmits,
+  GuideStepsItemProps,
+  GuideStepsItemEmits
+} from './types'

src/components/Guide/types.ts

@@ -0,0 +1,47 @@
+// 引导步骤类型定义
+export interface GuideStep {
+  id: string
+  title: string
+  content: string
+  nextText?: string
+}
+
+// 引导组件Props类型
+export interface GuideDragonProps {
+  showSkip?: boolean
+  currentStep?: number
+  totalSteps?: number
+}
+
+// 引导步骤组件Props类型
+export interface GuideStepsProps {
+  steps?: GuideStep[]
+  autoStart?: boolean
+  keyboardNavigation?: boolean
+  autoPlayInterval?: number
+}
+
+// 引导组件事件类型
+export interface GuideDragonEmits {
+  (e: 'next'): void
+  (e: 'skip'): void
+  (e: 'complete'): void
+}
+
+export interface GuideStepsEmits {
+  (e: 'complete'): void
+  (e: 'skip'): void
+  (e: 'step-change', step: GuideStep | null, index: number): void
+}
+
+// GuideStepsItem Props类型
+export interface GuideStepsItemProps {
+  isLastStep?: boolean
+  currentStep?: number
+  totalSteps?: number
+}
+
+// GuideStepsItem Emits类型
+export interface GuideStepsItemEmits {
+  (e: 'continue'): void
+}

src/components/HelloWorld.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <div class="text-center space-y-6">
+    <h1 class="text-4xl font-bold text-gray-800 mb-8">{{ msg }}</h1>
+
+    <div class="bg-white rounded-lg shadow-lg p-8 max-w-md mx-auto">
+      <button
+        type="button"
+        @click="count++"
+        class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 mb-4"
+      >
+        count is {{ count }}
+      </button>
+      <p class="text-gray-600">
+        Edit
+        <code class="bg-gray-100 px-2 py-1 rounded text-sm">components/HelloWorld.vue</code>
+        to test HMR
+      </p>
+    </div>
+
+    <div class="space-y-4 text-gray-600">
+      <p>
+        Check out
+        <a
+          href="https://vuejs.org/guide/quick-start.html#local"
+          target="_blank"
+          class="text-blue-500 hover:text-blue-600 underline"
+        >
+          create-vue
+        </a>
+        , the official Vue + Vite starter
+      </p>
+      <p>
+        Learn more about IDE Support for Vue in the
+        <a
+          href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+          target="_blank"
+          class="text-blue-500 hover:text-blue-600 underline"
+        >
+          Vue Docs Scaling up Guide
+        </a>
+        .
+      </p>
+      <p class="text-gray-500 text-sm">Click on the Vite and Vue logos to learn more</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/components/ModuleSwitcher/ModuleButton.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    :style="{ backgroundImage: getBackgroundImage(currentImage) }"
+    :class="['module-btn', module.className, { selected: isSelected }]"
+  >
+    <div :class="['btn-mask', module.maskConfig.className]" @click="$emit('click')"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getBackgroundImage } from '@/utils'
+
+// 定义模块类型
+type ModuleType = 'vlog' | 'film' | 'interview'
+
+// 模块配置接口
+interface ModuleConfig {
+  type: ModuleType
+  normalImage: string
+  selectedImage: string
+  className: string
+  maskConfig: {
+    className: string
+    position: string
+    size: string
+    transform: string
+  }
+}
+
+// Props定义
+interface Props {
+  module: ModuleConfig
+  isSelected: boolean
+}
+
+// Emits定义
+interface Emits {
+  (e: 'click'): void
+}
+
+const props = defineProps<Props>()
+defineEmits<Emits>()
+
+// 计算当前显示的图片
+const currentImage = computed(() => {
+  return props.isSelected ? props.module.selectedImage : props.module.normalImage
+})
+</script>
+
+<style scoped>
+.module-btn {
+  position: absolute;
+  transition:
+    transform 0.2s ease,
+    z-index 0.2s ease;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.btn-mask {
+  position: absolute;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.module-btn:hover {
+  z-index: 10;
+}
+
+.module-btn:active {
+  /* transform: scale(0.95); */
+}
+
+/* 确保选中的按钮在最上层 */
+.module-btn.selected {
+  z-index: 20;
+}
+</style>

src/components/ModuleSwitcher/ModuleSwitcher.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="module-switcher">
+    <ModuleButton
+      v-for="module in moduleConfigs"
+      :key="module.type"
+      :module="module"
+      :is-selected="selectedModule === module.type"
+      @click="selectModule(module.type)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { IMAGE_PATHS } from '@/utils'
+import ModuleButton from './ModuleButton.vue'
+
+// 定义模块类型
+type ModuleType = 'vlog' | 'film' | 'interview'
+
+// 模块配置接口
+interface ModuleConfig {
+  type: ModuleType
+  normalImage: string
+  selectedImage: string
+  className: string
+  maskConfig: {
+    className: string
+    position: string
+    size: string
+    transform: string
+  }
+}
+
+// Props定义
+interface Props {
+  modelValue?: ModuleType
+}
+
+// Emits定义
+interface Emits {
+  (e: 'update:modelValue', value: ModuleType): void
+  (e: 'change', value: ModuleType): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 'vlog'
+})
+
+const emit = defineEmits<Emits>()
+
+// 当前选中的模块
+const selectedModule = ref<ModuleType>(props.modelValue)
+
+// 模块配置
+const moduleConfigs: ModuleConfig[] = [
+  {
+    type: 'vlog',
+    normalImage: IMAGE_PATHS.ACTION.MODULE_BTN1,
+    selectedImage: IMAGE_PATHS.ACTION.SELECTED_BTN1,
+    className: 'w-[1235px] h-[830px] left-1/2 -translate-x-1/2 -bottom-6',
+    maskConfig: {
+      className: 'left-10 bottom-[240px] w-[500px] h-[100px] -rotate-[15deg]',
+      position: 'left-10 bottom-[240px]',
+      size: 'w-[500px] h-[100px]',
+      transform: '-rotate-[15deg]'
+    }
+  },
+  {
+    type: 'film',
+    normalImage: IMAGE_PATHS.ACTION.MODULE_BTN2,
+    selectedImage: IMAGE_PATHS.ACTION.SELECTED_BTN2,
+    className: 'w-[1087px] h-[822px] left-[calc(50%+50px)] -translate-x-1/2 -bottom-4',
+    maskConfig: {
+      className: 'left-[16em] bottom-[50px] w-[500px] h-[100px]',
+      position: 'left-[16em] bottom-[50px]',
+      size: 'w-[500px] h-[100px]',
+      transform: ''
+    }
+  },
+  {
+    type: 'interview',
+    normalImage: IMAGE_PATHS.ACTION.MODULE_BTN3,
+    selectedImage: IMAGE_PATHS.ACTION.SELECTED_BTN3,
+    className: 'w-[943px] h-[822px] right-[320px] -bottom-4',
+    maskConfig: {
+      className: 'right-[0em] bottom-[200px] w-[420px] h-[100px] rotate-[15deg]',
+      position: 'right-[0em] bottom-[200px]',
+      size: 'w-[420px] h-[100px]',
+      transform: 'rotate-[15deg]'
+    }
+  }
+]
+
+// 选择模块
+const selectModule = (module: ModuleType) => {
+  if (selectedModule.value === module) return
+
+  selectedModule.value = module
+  emit('update:modelValue', module)
+  emit('change', module)
+}
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  newValue => {
+    selectedModule.value = newValue
+  }
+)
+</script>
+
+<style scoped>
+.module-switcher {
+  position: relative;
+  width: 100%;
+  height: 1000px;
+}
+</style>

src/components/ModuleSwitcher/index.ts

@@ -0,0 +1 @@
+export { default as ModuleSwitcher } from './ModuleSwitcher.vue'

src/composables/README.md

@@ -0,0 +1,52 @@
+# Composables 使用说明
+
+## useScale Hook
+
+### 功能描述
+
+基于1920\*1080设计稿进行等比例缩放的响应式hook，确保应用在不同屏幕尺寸下保持设计比例。
+
+### 使用方法
+
+```vue
+<template>
+  <div class="my-component">
+    <h1>当前缩放比例: {{ scale }}</h1>
+    <p>窗口尺寸: {{ windowWidth }} x {{ windowHeight }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useScale } from '@/composables/useScale'
+
+const { scale, windowWidth, windowHeight, scaleStyle, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale()
+</script>
+```
+
+### 返回值说明
+
+- `windowWidth`: 当前窗口宽度
+- `windowHeight`: 当前窗口高度
+- `scale`: 当前缩放比例
+- `scaledWidth`: 缩放后的实际宽度
+- `scaledHeight`: 缩放后的实际高度
+- `offsetX`: 水平居中偏移量
+- `offsetY`: 垂直居中偏移量
+- `scaleStyle`: 完整的缩放样式对象
+- `DESIGN_WIDTH`: 设计稿宽度 (1920)
+- `DESIGN_HEIGHT`: 设计稿高度 (1080)
+
+### 特性
+
+1. **等比例缩放**: 保持设计稿的宽高比不变
+2. **居中显示**: 内容在视窗中居中显示
+3. **响应式**: 自动监听窗口大小变化
+4. **性能优化**: 使用computed缓存计算结果
+5. **TypeScript支持**: 完整的类型定义
+
+### 注意事项
+
+- 设计稿尺寸固定为1920\*1080
+- 缩放比例取宽高比的最小值，确保内容完全显示
+- 超出设计稿尺寸的内容会被裁剪
+- 建议在根组件App.vue中使用，确保全局生效

src/composables/useScale.ts

@@ -0,0 +1,77 @@
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+
+/**
+ * 等比例缩放Hook
+ * 基于1920*1080设计稿进行等比例缩放
+ */
+export function useScale() {
+  // 设计稿尺寸
+  const DESIGN_WIDTH = 1920
+  const DESIGN_HEIGHT = 1080
+
+  // 当前窗口尺寸
+  const windowWidth = ref(window.innerWidth)
+  const windowHeight = ref(window.innerHeight)
+
+  // 缩放比例
+  const scale = computed(() => {
+    const scaleX = windowWidth.value / DESIGN_WIDTH
+    const scaleY = windowHeight.value / DESIGN_HEIGHT
+
+    // 取较小的缩放比例，确保内容完全显示在视窗内
+    return Math.min(scaleX, scaleY)
+  })
+
+  // 缩放后的实际尺寸
+  const scaledWidth = computed(() => DESIGN_WIDTH * scale.value)
+  const scaledHeight = computed(() => DESIGN_HEIGHT * scale.value)
+
+  // 居中偏移量
+  const offsetX = computed(() => (windowWidth.value - scaledWidth.value) / 2)
+  const offsetY = computed(() => (windowHeight.value - scaledHeight.value) / 2)
+
+  // 缩放样式对象
+  const scaleStyle = computed(() => ({
+    transform: `scale(${scale.value})`,
+    transformOrigin: 'top left',
+    width: `${DESIGN_WIDTH}px`,
+    height: `${DESIGN_HEIGHT}px`,
+    position: 'absolute' as const,
+    left: `${offsetX.value}px`,
+    top: `${offsetY.value}px`
+  }))
+
+  // 更新窗口尺寸
+  const updateWindowSize = () => {
+    windowWidth.value = window.innerWidth
+    windowHeight.value = window.innerHeight
+  }
+
+  // 监听窗口大小变化
+  onMounted(() => {
+    window.addEventListener('resize', updateWindowSize)
+    updateWindowSize()
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateWindowSize)
+  })
+
+  return {
+    // 响应式数据
+    windowWidth,
+    windowHeight,
+    scale,
+    scaledWidth,
+    scaledHeight,
+    offsetX,
+    offsetY,
+
+    // 样式对象
+    scaleStyle,
+
+    // 常量
+    DESIGN_WIDTH,
+    DESIGN_HEIGHT
+  }
+}

src/main.ts

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,45 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import('@/views/home/index.vue'),
+    meta: {
+      title: '首页'
+    }
+  },
+  {
+    path: '/guide',
+    name: 'Guide',
+    component: () => import('@/views/guide/index.vue'),
+    meta: {
+      title: '使用引导'
+    }
+  },
+  {
+    path: '/action',
+    name: 'Action',
+    component: () => import('@/views/home/action.vue'),
+    meta: {
+      title: '开始拍摄'
+    }
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+// 路由守卫
+router.beforeEach((to, _from, next) => {
+  // 设置页面标题
+  if (to.meta?.title) {
+    document.title = `${to.meta.title} - 短视频达人`
+  }
+  next()
+})
+
+export default router

src/style.css

@@ -0,0 +1,44 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* @import "./assets/styles/tailwind.css"; */
+
+/* 重置样式 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.6;
+  color: #333;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+}
+
+/* 自定义滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}