refactor: 删除不再使用的图像文件，更新引导组件以支持垂直偏移功能

src/components/Guide/GuideDragon.vue

@@ -6,9 +6,12 @@
 			:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.GUIDE_DRAGON_BG) }"></div> -->
 
     <!-- 导学小龙UI区域 -->
-    <div class="guide-ui absolute left-16 top-1/2 transform -translate-y-1/2">
+    <div class="guide-ui absolute left-16" :style="positionStyle">
       <!-- 主UI面板 -->
-      <div class="guide-panel" :style="{ backgroundImage: getBackgroundImage('components/box') }">
+      <div
+        class="guide-panel bg-no-repeat"
+        :style="{ backgroundImage: getBackgroundImage('components/box') }"
+      >
         <!-- 标题区域 -->
 
         <ImgButton
@@ -48,7 +51,7 @@
     </div>
 
     <!-- 小龙角色区域 -->
-    <div class="dragon-character absolute right-16 top-1/2 transform -translate-y-1/2">
+    <div class="dragon-character absolute right-16" :style="positionStyle">
       <div class="dragon-container">
         <!-- 小龙角色图片 -->
         <img :src="getStaticImage(IMAGE_PATHS.GUIDE_PERSON)" alt="导学小龙" class="dragon-image" />
@@ -60,6 +63,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { getStaticImage, getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 
@@ -70,6 +74,8 @@ interface Props {
   currentStep?: number
   /** 总步骤数 */
   totalSteps?: number
+  /** 垂直偏移（仅Y轴），支持 number(px) 或 '10%'/'120px' */
+  positionOffsetY?: number | string
 }
 
 interface Emits {
@@ -78,10 +84,11 @@ interface Emits {
   (e: 'complete'): void
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   showSkip: true,
   currentStep: 1,
-  totalSteps: 1
+  totalSteps: 1,
+  positionOffsetY: '50%'
 })
 
 const emit = defineEmits<Emits>()
@@ -99,6 +106,21 @@ const handleSkip = () => {
 const handleContinue = () => {
   emit('next')
 }
+
+// 根据 position 计算垂直定位类
+const normalizeOffset = (value: number | string) => {
+  if (typeof value === 'number') return `${value}px`
+  return value
+}
+
+const positionStyle = computed(() => {
+  const y = normalizeOffset(props.positionOffsetY)
+  // 百分比：按中心定位；px：按像素直接定位
+  if (typeof props.positionOffsetY === 'string' && props.positionOffsetY.includes('%')) {
+    return { top: y, transform: 'translateY(-50%)' }
+  }
+  return { top: y, transform: 'translateY(0)' }
+})
 </script>
 
 <style scoped>
@@ -166,11 +188,11 @@ const handleContinue = () => {
 }
 
 .content-text {
-  @apply text-white leading-relaxed font-bold text-4xl flex-1;
+  @apply text-white leading-normal font-bold text-4xl flex-1;
 }
 
 .progress-indicator {
-  @apply absolute bottom-6 right-6;
+  @apply absolute bottom-6 right-10;
 }
 
 .progress-dots {
@@ -239,17 +261,17 @@ const handleContinue = () => {
   }
 }
 
-.dragon-character {
+.dragon-container {
   animation: float 3s ease-in-out infinite;
 }
 
 @keyframes float {
   0%,
   100% {
-    transform: translateY(-50%) translateY(0);
+    transform: translateY(0);
   }
   50% {
-    transform: translateY(-50%) translateY(-10px);
+    transform: translateY(-10px);
   }
 }
 </style>

src/components/Guide/GuideSteps.vue

@@ -12,6 +12,7 @@
           :show-skip="currentStep < totalSteps"
           :current-step="currentStep"
           :total-steps="totalSteps"
+          :position-offset-y="props.positionOffsetY"
           @next="handleNext"
           @skip="handleSkip"
           @complete="handleComplete"
@@ -27,8 +28,16 @@
                 :total-steps="totalSteps"
               />
             </div>
-            <!-- 兼容原有的配置形式 -->
-            <div v-else v-html="currentStepContent"></div>
+            <!-- 兼容原有的配置形式：也包裹 GuideStepsItem，获得继续按钮 -->
+            <GuideStepsItem
+              v-else
+              :is-last-step="currentStep >= totalSteps"
+              :current-step="currentStep"
+              :total-steps="totalSteps"
+              @continue="handleNext"
+            >
+              {{ currentStepContent }}
+            </GuideStepsItem>
           </template>
         </GuideDragon>
       </div>
@@ -40,6 +49,7 @@
 import { ref, computed, useSlots, onMounted, onUnmounted, reactive } from 'vue'
 import SpotlightOverlay from './SpotlightOverlay.vue'
 import GuideDragon from './GuideDragon.vue'
+import GuideStepsItem from './GuideStepsItem.vue'
 
 interface GuideStep {
   id: string
@@ -63,6 +73,8 @@ interface Props {
   highlightPadding?: number
   /** 高亮圆角，默认16 */
   highlightRadius?: number
+  /** 垂直偏移（仅Y轴），支持 number(px) 或 '10%'/'120px' */
+  positionOffsetY?: number | string
 }
 
 interface Emits {
@@ -78,7 +90,8 @@ const props = withDefaults(defineProps<Props>(), {
   autoPlayInterval: 0,
   highlightSelector: null,
   highlightPadding: 8,
-  highlightRadius: 16
+  highlightRadius: 16,
+  positionOffsetY: '50%'
 })
 
 const emit = defineEmits<Emits>()
@@ -138,7 +151,7 @@ const currentStepContent = computed(() => {
   if (!step) return ''
 
   if (!step.title) {
-    return `<p>${step.content}</p>`
+    return `${step.content}`
   }
 
   return `

src/components/Guide/GuideStepsItem.vue

@@ -2,7 +2,7 @@
   <span class="guide-steps-item">
     <slot />
     <ImgButton
-      v-if="!isLastStep"
+      v-if="currentStep !== totalSteps"
       :image="IMAGE_PATHS.BUTTONS.CONTINUE"
       class="continue-button"
       @click="handleContinue"

src/components/Guide/SpotlightOverlay.vue

@@ -79,7 +79,7 @@ const borderRadius = props.borderRadius
 .spotlight-overlay {
   position: fixed;
   inset: 0;
-  pointer-events: none;
+  pointer-events: auto;
   z-index: 100000;
 }
 

src/components/Guide/types.ts

@@ -11,6 +11,8 @@ export interface GuideDragonProps {
   showSkip?: boolean
   currentStep?: number
   totalSteps?: number
+  /** 垂直偏移（仅Y轴），支持 number(px) 或 '10%'/'120px' */
+  positionOffsetY?: number | string
 }
 
 // 引导步骤组件Props类型
@@ -19,6 +21,8 @@ export interface GuideStepsProps {
   autoStart?: boolean
   keyboardNavigation?: boolean
   autoPlayInterval?: number
+  /** 垂直偏移（仅Y轴），支持 number(px) 或 '10%'/'120px' */
+  positionOffsetY?: number | string
 }
 
 // 引导组件事件类型