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

src/views/vlog/index.vue

@@ -27,6 +27,10 @@ const handleWorkClick = () => {
   router.push({ name: 'Work' })
 }
 
+const handleClose = () => {
+  router.back()
+}
+
 onMounted(() => {
   if (route.query.key === 'video') {
     currentStep.value = 1
@@ -42,6 +46,13 @@ onMounted(() => {
       :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
     ></div>
 
+    <!-- 关闭 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+      @click="handleClose"
+    />
+
     <!-- 背景图片 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat"

src/views/vlog/video/index.vue

@@ -38,7 +38,7 @@ const handleVideoChange = () => {
     steps.value = [
       {
         id: 'step1',
-        content: '已完成专业剖析,即可查看脚本'
+        content: '恭喜你，已完成专业剖析的学习，点击【查看脚本】回顾视频脚本吧!'
       }
     ]
     return

src/views/vlog/work/index.vue

@@ -1,10 +1,13 @@
-<script lang="tsx" setup>
-import { ref, computed, onMounted } from 'vue'
+<script lang="tsx" name="Work" setup>
+defineOptions({ name: 'Work' })
+import { ref, computed, onMounted, onActivated } from 'vue'
 import { getBackgroundImage, IMAGE_PATHS, getStaticImage } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
 import { GuideSteps } from '@/components/Guide'
 import { useRouter, useRoute } from 'vue-router'
+import { useScale } from '@/composables/useScale'
+import { ImagePreview } from '@/components'
 
 const router = useRouter()
 const route = useRoute()
@@ -91,7 +94,22 @@ const handleClose = () => {
 //状态是否完成前置
 const isComplete = ref(false)
 
-onMounted(() => {
+const handleWorkClick = () => {
+  if (!isComplete.value) return
+  openImages([getStaticImage('work/桂花酒酿小圆子')])
+}
+const { scale, offsetX, offsetY } = useScale()
+
+function openImages(urls: string[], startIndex = 0) {
+  ImagePreview({
+    images: urls,
+    startIndex,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+  })
+}
+
+onActivated(() => {
   if (route.query.key === 'work') {
     selected.value = 'profession'
     isComplete.value = true
@@ -153,6 +171,7 @@ onMounted(() => {
     <ImgButton
       class="absolute right-14 bottom-10"
       :image="isComplete ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
+      @click="handleWorkClick"
     />
 
     <!-- 引导与高亮 -->