feat: 添加技能树路由，优化组件缓存和图片预览功能

src/views/home/action.vue

@@ -16,8 +16,8 @@ const isImageLoading = ref(false)
 // 预加载图片映射
 const imageMap = {
   vlog: IMAGE_PATHS.ACTION.VIDEO1,
-  film: IMAGE_PATHS.ACTION.VIDEO2,
-  interview: IMAGE_PATHS.ACTION.VIDEO3
+  film: IMAGE_PATHS.ACTION.VIDEO3,
+  interview: IMAGE_PATHS.ACTION.VIDEO2
 }
 
 // 预加载所有图片
@@ -63,6 +63,12 @@ const selectedImage = computed(() => {
   return getBackgroundImage(imageMap[selectedModule.value])
 })
 
+const handleSkill = () => {
+  router.push({
+    name: 'Skill'
+  })
+}
+
 // 生命周期
 onMounted(() => {
   preloadImages()
@@ -90,8 +96,10 @@ onMounted(() => {
       @click.stop="handleClick"
     ></div>
 
+    <!-- 技能树 按钮 -->
     <ImgButton
       v-if="status"
+      @click="handleSkill"
       :image="IMAGE_PATHS.ACTION.SKILLS_BTN"
       class="absolute bottom-0 right-0 z-30"
     />
@@ -127,16 +135,5 @@ onMounted(() => {
         alt=""
       />
     </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>