feat: 回到顶部按钮组件化

2026-05-31 21:30:33 +08:00 · 2025-04-08 21:52:04 +08:00
parent 57c6d7e8f3
commit bb6cfd9d0e
3 changed files with 139 additions and 200 deletions
--- a/src/@core/components/ScrollToTopBtn.vue
+++ b/src/@core/components/ScrollToTopBtn.vue
@@ -1,62 +1,87 @@
 <script lang="ts" setup>
+// 控制回到顶部按钮的可见性
+const showScrollToTop = ref(false)
+const scrollThreshold = 200 // 滚动多少像素后显示按钮
+
+// 滚动事件处理函数
+const handleScroll = () => {
+  showScrollToTop.value = window.scrollY > scrollThreshold
+}
+
 const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
 }
+
+onMounted(async () => {
+  // Add scroll event listener
+  window.addEventListener('scroll', handleScroll)
+  // Initial check for scroll-to-top
+  handleScroll()
+})
+
+onUnmounted(() => {
+  // Remove scroll event listener
+  window.removeEventListener('scroll', handleScroll)
+})
 </script>

 <template>
  <div class="global-action-buttons">
-    <button class="global-action-button" @click="scrollToTop">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M7 14L12 9L17 14"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </button>
+    <Transition name="scroll-fade">
+      <button v-show="showScrollToTop" class="global-action-button" @click="scrollToTop">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M7 14L12 9L17 14"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    </Transition>
  </div>
 </template>

 <style lang="scss" scoped>
+/* Global Action Button Styles (FAB) */
 .global-action-buttons {
  position: fixed;
+  bottom: 30px;
+  right: 30px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 16px;
-  inset-block-end: 30px;
-  inset-inline-end: 30px;
 }

 .global-action-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  width: 44px;
+  height: 44px;
+  background-color: rgba(var(--v-theme-background), 0.8);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
  border-radius: 50%;
-  backdrop-filter: blur(6px);
-  background-color: rgba(var(--v-theme-surface), 0.8);
-  block-size: 44px;
-  color: rgb(var(--v-theme-on-surface));
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
+  display: flex;
+  justify-content: center;
+  align-items: center;
  cursor: pointer;
-  inline-size: 44px;
-  opacity: 0.7;
+  color: rgb(var(--v-theme-on-surface));
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  &:hover {
-    background-color: rgba(var(--v-theme-surface), 0.95);
-    color: rgb(var(--v-theme-primary));
-    opacity: 1;
+    background-color: rgba(var(--v-theme-background), 0.95);
    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
+    color: rgb(var(--v-theme-primary));
  }

  svg {
-    block-size: 20px;
-    inline-size: 20px;
    transition: all 0.3s ease;
+    width: 20px;
+    height: 20px;
  }
 }
 </style>
--- a/src/components/slide/SlideView.vue
+++ b/src/components/slide/SlideView.vue
@@ -1,29 +1,29 @@
 <script lang="ts" setup>
 import SlideViewTitle from '@/components/slide/SlideViewTitle.vue'
-import { ref, onMounted, onUnmounted, inject, computed } from 'vue';
+import { ref, onMounted, onUnmounted, inject, computed } from 'vue'

 // 元素
-const slideview_content = ref<HTMLElement | null>(null);
-const sliderContainer = ref<HTMLElement | null>(null);
+const slideview_content = ref<HTMLElement | null>(null)
+const sliderContainer = ref<HTMLElement | null>(null)
 // 分页切换状态: 0-左边不可用 1-两边可用 2-右边不可用 3-两边都不可用
-const disabled = ref(0);
+const disabled = ref(0)
 // 记录滚动值
-const slideview_scrollLeft = ref(0);
+const slideview_scrollLeft = ref(0)
 // 所有卡片数量
-let slide_card_length: number;
+let slide_card_length: number
 // 卡片间距
-let slide_gap_px: number;
+let slide_gap_px: number
 // 卡片宽度
-let card_width: number;
+let card_width: number
 // 容器最多显示N张卡片
-let card_max: number;
+let card_max: number
 // 当前定位
-let card_current: number;
+let card_current: number
 // 获取传入的链接地址
-const props: any = inject('rankingPropsKey', { linkurl: '', title: '' });
-const isScrolling = ref(false);
-let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
-const scrollTimeoutDuration = 1500; // 滚动停止后延迟时间 (ms)
+const props: any = inject('rankingPropsKey', { linkurl: '', title: '' })
+const isScrolling = ref(false)
+let scrollTimeout: ReturnType<typeof setTimeout> | null = null
+const scrollTimeoutDuration = 1500 // 滚动停止后延迟时间 (ms)

 // 分页切换
 function slideNext(next: boolean) {
@@ -45,13 +45,13 @@ function slideNext(next: boolean) {
  })

  // 点击后强制显示并重置计时器
