From fc357a03e5843f7d945bb5d193db5a592e5132cf Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 9 Apr 2025 10:39:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20HeaderTab=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BB=A5=E6=94=AF=E6=8C=81=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E9=A1=B9=E5=92=8C=E6=8E=92=E5=BA=8F=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/HeaderTab.vue |  10 +-
 src/pages/dashboard.vue              | 105 +++++++++---------
 src/pages/discover.vue               | 156 ++++++++++++++++++++++++---
 src/pages/downloading.vue            |  19 ++--
 src/pages/recommend.vue              |  12 +--
 src/pages/subscribe.vue              |   2 +-
 6 files changed, 208 insertions(+), 96 deletions(-)

diff --git a/src/layouts/components/HeaderTab.vue b/src/layouts/components/HeaderTab.vue
index ed81aaea..2c2d80d3 100644
--- a/src/layouts/components/HeaderTab.vue
+++ b/src/layouts/components/HeaderTab.vue
@@ -73,14 +73,14 @@ onUnmounted(() => {
   <div class="tab-header">
     <div ref="tabsContainerRef" class="header-tabs" :class="{ 'show-indicator': showTabsScrollIndicator }">
       <div
-        v-for="(category, index) in items"
+        v-for="(item, index) in items"
         :key="index"
         class="header-tab"
-        :class="{ 'active': currentValue === category.title }"
-        @click="currentValue = category.title"
+        :class="{ 'active': currentValue === item.title }"
+        @click="currentValue = item.title"
       >
-        <VIcon :icon="category.icon" size="small" class="header-tab-icon" />
-        <span>{{ category.title }}</span>
+        <VIcon v-if="item.icon" :icon="item.icon" size="small" class="header-tab-icon" />
+        <span>{{ item.title }}</span>
       </div>
     </div>
     <slot name="append" />
diff --git a/src/pages/dashboard.vue b/src/pages/dashboard.vue
index 83054163..47858184 100644
--- a/src/pages/dashboard.vue
+++ b/src/pages/dashboard.vue
@@ -347,6 +347,7 @@ onDeactivated(() => {
           <VIcon icon="mdi-tune" size="small" class="me-2" />
           设置仪表板
         </VCardTitle>
+        <DialogCloseBtn @click="dialog = false" />
       </VCardItem>
       <VDivider />
       <VCardText>
@@ -385,7 +386,6 @@ onDeactivated(() => {
       <VDivider />
       <VCardText class="pt-5 text-end">
         <VSpacer />
-        <VBtn variant="outlined" color="secondary" class="me-4" @click="dialog = false"> 关闭 </VBtn>
         <VBtn @click="saveDashboardConfig">
           <template #prepend>
             <VIcon icon="mdi-content-save" />
@@ -397,78 +397,73 @@ onDeactivated(() => {
   </VDialog>
 </template>
 <style lang="scss" scoped>
-.settings-card {
-  overflow: hidden;
-  border-radius: 12px;
-}
-
 .settings-card-header {
-  background-color: rgba(var(--v-theme-primary), 0.03);
+  padding-block: 16px;
+  padding-inline: 20px;
 }
 
 .settings-hint {
-  color: rgba(var(--v-theme-on-surface), 0.6);
+  color: rgba(var(--v-theme-on-surface), 0.7);
   font-size: 0.9rem;
   margin-block-end: 16px;
 }
 
 .settings-grid {
   display: grid;
-  gap: 8px;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+}
+
+.setting-label {
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  font-size: 0.9rem;
+  transition: color 0.2s ease;
+}
+
+.setting-item {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-surface-variant), 0.3);
+  cursor: pointer;
+  padding-block: 10px;
+  padding-inline: 12px;
+  transition: all 0.2s ease;
+
+  &::before {
+    position: absolute;
+    background-color: transparent;
+    block-size: 100%;
+    content: '';
+    inline-size: 4px;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    transition: background-color 0.3s ease;
+  }
+
+  &:hover {
+    border-color: rgba(var(--v-theme-on-surface), 0.15);
+    background-color: rgba(var(--v-theme-surface-variant), 0.6);
+  }
+
+  &.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;
+    }
+  }
 }
 
 .setting-item-inner {
   display: flex;
   align-items: center;
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
-  border-radius: 8px;
-  background-color: rgba(var(--v-theme-surface), 1);
-  padding-block: 10px;
-  padding-inline: 12px;
-  transition: all 0.2s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-  }
-}
-
-.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-inline-end: 8px;
 }
-
-.setting-label {
-  overflow: hidden;
-  font-size: 0.9rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 </style>
diff --git a/src/pages/discover.vue b/src/pages/discover.vue
index 5a1d00ef..8013cf52 100644
--- a/src/pages/discover.vue
+++ b/src/pages/discover.vue
@@ -7,6 +7,7 @@ import BangumiView from '@/views/discover/BangumiView.vue'
 import ExtraSourceView from '@/views/discover/ExtraSourceView.vue'
 import { DiscoverSource } from '@/api/types'
 import api from '@/api'
+import { or } from '@vueuse/math'
 
 const activeTab = ref('')
 
@@ -19,9 +20,19 @@ const orderConfig = ref<{ name: string }[]>([])
 // 标签页
 const discoverTabs = ref<DiscoverSource[]>([])
 
+// 标签页项
+const discoverTabItems = computed(() => {
+  return discoverTabs.value.map(item => ({
+    title: item.name,
+  }))
+})
+
 // 额外的数据源
 const extraDiscoverSources = ref<DiscoverSource[]>([])
 
+// 排序对话框
+const orderConfigDialog = ref(false)
+
 // 初始化发现标签
 function initDiscoverTabs() {
   for (const tab of DiscoverTabs) {
@@ -85,6 +96,7 @@ async function loadOrderConfig() {
 
 // 保存顺序设置
 async function saveTabOrder() {
+  orderConfigDialog.value = false
   // 顺序配置
   const orderObj = discoverTabs.value.map(item => ({ name: item.name }))
   orderConfig.value = orderObj
@@ -106,7 +118,7 @@ onBeforeMount(async () => {
   sortSubscribeOrder()
   // 选中第一个标签页
   if (discoverTabs.value.length > 0) {
-    activeTab.value = discoverTabs.value[0].mediaid_prefix
+    activeTab.value = discoverTabs.value[0].name
   }
 })
 
@@ -114,44 +126,46 @@ onActivated(async () => {
   await loadExtraDiscoverSources()
   sortSubscribeOrder()
 })
-
 </script>
 
 <template>
   <div>
-    <VTabs v-model="activeTab" show-arrows stacked>
-      <draggable v-model="discoverTabs" handle=".tab-move" item-key="tab" tag="div" @end="saveTabOrder">
-        <template #item="{ element }">
-          <VTab :key="element.mediaid_prefix" :value="element.mediaid_prefix" class="px-10 rounded-t-lg">
-            <span class="tab-move">{{ element.name }}</span>
-          </VTab>
-        </template>
-      </draggable>
-    </VTabs>
+    <VHeaderTab :items="discoverTabItems" v-model="activeTab">
+      <template #append>
+        <VBtn
+          icon="mdi-order-alphabetical-ascending"
+          variant="text"
+          color="primary"
+          size="default"
+          class="settings-icon-button"
+          @click="orderConfigDialog = true"
+        />
+      </template>
+    </VHeaderTab>
 
     <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
-      <VWindowItem value="themoviedb">
+      <VWindowItem value="TheMovieDb">
         <transition name="fade-slide" appear>
           <div>
             <TheMovieDbView />
           </div>
         </transition>
       </VWindowItem>
-      <VWindowItem value="douban">
+      <VWindowItem value="豆瓣">
         <transition name="fade-slide" appear>
           <div>
             <DoubanView />
           </div>
         </transition>
       </VWindowItem>
-      <VWindowItem value="bangumi">
+      <VWindowItem value="Bangumi">
         <transition name="fade-slide" appear>
           <div>
             <BangumiView />
           </div>
         </transition>
       </VWindowItem>
-      <VWindowItem v-for="item in extraDiscoverSources" :key="item.mediaid_prefix" :value="item.mediaid_prefix">
+      <VWindowItem v-for="item in extraDiscoverSources" :key="item.mediaid_prefix" :value="item.name">
         <transition name="fade-slide" appear>
           <div>
             <ExtraSourceView :source="item" />
@@ -159,7 +173,119 @@ onActivated(async () => {
         </transition>
       </VWindowItem>
     </VWindow>
+    <!-- 弹窗，根据配置生成选项 -->
+    <VDialog v-if="orderConfigDialog" v-model="orderConfigDialog" max-width="35rem" scrollable>
+      <VCard>
+        <VCardItem>
+          <VCardTitle>
+            <VIcon icon="mdi-order-alphabetical-ascending" size="small" class="me-2" />
+            设置标签顺序
+          </VCardTitle>
+          <DialogCloseBtn @click="orderConfigDialog = false" />
+        </VCardItem>
+        <VDivider />
+        <VCardText>
+          <p class="settings-hint">拖动对标签页进行排序</p>
+          <draggable
+            v-model="discoverTabs"
+            handle=".cursor-move"
+            item-key="mediaid_prefix"
+            tag="div"
+            :component-data="{ 'class': 'settings-grid' }"
+          >
+            <template #item="{ element }">
+              <div class="setting-item enabled">
+                <div class="setting-item-inner cursor-move text-center">
+                  <span class="setting-label">{{ element.name }}</span>
+                </div>
+              </div>
+            </template>
+          </draggable>
+        </VCardText>
+        <VDivider />
+        <VCardText class="pt-5 text-end">
+          <VSpacer />
+          <VBtn @click="saveTabOrder">
+            <template #prepend>
+              <VIcon icon="mdi-content-save" />
+            </template>
+            保存
+          </VBtn>
+        </VCardText>
+      </VCard>
+    </VDialog>
     <!-- 快速滚动到顶部按钮 -->
     <VScrollToTopBtn />
   </div>
 </template>
+<style lang="scss" scoped>
+.settings-card-header {
+  padding-block: 16px;
+  padding-inline: 20px;
+}
+
+.settings-hint {
+  color: rgba(var(--v-theme-on-surface), 0.7);
+  font-size: 0.9rem;
+  margin-block-end: 16px;
+}
+
+.settings-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+}
+
+.setting-label {
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  font-size: 0.9rem;
+  transition: color 0.2s ease;
+}
+
+.setting-item {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-surface-variant), 0.3);
+  cursor: pointer;
+  padding-block: 10px;
+  padding-inline: 12px;
+  transition: all 0.2s ease;
+
+  &::before {
+    position: absolute;
+    background-color: transparent;
+    block-size: 100%;
+    content: '';
+    inline-size: 4px;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    transition: background-color 0.3s ease;
+  }
+
+  &:hover {
+    border-color: rgba(var(--v-theme-on-surface), 0.15);
+    background-color: rgba(var(--v-theme-surface-variant), 0.6);
+  }
+
+  &.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;
+    }
+  }
+}
+
+.setting-item-inner {
+  display: flex;
+  align-items: center;
+}
+
+.setting-check {
+  margin-inline-end: 8px;
+}
+</style>
diff --git a/src/pages/downloading.vue b/src/pages/downloading.vue
index 1efd84fc..9d8341e2 100644
--- a/src/pages/downloading.vue
+++ b/src/pages/downloading.vue
@@ -2,7 +2,6 @@
 import api from '@/api'
 import { DownloaderConf } from '@/api/types'
 import DownloadingListView from '@/views/reorganize/DownloadingListView.vue'
-import router from '@/router'
 import NoDataFound from '@/components/NoDataFound.vue'
 
 const route = useRoute()
@@ -11,6 +10,13 @@ const activeTab = ref(route.query.tab)
 // 下载器
 const downloaders = ref<DownloaderConf[]>([])
 
+// 下载器字典
+const downloaderItems = computed(() => {
+  return downloaders.value.map(item => ({
+    title: item.name,
+  }))
+})
+
 // 调用API查询下载器设置
 async function loadDownloaderSetting() {
   try {
@@ -22,10 +28,6 @@ async function loadDownloaderSetting() {
   }
 }
 
-function jumpTab(tab: string) {
-  router.push('/subscribe/movie?tab=' + tab)
-}
-
 onMounted(async () => {
   await loadDownloaderSetting()
 })
@@ -37,12 +39,7 @@ onActivated(async () => {
 
 <template>
   <div v-if="downloaders.length > 0">
-    <VTabs v-model="activeTab" show-arrows stacked>
-      <VTab v-for="item in downloaders" :value="item.name" @to="jumpTab(item.name)" class="px-10 rounded-t-lg">
-        {{ item.name }}
-      </VTab>
-    </VTabs>
-
+    <VHeaderTab :items="downloaderItems" v-model="activeTab" />
     <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
       <VWindowItem v-for="item in downloaders" :value="item.name">
         <transition name="fade-slide" appear>
diff --git a/src/pages/recommend.vue b/src/pages/recommend.vue
index f215699a..2776b2c9 100644
--- a/src/pages/recommend.vue
+++ b/src/pages/recommend.vue
@@ -236,16 +236,14 @@ watch(currentCategory, () => {
     </div>
 
     <!-- 设置面板 -->
-    <VDialog v-model="dialog" width="500" class="settings-dialog" scrollable>
+    <VDialog v-model="dialog" width="35rem" 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>
+          <DialogCloseBtn @click="dialog = false" />
         </VCardItem>
         <VDivider />
         <VCardText>
@@ -347,10 +345,6 @@ watch(currentCategory, () => {
 }
 
 /* Settings Dialog Styles */
-.settings-dialog .v-card {
-  border-radius: 12px;
-}
-
 .settings-card-header {
   padding-block: 16px;
   padding-inline: 20px;
@@ -365,7 +359,7 @@ watch(currentCategory, () => {
 .settings-grid {
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 }
 
 .setting-label {
diff --git a/src/pages/subscribe.vue b/src/pages/subscribe.vue
index b9e68d55..697d9ae4 100644
--- a/src/pages/subscribe.vue
+++ b/src/pages/subscribe.vue
@@ -21,7 +21,7 @@ const subscribeEditDialog = ref(false)
     <VHeaderTab :items="subType == '电影' ? SubscribeMovieTabs : SubscribeTvTabs" v-model="activeTab">
       <template #append>
         <VBtn
-          icon="mdi-clipboard-edit"
+          icon="mdi-clipboard-edit-outline"
           variant="text"
           color="primary"
           size="default"