From 89e4a68a03a1ebd2ae24590baec3fff8a87d7cb7 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 8 Apr 2025 17:43:20 +0800
Subject: [PATCH] feat: add ScrollToTopBtn component and integrate it into
 multiple pages

- Added ScrollToTopBtn component for smooth scrolling to the top of the page.
- Registered ScrollToTopBtn in main.ts.
- Integrated ScrollToTopBtn into browse.vue, discover.vue, recommend.vue, resource.vue pages.
- Updated components.d.ts to include ScrollToTopBtn type definition.
- Refactored MediaCard.vue and SlideView.vue for improved hover effects and styling.
- Cleaned up unused styles and optimized existing styles for better performance and readability.
---
 components.d.ts                         |   1 +
 src/@core/components/ScrollToTopBtn.vue |  62 ++++
 src/components/cards/MediaCard.vue      |  16 +-
 src/components/slide/SlideView.vue      | 153 ++++-----
 src/main.ts                             |   2 +
 src/pages/browse.vue                    |   1 +
 src/pages/discover.vue                  |   3 +
 src/pages/recommend.vue                 | 392 +++++++++---------------
 src/pages/resource.vue                  | 124 ++++----
 9 files changed, 351 insertions(+), 403 deletions(-)
 create mode 100644 src/@core/components/ScrollToTopBtn.vue

diff --git a/components.d.ts b/components.d.ts
index 0a78afc2..2d18ee3b 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -14,6 +14,7 @@ declare module 'vue' {
     MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ScrollToTopBtn: typeof import('./src/@core/components/ScrollToTopBtn.vue')['default']
     StatIcon: typeof import('./src/@core/components/StatIcon.vue')['default']
     ThemeSwitcher: typeof import('./src/@core/components/ThemeSwitcher.vue')['default']
   }
diff --git a/src/@core/components/ScrollToTopBtn.vue b/src/@core/components/ScrollToTopBtn.vue
new file mode 100644
index 00000000..f0b9f088
--- /dev/null
+++ b/src/@core/components/ScrollToTopBtn.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+</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>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.global-action-buttons {
+  position: fixed;
+  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);
+  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));
+  cursor: pointer;
+  inline-size: 44px;
+  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);
+    color: rgb(var(--v-theme-primary));
+    opacity: 1;
+    transform: translateY(-4px);
+  }
+
+  svg {
+    block-size: 20px;
+    inline-size: 20px;
+    transition: all 0.3s ease;
+  }
+}
+</style>
diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index b907f989..bb02ca12 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -431,7 +431,7 @@ function onRemoveSubscribe() {
           :width="props.width"
           class="outline-none shadow ring-gray-500 media-card"
           :class="{
-            'transition transform-cpu duration-300  -translate-y-1 shadow-lg': hover.isHovering,
+            'transition transform-cpu duration-300  -translate-y-1': hover.isHovering,
             'ring-1': isImageLoaded,
           }"
           @click.stop="goMediaDetail(hover.isHovering ?? false)"
