feat: 添加 SpotlightOverlay 组件，更新引导步骤组件以支持高亮功能，调整样式和路由配置

src/views/vlog/index.vue

@@ -4,6 +4,9 @@ import { ImgButton } from '@/components/Button'
 
 import { ref } from 'vue'
 import { ProgressBar } from '@/components'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const currentStep = ref(0)
 
@@ -16,6 +19,12 @@ const handleStepChange = (step: number) => {
   console.log('步骤变化:', step)
   // 处理步骤变化逻辑
 }
+
+const handleWorkClick = () => {
+  console.log('任务取景按钮点击')
+  // 处理任务取景按钮点击逻辑
+  router.push({ name: 'Work' })
+}
 </script>
 
 <template>
@@ -42,7 +51,7 @@ const handleStepChange = (step: number) => {
       class="absolute left-24 top-24"
       :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
     >
-      <ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" />
+      <ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" @click="handleWorkClick" />
     </div>
 
     <!-- 引导任务 -->

src/views/vlog/work/components/WorkSideSwitcher.vue

@@ -0,0 +1,47 @@
+<template>
+  <ImageSwitchList
+    v-model="innerValue"
+    :items="items"
+    direction="vertical"
+    :item-class="itemClass"
+    @change="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { ImageSwitchList } from '@/components/Switcher'
+import { computed } from 'vue'
+
+type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'
+
+interface Props {
+  modelValue?: WorkTab
+  itemClass?: string
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: WorkTab): void
+  (e: 'change', value: WorkTab): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 'vlog',
+  itemClass: 'w-[260px] h-[64px] rounded-[18px]'
+})
+
+const emit = defineEmits<Emits>()
+
+const innerValue = computed({
+  get: () => props.modelValue as WorkTab,
+  set: (val: WorkTab) => emit('update:modelValue', val)
+})
+
+const items = [
+  { key: 'vlog', activeImage: 'work/vlog初识-当前', inactiveImage: 'work/vlog初识-未选中' },
+  { key: 'case', activeImage: 'work/案例赏析-当前', inactiveImage: 'work/案例赏析-未选中' },
+  { key: 'profession', activeImage: 'work/专业剖析-当前', inactiveImage: 'work/专业剖析-未选中' },
+  { key: 'idea', activeImage: 'work/思路提点-当前', inactiveImage: 'work/思路提点-未选中' }
+]
+
+const onChange = (val: string) => emit('change', val as WorkTab)
+</script>

src/views/vlog/work/index.vue

@@ -0,0 +1,78 @@
+<script lang="tsx" setup>
+import { ref, computed } from 'vue'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
+import { GuideSteps } from '@/components/Guide'
+
+type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'
+
+const selected = ref<WorkTab>('vlog')
+const stepIndex = ref(0)
+
+const steps = [
+  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+)
+
+interface SimpleStep {
+  id: string
+  content: string
+}
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+</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.WORK.BG) }"
+    ></div>
+
+    <!-- border图片 -->
+    <div
+      class="work-border absolute top-[140px] left-24 inset-0 bg-cover bg-center bg-no-repeat z-10 w-[1360px] h-[800px] p-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.BORDER) }"
+    >
+      <div
+        class="flex items-center pl-16 w-[1357px] h-[265px] absolute -bottom-16 left-0 bg-cover bg-center bg-no-repeat z-20"
+        :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.TITLE) }"
+      >
+        <span
+          class="mt-24 text-white font-bold text-6xl [text-shadow:0_2px_4px_rgba(0,0,0,0.2),0_0_6px_rgba(0,207,255,0.9),0_0_14px_rgba(0,207,255,0.7)]"
+        >
+          记录身边的美好</span
+        >
+      </div>
+      <img class="rounded-[62px]" src="@/assets/images/work/image1.png" alt="" />
+    </div>
+
+    <!-- 左侧选项切换 -->
+    <div class="absolute right-4 top-32 z-20">
+      <WorkSideSwitcher
+        v-model="selected"
+        @change="() => {}"
+        :item-class="'w-[462px] h-[142px] '"
+      />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <ImgButton class="absolute right-14 bottom-10" :image="IMAGE_PATHS.WORK.TASK_BTN" />
+
+    <!-- 引导与高亮 -->
+    <GuideSteps
+      :steps="steps"
+      :highlight-selector="currentHighlight"
+      :highlight-padding="12"
+      :highlight-radius="20"
+      @step-change="handleStepChange"
+    />
+  </div>
+</template>