feat(组件): 添加返回顶部组件并集成到家庭排名页

在家庭排名页面添加返回顶部功能，提升长页面浏览体验
- 创建新的BackToTop组件，支持自定义触发距离
- 在components.d.ts中注册全局组件
- 在FamilyRank页面集成并使用该组件

@@ -8,10 +8,12 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AppHeader: typeof import('./src/components/AppHeader.vue')['default']
+    BackToTop: typeof import('./src/components/BackToTop.vue')['default']
     BottomNav: typeof import('./src/components/BottomNav.vue')['default']
     GlassCard: typeof import('./src/components/GlassCard.vue')['default']
     NavBar: typeof import('./src/components/navBar.vue')['default']
     NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
+    NutBacktop: typeof import('@nutui/nutui-taro')['Backtop']
     NutButton: typeof import('@nutui/nutui-taro')['Button']
     NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker']
     NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']

+<!--
+ * @Date: 2025-09-02 13:06:39
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-09-02 13:12:20
+ * @FilePath: /lls_program/src/components/BackToTop.vue
+ * @Description: 文件描述
+-->
+<template>
+  <view
+    v-if="showBackToTop"
+    class="back-to-top"
+    @click="scrollToTop"
+  >
+    <view class="back-to-top-icon">↑</view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { usePageScroll } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
+
+/**
+ * 返回顶部组件的属性定义
+ */
+const props = defineProps({
+  // 触发显示返回顶部按钮的滚动距离，单位rpx
+  distance: {
+    type: Number,
+    default: 300
+  }
+})
+
+// 是否显示返回顶部按钮
+const showBackToTop = ref(false)
+
+/**
+ * 监听页面滚动事件
+ */
+usePageScroll((res) => {
+  showBackToTop.value = res.scrollTop > props.distance
+})
+
+/**
+ * 滚动到页面顶部
+ */
+const scrollToTop = () => {
+  Taro.pageScrollTo({
+    scrollTop: 0,
+    duration: 300
+  })
+}
+</script>
+
+<style lang="less">
+.back-to-top {
+  position: fixed;
+  right: 30rpx;
+  bottom: 180rpx;
+  width: 80rpx;
+  height: 80rpx;
+  background: rgba(64, 158, 255, 0.8);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(10rpx);
+  transition: all 0.3s ease;
+  z-index: 999;
+
+  &:hover {
+    background: rgba(64, 158, 255, 1);
+    transform: translateY(-4rpx);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.back-to-top-icon {
+  color: white;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+</style>

 <!--
  * @Date: 2025-09-01 13:07:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-01 16:05:41
+ * @LastEditTime: 2025-09-02 13:13:17
  * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
  * @Description: 文件描述
 -->
@@ -122,11 +122,15 @@
         </view>
       </view>
     </view>
+
+    <!-- 返回顶部组件 -->
+    <BackToTop :distance="200" />
   </view>
 </template>
 
 <script setup>
 import { ref, computed } from 'vue'
+import BackToTop from '@/components/BackToTop.vue'
 
 // 当前激活的tab
 const activeTab = ref('huangpu')
@@ -134,6 +138,8 @@ const activeTab = ref('huangpu')
 // 内容切换状态
 const isContentSwitching = ref(false)
 
+
+
 /**
  * 切换tab
  * @param {string} tab - tab名称
@@ -173,6 +179,8 @@ const formatStepsForList = (steps) => {
   return steps ? steps.toLocaleString() : '0'
 }
 
+
+
 // 前三名数据
 const topRanks = ref([
   {
@@ -649,6 +657,7 @@ const myRank = ref({
       }
     }
   }
-}
 
+
+}
 </style>