From 873bf905ab699769f10fe2abe1a7cd1235477072 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 5 Jul 2025 12:13:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8A=A8=E6=80=81=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E9=A1=B5=E6=B3=A8=E5=86=8C=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scss/template/placeholders/_misc.scss     |  10 +-
 src/@layouts/components/VerticalNavLayout.vue |  26 +-
 src/components/FileBrowser.vue                |   4 +-
 src/composables/useDynamicHeaderTab.ts        |  51 ++-
 src/layouts/components/DefaultLayout.vue      |  46 ++-
 src/layouts/components/HeaderTab.vue          |   2 -
 src/pages/downloading.vue                     |  23 +-
 src/pages/recommend.vue                       |  87 +++--
 src/pages/setting.vue                         |  21 +-
 src/views/plugin/PluginCardListView.vue       | 342 +++++++++---------
 src/views/reorganize/TransferHistoryView.vue  |   2 +-
 11 files changed, 358 insertions(+), 256 deletions(-)

diff --git a/src/@core/scss/template/placeholders/_misc.scss b/src/@core/scss/template/placeholders/_misc.scss
index 2bc7531e..f7af90c0 100644
--- a/src/@core/scss/template/placeholders/_misc.scss
+++ b/src/@core/scss/template/placeholders/_misc.scss
@@ -9,7 +9,7 @@
       
       // 磨砂渐变效果
       backdrop-filter: blur(20px);
-      block-size: calc(env(safe-area-inset-top, 0px) + 5rem);
+      block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 5rem);
       content: "";
       inset-block-start: 0;
       inset-inline: 0;
@@ -18,10 +18,10 @@
       mask: linear-gradient(
         to bottom,
         rgba(0, 0, 0, 100%) 0%,
-        rgba(0, 0, 0, 90%) calc(env(safe-area-inset-top, 0px) + 1rem),
-        rgba(0, 0, 0, 70%) calc(env(safe-area-inset-top, 0px) + 2rem),
-        rgba(0, 0, 0, 50%) calc(env(safe-area-inset-top, 0px) + 3rem),
-        rgba(0, 0, 0, 20%) calc(env(safe-area-inset-top, 0px) + 4rem),
+        rgba(0, 0, 0, 90%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 1rem),
+        rgba(0, 0, 0, 70%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 2rem),
+        rgba(0, 0, 0, 50%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 3rem),
+        rgba(0, 0, 0, 20%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 4rem),
         rgba(0, 0, 0, 0%) 100%
       );
       pointer-events: none;
