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

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"
     />
 
     <!-- 引导与高亮 -->