From b072f5eeca9cdc96697c49cd668a221c8b78374f Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 2 Nov 2025 03:02:24 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=94=E5=9B=9E=E5=9B=BE=E6=A0=87=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=BF=9B=E5=BA=A6=E6=98=BE=E7=A4=BA=EF=BC=8C=E7=BE=8E?=
 =?UTF-8?q?=E5=8C=96=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/app/layouts/BackToTop.vue    | 152 +++++++++++++++---
 1 file changed, 134 insertions(+), 18 deletions(-)

diff --git a/apps/jingrow/frontend/src/app/layouts/BackToTop.vue b/apps/jingrow/frontend/src/app/layouts/BackToTop.vue
index a5e257c..44161be 100644
--- a/apps/jingrow/frontend/src/app/layouts/BackToTop.vue
+++ b/apps/jingrow/frontend/src/app/layouts/BackToTop.vue
@@ -1,24 +1,45 @@
 <template>
   <transition name="back-to-top-fade">
-    <n-button
+    <div
       v-if="visible"
-      circle
-      type="primary"
-      size="large"
       class="back-to-top-btn"
       @click="scrollToTop"
       :title="t('Back to top')"
     >
-      <template #icon>
-        <Icon icon="tabler:arrow-up" :width="20" :height="20" />
-      </template>
-    </n-button>
+      <!-- SVG 圆形进度条 -->
+      <svg class="progress-ring" viewBox="0 0 56 56">
+        <!-- 背景圆圈（灰色） -->
+        <circle
+          class="progress-ring-bg"
+          cx="28"
+          cy="28"
+          r="26"
+          fill="none"
+          stroke="#e5e7eb"
+          stroke-width="2"
+        />
+        <!-- 进度圆圈（绿色） -->
+        <circle
+          class="progress-ring-progress"
+          cx="28"
+          cy="28"
+          r="26"
+          fill="none"
+          stroke="#22c55e"
+          stroke-width="2"
+          stroke-linecap="round"
+          :stroke-dasharray="circumference"
+          :stroke-dashoffset="progressOffset"
+        />
+      </svg>
+      <!-- 箭头图标 -->
+      <Icon icon="tabler:arrow-up" :width="20" :height="20" class="arrow-icon" />
+    </div>
   </transition>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
-import { NButton } from 'naive-ui'
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import { Icon } from '@iconify/vue'
 import { t } from '@/shared/i18n'
 
@@ -28,9 +49,21 @@ const visible = ref(false)
 // 滚动阈值（滚动超过多少像素后显示按钮）
 const SCROLL_THRESHOLD = 300
 
+// 滚动进度（0-1）
+const scrollProgress = ref(0)
+
 // 存储已注册的滚动容器，用于清理
 const registeredContainers = ref<(Element | Window)[]>([])
 
+// SVG 圆形进度条的半径
+const radius = 26
+const circumference = computed(() => 2 * Math.PI * radius)
+
+// 进度条偏移量（用于显示进度）
+const progressOffset = computed(() => {
+  return circumference.value * (1 - scrollProgress.value)
+})
+
 // 找到所有可能的滚动容器
 const findScrollContainers = (): (Element | Window)[] => {
   const containers: (Element | Window)[] = [window]
@@ -68,6 +101,24 @@ const getScrollTop = (container: Element | Window): number => {
   }
 }
 
+// 获取容器的滚动高度信息
+const getScrollInfo = (container: Element | Window): { scrollTop: number; scrollHeight: number; clientHeight: number } => {
+  if (container === window) {
+    return {
+      scrollTop: window.pageYOffset || document.documentElement.scrollTop || 0,
+      scrollHeight: document.documentElement.scrollHeight || document.body.scrollHeight || 0,
+      clientHeight: window.innerHeight || document.documentElement.clientHeight || 0
+    }
+  } else {
+    const el = container as Element
+    return {
+      scrollTop: el.scrollTop || 0,
+      scrollHeight: el.scrollHeight || 0,
+      clientHeight: el.clientHeight || 0
+    }
+  }
+}
+
 // 滚动到顶部
 const scrollToTop = () => {
   const containers = registeredContainers.value.length > 0 
@@ -109,15 +160,31 @@ const handleScroll = () => {
     return
   }
   
-  // 检查所有容器，取最大滚动值
+  // 检查所有容器，取最大滚动值和总高度
   let maxScrollTop = 0
+  let maxProgress = 0
+  
   containers.forEach(container => {
-    const scrollTop = getScrollTop(container)
+    const info = getScrollInfo(container)
+    const scrollTop = info.scrollTop
+    const maxScroll = info.scrollHeight - info.clientHeight
+    
     if (scrollTop > maxScrollTop) {
       maxScrollTop = scrollTop
     }
+    
+    // 计算当前容器的滚动进度
+    if (maxScroll > 0) {
+      const progress = Math.min(scrollTop / maxScroll, 1)
+      if (progress > maxProgress) {
+        maxProgress = progress
+      }
+    }
   })
   
+  // 更新滚动进度
+  scrollProgress.value = maxProgress
+  
   // 根据最大滚动值判断是否显示按钮
   visible.value = maxScrollTop > SCROLL_THRESHOLD
   
@@ -125,11 +192,17 @@ const handleScroll = () => {
   if (maxScrollTop > 0) {
     console.log('滚动检测:', {
       maxScrollTop,
+      scrollProgress: maxProgress,
       visible: visible.value,
-      containers: containers.map(c => ({
-        container: c === window ? 'window' : (c as Element).className || (c as Element).tagName,
-        scrollTop: getScrollTop(c)
-      }))
+      containers: containers.map(c => {
+        const info = getScrollInfo(c)
+        return {
+          container: c === window ? 'window' : (c as Element).className || (c as Element).tagName,
+          scrollTop: info.scrollTop,
+          scrollHeight: info.scrollHeight,
+          clientHeight: info.clientHeight
+        }
+      })
     })
   }
 }
@@ -167,13 +240,51 @@ onUnmounted(() => {
   right: 24px;
   bottom: 24px;
   z-index: 1000;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  width: 56px;
+  height: 56px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .back-to-top-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-color: #22c55e;
+}
+
+.progress-ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.progress-ring-bg {
+  transition: stroke 0.3s ease;
+}
+
+.progress-ring-progress {
+  transition: stroke-dashoffset 0.1s linear;
+}
+
+.arrow-icon {
+  position: relative;
+  z-index: 1;
+  color: #22c55e;
+  transition: color 0.3s ease;
+}
+
+.back-to-top-btn:hover .arrow-icon {
+  color: #16a34a;
 }
 
 /* 移动端调整位置 */
@@ -184,6 +295,11 @@ onUnmounted(() => {
     width: 48px;
     height: 48px;
   }
+  
+  .arrow-icon {
+    width: 18px;
+    height: 18px;
+  }
 }
 
 /* 淡入淡出动画 */