feat: 添加 Vlog 模块路由和相关图像路径，更新模块切换器交互

src/views/home/action.vue

@@ -3,6 +3,9 @@ import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { ModuleSwitcher } from './components/ModuleSwitcher'
 import { computed, ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 // 响应式状态
 const status = ref(false)
@@ -48,6 +51,13 @@ const handleModuleChange = (module: 'vlog' | 'film' | 'interview') => {
   }, 100)
 }
 
+const handleClick = () => {
+  router.push({
+    //首字母大写
+    name: selectedModule.value.charAt(0).toUpperCase() + selectedModule.value.slice(1)
+  })
+}
+
 // 计算属性
 const selectedImage = computed(() => {
   return getBackgroundImage(imageMap[selectedModule.value])
@@ -68,15 +78,16 @@ onMounted(() => {
     ></div>
 
     <!-- 选择模块 -->
-    <div :class="['absolute left-0 top-[-140px] inset-0 z-[8]']">
+    <div :class="['absolute left-0 top-[-140px] inset-0 z-[8] pointer-events-none']">
       <ModuleSwitcher v-model="selectedModule" @change="handleModuleChange" />
     </div>
 
     <!-- 电视机 -->
     <div
-      class="absolute w-[765px] h-[768px] right-0 top-0 z-[5] transition-opacity duration-200"
+      class="absolute w-[765px] h-[768px] right-0 top-0 z-[5] transition-opacity duration-200 cursor-pointer"
       :class="{ 'opacity-50': isImageLoading }"
       :style="{ backgroundImage: selectedImage }"
+      @click.stop="handleClick"
     ></div>
 
     <ImgButton

src/views/home/components/ModuleSwitcher/ModuleSwitcher.vue

@@ -115,5 +115,6 @@ watch(
   position: relative;
   width: 100%;
   height: 1000px;
+  pointer-events: none;
 }
 </style>

src/views/vlog/index.vue

@@ -0,0 +1,59 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+import { ref } from 'vue'
+import { ProgressBar } from '@/components'
+
+const currentStep = ref(0)
+
+const handleComplete = () => {
+  console.log('完成前置条件')
+  // 处理完成逻辑
+}
+
+const handleStepChange = (step: number) => {
+  console.log('步骤变化:', step)
+  // 处理步骤变化逻辑
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
+    ></div>
+
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
+    ></div>
+
+    <!-- 标题 -->
+    <div class="absolute top-2 left-1/2 -translate-x-1/2">
+      <ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <div
+      class="absolute left-24 top-24"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
+    >
+      <ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" />
+    </div>
+
+    <!-- 引导任务 -->
+    <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" />
+
+    <div class="absolute bottom-0 w-full">
+      <ProgressBar
+        :current-step="currentStep"
+        @complete="handleComplete"
+        @step-change="handleStepChange"
+      />
+    </div>
+  </div>
+</template>