diff --git a/src/@layouts/components/VerticalNavLayout.vue b/src/@layouts/components/VerticalNavLayout.vue
index 1335ecbb..602cb5fd 100644
--- a/src/@layouts/components/VerticalNavLayout.vue
+++ b/src/@layouts/components/VerticalNavLayout.vue
@@ -38,15 +38,23 @@ export default defineComponent({
       )
 
       // 👉 Navbar
-      const navbar = h('header', { class: ['layout-navbar navbar-blur'] }, [
-        h(
-          'div',
-          { class: 'navbar-content-container' },
-          slots.navbar?.({
-            toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
-          }),
-        ),
-      ])
+      const navbar = h(
+        'header',
+        { class: ['layout-navbar navbar-blur'] },
+        [
+          h(
+            'div',
+            { class: 'navbar-content-container' },
+            slots.navbar?.({
+              toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
+            }),
+          ),
+          // 👉 Dynamic Header Tab in NavBar
+          slots['dynamic-header-tab']?.()
+            ? h('div', { class: 'layout-dynamic-header-tab' }, slots['dynamic-header-tab']?.())
+            : null,
+        ].filter(Boolean),
+      )
 
       const main = h(
         'main',
diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index 62d67cdd..f7992fb8 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -243,14 +243,14 @@ function stopDrag() {
 
 // 外层DIV大小控制
 const scrollStyle = computed(() => {
-  return appMode
+  return appMode.value
     ? 'height: calc(100vh - 10.5rem - env(safe-area-inset-bottom) - 7rem)'
     : 'height: calc(100vh - 10.5rem - env(safe-area-inset-bottom)'
 })
 
 // 文件列表大小限制
 const fileListStyle = computed(() => {
-  return appMode
+  return appMode.value
     ? 'height: calc(100vh - 14rem - env(safe-area-inset-bottom) - 7rem)'
     : 'height: calc(100vh - 14rem - env(safe-area-inset-bottom)'
 })
diff --git a/src/composables/useDynamicHeaderTab.ts b/src/composables/useDynamicHeaderTab.ts
index 2cc48156..7d5c5763 100644
--- a/src/composables/useDynamicHeaderTab.ts
+++ b/src/composables/useDynamicHeaderTab.ts
@@ -62,23 +62,50 @@ export function useDynamicHeaderTab() {
       }
     })
 
-    // 在组件卸载时取消注册
-    onUnmounted(() => {
+    // 注册函数
+    const doRegister = () => {
+      // 确保路由路径是最新的
+      tabConfig.routePath = route.path
+
+      if (registerDynamicHeaderTab) {
+        registerDynamicHeaderTab(tabConfig)
+      } else if (typeof window !== 'undefined') {
+        // 使用全局方法作为备用
+        const globalRegister = (window as any).__VUE_INJECT_DYNAMIC_HEADER_TAB__
+        if (globalRegister) {
+          globalRegister(tabConfig)
+        }
+      }
+    }
+
+    // 取消注册函数
+    const doUnregister = () => {
       if (unregisterDynamicHeaderTab) {
         unregisterDynamicHeaderTab()
       }
+    }
+
+    // 初始注册（延迟到下个tick，确保路由已经完全切换）
+    nextTick(() => {
+      doRegister()
     })
 
-    // 初始注册
-    if (registerDynamicHeaderTab) {
-      registerDynamicHeaderTab(tabConfig)
-    } else if (typeof window !== 'undefined') {
-      // 使用全局方法作为备用
-      const globalRegister = (window as any).__VUE_INJECT_DYNAMIC_HEADER_TAB__
-      if (globalRegister) {
-        globalRegister(tabConfig)
-      }
-    }
+    // 处理页面激活时重新注册（支持keep-alive缓存的页面）
+    onActivated(() => {
+      nextTick(() => {
+        doRegister()
+      })
+    })
+
+    // 处理页面失活时取消注册（支持keep-alive缓存的页面）
+    onDeactivated(() => {
+      doUnregister()
+    })
+
+    // 在组件卸载时取消注册
+    onUnmounted(() => {
+      doUnregister()
+    })
   }
 
   // 取消注册
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 281994e9..ee088570 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -91,7 +91,8 @@ const dynamicHeaderTab = ref<DynamicHeaderTab | null>(null)
 const registerDynamicHeaderTab = (tab: DynamicHeaderTab) => {
   // 保存注册标签页的路由路径
   tab.routePath = route.path
-  dynamicHeaderTab.value = tab
+  // 强制更新，确保响应式系统能检测到变化
+  dynamicHeaderTab.value = { ...tab }
 }
 
 // 提供一个方法让其他组件取消注册动态标签页
@@ -123,11 +124,17 @@ provide('unregisterDynamicHeaderTab', unregisterDynamicHeaderTab)
 // 监听路由变化来清除动态标签页
 watch(
   () => route.path,
-  newPath => {
-    // 当路由变化时，清除动态标签页（如果不是同一个路由注册的）
-    if (dynamicHeaderTab.value && dynamicHeaderTab.value.routePath !== newPath) {
-      dynamicHeaderTab.value = null
-    }
+  (newPath, oldPath) => {
+    // 使用nextTick确保新页面的组件已经挂载完成
+    nextTick(() => {
+      // 延迟一小段时间，让新页面有机会注册标签页
+      setTimeout(() => {
+        // 如果当前标签页不属于新路由，则清除
+        if (dynamicHeaderTab.value && dynamicHeaderTab.value.routePath !== route.path) {
+          dynamicHeaderTab.value = null
+        }
+      }, 50) // 减少延迟时间，但仍然给新页面注册机会
+    })
   },
   { immediate: false },
 )
@@ -138,7 +145,7 @@ const showDynamicHeaderTab = computed(() => {
     dynamicHeaderTab.value &&
     dynamicHeaderTab.value.items.length > 0 &&
     // 确保只在注册的路由路径下显示标签页
-    (!dynamicHeaderTab.value.routePath || dynamicHeaderTab.value.routePath === route.path)
+    dynamicHeaderTab.value.routePath === route.path
   )
 })
 
@@ -286,7 +293,7 @@ onMounted(() => {
       />
     </div>
   </div>
-  <VerticalNavLayout>
+  <VerticalNavLayout :style="{ '--navbar-height': showDynamicHeaderTab ? '2.5rem' : '0px' }">
     <!-- 👉 Navbar -->
     <template #navbar="{ toggleVerticalOverlayNavActive }">
       <div class="d-flex h-100 align-center mx-1">
@@ -349,16 +356,9 @@ onMounted(() => {
 
     <template #after-vertical-nav-items />
 
-    <!-- 👉 下拉跟随动画 -->
-    <div
-      class="main-content-wrapper"
-      :style="{
-        transform: contentTransform,
-        transition: contentTransition,
-      }"
-    >
-      <!-- 👉 Dynamic Header Tab -->
-      <div v-if="showDynamicHeaderTab" class="dynamic-header-tab-container">
+    <!-- 👉 Dynamic Header Tab -->
+    <template #dynamic-header-tab>
+      <div v-if="showDynamicHeaderTab">
         <HeaderTab
           :items="dynamicHeaderTab!.items"
           :model-value="dynamicHeaderTab!.modelValue"
@@ -380,7 +380,17 @@ onMounted(() => {
           </template>
         </HeaderTab>
       </div>
+    </template>
 
+    <!-- 👉 下拉跟随动画 -->
+    <div
+      class="main-content-wrapper"
+      :style="{
+        transform: contentTransform,
+        transition: contentTransition,
+        paddingTop: showDynamicHeaderTab ? '3rem' : '0px',
+      }"
+    >
       <slot />
     </div>
 
diff --git a/src/layouts/components/HeaderTab.vue b/src/layouts/components/HeaderTab.vue
index d1190401..3b6f6f09 100644
--- a/src/layouts/components/HeaderTab.vue
+++ b/src/layouts/components/HeaderTab.vue
@@ -122,8 +122,6 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-block-end: 16px;
-  padding-block: 8px;
   padding-inline: 16px;
 }
 
diff --git a/src/pages/downloading.vue b/src/pages/downloading.vue
index d0dc838a..a7bd308b 100644
--- a/src/pages/downloading.vue
+++ b/src/pages/downloading.vue
@@ -4,12 +4,13 @@ import { DownloaderConf } from '@/api/types'
 import DownloadingListView from '@/views/reorganize/DownloadingListView.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
 import { useI18n } from 'vue-i18n'
+import { useDynamicHeaderTab } from '@/composables/useDynamicHeaderTab'
 
 // 国际化
 const { t } = useI18n()
 
 const route = useRoute()
-const activeTab = ref(route.query.tab)
+const activeTab = ref<string>((route.query.tab as string) || '')
 
 // 下载器
 const downloaders = ref<DownloaderConf[]>([])
@@ -22,6 +23,9 @@ const downloaderItems = computed(() => {
   }))
 })
 
+// 使用动态标签页
+const { registerHeaderTab } = useDynamicHeaderTab()
+
 // 调用API查询下载器设置
 async function loadDownloaderSetting() {
   try {
@@ -33,19 +37,30 @@ async function loadDownloaderSetting() {
   }
 }
 
+// 注册动态标签页
+const registerTabs = () => {
+  if (downloaderItems.value.length > 0) {
+    registerHeaderTab({
+      items: downloaderItems.value,
+      modelValue: activeTab,
+    })
+  }
+}
+
 onMounted(async () => {
   await loadDownloaderSetting()
+  registerTabs()
 })
 
 onActivated(async () => {
-  loadDownloaderSetting()
+  await loadDownloaderSetting()
+  registerTabs()
 })
 </script>
 
 <template>
   <div v-if="downloaders.length > 0">
-    <VHeaderTab :items="downloaderItems" v-model="activeTab" />
-    <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
+    <VWindow v-model="activeTab" class="disable-tab-transition" :touch="false">
       <VWindowItem v-for="item in downloaders" :value="item.name">
         <transition name="fade-slide" appear>
           <div>
diff --git a/src/pages/recommend.vue b/src/pages/recommend.vue
index 05179656..d7543014 100644
--- a/src/pages/recommend.vue
+++ b/src/pages/recommend.vue
@@ -4,6 +4,7 @@ import { RecommendSource } from '@/api/types'
 import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
+import { useDynamicHeaderTab } from '@/composables/useDynamicHeaderTab'
 
 const display = useDisplay()
 
@@ -165,7 +166,7 @@ async function saveConfig() {
 }
 
 // 标签图标映射
-const categoryItems: Record<string, string>[] = [
+const categoryItems = computed(() => [
   {
     title: t('recommend.all'),
     icon: 'mdi-filmstrip-box-multiple',
@@ -191,7 +192,10 @@ const categoryItems: Record<string, string>[] = [
     icon: 'mdi-trophy',
     tab: t('recommend.categoryRankings'),
   },
-]
+])
+
+// 使用动态标签页
+const { registerHeaderTab } = useDynamicHeaderTab()
 
 onBeforeMount(async () => {
   await loadConfig()
@@ -199,6 +203,23 @@ onBeforeMount(async () => {
 
 onMounted(async () => {
   await loadExtraRecommendSources()
+
+  // 注册动态标签页
+  registerHeaderTab({
+    items: categoryItems.value,
+    modelValue: currentCategory,
+    appendButtons: [
+      {
+        icon: 'mdi-tune',
+        variant: 'text',
+        color: 'grey',
+        class: 'settings-icon-button',
+        action: () => {
+          dialog.value = true
+        },
+      },
+    ],
+  })
 })
 
 onActivated(async () => {
@@ -208,20 +229,6 @@ onActivated(async () => {
 
 <template>
   <div class="mp-recommend">
-    <!-- 页面顶部控制栏 -->
-    <VHeaderTab :items="categoryItems" v-model="currentCategory">
-      <template #append>
-        <VBtn
-          icon="mdi-tune"
-          variant="text"
-          color="grey"
-          size="default"
-          class="settings-icon-button"
-          @click="dialog = true"
-        />
-      </template>
-    </VHeaderTab>
-
     <!-- 滚动内容区域 -->
     <div class="recommend-content">
       <TransitionGroup name="fade">
@@ -362,12 +369,6 @@ onActivated(async () => {
   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;
@@ -399,37 +400,47 @@ onActivated(async () => {
   &.动漫::before {
     background-color: #ff9800;
   } // Orange
-  &.榜单::before {
+  &.排行榜::before {
     background-color: #9c27b0;
   } // Purple
 
-  &: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.3);
+    background-color: rgba(var(--v-theme-primary), 0.1);
   }
 
-  &.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;
-    }
+  &:hover {
+    box-shadow: 0 4px 12px rgba(var(--v-theme-on-surface), 0.1);
+    transform: translateY(-2px);
   }
 }
 
 .setting-item-inner {
   display: flex;
   align-items: center;
+  gap: 8px;
 }
 
 .setting-check {
-  margin-inline-end: 8px;
+  flex-shrink: 0;
 }
 
-/* Remove old tune button styles if they exist */
-.tune-button {
-  display: none; // Hide the old button definitively
+.setting-label {
+  flex: 1;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  font-size: 0.9rem;
+  font-weight: 500;
+  line-height: 1.2;
+  transition: color 0.2s ease;
+}
+
+.enabled .setting-label {
+  color: rgba(var(--v-theme-primary), 0.9);
+}
+
+@media (width <= 600px) {
+  .settings-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/src/pages/setting.vue b/src/pages/setting.vue
index bd010c2b..7030fb8d 100644
--- a/src/pages/setting.vue
+++ b/src/pages/setting.vue
@@ -13,17 +13,32 @@ import AccountSettingDirectory from '@/views/setting/AccountSettingDirectory.vue
 import AccountSettingRule from '@/views/setting/AccountSettingRule.vue'
 import AccountSettingCache from '@/views/setting/AccountSettingCache.vue'
 import { getSettingTabs } from '@/router/i18n-menu'
+import { useDynamicHeaderTab } from '@/composables/useDynamicHeaderTab'
 
 const route = useRoute()
 
-const activeTab = ref(route.query.tab)
+const activeTab = ref((route.query.tab as string) || '')
 const settingTabs = computed(() => getSettingTabs())
+
+// 使用动态标签页
+const { registerHeaderTab } = useDynamicHeaderTab()
+
+// 注册动态标签页
+onMounted(() => {
+  // 设置初始activeTab值
+  if (!activeTab.value && settingTabs.value.length > 0) {
+    activeTab.value = settingTabs.value[0].tab
+  }
+  registerHeaderTab({
+    items: settingTabs.value,
+    modelValue: activeTab,
+  })
+})
 </script>
 
 <template>
   <div>
-    <VHeaderTab :items="settingTabs" v-model="activeTab" />
-    <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
+    <VWindow v-model="activeTab" class="disable-tab-transition" :touch="false">
       <!-- 系统 -->
       <VWindowItem value="system">
         <transition name="fade-slide" appear>
diff --git a/src/views/plugin/PluginCardListView.vue b/src/views/plugin/PluginCardListView.vue
index df312cac..ca695f79 100644
--- a/src/views/plugin/PluginCardListView.vue
+++ b/src/views/plugin/PluginCardListView.vue
@@ -14,6 +14,7 @@ import { useDynamicButton } from '@/composables/useDynamicButton'
 import { useI18n } from 'vue-i18n'
 import PluginMixedSortCard from '@/components/cards/PluginMixedSortCard.vue'
 import { usePWA } from '@/composables/usePWA'
+import { useDynamicHeaderTab } from '@/composables/useDynamicHeaderTab'
 
 // 国际化
 const { t } = useI18n()
@@ -33,6 +34,81 @@ const activeTab = ref('installed')
 // 获取插件标签页
 const pluginTabs = computed(() => getPluginTabs())
 
+// 使用动态标签页
+const { registerHeaderTab } = useDynamicHeaderTab()
+
+// 注册动态标签页（在setup顶层立即执行）
+registerHeaderTab({
+  items: pluginTabs.value,
+  modelValue: activeTab,
+  appendButtons: [
+    {
+      icon: 'mdi-filter-multiple-outline',
+      variant: 'text',
+      color: computed(() =>
+        installedFilter.value || hasUpdateFilter.value || enabledFilter.value ? 'primary' : 'gray',
+      ),
+      class: 'settings-icon-button',
+      dataAttr: 'installed-filter-btn',
+      action: () => {
+        filterInstalledPluginDialog.value = true
+      },
+      show: computed(() => activeTab.value === 'installed'),
+    },
+    {
+      icon: 'mdi-filter-multiple-outline',
+      variant: 'text',
+      color: computed(() => (isFilterFormEmpty.value ? 'gray' : 'primary')),
+      class: 'settings-icon-button',
+      dataAttr: 'market-filter-btn',
+      action: () => {
+        filterMarketPluginDialog.value = true
+      },
+      show: computed(() => activeTab.value === 'market'),
+    },
+    {
+      icon: 'mdi-refresh',
+      variant: 'text',
+      color: 'gray',
+      class: 'settings-icon-button',
+      action: () => {
+        refreshMarket()
+      },
+      show: computed(() => activeTab.value === 'market'),
+    },
+    {
+      icon: 'mdi-store-cog',
+      variant: 'text',
+      color: 'gray',
+      class: 'settings-icon-button',
+      action: () => {
+        MarketSettingDialog.value = true
+      },
+      show: computed(() => activeTab.value === 'market'),
+    },
+    {
+      icon: 'mdi-folder-plus',
+      variant: 'text',
+      color: 'gray',
+      class: 'settings-icon-button',
+      action: () => {
+        showNewFolderDialog()
+      },
+      show: computed(() => activeTab.value === 'installed' && !currentFolder.value),
+    },
+    {
+      icon: 'mdi-arrow-left',
+      variant: 'text',
+      color: 'gray',
+      class: 'settings-icon-button',
+      action: () => {
+        backToMain()
+      },
+      show: computed(() => activeTab.value === 'installed' && !!currentFolder.value),
+    },
+  ],
+})
+
 // 插件ID参数
 const pluginId = ref(route.query.id)
 
@@ -798,6 +874,7 @@ function loadMarketMore({ done }: { done: any }) {
 }
 
 // 组件挂载后
+
 onMounted(async () => {
   await loadPluginOrderConfig()
   await loadPluginFolders() // 加载文件夹配置
@@ -1215,173 +1292,118 @@ function onDragStartPlugin(evt: any) {
 
 <template>
   <div>
-    <VHeaderTab :items="pluginTabs" v-model="activeTab">
-      <template #append>
-        <VMenu
-          v-if="activeTab === 'installed'"
-          v-model="filterInstalledPluginDialog"
-          width="20rem"
-          :close-on-content-click="false"
-          scrim
-        >
-          <template #activator="{ props }">
-            <VBtn
-              icon="mdi-filter-multiple-outline"
-              variant="text"
-              :color="installedFilter || hasUpdateFilter || enabledFilter ? 'primary' : 'gray'"
-              size="default"
-              class="settings-icon-button"
-              v-bind="props"
-            />
-          </template>
-          <VCard>
-            <VCardItem>
-              <VCardTitle>
-                <VIcon icon="mdi-filter-multiple-outline" class="mr-2" />
-                {{ t('plugin.filterPlugins') }}
-              </VCardTitle>
-              <VDialogCloseBtn @click="filterInstalledPluginDialog = false" />
-            </VCardItem>
-            <VCardText>
+    <!-- 过滤弹窗 -->
+    <Teleport to="body" v-if="filterInstalledPluginDialog">
+      <VMenu
+        v-model="filterInstalledPluginDialog"
+        width="20rem"
+        :close-on-content-click="false"
+        :activator="'[data-menu-activator=installed-filter-btn]'"
+        location="bottom end"
+      >
+        <VCard>
+          <VCardItem>
+            <VCardTitle>
+              <VIcon icon="mdi-filter-multiple-outline" class="mr-2" />
+              {{ t('plugin.filterPlugins') }}
+            </VCardTitle>
+            <VDialogCloseBtn @click="filterInstalledPluginDialog = false" />
+          </VCardItem>
+          <VCardText>
+            <VRow>
+              <VCol cols="12">
+                <VCombobox
+                  v-model="installedFilter"
+                  :items="installedPluginNames"
+                  :label="t('plugin.name')"
+                  density="comfortable"
+                  clearable
+                />
+              </VCol>
+              <VCol cols="6">
+                <VSwitch v-model="enabledFilter" :label="t('plugin.running')" />
+              </VCol>
+              <VCol cols="6">
+                <VSwitch v-model="hasUpdateFilter" :label="t('plugin.hasNewVersion')" />
+              </VCol>
+            </VRow>
+          </VCardText>
+        </VCard>
+      </VMenu>
+    </Teleport>
+
+    <Teleport to="body" v-if="filterMarketPluginDialog">
+      <VMenu
+        v-model="filterMarketPluginDialog"
+        width="25rem"
+        :close-on-content-click="false"
+        :activator="'[data-menu-activator=market-filter-btn]'"
+        location="bottom end"
+      >
+        <VCard>
+          <VCardItem>
+            <VCardTitle>
+              <VIcon icon="mdi-filter-multiple-outline" class="mr-2" />
+              {{ t('plugin.filterPlugins') }}
+            </VCardTitle>
+            <VDialogCloseBtn @click="filterMarketPluginDialog = false" />
+          </VCardItem>
+          <VCardText>
+            <!-- 过滤表单 -->
+            <div v-if="isAppMarketLoaded">
               <VRow>
-                <VCol cols="12">
-                  <VCombobox
-                    v-model="installedFilter"
-                    :items="installedPluginNames"
-                    :label="t('plugin.name')"
+                <VCol cols="6">
+                  <VTextField v-model="filterForm.name" density="comfortable" :label="t('plugin.name')" clearable />
+                </VCol>
+                <VCol v-if="authorFilterOptions.length > 0" cols="6">
+                  <VSelect
+                    v-model="filterForm.author"
+                    :items="authorFilterOptions"
                     density="comfortable"
+                    chips
+                    :label="t('plugin.author')"
+                    multiple
                     clearable
                   />
                 </VCol>
-                <VCol cols="6">
-                  <VSwitch v-model="enabledFilter" :label="t('plugin.running')" />
+                <VCol v-if="labelFilterOptions.length > 0" cols="6">
+                  <VSelect
+                    v-model="filterForm.label"
+                    :items="labelFilterOptions"
+                    density="comfortable"
+                    chips
+                    :label="t('plugin.label')"
+                    multiple
+                    clearable
+                  />
                 </VCol>
-                <VCol cols="6">
-                  <VSwitch v-model="hasUpdateFilter" :label="t('plugin.hasNewVersion')" />
+                <VCol v-if="repoFilterOptions.length > 0" cols="6">
+                  <VSelect
+                    v-model="filterForm.repo"
+                    :items="repoFilterOptions"
+                    density="comfortable"
+                    chips
+                    :label="t('plugin.repository')"
+                    multiple
+                    clearable
+                  />
+                </VCol>
+                <VCol v-if="sortOptions.length > 0" cols="6">
+                  <VSelect
+                    v-model="activeSort"
+                    :items="sortOptions"
+                    density="comfortable"
+                    :label="t('plugin.sortTitle')"
+                  />
                 </VCol>
               </VRow>
-            </VCardText>
-          </VCard>
-        </VMenu>
-        <VMenu
-          v-if="activeTab === 'market'"
-          v-model="filterMarketPluginDialog"
-          width="25rem"
-          :close-on-content-click="false"
-          scrim
-        >
-          <template #activator="{ props }">
-            <VBtn
-              icon="mdi-filter-multiple-outline"
-              variant="text"
-              :color="isFilterFormEmpty ? 'gray' : 'primary'"
-              size="default"
-              class="settings-icon-button"
-              v-bind="props"
-            />
-          </template>
-          <VCard>
-            <VCardItem>
-              <VCardTitle>
-                <VIcon icon="mdi-filter-multiple-outline" class="mr-2" />
-                {{ t('plugin.filterPlugins') }}
-              </VCardTitle>
-              <VDialogCloseBtn @click="filterMarketPluginDialog = false" />
-            </VCardItem>
-            <VCardText>
-              <!-- 过滤表单 -->
-              <div v-if="isAppMarketLoaded">
-                <VRow>
-                  <VCol cols="6">
-                    <VTextField v-model="filterForm.name" density="comfortable" :label="t('plugin.name')" clearable />
-                  </VCol>
-                  <VCol v-if="authorFilterOptions.length > 0" cols="6">
-                    <VSelect
-                      v-model="filterForm.author"
-                      :items="authorFilterOptions"
-                      density="comfortable"
-                      chips
-                      :label="t('plugin.author')"
-                      multiple
-                      clearable
-                    />
-                  </VCol>
-                  <VCol v-if="labelFilterOptions.length > 0" cols="6">
-                    <VSelect
-                      v-model="filterForm.label"
-                      :items="labelFilterOptions"
-                      density="comfortable"
-                      chips
-                      :label="t('plugin.label')"
-                      multiple
-                      clearable
-                    />
-                  </VCol>
-                  <VCol v-if="repoFilterOptions.length > 0" cols="6">
-                    <VSelect
-                      v-model="filterForm.repo"
-                      :items="repoFilterOptions"
-                      density="comfortable"
-                      chips
-                      :label="t('plugin.repository')"
-                      multiple
-                      clearable
-                    />
-                  </VCol>
-                  <VCol v-if="sortOptions.length > 0" cols="6">
-                    <VSelect
-                      v-model="activeSort"
-                      :items="sortOptions"
-                      density="comfortable"
-                      :label="t('plugin.sortTitle')"
-                    />
-                  </VCol>
-                </VRow>
-              </div>
-            </VCardText>
-          </VCard>
-        </VMenu>
-        <VBtn
-          v-if="activeTab === 'market'"
-          icon="mdi-refresh"
-          variant="text"
-          color="gray"
-          size="default"
-          class="settings-icon-button"
-          :loading="isMarketRefreshing"
-          @click="refreshMarket"
-        />
-        <VBtn
-          v-if="activeTab === 'market'"
-          icon="mdi-store-cog"
-          variant="text"
-          color="gray"
-          size="default"
-          class="settings-icon-button"
-          @click="MarketSettingDialog = true"
-        />
-        <VBtn
-          v-if="activeTab === 'installed' && !currentFolder"
-          icon="mdi-folder-plus"
-          variant="text"
-          color="gray"
-          size="default"
-          class="settings-icon-button"
-          @click="showNewFolderDialog"
-        />
-        <VBtn
-          v-if="activeTab === 'installed' && currentFolder"
-          icon="mdi-arrow-left"
-          variant="text"
-          color="gray"
-          size="default"
-          class="settings-icon-button"
-          @click="backToMain"
-        />
-      </template>
-    </VHeaderTab>
+            </div>
+          </VCardText>
+        </VCard>
+      </VMenu>
+    </Teleport>
 
-    <VWindow v-model="activeTab" class="mt-5 disable-tab-transition px-2" :touch="false">
+    <VWindow v-model="activeTab" class="disable-tab-transition px-2" :touch="false">
       <!-- 我的插件 -->
       <VWindowItem value="installed">
         <transition name="fade-slide" appear>
@@ -1626,7 +1648,3 @@ function onDragStartPlugin(evt: any) {
     </VCard>
   </VDialog>
 </template>
-
-<style lang="scss" scoped>
-// 样式已移至 PluginMixedSortCard 组件
-</style>
diff --git a/src/views/reorganize/TransferHistoryView.vue b/src/views/reorganize/TransferHistoryView.vue
index 738f8c8d..6e2adb3b 100644
--- a/src/views/reorganize/TransferHistoryView.vue
+++ b/src/views/reorganize/TransferHistoryView.vue
@@ -215,7 +215,7 @@ const TransferDict: { [key: string]: string } = {
 }
 
 const tableStyle = computed(() => {
-  return appMode
+  return appMode.value
     ? 'height: calc(100vh - 15rem - env(safe-area-inset-bottom) - 7rem)'
     : 'height: calc(100vh - 15rem - env(safe-area-inset-bottom)'
 })