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

src/views/skill/video.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+import { IMAGE_PATHS } from '@/utils'
+import six from '/video/新手导航_九种构图法.mp4'
+
+const router = useRouter()
+
+const videoRef = ref()
+
+const handleClose = () => {
+  router.back()
+}
+
+const handlePlay = () => {
+  if (!videoRef.value) return
+  videoRef.value.muted = false
+  videoRef.value.volume = 1
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative bg-white/10" @click="handlePlay">
+    <!-- 返回 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+
+    <video ref="videoRef" :src="six" controls></video>
+  </div>
+</template>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  /* 核心：保持视频比例，多余部分被裁剪 */
+  object-fit: cover;
+}
+</style>