feat: 回到顶部按钮组件化

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">
+    <Transition name="scroll-fade">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <button v-show="showScrollToTop" class="global-action-button" @click="scrollToTop">
-        <path
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          d="M7 14L12 9L17 14"
+          <path
-          stroke="currentColor"
+            d="M7 14L12 9L17 14"
-          stroke-width="2"
+            stroke="currentColor"
-          stroke-linecap="round"
+            stroke-width="2"
-          stroke-linejoin="round"
+            stroke-linecap="round"
-        />
+            stroke-linejoin="round"
-      </svg>
+          />
-    </button>
+        </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;
+  width: 44px;
-  align-items: center;
+  height: 44px;
-  justify-content: center;
+  background-color: rgba(var(--v-theme-background), 0.8);
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
   border-radius: 50%;
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(10px);
-  background-color: rgba(var(--v-theme-surface), 0.8);
+  -webkit-backdrop-filter: blur(10px);
-  block-size: 44px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
-  color: rgb(var(--v-theme-on-surface));
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
-  inline-size: 44px;
+  color: rgb(var(--v-theme-on-surface));
-  opacity: 0.7;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 
   &:hover {
-    background-color: rgba(var(--v-theme-surface), 0.95);
+    background-color: rgba(var(--v-theme-background), 0.95);
-    color: rgb(var(--v-theme-primary));
-    opacity: 1;
     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>

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 slideview_content = ref<HTMLElement | null>(null)
-const sliderContainer = 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 props: any = inject('rankingPropsKey', { linkurl: '', title: '' })
-const isScrolling = ref(false);
+const isScrolling = ref(false)
-let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
+let scrollTimeout: ReturnType<typeof setTimeout> | null = null
-const scrollTimeoutDuration = 1500; // 滚动停止后延迟时间 (ms)
+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;
+    isScrolling.value = false
-  }, scrollTimeoutDuration);
+  }, 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;
+    isScrolling.value = false
-  }, scrollTimeoutDuration); // 使用常量
+  }, scrollTimeoutDuration) // 使用常量
 }
 
 // 原始的 countDisabled 逻辑，现在由 handleContentScroll 调用
-function countDisabled() { 
+function countDisabled() {
-  if (!slideview_content.value) return;
+  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 
+  <div ref="sliderContainer" class="slider-container" :class="{ 'is-scrolling': isScrolling }">
-    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 
+        <div ref="slideview_content" class="slider-content" tabindex="0" @scroll="handleContentScroll">
-          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 可能同时存在)

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';
+import { ref, onMounted, onUnmounted, computed, reactive, watch, nextTick } from 'vue'
-
-// APP
-const display = useDisplay()
 
 // 当前选择的分类
 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;
+  const el = tabsContainerRef.value
-  if (!el) return;
+  if (!el) return
-  
+
-  const tolerance = 1; // Allow 1px tolerance
+  const tolerance = 1 // Allow 1px tolerance
-  const hasOverflow = el.scrollWidth > el.clientWidth + tolerance;
+  const hasOverflow = el.scrollWidth > el.clientWidth + tolerance
-  const isScrolledToEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - tolerance;
+  const isScrolledToEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - tolerance
-  
+
-  showTabsScrollIndicator.value = hasOverflow && !isScrolledToEnd;
+  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();
+    updateTabsIndicator()
-  }, 150);
+  }, 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
+  await nextTick() // Ensure element is rendered
-  updateTabsIndicator();
+  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 
+      <div ref="tabsContainerRef" class="header-tabs" :class="{ 'show-indicator': showTabsScrollIndicator }">
-        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">
+    <VScrollToTopBtn />
-      <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>
   </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 {
-  &.电视剧::before { background-color: #2196F3; } // Blue
+    background-color: #4caf50;
-  &.动漫::before { background-color: #FF9800; } // Orange
+  } // Green
-  &.榜单::before { background-color: #9C27B0; } // Purple
+  &.电视剧::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>
-
-