From 26e8d30fd9f946d58f80d79fac85d2c06231f9a9 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 27 Oct 2025 17:03:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=82=AC=E6=B5=AE=E6=8C=87=E5=AE=9A=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.vue                    |  6 ++-
 app/components/ScrollToTop.vue | 79 ++++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 app/components/ScrollToTop.vue

diff --git a/app/app.vue b/app/app.vue
index cb0eb30..c7e6bb1 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -126,6 +126,9 @@
           </UPageSection>
         </main>
           
+        <!-- 悬浮置顶按钮组件 -->
+        <ScrollToTop />
+          
       </UPage>
     </NuxtLayout>
   </UApp>
@@ -222,4 +225,5 @@ const users = ref([
     }
   }
 ])
-</script>
\ No newline at end of file
+
+</script>
diff --git a/app/components/ScrollToTop.vue b/app/components/ScrollToTop.vue
new file mode 100644
index 0000000..c58c06a
--- /dev/null
+++ b/app/components/ScrollToTop.vue
@@ -0,0 +1,79 @@
+<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>