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

src/components/Switcher/ImageSwitchList.vue

@@ -0,0 +1,82 @@
+<template>
+  <div :class="['img-switch-list', directionClass]">
+    <div
+      v-for="item in items"
+      :key="item.key"
+      :class="['img-switch-item', itemClass, `img-switch-item--${item.key}`]"
+      :data-key="item.key"
+      :style="{ backgroundImage: getBackgroundImage(getItemImage(item)) }"
+      @click="onSelect(item.key)"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getBackgroundImage } from '@/utils'
+
+interface SwitchItem {
+  key: string
+  activeImage: string
+  inactiveImage: string
+}
+
+interface Props {
+  items: SwitchItem[]
+  modelValue?: string
+  direction?: 'vertical' | 'horizontal'
+  itemClass?: string
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+  (e: 'change', value: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  direction: 'vertical',
+  itemClass: ''
+})
+
+const emit = defineEmits<Emits>()
+
+const directionClass = computed(() => (props.direction === 'vertical' ? 'vertical' : 'horizontal'))
+
+const getItemImage = (item: SwitchItem) => {
+  return item.key === props.modelValue ? item.activeImage : item.inactiveImage
+}
+
+const onSelect = (key: string) => {
+  if (key === props.modelValue) return
+  emit('update:modelValue', key)
+  emit('change', key)
+}
+</script>
+
+<style scoped>
+.img-switch-list {
+  display: flex;
+  gap: 16px;
+  transition: all 0.2s ease;
+}
+
+.img-switch-list.vertical {
+  flex-direction: column;
+}
+
+.img-switch-list.horizontal {
+  flex-direction: row;
+}
+
+.img-switch-item {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+/* .img-switch-item:hover {
+  transform: scale(1.05);
+} */
+</style>

src/components/Switcher/index.ts

@@ -0,0 +1 @@
+export { default as ImageSwitchList } from './ImageSwitchList.vue'