-  isScrolling.value = true;
+  isScrolling.value = true
  if (scrollTimeout) {
-    clearTimeout(scrollTimeout);
+    clearTimeout(scrollTimeout)
  }
  scrollTimeout = setTimeout(() => {
-    isScrolling.value = false;
-  }, scrollTimeoutDuration);
+    isScrolling.value = false
+  }, scrollTimeoutDuration)
 }

 // 计算最大显示数量
@@ -67,23 +67,23 @@ function countMaxNumber() {

 // 修改分页切换按钮状态 & 处理滚动状态
 function handleContentScroll() {
-  if (!slideview_content.value) return;
+  if (!slideview_content.value) return
  // 更新按钮禁用状态
-  countDisabled(); 
+  countDisabled()

  // 更新滚动状态并重置计时器
-  isScrolling.value = true;
+  isScrolling.value = true
  if (scrollTimeout) {
-    clearTimeout(scrollTimeout);
+    clearTimeout(scrollTimeout)
  }
  scrollTimeout = setTimeout(() => {
-    isScrolling.value = false;
-  }, scrollTimeoutDuration); // 使用常量
+    isScrolling.value = false
+  }, scrollTimeoutDuration) // 使用常量
 }

 // 原始的 countDisabled 逻辑，现在由 handleContentScroll 调用
