<template>
  <!-- 悬浮置顶按钮 -->
  <Transition name="fade-slide">
    <button
      v-show="showScrollToTop"
      aria-label="回到顶部"
      class="scroll-to-top-btn fixed bottom-8 right-8 z-50 text-white rounded-full p-3 shadow-lg transition-all duration-300 focus:outline-none"
      title="回到顶部"
      @click="scrollToTop"
    >
      <UIcon name="i-lucide-chevron-up" class="w-6 h-6" />
    </button>
  </Transition>
</template>

<script setup lang="ts">
// 响应式状态
const showScrollToTop = ref(false)

// 滚动监听函数
const handleScroll = () => {
  showScrollToTop.value = window.scrollY > 300
}

// 滚动到顶部函数
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// 组件挂载时添加滚动监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

// 组件卸载时移除滚动监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>


/* 按钮悬停效果增强 */
.scroll-to-top-btn {
  backdrop-filter: blur(10px);
  background: rgba(59, 130, 246, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.scroll-to-top-btn:hover {
  background: rgba(37, 99, 235, 0.95);
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .scroll-to-top-btn {
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem;
  }
}

/* 按钮点击波纹效果 */
.scroll-to-top-btn:active {
  transform: scale(0.95);
}

/* 焦点状态优化 */
.scroll-to-top-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}
</style>
