优化探索页UI

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "moviepilot",
-  "version": "2.3.7-1",
+  "version": "2.3.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "moviepilot",
-      "version": "2.3.7-1",
+      "version": "2.3.8",
       "hasInstallScript": true,
       "dependencies": {
         "@fullcalendar/core": "^6.1.15",
@@ -66,6 +66,7 @@
         "@types/lodash-es": "^4.17.12",
         "@types/mousetrap": "^1.6.15",
         "@types/node": "^20.1.4",
+        "@types/nprogress": "^0.2.3",
         "@types/webfontloader": "^1.6.34",
         "@typescript-eslint/eslint-plugin": "^8.20.0",
         "@typescript-eslint/parser": "^8.20.0",
@@ -3578,6 +3579,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/nprogress": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmmirror.com/@types/nprogress/-/nprogress-0.2.3.tgz",
+      "integrity": "sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",

package.json

@@ -73,6 +73,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/mousetrap": "^1.6.15",
     "@types/node": "^20.1.4",
+    "@types/nprogress": "^0.2.3",
     "@types/webfontloader": "^1.6.34",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",

src/components/cards/MediaCard.vue

@@ -429,7 +429,7 @@ function onRemoveSubscribe() {
           v-bind="hover.props"
           :height="props.height"
           :width="props.width"
-          class="outline-none shadow ring-gray-500"
+          class="outline-none shadow ring-gray-500 media-card"
           :class="{
             'transition transform-cpu duration-300  -translate-y-1 shadow-lg': hover.isHovering,
             'ring-1': isImageLoaded,
@@ -450,6 +450,7 @@ function onRemoveSubscribe() {
               </div>
             </template>
           </VImg>
+          
           <!-- 详情 -->
           <VCardText
             v-show="hover.isHovering || imageLoadError || searchMenuShow"
@@ -532,3 +533,15 @@ 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>

src/components/slide/SlideView.vue

@@ -7,7 +7,8 @@ const display = useDisplay()
 
 // 元素
 const slideview_content = ref()
-// 分页切换状态
+const sliderContainer = ref()
+// 分页切换状态: 0-左边不可用 1-两边可用 2-右边不可用 3-两边都不可用
 const disabled = ref(0)
 // 记录滚动值
 const slideview_scrollLeft = ref(0)
@@ -21,6 +22,10 @@ let card_width: number
 let card_max: number
 // 当前定位
 let card_current: number
+// 是否鼠标悬停在容器上
+const isHovering = ref(false)
+// 获取传入的链接地址
+const props: any = inject('rankingPropsKey', { linkurl: '', title: '' })
 
 // 分页切换
 function slideNext(next: boolean) {
@@ -30,12 +35,10 @@ function slideNext(next: boolean) {
     run_to_left_px = card_index * card_width
     if (run_to_left_px >= slideview_content.value.scrollWidth - slideview_content.value.clientWidth)
       run_to_left_px = slideview_content.value.scrollWidth - slideview_content.value.clientWidth
-    // console.log(`最多显示: ${card_max} 当前起点: ${card_current} 目标起点: ${card_index} 卡片宽度: ${card_width}`)
   } else {
     const card_index = card_current - card_max
     run_to_left_px = card_index * card_width
     if (run_to_left_px <= 0) run_to_left_px = 0
-    // console.log(`最多显示: ${card_max} 当前起点: ${card_current} 目标起点: ${card_index} 卡片宽度: ${card_width}`)
   }
   slideview_content.value.scrollTo({
     top: 0,
@@ -46,6 +49,7 @@ function slideNext(next: boolean) {
 
 // 计算最大显示数量
 function countMaxNumber() {
+  if (!slideview_content.value || !slideview_content.value.firstElementChild) return
   slide_card_length = slideview_content.value.children.length
   card_width = slideview_content.value.firstElementChild.getBoundingClientRect().width
   slide_gap_px = slideview_content.value.scrollWidth / slide_card_length - card_width
@@ -71,6 +75,21 @@ function countDisabled() {
   else disabled.value = 1
 }
 
+// 处理鼠标进入
+function handleMouseEnter() {
+  isHovering.value = true
+}
+
+// 处理鼠标离开
+function handleMouseLeave() {
+  isHovering.value = false
+}
+
+// 检测是否有足够内容可显示
+const hasEnoughContent = computed(() => {
+  return slide_card_length > card_max
+})
+
 // 组件加载完成
 onMounted(() => {
   // 初次获取元素参数
@@ -78,61 +97,222 @@ onMounted(() => {
   // 窗口大小发生改变时
   window.addEventListener('resize', countMaxNumber)
 })
+
 onUnmounted(() => {
   // 卸载事件
   window.removeEventListener('resize', countMaxNumber)
 })
+
 onActivated(() => {
   if (slideview_scrollLeft.value !== 0) {
-    // console.log(`onActivated: to_scrollLeft, ${slideview_scrollLeft.value}`)
     slideview_content.value.scrollLeft = slideview_scrollLeft.value
   }
 })
 </script>
 
 <template>
-  <div class="flex justify-between mt-3">
+  <div 
-    <slot name="title">
+    ref="sliderContainer"
-      <SlideViewTitle />
+    class="slider-container"
-    </slot>
+    @mouseenter="handleMouseEnter"
-    <div v-if="disabled !== 3 && display.mdAndUp.value" class="me-1 d-flex">
+    @mouseleave="handleMouseLeave"
-      <VBtn
-        class="rounded-circle"
-        variant="text"
-        icon="mdi-chevron-left"
-        color="grey"
-        :disabled="disabled === 0"
-        @click="slideNext(false)"
-      />
-      <VBtn
-        class="rounded-circle"
-        variant="text"
-        icon="mdi-chevron-right"
-        color="grey"
-        :disabled="disabled === 2"
-        @click="slideNext(true)"
-      />
-    </div>
-  </div>
-  <div
-    ref="slideview_content"
-    class="slideview_content grid grid-rows-1 grid-flow-col justify-start gap-4 p-3"
-    tabindex="0"
-    @scroll="countDisabled"
   >
-    <slot name="content" />
+    <div class="slider-header">
+      <slot name="title">
+        <SlideViewTitle />
+      </slot>
+      
+      <!-- 查看全部按钮 -->
+      <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"
+        >
+          <slot name="content" />
+        </div>
+      </div>
+      
+      <!-- 左侧导航按钮 -->
+      <button 
+        class="nav-button nav-button-left"
+        @click.stop="slideNext(false)"
+        v-show="isHovering && disabled !== 0 && disabled !== 3"
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24">
+          <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
+        </svg>
+      </button>
+      
+      <!-- 右侧导航按钮 -->
+      <button 
+        class="nav-button nav-button-right"
+        @click.stop="slideNext(true)"
+        v-show="isHovering && disabled !== 2 && disabled !== 3"
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24">
+          <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
+        </svg>
+      </button>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.slideview_content {
+.slider-container {
+  position: relative;
+  margin-bottom: 24px;
+  // 移除padding，按钮放置在外部
+}
+
+.slider-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding: 0 8px;
+  gap: 16px;
+  
+  & > :first-child {
+    flex-grow: 1;
+    min-width: 0;
+  }
+}
+
+.view-all-button {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  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;
+  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;
+  }
+}
+
+.slider-content-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.slider-content-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.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);
+  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;
+  opacity: 0;
+  pointer-events: none;
+  
+  svg {
+    fill: rgb(var(--v-theme-on-surface));
+    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);
+    
+    svg {
+      opacity: 1;
+    }
+  }
+}
+
+.nav-button-left {
+  left: -19px; // 半径
+}
+
+.nav-button-right {
+  right: -19px; // 半径
+}
+
+.slider-content {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-auto-flow: column;
+  justify-content: start;
+  gap: 16px;
+  padding: 8px 12px;
   overflow: scroll hidden !important;
   -ms-overflow-style: none !important;
   overscroll-behavior-x: contain !important;
   scrollbar-width: none !important;
+  scroll-behavior: smooth;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
-.slideview_content::-webkit-scrollbar {
+.slider-container:hover .nav-button[style*="display: none;"] ~ .nav-button,
-  display: none;
+.slider-container:hover .nav-button {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.nav-button[style*="display: none;"] {
+  opacity: 0 !important;
+  pointer-events: none !important;
 }
 </style>

src/components/slide/SlideViewTitle.vue

@@ -4,10 +4,41 @@ const props: any = inject('rankingPropsKey')
 </script>
 
 <template>
-  <div class="ms-1">
+  <div class="title-wrapper">
-    <RouterLink :to="props?.linkurl ? props?.linkurl : ''" class="slider-title">
+    <div class="title-section">
-      <span>{{ props?.title }}</span>
+      <div class="title-badge"></div>
-      <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
+      <h3 class="title-text">{{ props?.title }}</h3>
-    </RouterLink>
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.title-section {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.title-badge {
+  width: 3px;
+  height: 16px;
+  background-color: rgb(var(--v-theme-primary));
+  margin-right: 8px;
+  border-radius: 2px;
+}
+
+.title-text {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: rgba(var(--v-theme-on-background), 0.95);
+  margin: 0;
+  padding: 0;
+}
+</style>

src/pages/recommend.vue

@@ -8,6 +8,35 @@ import { useDisplay } from 'vuetify'
 const display = useDisplay()
 const appMode = inject('pwaMode') && display.mdAndDown.value
 
+// 当前选择的分类
+const currentCategory = ref('电影')
+
+// 定义分类类型
+type CategoryType = '电影' | '电视剧' | '动漫' | '榜单'
+type CategoryMap = Record<CategoryType, Array<{apipath: string; linkurl: string; title: string}>>
+
+// 预处理的分类视图数据
+const categoryViewsMap = reactive<CategoryMap>({
+  电影: [],
+  电视剧: [],
+  动漫: [],
+  榜单: []
+})
+
+// 按分类过滤视图的映射
+const getCategoryForView = (title: string): CategoryType => {
+  if (title.includes('电影') || title.includes('热映') || (title.includes('TOP250') && !title.includes('剧集'))) {
+    return '电影'
+  } else if (title.includes('电视剧') || (title.includes('剧集') && !title.includes('动漫'))) {
+    return '电视剧'
+  } else if (title.includes('动漫') || title.includes('Bangumi')) {
+    return '动漫'
+  } else if (title.includes('TOP') || title.includes('榜') || title.includes('趋势')) {
+    return '榜单'
+  }
+  return '电影' // 默认分类
+}
+
 const viewList = reactive<{ apipath: string; linkurl: string; title: string }[]>([
   {
     apipath: 'recommend/tmdb_trending',
@@ -76,8 +105,10 @@ const viewList = reactive<{ apipath: string; linkurl: string; title: string }[]>
   },
 ])
 
-// 计算启用的视图
+// 计算当前分类下显示的视图
-const enabledViews = computed(() => viewList.filter(item => enableConfig.value[item.title]))
+const filteredViews = computed(() => {
+  return categoryViewsMap[currentCategory.value as CategoryType]
+})
 
 // 榜单启用配置， 以title为key
 const enableConfig = ref<{ [key: string]: boolean }>({
@@ -90,6 +121,21 @@ const dialog = ref(false)
 // 额外的数据源
 const extraRecommendSources = ref<RecommendSource[]>([])
 
+// 分类视图
+function updateCategoryViews() {
+  // 清空所有分类
+  (Object.keys(categoryViewsMap) as CategoryType[]).forEach(category => {
+    categoryViewsMap[category] = []
+  })
+  
+  // 先把所有启用的视图按照分类归类
+  const enabledViews = viewList.filter(item => enableConfig.value[item.title])
+  enabledViews.forEach(view => {
+    const category = getCategoryForView(view.title)
+    categoryViewsMap[category].push(view)
+  })
+}
+
 // 加载额外的发现数据源
 async function loadExtraRecommendSources() {
   try {
@@ -102,6 +148,8 @@ async function loadExtraRecommendSources() {
           title: source.name,
         })),
       )
+      // 添加新视图后更新分类
+      updateCategoryViews()
     }
   } catch (error) {
     console.log(error)
@@ -121,6 +169,8 @@ async function loadConfig() {
       localStorage.setItem('MP_RECOMMEND', JSON.stringify(response.data.value))
     }
   }
+  // 配置加载后更新分类
+  updateCategoryViews()
 }
 
 // 设置项目
@@ -136,6 +186,21 @@ async function saveConfig() {
     console.error(error)
   }
   dialog.value = false
+  
+  // 保存后更新分类
+  updateCategoryViews()
+}
+
+const scrollToTop = () => {
+  window.scrollTo({top: 0, behavior: 'smooth'})
+}
+
+// 标签图标映射
+const categoryIcons: Record<CategoryType, string> = {
+  电影: 'mdi-movie',
+  电视剧: 'mdi-television-classic',
+  动漫: 'mdi-animation',
+  榜单: 'mdi-trophy'
 }
 
 onBeforeMount(async () => {
@@ -149,48 +214,495 @@ onMounted(async () => {
 onActivated(async () => {
   loadExtraRecommendSources()
 })
+
+// 监听分类变更，平滑过渡
+watch(currentCategory, () => {
+  // 当分类变更时，应用渐变动画
+  const contentGroups = document.querySelectorAll('.content-group')
+  contentGroups.forEach(group => {
+    group.classList.add('fade-transition')
+  })
+})
 </script>
 
 <template>
-  <div>
+  <div class="mp-recommend">
-    <MediaCardSlideView v-for="item in enabledViews" :key="item.title" v-bind="item" />
+    <!-- 页面顶部控制栏 -->
-    <!-- 弹窗，根据配置生成选项 -->
+    <div class="recommend-header">
-    <VDialog v-if="dialog" v-model="dialog" max-width="35rem" scrollable>
+      <div class="header-tabs">
-      <VCard>
+        <div 
-        <VCardItem>
+          v-for="(category, idx) in ['电影', '电视剧', '动漫', '榜单']" 
-          <VCardTitle>设置推荐榜单</VCardTitle>
+          :key="idx"
+          class="header-tab"
+          :class="{ 'active': currentCategory === category }"
+          @click="currentCategory = category"
+        >
+          <VIcon
+            :icon="categoryIcons[category as CategoryType]"
+            size="small"
+            class="header-tab-icon"
+          />
+          <span>{{ category }}</span>
+        </div>
+      </div>
+      
+      <button
+        class="tune-button"
+        @click="dialog = true"
+      >
+        <div class="tune-icon">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <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"
+        />
+      </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>
+      </div>
+    </div>
+    
+    <!-- 设置面板 -->
+    <VDialog v-model="dialog" width="500" class="settings-dialog" scrollable>
+      <VCard class="settings-card">
+        <VCardItem class="settings-card-header">
+          <VCardTitle>
+            <VIcon icon="mdi-tune" size="small" class="me-2" />
+            自定义内容
+          </VCardTitle>
+          <template #append>
+            <VBtn icon="mdi-close" variant="text" @click="dialog = false" />
+          </template>
         </VCardItem>
+        
         <VDivider />
+        
         <VCardText>
-          <VRow>
+          <p class="settings-hint">选择您想在页面显示的内容</p>
-            <VCol v-for="item in viewList" :key="item.title" cols="6" md="4" sm="4">
+          
-              <VCheckbox v-model="enableConfig[item.title]" :label="item.title" />
+          <div class="settings-grid">
-            </VCol>
+            <div
-          </VRow>
+              v-for="(item, index) in viewList"
+              :key="index"
+              class="setting-item"
+              :class="{ 
+                'enabled': enableConfig[item.title],
+                [getCategoryForView(item.title)]: true
+              }"
+              @click="enableConfig[item.title] = !enableConfig[item.title]"
+            >
+              <div class="setting-item-inner">
+                <div class="setting-check">
+                  <VIcon 
+                    :icon="enableConfig[item.title] ? 'mdi-check-circle' : 'mdi-circle-outline'"
+                    :color="enableConfig[item.title] ? 'primary' : undefined"
+                    size="small"
+                  />
+                </div>
+                <span class="setting-label">{{ item.title }}</span>
+              </div>
+            </div>
+          </div>
         </VCardText>
+        
         <VDivider />
-        <VCardText class="pt-5 text-end">
+        
-          <VSpacer />
+        <VCardActions>
-          <VBtn variant="outlined" color="secondary" class="me-4" @click="dialog = false"> 关闭 </VBtn>
+          <VBtn 
-          <VBtn @click="saveConfig">
+            variant="text" 
-            <template #prepend>
+            @click="Object.keys(enableConfig).forEach(key => enableConfig[key] = true)"
-              <VIcon icon="mdi-content-save" />
+          >
-            </template>
+            全选
-            保存
           </VBtn>
-        </VCardText>
+          <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>
+        </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>
   </div>
-  <!-- 底部操作按钮 -->
-  <VFab
-    icon="mdi-text-box-edit"
-    location="bottom"
-    size="x-large"
-    fixed
-    app
-    appear
-    @click="dialog = true"
-    :class="{ 'mb-12': appMode }"
-  />
 </template>
+
+<style lang="scss" scoped>
+.mp-recommend {
+  position: relative;
+  padding: 0;
+  max-width: 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);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(var(--v-theme-primary), 0.1);
+}
+
+.header-tabs {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding: 4px;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.header-tab {
+  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);
+  
+  &::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;
+    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);
+  }
+}
+
+.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%;
+}
+
+.recommend-content {
+  padding: 0 8px;
+  min-height: 300px;
+}
+
+.empty-category {
+  display: flex;
+  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);
+}
+
+.empty-icon {
+  opacity: 0.5;
+  margin-bottom: 12px;
+}
+
+.empty-text {
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  margin-bottom: 16px;
+}
+
+.content-group {
+  margin-bottom: 24px;
+}
+
+.settings-card {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.settings-card-header {
+  background-color: rgba(var(--v-theme-primary), 0.03);
+}
+
+.settings-hint {
+  font-size: 0.9rem;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  margin-bottom: 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;
+  }
+}
+
+.setting-item-inner {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-surface), 1);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  transition: all 0.2s ease;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 2px 8px rgba(var(--v-theme-on-surface), 0.08);
+  }
+}
+
+.setting-check {
+  margin-right: 8px;
+}
+
+.setting-label {
+  font-size: 0.9rem;
+  white-space: nowrap;
+  overflow: hidden;
+  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;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.fade-move {
+  transition: transform 0.5s ease;
+}
+
+.fade-transition {
+  animation: fadeInOut 0.5s ease;
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0.5;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.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;
+  color: rgb(var(--v-theme-primary));
+  
+  &: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;
+    
+    span {
+      display: block;
+      height: 2px;
+      background-color: rgb(var(--v-theme-primary));
+      border-radius: 2px;
+      transition: all 0.3s ease;
+      
+      &:nth-child(1) {
+        width: 60%;
+      }
+      
+      &:nth-child(2) {
+        width: 80%;
+      }
+      
+      &:nth-child(3) {
+        width: 40%;
+      }
+    }
+  }
+  
+  .tune-text {
+    font-weight: 500;
+    font-size: 0.9rem;
+  }
+  
+  &:hover .tune-icon span {
+    &:nth-child(1) {
+      width: 100%;
+    }
+    
+    &:nth-child(2) {
+      width: 60%;
+    }
+    
+    &:nth-child(3) {
+      width: 80%;
+    }
+  }
+}
+</style>
+

src/types/colorthief.d.ts

@@ -0,0 +1 @@
+