-function countDisabled() { 
-  if (!slideview_content.value) return;
+function countDisabled() {
+  if (!slideview_content.value) return
  slideview_scrollLeft.value = slideview_content.value.scrollLeft
  card_current =
    slideview_content.value.scrollLeft === 0
@@ -120,19 +120,14 @@ onActivated(() => {
 </script>

 <template>
-  <div 
-    ref="sliderContainer" 
-    class="slider-container" 
-    :class="{ 'is-scrolling': isScrolling }"
-  >
+  <div ref="sliderContainer" class="slider-container" :class="{ 'is-scrolling': isScrolling }">
    <div class="slider-header">
      <slot name="title">
        <SlideViewTitle />
      </slot>
-
      <!-- 查看全部按钮 -->
      <RouterLink v-if="props.linkurl" :to="props.linkurl" class="view-all-button">
-        <span>全部</span>
+        <span>更多</span>
        <svg width="16" height="16" viewBox="0 0 24 24" class="arrow-svg">
          <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
        </svg>
@@ -141,12 +136,7 @@ onActivated(() => {

    <div class="slider-content-wrapper">
      <div class="slider-content-container">
-        <div 
-          ref="slideview_content" 
-          class="slider-content" 
-          tabindex="0" 
-          @scroll="handleContentScroll"
-        >
+        <div ref="slideview_content" class="slider-content" tabindex="0" @scroll="handleContentScroll">
          <slot name="content" />
        </div>
      </div>
@@ -210,7 +200,6 @@ onActivated(() => {
  border-radius: 8px;
  padding: 5px 12px;
  background-color: transparent;
-  border: 1px solid rgba(var(--v-theme-primary), 0.3);
  color: rgb(var(--v-theme-primary));
  font-size: 0.85rem;
  font-weight: 500;
@@ -266,8 +255,9 @@ onActivated(() => {
  color: rgb(var(--v-theme-on-surface));
  opacity: 0;
  pointer-events: none;
-  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
-  
+  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease,
+    box-shadow 0.3s ease, border-color 0.3s ease;
+
  svg {
    fill: currentColor;
    opacity: 0.7;
@@ -276,14 +266,14 @@ onActivated(() => {
    height: 22px;
    filter: none;
  }
-  
+
  &:hover {
    background-color: rgba(var(--v-theme-background), 0.95);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    border-color: rgba(var(--v-theme-on-surface), 0.15);
    color: rgb(var(--v-theme-primary));
-    
+
    svg {
      opacity: 1;
    }
@@ -332,7 +322,7 @@ onActivated(() => {
    opacity: 1;
    pointer-events: auto;
  }
-  
+
  // 在 hover 设备上，即使在滚动，如果鼠标不悬停，按钮也应该隐藏
  // 因此，基础 .nav-button 的 opacity: 0 规则在这里仍然是必要的
  // (之前错误地以为 hover 会完全覆盖，但滚动时 class 和 hover 可能同时存在)
--- a/src/pages/recommend.vue
+++ b/src/pages/recommend.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import api from '@/api'
-import { useDisplay } from 'vuetify'
 import { RecommendSource } from '@/api/types'
 import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
-import { ref, onMounted, onUnmounted, computed, reactive, watch, nextTick } from 'vue';
-
-// APP
-const display = useDisplay()
+import { ref, onMounted, onUnmounted, computed, reactive, watch, nextTick } from 'vue'

 // 当前选择的分类
 const currentCategory = ref('全部')
@@ -169,45 +165,31 @@ const categoryIcons: Record<string, string> = {
  榜单: 'mdi-trophy',
 }

-// 控制回到顶部按钮的可见性
-const showScrollToTop = ref(false);
-const scrollThreshold = 200; // 滚动多少像素后显示按钮
-
-// 滚动事件处理函数
-const handleScroll = () => {
-  showScrollToTop.value = window.scrollY > scrollThreshold;
-};
-
-// 回到顶部函数 (如果需要，可以从VScrollToTopBtn或其他地方引入)
-const scrollToTop = () => {
-  window.scrollTo({ top: 0, behavior: 'smooth' });
-};
-
 // Ref for the tabs container
-const tabsContainerRef = ref<HTMLElement | null>(null);
+const tabsContainerRef = ref<HTMLElement | null>(null)
 // State for showing the scroll indicator
-const showTabsScrollIndicator = ref(false);
+const showTabsScrollIndicator = ref(false)

 // Function to check and update the indicator state
 const updateTabsIndicator = () => {
-  const el = tabsContainerRef.value;
-  if (!el) return;
-  
-  const tolerance = 1; // Allow 1px tolerance
-  const hasOverflow = el.scrollWidth > el.clientWidth + tolerance;
-  const isScrolledToEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - tolerance;
-  
-  showTabsScrollIndicator.value = hasOverflow && !isScrolledToEnd;
-};
+  const el = tabsContainerRef.value
+  if (!el) return
+
+  const tolerance = 1 // Allow 1px tolerance
+  const hasOverflow = el.scrollWidth > el.clientWidth + tolerance
+  const isScrolledToEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - tolerance
+
+  showTabsScrollIndicator.value = hasOverflow && !isScrolledToEnd
+}

 // Debounce resize handler
-let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+let resizeTimeout: ReturnType<typeof setTimeout> | null = null
 const handleResize = () => {
-  if (resizeTimeout) clearTimeout(resizeTimeout);
+  if (resizeTimeout) clearTimeout(resizeTimeout)
  resizeTimeout = setTimeout(() => {
-    updateTabsIndicator();
-  }, 150);
-};
+    updateTabsIndicator()
+  }, 150)
+}

 onBeforeMount(async () => {
  await loadConfig()
@@ -215,28 +197,22 @@ onBeforeMount(async () => {

 onMounted(async () => {
  await loadExtraRecommendSources()
-  // Add scroll event listener
-  window.addEventListener('scroll', handleScroll);
-  // Initial check for scroll-to-top
-  handleScroll(); 
-  
+
  // Add resize listener for tabs indicator
-  window.addEventListener('resize', handleResize);
+  window.addEventListener('resize', handleResize)
  // Initial check for tabs indicator after DOM update
-  await nextTick(); // Ensure element is rendered
-  updateTabsIndicator();
-  
+  await nextTick() // Ensure element is rendered
+  updateTabsIndicator()
+
  // Listen for scroll events specifically on the tabs container
-  tabsContainerRef.value?.addEventListener('scroll', updateTabsIndicator, { passive: true });
+  tabsContainerRef.value?.addEventListener('scroll', updateTabsIndicator, { passive: true })
 })

 onUnmounted(() => {
-  // Remove scroll event listener
-  window.removeEventListener('scroll', handleScroll);
  // Remove resize listener
-  window.removeEventListener('resize', handleResize);
+  window.removeEventListener('resize', handleResize)
  // Remove tabs scroll listener
-  tabsContainerRef.value?.removeEventListener('scroll', updateTabsIndicator);
+  tabsContainerRef.value?.removeEventListener('scroll', updateTabsIndicator)
 })

 onActivated(async () => {
@@ -257,11 +233,7 @@ watch(currentCategory, () => {
  <div class="mp-recommend">
    <!-- 页面顶部控制栏 -->
    <div class="recommend-header">
-      <div 
-        ref="tabsContainerRef" 
-        class="header-tabs" 
-        :class="{ 'show-indicator': showTabsScrollIndicator }"
-      >
+      <div ref="tabsContainerRef" class="header-tabs" :class="{ 'show-indicator': showTabsScrollIndicator }">
        <div
          v-for="(icon, category) in categoryIcons"
          :key="category"
@@ -355,19 +327,7 @@ watch(currentCategory, () => {
    </VDialog>

    <!-- 快速滚动到顶部按钮 -->
-    <div class="global-action-buttons">
-      <Transition name="scroll-fade">
-        <button 
-          v-show="showScrollToTop" 
-          class="global-action-button"
-          @click="scrollToTop"
-        >
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M7 14L12 9L17 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </button>
-      </Transition>
-    </div>
+    <VScrollToTopBtn />
  </div>
 </template>

@@ -404,7 +364,7 @@ watch(currentCategory, () => {
  flex-grow: 1;
  min-width: 0;
  // Add padding-right to make space for the indicator visually
-  padding-right: 20px; 
+  padding-right: 20px;
  // Clip content that overflows, useful with padding
  -webkit-mask-image: linear-gradient(to right, black 95%, transparent 100%);
  mask-image: linear-gradient(to right, black 95%, transparent 100%);
@@ -412,7 +372,7 @@ watch(currentCategory, () => {
  &::-webkit-scrollbar {
    display: none;
  }
-  
+
  // Gradient indicator pseudo-element
  &::after {
    content: '';
@@ -427,7 +387,7 @@ watch(currentCategory, () => {
    transition: opacity 0.2s ease-in-out;
    z-index: 1; // Ensure it's above the tabs but below other header elements if needed
  }
-  
+
  // Show the indicator when the class is present
  &.show-indicator::after {
    opacity: 1;
@@ -447,7 +407,7 @@ watch(currentCategory, () => {
  background-color: transparent;
  position: relative;
  color: rgba(var(--v-theme-on-background), 0.7);
-  
+
  &::after {
    content: '';
    position: absolute;
@@ -460,19 +420,19 @@ watch(currentCategory, () => {
    border-radius: 3px;
    transition: transform 0.2s ease;
  }
-  
+
  &.active {
    color: rgb(var(--v-theme-primary));
-    
+
    &::after {
      transform: translateX(-50%) scaleX(1);
    }
-    
+
    .header-tab-icon {
      color: rgb(var(--v-theme-primary));
    }
  }
-  
+
  &:hover:not(.active) {
    color: rgba(var(--v-theme-on-background), 1);
    background-color: rgba(var(--v-theme-primary), 0.05);
@@ -559,7 +519,7 @@ watch(currentCategory, () => {
  position: relative;
  overflow: hidden;
  background-color: rgba(var(--v-theme-surface-variant), 0.3);
-  
+
  &::before {
    content: '';
    position: absolute;
@@ -571,20 +531,28 @@ watch(currentCategory, () => {
    transition: background-color 0.3s ease;
  }

-  &.电影::before { background-color: #4CAF50; } // Green
-  &.电视剧::before { background-color: #2196F3; } // Blue
-  &.动漫::before { background-color: #FF9800; } // Orange
-  &.榜单::before { background-color: #9C27B0; } // Purple
-  
+  &.电影::before {
+    background-color: #4caf50;
+  } // Green
+  &.电视剧::before {
+    background-color: #2196f3;
+  } // Blue
+  &.动漫::before {
+    background-color: #ff9800;
+  } // Orange
+  &.榜单::before {
+    background-color: #9c27b0;
+  } // Purple
+
  &:hover {
    background-color: rgba(var(--v-theme-surface-variant), 0.6);
    border-color: rgba(var(--v-theme-on-surface), 0.15);
  }
-  
+
  &.enabled {
    border-color: rgba(var(--v-theme-primary), 0.5);
    background-color: rgba(var(--v-theme-primary), 0.05);
-    
+
    .setting-label {
      color: rgb(var(--v-theme-primary));
      font-weight: 500;
@@ -607,52 +575,8 @@ watch(currentCategory, () => {
  transition: color 0.2s ease;
 }

-/* Global Action Button Styles (FAB) */
-.global-action-buttons {
-  position: fixed;
-  bottom: 30px;
-  right: 30px;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.global-action-button {
-  width: 44px;
-  height: 44px;
-  background-color: rgba(var(--v-theme-background), 0.8);
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
-  border-radius: 50%;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  color: rgb(var(--v-theme-on-surface));
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  
-  &:hover {
-    background-color: rgba(var(--v-theme-background), 0.95);
-    transform: translateY(-4px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
-    color: rgb(var(--v-theme-primary));
-  }
-  
-  svg {
-    transition: all 0.3s ease;
-    width: 20px;
-    height: 20px;
-  }
-}
-
 /* Remove old tune button styles if they exist */
 .tune-button {
  display: none; // Hide the old button definitively
 }
-
 </style>
-
-