@@ -450,7 +450,7 @@ function onRemoveSubscribe() {
               </div>
             </template>
           </VImg>
-          
+
           <!-- 详情 -->
           <VCardText
             v-show="hover.isHovering || imageLoadError || searchMenuShow"
@@ -533,15 +533,3 @@ function onRemoveSubscribe() {
     @close="chooseSiteDialog = false"
   />
 </template>
-
-<style lang="scss" scoped>
-.media-card {
-  position: relative;
-  transition: transform 0.2s ease;
-  
-  &:hover {
-    transform: scale(1.03);
-    z-index: 2;
-  }
-}
-</style>
diff --git a/src/components/slide/SlideView.vue b/src/components/slide/SlideView.vue
index 389fe835..36e2b6fd 100644
--- a/src/components/slide/SlideView.vue
+++ b/src/components/slide/SlideView.vue
@@ -1,9 +1,5 @@
 <script lang="ts" setup>
 import SlideViewTitle from '@/components/slide/SlideViewTitle.vue'
-import { useDisplay } from 'vuetify'
-
-// 显示器宽度
-const display = useDisplay()
 
 // 元素
 const slideview_content = ref()
@@ -85,11 +81,6 @@ function handleMouseLeave() {
   isHovering.value = false
 }
 
-// 检测是否有足够内容可显示
-const hasEnoughContent = computed(() => {
-  return slide_card_length > card_max
-})
-
 // 组件加载完成
 onMounted(() => {
   // 初次获取元素参数
@@ -111,44 +102,30 @@ onActivated(() => {
 </script>
 
 <template>
-  <div 
-    ref="sliderContainer"
-    class="slider-container"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-  >
+  <div ref="sliderContainer" class="slider-container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
     <div class="slider-header">
       <slot name="title">
         <SlideViewTitle />
       </slot>
-      
+
       <!-- 查看全部按钮 -->
-      <RouterLink
-        v-if="props.linkurl"
-        :to="props.linkurl"
-        class="view-all-button"
-      >
+      <RouterLink v-if="props.linkurl" :to="props.linkurl" class="view-all-button">
         <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>
       </RouterLink>
     </div>
-    
+
     <div class="slider-content-wrapper">
       <div class="slider-content-container">
-        <div
-          ref="slideview_content"
-          class="slider-content"
-          tabindex="0"
-          @scroll="countDisabled"
-        >
+        <div ref="slideview_content" class="slider-content" tabindex="0" @scroll="countDisabled">
           <slot name="content" />
         </div>
       </div>
-      
+
       <!-- 左侧导航按钮 -->
-      <button 
+      <button
         class="nav-button nav-button-left"
         @click.stop="slideNext(false)"
         v-show="isHovering && disabled !== 0 && disabled !== 3"
@@ -157,9 +134,9 @@ onActivated(() => {
           <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
         </svg>
       </button>
-      
+
       <!-- 右侧导航按钮 -->
-      <button 
+      <button
         class="nav-button nav-button-right"
         @click.stop="slideNext(true)"
         v-show="isHovering && disabled !== 2 && disabled !== 3"
@@ -175,104 +152,103 @@ onActivated(() => {
 <style lang="scss" scoped>
 .slider-container {
   position: relative;
-  margin-bottom: 24px;
-  // 移除padding，按钮放置在外部
+  margin-block-end: 24px;
 }
 
 .slider-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
-  padding: 0 8px;
+  justify-content: space-between;
   gap: 16px;
-  
+  margin-block-end: 12px;
+  padding-block: 0;
+  padding-inline: 8px;
+
   & > :first-child {
     flex-grow: 1;
-    min-width: 0;
+    min-inline-size: 0;
   }
 }
 
 .view-all-button {
+  .arrow-svg {
+    fill: currentcolor;
+    transition: transform 0.3s ease;
+  }
+
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
-  text-decoration: none;
+  border-radius: 16px;
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  color: rgb(var(--v-theme-primary));
   font-size: 0.85rem;
   font-weight: 500;
-  color: rgb(var(--v-theme-primary));
-  background-color: rgba(var(--v-theme-primary), 0.1);
-  padding: 4px 10px;
-  border-radius: 16px;
+  padding-block: 4px;
+  padding-inline: 10px;
+  text-decoration: none;
   transition: all 0.25s ease;
-  flex-shrink: 0;
-  
+
   &:hover {
     background-color: rgba(var(--v-theme-primary), 0.15);
     box-shadow: 0 2px 8px rgba(var(--v-theme-primary), 0.1);
     transform: translateY(-1px);
-    
+
     .arrow-svg {
       transform: translateX(2px);
     }
   }
-  
+
   span {
-    margin-right: 4px;
-  }
-  
-  .arrow-svg {
-    transition: transform 0.3s ease;
-    fill: currentColor;
+    margin-inline-end: 4px;
   }
 }
 
 .slider-content-wrapper {
   position: relative;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .slider-content-container {
   position: relative;
-  width: 100%;
   overflow: hidden;
+  inline-size: 100%;
 }
 
 .nav-button {
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  background-color: rgba(var(--v-theme-surface), 0.9);
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  z-index: 20;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  z-index: 20;
-  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;
   padding: 0;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 50%;
+  backdrop-filter: blur(5px);
+  background-color: rgba(var(--v-theme-surface), 0.9);
+  block-size: 38px;
+  cursor: pointer;
+  inline-size: 38px;
+  inset-block-start: 50%;
   opacity: 0;
   pointer-events: none;
-  
+  transform: translateY(-50%);
+  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;
+
   svg {
+    block-size: 22px;
     fill: rgb(var(--v-theme-on-surface));
+    inline-size: 22px;
     opacity: 0.8;
     transition: all 0.3s ease;
-    width: 22px;
-    height: 22px;
   }
-  
+
   &:hover {
-    transform: translateY(-50%) scale(1.1);
-    background-color: rgba(var(--v-theme-surface), 1);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
     border-color: rgba(var(--v-theme-on-surface), 0.15);
-    
+    background-color: rgba(var(--v-theme-surface), 1);
+    transform: translateY(-50%) scale(1.1);
+
     svg {
       opacity: 1;
     }
@@ -280,38 +256,39 @@ onActivated(() => {
 }
 
 .nav-button-left {
-  left: -19px; // 半径
+  inset-inline-start: -14px; // 半径
 }
 
 .nav-button-right {
-  right: -19px; // 半径
+  inset-inline-end: -14px; // 半径
 }
 
 .slider-content {
   display: grid;
-  grid-template-rows: 1fr;
-  grid-auto-flow: column;
+  overflow: scroll hidden !important;
   justify-content: start;
   gap: 16px;
-  padding: 8px 12px;
-  overflow: scroll hidden !important;
+  grid-auto-flow: column;
+  grid-template-rows: 1fr;
   -ms-overflow-style: none !important;
   overscroll-behavior-x: contain !important;
-  scrollbar-width: none !important;
+  padding-block: 8px;
+  padding-inline: 12px;
   scroll-behavior: smooth;
-  
+  scrollbar-width: none !important;
+
   &::-webkit-scrollbar {
     display: none;
   }
 }
 
-.slider-container:hover .nav-button[style*="display: none;"] ~ .nav-button,
-.slider-container:hover .nav-button {
+.slider-container:hover .nav-button,
+.slider-container:hover .nav-button[style*='display: none;'] ~ .nav-button {
   opacity: 1;
   pointer-events: auto;
 }
 
-.nav-button[style*="display: none;"] {
+.nav-button[style*='display: none;'] {
   opacity: 0 !important;
   pointer-events: none !important;
 }
diff --git a/src/main.ts b/src/main.ts
index 4aebab47..0298893b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -27,6 +27,7 @@ import VueApexCharts from 'vue3-apexcharts'
 
 // 6. 注册自定义组件
 import DialogCloseBtn from '@/@core/components/DialogCloseBtn.vue'
+import ScrollToTopBtn from '@/@core/components/ScrollToTopBtn.vue'
 import MediaCard from './components/cards/MediaCard.vue'
 import PosterCard from './components/cards/PosterCard.vue'
 import BackdropCard from './components/cards/BackdropCard.vue'
@@ -82,6 +83,7 @@ initializeApp().then(() => {
     .component('VApexChart', VueApexCharts)
     .component('VCronVuetify', CronVuetify)
     .component('VDialogCloseBtn', DialogCloseBtn)
+    .component('VScrollToTopBtn', ScrollToTopBtn)
     .component('VMediaCard', MediaCard)
     .component('VPosterCard', PosterCard)
     .component('VBackdropCard', BackdropCard)
diff --git a/src/pages/browse.vue b/src/pages/browse.vue
index 998c8b34..0d17759b 100644
--- a/src/pages/browse.vue
+++ b/src/pages/browse.vue
@@ -39,5 +39,6 @@ function getApiPath(paths: string[] | string) {
     </div>
     <PersonCardListView v-if="type === 'person'" :apipath="getApiPath(props.paths || '')" :params="route.query" />
     <MediaCardListView v-else :apipath="getApiPath(props.paths || '')" :params="route.query" />
+    <VScrollToTopBtn />
   </div>
 </template>
diff --git a/src/pages/discover.vue b/src/pages/discover.vue
index 2fc1f380..5a1d00ef 100644
--- a/src/pages/discover.vue
+++ b/src/pages/discover.vue
@@ -114,6 +114,7 @@ onActivated(async () => {
   await loadExtraDiscoverSources()
   sortSubscribeOrder()
 })
+
 </script>
 
 <template>
@@ -158,5 +159,7 @@ onActivated(async () => {
         </transition>
       </VWindowItem>
     </VWindow>
+    <!-- 快速滚动到顶部按钮 -->
+    <VScrollToTopBtn />
   </div>
 </template>
diff --git a/src/pages/recommend.vue b/src/pages/recommend.vue
index 350b3ac5..63f41b5c 100644
--- a/src/pages/recommend.vue
+++ b/src/pages/recommend.vue
@@ -2,25 +2,21 @@
 import api from '@/api'
 import { RecommendSource } from '@/api/types'
 import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
-import { useDisplay } from 'vuetify'
-
-// APP
-const display = useDisplay()
-const appMode = inject('pwaMode') && display.mdAndDown.value
 
 // 当前选择的分类
-const currentCategory = ref('电影')
+const currentCategory = ref('全部')
 
 // 定义分类类型
-type CategoryType = '电影' | '电视剧' | '动漫' | '榜单'
-type CategoryMap = Record<CategoryType, Array<{apipath: string; linkurl: string; title: string}>>
+type CategoryType = '全部' | '电影' | '电视剧' | '动漫' | '榜单'
+type CategoryMap = Record<CategoryType, Array<{ apipath: string; linkurl: string; title: string }>>
 
 // 预处理的分类视图数据
 const categoryViewsMap = reactive<CategoryMap>({
+  全部: [],
   电影: [],
   电视剧: [],
   动漫: [],
-  榜单: []
+  榜单: [],
 })
 
 // 按分类过滤视图的映射
@@ -107,6 +103,9 @@ const viewList = reactive<{ apipath: string; linkurl: string; title: string }[]>
 
 // 计算当前分类下显示的视图
 const filteredViews = computed(() => {
+  if (currentCategory.value === '全部') {
+    return viewList.filter(item => enableConfig.value[item.title])
+  }
   return categoryViewsMap[currentCategory.value as CategoryType]
 })
 
@@ -124,10 +123,10 @@ const extraRecommendSources = ref<RecommendSource[]>([])
 // 分类视图
 function updateCategoryViews() {
   // 清空所有分类
-  (Object.keys(categoryViewsMap) as CategoryType[]).forEach(category => {
+  ;(Object.keys(categoryViewsMap) as CategoryType[]).forEach(category => {
     categoryViewsMap[category] = []
   })
-  
+
   // 先把所有启用的视图按照分类归类
   const enabledViews = viewList.filter(item => enableConfig.value[item.title])
   enabledViews.forEach(view => {
@@ -186,21 +185,18 @@ async function saveConfig() {
     console.error(error)
   }
   dialog.value = false
-  
+
   // 保存后更新分类
   updateCategoryViews()
 }
 
-const scrollToTop = () => {
-  window.scrollTo({top: 0, behavior: 'smooth'})
-}
-
 // 标签图标映射
 const categoryIcons: Record<CategoryType, string> = {
+  全部: 'mdi-filmstrip-box-multiple',
   电影: 'mdi-movie',
   电视剧: 'mdi-television-classic',
   动漫: 'mdi-animation',
-  榜单: 'mdi-trophy'
+  榜单: 'mdi-trophy',
 }
 
 onBeforeMount(async () => {
@@ -230,26 +226,19 @@ watch(currentCategory, () => {
     <!-- 页面顶部控制栏 -->
     <div class="recommend-header">
       <div class="header-tabs">
-        <div 
-          v-for="(category, idx) in ['电影', '电视剧', '动漫', '榜单']" 
+        <div
+          v-for="(category, idx) in ['全部', '电影', '电视剧', '动漫', '榜单']"
           :key="idx"
           class="header-tab"
           :class="{ 'active': currentCategory === category }"
           @click="currentCategory = category"
         >
-          <VIcon
-            :icon="categoryIcons[category as CategoryType]"
-            size="small"
-            class="header-tab-icon"
-          />
+          <VIcon :icon="categoryIcons[category as CategoryType]" size="small" class="header-tab-icon" />
           <span>{{ category }}</span>
         </div>
       </div>
-      
-      <button
-        class="tune-button"
-        @click="dialog = true"
-      >
+
+      <button class="tune-button" @click="dialog = true">
         <div class="tune-icon">
           <span></span>
           <span></span>
@@ -258,34 +247,22 @@ watch(currentCategory, () => {
         <span class="tune-text">显示设置</span>
       </button>
     </div>
-    
+
     <!-- 滚动内容区域 -->
     <div class="recommend-content">
       <TransitionGroup name="fade">
-        <MediaCardSlideView 
-          v-for="item in filteredViews" 
-          :key="item.title" 
-          v-bind="item"
-          class="content-group"
-        />
+        <MediaCardSlideView v-for="item in filteredViews" :key="item.title" v-bind="item" class="content-group" />
       </TransitionGroup>
-      
+
       <div v-if="filteredViews.length === 0" class="empty-category">
         <VIcon icon="mdi-alert-circle-outline" size="large" class="empty-icon" />
         <p class="empty-text">当前分类下没有可显示的内容</p>
-        <VBtn
-          color="primary"
-          variant="tonal"
-          size="small"
-          @click="dialog = true"
-        >
-          设置显示内容
-        </VBtn>
+        <VBtn color="primary" variant="tonal" size="small" @click="dialog = true"> 设置显示内容 </VBtn>
       </div>
     </div>
-    
+
     <!-- 设置面板 -->
-    <VDialog v-model="dialog" width="500" class="settings-dialog" scrollable>
+    <VDialog v-model="dialog" width="40rem" class="settings-dialog" scrollable>
       <VCard class="settings-card">
         <VCardItem class="settings-card-header">
           <VCardTitle>
@@ -296,26 +273,23 @@ watch(currentCategory, () => {
             <VBtn icon="mdi-close" variant="text" @click="dialog = false" />
           </template>
         </VCardItem>
-        
         <VDivider />
-        
         <VCardText>
           <p class="settings-hint">选择您想在页面显示的内容</p>
-          
           <div class="settings-grid">
             <div
               v-for="(item, index) in viewList"
               :key="index"
               class="setting-item"
-              :class="{ 
+              :class="{
                 'enabled': enableConfig[item.title],
-                [getCategoryForView(item.title)]: true
+                [getCategoryForView(item.title)]: true,
               }"
               @click="enableConfig[item.title] = !enableConfig[item.title]"
             >
               <div class="setting-item-inner">
                 <div class="setting-check">
-                  <VIcon 
+                  <VIcon
                     :icon="enableConfig[item.title] ? 'mdi-check-circle' : 'mdi-circle-outline'"
                     :color="enableConfig[item.title] ? 'primary' : undefined"
                     size="small"
@@ -326,46 +300,23 @@ watch(currentCategory, () => {
             </div>
           </div>
         </VCardText>
-        
         <VDivider />
-        
-        <VCardActions>
-          <VBtn 
-            variant="text" 
-            @click="Object.keys(enableConfig).forEach(key => enableConfig[key] = true)"
-          >
+        <VCardActions class="mt-3">
+          <VBtn variant="text" @click="Object.keys(enableConfig).forEach(key => (enableConfig[key] = true))">
             全选
           </VBtn>
-          <VBtn 
-            variant="text"
-            @click="Object.keys(enableConfig).forEach(key => enableConfig[key] = false)"
-          >
+          <VBtn variant="text" @click="Object.keys(enableConfig).forEach(key => (enableConfig[key] = false))">
             全不选
           </VBtn>
           <VSpacer />
           <VBtn variant="text" @click="dialog = false">取消</VBtn>
-          <VBtn 
-            color="primary" 
-            variant="tonal"
-            @click="saveConfig"
-          >
-            保存设置
-          </VBtn>
+          <VBtn color="primary" variant="tonal" class="px-3" @click="saveConfig"> 保存设置 </VBtn>
         </VCardActions>
       </VCard>
     </VDialog>
-    
+
     <!-- 快速滚动到顶部按钮 -->
-    <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>
-    </div>
+    <VScrollToTopBtn />
   </div>
 </template>
 
@@ -373,97 +324,99 @@ watch(currentCategory, () => {
 .mp-recommend {
   position: relative;
   padding: 0;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .recommend-header {
   position: sticky;
-  top: 0;
   z-index: 10;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 12px 16px;
-  margin-bottom: 16px;
-  background-color: rgba(var(--v-theme-primary), 0.02);
+  justify-content: space-between;
   backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(var(--v-theme-primary), 0.1);
+  background-color: rgba(var(--v-theme-primary), 0.02);
+  border-block-end: 1px solid rgba(var(--v-theme-primary), 0.1);
+  inset-block-start: 0;
+  margin-block-end: 16px;
+  padding-block: 12px;
+  padding-inline: 16px;
 }
 
 .header-tabs {
   display: flex;
+  padding: 4px;
   gap: 12px;
   overflow-x: auto;
   scrollbar-width: none;
-  padding: 4px;
-  
+
   &::-webkit-scrollbar {
     display: none;
   }
 }
 
+.header-tab-icon {
+  color: rgba(var(--v-theme-on-background), 0.6);
+  margin-inline-end: 6px;
+  transition: color 0.2s ease;
+}
+
 .header-tab {
+  position: relative;
   display: flex;
   align-items: center;
-  padding: 6px 14px;
   border-radius: 20px;
-  font-weight: 600;
-  font-size: 0.9rem;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.2s ease;
   background-color: transparent;
-  position: relative;
   color: rgba(var(--v-theme-on-background), 0.7);
-  
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding-block: 6px;
+  padding-inline: 14px;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+
   &::after {
-    content: '';
     position: absolute;
-    bottom: -4px;
-    left: 50%;
-    transform: translateX(-50%) scaleX(0);
-    width: 70%;
-    height: 3px;
-    background-color: rgb(var(--v-theme-primary));
     border-radius: 3px;
+    background-color: rgb(var(--v-theme-primary));
+    block-size: 3px;
+    content: '';
+    inline-size: 70%;
+    inset-block-end: -4px;
+    inset-inline-start: 50%;
+    transform: translateX(-50%) scaleX(0);
     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);
+    color: rgba(var(--v-theme-on-background), 1);
   }
 }
 
-.header-tab-icon {
-  margin-right: 6px;
-  transition: color 0.2s ease;
-  color: rgba(var(--v-theme-on-background), 0.6);
-}
-
 .settings-btn {
-  min-width: auto;
-  width: 48px;
-  height: 48px;
   border-radius: 50%;
+  block-size: 48px;
+  inline-size: 48px;
+  min-inline-size: auto;
 }
 
 .recommend-content {
-  padding: 0 8px;
-  min-height: 300px;
+  min-block-size: 300px;
+  padding-block: 0;
+  padding-inline: 8px;
 }
 
 .empty-category {
@@ -471,30 +424,31 @@ watch(currentCategory, () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 300px;
-  background-color: rgba(var(--v-theme-surface), 0.5);
-  border-radius: 12px;
-  margin: 20px 0;
   border: 1px dashed rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 12px;
+  background-color: rgba(var(--v-theme-surface), 0.5);
+  block-size: 300px;
+  margin-block: 20px;
+  margin-inline: 0;
 }
 
 .empty-icon {
+  margin-block-end: 12px;
   opacity: 0.5;
-  margin-bottom: 12px;
 }
 
 .empty-text {
   color: rgba(var(--v-theme-on-surface), 0.6);
-  margin-bottom: 16px;
+  margin-block-end: 16px;
 }
 
 .content-group {
-  margin-bottom: 24px;
+  margin-block-end: 24px;
 }
 
 .settings-card {
-  border-radius: 12px;
   overflow: hidden;
+  border-radius: 12px;
 }
 
 .settings-card-header {
@@ -502,111 +456,69 @@ watch(currentCategory, () => {
 }
 
 .settings-hint {
-  font-size: 0.9rem;
   color: rgba(var(--v-theme-on-surface), 0.6);
-  margin-bottom: 16px;
+  font-size: 0.9rem;
+  margin-block-end: 16px;
 }
 
 .settings-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: 8px;
-}
-
-.setting-item {
-  cursor: pointer;
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  
-  &.enabled {
-    .setting-item-inner {
-      background-color: rgba(var(--v-theme-primary), 0.08);
-      border-color: rgba(var(--v-theme-primary), 0.2);
-    }
-  }
-  
-  &.电影 .setting-item-inner {
-    border-left: 3px solid #3b82f6;
-  }
-  
-  &.电视剧 .setting-item-inner {
-    border-left: 3px solid #6366f1;
-  }
-  
-  &.动漫 .setting-item-inner {
-    border-left: 3px solid #a855f7;
-  }
-  
-  &.榜单 .setting-item-inner {
-    border-left: 3px solid #f59e0b;
-  }
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 }
 
 .setting-item-inner {
   display: flex;
   align-items: center;
-  padding: 10px 12px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
   border-radius: 8px;
   background-color: rgba(var(--v-theme-surface), 1);
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  padding-block: 10px;
+  padding-inline: 12px;
   transition: all 0.2s ease;
-  
+
   &:hover {
     transform: translateY(-2px);
-    box-shadow: 0 2px 8px rgba(var(--v-theme-on-surface), 0.08);
+  }
+}
+
+.setting-item {
+  cursor: pointer;
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.enabled {
+    .setting-item-inner {
+      border-color: rgba(var(--v-theme-primary), 0.2);
+      background-color: rgba(var(--v-theme-primary), 0.08);
+    }
+  }
+
+  &.电影 .setting-item-inner {
+    border-inline-start: 3px solid #3b82f6;
+  }
+
+  &.电视剧 .setting-item-inner {
+    border-inline-start: 3px solid #6366f1;
+  }
+
+  &.动漫 .setting-item-inner {
+    border-inline-start: 3px solid #a855f7;
+  }
+
+  &.榜单 .setting-item-inner {
+    border-inline-start: 3px solid #f59e0b;
   }
 }
 
 .setting-check {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 .setting-label {
-  font-size: 0.9rem;
-  white-space: nowrap;
   overflow: hidden;
+  font-size: 0.9rem;
   text-overflow: ellipsis;
-}
-
-.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-surface), 0.8);
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
-  border-radius: 50%;
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  color: rgb(var(--v-theme-on-surface));
-  opacity: 0.7;
-  
-  &:hover {
-    background-color: rgba(var(--v-theme-surface), 0.95);
-    transform: translateY(-4px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
-    opacity: 1;
-    color: rgb(var(--v-theme-primary));
-  }
-  
-  svg {
-    transition: all 0.3s ease;
-    width: 20px;
-    height: 20px;
-  }
+  white-space: nowrap;
 }
 
 .fade-enter-active,
@@ -628,11 +540,12 @@ watch(currentCategory, () => {
   animation: fadeInOut 0.5s ease;
 }
 
-@keyframes fadeInOut {
+@keyframes fadeinout {
   0% {
     opacity: 0.5;
     transform: translateY(10px);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);
@@ -642,67 +555,66 @@ watch(currentCategory, () => {
 .tune-button {
   display: flex;
   align-items: center;
-  background: rgba(var(--v-theme-primary), 0.1);
   border: none;
   border-radius: 30px;
-  padding: 8px 16px;
-  cursor: pointer;
-  transition: all 0.3s ease;
+  background: rgba(var(--v-theme-primary), 0.1);
   color: rgb(var(--v-theme-primary));
-  
+  cursor: pointer;
+  padding-block: 8px;
+  padding-inline: 16px;
+  transition: all 0.3s ease;
+
   &:hover {
     background: rgba(var(--v-theme-primary), 0.2);
     transform: translateY(-2px);
-    box-shadow: 0 4px 10px rgba(var(--v-theme-primary), 0.2);
   }
-  
+
   .tune-icon {
     display: flex;
     flex-direction: column;
-    width: 16px;
-    height: 16px;
     justify-content: space-between;
-    margin-right: 8px;
-    
+    block-size: 16px;
+    inline-size: 16px;
+    margin-inline-end: 8px;
+
     span {
       display: block;
-      height: 2px;
-      background-color: rgb(var(--v-theme-primary));
       border-radius: 2px;
+      background-color: rgb(var(--v-theme-primary));
+      block-size: 2px;
       transition: all 0.3s ease;
-      
+
       &:nth-child(1) {
-        width: 60%;
+        inline-size: 60%;
       }
-      
+
       &:nth-child(2) {
-        width: 80%;
+        inline-size: 80%;
       }
-      
+
       &:nth-child(3) {
-        width: 40%;
+        inline-size: 40%;
       }
     }
   }
-  
+
   .tune-text {
-    font-weight: 500;
     font-size: 0.9rem;
+    font-weight: 500;
   }
-  
+
   &:hover .tune-icon span {
     &:nth-child(1) {
-      width: 100%;
+      inline-size: 100%;
     }
-    
+
     &:nth-child(2) {
-      width: 60%;
+      inline-size: 60%;
     }
-    
+
     &:nth-child(3) {
-      width: 80%;
+      inline-size: 80%;
     }
   }
 }
 </style>
-
diff --git a/src/pages/resource.vue b/src/pages/resource.vue
index 58646445..5db822d0 100644
--- a/src/pages/resource.vue
+++ b/src/pages/resource.vue
@@ -270,42 +270,43 @@ onUnmounted(() => {
         <div class="initial-loading-text">搜索中</div>
       </div>
     </div>
+    <!-- 滚动到顶部按钮 -->
+    <VScrollToTopBtn />
   </div>
 </template>
 
 <style scoped>
 .search-progress-container {
   position: fixed;
-  top: env(safe-area-inset-top);
-  left: 0;
-  right: 0;
   z-index: 100;
   display: flex;
   justify-content: center;
-  padding-top: 4rem;
+  inset-block-start: env(safe-area-inset-top);
+  inset-inline: 0;
+  padding-block-start: 4rem;
 }
 
 .search-progress-card {
-  max-width: 400px;
-  width: 90%;
-  background-color: rgb(var(--v-theme-surface));
-  border-radius: 12px;
   padding: 16px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   border: 1px solid rgba(var(--v-theme-primary), 0.1);
+  border-radius: 12px;
   backdrop-filter: blur(10px);
+  background-color: rgb(var(--v-theme-surface));
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 12%);
+  inline-size: 90%;
+  max-inline-size: 400px;
 }
 
 .progress-header {
   display: flex;
   align-items: center;
-  margin-bottom: 12px;
+  margin-block-end: 12px;
 }
 
 .progress-title {
+  color: rgb(var(--v-theme-on-surface));
   font-size: 0.9rem;
   font-weight: 500;
-  color: rgb(var(--v-theme-on-surface));
 }
 
 .progress-bar-container {
@@ -315,39 +316,40 @@ onUnmounted(() => {
 }
 
 .progress-bar-wrapper {
-  flex: 1;
-  height: 4px;
-  background-color: rgba(var(--v-theme-on-surface), 0.08);
-  border-radius: 4px;
   overflow: hidden;
+  flex: 1;
+  border-radius: 4px;
+  background-color: rgba(var(--v-theme-on-surface), 0.08);
+  block-size: 4px;
 }
 
 .progress-bar {
-  height: 100%;
+  border-radius: 4px;
   background: linear-gradient(
     90deg,
     rgb(var(--v-theme-primary)) 0%,
     rgb(var(--v-theme-primary)) 70%,
     rgba(var(--v-theme-primary), 0.8) 100%
   );
-  border-radius: 4px;
-  transition: width 0.3s ease;
+  block-size: 100%;
+  transition: inline-size 0.3s ease;
 }
 
 .progress-percentage {
+  color: rgb(var(--v-theme-primary));
   font-size: 0.8rem;
   font-weight: 600;
-  color: rgb(var(--v-theme-primary));
-  min-width: 36px;
-  text-align: right;
+  min-inline-size: 36px;
+  text-align: end;
 }
 
 /* 精简标题栏样式 */
 .search-header {
-  padding: 12px 16px;
-  background-color: rgb(var(--v-theme-surface));
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  background-color: rgb(var(--v-theme-surface));
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 5%);
+  padding-block: 12px;
+  padding-inline: 16px;
 }
 
 .search-info-container {
@@ -374,27 +376,27 @@ onUnmounted(() => {
 
 .view-toggle-buttons {
   display: flex;
-  background-color: rgba(var(--v-theme-surface-variant), 0.1);
-  border-radius: 8px;
   padding: 4px;
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-surface-variant), 0.1);
 }
 
 .view-toggle-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 36px;
   border: none;
-  background: transparent;
-  cursor: pointer;
   border-radius: 6px;
+  background: transparent;
+  block-size: 36px;
+  cursor: pointer;
+  inline-size: 40px;
   transition: all 0.2s ease;
 }
 
 .view-toggle-btn.active {
   background-color: rgb(var(--v-theme-surface));
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);
 }
 
 .view-toggle-btn:hover:not(.active) {
@@ -404,16 +406,13 @@ onUnmounted(() => {
 /* 视图切换加载状态 */
 .view-changing-container {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(var(--v-theme-background), 0.7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
   z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   backdrop-filter: blur(8px);
+  background-color: rgba(var(--v-theme-background), 0.7);
+  inset: 0;
 }
 
 .view-changing-content {
@@ -429,11 +428,11 @@ onUnmounted(() => {
 }
 
 .pulse-circle {
-  width: 12px;
-  height: 12px;
   border-radius: 50%;
-  background-color: rgb(var(--v-theme-primary));
   animation: pulse 1.2s ease-in-out infinite;
+  background-color: rgb(var(--v-theme-primary));
+  block-size: 12px;
+  inline-size: 12px;
 }
 
 .pulse-circle:nth-child(2) {
@@ -447,28 +446,29 @@ onUnmounted(() => {
 @keyframes pulse {
   0%,
   100% {
-    transform: scale(0.8);
     opacity: 0.5;
+    transform: scale(0.8);
   }
+
   50% {
-    transform: scale(1.2);
     opacity: 1;
+    transform: scale(1.2);
   }
 }
 
 .view-changing-text {
+  color: rgb(var(--v-theme-primary));
   font-size: 0.9rem;
   font-weight: 500;
-  color: rgb(var(--v-theme-primary));
   letter-spacing: 1px;
 }
 
 /* 初始的加载状态 */
 .initial-loading-container {
   display: flex;
-  justify-content: center;
   align-items: center;
-  min-height: 50vh;
+  justify-content: center;
+  min-block-size: 50vh;
 }
 
 .initial-loading-content {
@@ -481,16 +481,16 @@ onUnmounted(() => {
 .wave-loader {
   display: flex;
   align-items: center;
+  block-size: 40px;
   gap: 6px;
-  height: 40px;
 }
 
 .wave-dot {
-  width: 8px;
-  height: 8px;
   border-radius: 50%;
-  background-color: rgb(var(--v-theme-primary));
   animation: wave 1.5s ease-in-out infinite;
+  background-color: rgb(var(--v-theme-primary));
+  block-size: 8px;
+  inline-size: 8px;
 }
 
 .wave-dot:nth-child(1) {
@@ -514,26 +514,28 @@ onUnmounted(() => {
   100% {
     transform: translateY(0);
   }
+
   50% {
     transform: translateY(-15px);
   }
 }
 
 .initial-loading-text {
+  color: rgb(var(--v-theme-primary));
   font-size: 0.9rem;
   font-weight: 500;
-  color: rgb(var(--v-theme-primary));
   letter-spacing: 1px;
 }
 
 .search-results-container {
-  min-height: 50vh;
   position: relative;
+  min-block-size: 50vh;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .search-header {
-    padding: 8px 12px;
+    padding-block: 8px;
+    padding-inline: 12px;
   }
 
   .search-title {
@@ -542,17 +544,17 @@ onUnmounted(() => {
   }
 
   .search-info-container {
+    overflow: hidden;
     flex: 1;
     gap: 8px;
-    min-width: 0;
-    overflow: hidden;
+    min-inline-size: 0;
   }
 
   .search-tags {
-    overflow-x: auto;
     flex-wrap: nowrap;
+    margin-inline-end: 8px;
+    overflow-x: auto;
     scrollbar-width: none;
-    margin-right: 8px;
   }
 
   .search-tags::-webkit-scrollbar {
@@ -568,8 +570,8 @@ onUnmounted(() => {
   }
 
   .view-toggle-btn {
-    width: 36px;
-    height: 32px;
+    block-size: 32px;
+    inline-size: 36px;
   }
 }
 </style>